/* ==========================================================================
   sections.css — page-section building blocks reused on every page:
   section spacing, colour blocks, two-column layouts, centred blocks, person block.
   ========================================================================== */

/* section spacing and colour blocks */
.sec{padding:var(--section-y) 0}
@media(min-width:900px){.sec{padding:var(--section-y-lg) 0}}
.dark{background:var(--atlantic);color:var(--cream)}
.dark .eyebrow{color:var(--ochre)}
.tint{background:var(--cream-deep)}
/* warm accent blocks: used sparingly */
.sienna{background:var(--sienna);color:var(--cream);font-weight:400}
.sienna .eyebrow{color:var(--cream);opacity:.85}
.sienna .rule{background:var(--cream);opacity:.7}
.ochre{background:var(--ochre);color:var(--espresso);font-weight:400}
.ochre .eyebrow{color:var(--espresso);opacity:.8}
.ochre .rule{background:var(--espresso);opacity:.55}
.dark .lede,.dark p{color:var(--cream)}
.dark .pull{color:var(--cream)}

/* two-column layout (stacks on phones; .flip changes the proportions; .stretch lets a .frame.tall fill the height) */
.split{display:grid;gap:34px}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1.15fr;gap:96px;align-items:start}
  .split.flip{grid-template-columns:1.15fr 1fr}
}
.split .body p{max-width:34em}
.split.stretch>div:last-child{order:1}
@media(min-width:900px){.split.stretch{align-items:stretch}.split.stretch>div:last-child{order:0}}

/* stacked statement lines */
.stack span{display:block}

/* centred story block (e.g. Why Eos) */
.why{max-width:760px;margin:0 auto;text-align:center}
.why .eyebrow{margin-bottom:1.4rem}
.why .rule{margin:2rem auto}
.why .beat{font-family:var(--serif);font-size:clamp(1.5rem,4.4vw,2.1rem);line-height:1.35}
.why .beat span{display:block}
.why .see{font-family:var(--serif);font-style:italic;font-size:clamp(2.4rem,8vw,4rem);line-height:1.1;margin:1.2rem 0}

/* person: portrait + credentials */
.person{display:grid;gap:34px}
@media(min-width:900px){.person{grid-template-columns:.8fr 1.2fr;gap:96px;align-items:start}}
.seal-img{display:block;width:140px;height:140px;border-radius:50%;margin-top:2rem;object-fit:cover}
.cred{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;line-height:1.9;margin:1.1rem 0 1.8rem}
.cred b{font-weight:400;color:var(--sienna)}

/* final call to action (centred, on a dark block) */
.final{text-align:center}
.final h2{max-width:14em;margin:0 auto 1.5rem}
.final p{max-width:34em;margin:0 auto 2.4rem}
.final .where{margin-top:2.4rem;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase}