/* ═══════════════════════════════════════════════════════════════════════════
   THE EFFERENT SKIN FOR THE SHARED CAREERS APP

   /careers/<role> and its apply flow on this domain are rendered by the VMMG
   Next app and proxied by functions/_middleware.js. That app's posting markup
   is written against seven custom properties. This file remaps those seven to
   this site's tokens, so the SAME MARKUP renders in this site's palette and
   typeface — one posting, two skins, and no second copy of a page to drift.

   Loaded after efferent-base/v2/v3, which is where the tokens on the right
   hand side come from. Nothing here invents a colour or a type size.

   Keep this file a REMAP. The moment it starts holding layout rules it has
   become a second stylesheet for a page that already has one, which is the
   thing the whole approach exists to avoid.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Vitality token            → Efferent token */
  --v-ink-black: var(--ink);          /* #171717  → #0F1213 */
  --v-yellow: var(--orange);          /* #f4cf00  → #F16B2B */
  --v-bone: var(--cream);             /* #f7f4ec  → #EFE6D9 */
  --v-mineral: var(--cream-hi);       /* #dce8e5  → #F6EEE4 */
  --ink-muted: #4A4842;
  --font-poppins: var(--sans);
  --font-sans: var(--sans);
}

/* This site's body is ink, because its own pages open on a dark hero frame.
   The posting page opens on a light band, so the ground underneath it has to
   be light or it shows through at the edges as a black seam — the same
   collapsed-margin seam the blog build hit. */
body:has(.cr) { background: var(--cream); color: var(--ink); }

/* The app's own chrome offset assumes a fixed header this site does not have. */
.cr.pt-20 { padding-top: 0; }

/* Editorial, not soft: this site has no rounded cards and no drop shadows.
   Flattening them here is what stops the page reading as another company's
   page wearing our colours. */
.cr-panel,
.cr-tile,
.cr-hero-photo,
.cr-chip,
.cr-ribbon { border-radius: 0; box-shadow: none; }

.cr-btn { border-radius: 0; font-family: var(--mono); font-weight: 700; font-size: 12px;
          letter-spacing: .14em; text-transform: uppercase; }
.cr-btn-y { background: var(--orange); border-color: var(--orange); color: #14100E; }
.cr-btn-y:hover { background: var(--orange-dk); border-color: var(--orange-dk); color: #fff; }
.cr-btn-ink { background: transparent; border: 1px solid var(--line-cream); color: var(--ink); }

/* Eyebrows here are mono and orange, the way every other eyebrow on the site
   is, rather than the app's sans-serif small caps. */
.cr-eyebrow,
.cr-kicker,
.cr-tile-label {
  font-family: var(--mono); font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--orange);
}

/* Display type: this site's scale, which is tighter and heavier than the app's. */
.cr-h1 { letter-spacing: -.02em; }
.cr-mark { color: #14100E; }

/* The ink apply band. The app paints it near-black already; this pins it to
   the same ink every dark band on the site uses, and fixes the two rules that
   assume a yellow accent on it. */
.cr-dark { background: var(--ink); }
.cr-dark-h, .cr-dark-sub { color: var(--cream-hi); }
.cr-dark-note { color: var(--on-dark); }
.cr-dark .cr-eyebrow { color: var(--orange); }

.cr-fine, .cr-eeo p { color: #6E6B63; }
.cr-back { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cr-back:hover { color: var(--orange-dk); }

/* The app's site-wide contact widget is Vitality's own surface — its greeting,
   its disclosure line and its aria-label all name that brand — and it reaches
   these pages only because it is mounted in the root layout. Hidden here rather
   than gated server-side: reading the brand in a root layout needs headers(),
   which opts that entire site out of static rendering. display:none also takes
   it out of the accessibility tree, so the label is not announced either.

   HIDE THE ROOT, NEVER A LIST OF PARTS. The first version of this rule named
   .cw-card, .cw-fab and the aria-label — three of the widget's fifty-odd
   elements, chosen off a screenshot — and left the "Let's talk growth." teaser
   and the ripple pulses painting on the page. The component returns a single
   .cw-root wrapper; that is the thing to hide, and it covers every part added
   to the widget later without anyone having to remember this file exists. */
.cw-root { display: none !important; }