/* ═══════════════════════════════════════════════════════════
   COMPONENT — SECTION SYSTEM  (reusable)
   The alternating cream / navy band system and the standard
   section header set (eyebrow → headline → rule → lead).
   Any page can drop a <section class="s-cream"> and use these.
   Depends on tokens.css.
═══════════════════════════════════════════════════════════ */

/* band rhythm */
section{position:relative;z-index:3;padding:120px 0}
.s-cream{background:var(--cream)}
.s-cream-2{background:var(--cream-2)}
.s-navy{background:var(--navy-ink)}
.s-navy-deep{background:var(--navy-ink)}
/* gentle depth: navy's own dark tone fades softly into the cream at
   each edge (no hard slab line, no colour band) */
.s-navy,.s-navy-deep{position:relative;z-index:5;box-shadow:0 -24px 52px -26px rgba(5,13,36,.6),0 24px 52px -26px rgba(5,13,36,.6)}

/* section header set */
.sec-eyebrow{font-size:12px;letter-spacing:4.5px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:700}
.s-navy .sec-eyebrow,.s-navy-deep .sec-eyebrow{color:var(--gold-2)}

.sec-h{font-family:var(--font-display);font-weight:600;font-size:clamp(33px,4.3vw,54px);line-height:1.06;color:var(--navy);letter-spacing:-.5px;margin-bottom:18px;max-width:860px}
.s-navy .sec-h,.s-navy-deep .sec-h{color:#fff}
.sec-h .gl{font-style:italic;font-weight:600;color:var(--gold)}
.s-navy .sec-h .gl,.s-navy-deep .sec-h .gl{color:var(--amber)}

.sec-rule{width:88px;height:4px;border-radius:3px;background:var(--gold);margin:0 0 26px}
.s-navy .sec-rule,.s-navy-deep .sec-rule{background:var(--amber)}

/* highlight swipe behind a key phrase */
.mark{background:linear-gradient(transparent 58%, rgba(255,204,0,.42) 58%);padding:0 .04em}

.sec-lead{font-size:18px;line-height:1.72;color:var(--ink-2);max-width:740px;font-weight:400;margin-bottom:6px}
.sec-lead b{color:var(--navy);font-weight:700}
.s-navy .sec-lead,.s-navy-deep .sec-lead{color:var(--on-navy-body)}
.s-navy .sec-lead b,.s-navy-deep .sec-lead b{color:var(--amber)}