/* =============================================================
   SOUTHSIDE DENTAL TOOWOOMBA — DESIGN TOKENS
   =============================================================
   STATUS: EXTRACTED from the live site's Elementor global kit
   (uploads/elementor/css/post-310.css, retrieved Aug 2026).
   Rule: use ONLY these tokens below this block. Never hard-code
   colours or fonts elsewhere in this file or in page HTML.

   Brand palette (from Elementor kit):
   #29292A charcoal (primary/accent/headings/buttons)
   #8B9F7C sage green (secondary)
   #FAB89F peach (highlight)
   #F4F0EE warm cream · #F7F8FA cool off-white · #E8E1D8 beige
   #D3D3D9 light grey (lines) · #848484 mid grey (muted text)
   Fonts: Prata (headings, serif) · Roboto (body)
   Note: sage #8B9F7C fails WCAG AA contrast on white for body
   text — use it only for large text, decorative elements, or on
   the charcoal footer. Body links stay charcoal.
   ============================================================= */
@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/prata-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/roboto-latin-var.woff2") format("woff2");
}

:root {
  /* Colours (extracted) */
  --colour-ink: #29292A;            /* body text, headings */
  --colour-primary: #29292A;        /* buttons, key UI */
  --colour-primary-dark: #000000;   /* button hover */
  --colour-secondary: #8B9F7C;      /* sage — accents, footer headings */
  --colour-accent: #FAB89F;         /* peach — offer highlight */
  --colour-muted: #848484;          /* secondary text */
  --colour-bg: #FFFFFF;
  --colour-bg-soft: #F4F0EE;        /* warm cream sections */
  --colour-bg-alt: #F7F8FA;         /* cool off-white */
  --colour-beige: #E8E1D8;
  --colour-line: #D3D3D9;

  /* Typography (extracted) */
  --font-heading: "Prata", Georgia, "Times New Roman", serif;
  --font-body: "Roboto", "Segoe UI", system-ui, sans-serif;
  --size-h1: clamp(2rem, 4.5vw, 3rem);
  --size-h2: clamp(1.5rem, 3vw, 2.1rem);
  --size-h3: 1.25rem;
  --size-body: 1.05rem;

  /* Spacing & shape */
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.75rem;
  --space-4: 3rem;  --space-5: 4.5rem;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(41, 41, 42, .08);
  --container: 1120px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; color: var(--colour-ink); background: var(--colour-bg);
  font-family: var(--font-body); font-size: var(--size-body); line-height: 1.7;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; line-height: 1.25; color: var(--colour-ink); }
h1 { font-size: var(--size-h1); } h2 { font-size: var(--size-h2); } h3 { font-size: var(--size-h3); }
a { color: var(--colour-ink); text-decoration-color: var(--colour-secondary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--colour-secondary); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-2); }
.section { padding-block: var(--space-4); }
.section-soft { background: var(--colour-bg-soft); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; color: var(--colour-muted); margin-bottom: .2rem; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--space-1); top: var(--space-1); background: #fff; padding: var(--space-1); z-index: 99; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: .75rem 1.6rem; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; text-decoration: none;
  border: 2px solid var(--colour-primary); transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--colour-primary); color: #fff; }
.btn-primary:hover { background: var(--colour-primary-dark); border-color: var(--colour-primary-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--colour-primary); }
.btn-outline:hover { background: var(--colour-primary); color: #fff; }
/* Pill variant — matches the live site's rounded outline buttons */
.btn-pill { border-radius: 999px; border-color: var(--colour-secondary); color: var(--colour-ink); }
.btn-pill:hover { background: var(--colour-secondary); border-color: var(--colour-secondary); color: #fff; }

/* ---------- Header: floating pill nav ----------
   Detached rounded cream bar that floats over the page (desktop),
   click-to-open dropdown panels, dark Book pill + outline phone
   pill. Collapses to the familiar hamburger panel below 1260px.
   Gaps beside the pill stay click-through (pointer-events) so the
   page behind is usable. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: .8rem var(--space-2) 1.3rem;
  background: transparent; pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.header-pill {
  max-width: 1240px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  background: var(--colour-bg-soft);
  border: 1px solid var(--colour-line); border-radius: 999px;
  box-shadow: var(--shadow);
  padding: .45rem .55rem .45rem 1rem;
}
.brand {
  display: inline-flex; align-items: baseline; gap: .35rem;
  font-family: var(--font-heading); font-size: 1.22rem; line-height: 1.2;
  color: var(--colour-ink); text-decoration: none; white-space: nowrap;
  padding-block: .35rem; /* keeps the pill the same height as the logo did */
}
.brand span { color: var(--colour-secondary); }
.brand:hover { color: var(--colour-ink); }
.brand:hover span { color: var(--colour-secondary); }
.site-nav > ul {
  display: flex; align-items: center; gap: .95rem;
  list-style: none; margin: 0; padding: 0;
}
.site-nav a:not(.btn), .dd-toggle {
  text-decoration: none; color: var(--colour-ink);
  font-family: var(--font-body); font-weight: 500; font-size: .93rem;
  white-space: nowrap;
}
.site-nav > ul > li > a:not(.btn):hover { color: var(--colour-secondary); }
.nav-toggle { display: none; }

/* Nav pills (right side) */
.nav-cta .btn { padding: .55rem 1.15rem; border-radius: 999px; font-size: .92rem; white-space: nowrap; }
.btn-book { background: var(--colour-primary); border: 2px solid var(--colour-primary); color: #fff; }
.btn-book:hover { background: var(--colour-primary-dark); border-color: var(--colour-primary-dark); color: #fff; }
.btn-phone { background: transparent; border: 2px solid var(--colour-primary); color: var(--colour-ink); }
.btn-phone:hover { background: var(--colour-primary); color: #fff; }

/* Dropdowns */
.has-dd { position: relative; }
.dd-toggle {
  background: none; border: 0; padding: 0; cursor: pointer; line-height: inherit;
  display: inline-flex; align-items: center; gap: .3rem;
}
.dd-toggle::after {
  content: ""; width: .48em; height: .48em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-.14em); transition: transform .15s;
}
.dd-toggle:hover, .has-dd.open > .dd-toggle { color: var(--colour-secondary); }
.has-dd.open > .dd-toggle::after { transform: rotate(225deg) translateY(-.1em); }
.dd {
  display: none; position: absolute; top: calc(100% + 1rem); left: 50%;
  transform: translateX(-50%);
  background: var(--colour-bg); border: 1px solid var(--colour-line);
  border-radius: var(--radius); box-shadow: 0 10px 32px rgba(41,41,42,.16);
  padding: .6rem; min-width: 250px; z-index: 60;
}
.has-dd.open > .dd { display: block; }
.dd a {
  display: block; padding: .5rem .8rem; border-radius: 7px;
  text-decoration: none; color: var(--colour-ink); font-size: .95rem; white-space: nowrap;
}
.dd a:hover, .dd a:focus-visible { background: var(--colour-bg-soft); color: var(--colour-ink); }
.dd-wide { min-width: min(660px, calc(100vw - 2rem)); padding: .8rem; }
.dd-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem 1rem; }
.dd-heading {
  margin: .4rem 0 .2rem; padding-inline: .8rem;
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--colour-muted);
}
.dd-featured {
  display: block; background: var(--colour-bg-soft);
  border: 1px solid var(--colour-beige); border-radius: 8px;
  padding: .7rem .9rem !important; margin-bottom: .6rem; white-space: normal !important;
}
.dd-featured strong { display: block; font-weight: 600; }
.dd-featured span { display: block; color: var(--colour-muted); font-size: .88rem; margin-top: .1rem; }
.dd-featured:hover, .dd-featured:focus-visible { border-color: var(--colour-secondary); background: var(--colour-bg-soft); }
.dd-all {
  margin-top: .5rem; border-top: 1px solid var(--colour-line);
  border-radius: 0 0 7px 7px !important; font-weight: 600;
}

/* Collapsed header: hamburger panel inside the pill.
   Breakpoint sits where the FULL menu stops fitting on one line —
   below this, cramming it in causes wrapped labels and orphaned
   chevrons, so the whole nav folds into the hamburger instead. */
@media (max-width: 1259px) {
  .site-header { padding-inline: var(--space-1); padding-bottom: 1rem; }
  .header-pill { border-radius: 26px; position: relative; }
  .brand { font-size: 1.05rem; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; background: none;
    border: 0; padding: .6rem; cursor: pointer;
  }
  .nav-toggle span { width: 24px; height: 3px; background: var(--colour-ink); border-radius: 2px; }
  .site-nav { display: none; }
  .site-nav.open {
    display: block; position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
    background: var(--colour-bg); border: 1px solid var(--colour-line);
    border-radius: var(--radius); box-shadow: 0 10px 32px rgba(41,41,42,.16);
    padding: var(--space-2); max-height: calc(100vh - 9rem); overflow-y: auto; z-index: 60;
  }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .site-nav > ul > li > a:not(.btn), .dd-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    padding: .65rem .4rem; font-size: 1.02rem;
  }
  .dd {
    position: static; transform: none; display: none; min-width: 0;
    border: 0; box-shadow: none; background: var(--colour-bg-alt);
    border-radius: var(--radius); margin: 0 0 .4rem; padding: .4rem;
  }
  .dd a { white-space: normal; }
  .dd-wide { min-width: 0; }
  .dd-cols { grid-template-columns: 1fr; gap: 0; }
  .nav-cta { margin-top: .5rem; }
  .nav-cta .btn { display: block; text-align: center; width: 100%; }
}

/* ---------- Hero ---------- */
.hero { background: var(--colour-bg-soft); padding-block: var(--space-5); }
.hero p.lead { font-size: 1.2rem; max-width: 46rem; color: var(--colour-ink); }
.hero-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--space-3); }
.card {
  background: var(--colour-bg); border: 1px solid var(--colour-line);
  border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card-img { margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2); }
.card-img img { border-radius: var(--radius) var(--radius) 0 0; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- Media rows (image beside text) ---------- */
.media-row { display: grid; gap: var(--space-3); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 760px) { .media-row { grid-template-columns: 1.2fr 1fr; } }
.media-row img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Portrait video ---------- */
.video-portrait {
  width: 100%; max-width: 360px; height: auto; margin-inline: auto;
  border-radius: var(--radius); box-shadow: var(--shadow); display: block;
  aspect-ratio: 9 / 16; object-fit: cover; background: var(--colour-beige);
}

/* ---------- Offer banner ----------
   Matches the live site: warm cream band with a white-bordered box. */
.offer-banner { background: var(--colour-bg-soft); text-align: center; padding-block: var(--space-4); }
.offer-banner .offer-inner {
  border: 3px solid #fff; border-radius: var(--radius);
  padding: var(--space-3) var(--space-2);
}
.offer-banner .offer-price { font-family: var(--font-heading); font-size: 2.6rem; color: var(--colour-secondary); margin: 0; }
.offer-banner p { margin: .3rem 0 var(--space-2); color: var(--colour-ink); }
.offer-banner a { color: var(--colour-ink); text-decoration-color: var(--colour-secondary); }

/* ---------- Payment plans strip (homepage) ----------
   Matches the live site: cream box, kicker line, sage serif
   heading, pill outline button. */
.payment-strip {
  background: var(--colour-bg-soft); border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
}
.payment-strip .strip-kicker { margin: 0 0 .2rem; font-weight: 500; color: var(--colour-ink); }
.payment-strip h2 { margin: 0 0 var(--space-3); color: var(--colour-secondary); font-size: clamp(1.8rem, 3.6vw, 2.6rem); }

/* ---------- Footer ---------- */
.site-footer { background: var(--colour-ink); color: #fff; margin-top: var(--space-5); }
.footer-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-block: var(--space-4); }
.footer-heading { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--colour-secondary); text-transform: uppercase; letter-spacing: .08em; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .5rem; }
.site-footer a { color: #fff; text-decoration-color: var(--colour-secondary); }
.site-footer a:hover { color: var(--colour-accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); padding-block: var(--space-2); font-size: .9rem; }

/* ---------- Lite YouTube embeds (patient resources) ----------
   No third-party code loads until the user clicks a thumbnail;
   main.js then swaps the button for a youtube-nocookie iframe. */
.yt-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--space-3); }
.yt-lite {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  border: 1px solid var(--colour-line); border-radius: var(--radius);
  overflow: hidden; background: var(--colour-beige); box-shadow: var(--shadow);
  text-align: left; font-family: var(--font-body);
}
.yt-lite img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.yt-lite .yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--colour-ink); opacity: .92;
}
.yt-lite .yt-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--colour-bg);
}
.yt-lite:hover .yt-play, .yt-lite:focus-visible .yt-play { background: var(--colour-secondary); opacity: 1; }
.yt-lite .yt-title {
  display: block; padding: var(--space-1) var(--space-2) var(--space-2);
  background: var(--colour-bg); color: var(--colour-ink); font-weight: 500; font-size: 1rem;
}
.yt-frame {
  width: 100%; aspect-ratio: 16 / 10; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow); display: block;
}

/* ---------- Aftercare accordions (patient resources) ---------- */
.aftercare {
  background: var(--colour-bg); border: 1px solid var(--colour-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-top: var(--space-2);
}
.aftercare summary {
  cursor: pointer; padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading); font-size: var(--size-h3);
  list-style: none; position: relative; padding-right: 3rem;
}
.aftercare summary::-webkit-details-marker { display: none; }
.aftercare summary::after {
  content: "+"; position: absolute; right: var(--space-3); top: 50%;
  transform: translateY(-50%); color: var(--colour-secondary);
  font-family: var(--font-body); font-size: 1.5rem; font-weight: 600; line-height: 1;
}
.aftercare[open] summary::after { content: "\2212"; }
.aftercare summary:hover, .aftercare summary:focus-visible { color: var(--colour-secondary); }
.aftercare .aftercare-body { padding: 0 var(--space-3) var(--space-3); border-top: 1px solid var(--colour-line); }
.aftercare .aftercare-body ul { padding-left: 1.2rem; }
.aftercare .aftercare-body li { margin-bottom: .5rem; }

/* ---------- Hub tiles (patient resources launcher) ----------
   Large, thumb-friendly launcher buttons. Whole tile is the link.
   Inspired by task-first hub patterns (Apple Support / GOV.UK):
   whitespace and typography do the work — no images, no clutter. */
.hub-tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hub-tile {
  display: block; position: relative;
  background: var(--colour-bg); border: 1px solid var(--colour-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--space-3) 3.2rem var(--space-3) var(--space-3);
  text-decoration: none; color: var(--colour-ink);
  transition: border-color .15s, transform .15s;
}
.hub-tile:hover, .hub-tile:focus-visible { border-color: var(--colour-secondary); transform: translateY(-2px); color: var(--colour-ink); }
.hub-tile h2 { font-size: var(--size-h3); margin: 0 0 .4rem; }
.hub-tile p { margin: 0; color: var(--colour-muted); font-size: .98rem; line-height: 1.55; }
.hub-tile::after {
  content: "\2192"; position: absolute; right: var(--space-3); top: 50%;
  transform: translateY(-50%); color: var(--colour-secondary);
  font-size: 1.4rem; transition: transform .15s;
}
.hub-tile:hover::after, .hub-tile:focus-visible::after { transform: translateY(-50%) translateX(4px); }
.hub-footnote { margin-top: var(--space-4); color: var(--colour-muted); }

/* ---------- Price tables (pricing page) ----------
   Clean, scannable guide-price tables. .table-wrap gives
   horizontal scroll on narrow phones so nothing is cut off.
   Two columns (Treatment | Price) — treatment names link to their
   service pages; item codes live in the .codes-ref dropdowns. */
.table-wrap { overflow-x: auto; margin-block: var(--space-2) var(--space-3); }
.price-table {
  width: 100%; border-collapse: collapse; background: var(--colour-bg);
  border: 1px solid var(--colour-line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-width: 360px;
}
.price-table th, .price-table td {
  text-align: left; padding: .8rem var(--space-2);
  border-bottom: 1px solid var(--colour-line);
}
.price-table thead th {
  background: var(--colour-bg-soft); font-family: var(--font-body);
  font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em;
}
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: var(--colour-bg-alt); }
.price-table th:first-child { width: 68%; }
.price-table td:last-child { font-weight: 600; white-space: nowrap; }
/* On narrow phones, let long text prices ("Bulk billed with Medicare",
   "Quoted at consultation") wrap to two lines rather than forcing the
   price column wide and squashing the treatment column. Numeric prices
   contain no spaces, so they still never break. */
@media (max-width: 600px) {
  .price-table td:last-child { white-space: normal; }
}

/* Anchor targets (e.g. /pricing/#fillings) clear the sticky header */
.section h2[id], .section-soft h2[id], #dva { scroll-margin-top: 9rem; }

/* Item-code chips — small pills patients can read to their health
   fund. Used inside the .codes-ref dropdowns only, never in the
   price tables or offer banners. */
.code-chip {
  display: inline-block; background: var(--colour-bg-soft);
  border: 1px solid var(--colour-line); border-radius: 999px;
  padding: .05rem .55rem; font-size: .8rem; font-weight: 500;
  color: var(--colour-ink); white-space: nowrap; margin: .1rem .15rem .1rem 0;
}

/* Item-code reference dropdowns (pricing page) ----------
   Collapsible <details> holding a compact Treatment | Item codes
   table — one master reference (in the health funds section) plus one
   per pricing section. Closed by default; styling mirrors the
   .aftercare accordions but more compact. */
.codes-ref {
  background: var(--colour-bg); border: 1px solid var(--colour-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-block: var(--space-2) var(--space-3);
}
.codes-ref summary {
  cursor: pointer; padding: .8rem var(--space-3);
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  list-style: none; position: relative; padding-right: 3rem;
}
.codes-ref summary::-webkit-details-marker { display: none; }
.codes-ref summary::after {
  content: "+"; position: absolute; right: var(--space-3); top: 50%;
  transform: translateY(-50%); color: var(--colour-secondary);
  font-size: 1.4rem; font-weight: 600; line-height: 1;
}
.codes-ref[open] summary::after { content: "\2212"; }
.codes-ref summary:hover, .codes-ref summary:focus-visible { color: var(--colour-secondary); }
.codes-ref .codes-ref-body { padding: 0 var(--space-3) var(--space-2); border-top: 1px solid var(--colour-line); }
.codes-ref .codes-ref-body > p { font-size: .95rem; color: var(--colour-muted); margin: var(--space-2) 0 .6rem; }
.codes-table { width: 100%; border-collapse: collapse; }
.codes-table th, .codes-table td {
  text-align: left; padding: .55rem .6rem .55rem 0;
  border-bottom: 1px solid var(--colour-line); vertical-align: top; font-size: .95rem;
}
.codes-table th {
  font-weight: 600; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--colour-muted);
}
.codes-table tr:last-child td { border-bottom: 0; }

/* Pricing commitments callout (quote-first / treatment-plan-first) */
.pricing-callout {
  background: var(--colour-bg-soft); border-left: 4px solid var(--colour-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-2) var(--space-3); margin-block: var(--space-2);
}
.pricing-callout p { margin: .35rem 0; }

/* Whole-card links (homepage differentiator tiles → dental anxiety page).
   Same hover affordance as .hub-tile / .article-card. */
a.card-link { display: block; text-decoration: none; color: var(--colour-ink); transition: border-color .15s, transform .15s; }
a.card-link:hover, a.card-link:focus-visible { border-color: var(--colour-secondary); transform: translateY(-2px); color: var(--colour-ink); }

/* Partner credit (Denticare page) — small "provided by" logo + caption.
   mix-blend-mode: multiply dissolves the logo's baked-in white
   background into the cream hero, so no re-exported asset is needed. */
.partner-credit { display: flex; align-items: center; gap: .9rem; margin-top: var(--space-3); color: var(--colour-muted); font-size: .92rem; }
.partner-credit img { width: 140px; height: auto; mix-blend-mode: multiply; }

/* Preferred-provider health fund chips */
.fund-chip {
  display: inline-block; background: var(--colour-bg);
  border: 1px solid var(--colour-line); border-radius: 999px;
  padding: .4rem 1.1rem; font-weight: 600; margin: .2rem .35rem .2rem 0;
  box-shadow: var(--shadow);
}

/* ---------- Articles (dental advice / blog) ----------
   Narrow reading measure, byline block, tag chips, TOC box,
   compliance disclaimer and related-article cards. All content
   in these blocks is injected by build.js from article META. */
.article-narrow { max-width: 46rem; }
.article-meta { border-bottom: 1px solid var(--colour-line); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }
.article-byline { margin: 0 0 .2rem; }
.article-dates { margin: 0; color: var(--colour-muted); font-size: .92rem; }
.article-tags { margin: .6rem 0 0; }
.tag {
  display: inline-block; background: var(--colour-bg-soft); border: 1px solid var(--colour-line);
  border-radius: 999px; padding: .15rem .8rem; font-size: .82rem; color: var(--colour-ink);
}
.toc {
  background: var(--colour-bg-soft); border: 1px solid var(--colour-line);
  border-radius: var(--radius); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.toc-title { font-weight: 600; margin: 0 0 .4rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; color: var(--colour-muted); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: .3rem; }
.article-narrow h2 { margin-top: var(--space-4); scroll-margin-top: 10rem; }
.article-disclaimer {
  background: var(--colour-bg-alt); border-left: 4px solid var(--colour-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-2) var(--space-3); margin-top: var(--space-4);
  font-size: .95rem; color: var(--colour-ink);
}
.article-disclaimer p { margin: 0; }
.article-more { margin-top: var(--space-4); }
.article-card { display: block; text-decoration: none; color: var(--colour-ink); transition: border-color .15s, transform .15s; }
.article-card:hover, .article-card:focus-visible { border-color: var(--colour-secondary); transform: translateY(-2px); color: var(--colour-ink); }
.article-card h3 { font-size: var(--size-h3); }
.article-card .article-dates { margin-bottom: .6rem; }

/* ---------- Forms (contact + Denticare application) ----------
   Shared styles for on-site forms. Inputs inherit body font and the
   design tokens; focus ring uses sage on a charcoal border. */
.form-narrow { max-width: 40rem; }
.form-field { margin-bottom: var(--space-3); }
.form-field label, .form-radio-group legend {
  display: block; font-weight: 600; margin-bottom: .45rem;
}
.form-field .optional { font-weight: 400; color: var(--colour-muted); font-size: .92rem; }
.form-field .req { color: var(--colour-secondary); }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%; padding: .7rem .9rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--colour-ink);
  background: var(--colour-bg); border: 2px solid var(--colour-line);
  border-radius: var(--radius);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--colour-secondary);
  box-shadow: 0 0 0 3px rgba(139, 159, 124, .25);
}
.form-field textarea { resize: vertical; min-height: 6rem; }
.form-hint { margin: .45rem 0 0; font-size: .92rem; color: var(--colour-muted); }
.form-radio-group { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.radio-label { display: inline-flex; align-items: center; gap: .45rem; margin-right: var(--space-3); font-weight: 400; }
.radio-label input { accent-color: var(--colour-secondary); width: 1.1rem; height: 1.1rem; }
.form-privacy {
  background: var(--colour-bg-alt); border-left: 4px solid var(--colour-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-2) var(--space-3); font-size: .95rem;
}
.form-status { min-height: 1.5rem; margin-top: var(--space-2); }
.form-status-error { color: #8B2F2F; font-weight: 600; }
.form-field button.btn { cursor: pointer; }
button.btn { cursor: pointer; font-size: 1rem; }
/* Honeypot: visually removed, still in the DOM for bots */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- TEMPORARY: review badges (REMOVE BEFORE CUTOVER) ----------
   Red is a review-only utility colour, NOT a brand token. These badges
   mark spots awaiting Immanuel's input (numbered so he can reply with a
   list). Every .todo / .todo-note must be gone before the site goes live
   on sdtoowoomba.com.au — see the cutover blocker in PROJECT-FACTS.md. */
.todo {
  display: inline-block; min-width: 1.7em; padding: .1em .5em;
  border-radius: 6px; background: #C62828; color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  text-align: center; line-height: 1.5;
}
.todo-note { color: #C62828; font-weight: 600; }