/* ============================================================
   Auckland City Orthodontics (2026) — shared styles
   Font: Onest (headings + body/UI)
   Figma: 1N0tBSAmdF9evf8oN53Kue · design system node 2889:449
   ============================================================ */

/* ---------- Tokens ---------- */

:root {
  /* Brand palette — "one accent per clinic location" (design-system board) */
  --brand:        #00B3F0;   /* aco_grey_lynn_blue — primary / actions (Grey Lynn) */
  --brand-light:  #66D4F6;   /* light end of the hover gradient */
  --brand-orange: #F68B24;   /* aco_remuera_orange  — Remuera clinic  */
  --brand-green:  #A4CE57;   /* aco_highbrook_green — Highbrook clinic */
  --brand-pink:   #B86EAD;   /* aco_cbd_pink        — Auckland CBD clinic */

  /* Universal interactive hover (buttons, dropdown, arrows) */
  --grad-hover: linear-gradient(90deg, #66D4F6 0%, #00B3F0 100%);

  /* Ink / text (the 4 sanctioned neutrals) */
  --ink:        #333333;     /* $c_text — body + heading text */
  --ink-mid:    #515153;     /* aco_grey — secondary / nav text */
  --near-black: #111921;     /* $c-black — footer / deepest ink */

  /* Surfaces / lines (derived helpers) */
  --white:      #FFFFFF;     /* surfaces / reversed text */
  --surface:    #EFEFEF;     /* light section fill */
  --border:     #D9D9D9;     /* hairline / card border */

  /* Semantic (derived — verify against any error states in the design) */
  --success: #A4CE57;
  --error:   #E5484D;
  --warning: #F68B24;
  --info:    #00B3F0;

  /* Type */
  --font: "Onest", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Fluid unit: 1px at >=1920, shrinks proportionally below so the
     1920 pixel-perfect layout scales down instead of overflowing. */
  --u: 1px;
  --gut: calc(84 * var(--u));   /* header/footer content gutter */

  /* Layout (1920 canvas) — 3 widths from the grid-system board */
  --container: 1754px;       /* main content, 12 col @ 72px / 40px gutter → 83px margin */
  --band:      1872px;       /* full-bleed band, 24px page margin — hero/video/map */
  --content:   1640px;       /* content band, 140px margin — footer */
  --side:      24px;         /* page margin */
  --gutter:    83px;         /* container side margin on 1920 */
  --foot-pad:  140px;        /* footer content-band margin */

  /* Fluid text-column widths. The type does not scale, so a pure proportional
     shrink leaves headings too cramped — these clamps land on exactly 410px
     at 1440 and never drop below it. */
  --col-437: clamp(410px, calc(329px + 5.625vw),  437px);  /* 437 @1920 → 410 @1440 */
  --col-407: clamp(407px, calc(419px - 0.625vw),  410px);  /* 407 @1920 → 410 @1440 */
  --col-520: clamp(410px, calc(80px  + 22.917vw), 520px);  /* 520 @1920 → 410 @1440 */

  /* Radii */
  --r-btn:  4px;
  --r-card: 8px;

  /* Motion */
  --dur:  300ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}


/* ---------- Reset ---------- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.4;
  /* overflow-x: hidden makes body a scroll container (overflow-y computes to
     auto), which breaks position: fixed on the mobile header in Safari/iOS and
     stops window scroll events from firing. clip does the same horizontal
     clipping without creating a scroller; hidden stays as the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

ul { list-style: none; }

input, textarea, select { font: inherit; }

::selection { background: var(--brand); color: #fff; }


.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 9999;
  background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 6px;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus { top: 12px; }


/* ---------- Layout helpers ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  width: 100%;
  max-width: var(--band);
  margin-inline: auto;
  padding-inline: var(--side);
}

.section { position: relative; }


/* Mobile-only line break: where a Figma mobile frame spells out a wrap the
   desktop frame doesn't. */

.br-m { display: none; }


/* ---------- Typography (Onest) ----------
   Scale read from design-system node 2889:449:
   h1 56/64 500 -1.12 · h2 40/51 300 -1.2 · h4 32/41 300 -0.96
   h6 18/25 500 -0.54 · body 16/22 400 -0.48 */

h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 300; line-height: 1.1; color: var(--ink); }


.h1 { font-size: 56px; line-height: 64px; font-weight: 500; letter-spacing: -1.12px; }

.h2 { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; }

.h3 { font-size: 32px; line-height: 41px; font-weight: 300; letter-spacing: -0.96px; }

.h4 { font-size: 32px; line-height: 41px; font-weight: 300; letter-spacing: -0.96px; }

.h6 { font-size: 18px; line-height: 25px; font-weight: 500; letter-spacing: -0.54px; }


/* H4 = eyebrow (blue, uppercase) */

.eyebrow {
  font-size: 14px; line-height: 19.6px; font-weight: 500; letter-spacing: 0;
  text-transform: uppercase; color: var(--brand);
}

/* H5 */

.h5 { font-size: 18px; line-height: 25.2px; font-weight: 500; letter-spacing: -0.54px; color: var(--ink); }

.lead { font-size: 18px; line-height: 27px; font-weight: 400; }

.body { font-size: 16px; line-height: 22.4px; font-weight: 400; letter-spacing: -0.48px; color: var(--ink); }

small, .small { font-size: 14px; line-height: 21px; }

/* Heading emphasis: designs mix weight 300 base with 500 for the accented words. */

.fw-medium { font-weight: 500; }


/* ---------- Buttons (exact specs from design-system board) ----------
   All variants share the 300ms ease-in-out hover → left-light blue gradient. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; border-radius: var(--r-btn); font-family: var(--font);
  white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur) ease-in-out, color var(--dur) ease-in-out,
              border-color var(--dur) ease-in-out;
}

/* BOOK A CONSULTATION — large */

.btn-primary {
  padding: 20px calc(56 * var(--u)); font-size: 18px; font-weight: 700; line-height: normal; letter-spacing: 0;
  background: var(--brand); color: var(--white); border-color: var(--brand);
}

/* BOOK A CONSULTATION — small */

.btn-primary-sm {
  padding: 12px calc(24 * var(--u)); font-size: 16px; font-weight: 700; line-height: normal; letter-spacing: -0.32px;
  background: var(--brand); color: var(--white); border-color: var(--brand);
}

/* Gradient hover as a fading overlay (opacity), not a background swap — a solid
   colour cannot interpolate into a gradient, it just blinks at the end of the
   transition. The overlay sits behind the label (negative z-index) and needs the
   button to be its own stacking context (isolation) or it would paint behind the
   button own background instead of on top of it. */

.btn-primary, .btn-primary-sm { position: relative; isolation: isolate; }

.btn-primary::before, .btn-primary-sm::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: var(--grad-hover);
  opacity: 0;
  transition: opacity var(--dur) ease-in-out;
  pointer-events: none;
}

.btn-primary:hover::before, .btn-primary.is-hover::before,
.btn-primary-sm:hover::before, .btn-primary-sm.is-hover::before { opacity: 1; }

.btn-primary:hover, .btn-primary.is-hover,
.btn-primary-sm:hover, .btn-primary-sm.is-hover { color: var(--white); }

/* DISCOVER MORE — outline */

.btn-outline {
  padding: 10px calc(32 * var(--u)); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: 0.16px;
  background: transparent; color: var(--brand); border: 1px solid var(--brand);
}

.btn-outline:hover, .btn-outline.is-hover {
  background: var(--grad-hover); color: var(--white); border-color: transparent;
}

.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn.is-disabled, .btn:disabled { opacity: .45; pointer-events: none; }


/* Carousel arrow buttons (outline → gradient on hover) */

.arrow-btn {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--brand); border-radius: var(--r-btn); color: var(--brand);
  background: transparent; cursor: pointer;
  transition: background var(--dur) ease-in-out, color var(--dur) ease-in-out, border-color var(--dur) ease-in-out;
}

.arrow-btn:hover, .arrow-btn.is-hover { background: var(--grad-hover); color: var(--white); border-color: transparent; }


.arrow-btn:disabled { opacity: .3; cursor: default; background: transparent; color: var(--brand); border-color: var(--brand); }


/* Location switcher dropdown (per-clinic accent) */
/* Control keeps its intrinsic width — the label is unscaled type, so shrinking
   the box would wrap "Auckland CBD" onto two lines below 1920. */

.loc-select { position: relative; width: 240px; font-family: var(--font); }

.loc-select__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px calc(32 * var(--u)); font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 0;
  color: var(--ink-mid); background: transparent; border: 1px solid var(--brand); border-radius: 0;
  transition: background var(--dur) ease-in-out, color var(--dur) ease-in-out;
}

/* Hover is label-only now: no gradient fill, so no solid-to-gradient blink. */
.loc-select__toggle:hover { background: transparent; color: var(--brand); }

/* The chevron is an inline SVG, not a text glyph — flex it so it centres on
   the box instead of sitting on the label baseline. */
.loc-select__chevron { display: inline-flex; align-items: center; transition: transform var(--dur) ease-in-out; }

.loc-select.is-open .loc-select__chevron { transform: rotate(180deg); }

.loc-select__menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border: 1px solid var(--brand); border-top: none;
  display: none; z-index: 20;
}

.loc-select.is-open .loc-select__menu { display: block; }

.loc-select__opt {
  display: block; width: 100%; text-align: left; padding: 12px calc(32 * var(--u));
  font-size: 16px; font-weight: 500; color: var(--ink-mid);
  transition: background var(--dur) ease-in-out, color var(--dur) ease-in-out;
}

.loc-select__opt:hover, .loc-select__opt.is-active { background: var(--grad-hover); color: var(--white); }


/* ---------- Scroll reveal ---------- */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }

.reveal.visible { opacity: 1; transform: none; }


/* ============================================================
   PAGE: Booking (node 2999:5353)
   ============================================================ */
/* Form hero on a pastel band */

/* !important: the shared content-band rule below also sets padding-inline on
   this inner, and the band wants to run edge to edge inside its own 50px margin */
.bk-hero__inner { max-width: calc(100% - 100px); margin-inline: auto; padding-inline: 0 !important; }

.bk-hero__band { position: relative; border-radius: 8px; overflow: hidden; }

.bk-hero__band::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(../images/artwork-bgs/bg-booking.svg) no-repeat center / cover; }

.bk-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: var(--col-407) calc(968 * var(--u));
  align-items: center; justify-content: space-between;
  padding: calc(36 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u)) calc(148 * var(--u)); min-height: calc(804 * var(--u));
  /* put the content on the same line as every cnt-lg section below it. The
     percentage resolves against the band, which is the viewport minus its own
     100px of margin, so cnt-lg's (100vw - 1528)/2 - 50 works out to
     50% - 764px here. Floors at 50 once the 1528 band is gone. */
  padding-left: max(50px, calc(50% - 764px)); }

.bk-hero__title { margin-top: calc(32 * var(--u)); font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.bk-hero__copy { margin-top: calc(24 * var(--u)); }

.bk-hero__content .consult-form { margin-top: calc(40 * var(--u)); }

.bk-hero__media { width: calc(968 * var(--u)); aspect-ratio: 968 / 732; border-radius: 8px; overflow: hidden; }

.bk-hero__media img { width: 100%; height: 100%; object-fit: cover; }


/* What happens at your appointment — 4 icon-text blocks */

.bk-appt { margin-top: calc(160 * var(--u)); }

.bk-appt__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)); }

.bk-appt__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.bk-appt__intro { margin-top: calc(24 * var(--u)); max-width: calc(1078 * var(--u)); }

.bk-appt__grid { margin-top: calc(64 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(88 * var(--u)); }

.appt-item__icon { width: 64px; height: 64px; }

.appt-item__copy { margin-top: calc(24 * var(--u)); }

.bk-appt__cta { margin-top: calc(64 * var(--u)); }


/* Meet the Team page — 3-col grid of team cards */

.team-page { margin-top: calc(160 * var(--u));     margin-bottom: calc(160 * var(--u));}

.team-page__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding: 0 calc(24 * var(--u)) 0 calc(196 * var(--u)); }

.team-page__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(64 * var(--u)) calc(40 * var(--u)); max-width: calc(1304 * var(--u)); }


/* Meet the Team — Details modal (node 3010:9247) */

.team-modal {
  position: fixed; inset: 24px; z-index: 1200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(80 * var(--u)) calc(40 * var(--u));
  background: linear-gradient(120deg, #ffffff 0%, #fdf8f4 45%, #e9f7fe 100%);
  opacity: 0; transition: opacity .3s ease; overflow-y: auto;
}

.team-modal.is-open { opacity: 1; }

.team-modal[hidden] { display: none; }

.team-modal__panel {
  position: relative; width: 100%; max-width: 1200px;
  display: grid; grid-template-columns: calc(408 * var(--u)) 1fr; gap: calc(48 * var(--u));
  padding: calc(60 * var(--u)) 0 calc(40 * var(--u));
  transform: translateY(12px); transition: transform .3s ease;
}

.team-modal.is-open .team-modal__panel { transform: none; }

.team-modal__close {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: var(--brand);
    cursor: pointer;
    padding: 0;
    text-align: center;
}

.team-modal__media { width: calc(408 * var(--u)); }

.team-modal__media img {
  width: 100%; height: auto; display: block; border-radius: 2px;
  aspect-ratio: 408 / 407; object-fit: cover;
}

.team-modal__body { padding-top: 8px; }

.team-modal__name { font-size: 32px; font-weight: 500; line-height: 1.15; color: var(--ink); }

.team-modal__role { margin-top: 6px; font-size: 18px; color: var(--brand); }

.team-modal__bio { margin-top: calc(28 * var(--u)); }

.team-modal__bio p { margin-bottom: 18px; }

.team-modal__bio .team-card__more { display: inline-block; margin-top: 6px; }


/* Blog page — 3-col grid of blog cards */

.blog-page { margin-top: calc(160 * var(--u)); }

.blog-page__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding: 0 calc(24 * var(--u)) 0 calc(196 * var(--u)); }

.blog-page__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(64 * var(--u)) calc(40 * var(--u)); max-width: calc(1640 * var(--u)); }

/* optional — only the related-posts use of the grid carries one */
.blog-page__heading { margin-bottom: 40px; font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }


/* Pagination — numbered boxes between two chevrons, centred under a grid */

.pagination {
  margin-top: calc(160 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 179, 240, .4);
  border-radius: var(--r-btn);
  font-size: 16px;
  line-height: 1;
  color: var(--brand);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pagination__link:hover { border-color: var(--brand); }

.pagination__link.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 36px;
  color: var(--brand);
  transition: opacity var(--dur) var(--ease);
}

.pagination__arrow:hover { opacity: .6; }

/* the chevrons stand a little further out than the number gaps */
.pagination__arrow:first-child { margin-right: 4px; }

.pagination__arrow:last-child { margin-left: 4px; }


/* Before & After page — 2-col grid of comparison cards */

.ba-page { margin-top: calc(160 * var(--u)); margin-bottom: calc(160 * var(--u)); }

.ba-page__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding: 0 calc(24 * var(--u)) 0 calc(196 * var(--u)); }

.ba-page__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(80 * var(--u)) calc(40 * var(--u)); max-width: calc(1304 * var(--u)); }

.ba-page .ba-compare { width: 100%; height: auto; aspect-ratio: 632 / 240; }

.ba-page .ba-compare img { width: 100%; height: 100%; }


/* Pricing — cost table */

.cost-table-sec { margin-top: calc(160 * var(--u)); }

.cost-table-sec__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)); }

.cost-table-sec__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); max-width: calc(1080 * var(--u)); }

.cost-table-sec__intro { margin-top: calc(24 * var(--u)); max-width: calc(1080 * var(--u)); }

.cost-table { width: 100%; border-collapse: collapse; margin-top: calc(40 * var(--u)); }

.cost-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); padding: 0 calc(24 * var(--u)) 12px; }

.cost-table td { padding: calc(24 * var(--u)); font-size: 16px; color: var(--ink); }


.cost-table tbody tr:nth-child(odd) { background: #E0F7FF; }

.cost-table-sec__note { margin-top: calc(40 * var(--u)); max-width: calc(857 * var(--u)); color: var(--ink-mid); }


/* Pricing — budget calculator wrapper */

.bc-section { margin-top: calc(160 * var(--u)); margin-bottom: calc(160 * var(--u)); }

.bc-section__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)) 35px; }

.bc-section__eyebrow { margin-bottom: calc(40 * var(--u)); }


/* ============================================================
   PAGE: Home (node 2902:1056)
   ============================================================ */
/* 02 Hero — full-bleed rounded video + dark overlay + centred content */

.home-hero__content .btn { margin-top: calc(32 * var(--u)); }


/* 03 Treatments — 3 photo cards (574 wide), no header/footer (reuses .treat-card) */

.home-treat .treat-card { height: calc(719 * var(--u)); }


/* 04 Why Choose Us — centred header + 6-feature grid (icon 64 + text) */

/* Soft brand-blue wash behind the section (Figma why-artwork.svg, 870×1247 @1920) */


/* 05 Meet the Doctors — reuses .inset-doctors (identical to inset 10) */


/* 06 Team — big brand "A" (scroll colour-cycle) + cut-out team group */


/* 07 Costs — full-bleed photo band + right white-fade panel + content */

.home-costs__content .btn { margin-top: calc(64 * var(--u)); }


/* 08 Before & Afters — centred header + 2 wipe cards + side arrows + CTA */

.home-ba .ba-card { flex: 0 0 calc(700 * var(--u)); scroll-snap-align: center; }

.home-ba .ba-compare { width: calc(700 * var(--u)); height: calc(262 * var(--u)); }

.home-ba .ba-compare img { width: calc(700 * var(--u)); height: calc(262 * var(--u)); }


/* 09 Reviews / 10 Consultation reuse inset components (.inset-reviews / .inset-consult) */

/* 06 Team — big brand "A" ... (defined above) */

/* ============================================================
   PAGE: Inset — Invisalign (node 2960:2906)
   Sections built top-to-bottom; each matched to its Figma node.
   ============================================================ */
/* 02 Hero — content left (x196, 407w) + photo right (968×608), both
   vertically centred in the 728 band. */

.inset-hero {
  background: url(../images/artwork-bgs/bg-inset-hero.svg) no-repeat center / cover;
  border-radius: 8px;
  margin: 0 50px 120px;
  padding: 60px 40px 60px 200px;
}

.inset-hero__inner {
  display: grid; grid-template-columns: calc(427 * var(--u)) calc(968 * var(--u));
  align-items: center; justify-content: space-between;
}

.inset-hero__title { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-hero__copy { margin-top: calc(24 * var(--u)); }

.inset-hero__media { width: calc(968 * var(--u)); max-width: 100%; aspect-ratio: 968 / 608; border-radius: 8px; overflow: hidden; }

.inset-hero__media img { width: 100%; height: 100%; object-fit: cover; }


/* Reusable side-by-side (image + text). Variants set columns/gap/height. */

/* Artboard: media 196..1050, text 1316..1716 — a 196px inset each side, so
   space-between lands the image/content gap on 265px (design 266). The 84px
   gutter was leaving ~474px. */
.inset-sbs__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u));
  display: grid; grid-template-columns: calc(856 * var(--u)) var(--col-407); gap: calc(264 * var(--u));
  align-items: center; justify-content: space-between; }

.inset-sbs__media { border-radius: 8px; overflow: hidden; width: calc(856 * var(--u)); aspect-ratio: 856 / 778; }

.inset-sbs__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.inset-sbs__title { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-sbs__copy { margin-top: calc(24 * var(--u)); }

.inset-sbs__copy p + p { margin-top: 22.4px; }

/* 03 What Is Invisalign — image left 856×778, text right 407 */


/* 05 How It Works — text left 407, image right 856×778 (symmetric 196) */

.sbs-gradient {
  margin: 160px 25px;
  padding: 135px 170px;
  background: url(../images/artwork-bgs/bg-sbs.svg) no-repeat center / cover;
}

/* The band carries its own 170px padding, so the inner must not add the shared
   196px on top — the 407+856 grid overflowed it and pushed the photo to within
   11px of the viewport edge. */
.sbs-gradient .inset-sbs__inner { grid-template-columns: var(--col-407) calc(856 * var(--u));
  gap: calc(265 * var(--u)); padding-inline: 0; }

.sbs-gradient .inset-sbs__media { width: calc(856 * var(--u)); aspect-ratio: 856 / 778; }


/* 17/18 Consultation — media 856×778 + content (eyebrow/heading/copy/CTA), centred */

.inset-consult { margin-top: calc(30 * var(--u)); position: relative; }

.inset-consult__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u));
  display: grid; grid-template-columns: calc(856 * var(--u)) var(--col-407); gap: calc(264 * var(--u));
  align-items: center; justify-content: space-between; min-height: calc(778 * var(--u)); }

.inset-consult--flip .inset-consult__inner { grid-template-columns: var(--col-407) calc(856 * var(--u)); }

.inset-consult--flip .inset-consult__media { order: 2; }

.inset-consult--flip .inset-consult__content { order: 1; }

.inset-consult__media { width: calc(856 * var(--u)); aspect-ratio: 856 / 778; border-radius: 8px; overflow: hidden; }

.inset-consult__media img { width: 100%; height: 100%; object-fit: cover; }

.inset-consult__heading { margin-top: calc(32 * var(--u)); font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-consult__copy { margin-top: calc(24 * var(--u)); }

.inset-consult__content .btn { margin-top: calc(47 * var(--u)); }

/* 18 inline booking form */

.consult-form { display: flex; flex-direction: column; gap: 16px; max-width: 407px; margin-top: 30px; }

.consult-form__input { width: 100%; height: 56px; padding: 16px 20px; border: 1px solid #333;
  border-radius: 4px; font-size: 16px; color: var(--ink); background: transparent;
  transition: border-color var(--dur) var(--ease); }

.consult-form__input::placeholder { color: var(--ink-mid); }

.consult-form__input:focus { outline: none; border-color: var(--brand); }

.consult-form.was-validated .consult-form__input:invalid { border-color: var(--error); }

/* Field error text (QA-060). Darker than --error so it passes 4.5:1 on white;
   tucked under its field by pulling back the form's flex gap. */
.field-error { margin: -8px 0 0; font-size: 14px; line-height: 1.4; color: #B42318; }
.bc-enquire-fields .field-error { margin-top: -6px; }
.bc-consent + .field-error { margin-top: -4px; }
.consult-form__input[aria-invalid="true"], .bc-input[aria-invalid="true"] { border-color: var(--error); }

.consult-form__submit { margin-top: 8px; align-self: flex-start; }


/* 16 Reviews — full-bleed pastel panel + eyebrow/heading/subcopy + 4 review cards + footer */

.inset-reviews { margin-top: calc(160 * var(--u)); position: relative; padding: calc(160 * var(--u)) 0; overflow: hidden; margin-bottom: calc(160 * var(--u)); }

.inset-reviews::before { content: ""; position: absolute; inset: 0px 24px; z-index: -1; border-radius: 8px;
  /* background:
    radial-gradient(90% 130% at 0% 30%, rgba(0,179,240,.16), transparent 45%),
    radial-gradient(80% 120% at 45% 0%, rgba(164,206,87,.12), transparent 50%),
    radial-gradient(90% 120% at 100% 40%, rgba(246,139,36,.10), transparent 45%),
    radial-gradient(90% 120% at 60% 100%, rgba(184,110,173,.10), transparent 55%), #fbfcfe; */
  background: url(../images/artwork-bgs/bg-reviews.svg) no-repeat center / cover; }

.inset-reviews__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-left: calc(196 * var(--u)); }

.inset-reviews__heading { margin-top: calc(32 * var(--u)); font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-reviews__subcopy { margin-top: calc(24 * var(--u)); max-width: calc(1080 * var(--u)); }

/* margin-right, not padding-right: a scroll container clips at its padding
   box, so padding let the last card show 24px past the band and into the
   white gutter instead of being cut at the band edge like the artboard. */
.inset-reviews__row { margin-top: calc(64 * var(--u)); display: flex; gap: calc(40 * var(--u)); scroll-snap-type: x proximity; margin-right: calc(24 * var(--u)); scrollbar-width: none; }

.inset-reviews__row::-webkit-scrollbar { display: none; }

.review-card { flex: 0 0 calc(408 * var(--u)); scroll-snap-align: start; background: #fff; border: 1px solid rgba(0,179,240,.4); border-radius: 8px; padding: calc(40 * var(--u)); }

.review-head { display: flex; align-items: center; gap: 8px; }

.review-head svg { flex: none; }

.review-name { font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--ink); }

.review-body { padding-left: calc(24 * var(--u)); }

.review-stars { display: flex; gap: 4px; margin-top: 0; color: #FBBC05; }

.review-quote { margin-top: 16px; font-size: 16px; line-height: 22.4px; font-weight: 400; color: var(--ink); }

.review-more { display: inline-block; margin-top: 16px; font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--ink); transition: color var(--dur) var(--ease); }

.review-more:hover { color: var(--brand); }

.inset-reviews__footer { margin-top: calc(80 * var(--u)); max-width: calc(1304 * var(--u)); display: flex; align-items: center; justify-content: space-between; }


/* 14/15 Long-Form Text — heading + 2-col intro + 3-col details + outro (body w300) */

.inset-text { margin-top: calc(160 * var(--u)); }

.inset-text__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)); }

.inset-text__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; max-width: calc(1528 * var(--u)); color: var(--ink); }

.inset-text__intro { margin-top: calc(24 * var(--u)); display: grid; grid-template-columns: calc(745 * var(--u)) calc(745 * var(--u)); gap: calc(38 * var(--u)); }

.inset-text__intro p, .inset-text__outro, .inset-text__detail p { font-size: 16px; line-height: 22.4px; font-weight: 300; letter-spacing: -0.48px; color: var(--ink); }

.inset-text__details { margin-top: calc(64 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(408 * var(--u))); gap: calc(40 * var(--u)); justify-content: start; }

.inset-text__detail h3 { font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--ink); }

.inset-text__detail p { margin-top: 16px; }

.inset-text__detail p + p { margin-top: 22.4px; }

.inset-text__outro { margin-top: calc(64 * var(--u)); max-width: calc(1416 * var(--u)); }


/* 15 Long-Form Text — Alt: full-bleed pastel panel variant */

.inset-text--alt { margin-top: calc(160 * var(--u)); position: relative; padding: calc(150 * var(--u)) 0; }

.inset-text--alt::before { content: ""; position: absolute; inset: 0 24px; z-index: -1; border-radius: 8px;
  background: radial-gradient(120% 120% at 8% 0%, rgba(0,179,240,.14), transparent 42%),
    radial-gradient(120% 120% at 100% 60%, rgba(246,139,36,.12), transparent 46%),
    radial-gradient(120% 120% at 60% 100%, rgba(184,110,173,.10), transparent 50%), #fbfcfe; }


/* 13 Before & Afters — eyebrow/heading/subcopy + 3 wipe-slider cards (right-bleed) + footer */

.inset-before-after { margin-top: calc(160 * var(--u)); position: relative; overflow-x: clip; }

/* same orange artwork as the home before/after band */
.inset-before-after::before {
  content: "";
  position: absolute;
  right: -270px;
  top: -600px;
  width: 1336px;
  height: 1247px;
  background: url("../images/artwork-bgs/artwork-orange.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
}

.inset-before-after__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-left: var(--gut); }

.inset-before-after__heading { margin-top: calc(32 * var(--u)); font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-before-after__subcopy { margin-top: calc(24 * var(--u)); max-width: calc(1528 * var(--u)); }

.inset-before-after__row { margin-top: calc(64 * var(--u)); display: flex; gap: calc(40 * var(--u)); overflow-x: auto; scroll-snap-type: x proximity; margin-right: calc(-246 * var(--u)); padding-right: calc(196 * var(--u)); scrollbar-width: none; }

.inset-before-after__row::-webkit-scrollbar { display: none; }

.ba-card { flex: 0 0 calc(632 * var(--u)); scroll-snap-align: start; }

.ba-compare { position: relative; width: calc(632 * var(--u)); height: calc(240 * var(--u)); border-radius: 8px; overflow: hidden; user-select: none; touch-action: none; }

.ba-compare img { position: absolute; top: 0; left: 0; width: calc(632 * var(--u)); height: calc(240 * var(--u)); object-fit: cover; display: block; pointer-events: none; }

.ba-before { position: absolute; top: 0; left: 0; height: calc(240 * var(--u)); width: 50%; overflow: hidden; }

.ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--brand); transform: translateX(-50%); pointer-events: none; }

.ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 26px; background: var(--brand); border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 3px; color: #fff; cursor: ew-resize; }

.ba-meta {     margin-top: 35px;
    display: flex;
    gap: calc(40 * var(--u));
    padding-left: calc(40 * var(--u)); }

.ba-meta__label { display: block; font-size: 10px; text-transform: uppercase; color: var(--ink-muted, #898989); letter-spacing: .08em; }

.ba-meta__val { display: block; margin-top: 6px; font-size: 16px; color: var(--ink); }

.inset-before-after__footer { margin-top: calc(64 * var(--u)); max-width: calc(1528 * var(--u)); display: flex; align-items: center; justify-content: space-between; }



/* 12 Blog — heading + intro + 3 blog cards + footer */

.inset-blog { margin-top: calc(160 * var(--u)); overflow: hidden; }

.inset-blog__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)); }

.inset-blog__heading { font-size: 40px; line-height: 51px; font-weight: 500; letter-spacing: -1.2px; color: var(--ink); }

.inset-blog__intro { margin-top: calc(24 * var(--u)); max-width: calc(1081 * var(--u)); }

/* Carousel: 3 cards visible + peek, arrow-scrollable */

.inset-blog__row { margin-top: calc(64 * var(--u)); display: flex; gap: calc(40 * var(--u)); overflow-x: auto; scroll-snap-type: x proximity; margin-right: calc(-196 * var(--u)); padding-right: calc(196 * var(--u)); scrollbar-width: none; }

.inset-blog__row::-webkit-scrollbar { display: none; }

.inset-blog__row .blog-card { flex: 0 0 calc(520 * var(--u)); scroll-snap-align: start; }

.blog-card__media { display: block; aspect-ratio: 520 / 313; border-radius: 4px; overflow: hidden; }

.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* the cards sit in a grid row / flex track, so they stretch to the tallest —
   the body has to take the slack or the tint stops short of the card bottom */
.blog-card { display: flex; flex-direction: column; }

.blog-card__body { flex: 1; padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(40 * var(--u)); border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(189, 238, 255, 0.06) 0%, rgba(0, 179, 240, 0.06) 100%); }

.blog-card__date { font-size: 16px; line-height: 22.4px; color: var(--ink); }

.blog-card__title { margin-top: 16px; font-size: 24px; line-height: 30.6px; font-weight: 500; letter-spacing: -0.72px; color: var(--ink); }

.blog-card__excerpt { margin-top: 16px; }

.blog-card__more { display: inline-block; margin-top: calc(32 * var(--u)); font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--ink); transition: color var(--dur) var(--ease); }

.blog-card__more:hover { color: var(--brand); }

.inset-blog__footer { margin-top: calc(72 * var(--u)); display: flex; align-items: center; justify-content: space-between; }


/* 11 Meet the Team — heading + intro + 4 cards + footer */

.inset-team { margin-top: calc(160 * var(--u)); }

.inset-team__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)); }

.inset-team__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-team__intro { margin-top: calc(24 * var(--u)); }

/* Carousel: 3 full cards + peek of the 4th, scrollable (matches Figma inset team) */

.inset-team__row { margin-top: calc(64 * var(--u)); display: flex; gap: calc(40 * var(--u)); scroll-snap-type: x proximity; margin-right: calc(-196 * var(--u)); padding-right: calc(196 * var(--u)); scrollbar-width: none; }

.inset-team__row::-webkit-scrollbar { display: none; }

.inset-team__row .team-card { flex: 0 0 calc(408 * var(--u)); scroll-snap-align: start; }

.team-card__media { aspect-ratio: 408 / 407; border-radius: 4px; overflow: hidden; }

.team-card__media img { width: 100%; height: 100%; object-fit: cover; }

.team-card { display: flex; flex-direction: column; }

.team-card__body { flex: 1; padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(40 * var(--u)); border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(189, 238, 255, 0.06) 0%, rgba(0, 179, 240, 0.06) 100%); }

.team-card__name { font-size: 24px; line-height: 30.6px; font-weight: 500; letter-spacing: -0.72px; color: var(--ink); }

.team-card__role { margin-top: 0; font-size: 16px; line-height: 20.4px; font-weight: 300; color: var(--brand); }

.team-card__bio { margin-top: calc(24 * var(--u)); }

.team-card__more { display: inline-block; margin-top: calc(32 * var(--u)); font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--ink); transition: color var(--dur) var(--ease); }

.team-card__more:hover { color: var(--brand); }

.inset-team__footer { margin-top: calc(62 * var(--u)); display: flex; align-items: center; justify-content: space-between; }


/* 10 Meet the Doctors — content left 437 @x308, photo right 632×700 */

.inset-doctors {
  margin-top: 160px;
  padding: 135px 0;
  background: url(../images/artwork-bgs/bg-doctors.svg) no-repeat;
  margin-inline: 25px;
  background-size: cover;
}

/* Same 1304 band as the home doctors section — the artboard puts this text
   column on x308 too, which is what the 1304 centred band gives. With
   437 + 632 columns that is a 235px gap. */
.inset-doctors__inner { max-width: calc(1304 * var(--u)); margin-inline: auto; padding-inline: 0;
  display: grid; grid-template-columns: var(--col-437) calc(632 * var(--u)); gap: calc(235 * var(--u));
  align-items: center; justify-content: space-between; min-height: calc(700 * var(--u)); }

.inset-doctors__heading { margin-top: calc(32 * var(--u)); font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-doctors__copy { margin-top: calc(24 * var(--u)); }

.inset-doctors__actions { margin-top: calc(64 * var(--u)); display: flex; align-items: center; gap: calc(29 * var(--u)); }

.play-video { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.32px; }

.play-video .tri { width: 8px; height: 11px; }

.inset-doctors__media { position: relative; width: calc(632 * var(--u)); aspect-ratio: 632 / 700; border-radius: 8px; overflow: hidden; }

.inset-doctors__media img { width: 100%; height: 100%; object-fit: cover; }

.inset-doctors__media .scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 49%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.28)); }


/* 09 Treatments — heading + intro + 3 photo cards + carousel footer */

.inset-ctas { margin-top: calc(160 * var(--u)); overflow: hidden; }

.inset-ctas__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)); }

.inset-ctas__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-ctas__intro { margin-top: calc(24 * var(--u)); }

/* Carousel: 3 cards visible + peek, arrow-scrollable */

.inset-ctas__row { margin-top: calc(64 * var(--u)); display: flex; gap: calc(40 * var(--u)); overflow-x: auto; scroll-snap-type: x proximity; margin-right: calc(-196 * var(--u)); padding-right: calc(196 * var(--u)); scrollbar-width: none; }

.inset-ctas__row::-webkit-scrollbar { display: none; }

.inset-ctas__row .treat-card { flex: 0 0 calc(520 * var(--u)); scroll-snap-align: start; }

.treat-card { position: relative; height: calc(719 * var(--u)); border-radius: 8px; overflow: hidden; background: var(--surface); }

.treat-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.treat-card__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 63%; border-radius: 8px;
  background: linear-gradient(193deg, rgba(247, 247, 247, 0.00) 13.71%, #F7F7F7 59.7%); }

.treat-card__body { position: absolute; left: 72px; right: 72px; bottom: 72px; }

.treat-card__title { font-size: 32px; line-height: 40.8px; font-weight: 300; letter-spacing: -0.96px; color: var(--ink); }

.treat-card__copy { margin-top: 16px; }

.treat-card__body .btn { margin-top: calc(32 * var(--u)); }

.inset-ctas__footer { margin-top: calc(64 * var(--u)); max-width: calc(1229 * var(--u)); display: flex; align-items: center; justify-content: space-between; }

.carousel-nav { display: flex; gap: 16px; }


/* 07 FAQ — heading + accordion (Q 20/28 w500, blue chevron, 64px rhythm) */

.inset-faq { margin-top: calc(160 * var(--u)); }

.inset-faq__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)); }

.inset-faq__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-faq__list { margin-top: calc(64 * var(--u)); }

.faq-item { padding: calc(64 * var(--u)) 0; border-bottom: 1px solid rgba(0, 179, 240, 0.4); }

.faq-item:first-child { padding-top: 0; }

.faq-q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: calc(24 * var(--u));
  font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); text-align: left; }

.faq-q .chev { flex: none; color: var(--brand); margin-top: 8px; transition: transform var(--dur) var(--ease); }

.faq-item.open .faq-q .chev { transform: rotate(180deg); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }

.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a__inner { overflow: hidden; }

.faq-item.open .faq-a__inner { padding-top: 16px; }


/* 08 FAQ — Alt: full-bleed pastel panel, filled chevron, blue dividers.
   NOTE: 07 & 08 are FAQ STYLE ALTERNATIVES from the design — keep one, drop the
   other before launch (do not ship the same FAQ twice on a live page). */

.inset-faq--alt { margin-top: calc(160 * var(--u)); position: relative; padding: calc(160 * var(--u)) 0; }

.inset-faq--alt::before {
  content: ""; position: absolute; inset: 0 24px; z-index: -1; border-radius: 8px;
  background:
    radial-gradient(120% 120% at 8% 0%, rgba(0,179,240,.14), transparent 42%),
    radial-gradient(120% 120% at 100% 60%, rgba(246,139,36,.12), transparent 46%),
    radial-gradient(120% 120% at 60% 100%, rgba(184,110,173,.10), transparent 50%),
    #fbfcfe;
}

.inset-faq--alt .faq-item { border-bottom-color: rgba(0,179,240,.35); }

.inset-faq--alt .faq-q .chev.tri { color: var(--brand); margin-top: 10px; }


/* 06 Video — full-bleed band poster + overlay + play → lightbox */

.inset-video { margin-top: calc(48 * var(--u)); }

.inset-video__inner { margin-inline: auto; padding-inline: calc(24 * var(--u)); }

.inset-video__block { position: relative; width: 100%; aspect-ratio: 1872 / 868; border-radius: 8px; overflow: hidden; cursor: pointer; }

.inset-video__block img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.inset-video__scrim { position: absolute; inset: 0; border-radius: 8px; opacity: 0.8;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 82.21%);
  transition: background var(--dur) var(--ease); }

.inset-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff; }

.inset-video__play .tri { width: 50px; height: 69px; display: block; transition: transform var(--dur) var(--ease); }

.inset-video__block:hover .inset-video__play .tri { transform: scale(1.08); }

.inset-video__label { font-size: 16px; line-height: 17.6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.32px; }


/* Video lightbox (shared) */

.video-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; padding: calc(24 * var(--u)); }

.video-lightbox.open { display: flex; }

.video-lightbox__frame { position: relative; width: min(calc(1100 * var(--u)), 92vw); aspect-ratio: 16/9; }

.video-lightbox__frame iframe,
.video-lightbox__frame video { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #000; }

.video-lightbox__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; color: #fff; }


/* 04 Benefits — heading + intro, 3×2 grid (cols 408, gap 152/48) */

.inset-benefits { margin-top: calc(160 * var(--u)); }

.inset-benefits__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: calc(196 * var(--u)); }

.inset-benefits__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.inset-benefits__intro { margin-top: calc(24 * var(--u)); max-width: calc(1078 * var(--u)); }

.inset-benefits__grid { margin-top: calc(64 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(408 * var(--u))); gap: calc(48 * var(--u)) calc(152 * var(--u)); }

.benefit__title { font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--brand); }

.benefit__copy { margin-top: 8px; }


/* ============================================================
   Scroll-morph brand background (the "colour transition")
   Ported from the auc-002 prototype. Four blurred triangular
   blobs (blue/green/pink/orange pastels) translate + colour-
   shift on scroll behind page content. Add <div class="bg-blobs">
   at the top of a section/page and drive it from main.js.
   ============================================================ */

.bg-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.bg-blobs .blob {
  position: absolute; width: calc(947 * var(--u)); height: calc(1554 * var(--u));
  filter: blur(298px); will-change: transform;
}

.bg-blobs .blob svg { display: block; width: 100%; height: 100%; overflow: visible; }

.bg-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* ============================================================
   Blog — Detail (article)          Figma 3031:576
   Hero blob band → article body → BACK → Related Posts.
   Consult / Find Us / footer are the shared chrome components.
   ============================================================ */

/* Hero band — 1824×447 inset 48px, four blurred triangles masked
   to the band (Figma group 3031:642, group opacity .75).          */

/* No outer margin at desktop: .bd-hero's 48px and the 308px column insets
   already land the band at x48 and the text/image at x308 (Figma 3031:152);
   the extra 50px pushed everything right (QA-042). <=1440 sets its own. */
.bd-post {
  margin: 0;
  border-radius: 8px;
}

.bd-hero { max-width: 1920px; margin-inline: auto; padding-inline: 48px; }

/* the inset-hero band artwork, behind the hero only — .bd-hero__band is
   positioned, so it paints over this without needing a z-index */
.bd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/artwork-bgs/bg-inset-hero.svg) no-repeat center / cover;
  border-radius: 8px;
  pointer-events: none;
  width: 100%;
  height: 835px;
}

.bd-post__media { max-width: 1920px; margin: 64px auto 0; padding-inline: 308px; }

.bd-post__media img { width: 100%; height: auto; display: block; border-radius: 8px; }

.bd-hero__band { position: relative; overflow: hidden; }

.bd-hero__blobs { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

.bd-blob { position: absolute; width: 923px; height: 491px; filter: blur(298px); }

.bd-blob svg { display: block; width: 100%; height: 100%; }

.bd-blob--1 { left: -338px; top: -304px; opacity: .15; }
   /* pink   #B86EAD */

.bd-blob--2 { left: 1318px; top:  181px; opacity: .10; }
   /* blue   #00B3F0 */

.bd-blob--3 { left: 1087px; top: -240px; opacity: .10; }
   /* orange #F68B24 */

.bd-blob--4 { left:  210px; top:   75px; opacity: .10; }
   /* orange #F68B24 */


.bd-hero__content { position: relative; z-index: 1; padding: 120px 48px 0 260px; }

.bd-hero__date { font-size: 16px; line-height: 22.4px; font-weight: 400; letter-spacing: -0.48px; color: var(--ink); }

.bd-hero__title { margin-top: 16px; max-width: 721px; font-size: 40px; line-height: 51px; font-weight: 500; letter-spacing: -1.2px; color: var(--ink); }

.bd-hero__standfirst { margin-top: 16px; max-width: 671px; font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.6px; color: var(--ink); }


/* Article body — 1083px measure at the 308px article margin.
   Figma renders it as one text block: paragraphs run tight and a
   blank line (one line-height) separates the groups.              */

.bd-article { max-width: 1920px; margin-inline: auto; padding-inline: 308px; margin-top: 80px; }

.bd-article__inner { max-width: 1083px; }

.bd-article p { margin: 0; font-size: 16px; line-height: 22.4px; font-weight: 400; letter-spacing: -0.48px; color: var(--ink); }

.bd-article a { color: var(--brand); text-decoration: underline; }

.bd-article a:hover { color: var(--ink); }

/* Real articles carry headings and lists; the Figma template only showed
   paragraphs, so these follow the same 1083px measure and type scale.       */

.bd-article p + p, .bd-article ul, .bd-article ol { margin-top: 16px; }

.bd-article h2 { margin: 40px 0 0; font-size: 32px; line-height: 41px; font-weight: 300; letter-spacing: -0.96px; color: var(--ink); }

.bd-article h3 { margin: 28px 0 0; font-size: 18px; line-height: 25.2px; font-weight: 500; letter-spacing: -0.54px; color: var(--ink); }

.bd-article h2 + p, .bd-article h3 + p { margin-top: 16px; }

.bd-article ul, .bd-article ol { padding-left: 22px; }

.bd-article li { font-size: 16px; line-height: 22.4px; font-weight: 400; letter-spacing: -0.48px; color: var(--ink); }

.bd-article li + li { margin-top: 8px; }

.bd-article strong { font-weight: 500; }

/* Legal pages (privacy / terms / cookies) reuse the blog-detail template.
   The source documents are numbered outlines: a top-level <ol> of bold
   section names, each holding its own <ol> of clauses.                    */

.page-legal .bd-article__inner { counter-reset: legal; }

.page-legal .bd-article ol { list-style: none; padding-left: 0; counter-reset: legal-sub; }

.page-legal .bd-article > .bd-article__inner > ol > li { counter-increment: legal; margin-top: 40px; }

.page-legal .bd-article > .bd-article__inner > ol > li > b,
.page-legal .bd-article > .bd-article__inner > ol > li > strong { display: block; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.6px; }

.page-legal .bd-article > .bd-article__inner > ol > li > b::before,
.page-legal .bd-article > .bd-article__inner > ol > li > strong::before { content: counter(legal) ". "; }

.page-legal .bd-article ol ol { margin-top: 12px; padding-left: 28px; }

.page-legal .bd-article ol ol > li { counter-increment: legal-sub; position: relative; margin-top: 10px; }

.page-legal .bd-article ol ol > li::before { content: counter(legal) "." counter(legal-sub); position: absolute; left: -28px; color: var(--ink-mid); }

.page-legal .bd-article > .bd-article__inner > ul > li { margin-top: 8px; }


/* BACK to blog */

.bd-back { max-width: 1920px; margin-inline: auto; padding-inline: 308px; margin-top: 74px; }

.bd-back__link { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; line-height: 22.4px; font-weight: 500; letter-spacing: -0.48px; color: var(--ink); transition: color var(--dur) var(--ease); }

.bd-back__link:hover { color: var(--brand); }


.page-blog-detail .inset-consult,
.page-blog .inset-consult { margin-top: 159px; }
  /* card grid rounds 599→600 */

/* ============================================================
   Dentist referral                 (referral form page)
   Wash band → the referral form on the 196px content line →
   the photo upload panel. Consult / Find Us / footer are the
   shared chrome components.
   ============================================================ */

.referral-hero {
  margin: 0 50px;
  background: url(../images/artwork-bgs/bg-inset-hero.svg) no-repeat center / cover;
  border-radius: 8px;
  padding: 120px 50px;
}

.referral-hero__title { max-width: 1100px; font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.referral-hero__standfirst { margin-top: 16px; max-width: 900px; }
.referral-hero__standfirst a { color: var(--brand); text-decoration: underline; }


.ref-form { margin-top: 100px; margin-bottom: 160px; }

.ref-form__inner { max-width: 1920px; margin-inline: auto; padding-inline: 196px; }

/* 1316 = two 642 columns plus the 32 gutter */
.ref-form__form { display: flex; flex-direction: column; gap: 60px; max-width: 1316px; }

.ref-fieldset { border: none; }

.ref-legend { margin-bottom: 20px; font-size: 16px; line-height: 22.4px; font-weight: 400; color: var(--brand); }

.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }

.ref-full { grid-column: 1 / -1; }

/* the sub-label sits on its own row inside the grid */
.ref-sublabel { grid-column: 1 / -1; margin-top: 6px; font-size: 16px; line-height: 22.4px; color: var(--brand); }

/* same hairline field as .consult-form__input, on a two-column grid */
.ref-input { width: 100%; height: 56px; padding: 16px 20px; border: 1px solid #333;
  border-radius: var(--r-btn); font-family: var(--font); font-size: 16px; color: var(--ink);
  background: transparent; transition: border-color var(--dur) var(--ease); }

.ref-input::placeholder { color: var(--ink-mid); }

.ref-input:focus { outline: none; border-color: var(--brand); }

.ref-textarea { height: 120px; padding-top: 14px; resize: vertical; }

.ref-dob { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.ref-select { padding-right: 44px; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; }

.ref-radios { display: flex; flex-direction: column; gap: 14px; }

.ref-radios--inline { flex-direction: row; gap: 40px; }

.ref-radio { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 22.4px; color: var(--ink); cursor: pointer; }

/* square brand box, not the native round radio: unchecked is a hairline,
   checked fills the box with a white gap inside the border */
.ref-radio input { flex: none; width: 16px; height: 16px; -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--brand); border-radius: 2px; background: transparent; cursor: pointer; }

.ref-radio input:checked { background: var(--brand); box-shadow: inset 0 0 0 3px #fff; }

.ref-radio input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }


/* Photo upload — a tinted panel with a drop target */

.ref-upload { padding: 50px 50px 110px; background: #E5F9FF; border-radius: 8px; }

.ref-upload__heading { font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--brand); }

.ref-upload__copy { margin-top: 12px; max-width: 640px; }

.ref-upload__drop { margin-top: 75px; display: flex; align-items: center; justify-content: center; gap: 20px; }

.ref-upload__drop.is-dragover { outline: 1px dashed var(--brand); outline-offset: 8px; }

.ref-upload__btn { cursor: pointer; }

.ref-upload__files { margin-top: 16px; text-align: center; }


.ref-form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.ref-form__legal { max-width: 320px; font-size: 14px; line-height: 21px; color: var(--ink); }

.ref-form__legal a { color: var(--brand); text-decoration: underline; }


/* ============================================================
   Reviews page                     (the carousel card on a grid)
   ============================================================ */

.reviews-page { margin-top: calc(160 * var(--u)); margin-bottom: calc(160 * var(--u)); }

.reviews-page__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding: 0 calc(24 * var(--u)) 0 calc(196 * var(--u)); }

/* 1304 = three 408 cards plus the two 40 gutters, same as the carousel */
.reviews-page__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--u)); max-width: calc(1304 * var(--u)); }


/* ============================================================
   Responsive skeleton — desktop-first (1440 / 1024 / 768 / 480)
   Section rules append below as pages are built; consolidated
   mobile carousel/card overrides live at the END of this file.
   ============================================================ */
/* ============================================================
   CONTENT BAND — every section aligns to the header gutter.
   Boxes keep their Figma widths; the slack goes to the gap
   (space-between), so left/right edges line up with the logo and the
   nav CTA at every width. The --col-* clamps live in :root.
   ============================================================ */


/* --- Home ------------------------------------------------- */

/* Why-choose stays a centred 1308px content box (not gutter-to-gutter) — the
   6-icon grid reads better constrained than stretched full width. */


/* --- Inner pages: content bands --------------------------- */

.inset-text__inner,
.inset-blog__inner,
.inset-team__inner,
.inset-ctas__inner,
.inset-faq__inner,
.inset-benefits__inner,
.bk-hero__inner           { padding-inline: var(--gut); }

/* Pricing/booking bands sit on the 196 content line with everything else on
   the page, not on the 84px header gutter — their own base rules already say
   196u, this group was overriding them. */

.team-page__inner,
.blog-page__inner,
.ba-page__inner           { padding: 0 var(--gut); }

.team-page__grid,
.blog-page__grid,
.ba-page__grid            { max-width: none; }

/* Team + blog grids at the Figma card widths (QA-045, QA-041), above the 1440
   tier: team 3 x 408 on a 1304 grid from the 196 line (Meet the Team
   3008:8668); blog 3 x 520 on a 1640 grid from x191 (Blog 3011:9525 - the
   board runs it 5px left of the 196 line and past the right one). The
   before/after grid keeps the full band pending QA-038. */
@media (min-width: 1441px) {
  .team-page__grid { max-width: calc(1304 * var(--u)); }
  .blog-page__grid { width: calc(1640 * var(--u)); max-width: none; margin-left: calc(-5 * var(--u)); }
}


/* Carousels bleed to the right gutter instead of the old 196px inset */

.inset-blog__row,
.inset-ctas__row { margin-right: calc(-112 * var(--u)); padding-right: calc(112 * var(--u)); }

/* Team is the exception: 4 x 408 cards + 3 x 40 gaps from the 196 line ends on
   1948, so the artboard clips card 4 on the frame edge. Keep the base 196 bleed
   so the row box reaches the viewport instead of stopping on the 84px gutter. */


/* ============================================================
   Budget calculator (portable TIO component, lifted from medland).
   Themed to ACO brand via --bc-* overrides.
   ============================================================ */

/* ============================================================
   REUSABLE BUDGET CALCULATOR COMPONENT
   Portable: copy .budget-calc markup + this block + the JS.
   Theme per-site by overriding the --bc-* custom properties
   on the .budget-calc element (or a wrapper).

   The --bc-* values below are the ACO theme. They used to live in a second
   .budget-calc rule ABOVE this one, where this block overrode all ten of
   them, so the calculator was still rendering in the donor site's palette —
   folded in here during the de-duplication pass. The donor defaults were
   #8CB4E8 / #F6F8FB / rgba(17,25,33,.12) / 4px / Manrope.
   ============================================================ */


.budget-calc {
  --bc-accent: var(--brand);
  --bc-accent-soft: rgba(0, 179, 240, .12);
  --bc-ink: var(--ink);
  --bc-muted: var(--ink-mid);
  --bc-surface: #fff;
  --bc-panel: #f4fbff;
  --bc-border: #57D4FF;
  --bc-radius: 8px;
  --bc-font: var(--font);
  --bc-font-head: var(--font);

  font-family: var(--bc-font);
  color: var(--bc-ink);
}


.budget-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 94px;
  align-items: center;
}


/* Inputs */

/* no card around the inputs on the artboard — the labels sit straight on the
   section's content line, same as the heading above them */
.budget-calc-form {
  display: flex;
  flex-direction: column;
  gap: 60px;
}


.bc-field {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 36px;
  row-gap: 14px;
  align-items: center;
}

.bc-label,
.bc-label-row,
.bc-toggle { grid-column: 1 / -1; }



.bc-label {
  font-family: var(--bc-font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bc-accent);
}


.bc-toggle {
  display: inline-flex;
  gap: 30px;
  width: fit-content;
}


.bc-toggle-btn {
  border: 1px solid var(--brand);
  background: var(--bc-surface);
  font-family: var(--bc-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--bc-muted);
  padding: 15px 30px 12px;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-transform: uppercase;
}


.bc-toggle-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}


.bc-toggle-btn.active {
  background: var(--bc-accent);
  border-color: var(--bc-accent);
  color: #fff;
}


.bc-value {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  /* the value box keeps the ink hairline, same as .consult-form__input */
  border: 1px solid #333;
  border-radius: var(--r-btn);
  background: var(--bc-surface);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--bc-ink);
}


.bc-prefix,
.bc-icon,
.bc-suffix {
  font-size: 16px;
  color: var(--bc-muted);
}


.bc-suffix[hidden],
.bc-prefix[hidden] { display: none; }


/* Label row with inline $/% toggle */

.bc-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}


.bc-dep-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--bc-panel);
  border-radius: 999px;
}


.bc-dep-btn {
  border: none;
  background: transparent;
  font-family: var(--bc-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-muted);
  width: 30px;
  height: 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}


.bc-dep-btn.active {
  background: var(--bc-accent);
  color: #fff;
}


.bc-slider {
  grid-column: 2;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  border-radius: 999px;
  background: var(--brand);
  outline: none;
  cursor: pointer;
}


.bc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bc-accent);
  border: none;
  cursor: pointer;
}


.bc-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bc-accent);
  border: none;
  cursor: pointer;
}


/* Results panel */

.budget-calc-results {
  border: 1px solid var(--bc-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bc-surface);
}


.bc-tabs {
  display: flex;
  border-bottom: 1px solid var(--bc-border);
}


.bc-tab {
  flex: none;
  border: none;
  font-family: var(--bc-font-head);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  padding: 32px 33px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}


.bc-tab.active {
  background: var(--bc-surface);
  color: var(--bc-ink);
  box-shadow: inset 0 -2px 0 var(--bc-accent);
}


.bc-panel {
  padding: 45px 50px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}


.bc-panel[hidden] {
  display: none;
}


/* Options */

.bc-option {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  gap: 0;
  border: 1px solid #EAEAEC;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bc-surface);
}

.bc-option:nth-child(3) { grid-column: 1 / -1; }

/* the first option is the recommended one — solid accent head */
.bc-option:first-child { border-color: var(--bc-accent); }

.bc-option:first-child .bc-option-label,
.bc-option:first-child .bc-option-desc { background: var(--bc-accent); color: #fff; }

.bc-option:first-child .bc-option-desc strong { color: #fff; }





.bc-option-label {
  grid-row: 1;
  grid-column: 1;
  padding: 28px 30px 0;
  background: #EAEAEC;
  font-family: var(--bc-font-head);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
}


.bc-option-amount {
  grid-row: 3;
  grid-column: 1;
  padding: 30px 30px 0;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--bc-ink);
}


.bc-option-desc {
  grid-row: 2;
  grid-column: 1;
  padding: 4px 30px 38px;
  background: #EAEAEC;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  text-transform: uppercase;
}


.bc-option-desc strong {
  font-weight: 600;
  color: var(--bc-ink);
}


.bc-option-cta {
  grid-row: 4;
  grid-column: 1;
  padding: 38px 30px 30px;
  justify-self: start;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--bc-font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bc-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}


.bc-option-cta:hover {
  color: var(--bc-ink);
}


.bc-option-cta .arrow {
  transition: transform 0.2s;
}


.bc-option-cta:hover .arrow {
  transform: translateX(4px);
}


.bc-options-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}


.bc-options-view[hidden] { display: none; }


/* Enquiry form (revealed when an option CTA is clicked) */

.bc-enquire {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.bc-enquire[hidden] { display: none; }


.bc-enquire-back {
  align-self: flex-start;
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bc-font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bc-muted);
  cursor: pointer;
  transition: color 0.2s;
}


.bc-enquire-back:hover { color: var(--bc-accent); }


.bc-enquire-intro {
  font-weight: 300;
  font-size: 18px;
  line-height: 150%;
  color: var(--bc-muted);
}


.bc-enquire-intro strong {
  font-weight: 600;
  color: var(--bc-ink);
}


.bc-enquire-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.bc-input {
  font-family: var(--bc-font);
  font-size: 16px;
  font-weight: 300;
  color: var(--bc-ink);
  padding: 14px 16px;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  background: var(--bc-surface);
  outline: none;
  transition: border-color 0.2s;
}


.bc-input:focus { border-color: var(--bc-accent); }


.bc-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 300;
  font-size: 13px;
  line-height: 150%;
  color: var(--bc-muted);
  cursor: pointer;
}


.bc-consent input {
  margin-top: 3px;
  accent-color: var(--bc-accent);
  flex-shrink: 0;
}


.bc-enquire-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: var(--bc-accent);
  color: #fff;
  font-family: var(--bc-font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.2s;
}


.bc-enquire-submit:hover { filter: brightness(0.95); }


.bc-enquire-thanks {
  font-weight: 500;
  font-size: 15px;
  line-height: 150%;
  color: var(--bc-ink);
}


.bc-enquire-thanks[hidden] { display: none; }


/* Installments */

.bc-installments {
  list-style: none;
  display: flex;
  flex-direction: column;
}


.bc-installments li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bc-border);
  font-weight: 300;
  font-size: 16px;
  color: var(--bc-muted);
}


.bc-installments li span:last-child {
  font-weight: 500;
  color: var(--bc-ink);
}


.bc-installments-note {
  font-weight: 300;
  font-size: 14px;
  line-height: 160%;
  color: var(--bc-muted);
}


/* Amortization schedule table */

.bc-schedule-wrap {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
}


.bc-schedule {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}


.bc-schedule th,
.bc-schedule td {
  padding: 12px 16px;
  text-align: right;
  border-bottom: 1px solid var(--bc-border);
  white-space: nowrap;
}


.bc-schedule th:first-child,
.bc-schedule td:first-child { text-align: left; }


.bc-schedule thead th {
  position: sticky;
  top: 0;
  background: var(--bc-panel);
  font-family: var(--bc-font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bc-muted);
}


.bc-schedule tbody td {
  font-weight: 300;
  color: var(--bc-ink);
}


.bc-schedule tbody tr:last-child td { border-bottom: none; }


/* Graph (SVG cumulative-paid line) */

.bc-graph {
  width: 100%;
}


.bc-graph svg { width: 100%; height: auto; display: block; }


.bc-graph-line {
  fill: none;
  stroke: var(--bc-accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}


.bc-graph-area { fill: var(--bc-accent-soft); }


.bc-graph-grid {
  stroke: var(--bc-border);
  stroke-width: 1;
}


.bc-graph-axis {
  font-family: var(--bc-font);
  font-size: 11px;
  fill: var(--bc-muted);
}


.bc-graph-note {
  font-weight: 300;
  font-size: 14px;
  line-height: 160%;
  color: var(--bc-muted);
}


/* Utility, last so it beats any component margin it is dropped on. */
.mb-0 { margin-bottom: 0; }


/* ============================================================
   RESPONSIVE OVERRIDES — one block per breakpoint, widest first, so the
   cascade reads top to bottom. Keep this the tail of the file: a top-level
   rule added below a block would silently beat it inside that breakpoint.
   ============================================================ */

@media (max-width: 1919.98px) {
/* Below the 1920 design canvas everything scales down proportionally.
   At >=1920 --u stays exactly 1px, so the pixel-perfect build is untouched. */
 :root { --u: calc(100vw / 1920); }
}

@media (max-width: 1440px) {
/* The Figma gaps were sized for the old 196/308px insets. With the columns
   now pinned to the gutters, space-between owns the spacing — an explicit
   gap on top of it just pushes the right column past the edge. */
 :root { --gutter: 64px; }

  /* Treatment cards: taller scrim and a tighter body inset once the 1920
     canvas stops scaling the card down proportionally. */

  .treat-card__scrim { height: 80%; }

  .treat-card__body { left: 30px; right: 72px; bottom: 50px; }

  /* Both bands carry fixed px insets, so below 1920 they drift off the 25px
     line that cnt-lg puts every other section on — and the gradient band
     (25 + 170 + 1046 columns + 170 + 25) overflowed the viewport by 21px. */
  .inset-hero { margin: 0 25px 120px; padding: 60px 74px; }

  .inset-hero__inner { grid-template-columns: calc(526 * var(--u)) calc(926 * var(--u)); }

  /* below 1440 the page drops to a 25px gutter and the 1528 band is gone, so
     the hero band tightens to a 24px margin and keeps its own inset */
  .bk-hero__inner { max-width: calc(100% - 48px); }

  .bk-hero__grid { padding-left: calc(50 * var(--u)); }

  .sbs-gradient { margin: 120px 25px; padding: 100px 74px; }

  .sbs-gradient .inset-sbs__inner { gap: calc(200 * var(--u)); }

  .inset-blog__row,
  .inset-team__row,
  .inset-ctas__row,
  .inset-before-after__row { margin-right: 0; padding-right: 25px; }

  /* the 196px line is a 1920 measurement — below that these two bands come in
     to 100px so they sit closer to the 25px line every other section uses */
  .inset-reviews__inner { padding-left: 100px; }

  .inset-consult__inner { padding-inline: 100px;     gap: calc(163 * var(--u));}

  .inset-text--alt,
  .inset-faq--alt { padding: calc(120 * var(--u)) 74px; }

  /* pricing/booking bands join them on the 100 line — 196u scales to 147 here */
  .bk-appt__inner,
  .cost-table-sec__inner { padding-inline: 100px;  }

  /* the calculator band runs closer to the right edge, same as at 1920 */
  .bc-section__inner { padding-inline: 100px 26px; }

  /* the 235px Figma gap was a 1920 measurement; at 1440 the 437 + 632 columns
     no longer leave room for it inside the 1304 band */
  .inset-doctors__inner { gap: 100px; max-width: calc(1400 * var(--u)); }

/* ============================================================
   Blog — Detail: responsive.  No mobile artboard exists for this
   page in Figma, so this follows the conventions the other inner
   pages were signed off with (24px margins, 26/33 headings,
   72px section rhythm, single-column cards).
   ============================================================ */

  /* every column on the post lines up 100px in from the page edge: the post
     band already eats 24, so each inner inset is the remaining 76 */

  .bd-post { margin: 0 24px; border-radius: 8px; }

  .bd-article, .bd-back, .bd-post__media { padding-inline: 76px; }

  .bd-hero { padding-inline: 0; }

  .bd-hero__content { padding-inline: 76px; }

  .page-blog-detail .blog-page__inner { padding-inline: 100px; }

  .ref-form { margin-top: 80px; }

  .referral-hero { padding: 80px 50px; margin: 0 24px; }

  .ref-form__inner { padding-inline: 100px; }

  .reviews-page__inner { padding-left: 100px; }
}

@media (max-width: 1024px) {
 :root { --gutter: 40px; }

/* ============================================================
   MOBILE / TABLET (≤1024) — matches the 390 mobile artboards.
   Single-column stacks, 24px side margins, 26px section headings.
   ============================================================ */

  /* ---- Global section rhythm ---- */
.inset-hero__inner, .inset-sbs__inner, .inset-benefits__inner, .inset-faq__inner, .inset-ctas__inner, .inset-doctors__inner, .inset-team__inner, .inset-blog__inner, .inset-reviews__inner, .inset-consult__inner, .inset-text__inner, .inset-before-after__inner {
    display: block; grid-template-columns: none !important; gap: 0;
    padding-left: 24px !important; padding-right: 24px !important; max-width: 100%; min-height: 0;
  }

  h1, h2, h3 { line-height: 1.2; }
.inset-hero__title, .inset-sbs__title, .inset-benefits__heading, .inset-faq__heading, .inset-ctas__heading, .inset-doctors__heading, .inset-team__heading, .inset-blog__heading, .inset-reviews__heading, .inset-consult__heading, .inset-text__heading, .inset-before-after__heading {
    font-size: 26px; line-height: 33px; letter-spacing: -0.78px;
  }

  /* Inter-section spacing → uniform mobile gap */
.inset-sbs, .sbs-gradient, .inset-benefits, .inset-video, .inset-faq, .inset-faq--alt, .inset-ctas, .inset-doctors, .inset-team, .inset-blog, .inset-before-after, .inset-text, .inset-text--alt, .inset-reviews, .inset-consult { margin-top: 65px; }

  /* ---- Hero (inset): stack text then image ---- */

  /* artboard: 22px from the title box to the copy (the scaled 24u gave 5px),
     36px from the copy to the photo */
  .inset-hero__inner { display: flex; flex-direction: column; gap: 36px; }

  .inset-hero__copy { margin-top: 22px; }

  .inset-hero__content { order: 1; }

  /* Home hero: shorter band, content flows */

  /* ---- Side-by-side: image on top, full width ---- */

  .inset-sbs__media, .inset-consult__media, .inset-doctors__media, .inset-hero__media { width: 100% !important; aspect-ratio: 342/311; }

  /* the hero photo is full-bleed on the artboard; the 24px inset it inherits
     comes from the shared __inner padding, so it is cancelled here. Declared
     after the shared rule above, which also carries !important on width. */
  .inset-hero__media { width: calc(100% + 48px) !important; max-width: none; margin-inline: -24px; order: 2; }

  /* split out so each band can be tuned on its own */
  .inset-consult__content { margin-top: 34px; margin-bottom: 40px; }

  .inset-doctors__content { margin-top: 34px; margin-bottom: 40px; }

  .inset-consult--flip .inset-consult__media { order: 0; }

  /* photo on top in both sbs variants. The shared rule above makes the inner
     display: block, where order is inert — the gradient band lists its content
     before the media, so it needs a flex context to be reordered. */
  .inset-sbs__inner { display: flex; flex-direction: column; }

  .inset-sbs__media { order: 0; }

  .inset-sbs__content { order: 1; margin-top: 34px; margin-bottom: 40px; }

  .inset-sbs__copy { margin-top: 16px; }

  /* the gradient band leads with its eyebrow, which already carries the gap */
  .sbs-gradient .inset-sbs__content { margin-top: 0; }

  .sbs-gradient .inset-sbs__inner { gap: calc(200 * var(--u)); }

  /* Full-bleed on mobile like every other band — the desktop 50/170px side
     padding left the hero content 122px wide and collapsed the gradient
     band content box to 0. The 24px inset comes from __inner. */
  .inset-hero { margin: 0; padding: 48px 0 0;
    background: url(../images/artwork-bgs/bg-inset-hero-mob.svg) no-repeat center / cover; }

  .sbs-gradient { margin: 65px 0; padding: 25px 0;
    background: url(../images/artwork-bgs/bg-sbs-mob.svg) no-repeat center / cover; }

  /* the band goes full-bleed on mobile and drops to a 30px vertical inset —
     the 135px desktop padding left the content 55px wide. Deliberately not
     re-declaring background here: the shorthand would reset the base rule's
     background-size: cover back to auto. */
  .inset-doctors { padding: 30px 0 60px; margin-inline: 0; }

  .inset-doctors__actions { flex-wrap: wrap; gap: 20px; }

  /* ---- Grids → single column ---- */

  .inset-benefits__grid, .inset-text__intro, .inset-text__details { display: block; }
.inset-benefits__grid .benefit, .inset-text__detail { margin-top: 32px; }

  /* artwork-blue.svg / artwork-orange.svg are fixed 870px desktop-canvas
     background pieces — at mobile widths they're wider than the viewport,
     so they force horizontal scroll. Hide below the 1024 breakpoint until
     there's a mobile crop. */

  /* Section intros: the 1078-1528u caps are 1920 measurements and collapse to
     ~220px here, so the copy wrapped at half the column. Artboard (treatments,
     mobile): 22px from the heading box to the intro, 39px from the intro to
     the cards; the scaled 24u/64u gave 5px and 13px. */
  .inset-ctas__intro,
  .inset-team__intro,
  .inset-blog__intro,
  .inset-benefits__intro,
  .inset-before-after__subcopy,
  .bk-appt__intro,
  .cost-table-sec__intro { margin-top: 20px; max-width: none; }

  .inset-ctas__row,
  .inset-team__row,
  .inset-blog__row,
  .inset-before-after__row,
  .inset-benefits__grid { margin-top: 40px; }

  .inset-text__outro { margin-top: calc(112 * var(--u)); max-width: none; }

  /* Inner-page CTAs: one card per view in a snap slider (the arrows in the
     footer already drive it — main.js picks the row up from TRACK_SEL). The
     24px gutter comes from __inner, so the row itself carries no padding and
     needs no scroll-padding — the 25px right padding from the 1440 block would
     otherwise leave a gap past the last card. */
  .inset-ctas__row {
    display: flex !important; flex-direction: row; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-right: 0; padding-right: 0; scrollbar-width: none;
  }

  .inset-ctas__row::-webkit-scrollbar { display: none; }

  .inset-ctas .treat-card { flex: 0 0 342px; scroll-snap-align: start; }

  /* Home treatments stay stacked full-width */
  .home-treat .treat-card, .inset-ctas .treat-card { aspect-ratio: 342/430; height: auto; }

  .home-treat .treat-card { flex: none; width: 100%; }

  .treat-card__title { font-size: 22px; line-height: 30.8px; }

  .treat-card__copy { margin-top: 8px; margin-bottom: 17px; }

  .btn-outline { padding: 11px 31px; font-size: 14px; }

  /* Team + Blog: horizontal scroll */

  .inset-team__row, .inset-blog__row { display: flex !important; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; margin-right: 0; padding-right: 0; scrollbar-width: none; }

  .inset-team__row::-webkit-scrollbar, .inset-blog__row::-webkit-scrollbar { display: none; }

  /* same as the team card: fill the gutter and keep the real body padding —
     the calc(N * var(--u)) values collapse to 6-8px at this width */
  .inset-blog__row .blog-card { flex: 0 0 342px; scroll-snap-align: start; }

  .blog-card__body { padding: 32px 32px 40px; }

  .blog-card__more { margin-top: 32px; }

  /* artboard: the team card fills the gutter (24..366) and its body keeps the
     real 32/40 padding — the calc(N * var(--u)) values collapse to 6-8px here */
  .inset-team__row .team-card { flex: 0 0 342px; scroll-snap-align: start; }

  .team-card__body { padding: 32px 32px 40px; }

  .team-card__bio { margin-top: 24px; }

  .team-card__more { margin-top: 32px; }

  .inset-ctas__footer, .inset-team__footer, .inset-blog__footer { max-width: 100%; margin-top: 32px; }

  /* Video / FAQ / panels full width */

  .inset-video__inner, .inset-faq--alt::before, .inset-reviews::before, .inset-text--alt::before { inset: 0; }

  /* artboard: a 342 square on the 24px gutter — the scaled calc(24 * var(--u))
     inset was 5px and the 1872/868 desktop ratio made it a 176px letterbox */
  .inset-video__inner { padding-inline: 24px; }

  .inset-video__block { aspect-ratio: 1; }

  .inset-reviews::before { background: url(../images/artwork-bgs/bg-reviews-mob.svg) no-repeat center / cover; }

  /* split out so each band can be tuned on its own; margin-top still comes
     from the shared .inset-* rhythm rule above (65px) */
  .faq-item { padding: calc(140 * var(--u)) 0; }

  .faq-q { font-size: 18px; }

  .inset-faq--alt { padding: 65px 0; }

  .inset-text--alt { padding: 65px 0; }

  .inset-reviews { padding: 65px 0; margin-bottom: 65px; }

  .eyebrow { margin-bottom: 20px; }

  .home-costs__content .btn,
  .inset-sbs__content .btn,
  .inset-consult__content .btn,
  .inset-doctors__actions { margin-top: 34px; }
  .inset-consult__content .btn {
    width: 100%;
  }

  /* Before & Afters: stack cards, full width */
  /* the orange artwork is a fixed 1336px desktop piece — no mobile crop */
  .inset-before-after::before { display: none; }

  /* one card per view. The row is the scroll container AND carries the 24px
     gutter, so it needs scroll-padding to match — otherwise card 2 snaps to
     the padding-box edge at x0. The gap has to equal that gutter too: the row
     clips on its padding box (0..390), so a 16px gap left 8px of card 2
     peeking past the right edge. */
.inset-before-after__row {
    flex-direction: row; align-items: stretch; gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
    padding-inline: 24px; margin-right: 0; scrollbar-width: none;
  }

  .inset-before-after__row::-webkit-scrollbar { display: none; }

  .inset-before-after .ba-card { flex: 0 0 342px; scroll-snap-align: start; }

  /* artboard stacks the arrows above the button, both on the left edge */
  .inset-before-after__footer {
    flex-direction: column-reverse; align-items: flex-start;
    gap: 24px; margin-top: 32px; max-width: 100%; padding-inline: 24px;
  }

  /* artboard: the card is 342 x 130 on mobile -- the photo aspect (632/240),
     not the 342/240 box the desktop card uses */
  .ba-compare, .home-ba .ba-compare { width: 100% !important; height: auto !important; aspect-ratio: 342/130; }

  .ba-compare img, .home-ba .ba-compare img { width: 100% !important; height: 100% !important; }

  .inset-before-after__inner { padding-inline: 0 !important; }

  /* The desktop max-width (1030/1528px @1920) shrinks with --u at mobile
     widths, but the heading's font-size doesn't scale down with it — so the
     box got too narrow for even one word and overflowed past the edges.
     Drop the cap so the text uses the full 24px-inset width, same as the
     mobile header's own gutter. */
.inset-before-after__header { padding-inline: 24px; max-width: 100%; }

  /* Reviews: horizontal scroll cards */

  .inset-reviews__row { padding-inline: 0px; margin-right: 0;      gap: calc(70 * var(--u));}

  .review-card { flex: 0 0 300px; padding: 30px; }

  .inset-reviews__footer { max-width: 100%; margin-top: 40px;}

  .inset-reviews__subcopy { margin-top: 20px; max-width: none; margin-bottom: 30px; }

  /* Consult form full width */

  .consult-form { max-width: 100%; margin-top: calc(120 * var(--u)); }

  .consult-form__submit { margin-top: 30px; width: 100%; }

  /* ---- Home hero: full-bleed media, content bottom-centred, full-width CTA ---- */

  .home-hero__content .btn { width: 100%; }

  /* ---- Home Team: fluid brand-A + group, no overflow ---- */

  /* ---- Home Costs: stack (image top, content below); no side panel ---- */

  /* ---- Home Why: centred header stays; grid single column ---- */

  /* ---- Meet the Team page grid → single column ---- */

  .team-page__inner { padding-inline: 24px; }

  .team-page__grid { grid-template-columns: 1fr; gap: 40px; }

  /* ---- Team details modal → stacked ---- */

  .team-modal { padding: 44px 20px 40px; }

  .team-modal__panel { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; }

  .team-modal__media { width: 100%; }

  .team-modal__close { top: 16px; right: 10px; }

  .team-modal__name { font-size: 26px; }

  /* ---- Blog page grid → single column ---- */

  .blog-page__inner { padding-inline: 24px; }

  .blog-page__grid { grid-template-columns: 1fr; gap: 40px; }

  .pagination { margin-top: 70px; gap: 12px; }

  /* ---- Before & After page grid → single column ---- */

  .ba-page__inner { padding-inline: 24px; }

  .ba-page__grid { grid-template-columns: 1fr; gap: 40px; }

  /* ---- Pricing: cost table + calculator ---- */

  .cost-table-sec__inner, .bc-section__inner { padding-inline: 24px; }

  .cost-table-sec__heading, .bc-section__eyebrow { font-size: 26px; line-height: 33px; letter-spacing: -0.78px; }

  .cost-table-sec__heading { max-width: none; }

  .cost-table-sec__note { max-width: none; }

  .budget-calc { max-width: 100%; }

  .budget-calc-grid { grid-template-columns: 1fr !important; gap: 40px; }

  .budget-calc-form, .budget-calc-results, .bc-panel { min-width: 0; }

  .bc-options, .bc-option { grid-template-columns: 1fr !important; }

  /* the desktop field row (210px box + slider) and the two-up cards stack —
     at 390 they left the slider 40px wide and the cards 130px */
  .budget-calc-form { gap: 30px; }

  .bc-field { grid-template-columns: 1fr; row-gap: 20px; margin-bottom: 20px; }

  /* three 16px uppercase buttons no longer fit one row at 390 */
  .bc-toggle { flex-wrap: wrap; }

  .bc-value, .bc-slider { grid-column: 1; }

  .bc-options-view { grid-template-columns: 1fr; }

  .bc-option:nth-child(3) { grid-column: 1; }

  .bc-tabs { flex-wrap: wrap; }

  .cost-table { margin-top: 30px; }

  .cost-table th { padding: 0 12px 12px; }

  .cost-table td { padding: 16px 12px; }

  /* ---- Booking: form-hero stacks; appointment grid single column ---- */

  /* the desktop rule holds the band inside a 50px margin with !important on
     padding; on mobile that leaves a 290px band, so both come back here */
  .bk-hero__inner { max-width: 100%; padding-inline: 24px !important; }

  .bk-hero__band::before { border-radius: 8px;
    background: url(../images/artwork-bgs/bg-booking-mob.svg) no-repeat center / cover; }

  .bk-hero__grid { display: flex; flex-direction: column; gap: 32px; padding: 45px 24px 0; min-height: 0; }

  /* the 24u/40u rhythm collapses to 5-8px here. Artboard: ~30px from the
     eyebrow to the title, ~16px title to copy, ~24px copy to the first field
     (the last one needs the same specificity as the desktop bk-hero rule). */
  .bk-hero__title { margin-top: 30px; }

  .bk-hero__copy { margin-top: 16px; }

  .bk-hero__content .consult-form { margin-top: calc(120 * var(--u)); }

  /* artboard: the photo runs edge to edge while the fields stay on the 24px
     gutter, so it cancels the grid padding it sits in */
  .bk-hero__media { width: calc(100% + 48px) !important; max-width: none; margin-inline: -24px;
    margin-top: 30px; order: 2; aspect-ratio: 342/300; border-radius: 0; }

  .bk-hero__content { order: 1; }

  .bk-hero__title, .bk-appt__heading { font-size: 26px; line-height: 33px; letter-spacing: -0.78px; }

  .bk-appt { margin-top: 65px; margin-bottom: 30px; }

  .bk-appt__inner { padding-inline: 24px; }

  .bk-appt__grid { display: block; }

  .bk-appt__grid .appt-item { margin-top: 40px; }

  .appt-item__copy { margin-top: calc(124 * var(--u)); }

  .bk-appt__cta { width: 100%; text-align: center; margin-top: 43px; }

/* ---- Costs page responsive ---- */

  .cost-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }

  .cost-intro-title,
  .cost-table-title,
  .cost-calc-heading { font-size: 34px; }

  /* the post band goes full-bleed here; the 50px margin left it 290px wide
     and the featured image kept the desktop 308px inset */
  .bd-post { margin: 0; border-radius: 0; }

  .bd-post__media { margin-top: 0px; padding-inline: 24px; }

  /* the referral band goes full-bleed and the form drops to one column */
  .referral-hero { margin: 0; padding: 48px 0px; border-radius: 0;
    background-image: url(../images/artwork-bgs/bg-inset-hero-mob.svg); }

  .referral-hero__title { font-size: 26px; line-height: 33px; letter-spacing: -0.78px; }

  .ref-form { margin-top: 60px; margin-bottom: 75px; }

  .ref-form__inner { padding-inline: 24px; }

  .ref-form__form { gap: 40px; }

  .ref-grid { grid-template-columns: 1fr; }

  .ref-dob { gap: 12px; }

  .ref-upload { padding: 44px 24px; }

  .ref-upload__drop { margin-top: 50px; flex-direction: column; gap: 16px; }

  .reviews-page { margin-top: 65px; margin-bottom: 85px; }

  .reviews-page__inner { padding-inline: 24px; }

  .reviews-page__grid { grid-template-columns: 1fr; gap: 24px; max-width: 100%; }

  .bd-hero { padding-inline: 0; }

  .bd-hero::before { background-image: url(../images/artwork-bgs/bg-inset-hero-mob.svg); border-radius: 0; }

  .bd-hero__band { height: auto; }

  .bd-hero__content { padding: 56px 24px; }

  .bd-hero__title { margin-top: 12px; max-width: 100%; font-size: 26px; line-height: 33px; letter-spacing: -0.78px; }

  .bd-hero__standfirst { margin-top: 16px; max-width: 100%; font-size: 18px; line-height: 25.2px; letter-spacing: -0.54px; }

  /* Blobs: keep the wash, re-anchor to the narrower band */

  .bd-blob { width: 130%; height: 70%; filter: blur(120px); }

  .bd-blob--1 { left: -55%; top: -30%; }

  .bd-blob--2 { left:  40%; top:  45%; }

  .bd-blob--3 { left:  35%; top: -25%; }

  .bd-blob--4 { left: -10%; top:  20%; }

  .bd-article { margin-top: 48px; padding-inline: 24px; }

  .bd-article h2 { margin-top: 32px; font-size: 26px; line-height: 33px; letter-spacing: -0.78px; }

  .bd-article__inner { max-width: 100%; }

  .bd-back { margin-top: 48px; padding-inline: 24px; }

  .blog-page__heading { margin-bottom: 32px; font-size: 26px; line-height: 33px; letter-spacing: -0.78px; }

  .page-blog-detail .blog-page { margin-top: 65px; }

  .page-blog-detail .inset-consult,
  .page-blog .inset-consult { margin-top: 65px; }
}

@media (max-width: 768px) {
 :root { --gutter: 24px; --side: 16px; }

  /* phone: the hero band runs edge to edge. !important beats the 24px gutter
     the 1024 block puts back on this inner. */
  .bk-hero__inner { max-width: 100%; padding-inline: 0 !important; }

  .cost-intro { margin-top: 72px; gap: 40px; }

  .cost-table-section { margin-top: 80px; padding: 72px 0; }

  .cost-calc-section { margin-top: 80px; }

  .cost-intro-title,
  .cost-table-title,
  .cost-calc-heading { font-size: 28px; }

  .cost-intro-text,
  .cost-table-text { font-size: 16px; }

  /* The donor site stacked this into cards below 480 (on --blue / --radius /
     --text, tokens this build does not have). The artboard keeps the two-column
     table all the way down, so the stack is gone. */

  .bc-panel { padding: 28px; }
}

@media (max-width: 767px) {
  /* phone-only artwork for the doctors band. background-size is re-stated
     because the background shorthand above it resets it to auto. */
  .inset-doctors {
    padding: 30px 0 60px;
    margin-inline: 0;
    background: url(../images/artwork-bgs/bg-doctors-mob.svg) no-repeat;
    background-size: cover;
  }
}

@media (max-width: calc(768 * var(--u))) {
 .br-m { display: inline; }
}

@media (max-width: 480px) {
  .cost-feature-grid { grid-template-columns: 1fr; }

  .bc-schedule th,
  .bc-schedule td { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
/* ---------- Reduced motion (WCAG 2.3.3) ---------- */

  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* QA-005: the blog grid hides off-page cards with the `hidden` attribute, but
   `.blog-card { display: flex }` out-ranks the browser's `[hidden]` rule. */
.blog-card[hidden] { display: none; }

/* Visually hidden, still announced by screen readers (QA-057). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}