/* =========================================================
   Aroha — ABOUT / FINAL PDF LAYOUT
   Page-specific only; global header/footer remain unchanged.
========================================================= */

.page-about { background: #fff; }
.page-about main { overflow: clip; }
.page-about main p { line-height: 1.46; }
.page-about .about-kicker { display: block; font: 600 10px/1.45 var(--font-body); letter-spacing: .22em; text-transform: uppercase; }
.about-shell { width: min(1440px, calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }

/* HERO: left editorial block + finished image on the right */
.about-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(460px, 41vw, 720px); background: #fff; }
.about-hero-copy { align-self: center; width: min(620px, calc(100% - 2 * var(--page-gutter))); margin-inline: auto; padding-block: 85px; }
.about-hero-copy h1 { font-size: clamp(59px, 5.3vw, 100px); line-height: .97; letter-spacing: -.035em; }
.about-hero-copy .about-hero-lead { margin: 13px 0 25px; font-family: var(--font-heading); font-size: clamp(28px, 2.6vw, 49px); color: var(--color-text); line-height: 1.06; }
.about-hero-copy p:not(.about-hero-lead) { max-width: 535px; font-size: clamp(12px, .92vw, 15px); }
.about-hero-image { min-height: 460px; background-color: #fff; background-image: url('assets/about-hero.png'); background-position: center; background-size: cover; }

/* OUR STORY: centered heading, two equal columns */
.about-story { background: var(--color-paper); padding: clamp(100px, 10vw, 176px) var(--page-gutter) clamp(105px, 10vw, 185px); text-align: center; }
.about-story-inner { max-width: 890px; margin-inline: auto; }
.about-story h2 { margin-top: 12px; font-size: clamp(64px, 6.2vw, 112px); line-height: .91; text-transform: uppercase; }
.about-story-subtitle { font: 400 clamp(28px, 2.4vw, 44px)/1.1 var(--font-heading); margin-top: 10px; }
.about-story-columns { margin-top: clamp(60px, 5.5vw, 95px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 95px); text-align: left; }
.about-story-columns p { font-size: clamp(12px, .94vw, 15px); margin-bottom: 20px; }

/* VERONICA: portrait directly under name / bio on right */
.about-veronica { padding-block: clamp(95px, 9vw, 158px); background: #fff; }
.about-veronica-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(80px, 11vw, 190px); align-items: start; }
.about-veronica-identity h2 { margin: 15px 0 13px; font-size: clamp(70px, 6.5vw, 120px); letter-spacing: -.04em; line-height: .86; }
.about-role { font: 500 13px/1.4 var(--font-body); margin-bottom: 35px; }
.about-veronica-photo { width: min(100%, 405px); aspect-ratio: 1.08/1; margin-top: 30px; background: #e4ded8 url('assets/founder-veronica-kohlbecker.jpg') center / cover no-repeat; }
.about-veronica-bio { padding-top: clamp(40px, 6vw, 105px); max-width: 690px; }
.about-veronica-bio p { font-size: clamp(12px, 1vw, 15px); margin-bottom: 19px; }
.about-veronica-bio strong { font-weight: 600; }

/* ANDREA: copy left, portrait right */
.about-andrea { background: var(--color-paper); padding-block: clamp(105px, 10vw, 175px); }
.about-andrea-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(100px, 12vw, 220px); }
.about-andrea-copy { max-width: 600px; }
.about-andrea-copy h2 { font-size: clamp(70px, 6.5vw, 122px); line-height: .88; letter-spacing: -.04em; margin: 18px 0 32px; }
.about-andrea-copy p { font-size: clamp(12px, 1vw, 15px); }
.about-andrea-photo { justify-self: center; width: min(100%, 410px); aspect-ratio: 1.02 / 1; background: #d7c6af url('assets/founder-andrea-maslovar.jpg') center / cover no-repeat; }

/* COLLECTIVE: the actual PDF has art on the LEFT and the list on the RIGHT */
.about-collective { padding-block: clamp(105px, 10vw, 180px) 0; background: #fff; }
.about-collective-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(75px, 10vw, 170px); align-items: start; }
.about-collective-left h2 { margin-top: 12px; font-size: clamp(69px, 6.5vw, 115px); line-height: .95; }
.about-collective-tagline { font-size: clamp(23px, 2vw, 36px); font-weight: 600; line-height: 1.13 !important; margin-top: 13px; }
.about-collective-art { width: 100%; min-height: clamp(370px, 42vw, 670px); margin-top: 55px; background: #fff url('assets/about-collective.png') left bottom / contain no-repeat; }
.about-collective-right { max-width: 505px; padding-top: clamp(75px, 8vw, 145px); }
.about-collective-right > p { font-size: clamp(12px, .98vw, 15px); margin-bottom: 16px; }
.about-collective-list { margin: 20px 0 30px 22px; padding: 0; list-style: disc; }
.about-collective-list li { font: 400 clamp(12px, .96vw, 15px)/1.47 var(--font-body); padding-left: 1px; }
.about-collective-conclusion { margin-top: 26px; }

/* SHARED DARK NETWORK / ArohaA PANEL */
.about-final { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-earth-dark); color: #fff; }
.about-final-panel { padding: clamp(90px, 8vw, 155px) clamp(40px, 6vw, 110px) clamp(105px, 10vw, 180px); }
.about-final-panel:first-child { border-right: 1px solid rgba(255,255,255,.34); }
.about-final-panel h2 { margin: 15px 0 30px; font-size: clamp(50px, 4.6vw, 87px); line-height: .93; letter-spacing: -.035em; }
.about-final-panel p { max-width: 540px; margin-bottom: 21px; font-size: clamp(12px, .94vw, 15px); line-height: 1.55 !important; color: rgba(255,255,255,.85); }
.about-final-panel .about-aroha-subtitle { font: 400 clamp(26px, 2.4vw, 44px)/1.08 var(--font-heading); color: #fff; margin-top: -12px; margin-bottom: 32px; }
.about-final-button { min-width: 210px; margin-top: 18px; }

/* TABLET */
@media (max-width: 1000px) {
    .about-hero-copy { padding: 75px 0; }
    .about-veronica-grid { gap: 50px; }
    .about-andrea-grid { gap: 55px; }
    .about-collective-grid { gap: 55px; }
    .about-collective-right { padding-top: 70px; }
    .about-final-panel { padding-inline: 38px; }
}

/* MOBILE */
@media (max-width: 700px) {
    .about-hero { grid-template-columns: 1fr; }
    .about-hero-copy { padding: 65px 0 60px; }
    .about-hero-copy h1 { font-size: clamp(57px, 13vw, 80px); }
    .about-hero-image { min-height: 350px; height: 72vw; max-height: 500px; }
    .about-story { padding-block: 85px 95px; }
    .about-story h2 { font-size: clamp(55px, 12vw, 82px); }
    .about-story-columns { grid-template-columns: 1fr; gap: 12px; margin-top: 45px; }
    .about-veronica { padding-block: 90px; }
    .about-veronica-grid, .about-andrea-grid, .about-collective-grid { grid-template-columns: 1fr; gap: 45px; }
    .about-veronica-identity h2, .about-andrea-copy h2 { font-size: clamp(60px, 13vw, 92px); }
    .about-veronica-bio { padding-top: 0; }
    .about-veronica-photo { width: min(100%, 450px); }
    .about-andrea { padding-block: 90px; }
    .about-andrea-photo { justify-self: start; width: min(100%, 450px); }
    .about-collective { padding-top: 95px; }
    .about-collective-left h2 { font-size: clamp(57px, 11vw, 85px); }
    .about-collective-right { padding-top: 0; }
    .about-collective-art { min-height: 350px; margin-top: 35px; }
    .about-final { grid-template-columns: 1fr; }
    .about-final-panel { padding: 80px var(--page-gutter); }
    .about-final-panel:first-child { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.34); }
    .about-final-panel h2 { font-size: clamp(52px, 11vw, 80px); }
}

@media (prefers-reduced-motion: reduce) {
    .page-about [data-reveal] { opacity: 1; transform: none; }
}