/* ==========================================================================
   Pharmazon — Careers · "Do work that matters to someone"
   The real team in capsule frames, values that light up as you read,
   teams we're growing, two pharmacies and a friendly way in.
   ========================================================================== */

/* ======================================================================
   HERO
   ====================================================================== */
.cr-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(30px,5vw,96px);padding:clamp(120px,15vh,150px) var(--sv-e) clamp(50px,7vh,80px);overflow:hidden}
.cr-hero::before{content:"";position:absolute;right:-14vw;top:4vh;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(195,222,154,.45),rgba(225,241,236,0) 62%);z-index:-1}
.cr-kicker{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--pz-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--pb-teal);margin-bottom:clamp(22px,3vh,32px)}
.cr-kicker::before{content:"";width:26px;height:12px;border-radius:99px;background:linear-gradient(90deg,#D7ECE4 50%,var(--pb-petrol) 50%)}
.cr-h1{font-family:var(--pz-ui);font-weight:500;font-size:clamp(50px,6.4vw,112px);line-height:.98;letter-spacing:-.055em;color:var(--pb-text);margin-bottom:clamp(22px,3vh,30px)}
.cr-h1 .ln{display:block;overflow:hidden;padding:0 .12em .26em 0;margin-bottom:-.26em}
.cr-h1 .ln > span{display:block}
.cr-h1 em{font-family:var(--pz-body);font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--pb-teal)}
.cr-lede{font-family:var(--pz-body);font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:var(--pb-soft);max-width:44ch;margin-bottom:clamp(26px,4vh,38px)}
.cr-cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.cr-cta .sv-btn{height:56px;padding:0 26px;font-size:16px}

/* three tall capsule frames, staggered like a group photo */
.cr-hero__media{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px);align-items:start;width:min(100%,560px);justify-self:center}
.cr-cap{display:block;overflow:hidden;aspect-ratio:9/20;border-radius:999px;background:#E7ECEA;box-shadow:0 30px 60px -36px rgba(2,61,84,.55)}
.cr-cap img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform 1.2s var(--pz-expo)}
.cr-cap:hover img{transform:scale(1.06)}
.cr-cap--1{margin-top:clamp(40px,6vw,90px)}
.cr-cap--2{margin-top:clamp(16px,2.4vw,36px)}
.cr-badge{position:absolute;left:-8%;bottom:10%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(110px,9vw,132px);aspect-ratio:1;border-radius:50%;background:var(--pb-petrol);color:#F2EFE6;text-align:center;box-shadow:0 0 0 8px #F6F4EF,0 30px 50px -24px rgba(2,61,84,.6)}
.cr-badge b{font-family:var(--pz-body);font-style:italic;font-weight:400;font-size:clamp(28px,2.4vw,36px);line-height:1;color:#C3DE9A}
.cr-badge small{margin-top:6px;padding:0 14px;font:600 9.5px/1.3 var(--pz-ui);letter-spacing:.12em;text-transform:uppercase}

/* ======================================================================
   VALUES: each one lights up as you read down
   ====================================================================== */
.cr-vals{position:relative;padding:clamp(90px,9vw,150px) var(--sv-e);background:var(--pb-petrol);color:#EAF1EE;overflow:hidden;isolation:isolate}
.cr-vals::before{content:"";position:absolute;left:-20vw;top:-30vw;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(1,150,138,.42),rgba(2,61,84,0) 60%);z-index:-1}
.cr-vals .sv-tag{color:#C3DE9A}
.cr-vals__t{font-family:var(--pz-ui);font-weight:500;font-size:clamp(36px,4.2vw,68px);line-height:1.04;letter-spacing:-.05em;color:#F2EFE6;max-width:16ch;margin-bottom:clamp(40px,5vw,72px)}
.cr-vals__t em{font-family:var(--pz-body);font-style:italic;font-weight:400;letter-spacing:-.025em;color:#C3DE9A;margin-left:.12em}
.cr-vals__t .wd{color:inherit}
.cr-vals__list{border-top:1px solid rgba(234,241,238,.2)}
.cr-val{display:grid;grid-template-columns:1fr 1fr;align-items:baseline;gap:20px 60px;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid rgba(234,241,238,.2);opacity:.28;transition:opacity .8s}
.cr-val.is-on{opacity:1}
.cr-val b{font-family:var(--pz-ui);font-weight:500;font-size:clamp(32px,4vw,64px);line-height:1;letter-spacing:-.05em;color:#F2EFE6}
.cr-val span{font-family:var(--pz-body);font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:rgba(234,241,238,.78)}
.cr-q{margin-top:clamp(40px,5vw,70px);max-width:36ch;font-family:var(--pz-body);font-style:italic;font-size:clamp(22px,2vw,30px);line-height:1.35;color:#F2EFE6}
.cr-q cite{display:block;margin-top:14px;font:500 13.5px/1 var(--pz-ui);font-style:normal;color:rgba(234,241,238,.65)}

/* ======================================================================
   SHARED photographs: capsule-topped
   ====================================================================== */
.cr-teams__img,.cr-life__img{position:relative;margin:0;overflow:hidden;border-radius:999px 999px 30px 30px;aspect-ratio:4/5;max-height:82vh}
.cr-teams__img img,.cr-life__img img{width:100%;height:100%;object-fit:cover}

/* ======================================================================
   TEAMS
   ====================================================================== */
.cr-teams{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(36px,6vw,120px);padding:clamp(90px,9vw,150px) var(--sv-e)}
.cr-teams .sv-h2{max-width:12ch;margin-bottom:clamp(26px,3vw,40px)}
.cr-list{border-top:1.5px solid var(--pb-text)}
.cr-list li{position:relative;display:grid;grid-template-columns:52px 1fr auto;align-items:baseline;column-gap:16px;padding:20px 0;border-bottom:1px solid var(--pb-line);transition:padding .6s var(--pz-expo)}
.cr-list li::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--pb-teal);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--pz-expo)}
.cr-list li:hover{padding-left:10px}
.cr-list li:hover::before{transform:scaleX(1)}
.cr-n{font-family:var(--pz-body);font-style:italic;font-size:20px;color:var(--pb-teal)}
.cr-list h3{font:500 clamp(20px,1.7vw,25px)/1.2 var(--pz-ui);letter-spacing:-.03em;color:var(--pb-text);margin-bottom:4px}
.cr-list p{font-family:var(--pz-body);font-size:16px;line-height:1.5;color:var(--pb-soft);max-width:46ch}
.cr-list small{justify-self:end;padding:7px 12px;border-radius:99px;background:#E1F1EC;font:600 11.5px/1 var(--pz-ui);letter-spacing:.04em;color:var(--pb-petrol);white-space:nowrap}

/* ======================================================================
   LIFE HERE
   ====================================================================== */
.cr-life{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:clamp(36px,6vw,120px);padding:clamp(90px,9vw,150px) var(--sv-e)}
.cr-life .sv-h2{max-width:13ch;margin-bottom:clamp(30px,3.4vw,48px)}
.cr-life__list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,44px) clamp(24px,3vw,50px)}
.cr-life__list li{padding-top:22px;border-top:1px solid var(--pb-line)}
.cr-pill{display:block;width:46px;height:20px;margin-bottom:18px;border-radius:99px;background:linear-gradient(90deg,#D7ECE4 50%,var(--pb-petrol) 50%);box-shadow:0 8px 18px -10px rgba(2,61,84,.5);position:relative;overflow:hidden;transition:transform .6s var(--pz-expo)}
.cr-pill i{position:absolute;left:6px;right:6px;top:3px;height:5px;border-radius:99px;background:rgba(255,255,255,.55)}
.cr-life__list li:hover .cr-pill{transform:rotate(-14deg)}
.cr-life__list h3{font:500 clamp(20px,1.6vw,24px)/1.2 var(--pz-ui);letter-spacing:-.03em;color:var(--pb-text);margin-bottom:8px}
.cr-life__list p{font-family:var(--pz-body);font-size:16px;line-height:1.5;color:var(--pb-soft)}

/* ======================================================================
   TWO HOMES
   ====================================================================== */
.cr-homes{padding:clamp(90px,9vw,150px) var(--sv-e)}
.cr-homes .sv-lede{max-width:42ch}
.cr-homes__two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.cr-home figure{margin:0 0 24px;aspect-ratio:16/10;border-radius:999px 999px 28px 28px;overflow:hidden}
.cr-home img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--pz-expo)}
.cr-home:hover img{transform:scale(1.05)}
.cr-home small{font:600 11.5px/1 var(--pz-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pb-teal)}
.cr-home h3{margin:10px 0 8px;font-family:var(--pz-ui);font-weight:500;font-size:clamp(28px,2.8vw,42px);letter-spacing:-.045em;color:var(--pb-text)}
.cr-home p{font-family:var(--pz-body);font-size:16.5px;line-height:1.5;color:var(--pb-soft);max-width:44ch}

/* ======================================================================
   HOW HIRING WORKS
   ====================================================================== */
.cr-hire{padding:clamp(90px,9vw,150px) var(--sv-e)}
.cr-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px)}
.cr-steps__line{position:absolute;left:0;right:0;top:22px;height:1.5px;background:rgba(2,61,84,.12)}
.cr-steps__line i{display:block;height:100%;background:var(--pb-teal);transform:scaleX(var(--p,0));transform-origin:left}
.cr-steps li{position:relative;opacity:.35;transition:opacity .6s}
.cr-steps li.is-on{opacity:1}
.cr-steps li > span{position:relative;display:grid;place-items:center;width:46px;height:46px;margin-bottom:22px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(2,61,84,.2);font-family:var(--pz-body);font-style:italic;font-size:17px;color:var(--pb-text);transition:background-color .5s, color .5s, box-shadow .5s, width .6s var(--pz-expo)}
.cr-steps li.is-on > span{width:72px;background:linear-gradient(90deg,#D7ECE4 50%,var(--pb-petrol) 50%);color:transparent;box-shadow:0 8px 18px -10px rgba(2,61,84,.5)}
.cr-steps h3{font:500 clamp(20px,1.7vw,25px)/1.2 var(--pz-ui);letter-spacing:-.03em;color:var(--pb-text);margin-bottom:6px}
.cr-steps p{font-family:var(--pz-body);font-size:16px;line-height:1.5;color:var(--pb-soft)}
.cr-hire__end{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 40px;margin-top:clamp(50px,5vw,80px);padding-top:clamp(30px,3vw,44px);border-top:1px solid var(--pb-line)}
.cr-hire__end p{font-family:var(--pz-body);font-style:italic;font-size:clamp(22px,2vw,30px);color:var(--pb-text)}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1100px){
  .cr-hero{grid-template-columns:1fr;min-height:0}
  .cr-hero__media{order:-1;width:min(86%,440px);margin-bottom:30px}
  .cr-badge{left:-4%}
  .cr-teams,.cr-life{grid-template-columns:1fr}
  .cr-teams__img,.cr-life__img{aspect-ratio:16/13;max-height:none;border-radius:240px 240px 28px 28px}
  .cr-life__img{order:-1}
  .cr-val{grid-template-columns:1fr;gap:10px}
  .cr-homes__two{grid-template-columns:1fr}
  .cr-steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .cr-steps__line{display:none}
}
@media (max-width:640px){
  .cr-h1{font-size:clamp(44px,12.4vw,60px)}
  .cr-cta{flex-direction:column;align-items:flex-start}
  .cr-badge{width:96px;bottom:4%}
  .cr-badge small{font-size:8px;padding:0 10px}
  .cr-list li{grid-template-columns:36px 1fr}
  .cr-list small{grid-column:2;justify-self:start;margin-top:10px}
  .cr-life__list{grid-template-columns:1fr}
  .cr-steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cr-val,.cr-steps li{opacity:1}
}