/* ── Careers page — hero, listings, video, values, lead ── */

/* ── CAREERS PAGE HERO (standalone) ── */
.careers-hero {
  position: relative;
  /* svh = visible-only viewport height. vh would include the area
     behind iOS Safari's URL bar / iPad's bottom toolbar, which
     pushed the offices line off-screen on iPad. vh fallback for
     older browsers. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.careers-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}

/* Three-layer scrim: bottom-up darkness, left anchor, edge vignette */
.careers-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.careers-hero-scrim--bottom {
  background: linear-gradient(
    to top,
    rgba(9, 21, 26, 0.97) 0%,
    rgba(9, 21, 26, 0.82) 22%,
    rgba(9, 21, 26, 0.45) 48%,
    rgba(9, 21, 26, 0.12) 72%,
    transparent 100%
  );
}
.careers-hero-scrim--left {
  background: linear-gradient(
    to right,
    rgba(9, 21, 26, 0.6) 0%,
    rgba(9, 21, 26, 0.22) 45%,
    transparent 72%
  );
}
.careers-hero-scrim--vignette {
  background: radial-gradient(
    ellipse 130% 110% at 50% 50%,
    transparent 38%,
    rgba(9, 21, 26, 0.5) 100%
  );
}

.careers-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Paddings clamp with viewport width so they shrink on iPad-class
     widths (where viewport height is also tighter — especially in
     landscape at 1024px). At full desktop (≥1440px) they reach the
     original 140 / 120 values for the spacious feel.
     Horizontal padding uses max() with env() so the headline + CTAs
     clear the iPhone Dynamic Island in landscape; env() is 0 on
     devices without a notch. */
  padding-top: clamp(96px, 10vw, 140px);
  padding-bottom: clamp(48px, 6vw, 120px);
  padding-left: max(var(--edge-pad), env(safe-area-inset-left));
  padding-right: max(var(--edge-pad), env(safe-area-inset-right));
}
.careers-hero-content {
  max-width: 1100px;
}

/* Eyebrow */
.careers-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  opacity: 0;
  transform: translateY(14px);
  animation: chFadeUp 0.8s ease forwards 0.15s;
  will-change: transform, opacity;
}
.careers-hero-eyebrow-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  opacity: 0.7;
}

/* Headline */
.careers-hero-headline {
  font-size: clamp(44px, 6.8vw, 104px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 0 clamp(28px, 3.5vw, 48px) 0;
  text-wrap: balance;
  text-shadow:
    0 2px 48px rgba(0, 0, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(20px);
  animation: chFadeUp 1s ease forwards 0.35s;
  will-change: transform, opacity;
}
/* Lead */
.careers-hero-lead {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 0 clamp(40px, 5vw, 60px) 0;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(14px);
  animation: chFadeUp 0.8s ease forwards 0.55s;
  will-change: transform, opacity;
}

/* CTAs */
.careers-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 4.5vw, 56px);
  opacity: 0;
  transform: translateY(12px);
  animation: chFadeUp 0.8s ease forwards 0.7s;
  will-change: transform, opacity;
}
.careers-hero-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: #0d1e26;
  padding: 14px 32px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(183, 150, 93, 0.28);
}
.careers-hero-btn-primary:hover {
  background: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(183, 150, 93, 0.38);
}
.careers-hero-btn-primary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.careers-hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  padding: 14px 32px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: -0.01em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.careers-hero-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}
.careers-hero-btn-secondary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

/* Office locations */
.careers-hero-offices {
  font-size: clamp(11px, 0.85vw, 12px);
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  animation: chFadeUp 0.8s ease forwards 0.85s;
  will-change: transform, opacity;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .careers-hero-bg { animation-play-state: paused; }
  .careers-hero-eyebrow,
  .careers-hero-headline,
  .careers-hero-lead,
  .careers-hero-actions,
  .careers-hero-offices,
  .hero h1,
  .hero-sub,
  .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Mirror homepage hero button behavior (base.css + index.css):
   900px — buttons cap at 320px, centered text
   600px — hero-actions stacks to column and centers
   480px — hero-actions goes width: 100% (cap on buttons persists) */
@media (max-width: 900px) {
  .careers-hero-btn-primary,
  .careers-hero-btn-secondary {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 768px), (max-height: 500px) {
  /* Repack the careers hero so eyebrow + headline + lead + CTAs +
     offices all fit a single phone viewport. Switch to 100svh so
     iOS Safari's URL bar doesn't push the offices line off-screen,
     and trim the desktop's 140px top padding now that the mobile
     navbar is half-height (base.css). The (max-height: 500px)
     clause catches iPhone landscape (852×393) which is too wide
     for the 768px rule but too short for desktop padding. */
  .careers-hero {
    min-height: 100svh;
  }
  .careers-hero-inner {
    padding: 80px var(--edge-pad) 32px;
  }
  .careers-hero-eyebrow {
    margin-bottom: 18px;
  }
  .careers-hero-headline {
    font-size: clamp(32px, 8vw, 48px);
    margin-bottom: 18px;
  }
  .careers-hero-lead {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 24px;
  }
  .careers-hero-actions {
    margin-bottom: 20px;
    gap: 12px;
  }
  .careers-hero-btn-primary,
  .careers-hero-btn-secondary {
    padding: 12px 28px;
  }
}
@media (max-width: 600px) {
  .careers-hero-actions {
    flex-direction: column;
    align-items: center;
  }
  /* Center the office locations under the stacked CTA buttons. */
  .careers-hero-offices {
    text-align: center;
  }
}
@media (max-width: 480px) {
  .careers-hero-actions {
    width: 100%;
  }
}

.careers-listings {
  background: var(--cream);
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px) 0;
}
.careers-listings-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.careers-job-total {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 400;
  color: var(--charcoal);
  letter-spacing: -1px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

/* ── Filter bar ── */
.careers-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: clamp(48px, 5vw, 64px);
}
.careers-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(16, 32, 39, 0.03);
  border: 1px solid rgba(16, 32, 39, 0.1);
  border-radius: 10px;
  padding: 14px 18px 12px;
  transition: border-color 0.2s;
}
.careers-filter-field:focus-within {
  border-color: rgba(138, 115, 70, 0.5);
}
.careers-filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.careers-filter-input {
  font-size: 15px;
  color: var(--charcoal);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  width: 100%;
}
.careers-filter-input::placeholder {
  /* 0.7 opacity yields ~5.5:1 contrast on the cream field — comfortably
     passes WCAG AA (4.5:1) while still reading as placeholder. */
  color: rgba(16, 32, 39, 0.7);
}
.careers-select-wrap {
  position: relative;
}
.careers-select-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(16, 32, 39, 0.5);
  pointer-events: none;
}
.careers-filter-select {
  font-size: 15px;
  /* 0.7 opacity yields ~5.5:1 contrast on the cream field — passes WCAG AA. */
  color: rgba(16, 32, 39, 0.7);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  padding-right: 20px;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.careers-filter-select.has-value {
  color: var(--charcoal);
}
.careers-no-results {
  font-size: 15px;
  color: var(--gray);
  padding: 40px 0;
}

/* ── Office multi-select chip component ── */
.careers-multiselect {
  position: relative;
}
.careers-multiselect-display {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 26px;
  outline: none;
}
.careers-multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.careers-multiselect-placeholder {
  font-size: 15px;
  /* 0.7 opacity yields ~5.5:1 contrast on the cream field — passes WCAG AA. */
  color: rgba(16, 32, 39, 0.7);
  line-height: 1.4;
}
.careers-multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 32, 39, 0.08);
  border: 1px solid rgba(16, 32, 39, 0.15);
  border-radius: 6px;
  padding: 2px 6px 2px 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.5;
}
.careers-multiselect-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: rgba(16, 32, 39, 0.45);
  font-size: 15px;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.careers-multiselect-chip-remove:hover {
  color: var(--charcoal);
  background: rgba(16, 32, 39, 0.1);
}
.careers-multiselect-arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(16, 32, 39, 0.5);
  transition: transform 0.2s;
}
.careers-multiselect--open .careers-multiselect-arrow {
  transform: rotate(180deg);
}
.careers-multiselect-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  right: -18px;
  background: #fff;
  border: 1px solid rgba(16, 32, 39, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 200;
  overflow: hidden;
  padding: 6px 0;
}
.careers-multiselect--open .careers-multiselect-dropdown {
  display: block;
}
.careers-multiselect-option {
  font-size: 15px;
  color: var(--charcoal);
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.careers-multiselect-option--indented {
  padding-left: 34px;
}
.careers-multiselect-option:hover {
  background: rgba(16, 32, 39, 0.05);
}
.careers-multiselect-option--selected {
  color: var(--gold-dark);
  font-weight: 500;
}
.careers-multiselect-option--selected::after {
  content: '✓';
  color: var(--gold);
  font-size: 14px;
}
/* keep filter-field border gold while dropdown is open */
#office-filter-field:has(.careers-multiselect--open) {
  border-color: rgba(138, 115, 70, 0.5);
}

@media (max-width: 768px) {
  .careers-filters {
    grid-template-columns: 1fr;
  }
}

.careers-dept {
  margin-bottom: clamp(48px, 5vw, 64px);
}
.careers-dept:last-child {
  margin-bottom: 0;
}
.careers-dept-parent {
  font-size: 13px;
  font-weight: 400;
  color: var(--gray);
  margin-bottom: 4px;
}
.careers-dept-name {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--nav-bg);
  margin-bottom: 24px;
}

.careers-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  text-decoration: none;
  transition: padding 0.15s;
  cursor: pointer;
}
.careers-job:first-of-type {
  border-top: 1px solid rgba(0,0,0,0.1);
}
.careers-job:hover {
  padding-left: 8px;
}
.careers-job-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.careers-job-new {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.careers-job-location {
  font-size: 14px;
  color: var(--gray);
}
.careers-job-arrow {
  font-size: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-left: 24px;
  transition: transform 0.15s;
  opacity: 0;
}
.careers-job:hover .careers-job-arrow {
  opacity: 1;
  transform: translateX(4px);
}

.careers-loading {
  font-size: 15px;
  color: var(--gray);
  padding: 40px 0;
}
.careers-empty {
  font-size: 15px;
  color: var(--gray);
  padding: 40px 0;
}
.careers-empty a {
  color: var(--nav-bg);
  font-weight: 500;
  text-decoration: none;
}
.careers-empty a:hover {
  text-decoration: underline;
}

/* ── TAKE THE LEAD — open application CTA ── */
.careers-values-section {
  background: var(--cream);
  padding: 0;
}
.careers-values-inner {
  width: 100%;
  padding: 0 var(--edge-pad);
}

/* ── Values: full-width single-column layout ──
   The accordion opens UPWARD, and the mechanism that makes that
   possible lives here — not in the toggle positioning. In normal
   document flow an element's TOP edge is pinned by whatever sits
   above it, so adding content can only push its BOTTOM edge down.
   No amount of tweaking the toggle or the row's flex-direction
   changes that; those only rearrange things *within* a row.
   To make a row grow upward instead, the accordion is pinned to the
   BOTTOM of the text column with margin-top:auto, and the column is
   given a min-height — sized by careers.js to exactly one open
   panel's worth of extra space (see there). The flexible gap above
   the accordion then shrinks by exactly the amount a row expands —
   so the accordion's bottom edge (and the toggle sitting on it, and
   everything below this section) never moves, while the row's top
   edge rises into the gap. */
.values--split {
  display: block;
  min-height: 0;
}
.values--split .values-text-col {
  display: flex;
  flex-direction: column;
  /* min-height is set by careers.js to (closed height + tallest
     panel body), so the flexible gap above the accordion is only as
     tall as it needs to be — not the giant empty band that a fixed
     viewport-height runway produced. No JS: no min-height, so the
     accordion just sits below the header and opens downward. */
}
.values--split .values-header {
  /* Guaranteed minimum gap below the header. The flexible
     margin-top:auto space sits on top of this and is what the
     accordion eats into as rows open. */
  margin-bottom: clamp(24px, 3vw, 44px);
}
.values--split .values-list--accordion {
  /* Pin the accordion to the bottom of the text column. This single
     declaration is what converts downward growth into upward growth. */
  margin-top: auto;
}

/* ── Values: accordion list — bottom-anchored, opens upward ── */
.values-list--accordion {
  display: block;
  position: static;
}
.values-list--accordion .values-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(12, 18, 24, 0.18);
  padding: 0;
  position: relative;
}
.values-list--accordion summary {
  list-style: none;
  cursor: pointer;
  display: block;
  padding: clamp(14px, 1.4vw, 18px) 56px clamp(14px, 1.4vw, 18px) 0;
}
.values-list--accordion summary::-webkit-details-marker { display: none; }
.values-list--accordion summary:hover .values-title { color: #746547; }
.values-list--accordion .values-title {
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--deep);
  margin: 0;
  transition: color 0.3s ease;
}
.values-list--accordion .values-row[open] .values-title {
  color: #746547;
}
.values-list--accordion .values-body {
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(12, 18, 24, 0.7);
  margin: 0;
  max-width: 100%;
  /* Bare body (before JS wraps it) stays hidden. The browser's UA rule
     for closed <details> already hides direct children other than
     <summary>; this explicit rule is defensive in case that rule is
     overridden by something else upstream. */
  display: none;
}
.values-list--accordion .values-body-wrap > .values-body {
  /* Once wrapped, the body is shown inside the height-controlled wrap. */
  display: block;
}

/* Smooth accordion open/close — JS-driven explicit pixel heights.
   Note: we don't force `display: block` on every non-summary child of
   <details>. Pre-JS, the browser's default rule (hiding non-summary
   children of a closed <details>) keeps the bare body hidden so it
   doesn't flash in. Post-JS, the .values-body-wrap is inserted; its
   own `display: block` rule keeps it in layout regardless of the
   <details>'s [open] state, which the height transition needs.        */
.values-list--accordion .values-body-wrap {
  /* display: block (with class-level specificity) keeps the wrap in
     layout even when the parent <details> is closed — the browser's
     default UA rule that hides non-summary children would otherwise
     break the height transition on close. */
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.values-list--accordion .values-body-wrap > .values-body {
  /* Body sits BELOW the summary in normal flow. The summary's
     padding-bottom supplies the gap between title and body; the body's
     padding-bottom supplies the gap between body and the divider.
     Right padding clears the absolutely-positioned toggle. */
  padding-top: 0;
  padding-bottom: clamp(20px, 2.2vw, 28px);
  padding-right: 56px;
}

/* Sync toggle icon to the body animation timing */
.values-toggle::before,
.values-toggle::after {
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .values-list--accordion .values-body-wrap,
  .values-toggle::before,
  .values-toggle::after {
    transition: none;
  }
}

/* +/- toggle — absolutely positioned at the row's bottom-right, just
   above the divider line. Because the accordion is bottom-anchored
   (see the layout block above), a row's bottom edge does not move
   when it opens — so this toggle stays exactly where it was clicked.
   The title rises above it and the body fills the space between. */
.values-toggle {
  position: absolute;
  right: 0;
  bottom: clamp(14px, 1.4vw, 18px);
  width: 18px;
  height: 18px;
}
.values-toggle::before,
.values-toggle::after {
  content: '';
  position: absolute;
  background: var(--deep);
  top: 50%;
  left: 50%;
}
.values-toggle::before {
  width: 18px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.values-toggle::after {
  width: 1.5px;
  height: 18px;
  transform: translate(-50%, -50%);
}
details[open] .values-toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* On tablet/mobile the upward-open mechanism is switched off: short
   viewports don't have the runway for it, and a tall flexible gap
   looks wrong on a phone. The accordion falls back to a normal
   downward open with a static gap above it. */
@media (max-width: 900px) {
  .values--split .values-text-col {
    min-height: 0;
  }
  .values--split .values-header {
    margin-bottom: clamp(40px, 8vw, 80px);
  }
  .values--split .values-list--accordion {
    margin-top: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TEAM SPOTLIGHT — testimonial + employee video, 50/50 on desktop.
   A single full-bleed dark band.
   ═══════════════════════════════════════════════════════════════════ */

.team-spotlight {
  margin-top: clamp(72px, 9vw, 120px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--nav-bg);
  padding: clamp(80px, 10vw, 128px) var(--edge-pad);
}

.team-spotlight-inner {
  /* No max-width here — track the values section above (which is bounded
     only by var(--edge-pad) on .careers-values-inner) so the testimonial
     content sits on the exact same left/right edges as the accordion at
     every viewport. Previously had max-width: var(--page-max), which
     started centering content on laptop displays around 1680–1919px and
     made the testimonial visibly narrower than the values above it.
     margin: 0 auto is kept as a no-op for now in case a max-width is
     ever reintroduced. */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
  /* Anchor a cinematic minimum height so the video stays prominent
     even when the quote runs short. */
  min-height: clamp(380px, 34vw, 480px);
}

/* ── Left column: quote ─────────────────────────────────────── */

.team-spotlight-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 3vw, 44px);
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Decorative opening quote glyph — sits behind the eyebrow / quote
   as a typographic moment. Serif because the rest of the type is
   sans; low opacity so it whispers rather than shouts. */
.team-spotlight-quote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-8%, -42%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(140px, 15vw, 220px);
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.team-spotlight-eyebrow,
.team-spotlight-text,
.team-spotlight-attribution {
  position: relative;
  z-index: 1;
}

.team-spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.team-spotlight-eyebrow-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  flex-shrink: 0;
}

.team-spotlight-text {
  margin: 0;
  padding: 0;
  border: none;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--warm-white);
  text-wrap: pretty;
}

.team-spotlight-attribution {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding-top: 0;
  border-top: none;
}

.team-spotlight-photo {
  display: block;
  width: clamp(96px, 8.4vw, 120px);
  height: clamp(96px, 8.4vw, 120px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  flex-shrink: 0;
}

.team-spotlight-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.team-spotlight-name {
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.005em;
}

.team-spotlight-role {
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Right column: video ────────────────────────────────────── */

.team-spotlight-video {
  display: flex;
  min-width: 0;
}

/* ── Video stage (shared with spotlight layout) ─────────────── */
.careers-video-stage {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: var(--radius-img-lg);
  overflow: hidden;
  background: linear-gradient(175deg, #0d2330 0%, #0a1a22 100%);
  cursor: pointer;
}

/* Inside the 50/50 grid the stage stretches to the column height
   so both sides line up; it keeps a cinematic minimum aspect. */
.team-spotlight-video .careers-video-stage {
  flex: 1;
  aspect-ratio: 16 / 10;
}

.careers-video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-img-lg);
}

.careers-video-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 50% at 50% 50%,
    rgba(183, 150, 93, 0.07) 0%,
    transparent 72%
  );
  z-index: 1;
}

/* Play button — centered overlay */
.careers-video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.3s ease;
}

.careers-video-play--hidden {
  opacity: 0;
  pointer-events: none;
}

.careers-video-play-ring {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #102027;
  border-radius: 50px;
  padding: clamp(12px, 1.4vw, 15px) clamp(22px, 2.4vw, 30px) clamp(12px, 1.4vw, 15px) clamp(18px, 2vw, 24px);
  border: 1px solid var(--gold);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s ease, box-shadow 0.22s ease;
  animation: playBtnIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s;
  opacity: 0;
}

@keyframes playBtnIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.careers-video-play-icon {
  width: clamp(13px, 1.3vw, 16px);
  height: clamp(13px, 1.3vw, 16px);
  color: var(--gold);
  flex-shrink: 0;
}

.careers-video-play-label {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.careers-video-play:hover .careers-video-play-ring {
  transform: scale(1.04);
  background: #1a3040;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.36),
    0 1px 4px rgba(0, 0, 0, 0.18);
}

/* ── Team spotlight: responsive ────────────────────────────── */

@media (max-width: 900px) {
  .team-spotlight {
    /* Asymmetric padding: extra room on top so the decorative apostrophe
       (positioned via translate-up 42% of its own height) has visual
       breathing room from the section's top edge. */
    padding: clamp(96px, 16vw, 128px) clamp(24px, 5vw, 48px) clamp(56px, 9vw, 88px);
  }
  .team-spotlight-inner {
    grid-template-columns: 1fr;
    gap: clamp(36px, 7vw, 56px);
    min-height: 0;
  }
  .team-spotlight-video .careers-video-stage {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 600px) {
  .team-spotlight-text {
    font-size: clamp(19px, 5vw, 24px);
  }
  .team-spotlight-photo {
    width: 84px;
    height: 84px;
  }
  .team-spotlight-name {
    font-size: 17px;
  }
  .team-spotlight-role {
    font-size: 14px;
  }
}


/* Override the shared .values default of min-height: 100vh — on the
   careers page the section only needs to size to its content. */
.page-careers .values {
  min-height: auto;
  justify-content: flex-start;
  margin-top: 0;
  border-top: none;
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(56px, 6vw, 88px);
}

@media (max-width: 768px) {
  .page-careers .values {
    padding-top: clamp(64px, 10vw, 80px);
    padding-bottom: clamp(48px, 7vw, 64px);
  }
}

.careers-lead {
  background: var(--cream);
  padding: 0 0 clamp(80px, 10vw, 120px);
}
.careers-lead-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.careers-lead-img img {
  display: block;
  width: 100%;
  border-radius: var(--radius-img-lg);
  object-fit: cover;
  max-height: 520px;
}
.careers-lead-eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(120, 100, 55);
  margin-bottom: clamp(12px, 1.4vw, 18px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.careers-lead-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: rgb(120, 100, 55);
  flex-shrink: 0;
}
.careers-lead-headline {
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 600;
  color: var(--nav-bg);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.careers-lead-body {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(16, 32, 39, 0.63);
  max-width: 38ch;
  margin-bottom: clamp(32px, 3.5vw, 44px);
}
.careers-lead-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: 0;
  border: 1px solid rgba(16, 32, 39, 0.15);
  font-size: 14px;
  font-weight: 500;
  color: var(--nav-bg);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: border-color 0.2s, background 0.2s;
}
.careers-lead-btn:hover {
  border-color: rgba(16, 32, 39, 0.3);
  background: rgba(16, 32, 39, 0.03);
}

@media (max-width: 768px) {
  .careers-lead-inner {
    grid-template-columns: 1fr;
  }
  .careers-lead-headline {
    font-size: clamp(28px, 7vw, 42px);
  }
}