/* Shared editorial grid. Full-width galleries and intentional image bleeds remain separate. */
body[data-page]{font-weight:300}
.shell{width:min(var(--content-max),calc(100% - 2 * var(--page-margin)));margin-inline:auto}
.intro,.priority-layout,.focus-band .shell,.members .section-heading,.member-feature,.about-intro,.why,.alliance,.vision,.focus-section,.map-section{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));column-gap:var(--grid-gutter)}
.intro>*,.priority-layout>*,.focus-band .shell>*,.members .section-heading>*,.member-feature>*,.about-intro>*,.why>*,.alliance>*,.vision>*,.focus-section>*,.map-section>*{min-width:0}
.site-header{padding-inline:var(--frame-inset)}
.hero-content,.hero-bottom{left:var(--frame-inset);right:var(--frame-inset)}
/* The masked photograph and base share one crop and one parallax transform. */
.hero-visual{position:absolute;inset:-5% 0;width:100%;height:110%;z-index:0;will-change:transform}
.hero-visual>.hero-image,.hero-displacement-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:auto}
.hero:after{z-index:1;pointer-events:none}
.hero-displacement{position:absolute;inset:0;pointer-events:none;-webkit-mask:url('assets/cda-symbol.png') 44% 42% / min(76vw,94svh) auto no-repeat;mask:url('assets/cda-symbol.png') 44% 42% / min(76vw,94svh) auto no-repeat}
.hero-displacement-image{--displace-x:clamp(24px,4.6vw,88px);--displace-y:clamp(-42px,-3vw,-16px);transform:translate3d(var(--displace-x),var(--displace-y),0) scale(1.12)}
.hero[data-hero-intro=waiting] .hero-displacement{visibility:hidden}
.hero[data-hero-intro] .hero-content h1,.hero[data-hero-intro] .hero-kicker{animation:none}
.hero[data-hero-intro=waiting] .hero-content h1,.hero[data-hero-intro=waiting] .hero-kicker{opacity:0}
.hero[data-hero-intro=playing] .hero-displacement-image{animation:cda-hero-align 1.6s cubic-bezier(.65,0,.3,1) both}
.hero[data-hero-intro=playing] .hero-content h1{animation:hero-title 1s var(--ease) .55s both}
.hero[data-hero-intro=playing] .hero-kicker{animation:hero-title .8s var(--ease) .45s both}
.hero.is-intro-paused .hero-displacement-image,.hero.is-intro-paused .hero-content h1,.hero.is-intro-paused .hero-kicker{animation-play-state:paused!important}
.hero[data-hero-intro=settled] .hero-displacement{display:none}
.motion-paused .hero-visual{transform:none!important}
@media(prefers-reduced-motion:reduce){.hero-visual{transform:none!important}}
@keyframes cda-hero-align{0%,28%{transform:translate3d(var(--displace-x),var(--displace-y),0) scale(1.12)}100%{transform:translate3d(0,0,0) scale(1)}}
@media(max-width:700px){
  .hero-visual>.hero-image,.hero-displacement-image{object-position:58% center}
  .hero-displacement{-webkit-mask-size:132vw auto;mask-size:132vw auto;-webkit-mask-position:50% 35%;mask-position:50% 35%}
}
.site-footer{padding-inline:var(--frame-inset)}
h1,h2,h3{font-weight:500;letter-spacing:-.025em}
h2{font-size:var(--heading-size);line-height:1.1}
.eyebrow,.vision-texts h3,.priority-nav button{font-weight:500}
.section-label{font-size:var(--label-size)}
.button{font-size:var(--body-small);line-height:1.4;padding:15px 24px}
.text-link{font-size:var(--body-small)}
.nav-link{font-size:15px}
.intro{padding-block:var(--section-space);align-items:start;row-gap:32px}
.intro-story{display:contents}
.intro-story>h2,.intro-image{grid-column:1/8;min-width:0}
.intro-story>h2{grid-row:1}
.intro h2{max-width:none}
.intro-image{grid-row:2;margin:0}
.intro-image-mask{--image-bleed:clamp(40px,6vh,72px);position:relative;aspect-ratio:2.05;overflow:hidden}
.intro-image-mask img{position:absolute;top:calc(-1 * var(--image-bleed));left:0;width:100%;height:calc(100% + 2 * var(--image-bleed));object-fit:cover;object-position:center 50%;will-change:transform}
.intro-copy{grid-column:8/-1;grid-row:2;align-self:start}
.intro .intro-copy p{font-size:clamp(18px,1.4vw,24px);max-width:42ch;margin:0;line-height:1.55}
.intro .intro-copy .intro-lead{font-size:clamp(22px,1.8vw,32px);line-height:1.4;margin-bottom:24px}
.intro-copy .intro-link{margin-top:32px;color:#0257e0;font-size:var(--body-small)}
.priority-copy{grid-column:1/8;min-height:365px}
.priority-nav{grid-column:9/-1}
.priority-top h2{font-size:var(--heading-size)}
.intro h2,.priority-copy h3{font-size:clamp(44px,5vw,88px);line-height:1.05}
.priority-copy p{font-size:var(--body-large);max-width:40ch}
.priority-nav button{font-size:var(--body-small)}
.experience,.news{padding-block:var(--section-space)}
.experience>.section-heading,.news>.section-heading{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));column-gap:var(--grid-gutter);align-items:end}
.experience>.section-heading>div,.news>.section-heading>div{grid-column:1/9;min-width:0}
.experience>.section-heading>.button,.news>.section-heading>.button{grid-column:10/-1;justify-self:end;white-space:nowrap}
.section-heading p:not(.eyebrow){font-size:var(--body-size);max-width:58ch}
/* Match the selected photograph after its scale and perspective projection.
   initGallery uses perspective = 12w and centre depth = .13w. */
#experience-gallery{--gallery-photo-width:calc(var(--experience-card-width) * 1.08 * 12 / 11.87);--gallery-copy-width:var(--gallery-photo-width)}
#news-gallery{--gallery-photo-width:calc(var(--news-card-width) * 1.22 * 12 / 11.87);--gallery-copy-width:var(--gallery-photo-width)}
#experience-gallery .gallery-caption h3,#news-gallery .gallery-caption h3{font-family:var(--font-display);font-weight:500;font-size:clamp(27px,2.3vw,36px);line-height:1.12;letter-spacing:-.025em;color:#161815;text-wrap:balance;max-width:none;margin:0 0 18px}
#experience-gallery .gallery-caption p,#news-gallery .gallery-caption p{font-size:var(--body-small);line-height:1.55;font-weight:300;max-width:46ch;min-height:0}
.news-date,.gallery-pagination,.preview-note{font-size:var(--label-size)}
.news-date{margin-bottom:10px}
#experience-gallery .gallery-caption{min-height:144px}
#news-gallery .gallery-caption{min-height:230px}
.focus-band{padding-block:var(--section-space)}
.focus-band>.band-symbol{animation:none;pointer-events:none;overflow:visible}
.band-rotor{fill:currentColor;transform-box:view-box;transform-origin:51.9443px 51.7629px;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused}
.band-rotor-outer{animation-name:cda-band-clockwise;animation-duration:120s}
.band-rotor-inner{animation-name:cda-band-anticlockwise;animation-duration:150s}
[data-band-motion].is-visible .band-rotor{animation-play-state:running}
.band-still{display:none}
.motion-paused .band-live{display:none}
.motion-paused .band-still{display:block}
@keyframes cda-band-clockwise{to{transform:rotate(360deg)}}
@keyframes cda-band-anticlockwise{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.band-live{display:none}.band-still{display:block}.band-rotor{animation:none!important;transform:none}}
.focus-band .shell>.eyebrow{grid-column:1/5}
.focus-band .shell>div{grid-column:5/-1}
.focus-band h2{font-size:clamp(32px,3vw,56px);font-weight:400;line-height:1.22;letter-spacing:-.015em;text-wrap:pretty;max-width:none}
.members{padding-block:var(--section-space)}
.members .section-heading>h2{grid-column:1/7}
.members .section-heading>p:not(.eyebrow){grid-column:8/-1;width:auto;max-width:none;font-size:var(--body-size)}
.member-feature{padding:48px 0 25px;align-items:start;min-height:255px}
.member-feature-logo{grid-column:1/7}
.member-feature>div:last-child{grid-column:8/-1}
.member-feature h3{font-size:clamp(27px,2.1vw,36px)}
.member-feature p{font-size:var(--body-small);max-width:none}
.member-feature .text-link{font-size:var(--label-size)}
.member-grid{gap:24px var(--grid-gutter)}
.member-button{min-width:0}
/* Join: one balanced content group, with a compact action below the copy. */
.join{min-height:clamp(560px,43vw,700px)}
.join-image{position:relative;min-height:0}
.join-image img{position:absolute;inset:-7.5% 0 auto;width:100%;height:115%;margin:0;object-fit:cover}
.join-copy{padding:clamp(64px,5vw,96px) clamp(32px,4vw,72px) clamp(64px,5vw,96px) var(--page-edge);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px}
.join h2{font-size:clamp(36px,3.25vw,54px);line-height:1.12;max-width:23ch;margin:0;text-wrap:balance}
.join-details{width:100%;max-width:42ch;margin:0;font-size:clamp(17px,1.05vw,19px);display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.join-details p{font-size:inherit;line-height:1.6;margin:0}
.join .button{width:auto;max-width:100%;min-width:160px;min-height:54px;padding:14px 28px;align-self:flex-start;justify-content:center;font-size:16px;line-height:1.4}
/* Fixed stepped artwork, revealed by four staggered left-to-right slides. */
.join-copy:before{content:none}
.join-copy>.join-pattern{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));pointer-events:none;opacity:.13}
.join-pattern-row{--stripe-width:12%;--pattern-shift:0%;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));min-height:0}
.join-pattern-row:nth-child(2){--stripe-width:34%}
.join-pattern-row:nth-child(3){--stripe-width:56%}
.join-pattern-row:nth-child(4){--stripe-width:78%}
.join-pattern-cell{display:block;overflow:hidden;min-width:0}
.join-pattern-strip{display:block;width:100%;height:100%;background:linear-gradient(to right,#e8e3ce 0 var(--stripe-width),transparent var(--stripe-width) 100%);transform:translate3d(var(--pattern-shift),0,0)}
.join-pattern[data-pattern-state=entering] .join-pattern-strip,.join-pattern[data-pattern-state=exiting] .join-pattern-strip{will-change:transform}
@media(prefers-reduced-motion:reduce){.join-pattern-strip{transform:none!important}}
.footer-nav{font-size:13px;gap:18px 25px;line-height:1.4}
.footer-bottom{font-size:12px}

/* About: the Alliance panorama spans the district; its story aligns to column 7. */
.about-intro,.why{padding-block:var(--section-space)}
.about-intro>.eyebrow{grid-column:1/5;font-size:var(--label-size)}
.about-intro>div{grid-column:5/-1}
.about-intro h2{font-size:var(--heading-size)}
.about-intro p:not(.eyebrow){font-size:var(--body-large);max-width:42ch;margin-top:40px}
/* Keep the heading and story together, alongside a single architectural photograph. */
.why{grid-template-rows:auto 1fr;row-gap:32px;align-items:start}
.why>h2{grid-column:1/6;grid-row:1}
.why-media{grid-column:7/-1;grid-row:1/3;position:relative;width:calc(100% + var(--page-edge));height:100%;min-height:clamp(560px,44vw,760px);margin:0;overflow:hidden}
.why-media img{--image-bleed:clamp(40px,6vh,72px);position:absolute;top:calc(-1 * var(--image-bleed));left:0;width:100%;height:calc(100% + 2 * var(--image-bleed));margin:0;object-position:58% center}
.why-text{grid-column:1/6;grid-row:2;max-width:42ch;margin:0;font-size:var(--body-large)}
.why-text p+p{margin-top:1.4em}
.alliance-scene{position:relative}
/* Real page content supplies the sticky runway and covers the photograph as it rises. */
.alliance-media{width:100%;margin:0;height:auto;aspect-ratio:2.15;position:sticky;top:0;z-index:0;overflow:hidden}
.alliance-foreground{position:relative;z-index:1;background:#fff;padding-top:clamp(40px,4.167vw,80px)}
.alliance{padding-bottom:var(--section-space);align-items:start;row-gap:0}
.alliance-image-mask{height:100%;overflow:hidden}
.alliance-image-mask img{height:100%;margin:0;object-position:50% 30%}
.alliance-copy{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:var(--grid-gutter);max-width:none;margin:0;padding:0}
.alliance-heading{grid-column:1/6}
.alliance-story{grid-column:7/-1}
.alliance-copy p:not(.eyebrow){font-size:var(--body-large);margin:0 0 32px}
.motion-paused .alliance-media{position:relative}
@media(prefers-reduced-motion:reduce){.alliance-media{position:relative}}
.vision{padding:40px 0 var(--section-space);align-items:center}
.vision>div:first-child{grid-column:1/9}
.vision-texts{gap:var(--grid-gutter);margin-top:40px}
.vision-texts h3{font-size:var(--body-size)}
.vision-texts p{font-size:var(--body-small)}
.vision-image{--image-bleed:calc(4vh + 24px);position:relative;overflow:hidden;grid-column:9/-1;width:calc(100% + var(--page-edge));height:clamp(280px,25vw,440px)}
.vision-image>img{position:absolute;top:calc(-1 * var(--image-bleed));left:0;width:100%;height:calc(100% + 2 * var(--image-bleed));margin:0;object-fit:cover;object-position:25% center;will-change:transform}
.focus-section{padding:40px 0 var(--section-space);align-items:center;overflow:visible}
.film{grid-column:1/7;min-width:0}
.film-card{top:64px}
.focus-copy{grid-column:8/-1;padding:0;max-width:none}
.focus-copy p:not(.eyebrow){font-size:var(--body-size);margin-top:32px}
.map-section{padding:40px 0 var(--section-space);align-items:start}
.map-copy{grid-column:1/5;padding-top:24px}
.map-copy p{max-width:none;font-size:var(--body-size);margin-top:32px}
.district-map{grid-column:5/-1;width:100%;min-width:0;min-height:0}
.district-map .dm-detail-description{font-size:var(--body-small)}
.district-map .dm-explore-label,.district-map .dm-select,.district-map .dm-detail-link{font-size:var(--label-size)}
.district-map .dm-detail-name{font-weight:500}
.district-map .dm-detail>*{min-width:0}

@media(min-width:701px) and (max-width:1199px){
  .intro-story>h2,.intro-image{grid-column:1/5}.intro-copy{grid-column:5/-1}
  .intro-image-mask{aspect-ratio:1.35}
  .priority-copy{grid-column:1/6}.priority-nav{grid-column:6/-1}
  .intro h2,.priority-copy h3{font-size:clamp(42px,5.4vw,58px)}
  .experience>.section-heading>div,.news>.section-heading>div{grid-column:1/6}
  .experience>.section-heading>.button,.news>.section-heading>.button{grid-column:6/-1}
  .focus-band .shell>.eyebrow{grid-column:1/3}.focus-band .shell>div{grid-column:3/-1}
  .members .section-heading>h2{grid-column:1/5}.members .section-heading>p:not(.eyebrow){grid-column:5/-1}
  .member-feature-logo{grid-column:1/5}.member-feature>div:last-child{grid-column:5/-1}
  .about-intro>.eyebrow{grid-column:1/3}.about-intro>div{grid-column:3/-1}
  .why>h2,.why-text{grid-column:1/5}
  .why-media{grid-column:5/-1;width:100%;min-height:580px}
  .alliance-media{aspect-ratio:2}.alliance-heading{grid-column:1/4}.alliance-story{grid-column:5/-1}
  .vision>div:first-child{grid-column:1/6}.vision-image{grid-column:6/-1}
  .film{grid-column:1/5;height:480px}.focus-copy{grid-column:5/-1}
  .film-card{width:205px;height:305px;margin-left:-102.5px}
  .map-copy{grid-column:1/4}.district-map{grid-column:4/-1}
  .footer-top{align-items:flex-start}.footer-nav{max-width:65%;gap:15px 20px}
}
@media(max-width:1199px){
  .district-map .dm-detail{grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .district-map .dm-detail-heading{grid-column:1;grid-row:1}
  .district-map .dm-detail-link{grid-column:2;grid-row:1}
  .district-map .dm-detail-description{grid-column:1/-1;grid-row:2;max-width:none}
  .district-map .dm-place-bar{flex-wrap:wrap;gap:10px}
  .district-map .dm-select{max-width:100%}
}
@media(max-width:700px){
  .intro,.priority-layout,.focus-band .shell,.members .section-heading,.member-feature,.about-intro,.why,.alliance,.vision,.focus-section,.map-section{row-gap:32px}
  .intro>*,.focus-band .shell>*,.members .section-heading>*,.member-feature>*,.about-intro>*,.why>*,.alliance>*,.vision>*,.focus-section>*,.map-section>*{grid-column:1/-1!important}
  .intro p,.members .section-heading p:not(.eyebrow),.about-intro p:not(.eyebrow){margin:0;max-width:none}
  .intro-story>h2,.intro-image{grid-column:1/-1}
  .intro-copy{grid-row:3;padding-top:0}
  .intro-image{margin:0}
  .intro-image-mask{aspect-ratio:1.6}
  .intro .intro-copy p{max-width:none}
  .intro-copy .intro-link{margin-top:24px}
  .priority-layout{display:flex;flex-direction:column-reverse;gap:32px}
  .priority-copy{min-height:300px}.intro h2,.priority-copy h3{font-size:clamp(35px,9.4vw,48px)}
  .priority-copy p{font-size:18px}.priority-top h2{font-size:32px}
  .priority-nav{gap:12px}.priority-nav button{font-size:12px;padding-left:0;line-height:1.3}
  .experience>.section-heading,.news>.section-heading{row-gap:24px}
  .experience>.section-heading>div,.news>.section-heading>div{grid-column:1/-1}
  .experience>.section-heading>.button,.news>.section-heading>.button{grid-column:1/-1;justify-self:end;margin:0}
  .section-heading p:not(.eyebrow){font-size:16px}
  /* Keep the photo's left edge, with extra reading room towards the page margin. */
  #experience-gallery,#news-gallery{--gallery-copy-width:calc((100% + var(--gallery-photo-width)) / 2 - var(--page-margin))}
  #experience-gallery .gallery-caption,#news-gallery .gallery-caption{margin-left:calc((100% - var(--gallery-photo-width)) / 2);margin-right:var(--page-margin)}
  #experience-gallery .gallery-caption{min-height:160px}
  #news-gallery .gallery-caption{min-height:260px}
  .focus-band h2{font-size:clamp(28px,7.4vw,34px);line-height:1.25;margin-top:0}
  .member-feature{min-height:0;padding:40px 0 24px;row-gap:28px}
  .member-feature-logo{height:110px}.member-feature-logo img{max-height:110px}
  .member-feature h3{font-size:28px}.member-feature p{font-size:16px}
  .member-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .member-button{min-height:90px;padding:16px}
  .join-copy{padding:56px var(--page-margin);gap:24px}
  .join-details{max-width:42ch;margin:0;font-size:16px;gap:24px}
  .join h2{font-size:clamp(32px,8.5vw,38px);line-height:1.12;max-width:22ch;margin:0}
  .join-image{height:350px}
  .footer-top{display:block}.footer-nav{max-width:none;font-size:13px}
  .footer-bottom{font-size:11px}.footer-contact{flex-wrap:wrap;gap:10px 24px}
  .about-intro h2{margin:0;font-size:var(--heading-size)}
  .about-intro p:not(.eyebrow){margin-top:28px}
  .why{grid-template-rows:auto auto auto}
  .why-media{grid-row:2;width:100%;height:auto;min-height:0;aspect-ratio:4/3;margin:0}
  .why-text{grid-row:3;max-width:none;margin:0;font-size:18px}
  .alliance-media{aspect-ratio:2400/1340}
  .alliance-foreground{padding-top:32px}
  .alliance-copy{row-gap:24px}.alliance-heading,.alliance-story{grid-column:1/-1}.alliance-copy p:not(.eyebrow){margin:0 0 28px;font-size:18px}
  .vision-texts{gap:24px;margin-top:30px}.vision-texts p{font-size:16px}
  .vision-image{width:100%;height:260px;margin:0}
  .film{width:100%;height:450px}.film-card{top:48px}.focus-copy{width:100%;padding:0}
  .focus-copy p:not(.eyebrow),.map-copy p{font-size:18px;margin-top:28px}
  .map-copy{padding:0}.district-map{margin:0;width:100%;min-height:0}
  .district-map .dm-detail-description{font-size:14px}
}
@media(max-width:420px){.vision-texts{grid-template-columns:1fr}.vision-texts p{max-width:none}}

/* Member marks use optically balanced visible dimensions in identical frames.
   Keep the original aspect ratios and equal scale on hover, focus and selection. */
.member-button{min-height:140px;padding:14px 10px;transition:background-color .2s}
.member-button:hover,.member-button:focus-visible{transform:none}
.member-logo-frame{width:min(100%,210px);aspect-ratio:21/11;display:flex;align-items:center;justify-content:center;flex:none}
.member-button .member-logo-frame img,.member-feature-logo .member-logo-frame img{width:var(--member-logo-width,82%);height:auto;max-width:100%;max-height:100%;object-fit:contain;animation:none}
.member-feature-logo{height:168px}
.member-feature-logo .member-logo-frame{width:min(100%,320px)}
@media(max-width:700px){
 .member-button{min-height:110px;padding:12px 6px}
 .member-feature-logo{height:130px}
 .member-feature-logo .member-logo-frame{width:min(100%,248px)}
}

/* Long, fine wordmarks need more width to carry the same visual weight. */
.member-button .member-logo-frame img{max-width:130%;flex:none}