:root{
  --bg:#050914;
  --bg2:#08111f;
  --panel:#0d1422;
  --panel2:#101827;
  --border:#22304a;
  --text:#f6f8ff;
  --muted:#aab3c5;
  --muted2:#7f8aa3;
  --blue:#4f7cff;
  --blue2:#72a1ff;
  --line:rgba(79,124,255,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 10%, rgba(43,88,210,.25), transparent 36%),
    linear-gradient(180deg,#050914 0%,#07101c 100%);
}
a{color:inherit;text-decoration:none}
.nav{
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 64px;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(5,9,20,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.brand img{width:164px;height:auto;display:block}
.navlinks{display:flex;align-items:center;gap:34px;font-size:15px;color:#fff}
.navlinks a{opacity:.92}
.navlinks a.active{color:var(--blue2);position:relative}
.navlinks a.active:after{
  content:"";position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);
  width:28px;height:2px;background:var(--blue);
}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,#356bff,#4f7cff);
  color:#fff!important;
  padding:16px 24px;
  border-radius:8px;
  font-weight:600;
  box-shadow:0 14px 40px rgba(79,124,255,.25);
  border:1px solid rgba(255,255,255,.12);
}
.button.small{padding:14px 22px;border-radius:7px}

main{max-width:1440px;margin:0 auto}
.hero{
  min-height:560px;
  display:grid;
  grid-template-columns: 48% 52%;
  align-items:center;
  padding:70px 64px 84px;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.hero-copy{max-width:610px;z-index:2}
.eyebrow{
  margin:0 0 22px;
  color:var(--blue2);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:14px;
  font-weight:700;
}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:58px;
  line-height:1.07;
  letter-spacing:-.045em;
  margin-bottom:22px;
}
.lead{
  color:#d6dbea;
  font-size:20px;
  line-height:1.55;
  max-width:620px;
  margin-bottom:42px;
}
.hero-visual{position:relative;height:420px}
.hero-visual img{
  position:absolute;right:-180px;top:-60px;
  width:900px;max-width:none;
  opacity:.9;
}
.split-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding:86px 64px 70px;
  border-bottom:1px solid var(--border);
}
.split-section h2,.roles-section h2,.open-cta h2{font-size:34px;line-height:1.18;letter-spacing:-.025em;margin-bottom:22px}
.split-section p{font-size:17px;line-height:1.65;color:var(--muted);max-width:590px}
.accent-copy{color:var(--blue2)!important;font-weight:500}
.card{
  background:linear-gradient(180deg,rgba(16,24,39,.86),rgba(9,16,28,.86));
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.team-signal{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:24px;
  align-items:start;
  padding:50px;
}
.team-signal img,.role-card img,.work-item img,.cta-copy img{width:58px;height:58px}
.team-signal h3{font-size:24px;margin:0 0 14px}
.roles-section{padding:70px 64px 46px;border-bottom:1px solid var(--border)}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.role-card{
  min-height:190px;
  padding:28px;
  background:linear-gradient(180deg,rgba(16,24,39,.82),rgba(8,17,31,.82));
  border:1px solid var(--border);
  border-radius:12px;
}
.role-card{display:grid;grid-template-columns:76px 1fr;column-gap:20px;align-items:start}
.role-card img{grid-row:1 / span 2}
.role-card h3{font-size:22px;line-height:1.2;margin:4px 0 12px}
.role-card p{color:var(--muted);line-height:1.58;margin:0;font-size:15px}
.work-section{padding:42px 64px 60px;border-bottom:1px solid var(--border)}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.work-item{display:flex;gap:18px;align-items:flex-start;padding-right:22px;border-right:1px solid var(--border)}
.work-item:last-child{border-right:0}
.work-item img{width:54px;height:54px;flex:0 0 auto}
.work-item h3{font-size:17px;margin-bottom:8px}
.work-item p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.open-cta{
  margin:60px 64px 70px;
  min-height:188px;
  display:grid;
  grid-template-columns:1fr 42%;
  overflow:hidden;
}
.cta-copy{display:flex;gap:28px;align-items:center;padding:44px}
.cta-copy h2{margin-bottom:10px}
.cta-copy p{color:var(--muted);margin-bottom:14px}
.cta-copy a{color:var(--blue2);font-weight:600}
.city{height:100%;width:100%;object-fit:cover;opacity:.8;border-left:1px solid var(--border)}
.footer{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1.2fr 1.2fr;gap:44px;
  padding:30px 64px 42px;
}
.footer-brand img{width:168px;margin-bottom:14px}
.footer p{color:var(--muted);max-width:270px;line-height:1.6}
.footer h4{font-size:14px;color:#fff;margin:12px 0 16px}
.footer a{display:block;color:#d7dcea;margin:0 0 12px;font-size:14px}
.socials{display:flex;gap:10px;margin-top:16px}
.socials img{width:36px;height:36px}
.legal{
  max-width:1312px;margin:0 auto;padding:18px 0 36px;
  display:flex;justify-content:space-between;
  color:var(--muted2);font-size:13px;border-top:1px solid var(--border);
}
.legal a{margin-left:26px;color:var(--muted2)}
@media (max-width: 900px){
  .nav{padding:0 24px}.navlinks{gap:16px}.navlinks a:not(.button){display:none}
  .hero,.split-section,.open-cta{grid-template-columns:1fr;padding-left:24px;padding-right:24px}
  h1{font-size:44px}.hero-visual{height:220px}.hero-visual img{right:-260px;top:-140px}
  .role-grid,.work-grid,.footer{grid-template-columns:1fr}
  .work-item{border-right:0;border-bottom:1px solid var(--border);padding-bottom:18px}
  .city{display:none}.roles-section,.work-section{padding-left:24px;padding-right:24px}
  .open-cta{margin-left:24px;margin-right:24px}.legal{margin:0 24px;display:block}.legal span{display:block;margin-bottom:12px}
}



/* ------------------------------------------------------------------
   CAREERS PAGE DESKTOP-CANVAS LOCK — SAFE VERSION
   Keeps the Careers page visually stable like the Home/About pages.
   This is appended after the original CSS so it overrides the mobile
   collapse rules without replacing the original page styling.
------------------------------------------------------------------- */

html,
body{
  min-width:1180px;
}

body{
  overflow-x:auto;
}

/* Match the Home/About fixed desktop canvas */
.nav,
main,
.footer{
  width:1180px !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.legal{
  width:1044px !important;
  max-width:1044px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Header polish + logo breathing room */
.nav{
  min-height:104px !important;
  height:auto !important;
  padding:24px 68px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.brand img{
  width:184px !important;
  height:auto !important;
  display:block !important;
  transform:translateY(0) !important;
}

/* Keep full navigation visible */
.navlinks{
  display:flex !important;
  align-items:center !important;
  gap:34px !important;
  font-size:15px !important;
}

.navlinks a,
.navlinks a:not(.button){
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}

/* Main body alignment */
main{
  overflow:visible !important;
}

.hero{
  grid-template-columns:48% 52% !important;
  min-height:560px !important;
  padding:70px 68px 84px !important;
}

.hero-copy{
  max-width:610px !important;
}

.hero-visual{
  height:420px !important;
}

.hero-visual img{
  right:-180px !important;
  top:-60px !important;
  width:900px !important;
  max-width:none !important;
}

.split-section{
  grid-template-columns:1fr 1fr !important;
  gap:80px !important;
  padding:86px 68px 70px !important;
}

.roles-section{
  padding:70px 68px 46px !important;
}

.role-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px !important;
}

.work-section{
  padding:42px 68px 60px !important;
}

.work-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:22px !important;
}

.work-item{
  border-right:1px solid var(--border) !important;
  border-bottom:0 !important;
  padding-bottom:0 !important;
}

.work-item:last-child{
  border-right:0 !important;
}

.open-cta{
  margin:60px 68px 70px !important;
  grid-template-columns:1fr 42% !important;
}

.city{
  display:block !important;
}

/* Footer alignment */
.footer{
  grid-template-columns:2fr 1fr 1.2fr 1.2fr !important;
  gap:44px !important;
  padding:30px 68px 42px !important;
}

.legal{
  display:flex !important;
  justify-content:space-between !important;
}

.legal span{
  display:inline !important;
  margin-bottom:0 !important;
}

/* When browser is narrow, keep the desktop canvas and allow horizontal scroll */
@media (max-width:900px){
  .nav,
  main,
  .footer{
    width:1180px !important;
    max-width:1180px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .legal{
    width:1044px !important;
    max-width:1044px !important;
    margin-left:68px !important;
    margin-right:0 !important;
  }

  .nav{
    min-height:104px !important;
    height:auto !important;
    padding:24px 68px !important;
  }

  .navlinks{
    display:flex !important;
    gap:34px !important;
  }

  .navlinks a,
  .navlinks a:not(.button){
    display:inline-flex !important;
  }

  .hero{
    grid-template-columns:48% 52% !important;
    padding:70px 68px 84px !important;
  }

  h1{
    font-size:58px !important;
  }

  .split-section{
    grid-template-columns:1fr 1fr !important;
    padding:86px 68px 70px !important;
  }

  .roles-section{
    padding-left:68px !important;
    padding-right:68px !important;
  }

  .work-section{
    padding-left:68px !important;
    padding-right:68px !important;
  }

  .role-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }

  .work-grid{
    grid-template-columns:repeat(4,1fr) !important;
  }

  .open-cta{
    grid-template-columns:1fr 42% !important;
    margin-left:68px !important;
    margin-right:68px !important;
  }

  .city{
    display:block !important;
  }

  .footer{
    grid-template-columns:2fr 1fr 1.2fr 1.2fr !important;
    padding-left:68px !important;
    padding-right:68px !important;
  }

  .legal{
    display:flex !important;
  }
}


/* =========================================
   FIX: Move social icons to right side (match other pages)
   ========================================= */

.footer{
  display:grid !important;
  grid-template-columns:2fr 1fr 1.2fr 1.2fr !important;
  align-items:start !important;
}

/* Ensure socials are right-aligned */
.footer .socials{
  justify-content:flex-end !important;
}

/* Move socials into right-most column visually */
.footer > div:first-child .socials{
  display:none !important; /* hide left version */
}

.footer > div:last-child{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.footer > div:last-child .socials{
  display:flex !important;
  margin-top:16px;
}

/* Ensure spacing consistency */
.footer a{
  text-align:left;
}



/* ------------------------------------------------------------------
   CAREERS TEAM SIGNAL TEXT FIX
   Places the copy in the wide right column of the "We are building a
   small, senior team" card so it matches the goal layout.
------------------------------------------------------------------- */

.team-signal{
  display:grid !important;
  grid-template-columns:76px 1fr !important;
  column-gap:28px !important;
  row-gap:10px !important;
  align-items:start !important;
}

.team-signal img{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:58px !important;
  height:58px !important;
  object-fit:contain !important;
  display:block !important;
}

.team-signal h3{
  grid-column:2 !important;
  grid-row:1 !important;
  margin:0 0 12px !important;
  font-size:24px !important;
  line-height:1.2 !important;
  max-width:none !important;
}

.team-signal p{
  grid-column:2 !important;
  grid-row:2 !important;
  margin:0 !important;
  max-width:520px !important;
  font-size:17px !important;
  line-height:1.6 !important;
  color:var(--muted) !important;
}

/* Keep the corrected grid placement even when the browser is narrow */
@media (max-width:900px){
  .team-signal{
    display:grid !important;
    grid-template-columns:76px 1fr !important;
    column-gap:28px !important;
    row-gap:10px !important;
  }

  .team-signal img{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
  }

  .team-signal h3,
  .team-signal p{
    grid-column:2 !important;
  }
}

/* ------------------------------------------------------------------
   FINAL CAREERS CTA BALANCE FIX
   - Keeps the card height flexible so the text/link are not clipped
   - Removes the divider between copy and visual
   - Moves the wave left within the right-side visual area
   - Avoids treating the image as a layout container
------------------------------------------------------------------- */

.open-cta{
  min-height:188px !important;
  height:auto !important;
  display:grid !important;
  grid-template-columns:1fr 42% !important;
  overflow:hidden !important;
  align-items:stretch !important;
}

.open-cta::after{
  display:none !important;
  content:none !important;
}

.cta-copy{
  padding:44px !important;
  align-items:center !important;
}

.city{
  display:block !important;
  height:100% !important;
  width:100% !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:.88 !important;
  border-left:none !important;
  padding:0 !important;
  margin:0 !important;
  transform:translateX(-56px) !important;
}


/* =========================================================
   FINAL CAREERS MOBILE RESPONSIVE + HAMBURGER NAV
   Desktop layout remains unchanged.
   Mobile overrides the desktop canvas lock and enables
   a checkbox-driven hamburger navigation.
   ========================================================= */

.menu-toggle,
.hamburger{
  display:none;
}

@media (max-width:1000px){

  html,
  body{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    overflow-x:hidden !important;
  }

  .nav,
  main,
  .footer,
  .legal{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  main{
    overflow:hidden !important;
  }

  /* Mobile header */
  .nav{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
    min-height:96px !important;
    height:auto !important;
    padding:20px 24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:rgba(5,9,20,.86) !important;
    backdrop-filter:blur(16px) !important;
    border-bottom:1px solid rgba(255,255,255,.05) !important;
  }

  .brand{
    position:relative !important;
    z-index:110 !important;
  }

  .brand img{
    width:142px !important;
    height:auto !important;
    display:block !important;
    transform:none !important;
  }

  .menu-toggle{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;
    width:1px !important;
    height:1px !important;
  }

  .hamburger{
    display:flex !important;
    position:relative !important;
    z-index:110 !important;
    width:46px !important;
    height:46px !important;
    border:1px solid rgba(114,161,255,.36) !important;
    border-radius:12px !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    background:rgba(16,24,39,.74) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.18) !important;
    cursor:pointer !important;
  }

  .hamburger span{
    display:block !important;
    width:20px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#f6f8ff !important;
    transition:transform .22s ease, opacity .18s ease !important;
  }

  .menu-toggle:checked + .hamburger span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
  }

  .menu-toggle:checked + .hamburger span:nth-child(2){
    opacity:0 !important;
  }

  .menu-toggle:checked + .hamburger span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
  }

  .navlinks{
    display:flex !important;
    position:absolute !important;
    left:24px !important;
    right:24px !important;
    top:calc(100% - 8px) !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:14px !important;
    border:1px solid rgba(114,161,255,.26) !important;
    border-radius:14px !important;
    background:linear-gradient(180deg,rgba(16,24,39,.98),rgba(7,13,25,.98)) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.34) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-8px) !important;
    pointer-events:none !important;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease !important;
    z-index:105 !important;
  }

  .menu-toggle:checked ~ .navlinks{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    pointer-events:auto !important;
  }

  .navlinks a,
  .navlinks a:not(.button){
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    padding:16px 14px !important;
    border-bottom:1px solid rgba(34,48,74,.72) !important;
    color:#f6f8ff !important;
    font-size:16px !important;
    line-height:1.2 !important;
    white-space:normal !important;
    opacity:1 !important;
  }

  .navlinks a:last-child{
    border-bottom:0 !important;
  }

  .navlinks a.active:after{
    display:none !important;
  }

  /* Mobile layouts */
  .hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:56px 28px 54px !important;
  }

  h1{
    font-size:42px !important;
    line-height:1.05 !important;
  }

  .lead{
    font-size:18px !important;
    line-height:1.58 !important;
    max-width:100% !important;
  }

  .hero-copy{
    max-width:100% !important;
  }

  .hero-visual{
    height:220px !important;
    margin-top:24px !important;
  }

  .hero-visual img{
    right:-260px !important;
    top:-120px !important;
    width:760px !important;
  }

  .split-section{
    grid-template-columns:1fr !important;
    gap:34px !important;
    padding:58px 28px !important;
  }

  .team-signal{
    grid-template-columns:58px 1fr !important;
    padding:28px !important;
  }

  .roles-section{
    padding:58px 28px 40px !important;
  }

  .role-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .role-card{
    min-height:auto !important;
  }

  .work-section{
    padding:42px 28px 50px !important;
  }

  .work-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .work-item{
    border-right:0 !important;
    border-bottom:1px solid var(--border) !important;
    padding-bottom:18px !important;
  }

  .work-item:last-child{
    border-bottom:0 !important;
  }

  .open-cta{
    margin:42px 28px 54px !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }

  .cta-copy{
    padding:28px !important;
    gap:20px !important;
    align-items:flex-start !important;
  }

  .city{
    display:none !important;
  }

  .footer{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:30px !important;
    padding:40px 28px !important;
  }

  .footer > div:last-child{
    align-items:flex-start !important;
  }

  .footer .socials{
    justify-content:flex-start !important;
  }

  .legal{
    display:block !important;
    padding:18px 28px 34px !important;
    font-size:12px !important;
  }

  .legal span{
    display:block !important;
    margin-bottom:14px !important;
  }

  .legal a{
    margin-left:0 !important;
    margin-right:22px !important;
  }
}