.career-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  .career-hero-split{
    position:relative; display:flex; flex:1;
    /* min-height:100vh; */
    overflow:hidden;
  }
  .career-hero-text{
    position:relative; 
    z-index:2; 
    width:50%;
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    gap:26px;
    padding: 140px clamp(24px, 6vw, 96px) 64px clamp(24px, 6vw, 80px);
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--teal-700);
    width:fit-content;
  }
  .eyebrow::before{
    content:''; width:8px; height:8px; border-radius:50%; background:var(--teal-500);
  }

  /* Pulsing variant — dot stays solid, a soft ring expands and
     fades around it on loop, reading as "live," not "loading." */
  .eyebrow-live{ position:relative; }
  .eyebrow-live::before{ position:relative; z-index:1; }
  .eyebrow-live::after{
    content:''; position:absolute; left:0; top:50%; width:8px; height:8px;
    border-radius:50%; background:var(--teal-500);
    transform:translateY(-50%); animation:eyebrow-pulse 2s ease-out infinite;
  }
  @keyframes eyebrow-pulse{
    0%{ transform:translateY(-50%) scale(1); opacity:0.6; }
    100%{ transform:translateY(-50%) scale(2.8); opacity:0; }
  }

  h1{
    font-size:clamp(34px, 4vw, 56px); line-height:1.1; font-weight:600;
    letter-spacing:-0.025em; color:var(--ink-900); perspective:600px;
    text-wrap:balance;
  }
  h1 .word{ display:inline-block; overflow:hidden; padding-bottom:4px; }
  h1 .word span{ display:inline-block; will-change:transform, opacity; }
  h1 em{ font-style:normal; color:var(--teal-500); }

  .hero-sub{ font-size:17px; line-height:1.65; color:var(--neutral-700); max-width:480px; }
  .hero-actions{ display:flex; gap:16px; align-items:center; margin-top:4px; flex-wrap:wrap; }


  /* Right panel — diagonal slab holding the illustration */
  .career-hero-visual{
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    width:55%; 
    z-index:1;
    clip-path:polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    background:var(--teal-100);
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .career-hero-img{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
  }

  @media (max-width:1023px){
    .career-hero-split{ flex-direction:column; min-height:auto; }
    .career-hero-text{ width:100%; padding:56px 24px 32px; }
    .career-hero-visual{
      position:relative; width:100%; height:340px; min-height:280px;
      clip-path:none; order:-1;
    }
  }
  @media (max-width:600px){
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-sub{ max-width:100%; }
  }

  /* =========================================================
     OPEN POSITIONS — accordion job listing.
     Signature element: each closed row carries a hollow teal
     "status ring" on the left; the instant a role is opened,
     that ring fills solid teal and a matching rail runs down
     the left edge of the expanded panel — a persistent visual
     thread from "closed" to "currently reading this one."
     ========================================================= */
  .positions-section{
    max-width:var(--container); margin:0 auto;
    padding:132px clamp(24px, 6vw, 80px) 148px;
  }
  .positions-header{ max-width:640px; margin-bottom:56px; }
  .positions-header h2{
    font-size:clamp(30px, 3.2vw, 44px); font-weight:600; letter-spacing:-0.02em;
    line-height:1.12; margin-top:14px;
  }
  .positions-header h2 em{ font-style:normal; color:var(--teal-500); }
  .positions-header p{
    margin-top:16px; font-size:16px; line-height:1.65; color:var(--neutral-700);
  }

  .job-list{ display:flex; flex-direction:column; gap:14px; }

  /* Empty state — shown only when the job listings below are
     commented out. Kept visually quiet: same card language as
     a job row, no red/error tone, reads as "check back," not
     "something's broken." */
  .no-openings{
    display:none;
    flex-direction:column; align-items:center; text-align:center; gap:16px;
    background:var(--white); border:1px solid var(--neutral-200); border-radius:20px;
    padding:72px 32px;
  }
  .no-openings .no-openings-icon{
    width:56px; height:56px; border-radius:50%; background:var(--teal-100); color:var(--teal-700);
    display:flex; align-items:center; justify-content:center;
  }
  .no-openings .no-openings-icon svg{ width:24px; height:24px; }
  .no-openings h3{ font-size:20px; font-weight:600; color:var(--ink-900); letter-spacing:-0.01em; }
  .no-openings p{ font-size:16px; line-height:1.7; color:var(--neutral-700); max-width:600px; text-wrap:balance; }

  .job-card{
    background:var(--white); border-radius:20px;
    border:1px solid var(--neutral-200);
    overflow:hidden;
    transition:border-color 240ms ease, box-shadow 240ms ease;
  }
  .job-card.is-open{
    border-color:var(--teal-500);
    box-shadow:0 18px 40px rgba(4,33,30,0.08);
  }

  .job-trigger{
    width:100%; display:flex; align-items:center; gap:20px;
    padding:30px 32px; background:none; border:none; cursor:pointer;
    font-family:inherit; text-align:left; color:inherit;
  }
  .job-status-ring{
    flex-shrink:0; width:12px; height:12px; border-radius:50%;
    border:2px solid var(--teal-500); background:transparent;
    transition:background 240ms ease;
  }
  .job-card.is-open .job-status-ring{ background:var(--teal-500); }

  .job-trigger-main{ flex:1; min-width:0; }
  .job-trigger-main h3{
    font-size:clamp(19px, 2vw, 23px); font-weight:600; letter-spacing:-0.015em;
    color:var(--ink-900); line-height:1.3;
  }
  .job-meta{
    display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px;
  }
  .job-meta span{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13.5px; color:var(--neutral-400); font-weight:500;
  }
  .job-meta svg{ width:14px; height:14px; flex-shrink:0; }

  .job-toggle{
    flex-shrink:0; width:40px; height:40px; border-radius:50%;
    background:var(--teal-100); color:var(--teal-700);
    display:flex; align-items:center; justify-content:center;
    transition:transform 620ms cubic-bezier(0.65,0,0.35,1), background 500ms ease, color 500ms ease;
  }
  .job-toggle svg{ width:16px; height:16px; }
  .job-card.is-open .job-toggle{
    background:var(--teal-500); color:var(--white); transform:rotate(90deg);
  }

  /* Grid-based accordion — animates height without JS or measured px.
     Slower, symmetric ease-in-out so open/close read as one deliberate
     motion rather than a snap; opacity is staggered on top so the
     content doesn't just get clipped, it settles in. */
  .job-panel{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows 640ms cubic-bezier(0.65,0,0.35,1);
  }
  .job-card.is-open .job-panel{ grid-template-rows:1fr; }
  .job-panel-inner{
    min-height:0; overflow:hidden;
    opacity:0; transition:opacity 380ms ease 0ms;
  }
  .job-card.is-open .job-panel-inner{
    opacity:1; transition:opacity 420ms ease 220ms;
  }

  .job-body{
    display:grid; grid-template-columns:1fr 288px; gap:48px;
    padding:0 32px 36px; border-top:1px solid var(--neutral-200); margin-top:2px;
  }
  .job-main{ padding-top:28px; }
  .job-main p.job-intro{ font-size:15px; line-height:1.7; color:var(--neutral-700); margin:0 0 22px; }
  .job-group p.job-intro:last-child{ margin-bottom:0; }
  .job-main .job-kicker{
    font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--teal-500); margin:0 0 10px;
  }
  .job-main .job-lead{
    font-size:14.5px; font-weight:600; color:var(--ink-900); line-height:1.6; margin:0 0 12px;
  }

  .job-group{ margin-bottom:22px; }
  .job-group:last-child{ margin-bottom:0; }
  .job-group h4{
    font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--teal-700); margin-bottom:14px;
  }
  .job-group ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
  .job-group ul:last-child{ margin-bottom:0; }
  .job-group li{
    position:relative; padding-left:18px; font-size:14.5px; line-height:1.6; color:var(--neutral-700);
  }
  .job-group li::before{
    content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%;
    background:var(--teal-500);
  }

  .job-side{ padding-top:28px; }
  .side-card{
    background:var(--paper-50); border-radius:16px; padding:22px;
  }
  .side-card + .side-card{ margin-top:14px; }
  .side-card h5{
    font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--neutral-400); margin-bottom:14px;
  }
  .side-row{ display:flex; align-items:flex-start; gap:12px; }
  .side-row + .side-row{ margin-top:14px; }
  .side-row .side-icon{
    flex-shrink:0; width:30px; height:30px; border-radius:9px; background:var(--white);
    display:flex; align-items:center; justify-content:center; color:var(--teal-700);
  }
  .side-row .side-icon svg{ width:14px; height:14px; }
  .side-row .side-text small{ display:block; font-size:11.5px; color:var(--neutral-400); }
  .side-row .side-text strong{ display:block; font-size:14px; font-weight:600; color:var(--ink-900); margin-top:1px; }

  .side-card ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
  .side-card li{
    position:relative; padding-left:16px; font-size:13.5px; line-height:1.5; color:var(--neutral-700);
  }
  .side-card li::before{
    content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%;
    background:var(--teal-500);
  }

  .apply-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; margin-top:16px; padding:14px 20px; border-radius:999px;
    background:var(--teal-500); color:var(--white); font-size:14.5px; font-weight:600;
    text-decoration:none; border:none; cursor:pointer; font-family:inherit;
    transition:background 200ms ease, transform 200ms ease;
  }
  .apply-btn:hover{ background:var(--teal-700); transform:translateY(-2px); }
  .apply-btn svg{ width:15px; height:15px; }
  .apply-note{
    text-align:center; font-size:12px; color:var(--neutral-400); margin-top:10px; line-height:1.5;
  }
  .apply-note a{ color:var(--teal-700); font-weight:600; text-decoration:none; }

  @media (max-width:860px){
    .job-body{ grid-template-columns:1fr; gap:8px; padding:0 20px 28px; }
    .job-side{ padding-top:0; }
    .job-trigger{ padding:24px 20px; gap:14px; }
  }
  @media (max-width:600px){
    .job-meta{ flex-direction:column; gap:6px; }
    .positions-section{ padding:88px 20px 100px; }
  }

  @media (prefers-reduced-motion: reduce){
    * { animation:none !important; transition:none !important; }
  }