@charset "utf-8";
/* CSS Document */

:root{
    --crimson:#C80000;
    --crimson-2:#E31E30;
    --navy:#071A2D;
    --navy-2:#163A5B;
    --ink:#5E6268;
    --paper:#FFFFFF;
    --blush:#FFF6F7;
    --line:#E8DEDF;
    --soft:#F6F8FA;
    --mist:#D8E1E8;
  }

  .careers{
    position:relative;
    /*width:min(1760px,99vw);*/
    min-height:760px;
    overflow:hidden;
    border:1px solid rgba(7,26,45,.08);
    background:
      radial-gradient(circle at 78% 38%,rgba(200,0,0,.055),transparent 27%),
      radial-gradient(circle at 14% 74%,rgba(200,0,0,.035),transparent 23%),
      linear-gradient(180deg,#fff 0%,#fffdfd 100%);
    box-shadow:0 28px 90px rgba(7,26,45,.07);
    perspective:1800px;
  }

  .careers::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,rgba(7,26,45,.14) 1px,transparent 1.25px);
    background-size:54px 54px;
    opacity:.13;
    mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
    pointer-events:none;
  }

  .topbar{
    position:relative;
    z-index:10;
    height:92px;
    padding:0 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(12px);
  }

  .topbar .left{
    display:flex;
    align-items:center;
    gap:13px;
    font-size:15px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .signal{
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--crimson);
    box-shadow:0 0 0 10px rgba(200,0,0,.08);
    animation:signalPulse 2.5s ease-in-out infinite;
  }

  .topbar .right{
    color:#8B8B88;
    font-size:14px;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .layout{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:minmax(500px,.9fr) minmax(560px,1.1fr);
    gap:54px;
    align-items:center;
    min-height:668px;
    padding:42px 58px 48px;
  }

  /* ---------- LEFT: TALENT CONSTELLATION ---------- */
  .visual{
    position:relative;
    min-height:560px;
    display:grid;
    place-items:center;
    transform-style:preserve-3d;
  }

  .talent-space{
    position:relative;
    width:540px;
    height:540px;
    transform-style:preserve-3d;
  }

  .halo{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:330px;
    height:330px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(200,0,0,.075),rgba(200,0,0,.025) 46%,transparent 72%);
    filter:blur(3px);
  }

  .orbit-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
  }

  .orbit{
    fill:none;
    transform-origin:center;
    transform-box:fill-box;
  }
  .orbit.a{
    stroke:rgba(200,0,0,.20);
    stroke-width:1.5;
  }
  .orbit.b{
    stroke:rgba(7,26,45,.12);
    stroke-width:1.25;
    stroke-dasharray:9 12;
  }
  .orbit.c{
    stroke:rgba(200,0,0,.10);
    stroke-width:1;
  }

  .loaded .orbit.a{animation:spin 16s linear infinite}
  .loaded .orbit.b{animation:spinReverse 21s linear infinite}
  .loaded .orbit.c{animation:spin 27s linear infinite}

  .person{
    position:absolute;
    left:50%;
    top:50%;
    width:180px;
    height:180px;
    transform:translate(-50%,-50%) scale(.78);
    opacity:0;
    transform-style:preserve-3d;
  }

  .loaded .person{
    animation:personIn .9s cubic-bezier(.18,.82,.22,1) forwards .35s;
  }

  .person-disc{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
      radial-gradient(circle at 32% 26%,rgba(255,255,255,.98),#fff 43%,#FFF6F7 72%,#F6E8EB 100%);
    border:2px solid rgba(200,0,0,.22);
    box-shadow:0 26px 64px rgba(7,26,45,.12),inset 0 1px 0 #fff;
  }

  .head{
    position:absolute;
    left:50%;
    top:30px;
    width:46px;
    height:46px;
    transform:translateX(-50%);
    border-radius:50%;
    background:var(--crimson);
    box-shadow:0 0 0 12px rgba(200,0,0,.07);
  }

  .body{
    position:absolute;
    left:50%;
    top:74px;
    width:96px;
    height:70px;
    transform:translateX(-50%);
  }
  .body::before,
  .body::after{
    content:"";
    position:absolute;
    top:0;
    width:52px;
    height:78px;
    border:8px solid var(--navy);
    border-bottom:none;
    border-radius:54px 54px 0 0;
  }
  .body::before{
    left:0;
    transform:rotate(23deg);
    transform-origin:bottom right;
  }
  .body::after{
    right:0;
    transform:rotate(-23deg);
    transform-origin:bottom left;
  }

  .base{
    position:absolute;
    left:50%;
    bottom:24px;
    width:106px;
    height:8px;
    transform:translateX(-50%);
    border-radius:999px;
    background:var(--navy);
  }

  .domain{
    position:absolute;
    min-width:164px;
    padding:13px 14px 12px;
    border-radius:18px;
    background:rgba(255,255,255,.91);
    border:1px solid rgba(7,26,45,.09);
    box-shadow:0 16px 34px rgba(7,26,45,.09);
    backdrop-filter:blur(12px);
    opacity:0;
    transform:translateY(18px) scale(.95);
  }

  .domain strong{
    display:block;
    margin-bottom:5px;
    color:var(--crimson);
    font-size:10px;
    letter-spacing:.17em;
    text-transform:uppercase;
  }

  .domain span{
    display:block;
    color:var(--navy);
    font-size:14px;
    font-weight:700;
  }

  .d1{left:26px;top:126px}
  .d2{right:18px;top:104px}
  .d3{left:8px;bottom:116px}
  .d4{right:18px;bottom:102px}
  .d5{left:50%;top:6px;transform:translateX(-50%) translateY(18px) scale(.95)}
  .d6{left:50%;bottom:4px;transform:translateX(-50%) translateY(18px) scale(.95)}

  .loaded .d1{animation:domainIn .55s ease forwards .90s, bobA 5.4s ease-in-out infinite 2s}
  .loaded .d2{animation:domainIn .55s ease forwards 1.05s, bobB 6.1s ease-in-out infinite 2.3s}
  .loaded .d3{animation:domainIn .55s ease forwards 1.20s, bobB 5.8s ease-in-out infinite 2.5s}
  .loaded .d4{animation:domainIn .55s ease forwards 1.35s, bobA 6.3s ease-in-out infinite 2.6s}
  .loaded .d5{animation:domainCenterIn .55s ease forwards 1.50s, bobCenter 5.6s ease-in-out infinite 2.7s}
  .loaded .d6{animation:domainCenterIn .55s ease forwards 1.65s, bobCenter 6.4s ease-in-out infinite 2.9s}

  .live-dot{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--crimson-2);
    box-shadow:0 0 0 8px rgba(227,30,48,.07);
    animation:floatDot 6s ease-in-out infinite;
  }
  .ld1{left:16%;top:33%}
  .ld2{right:14%;top:37%;animation-delay:1s}
  .ld3{left:26%;bottom:22%;animation-delay:2s}
  .ld4{right:22%;bottom:26%;animation-delay:3s}

  /* ---------- RIGHT: EDITORIAL CAREER PANEL ---------- */
  .copy{
    position:relative;
    padding:18px 0;
    max-width:760px;
  }

  .status-kicker{
    color:var(--crimson);
    font-size:12px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(14px);
  }

  .loaded .status-kicker{animation:fadeUp .65s ease forwards .25s}

  h1{
    margin:22px 0 24px;
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
    font-size: clamp(52px, 5.7vw, 88px);
    line-height:.96;
    letter-spacing:-.045em;
    color:var(--navy);
  }

  .hline{
    display:block;
    overflow:hidden;
    padding:.06em .04em .14em;
    margin:-.06em -.04em -.14em;
  }
  .hline span{
    display:block;
    transform:translateY(112%);
    opacity:.1;
  }
  .loaded .hline:nth-child(1) span{animation:headlineIn .9s cubic-bezier(.18,.82,.22,1) forwards .45s}
  .loaded .hline:nth-child(2) span{animation:headlineIn .9s cubic-bezier(.18,.82,.22,1) forwards .60s}

  .careers_intro{
    max-width:720px;
    margin:0;
    color:#696662;
    font-size:17px;
    line-height:1.72;
    opacity:0;
    transform:translateY(14px);
  }
  .loaded .careers_intro{animation:fadeUp .7s ease forwards .85s}

  .interest-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:28px;
    opacity:0;
    transform:translateY(16px);
  }
  .loaded .interest-grid{animation:fadeUp .7s ease forwards 1.08s}

  .interest{
    padding:14px 15px;
    border:1px solid rgba(7,26,45,.09);
    background:#fff;
    min-height:72px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 10px 24px rgba(7,26,45,.045);
  }
  .interest i{
    width:7px;height:7px;border-radius:50%;background:var(--crimson);
    box-shadow:0 0 0 6px rgba(200,0,0,.06);
    flex:0 0 auto;
  }
  .interest span{
    font-size:13px;
    font-weight:600;
    color:var(--navy);
  }

  .actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px;
    opacity:0;
    transform:translateY(16px);
  }
  .loaded .actions{animation:fadeUp .7s ease forwards 1.28s}

  .careers_btn{
    min-width:230px;
    padding:17px 22px;
    border:1px solid rgba(7,26,45,.12);
    background:#fff;
    color:var(--navy);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.15em;
    cursor:pointer;
    transition:.25s ease;
  }
  .careers_btn.primary{
    background:var(--crimson);
    color:#fff;
    border-color:var(--crimson);
  }
  .careers_btn:hover{transform:translateY(-2px)}
  .careers_btn.primary:hover{box-shadow:0 16px 34px rgba(200,0,0,.16)}

  .note{
    margin-top:22px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#85817D;
    font-size:12px;
    line-height:1.6;
    opacity:0;
    transform:translateY(14px);
  }
  .loaded .note{animation:fadeUp .7s ease forwards 1.46s}
  .note b{color:var(--navy)}

  .profile-panel{
    position:absolute;
    right:28px;
    top:116px;
    width:190px;
    height:190px;
    border-radius:50%;
    border:1px solid rgba(200,0,0,.12);
    opacity:.25;
    animation:spin 18s linear infinite;
    pointer-events:none;
  }
  .profile-panel::before,
  .profile-panel::after{
    content:"";
    position:absolute;
    border-radius:50%;
  }
  .profile-panel::before{
    inset:24px;
    border:1px solid rgba(7,26,45,.09);
  }
  .profile-panel::after{
    inset:54px;
    border:1px solid rgba(200,0,0,.13);
  }

  @keyframes signalPulse{
    0%,100%{box-shadow:0 0 0 8px rgba(200,0,0,.06)}
    50%{box-shadow:0 0 0 13px rgba(200,0,0,.10)}
  }

  @keyframes fadeUp{to{opacity:1;transform:none}}
  @keyframes headlineIn{to{opacity:1;transform:translateY(0)}}
  @keyframes personIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  @keyframes domainIn{to{opacity:1;transform:none}}
  @keyframes domainCenterIn{to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes spinReverse{to{transform:rotate(-360deg)}}
  @keyframes bobA{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-7px)}
  }
  @keyframes bobB{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(8px)}
  }
  @keyframes bobCenter{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(-7px)}
  }
  @keyframes floatDot{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
  }

  @media(max-width:1180px){
    .layout{
      grid-template-columns:1fr;
      gap:24px;
      padding:38px 34px 44px;
    }
    .visual{min-height:560px}
    .copy{max-width:900px;margin:0 auto}
    .profile-panel{display:none}
  }

  @media(max-width:760px){
    body{padding:6px}
    .careers{min-height:1180px}
    .topbar{height:78px;padding:0 18px}
    .topbar .left{font-size:12px}
    .topbar .right{font-size:11px}
    .layout{padding:28px 16px 34px}
    .talent-space{width:100%;max-width:520px;height:520px}
    .domain{min-width:132px;padding:11px 12px}
    .domain span{font-size:12px}
    .interest-grid{grid-template-columns:1fr 1fr}
    h1{font-size:54px}
  }

  @media(max-width:520px){
    .talent-space{height:480px}
    .domain{min-width:116px}
    .d1{left:0}.d2{right:0}.d3{left:0}.d4{right:0}
    .interest-grid{grid-template-columns:1fr}
    .careers_btn{width:100%}
  }

  @media(prefers-reduced-motion:reduce){
    .status-kicker,.hline span,.intro,.interest-grid,.actions,.note,.person,.domain{
      opacity:1!important;
      transform:none!important;
      animation:none!important;
    }
    .person{transform:translate(-50%,-50%)!important}
    .d5,.d6{transform:translateX(-50%)!important}
    .orbit,.profile-panel,.live-dot{animation:none!important}
  }