/* About BSP — complete source-content presentation system. */
.about-page { background: #f7f9fd; }
.about-page .page-hero { display: none; }
.about-shell { overflow: hidden; }
.about-hero { position: relative; overflow: hidden; padding: 148px 0 96px; background: #071a3d; color: #fff; }
.about-hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 84% 15%, rgba(35,87,245,.44), transparent 29%), radial-gradient(circle at 63% 76%, rgba(22,199,217,.16), transparent 31%), linear-gradient(120deg, rgba(5,18,47,.8), rgba(7,26,61,.18)); content: ""; }
.about-hero::after { position: absolute; top: -210px; right: -110px; width: min(58vw,800px); aspect-ratio: 1; border: 1px solid rgba(125,231,239,.22); border-radius: 50%; box-shadow: 0 0 0 58px rgba(125,231,239,.035), 0 0 0 116px rgba(125,231,239,.022), 0 0 0 174px rgba(125,231,239,.015); content: ""; }
.about-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 800px) minmax(210px,1fr); gap: 48px; align-items: end; }
.about-kicker { display: inline-flex; align-items: center; gap: 11px; color: #b9f45c; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.about-kicker::before { width: 36px; height: 3px; border-radius: 99px; background: currentColor; content: ""; }
.about-hero h1 { max-width: 830px; margin-top: 24px; color: #fff; font-size: clamp(3rem,6vw,6.2rem); line-height: .94; letter-spacing: -.065em; }
.about-hero h1 em { color: #b9f45c; font-style: normal; }
.about-hero p { max-width: 685px; margin-top: 28px; color: #c5d4eb; font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.65; }
.about-main { padding: 84px 0 112px; }
.about-main .content-layout { grid-template-columns: 220px minmax(0,1fr); gap: clamp(42px,7vw,100px); }
.about-main .local-nav { position: sticky; top: 112px; }
.about-main .prose { max-width: none; }
.about-main .prose h2 { max-width: 840px; margin-top: 78px; color: #071a3d; font-size: clamp(2.3rem,4vw,4.35rem); line-height: .98; letter-spacing: -.055em; }
.about-main .prose h2:first-child { margin-top: 0; }
.about-main .prose > p, .about-main .prose .lead { max-width: 820px; color: #41536e; }
.about-main .prose h2 + p { margin-top: 22px; }
.about-main .prose > .lead { padding-left: 24px; border-left: 3px solid #b9f45c; color: #152b52; font-size: clamp(1.16rem,1.7vw,1.42rem); line-height: 1.65; }
.about-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.78fr); gap: 48px; align-items: end; }
.about-intro__aside { padding: 26px; border-radius: 22px; background: #e9fafa; }
.about-intro__aside strong { display: block; color: #0c3563; font-size: 1.35rem; line-height: 1.2; }
.about-intro__aside span { display: block; margin-top: 12px; color: #46627d; font-size: .88rem; line-height: 1.55; }
.about-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.about-chips span { padding: 9px 12px; border: 1px solid #cbdcf0; border-radius: 999px; color: #163560; font-size: .77rem; font-weight: 750; }
.about-band .about-chips span { border-color: rgba(185,244,92,.5); background: rgba(185,244,92,.12); color: #efffd4; }
.about-matrix { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 14px; margin-top: 30px; }
.about-matrix article { grid-column: span 4; min-height: 210px; padding: 25px; border: 1px solid #dbe5f0; border-radius: 22px; background: #fff; }
.about-matrix article:nth-child(1), .about-matrix article:nth-child(4) { grid-column: span 5; }
.about-matrix article:nth-child(2), .about-matrix article:nth-child(5) { grid-column: span 7; }
.about-matrix article:nth-child(3) { grid-column: span 12; min-height: 180px; background: #0c2757; color: #fff; }
.about-matrix b { display: block; color: #168bc1; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.about-matrix article:nth-child(3) b { color: #b9f45c; }.about-matrix h3 { margin-top: 34px; font-size: 1.35rem; letter-spacing: -.03em; }.about-matrix p { margin-top: 9px; color: #52657e; font-size: .9rem; line-height: 1.55; }.about-matrix article:nth-child(3) p { color: #c7d7ee; }
.about-list { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid #dbe4ef; }.about-list li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 17px; padding: 19px 0; border-bottom: 1px solid #dbe4ef; color: #253a5a; font-size: .98rem; line-height: 1.55; list-style: none; }.about-list li::before { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #eaffd1; color: #16823d; content: "✓"; font-size: .72rem; font-weight: 900; }
.about-band { margin-top: 78px; padding: 60px; border-radius: 30px; background: #0a2452; color: #fff; }.about-band h2 { margin-top: 0!important; color: #fff!important; }.about-band p { color: #c8d5ea!important; }.about-band .about-list { border-color: rgba(255,255,255,.16); }.about-band .about-list li { border-color: rgba(255,255,255,.16); color: #f4f7fb; }.about-band .about-list li::before { background: rgba(185,244,92,.15); color: #b9f45c; }
.about-people { display: grid; gap: clamp(54px,7vw,90px); margin-top: 8px; }.about-person { display: grid; grid-template-columns: minmax(170px,240px) minmax(0,1fr); gap: clamp(28px,5vw,70px); align-items: start; padding: 0; }.about-person figure { margin: 0; }.about-person figure img { display: block; width: 100%; height: auto; object-fit: contain; }.about-person h3 { margin-top: 0; color: #071a3d; font-size: clamp(2rem,3vw,3.1rem); letter-spacing: -.05em; }.about-person small { display: block; margin-top: 7px; color: #198e50; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.about-person p { margin-top: 20px; color: #40536e; font-size: 1.04rem; line-height: 1.65; }.about-person ul { grid-column: 2; display: grid; gap: 12px; margin-top: -12px; padding: 24px 0 0; border-top: 1px solid #cfdbe9; }.about-person li { position: relative; padding-left: 20px; color: #4a5e78; font-size: .92rem; line-height: 1.6; list-style: none; }.about-person li::before { position: absolute; top: .65em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #198e50; content: ""; }
.board-content { min-width: 0; }
.board-leadership { display: grid; gap: clamp(42px,5vw,64px); }
.board-profile { position: relative; overflow: hidden; padding: clamp(32px,4vw,48px); border: 1px solid rgba(205,220,238,.72); border-radius: 28px; background: #fff; box-shadow: 0 20px 56px rgba(7,26,61,.075); }
.board-profile::before,.board-profile::after { position: absolute; border: 1px solid rgba(35,156,242,.14); border-radius: 50%; content: ""; pointer-events: none; }
.board-profile::before { top: -260px; right: -235px; width: 500px; aspect-ratio: 1; box-shadow: 0 0 0 48px rgba(35,156,242,.025),0 0 0 96px rgba(35,156,242,.018); }
.board-profile::after { top: 104px; left: 62px; width: 72px; aspect-ratio: 1; border: 0; border-radius: 0; background-image: radial-gradient(circle,rgba(53,201,251,.34) 1.35px,transparent 1.5px); background-size: 10px 10px; }
.board-profile--secondary::before { right: auto; left: -235px; }
.board-profile--secondary::after { right: 62px; left: auto; }
.board-profile__overview { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(210px,260px) minmax(0,1fr); gap: clamp(38px,5vw,68px); align-items: center; padding: 8px 8px clamp(34px,4vw,48px); }
.board-profile--secondary .board-profile__overview { grid-template-columns: minmax(0,1fr) minmax(210px,260px); }
.board-profile__portrait { position: relative; margin: 0; overflow: hidden; aspect-ratio: 1; border: 1px solid #b9dff5; border-radius: 50%; background: #edf3fa; box-shadow: 0 12px 32px rgba(7,26,61,.08); }
.board-profile__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.board-profile--secondary .board-profile__portrait { border: 10px solid #eef8f4; }
.board-profile__content { min-width: 0; }
.board-profile__content small { display: block; margin: 0 0 15px; color: #087df2; font-size: .74rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.about-main .prose .board-profile h3 { margin: 0; color: #071a3d; font-size: clamp(2.65rem,4.2vw,4.25rem); line-height: .98; letter-spacing: -.06em; }
.board-profile__rule { display: block; width: 54px; height: 3px; margin-top: 24px; border-radius: 99px; background: #239cf2; }
.board-profile__summary { max-width: 610px; margin-top: 22px; color: #40536e; font-size: 1.02rem; line-height: 1.72; }
.board-profile__details { position: relative; z-index: 1; display: grid; margin: 0; padding: 0; border-top: 1px solid #d9e4ef; }
.board-profile__details li { display: grid; grid-template-columns: 58px minmax(160px,190px) minmax(0,1fr); gap: 20px; align-items: center; min-height: 96px; padding: 16px 8px; border-bottom: 1px solid #d9e4ef; color: #40536e; font-size: .91rem; line-height: 1.6; list-style: none; }
.board-profile__details li:last-child { border-bottom: 0; }
.board-profile__details strong { align-self: stretch; display: flex; align-items: center; padding-right: 18px; border-right: 1px solid #d5e1ed; color: #071a3d; font-size: .95rem; line-height: 1.35; }
.board-detail__icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: #eaf2ff; color: #1677f2; }
.board-detail__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-directory-head { max-width: 920px; }.about-directory-head h2 { max-width: 860px; color: #071a3d; font-size: clamp(2.6rem,4.6vw,5rem); line-height: .98; letter-spacing: -.06em; }.about-directory-head p { max-width: 720px; margin-top: 22px; color: #4d607a; font-size: clamp(1rem,1.3vw,1.14rem); line-height: 1.65; }
.about-page[data-page="about"] .topic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 clamp(32px,5vw,72px); margin-top: 48px; border-top: 1px solid #d9e2ed; }.about-page[data-page="about"] .topic-grid .card, .about-page[data-page="about"] .topic-grid .card:nth-child(n) { display: grid; min-height: 0; grid-column: auto; grid-template-columns: 92px minmax(0,1fr) auto; column-gap: 18px; align-items: start; padding: 28px 0; border: 0; border-bottom: 1px solid #d9e2ed; border-radius: 0; background: transparent; box-shadow: none; color: #071a3d; }.about-page[data-page="about"] .topic-grid .card .topic-label { grid-column: 1; grid-row: 1 / span 2; display: block; padding-top: 5px; color: #168bc1; font-size: .62rem; line-height: 1.35; }.about-page[data-page="about"] .topic-grid .card .topic-label::before { display: none; }.about-page[data-page="about"] .topic-grid .card h3 { grid-column: 2; margin: 0; font-size: clamp(1.25rem,1.65vw,1.6rem); line-height: 1.08; }.about-page[data-page="about"] .topic-grid .card p, .about-page[data-page="about"] .topic-grid .card:nth-child(1) p { grid-column: 2; min-height: 0; margin-top: 9px; color: #586b84; font-size: .88rem; line-height: 1.5; }.about-page[data-page="about"] .topic-grid .card .text-link, .about-page[data-page="about"] .topic-grid .card:nth-child(1) .text-link { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; color: #0f5d9d; font-size: 0; }.about-page[data-page="about"] .topic-grid .card .text-link span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #c6d4e5; border-radius: 50%; font-size: 1rem; transition: color .2s ease, background .2s ease, border-color .2s ease; }.about-page[data-page="about"] .topic-grid .card:hover .text-link span { border-color: #0f5d9d; background: #0f5d9d; color: #fff; }
.about-image-wide--team-gallery { background: #fff; }.about-image-wide.about-image-wide--team-gallery img { height: auto; max-height: none; object-fit: contain; }
.about-image-wide.about-image-wide--family { margin: 0; background: #09224d; }.about-image-wide.about-image-wide--family img { height: auto; max-height: none; object-fit: contain; }
.about-page[data-page="our-team"] .prose > h2 { font-size: clamp(2.1rem,3vw,3.1rem); }
.about-image-wide { margin: 0; overflow: hidden; border-radius: 26px; background: #09224d; }.about-image-wide img { display: block; width: 100%; max-height: 470px; object-fit: cover; }.about-image-wide figcaption { padding: 14px 18px; color: #c2d0e5; font-size: .8rem; }
.about-steps { display: grid; gap: 0; margin-top: 30px; border-top: 1px solid #d8e2ef; counter-reset: step; }.about-steps article { position: relative; display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 26px; padding: 27px 0; border-bottom: 1px solid #d8e2ef; counter-increment: step; }.about-steps article::before { color: #1885c7; content: "0" counter(step); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }.about-steps h3 { font-size: 1.35rem; }.about-steps p { margin-top: 9px; color: #50627b; }
.about-source-note { margin-top: 30px; color: #71829b; font-size: .75rem; }
@media (max-width: 900px) { .about-hero{padding:126px 0 72px}.about-hero .container{grid-template-columns:1fr}.about-main .content-layout{grid-template-columns:1fr}.about-main .local-nav{position:static}.about-intro{grid-template-columns:1fr}.about-matrix article,.about-matrix article:nth-child(n){grid-column:span 6}.about-matrix article:nth-child(3){grid-column:1/-1}.about-band{padding:38px}.about-person{grid-template-columns:180px 1fr;gap:30px}.about-person ul{grid-column:1/-1;margin-top:0}.about-page[data-page="about"] .topic-grid{grid-template-columns:1fr;gap:0}.about-page[data-page="about"] .topic-grid .card,.about-page[data-page="about"] .topic-grid .card:nth-child(n){grid-template-columns:110px minmax(0,1fr) auto} }
@media (max-width: 900px) { .board-profile { padding: 32px; } .board-profile__overview,.board-profile--secondary .board-profile__overview { grid-template-columns: minmax(170px,210px) minmax(0,1fr); gap: 34px; } .board-profile--secondary .board-profile__portrait { grid-column: 1; grid-row: 1; } .board-profile--secondary .board-profile__content { grid-column: 2; grid-row: 1; } .board-profile__details li { grid-template-columns: 54px minmax(140px,170px) minmax(0,1fr); gap: 16px; } }
@media (max-width: 600px) { .about-hero{padding:112px 0 54px}.about-hero h1{font-size:clamp(2.8rem,14vw,4rem)}.about-hero::after{right:-55%;width:520px}.about-main{padding:56px 0 74px}.about-main .prose h2{margin-top:56px;font-size:clamp(2.3rem,11vw,3.4rem)}.about-main .prose h2 + p{margin-top:18px}.about-intro__aside{padding:22px}.about-matrix{grid-template-columns:1fr}.about-matrix article,.about-matrix article:nth-child(n){grid-column:auto;min-height:0}.about-band{margin-top:56px;padding:27px 22px;border-radius:24px}.about-steps article{grid-template-columns:54px 1fr;gap:14px}.about-person{display:block}.about-person figure{width:min(210px,58vw);margin-bottom:24px}.about-person ul{margin-top:22px}.about-directory-head h2{font-size:clamp(2.45rem,11vw,3.4rem)}.about-directory-head p{margin-top:18px}.about-page[data-page="about"] .topic-grid{margin-top:34px}.about-page[data-page="about"] .topic-grid .card,.about-page[data-page="about"] .topic-grid .card:nth-child(n){grid-template-columns:82px minmax(0,1fr) auto;column-gap:12px;padding:22px 0}.about-page[data-page="about"] .topic-grid .card h3{font-size:1.25rem}.about-page[data-page="about"] .topic-grid .card p{font-size:.84rem}.about-page[data-page="about"] .topic-grid .card .text-link span{width:30px;height:30px}.about-image-wide--family{border-radius:20px} }
@media (max-width: 600px) { .board-profile { padding: 28px 20px; border-radius: 23px; } .board-profile::before { top: -230px; right: -250px; } .board-profile--secondary::before { right: auto; left: -250px; } .board-profile::after { display: none; } .board-profile__overview,.board-profile--secondary .board-profile__overview { display: flex; flex-direction: column; gap: 28px; padding: 4px 0 30px; } .board-profile--secondary .board-profile__portrait { order: -1; } .board-profile__portrait { width: min(220px,70vw); margin-inline: auto; } .board-profile__content { width: 100%; } .about-main .prose .board-profile h3 { font-size: clamp(2.55rem,13vw,3.45rem); } .board-profile__content small { margin-bottom: 12px; } .board-profile__rule { margin-top: 20px; } .board-profile__summary { margin-top: 18px; font-size: .95rem; } .board-profile__details li { grid-template-columns: 48px minmax(0,1fr); gap: 8px 14px; min-height: 0; padding: 18px 0; } .board-detail__icon { grid-column: 1; grid-row: 1 / span 2; width: 46px; height: 46px; } .board-detail__icon svg { width: 22px; height: 22px; } .board-profile__details strong { grid-column: 2; display: block; align-self: auto; padding: 0; border: 0; font-size: .93rem; } .board-profile__details li > span:last-child { grid-column: 2; font-size: .86rem; } }

/* About hero — full-bleed skyline composition from the approved reference. */
.about-hero { position: relative; isolation: isolate; box-sizing: border-box; height: 100dvh; min-height: 720px; max-height: 100dvh; overflow: hidden; padding: clamp(174px,21vh,210px) 0 72px; background: #031434; color: #fff; }
.about-hero::before { position: absolute; z-index: -3; inset: 0; background: radial-gradient(circle at 78% 24%, rgba(35,87,245,.34), transparent 29%), radial-gradient(circle at 62% 78%, rgba(22,199,217,.13), transparent 32%), linear-gradient(112deg, #020c23 0%, #031536 48%, #082c69 100%); content: ""; }
.about-hero::after { position: absolute; z-index: -1; top: 82px; right: 4vw; width: min(56vw,980px); aspect-ratio: 1; border: 1px solid rgba(53,201,251,.1); border-radius: 50%; box-shadow: none; content: ""; }
.about-hero .container { position: static; display: block; width: min(calc(100% - 48px),var(--container)); max-width: none; margin-inline: auto; }
.about-hero__content { position: relative; z-index: 3; width: min(64%,760px); }
.about-kicker { display: inline-flex; color: #35c9fb; font-size: .78rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.about-kicker::before { display: none; }
.about-hero h1 { max-width: 650px; margin-top: 28px; overflow: visible; color: #fff; font-size: clamp(3.9rem,5.25vw,5.85rem); line-height: 1; letter-spacing: -.064em; }
.about-hero h1 span,.about-hero h1 em { display: block; }
.about-hero h1 em { margin-top: 10px; margin-bottom: -.12em; padding-bottom: .12em; overflow: visible; background: linear-gradient(92deg,#239cf2 0%,#35c9fb 52%,#7de7ef 100%); color: transparent; font-style: normal; -webkit-background-clip: text; background-clip: text; }
.about-hero p { max-width: 740px; margin-top: 38px; color: #d9e6f8; font-size: clamp(1rem,1.05vw,1.08rem); line-height: 1.72; }
.about-hero__visual { position: absolute; z-index: 1; top: 84px; right: min(-12vw,-132px); bottom: -28px; width: min(70vw,1220px); margin: 0; overflow: hidden; border: 0; border-radius: 0; background: #082b67; box-shadow: -42px 34px 90px rgba(0,4,17,.2); clip-path: none; -webkit-mask-image: radial-gradient(ellipse 72% 50% at 72% 50%,#000 0 98.5%,transparent 100%); mask-image: radial-gradient(ellipse 72% 50% at 72% 50%,#000 0 98.5%,transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.about-hero__visual::before { position: absolute; z-index: 2; inset: 0; background: linear-gradient(102deg,rgba(3,20,52,.65) 0%,rgba(3,20,52,.18) 28%,transparent 52%), linear-gradient(0deg,rgba(3,20,52,.34),transparent 33%); content: ""; pointer-events: none; }
.about-hero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 57% 68%; filter: saturate(.92) contrast(1.04) brightness(.98); }
.about-hero__wave { position: absolute; z-index: 0; right: -10%; bottom: -222px; left: -10%; height: 280px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(90deg,rgba(8,39,94,.9),rgba(14,55,130,.82) 55%,rgba(5,31,76,.94)); }
.about-hero__wave::after { position: absolute; inset: 28px -4% auto; height: 238px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #031434; content: ""; }
@media (max-width: 1180px) { .about-hero { min-height: 760px; padding-top: 168px; } .about-hero__content { width: 56%; } .about-hero h1 { font-size: clamp(3.7rem,6vw,5.3rem); } .about-hero__visual { top: 96px; right: -20%; bottom: -18px; width: 78%; } }
@media (max-width: 900px) { .about-hero { height: auto; min-height: 0; max-height: none; padding: 136px 0 68px; } .about-hero .container { position: relative; width: min(calc(100% - 40px),720px); } .about-hero__content { width: 100%; } .about-hero h1,.about-hero p { max-width: 650px; } .about-hero__visual { position: relative; top: auto; right: auto; bottom: auto; width: min(100%,720px); height: auto; aspect-ratio: 1.42; margin: 52px auto 0; border-radius: 0; clip-path: ellipse(50% 50% at 50% 50%); -webkit-mask-image: none; mask-image: none; } .about-hero__wave { bottom: -225px; } }
@media (max-width: 600px) { .about-hero { padding: 112px 0 52px; } .about-hero .container { width: min(calc(100% - 32px),520px); } .about-hero h1 { margin-top: 22px; font-size: clamp(3rem,14vw,4rem); } .about-hero h1 em { margin-top: 7px; } .about-hero p { margin-top: 24px; font-size: .96rem; line-height: 1.65; } .about-hero__visual { aspect-ratio: 1.1; margin-top: 42px; } }
