/* DeMar Consulting Group Design System — shared tokens & components
   Extracted from demarconsultinggroup.com (real CSS, real photography, real logo), 2026-05-08.
   Type: Manrope 700 display + Inter 400 body — exact stack from the live site
         (`elementor/google-fonts/css/manrope.css` + `inter.css`).
   Theme: WordPress Astra child + Elementor Pro 4.0.3 + ElementsKit Lite + Essential Addons.
   Brand: DeMar Consulting Group — full-stack business management consulting firm
          (Tax · Audit & Assurance · Office of Finance · Wealth Management ·
           Data Analytics · Digital Transformation), HQ Reno NV 89521.
   Audience: mid-market and enterprise CFO/COO/owner-operators across 8 industries:
             agriculture, construction, ecommerce, hospitality, manufacturing,
             non-profits, property management, retail. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --------------------------------------------------------------
     COLOR — extracted from `post-1500141.css` (homepage Elementor) +
     `astra-main.css` via grep frequency. The signature DeMar palette
     is a deep crimson advisory red (NOT a generic corporate blue):
       #CB3131 — 112 occurrences — primary CTA, link, accent
       #9B2525 — 46  — deep brand red, hero scrim base
       #9A2526 — 24  — heading hover red (Elementor color #9286677)
       #810000 — 13  — deepest red (Elementor color a2c0d56)
       #AC3D3D — 13  — softer red (button outline / secondary CTA)
       #292929 — 19  — secondary ink (--e-global-color-secondary)
       #000000 — 15  — primary ink (--e-global-color-primary)
     Hero gradient (live): linear-gradient(180deg, #992525 0%, #9B2525 100%)
     The deep crimson reads as advisory/expertise/trust — the way a law
     firm or boutique financial-advisory uses a wine red rather than the
     blue-and-gold of a corporate bank. Pair with off-black ink (#1a1a1a)
     and a warm ivory (#f7f4f0) for an editorial register.
   -------------------------------------------------------------- */

  /* PRIMARY brand reds — DeMar advisory crimson scale */
  --brand: #CB3131;             /* THE DeMar red — primary CTAs, links, accents (112 occ.) */
  --brand-deep: #9B2525;        /* deep crimson — hover, hero scrim base */
  --brand-soft: #AC3D3D;        /* softer brick — secondary CTA, ghost-button outlines */
  --brand-darker: #810000;      /* deepest oxblood — emphasis, footer accents */
  --brand-pale: #fbe9e9;        /* derived pale crimson — subtle surface tint */
  --brand-tint: #fdf4f3;        /* paler still — large background washes */
  --brand-mid: #9A2526;         /* heading hover variant from live CSS */

  /* INK — DeMar is unusually dark-anchored: live `--e-global-color-primary` is #000000.
     We soften to a true off-black for screen comfort but keep the canonical 100% black
     available as `--ink-pure` for photo overlays and tight editorial moments. */
  --ink-pure: #000000;          /* live: --e-global-color-primary */
  --ink-deep: #1a1a1a;          /* primary heading color — softened off-black */
  --ink: #292929;               /* live: --e-global-color-secondary, body ink */
  --ink-soft: #4a4a4a;          /* secondary copy */
  --ink-mid: #6c6c6c;           /* meta text */
  --ink-quiet: #868686;         /* meta line color from astra (#868686 — 13 occ.) */
  --ink-muted: #a8a8a8;         /* captions */
  --ink-faint: rgba(26,26,26,0.12);

  /* SURFACES — warm-ivory leaning, not cold gray */
  --bg: #ffffff;                /* page surface */
  --bg-pure: #ffffff;
  --bg-soft: #f7f4f0;           /* warm ivory — section bands */
  --bg-warm: #efe9e1;            /* deeper warm — feature panels */
  --bg-cream: #faf8f4;          /* paler cream — alternating bands */
  --bg-pale-red: #fbe9e9;       /* pale crimson — soft callout surfaces */
  --bg-charcoal: #1a1a1a;       /* dark scrim surface */
  --bg-charcoal-soft: rgba(26,26,26,0.92);
  --border: #e8e4dc;            /* warm hairline (matches ivory bg) */
  --border-warm: #ddd5c7;
  --border-soft: rgba(26,26,26,0.10);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255,255,255,0.85);
  --text-on-dark-quiet: rgba(255,255,255,0.55);

  /* ACCENT — a single warm gold for credentials / pull quotes / award strips
     (no live token but consonant with the editorial register and visible on
     the page-1500141 trust marks block).  */
  --accent-gold: #b88a3c;
  --accent-gold-soft: #f5e9cf;
  --accent-gold-deep: #8b6322;

  /* TYPE — Manrope display + Inter body, both from live Elementor Google-Fonts CSS.
     Live tokens (verbatim from --e-global-typography-*):
       primary    — Manrope 700 50px line-height 1.2em letter-spacing -1px
       secondary  — Manrope 700 37px line-height 1.2em letter-spacing -0.5px
       text       — Inter 400 16px line-height 24px (1.5)
       accent     — Manrope 700 12px (eyebrow / button caps)  */
  --font-display: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-eyebrow: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* LAYOUT — live container is a 1140px Elementor default with 1280px on inner
     editorial sections. We cap a touch wider for breathing room. */
  --container: 1240px;
  --container-narrow: 980px;
  --container-wide: 1380px;
  --container-tight: 820px;
  --gutter: 1.5rem;
  --section: 96px;              /* live: section padding-top:5em (~80px) on home */
  --section-sm: 64px;
  --block-rhythm: 96px;

  /* RADIUS — DeMar's idiosyncratic move: the dominant radius is `0px` (20 occurrences)
     and circle-only radii (`50% 50% 50% 50%` — 12 occurrences). The brand has
     ZERO 16/20/24px corporate "friendly card" radii. The 9px home-button radius
     (`9px 9px 9px 9px`) is the SOLE rounded element. This reads as professional /
     editorial / advisory — sharp planes for tile-edge cards, full circles for
     headshot avatars, NO consumer-SaaS chamfer. We bake that in deliberately. */
  --radius-none: 0;             /* DOMINANT — feature cards, image tiles, content surfaces */
  --radius-xs: 2px;             /* astra body radius */
  --radius-sm: 3px;             /* form inputs */
  --radius: 4px;                /* button radius — slightly sharper than typical */
  --radius-md: 6px;
  --radius-btn: 9px;            /* live: home hero button radius (9px 9px 9px 9px) */
  --radius-lg: 0;               /* DELIBERATE: cards stay sharp — no consumer chamfer */
  --radius-pill: 999px;         /* eyebrow chips, badges */
  --radius-circle: 50%;         /* avatars + icon circles (12 occurrences in CSS) */

  /* SHADOWS — DeMar uses a wide, soft halo `0px 0px 60px rgba(0,0,0,0.1)` on
     hero photo frames + a heavier `2px 8px 23px 3px rgba(0,0,0,0.2)` on
     hover-states for cards. NO directional drop shadows on cards — they
     stay flat by default, and lift only on hover. */
  --shadow-halo: 0 0 60px rgba(0,0,0,0.10);            /* live: hero photo halo */
  --shadow-card: none;                                  /* base — flat */
  --shadow-card-hover: 2px 8px 23px 3px rgba(0,0,0,0.18); /* live: hover lift */
  --shadow-soft: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-deep: 0 20px 50px -16px rgba(155,37,37,0.30);
  --shadow-text: 0 2px 6px rgba(0,0,0,0.40);
  --shadow-press: 0 8px 28px rgba(155,37,37,0.18);

  /* TRANSITION — live default is `transition: color 0.3s` (8 occurrences) +
     `transition: background 0.3s, border-radius 0.3s, opacity 0.3s` (6 occ.).
     The brand's pace is brisk, not cinematic — 0.3s eased — fitting a
     transactional advisory register. */
  --transition-base: 0.30s;
  --transition-fast: 0.20s;
  --transition-slow: 0.50s;
  --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-color: color 0.30s ease;
  --transition-bg: background 0.30s, border 0.30s, box-shadow 0.30s;

  /* SIGNATURE GRADIENTS — live hero scrim is a 180deg same-hue red ramp
     (subtle — not a brand-deep→brand-pale rainbow). We name it explicitly. */
  --grad-hero: linear-gradient(180deg, #992525 0%, #9B2525 100%);                       /* live: home hero */
  --grad-hero-deep: linear-gradient(180deg, #810000 0%, #9B2525 70%, #CB3131 100%);     /* deeper variant */
  --grad-crimson: linear-gradient(135deg, #CB3131 0%, #9B2525 100%);                    /* CTA-band */
  --grad-crimson-soft: linear-gradient(180deg, rgba(203,49,49,0.92) 0%, rgba(155,37,37,0.92) 100%);
  --grad-text-overlay: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.65) 100%);
  --grad-rule: linear-gradient(90deg, #CB3131 0%, #9B2525 50%, #810000 100%);           /* signature rule */
  --grad-ivory: linear-gradient(180deg, #faf8f4 0%, #ffffff 100%);
  --grad-charcoal: linear-gradient(135deg, #1a1a1a 0%, #292929 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  /* Live: Inter 400 16px line-height 24px → 1.5 */
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; transition: var(--transition-color); }
a:hover { color: var(--brand-deep); }

/* TYPOGRAPHY -----------------------------------------------
   Live values from Elementor global tokens (post-1500141.css):
     primary    — Manrope 700, 50px desktop, line-height 1.2em, letter-spacing -1px
     secondary  — Manrope 700, 37px, line-height 1.2em, letter-spacing -0.5px
     accent     — Manrope 700, 12px (eyebrow / chip)
     text       — Inter 400, 16/24
   The defining move: ALL display headings use Manrope-700 with a NEGATIVE
   letter-spacing — never zero, never positive. This compresses display
   into a confident, deliberate slab. We bake the negative tracking into
   every heading utility below. */

/* Baseline heading line-height — bare h1-h6 must not inherit body's 1.5
   or any heading wrapping past one line will overlap. */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink-deep);
  margin: 0 0 0.4em;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.030em;
  margin: 0 0 0.4em;
  color: var(--ink-deep);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 50px); /* live primary 50px */
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  color: var(--ink-deep);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 37px);  /* live secondary 37px */
  line-height: 1.2;
  letter-spacing: -0.020em;
  color: var(--ink-deep);
  margin: 0 0 12px;
}
.h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink-deep);
}
.h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.010em;
  margin: 0 0 10px;
  color: var(--ink-deep);
}
.h6 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--brand);
}

.lede {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1em;
  font-weight: 400;
}
.lede-lg {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* EYEBROW — live --e-global-typography-accent is Manrope 700 12px.
   The DeMar eyebrow has a SUBTLE crimson tinted variant on dark surfaces. */
.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 18px;
  display: inline-block;
}
.eyebrow.on-dark { color: var(--brand); opacity: 0.95; }
.eyebrow.muted   { color: var(--ink-quiet); }
.eyebrow.gold    { color: var(--accent-gold); }
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 14px;
  margin-bottom: 3px;
  opacity: 0.65;
}

/* SECTION HEAD UTILITY ---------------------------------- */
.section-head { max-width: 760px; margin: 0 0 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lede { margin: 0; }

/* CRIMSON RULE — DeMar signature page-divider rule (1px gradient bar
   anchored above section eyebrows). 56px wide, mirrors the eyebrow lead-line
   but in red rather than ink-quiet. */
.crimson-rule {
  display: inline-block;
  width: 56px;
  height: 3px;
  background: var(--grad-rule);
  margin-bottom: 22px;
  border-radius: 2px;
}
.crimson-rule.center { display: block; margin-left: auto; margin-right: auto; }
.crimson-rule.lg { width: 96px; height: 4px; }
.crimson-rule.thin { height: 2px; }

/* SECTION ----------------------------------------------- */
.section { padding: var(--section) 0; }
.section.tight { padding: var(--section-sm) 0; }
.section.cream  { background: var(--bg-cream); }
.section.warm   { background: var(--bg-warm); }
.section.soft   { background: var(--bg-soft); }
.section.pale-red { background: var(--brand-tint); }
.section.charcoal { background: var(--bg-charcoal); color: var(--text-on-dark); }
.section.charcoal h1, .section.charcoal h2,
.section.charcoal h3, .section.charcoal h4,
.section.charcoal h5 { color: #fff; }
.section.charcoal .lede { color: var(--text-on-dark-muted); }
.section.crimson { background: var(--grad-hero); color: var(--text-on-dark); }
.section.crimson h1, .section.crimson h2, .section.crimson h3,
.section.crimson h4, .section.crimson h5 { color: #fff; }
.section.crimson .lede { color: var(--text-on-dark-muted); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: var(--container-narrow); }
.container.wide   { max-width: var(--container-wide); }
.container.tight  { max-width: var(--container-tight); }

/* BUTTONS ----------------------------------------------- */
/* Live default Elementor button: 9px radius corners, Manrope 12-14px caps,
   color #fff on var(--brand). Hover: deeper red, slight lift. */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-eyebrow);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 16px 28px;
  background: var(--brand);
  color: #fff;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:hover,
.button:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-press);
}
.btn .arrow,
.button .arrow {
  display: inline-block;
  transition: transform 0.30s ease;
}
.btn:hover .arrow,
.button:hover .arrow {
  transform: translateX(4px);
}
.btn-lg {
  padding: 20px 36px;
  font-size: 14px;
}
.btn-sm {
  padding: 12px 22px;
  font-size: 11px;
}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-ghost:hover {
  background: var(--brand);
  color: #fff;
}
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.85);
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--brand-deep);
  border-color: #fff;
}
.btn-dark {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: #fff;
}
.btn-dark:hover {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-text {
  background: transparent;
  border: none;
  color: var(--brand);
  padding: 8px 0;
  font-size: 13px;
  letter-spacing: 0.10em;
  border-radius: 0;
}
.btn-text:hover {
  background: transparent;
  color: var(--brand-deep);
  transform: none;
  box-shadow: none;
}
.btn-text::after {
  content: '→';
  transition: transform 0.30s ease;
  display: inline-block;
}
.btn-text:hover::after { transform: translateX(4px); }

/* CARD — base flat surface, lifts on hover (DeMar signature) ---- */
.card {
  background: var(--bg-pure);
  border: 1px solid var(--border);
  border-radius: var(--radius-none); /* DELIBERATELY sharp */
  padding: 32px 28px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.card.flat:hover {
  transform: none;
  box-shadow: var(--shadow-halo);
}
.card.crimson-top {
  border-top: 4px solid var(--brand);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card.crimson-side {
  border-left: 4px solid var(--brand);
}
.card .h4, .card h4 {
  margin: 0 0 8px;
  font-size: 20px;
}
.card p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}
.card .meta {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 8px;
}

/* TILE — variant for service-area / practice-area cards.
   Crimson icon ring + flat surface + sharp corners. */
.tile {
  background: var(--bg-pure);
  border: 1px solid var(--border);
  padding: 36px 32px 32px;
  position: relative;
  transition: var(--transition);
}
.tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--grad-rule);
  transition: width 0.45s var(--ease-cinematic);
}
.tile:hover::before { width: 100%; }
.tile:hover {
  box-shadow: var(--shadow-card-hover);
}
.tile .icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-pale);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: var(--transition);
}
.tile:hover .icon-circle {
  background: var(--brand);
  color: #fff;
}
.tile .icon-circle svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.tile h4 { margin: 0 0 10px; font-size: 21px; }
.tile p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; margin: 0 0 14px; }
.tile .more {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

/* AVATAR / HEADSHOT — circle by default (consulting firm signature) ---- */
.avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  flex: 0 0 auto;
}
.avatar.lg { width: 140px; height: 140px; }
.avatar.xl { width: 200px; height: 200px; }
.avatar.square { border-radius: 0; }

/* PRINCIPAL/CONSULTANT BIO CARD ------------------------- */
.bio-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px;
  background: var(--bg-pure);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.bio-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
}
.bio-card .avatar { width: 96px; height: 96px; }
.bio-card .who h4 {
  margin: 0 0 4px;
  font-size: 19px;
  letter-spacing: -0.015em;
}
.bio-card .who .role {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 10px;
  display: block;
}
.bio-card .who p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.bio-card .creds {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.bio-card .creds .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

/* CREDENTIALS STRIP — DeMar signature pattern ----------- */
.creds-strip {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 28px 32px;
  background: var(--bg-soft);
  border-top: 3px solid var(--brand);
}
.creds-strip .cred {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.creds-strip .cred::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}
.creds-strip .cred:first-child::before { display: none; }

/* STAT — display number + label. Used in engagement-stats blocks */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand);
}
.stat .num.ink { color: var(--ink-deep); }
.stat .label {
  font-family: var(--font-eyebrow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stat .desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ENGAGEMENT-STATS STRIP — 3-up advisory snapshot block ---- */
.engagement-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--bg-pure);
  border: 1px solid var(--border);
}
.engagement-stats .stat {
  padding: 40px 32px;
  border-right: 1px solid var(--border);
  gap: 8px;
}
.engagement-stats .stat:last-child { border-right: none; }
@media (max-width: 720px) {
  .engagement-stats { grid-template-columns: 1fr; }
  .engagement-stats .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .engagement-stats .stat:last-child { border-bottom: none; }
}

/* PULLQUOTE — testimonial / advisory voice ------------- */
.pullquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink-deep);
  border-left: 4px solid var(--brand);
  padding: 16px 0 16px 28px;
  margin: 32px 0;
}
.pullquote .attribution {
  display: block;
  margin-top: 16px;
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  letter-spacing: 0.14em;
}

/* HAIRLINE / DIVIDER ------------------------------------ */
hr,
.hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}
.hr-thick { border-top: 2px solid var(--ink-faint); }
.hr-crimson { border-top: 1px solid var(--brand); }
.hr-deep { border-top: 1px solid var(--brand-deep); }

/* NAV (live header pattern) ---------------------------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: var(--bg-pure);
  border-bottom: 1px solid var(--border);
}
.nav .lockup img { height: 40px; width: auto; max-width: 220px; }
.nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}
.nav ul a {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-deep);
  text-decoration: none;
  letter-spacing: 0;
  transition: var(--transition-color);
  position: relative;
  padding: 6px 0;
}
.nav ul a:hover {
  color: var(--brand);
}
.nav ul a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: width 0.30s ease;
}
.nav ul a:hover::after { width: 100%; }
.nav .right { display: flex; align-items: center; gap: 16px; }

/* HERO — photo-led + centered ---------------------------- */
.hero-photo {
  position: relative;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 120px 32px 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.10) 0%, rgba(26,26,26,0.60) 100%);
}
.hero-photo .container { position: relative; z-index: 1; max-width: 880px; }
.hero-photo h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 70px);
  line-height: 1.05;
  letter-spacing: -0.030em;
  color: #fff;
  margin: 0 0 18px;
}
.hero-photo .lede { color: rgba(255,255,255,0.92); max-width: 620px; }
.hero-photo .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }

.hero-centered {
  background: var(--grad-hero);
  color: #fff;
  padding: 140px 32px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-centered::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 100%, rgba(255,255,255,0.08) 0%, transparent 60%);
}
.hero-centered .container { position: relative; z-index: 1; max-width: 760px; }
.hero-centered h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.030em;
  color: #fff;
  margin: 0 0 20px;
}
.hero-centered .lede { color: rgba(255,255,255,0.90); margin: 0 auto 32px; max-width: 600px; }

/* BACKGROUND TEXTURE — DeMar's live header texture ------- */
.bg-texture {
  background-image: url('assets/demarco-brand/texture-header.png');
  background-repeat: repeat;
  background-size: 120px 120px;
}
.bg-texture-crimson {
  background:
    var(--grad-hero),
    url('assets/demarco-brand/texture-header.png') repeat;
  background-size: cover, 120px 120px;
  background-blend-mode: multiply;
}

/* GRID UTILITIES ---------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
}

/* TWO-COLUMN row (image-left/right-text) ---------------- */
.row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.row-2col.flip > .col-img { order: 2; }
.row-2col .col-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
}
@media (max-width: 800px) {
  .row-2col { grid-template-columns: 1fr; gap: 32px; }
  .row-2col.flip > .col-img { order: 0; }
}

/* FOOTER -------------------------------------------------- */
.footer {
  background: var(--ink-deep);
  color: rgba(255,255,255,0.78);
  padding: 72px 32px 32px;
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-rule);
}
.footer .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
@media (max-width: 880px) {
  .footer .grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .footer .grid { grid-template-columns: 1fr; }
}
.footer h4 {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}
.footer .lockup-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.020em;
  color: #fff;
  margin-bottom: 12px;
}
.footer .blurb {
  font-size: 13.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 36ch;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer ul li { margin-bottom: 9px; font-size: 13.5px; }
.footer ul a {
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  transition: var(--transition-color);
}
.footer ul a:hover { color: var(--brand); }
.footer .legal {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* DESIGN-SYSTEM PAGE CHROME (used by design-system.html) -- */
.ds-shell { padding: 0; }
.ds-hero {
  background: var(--bg-soft);
  padding: 120px 32px 72px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.ds-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-rule);
}
.ds-hero .display { max-width: 18ch; margin: 18px 0; }
.ds-hero .lede { max-width: 60ch; }

.ds-section {
  padding: 80px 32px;
  border-bottom: 1px solid var(--border);
}
.ds-section h2 { margin: 0 0 16px; font-size: clamp(28px, 3vw, 38px); }
.ds-section .section-intro {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .swatch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .swatch-grid { grid-template-columns: repeat(2, 1fr); } }
.swatch {
  border: 1px solid var(--border);
  background: var(--bg-pure);
  overflow: hidden;
}
.swatch .chip {
  height: 80px;
}
.swatch .meta {
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.swatch .meta strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  margin-bottom: 4px;
  color: var(--ink-deep);
}
.swatch .meta span { color: var(--ink-quiet); }

.type-spec {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.type-spec:last-child { border-bottom: none; }
.type-spec .label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  text-transform: uppercase;
}

/* DS NAV — sticky 3-tab top bar (ds/sections/pages) ----- */
.ds-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.ds-nav .lockup-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.010em;
  color: var(--ink-deep);
  margin: 0;
}
.ds-nav .lockup-text small {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
  margin-left: 8px;
  text-transform: uppercase;
}
.ds-nav .tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
  background: var(--bg-soft);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
}
.ds-nav .tab {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 6px;
  transition: var(--transition);
}
.ds-nav .tab:hover { color: var(--brand); }
.ds-nav .tab.active {
  background: var(--brand);
  color: #fff;
}

/* PALETTE TOGGLE WIDGET — styled by palette-toggle.js's injected styles.
   Do NOT add custom .palette-toggle rules here; they will fight the JS-injected
   pt-handle / pt-panel / pt-list / pt-item / pt-name / pt-swatches selectors. */

/* ENGAGEMENT-PATHS — DeMar-specific reframing of ways-to-give */
.engagement-paths {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg-pure);
}
@media (max-width: 1000px) { .engagement-paths { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .engagement-paths { grid-template-columns: 1fr; } }
.engagement-paths .path {
  padding: 36px 28px 28px;
  border-right: 1px solid var(--border);
  position: relative;
  transition: var(--transition);
}
.engagement-paths .path:last-child { border-right: none; }
.engagement-paths .path::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--brand);
  transition: width 0.4s var(--ease-cinematic);
}
.engagement-paths .path:hover::before { width: 100%; }
.engagement-paths .path:hover {
  background: var(--bg-soft);
}
.engagement-paths .path .num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.engagement-paths .path h4 { margin: 0 0 8px; font-size: 18px; }
.engagement-paths .path p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
@media (max-width: 1000px) {
  .engagement-paths .path:nth-child(2) { border-right: none; }
}

/* CASE-STUDY CARD — DeMar signature ---------------------- */
.case-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-pure);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  overflow: hidden;
}
.case-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.case-card .media {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-soft);
}
.case-card .body { padding: 24px 24px 28px; }
.case-card .industry {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
  display: block;
}
.case-card h4 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.case-card .desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 16px;
}
.case-card .meta-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.case-card .meta-row strong { color: var(--brand); font-weight: 700; }

/* EXPERTISE MATRIX — service × industry grid ------------- */
.expertise-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg-pure);
  border: 1px solid var(--border);
}
.expertise-matrix th, .expertise-matrix td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 14px;
  text-align: center;
  vertical-align: middle;
}
.expertise-matrix th {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-soft);
}
.expertise-matrix th.industry {
  text-align: left;
  border-right: 1px solid var(--brand);
  background: var(--ink-deep);
  color: #fff;
}
.expertise-matrix td:first-child {
  text-align: left;
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--ink-deep);
  background: var(--bg-soft);
  text-transform: none;
  border-right: 1px solid var(--brand);
}
.expertise-matrix td .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
}
.expertise-matrix td .dot.lite { background: var(--brand-soft); opacity: 0.5; }
.expertise-matrix td .dot.empty { background: transparent; border: 1px solid var(--border); }
.expertise-matrix th:last-child, .expertise-matrix td:last-child { border-right: none; }
.expertise-matrix tr:last-child td { border-bottom: none; }

/* CLIENT-LOGO STRIP — flatten / desaturate by default --- */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: center;
  padding: 32px 0;
}
@media (max-width: 800px) { .logo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-strip { grid-template-columns: repeat(2, 1fr); } }
.logo-strip .lg-cell {
  aspect-ratio: 5/4;
  background: var(--bg-pure);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: var(--transition);
}
.logo-strip .lg-cell:hover {
  filter: none;
  opacity: 1;
}
.logo-strip .lg-cell .placeholder {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-quiet);
  letter-spacing: -0.010em;
  text-align: center;
  line-height: 1.25;
}

/* INDUSTRIES-SERVED — 8-up tile grid w/ icon ------------- */
.industries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (max-width: 880px) { .industries { grid-template-columns: repeat(2, 1fr); } }
.industries .ind {
  background: var(--bg-pure);
  padding: 32px 24px;
  text-align: center;
  transition: var(--transition);
  position: relative;
}
.industries .ind:hover {
  background: var(--brand);
  color: #fff;
}
.industries .ind:hover h5,
.industries .ind:hover p { color: #fff; }
.industries .ind:hover .icon { color: #fff; }
.industries .ind .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  color: var(--brand);
  transition: var(--transition);
}
.industries .ind .icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.industries .ind h5 {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -0.010em;
}
.industries .ind p {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* TESTIMONIAL CARD --------------------------------------- */
.testimonial {
  background: var(--bg-soft);
  padding: 40px 36px;
  border-left: 4px solid var(--brand);
}
.testimonial .quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink-deep);
  margin: 0 0 24px;
}
.testimonial .quote::before {
  content: '"';
  font-size: 56px;
  line-height: 0.6;
  color: var(--brand);
  margin-right: 4px;
  font-weight: 800;
}
.testimonial .who {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial .who .avatar { width: 56px; height: 56px; }
.testimonial .who .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-deep);
  margin: 0;
  letter-spacing: -0.010em;
}
.testimonial .who .role {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
  font-weight: 700;
}

/* INSIGHT CARD — editorial article tile ------------------ */
.insight-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-pure);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.insight-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
}
.insight-card .media {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}
.insight-card .body { padding: 24px 24px 26px; }
.insight-card .cat {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
  display: block;
}
.insight-card .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.010em;
  color: var(--ink-deep);
  margin: 0 0 10px;
}
.insight-card .meta-row {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
  margin: 0;
}

/* FAQ ACCORDION ------------------------------------------ */
.faq details {
  background: var(--bg-pure);
  border: 1px solid var(--border);
  padding: 22px 28px;
  margin-bottom: 12px;
  border-left: 4px solid var(--brand);
  transition: var(--transition);
}
.faq details:hover {
  box-shadow: var(--shadow-card-hover);
}
.faq summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.010em;
  color: var(--ink-deep);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--brand);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s ease;
  flex: 0 0 auto;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer {
  padding-top: 14px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* TABS --------------------------------------------------- */
.tabs-h .tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tabs-h .tab-btn {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 14px 22px;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  margin-bottom: -2px;
}
.tabs-h .tab-btn:hover { color: var(--brand); }
.tabs-h .tab-btn.active {
  color: var(--brand);
  border-bottom: 2px solid var(--brand);
}
.tabs-h .tab-pane { display: none; }
.tabs-h .tab-pane.active { display: block; }

/* GENERIC CONTENT PAGE WRAPPER --------------------------- */
.page-hero {
  background: var(--bg-soft);
  padding: 100px 32px 60px;
  position: relative;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-rule);
}
.page-hero .crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  margin-bottom: 18px;
}
.page-hero .crumb a { color: var(--brand); }
.page-hero h1 { margin: 0 0 18px; max-width: 22ch; }
.page-hero .lede { max-width: 60ch; }

/* UTILITIES --------------------------------------------- */
.ta-center { text-align: center; }
.ta-left { text-align: left; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-md { margin-top: 24px; }
.mb-md { margin-bottom: 24px; }
.mt-lg { margin-top: 48px; }
.mb-lg { margin-bottom: 48px; }
.color-brand { color: var(--brand); }
.color-deep { color: var(--brand-deep); }
.color-ink { color: var(--ink-deep); }
.bg-pure { background: var(--bg-pure); }
.bg-soft { background: var(--bg-soft); }
.bg-warm { background: var(--bg-warm); }
.bg-cream { background: var(--bg-cream); }
.bg-charcoal { background: var(--ink-deep); color: #fff; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-md { gap: 16px; }
.gap-lg { gap: 32px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.maxw-prose { max-width: 65ch; }

/* RESPONSIVE NAV -------------------------------------- */
@media (max-width: 880px) {
  .nav { flex-wrap: wrap; }
  .nav ul { gap: 16px; font-size: 13px; }
  .ds-nav { padding: 12px 18px; }
  .ds-nav .lockup-text { font-size: 13px; }
  .ds-nav .tabs { font-size: 10px; }
  .ds-nav .tab { padding: 8px 12px; }
}