:root {
  --navy: #203967;
  --navy-dark: #152d55;
  --blue: #4995ee;
  --cyan: #55d2e6;
  --mint: #67d5b7;
  --pink: #ee74cb;
  --orange: #f6a63b;
  --paper: #ffffff;
  --canvas: #f3f7fb;
  --line: #dfe8f2;
  --muted: #7890b2;
  --shadow: 0 22px 60px rgba(33, 63, 105, 0.14);
  --header-h: 72px; /* matches the real .vt-nav-inner height (72px) so the pinned stage sits right under the site nav */
  --window-header-h: 70px;
  --cost-card-head: 68px;
  --cost-card-foot: 58px;
}

/* Everything below is scoped to #aruna-story so it can never affect the rest of the home page.
   Selectors like html/body/dt/dd inside this block only match elements INSIDE #aruna-story
   (they can't match ancestors), so they become harmless no-ops outside it. */
@scope (#aruna-story) {

  /* No overflow-x here on purpose: setting only one overflow axis makes the browser create an
     implicit scroll container on this element, which breaks .experience-stage's position:sticky
     (it would then pin against #aruna-story's own scroll instead of the page's). The original
     package set body{overflow-x:hidden} for the same reason its standalone preview needed it;
     the real page already has its own overflow-x handling, so it isn't needed here. */
  :scope { color: var(--navy); background: #fff; font-family: Inter, "Segoe UI", Arial, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--navy); background: #fff; font-family: Inter, "Segoe UI", Arial, sans-serif; overflow-x: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 999; left: 16px; top: -60px; padding: 12px 18px; background: var(--navy); color: white; }
.skip-link:focus { top: 12px; }
.integration-header-space { width: 100%; height: var(--header-h); background: white; }

.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h); padding: 0 clamp(24px, 3vw, 54px);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
}
.brand { display: flex; flex-direction: column; width: 200px; text-decoration: none; }
.brand img { width: 190px; height: auto; display: block; }
.brand span { margin: -7px 0 0 50px; font-size: 8px; color: var(--navy-dark); }
.site-header nav { display: flex; justify-content: center; gap: clamp(18px, 2.4vw, 38px); }
.site-header nav a { text-decoration: none; text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.header-cta, .primary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; text-decoration: none;
  background: #078ccb; color: white; min-height: 48px; padding: 0 22px; font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .035em; box-shadow: 0 12px 28px rgba(0,139,202,.2); cursor: pointer;
}

.story { min-height: calc(100svh - var(--header-h)); }
.experience-stage {
  position: sticky; top: var(--header-h); width: 100vw; height: calc(100dvh - var(--header-h)); min-height: 0; overflow: hidden;
  background:
    radial-gradient(circle at 12% 84%, rgba(85,210,230,.12), transparent 22%),
    linear-gradient(135deg, #fff 0%, #fff 58%, #f7faff 100%);
}
.scene {
  position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(18px); transition: opacity .42s ease, transform .56s cubic-bezier(.2,.75,.25,1), visibility 0s linear .58s;
}
.scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: .12s, .12s, 0s; }
.scene-intro { position: absolute; z-index: 5; left: clamp(36px, 3.2vw, 62px); top: clamp(30px, 4.5vh, 48px); width: 20.5%; }
.scene-intro h2 { margin: 10px 0 16px; max-width: 390px; color: var(--navy-dark); font-size: clamp(28px, 2.7vw, 46px); line-height: .98; letter-spacing: -.045em; }
.scene-intro > p:not(.eyebrow):not(.story-bridge) { margin: 0; color: #60799f; font-size: clamp(13px, 1.05vw, 17px); line-height: 1.55; }
.eyebrow { margin: 0; color: var(--orange); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.eyebrow.blue { color: var(--blue); }
.eyebrow.cyan { color: #0b9fb8; }
.eyebrow.pink { color: var(--pink); }
.eyebrow.orange { color: var(--orange); }

.hero-copy { position: absolute; z-index: 4; left: clamp(42px, 4.2vw, 76px); top: clamp(34px, 5vh, 54px); width: min(46vw, 690px); }
.hero-copy h1 { max-width: 680px; margin: 14px 0 20px; font-size: clamp(50px, 5.15vw, 78px); line-height: .91; letter-spacing: -.058em; color: var(--navy); }
.hero-copy .lead { max-width: 610px; margin: 0 0 22px; color: #60799f; font-size: clamp(15px, 1.16vw, 18px); line-height: 1.5; }
.intent-panel {
  width: min(100%, 680px); min-height: 112px; padding: 16px 20px;
  display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "prefix role" "cta cta";
  align-items: center; column-gap: 12px; row-gap: 10px; overflow: hidden;
  border: 1px solid #cfe1f2; border-left: 5px solid var(--blue); background: white;
  box-shadow: 0 16px 38px rgba(31,65,108,.13);
}
.intent-prefix { grid-area: prefix; color: var(--navy); font-size: clamp(13px, 1.02vw, 16px); font-weight: 900; white-space: nowrap; }
[data-role-variable] {
  grid-area: role; min-width: 0; color: #078ccb; font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.1; white-space: nowrap; opacity: 1; transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}
[data-role-variable].is-changing { opacity: 0; transform: translateY(5px); }
.intent-cta {
  grid-area: cta; width: fit-content; min-height: 40px; padding: 0;
  border: 0; border-bottom: 2px solid var(--blue); background: transparent;
  color: var(--navy); text-align: left; font-size: clamp(14px, 1.12vw, 17px); font-weight: 900;
  cursor: pointer;
}
.intent-cta::after { content: "→"; display: inline-block; margin-left: 9px; color: var(--blue); transition: transform .2s ease; }
.intent-cta:hover::after, .intent-cta:focus-visible::after { transform: translateX(3px); }
.intent-cta:hover, .intent-cta:focus-visible { color: #078ccb; border-bottom-color: var(--navy); }
.proof-list { display: flex; gap: 24px; padding: 0; margin: 20px 0 0; color: #7088aa; list-style: none; font-size: 12px; }
.proof-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--cyan); }
.hero-cue { position: absolute; z-index: 4; left: clamp(46px, 6vw, 104px); bottom: 22px; display: flex; align-items: center; gap: 12px; color: #7890b2; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 800; }
.hero-cue i { width: 21px; height: 34px; border: 1px solid #b6c6dc; border-radius: 12px; }
.hero-cue i::before { content: ""; display: block; width: 3px; height: 7px; margin: 7px auto; background: var(--blue); border-radius: 3px; }
.hero-anchor { position: absolute; right: 0; top: 0; width: 48%; height: 100%; }

.moving-aruna {
  position: absolute; z-index: 30; left: 52%; top: 0; width: 48%; height: 100%; overflow: hidden;
  pointer-events: none; box-shadow: 0 10px 30px rgba(30,55,90,.18);
  transition: left .74s cubic-bezier(.2,.82,.2,1), top .74s cubic-bezier(.2,.82,.2,1),
    width .74s cubic-bezier(.2,.82,.2,1), height .74s cubic-bezier(.2,.82,.2,1),
    border-radius .56s ease, box-shadow .4s ease;
}
.moving-aruna img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
.moving-aruna:not([data-scene="0"]) { border: 3px solid white; box-shadow: 0 8px 22px rgba(31,59,101,.23); }
.stripe { position: absolute; left: -15%; width: 130%; height: 12%; background: white; transform: rotate(12deg); transition: opacity .25s ease; }
.stripe-1 { top: 8%; }.stripe-2 { top: 31%; }.stripe-3 { top: 57%; }.stripe-4 { top: 82%; }
.moving-aruna:not([data-scene="0"]) .stripe { opacity: 0; }
.image-anchor { display: block; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: #f7fbff; border: 2px solid #d6e2f1; }
.image-anchor.hero-anchor { position: absolute; right: 0; top: 0; width: 48%; height: 100%; border: 0; border-radius: 0; background: transparent; }

.app-window { position: absolute; z-index: 3; right: clamp(14px, 1.5vw, 28px); top: 0; bottom: 50px; width: 74%; background: var(--canvas); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.window-header { height: var(--window-header-h); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: white; border-bottom: 1px solid var(--line); }
.window-header strong { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.window-header > span { font-size: 10px; color: #8699b6; }
.vt-mark, .location-mark { width: 33px; height: 33px; display: inline-grid; place-items: center; border: 3px solid #647a9c; border-radius: 50%; color: #078ccb; font-size: 9px; font-weight: 900; }
.customer-mark { border-color: var(--blue); background: #edf6ff; color: var(--navy); }
.window-product { display: grid; gap: 2px; line-height: 1.05; }
.window-product small { color: #8297b4; font-size: 7px; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--mint); }

[data-type-reveal] { white-space: pre-wrap; }
[data-type-reveal] .type-char {
  display: inline;
  opacity: 0;
  transform: translateY(2px);
}
.scene.is-active [data-type-reveal] .type-char {
  animation: type-character .001s steps(1, end) both;
  animation-delay:
    calc(
      170ms +
      (var(--reveal-order) * 34ms) +
      (var(--char-index) * 16ms)
    );
}
.scene.reveal-complete [data-type-reveal] .type-char {
  opacity: 1;
  transform: none;
  animation: none;
}
.scene.is-active [data-type-reveal].is-reveal-last::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: .9em;
  margin-left: 2px;
  vertical-align: -.08em;
  background: var(--blue);
  animation: type-cursor .48s steps(1, end) 5, hide-cursor .001s 2.9s forwards;
}
@keyframes type-character {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
@keyframes type-cursor { 50% { opacity: 0; } }
@keyframes hide-cursor { to { opacity: 0; } }

.employee-layout { height: calc(100% - var(--window-header-h)); padding: 38px; display: grid; grid-template-columns: 36% 1fr; gap: 32px; }
.employee-profile { padding: 20px 14px; }
.profile-heading { display: flex; align-items: center; gap: 14px; min-height: 50px; }
.profile-heading h3 { margin: 0 0 3px; font-size: 18px; }
.profile-heading p { margin: 0; color: #8ba0bd; font-size: 12px; }
.employee-profile dl { margin: 32px 0 0; }
.employee-profile dl div + div { margin-top: 20px; }
.employee-capabilities { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.employee-capabilities span {
  position: relative; min-height: 31px; padding: 6px 8px 6px 23px; display: flex; align-items: center;
  background: white; color: #526e95; box-shadow: 0 5px 14px rgba(35,61,97,.07);
  font-size: 9px; font-weight: 800; line-height: 1.2;
}
.employee-capabilities span::before {
  content: "✓"; position: absolute; left: 8px; top: 50%; color: #0b9fb8;
  font-size: 10px; transform: translateY(-50%);
}
.onboard-capabilities { margin-top: 12px; grid-template-columns: 1fr; gap: 5px; }
.onboard-capabilities span::before { content: "✓"; }
dt { font-size: 10px; text-transform: uppercase; font-weight: 800; color: #7085a6; }
dd { margin: 6px 0 0; font-size: 13px; line-height: 1.55; }
.job-details { align-self: center; background: white; box-shadow: 0 17px 42px rgba(35,61,97,.12); }
.job-details h3 { margin: 0; padding: 21px 25px; border-bottom: 1px solid var(--line); font-size: 14px; }
.job-details dl { padding: 12px 24px 4px; margin: 0; }
.job-details dl div { display: grid; grid-template-columns: 33% 1fr; align-items: center; margin: 7px 0; }
.job-details dd { margin: 0; padding: 10px 13px; background: #f0f4f9; color: #7289aa; font-size: 11px; }
.window-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 7px 24px 17px; font-size: 10px; }
.window-actions span, .window-actions strong { padding: 10px 14px; background: #fff; }
.window-actions strong { background: var(--blue); color: #fff; }

.benefit-stack { margin-top: 25px; display: grid; gap: 10px; }
.benefit-stack div { padding: 12px 14px; border-left: 4px solid var(--cyan); background: #f3fbfd; }
.benefit-stack strong, .benefit-stack span { display: block; }
.benefit-stack strong { margin-bottom: 5px; font-size: 12px; }
.benefit-stack span { color: #7790b1; font-size: 10px; line-height: 1.45; }
.directory-layout { height: calc(100% - var(--window-header-h)); display: grid; grid-template-columns: 155px 1fr; gap: 20px; padding: 28px; }
.filters { padding: 5px 4px; }
.filters strong { display: block; margin: 0 0 9px; font-size: 10px; }
.filters strong:not(:first-child) { margin-top: 22px; }
.filters i { display: block; width: 72%; height: 7px; margin: 6px 0; background: #dae3ee; border-left: 8px solid var(--cyan); border-radius: 2px; }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; min-height: 0; }
.people-grid article { position: relative; min-width: 0; padding: 18px 8px 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; text-align: center; box-shadow: 0 8px 24px rgba(35,61,97,.08); }
.people-grid article.selected { border: 2px solid var(--cyan); }
.people-grid article > b, .level-cards article > b { position: absolute; top: 8px; right: 8px; padding: 4px 6px; background: #dff8ef; color: #1d9878; font-size: 7px; text-transform: uppercase; }
.people-grid h3 { margin: 7px 0 4px; font-size: 11px; }
.people-grid p { margin: 0; font-size: 8px; color: #8296b3; }
.people-grid small { margin-top: 8px; font-size: 7px; color: #a0aec1; }
.initial { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 3px solid white; border-radius: 50%; color: white; box-shadow: 0 5px 12px rgba(31,57,97,.18); font-size: 9px; font-weight: 800; }
.blue-bg { background: var(--blue); }.mint-bg { background: var(--mint); }.pink-bg { background: var(--pink); }.orange-bg { background: var(--orange); }
.directory-anchor { width: 40px; height: 40px; }

.story-bridge { margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--navy); font-weight: 800; font-size: clamp(11px, .9vw, 13px); line-height: 1.45; }
.story-bridge::after { content: " →"; color: var(--blue); }
.discovery-cta { margin-top: 13px; padding: 12px 13px; border-left: 4px solid var(--blue); background: #edf7ff; box-shadow: 0 8px 22px rgba(35,61,97,.08); }
.discovery-cta strong { display: block; color: var(--navy); font-size: clamp(10px, .78vw, 12px); line-height: 1.4; }
.discovery-cta strong span { display: block; margin-top: 2px; color: #078ccb; font-size: 1.25em; }
.discovery-cta button { margin-top: 8px; padding: 0 0 4px; border: 0; border-bottom: 2px solid var(--blue); background: transparent; color: var(--navy); font: inherit; font-size: clamp(9px, .72vw, 11px); font-weight: 900; cursor: pointer; }
.discovery-cta button::after { content: "→"; display: inline-block; margin-left: 7px; color: var(--blue); transition: transform .2s ease; }
.discovery-cta button:hover::after, .discovery-cta button:focus-visible::after { transform: translateX(3px); }
.story-conclusion { margin: 14px 0 18px; }
.story-conclusion::after { content: ""; }
.comparison-grid { height: calc(100% - var(--window-header-h)); padding: 34px; display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; gap: 14px; }
.role-card { background: white; box-shadow: 0 15px 38px rgba(34,61,99,.1); border: 1px solid transparent; }
.role-card.selected { border: 2px solid var(--cyan); }
.role-person { min-height: 76px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.role-person h3 { margin: 0 0 4px; font-size: 14px; }
.role-person p { margin: 0; font-size: 9px; color: #869bb7; }
.comparison-anchor { width: 44px; height: 44px; }
.role-card dl { margin: 0; padding: 18px 22px; }
.role-card dl div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #edf2f7; }
.role-card dt { font-size: 9px; }
.role-card dd { margin: 0; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.role-card footer { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: white; }
.role-card.offshore footer { background: #078ccb; }
.role-card footer > span { font-size: 9px; text-transform: uppercase; }
.role-card footer strong { font-size: clamp(32px, 2.6vw, 42px); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.versus { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--blue); box-shadow: 0 8px 20px rgba(35,61,97,.15); font-size: 10px; font-weight: 900; }

.levels-layout { height: calc(100% - var(--window-header-h)); padding: 32px; display: grid; grid-template-columns: 170px 1fr; gap: 20px; }
.person-selector { padding: 10px 0; }
.person-selector > strong { display: block; margin: 0 0 14px; font-size: 11px; text-transform: uppercase; }
.person-selector > div { min-height: 46px; padding: 7px 9px; display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; }
.person-selector > div.active { background: white; box-shadow: 0 8px 20px rgba(35,61,97,.1); }
.person-selector .initial, .levels-anchor { width: 31px; height: 31px; }
.level-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-height: 0; }
.level-cards article { position: relative; min-width: 0; padding: 27px 18px 18px; display: flex; flex-direction: column; background: white; box-shadow: 0 12px 30px rgba(35,61,97,.08); }
.level-cards article.active { border: 2px solid var(--cyan); }
.level-cards article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #ecf2f8; color: #59708f; font-size: 10px; font-weight: 800; }
.level-cards article.active > span { background: #dff8fb; color: #087e95; }
.level-cards h3 { margin: 12px 0 4px; font-size: 15px; }
.level-cards p { margin: 0; color: #8598b4; font-size: 9px; }
.level-cards ul { min-height: 0; flex: 1; padding-left: 15px; margin: 10px 0 8px; display: flex; flex-direction: column; justify-content: space-evenly; gap: 4px; color: #536d93; font-size: clamp(8px, .65vw, 10px); line-height: 1.35; }
.level-cards li::marker { color: var(--blue); }
.level-stack { padding-top: 9px; border-top: 1px solid var(--line); }
.level-stack .level-label { margin-top: 6px; color: #486482; font-size: 7.5px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.level-stack .level-label:first-child { margin-top: 0; }
.level-stack .level-detail { margin-top: 2px; color: #657d9f; font-size: clamp(7.5px, .58vw, 9px); line-height: 1.35; }
.level-cards footer { margin-top: 10px; padding-top: 9px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); color: #758aa7; font-size: 8px; }
.level-cards footer span { white-space: nowrap; }
.level-cards footer strong { color: var(--navy); font-size: 20px; font-variant-numeric: tabular-nums; }

.saving-card { margin: 24px 0 18px; padding: 17px 18px; background: #e7f8f3; border-left: 4px solid var(--mint); }
.saving-card span, .saving-card strong, .saving-card small { display: block; }
.saving-card span { color: #5f7d75; text-transform: uppercase; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.saving-card strong { margin: 7px 0 2px; color: #118b72; font-size: clamp(30px, 3vw, 46px); }
.saving-card small { color: #65867d; font-size: 8px; }
.cost-window { height: auto; }
.cost-window .window-header { padding-right: 72px; }
.cost-anchor { position: absolute; right: 22px; top: 15px; width: 40px; height: 40px; }
.cost-columns { height: calc(100% - var(--window-header-h)); padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cost-columns > article { position: relative; min-width: 0; display: grid; grid-template-rows: var(--cost-card-head) 1fr var(--cost-card-foot); background: white; box-shadow: 0 10px 24px rgba(35,61,97,.08); }
.cost-columns > article > header { height: 68px; padding: 0 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.cost-columns header div strong, .cost-columns header div small { display: block; }
.cost-columns header div strong { font-size: 11px; }
.cost-columns header div small { margin-top: 3px; color: #91a2b9; font-size: 7px; }
.cost-columns dl { min-height: 0; margin: 0; padding: 8px 15px; display: grid; grid-template-rows: repeat(7, 1fr); }
.cost-columns dl div { min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #edf2f7; }
.cost-columns dt { text-transform: none; font-size: 8px; }
.cost-columns dd { margin: 0; text-align: right; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cost-columns footer { min-width: 0; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: white; }
.cost-columns article.offshore footer { background: #078ccb; }
.cost-columns footer > span { font-size: 9px; text-transform: uppercase; font-weight: 800; }
.cost-columns footer strong { font-size: clamp(32px, 2.55vw, 41px); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }

.story-progress { position: absolute; z-index: 50; left: 17px; top: 50%; display: grid; gap: 7px; transform: translateY(-50%); }
.story-progress button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 5px; background: #d5e0ee; cursor: pointer; transition: height .3s, background .3s; }
.story-progress button.is-active { height: 28px; background: var(--blue); }
.story-progress button span { position: absolute; left: 18px; top: 50%; width: max-content; padding: 6px 8px; border-radius: 3px; background: var(--navy); color: white; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-4px); font-size: 8px; text-transform: uppercase; transition: .2s ease; }
.story-progress button:hover span, .story-progress button:focus-visible span { opacity: 1; transform: translateY(-50%); }
.story-controls { position: absolute; z-index: 50; right: clamp(26px, 3.3vw, 64px); bottom: 8px; display: flex; align-items: center; gap: 8px; }
.scene-count { margin-right: 8px; color: #8ba0bc; font-size: 12px; font-variant-numeric: tabular-nums; }
.scene-count b { color: var(--navy); font-size: 20px; }
.story-controls button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); background: white; font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 15px rgba(35,61,97,.08); }
.story-controls button:last-child { min-width: 92px; background: var(--navy); color: white; border-color: var(--navy); }
.story-controls button:disabled { opacity: .35; cursor: default; }

.mobile-story { display: none; }
.closing { min-height: 60svh; padding: 12vh clamp(28px, 9vw, 150px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--navy-dark); color: white; }
.closing h2 { max-width: 920px; margin: 16px 0 30px; font-size: clamp(35px, 5vw, 72px); line-height: .98; letter-spacing: -.045em; }

@media (max-width: 1180px) {
  .site-header nav { gap: 16px; }
  .header-cta { display: none; }
  .site-header { grid-template-columns: auto 1fr; }
  .scene-intro { left: 28px; width: 20.5%; }
  .scene-intro h2 { font-size: clamp(26px, 2.65vw, 38px); }
  .app-window { right: 14px; width: 73.5%; }
  .employee-layout { padding: 26px; gap: 20px; }
  .directory-layout { grid-template-columns: 120px 1fr; padding: 20px; }
  .window-header { padding: 0 20px; }
  .levels-layout { padding: 24px; grid-template-columns: 150px 1fr; }
  .story-controls { right: 24px; }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .site-header { position: sticky; padding: 0 18px; grid-template-columns: 1fr auto; }
  .brand { width: 165px; }
  .brand img { width: 160px; }
  .brand span { margin-left: 42px; font-size: 6px; }
  .site-header nav { display: none; }
  .header-cta { display: inline-flex; min-height: 38px; padding: 0 13px; font-size: 9px; }
  .experience-stage { display: none; }
  .mobile-story { display: block; background: #f7faff; }
  .mobile-story article { min-height: auto; padding: 54px clamp(22px, 7vw, 64px); border-bottom: 1px solid var(--line); }
  .mobile-story article:first-child { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; background: white; }
  .mobile-story article:first-child > img { width: 100%; max-height: 42svh; object-fit: cover; object-position: 50% 38%; border-radius: 18px; margin-bottom: 28px; }
  .mobile-story h1 { margin: 10px 0 18px; font-size: clamp(48px, 14vw, 76px); line-height: .88; letter-spacing: -.06em; }
  .mobile-story h2 { margin: 8px 0 22px; font-size: clamp(30px, 8vw, 46px); line-height: 1; letter-spacing: -.04em; }
  .mobile-story p { color: #6680a5; line-height: 1.55; }
  .mobile-story .intent-panel { margin-top: 22px; min-height: 122px; padding: 14px; grid-template-columns: 1fr; grid-template-areas: "prefix" "role" "cta"; gap: 7px; }
  .mobile-story [data-role-variable] { font-size: clamp(18px, 5vw, 24px); white-space: normal; }
  .mobile-story .intent-cta { font-size: 15px; }
  .mobile-story .step { margin: 0; color: var(--blue); font-size: 11px; font-weight: 800; }
  .mobile-profile { padding: 18px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 3px 14px; background: white; box-shadow: var(--shadow); }
  .mobile-profile.selected { border: 2px solid var(--cyan); }
  .mobile-profile img { grid-row: span 2; width: 54px; height: 54px; object-fit: cover; object-position: 52% 35%; border: 3px solid white; border-radius: 50%; box-shadow: 0 5px 15px rgba(35,61,97,.18); }
  .mobile-profile span { color: #7d91ae; font-size: 12px; }
  .mobile-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobile-compare div { padding: 18px; background: white; border: 1px solid var(--line); }
  .mobile-compare div:last-child { border: 2px solid var(--cyan); }
  .mobile-compare strong, .mobile-compare b { display: block; }
  .mobile-compare strong { min-height: 42px; font-size: 12px; }
  .mobile-compare b { margin-top: 18px; font-size: 23px; }
  .mobile-story .discovery-cta { margin-top: 18px; padding: 16px; }
  .mobile-story .discovery-cta strong { font-size: 15px; }
  .mobile-story .discovery-cta button { font-size: 13px; }
  .mobile-story ul { padding-left: 20px; color: #587297; line-height: 2; }
  .mobile-level-grid { display: grid; gap: 10px; }
  .mobile-level-grid section { padding: 18px; display: grid; gap: 8px; background: white; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(35,61,97,.07); }
  .mobile-level-grid section.selected { border: 2px solid var(--cyan); }
  .mobile-level-grid strong, .mobile-level-grid span, .mobile-level-grid small { display: block; }
  .mobile-level-grid strong { color: var(--navy); font-size: 14px; }
  .mobile-level-grid span { color: #536d93; font-size: 12px; line-height: 1.5; }
  .mobile-level-grid small { padding-top: 8px; border-top: 1px solid var(--line); color: #7890ad; font-size: 10px; line-height: 1.55; }
  .mobile-story .saving-card { margin-bottom: 22px; }
  .closing { min-height: 70svh; }
}

@media (min-width: 901px) and (max-height: 760px) {
  :root {
    --window-header-h: 58px;
    --cost-card-head: 54px;
    --cost-card-foot: 50px;
  }
  .scene-intro { top: 22px; }
  .scene-intro h2 { margin: 7px 0 10px; font-size: clamp(25px, 2.45vw, 35px); line-height: 1; }
  .scene-intro > p:not(.eyebrow):not(.story-bridge) { font-size: clamp(12px, .95vw, 14px); line-height: 1.42; }
  .hero-copy { top: 24px; }
  .hero-copy h1 { margin: 10px 0 13px; font-size: clamp(45px, 4.8vw, 65px); }
  .hero-copy .lead { margin-bottom: 14px; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.4; }
  .intent-panel { min-height: 92px; padding: 11px 16px; row-gap: 6px; }
  .intent-cta { min-height: 32px; }
  .proof-list { margin-top: 12px; }
  .hero-cue { bottom: 12px; }
  .app-window { bottom: 46px; }
  .window-header { padding: 0 20px; }
  .employee-layout { padding: 18px 24px; gap: 20px; }
  .employee-profile { padding: 10px; }
  .employee-profile dl { margin-top: 18px; }
  .employee-profile dl div + div { margin-top: 12px; }
  .employee-capabilities { margin-top: 10px; gap: 5px; }
  .employee-capabilities span { min-height: 25px; padding: 4px 6px 4px 19px; font-size: 8px; }
  .employee-capabilities span::before { left: 6px; font-size: 8px; }
  .job-details h3 { padding: 13px 20px; }
  .job-details dl { padding: 7px 20px 2px; }
  .job-details dl div { margin: 4px 0; }
  .job-details dd { padding: 7px 10px; }
  .window-actions { padding: 4px 20px 10px; }
  .benefit-stack { margin-top: 13px; gap: 6px; }
  .benefit-stack div { padding: 8px 10px; }
  .story-bridge { margin-top: 13px; padding-top: 9px; }
  .discovery-cta { margin-top: 8px; padding: 8px 10px; }
  .discovery-cta strong { font-size: 9px; line-height: 1.32; }
  .discovery-cta button { margin-top: 5px; font-size: 9px; }
  .directory-layout { grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 18px; }
  .filters strong:not(:first-child) { margin-top: 13px; }
  .people-grid { gap: 8px; }
  .people-grid article { padding: 12px 6px 8px; }
  .comparison-grid { padding: 18px 28px; }
  .role-person { min-height: 60px; padding: 11px 16px; }
  .role-card dl { padding: 10px 18px; }
  .role-card dl div { padding: 6px 0; }
  .role-card footer { padding: 10px 16px; }
  .levels-layout { padding: 16px 22px; grid-template-columns: 145px 1fr; gap: 14px; }
  .person-selector { padding: 2px 0; }
  .person-selector > div { min-height: 38px; padding: 4px 7px; }
  .level-cards { gap: 10px; }
  .level-cards article { padding: 15px 12px 10px; }
  .level-cards article > span { width: 31px; height: 31px; }
  .level-cards h3 { margin: 7px 0 3px; font-size: 13px; }
  .level-cards ul { margin: 6px 0 5px; gap: 3px; font-size: 8.2px; line-height: 1.24; }
  .level-stack { padding-top: 5px; }
  .level-stack .level-label { margin-top: 3px; font-size: 6.5px; }
  .level-stack .level-detail { margin-top: 1px; font-size: 7px; line-height: 1.2; }
  .level-cards footer { margin-top: 5px; padding-top: 5px; }
  .level-cards footer strong { font-size: 18px; }
  .saving-card { margin: 13px 0 10px; padding: 11px 13px; }
  .saving-card strong { margin: 3px 0 1px; font-size: clamp(28px, 2.6vw, 38px); }
  .story-conclusion { margin: 9px 0 11px; }
  .primary-button { min-height: 42px; }
  .cost-columns { padding: 12px 18px; gap: 10px; }
  .cost-columns > article > header { height: var(--cost-card-head); }
  .cost-columns dl { padding: 4px 12px; }
  .cost-columns dl div { padding: 4px 0; }
  .cost-columns dd { font-size: 12px; }
  .cost-columns footer strong { font-size: clamp(28px, 2.2vw, 34px); }
  .story-controls { bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .experience-stage { display: none; }
  .mobile-story { display: block; }
  [data-type-reveal] .type-char { opacity: 1; transform: none; animation: none; }
  [data-type-reveal]::after { display: none !important; }
}

}

/* This responsive :root override needs to escape the @scope block so the custom properties
   actually update on the real document root (@scope can't rewrite an ancestor's declarations).
   --header-h is NOT duplicated here: the real .vt-nav-inner is 72px at every width, so the
   fixed --header-h above is correct at all viewports and doesn't need a mobile override. */
@media (min-width: 901px) and (max-height: 760px) {
  :root { --window-header-h: 58px; --cost-card-head: 54px; --cost-card-foot: 50px; }
}