/* Invisalign template D. Base is template C's system, re-prefixed, because C carries seven of
   the eight sections. Template B's hero and pricing are adapted into it at the end of this file
   rather than pasted in, so the radii, tints, button sizes and tick style stay consistent.
   Built on Nacho's feedback of 20 Oct 2026. */

/* ==========================================================================================
   Invisalign template C. Written from scratch against Dentology's Clear Smiles page
   (clear-smiles-dental-implants.patientsmiles.co.uk). No rule here is derived from inv-a.css or
   inv-b.css, and the markup uses its own id- prefix.

   What the reference does, measured at 1440:
     - ONE typeface, Nunito, a rounded sans. No serif anywhere on the page. That is the single
       biggest difference from A and B, which both pair Spectral with Poppins. Ours is set in
       Poppins throughout, so the single-sans character carries across in the Hills family.
     - Ink rgb(34,42,65), a deep navy. Body copy rgba(17,17,17,.6). Accent rgb(153,121,84), a
       bronze. Tint bands #f3f7f8. Their navy and bronze are Clear Smiles brand colours, so ours
       become the Hills ink and gold; the structure is copied, the brand is not.
     - Type scale: 44/800 h1, 36/700 h2, 24/700 hero subhead, 20/700 small headings, 16/700
       strip and accordion headings, 15/400 body with 15/700 inline strongs, 14/400 strip copy,
       12/700 eyebrow.
     - Generous radii: form card 18, inputs 10, images 18 and 22, review cards 22, pill buttons.
     - Container 1152 at the hero, 1088 to 1104 elsewhere, gaps 48 to 64.
   ========================================================================================== */

/* ==========================================================================================
   BRAND TOKENS, measured from appolinedentalcare.co.uk at 1440 on 20 Oct 2026.
   The live site runs a three-surface system: white, a cream band, and the gold. The ink is the
   same charcoal on all three, so the gold is a FILL and never a text colour on white.

     --d-gold        #51169B   the site's own --primary-color. Bands, slabs, primary buttons.
     --d-gold-ink    #51169B   same hue (33deg) darkened until it passes AA as text on all three
                               surfaces: 6.16:1 on white, 4.85:1 on both creams.
     --d-cream       #EFEAF6   the live testimonial band, the creamiest of their off-whites.
     --d-cream-soft  #F7F5FB   their lighter cream, for a card sitting inside a cream band.
     --d-ink         #311849   every heading, and all body copy set on the gold.
     --d-ink-body    #2A2340   body copy on white and cream, as the live site sets it.

   The live site does put #51169B text on white in two places ("Find More", "Read More") at
   2.12:1. That is a real accessibility failure on their site and is not copied here.
   ========================================================================================== */
.eso-lp {
  --d-gold:       #51169B;
  --d-gold-ink:   #51169B;
  --d-gold-deep:  #3D1073;
  --d-cream:      #EFEAF6;
  --d-cream-soft: #F7F5FB;
  --d-near-white: #FEFDFF;
  --d-ink:        #311849;
  --d-ink-body:   #2A2340;
  --d-ink-soft:    #5c5d61;   /* #6f7076 only made 3.88:1 once the band went to the real
                                cream; this passes on white, both creams and the gold */
  --d-line:        #E7E2F0;   /* section hairlines */
  --d-field-line:  #CFC7DA;   /* inputs need more edge than a hairline */
  --d-placeholder: #8d8a85;
}

.eso-lp .id-wrap {
  width: min(1152px, 100% - 48px);
  margin-inline: auto;
}

/* ---- type -------------------------------------------------------------------------------
   One family for the whole page, to match the reference's single-typeface treatment. */
.eso-lp .id-bar,
.eso-lp .id-hero,
.eso-lp .id-strip,
.eso-lp .id-consult,
.eso-lp .id-claim,
.eso-lp .id-transform,
.eso-lp .id-trust,
.eso-lp .id-why {
  font-family: var(--sans);
  color: var(--ink);
}

.eso-lp .id-hero h1 {
  margin: 0;
  font-family: var(--sans) !important;
  font-size: 2.75rem !important;      /* 44 */
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  text-align: left !important;
  color: var(--ink) !important;
}
.eso-lp .id-hero h2 {
  margin: 14px 0 0;
  font-family: var(--sans) !important;
  font-size: 1.5rem !important;       /* 24 */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  text-align: left !important;
  color: var(--ink) !important;
}
.eso-lp .id-consult h2,
.eso-lp .id-transform h2,
.eso-lp .id-trust h2,
.eso-lp .id-why h2 {
  margin: 0 0 16px;
  font-family: var(--sans) !important;
  font-size: 2.25rem !important;      /* 36 */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.eso-lp .id-consult h2,
.eso-lp .id-transform h2,
.eso-lp .id-why h2 { text-align: left !important; }
.eso-lp .id-trust h2 { text-align: center !important; }

.eso-lp .id-strip h3,
.eso-lp .id-acc__item summary span {
  font-family: var(--sans) !important;
  font-size: 1rem !important;         /* 16 */
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.eso-lp .id-transform__reviews h3 {
  margin: 0;
  font-family: var(--sans) !important;
  font-size: 1.25rem !important;      /* 20 */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.eso-lp .id-hero p,
.eso-lp .id-consult p {
  margin: 14px 0 0;
  font-size: .9375rem !important;     /* 15 */
  font-weight: 400;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
}
.eso-lp .id-hero p strong,
.eso-lp .id-consult p strong,
.eso-lp .id-strip p strong,
.eso-lp .id-trust__lede strong {
  font-weight: 700;
  color: var(--ink) !important;
}
.eso-lp .id-eyebrow {
  margin: 0 0 8px !important;
  font-size: .75rem !important;       /* 12 */
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--d-gold-ink) !important;
}

/* ---- buttons ----------------------------------------------------------------------------
   Reference has two: a bronze pill on the form and a black pill everywhere else, both uppercase. */
.eso-lp .id-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 28px;
  border-radius: 999px;
  transition: background .18s ease;
}
.eso-lp .id-btn--dark { background: #51169B; color: #fff; }
.eso-lp .id-btn--dark:hover { background: #3D1073; }

/* ---- sticky bar -------------------------------------------------------------------------- */
.eso-lp .id-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--d-line);
}
.eso-lp .id-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
}
.eso-lp .id-bar__logo { height: 66px; width: auto; max-width: 190px; }

/* ---- hero: copy and the form card left, a square photo right ------------------------------ */
.eso-lp .id-hero { background: #fff; padding: 40px 0 56px; }
.eso-lp .id-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.eso-lp .id-hero__offer { color: var(--ink) !important; font-weight: 400; }
/* The reference ships its hero as one flattened collage PNG, 562x571. Measured off it:
     left photo   x 32-268, y 112-464   (236x352, a 2:3 portrait, pushed down)
     right top    x 280-528, y 32-256   (248x224)
     right bottom x 280-528, y 272-528  (248x256)
     a tan rounded slab behind the left photo's bottom-right corner, another behind the right
     column showing through the gap between the two photos, and a dot grid top-left and bottom-left.
   Rebuilt here as a real layout so it reflows, with our gold standing in for their tan. */
.eso-lp .id-hero__media {
  position: relative;
  display: grid;
  /* reference columns are 236 and 248 wide with a 12px gutter in a 562 box, which normalised to
     a full-width container is 47.6%, 50% and a 2.4% gutter */
  grid-template-columns: 47.6% 50%;
  gap: 2.4%;
  align-items: start;
}
/* The stagger: on the reference the right column starts 32px down and the left 112px down, of a
   562 wide collage, so 5.7% and 14.2% of the container. A percentage margin on a grid item
   resolves against that item's own width, not the container, so those become 13% of the 44%
   column and 33.8% of the 42% column. */
.eso-lp .id-collage__left   { position: relative; margin-top: 41.8%; }   /* 19.9% of the container */
.eso-lp .id-collage__right  { position: relative; display: grid; gap: 5.6%; margin-top: 11.4%; }  /* 5.7% */
.eso-lp .id-hero__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
.eso-lp .id-collage__left img  { aspect-ratio: 236 / 352; }
.eso-lp .id-collage__right img:first-of-type { aspect-ratio: 248 / 224; }
.eso-lp .id-collage__right img:last-of-type  { aspect-ratio: 248 / 256; }

.eso-lp .id-collage__slab {
  position: absolute;
  z-index: 0;
  background: var(--d-gold);
  border-radius: 18px;
}
/* behind the left photo, peeking out at the bottom right */
.eso-lp .id-collage__slab    { right: -14%; bottom: -8%; width: 56%; height: 26%; }
/* behind the right column, showing through the gap between the two photos */
.eso-lp .id-collage__slab--r { left: -7%; right: auto; top: 28%; bottom: auto; width: 34%; height: 26%; }

.eso-lp .id-collage__dots {
  position: absolute;
  z-index: 0;
  width: 92px;
  height: 64px;
  background-image: radial-gradient(#51169B 1.6px, transparent 1.7px);
  background-size: 13px 13px;
}
.eso-lp .id-collage__dots--tl { left: 0; top: 8%; }
.eso-lp .id-collage__dots--bl { left: 2%; bottom: 2%; }

/* the form is a bordered white card with labels above each box, not placeholders alone */
.eso-lp .id-form { margin-top: 28px; }
.eso-lp .id-form .leadform {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.eso-lp .id-form .leadform__head { margin-bottom: 20px; }
.eso-lp .id-form .leadform__title {
  font-family: var(--sans) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  color: var(--ink) !important;
}
.eso-lp .id-form .leadform__sub { display: none; }
.eso-lp .id-form .field-group { display: grid; gap: 14px; }
.eso-lp .id-form .field--card { display: block; margin: 0; }
.eso-lp .id-form .field--card .field__l {
  display: block;
  margin-bottom: 6px;
  font-size: .875rem;              /* 14/700 labels, as the reference */
  font-weight: 700;
  color: var(--ink);
}
.eso-lp .id-form .field--card input,
.eso-lp .id-form .field--card select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--d-line);
  border-radius: 10px;
  background: #fff;
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--ink);
}
.eso-lp .id-form .field--card input::placeholder { color: var(--d-placeholder); }
.eso-lp .id-form .field--card input:focus,
.eso-lp .id-form .field--card select:focus {
  outline: 2px solid var(--d-gold-ink);
  outline-offset: 1px;
  border-color: var(--d-gold-ink);
}
.eso-lp .id-form .leadform__submit {
  margin-top: 20px;
  width: 100%;
  border-radius: 999px !important;
  background: var(--d-gold) !important;
  color: var(--d-ink) !important;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 18px 32px;
}
.eso-lp .id-form .leadform__submit:hover { background: var(--d-gold-deep) !important; }
.eso-lp .id-form .leadform__consent {
  margin-top: 12px;
  font-size: .8125rem !important;
  line-height: 1.6;
  color: var(--d-ink-soft) !important;
  text-align: center;
}
.eso-lp .id-form .leadform__consent a { color: var(--d-ink-soft); }

/* ---- three-up tint strips ----------------------------------------------------------------- */
.eso-lp .id-strip { background: var(--d-cream); padding: 44px 0; }
.eso-lp .id-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.eso-lp .id-strip__item { text-align: center; }
.eso-lp .id-strip__item img { width: 64px; height: 64px; margin: 0 auto 14px; display: block; }
.eso-lp .id-strip__item h3 { margin: 0 0 8px; }
.eso-lp .id-strip__item p {
  margin: 0;
  font-size: .875rem !important;     /* 14 */
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
}

/* ---- consultation: copy left, 4:5 photo right ---------------------------------------------- */
.eso-lp .id-consult { background: #fff; padding: 64px 0; }
.eso-lp .id-consult__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 64px;
  align-items: center;
}
.eso-lp .id-consult__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 18px;
  display: block;
}

/* ---- the accent panel: heading, patient quote, CTA, small print ---------------------------- */
.eso-lp .id-claim { background: #fff; padding: 0 0 64px; }
.eso-lp .id-claim__panel {
  background: var(--d-gold);
  border-radius: 18px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
.eso-lp .id-claim__avatar {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
}
.eso-lp .id-claim__lede {
  margin: 0;
  font-size: .9375rem !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .92) !important;
}
.eso-lp .id-claim__act { text-align: center; }
.eso-lp .id-claim__note {
  display: block;
  margin-top: 10px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .85);
}

/* ---- transform: accordion left, reviews right ---------------------------------------------- */
.eso-lp .id-transform { background: #fff; padding: 0 0 64px; }
.eso-lp .id-transform__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.eso-lp .id-transform__copy > p {
  margin: 0 0 22px;
  font-size: .9375rem !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
}
.eso-lp .id-acc { display: grid; gap: 12px; }
.eso-lp .id-acc__item {
  border: 1px solid var(--d-line);
  border-radius: 18px;
  padding: 16px 20px;
  background: #fff;
}
.eso-lp .id-acc__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.eso-lp .id-acc__item summary::-webkit-details-marker { display: none; }
.eso-lp .id-acc__item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
}
.eso-lp .id-acc__item[open] summary::after { content: "\2212"; }
.eso-lp .id-acc__item p {
  margin: 12px 0 0;
  font-size: .875rem !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
}

.eso-lp .id-transform__reviews h3 { text-align: center; color: var(--ink) !important; }
.eso-lp .id-gb {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 20px;
}
.eso-lp .id-gb__word { font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; }
.eso-lp .id-gb__word b:nth-child(1) { color: #4285f4; }
.eso-lp .id-gb__word b:nth-child(2) { color: #ea4335; }
.eso-lp .id-gb__word b:nth-child(3) { color: #fbbc05; }
.eso-lp .id-gb__word b:nth-child(4) { color: #4285f4; }
.eso-lp .id-gb__word b:nth-child(5) { color: #34a853; }
.eso-lp .id-gb__word b:nth-child(6) { color: #ea4335; }
.eso-lp .id-gb__label { font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.eso-lp .id-gb__score { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.eso-lp .id-gb__count { font-size: .875rem; color: var(--ink-soft); }

.eso-lp .id-rev { display: grid; gap: 16px; }
.eso-lp .id-rev__card {
  border: 1px solid var(--d-line);
  border-radius: 18px;
  padding: 20px 22px;
  background: #fff;
}
.eso-lp .id-rev__top { display: flex; align-items: center; gap: 12px; }
.eso-lp .id-rev__av {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}
.eso-lp .id-rev__av--a { background: var(--d-gold-ink); }
.eso-lp .id-rev__av--b { background: var(--d-ink); }
.eso-lp .id-rev__who { display: grid; }
.eso-lp .id-rev__who b { font-size: .875rem; font-weight: 700; color: var(--ink); }
.eso-lp .id-rev__when { font-size: .75rem; color: var(--ink-soft); }
.eso-lp .id-rev__card p {
  margin: 12px 0 0;
  font-size: .875rem !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
}
.eso-lp .id-rev__src { display: block; margin-top: 10px; font-size: .75rem; color: var(--ink-soft); }
.eso-lp .id-rev__src b { font-weight: 700; color: #1976d2; }

/* ---- trust: centred heading, four square case photos ---------------------------------------- */
.eso-lp .id-trust { background: #fff; padding: 0 0 64px; }
.eso-lp .id-trust__lede {
  margin: 0 auto 28px;
  max-width: 68ch;
  text-align: center;
  font-size: .875rem !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
}
.eso-lp .id-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.eso-lp .id-case { margin: 0; position: relative; }
.eso-lp .id-case img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
/* the source photos carry an orange badge that clashes with the palette, so the square crop
   leaves it out and the label is set here instead */
.eso-lp .id-case figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(43, 44, 47, .82);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eso-lp .id-trust__note {
  margin: 20px 0 0;
  text-align: center;
  font-size: .8125rem !important;
  line-height: 1.6 !important;
  color: var(--d-ink-soft) !important;
}

/* ---- why choose: checklist and CTA left, map right ------------------------------------------ */
.eso-lp .id-why { background: var(--d-cream); padding: 56px 0; }
.eso-lp .id-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.eso-lp .id-why__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.eso-lp .id-why__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
}
.eso-lp .id-why__list li::before {
  content: "\2713";
  flex: 0 0 24px;
  height: 24px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 2px solid var(--d-gold-ink);
  border-radius: 50%;
  color: var(--d-gold-ink);
  font-size: .75rem;
  font-weight: 700;
}
.eso-lp .id-why__map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: 18px;
  display: block;
}
.eso-lp .id-why__legal {
  margin: 26px 0 0;
  font-size: .8125rem !important;
  line-height: 1.7 !important;
  color: var(--d-ink-soft) !important;
}
.eso-lp .id-why__legal a { color: var(--d-ink-soft); }

/* ---- screen reader utility ------------------------------------------------------------------ */
.eso-lp .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- narrower viewports ---------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .eso-lp .id-hero__grid,
  .eso-lp .id-consult__grid,
  .eso-lp .id-transform__grid,
  .eso-lp .id-why__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .eso-lp .id-hero__media { order: 2; }
  .eso-lp .id-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .eso-lp .id-wrap { width: min(1152px, 100% - 32px); }
  .eso-lp .id-hero h1 { font-size: 2rem !important; }
  .eso-lp .id-hero h2 { font-size: 1.25rem !important; }
  .eso-lp .id-consult h2,
  .eso-lp .id-transform h2,
  .eso-lp .id-trust h2,
  .eso-lp .id-why h2 { font-size: 1.75rem !important; }
  .eso-lp .id-strip__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .eso-lp .id-claim__panel { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .eso-lp .id-form .leadform { padding: 22px; }
  .eso-lp .id-bar__cta { padding: 13px 18px; font-size: .75rem; white-space: nowrap; }
  .eso-lp .id-bar__logo { height: 52px; width: auto; }
}

/* ==========================================================================================
   Round two on template C, against Caylon's notes.
   ========================================================================================== */

/* ---- Hills type, not a single sans. Headings in the serif as on A and B, body in Poppins. --- */
.eso-lp .id-hero h1,
.eso-lp .id-hero h2,
.eso-lp .id-consult h2,
.eso-lp .id-transform h2,
.eso-lp .id-trust h2,
.eso-lp .id-why h2,
.eso-lp .id-transform__reviews h3,
.eso-lp .id-form .leadform__title { font-family: var(--serif) !important; }
.eso-lp .id-hero h1    { font-weight: 600 !important; letter-spacing: -.015em !important; }
.eso-lp .id-hero h2    { font-weight: 500 !important; }
.eso-lp .id-consult h2,
.eso-lp .id-transform h2,
.eso-lp .id-trust h2,
.eso-lp .id-why h2     { font-weight: 500 !important; letter-spacing: -.015em !important; }
/* was wrapping with "Boutique?" alone on the second line */
.eso-lp .id-why h2     { text-wrap: balance; }
.eso-lp .id-why__list li { text-wrap: pretty; }
.eso-lp .id-transform__reviews h3,
.eso-lp .id-form .leadform__title { font-weight: 500 !important; }
/* strip and accordion headings stay in the sans, they read as labels rather than headings */
.eso-lp .id-strip h3,
.eso-lp .id-acc__item summary span { font-family: var(--sans) !important; }

/* ---- container was too wide --------------------------------------------------------------- */
.eso-lp .id-wrap { width: min(1080px, 100% - 48px); }

/* ---- practice name and address, centred in the bar ----------------------------------------- */
.eso-lp .id-bar__id {
  flex: 1;
  margin: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---- strips: vertical rules between the three, as the reference ---------------------------- */
.eso-lp .id-strip__grid { gap: 0; }
.eso-lp .id-strip__item { padding: 4px 28px; }
.eso-lp .id-strip__item + .id-strip__item { border-left: 1px solid rgba(138, 106, 68, .22); }

/* ---- the heading after a strip was sitting too close to it --------------------------------- */
.eso-lp .id-trust { padding-top: 56px; }

/* ---- consultation: the portrait was too tall, leaving gaps above and below the copy --------- */
/* Desktop only. This sat outside any media query, so it beat the max-width:1000px rule that
   collapses the section and the copy column rendered 172px wide on a phone. */
@media (min-width: 1001px) {
  .eso-lp .id-consult__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
}
.eso-lp .id-consult__media { position: relative; }
.eso-lp .id-consult__media img { aspect-ratio: 1 / 1; }
/* the reference sets a gold bracket behind the top left of this image */
/* The bracket sits 12px outside the image on two sides, so for its inner curve to follow the
   image's corner rather than cutting across it, its own radius has to be the image's 22px plus the
   12px border, so 34px. A square inner corner left a white wedge over the photo's rounded corner. */
.eso-lp .id-consult__frame {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 46%;
  height: 46%;
  border-top: 12px solid var(--d-gold);
  border-left: 12px solid var(--d-gold);
  border-radius: 34px 0 0 0;
  z-index: 0;
}
.eso-lp .id-consult__media img { position: relative; z-index: 1; }

/* ---- FAQ and reviews must not read as one block -------------------------------------------
   Left: hairline-separated accordion rows, no boxes, as the reference.
   Right: the reviews sit inside their own bordered panel. */
.eso-lp .id-acc { gap: 0; }
.eso-lp .id-acc__item {
  border: 0;
  border-bottom: 1px solid var(--d-line);
  border-radius: 0;
  padding: 18px 0;
  background: none;
}
.eso-lp .id-acc__item:first-of-type { border-top: 1px solid var(--d-line); }
.eso-lp .id-revpanel {
  border: 1px solid var(--d-line);
  border-radius: 18px;
  padding: 24px;
  background: var(--d-cream-soft);
}
.eso-lp .id-revpanel .id-rev__card { background: #fff; border-color: var(--d-line); }

/* ---- case photos: the pairs used on A and B, three across ----------------------------------- */
.eso-lp .id-trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eso-lp .id-case figcaption { display: none; }

/* ---- footer strip ---------------------------------------------------------------------------- */
.eso-lp .id-foot {
  background: #fff;
  border-top: 1px solid var(--d-line);
  padding: 22px 0;
  font-family: var(--sans);
}
.eso-lp .id-foot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.eso-lp .id-foot__logo { width: 112px; height: auto; }
.eso-lp .id-foot__copy { margin: 0; font-size: .8125rem; color: var(--ink-soft); }
.eso-lp .id-foot__link { font-size: .8125rem; color: var(--ink-soft); }

@media (max-width: 860px) {
  .eso-lp .id-bar__id { display: none; }
  .eso-lp .id-strip__item + .id-strip__item { border-left: 0; border-top: 1px solid rgba(138, 106, 68, .22); padding-top: 24px; }
  .eso-lp .id-trust__grid { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .id-foot__row { flex-direction: column; text-align: center; }
}

/* The claim panel carries a patient quote, so the photo beside it is captioned as the dentist and
   the quote is attributed to the patient. Without both labels a portrait next to a quote reads as
   the speaker, which would put a patient's words in Dr Kang's mouth. */
.eso-lp .id-claim__who { margin: 0; text-align: center; }
.eso-lp .id-claim__who img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255, 255, 255, .4);
}
.eso-lp .id-claim__who figcaption {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, .88);
}

/* Inline bold emphasis in the body prose goes gold rather than ink. Applied to every prose section
   that uses the pattern, not just the hero, so the page reads as one rule.
   var(--d-gold-ink) is 4.97:1 on white and 4.7:1 on the tint, so it still passes as body text. */
.eso-lp .id-hero p strong,
.eso-lp .id-consult p strong,
.eso-lp .id-strip p strong,
.eso-lp .id-transform__copy p strong,
.eso-lp .id-trust__lede strong { color: var(--d-gold-ink) !important; }

/* Form heading up from 20px. */
.eso-lp .id-form .leadform__title { font-size: 1.75rem !important; line-height: 1.25 !important; }

/* Quote lines balanced to even length, and more air between the portrait and the text. */
.eso-lp .id-claim__panel  { gap: 38px; }
.eso-lp .id-claim__lede   { text-wrap: pretty; }

/* Active FAQ row. The rules move from the bottom of each item to the top, with a closing rule on
   the last, so that "the line above" is always the item's own border and can be restyled when open
   without doubling up against the previous item's. */
.eso-lp .id-acc__item { border-bottom: 0; border-top: 1px solid var(--d-line); }
.eso-lp .id-acc__item:last-of-type { border-bottom: 1px solid var(--d-line); }
.eso-lp .id-acc__item[open] { border-top: 2px solid var(--d-gold-ink); }
.eso-lp .id-acc__item[open] summary span,
.eso-lp .id-acc__item[open] summary::after { color: var(--d-gold-ink) !important; }

/* The legal line was wrapping to four lines inside the 520px left column. Moved to its own
   full-width row under both columns, which brings it down to two. */
.eso-lp .id-why__legal { grid-column: 1 / -1; margin-top: 34px; }

/* Balance the centred headings and ledes so they break into even lines rather than dropping a
   single word onto the last line. */
.eso-lp .id-trust h2,
.eso-lp .id-trust__lede,
.eso-lp .id-trust__note,
.eso-lp .id-strip__item h3 { text-wrap: balance; }

/* ---- QA pass on C -------------------------------------------------------------------------- */

/* The eyebrow is a <p> inside .id-consult, so `.eso-lp .id-consult p` (0,2,1) was outranking
   `.eso-lp .id-eyebrow` (0,2,0) and pulling it back to 15px grey. Reference: 12px/700 in the
   accent colour. */
.eso-lp .id-consult p.id-eyebrow {
  font-size: .75rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--d-gold-ink) !important;
  margin: 0 0 8px !important;
}
/* the Google wordmark is 500 on the reference; <b> was defaulting it to 700 */
.eso-lp .id-gb__word b { font-weight: 500; }

/* Contrast fixes. The claim panel is now the brand gold with ink on it, so the old
   white-on-dark-brown rules that used to live here have gone; see the type system block. */
.eso-lp .id-strip p strong        { color: var(--d-gold-ink) !important; }
.eso-lp .id-why__legal            { color: var(--d-ink-soft) !important; }

/* The strip separators flipped from vertical to horizontal at 860px but the columns did not
   collapse until 760px, so between those two widths the three items sat side by side with top
   borders. Collapsed at the same 860px, which also stops the three columns being 235px wide at
   tablet size, too narrow for an icon plus a heading plus two lines. */
@media (max-width: 860px) {
  .eso-lp .id-strip__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .eso-lp .id-strip__item { padding: 24px 0; }
}

/* ==========================================================================================
   TEMPLATE B's HERO, adapted into C's system.
   B's hero layout is what Nacho picked, so the structure is kept exactly: centred copy, four
   ticks, the offer line, an inline four-field form and the staggered four image collage with a
   slab behind it. What changes is only the surface, so it sits in C's page without a seam:
   image radius goes 12px to C's 18px, the slab matches, and the form boxes take C's 10px radius
   and hairline rather than B's hard border.
   ========================================================================================== */

.eso-lp .id-hero { background: #fff; padding: 35px 0 56px; }
.eso-lp .id-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
  align-items: center;
}

/* copy: centred, as B */
.eso-lp .id-hero__copy { text-align: center; }
.eso-lp .id-hero h1 {
  font-family: var(--serif) !important;
  font-size: 2.5rem !important;        /* 40, against C's 36 section headings */
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.eso-lp .id-hero h1 .id-em { font-weight: 500 !important; color: var(--d-gold-ink) !important; }

/* ticks: centred, bare gold check, icon riding with the text */
.eso-lp .id-hero .id-ticks { display: grid; justify-items: center; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
/* the base sheet puts margin: 0 0 .5em on every .eso-lp li, which stacked on top of the
   grid gap and was the real reason the rows sat 39px apart. Zeroed, so gap is the spacing. */
.eso-lp .id-hero .id-ticks li { margin: 0; text-wrap: pretty; }
/* both wrap to two lines on a phone and were stranding their last word */
.eso-lp .id-hero .leadform__title { text-wrap: balance; }
.eso-lp .id-hero .id-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
  text-align: left;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.eso-lp .id-hero .id-ticks li::before {
  content: "\2714";
  flex: 0 0 18px;
  margin-top: 3px;
  color: var(--d-gold-ink);
  font-size: .9375rem;
  font-weight: 700;
}

/* the offer line, as B: sans, 20/30, with the figure in gold */
.eso-lp .id-hero__offer {
  margin: 12px 0 0 !important;
  font-family: var(--sans) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  text-align: center !important;
}
.eso-lp .id-hero__offer .id-em { font-family: var(--sans) !important; font-weight: 700 !important; color: var(--d-gold-ink) !important; }

/* the inline four-field form, bare as B, but with C's field treatment */
.eso-lp .id-form { margin: 10px auto 0; max-width: 480px; text-align: left; }
.eso-lp .id-form .leadform { background: none; border: 0; padding: 0; box-shadow: none; }
.eso-lp .id-form .leadform__sub { display: none; }
.eso-lp .id-form .leadform__head { margin-bottom: 10px; }
.eso-lp .id-form .leadform__title {
  font-family: var(--serif) !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  color: var(--d-gold-ink) !important;
}
.eso-lp .id-form .leadform--plain .field-group { display: grid; gap: 13px; }
.eso-lp .id-form .field--plain { display: block; margin: 0; }
.eso-lp .id-form .field--plain .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.eso-lp .id-form .field--plain input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--d-line);
  border-radius: 10px;
  background: #fff;
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--ink);
}
.eso-lp .id-form .field--plain input::placeholder { color: var(--d-placeholder); }
.eso-lp .id-form .field--plain input:focus { outline: 2px solid var(--d-gold-ink); outline-offset: 1px; border-color: var(--d-gold-ink); }
.eso-lp .id-form .leadform__submit {
  margin-top: 15px;
  width: 100%;
  border-radius: 999px !important;
  background: var(--d-gold) !important;
  color: var(--d-ink) !important;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 18px 32px;
}
.eso-lp .id-form .leadform__submit:hover { background: var(--d-gold-deep) !important; }
.eso-lp .id-form .leadform__consent {
  margin-top: 12px;
  font-size: .8125rem !important;
  line-height: 1.6;
  color: var(--d-ink-soft) !important;
  text-align: center;
}
.eso-lp .id-form .leadform__consent a { color: var(--d-ink-soft); }

/* the collage. Proportions measured off B: columns 47.6% and 50% with a 2.4% gutter, the right
   column starting 5.7% down and the left 19.9%, of the container width. */
.eso-lp .id-hero__media {
  position: relative;
  display: grid;
  grid-template-columns: 47.6% 50%;
  gap: 2.4%;
  align-items: start;
  margin-top: clamp(70px, 7vw, 95px);
}
.eso-lp .id-hero__media::before { content: none; }
.eso-lp .id-hero__col    { position: relative; z-index: 1; display: grid; }
.eso-lp .id-hero__col--a { margin-top: 41.8%; }
.eso-lp .id-hero__col--b { gap: 5.6%; margin-top: 11.4%; }
.eso-lp .id-hero__shot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;      /* C's radius, not B's 12 */
  display: block;
}
.eso-lp .id-hero__shot--1 { aspect-ratio: 4 / 5; }
.eso-lp .id-hero__shot--3 { aspect-ratio: 6 / 7; }
.eso-lp .id-hero__shot--2 { aspect-ratio: 21 / 20; }
.eso-lp .id-hero__shot--4 { aspect-ratio: 41 / 60; object-position: center top; }
.eso-lp .id-hero__slab {
  position: absolute;
  z-index: 0;
  left: 31.6%;
  top: 21.7%;
  width: 59.6%;
  bottom: 16.9%;
  height: auto;
  background: var(--d-gold);  /* the brand gold, as the live site uses it */
  border-radius: 18px;
}

/* ---- B's pricing block, in C's card language ------------------------------------------------ */
.eso-lp .id-pricing { background: #fff; padding: 0 0 64px; }
.eso-lp .id-pricing h2 { text-align: center !important; }
.eso-lp .id-pricing .id-lede {
  margin: 0 auto 32px;
  max-width: 70ch;
  text-align: center;
  font-size: .9375rem !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
}
.eso-lp .id-pricing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.eso-lp .id-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: 18px;      /* C's panel radius */
  padding: 30px 26px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
.eso-lp .id-card__head { padding-bottom: 18px; border-bottom: 1px solid var(--d-line); }
.eso-lp .id-card__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem !important;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.eso-lp .id-card__sub {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: .9375rem !important;
  font-weight: 600;
  color: var(--ink-soft);
}
.eso-lp .id-card__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.eso-lp .id-card__list li {
  position: relative;
  padding: 0;
  font-family: var(--sans);
  font-size: .9375rem !important;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
}
.eso-lp .id-card__list li::before { content: none; }
/* 20 Oct: one weight, one colour. Only the check is brown, so a wrapping
   two-line bullet reads as a single sentence instead of two half-sentences. */
.eso-lp .id-card__list li b { font-weight: inherit; color: inherit; }
.eso-lp .id-card__list li b::before { content: "\2714\00a0"; color: var(--d-gold-ink); font-weight: 700; }
.eso-lp .id-card__list li span { display: block; font-weight: 400; }
/* these bullets wrap to two lines on a phone, so stop the last word stranding */
.eso-lp .id-card__list li,
.eso-lp .id-card__list li span { text-wrap: pretty; }
.eso-lp .id-card p.id-card__accent {
  margin: auto 0 0;
  padding-top: 22px;
  font-family: var(--sans);
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--d-gold-ink) !important;
}
.eso-lp .id-card p.id-card__price {
  display: block;
  margin: 10px 0 0;
  padding-top: 0;
  border-top: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 1.75rem !important;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink) !important;
}
.eso-lp .id-pricing__cta { margin-top: 28px; text-align: center; }
.eso-lp .id-pricing__foot { margin-top: 26px; text-align: center; }
.eso-lp .id-pricing__foot p {
  margin: 0 auto;
  max-width: 76ch;
  font-size: .9375rem !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
}
.eso-lp .id-pricing__terms { margin-top: 10px !important; font-size: .8125rem !important; color: var(--d-ink-soft) !important; }

@media (max-width: 1000px) {
  .eso-lp .id-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .eso-lp .id-hero__media { order: 2; margin-top: 8px; }
  .eso-lp .id-pricing__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .eso-lp .id-hero h1 { font-size: 2rem !important; }
  .eso-lp .id-hero__copy, .eso-lp .id-hero h1, .eso-lp .id-hero__offer { text-align: left !important; }
  .eso-lp .id-hero .id-ticks { justify-items: start; }
  .eso-lp .id-form .leadform__title { text-align: left !important; }
}

/* The pricing section came from B as `id-sec id-pricing`, so it was not in C's section-heading
   rule and fell through to a base clamp at 32.8px while every other section heading is 36px. */
.eso-lp .id-pricing h2 {
  font-family: var(--serif) !important;
  font-size: 2.25rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.eso-lp .id-pricing h2 .id-em { font-weight: 500 !important; color: var(--d-gold-ink) !important; }

/* A bare .id-btn had no background and inherited a washed gold, so B's pricing CTA arrived as
   near-invisible text at 2.85:1. The markup now carries --dark like every other CTA, and the base
   class defaults to the same treatment so a future paste cannot produce an invisible button. */
.eso-lp .id-btn { background: #51169B; color: #fff; }
.eso-lp .id-btn:hover { background: #3D1073; }

/* C's 48px fields are 9px taller than B's, so across four boxes the hero submit sat only 20px above
   the fold at 1209x866. 44px keeps C's roomier feel while giving the button back some air. */
.eso-lp .id-form .field--plain input { height: 44px; }

/* The collage carried B's 85px top margin, but D's copy column is taller than B's, so the images
   sat 154px below the h1 and read as dropped. Lifted by about 55px. D only; B keeps its own. */
@media (min-width: 1001px) {
  .eso-lp .id-hero__media { margin-top: clamp(24px, 2.4vw, 34px); }
}

/* Two fixes to the collage.
   1. The hero grid is align-items:center, so the media column was vertically centred and absorbed
      half of every margin change, which is why the last lift moved it only 28px. Anchored to the
      top of the row instead, so margin-top now controls the position directly.
   2. Only the right column had a row gap, so the left pair touched while the right pair did not.
      Both now use the same gap. The reference has a gap on both, 10px left and 12px right of a
      478px box, which is the same thing visually. */
@media (min-width: 1001px) {
  .eso-lp .id-hero__media  { align-self: start; margin-top: 6px; }
}
.eso-lp .id-hero__col--a,
.eso-lp .id-hero__col--b { gap: clamp(8px, 1.1vw, 13px); }

/* One checkmark across the page. The why-choose list carried C's outlined gold circles while the
   hero bullets and the pricing cards use a bare gold tick; standardised on the bare one. */
.eso-lp .id-why__list li::before {
  content: "\2714";
  flex: 0 0 18px;
  height: auto;
  margin-top: 2px;
  border: 0;
  border-radius: 0;
  background: none;
  display: block;
  color: var(--d-gold-ink);
  font-size: .9375rem;
  font-weight: 700;
  text-align: left;
}

/* Tick sat 28px from its text (18px basis plus a 10px gap), which read as detached. Tightened to
   21px. Collage nudged down from 6px to 22px. */
.eso-lp .id-hero .id-ticks li          { gap: 7px; }
.eso-lp .id-hero .id-ticks li::before  { flex: 0 0 14px; }
@media (min-width: 1001px) {
  .eso-lp .id-hero__media { margin-top: 22px; }
}

/* The accent line and the price sat directly on the card, so they read as a continuation of the
   bullet list. Wrapped in an off-white panel inside the card, which separates them and gives the
   price a resting place. The bottom-pinning moves from the accent line onto the wrapper. */
.eso-lp .id-card__foot {
  margin: auto 0 0;
  padding: 18px 16px 16px;
  background: var(--d-cream-soft);
  border-radius: 14px;
}
.eso-lp .id-card p.id-card__accent { margin: 0; padding-top: 0; }
.eso-lp .id-card p.id-card__price  { margin: 8px 0 0; }

/* ==========================================================================================
   TYPE SYSTEM
   Measured from appolinedentalcare.co.uk at a 1440 viewport on 20 October 2026. Everything
   above this block is layout; this block is the single place the type scale is set, so the
   template can be lifted into the next Hills page without re-deriving it.

   What the live site actually does:

     role            family    size      weight  line-height   tracking
     h1              Spectral  38.4px    600     38.4  (1.0)   normal
     h2              Spectral  38.4px    600     46.08 (1.2)   normal
     h3 large        Spectral  33px      600     39.6  (1.2)   normal
     h3              Spectral  25px      600     30    (1.2)   normal
     h4              Spectral  27.6px    600     33.12 (1.2)   normal
     body            Poppins   15.4px    400     23.1  (1.5)   normal
     lede            Poppins   19.76px   300     29.64 (1.5)   normal
     label / button  Poppins   15.4px    500     --            0.03em

   Three things we were getting wrong, and they are the reason the typography felt unresolved:
     1. Spectral was set at 500. The brand runs it at 600 everywhere, with no exceptions.
     2. Headings carried -.015em and -.02em tracking. The brand tracks every heading at normal;
        the only tracking on the site is a positive 0.03em on small sans labels.
     3. Body copy drifted between 15px and 15.4px with three different line-heights. One value.

   Deliberate departures, both flagged to Caylon:
     - The submit button stays uppercase at 600. The live primary button is sentence case at
       500, which is a brand button, not a landing-page conversion CTA.
     - Corner radii stay on the house 5px/3px rule rather than the site's square 0.
   ========================================================================================== */

/* ---- display: h1 and section h2 both sit on the 38.4px step ------------------------------- */
.eso-lp .id-hero h1,
.eso-lp .id-consult h2,
.eso-lp .id-transform h2,
.eso-lp .id-trust h2,
.eso-lp .id-why h2,
.eso-lp .id-pricing h2 {
  font-family: var(--serif) !important;
  font-size: 2.4rem !important;        /* 38.4 */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  color: var(--d-ink) !important;
}
.eso-lp .id-hero h1 .id-em,
.eso-lp .id-pricing h2 .id-em { font-weight: 600 !important; color: var(--d-gold-ink) !important; }

/* ---- the larger sub-heading step, 33px --------------------------------------------------- */
.eso-lp .id-transform__reviews h3,
.eso-lp .id-form .leadform__title {
  font-family: var(--serif) !important;
  font-size: 2.0625rem !important;     /* 33 */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}
.eso-lp .id-form .leadform__title { color: var(--d-gold-ink) !important; }
.eso-lp .id-transform__reviews h3 { color: var(--d-ink) !important; }

/* ---- the 25px step: anything that titles a card ------------------------------------------- */
.eso-lp .id-card__title {
  font-family: var(--serif) !important;
  font-size: 1.5625rem !important;     /* 25 */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  color: var(--d-ink) !important;
}

/* ---- body: one size, one leading, one colour ---------------------------------------------- */
.eso-lp .id-hero p,
.eso-lp .id-consult p,
.eso-lp .id-strip__item p,
.eso-lp .id-transform__copy > p,
.eso-lp .id-acc__item p,
.eso-lp .id-rev__card p,
.eso-lp .id-pricing__foot p,
.eso-lp .id-why__list li,
.eso-lp .id-card__list li,
.eso-lp .id-hero .id-ticks li {
  font-family: var(--sans) !important;
  font-size: .9625rem !important;      /* 15.4 */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  color: var(--d-ink-body) !important;
}

/* ---- lede: the one lighter weight the brand uses ------------------------------------------ */
.eso-lp .id-pricing .id-lede,
.eso-lp .id-lede,
.eso-lp .id-trust__lede,
.eso-lp p.id-hero__offer {
  font-family: var(--sans) !important;
  font-size: 1.235rem !important;      /* 19.76 */
  font-weight: 300 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  color: var(--d-ink-body) !important;
}
.eso-lp p.id-hero__offer .id-em,
.eso-lp .id-trust__lede strong { font-weight: 600 !important; color: var(--d-gold-ink) !important; }

/* ---- labels: the only place the brand tracks anything ------------------------------------- */
.eso-lp .id-strip h3,
.eso-lp .id-acc__item summary span,
.eso-lp p.id-eyebrow,
.eso-lp .id-card__sub {
  font-family: var(--sans) !important;
  font-size: .9625rem !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
}

/* ---- the claim band is the gold surface: ink on gold, 5.61:1 ------------------------------ */
.eso-lp .id-claim__lede {
  font-family: var(--sans) !important;
  font-size: .9625rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, .92) !important;
}
.eso-lp .id-claim__note { color: rgba(255, 255, 255, .8) !important; }
.eso-lp .id-claim__who figcaption { color: #fff !important; }
.eso-lp .id-claim__who img { border-color: rgba(255, 255, 255, .4); }

/* ---- the submit button carries the purple fill, so its label is white for legibility -------- */
.eso-lp .id-form .leadform__submit {
  font-size: .9625rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: #fff !important;
}
.eso-lp .id-form .leadform__submit:hover { color: #fff !important; }

/* ---- inputs: --d-line is a section hairline and vanishes as a field edge ------------------- */
.eso-lp .id-form .field--plain input,
.eso-lp .id-form .field--card input,
.eso-lp .id-form .field--card select,
.eso-lp .id-form .field--card textarea { border-color: var(--d-field-line) !important; }

/* ---- the display step down a phone -------------------------------------------------------
   The brand only drops its h1 from 38.4 to 35.28 on a narrow screen, but the live h1 is one
   line of a different sentence. Ours is a three-line hero, so it needs the fuller step down.
   These restate the 760px rules above, which the type block otherwise overrides. */
@media (max-width: 760px) {
  .eso-lp .id-hero h1 { font-size: 2rem !important; }          /* 32 */
  .eso-lp .id-consult h2,
  .eso-lp .id-transform h2,
  .eso-lp .id-trust h2,
  .eso-lp .id-why h2,
  .eso-lp .id-pricing h2 { font-size: 1.75rem !important; }    /* 28 */
  .eso-lp .id-transform__reviews h3,
  .eso-lp .id-form .leadform__title { font-size: 1.5rem !important; }   /* 24 */
  .eso-lp .id-card__title { font-size: 1.375rem !important; }  /* 22 */
  .eso-lp .id-pricing .id-lede,
  .eso-lp .id-lede,
  .eso-lp .id-trust__lede,
  .eso-lp p.id-hero__offer { font-size: 1.0625rem !important; }  /* 17 */
}

/* ==========================================================================================
   TYPE SYSTEM, part two: the small and button tiers.

   The first block fixed the display / body / lede spine. A conformance pass across every text
   node then showed the small text and the buttons were still ad hoc: legal copy at 13px, a
   figcaption at 11px, an accent line at 16/700, a price at 28/700, and the anchor pills at
   14/700/.04em against a submit at 15.4/600/.06em.

   The brand's own smallest step is 13px (`--wp--preset--font-size--small` on the live site), so
   small settles there, with a 12px eyebrow kept deliberately below it as a label, not body copy.
   ========================================================================================== */

/* ---- small: legal lines, footnotes, captions ---------------------------------------------- */
.eso-lp .id-why__legal,
.eso-lp .id-pricing__terms,
.eso-lp .id-trust__note,
.eso-lp .id-foot__copy,
.eso-lp .id-foot__link,
.eso-lp .id-claim__note,
.eso-lp .id-claim__who figcaption {
  font-family: var(--sans) !important;
  font-size: .8125rem !important;    /* 13 */
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
}
.eso-lp .id-claim__who figcaption { font-weight: 600 !important; }

/* ---- buttons: one tier, so the pills and the submit stop disagreeing ---------------------- */
.eso-lp .id-btn,
.eso-lp .id-bar__cta,
.eso-lp .id-form .leadform__submit {
  font-family: var(--sans) !important;
  font-size: .9625rem !important;    /* 15.4, the label step */
  font-weight: 600 !important;
  letter-spacing: .06em !important;  /* uppercase needs more than the brand's .03em */
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* ---- the pricing card foot: the accent joins the body step, the figure keeps its own size -- */
.eso-lp .id-card p.id-card__accent {
  font-size: .9625rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* ---- odds and ends that had drifted off the scale ----------------------------------------- */
.eso-lp .id-bar__id      { font-size: .9625rem !important; line-height: 1.5 !important; }
.eso-lp .id-card__sub    { line-height: 1.35 !important; }

/* the pricing lede was stranding "anything." on its third line */
.eso-lp .id-pricing .id-lede,
.eso-lp .id-lede,
.eso-lp .id-trust__lede,
.eso-lp p.id-hero__offer { text-wrap: pretty; }

/* ---- claim band, 761 to 1130 -------------------------------------------------------------
   The panel is a three-column strip (photo | copy | CTA) that only collapsed at 760. When the
   review quote replaced the short review the middle column became the long one, and below the
   container's 1080 cap it squeezed hard: 459px and five lines at 1100, 360px and six at 1001,
   179px and eleven at 820. The container stops shrinking at 1128, which is where three columns
   stop working, so two rows from there down: photo beside the copy, CTA underneath full width. */
@media (max-width: 1130px) and (min-width: 761px) {
  .eso-lp .id-claim__panel { grid-template-columns: auto minmax(0, 1fr); row-gap: 22px; }
  .eso-lp .id-claim__act   { grid-column: 1 / -1; }
}

/* the third strip-alt item was breaking as "Attachments, adjustments and / reviews," */
.eso-lp .id-strip__item p,
.eso-lp .id-strip__item h3 { text-wrap: pretty; }

/* ---- the last of the orphans ------------------------------------------------------------
   The consult h2 was dropping "Consultation" onto a line of its own, and the FAQ answers strand
   their last word too. Closed accordion panels still lay out in Chrome, so these only became
   visible on opening the item; caught by measuring rendered line boxes rather than reading. */
.eso-lp .id-consult h2,
.eso-lp .id-transform h2,
.eso-lp .id-trust h2,
.eso-lp .id-pricing h2 { text-wrap: balance; }
.eso-lp .id-acc__item p { text-wrap: pretty; }

/* ---- orphan control across the whole body tier --------------------------------------------
   Measured by rebuilding the rendered line boxes word by word at 1440, 1024, 768 and 390 with
   every accordion forced open. Everything listed here was stranding its last word at one width
   or another: the transform intro at 1024, and at 390 the consult body, a FAQ question and a
   review card. */
.eso-lp .id-consult p,
.eso-lp .id-transform__copy > p,
.eso-lp .id-rev__card p,
.eso-lp .id-pricing__foot p,
.eso-lp .id-acc__item summary span,
.eso-lp .id-claim__lede,
.eso-lp .id-why__legal { text-wrap: pretty; }

/* ---- the h1 carries hard breaks, so it needs one more step on a small phone ----------------
   "Without Anyone Noticing" is the longest of its three lines and at 390 it wrapped again,
   leaving "Noticing" alone. 28px fits it on one line. */
@media (max-width: 420px) {
  .eso-lp .id-hero h1 { font-size: 1.75rem !important; }
}

/* ---- the sticky bar CTA keeps its own small step ------------------------------------------
   Unifying the button tier at 15.4px pushed this one to 261px wide, 27px past a 390 viewport,
   and because nothing in the chain scrolls it was clipped rather than overflowing. The bar is
   a fixed-width furniture element, not a page CTA, so it steps down on a phone. */
@media (max-width: 760px) {
  .eso-lp .id-bar__cta {
    font-size: .75rem !important;
    letter-spacing: .04em !important;
    padding: 13px 18px !important;
  }
}

/* ---- 360 and under ------------------------------------------------------------------------
   Pre-existing, not a regression: logo 112 plus a 206px nowrap CTA is 318px against a 288px row
   at 320, so the CTA ran off the edge. Both step down here. */
@media (max-width: 360px) {
  .eso-lp .id-bar__logo { width: 92px; }
  .eso-lp .id-bar__cta {
    font-size: .6875rem !important;
    letter-spacing: .03em !important;
    padding: 11px 14px !important;
  }
}

/* ---- last-line singles at 320 --------------------------------------------------------------
   Only last-line orphans count; a single word mid-paragraph in a 272px column is just a narrow
   column. At 320 the ones that were real: the reviews heading, and both pricing figures. */
.eso-lp .id-transform__reviews h3 { text-wrap: balance; }
@media (max-width: 360px) {
  .eso-lp .id-card p.id-card__price { font-size: 1.375rem !important; }   /* 22, was 28 */
}

/* Hero form title stays on ONE line at any width (the ortho "Discover your straighter smile"
   is the longest); higher specificity (.id-hero .id-form) beats the per-breakpoint size rules,
   and the clamp scales it down on narrow columns so nowrap never overflows. */
.eso-lp .id-hero .id-form .leadform__title {
  white-space: nowrap !important;
  font-size: clamp(1.02rem, 4.4vw, 1.6rem) !important;
}

/* The claim panel is royal purple (#51169B), so its CTA needs a contrasting fill or it vanishes.
   All other CTAs sit on white/light sections and stay #51169B. */
.eso-lp .id-claim .id-btn { background: #311849 !important; }
.eso-lp .id-claim .id-btn:hover { background: #241236 !important; }