/* CareerPilot — CareerHorizonSection (assets/career-horizon.js)
   Geometry knobs:
     --ch-r        wheel radius (diameter = 2 × this)
     --ch-arc-top  distance from the top of the horizon area to the top of the arc
   The arc area is capped at --ch-arc-top + 0.6 × --ch-r, so at most ~53° either side of
   12 o'clock is ever visible and the wheel's centre (and bottom half) always stays clipped. */
.ch{--ch-navy:#051D64;--ch-teal:#359AAD;--ch-blue:#1570EF;--ch-nav:76px;--ch-r:clamp(560px,62vw,980px);--ch-arc-top:clamp(232px,30vh,286px);position:relative;background:linear-gradient(180deg,#fff 0%,#f5f9fd 22%,#f2f8fc 78%,#fff 100%)}
.ch-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ch-bg:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 62%,rgba(53,154,173,.10),transparent 70%),radial-gradient(circle at 6% 30%,rgba(21,112,239,.06),transparent 30%),radial-gradient(circle at 94% 36%,rgba(21,112,239,.06),transparent 30%)}
.ch-bg:after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(5,29,100,.09) 1px,transparent 1.3px);background-size:28px 28px;opacity:.4;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000,transparent 80%)}
.ch>:not(.ch-bg){position:relative}
.ch-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header */
.ch-sticky{display:flex;flex-direction:column}
.ch-head{padding:clamp(56px,9vh,96px) 0 clamp(18px,3vh,32px);text-align:center}
.ch-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(53,154,173,.11);color:#1f7f90;font-size:12px;font-weight:800;letter-spacing:1.6px}
.ch-head h2{margin:clamp(12px,1.8vh,18px) 0 clamp(8px,1.4vh,14px);font-size:clamp(30px,3.4vw,48px);line-height:1.08;letter-spacing:-1.6px;color:var(--ch-navy)}
.ch-head h2 span{background:linear-gradient(95deg,#0b3a9a 0%,var(--ch-blue) 45%,var(--ch-teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-head p{max-width:700px;margin:0 auto;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:#5d6d8a}
.ch-fallback{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto;padding:12px 20px 72px;list-style:none}
.ch-fallback li{padding:8px 14px;border:1px solid #d9e6f3;border-radius:999px;background:#fff;color:var(--ch-navy);font-size:14px;font-weight:600}
.ch-js .ch-fallback{display:none}

/* Horizon area */
.ch-horizon{position:relative;flex:1 1 auto;width:100%;height:clamp(460px,calc(var(--ch-arc-top) + var(--ch-r) * .42),640px);max-height:calc(var(--ch-arc-top) + var(--ch-r) * .6)}
.ch-arc{position:absolute;inset:0;overflow:hidden}
.ch-glow{position:absolute;left:50%;top:calc(var(--ch-arc-top) - 180px);width:min(1100px,90vw);height:420px;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,rgba(53,154,173,.16) 0%,rgba(21,112,239,.06) 40%,transparent 70%);transform:translateX(-50%);pointer-events:none}
.ch-pivot{position:absolute;left:50%;top:calc(var(--ch-arc-top) + var(--ch-r));width:0;height:0}
.ch-ring{position:absolute;left:calc(var(--ch-r) * -1);top:calc(var(--ch-r) * -1);width:calc(var(--ch-r) * 2);height:calc(var(--ch-r) * 2);border-radius:50%;border:1.5px solid rgba(53,154,173,.42);background:linear-gradient(180deg,rgba(226,242,248,.95) 0%,rgba(238,247,251,.7) 7%,rgba(255,255,255,0) 22%);box-shadow:0 -18px 60px -12px rgba(53,154,173,.28),inset 0 18px 40px -20px rgba(21,112,239,.18)}
.ch-ring:before{content:'';position:absolute;inset:-34px;border-radius:50%;border:1px dashed rgba(21,112,239,.16)}
.ch-wheel{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.ch-dot{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:rgba(53,154,173,.45);transform:rotate(var(--a)) translateY(calc(var(--ch-r) * -1))}
.ch-slot{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--ch-r) * -1)) rotate(calc(var(--a) * -1))}
.ch-beacon{position:absolute;left:-8px;top:calc(var(--ch-r) * -1 - 8px);width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:var(--ch-teal);box-shadow:0 0 0 7px rgba(53,154,173,.16),0 0 28px rgba(53,154,173,.55)}

/* Inactive nodes */
.ch-node{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:0;border:0;background:none;font:inherit;color:#3e5073;cursor:pointer;transform-origin:50% 28px;will-change:transform,opacity}
.ch-node__icon{display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(21,112,239,.14);border-radius:50%;background:#fff;color:var(--ch-navy);font-size:23px;box-shadow:0 10px 26px rgba(5,29,100,.10);transition:border-color .25s,box-shadow .25s,color .25s,transform .25s}
.ch-node__label{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.78);font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap;transition:color .25s}
.ch-node:hover .ch-node__icon,.ch-node:focus-visible .ch-node__icon{border-color:rgba(53,154,173,.6);color:var(--ch-teal);box-shadow:0 12px 30px rgba(53,154,173,.28);transform:translateY(-3px)}
.ch-node:hover .ch-node__label{color:var(--ch-navy)}
.ch-node__icon img{display:block;width:30px;height:30px;object-fit:contain}

/* Active career (floats above the arc) */
.ch-active{position:absolute;z-index:3;left:50%;bottom:calc(100% - var(--ch-arc-top) + 30px);width:min(640px,calc(100% - 40px));padding:18px 22px 4px;text-align:center;transform:translateX(-50%);background:radial-gradient(ellipse 70% 70% at 50% 58%,rgba(255,255,255,.75) 0%,rgba(255,255,255,.35) 45%,transparent 72%)}
.ch-active:after{content:'';position:absolute;left:50%;bottom:-26px;width:1px;height:18px;background:linear-gradient(180deg,transparent,rgba(53,154,173,.7))}
.ch-active__icon{display:inline-grid;place-items:center;width:62px;height:62px;margin-bottom:12px;border-radius:20px;background:linear-gradient(145deg,var(--ch-blue),var(--ch-teal));color:#fff;font-size:28px;box-shadow:0 14px 32px rgba(21,112,239,.28)}
.ch-active__title{margin:0 0 6px;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.6px;color:var(--ch-navy)}
.ch-active__tagline{margin:0 0 14px;font-size:15.5px;line-height:1.45;color:#56688a}
.ch-active__skills li img{flex:0 0 16px;width:16px;height:16px;object-fit:contain}
.ch-active__skills li i{flex:0 0 16px;font-size:14px;line-height:1;text-align:center}
.ch-active__skills{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 14px;padding:0;list-style:none}
.ch-active__skills li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid rgba(53,154,173,.28);border-radius:999px;background:#fff;color:#1d5d6b;font-size:12.5px;font-weight:600;white-space:nowrap}
.ch-active__icon.has-logo{border:1px solid rgba(53,154,173,.28);background:#fff;box-shadow:0 14px 32px rgba(5,29,100,.12),0 0 0 6px rgba(53,154,173,.08)}
.ch-active__icon img{display:block;width:38px;height:38px;object-fit:contain}
.ch-active__cta{display:inline-flex;align-items:center;gap:7px;color:var(--ch-blue);font-size:13.5px;font-weight:800}
.ch-active__cta span{transition:transform .25s}
.ch-active__cta:hover span{transform:translateX(4px)}
.ch-active.is-in .ch-anim{animation:ch-rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
.ch-active.is-in .ch-active__icon{animation-name:ch-pop}
@keyframes ch-rise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes ch-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* Base branding + progress */
.ch-base{position:absolute;z-index:2;left:50%;bottom:74px;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.ch-base b{font-size:12px;letter-spacing:4px;color:rgba(5,29,100,.55)}
.ch-base span{font-size:12.5px;font-weight:600;color:#7d8ca6}
.ch-base i{padding:0 5px;font-style:normal;color:var(--ch-teal)}
.ch-progress{position:absolute;z-index:3;left:50%;bottom:20px;display:flex;align-items:center;gap:14px;transform:translateX(-50%);white-space:nowrap}
.ch-count{min-width:62px;font-size:12px;font-weight:800;letter-spacing:1.4px;color:#8392ab;font-variant-numeric:tabular-nums;text-align:right}
.ch-count b{color:var(--ch-navy)}
.ch-dots{display:flex;align-items:center;gap:6px}
.ch-dots i{width:6px;height:6px;border-radius:50%;background:rgba(5,29,100,.16);transition:width .35s,background .35s}
.ch-dots i.on{width:20px;border-radius:6px;background:var(--ch-teal)}
.ch-stepbtn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #d7e2ef;border-radius:50%;background:#fff;color:var(--ch-navy);font-size:13px;cursor:pointer;transition:border-color .2s,color .2s}
.ch-stepbtn:hover,.ch-stepbtn:focus-visible{border-color:var(--ch-teal);color:var(--ch-teal)}

/* Scroll mode: pinned */
.ch--scroll .ch-sticky{position:sticky;top:var(--ch-nav);height:calc(100vh - var(--ch-nav));overflow:hidden;justify-content:center}
.ch--scroll .ch-horizon{height:auto}

/* Step mode (mobile, reduced motion, short screens) */
.ch--step .ch-sticky{padding-bottom:24px}

@media (max-height:780px) and (min-width:768px){
  .ch-head{padding-top:36px}
  .ch-head p{font-size:14.5px;line-height:1.5}
  .ch-active{padding-top:8px}
  .ch-active__icon{width:52px;height:52px;margin-bottom:8px;border-radius:16px;font-size:24px}
  .ch-active__tagline{margin-bottom:10px}
  .ch-active__skills{margin-bottom:10px}
  .ch-base{bottom:64px}
}

/* Tablet */
@media (max-width:1199px){
  .ch-node__icon{width:50px;height:50px;font-size:21px}
  .ch-node{transform-origin:50% 25px}
  .ch-node__label{font-size:12px}
  .ch-ring:before{display:none}
}

/* Mobile: shallow horizon — previous · active · next — with details beneath */
@media (max-width:767px){
  .ch{--ch-r:clamp(330px,96vw,420px);--ch-arc-top:58px}
  .ch-head{padding:64px 20px 8px}
  .ch-head h2{letter-spacing:-1px}
  .ch-head h2 span{display:block}
  .ch-head p{font-size:15px}
  .ch-horizon{height:auto;max-height:none}
  .ch-arc{position:relative;inset:auto;height:196px}
  .ch-glow{top:-40px;height:260px}
  .ch-ring{background:linear-gradient(180deg,rgba(226,242,248,.95) 0%,rgba(255,255,255,0) 30%)}
  .ch-beacon{display:none}
  .ch-node__icon{width:52px;height:52px;font-size:22px}
  .ch-node{transform-origin:50% 26px}
  .ch-node__label{font-size:11.5px}
  .ch-node.is-active .ch-node__icon{border-color:transparent;background:linear-gradient(145deg,var(--ch-blue),var(--ch-teal));color:#fff;box-shadow:0 12px 28px rgba(21,112,239,.3)}
  .ch-node.is-active .ch-node__icon.has-logo{border:2px solid var(--ch-teal);background:#fff;box-shadow:0 0 0 5px rgba(53,154,173,.14),0 12px 28px rgba(5,29,100,.14)}
  .ch-node.is-active .ch-node__label{color:var(--ch-navy)}
  .ch-active{position:relative;left:auto;bottom:auto;width:auto;margin:0 16px;padding:4px 8px 0;transform:none;background:none}
  .ch-active:after,.ch-active__icon{display:none}
  .ch-active__title{font-size:23px}
  .ch-active__tagline{font-size:14.5px}
  .ch-active__skills li{font-size:12px;padding:5px 10px}
  .ch-progress{position:relative;left:auto;bottom:auto;justify-content:center;margin:18px 0 0;transform:none}
  .ch-base{position:relative;left:auto;bottom:auto;margin:16px 0 0;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ch-active.is-in .ch-anim{animation:none}
  .ch-node__icon,.ch-dots i,.ch-active__cta span{transition:none}
}