/* Keep reveal transforms inside their own text boxes so they do not widen mobile pages. */
.motion-ready [data-reveal="letters"]{overflow:clip}
html,body{max-width:100%;overflow-x:clip}
.shell,.section,.section-head,.hero,.page-hero,.footer,.site-header,.contact-banner{min-width:0;max-width:100%}
.section-head>*,.about-grid>*,.process-layout>*,.mission-section>*,.article-layout>*,.generic-page>*,.contact-page>*,.detail-grid>*,.detail-card>*,.program-grid>*,.service-grid>*,.footer-main>*,.form-two>*{min-width:0}
.section :is(h1,h2,h3,p,a,span),.page-hero :is(h1,p),.contact-banner :is(h2,p),.footer :is(h2,h3,p,a){overflow-wrap:break-word}
.contact-form input,.contact-form textarea,.admin-form input,.admin-form textarea,.admin-form select{min-width:0;max-width:100%}
.video-tabs{max-width:100%;overscroll-behavior-inline:contain}
@media(max-width:760px){
  .section{padding-block:clamp(54px,10vw,70px)}
  .site-header,.has-hero>.site-header{max-width:calc(100% - 20px)}
  .hero-content{max-width:calc(100% - 12%)}
  .hero-actions .button{max-width:100%;white-space:normal;text-align:center}
  .detail-card>div,.service-card,.program-content,.contact-form{min-width:0}
  .footer-main{gap:32px}
}
@media(max-width:380px){
  .brand{gap:6px}.brand img{width:44px;height:44px}.brand strong{font-size:16px}.brand small{font-size:6px;letter-spacing:.1em}
  .site-header .header-inner{gap:9px}.site-header .menu-toggle{flex:none}
  .section h2,.page-hero h1{font-size:clamp(32px,9vw,42px)}
  .hero h1{font-size:clamp(36px,10.5vw,42px)}
  .hero-content{left:6%;right:6%}
  .footer-cta h2{font-size:31px}
}