/* ESGNPO hygiene template · base styles (design system v2, 15 Oct 2026).
 *
 * Never edited per client. Client colours, font and corners arrive only through brand.css, which
 * overrides the brand inputs in §1. Everything else is built from the tokens below:
 *   spacing   8-point scale (--s-*), one section padding, one grid gap, one wide gap
 *   type      7 fluid sizes, phone (390) → desktop (1440), no breakpoint jumps
 *   shape     pill buttons (2 sizes), one card radius, one image radius
 *   layout    one 1200px container, one section-header component (.esgnpo-sh)
 * Structural breakpoints: desktop >= 1024, tablet 768–1023, phone < 768. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ═════════ 1. Tokens ═════════ */
.esgnpo-lp {
  /* Brand inputs (brand.css overrides these; defaults = Whitefield monochrome) */
  --brand-dark: #000000;
  --brand-light: #FAF9F7;

  /* Colour roles (03 - Brand tokens §2) */
  --c-band: var(--brand-dark);
  --c-band-2: #1C1C1C;
  --c-band-2: color-mix(in srgb, var(--c-band) 89%, #fff);
  --c-band-3: #2D2C2C;
  --c-band-3: color-mix(in srgb, var(--c-band) 82%, #fff);
  --c-card-on-dark: rgb(255 255 255 / .09);
  --c-surface: #fff;
  --c-surface-soft: var(--brand-light);
  --c-band-light: #F0EEEC;
  --c-band-light: color-mix(in srgb, var(--brand-light) 96%, #000);
  --c-hero-overlay: rgb(0 0 0 / .72);
  --c-hero-overlay: color-mix(in srgb, #000 72%, transparent);  /* black overlay at 72% (Caylon, 19 Oct) for text legibility. Whitefield unaffected (band is already black) */
  --c-heading-on-light: var(--brand-dark);
  --c-text-on-light: #111;
  --c-muted-on-light: #5E5E5E;
  --c-text-on-dark: #fff;
  --c-muted-on-dark: rgb(255 255 255 / .66);
  --c-faint-on-dark: rgb(255 255 255 / .52);
  --c-line-on-light: #E0D6CC;
  --c-line-strip: #D8D7D5;
  --c-line-strip: color-mix(in srgb, var(--c-band-light) 90%, #000);
  --c-line-on-dark: rgb(255 255 255 / .14);
  --c-line-top-dark: #fff;
  --c-step-num: #E0D8CC;
  --c-arrow: #BDBDBD;
  --c-star: #F8B800;
  /* brand_primary positions P1–P6 (unset = Whitefield monochrome) */
  --c-book-bg: #fff;
  --c-book-fg: var(--c-band);
  --c-book-border: #fff;
  --c-form-btn: #0f1729;
  --c-form-btn-fg: #fff;
  --c-tick: #fff;
  --c-eyebrow-dark: #fff;
  --c-icon: #fff;
  /* Book on LIGHT sections: filled (band colour, or primary when it passes 3:1 on white) */
  --c-book-light-bg: var(--c-band);
  --c-book-light-fg: #fff;

  /* Type: 7 sizes, fluid from 390 to 1440 */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: calc(clamp(34px, 27.31px + 1.714vw, 52px) * var(--font-scale, 1));
  --fs-h2: clamp(30px, 24.8px + 1.333vw, 44px);
  --fs-h3: clamp(24px, 21.03px + .762vw, 32px);
  --fs-h4: clamp(18px, 17.26px + .19vw, 20px);
  --fs-body: clamp(16px, 15.63px + .095vw, 17px);
  --fs-small: clamp(14px, 13.63px + .095vw, 15px);
  --fs-eyebrow: 13px;
  --lh-display: 1.08; --lh-h2: 1.12; --lh-h3: 1.15; --lh-h4: 1.3; --lh-body: 1.65; --lh-small: 1.6;
  --ls-head: .02em; --ls-eyebrow: .12em;

  /* Spacing: 8-point scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section-y: clamp(64px, 46.17px + 4.571vw, 112px);
  --section-y-compact: clamp(32px, 23.09px + 2.286vw, 56px);
  --head-to-content: clamp(32px, 26.06px + 1.524vw, 48px);
  --gap: clamp(16px, 7.75px + 2.116vw, 32px);
  --gap-wide: clamp(32px, 14.17px + 4.571vw, 80px);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(23px, 2.13px + 8.15vw, 120px);
  --header-h: 72px;

  /* Shape */
  --r-btn: 300px; --r-card: 6px; --r-image: 6px;
  --btn-h: 56px; --btn-h-sm: 44px; --btn-border: 2px;
}

/* ═════════ 2. Base ═════════ */
.esgnpo-lp { margin: 0; background: var(--c-surface); color: var(--c-text-on-light); font-family: var(--font-sans); font-size: var(--fs-body) !important; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.esgnpo-lp) *, :where(.esgnpo-lp) *::before, :where(.esgnpo-lp) *::after { box-sizing: border-box; }
:where(.esgnpo-lp) :where(h1, h2, h3, h4, p, ul, ol, dl, figure) { margin: 0; padding: 0; }
:where(.esgnpo-lp) :where(ul, ol) { list-style: none; }
:where(.esgnpo-lp) img { display: block; max-width: 100%; height: auto; }
:where(.esgnpo-lp) a { color: inherit; }
:where(.esgnpo-lp) hr { border: 0; margin: 0; }
:where(.esgnpo-lp) :where(p, li, h1, h2, h3, h4) { text-wrap: pretty; }
.esgnpo-lp .esgnpo-main { display: block; overflow-x: clip; }
html:has(.esgnpo-lp) { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 80px) + 16px); }
#esgnpo-top { scroll-margin-top: 999px; }
@media (prefers-reduced-motion: reduce) { html:has(.esgnpo-lp) { scroll-behavior: auto; } .esgnpo-lp * { transition: none !important; } }

/* ═════════ 3. Layout ═════════ */
.esgnpo-wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.esgnpo-section { padding-block: var(--section-y); }
.esgnpo-section--compact { padding-block: var(--section-y-compact); }
.esgnpo-dark { background: var(--c-band); color: var(--c-text-on-dark); }
.esgnpo-split { display: grid; column-gap: var(--gap-wide); align-items: start; }

/* ═════════ 4. Type ═════════ */
.esgnpo-h1, .esgnpo-h2, .esgnpo-h3, .esgnpo-h4 { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-head); color: var(--c-heading-on-light); }
.esgnpo-dark :is(.esgnpo-h1, .esgnpo-h2, .esgnpo-h3, .esgnpo-h4), .esgnpo-hero :is(.esgnpo-h1, .esgnpo-h2) { color: var(--c-text-on-dark); }
.esgnpo-h1 { font-size: var(--fs-display) !important; line-height: var(--lh-display); }
.esgnpo-h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-h2); }
.esgnpo-h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-h3); }
.esgnpo-h4 { font-size: var(--fs-h4) !important; line-height: var(--lh-h4); }
.esgnpo-eyebrow { font-size: var(--fs-eyebrow) !important; line-height: 1.4; font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.esgnpo-dark .esgnpo-eyebrow, .esgnpo-hero .esgnpo-eyebrow { color: var(--c-eyebrow-accent, var(--c-eyebrow-dark)); }
.esgnpo-lead { font-size: var(--fs-body) !important; line-height: var(--lh-body); color: var(--c-muted-on-light); text-wrap: balance; }
.esgnpo-dark .esgnpo-lead { color: var(--c-muted-on-dark); }

/* Section header: eyebrow / H2 / lead, centred, one spacing rule everywhere */
.esgnpo-sh { max-width: 800px; margin: 0 auto var(--head-to-content); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.esgnpo-sh:last-child { margin-bottom: 0; }
/* Centred headings break into even lines (no lone last word). */
.esgnpo-sh .esgnpo-h2, .esgnpo-sh .esgnpo-h1 { text-wrap: balance; }

/* ═════════ 5. Components ═════════ */
.esgnpo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding: 0 var(--s-6); border: var(--btn-border) solid; border-radius: var(--r-btn); font: 700 calc(16px * var(--font-scale, 1))/1 var(--font-sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.esgnpo-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.esgnpo-btn--block { display: flex; width: 100%; }
.esgnpo-btn--book { background: var(--c-book-bg); color: var(--c-book-fg); border-color: var(--c-book-border); }
.esgnpo-btn--outline { background: transparent; color: var(--c-text-on-dark); border-color: currentColor; }
/* Hover: Book (filled) becomes an outline in its own colour; Call (outline) fills in. */
.esgnpo-btn--book:hover, .esgnpo-btn--book:focus-visible { background: transparent; color: var(--c-book-border); border-color: var(--c-book-border); }
.esgnpo-btn--outline:hover, .esgnpo-btn--outline:focus-visible { background: var(--c-text-on-dark); color: var(--c-band); border-color: var(--c-text-on-dark); }

.esgnpo-card { border-radius: var(--r-card); padding: var(--s-6); }

.esgnpo-ico { width: 1em; height: 1em; flex: none; }
.esgnpo-stars { position: relative; display: inline-flex; color: var(--c-star); }
.esgnpo-stars__bg, .esgnpo-stars__fg { display: inline-flex; gap: 2px; white-space: nowrap; }
.esgnpo-stars__bg { opacity: .28; }
.esgnpo-stars__fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.esgnpo-stars svg { width: 18px; height: 18px; fill: currentColor; }

.esgnpo-ticks { display: grid; gap: var(--s-2); }
.esgnpo-ticks li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small) !important; line-height: 1.5; font-weight: 600; }
.esgnpo-ticks .esgnpo-ico { width: 20px; height: 20px; color: var(--c-tick); }

.esgnpo-slot-label { position: absolute; left: 50%; bottom: var(--s-3); transform: translateX(-50%); z-index: 2; padding: 3px 10px; border-radius: 3px; background: #fff3cd; color: #6b5300; font: 600 11px/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

/* CTA pair under a section. On light sections Book is filled and Call is a dark outline. */
.esgnpo-cta { margin-top: var(--head-to-content); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
.esgnpo-cta .esgnpo-btn { min-width: 240px; }
.esgnpo-section:not(.esgnpo-dark) .esgnpo-btn--book { background: var(--c-book-light-bg); color: var(--c-book-light-fg); border-color: var(--c-book-light-bg); }
.esgnpo-section:not(.esgnpo-dark) .esgnpo-btn--outline { color: var(--c-heading-on-light); }
.esgnpo-section:not(.esgnpo-dark) .esgnpo-btn--book:hover, .esgnpo-section:not(.esgnpo-dark) .esgnpo-btn--book:focus-visible { background: transparent; color: var(--c-book-light-bg); border-color: var(--c-book-light-bg); }
.esgnpo-section:not(.esgnpo-dark) .esgnpo-btn--outline:hover, .esgnpo-section:not(.esgnpo-dark) .esgnpo-btn--outline:focus-visible { background: var(--c-heading-on-light); color: #fff; border-color: var(--c-heading-on-light); }
/* Dark cards inside light sections (offer card) keep the dark-background buttons. */
.esgnpo-section .esgnpo-offer .esgnpo-btn--book { background: var(--c-book-bg); color: var(--c-book-fg); border-color: var(--c-book-border); }
.esgnpo-section .esgnpo-offer .esgnpo-btn--book:hover { background: transparent; color: var(--c-book-border); border-color: var(--c-book-border); }

/* The Google element: stars · G · review count · accolade. Muted text, adapts to light/dark. */
.esgnpo-google { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--s-2); row-gap: var(--s-1); margin-top: var(--s-5); font-size: 14px !important; line-height: 1.4; color: var(--c-muted-on-light); }
.esgnpo-google--left { justify-content: flex-start; }
.esgnpo-dark .esgnpo-google, .esgnpo-hero .esgnpo-google { color: var(--c-muted-on-dark); }
.esgnpo-google__g1, .esgnpo-google__g2 { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.esgnpo-google .esgnpo-stars svg { width: 14px; height: 14px; }
.esgnpo-google .esgnpo-g { width: 15px; height: 15px; flex: none; }
.esgnpo-google__dot { opacity: .6; }
@media (max-width: 767px) { .esgnpo-google__dot { display: none; } .esgnpo-google { column-gap: var(--s-4); } }
.esgnpo-proof .esgnpo-google { margin-top: 0; }

/* ═════════ 6. Header ═════════ */
/* Header strip: band colour at 72% with a blur, so content shows faintly behind it as you scroll. Sticks to the top on every page. */
.esgnpo-hdr { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: rgb(0 0 0 / .72); background: color-mix(in srgb, var(--c-band) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--c-line-on-dark); }
.esgnpo-hdr__in { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
/* Logo slot fits any shape: square marks, wide wordmarks, stacked lockups. The height is fixed and the width follows the
   logo up to a cap. Phones swap to the logo mark (logo_mark, made by make-client) through <picture>; with no mark they
   show the full logo, narrower. */
.esgnpo-hdr__logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; height: 56px; max-width: 240px; }
.esgnpo-hdr__logo picture { display: contents; }
.esgnpo-hdr__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.esgnpo-hdr__right { display: flex; align-items: center; gap: var(--s-5); }
.esgnpo-hdr__tel { color: var(--c-text-on-dark); text-decoration: none; font-size: 15px !important; letter-spacing: .02em; }
.esgnpo-hdr__tel-l { color: var(--c-muted-on-dark); margin-right: 2px; }
.esgnpo-hdr .esgnpo-btn { min-height: var(--btn-h-sm); padding: 0 22px; font-size: 15px !important; }
.esgnpo-hdr .esgnpo-hdr__call { display: none; }

/* ═════════ 7. L01 Hero ═════════ */
/* The hero slides up under the sticky translucent header, so its photo runs to the top of the page. */
/* Hero always fills the first screen (100svh, header included): content centred in the space, the Google
   element row anchored to the bottom. On short screens it grows to fit its content instead. */
.esgnpo-hero { position: relative; isolation: isolate; margin-top: calc(-1 * var(--header-h)); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-5); background: var(--c-band); color: var(--c-text-on-dark); }
.esgnpo-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; }
.esgnpo-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-hero-overlay); }
.esgnpo-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 504px; column-gap: var(--s-7); align-items: center; margin-block: auto; }
.esgnpo-hero .esgnpo-h1 { margin-top: var(--s-3); }
.esgnpo-hero__sub { margin-top: var(--s-4); max-width: 520px; color: rgb(255 255 255 / .86); }
.esgnpo-hero__price { margin-top: var(--s-4); font-size: var(--fs-h4) !important; line-height: var(--lh-h4); font-weight: 700; letter-spacing: var(--ls-head); text-transform: uppercase; }
.esgnpo-hero__ticks { margin-top: var(--s-3); gap: var(--s-1); }
.esgnpo-hero__call { margin-top: var(--s-5); }
.esgnpo-proof { width: min(var(--container), 100% - 2 * var(--gutter)); margin: var(--s-5) auto 0; flex: none; padding-top: var(--s-4); border-top: 1px solid var(--c-line-on-dark); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-small) !important; line-height: var(--lh-small); text-align: center; }

/* Form slot: the client's embed, or a same-size placeholder imitating the live form card */
.esgnpo-formcard { position: relative; background: #fff; color: #111; border-radius: var(--r-card); overflow: hidden; min-height: 560px; box-shadow: 0 20px 50px rgb(0 0 0 / .25); }
.esgnpo-formcard--live { min-height: 0; } /* a pasted embed sizes itself: the 560px reserve is only for the placeholder card */
.esgnpo-formcard--live iframe { display: block; width: 100%; min-height: 0; border: 0; }
.esgnpo-formcard--placeholder { padding: var(--s-5) var(--s-6) var(--s-7); }
.esgnpo-formcard__badge { display: inline-block; padding: 5px 12px; border-radius: var(--r-btn); background: var(--c-formcard-badge-bg, #f1f1f1); color: var(--c-formcard-badge-fg, #111); font-size: 12px !important; line-height: 1.3; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.esgnpo-formcard__h { margin-top: var(--s-3); font-size: 24px !important; line-height: 1.25; font-weight: 700; }
.esgnpo-formcard__offer { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-card); background: var(--c-formcard-offer-bg, #f6f6f6); }
.esgnpo-formcard__price { display: flex; align-items: baseline; gap: var(--s-2); }
.esgnpo-formcard__price b { font-size: 40px !important; line-height: 1; }
.esgnpo-formcard__price s { color: #8a8a8a; font-size: 18px !important; }
.esgnpo-formcard__line { margin-top: var(--s-2); font-size: 14px !important; line-height: 1.5; color: #555; }
.esgnpo-formcard__f { margin-top: var(--s-3); }
.esgnpo-formcard__f span { display: block; font-size: 12px !important; font-weight: 700; letter-spacing: .04em; color: #374151; }
.esgnpo-formcard__f i { display: block; margin-top: var(--s-2); height: 44px; padding: 0 var(--s-3); border: 1px solid #d1d5db; border-radius: 4px; font: 400 14px/44px var(--font-sans); font-style: normal; color: #9ca3af; }
/* Same pill, height and type as every Book button (.esgnpo-btn); only the fill differs on the white card.
   Placeholder gets the same hover as a Book button so the mock reads as live; once the client's real form
   embed replaces the placeholder, that form owns its own submit button and hover. */
.esgnpo-formcard__btn { display: flex; align-items: center; justify-content: center; margin-top: var(--s-5); min-height: var(--btn-h); border: var(--btn-border) solid var(--c-form-btn); border-radius: var(--r-btn); background: var(--c-form-btn); color: var(--c-form-btn-fg); font: 700 calc(16px * var(--font-scale, 1))/1 var(--font-sans); letter-spacing: .02em; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.esgnpo-formcard__btn:hover, .esgnpo-formcard__btn:focus-visible { background: transparent; color: var(--c-form-btn); border-color: var(--c-form-btn); }

/* ═════════ 8. L02 Results ═════════ */
.esgnpo-results { background: var(--c-surface); }
.esgnpo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.esgnpo-grid__img { width: 100%; height: auto !important; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-image); }

/* ═════════ 9. L03 Credentials ═════════ */
.esgnpo-creds { background: var(--c-creds-bg, var(--c-band-light)); padding-block: var(--section-y-compact); }
/* Full-width strip (not the 1200 container): six items need the room. */
.esgnpo-creds__row { width: calc(100% - 2 * var(--s-6)); max-width: 1680px; margin-inline: auto; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.esgnpo-creds__row--4 { --n: 4; } .esgnpo-creds__row--5 { --n: 5; } .esgnpo-creds__row--6 { --n: 6; }
.esgnpo-creds__i { padding: var(--s-1) var(--s-5); text-align: center; }
.esgnpo-creds__i + .esgnpo-creds__i { border-left: 1px solid var(--c-creds-line, var(--c-line-strip)); }
.esgnpo-creds__n { font-size: var(--fs-h4) !important; line-height: var(--lh-h4); font-weight: 700; letter-spacing: var(--ls-head); text-transform: uppercase; color: var(--c-creds-label, var(--c-heading-on-light)); }
.esgnpo-creds__l { margin-top: var(--s-1); font-size: var(--fs-small) !important; line-height: 1.35; color: var(--c-creds-sub, var(--c-muted-on-light)); text-wrap: balance; }

/* ═════════ 10. L04 Why choose us ═════════ */
.esgnpo-why { background: var(--c-surface-soft); }
.esgnpo-why--rule { border-top: 1px solid var(--c-line-on-light); }
.esgnpo-why__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-7); }
/* Vertical dividers between columns (no lines above). Padding sits either side of each divider. */
.esgnpo-why__col { padding-inline: var(--s-5); }
.esgnpo-why__col:first-child { padding-left: 0; }
.esgnpo-why__col:last-child { padding-right: 0; }
.esgnpo-why__col + .esgnpo-why__col { border-left: 1px solid var(--c-line-strip); }
.esgnpo-why__t { font-size: 18px !important; line-height: var(--lh-h4); font-weight: 700; color: var(--c-heading-on-light); }
/* Four columns on every desktop width. From 1240px: 24px either side of each divider, 18px titles.
   1024–1239px: 16px either side, 16px titles, which keeps all four titles on one line from about 1060px. */
@media (max-width: 1239px) {
  .esgnpo-why__col { padding-inline: var(--s-4); }
  .esgnpo-why__col:first-child { padding-left: 0; }
  .esgnpo-why__col:last-child { padding-right: 0; }
  .esgnpo-why__t { font-size: 16px !important; }
}
@media (max-width: 1023px) {
  .esgnpo-why__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esgnpo-why__col { padding-inline: var(--s-6) 0; }
  .esgnpo-why__col:nth-child(odd) { padding-inline: 0 var(--s-6); border-left: 0; }
}
@media (max-width: 767px) {
  .esgnpo-why__col, .esgnpo-why__col:nth-child(odd), .esgnpo-why__col + .esgnpo-why__col { padding-inline: 0; border-left: 0; }
}
.esgnpo-why__p { margin-top: var(--s-3); font-size: var(--fs-small) !important; line-height: var(--lh-small); color: var(--c-muted-on-light); }

/* ═════════ 11. L05 Services ═════════ */
.esgnpo-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.esgnpo-services .esgnpo-card { background: var(--c-card-on-dark); border-top: 2px solid var(--c-line-top-dark); border-radius: 0 0 var(--r-card) var(--r-card); }
.esgnpo-card__ico { display: block; font-size: 28px !important; line-height: 0; color: var(--c-icon); }
.esgnpo-card__t { margin-top: var(--s-5); }
.esgnpo-card__p { margin-top: var(--s-3); font-size: var(--fs-small) !important; line-height: var(--lh-small); color: var(--c-muted-on-dark); }

/* ═════════ 12. L06 First visit ═════════ */
.esgnpo-visit { background: var(--c-surface); }
.esgnpo-visit__grid { grid-template-columns: minmax(0, 1fr) 420px; }
.esgnpo-visit__img { width: 100%; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-image); }
.esgnpo-visit__h { margin-top: var(--s-6); }
.esgnpo-visit__text { margin-top: var(--s-4); color: var(--c-muted-on-light); max-width: 560px; }
.esgnpo-offer { background: var(--c-band-2); color: var(--c-text-on-dark); text-align: center; padding: var(--s-7) var(--s-6) var(--s-6); }
.esgnpo-offer__rule { height: 1px; margin: var(--s-5) 0; background: var(--c-line-on-dark); }
.esgnpo-offer__title { font-size: var(--fs-h4) !important; line-height: 1.3; font-weight: 700; letter-spacing: var(--ls-head); text-transform: uppercase; text-wrap: balance; color: var(--c-eyebrow-dark); }
.esgnpo-offer__was { font-size: var(--fs-h4) !important; line-height: 1.2; font-weight: 600; color: var(--c-muted-on-dark); }
.esgnpo-offer__now { margin-top: var(--s-4); font-size: calc(clamp(56px, 46.71px + 2.381vw, 81px) * var(--font-scale, 1)) !important; line-height: 1.1; font-weight: 700; letter-spacing: var(--ls-head); }  /* lh 1.1 + larger gap so tall brand fonts (e.g. Nunito) don't overlap the struck price above (19 Oct) */
.esgnpo-offer__name { margin-top: var(--s-3); font-size: var(--fs-small) !important; color: var(--c-muted-on-dark); }
.esgnpo-offer__ticks { text-align: left; margin-bottom: var(--s-6); }
.esgnpo-offer__note { margin-top: var(--s-4); text-align: center; font-size: var(--fs-small) !important; color: var(--c-muted-on-light); }

/* ═════════ 13. L07 Lead clinician ═════════ */
.esgnpo-clin { background: var(--c-band-2); }
.esgnpo-clin__grid { grid-template-columns: 340px minmax(0, 1fr); align-items: center; }
.esgnpo-clin__photo { position: relative; border-radius: var(--r-image); overflow: hidden; background: var(--c-band); }
.esgnpo-clin__img { width: 100%; height: auto !important; aspect-ratio: 340 / 500; object-fit: cover; object-position: 50% 0; }
.esgnpo-clin__plate { position: absolute; inset: auto 0 0; padding: var(--s-7) var(--s-4) var(--s-4); background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / .5) 60%, transparent); text-align: center; font-size: 12px !important; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted-on-dark); }
.esgnpo-clin__plate strong { display: block; margin-bottom: 2px; font-size: var(--fs-body) !important; letter-spacing: 0; text-transform: none; color: #fff; }
.esgnpo-clin__h { margin-top: var(--s-4); }
.esgnpo-dark .esgnpo-clin__title { margin-top: var(--s-4); color: var(--c-muted-on-dark); font-size: var(--fs-small) !important; letter-spacing: .08em; }
.esgnpo-stats { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--c-line-on-dark); }
.esgnpo-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esgnpo-stat { padding: var(--s-5) var(--s-3); text-align: center; }
.esgnpo-stat + .esgnpo-stat { border-left: 1px solid var(--c-line-on-dark); }
.esgnpo-stat__n { font-size: var(--fs-h3) !important; line-height: 1.1; font-weight: 700; letter-spacing: var(--ls-head); color: var(--c-stat-num, inherit); }
.esgnpo-stat__l { margin-top: var(--s-2); font-size: 13px !important; line-height: 1.45; color: var(--c-faint-on-dark); }
.esgnpo-clin__bio { margin-top: var(--s-5); color: var(--c-muted-on-dark); }
.esgnpo-team { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--c-line-on-dark); text-align: center; font-size: var(--fs-small) !important; line-height: var(--lh-small); color: var(--c-faint-on-dark); }
.esgnpo-team__rule { display: none; }

/* ═════════ 14. L08 What to expect ═════════ */
.esgnpo-expect { background: var(--c-surface-soft); }
.esgnpo-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--gap); }
.esgnpo-step__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line-on-light); }
.esgnpo-step__n { font-size: var(--fs-h3) !important; line-height: 1; font-weight: 600; color: var(--c-step-num); }
.esgnpo-step__arrow { font-size: 18px !important; line-height: 0; color: var(--c-arrow); }
.esgnpo-step__rule { display: none; }
.esgnpo-step__t { margin-top: var(--s-5); font-size: var(--fs-h4) !important; line-height: var(--lh-h4); font-weight: 700; color: var(--c-heading-on-light); }
.esgnpo-step__p { margin-top: var(--s-3); font-size: var(--fs-small) !important; line-height: var(--lh-small); color: var(--c-muted-on-light); }

/* ═════════ 15. L09 Videos + L10 Reviews: shared 3-up row; 1 or 2 items keep the same card width, centred ═════════ */
.esgnpo-videos { background: var(--c-band-2); }
/* Light band (slightly deeper than L08's tone so white cards stand out); hairline if it meets L08 directly (no videos). */
.esgnpo-reviews { background: var(--c-reviews-bg, var(--c-band-light)); }
.esgnpo-expect + .esgnpo-reviews { border-top: 1px solid var(--c-line-on-light); }
.esgnpo-videos__row, .esgnpo-reviews__row { display: grid; grid-template-columns: repeat(var(--n, 3), calc((100% - 2 * var(--gap)) / 3)); gap: var(--gap); justify-content: center; }
.esgnpo-videos__row--1, .esgnpo-reviews__row--1 { --n: 1; } .esgnpo-videos__row--2, .esgnpo-reviews__row--2 { --n: 2; }
.esgnpo-video { position: relative; min-width: 0; aspect-ratio: 9 / 16; border-radius: var(--r-card); overflow: hidden; background: #000; }
.esgnpo-video__el { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.esgnpo-video::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .28); pointer-events: none; transition: opacity .2s ease; }
.esgnpo-video.is-playing::after { opacity: 0; }
.esgnpo-video__play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); display: grid; place-items: center; width: 72px; height: 72px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .94); color: #111; font-size: 26px !important; cursor: pointer; box-shadow: 0 6px 24px rgb(0 0 0 / .35); }
.esgnpo-video.is-playing .esgnpo-video__play { display: none; }

.esgnpo-badge { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border: 1px solid var(--c-line-strip); border-radius: var(--r-btn); background: #fff; font-size: 13px !important; line-height: 1; color: var(--c-muted-on-light); }
.esgnpo-badge .esgnpo-stars svg { width: 13px; height: 13px; }
.esgnpo-review { min-width: 0; min-height: 300px; padding: var(--s-5); background: #fff; color: #202124; border-radius: var(--r-card); border: 1px solid rgb(0 0 0 / .08); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 16px rgb(0 0 0 / .06); display: flex; flex-direction: column; }
.esgnpo-review__head { display: flex; align-items: center; gap: var(--s-3); }
.esgnpo-review__i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 500; font-size: 18px !important; }
.esgnpo-review__who { flex: 1; min-width: 0; font-size: 14px !important; line-height: 20px; }
.esgnpo-review__who strong { display: block; font-weight: 600; color: #202124; }
.esgnpo-review__who span { color: #5f6368; font-size: 13px !important; }
.esgnpo-review__g { flex: none; width: 20px; height: 20px; align-self: flex-start; }
.esgnpo-review .esgnpo-stars { margin-top: var(--s-4); color: #FBBC04; }
.esgnpo-review .esgnpo-stars svg { width: 17px; height: 17px; }
.esgnpo-review__q { flex-shrink: 0; margin-top: var(--s-3); font-size: 16px !important; line-height: 26px; color: #3c4043; }
.esgnpo-review__src { margin-top: auto; padding-top: var(--s-4); font-size: 13px !important; line-height: 20px; color: #5f6368; }
.esgnpo-reviews__link { margin-top: var(--s-6); text-align: center; }
.esgnpo-reviews__link a { text-decoration: none; color: var(--c-heading-on-light); font-weight: 500; }
.esgnpo-reviews__link a:hover { text-decoration: underline; }

/* ═════════ 16. L11 Final CTA ═════════ */
.esgnpo-final__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
.esgnpo-final__btns .esgnpo-btn { min-width: 240px; }

/* ═════════ 17. Footer ═════════ */
.esgnpo-ftr { background: var(--c-band-2); color: var(--c-text-on-dark); padding: var(--s-8) 0 var(--s-6); font-size: var(--fs-small) !important; line-height: var(--lh-small); }
.esgnpo-ftr .esgnpo-ftr__h { color: var(--c-text-on-dark); }
.esgnpo-ftr__grid { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--gap-wide); }
.esgnpo-ftr__label { margin-bottom: var(--s-3); font-size: var(--fs-eyebrow) !important; font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-muted-on-dark); }
.esgnpo-ftr p + p { margin-top: var(--s-3); }
/* Long emails and URLs wrap instead of running into the next column. */
.esgnpo-ftr__grid > div { min-width: 0; }
.esgnpo-ftr a, .esgnpo-ftr p { overflow-wrap: anywhere; }
.esgnpo-ftr a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .4); }
.esgnpo-ftr a:hover { text-decoration-color: currentColor; }
.esgnpo-hours div { display: grid; grid-template-columns: 48px 1fr; }
.esgnpo-hours dt { text-transform: uppercase; color: var(--c-muted-on-dark); }
.esgnpo-hours dd { margin: 0; }
.esgnpo-ftr__legal li + li { margin-top: var(--s-1); }
.esgnpo-ftr__copy { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line-on-dark); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: 12px !important; color: var(--c-faint-on-dark); }
.esgnpo-ftr .esgnpo-totop { color: var(--c-muted-on-dark); font-size: 13px !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .4); }
.esgnpo-ftr .esgnpo-totop:hover { color: #fff; text-decoration-color: currentColor; }
.esgnpo-ftr--slim { padding: var(--s-6) 0; text-align: center; }
.esgnpo-ftr--slim .esgnpo-ftr__legal { margin-top: var(--s-2); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-5); }
.esgnpo-ftr--slim .esgnpo-ftr__legal li + li { margin-top: 0; }

/* ═════════ 18. Schedule + thank-you ═════════ */
.esgnpo-sched { background: var(--c-surface-soft); }
.esgnpo-sched__card { position: relative; max-width: 900px; margin-inline: auto; padding: 0; background: #fff; overflow: hidden; box-shadow: 0 10px 40px rgb(0 0 0 / .08); }
.esgnpo-booking iframe { display: block; width: 100%; min-height: 700px; border: 0; }
.esgnpo-booking--placeholder { height: 700px; background: repeating-linear-gradient(135deg, #fafafa 0 14px, #f3f3f3 14px 28px); }
.esgnpo-sched__help { margin-top: var(--s-5); text-align: center; font-size: var(--fs-small) !important; }
.esgnpo-ty { min-height: calc(100vh - 92px - 96px); }
.esgnpo-ty__line { font-size: var(--fs-h4) !important; line-height: 1.45; font-weight: 600; }
.esgnpo-ty__actions { display: flex; justify-content: center; }
.esgnpo-ty__card { margin: var(--s-7) auto 0; max-width: 380px; background: var(--c-band-3); font-size: var(--fs-small) !important; line-height: var(--lh-small); text-align: center; }
.esgnpo-ty__card-h { font-size: var(--fs-small) !important; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-head); margin-bottom: var(--s-1); }
.esgnpo-ty__hours { margin-top: var(--s-4); display: inline-block; text-align: left; }

/* Small desktops: narrower form so the hero headline's longest word fits its column. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .esgnpo-hero__in { grid-template-columns: minmax(0, 1fr) 420px; column-gap: var(--s-6); }
  .esgnpo-hero .esgnpo-h1 { font-size: 42px !important; }
}
/* ═════════ 19. Tablet 768–1023 ═════════ */
@media (max-width: 1023px) {
  /* Stacked hero (tablet + phone), Caylon 15 Oct: eyebrow, heading, FORM, body, price, ticks, Call.
     The whole form (to its button) must be visible without scrolling. */
  .esgnpo-hero { min-height: 0; padding-top: calc(var(--header-h) + var(--s-5)); }
  .esgnpo-hero__copy { display: contents; }
  .esgnpo-hero__in { display: flex; flex-direction: column; align-items: stretch; row-gap: 0; margin-block: 0; }
  .esgnpo-hero .esgnpo-eyebrow { order: 1; }
  .esgnpo-hero .esgnpo-h1 { order: 2; margin-top: var(--s-2); }
  .esgnpo-hero__form { order: 3; margin-top: var(--s-4); width: 100%; max-width: 560px; }
  .esgnpo-hero__sub { order: 4; margin-top: var(--s-6); }
  .esgnpo-hero__price { order: 5; }
  /* add-on sits with the price detail, below the form (without an order it defaults to 0 and jumps above the eyebrow) */
  .esgnpo-hero__addon { order: 6; margin-top: var(--s-1); }
  .esgnpo-hero__ticks { order: 7; }
  .esgnpo-hero__call { order: 8; align-self: flex-start; }
  .esgnpo-formcard, .esgnpo-formcard--live iframe { min-height: 0; }
  .esgnpo-formcard--placeholder { padding: var(--s-4) var(--s-5) var(--s-7); }
  .esgnpo-formcard__h { font-size: 20px !important; margin-top: var(--s-2); }
  .esgnpo-formcard__offer { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); }
  .esgnpo-formcard__price b { font-size: 32px !important; }
  .esgnpo-formcard__line { margin-top: var(--s-1); font-size: 13px !important; }
  .esgnpo-formcard__f { margin-top: var(--s-2); }
  .esgnpo-formcard__f i { margin-top: var(--s-1); height: 42px; line-height: 42px; }
  .esgnpo-formcard__btn { margin-top: var(--s-4); min-height: 50px; }
  .esgnpo-why__cols, .esgnpo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esgnpo-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esgnpo-visit__grid { grid-template-columns: 1fr; row-gap: var(--s-7); }
  .esgnpo-visit__aside { width: 100%; max-width: 480px; margin-inline: auto; }
  .esgnpo-clin__grid { grid-template-columns: 260px minmax(0, 1fr); }
  .esgnpo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esgnpo-stat:nth-child(3) { border-left: 0; }
  .esgnpo-stat:nth-child(n+3) { border-top: 1px solid var(--c-line-on-dark); }
  .esgnpo-reviews__row, .esgnpo-reviews__row--1, .esgnpo-reviews__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esgnpo-reviews__row > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--gap) / 2); }
  .esgnpo-review { aspect-ratio: auto; }
  .esgnpo-creds__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-5); }
  .esgnpo-creds__i:nth-child(3n+1) { border-left: 0; }
}

/* ═════════ 20. Phone < 768 ═════════ */
@media (max-width: 767px) {
  .esgnpo-lp { --header-h: 64px; }
  .esgnpo-hdr__logo { height: 44px; max-width: min(150px, 38vw); }  /* phones: the mark if the client has one, else the full logo narrowed */
  .esgnpo-hdr--wide .esgnpo-hdr__call { display: none !important; }
  .esgnpo-hdr--wide .esgnpo-hdr__logo { max-width: min(170px, 46vw); }
  .esgnpo-hdr__tel { display: none; }
  .esgnpo-hdr .esgnpo-hdr__call { display: inline-flex; }
  .esgnpo-hdr__right { gap: var(--s-2); }
  .esgnpo-hdr .esgnpo-btn { min-height: 40px; padding: 0 var(--s-4); font-size: 14px !important; }

  .esgnpo-hero { padding-top: calc(var(--header-h) + var(--s-4)); }
  .esgnpo-hero .esgnpo-h1 { font-size: 30px !important; line-height: 1.06; }
  .esgnpo-hero__call { align-self: stretch; }
  .esgnpo-formcard--placeholder { padding: var(--s-4) var(--s-4) var(--s-7); }
  .esgnpo-formcard__f span { font-size: 11px !important; }

  .esgnpo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Phones show an even number of photos (2 columns, full rows): an odd last tile is hidden. */
  .esgnpo-grid > :last-child:nth-child(odd) { display: none; }
  /* Phones: a 2-column grid of blocks, vertical line between columns, horizontal line between rows. */
  .esgnpo-creds__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .esgnpo-creds__i { padding: var(--s-5) var(--s-3); }
  .esgnpo-creds__i:nth-child(3n+1) { border-left: 1px solid var(--c-creds-line, var(--c-line-strip)); }
  .esgnpo-creds__i:nth-child(odd) { border-left: 0; }
  .esgnpo-creds__i:nth-child(n+3) { border-top: 1px solid var(--c-creds-line, var(--c-line-strip)); }
  .esgnpo-creds__row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .esgnpo-why__cols, .esgnpo-steps, .esgnpo-services__grid { grid-template-columns: 1fr; }
  .esgnpo-step__arrow { display: none; }
  .esgnpo-clin__grid { grid-template-columns: 1fr; row-gap: var(--s-7); }
  .esgnpo-clin__photo { width: 100%; max-width: 340px; margin-inline: auto; }
  .esgnpo-videos__row, .esgnpo-reviews__row, .esgnpo-reviews__row--1, .esgnpo-reviews__row--2 { grid-template-columns: 1fr; }
  .esgnpo-reviews__row > :last-child:nth-child(odd) { width: 100%; }
  .esgnpo-video { max-width: 400px; width: 100%; margin-inline: auto; }
  .esgnpo-final__btns .esgnpo-btn, .esgnpo-cta .esgnpo-btn { width: 100%; }
  .esgnpo-ftr__grid { grid-template-columns: 1fr; }
  .esgnpo-booking--placeholder, .esgnpo-booking iframe { height: 640px; min-height: 640px; }
}

/* Short phones (iPhone SE 375x667, 360x640): compact everything above and inside the form so the whole
   form, button included, still fits the first screen (the GD Dentistry rule). Taller phones are unaffected. */
@media (max-width: 767px) and (max-height: 700px) {
  .esgnpo-lp { --header-h: 56px; }
  .esgnpo-hdr__logo { height: 38px; }
  .esgnpo-hdr .esgnpo-btn { min-height: 36px; font-size: 13px !important; padding: 0 var(--s-3); }
  .esgnpo-hero { padding-top: calc(var(--header-h) + var(--s-2)); }
  .esgnpo-hero .esgnpo-eyebrow { font-size: 11px !important; }
  .esgnpo-hero .esgnpo-h1 { font-size: 24px !important; line-height: 1.05; margin-top: var(--s-1); }
  .esgnpo-hero__form { margin-top: var(--s-3); }
  .esgnpo-formcard--placeholder { padding: var(--s-3) var(--s-4) var(--s-6); }
  .esgnpo-formcard__badge { padding: 3px 10px; font-size: 10px !important; }
  .esgnpo-formcard__h { font-size: 17px !important; margin-top: var(--s-1); }
  .esgnpo-formcard__offer { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); }
  .esgnpo-formcard__price b { font-size: 26px !important; }
  .esgnpo-formcard__line { font-size: 12px !important; line-height: 1.35; }
  .esgnpo-formcard__f { margin-top: var(--s-2); }
  .esgnpo-formcard__f span { font-size: 10px !important; }
  .esgnpo-formcard__f i { height: 36px; line-height: 36px; font-size: 13px !important; }
  .esgnpo-formcard__btn { margin-top: var(--s-3); min-height: 44px; font-size: 15px !important; }
  .esgnpo-slot-label { bottom: var(--s-2); }
}

/* Very small phones (last, so it wins over the phone rules): the longest headline word must fit 274px. */
@media (max-width: 359px) {
  .esgnpo-hdr__logo { flex: none; height: 36px; }  /* smallest phones: the logo keeps its size and gap; the buttons tighten instead */
  .esgnpo-hdr__in { gap: var(--s-3); }
  .esgnpo-hdr .esgnpo-btn { padding: 0 var(--s-3); font-size: 13px !important; }
  .esgnpo-hero .esgnpo-h1 { font-size: 25px !important; }
  .esgnpo-h2 { font-size: 26px !important; }
}

/* ===== Host-theme armor (19 Oct) =====
   Some client themes reset bare tags with !important and those rules leak onto the plugin's own
   pages even though we switch the theme off for the layout (seen live on Shine / IONOS:
   `p{font-size:16px!important}`, `h4{font-family:"Scope One"!important; font-weight:400!important}`).
   A bare-tag !important rule would otherwise beat our class rules, shrinking every <p> (price, stats,
   labels, headings-set-as-<p>) to one size and swapping <h4> to the theme's serif.
   Two-part defence:
   1. font-family + heading weight re-asserted here with a selector that out-specifies a bare tag.
   2. EVERY font-size in this stylesheet (base + responsive) carries !important (added by the build /
      kept in source), so a bare `p{font-size:_!important}` can never win. That is why you see
      `!important` on the size declarations throughout this file; do not remove them.
   Harmless on a clean theme (it just restates our own values). */
.esgnpo-lp :is(p,h1,h2,h3,h4,h5,h6,a,span,li,strong,b,em,button,label,input,select,textarea,blockquote) { font-family: var(--font-sans) !important; }
.esgnpo-lp :is(h1,h2,h3,h4,h5,h6) { font-weight: 700 !important; }
/* Unclassed text (footer address/links, legal links, copyright, team note) has no size of its own and
   inherits from its container; a bare `p/a/li/span{font-size:_!important}` would otherwise clobber it.
   Force it to keep inheriting, which out-specifies a bare tag. */
.esgnpo-lp :is(p,a,li,span):not([class]) { font-size: inherit !important; }
/* slot-label sets its size via the `font:` shorthand, so the size-!important blanket does not reach it. */
.esgnpo-lp .esgnpo-slot-label { font-size: 11px !important; }
/* Classed body paragraphs that inherit the fluid body size (no font-size of their own) — a bare
   p{font-size:_!important} would flatten them, so pin them to the body token explicitly. */
.esgnpo-lp :is(.esgnpo-hero__sub, .esgnpo-visit__text, .esgnpo-formcard__price, .esgnpo-clin__bio) { font-size: var(--fs-body) !important; }


/* ---- Optional secondary add-on offer (e.g. scale & polish beside the main exam price). Added 22 Oct
   2026 for Elegant Smiles Stamford; renders only when addon_* is set, so other builds are unchanged. */
.esgnpo-addon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.esgnpo-addon__price b { font-weight: 800; }
.esgnpo-addon__price s { opacity: .65; }
.esgnpo-addon__name { font-weight: 600; }
.esgnpo-addon__note { font-size: .82em; opacity: .9; }
/* in the booking form pill (light offer box) */
.esgnpo-formcard__addon { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-line-on-light, rgba(0,0,0,.14)); font-size: 14px !important; line-height: 1.5; color: #555; }
.esgnpo-formcard__addon .esgnpo-addon__price b { font-size: 22px !important; color: var(--brand-dark); }
.esgnpo-formcard__addon .esgnpo-addon__price s { color: #8a8a8a; font-size: 14px !important; }
.esgnpo-formcard__addon .esgnpo-addon__name { color: var(--brand-dark); }
.esgnpo-formcard__addon .esgnpo-addon__note { width: 100%; color: #777; font-size: 12px !important; }
/* in the hero (white text over the dark hero image) */
.esgnpo-hero__addon { margin-top: var(--s-2); color: #fff; font-size: 15px !important; line-height: 1.5; }
.esgnpo-hero__addon .esgnpo-addon__price b { font-size: 19px !important; }
.esgnpo-hero__addon .esgnpo-addon__price s { color: rgba(255,255,255,.6); }
.esgnpo-hero__addon .esgnpo-addon__note { color: rgba(255,255,255,.82); width: 100%; }
/* in the visit offer card (DARK: .esgnpo-offer uses --c-band-2 + white text, so the add-on is light too) */
.esgnpo-offer__addon { margin-top: var(--s-2); justify-content: center; font-size: 15px !important; line-height: 1.5; color: var(--c-muted-on-dark); }
.esgnpo-offer__addon .esgnpo-addon__price b { color: #fff; font-size: 20px !important; }
.esgnpo-offer__addon .esgnpo-addon__price s { color: var(--c-faint-on-dark); }
.esgnpo-offer__addon .esgnpo-addon__name { color: #fff; }
.esgnpo-offer__addon .esgnpo-addon__note { width: 100%; color: var(--c-muted-on-dark); font-size: 12px !important; }
@media (max-width: 760px) {
  .esgnpo-formcard__addon .esgnpo-addon__price b { font-size: 19px !important; }
}