/* ═══ The City Church — site.css ═══════════════════════════════════════════
   Every style on the site lives in this one file.

   Built from the Webflow capture (the-city-web-source/webflow/global/
   site-head-code.html) as design direction, with the Warm Paper v1.1 colours
   from docs/BRAND.md applied — decision 10, option 2, Rashad, 29 September 2026.
   Every colour change from the capture is listed in docs/MIGRATION_LEDGER.md.

   Contents
    1. Colour tokens (eighteen — do not add a nineteenth)
    2. Type and layout settings
    3. Reset and base
    4. Header — announcement bar and nav (load-bearing geometry)
    5. Mobile menu
    6. Buttons
    7. Masthead (the dark hero at the top of each page)
    8. Fact strip
    9. Sections, bands and section heads
   10. Grids
   11. Cards and link cards
   12. Photos
   13. Steps, rows, FAQ, flags, pull quote
   14. Panels
   15. Call-to-action band
   16. Footer
   17. Page: Home
   18. Page: Not found
   18b. Phase 2 components
   19. Breakpoints
   ═════════════════════════════════════════════════════════════════════════ */


/* ── 1. Colour tokens ──────────────────────────────────────────────────────
   Warm Paper v1.1. Nine light, nine dark. docs/BRAND.md is the source.
   Names the capture already used (--ink, --paper, --stone, --linen, --blue,
   --sky) are kept so the two can be compared line by line.               */
:root{
  /* Light */
  --paper:#F7F4ED;          /* surface */
  --raised:#FFFDF8;         /* cards, panels, alternate bands — replaces tan #EFE9DE and #FFFFFF */
  --wash:#E8F0FB;           /* blue tint — not used yet */
  --linen:#D8D3C7;          /* lines */
  --ink:#17181B;            /* text */
  --stone:#4B4A45;          /* secondary text, 8.09:1 */
  --muted:#6E6B63;          /* quietest text, 4.84:1 — never Ash on Paper */
  --blue:#0969D0;           /* Signal Blue — accent on Paper */
  --blue-pressed:#075AB4;   /* buttons, eyebrows — replaces #0A54AE */

  /* Dark — the colours used on Ink areas */
  --dark-surface:#17181B;
  --dark-raised:#212227;    /* replaces --panel #202124 */
  --dark-wash:#16283D;      /* not used yet */
  --dark-line:#33343A;      /* was --hair */
  --dark-text:#F7F4ED;
  --dark-text-2:#B0ADA5;    /* replaces #B3AEA5, #A9A49B and #CFCAC0 */
  --dark-muted:#8C8981;     /* Ash — 5.08:1 on Ink; replaces #6E6A63 (3.30:1) */
  --sky:#4C9AF0;            /* accent on Ink, never on Paper */
  --sky-pressed:#7DB6F5;    /* not used yet */
}


/* ── 2. Type and layout settings ───────────────────────────────────────── */
:root{
  --font-display:'Archivo',-apple-system,'Segoe UI',Arial,sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --max:1240px;

  /* --header-h MUST equal the rendered height of .site-header
     (announcement bar + nav). 40+78 = 118 here; 110 and 104 in section 19.
     Change one, change the other, or every page starts under the nav.     */
  --header-h:118px;
}


/* ── 3. Reset and base ─────────────────────────────────────────────────────
   No scroll-behavior:smooth. The capture had it; .claude/rules/routing.md
   explains why it stays out (an in-flight smooth scroll breaks anchors).  */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;padding-top:var(--header-h)}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{padding-left:22px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  line-height:1.08;color:inherit}
h2{font-size:clamp(28px,4vw,44px)}
h3{font-size:20px;letter-spacing:-.01em}
h4{font-size:16.5px}
p{margin:0 0 16px}
hr{border:0;border-top:1px solid var(--linen);margin:28px 0}
/* anything marked hidden stays hidden, even when a class sets display */
[hidden]{display:none !important}

/* anchor targets clear the fixed header without any JavaScript */
[id]{scroll-margin-top:calc(var(--header-h) + 18px)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:820px;margin:0 auto;padding:0 32px}
.eyebrow{display:block;font-family:var(--font-display);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-pressed)}
.lede{font-size:18px;color:var(--stone);max-width:62ch}
.small{font-size:14.5px;color:var(--stone)}


/* ── 4. Header — announcement bar and nav ──────────────────────────────────
   The bottom rule is a box-shadow, not a border: a border adds 1px to the
   header's height and silently breaks the --header-h match. Do not change it. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--paper);box-shadow:0 1px 0 var(--linen)}

.announcement{height:40px;display:flex;align-items:center;justify-content:center;
  padding:0 20px;overflow:hidden;background:var(--ink);color:var(--paper);
  font-size:13.5px;text-align:center}
.announcement p{margin:0;white-space:nowrap}
.announcement b{font-family:var(--font-display);font-weight:600;letter-spacing:.02em}
.announcement a{margin-left:.4em;color:var(--sky);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.logo{display:block;flex-shrink:0}
/* The logo files carry ~20.7% transparent padding top and bottom. Sizing the
   box to the artwork's ratio (1.912) with object-fit:cover crops only that
   padding, never the mark. */
.logo img{height:52px;width:auto;aspect-ratio:1.912;object-fit:cover;object-position:center}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-family:var(--font-display);font-weight:500;font-size:14.5px;
  text-decoration:none;color:var(--ink);opacity:.82;transition:.15s;white-space:nowrap}
.nav-links a:hover{opacity:1;color:var(--blue-pressed)}
.nav-links a.is-current{opacity:1;color:var(--blue-pressed);font-weight:600}
.nav-actions{display:flex;gap:12px;align-items:center}
.menu-toggle{display:none;font-size:22px;line-height:1;padding:6px 4px;color:var(--ink)}


/* ── 5. Mobile menu ────────────────────────────────────────────────────── */
.mobile-menu{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
  background:var(--paper);overflow-y:auto;padding:8px 0 40px;border-top:1px solid var(--linen)}
.mobile-menu[hidden]{display:none}
.mobile-menu-links a{display:block;font-family:var(--font-display);font-weight:600;
  font-size:20px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);
  padding:18px 24px;border-bottom:1px solid var(--linen)}
.mobile-menu-links a:active{background:var(--raised)}
.mobile-menu-links a.is-current{color:var(--blue-pressed)}
.mobile-menu-cta{padding:24px}
.mobile-menu-cta .btn{width:100%;justify-content:center}
.mobile-menu-meta{padding:4px 24px 0;font-size:14px;color:var(--stone)}
body.menu-open{overflow:hidden}


/* ── 6. Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:600;font-size:14px;letter-spacing:.02em;padding:15px 26px;border-radius:2px;
  text-decoration:none;transition:.18s;border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--blue-pressed);color:var(--paper)}
.btn-primary:hover{background:var(--ink)}
.btn-secondary{border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper)}
.btn-light{border-color:color-mix(in srgb,var(--paper) 45%,transparent);color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--ink)}
.btn-sky{background:var(--sky);color:var(--ink)}
.btn-sky:hover{background:var(--paper)}
.btn-small{padding:11px 18px;font-size:13px}
.btn-block{width:100%;justify-content:center}
/* September audit fix: card cues are labelled buttons, never bare arrows */
.btn-card{background:transparent;border-color:var(--linen);color:var(--ink);
  padding:11px 18px;font-size:13px;margin-top:2px}
.link-card:hover .btn-card{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.band-dark .btn-card{border-color:var(--sky);color:var(--sky)}
.band-dark .link-card:hover .btn-card{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.actions-tight{gap:10px}


/* ── 7. Masthead ───────────────────────────────────────────────────────── */
.masthead{position:relative;background:var(--ink);color:var(--paper);overflow:hidden}
.masthead-media{position:absolute;inset:0;background:var(--dark-raised)}
.masthead-media img,.masthead-media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.masthead-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--ink) 95%,transparent) 0%,
    color-mix(in srgb,var(--ink) 80%,transparent) 46%,
    color-mix(in srgb,var(--ink) 45%,transparent) 100%)}
/* Vertical padding only. In the capture this rule also zeroed the side
   padding, so masthead text touched the screen edge on phones. */
.masthead-inner{position:relative;padding-top:84px;padding-bottom:74px}
.masthead-rule{width:52px;height:3px;background:var(--sky);margin-bottom:24px}
.masthead h1{font-size:clamp(38px,6vw,68px);line-height:.98;max-width:17ch;letter-spacing:-.035em}
.masthead-sub{font-size:18.5px;color:var(--dark-text-2);max-width:52ch;margin:22px 0 0}
.crumb{font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sky);margin-bottom:18px}


/* ── 8. Fact strip ─────────────────────────────────────────────────────── */
.facts{background:var(--raised);border-bottom:1px solid var(--linen)}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:28px 26px 28px 0;border-right:1px solid var(--linen)}
.fact:last-child{border-right:0;padding-right:0}
.fact:not(:first-child){padding-left:26px}
.fact-label{font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);margin-bottom:7px}
.fact-value{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.fact-note{font-size:13px;color:var(--stone);margin-top:4px}
.fact-note a{color:var(--blue-pressed);text-decoration:none;font-weight:500}


/* ── 9. Sections, bands and section heads ──────────────────────────────── */
section{padding:88px 0}
.band-raised{background:var(--raised)}          /* the capture's tan band, v1.1 */
.band-dark{background:var(--ink);color:var(--paper)}
.band-dark h2,.band-dark h3{color:var(--paper)}
.band-dark .lede,.band-dark p{color:var(--dark-text-2)}
.band-dark .eyebrow{color:var(--sky)}
.section-head{max-width:660px;margin-bottom:44px}
.section-head .eyebrow{margin-bottom:13px}
.section-head h2{margin-bottom:14px}
.block-head{margin:14px 0 16px}              /* an h2 sitting under an eyebrow, outside .section-head */
.after-steps{margin-top:34px}


/* ── 10. Grids ─────────────────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.split-center{align-items:center;gap:40px}
.split-spaced{margin-top:64px}


/* ── 11. Cards and link cards ──────────────────────────────────────────── */
.card{border:1px solid var(--linen);background:var(--raised);border-radius:3px;padding:30px 30px 28px}
.card-tint{background:var(--paper)}        /* the capture's tan card; Paper keeps it distinct from Raised */
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card-kicker{font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-pressed);margin-bottom:16px}
.card-link{color:var(--blue-pressed);font-weight:600}
.link-card{display:flex;flex-direction:column;text-decoration:none;transition:.18s}
.link-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.link-card-action{margin-top:auto;padding-top:18px}
.band-dark .card{background:var(--ink);border-color:var(--dark-line)}
.band-dark .card-kicker{color:var(--sky)}
.band-dark .link-card:hover{border-color:var(--sky)}   /* Sky on Ink, never Signal Blue */


/* ── 12. Photos ────────────────────────────────────────────────────────── */
.photo{width:100%;height:auto;object-fit:cover;border-radius:3px;background:var(--raised)}
.photo-5x4{aspect-ratio:5/4}
.photo-16x10{aspect-ratio:16/10}


/* ── 13. Steps, rows, FAQ, flags, pull quote ───────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.steps-4{grid-template-columns:repeat(4,1fr);gap:26px}
/* Ash, not the capture's Linen: BRAND.md allows Ash for large text, and these 50px
   numerals are large text. Linen measured 1.46:1 and failed every audit (ledger 14). */
.step-num{font-family:var(--font-display);font-weight:700;font-size:50px;color:var(--dark-muted);
  line-height:1;margin-bottom:12px}
.step h3{margin-bottom:9px}
.step p{font-size:15px;color:var(--stone);margin:0}
.step-lead p{font-size:16px}

.rows{border-top:1px solid var(--linen)}
.row{display:flex;justify-content:space-between;gap:22px;padding:14px 0;
  border-bottom:1px solid var(--linen);font-size:15px}
.row dt{font-family:var(--font-display);font-weight:600}
.row dd{color:var(--stone);text-align:right}
.rows-spaced{margin:26px 0 30px}
.rows-spaced + .actions{margin-top:0}

.faq{border-top:1px solid var(--linen)}
.faq-item{border-bottom:1px solid var(--linen);padding:24px 0}
.faq-item h4{margin-bottom:8px}
.faq-item p{font-size:15.5px;color:var(--stone);margin:0;max-width:72ch}

.flag{display:inline-block;align-self:flex-start;font-family:var(--font-display);font-weight:600;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:2px}
.flag-open{background:var(--ink);color:var(--paper)}
.flag-soon{background:var(--sky);color:var(--ink)}

.pull-quote{border-top:1px solid var(--linen);border-bottom:1px solid var(--linen);
  padding:36px 0;margin:40px 0}
.pull-quote q{display:block;font-family:var(--font-serif);font-style:italic;font-size:25px;
  line-height:1.42;quotes:none;max-width:26ch}
.pull-quote-attr{font-family:var(--font-display);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);margin-top:16px}
.pull-quote-open{margin:56px 0 0;border-bottom:0;padding-bottom:0}
.pull-quote-tight{margin:32px 0 0}


/* ── 14. Panels ────────────────────────────────────────────────────────── */
.panel{border:1px solid var(--linen);background:var(--raised);border-radius:3px;padding:34px}
.panel h3{margin-bottom:6px}
.panel-dark{background:var(--dark-raised);border-color:var(--dark-line)}
.panel-dark h3{margin-bottom:10px}
.panel-dark p{font-size:15px}
.panel .btn{margin-top:8px}


/* ── 15. Call-to-action band ───────────────────────────────────────────── */
.cta-band{background:var(--ink);color:var(--paper);text-align:center;padding:80px 0}
.cta-band h2{color:var(--paper);margin-bottom:16px;font-size:clamp(30px,4.4vw,50px)}
.cta-band p{color:var(--dark-text-2);font-size:17px;max-width:50ch;margin:0 auto 28px}
.cta-band .actions{justify-content:center;margin-top:0}


/* ── 16. Footer ────────────────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:var(--dark-text-2);padding:74px 0 38px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;
  border-bottom:1px solid var(--dark-line)}
.footer-col h4{font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);margin:0 0 18px}
.footer-col a{display:block;color:var(--dark-text-2);text-decoration:none;padding:6px 0;transition:.15s}
.footer-col a:hover{color:var(--sky)}
.footer-logo img{height:64px;width:auto;aspect-ratio:1.912;object-fit:cover;
  object-position:center;margin-bottom:20px}
.footer-address{margin-bottom:6px}
.footer-col a.footer-email{display:inline;padding:0;color:var(--sky)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:26px;
  font-size:12.5px;color:var(--dark-muted);flex-wrap:wrap}
.footer-social a{color:inherit;text-decoration:none;transition:.15s}
.footer-social a:hover,.footer-social a:focus-visible{color:var(--sky)}


/* ── 17. Page: Home ────────────────────────────────────────────────────── */
.masthead-home .masthead-inner{padding-top:104px;padding-bottom:92px}
.masthead-home h1{font-size:clamp(42px,7vw,84px);max-width:14ch}
/* Hero video: hidden until it is actually playing, so the photo shows
   wherever the stream cannot play. */
.masthead-video{opacity:0;transition:opacity .6s}
.masthead-video.is-playing{opacity:1}
/* No pause control: removed at the church's request, 2 October 2026 (ledger 21). */

.campus-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.campus-card-body{padding:30px 30px 32px;flex:1;display:flex;flex-direction:column}
.campus-card .flag{margin-bottom:16px}
.campus-card h3{font-size:26px;margin-bottom:8px}
.campus-card-address{margin-bottom:16px}
.campus-card-meta{border-top:1px solid var(--linen);padding-top:16px;margin-top:auto;
  font-size:14.5px;color:var(--stone)}
.campus-card-meta b{font-family:var(--font-display);color:var(--ink)}
.campus-card .actions{margin-top:20px}
.campus-card .photo{border-radius:0}

.pull-quote-open .lede{font-size:16px}

.prayer-card h3{font-size:24px;margin:12px 0}
.prayer-card .btn-primary{margin-top:8px}
.prayer-card-note{margin-top:12px}

.watch-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:3px;overflow:hidden;
  background:var(--dark-raised);transition:.2s}
.watch-thumb:hover{opacity:.94}
.watch-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The capture referenced --scrim-soft, which was never defined. A soft Ink shade. */
.watch-thumb-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 25%,transparent)}
.watch-thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center}
.watch-thumb-play::before{content:"";border-left:19px solid var(--ink);
  border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
/* The launch vision video is a vertical (9:16) YouTube video. */
.watch-thumb-tall{aspect-ratio:9/16;max-width:340px;width:100%;margin:0 auto}
/* The capture left this label unstyled on top of the photo. */
.watch-thumb-label{position:absolute;left:16px;bottom:14px;font-family:var(--font-display);
  font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:2px;background:var(--paper);color:var(--ink)}


/* ── 18. Page: Not found ───────────────────────────────────────────────── */
.masthead-plain .masthead-inner{padding-top:120px;padding-bottom:120px}


/* ── 18b. Phase 2 components ───────────────────────────────────────────── */
/* The captured bare inputs (Lake County updates, CKidz pre-registration) are
   gone — both panels now hold real buttons (ledger entry 16). No field rules. */
.panel-title{margin-bottom:20px}
.panel-note{margin:14px 0 0}
/* Stacked buttons inside a panel: one per line, small gap */
.panel-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.panel-actions .btn{margin-top:0}

.section-tight{padding:64px 0}
.split-rev{grid-template-columns:.95fr 1.05fr}
.rows-top{margin-top:24px}
.rows-top + .actions{margin-top:26px}
.card h4{font-size:18px;margin-bottom:10px}
.card-sm h3{font-size:18px}
.card-actions{display:flex;flex-direction:column}
.card-actions .btn{margin-top:auto;align-self:flex-start}
.card-actions p{margin-bottom:20px}
.link-card-center{justify-content:center}
.card-link{color:var(--blue-pressed);font-weight:600}

/* Team cards (New Here): one wide card for both pastors beside the Dream Team
   card. Two columns, three-fifths to two-fifths; one column at tablet width. */
.team-grid{display:grid;grid-template-columns:3fr 2fr;gap:22px}
.person-card{padding:0;overflow:hidden}
.person-card .photo{aspect-ratio:1/1;border-radius:0}
.person-card-wide .photo{aspect-ratio:3/2}
.person-card-body{padding:22px 24px 24px}
.person-card h3{font-size:19px;margin-bottom:4px}
.person-card-role{margin-bottom:10px}
.person-card p:last-child{margin:0}

/* The 21 Statements of Faith (New Here). Two columns of statements with
   their scripture references inline, as on the live page. */
.beliefs{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--linen)}
.belief{padding:24px 0;border-bottom:1px solid var(--linen)}
.belief h3{font-size:18px;margin-bottom:8px}
.belief p{font-size:15.5px;color:var(--stone);margin:0 0 10px}
.belief p:last-child{margin-bottom:0}
.beliefs-note{margin-top:26px}
/* Collapsed by the script: six statements show, the button reveals the rest */
.beliefs.is-collapsed .belief:nth-child(n+7){display:none}
.beliefs-toggle{margin-top:30px}

/* Check-in steps (CKidz): number beside the text instead of above it */
.steps-list{grid-template-columns:1fr;gap:22px;margin-top:8px}
.step-row{display:flex;gap:18px}
.step-row .step-num{font-size:34px;margin:0}
.step-row h3{font-size:18px}
.faq-spaced{margin-top:44px}

/* Lake County launch block (Locations), the church's own /launch structure */
.launch-sub{margin-top:56px}
.launch-sub .lede{margin-bottom:24px}
.event-card{display:flex;gap:22px;align-items:flex-start}
.event-date{flex-shrink:0;text-align:center;font-family:var(--font-display);font-weight:700;
  background:var(--ink);color:var(--paper);border-radius:3px;padding:12px 16px;line-height:1}
.event-date span{display:block}
.event-month{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.event-day{font-size:30px;margin-top:4px}
.event-meta{margin-bottom:10px}
.callout{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.6vw,40px);
  letter-spacing:-.02em;line-height:1.1;margin-top:32px}
.callout span{display:block;color:var(--blue-pressed)}
.about-card h3{font-size:22px;margin:12px 0}
.about-card .btn{margin-top:8px}


/* ── 19. Breakpoints ───────────────────────────────────────────────────────
   Two sets, as in the capture: 980 / 720 for page layout, 991 / 479 for
   the header geometry.                                                     */
@media (max-width:991px){
  :root{--header-h:110px}                               /* 44 + 66 */
  .announcement{height:44px;font-size:12px;line-height:1.3}
  .announcement p{white-space:normal}
  .nav-inner{height:66px}
  .logo img{height:44px}
  /* The six nav links and the button need 739px; at 768 wide only 704px
     fit. The capture switched at 720, which clipped them. From 991px down
     they move into the menu — the same breakpoint the header uses. */
  .nav-links{display:none}
  .menu-toggle{display:block}
  .nav-inner{gap:10px}
}
@media (max-width:980px){
  .grid-4{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr}
  .grid-3,.split,.split-rev,.grid-2,.beliefs{grid-template-columns:1fr}
  .beliefs{gap:0}
  .steps,.steps-4{grid-template-columns:1fr 1fr;gap:28px}
  .facts-grid{grid-template-columns:1fr 1fr;gap:0 24px}
  .fact{border-right:0;border-bottom:1px solid var(--linen);padding:20px 0;min-width:0}
  .fact:not(:first-child){padding-left:0}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap,.narrow{padding:0 20px}
  .btn{padding:12px 16px;font-size:12.5px}
  section{padding:56px 0}
  .masthead-inner,.masthead-home .masthead-inner{padding-top:56px;padding-bottom:50px}
  .grid-4,.steps,.steps-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .event-card{flex-direction:column}
  .row{flex-direction:column;gap:2px}
  .row dd{text-align:left}
}
@media (max-width:479px){
  :root{--header-h:104px}                               /* 44 + 60 */
  .announcement{height:44px;font-size:11.5px}
  .nav-inner{height:60px}
  .logo img{height:40px}
}