/* One viewport equals one story scene. */
.scene{
  height:100svh;
  min-height:100svh;
  max-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
}

@media (min-width:851px){
  .scene{padding-top:clamp(84px,12vh,108px);padding-bottom:clamp(28px,5vh,50px)}
  .scene h2{font-size:clamp(38px,min(5.7vw,8.5vh),82px);line-height:1.02}
  .scene .kicker{margin-bottom:clamp(10px,2.6vh,24px)}
  .scene .lede{font-size:clamp(16px,min(1.65vw,2.8vh),25px);margin-top:clamp(12px,2.6vh,26px)}
  .scene .visual{margin-top:clamp(18px,4vh,40px);min-height:0}
  .scene .steps{margin-top:clamp(20px,4.5vh,46px)}
  .scene .steps article{padding-top:clamp(12px,2vh,19px)}
  .scene .triptych article{min-height:clamp(138px,26vh,210px);padding-top:clamp(13px,2.8vh,25px)}
  .scene .flow,.scene .case-grid,.scene .two-worlds,.scene .deploy-run{margin-top:clamp(18px,4vh,40px)}
  .scene .case-grid article{padding:clamp(13px,2.3vh,21px)}
  .scene .deploy-run{padding:clamp(15px,2.8vh,24px)}
  .scene .run-track,.scene .run-log{margin-top:clamp(16px,3vh,30px)}
  .scene .run-log{padding:clamp(13px,2.3vh,20px);line-height:1.55}
}

@media (min-width:851px) and (max-height:760px){
  .scene{padding-top:80px;padding-bottom:22px}
  .scene h2{font-size:clamp(34px,7vh,56px)}
  .scene .kicker{margin-bottom:10px}
  .scene .lede{font-size:15px;margin-top:12px}
  .scene .visual,.scene .steps,.scene .flow,.scene .case-grid,.scene .two-worlds,.scene .deploy-run{margin-top:18px}
  .scene .steps{gap:20px}
  .scene .steps b{font-size:28px}
  .scene .triptych article{min-height:130px}
}

@media (min-width:851px) and (max-height:650px){
  .scene h2{font-size:clamp(31px,6.6vh,46px)}
  .scene .flow span{padding:12px 10px}
  .scene .case-grid article{padding:11px}
  .scene .run-log{font-size:10px}
}

@media (max-width:850px){
  .scene{height:100svh;min-height:100svh;max-height:100svh}
}

/*
 * Global three-zone rhythm:
 * the content begins in a consistent upper zone and flows downward;
 * any remaining room is left cleanly beneath it.
 */
.scene{
  justify-content:flex-start !important;
  align-items:flex-start;
}

.scene > :not(.cta){
  width:100%;
}

.scene h1{
  margin:0 auto;
}

@media (min-width:851px){
  .scene{
    padding-top:clamp(138px,19vh,178px);
  }
}

/* Slide 07: operational responsibility flow on the dark field. */
.business-flow{
  width:100%;
  min-height:150px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:start;
  position:relative;
  padding-top:24px;
}

.business-flow::before{
  content:"";
  position:absolute;
  top:42px;
  left:10%;
  right:10%;
  height:1px;
  background:#9ebcff;
  opacity:.65;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.15s .35s cubic-bezier(.22,1,.36,1);
}

.scene.in .business-flow::before{
  transform:scaleX(1);
}

.business-flow article{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#d6e2fa;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s calc(.48s + var(--i)*.1s),transform .65s calc(.48s + var(--i)*.1s) cubic-bezier(.22,1,.36,1);
}

.scene.in .business-flow article{
  opacity:1;
  transform:none;
}

.business-flow article > span{
  width:38px;
  height:38px;
  border:1px solid #9ebcff;
  border-radius:50%;
  background:var(--blue);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 7px rgba(158,188,255,.09);
}

.business-flow article i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c8d8f5;
}

.business-flow article b{
  margin-top:20px;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  font-weight:600;
}

/* Slide 02: the hub floats above its connector instead of being bisected. */
#s02 .hub-lines{
  top:82px;
}

#s02.in .hub{
  animation:sharedHubFloat 4.8s 1.3s ease-in-out infinite;
}

@keyframes sharedHubFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -6px}
}

@media (max-width:850px){
  #s02 .hub-lines{top:63px}
  .business-flow{min-height:124px;padding-top:18px}
  .business-flow::before{top:35px}
  .business-flow article > span{width:34px;height:34px}
  .business-flow article b{font-size:8px;letter-spacing:.08em;margin-top:16px}
}

@media (max-width:620px){
  #s02 .hub-lines{top:76px}
  .business-flow article b{font-size:7px;letter-spacing:.04em}
}

@media (prefers-reduced-motion:reduce){
  #s02.in .hub{animation:none}
  .business-flow::before,.business-flow article{opacity:1;transform:none;transition:none}
}

/* Light-background variants for the responsibility and closing flows. */
.node-flow{grid-template-columns:repeat(var(--nodes),1fr)}
.light-node-flow::before{background:#9fb4da}
.light-node-flow article{color:var(--blue)}
.light-node-flow article > span{background:var(--paper);border-color:#8ea8d4;box-shadow:0 0 0 7px rgba(8,47,127,.06)}
.light-node-flow article i{background:var(--blue)}
.centered-node-flow{max-width:980px;margin-inline:auto}

/* Converging system and evaluation clusters. */
.cluster-visual{
  --cluster-line:#8facde;
  width:100%;
  min-height:230px;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:1fr 54px 1fr;
  column-gap:20px;
  position:relative;
  align-items:center;
}

.cluster-visual::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:50%;
  height:1px;
  background:var(--cluster-line);
  opacity:.58;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 1.1s .35s cubic-bezier(.22,1,.36,1);
}

.scene.in .cluster-visual::before{transform:scaleX(1)}

.cluster-visual article{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  align-self:stretch;
  color:#d6e2fa;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s calc(.45s + var(--i)*.06s),transform .6s calc(.45s + var(--i)*.06s) cubic-bezier(.22,1,.36,1);
}

.scene.in .cluster-visual article{opacity:1;transform:none}
.cluster-top{grid-row:1;justify-content:flex-start}
.cluster-bottom{grid-row:3;justify-content:flex-end;flex-direction:column-reverse!important}

.cluster-visual article::after{
  content:"";
  position:absolute;
  left:50%;
  width:1px;
  background:var(--cluster-line);
  opacity:.55;
  z-index:-1;
}

.cluster-top::after{top:18px;bottom:-45px}
.cluster-bottom::after{top:-45px;bottom:18px}

.cluster-visual article > span{
  width:30px;
  height:30px;
  border:1px solid #9ebcff;
  border-radius:50%;
  background:var(--blue);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 6px rgba(158,188,255,.08);
}

.cluster-visual article span i{width:7px;height:7px;border-radius:50%;background:#d6e2fa}

.cluster-visual article > b{
  margin:12px 6px;
  font-size:9px;
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  font-weight:600;
}

.cluster-hub{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  translate:-50% -50%;
  width:92px;
  height:54px;
  border:1px solid #9ebcff;
  background:var(--blue);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 8px var(--blue),0 0 0 9px rgba(158,188,255,.32);
  color:#fff;
}

.cluster-hub i{position:absolute;width:7px;height:7px;border-radius:50%;background:#d6e2fa;top:8px}
.cluster-hub b{padding-top:11px;font-size:8px;line-height:1.25;letter-spacing:.12em;text-align:center}

@media (max-width:850px){
  .cluster-visual{min-height:190px;column-gap:7px}
  .cluster-visual article > b{font-size:7px;letter-spacing:.04em;margin-inline:2px}
  .cluster-visual article > span{width:25px;height:25px}
  .cluster-hub{width:76px;height:46px}
}

@media (prefers-reduced-motion:reduce){
  .cluster-visual::before,.cluster-visual article{opacity:1;transform:none;transition:none}
}

/* Align the three triptych dividers independently of column content height. */
.triptych{align-items:stretch}
.triptych article{border-top:0;position:relative;height:100%}
.triptych article::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:currentColor;
  opacity:.75;
}
.triptych .arrow{align-self:center}

/* Icon-led headers for every numbered four-column stage layout. */
.steps.has-step-icons article{
  border-top:0;
  position:relative;
  padding-top:66px;
}
.steps.has-step-icons article::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:48px;
  height:1px;
  background:var(--line);
}
.blue .steps.has-step-icons article::after{background:#46669f}
.step-icon{
  position:absolute;
  left:0;
  top:0;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--blue);
  font-size:15px;
  line-height:1;
}
.blue .step-icon{border-color:#6f8dc4;color:#c8d8f5}

/* Give node flows the same visual authority as the larger deck diagrams. */
.node-flow{
  min-height:220px;
  padding-top:54px;
  align-content:start;
}
.node-flow::before{top:81px;height:2px}
.node-flow article > span{
  width:56px;
  height:56px;
  box-shadow:0 0 0 10px rgba(158,188,255,.09);
}
.node-flow article i{width:11px;height:11px}
.node-flow article b{
  margin-top:28px;
  font-size:12px;
  letter-spacing:.15em;
}
.light-node-flow article > span{box-shadow:0 0 0 10px rgba(8,47,127,.06)}

/* Long process strips become balanced, readable two-row diagrams. */
.flow.two-row-flow{
  display:grid;
  grid-template-columns:repeat(var(--flow-cols),minmax(0,1fr));
  gap:18px 26px;
  width:100%;
}
.flow.two-row-flow span{
  min-height:88px;
  padding:20px 24px;
  display:grid;
  place-items:center;
  position:relative;
  font-size:13px;
  line-height:1.35;
}
.flow.two-row-flow span:not(.row-end)::after{
  content:"→";
  position:absolute;
  right:-21px;
  top:50%;
  translate:0 -50%;
  color:var(--muted);
  font-size:16px;
}
.blue .flow.two-row-flow span:not(.row-end)::after{color:#9ebcff}

@media (max-width:850px){
  .steps.has-step-icons article{padding-top:54px}
  .steps.has-step-icons article::after{top:39px}
  .step-icon{width:29px;height:29px;font-size:13px}
  .node-flow{min-height:170px;padding-top:36px}
  .node-flow::before{top:58px;height:1px}
  .node-flow article > span{width:44px;height:44px}
  .node-flow article b{font-size:9px;margin-top:20px;letter-spacing:.08em}
  .flow.two-row-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
  .flow.two-row-flow span{min-height:66px;padding:14px 10px;font-size:11px}
  .flow.two-row-flow span:nth-child(2n)::after{display:none}
}

/* Professional CSS-drawn stage icons with stronger visual presence. */
.step-icon{
  width:52px;
  height:42px;
  border:0;
  color:var(--blue);
}
.blue .step-icon{border:0;color:#c8d8f5}
.step-icon i,.step-icon i::before,.step-icon i::after{position:absolute;content:"";display:block;box-sizing:border-box}
.step-icon i{left:50%;top:50%;translate:-50% -50%;color:inherit}
.icon-tool i{width:24px;height:24px;border:1.5px solid currentColor;rotate:45deg}
.icon-tool i::before{width:5px;height:5px;border-radius:50%;background:currentColor;left:8px;top:8px}
.icon-platform i{width:30px;height:24px;border:1.5px solid currentColor;background:linear-gradient(90deg,transparent 47%,currentColor 48%,currentColor 52%,transparent 53%),linear-gradient(transparent 47%,currentColor 48%,currentColor 52%,transparent 53%)}
.icon-demo i{width:31px;height:23px;border:1.5px solid currentColor}
.icon-demo i::before{left:0;right:0;top:5px;height:1px;background:currentColor}
.icon-demo i::after{width:3px;height:3px;border-radius:50%;background:currentColor;left:3px;top:1px}
.icon-reality i{width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%}
.icon-reality i::before{width:34px;height:14px;border:1px solid currentColor;border-radius:50%;left:-4px;top:6px}
.icon-audit i{width:23px;height:23px;border:1.5px solid currentColor;border-radius:50%;left:43%;top:43%}
.icon-audit i::after{width:12px;height:1.5px;background:currentColor;rotate:45deg;right:-9px;bottom:-5px}
.icon-build i{width:29px;height:19px;border:1.5px solid currentColor}
.icon-build i::before{width:29px;height:19px;border:1px solid currentColor;left:4px;top:4px}
.icon-evaluate i,.icon-validate i{width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%}
.icon-evaluate i::after,.icon-validate i::after{width:13px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:-45deg;left:7px;top:7px}
.icon-deploy i{width:1.5px;height:29px;background:currentColor}
.icon-deploy i::before{width:12px;height:12px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;rotate:45deg;left:-5px;top:0}
.icon-deploy i::after{width:20px;height:1.5px;background:currentColor;left:-9px;bottom:0}
.icon-integrate i{width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;left:40%}
.icon-integrate i::before{width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;left:11px;top:0}
.icon-approve i{width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;box-shadow:inset 0 0 0 5px transparent,0 0 0 4px color-mix(in srgb,currentColor 20%,transparent)}
.icon-approve i::before{width:7px;height:7px;border-radius:50%;background:currentColor;left:9px;top:9px}
.icon-operate i{width:auto;height:auto;border:0;border-radius:0;font-style:normal;font-family:"Segoe UI Symbol",sans-serif;font-size:32px;line-height:1}
.icon-operate i::before{content:"⚙";position:static;width:auto;height:auto}
.icon-operate i::after{display:none}

/* Standalone closing takeaway for the four-stage deployment process. */
#s22 .slide-middle{justify-content:flex-start}
#s22 .deployment-closing{
  width:100%;
  max-width:920px;
  margin-top:auto;
  padding-top:clamp(28px,6vh,58px);
  padding-bottom:clamp(8px,2vh,18px);
  border-top:1px solid rgba(158,188,255,.34);
  font-size:clamp(20px,min(2.2vw,3.4vh),30px);
  font-weight:500;
  line-height:1.4;
  opacity:.96;
}

/* Compact, interactive Audit tabs and shared description panel. */
#s13 .audit-tabs{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.6vw,20px);
  margin-top:clamp(28px,4.5vh,44px);
  padding-block:20px;
}
#s13 .audit-tab{
  min-height:88px;
  padding:12px 16px;
  border:1px solid rgba(0,0,0,.2);
  border-radius:6px;
  background:transparent;
  color:rgba(0,0,0,.6);
  opacity:.7;
  cursor:pointer;
  font:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:border-color .3s ease,background-color .3s ease,color .3s ease,opacity .3s ease,box-shadow .3s ease,transform .3s ease;
}
#s13 .audit-tab:hover:not(.is-active){border-color:rgba(0,0,0,.4);background:rgba(0,0,0,.02);opacity:.85}
#s13 .audit-tab:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#s13 .audit-tab.is-active{
  border-color:rgba(0,0,0,.8);
  background:rgba(0,0,0,.04);
  color:rgba(0,0,0,.9);
  opacity:1;
  box-shadow:0 0 0 2px rgba(0,0,0,.08);
}
#s13 .audit-card-icon{
  width:24px;
  height:24px;
  display:block;
  position:relative;
  margin:0 auto 6px;
  color:rgba(0,0,0,.4);
  transform:scale(.75);
  transform-origin:center;
  transition:color .3s ease,opacity .3s ease;
}
#s13 .audit-tab.is-active .audit-card-icon{color:rgba(0,0,0,.9)}
#s13 .audit-card-icon i,
#s13 .audit-card-icon i::before,
#s13 .audit-card-icon i::after{content:"";display:block;position:absolute;box-sizing:border-box;color:inherit}
#s13 .audit-icon-people i{width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;left:10.5px;top:1px}
#s13 .audit-icon-people i::before{width:24px;height:13px;border:1.5px solid currentColor;border-bottom:0;border-radius:14px 14px 0 0;left:-7.5px;top:16px}
#s13 .audit-icon-systems i{position:static;font-style:normal;font-family:"Segoe UI Symbol",sans-serif;font-size:31px;line-height:32px}
#s13 .audit-icon-systems i::before{content:"⚙";position:static;width:auto;height:auto}
#s13 .audit-icon-rules i{width:24px;height:30px;border:1.5px solid currentColor;border-radius:2px;left:4px;top:1px}
#s13 .audit-icon-rules i::before{width:5px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);left:4px;top:7px}
#s13 .audit-icon-rules i::after{width:8px;height:1.5px;background:currentColor;right:3px;top:13px;box-shadow:0 6px 0 currentColor}
#s13 .audit-icon-exceptions i{width:1.5px;height:30px;background:currentColor;left:7px;top:1px}
#s13 .audit-icon-exceptions i::before{width:19px;height:13px;background:currentColor;left:1.5px;top:2px;clip-path:polygon(0 0,100% 0,76% 50%,100% 100%,0 100%)}
#s13 .audit-icon-exceptions i::after{width:9px;height:1.5px;background:currentColor;left:-4px;bottom:0}
#s13 .audit-tab-label{font-size:11px;font-weight:600;letter-spacing:.5px;line-height:1.2;text-transform:uppercase}
#s13 .audit-description{
  width:100%;
  min-height:92px;
  margin-top:clamp(28px,4vh,40px);
  padding:24px;
  border-top:1px solid rgba(0,0,0,.1);
  background:rgba(0,0,0,.02);
  display:flex;
  align-items:center;
  transition:opacity .15s ease,transform .15s ease;
}
#s13 .audit-description.is-changing{opacity:0;transform:translateY(8px)}
#s13 .audit-description p{margin:0;font-size:16px;font-weight:400;line-height:1.6;color:rgba(0,0,0,.8)}

@media (max-width:768px){
  #s13 .audit-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-block:12px}
  #s13 .audit-tab{min-height:72px}
  #s13 .audit-description{margin-top:20px;padding:20px}
}

@media (max-width:480px){
  #s13 h2{font-size:clamp(36px,10.5vw,42px);line-height:1.04}
  #s13 .slide-middle{justify-content:flex-start;padding-top:8px}
  #s13 .audit-tabs{gap:9px;margin-top:16px;padding-block:8px}
  #s13 .audit-tab{min-height:64px;padding:9px 10px}
  #s13 .audit-description{min-height:72px;margin-top:12px;padding:15px}
  #s13 .audit-description p{font-size:14px;line-height:1.5}
}

/* Scale and rebalance the diagram families identified in the deck audit. */
#s05 .slide-middle,#s07 .slide-middle,#s10 .slide-middle,#s12 .slide-middle,#s18 .slide-middle,#s24 .slide-middle,#s27 .slide-middle{
  justify-content:flex-start;
  padding-top:clamp(18px,3.2vh,32px);
}
#s05{display:flex;flex-direction:column;min-height:100vh}
#s05 .slide-top{flex:0 0 auto;width:100%}
#s05 .slide-center{
  flex:1 1 auto;
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
#s05 .slide-center > *{width:100%}

/* Animated numbered deployment flow. */
#s05 .numbered-flow{
  --step-gap:clamp(60px,8vw,130px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:var(--step-gap);
  min-height:0;
  margin-top:clamp(34px,6vh,62px);
}
#s05 .numbered-step{text-align:center;min-width:0;position:relative}
#s05 .numbered-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:calc(50% + 32px);
  top:32px;
  width:calc(100% + var(--step-gap) - 64px);
  height:1.5px;
  background:rgba(255,255,255,.25);
  opacity:0;
  transition:opacity .9s ease-out;
}
#s05 .numbered-step:nth-child(1)::after{transition-delay:.9s}
#s05 .numbered-step:nth-child(2)::after{transition-delay:1.1s}
#s05.in .numbered-step::after{opacity:1}
#s05 .step-number{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.4);
  color:#fff;
  font-size:28px;
  font-weight:600;
  opacity:0;
  transform:scale(.7);
  transition:opacity .8s cubic-bezier(.34,1.56,.64,1),transform .8s cubic-bezier(.34,1.56,.64,1),box-shadow .4s cubic-bezier(.34,1.56,.64,1);
  margin-inline:auto;
}
#s05 .numbered-step:nth-of-type(1) .step-number{transition-delay:.3s,.3s,0s}
#s05 .numbered-step:nth-of-type(2) .step-number{transition-delay:.5s,.5s,0s}
#s05 .numbered-step:nth-of-type(3) .step-number{transition-delay:.7s,.7s,0s}
#s05.in .step-number{opacity:1;transform:scale(1)}
#s05 .step-number:hover{transform:scale(1.12);box-shadow:0 0 0 14px rgba(255,255,255,.06)}
#s05 .step-copy{
  margin-top:22px;
  padding:14px;
  margin-inline:auto;
  border-radius:8px;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.34,1.56,.64,1),transform .8s cubic-bezier(.34,1.56,.64,1),background-color .4s ease;
}
#s05 .numbered-step:nth-of-type(1) .step-copy{transition-delay:.4s,.4s,0s}
#s05 .numbered-step:nth-of-type(2) .step-copy{transition-delay:.6s,.6s,0s}
#s05 .numbered-step:nth-of-type(3) .step-copy{transition-delay:.8s,.8s,0s}
#s05.in .step-copy{opacity:1;transform:translateY(0)}
#s05 .step-copy:hover{background:rgba(255,255,255,.05)}
#s05 .step-copy h3{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.16em}
#s05 .step-copy p{margin:0 auto;font-size:14px;line-height:1.6;opacity:.85;max-width:300px}
#s05 .slide-center > .lede,
#s05 .slide-center > h2{
  transition-duration:.8s;
  transition-timing-function:cubic-bezier(.34,1.56,.64,1);
}

@media (max-width:850px){
  #s05 .slide-center{justify-content:flex-start;padding-top:clamp(22px,4vh,38px)}
  #s05 .numbered-flow{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:30px;
  }
  #s05 .numbered-step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;text-align:left}
  #s05 .numbered-step:not(:last-child)::after{left:31px;top:64px;bottom:-22px;width:1.5px;height:auto}
  #s05 .step-number{grid-column:1;margin:0}
  #s05 .step-copy{grid-column:2;margin-top:0;align-self:center;margin-inline:0}
  #s05 .step-copy p{margin-left:0}
}

@media (max-width:620px){
  #s05 .step-number{width:54px;height:54px;font-size:23px}
  #s05 .numbered-flow{gap:12px;margin-top:22px}
  #s05 .numbered-step{grid-template-columns:54px minmax(0,1fr);gap:14px}
  #s05 .numbered-step:not(:last-child)::after{left:26px;top:54px;bottom:-12px}
  #s05 .step-copy{padding:8px;margin-left:-8px}
  #s05 .step-copy h3{font-size:10px;margin-bottom:5px}
  #s05 .step-copy p{font-size:12px;line-height:1.45}
}

/* Four connected stages for the deployment path, retaining the existing copy. */
#s26 .deployment-path{gap:clamp(22px,3vw,48px)}
#s26 .deployment-path article{
  border-top:0;
  position:relative;
  padding-top:0;
  min-width:0;
}
#s26 .deployment-path article::before{
  content:"";
  position:absolute;
  left:clamp(66px,6vw,94px);
  right:calc(-1 * clamp(22px,3vw,48px));
  top:38px;
  height:1px;
  background:var(--line);
}
#s26 .deployment-path article::after{
  content:"";
  position:absolute;
  right:calc(-1 * clamp(22px,3vw,48px));
  top:34px;
  width:8px;
  height:8px;
  border-top:1px solid var(--blue);
  border-right:1px solid var(--blue);
  transform:rotate(45deg);
}
#s26 .deployment-path article:last-child::before,
#s26 .deployment-path article:last-child::after{display:none}
#s26 .path-stage-icon{
  width:76px;
  height:76px;
  border:1px solid var(--blue);
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  background:var(--paper);
  box-shadow:0 0 0 10px rgba(8,47,127,.055);
  position:relative;
  z-index:1;
}
#s26 .path-stage-icon i,
#s26 .path-stage-icon i::before,
#s26 .path-stage-icon i::after{position:absolute;content:"";display:block;color:var(--blue)}
#s26 .path-stage-1 i{width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%;left:25px;top:21px}
#s26 .path-stage-1 i::before{width:9px;height:1.5px;background:currentColor;right:-7px;bottom:0;transform:rotate(45deg)}
#s26 .path-stage-2 i{width:30px;height:22px;left:22px;top:26px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
#s26 .path-stage-2 i::before{width:25px;height:1.5px;background:currentColor;left:2px;top:7px;transform:rotate(-24deg)}
#s26 .path-stage-2 i::after{width:25px;height:1.5px;background:currentColor;left:2px;top:13px;transform:rotate(20deg)}
#s26 .path-stage-3 i{width:28px;height:28px;left:23px;top:23px;border:1.5px solid currentColor;transform:rotate(45deg)}
#s26 .path-stage-3 i::before{inset:6px;border:1px solid currentColor}
#s26 .path-stage-4 i{width:30px;height:30px;left:22px;top:22px;border:1.5px solid currentColor;border-radius:50%}
#s26 .path-stage-4 i::before{inset:6px;border:1px solid currentColor;border-radius:50%}
#s26 .path-stage-4 i::after{width:6px;height:6px;left:11px;top:11px;background:currentColor;border-radius:50%}
#s26 .deployment-path h3{margin-top:0}

@media (max-width:850px){
  #s26 .deployment-path article::before,
  #s26 .deployment-path article::after{display:none}
  #s26 .path-stage-icon{width:58px;height:58px;transform:scale(.78);transform-origin:left top;margin-bottom:8px}
}
.node-flow{min-height:285px;padding-top:66px}
.node-flow::before{top:102px}
.node-flow article > span{width:74px;height:74px;box-shadow:0 0 0 13px rgba(158,188,255,.09)}
.node-flow article i{width:13px;height:13px}
.node-flow article b{margin-top:34px;font-size:13px;letter-spacing:.16em}
.light-node-flow article > span{box-shadow:0 0 0 13px rgba(8,47,127,.06)}
.flow.two-row-flow{gap:22px 32px}
.flow.two-row-flow span{min-height:108px;padding:25px 28px;font-size:14px}
.cluster-visual{min-height:270px}
.cluster-visual article > span{width:36px;height:36px}
.cluster-visual article > b{font-size:10px}

/* Slide 02 retains only the lower company line. */
#s02 .hub-lines{display:none!important}

@media (max-width:850px){
  .step-icon{width:44px;height:36px}
  .node-flow{min-height:205px;padding-top:42px}
  .node-flow::before{top:70px}
  .node-flow article > span{width:56px;height:56px}
  .node-flow article b{font-size:10px;margin-top:24px;letter-spacing:.08em}
  .flow.two-row-flow span{min-height:76px;font-size:12px;padding:16px 12px}
  .cluster-visual{min-height:210px}
}

@media (min-width:851px) and (max-height:760px){
  .scene{
    padding-top:clamp(128px,19vh,150px);
  }
}

@media (max-width:850px){
  .scene{
    padding-top:clamp(112px,17vh,142px);
  }
}

/* Structured slide rhythm: centered cover, designed upper/middle content zones. */
.scene#s01{
  justify-content:center !important;
  align-items:stretch;
  padding-top:clamp(92px,13vh,120px);
}

.scene:not(#s01){
  justify-content:flex-start !important;
  align-items:flex-start;
  padding-top:clamp(124px,17vh,154px);
  padding-bottom:clamp(78px,11vh,108px);
}

.slide-top{
  flex:0 0 auto;
  width:100%;
}

.slide-top > .kicker{
  margin-bottom:0;
}

.slide-top > h2{
  margin-top:clamp(16px,2.2vh,22px);
}

.slide-top > h2 + .lede{
  margin-top:clamp(12px,1.8vh,18px);
}

.slide-middle{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  padding-top:clamp(10px,1.8vh,20px);
}

.slide-middle > .visual,
.slide-middle > .steps,
.slide-middle > .flow,
.slide-middle > .case-grid,
.slide-middle > .two-worlds,
.slide-middle > .deploy-run{
  margin-top:clamp(24px,4.5vh,48px);
}

.slide-middle .companies{
  height:clamp(190px,28vh,250px);
}

@media (min-width:851px) and (max-height:760px){
  .scene:not(#s01){
    padding-top:clamp(114px,16vh,126px);
    padding-bottom:clamp(68px,10vh,78px);
  }

  .slide-middle > .visual,
  .slide-middle > .steps,
  .slide-middle > .flow,
  .slide-middle > .case-grid,
  .slide-middle > .two-worlds,
  .slide-middle > .deploy-run{
    margin-top:clamp(18px,3.5vh,30px);
  }

  .slide-middle .companies{
    height:clamp(170px,26vh,205px);
  }
}

@media (max-width:850px){
  .scene:not(#s01){
    padding-top:clamp(88px,13vh,108px);
    padding-bottom:clamp(48px,8vh,64px);
  }

  .slide-middle{
    justify-content:flex-start;
    padding-top:clamp(6px,1.2vh,10px);
  }

  .slide-middle > .visual,
  .slide-middle > .steps,
  .slide-middle > .flow,
  .slide-middle > .case-grid,
  .slide-middle > .two-worlds,
  .slide-middle > .deploy-run{
    margin-top:clamp(12px,2.4vh,20px);
  }

  .slide-middle .companies{
    height:clamp(130px,22vh,160px);
    margin-bottom:clamp(30px,6vh,42px);
  }
}