/* Bootstrap supplies containers, responsive gutters and spacing utilities. */
:root{--site-font:'Manrope',sans-serif;--section-heading:clamp(36px,4.2vw,56px);--copy-size:13px;--copy-leading:1.85}
body,h1,h2,h3,h4,h5,h6,button,input,select,textarea,.brand,.loader-wordmark{font-family:var(--site-font)}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.035em}
.hero h1{font-size:clamp(44px,4.9vw,74px);line-height:1.13;letter-spacing:-.045em;margin:24px 0}
.about-us h2,.objectives-copy h2,.work h2{font-size:var(--section-heading);line-height:1.18;letter-spacing:-.035em;margin:0}
.about-us h2{white-space:nowrap}.about-us h2 em{display:inline}
em{font-family:inherit;font-weight:inherit}
.about-copy p,.objectives-copy>p:not(.eyebrow){font-size:var(--copy-size);line-height:var(--copy-leading);color:#c5b7af}
.about-copy p+p,.objectives-copy>p+p{margin-top:0}
.objectives-copy>.eyebrow,.work-head>.eyebrow{margin-bottom:16px}
.about-grid{column-gap:48px;grid-template-columns:5fr 7fr}
.about-copy{max-width:none;padding-right:0}
.objectives-copy{width:46%;max-width:none}
.about-us,.objectives{padding-top:112px}
.about-us{row-gap:24px;padding-bottom:48px}
.objectives{padding-bottom:48px}
.work{padding-top:112px;padding-bottom:48px;column-gap:48px}
.work-head p:last-child{margin-top:24px;line-height:var(--copy-leading)}
.state-detail h3{font-size:32px;line-height:1.2;margin:16px 0}
.state-detail h4{font-size:22px;line-height:1.3}
.state-detail{padding-top:24px}
footer{padding-top:48px;padding-bottom:32px;gap:48px}
#site-header nav{gap:32px}
@media(max-width:900px){.about-grid{column-gap:32px;grid-template-columns:5fr 7fr}}
@media(max-width:600px){
 :root{--copy-size:12px;--section-heading:36px}
 .hero h1{font-size:clamp(38px,10.5vw,50px);line-height:1.15}
 .about-us,.objectives,.work{padding-top:104px}
 .about-us{padding-bottom:40px;row-gap:24px}
 .about-grid{grid-template-columns:1fr;gap:24px}
 .objectives{padding-bottom:calc(26svh + 100px)}
 .objectives-copy{width:100%}
 .work{padding-bottom:24px}
 .work h2{font-size:36px}
 .work-head p:last-child{margin-top:16px}
 #site-header nav{gap:16px}
 footer{gap:32px}
}

/* Centered Bootstrap containers retain a full-bleed opaque About Us surface. */
#site-content{overflow-x:clip}
#site-header.container{left:50%;right:auto;transform:translateX(-50%);margin:0}
html.is-pinned-scene #site-header.container{right:auto}
.about-us{overflow:visible}
.about-us::before{content:"";position:absolute;top:0;bottom:0;left:calc((100vw - 100%)/-2);right:calc((100vw - 100%)/-2);background:#170c10;z-index:-1;pointer-events:none}

/* A portrait particle study on the left, with the complete About story on the right. */
.about-grid{grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.about-copy{height:auto;max-height:none;overflow:visible}
.about-heading h2{margin:0}
.about-people{position:relative;margin:0;width:100%;height:440px;isolation:isolate;touch-action:pan-y}
#people-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.portrait-circle{position:absolute;left:var(--portrait-x);top:var(--portrait-y);width:var(--portrait-size);aspect-ratio:1;display:block;border-radius:50%;border:1px solid #d2ae6b99;padding:3px;background:#38231c;box-shadow:0 0 24px #bc88431a;will-change:transform;transform:translate(-50%,-50%);overflow:hidden}
.portrait-circle img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;filter:saturate(.75) sepia(.15);transition:filter .6s ease}
.about-people:hover .portrait-circle img{filter:saturate(.95) sepia(.08)}
.about-people figcaption{position:absolute;left:0;right:0;bottom:-28px;text-align:center;font-size:7px;letter-spacing:1.7px;color:var(--gold)}
@media(max-width:900px) and (min-width:601px){.about-grid{gap:32px}.about-people{height:360px}}
@media(max-width:600px){.about-grid{grid-template-columns:1fr;grid-template-rows:auto auto;gap:56px}.about-people{height:320px;max-width:360px;justify-self:center}.about-people figcaption{font-size:6px;letter-spacing:1.3px}.about-copy{margin:0}}
@media(prefers-reduced-motion:reduce){.portrait-circle{will-change:auto}}

.about-people.is-particle-system .portrait-circle{opacity:0;will-change:transform,opacity}

@media(prefers-reduced-motion:reduce){.about-people.is-particle-system .portrait-circle{will-change:auto}}

/* Real image surfaces dissolve into sampled photo pixels under the pointer. */
#people-dust{z-index:3}
.portrait-circle{z-index:1}
.portrait-circle .photo-surface{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%;pointer-events:none;filter:saturate(.8) sepia(.12)}
.portrait-circle.has-photo-surface img{opacity:0}
.about-people figcaption{z-index:4}

/* The About dust crosses the section freely; only the photo bodies use the local layout. */
#people-dust{position:fixed;inset:0;width:100vw;height:100svh;pointer-events:none;z-index:3}

/* Work by State: a shared headline, generous map and considered local detail. */
.work{height:auto;min-height:max(800px,100svh);max-height:none;grid-template-columns:minmax(0,1fr) minmax(280px, .68fr);grid-template-rows:auto minmax(400px,1fr);gap:32px 48px;padding-top:116px;padding-bottom:40px}
.work-head{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:1fr .68fr;column-gap:48px;align-items:end}
.work-head>.eyebrow{grid-column:1/-1;margin-bottom:14px}
.work h2{font-size:clamp(38px,4.1vw,60px);line-height:1.12}
.work-head .work-intro{font-size:12px;line-height:1.9;margin:0 0 5px;max-width:330px;color:#b4a39d}
.explorer-space{position:relative;grid-column:1;grid-row:2;min-height:400px;border-top:1px solid #d2ae6b38}
.map-context{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;gap:16px;font-size:7px;letter-spacing:1.4px;color:#ac9480}
.map-context span:first-child{color:var(--gold)}
.map-context i{display:inline-block;width:4px;height:4px;background:var(--gold);border-radius:50%;margin-right:6px;box-shadow:0 0 10px #d2ae6b}
.state-panel{grid-column:2;grid-row:2;align-self:start;margin:0;padding:26px;background:linear-gradient(145deg,#2b1b20b3,#1c1014cc);border:1px solid #d2ae6b33;border-top-color:#d2ae6b88;overflow:visible;max-height:none;border-radius:2px}
.state-panel label{font-size:8px;letter-spacing:2px;margin-bottom:12px}
.state-panel select{background:#170c10cc;border-color:#d2ae6b45;padding:14px 12px;font-size:11px;border-radius:2px;cursor:pointer}
.state-detail{padding-top:24px}
.state-detail>.eyebrow{font-size:7px;letter-spacing:2px}
.state-detail h3{font-size:32px;margin:12px 0;line-height:1.2}
.state-detail h4{font-size:21px;line-height:1.35;margin-bottom:12px}
.state-detail>p:not(.eyebrow),#state-work{font-size:11px;line-height:1.9}
.detail-label{border-top:1px solid #d2ae6b26;padding-top:22px;margin-top:22px;font-size:7px;letter-spacing:1.7px}
.tags{gap:6px;margin-top:20px}.tags span{padding:7px 8px;font-size:7px;background:#d2ae6b08;border-color:#d2ae6b26}
.state-detail .demo-note{margin-top:24px;font-size:8px!important;line-height:1.8}
.state-panel .text-link{margin-top:22px;width:100%;justify-content:space-between;font-size:10px;padding-bottom:9px}
.map-stage[data-explorer="true"] .hover-name{top:8px;left:50%}
.map-stage[data-explorer="true"] .map-tools{bottom:-32px;border:1px solid #d2ae6b26;background:#211419cc;padding:5px 16px}
@media(max-width:1100px) and (min-width:601px){.work,.work-head{column-gap:28px;grid-template-columns:minmax(0,1fr) 300px}.state-panel{padding:22px}.work-head .work-intro{font-size:11px}.map-context{font-size:6px;letter-spacing:1px}.map-context span:last-child{display:none}}
@media(max-width:600px){
 .work{height:auto;min-height:100svh;max-height:none;grid-template-columns:1fr;grid-template-rows:auto 410px auto;gap:28px;padding-top:108px;padding-bottom:40px}
 .work-head{display:block;grid-column:1;grid-row:1}.work-head>.eyebrow{margin-bottom:14px}.work h2{font-size:40px}.work-head .work-intro{margin:20px 0 0;font-size:11px;max-width:320px}
 .explorer-space{grid-column:1;grid-row:2;min-height:0}.map-context{font-size:6px;letter-spacing:.9px;gap:10px}.map-context span:last-child{font-size:5px}
 .state-panel{grid-column:1;grid-row:3;padding:24px;overflow:visible}.state-detail h3{font-size:30px}
}

/* Controls appear with the completed explorer, after the dust has settled. */
.map-stage[data-explorer="true"] .map-tools{transition:opacity .6s ease}
.map-stage[data-explorer="true"][data-interactive="false"] .map-tools{opacity:0;pointer-events:none}
.map-stage[data-explorer="true"][data-interactive="false"] .hover-name{opacity:0}

/* Keep banner progress and controls together at the bottom center on every screen. */
.map-stage[data-explorer="false"] .map-tools{left:50%;transform:translateX(-50%);bottom:var(--banner-controls-bottom,24px);gap:20px;z-index:4}
.map-stage[data-explorer="false"] .assembly-meter{left:50%;transform:translateX(-50%);bottom:calc(var(--banner-controls-bottom,24px) + 46px);z-index:4}

/* Consistent uppercase titles, including state and project headings. */
h1,h2,h3,h4,h5,h6{text-transform:uppercase}