/* Elegant Smiles — landing page design system.
 * Loaded on every version; v2.css / v3.css / v4.css only add what makes a version different.
 * Brand: soft gold #51169B buttons, #311849 charcoal text, Spectral headings, Poppins body, square
 * corners, generous white space. Emergency pages add a red accent via .eso-campaign-emergency*.
 * Everything is scoped under .eso-lp (the body class) so nothing can leak into the rest of the site.
 */

.eso-lp {
  --gold: #51169B;
  --gold-dark: #3D1073;
  --gold-soft: #EFEAF6;
  --ink: #311849;
  --ink-soft: #5c5d61;
  --ink-faint: #8a8b8f;
  --deep: #2A2340;
  --line: #E7E2F0;
  --cream: #FAF9FC;
  --white: #fff;
  --alert: #b8382f;
  --alert-soft: #fbeeec;
  --ok: #2f7a4f;
  --radius: 0px;
  --shadow: 0 18px 48px rgba(54, 55, 58, .1);
  --shadow-sm: 0 6px 20px rgba(54, 55, 58, .07);
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Montserrat', Georgia, 'Times New Roman', serif;
  --wrap: 1180px;
  --accent: var(--gold);
  --accent-dark: var(--gold-dark);
}

.eso-lp.eso-campaign-emergency,
.eso-lp.eso-campaign-emergency-v2,
.eso-lp.eso-campaign-emergency-v3,
.eso-lp.eso-campaign-emergency-v4 {
  --accent: #b8382f;
  --accent-dark: #93291f;
}

/* ---------- reset-ish ---------- */
.eso-lp * { box-sizing: border-box; }
.eso-lp { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.eso-lp img, .eso-lp video { max-width: 100%; height: auto; display: block; }
.eso-lp-main { overflow-x: clip; }  /* clip, not hidden: `hidden` makes this a scroll container,
   which silently kills `position: sticky` on the header inside it. */
.eso-lp h1, .eso-lp h2, .eso-lp h3, .eso-lp h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0 0 .5em; line-height: 1.18; letter-spacing: -.01em; }
.eso-lp h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.eso-lp h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.eso-lp h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.eso-lp p { margin: 0 0 1.1em; }
.eso-lp a { color: var(--accent-dark); }
.eso-lp strong { font-weight: 600; }
.eso-lp ul { margin: 0 0 1.2em; padding: 0 0 0 1.1em; }
.eso-lp li { margin: 0 0 .5em; }
.eso-lp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.eso-lp .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.eso-lp .wrap--narrow { width: min(100% - 40px, 860px); margin-inline: auto; }
.eso-lp .sec { padding: clamp(48px, 7vw, 92px) 0; }
.eso-lp .sec--cream { background: var(--cream); }
.eso-lp .sec--gold { background: var(--gold-soft); }
.eso-lp .sec--deep { background: var(--deep); color: #ece9e4; }
.eso-lp .sec--deep h2, .eso-lp .sec--deep h3 { color: #fff; }
.eso-lp .sec--tight { padding: clamp(32px, 4vw, 56px) 0; }
.eso-lp .sec__head { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 48px); }
.eso-lp .sec__head--center { margin-inline: auto; text-align: center; }
.eso-lp .eyebrow { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 .9em; }
.eso-lp .sec--deep .eyebrow { color: var(--gold); }
.eso-lp .lede { font-size: 1.08rem; color: var(--ink-soft); }
.eso-lp .grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.eso-lp .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eso-lp .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eso-lp .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- buttons ---------- */
.eso-lp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  padding: 17px 30px; border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.eso-lp .btn:hover { transform: translateY(-1px); }
.eso-lp .btn-gold { background: var(--accent); color: #fff; }
.eso-lp .btn-gold:hover { background: var(--accent-dark); color: #fff; }
.eso-lp .btn-ink { background: var(--deep); color: #fff; }
.eso-lp .btn-ink:hover { background: #17181a; color: #fff; }
.eso-lp .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.eso-lp .btn-ghost:hover { border-color: var(--ink); }
.eso-lp .btn-light { background: #fff; color: var(--ink); }
.eso-lp .btn-block { width: 100%; }
.eso-lp .btn-lg { padding: 20px 36px; font-size: 1.06rem; }
.eso-lp .btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.eso-lp .btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.eso-lp .btn__note { font-size: .86rem; color: var(--ink-faint); }

/* ---------- trust / proof ---------- */
.eso-lp .trustbar { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; padding: 0; margin: 0; list-style: none; }
.eso-lp .trustbar li { display: flex; align-items: center; gap: .5em; margin: 0; font-size: .93rem; color: var(--ink-soft); }
.eso-lp .trustbar svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--accent-dark); stroke-width: 2; }
.eso-lp .stars { color: #e8a33d; letter-spacing: .08em; font-size: 1rem; }
.eso-lp .rating { display: inline-flex; align-items: center; gap: .6em; font-size: .95rem; color: var(--ink-soft); }
.eso-lp .rating b { font-weight: 600; color: var(--ink); }
.eso-lp .statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.eso-lp .stat { background: #fff; padding: 26px 22px; text-align: center; }
.eso-lp .sec--cream .stat { background: var(--cream); }
.eso-lp .stat__n { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; color: var(--ink); }
.eso-lp .stat__l { font-size: .84rem; letter-spacing: .04em; color: var(--ink-faint); margin-top: 8px; }

/* ---------- cards / lists ---------- */
.eso-lp .card { background: #fff; border: 1px solid var(--line); padding: clamp(22px, 2.6vw, 32px); }
.eso-lp .card--flat { border: 0; padding: 0; }
.eso-lp .card h3 { margin-bottom: .45em; }
.eso-lp .card p:last-child { margin-bottom: 0; }
.eso-lp .ticks { list-style: none; padding: 0; margin: 0; }
.eso-lp .ticks li { position: relative; padding-left: 34px; margin: 0 0 .8em; }
.eso-lp .ticks li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 20px; height: 20px;
  background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D1073' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.eso-lp .sec--deep .ticks li::before { background-color: rgba(200, 174, 142, .2); }
.eso-lp .steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.eso-lp .steps li { counter-increment: s; position: relative; padding-left: 60px; margin: 0 0 1.4em; }
.eso-lp .steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent-dark); font-family: var(--serif); font-size: 1.1rem; }
.eso-lp .steps b { display: block; font-weight: 600; }

/* ---------- offer card ---------- */
.eso-lp .offercard { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm); }
.eso-lp .offercard__price { display: flex; align-items: baseline; gap: .5em; font-family: var(--serif); }
.eso-lp .offercard__now { font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: var(--ink); }
.eso-lp .offercard__was { font-size: 1.05rem; color: var(--ink-faint); text-decoration: line-through; }
.eso-lp .offercard__sub { font-size: .95rem; color: var(--ink-soft); margin: .6em 0 1.2em; }
.eso-lp .offercard .ticks li { font-size: .97rem; }

/* ---------- before / after ---------- */
.eso-lp .ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.eso-lp .ba figure { margin: 0; border: 1px solid var(--line); background: #fff; }
.eso-lp .ba img { width: 100%; }
.eso-lp .ba figcaption { font-size: .82rem; color: var(--ink-faint); padding: 10px 14px; }
.eso-lp .ba__note { font-size: .84rem; color: var(--ink-faint); margin-top: 18px; }
.eso-lp .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.eso-lp .gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- video slots ---------- */
.eso-lp .videoslot { margin: 0; }
.eso-lp .videoslot__v { width: 100%; background: #000; }
.eso-lp .videoslot__c { font-size: .85rem; color: var(--ink-faint); padding-top: 10px; }
.eso-lp .videoslot--empty { border: 1px dashed var(--line); padding: 16px; font-size: .85rem; color: var(--ink-faint); background: var(--cream); }
.eso-lp .videoslot--empty p { margin: 0; }

/* ---------- FAQ ---------- */
.eso-lp .faq { border-top: 1px solid var(--line); }
.eso-lp .faqitem { border-bottom: 1px solid var(--line); }
.eso-lp .faqitem__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left; background: none; border: 0; padding: 22px 0; cursor: pointer; font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink); }
.eso-lp .faqitem__q h3 { margin: 0; font-size: inherit; }
.eso-lp .faqitem__q::after { content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23311849' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
.eso-lp .faqitem.is-open .faqitem__q::after { transform: rotate(180deg); }
.eso-lp .faqitem__a { padding: 0 0 22px; color: var(--ink-soft); max-width: 78ch; }
.eso-lp .faqitem__a p:last-child { margin-bottom: 0; }

/* ---------- the form ---------- */
.eso-lp .leadform { background: #fff; border: 1px solid var(--line); padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--shadow); }
.eso-lp .leadform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eso-lp .leadform__head { margin-bottom: 20px; }
.eso-lp .leadform__title { font-size: clamp(1.25rem, 2vw, 1.55rem); margin: 0 0 .35em; }
.eso-lp .leadform__sub { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.eso-lp .leadform__bar { height: 3px; background: var(--line); margin-bottom: 8px; }
.eso-lp .leadform__barfill { display: block; height: 100%; width: 33%; background: var(--accent); transition: width .28s ease; }
.eso-lp .leadform__count { font-size: .8rem; letter-spacing: .04em; color: var(--ink-faint); margin: 0 0 18px; }
.eso-lp .field { display: block; margin: 0 0 16px; border: 0; padding: 0; }
.eso-lp .field__l { display: block; font-size: .87rem; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.eso-lp .field__h { font-size: .82rem; color: var(--ink-faint); margin: 10px 0 0; }
.eso-lp .field em { font-style: normal; color: var(--ink-faint); font-weight: 400; }
.eso-lp .req { color: var(--accent-dark); font-weight: 600; }
.eso-lp .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.eso-lp .leadform input[type=text], .eso-lp .leadform input[type=email], .eso-lp .leadform input[type=tel], .eso-lp .leadform select, .eso-lp .leadform textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.eso-lp .leadform input:focus, .eso-lp .leadform select:focus, .eso-lp .leadform textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 174, 142, .26); }
.eso-lp .leadform .is-invalid { border-color: var(--alert); background: var(--alert-soft); }
.eso-lp .leadform textarea { resize: vertical; min-height: 92px; }
.eso-lp .pills { display: flex; flex-wrap: wrap; gap: 10px; }
.eso-lp .pill { position: relative; }
.eso-lp .pill input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.eso-lp .pill span { display: block; padding: 11px 18px; border: 1px solid var(--line); font-size: .93rem; color: var(--ink-soft); transition: all .15s ease; }
.eso-lp .pill input:hover + span { border-color: var(--accent); }
.eso-lp .pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.eso-lp .pill input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.eso-lp .consent { display: flex; gap: 11px; align-items: flex-start; font-size: .84rem; color: var(--ink-soft); margin: 4px 0 18px; line-height: 1.5; }
/* There is no consent tick-box: the disclosure sits under the submit button instead. */
.eso-lp .leadform__consent { font-size: .78rem; line-height: 1.55; color: var(--ink-faint); text-align: center; margin: 12px 0 0; }
.eso-lp .leadform__consent a { color: var(--ink-soft); }
.eso-lp .consent input { margin: 3px 0 0; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--accent); }
.eso-lp .form-msg { margin: 0 0 14px; padding: 11px 14px; background: var(--alert-soft); border-left: 3px solid var(--alert); color: #8d2b24; font-size: .9rem; }
.eso-lp .form-msg.is-ok { background: #eef6f0; border-color: var(--ok); color: #245c3c; }
.eso-lp .leadform__nav { display: grid; gap: 10px; }
.eso-lp .leadform__alt { text-align: center; font-size: .92rem; color: var(--ink-soft); margin: 14px 0 0; }
.eso-lp .leadform__tel { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.eso-lp .leadform__secure { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: var(--ink-faint); margin: 12px 0 0; }
.eso-lp .leadform__secure svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; fill: none; stroke: var(--ink-faint); stroke-width: 1.8; }
.eso-lp .leadform--placeholder { border-color: var(--alert); }

/* ---------- sticky mobile bar ---------- */
.eso-lp #eso-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(54, 55, 58, .1);
}
.eso-lp #eso-stickybar.is-visible { display: grid; }
.eso-lp #eso-stickybar .btn { padding: 14px 16px; font-size: .95rem; }

/* ---------- footer / legal ---------- */
.eso-lp .lpfoot { background: var(--deep); color: #b9b7b3; padding: 40px 0; font-size: .85rem; }
.eso-lp .lpfoot a { color: #e4ddd2; }
.eso-lp .lpfoot__row { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; align-items: center; }
.eso-lp .lpfoot img { width: 132px; opacity: .92; }
.eso-lp .legal { font-size: .78rem; color: var(--ink-faint); }

/* ---------- thank-you / booking ---------- */
.eso-lp .thanks { text-align: center; padding: clamp(56px, 8vw, 110px) 0; }
.eso-lp .thanks__tick { width: 62px; height: 62px; margin: 0 auto 24px; border: 1px solid var(--accent); display: grid; place-items: center; }
.eso-lp .thanks__tick svg { width: 26px; height: 26px; fill: none; stroke: var(--accent-dark); stroke-width: 2.4; }
.eso-lp .thanks__next { text-align: left; max-width: 620px; margin: 34px auto 0; }
.eso-lp .bookwrap { max-width: 960px; margin: 0 auto; }
.eso-lp .bookwrap__frame { border: 1px solid var(--line); background: #fff; min-height: 760px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .eso-lp .grid--3, .eso-lp .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eso-lp .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eso-lp .ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .eso-lp { font-size: 16px; }
  .eso-lp .wrap, .eso-lp .wrap--narrow { width: calc(100% - 32px); }
  .eso-lp .grid--2, .eso-lp .grid--3, .eso-lp .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .field-row { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .ba { grid-template-columns: minmax(0, 1fr); }
  .eso-lp .btnrow .btn { width: 100%; }
  .eso-lp .bookwrap__frame { min-height: 1080px; }
}
@media (prefers-reduced-motion: reduce) {
  .eso-lp *, .eso-lp *::before, .eso-lp *::after { transition: none !important; animation: none !important; }
}

/* Author rules like `.field { display:block }` beat the UA's [hidden] rule, which would leave every
   step of the V2 form on screen at once. Keep this last. */
.eso-lp [hidden] { display: none !important; }

/* Booking step with no calendar connected yet. */
.eso-lp .bookfallback { border: 1px solid var(--line); background: var(--cream); padding: clamp(24px, 3vw, 38px); text-align: center; }
.eso-lp .bookfallback p:last-child { margin-bottom: 0; }

/* ---------- header phone button ----------
   The number is the second-best conversion on a dental page after the form, so it travels with the
   viewport as a button rather than sitting as a link in a header that scrolls away. The verb lives in
   a <span> so the button reads "Call (02) 8609 9800" on one line. */
.eso-lp .v2bar__tel, .eso-lp .v3bar__tel, .eso-lp .v4bar__tel {
  display: inline-flex; align-items: baseline; gap: .45em; white-space: nowrap;
  padding: 11px 18px; border: 1px solid var(--accent); border-radius: var(--radius);
  font-weight: 600; text-decoration: none; transition: background .18s ease, color .18s ease;
}
.eso-lp .v2bar__tel span, .eso-lp .v3bar__tel span, .eso-lp .v4bar__tel span {
  display: inline; font-size: .82rem; font-weight: 500; letter-spacing: .04em; text-transform: none;
}
.eso-lp .v2bar__tel:hover, .eso-lp .v4bar__tel:hover { background: var(--accent); color: #fff; }
.eso-lp .v2bar__tel:hover span, .eso-lp .v4bar__tel:hover span { color: #fff; }

/* Sticky header: keep it clear of the sticky mobile CTA bar (z-index 90) and above the hero art. */
.eso-lp .v2bar, .eso-lp .v3bar, .eso-lp .v4bar { position: sticky; top: 0; z-index: 80; }

@media (max-width: 760px) {
  /* The rating block wrapped onto three lines and pushed the phone number off the right edge.
     The rating still appears in the hero trust bar directly below, so nothing is lost. */
  .eso-lp .v2bar .rating, .eso-lp .v3bar .rating, .eso-lp .v4bar .rating { display: none; }
  .eso-lp .v2bar__tel, .eso-lp .v3bar__tel, .eso-lp .v4bar__tel { padding: 9px 14px; font-size: .95rem; }
}

@media (max-width: 430px) {
  /* Narrow phones: drop the verb and let the number itself be the button, so it never clips. */
  .eso-lp .v2bar__tel span, .eso-lp .v3bar__tel span, .eso-lp .v4bar__tel span { display: none; }
  .eso-lp .v2bar__tel, .eso-lp .v3bar__tel, .eso-lp .v4bar__tel { padding: 9px 12px; font-size: .92rem; }
  .eso-lp .v2bar__row, .eso-lp .v4bar__row, .eso-lp .v3bar__row { gap: 10px; }
}