/* ==========================================================================
   EDHN — REDESIGN LAYER v2 (mockup-aligned, 2026-07-06)
   Marries the locked Meridian tokens (fonts, gold, motifs) to the mockup
   structure: full-bleed scrim heroes, dark/light band alternation, image-top
   cards, icon stat strips, numbered process, device bands, timelines.
   Load AFTER site.css. No changes to tokens.css or site.css.
   ========================================================================== */

:root {
  --paper: #F2ECDD;        /* warm cream band */
  --paper-card: #FBF7EC;   /* card on cream */
  --paper-ink: #211E13;    /* headings on cream */
  --paper-body: #4A4535;   /* body on cream */
  --paper-muted: #6B6450;  /* captions on cream */
  --paper-line: #D9D1B9;   /* hairlines on cream */
  --gold-deep: #8A6A1F;    /* accent that passes contrast on cream */
}

/* ---- Icons (external sprite /assets/icons.svg) --------------------------- */
.ic { width: 30px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--sm { width: 22px; height: 22px; }
.ic--lg { width: 40px; height: 40px; }

/* ==========================================================================
   HERO — full-bleed photograph, built-in scrim, left-aligned text
   ========================================================================== */
/* Tablet/laptop/larger (overlay): the box is locked to the images' native 16:9 so object-fit:cover
   shows the FULL, zoomed-out composition (no top/bottom slice). max-height:100vh keeps it within
   the viewport; min-height guards the text on short screens. Phones override this to a stacked
   band lower down. */
.hero-bleed { position: relative; aspect-ratio: 16 / 9; min-height: 500px; max-height: 100vh; display: flex; align-items: center; border-bottom: var(--rule-w) solid var(--hairline); overflow: hidden; background: var(--bg); }
/* Clint's heroes are busy full-width composites (maps + city labels, product dashboards,
   magazine cover text, client logo cards). A semi-transparent scrim let that content bleed
   UNDER the headline/deck/buttons. Fix: hold the crop toward the right so the focal subject
   lands in the clear zone; tune per page via --hero-pos. */
.hero-bleed .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 78%) center; z-index: 0; }
/* The text panel: FULLY opaque on the left third, feathering to fully clear by ~82% so the
   right 55-60% of the image shows at full clarity and nothing bleeds behind the text. */
.hero-bleed::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 33%, rgba(20,20,15,.965) 42%, rgba(20,20,15,.72) 53%, rgba(20,20,15,.34) 66%, rgba(20,20,15,.08) 79%, transparent 89%),
    linear-gradient(0deg, rgba(20,20,15,.55) 0%, rgba(20,20,15,.12) 16%, transparent 28%); }
.hero-bleed .hin { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: var(--sp-16) var(--gutter); }
.hero-bleed .hcol { max-width: 528px; }
.hero-bleed h1 { color: #FFFDF5; text-wrap: balance; font-size: clamp(2.3rem, 3.5vw, 3.5rem); line-height: 1.06; }
.hero-bleed h1 em, .band--light h2 em { color: var(--accent); }
.hero-bleed .deck { font-size: var(--fs-lead); color: var(--ink); max-width: 43ch; margin-top: var(--sp-6); }
.hero-bleed .trust { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-8); font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; color: var(--ink-muted); }
.hero-bleed .trust .ic { width: 18px; height: 18px; }
.hero-bleed .meridian { max-width: 480px; margin-top: var(--sp-8); }
/* short variant for inner pages */
.hero-bleed--short { min-height: clamp(480px, 62vh, 680px); }

/* ==========================================================================
   STAT BAR — icon + numeral + label strip under the hero
   ========================================================================== */
.statbar { background: var(--bg); border-bottom: var(--rule-w) solid var(--hairline); }
.statbar .in { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; }
.sitem { flex: 1 1 180px; display: flex; align-items: center; gap: 16px; padding: 30px 22px; border-left: var(--rule-w) solid var(--hairline); min-width: 0; }
.sitem:first-child { border-left: 0; padding-left: 0; }
.snum { font-family: var(--font-display); font-weight: 500; font-feature-settings: "tnum" 1, "lnum" 1; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; color: var(--ink); white-space: nowrap; }
.slab { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--ink-muted); line-height: 1.5; margin-top: 6px; }

/* ==========================================================================
   BANDS + centered section titles
   ========================================================================== */
.band--light { background: var(--paper); color: var(--paper-body); }
.band--light h1, .band--light h2, .band--light h3, .band--light h4 { color: var(--paper-ink); }
.band--light p { color: var(--paper-body); }
.band--light .eyebrow { color: var(--gold-deep); }
.band--light a { color: var(--paper-ink); }
.band--light .sec-link { color: var(--gold-deep); }
.band--light .ic { stroke: var(--gold-deep); }
.band--light .stars { color: var(--gold-deep); }
.band--light .meridian::before { background: var(--gold-deep); }

.sec-title { text-align: center; margin-bottom: var(--sp-12); }
.sec-title .eyebrow { display: inline-flex; align-items: center; gap: 18px; }
.sec-title .eyebrow::before, .sec-title .eyebrow::after { content: ""; width: clamp(30px, 6vw, 72px); height: var(--rule-w); background: currentColor; opacity: .55; }
.sec-title h2 { margin-top: var(--sp-4); text-wrap: balance; }
.sec-title .sub { margin: var(--sp-4) auto 0; max-width: 62ch; }
.band--light .sec-title .sub { color: var(--paper-body); }

/* ==========================================================================
   CARDS — image-top, icon-disc, title, body, optional checklist
   ========================================================================== */
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cgrid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.cgrid--half { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .cgrid--half { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cgrid--half { grid-template-columns: 1fr; } }
.ccard { background: var(--paper-card); border: var(--rule-w) solid var(--paper-line); display: flex; flex-direction: column; text-align: center; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.ccard:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20, 18, 8, .16); }
.ccard .cimg { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ccard .cdisc { width: 56px; height: 56px; border-radius: 50%; background: #171712; border: 1px solid var(--accent); display: grid; place-items: center; margin: -28px auto 0; position: relative; z-index: 1; }
.ccard .cdisc .ic { stroke: var(--accent); width: 26px; height: 26px; }
.ccard h3 { font-size: 20px; margin: var(--sp-4) 0 0; padding: 0 18px; }
.ccard .cbody { font-size: 15.5px; line-height: 1.6; color: var(--paper-body); padding: 10px 20px 0; margin: 0; }
.ccard .cfoot { margin-top: auto; padding: 14px 20px 22px; }
/* dark variant */
.ccard--dark { background: var(--surface); border-color: var(--hairline); }
.ccard--dark h3 { color: var(--ink); }
.ccard--dark .cbody { color: var(--ink-muted); }

/* checklist */
.check { list-style: none; margin: var(--sp-4) 0 0; padding: 0; text-align: left; }
.check li { position: relative; padding: 7px 0 7px 30px; font-size: 15.5px; line-height: 1.55; }
.check li::before { content: "\2713"; position: absolute; left: 0; top: 7px; color: var(--accent); font-family: var(--font-label); font-weight: 600; }
.band--light .check li::before { color: var(--gold-deep); }

/* ==========================================================================
   HOW IT WORKS — numbered discs + cards (+ arrows on desktop)
   ========================================================================== */
.howit { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); }
.hstep { text-align: center; position: relative; }
.hnum { width: 52px; height: 52px; border-radius: 50%; background: #171712; border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-display); font-size: 22px; display: grid; place-items: center; margin: 0 auto var(--sp-4); }
.hcard { background: var(--paper-card); border: var(--rule-w) solid var(--paper-line); padding: 26px 24px 30px; }
.hcard h3 { font-size: 20px; }
.hcard p { font-size: 15.5px; line-height: 1.6; margin: 10px 0 0; color: var(--paper-body); }
.hstep + .hstep::before { content: "\2192"; position: absolute; left: calc(-1 * clamp(14px, 2.6vw, 36px)); top: 14px; transform: translateX(-50%); color: var(--gold-deep); font-size: 22px; }

/* ==========================================================================
   SPLITS — 50/50 media + text, alternating
   ========================================================================== */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--rev { grid-template-columns: .95fr 1.05fr; }
.split--rev .media { order: 2; }
.split .media img { width: 100%; height: auto; display: block; }
/* every showcase image must fit its track (guards against 1920px images overflowing mobile) */
.shot { box-shadow: 0 24px 60px rgba(10, 9, 4, .38); max-width: 100%; height: auto; }
.map-band .media img { width: 100%; height: auto; display: block; }
.band--light .shot { box-shadow: 0 22px 48px rgba(20, 18, 8, .18); }

/* numbered split heading (Online Presence pattern) */
.numh { display: flex; align-items: baseline; gap: 14px; }
.numh .n { font-family: var(--font-display); color: var(--accent); font-size: 1.2em; }
.band--light .numh .n { color: var(--gold-deep); }

/* ==========================================================================
   MAP BAND (dark) — reach map + side card
   ========================================================================== */
.map-band { display: grid; grid-template-columns: minmax(340px, 1fr) 1.45fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.map-band h2 { font-size: clamp(1.8rem, 2.7vw, 2.5rem); }
.map-side { border: var(--rule-w) solid var(--accent); background: var(--surface); padding: 26px; }
.map-side h3 { font-size: 19px; }
.map-side p { font-size: 15px; color: var(--ink-muted); margin: 10px 0 0; }

/* ==========================================================================
   TESTIMONIAL CARDS (light) + HIGHLIGHT (case) CARDS
   ========================================================================== */
.tcard { background: var(--paper-card); border: var(--rule-w) solid var(--paper-line); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.tcard blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--paper-ink); }
.tcard .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avi { width: 40px; height: 40px; border-radius: 50%; background: #171712; color: var(--accent); font-family: var(--font-display); font-size: 16px; display: grid; place-items: center; flex: none; }
.tcard .who .nm { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--paper-ink); }
.tcard .who .rl { font-size: 12.5px; color: var(--paper-muted); display: block; text-transform: none; letter-spacing: .02em; font-family: var(--font-body); }

.hlcard { background: var(--paper-card); border: var(--rule-w) solid var(--paper-line); padding: 30px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hlcard .hlogo { max-height: 76px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
.split .media img, .expert-grid img, .proof-grid img { height: auto; }
.hlcard h3 { font-size: 19px; }
.hlcard p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--paper-body); }

/* ==========================================================================
   ICON ROW (why/benefits, dark or light)
   ========================================================================== */
.irow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.iitem { text-align: center; padding: 22px 16px; border-left: var(--rule-w) solid var(--hairline); }
.iitem:first-child { border-left: 0; }
.band--light .iitem { border-color: var(--paper-line); }
.iitem .ic { margin-inline: auto; }
.iitem h3 { font-size: 16.5px; margin-top: 12px; }
.iitem p { font-size: 14px; line-height: 1.55; margin: 8px auto 0; max-width: 26ch; }
.iitem p { color: var(--ink-muted); }
.band--light .iitem p { color: var(--paper-body); }

/* ==========================================================================
   TIMELINE (About — Our Journey)
   ========================================================================== */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 4%; right: 4%; top: 26px; height: var(--rule-w); background: var(--hairline-accent); opacity: .5; }
.tl-item { text-align: center; position: relative; padding-top: 62px; }
.tl-item .tl-dot { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); display: grid; place-items: center; }
.tl-item .yr { font-family: var(--font-label); font-weight: 600; letter-spacing: .14em; color: var(--accent); font-size: 13px; }
.tl-item h3 { font-size: 16.5px; margin-top: 6px; }
.tl-item p { font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); margin: 8px auto 0; max-width: 24ch; }

/* ==========================================================================
   CHIPS (sponsor category filter)
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; padding: 11px 20px; border: var(--rule-w) solid var(--paper-line); background: transparent; color: var(--paper-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.chip .ic { width: 16px; height: 16px; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip.on .ic { stroke: var(--accent-ink); }

/* ==========================================================================
   BADGES (market status etc.)
   ========================================================================== */
.badge { display: inline-block; font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; padding: 7px 14px; }
.badge--active { background: var(--accent); color: var(--accent-ink); }
.badge--soon { border: var(--rule-w) solid var(--paper-line); color: var(--paper-muted); }
.ccard--dark .badge--soon { border-color: var(--hairline); color: var(--ink-muted); }

/* ==========================================================================
   CTA SPLIT (dark) — message left, panel right
   ========================================================================== */
.cta-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.panel { background: var(--surface); border: var(--rule-w) solid var(--hairline); padding: clamp(22px, 3vw, 34px); }
.panel--gold { border-color: var(--accent); }
.panel .pitem { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 14px 0; border-top: var(--rule-w) solid var(--hairline); align-items: start; }
.panel .pitem:first-of-type { border-top: 0; padding-top: 0; }
.panel .pitem h4 { font-size: 16.5px; margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.panel .pitem p { font-size: 14px; color: var(--ink-muted); margin: 4px 0 0; line-height: 1.55; }

/* ==========================================================================
   PLATFORM ROW (where your message appears)
   ========================================================================== */
.prow { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; align-items: center; }
.prow .pi { display: flex; align-items: center; gap: 10px; font-family: var(--font-label); font-weight: 600; letter-spacing: .06em; font-size: 15px; color: var(--paper-ink); }
.prow .pi small { display: block; font-size: 11px; color: var(--paper-muted); letter-spacing: .04em; font-weight: 500; }

/* ==========================================================================
   BREADCRUMB on photo heroes
   ========================================================================== */
.crumb-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.crumb-overlay .breadcrumb { padding-top: var(--sp-4); }

/* ==========================================================================
   Light-band ports of existing components
   ========================================================================== */
.band--light .faq-acc { border-color: var(--paper-line); }
.band--light .faq-acc details { border-bottom: var(--rule-w) solid var(--paper-line); }
.band--light .faq-acc summary { color: var(--paper-ink); }
.band--light .faq-acc .a { color: var(--paper-body); }
.band--light .cmp-table th { color: var(--gold-deep); border-color: var(--paper-line); }
.band--light .cmp-table td { color: var(--paper-body); border-color: var(--paper-line); }
.band--light .cmp-table tbody tr td:first-child { color: var(--paper-ink); }
/* first-column business names are links; on the dark theme they're light cream, which vanishes on
   the cream table. Force them dark (gold on hover) so the names are legible. */
.band--light .cmp-table td:first-child a { color: var(--paper-ink); font-weight: 600; }
.band--light .cmp-table td:first-child a:hover, .band--light .cmp-table td:first-child a:focus-visible { color: var(--gold-deep); }
.band--light .stat .stat-label, .band--light .ledger .stat .label { color: var(--paper-muted); }
.band--light .stat .stat-num { color: var(--paper-ink); }
.band--light .scar-row { border-color: var(--paper-line); }
.band--light .scar-row .c { color: var(--paper-ink); }
.band--light .scar-row .s { color: var(--paper-muted); }
.band--light .scar-row .leader { border-color: var(--paper-line); }
.band--light .logo-chip { background: #fff; border-color: var(--paper-line); }
.band--light .plate { border-color: var(--gold-deep); background: var(--paper-card); }
.band--light .plate-cap { color: var(--gold-deep); }
.band--light blockquote { color: var(--paper-ink); }
.band--light cite .who { color: var(--paper-ink); }
.band--light cite .src { color: var(--paper-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev .media { order: 0; }
  .map-band { grid-template-columns: 1fr; }
  .cta-split { grid-template-columns: 1fr; }
  .howit { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .hstep + .hstep::before { content: "\2193"; left: 50%; top: -34px; }
  .howit { gap: 56px; }
  .timeline { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 30px; }
  .timeline::before { left: 22px; right: auto; top: 0; bottom: 0; width: var(--rule-w); height: auto; }
  .tl-item { text-align: left; padding: 0 0 0 64px; }
  .tl-item .tl-dot { left: 0; top: 0; transform: none; }
  .tl-item p { margin-left: 0; max-width: 40ch; }
}
@media (max-width: 900px) {
  /* Stack the hero on phones: full-bleed cover on a tall portrait box crops these landscape
     composites into a zoomed fragment. Instead show the whole image as a ~16:9 band up top
     (native ratio = essentially no crop), with the text flowing below on the solid charcoal. */
  .hero-bleed { display: flex; flex-direction: column; min-height: 0; max-height: none; aspect-ratio: auto; padding: 0; }
  /* Tablets (768-900): show the FULL image as a 16:9 band (zoomed out), copy below. Phones get a
     tighter right-2/3 crop in the <=767 block, since their band is smaller and text sits under it. */
  .hero-bleed .bg { position: relative; inset: auto; order: -1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
  .hero-bleed::after { display: none; }
  .hero-bleed .crumb-overlay { position: static; align-self: stretch; }
  .hero-bleed .hin { padding: var(--sp-8) var(--gutter) var(--sp-12); }
  .hero-bleed .hcol { max-width: 100%; }
  .hero-bleed h1 { font-size: clamp(2rem, 8.4vw, 2.7rem); }
  .hero-bleed .deck { max-width: 100%; }
  .hero-bleed .meridian { max-width: 100%; }
  .sitem { flex-basis: 46%; border-left: 0; border-top: var(--rule-w) solid var(--hairline); padding: 20px 10px; }
  .sitem:first-child, .sitem:nth-child(2) { border-top: 0; }
  .sitem:first-child { padding-left: 10px; }
}
@media (max-width: 767px) {
  /* Phones only: the header + supporting copy sit BELOW the image, so crop the band to the usable
     right 2/3 so the imagery fills it. Tablet and up (and the overlay hero) show the full image. */
  .hero-bleed .bg { aspect-ratio: 4 / 3; object-position: var(--hero-pos-m, 80%) center; }
}
/* inline-authored multi-column grids (index-field ledgers, icon rows) carry their column
   count in a style="" attribute, which outranks the responsive class rules. Collapse those
   inline grids on smaller screens so big numerals/labels never blow out the viewport. */
@media (max-width: 680px) {
  .index-field[style*="repeat("] { grid-template-columns: 1fr 1fr !important; }
  /* forced multi-up icon rows (Home "Stronger Together" 4-up, Sponsors "Why" 5-up) push their
     min-content past a phone viewport; drop any inline-column icon row to 2-up and let it shrink */
  .irow[style*="repeat("] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .cgrid, .cgrid--3 { grid-template-columns: 1fr; }
  .snum { font-size: 1.45rem; }
}

/* ==========================================================================
   LARGE SCREENS — the 1280 container leaves big dark margins on 1600px+ displays
   and the full-bleed heroes stretch past it. Widen the content and scale the hero
   type in steps so the layout fills a big screen instead of floating centered.
   ========================================================================== */
@media (min-width: 1600px) {
  :root { --maxw: 1440px; }
  .hero-bleed h1 { font-size: clamp(3.5rem, 3.2vw, 4rem); }
  .hero-bleed .hcol { max-width: 560px; }
  .hero-bleed .deck { font-size: 1.35rem; max-width: 46ch; }
  .statbar .snum { font-size: clamp(1.8rem, 2vw, 2.3rem); }
  .sec-title h2, .final-cta h2 { font-size: clamp(2.4rem, 2.8vw, 3.2rem); }
}
@media (min-width: 1920px) {
  :root { --maxw: 1560px; }
  .hero-bleed .hin { padding-block: var(--sp-24); }
  .hero-bleed .hcol { max-width: 600px; }
  .hero-bleed .deck { max-width: 48ch; }
}

/* ==========================================================================
   BRAND WORDMARK — official EDHN logo lockup replaces the text brand in the
   header and footer (white version on the dark --bg / --surface).
   ========================================================================== */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-mark { display: block; width: auto; height: 34px; }
@media (min-width: 901px) { .brand-mark { height: 38px; } }
/* footer sits on --surface (also dark) → same white mark, a touch larger */
.foot-grid .brand { display: inline-flex; }
.brand-mark--footer { height: 42px; }

/* ==========================================================================
   HERO VIDEO ON MOBILE — the cinematic film plays on phones too, so show the
   FULL 16:9 frame (the ≤767 band otherwise crops to 4:3, which was meant for
   the old dense composite stills, not clean footage). Centered, no crop.
   ========================================================================== */
@media (max-width: 767px) {
  .hero-bleed .hero-video { aspect-ratio: 16 / 9; object-position: center; }
}