/* /careers only. Everything else on the page (hero, form card, buttons) is
   pg-base.css and service.css, unchanged. */

#pg .cr-why{background:var(--cream);padding:clamp(72px,9vw,120px) 0}
#pg .cr-why--dark{background:var(--darker)}
#pg .cr-why__header{margin-bottom:clamp(32px,4vw,56px)}
#pg .cr-why__h2{font-family:var(--font-h);font-size:clamp(28px,3.6vw,48px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--darker)}

/* Asymmetric on purpose: the list carries the section, the photograph sits
   beside it and flips sides in the dark half. */
#pg .cr-why__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(40px,5vw,80px);align-items:start}
#pg .cr-why__grid--flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}
#pg .cr-why__media{position:sticky;top:120px}
#pg .cr-why__media--pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#pg .cr-why__media--pair picture:last-child{margin-top:48px}
#pg .cr-why__img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.12),0 16px 48px rgba(0,0,0,.16)}

/* The numerals are real list numbers (ol + counter), so the count survives
   with CSS off and is read out by a screen reader. */
#pg .cr-points{list-style:none;margin:0;padding:0;counter-reset:cr var(--cr-start,0)}
#pg .cr-points[start="6"]{--cr-start:5}
#pg .cr-points[start="10"]{--cr-start:9}
#pg .cr-point{counter-increment:cr;position:relative;padding:26px 0 26px 84px;border-top:1px solid rgba(54,69,79,.16);transition:padding-left .3s ease}
#pg .cr-point:last-child{border-bottom:1px solid rgba(54,69,79,.16)}
#pg .cr-point::before{content:counter(cr,decimal-leading-zero);position:absolute;left:0;top:20px;font-family:var(--font-h);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--orange)}
#pg .cr-point:hover{padding-left:92px}
#pg .cr-point__lead{font-family:var(--font-h);font-size:clamp(19px,1.7vw,23px);font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--darker);margin:0}
#pg .cr-point__body{font-size:15px;line-height:1.7;color:rgba(38,50,56,.78);margin:8px 0 0}

#pg .cr-why--dark .cr-point,
#pg .cr-why--dark .cr-point:last-child{border-color:rgba(255,255,255,.12)}
#pg .cr-why--dark .cr-point__lead{color:#fff}
#pg .cr-why--dark .cr-point__body{color:rgba(255,255,255,.72)}

/* Point 10 is the page's one oversized line. */
#pg .cr-points--closing{margin-top:clamp(48px,6vw,88px)}
#pg .cr-point--closing,
#pg .cr-point--closing:last-child{border:none;padding:0 0 0 clamp(84px,11vw,170px)}
#pg .cr-point--closing:hover{padding-left:clamp(84px,11vw,170px)}
#pg .cr-point--closing::before{top:.08em;font-size:clamp(40px,7vw,104px)}
#pg .cr-point--closing .cr-point__lead{font-size:clamp(32px,6.4vw,96px);line-height:1.02;letter-spacing:-.035em}

/* THANK-YOU STATE. Shown by :target so the no-JavaScript path (303 back to
   /careers#application-received) gets it too; careers.js sets the same hash. */
/* scroll-margin clears the sticky header: on the no-JS path this heading is the only confirmation. */
#pg .cr-thanks{display:none;text-align:center;padding:24px 8px;outline:none;scroll-margin-top:140px}
#pg .cr-thanks:target{display:block}
#pg .cr-thanks:target ~ form{display:none}
#pg .cr-thanks__title{font-family:var(--font-h);font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.2;color:var(--darker);margin:0 0 12px}
#pg .cr-thanks p{font-size:15px;line-height:1.7;color:rgba(38,50,56,.78);margin:0 auto;max-width:46ch}
/* .contact gets its padding from home.css, which this page does not load. Same rhythm as .cr-why. */
#pg .cr-apply{scroll-margin-top:90px;background:var(--cream);padding:clamp(72px,9vw,120px) 0}
#pg .cr-apply .enquiry-form__note a{color:inherit;text-decoration:underline}

@media (max-width:899px){
  #pg .cr-why__grid,#pg .cr-why__grid--flip{grid-template-columns:1fr;gap:32px}
  #pg .cr-why__media{position:static}
  #pg .cr-why__grid:not(.cr-why__grid--flip) .cr-why__media{order:-1}
  #pg .cr-why__media:not(.cr-why__media--pair) .cr-why__img{aspect-ratio:4/3}
  #pg .cr-why__media--pair picture:last-child{margin-top:28px}
}
@media (max-width:520px){
  #pg .cr-point{padding:22px 0 22px 58px}
  #pg .cr-point:hover{padding-left:58px}
  #pg .cr-point::before{font-size:30px;top:20px}
  #pg .cr-point--closing,
  #pg .cr-point--closing:last-child,
  #pg .cr-point--closing:hover{padding-left:0}
  #pg .cr-point--closing::before{position:static;display:block;margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  #pg .cr-point{transition:none}
}

/* The required asterisk on the licence legend, matching the field labels. */
#pg .enquiry-form__services legend span{color:var(--orange)}

/* HERO PHOTO as a real image under the existing hero--photo scrim. isolation keeps the negative
   z-index inside the hero, so the picture sits above the section's own colour and below ::before. */
#pg .cr-hero{isolation:isolate}
#pg .cr-hero__media{position:absolute;inset:0;z-index:-1}
#pg .cr-hero__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* The sitewide .label is brand orange, which is 1.86:1 on the cream section background at 11px
   (PSI accessibility, 13 Oct 2026). On this page it takes the slate token instead: 4.5:1 needed. */
#pg .cr-label{color:var(--dark)}