/* =========================================================================
   Allura Dental — Global Stylesheet
   Design system per Allura-Dental-Website-Design-Guide.html (locked).
   Palette: Option B (neutral-dominant). Type: Literata + Manrope.
   Elevation: hairline borders on static content, subtle shadow on interactive.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Option B — neutral-dominant (default) */
  --warm-white:    #FDFCFA;
  --soft-beige:    #F3EDE3;
  --premium-beige: #FBF9F4;
  --light-grey:    #E7E3DB;
  --hairline:      #E7E3DB;
  --shale:         #BCC0BA; /* Extended palette */
  --footer-grey:   #E6E8E3; /* lightened Shale Grey tint — footer backdrop per design guide */

  /* Accents */
  --brushed-gold:  #B8965A;
  --deep-gold:     #8F7038;
  --sage:          #6A7F62;
  --forest:        #3F632F;

  /* Structural / functional */
  --monument:      #323233; /* structural framing only */
  --ink:           #1c1c1c; /* functional "black" — body, headings, buttons */
  --ink-soft:      #4a4a48;

  /* Type */
  --font-head: 'Literata', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Metrics */
  --radius: 4px;               /* architectural, never pills */
  --container: 1200px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(2.1rem, 4vw, 3.4rem);
  --header-h: 76px;
  --hover-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { background: var(--warm-white); }
body {
  margin: 0;
  position: relative;
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.95rem, 4vw, 2.95rem); }
h2 { font-size: clamp(1.45rem, 2.7vw, 1.95rem); }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.28rem); }
p  { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bg-beige { background: var(--soft-beige); }
.bg-premium { background: var(--premium-beige); }
.bg-white { background: var(--warm-white); }

/* ---- Global botanical watermark: whisper-faint sage specimens down both edges + bouquet at top ---- */
/* Centre bouquet lives on the html canvas, top-centred over the hero, sized to
   read proportionate to the side specimens at every width (all screen sizes). */
html {
  background-image: url(/assets/img/natives/bg-bouquet.webp);
  background-repeat: no-repeat;
  background-position: center 96px;
  background-size: clamp(280px, 44vw, 560px) auto;
  background-attachment: scroll;
}
@media (max-width: 760px) { html { background-position: center 116px; background-size: clamp(240px, 62vw, 360px) auto; } }
/* The alternating left/right trail is painted on a layer that BEGINS at the
   "our message" line (--hero-h, measured per page in the inline script). Because
   the layer itself starts below the hero, the hero stays clear and the trail
   starts in the right place at EVERY width — phone to 32" — without any vw-based
   offset that would drift. Each specimen's base hugs its edge and covers ~44vw
   (>40%). Falls back to 64vh before the script runs. */
body { position: relative; }
body::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--hero-h, 64vh); bottom: 0;
  z-index: -1; pointer-events: none;
  background-image: url(/assets/img/natives/bg-left.webp), url(/assets/img/natives/bg-right.webp);
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: min(48vw, 620px) auto, min(48vw, 620px) auto;
}
/* reveal the canvas watermark through the (near-identical off-white) section fills */
.bg-premium, .bg-beige, .bg-white { background: transparent; }
/* retire the old per-section watermark pilot + homepage hero bouquet (replaced by this global layer) */
.has-wm::before { display: none; }
.hero::after { display: none; }
.hero { background: transparent; }
.center { text-align: center; }
.measure { max-width: 62ch; margin-inline: auto; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--deep-gold);
  margin: 0 0 .65rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--brushed-gold); display: inline-block; }
.center .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--brushed-gold); display: inline-block; }

.lead { font-size: 1.05rem; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem; line-height: 1;
  padding: .9rem 1.5rem; border-radius: var(--radius); border: 1.5px solid transparent;
  cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--brushed-gold); color: var(--warm-white); }
.btn--primary:hover { background: var(--deep-gold); box-shadow: var(--hover-shadow); transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--monument); }
.btn--secondary:hover { background: var(--monument); color: var(--warm-white); box-shadow: var(--hover-shadow); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--deep-gold); padding: .4rem 0; border: none; }
.btn--ghost:hover { color: var(--brushed-gold); }
.btn--ghost .arrow { transition: transform .18s ease; }
.btn--ghost:hover .arrow { transform: translateX(3px); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--warm-white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }
/* header spans the full width (not the 1200 container) so the logo sits left, nav spreads right — no crowding, more room */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: .7rem; height: var(--header-h); max-width: none; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }   /* the container's own gutter, so the logo sits on the same left edge as the h1 below it */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }   /* never let the header squeeze the logo */
.brand img { height: 42px; width: auto; flex: none; max-width: none; }   /* enlarged & prominent — sits on the oak ledge */
.brand .logo-tertiary { display: none; height: 50px; }   /* Tertiary for mobile */
.brand .logo-horizontal { display: block; }

.nav { display: flex; align-items: center; gap: clamp(.55rem, 1.3vw, 1.35rem); margin-left: auto; }
.nav a {
  font-size: .9rem; font-weight: 500; color: var(--ink); position: relative; padding: .35rem 0; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--brushed-gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--forest); }
.nav-book { display: none; }   /* only appears inside the mobile cascaded menu */

/* Treatments dropdown — desktop: hover/focus reveals the submenu. Gives crawlers
   and LLMs a direct in-nav path to the treatment pages, not just the hub. */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-sub-toggle { display: none; }   /* mobile-only; desktop uses hover */
.nav-sub { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 15.5rem;
  display: flex; flex-direction: column; gap: .1rem; padding: .4rem;
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(40,40,30,.12);
  opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .15s ease, transform .15s ease; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub, .nav-group.is-expanded .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0); }
.nav-group-link { cursor: pointer; }   /* it toggles the menu, it isn't a link to a page */
.nav-sub a { display: flex; align-items: center; gap: .5rem; padding: .35rem .55rem; border-radius: 6px; white-space: nowrap; font-size: .92rem; font-weight: 500; }
.nav-sub a::after { display: none; }
.nav-sub a:hover { background: var(--premium-beige); color: var(--forest); }
/* Native specimen icons in the Treatments dropdown (40px desktop / 28px mobile) */
.nav-ic { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; display: block;
  filter: saturate(.82) contrast(.93) brightness(1.05); }
@media (max-width: 960px) { .nav-ic { width: 28px; height: 28px; flex-basis: 28px; } }

/* PILOT — native botanical watermarks (sage duotone, decorative, one specimen per section) */
.has-wm { position: relative; overflow: hidden; }
.has-wm > * { position: relative; z-index: 1; }
.has-wm::before { content: ""; position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain; opacity: .12; width: 32rem; height: 50rem; }
/* placement */
.wm-right::before { right: -9rem; top: 50%; transform: translateY(-50%) rotate(6deg); }
.wm-left::before  { left: -9rem;  top: 50%; transform: translateY(-50%) rotate(-5deg); }
.wm-br::before    { right: -8rem; bottom: -9rem; transform: rotate(-3deg); }
.wm-bl::before    { left: -8rem;  bottom: -9rem; transform: rotate(4deg); }
.wm-tr::before    { right: -8rem; top: -9rem;    transform: rotate(3deg); }
/* specimens */
.wm--euc::before           { background-image: url(/assets/img/natives/watermark/eucalyptus.webp); }
.wm--banksia::before       { background-image: url(/assets/img/natives/watermark/banksia.webp); }
.wm--fern::before          { background-image: url(/assets/img/natives/watermark/fern.webp); }
.wm--root::before          { background-image: url(/assets/img/natives/watermark/root.webp); }
.wm--blossom::before       { background-image: url(/assets/img/natives/watermark/blossom.webp); }
.wm--gumnut::before        { background-image: url(/assets/img/natives/watermark/gumnut.webp); }
.wm--banksiaflower::before { background-image: url(/assets/img/natives/watermark/banksia-flower.webp); width: 40rem; }
.wm--flannel::before       { background-image: url(/assets/img/natives/watermark/flannel.webp); }
@media (max-width: 860px) { .has-wm::before { opacity: .07; width: 22rem; height: 34rem; }
  .wm-right::before, .wm-br::before, .wm-tr::before { right: -12rem; }
  .wm-left::before, .wm-bl::before { left: -12rem; } }
@media (prefers-reduced-motion: no-preference) { .has-wm::before { transition: opacity .3s ease; } }

.header-cta { display: flex; align-items: center; gap: .45rem; }
.phone-btn { display: inline-flex; align-items: center; gap: .45rem; }
/* Desktop keeps header CTAs; mid-size (tablet/foldable) drops them for the bottom strip */
.header-cta .btn { padding: .55rem .9rem; font-size: .86rem; gap: .4rem; }
@media (max-width: 1140px){ .header-cta .btn { display: none; } }   /* CTA appears only once there's room, so it never squeezes the logo up against Home */
/* The header used to run edge to edge with a gutter of its own, so on a wide monitor the
   logo sat ~355px left of the h1 under it, and at 900px it was still 16px adrift — the page
   read as two unrelated grids. It now takes the container's gutter at every width, and the
   container's box above 1200px, so the logo and the h1 share one left edge all the way down.
   Worst case is 961px, the last step before the nav collapses to the hamburger: the brand
   clears the nav by 16px there, which matches the nav's own item gap and does not overflow. */
@media (min-width: 1200px) { .header-inner { max-width: var(--container); margin-inline: auto; } }
@media (max-width: 420px) { .brand img { height: 34px; } }          /* tiny phones: shrink logo so it clears the hamburger */

/* Mobile menu toggle */
.nav-toggle {
  display: none; background: none; border: none; padding: .4rem; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: transparent; overflow: hidden; }   /* transparent so the canvas watermark shows in the hero too */
/* all-treatments native bouquet as a soft watermark rising from the bottom-left, behind the hero content */
.hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -3rem; bottom: -2.5rem; width: 33rem; height: 44rem;
  background: url(/assets/img/natives/watermark/all-treatments.webp) no-repeat left bottom / contain; opacity: .10; }
.hero > .container { position: relative; z-index: 1; }
@media (max-width: 760px) { .hero::after { width: 24rem; height: 32rem; left: -5rem; opacity: .07; } }
.hero-grid { display: grid; grid-template-columns: 1.12fr .82fr; gap: clamp(1.25rem, 3.5vw, 3rem); align-items: end; }
.hero-copy h1 { margin-bottom: .35em; }
.hero-values { display: inline-flex; gap: .5rem; align-items: center; font-family: var(--font-head); font-style: italic; color: var(--forest); font-size: 1.05rem; margin-bottom: 1.4rem; }
.hero-values span { color: var(--brushed-gold); }
.hero-sub { font-size: 1.08rem; color: var(--ink-soft); max-width: 46ch; }
/* One line of suburb <-> treatment cross-links under a hero lead. We never built
   suburb x treatment landing pages, so this is the only place the pair is named.
   It is typeset as a sibling of the lead above it, not as fine print: same family,
   same colour, same wrap width, one step down in size.

   The measure is in rem, NOT ch. `ch` resolves against the element's OWN font-size,
   so 62ch here came out 508px against the lead's 600px — the line wrapped 92px
   narrower, its right edge never lined up, and it read as a detached footnote. That
   was the whole reason it looked like a different kind of text; no font-size change
   fixes it. 39rem is the lead's 62ch measured at the lead's size, so on any column
   wider than that the column governs both paragraphs identically. */
.hero-cross {
  margin-top: 1rem;          /* documentation, not effect: the lead's 1rem bottom margin
                                collapses over this and the larger wins, so the gap is
                                1rem either way. To tighten it, take the margin off .lead. */
  font-size: .84rem;         /* base = the suburb pages' six-link directory line */
  line-height: 1.6;
  color: var(--ink-soft);    /* 8.7:1 on --warm-white */
  max-width: 39rem;
}
/* Treatment pages only. There the line is a sentence and takes near-lead size;
   .tx-hero-copy is on 17/17 treatment pages and 0/27 suburb pages, whose line is a
   label-and-link list that would read as a nav bar if it were scaled up. */
.tx-hero-copy .hero-cross { font-size: .95rem; }
.hero-cross b { font-weight: 600; color: var(--ink); }
/* --hairline was 1.25:1 on the page background, so the four suburb names were
   indistinguishable from the prose around them. --deep-gold is 4.5:1 and is already
   the link colour in .crumbs:hover. --brushed-gold (2.7:1) misses the 3:1 floor. */
.hero-cross a { color: inherit; text-decoration: underline;
  text-decoration-color: var(--deep-gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero-cross a:hover { color: var(--deep-gold); text-decoration-color: currentColor; }
.hero-cross a:focus-visible { outline: 2px solid var(--deep-gold); outline-offset: 2px; }
.container.center .hero-cross { margin-inline: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

.hero-media { position: relative; display: flex; justify-content: center; align-items: flex-end; }
/* Hazier, softer cutout so the portrait sits *inside* the hero rather than on top of it */
.hero-cutout { width: 100%; max-width: 248px; height: auto; display: block; filter: saturate(.62) contrast(.86) brightness(1.1); opacity: .92; }
/* Treatment hero with an Australian-native specimen (natural colour + the site's hazy hero filter) */
.tx-hero { display: grid; grid-template-columns: 1.05fr .82fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.tx-hero-media { align-self: center; }   /* copy (incl. breadcrumb) top-aligns consistently; specimen stays centred */
.tx-hero-copy { min-width: 0; }
.tx-hero-media { display: flex; flex-direction: column; align-items: center; }
/* Hero specimens are tight-cropped (natural width) and sized by HEIGHT, so they fill the space
   and read wider — no wasted side whitespace, which matters most on mobile. */
.tx-hero-media img { height: clamp(240px, 31vw, 316px); width: auto; max-width: 100%; object-fit: contain; display: block; filter: saturate(.66) contrast(.88) brightness(1.08); }
/* the all-treatments emblem is ~square, so size it by WIDTH (fills the column) to match the tall specimens' visual weight */
.tx-hero-media img[src$="/all-treatments.webp"],
.tx-hero-media img[src$="/imaging.webp"] { width: 100%; max-width: 380px; height: auto; }
.tx-hero-cap { font-family: var(--font-head); font-style: italic; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); text-align: center; max-width: 32ch; margin: .7rem auto 0; }
@media (max-width: 980px) { .tx-hero-media img { height: 262px; } }
@media (max-width: 760px) { .tx-hero { grid-template-columns: 1fr; } .tx-hero-media { margin-top: 1.4rem; } .tx-hero-media img { height: 250px; } }
@media (max-width: 420px) { .tx-hero-media img { height: 220px; } }
.hero-name { max-width: 92%; box-sizing: border-box;
  position: absolute; left: 0; bottom: 20px; display: flex; align-items: center; gap: .55rem;
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .45rem .75rem .45rem .5rem; box-shadow: var(--hover-shadow);
}
.hero-name > img { width: 34px; height: 34px; flex: 0 0 auto; }
.hero-name span { display: flex; flex-direction: column; line-height: 1.2; font-size: .72rem; color: var(--ink-soft); }
.hero-name b { font-family: var(--font-head); font-weight: 500; font-size: .92rem; color: var(--ink); }
.portrait {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius);
  border: 1px solid var(--hairline); overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 0%, rgba(184,150,90,.14), transparent 55%),
    var(--soft-beige);
  display: flex; align-items: flex-end;
}
.portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: saturate(.82) contrast(.94) brightness(1.05); }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253,252,250,.12), rgba(243,237,227,.18)); pointer-events: none; }
.portrait .ph-label { padding: 1rem 1.2rem; font-size: .82rem; color: var(--ink-soft); background: rgba(253,252,250,.82); width: 100%; border-top: 1px solid var(--hairline); }
.portrait .ph-icon { position: absolute; inset: 0; display: grid; place-items: center; opacity: .28; }
.portrait .ph-icon img { width: 42%; }
.hero-badge-float {
  position: absolute; left: -14px; bottom: 96px; background: var(--warm-white);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: .7rem .9rem;
  display: flex; align-items: center; gap: .6rem; box-shadow: var(--hover-shadow); max-width: 220px;
}
.hero-badge-float img { width: 40px; height: 40px; }
.hero-badge-float b { font-family: var(--font-head); font-weight: 500; font-size: .95rem; }
.hero-badge-float small { color: var(--ink-soft); font-size: .74rem; }

/* Trust badges row */
.trust-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.trust-item { background: var(--warm-white); padding: 1.1rem 1rem; display: flex; align-items: center; gap: .7rem; }
.trust-item .ic { flex: 0 0 auto; color: var(--sage); }
.trust-item span { font-size: .9rem; font-weight: 500; line-height: 1.3; }
.trust-item .nowrap { white-space: nowrap; }   /* a time range such as "9:00am – 4:00pm" never splits across lines */

/* ---------- Section heading block ---------- */
.sec-head { max-width: 60ch; }
.center .sec-head { margin-inline: auto; }

/* ---------- Our Message ---------- */
.message-quote { font-family: var(--font-head); font-size: clamp(1.12rem, 2vw, 1.45rem); line-height: 1.45; color: var(--ink); }

/* ---------- New Patient Offer ---------- */
.offer { position: relative; }
.offer-card {
  display: grid; grid-template-columns: minmax(230px, 0.72fr) 1.45fr; gap: clamp(1.3rem, 3vw, 2.6rem);
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden;
}
/* Green reduced to a thin accent strip + green numerals, per design guide */
.offer-price { background: var(--soft-beige); color: var(--ink); border-left: 4px solid var(--forest); padding: clamp(1.8rem, 3.5vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; }
.offer-price .amount { font-family: var(--font-head); font-size: clamp(3rem, 6.5vw, 4.2rem); line-height: 1; color: var(--forest); }
.offer-price .amount sup { font-size: .42em; top: -1.1em; margin-right: .05em; }
.offer-price .amount .cur { font-size: .5em; vertical-align: super; margin-right: .05em; }
.offer-price p { color: var(--ink-soft); margin-bottom: 0; }
.offer-was { font-family: var(--font-body); font-size: .95rem; color: var(--ink-soft); margin: 0 0 .8rem !important; }
.offer-was s { color: var(--brushed-gold); text-decoration-thickness: 1.5px; }
.offer-price .kicker { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--deep-gold); font-weight: 600; margin-bottom: .7rem; }

/* CDBS companion block */
.cdbs-strip { display: flex; align-items: center; gap: 1.4rem; margin-top: 16px; padding: 1.7rem 1.9rem; background: #EDF1EA; border: 1px solid #D6DFD0; border-left: 5px solid var(--sage); border-radius: var(--radius); }
.cdbs-ic { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); color: #fff; }
.cdbs-ic svg { width: 32px; height: 32px; }
.cdbs-text { flex: 1; }
.cdbs-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--sage); padding: .28rem .6rem; border-radius: var(--radius); margin-bottom: .55rem; }
.cdbs-text h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.cdbs-text p { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .4rem; }
.cdbs-text .disclaimer { margin: 0; }
.cdbs-strip .btn { flex: 0 0 auto; }
@media (max-width: 760px){ .cdbs-strip { flex-direction: column; align-items: flex-start; } .cdbs-strip .btn { width: 100%; } }
.offer-body { padding: clamp(1.6rem, 3vw, 2.6rem); }
.offer-list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.4rem; margin: 1.2rem 0 1.6rem; }
.offer-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
.offer-list .ic { color: var(--sage); flex: 0 0 auto; margin-top: .15rem; }
.offer-tag {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--soft-beige);
  border: 1px solid var(--brushed-gold); color: var(--deep-gold); font-weight: 700;
  font-size: .82rem; letter-spacing: .04em; padding: .4rem .8rem; border-radius: var(--radius); margin-bottom: .9rem;
}
.offer-extra { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 1.4rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.offer-extra svg { color: var(--brushed-gold); flex: 0 0 auto; margin-top: .15rem; }
.offer-extra em { font-family: var(--font-head); font-style: italic; font-size: 1rem; color: var(--deep-gold); line-height: 1.4; }

.disclaimer { font-size: .74rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* ---------- Price teaser ---------- */
.teaser { background: var(--monument); color: var(--premium-beige); }
.teaser .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.teaser h2 { color: #fff; margin: 0; }
.teaser p { color: rgba(255,255,255,.8); margin: .4rem 0 0; max-width: 52ch; }
.teaser .btn--secondary { border-color: rgba(255,255,255,.55); color: #fff; }
.teaser .btn--secondary:hover { background: #fff; color: var(--monument); }
.teaser p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.teaser p a:hover { text-decoration: none; }
/* Slim variant — a compact strip rather than a full band (used for the
   homepage emergency banner). Two actions sit together on the right. */
.teaser--slim { padding-block: 1rem; }
.teaser--slim h2 { font-size: 1.18rem; line-height: 1.3; }
.teaser--slim p { font-size: .88rem; margin-top: .25rem; }
/* the asterisk qualifier — deliberately small so the band stays a slim strip */
.teaser-fine { font-size: .72rem; opacity: .75; margin-top: .25rem; }
.teaser-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }

/* ---------- Health funds ---------- */
.funds-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.6rem; }
.fund-chip { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); padding: .7rem 1.2rem; font-weight: 600; font-size: .9rem; color: var(--ink-soft); min-width: 120px; text-align: center; }
.hicaps-note { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem; font-size: .92rem; color: var(--ink-soft); }
.hicaps-note .ic { color: var(--sage); }

/* ---------- Articles preview ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.7rem; }
.article-card { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease, background .2s ease, border-color .2s ease; cursor: pointer; }
.article-card:hover { box-shadow: var(--hover-shadow); transform: translateY(-2px); background: var(--premium-beige); border-color: var(--brushed-gold); }
.article-body { padding-top: 1.5rem; }
.article-thumb { aspect-ratio: 16/10; background: radial-gradient(120% 100% at 30% 0%, rgba(106,127,98,.16), transparent 60%), var(--soft-beige); display: grid; place-items: center; }
.article-thumb img { width: 60px; opacity: .3; }
.article-body { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.article-tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-bottom: .6rem; }
.article-body h3 { font-size: 1.15rem; }
.article-body p { font-size: .92rem; color: var(--ink-soft); flex: 1; }
/* Long-form article body (news pages) */
.article-meta { font-size: .82rem; color: var(--ink-soft); margin: .3rem 0 1rem; }
.article-prose h2 { font-size: 1.4rem; margin: 2rem 0 .6rem; }
.article-prose h2:first-child { margin-top: 0; }
.article-prose h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.article-prose p { margin: 0 0 1rem; line-height: 1.75; color: var(--ink-soft); }
.article-prose ul { margin: 0 0 1.1rem 1.2rem; }
.article-prose li { margin: .4rem 0; line-height: 1.7; color: var(--ink-soft); }
.article-prose a { color: var(--deep-gold); text-decoration: underline; text-underline-offset: 2px; }
.article-prose a:hover { text-decoration: none; }
.article-prose strong { color: var(--ink); }

/* ---------- Why us ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.7rem; }
.why-item { display: flex; gap: .9rem; padding: 1.4rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); color: inherit; transition: box-shadow .2s ease, transform .2s ease, background .2s ease, border-color .2s ease; }
.why-item:hover { box-shadow: var(--hover-shadow); transform: translateY(-2px); background: var(--premium-beige); border-color: var(--brushed-gold); }
.why-item .tc-link { margin-top: .6rem; }
.why-item .ic { flex: 0 0 auto; color: var(--sage); }
.why-item h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.why-item p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ---------- Clinic gallery ---------- */
.clinic-banner { position: relative; margin: 2.4rem 0 12px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 21 / 9; }
.clinic-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clinic-banner figcaption { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.3rem; font-family: var(--font-body); font-size: .86rem; font-weight: 500; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 3 / 4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gallery figure:hover img { transform: scale(1.045); }
.gallery .g-feature { grid-column: span 2; aspect-ratio: 3 / 2; }   /* reception (landscape) sits level with a portrait tile */
.gallery figcaption { position: absolute; inset: auto 0 0 0; padding: .85rem 1rem; font-family: var(--font-body); font-size: .82rem; font-weight: 500; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); }

/* ---------- Charter (The Allura Promise) ---------- */
.charter { max-width: 780px; margin: 1.7rem auto 0; background: var(--warm-white); border: 1px solid var(--hairline); border-left: 5px solid var(--brushed-gold); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.charter-list { display: flex; flex-direction: column; gap: .8rem; margin: 0; }
.charter-list li { display: flex; gap: .8rem; align-items: flex-start; font-family: var(--font-head); font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.4; color: var(--ink); }
.charter-list .ic { color: var(--brushed-gold); flex: 0 0 auto; margin-top: .2rem; }
.charter-test { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); font-size: .92rem; color: var(--ink-soft); }
.charter-test b { color: var(--ink); font-family: var(--font-body); }

/* ---------- Behaviours ---------- */
.behaviour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.7rem; }
.behaviour-col { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); padding: 1.4rem; }
.behaviour-col h3 { font-size: 1.08rem; margin-bottom: .2rem; }
.behaviour-col .b-sub { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-gold); font-weight: 600; margin-bottom: .8rem; }
/* A closing note under a behaviour column's list — smaller and quieter than the list itself. */
.b-note { margin: .7rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.behaviour-col ul { display: flex; flex-direction: column; gap: .6rem; }
/* display:flex makes every TEXT NODE an anonymous flex item, so an <li> written as
   "text <strong>and</strong> more text" splits into three columns. The icon lists rely
   on flex, so the rule stays — but any li with inline markup mid-sentence must wrap its
   content in a single <span>. This min-width:0 stops a long item from refusing to wrap. */
.behaviour-col li { display: flex; gap: .55rem; align-items: flex-start; font-size: .89rem; color: var(--ink-soft); line-height: 1.5; }
.behaviour-col li > span { min-width: 0; }
.behaviour-col .ic { color: var(--sage); flex: 0 0 auto; margin-top: .2rem; }
@media (max-width: 860px){ .behaviour-grid { grid-template-columns: 1fr; } }

/* ---------- Treatments preview ---------- */
.treatments-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.7rem; }
.treatment-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); padding: 1.3rem; transition: box-shadow .2s ease, transform .2s ease, background .2s ease, border-color .2s ease; }
/* card-hue watermark: faint duotone specimen bleeding from the bottom-right, per card via --tcw */
.treatment-card::before { content: ""; position: absolute; right: -1.1rem; bottom: -1.3rem; width: 8.6rem; height: 8.6rem; background: var(--tcw, none) no-repeat right bottom / contain; opacity: .11; pointer-events: none; z-index: 0; }
.treatment-card > * { position: relative; z-index: 1; }
.treatment-card:hover { box-shadow: var(--hover-shadow); transform: translateY(-2px); background: var(--premium-beige); border-color: var(--brushed-gold); }
.treatment-card h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.treatment-card p { font-size: .88rem; color: var(--ink-soft); flex: 1; margin: 0 0 .8rem; }
.tc-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--deep-gold); }
.tc-link .ic { color: var(--deep-gold); }
/* Botanical specimen icon on treatment cards */
.tc-ic { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 0 .8rem; filter: saturate(.82) contrast(.93) brightness(1.05); }
@media (max-width: 560px) { .tc-ic { width: 48px; height: 48px; } }

/* ---- Treatments hub PILOT: horizontal cards — big specimen left, text right, uniform tiles ---- */
/* Both column rules are written .treatments-grid.tx-hub, two classes, so they beat the
   generic single-class .treatments-grid breakpoints further down whatever the source order.
   Written as .tx-hub alone they lost 481-620px to the max-width:900px rule and the cards
   rendered two-up with a 127px text column. tx-hub is only ever used on .treatments-grid. */
.treatments-grid.tx-hub { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.tx-hub .treatment-card { flex-direction: row; align-items: stretch; padding: 0; overflow: hidden; min-height: 128px; }
/* one large watermark of the whole tile, right-aligned and faint (not a mirror of the left specimen) */
.tx-hub .treatment-card::before { display: block; content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -1.4rem; top: 50%; transform: translateY(-50%); width: 60%; height: 130%;
  background: var(--tcw, none) no-repeat right center / contain; opacity: .06; }
.tx-hub .tc-fig { flex: 0 0 40%; max-width: 158px; position: relative; display: flex; align-items: center; justify-content: center;
  padding: .35rem .3rem; background: transparent; }            /* centred, minimal padding so the portrait specimen fills the box */
/* specimen is softened + multiplied so it melts into the tile rather than reading as a photo */
.tx-hub .tc-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;
  mix-blend-mode: multiply; opacity: .9; filter: saturate(.5) contrast(.82) brightness(1.14); }
.tx-hub .tc-body { flex: 1 1 auto; min-width: 0; padding: .8rem 1.05rem .8rem .4rem; display: flex; flex-direction: column; justify-content: center; }
.tx-hub .tc-body h3 { font-size: 1rem; line-height: 1.2; margin: 0 0 .28rem; }
.tx-hub .tc-body p  { font-size: .84rem; line-height: 1.42; margin: 0; color: var(--ink-soft); }
@media (max-width: 620px) { .treatments-grid.tx-hub { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .tx-hub .tc-fig { flex-basis: 34%; } .tx-hub .tc-body { padding: .75rem .9rem .75rem .4rem; } }
@media (max-width: 900px){ .treatments-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .treatments-grid { grid-template-columns: 1fr; } }

/* ---------- Service areas ---------- */
.suburb-chips { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; justify-content: center; }
.suburb-chip { border: 1px solid var(--hairline); background: var(--warm-white); border-radius: var(--radius); padding: .6rem 1.1rem; font-weight: 500; font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem; }
.suburb-chip .ic { color: var(--sage); }
.suburb-chip.is-clinic { border-color: var(--brushed-gold); color: var(--deep-gold); background: var(--soft-beige); font-weight: 700; }

/* ---------- Booking anchor ---------- */
.book-card { max-width: 760px; margin: 0 auto; background: var(--monument); color: var(--premium-beige); border-radius: var(--radius); padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem); }
.book-card h2 { color: #fff; }
.book-card .lead { color: rgba(255,255,255,.85); }
.book-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.book-card .btn--secondary { border-color: rgba(255,255,255,.55); color: #fff; }
.book-card .btn--secondary:hover { background: #fff; color: var(--monument); }
.book-note { font-size: .82rem; color: rgba(255,255,255,.7); margin-top: 1.1rem; }
/* /book/ back-to-home outline button + booking embed wrapper. */
.book-back { margin: 0 0 1.2rem; }
.book-back .btn { font-size: .85rem; padding: .5rem .95rem; }
.book-embed { max-width: 1080px; margin: 1.3rem auto 0; }
.book-embed-hint { font-size: .82rem; color: var(--ink-soft); text-align: center; margin: .7rem 0 0; }
/* Compact trust chips — a tight centred row; stays on one line where it fits and
   wraps only when it must, so it's as compact as practical at every width. */
.trust-row--slim { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: none; background: none; border-radius: 0; overflow: visible; width: auto; margin: 1rem auto 0; gap: .35rem 1.5rem; }
.trust-row--slim .trust-item { background: none; padding: .1rem 0; gap: .4rem; white-space: nowrap; }
.trust-row--slim .trust-item .ic { color: var(--forest); }
.trust-row--slim .trust-item span { font-size: .8rem; font-weight: 600; }
/* Thin emergency line — call + address readily available, doubles as the gold frame header. */
.book-emergency { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.2rem; padding: .6rem 1rem; border: 2px solid var(--brushed-gold); border-bottom: 1px solid var(--brushed-gold); border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(180deg, var(--premium-beige), var(--warm-white)); font-size: .85rem; }
.book-emergency .be-msg { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); }
.book-emergency .be-msg .ic { color: var(--deep-gold); flex: none; }
.book-emergency .be-contact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; }
.book-emergency .be-call { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--forest); text-decoration: none; }
.book-emergency .be-call:hover { text-decoration: underline; }
.book-emergency .be-addr { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-soft); }
.book-emergency .be-addr .ic, .book-emergency .be-call .ic { flex: none; color: var(--sage); }
/* Golden frame around the booking iframe. */
.book-frame { border: 2px solid var(--brushed-gold); border-top: none; border-radius: 0 0 var(--radius) var(--radius); background: #fff; padding: .4rem; }
.book-frame iframe { display: block; border-radius: 4px; }
/* Compact 4-tile explore row. */
.book-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 1.3rem; }
.book-tile { display: block; padding: 1rem 1.1rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.book-tile:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); border-color: var(--brushed-gold); }
.book-tile h3 { margin: 0 0 .2rem; font-size: 1rem; line-height: 1.25; }
.book-tile p { margin: 0 0 .5rem; font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 720px) { .book-tiles { grid-template-columns: repeat(2, 1fr); } }
/* /book/ reference bar — address + phone shown above the booking iframe. */
.book-ref { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.8rem; margin-bottom: 1rem; font-size: .95rem; color: var(--ink); }
.book-ref > span { display: inline-flex; align-items: center; gap: .45rem; }
.book-ref svg { width: 18px; height: 18px; color: var(--forest); flex: none; }
.book-ref a { color: inherit; text-decoration: none; }
.book-ref a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--footer-grey); border-top: 1px solid var(--hairline); }
/* oak ledge running edge-to-edge above the footer (same muted filter) */
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 26px;
  background: url(/assets/img/oak-ledge.webp) no-repeat center / 100% 100%;
  filter: saturate(.8) contrast(.92) brightness(1.03); pointer-events: none; z-index: 1; }
.site-footer .footer-legal, .site-footer .footer-contact-line { border-color: #D6D8D2; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(3rem, 5vw, 4rem); }
.footer-col h4 { font-family: var(--font-body); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; }
.footer-col ul li { margin-bottom: .55rem; font-size: .9rem; color: var(--ink-soft); }
.footer-col a:hover { color: var(--deep-gold); }
.footer-brand img.f-logo { height: 46px; width: auto; margin-bottom: 1rem; }
.footer-brand p { font-size: .88rem; color: var(--ink-soft); max-width: 30ch; }
.footer-contact-line { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; margin-bottom: .55rem; color: var(--ink-soft); }
.footer-contact-line .ic { color: var(--sage); flex: 0 0 auto; margin-top: .15rem; }
.social-links { display: flex; flex-direction: column; gap: .55rem; }
.social-links a { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink); }
.social-links a:hover { color: var(--deep-gold); }
.social-links .ic { color: var(--sage); }

.footer-legal { border-top: 1px solid var(--hairline); padding-block: 1.6rem 2rem; display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.footer-legal img.seal { width: 58px; height: 58px; flex: 0 0 auto; }
.footer-legal .legal-text { font-size: .76rem; color: var(--ink-soft); line-height: 1.6; max-width: 90ch; }
.footer-legal .legal-text strong { color: var(--ink); font-weight: 600; }
/* The Wyndham City directory listing, carried on the phrase it evidences rather
   than announced in its own sentence. Council verification required an ABN and
   matching business details, so it is a real local citation — but it is a
   footnote, not a badge, so it stays the colour of the text around it. */
.footer-legal .verified-link { color: inherit; text-decoration: underline;
  text-decoration-color: var(--hairline); text-underline-offset: 2px; }
.footer-legal .verified-link:hover,
.footer-legal .verified-link:focus-visible { text-decoration-color: var(--deep-gold); }
.footer-bottom { text-align: center; padding-bottom: 1.6rem; font-size: .78rem; color: var(--ink-soft); }
.footer-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; margin-bottom: .7rem; }
.footer-legal-links a { color: var(--ink); font-size: .8rem; font-weight: 500; }
.footer-legal-links a:hover { color: var(--deep-gold); }
.footer-bottom p { margin: 0; max-width: 82ch; margin-inline: auto; line-height: 1.6; }

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: block;
  background: var(--warm-white);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--hairline);
}
.sticky-cta-inner { display: grid; grid-template-columns: 1fr 1fr; }
.sticky-cta a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1rem; font-weight: 700; font-size: .93rem; }
.sticky-cta .cta-book { background: var(--brushed-gold); color: var(--warm-white); }
.sticky-cta .cta-call { background: var(--warm-white); color: var(--ink); border-left: 1px solid var(--hairline); }
/* tablet/foldable: centre the strip content rather than full-bleed */
@media (min-width: 861px){ .sticky-cta-inner { max-width: 480px; margin-inline: auto; } }
/* large desktop keeps CTAs in the header (they appear above 1140px), so the bottom strip is hidden there */
@media (min-width: 1141px){ .sticky-cta { display: none; } }
/* clear the fixed strip only where it shows (<=1140px) */
@media (max-width: 1140px){ body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); } }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 91;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--forest); color: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18); transition: transform .18s ease, translate .22s ease;
  translate: 0 calc(-1 * var(--cc-lift, 0px));   /* lifted above the cookie notice while it is open (consent.js) */
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 27px; height: 27px; }

/* ---------- Legal pages ---------- */
.legal-header { position: sticky; top: 0; z-index: 100; background: var(--warm-white); border-bottom: 1px solid var(--hairline); }
.legal-header .header-inner { justify-content: space-between; }
.legal-wrap { max-width: 800px; margin-inline: auto; }
.legal-wrap h1 { margin-bottom: .25rem; }
.legal-wrap .updated { color: var(--ink-soft); font-size: .85rem; margin-bottom: 2rem; }
.legal-wrap h2 { font-size: 1.3rem; margin-top: 2.2rem; }
.legal-wrap h3 { font-size: 1.08rem; margin-top: 1.4rem; }
.legal-wrap p, .legal-wrap li { font-size: .95rem; color: var(--ink-soft); line-height: 1.75; }
.legal-wrap ul { padding-left: 1.2rem; list-style: disc; margin: 0 0 1rem; }
.legal-wrap a { color: var(--deep-gold); text-decoration: underline; }
.legal-note { background: var(--soft-beige); border: 1px solid var(--hairline); border-left: 4px solid var(--brushed-gold); border-radius: var(--radius); padding: 1rem 1.2rem; font-size: .88rem; color: var(--ink-soft); margin-bottom: 2rem; }

/* skip link */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 200; border-radius: 0 0 var(--radius) 0; }
.skip-link:focus { left: 0; }

/* ---------- Reviews ---------- */
.rating-summary { display: inline-flex; align-items: center; gap: .6rem; margin: .2rem 0 1.8rem; flex-wrap: wrap; justify-content: center; }
.stars { color: var(--brushed-gold); letter-spacing: .12em; font-size: 1.05rem; }
.rating-line { font-size: .95rem; color: var(--ink-soft); }
.rating-line a { color: var(--deep-gold); font-weight: 600; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; text-align: left; }
.review-card { margin: 0; background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.review-card .stars { font-size: .95rem; }
.review-card p { font-family: var(--font-head); font-size: 1.02rem; line-height: 1.45; color: var(--ink); margin: 0; }
.review-card cite { font-style: normal; font-size: .85rem; color: var(--ink-soft); font-weight: 600; }

/* One row. auto-fit means the count follows the number of reviews — add a 4th
   and it still sits on one line, no CSS change needed. */
.review-snippets { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; max-width: 1200px; margin: 1.6rem auto 0; }
.snippet { display: flex; flex-direction: column; }
.snippet b { margin-top: auto; padding-top: .55rem; }
/* 4th tile is the Google CTA, not a testimonial — we only hold three compliant
   non-clinical excerpts, and inventing a fourth is not an option. It also gives
   the row a natural destination instead of a dangling quote. */
.snippet--cta { background: var(--premium-beige); border-color: var(--brushed-gold); font-family: var(--font-body); font-style: normal; align-items: flex-start; justify-content: center; gap: .5rem; }
.snippet--cta .sn-lead { font-size: .9rem; color: var(--ink); line-height: 1.45; }

@media (max-width: 720px) { .review-snippets { grid-template-columns: 1fr; } }
.snippet { flex: 1 1 250px; background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.1rem 1.2rem; font-family: var(--font-head); font-style: italic; font-size: .98rem; line-height: 1.4; color: var(--ink); text-align: left; }
.snippet b { display: block; margin-top: .55rem; font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: .78rem; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 1.8rem auto 0; }
.faq-item { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); margin-bottom: .7rem; }
/* NOT flex. A tokenised <span data-fig> inside the question became its own flex
   item, so justify-content:space-between tore the sentence into pieces and
   pushed them apart. Inline flow + an absolutely positioned marker keeps the
   question as one sentence however many tokens it contains. */
.faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 1rem 3rem 1rem 1.3rem; font-family: var(--font-head); font-size: 1.05rem; line-height: 1.45; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 400; font-size: 1.5rem; color: var(--brushed-gold); line-height: 1; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item[open] summary { color: var(--forest); }
.faq-a { padding: 0 1.3rem 1.1rem; }
.faq-a p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* ---------- Visit & Contact (compact) ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
.contact-info { display: flex; flex-direction: column; }
.visit-map { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--warm-white); }
.visit-map iframe { width: 100%; height: 260px; border: 0; display: block; }
.contact-facts { margin-top: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.contact-facts li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.contact-facts .ic { color: var(--sage); flex: 0 0 auto; margin-top: .15rem; }
/* The Tier-3 practice icons in this row are multi-colour artwork, not a sprite
   tinted by `color`, so they are <img> and sized explicitly. 32px is the family's
   floor: below it the 2px line thins to 1px and the accent disc muddies. */
.contact-facts .ic-svc { width: 32px; height: 32px; flex: 0 0 auto; margin-top: -.15rem; }
.contact-facts b { color: var(--ink); font-family: var(--font-body); font-weight: 600; }
.contact-facts a { color: var(--deep-gold); font-weight: 600; }

/* Allura-branded contact form (submits to Power Automate) */
.contact-form-panel { background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.3rem, 2.5vw, 1.8rem); box-shadow: var(--hover-shadow); }
.contact-form-panel h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.form-sub { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.allura-form .field { margin-bottom: .8rem; display: flex; flex-direction: column; }
.allura-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.allura-form label { font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.allura-form .req { color: var(--deep-gold); }
.allura-form input, .allura-form select, .allura-form textarea {
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .6rem .7rem; width: 100%; transition: border-color .15s ease, box-shadow .15s ease;
}
.allura-form input:focus, .allura-form select:focus, .allura-form textarea:focus {
  outline: none; border-color: var(--brushed-gold); box-shadow: 0 0 0 3px rgba(184,150,90,.15);
}
.allura-form textarea { resize: vertical; min-height: 92px; }
.allura-form .btn { margin-top: .4rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { font-size: .9rem; margin: .8rem 0 0; min-height: 1.2em; color: var(--forest); font-weight: 600; }
.contact-form-panel .disclaimer { margin-top: .8rem; }
.contact-form-panel .disclaimer a { color: var(--deep-gold); }

@media (max-width: 820px){
  .contact-grid { grid-template-columns: 1fr; }
}
.directions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
.dir-item { display: flex; gap: .8rem; align-items: flex-start; padding: 1.1rem 1.2rem; background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius); }
.dir-item .ic { color: var(--sage); flex: 0 0 auto; }
.dir-item b { font-family: var(--font-head); font-weight: 500; font-size: 1rem; display: block; margin-bottom: .15rem; }
.dir-item p { font-size: .88rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 860px){
  .directions { grid-template-columns: 1fr; }
  .visit-map iframe { height: 320px; }
}

/* ---------- Responsive ---------- */
/* Between full-nav and mobile: collapse the phone button to its icon to keep room for Book Online */
@media (min-width: 1141px) and (max-width: 1219px){
  .phone-btn .full { display: none; }
  .phone-btn { padding-inline: .7rem; }
}

@media (max-width: 1040px){
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px){
  .nav { display: none; }   /* collapses to the cascaded menu; CTAs live in the persistent bottom strip. Raised 860->960 so the enlarged logo never crops the nav text */
  .nav-toggle { display: inline-flex; }
  /* Keep the HORIZONTAL logo at every width — the client wants one consistent
     mark. Once the nav collapses to the hamburger the header has the room:
     measured at 375px the horizontal logo needs 209px and 289px is free before
     the toggle. The stacked (tertiary) logo is no longer used in the header. */
  .brand .logo-horizontal { display: block; }
  .brand .logo-tertiary { display: none; }

  /* Mobile nav drawer */
  .nav.is-open {
    display: flex; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--warm-white); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    padding: .5rem 0;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav.is-open a { width: 100%; padding: .9rem clamp(1.1rem, 4vw, 2.5rem); }
  .nav.is-open a::after { display: none; }
  /* Book CTA in the cascaded menu — gold underline element carried from the design guide */
  .nav.is-open .nav-book {
    display: inline-flex; align-items: center; gap: .45rem; width: auto;
    margin: .7rem clamp(1.1rem, 4vw, 2.5rem) .5rem;
    padding: .5rem .1rem !important;
    color: var(--deep-gold); font-weight: 700;
    border-bottom: 2px solid var(--brushed-gold);
  }
  /* Treatments — mobile: a COLLAPSIBLE submenu behind a + toggle, so it doesn't
     fill the whole drawer. The Treatments link still opens the hub; the + expands
     the submenu. Links stay in the DOM either way (crawler/LLM-safe). */
  .nav.is-open .nav-group { width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; }
  .nav.is-open .nav-group > a { flex: 1 1 auto; width: auto; }
  .nav.is-open .nav-sub-toggle { display: flex; align-items: center; justify-content: center;
    width: 54px; align-self: stretch; background: none; border: none; border-left: 1px solid var(--hairline);
    font: 400 1.5rem/1 var(--font-body); color: var(--ink-soft); cursor: pointer; }
  .nav.is-open .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: none; background: transparent; min-width: 0; width: 100%;
    max-height: 0; overflow: hidden; padding: 0; transition: max-height .28s ease; }
  .nav.is-open .nav-group.is-expanded .nav-sub { max-height: 34rem; padding: 0 0 .4rem; }
  .nav.is-open .nav-sub a { padding: .5rem clamp(1.1rem,4vw,2.5rem) .5rem calc(clamp(1.1rem,4vw,2.5rem) + 1rem);
    font-size: .9rem; color: var(--ink-soft); }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 440px; margin-inline: auto; }   /* image sits AFTER the headline copy on mobile */
  .trust-row { grid-template-columns: 1fr 1fr; }   /* 4 tiles → balanced 2 × 2 */
  .offer-card { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sticky-cta { display: block; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .g-feature { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}
/* Mid-size (small tablets/foldables): keep hero text + image side by side — only stack on true phones */
@media (min-width: 701px) and (max-width: 860px){
  .hero-grid { grid-template-columns: 1.05fr .72fr; }
  .hero-media { max-width: none; margin-inline: 0; }
}

/* Mobile type scale — legible but not oversized (avoid endless scrolling) */
@media (max-width: 640px){
  :root { --section-y: 2.75rem; }
  body { font-size: 15.5px; line-height: 1.55; }
  h1 { font-size: clamp(1.7rem, 7.4vw, 1.95rem); }
  h2 { font-size: clamp(1.35rem, 5.4vw, 1.55rem); }
  h3 { font-size: 1.1rem; }
  .hero-sub { font-size: .98rem; }
  .lead { font-size: .95rem; }
  .tx-hero-copy .hero-cross { font-size: .9rem; line-height: 1.7; }   /* the lead drops too, so keep one visible step */
  .message-quote { font-size: 1.06rem; }
  .hero-values { font-size: .9rem; }
  .offer-price .amount { font-size: 3.1rem; }
  .eyebrow { font-size: .7rem; }
  .clinic-banner { aspect-ratio: 16 / 11; }
}

@media (max-width: 520px){
  .offer-list { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1; }
}

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

/* ---------- Footer careers line ---------- */
.footer-careers { max-width: 70ch; margin: 0 auto 1rem; font-size: .8rem; color: var(--ink-soft); line-height: 1.6; }
.footer-careers b { color: var(--ink); }
.footer-careers a { color: var(--deep-gold); font-weight: 600; }

/* ---------- HICAPS logo + footer socials as icons ---------- */
.hicaps-logo { margin: 0 0 1rem; }
.hicaps-logo img { height: 26px; width: auto; margin-inline: auto; opacity: .9; }
.social-links { flex-direction: row !important; gap: .7rem !important; }
.social-links a { width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); display: inline-flex; align-items: center; justify-content: center; color: var(--sage); transition: border-color .2s ease, color .2s ease; }
.social-links a:hover { border-color: var(--brushed-gold); color: var(--deep-gold); }

/* ---- FAQ page: category jump nav + per-section lists ---- */
.faq-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.faq-nav a { font-size: .84rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-soft); background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: .48rem .85rem; text-decoration: none; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.faq-nav a:hover, .faq-nav a:focus-visible { border-color: var(--brushed-gold); color: var(--deep-gold); background: var(--premium-beige); }
.faq-list + .faq-list, .faq-list { margin-top: 0; }
main .faq-list { margin-inline: auto; }
main section[id] > .container > .eyebrow { margin-bottom: .2rem; }
@media (max-width: 640px) {
  .faq-nav { gap: .4rem; }
  .faq-nav a { font-size: .78rem; padding: .42rem .7rem; }
}

/* ---- Team grid — repeatable member cards (dentists, specialists, clinical support, front of house) ----
   One .team-card = one person. Duplicate the card to add a member.
   Photo optional: omit <img> and use .team-monogram so members can be added before photos exist. */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.7rem; }
.team-card { display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); transition: box-shadow .2s ease, transform .2s ease, background .2s ease, border-color .2s ease; }
.team-card:hover { box-shadow: var(--hover-shadow); transform: translateY(-2px); background: var(--premium-beige); border-color: var(--brushed-gold); }
.team-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: .9rem; background: var(--soft-beige); }
.team-monogram { width: 84px; height: 84px; border-radius: 50%; margin-bottom: .9rem; display: inline-flex; align-items: center; justify-content: center; background: var(--soft-beige); color: var(--forest); font-family: var(--font-head); font-size: 1.5rem; letter-spacing: .02em; }
.team-name { font-size: 1.1rem; margin-bottom: .15rem; }
.team-role { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--deep-gold); margin-bottom: .55rem; }
.team-bio { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .9rem; }
.team-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.team-tag { font-size: .74rem; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: var(--radius); padding: .22rem .5rem; background: var(--premium-beige); }
/* Placeholder card for a role being recruited / not yet profiled */
.team-card--open { border-style: dashed; background: transparent; }
.team-card--open:hover { transform: none; box-shadow: none; background: transparent; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } .team-photo, .team-monogram { width: 68px; height: 68px; } }

/* ---- Treatment detail pages: breadcrumb + numbered process steps ---- */
.crumbs { font-size: .82rem; color: var(--ink-soft); margin-bottom: .9rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--deep-gold); border-bottom-color: var(--brushed-gold); }
.crumbs span { color: var(--hairline-strong, #B9B4A9); margin: 0 .35rem; }
.crumbs [aria-current] { color: var(--ink); }
.step-num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--soft-beige); color: var(--forest); font-family: var(--font-head); font-size: .95rem; }
.tx-note { border-left: 2px solid var(--brushed-gold); padding: .1rem 0 .1rem 1rem; margin: 1.2rem 0 0; }
.tx-note p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* Left-aligned content sections (treatment pages): .measure must not centre itself.
   Sections that DO centre use .center, which still wins via the rule below. */
.section-left .measure { margin-inline: 0; }
.section-left .center .measure { margin-inline: auto; }

/* ---- Process stepper — numbered steps that read in sequence (treatment pages, hub) ----
   Desktop: one row, left→right, hairline connector between numbers.
   Mobile: single column, top→bottom, vertical connector. Never a 2x2 grid — order must be unambiguous. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 1.7rem; list-style: none; padding-left: 0; margin-bottom: 0; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step { position: relative; }
.step-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; position: relative; }
.step-head::after { content: ""; position: absolute; left: 2.55rem; right: -1.75rem; top: 50%; height: 1px; background: var(--hairline); }
.step:last-child .step-head::after { display: none; }
.step-label { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--deep-gold); }
.step h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.step p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) {
  .steps, .steps--3 { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 0 1.4rem 2.9rem; }
  .step:last-child { padding-bottom: 0; }
  /* .step-head must NOT be the positioning context on mobile — the number sits in
     the .step's left padding gutter, or it overlaps the step label. */
  .step-head { position: static; margin-bottom: .3rem; min-height: 30px; align-items: center; }
  .step-head .step-num { position: absolute; left: 0; top: 0; }
  .step-head::after { display: none; }
  .step::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: .5rem; width: 1px; background: var(--hairline); }
  .step:last-child::after { display: none; }
}

/* ---- Price table (generated from content/prices.json — see tools/build-price-table.py) ---- */
.price-group { margin-top: 2rem; }
.price-group > h3 { font-size: 1.15rem; margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--hairline); }
.price-row { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--hairline); }
.price-row:last-child { border-bottom: none; }
.price-item { flex: 1 1 auto; }
.price-item strong { display: block; font-family: var(--font-head); font-size: 1rem; font-weight: 500; color: var(--ink); }
.price-item span { display: block; font-size: .86rem; color: var(--ink-soft); margin-top: .15rem; }
.price-value { flex: 0 0 auto; text-align: right; font-family: var(--font-head); font-size: 1.15rem; color: var(--forest); white-space: nowrap; }
.price-value .from { display: block; font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.price-value.is-quote { font-family: var(--font-body); font-size: .86rem; font-weight: 600; color: var(--ink-soft); max-width: 150px; white-space: normal; }
.price-variants { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.price-variant { font-size: .76rem; color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: var(--radius); padding: .2rem .55rem; background: var(--premium-beige); }
.price-variant b { color: var(--forest); font-weight: 700; }
@media (max-width: 600px) {
  .price-row { flex-wrap: wrap; gap: .3rem; }
  .price-value { text-align: left; flex-basis: 100%; }
  .price-value.is-quote { max-width: none; }
}

/* ---- Offer card: "Perfect for" list + most-valued badge (see NEXT-BRIEF §2) ---- */
.offer-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-gold); border: 1px solid var(--brushed-gold); border-radius: var(--radius); padding: .28rem .6rem; margin-bottom: .7rem; }
.perfect-for { list-style: none; padding: 0; margin: 1.1rem 0 0; border-top: 1px solid var(--hairline); padding-top: .9rem; }
.perfect-for > .pf-label { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem; }
.perfect-for li { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; color: var(--ink); margin-bottom: .35rem; line-height: 1.4; }
.perfect-for li svg { flex: 0 0 auto; margin-top: .15rem; color: var(--sage); }
.pf-link { display: inline-block; margin-top: .7rem; font-size: .84rem; font-weight: 600; color: var(--deep-gold); text-decoration: none; border-bottom: 1px solid var(--brushed-gold); }
.pf-link:hover { color: var(--forest); border-bottom-color: var(--forest); }

/* ---- Offer card: make the $199 block unmistakably distinct at every size ---- */
.offer-card { border: 1px solid var(--brushed-gold); box-shadow: 0 6px 22px rgba(143,112,56,.10); overflow: hidden; }
.offer-price { background: linear-gradient(165deg, var(--soft-beige), var(--premium-beige)); }
@media (max-width: 860px) { .offer-price { border-bottom: 1px solid var(--hairline); } }

/* ---- Homepage: orthodontics feature + imaging strip ---- */
/* Transparent so the global watermark trail runs through it, like the plain
   sections around it (was an opaque gradient band that broke the trail). */
.ortho { background: transparent; }
.ortho-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.6rem; }
.ortho-card { padding: 1.5rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.ortho-card:hover { box-shadow: var(--hover-shadow); transform: translateY(-2px); border-color: var(--brushed-gold); }
.ortho-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.ortho-card .ortho-from { font-family: var(--font-head); font-size: 1.5rem; color: var(--forest); margin: .5rem 0 .3rem; }
.ortho-card .ortho-from small { font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); display: block; }
.ortho-card p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.imaging-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding: 1.1rem 1.4rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--warm-white); margin-top: 1.2rem; }
.imaging-strip .im-item { display: flex; align-items: baseline; gap: .45rem; font-size: .9rem; color: var(--ink); }
.imaging-strip .im-item b { font-family: var(--font-head); color: var(--forest); font-size: 1.02rem; }
@media (max-width: 760px) { .ortho-grid { grid-template-columns: 1fr; } .imaging-strip { flex-direction: column; align-items: flex-start; gap: .6rem; } }

/* ---- Treatment groups: specialities / everyday / restorative / urgent ---- */
.tx-group { margin-top: 2.2rem; }
.tx-group:first-of-type { margin-top: 1.6rem; }
.tx-group-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; padding-bottom: .55rem; border-bottom: 1px solid var(--hairline); margin-bottom: 1.1rem; }
.tx-group-head h3 { font-size: 1.2rem; margin: 0; }
.tx-group-head p { font-size: .86rem; color: var(--ink-soft); margin: 0; flex: 1 1 260px; }
.tx-group--feature .tx-group-head { border-bottom-color: var(--brushed-gold); }
.tx-group--feature .tx-group-head h3 { color: var(--forest); }
.tx-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.4rem; }
.tx-nav a { font-size: .84rem; font-weight: 600; color: var(--ink-soft); background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: .48rem .85rem; text-decoration: none; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.tx-nav a:hover, .tx-nav a:focus-visible { border-color: var(--brushed-gold); color: var(--deep-gold); background: var(--premium-beige); }
@media (max-width: 640px) { .tx-nav a { font-size: .78rem; padding: .42rem .7rem; } }
.price-group.tx-group--feature > h3 { color: var(--forest); border-bottom-color: var(--brushed-gold); }

/* ---- Service-provider attribution (footer) ---- */
.powered-by { font-size: .74rem; color: var(--ink-soft); opacity: .75; margin-top: .6rem; letter-spacing: .01em; }
.powered-by strong { font-weight: 600; color: var(--ink-soft); }

/* ---- Cookie notice (rendered by /assets/js/consent.js) ----
   Analytics is on by default (owner direction, 13 Sep 2026), so this is a notice, not a gate:
   one short line with Manage and OK. consent.js docks it on top of the sticky Book/Call bar
   (bottom = the bar's measured height, safe-area inset included), so it can never cover Book or
   Call, and lifts the WhatsApp float by the notice height (--cc-lift) while it is open. With no
   bar showing it sits at the bottom edge and pads for the inset itself. Consent Mode defaults
   and the GA4 loader are the head block written by web/tools/build-consent.py. */
.cc-note { position: fixed; left: 0; right: 0; bottom: 0; z-index: 92; background: var(--premium-beige); color: var(--ink-soft); border-top: 1px solid var(--hairline); box-shadow: 0 -2px 10px rgba(0,0,0,.05); padding: .3rem max(.75rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); opacity: 0; transition: opacity .2s ease; }
.cc-note[data-open="true"] { opacity: 1; }
.cc-note:not([data-open="true"]) { pointer-events: none; }   /* while faded out it must never catch taps above the Book/Call bar */
.cc-note.cc-on-bar { padding-bottom: .3rem; }   /* the bar underneath already clears the inset */
.cc-note[hidden], .cc-note [hidden] { display: none !important; }
.cc-row { max-width: 1100px; margin-inline: auto; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.cc-msg { flex: 1 1 280px; min-width: 0; margin: 0; font-size: .8rem; line-height: 1.35; }
/* narrow: the line reads across the full width and the three buttons sit under it, right-aligned */
@media (max-width: 639px) { .cc-row { justify-content: flex-end; padding-block: .15rem; } .cc-msg { flex-basis: 100%; } }
.cc-switch { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink); cursor: pointer; }
.cc-link, .cc-ok, .cc-btn { flex: none; min-height: 32px; font-family: var(--font-body); font-size: .8rem; cursor: pointer; }
.cc-link { padding: 0 .45rem; background: none; border: 0; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cc-link:hover { color: var(--deep-gold); }
.cc-btn { padding: 0 .7rem; background: none; color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius); font-weight: 600; }
.cc-btn:hover { border-color: var(--deep-gold); color: var(--deep-gold); }
.cc-ok { min-width: 48px; padding: 0 .9rem; background: var(--ink); color: var(--warm-white); border: 1px solid var(--ink); border-radius: var(--radius); font-weight: 700; }
.cc-ok:hover { background: var(--monument); border-color: var(--monument); }
.cc-note :focus-visible { outline: 2px solid var(--deep-gold); outline-offset: 2px; }   /* 4.39:1 on beige (brushed gold 2.64:1) */
/* Preferences panel: one category per block, Necessary always on, one switch for analytics. */
.cc-panel { max-width: 1100px; margin-inline: auto; max-height: min(58vh, 460px); overflow-y: auto; padding: .35rem .1rem .1rem; }
.cc-title { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.cc-intro { margin: 0 0 .5rem; font-size: .76rem; line-height: 1.5; }
.cc-cat { padding: .5rem 0; border-top: 1px solid var(--hairline); }
.cc-cat p { margin: .2rem 0 0; font-size: .78rem; line-height: 1.45; }
.cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cc-cat-head strong { font-size: .88rem; color: var(--ink); }
.cc-always { font-size: .76rem; font-weight: 600; color: var(--forest); }
.cc-use { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: var(--radius); padding: .05rem .3rem; }
.cc-cat-head input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--forest); cursor: pointer; }
.cc-actions { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem 0 .1rem; border-top: 1px solid var(--hairline); }
.cc-actions .cc-btn, .cc-actions .cc-ok { flex: 1 1 auto; }
.cc-detail { max-width: 1100px; margin: .35rem auto .2rem; font-size: .76rem; line-height: 1.45; }
.cc-detail a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 479px) { .cc-more { display: none; } }
/* keep the end of the page (the footer "Cookie settings" link included) reachable above the notice */
@media (max-width: 1140px) { body.cc-open { padding-bottom: calc(52px + env(safe-area-inset-bottom) + var(--cc-h, 44px)); } }
@media (min-width: 1141px) { body.cc-open { padding-bottom: var(--cc-h, 44px); } }
@media (prefers-reduced-motion: reduce) { .cc-note, .wa-float { transition: none; } }
/* Cookie settings button: the only cookie UI on arrival. Square, muted and bottom-LEFT, so it
   reads as a settings control and is never mistaken for the round green WhatsApp float on the
   right (owner, 16 Sep 2026). consent.js sets `bottom` when a sticky bar is showing. */
.cc-badge {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 91;
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  background: var(--warm-white); color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 1px 6px rgba(0,0,0,.10); cursor: pointer; opacity: .7;
  transition: opacity .18s ease, color .18s ease, border-color .18s ease;
}
.cc-badge:hover, .cc-badge:focus-visible { opacity: 1; color: var(--ink); border-color: var(--deep-gold); }
.cc-badge:focus-visible { outline: 2px solid var(--deep-gold); outline-offset: 2px; }
.cc-badge svg { width: 19px; height: 19px; }
.cc-badge[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cc-badge { transition: none; } }
.cc-manage { background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.cc-manage:hover { color: var(--deep-gold); }
.footer-legal-links .cc-manage { text-decoration: none; }   /* matches its sibling links in the footer row */
/* visually hidden but available to screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Offer family — three tiers of the same visual language --------------------
   T1  .offer-card      the $199 hero: gold border + gold shadow + gradient panel + badge
   T2  .ortho-card      priced treatments: gold-tinted border, softer shadow, badge, price block
   T3  .imaging-strip   differentiators: hairline + faint tint, price chips only
   Deliberately graded. If everything carried T1 nothing would read as the hero offer,
   and the client has been consistent that green and gold are used sparingly. */

/* --- T2: priced treatment cards --- */
.ortho-card { position: relative; border: 1px solid var(--brushed-gold); background: linear-gradient(170deg, var(--premium-beige) 0%, var(--warm-white) 55%); box-shadow: 0 3px 14px rgba(143,112,56,.07); padding: 1.6rem 1.5rem 1.5rem; }
.ortho-card:hover { box-shadow: 0 6px 20px rgba(143,112,56,.13); transform: translateY(-2px); border-color: var(--deep-gold); }
.ortho-badge { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-gold); border: 1px solid var(--brushed-gold); border-radius: var(--radius); padding: .24rem .55rem; margin-bottom: .7rem; }
.ortho-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.ortho-card .ortho-from { display: flex; align-items: baseline; gap: .4rem; font-family: var(--font-head); font-size: 2rem; color: var(--forest); margin: .1rem 0 .6rem; line-height: 1; }
.ortho-card .ortho-from small { font-family: var(--font-body); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ortho-list { list-style: none; padding: 0; margin: .9rem 0 1.1rem; border-top: 1px solid var(--hairline); padding-top: .8rem; }
.ortho-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; color: var(--ink-soft); margin-bottom: .32rem; line-height: 1.45; }
.ortho-list li svg { flex: 0 0 auto; margin-top: .12rem; color: var(--sage); }
.ortho-cta { display: inline-block; font-size: .84rem; font-weight: 600; color: var(--deep-gold); text-decoration: none; border-bottom: 1px solid var(--brushed-gold); }
.ortho-card:hover .ortho-cta { color: var(--forest); border-bottom-color: var(--forest); }

/* --- T3: imaging strip, same family but deliberately lighter --- */
.imaging-strip { border: 1px solid var(--hairline); background: linear-gradient(170deg, var(--premium-beige), var(--warm-white)); padding: 1.25rem 1.4rem; gap: .9rem 1.5rem; }
.imaging-strip .im-item { flex-direction: column; align-items: flex-start; gap: .1rem; }
.imaging-strip .im-item span { font-size: .8rem; color: var(--ink-soft); }
.imaging-strip .im-item b { font-family: var(--font-head); font-size: 1.28rem; color: var(--forest); font-weight: 400; }
.im-badge { display: inline-flex; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-gold); border: 1px solid var(--brushed-gold); border-radius: var(--radius); padding: .2rem .5rem; margin-bottom: .8rem; }
/* Homepage On-site Imaging — four cards, each with in-house + referral price, linking to /imaging/. */
.imaging-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.3rem; }
.im-card { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: 1.15rem 1.25rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: linear-gradient(170deg, var(--premium-beige), var(--warm-white)); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.im-card:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); border-color: var(--brushed-gold); }
.im-card-name { font-size: .82rem; color: var(--ink-soft); }
.im-card-price { font-family: var(--font-head); font-size: 1.5rem; font-weight: 400; color: var(--forest); line-height: 1.15; }
.im-card-ref { font-size: .7rem; color: var(--ink-soft); }
.im-card-ref [data-fig] { color: var(--forest); font-weight: 700; }
@media (max-width: 860px) { .imaging-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .imaging-cards { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ortho-card .ortho-from { font-size: 1.7rem; } .imaging-strip .im-item { flex-direction: row; align-items: baseline; gap: .5rem; } }

/* ---- Hero carousel ------------------------------------------------------------
   Whole card is the link — no captions. Controls (arrows + dots) stay hidden until
   hover/focus so the hero reads clean at rest.
   ACCESSIBILITY: WCAG 2.2.2 requires a pause mechanism for content that auto-moves
   for more than 5s. So it pauses on hover AND focus, stops permanently once the
   user picks a slide, and never auto-starts under prefers-reduced-motion. */
/* The stage is sized to the photo, not to the column. Everything in the carousel
   positions against this box: the arrows pin to left:0 / right:0, the dots centre
   on it, and the slide fills it. When the stage was column-width the photo sat
   left-aligned inside it (15px off centre at 406px wide) and the arrows floated
   off the edges of the image. /nib-dentist/ looked right only because it carries
   this width inline. Must match .hero-shot > a. */
.hero-stage { position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(340px, 100%); margin-inline: auto; }
.hero-track { position: relative; width: 100%; display: flex; justify-content: center; }
.hero-shot { display: none; }
.hero-shot[data-active="true"] { display: block; }
.hero-shot > a { display: block; text-decoration: none; border-radius: var(--radius); transition: transform .25s ease; }
.hero-shot > a:hover { transform: translateY(-2px); }
.hero-shot > a:focus-visible { outline: 2px solid var(--brushed-gold); outline-offset: 4px; }
/* UNIFORM CARD BOX. Source photos arrive in different ratios — the portraits are
   3:4, reception is 4:3 — so "max-width + auto height" made reception render 197px
   tall against 349px for the others. It looked shrunken and the hero jumped height
   on every advance. Every photo card is now the same 3:4 box and the image covers
   it; the transparent cutout keeps its natural shape, centred in the same box. */
.hero-track { min-height: 352px; align-items: center; }
/* Scoped to the CARD image only. As `.hero-shot img` this also caught the seal
   inside .hero-name and blew it up to 206px, because it sits later in the file
   than the .hero-name rules at equal specificity. */
.hero-shot > a > img { width: 100%; height: auto; filter: saturate(.62) contrast(.86) brightness(1.1); opacity: .92; display: block; }
.hero-shot > a { position: relative; }
/* ONE card box for EVERY slide, keyed off .hero-shot — not off any slide's id.
   Slides must be swappable and reorderable, and after the WordPress port the
   rows come out of an ACF repeater with no ids at all, so id-based styling
   would silently stop applying and the card would revert to its natural size.
   The two modifiers below change ONLY how the image fills this shared box. */
/* min(), not a fixed width: at 262px the hero photo used only ~76% of the column on a
   phone while /nib-dentist/ — which overrides this inline — filled 340px and read far
   better. Same cap everywhere now, and it can never exceed its column. */
.hero-shot > a { width: min(340px, 100%); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); }

/* --photo   a real photograph: fill the box, crop the overflow */
.hero-shot--photo > a > img { width: 100%; height: 100%; object-fit: cover; }

/* --cutout  a transparent PNG cut-out of a person: never crop them. Fit the
   whole subject inside the box and stand them on its baseline. */
.hero-shot--cutout > a > img { max-width: none; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

/* short label on each photo card */
.hero-label { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem .8rem .6rem; font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--warm-white); text-align: center; background: linear-gradient(to top, rgba(50,50,51,.72), rgba(50,50,51,0)); border-radius: 0 0 var(--radius) var(--radius); }
.hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 50%; background: rgba(253,252,250,.82); color: var(--ink-soft); cursor: pointer; opacity: 0; transition: opacity .22s ease, color .2s ease, border-color .2s ease; font-size: .9rem; line-height: 1; padding: 0; }
.hero-nav--prev { left: 0; }
.hero-nav--next { right: 0; }
.hero-stage:hover .hero-nav, .hero-stage:focus-within .hero-nav { opacity: .85; }
.hero-nav:hover { opacity: 1 !important; color: var(--deep-gold); border-color: var(--brushed-gold); }
.hero-nav:focus-visible { opacity: 1; outline: 2px solid var(--deep-gold); outline-offset: 2px; }
.hero-dots { display: flex; gap: .38rem; justify-content: center; margin-top: .75rem; opacity: 0; transition: opacity .22s ease; }
.hero-stage:hover .hero-dots, .hero-stage:focus-within .hero-dots { opacity: 1; }
.hero-dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; background: var(--hairline); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.hero-dot[aria-selected="true"] { background: var(--brushed-gold); transform: scale(1.25); }
.hero-dot:focus-visible { outline: 2px solid var(--deep-gold); outline-offset: 3px; }
@media (hover: none) { .hero-dots { opacity: 1; } .hero-nav { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .hero-shot > a { transition: none; } }

/* ---------------------------------------------------------------------------
   Principal-dentist lead block (/our-team/#dr-sumaiya-pathan)
   The shared .hero-grid gives the media column the larger share, but
   .hero-cutout is capped at 248px for the HOMEPAGE hero — which left ~371px
   of empty column here while the bio was squeezed into 453px and ran 619px
   tall. Scoped to this section only; the homepage hero keeps its 248px cap.
   --------------------------------------------------------------------------- */
#dr-sumaiya-pathan .hero-grid { grid-template-columns: 340px 1fr; gap: 2.75rem; }
#dr-sumaiya-pathan .hero-media { align-items: flex-start; }
#dr-sumaiya-pathan .hero-cutout { max-width: 340px; }

@media (max-width: 1100px) {
  #dr-sumaiya-pathan .hero-grid { grid-template-columns: 280px 1fr; gap: 2rem; }
  #dr-sumaiya-pathan .hero-cutout { max-width: 280px; }
}
@media (max-width: 820px) {
  #dr-sumaiya-pathan .hero-grid { grid-template-columns: 1fr; }
  #dr-sumaiya-pathan .hero-media { align-items: center; }
  #dr-sumaiya-pathan .hero-cutout { max-width: 248px; }
}

/* ---------------------------------------------------------------------------
   Offer card — stop the badge and pf-link stretching the full column
   .offer-price is a flex column, and flex BLOCKIFIES its children's display:
   the inline-flex / inline-block declared on .offer-badge and .pf-link become
   flex / block, so both stretched to the full 270px column while the NO GAP
   tag (inside non-flex .offer-body) correctly hugged its text.
   align-self is the right lever inside a flex column.
   --------------------------------------------------------------------------- */
.offer-price > .offer-badge,
.offer-price > .pf-link { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   Hero carousel — touch devices
   The dots are 7px and the arrows 30px. Both are below the WCAG 2.5.8 minimum
   target of 24x24, which is a real problem for a finger even though it is fine
   for a cursor. Grow the HIT AREA with padding and keep the painted dot the
   same size, so the visual design is unchanged.
   --------------------------------------------------------------------------- */
.hero-track { touch-action: pan-y; }          /* horizontal swipe, page still scrolls */
.hero-shot > a { -webkit-tap-highlight-color: transparent; }

@media (pointer: coarse) {
  /* 7px dot centred in a 24px target — visual identical, tappable area 3.4x wider */
  .hero-dot { background-clip: content-box; padding: 8.5px; width: 24px; height: 24px; }
  .hero-dots { gap: 0; margin-top: .35rem; }
  .hero-nav { width: 40px; height: 40px; opacity: .75; }
  /* A drag must not look like a text selection while swiping a card */
  .hero-shot > a, .hero-shot img { user-select: none; -webkit-user-select: none; }
  .hero-shot > a:hover { transform: none; }   /* sticky :hover after a tap */
}

/* ---------------------------------------------------------------------------
   Hero carousel — sit the cards ON the baseline, not floating above it
   Two causes, measured:
   1. .hero-track is min-height:352px with align-items:center, but the slides
      are NOT the same height — the dentist cut-out is 258px, the photo cards
      349px. Centring the short one left 47px of dead space under it, so the
      image visibly floated. flex-end gives every slide one shared bottom line.
   2. .hero-dots sat in normal flow and ate the last 19px of the media column,
      so the card could never reach the column's bottom edge. Taking them out
      of flow lets the card bottom meet the text column's bottom exactly —
      .hero-grid is already align-items:end, so the two columns then agree.
   --------------------------------------------------------------------------- */
.hero-track { align-items: flex-end; }
.hero-stage { position: relative; }
.hero-dots  { position: absolute; left: 0; right: 0; top: 100%; margin-top: .4rem; }

/* The carousel's card box and the two fill modes are defined together, up with
   the other .hero-shot rules. Nothing about a slide is keyed to its id, so any
   slide can be replaced, reordered or re-authored in WordPress and still get
   the identical 262x349 card. */

/* ---------------------------------------------------------------------------
   Gallery grid (/gallery/) and supporting bits for /technology/
   --------------------------------------------------------------------------- */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.gal-item { margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--warm-white); }
.gal-item > img { display: block; width: 100%; height: 260px; object-fit: cover;
  filter: saturate(.62) contrast(.86) brightness(1.1); opacity: .92; }
.gal-item figcaption { padding: .7rem .85rem .85rem; font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }
.gal-item figcaption b { display: block; font-family: var(--font-head); font-weight: 500;
  font-size: .95rem; color: var(--ink); margin-bottom: .15rem; }
@media (max-width: 560px) { .gal-item > img { height: 220px; } }

/* a plain photo that should pick up the site's soft treatment + rounding */
.rounded { border-radius: var(--radius); display: block; width: 100%; height: auto;
  filter: saturate(.62) contrast(.86) brightness(1.1); opacity: .92; }

/* checklist used on /technology/ — same tick as the offer card, without its box */
.tick-list { list-style: none; padding: 0; margin: .9rem 0 0; }
/* NOT flex. A flex container BLOCKIFIES its children, so an inline <b> inside
   the item becomes its own flex ITEM and sits in a column beside the rest of
   the sentence instead of reading inline within it. Exactly the bug that hit
   the FAQ summaries. Absolute-positioned icon keeps the layout without it. */
.tick-list li { display: block; position: relative; padding-left: 1.6rem; font-size: .9rem;
  color: var(--ink-soft); margin-bottom: .45rem; line-height: 1.55; }
.tick-list li .ic { position: absolute; left: 0; top: .18rem; flex: none; color: var(--forest); }
.tick-list li b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Interest-free section (/payment-options/#interest-free)
   Two TEXT columns, not text + media, so .hero-grid's deliberate 619/453 split
   is wrong here: it handed the wider column to the shorter list and squeezed
   the denser "worth knowing" card (280px tall vs 424px). Equal columns instead.
   Same trap as the principal-dentist block — a hero layout reused for
   non-hero content.
   --------------------------------------------------------------------------- */
#interest-free .hero-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 2rem; }
@media (max-width: 860px) { #interest-free .hero-grid { grid-template-columns: 1fr; } }

/* Disclaimer → Contact us — each field on its own line so name, address,
   phone and email never wrap into each other on narrow screens. */
.legal-wrap ul.contact-stack, .contact-stack { list-style: none; padding-left: 0; margin: .4rem 0 0; }
.contact-stack li { margin-bottom: .3rem; line-height: 1.5; }
.contact-stack li:first-child { margin-bottom: .1rem; }

/* ---------------------------------------------------------------------------
   Enquiry treatment tag — the chip above the contact form, set by a
   "Enquire about this" link. (/treatments/ dual-CTA pattern.)
   --------------------------------------------------------------------------- */
.enquiry-tag { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  padding: .5rem .7rem .5rem .85rem; background: var(--soft-beige); border: 1px solid var(--brushed-gold);
  border-radius: var(--radius); font-size: .86rem; }
.enquiry-tag-label { color: var(--ink-soft); }
.enquiry-tag-name { font-weight: 600; color: var(--forest); }
.enquiry-tag-clear { border: 0; background: transparent; cursor: pointer; font-size: 1.15rem;
  line-height: 1; color: var(--ink-soft); padding: 0 .1rem; }
.enquiry-tag-clear:hover { color: var(--deep-gold); }

/* Dual action row on each treatment item */
.tx-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.tx-actions .btn { font-size: .82rem; padding: .5rem .85rem; }
.tx-included { margin-top: .5rem; }
.tx-included > summary { list-style: none; cursor: pointer; font-size: .84rem; font-weight: 600;
  color: var(--deep-gold); display: inline-flex; align-items: center; gap: .3rem; }
.tx-included > summary::-webkit-details-marker { display: none; }
.tx-included > summary::after { content: "+"; font-weight: 400; }
.tx-included[open] > summary::after { content: "\2013"; }
.tx-included .tx-included-body { margin-top: .55rem; padding-left: .1rem; }
.tx-included ul { list-style: none; padding: 0; margin: 0; }
.tx-included li { position: relative; padding-left: 1.4rem; font-size: .86rem; color: var(--ink-soft);
  margin-bottom: .35rem; line-height: 1.5; }
.tx-included li::before { content: "\2713"; position: absolute; left: 0; top: .05rem; color: var(--forest); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Cost page — headline treatment cards. Narrow outline box (matches the
   .ortho-card / .imaging-strip hairline family), tick inclusions, minimal
   text, Book + Enquire in the standard button styles.
   --------------------------------------------------------------------------- */
.tx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.4rem 0 .4rem; }
.tx-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.1rem 1.15rem 1.2rem; background: var(--warm-white); display: flex; flex-direction: column; }
.tx-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .7rem; }
.tx-card-head h3 { margin: 0; font-size: 1.02rem; }
.tx-card-price { flex: none; font-family: var(--font-head); font-size: .92rem; color: var(--deep-gold); white-space: nowrap; }
.tx-card-included { flex: 1 1 auto; }
.tx-card-included .tick-list { margin: 0; }
.tx-card-included .tick-list li { font-size: .84rem; margin-bottom: .3rem; }
.tx-card .tx-actions { margin-top: 1rem; display: flex; gap: .5rem; }
.tx-card .tx-actions .btn { flex: 1 1 0; font-size: .84rem; padding: .55rem .6rem; text-align: center; justify-content: center; }
@media (max-width: 420px) { .tx-card .tx-actions { flex-direction: column; } }

/* ---------------------------------------------------------------------------
   Cost page — two-level price accordion (build-price-accordion.py)
   Level 1: category section (down-arrow, expands and stays open)
   Level 2: price cards, each with Book + Enquire and a "See what's included"
            disclosure styled like the section header.
   --------------------------------------------------------------------------- */
/* Each section is a bordered box with a FAQ-style + that rotates to × when open,
   so a collapsed accordion reads as a stack of boxes (matching .faq-item). */
.price-accordion { margin: 1.6rem 0 .5rem; }
.price-section { border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--warm-white); margin-bottom: .7rem; }
.price-section > summary { list-style: none; cursor: pointer; position: relative; display: flex;
  align-items: center; gap: .6rem; padding: 1rem 3rem 1rem 1.3rem;
  font-family: var(--font-head); font-size: 1.1rem; color: var(--ink); }
.price-section > summary::-webkit-details-marker { display: none; }
.price-section-name { flex: 1 1 auto; }
.price-section-count { flex: none; font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  color: var(--ink-soft); background: var(--soft-beige); border-radius: 999px; padding: .12rem .55rem; }
.price-section > summary::after { content: "+"; position: absolute; right: 1.3rem; top: 50%;
  transform: translateY(-50%); font-family: var(--font-body); font-weight: 400; font-size: 1.5rem;
  color: var(--brushed-gold); line-height: 1; transition: transform .2s ease; }
.price-section[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.price-section[open] > summary { color: var(--forest); }
.price-section-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .9rem; padding: .2rem 1.3rem 1.3rem; }

.price-card { border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 1rem 1.05rem 1.1rem; background: var(--warm-white); display: flex; flex-direction: column; }
.price-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.price-card-top h4 { margin: 0; font-size: .98rem; line-height: 1.3; }
.price-card-figure { flex: none; font-family: var(--font-head); font-size: 1.05rem; color: var(--forest); white-space: nowrap; text-align: right; }
.price-card-figure .price-quote { font-size: .78rem; color: var(--ink-soft); font-family: var(--font-body); }
/* Referral / imaging-only tier shown under the everyday in-house price. */
.price-card-alt { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; margin-top: .18rem; letter-spacing: .01em; }
.price-card-alt [data-fig] { font-weight: 700; color: var(--forest); }
.price-card-blurb { font-size: .82rem; color: var(--ink-soft); margin: .4rem 0 0; line-height: 1.5; }
.price-card .tx-actions { display: flex; gap: .5rem; margin-top: .8rem; }
.price-card .tx-actions .btn { flex: 1 1 0; font-size: .82rem; padding: .5rem .5rem; justify-content: center; text-align: center; }

.price-included { margin-top: .8rem; border-top: 1px solid var(--hairline); padding-top: .6rem; }
.price-included > summary { list-style: none; cursor: pointer; position: relative; padding-right: 1.4rem;
  font-size: .82rem; font-weight: 600; color: var(--deep-gold); }
.price-included > summary::-webkit-details-marker { display: none; }
.price-included > summary::after { content: "+"; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); font-weight: 400; font-size: 1.15rem; color: var(--brushed-gold);
  line-height: 1; transition: transform .2s ease; }
.price-included[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.price-included-body { margin-top: .6rem; }
.price-included-body .tick-list { margin: 0 0 .6rem; }
.price-included-body .tick-list li { font-size: .84rem; margin-bottom: .3rem; }
.price-note { font-size: .82rem; color: var(--ink-soft); line-height: 1.55; margin: .4rem 0 0; }
.price-note b { color: var(--ink); font-weight: 600; }
@media (max-width: 400px) { .price-card .tx-actions { flex-direction: column; } }

/* Legal header (privacy · terms · disclaimer) at mobile — the sitewide
   horizontal logo (209px) plus the "Back to home" button (169px) overran a
   375px screen. Trim both just on this minimal utility header at narrow widths. */
@media (max-width: 480px) {
  .legal-header .logo-horizontal { height: 26px; }
  .legal-header .btn--secondary { font-size: .8rem; padding: .5rem .75rem; }
}

/* ---------------------------------------------------------------------------
   Suburb bars — the "Serving Melbourne's west" block
   Horizontal bars rather than a plain link list, because a run of comma-separated
   suburb links in a footer reads as boilerplate and gets ignored. Each bar is its
   own target with a location pin, a name and a small meta line, so the block is
   scannable and visibly clickable.
   SEO: plain <a> with the exact suburb name as anchor text, inside a labelled
   <nav>, statically rendered — no JS, nothing hidden behind interaction.
   --------------------------------------------------------------------------- */
.suburb-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .55rem; max-width: 62rem; margin-inline: auto; }

.suburb-bar { display: flex; flex-direction: column; gap: .1rem; text-decoration: none;
  padding: .7rem .9rem .7rem 2.1rem; position: relative;
  background: var(--warm-white); border: 1px solid var(--hairline);
  border-left: 3px solid var(--brushed-gold); border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }

/* the pin sits in the left gutter created by the padding */
.suburb-bar::before { content: ""; position: absolute; left: .85rem; top: 1.05rem;
  width: 7px; height: 7px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--brushed-gold); }

.suburb-bar-name { font-family: var(--font-head); font-size: .97rem; color: var(--ink); line-height: 1.25; }
.suburb-bar-meta { font-size: .72rem; color: var(--ink-soft); }

a.suburb-bar:hover { border-left-color: var(--forest); border-color: var(--brushed-gold);
  transform: translateX(2px); box-shadow: 0 2px 10px rgba(143,112,56,.10); }
a.suburb-bar:hover .suburb-bar-name { color: var(--deep-gold); }
a.suburb-bar:focus-visible { outline: 2px solid var(--deep-gold); outline-offset: 2px; }

/* current page — anchored, not clickable-looking */
.suburb-bar.is-current { border-left-color: var(--forest); background: var(--soft-beige); }
.suburb-bar.is-current .suburb-bar-name { color: var(--forest); }

/* a suburb whose page is not built yet: same visual family, muted, not a link */
.suburb-bar.is-soon { border-left-color: var(--hairline-strong, #C9C4B8); opacity: .72; }
.suburb-bar.is-soon::before { background: var(--hairline-strong, #C9C4B8); }

@media (prefers-reduced-motion: reduce) { .suburb-bar { transition: none; } a.suburb-bar:hover { transform: none; } }

/* optional-field hint in form labels */
.allura-form label .opt { font-weight: 400; color: var(--ink-soft); font-size: .82em; }

/* A suburb chip that has a page becomes a link — it must LOOK clickable, or the
   internal linking is invisible to the visitor (and only works for crawlers). */
a.suburb-chip { text-decoration: none; cursor: pointer;
  border-color: var(--brushed-gold); transition: background-color .18s ease, color .18s ease; }
a.suburb-chip:hover { background: var(--brushed-gold); color: var(--warm-white); }
a.suburb-chip:focus-visible { outline: 2px solid var(--deep-gold); outline-offset: 2px; }
.footer-col a[href^="/dentist-"] { color: inherit; text-decoration: underline;
  text-decoration-color: var(--brushed-gold); text-underline-offset: 2px; }
.footer-col a[href^="/dentist-"]:hover { color: var(--brushed-gold); }

/* Footer service-area list — sitewide, so every page feeds link equity to the
   suburb pages. Small and quiet: it is a crawl/relevance signal first and a
   navigation aid second, and it must not compete with the legal block. */
.footer-serving { border-top: 1px solid var(--hairline); padding-top: 1.1rem;
  margin-bottom: 1.2rem; width: 100%; }
.footer-serving .serving-list { max-width: none; }   /* run the full container width */
/* Heading matches the homepage's other footer column headings (.footer-col h4)
   so the block reads as part of the same footer, not a bolted-on strip. */
.footer-serving h4 { font-family: var(--font-body); font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 .7rem; }
.serving-list { font-size: .78rem; line-height: 1.85; color: var(--ink-soft); margin: 0; }
.serving-list a { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--brushed-gold); text-underline-offset: 2px; }
.serving-list a:hover { color: var(--deep-gold); }

/* ---------------------------------------------------------------------------
   Service-area locator map (homepage #service-areas)
   A schematic, NOT a real map — no scale, no roads, so it cannot be mistaken
   for navigation. Truganina sits at the centre; everywhere else is placed
   roughly by compass direction.

   SEO: every pin is a real <a>/<span> whose suburb name is plain text in the
   markup, positioned with CSS. Nothing is drawn on a canvas, nothing is
   injected by JS, and no name is display:none — so a crawler reads the same
   list a visitor does. Hover only changes emphasis, never reveals new text.
   --------------------------------------------------------------------------- */
.geo-map { position: relative; width: 100%; max-width: 60rem; margin: 1.8rem auto .6rem;
  aspect-ratio: 16 / 11; border: 1px solid var(--hairline); border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 49%, rgba(63,99,47,.09) 0 12%, transparent 12.5%),
    radial-gradient(circle at 50% 49%, rgba(63,99,47,.05) 0 26%, transparent 26.5%),
    radial-gradient(circle at 50% 49%, rgba(63,99,47,.035) 0 42%, transparent 42.5%),
    linear-gradient(var(--hairline) 1px, transparent 1px) 0 0 / 100% 12.5%,
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px) 0 0 / 8.333% 100%,
    var(--warm-white);
  background-blend-mode: normal; overflow: hidden; }

.geo-pin { position: absolute; transform: translate(-50%, -50%); display: flex;
  align-items: center; gap: .3rem; text-decoration: none; white-space: nowrap;
  font-size: .74rem; color: var(--ink-soft); padding: .18rem .4rem;
  background: rgba(253,252,250,.82); border-radius: 999px; transition: all .18s ease; }
.geo-dot { width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--brushed-gold); box-shadow: 0 0 0 3px rgba(184,150,90,.16); }

a.geo-pin:hover, a.geo-pin:focus-visible { color: var(--warm-white); background: var(--deep-gold);
  z-index: 3; transform: translate(-50%, -50%) scale(1.1); }
a.geo-pin:hover .geo-dot, a.geo-pin:focus-visible .geo-dot { background: var(--warm-white); }
a.geo-pin { color: var(--ink); font-weight: 600; }
a.geo-pin .geo-dot { background: var(--forest); box-shadow: 0 0 0 3px rgba(63,99,47,.18); }

.geo-pin.is-clinic { font-size: .9rem; font-family: var(--font-head); color: var(--forest);
  background: var(--warm-white); border: 1px solid var(--brushed-gold); padding: .35rem .7rem;
  z-index: 4; box-shadow: 0 3px 14px rgba(143,112,56,.14); }
.geo-pin.is-clinic .geo-dot { width: 10px; height: 10px; background: var(--forest);
  box-shadow: 0 0 0 5px rgba(63,99,47,.16); }
.geo-sub { color: var(--ink-soft); font-size: .78em; font-family: var(--font-body); }

.geo-note { font-size: .76rem; color: var(--ink-soft); margin: .2rem 0 0; }

/* On narrow screens the map keeps its true shape and scrolls horizontally
   inside .geo-scroll, rather than collapsing into a chip layout — the section
   stays a "map" everywhere, and every suburb stays a readable, tappable link.
   Centred on the clinic on load (see index.html script). */
.geo-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.geo-scroll::-webkit-scrollbar { height: 6px; }
.geo-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 999px; }
@media (max-width: 720px) {
  /* below this the map would shrink past legibility — hold a minimum width and
     let it scroll instead */
  /* 40rem, not 33rem: the map carries 27 pin labels, and at 33rem (528px) they
     cover a third of it and overlap whatever coordinates they are given — no
     coordinate set fixes it. At 40rem they cover a fifth, the desktop condition.
     The map already scrolls horizontally here and the tail script centres it. */
  .geo-map { min-width: 40rem; }
}
@media (prefers-reduced-motion: reduce) { .geo-pin { transition: none; } }

/* ---------------------------------------------------------------------------
   Suburb pages — density pass
   Sections were on the sitewide 51px block padding, which on a page of short
   sections reads as a lot of empty band. Tighten the rhythm and add the
   practical clinic facts a visitor would otherwise have to hunt for.
   --------------------------------------------------------------------------- */
.clinic-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem 1.4rem; margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--hairline); }
.clinic-fact { display: flex; flex-direction: column; gap: .18rem; }
.clinic-fact-k { font-family: var(--font-body); font-size: .68rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--deep-gold); }
.clinic-fact-v { font-size: .84rem; line-height: 1.55; color: var(--ink-soft); }

/* Tighter vertical rhythm on the suburb pages only */
body:has(.suburb-bars) main > section { padding-block: 2.4rem; }
body:has(.suburb-bars) main > section:first-child { padding-block: 2.8rem 2.4rem; }
body:has(.suburb-bars) main > section > .container > .center { margin-bottom: 1rem; }

/* Nearby areas — tighter grid, smaller bars */
.suburb-bars { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .45rem; }
.suburb-bar { padding: .5rem .7rem .5rem 1.85rem; }
.suburb-bar::before { top: .82rem; }
.suburb-bar-name { font-size: .88rem; }
.suburb-bar-meta { font-size: .68rem; }

/* Homepage locator map — smaller, so it stops dominating the section */
.geo-map { max-width: 48rem; aspect-ratio: 16 / 9.5; margin-block: 1.4rem .5rem; }
.geo-pin { font-size: .69rem; padding: .14rem .34rem; }
.geo-pin.is-clinic { font-size: .82rem; padding: .28rem .6rem; }

/* Health-fund logo tiles — the recognisable majors, as a logo row (Taylors Rd
   style). Text placeholder now; drop in official logo files when supplied and
   swap the <span> for an <img>. See docs/Allura-Health-Fund-Logos.md. */
/* Logo wall. Two deliberate decisions here, both of which replace earlier hacks.

   1. NO BOX. The tiles used to carry a border, a background and padding. The frame drew
      attention to how differently the logos sat inside it, so it is gone; the logos sit
      on the section background and the row rhythm comes from min-height alone.

   2. OPTICAL SIZING, not a single max-height. Capping every logo at one height makes a
      square mark (Bupa, Apia) look tiny beside a wide wordmark (GU Health, Medibank),
      because at equal height a 7:1 wordmark covers seven times the area. Each logo gets
      a height of its own, set in two passes:
        pass 1  h = 47.6 / aspect^0.42  — corrects for shape, from media.json dimensions.
        pass 2  x (median_coverage / coverage)^0.25, clamped 22-46px — corrects for INK.
      Pass 2 is what the aspect ratio alone cannot see. Rendered at a common height the
      logos cover wildly different amounts of their own box: Bupa 91% (a solid square),
      nib 48%, Suncorp 16% (a wordmark plus an isolated circle), ahm 9% (thin strokes).
      So two logos with the same bounding box can differ ten-fold in visual mass, which
      is why ahm and Suncorp read small beside nib and GU Health under a shape-only rule.
      Coverage is measured, not estimated: draw each logo to a canvas at a fixed height
      and count pixels with alpha > 40 and luminance < 238, weighted by opacity. */
.fund-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  --cols: 4; --colgap: .4rem;
  gap: 1.1rem var(--colgap); max-width: 46rem; margin: 1.4rem auto .4rem; }
/* Percentage basis, so the column count is DETERMINISTIC at every width: 4 per row, then 2.
   A content-width basis let the browser choose, which is how a 7-logo strip landed on 5 + 2
   and needed a hand-placed .fund-break to force 3 + 4. There is deliberately no 3-column
   step: 3 columns turns 7 logos into 3 + 3 + 1. */
.fund-logo { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--colgap)) / var(--cols));
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 .5rem; }
.fund-logo span { font-family: var(--font-head); font-size: .95rem; color: var(--ink-soft);
  letter-spacing: .01em; }
.fund-logo img { max-width: 100%; height: auto; object-fit: contain;
  max-height: calc(var(--logo-h, 30px) * var(--logo-scale, 1)); }
/* Derived from media.json aspect ratios — see the formula above. */
.fund-logo[data-fund="apia"]               { --logo-h: 46px; }
.fund-logo[data-fund="bupa"]               { --logo-h: 37px; }
/* IMAN is a stacked lockup — wordmark over two lines of small type — so the aspect-ratio
   formula under-sizes it: most of its height is fine text, not mark. Set by eye. */
.fund-logo[data-fund="iman"]               { --logo-h: 46px; }
.fund-logo[data-fund="ahm"]                { --logo-h: 46px; }
.fund-logo[data-fund="australian-unity"]   { --logo-h: 35px; }
.fund-logo[data-fund="aami"]               { --logo-h: 30px; }
.fund-logo[data-fund="nib"]                { --logo-h: 27px; }
.fund-logo[data-fund="hcf"]                { --logo-h: 29px; }
.fund-logo[data-fund="australian-seniors"] { --logo-h: 28px; }
.fund-logo[data-fund="suncorp"]            { --logo-h: 34px; }
.fund-logo[data-fund="real-insurance"]     { --logo-h: 28px; }
.fund-logo[data-fund="hbf"]                { --logo-h: 29px; }
.fund-logo[data-fund="ing"]                { --logo-h: 27px; }
.fund-logo[data-fund="qantas"]             { --logo-h: 25px; }
.fund-logo[data-fund="medibank"]           { --logo-h: 22px; }
.fund-logo[data-fund="gu-health"]          { --logo-h: 22px; }
/* On the brand grids each logo IS the link to its own card, so it needs an affordance.
   Elsewhere .fund-logo is still a plain div and none of this applies. */
a.fund-logo { text-decoration: none; border-radius: var(--radius);
  transition: opacity var(--dur, 200ms) ease, transform var(--dur, 200ms) ease; }
a.fund-logo:hover { opacity: .62; transform: translateY(-1px); }
a.fund-logo:focus-visible { outline: 2px solid var(--deep-gold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { a.fund-logo { transition: none; } }
/* The hand-placed row break is obsolete now the column count is deterministic. */
.fund-break { display: none; }
@media (max-width: 560px) { .fund-logos { --cols: 2; } }

/* nib No Gap dentist page (D25). Brand grid: 8 tiles (4 + 4 on desktop, 2 per row on phones), a little
   wider and taller than the standard fund tiles so a square badge (Apia) and a thin wordmark (GU Health)
   carry the same visual weight as the rest. Markup: web/tools/build-nib-brands.py. */
.fund-logos--brands { max-width: 46rem; --logo-scale: 1.12; }
.fund-logos--brands .fund-logo { min-height: 66px; }
/* The Apia exception is gone: the optical formula already gives a square badge its own
   height, which is what that one-off rule was compensating for by hand. */
@media (max-width: 560px) { .fund-logos--brands { --cols: 2; } }
/* The No Gap item table, and a link that reads as a link inside a sentence. Bare <a> inherits colour
   with no underline sitewide, and .pf-link is an inline-block "see more" link. */
.table-wrap { overflow-x: auto; max-width: 44rem; margin: 1.4rem auto 0; }
.item-table { width: 100%; border-collapse: collapse; background: var(--warm-white); border: 1px solid var(--hairline); font-size: .92rem; }
.item-table th, .item-table td { padding: .55rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.item-table thead th { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--deep-gold); white-space: nowrap; }
.item-table tbody tr:last-child td { border-bottom: 0; }
.item-table td:first-child { width: 5.5rem; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-copy-link { color: var(--deep-gold); border-bottom: 1px solid var(--brushed-gold); }
.in-copy-link:hover { color: var(--forest); border-bottom-color: var(--forest); }