/* ==================================================================
   PIMC GLOBAL — BRAND LAYER
   Loaded LAST in <head> on every page so it wins over tailwind.css and
   the page-level <style> blocks. All brand look decisions live here.
   Read DESIGN.md before editing. Do not restyle pages any other way.
   ================================================================== */
:root {
  --gold-400: #D4923B;   /* large accents on green only */
  --gold-500: #B9772A;   /* primary accent, fills, rules */
  --gold-600: #95601F;   /* CTA fill (white text 5.0:1) + gold text on light */
  --gold-700: #7A4E19;   /* CTA hover */
  --gold-300: var(--gold-300);   /* link text on green — lighter than gold-400 to clear AA on dark */
  --accent-soft: #F2E4D2; /* badge + note fill. Was only ever a var() fallback; now real. */
  --wa-ink: #06331C;      /* text on WhatsApp green — 7.07:1, where white is 1.98:1 */
  --gold-on-green: #E0A85A; /* small gold text on green (AA) */
  --brown-700: #4F3829;
  --brown-800: #2E2018;
  --green-800: #0A5240;
  --green-900: #013F34;
  --green-950: #012A23;
  --cream: #F7F5F1;
  --sand:  #EFE9E1;
  --stone-300: #CAC6C3;
  --stone-400: #B3B0A6;
  --stone-500: #9A948B;  /* muted numerals, e.g. the "/ 71" in the hero card */
  --stone-600: #6B6A61;
  --ink-900: #161412;
  --text-body: #3A322B;
  --text-soft: #5A5247;
  --border: #E4DFD8;
  --capsule-bg: #161412;

  --font-display: 'Jost', system-ui, sans-serif;     /* stands in for Kiona */
  --font-body: 'Hanken Grotesk', system-ui, sans-serif; /* stands in for Garet */
  --radius-btn: 4px;
  --radius-card: 12px;
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

body { font-family: var(--font-body); color: var(--text-body); }

/* ── Headlines: tracked uppercase display face ─────────────────────
   !important is needed because headings carry inline font styles.  */
h1, h2,
h3.font-heading, h3[style*="Jost"],
.siteplan-band__title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}
h1, h2 { font-weight: 700 !important; }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.35rem) !important; }
h3.font-heading, h3[style*="Jost"] { font-weight: 600 !important; letter-spacing: 0.06em !important; }

/* Accent words inside headlines: lighter weight, never italic. */
h1 em, h2 em, h3 em, .siteplan-band__title em {
  font-style: normal !important;
  font-weight: 300 !important;
}

/* Long-form article headings stay readable: uppercase only for h2. */
.article-prose h3 { text-transform: none !important; letter-spacing: 0 !important; }

/* ── Eyebrows ───────────────────────────────────────────────────── */
p.uppercase.tracking-widest,
p.font-semibold.uppercase,
.siteplan-band__eyebrow {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}

/* ── Buttons: tracked uppercase, crisp corners ───────────────────── */
.btn-primary, .btn-primary-hero, .btn-outline, .btn-contact {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-btn);
  transition: background .2s var(--ease-out), transform .15s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn-primary, .btn-primary-hero { background: var(--gold-600); }
.btn-primary:hover, .btn-primary:focus-visible,
.btn-primary-hero:hover, .btn-primary-hero:focus-visible { background: var(--gold-700); }
.btn-primary:active, .btn-primary-hero:active { transform: scale(.98); }
.btn-outline { border-color: var(--green-900); color: var(--green-900); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--green-900); }

/* ── Focus ring ──────────────────────────────────────────────────── */
:focus-visible { outline-color: var(--gold-500); }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-input { border-color: var(--stone-400); border-radius: 6px; font-family: var(--font-body); }
.form-input:focus { border-color: var(--green-900); box-shadow: 0 0 0 3px rgba(1,63,52,.18); }
.form-label { font-family: var(--font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--brown-700); }

/* ── Signature price capsule ─────────────────────────────────────── */
.pimc-capsule {
  display: inline-flex; align-items: baseline; gap: .4em;
  background: var(--capsule-bg); color: var(--gold-400);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .06em;
  padding: .45em .8em; border-radius: 4px; line-height: 1;
}
.pimc-capsule small { color: #fff; font-weight: 500; font-size: .62em; letter-spacing: .14em; text-transform: uppercase; }

/* ── Fact list (1 KM TO A7 / 25 MIN TO MALINDI …) ───────────────── */
.pimc-facts {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0; padding: 0; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.pimc-facts li + li::before { content: "/"; color: var(--gold-400); margin-right: .9rem; }

/* ── "Already in place" checks on the trust strip ───────────────── */
.trust-icon { background: var(--green-900); }
.trust-icon svg { stroke: #fff; }
.trust-icon svg [fill]:not([fill="none"]) { fill: #fff; }

/* ── Motion: steady, no infinite loops ───────────────────────────── */
[style*="animation:bounce"] { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==================================================================
   2026 REFRESH COMPONENTS — mobile first; breakpoints at 640 / 900px.
   Reuse these on any page instead of writing new layout CSS.
   ================================================================== */
.pimc-section { padding: clamp(2.25rem, 5vw, 4rem) 0; }
.pimc-head { margin-bottom: clamp(1.15rem, 2.4vw, 1.75rem); max-width: 46rem; }
.pimc-h2 { color: var(--green-900); margin: 0; }
.pimc-lede { margin: .6rem 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--text-soft); }
.pimc-eyebrow {
  margin: 0 0 .7rem; font-family: var(--font-display); font-weight: 600;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600);
}
.pimc-eyebrow--rule::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--gold-500); vertical-align: middle; margin: -2px .7rem 0 0; }
.pimc-eyebrow--on-dark { color: var(--gold-on-green); }
.pimc-split { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .pimc-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
  .pimc-split--top { align-items: start; }
}
.pimc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 1px 2px rgba(46,32,24,.06); }
.pimc-textlink { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); text-decoration: none; }
.pimc-textlink:hover { color: var(--gold-700); }
.pimc-textlink--on-dark { color: var(--gold-on-green); }
.pimc-textlink--on-dark:hover { color: #fff; }

/* Header: keep the nav and its CTA on one line. */
header nav a { white-space: nowrap; }
.header-cta { font-size: .78rem !important; padding: .7rem 1.1rem !important; white-space: nowrap; }

/* Hero */
.pimc-hero { position: relative; display: flex; align-items: flex-end; min-height: 94svh; background: var(--green-900); color: #fff; overflow: hidden; }
.pimc-hero__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,63,52,.10) 0%, rgba(1,63,52,.50) 38%, rgba(1,42,35,.95) 78%); }
.pimc-hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 7rem; padding-bottom: 2.25rem; }
.pimc-hero__h1 { margin: 0 0 1.1rem; color: #fff; }
.pimc-hero__l1 { display: block; font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.9rem); letter-spacing: .07em; line-height: 1.1; }
.pimc-hero__l2 { display: block; font-weight: 300; font-size: clamp(3.4rem, 13vw, 7rem); letter-spacing: .08em; line-height: .95; margin: .04em 0 .28em; }
.pimc-hero__price { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.pimc-hero__promise { display: block; margin-top: .9rem; font-size: clamp(.82rem, 1.4vw, 1rem); font-weight: 600 !important; letter-spacing: .14em; color: var(--gold-on-green); }
.pimc-hero__sub { margin: 1rem 0 0; max-width: 50ch; font-size: clamp(.98rem, 1.35vw, 1.08rem); line-height: 1.55; color: rgba(255,255,255,.9); }
.pimc-hero__ctas { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.1rem; }
.pimc-hero__ctas .btn-primary-hero { width: 100%; justify-content: center; }
.pimc-btn-ghost { background: transparent !important; border: 1.5px solid rgba(255,255,255,.55) !important; color: #fff !important; }
.pimc-btn-ghost:hover, .pimc-btn-ghost:focus-visible { background: rgba(255,255,255,.1) !important; box-shadow: none !important; }
.pimc-hero__fine { margin: .85rem 0 0; max-width: 54ch; font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.75); }
.pimc-link-on-dark { color: var(--gold-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .pimc-hero__ctas { flex-direction: row; align-items: center; }
  .pimc-hero__ctas .btn-primary-hero { width: auto; }
}
@media (min-width: 900px) {
  .pimc-hero { min-height: 88svh; }
  .pimc-hero__wash { background: linear-gradient(90deg, rgba(1,42,35,.94) 0%, rgba(1,63,52,.72) 45%, rgba(1,63,52,.12) 100%); }
  .pimc-hero__inner { padding-bottom: 4rem; }
}

/* Proof checklist */
.pimc-checklist { list-style: none; margin: 0; padding: 0; }
.pimc-checklist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .9rem; position: relative; padding-bottom: 1rem; }
.pimc-checklist li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 2px; background: var(--border); }
.pimc-check { width: 28px; height: 28px; border-radius: 50%; background: var(--green-900); display: flex; align-items: center; justify-content: center; }
.pimc-checklist__t { margin: .2rem 0 .2rem; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-900); }
.pimc-checklist__b { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--text-soft); }
.pimc-checklist__b a { color: var(--gold-600); font-weight: 600; }
.pimc-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pimc-photo { border-radius: 8px; aspect-ratio: 4 / 3; background: var(--sand); }

/* Plot specs + deed panel */
.pimc-deed { position: relative; background: var(--green-900); height: 210px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.pimc-deed img { max-height: 190px; width: auto; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
.pimc-deed p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .7rem 1rem; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-on-green); background: linear-gradient(to top, rgba(1,63,52,.96), transparent); }
.pimc-specs { margin: 0; padding: .35rem 1.25rem .75rem; }
.pimc-specs div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--border); }
.pimc-specs div:last-child { border-bottom: 0; }
.pimc-specs dt { font-size: .85rem; color: var(--text-soft); }
.pimc-specs dd { margin: 0; text-align: right; font-weight: 600; font-size: .88rem; color: var(--ink-900); }
.pimc-specs dd.is-green { color: var(--green-900); }

/* Pricing */
.pimc-pricing__head { margin: 0; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600); }
.pimc-pricing__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--border); }
.pimc-pricing__row:last-child { border-bottom: 0; }
.pimc-pricing__t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink-900); }
.pimc-pricing__s { margin: .15rem 0 0; font-size: .82rem; color: var(--stone-600); }
.pimc-pricing__v { margin: 0; flex: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--green-900); font-variant-numeric: tabular-nums; }
.pimc-badge { display: inline-block; padding: .2rem .5rem; border-radius: 3px; background: var(--accent-soft); color: var(--gold-700); font-family: var(--font-display); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pimc-note { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: 8px; background: var(--accent-soft); font-size: .85rem; line-height: 1.5; color: var(--brown-700); }
.pimc-ctarow { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.pimc-ctarow > a { justify-content: center; }
@media (min-width: 640px) { .pimc-ctarow { flex-direction: row; flex-wrap: wrap; } }

/* Launch offer */
.pimc-offer { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 14px; background: var(--brown-700); color: #fff; }
.pimc-offer__copy p:not(.pimc-eyebrow) { margin: .7rem 0 0; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 52ch; }
.pimc-offer__copy strong { color: #fff; }
.pimc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.pimc-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .75rem; align-items: start; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.88); }
.pimc-steps span { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-400); color: var(--ink-900); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: .8rem; }
@media (min-width: 900px) { .pimc-offer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 3rem; } }

/* GlassBox ticks on green */
.pimc-glass__copy p { margin: .75rem 0 0; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 54ch; }
.pimc-glass { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pimc-glass__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .8rem; align-items: start; padding: 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.92); }
.pimc-glass__item .pimc-check { background: var(--gold-500); }
@media (min-width: 640px) { .pimc-glass { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Drive-time tiles */
.pimc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pimc-tile { padding: 1rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.pimc-tile__v { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1; color: var(--green-900); }
.pimc-tile__l { margin: .4rem 0 0; font-size: .82rem; line-height: 1.35; color: var(--text-soft); }
@media (min-width: 900px) { .pimc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; } }
.pimc-aerial { border-radius: var(--radius-card); aspect-ratio: 5 / 3; background: var(--sand); }
.pimc-prose p { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.65; color: var(--text-soft); }

/* ── Density pass, 2026-10-13 ──────────────────────────────────
   Section padding was clamp(3rem, 8vw, 5.5rem) = 88px top AND bottom,
   so 176px of empty space sat between every content block, and
   .pimc-head added another 44px on top of that. On a 6.5-screen page
   that is close to a full screen of nothing. Ceilings were lowered,
   floors mostly kept: phones were never the problem, wide screens were.
   If a section ever feels cramped, raise THIS scale, not one section.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   HERO — solid variant with the live inventory card
   Replaces the photo hero on index.html. The photo hero styles
   above are kept: blog/_template.html and other pages still use
   them. Numbers in the card are written by hero-inventory.js
   from the ERP feed — never hard-coded (DESIGN.md §6).
   ───────────────────────────────────────────────────────────── */
.pimc-hero--solid {
  display: block; min-height: 0;
  background: var(--green-900);
}
/* Wash for THIS composition. The stock photo hero puts its text at the bottom;
   this one puts text top-left and a white card to the right, so the gradient
   runs the other way: heaviest where the white type sits, easing where the card
   floats so the land still reads behind it. Never let it drop below ~.70 on the
   type side — white on an unwashed aerial is unreadable in sunlight, which is
   how most of this traffic arrives. */
.pimc-hero--solid .pimc-hero__wash {
  background: linear-gradient(180deg,
    rgba(1, 42, 35, .93) 0%,
    rgba(1, 63, 52, .86) 45%,
    rgba(1, 63, 52, .78) 100%);
}
@media (min-width: 1024px) {
  .pimc-hero--solid .pimc-hero__wash {
    background: linear-gradient(90deg,
      rgba(1, 42, 35, .95) 0%,
      rgba(1, 63, 52, .88) 42%,
      rgba(1, 63, 52, .62) 70%,
      rgba(1, 63, 52, .48) 100%);
  }
}
.pimc-hero--solid .pimc-hero__inner {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding-top: 6rem; padding-bottom: 2.25rem;
}
.pimc-hero__copy { min-width: 0; }
@media (min-width: 1024px) {
  .pimc-hero--solid .pimc-hero__inner {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 3rem; padding-top: 7rem; padding-bottom: 4rem;
  }
  .pimc-hero__copy { flex: 1 1 56%; }
  .pimc-hero--solid .pimc-inv { flex: 0 1 380px; }
}
/* The solid hero drops the price capsule out of the headline — it
   lives in the card — so the headline block needs its own rhythm. */
.pimc-hero--solid .pimc-hero__h1 { margin-bottom: 1.15rem; }
.pimc-hero--solid .pimc-facts { margin-top: 0; }

/* ── Live inventory card ─────────────────────────────────────── */
.pimc-inv {
  background: #fff; border-radius: var(--radius-card, 12px);
  padding: 1.5rem; box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  display: flex; flex-direction: column; gap: 1.1rem;
}
@media (min-width: 640px) { .pimc-inv { padding: 1.75rem; } }

.pimc-inv__stats { display: flex; flex-direction: column; gap: 1.1rem; }
.pimc-inv__stats[hidden] { display: none; }

.pimc-inv__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pimc-inv__label {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600);
}
.pimc-inv__big {
  margin: .35rem 0 0; font-family: var(--font-display); line-height: 1;
  font-size: clamp(2.6rem, 7vw, 3.4rem); font-variant-numeric: tabular-nums;
}
.pimc-inv__big strong { font-weight: 700; color: var(--green-900); }
.pimc-inv__big span   { font-weight: 300; color: var(--stone-500); }
.pimc-inv__sub {
  margin: .4rem 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-900);
}
.pimc-inv__pill {
  flex: none; padding: .35rem .75rem; border-radius: 999px;
  background: var(--green-900); color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.pimc-inv__pill:empty { display: none; }

.pimc-inv__bar { display: flex; gap: 3px; height: 9px; }
.pimc-inv__bar > span { display: block; border-radius: 2px; }

.pimc-inv__split {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
}
.pimc-inv__split li { display: flex; flex-direction: column; gap: .15rem; }
.pimc-inv__split b {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  line-height: 1; color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.pimc-inv__split b.is-reserved  { color: var(--gold-600); }
.pimc-inv__split b.is-available { color: var(--green-900); }
.pimc-inv__split span { font-size: .82rem; color: var(--text-soft); }

.pimc-inv__note { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-soft); }
.pimc-inv__note[hidden] { display: none; }

.pimc-inv__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding-top: 1.1rem; border-top: 1px solid var(--border);
}
.pimc-inv__link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600);
}
.pimc-inv__link:hover, .pimc-inv__link:focus-visible { color: var(--gold-700); }


/* ── FAQ density ───────────────────────────────────────────────
   The summaries carry Tailwind's py-5 (20px), so eight questions
   spent ~512px on padding alone — the tallest block on the page.
   [data-pimc] is an attribute hook, not a new utility class: it
   outranks .py-5 on specificity without reaching for !important,
   and §1 says brand styling belongs here, not in the page.
   Rows land at ~52px, comfortably clear of the 44px floor in §5.
   ───────────────────────────────────────────────────────────── */
[data-pimc="faq"] summary { padding-top: .85rem; padding-bottom: .85rem; }
[data-pimc="faq"] > details > div { padding-bottom: .9rem; }

/* ── Tap targets (DESIGN.md §5: minimum 44px) ──────────────────
   The menu button shipped at w-10 h-10 = 40px. It is the most
   tapped control on the site and ~80% of this traffic is mobile,
   so 4px short is not a rounding error. ID beats the utilities.
   The consent box sits inside a 58px clickable <label>, so the
   target already passed — this is for precision, not compliance.
   The _honey input is NOT sized up: it is a spam trap and must
   stay invisible and unfocusable.
   ───────────────────────────────────────────────────────────── */
#mobile-menu-btn { width: 2.75rem; height: 2.75rem; }
#consent { width: 1.15rem; height: 1.15rem; }

/* ── Sitewide section rhythm ───────────────────────────────────
   .section-py is declared in each page's own <style> block at
   clamp(3.5rem, 7vw, 6rem) — 96px top and bottom, 192px between
   blocks. The brand layer loads AFTER those blocks, so this wins
   on source order at equal specificity and retunes all 18 pages
   from one place. Same scale as .pimc-section so the homepage and
   the inner pages breathe alike.
   Verify with getComputedStyle after any change to the <head>
   order — equal-specificity rules are decided by load order, and
   that has silently flipped on this site before.
   ───────────────────────────────────────────────────────────── */
.section-py {
  padding-top: clamp(2.25rem, 5vw, 4rem);
  padding-bottom: clamp(2.25rem, 5vw, 4rem);
}

/* ── Required-field asterisk ───────────────────────────────────
   Shipped as gold-500 on white = 3.66:1, under the 4.5 floor for
   12px text. §2 already names gold-600 as "gold text on light";
   it measures 5.29:1. The palette was right, the markup reached
   for the wrong token.
   ───────────────────────────────────────────────────────────── */
.form-required { color: var(--gold-600); }

/* ── Palette misuse found by the integrity pass, 2026-10-13 ────
   These are not taste calls — each breaks a rule DESIGN.md §2
   states outright, and each fails WCAG AA at the size it ships at.

   gold-400 is "large accents ON GREEN only". It was being used as
   11-14px text on near-white (#FBFAF8) at 2.52:1. gold-600 is the
   designated "gold text on light" and measures 5.29:1.
   ───────────────────────────────────────────────────────────── */
.sp-eyebrow, .sp-ghost, .blog-card-cat { color: var(--gold-600); }

/* gold-500 is explicitly "Never white text on it" — it shipped as a
   button fill with white text at 3.66:1. gold-600 IS the CTA fill
   and carries white at 5.0:1, so this moves to the right token
   rather than recolouring the text. */
.sp-btn { background: var(--gold-600); }
.sp-btn:hover, .sp-btn:focus-visible { background: var(--gold-700); }

/* gold-600 is specced to carry WHITE text. The header CTA used
   ink-900 on it at 3.47:1; white gives 5.0:1. */
.header-cta { color: #fff; }

/* ── WhatsApp buttons ──────────────────────────────────────────
   White on #25D366 is 1.98:1 — a clear AA failure on a primary
   CTA, repeated on seven buttons. §2 sanctions the WhatsApp green
   but says nothing about the text on it. Dark ink on the same
   green measures 7.07:1 and keeps the colour people recognise, so
   the brand cue survives and the text becomes readable.
   REVERSIBLE: delete this block to go back to white.
   ───────────────────────────────────────────────────────────── */
.btn-wa,
.actionbar .wa,
a[href*="wa.me"].btn-cta-wa,
/* The guides set .article-prose a.btn-cta-wa {color:#fff} at (0,2,1); a bare
   .btn-cta-wa never wins no matter how late it loads. Match the specificity. */
.article-prose a.btn-cta-wa,
/* The card and sticky-bar variants get white from Tailwind's .text-white
   (0,1,0); pairing href with style clears it at (0,2,1). */
a[href*="wa.me"][style*="25D366"],
.sticky-phone-bar a[href*="wa.me"] { color: var(--wa-ink) !important; }

/* Icons follow their button, so scope them the same way — never by href
   alone, or a WhatsApp link on a gold button inherits the wrong ink. */
.btn-wa svg, .btn-cta-wa svg,
a[href*="wa.me"][style*="25D366"] svg,
.sticky-phone-bar a[href*="wa.me"] svg { color: var(--wa-ink); }

/* ── Marginal AA misses ────────────────────────────────────────
   Inline email links in the guides are gold-600 inside the
   accent-soft callout (#F2E4D2), which drops them to 4.23:1.
   gold-700 restores the margin without leaving the gold family.
   ───────────────────────────────────────────────────────────── */
.article-prose a[href^="mailto"], .pimc-note a[href^="mailto"] { color: var(--gold-700); }


/* ── Last AA gaps found by the pass ────────────────────────────
   Links inside the accent-soft callout (#F2E4D2) sit at 4.23:1 in
   gold-600; gold-700 restores the margin. The site-plan CTA is
   dark-on-gold-500 at 4.29:1 — correct per §2 (never white on
   gold-500), just not dark enough, so it moves to ink-900.
   ───────────────────────────────────────────────────────────── */
.article-prose blockquote a, .pimc-note a { color: var(--gold-700); }
.sp-cta-gold, a[style*="background:#B9772A"], a[style*="background:var(--gold)"] { color: var(--ink-900); }