/* ================================================================
   ZonPrep: Shared Site Styles
   Requires tokens.css to be loaded first.
   ================================================================ */

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--zp-font-sans); color: var(--zp-ink); background: var(--zp-surface); -webkit-font-smoothing: antialiased; }

/* Brand type pairing: DM Sans for display, Inter for body. The guide calls
   the pairing essential; --zp-font-display used to point at Inter, so Inter
   was doing both jobs, which is the clearest signature of a generated page.
   Bold (700) not 800, per the Font Usage Guide. Tracking loosened from
   -0.03em: it was tuned for Inter and reads cramped in DM Sans, which is
   the wider face. */
/* color:inherit, not var(--zp-ink). An element rule beats an inherited value,
   so a hardcoded ink here overrode the white that dark sections pass down,
   and any dark band using a real <h1>/<h2> instead of a div rendered its
   heading near-black on near-black. body already sets color:var(--zp-ink),
   so inheriting gives ink everywhere by default and the correct white inside
   dark sections. Fixed 6 invisible headings across the site. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--zp-font-display);
  font-weight: var(--zp-weight-bold);
  letter-spacing: -0.02em;
  color: inherit;
}

/* Display classes that are divs rather than headings, so the rule above
   cannot reach them. */
.page-hero__headline, .section__headline, .cta-banner__headline,
.zp-cta-band__headline, .stat-strip__value, .card__title,
.testimonial__quote, .proof-card__value {
  font-family: var(--zp-font-display);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
ul[role="list"] { list-style: none; }

/* ── Nav ────────────────────────────────────────────────────────── */
.zp-nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--zp-border);
}
.zp-nav__inner {
  /* 1360 - 80px of padding = a 1280px content row, flush with the page
     container, so the logo lines up with each page's headline. The old
     1280 max-width plus 48px padding left only 1184px, which seven links
     plus two CTAs plus the logo cannot fit. */
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* The logo must never shrink. It sits next to a flex:1 link list, so with
   the default flex-shrink:1 it collapses, and the reset's img max-width:100%
   then drives the image itself to 0px wide: an invisible logo. */
.zp-nav__logo { flex: 0 0 auto; display: flex; align-items: center; }
.zp-nav__logo img { height: 20px; width: auto; max-width: none; }
.zp-nav__links {
  display: flex; align-items: center; gap: 4px; list-style: none; flex: 1;
}
.zp-nav__item { position: relative; }
.zp-nav__link {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 9px;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--zp-ink);
  text-decoration: none; border-radius: var(--zp-radius-sm);
  background: none; border: none; cursor: pointer;
  transition: background var(--zp-dur-fast) var(--zp-ease);
  white-space: nowrap;
}
.zp-nav__link:hover { background: var(--zp-surface-alt); }
.zp-nav__link--active { color: var(--zp-blue); }
.zp-nav__chevron { font-size: 11px; opacity: .6; }
.zp-nav__dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 220px; background: #fff;
  border: 1px solid var(--zp-border); border-radius: var(--zp-radius-md);
  box-shadow: var(--zp-shadow-lg); padding: 6px 6px 6px; padding-top: 8px; list-style: none; z-index: 200;
}
.zp-nav__item--has-dropdown:hover .zp-nav__dropdown,
.zp-nav__item--has-dropdown:focus-within .zp-nav__dropdown { display: block; }
.zp-nav__drop-link {
  display: block; padding: 9px 12px; font-size: 14px; font-weight: 500;
  color: var(--zp-ink-60); text-decoration: none; border-radius: var(--zp-radius-xs);
  transition: background var(--zp-dur-fast) var(--zp-ease), color var(--zp-dur-fast) var(--zp-ease);
}
.zp-nav__drop-link:hover { background: var(--zp-surface-alt); color: var(--zp-ink); }
.zp-nav__drop-link--sub { padding-left: 26px; font-size: 13px; position: relative; }
.zp-nav__drop-link--sub::before { content: "\2014"; position: absolute; left: 12px; color: var(--zp-muted); }
.zp-nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
/* Nav CTAs run one step smaller than page CTAs so the bar fits at 1280. */
.zp-nav__actions .zp-btn { padding: 10px 16px; font-size: 14px; }
.zp-nav__hamburger { display: none; }

/* ── Page hero (interior pages) ─────────────────────────────────── */
.page-hero {
  background: var(--zp-ink);
  color: #fff;
  padding: 80px 48px;
}
.page-hero--light {
  background: var(--zp-surface-alt);
  color: var(--zp-ink);
}
.page-hero__inner { max-width: var(--zp-container); margin: 0 auto; }
.page-hero__overline { display: block; margin-bottom: 16px; color: var(--zp-accent-on-dark); }
.page-hero--light .page-hero__overline { color: var(--zp-blue); }
.page-hero__headline {
  font-size: 56px; line-height: 1.05; font-weight: 700;
  letter-spacing: -0.02em; max-width: 800px;
}
.page-hero--light .page-hero__headline { color: var(--zp-ink); }
.page-hero__sub {
  font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.75);
  max-width: 640px; margin-top: 20px;
}
.page-hero--light .page-hero__sub { color: var(--zp-ink-60); }
.page-hero__ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* ── Section wrappers ───────────────────────────────────────────── */
.section { padding: 96px 48px; }
.section--alt { background: var(--zp-surface-alt); }
.section--dark { background: var(--zp-ink); color: #fff; }
.section__inner { max-width: var(--zp-container); margin: 0 auto; }
.section__inner--narrow { max-width: 960px; margin: 0 auto; }
.section__header { margin-bottom: 56px; }
.section__overline { display: block; margin-bottom: 12px; }
.section__headline {
  font-size: 44px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.1; max-width: 720px;
}
.section__sub {
  font-size: 18px; line-height: 1.6; color: var(--zp-ink-60);
  max-width: 640px; margin-top: 16px;
}

/* ── Stat strip ─────────────────────────────────────────────────── */
.stat-strip { background: var(--zp-blue-600); padding: 72px 48px; }
.stat-strip__inner {
  max-width: var(--zp-container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
}
.stat-strip__item { display: flex; flex-direction: column; gap: 10px; }
.stat-strip__value {
  font-size: 80px; line-height: 1; font-weight: 700;
  letter-spacing: -0.04em; color: #fff;
}
.stat-strip__label { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.85); max-width: 200px; }

/* ── Grid layouts ───────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--zp-border);
  border-radius: var(--zp-radius-xl); padding: 28px;
  transition: box-shadow var(--zp-dur-slow) var(--zp-ease), border-color var(--zp-dur-slow) var(--zp-ease);
}
.card:hover { box-shadow: var(--zp-shadow-md); border-color: var(--zp-border-strong); }
.card__icon {
  width: 48px; height: 48px; border-radius: var(--zp-radius-md);
  background: var(--zp-blue-50); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.card__icon .material-symbols-outlined { font-size: 26px; color: var(--zp-blue); }
.card__icon--green { background: #f0fdf4; }
.card__icon--green .material-symbols-outlined { color: var(--zp-green-600); }
.card__icon--pink { background: #fff0fc; }
.card__icon--pink .material-symbols-outlined { color: var(--zp-pink-600); }
.card__title { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 10px; }
.card__body { font-size: 15px; line-height: 1.6; color: var(--zp-ink-60); }
.card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--zp-blue);
  text-decoration: none; margin-top: 16px;
}
.card__cta .material-symbols-outlined { font-size: 16px; transition: transform var(--zp-dur-fast); }
.card__cta:hover .material-symbols-outlined { transform: translateX(3px); }

/* Dark card variant */
.card--dark { background: var(--zp-ink); color: #fff; border-color: transparent; }
.card--dark .card__body { color: rgba(255,255,255,.65); }

/* ── Numbered step list ─────────────────────────────────────────── */
.step-list { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 32px; padding: 32px 0; border-top: 1px solid var(--zp-border);
  align-items: start;
}
.step__num {
  font-size: 44px; font-weight: 700; color: var(--zp-blue);
  letter-spacing: -0.03em; line-height: 1;
}
.step__title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.step__body { font-size: 16px; line-height: 1.6; color: var(--zp-ink-60); max-width: 680px; }

/* ── CTA banner ─────────────────────────────────────────────────── */
.cta-banner { padding: 96px 48px; text-align: center; }
.cta-banner__headline {
  font-size: 56px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05; max-width: 800px; margin: 0 auto 12px;
}
.cta-banner__sub { font-size: 18px; color: var(--zp-muted); margin-bottom: 40px; }
.cta-banner__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-banner__offer { font-size: 15px; font-weight: 600; color: var(--zp-blue); margin-bottom: 24px; }

/* ── CTA band (interior pages, matches DS CTA component) ──────── */
.zp-cta-band {
  padding: 80px 48px;
  text-align: center;
  background: #fff;
}
.zp-cta-band__inner {
  max-width: var(--zp-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.zp-cta-band__headline {
  font-size: 56px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05; margin-bottom: 32px; max-width: 800px;
}
.zp-cta-band__actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.zp-cta-band__actions .zp-btn--primary.zp-btn--lg {
  font-size: 18px; padding: 18px 36px;
}

/* ── Testimonial ────────────────────────────────────────────────── */
.testimonial {
  background: var(--zp-surface-alt); border-radius: var(--zp-radius-xl);
  padding: 40px;
}
.testimonial__quote {
  font-size: 20px; line-height: 1.55; font-weight: 500;
  color: var(--zp-ink); margin-bottom: 20px;
}
.testimonial__author { font-size: 14px; color: var(--zp-muted); font-weight: 600; }

/* ── FAQ accordion ──────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--zp-border); }
.faq-item:first-child { border-top: 1px solid var(--zp-border); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 0; background: none; border: none;
  cursor: pointer; text-align: left; gap: 16px;
  font-family: var(--zp-font-sans); font-size: 17px; font-weight: 600;
  color: var(--zp-ink); line-height: 1.4;
  transition: color var(--zp-dur-fast) var(--zp-ease);
}
.faq-question:hover { color: var(--zp-blue); }
.faq-question__icon { flex-shrink: 0; font-size: 20px; color: var(--zp-muted); transition: transform var(--zp-dur-base) var(--zp-ease); }
.faq-item.open .faq-question__icon { transform: rotate(45deg); color: var(--zp-blue); }
.faq-answer { display: none; padding: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--zp-ink-60); max-width: 760px; }
.faq-item.open .faq-answer { display: block; }

/* ── Footer ─────────────────────────────────────────────────────── */
.zp-footer { background: var(--zp-ink); color: rgba(255,255,255,.7); }
.zp-footer__inner { max-width: var(--zp-container); margin: 0 auto; padding: 64px 48px 32px; }
.zp-footer__top {
  display: grid; grid-template-columns: 260px 1fr; gap: 64px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.zp-footer__brand img { height: 22px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.zp-footer__tagline { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.45); }
.zp-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.zp-footer__col-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  /* Pink on the dark footer: 6.58:1, where the old 35% white was both dimmer
     and carried no brand. Appears on every page. */
  color: var(--zp-accent-on-dark); display: block; margin-bottom: 16px;
}
.zp-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.zp-footer__col a {
  font-size: 14px; color: rgba(255,255,255,.6); text-decoration: none;
  transition: color var(--zp-dur-fast) var(--zp-ease);
}
.zp-footer__col a:hover { color: #fff; }
.zp-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px; font-size: 13px; color: rgba(255,255,255,.3);
  flex-wrap: wrap; gap: 16px;
}
.zp-footer__legal { display: flex; gap: 24px; }
.zp-footer__legal a { color: rgba(255,255,255,.3); text-decoration: none; }
.zp-footer__legal a:hover { color: rgba(255,255,255,.6); }

/* ── Blog post (long-form article) ──────────────────────────────── */
.post { max-width: 780px; margin: 0 auto; padding: 72px 24px 88px; }
.post__head { margin-bottom: 32px; }
.post__meta-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 13px; color: var(--zp-muted); margin-bottom: 20px;
}
.post__cat {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--zp-blue); text-decoration: none;
}
.post__cat:hover { text-decoration: underline; }
.post__title {
  font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12;
  color: var(--zp-ink); margin-bottom: 20px;
}
.post__standfirst { font-size: 20px; line-height: 1.55; color: var(--zp-ink-60); }
.post__hero { margin: 8px 0 40px; border-radius: var(--zp-radius-lg); overflow: hidden; }
.post__hero img { width: 100%; display: block; }

/* Body typography. The markup comes from WordPress, so this styles bare tags
   rather than classes. */
.post__body { font-size: 17px; line-height: 1.75; color: var(--zp-ink); }
.post__body > * + * { margin-top: 1.15em; }
.post__body h2 {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  margin-top: 2em; margin-bottom: 0.6em;
}
.post__body h3 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
  margin-top: 1.7em; margin-bottom: 0.5em;
}
.post__body h4 { font-size: 18px; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.4em; }
.post__body p { color: var(--zp-ink-80, var(--zp-ink-60)); }
.post__body a { color: var(--zp-blue); text-decoration: underline; text-underline-offset: 2px; }
.post__body a:hover { color: var(--zp-blue-600); }
.post__body strong { font-weight: 700; color: var(--zp-ink); }
.post__body ul, .post__body ol { padding-left: 1.4em; }
.post__body li { margin-bottom: 0.5em; color: var(--zp-ink-80, var(--zp-ink-60)); }
.post__body img {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--zp-radius-lg); margin: 2em auto;
}
.post__body figure { margin: 2em 0; }
.post__body figcaption { font-size: 13px; color: var(--zp-muted); text-align: center; margin-top: 10px; }
.post__body blockquote {
  border-left: 3px solid var(--zp-blue); padding: 4px 0 4px 24px; margin: 2em 0;
  font-size: 19px; line-height: 1.6; color: var(--zp-ink);
}
.post__body blockquote p { color: inherit; }
.post__body table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 2em 0; display: block; overflow-x: auto; }
.post__body th, .post__body td { border: 1px solid var(--zp-border); padding: 10px 12px; text-align: left; }
.post__body th { background: var(--zp-surface-alt); font-weight: 700; }
.post__body hr { border: none; border-top: 1px solid var(--zp-border); margin: 2.5em 0; }
.post__body iframe { max-width: 100%; border-radius: var(--zp-radius-lg); }

.post__foot {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--zp-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post__tag {
  font-size: 12px; font-weight: 600; color: var(--zp-ink-60);
  background: var(--zp-surface-alt); border: 1px solid var(--zp-border);
  border-radius: var(--zp-radius-pill); padding: 6px 12px; text-decoration: none;
  transition: color var(--zp-dur-fast) var(--zp-ease), border-color var(--zp-dur-fast) var(--zp-ease);
}
.post__tag:hover { color: var(--zp-blue); border-color: var(--zp-blue-300); }
.post__back { font-size: 14px; font-weight: 600; color: var(--zp-blue); text-decoration: none; }
.post__back:hover { text-decoration: underline; }

/* ── Photo grid ─────────────────────────────────────────────────── */
/* Shared gallery component for facility + service photography. Every photo
   is cropped by object-fit so mixed source aspect ratios stay on a grid. */
.photo-grid { display: grid; gap: 16px; }
.photo-grid--2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.photo-grid--feature { grid-template-columns: 2fr 1fr; }
.photo {
  position: relative; overflow: hidden; border-radius: var(--zp-radius-lg);
  background: var(--zp-surface-alt); aspect-ratio: 3 / 2;
}
.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--zp-dur-slow) var(--zp-ease);
}
.photo:hover img { transform: scale(1.03); }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--tall { aspect-ratio: 3 / 4; }
.photo--full { aspect-ratio: auto; }
.photo__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 32px 16px 14px; font-size: 13px; font-weight: 500;
  color: #fff; line-height: 1.45;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.media-frame {
  border-radius: var(--zp-radius-lg); overflow: hidden;
  box-shadow: var(--zp-shadow-md); background: var(--zp-ink);
}
.media-frame video, .media-frame img { width: 100%; display: block; }

/* ── Responsive ─────────────────────────────────────────────────── */
/* Nav: the full desktop bar needs ~1175px of content row. Below 1280 the
   row runs out of space, so switch to the hamburger menu there rather than
   letting the CTAs push out of the gutter. */
@media (max-width: 1279px) {
  .zp-nav__inner { padding: 0 32px; }
  .zp-nav__links, .zp-nav__actions { display: none; }
  .zp-nav__hamburger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto;
  }
  .zp-nav__hamburger span { width: 22px; height: 2px; background: var(--zp-ink); border-radius: 2px; }
  /* Open state, toggled by site.js */
  .zp-nav--open { max-height: 100vh; overflow-y: auto; }
  .zp-nav--open .zp-nav__inner { flex-wrap: wrap; height: auto; min-height: 68px; padding-bottom: 20px; }
  .zp-nav--open .zp-nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    order: 3; width: 100%; padding-top: 8px;
  }
  .zp-nav--open .zp-nav__link { width: 100%; }
  .zp-nav--open .zp-nav__dropdown {
    display: block; position: static; min-width: 0;
    border: none; box-shadow: none; padding: 0 0 4px 12px;
  }
  .zp-nav--open .zp-nav__actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    order: 4; width: 100%; margin-left: 0; padding-top: 12px;
  }
}
@media (max-width: 1360px) {
  .zp-nav__inner { padding: 0 32px; }
}
@media (max-width: 1024px) {
  .stat-strip__value { font-size: 60px; }
  .page-hero__headline { font-size: 44px; }
  .section__headline { font-size: 36px; }
  .cta-banner__headline { font-size: 40px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .photo-grid--3, .photo-grid--feature { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .zp-nav__inner { padding: 0 24px; }
  .section { padding: 64px 24px; }
  .page-hero { padding: 56px 24px; }
  .page-hero__headline { font-size: 36px; }
  .stat-strip { padding: 48px 24px; }
  .stat-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .stat-strip__value { font-size: 48px; }
  .grid-3, .grid-2, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; gap: 16px; }
  .photo-grid--3, .photo-grid--2, .photo-grid--feature { grid-template-columns: 1fr; }
  .post { padding: 48px 24px 64px; }
  .post__title { font-size: 32px; }
  .post__standfirst { font-size: 17px; }
  .post__body { font-size: 16px; }
  .post__body h2 { font-size: 25px; }
  .post__body h3 { font-size: 20px; }
  .step { grid-template-columns: 56px 1fr; gap: 16px; }
  .step__num { font-size: 32px; }
  .cta-banner { padding: 64px 24px; }
  .cta-banner__headline { font-size: 32px; }
  .zp-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .zp-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .zp-footer__inner { padding: 48px 24px 24px; }
}


/* ── Two-column blocks that were inline-styled ──────────────────────
   19 blocks across the site were `display:grid;
   grid-template-columns:1fr 1fr` set in a style attribute with no
   breakpoint, so they never collapsed and pushed pages sideways on
   phones (fba-prep-services measured 483px inside a 375px viewport).
   The column count lives here so a media query can override it: an
   inline grid-template-columns beats any stylesheet rule short of
   !important. The homepage carries its own copy, as it does not link
   this file. */
.split-2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 768px) {
  .split-2 { grid-template-columns: 1fr; gap: 40px; }
}


/* ── Pink as the mark ───────────────────────────────────────────────
   Pink is the 10% accent and cannot be small text on white (3.19:1), so it
   works as a rule instead: a short bar above each section eyebrow. Purely
   decorative, and above the 3:1 floor for non-text anyway. Gives every page
   a repeated brand signature without a single accessibility compromise. */
.section__overline { position: relative; display: inline-block; }
.section__overline::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: var(--zp-accent-on-light);
  margin-bottom: 10px;
}

/* Inline links in body copy: ink text, pink underline. The colour is
   decoration, so the text itself keeps its 19.8:1 contrast. */
.section__inner p a:not(.zp-btn),
.card__body a:not(.zp-btn) {
  color: var(--zp-ink);
  text-decoration: underline;
  text-decoration-color: var(--zp-accent-on-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Secondary and ghost buttons resolve to a pink fill with ink text (6.21:1)
   rather than a grey wash. */
.zp-btn--secondary:hover, .zp-btn--ghost:hover {
  background: var(--zp-pink-50);
  border-color: var(--zp-accent-on-light);
  color: var(--zp-ink);
}