/* BAZZLE shared stylesheet — matches the real design tokens extracted from the legacy
   live site's Elementor build (post-5.css global kit + computed styles), not an
   invented design system. See CLAUDE.md for the extraction method and rationale.

   AUDIENCE / ACCESSIBILITY STANDING RULE (Nathan, 2026-08-09): primary audience is men
   40-70 — factor in likely colorblindness and reduced screen-reading comfort in every
   design decision, not just this one pass. Concretely: (1) body/label text must meet
   WCAG AA contrast (4.5:1) against its background — check any new color pairing, don't
   eyeball it; (2) don't rely on color alone to convey meaning (the coverage map's region
   legend pairs a color swatch with a text name for this reason — keep that pattern for
   anything similar); (3) HARD FLOOR: no text below 16px anywhere on the site (Nathan,
   2026-08-09) — every font-size, in this file and in inline styles, is >=16px. Do not
   introduce anything smaller, including footer fine print, labels, or captions. Orange
   category labels (eyebrow/tag/who/num) are 16px, weight 600, for impact + legibility. */
:root{
  --navy:#0F172A;        /* primary dark bg — header, hero, footer */
  --navy-2:#1E293B;       /* secondary dark panel */
  --navy-line:#33415580;  /* hairlines on dark */
  --amber:#A85B15;        /* brand accent FILL — darkened from #B8651A (2026-08-13) for WCAG AA: white text is now 5.03:1 on buttons/backgrounds. Use ONLY as a fill/background or border. For amber TEXT use --amber-text (on light) or --amber-on-dark (on navy/slate). */
  --amber-hover:#8F4A0F;   /* button hover — darkens the fill (white text 6.66:1); a lighter hover would drop white text below AA */
  --amber-on-dark:#D6832E; /* amber TEXT on dark navy/slate — 6.07:1 on navy, 4.98:1 on slate. Added 2026-08-13. */
  --amber-text:#96470E;   /* added 2026-08-09 — darker amber for use as TEXT COLOR on light/stone backgrounds. Plain --amber as text on stone is ~3.9:1 contrast, under the 4.5:1 AA minimum for body text; this hits ~5.6-5.9:1. Audience is 40-70, screen-reading and colorblindness both flagged as real concerns — don't use --amber as a text color on any light background, use this instead. --amber itself is unchanged and still correct for buttons and dark-background text. */
  --stone:#F5F4EF;        /* paper bg */
  --stone-2:#EEEDE6;      /* alternating band */
  --rule:#DAD6CC;         /* hairlines on light */
  --ink:#0F172A;
  --ink-2:#1E293B;        /* secondary/body text on light — darkened again 2026-08-09 (2nd pass): #64748B→#4F5D75 still read too soft (cool blue-gray on warm paper), now #334155 ≈ 8.4:1 on stone-2, well above AA, for the 40-70 audience */
  --ink-3:#94A3B8;
  --display:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",Arial,Helvetica,sans-serif;
  --label:"DM Sans",Arial,sans-serif;
}
/* Self-hosted fonts (was render-blocking Google Fonts — 752ms). woff2, latin subset, font-display:swap. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/newsreader-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/newsreader-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibmplexsans-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibmplexsans-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dmsans-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dmsans-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/dmsans-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}  /* guard: no stray element can create a horizontal scroll / push the right-anchored header button off-screen on mobile */
body{background:var(--stone);color:var(--ink);font-family:var(--sans);font-size:20px;line-height:1.65;-webkit-font-smoothing:antialiased}  /* base bumped 16→18 (2026-08-09) — readability pass for 40-70 audience, midway between old size and GHL's 20px */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.eyebrow{font-family:var(--label);font-size:18px;font-weight:700;letter-spacing:.01em;text-transform:none;color:var(--amber-text)}
.eyebrow.on-dark{color:var(--amber-on-dark)}
.sec-dark .cards .tag{color:var(--amber-on-dark)}
h2.h{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,36px);line-height:1.2;letter-spacing:-.01em;margin-bottom:16px}
p.lede{font-size:22px;color:var(--ink-2);max-width:66ch;line-height:1.62}
.sec-dark p.lede{color:rgba(255,255,255,.82)}  /* was .55 — too dim on navy for older eyes; .82 ≈ 9:1 */

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:#0F172A;background:var(--navy)}
.hd{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;height:60px;gap:20px}
.mark{text-decoration:none;display:flex;align-items:center;gap:11px;line-height:1;flex:0 0 auto}
.mark .seal{height:40px;width:auto;display:block;flex:0 0 auto}
.mark .wm{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:.02em;color:#fff}
.mark .tag{display:none} /* real header doesn't show a tagline next to the wordmark */
nav{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
nav ul{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:16px;list-style:none;margin:0;padding:0}
nav li{flex:0 0 auto;list-style:none}
nav a{font-family:var(--sans);font-size:16px;color:#fff;text-decoration:none;white-space:nowrap;display:inline-block;opacity:.85}
nav a:hover,nav a.active{opacity:1;color:var(--amber-on-dark)}
.hd .badge{flex:0 0 auto;font-family:var(--label);font-size:16px;font-weight:500;color:var(--amber-on-dark);white-space:nowrap}
.hd .cta{flex:0 0 auto;font-family:var(--sans);font-size:16px;font-weight:500;color:#fff;background:#B8651A;background:var(--amber);border:1px solid var(--amber);padding:10px 20px;text-decoration:none;white-space:nowrap;border-radius:0}
.hd .cta:hover{background:var(--amber-hover);border-color:var(--amber-hover)}
.menu-btn{flex:0 0 auto;display:none;background:none;border:1px solid #fff4;color:#fff;font-family:var(--sans);font-size:16px;padding:8px 12px;cursor:pointer}

/* ---------- buttons (sharp corners — matches live site exactly) ---------- */
.btn{display:inline-block;font-family:var(--sans);font-size:16px;font-weight:500;padding:12px 24px;text-decoration:none;border-radius:0;border:1px solid transparent}
.btn-solid{background:var(--amber);border-color:var(--amber);color:#fff}
.btn-solid:hover{background:var(--amber-hover);border-color:var(--amber-hover)}
.btn-line{background:transparent;border-color:var(--amber);color:var(--amber-text)}
.btn-line:hover,.btn-line:focus,.btn-line:active{background:var(--amber);border-color:var(--amber);color:#fff}
.sec-dark .btn-line,.hero .btn-line,.page-hero .btn-line,.close .btn-line{border-color:var(--amber-on-dark);color:var(--amber-on-dark)}
/* dark-context interactive states must win over the amber-text rule above (equal specificity, later source) — keep text white on the amber fill for hover, keyboard focus, and mobile tap/:active */
.sec-dark .btn-line:hover,.hero .btn-line:hover,.page-hero .btn-line:hover,.close .btn-line:hover,
.sec-dark .btn-line:focus,.hero .btn-line:focus,.page-hero .btn-line:focus,.close .btn-line:focus,
.sec-dark .btn-line:active,.hero .btn-line:active,.page-hero .btn-line:active,.close .btn-line:active{background:var(--amber);border-color:var(--amber);color:#fff}
/* Robust WCAG guard: any element carrying an inline --amber-text color that lands inside a DARK section
   would fail contrast (dark amber on navy). Force it to the lighter --amber-on-dark. !important beats the
   inline style. Catches interior-hero ledes, dark closing-CTA links, etc. across every page in one rule. */
.page-hero [style*="--amber-text"],.sec-dark [style*="--amber-text"],.hero [style*="--amber-text"],.close [style*="--amber-text"]{color:var(--amber-on-dark)!important}

/* ---------- hero photo backgrounds (real field photography, darkened behind the copy) ----------
   Add a <div class="hero-bg" style="background-image:url('assets/hero-x.jpg')"></div> as the first
   child of a .hero / .page-hero; the navy base + low opacity keep the white text fully legible. */
.hero,.page-hero{position:relative;overflow:hidden}
.hero>.wrap,.page-hero>.wrap{position:relative;z-index:1}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.30;z-index:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,42,.55),rgba(15,23,42,.15))}

/* inline feature photos on dark sections (credential / field) */
.cred-grid{display:grid;grid-template-columns:1fr 330px;gap:52px;align-items:start}
.cred-photo{max-width:360px;margin:0}
.cred-grid .cred-photo{max-width:none}
.cred-photo img{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.16)}
@media(max-width:820px){.cred-grid{grid-template-columns:1fr;gap:30px}.cred-grid .cred-photo{max-width:320px}}
/* split hero: copy in one column, a photo in its own column (navy stays solid) */
.page-hero.split>.wrap{display:grid;grid-template-columns:1fr 460px;gap:52px;align-items:center}
.hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:64% 32%;border:1px solid rgba(255,255,255,.16);display:block}
.hero-media--video video{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(255,255,255,.16);display:block;background:var(--navy)}
.hero-media--video img{aspect-ratio:16/9}
@media(max-width:880px){.page-hero.split>.wrap{grid-template-columns:1fr;gap:30px}.hero-media{max-width:360px}.hero-media img{aspect-ratio:3/2}.hero-media--video{max-width:520px}}

.field-photo{max-width:640px;margin-top:26px}
.field-photo img{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.16)}
.photo-cap{font-family:var(--label);font-size:16px;color:rgba(255,255,255,.5);margin-top:10px}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;padding:64px 0 56px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.6vw,46px);line-height:1.15;letter-spacing:-.01em;max-width:20ch;margin:16px 0 22px}
.hero p{font-size:20px;color:rgba(255,255,255,.82);max-width:62ch;line-height:1.6}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ---------- interior-page hero (shorter than homepage, no stat strip) ---------- */
.page-hero{background:var(--navy);color:#fff;padding:56px 0 52px}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,4vw,40px);line-height:1.18;letter-spacing:-.01em;max-width:22ch;margin:16px 0 18px}
.page-hero p.lede{color:rgba(255,255,255,.88);max-width:62ch;font-size:22px}
.page-hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.page-hero blockquote{font-family:var(--display);font-size:clamp(18px,2vw,21px);line-height:1.45;color:rgba(255,255,255,.8);border-left:2px solid var(--amber);padding-left:20px;margin-top:34px;max-width:70ch;font-style:normal}

/* ---------- stat strip (4-up counters, homepage) ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;border-top:1px solid rgba(255,255,255,.12)}
.stat{padding:26px 20px 4px;border-right:1px solid rgba(255,255,255,.12)}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--display);font-size:clamp(26px,3vw,42px);font-weight:400;color:#fff;display:block}
.stat .k{font-family:var(--label);font-size:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-top:6px}

.sec{padding:72px 0}
.sec-line{border-top:1px solid var(--rule)}
.sec-dark{background:var(--navy);color:#fff}
.sec-dark h2.h{color:#fff}

/* ---------- problem/enemy band ---------- */
.band{background:var(--stone-2)}
.band .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.quote{font-family:var(--display);font-size:clamp(22px,2.6vw,29px);line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.quote .amber{color:var(--amber-text)}

/* ---------- exposure/FAQ/risk cards (label + heading + body) ---------- */
.cards{list-style:none;border-top:1px solid var(--rule);margin-top:32px}
.cards li{padding:24px 0;border-bottom:1px solid var(--rule)}
.cards .tag{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-text);display:block;margin-bottom:8px}
.cards h3{font-family:var(--display);font-weight:400;font-size:19px;margin-bottom:8px;line-height:1.3}
.cards p{font-size:19px;color:var(--ink-2);max-width:74ch;line-height:1.6}
.sec-dark .cards{border-top-color:rgba(255,255,255,.12)}
.sec-dark .cards li{border-bottom-color:rgba(255,255,255,.12)}
.sec-dark .cards h3{color:#fff}
.sec-dark .cards p{color:rgba(255,255,255,.8)}

/* ---------- risk grid (2x2 on homepage) ---------- */
.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:36px}
.risk-item{background:var(--stone);padding:26px 24px}
.risk-item .tag{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-text);display:block;margin-bottom:10px}
.risk-item h3{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.35;margin-bottom:8px}
.risk-item p{font-size:18px;color:var(--ink-2)}

/* ---------- three-stage system ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.stage{background:var(--stone);padding:30px 26px;display:flex;flex-direction:column}
.stage .num{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-text);line-height:1.35;min-height:2.7em;margin-bottom:18px}
.stage .num .k{display:block}
.stage .num .d{display:block;color:var(--ink-2);font-weight:500;margin-top:5px}
.stage h3{font-family:var(--display);font-weight:400;font-size:24px;color:var(--ink);margin-bottom:4px}
.stage .price{font-family:var(--label);font-size:16px;color:var(--ink-2);margin-bottom:14px;text-transform:uppercase;letter-spacing:.03em}
.stage p{font-size:18px;color:var(--ink-2);flex:1;line-height:1.6}
.stage a{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--amber-text);text-decoration:none;border-bottom:1px solid var(--amber-text);padding-bottom:2px;align-self:flex-start}

/* ---------- audience router (six paths) ---------- */
.paths{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:36px}
.path{background:var(--stone);padding:26px 24px;text-decoration:none;display:block}
.path:hover{background:#fff}
.path .who{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-text);display:block;margin-bottom:10px}
.path .said{font-family:var(--display);font-size:18px;line-height:1.35;color:var(--ink);display:block;font-weight:400}
.path .ans{font-size:17px;color:var(--ink-2);display:block;margin-top:10px;line-height:1.55}
.path .go{display:block;margin-top:12px;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--amber-text)}

/* ---------- credential section ---------- */
.credential-line{font-family:var(--label);font-size:16px;color:var(--ink-2);margin-top:24px;letter-spacing:.01em}
.credential-line b{color:var(--ink);font-weight:500}

/* ---------- bio (photo + text, e.g. Amanda's leadership block) ---------- */
.bio{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.bio-photo img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
@media(max-width:720px){.bio{grid-template-columns:1fr;gap:24px}.bio-photo{max-width:300px}}

/* ---------- firm ---------- */
.firm{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.firm .note{border-left:2px solid var(--amber);padding-left:20px;font-size:17px;color:var(--ink-2)}
.firm .note strong{color:var(--ink)}

/* ---------- tag chip list (regions, small tag groups) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{font-family:var(--sans);font-size:16px;color:var(--ink-2);background:var(--stone-2);border:1px solid var(--rule);padding:6px 12px}

/* ---------- primary-industries callout + clean multi-column industries list ----------
   Replaced the boxed-pill grid (hard to scan at 100+ items) with a scannable alphabetical
   4-column text list (like the live site), in BAZZLE colors. Works on light and dark sections. */
.ind-lead{font-size:18px;color:var(--ink-2);margin:16px 0 4px;max-width:70ch;line-height:1.6}
.sec-dark .ind-lead{color:rgba(255,255,255,.82)}
.primary-inds{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.primary-inds a{font-family:var(--label);font-size:16px;font-weight:600;color:var(--amber-text);border:1px solid var(--amber-text);padding:11px 22px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:background .15s ease,color .15s ease,border-color .15s ease}
.primary-inds a .ar{font-weight:400;opacity:.65}
.primary-inds a:hover{background:var(--amber-text);border-color:var(--amber-text);color:#fff}
.primary-inds a:hover .ar{opacity:1}
.sec-dark .primary-inds a{color:var(--amber-on-dark);border-color:var(--amber-on-dark)}
.sec-dark .primary-inds a:hover{background:var(--amber);border-color:var(--amber);color:#fff}
.ind-note{font-size:17px;color:var(--ink-2);margin:16px 0 26px;max-width:76ch;line-height:1.6}
.sec-dark .ind-note{color:rgba(255,255,255,.75)}
.ind-cols{column-count:4;column-gap:34px;column-rule:1px solid var(--rule);margin-top:6px}
.sec-dark .ind-cols{column-rule-color:rgba(255,255,255,.14)}
.ind-cols .i{display:block;break-inside:avoid;font-size:16px;line-height:1.95;color:var(--ink-2)}
.sec-dark .ind-cols .i{color:rgba(255,255,255,.74)}
@media(max-width:1024px){.ind-cols{column-count:2}}
@media(max-width:560px){.ind-cols{column-count:1}}

/* ---------- asset list creator landing (features / checklist / dataset / pricing) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:36px}
.feature{background:var(--stone);padding:26px 24px}
.feature h3{font-family:var(--display);font-weight:400;font-size:20px;margin-bottom:8px;line-height:1.3}
.feature p{font-size:16px;color:var(--ink-2);line-height:1.55}
.sec-dark .feature-grid{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}
.sec-dark .feature{background:var(--navy-2)}
.sec-dark .feature h3{color:#fff}
.sec-dark .feature p{color:rgba(255,255,255,.72)}
.checklist{list-style:none;margin-top:26px;max-width:72ch}
.checklist li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--rule);font-size:17px;color:var(--ink-2)}
.checklist li::before{content:"—";position:absolute;left:0;color:var(--amber-text);font-weight:600}
.dataset{margin-top:30px;display:grid;gap:26px}
.dataset .dgroup .dlbl{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-text);margin-bottom:12px}
.price-card{margin-top:32px;background:var(--stone-2);border:1px solid var(--rule);border-top:3px solid var(--amber);padding:34px 32px;max-width:640px}
.price-card .amt{font-family:var(--display);font-size:clamp(28px,4vw,40px);color:var(--ink);line-height:1.1}
.price-card .amt s{color:var(--ink-3);font-size:.6em}
.price-card .terms{font-family:var(--label);font-size:16px;color:var(--ink-2);margin-top:6px}
.price-card ul{list-style:none;margin:20px 0 24px}
.price-card li{position:relative;padding:8px 0 8px 26px;font-size:17px;color:var(--ink-2)}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--amber-text);font-weight:700}
@media(max-width:820px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr}}

.close{background:var(--navy-2);color:#fff;padding:76px 0;text-align:center}
.close h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,38px);line-height:1.2;max-width:24ch;margin:14px auto 18px}
.close p{color:rgba(255,255,255,.8);max-width:54ch;margin:0 auto 28px}
.close .actions{justify-content:center}

/* ---------- legal pages ---------- */
.legal-body{max-width:74ch}
.legal-body h2{font-family:var(--display);font-weight:400;font-size:21px;margin:32px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{font-size:18px;color:var(--ink-2);margin-bottom:14px;line-height:1.6}
.legal-body .byline{font-family:var(--label);font-size:16px;color:var(--ink-3);margin-bottom:30px}

/* ---------- simple form (contact) ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;max-width:640px}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:block;font-family:var(--label);font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);margin-bottom:6px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--rule);padding:11px 13px;border-radius:0}
.form-grid textarea{min-height:120px;resize:vertical}
.form-grid button{grid-column:1/-1;justify-self:start;background:var(--amber);color:#fff;border:1px solid var(--amber);font-family:var(--sans);font-size:16px;font-weight:500;padding:13px 28px;cursor:pointer;border-radius:0}
.form-grid button:hover{background:var(--amber-hover);border-color:var(--amber-hover)}

/* ---------- interactive coverage map (real state geometry — public us-atlas TopoJSON + Albers
   projection; full-color choropleth base + per-region industries/equipment detail panel, ported
   verbatim from the live site's coverage_map_v3 data, restyled to BAZZLE tokens. Same component
   inlined on index.html and coverage/index.html — keep both in sync. ---------- */
.almap{margin-top:36px}
.almap-canvas{width:100%;background:var(--stone-2);border:1px solid var(--rule);position:relative;min-height:120px}
.almap-loading{padding:70px 40px;text-align:center;color:var(--ink-2);font-family:var(--label);font-size:16px}
.almap-note{font-size:16px;color:var(--ink-2);margin:10px 0 14px}
.almap-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.almap-chips a{font-family:var(--label);font-size:16px;padding:7px 14px;border:1px solid rgba(15,23,42,.18);color:var(--ink-2);background:#fff;cursor:pointer;text-decoration:none;display:inline-block;transition:all .15s}
.almap-chips a:hover{border-color:var(--amber);color:var(--amber-text)}
.almap-chips a.active{border-color:var(--amber);color:#fff;background:var(--amber)}
.almap-detail{display:none;margin-top:4px;padding:22px 24px;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--amber)}
.almap-detail.show{display:block}
.almap-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.almap-lbl{font-family:var(--label);font-size:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.almap-name{font-family:var(--display);font-size:20px;font-weight:400;color:var(--ink);margin-bottom:5px}
.almap-states{font-family:var(--label);font-size:16px;color:var(--ink-2)}
.almap-cell{font-size:16px;color:var(--ink-2);line-height:1.85}
.almap-link{display:inline-block;margin-top:14px;font-family:var(--label);font-size:16px;font-weight:500;color:var(--amber-text);text-decoration:none;border:1px solid var(--amber-text);padding:7px 14px}
.almap-link:hover{background:var(--amber-text);color:#fff}
.almap-state{stroke:#fff;stroke-width:.7px;transition:fill .15s}

footer{background:var(--navy);color:rgba(255,255,255,.55);font-size:16px;padding:40px 0 34px}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer h5,.ft-label{font-family:var(--label);font-size:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-bottom:12px}  /* .ft-label = footer column labels as non-heading <p> (removes the h2->h5 heading-order skip) */
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--amber-on-dark)}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.6)}
/* footer utility row: legal pages + sitemap. Root-absolute hrefs so the markup is identical on every page. Sits above the .legal line (whose border-top divides it from the paragraph). */
.ft-legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-family:var(--label);font-size:16px}
.ft-legal a{color:rgba(255,255,255,.6);text-decoration:none}
.ft-legal a:hover{color:var(--amber-on-dark)}

@media(max-width:960px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid rgba(255,255,255,.12)}
  .stages,.band .grid,.firm,.risk-grid{grid-template-columns:1fr}
  .stage .num{min-height:0}
  .band .grid{gap:30px}
  .paths{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .almap-grid{grid-template-columns:1fr;gap:14px}
}
@media(max-width:1120px){
  nav{display:none}
  .menu-btn{display:block}
  .hd .cta,.hd .badge{display:none}
  .hd.open nav{display:block;position:absolute;top:60px;left:0;right:0;background:var(--navy);border-top:1px solid rgba(255,255,255,.12);padding:6px 0;z-index:50}
  .hd.open nav ul{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .hd.open nav li{width:100%}
  .hd.open nav a{display:block;padding:13px 24px;width:100%;opacity:1}
  .hd.open nav a:hover{background:var(--navy-2)}
}
@media(max-width:600px){
  /* Phone header: KEEP the BAZZLE wordmark + click-to-call number visible. All three
     header items (mark / phone / Menu) are fixed-width flex items under space-between, so
     if their combined width edges past the viewport the last item (Menu) spills off the
     right. Tighten padding, gaps, and the seal so everything clears at 360px with margin —
     ALL TEXT STAYS >=16px per the hard floor (no 14px here). */
  .wrap{padding:0 12px}
  .hd{gap:8px}
  .mark{gap:6px}
  .mark .seal{height:30px}
  .mark .wm{font-size:16px;letter-spacing:.01em}
  .hd .hd-phone{font-size:16px;gap:6px}
  .hd .hd-phone::before{width:14px;height:14px}
  .menu-btn{border:none;background:none;padding:8px 0;font-size:16px}  /* mobile: drop the box border + right padding so only the word "Menu" shows, flush inside the page margin — no box edge to read as clipped */
  .sec{padding:52px 0}
  .hero{padding-top:44px}
  /* Footer: stack the columns vertically, each full-width and centered (was cramped 2-col). */
  .ft{grid-template-columns:1fr;gap:30px;text-align:center}
  .ft p{margin-left:auto;margin-right:auto}
  .ft-legal{justify-content:center}
}
@media(max-width:380px){
  /* Narrowest phones (incl. some Samsung layout viewports): drop the phone glyph and its
     gap to reclaim ~22px so the Menu button keeps a comfortable margin from the right edge.
     Number text stays 16px and fully visible — only the decorative icon is removed. */
  .wrap{padding:0 10px}
  .hd{gap:6px}
  .hd .hd-phone::before{display:none}
  .hd .hd-phone{gap:0}
  .menu-btn{padding:8px 0}
}

/* About — headshot lead (dark section) */
.about-lead{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:center}
.about-lead .lead-photo{margin:0}
.about-lead .lead-photo img{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.16)}
.about-lead .lead-photo .photo-cap{margin-top:12px}
@media(max-width:820px){
  .about-lead{grid-template-columns:1fr;gap:26px}
  .about-lead .lead-photo{max-width:300px}
}

/* Masonry field gallery */
.gallery{columns:3 320px;column-gap:18px}
.gallery figure{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 18px}
.gallery img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:2px}
.gallery figcaption{font-family:var(--label);font-size:16px;font-weight:500;color:var(--ink-2);margin-top:9px}
@media(max-width:640px){.gallery{columns:1}}

/* About — featured field moment (coal) */
.field-feature{max-width:820px;margin:56px auto 0;text-align:center}
.field-feature .field-quote{font-family:var(--display);font-style:italic;font-size:27px;line-height:1.4;color:#fff;max-width:60ch;margin:0 auto 22px}
.field-feature .fq-rule{width:64px;height:3px;background:var(--amber);border:0;margin:0 auto 30px}
.field-feature img{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.16);border-radius:2px}
.field-feature figcaption{font-family:var(--label);font-size:16px;color:rgba(255,255,255,.6);margin-top:14px}
@media(max-width:600px){.field-feature .field-quote{font-size:22px}}

/* Credential stat line — readable on dark sections */
.sec-dark .credential-line{color:rgba(255,255,255,.82)}
.sec-dark .credential-line b{color:#fff}

/* Contact — direct-contact photo */
.contact-photo{margin:0 0 24px}
.contact-photo img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:2px}

/* Equipment Appraisal Cost page — byline, callout, tiers, scope steps */
.byline{font-family:var(--label);font-size:16px;color:rgba(255,255,255,.72);line-height:1.7;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);max-width:70ch}
.byline b{color:#fff;font-weight:600}
.byline a{color:var(--amber-text)}

.cost-callout{background:var(--stone-2);border-left:4px solid var(--amber);padding:24px 28px;margin:30px 0;border-radius:2px}
.cost-callout .cc-label{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--amber-text)}
.cost-callout .cc-amt{font-family:var(--display);font-size:25px;line-height:1.35;color:var(--ink);margin:10px 0 0}

.cost-tiers{display:grid;gap:16px;margin-top:30px}
.cost-tier{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;padding:24px 26px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:3px}
.cost-tier h3{font-size:19px;color:#fff;margin:0;line-height:1.35}
.cost-tier .ct-trigger{margin:10px 0 0;font-size:16px;color:rgba(255,255,255,.72);line-height:1.55}
.cost-tier .ct-price{font-family:var(--display);font-size:23px;font-weight:500;color:var(--amber-on-dark);white-space:nowrap;text-align:right}
@media(max-width:600px){
  .cost-tier{grid-template-columns:1fr;gap:12px}
  .cost-tier .ct-price{text-align:left}
}

.scope-steps{list-style:none;margin:22px 0 0;padding:0;counter-reset:step}
.scope-steps li{position:relative;padding:15px 0 15px 46px;border-top:1px solid var(--rule);font-size:17px;color:var(--ink-2);line-height:1.5}
.scope-steps li:last-child{border-bottom:1px solid var(--rule)}
.scope-steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:13px;width:28px;height:28px;background:var(--amber);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--label);font-size:15px;font-weight:600}

/* Scannable feature list (replaces middot runs) */
.featlist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.featlist li{position:relative;padding:0 0 0 26px;border:0;font-size:16px;color:var(--ink-2);line-height:1.5}
.featlist li:before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;background:var(--amber);border-radius:2px;transform:rotate(45deg)}
.sec-dark .featlist li{color:rgba(255,255,255,.9)}
.sec-dark .featlist li:before{background:var(--amber)}

/* Asset List Creator — app + output showcase */
.showcase{display:grid;gap:50px;margin-top:38px}
.showcase-step{text-align:center}
.showcase-step .step-lbl{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--amber-text);display:block}
.showcase-step h3{font-family:var(--display);font-weight:400;font-size:22px;margin:6px 0 18px;line-height:1.3}
.shot{display:block;width:100%;height:auto;margin:0 auto;border:1px solid var(--rule);border-radius:4px;box-shadow:0 14px 34px rgba(15,23,42,.12)}
.shot-portrait{max-width:460px}
.shot-pdf{max-width:640px}

/* Accreditation badges (works on light + dark; white chip normalizes mixed logos) */
.badge-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.badge-chip{background:#fff;border-radius:8px;padding:12px 16px;display:inline-flex;align-items:center;box-shadow:0 2px 10px rgba(15,23,42,.12)}
.badge-chip img{height:56px;width:auto;display:block}
.badge-row--sm{gap:12px}
.badge-row--sm .badge-chip{padding:8px 12px;border-radius:6px}
.badge-row--sm .badge-chip img{height:34px}
.footer-creds{margin:8px 0 24px;text-align:center}
.footer-creds .fc-label{display:block;font-family:var(--label);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px}

/* AI / human-accountability line */
.ai-line{margin-top:24px;padding:14px 20px;border-left:3px solid var(--amber);font-family:var(--display);font-style:italic;font-size:19px;line-height:1.5;color:var(--ink)}
.sec-dark .ai-line{color:#fff}

/* Header click-to-call (replaces the MCMEA·CSBA badge slot; stays visible on mobile) */
.hd .hd-phone{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:17px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap}
.hd .hd-phone::before{content:"";width:15px;height:15px;flex:0 0 auto;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23B8651A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.37 1.93.7 2.84a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.86.57 2.84.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.hd .hd-phone:hover{color:var(--amber-on-dark)}

/* LinkedIn logo next to "Connect on LinkedIn" links */
.li-link{display:inline-flex;align-items:center;gap:8px}
.li-link::before{content:"";width:18px;height:18px;flex:0 0 auto;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%230A66C2'/%3E%3Cpath fill='white' d='M4.98 3.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H19v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21H9z'/%3E%3C/svg%3E")}

/* Contact page 2-column layout — stacks on mobile */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:36px}}

/* Representative Engagements grid */
.engagements{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.eng{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:26px 28px}
.eng .tag{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--amber-text);display:block;margin-bottom:8px}
.eng h2,.eng h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.3;margin:0 0 12px;color:var(--ink)}  /* cards use h2 (primary content under the page h1) — avoids an h1->h3 heading-order skip */
.eng p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0}
@media(max-width:760px){.engagements{grid-template-columns:1fr;gap:16px}}

/* Guide diagrams (extracted from The Iron Standard field guide) */
.diagram{margin:34px 0 6px;max-width:820px}
.diagram img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:6px;box-shadow:0 6px 24px rgba(15,23,42,.10)}
.diagram figcaption{font-family:var(--label);font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:12px}
.sec-dark .diagram figcaption,.close .diagram figcaption{color:#9FB0D0}
.band .diagram figcaption{color:var(--ink-2)}

/* Paid landing pages (/lp/) — stripped header, on-page conversion form */
.hd.lp-hd{justify-content:space-between}
.hd.lp-hd .cta{display:inline-flex;align-items:center}
.lp-form-card{max-width:640px;margin:6px auto 0;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--amber);padding:32px 30px}
.lp-form-card .form-grid{margin-top:18px;max-width:none}

@media(max-width:600px){.hero .eyebrow{font-size:clamp(9px,3vw,14px);letter-spacing:0;white-space:nowrap}}

/* region chips as buttons (a11y) */
.almap-chips button{font-family:var(--label);font-size:16px;padding:7px 14px;border:1px solid rgba(15,23,42,.18);color:var(--ink-2);background:#fff;cursor:pointer;display:inline-block;transition:all .15s;-webkit-appearance:none;appearance:none;line-height:1.4}
.almap-chips button:hover{border-color:var(--amber);color:var(--amber-text)}
.almap-chips button.active{border-color:var(--amber);color:#fff;background:var(--amber)}
/* mobile show-all for long industry list */
.ind-more-cb,.ind-more-lbl{display:none}
@media(max-width:600px){.ind-cols{max-height:300px;overflow:hidden}.ind-more-cb:checked ~ .ind-cols{max-height:none}.ind-more-lbl{display:inline-block;margin-top:16px;cursor:pointer;font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--amber-on-dark)}.ind-more-cb:checked ~ .ind-more-lbl{display:none}}

/* engagements carousel */
.eng-carousel{margin-top:30px}
.eng-stage{min-height:190px}
.eng-slide{display:none}
.eng-slide.active{display:block;animation:engfade .3s ease}
@keyframes engfade{from{opacity:0}to{opacity:1}}
.eng-nav{display:flex;align-items:center;gap:18px;margin-top:22px}
.eng-arrow{width:46px;height:46px;border:1px solid var(--rule);background:#fff;cursor:pointer;font-size:20px;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:all .15s;-webkit-appearance:none;appearance:none;border-radius:50%;line-height:1}
.eng-arrow:hover{border-color:var(--amber);color:var(--amber-text)}
.eng-counter{font-family:var(--label);font-size:16px;color:var(--ink-3);letter-spacing:.05em}