/* ==========================================================================
   SA Dog Rehoming — sadogrehoming.co.za

   Design direction: "the case record".
   Every passage on this site is written to be dated, attributable, and read
   on its own. The design makes that structure visible: a continuous rail runs
   down the left of the record, ticked at each entry, coloured by status where
   a warning interrupts it, and closed by the review attribution.

   Warmth comes from paper and ink, not from decorative accents — so amber and
   red are free to mean "pay attention" and nothing else.

   System fonts only, no frameworks, no remote assets. Mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surface — warm paper, not cream */
  --paper: #fcfbf9;
  --paper-2: #f4f2ee;
  --paper-3: #ebe8e2;
  --white: #ffffff;

  /* Ink */
  --ink: #14181d;
  --ink-2: #4a5560;
  --ink-3: #626d78;

  /* Brand — the fixed anchor across the rescue network */
  --blue: #1f4ea3;
  --blue-deep: #0f2a57;
  --blue-mid: #1a4189;
  --blue-wash: #eef2f9;
  --blue-line: #c6d3e8;

  /* Status — earns its place, never decorative */
  --amber: #9a5b08;
  --amber-wash: #fdf6e8;
  --amber-line: #e6c78d;
  --red: #96231f;
  --red-wash: #fdf1f0;
  --red-line: #e7b5b2;

  /* Rules */
  --rule: #ddd9d2;
  --rule-strong: #c4bfb6;

  /* The rail */
  --rail-w: 2px;
  --rail-gap: 1.15rem;
  --tick-w: 0.95rem;

  /* Type roles: one family, three voices (display / body / utility) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-body: 1.0625rem;
  --t-small: 0.925rem;
  --t-micro: 0.7rem;
  --t-h3: clamp(1.12rem, 1.05rem + 0.35vw, 1.32rem);
  --t-h2: clamp(1.35rem, 1.16rem + 0.95vw, 1.95rem);
  --t-h1: clamp(2rem, 1.5rem + 2.5vw, 3.4rem);
  --t-answer: clamp(1.14rem, 1.06rem + 0.4vw, 1.32rem);

  /* Measure */
  --measure: 68ch;
  --wide: 1180px;
  --gutter: 1.15rem;

  /* Rhythm */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.25rem;
  --s-6: 3.5rem;
  --s-7: 5rem;

  --radius: 4px;
  --radius-lg: 6px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, li, td, th, dd, dt,
h1, h2, h3, h4, blockquote, figcaption {
  overflow-wrap: break-word;
}

a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 120ms ease, color 120ms ease;
}

a:hover {
  color: var(--blue-deep);
  text-decoration-thickness: 2px;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-5) 0;
}

::selection {
  background: var(--blue);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 200;
  padding: 0.8rem 1.15rem;
  background: var(--blue-deep);
  color: var(--white);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus {
  top: 0;
  color: var(--white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The utility voice: micro-caps. Used for every label, date and category on
   the site, so the record metadata reads as one consistent system. */
.eyebrow,
.key-facts-box > h2,
.key-facts-box > h3,
.meta-reviewed,
.footer-col h4,
.data-table th,
.draft-banner strong,
.brand-copy small {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.135em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 251, 249, 0.93);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}

@supports not (backdrop-filter: blur(4px)) {
  .site-header { background: var(--paper); }
}

.header-inner {
  width: min(var(--wide), calc(100% - (var(--gutter) * 2)));
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover { color: var(--blue); text-decoration: none; }

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius);
}

.brand-copy { display: grid; min-width: 0; line-height: 1.1; }

.brand-copy strong {
  font-size: clamp(0.98rem, 0.92rem + 0.28vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--blue-deep);
  white-space: nowrap;
}

.brand-copy small {
  margin-top: 0.3rem;
  color: var(--ink-3);
  font-size: 0.63rem;
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: clamp(0.1rem, 0.8vw, 0.45rem);
}

.desktop-nav a {
  position: relative;
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem 0.6rem;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 140ms ease;
}

.desktop-nav a:hover { color: var(--blue-deep); text-decoration: none; }
.desktop-nav a:hover::after { transform: scaleX(1); }

.desktop-nav a[aria-current="page"] { color: var(--blue-deep); }
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* .desktop-nav a / .mobile-nav a out-specify .btn-primary — the CTA colour
   has to be restated here or the label loses its contrast. */
.desktop-nav a.btn-primary,
.mobile-nav a.btn-primary {
  color: var(--white);
  background: var(--blue);
}

.desktop-nav a.btn-primary:hover,
.mobile-nav a.btn-primary:hover {
  color: var(--white);
  background: var(--blue-deep);
}

.desktop-nav a.btn-primary::after { content: none; }

.desktop-nav .nav-cta {
  margin-left: 0.5rem;
  padding: 0.6rem 1.1rem;
}

.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--blue-deep);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.mobile-menu-btn:hover { background: var(--paper-2); }

.mobile-menu-btn[aria-expanded="true"] {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--white);
}

.mobile-menu-btn svg { width: 22px; height: 22px; }

/* Lines sit at y=12 (middle), y=6 (top), y=18 (bottom). */
.mobile-menu-btn svg line {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 180ms ease, opacity 140ms ease;
}

.mobile-menu-btn[aria-expanded="true"] svg line:nth-of-type(1) { transform: rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] svg line:nth-of-type(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] svg line:nth-of-type(3) { transform: rotate(-45deg) translateY(-6px); }

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 0 var(--gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.mobile-nav[data-open="true"] { display: flex; }

.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.mobile-nav a:hover { color: var(--blue); }

.mobile-nav .btn {
  justify-content: center;
  margin-top: 1rem;
  border-bottom: 0;
}

@media (min-width: 52rem) {
  .desktop-nav { display: flex; }
  .mobile-menu-btn,
  .mobile-nav,
  .mobile-nav[data-open="true"] { display: none; }
  .header-inner { min-height: 74px; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
}

/* --------------------------------------------------------------------------
   4. Containers
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--wide), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

.reading-container {
  width: min(var(--measure), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

.section { padding: var(--s-5) 0 var(--s-6); }
.section--soft { background: var(--paper-2); }
.section--blue { background: var(--blue-wash); }
.section--white { background: transparent; }

@media (min-width: 48rem) {
  .section { padding: var(--s-6) 0 var(--s-7); }
}

/* --------------------------------------------------------------------------
   5. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: var(--blue-deep);
  margin: 0 0 var(--s-4);
}

h2 { font-size: var(--t-h2); margin: var(--s-5) 0 var(--s-3); }
h3 { font-size: var(--t-h3); margin: var(--s-4) 0 var(--s-2); }
h4 { font-size: 1.02rem; margin: var(--s-4) 0 var(--s-2); }

p { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin-bottom: 0.45rem; }

.lead { font-size: 1.15rem; color: var(--ink-2); }

/* Eyebrow: a ruled category label, not a pill */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--s-3);
  color: var(--blue);
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  flex: 0 0 1.5rem;
  background: var(--blue);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--s-5);
  font-size: 0.82rem;
  color: var(--ink-3);
}

.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumb span[aria-hidden="true"] { color: var(--rule-strong); }

/* --------------------------------------------------------------------------
   6. THE RECORD RAIL — the signature
   --------------------------------------------------------------------------
   Every block that forms part of the record carries the rail on its left
   edge. Blocks are stacked with padding rather than margin so the line stays
   unbroken, and status blocks recolour it where they interrupt the record.
   -------------------------------------------------------------------------- */
.answer-block,
.article-hero-image,
.key-facts-box,
.passage,
.table-wrapper,
.faq-section,
.router-fallback,
.emergency-grid,
.alert-box,
.popia-box,
.disclosure-box,
.draft-banner,
.card-grid {
  margin: 0;
  border-left: var(--rail-w) solid var(--rule-strong);
  padding-left: var(--rail-gap);
}

/* Entry tick: a short rule crossing the rail, like a ruled ledger entry.
   Not a numbered step — these passages are not a sequence. */
.passage > h2,
.faq-section > h2,
.router-fallback > h2 {
  position: relative;
  margin-top: 0;
}

.passage > h2::before,
.faq-section > h2::before,
.router-fallback > h2::before {
  content: "";
  position: absolute;
  left: calc((var(--rail-gap) + var(--rail-w) + 0.25rem) * -1);
  top: 0.6em;
  width: var(--tick-w);
  height: var(--rail-w);
  background: var(--blue);
}

.passage {
  padding-top: var(--s-5);
  padding-bottom: var(--s-2);
}

.passage p { color: var(--ink-2); line-height: 1.72; }
.passage p strong { color: var(--ink); }
.passage ul, .passage ol { color: var(--ink-2); margin-bottom: 1.15rem; }
.passage li::marker { color: var(--blue); }
.passage > *:last-child { margin-bottom: 0; }

/* The answer — the site's actual product, so it opens the record */
.page-intro { margin: 0; }

.answer-block {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
  border-left-color: var(--blue);
  font-size: var(--t-answer);
  line-height: 1.6;
  color: var(--ink);
}

.answer-block p { margin: 0; }

/* The hero image is part of the page's opening statement, so it carries the
   blue rail rather than breaking it. */
.article-hero-image {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  border-left-color: var(--blue);
}

.article-hero-image picture { display: block; }

.article-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.article-hero-image figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Key facts — a ruled fact sheet, not a card of badges */
.key-facts-box {
  padding-top: var(--s-5);
  padding-bottom: var(--s-2);
}

.key-facts-box > h2,
.key-facts-box > h3 {
  margin: 0 0 var(--s-3);
  color: var(--ink-3);
}

.facts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.facts-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
}

.facts-list strong { color: var(--ink); font-weight: 700; }

.fact-icon {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 0.8rem;
  line-height: 1.9;
}

@media (min-width: 48rem) {
  .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .facts-list li:nth-last-child(-n+2):nth-child(odd) { border-bottom: 0; }
  .facts-list li:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   7. Status blocks — the rail changes colour where attention is needed
   -------------------------------------------------------------------------- */
.alert-box,
.popia-box,
.disclosure-box,
.draft-banner {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  font-size: var(--t-small);
}

.alert-box > *:last-child,
.popia-box > *:last-child,
.disclosure-box > *:last-child { margin-bottom: 0; }

.popia-box,
.disclosure-box { color: var(--ink-2); }
.disclosure-box strong { color: var(--ink); }

.alert-box { color: var(--ink-2); }

.alert-box--warning {
  border-left-color: var(--amber);
  background: var(--amber-wash);
  color: var(--amber);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--rail-gap);
}

.alert-box--warning p,
.alert-box--warning li,
.alert-box--warning strong { color: var(--amber); }

.alert-box--emergency {
  border-left-color: var(--red);
  background: var(--red-wash);
  color: var(--red);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--rail-gap);
}

.alert-box--emergency p,
.alert-box--emergency li,
.alert-box--emergency strong { color: var(--red); }

/* The DRAFT gate must stay unmistakable */
.draft-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: var(--s-4);
  border-left: 4px solid var(--amber);
  background: var(--amber-wash);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3);
  color: var(--amber);
  font-weight: 600;
}

.draft-banner strong {
  flex: 0 0 auto;
  background: var(--amber);
  color: var(--white);
  padding: 0.3rem 0.55rem;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   8. Buttons — squared actions, not marketing pills
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn:hover { text-decoration: none; }

.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-deep); color: var(--white); }

.btn-secondary {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue-line);
}

.btn-secondary:hover {
  background: var(--blue-wash);
  color: var(--blue-deep);
  border-color: var(--blue);
}

.btn-outline {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}

.btn-outline:hover { background: var(--blue); color: var(--white); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: var(--s-4) 0 0;
}

@media (max-width: 26rem) {
  .btn-group .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   9. Cards — flat entries whose rail fills on hover
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding-top: var(--s-4);
  padding-bottom: var(--s-2);
  background: transparent;
}

@media (min-width: 48rem) {
  .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}

@media (min-width: 64rem) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-3) 0 var(--s-4) var(--s-3);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--rule);
  border-radius: 0;
  transition: border-color 160ms ease;
}

.card:hover { border-left-color: var(--blue); }

.card h3 {
  margin: 0 0 0.5rem;
  font-size: var(--t-h3);
  color: var(--blue-deep);
  letter-spacing: -0.02em;
}

.card p {
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.62;
  margin-bottom: var(--s-3);
}

.card .card-footer { margin-top: auto; }
.card .card-footer .btn { width: 100%; }

@media (min-width: 48rem) {
  .card .card-footer .btn { width: auto; }
}

.pathway-card { text-decoration: none; color: inherit; }
.pathway-card:hover { text-decoration: none; }

.pathway-card .card-link {
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.table-wrapper {
  padding-top: var(--s-4);
  padding-bottom: var(--s-2);
}

.table-wrapper > .data-table { margin-top: 0; }

.data-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--t-small);
}

.data-table th {
  padding: 0 0.9rem 0.65rem 0;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  vertical-align: bottom;
}

.data-table td {
  padding: 0.85rem 0.9rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
}

.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { color: var(--ink); }

/* The table has to scroll on narrow screens without breaking the rail, so the
   scroller lives on the table itself rather than the railed wrapper. */
@media (max-width: 40rem) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   11. FAQ — ruled entries
   -------------------------------------------------------------------------- */
.faq-section {
  padding-top: var(--s-5);
  padding-bottom: var(--s-2);
}

.faq-list {
  display: block;
  margin-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

.faq-item {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

.faq-item h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.faq-item p {
  margin: 0 0 0.6rem;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.65;
}

.faq-item p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. The rail closes here
   -------------------------------------------------------------------------- */
.meta-reviewed {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: var(--s-4) 0 var(--s-4) var(--rail-gap);
  border-left: var(--rail-w) solid var(--blue);
  color: var(--ink-3);
}

/* Terminator: the rail turns and stops, closing the record. */
.meta-reviewed::after {
  content: "";
  position: absolute;
  left: calc(var(--rail-w) * -1);
  bottom: 0;
  width: 1.75rem;
  height: var(--rail-w);
  background: var(--blue);
}

.meta-reviewed strong {
  color: var(--ink-2);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. Next steps — off the rail: this is what you do now
   -------------------------------------------------------------------------- */
.next-steps {
  margin: var(--s-6) 0 0;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  background: var(--blue-deep);
  border-radius: var(--radius-lg);
  color: #dfe7f3;
}

.next-steps h2,
.next-steps h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-h3);
  color: var(--white);
  letter-spacing: -0.018em;
}

.next-steps-list { margin: 0; padding: 0; list-style: none; }

.next-steps-list li {
  margin: 0;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(223, 231, 243, 0.18);
  line-height: 1.6;
  color: #cdd9ec;
}

.next-steps-list li:first-child { border-top: 0; padding-top: 0; }
.next-steps-list li:last-child { padding-bottom: 0; }

.next-steps-list a {
  color: var(--white);
  font-weight: 600;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.next-steps-list a:hover { color: var(--white); text-decoration-color: var(--white); }
.next-steps :focus-visible { outline-color: var(--white); }

/* --------------------------------------------------------------------------
   14. Router
   -------------------------------------------------------------------------- */
.router-container {
  margin: var(--s-5) 0;
  padding: var(--s-4);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.router-question { margin-bottom: var(--s-4); }
.router-question h2 { margin-top: 0; font-size: var(--t-h3); }
.router-question > *:last-child { margin-bottom: 0; }

.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

@media (min-width: 48rem) {
  .options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.option-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-height: 56px;
  padding: 0.95rem 1.1rem;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.option-btn:hover,
.option-btn:focus-visible {
  background: var(--white);
  border-color: var(--blue-line);
  border-left-color: var(--blue);
}

.option-btn strong { font-size: 1rem; color: var(--blue-deep); line-height: 1.35; }
.option-btn span { font-size: 0.86rem; color: var(--ink-2); line-height: 1.5; }

.router-fallback {
  padding-top: var(--s-5);
  padding-bottom: var(--s-2);
}

.router-fallback ol {
  margin: var(--s-3) 0 0;
  padding-left: 1.35rem;
}

.router-fallback > ol > li {
  margin: 0;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}

.router-fallback > ol > li:last-child { border-bottom: 0; padding-bottom: 0; }
.router-fallback li::marker { color: var(--blue); font-weight: 700; }
.router-fallback li strong { color: var(--ink); }

.router-fallback li p {
  margin: 0.3rem 0 0;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.router-fallback ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.router-fallback ul li { margin-bottom: 0.6rem; color: var(--ink-2); font-size: var(--t-small); }

.router-result {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--blue-wash);
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}

.router-result h3 { margin-top: 0; color: var(--blue-deep); }
.router-result > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   15. Welfare emergency triage
   -------------------------------------------------------------------------- */
.emergency-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: var(--s-4);
  padding-bottom: var(--s-2);
  border-left-color: var(--amber);
}

.emergency-card {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

.emergency-card:last-child { border-bottom: 0; }

.emergency-card h3 {
  margin: 0 0 0.4rem;
  font-size: var(--t-h3);
  color: var(--amber);
}

.emergency-card > *:last-child { margin-bottom: 0; }

.emergency-number {
  display: inline-block;
  margin: 0.4rem 0;
  padding: 0.3rem 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 0;
  padding: var(--s-6) 0 var(--s-5);
  background: var(--paper-2);
  border-top: 1px solid var(--rule-strong);
  font-size: var(--t-small);
  color: var(--ink-2);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: 1.7fr 1fr 1fr; gap: var(--s-5) var(--s-6); }
}

.footer-col h4 {
  margin: 0 0 var(--s-3);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink-3);
}

.footer-col p { color: var(--ink-2); max-width: 42ch; margin-bottom: 0; }

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li { margin: 0; }

.footer-nav a {
  display: block;
  padding: 0.4rem 0;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.45;
}

.footer-nav a:hover { color: var(--blue); text-decoration: underline; }

.footer-disclosure {
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-strong);
  font-size: 0.85rem;
  color: var(--ink-3);
  line-height: 1.6;
}

.footer-disclosure p { color: var(--ink-3); max-width: 82ch; margin-bottom: 0.6rem; }
.footer-disclosure p:last-child { margin-bottom: 0; }
.footer-disclosure a { color: var(--blue); font-weight: 600; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   17. Intake form
   -------------------------------------------------------------------------- */
.intake-form { margin-top: var(--s-4); }
.intake-form fieldset {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
}
.intake-form legend {
  font-weight: 700;
  color: var(--ink);
  padding: 0 0.5rem;
  font-size: 1.02rem;
}
.form-row { margin-bottom: 1.1rem; }
.form-row:last-child { margin-bottom: 0; }
.form-row label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}
.form-row label strong { color: var(--blue); }
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule-strong, #c3cde0);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  box-sizing: border-box;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}
.form-row textarea { min-height: 110px; resize: vertical; }
.checkbox-label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.5;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--blue);
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}
.form-note {
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-top: var(--s-3);
  line-height: 1.6;
}
.form-note a { color: var(--blue); }

/* --------------------------------------------------------------------------
   18. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .mobile-nav,
  .mobile-menu-btn,
  .skip-link { display: none !important; }

  body { background: #fff; font-size: 11pt; color: #000; }

  .passage, .faq-item, .key-facts-box, .card { break-inside: avoid; }

  .next-steps {
    background: #fff;
    color: #000;
    border: 1px solid #999;
  }

  .next-steps h2, .next-steps h3, .next-steps-list li, .next-steps-list a { color: #000; }

  .site-footer { background: #fff; }

  a[href^="/"]::after {
    content: " (sadogrehoming.co.za" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }
}