/*
 * About Us page — full-bleed facility Hero, Who We Are pillars, Mission/Vision,
 * certifications, teaser cards and CTA/Contact card. Global header, footer,
 * typography, spacing and button foundations are reused from base.css,
 * components.css, layout.css and product-pages.css.
 */

.about-page{background:#fff}

.about-hero{
position:relative;
display:flex;
overflow:hidden;
background:var(--color-primary)
}
.about-hero-visual{
position:absolute;
inset:0;
z-index:0
}
.about-hero-visual::after{
position:absolute;
inset:0;
content:"";
background:linear-gradient(100deg,rgba(9,28,28,.80) 0%,rgba(9,28,28,.68) 42%,rgba(9,28,28,.30) 70%,rgba(9,28,28,.10) 100%)
}
.about-hero-visual img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center
}
.about-hero>.about-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
}
.about-hero-copy h1{
max-width:730px
}

.about-who,
.about-mission-vision,
.about-certifications,
.about-teasers,
.about-regulatory{
background:#fff
}

/* Regulatory references are informational links, not certification badges. */
.about-regulatory-intro{max-width:48rem}
.about-regulatory-intro p{margin-top:var(--space-3);color:var(--color-muted);line-height:1.6}
.regulatory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-5)}
.regulatory-item{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-lg);color:var(--color-primary);text-decoration:none;transition:border-color .2s ease}
.regulatory-item:hover,.regulatory-item:focus-visible{border-color:var(--color-teal-dark)}
.regulatory-logo{display:block;width:auto;max-width:100%;height:76px;object-fit:contain;object-position:left center}
.regulatory-logo-dgs{max-width:210px}
.regulatory-logo-infarmed{max-width:235px}
.regulatory-item>span:not(.regulatory-link){color:var(--color-muted);line-height:1.5}
.regulatory-link{margin-top:auto;padding-top:var(--space-3);color:var(--color-teal-dark);font-weight:600}
@media (max-width:600px){.regulatory-grid{grid-template-columns:1fr}}


.about-who h2,
.about-who>p:not(.eyebrow){
max-width:44rem
}
.about-who>p:not(.eyebrow){
margin-top:18px;
color:var(--color-muted)
}
.about-pillars{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--space-3);
margin-top:var(--space-5)
}
.about-pillars article{
border-top:1px solid var(--color-line);
padding-top:var(--space-3)
}
.about-pillar-icon{
display:block;
width:1.5rem;
height:1.5rem;
margin-bottom:var(--space-2);
color:var(--color-teal-dark)
}
.about-pillar-icon svg{
display:block;
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round
}
.about-pillars h3{
margin:var(--space-2) 0;
font-size:1.05rem
}
.about-pillars p{
margin:0;
color:var(--color-muted);
font-size:.9rem;
line-height:1.55
}

.mission-vision-statements{
display:grid;
grid-template-columns:1fr;
gap:var(--space-5);
margin-top:0
}
.about-mission-vision{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(2rem,6vw,8rem);
padding-top:0
}
.mission-vision-text{
padding-top:var(--space-4)
}
.about-mission-vision-art{
min-height:26.875rem
}
.mission-vision-statements article{
padding-top:0
}
.mission-vision-statements h2{
margin:var(--space-2) 0;
font-size:var(--text-lg);
font-weight:700;
letter-spacing:normal;
word-spacing:normal
}
.mission-vision-statements .about-pillar-icon{
width:1.75rem;
height:1.75rem
}
.mission-vision-statements p{
margin-top:var(--space-3);
font-size:var(--text-base);
font-weight:400;
line-height:1.55
}

.about-certifications{
background:var(--color-mist)
}
.about-certifications>h2{
margin-top:var(--space-2)
}
.certification-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--space-3);
margin-top:var(--space-5)
}
.certification-item{
display:flex;
flex-direction:column;
align-items:flex-start;
min-height:13rem;
padding-top:var(--space-3);
border-top:1px solid var(--color-line)
}
.certification-icon{
display:block;
width:2.25rem;
height:2.25rem;
margin-bottom:var(--space-3);
color:var(--color-teal-dark)
}
.certification-icon svg{
display:block;
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round
}
.certification-item h3{
font-size:1.05rem
}
.certification-item p{
margin-top:4px;
color:var(--color-muted);
font-size:var(--text-sm);
line-height:1.45
}
.certification-item .text-link{
margin-top:auto;
padding-top:var(--space-3)
}

.about-teasers{
background:#fff
}
.teaser-grid{
display:grid;
grid-template-columns:1fr;
gap:12px
}
.teaser-card{
padding:26px;
background:#fff;
border:1px solid var(--color-line);
border-radius:var(--radius-lg)
}
.teaser-card h2{
margin-top:14px;
font-size:24px;
letter-spacing:-1px
}
.teaser-card>p:not(.eyebrow){
margin-top:12px;
color:var(--color-muted);
font-size:13px
}
.teaser-card .text-link{
display:inline-block;
margin-top:var(--space-3)
}

/* .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{
padding-top:130px;
padding-bottom:130px;
background:var(--color-primary);
color:#fff;
text-align:center
}
.about-contact-card{
max-width:44rem;
margin:0 auto;
padding:clamp(2rem,5vw,4rem);
border-radius:var(--radius-lg);
background:var(--color-paper);
color:var(--color-primary);
box-shadow:0 1.5rem 4rem rgba(0,0,0,.18)
}
.about-contact-card h2{
margin-bottom:35px
}
.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)
}
.contact-address{
margin-top:18px;
color:var(--color-muted);
font:11px var(--font-mono)
}

@media (max-width:780px){
.about-hero>.about-hero-copy.section-inner{
min-height:610px;
padding:90px max(var(--page-padding),calc((100vw - 1280px) / 2)) 52px
}
.about-pillars,.about-mission-vision,.teaser-grid{
grid-template-columns:1fr
}
.about-mission-vision{
gap:var(--space-5)
}
.about-mission-vision-art{
min-height:17.5rem
}
.certification-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}
}

@media (max-width:480px){
.certification-grid{
grid-template-columns:1fr
}
.certification-item{
min-height:0
}
.certification-item .text-link{
margin-top:var(--space-3)
}
}
.about-page .category-hero-art>span{color:var(--color-muted)}