/* Careers · page-scoped extensions of the shared components (css/site.css, css/pages.css). Tokens only, sharp corners, every
   selector under .page-careers. Markup and the reasons for each section: site/careers.html and docs/pages/careers.md.
   Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5 "careers.html", G7): hero F-flip (the .vhero family's base rules from §2 plus
   the editorial split), the featured opportunities on the crest navy four across, a crest rule between the two white
   sections after the hero, the new closing picture. Rhythm: hero (navy) · why (white) · areas (white) · featured (navy) ·
   culture (white) · closing band (navy) · form (white); never two navy in a row, clean edges.
   Motion: one scrub stage, the hero's drift (js/pages/careers.js); everything rests in place under reduced motion.
   Decisions: lab/revamp/careers-notes.md. */

/* ═════════════ HERO · the .vhero family's base (REVAMP-PLAN.md §2), scoped to this page ═════════════ */
.page-careers .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--deep); color: var(--text-1); }
.page-careers .vhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .page-careers .vhero__img { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-careers .vhero__head, .page-careers .vhero__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.page-careers .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-careers .vhero__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.page-careers .vhero__title { max-width: 18ch; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-careers .vhero__title { font-weight: 400; } }
.page-careers .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-careers .vhero__action { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }
/* the arrival: the picture settles, the words rise in turn (the family's delays) */
.page-careers .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-careers .vhero__crest, .page-careers .vhero__label, .page-careers .vhero__title, .page-careers .vhero__lede, .page-careers .vhero__action { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-careers .vhero__crest { animation-delay: 60ms; } .page-careers .vhero__label { animation-delay: 160ms; } .page-careers .vhero__title { animation-delay: 280ms; }
.page-careers .vhero__lede { animation-delay: 460ms; } .page-careers .vhero__action { animation-delay: 600ms; }
@keyframes vhero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes vhero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ───────────── F · the editorial split: the crest-navy panel with the words, the photograph to the screen edge ───────────── */
/* the hero starts under the solid bar on the same crest navy, so the bar and the panel read as one ground; the photograph
   frame starts below the bar. Phones and tablets: the photograph on top (52svh), the panel under it */
.page-careers .vhero--f { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: var(--nav-h); background-color: var(--brand); }
.page-careers .vhero__frame { position: relative; height: max(18rem, 52svh); overflow: hidden; background-color: var(--deep);
  animation: vhero-open-up 1400ms var(--ease-hero) 100ms both; }
/* the picture layer is a little taller than its frame, so it can drift inside it with the scroll without showing an edge */
.page-careers .vhero__media { position: absolute; inset: -9% 0; overflow: hidden; background-color: var(--deep); will-change: transform; }
.page-careers .vhero--f .vhero__inner { display: grid; align-content: start; gap: var(--space-head);
  padding: clamp(2.5rem, 2rem + 3vw, 4rem) var(--margin) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
/* the hand and the model at every crop: 7:8 on phones and desktops, 3:2 on tablets */
.page-careers .vhero__img { --focus: 42% 50%; }
@media (min-width: 768px) and (max-width: 991px) { .page-careers .vhero__frame { height: max(22rem, 56svh); } .page-careers .vhero__img { --focus: 40% 50%; } }
@media (min-width: 992px) {
  .page-careers .vhero--f { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: max(40rem, 100svh); }
  .page-careers .vhero--flip .vhero__frame { grid-column: 1; grid-row: 1; height: auto; animation-name: vhero-open-left; }
  .page-careers .vhero--flip .vhero__inner { grid-column: 2; grid-row: 1; align-content: center;
    padding: clamp(3rem, 2rem + 3vw, 6rem) var(--edge) clamp(3rem, 2rem + 3vw, 6rem) clamp(2.5rem, 0.5rem + 4vw, 6.5rem); }
  .page-careers .vhero--f .vhero__aside { margin-top: calc(var(--space-action) - var(--space-head)); }
}
/* the photograph opens from the panel's edge: from the left edge of the panel (desktops), from the top of the panel below
   it (phones and tablets) */
@keyframes vhero-open-left { from { clip-path: inset(0 0 0 58%); } to { clip-path: inset(0 0 0 0); } }
@keyframes vhero-open-up { from { clip-path: inset(46% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .page-careers .vhero__frame, .page-careers .vhero__img, .page-careers .vhero__crest, .page-careers .vhero__label, .page-careers .vhero__title, .page-careers .vhero__lede, .page-careers .vhero__action { animation: none; }
  .page-careers .vhero__media { will-change: auto; }
}

/* ═════════════ RHYTHM · white and crest navy alternate with clean edges (REVAMP-PLAN.md §3.2) ═════════════ */
/* the padding fix until the shared rule exists (§8.2): pages.css collapses the top of a section that follows another */
.page-careers .section[data-tone="dark"], .page-careers .section + .section[data-tone="dark"], .page-careers .section[data-tone="dark"] + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }

/* 2 · why Confidante, then the crest rule between the two white sections: the same air above and below it, as between
   the homepage's about and core offerings */
.page-careers main .cr-why[data-section] { padding-bottom: var(--space-open); }
.page-careers .cr-areas__rule { margin-bottom: var(--space-open); }

/* 3 · areas of opportunity: from 1200px the heading and its paragraph hold the left four columns while the ten areas run
   in two columns over the right seven (the brief's "two- or three-column icon grid", open for additions); below that the
   heading sits above the list, which keeps its two columns from 640px. Label-only rows need less air under them than rows
   with a line of text */
@media (min-width: 1200px) {
  .page-careers .cr-areas__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .page-careers .cr-areas__grid > .section-head { grid-column: 1 / span 4; margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
  .page-careers .cr-areas__list { grid-column: 6 / -1; }
}
.page-careers .cr-areas__list .index__item { align-items: center; padding-block: 1.35rem 1.6rem; }
.page-careers .cr-areas__list .index__icon { grid-row: auto; }
.page-careers .cr-areas__list { border-bottom: 1px solid var(--line-2); }

/* ═════════════ 4 · FEATURED OPPORTUNITIES · on the crest navy, four across ═════════════ */
.page-careers .cr-featured__head .section-head__text { max-width: 56ch; color: var(--text-2); }
/* the cards in the homepage core card's grammar, on navy: a hairline edge on the night navy, the title, the location where
   the brief gives one, the action along a hairline at the foot; the whole card opens the action */
.page-careers .cr-card { position: relative; gap: 0.85rem; min-height: 0; transition: border-color var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
@media (min-width: 768px) { .page-careers .cr-card, .page-careers .cr-invite { min-height: 15rem; } }
.page-careers .cr-card .notice__title { max-width: 14ch; }
.page-careers .cr-card .notice__meta { margin-top: 0; padding-top: 0; border-top: 0; }
.page-careers .cr-card .notice__meta div { justify-content: flex-start; gap: 0.75rem; }
.page-careers .cr-card .notice__meta dd { text-align: left; color: var(--text-2); }
.page-careers .cr-card .notice__action, .page-careers .cr-invite .notice__action { align-self: stretch; max-width: none; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.page-careers .cr-card .notice__action::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.page-careers .cr-card .notice__action:focus-visible { outline: none; }
.page-careers .cr-card:has(.notice__action:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .page-careers .cr-card:hover { border-color: var(--line-2); }
  .page-careers .cr-card:hover .notice__action::after { transform: scaleX(1); }
  /* Osmo "Hover Siblings (:has :not)": the other cards step back while one is under the pointer */
  .page-careers .cr-featured__list:has(.cr-card:hover) > .cr-card:not(:hover) { opacity: 0.6; }
}
/* touch screens (mobile pass 2026-10-15): the card crossing the middle of the screen takes the hover state
   (js/pages/careers.js initCareersCards); the invitation card's hairline answers too */
@media (hover: none), (pointer: coarse) {
  .page-careers .cr-card.is-near { border-color: var(--line-2); }
  .page-careers .cr-featured__list > .is-near .notice__action::after { transform: scaleX(1); }
}
/* the eighth card is Confidante's own note inviting introductions: no plate, a firmer hairline, under the gold crest, so it
   reads as the invitation and not as one more role */
.page-careers .cr-invite { gap: 0.85rem; border-color: var(--line-2); background-color: transparent; }
.page-careers .cr-invite__crest { flex: none; width: 1.75rem; height: calc(1.75rem * 1210 / 1092); color: var(--gold); }
.page-careers .cr-invite__text { max-width: 34ch; font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.55; color: var(--text-1); text-wrap: pretty; }
@media (max-width: 1199px) { .page-careers .cr-invite__text { font-size: var(--fs-lede); line-height: 1.45; } }

/* 5 · our culture: on tablets the stacked photograph turns landscape, so it does not fill more than a screen; the crop
   keeps the three faces and the papers between them (as on Global Partners) */
@media (min-width: 640px) and (max-width: 991px) {
  .page-careers .cr-culture .split__media { aspect-ratio: 3 / 2; }
  .page-careers .cr-culture .split__media img { object-position: 50% 40%; }
}

/* 6 · the form answers the band's action, so it follows it closely */
.page-careers .cta-band + .cr-form { padding-top: var(--space-open); }
/* the email address is one long word at the lede size: under 360px it takes the body size (it would widen the column past
   the screen at 320), and it may break rather than overflow */
.page-careers .cr-form .form-block__grid > * { min-width: 0; }
.page-careers .cr-form .form-block__facts dd { overflow-wrap: anywhere; }
@media (max-width: 359px) { .page-careers .cr-form .form-block__facts dd { font-size: var(--fs-body); } }
/* the talent network's privacy line is longer than the shared one: where the card has room it stays beside the button in
   two short lines (as on every other form) instead of dropping under it; on phones it still wraps below */
.page-careers .cr-form .form__privacy { flex: 1 1 12rem; max-width: 24rem; }
/* the area of interest groups its options (featured opportunities, areas of opportunity); keep the group labels on the
   field's own plane where the browser draws the list itself */
.page-careers .cr-form optgroup { background-color: var(--field-bg); color: var(--text-3); font-style: normal; }