/* Career Calling Jobs: Atlas design. Light-first, brand navy and green from the official logo. */
:root{--cc-head:'Plus Jakarta Sans',system-ui,sans-serif;--cc-radius:16px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;font:400 16px/1.6 Inter,system-ui,sans-serif;color:var(--cc-ink);background:#fff}
img,video,canvas,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--cc-head);letter-spacing:-.02em;text-wrap:balance}
a{color:var(--cc-brand)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cc-brand);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:200}.skip:focus{left:12px}
.announce{background:var(--cc-navy);color:#fff;text-align:center;font-size:14px;padding:8px 16px}
.eyb{color:var(--cc-green);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* header */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.hd.is-scrolled{border-color:var(--cc-line)}
.hd .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.brandmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brandmark img{height:44px;width:auto}
.brandmark span{font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--cc-green);border-left:2px solid var(--cc-line);padding-left:10px}
.hd .wrap>nav{display:flex;gap:4px;margin-left:auto}
.hd nav a{color:var(--cc-ink);text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px;border-radius:10px}
.hd nav a:hover,.hd nav a[aria-current]{background:var(--cc-soft)}
.hd-cta{display:flex;gap:8px;align-items:center}
.saved{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--cc-soft);color:var(--cc-brand)}
.saved b{position:absolute;top:-4px;right:-4px;background:var(--cc-green);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px}.saved b:empty{display:none}
.btn-g{background:var(--cc-green)!important}
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--cc-soft);cursor:pointer;place-items:center;gap:5px;padding:12px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--cc-ink);border-radius:2px;transition:transform .25s}
.hd .mnav{display:none}
.mnav-open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}.mnav-open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* hero */
.hero{position:relative;padding:40px 0 30px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;background:radial-gradient(closest-side,rgba(1,140,11,.10),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto auto -30% -20%;width:60vw;height:60vw;background:radial-gradient(closest-side,rgba(1,33,110,.08),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:center;position:relative;z-index:1}
.kick{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--cc-line);border-radius:999px;padding:6px 14px 6px 6px;font-weight:600;font-size:14px;box-shadow:var(--cc-shadow)}
.hero h1{font-size:clamp(40px,6.2vw,84px);line-height:.98;margin:22px 0 18px;font-weight:800}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--cc-navy),#2F5BD3 45%,var(--cc-green));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:19px;color:var(--cc-muted);max-width:52ch;margin:0 0 26px}
.qs{display:flex;gap:8px;background:#fff;border:1px solid var(--cc-line);border-radius:22px;padding:8px;box-shadow:0 20px 60px rgba(1,33,110,.12);flex-wrap:wrap}
.qs label{flex:1 1 200px;display:flex;align-items:center;gap:8px;background:var(--cc-soft);border-radius:16px;padding:0 14px;min-height:54px;color:var(--cc-muted);min-width:0}
.qs input,.qs select{border:0;background:none;font:inherit;width:100%;color:var(--cc-ink);outline:none;min-width:0}
.qs label:focus-within{box-shadow:0 0 0 2px var(--cc-brand)}
.qs .cc-btn{min-height:54px;padding:0 26px;border-radius:16px}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center;font-size:14px;color:var(--cc-muted)}
.quick button,.quick a{border:1px solid var(--cc-line);background:#fff;border-radius:999px;padding:7px 12px;font:600 13px Inter,sans-serif;color:var(--cc-ink);cursor:pointer;text-decoration:none}
.quick button:hover,.quick a:hover{border-color:var(--cc-brand);color:var(--cc-brand)}
.stage{position:relative;aspect-ratio:1;max-width:620px;justify-self:center;width:100%}
.stage canvas{width:100%;height:100%;cursor:grab;touch-action:pan-y}
.float{position:absolute;background:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(13,27,61,.16);overflow:hidden;width:42%;animation:bob 7s ease-in-out infinite;text-decoration:none;color:inherit}
.float img{width:100%;aspect-ratio:4/3;object-fit:cover}
.float p{margin:0;padding:10px 12px;font-size:13px;line-height:1.35;display:grid;gap:3px}
.float p b{font-size:14px}
.float .cc-chip{justify-self:start;font-size:12px}
.f1{left:-4%;bottom:8%;--r:-3deg}.f2{right:-2%;top:6%;width:36%;animation-delay:-3s;--r:4deg}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-12px) rotate(var(--r))}}
.sr-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:28px}
.stats div{display:grid}.stats b{font:800 30px/1 var(--cc-head);color:var(--cc-navy)}.stats span{font-size:14px;color:var(--cc-muted)}
.marq{border-block:1px solid var(--cc-line);background:var(--cc-soft);overflow:hidden;padding:18px 0;margin-top:24px}
.marq-t{display:flex;gap:40px;width:max-content;animation:marq 60s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq a{display:flex;align-items:center;gap:10px;font:700 15px Inter,sans-serif;color:var(--cc-ink);white-space:nowrap;text-decoration:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
section.s{padding:96px 0 0}
.sh{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.sh h2{font-size:clamp(30px,4vw,50px);line-height:1.05;margin:6px 0 0;max-width:18ch}
.sh p{max-width:46ch;color:var(--cc-muted);margin:0}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mode{position:relative;border:0;padding:0;border-radius:24px;overflow:hidden;cursor:pointer;text-align:left;background:#fff;box-shadow:var(--cc-shadow);font:inherit;color:inherit;text-decoration:none;display:block}
.mode figure{margin:0;overflow:hidden;aspect-ratio:4/3}
.mode img{width:100%;height:118%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.mode:hover img{transform:scale(1.06)}
.mode div{padding:18px 20px 22px;display:grid;gap:4px}
.mode h3{margin:0;font-size:24px;display:flex;align-items:center;gap:10px}
.mode h3 .cci{color:var(--cc-green)}
.mode p{margin:0;color:var(--cc-muted)}
.mode .n{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px;backdrop-filter:blur(6px);z-index:1}
.regions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.regions button{border:1px solid var(--cc-line);background:#fff;border-radius:999px;padding:8px 14px;font:600 14px Inter,sans-serif;cursor:pointer;color:var(--cc-ink)}
.regions button[aria-pressed=true]{background:var(--cc-navy);color:#fff;border-color:var(--cc-navy)}
.ctys{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cty{display:flex;align-items:center;gap:12px;border:1px solid var(--cc-line);border-radius:16px;padding:12px 14px;background:#fff;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.cty:hover{transform:translateY(-2px);box-shadow:var(--cc-shadow);border-color:#C8D4E8}
.cty code{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:linear-gradient(135deg,#EAF0FB,#E7F5E9);font:800 14px var(--cc-head);color:var(--cc-navy)}
.cty span{display:grid;line-height:1.3;min-width:0}.cty small{color:var(--cc-muted)}
.cty.has b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cc-green);margin-left:6px;vertical-align:middle}
.cty-feature{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-bottom:18px}
.cf{position:relative;border-radius:24px;overflow:hidden;min-height:300px;color:#fff;text-decoration:none;display:block}
.cf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.cf:hover img{transform:scale(1.05)}
.cf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(1,20,60,.7))}
.cf div{position:absolute;left:22px;bottom:20px;z-index:1}
.cf h3{margin:0;font-size:30px}.cf p{margin:2px 0 0;opacity:.92}
.cty-find{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.cty-find input{flex:1 1 260px;font:inherit;padding:12px 16px;border-radius:14px;border:1px solid var(--cc-line);background:var(--cc-soft)}
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fld{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1/1.05;color:#fff;background:#0D1B3D;text-decoration:none;display:block}
.fld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s;opacity:.94}
.fld:hover img{transform:scale(1.07)}
.fld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(1,20,60,.78))}
.fld span{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:grid;gap:2px}
.fld b{font:700 18px/1.2 var(--cc-head)}.fld small{opacity:.9}
.search-s{background:linear-gradient(180deg,#fff,var(--cc-soft) 220px,var(--cc-soft));padding-bottom:40px;margin-top:96px;padding-top:80px;border-top:1px solid var(--cc-line)}
#search{scroll-margin-top:80px}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.trust figure{margin:0;border-radius:28px;overflow:hidden;position:relative;aspect-ratio:4/4.4}
.trust figure img{width:100%;height:115%;object-fit:cover}
.badge-xl{position:absolute;left:20px;bottom:20px;background:#fff;border-radius:18px;padding:14px 16px;display:flex;gap:12px;align-items:center;box-shadow:var(--cc-shadow);max-width:80%}
.badge-xl .cci{width:40px;height:40px;color:var(--cc-green)}
.tl{list-style:none;padding:0;margin:26px 0;display:grid;counter-reset:s}
.tl li{position:relative;padding:0 0 22px 56px;counter-increment:s}
.tl li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:#E7F5E9;color:var(--cc-green);display:grid;place-items:center;font-weight:800}
.tl li::after{content:"";position:absolute;left:18px;top:42px;bottom:4px;width:2px;background:var(--cc-line)}
.tl li:last-child::after{display:none}
.tl b{display:block;font-size:17px}.tl span{color:var(--cc-muted)}
.safe{background:#FFF8E6;border:1px solid #F5E1A4;border-radius:16px;padding:16px 18px;font-size:15px}
.emps{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.emp{display:grid;gap:10px;border:1px solid var(--cc-line);border-radius:18px;padding:18px;background:#fff;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.emp:hover{transform:translateY(-3px);box-shadow:var(--cc-shadow)}
.emp header{display:flex;gap:12px;align-items:center}
.emp h3{margin:0;font-size:17px}
.emp p{margin:0;color:var(--cc-muted);font-size:14px}
.emp footer{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--cc-brand)}
.emp.is-join{border-style:dashed;background:var(--cc-soft);align-content:center;justify-items:start}
.band{margin-top:110px;position:relative;border-radius:32px;overflow:hidden;background:linear-gradient(115deg,#F2F6FD,#EEF8EF);display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.band>div{padding:56px 48px;display:grid;gap:16px;align-content:center}
.band h2{font-size:clamp(30px,3.6vw,46px);line-height:1.05;margin:0}
.band p{margin:0;color:var(--cc-muted);font-size:18px}
.band ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.band li{display:flex;gap:8px;align-items:center;font-weight:600}.band li .cci{color:var(--cc-green)}
.band figure{margin:0;min-height:360px;position:relative}
.band figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* inner pages */
.phero{position:relative;padding:44px 0 34px;background:linear-gradient(180deg,#F4F7FB,#fff);border-bottom:1px solid var(--cc-line);overflow:hidden}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;align-items:center}
.phero h1{font-size:clamp(32px,4.6vw,56px);line-height:1.05;margin:8px 0 12px;font-weight:800}
.phero p.l{font-size:18px;color:var(--cc-muted);margin:0;max-width:62ch}
.phero figure{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--cc-shadow)}
.phero figure img{width:100%;height:100%;object-fit:cover}
.crumbs{font-size:14px;color:var(--cc-muted);display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--cc-muted)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.facts span{background:#fff;border:1px solid var(--cc-line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}
.page{padding:48px 0 0}
.prose{max-width:760px;line-height:1.75}
.prose h2{font-size:26px;margin:36px 0 10px}.prose h3{font-size:20px;margin:28px 0 8px}
.prose ul,.prose ol{padding-left:22px}.prose li{margin:4px 0}
.prose table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}.prose td,.prose th{border:1px solid var(--cc-line);padding:8px 10px;text-align:left}
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.aside{position:sticky;top:96px;display:grid;gap:14px}
.box{border:1px solid var(--cc-line);border-radius:18px;padding:20px;background:#fff;display:grid;gap:12px}
.box h2,.box h3{margin:0;font-size:18px}
.box dl{margin:0;display:grid;gap:10px}.box dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--cc-muted)}.box dd{margin:0;font-weight:600}
.closed-note{background:#F1F4F9;border:1px solid var(--cc-line);border-radius:14px;padding:14px 16px;font-size:15px}
.grid-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.region-block{margin-bottom:44px}
.region-block h2{font-size:24px;margin:0 0 14px;display:flex;align-items:baseline;gap:10px}.region-block h2 small{font:500 15px Inter,sans-serif;color:var(--cc-muted)}
.form{display:grid;gap:14px;max-width:720px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:6px;font-weight:600;font-size:14px}
.form small{font-weight:400;color:var(--cc-muted)}
.form input,.form select,.form textarea{font:inherit;color:var(--cc-ink);background:var(--cc-soft);border:1px solid var(--cc-line);border-radius:10px;padding:11px 12px;width:100%}
.form fieldset{border:1px solid var(--cc-line);border-radius:16px;padding:18px;display:grid;gap:14px;margin:0}
.form legend{font:700 16px var(--cc-head);padding:0 6px}
.check{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important}
.check input{width:auto;margin-top:4px}
.steps4{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s}
.steps4 li{border-top:4px solid var(--cc-green);padding-top:10px;counter-increment:s;font-size:15px}
.steps4 li::before{content:"Step " counter(s);display:block;font-size:12px;font-weight:700;color:var(--cc-green);text-transform:uppercase;letter-spacing:.08em}
.steps4 b{display:block}
.empty-state{border:1px dashed var(--cc-line);border-radius:18px;padding:26px;display:grid;gap:10px;background:var(--cc-soft)}
.empty-state h2{margin:0;font-size:22px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:1020px){
  .hero .wrap,.trust,.band,.cty-feature,.phero .wrap,.split{grid-template-columns:minmax(0,1fr)}
  .fields{grid-template-columns:repeat(3,1fr)}
  .hd .wrap>nav{display:none}.hd-cta{margin-left:auto}.menu-btn{display:grid}
  .mnav-open .hd .mnav{display:grid;padding:8px 16px 16px;border-top:1px solid var(--cc-line);background:#fff}
  .mnav a{padding:12px 4px;font-weight:600;color:var(--cc-ink);text-decoration:none;border-bottom:1px solid var(--cc-line)}
  .stage{max-width:520px}.aside{position:static}.phero figure{display:none}
}
@media (max-width:760px){
  .modes{grid-template-columns:1fr}.fields{grid-template-columns:repeat(2,1fr)}.band>div{padding:34px 22px}
  .hd-cta .cc-btn span{display:none}.float{width:46%}.f2{width:40%}.hero h1{margin-top:16px}.brandmark img{height:36px}
  .steps4,.form .row2{grid-template-columns:1fr}
}
.marq-i{display:inline-flex;align-items:center;gap:8px;font:600 15px Inter,sans-serif;color:var(--cc-ink);white-space:nowrap}
.marq-i .cci{color:var(--cc-green)}
.jd-emp{display:flex;gap:16px;align-items:center;margin-top:16px}
.jd-emp a{font-weight:700;text-decoration:none}
.facts .is-closed{background:#EEF1F6}
.cc-btn.wide{justify-content:center;width:100%}
.vh{display:flex;gap:8px;align-items:center;color:var(--cc-green)}
.box.cc-verify{margin:0}.aside .safe{margin:0}
.src{margin-top:30px}
.cards3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cc-checks li.is-off{opacity:.55}
.empty-state .alert{margin-top:6px}.empty-state .alert label{color:var(--cc-ink)}
.empty-state .alert input{background:#fff;border-color:var(--cc-line);color:var(--cc-ink)}

/* Career Calling logo lockup */
.brandmark .cc-logo-window{display:block;position:relative;overflow:hidden;flex:none;width:101px;height:55px;padding:0;border:0;line-height:0}
.brandmark .cc-logo-window img{display:block;width:101px;max-width:none;height:64px;object-fit:contain}
@media(max-width:600px){.brandmark .cc-logo-window{width:88px;height:48px}.brandmark .cc-logo-window img{width:88px;height:56px}}

.ccf-logo .cc-logo-window{display:block;overflow:hidden;width:180px;height:98px}.ccf-logo .cc-logo-window img{display:block;width:180px;max-width:none;height:114px;object-fit:contain}