/*
 * Foundation page (Phase F) — breadcrumbs (.breadcrumbs), Hero (.page-hero,
 * .category-hero-art) and the Contact section (.contact, .contact-channels
 * from about-page.css is NOT loaded here; this page reuses the same
 * .contact/.section-inner markup as about/index.html's CTA section as-is,
 * unstyled beyond what reset/base/components/layout already provide, for
 * exact visual parity with that section) are reused from product-pages.css
 * and layout.css — nothing here duplicates those selectors. This file adds
 * only the narrative section typography (Mission/Vision/Why Dentistry/DSEP/
 * Impact/Governance/Partnerships) and the four-item Core Pillars grid, for
 * which no existing component fit.
 */

.foundation-intro h2,
.foundation-mission-vision h2,
.foundation-why h2,
.foundation-dsep h2,
.foundation-impact h2,
.foundation-governance h2,
.foundation-partners h2{
font-size:clamp(30px,3.4vw,48px);
letter-spacing:-2px
}
.foundation-intro>p:not(.eyebrow),
.foundation-mission-vision>p:not(.eyebrow),
.foundation-why>p:not(.eyebrow),
.foundation-dsep>p:not(.eyebrow),
.foundation-impact>p:not(.eyebrow),
.foundation-governance>p:not(.eyebrow),
.foundation-partners>p:not(.eyebrow){
max-width:640px;
margin-top:16px;
color:var(--color-muted)
}

/* Content sections use the same uninterrupted white surface as About and
   History; section-pad provides the visual rhythm between narrative blocks. */
.foundation-intro,
.foundation-mission-vision,
.foundation-why,
.foundation-pillars,
.foundation-dsep,
.foundation-impact,
.foundation-governance,
.foundation-partners{background:#fff}
.foundation-hero p:not(.eyebrow){display:none}
.foundation-hero{position:relative;display:block;min-height:610px;overflow:hidden;background:var(--color-primary);color:#fff}
.foundation-hero::before{position:absolute;inset:0;content:"";background:radial-gradient(ellipse at 86% 50%,rgba(91,170,170,.28) 0 8%,transparent 8.3% 100%),repeating-radial-gradient(ellipse at 82% 55%,transparent 0 7rem,rgba(158,213,211,.16) 7.1rem 7.2rem,transparent 7.3rem 12rem)}
.foundation-hero>.foundation-hero-copy.section-inner{position:relative;z-index:1;width:100%;max-width:none;min-height:610px;padding:80px max(var(--page-padding),calc((100vw - 1280px) / 2));display:flex;flex-direction:column;justify-content:center}
.foundation-hero-copy h1{max-width:980px;font-size:clamp(42px,4.6vw,76px);letter-spacing:-4px}
.foundation-intro h2{max-width:680px}
.foundation-intro>p:not(.eyebrow){font-size:var(--text-base);line-height:1.5}
.foundation-mission-vision{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.foundation-mission,.foundation-vision{padding-top:var(--space-3);border-top:1px solid var(--color-line)}
.foundation-icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin:0 0 var(--space-2);color:var(--color-teal-dark)}
.foundation-icon svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}

/* Four Core Pillars — equal-weight 2x2 grid, styled like about-page.css's
   .expertise-grid article treatment but sized for four items instead of five. */
.pillars-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-top:var(--space-5)
}
.pillars-grid article{
padding:26px;
border:1px solid var(--color-line);
border-radius:var(--radius-lg)
}
.pillars-grid h3{
font-size:20px
}
.pillars-grid p{
margin-top:10px;
color:var(--color-muted);
font-size:13px
}

/* This page's draft Hero heading ("Advancing Dental Safety Through
   education, sustainability and innovation.") is longer than .page-hero's
   other current uses (About, History). Mirrors the same defensive ≤480px
   treatment already applied on the History page (history-page.css). */
@media (max-width:480px){
.page-hero h1{
overflow-wrap:break-word;
letter-spacing:-2.8px
}
}

/* .contact itself (background, centering, top/bottom padding) is owned by
   pages.css, which this page does not load — pages.css is homepage-specific
   (product grid, numbers, ESG two-column layout, resources/news grids) and
   loading it wholesale here would also pull in an unrelated --page-padding
   override at <=780px. These three rules are duplicated verbatim from
   pages.css instead, the same precedent already used by history-page.css for
   a pages.css-owned value it also needed (its <=480px h1 letter-spacing).
   .contact-channels is duplicated verbatim from about-page.css for the same
   reason: this page's Contact section reuses that markup pattern but does
   not load about-page.css. */
.contact{
padding-top:130px;
padding-bottom:130px;
background:var(--color-teal-tint);
color:var(--color-primary);
text-align:center
}
.contact h2{
margin-bottom:35px
}
.contact .foundation-contact-link{display:inline-flex}
.contact .foundation-contact-link~.contact-channels,.contact .foundation-contact-link~a.button{display:none}
.contact-channels{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px 24px;
margin-top:35px;
color:var(--color-muted);
font:11px var(--font-mono)
}
.contact-channels a{
color:var(--color-muted);
border-bottom:1px solid var(--color-line);
padding-bottom:2px
}
.contact-channels a:hover{
color:var(--color-primary)
}

@media (max-width:780px){
.foundation-hero>.foundation-hero-copy.section-inner{min-height:610px;padding:90px max(var(--page-padding),calc((100vw - 1280px) / 2)) 52px}
.foundation-mission-vision,
.pillars-grid{
grid-template-columns:1fr
}
}