/* ==========================================================================
   Lifepointe Chiropractic & Wellness Center — design system
   Tokens and rationale: ../DESIGN.md
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
/* Served from this site (assets/fonts/), so pages make no requests to Google. The files are
   Google Fonts' own woff2 files, unchanged, and each rule keeps its unicode-range: a browser
   downloads a file only for a page that uses a character in its range, so English pages load
   just the three latin files. Bricolage Grotesque is a variable font: one file covers 700 and
   800. Licenses: assets/fonts/OFL-*.txt. Updating: README.md, Fonts. */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-vietnamese.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;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin-ext.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-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin.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;
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/lato-400-latin-ext.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-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/lato-400-latin.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;
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/lato-700-latin-ext.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-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/lato-700-latin.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;
}

:root {
  /* Official brand inks (logo sheet, 2012). Never substitute or shift these. */
  --navy: #00205B;          /* Pantone 281 C - primary: headings, text, dark sections, footer */
  --green: #84BD00;         /* Pantone 376 C - actions only: primary buttons, lit rail nodes; always with navy text */
  --red: #EE2737;           /* Pantone 1788 C - accent marks only: active nav, quote marks, eyebrow tick; never text */
  /* Neutrals: tints of the navy (navy mixed with white), so no new hues enter the palette */
  --ink: var(--navy);       /* headings + body on light */
  --ink-soft: #4A5470;      /* secondary text (7.5:1 on white) */
  --paper: #F7F8FA;         /* page background (navy 3%) */
  --card: #ffffff;          /* raised surfaces */
  --line: #E0E4EB;          /* borders, the rail (navy 12%) */
  --navy-tint: #F0F2F5;     /* hover wash, icon chips (navy 6%) */
  --navy-muted: #CCD2DE;    /* muted text on navy (10.2:1) */
  --navy-link: #E6E9EF;     /* link text on navy (12.7:1) */
  --navy-faint: #9EAAC1;    /* de-emphasized text on navy (6.6:1) */
  --header-h: 76px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(0, 32, 91, .05), 0 8px 24px rgba(0, 32, 91, .07);
  --font-display: "Bricolage Grotesque", "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
  --rail-w: 2px;
}

/* ---- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;               /* 17px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--font-display); line-height: 1.12; color: var(--ink); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--navy); text-decoration-thickness: 2px; }
/* The arrow on an action link ("Learn more", "Get directions", "Back to topics"): an SVG from
   icons.py, as heavy as the link's bold text. A text arrow came out thin: the self-hosted Lato
   has no →, so browsers drew it from another font. It sits outside the underline and nudges
   on hover. */
.action-link { font-weight: 700; }
.arrow { width: 1em; height: 1em; vertical-align: -.17em; margin-left: .2em; transition: transform .15s ease; }
.arrow--up { margin: 0 .2em 0 0; }
a:hover .arrow, .card--link:hover .arrow { transform: translateX(3px); }
a:hover .arrow--up { transform: translateY(-3px); }
/* Phone and fax numbers never break across lines at their hyphens. */
a[href^="tel:"], .nowrap { white-space: nowrap; }

/* ---- Accessibility floor ------------------------------------------------ */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Type scale --------------------------------------------------------- */

.display-1 { font-size: clamp(2.35rem, 1.4rem + 4vw, 3.9rem); font-weight: 800; letter-spacing: -.02em; }
.display-2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 700; letter-spacing: -.015em; }
.display-3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.45rem); font-weight: 700; }
.display-page { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -.018em; }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--ink-soft); line-height: 1.6; }

.eyebrow {
  display: block;
  font: 700 .75rem/1.4 var(--font-body);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.4em; height: 3px;
  margin-right: .6em;
  vertical-align: .28em;
  border-radius: 2px;
  background: var(--red);
}
.on-dark .eyebrow { color: var(--green); }
.on-dark .eyebrow::before { background: var(--green); }

/* ---- Layout primitives -------------------------------------------------- */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--navy { background: var(--navy); }
.section--navy, .section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy .lede { color: var(--navy-muted); }
.section--card { background: var(--card); border-block: 1px solid var(--line); }

.grid-2 { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: repeat(2, 1fr); align-items: center; }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ---- The spine rail (signature) -----------------------------------------
   A vertical rail in the left gutter of .has-rail sections. Each section
   places one .vertebra node on it; script.js fills nodes on scroll. */

.rail-wrap { position: relative; }
.rail-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: max(1rem, calc((100% - var(--wrap)) / 2 + .75rem));
  top: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--line);
}
.rail-wrap .section { position: relative; }
.vertebra {
  position: absolute;
  z-index: 2;
  left: calc(max(1rem, (100% - var(--wrap)) / 2 + .75rem) + var(--rail-w) / 2);
  transform: translateX(-50%);
  top: clamp(3.8rem, 8.3vw, 6.8rem);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--navy);
  transition: background-color .45s ease, box-shadow .45s ease;
}
.vertebra.is-lit {
  background: var(--green);
  border-color: var(--navy);
  box-shadow: 0 0 0 5px rgba(132, 189, 0, .22);
}
@media (max-width: 720px) {
  .rail-wrap::before, .vertebra { display: none; }
}

/* ---- Header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
}
.site-header__logo { flex: none; display: inline-flex; }
.site-header__logo img { width: 180px; height: auto; }
.site-nav { margin-left: auto; min-width: 0; }
/* Under larger text or user text spacing, the menu wraps rather than pushing the button
   off-screen. */
.site-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: .55rem .6rem;
  font: 700 .92rem/1.2 var(--font-body);
  white-space: nowrap;
  color: var(--ink); text-decoration: none; border-radius: 8px;
}
.site-nav a:hover { color: var(--navy); background: var(--navy-tint); }
.site-nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--red); border-radius: 8px 8px 2px 2px; }
.site-header__cta { flex: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .7rem; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { display: block; }

/* The desktop bar needs about 1065px between the gutters, and a desktop scrollbar takes up
   to 17px of the window, so the hamburger covers windows up to 1179px. */
@media (max-width: 1179px) {
  .nav-toggle { display: inline-flex; }
  .site-header__cta { display: none; }
  .site-nav {
    position: absolute; inset: 100% 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; padding: .75rem clamp(1.25rem, 4vw, 2.5rem) 1.25rem; }
  .site-nav a { padding: .8rem .5rem; font-size: 1.05rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--red); border-radius: 2px 8px 8px 2px; padding-left: .9rem; }
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font: 700 1rem/1.2 var(--font-body);
  padding: .95rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary action: official green with navy text (6.8:1). Hover lifts; the color never shifts. */
.btn--primary { background: var(--green); color: var(--navy); }
.btn--primary:hover { background: var(--green); color: var(--navy); box-shadow: 0 0 0 3px var(--navy) inset, 0 6px 18px rgba(132, 189, 0, .4); }
.on-dark .btn--primary:hover { box-shadow: 0 0 0 3px #fff inset, 0 6px 18px rgba(0, 32, 91, .3); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }

.on-dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.on-dark .btn--ghost:hover { background: #fff; color: var(--navy); }

.btn--sm { padding: .6rem 1.15rem; font-size: .92rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ---- Cards -------------------------------------------------------------- */

.card {
  background: var(--card);
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4em; }
.card > :last-child { margin-bottom: 0; }

.card--link { display: block; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card--link:hover { transform: translateY(-3px); border-color: var(--navy); color: inherit; }
.card--link .card__more { color: var(--navy); font-weight: 700; }
.card--link:hover .card__more { color: var(--navy); text-decoration: underline; }

.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--navy-tint); color: var(--navy);
  margin-bottom: 1rem;
}
.card__icon svg { width: 24px; height: 24px; }

/* ---- Quote / testimonial ------------------------------------------------ */

.quote {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1rem;
  margin: 0;
}
.quote blockquote { margin: 0; }
.quote p { margin: 0; font-size: 1.02rem; }
.quote footer { font-weight: 700; color: var(--navy); font-size: .95rem; }
.quote footer span { display: block; font-weight: 400; color: var(--ink-soft); font-size: .85rem; }
.quote::before {
  content: "\201C";
  font: 800 3rem/0.6 var(--font-display);
  color: var(--red);
}
/* Many quotes of uneven length (success stories): columns, read top to bottom */
.quote-columns { columns: 3 17rem; column-gap: 1.5rem; }
.quote-columns .quote { break-inside: avoid; }
.quote-columns .quote + .quote { margin-top: 1.5rem; }  /* dropped at the top of a column */
.back-link { margin-bottom: 0; font-weight: 700; font-size: .95rem; }

/* ---- Steps (new-patient journey — a true sequence) ---------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: step; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 52px 1fr; gap: 1.1rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow);
}
.step::before {
  content: counter(step);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 1.35rem/1 var(--font-display);
  background: var(--navy); color: var(--green);
}
.step h3 { font-size: 1.15rem; margin-bottom: .3em; }
.step p { margin: 0; color: var(--ink-soft); }

/* ---- Info strips, hours, badges ----------------------------------------- */

.badge-row { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .95rem; color: var(--ink); }
.badge svg { width: 18px; height: 18px; color: var(--navy); flex: none; }

.hours-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hours-table th, .hours-table td { text-align: left; padding: .6rem .25rem; border-bottom: 1px solid var(--line); }
.hours-table th { font-weight: 700; white-space: nowrap; padding-right: 1.5rem; width: 1%; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table .is-today th, .hours-table .is-today td { color: var(--navy); font-weight: 700; }

/* ---- Media / figure ----------------------------------------------------- */

.photo { border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; margin: 0; }
.photo img { width: 100%; object-fit: cover; }


/* ---- Shared component classes (replace one-off inline styles) ------------ */

.grid--top { align-items: start; }
.mt-15 { margin-top: 1.5rem; }   /* post-heading gap */
.mt-2 { margin-top: 2rem; }      /* pre-CTA / group gap */
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.list-tight { padding-left: 1.1em; }
/* A longer list (services: products): two columns where they fit, read top to bottom */
.list-columns { columns: 2 18rem; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.list-columns li { break-inside: avoid; }
.muted { color: var(--ink-soft); }
.hint { font-size: .85rem; color: var(--ink-soft); }
.card-stack { display: grid; gap: 1.25rem; }
.card-stack--sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.btn-row--center { justify-content: center; margin-top: 2rem; }
.site-footer__tagline { margin-top: 1rem; max-width: 26em; }

/* ---- Footer ------------------------------------------------------------- */

.site-footer { background: var(--navy); color: var(--navy-muted); font-size: .97rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.site-footer a { color: var(--navy-link); }
.site-footer a:hover { color: var(--green); }
.site-footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  padding-block: clamp(2.75rem, 6vw, 4rem);
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__logo img { width: 190px; }
.site-footer h2 { font: 700 .8rem/1.4 var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--navy-faint); margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .85rem; color: var(--navy-faint);
}
/* Social logos: plain white glyphs, 29px (Instagram's minimum), no container shape. Each link is
   a 44px target, so neighbouring glyphs sit 15px apart: Instagram's clear space is half the
   glyph (14.5px). The row is pulled left so the first glyph lines up with the text above.
   Meta's rules forbid recoloring the logos, so hover only lifts them; they stay white. */
.social-row { display: flex; margin: 1.2rem 0 0 -7.5px; }
.social-row a {
  width: 44px; height: 44px; border-radius: 6px;
  display: grid; place-items: center;
  color: #fff; transition: transform .15s ease;
}
.social-row a:hover { color: #fff; transform: translateY(-2px); }
.social-row svg { width: 29px; height: 29px; }

/* ---- Page-top banner (interior pages) ----------------------------------- */

.page-hero { background: var(--navy); color: #fff; padding-block: clamp(3rem, 7vw, 5rem); }
.page-hero .eyebrow { color: var(--green); }
.page-hero .eyebrow::before { background: var(--green); }
.page-hero h1 { color: #fff; margin-bottom: .3em; }
.page-hero .lede { color: var(--navy-muted); max-width: 46em; margin-bottom: 0; }
.page-hero__meta { margin: 1rem 0 0; font-size: .92rem; font-weight: 700; color: var(--navy-faint); }  /* e.g. "Last updated" */

/* ---- Utilities ---------------------------------------------------------- */

.center { text-align: center; }
.measure { max-width: 46em; }
.measure-center { max-width: 46em; margin-inline: auto; }
.mb-2 { margin-bottom: 2rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Hero entrance ------------------------------------------------------ */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise   { animation: rise .65s cubic-bezier(.2, .7, .3, 1) both; }
.rise-2 { animation-delay: .1s; }
.rise-3 { animation-delay: .2s; }
.rise-4 { animation-delay: .3s; }

/* Floating chip over the hero photo */
.photo-chip {
  position: absolute;
  left: clamp(-1.5rem, -2vw, -1rem); bottom: 1.6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .8rem 1.1rem;
  font: 700 .92rem/1.35 var(--font-body); color: var(--navy);
}
.photo-chip span { display: block; font-weight: 400; color: var(--ink-soft); font-size: .84rem; }
.hero-media { position: relative; }
@media (max-width: 900px) { .photo-chip { left: 1rem; } }

/* Category chips (success stories) */
.chip-grid { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.chip {
  display: inline-block; padding: .5rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  font: 700 .92rem/1.3 var(--font-body); color: var(--navy); text-decoration: none;
}
a.chip:hover { border-color: var(--navy); background: var(--navy-tint); color: var(--navy); }