/* ============================================================================
   W-CAREERS · Careers  /careers/  · Tier 4 · Company · "come build with us"
   Theme rhythm D · L · L · D · L · L · L. (dark hero → light why/life → dark
   hiring-philosophy moment → light roles/perks → nebula CTA)
   Prefixes: crh- hero · crw- why · crl- life · crk- looking-for · crr- roles ·
             crp- perks · crc- cta.
   Foundation-only: every value is a --w-* token. No invented tokens, no raw brand hex.
   Standard type: --w-fs-body (16px) for paragraphs, sm for captions, xs for kickers.
   ============================================================================ */
/* ===== light-band technique (.cz-light) — WHITE variant (verbatim from sibling Carly-depth pages) ===== */
.cz-light{
  background:var(--w-bg);color:var(--w-text);
  --w-bg:#ffffff; --w-bg-deep:#ececec; --w-bg-elev:#ffffff;
  --w-card:#ffffff; --w-card-lo:#efefef; --w-card-hi:#ffffff;
  --w-text:var(--w-charcoal); --w-text-2:rgba(28,26,36,0.66); --w-text-3:rgba(28,26,36,0.62);
  --w-text-prose:#302d2e; --w-text-on-brand:#ffffff; --w-icon-ink:var(--w-charcoal);
  --w-line-soft:rgba(28,26,36,0.06); --w-line:rgba(28,26,36,0.10); --w-line-strong:rgba(28,26,36,0.16); --w-edge-top:rgba(255,255,255,0.9);
  --w-brand:var(--w-purple-ink); --w-brand-2:var(--w-purple); --w-brand-soft:rgba(152,135,244,0.10); --w-brand-line:rgba(152,135,244,0.28);
  --w-shadow-raise:0 8px 18px -8px rgba(28,26,36,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  --w-shadow-raise-soft:0 4px 10px -6px rgba(28,26,36,0.05), inset 0 1px 0 rgba(255,255,255,0.85);
  --w-shadow-recess:inset 0 1px 3px rgba(28,26,36,0.05), inset 0 -1px 0 rgba(255,255,255,0.8);
  --w-shadow-recess-deep:inset 0 2px 5px rgba(28,26,36,0.07), inset 0 -1px 0 rgba(255,255,255,0.7);
  --w-shadow-sm:0 1px 2px rgba(28,26,36,0.04); --w-shadow-md:0 4px 12px rgba(28,26,36,0.05); --w-shadow-lg:0 12px 28px rgba(28,26,36,0.07);
  --w-glow-brand:0 2px 8px rgba(28,26,36,0.05); --w-glow-brand-strong:0 6px 16px rgba(28,26,36,0.07);
  --w-glass-fill:rgba(255,255,255,0.66); --w-glass-fill-strong:rgba(255,255,255,0.86); --w-glass-tint:rgba(28,26,36,0.90);
  --w-glass-fill-soft:rgba(28,26,36,0.03); --w-glass-line:rgba(28,26,36,0.10); --w-glass-line-bright:rgba(28,26,36,0.16);
  --w-glass-rim-top:rgba(255,255,255,0.95); --w-glass-rim-bottom:rgba(28,26,36,0.05);
  --w-glass-blur:blur(18px) saturate(140%); --w-glass-blur-lg:blur(22px) saturate(145%);
  --w-glass-shadow:0 10px 24px rgba(28,26,36,0.06); --w-glass-shadow-soft:0 4px 12px rgba(28,26,36,0.05);
  --w-cta-fill:var(--w-glass-tint); --w-cta-text:#ffffff; --w-cta-glow:var(--w-shadow-md); --w-cta-glow-strong:var(--w-shadow-lg);
  --w-card-brand-wash:linear-gradient(160deg, rgba(28,26,36,0.06), rgba(28,26,36,0.015)); --w-card-brand-line:var(--w-line-strong);
  --w-tag-brand-bg:rgba(28,26,36,0.06); --w-tag-brand-fg:var(--w-text); --w-focus:rgba(28,26,36,0.55);
  --w-grad-surface:linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --w-grad-surface-hi:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --w-grad-recess:linear-gradient(180deg, #ededed 0%, #e3e3e3 100%);
  /* ⚠️ MUST re-declare: --w-edge-fade is declared in :root with var(--w-bg) INSIDE it, so it
     substitutes to the DARK bg there and inherits already-resolved. Without this, every cux-
     scene's edge-fade dissolves to charcoal on a white section (the "gray box" bug). */
  --w-edge-fade:radial-gradient(ellipse 84% 82% at 50% 48%, transparent 52%, var(--w-bg) 100%);
}
@media (prefers-reduced-transparency: reduce){
  .cz-light .w-glass,.cz-light .w-btn--glass,.cz-light .w-tag,.cz-light .w-card,.cz-light .w-cta-band{background:var(--w-card);border-color:var(--w-line)}
}

/* ===== asymmetric section rhythm (tight top / generous bottom) ===== */
.w-section{padding-block:clamp(36px, 2.2vw + 1rem, 64px) clamp(64px, 4vw + 1.7rem, 108px)}
.w-section--hero{padding-block:clamp(96px, 6rem + 5vw, 168px) clamp(72px, 5vw + 2rem, 128px)}
.w-badge{box-shadow:0 2px 10px rgba(12,10,22,.12), inset 0 1px 0 var(--w-glass-rim-top)}
.w-panel-rise{--w-panel-overlap:34px}


/* ═══ page-scoped image tokens (dev paths; base64'd at bundle) ══════════════ */
:root{
  --w-img-crh-herobg:url("/assets/images/w/careers/crh-herobg.webp");
  --w-img-crc-ctabg:url("/assets/images/w/careers/crc-ctabg.webp");
  --w-img-crk-bg:url("/assets/images/w/careers/crk-bg.webp");
  --w-img-car-1:url("/assets/images/w/careers/car-1.webp");
  --w-img-car-2:url("/assets/images/w/careers/car-2.webp");
  --w-img-car-3:url("/assets/images/w/careers/car-3.webp");
  --w-img-car-4:url("/assets/images/w/careers/car-4.webp");
  --w-img-car-5:url("/assets/images/w/careers/car-5.webp");
  --w-img-car-6:url("/assets/images/w/careers/car-6.webp");
  --w-img-car-7:url("/assets/images/w/careers/car-7.webp");
}

/* ═══ §1 · HERO — DARK · full-bleed editorial (e4) · copy left ══════════════ */
.crh{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(560px,78vh,860px);display:flex;align-items:center}
.crh::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--w-img-crh-herobg) center/cover no-repeat}
.crh::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(16,12,22,0.84) 0%, rgba(16,12,22,0.56) 42%, rgba(16,12,22,0.2) 78%, transparent 100%)}
.crh__wrap{width:100%}
.crh__copy{max-width:660px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.crh__title{font-size:var(--w-fs-display);font-weight:var(--w-fw-black);
  letter-spacing:var(--w-ls-tight);line-height:1;margin-top:var(--w-s-4);color:#fff}
.crh__lead{margin-top:var(--w-s-5);max-width:52ch;color:rgba(255,255,255,0.86)}
.crh__cta{margin-top:var(--w-s-7);display:flex;align-items:center;gap:var(--w-s-6);flex-wrap:wrap}
.crh__ghost{display:inline-flex;align-items:center;font-size:var(--w-fs-sm);font-weight:var(--w-fw-bold);
  color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,0.4)}
.crh__ghost:hover{text-decoration-color:#fff}

/* ═══ §2 · WHY PEOPLE LOVE IT HERE — LIGHT · values grid ════════════════════ */
.crw__title{font-size:var(--w-fs-h2);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);
  line-height:var(--w-lh-snug)}
.crw__lead{margin-top:var(--w-s-4);max-width:56ch;margin-inline:auto}
.crw__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--w-s-6);margin-top:var(--w-s-8)}
.crw__card{display:flex;flex-direction:column;padding:var(--w-s-7);border-radius:var(--w-r-2xl);
  background:var(--w-card);border:1px solid var(--w-line);box-shadow:var(--w-shadow-raise-soft);
  transition:border-color var(--w-dur) var(--w-ease), box-shadow var(--w-dur) var(--w-ease), transform var(--w-dur) var(--w-ease)}
.crw__card:hover{border-color:var(--w-brand-line);box-shadow:var(--w-glow-brand);transform:translateY(-3px)}
.crw__ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:var(--w-r-md);background:var(--w-cta-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), var(--w-cta-glow);margin-bottom:var(--w-s-5)}
.crw__ic .w-icon{width:22px;height:22px;color:#fff}
.crw__h{font-size:var(--w-fs-lead);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:var(--w-text)}
.crw__b{margin-top:var(--w-s-3);font-size:var(--w-fs-body);line-height:1.6;color:var(--w-text-2)}

/* ═══ §3 · LIFE AT SLASHEXPERTS — culture band + rotating image carousel ════ */
.crl__title{font-size:var(--w-fs-h2);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);line-height:var(--w-lh-snug)}
.crl__lead{margin-top:var(--w-s-4);max-width:56ch;margin-inline:auto}
.crl__carousel{position:relative;overflow:hidden;margin-top:var(--w-s-8);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.crl__track{display:flex;gap:var(--w-s-4);width:max-content;animation:w-marquee 52s linear infinite}
.crl__carousel:hover .crl__track{animation-play-state:paused}
.crl__slide{flex:none;width:clamp(220px,22vw,320px);aspect-ratio:4/5;border-radius:var(--w-r-xl);
  background-size:cover;background-position:center;box-shadow:var(--w-shadow-raise-soft)}
.crl__slide--1{background-image:var(--w-img-car-1)}
.crl__slide--2{background-image:var(--w-img-car-2)}
.crl__slide--3{background-image:var(--w-img-car-3)}
.crl__slide--4{background-image:var(--w-img-car-4)}
.crl__slide--5{background-image:var(--w-img-car-5)}
.crl__slide--6{background-image:var(--w-img-car-6)}
.crl__slide--7{background-image:var(--w-img-car-7)}
@media(prefers-reduced-motion:reduce){.crl__track{animation:none}}

/* ═══ §4 · WHAT WE'RE LOOKING FOR — DARK · hiring philosophy moment ═════════ */
/* plain full-bleed bg (CTAbg) behind the dark panel — edge-mask fade into the panel + scrim for legibility (NOT hero styling) */
.crk{position:relative;overflow:hidden;isolation:isolate}
.crk::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--w-img-crk-bg) center/cover no-repeat;opacity:.72;
  -webkit-mask:radial-gradient(128% 118% at 50% 42%, #000 32%, transparent 92%);
  mask:radial-gradient(128% 118% at 50% 42%, #000 32%, transparent 92%)}
.crk::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(18,15,26,0.40) 0%, rgba(18,15,26,0.58) 60%, rgba(18,15,26,0.72) 100%)}
.crk__wrap{max-width:760px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.crk__title{font-size:var(--w-fs-h2);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);
  line-height:var(--w-lh-snug);margin-top:var(--w-s-4)}
.crk__lead{margin-top:var(--w-s-5);font-size:var(--w-fs-h4);font-weight:var(--w-fw-semi);color:var(--w-text);max-width:24ch}
.crk__body{margin-top:var(--w-s-5);font-size:var(--w-fs-body);line-height:1.7;color:var(--w-text-2);max-width:56ch}

/* ═══ §5 · FIND YOUR PLACE — open roles ════════════════════════════════════ */
.crr__title{font-size:var(--w-fs-h2);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);line-height:var(--w-lh-snug)}
.crr__lead{margin-top:var(--w-s-4);max-width:52ch;margin-inline:auto}
.crr__list{display:flex;flex-direction:column;gap:var(--w-s-4);margin-top:var(--w-s-8);max-width:880px;margin-inline:auto}
.crr__role{position:relative;display:flex;flex-direction:column;gap:4px;text-decoration:none;
  padding:var(--w-s-6) var(--w-s-7);padding-right:130px;border-radius:var(--w-r-xl);
  background:var(--w-card);border:1px solid var(--w-line);box-shadow:var(--w-shadow-raise-soft);
  transition:border-color var(--w-dur) var(--w-ease), box-shadow var(--w-dur) var(--w-ease), transform var(--w-dur) var(--w-ease)}
.crr__role:hover{border-color:var(--w-brand-line);box-shadow:var(--w-glow-brand);transform:translateY(-2px)}
.crr__dept{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em;
  font-size:var(--w-fs-xs);font-weight:var(--w-fw-bold);color:var(--w-brand)}
.crr__rt{margin:2px 0;font-size:var(--w-fs-lead);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:var(--w-text)}
.crr__meta{font-size:var(--w-fs-sm);color:var(--w-text-3)}
.crr__apply{position:absolute;top:50%;right:var(--w-s-7);transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:6px;font-size:var(--w-fs-sm);font-weight:var(--w-fw-bold);color:var(--w-brand)}
.crr__apply .w-icon{width:16px;height:16px;transition:transform var(--w-dur) var(--w-ease)}
.crr__role:hover .crr__apply .w-icon{transform:translateX(3px)}
.crr__general{margin:var(--w-s-5) auto 0;max-width:880px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--w-s-5) var(--w-s-6);flex-wrap:wrap;padding:var(--w-s-6) var(--w-s-7);border-radius:var(--w-r-xl);
  background:var(--w-card-brand-wash);border:1px solid var(--w-brand-line)}
.crr__gh{font-size:var(--w-fs-lead);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:var(--w-text)}
.crr__gb{margin-top:4px;font-size:var(--w-fs-sm);line-height:1.5;color:var(--w-text-2)}
.crr__gcta{flex:none}

/* ═══ §6 · WE TAKE CARE OF OUR PEOPLE — perks grid ═════════════════════════ */
.crp__title{font-size:var(--w-fs-h2);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);line-height:var(--w-lh-snug)}
.crp__lead{margin-top:var(--w-s-4);max-width:52ch;margin-inline:auto}
.crp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--w-s-4);margin-top:var(--w-s-8);max-width:920px;margin-inline:auto}
.crp__perk{display:flex;align-items:center;gap:var(--w-s-3);padding:var(--w-s-5) var(--w-s-6);
  border-radius:var(--w-r-lg);background:var(--w-card);border:1px solid var(--w-line);
  font-size:var(--w-fs-body);font-weight:var(--w-fw-semi);color:var(--w-text)}
.crp__ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border-radius:var(--w-r-md);background:var(--w-card-brand-wash);color:var(--w-brand)}
.crp__ic .w-icon{width:18px;height:18px}

/* ═══ §7 · CTA — dark nebula band on a light section (canonical close) ══════ */
.crc__band{position:relative;overflow:hidden;border-radius:var(--w-r-2xl);
  padding:clamp(56px,5.2vw,104px) var(--w-s-6);text-align:center;isolation:isolate}
.crc__band::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--w-img-crc-ctabg);background-size:cover;background-position:center;filter:grayscale(1)}
.crc__band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(28,26,36,0.72), rgba(28,26,36,0.82))}
.crc__title{font-size:var(--w-fs-h1);color:#fff;max-width:680px;margin-inline:auto}
.crc__body{margin-top:var(--w-s-4);font-size:var(--w-fs-body);line-height:1.6;color:rgba(255,255,255,0.82);max-width:52ch;margin-inline:auto}
.crc__actions{margin-top:var(--w-s-7);display:flex;justify-content:center}
.crc__band .w-btn--primary{background:var(--w-grad-brand);color:var(--w-charcoal);box-shadow:var(--w-glow-brand)}
.crc__band .w-btn--primary:hover{box-shadow:var(--w-glow-brand-strong)}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .crw__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .crp__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  /* stronger even scrim on the full-bleed hero when copy overlays the image (car1 = bright amber) */
  .crh::after{background:linear-gradient(180deg, rgba(16,12,22,0.74) 0%, rgba(16,12,22,0.64) 46%, rgba(16,12,22,0.82) 100%)}
}
@media(max-width:700px){
  .crh__title{font-size:var(--w-fs-h1)}
  .crw__title,.crl__title,.crk__title,.crr__title,.crp__title,.crc__title{font-size:var(--w-fs-h2)}
  .crw__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}
@media(max-width:600px){
  .crh__cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--w-s-4)}
  .crh__cta .w-btn{width:100%;justify-content:center}
  .crr__role{padding-right:var(--w-s-7)}
  .crr__apply{position:static;transform:none;margin-top:var(--w-s-3)}
  .crp__grid{grid-template-columns:1fr;max-width:400px}
  .crr__general{flex-direction:column;align-items:flex-start}
  .crr__gcta{width:100%;justify-content:center}
}