/* v1.9 extends the user-selected v1.8 draft direction.
   Official identity assets and type remain from the active brand kit. */
:root {
  --v19-lime: var(--v18-lime, #c4f27c);
  --v19-ink: var(--v18-ink, #14140f);
  --v19-muted: var(--v18-muted, #6e6e64);
  --v19-bone: var(--v18-bone, #f5f5eb);
  --v19-line: var(--v18-line, #d2d2c8);
  --v19-charcoal: var(--v18-charcoal, #30302a);
  --v19-blue-pale: #e8f3f7;
  --v19-blue: #83dcff;
  --v19-status-positive: #287a45;
  --v19-status-negative: #b43b34;
  --v19-purple: var(--v18-purple, #c7a0ff);
  --v19-coral: var(--v18-coral, #ff9468);
  --v19-radius: 28px;
  --v19-radius-sm: 18px;
  --v19-shadow: 0 18px 50px rgba(20, 20, 15, .08);
  --v19-control-selected-border: var(--v19-muted);
  --v19-control-marker-border: var(--v19-line);
  --v19-control-selected-shadow: 0 7px 18px rgba(20, 20, 15, .12);
  --v19-type-eyebrow: clamp(15px, 1.15vw, 18px);
}

html { scroll-padding-top: 96px; }
body { overflow-x: hidden; color: var(--v19-ink); }
.zh { line-height: 1.55; }
.zh h1, .zh h2, .zh h3 { letter-spacing: -.035em; line-height: 1.06; }
.header .button { white-space: nowrap; }
.header .button,
.v19-hero .button,
.v19-service-hero .button {
  min-height: 42px;
  padding: 11px 19px;
  border: 0;
  border-radius: 999px;
  background: var(--v19-lime);
  color: var(--v19-ink);
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  transition: transform .18s ease;
}
.header .button:hover,
.v19-hero .button:hover,
.v19-service-hero .button:hover {
  background: var(--v19-lime);
  color: var(--v19-ink);
  transform: scale(1.04);
}
.header-inner { gap: 18px; }
.nav-wrap { min-width: 0; }
.button, button, select { touch-action: manipulation; }
a, button, select { scroll-margin-top: 110px; }

.v19-hero {
  display: block !important;
  min-height: auto;
  padding: clamp(28px, 3vw, 44px) 0 60px;
  background: var(--v19-bone);
  --route-travel: 0px;
}
.v19-hero::after, .v19-service-hero::after { display: none; }
.v19-hero .hero-copy { max-width: 1000px; text-align: center; }
.v19-service-hero h1 {
  margin: 19px auto 27px;
  max-width: 1000px;
  font-size: clamp(64px, 7.4vw, 108px);
  line-height: .91;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.v19-hero h1 {
  margin: 19px auto 27px;
  max-width: 1000px;
  font-size: clamp(51.2px, 5.92vw, 86.4px);
  line-height: .96;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.v19-hero .lede, .v19-service-hero .lede { max-width: 730px; margin-inline: auto; }
.hero-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; }
.page-home .v19-hero .hero-actions .text-link { color: var(--v19-ink); }
.hero-collage {
  position: relative;
  display: block;
  height: clamp(390px, 31vw, 445px);
  margin-top: 48px;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}
.hero-collage::before { content: ""; position: absolute; width: 240px; height: 240px; left: 52%; top: 3%; border-radius: 50%; background: color-mix(in srgb, var(--yellow) 16%, transparent); filter: blur(24px); z-index: -1; }
.hero-collage-photo { position: absolute; height: clamp(245px, 21vw, 300px); margin: 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 0 16px 42px rgba(32,55,47,.12); }
.hero-collage-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-collage-photo--call { left: 0; top: 18%; width: 28%; z-index: 1; animation: hero-float-a 7.4s ease-in-out -1.1s infinite alternate; }
.hero-collage-photo--call img { object-position: 48% 48%; }
.hero-collage-photo--video { right: 0; bottom: 3%; width: 28%; z-index: 1; animation: hero-float-b 6.8s ease-in-out -3.2s infinite alternate; }
.hero-collage-photo--video img { object-position: 50% 48%; transform: scaleX(-1); }
.hero-insight-card { position: absolute; min-width: 0; min-height: 0; padding: 21px; border: 1px solid var(--ink); border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: 9px 9px 0 color-mix(in srgb, var(--blue-light) 72%, transparent); text-align: left; }
.hero-outcome-card { top: 1%; right: 20%; width: 21%; z-index: 5; animation: hero-float-b 6.2s ease-in-out -2.4s infinite alternate; }
.insight-kicker { display: inline-flex; margin: 0 0 14px; padding: 7px 11px; border-radius: 7px; background: var(--blue-light); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.hero-outcome-card > strong { display: block; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.12; letter-spacing: -.035em; }
.hero-outcome-card ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; line-height: 1.4; }
.hero-outcome-card li { position: relative; padding-left: 25px; }
.hero-outcome-card li::before { content: ""; position: absolute; left: 1px; top: .15em; width: 14px; height: 8px; border-left: 2px solid var(--blue-deep); border-bottom: 2px solid var(--blue-deep); transform: rotate(-45deg); }
.hero-recruitment-card { left: 29%; bottom: 0; width: 32%; z-index: 4; padding: 18px; animation: hero-float-a 7.8s ease-in-out -4.1s infinite alternate; }
.founder-message { display: flex; align-items: flex-start; gap: 9px; }
.message-avatar { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--v19-ink); color: #fff; font-size: 11px; font-weight: 800; }
.founder-message p { position: relative; margin: 0; padding: 10px 12px; border-radius: 5px 14px 14px 14px; background: var(--v19-bone); font-size: 13px; font-weight: 700; line-height: 1.35; }
.recruitment-reply { margin: 12px 0 0 35px; padding: 13px; border-radius: 14px 5px 14px 14px; background: var(--v19-blue-pale); }
.role-brief-status { display: flex; align-items: center; gap: 10px; }
.role-brief-status svg { flex: 0 0 28px; width: 28px; height: 28px; padding: 5px; border-radius: 7px; background: #fff; fill: none; stroke: var(--blue-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.role-brief-status span { display: grid; line-height: 1.2; }
.role-brief-status strong { font-size: 12px; }
.role-brief-status small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.recruitment-signals { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.recruitment-signals li { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.recruitment-signals i { position: relative; display: block; width: var(--signal-width); height: 8px; overflow: hidden; border-radius: 99px; background: var(--blue-light); }
.recruitment-signals i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--yellow), var(--blue), var(--blue-deep)); opacity: .7; }
@keyframes hero-float-a { from { transform: translate3d(0, -4px, 0); } to { transform: translate3d(0, 7px, 0); } }
@keyframes hero-float-b { from { transform: translate3d(0, 5px, 0); } to { transform: translate3d(0, -6px, 0); } }

.eyebrow { font-size: var(--v19-type-eyebrow); line-height: 1.35; }
.section-head { width: 100%; max-width: 1180px; margin-inline: auto; text-align: center; }
.section-head h2 { max-width: none; margin-inline: auto; text-align: center; text-wrap: balance; }
.section-head .lede { max-width: 780px; margin: 22px auto 0; text-align: center; text-wrap: pretty; }
.matched-section-heading { font-size: clamp(36px, 4.3vw, 56px); }
.zh .matched-section-heading { font-size: clamp(32px, 4vw, 50px); }
.section-head--left,
.section-head--left h2 { text-align: left; }
[data-lang="en"] { hyphens: none; word-break: normal; }
.pain-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
.pain-paths a { position: relative; min-height: 0; padding: 26px; border: 1px solid var(--v19-line); border-radius: var(--v19-radius); color: var(--v19-ink); text-decoration: none; background: #fff; display: flex; flex-direction: column; gap: 18px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.pain-paths a:hover, .pain-paths a:focus-visible { transform: translateY(-5px); box-shadow: var(--v19-shadow); background: var(--v19-lime); }
.card-index { width: 46px; height: 46px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.pain-visual { flex: 0 0 180px; height: 180px; margin: 0 0 4px; overflow: hidden; display: grid; place-items: center; }
.pain-visual img { width: min(100%, 188px); height: 188px; object-fit: contain; }
.pain-paths strong { margin-top: 0; font-size: clamp(25px, 2.4vw, 34px); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; }
.pain-description { color: var(--v19-muted); line-height: 1.4; }
.pain-description ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pain-description li { position: relative; padding-left: 18px; }
.pain-description li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-deep); transform: translateY(-50%); }
.pain-outcome { display: grid; align-content: start; gap: 6px; min-height: 112px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--v19-line); }
.pain-outcome small { color: var(--blue-deep); font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.pain-outcome b { font-size: 20px; line-height: 1.2; letter-spacing: -.025em; }

.value-section { background: #fff; }
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; margin-top: 0; }
.value-card { min-width: 0; min-height: 620px; display: flex; border-radius: var(--v19-radius); perspective: 1400px; }
.value-card-inner { flex: 1; display: grid; min-height: inherit; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.22,.8,.2,1); }
.value-card.is-flipped .value-card-inner { transform: rotateY(180deg); }
.value-card-face { position: relative; grid-area: 1 / 1; min-width: 0; min-height: inherit; height: 100%; box-sizing: border-box; padding: 26px; border: 1px solid color-mix(in srgb, var(--v19-line) 82%, transparent); border-radius: var(--v19-radius); display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.value-card-front { background: var(--v19-bone); }
.value-card:nth-child(2) .value-card-front { background: #f0e9ff; }
.value-card:nth-child(3) .value-card-front { background: #e7f5fa; }
.value-card-back { justify-content: center; padding-bottom: 74px; transform: rotateY(180deg); background: var(--v19-ink); color: #fff; }
.value-card h3, .value-card-risk { margin: 0 0 16px; font-size: clamp(25px, 2.4vw, 34px); font-weight: 700; line-height: 1.05; letter-spacing: -.045em; }
.value-card .value-card-label { margin: 0 0 16px; color: var(--blue-deep); font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.value-card-visual { position: relative; width: 100%; height: 180px; min-height: 0; flex: 0 0 180px; margin: 0 auto 22px; overflow: visible; display: grid; place-items: center; }
.value-card-visual img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: saturate(.96) contrast(1.01); }
.value-card-front > p:not(.value-card-label) { color: var(--v19-muted); font-size: 16px; line-height: 1.45; }
.value-card .text-link { align-self: flex-start; margin-top: auto; padding-top: 22px; padding-right: 54px; color: var(--v19-ink); }
.value-card .text-link { width: fit-content; max-width: 100%; padding-right: 0; justify-content: flex-start; gap: 8px; }
.value-card .text-link::after { flex: 0 0 auto; margin-left: 0; }
.value-card-back .value-card-label { margin-bottom: 32px; color: var(--v19-lime); }
.value-card-back .value-card-risk { color: #fff; }
.value-card-back > p:not(.value-card-label):not(.value-card-risk) { color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.45; }
.value-flip-toggle { position: absolute; right: 22px; bottom: 22px; width: 44px; height: 44px; padding: 6px; border: 0; border-radius: 10px; display: grid; place-items: center; background: transparent; color: var(--v19-ink); cursor: pointer; transition: transform .18s ease, background-color .18s ease; }
.value-flip-toggle svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.value-flip-toggle::after { content: attr(data-label-en); position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: 150px; padding: 6px 9px; border-radius: 7px; background: var(--v19-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
.zh .value-flip-toggle::after { content: attr(data-label-zh); }
.value-flip-toggle:hover, .value-flip-toggle:focus-visible { transform: translateX(2px); background: color-mix(in srgb, var(--v19-blue-pale) 84%, transparent); }
.value-flip-toggle:hover::after, .value-flip-toggle:focus-visible::after { opacity: 1; transform: none; }
.value-card-back .value-flip-toggle { background: transparent; color: #fff; }
.value-card-back .value-flip-toggle:hover, .value-card-back .value-flip-toggle:focus-visible { background: rgba(255,255,255,.18); }
.value-card:focus-within .value-card-face { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--v19-ink) 18%, transparent); }
.value-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 42px; }
.gain-panel, .cost-panel { padding: clamp(28px, 4vw, 50px); border-radius: var(--v19-radius); }
.gain-panel { background: var(--v19-blue-pale); }
.cost-panel { background: var(--v19-bone); border: 1px solid var(--v19-line); }
.panel-label { margin: 0 0 30px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.value-pair h3 { margin: 0 0 18px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.02; letter-spacing: -.05em; }
.value-pair article > p:last-child { color: var(--v19-muted); font-size: 17px; line-height: 1.55; }
.evidence-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 26px; border: 1px solid var(--v19-line); border-radius: 0 0 var(--v19-radius-sm) var(--v19-radius-sm); background: #fff; }
.evidence-row span { color: var(--v19-muted); }

.integrated-section { background: var(--v19-charcoal); color: #fff; }
.retainer-workflow { padding: clamp(30px, 5vw, 64px); border-radius: var(--v19-radius); background: #fff; color: var(--v19-ink); }
.retainer-workflow-head { max-width: 820px; margin: 0 auto; text-align: center; }
.retainer-workflow-head .eyebrow { color: var(--blue-deep); }
.retainer-workflow-head h2 { margin: 0 0 18px; font-size: clamp(16px, 4.3vw, 56px); line-height: .96; letter-spacing: -.058em; }
.retainer-heading-line { display: block; white-space: nowrap; }
.retainer-workflow-head > p:last-child { max-width: 720px; margin: 0 auto; color: var(--v19-muted); font-size: 17px; line-height: 1.55; }
.service-flow-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--v19-line); }
.service-flow-toolbar > p { margin: 0; color: var(--v19-muted); font-size: 14px; }
.service-flow-toggle { min-height: 44px; padding: 8px 14px; border: 1px solid var(--v19-line); border-radius: 99px; display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--v19-ink); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.service-flow-toggle:hover { background: var(--v19-bone); }
.retainer-workflow.is-static .service-flow-toggle { display: none; }
[data-service-flow-icon] { min-width: 12px; font-size: 12px; text-align: center; }
.service-flow-layout { display: grid; gap: 18px; margin-top: 20px; }
.service-flow-tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.service-flow-tabs::before { content: ''; position: absolute; left: 6%; right: 6%; top: 28px; z-index: 0; height: 2px; background: var(--v19-line); }
.service-flow-tab { position: relative; z-index: 1; width: 100%; min-height: 80px; padding: 12px 14px; border: 1px solid var(--v19-line); border-radius: 16px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; overflow: hidden; background: #fff; color: var(--v19-ink); font: inherit; text-align: left; cursor: pointer; transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease; }
.service-flow-tab:hover { border-color: var(--v19-ink); }
.service-flow-tab:focus-visible { outline: 3px solid var(--v19-ink); outline-offset: 3px; }
.service-flow-tab.is-active { border-color: var(--v19-ink); background: var(--v19-blue-pale); box-shadow: inset 0 -4px 0 var(--blue-deep); transform: translateY(-3px); }
.service-step-number { width: 28px; height: 28px; border: 1.5px solid var(--v19-ink); border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 10px; font-weight: 800; transition: background .24s ease, color .24s ease; }
.service-flow-tab.is-active .service-step-number { background: var(--v19-ink); color: #fff; }
.service-step-copy { min-width: 0; display: block; }
.service-step-copy strong { display: block; overflow: visible; font-size: 15px; line-height: 1.22; letter-spacing: -.02em; white-space: normal; }
.service-step-progress { position: absolute; inset: 0; z-index: 1; height: auto; overflow: visible; border-radius: inherit; background: none; pointer-events: none; }
.service-step-progress::before, .service-step-progress::after, .service-step-progress i::before, .service-step-progress i::after { content: ''; position: absolute; display: block; background: var(--blue-deep); }
.service-step-progress::before { left: 0; top: 0; width: 100%; height: 4px; border-radius: 16px 16px 0 0; transform: scaleX(0); transform-origin: left center; }
.service-step-progress::after { right: 0; top: 0; width: 4px; height: 100%; border-radius: 0 16px 16px 0; transform: scaleY(0); transform-origin: center top; }
.service-step-progress i { position: absolute; inset: 0; display: block; background: none; }
.service-step-progress i::before { right: 0; bottom: 0; width: 100%; height: 4px; border-radius: 0 0 16px 16px; transform: scaleX(0); transform-origin: right center; }
.service-step-progress i::after { left: 0; bottom: 0; width: 4px; height: 100%; border-radius: 16px 0 0 16px; transform: scaleY(0); transform-origin: center bottom; }
.service-flow-tab.is-cycling .service-step-progress::before { animation: service-edge-top 7s linear both; }
.service-flow-tab.is-cycling .service-step-progress::after { animation: service-edge-right 7s linear both; }
.service-flow-tab.is-cycling .service-step-progress i::before { animation: service-edge-bottom 7s linear both; }
.service-flow-tab.is-cycling .service-step-progress i::after { animation: service-edge-left 7s linear both; }
@keyframes service-edge-top { 0% { transform: scaleX(0); } 25%, 100% { transform: scaleX(1); } }
@keyframes service-edge-right { 0%, 25% { transform: scaleY(0); } 50%, 100% { transform: scaleY(1); } }
@keyframes service-edge-bottom { 0%, 50% { transform: scaleX(0); } 75%, 100% { transform: scaleX(1); } }
@keyframes service-edge-left { 0%, 75% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.service-flow-stage { min-width: 0; min-height: 590px; border: 1px solid var(--v19-line); border-radius: var(--v19-radius); overflow: hidden; background: var(--v19-bone); }
.service-visual-panel { min-height: 590px; padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; background: var(--v19-bone); }
.service-visual-panel[hidden] { display: none; }
.service-visual-panel.is-active { animation: service-panel-enter .36s ease-out both; }
@keyframes service-panel-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.service-visual-feedback { background: var(--paper); }
.service-visual-review { background: var(--beige); }
.service-visual-salary { background: var(--blue-light); }
.service-visual-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--v19-muted); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.service-visual-header b { display: inline-flex; align-items: center; gap: 7px; color: var(--v19-ink); font-size: 11px; letter-spacing: 0; text-transform: none; }
.service-visual-header b i { width: 8px; height: 8px; border-radius: 50%; background: var(--v19-lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v19-lime) 25%, transparent); }
.service-visual-panel h3,
.service-visual-panel .recruitment-convo-heading { width: 100%; max-width: none; margin: 0 0 12px; font-size: clamp(25px, 2.3vw, 32px); line-height: 1.08; letter-spacing: -.04em; }
.journey-panel-intro { width: 100%; max-width: none; margin-bottom: 28px; }
.journey-panel-intro > p { width: 100%; max-width: none; margin: 0; color: var(--v19-muted); font-size: 16px; line-height: 1.55; }
.client-thread { display: grid; gap: 16px; }
.thread-message { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.thread-avatar { width: 40px; height: 40px; overflow: hidden; border-radius: 50%; display: grid; place-items: center; }
.thread-avatar-person { background: var(--v19-lime); }
.thread-avatar-person svg { width: 30px; height: 30px; fill: var(--v19-ink); stroke: var(--v19-ink); stroke-width: 2; stroke-linecap: round; }
.thread-avatar-brand { border: 1px solid var(--v19-line); background: var(--v19-blue-pale); }
.thread-avatar-brand img { width: 31px; height: 31px; display: block; }
.thread-content { min-width: 0; }
.thread-meta { display: flex; align-items: baseline; gap: 7px; }
.thread-meta strong { font-size: 14px; line-height: 1.25; }
.thread-meta > span { color: var(--v19-muted); font-size: 11px; }
.thread-message p { margin: 3px 0 0; color: var(--v19-ink); font-size: 13px; font-weight: 650; line-height: 1.4; }
.weekly-update-card { width: min(720px, calc(100% - 52px)); margin: 18px 0 0 52px; padding: 16px; border: 1px solid var(--v19-line); border-radius: 16px; background: #fff; }
.weekly-update-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.weekly-update-head strong { font-size: 17px; line-height: 1.2; }
.weekly-update-head time { color: var(--v19-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.weekly-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.weekly-metrics > div { min-width: 0; padding: 10px; border-radius: 10px; background: var(--v19-bone); }
.weekly-metrics > div > span { display: block; color: var(--blue-deep); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.weekly-metrics small { display: block; margin-top: 2px; color: var(--v19-muted); font-size: 9px; line-height: 1.25; }
.weekly-details { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.role-status-list { display: grid; gap: 10px; }
.role-status-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(92px, .8fr); align-items: center; gap: 14px; font-size: 10px; }
.role-status-list > div > span { color: var(--v19-muted); font-weight: 700; }
.role-status-list .role-status { justify-self: start; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; color: var(--v19-ink); font-size: 10px; line-height: 1.2; text-align: left; }
.role-status--interviewing { border-color: color-mix(in srgb, var(--v19-status-positive) 24%, transparent); background: color-mix(in srgb, var(--v19-lime) 48%, #fff); }
.role-status--sourcing { border-color: color-mix(in srgb, var(--v19-purple) 54%, transparent); background: color-mix(in srgb, var(--v19-purple) 34%, #fff); }
.role-status--alignment { border-color: color-mix(in srgb, var(--v19-coral) 50%, transparent); background: color-mix(in srgb, var(--v19-coral) 28%, #fff); }
.weekly-insight { display: grid; gap: 12px; }
.weekly-insight > div { min-width: 0; }
.weekly-insight strong { display: block; color: var(--v19-ink); font-size: 11px; }
.weekly-insight p { margin: 4px 0 0; color: var(--v19-muted); font-size: 10px; line-height: 1.4; }
.journey-artifact { margin-top: auto; padding: clamp(20px, 2.7vw, 32px); border: 1px solid var(--v19-line); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 16px 36px rgba(32,55,47,.07); }
.artifact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--v19-line); }
.artifact-head > div { display: grid; gap: 4px; }
.artifact-head strong { font-size: 18px; line-height: 1.25; }
.artifact-head small { color: var(--v19-muted); font-size: 12px; line-height: 1.4; }
.artifact-status { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: var(--v19-blue-pale); color: var(--blue-deep); font-size: 11px; font-weight: 800; }
.im-thread-artifact { width: min(860px, 100%); margin-inline: auto; padding: 0; overflow: hidden; background: #fff; }
.im-thread-head { min-height: 68px; padding: 12px 18px; border-bottom: 1px solid var(--v19-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb, var(--v19-blue-pale) 55%, #fff); }
.im-thread-head > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.im-thread-head > div > span:last-child { min-width: 0; display: grid; gap: 2px; }
.im-thread-head strong { font-size: 14px; line-height: 1.2; }
.im-thread-head small { color: var(--v19-muted); font-size: 10px; line-height: 1.3; }
.im-thread-back { color: var(--v19-muted); font-size: 28px; line-height: 1; }
.im-platforms { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; }
.im-platforms img { width: 22px; height: 22px; display: block; object-fit: contain; }
.im-thread-body { display: grid; gap: 18px; padding: 20px; }
.im-message { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-items: start; }
.im-message > div { min-width: 0; }
.im-message p { margin: 5px 0 0; color: var(--v19-ink); font-size: 13px; line-height: 1.45; }
.im-app-label { padding: 2px 6px; border-radius: 999px; background: var(--v19-line); color: var(--v19-muted) !important; font-size: 9px !important; font-weight: 800; line-height: 1.1; }
.work-context-card { margin-top: 12px; padding: 16px; border-left: 4px solid var(--blue-deep); border-radius: 0 13px 13px 0; background: color-mix(in srgb, var(--v19-line) 18%, #fff); }
.okr-draft-head { display: grid; gap: 4px; }
.okr-draft-head > span { color: var(--v19-ink); font-size: 16px; font-weight: 800; line-height: 1.25; }
.okr-draft-head > small { color: var(--v19-muted); font-size: 10px; }
.okr-progress-list { display: grid; gap: 11px; margin-top: 16px; }
.okr-progress-list > div > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.okr-progress-list strong { font-size: 12px; line-height: 1.3; }
.okr-progress-list span { color: var(--v19-muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.okr-progress-list i { position: relative; display: block; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--v19-line) 62%, #fff); }
.okr-progress-list i::after { content: ''; position: absolute; inset: 0; width: var(--okr-progress); border-radius: inherit; background: var(--blue-deep); }
.work-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.work-signal-grid > div { min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--v19-line) 74%, #fff); border-radius: 10px; background: rgba(255,255,255,.86); }
.work-signal-grid span { display: block; color: var(--v19-muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.work-signal-grid strong { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; }
.work-signal-win { box-shadow: inset 0 3px 0 var(--blue-deep); }
.work-signal-support { box-shadow: inset 0 3px 0 var(--yellow); }
.work-signal-risk { box-shadow: inset 0 3px 0 var(--v19-coral); }
.work-context-label { color: var(--blue-deep); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.work-context-card > strong { display: block; max-width: 620px; margin-top: 7px; font-size: 15px; line-height: 1.35; }
.work-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.work-evidence-grid > div { min-width: 0; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.85); }
.work-evidence-grid b { display: block; color: var(--blue-deep); font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.work-evidence-grid span { display: block; margin-top: 3px; color: var(--v19-muted); font-size: 9px; line-height: 1.25; }
.work-context-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.work-context-sources > span { padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--blue-deep) 26%, var(--v19-line)); border-radius: 999px; background: #fff; color: var(--v19-muted); font-size: 9px; font-weight: 700; }
.im-person-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--v19-lime); color: var(--v19-ink); font-size: 12px; font-weight: 800; }
.im-message-person { margin-left: 0; padding: 0; border-radius: 0; background: transparent; }
.im-message-followup { padding-top: 16px; border-top: 1px solid var(--v19-line); }
.agenda-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.agenda-list li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--v19-line); }
.agenda-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.agenda-list li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--v19-ink); color: #fff; font-size: 10px; font-weight: 800; }
.agenda-list div { display: grid; gap: 3px; }
.agenda-list strong { font-size: 14px; }
.agenda-list small { color: var(--v19-muted); font-size: 12px; line-height: 1.4; }
.review-score { padding: 22px 0; }
.review-score > span { color: var(--v19-muted); font-size: 12px; font-weight: 750; }
.review-score > strong { display: block; margin-top: 5px; color: var(--blue-deep); font-size: clamp(25px, 3vw, 38px); letter-spacing: -.04em; }
.review-score p { max-width: 650px; margin: 10px 0 0; color: var(--v19-muted); font-size: 14px; line-height: 1.5; }
.evidence-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.evidence-chips > span { min-width: 0; padding: 13px; border-radius: 12px; display: grid; gap: 2px; background: var(--v19-bone); color: var(--v19-muted); font-size: 11px; line-height: 1.3; }
.evidence-chips b { color: var(--blue-deep); font-size: 22px; }
.salary-context { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 22px 0; }
.salary-context > div { min-width: 0; padding: 14px; border-radius: 14px; background: var(--v19-bone); }
.salary-context span { display: block; color: var(--v19-muted); font-size: 11px; }
.salary-context strong { display: block; margin-top: 5px; font-size: 14px; line-height: 1.25; }
.recommendation-row { display: grid; grid-template-columns: minmax(165px, .4fr) 1fr; gap: 20px; align-items: center; padding-top: 18px; border-top: 1px solid var(--v19-line); }
.recommendation-row > div > span { display: block; color: var(--v19-muted); font-size: 11px; }
.recommendation-row > div > strong { display: block; margin-top: 3px; color: var(--blue-deep); font-size: 31px; letter-spacing: -.04em; }
.recommendation-row p { margin: 0; color: var(--v19-muted); font-size: 13px; line-height: 1.5; }
@media (min-width: 900px) {
  .recommendation-row { grid-template-columns: minmax(130px, .24fr) minmax(0, 1fr); gap: 16px; }
  .recommendation-row p { font-size: 12px; white-space: nowrap; }
}
.performance-cycle { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr; gap: 8px; align-items: center; }
.performance-cycle > span { min-height: 120px; padding: 18px 14px; border: 1px solid var(--v19-line); border-radius: 15px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; }
.performance-cycle i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--v19-ink); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.performance-cycle b { margin-top: 20px; font-size: 14px; line-height: 1.25; }
.performance-cycle em { color: var(--blue-deep); font-size: 19px; font-style: normal; text-align: center; }
.performance-cycle { grid-template-columns: 1fr 20px 1fr 20px 1fr; }
.performance-cycle > span { min-height: 144px; }
.performance-cycle small { margin-top: 8px; color: var(--v19-muted); font-size: 12px; line-height: 1.35; }
.people-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.people-plan-grid > div { min-height: 150px; padding: 20px; border: 1px solid color-mix(in srgb, var(--blue-deep) 28%, var(--v19-line)); border-radius: 15px; display: flex; flex-direction: column; background: #fff; }
.people-plan-grid > div > span { color: var(--blue-deep); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.people-plan-grid strong { margin-top: auto; font-size: 16px; line-height: 1.35; }
.service-visual-note { margin-top: auto; padding-top: 24px; display: grid; grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr); gap: 20px; border-top: 1px solid var(--v19-line); }
.service-visual-note strong { font-size: 14px; }
.service-visual-note > span { color: var(--v19-muted); font-size: 14px; line-height: 1.5; }
.scope-note { margin: 30px auto 0; max-width: 900px; color: inherit; opacity: .72; text-align: center; font-size: 14px; }

.comparison-section { background: var(--v19-bone); }
.matrix-shell { position: relative; margin-top: 48px; border: 1px solid var(--v19-line); border-radius: var(--v19-radius); background: #fff; overflow: hidden; }
.table-wrap { overflow: visible; }
.provider-matrix { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; line-height: 1.35; }
.provider-matrix th, .provider-matrix td { padding: 18px 13px; border-right: 1px solid #deded6; border-bottom: 1px solid #deded6; vertical-align: middle; overflow-wrap: anywhere; }
.provider-matrix tr > *:last-child { border-right: 0; }
.provider-matrix tbody tr:last-child > * { border-bottom: 0; }
.provider-matrix thead th { background: #fff; text-align: center; vertical-align: middle; font-weight: 650; overflow-wrap: normal; word-break: normal; hyphens: none; }
.provider-matrix thead th:first-child { width: 18%; text-align: center; }
.provider-matrix thead strong { display: flex; min-height: 54px; align-items: center; justify-content: center; font-size: 14px; font-weight: 750; line-height: 1.22; }
.provider-matrix thead small { display: block; margin-top: 10px; color: var(--v19-muted); font-size: 11px; line-height: 1.35; font-weight: 500; }
.provider-matrix tbody th { background: #fbfbf7; text-align: left; font-weight: 650; }
.provider-matrix tbody td { text-align: center; color: #4e4e47; }
.provider-matrix .hv-col { background: color-mix(in srgb, var(--v19-lime) 38%, var(--paper)); color: var(--v19-ink); font-weight: 700; }
.provider-matrix thead .hv-col { box-shadow: inset 0 5px 0 var(--v19-lime); }
.provider-matrix .matrix-group th { padding: 13px 18px; background: var(--v19-ink); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.matrix-extra { display: none; }
.matrix-shell.is-expanded .matrix-extra { display: table-row; }
.matrix-toggle { width: 100%; min-height: 60px; border: 0; background: linear-gradient(to bottom, rgba(255,255,255,.86), #fff); color: var(--v19-ink); font: inherit; font-weight: 750; cursor: pointer; }
.matrix-toggle:hover { background: var(--v19-lime); }
.matrix-mobile-controls { display: none; }
.matrix-disclaimer { max-width: 980px; margin: 20px auto 0; color: var(--v19-muted); font-size: 13px; line-height: 1.55; text-align: center; }
.pillar-matrix tbody th { padding: 0; }
.pillar-matrix .pillar-toggle { display: flex; width: 100%; min-height: 72px; padding: 18px 16px; border: 0; align-items: center; justify-content: space-between; gap: 12px; background: transparent; color: var(--v19-ink); font: inherit; font-weight: 750; line-height: 1.35; text-align: left; cursor: pointer; touch-action: manipulation; }
.pillar-matrix .pillar-toggle:hover { background: var(--v19-blue-pale); }
.pillar-matrix .pillar-toggle:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--v19-ink); outline-offset: -3px; }
.pillar-chevron { width: 10px; height: 10px; flex: 0 0 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.pillar-row.is-expanded .pillar-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.pillar-matrix .pillar-cell-summary { display: flex; min-height: 28px; align-items: center; justify-content: center; gap: 6px; color: var(--v19-muted); font-size: 0; line-height: 1; }
.pillar-matrix .pillar-cell-summary::before { content: "✕"; color: var(--v19-status-negative); font-size: 21px; font-weight: 800; line-height: 1; }
.pillar-matrix .pillar-row:nth-child(3) > td:nth-child(2) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(3) > td:nth-child(3) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(4) > td:nth-child(2) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(4) > td:nth-child(4) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(5) > td:nth-child(2) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(6) > td:nth-child(2) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(7) > td:nth-child(2) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(8) > td:nth-child(2) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(8) > td:nth-child(4) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(8) > td:nth-child(5) .pillar-cell-summary::before { content: "✓"; color: var(--v19-status-positive); font-size: 21px; font-weight: 800; }
.pillar-matrix .pillar-row:nth-child(3) > td:nth-child(4) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(3) > td:nth-child(5) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(4) > td:nth-child(3) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(4) > td:nth-child(5) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(5) > td:nth-child(4) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(5) > td:nth-child(5) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(6) > td:nth-child(4) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(6) > td:nth-child(5) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(7) > td:nth-child(4) .pillar-cell-summary::before,
.pillar-matrix .pillar-row:nth-child(7) > td:nth-child(5) .pillar-cell-summary::before { content: "?"; color: var(--v19-muted); font-size: 21px; font-weight: 800; }
.pillar-matrix .pillar-row:nth-child(3) > td:nth-child(4) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(3) > td:nth-child(5) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(4) > td:nth-child(3) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(4) > td:nth-child(5) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(5) > td:nth-child(4) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(5) > td:nth-child(5) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(6) > td:nth-child(4) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(6) > td:nth-child(5) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(7) > td:nth-child(4) .pillar-cell-summary::after,
.pillar-matrix .pillar-row:nth-child(7) > td:nth-child(5) .pillar-cell-summary::after { content: none; }
.zh .pillar-matrix .pillar-cell-summary::after { text-transform: none; }
.zh .pillar-matrix .pillar-row:nth-child(3) > td:nth-child(4) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(3) > td:nth-child(5) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(4) > td:nth-child(3) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(4) > td:nth-child(5) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(5) > td:nth-child(4) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(5) > td:nth-child(5) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(6) > td:nth-child(4) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(6) > td:nth-child(5) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(7) > td:nth-child(4) .pillar-cell-summary::after,
.zh .pillar-matrix .pillar-row:nth-child(7) > td:nth-child(5) .pillar-cell-summary::after { content: none; letter-spacing: 0; }
.pillar-matrix .pillar-cell-detail { display: grid; grid-template-rows: 0fr; margin-top: 0; color: var(--v19-muted); font-size: 12px; line-height: 1.5; opacity: 0; transition: grid-template-rows .24s ease, margin-top .24s ease, opacity .18s ease; }
.pillar-matrix .pillar-cell-detail > span:not([hidden]) { min-height: 0; overflow: hidden; }
.pillar-matrix .pillar-row { position: relative; transform: scale(1); transform-origin: center; transition: transform .22s cubic-bezier(.2,.7,.2,1), filter .22s ease; }
.pillar-matrix .pillar-row.is-expanded > td { padding-top: 24px; padding-bottom: 24px; vertical-align: top; }
.pillar-matrix .pillar-row.is-expanded .pillar-cell-detail { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; }
.pillar-matrix .pillar-row.is-expanded { z-index: 2; transform: scale(1.008); filter: drop-shadow(0 7px 10px rgba(32, 55, 47, .08)); }
.pillar-matrix .pillar-row.is-expanded > * { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v19-ink) 58%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v19-ink) 58%, transparent); }
.pillar-matrix .pillar-row.is-expanded > *:first-child { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--v19-ink) 58%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v19-ink) 58%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v19-ink) 58%, transparent); }
.pillar-matrix .pillar-row.is-expanded > *:last-child { box-shadow: inset -1px 0 0 color-mix(in srgb, var(--v19-ink) 58%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v19-ink) 58%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v19-ink) 58%, transparent); }
.pillar-matrix .pillar-row.is-expanded .pillar-toggle { min-height: 112px; align-items: flex-start; background: transparent; }
.pillar-matrix .pricing-row th { padding: 18px 16px; background: #fbfbf7; color: var(--v19-ink); font-size: 14px; font-weight: 800; }
.pillar-matrix .pricing-row td { padding-top: 20px; padding-bottom: 20px; background: var(--paper); color: var(--v19-ink); font-size: 12px; font-weight: 750; line-height: 1.4; }
.pillar-matrix .pricing-row .hv-col { background: color-mix(in srgb, var(--v19-lime) 38%, var(--paper)); }
.pillar-matrix .pillar-section-row th { padding: 13px 18px; border-right: 0; background: var(--v19-bone); color: var(--v19-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.continuity-section { background: #f0e9ff; }
.hr-hierarchy-head { max-width: 900px; margin: 0 auto; text-align: center; }
.hr-hierarchy-head .lede { margin: 0 auto; }
.continuity-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 45px; }
.continuity-flow span[role="listitem"] { min-height: 56px; padding: 12px 18px; border: 2px solid var(--v19-ink); border-radius: 99px; display: grid; place-items: center; background: #fff; font-weight: 700; text-align: center; }
.continuity-flow i { font-style: normal; font-size: 24px; }
.continuity-note { text-align: center; color: var(--v19-muted); margin-top: 24px; }
.continuity-flow.light span[role="listitem"] { background: transparent; border-color: rgba(255,255,255,.52); color: #fff; }

.offer-section { background: #fff; }
.offer-card { padding: clamp(32px, 5vw, 70px); border-radius: var(--v19-radius); background: var(--v19-lime); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 75px); }
.offer-card h2 { margin: 15px 0 24px; font-size: clamp(48px, 5.5vw, 76px); line-height: .94; letter-spacing: -.06em; }
.offer-card > div:first-child > p:last-child { max-width: 650px; font-size: 18px; }
.offer-terms { align-self: center; border-top: 2px solid var(--v19-ink); }
.offer-terms > div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(20,20,15,.35); }
.offer-terms > div > span { color: rgba(20,20,15,.7); }
.offer-terms strong { text-align: right; }
.offer-card > .scope-note { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid rgba(20,20,15,.35); opacity: .72; }
.verification-note { margin-top: 18px; font-size: 12px; color: rgba(20,20,15,.68); }

.v19-service-hero { padding-top: 110px; }
.v19-service-hero .split-hero-inner { display: block; text-align: center; }
.v19-service-hero .split-hero-copy { max-width: 1000px; margin-inline: auto; }
.v19-service-hero .hero-photo { display: block; width: 100%; height: min(48vw, 640px); margin: 60px auto 0; border-radius: var(--v19-radius); object-fit: cover; }
.four-pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 50px; }
.four-pains article { min-height: 300px; padding: 30px; border-radius: var(--v19-radius); background: #fff; border: 1px solid var(--v19-line); display: flex; flex-direction: column; }
.four-pains article > span { width: 44px; height: 44px; border-radius: 50%; background: var(--v19-ink); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.four-pains h3 { margin: auto 0 14px; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.05em; }
.four-pains p { color: var(--v19-muted); }

.workflow-steps { counter-reset: none; list-style: none; padding: 0; margin: 50px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.workflow-steps li { min-height: 360px; padding: 26px; border-radius: var(--v19-radius); background: var(--v19-bone); display: flex; flex-direction: column; grid-column: span 2; }
.workflow-steps li:nth-child(4) { grid-column: 2 / span 2; }
.workflow-number { width: 48px; height: 48px; border: 2px solid var(--v19-ink); border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.workflow-steps li > div { margin-top: auto; }
.workflow-steps h3 { margin: 40px 0 12px; font-size: 29px; line-height: 1.03; letter-spacing: -.045em; }
.workflow-steps p { color: var(--v19-muted); }
.workflow-steps strong { display: block; padding-top: 15px; border-top: 1px solid var(--v19-line); font-size: 13px; }

.sample-artifact-section { background: var(--v19-charcoal); color: #fff; }
.artifact-intro { max-width: 760px; }
.artifact-intro h2 { margin: 15px 0; font-size: clamp(50px, 6vw, 80px); line-height: .95; letter-spacing: -.06em; }
.artifact-intro > p:last-child { color: rgba(255,255,255,.72); }
.artifact-table-wrap { margin-top: 40px; overflow: hidden; border-radius: var(--v19-radius); }
.artifact-table { width: 100%; border-collapse: collapse; background: #fff; color: var(--v19-ink); }
.artifact-table th, .artifact-table td { padding: 22px; border: 1px solid var(--v19-line); text-align: left; vertical-align: top; }
.artifact-table th { background: var(--v19-lime); font-size: 14px; }
.sample-artifact-section .matrix-disclaimer { color: rgba(255,255,255,.7); }
.weekly-grid, .checkpoint-grid, .collaboration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 45px; }
.weekly-grid article, .checkpoint-grid article, .collaboration-grid article { padding: 28px; border-radius: var(--v19-radius); background: #fff; }
.weekly-grid strong { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.weekly-grid p, .checkpoint-grid p, .collaboration-grid p { color: var(--v19-muted); }
.checkpoint-grid article > span { display: inline-flex; padding: 8px 13px; border: 2px solid var(--v19-ink); border-radius: 99px; font-weight: 750; }
.checkpoint-grid h3, .collaboration-grid h3 { margin: 30px 0 13px; font-size: 29px; line-height: 1.05; }

.pillar-jump { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 45px; }
.pillar-jump a { min-height: 220px; padding: 26px; border-radius: var(--v19-radius); background: #fff; border: 1px solid var(--v19-line); color: var(--v19-ink); text-decoration: none; display: flex; flex-direction: column; transition: transform .2s ease, background .2s ease; }
.pillar-jump a:hover, .pillar-jump a:focus-visible { transform: translateY(-5px); background: var(--v19-lime); }
.pillar-jump > a > span { font-size: 12px; font-weight: 800; }
.pillar-jump strong { margin: auto 0 10px; font-size: 30px; }
.pillar-jump small { color: var(--v19-muted); font-size: 14px; line-height: 1.45; }
.pillar-detail { scroll-margin-top: 80px; }
.pillar-heading { display: grid; grid-template-columns: 80px 1fr; gap: 30px; max-width: 1100px; }
.pillar-number { width: 70px; height: 70px; border: 2px solid var(--v19-ink); border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.pillar-heading h2 { margin: 14px 0 22px; max-width: 1000px; font-size: clamp(54px, 6vw, 84px); line-height: .94; letter-spacing: -.06em; }
.pillar-heading .lede { max-width: 850px; margin: 0; }
.workflow-band { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 45px; padding: 24px; border-radius: var(--v19-radius-sm); background: var(--v19-ink); color: #fff; }
.workflow-band span:not([data-lang]) { padding: 10px 14px; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; font-weight: 650; text-align: center; }
.workflow-band i { font-style: normal; color: var(--v19-lime); }
.workflow-band.compact { margin: 22px 0; background: transparent; color: var(--v19-ink); justify-content: flex-start; padding: 0; }
.workflow-band.compact span:not([data-lang]) { border-color: var(--v19-line); background: #fff; }
.workflow-band.compact i { color: var(--v19-ink); }
.pillar-work { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pillar-work > article { padding: clamp(28px, 4vw, 45px); border-radius: var(--v19-radius); background: var(--v19-bone); }
.surface-paper .pillar-work > article { background: #fff; border: 1px solid var(--v19-line); }
.pillar-work h3 { font-size: 34px; line-height: 1.05; }
.pillar-work ul { padding-left: 20px; color: var(--v19-muted); line-height: 1.6; }
.pillar-work li + li { margin-top: 10px; }
.pillar-work p { color: var(--v19-muted); }
.artifact-mini dl { margin: 22px 0 0; }
.artifact-mini dl div { display: grid; grid-template-columns: 95px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--v19-line); }
.artifact-mini dt { font-weight: 750; }
.artifact-mini dd { margin: 0; color: var(--v19-muted); }
.pillar-compare { margin-top: 16px; padding: 24px 28px; border: 1px solid var(--v19-line); border-radius: var(--v19-radius-sm); background: #fff; display: grid; grid-template-columns: 140px 1fr auto; gap: 22px; align-items: center; }
.pillar-compare p { margin: 0; color: var(--v19-muted); font-size: 14px; }
.pillar-compare a { color: var(--v19-ink); font-weight: 750; }
.tool-flow { margin-top: 16px; padding: clamp(28px, 4vw, 48px); border-radius: var(--v19-radius); background: var(--v19-blue-pale); }
.tool-flow h3 { margin: 12px 0 0; font-size: clamp(32px, 4vw, 50px); line-height: 1; letter-spacing: -.05em; }
.tool-flow > p:last-child { max-width: 850px; color: var(--v19-muted); }

@media (max-width: 1100px) {
  .nav { gap: 15px; }
  .header .button { padding-inline: 14px; }
  .provider-matrix { font-size: 12px; }
  .provider-matrix th, .provider-matrix td { padding: 14px 9px; }
  .pillar-compare { grid-template-columns: 120px 1fr; }
  .pillar-compare a { grid-column: 2; }
}

@media (max-width: 1050px) {
  .hero-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; height: auto; overflow: visible; }
  .hero-collage-photo, .hero-insight-card { position: relative; inset: auto; width: 100%; min-height: 0; animation: none; }
  .hero-collage-photo--call { order: 1; }
  .hero-outcome-card { order: 2; width: 90%; justify-self: end; align-self: start; margin-top: 20px; }
  .hero-recruitment-card { order: 3; width: 94%; justify-self: start; margin-top: -6px; }
  .hero-collage-photo--video { order: 4; width: 96%; justify-self: end; margin-top: 12px; }
}

@media (max-width: 900px) {
  .pain-paths, .value-grid, .pillar-jump, .weekly-grid, .checkpoint-grid, .collaboration-grid { grid-template-columns: 1fr; }
  .pain-paths a, .value-card { min-height: auto; }
  .value-card-inner, .value-card-face { min-height: 560px; }
  .pain-outcome { min-height: auto; }
  .value-pair, .offer-card, .pillar-work, .service-flow-layout { grid-template-columns: 1fr; }
  .service-flow-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-flow-tabs::before { display: none; }
  .service-flow-stage, .service-visual-panel { min-height: 460px; }
  .offer-card > .scope-note { grid-column: auto; }
  .workflow-steps { grid-template-columns: 1fr 1fr; }
  .workflow-steps li, .workflow-steps li:nth-child(4) { grid-column: auto; }
  .workflow-steps li:last-child { grid-column: 1 / -1; }
  .provider-matrix thead th:first-child { width: 24%; }
  .pillar-compare { grid-template-columns: 1fr; }
  .pillar-compare a { grid-column: auto; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .v19-hero { display: block !important; grid-template-columns: 1fr !important; padding: 40px 0 56px; }
  .v19-hero > .container { width: calc(100% - 28px); max-width: none; }
  .v19-service-hero h1 { font-size: 50px; line-height: .95; letter-spacing: -.055em; }
  .v19-hero h1 { font-size: 40px; line-height: 1; letter-spacing: -.045em; }
  .v19-service-hero { padding-top: 76px; }
  .v19-service-hero .hero-photo { margin-top: 38px; height: 68vw; min-height: 280px; }
  .hero-collage { margin-top: 42px; }
  .value-pair { gap: 10px; }
  .gain-panel, .cost-panel { padding: 28px; }
  .evidence-row { grid-template-columns: 1fr; gap: 8px; border-radius: var(--v19-radius-sm); margin-top: 10px; }
  .four-pains { grid-template-columns: 1fr; }
  .four-pains article { min-height: 260px; }
  .workflow-steps { grid-template-columns: 1fr; }
  .workflow-steps li, .workflow-steps li:last-child { grid-column: auto; min-height: 320px; }
  .artifact-table-wrap { overflow-x: auto; }
  .artifact-table { min-width: 720px; }
  .pillar-heading { grid-template-columns: 1fr; gap: 20px; }
  .pillar-heading h2 { font-size: 49px; }
  .pillar-number { width: 58px; height: 58px; }
  .pillar-work { gap: 10px; }
  .offer-card h2 { font-size: 48px; }

  .matrix-shell { overflow: visible; border: 0; background: transparent; }
  .matrix-mobile-controls { display: grid; gap: 9px; margin-bottom: 16px; }
  .matrix-mobile-controls label { font-weight: 750; }
  .matrix-mobile-controls select { width: 100%; min-height: 48px; padding: 10px 42px 10px 13px; border: 2px solid var(--v19-ink); border-radius: 12px; background: #fff; color: var(--v19-ink); font: inherit; }
  .table-wrap { overflow: visible; }
  .provider-matrix, .provider-matrix thead, .provider-matrix tbody, .provider-matrix tr, .provider-matrix th, .provider-matrix td { display: block; width: 100%; }
  .provider-matrix { font-size: 14px; }
  .provider-matrix thead tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .provider-matrix thead th:first-child { display: none; }
  .provider-matrix thead th { min-height: 115px; padding: 18px; border: 1px solid var(--v19-line); border-radius: 16px; text-align: left; }
  .provider-matrix thead th[data-provider] { display: none; }
  .matrix-shell[data-comparator="recruiter"] thead th[data-provider="recruiter"],
  .matrix-shell[data-comparator="inhouse"] thead th[data-provider="inhouse"],
  .matrix-shell[data-comparator="hraas"] thead th[data-provider="hraas"],
  .matrix-shell[data-comparator="founder"] thead th[data-provider="founder"] { display: block; }
  .provider-matrix thead strong { min-height: auto; }
  .provider-matrix thead .hv-col { box-shadow: inset 0 4px 0 var(--v19-lime); }
  .provider-matrix tbody tr { margin-top: 10px; padding: 17px; border: 1px solid var(--v19-line); border-radius: 16px; background: #fff; }
  .provider-matrix tbody tr.matrix-group { padding: 0; border: 0; }
  .provider-matrix tbody tr.matrix-group th { padding: 13px 16px; border-radius: 12px; }
  .provider-matrix tbody th { padding: 0 0 14px; border: 0; background: transparent; font-size: 15px; }
  .provider-matrix tbody td { display: none; padding: 14px; border: 0; border-radius: 11px; text-align: left; background: #f4f4ed; }
  .provider-matrix tbody td.hv-col { display: block; margin-bottom: 8px; background: color-mix(in srgb, var(--v19-lime) 38%, var(--paper)); }
  .matrix-shell[data-comparator="recruiter"] td[data-provider="recruiter"],
  .matrix-shell[data-comparator="inhouse"] td[data-provider="inhouse"],
  .matrix-shell[data-comparator="hraas"] td[data-provider="hraas"],
  .matrix-shell[data-comparator="founder"] td[data-provider="founder"] { display: block; }
  .provider-matrix tbody td::before { content: attr(data-label-en); display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--v19-muted); }
  .zh .provider-matrix tbody td::before { content: attr(data-label-zh); }
  .matrix-extra { display: none !important; }
  .matrix-shell.is-expanded .matrix-extra { display: block !important; }
  .matrix-shell.is-expanded tr.matrix-extra.matrix-group { display: block !important; }
  .matrix-toggle { margin-top: 10px; border: 2px solid var(--v19-ink); border-radius: 99px; }
  .pillar-matrix tbody tr { padding: 0; overflow: hidden; }
  .pillar-matrix tbody tr.pillar-section-row { padding: 0; border: 0; }
  .pillar-matrix .pillar-section-row th { padding: 13px 16px; border: 1px solid var(--v19-line); border-radius: 12px; }
  .pillar-matrix tbody th { padding: 0; }
  .pillar-matrix .pillar-toggle { min-height: 64px; padding: 17px; font-size: 16px; }
  .pillar-matrix tbody td { margin: 0 16px 10px; width: auto; }
  .pillar-matrix tbody td.hv-col { margin: 0 16px 8px; }
  .pillar-matrix .pillar-row.is-expanded > td { padding-top: 16px; padding-bottom: 16px; }
  .pillar-matrix .pillar-row.is-expanded { transform: scale(1.01); border-color: color-mix(in srgb, var(--v19-ink) 58%, var(--v19-line)); filter: drop-shadow(0 7px 10px rgba(32, 55, 47, .08)); }
  .pillar-matrix .pillar-row.is-expanded > * { box-shadow: none; }
  .pillar-matrix .pillar-row.is-expanded .pillar-toggle { min-height: 64px; align-items: center; }
}

@media (max-width: 520px) {
  .container { width: calc(100% - 28px); }
  .v19-service-hero h1, .pillar-heading h2 { font-size: 46px; }
  .v19-hero h1 { font-size: 36.8px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { display: inline-flex; justify-content: center; }
  .hero-collage { grid-template-columns: 1fr; gap: 12px; height: auto; padding: 0; }
  .hero-collage::before { display: none; }
  .hero-collage-photo, .hero-insight-card { position: relative; inset: auto; width: 100%; min-width: 0; min-height: 0; max-width: none; }
  .hero-outcome-card, .hero-recruitment-card, .hero-collage-photo--video { width: 100%; margin-top: 0; }
  .hero-collage-photo { height: 220px; border-radius: 16px; }
  .hero-collage-photo--call { order: 1; }
  .hero-outcome-card { order: 2; }
  .hero-recruitment-card { order: 3; }
  .hero-collage-photo--video { order: 4; }
  .hero-insight-card { padding: 20px; border-radius: 16px; box-shadow: 7px 7px 0 color-mix(in srgb, var(--blue-light) 72%, transparent); }
  .pain-paths a, .four-pains article { padding: 24px; }
  .value-card-inner, .value-card-face { min-height: 600px; }
  .value-card-face { padding: 25px; }
  .value-card-visual { width: 100%; height: 170px; flex-basis: 170px; margin-bottom: 20px; }
  .value-card-back .value-card-label { margin-bottom: 34px; }
  .value-pair h3 { font-size: 30px; }
  .retainer-workflow { padding: 26px 20px; }
  .service-flow-toolbar { align-items: flex-start; flex-direction: column; }
  .service-flow-toggle { width: 100%; justify-content: center; }
  .service-flow-tabs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .service-flow-tab { min-height: 76px; padding: 10px; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .service-step-number { width: 26px; height: 26px; font-size: 9px; }
  .service-step-copy strong { font-size: 13px; }
  .service-flow-stage, .service-visual-panel { min-height: 0; }
  .service-visual-panel { padding: 24px 20px; }
  .service-visual-panel h3,
  .service-visual-panel .recruitment-convo-heading { margin: 0 0 11px; font-size: 26px; }
  .journey-panel-intro { margin-bottom: 24px; }
  .journey-panel-intro > p { font-size: 15px; }
  .service-visual-header { align-items: flex-start; flex-direction: column; }
  .weekly-details { grid-template-columns: 1fr; gap: 18px; }
  .weekly-insight { gap: 10px; }
  .weekly-update-card { width: 100%; margin-left: 0; }
  .thread-message { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; }
  .thread-avatar { width: 36px; height: 36px; }
  .thread-avatar-brand img { width: 28px; height: 28px; }
  .weekly-metrics { grid-template-columns: 1fr 1fr; }
  .artifact-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .artifact-status { align-self: flex-start; }
  .im-thread-head { align-items: flex-start; padding: 12px; }
  .im-thread-head > .artifact-status { display: none; }
  .im-platforms { gap: 6px; }
  .im-platforms img { width: 18px; height: 18px; }
  .im-thread-body { gap: 15px; padding: 15px 12px; }
  .im-message { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
  .im-message .thread-avatar, .im-person-avatar { width: 34px; height: 34px; }
  .im-message .thread-avatar-brand img { width: 26px; height: 26px; }
  .im-message-person { margin-left: 0; padding: 10px; }
  .work-context-card { padding: 13px; }
  .okr-draft-head > span { font-size: 15px; }
  .work-signal-grid { grid-template-columns: 1fr; }
  .work-evidence-grid { grid-template-columns: 1fr 1fr; }
  .work-evidence-grid > div:last-child { grid-column: 1 / -1; }
  .salary-context { grid-template-columns: 1fr; }
  .recommendation-row { grid-template-columns: 1fr; gap: 8px; }
  .evidence-chips { grid-template-columns: 1fr 1fr; }
  .evidence-chips > span:last-child { grid-column: 1 / -1; }
  .performance-cycle { grid-template-columns: 1fr; gap: 8px; }
  .performance-cycle > span { min-height: 100px; }
  .performance-cycle em { transform: rotate(90deg); }
  .people-plan-grid, .service-visual-note { grid-template-columns: 1fr; }
  .people-plan-grid > div { min-height: 120px; }
  .service-visual-note { gap: 8px; }
  .offer-card { padding: 28px; }
  .offer-terms > div { flex-direction: column; }
  .offer-terms strong { text-align: left; }
  .continuity-flow { align-items: stretch; flex-direction: column; }
  .continuity-flow i { transform: rotate(90deg); text-align: center; }
  .workflow-band { align-items: stretch; flex-direction: column; }
  .workflow-band i { transform: rotate(90deg); text-align: center; }
  .artifact-mini dl div { grid-template-columns: 1fr; gap: 5px; }
  .provider-matrix thead tr { grid-template-columns: 1fr; }
  .provider-matrix thead th { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-collage-photo, .hero-insight-card { animation: none; transform: none; }
  .pain-paths a, .pillar-jump a { transition: none; }
  .value-card-inner { transition: none; }
  .value-flip-toggle { transition: none; }
  .service-flow-tab, .service-step-number, .service-step-arrow { transition: none; }
  .service-flow-tab.is-cycling .service-step-progress::before,
  .service-flow-tab.is-cycling .service-step-progress::after,
  .service-flow-tab.is-cycling .service-step-progress i::before,
  .service-flow-tab.is-cycling .service-step-progress i::after,
  .service-visual-panel.is-active { animation: none; }
}

/* HR ladder: shows how connected HR practices build toward business outcomes. */
.hr-system-story { overflow: hidden; }
.hr-system-layout[hidden], .hr-feedback[hidden] { display: none; }
.hr-system-layout {
  display: block;
  width: min(1180px, 100%);
  margin-top: clamp(34px, 4vw, 48px);
  margin-inline: auto;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--v19-line);
  border-radius: var(--v19-radius);
  background: var(--v19-bone);
}
.hr-ladder-wrap {
  --hr-path-rail: clamp(220px, 20vw, 270px);
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--hr-path-rail) minmax(0, 1fr);
}
.hr-path-intro {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: stretch;
  z-index: 4;
  min-width: 0;
  padding: 0 clamp(20px, 2.5vw, 34px) 0 clamp(8px, 1.3vw, 18px);
}
.hr-partner-path-label {
  display: block;
  max-width: 10ch;
  color: var(--blue-deep);
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1.16;
  letter-spacing: -.04em;
  text-align: left;
}
.hr-path-illustration {
  display: block;
  width: min(100%, 220px);
  height: auto;
  margin-top: clamp(22px, 3vw, 34px);
  overflow: visible;
  color: var(--blue-deep);
}
.hr-path-illustration path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .5;
}
.hr-path-illustration circle { fill: var(--blue-light); stroke: currentColor; stroke-width: 2; }
.hr-path-illustration .hr-path-destination { fill: var(--yellow); stroke: var(--v19-ink); }
.hr-ladder {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column-reverse;
  gap: 7px;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.hr-step {
  position: relative;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  min-height: 70px;
  padding: 10px 16px;
  border: 1px solid var(--v19-line);
  border-radius: 15px 15px 6px 6px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  align-self: flex-end;
  background: #fff;
}
.hr-step > div { min-width: 0; }
.hr-step strong, .hr-step p { overflow-wrap: anywhere; }
.hr-step::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.76) 48%, transparent 78%);
  opacity: 0;
  transform: translateX(-120%);
  will-change: transform, opacity;
  pointer-events: none;
}
.hr-step > * { position: relative; z-index: 2; }
.hr-step-direction {
  width: 100%;
  background: linear-gradient(112deg, #fff 10%, color-mix(in srgb, var(--v19-blue-pale) 45%, #fff) 58%, color-mix(in srgb, var(--v19-purple) 13%, #fff));
}
.hr-step-planning {
  width: 100%;
  background: linear-gradient(112deg, color-mix(in srgb, var(--v19-blue-pale) 72%, #fff), color-mix(in srgb, var(--v19-blue) 18%, #fff) 58%, color-mix(in srgb, var(--v19-purple) 14%, #fff));
}
.hr-step-recruitment {
  width: 92%;
  background: linear-gradient(112deg, var(--paper), color-mix(in srgb, var(--yellow) 24%, #fff) 56%, color-mix(in srgb, var(--v19-coral) 12%, #fff));
}
.hr-step-onboarding {
  width: 84%;
  background: linear-gradient(112deg, color-mix(in srgb, var(--blue-light) 82%, #fff), color-mix(in srgb, var(--v19-blue) 22%, #fff) 56%, color-mix(in srgb, var(--v19-purple) 16%, #fff));
}
.hr-step-performance {
  width: 76%;
  background: linear-gradient(112deg, color-mix(in srgb, var(--blue-light) 54%, #fff), color-mix(in srgb, var(--v19-purple) 16%, #fff) 58%, color-mix(in srgb, var(--v19-coral) 11%, #fff));
}
.hr-step-outcomes {
  width: 68%;
  border-color: var(--v19-ink);
  background: linear-gradient(112deg, var(--v19-ink) 18%, color-mix(in srgb, var(--v19-ink) 86%, var(--blue-deep)) 62%, color-mix(in srgb, var(--v19-ink) 88%, var(--v19-purple)));
  color: #fff;
}
.hr-step-number {
  width: 32px;
  height: 32px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
}
.hr-step-outcomes .hr-step-number { border-color: currentColor; background: transparent; color: inherit; }
.hr-step strong { display: block; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.1; letter-spacing: -.03em; }
.hr-step p { margin: 3px 0 0; color: var(--v19-muted); font-size: 11px; line-height: 1.35; }
.hr-step-outcomes p { color: rgba(255,255,255,.72); }
.hr-partner-band {
  margin-top: 18px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--v19-radius-sm);
  display: grid;
  grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr) auto;
  gap: 24px;
  align-items: center;
  background: var(--v19-ink);
  color: #fff;
}
.hr-partner-band .eyebrow { margin-bottom: 8px; color: var(--yellow); font-size: 11px; }
.hr-partner-band strong { display: block; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; letter-spacing: -.04em; }
.hr-partner-band > p { margin: 0; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.55; }
.hr-retainer-badge { padding: 10px 14px; border-radius: 999px; background: var(--yellow); color: var(--v19-ink); font-size: 12px; font-weight: 800; text-align: center; white-space: nowrap; }
.hr-feedback {
  max-width: 900px;
  margin: 20px auto 0;
  padding: 20px 24px;
  border: 1px dashed color-mix(in srgb, var(--blue-deep) 58%, var(--v19-line));
  border-radius: var(--v19-radius-sm);
  display: grid;
  grid-template-columns: 44px minmax(150px, .35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  background: color-mix(in srgb, var(--v19-blue-pale) 62%, #fff);
}
.hr-feedback-arrow { color: var(--blue-deep); font-size: 34px; line-height: 1; }
.hr-feedback strong { font-size: 16px; line-height: 1.25; }
.hr-feedback p { margin: 0; color: var(--v19-muted); font-size: 14px; line-height: 1.5; }

@media (max-width: 900px) {
  .hr-ladder-wrap { --hr-path-rail: clamp(170px, 25vw, 210px); }
  .hr-path-intro { padding-right: 22px; }
  .hr-partner-path-label { font-size: clamp(19px, 2.8vw, 25px); }
  .hr-partner-band { grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr); }
  .hr-retainer-badge { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 600px) {
  .hr-system-layout { margin-top: 28px; padding: 10px; gap: 10px; }
  .hr-ladder-wrap { --hr-path-rail: 76px; }
  .hr-path-intro { padding: 0 10px 0 2px; }
  .hr-partner-path-label { max-width: 8ch; font-size: 11px; line-height: 1.22; letter-spacing: -.025em; }
  .hr-path-illustration { margin-top: 18px; }
  .hr-step { min-height: 84px; padding: 12px; grid-template-columns: 31px minmax(0, 1fr); gap: 9px; }
  .hr-step-direction { width: 100%; }
  .hr-step-planning { width: 100%; }
  .hr-step-recruitment { width: calc(100% - 8px); }
  .hr-step-onboarding { width: calc(100% - 16px); }
  .hr-step-performance { width: calc(100% - 24px); }
  .hr-step-outcomes { width: calc(100% - 32px); }
  .hr-step-number { width: 29px; height: 29px; font-size: 9px; }
  .hr-step strong { font-size: 15px; }
  .hr-step p { font-size: 11px; }
  .hr-partner-band { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
  .hr-partner-band strong { font-size: 23px; }
  .hr-partner-band > p { font-size: 13px; }
  .hr-retainer-badge { grid-column: auto; }
  .hr-feedback { grid-template-columns: 38px 1fr; gap: 8px 12px; padding: 18px; }
  .hr-feedback p { grid-column: 2; }
}

/* Ambient surface system
   Keep v1.9's existing palette, but let colour behave as light and atmosphere
   around a white canvas instead of as a sequence of rigid full-width bands. */
:root {
  --v19-canvas: #fff;
  --v19-surface-glass: rgba(255, 255, 255, .88);
  --v19-hue-blue: color-mix(in srgb, var(--v19-blue) 22%, transparent);
  --v19-hue-blue-soft: color-mix(in srgb, var(--v19-blue-pale) 72%, transparent);
  --v19-hue-yellow: color-mix(in srgb, var(--yellow) 15%, transparent);
  --v19-hue-lime: color-mix(in srgb, var(--v19-lime) 18%, transparent);
  --v19-hue-purple: color-mix(in srgb, var(--v19-purple) 16%, transparent);
  --v19-hue-bone: color-mix(in srgb, var(--v19-bone) 78%, transparent);
  --v19-surface-border: color-mix(in srgb, var(--v19-line) 72%, #fff);
  --v19-surface-shadow: 0 22px 65px rgba(20, 20, 15, .065);
}

body {
  background: var(--v19-canvas);
  padding-top: 82px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  border-bottom-color: color-mix(in srgb, var(--v19-line) 52%, transparent);
  box-shadow: 0 10px 34px rgba(20, 20, 15, .025);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@media (max-width: 680px) {
  body { padding-top: 70px; }
}

.v19-hero {
  background:
    radial-gradient(ellipse 42% 34% at 73% 72%, var(--v19-hue-yellow), transparent 72%),
    radial-gradient(ellipse 44% 40% at 22% 77%, var(--v19-hue-blue-soft), transparent 74%),
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--v19-bone) 48%, #fff) 100%);
}

.v19-service-hero,
.page-hero {
  background:
    radial-gradient(ellipse 48% 62% at 88% 24%, var(--v19-hue-blue-soft), transparent 72%),
    radial-gradient(ellipse 30% 42% at 8% 80%, var(--v19-hue-yellow), transparent 74%),
    #fff;
}

.section {
  position: relative;
  isolation: isolate;
}

.section > .container {
  position: relative;
  z-index: 1;
}

.surface-paper {
  background:
    radial-gradient(ellipse 38% 30% at 10% 18%, var(--v19-hue-yellow), transparent 76%),
    radial-gradient(ellipse 42% 36% at 92% 78%, var(--v19-hue-blue-soft), transparent 76%),
    #fff;
}

.surface-blue,
.surface-pale {
  background:
    radial-gradient(ellipse 48% 44% at 88% 16%, var(--v19-hue-blue-soft), transparent 76%),
    radial-gradient(ellipse 34% 30% at 12% 86%, var(--v19-hue-lime), transparent 78%),
    #fff;
}

.value-section {
  background:
    radial-gradient(ellipse 34% 32% at 92% 14%, var(--v19-hue-purple), transparent 76%),
    radial-gradient(ellipse 38% 30% at 7% 86%, var(--v19-hue-blue-soft), transparent 78%),
    #fff;
}

.integrated-section {
  background:
    radial-gradient(ellipse 54% 34% at 50% 10%, color-mix(in srgb, var(--v19-charcoal) 7%, transparent), transparent 75%),
    radial-gradient(ellipse 35% 30% at 92% 88%, var(--v19-hue-blue-soft), transparent 76%),
    #fff;
  color: var(--v19-ink);
}

.comparison-section {
  background:
    radial-gradient(ellipse 42% 36% at 10% 12%, var(--v19-hue-bone), transparent 76%),
    radial-gradient(ellipse 38% 34% at 90% 82%, var(--v19-hue-blue-soft), transparent 76%),
    #fff;
}

.continuity-section {
  background:
    radial-gradient(ellipse 46% 38% at 88% 10%, var(--v19-hue-purple), transparent 76%),
    radial-gradient(ellipse 38% 34% at 8% 88%, var(--v19-hue-blue-soft), transparent 78%),
    #fff;
}

.offer-section {
  background:
    radial-gradient(ellipse 48% 52% at 8% 50%, var(--v19-hue-lime), transparent 74%),
    radial-gradient(ellipse 38% 44% at 94% 44%, var(--v19-hue-yellow), transparent 76%),
    #fff;
}

.contact-section {
  background:
    radial-gradient(ellipse 36% 46% at 84% 16%, var(--v19-hue-blue-soft), transparent 76%),
    #fff;
}

/* Blend the open homepage sections through a shared white edge. The colour
   remains inside each section, while boxed cards retain their own boundaries. */
[data-home-page] .v19-hero {
  background:
    linear-gradient(180deg, transparent 68%, rgba(255,255,255,.72) 88%, #fff 100%),
    radial-gradient(ellipse 42% 34% at 73% 72%, var(--v19-hue-yellow), transparent 72%),
    radial-gradient(ellipse 44% 40% at 22% 77%, var(--v19-hue-blue-soft), transparent 74%),
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--v19-bone) 48%, #fff) 100%);
}

[data-home-page] .surface-paper,
[data-home-page] .integrated-section,
[data-home-page] .value-section,
[data-home-page] .comparison-section,
[data-home-page] .continuity-section,
[data-home-page] .contact-section {
  background-image:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 9%, transparent 23%, transparent 77%, rgba(255,255,255,.7) 91%, #fff 100%),
    var(--home-section-hue-a),
    var(--home-section-hue-b);
  background-color: #fff;
}

[data-home-page] .surface-paper {
  --home-section-hue-a: radial-gradient(ellipse 38% 30% at 10% 18%, var(--v19-hue-yellow), transparent 76%);
  --home-section-hue-b: radial-gradient(ellipse 42% 36% at 92% 78%, var(--v19-hue-blue-soft), transparent 76%);
}

[data-home-page] .integrated-section {
  --home-section-hue-a: radial-gradient(ellipse 54% 34% at 50% 10%, color-mix(in srgb, var(--v19-charcoal) 7%, transparent), transparent 75%);
  --home-section-hue-b: radial-gradient(ellipse 35% 30% at 92% 88%, var(--v19-hue-blue-soft), transparent 76%);
}

[data-home-page] .value-section {
  --home-section-hue-a: radial-gradient(ellipse 34% 32% at 92% 14%, var(--v19-hue-purple), transparent 76%);
  --home-section-hue-b: radial-gradient(ellipse 38% 30% at 7% 86%, var(--v19-hue-blue-soft), transparent 78%);
}

[data-home-page] .comparison-section {
  --home-section-hue-a: radial-gradient(ellipse 42% 36% at 10% 12%, var(--v19-hue-bone), transparent 76%);
  --home-section-hue-b: radial-gradient(ellipse 38% 34% at 90% 82%, var(--v19-hue-blue-soft), transparent 76%);
}

[data-home-page] .continuity-section {
  --home-section-hue-a: radial-gradient(ellipse 46% 38% at 88% 10%, var(--v19-hue-purple), transparent 76%);
  --home-section-hue-b: radial-gradient(ellipse 38% 34% at 8% 88%, var(--v19-hue-blue-soft), transparent 78%);
}

[data-home-page] .contact-section {
  --home-section-hue-a: radial-gradient(ellipse 36% 46% at 84% 16%, var(--v19-hue-blue-soft), transparent 76%);
  --home-section-hue-b: linear-gradient(transparent, transparent);
}

/* Shared surface transition for active service pages. Colour remains atmospheric
   within each section, while every continuous boundary returns softly to the
   white canvas. Product cards and deliberately dark sections stay distinct. */
body[data-surface-blend] main > section {
  position: relative;
  isolation: isolate;
}

body[data-surface-blend] main > section:not(.pr-feature--dark)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #fff 0%,
    rgba(255, 255, 255, .78) 7%,
    transparent 19%,
    transparent 81%,
    rgba(255, 255, 255, .78) 93%,
    #fff 100%
  );
}

body[data-surface-blend] main > section:not(.pr-feature--dark) > * {
  position: relative;
  z-index: 1;
}

body[data-surface-blend] .footer {
  border-top-color: transparent;
}

.contact-section .callout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 78px);
  align-items: start;
  overflow: hidden;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--v19-surface-border);
  border-radius: var(--v19-radius);
  background:
    radial-gradient(circle at 91% 18%, var(--v19-hue-yellow), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), color-mix(in srgb, var(--v19-blue-pale) 78%, #fff));
  color: var(--v19-ink);
  box-shadow: var(--v19-surface-shadow);
}

.contact-intro {
  min-width: 0;
  padding-top: 8px;
}

.contact-intro .eyebrow {
  margin-bottom: 16px;
  color: var(--blue-deep);
}

.contact-intro h2 {
  max-width: 12ch;
  margin-bottom: 22px;
  color: var(--v19-ink);
  font-size: clamp(44px, 4.3vw, 62px);
  line-height: 1;
  letter-spacing: -.05em;
}

html[lang="en"] #contact-heading {
  max-width: 18ch;
  font-size: clamp(34px, 2.7vw, 40px);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.contact-intro > p:not(.eyebrow) {
  max-width: 62ch;
  margin: 0;
  color: var(--v19-muted);
  font-size: 17px;
}

.contact-section .contact-options {
  display: grid;
  gap: 0;
  margin-top: 28px;
}

.contact-section .contact-options a {
  width: fit-content;
  min-height: 40px;
  color: var(--blue-deep);
  text-decoration-color: color-mix(in srgb, var(--blue-deep) 36%, transparent);
}

.page-home .contact-section .contact-options a {
  color: var(--v19-ink);
  text-decoration-color: color-mix(in srgb, var(--v19-ink) 36%, transparent);
}

.contact-section .contact-options a:hover {
  text-decoration-color: currentColor;
}

.lead-form {
  min-width: 0;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--v19-surface-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 46px rgba(20, 20, 15, .06);
}

.lead-form-head {
  margin-bottom: 26px;
}

.lead-form-head h3 {
  margin-bottom: 6px;
  color: var(--v19-ink);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.12;
}

.lead-form-head p {
  margin: 0;
  color: var(--v19-muted);
}

.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
}

.form-field {
  display: grid;
  align-content: start;
  min-width: 0;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-field label,
.referral-fieldset legend {
  margin-bottom: 8px;
  color: var(--v19-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.required-mark {
  color: var(--v19-status-negative);
}

.optional-mark,
.field-help,
.form-privacy-note {
  color: var(--v19-muted);
  font-weight: 450;
}

.field-help {
  display: block;
  margin: -2px 0 9px;
  font-size: 13px;
  line-height: 1.45;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--v19-line) 88%, var(--v19-ink));
  border-radius: 12px;
  background: #fff;
  color: var(--v19-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}

.form-field textarea {
  min-height: 122px;
  resize: vertical;
}

.form-field input::placeholder {
  color: color-mix(in srgb, var(--v19-muted) 72%, #fff);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--blue);
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--v19-status-negative);
  box-shadow: 0 0 0 1px var(--v19-status-negative);
}

.field-error {
  min-height: 20px;
  padding-top: 4px;
  color: var(--v19-status-negative);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.form-error-summary {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--v19-status-negative);
  border-radius: 12px;
  background: color-mix(in srgb, var(--v19-status-negative) 7%, #fff);
  color: var(--v19-ink);
}

.form-error-summary ul {
  margin: 7px 0 0;
  padding-left: 20px;
}

.form-error-summary a {
  color: var(--v19-status-negative);
}

.referral-fieldset {
  min-width: 0;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
}

.referral-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.referral-options label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.referral-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.referral-options label > span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--v19-line);
  border-radius: 999px;
  background: #fff;
  color: var(--v19-ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

.referral-options input:checked ~ span {
  border-color: var(--blue-deep);
  background: var(--v19-blue-pale);
  color: var(--blue-deep);
}

.referral-options input:focus-visible ~ span {
  outline: var(--focus);
  outline-offset: 3px;
}

.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-privacy-note {
  margin: 22px 0 16px;
  font-size: 13px;
  line-height: 1.5;
}

.lead-form .lead-submit {
  min-width: 154px;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}

.lead-form .lead-submit:hover {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: #fff;
}

.lead-form .lead-submit:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
}

.form-status {
  min-height: 24px;
  margin: 10px 0 0;
  color: var(--v19-muted);
  font-size: 14px;
  font-weight: 600;
}

.form-status.is-error {
  color: var(--v19-status-negative);
}

@media (max-width: 960px) {
  .contact-section .callout {
    grid-template-columns: 1fr;
  }

  .contact-intro h2 {
    max-width: 18ch;
  }
}

.pain-paths a,
.four-pains article,
.pillar-jump a,
.weekly-grid article,
.checkpoint-grid article,
.collaboration-grid article,
.matrix-shell,
.retainer-workflow,
.hr-system-layout {
  border-color: var(--v19-surface-border);
  background: var(--v19-surface-glass);
  box-shadow: var(--v19-surface-shadow);
  backdrop-filter: blur(12px);
}

.pain-paths a:hover,
.pain-paths a:focus-visible,
.pillar-jump a:hover,
.pillar-jump a:focus-visible {
  background:
    radial-gradient(circle at 84% 16%, var(--v19-hue-lime), transparent 52%),
    #fff;
}

.value-card-front {
  background: linear-gradient(155deg, #fff 18%, color-mix(in srgb, var(--v19-bone) 68%, #fff));
  box-shadow: var(--v19-surface-shadow);
}

.value-card:nth-child(2) .value-card-front {
  background: linear-gradient(155deg, #fff 18%, color-mix(in srgb, var(--v19-purple) 22%, #fff));
}

.value-card:nth-child(3) .value-card-front {
  background: linear-gradient(155deg, #fff 18%, color-mix(in srgb, var(--v19-blue-pale) 66%, #fff));
}

.service-flow-tab,
.service-flow-stage,
.service-visual-panel,
.workflow-steps li,
.pillar-work > article,
.tool-flow {
  border-color: var(--v19-surface-border);
  background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--v19-bone) 54%, #fff));
}

.service-flow-tab.is-active,
.service-visual-planning,
.tool-flow {
  background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--v19-blue-pale) 68%, #fff));
}

.service-visual-performance {
  background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--v19-purple) 20%, #fff));
}

.offer-card {
  border: 1px solid color-mix(in srgb, var(--v19-lime) 48%, var(--v19-line));
  background:
    radial-gradient(circle at 88% 14%, var(--v19-hue-yellow), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .96), color-mix(in srgb, var(--v19-lime) 24%, #fff));
  box-shadow: var(--v19-surface-shadow);
}

.hr-system-layout {
  background:
    radial-gradient(ellipse 48% 60% at 90% 12%, var(--v19-hue-blue-soft), transparent 72%),
    rgba(255, 255, 255, .88);
}

.footer {
  background:
    radial-gradient(ellipse 36% 90% at 90% 100%, var(--v19-hue-blue-soft), transparent 78%),
    #fff;
  border-top-color: var(--v19-surface-border);
}

.split-hero-copy,
.pillar-heading > div,
.value-pair > *,
.pillar-work > *,
.pillar-jump > a {
  min-width: 0;
}

.zh h1,
.zh h2,
.zh h3,
.zh .pillar-jump strong {
  line-break: strict;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  main,
  .section,
  .page-hero {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
  }

  .container {
    max-width: calc(100vw - 28px);
  }

  .split-hero-inner,
  .section-head,
  .pillar-heading,
  .pillar-jump {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .header .nav-wrap {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px);
  }

  .contact-section .callout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
    border-radius: 22px;
  }

  .contact-intro {
    padding-top: 0;
  }

  .contact-intro h2 {
    margin: 6px 0 18px;
    max-width: 12ch;
    font-size: clamp(39px, 11vw, 48px);
    line-height: 1;
  }

  html[lang="en"] #contact-heading {
    max-width: 17ch;
    font-size: clamp(32px, 8.5vw, 36px);
    line-height: 1.1;
  }

  .contact-intro > p:not(.eyebrow) {
    font-size: 16px;
  }

  .contact-section .contact-options {
    margin-top: 22px;
  }

  .lead-form {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .form-field-wide {
    grid-column: auto;
  }

  .lead-form .lead-submit {
    width: 100%;
  }

  .referral-options label > span {
    padding-inline: 13px;
  }

  .v19-hero {
    background:
      radial-gradient(ellipse 80% 24% at 74% 72%, var(--v19-hue-yellow), transparent 78%),
      radial-gradient(ellipse 90% 26% at 20% 86%, var(--v19-hue-blue-soft), transparent 80%),
      linear-gradient(180deg, #fff, color-mix(in srgb, var(--v19-bone) 42%, #fff));
  }

  .section,
  .v19-service-hero,
  .page-hero {
    background-size: 150% 100%, 150% 100%, auto;
  }

  .zh h1,
  .zh h2,
  .zh h3,
  .zh .pillar-jump strong {
    max-width: 100%;
    text-wrap: wrap;
    word-break: break-all;
  }
}

/* Compact journey selector: match the motion play/pause pill rather than a card. */
@property --service-ring-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.service-flow-tabs {
  display: flex;
  grid-template-columns: none;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.service-flow-tabs::before {
  display: none;
}

.service-flow-tab {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 3px;
  border: 3px solid color-mix(in srgb, var(--v19-line) 28%, #fff);
  border-radius: 999px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow: visible;
  background: #fff;
  color: var(--v19-ink);
  box-shadow: none;
  transform: none;
  transition: border-color .18s ease, background-color .18s ease;
  transition: width .22s ease, flex-basis .22s ease, padding .22s ease, border-color .18s ease, background-color .18s ease;
}

.service-flow-tab:hover {
  border-color: var(--v19-line);
}

.service-flow-tab.is-active {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 210px;
  min-height: 44px;
  padding: 3px 13px 3px 3px;
  border: 1px solid var(--v19-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.service-step-number {
  position: relative;
  z-index: 2;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--v19-ink);
  font-size: 13px;
  font-weight: 750;
  transition: none;
}

.service-flow-tab.is-active .service-step-number {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  background: var(--v19-ink);
  color: #fff;
}

.service-step-copy {
  min-width: 0;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width .22s ease, margin-left .22s ease, opacity .14s ease;
}

.service-flow-tab.is-active .service-step-copy {
  max-width: 150px;
  margin-left: 8px;
  opacity: 1;
}

.service-step-copy strong {
  display: block;
  overflow: visible;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.service-step-progress {
  position: absolute;
  inset: 1px auto auto 1px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: none;
  overflow: visible;
  background: conic-gradient(var(--blue-deep) var(--service-ring-progress), transparent 0);
  pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
}

.service-flow-tab.is-active .service-step-progress {
  display: block;
}

.service-step-progress::before,
.service-step-progress::after,
.service-step-progress i,
.service-step-progress i::before,
.service-step-progress i::after {
  display: none;
  animation: none;
}

.service-flow-tab.is-cycling .service-step-progress {
  animation: service-number-countdown 7s linear both;
}

@keyframes service-number-countdown {
  from { --service-ring-progress: 0deg; }
  to { --service-ring-progress: 360deg; }
}

@media (max-width: 520px) {
  .service-flow-tabs {
    grid-template-columns: none;
    gap: 6px;
  }

  .service-flow-tab,
  .service-flow-tab.is-active {
    min-height: 44px;
  }

  .service-flow-tab.is-active {
    max-width: 170px;
  }

  .service-flow-tab.is-active .service-step-copy {
    max-width: 116px;
    margin-left: 7px;
  }

  .service-step-copy strong {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-flow-tab,
  .service-step-copy,
  .service-step-progress {
    animation: none !important;
    transition: none !important;
  }
}

/* Definitive journey control: same geometry as the play/pause pill.
   The loader is nested inside the number, so it cannot trace the chip edge. */
.service-flow-tabs {
  display: flex;
  grid-template-columns: none;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.service-flow-tabs::before {
  display: none;
}

.service-flow-tab,
.service-flow-tab.is-active {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: none;
  min-height: 44px;
  padding: 3px;
  border: 3px solid color-mix(in srgb, var(--v19-line) 28%, #fff);
  border-radius: 99px;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow: visible;
  background: #fff;
  color: var(--v19-ink);
  box-shadow: none;
  transform: none;
}

.service-flow-tab.is-active {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 3px 14px 3px 3px;
  border: 1px solid var(--v19-line);
  background: #fff;
}

.service-step-number,
.service-flow-tab.is-active .service-step-number {
  position: relative;
  z-index: 2;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 1px solid var(--v19-control-marker-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--v19-ink);
  font-size: 13px;
  font-weight: 750;
}

.service-flow-tab.is-active .service-step-number {
  background: #fff;
  color: var(--v19-ink);
}

.service-step-copy {
  min-width: 0;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: none;
}

.service-flow-tab.is-active .service-step-copy {
  max-width: 150px;
  margin-left: 9px;
  overflow: visible;
  opacity: 1;
}

.service-step-copy strong {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.service-step-number .service-step-progress,
.service-flow-tab.is-active .service-step-number .service-step-progress {
  position: absolute;
  inset: -2px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: none;
  overflow: visible;
  background: conic-gradient(var(--v19-control-selected-border) var(--service-ring-progress), transparent 0);
  pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
}

.service-flow-tab.is-active .service-step-number .service-step-progress {
  display: block;
}

.service-step-number .service-step-progress::before,
.service-step-number .service-step-progress::after {
  display: none;
  content: none;
}

.service-flow-tab.is-cycling .service-step-number .service-step-progress {
  animation: service-number-countdown 7s linear both;
}

@media (max-width: 520px) {
  .service-flow-tabs {
    grid-template-columns: none;
    gap: 6px;
  }

  .service-flow-tab,
  .service-flow-tab.is-active {
    min-height: 44px;
  }

  .service-flow-tab.is-active {
    padding-right: 12px;
  }

  .service-flow-tab.is-active .service-step-copy {
    max-width: 116px;
    margin-left: 7px;
  }

  .service-step-copy strong {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-flow-tab.is-cycling .service-step-number .service-step-progress {
    animation: none !important;
  }
}

/* Final journey layout: every stage stays expanded before, during and after its turn. */
.service-flow-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 240px));
  justify-content: center;
  align-items: stretch;
  gap: 9px;
}

.service-flow-tab,
.service-flow-tab.is-active {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 58px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--v19-line);
  border-radius: 999px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  overflow: visible;
  background: #fff;
  box-shadow: none;
}

.service-flow-tab.is-active {
  border-color: var(--v19-control-selected-border);
  background: #fff;
  box-shadow: var(--v19-control-selected-shadow);
}

.service-step-copy,
.service-flow-tab.is-active .service-step-copy {
  min-width: 0;
  max-width: none;
  margin-left: 0;
  overflow: visible;
  opacity: 1;
  white-space: normal;
}

.service-step-copy strong,
.service-flow-tab.is-active .service-step-copy strong {
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
}

.service-flow-tab.is-cycling .service-step-number .service-step-progress {
  animation-duration: 7s;
}

.retainer-workflow-head + .service-flow-layout {
  margin-top: 42px;
}

.service-step-number .service-step-progress,
.service-flow-tab.is-active .service-step-number .service-step-progress {
  inset: -1px;
  width: 38px;
  height: 38px;
}

@media (max-width: 900px) {
  .service-flow-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .service-flow-tabs { grid-template-columns: 1fr 1fr; gap: 7px; }
  .service-flow-tab,
  .service-flow-tab.is-active { min-height: 54px; padding: 5px 9px 5px 5px; grid-template-columns: 32px minmax(0, 1fr); gap: 7px; }
  .service-step-number,
  .service-flow-tab.is-active .service-step-number { width: 32px; height: 32px; min-width: 32px; flex-basis: 32px; font-size: 11px; }
  .service-step-number .service-step-progress,
  .service-flow-tab.is-active .service-step-number .service-step-progress { inset: -1px; width: 34px; height: 34px; }
  .service-step-copy strong,
  .service-flow-tab.is-active .service-step-copy strong { font-size: 11px; }
}

/* Photo-led pain-card variations. */
.pain-paths a.pain-path--photo,
.pain-paths a.pain-path--photo:hover,
.pain-paths a.pain-path--photo:focus-visible {
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  background: var(--v19-ink);
  color: #fff;
}

.pain-path--photo::before,
.pain-path--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pain-path--founder::before {
  z-index: 0;
  background: url("photography/founder-working-late.jpg") 51% 82% / cover no-repeat;
  filter: brightness(.72) saturate(.9);
  transform: translate(20%, -35%) scale(1.85);
}

.pain-path--fit::before {
  z-index: 0;
  background: url("photography/wrong-fit-night-work.jpg") 50% 54% / cover no-repeat;
  filter: brightness(.56) saturate(.82);
  transform: scale(1.04);
}

.pain-path--cost::before {
  z-index: 0;
  background: url("photography/partial-solutions-cost.jpg") 50% 50% / cover no-repeat;
  filter: brightness(.52) saturate(.82);
  transform: scale(1.06);
}

.pain-path--photo::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 20, 15, .08) 0%, rgba(20, 20, 15, .34) 42%, rgba(20, 20, 15, .94) 100%);
}

.pain-path--photo > * {
  position: relative;
  z-index: 2;
}

.pain-path--photo strong,
.pain-path--photo strong span {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.zh .pain-path--photo strong span {
  word-break: break-all;
}

@media (max-width: 900px) {
  .pain-paths { grid-template-columns: minmax(0, 1fr); }
}

.pain-paths .pain-path--photo .pain-description {
  color: rgba(255, 255, 255, .84);
}

.pain-paths .pain-path--photo .pain-description li::before {
  background: #fff;
}

.pain-paths a.pain-path--photo:focus-visible {
  outline-color: #fff;
}

/* Split-photo fronts for the "Built for the next stage" value cards. */
.value-card .value-card-front {
  justify-content: flex-start;
  overflow: hidden;
  color: var(--v19-ink);
  background-color: var(--v19-bone);
}

/* Keep copy below the photo band regardless of heading length. The spacer uses
   the same percentage as the background image, then adds a compact gutter. */
.value-card .value-card-front::before {
  content: "";
  flex: 0 0 calc(44% + 13px);
}

.value-card .value-card-front::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 44%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: center;
}

.value-card:nth-child(1) .value-card-front::after {
  background-image: url("photography/value-founder-growth.jpg");
}

.value-card:nth-child(2) .value-card-front::after {
  background-image: url("photography/value-right-hire.jpg");
  background-position: 52% 48%;
  transform: scale(1.04);
}

.value-card:nth-child(3) .value-card-front::after {
  background-image: url("photography/value-right-sized-support.jpg");
}

.value-card .value-card-front h3 {
  color: var(--v19-ink);
  font-size: clamp(24px, 2.1vw, 31px);
  line-height: 1.08;
}

.value-card .value-card-front > p:not(.value-card-label) {
  color: var(--v19-muted);
}

.value-card .value-card-front .text-link,
.value-card .value-card-front .value-flip-toggle {
  color: var(--v19-ink);
}

/* Keep both card actions in one responsive footer instead of letting the
   absolutely positioned flip control overlap a wrapping CTA. */
.value-card-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-top: auto;
  padding-top: 22px;
}

.value-card .value-card-actions .text-link {
  display: block;
  min-width: 0;
  max-width: calc(100% - 56px);
  margin-top: 0;
  padding-top: 0;
  line-height: 1.45;
}

.value-card .value-card-actions .text-link::after {
  display: inline-block;
  margin-left: 8px;
  white-space: nowrap;
}

.value-card .value-card-actions .value-flip-toggle {
  position: relative;
  right: auto;
  bottom: auto;
  flex: 0 0 44px;
}

.value-card .value-card-front .value-flip-toggle:hover,
.value-card .value-card-front .value-flip-toggle:focus-visible {
  background: color-mix(in srgb, var(--v19-blue-pale) 84%, transparent);
}

/* Compact continuity split: proposition on the left, ladder only on the right. */
.hr-hierarchy-section {
  padding-block: clamp(64px, 7vw, 96px);
}

.hr-continuity-grid {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: start;
}

.hr-hierarchy-head {
  min-width: 0;
  margin: 0;
  padding-left: clamp(28px, 2.8vw, 44px);
  text-align: left;
}

.hr-hierarchy-head h2 {
  margin: 0;
  max-width: 12.5ch;
  text-align: left;
}

.hr-hierarchy-head .hr-continuity-description {
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  max-width: 30ch;
  text-align: left;
  font-weight: 400;
}

.zh .hr-hierarchy-head h2 { max-width: 10em; }
.zh .hr-continuity-description { max-width: 18em; }
.continuity-sentence { display: block; }

@media (min-width: 901px) {
  .hr-hierarchy-head .hr-continuity-description { max-width: none; font-size: 17px; }
  .hr-continuity-description [data-lang="en"] .continuity-sentence:first-child { white-space: nowrap; }
}

.hr-hierarchy-section .hr-system-layout {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hr-hierarchy-section .hr-ladder-wrap {
  display: block;
  min-width: 0;
  background: transparent;
}

.hr-hierarchy-section .hr-ladder {
  grid-column: auto;
  grid-row: auto;
  background: transparent;
}

.hr-hierarchy-section .hr-step {
  transform-origin: right center;
}

.hr-hierarchy-section .hr-ladder-wrap.is-animated .hr-step {
  animation: hr-ladder-step-cycle 7s cubic-bezier(.4, 0, .2, 1) infinite;
}

.hr-hierarchy-section .hr-ladder-wrap.is-animated .hr-step-recruitment { animation-delay: .8s; }
.hr-hierarchy-section .hr-ladder-wrap.is-animated .hr-step-onboarding { animation-delay: 1.6s; }
.hr-hierarchy-section .hr-ladder-wrap.is-animated .hr-step-performance { animation-delay: 2.4s; }
.hr-hierarchy-section .hr-ladder-wrap.is-animated .hr-step-outcomes { animation-delay: 3.2s; }

@keyframes hr-ladder-step-cycle {
  0%, 10.9%, 100% {
    z-index: 1;
    border-color: var(--v19-line);
    box-shadow: none;
    filter: none;
    transform: none;
  }
  5.1%, 6.3% {
    z-index: 3;
    border-color: var(--blue-deep);
    box-shadow: 0 10px 24px rgba(32, 55, 47, .13);
    filter: saturate(1.05);
    transform: translateY(-3px) scaleX(1.018);
  }
}

.hr-hierarchy-section .hr-step-outcomes {
  border-color: var(--v19-line);
  background: linear-gradient(112deg, color-mix(in srgb, var(--v19-blue-pale) 76%, #fff), color-mix(in srgb, var(--v19-blue) 18%, #fff) 56%, color-mix(in srgb, var(--v19-purple) 14%, #fff));
  color: var(--v19-ink);
}

.hr-hierarchy-section .hr-step-outcomes .hr-step-number {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.hr-hierarchy-section .hr-step-outcomes p {
  color: var(--v19-muted);
}

@media (max-width: 900px) {
  .hr-continuity-grid {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: 34px;
  }

}

@media (max-width: 760px) {
  .hr-continuity-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .hr-hierarchy-head h2 {
    max-width: 14ch;
  }

  .hr-hierarchy-head {
    padding-left: 0;
  }

  .hr-hierarchy-head .hr-continuity-description {
    max-width: 32ch;
    margin-top: 18px;
  }

  .hr-hierarchy-section .hr-ladder-wrap {
    --hr-path-rail: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hr-hierarchy-section .hr-ladder-wrap.is-animated .hr-step { animation: none; }
}

/* A year of context, already assembled, opening into a human conversation. */
.year-ready-visual {
  width: min(980px, 100%);
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.year-ready-head {
  min-height: 62px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--v19-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.year-ready-agent { min-width: 0; display: flex; align-items: center; gap: 10px; }
.year-ready-agent > span:last-child { min-width: 0; display: grid; gap: 2px; }
.year-ready-agent-icon { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: var(--v19-blue-pale); color: var(--blue-deep); font-size: 17px; }
.year-ready-agent strong { font-size: 13px; line-height: 1.2; }
.year-ready-agent small { color: var(--v19-muted); font-size: 9px; }
.year-ready-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, #dff5e8 76%, #fff); color: #296548; font-size: 9px; font-weight: 800; }
.year-ready-status i { width: 6px; height: 6px; border-radius: 50%; background: #3b9d6b; box-shadow: 0 0 0 3px color-mix(in srgb, #3b9d6b 15%, transparent); }
.year-ready-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
.year-tracking { min-width: 0; padding: 18px 20px 20px; border-right: 1px solid var(--v19-line); background: color-mix(in srgb, var(--v19-bone) 70%, #fff); }
.year-months { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.year-months::before { content: ''; position: absolute; left: 3%; right: 3%; top: 7px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--v19-blue), var(--v19-purple)); opacity: .5; }
.year-months span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; color: var(--v19-muted); font-size: 7px; font-weight: 800; }
.year-months span::before { content: ''; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--v19-blue); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v19-blue) 25%, var(--v19-line)); }
.year-orbit { position: relative; width: min(100%, 350px); height: 230px; margin: 8px auto 5px; }
.orbit-ring { position: absolute; left: 50%; top: 50%; border: 1px solid color-mix(in srgb, var(--v19-blue) 16%, var(--v19-line)); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-ring-one { width: 195px; height: 195px; }
.orbit-ring-two { width: 145px; height: 145px; border-style: dashed; }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; border: 1px solid color-mix(in srgb, var(--v19-blue) 22%, var(--v19-line)); border-radius: 50%; display: grid; align-content: center; justify-items: center; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 14px 34px color-mix(in srgb, var(--v19-blue) 9%, transparent); }
.orbit-core strong { color: var(--blue-deep); font-size: 38px; line-height: .9; letter-spacing: -.06em; }
.orbit-core small { margin-top: 7px; color: var(--v19-muted); font-size: 8px; font-weight: 700; }
.orbit-signal { position: absolute; min-width: 70px; padding: 9px 10px; border: 1px solid var(--v19-line); border-radius: 12px; display: grid; gap: 2px; background: #fff; box-shadow: 0 8px 18px rgba(41, 47, 36, .06); }
.orbit-signal b { font-size: 15px; line-height: 1; }
.orbit-signal small { color: var(--v19-muted); font-size: 8px; }
.orbit-signal-goal { top: 18px; right: 7px; color: #326845; }
.orbit-signal-feedback { right: 14px; bottom: 20px; color: var(--blue-deep); }
.orbit-signal-moments { left: 8px; bottom: 38px; color: #78539a; }
.year-source-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.year-source-chips > span { min-width: 0; padding: 7px 5px; border: 1px solid var(--v19-line); border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; background: #fff; color: #50584d; font-size: 8px; font-weight: 750; }
.year-source-chips i { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #e6f4eb; color: #2f8055; font-size: 7px; font-style: normal; }
.year-conversation { min-width: 0; padding: 26px 28px 24px; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.conversation-people { display: flex; align-items: center; }
.conversation-avatar { width: 43px; height: 43px; border: 3px solid #fff; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 850; box-shadow: 0 0 0 1px var(--v19-line); }
.conversation-avatar-manager { background: #50616f; }
.conversation-avatar-teammate { margin-left: -5px; background: var(--v19-purple); }
.conversation-link { position: relative; z-index: 1; width: 24px; height: 24px; margin-left: -5px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; background: var(--v19-blue-pale); color: var(--blue-deep); font-size: 10px; }
.conversation-ready { margin-top: 18px; color: var(--blue-deep); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.year-conversation h4 { max-width: 9ch; margin: 6px 0 17px; font-family: var(--v19-display); font-size: clamp(29px, 3.1vw, 42px); font-weight: 720; line-height: .98; letter-spacing: -.055em; }
.conversation-focus { display: grid; gap: 7px; }
.conversation-focus > span { padding: 8px 10px; border-radius: 10px; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; background: var(--v19-bone); }
.conversation-focus i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--blue-deep); font-size: 12px; font-style: normal; font-weight: 800; }
.conversation-focus > span > span { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.conversation-focus strong { font-size: 10px; }
.conversation-focus small { color: var(--v19-muted); font-size: 8px; text-align: right; }
.review-ready-strip { margin-top: 10px; padding: 9px 11px; border: 1px solid color-mix(in srgb, #3b9d6b 26%, var(--v19-line)); border-radius: 10px; display: flex; align-items: center; gap: 9px; background: color-mix(in srgb, #e6f4eb 62%, #fff); }
.review-ready-strip > span:first-child { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #3b9d6b; color: #fff; font-size: 10px; font-weight: 900; }
.review-ready-strip > span:last-child { display: grid; gap: 1px; }
.review-ready-strip strong { color: #275f44; font-size: 10px; }
.review-ready-strip small { color: #547064; font-size: 8px; }
.year-ready-footer { padding: 11px 18px; border-top: 1px solid var(--v19-line); background: var(--v19-blue-pale); color: var(--blue-deep); font-size: 9px; font-weight: 750; text-align: center; }

/* Evidence-backed pre-draft, manager judgement and team calibration. */
.review-calibration-visual { width: min(980px, 100%); margin-inline: auto; padding: 0; overflow: hidden; background: #fff; }
.review-calibration-head { min-height: 62px; padding: 13px 18px; border-bottom: 1px solid var(--v19-line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.review-calibration-head > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.review-calibration-head > div > span:last-child { min-width: 0; display: grid; gap: 2px; }
.review-calibration-head strong { font-size: 13px; line-height: 1.2; }
.review-calibration-head small { color: var(--v19-muted); font-size: 9px; }
.review-agent-mark { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: var(--v19-blue-pale); color: var(--blue-deep); font-size: 17px; }
.evidence-ready-badge { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, #dff5e8 76%, #fff); color: #296548; font-size: 9px; font-weight: 800; }
.evidence-ready-badge i { width: 6px; height: 6px; border-radius: 50%; background: #3b9d6b; box-shadow: 0 0 0 3px color-mix(in srgb, #3b9d6b 15%, transparent); }
.review-calibration-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); }
.evidence-draft { min-width: 0; padding: 18px 20px 20px; border-right: 1px solid var(--v19-line); background: color-mix(in srgb, var(--v19-bone) 70%, #fff); }
.evidence-yearline { position: relative; margin-bottom: 17px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.evidence-yearline::before { content: ''; position: absolute; left: 3%; right: 3%; top: 7px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--v19-blue), var(--v19-purple)); opacity: .5; }
.evidence-yearline span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; color: var(--v19-muted); font-size: 7px; font-weight: 800; }
.evidence-yearline span::before { content: ''; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--v19-blue); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v19-blue) 25%, var(--v19-line)); }
.evidence-draft-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.evidence-draft-title > span:first-child { display: grid; gap: 2px; }
.evidence-draft-title small, .calibration-kicker { color: var(--blue-deep); font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.evidence-draft-title h4 { margin: 0; font-size: 19px; line-height: 1.15; letter-spacing: -.03em; }
.linked-evidence { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; background: var(--v19-blue-pale); color: var(--blue-deep); font-size: 8px; font-weight: 800; }
.highlight-pair { margin-top: 12px; display: grid; gap: 8px; }
.highlight-pair article { min-width: 0; padding: 10px; border: 1px solid var(--v19-line); border-radius: 11px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 9px; background: #fff; }
.highlight-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.highlight-positive .highlight-icon { background: #e4f4e9; color: #2d7951; }
.highlight-attention .highlight-icon { background: #fff0eb; color: #ad5038; }
.highlight-pair article > div { min-width: 0; display: grid; gap: 2px; }
.highlight-label { color: var(--v19-muted); font-size: 8px; font-weight: 800; }
.highlight-positive .highlight-label { color: #2d7951; }
.highlight-attention .highlight-label { color: #ad5038; }
.highlight-pair strong { overflow: hidden; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.highlight-pair small { overflow: hidden; color: var(--v19-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.evidence-count { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--v19-bone); color: var(--v19-muted); font-size: 8px; font-weight: 800; }
.evidence-count::after { content: '↗'; margin-left: 1px; font-size: 6px; }
.manager-addition { margin-top: 10px; padding: 10px; border: 1px dashed color-mix(in srgb, var(--blue-deep) 38%, var(--v19-line)); border-radius: 11px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; background: color-mix(in srgb, var(--v19-blue-pale) 30%, #fff); }
.manager-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #50616f; color: #fff; font-size: 10px; font-weight: 850; }
.manager-addition > div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.manager-addition > div > span:first-child { min-width: 0; display: grid; gap: 2px; }
.manager-addition strong { font-size: 9px; }
.manager-addition small { overflow: hidden; color: var(--v19-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.manager-judgement { flex: 0 0 auto; padding: 4px 6px; border-radius: 6px; background: #fff; color: var(--blue-deep); font-size: 7px; font-weight: 850; }
.team-calibration { min-width: 0; padding: 22px 24px 20px; display: flex; flex-direction: column; justify-content: center; }
.team-calibration h4 { max-width: 15ch; margin: 5px 0 14px; font-size: 23px; line-height: 1.04; letter-spacing: -.045em; }
.team-rating-list { display: grid; gap: 6px; }
.team-rating-list > div { min-width: 0; padding: 7px 8px; border-radius: 9px; display: grid; grid-template-columns: 26px minmax(60px, 1fr) auto 27px; align-items: center; gap: 7px; background: var(--v19-bone); }
.team-rating-list > div:first-child { outline: 1px solid color-mix(in srgb, var(--blue-deep) 35%, var(--v19-line)); background: color-mix(in srgb, var(--v19-blue-pale) 42%, #fff); }
.team-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 8px; font-weight: 850; }
.team-avatar-one { background: var(--v19-purple); }
.team-avatar-two { background: #6e8a95; }
.team-avatar-three { background: #d18662; }
.team-avatar-four { background: #557c66; }
.team-rating-list > div > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.team-rating-list strong { font-size: 9px; }
.team-rating-list small { color: var(--v19-muted); font-size: 7px; }
.team-rating-list b { font-size: 9px; text-align: right; font-variant-numeric: tabular-nums; }
.rating-dots { display: flex; gap: 3px; }
.rating-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-deep); opacity: 1; }
.rating-dots i:last-child { background: var(--v19-line); }
.rating-three i:nth-last-child(-n+2) { background: var(--v19-line); }
.rating-five i:last-child { background: var(--blue-deep); }
.calibration-check { margin-top: 9px; padding: 8px 9px; border: 1px solid color-mix(in srgb, #3b9d6b 26%, var(--v19-line)); border-radius: 9px; display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, #e6f4eb 62%, #fff); }
.calibration-check > span:first-child { width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #3b9d6b; color: #fff; font-size: 9px; font-weight: 900; }
.calibration-check > span:last-child { display: grid; gap: 1px; }
.calibration-check strong { color: #275f44; font-size: 9px; }
.calibration-check small { color: #547064; font-size: 7px; }
.review-calibration-footer { padding: 11px 18px; border-top: 1px solid var(--v19-line); display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--v19-blue-pale); color: var(--blue-deep); font-size: 9px; font-weight: 800; text-align: center; }

/* Salary decision visual: market position first, supporting context second. */
.salary-benchmark { width: min(560px, 100%); margin-inline: auto; padding: 20px 0 22px; }
.salary-benchmark-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.salary-benchmark-head > div { display: grid; gap: 3px; }
.salary-benchmark-head > div:last-child { text-align: right; }
.salary-benchmark-head span { color: var(--v19-muted); font-size: 10px; }
.salary-benchmark-head strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.salary-range { position: relative; height: 62px; margin-top: 10px; }
.salary-range::before { content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 10px; border-radius: 999px; background: #dfe1dc; box-shadow: inset 0 0 0 1px rgba(55, 61, 51, .06); }
.salary-range-band { position: absolute; left: 20%; right: 18%; top: 30px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--v19-blue-pale) 55%, var(--v19-blue)), var(--v19-blue) 55%, color-mix(in srgb, var(--v19-purple) 60%, #fff)); }
.salary-marker { position: absolute; left: var(--salary-position); top: 0; z-index: 1; display: grid; justify-items: center; transform: translateX(-50%); }
.salary-marker::after { content: ''; width: 3px; height: 25px; margin-top: 3px; border-radius: 999px; background: var(--v19-ink); box-shadow: 0 0 0 3px #fff; }
.salary-marker b { padding: 3px 6px; border-radius: 6px; background: var(--v19-ink); color: #fff; font-size: 9px; font-variant-numeric: tabular-nums; }
.salary-marker small { order: 3; margin-top: 3px; color: var(--v19-muted); font-size: 8px; }
.salary-marker-mid::after { background: var(--blue-deep); }
.salary-marker-mid b { background: var(--blue-deep); }
.salary-range-labels { display: flex; justify-content: space-between; color: var(--v19-muted); font-variant-numeric: tabular-nums; }
.salary-range-labels > span { display: grid; gap: 2px; }
.salary-range-labels > span:last-child { justify-items: end; }
.salary-range-labels small { font-size: 8px; }
.salary-range-labels b { color: var(--v19-ink); font-size: 10px; }
.salary-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.salary-decision-grid > div { min-width: 0; padding: 10px 11px; border-radius: 11px; background: var(--v19-bone); }
.salary-decision-grid span { display: block; color: var(--v19-muted); font-size: 9px; }
.salary-decision-grid strong { display: block; margin-top: 3px; font-size: 12px; line-height: 1.25; }

.pillar-matrix .pricing-row td strong { display: block; color: var(--v19-ink); font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pillar-matrix .pricing-row td small { display: block; margin-top: 5px; color: var(--v19-muted); font-size: 9px; font-weight: 600; line-height: 1.35; }
.pricing-context-note { max-width: 930px; margin: 15px auto 0; color: var(--v19-muted); font-size: 11px; line-height: 1.5; }
.pricing-context-note strong { color: var(--v19-ink); }

@media (max-width: 760px) {
  .review-calibration-head { padding: 12px 13px; }
  .review-calibration-grid { grid-template-columns: 1fr; }
  .evidence-draft { padding: 16px 14px 17px; border-right: 0; border-bottom: 1px solid var(--v19-line); }
  .manager-addition > div { align-items: flex-start; flex-direction: column; }
  .manager-addition small { white-space: normal; }
  .team-calibration { padding: 20px 16px 18px; }
  .team-calibration h4 { font-size: 25px; }
  .team-rating-list > div { grid-template-columns: 26px minmax(68px, 1fr) auto 27px; }
  .review-calibration-footer { padding-inline: 13px; }
  .year-ready-head { padding: 12px 13px; }
  .year-ready-agent small { max-width: 22ch; }
  .year-ready-grid { grid-template-columns: 1fr; }
  .year-tracking { padding: 16px 14px 18px; border-right: 0; border-bottom: 1px solid var(--v19-line); }
  .year-orbit { height: 215px; margin-top: 5px; }
  .orbit-ring-one { width: 184px; height: 184px; }
  .orbit-ring-two { width: 136px; height: 136px; }
  .orbit-signal-goal { right: 0; }
  .orbit-signal-feedback { right: 2px; bottom: 14px; }
  .orbit-signal-moments { left: 0; bottom: 30px; }
  .year-source-chips { grid-template-columns: 1fr 1fr; }
  .year-conversation { padding: 22px 18px 20px; }
  .year-conversation h4 { max-width: 10ch; font-size: 33px; }
  .conversation-focus > span > span { display: grid; gap: 2px; }
  .conversation-focus small { text-align: left; }
  .year-ready-footer { padding-inline: 14px; }
  .salary-benchmark { width: min(330px, 100%); }
  .salary-benchmark-head strong { font-size: 15px; }
  .salary-benchmark-head span { font-size: 9px; }
  .salary-marker-current { --salary-position: 36% !important; }
  .salary-marker-mid { --salary-position: 64% !important; }
  .salary-decision-grid { grid-template-columns: 1fr 1fr; }
  .salary-decision-grid > div:last-child { grid-column: 1 / -1; }
  .pillar-matrix .pricing-row td strong { font-size: 14px; }
  .pillar-matrix .pricing-row td small { font-size: 10px; }
  .pricing-context-note { padding-inline: 4px; font-size: 10px; }
}