/* Careers page. Builds on site.css and agency.css tokens: --blue, --blue2, --ice, --ink, --ink2, --paper, --muted, --rule, --ease
   Motion styles only apply under html.cr-motion, which careers.html sets when the visitor has not asked for reduced motion. */

/* ---- 1. Introduction: opens the page, the 3D figure starts in the centre of this stage ---- */
.cr-stage{position:relative;padding:calc(var(--nav) + clamp(3rem,7vw,6rem)) 0 clamp(4.5rem,9vw,8rem);background:var(--ink2);border-bottom:1px solid var(--rule)}
.cr-stage__grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.cr-stage h1{font-size:clamp(2.1rem,3.5vw,3.5rem);font-weight:800}
.cr-stage h3{margin-top:1.2rem;color:var(--ice);font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.025em}
.cr-stage__copy p{max-width:44ch;color:rgba(233,244,252,.78);font-size:clamp(1.02rem,1.3vw,1.15rem)}
.cr-stage__slot{position:relative;height:min(66svh,660px);aspect-ratio:1122/1402;max-width:100%;justify-self:center}
.cr-stage__slot img,.cr-traveler{display:block;-webkit-mask-image:linear-gradient(#000 74%,transparent 99%);mask-image:linear-gradient(#000 74%,transparent 99%)}
.cr-stage__slot img{width:100%;height:100%;object-fit:contain}
.cr-traveler{position:absolute;z-index:3;margin:0;pointer-events:none;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 34px 38px rgba(0,0,0,.38))}

/* ---- 2. Why work at SocialEDGE: the box the figure settles into ---- */
.cr-why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.cr-why__stage{position:relative;margin:0;aspect-ratio:4/5}
.cr-why__panel{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#0c2a42 0%,#071d31 72%);box-shadow:inset 0 0 0 1px var(--rule);opacity:var(--panel,1);transform:scale(calc(.9 + .1 * var(--panel,1)));transform-origin:50% 100%}
.cr-why__panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:radial-gradient(60% 70% at 50% 100%,rgba(0,123,255,.26),transparent 72%)}
.cr-why__stage>img{position:absolute;left:8%;bottom:0;width:84%;height:auto;-webkit-mask-image:linear-gradient(#000 74%,transparent 99%);mask-image:linear-gradient(#000 74%,transparent 99%)}
.cr-why h2{font-size:clamp(2.1rem,4.2vw,3.9rem)}

/* The three values sit in boxes: they rise in one after another, draw a light along the top edge,
   and lift with a soft highlight that follows the pointer */
.cr-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.6rem}
.cr-values li{position:relative;padding:1.35rem 1.25rem 1.4rem;border:1px solid var(--rule);border-radius:16px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,rgba(12,42,66,.62),rgba(7,29,49,.32));transition:translate .5s var(--ease),border-color .45s var(--ease),box-shadow .5s var(--ease)}
.cr-values li::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(79,195,255,.14),transparent 70%);opacity:0;transition:opacity .45s var(--ease)}
.cr-values li::after{content:"";position:absolute;left:1.25rem;right:1.25rem;top:0;height:1px;background:linear-gradient(90deg,var(--blue),var(--blue2),rgba(79,195,255,0));transform-origin:left;transition:transform 1.2s var(--ease);transition-delay:calc(var(--i,0) * 140ms + .35s)}
.cr-values li:hover{translate:0 -5px;border-color:rgba(79,195,255,.38);box-shadow:0 22px 44px -26px rgba(0,123,255,.55)}
.cr-values li:hover::before{opacity:1}
.cr-values b{display:block;font-size:1.05rem;letter-spacing:-.02em}
.cr-values span{display:block;margin-top:.5rem;color:var(--muted);font-size:.9rem;line-height:1.55}
.cr-motion .cr-values li::after{transform:scaleX(0)}
.cr-motion .cr-values.is-in li::after{transform:none}
.cr-motion .cr-values[data-stagger]>li{transform:translateY(22px) scale(.97);transition:opacity .8s var(--ease) calc(var(--i,0) * 120ms),transform 1s var(--ease) calc(var(--i,0) * 120ms),translate .5s var(--ease),border-color .45s var(--ease),box-shadow .5s var(--ease)}
.cr-motion .cr-values[data-stagger].is-in>li{transform:none}

/* ---- 4. Who we're looking for ---- */
.cr-teams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:3.25rem}
.cr-team{perspective:900px}
.cr-team__card{position:relative;display:flex;flex-direction:column;height:100%;padding:1.7rem 1.6rem 1.5rem;border:1px solid rgba(3,16,30,.1);border-radius:18px;background:#fff;overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s}
.cr-team__card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#0062cc,var(--blue2));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cr-team:hover .cr-team__card{--lift:-6px;border-color:rgba(0,98,204,.22);box-shadow:0 28px 50px -28px rgba(3,16,30,.4)}
.cr-team:hover .cr-team__card::before{transform:none}
.cr-team.is-tilting .cr-team__card{transition:transform .15s linear,box-shadow .6s var(--ease),border-color .4s}
.cr-team small{color:#0062cc;font-size:.7rem;font-weight:800;letter-spacing:.16em;transition:letter-spacing .5s var(--ease)}
.cr-team:hover small{letter-spacing:.26em}
.cr-team h3{margin-top:1.5rem;font-size:clamp(1.2rem,1.5vw,1.4rem);letter-spacing:-.03em;line-height:1.15}
.cr-team ul{margin-top:1.1rem;border-top:1px solid rgba(3,16,30,.08)}
.cr-team li{padding:.5rem 0;border-bottom:1px solid rgba(3,16,30,.08);color:#41627e;font-size:.88rem;transition:color .3s,padding .4s var(--ease)}
.cr-team li:last-child{border-bottom:0}
.cr-team:hover li{color:#28475f}
.cr-team__card--cta{justify-content:space-between;background:linear-gradient(140deg,#0062cc,#007bff 50%,var(--blue2));border-color:transparent;color:#fff}
.cr-team__card--cta::before{display:none}
.cr-team__card--cta h3{margin-top:0;color:#fff}
.cr-team__card--cta p{margin-top:.8rem;color:rgba(255,255,255,.9);font-size:.95rem}
.cr-team__card--cta .pill-btn{align-self:flex-start;margin-top:1.5rem}

/* ---- 5. Great people and current openings ---- */
.cr-open{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(3rem,7vw,8rem);align-items:start}
.cr-open__label{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.03em}
.cr-open__label span{color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:0}
.cr-jobs{display:grid;gap:.7rem;margin-top:1.5rem}
.cr-job{border:1px solid var(--rule);border-radius:16px;background:rgba(7,29,49,.65);transition:border-color .35s var(--ease),background .35s var(--ease)}
.cr-job:hover,.cr-job.is-open{border-color:rgba(79,195,255,.4);background:rgba(7,29,49,.95)}
.cr-job summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1rem 1.5rem;padding:1.25rem 1.4rem;cursor:pointer;list-style:none}
.cr-job summary::-webkit-details-marker{display:none}
.cr-job summary>div{transition:transform .45s var(--ease)}
.cr-job:hover summary>div{transform:translateX(6px)}
.cr-job summary b{display:block;font-size:clamp(1.08rem,1.5vw,1.3rem);letter-spacing:-.025em;line-height:1.25}
.cr-job summary small{display:block;margin-top:.2rem;color:var(--muted);font-size:.86rem}
.cr-job summary em{color:var(--ice);font-size:.82rem;font-style:normal;font-weight:600;white-space:nowrap}
.cr-job summary i{position:relative;width:2rem;height:2rem;border:1px solid var(--rule);border-radius:50%;transition:background .35s,border-color .35s,transform .5s var(--ease)}
.cr-job:hover summary i{border-color:rgba(176,224,230,.4)}
.cr-job.is-open summary i{transform:rotate(180deg);background:rgba(0,123,255,.16);border-color:rgba(79,195,255,.45)}
.cr-job summary i::before,.cr-job summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--ice)}
.cr-job summary i::after{transform:rotate(90deg);transition:transform .45s var(--ease)}
.cr-job.is-open summary i::after{transform:rotate(0)}
.cr-job__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.cr-job__body>div{overflow:hidden}
.cr-job.is-open .cr-job__body{grid-template-rows:1fr}
.cr-job__in{margin:0 1.4rem;padding:1.2rem 0 1.5rem;border-top:1px solid var(--rule)}
.cr-job__in>*{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.cr-job:not(.is-open) .cr-job__in>*{opacity:0;transform:translateY(10px)}
.cr-job.is-open .cr-job__in>:nth-child(2){transition-delay:.08s}
.cr-job.is-open .cr-job__in>:nth-child(3){transition-delay:.16s}
.cr-job__in p{color:rgba(233,244,252,.8);max-width:62ch}
.cr-job__in ul{display:grid;gap:.45rem;margin:1rem 0 1.4rem}
.cr-job__in li{position:relative;padding-left:1.3rem;color:var(--muted);font-size:.95rem}
.cr-job__in li::before{content:"";position:absolute;left:0;top:.8em;width:.7rem;height:1px;background:var(--blue2)}
.cr-job__in .pill-btn{min-height:2.8rem;padding:.8rem 1.4rem}
.cr-jobs__note{margin-top:1.4rem;color:var(--muted);font-size:.92rem}

/* ---- 6. How to apply ---- */
.cr-how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.cr-steps{position:relative;display:grid;gap:1.35rem;margin-top:2.4rem;counter-reset:s}
.cr-steps__rail{position:absolute;left:1.3rem;top:1.3rem;bottom:1.3rem;width:1px;background:rgba(3,16,30,.12)}
.cr-steps__rail i{position:absolute;inset:0;background:linear-gradient(#0062cc,var(--blue2));transform:scaleY(var(--sp,1));transform-origin:top}
.cr-steps li{position:relative;counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;align-items:center;gap:1rem;color:#41627e}
.cr-steps li::before{content:counter(s);position:relative;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;border:1px solid rgba(3,16,30,.12);color:#0062cc;font-weight:800;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s}
.cr-steps li.is-on::before{background:#0062cc;border-color:#0062cc;color:#fff}
.cr-steps b{color:var(--ink)}
.cr-contact{padding:clamp(1.6rem,3vw,2.4rem);border-radius:22px;background:var(--ink);color:#fff;box-shadow:0 30px 60px -30px rgba(3,16,30,.55);will-change:translate}
.cr-contact dl{display:grid;gap:1.2rem;margin:0}
.cr-contact dl>div{padding-bottom:1.1rem;border-bottom:1px solid var(--rule)}
.cr-contact dt{color:var(--ice);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cr-contact dd{margin:.35rem 0 0;font-size:1.05rem;font-weight:600}
.cr-contact dd a{border-bottom:1px solid rgba(176,224,230,.4);transition:border-color .3s}
.cr-contact dd a:hover{border-color:#fff}
.cr-contact .pill-btn{width:100%;margin-top:1.8rem}

/* ---- 7. Join SocialEDGE: the gradient drifts with scroll ---- */
.cr-join{background-size:180% 180%;background-position:var(--bx,0%) 50%}

/* ---- Motion: word-by-word heading reveals ---- */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sw>span{display:inline-block}
.cr-motion [data-split] .sw>span{transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--w) * 50ms)}
.cr-motion [data-split].is-in .sw>span{transform:none}

/* ---- Motion: staggered groups, each section with its own entrance ---- */
.cr-motion [data-stagger]>*{opacity:0;transition:opacity .8s var(--ease),transform 1s var(--ease),clip-path 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.cr-motion [data-stagger="rise"]>*{transform:translateY(34px)}
.cr-motion [data-stagger="slide"]{overflow-x:clip}
.cr-motion [data-stagger="slide"]>*{transform:translateX(42px)}
.cr-motion [data-stagger="fade"]>*{transform:translateY(14px)}
.cr-motion [data-stagger="mask"]>*{opacity:1;clip-path:inset(0 0 100% 0);transform:translateY(24px)}
.cr-motion [data-stagger].is-in>*{opacity:1;transform:none;clip-path:inset(0 0 -10% 0)}
.cr-motion [data-stagger="slide"].is-in>*{transition-delay:calc(var(--i,0) * 70ms)}

/* Buttons follow the pointer slightly, then settle back */
.cr-motion .pill-btn{transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .16s ease,translate .5s var(--ease)}

@media(max-width:1180px){
  .cr-teams{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .cr-stage__grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .cr-stage__lead{order:1}
  .cr-stage__copy{order:2}
  .cr-stage__slot{order:3;height:min(54svh,520px);margin-top:1rem}
  .cr-why,.cr-open,.cr-how{grid-template-columns:minmax(0,1fr)}
  .cr-why__stage{width:min(100%,440px);justify-self:center}
  .cr-open .ag-sticky{position:static}
}
@media(max-width:600px){
  .cr-stage__slot{height:min(50svh,440px)}
  .cr-teams,.cr-values{grid-template-columns:1fr}
  .cr-values{gap:.8rem}
  .cr-job summary{grid-template-columns:minmax(0,1fr) auto;padding:1.1rem 1.15rem}
  .cr-job summary em{grid-column:1;grid-row:2}
  .cr-job summary i{grid-column:2;grid-row:1/span 2}
  .cr-job__in{margin:0 1.15rem}
  .cr-job__in .pill-btn,.cr-team__card--cta .pill-btn{width:100%}
}
/* Reduced motion: no travel. The figure rests in the Why box and the intro keeps its two text columns. */
.cr-reduced .cr-stage__slot{display:none}
.cr-reduced .cr-stage__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:960px){.cr-reduced .cr-stage__grid{grid-template-columns:minmax(0,1fr)}}