

.act { position: relative; }
.stage { display: grid; padding-top: var(--bar-h); }
html.sc-ready .act--ind, html.sc-ready .act--six, html.sc-ready .act--same { padding-block: 0; }
.on-g2 { --ground: var(--g2); --surface: var(--g3); --plate: #1F2927; background: var(--ground); color: var(--fg); }

@media (prefers-reduced-motion: no-preference) {
  html.sc-pre:not(.sc-ready):not(.sc-fail) .act--ind { height: 630vh; }
  html.sc-pre.six-stack:not(.sc-ready):not(.sc-fail) .act--six { height: 540vh; }
  html.sc-pre:not(.sc-ready):not(.sc-fail) .act--same { height: 130vh; }
  html.sc-pre:not(.sc-fail) :is([data-sc-act="pin"], [data-sc-act="pan"]) > [data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.sc-pre-r:not(.sc-ready):not(.sc-fail) .act--same { height: 130vh; }
  html.sc-pre-r:not(.sc-fail) .act--same > [data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: 1; }
}
html.sc-fail [data-sc-cue], html.sc-fail [data-sc-in], html.sc-fail [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
html.sc-fail .rail { flex-wrap: wrap; width: auto; }
html.sc-fail :is(.readline, .readwash) { display: none; }

.act--ind .stage { background: var(--g1); grid-template-rows: 1fr auto; align-content: stretch; --line-x: 50vw;
  
  grid-template-columns: minmax(0, 1fr); }
.rail {
  display: flex; align-items: flex-start; gap: clamp(1.5rem, 3.4vw, 3.5rem);
  width: max-content; padding: clamp(1rem, 4svh, 2.5rem) calc(var(--gutter) * 2) var(--s4) var(--gutter);
  align-self: center;
}
.rail__lead { width: clamp(17.5rem, 40vw, 38rem); display: grid; gap: var(--s5); align-self: center; }
.svc-h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.9rem); line-height: 1.02; max-width: 17ch; }
.rail__lead .lede { max-width: 40ch; }

.ind { width: clamp(16.5rem, 34vw, 33rem); display: grid; gap: var(--s2); }
.ind__fig { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--g2); box-shadow: var(--e2), var(--edge); }

.ind__fig { transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.ind__fig img { width: 100%; height: auto; display: block; filter: saturate(0.74); transition: filter 520ms var(--ease); }
.ind__fig::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hair-strong); transition: box-shadow 360ms var(--ease); pointer-events: none; }
.ind.is-read .ind__fig { transform: translateY(-3px); box-shadow: var(--e3), var(--edge); }
.ind.is-read .ind__fig img { filter: none; }
.ind.is-read .ind__fig::after { box-shadow: inset 0 0 0 1.5px var(--teal); }
.ind__name { margin-top: var(--s3); font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); line-height: 1.08; letter-spacing: var(--track-snug); }
.ind__job { font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.28; color: var(--ink-soft); transition: color 360ms var(--ease); text-wrap: balance; }
.ind__lands { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-soft); }
.ind__lands .ro { white-space: normal; color: var(--ink-soft); transition: color 360ms var(--ease); }
.ind.is-read .ind__job { color: var(--ink); }
.ind.is-read .ind__lands .ro { color: var(--teal); }
.rail__note { width: clamp(15rem, 26vw, 24rem); display: grid; gap: var(--s3); align-self: center; }

.readline {
  position: absolute; left: var(--line-x); width: 1px; top: var(--rl-top, 30%); height: var(--rl-h, 30%);
  background: var(--teal); box-shadow: 0 0 14px 1px var(--teal-hair);
  opacity: var(--lo, 0); transition: opacity 240ms var(--ease); pointer-events: none; z-index: 3;
}

.readwash, .readwash::before {
  --e: clamp(0, calc((var(--sc-p, 0) - 0.9) / 0.1), 1);
  --R: calc(var(--e) * var(--e) * (110vw + 120vh));
  --cy: calc(var(--rl-top, 30%) + var(--rl-h, 30%) / 2);
}
.readwash { position: absolute; inset: 0 0 -4px 0; z-index: 6; pointer-events: none; background: var(--teal); opacity: min(1, calc(var(--e) * 40));
  clip-path: polygon(calc(var(--line-x) - var(--R) - 3px) var(--cy), var(--line-x) calc(var(--cy) - var(--R) * 0.546 - 3px), calc(var(--line-x) + var(--R) + 3px) var(--cy), var(--line-x) calc(var(--cy) + var(--R) * 0.546 + 3px));
}
.readwash::before { content: ""; position: absolute; inset: 0; background: var(--g0);
  clip-path: polygon(calc(var(--line-x) - var(--R)) var(--cy), var(--line-x) calc(var(--cy) - var(--R) * 0.546), calc(var(--line-x) + var(--R)) var(--cy), var(--line-x) calc(var(--cy) + var(--R) * 0.546));
}

.ind-index { display: flex; align-items: center; gap: var(--s3) var(--s5); padding: 0 calc(var(--gutter) + 3.5rem) clamp(0.75rem, 3svh, 1.75rem) var(--gutter); position: relative; z-index: 5; }
@media (min-width: 861px) { .ind-index { padding-right: calc(var(--gutter) + 4rem); } }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ind-index__all { flex: none; font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); white-space: nowrap; }
.chip {
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); letter-spacing: 0.01em;
  min-height: 2.5rem; padding: 0.45em 0.95em; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--g2) 80%, transparent); color: var(--ink-soft); border: 1px solid var(--hair);
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .chip:hover { color: var(--ink); border-color: var(--teal-hair); } }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { color: var(--teal-ink); background: var(--teal); border-color: var(--teal); }
.chip:focus-visible { outline-offset: 2px; }

@media (min-width: 861px) { .act--ind .stage { --line-x: 52vw; } }
@media (max-width: 860px) {
  .rail { padding-top: var(--s3); gap: var(--s5); }
  .rail__lead { width: min(82vw, 21rem); }
  .ind { width: min(80vw, 20rem); }
  .ind__name { font-size: var(--t-lg); }
  .ind__job { font-size: var(--t-base); }
  .ind-index { gap: var(--s3); padding-bottom: var(--s3); }
  
  .chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: var(--s4); padding: 6px; margin: -6px 0 -6px -6px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
@media (max-height: 700px) { .ind__lands { font-size: var(--t-xs); } .rail__lead { gap: var(--s3); } .svc-h1 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); } }

.act--five { padding-block: calc(var(--band) * 0.9) calc(var(--band) + 14vh); }
.five { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s7); align-items: start; position: relative; z-index: 2; }
.five__h2 { max-width: 12ch; }
.five__rows { position: relative; }
.rows { position: relative; z-index: 1; }
.rows li {
  display: grid; grid-template-columns: 1fr; row-gap: 0.1rem; padding: clamp(0.7rem, 1.8svh, 1.05rem) 0; border-top: 1px solid var(--hair);
  --lit: 1;
}
.rows li:last-child { border-bottom: 1px solid var(--hair); }
.rows__t { font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.2; letter-spacing: var(--track-snug); color: color-mix(in oklab, var(--ink) calc(var(--lit) * 100%), var(--ink-soft)); }
.rows li p { color: var(--ink-soft); max-width: 48ch; }
.rows__t::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.6em; vertical-align: 0.08em; border: 1.5px solid color-mix(in oklab, var(--teal) calc(var(--lit) * 100%), var(--ink-soft)); transform: rotate(45deg) scaleY(0.75); }
.scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; pointer-events: none; border-top: 1px solid var(--teal);
  transform: translateY(var(--scan-y, 0px)); opacity: var(--scan-o, 0); transition: opacity 200ms var(--ease), transform 280ms var(--ease);
}
.scanline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 10px; background: linear-gradient(transparent, var(--teal-dim)); }
.five__foot { margin-top: var(--s4); font-family: var(--f-display); font-weight: 500; color: var(--ink); }
.beyond { margin-top: clamp(3.5rem, 8vw, 6.5rem); position: relative; z-index: 2; }
.beyond .h2 { max-width: 20ch; margin-bottom: var(--s6); }
.beyond-list { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); max-width: 62rem; }
.beyond-list .ro { white-space: normal; font-size: var(--t-base); }
.beyond .body { margin-top: var(--s5); }
.swell { position: absolute; left: 0; right: 0; bottom: 0; height: 16vh; pointer-events: none; }
.act--five .swell { --c: clamp(0, calc((var(--sc-p, 0) - 0.56) * 4), 1); clip-path: ellipse(calc(55% + var(--c) * 65%) calc(var(--c) * 100%) at 50% 100%); }
.swell--g0 { background: var(--g0); }
@media (max-width: 860px) {
  .five { grid-template-columns: 1fr; gap: var(--s4); }
  .rows__t { font-size: var(--t-base); }
  .rows li p { font-size: var(--t-sm); }
}
@media (max-width: 760px) { .beyond-list .ro { font-size: var(--t-sm); } }

.act--same .stage { background: var(--g0); grid-template-rows: 1fr auto; align-content: stretch; }
.same__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s7); align-items: center; padding-block: var(--s6); }
.fold { display: grid; place-items: center; }
.fold__svg { width: min(100%, 30rem); height: auto; overflow: visible; }
.fold { --f: clamp(0, calc((var(--sc-p, 1) - 0.02) / 0.55), 1); }

.fold__svg { transform: scale(calc(1 + var(--f) * 0.9)); transform-origin: 50% 45%; }
.fp {
  transform: translate(calc((1 - var(--f)) * var(--dx) * 1px), calc((1 - var(--f)) * var(--dy) * 1px));
  opacity: var(--o);
}
.fp:not(.fp--mark) { opacity: calc(var(--o) * (1 - var(--f))); }
.same__copy { display: grid; gap: var(--s5); }
.same__copy .h2 { max-width: 14ch; }
.same__cta .btn { min-width: min(100%, 15rem); min-height: 3.1rem; }
.foot--stage { border-top: 1px solid var(--hair); padding-block: var(--s5); }
.foot--stage .foot__line { margin-top: var(--s4); padding-top: var(--s3); }
@media (max-height: 880px), (max-width: 860px) {
  .foot--stage .foot__grid { display: none; }
  .foot--stage { padding-block: var(--s3); }
  .foot--stage .foot__line { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (min-width: 861px) {
  html.sc-flat .foot--stage { padding-block: var(--s5); }
  html.sc-flat .foot--stage .foot__grid { display: grid; }
  html.sc-flat .foot--stage .foot__line { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--hair); }
}
@media (max-width: 860px) {
  .same__grid { grid-template-columns: 1fr; gap: var(--s4); padding-block: var(--s4); }
  .fold__svg { width: min(100%, 20rem); }
  .same__cta .btn { width: 100%; }
}
@media (max-width: 860px) and (max-height: 700px) { .fold { display: none; } }

[data-sc-cue]:focus-within,
[data-sc-act]:focus-within [data-sc-cue] { opacity: 1 !important; transform: none !important; }
[data-sc-act]:focus-within .sc-split__i { opacity: 1 !important; transform: none !important; }
