/** people-culture **/
/* THRIVE at HRV Pharma - People & Culture
   The acronym is the structure: each letter owns a value, a colour and a
   position in the scroll rail. Two accents per letter - "hue" for large
   display type, "ink" for small text that must stay legible. */

.pc {
  --pc-measure: 62ch;
  --pc-rail-w: 112px;
  background: var(--background-primary);
  color: var(--text-primary);
  overflow-x: clip;
}

/* Per-letter accents ---------------------------------------------------- */
.pc [data-letter="T"] { --pc-hue: #00A0E3; --pc-ink: #00688F; }
.pc [data-letter="H"] { --pc-hue: #003A70; --pc-ink: #003A70; }
.pc [data-letter="R"] { --pc-hue: #0072BC; --pc-ink: #005A94; }
.pc [data-letter="I"] { --pc-hue: #FFAE2F; --pc-ink: #A67908; }
.pc [data-letter="V"] { --pc-hue: #EF721F; --pc-ink: #C2540E; }
.pc [data-letter="E"] { --pc-hue: #F26522; --pc-ink: #A8380A; }

[data-theme="dark"] .pc [data-letter="T"] { --pc-hue: #5DD5FB; --pc-ink: #8CE0FC; }
[data-theme="dark"] .pc [data-letter="H"] { --pc-hue: #93A9F5; --pc-ink: #B2C2F8; }
[data-theme="dark"] .pc [data-letter="R"] { --pc-hue: #2F8FE0; --pc-ink: #6BB4EC; }
[data-theme="dark"] .pc [data-letter="I"] { --pc-hue: #FFC85C; --pc-ink: #FFD98A; }
[data-theme="dark"] .pc [data-letter="V"] { --pc-hue: #FF8F45; --pc-ink: #FFAA75; }
[data-theme="dark"] .pc [data-letter="E"] { --pc-hue: #FF7043; --pc-ink: #FF9270; }

/* .boxed_wrapper (style.css) sets overflow:hidden !important, which makes it
   a scroll container and stops position:sticky from ever pinning. `clip`
   contains the same horizontal overflow without creating a scrollport, and
   leaving overflow-y visible keeps the sticky rail anchored to the viewport.
   Scoped: this stylesheet only loads on the People & Culture page. */
.boxed_wrapper {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Shared -------------------------------------------------------------- */
.pc__inner {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}

.pc__eyebrow {
  font-family: var(--text-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pc-hero {
  position: relative;
  padding: clamp(7rem, 14vw, 11rem) 0 clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--border-color);
  background: var(--background-primary);
}

/* Faint ruled ground - a document, not a poster */
.pc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border-color) 1px, transparent 1px);
  background-size: 100% 3.25rem;
  opacity: 0.4;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  pointer-events: none;
}

.pc-hero__inner { position: relative; }

.pc-hero__eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* The wordmark */
.pc-word {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: clamp(0.1rem, 0.9vw, 0.7rem);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(3.6rem, 15.5vw, 12rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
}

.pc-word__letter {
  color: var(--pc-hue);
  display: inline-block;
  transition: transform var(--transition-base);
}

/* Letters arrive one at a time */
.pc-word--animate .pc-word__letter {
  opacity: 0;
  transform: translateY(0.32em);
  animation: pc-letter-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.pc-word--animate .pc-word__letter:nth-child(1) { animation-delay: 0.05s; }
.pc-word--animate .pc-word__letter:nth-child(2) { animation-delay: 0.13s; }
.pc-word--animate .pc-word__letter:nth-child(3) { animation-delay: 0.21s; }
.pc-word--animate .pc-word__letter:nth-child(4) { animation-delay: 0.29s; }
.pc-word--animate .pc-word__letter:nth-child(5) { animation-delay: 0.37s; }
.pc-word--animate .pc-word__letter:nth-child(6) { animation-delay: 0.45s; }

@keyframes pc-letter-in {
  to { opacity: 1; transform: translateY(0); }
}

.pc-hero__lede {
  max-width: 42ch;
  text-wrap: balance;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  font-family: var(--title-font);
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}

.pc-hero__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.75rem);
  max-width: 60rem;
}

.pc-hero__intro p {
  margin: 0;
  font-family: var(--text-font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.pc-hero__intro strong {
  color: var(--hrv-orange);
  font-weight: 600;
}

/* ── Values ───────────────────────────────────────────────────────────── */
.pc-values {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
}

.pc-values__layout {
  display: grid;
  grid-template-columns: var(--pc-rail-w) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}

/* The rail - acronym doubling as scroll position */
.pc-rail {
  position: sticky;
  top: 7.5rem;
  align-self: start;
  height: max-content;
}

.pc-rail__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* The window that rides down the acronym as you scroll */
.pc-rail__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pc-hue, #EF721F) 13%, transparent);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1),
              width .55s cubic-bezier(.16, 1, .3, 1),
              height .55s cubic-bezier(.16, 1, .3, 1),
              background-color .4s ease,
              opacity .3s ease;
}
.pc-rail__marker.is-ready { opacity: 1; }

.pc-rail__item {
  position: relative;
  z-index: 1;
}

.pc-rail__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.28rem 0;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.1vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-muted);
  opacity: 0.28;
  text-decoration: none;
  transition: opacity .4s ease, color .4s ease,
              transform .55s cubic-bezier(.16, 1, .3, 1);
}

.pc-rail__link::after {
  content: '';
  width: 0;
  height: 2px;
  background: var(--pc-hue);
  transition: width var(--transition-base);
}

.pc-rail__item.is-active .pc-rail__link {
  color: var(--pc-hue);
  opacity: 1;
  transform: translateX(8px);
}
.pc-rail__item.is-active .pc-rail__link::after { width: 1.5rem; }

.pc-rail__link:hover,
.pc-rail__link:focus-visible { opacity: 1; color: var(--pc-hue); }

/* Each value rolls into place as it enters - gated on .pc--js so the copy is
   never stranded invisible if the script does not run. */
.pc--js .pc-value__body {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.pc--js .pc-value.is-visible .pc-value__body {
  opacity: 1;
  transform: none;
}

/* Value blocks - letter and name hold the left column, argument the right */
.pc-value {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--border-color);
  /* clear the sticky header when a rail link jumps to a section */
  scroll-margin-top: 8rem;
}
.pc-value:first-child { border-top: 0; padding-top: 0; }

.pc-value__body {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.pc-value__id { position: relative; }

.pc-value__name {
  margin: 0;
  font-family: var(--title-font);
  font-size: clamp(1.4rem, 2.7vw, 1.95rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
}

.pc-value__maxim {
  max-width: 46ch;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.85rem);
  padding-left: 1rem;
  border-left: 3px solid var(--pc-hue);
  font-family: var(--text-font);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--pc-ink);
}

.pc-value__copy { max-width: var(--pc-measure); }

.pc-value__copy p {
  margin: 0 0 1rem;
  font-family: var(--text-font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.pc-value__copy p:last-child { margin-bottom: 0; }

.pc-value__copy strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* The single takeaway line each value ends on */
.pc-value__rule {
  display: inline-block;
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  padding: 0.7rem 1.1rem;
  border-radius: var(--border-radius-xl);
  background: color-mix(in srgb, var(--pc-hue) 11%, transparent);
  font-family: var(--text-font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pc-ink);
}

/* ── In real life ─────────────────────────────────────────────────────── */
.pc-real {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--border-color);
  background: var(--background-secondary);
}

.pc-real__head {
  max-width: 40ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.pc-real__title {
  margin: 0.75rem 0 0;
  font-family: var(--title-font);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
}

.pc-real__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 58rem;
}

.pc-real__item {
  padding: clamp(0.85rem, 1.8vw, 1.15rem) 0;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--text-font);
  font-size: clamp(0.98rem, 1.9vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-muted);
}

/* Stagger the run so the repetition reads as rhythm, not a list */
.pc-real__item:nth-child(even) { padding-left: clamp(0.75rem, 3vw, 2.75rem); }

.pc-real__item b {
  color: var(--text-primary);
  font-weight: 600;
}

/* The punchline gets its own room */
.pc-real__coffee {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 2px solid var(--hrv-orange);
  max-width: 34rem;
}

.pc-real__coffee p {
  margin: 0 0 0.4rem;
  font-family: var(--text-font);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.pc-real__coffee-note {
  font-family: var(--text-font);
  font-size: clamp(1.02rem, 2.1vw, 1.2rem);
  font-style: italic;
  font-weight: 600;
  color: var(--hrv-orange);
}

/* ── Close ────────────────────────────────────────────────────────────── */
.pc-close {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--border-color);
  background: var(--background-primary);
}

.pc-close__title {
  margin: 0.9rem 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--title-font);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.pc-close__copy {
  max-width: var(--pc-measure);
}

.pc-close__copy p {
  margin: 0 0 1rem;
  font-family: var(--text-font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.pc-close__copy strong { color: var(--text-primary); font-weight: 600; }

.pc-close__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.pc-close__signoff {
  font-family: var(--title-font);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hrv-orange);
  margin: 0;
}

.pc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border-radius: 100px;
  background: var(--hrv-orange);
  color: #fff;
  font-family: var(--text-font);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.pc-btn:hover,
.pc-btn:focus-visible {
  background: var(--hrv-orange-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(239, 114, 31, 0.6);
}

.pc-btn__arrow { transition: transform var(--transition-base); }
.pc-btn:hover .pc-btn__arrow { transform: translateX(3px); }

/* ── Accessibility ────────────────────────────────────────────────────── */
.pc a:focus-visible,
.pc-btn:focus-visible {
  outline: 2px solid var(--hrv-orange);
  outline-offset: 3px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .pc-values__layout { grid-template-columns: 1fr; }

  /* Rail becomes a horizontal strip under the sticky header */
  .pc-rail {
    top: 4.5rem;
    z-index: 5;
    margin-bottom: 1.5rem;
    padding: 0.6rem 0;
    background: var(--background-primary);
    border-bottom: 1px solid var(--border-color);
  }
  .pc-rail__list { flex-direction: row; gap: 0.9rem; }
  .pc-rail__link { font-size: 1.5rem; opacity: 0.32; }
  .pc-rail__item.is-active .pc-rail__link { transform: translateY(-2px); }
  .pc-rail__marker { border-radius: 9px; }
  .pc-rail__link::after { display: none; }

  .pc-value__body { grid-template-columns: 1fr; gap: 1.1rem; }
}

@media (max-width: 575px) {
  .pc__inner { width: min(100% - 1.75rem, 1180px); }
  .pc-word { letter-spacing: -0.03em; }
  .pc-real__item:nth-child(even) { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-word--animate .pc-word__letter {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .pc--js .pc-value__body,
  .pc--js .pc-value.is-visible .pc-value__body {
    opacity: 1;
    transform: none;
  }
  .pc-rail__item.is-active .pc-rail__link { transform: none; }
  .pc-rail__marker { display: none; }
  .pc *,
  .pc *::before,
  .pc *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}