/* SIIP architecture spacing/performance + manifesto scroll polish — 2026-07-31 */

/* --- Homepage five-node architecture: cleaner spacing and lighter rendering --- */
.arch-section .reveal{opacity:1!important;transform:none!important;transition:none!important}
.arch-section .arch-sticky{
  padding:clamp(12px,1.8vh,20px) 0 clamp(10px,1.5vh,17px)!important;
}
.arch-section .arch-sticky>.container{
  transform:translate3d(0,var(--mobile-drift),0);
  backface-visibility:hidden;
}
.arch-section .arch-sticky .section-head{
  margin-bottom:clamp(14px,1.9vh,21px)!important;
}
.arch-section .arch-sticky .section-head h2{
  line-height:1.01!important;
  padding-top:.04em;
  padding-bottom:.08em;
}
.arch-section .arch-sticky .section-head .lede{
  margin-top:clamp(10px,1.35vh,16px)!important;
}
.arch-section .arch-stage{
  padding:48px 26px 23px!important;
  contain:layout paint;
  isolation:isolate;
  box-shadow:0 34px 78px -56px rgba(0,0,0,.9)!important;
}
.arch-section .arch-grid-bg{opacity:.22!important}
.arch-section .arch-detail{
  min-height:116px!important;
  margin:0 0 clamp(18px,2.35vh,25px)!important;
  padding:15px 18px 16px!important;
  align-items:center;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:inset 0 1px 0 rgba(248,250,252,.025),0 14px 30px -28px #000!important;
}
.arch-section .arch-detail p{
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}
.arch-section .flow-zone{
  height:286px!important;
  margin-top:0;
  contain:layout paint;
}
.arch-section .flow-row{
  top:59%!important;
  gap:14px!important;
}
.arch-section .flow-node{
  min-height:144px!important;
  padding:14px 8px!important;
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,background .28s ease,opacity .28s ease!important;
  box-shadow:none;
}
.arch-section .flow-node svg{
  margin-bottom:13px!important;
  transition:stroke .25s ease!important;
}
.arch-section .flow-node.active{
  transform:translate3d(0,-3px,0) scale(1.012)!important;
  box-shadow:0 0 0 4px rgba(16,185,129,.035),0 0 27px rgba(16,185,129,.19),0 20px 38px -34px rgba(16,185,129,.78)!important;
}
.arch-section .flow-node.active svg{filter:none!important}
.arch-section .flow-node.impact{animation:siipNodeHit .42s cubic-bezier(.2,.8,.2,1)!important}
.arch-section .flow-node.impact::after{inset:-7px!important;border-radius:27px!important;animation-duration:.44s!important}
@keyframes siipNodeHit{0%,100%{transform:translate3d(0,-3px,0) scale(1.012)}45%{transform:translate3d(0,-3px,0) scale(1.035)}}
.arch-section .route-active{
  filter:none!important;
  stroke-width:3.1!important;
}
.arch-section .route-ghost{opacity:.72!important}
.arch-section .route-runner{
  filter:drop-shadow(0 0 4px rgba(52,211,153,.56))!important;
  will-change:transform,opacity;
}
.arch-section .runner-tail{
  filter:none!important;
  animation-duration:.82s!important;
}
.arch-section .impact-flash::before{
  box-shadow:0 0 8px 3px rgba(255,255,255,.78),0 0 20px 8px rgba(52,211,153,.68),0 0 34px 10px rgba(59,130,246,.32)!important;
}

/* Medium-height desktops are where the previous layout became crowded. */
@media (min-width:761px) and (max-height:940px){
  .arch-section .arch-sticky{padding-top:8px!important;padding-bottom:7px!important}
  .arch-section .arch-sticky .section-head{margin-bottom:9px!important}
  .arch-section .arch-sticky .section-head .eyebrow{margin-bottom:5px!important}
  .arch-section .arch-sticky .section-head h2{font-size:clamp(2.05rem,3.25vw,3.05rem)!important;line-height:1!important}
  .arch-section .arch-sticky .section-head .lede{font-size:.76rem!important;line-height:1.38!important;margin-top:8px!important}
  .arch-section .arch-stage{padding:43px 22px 16px!important}
  .arch-section .arch-detail{grid-template-columns:160px minmax(0,1fr)!important;min-height:101px!important;margin-bottom:15px!important;padding:10px 14px 11px!important}
  .arch-section .arch-detail h3{font-size:1.02rem!important;line-height:1.12!important;margin-bottom:3px!important}
  .arch-section .arch-detail p{font-size:.60rem!important;line-height:1.29!important}
  .arch-section .flow-zone{height:225px!important}
  .arch-section .flow-row{top:60%!important}
  .arch-section .flow-node{min-height:112px!important;padding:9px 5px!important}
  .arch-section .flow-node svg{width:23px!important;height:23px!important;margin-bottom:8px!important}
  .arch-section .flow-node span{font-size:6.9px!important;line-height:1.25!important}
  .arch-section .flow-node span small{font-size:6.35px!important}
}

@media (min-width:761px) and (max-width:1180px){
  .arch-section .arch-detail{grid-template-columns:145px minmax(0,1fr)!important}
  .arch-section .flow-zone{height:246px!important}
  .arch-section .flow-row{top:59%!important;gap:9px!important}
}

@media (max-width:760px){
  .arch-section .arch-sticky{padding:5px 0 6px!important}
  .arch-section .arch-sticky .section-head{margin-bottom:7px!important}
  .arch-section .arch-stage{padding:13px 9px 10px!important}
  .arch-section .arch-detail{min-height:109px!important;margin-bottom:9px!important;padding:8px 10px!important}
  .arch-section .flow-zone{height:calc(100svh - var(--header) - 226px)!important;min-height:322px!important;max-height:384px!important}
  .arch-section .flow-row{top:4px!important;gap:5px!important}
  .arch-section .flow-node{min-height:0!important;padding:5px 10px!important}
  .arch-section .flow-node span br{display:block!important}
  .arch-section .flow-node span small{display:block!important;margin-top:2px!important}
  .arch-section .route-runner{filter:drop-shadow(0 0 3px rgba(52,211,153,.48))!important}
}

/* --- Seven-statement manifesto: premium scroll composition --- */
.manifesto-minimal{
  position:relative;
  min-height:100vh;
  padding:calc(var(--header) + 34px) 0 70px!important;
  background:
    radial-gradient(circle at 12% 8%,rgba(59,130,246,.13),transparent 33%),
    radial-gradient(circle at 88% 88%,rgba(16,185,129,.11),transparent 34%),
    #09111d!important;
  overflow:clip;
}
.manifesto-minimal::before{
  opacity:.68;
  background-size:72px 72px!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%)!important;
}
.manifesto-statements{
  width:min(1240px,calc(100% - 44px))!important;
  border-top:0!important;
  display:grid;
  gap:clamp(18px,2.4vw,30px);
  counter-reset:manifesto;
}
.manifesto-statement{
  --shift:72px;
  position:relative;
  min-height:clamp(360px,70vh,680px);
  display:grid;
  align-items:center;
  padding:clamp(44px,7vw,92px)!important;
  border:1px solid rgba(148,163,184,.14)!important;
  border-radius:clamp(26px,3vw,42px);
  background:
    radial-gradient(circle at 88% 18%,rgba(59,130,246,.12),transparent 34%),
    linear-gradient(145deg,rgba(17,29,47,.92),rgba(7,13,22,.98));
  box-shadow:0 38px 90px -62px rgba(0,0,0,.95);
  overflow:hidden;
  isolation:isolate;
  counter-increment:manifesto;
  transform-origin:center;
}
.manifesto-statement:nth-child(even){
  background:
    radial-gradient(circle at 12% 82%,rgba(16,185,129,.12),transparent 36%),
    linear-gradient(215deg,rgba(17,29,47,.92),rgba(7,13,22,.98));
}
.manifesto-statement::before{
  content:attr(data-index)!important;
  position:absolute!important;
  left:clamp(28px,4vw,58px)!important;
  top:clamp(25px,3.3vw,48px)!important;
  color:#50e2b6!important;
  font-size:clamp(.68rem,.85vw,.88rem)!important;
  font-weight:800;
  letter-spacing:.22em;
  line-height:1;
  z-index:3;
}
.manifesto-statement::after{
  content:"“";
  position:absolute;
  right:clamp(20px,4vw,62px);
  bottom:clamp(-52px,-2.5vw,-28px);
  color:rgba(96,165,250,.07);
  font:800 clamp(12rem,26vw,28rem)/.7 Georgia,serif;
  z-index:-1;
  pointer-events:none;
}
.manifesto-statement:nth-child(even)::after{
  right:auto;
  left:clamp(20px,4vw,62px);
  color:rgba(52,211,153,.065);
}
.manifesto-statement p{
  position:relative;
  max-width:980px!important;
  margin:0!important;
  padding:0!important;
  color:#f4f8fd!important;
  font-size:clamp(2.25rem,5vw,5.4rem)!important;
  font-weight:760!important;
  line-height:1.02!important;
  letter-spacing:-.052em!important;
  text-wrap:balance;
  z-index:2;
}
.manifesto-statement p::before{
  content:"";
  display:block;
  width:clamp(54px,7vw,96px);
  height:3px;
  margin-bottom:clamp(24px,3vw,40px);
  border-radius:999px;
  background:linear-gradient(90deg,#3b82f6,#34d399);
  box-shadow:0 0 18px rgba(52,211,153,.18);
}
.manifesto-statement:nth-child(even) p{
  margin-left:auto!important;
  text-align:right;
  color:#c9d6e6!important;
}
.manifesto-statement:nth-child(even) p::before{margin-left:auto}
.manifesto-statement:last-child{
  min-height:clamp(400px,78vh,760px);
  border-color:rgba(52,211,153,.35)!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(16,185,129,.16),transparent 42%),
    linear-gradient(145deg,#12263a,#07111c);
}
.manifesto-statement:last-child p{
  max-width:none!important;
  text-align:center!important;
  margin:auto!important;
  font-size:clamp(3.2rem,8.4vw,8.8rem)!important;
  background:linear-gradient(90deg,#edf5ff,#8de9d2,#34d399)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.manifesto-statement:last-child p::before{margin-left:auto;margin-right:auto;width:clamp(90px,13vw,170px)}

/* Native CSS view-timeline animation in modern browsers. */
@supports (animation-timeline:view()){
  .manifesto-statement p{
    animation-name:siipManifestoText;
    animation-duration:1ms;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:view(block);
    animation-range:entry 14% cover 52%;
  }
  .manifesto-statement:nth-child(even) p{--text-shift:-54px}
  .manifesto-statement:nth-child(odd) p{--text-shift:54px}
}
@keyframes siipManifestoText{
  from{opacity:0;transform:translateX(var(--text-shift,50px)) translateY(22px);letter-spacing:-.07em}
  to{opacity:1;transform:none;letter-spacing:-.052em}
}

/* IntersectionObserver fallback for browsers without CSS view timelines. */
@supports not (animation-timeline:view()){
  .manifesto-statement{opacity:1;transform:none}
  .manifesto-statement p{opacity:0;transform:translateX(42px);transition:opacity .68s .12s ease,transform .82s .12s cubic-bezier(.16,1,.3,1)}
  .manifesto-statement:nth-child(even) p{transform:translateX(-42px)}
  .manifesto-statement.is-visible p{opacity:1;transform:none}
}

@media(max-width:760px){
  .manifesto-minimal{padding-top:calc(var(--header) + 22px)!important}
  .manifesto-statements{width:min(100% - 24px,680px)!important;gap:14px}
  .manifesto-statement{min-height:62vh;padding:62px 24px 38px!important;border-radius:24px}
  .manifesto-statement::before{left:24px!important;top:23px!important}
  .manifesto-statement p{font-size:clamp(2rem,10vw,3.45rem)!important;line-height:1.06!important}
  .manifesto-statement:nth-child(even) p{text-align:left;margin-left:0!important}
  .manifesto-statement:nth-child(even) p::before{margin-left:0}
  .manifesto-statement:last-child{min-height:68vh}
  .manifesto-statement:last-child p{font-size:clamp(3rem,15vw,5.4rem)!important}
}

@media(prefers-reduced-motion:reduce){
  .arch-section .runner-tail{animation:none!important}
  .manifesto-statement,.manifesto-statement p{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
}