/* Canada Careers — public content pages: home, job detail, company, privacy/terms. Mobile first. Tokens only.
   Layout primitives (.container, .page-head, .section, .card, .kds-btn, .breadcrumb) come from theme.css — see
   docs/UX-STANDARDS.md. The /jobs search page has its own jobs-search.css; nothing in this file targets it.
   Map surfaces (.cc-map, .map-block, .locations__map-link, .co-map) are styled in maps.css. */

/* ---------- shared: job card + grids ---------- */
.jobs-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .jobs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jobs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .jobs-grid { grid-template-columns: repeat(4, 1fr); } }
.jobs-stack { display: grid; gap: 12px; }                       /* one column of cards beside a sidebar (company page) */
.section__head--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; max-width: none; margin-bottom: 32px; }
.section__head--split > div { min-width: 0; }
.section__head--split h2 { margin-bottom: 10px; }
.section__head--split .eyebrow { margin-bottom: 8px; }
.section__head--split .lead { margin-bottom: 4px; }
@media (min-width: 768px) { .section__head--split { margin-bottom: 40px; } }
.h3 { font-size: 1.15rem; }                                     /* an h2 inside a 340px sidebar card uses the h3 step of the scale */

/* Editorial job card: a tinted directory entry with a running index number, not a bordered box.
   Full rules live in theme.css (shared with portal/seeker dashboards); this file only adds what's
   specific to public-page grids: more-locations text, the reference co-brand, and the posting ID. */
.job-card__more { color: var(--kds-fg-muted); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.job-card:hover .job-card__more { color: color-mix(in srgb, #fff 70%, transparent); }
.job-card__company { overflow-wrap: anywhere; }
.job-card__co { color: var(--cc-ink); font-weight: 600; }
.job-card:hover .job-card__co { color: #fff; }
.job-card__ref { white-space: normal; text-align: left; line-height: 1.3; }
.job-card__pid { flex: none; white-space: nowrap; }
.job-card__pid span { font-family: var(--kds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-weight: 600; letter-spacing: .04em; color: var(--kds-fg-muted); }
.job-card:hover .job-card__pid span { color: color-mix(in srgb, #fff 60%, transparent); }

/* ---------- shared: facts list, tags ---------- */
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.facts { display: grid; gap: 10px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--kds-border); }
.facts > div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; font-size: .9rem; }
.facts dt { color: var(--kds-fg-muted); font-weight: 500; }
.facts dd { margin: 0; font-weight: 600; color: var(--cc-ink); overflow-wrap: anywhere; }
.facts__pid { font-family: var(--kds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .06em; font-size: 1rem; color: var(--cc-navy); }
.facts dd .badge { vertical-align: middle; margin-left: 4px; }
.facts--cols > div { grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .facts--cols { grid-template-columns: 1fr 1fr; gap: 12px 24px; } }
.tags { list-style: none; padding: 0; margin: 0; }
.tag { padding: 6px 12px; border-radius: 999px; background: var(--cc-navy-50); border: 1px solid var(--cc-navy-100); font-size: .875rem; font-weight: 500; }

/* ======================================================================
   HOME — Youth Futures Canada (2026-09-16 relaunch). Only views/public/home.ejs
   uses the classes below; everything else on this page reuses shared primitives
   (.job-card, .jobs-grid, .section, .card, .kds-btn) from theme.css.
   ====================================================================== */

/* ---------- hero: an ivory statement band — oversized navy type + a warm, colourful journey graphic.
   Deliberately NOT navy: a solid navy hero + red CTA was the single biggest remnant of the old visual
   system, repeated on nearly every page. Ivory + navy type + the journey graphic doing the colour work
   is the "calm structure, warm energy" split this brand asks for. ---------- */
.hero { position: relative; overflow: hidden; background: var(--cc-bg); padding: var(--sp-9) 0 0; color: var(--cc-ink); }
.hero__inner { position: relative; padding-bottom: var(--sp-8); }
.hero__copy { min-width: 0; max-width: 34rem; }
.hero .eyebrow { color: var(--cc-orange-700); }
.hero .eyebrow::before { background: var(--cc-orange); }
.hero__title { position: relative; z-index: 1; margin: 18px 0 22px; font-size: var(--yf-display-hero); line-height: .98; color: var(--cc-navy); }
.hero__title-accent { color: var(--cc-red-700); }
.hero__lead { position: relative; z-index: 1; margin: 0 0 28px; max-width: 52ch; font-size: 1.125rem; color: var(--kds-fg-muted); }
.hero__lead strong { color: var(--cc-navy); }
.hero__cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__cta .kds-btn { flex: 1 1 auto; }
.hero__cta .kds-btn--ghost { color: var(--cc-navy); border-color: var(--kds-border-strong); }
.hero__cta .kds-btn--ghost:hover { background: var(--cc-navy-50); color: var(--cc-navy); }
.hero__cta .kds-btn--accent { background: var(--cc-red-700); color: #fff; }
.hero__cta .kds-btn--accent:hover { background: var(--cc-red-900); color: #fff; }
@media (min-width: 640px) { .hero__cta .kds-btn { flex: 0 0 auto; } }

/* ---------- career journey visual: a deliberate route with 5 labelled stops, each with its own colour
   identity (same arc used by every stage component sitewide: orange -> yellow -> navy -> orange -> red)
   instead of one repeated grey-blue dot with a single orange finish line. Hidden on phone (mobile gets its
   own compact vertical route further down; the hero itself stays headline-first on small screens). ---------- */
/* mobile: a compact vertical route (no SVG land/curve — just numbered stops joined by a short line) */
.hero__journey { margin-top: var(--sp-6); }
.hero__journey-svg { display: none; }
.hero__journey-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hero__journey-stops li { display: flex; align-items: center; gap: 12px; position: relative; padding-left: 2px; }
.hero__journey-stops li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--node-size) / 2 - 1px); top: 100%; width: 2px; height: 12px; background: var(--cc-line-strong); }
.hero__stop-node { width: var(--node-size); height: var(--node-size); border-radius: 50%; background: var(--cc-navy); border: 2px solid var(--cc-bg); box-shadow: 0 0 0 1.5px var(--cc-line-strong); flex: none; }
.hero__journey-stops li:nth-child(1) .hero__stop-node { background: var(--cc-orange); }
.hero__journey-stops li:nth-child(2) .hero__stop-node { background: var(--cc-spark); }
.hero__journey-stops li:nth-child(4) .hero__stop-node { background: var(--cc-orange); }
.hero__journey-stops li.is-end .hero__stop-node { width: var(--node-active-size); height: var(--node-active-size); background: var(--cc-red); }
.hero__stop-label { display: flex; align-items: baseline; gap: 8px; font-size: .8125rem; color: var(--kds-fg-muted); }
.hero__stop-label strong { font: 700 .75rem/1 var(--kds-font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--cc-navy); }
.hero__journey-stops li.is-end .hero__stop-label strong { color: var(--cc-red-700); }
@media (min-width: 900px) {
  .hero__journey { margin-top: 0; position: relative; }
  .hero__journey-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  /* a soft warm tint, not a white glow — the silhouette reads as a faint shape on ivory instead of the
     glow-on-navy treatment this replaces. */
  .hero__journey-land { fill: color-mix(in srgb, var(--cc-orange) 7%, transparent); stroke: none; }
  .hero__journey-route { fill: none; stroke: var(--cc-line-strong); stroke-width: 2.3; stroke-dasharray: 1.4 9; stroke-linecap: round; }
  .hero__journey-stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
  .hero__journey-stops li { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 10px; transform: translate(-50%, -50%); }
  .hero__stop-node { width: var(--node-size); height: var(--node-size); border-radius: 50%; background: var(--cc-navy); border: 2px solid var(--cc-bg); box-shadow: 0 0 0 1.5px var(--cc-line-strong); flex: none; }
  .hero__journey-stops li:nth-child(1) .hero__stop-node { background: var(--cc-orange); }
  .hero__journey-stops li:nth-child(2) .hero__stop-node { background: var(--cc-spark); }
  .hero__journey-stops li:nth-child(4) .hero__stop-node { background: var(--cc-orange); }
  .hero__journey-stops li.is-end .hero__stop-node { width: var(--node-active-size); height: var(--node-active-size); background: var(--cc-red); box-shadow: 0 0 0 1.5px var(--cc-bg), 0 0 0 6px color-mix(in srgb, var(--cc-red) 30%, transparent), 0 0 0 11px color-mix(in srgb, var(--cc-red) 14%, transparent); }
  .hero__stop-label { display: grid; font-size: .6875rem; line-height: 1.3; color: var(--kds-fg-muted); white-space: nowrap; }
  .hero__stop-label strong { font: 700 .6875rem/1.3 var(--kds-font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--cc-navy); }
  .hero__journey-stops li.is-end .hero__stop-label strong { color: var(--cc-red-700); }
  @media (prefers-reduced-motion: no-preference) {
    .hero__journey-route { stroke-dashoffset: 1; animation: yf-route-draw 1.8s ease-out both; animation-delay: .2s; }
    .hero__journey-stops li { opacity: 0; animation: yf-stop-in .5s ease-out both; }
    .hero__journey-stops li:nth-child(1) { animation-delay: .3s; } .hero__journey-stops li:nth-child(2) { animation-delay: .5s; }
    .hero__journey-stops li:nth-child(3) { animation-delay: .7s; } .hero__journey-stops li:nth-child(4) { animation-delay: .9s; }
    .hero__journey-stops li:nth-child(5) { animation-delay: 1.1s; }
    .hero__journey-stops li.is-end .hero__stop-node { animation: yf-node-pulse 2.4s ease-in-out 2s infinite; }
  }
}
@keyframes yf-route-draw { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 1; } }
@keyframes yf-stop-in { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes yf-node-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc-red) 22%, transparent), 0 0 0 10px color-mix(in srgb, var(--cc-red) 9%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cc-red) 18%, transparent), 0 0 0 13px color-mix(in srgb, var(--cc-red) 6%, transparent); }
}

@media (min-width: 900px) {
  .hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--sp-8); }
  .hero__journey { aspect-ratio: 1 / 1; }
  .hero__copy { margin-top: -48px; }
}
@media (min-width: 1024px) {
  .hero { padding: 80px 0 0; }
  .hero__title { font-size: clamp(3rem, 3.4vw + 1.5rem, 4.75rem); max-width: 18ch; }
  .hero__inner { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
}

/* ---------- search band: a bright "next step" panel directly beneath the hero — white, not another dark
   strip, so the transition itself signals progress (dark journey → the bright next action). ---------- */
.search-band { background: #fff; padding: var(--sp-6) 0; border-bottom: 1px solid var(--kds-border); }
.search-band__eyebrow { margin: 0 0 6px; font: 700 .75rem/1 var(--kds-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-orange-700); }
.search-band #search-h { margin: 0 0 var(--sp-4); font-size: var(--yf-display-md); color: var(--cc-navy); }
.search-band__inner { display: grid; gap: 14px; }
.search-form { display: grid; gap: 10px; }
.search-form__field label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kds-fg-muted); }
.search-form__submit { width: 100%; min-height: 48px; }
.search-band__popular { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.search-band__popular a { text-decoration: none; font-weight: 600; color: var(--cc-navy); border-bottom: 1px solid var(--cc-line-strong); }
.search-band__popular a:hover { color: var(--cc-orange-700); border-color: var(--cc-orange); }
@media (min-width: 640px) {
  .search-form { grid-template-columns: 1fr 1fr; align-items: end; }
  .search-form__submit { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .search-band__inner { max-width: 900px; }
  .search-form { grid-template-columns: 1.4fr 1fr auto; align-items: end; }
  .search-form__submit { grid-column: auto; width: auto; min-width: 180px; }
}

/* ---------- featured opportunities: a horizontal, snap-scrolling strip of postings — deliberately not a
   stacked job-board list (that treatment lives on /jobs). Same job fields as _job-card.ejs, only the
   composition differs. See _featured-row.ejs. Each card is a fixed-width flex item; the running number and
   lead-entry emphasis both still read fine at card width, so _featured-row.ejs markup is untouched. */
/* a quiet right-edge fade + arrow glyph hints there's more to scroll without any JS/scroll-position tracking —
   it sits on a non-scrolling wrapper so it stays put at the edge while the cards underneath scroll past it. */
.feat-directory-wrap { position: relative; }
.feat-directory-wrap::after { content: "→"; position: absolute; top: 4px; right: 0; bottom: 20px; width: 52px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; background: linear-gradient(to right, transparent, #fff 55%); color: var(--cc-red-700); font: 800 1.25rem/1 var(--cc-font-display); pointer-events: none; }
@media (min-width: 1024px) { .feat-directory-wrap::after { display: none; } }
.feat-directory { margin: 8px -16px 0; padding: 4px 16px 20px; display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
@media (min-width: 768px) { .feat-directory { margin-inline: -24px; padding-inline: 24px; } }
/* a slightly darker-than-page surface (not flat white) so each card reads as its own block against the
   section's white background, instead of blending into it with only a thin border for definition. */
.feat-row { position: relative; flex: 0 0 auto; width: min(78vw, 320px); scroll-snap-align: start; display: grid; row-gap: 10px; padding: 24px 22px; background: var(--cc-surface); border: 1px solid var(--kds-border); border-radius: 6px; }
.feat-row__n { font: 800 .8125rem/1.4 var(--cc-font-display); color: var(--cc-line-strong); letter-spacing: .04em; }
.feat-row__main { min-width: 0; }
.feat-row__title { margin: 0 0 6px; font: 800 1.0625rem/1.3 var(--cc-font-display); letter-spacing: -0.01em; }
.feat-row__title a { color: var(--cc-navy); text-decoration: none; }
.feat-row__title a:hover { color: var(--cc-red-700); }
.feat-row__co { margin: 0 0 8px; color: var(--kds-fg-muted); font-size: .9375rem; }
.feat-row__co-name { color: var(--cc-ink); font-weight: 600; }
.feat-row__sep { color: var(--kds-fg-faint); }
.feat-row__more, .feat-row__dist { font-size: .8125rem; white-space: nowrap; }
.feat-row__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 600 .75rem/1 var(--kds-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--kds-fg-muted); }
.feat-row__closed { margin-top: 10px; }
.feat-row__side { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--kds-border); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.feat-row__salary { margin: 0; font: 800 1rem/1.2 var(--cc-font-display); color: var(--cc-navy); white-space: nowrap; }
.feat-row__foot { margin: 0; font-size: .75rem; color: var(--kds-fg-faint); }
.feat-row__pid { font-family: var(--kds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.feat-row--ref { box-shadow: inset 3px 0 0 var(--cc-teal); }
/* the lead entry: a red index and a filled navy background, so scanning the strip left-to-right starts on
   the one posting that's meant to anchor it — set apart by weight and colour, not a different card shape */
.feat-row--lead { background: var(--cc-navy); border-color: var(--cc-navy); }
.feat-row--lead .feat-row__n { color: var(--cc-spark); }
.feat-row--lead .feat-row__title a, .feat-row--lead .feat-row__co-name, .feat-row--lead .feat-row__salary { color: #fff; }
.feat-row--lead .feat-row__title a:hover { color: var(--cc-spark); }
.feat-row--lead .feat-row__co, .feat-row--lead .feat-row__meta, .feat-row--lead .feat-row__foot, .feat-row--lead .feat-row__sep, .feat-row--lead .feat-row__more, .feat-row--lead .feat-row__dist { color: color-mix(in srgb, #fff 70%, transparent); }
.feat-row--lead .feat-row__side { border-top-color: color-mix(in srgb, #fff 25%, transparent); }
@media (min-width: 640px) { .feat-row { width: 320px; } }
@media (min-width: 1024px) { .feat-directory { margin-inline: 0; padding-inline: 0; } }

/* ---------- career pathways ---------- */
.pathway-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.pathway-card { position: relative; display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--cc-ink); background: #fff; border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); padding: 24px 22px; overflow: hidden; transition: transform .18s var(--kds-ease-standard), box-shadow .18s var(--kds-ease-standard), border-color .18s; }
.pathway-card::before { content: ""; position: absolute; right: -18px; top: -18px; width: 90px; height: 90px; border-radius: 50%; background: var(--path-c, var(--cc-navy)); opacity: .08; }
.pathway-card:hover { transform: translateY(-4px); box-shadow: var(--kds-shadow-3); border-color: var(--path-c, var(--cc-navy)); color: var(--cc-ink); }
.pathway-card--a { --path-c: var(--cc-navy); } .pathway-card--b { --path-c: var(--cc-red); } .pathway-card--c { --path-c: var(--cc-teal); }
.pathway-card--d { --path-c: var(--cc-orange-700); } .pathway-card--e { --path-c: var(--cc-spark-700); }
.pathway-card__num { font: 800 1.5rem/1 var(--cc-font-display); color: var(--path-c, var(--cc-navy)); opacity: .55; }
.pathway-card h3 { margin: 0; }
.pathway-card p { margin: 0; color: var(--kds-fg-muted); font-size: .9375rem; }
.pathway-card__meta { display: inline-flex; align-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--path-c, var(--cc-navy)) 12%, #fff); color: var(--path-c, var(--cc-navy)); font-size: .75rem; font-weight: 700; }
.pathway-card__cta { font-size: .8125rem; font-weight: 600; color: var(--path-c, var(--cc-navy)); margin-top: 8px; }
@media (min-width: 768px) { .pathway-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .pathway-grid--5 { grid-template-columns: repeat(5, 1fr); } }

/* ---------- "Find your lane": an editorial career-exploration list + a career-compass graphic, not a
   card/pill catalogue. Asymmetric two-column at desktop (list ~55% / compass ~45%), stacked on mobile. ---------- */
/* grid-template-areas (not source order) controls the sequence, because mobile needs head → compass → list
   while desktop needs head+list stacked in one column beside the compass — two different orders from the
   same three siblings. */
.lane__grid { display: grid; gap: 40px; grid-template-areas: "head" "compass" "list"; }
.lane__head { grid-area: head; min-width: 0; }
.lane__compass { grid-area: compass; }
.lane__list-wrap { grid-area: list; min-width: 0; }
.lane-list { list-style: none; margin: 28px 0 20px; padding: 0; counter-reset: lane; border-top: 1px solid var(--kds-border); }
.lane-list li { counter-increment: lane; border-bottom: 1px solid var(--kds-border); }
.lane-list a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 18px 0 18px 40px; text-decoration: none; color: var(--cc-ink); }
.lane-list a::before { content: counter(lane, decimal-leading-zero); position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 800 .8125rem/1 var(--cc-font-display); color: var(--cc-line-strong); }
.lane-list__name { font: 700 1.0625rem/1.3 var(--cc-font-display); color: var(--cc-navy); transition: color .15s; }
.lane-list__meta { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--kds-fg-muted); white-space: nowrap; }
.lane-list__arrow { color: var(--cc-red-700); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .lane-list__arrow { display: inline-block; transition: transform .15s; }
}
.lane-list a:hover .lane-list__name, .lane-list a:focus-visible .lane-list__name { color: var(--cc-red-700); }
.lane-list a:hover .lane-list__arrow, .lane-list a:focus-visible .lane-list__arrow { transform: translateX(4px); }
.lane-more { display: inline-flex; font: 700 .9375rem/1 var(--cc-font-display); color: var(--cc-navy); text-decoration: none; border-bottom: 1px solid var(--cc-line-strong); padding-bottom: 2px; }
.lane-more:hover { color: var(--cc-red-700); border-color: var(--cc-red-700); }

/* career compass: one starting point, five broad career directions branching from it — an abstract editorial
   graphic, not a map. Labels are positioned in %, matching the SVG node coordinates 1:1 (see home.ejs). Visual
   support only — the detailed category list on the left stays the primary navigation (see .lane-list above),
   so the compass is deliberately smaller/quieter than the list, never the other way round. */
.compass { position: relative; margin-top: 24px; max-width: 340px; margin-inline: auto; }
.compass__svg { display: block; width: 100%; height: auto; overflow: visible; }
.compass__line { stroke: var(--cc-line-strong); stroke-width: 1.5; transition: stroke .15s, opacity .15s; }
.compass__hub-ring { fill: none; stroke: var(--cc-line-strong); stroke-width: 1; }
.compass__center { fill: var(--cc-navy); }
.compass__node { fill: #fff; stroke: var(--cc-navy); stroke-width: 2; transition: fill .15s, stroke .15s, r .15s, opacity .15s; }
.compass__node.is-active { fill: var(--cc-orange); stroke: var(--cc-orange); r: 9; }
.compass__labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
/* each label is pulled outward from its own node, away from the hub, so it reads as "this branch leads here"
   rather than sitting in the generic slot below the dot — see the per-path rules below. Offsets are kept modest
   (single-digit/low-teens px) because the compass box itself can be nearly viewport-width on small phones, so a
   wide outward pull on the healthcare/business (left/right) labels would run past the page edge. */
.compass__label { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, 14px); width: max-content; max-width: 86px; font: 700 .8125rem/1.2 var(--kds-font-sans); color: var(--kds-fg-muted); text-align: center; transition: color .15s, opacity .15s, transform .15s; }
.compass__label.is-active { color: var(--cc-orange-700); font-weight: 800; }
.compass__label[data-path="technology"] { transform: translate(-50%, calc(-100% - 14px)); }
.compass__label[data-path="healthcare"] { top: var(--y); transform: translate(calc(-100% - 14px), -50%); max-width: 64px; text-align: right; }
.compass__label[data-path="business"] { top: var(--y); transform: translate(14px, -50%); max-width: 64px; text-align: left; }
.compass__label[data-path="skilled_trades"] { transform: translate(-68%, 12px); max-width: 78px; text-align: right; }
.compass__label[data-path="services"] { transform: translate(-32%, 12px); max-width: 78px; text-align: left; }
.compass__label--center { top: 50%; left: 50%; transform: translate(-50%, 34px); max-width: 50px; font-size: .625rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .05em; color: var(--kds-fg-faint); }
/* hovering/focusing a detailed category on the left mutes the four unrelated branches, so the highlighted
   one reads clearly instead of just adding one more red dot among equals */
.compass.is-focused .compass__node:not(.is-active),
.compass.is-focused .compass__line,
.compass.is-focused .compass__label:not(.is-active):not(.compass__label--center) { opacity: .35; }
@media (min-width: 900px) {
  .lane__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-areas: "head compass" "list compass"; align-items: start; gap: 16px 64px; }
  .lane__compass { align-self: center; }
}

.how-h__links { margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--kds-border); }
.how-h__links a { color: var(--cc-navy); font-weight: 600; }
@media (min-width: 480px) { .destination__provinces { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .destination { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); align-items: start; gap: 48px; } }

/* ---------- opportunities for every stage: a connected journey, not identical boxes ---------- */
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: journey; }
.journey__step { position: relative; padding-left: 56px; }
.journey__step:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: -20px; width: 2px; background: var(--cc-line-strong); }
.journey__num { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--cc-navy); color: #fff; font: 800 .9375rem/1 var(--cc-font-display); }
.journey__step:nth-child(2) .journey__num { background: var(--cc-red-700); }
.journey__step:nth-child(3) .journey__num { background: var(--cc-teal); }
.journey__step:nth-child(4) .journey__num { background: var(--cc-orange); color: var(--cc-ink); }
.journey__step:nth-child(5) .journey__num { background: var(--cc-green); }
.journey__step:nth-child(6) .journey__num { background: var(--cc-spark); color: var(--cc-ink); }
.journey__step h3 { margin: 6px 0 4px; }
.journey__step p { margin: 0; color: var(--kds-fg-muted); max-width: 48ch; }
@media (min-width: 640px) { .journey { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; } }
@media (min-width: 1024px) { .journey { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) {
  .journey--6 { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .journey--6 .journey__step { padding-left: 0; padding-top: 56px; }
  .journey--6 .journey__num { left: 0; }
  .journey--6 .journey__step:not(:last-child)::after { left: 40px; right: -8px; top: 19px; bottom: auto; width: auto; height: 2px; }
}

/* ---------- get ready: lightweight resource links ---------- */
.resource-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.resource-card { display: block; padding: 20px; background: #fff; border: 1px solid var(--kds-border); border-radius: var(--kds-radius-md); text-decoration: none; color: var(--cc-ink); transition: border-color .15s, box-shadow .15s; }
.resource-card:hover { border-color: var(--cc-navy); box-shadow: var(--kds-shadow-2); color: var(--cc-ink); }
.resource-card h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.resource-card p { margin: 0; color: var(--kds-fg-muted); font-size: .9rem; }
@media (min-width: 640px) { .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .resource-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- full Job Bank CTA: category chips inside a bordered highlight panel ---------- */
.jobbank-cta__box { border: 1px solid var(--cc-navy-100); border-radius: var(--kds-radius-lg); background: linear-gradient(180deg, var(--cc-navy-50), #fff); padding: 28px; }
.jobbank-cta .section__head--split { align-items: start; margin-bottom: 20px; }
.jobbank-cta .kds-btn { flex: none; }
@media (min-width: 768px) { .jobbank-cta__box { padding: 36px 40px; } }

/* ---------- audiences: one lead destination (job seekers — free, largest) beside two smaller stops,
   each its own visual weight rather than three identical segments. ---------- */
.aud-panel { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.aud-panel__stop { padding: var(--sp-6) 0; border-top: 3px solid var(--cc-navy); }
.aud-panel__tag { display: block; font: 800 .75rem/1 var(--cc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-navy-muted, var(--kds-fg-muted)); margin-bottom: var(--sp-3); }
.aud-panel__price { margin: 0 0 var(--sp-3); font: 800 2rem/1 var(--cc-font-display); color: var(--cc-navy); }
.aud-panel__price span { margin-left: 6px; font: 500 .875rem/1 var(--kds-font-sans); color: var(--kds-fg-muted); text-transform: none; }
.aud-panel__desc { margin: 0 0 var(--sp-4); max-width: 46ch; color: var(--kds-fg-muted); }
.aud-panel__link { font-weight: 700; color: var(--cc-navy); text-decoration: none; }
.aud-panel__link:hover { color: var(--cc-red-700); }
.aud-panel__stop--lead { border-top-color: var(--cc-red-700); }
.aud-panel__stop--lead .aud-panel__tag { color: var(--cc-red-700); }
.aud-panel__stop--lead .aud-panel__price { font-size: var(--yf-display-md); }
@media (min-width: 900px) {
  .aud-panel { grid-template-columns: repeat(6, 1fr); align-items: start; }
  .aud-panel__stop--lead { grid-column: 1 / span 3; padding-right: var(--sp-6); }
  .aud-panel__stop:nth-child(2) { grid-column: 4 / span 3; }
  .aud-panel__stop:nth-child(3) { grid-column: 4 / span 3; margin-top: var(--sp-7); }
}

/* ---------- final CTA band ---------- */
/* the page's one deliberate navy beat, closing the ivory/warm rhythm above it, not another white section */
.final-cta { background: var(--cc-navy); background-image: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--cc-orange) 35%, transparent), transparent 55%); color: #fff; text-align: left; }
.final-cta .eyebrow { color: var(--cc-spark); }
.final-cta .eyebrow::before { background: var(--cc-spark); }
.final-cta h2 { color: #fff; max-width: 16ch; }
.final-cta .lead { color: color-mix(in srgb, #fff 78%, transparent); max-width: 48ch; }
.final-cta__inner { display: grid; gap: 20px; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.final-cta__actions .kds-btn { flex: 1 1 auto; }
.final-cta__actions .kds-btn--accent, .final-cta__actions .kds-btn--brand { background: #fff; color: var(--cc-navy); }
.final-cta__actions .kds-btn--accent:hover, .final-cta__actions .kds-btn--brand:hover { background: color-mix(in srgb, #fff 85%, transparent); color: var(--cc-navy); }
.final-cta__actions .kds-btn--ghost { color: #fff; border-color: color-mix(in srgb, #fff 40%, transparent); }
.final-cta__actions .kds-btn--ghost:hover { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; }
.final-cta__employer { margin: 28px auto 0; color: color-mix(in srgb, #fff 70%, transparent); }
.final-cta__employer a { color: #fff; }
@media (min-width: 640px) { .final-cta__actions .kds-btn { flex: 0 0 auto; } }
@media (min-width: 1024px) { .final-cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; } }

/* ==================== job detail: "Opportunity Profile" — a career brief, not a job-board listing ==================== */

/* 1. header (navy) — a journey milestone: a small sitewide-journey route, then "Your next move" frames the
   title, then title dominant, salary + every "at a glance" fact on one divided bar, Apply is a header action.
   There is no separate "At a glance" strip any more — every fact it used to repeat (salary, type, arrangement,
   hours, experience, education) lives once, here, in .op-hero__conditions. */
/* ivory hero, matching the homepage/job-bank shift away from navy-hero-by-default; the opportunity story
   itself (THE WORK / THE FIT / THE VALUE below) carries the editorial navy+warm treatment instead. */
.op-hero { background: var(--cc-bg); color: var(--cc-ink); padding-block: 48px 40px; border-bottom: 1px solid var(--kds-border); }
.op-hero .breadcrumb, .op-hero .breadcrumb a { color: var(--kds-fg-muted); }
.op-hero .breadcrumb a:hover { color: var(--cc-navy); }
.op-hero__route { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font: 700 .75rem/1 var(--kds-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--kds-fg-faint); }
.op-hero__route li:not(:last-child)::after { content: "→"; margin-left: 8px; color: var(--cc-line-strong); }
.op-hero__route .is-active { color: var(--cc-orange-700); }
.op-hero__kicker { margin: 26px 0 8px; display: inline-flex; align-items: center; gap: 8px; font: 800 .75rem/1 var(--cc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-orange-700); }
.op-hero__kicker::before { content: ""; display: block; width: 20px; height: 3px; background: var(--cc-orange); flex: none; }
.op-hero__title { color: var(--cc-navy); margin: 0 0 10px; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); }
.op-hero__company { font-size: 1.0625rem; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--kds-fg-muted); }
.op-hero__company a { font-weight: 700; color: var(--cc-navy); }
.op-hero__legal { margin: 0 0 12px; color: var(--kds-fg-muted); }
.job-head__dot { color: var(--kds-fg-faint); }
.job-head__more { color: var(--kds-fg-muted); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.job-head__badges { margin: 12px 0 0; }
.badge--ref { white-space: normal; text-align: left; line-height: 1.35; display: inline-block; max-width: 100%; }
.op-hero__bar { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--kds-border); display: grid; gap: 18px; }
.op-hero__facts { min-width: 0; }
.op-hero__salary { margin: 0 0 8px; font: 800 clamp(1.375rem, 1vw + 1.15rem, 1.75rem)/1 var(--cc-font-display); color: var(--cc-navy); }
.op-hero__conditions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 .875rem/1.3 var(--kds-font-sans); color: var(--kds-fg-muted); text-transform: uppercase; letter-spacing: .02em; }
.op-hero__conditions li:not(:last-child) { padding-right: 16px; border-right: 1px solid var(--kds-border-strong); }
.op-hero__action .apply-card__primary { width: 100%; }
.apply-card__closed { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--cc-navy-50); color: var(--cc-navy); }
.apply-card__closed strong { font-family: var(--cc-font-display); font-size: 1.0625rem; }
.apply-card__closed .small { color: var(--kds-fg-muted); }
.op-hero__secondary { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.op-hero__link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; border: 0; background: none; padding: 0; font: 600 .8125rem/1 var(--kds-font-sans); color: var(--kds-fg-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.op-hero__link:hover { color: var(--cc-navy); }
.op-hero__link--btn { text-decoration: none; }
.apply-card__save { margin: 0; display: contents; }
.applybar__closed { flex: none; font-size: .875rem; padding: 8px 14px; }
@media (min-width: 700px) {
  .op-hero__bar { grid-template-columns: 1fr auto; align-items: end; }
  .op-hero__action .apply-card__primary { width: auto; min-width: 220px; }
}

.op-closed-wrap { background: #fff; padding-top: 32px; }
.closed-notice { border-left: 4px solid var(--cc-red); background: var(--cc-red-100); border-color: var(--cc-red-100); display: grid; gap: 6px; }
.closed-notice .eyebrow { margin-bottom: 0; }
.closed-notice p { margin: 0; }
.closed-notice__meta { font-size: .9375rem; }

/* 2. "Where this opportunity takes you" (op-location--signature) — this page's signature section: a distinct
   navy-tinted band (every other section here is white or plain --cc-surface), a red top rule echoing the
   op-brief numbering's accent, and a bigger, more prominent map than the old plain widget. A live location-count
   stat sits directly on the map (top-right, clear of Leaflet's own top-left zoom control) — the same "a real
   number lives on the map" language as the Job Bank discovery map (public/css/jobs-search.css .jsearch__map-stat)
   so the two pages read as one product, not the map bolted on as an afterthought here. */
.op-location { padding-block: 48px; }
.op-location--signature { background: var(--cc-navy-50); border-top: 3px solid var(--cc-navy); border-bottom: 1px solid var(--cc-line); }
.op-location__grid { display: grid; gap: 28px; }
.op-location__title { font: 800 clamp(1.25rem, .6vw + 1.1rem, 1.75rem)/1.25 var(--cc-font-display); color: var(--cc-navy); margin: 6px 0 20px; max-width: 32ch; }
/* the two facts this section exists to make unmistakable: the map shows where the EMPLOYER is based, and a
   remote role's work arrangement is called out with equal weight — so the map never implies the candidate must
   physically work at the pin. */
.op-location__facts { margin: 4px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.op-location__facts dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--kds-fg-muted); font-weight: 600; margin-bottom: 4px; }
.op-location__facts dd { margin: 0; font: 800 1.1875rem/1.25 var(--cc-font-display); color: var(--cc-navy); }
.op-location__facts div:nth-child(2) dd { color: var(--cc-red-700); }
.locations { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--kds-border); }
.locations__item { display: flex; gap: 6px 12px; align-items: center; min-width: 0; padding: 12px 0; border-top: 1px solid var(--kds-border); }
.locations__item:first-child { border-top: 0; padding-top: 0; }
.locations__item svg { flex: none; color: var(--cc-red-700); }
.locations__addr { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.locations__note { margin: 8px 0 0; }
.op-location__map { position: relative; border-radius: var(--kds-radius-md, 8px); overflow: hidden; }
.op-location__map .cc-map { border-radius: 0; height: 400px; }
.op-location__map .map-block__note { margin: 10px 0 0; padding: 0; background: none; }
.op-location__stat { position: absolute; z-index: 5; top: 16px; right: 16px; margin: 0; padding: 8px 14px; background: color-mix(in srgb, #fff 88%, transparent); display: flex; align-items: baseline; gap: 8px; }
.op-location__stat strong { font: 800 1.5rem/1 var(--cc-font-display); color: var(--cc-navy); }
.op-location__stat span { font: 600 .75rem/1.2 var(--kds-font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--kds-fg-muted); max-width: 8ch; }
@media (min-width: 900px) {
  .op-location__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: start; }
  .op-location__map .cc-map { height: 100%; min-height: 520px; }
}

/* 4. the journey to a decision — the work / the fit / the value, connected by a path (circular journey nodes +
   a line), not a plain numbered list or three identical cards. Same "explicit calc() height, not top+bottom"
   connector technique used elsewhere on this site (e.g. .workflow-chain--vertical), so the line always reaches
   the next node exactly regardless of how tall a row's own content runs. */
.op-brief { background: #fff; padding-block: 48px; }
.op-brief__list { display: grid; gap: 0; }
.op-brief__row { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 20px; padding-bottom: 36px; }
.op-brief__row:last-child { padding-bottom: 0; }
.op-brief__row:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; width: 2px; height: calc(100% - 40px + 36px); background: var(--cc-line-strong); }
.op-brief__marker { position: relative; z-index: 1; }
.op-brief__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cc-navy); color: #fff; font: 800 1.0625rem/1 var(--cc-font-display); }
.op-brief__row:first-child .op-brief__num { background: var(--cc-orange); color: var(--cc-ink); }
.op-brief__row:last-child:not(:first-child) .op-brief__num { background: var(--cc-red-700); }
.op-brief__tag { margin: 2px 0 4px; font: 800 .75rem/1 var(--cc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-navy); }
.op-brief__row:first-child .op-brief__tag { color: var(--cc-orange-700); }
.op-brief__row:last-child:not(:first-child) .op-brief__tag { color: var(--cc-red-700); }
.op-brief__body h2 { margin: 0 0 12px; }
@media (min-width: 768px) {
  .op-brief__row { grid-template-columns: 56px 1fr; column-gap: 32px; padding-bottom: 44px; }
  .op-brief__row:not(:last-child)::after { left: 27px; top: 56px; height: calc(100% - 56px + 44px); }
  .op-brief__num { width: 56px; height: 56px; font-size: 1.375rem; }
}

/* 5. skills (light neutral) — a field of statements, not tiny generic pills */
.op-skills { background: var(--cc-surface); padding-block: 36px; }
.op-skills__lead { margin: 6px 0 0; }
.op-skills__grid { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.op-skills__item { display: flex; align-items: center; gap: 8px; font: 700 .875rem/1.3 var(--kds-font-sans); letter-spacing: .02em; color: var(--cc-navy); }
.op-skills__item::before { content: ""; display: block; width: 14px; height: 2px; background: var(--cc-spark); flex: none; }

/* 6. who you'll work with (white) — a horizontal profile, not a grey company card. Smaller heading scale than
   the job title / THE WORK-FIT-VALUE h2s, so it stays supporting context rather than competing. */
.op-employer { background: #fff; padding-block: 40px; }
.op-employer__grid { display: grid; gap: 16px; }
.op-employer__grid h2 { font: 800 clamp(1.25rem, .6vw + 1.1rem, 1.625rem)/1.2 var(--cc-font-display); color: var(--cc-navy); margin: 4px 0 0; }
.op-employer__facts { margin: 12px 0; }
@media (min-width: 900px) { .op-employer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; } }

/* 7. posting details — deliberately quiet metadata: smaller type, tighter rhythm, muted colour throughout, so
   it reads as a reference footer rather than a section competing with the title/story/location/apply moment.
   A hairline on top separates it from the (also white) employer section above. */
.op-details--quiet { padding-block: 28px; border-top: 1px solid var(--kds-border); }
.op-details--quiet .eyebrow { color: var(--kds-fg-faint); }
.op-details--quiet .eyebrow::before { background: var(--kds-fg-faint); }
.op-details__grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.op-details__grid dt { font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; color: var(--kds-fg-faint); font-weight: 600; }
.op-details__grid dd { margin: 2px 0 0; font-size: .875rem; font-weight: 600; color: var(--kds-fg-muted); }
.share { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--kds-border); }
.share__btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--kds-border); background: #fff; color: var(--kds-fg-muted); cursor: pointer; text-decoration: none; }
.share__btn:hover { border-color: var(--cc-navy); color: var(--cc-navy); }
.share__status { color: var(--kds-positive); font-weight: 600; }
@media (min-width: 640px) { .op-details__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .op-details__grid { grid-template-columns: repeat(4, 1fr); } }

/* 8. the final apply moment — a strong, restrained close, echoing .op-hero's navy so the page feels bookended */
.op-final { background: var(--cc-navy); padding-block: 56px; text-align: center; }
.op-final__inner { display: grid; justify-items: center; gap: 20px; }
.op-final__kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 800 .75rem/1 var(--cc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-spark, #ffb648); }
.op-final__kicker::before { content: ""; display: block; width: 20px; height: 3px; background: var(--cc-spark, #ffb648); flex: none; }
.op-final h2 { margin: 0; color: #fff; max-width: 16ch; }
.op-final__closed { color: color-mix(in srgb, #fff 80%, transparent); }
.op-final__closed a { color: #fff; }
.op-final .kds-btn--accent { background: #fff; color: var(--cc-navy); }
.op-final .kds-btn--accent:hover { background: color-mix(in srgb, #fff 85%, transparent); color: var(--cc-navy); }
/* company page's shorter/compact variant of the same close — a company-specific line instead of the job
   page's kicker, and less block padding so it reads as a brief, editorial close rather than a full section. */
.op-final--compact { padding-block: 40px; }
.op-final__lead { margin: -8px 0 0; max-width: 46ch; color: color-mix(in srgb, #fff 82%, transparent); }

.related__block + .related__block { margin-top: 40px; }

/* sticky apply bar — mobile AND desktop, so Apply stays reachable throughout the page */
.applybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 450; background: #fff; border-top: 1px solid var(--kds-border); box-shadow: 0 -6px 24px rgba(22, 28, 38, .08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.applybar__inner { display: flex; align-items: center; gap: 10px; max-width: var(--cc-container); margin: 0 auto; }
.applybar__text { display: grid; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.applybar__text strong { font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.applybar__save { width: 44px; padding: 0; flex: none; }
.applybar__apply { flex: none; padding-left: 20px; padding-right: 20px; }
body.has-applybar { padding-bottom: 84px; }
@media (min-width: 1024px) { .applybar__inner { padding-inline: var(--cc-page-padding); } }

/* ---------- company (page-head + one prose-width column: about card, locations card, open jobs) ---------- */
.co-head__row { display: grid; gap: 12px; margin-bottom: 8px; }              /* logo above the h1 so the h1 keeps the container's left edge */
.co-head__text { min-width: 0; }
.co-head__text h1 { margin-bottom: 2px; }
.co-logo { display: block; flex: none; width: 64px; height: 64px; border-radius: var(--kds-radius-lg); margin: 0; }
.co-logo--mark { display: grid; place-items: center; background: var(--cc-navy); color: #fff; font: 800 1.75rem/1 var(--cc-font-display); }
.co-logo--img { object-fit: contain; background: #fff; border: 1px solid var(--kds-border); padding: 4px; }
.co-head__legal { margin: 0; }
.co-head__meta { overflow-wrap: anywhere; }
/* "Meet the employer → where you could work → your opportunities here": open editorial sections (no bordered
   card around any of them), separated by generous whitespace + a thin rule, echoing the job detail page's
   chapter rhythm (.op-brief) rather than a stacked-cards company profile. */
.co-stack { display: grid; gap: 48px; }
.co-meet { display: grid; gap: 16px; max-width: 900px; }
.co-meet__facts { max-width: 640px; padding-top: 20px; border-top: 1px solid var(--kds-border); }
.co-where { display: grid; gap: 4px; padding-top: 40px; border-top: 1px solid var(--kds-border); }
.co-where h2 { margin: 0; }
.co-where__grid { display: grid; gap: 24px; margin-top: 20px; }
.co-where__map { height: 320px; }
/* numbered destinations beside the map — thin hairline separators, no card, no shadow */
.co-loc-list { list-style: none; counter-reset: coloc; margin: 0; padding: 0; }
.co-loc-list li { counter-increment: coloc; position: relative; padding: 16px 0 16px 40px; border-top: 1px solid var(--kds-border); }
.co-loc-list li:first-child { border-top: 0; padding-top: 0; }
.co-loc-list li::before { content: counter(coloc, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 800 .8125rem/1 var(--cc-font-display); color: var(--cc-red-700); }
.co-loc-list li:first-child::before { top: 0; }
.co-loc-list__addr { margin: 0 0 6px; font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; }
.co-locations__label { font-weight: 700; color: var(--cc-navy); margin-right: 6px; }
.co-loc-list__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .875rem; color: var(--cc-red-700); text-decoration: none; }
.co-loc-list__link:hover { color: var(--cc-navy); }
.co-jobs { padding-top: 40px; border-top: 1px solid var(--kds-border); }
.co-jobs .section__head { margin-bottom: 16px; }
.co-jobs .section__head h2 strong { color: var(--cc-red-700); }
.co-jobs .empty { display: grid; gap: 8px; justify-items: center; }
@media (min-width: 900px) {
  .co-where__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 40px; }
  .co-where__map { height: 440px; }
}
/* the page's own navy CTA is its last section, immediately before the (also navy) shared footer — the
   sitewide .site-footer margin-top otherwise shows as a stray white seam between the two. Scoped to this page
   only; the footer's own design/spacing on every other page is untouched. */
body.page-company .site-footer { margin-top: 0; }

/* ---------- print (the printable sheet itself is /css/print.css, media="print") ---------- */
.print-only { display: none !important; }
@media print { .applybar, .share, .apply-card__save, .related { display: none !important; } body.has-applybar { padding-bottom: 0; } }