/* ============================================================
   People's Career — page styles.
   Loaded on every page (single stylesheet, mirrors Group shell).
   Uses design-system.css tokens only — no hardcoded palette.
   Base classes ported from Group's index.css:
     .lab-section, .section-intro, .section-subheading,
     .narrative-grid/card, .reveal-delay-*, .visually-hidden,
     .section-heading--on-dark helpers.
   Career-specific components below the base block.
   ============================================================ */

/* --- A11y helper -------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SHARED CHROME (ported from Group index.css)
   Page-level rules the partials need but that don't live in
   design-system.css: header logo sizing, brand-hub + logo-menu
   dropdown, cookie-modal, footer helpers. Token-based.
   ============================================================ */

/* Sprite icon defaults for wrapper-styled inline SVGs. */
.hero-badge svg,
.career-hero__badge svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Header brand cluster + logo ---------------------------- */
.brand-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-navy-500);
}
.site-header__logo:focus-visible {
  outline: 2px solid var(--color-periwinkle-500);
  outline-offset: 4px;
  border-radius: 4px;
}
.site-header__logo img {
  display: block;
  height: 40px;
  width: auto;
}
@media (max-width: 767px) {
  .site-header__logo img { height: 30px; }
}

/* --- Brand-hub trigger + logo-menu dropdown ---------------- */
.brand-hub {
  position: relative;
  display: flex;
  align-items: center;
}
.brand-hub-trigger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-navy-500);
  padding: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.brand-hub-trigger:hover {
  background: var(--color-lavender-50);
  color: var(--color-navy-900);
}
.brand-hub-trigger:focus-visible {
  outline: 2px solid var(--color-periwinkle-500);
  outline-offset: 2px;
}
.brand-hub.is-open .brand-hub-trigger {
  background: var(--color-lavender-100);
  color: var(--color-navy-900);
}
.brand-hub-menu,
.logo-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 380px;
  background: var(--color-white);
  border: 1px solid var(--color-lavender-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: var(--space-4);
  z-index: 120;
}
.logo-menu__here {
  font-size: var(--text-xs);
  color: var(--color-navy-400);
  font-weight: 500;
  margin-left: 4px;
}
.logo-menu__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.logo-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-navy-900);
  transition: background var(--dur-fast) var(--ease-out);
}
.logo-menu__item:hover {
  background: var(--color-lavender-100);
  color: var(--color-navy-900);
}
.logo-menu__item--current {
  background: var(--color-lavender-50);
  position: relative;
}
.logo-menu__item--current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--color-periwinkle-500);
  border-radius: 2px;
}
.logo-menu__item--current:hover { background: var(--color-lavender-100); }
.logo-menu__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.logo-menu__brand {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-navy-900);
}
.logo-menu__tag {
  font-size: var(--text-xs);
  color: var(--color-navy-400);
  line-height: 1.3;
}
.logo-menu__arrow {
  color: var(--color-navy-400);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.logo-menu__item:hover .logo-menu__arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}
@media (max-width: 640px) {
  .logo-menu { width: calc(100vw - 24px); max-width: 380px; left: 0; }
}
@media (max-width: 479px) {
  .brand-hub-menu,
  .logo-menu {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

/* --- Footer helpers ---------------------------------------- */
.site-footer__logo {
  height: 40px;
  width: auto;
  display: block;
}
.site-footer__legal-line {
  font-size: var(--text-sm);
}
.site-footer__legal-link {
  color: var(--color-white);
}

/* --- Cookie modal (bottom-sticky, no backdrop) ------------- */
.cookie-modal {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 9999;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-smooth);
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.cookie-modal.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop { display: none; }
.cookie-modal__card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 720px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}
.cookie-modal__title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-2);
}
.cookie-modal__text {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-navy-700);
  margin: 0 0 var(--space-5);
}
.cookie-modal__text a {
  color: var(--color-periwinkle-900);
  text-decoration: underline;
}
.cookie-modal__categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.cookie-category {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  margin: 0;
}
.cookie-category:hover { border-color: var(--color-periwinkle-500); }
.cookie-category__choice {
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
}
.cookie-category__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cookie-category__name {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-navy-900);
}
.cookie-category__desc {
  font-size: var(--text-xs);
  color: var(--color-navy-500);
  line-height: 1.45;
}
.cookie-category--locked {
  background: var(--color-lavender-50);
  cursor: default;
}
.cookie-category--locked:hover { border-color: var(--color-lavender-700); }
.cookie-category__status {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}
.cookie-modal__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-modal__actions .btn { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .cookie-modal { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
  .cookie-modal__card { padding: var(--space-4); }
  .cookie-modal__title { font-size: var(--text-sm); margin-bottom: var(--space-1); }
  .cookie-modal__text { font-size: var(--text-xs); margin-bottom: var(--space-3); }
  .cookie-modal__actions { flex-direction: column-reverse; gap: var(--space-1); }
  .cookie-modal__actions .btn { width: 100%; min-height: 36px; }
}

/* --- Base section layout (ported) -------------------------- */
.lab-section {
  padding: var(--space-20) 0;
  background: var(--color-white);
}
.lab-section--soft {
  background: var(--grad-hero-light);
}
.section-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--space-8);
}
/* Design-system gives .section-heading 40px below; tighten it inside intros. */
.section-intro .section-heading { margin-bottom: var(--space-5); }
.section-subheading {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.55;
  margin-top: var(--space-4);
}
.section-heading--on-dark { color: var(--color-white); }
.section-subheading--on-dark { color: var(--color-lavender-300); }
.eyebrow--on-dark { color: var(--color-periwinkle-500); }

@media (max-width: 768px) {
  .lab-section { padding: var(--space-16) 0; }
  .section-intro { margin-bottom: var(--space-6); padding: 0 var(--space-4); }
}

/* --- Reveal-delay utilities (ported) ----------------------- */
.reveal-delay-0  { --reveal-delay: 0s; }
.reveal-delay-1  { --reveal-delay: 0.08s; }
.reveal-delay-2  { --reveal-delay: 0.16s; }
.reveal-delay-3  { --reveal-delay: 0.24s; }

/* --- Narrative cards (ported, used for ethos/how-we-work) --- */
.narrative-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1200px;
  margin: 0 auto;
}
.narrative-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* De-boxed: a hairline rule above each column instead of a card.
   Reads as editorial columns, not as a grid of boxes. */
.narrative-card {
  position: relative;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-lavender-300);
  border-radius: 0;
  padding: var(--space-5) 0 0;
  text-align: left;
  transition: border-color var(--dur-slow) var(--ease-out);
}
.narrative-card:hover { border-top-color: var(--color-periwinkle-500); }
/* Icon sits above the hairline, aligned to the column's left edge. */
.narrative-card__icon {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-periwinkle-500);
}
.narrative-card__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.narrative-card:has(.narrative-card__icon) { padding-top: 0; border-top: none; }
.narrative-card:has(.narrative-card__icon) .narrative-card__icon { padding-top: 0; border-top: none; }
.narrative-card__title {
  font-size: var(--text-h5);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--track-snug);
}
.narrative-card__text {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.6;
  margin: 0;
}
.ethos-card__num {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--color-periwinkle-500);
  margin-bottom: var(--space-4);
}
@media (max-width: 1000px) {
  .narrative-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .narrative-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ============================================================
   CAREER-SPECIFIC COMPONENTS
   ============================================================ */

/* --- Hero (forside) ---------------------------------------- */
.career-hero {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: calc(var(--space-24) + var(--space-8)) 0 var(--space-20);
  text-align: center;
  background: var(--grad-section-navy-deep); /* fallback behind video */
}
.career-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.career-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, rgba(19, 25, 44, 0.94) 0%, rgba(38, 48, 79, 0.84) 52%, rgba(86, 105, 164, 0.68) 100%);
}
.career-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Dark, softly translucent pill over the video - white text, no icon. */
.career-hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-6);
  background: rgba(19, 25, 44, 0.24);
  border: none;
  color: var(--color-white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.career-hero__title {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  color: var(--color-white);
  margin: 0 0 var(--space-6);
}
.career-hero__title .heading-accent { color: var(--color-periwinkle-500); }
.career-hero__subtitle {
  /* Matches the subpage heroes - the home page had the smallest hero
     subtitle sitting under the largest headline. */
  font-size: var(--text-h4);
  color: var(--color-lavender-300);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 0 var(--space-8);
}
.career-hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}
/* Subpage variant: same video treatment, still shorter than the home page. */
.career-hero--page {
  min-height: calc(52vh + 200px);
  padding: calc(var(--space-24) + var(--space-8)) 0 var(--space-20);
}
.career-hero--page .career-hero__title {
  font-size: var(--text-h1);
  line-height: 1.02;
  letter-spacing: var(--track-tight);
}
.career-hero--page .career-hero__subtitle {
  max-width: 40ch;
}
@media (max-width: 768px) {
  .career-hero--page { min-height: calc(48vh + 140px); }
}

/* --- Page hero (indre sider) ------------------------------- */
.page-hero {
  background: var(--grad-hero-light);
  padding: calc(var(--space-24) + var(--space-4)) 0 var(--space-16);
  text-align: center;
}
.page-hero__inner {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-hero__title {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
  margin: var(--space-3) 0 var(--space-5);
}
.page-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-navy-500);
  line-height: 1.55;
  max-width: 640px;
  margin: 0;
}

/* --- Stat row (remote-first) ------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 960px;
  margin: 0 auto;
}
.stat-block {
  text-align: center;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-lavender-300);
}
.stat-block__value {
  display: block;
  font-size: var(--text-5xl);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  letter-spacing: var(--track-tight);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.stat-block__label {
  font-size: var(--text-sm);
  color: var(--color-navy-500);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* --- Brand grid (five workplaces) -------------------------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1100px;
  margin: 0 auto;
}
/* Cards here, deliberately: each tile is a link out to a brand site,
   so it needs the affordance. Same treatment as .role-card. */
.brand-tile {
  background: var(--grad-card-light);
  border: none;
  border-radius: var(--radius-card);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  border: 1px solid var(--color-lavender-300);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-normal) var(--ease-smooth),
              box-shadow var(--dur-normal) var(--ease-smooth),
              border-color var(--dur-normal) var(--ease-smooth);
}
.brand-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-periwinkle-500);
}
.brand-tile__visit {
  display: inline-flex;
  padding-top: var(--space-2);
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  margin-top: auto;
}
.brand-tile__visit svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.brand-tile:hover .brand-tile__visit svg { transform: translate(2px, -2px); }
.brand-tile:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}
.brand-tile__logo {
  height: 38px;
  width: auto;
  align-self: flex-start;
}
.brand-tile__text {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.55;
  margin: 0;
}
.brand-tile--cta {
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--space-2);
  border-top-color: transparent;
  text-decoration: none;
  color: var(--color-periwinkle-900);
}
.brand-tile--cta:hover { border-top-color: transparent; }
.brand-tile--cta .brand-tile__cta-text {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-periwinkle-900);
}
.brand-tile--cta svg { width: 18px; height: 18px; color: var(--color-periwinkle-900); }
/* Parent company: same tile shape as its brands, marked with a chip
   and a light tint so the hierarchy reads without shouting. */
.brand-tile--parent {
  background: var(--grad-hero-light);
  border-color: var(--color-periwinkle-500);
}
@media (max-width: 1000px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .brand-grid { grid-template-columns: 1fr; }
}

/* --- Values strip (dark, forside) -------------------------- */
.values-section {
  padding: var(--space-20) 0;
  background: var(--grad-section-navy-deep);
}
.values-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}
.value-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.value-chip__name {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-white);
}
.value-chip__line {
  font-size: var(--text-sm);
  color: var(--color-lavender-300);
  line-height: 1.4;
}
.values-section__link {
  text-align: center;
  margin-top: var(--space-8);
}
@media (max-width: 900px) {
  .values-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .values-strip { grid-template-columns: 1fr; }
}

/* --- Value cards (livet hos os) ---------------------------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1100px;
  margin: 0 auto;
}
.value-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-lavender-300);
  border-radius: 0;
  padding: var(--space-5) 0 0;
}
.value-card__name {
  font-size: var(--text-h5);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-2);
}
.value-card__line {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  margin: 0 0 var(--space-4);
}
.value-card__text {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1000px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; } }

/* --- Team placeholders ------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}
.team-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--grad-section-periwinkle);
  border: 1px solid var(--color-lavender-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-photo span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy-500);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }

/* --- Role list + cards ------------------------------------- */
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1200px;
  margin: 0 auto;
}
.role-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--grad-card-light);
  border: 1px solid var(--color-lavender-300);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-normal) var(--ease-smooth),
              box-shadow var(--dur-normal) var(--ease-smooth),
              border-color var(--dur-normal) var(--ease-smooth);
}
.role-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-periwinkle-500);
}
.role-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.role-card__brand {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy-500);
}
.role-card__badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--color-periwinkle-900);
  background: var(--color-lavender-50);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}
.role-card__title {
  font-size: var(--text-h5);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0;
  letter-spacing: var(--track-snug);
}
.role-card__intro {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.role-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-lavender-100);
}
.role-card__loc {
  font-size: var(--text-sm);
  color: var(--color-navy-500);
}
.role-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-periwinkle-900);
}
.role-card__cta svg { width: 16px; height: 16px; }
.role-list__foot,
.role-band__foot {
  text-align: center;
  margin-top: var(--space-10);
}
.role-empty {
  text-align: center;
  color: var(--color-navy-500);
  font-size: var(--text-body);
  margin-top: var(--space-8);
}
@media (max-width: 1000px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .role-grid { grid-template-columns: 1fr; } }

/* --- Role filter chips ------------------------------------- */
.role-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto var(--space-10);
}
.role-filter__label {
  font-size: var(--text-sm);
  color: var(--color-navy-500);
}
.role-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.role-filter__chip {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy-700);
  background: var(--color-white);
  border: 1px solid var(--color-lavender-300);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.role-filter__chip:hover { border-color: var(--color-periwinkle-500); }
.role-filter__chip.is-active {
  color: var(--color-white);
  background: var(--color-periwinkle-900);
  border-color: var(--color-periwinkle-900);
}
.role-filter__chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* --- Role detail ------------------------------------------- */
.role-detail { padding: calc(var(--space-24) + var(--space-4)) 0 var(--space-16); background: var(--grad-hero-light); }
.role-detail__inner { max-width: 860px; }
.role-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  text-decoration: none;
  margin-bottom: var(--space-6);
}
.role-detail__back svg { width: 16px; height: 16px; transform: scaleX(-1); }
.role-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.role-detail__loc {
  font-size: var(--text-sm);
  color: var(--color-navy-500);
}
.role-detail__title {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
  margin: 0 0 var(--space-5);
}
.role-detail__intro {
  font-size: var(--text-lg);
  color: var(--color-navy-500);
  line-height: 1.55;
  margin: 0 0 var(--space-7);
}
.role-detail__actions { margin-top: 15px; margin-bottom: var(--space-10); }
.role-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
}
.role-detail__subhead {
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-5);
  letter-spacing: var(--track-snug);
}
.role-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.role-detail__list li {
  position: relative;
  padding-left: var(--space-7);
  font-size: var(--text-body);
  color: var(--color-navy-700);
  line-height: 1.5;
}
.role-detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-periwinkle-500);
}
@media (max-width: 720px) {
  .role-detail__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* --- Hiring process steps ---------------------------------- */
/* ============================================================
   HIRING STEPS — the four-step process on the role pages.
   Deliberately NOT .process-steps: that is a shared design-system
   component which draws a connector rail and a filled numeral, and
   the two treatments fought each other. No rules, no circles here.
   ============================================================ */
.hiring-steps {
  list-style: none;
  margin: var(--space-8) auto 0;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
  text-align: left;
}

.hiring-step__num {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-periwinkle-500);
  letter-spacing: 0.04em;
}

.hiring-step__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-navy-900);
}

.hiring-step__text {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-navy-500);
}

@media (max-width: 900px) { .hiring-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (max-width: 480px) { .hiring-steps { grid-template-columns: 1fr; } }

/* --- Apply form layout ------------------------------------- */
.apply-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-10);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.apply-layout__intro { position: sticky; top: 120px; }
.apply-layout__intro .section-heading { text-align: left; }
.apply-layout__intro .section-subheading { text-align: left; }
.apply-form .form-field__hint {
  font-size: var(--text-xs);
  color: var(--color-navy-400);
  font-style: normal;
}
@media (max-width: 860px) {
  .apply-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .apply-layout__intro { position: static; }
}

/* --- Talent band ------------------------------------------- */
.talent-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  border-top: 1px solid var(--color-lavender-300);
  padding: var(--space-8) 0 0;
}
.talent-band__copy { max-width: 560px; }
.talent-band__copy .section-heading { text-align: left; }
.talent-band__copy .section-subheading { text-align: left; }

/* --- Companies list ---------------------------------------- */
.company-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 1000px;
  margin: 0 auto;
}
.company-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  align-items: start;
  border-top: 1px solid var(--color-lavender-300);
  padding: var(--space-6) 0 0;
}
.company-row__brand img {
  height: 28px;
  width: auto;
  margin-bottom: var(--space-3);
}
.company-row__role {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  margin: 0;
}
.company-row__text {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.company-row__build {
  font-size: var(--text-sm);
  color: var(--color-navy-700);
  margin: 0;
}
.company-row__build-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--color-navy-400);
  margin-right: var(--space-2);
}
@media (max-width: 720px) {
  .company-row { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* --- Hub grid ---------------------------------------------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1100px;
  margin: 0 auto;
}
.hub-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-lavender-300);
  border-radius: 0;
  padding: var(--space-5) 0 0;
}
.hub-card__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--color-lavender-50);
  color: var(--color-periwinkle-900);
  margin-bottom: var(--space-5);
}
.hub-card__pin svg { width: 22px; height: 22px; }
.hub-card__city {
  font-size: var(--text-h5);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-3);
}
.hub-card__text {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }

/* --- CTA band (dark) --------------------------------------- */
.cta-band {
  padding: var(--space-20) 0;
  background: var(--grad-hero-lavender);
}
.cta-band__inner {
  text-align: center;
  max-width: 900px;
}
/* Keep the closing line unbroken on desktop; wraps naturally below. */
@media (min-width: 900px) {
  .cta-band .section-heading { white-space: nowrap; }
}
.cta-band .section-heading { margin-bottom: var(--space-5); }
.cta-band__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* --- Legal / applicant-privacy page ------------------------ */
.legal-page {
  padding: calc(var(--space-24) + var(--space-4)) 0 var(--space-20);
  background: var(--color-white);
}
.legal-page__inner { max-width: 760px; }
.legal-page__title {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
  margin: var(--space-3) 0 var(--space-5);
}
.legal-page__notice {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  background: var(--color-lavender-50);
  border: 1px solid var(--color-lavender-300);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-8);
}
.legal-page__intro {
  font-size: var(--text-lg);
  color: var(--color-navy-500);
  line-height: 1.6;
  margin: 0 0 var(--space-10);
}
.legal-page__h2 {
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: var(--space-8) 0 var(--space-3);
  letter-spacing: var(--track-snug);
}
.legal-page__body p {
  font-size: var(--text-body);
  color: var(--color-navy-700);
  line-height: 1.65;
  margin: 0 0 var(--space-4);
}

/* --- Mobile hero sizing ------------------------------------ */
@media (max-width: 768px) {
  .career-hero { min-height: 82vh; padding: calc(var(--space-20) + var(--space-4)) 0 var(--space-16); }
  .page-hero { padding: calc(var(--space-20) + var(--space-2)) 0 var(--space-12); }
  .career-hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}

/* --- Homepage story ---------------------------------------- */
.story-prose {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.story-prose p {
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-navy-700);
  margin: 0 0 var(--space-4);
}
.story-prose p:last-child { margin-bottom: 0; }

/* --- Companies: brand stories ------------------------------ */
.brand-stories {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.brand-story {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.brand-story:nth-child(even) { flex-direction: row-reverse; }
.brand-story__panel {
  position: relative;
  flex: 0 0 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: var(--space-8);
  background: var(--grad-hero-lavender);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.brand-story__index {
  position: absolute;
  top: -0.22em;
  left: 0.04em;
  font-size: clamp(140px, 22vw, 220px);
  font-weight: 500;
  line-height: 1;
  color: var(--color-periwinkle-500);
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}
.brand-story__logo {
  position: relative;
  width: min(68%, 280px);
  height: auto;
}
.brand-story__content { flex: 1 1 auto; min-width: 0; }
.brand-story__kicker {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-periwinkle-900);
  margin: 0 0 var(--space-2);
}
.brand-story__role {
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-3);
}
.brand-story__text {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-navy-700);
  margin: 0 0 var(--space-5);
}
.brand-story__disciplines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.brand-story__disc-label {
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-navy-400);
  margin-right: var(--space-1);
}
.brand-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-lavender-300);
  color: var(--color-navy-700);
  font-size: var(--text-sm);
  font-weight: 500;
}
@media (max-width: 768px) {
  .brand-story,
  .brand-story:nth-child(even) { flex-direction: column; gap: var(--space-5); }
  .brand-story__panel { flex-basis: auto; width: 100%; min-height: 170px; padding: var(--space-6); }
}

/* ============================================================
   FOUNDER LETTER — signed, left-axis, quiet
   ============================================================ */
.founder-section {
  padding: var(--space-20) 0;
  background: var(--color-white);
}
.founder-letter {
  max-width: 720px;
  margin: 0 auto;
  padding-left: var(--space-7);
  border-left: 2px solid var(--color-periwinkle-500);
}
.founder-letter__heading {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
  margin: var(--space-3) 0 var(--space-6);
  line-height: 1.15;
}
.founder-letter__text {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-navy-700);
  margin: 0 0 var(--space-4);
}
.founder-letter__sign {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--space-6) 0 0;
}
.founder-letter__name {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-navy-900);
}
.founder-letter__role {
  font-size: var(--text-sm);
  color: var(--color-navy-500);
}
@media (max-width: 640px) {
  .founder-letter { padding-left: var(--space-5); }
}

/* ============================================================
   WHO THRIVES HERE — positive selectivity
   ============================================================ */
.thrive-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.thrive-item {
  position: relative;
  padding: var(--space-5) 0 0 var(--space-7);
  border-top: 1px solid var(--color-lavender-300);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-navy-700);
}
.thrive-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-5) + 0.55em);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-periwinkle-500);
}
@media (max-width: 720px) {
  .thrive-list { grid-template-columns: 1fr; }
}

/* ============================================================
   ROLES PULSE — live open-role count
   ============================================================ */
.roles-pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  background: var(--color-lavender-50);
  border: 1px solid var(--color-lavender-300);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  margin: 0;
}
.roles-pulse__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}
.roles-pulse__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-success);
  animation: career-ping 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .roles-pulse__dot::after { animation: none; }
}

/* ============================================================
   VOICES (testimonials) — editorial photo + quote
   ============================================================ */
.voices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 1000px;
  margin: 0 auto;
}
.voice-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  background: var(--grad-card-light);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  box-shadow: var(--shadow-card-slate);
}
.voice-card__photo {
  width: 92px;
  height: 112px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center top;
  background: var(--color-lavender-100);
  flex-shrink: 0;
  display: block;
}
.voice-card__body { position: relative; min-width: 0; }
.voice-card__quote {
  position: relative;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-navy-700);
  margin: 0 0 var(--space-4);
}
.voice-card__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.42em;
  left: -0.06em;
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--color-periwinkle-500);
  opacity: 0.26;
  pointer-events: none;
}
.voice-card__name {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0;
}
.voice-card__role {
  font-size: var(--text-sm);
  color: var(--color-navy-500);
  margin: 2px 0 0;
}
.voices-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1200px; }
.voices-grid--3 .voice-card { grid-template-columns: 1fr; gap: var(--space-4); }
.voices-grid--3 .voice-card__photo { width: 88px; height: 88px; border-radius: 50%; }
@media (max-width: 1000px) {
  .voices-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .voices-grid,
  .voices-grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   FOUNDERS — small avatars + first names inside the letter
   ============================================================ */
.founder-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.founder-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}
.founder-avatar__img {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
}
.founder-avatar__img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--color-lavender-100);
  box-shadow: 0 0 0 1px var(--color-lavender-300);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.founder-avatar--link:hover .founder-avatar__img img {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--color-periwinkle-500);
}
.founder-avatar__name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-navy-500);
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.founder-avatar--link:hover .founder-avatar__name { color: var(--color-periwinkle-900); }
.founder-avatar__in {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-periwinkle-900);
  color: var(--color-white);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.founder-avatar__in svg { width: 10px; height: 10px; }
.founder-avatar--link:hover .founder-avatar__in,
.founder-avatar--link:focus-visible .founder-avatar__in { opacity: 1; transform: scale(1); }
.founder-avatar--link:focus-visible { outline: none; }
.founder-avatar--link:focus-visible .founder-avatar__img img { box-shadow: 0 0 0 2px var(--color-periwinkle-500); }

/* ============================================================
   CONTACT BAND — people, in the same de-boxed language as the
   rest of the site: hairline rules, no card chrome, no nesting.
   ============================================================ */
.contact-band {
  padding: var(--space-20) 0;
  background: var(--color-white);
}
.contact-band__inner {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  max-width: 1000px;
}
.contact-band__heading {
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
  margin: var(--space-3) 0 var(--space-2);
  line-height: 1.2;
}
.contact-band__text {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
  max-width: 34ch;
}
.contact-band__people {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hiring-contact {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-lavender-300);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.hiring-contact:hover { border-top-color: var(--color-periwinkle-500); }
.hiring-contact__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--color-lavender-100);
}
.hiring-contact__body { display: block; min-width: 0; }
.hiring-contact__name {
  display: block;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-navy-900);
  line-height: 1.25;
}
.hiring-contact__role {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-navy-500);
  line-height: 1.4;
  margin-top: 2px;
}
.hiring-contact__in {
  color: var(--color-navy-400);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  transition: color var(--dur-fast) var(--ease-out);
}
.hiring-contact__in svg { width: 18px; height: 18px; }
.hiring-contact__in:hover { color: var(--color-periwinkle-900); }
.hiring-contact__in:focus-visible {
  outline: none;
  color: var(--color-periwinkle-900);
  box-shadow: var(--shadow-focus-ring);
  border-radius: 4px;
}
@media (max-width: 860px) {
  .contact-band__inner { grid-template-columns: 1fr; }
  .contact-band__text { max-width: none; }
}

/* Remote-first policy, folded into the bottom of the map band.
   Same hairline columns as the light sections, inverted for dark. */
.map-policy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  max-width: 1000px;
  margin: var(--space-12) auto 0;
}
.map-policy__item {
  border-top: 1px solid var(--alpha-white-15);
  padding-top: var(--space-4);
}
.map-policy__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.map-policy__text {
  font-size: var(--text-xs);
  color: var(--color-lavender-300);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 900px) { .map-policy { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .map-policy { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ============================================================
   IN-CONTENT PHOTOGRAPHY
   Deliberately NOT a matched pair — each image sits in a
   different section, at a different size and alignment, so
   the photography reads as part of the content rather than
   as a staged gallery.
   ============================================================ */

/* Beside the founder letter: portrait crop, right column. */
.founder-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.founder-shot {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 860px) {
  .founder-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .founder-shot { aspect-ratio: 3 / 2; }
}

/* Locations: remote-first policy as copy + photograph, not a card grid. */
.policy-layout {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.section-intro--lead {
  text-align: left;
  max-width: 34ch;
  margin-left: 0;
  margin-right: 0;
}
.policy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.policy-figure { margin: 0; }
.policy-shot {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  box-shadow: var(--shadow-lg);
}
.policy-figure__caption {
  font-size: var(--text-sm);
  color: var(--color-navy-500);
  line-height: 1.5;
  margin-top: var(--space-3);
}
@media (max-width: 900px) {
  .policy-layout { grid-template-columns: 1fr; }
  .section-intro--lead { max-width: none; }
  .policy-shot { aspect-ratio: 3 / 2; }
}

/* ============================================================
   REMOTE / WORLD MAP (dark band) + real proof stats
   ============================================================ */
@media (min-width: 900px) {
  .hub-map-section .section-heading { white-space: nowrap; }
}
.hub-map-section {
  padding: var(--space-16) 0;
  background: var(--grad-section-navy-soft);
}
.hub-map {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 990 / 414;
}
.hub-map__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hub-map__land { fill: var(--color-periwinkle-700); opacity: 0.34; }
.hub-map__arc {
  fill: none;
  stroke: var(--color-periwinkle-500);
  stroke-width: 1;
  opacity: 0.35;
  stroke-dasharray: 4 6;
}
.hub-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.hub-pin__dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-periwinkle-500);
  box-shadow: 0 0 0 2px var(--color-white);
  z-index: 2;
}
.hub-pin--home .hub-pin__dot {
  background: var(--color-white);
  box-shadow: 0 0 0 3px var(--color-periwinkle-500);
}
.hub-pin__ping {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-periwinkle-500);
  transform: translate(-50%, -50%);
  animation: career-ping 2.6s var(--ease-out) infinite;
}
@keyframes career-ping {
  0% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  80%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); }
}
.hub-pin__label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--color-white);
  color: var(--color-navy-900);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hub-pin__label small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-navy-500);
}
/* :focus (not only :focus-visible) so a tap on touch devices reveals the label too. */
.hub-pin:hover .hub-pin__label,
.hub-pin:focus .hub-pin__label,
.hub-pin:focus-visible .hub-pin__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hub-pin:focus-visible { outline: none; }
.hub-pin:focus-visible .hub-pin__dot { box-shadow: 0 0 0 3px var(--color-white); }
.map-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  max-width: 900px;
  margin: var(--space-8) auto 0;
}
.map-stat { text-align: center; }
.map-stat__value {
  display: block;
  font-size: var(--text-5xl);
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.map-stat__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-lavender-300);
  line-height: 1.4;
  margin-top: var(--space-3);
}
.hub-map-section__foot { text-align: center; margin-top: var(--space-8); }
@media (max-width: 760px) {
  .map-stats { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}
/* Small screens: the map renders short, so scale the pins down with it —
   otherwise they overlap and read as blobs rather than locations. */
@media (max-width: 640px) {
  .hub-map-section { padding: var(--space-16) 0; }
  .hub-pin { width: 10px; height: 10px; }
  .hub-pin__dot { width: 7px; height: 7px; box-shadow: 0 0 0 1.5px var(--color-white); }
  .hub-pin--home .hub-pin__dot { box-shadow: 0 0 0 2px var(--color-periwinkle-500); }
  .hub-pin__ping { width: 7px; height: 7px; }
  .hub-map__arc { opacity: 0.22; }
  .hub-pin__label { font-size: var(--text-xs); padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-pin__ping { animation: none; }
}

/* ============================================================
   MERGED "LIFE HERE" PAGE
   Deliberate variation down the page: photo hero -> editorial
   value rows -> columns -> dark band -> lead + items -> voices.
   ============================================================ */

/* Values as editorial rows - a manifesto, not a grid of boxes */
.value-list { max-width: 940px; margin: 0 auto; }
.value-row {
  display: grid;
  grid-template-columns: auto 0.85fr 1.6fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-lavender-300);
}
.value-row:last-child { border-bottom: 1px solid var(--color-lavender-300); }
.value-row__num {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--color-periwinkle-500);
  padding-top: 4px;
}
.value-row__name {
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--color-navy-900);
  letter-spacing: var(--track-snug);
  margin: 0 0 var(--space-1);
}
.value-row__line {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-periwinkle-900);
  margin: 0;
}
.value-row__text {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 820px) {
  .value-row { grid-template-columns: auto 1fr; gap: var(--space-4); }
  .value-row__text { grid-column: 2; }
}

/* Dark band for the technical substance - the page's one moment of contrast */
.dark-band {
  padding: var(--space-20) 0;
  background: var(--grad-section-navy-soft);
}
.dark-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}
.dark-item {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--space-5);
}
.dark-item__title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-white);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.dark-item__text {
  font-size: var(--text-sm);
  color: var(--color-lavender-300);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) { .dark-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .dark-grid { grid-template-columns: 1fr; } }

/* Lead statement beside its items - breaks the centred-intro rhythm */
.lead-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.section-heading--lead {
  text-align: left;
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}
.lead-layout__lead {
  font-size: var(--text-lg);
  color: var(--color-navy-500);
  line-height: 1.6;
  margin: 0;
}
.lead-layout__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-7);
}
@media (max-width: 900px) {
  .lead-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lead-layout__items { grid-template-columns: 1fr; }
}



/* ============================================================
   THE STACK — light version of the People's Lab platform page.
   Reads top-down as an actual stack: your app at the top,
   the datacentre at the bottom, everything owned in between.
   ============================================================ */
.stack-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.stack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stack-layer {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas: "num name" ". tag";
  gap: 2px var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.05);
  border-left: 2px solid var(--color-periwinkle-500);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.stack-layer:hover { background: rgba(255, 255, 255, 0.1); }
/* The application sits on top, the datacentre at the bottom - inset the
   middle layers slightly so the shape reads as a stack, not a list. */
.stack-layer:first-child { border-left-color: var(--color-white); }
.stack-layer:last-child { border-left-color: var(--color-lavender-300); }
.stack-layer__num {
  grid-area: num;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--color-periwinkle-500);
}
.stack-layer__name {
  grid-area: name;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-white);
}
.stack-layer__tag {
  grid-area: tag;
  font-size: var(--text-xs);
  color: var(--color-lavender-300);
  line-height: 1.45;
}
.stack-note {
  position: sticky;
  top: calc(var(--header-total-space, 96px) + var(--space-6));
}
.stack-note__title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-white);
  margin: 0 0 var(--space-3);
}
.stack-note__text {
  font-size: var(--text-body);
  color: var(--color-lavender-300);
  line-height: 1.65;
  margin: 0 0 var(--space-5);
}
.stack-note__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
}
.stack-note__link svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.stack-note__link:hover svg { transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .stack-layout { grid-template-columns: 1fr; }
  .stack-note { position: static; }
}

/* Request flow - four numbered steps, reads left to right as a pipeline */
.flow-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.flow-step {
  position: relative;
  border-top: 1px solid var(--color-lavender-300);
  padding-top: var(--space-5);
}
/* Arrow between steps, hidden on the last and when stacked */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -5px;
  right: calc(-1 * var(--space-5) / 2 - 4px);
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--color-periwinkle-500);
  border-right: 1px solid var(--color-periwinkle-500);
  transform: rotate(45deg);
}
/* Step number sits above the key, same treatment as the hiring steps. */
.flow-step__num {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  color: var(--color-periwinkle-500);
  margin-bottom: var(--space-2);
}
.flow-step__key {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--color-periwinkle-900);
  margin-bottom: var(--space-2);
}
.flow-step__val {
  font-size: var(--text-body);
  color: var(--color-navy-500);
  line-height: 1.6;
  margin: 0;
}
.thrive-list--single { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .flow-list { grid-template-columns: 1fr 1fr; }
  .flow-step:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  .flow-list { grid-template-columns: 1fr; }
  .flow-step::after { display: none; }
}

/* ============================================================
   SOVEREIGNTY DIAGRAM — ported from the People's Lab site so the
   two stay visually identical. Self-contained inline SVG.
   ============================================================ */
.hp-perimeter {
  padding: var(--space-20) 0;
  background: var(--color-lavender-50);
  border-top: 1px solid rgba(86, 105, 164, 0.08);
  border-bottom: 1px solid rgba(86, 105, 164, 0.08);
}
.hp-perimeter__intro {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto var(--space-10);
}
.hp-perimeter__eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--color-periwinkle-900);
  margin: 0 0 var(--space-3);
}
.hp-perimeter__title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  color: var(--color-navy-900);
  letter-spacing: var(--track-tight);
  line-height: 1.18;
  margin: 0 0 var(--space-3);
}
.hp-perimeter__title .heading-accent {
  color: var(--color-periwinkle-900);
}
  .hp-perimeter__title { white-space: nowrap; }
.hp-perimeter__lead {
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--color-navy-500);
  margin: 0 auto;
  max-width: 720px;
}
.hp-perimeter__viz {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-6);
}
.hp-perimeter__viz svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Denser hero variant: the residency cards carry the lower half, so the
   video sits further back and the copy block is tighter. */
.career-hero--dense .career-hero__overlay {
  background: linear-gradient(165deg, rgba(19, 25, 44, 0.99) 0%, rgba(38, 48, 79, 0.97) 52%, rgba(86, 105, 164, 0.94) 100%);
}
.career-hero--dense { min-height: calc(52vh + 240px); }
.career-hero--dense .career-hero__subtitle { margin-bottom: 0; }

/* The stack note reads as a companion panel, not an afterthought. */
.stack-note {
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
  background: rgba(255, 255, 255, 0.06);
  border-left: 2px solid var(--color-periwinkle-500);
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) {
  .stack-note { margin-top: var(--space-10); }
}

/* Subpage heroes crop from the top of the frame so heads aren't cut off.
   object-position moves the cover window up in the source, which shows
   ~250px more headroom without leaving a gap the way an offset would. */
.career-hero--page .career-hero__video { object-position: center top; }

/* Subpage heroes sit denser than the home page - their montages are busy
   and the copy has to win. The home page keeps its video readable. */
.career-hero--page .career-hero__overlay {
  background: linear-gradient(165deg, rgba(19, 25, 44, 0.98) 0%, rgba(38, 48, 79, 0.95) 52%, rgba(86, 105, 164, 0.88) 100%);
}


/* ============================================================
   RESIDENCY CARDS — ported wholesale from peopleslab.ai so the
   layout behaves exactly as it does there, media queries included.
   ============================================================ */


/* ── HERO RESIDENCY — USA · Dansk AI · Kina (3 kort) ─────── */
.hero-residency {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: stretch;
  max-width: 720px;
  margin: var(--space-7) auto 0;
  text-align: left;
}

.hero-residency__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-residency__card--blocked {
  opacity: 0.55;
}

.hero-residency__card--secure {
  background: rgba(86, 105, 164, 0.22);
  border-color: rgba(163, 176, 217, 0.45);
  box-shadow: 0 0 0 1px rgba(163, 176, 217, 0.25), 0 8px 28px rgba(19, 25, 44, 0.35);
}

.hero-residency__flag {
  display: inline-flex;
  width: 22px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-2);
}


/* Spacer where a flag would sit, so the middle card lines up with the others. */
.hero-residency__flag--empty {
  background: none;
  border: 0;
}
.hero-residency__flag-us {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to bottom,
      #B22234 0, #B22234 14.28%,
      #FFFFFF 14.28%, #FFFFFF 28.57%,
      #B22234 28.57%, #B22234 42.85%,
      #FFFFFF 42.85%, #FFFFFF 57.14%,
      #B22234 57.14%, #B22234 71.42%,
      #FFFFFF 71.42%, #FFFFFF 85.71%,
      #B22234 85.71%);
  position: relative;
}

.hero-residency__flag-us::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 53.85%;
  background: #3C3B6E;
}

.hero-residency__flag-dk {
  display: block;
  width: 100%;
  height: 100%;
  background: #C8102E;
  position: relative;
}

.hero-residency__flag-dk::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 30%;
  width: 14%;
  background: #FFFFFF;
}

.hero-residency__flag-dk::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 42%;
  height: 18%;
  background: #FFFFFF;
}

.hero-residency__flag-cn {
  display: block;
  width: 100%;
  height: 100%;
  background: #EE1C25;
}

.hero-residency__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.01em;
}

.hero-residency__status {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: rgba(255, 255, 255, 0.55);
}

.hero-residency__card--secure .hero-residency__status {
  color: var(--color-periwinkle-500);
}

.hero-residency__note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.hero-residency__card--secure .hero-residency__note {
  color: rgba(255, 255, 255, 0.75);
}


/* Blokerede AI-udbydere — vises som strikethrough så det er
   visuelt umiddelbart at de er afskåret fra stacken. */
.hero-residency__providers {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-1);
}

.hero-residency__provider {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.01em;
}

.hero-residency__status--blocked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 140, 140, 0.85);
}

.hero-residency__status--blocked svg {
  flex-shrink: 0;
  color: currentColor;
}
@media (max-width: 768px) {

  .hero-residency {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  .hero-residency__card {
    padding: var(--space-3) var(--space-4);
  }
}

/* ============================================================
   MOMENT — the offsite told next to the photograph of it.
   The image takes the wider column and the text is trimmed to
   roughly its height, so the two sides land level with each other.
   ============================================================ */
.moment {
  /* Matches .lab-section so the page keeps one vertical rhythm. */
  padding: var(--space-20) 0;
  background: var(--color-lavender-50);
}

.moment__split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: center;
}

.moment__heading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-navy-900);
}

.moment__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-navy-900);
}

.moment__body {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-navy-500);
}

.moment__body:last-child { margin-bottom: 0; }

.moment__figure {
  margin: 0;
}

.moment__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.moment__caption {
  margin-top: var(--space-3);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--color-navy-500);
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .moment__split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Photo first on narrow screens - it earns the scroll faster than the text does. */
  .moment__figure { order: -1; }
}

@media (max-width: 560px) {
  .moment { padding: var(--space-12) 0; }
  .moment__img { border-radius: var(--radius-md); }
}
/* end MOMENT */


/* Centred action row under a section-intro. */
.section-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* ============================================================
   WORKLIFE — what the job actually feels like, next to a face.
   Text left, portrait right; the portrait is the narrower column
   so the paragraphs keep a comfortable measure.
   ============================================================ */
.worklife {
  padding: var(--space-20) 0;
  background: var(--color-white);
}

.worklife__split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  /* Stretch, not centre: a fixed portrait ratio left ~165px of dead space
     above and below the text. The crop follows the copy instead. */
  align-items: stretch;
}

.worklife__text { align-self: center; }   /* portrait stretches, copy sits optically centred beside it */

.worklife__heading {
  margin: 0 0 var(--space-5);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-navy-900);
}

.worklife__p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-navy-500);
}

.worklife__p:first-of-type { color: var(--color-navy-900); }
.worklife__p:last-child { margin-bottom: 0; }

.worklife__figure { margin: 0; min-height: 460px; }

.worklife__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  .worklife__split { grid-template-columns: 1fr; gap: var(--space-6); }
  .worklife__figure { order: -1; min-height: 0; }
  .worklife__img { aspect-ratio: 3 / 2; height: auto; }
}

@media (max-width: 560px) {
  .worklife { padding: var(--space-12) 0; }
  .worklife__img { border-radius: var(--radius-md); }
}
/* end WORKLIFE */

/* A quote still waiting for its author keeps the card, loses the portrait. */
.voice-card--unattributed .voice-card__body { padding-top: var(--space-2); }