/* ============================================================
   Veteran CPR — shared design system (fonts + tokens + components)
   Extracted from the original build so post pages match exactly.
   Edit here to change the system site-wide.
   ============================================================ */

/* ============================================================
   Veteran CPR — Design System
   Single entry point. Consumers link THIS file only.
   Import order matters: fonts → tokens → base.
   ============================================================ */

/* ============================================================
   Veteran CPR — Webfonts
   ------------------------------------------------------------
   SUBSTITUTION NOTE: The brand's printed pieces use unidentified
   commercial faces. These Google Fonts are the closest free
   stand-ins and define the system's type voice:
     • Poiret One  → the tall, flat-topped Art-Deco display face
                     on the hang tag ("Veteran Experience CPR…")
     • Jost        → the light, airy geometric sans of the
                     "veteran cpr" wordmark + all UI text
     • Tinos       → Times-metric serif for the contact /
                     fine-print accent lines on the sticker
   Replace with licensed originals if/when available.
   ============================================================ */

/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/389ee32a-513a-4ca4-a112-71956fa0e17f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/e6062589-7945-45d2-ac07-e6a620f043a3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/b486f517-b4b4-40df-ad21-53a6bf17288c.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/389ee32a-513a-4ca4-a112-71956fa0e17f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/e6062589-7945-45d2-ac07-e6a620f043a3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/b486f517-b4b4-40df-ad21-53a6bf17288c.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/389ee32a-513a-4ca4-a112-71956fa0e17f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/e6062589-7945-45d2-ac07-e6a620f043a3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/b486f517-b4b4-40df-ad21-53a6bf17288c.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/389ee32a-513a-4ca4-a112-71956fa0e17f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/e6062589-7945-45d2-ac07-e6a620f043a3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/b486f517-b4b4-40df-ad21-53a6bf17288c.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/2e6884dc-7208-4254-9c52-812ac6659631.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/933a3e55-a55c-41d5-a95b-c5c3016cccbf.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/67c26d22-17c8-4d1f-9dff-a095c27b5372.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/bc54d898-2819-4ff0-baee-880fcf66663b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/367c891a-68b1-474a-9ac5-5ac8ec52ec27.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/5c29d8f0-0541-4df2-9758-5a0dfba359db.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/eae80e83-ebb4-4d9b-a619-84753981704f.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/8cccc1ad-c448-444c-b49b-76200221f24c.woff2") format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/37cc7cbb-cc0e-4d94-9c8a-635ccc5bd26e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/d27c08c2-c9f4-44b2-a4de-0c9f724fa330.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/d393143d-587c-4178-bfe1-7ea4925262f9.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fe2842f4-74d9-4df1-82b1-6468d1b7a2ee.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/92a45899-5a09-4730-b6cf-d75a9702bd6f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/e0b6f849-7112-4733-9103-698b1a43c58c.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/5b518902-e90f-4eca-9b58-3b70786b0531.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/b1640f5f-d238-4073-9212-3e4dc09aa070.woff2") format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/f8fef213-b138-4745-8b39-418545a4a8d1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/dd7e8f5e-f604-4033-a57e-2a89e46cc0e0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/035dad48-2030-4af3-bdc4-e76fb06870da.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   Veteran CPR — Color
   Stark, pure black & white. No grays, no accents, no gradients.
   The only "tints" permitted are opacity-based hairlines, used
   sparingly for structure (dividers, disabled states).
   ============================================================ */

:root {
  /* — Base ink ————————————————————————————— */
  --vc-black: #000000;
  --vc-white: #FFFFFF;

  /* — Opacity-based hairlines (the one concession to non-pure
       values — used for borders/dividers, never as fills) ——— */
  --vc-ink-12: rgba(0, 0, 0, 0.12);   /* hairline on white */
  --vc-ink-24: rgba(0, 0, 0, 0.24);
  --vc-ink-55: rgba(0, 0, 0, 0.55);   /* muted ink on white */
  --vc-paper-16: rgba(255, 255, 255, 0.16); /* hairline on black */
  --vc-paper-32: rgba(255, 255, 255, 0.32);
  --vc-paper-64: rgba(255, 255, 255, 0.64); /* muted paper on black */

  /* — Semantic: default (paper) surface ———————————— */
  --bg: var(--vc-white);
  --fg: var(--vc-black);
  --fg-muted: var(--vc-ink-55);
  --hairline: var(--vc-ink-12);
  --hairline-strong: var(--vc-ink-24);

  /* — Semantic: inverse (ink) surface ——————————————
       Apply via .on-ink scope below or inline overrides.   */
  --bg-inverse: var(--vc-black);
  --fg-inverse: var(--vc-white);

  /* — Component aliases ———————————————————————— */
  --surface: var(--bg);
  --surface-ink: var(--vc-black);
  --text-body: var(--fg);
  --text-muted: var(--fg-muted);
  --focus-ring: var(--vc-black);
}

/* Inverse scope: drop this class on any container to flip the
   whole palette to white-on-black (the brand's signature mode). */
.on-ink {
  --bg: var(--vc-black);
  --fg: var(--vc-white);
  --fg-muted: var(--vc-paper-64);
  --hairline: var(--vc-paper-16);
  --hairline-strong: var(--vc-paper-32);
  --surface: var(--vc-black);
  --text-body: var(--vc-white);
  --text-muted: var(--vc-paper-64);
  --focus-ring: var(--vc-white);
  background: var(--vc-black);
  color: var(--vc-white);
}

/* ============================================================
   Veteran CPR — Typography
   Three voices:
     1. DISPLAY  Poiret One — Art-Deco, flat-topped, for hero
        statements & the legal business name. Generous tracking.
     2. SANS     Jost — light geometric, the working UI + the
        lowercase wordmark voice. Airy when used large.
     3. SERIF    Tinos — Times-metric, reserved ONLY for contact
        lines, fine print, and the occasional italic flourish.
   ============================================================ */

:root {
  /* — Families ———————————————————————————— */
  --font-display: 'Poiret One', 'Century Gothic', system-ui, sans-serif;
  --font-sans: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --font-serif: 'Tinos', 'Times New Roman', Times, serif;

  /* — Weights (Jost) — @kind font ————————————— */
  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */

  /* — Fluid display sizes — @kind font ——————————— */
  --fs-hero: clamp(3rem, 7vw, 6rem);            /* @kind font */
  --fs-display: clamp(2.25rem, 4.5vw, 3.5rem);  /* @kind font */
  --fs-h1: clamp(1.875rem, 3vw, 2.75rem);       /* @kind font */
  --fs-h2: clamp(1.5rem, 2.2vw, 2rem);          /* @kind font */
  --fs-h3: 1.5rem;                              /* @kind font */

  /* — Text sizes — @kind font ————————————————— */
  --fs-lead: 1.375rem;   /* @kind font */
  --fs-body: 1.0625rem;  /* @kind font */
  --fs-sm: 0.9375rem;    /* @kind font */
  --fs-xs: 0.8125rem;    /* @kind font */

  /* — Line heights — @kind font ———————————————— */
  --lh-tight: 1.05;    /* @kind font */
  --lh-snug: 1.2;      /* @kind font */
  --lh-normal: 1.55;   /* @kind font */
  --lh-relaxed: 1.7;   /* @kind font */

  /* — Tracking — the airy, spaced-out signature — @kind font — */
  --tracking-hero: 0.04em;      /* @kind font */
  --tracking-display: 0.06em;   /* @kind font */
  --tracking-wordmark: 0.34em;  /* @kind font */
  --tracking-label: 0.22em;     /* @kind font */
  --tracking-body: 0.01em;      /* @kind font */
}

/* — Utility classes used across cards & kits ——————————— */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: 400;
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
}
.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); }
.t-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); }

.t-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  text-transform: lowercase;
  letter-spacing: var(--tracking-wordmark);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--fs-xs);
}
.t-lead { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: var(--fs-lead); line-height: var(--lh-relaxed); }
.t-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-serif { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-serif-italic { font-family: var(--font-serif); font-style: italic; }

/* ============================================================
   Veteran CPR — Spacing
   8-pt base rhythm. The brand lives on GENEROUS negative space —
   when in doubt, use the larger step. Section padding is large.
   ============================================================ */

:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --space-12: 12rem;   /* 192 — hero / section breathing room */

  /* — Semantic ————————————————————————— */
  --gap-inline: var(--space-3);
  --gap-stack: var(--space-5);
  --pad-control: var(--space-3) var(--space-5);
  --pad-card: var(--space-7);
  --section-y: var(--space-10);
  --container-max: 1200px;
  --measure: 62ch;   /* readable line length */
}

/* ============================================================
   Veteran CPR — Radius, Borders & Elevation
   The brand is FLAT and hard-edged — surfaces are crisp
   rectangles. The single warm gesture is the fully-rounded
   PILL (buttons, tags, inputs), which echoes the logo's
   rounded stroke caps. Shadows are essentially absent;
   structure comes from hairline borders and pure contrast.
   ============================================================ */

:root {
  /* — Radii ———————————————————————————— */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;     /* cards, media frames */
  --radius-lg: 16px;
  --radius-pill: 999px; /* THE signature — buttons, tags, inputs */
  --radius-cap: 999px;  /* rounded stroke caps reference */

  /* — Border widths ———————————————————————— */
  --border-hair: 1px;
  --border-bold: 2px;   /* primary outlines, focus */

  /* — Elevation: prefer hairlines; shadow used only for
       transient overlays (dialog, toast, dropdown) ————— */
  --shadow-none: none;
  --shadow-overlay: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 8px 24px -10px rgba(0, 0, 0, 0.35);

  /* — Focus ring ———————————————————————— */
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* ============================================================
   Veteran CPR — Motion
   Calm and clinical. Movement is restrained: short, linear-ish
   fades and slides. NO bounce, NO spring, NO decorative loops.
   Hover = subtle opacity / invert. Press = a small, quick scale.
   ============================================================ */

:root {
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast: 140ms;    /* @kind other */
  --dur-base: 220ms;    /* @kind other */
  --dur-slow: 360ms;    /* @kind other */

  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);       /* @kind other */
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);          /* @kind other */

  /* Interaction primitives */
  --press-scale: 0.97;   /* @kind other */
  --hover-dim: 0.85;     /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;  /* @kind other */
    --dur-fast: 0ms;     /* @kind other */
    --dur-base: 0ms;     /* @kind other */
    --dur-slow: 0ms;     /* @kind other */
  }
}

/* ============================================================
   Veteran CPR — Base
   Light element defaults so any page that links styles.css
   inherits the brand voice. Keep this minimal; tokens do the
   heavy lifting.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-display);
}

p { margin: 0; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: var(--hover-dim); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

img, svg { display: block; max-width: 100%; }

/* — Layout helpers ——————————————————————— */
.vc-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.vc-measure { max-width: var(--measure); }
.vc-center { text-align: center; }
.vc-stack { display: flex; flex-direction: column; gap: var(--gap-stack); }
.vc-row { display: flex; align-items: center; gap: var(--gap-inline); }



/* ============================================================
   Veteran CPR — website styles
   Links the design-system tokens via styles.css; this file is
   layout + page-specific components only. Black & white only.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: #000; font-family: var(--font-sans); font-weight: 400; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 32px; }
.wrap--narrow { max-width: 820px; }

/* ---------- Typo helpers ---------- */
.display { font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: 1.1; margin: 0; }
.eyebrow { font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: 13px; }
.lead { font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.7; }
.muted { color: var(--fg-muted); }
.muted-ink { color: var(--vc-paper-64); }
.serif { font-family: var(--font-serif); }
.it { font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label);
  border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer;
  white-space: nowrap; font-size: 13px; padding: 15px 32px;
  transition: opacity .15s ease, transform .08s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn--lg { font-size: 14px; padding: 18px 40px; }
.btn--primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--primary:hover { opacity: .85; }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--secondary:hover { background: var(--fg); color: var(--bg); }

/* ---------- Diamond + ECG motif ---------- */
.diamond { width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); }
.ecg { width: 100%; height: 56px; color: #000; overflow: visible; }
.ecg path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ecg--draw path {
  stroke-dasharray: var(--len, 2600); stroke-dashoffset: var(--len, 2600);
}
.ecg--draw.in path { animation: ecgdraw 1.6s var(--ease-out, ease-out) forwards; }
@keyframes ecgdraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ecg--draw path { stroke-dashoffset: 0; }
  .ecg--draw.in path { animation: none; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88);
  backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--hairline);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 82px; }
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand img { width: 38px; height: 38px; border-radius: 8px; }
.brand .word { font-weight: 300; text-transform: lowercase; letter-spacing: var(--tracking-wordmark); font-size: 18px; white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__link { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: opacity .15s ease; }
.nav__link:hover { opacity: .5; }
.nav__link.is-active { font-weight: 500; }

/* ---------- Hero ---------- */
.hero { background: #000; color: #fff; text-align: center; position: relative; overflow: hidden; }
.hero__inner { padding: 116px 32px 104px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.hero h1 { font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: 1.06;
  font-size: clamp(2.7rem, 6.4vw, 5.6rem); margin: 0; max-width: 15ch; text-wrap: balance; }
.hero .lead { color: var(--vc-paper-64); max-width: 44ch; }
.hero__badges { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero .ecg { color: rgba(255,255,255,.5); max-width: 460px; margin-top: 6px; }

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
.section--ink { background: #000; color: #fff; }
.section__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 60px; }
.section__head h2 { font-family: var(--font-display); letter-spacing: var(--tracking-display);
  font-size: clamp(2rem, 3.6vw, 3rem); margin: 0; line-height: 1.12; }
.section__head .lead { max-width: 54ch; }

/* ---------- Chain of Survival ---------- */
.chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 18px; }
.link { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 6px; }
.link__num { width: 54px; height: 54px; border-radius: 999px; border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; }
.link h4 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: 500; line-height: 1.3; }
.link p { margin: 0; font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--vc-paper-64); max-width: 22ch; }
.chain-ecg { margin: 8px 0 44px; color: rgba(255,255,255,.55); }

/* ---------- Info value props ---------- */
.props { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 56px; margin-top: 16px; }
.prop { display: flex; gap: 18px; align-items: flex-start; }
.prop .d { margin-top: 9px; flex: none; }
.prop h4 { margin: 0 0 6px; font-size: 17px; font-weight: 500; }
.prop p { margin: 0; font-weight: 300; line-height: 1.6; color: var(--fg-muted); }

/* ---------- Packages ---------- */
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pkg, .link, .prop, .bio { min-width: 0; }
.pkg { border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); padding: 40px 34px;
  display: flex; flex-direction: column; gap: 18px; transition: border-color .2s ease, transform .2s ease; }
.pkg:hover { border-color: #000; transform: translateY(-3px); }
.pkg--feature { background: #000; color: #fff; border-color: #000; }
.pkg--soon { opacity: .68; }
.pkg__top { display: flex; align-items: center; justify-content: space-between; }
.pkg h3 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: var(--tracking-display); margin: 0; line-height: 1.15; }
.pkg__price { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; white-space: nowrap; }
.pkg__price small { font-family: var(--font-sans); font-weight: 300; font-size: .8rem; letter-spacing: .04em; }
.pkg p.desc { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.6; }
.pkg .desc.on-feature { color: var(--vc-paper-64); }
.pkg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pkg li { display: flex; gap: 12px; align-items: flex-start; font-weight: 300; font-size: 14px; line-height: 1.5; }
.pkg li::before { content: ""; width: 6px; height: 6px; margin-top: 7px; flex: none; background: currentColor; transform: rotate(45deg); opacity: .85; }
.pkg .btn { margin-top: auto; }
.badge { display: inline-flex; align-items: center; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: 11px; line-height: 1; }
.badge--solid { background: var(--fg); color: var(--bg); padding: 7px 13px; border-radius: var(--radius-pill); }
.badge--outline { border: 1px solid currentColor; padding: 6px 12px; border-radius: var(--radius-pill); }

/* ---------- Bios ---------- */
.bios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px; }
.bio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.bio image-slot { width: 220px; height: 220px; border: 1px solid var(--hairline-strong); }
.bio h3 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: var(--tracking-display); margin: 0; }
.bio .role { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-muted); font-weight: 500; }
.bio p.text { margin: 0; font-weight: 300; line-height: 1.7; color: var(--fg-muted); max-width: 38ch; }

/* ---------- Contact / Footer ---------- */
.footer { background: #000; color: #fff; text-align: center; padding: 96px 32px 56px; }
.footer .brand { justify-content: center; }
.footer .brand .word { color: #fff; }
.footer__contact { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.7; margin-top: 30px; }
.footer__contact a:hover { opacity: .7; }
.footer__name { margin-top: 38px; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--vc-paper-64); }
.footer .diamond { margin: 32px auto 0; }

/* ---------- Blog ---------- */
.posts { display: flex; flex-direction: column; }
.post { display: grid; grid-template-columns: 160px 1fr auto; gap: 32px; align-items: baseline;
  padding: 38px 0; border-bottom: 1px solid var(--hairline); transition: opacity .15s ease; }
.post:first-child { border-top: 1px solid var(--hairline); }
.post:hover { opacity: .58; }
.post__date { font-family: var(--font-serif); font-size: 14px; color: var(--fg-muted); }
.post__title { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: var(--tracking-display); line-height: 1.2; }
.post__excerpt { font-weight: 300; color: var(--fg-muted); margin-top: 8px; line-height: 1.6; font-size: 15px; }
.post__arrow { font-size: 22px; align-self: center; }
.page-head { text-align: center; padding: 96px 0 64px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.page-head h1 { font-family: var(--font-display); letter-spacing: var(--tracking-display); font-size: clamp(2.4rem, 5vw, 4rem); margin: 0; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out, ease), transform .7s var(--ease-out, ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .chain { grid-template-columns: 1fr 1fr; gap: 28px; }
  .chain-ecg { display: none; }
  .pkgs { grid-template-columns: 1fr; }
  .props { grid-template-columns: 1fr; }
  .bios { grid-template-columns: 1fr; gap: 48px; }
  .post { grid-template-columns: 1fr; gap: 8px; }
  .post__arrow { display: none; }
  .nav__links { gap: 20px; }
  .brand .word { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 22px; }
  .nav__link.hide-xs { display: none; }
}

/* ============================================================
   Blog post article (posts/_template.html and all post pages)
   ============================================================ */
.article { padding-bottom: 40px; }
.article__head { padding: 80px 0 40px; display: flex; flex-direction: column; gap: 18px; }
.article__cat { align-self: flex-start; }
.article__cat .pill {
  display: inline-flex; align-items: center; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill); padding: 8px 18px; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: #000; background: #fff;
}
.article__head h1 {
  font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: 1.08;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 0; max-width: 22ch; text-wrap: balance;
}
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  font-family: var(--font-serif); font-size: 14.5px; color: var(--fg-muted);
}
.article__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hairline-strong); }
.article__lead { font-weight: 300; font-size: clamp(1.08rem, 1.6vw, 1.32rem); line-height: 1.7; color: var(--fg-muted); max-width: 60ch; }

.article__body { font-weight: 300; font-size: 1.06rem; line-height: 1.8; color: #111; max-width: 68ch; }
.article__body > * + * { margin-top: 1.25em; }
.article__body h2 {
  font-family: var(--font-display); letter-spacing: var(--tracking-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; color: #000; margin-top: 1.9em;
}
.article__body h3 { font-size: 1.2rem; font-weight: 500; color: #000; margin-top: 1.6em; }
.article__body p { margin: 0; }
.article__body a { color: #000; text-decoration: underline; text-underline-offset: .16em; }
.article__body a:hover { opacity: .6; }
.article__body ul, .article__body ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; }
.article__body li { line-height: 1.7; }
.article__body strong { font-weight: 500; color: #000; }
.article__body blockquote {
  border-left: 2px solid #000; padding: 4px 0 4px 22px; margin-left: 0;
  font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: #000;
}
.article__callout {
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  padding: 26px 28px; background: #fafafa;
}
.article__callout h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.article__callout p { margin: 0; font-weight: 300; line-height: 1.7; color: var(--fg-muted); }

/* YouTube embed */
.video-embed { margin-top: 2em; }
.video-embed__frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; background: #000; border: 1px solid var(--hairline-strong); }
.video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__cap { margin-top: 12px; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--fg-muted); }

/* Back link + post footer NAP nicety */
.article__back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-muted); margin-bottom: 28px; }
.article__back:hover { color: #000; }
.nap { font-style: normal; line-height: 1.7; }
.nap strong { display: block; }
.nap a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }

@media (max-width: 560px) {
  .article__head { padding-top: 52px; }
}