for the same reason as on . The panels themselves already scroll on the y axis, so hidden is correct there and only takes the sideways axis away from them. */ main{overflow-x:clip;} section,.section,[class*="section"]{overflow-x:hidden;} /* Layout wrappers only. Their caps (940-1280px) are all wider than any phone, so pinning them to 100% here changes nothing but guarantees they can never contribute width. Prose max-widths are left alone: they are reading measures, not overflow. */ .s-inner,.roadmap-inner,.contact-inner,.map-wrap,.map-pan,.map-pan-hint{max-width:100%;} /* Let every track shrink below the intrinsic width of its content. */ .hero-grid>*,.problem-split>*,.pillars-grid>*,.process-grid>*,.proc-row2>*, .serve-grid>*,.resource-grid>*,.about-grid>*,.contact-inner>*,.join-grid>*, .client-profiles>*,.phase-block>*,.outcome-row>*,.how-grid>*,.tier-grid>*, .advisor-grid>*,.eco-national-grid>*,footer>*{min-width:0;} /* Addresses and URLs are the one kind of content with no break opportunity of its own, so they get an explicit one. */ .direct-mail a,.foot-mail,.res-url{overflow-wrap:anywhere;} /* 2. LAYOUT ------------------------------------------------------------ */ /* Nav. The drawer is a fixed full-height panel, but body{overflow:hidden} cannot hold the page still behind it because the scroll container is , not — the snap-scroll block puts it there. */ nav{padding:0 16px;} .nav-brand{min-width:0;} .nav-brand .brand-word{font-size:14px;letter-spacing:.6px;} html:has(body.nav-open){overflow:hidden;} /* Hero. The title's floor was 48px, which is wider than a 320px screen for a word like "Connecting"; the new ramp meets the desktop value exactly at 768px so nothing jumps at the breakpoint. */ #hero{padding:32px 20px 48px;} .hero-grid{gap:36px;} .hero-title{font-size:clamp(32px,8.5vw,48px);line-height:1.02;margin-bottom:20px;} .hero-body{font-size:15px;line-height:1.75;margin-bottom:28px;} .hero-btns{gap:10px;} .hero-btns .btn-red,.hero-btns .btn-ghost{flex:1 1 auto;text-align:center;} /* Stats. Already a vertical stack; the side padding and the label clamp were desktop measurements that wasted a third of a phone screen. */ .hero-stats{width:100%;} .hero-stat{padding:16px 0;} .stat-n{font-size:32px;} .stat-l{max-width:none;font-size:13px;} /* "Emma Seymour" at 40px is wider than the card it sits in on a 320px screen; the ramp meets the desktop value at the breakpoint. */ .about-name{font-size:clamp(28px,8vw,40px);} /* Ticker strip. Both marquee groups keep identical metrics, so the track still travels exactly one group-width and the loop stays seamless. */ .strip{padding:16px 20px;gap:16px;} .strip.marquee{width:100%;max-width:100%;padding:0;overflow:hidden;} .marquee-group{gap:22px;padding:15px 11px;} .marquee-item{font-size:11px;letter-spacing:1.6px;} /* Section rhythm and card padding. Desktop card padding ate up to 88px of a 320px screen, leaving too little for the text to wrap into. */ .s,#roadmap,#contact,#ecosystem,#join,#wa-state{padding:56px 20px;} .h2{font-size:clamp(26px,7vw,34px);} .p-side,.pillar-card,.proc,.join-form,.about-left,.how-step,.tier-card, .forge-story-card{padding:26px 22px;} .client-card{padding:24px 22px;} .phase-cell{padding:20px;} .outcome-cell,.serve-card{padding:22px 20px;} .eco-state-resources{padding:22px 18px;} /* Grids still holding two tracks at this width. */ .serve-grid,.process-grid,.proc-row2,.resource-grid{grid-template-columns:1fr;} .serve-grid{gap:14px;} .resource-grid{gap:24px;} .proc{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);} .proc:last-child{border-bottom:none;} /* Rows that were a single non-wrapping line. */ .eco-tabs,.county-tabs{flex-wrap:wrap;} .eco-tab,.county-tab{flex:1 1 auto;text-align:center;padding:10px 12px;font-size:11px;letter-spacing:1px;} .coming-soon-banner{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 20px;} .about-stat-row{flex-wrap:wrap;gap:20px 28px;} .eco-legend{gap:10px 16px;} .pathway-btns{gap:8px;} /* Footer. Ten links on one flex line ran roughly 700px wide — the single largest overflow on the site. They stack as full-width rows instead. */ footer{padding:24px 20px;align-items:stretch;gap:20px;} .foot-links{flex-direction:column;gap:0;width:100%;} .foot-links li{border-bottom:1px solid rgba(255,255,255,.07);} .foot-links li:last-child{border-bottom:none;} .foot-links a{display:block;width:100%;padding:11px 0;font-size:13px;} .foot-meta{width:100%;align-items:flex-start;} /* 3. FORM CONTROLS ----------------------------------------------------- */ /* !important is needed only because the Forge signup form carries its font size in inline style attributes, which no selector can outrank. */ .jf-input,.jf-select,.jf-textarea, .form-field input,.form-field select,.form-field textarea, .advisor-field input,.advisor-field select,.advisor-field textarea, input,select,textarea{font-size:16px!important;} }