/* V3 Our mission: the most editorial page of the set. The mission over the morning light (dark), a statement that
   lights up word by word (light), the belief in health sovereignty (dark), four commitments (light), and the photo
   close. Tones alternate at every join. Layered on the home's style.css and v3.css; only this page's pieces live here. */

/* ---------- 1. Hero: full height, the walker at the centre, the words on the water ---------- */
.hero.hero-page.a-hero{min-height:max(640px,100svh)}
.a-hero .hero-bg{background:#2b3533}
.a-hero .hero-bg img{object-position:50% 56%}
.a-hero .hero-copy{max-width:560px;gap:24px}
.a-hero .lead{max-width:25em}
/* Who runs Gabriel and where, in plain words under the mission (name disambiguation, 2026-10-14). */
.a-hero .a-who{max-width:34em;font-size:var(--fs-15);line-height:1.55;color:rgba(240,243,241,.78)}
.a-hero .eyebrow{color:rgba(240,243,241,.86)}
.a-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.16) 9%,rgba(12,16,18,0) 18%),linear-gradient(90deg,rgba(14,18,21,.6) 0%,rgba(14,18,21,.32) 32%,rgba(14,18,21,0) 58%),linear-gradient(0deg,rgba(17,21,24,.78) 0%,rgba(17,21,24,.3) 30%,rgba(17,21,24,0) 52%)}
@media (max-width:760px){
  .a-hero .hero-bg img{object-position:50% 30%}
  .a-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.14) 10%,rgba(12,16,18,0) 18%),linear-gradient(0deg,rgba(12,16,18,.95) 0%,rgba(12,16,18,.78) 36%,rgba(12,16,18,.12) 62%,rgba(12,16,18,0) 100%)}
}
@media (max-width:400px){.a-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.14) 10%,rgba(12,16,18,0) 18%),linear-gradient(0deg,rgba(12,16,18,.95) 0%,rgba(12,16,18,.8) 42%,rgba(12,16,18,.4) 64%,rgba(12,16,18,0) 84%)}}

/* ---------- 2. Why we exist: one statement, lit word by word, the body under it ---------- */
.why{padding-block:clamp(72px,7.5vw,112px) clamp(96px,10vw,152px)}
.why-body{gap:clamp(22px,2.4vw,32px);max-width:1040px}
.why-line{max-width:17em;color:var(--ink)}
.why-line .ln{display:block}
.why-lead{max-width:33em;padding-top:clamp(20px,2vw,28px);border-top:1px solid var(--rule)}
@media (max-width:760px){.why{padding-block:64px 96px}.why-line{font-size:clamp(34px,9.6vw,44px)}}

/* ---------- 3. Where we stand (dark): the statement, the photograph, two beliefs ---------- */
.believe-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,7vw,128px);row-gap:clamp(40px,4vw,56px);align-items:start}
.believe-head{grid-column:1;grid-row:1;max-width:none}
.believe-head .statement{max-width:10em}
.believe-head .lead{max-width:27em}
.believe-photo{grid-column:2;grid-row:1/3;align-self:center;aspect-ratio:4/5;margin:0;box-shadow:0 40px 80px -48px rgba(0,0,0,.8)}
.believe-more{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:18px}
.believe .beliefs{display:flex;flex-direction:column;gap:0;margin:0;padding:0;border:0}
.believe .belief{gap:8px;padding:24px 0;border-top:1px solid var(--line)}
.believe .belief:last-child{border-bottom:1px solid var(--line)}
.believe .belief h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2;color:var(--pearl)}
.believe .belief p{font-size:var(--fs-17);color:var(--silver);max-width:31em}
.believe .arrow-link{align-self:flex-start}
@media (max-width:900px){
  .believe-grid{grid-template-columns:1fr;grid-template-rows:none}
  .believe-head,.believe-photo,.believe-more{grid-column:1;grid-row:auto}
  .believe-photo{max-width:560px;width:100%;aspect-ratio:4/5}
}
@media (max-width:760px){.believe-head .statement{font-size:clamp(38px,10.4vw,44px)}.believe-photo{aspect-ratio:1}}

/* ---------- 4. In practice (light): four commitments ---------- */
.commit-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,6vw,112px);align-items:start}
.commit-head{gap:22px;position:sticky;top:132px}
.commit-list{counter-reset:none}
.commit-list li{display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:24px;row-gap:10px;align-items:baseline;padding:34px 0;border-top:1px solid var(--rule)}
.commit-list li:last-child{border-bottom:1px solid var(--rule)}
.commit-list .n{grid-row:1/3;font-size:var(--fs-h3);font-weight:300;letter-spacing:-.04em;line-height:1.2;color:var(--emerald);font-variant-numeric:tabular-nums}
.commit-list h3{font-size:clamp(24px,2.4vw,34px);font-weight:300;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.commit-list p{font-size:var(--fs-17);color:var(--ash);max-width:30em}
@media (max-width:860px){.commit-grid{grid-template-columns:1fr}.commit-head{position:static}}
@media (max-width:520px){.commit-list li{grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:28px 0}}

/* ---------- 5. Close ---------- */
.a-close .photo-bg img{object-position:50% 24%}
.a-close .photo-shade{background:linear-gradient(90deg,rgba(14,18,21,.74) 0%,rgba(14,18,21,.4) 40%,rgba(14,18,21,0) 66%),linear-gradient(0deg,rgba(14,18,21,.6) 0%,rgba(14,18,21,0) 44%)}
.a-close .close-line{max-width:13em}
@media (max-width:760px){.a-close .photo-bg img{object-position:50% 20%}.a-close .photo-shade{background:linear-gradient(0deg,rgba(12,16,18,.95) 0%,rgba(12,16,18,.74) 40%,rgba(12,16,18,.08) 72%)}}