/* ============================================================
   Careers — landing + role detail pages
   Self-contained component layer. Uses global tokens from site.css.
   Loaded ONLY on careers.html + careers/*.html (no global cache bump).
   ============================================================ */

/* screen-reader-only utility (not defined globally in site.css) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shared section rhythm ---------- */
.car-section{padding:104px 0;background:var(--paper)}/* solid fill so bridge ledge renders over the tint/sky sections above (variants below override) */
.car-section .head{max-width:720px;margin:0 0 52px}
.car-section .head h2{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.025em;margin:16px 0 14px}
.car-section .head p.lede{color:var(--ink-soft);font-size:18px;line-height:1.7;max-width:60ch}
.car-section.tint{background:var(--paper-2)}
.car-section.sky{background:var(--sky)}
/* dark "instrument band" variant — mirrors the dark sec2 on the service pages */
.car-section.dark{background:var(--ink)}
.car-section.dark .head h2{color:#fff}
.car-section.dark .head .lede{color:rgba(255,255,255,.82)}
.car-section.dark .eyebrow{color:var(--accent-lt)}
.car-section.dark .eyebrow::before{background:var(--accent-lt)}

/* ---------- OPEN POSITIONS grid ---------- */
.role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.role-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 30px 26px;transition:transform .3s,box-shadow .3s,border-color .3s;overflow:hidden}
.role-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .35s ease}
.role-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.role-card:hover::before{transform:scaleY(1)}
.role-card:focus-within{border-color:var(--accent-dk)}
.role-card .role-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
/* white-space:nowrap — a pill must never break across lines. The flex-wrap
   container was scoped to `.role-card .role-tags`, so in the ROLE HERO the tags
   were plain inline spans: "8–10 HR SHIFTS" wrapped mid-pill and rendered as
   two separate broken pill fragments on two lines at 375px. nowrap keeps each
   pill intact; the flex rule below lets the ROW wrap instead of the pill. */
.role-tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dk);
  background:var(--sky);border-radius:999px;padding:5px 11px;white-space:nowrap}
.role-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-start}
.role-card h3{font-size:clamp(21px,2.4vw,26px);letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.role-card p{color:var(--ink-soft);font-size:15px;line-height:1.66;flex:1;margin-bottom:22px}
/* the whole card is clickable via a stretched link, but the text link stays the visible affordance */
.role-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:15px;
  border-bottom:1.5px solid var(--accent);padding-bottom:3px;align-self:flex-start;transition:gap .2s,color .2s}
.role-link::after{content:"";position:absolute;inset:0}
.role-card:hover .role-link{color:var(--accent-dk);gap:12px}
.role-link .arw{transition:transform .25s}

/* ---------- CAREERS LANDING HERO ----------
   Scoped safely: careers.css also loads on careers/*.html, but those use .role-hero.
   The hero photo's faces sit at ~18-32% of the source frame and the header's bottom
   edge is 148px, so a centred crop put Dr. Pate's face directly behind the nav links.
   Solved rather than nudged: at every viewport tested (1280/1366/1440/1585/1680/1920)
   the ONLY centre-origin configuration that cleared the header was zero drift with the
   crop pinned to the top — losing the ambient motion that defines this hero.
   ** transform-origin fixes it instead. ** heroZoom scales about the centre by default,
   which pulls the upper half UP into the header as it zooms. Anchoring the origin to the
   top makes the same zoom push content DOWN, so the drift now moves faces clear of the
   nav rather than into it, and the motion is kept. */
.carely-hero__bg img{object-position:center top;transform-origin:50% 0}

/* ---------- BENEFITS — bento (dark statement anchor + tiles) ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px}
/* dark ink anchor tile — carries the section intro, spans two rows on the left */
.bento-statement{grid-column:1;grid-row:span 2;background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:38px 34px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
/* Reception photo behind the anchor tile. The scrim opacity below was not guessed -
   it was measured by compositing the real pixels under each text run. Worst case is the
   teal .eyebrow (12.5px, needs 4.5:1) at 5.02:1. ⚠️ Measure with an ELEMENT screenshot -
   page.screenshot({clip}) is PAGE-relative while getBoundingClientRect is VIEWPORT-
   relative, and after scrolling that mismatch fabricated a mobile FAIL that nearly got
   this scrim darkened to .96 for nothing. Solid scrim, no gradient (house rule). */
.bento-statement__bg{position:absolute;inset:0;z-index:0}
.bento-statement__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.bento-statement__bg::after{content:"";position:absolute;inset:0;background:rgba(52,45,79,.88)}
/* lift the copy (and the decorative ring) above the photo */
.bento-statement > .eyebrow,
.bento-statement > h2,
.bento-statement > .lede{position:relative;z-index:2}
.bento-statement::after{z-index:1}
.bento-statement .eyebrow{color:var(--accent-lt);margin-bottom:16px}
.bento-statement .eyebrow::before{background:var(--accent-lt)}
.bento-statement h2{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.025em;line-height:1.08;color:#fff;margin-bottom:14px}
.bento-statement .lede{color:rgba(255,255,255,.82);font-size:16px;line-height:1.65;max-width:34ch}
/* faint teal ring, bleeds off the bottom-right corner (decorative, no gradient) */
.bento-statement::after{content:"";position:absolute;right:-46px;bottom:-46px;width:158px;height:158px;
  border-radius:50%;border:1.5px solid rgba(127,208,212,.22);pointer-events:none}

.bene{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.bene::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.bene:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.bene:hover::before{transform:scaleX(1)}
/* filled teal medallion — white icon (deep teal for contrast) */
.bene .ic{width:50px;height:50px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-dk);margin-bottom:18px}
.bene .ic svg{width:23px;height:23px;color:#fff}
.bene h3{font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.bene p{color:var(--ink-soft);font-size:14.5px;line-height:1.62}
/* wide tile spans two columns and lays the medallion beside the copy */
.bene-wide{grid-column:span 2;flex-direction:row;align-items:center;gap:22px}
.bene-wide .ic{margin-bottom:0}
.bene-wide .bene-tx{flex:1}
.bene-wide .bene-tx h3{margin-bottom:8px}

/* ---------- CORE VALUES — editorial numbered spine ---------- */
.values-layout{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.values-rail{position:sticky;top:168px}
.values-rail .eyebrow{margin-bottom:14px}
.values-rail h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.025em;line-height:1.08;margin:0 0 16px}
.values-rail .lede{color:var(--ink-soft);font-size:17px;line-height:1.7;max-width:40ch}

.values-spine{list-style:none;margin:0;padding:0;position:relative}
/* continuous teal spine running through the node gutter */
.values-spine::before{content:"";position:absolute;left:101px;top:48px;bottom:48px;width:2px;background:rgba(31,166,172,.30)}
.vrow{position:relative;display:grid;grid-template-columns:84px 1fr;column-gap:36px;padding:36px 0;align-items:start}
.vrow:not(:last-child){border-bottom:1px solid rgba(52,45,79,.14)}
/* teal node sits on the spine; sky-colored halo makes the line "break" at each node */
.vrow::before{content:"";position:absolute;left:95px;top:46px;width:13px;height:13px;border-radius:50%;
  background:var(--accent-dk);box-shadow:0 0 0 5px var(--sky);z-index:1}
.vrow__num{font-family:var(--font-head);font-weight:700;font-size:clamp(32px,3.6vw,46px);line-height:1;
  color:rgba(52,45,79,.18);text-align:right;padding-right:2px}
.vrow__text{padding-top:4px}
.vrow__text h3{font-size:clamp(20px,2.3vw,26px);letter-spacing:-.02em;margin:0 0 10px}
.vrow__text p{color:var(--ink-soft);font-size:15.5px;line-height:1.72;max-width:56ch}

/* ---------- WHY WORK HERE split ---------- */
.why-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.why-copy h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.025em;margin:16px 0 18px}
.why-copy p{color:var(--ink-soft);font-size:17px;line-height:1.8;margin-bottom:16px;max-width:52ch}
.why-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.why-list li{position:relative;padding-left:30px;color:var(--ink-soft);font-size:16px;line-height:1.55}
.why-list li svg{position:absolute;left:0;top:2px;width:19px;height:19px;color:var(--accent-dk)}
.why-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--ink);box-shadow:var(--shadow-md)}
.why-media img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   ROLE DETAIL PAGE
   ============================================================ */
/* photo hero — full-bleed image + solid scrim (white text), matches the site heroes.
   Bottom padding clears the -52px bridge lift so the ledge doesn't ride into the buttons. */
.role-hero{position:relative;overflow:hidden;background:var(--ink);padding:184px 0 118px}
.role-hero__bg{position:absolute;inset:0;z-index:0}
.role-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
/* .6 scrim + .9-alpha white floors at 4.14:1 — treatment-assistant measured
   4.25:1 and associate-veterinarian 4.43:1 against their role-hero photos.
   Solid white + .66 scrim floors at 5.73:1. */
.role-hero__scrim{position:absolute;inset:0;z-index:1;background:rgba(26,21,38,.66)}
.role-hero .container{max-width:960px;position:relative;z-index:2}
.role-hero .back{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:rgba(255,255,255,.85);margin-bottom:20px;transition:gap .2s,color .2s}
.role-hero .back:hover{color:#fff;gap:11px}
.role-hero h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.03em;line-height:1.04;margin:14px 0 16px;max-width:20ch;color:#fff}
.role-hero .role-tags{margin-bottom:18px}
.role-hero .lede{font-size:clamp(16.5px,1.9vw,20px);color:#fff;line-height:1.65;max-width:58ch}
.role-hero .hero-actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
/* Call button: solid ink fill, NOT a transparent ghost.
   ⚠️ It was `background:transparent` until the 10 Aug pre-launch QA. White text
   sat straight on the hero photograph, and the photo is not uniformly dark —
   measured against the real composited pixels the button ran 3.79:1 on
   associate-veterinarian and 4.23:1 on treatment-assistant, against a 4.5
   requirement. CSR measured 4.74:1, i.e. passing with no margin at all.
   axe never flagged any of it: text over a background image comes back
   `incomplete`, not a violation.
   A transparent control over photography cannot be made safe by picking a
   better photo — every new hero image would have to be re-measured, and one
   bright crop silently breaks it again. The solid fill removes the variable.
   White on --ink is 12.91:1 and holds whatever is behind it.
   The white keyline stays so it still reads as secondary to .btn-accent. */
.role-hero .btn-ghost{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.role-hero .btn-ghost:hover{background:#241F37;box-shadow:inset 0 0 0 1.5px #fff}

/* two-column: sticky at-a-glance aside + main content.
   Needs an opaque bg so the bridge's rounded-top ledge + shadow render over the dark photo hero. */
.role-body{background:var(--paper);padding:64px 0 76px}
.role-body .container{max-width:960px}
.role-layout{display:grid;grid-template-columns:1fr 296px;gap:48px;align-items:start}
.role-content h2{font-size:clamp(21px,2.6vw,29px);letter-spacing:-.02em;margin:30px 0 12px}
.role-content h2:first-child{margin-top:0}
.role-content p{color:var(--ink-soft);font-size:16.5px;line-height:1.7;margin-bottom:14px;max-width:62ch}
/* short factual lists read as a tight two-up so the column isn't a tall sparse stack */
.role-content ul{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 28px;max-width:none}
.role-content ul li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.role-content ul li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(31,166,172,.16)}

/* sticky aside card — top clears the 148px fixed header (util bar + main bar) plus a gap */
.role-aside{position:sticky;top:168px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 28px 30px;box-shadow:var(--shadow-sm)}
.role-aside h2{font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-dk);margin-bottom:18px}
.role-aside dl{margin:0;display:grid;gap:15px}
.role-aside dt{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:600;margin-bottom:3px}
.role-aside dd{margin:0;font-size:15.5px;color:var(--ink);line-height:1.5;font-weight:500}
.role-aside .aside-sep{height:1px;background:var(--line);margin:20px 0}
.role-aside .aside-note{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.role-aside .aside-note a{color:var(--accent-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.role-aside .btn{width:100%;justify-content:center;margin-top:20px}

/* ============================================================
   APPLICATION FORM
   ============================================================ */
.apply{background:var(--ink);padding:80px 0 90px}
.apply .container{max-width:820px}
.apply .head{text-align:center;max-width:600px;margin:0 auto 40px}
.apply .head .eyebrow{justify-content:center;color:var(--accent-lt);margin-bottom:16px}
.apply .head .eyebrow::before{background:var(--accent-lt)}
.apply .head h2{color:#fff;font-size:clamp(28px,3.8vw,44px);letter-spacing:-.025em;margin-bottom:12px}
.apply .head p{color:rgba(255,255,255,.8);font-size:17px;line-height:1.65}

.apply-form{background:#fff;border-radius:var(--r-lg);padding:38px clamp(22px,4vw,44px) 40px;box-shadow:var(--shadow-lg)}
.apply-form fieldset{border:none;margin:0;padding:0}
.apply-form legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1 / -1}
.field label{font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:8px}
.field label .req{color:var(--accent-dk);font-weight:600}
.field label .opt{color:var(--ink-soft);font-weight:500;font-size:13px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{
  font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-control);border-radius:var(--r-sm);padding:13px 15px;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-dk);box-shadow:0 0 0 3px rgba(14,115,120,.16)}
.field .hint{font-size:13px;color:var(--ink-soft);margin-top:7px;line-height:1.5}

/* file upload — styled label wrapping a visually-hidden input */
.file-field .file-drop{display:flex;align-items:center;gap:13px;border:1.5px dashed var(--line-control);border-radius:var(--r-sm);
  padding:14px 16px;background:var(--paper);cursor:pointer;transition:border-color .2s,background .2s}
.file-field .file-drop:hover{border-color:var(--accent-dk);background:#fff}
.file-field input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.file-field input[type=file]:focus-visible + .file-drop{border-color:var(--accent-dk);box-shadow:0 0 0 3px rgba(14,115,120,.16)}
.file-field .file-ic{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-xs);background:var(--sky);display:grid;place-items:center}
.file-field .file-ic svg{width:19px;height:19px;color:var(--accent-dk)}
.file-field .file-txt{font-size:14.5px;color:var(--ink-soft);line-height:1.4}
.file-field .file-txt strong{color:var(--ink);font-weight:600;display:block;font-size:15px}
.file-field .file-name{color:var(--accent-dk);font-weight:600}

.form-foot{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-foot .btn{padding:15px 30px}
.form-foot .privacy{font-size:13px;color:var(--ink-soft);line-height:1.5;flex:1;min-width:200px}

/* submit status message (aria-live) */
.form-status{margin-top:20px;border-radius:var(--r-sm);padding:0;font-size:15px;line-height:1.6}
.form-status:not(:empty){padding:15px 18px}
.form-status.ok{background:rgba(31,166,172,.12);color:var(--accent-dk);border:1px solid rgba(14,115,120,.3)}

/* prototype notice inside form */
.form-proto{margin-top:18px;font-size:13px;color:var(--ink-soft);text-align:center}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:920px){
  .role-layout{grid-template-columns:1fr;gap:36px}
  .role-aside{position:static;order:-1}
  .why-split{grid-template-columns:1fr;gap:34px}
  .why-media{max-width:460px;aspect-ratio:16/11}
  /* bento → statement becomes a full-width band; tiles a clean 2-col */
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:18px}
  .bento-statement{grid-column:1 / -1;grid-row:auto;padding:32px}
  .bento-statement .lede{max-width:60ch}
  .bene-wide{grid-column:auto;flex-direction:column;align-items:stretch}
  .bene-wide .ic{margin-bottom:18px}
  /* values → rail stacks above the spine */
  .values-layout{grid-template-columns:1fr;gap:34px}
  .values-rail{position:static}
  .values-rail .lede{max-width:60ch}
}
@media(max-width:640px){
  .car-section{padding:76px 0}
  .role-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr;gap:18px}
  .role-content ul{grid-template-columns:1fr}
  .role-hero{padding:150px 0 92px}
  /* drop the decorative spine + nodes; ghost numerals carry the rhythm */
  .values-spine::before,.vrow::before{display:none}
  .vrow{grid-template-columns:52px 1fr;column-gap:20px;padding:28px 0}
  .vrow__num{font-size:30px}
}

@media(prefers-reduced-motion:reduce){
  .role-card,.role-card:hover{transform:none}
  .role-card::before{transition:none}
  .bene,.bene:hover{transform:none}
  .bene::before{transition:none}
}