@font-face {
  font-family: Inter;
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Website V2 — software that fits the work */
.home-v2 {
  --v2-ink: #0b0e10;
  --v2-ink-soft: #121619;
  --v2-cream: #f0ece2;
  --v2-cream-deep: #e6dfd2;
  --v2-amber: #d89042;
  --v2-muted: #a4a39d;
  --v2-rule: rgba(240, 236, 226, 0.16);
  background: var(--v2-ink);
  color: var(--v2-cream);
}

.home-v2 .wrap { --wrap: min(1280px, calc(100% - 72px)); }
.home-v2 .site-nav { position: fixed; background: rgba(11, 14, 16, 0.94); }
html.motion-ready .home-v2 .site-nav:not(.is-compact) { background: transparent; }
.home-v2 .site-nav.is-compact {
  background: rgba(11, 14, 16, 0.91);
  border-bottom-color: var(--v2-rule);
}
.home-v2 .nav-inner { --wrap: min(1280px, calc(100% - 72px)); }
.home-v2 .nav-links { gap: clamp(.8rem, 1.8vw, 1.6rem); }
.home-v2 .nav-links a { font-size: .82rem; letter-spacing: .015em; }
.home-v2 .nav-cta { padding: .57rem .92rem; font-size: .82rem; }
.home-v2 .anchor-target { position: absolute; top: 0; scroll-margin-top: var(--nav-h); }
.home-v2 h1,
.home-v2 h2,
.home-v2 h3,
.home-v2 p { margin-top: 0; }
.home-v2 h2 { font-weight: 430; letter-spacing: -.048em; line-height: .98; }
.home-v2 .v2-eyebrow {
  margin-bottom: 1.7rem;
  color: #d9a061;
  font-size: .68rem;
  font-weight: 680;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.home-v2 .v2-text-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: .18rem;
  color: inherit;
  font-size: .88rem;
  font-weight: 620;
  text-decoration: none;
}
.home-v2 .v2-text-link span { color: var(--v2-amber); }
.v2-problem p,
.v2-response p,
.v2-approach p,
.v2-support-main p,
.v2-proof p,
.v2-about p { color: #343632; }
.v2-problem .v2-eyebrow,
.v2-response .v2-eyebrow,
.v2-approach .v2-eyebrow,
.v2-proof .v2-eyebrow,
.v2-about .v2-eyebrow { color: #70451f; }

.v2-opening {
  min-height: 154svh;
  background: var(--v2-ink);
  position: relative;
}
.v2-opening-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
}
.v2-opening-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 37%, rgba(216, 144, 66, .08) 0, transparent 43%),
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 52%);
}
.v2-opening-atmosphere::after {
  content: "";
  position: absolute;
  inset: 10% 14%;
  border: 1px solid rgba(240, 236, 226, .025);
  transform: perspective(900px) rotateX(4deg) rotateY(-3deg);
}
.v2-opening-grid {
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  padding-top: var(--nav-h);
  text-align: center;
}
.v2-opening-mark-wrap {
  width: clamp(190px, 20vw, 264px);
  height: clamp(190px, 20vw, 264px);
  margin-bottom: .7rem;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 16px rgba(216, 144, 66, .08));
  will-change: transform;
}
.v2-opening-mark { width: 100%; height: 100%; overflow: visible; }
.v2-mark-ghost { fill: none; stroke: var(--v2-amber); stroke-width: 5; opacity: .08; }
.v2-mark-outline,
.v2-mark-main,
.v2-mark-branch { fill: none; stroke: var(--v2-amber); stroke-dasharray: 1; stroke-dashoffset: 0; }
.v2-mark-outline { stroke-width: 6; stroke-linejoin: round; }
.v2-mark-main { stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.v2-mark-branch { stroke-width: 2.5; stroke-linecap: round; opacity: .48; }
.v2-mark-node { fill: var(--v2-amber); transform-box: fill-box; transform-origin: center; will-change: transform; }
.v2-mark-node-centre { filter: drop-shadow(0 0 10px rgba(216,144,66,.18)); }
.v2-mark-node-soft { opacity: .6; }
.v2-opening-copy { position: relative; z-index: 2; }
.v2-opening-name {
  margin-bottom: 1.15rem;
  color: var(--v2-cream);
  font-size: clamp(2.55rem, 5vw, 4.7rem);
  font-weight: 510;
  letter-spacing: -.065em;
  line-height: 1;
}
.v2-opening-copy h1 {
  margin: 0;
  color: var(--v2-cream);
  font-size: clamp(1.35rem, 2.55vw, 2.45rem);
  font-weight: 390;
  letter-spacing: -.04em;
  line-height: 1.08;
}
.v2-opening-copy h1 span { display: block; }
.v2-opening-copy h1 span:last-child { color: var(--v2-amber); }
.scene-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: none;
  width: 1.25rem;
  height: 1.75rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.motion-ready .scene-scroll-cue { display: block; }
.scene-scroll-cue svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.34));
}
.scene-scroll-cue-stem { stroke: rgba(243,238,228,.76); stroke-width: 1.2; }
.scene-scroll-cue-tip { stroke: var(--v2-amber); stroke-width: 1.8; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .scene-scroll-cue svg { animation: scene-scroll-cue-bounce 1.65s ease-in-out infinite; }
}
@keyframes scene-scroll-cue-bounce {
  0%, 100% { transform: translateY(-.14rem); }
  50% { transform: translateY(.28rem); }
}
.motion-ready .v2-mark-outline,
.motion-ready .v2-mark-main,
.motion-ready .v2-mark-branch,
.motion-ready .v2-opening-copy,
.motion-ready .v2-opening-copy h1 span { will-change: opacity, transform, stroke-dashoffset; }

.v2-problem {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding: clamp(8rem, 14vw, 13rem) 0 clamp(9rem, 15vw, 15rem);
  background: var(--v2-cream);
  color: #1d1f1f;
}
.v2-problem::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(2rem, 8vw, 9rem);
  width: 1px;
  height: clamp(5rem, 9vw, 9rem);
  background: var(--v2-amber);
}
.v2-problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(280px, .52fr);
  gap: clamp(4rem, 9vw, 10rem);
  align-items: end;
}
.v2-problem h2 { max-width: 940px; margin-bottom: 0; font-size: clamp(3.5rem, 6.7vw, 6.75rem); }
.v2-problem h2 span { display: block; }
.v2-problem-copy { max-width: 520px; padding-bottom: .4rem; }
.v2-problem-copy p { margin-bottom: 1.5rem; font-size: clamp(1.05rem, 1.45vw, 1.28rem); line-height: 1.58; }
.v2-problem-copy .v2-emphasis { margin-top: 3.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(29,31,31,.22); font-weight: 570; }

.v2-response { position: relative; z-index: 2; overflow: hidden; padding: clamp(8rem, 13vw, 13rem) 0; background: var(--v2-cream); color: #1c1f1f; }
.v2-response::after { content: ""; position: absolute; right: -10%; bottom: -35%; width: 48vw; aspect-ratio: 1; border: 1px solid rgba(216,144,66,.18); border-radius: 50%; }
.v2-response h2 { max-width: 1040px; margin: 0 0 clamp(4rem,8vw,8rem); font-size: clamp(3.4rem, 7vw, 7.3rem); }
.v2-response h2 span { display: block; color: #a96529; }
.v2-response-line { display: flex; align-items: center; width: min(80%, 860px); margin: 0 0 2.4rem auto; }
.v2-response-line i { display: block; flex: 0 0 .55rem; height: .55rem; border-radius: 50%; background: #a96529; }
.v2-response-line b { display: block; flex: 1; height: 1px; background: rgba(169,101,41,.5); }
.v2-response-copy { width: min(68%, 820px); margin-left: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); }
.v2-response-copy p { margin-bottom: 0; font-size: clamp(1.08rem,1.65vw,1.35rem); line-height: 1.6; }

.v2-approach { padding: clamp(7rem,12vw,12rem) 0; background: #d9c5a4; color: #1b1d1c; }
.v2-approach-layout { display: grid; grid-template-columns: minmax(0,.78fr) minmax(420px,1.22fr); gap: clamp(4rem,9vw,10rem); align-items: start; }
.v2-approach-lead { position: sticky; top: calc(var(--nav-h) + 4rem); }
.v2-approach h2 { max-width: 560px; margin-bottom: 2rem; font-size: clamp(3rem,5.2vw,5.7rem); }
.v2-approach-lead > p:not(.v2-eyebrow) { max-width: 530px; margin-bottom: 2rem; font-size: 1.08rem; }
.v2-approach-list { margin: 5rem 0 0; padding: 0; list-style: none; }
.v2-approach-list li { display: grid; grid-template-columns: 4.8rem 1fr; gap: 1.5rem; min-height: 10.5rem; padding: 2.2rem 0; border-top: 1px solid rgba(27,29,28,.3); color: #1b1d1c; }
.v2-approach-list li:last-child { border-bottom: 1px solid rgba(27,29,28,.3); }
.v2-approach-list li > span { color: #93602e; font-size: .7rem; letter-spacing: .12em; }
.v2-approach-list strong { display: block; margin-bottom: .6rem; color: #1b1d1c; font-size: clamp(1.3rem,2vw,1.75rem); font-weight: 540; letter-spacing: -.025em; }
.v2-approach-list p { max-width: 450px; margin: 0; color: #4c4b45; font-size: .94rem; }

.v2-support { padding: clamp(7rem,11vw,11rem) 0; background: var(--v2-ink); }
.v2-support-grid { display: grid; grid-template-columns: .72fr 1.08fr .8fr; gap: clamp(2.5rem,5.5vw,6.5rem); }
.v2-support-title h2 { margin: 0; font-size: clamp(3rem,5vw,5.4rem); }
.v2-support-main { min-height: 30rem; padding: 3rem 2.7rem; position: relative; overflow: hidden; background: var(--v2-cream); color: #202322; }
.v2-support-main::after { content: ""; position: absolute; right: -20%; bottom: -12%; width: 75%; aspect-ratio: 1; border: 1px solid rgba(216,144,66,.4); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(216,144,66,.04), 0 0 0 6rem rgba(216,144,66,.025); }
.v2-support-main span,
.v2-support-secondary span { display: block; margin-bottom: 5rem; color: #946237; font-size: .62rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.v2-support-main h3 { max-width: 380px; margin-bottom: 1.5rem; font-size: clamp(2rem,3.1vw,3.4rem); font-weight: 450; letter-spacing: -.045em; line-height: 1; }
.v2-support-main p { max-width: 400px; position: relative; z-index: 1; font-size: .98rem; }
.v2-support-secondary { display: flex; flex-direction: column; gap: 3.5rem; padding-top: 3rem; }
.v2-support-secondary div { padding-bottom: 2.7rem; border-bottom: 1px solid var(--v2-rule); }
.v2-support-secondary span { margin-bottom: 1.35rem; color: var(--v2-amber); }
.v2-support-secondary h3 { margin-bottom: .8rem; font-size: 1.4rem; font-weight: 530; letter-spacing: -.025em; }
.v2-support-secondary p { margin-bottom: .9rem; color: var(--v2-muted); font-size: .84rem; }
.v2-support-secondary a { color: var(--v2-cream); font-size: .78rem; }

.v2-proof { padding: clamp(8rem,13vw,13rem) 0; background: var(--v2-cream); color: #1c1f1f; }
.v2-proof-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(3rem,8vw,9rem); align-items: end; margin-bottom: 7rem; }
.v2-proof-head h2 { max-width: 770px; margin: 0; font-size: clamp(3.3rem,6.5vw,6.8rem); }
.v2-proof-head > p { max-width: 480px; margin-bottom: .7rem; font-size: 1rem; line-height: 1.6; }
.v2-proof-list { border-top: 1px solid rgba(28,31,31,.28); }
.v2-proof-item { display: grid; grid-template-columns: 4rem minmax(260px,.7fr) minmax(360px,1.3fr); gap: clamp(1.5rem,4vw,5rem); align-items: center; padding: 3.2rem 0; border-bottom: 1px solid rgba(28,31,31,.28); }
.v2-proof-number { align-self: start; color: #9e6937; font-size: .68rem; letter-spacing: .1em; }
.v2-proof-kicker { margin-bottom: 1rem; color: #8c5c30; font-size: .63rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.v2-proof-item h3 { margin-bottom: .75rem; font-size: clamp(2rem,3.5vw,3.5rem); font-weight: 450; letter-spacing: -.045em; line-height: 1; }
.v2-proof-item > div:nth-child(2) > p:not(.v2-proof-kicker) { max-width: 450px; margin-bottom: 1rem; font-size: .92rem; }
.v2-proof-item a { font-size: .78rem; font-weight: 620; }
.v2-proof-media { aspect-ratio: 16/9; position: relative; overflow: hidden; background: #171a1c; }
.v2-proof-media::after { content: "Synthetic demonstration"; position: absolute; left: .8rem; bottom: .7rem; z-index: 2; padding: .25rem .45rem; background: rgba(9,11,12,.8); color: #eee8dc; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }
.v2-proof-media img,
.v2-proof-media video { width: 100%; height: 100%; object-fit: cover; }
.v2-proof-media video { position: absolute; inset: 0; }
.v2-all-systems { margin-top: 3rem; border-color: rgba(28,31,31,.35); color: #1c1f1f; }
.home-v2 .v2-all-systems { color: #1c1f1f; border-color: rgba(28,31,31,.42); }

.v2-about { padding: clamp(8rem,13vw,13rem) 0; background: #d9c5a4; color: #1b1d1c; }
.v2-about-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(4rem,10vw,11rem); }
.v2-about h2 { max-width: 700px; margin: 0; font-size: clamp(3.5rem,6.2vw,6.5rem); }
.v2-about-copy { max-width: 590px; padding-top: 4rem; }
.v2-about-copy p { margin-bottom: 1.45rem; font-size: 1.02rem; line-height: 1.65; }
.v2-about-copy .v2-text-link { margin-top: 1.2rem; }

.v2-start { min-height: 82vh; display: grid; align-items: center; position: relative; overflow: hidden; padding: 8rem 0; background: #0a0d0f; }
.v2-start::before { content: ""; position: absolute; width: min(68vw, 920px); aspect-ratio: 1; right: -20%; top: -30%; border: 1px solid rgba(216,144,66,.14); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(216,144,66,.018), 0 0 0 12rem rgba(216,144,66,.012); }
.v2-start-inner { position: relative; z-index: 1; }
.v2-start h2 { max-width: 980px; margin-bottom: 2rem; font-size: clamp(3.4rem,7vw,7.4rem); }
.v2-start-inner > p:not(.v2-eyebrow) { max-width: 700px; margin-bottom: 2.2rem; color: var(--v2-muted); font-size: 1.04rem; }

@media (max-width: 1080px) {
  .home-v2 .wrap,
  .home-v2 .nav-inner { --wrap: min(100% - 48px, 1120px); }
  .v2-problem-grid { grid-template-columns: 1.15fr .85fr; gap: 4rem; }
  .v2-support-grid { grid-template-columns: .72fr 1.1fr; }
  .v2-support-secondary { grid-column: 2; flex-direction: row; }
  .v2-support-secondary > div { flex: 1; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .v2-opening-sticky { min-height: 0; }
  .v2-opening-grid { padding-top: 3.5rem; }
  .v2-opening-mark-wrap {
    width: clamp(132px, 25vh, 176px);
    height: clamp(132px, 25vh, 176px);
    margin-bottom: .35rem;
  }
  .v2-opening-name { margin-bottom: .65rem; font-size: clamp(2.2rem, 7vh, 3.1rem); }
  .v2-opening-copy h1 { font-size: clamp(1.05rem, 3.2vh, 1.4rem); }
  .scene-scroll-cue { bottom: calc(.45rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 900px) {
  .home-v2 .nav-links { gap: .8rem; }
  .home-v2 .nav-links a { font-size: .7rem; }
  .v2-problem-grid,
  .v2-proof-head,
  .v2-about-layout { grid-template-columns: 1fr; }
  .v2-problem h2 { max-width: 760px; }
  .v2-problem-copy { margin-left: auto; }
  .v2-response-copy { width: 78%; }
  .v2-approach-layout { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; }
  .v2-support-grid { grid-template-columns: 1fr 1.2fr; }
  .v2-proof-head { margin-bottom: 4rem; }
  .v2-proof-head > p { margin-left: auto; }
  .v2-proof-item { grid-template-columns: 3rem .8fr 1.2fr; gap: 1.5rem; }
  .v2-about-copy { margin-left: auto; padding-top: 0; }
}

@media (max-width: 760px) {
  .home-v2 .wrap,
  .home-v2 .nav-inner { --wrap: calc(100% - 36px); }
  .home-v2 .nav-inner { gap: .65rem; }
  .home-v2 .nav-cta { display: inline-flex; margin-left: auto; padding: .48rem .68rem; font-size: .66rem; }
  .home-v2 .nav-toggle { margin-left: 0; padding: .38rem .62rem; font-size: .72rem; }
  .home-v2 .nav-links { top: var(--nav-h); }
  .v2-opening { min-height: 154svh; }
  .v2-opening-sticky { min-height: 560px; }
  .v2-opening-grid { padding-top: calc(var(--nav-h) + 1rem); }
  .v2-opening-mark-wrap { width: clamp(168px,49vw,210px); height: clamp(168px,49vw,210px); margin-bottom: 1.5rem; }
  .v2-opening-name { font-size: clamp(2.5rem,12vw,3.7rem); }
  .v2-opening-copy h1 { font-size: clamp(1.25rem,6.1vw,1.7rem); }
  .scene-scroll-cue { bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)); }
  .v2-problem { padding: 7rem 0 7.5rem; }
  .v2-problem::before { left: 1.1rem; height: 4.5rem; }
  .v2-problem-grid { display: block; }
  .v2-problem h2 { margin-bottom: 3.2rem; font-size: clamp(3.2rem,14vw,5.1rem); }
  .v2-problem-copy { margin: 0; }
  .v2-problem-copy p { font-size: 1rem; }
  .v2-problem-copy .v2-emphasis { margin-top: 2.4rem; }
  .v2-response { padding: 7rem 0; }
  .v2-response h2 { margin-bottom: 4rem; font-size: clamp(3rem,13vw,4.8rem); }
  .v2-response h2 span { margin-top: .35em; }
  .v2-response-line { width: 100%; }
  .v2-response-copy { width: 100%; display: block; }
  .v2-response-copy p { margin-bottom: 1.4rem; font-size: 1rem; }
  .v2-approach { padding: 7rem 0; }
  .v2-approach-layout { display: block; }
  .v2-approach-lead { position: static; }
  .v2-approach h2 { font-size: clamp(3rem,13vw,4.8rem); }
  .v2-approach-list { margin-top: 4.5rem; }
  .v2-approach-list li { grid-template-columns: 3rem 1fr; min-height: 0; padding: 1.7rem 0; }
  .v2-support { padding: 7rem 0; }
  .v2-support-grid { display: block; }
  .v2-support-title { margin-bottom: 3.5rem; }
  .v2-support-title h2 { font-size: clamp(3rem,13vw,4.7rem); }
  .v2-support-main { min-height: 25rem; padding: 2.1rem 1.7rem; }
  .v2-support-main span { margin-bottom: 4rem; }
  .v2-support-secondary { display: block; padding-top: 3.5rem; }
  .v2-support-secondary div { margin-bottom: 2.5rem; }
  .v2-proof { padding: 7rem 0; }
  .v2-proof-head { display: block; margin-bottom: 4.5rem; }
  .v2-proof-head h2 { margin-bottom: 2.5rem; font-size: clamp(3.2rem,13vw,5rem); }
  .v2-proof-item { grid-template-columns: 2rem 1fr; padding: 2.4rem 0; }
  .v2-proof-media { grid-column: 1/-1; margin-top: 1rem; }
  .v2-about { padding: 7rem 0; }
  .v2-about-layout { display: block; }
  .v2-about h2 { margin-bottom: 3rem; font-size: clamp(3.1rem,13vw,5rem); }
  .v2-about-copy p { font-size: .94rem; }
  .v2-start { min-height: 76vh; padding: 7rem 0; }
  .v2-start h2 { font-size: clamp(3.1rem,13vw,5.1rem); }
  .v2-start .actions { align-items: stretch; }
  .v2-start .button { justify-content: center; width: 100%; }
}

@media (max-width: 390px) {
  .home-v2 .nav-cta { font-size: .6rem; padding-inline: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 { scroll-behavior: auto; }
  .v2-opening { min-height: 100vh; }
  .v2-opening-mark-wrap,
  .v2-opening-copy,
  .v2-opening-copy h1 span,
  .v2-mark-node { transform: none !important; opacity: 1 !important; }
  .v2-mark-outline,
  .v2-mark-main,
  .v2-mark-branch{ stroke-dashoffset: 0 !important; }
}

:root {
  --bg: #0A0B0D;
  --raised: #12151A;
  --cream: #F3EEE4;
  --stone: #AAA69E;
  --amber: #d89042;
  --amber-deep: #b96d24;
  --blue: #43A7FF;
  --hairline: rgba(243, 238, 228, 0.16);
  --ink: #17120d;
  --ink-blue: #0B1728;
  --sandstone: #CDB892;
  --sandstone-deep: #B59A70;
  --text: var(--cream);
  --muted: var(--stone);
  --focus: var(--amber);
  --nav-h: 4.5rem;
  --wrap: min(1180px, calc(100% - 48px));
  --opening: 1;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 12px;
}

.approved-visual {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 0;
  box-shadow: none;
}

.system-map > .approved-visual { display: none; }

#gap,
#economics,
#approach { position: relative; }

#gap.panel-cream { background: #EDE6D8; }
#economics.panel-ink { background: #08090C; }
#approach.panel-sand {
  background: linear-gradient(180deg, #EDE6D8 0%, #E2D3BB 28%, #D4BE9A 62%, #C8B392 100%);
}

.approved-scene {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.approved-scene img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 900px) {
  .system-map > .approved-visual { display: block; }
  .system-map > .scene-fallback { display: none; }
}

.skip:focus {
  left: 16px;
  z-index: 8;
  padding: 8px 12px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--cream);
}

.wrap { width: var(--wrap); max-width: 100%; margin-inline: auto; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 6;
  width: 100%;
  max-width: 100%;
  background: rgba(16, 17, 19, 0.72);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
}

.site-nav.is-compact,
.page-inner .site-nav {
  background: rgba(16, 17, 19, 0.94);
  border-bottom-color: var(--hairline);
}

.nav-inner {
  width: var(--wrap);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: 36px;
  height: 36px;
}

.nav-open {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.nav-open:focus-visible ~ .nav-toggle {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.nav-toggle {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--cream);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.nav-links {
  display: flex;
  gap: 1.2rem;
  margin-left: 0.4rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--stone);
  font-weight: 600;
  font-size: 0.95rem;
}

.nav-links a[aria-current="page"],
.nav-links a:hover { color: var(--cream); }

.nav-cta {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.brand-reveal {
  min-height: 140vh;
  background: var(--bg);
  position: relative;
}

.opening-sticky {
  position: sticky;
  top: var(--nav-h);
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  place-items: center;
  padding: 2rem 0 3rem;
}

.opening-scene {
  text-align: center;
  width: min(52rem, 92vw);
}

.opening-mark-wrap {
  perspective: 920px;
  width: min(28rem, 78vw);
  margin: 0 auto 1.6rem;
}

.opening-mark {
  width: 100%;
  height: auto;
  transform: rotateX(calc(16deg * (1 - var(--opening)))) rotateZ(calc(-6deg * (1 - var(--opening))));
  transform-origin: 50% 58%;
}

.opening-hex {
  fill: none;
  stroke: var(--amber);
  stroke-width: 10;
  stroke-linejoin: round;
}

.opening-connect {
  fill: none;
  stroke: var(--amber);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: calc(340 * (1 - min(1, var(--opening) * 2.35)));
}

.opening-connect-soft {
  stroke-width: 3;
  opacity: 0.45;
  stroke-dasharray: 180;
  stroke-dashoffset: calc(180 * (1 - min(1, var(--opening) * 2.35)));
}

.opening-node { fill: var(--amber); }
.opening-node-soft { fill: var(--amber); opacity: 0.5; }

.opening-name,
.opening-tagline {
  margin: 0 auto;
  opacity: 0;
  transform: translateY(0.4rem);
}

.opening-name {
  color: var(--amber);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 0.7rem;
}

.opening-tagline {
  color: var(--cream);
  font-size: clamp(1.35rem, 3.2vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  max-width: 16em;
  line-height: 1.15;
}

[data-phase="name"] .opening-name,
[data-phase="tagline"] .opening-name,
[data-phase="tagline"] .opening-tagline {
  opacity: 1;
  transform: none;
}

.chapter {
  padding: clamp(4.5rem, 10vh, 7.5rem) 0;
}

.chapter-hero { padding: clamp(3rem, 8vh, 6rem) 0 4.5rem; }

@media (min-width: 761px) {
  .chapter-hero { padding-bottom: 0; }
  #gap,
  #economics,
  #approach {
    padding-top: clamp(2.2rem, 4vh, 3.2rem);
    padding-bottom: 0;
  }
  #proof { padding-bottom: clamp(2.4rem, 5vh, 3.4rem); }
  #about { padding-top: clamp(2.8rem, 6vh, 4.5rem); }
}

.marker {
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

h1, h2, h3 {
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 18ch; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 22ch; margin-bottom: 1.2rem; }
h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
#about h2,
#start h2,
#gap h2,
#economics h2,
#approach h2,
#proof h2 {
  max-width: none;
}
#capability h2 { max-width: none; }

.lede, .intro {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  max-width: 42rem;
  color: #ddd6cb;
}

.muted, p, li { color: var(--muted); }
.quiet { color: var(--stone); font-size: 0.98rem; max-width: 36rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

.button {
  display: inline-block;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.button-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--hairline);
}

.button-amber {
  background: var(--amber);
  color: var(--ink);
  border: 1px solid var(--amber);
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
}

.button-amber-ghost {
  background: transparent;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
}

.panel-cream .button-amber {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}

.panel-cream {
  background: var(--cream);
  color: var(--ink);
}

.panel-cream .marker { color: var(--amber-deep); }
.panel-cream h2,
.panel-cream h3,
.panel-cream p,
.panel-cream li { color: var(--ink); }
.panel-cream .muted { color: #5d574f; }
.panel-cream .button { background: var(--bg); color: var(--cream); }

.panel-ink {
  background: var(--ink-blue);
  color: var(--cream);
}

.panel-ink .marker { color: var(--amber); }
.panel-ink h2,
.panel-ink h3 { color: var(--cream); }
.panel-ink p,
.panel-ink li { color: #d5deea; }
.panel-ink .accent { color: var(--amber); }

.panel-sand {
  background: var(--sandstone);
  color: var(--ink);
}

.panel-sand .marker { color: #6b4a1e; }
.panel-sand h2,
.panel-sand h3,
.panel-sand p,
.panel-sand li { color: var(--ink); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.capability-grid,
.work-grid,
.compare-grid,
.proof-grid {
  display: grid;
  gap: 1.2rem;
}

.capability-grid,
.compare-grid,
.proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capability-grid { grid-template-columns: 1.2fr 0.9fr 0.9fr; }
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  color: var(--cream);
}

.card h3,
.card p,
.card li { color: var(--cream); }
.card .muted { color: var(--stone); }
.card.primary { border-color: rgba(216, 144, 66, 0.55); }

.panel-cream .card {
  background: #fffdf8;
  border-color: rgba(16, 17, 19, 0.12);
}
.panel-cream .card h3,
.panel-cream .card p { color: var(--ink); }

.kicker {
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
}

.proof-grid .kicker {
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  letter-spacing: 0.1em;
  margin-bottom: 0.85rem;
}

.proof-line {
  display: block;
  margin: 0.45rem 0 0;
  font-weight: 600;
  color: var(--cream);
}

.proof-label {
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}

.card-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--amber);
  font-weight: 600;
  text-decoration: none;
}

.feature-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin: 2.4rem 0 3rem;
}

.feature-band.reverse { direction: rtl; }
.feature-band.reverse > * { direction: ltr; }

.media-teaser,
.film {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #08090b;
  aspect-ratio: 16 / 9;
}

.media-teaser.mobile-frame {
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  background: #0a0b0d;
  padding: 0.6rem;
  border: 1px solid var(--hairline);
}

.media-teaser img,
.media-teaser video,
.film video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
}

.media-teaser.mobile-frame img,
.media-teaser.mobile-frame video {
  border-radius: 10px;
}

.film { margin: 1.2rem 0; }
.film video { position: static; height: auto; aspect-ratio: 16 / 9; }

details { margin-top: 0.9rem; }
summary { cursor: pointer; font-weight: 600; color: var(--cream); }

.system-map {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 1rem;
  margin-inline: 0;
}

.system-map svg { width: 100%; height: auto; }
.map-wide { display: block; }
.map-tall { display: none; }
.map-text { margin-top: 1rem; max-width: 46rem; }

.gap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 3rem;
  align-items: start;
}

.sticky-visual { position: sticky; top: calc(var(--nav-h) + 1.2rem); }
.gap-points { display: grid; gap: 0.85rem; }
.gap-points h3 { margin: 0; font-size: 1.35rem; color: var(--cream); }
.resolved { color: var(--cream); font-size: 1.2rem; margin-top: 1rem; }

.disclosure { max-width: 46rem; margin-bottom: 1.8rem; }

.process-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0 2rem;
}

.process-step {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.1rem 1rem;
}
.process-step strong { color: var(--amber); display: block; margin-bottom: 0.4rem; font-size: 0.85rem; }

footer {
  border-top: 1px solid var(--hairline);
  padding: 1.8rem 0 2.6rem;
  color: var(--stone);
}

.footer-inner {
  width: var(--wrap);
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.footer-brand img { width: min(16rem, 70vw); height: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.8rem 1.1rem; }

.footer-legal {
  flex: 1 0 100%;
  margin: 0.45rem 0 0;
  max-width: 100%;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--stone);
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

.footer-legal a {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.page-main { padding: 3.2rem 0 5rem; }
.page-main h1 { margin-bottom: 0.8rem; }

.story-grid { display: grid; gap: 1.6rem; max-width: 46rem; }
.story-grid h2 { font-size: 1.5rem; max-width: none; margin: 1.4rem 0 0.5rem; }
.flow-list { padding-left: 1.2rem; }
.flow-list li { margin: 0.45rem 0; }
.story-grid .process-step { margin: 0.2rem 0 0; }
.story-grid .process-step .flow-list { margin: 0.7rem 0 0; }

.story-nav {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
}

.form-card {
  margin-top: 2rem;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  max-width: 46rem;
}

.work-individual .card-label {
  margin: 0.9rem 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.work-individual .card-label + p { margin: 0; }

.notice {
  border-left: 3px solid var(--amber);
  padding: 0.8rem 1rem;
  background: rgba(216, 144, 66, 0.08);
  margin-bottom: 1.4rem;
}

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 0.2rem; }
.full { grid-column: 1 / -1; }

label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--cream); }

input, textarea {
  width: 100%;
  border: 1px solid #3a3f46;
  border-radius: 12px;
  background: #111315;
  color: var(--cream);
  font: inherit;
  padding: 0.75rem 0.85rem;
}

textarea { min-height: 8.5rem; resize: vertical; }

.check { display: flex; gap: 0.7rem; align-items: flex-start; }
.check input { width: auto; margin-top: 0.35rem; }
.check label { font-weight: 400; color: var(--stone); }

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.status { display: none; margin-top: 1.1rem; border-radius: 14px; padding: 1rem; }
.status.success { display: block; border: 1px solid #62866b; background: #14251a; }
.status.error { display: block; border: 1px solid #a65d55; background: #2a1715; }

.redirect {
  width: min(40rem, calc(100% - 40px));
  margin: 18vh auto;
}

.doc-main { width: min(780px, calc(100% - 40px)); margin-inline: auto; padding: 3rem 0 4rem; }
.doc-main h2 { font-size: 1.45rem; max-width: none; margin-top: 2.2rem; }
.contents { border: 1px solid var(--hairline); background: var(--raised); border-radius: 12px; padding: 1.1rem 1.2rem; }
.contents a { color: var(--amber); text-decoration: none; }

.meta-audience { font-size: 0.95rem; color: var(--stone); margin: 0.4rem 0 0.8rem; }

.map-node { fill: #1b1d1f; stroke: var(--amber); stroke-width: 1.4; }
.map-title { fill: var(--cream); font-size: 13px; font-weight: 600; font-family: Inter, sans-serif; }
.map-sub { fill: var(--stone); font-size: 11px; font-family: Inter, sans-serif; }
.map-arrow { fill: none; stroke: var(--amber); stroke-width: 1.6; }
.map-identity { fill: none; stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 4 3; }
.map-label { fill: var(--amber); font-size: 12px; font-weight: 600; font-family: Inter, sans-serif; }
.map-identity-bus { fill: none; stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 4 3; }
.map-group { fill: rgba(216, 144, 66, 0.06); stroke: var(--hairline); }
.map-group-label { fill: var(--amber); font-size: 11px; font-weight: 600; font-family: Inter, sans-serif; letter-spacing: 0.08em; }
.map-status { fill: var(--blue); }
.map-note { fill: var(--stone); font-size: 11px; font-family: Inter, sans-serif; }
.chapter-hero .system-map { margin-top: 2rem; margin-inline: 0; }

.view-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.2rem 0 1.4rem;
}

.view-switch label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.55rem 1.15rem;
  border: 1.5px solid var(--amber);
  border-radius: 999px;
  color: var(--amber);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  background: transparent;
}

.view-switch input:checked + label {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}

.view-switch input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.stack-figure {
  margin: 2.4rem 0 0;
  width: 100%;
  max-width: 100%;
  background: transparent;
}

.stack-figure .view-switch { margin-top: 0; }

.stack-scenes { position: relative; width: 100%; max-width: 100%; }

.scene-erp,
.scene-no-erp {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.stack-explain {
  margin: 0 0 1.2rem;
  max-width: 40rem;
}

.stack-erp-copy,
.stack-noerp-copy {
  display: none;
  margin: 0 0 0.65rem;
  color: #ddd6cb;
}

.stack-shared {
  margin: 0;
  color: var(--stone);
}

.stack-figure:has(#stack-erp:checked) .stack-erp-copy { display: block; }
.stack-figure:has(#stack-no-erp:checked) .stack-noerp-copy { display: block; }

.proposition-lead {
  font-size: clamp(2.15rem, 6.4vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: none;
  margin: 0 0 1rem;
  color: var(--cream);
  overflow-wrap: break-word;
}

.proposition-support {
  font-size: clamp(1.18rem, 2.6vw, 1.72rem);
  line-height: 1.35;
  max-width: min(38em, 100%);
  color: #ddd6cb;
  margin: 0;
  overflow-wrap: break-word;
  text-align: left;
}

#gap .gap-copy p,
#economics .fit-copy p {
  max-width: 40rem;
}

.scene-no-erp { display: none; }
.stack-figure:has(#stack-erp:checked) .scene-erp { display: block; }
.stack-figure:has(#stack-erp:checked) .scene-no-erp { display: none; }
.stack-figure:has(#stack-no-erp:checked) .scene-erp { display: none; }
.stack-figure:has(#stack-no-erp:checked) .scene-no-erp { display: block; }

.stack-layout {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  gap: 1rem 1.4rem;
  align-items: center;
}

.stack-callouts {
  display: grid;
  gap: 0.8rem;
  align-content: center;
  min-height: 100%;
}

.stack-callouts p {
  margin: 0;
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stack-stage {
  perspective: 1100px;
}

.stack-world {
  transform: rotateX(18deg);
  transform-origin: 50% 100%;
}

.stack-platform {
  position: relative;
  border-radius: 1.1rem;
  padding: 1.1rem;
  min-height: 6.4rem;
}

.stack-platform.cream {
  background: linear-gradient(180deg, #f4efe6 0%, #d8cfbf 100%);
  box-shadow: 0 0.7rem 0 #9d917c, 0 1rem 1.6rem rgba(0, 0, 0, 0.28);
}

.stack-platform.dark {
  background: linear-gradient(180deg, #2a3038 0%, #161a20 100%);
  box-shadow: 0 0.7rem 0 #0b0d10, 0 1rem 1.6rem rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(216, 144, 66, 0.35);
}

.stack-platform.erp-slab {
  min-height: 4.4rem;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #2a3038 0%, #12151a 100%);
  box-shadow: 0 0.7rem 0 #0b0d10, 0 1rem 1.6rem rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(216, 144, 66, 0.45);
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.86rem;
}

.stack-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.stack-tiles.ops { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.stack-tile {
  aspect-ratio: 1;
  border-radius: 0.7rem;
  background: linear-gradient(180deg, #efe8da 0%, #cfc5b3 100%);
  box-shadow: 0 0.35rem 0 #8f8674;
  border: 1px solid rgba(216, 144, 66, 0.35);
}

.stack-tile.dark {
  background: linear-gradient(180deg, #323841 0%, #1b2026 100%);
  box-shadow: 0 0.35rem 0 #0b0d10;
  color: var(--amber);
  display: grid;
  place-items: center;
}

.stack-tile svg { width: 42%; height: 42%; }

.stack-layer { margin-bottom: 1.15rem; }
.stack-layer:last-child { margin-bottom: 0; }

.stack-links {
  height: 1.15rem;
  margin: 0 18% -0.15rem;
  background-image: repeating-linear-gradient(
    to right,
    var(--blue) 0 2px,
    transparent 2px 18%
  );
}

.stack-links.amber {
  background-image: repeating-linear-gradient(
    to right,
    var(--amber) 0 2px,
    transparent 2px 22%
  );
}

.no-erp-foundations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.foundation-pad {
  background: linear-gradient(180deg, #2a3038 0%, #161a20 100%);
  border: 1px solid rgba(216, 144, 66, 0.35);
  border-radius: 0.9rem;
  padding: 0.85rem 0.7rem 0.7rem;
  text-align: center;
  box-shadow: 0 0.55rem 0 #0b0d10;
}

.foundation-pad .stack-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.foundation-pad .stack-tile { min-height: 2.4rem; aspect-ratio: auto; }
.foundation-name {
  display: block;
  margin-top: 0.65rem;
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bespoke-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #f4efe6;
  color: var(--ink);
  border: 1px solid rgba(23, 18, 13, 0.16);
  border-radius: 0.7rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0 #b7ad99;
}

.gap-scene {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.gap-copy { position: sticky; top: calc(var(--nav-h) + 1.2rem); }

.gap-chain { margin: 0; }

.gap-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0;
  margin: 0;
}

.gap-step {
  text-align: center;
}

.raised-tile {
  position: relative;
  min-height: 7.2rem;
  border-radius: 0.9rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.55rem;
}

.raised-tile.dark {
  background: linear-gradient(180deg, #3a4048 0%, #1c2026 100%);
  box-shadow: 0 0.65rem 0 #111318, 0 0.9rem 1.1rem rgba(23, 18, 13, 0.18);
  border: 1px solid rgba(216, 144, 66, 0.4);
  color: #efe8da;
}

.raised-tile.cream {
  background: linear-gradient(180deg, #f7f1e6 0%, #d8cfbf 100%);
  box-shadow: 0 0.65rem 0 #9d917c, 0 0.9rem 1.1rem rgba(23, 18, 13, 0.12);
}

.raised-tile svg { width: 2.4rem; height: 2.4rem; }

.arch-caption {
  display: inline-block;
  background: #17120d;
  color: var(--cream);
  border-radius: 0.35rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gap-cues {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.35rem 0 1.1rem;
  min-height: 2.4rem;
}

.gap-cue {
  margin: 0;
  text-align: center;
  color: #6b4a1e;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gap-break {
  position: relative;
}

.gap-break::after {
  content: "";
  position: absolute;
  right: -0.45rem;
  top: 2.2rem;
  width: 0.9rem;
  height: 2.2rem;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 3px,
    #c4b49a 3px,
    #c4b49a 4px
  );
}

.gap-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  list-style: none;
  padding: 0.8rem 0 0;
  margin: 1rem 0 0;
  border-top: 1px solid rgba(23, 18, 13, 0.12);
  color: #6b4a1e;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.fit-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  margin-top: 2rem;
  align-items: start;
}

.fit-side { margin: 0; }

.monolith {
  background: linear-gradient(180deg, #243044 0%, #121820 100%);
  border: 1px solid rgba(216, 144, 66, 0.28);
  border-radius: 1.1rem;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 0.8rem 0 #090d12, 0 1.1rem 1.6rem rgba(0, 0, 0, 0.35);
  min-height: 22rem;
}

.monolith-title,
.fit-banner {
  display: block;
  text-align: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 0.8rem;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  min-height: 14rem;
}

.module-grid span {
  background: #2a3340;
  border-radius: 0.45rem;
  min-height: 2.4rem;
  box-shadow: 0 0.28rem 0 #0c1016;
}

.module-grid span.used { background: #3b4654; }

.fit-path {
  position: relative;
  height: 0.2rem;
  margin: 1rem 0.4rem 0;
  background: var(--blue);
  border-radius: 9rem;
  transform: rotate(-8deg);
}

.fit-path.bent {
  height: 3.2rem;
  background: none;
  border: 2px solid var(--blue);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  clip-path: polygon(0 40%, 18% 40%, 28% 8%, 46% 8%, 54% 70%, 72% 70%, 80% 28%, 100% 28%, 100% 42%, 84% 42%, 76% 84%, 50% 84%, 42% 22%, 32% 22%, 22% 54%, 0 54%);
  transform: none;
}

.fit-note {
  margin: 0.85rem 0 0;
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.precise-stack {
  background: linear-gradient(180deg, #1b2430 0%, #10161f 100%);
  border: 1px solid rgba(216, 144, 66, 0.35);
  border-radius: 1.1rem;
  padding: 0.9rem;
  box-shadow: 0 0.8rem 0 #090d12;
}

.fit-banner {
  background: #d9d0c0;
  color: var(--ink);
  border-radius: 0.55rem;
  padding: 0.55rem 0.6rem;
}

.precise-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.precise-row .raised-tile {
  min-height: 6.2rem;
  margin: 0;
}

.precise-row .arch-caption {
  position: absolute;
  bottom: 0.45rem;
  left: 50%;
  transform: translateX(-50%);
}

.fit-close {
  text-align: center;
  margin: 1.4rem auto 0.4rem;
  max-width: 40rem;
  color: var(--amber);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
}

.panel-ink .fit-note,
.panel-ink .fit-close { color: var(--amber); }
.panel-sand .approach-banner { color: var(--amber); }

.cap-visual {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.cap-visual .stack-tile { min-height: 3rem; aspect-ratio: auto; }

.cap-flow {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}

.cap-flow span {
  flex: 1;
  text-align: center;
  border: 1px solid rgba(216, 144, 66, 0.4);
  border-radius: 0.5rem;
  padding: 0.45rem 0.2rem;
  background: #161a20;
}

.approach-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.8rem 0 1.4rem;
  align-items: end;
}

.approach-stages .approach-stage {
  background: linear-gradient(180deg, #2a3038 0%, #161a20 100%);
  border: 1px solid rgba(23, 18, 13, 0.28);
  border-radius: 1rem;
  padding: 0.9rem 0.75rem 0.75rem;
  color: var(--cream);
  box-shadow: 0 0.55rem 0 #111318;
}

.approach-stages .approach-stage:nth-child(1) { min-height: 8.4rem; }
.approach-stages .approach-stage:nth-child(2) { min-height: 9.2rem; }
.approach-stages .approach-stage:nth-child(3) { min-height: 10.2rem; }
.approach-stages .approach-stage:nth-child(4) { min-height: 11.2rem; }

.approach-stages .approach-stage strong {
  display: block;
  color: var(--amber);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.approach-stages .approach-stage span {
  display: block;
  margin-top: 0.35rem;
  color: var(--cream);
  font-weight: 700;
}

.approach-stages .approach-stage em {
  display: block;
  margin-top: 0.55rem;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--stone);
}

.approach-banner {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #2a3038 0%, #161a20 100%);
  color: var(--amber);
  border: 1px solid rgba(216, 144, 66, 0.45);
  border-radius: 0.85rem;
  padding: 0.95rem 1rem;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0.55rem 0 #111318;
}

.start-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.start-routes .card {
  background: linear-gradient(180deg, #2a3038 0%, #161a20 100%);
  text-align: center;
}

.start-routes .card h3 { color: var(--cream); }
.start-routes .card p { color: var(--amber); font-weight: 600; }
.start-routes .card-link { color: var(--amber); }

.panel-cream .proof-grid .card {
  background: var(--raised);
  border-color: var(--hairline);
}
.panel-cream .proof-grid .card h3,
.panel-cream .proof-grid .card p { color: var(--cream); }
.panel-cream .proof-grid .card .kicker,
.panel-cream .proof-grid .card .proof-label { color: var(--amber); }
.panel-cream .proof-grid .card .proof-line { color: var(--cream); }
.proof-grid .media-teaser { margin-top: 1rem; }
.proof-grid .card,
.work-grid .card {
  display: flex;
  flex-direction: column;
}
.card-action {
  margin-top: auto;
  padding-top: 1.1rem;
  text-align: center;
}
.card-action .button {
  min-width: 12rem;
}

.proof-all {
  display: flex;
  justify-content: center;
  margin: 2.2rem 0 0;
}

.button-systems {
  background: var(--amber);
  color: var(--ink);
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  padding: 1rem 1.7rem;
  font-weight: 700;
  text-align: center;
}

.panel-cream .button-systems {
  background: var(--amber);
  color: var(--ink);
}

.work-connected { display: none; }
.work-connected h2 { max-width: none; }
#individual-systems,
#connected-workflow,
#finance {
  scroll-margin-top: calc(var(--nav-h) + 0.5rem);
}
.wrap:has(#view-individual:checked) .work-individual { display: grid; }
.wrap:has(#view-individual:checked) .work-connected { display: none; }
.wrap:has(#view-connected:checked) .work-individual { display: none; }
.wrap:has(#view-connected:checked) .work-connected { display: block; }

html:not(.js) #individual-systems:target,
html:not(.js) .wrap:has(#individual-systems:target) .work-individual,
html:not(.js) .wrap:has(#finance:target) .work-individual {
  display: grid !important;
}
html:not(.js) .wrap:has(#individual-systems:target) .work-connected,
html:not(.js) .wrap:has(#finance:target) .work-connected {
  display: none !important;
}
html:not(.js) .wrap:has(#connected-workflow:target) .work-connected {
  display: block !important;
}
html:not(.js) .wrap:has(#connected-workflow:target) .work-individual {
  display: none !important;
}
html:not(.js) .wrap:has(#individual-systems:target) label[for="view-individual"],
html:not(.js) .wrap:has(#finance:target) label[for="view-individual"] {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
html:not(.js) .wrap:has(#individual-systems:target) label[for="view-connected"],
html:not(.js) .wrap:has(#finance:target) label[for="view-connected"] {
  background: transparent;
  color: var(--amber);
  border-color: var(--amber);
}
html:not(.js) .wrap:has(#connected-workflow:target) label[for="view-connected"] {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
html:not(.js) .wrap:has(#connected-workflow:target) label[for="view-individual"] {
  background: transparent;
  color: var(--amber);
  border-color: var(--amber);
}

.conn-svg { width: 100%; height: auto; }
.conn-node { stroke-width: 1.6; }
.conn-node.ops { fill: #d9d0c0; stroke: #c48a3a; }
.conn-node.gold { fill: #c48a3a; stroke: #e2b36a; }
.conn-node.dark { fill: #1c2026; stroke: #c48a3a; }
.conn-node.finance { fill: #161c24; stroke: var(--blue); }
.conn-title { font-size: 13px; font-weight: 700; font-family: Inter, sans-serif; }
.conn-title.on-cream { fill: #17120d; }
.conn-title.on-dark { fill: var(--cream); }
.conn-title.on-gold { fill: #17120d; }
.conn-amber { fill: none; stroke: var(--amber); stroke-width: 2.2; }
.conn-blue { fill: none; stroke: var(--blue); stroke-width: 2.2; }
.conn-label { fill: var(--amber); font-size: 11px; font-weight: 700; font-family: Inter, sans-serif; letter-spacing: 0.06em; }
.conn-label.blue { fill: var(--blue); }

.work-page .view-switch { margin-top: 1.6rem; }

.iso-frame,
.gap-chain,
.fit-compare,
.approach-scene,
.system-map,
.stack-figure,
.stack-scenes {
  max-width: 100%;
  min-width: 0;
}

.iso-frame {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.panel-cream .iso-frame,
.panel-ink .iso-frame,
.panel-sand .iso-frame {
  background: transparent;
  border: 0;
  padding: 0;
}

.iso-svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

.iso-amber,
.iso-blue,
.iso-amber-dash,
.iso-cue-line,
.iso-crack {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iso-amber { stroke: var(--amber); stroke-width: 2.1; }
.iso-blue { stroke: var(--blue); stroke-width: 2.1; }
.iso-amber-dash {
  stroke: var(--amber);
  stroke-width: 2.3;
  stroke-dasharray: 5 7;
}
.iso-cue-line {
  stroke: #6b4a1e;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.iso-crack {
  stroke: #8a7a62;
  stroke-width: 1.6;
}

.iso-caption,
.iso-side-label,
.iso-banner,
.iso-face,
.iso-num,
.iso-stage-name,
.iso-cue {
  font-family: Inter, sans-serif;
  font-weight: 700;
}

.iso-caption {
  fill: #17120d;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.panel-ink .iso-caption { fill: var(--cream); }
.iso-caption.gold,
.iso-banner.gold { fill: var(--amber); }
.iso-side-label {
  fill: var(--amber);
  font-size: 12px;
  letter-spacing: 0.16em;
}
.iso-banner {
  fill: #17120d;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.iso-face {
  fill: var(--amber);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.iso-num {
  fill: #17120d;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.iso-stage-name {
  fill: #17120d;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.iso-cue {
  fill: #6b4a1e;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.gap-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  list-style: none;
  padding: 0.8rem 0 0;
  margin: 0;
  color: #6b4a1e;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gap-key li { margin: 0; }

.fit-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.8rem;
}

.approach-banner {
  box-shadow:
    inset 0 1px 0 rgba(242, 201, 138, 0.35),
    0 0.18rem 0 rgba(216, 144, 66, 0.4),
    0 0.7rem 0 #111318,
    0 1rem 1.4rem rgba(23, 18, 13, 0.18);
}

.approach-key {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  list-style: none;
  padding: 0.9rem 0 0.2rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
}

.approach-key strong {
  display: block;
  color: var(--amber);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 0.2rem;
}

.start-routes .card {
  position: relative;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(242, 201, 138, 0.28),
    0 0.65rem 0 #0b0d10,
    0 0.95rem 1.3rem rgba(0, 0, 0, 0.28);
}

.route-icon {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto 0.65rem;
  color: var(--amber);
  display: block;
}

@media (min-width: 761px) {
  .nav-open { display: none; }
}

@media (min-width: 1500px) {
  :root { --wrap: min(1320px, calc(100% - 96px)); }
}

@media (max-width: 980px) {
  .split,
  .gap-layout,
  .gap-scene,
  .capability-grid,
  .compare-grid,
  .proof-grid,
  .feature-band,
  .feature-band.reverse,
  .process-flow,
  .start-routes,
  .fit-compare,
  .approach-stages,
  .approach-key,
  .stack-layout,
  .no-erp-foundations { grid-template-columns: 1fr; }
  .feature-band.reverse { direction: ltr; }
  .sticky-visual,
  .gap-copy { position: static; }
  .map-wide { display: none; }
  .map-tall { display: block; }
  .map-tall .map-title { font-size: 15px; }
  .map-tall .map-group { fill: rgba(216, 144, 66, 0.08); stroke: rgba(216, 144, 66, 0.35); }
  .map-tall .map-sub { font-size: 13px; }
  .map-tall .map-group-label { font-size: 13px; }
  .map-tall .map-label { font-size: 13px; }
  .map-tall .map-note { font-size: 13px; }
  .map-tall .conn-title { font-size: 15px; }
  .map-tall .conn-label { font-size: 12px; }
  .iso-caption { font-size: 12px; }
  .iso-side-label,
  .iso-banner,
  .iso-face { font-size: 13px; }
  .stack-world { transform: none; }
  .stack-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stack-tiles.ops { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gap-steps,
  .gap-cues,
  .gap-legend { grid-template-columns: 1fr 1fr; }
  .approach-stages .approach-stage:nth-child(n) { min-height: 0; }
}

@media (max-width: 760px) {
  :root { --wrap: min(1180px, calc(100% - 32px)); --nav-h: 4.1rem; }
  body { font-size: 16px; }
  .nav-inner {
    width: 100%;
    padding-inline: 16px;
    gap: 0.4rem;
  }
  .nav-toggle { display: inline-flex; align-items: center; margin-left: 0; padding: 0.4rem 0.55rem; font-size: 0.84rem; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0c0e11;
    border-bottom: 1px solid var(--hairline);
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0.4rem 1rem 1rem;
  }
  .nav-open:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 0.7rem 0; }
  .nav-cta { padding: 0.45rem 0.6rem; font-size: 0.84rem; }
  .work-grid,
  .fields,
  .gap-steps,
  .gap-cues,
  .precise-row,
  .module-grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .media-teaser.mobile-frame { max-width: 16rem; }
  .system-map { padding: 0.5rem; }
  .brand-reveal { min-height: 125vh; }
  .bespoke-banner { position: static; transform: none; display: table; margin: 0.7rem auto 0; white-space: normal; }
  .approved-scene {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .approved-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 68%;
  }
  #gap .approved-scene img { object-position: 78% 72%; }
  #economics .approved-scene img { object-position: center 60%; }
  #approach .approved-scene img { object-position: center 55%; }
  .approved-scene-up img { object-position: center 58%; }
}

@media (max-width: 359px) {
  .nav-inner {
    flex-wrap: wrap;
    row-gap: 0.45rem;
  }
  .nav-toggle {
    order: 1;
    margin-left: auto;
  }
  .nav-cta {
    order: 2;
    flex: 1 0 100%;
    margin-left: 0;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .sticky-visual,
  .gap-copy,
  .opening-sticky { position: static; }
  .brand-reveal { min-height: auto; }
  .opening-mark { transform: none; }
  .opening-name,
  .opening-tagline { opacity: 1; transform: none; }
  .opening-connect,
  .opening-connect-soft { stroke-dashoffset: 0; }
  .stack-world { transform: none; }
  html.js .approved-scene img {
    clip-path: inset(0) !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}

@media (min-width: 761px) {
  .artwork-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  html.js .approved-scene-ltr img {
    clip-path: inset(0 100% 0 0);
  }
  html.js .approved-scene-ltr.is-visible img {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.js .approved-scene-up img {
    clip-path: inset(100% 0 0 0);
  }
  html.js .approved-scene-up.is-visible img,
  html.js .is-visible .approved-scene-up img {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.js .approved-scene-fit img {
    clip-path: inset(0 100% 0 0);
  }
  html.js .approved-scene-fit.is-visible img {
    animation: reveal-fit 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

@keyframes reveal-fit {
  0% { clip-path: inset(0 100% 0 0); }
  40% { clip-path: inset(0 48% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

#capability {
  --cap: 1;
}

.capability-sticky { padding: 0; }

.capability-board { margin: 0.4rem 0 1.4rem; }

.capability-svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

.cap-connector {
  fill: none;
  stroke: url(#cap-line);
  stroke-width: 3;
  stroke-linecap: round;
}

.cap-icon rect,
.cap-icon circle,
.cap-icon ellipse {
  fill: #2a3038;
  stroke: var(--amber);
  stroke-width: 1.6;
}
.cap-icon path {
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.cap-icon .cap-check { stroke: var(--blue); stroke-width: 2.2; }
.cap-icon .cap-spark { fill: var(--amber); stroke: none; }
.cap-icon .cap-gap,
.cap-rail-node .cap-gap { fill: var(--amber); stroke: none; }
.cap-icon[data-cap-from="3"] ellipse,
.cap-icon[data-cap-from="3"] path { stroke: var(--blue); }

.capability-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
}

.cap-stage {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.cap-stage h3 {
  color: var(--amber);
  font-size: 1.02rem;
  margin: 0 0 0.4rem;
}

.cap-stage p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #d5deea;
}

.capability-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

@media (min-width: 981px) {
  .proposition-support,
  .stack-explain,
  #start .lede {
    max-width: none;
    text-align: left;
  }
  html.js #capability[data-capability] {
    min-height: 250vh;
  }
  html.js #capability .capability-sticky {
    position: sticky;
    top: var(--nav-h);
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    align-items: center;
    padding: 1.5rem 0 2rem;
  }
  html.js .cap-gated,
  html.js .cap-stage {
    visibility: hidden;
    opacity: 0;
  }
  html.js .cap-connector.cap-gated {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
  }
  html.js [data-cap-step="1"] .cap-gated[data-cap-from="1"],
  html.js [data-cap-step="1"] .cap-stage:nth-child(1) {
    visibility: visible;
    opacity: 1;
  }
  html.js [data-cap-step="2"] .cap-gated[data-cap-from="1"],
  html.js [data-cap-step="2"] .cap-gated[data-cap-from="2"],
  html.js [data-cap-step="2"] .cap-stage:nth-child(-n+2),
  html.js [data-cap-step="3"] .cap-gated[data-cap-from="1"],
  html.js [data-cap-step="3"] .cap-gated[data-cap-from="2"],
  html.js [data-cap-step="3"] .cap-gated[data-cap-from="3"],
  html.js [data-cap-step="3"] .cap-stage:nth-child(-n+3),
  html.js [data-cap-step="4"] .cap-gated[data-cap-from="1"],
  html.js [data-cap-step="4"] .cap-gated[data-cap-from="2"],
  html.js [data-cap-step="4"] .cap-gated[data-cap-from="3"],
  html.js [data-cap-step="4"] .cap-gated[data-cap-from="4"],
  html.js [data-cap-step="4"] .cap-stage:nth-child(-n+4),
  html.js [data-cap-step="5"] .cap-gated,
  html.js [data-cap-step="5"] .cap-stage,
  html.js [data-cap-step="6"] .cap-gated,
  html.js [data-cap-step="6"] .cap-stage {
    visibility: visible;
    opacity: 1;
  }
  html.js [data-cap-step="2"] .cap-connector[data-cap-from="2"],
  html.js [data-cap-step="3"] .cap-connector[data-cap-from="2"],
  html.js [data-cap-step="3"] .cap-connector[data-cap-from="3"],
  html.js [data-cap-step="4"] .cap-connector[data-cap-from="2"],
  html.js [data-cap-step="4"] .cap-connector[data-cap-from="3"],
  html.js [data-cap-step="4"] .cap-connector[data-cap-from="4"],
  html.js [data-cap-step="5"] .cap-connector,
  html.js [data-cap-step="6"] .cap-connector {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.55s ease, opacity 0.35s ease;
  }
  html.js [data-cap-step="2"] .cap-icon[data-cap-from="2"],
  html.js [data-cap-step="2"] .cap-stage:nth-child(2),
  html.js [data-cap-step="3"] .cap-icon[data-cap-from="3"],
  html.js [data-cap-step="3"] .cap-stage:nth-child(3),
  html.js [data-cap-step="4"] .cap-icon[data-cap-from="4"],
  html.js [data-cap-step="4"] .cap-stage:nth-child(4),
  html.js [data-cap-step="5"] .cap-icon[data-cap-from="5"],
  html.js [data-cap-step="5"] .cap-stage:nth-child(5) {
    transition: opacity 0.4s ease 0.35s, visibility 0s linear 0.2s;
  }
  html.js #capability[data-capability]:not([data-cap-step="6"]) .capability-actions {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  html.js #capability[data-capability][data-cap-step="6"] .capability-actions {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 981px) {
  .page-training h1,
  .page-training .intro {
    max-width: none;
    text-align: left;
  }
  .page-enquiry .page-main .wrap {
    width: min(46rem, calc(100% - 48px));
    margin-inline: auto;
    text-align: left;
  }
  .page-enquiry .page-main h1,
  .page-enquiry .intro,
  .page-enquiry .form-card {
    max-width: none;
  }
  .page-enquiry .form-card { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html.js #capability[data-capability] { min-height: 0; }
  html.js #capability .capability-sticky { position: static; min-height: 0; }
  html.js .cap-gated,
  html.js .cap-stage {
    visibility: visible !important;
    opacity: 1 !important;
  }
  html.js .cap-connector {
    stroke-dashoffset: 0 !important;
  }
  html.js .capability-actions,
  .capability-actions {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
  }
}

/* AGE-600 round 8 staged semantic scenes */
html.js [data-scene="gap"] { min-height: 200vh; }
html.js [data-scene="fit"] { min-height: 230vh; }
html.js [data-scene="approach"] { min-height: 180vh; }
html:not(.js) .gap-connection,
html:not(.js) .fit-bent-path path,
html:not(.js) .fit-link-line,
html:not(.js) .approach-connector path,
html:not(.js) .cap-rail-link path,
html:not(.js) .cap-connector {
  stroke-dashoffset: 0;
}
html:not(.js) .gap-pulse,
html:not(.js) .fit-bent-path circle {
  opacity: 1;
}
html.js [data-scene] .scene-sticky,
html.js #capability .capability-sticky {
  position: sticky;
  top: var(--nav-h);
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 1.2rem 0 1.6rem;
}
html.js [data-scene="approach"] .scene-sticky {
  align-items: flex-start;
  overflow: visible;
}
html.js #capability[data-capability] { min-height: 250vh; }

.capability-journey { display: none; }

html.js #capability[data-capability]:not([data-cap-step="6"]) .capability-actions {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.gap-scene,
.fit-scene { position: relative; }
.gap-scene svg,
.fit-scene svg,
.approach-visual svg,
.cap-rail-node svg,
.cap-rail-link,
.approach-connector {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gap-scene {
  height: 25rem;
  margin-top: 0.4rem;
}
.gap-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: none;
}
.gap-connection {
  fill: none;
  stroke: url(#gap-line);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: stroke-dashoffset 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.gap-pulse { fill: var(--amber); opacity: 0; transition: opacity 0.25s ease 0.3s; }
.gap-node {
  position: absolute;
  width: 8.3rem;
  text-align: center;
  z-index: 3;
}
.gap-node-1 { left: 2%; top: 48%; }
.gap-node-2 { left: 22%; top: 29%; }
.gap-node-3 { left: 43%; top: 58%; }
.gap-node-4 { left: 64%; top: 26%; }
.gap-node-5 { right: 1%; top: 47%; }
.gap-block {
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 4.35rem;
  margin: 0 auto 0.72rem;
  color: var(--cream);
  background: linear-gradient(145deg, #514c45, #232323 60%);
  border: 1px solid rgba(216, 144, 66, 0.5);
  border-radius: 0.55rem;
  box-shadow: 0 0.45rem 0 #171717, 0 0.7rem 1rem rgba(35, 26, 14, 0.32);
}
.gap-block svg { width: 2rem; height: 2rem; }
.gap-node strong {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  font-size: 0.82rem;
}
.gap-callout {
  position: absolute;
  z-index: 4;
  padding: 0.32rem 0.55rem;
  color: #594325;
  background: rgba(247, 240, 229, 0.9);
  border: 1px solid rgba(139, 90, 32, 0.28);
  border-radius: 0.28rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.gap-callout-1 { left: 15%; top: 70%; }
.gap-callout-2 { left: 36%; top: 51%; }
.gap-callout-3 { left: 65%; top: 8%; }
.gap-callout-4 { right: 1%; top: 30%; }
.gap-key {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.gap-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
  color: #7b5b32;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

html.js .gap-node,
html.js .gap-callout,
html.js .gap-legend span,
html.js [data-fit-from],
html.js .approach-stage,
html.js .approach-routes,
html.js .cap-leg {
  visibility: hidden;
  opacity: 0;
}
html.js [data-gap-step="1"] [data-gap-from="1"],
html.js [data-gap-step="2"] [data-gap-from="1"],
html.js [data-gap-step="2"] [data-gap-from="2"],
html.js [data-gap-step="3"] [data-gap-from="1"],
html.js [data-gap-step="3"] [data-gap-from="2"],
html.js [data-gap-step="3"] [data-gap-from="3"],
html.js [data-gap-step="4"] [data-gap-from] {
  visibility: visible;
  opacity: 1;
}
html.js [data-gap-step="1"] .gap-c1,
html.js [data-gap-step="2"] .gap-c1,
html.js [data-gap-step="2"] .gap-c2,
html.js [data-gap-step="3"] .gap-c1,
html.js [data-gap-step="3"] .gap-c2,
html.js [data-gap-step="3"] .gap-c3,
html.js [data-gap-step="4"] .gap-connection { stroke-dashoffset: 0; }
html.js [data-gap-step="1"] .gap-p1,
html.js [data-gap-step="2"] .gap-p1,
html.js [data-gap-step="2"] .gap-p2,
html.js [data-gap-step="3"] .gap-p1,
html.js [data-gap-step="3"] .gap-p2,
html.js [data-gap-step="3"] .gap-p3,
html.js [data-gap-step="4"] .gap-pulse { opacity: 1; }

.fit-scene { height: 26rem; margin-top: 0.5rem; }
.fit-monolith {
  position: absolute;
  left: 4%;
  bottom: 1.2rem;
  width: 18rem;
  height: 17rem;
  z-index: 3;
}
.fit-sign,
.fit-layer > span {
  display: block;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  color: var(--ink);
  background: linear-gradient(180deg, #f3eadb, #d6c5ad);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.42rem;
  box-shadow: 0 0.45rem 0 #806b51;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.82rem;
}
.fit-grid {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 1rem;
  min-height: 13.3rem;
  background: linear-gradient(145deg, #393733, #15171a);
  border-radius: 0.6rem;
  transform: perspective(36rem) rotateX(10deg) rotateY(5deg);
  box-shadow: 0 0.7rem 0 #08090b;
}
.fit-cube {
  display: grid;
  place-items: center;
  min-height: 3rem;
  color: var(--cream);
  background: linear-gradient(145deg, #4d4942, #242528 64%);
  border: 1px solid rgba(216, 144, 66, 0.28);
  border-radius: 0.3rem;
}
.fit-cube-b, .fit-cube-f, .fit-cube-k { transform: translateY(-0.7rem); }
.fit-cube-d, .fit-cube-i { transform: translateY(0.55rem); }
.fit-cube svg { width: 1.15rem; height: 1.15rem; }
.fit-bent-path {
  position: absolute;
  inset: 2.1rem -0.4rem auto -0.4rem;
  width: calc(100% + 0.8rem);
  height: 14rem;
  overflow: visible;
  z-index: 5;
  stroke: none;
}
.fit-bent-path path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.fit-bent-path circle { fill: var(--blue); opacity: 0; transition: opacity 0.3s ease 0.4s; }
.fit-note {
  position: absolute;
  z-index: 8;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.82rem;
}
.fit-unused { left: 0; top: 42%; }
.fit-bends { left: 1%; bottom: 1%; }
.fit-missing { right: 0; top: 17%; text-align: right; }
.fit-monolith {
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.fit-transition {
  position: absolute;
  left: calc(4% + 14.8rem);
  right: auto;
  top: auto;
  bottom: 5.4rem;
  width: calc(55% - 14.8rem);
  height: 1.7rem;
  max-width: none;
  overflow: visible;
  z-index: 2;
  stroke: none;
}
.fit-transition-vertical { display: none; }
.fit-transition path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fit-transition .fit-link-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fit-foundation,
.fit-layer {
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.fit-foundation {
  position: absolute;
  right: 1%;
  bottom: 1.2rem;
  width: 41%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 2.8rem 0.9rem 1rem;
  background: linear-gradient(145deg, #302e2b, #17191c);
  border-radius: 0.7rem;
  box-shadow: 0 0.65rem 0 #08090b;
}
.fit-base-tile { min-width: 0; color: var(--amber); text-align: center; }
.fit-base-icon {
  display: grid;
  place-items: center;
  min-height: 4.4rem;
  margin-bottom: 0.55rem;
  color: var(--cream);
  background: linear-gradient(145deg, #45413b, #202226 64%);
  border: 1px solid rgba(216, 144, 66, 0.35);
  border-radius: 0.42rem;
}
.fit-base-icon svg { width: 1.4rem; height: 1.4rem; }
.fit-base-tile strong { display: block; overflow-wrap: anywhere; font-size: 0.82rem; }
.fit-layer {
  position: absolute;
  right: 1.5%;
  bottom: 11.5rem;
  width: 40%;
  z-index: 6;
}
.fit-layer svg { display: block; width: 100%; height: 5rem; overflow: visible; stroke: none; }
.fit-layer path { fill: none; stroke: var(--amber); stroke-width: 3; }
.fit-layer circle { fill: var(--amber); }

html.js [data-fit-step="1"] [data-fit-from="1"],
html.js [data-fit-step="2"] [data-fit-from="1"],
html.js [data-fit-step="2"] [data-fit-from="2"],
html.js [data-fit-step="3"] [data-fit-from="1"],
html.js [data-fit-step="3"] [data-fit-from="2"],
html.js [data-fit-step="3"] [data-fit-from="3"],
html.js [data-fit-step="4"] [data-fit-from] {
  visibility: visible;
  opacity: 1;
}
html.js [data-fit-step="2"] .fit-bent-path path,
html.js [data-fit-step="3"] .fit-bent-path path,
html.js [data-fit-step="4"] .fit-bent-path path { stroke-dashoffset: 0; }
html.js [data-fit-step="2"] .fit-bent-path circle,
html.js [data-fit-step="3"] .fit-bent-path circle,
html.js [data-fit-step="4"] .fit-bent-path circle { opacity: 1; }
html.js [data-fit-step="3"] .fit-monolith,
html.js [data-fit-step="4"] .fit-monolith { transform: translateX(-8%) scale(0.9); }
html.js .fit-foundation { transform: translateY(1.1rem) scale(0.94); }
html.js [data-fit-step="3"] .fit-foundation,
html.js [data-fit-step="4"] .fit-foundation { transform: none; }
html.js .fit-layer { transform: scaleY(0.18); transform-origin: bottom center; }
html.js [data-fit-step="4"] .fit-layer { transform: none; }
html.js [data-fit-step="3"] .fit-link-line,
html.js [data-fit-step="4"] .fit-link-line { stroke-dashoffset: 0; }

.approach-journey { position: relative; }
.approach-journey .approach-stage {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.approach-meta { display: flex; align-items: baseline; gap: 0.65rem; margin-bottom: 0.6rem; }
.approach-journey .approach-number,
.approach-meta h3 {
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.approach-meta h3 { font-size: 1.05rem; }
.approach-platform {
  position: relative;
  min-height: 8.5rem;
  padding: 0.85rem 1.05rem 2.4rem;
  color: var(--cream);
  background: linear-gradient(150deg, #403b35, #151618);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.75rem;
  box-shadow: 0 0.62rem 0 #16130f;
  overflow: visible;
  transition: box-shadow 0.35s ease;
}
.approach-visual { position: relative; width: 100%; height: 5.25rem; }
.approach-visual-links,
.approach-choice-lines,
.approach-proof-line,
.approach-branch-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: none;
}
.approach-visual-links path,
.approach-choice-lines path,
.approach-branch-lines path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linecap: round;
}
.approach-proof-line path { fill: none; stroke: var(--amber); stroke-width: 3; }
.approach-mini,
.approach-choice,
.approach-proof-node,
.approach-branch-node,
.approach-branch-core,
.approach-lens {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  color: var(--cream);
  background: linear-gradient(145deg, #514b43, #232426 68%);
  border: 1px solid rgba(216, 146, 62, 0.42);
  border-radius: 0.38rem;
}
.approach-mini svg,
.approach-choice svg,
.approach-proof-node svg,
.approach-branch-node svg,
.approach-branch-core svg,
.approach-lens svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.approach-route > span svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.approach-node-a { left: 3%; top: 45%; }
.approach-node-b { left: 50%; top: -8%; width: 2rem; height: 2rem; transform: translateX(-50%); }
.approach-node-c { right: 2%; top: 51%; }
.approach-lens {
  left: 50%;
  top: 34%;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--ink);
  background: linear-gradient(145deg, #f5d9a7, var(--amber));
  border-radius: 50%;
  transform: translateX(-50%);
}
.approach-choose, .approach-prove {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 4%;
  box-sizing: border-box;
}
.approach-choice, .approach-proof-node { position: relative; }
.approach-choice-selected,
.approach-branch-core {
  width: 3.2rem;
  height: 3.2rem;
  color: var(--ink);
  background: linear-gradient(145deg, #f5d9a7, var(--amber));
}
.approach-branch-core { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.approach-branch-left { left: 1%; top: 49%; }
.approach-branch-right { right: 1%; top: 49%; }
.approach-proof-checked { color: var(--blue); border-color: rgba(66, 168, 255, 0.7); }
.approach-platform > strong {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -0.15rem;
  padding: 0.58rem 0.7rem;
  color: var(--cream);
  background: linear-gradient(180deg, #242321, #151517);
  border: 1px solid rgba(216, 146, 62, 0.58);
  border-radius: 0.36rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}
.approach-connector {
  display: block;
  width: 4rem;
  height: 4.8rem;
  margin: 0.4rem auto 0;
  overflow: visible;
  stroke: none;
}
.approach-connector-h { display: none; }
.approach-connector path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  transition: stroke-dashoffset 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.approach-routes {
  margin-top: 1.2rem;
  transition: opacity 0.35s ease, visibility 0.35s ease, box-shadow 0.35s ease;
}
.approach-banner {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  color: var(--cream);
  background: linear-gradient(150deg, #302d29, #171719);
  border: 1px solid rgba(216, 146, 62, 0.58);
  border-radius: 0.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.approach-route-list { display: grid; gap: 0.8rem; }
.approach-route {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  padding: 0.55rem 0.4rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid transparent;
  background: transparent;
}
.approach-route > span[aria-hidden] {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 auto 0.55rem;
  color: var(--cream);
  background: linear-gradient(145deg, #403c37, #1e1f21);
  border: 1px solid rgba(216, 146, 62, 0.54);
  border-radius: 0.45rem;
}
.approach-route-action {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.approach-route strong, .approach-route em { display: block; }
.approach-route em { font-style: normal; margin-top: 0.18rem; }
#approach .approach-route p { color: var(--ink); margin: 0; }
#approach .approach-route strong { color: var(--ink); }
#approach .approach-route em { color: #6b4a1e; }
.approach-route:hover,
.approach-route:focus-visible {
  border-color: rgba(216, 144, 66, 0.7);
  background: rgba(255, 248, 235, 0.42);
}
.approach-route:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.approach-route:focus-visible .approach-route-action {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--focus);
}

html.js [data-approach-step="1"] [data-approach-from="1"],
html.js [data-approach-step="2"] [data-approach-from="1"],
html.js [data-approach-step="2"] [data-approach-from="2"],
html.js [data-approach-step="3"] [data-approach-from="1"],
html.js [data-approach-step="3"] [data-approach-from="2"],
html.js [data-approach-step="3"] [data-approach-from="3"],
html.js [data-approach-step="4"] [data-approach-from="1"],
html.js [data-approach-step="4"] [data-approach-from="2"],
html.js [data-approach-step="4"] [data-approach-from="3"],
html.js [data-approach-step="4"] [data-approach-from="4"],
html.js [data-approach-step="5"] [data-approach-from] {
  visibility: visible;
  opacity: 1;
}
html.js [data-approach-step="2"] .approach-connector[data-approach-from="2"] path,
html.js [data-approach-step="3"] .approach-connector[data-approach-from="2"] path,
html.js [data-approach-step="3"] .approach-connector[data-approach-from="3"] path,
html.js [data-approach-step="4"] .approach-connector[data-approach-from="2"] path,
html.js [data-approach-step="4"] .approach-connector[data-approach-from="3"] path,
html.js [data-approach-step="4"] .approach-connector[data-approach-from="4"] path,
html.js [data-approach-step="5"] .approach-connector path {
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 0.35rem rgba(67, 167, 255, 0.55));
}
html.js [data-approach-step="1"] .approach-stage[data-approach-from="1"] .approach-platform,
html.js [data-approach-step="2"] .approach-stage[data-approach-from="2"] .approach-platform,
html.js [data-approach-step="3"] .approach-stage[data-approach-from="3"] .approach-platform,
html.js [data-approach-step="4"] .approach-stage[data-approach-from="4"] .approach-platform {
  box-shadow:
    0 0.62rem 0 #16130f,
    0 0 0 1px rgba(216, 144, 66, 0.45),
    0 0 1.05rem rgba(216, 144, 66, 0.36);
}
html.js [data-approach-step="5"] .approach-routes {
  box-shadow: 0 0 1.05rem rgba(216, 144, 66, 0.28);
}

.cap-leg { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 0.8rem; }
.cap-rail { position: relative; min-height: 8.2rem; }
.cap-rail-node {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--cream);
  background: linear-gradient(145deg, #393b3e, #191c21);
  border: 1px solid rgba(216, 144, 66, 0.48);
  border-radius: 50%;
}
.cap-leg-b .cap-rail-node {
  left: 1.25rem;
  border-color: rgba(66, 168, 255, 0.56);
}
.cap-rail-node svg { width: 1.35rem; height: 1.35rem; }
.cap-rail-link {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 4.25rem;
  height: 6.75rem;
  overflow: visible;
  stroke: none;
}
.cap-rail-link path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transition: stroke-dashoffset 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.cap-leg-copy h3 { color: var(--amber); margin: 0 0 0.35rem; }
.cap-leg-copy p { margin: 0; color: #d5deea; }
.cap-rail-tail {
  position: absolute;
  top: 3rem;
  left: 1.45rem;
  width: 2px;
  height: 4.2rem;
  background: var(--amber);
  transform-origin: top;
}
html.js .cap-rail-link path { stroke-dashoffset: 160; }
html.js [data-cap-step="2"] [data-cap-from="2"] path,
html.js [data-cap-step="3"] [data-cap-from="2"] path,
html.js [data-cap-step="3"] [data-cap-from="3"] path,
html.js [data-cap-step="4"] .cap-rail-link[data-cap-from="2"] path,
html.js [data-cap-step="4"] .cap-rail-link[data-cap-from="3"] path,
html.js [data-cap-step="4"] .cap-rail-link[data-cap-from="4"] path,
html.js [data-cap-step="5"] .cap-rail-link path,
html.js [data-cap-step="6"] .cap-rail-link path { stroke-dashoffset: 0; }
html.js [data-cap-step="1"] .cap-leg[data-cap-from="1"],
html.js [data-cap-step="2"] .cap-leg[data-cap-from="1"],
html.js [data-cap-step="2"] .cap-leg[data-cap-from="2"],
html.js [data-cap-step="3"] .cap-leg[data-cap-from="1"],
html.js [data-cap-step="3"] .cap-leg[data-cap-from="2"],
html.js [data-cap-step="3"] .cap-leg[data-cap-from="3"],
html.js [data-cap-step="4"] .cap-leg[data-cap-from="1"],
html.js [data-cap-step="4"] .cap-leg[data-cap-from="2"],
html.js [data-cap-step="4"] .cap-leg[data-cap-from="3"],
html.js [data-cap-step="4"] .cap-leg[data-cap-from="4"],
html.js [data-cap-step="5"] .cap-leg,
html.js [data-cap-step="6"] .cap-leg {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 901px) {
  html.js [data-scene="fit"] { min-height: 200vh; }
  .approach-journey {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.35rem;
    row-gap: 0.85rem;
    align-items: start;
  }
  .approach-meta { display: block; min-height: 3.4rem; }
  .approach-connector:not(.approach-connector-final) {
    position: absolute;
    top: 58%;
    right: -1.2rem;
    width: 1.55rem;
    height: 2.15rem;
    margin: 0;
  }
  .approach-connector:not(.approach-connector-final) .approach-connector-v { display: none; }
  .approach-connector:not(.approach-connector-final) .approach-connector-h { display: block; }
  .approach-connector-final { display: none; }
  .approach-routes {
    grid-column: 1 / -1;
    width: min(100%, 47rem);
    margin: 0.35rem auto 0;
  }
  .approach-route-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    justify-items: center;
  }
}

@media (max-width: 900px) {
  .capability-board { display: none; }
  .capability-stages {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .capability-journey { display: block; }
  .gap-scene {
    width: min(100%, 30rem);
    height: 38rem;
    margin: 1.3rem auto 0;
    overflow: hidden;
  }
  .gap-links { transform: rotate(90deg) scaleX(1.47) scaleY(0.72); transform-origin: center; }
  .gap-node {
    left: auto;
    right: auto;
    width: 12rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
  .gap-block { width: 4.45rem; height: 3.65rem; margin: 0; flex: 0 0 auto; }
  .gap-node-1 { left: 4%; top: 0; }
  .gap-node-2 { right: 3%; top: 20%; flex-direction: row-reverse; text-align: right; }
  .gap-node-3 { left: 4%; top: 40%; }
  .gap-node-4 { right: 3%; top: 60%; flex-direction: row-reverse; text-align: right; }
  .gap-node-5 { left: 4%; top: 80%; }
  .gap-callout-1 { left: 51%; top: 12%; }
  .gap-callout-2 { left: 5%; top: 33%; }
  .gap-callout-3 { left: 51%; top: 52%; }
  .gap-callout-4 { left: 49%; top: 87%; right: auto; }
  .gap-legend { grid-template-columns: 1fr 1fr; }
  html.js [data-scene="fit"] .scene-sticky { align-items: flex-start; }
  .fit-scene { height: 38rem; margin-top: 0.8rem; }
  .fit-monolith {
    left: 50%;
    bottom: auto;
    top: 0;
    width: min(18rem, 94%);
    transform: translateX(-50%);
  }
  .fit-unused {
    left: 2%;
    top: 28%;
    padding: 0.16rem 0.36rem;
    background: #08090C;
    box-shadow: 0 0 0.38rem 0.1rem #08090C;
    border-radius: 0.16rem;
  }
  .fit-bends { right: 2%; left: auto; top: 34%; bottom: auto; }
  .fit-transition-wide { display: none; }
  .fit-transition-vertical {
    display: block;
    left: 50%;
    top: 15.5rem;
    bottom: auto;
    width: 1.7rem;
    height: 4.6rem;
    max-width: none;
    max-height: none;
    transform: translateX(-50%);
  }
  html.js .fit-monolith { transform: translateX(-50%); }
  html.js [data-fit-step="3"] .fit-monolith,
  html.js [data-fit-step="4"] .fit-monolith { transform: translateX(-50%) scale(0.86); }
  html.js .fit-foundation { transform: translateX(-50%) translateY(1rem) scale(0.94); }
  html.js [data-fit-step="3"] .fit-foundation,
  html.js [data-fit-step="4"] .fit-foundation { transform: translateX(-50%); }
  html.js .fit-layer { transform: translateX(-50%) scaleY(0.18); transform-origin: bottom center; }
  html.js [data-fit-step="4"] .fit-layer { transform: translateX(-50%) scaleY(1); }
  .fit-foundation {
    left: 50%;
    right: auto;
    bottom: 0.8rem;
    width: min(94%, 30rem);
    transform: translateX(-50%);
  }
  .fit-layer {
    left: 50%;
    right: auto;
    bottom: 10.8rem;
    width: min(86%, 27rem);
    transform: translateX(-50%);
  }
  .fit-missing {
    left: 0;
    right: 0;
    top: auto;
    bottom: 19.1rem;
    width: max-content;
    margin-inline: auto;
    transform: none;
    text-align: center;
    white-space: nowrap;
    padding: 0.16rem 0.36rem;
    background: #08090C;
    box-shadow: 0 0 0.38rem 0.1rem #08090C;
    border-radius: 0.16rem;
  }
  .approach-route-list { justify-items: center; }
  .fit-sign { white-space: normal; }
  #approach {
    padding-bottom: clamp(4.5rem, 10vh, 7.5rem);
  }
  html.js [data-scene="gap"],
  html.js [data-scene="approach"],
  html.js #capability[data-capability] {
    min-height: 0;
  }
  html.js [data-scene="gap"] .scene-sticky,
  html.js [data-scene="approach"] .scene-sticky,
  html.js #capability .capability-sticky {
    position: static;
    min-height: 0;
    display: block;
    align-items: stretch;
    padding: 0;
  }
  html.js #approach .approach-stage,
  html.js #approach .approach-routes {
    display: block;
  }
  html.js #gap .gap-node,
  html.js #gap .gap-callout,
  html.js #gap .gap-legend span,
  html.js #approach .approach-stage,
  html.js #approach .approach-routes,
  html.js #capability .cap-leg {
    visibility: visible;
    opacity: 0;
    transform: translate3d(0, 0.7rem, 0);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }
  html.js #gap .gap-node.is-arrived,
  html.js #gap .gap-callout.is-arrived,
  html.js #gap .gap-legend span.is-arrived,
  html.js #approach .approach-stage.is-arrived,
  html.js #approach .approach-routes.is-arrived,
  html.js #capability .cap-leg.is-arrived {
    opacity: 1;
    transform: none;
  }
  html.js #gap .gap-connection {
    stroke-dashoffset: 360;
  }
  html.js #gap .gap-connection.is-arrived {
    stroke-dashoffset: 0;
  }
  html.js #gap .gap-pulse {
    opacity: 0;
  }
  html.js #gap .gap-pulse.is-arrived {
    opacity: 1;
  }
  html.js #approach .approach-connector path {
    stroke-dashoffset: 110;
  }
  html.js #approach .approach-connector.is-arrived path {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 0.35rem rgba(67, 167, 255, 0.55));
  }
  html.js #approach .approach-stage.is-arrived .approach-platform {
    box-shadow:
      0 0.62rem 0 #16130f,
      0 0 0 1px rgba(216, 144, 66, 0.45),
      0 0 1.05rem rgba(216, 144, 66, 0.36);
  }
  html.js #capability .cap-rail-link path {
    stroke-dashoffset: 160;
  }
  html.js #capability .cap-leg.is-arrived .cap-rail-link.is-arrived path,
  html.js #capability .cap-rail-link.is-arrived path {
    stroke-dashoffset: 0;
  }
  html.js #capability[data-capability] .capability-actions {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-scene] { min-height: 0; }
  html.js [data-scene] .scene-sticky { position: static; min-height: 0; }
  html.js .gap-node,
  html.js .gap-callout,
  html.js .gap-legend span,
  html.js [data-fit-from],
  html.js .approach-stage,
  html.js .approach-routes,
  html.js .approach-proof-checked,
  html.js .approach-branch-node,
  html.js .cap-leg,
  html.js .cap-gated,
  html.js .cap-stage {
    visibility: visible !important;
    opacity: 1 !important;
  }
  html.js .gap-connection,
  html.js .fit-bent-path path,
  html.js .fit-link-line,
  html.js .approach-connector path,
  html.js .cap-rail-link path,
  html.js .cap-connector {
    stroke-dashoffset: 0 !important;
  }
  html.js .fit-monolith,
  html.js .fit-foundation,
  html.js .fit-layer { transform: none !important; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html.js .fit-monolith,
  html.js .fit-foundation,
  html.js .fit-layer,
  .fit-monolith,
  .fit-foundation,
  .fit-layer {
    transform: translateX(-50%) !important;
  }
  html.js .approach-stage,
  html.js .approach-routes { display: block !important; }
  html.js #gap .gap-node,
  html.js #gap .gap-callout,
  html.js #gap .gap-legend span,
  html.js #approach .approach-stage,
  html.js #approach .approach-routes,
  html.js #capability .cap-leg {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 340px) {
  .fit-scene { height: 40rem; }
  .fit-foundation {
    bottom: 2.8rem;
    gap: 0.35rem;
    padding-top: 2.8rem;
    padding-inline: 0.4rem;
    padding-bottom: 1.55rem;
  }
  .fit-base-tile strong {
    overflow-wrap: normal;
    white-space: nowrap;
    font-size: 0.7rem;
  }
  .fit-layer { bottom: 12.8rem; }
  .fit-missing { bottom: 21.1rem; }
}

.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid rgba(216, 144, 66, 0.5);
  border-radius: 999px;
  background: rgba(10, 11, 13, 0.72);
  color: var(--amber);
  transform: translateX(-50%);
  cursor: pointer;
}
.scroll-cue[hidden] { display: none; }
.scroll-cue svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue {
    animation: scroll-cue-nudge 1.8s ease-in-out infinite;
  }
}
@keyframes scroll-cue-nudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(0.28rem); }
}

/* V2 refinement: readable content is the base; native scroll is progressive enhancement. */
html { scroll-behavior: auto; }
.v2-connection { position: relative; background: #111d24; }
.v2-process { position: relative; scroll-margin-top: var(--nav-h); background: #101d24; }
.v2-services { background: #0d1519; padding: 0 0 clamp(6rem, 10vw, 10rem); }
.scene-intro { padding-top: clamp(5rem, 9vw, 9rem); padding-bottom: 3rem; }
.v2-process > .scene-intro { padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: 1rem; }
.home-v2 .v2-process > .scene-intro h2 { margin-bottom: 1rem; }
.v2-process .scroll-stage { --scroll-stage-padding: 1rem; }
.home-v2 .scene-intro h2 { max-width: 1000px; margin-bottom: 1.8rem; font-size: clamp(2.6rem, 5.7vw, 6rem); line-height: 1.05; }
.scene-intro > p:not(.v2-eyebrow) { max-width: 660px; color: #bdcbc8; font-size: 1.08rem; }
.scene-intro-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; max-width: 1050px; }
.scene-intro-columns p { color: #bdcbc8; font-size: 1.02rem; }
.scene-intro-columns p:first-child { font-size: 1.45rem; color: #e8e9df; }
.scroll-track { position: relative; }
.scroll-stage {
  --scroll-stage-padding: 2rem;
  --scene-cue-space: 2.9rem;
  position: relative;
  padding: var(--scroll-stage-padding) 0;
}
.stage-panels { display: grid; gap: 3rem; }
.stage-indicator { display: flex; gap: 1.5rem; border-top: 1px solid #4d6168; margin-bottom: 1.8rem; }
.stage-indicator > span { flex: 1; border-top: 2px solid transparent; padding-top: .85rem; color: #bfcbc7; font-size: .8rem; }
.stage-indicator b { font-weight: 430; margin-left: .4rem; }
.stage-indicator .is-current { border-top-color: #d7ad78; color: #f3e8d5; }
.handoff-flow-mobile { display: none; }
.work-record { position: relative; padding: 1.6rem 1.8rem; border: 1px solid #5d7176; background: #203037; box-shadow: 0 22px 48px #0003; max-width: 460px; margin: auto; }
.work-record small, .connection-board small, .service-example > small, .service-rows small, .process-delivery small { display: block; color: #e0ba88; text-transform: uppercase; font-size: .65rem; letter-spacing: .12em; }
.work-record > strong { display: block; margin: .8rem 0 1rem; font-size: 1.35rem; line-height: 1.2; font-weight: 450; letter-spacing: -.025em; }
.work-record dl { margin: 0; }
.work-record dl div { display: grid; grid-template-columns: 6rem 1fr; gap: .7rem; padding: .7rem 0; border-top: 1px solid #526269; font-size: .85rem; line-height: 1.4; }
.work-record dt { color: #b4c4c3; }
.work-record dd { margin: 0; color: #f0ece2; }
.scene-disclosure { color: #b5c2bf; font-size: .65rem; letter-spacing: .06em; margin: 1rem 0 0; }
.connection-board { position: relative; min-height: 500px; max-width: 1000px; display: grid; grid-template-rows: auto 95px auto 66px auto auto; }
.connection-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 18%; grid-row: 1; position: relative; z-index: 2; }
.connection-source { border: 1px solid #526970; background: #1a2a32; padding: 1.4rem 1.7rem; }
.home-v2 .connection-source h3 { font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 430; letter-spacing: -.035em; margin: .5rem 0; }
.connection-source p { color: #becdc9; font-size: .85rem; line-height: 1.5; margin-bottom: 0; }
.connection-wires { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.connection-wire { fill: none; stroke: #d7ad78; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.connection-layer { grid-row: 3; position: relative; width: 72%; margin: auto; z-index: 2; text-align: center; padding: 1.3rem; background: #2a4149; border-top: 1px solid #d7ad78; border-bottom: 1px solid #728c8f; box-shadow: 0 20px 40px #0003; }
.connection-layer strong { display: block; font-size: clamp(1.15rem, 2vw, 1.8rem); font-weight: 450; line-height: 1.3; margin-top: .5rem; }
.connection-outcome { grid-row: 5; display: grid; grid-template-columns: repeat(3,1fr); text-align: center; border-top: 1px solid #647e83; padding-top: 1.2rem; gap: 1rem; }
.connection-outcome strong { display: block; font-size: 1rem; font-weight: 450; margin-top: .4rem; }
.connection-caption { grid-row: 6; text-align: center; color: #becdc9; font-size: .8rem; margin: 2.2rem 0 0; }
.connection-detail { padding: 3rem 0 6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; border-top: 1px solid #455e67; }
.connection-detail p { font-size: 1rem; color: #becdc9; }
.connection-detail h3 { font-weight: 450; font-size: 1.6rem; letter-spacing: -.03em; }
.process-light { position: absolute; inset: -15% -10%; background: radial-gradient(ellipse at 50% 50%,#59645888 0%,#2d485855 35%,transparent 68%); pointer-events: none; }
.v2-process .scroll-stage { overflow: clip; isolation: isolate; }
.process-layout { position: relative; display: grid; grid-template-columns: 190px minmax(0, 700px); justify-content: center; gap: 4rem; }
.process-layout .stage-indicator { display: flex; flex-direction: column; border: 0; border-left: 1px solid #566f78; margin: 1rem 0; gap: 0; }
.process-layout .stage-indicator > span { border: 0; border-left: 2px solid transparent; padding: 1.1rem 1rem; margin-left: -1px; }
.process-layout .stage-indicator > span.is-current { border-left-color: #d7ad78; }
.process-layout .stage-indicator b { display: block; margin: .4rem 0 0; }
.process-card { background: linear-gradient(135deg,#273f48,#1b303c 65%,#2a3e44); border: 1px solid #6f858b; padding: 2.5rem 3rem; box-shadow: 0 25px 60px #0004; }
.process-card-heading { display: flex; gap: 1.6rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid #637d84; }
.process-card-heading > span { font-size: 4rem; font-weight: 400; color: #dfc6a0; letter-spacing: -.06em; line-height: 1; }
.home-v2 .process-card-heading h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; margin: 0; max-width: 11rem; }
.process-card h4 { font-size: clamp(1.9rem,3.2vw,3.4rem); font-weight: 430; letter-spacing: -.04em; line-height: 1.08; margin: 1.5rem 0 1rem; }
.process-card p { font-size: 1rem; color: #c8d8d2; max-width: 33rem; margin-bottom: 1.5rem; }
.process-delivery { border-top: 1px solid #637d84; padding-top: 1rem; }
.process-delivery strong { display: block; font-size: .95rem; font-weight: 450; margin-top: .4rem; }
.services-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7rem; align-items: start; }
.service-rows article { border-top: 1px solid #4a6065; padding: 2rem 0 2.7rem; }
.home-v2 .service-rows h3 { font-size: clamp(2rem,3.2vw,3.5rem); font-weight: 450; letter-spacing: -.045em; line-height: 1.1; margin: 1rem 0; }
.service-rows p { font-size: 1rem; color: #c0cdc7; max-width: 34rem; }
.service-rows a { font-size: .88rem; text-underline-offset: .35em; }
.service-example { position: sticky; top: calc(var(--nav-h) + 2rem); padding: 2rem 1.5rem; background: radial-gradient(ellipse at 60% 55%, #2b4445, #16262d 60%, #102029); }
.home-v2 .service-example h3 { font-size: clamp(2rem,3vw,3rem); font-weight: 450; letter-spacing: -.04em; line-height: 1.1; margin: 2rem 0 3rem; }
.service-example .work-record { margin: 0 0 2rem; transform: perspective(900px) rotateY(-5deg); }
.service-example .work-record::before { content: ''; position: absolute; inset: -12px 12px auto -12px; height: 100%; border: 1px solid #687e7966; pointer-events: none; z-index: -1; }

/* The evidence, enquiry, training and privacy journey share the same family. */
.page-inner { --wrap: min(1180px, calc(100% - 72px)); --text: #f0ece2; --muted: #bfcbc6; background: #101b20; color: var(--text); }
.page-inner .site-nav { background: #0b1115f5; }
.page-inner .nav-links { gap: clamp(.8rem,1.8vw,1.6rem); }
.page-inner .nav-links a { font-size: .82rem; letter-spacing: .015em; }
.page-inner .nav-cta { font-size: .82rem; padding: .57rem .92rem; }
.page-inner .page-main { padding: 5rem 0 7rem; background: radial-gradient(ellipse at 90% 0%,#263e4055,transparent 700px); }
.page-inner h1 { font-size: clamp(2.6rem, 5.6vw, 5.6rem); font-weight: 430; letter-spacing: -.055em; line-height: 1.07; max-width: 1050px; margin: 1.5rem 0 2rem; }
.page-inner h2, .page-inner h3 { font-weight: 460; letter-spacing: -.025em; }
.page-inner .intro { max-width: 850px; color: #c1d0c9; font-size: 1.06rem; line-height: 1.7; }
.page-inner .marker, .page-inner .kicker, .evidence-breadcrumb { color: #dfb989; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
.page-inner .proof-label { color: #dfb989; font-size: .74rem; }
.page-inner .meta-audience { color: #bdccc8; font-size: .85rem; }
.page-inner .story-grid { max-width: 1120px; display: block; }
.evidence-hero { padding-bottom: 2rem; }
.evidence-breadcrumb { display: inline-block; margin-bottom: 2rem; text-underline-offset: .3em; }
.evidence-hero .kicker { margin-bottom: .5rem; }
.evidence-hero .proof-label { display: inline-block; margin-right: 2rem; }
.evidence-hero .meta-audience { display: inline-block; }
.page-inner .evidence-media { margin-bottom: 2rem; padding: 1.5rem 0 2rem; border-top: 1px solid #58716f; border-bottom: 1px solid #58716f; }
.page-inner .evidence-media h2 { font-size: .85rem; font-weight: 450; margin: 0 0 1rem; color: #d5e0d8; }
.evidence-media .film { border: 1px solid #56706b; border-radius: 0; box-shadow: none; background: #101819; }
.evidence-media video { display: block; width: 100%; height: auto; }
.page-inner details { font-size: .92rem; color: #c2d0c8; border: 0; background: transparent; padding: 1.2rem 0 0; }
.page-inner summary { color: #e3e6da; cursor: pointer; }
.page-inner .evidence-section { display: grid; grid-template-columns: minmax(130px,.32fr) minmax(0,1fr); gap: 4rem; padding: 2.5rem 0; border-bottom: 1px solid #40585b; }
.page-inner .evidence-section h2 { font-size: .85rem; letter-spacing: .035em; font-weight: 480; color: #dfb989; margin: .3rem 0 0; }
.evidence-section-body p, .evidence-section-body li { font-size: 1.04rem; line-height: 1.75; color: #c8d4cc; }
.evidence-section-body p:first-child { margin-top: 0; }
.evidence-section-body p:last-child { margin-bottom: 0; }
.page-inner .flow-list { padding-left: 1.35rem; }
.page-inner .flow-list li { padding-left: .45rem; margin-bottom: .65rem; }
.page-inner .story-nav { padding-top: 2rem; gap: 1.5rem 3rem; border-top: 0; }
.page-inner .story-nav .card-link { color: #e0c29b; font-size: .9rem; }
.page-inner footer { background: #0b1115; border-top-color: #405459; }
.page-inner .work-grid { display: block; margin-top: 3rem; }
.evidence-row { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; padding: 3rem 0; border-top: 1px solid #4a6265; }
.page-inner .evidence-row h2 { font-size: clamp(2rem,3.2vw,3.4rem); line-height: 1.1; margin: 1.2rem 0; }
.evidence-row-title .meta-audience { max-width: 24rem; }
.evidence-row-copy p { font-size: .98rem; color: #c5d1c9; }
.evidence-row-copy .card-label { margin-top: 0; padding-top: 0; color: #dec19a; font-size: .65rem; }
.evidence-row-copy p + .card-label { margin-top: 1.6rem; }
.page-inner .evidence-row .button { padding: 0 0 .3rem; border: 0; border-bottom: 1px solid #b89975; border-radius: 0; box-shadow: none; background: transparent; color: #eddfc8; font-size: .85rem; }
.page-inner .view-switch { display: flex; gap: 2rem; padding: 1.5rem 0 0; border: 0; border-bottom: 1px solid #486068; border-radius: 0; background: transparent; }
.page-inner .view-switch label { border: 0; border-radius: 0; background: transparent; padding: .7rem 0; font-size: .9rem; color: #bacac8; }
.page-inner .view-switch input:checked + label { border-bottom: 2px solid #d7ad78; background: transparent; color: #f0ece2; }
.page-inner .work-connected { padding: 3rem 0 0; }
.connected-map { margin: 3rem 0 0; padding: clamp(1rem,3vw,3rem); border-top: 1px solid #617773; background: radial-gradient(ellipse at 80% 30%,#274449,#172930 60%,#102027); }
.connected-map small { color: #daba91; font-size: .7rem; display: block; margin-bottom: .7rem; }
.connected-map a { color: #f0ece2; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.map-identity { border-left: 2px solid #d7ad78; padding: 1rem 1.5rem; margin: 2rem 0; }
.map-identity > a { font-size: 1.35rem; }
.map-identity p, .map-controls { color: #c7d5cc; font-size: .9rem; }
.map-identity p { margin-bottom: 0; }
.map-operations { padding: 1.5rem 0; }
.map-operations > div { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.map-operations a { font-size: 1.08rem; }
.map-operations span { font-size: .7rem; color: #daba91; }
.map-bridge { margin: 2rem 0; padding: 1.5rem 2rem; text-align: center; border-top: 1px solid #d7ad78; border-bottom: 1px solid #648087; background: #2a4149; }
.map-bridge a { font-size: 2rem; letter-spacing: -.04em; }
.map-finance { text-align: center; }
.map-finance h3 { margin: .4rem 0; font-size: 1.3rem; }
.map-finance > span { color: #d7ad78; display: block; padding: .5rem; }
.map-outputs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; padding: 1.3rem 0; border-top: 1px solid #607d7b; }
.map-controls { margin: 2rem 0 0; border-top: 1px solid #506868; padding-top: 1.5rem; }
.page-training .capability-grid { display: block; margin: 4rem 0; }
.page-training .card { padding: 2rem 0; background: transparent; border: 0; border-top: 1px solid #4b6468; border-radius: 0; box-shadow: none; display: grid; grid-template-columns: .4fr 1fr; gap: 3rem; }
.page-training .card h3 { font-size: 1.7rem; margin: 0; }
.page-training .card p { font-size: 1.05rem; color: #c7d5cc; margin: 0; }
.page-enquiry .form-card { margin-top: 3rem; max-width: 860px; padding: 2rem 0; border: 0; border-top: 1px solid #5c7476; border-radius: 0; box-shadow: none; background: transparent; }
.page-enquiry input:not([type=checkbox]):not([type=hidden]), .page-enquiry textarea { background: #172930; border-color: #6b7e81; border-radius: 2px; color: #f0ece2; font-size: 1rem; }
.page-enquiry label { color: #d7e0d8; }
.page-inner .doc-main { width: min(900px, calc(100% - 72px)); padding: 5rem 0 6rem; }
.page-privacy .doc-main h1 { margin-top: 0; }
.page-privacy .contents { background: #172930; border: 1px solid #506a6e; border-radius: 0; padding: 1.5rem 2rem; margin: 2rem 0; }
.page-privacy .doc-main section { border-top: 1px solid #4a6165; padding-top: 1.5rem; margin-top: 3rem; }
.page-privacy .doc-main h2 { font-size: 1.6rem; margin: 0 0 1.3rem; }
.page-privacy .doc-main p, .page-privacy .doc-main li { font-size: 1rem; color: #cbd5cd; line-height: 1.75; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .scene-intro { padding-top: 5rem; padding-bottom: 2rem; }
  .home-v2 .scene-intro h2 { font-size: clamp(2.6rem,10.5vw,4rem); }
  .scene-intro-columns, .connection-detail { grid-template-columns: 1fr; gap: 1rem; }
  .scene-intro-columns p:first-child { font-size: 1.15rem; }
  .scene-intro > p:not(.v2-eyebrow), .scene-intro-columns p { font-size: 1rem; }
  .scroll-stage { --scroll-stage-padding: 1.2rem; --scene-cue-space: 2.4rem; }
  .stage-indicator { gap: .5rem; margin-bottom: 1rem; }
  .stage-indicator > span { font-size: .73rem; padding-top: .55rem; }
  .stage-indicator b { display: block; margin: .3rem 0 0; font-size: .65rem; }
  .work-record { padding: 1rem 1.15rem; }
  .work-record > strong { font-size: 1.16rem; margin: .5rem 0 .7rem; }
  .work-record dl div { grid-template-columns: 5rem 1fr; padding: .5rem 0; font-size: .78rem; }
  .connection-board { min-height: 410px; grid-template-rows: auto 65px auto 50px auto auto; }
  .connection-sources { gap: 10%; }
  .connection-source { padding: 1rem .85rem; }
  .connection-source small { font-size: .56rem; line-height: 1.5; letter-spacing: .05em; min-height: 1.7rem; }
  .connection-source p { font-size: .75rem; }
  .connection-layer { width: 90%; padding: 1rem .8rem; }
  .connection-outcome { padding-top: 1rem; gap: .4rem; }
  .connection-outcome small { font-size: .54rem; letter-spacing: .07em; }
  .connection-outcome strong { font-size: .8rem; }
  .connection-caption { margin-top: 1rem; font-size: .75rem; }
  .connection-detail { padding-bottom: 4rem; }
  .connection-detail p { font-size: .95rem; }
  .process-layout { display: block; }
  .process-layout .stage-indicator { flex-direction: row; border-left: 0; border-top: 1px solid #566f78; margin: 0 0 1.2rem; }
  .process-layout .stage-indicator > span { border-left: 0; border-top: 2px solid transparent; margin: -1px 0 0; padding: .55rem .2rem; }
  .process-layout .stage-indicator > span.is-current { border-top-color: #d7ad78; }
  .process-layout .stage-indicator b { font-size: .64rem; }
  .process-card { padding: 1.5rem; }
  .process-card-heading { gap: 1.2rem; padding-bottom: 1rem; }
  .process-card-heading > span { font-size: 3.2rem; }
  .home-v2 .process-card-heading h3 { font-size: .7rem; }
  .process-card h4 { margin: 1.1rem 0 .8rem; font-size: 2rem; }
  .process-card p { font-size: .93rem; margin-bottom: 1rem; }
  .process-delivery strong { font-size: .88rem; }
  .services-layout { grid-template-columns: 1fr; gap: 2rem; }
  .service-example { position: relative; top: auto; }
  .service-rows article { padding: 1.8rem 0; }
  .service-example .work-record { max-width: 100%; }
  .service-example .work-record { display: none; }
  .service-example .handoff-flow-mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
  }
  .handoff-flow-mobile li {
    min-width: 0;
    padding: .8rem .75rem;
    border-top: 1px solid #b18c5d;
    background: linear-gradient(135deg, #24333a, #17272e);
  }
  .handoff-flow-mobile li span { display: block; color: #dfb77f; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
  .handoff-flow-mobile li strong { display: block; margin-top: .35rem; color: #eee9db; font-size: .9rem; font-weight: 450; line-height: 1.35; }
  .page-inner { --wrap: calc(100% - 36px); }
  .page-inner .nav-inner { gap: .65rem; }
  .page-inner .nav-cta { display: inline-flex; margin-left: auto; padding: .48rem .68rem; font-size: .66rem; }
  .page-inner .nav-toggle { margin-left: 0; padding: .38rem .62rem; font-size: .72rem; }
  .page-inner .nav-links a { font-size: .82rem; }
  .page-inner .page-main { padding: 3rem 0 4rem; }
  .page-inner h1 { font-size: clamp(2.4rem,10vw,4rem); }
  .page-inner .intro { font-size: 1rem; }
  .evidence-breadcrumb { margin-bottom: 1.5rem; font-size: .64rem; }
  .evidence-hero { padding-bottom: 1rem; }
  .evidence-hero .proof-label { display: block; margin-right: 0; }
  .evidence-hero .meta-audience { display: block; }
  .page-inner .evidence-section, .evidence-row, .page-training .card { grid-template-columns: 1fr; gap: 1.3rem; padding: 2rem 0; }
  .evidence-section-body p, .evidence-section-body li { font-size: 1rem; }
  .page-inner .story-nav { display: flex; flex-direction: column; align-items: start; }
  .page-inner .view-switch { gap: 1.2rem; }
  .page-inner .view-switch label { font-size: .8rem; }
  .page-inner .doc-main { width: calc(100% - 36px); padding-top: 3rem; }
  .page-privacy .contents { padding: 1.2rem; }
  .map-operations > div { display: grid; grid-template-columns: 1fr; }
  .map-bridge { padding: 1.2rem .8rem; }
}
@media (max-height: 550px) and (min-width: 600px) {
  .scroll-stage { --scroll-stage-padding: .8rem; --scene-cue-space: 2.15rem; }
  .work-record { padding: .8rem 1rem; }
  .work-record > strong { font-size: 1rem; margin: .4rem 0; }
  .work-record dl div { padding: .35rem 0; font-size: .73rem; }
  .stage-indicator { margin-bottom: .6rem; }
  .stage-indicator > span { padding-top: .4rem; }
  .scene-disclosure { margin-top: .5rem; }
  .process-layout { display: grid; grid-template-columns: 110px 1fr; gap: 1.5rem; }
  .process-layout .stage-indicator { flex-direction: column; border-top: 0; margin: 0; }
  .process-layout .stage-indicator > span { padding: .4rem; }
  .process-layout .stage-indicator b { display: inline; margin-left: .4rem; }
  .process-card { padding: 1rem 1.3rem; display: grid; grid-template-columns: .55fr 1fr; gap: .6rem 1.5rem; }
  .process-card-heading { display: block; grid-row: 1/3; padding-bottom: 0; border-bottom: 0; border-right: 1px solid #637d84; }
  .process-card-heading > span { display: block; font-size: 2.6rem; margin-bottom: .8rem; }
  .process-card h4 { font-size: 1.65rem; margin: 0 0 .6rem; }
  .process-card p { font-size: .85rem; line-height: 1.5; margin-bottom: .3rem; }
  .process-delivery { padding-top: .5rem; }
  .process-delivery strong { font-size: .78rem; }
  .connection-board { min-height: 250px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr auto; gap: 1.5rem; align-items: center; }
  .connection-sources { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 1fr; gap: .8rem; }
  .connection-source { padding: .6rem .8rem; }
  .connection-source small { font-size: .5rem; min-height: 0; }
  .home-v2 .connection-source h3 { font-size: 1.5rem; margin: .2rem 0; }
  .connection-source p { font-size: .7rem; }
  .connection-source br { display: none; }
  .connection-layer { grid-column: 2; grid-row: 1; width: 100%; padding: .8rem .6rem; }
  .connection-layer strong { font-size: 1.1rem; }
  .connection-outcome { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: 1fr; gap: .65rem; padding: .8rem 0; border-top: 0; border-left: 1px solid #647e83; }
  .connection-outcome strong { margin-top: .1rem; font-size: .8rem; }
  .connection-caption { grid-column: 1/-1; grid-row: 2; margin: 1rem 0 0; }
}
@media (max-height: 600px) {
  .v2-opening-sticky { min-height: 0; height: 100svh; }
  .v2-opening-grid { padding-top: var(--nav-h); padding-bottom: 1rem; }
  .v2-opening-mark-wrap { width: clamp(100px,25svh,150px); height: clamp(100px,25svh,150px); margin-bottom: .3rem; }
  .v2-opening-name { font-size: clamp(1.8rem,7svh,2.8rem); margin-bottom: .6rem; }
  .v2-opening-copy h1 { font-size: clamp(1rem,3.6svh,1.4rem); }
  .scene-scroll-cue { bottom: calc(.35rem + env(safe-area-inset-bottom, 0px)); }
}
html:not(.motion-ready) .v2-opening { min-height: 100svh; }
html:not(.motion-ready) .v2-opening-sticky { position: relative; height: auto; min-height: 100svh; overflow: visible; }
html:not(.motion-ready) .v2-opening-grid { min-height: 100svh; padding-bottom: 3rem; }
html:not(.motion-ready) .scroll-track { height: auto !important; }
html:not(.motion-ready) .scroll-stage { position: relative; top: auto; height: auto !important; }
html:not(.motion-ready) .stage-panels { display: grid; height: auto !important; gap: 2rem; }
html:not(.motion-ready) [data-stage-panel] { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; }
html:not(.motion-ready) .connection-layer, html:not(.motion-ready) .connection-outcome { opacity: 1 !important; transform: none !important; }
html:not(.motion-ready) .connection-wire { stroke-dashoffset: 0 !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .scene-scroll-cue { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .process-light { transform: none !important; }
}

.motion-ready [data-scroll-track="connection"][data-scene-mode="staged"] .scroll-stage { overflow: clip; }
.motion-ready [data-scroll-track="connection"][data-scene-mode="staged"][data-overflow="true"] .connection-board { align-self: start; }
html:not(.motion-ready) .connection-board { transform: none !important; }
/* Legacy alias must expose the connected collection without JavaScript as well. */
html:not(.js) .wrap:has(#connect:target) .work-connected { display: block; }
html:not(.js) .wrap:has(#connect:target) .work-individual { display: none; }

.page-inner .work-grid { grid-template-columns: 1fr; gap: 0; }

/* Phone scenes follow the document; only the process background responds to scroll.
   Keep this breakpoint identical to flowQuery, including short phone landscape. */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 550px) {
  .scroll-track { isolation: isolate; }
  .scroll-stage { padding: .8rem 0 1.5rem; }
  .v2-process .scroll-stage { overflow: visible; }
  .scroll-track .stage-indicator, .scroll-track .scene-scroll-cue { display: none; }
  .scroll-track .stage-panels { position: relative; display: grid; gap: 1.2rem; height: auto; overflow: visible; }
  .scroll-track [data-stage-panel] { position: relative; inset: auto; height: auto; opacity: 1; pointer-events: auto; }
  .scroll-track[data-scroll-track="process"]::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse at 65% 40%, #526b5626, transparent 62%),
      linear-gradient(#83988c0b 1px, transparent 1px),
      linear-gradient(90deg, #83988c0b 1px, transparent 1px);
    background-size: auto, 64px 64px, 64px 64px;
    background-position: center, 0 var(--flow-depth, 0px), 0 var(--flow-depth, 0px);
  }
  .scroll-track .stage-panels::before, .scroll-track .stage-panels::after {
    content: ""; position: absolute; left: -9px; top: .8rem; bottom: .8rem; width: 1px; pointer-events: none;
    background: #526970;
  }
  .scroll-track .stage-panels::after { background: #d7ad78; transform: scaleY(var(--flow-progress, 1)); transform-origin: top; }
  .process-card.is-current { border-color: #bc946466; }
  .work-record { padding: .9rem; }
  .work-record dl div { grid-template-columns: 4.8rem 1fr; font-size: .8rem; }
  .process-layout { display: block; }
  .process-card { padding: 1.25rem; }
  .process-card h4 { font-size: clamp(1.75rem, 7.5vw, 2rem); }
  .process-card p { font-size: .96rem; line-height: 1.55; }
  .process-delivery strong { font-size: .93rem; }
  .process-light { inset: 0; background-position: center; transform: translateY(var(--flow-depth, 0px)); opacity: .5; }
  .connection-board { min-height: 0; }
  .connection-detail { padding-top: 1.5rem; }
  .scene-disclosure { margin-top: 1rem; }
}
@media (max-width: 599px), (max-width: 760px) and (min-height: 551px) {
  .connection-board { grid-template-rows: auto 42px auto 38px auto auto; }
  .connection-sources { gap: 5%; }
  .connection-source { padding: .85rem .65rem; }
  .home-v2 .connection-source h3 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .connection-layer { padding: .85rem .65rem; }
}
/* JavaScript measures curved wires; the static diagram keeps a simple visible spine. */
html:not(.js) .connection-board::before { content: ""; position: absolute; top: 15%; bottom: 18%; left: 50%; width: 1px; background: #d7ad78; }

/* Branded depth lives behind the narrative. Its own window clips the oversized art;
   neither the mobile track nor its cards clip or counter-translate the content. */
[data-scroll-track="process"] .scroll-stage { isolation: isolate; }
[data-scroll-track="process"] .scroll-stage > .wrap { position: relative; z-index: 2; }
.scene-depth { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.scene-depth-window { position: relative; width: 100%; height: 100%; overflow: clip; }
.scene-depth-window::before {
  content: ""; position: absolute; inset: -220px -180px;
  background: radial-gradient(ellipse at 72% 42%, #c77d3438, transparent 58%);
  transform: translate(var(--depth-x, 0px), var(--depth-y, 0px));
}
.scene-depth svg {
  position: absolute; left: 50%; top: 50%; width: max(900px, 95vw); max-width: none; height: auto; overflow: visible;
  transform: translate(calc(-50% + var(--depth-x, 0px)), calc(-50% + var(--depth-y, 0px)));
  fill: none; stroke: #bf8b52; stroke-width: 1.15; stroke-linejoin: round;
}
.scene-depth-outline { stroke-width: .7; opacity: .48; }
.scene-depth-route { opacity: .5; }
.scene-depth-nodes { fill: #1d292c; stroke: #d6a36b; stroke-width: 1.4; filter: drop-shadow(0 0 5px #db873c66); }
.scene-depth--process .scene-depth-route { stroke-width: 2; opacity: .62; }
[data-scroll-track="process"] .process-light { display: none; }
[data-scroll-track="process"] .process-card {
  background: linear-gradient(140deg, #33403aee, #172e38e6 58%, #162a33ed);
  border-color: #a28d7255; border-top-color: #d8ac7899;
  box-shadow: 0 28px 52px #030c11aa, 0 1px 0 #f6d2a52b inset, 12px 0 38px #d5903710;
}
@media (max-width: 760px), (max-width: 1024px) and (max-height: 550px) {
  .scene-depth-window { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); }
  .scene-depth svg { width: 800px; }
  .scene-depth--process .scene-depth-window::before { background: radial-gradient(ellipse at 70% 40%, #e199414f, transparent 65%); }
  .scroll-track[data-scroll-track="process"]::before { background: none; }
  [data-scroll-track="process"] .stage-panels { padding-left: 14px; padding-right: 6px; gap: 1.5rem; }
  [data-scroll-track="process"] .stage-panels::before, [data-scroll-track="process"] .stage-panels::after { left: 0; }
  [data-scroll-track="process"] .process-card { background: linear-gradient(140deg, #33403aeb, #142b35db 58%, #162a33eb); }
}
html:not(.motion-ready) .scene-depth-window { position: relative; height: 100%; }
html:not(.motion-ready) .scene-depth svg, html:not(.motion-ready) .scene-depth-window::before { transform: translate(-50%, -50%); }
html:not(.motion-ready) .scene-depth-window::before { transform: none; }

[data-scroll-track="process"] .stage-indicator { background: linear-gradient(90deg, #101d24ed, #101d24b3); }

/* The connection title travels with its diagram; context remains ordinary reading. */
.v2-connection { padding-top: clamp(3rem, 6vw, 6rem); }
.connection-scene { width: 100%; }
.connection-intro { padding-top: 0; padding-bottom: 1.3rem; }
.home-v2 .connection-intro h2 { font-size: clamp(2.6rem, 5.7vw, 6rem); max-width: 1000px; margin-bottom: .8rem; text-wrap: balance; }
.connection-intro > p:not(.v2-eyebrow) { max-width: 900px; font-size: 1rem; margin-bottom: 0; }
.connection-board { min-height: 0; grid-template-rows: auto 36px auto 28px auto auto; }
.home-v2 .connection-source h3 { font-size: clamp(1.3rem, 2.3vw, 2.1rem); line-height: 1.13; }
.connection-source { padding: 1rem 1.3rem; }
/* Flow is the default and the fallback, including when desktop content cannot fit. */
[data-scene-mode="flow"] .scene-scroll-cue, [data-scene-mode="flow"] .stage-indicator { display: none; }
.motion-ready [data-scene-mode="staged"] { height: calc(var(--stage-height, 650px) + var(--scroll-travel, 2200px)); }
.motion-ready [data-scene-mode="staged"] .scroll-stage { position: sticky; top: var(--stage-top, var(--nav-h)); height: var(--stage-height, auto); display: grid; align-items: center; padding: var(--scroll-stage-padding) 0 calc(var(--scroll-stage-padding) + var(--scene-cue-space) + env(safe-area-inset-bottom, 0px)); }
.motion-ready [data-scene-mode="staged"] .scroll-stage > .wrap { min-width: 0; }
.motion-ready [data-scene-mode="staged"] .stage-panels { position: relative; height: var(--panels-height, 420px); display: block; overflow: clip; }
.motion-ready [data-scene-mode="staged"] [data-stage-panel] { position: absolute; inset: 0; height: max-content; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.motion-ready [data-scene-mode="staged"] [data-stage-panel].is-current { pointer-events: auto; }
.motion-ready [data-scene-mode="staged"] .scene-scroll-cue { display: block; }
.motion-ready [data-scene-mode="staged"] .stage-indicator { display: flex; }
.motion-ready [data-scene-mode="staged"] .scene-depth-window { position: relative; top: 0; height: 100%; }
.motion-ready [data-scene-mode="staged"] .stage-panels::before, .motion-ready [data-scene-mode="staged"] .stage-panels::after { display: none; }
.motion-ready [data-scroll-track="connection"] .connection-layer,
.motion-ready [data-scroll-track="connection"] .connection-outcome { opacity: 0; }
@media (max-width: 760px), (max-width: 1024px) and (max-height: 550px) {
  .motion-ready [data-scroll-track="connection"][data-scene-mode="flow"] .connection-layer,
  .motion-ready [data-scroll-track="connection"][data-scene-mode="flow"] .connection-outcome { opacity: 1; transform: none; }
  .connection-intro { padding-bottom: 1.1rem; }
  .home-v2 .connection-intro h2 { font-size: clamp(2.6rem, 10.5vw, 4rem); }
  .connection-intro .v2-eyebrow { margin-bottom: .8rem; }
  .connection-intro > p:not(.v2-eyebrow) { font-size: .93rem; line-height: 1.45; }
  .connection-board { grid-template-rows: auto 38px auto 32px auto auto; }
  .connection-source { padding: .75rem .65rem; }
  .home-v2 .connection-source h3 { font-size: clamp(1.1rem, 4.7vw, 1.6rem); }
  .connection-source small { min-height: 0; font-size: clamp(.68rem, 3.3vw, .82rem); line-height: 1.3; letter-spacing: .04em; }
  .connection-layer { padding: .7rem .65rem; }
  .connection-caption { margin-top: 0; padding-top: 30px; }
  .motion-ready [data-scene-mode="staged"] .scroll-stage { --scroll-stage-padding: 1rem; --scene-cue-space: 2.3rem; }
  .motion-ready [data-scene-mode="staged"] .stage-panels { padding: 0; }
  .motion-ready [data-scene-mode="staged"] .process-card { padding: 1.2rem; }
  .motion-ready [data-scene-mode="staged"] .process-card-heading { padding-bottom: .8rem; gap: 1rem; }
  .motion-ready [data-scene-mode="staged"] .process-card-heading > span { font-size: 2.7rem; }
  .motion-ready [data-scene-mode="staged"] .process-card h4 { font-size: 1.7rem; margin: .9rem 0 .65rem; }
  .motion-ready [data-scene-mode="staged"] .process-card p { font-size: .94rem; line-height: 1.5; margin-bottom: .9rem; }
  .motion-ready [data-scene-mode="staged"] .process-layout .stage-indicator { margin: 0 0 1rem; }
}
@media (min-width: 600px) and (max-width: 1024px) and (max-height: 550px) {
  .connection-board { grid-template-rows: 1fr auto; }
}
/* Small evidence connections sit beside the demonstrations, with no scroll staging. */
.evidence-connection { margin-top: 1.8rem; padding: 1.5rem 0; border-top: 1px solid #54656b; }
.evidence-connection > p { max-width: 850px; color: #bfcac5; font-size: .96rem; }
.evidence-connection > p strong { display: block; color: #f0e8d9; font-size: 1.2rem; margin-bottom: .5rem; font-weight: 450; }
.evidence-connection ol, .integration-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.evidence-connection li, .integration-steps li { border-left: 1px solid #b18c5d; padding-left: 1rem; }
.evidence-connection li strong, .integration-steps strong { display: block; color: #eee9db; font-size: .95rem; font-weight: 500; }
.evidence-connection li span, .integration-steps span { display: block; color: #dfb77f; font-size: .82rem; margin: .4rem 0; }
.evidence-connection li small { color: #bfcac5; display: block; font-size: .8rem; line-height: 1.5; }
@media (max-width: 760px) { .evidence-connection ol, .integration-steps { grid-template-columns: 1fr; gap: 1.2rem; } }

.home-v2 .evidence-connection > p, .home-v2 .evidence-connection li small { color: #4f5c58; }
.home-v2 .evidence-connection > p strong, .home-v2 .evidence-connection li strong { color: #1c292c; }
.home-v2 .evidence-connection li span { color: #76512d; }

/* Laptop-height scenes spend space on the prominent title, then tighten diagram air. */
@media (min-width: 1025px) and (max-height: 820px) {
  [data-scroll-track="connection"] .scroll-stage { --scroll-stage-padding: .65rem; --scene-cue-space: 2.3rem; }
  .connection-intro { padding-bottom: .7rem; }
  .connection-intro .v2-eyebrow { margin-bottom: .7rem; }
  .home-v2 .connection-intro h2 { margin-bottom: .5rem; }
  .connection-board { grid-template-rows: auto 20px auto 16px auto auto; }
  .connection-source { padding: .6rem 1.3rem; }
  .connection-layer { padding: .6rem 1.3rem; }
  .connection-outcome { padding-top: .6rem; }
  .connection-caption { margin-top: 1.1rem; }
}

@media (min-width: 761px) {
  .connection-caption { margin: 0; padding-top: 32px; }
}

/* The offer opens with a concise introduction, then gives the connected layer room to read. */
.v2-problem .v2-problem-grid { display: grid; grid-template-columns: 1fr; gap: clamp(3.5rem, 6vw, 5.5rem); align-items: start; }
.v2-problem .offer-intro { display: block; }
.v2-problem .offer-intro .v2-eyebrow { margin-bottom: .25rem; }
.v2-problem .offer-intro h2 { font-size: clamp(3.4rem, 6.4vw, 6.5rem); line-height: 1.02; margin-bottom: 1rem; }
.offer-intro > p:last-child { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.6; max-width: 760px; margin: 0; }
.offer-visual { position: relative; width: min(1180px, 100%); margin: 0 auto; overflow: hidden; background: #0b0c0d; box-shadow: 0 34px 72px #30281e38, 0 1px 0 #fff2 inset; }
.offer-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px #9b805329, inset 0 -28px 54px #0003; }
.offer-visual img { display: block; width: 100%; height: auto; }
.offer-visual figcaption { position: absolute; inset: 0; pointer-events: none; }
.offer-label { position: absolute; z-index: 1; display: block; transform: translate(-50%, -50%); padding: .38em .72em .42em; border: 1px solid #d8a65f66; border-radius: 2px; background: linear-gradient(110deg, #171513f2, #0b0c0def); box-shadow: 0 4px 12px #0009, inset 0 1px #fff1; color: #e8bd7d; font-size: clamp(.67rem, .86vw, .84rem); line-height: 1.12; letter-spacing: .035em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.offer-label--layer { left: 50%; top: 31.6%; min-width: 10.5rem; font-size: clamp(.74rem, 1vw, .96rem); }
.offer-label--accounts { left: 21.6%; top: 79.6%; }
.offer-label--sheets { left: 50%; top: 79.6%; }
.offer-label--industry { left: 78.2%; top: 79.6%; width: clamp(9rem, 14vw, 13rem); max-width: 13rem; white-space: normal; background: #171513; }
.offer-image { position: relative; }
.offer-raster-mask { display: none; }
@media (min-width: 761px) {
  .offer-label--layer { top: 32.3%; width: clamp(12rem, 24vw, 20rem); min-width: 0; background: #171513; }
  .offer-label--accounts { max-width: 13rem; }
  .offer-label--sheets { max-width: 12rem; }
  .offer-label--industry { border-bottom-color: transparent; }
  .offer-label--industry::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: -1px;
    right: -1px;
    height: 1.5em;
    border: 1px solid #d8a65f66;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    background: #171513;
  }
}
@media (max-width: 760px), (max-width: 1024px) and (max-height: 550px) {
  .v2-problem .v2-problem-grid { gap: 2.3rem; }
  .v2-problem .offer-intro { display: block; }
  .v2-problem .offer-intro .v2-eyebrow { margin-bottom: 1.7rem; }
  .v2-problem .offer-intro h2 { font-size: clamp(2.5rem, 10.5vw, 4rem); }
  .offer-intro > p:last-child { margin-top: 1.5rem; }
}
@media (max-width: 760px) {
  .offer-visual { width: calc(100% + 28px); margin-left: -14px; margin-right: -14px; }
  .offer-label { padding: .32em .5em .36em; font-size: clamp(.65rem, 2.75vw, .74rem); letter-spacing: .025em; }
  .offer-label--layer { min-width: 7.8rem; font-size: clamp(.7rem, 3vw, .82rem); }
  .offer-label--accounts { left: 19%; max-width: 9.5rem; white-space: normal; }
  .offer-label--sheets { left: 50%; max-width: 7.2rem; }
  .offer-label--industry { left: 81%; top: 82%; max-width: 7.2rem; }
}
@media (max-width: 520px) {
  .offer-label { padding: .28em .28em .32em; font-size: .64rem; letter-spacing: .025em; }
  .offer-label--accounts { left: 20%; max-width: 8rem; white-space: normal; }
  .offer-label--sheets { left: 53.3%; max-width: 6rem; }
  .offer-label--industry { left: 81.4%; top: 82%; max-width: 5.8rem; }
}
@media (max-width: 340px) {
  .offer-label--accounts { left: 19%; max-width: 5.2rem; white-space: normal; }
  .offer-label--sheets { left: 47.5%; max-width: 5.8rem; }
  .offer-label--industry { left: 78%; max-width: 5.5rem; }
}
@media (max-width: 760px) {
  .offer-image { width: 100%; aspect-ratio: 1672 / 800; overflow: hidden; }
  .offer-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .offer-label--layer { top: 36.7%; z-index: 3; }
  .offer-raster-mask {
    display: block;
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    background: #110f0c;
    border-radius: 1px;
    box-shadow: 0 0 5px #000;
  }
  .offer-raster-mask--accounts { left: 21.6%; top: 94.7%; width: 15%; height: 3%; }
  .offer-raster-mask--sheets { left: 50%; top: 94.7%; width: 15%; height: 3%; }
  .offer-raster-mask--industry { left: 78.2%; top: 94.9%; width: 21%; height: 4.5%; }
  .offer-visual figcaption {
    position: relative;
    inset: auto;
    display: block;
    height: 88px;
    box-sizing: border-box;
    border-top: 0;
    background-color: #0b0c0d;
    background-image: linear-gradient(180deg, #0b0c0d1c, #0b0c0d70), url("../img/home/bespoke-connected-layer.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%, 140% auto;
    background-position: center, center calc(100% + 11.8vw - 88px);
  }
  .offer-visual figcaption .offer-label {
    position: absolute;
    top: 39px;
    z-index: 1;
    width: 25%;
    max-width: 7.5rem;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #e8bd7d;
    font-size: clamp(.68rem, 3.3vw, .8rem);
    line-height: 1.18;
    letter-spacing: .035em;
    text-align: center;
    white-space: normal;
  }
  .offer-visual figcaption .offer-label::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -40px;
    width: 1px;
    height: 36px;
    transform: translateX(-50%);
    background: #d7ad78;
  }
  .offer-visual figcaption .offer-label--accounts { left: 21.6%; }
  .offer-visual figcaption .offer-label--sheets { left: 50%; }
  .offer-visual figcaption .offer-label--industry { left: 76.6%; }
}
@media (max-width: 340px) {
  .offer-visual figcaption .offer-label { width: 22.5%; }
  .offer-visual figcaption .offer-label--sheets { font-size: .6rem; letter-spacing: .01em; }
}