/* ==========================================================================
   Careers — career.php
   Figma: YmLzL45Qaw4FJRduYrQQM1 "brihaspatitech-figma-implementation"
          node 121:3522 "Careers at TBI" (one 1520x8036 desktop frame)

   Every selector is scoped under body.page-template-career on purpose:
   content.css loads on EVERY page and defines its own unscoped .hero /
   .container rules that would otherwise collide. Same reasoning as
   css/about-us.css and css/ai-in-business.css.

   Values come from a frame-level Figma MCP get_design_context pull; the
   derived value table is checked in at
   e2e-tests/figma-reference/career/digest-121-3522.md next to the 1:1 frame
   export (full.png) and its per-section slices.

   The `font:` shorthand is never used in this file: it resets
   font-optical-sizing to `auto`, which would silently undo the `none` set on
   .crr-page and re-introduce the ~8% Inter Display glyph-width error every
   other Figma page here had to diagnose.

   RESPONSIVE: node 121:3522 is the ONLY frame for this design — the file's
   page 0:1 holds 11 top-level frames, one per site page, and none of them is
   a Careers tablet or mobile frame. Everything below 1520px is therefore this
   build's own interpretation and is NOT Figma-verified. Those blocks are
   marked INTERPRETED.
   ========================================================================== */

body.page-template-career {
  /* Figma frame 121:3522 base fill. */
  background: #020010;
}

body.page-template-career .crr-page {
  --crr-gutter: var(--container-padding-inline, 40px);
  background: #020010;
  overflow-x: clip;

  /* Inter is loaded as a variable font WITH an optical-size axis (opsz 14..32).
     CSS defaults to font-optical-sizing:auto, which renders the Display cut at
     large sizes — an ~8% glyph-width error on every large Inter element that a
     computed-style check cannot see. Set once here so it inherits. Scoped to
     .crr-page, so the sitewide header and footer are untouched. */
  font-optical-sizing: none;
}

body.page-template-career .crr-container {
  max-width: var(--container-max-width, 1520px);
  margin-inline: auto;
  padding-inline: var(--crr-gutter);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Shared type — the eyebrow appears in all seven content sections.
   Figma: Inter 12px / 1.19, tracking 2.86px, uppercase. #cab5ff on the dark
   bands (hero, offer, apply, questions), #9a60fb on the light ones
   (values, life, hiring). The hero's own eyebrow (121:3538) is the single
   exception on weight/leading — Semi Bold at `normal` leading — so it carries
   its own override rather than changing this shared rule.
   -------------------------------------------------------------------------- */
body.page-template-career .crr-eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
}

body.page-template-career .crr-eyebrow--lilac  { color: #cab5ff; }
body.page-template-career .crr-eyebrow--purple { color: #9a60fb; }

/* Two-column section head — Figma 121:3674 (values), 121:3618 (life),
   121:3818 (hiring), 121:3725 (apply). Same skeleton, three gap values. */
body.page-template-career .crr-split {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

body.page-template-career .crr-split--wide { gap: 80px; }

body.page-template-career .crr-split__head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.page-template-career .crr-split__head--593 { width: 593px; }

/* ==========================================================================
   1. HERO — Figma 121:3526 (band y 0..792)

   The frame's header instance is transparent here: sampling the 1:1 export at
   y=5..76 returns photo pixels (76,74,80), not the header's #03000b (3,0,11),
   and there is no discontinuity across y=77. So the hero is pulled up under
   the sticky site header and the header's fill is dropped for the
   top-of-page state only — `.site-header.is-scrolled` (js/main.js toggles it
   past scrollY 4) puts the solid bar back, which is what keeps the white nav
   legible once the light sections scroll under it. No new scroll behaviour
   was invented; only the resting colour changed.
   ========================================================================== */
body.page-template-career .site-header {
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-template-career .site-header.is-scrolled {
  background-color: rgba(3, 0, 11, 0.92);
  box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

body.page-template-career .crr-hero {
  position: relative;
  height: 792px;
  margin-top: calc(var(--header-height, 77px) * -1);
  box-sizing: border-box;
  overflow: hidden;
  background: #020010;
}

/* Figma stacks five layers. 121:3527 — a 1520x715 SVG that is a #020010 rect
   plus a blurred #020010 ellipse — is a no-op on a #020010 page and sits under
   the photo, so it is deliberately not shipped. The other three follow.
   Each is anchored to the horizontal CENTRE rather than a 1520px left edge,
   so the composition stays put and simply reveals more of itself on wider
   screens instead of ending in a hard vertical cut at x=1520. */
body.page-template-career .crr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Figma 121:3532 — 1253x835, centred on a 1268.754x854.708 bounding box at
   (362.74, -18.85); that centre is 237.117px right of the frame centre. */
body.page-template-career .crr-hero__photo {
  position: absolute;
  left: calc(50% + 237.117px);
  top: -8.996px;
  width: 1253px;
  height: 835px;
  transform: translateX(-50%) rotate(-0.91deg) skewX(-2deg);
  opacity: 0.3;
}

body.page-template-career .crr-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma 121:3533 — 626.167x928.654 rotated -30deg, centred 315.3985px left
   of the frame centre. Darkens the copy side of the photograph. */
body.page-template-career .crr-hero__slab {
  position: absolute;
  left: calc(50% - 315.3985px);
  top: -13.316px;
  width: 626.167px;
  height: 928.654px;
  transform: translateX(-50%) rotate(-30deg);
  background: linear-gradient(88.336deg,
    rgb(2, 0, 16) 28.288%,
    rgba(2, 0, 16, 0.978) 41.836%,
    rgba(2, 0, 16, 0.939) 52.583%,
    rgba(2, 0, 16, 0.825) 63.083%,
    rgba(2, 0, 16, 0.708) 72.176%,
    rgba(2, 0, 16, 0) 96.441%);
}

/* Figma 121:3524, the 1520x380 "bottom fade" at y=485, is NOT shipped, and
   not because it was hard: it cannot draw anything. It paints
   rgba(2,0,16,alpha), it sits UNDER the hero group in the frame's paint order
   (it is the 2nd child, the hero group is the 4th), and the only thing beneath
   it is the frame's own rgb(2,0,16) fill — so it composites its own colour
   over an identical colour at every alpha. Figma's 1:1 export agrees: the
   photograph is still at [29,37,25] on row 791 and cuts straight to the stats
   band's #100c19 on row 794, with no ramp. Painting it on TOP of the photo
   instead, which is the intuitive reading, wrongly crushed the hero's bottom
   third to near-black and was worth 15% of the frame on its own. */

body.page-template-career .crr-hero .crr-container {
  position: relative;
  z-index: 1;
}

/* Figma 121:3535 sits at y=244 in the frame. */
body.page-template-career .crr-hero__content {
  width: 551px;
  padding-top: 244px;
}

body.page-template-career .crr-hero .crr-eyebrow {
  font-weight: 600;
  line-height: normal;
}

/* Figma 121:3540 — Inter Regular 64/68 with trimmed vertical metrics, 20px
   below the eyebrow. */
body.page-template-career .crr-hero__title {
  margin: 20px 0 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 64px;
  line-height: 68px;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Figma 121:3541 — Gelasio, and 599px wide, which is 48px wider than the
   551px column it sits in. That overhang is in the design, not a slip: the
   paragraph is what sets the hero copy's measure. */
body.page-template-career .crr-hero__lede {
  width: 599px;
  margin: 28px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   2. BY THE NUMBERS — Figma 121:3542 (band y 792..1010, 218 tall, #100C19)

   Same band as the About page's 108:3261, minus that page's left-hand lede
   column, so the four stats share the full 1440 instead of 1328.
   ========================================================================== */
body.page-template-career .crr-stats {
  padding: 55px 0;
  background: #100c19;
}

body.page-template-career .crr-stats__list {
  display: flex;
  align-items: center;
  gap: 35px;
  height: 108px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-career .crr-stats__stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}

/* Figma gives the divider to cells 2-4 only — cell 1 has no left border. */
body.page-template-career .crr-stats__stat + .crr-stats__stat {
  border-left: 1px solid rgba(160, 100, 255, 0.3);
}

/* Figma 121:3548 centres this 57.6px line box on y=19 of its 65.6px slot (not
   on the slot's own middle), so the numeral's box starts 9.8px ABOVE the slot.
   Applied as a paint-only offset so the caption below is not dragged. */
body.page-template-career .crr-stats__num {
  display: block;
  position: relative;
  top: -9.8px;
  padding-bottom: 8px; /* Figma "Margin" is 65.6 tall with an 8px bottom pad */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 57.6px;
  line-height: 57.6px;
  color: #fff;
  white-space: nowrap;
}

/* Each caption gets a 42px slot and its own vertical seat inside it:
   cells 1 and 3 at top 0.2, cell 2 flush at 0, cell 4 at 5.4. */
body.page-template-career .crr-stats__caption-box {
  display: block;
  height: 42px;
  padding-top: 0.2px;
  box-sizing: border-box;
}

body.page-template-career .crr-stats__stat:nth-child(2) .crr-stats__caption-box { padding-top: 0; }
body.page-template-career .crr-stats__stat:nth-child(4) .crr-stats__caption-box { padding-top: 5.4px; }

body.page-template-career .crr-stats__caption {
  display: block;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #aaa5b3;
}

/* Figma measures each caption box separately; these are what break captions
   2, 3 and 4 onto two lines while caption 1 stays on one. */
body.page-template-career .crr-stats__stat:nth-child(1) .crr-stats__caption { max-width: 199px; }
body.page-template-career .crr-stats__stat:nth-child(2) .crr-stats__caption { max-width: 240.599px; }
body.page-template-career .crr-stats__stat:nth-child(3) .crr-stats__caption { max-width: 199px; }
body.page-template-career .crr-stats__stat:nth-child(4) .crr-stats__caption { max-width: 170px; }

/* ==========================================================================
   3. WHAT WE OFFER — Figma 121:3569 (band y 1010..1911, 901 tall)

   Background is the page's own #020010 plus 121:3570, a 1520x901 mask group
   whose only content is one 269r circle at (158.691, -72.17), blurred 87 and
   painted at 10% with a #885FF2 -> #4F378C radial. Shipped as that exact
   Figma SVG rather than a CSS approximation of a blurred ellipse.
   ========================================================================== */
body.page-template-career .crr-offer {
  /* 121:3570's own rect height. Every band below is an absolute rect in the
     frame with a hand-set height, not an auto-layout hug, so the height is
     pinned here rather than left to content — that is what keeps each
     section boundary on the y the design puts it on. */
  min-height: 901px;
  padding: 120px 0;
  background-color: #020010;
  background-image: url("../assets/images/careers/offer-glow.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1520px 901px;
}

body.page-template-career .crr-offer__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 726px;
  margin-inline: auto;
}

/* Figma 121:3578 — the 726px box is centred but the text inside it is NOT,
   which is why the heading's optical centre sits ~36px left of the eyebrow's. */
body.page-template-career .crr-offer__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -3.456px;
  color: #fff;
}

/* Figma 121:3579 pads the card block 200px in on each side of the 1440
   container, leaving 1040 for three 330.67 columns and two 24px gaps — the
   330.67 that each card's own gradient viewBox is authored against. */
body.page-template-career .crr-offer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 48px 0 0;
  padding: 0 200px;
  list-style: none;
}

body.page-template-career .crr-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 40px 56px;
  border: 1px solid rgba(168, 114, 216, 0.3);
  border-radius: 20px;
  box-sizing: border-box;
}

/* The three radial fills Figma actually uses across the six cards, kept as the
   literal SVG paints the file carries. A CSS radial-gradient() cannot express
   them: each is an ellipse whose axes are rotated ~40deg by a gradient
   transform, and CSS has no way to rotate a radial-gradient in place. */
body.page-template-career .crr-benefit--a { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 330.67 238' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.800000011920929'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(11.65 9.7 -11.799 14.171 14 5.5)'><stop stop-color='rgba(58,22,85,1)' offset='0'/><stop stop-color='rgba(40,17,61,1)' offset='0.5'/><stop stop-color='rgba(21,12,38,1)' offset='1'/></radialGradient></defs></svg>"), linear-gradient(90deg, rgb(16, 10, 33) 0%, rgb(16, 10, 33) 100%); }
body.page-template-career .crr-benefit--b { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 330.67 238' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-19.533 -13.1 15.935 -23.76 325.83 233.5)'><stop stop-color='rgba(58,22,85,1)' offset='0'/><stop stop-color='rgba(40,17,61,1)' offset='0.5'/><stop stop-color='rgba(21,12,38,1)' offset='1'/></radialGradient></defs></svg>"), linear-gradient(90deg, rgb(16, 10, 33) 0%, rgb(16, 10, 33) 100%); }
body.page-template-career .crr-benefit--c { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 330.67 238' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.7900000214576721'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(18.383 16.6 -20.192 22.362 14 5.5)'><stop stop-color='rgba(58,22,85,1)' offset='0'/><stop stop-color='rgba(40,17,61,1)' offset='0.5'/><stop stop-color='rgba(21,12,38,1)' offset='1'/></radialGradient></defs></svg>"), linear-gradient(90deg, rgb(16, 10, 33) 0%, rgb(16, 10, 33) 100%); }

/* Four of the six icons sit at their own size inside the 48px frame rather
   than filling it, so the outer box and the vector are sized separately; the
   per-icon left/top/width/height come from career.php. */
body.page-template-career .crr-benefit__icon {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  flex: none;
}

body.page-template-career .crr-benefit__icon img {
  position: absolute;
  display: block;
  max-width: none;
}

body.page-template-career .crr-benefit__label {
  width: 138px;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}

/* ==========================================================================
   4. VALUES WE LIVE BY — Figma 121:3669 (band y 1911..2782, 871 tall)
   ========================================================================== */
body.page-template-career .crr-values {
  min-height: 871px; /* 121:3671 */
  padding: 120px 0;
  background: #faf9fd;
}

body.page-template-career .crr-values__title {
  width: 726px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -3.456px;
  color: #171717;
}

body.page-template-career .crr-values__lede {
  width: 605px;
  flex: none;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 31.68px;
  color: rgba(23, 23, 23, 0.72);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Figma 121:3679 wraps fixed 466px cards on a 1440 row — three per row with
   the 2px remainder falling at the right edge, which is what the design does. */
body.page-template-career .crr-values__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

body.page-template-career .crr-value {
  flex: none;
  width: 466px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  background: #fff;
  border-radius: 20px;
  box-sizing: border-box;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.02));
}

body.page-template-career .crr-value__rule {
  display: block;
  width: 34.891px;
  height: 3.063px;
  background: #9a60fb;
  flex: none;
}

body.page-template-career .crr-value__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 26px;
  line-height: 30.004px;
  letter-spacing: -0.5px;
  color: #111;
}

/* Figma 121:3684 is a "Paragraph:margin" wrapper with an 8.8px top pad that
   stacks ON TOP of the card's own 20px column gap — the title-to-body gap is
   28.8, not 20. */
body.page-template-career .crr-value__body {
  margin: 0;
  padding-top: 8.8px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 13.76px;
  line-height: 22.016px;
  color: rgba(23, 23, 23, 0.72);
}

/* ==========================================================================
   5. LIFE AT TBI — Figma 121:3615 (band y 2782..3933, 1151 tall)
   ========================================================================== */
body.page-template-career .crr-life {
  min-height: 1151px; /* 121:3616 */
  padding: 120px 0;
  background: #fff;
}

body.page-template-career .crr-life__title,
body.page-template-career .crr-hiring__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 76.44px;
  letter-spacing: -4.29px;
  color: #28262d;
}

body.page-template-career .crr-life__lede,
body.page-template-career .crr-hiring__lede {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 31.68px;
  color: #625f67;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Figma 121:3624 — two 1440 rows, 32px apart. Row 1 leads with a fixed 634px
   tile and row 2 ends with one; the other four split the remaining 742 into
   two 371s. Explicit column tracks per row, because one wrapping flex line
   would fit all six across and flatten the composition. */
body.page-template-career .crr-life__grid {
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-career .crr-life__grid--1 {
  margin-top: 48px;
  grid-template-columns: 634px minmax(0, 1fr) minmax(0, 1fr);
}

body.page-template-career .crr-life__grid--2 {
  margin-top: 32px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 634px;
}

/* Figma pads the tile 263px down to seat the pill, which on a 322px tile with
   a 20px bottom pad is exactly the pill's own 39px height. Expressed as
   bottom-alignment instead: identical at 1520 (verified), and it survives the
   tile getting shorter at narrow widths, where a literal 263px would push the
   pill straight out of the box. */
body.page-template-career .crr-tile {
  position: relative;
  min-width: 0;
  height: 322px;
  padding: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
}

/* The 634px tiles are sized by their grid track, so this only documents them. */
body.page-template-career .crr-tile--wide { width: auto; }

body.page-template-career .crr-tile__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

body.page-template-career .crr-tile__media img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Per-tile crops, straight from each tile's own Figma placement.

   The two 634px tiles size their photograph to the tile on BOTH axes with no
   aspect correction — Figma stretches them. That is not a reading of the
   codegen: rebuilding the cricket tile from its source against Figma's own
   1:1 export scores a mean absolute error of 4.3/255 when stretched, versus
   26.1 (centre), 43.3 (bottom) and 45.2 (top) for every cover crop. So `fill`
   is the design, and object-position is irrelevant here.

   Three of the other four tiles are positioned and scaled instead, and each
   of those boxes preserves its source's aspect ratio to three decimal places,
   so they are undistorted. The fourth (certificate) ships pre-cropped — see
   below. */
body.page-template-career .crr-tile__media--cover-bottom img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Figma places the certificate photograph at 332.27% x 287.13%, so only the
   middle ~30% of its 4032x3024 source is ever on screen. Shipping the whole
   file at a resolution that survives that zoom would cost ~2.5MB for one
   tile, so it is exported already cropped to exactly the rect Figma shows
   (source px 1341,1156 -> 2554,2209) and the tile simply covers it. That box
   preserves the tile's aspect ratio to 0.03%, so `cover` and Figma's own
   placement resolve to the same pixels. */
body.page-template-career .crr-tile__media--precrop img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-template-career .crr-tile__media--party img       { left: -16.93%; top: -1.24%;  width: 149.81%; height: 115.22%; }
body.page-template-career .crr-tile__media--wellness img    { left: -11.1%;  top: -2.8%;   width: 122.19%; height: 105.59%; }
/* The codegen's own offsets for this tile (-25.49% / -2.18%) do not reproduce
   the frame: they land the photograph 3px low and 3px left of where Figma
   renders it, which on a 150-face crowd shot costs more pixel error than every
   other tile combined. Its width (138.03%) is right. These offsets were
   measured twice and independently — by cross-correlating the live tile
   against Figma's own export of node 121:3655, and by a re-render sweep in the
   browser — and both landed on the same place. */
body.page-template-career .crr-tile__media--team img        { left: -24.7%;  top: -3.11%;  width: 138.03%; height: 106.23%; }

/* One flat 20% black plus a bottom-anchored fade that only starts at 74.869%. */
body.page-template-career .crr-tile__scrim {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 74.869%, rgba(0, 0, 0, 0.64) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* The wellness tile (Figma 142:4168) is the one tile carrying only the fade,
   with no flat layer under it. Measured rather than read off the codegen —
   see the `wash` note in career.php. The fade still sits behind the pill, so
   the label keeps its contrast. */
body.page-template-career .crr-tile--nowash .crr-tile__scrim {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 74.869%, rgba(0, 0, 0, 0.64) 100%);
}

body.page-template-career .crr-tile__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);
}

body.page-template-career .crr-tile__icon {
  position: relative;
  display: block;
  width: 19px;
  height: 19px;
  flex: none;
}

body.page-template-career .crr-tile__icon img {
  position: absolute;
  display: block;
  max-width: none;
}

body.page-template-career .crr-tile__label {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 15px;
  line-height: 33px;
  color: #fff;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ==========================================================================
   6. HOW HIRING WORKS — Figma 121:3815 (band y 3933..4816, 883 tall)
   ========================================================================== */
body.page-template-career .crr-hiring {
  min-height: 883px; /* 121:3816 */
  padding: 120px 0;
  background: #faf9fd;
}

body.page-template-career .crr-hiring__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* Figma 121:3466 fixes the card at 400 tall and also declares a 202px bottom
   pad. Both cannot hold — 48 + 22 + 40 + 80 + 40 + 96 already exceeds the
   400 — and the frame renders content from the top with the slack falling
   below, so the fixed height is what is reproduced here. */
body.page-template-career .crr-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  height: 400px;
  padding: 48px 40px 0;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
}

body.page-template-career .crr-step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  padding: 3px 4px;
  border: 1px solid #171717;
  border-radius: 20px;
  box-sizing: border-box;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 32px;
  color: #171717;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-career .crr-step__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  color: #28262d;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-career .crr-step__body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: rgba(104, 100, 109, 0.88);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ==========================================================================
   7. APPLY — Figma 121:3721 (band y 4816..6149, 1333 tall)
   ========================================================================== */
body.page-template-career .crr-apply {
  min-height: 1333px; /* 121:3723 */
  padding: 120px 0;
  background: #020010;
}

body.page-template-career .crr-apply__title {
  width: 726px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -3.456px;
  color: #fff;
}

body.page-template-career .crr-apply__lede {
  width: 605px;
  flex: none;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 31.68px;
  color: rgba(255, 255, 255, 0.72);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Figma 121:3730 */
body.page-template-career .crr-form {
  margin: 40px 0 0;
  padding: 48px;
  background: #16121f;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  box-sizing: border-box;
}

body.page-template-career .crr-form__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.page-template-career .crr-form__row {
  display: flex;
  align-items: center;
  gap: 30px;
}

body.page-template-career .crr-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.page-template-career .crr-field--full { flex: none; }

/* Figma 121:3735 — a 28.8px label slot with an 8.8px bottom pad. */
body.page-template-career .crr-field__label {
  display: block;
  height: 28.8px;
  padding-bottom: 8.8px;
  box-sizing: border-box;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12.16px;
  line-height: 19.456px;
  letter-spacing: 1.0944px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

body.page-template-career .crr-field__req { color: #a78bfa; }

/* Figma 121:3737 declares no corner radius — these are square, not pills. */
body.page-template-career .crr-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 51.656px;
  padding: 12.8px 15.2px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
}

body.page-template-career .crr-input__icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

body.page-template-career .crr-input__icon--24 { width: 24px; height: 24px; }

body.page-template-career .crr-input__icon img {
  position: absolute;
  display: block;
  max-width: none;
}

body.page-template-career .crr-input input,
body.page-template-career .crr-input select,
body.page-template-career .crr-input textarea {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15.04px;
  line-height: normal;
  color: #fff;
}

body.page-template-career .crr-input input:focus,
body.page-template-career .crr-input select:focus,
body.page-template-career .crr-input textarea:focus { outline: none; }

body.page-template-career .crr-input:focus-within {
  border-color: rgba(167, 139, 250, 0.7);
}

body.page-template-career .crr-input input::placeholder,
body.page-template-career .crr-input textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
  opacity: 1;
}

/* The selects sit on "Select one" until a real choice is made, so the
   placeholder state has to read like the inputs' placeholders. */
body.page-template-career .crr-input select:invalid,
body.page-template-career .crr-input select:has(option[value=""]:checked) {
  color: rgba(255, 255, 255, 0.32);
}

body.page-template-career .crr-input select option {
  background: #16121f;
  color: #fff;
}

body.page-template-career .crr-input--select select { padding-right: 32px; }

body.page-template-career .crr-input__chevron {
  position: absolute;
  right: 15.2px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
}

body.page-template-career .crr-input__chevron img {
  display: block;
  width: 24px;
  height: 24px;
}

/* Figma 121:3807 — 144 tall, same square shell as the inputs. */
body.page-template-career .crr-input--area {
  height: 144px;
  align-items: stretch;
}

body.page-template-career .crr-input--area textarea {
  width: 100%;
  height: 100%;
  resize: none;
  line-height: 24.064px;
}

/* Figma 121:3796 */
body.page-template-career .crr-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px 17.6px;
  border: 1px dashed rgba(185, 108, 255, 0.32);
  box-sizing: border-box;
  cursor: pointer;
}

body.page-template-career .crr-drop__icon {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
}

body.page-template-career .crr-drop__icon img { display: block; width: 34px; height: 34px; }

body.page-template-career .crr-drop__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

body.page-template-career .crr-drop__cta {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 12.16px;
  line-height: 19.456px;
  letter-spacing: 1.0944px;
  text-transform: uppercase;
  text-align: center;
  color: #a78bfa;
}

body.page-template-career .crr-drop__hint {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  color: rgba(104, 100, 109, 0.8);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Kept in the layout (not display:none) so it stays reachable by keyboard and
   still reports native validation, but sized to nothing so the dashed panel
   is the only thing seen. */
body.page-template-career .crr-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  inset: 0;
  margin: auto;
}

body.page-template-career .crr-drop:focus-within {
  border-color: rgba(185, 108, 255, 0.72);
}

/* Figma 121:3809 — a 26px top pad above a 16px-gapped column. */
body.page-template-career .crr-form__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 26px;
}

body.page-template-career .crr-form__note {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 12.8px;
  line-height: 20.48px;
  color: rgba(255, 255, 255, 0.6);
}

body.page-template-career .crr-form__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Figma 121:3813 — square, not rounded. */
body.page-template-career .crr-form__submit {
  display: inline-flex;
  align-items: center;
  padding: 14.4px 27.2px;
  border: 0;
  border-radius: 0;
  background: var(--color-cta-bg, #f7e934);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12.8px;
  line-height: normal;
  letter-spacing: 0.768px;
  text-transform: uppercase;
  text-align: center;
  color: #12100a;
  cursor: pointer;
}

/* ==========================================================================
   8. QUESTIONS — Figma 121:3828 (band y 6149..6877, 728 tall)
   ========================================================================== */
body.page-template-career .crr-cta {
  min-height: 728px; /* 121:3830 */
  padding: 120px 0;
  background: #fff;
}

/* Figma 121:3834 — a 1265x488 rounded-rect mask over a 1345x550 artwork that
   is offset (-35, -31) behind it. */
body.page-template-career .crr-cta__card {
  position: relative;
  width: 1265px;
  height: 488px;
  margin-inline: auto;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

body.page-template-career .crr-cta__art {
  position: absolute;
  inset: 0;
  display: block;
}

/* Figma places a 1345x549.285 artwork at (-35, -30.725) behind the 1265x488
   card. Written as percentages of the card, which are the same numbers at
   1520 and keep the composition intact once the card starts shrinking. */
body.page-template-career .crr-cta__art img {
  position: absolute;
  left: -2.7668%;   /* -35 / 1265 */
  top: -6.2961%;    /* -30.725 / 488 */
  width: 106.3241%; /* 1345 / 1265 */
  height: 112.5584%; /* 549.285 / 488 */
  max-width: none;
  display: block;
  object-fit: cover;
}

body.page-template-career .crr-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
  text-align: center;
}

/* Figma 121:3836 — the one Inter Black element on the page. */
body.page-template-career .crr-cta__title {
  width: 702px;
  margin: 21.72px 0 0;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 63px;
  line-height: 71px;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-career .crr-cta__body {
  width: 827px;
  margin: 40px 0 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  opacity: 0.8;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ==========================================================================
   RESPONSIVE — INTERPRETED, NOT FIGMA-VERIFIED

   Node 121:3522 is the only frame for this design; the file has no Careers
   tablet or mobile frame (see the header of this file). Everything below is
   this build's own work, following the breakpoint ladder the rest of the
   theme already uses (1519 / 1279 / 1023 / 767 / 479).

   The desktop rules above pin a lot of literal Figma geometry — 726px
   headings, 466px cards, 634px photo tiles, a 1265x488 card, a 792px hero.
   The first block below releases those into proportional equivalents so the
   layout has somewhere to go; the later blocks reflow and rescale.
   ========================================================================== */

@media (max-width: 1519px) {
  /* The pinned band heights are the authored heights of Figma's absolute
     background rects. Below the design width they would only strand
     whitespace, so height goes back to being content-driven. */
  body.page-template-career .crr-offer,
  body.page-template-career .crr-values,
  body.page-template-career .crr-life,
  body.page-template-career .crr-hiring,
  body.page-template-career .crr-apply,
  body.page-template-career .crr-cta {
    min-height: 0;
  }

  /* Fixed measures become maxima. */
  body.page-template-career .crr-offer__head,
  body.page-template-career .crr-offer__title,
  body.page-template-career .crr-values__title,
  body.page-template-career .crr-apply__title {
    width: 100%;
    max-width: 726px;
  }

  body.page-template-career .crr-values__lede,
  body.page-template-career .crr-apply__lede {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 605px;
  }

  body.page-template-career .crr-split__head--593 {
    width: 593px;
    max-width: 55%;
  }

  body.page-template-career .crr-hero__content,
  body.page-template-career .crr-hero__lede {
    width: 100%;
    max-width: 599px;
  }

  body.page-template-career .crr-cta__card {
    width: 100%;
    max-width: 1265px;
    height: auto;
    min-height: 488px;
  }

  body.page-template-career .crr-cta__title { width: 100%; max-width: 702px; }
  body.page-template-career .crr-cta__body  { width: 100%; max-width: 827px; }

  /* 200px of side padding on a 1440 row is 14%; keep the proportion. */
  body.page-template-career .crr-offer__grid { padding-inline: 13.9%; }

  /* Value cards stop being 466px wide and share the row instead. */
  body.page-template-career .crr-values__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-template-career .crr-value { width: auto; }

  /* The two 634px tiles keep their share of the row (634 : 371 : 371). */
  body.page-template-career .crr-life__grid--1 { grid-template-columns: 634fr 371fr 371fr; }
  body.page-template-career .crr-life__grid--2 { grid-template-columns: 371fr 371fr 634fr; }
  body.page-template-career .crr-tile--wide { width: auto; }
}

@media (max-width: 1279px) {
  body.page-template-career .crr-offer,
  body.page-template-career .crr-values,
  body.page-template-career .crr-life,
  body.page-template-career .crr-hiring,
  body.page-template-career .crr-apply,
  body.page-template-career .crr-cta {
    padding-block: 96px;
  }

  body.page-template-career .crr-offer__title,
  body.page-template-career .crr-values__title,
  body.page-template-career .crr-apply__title {
    font-size: 60px;
    line-height: 64px;
    letter-spacing: -2.4px;
  }

  body.page-template-career .crr-life__title,
  body.page-template-career .crr-hiring__title {
    font-size: 60px;
    line-height: 62px;
    letter-spacing: -2.8px;
  }

  body.page-template-career .crr-hero__title { font-size: 56px; line-height: 60px; }
  body.page-template-career .crr-cta__title  { font-size: 52px; line-height: 60px; }

  body.page-template-career .crr-offer__grid { padding-inline: 0; }

  /* Three 464px step cards do not survive a 1199px row; two columns with the
     third below reads better than three cramped ones. */
  body.page-template-career .crr-hiring__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-template-career .crr-step { height: auto; min-height: 340px; padding-bottom: 48px; }

  body.page-template-career .crr-split--wide { gap: 48px; }
}

@media (max-width: 1023px) {
  /* header.css shrinks .site-header__inner to 72px at this exact breakpoint
     but leaves the --header-height token at its 77px desktop value, so the
     hero's pull-up and its top padding would both be 5px out. Corrected on
     this template only; base.css keeps the token it documents. */
  body.page-template-career .crr-page { --header-height: 72px; }

  body.page-template-career .crr-offer,
  body.page-template-career .crr-values,
  body.page-template-career .crr-life,
  body.page-template-career .crr-hiring,
  body.page-template-career .crr-apply,
  body.page-template-career .crr-cta {
    padding-block: 80px;
  }

  /* Both two-column heads stack. */
  body.page-template-career .crr-split {
    flex-direction: column;
    gap: 28px;
  }

  body.page-template-career .crr-split__head,
  body.page-template-career .crr-split__head--593 {
    width: 100%;
    max-width: none;
  }

  body.page-template-career .crr-values__lede,
  body.page-template-career .crr-apply__lede {
    flex: none;
    max-width: none;
  }

  body.page-template-career .crr-offer__title,
  body.page-template-career .crr-values__title,
  body.page-template-career .crr-apply__title,
  body.page-template-career .crr-life__title,
  body.page-template-career .crr-hiring__title {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -1.8px;
    max-width: none;
  }

  body.page-template-career .crr-cta__title { font-size: 42px; line-height: 48px; }

  /* HERO. The desktop composition is a 1253px photograph rotated -0.91deg and
     skewed -2deg over a -30deg gradient slab — geometry that only reads at
     the design width, and that a narrow viewport turns into an arbitrary
     crop. Below 1024 the photograph simply covers the hero and the slab
     becomes a vertical scrim, which keeps the copy legible on top of it. */
  body.page-template-career .crr-hero {
    height: auto;
    min-height: 0;
    padding-bottom: 80px;
  }

  body.page-template-career .crr-hero__photo {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    opacity: 0.32;
  }

  body.page-template-career .crr-hero__slab {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    background: linear-gradient(180deg, rgba(2, 0, 16, 0.55) 0%, rgba(2, 0, 16, 0.75) 60%, rgb(2, 0, 16) 100%);
  }

  body.page-template-career .crr-hero__content {
    padding-top: calc(var(--header-height, 77px) + 80px);
    max-width: none;
  }

  body.page-template-career .crr-hero__title { font-size: 48px; line-height: 54px; }
  body.page-template-career .crr-hero__lede  { font-size: 21px; line-height: 34px; max-width: 620px; }

  /* Stats go two-up; four 57.6px numerals do not fit a tablet row. */
  body.page-template-career .crr-stats__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    height: auto;
  }

  body.page-template-career .crr-stats__stat + .crr-stats__stat { border-left: 0; }
  body.page-template-career .crr-stats__stat:nth-child(even) { border-left: 1px solid rgba(160, 100, 255, .3); }
  body.page-template-career .crr-stats__stat { padding-left: 0; }
  body.page-template-career .crr-stats__stat:nth-child(even) { padding-left: 24px; }
  body.page-template-career .crr-stats__num { font-size: 46px; line-height: 46px; top: 0; }
  body.page-template-career .crr-stats__caption-box,
  body.page-template-career .crr-stats__stat:nth-child(2) .crr-stats__caption-box,
  body.page-template-career .crr-stats__stat:nth-child(4) .crr-stats__caption-box {
    height: auto;
    padding-top: 0;
  }
  body.page-template-career .crr-stats__stat .crr-stats__caption { max-width: none; }

  body.page-template-career .crr-offer__grid,
  body.page-template-career .crr-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-template-career .crr-hiring__grid { grid-template-columns: minmax(0, 1fr); }
  body.page-template-career .crr-step { min-height: 0; }
  body.page-template-career .crr-step__title { font-size: 28px; line-height: 36px; }

  /* Photo grid: the wide tile spans the pair above/below it. */
  body.page-template-career .crr-life__grid--1,
  body.page-template-career .crr-life__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  body.page-template-career .crr-life__grid--2 { margin-top: 24px; }
  body.page-template-career .crr-tile--wide { grid-column: span 2; }
  body.page-template-career .crr-tile { height: 280px; }

  body.page-template-career .crr-form { padding: 36px; }
  body.page-template-career .crr-form__row { column-gap: 24px; }
}

@media (max-width: 767px) {
  body.page-template-career .crr-offer,
  body.page-template-career .crr-values,
  body.page-template-career .crr-life,
  body.page-template-career .crr-hiring,
  body.page-template-career .crr-apply,
  body.page-template-career .crr-cta {
    padding-block: 60px;
  }

  body.page-template-career .crr-offer__title,
  body.page-template-career .crr-values__title,
  body.page-template-career .crr-apply__title,
  body.page-template-career .crr-life__title,
  body.page-template-career .crr-hiring__title {
    font-size: 36px;
    line-height: 41px;
    letter-spacing: -1.2px;
  }

  body.page-template-career .crr-cta__title { font-size: 32px; line-height: 38px; }
  body.page-template-career .crr-hero__title { font-size: 38px; line-height: 44px; }
  body.page-template-career .crr-hero__lede  { font-size: 18px; line-height: 30px; }
  body.page-template-career .crr-hero__content { padding-top: calc(var(--header-height, 77px) + 56px); }
  body.page-template-career .crr-hero { padding-bottom: 60px; }

  body.page-template-career .crr-values__lede { font-size: 15px; line-height: 27px; }
  body.page-template-career .crr-life__lede,
  body.page-template-career .crr-hiring__lede { font-size: 17px; line-height: 28px; }

  body.page-template-career .crr-offer__grid,
  body.page-template-career .crr-values__grid,
  body.page-template-career .crr-life__grid--1,
  body.page-template-career .crr-life__grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-template-career .crr-tile--wide { grid-column: auto; }
  body.page-template-career .crr-tile { height: 240px; }

  body.page-template-career .crr-benefit { padding: 36px 24px 40px; }
  body.page-template-career .crr-value { padding: 28px; }
  body.page-template-career .crr-value__title { font-size: 22px; line-height: 27px; }
  body.page-template-career .crr-step { padding: 36px 28px 40px; }
  body.page-template-career .crr-step__title { font-size: 24px; line-height: 32px; }
  body.page-template-career .crr-step__body { font-size: 15px; line-height: 28px; }

  /* The form's two-up rows stack; the 79.891px field slot was only ever
     holding a 28.8px label above a 51.656px input, so it can go. */
  body.page-template-career .crr-form { padding: 24px; }
  body.page-template-career .crr-form__row { flex-direction: column; gap: 20px; }
  body.page-template-career .crr-form__submit { width: 100%; justify-content: center; }
  body.page-template-career .crr-drop { padding-block: 40px; }

  body.page-template-career .crr-stats { padding-block: 40px; }
  body.page-template-career .crr-stats__num { font-size: 40px; line-height: 40px; }
}

@media (max-width: 479px) {
  body.page-template-career .crr-offer__title,
  body.page-template-career .crr-values__title,
  body.page-template-career .crr-apply__title,
  body.page-template-career .crr-life__title,
  body.page-template-career .crr-hiring__title {
    font-size: 30px;
    line-height: 35px;
    letter-spacing: -0.9px;
  }

  body.page-template-career .crr-hero__title { font-size: 32px; line-height: 38px; }
  body.page-template-career .crr-cta__title  { font-size: 26px; line-height: 32px; }
  body.page-template-career .crr-hero__lede  { font-size: 17px; line-height: 28px; }

  /* Two 40px numerals plus a caption do not fit 320px side by side. */
  body.page-template-career .crr-stats__list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.page-template-career .crr-stats__stat:nth-child(even) { border-left: 0; padding-left: 0; }

  body.page-template-career .crr-tile { height: 200px; }
  body.page-template-career .crr-benefit { padding: 28px 18px 32px; }
  body.page-template-career .crr-benefit__label { width: 100%; }
  body.page-template-career .crr-value { padding: 22px; }
  body.page-template-career .crr-step { padding: 28px 22px 32px; }
  body.page-template-career .crr-form { padding: 18px; }
  body.page-template-career .crr-cta__card { min-height: 420px; }
}

/* The hero photograph is decorative and the only motion on the page is the
   header's own; nothing here animates, so there is no reduced-motion rule to
   write. Kept as a note so the omission reads as deliberate. */