/* SIIP final animation, ultra-wide and founder-headshot fixes */

/* Preserve the working sticky scroll scene and make it remain substantial at browser zoom-out/4K widths. */
.arch-section.arch-scroll{position:relative;height:510vh;height:510svh}
.arch-section .arch-sticky{
  position:sticky!important;
  top:var(--header)!important;
  height:calc(100vh - var(--header))!important;
  height:calc(100svh - var(--header))!important;
  min-height:calc(100vh - var(--header))!important;
  min-height:calc(100svh - var(--header))!important;
  overflow:hidden!important;
}
.arch-section .flow-path-layer{display:block!important}
.arch-section .route-runner{display:block!important}
.arch-section .arch-detail,.arch-section .step-copy{min-width:0}
.arch-section .arch-detail>div{min-width:0}
.arch-section .arch-detail h3,.arch-section .arch-detail p{max-width:100%;white-space:normal;overflow-wrap:break-word}
.arch-section .flow-node{min-width:0;overflow:hidden}
.arch-section .flow-node span{display:block;max-width:100%;overflow-wrap:break-word}

/* At normal desktop widths, use more of the available canvas without making the cards crowded. */
@media (min-width:1440px){
  .arch-section .arch-sticky>.container{width:min(94vw,1760px)!important}
  .arch-section .arch-sticky .section-head{max-width:1450px}
  .arch-section .arch-stage{padding-left:32px;padding-right:32px}
  .arch-section .flow-row{gap:16px}
  .arch-section .flow-node span{font-size:clamp(8.2px,.58vw,9.6px);line-height:1.3}
  .arch-section .flow-node span small{font-size:clamp(7.3px,.52vw,8.6px)}
}

/* Browser zoom-out creates an ultra-wide CSS viewport. Scale the scene up instead of leaving a tiny 1440px island. */
@media (min-width:2200px){
  .arch-section .arch-sticky>.container{width:min(92vw,2700px)!important}
  .arch-section .arch-sticky .section-head{max-width:2050px;margin-bottom:clamp(24px,2.5vh,42px)}
  .arch-section .arch-sticky .section-head .eyebrow{font-size:clamp(11px,.48vw,15px)}
  .arch-section .arch-sticky .section-head h2{font-size:clamp(4rem,3.35vw,6.6rem)!important;line-height:.98}
  .arch-section .arch-sticky .section-head .lede{max-width:1750px;font-size:clamp(1.1rem,.82vw,1.55rem);line-height:1.55}
  .arch-section .arch-stage{padding:72px 50px 42px;border-radius:42px}
  .arch-section .arch-detail{grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:36px;min-height:175px;padding:24px 28px;margin-bottom:24px;border-radius:24px}
  .arch-section .arch-detail-label{font-size:clamp(12px,.48vw,16px)}
  .arch-section .arch-detail h3{font-size:clamp(2rem,1.3vw,3rem)}
  .arch-section .arch-detail p{font-size:clamp(1rem,.7vw,1.35rem);line-height:1.5}
  .arch-section .flow-zone{height:420px}
  .arch-section .flow-row{gap:24px}
  .arch-section .flow-node{min-height:235px;border-radius:30px;padding:26px 16px}
  .arch-section .flow-node svg{width:42px;height:42px;margin-bottom:25px}
  .arch-section .flow-node span{font-size:clamp(12px,.5vw,16px);line-height:1.32;letter-spacing:.07em}
  .arch-section .flow-node span small{font-size:clamp(10px,.44vw,14px)}
  .arch-section .route-active{stroke-width:4.2}
  .arch-section .route-ghost{stroke-width:1.7}
}

/* On short desktop screens, keep the exact node copy visible without an inner scrollbar. */
@media (min-width:761px) and (max-height:820px){
  .arch-section .arch-sticky{padding-top:6px!important;padding-bottom:5px!important}
  .arch-section .arch-sticky .section-head{margin-bottom:7px!important}
  .arch-section .arch-sticky .section-head .eyebrow{margin-bottom:3px!important}
  .arch-section .arch-sticky .section-head h2{font-size:clamp(1.8rem,2.8vw,2.45rem)!important;line-height:.98!important}
  .arch-section .arch-sticky .section-head .lede{font-size:.68rem!important;line-height:1.3!important;margin-top:6px!important}
  .arch-section .arch-stage{padding-top:42px!important;padding-bottom:14px!important}
  .arch-section .arch-detail{min-height:0!important;padding:8px 13px 9px!important;margin-bottom:6px!important;align-items:start}
  .arch-section .arch-detail h3{font-size:.98rem!important;line-height:1.1!important;margin-bottom:3px!important}
  .arch-section .arch-detail p{max-height:none!important;overflow:visible!important;padding-right:0!important;font-size:.545rem!important;line-height:1.22!important;scrollbar-width:none!important}
  .arch-section .arch-detail p::-webkit-scrollbar{display:none!important}
  .arch-section .flow-zone{height:198px!important}
  .arch-section .flow-node{min-height:101px!important;padding:8px 5px!important}
  .arch-section .flow-node svg{width:22px!important;height:22px!important;margin-bottom:7px!important}
  .arch-section .flow-node span{font-size:6.65px!important;line-height:1.22!important}
}

/* When the description must scroll on narrow mobile screens, match the SIIP interface instead of the browser default. */
@media (max-width:760px){
  .arch-section .arch-detail p{
    scrollbar-width:thin;
    scrollbar-color:#34D399 rgba(30,41,59,.55);
  }
  .arch-section .arch-detail p::-webkit-scrollbar{width:5px}
  .arch-section .arch-detail p::-webkit-scrollbar-track{background:rgba(30,41,59,.48);border-radius:999px}
  .arch-section .arch-detail p::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#34D399,#60A5FA);border-radius:999px;border:1px solid rgba(9,15,25,.75)}
  .arch-section .arch-detail p::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#6EE7B7,#93C5FD)}
}

/* Founder headshot supplied by the client. */
.founder-mark.founder-photo{
  aspect-ratio:4/5;
  overflow:hidden;
  padding:0;
  background:#0A111B;
  box-shadow:0 28px 70px -38px rgba(0,0,0,.9),0 0 0 1px rgba(52,211,153,.08);
}
.founder-mark.founder-photo img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:50% 18%;
  filter:saturate(.92) contrast(1.03);
}
@media(max-width:1000px){.founder-mark.founder-photo{width:min(100%,390px);justify-self:center}}