.about-container { width: min(calc(100% - (2 * var(--gutter))), var(--container)); margin-inline: auto; }
.about-hero { background: linear-gradient(125deg, #069a43 0%, #07873e 58%, #057a37 100%); }
.about-intro { padding: var(--section-space) 0; }
.about-intro-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(22rem, 1.12fr); gap: clamp(2.5rem, 7vw, 6.5rem); align-items: center; }
.about-copy h2, .about-section-heading h2, .about-cta h2 { margin: 0; color: var(--color-forest); font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.about-copy p, .about-section-heading p { margin: 1rem 0 0; color: var(--color-muted); line-height: 1.8; }
.about-main-media { aspect-ratio: 16 / 11; overflow: hidden; border-radius: clamp(1.2rem, 3vw, 2rem); background: #e7e7e7; box-shadow: var(--shadow-soft); }
.about-main-media img, .about-main-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.about-video-facade { position: relative; width: 100%; height: 100%; overflow: hidden; color: #fff; background: linear-gradient(135deg, #087e3b, #034b27); }
.about-video-facade > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,28,16,.12), rgba(1,28,16,.58)); }
.about-video-facade button { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: clamp(4rem, 8vw, 5.5rem); aspect-ratio: 1; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: #fff; background: rgba(6,154,67,.92); cursor: pointer; box-shadow: 0 18px 45px rgba(0,30,16,.32); transform: translate(-50%, -50%); transition: background var(--transition), transform var(--transition); }
.about-video-facade button:hover { background: #057a37; transform: translate(-50%, -50%) scale(1.05); }
.about-video-facade button:focus-visible { outline-color: #fff; }
.about-video-facade button span { width: 0; height: 0; margin-left: .3rem; border-top: .7rem solid transparent; border-bottom: .7rem solid transparent; border-left: 1.05rem solid currentColor; }
.about-video-facade > p { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; z-index: 2; margin: 0; color: #fff; font-size: .74rem; font-weight: 700; text-align: center; }
.about-media-placeholder { display: grid; width: 100%; height: 100%; place-content: center; padding: 2rem; color: #54625a; text-align: center; }
.about-media-placeholder span { color: var(--color-primary); font-size: clamp(2.3rem, 7vw, 5rem); font-weight: 700; letter-spacing: .08em; }
.about-media-placeholder p { margin: .6rem 0 0; }
.about-purpose { padding: clamp(1rem, 3vw, 2rem) 0 var(--section-space); }
.about-purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.about-purpose article { padding: clamp(1.8rem, 4vw, 3.25rem); border: 1px solid #d5d5d5; border-radius: var(--radius-lg); background: #f5f5f5; }
.about-purpose article > span, .about-values-grid span { color: var(--color-primary); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.about-purpose h2 { margin: 1.5rem 0 .75rem; color: var(--color-forest); font-size: clamp(1.55rem, 3vw, 2.15rem); }
.about-purpose p { margin: 0; color: #47564e; line-height: 1.75; }
.about-values { padding: var(--section-space) 0; background: #e7e7e7; }
.about-section-heading { max-width: 48rem; }
.about-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.about-values-grid article { min-height: 9.5rem; padding: 1.4rem; border-radius: var(--radius-md); background: #fff; }
.about-values-grid h3 { margin: 2.2rem 0 0; color: var(--color-forest); font-size: 1.1rem; }
.about-cities { padding: var(--section-space) 0; }
.about-cities-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(20rem, 1.2fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.about-cities ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.about-cities li { padding: 1rem 1.15rem; border-left: 3px solid var(--color-primary); color: var(--color-forest); background: #f4f4f4; font-weight: 700; }
.about-mateco { padding: 0 0 var(--section-space); }
.about-mateco-grid { display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(0, 1fr); gap: clamp(2.5rem, 8vw, 7rem); align-items: center; padding: clamp(2rem, 5vw, 4.5rem); overflow: hidden; border-radius: clamp(1.5rem, 3vw, 2.25rem); background: #f3f3f3; }
.about-mateco-image { min-height: 30rem; align-self: stretch; }
.about-mateco-image img { width: 100%; height: 100%; max-height: 34rem; object-fit: contain; object-position: center bottom; }
.about-cta { padding: 0 var(--gutter) var(--section-space); background: #fff; }
.about-cta-card { position: relative; display: flex; min-height: 22rem; align-items: center; justify-content: space-between; gap: clamp(2rem, 7vw, 6rem); padding: clamp(2.25rem, 6vw, 5rem); overflow: hidden; border: 1px solid #d6d6d6; border-radius: clamp(1.5rem, 3vw, 2.4rem); background: linear-gradient(135deg, #f7f7f7, #e7e7e7); box-shadow: var(--shadow-soft); }
.about-cta-card::after { position: absolute; top: -12rem; right: -9rem; width: 28rem; aspect-ratio: 1; border: 1px solid rgba(6,154,67,.2); border-radius: 50%; background: radial-gradient(circle, rgba(6,154,67,.08), transparent 68%); content: ""; }
.about-cta-card > * { position: relative; z-index: 1; }
.about-cta .eyebrow { color: var(--color-primary-dark); }
.about-cta h2 { max-width: 43rem; color: var(--color-forest); }
.about-cta-button { flex: 0 0 auto; min-width: 13rem; margin: 0; color: #fff; box-shadow: 0 12px 30px rgba(5,122,55,.2); }
.about-cta-button span { transition: transform var(--transition); }
.about-cta-button:hover span { transform: translateX(.25rem); }
.about-body .public-footer { margin-top: 0; }
@media (max-width: 56rem) {
    .about-intro-grid, .about-cities-grid { grid-template-columns: 1fr; }
    .about-purpose-grid { grid-template-columns: 1fr; }
    .about-mateco-grid { grid-template-columns: minmax(14rem, .6fr) minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 42rem) {
    .about-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-cities ul { grid-template-columns: 1fr; }
    .about-mateco-grid { grid-template-columns: 1fr; padding-inline: 1.25rem; }
    .about-mateco-image { min-height: 24rem; order: 2; }
    .about-cta-card { min-height: 0; align-items: flex-start; flex-direction: column; }
    .about-cta .public-button { width: 100%; }
}
@media (max-width: 24rem) { .about-values-grid { grid-template-columns: 1fr; } }