/* Bradial DS 1.21. Reference 017 supplies the horizontal composition; no global layout/scroll rules. */
.principal-about{padding:64px 0 72px;background:#f5faff;overflow:visible}
.principal-about-scroll{position:relative;height:auto}
.principal-about-pin{position:sticky;top:var(--about-pin-top,112px);padding-block:20px 28px;background:#f5faff}
.principal-about-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr);align-items:end;gap:72px;margin-bottom:44px}
.principal-about-intro .ref-section-title{margin:0;max-width:710px}
.principal-about-intro .ref-lead{margin:0;padding-bottom:4px}
.principal-about-gallery{overflow:hidden;width:100%}
.principal-about-gallery::-webkit-scrollbar{display:none}
.principal-about-gallery:focus-visible{outline:2px solid #176ed0}
.principal-about-track{display:flex;align-items:start;gap:48px;width:max-content;padding:0 max(40px,calc((100vw - 1240px)/2)) 8px;will-change:transform}
.principal-about-story{width:clamp(340px,36vw,540px);flex:0 0 auto;scroll-snap-align:start;min-width:0}
.principal-about-story:nth-child(even){padding-top:44px}
.principal-about-media{position:relative;width:100%;aspect-ratio:2048/1365;overflow:hidden;border-radius:24px;background:#eaf4fe;isolation:isolate}
.principal-about-media>img{display:block;width:100%;height:auto;aspect-ratio:2048/1365;object-fit:contain;opacity:1}
.principal-about-story-copy{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px 14px;padding:24px 0 0}
.principal-about-number{font-size:12px;font-weight:450;line-height:30px;color:#2f86ea;letter-spacing:.06em}
.principal-about-story-copy h3{margin:0;color:#2b465c;font-family:Roboto,Arial,sans-serif;font-size:24px;font-weight:450;line-height:1.25;letter-spacing:-.025em}
.principal-about-story-copy p{grid-column:2;margin:0;color:#647f96;font-size:16px;font-weight:350;line-height:1.75;max-width:430px}
.principal-about-navigation{display:flex;align-items:center;gap:24px;margin-top:32px}
.principal-about-count{font-size:13px;font-weight:450;color:#647f96;letter-spacing:.05em;white-space:nowrap}
.principal-about-progress{height:2px;flex:1;background:#e4eff9;overflow:hidden}
.principal-about-progress span{display:block;height:100%;width:20%;background:#2f86ea;transform-origin:left}
.principal-about-actions{display:flex;gap:12px}
.principal-about-actions button{min-height:44px;padding:8px 14px;border:1px solid #cce3f9;border-radius:12px;background:#f8fcff;color:#176ed0;font:400 14px/1.4 Roboto,Arial,sans-serif;cursor:pointer}
.principal-about-actions button:hover{background:#eaf4fe}
.principal-about-actions button:disabled{opacity:.4;cursor:default}
.principal-about-actions button:focus-visible{outline:2px solid #176ed0;outline-offset:3px}
@media(max-width:1100px) and (min-width:801px){.principal-about-intro{gap:40px}.principal-about-gallery{scroll-padding-inline:28px}.principal-about-track{padding-inline:28px;gap:32px}}
@media(max-width:800px){.principal-about{padding:40px 0 64px}.principal-about-intro{grid-template-columns:1fr;gap:24px;margin-bottom:30px;text-align:center}.principal-about-intro .ref-section-title{max-width:650px;margin-inline:auto}.principal-about-intro .ref-lead{max-width:600px;margin-inline:auto}.principal-about-gallery{scroll-padding-inline:24px}.principal-about-track{padding-inline:24px;gap:24px}.principal-about-story{width:76vw;max-width:540px}.principal-about-story:nth-child(even){padding-top:28px}}
@media(max-width:520px){.principal-about{padding:34px 0 60px}.principal-about-gallery{scroll-padding-inline:18px}.principal-about-track{padding-inline:18px;gap:18px}.principal-about-story{width:calc(100vw - 60px)}.principal-about-story:nth-child(even){padding-top:22px}.principal-about-media{border-radius:22px}.principal-about-story-copy{grid-template-columns:24px minmax(0,1fr);gap:12px;padding-top:20px}.principal-about-story-copy h3{font-size:23px}.principal-about-story-copy p{font-size:16px}.principal-about-navigation{gap:12px;margin-top:26px}.principal-about-actions{gap:8px}.principal-about-actions button{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.principal-about-progress span{transition:none}}

/* The same cloud chapter as Chat/CRM, shared by both photo sections. */
.principal-photo-chapter.metrics-section{position:relative;isolation:isolate;padding:0;overflow:clip;background:#91c9f3;scroll-margin-top:24px}
.principal-photo-chapter>.metrics-atmosphere{position:sticky;inset:auto;top:0;width:100%;height:100svh;margin-bottom:-100svh;z-index:-1;overflow:clip}
.principal-photo-chapter .principal-about,.principal-photo-chapter .principal-team,.principal-photo-chapter .principal-about-pin{background:transparent}
.principal-photo-chapter .principal-about{padding-top:100px}
.principal-photo-chapter .principal-team{padding-bottom:130px}
.principal-photo-chapter .principal-about-intro .ref-lead,.principal-photo-chapter .principal-about-story-copy p,.principal-photo-chapter .team-coverflow-caption p{color:#526f89}
.principal-photo-chapter:before,.principal-photo-chapter:after{content:'';position:absolute;left:0;right:0;height:clamp(120px,14vw,190px);z-index:0;pointer-events:none}
.principal-photo-chapter:before{top:-1px;background:linear-gradient(to bottom,#f5faff 0%,#f5faffcc 22%,#f5faff00 100%)}
.principal-photo-chapter:after{bottom:-1px;background:linear-gradient(to top,#fff 0%,#ffffffcc 22%,#ffffff00 100%)}
.principal-photo-chapter .principal-about,.principal-photo-chapter .principal-team{position:relative;z-index:1}
@media(max-width:800px){.principal-photo-chapter .principal-about{padding-top:70px}.principal-photo-chapter .principal-team{padding-bottom:110px}}
/* Fill the visible mobile frame until horizontal travel finishes. The existing
   ResizeObserver includes this height in the sticky runway automatically. */
@media(max-width:800px){
 .principal-photo-chapter .principal-about-pin{width:100%;min-height:calc(100svh - var(--about-pin-top,112px));min-height:calc(100dvh - var(--about-pin-top,112px))}
 .principal-photo-chapter>.metrics-atmosphere{height:100svh;height:100dvh;margin-bottom:-100svh;margin-bottom:-100dvh}
}