.about-hero{display:grid;grid-template-columns:1fr 1fr;background:#e0eeee}
.about-hero-copy{padding:64px var(--gutter);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.about-hero .eyebrow{color:#3e6468}
.about-hero h1{font-size:clamp(42px,4.5vw,68px);line-height:1.08;letter-spacing:-.025em;margin:24px 0}
.about-hero p{font-size:17px;max-width:44ch}
.about-hero figure{margin:0;min-height:590px;overflow:hidden}
.about-hero img{width:100%;height:100%;object-fit:cover}
.about-intro{max-width:930px;margin:auto;padding:80px var(--gutter);text-align:center}
.about-intro h2{font-size:clamp(30px,3vw,42px);margin-bottom:24px}
.about-intro p{font-size:16px}
.about-materials{padding:0 var(--gutter) 80px}
.about-materials>header{padding-bottom:32px;border-bottom:1px solid var(--line)}
.about-materials>header h2{margin-top:12px}
.material-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;margin-top:40px}
.material-story{padding-left:24px;border-left:2px solid #a9d8d8}
.material-story .eyebrow{color:#46666a}
.material-story h3{font-size:30px;margin:12px 0 16px}
.material-story p{font-size:16px;max-width:56ch}
.about-note{font-size:13px;color:var(--muted);margin-top:36px;max-width:80ch}
.about-signature{display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}
.about-signature-image{background:var(--product);display:flex;align-items:center;justify-content:center;padding:40px}
.about-signature-image img{width:min(100%,450px);height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.about-signature-copy{padding:64px var(--gutter);align-self:center}
.about-signature-copy h2{font-size:clamp(32px,3vw,44px);margin:16px 0 24px}
.about-signature-copy p{font-size:16px}
.about-signature-copy .button{margin-top:28px}
.about-ending{text-align:center;padding:72px var(--gutter)}
.about-ending h2{font-size:clamp(34px,4vw,52px);margin-bottom:20px}
.about-ending p{font-size:16px;max-width:62ch;margin:auto}
@media(max-width:700px){
 .about-hero,.about-signature{grid-template-columns:1fr}
 .about-hero-copy{padding:40px 24px}
 .about-hero h1{font-size:44px}
 .about-hero figure{min-height:0;aspect-ratio:4/3}
 .about-hero p{font-size:16px}
 .about-intro{padding:48px 24px;text-align:left}
 .about-materials{padding:0 24px 48px}
 .material-grid{grid-template-columns:1fr;gap:32px}
 .material-story h3{font-size:28px}
 .about-signature-image{padding:24px}
 .about-signature-image img{max-width:310px}
 .about-signature-copy{padding:40px 24px}
 .about-ending{padding:48px 24px;text-align:left}
}