/*
 * Complex dentistry landing.
 *
 * Every colour, size and radius below was measured off the original Tilda page
 * with getComputedStyle rather than eyeballed, so a side-by-side comparison
 * lands on the same design. What changed is how the layout is produced: Tilda
 * positioned all 389 elements absolutely at five breakpoints, this uses flow
 * layout and grid, which is why the markup can be semantic and a fraction of
 * the size.
 *
 * Section backgrounds, from the original:
 *   header #fff · hero #6f53a6 · pains #fff · results #f1ecf8
 *   quick form gradient #4e3a78→#6f53a6 · doctors #fff · why #6f53a6
 *   tech #1f1526 · prices #171021 · reviews #f1ecf8 · process #fff
 *   faq #fff · booking gradient #7052a4→#4e3a77 · footer #1e1526
 */

:root {
  --d-gold: #c7a455;
  --d-gold-2: #c8a555;
  /* The brand gold is a mid-tone: it carries fills and reads well on the dark
     sections, but as small text on white (2.4:1) or on purple (2.6:1) it fails
     WCAG AA. These two are the same hue taken down and up until they pass, so
     the accent stays gold wherever it is actually read. */
  --d-gold-ink: #85661b;   /* gold text on white / tint      — 5.2:1 / 4.5:1 */
  --d-gold-soft: #ffdc8c;  /* gold text on purple / gradient — 4.6:1 */
  --d-purple: #6f53a6;
  --d-purple-deep: #4e3a78;
  --d-purple-bright: #8452b5;
  --d-ink: #241c2e;
  --d-ink-dark: #1e1526;
  --d-ink-darker: #171021;
  --d-muted: #6b6478;
  --d-line: #e7e1ef;
  --d-tint: #f1ecf8;
  --d-tint-2: #d9cbee;
  --d-on-purple: #e8e1f6;  /* body text on the purple sections — 4.8:1 */
  --d-on-dark: #c9c0d6;
  --d-on-dark-2: #b9adc9;
  --d-on-dark-3: #9c8fb3;
  --d-white: #fff;

  --d-r-card: 18px;
  --d-r-soft: 14px;
  --d-r-btn: 30px;
  --d-shadow: 0 10px 30px rgba(111, 83, 166, .1);

  --d-max: 1200px;
  --d-gap: 24px;
}

/* ---------- shell ---------- */

.d-page {
  color: var(--d-ink);
  font-family: 'FiraGO', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--d-white);
}

.d-wrap {
  width: 100%;
  max-width: var(--d-max);
  margin-inline: auto;
  padding-inline: 20px;
}

.d-section { padding-block: 72px; }
.d-section--tint   { background: var(--d-tint); }
.d-section--purple { background: var(--d-purple); color: var(--d-white); }
.d-section--dark   { background: #1f1526; color: var(--d-white); }
.d-section--ink    { background: var(--d-ink-darker); color: var(--d-white); }
.d-section--grad-up   { background: linear-gradient(0deg, var(--d-purple-deep) 0%, var(--d-purple) 100%); color: var(--d-white); }
.d-section--grad-down { background: linear-gradient(0deg, #7052a4 0%, #4e3a77 100%); color: var(--d-white); }

.d-eyebrow {
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 19px;
  color: var(--d-gold-ink);
  font-weight: 700;
  margin: 0 0 14px;
}
.d-section--purple .d-eyebrow,
.d-section--grad-up .d-eyebrow,
.d-section--grad-down .d-eyebrow { color: var(--d-gold-soft); }
.d-section--dark .d-eyebrow,
.d-section--ink .d-eyebrow { color: var(--d-gold); }

.d-h2 {
  font-size: clamp(27px, 3.1vw, 35px);
  line-height: 1.6;
  font-weight: 700;
  margin: 0 0 18px;
  color: inherit;
  text-wrap: balance;
}

.d-lead {
  font-size: 17px;
  line-height: 27px;
  color: var(--d-muted);
  max-width: none;
  margin: 0 0 34px;
}
.d-section--purple .d-lead,
.d-section--grad-up .d-lead,
.d-section--grad-down .d-lead { color: var(--d-on-purple); }
.d-section--dark .d-lead,
.d-section--ink .d-lead { color: var(--d-on-dark-2); }

/* ---------- buttons ---------- */

.d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--d-r-btn);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.d-btn--gold { background: var(--d-gold); color: #231a05; }
.d-btn--gold:hover { background: #b8933f; }
.d-btn--purple { background: var(--d-purple-bright); color: var(--d-white); }
.d-btn--purple:hover { background: var(--d-purple); }
.d-btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.d-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.d-btn--block { width: 100%; }

/* Used both as a link and as a <button> that opens a case window, so the
   button's browser chrome has to be reset back to link-like. */
.d-link-more {
  display: inline-block;
  align-self: flex-start;
  color: var(--d-purple);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.d-link-more:hover { text-decoration: underline; }

/* ---------- header ---------- */

.d-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--d-white);
}
.d-header__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
}
.d-header__bar .d-btn { white-space: nowrap; padding: 12px 16px; }
.d-header__logo img { display: block; height: 34px; width: auto; }
/* The Latin wordmark is one line at mark height, far wider than the stacked
   Georgian one, so it sits smaller to keep the header's width budget. */
.d-header__logo img.d-logo-latin { height: 36px; }
/* The logo never gives up width: when the bar is short of room, the menu goes
   behind the burger instead (see the breakpoints below). */
.d-header__logo { flex-shrink: 0; }
.d-footer__logo.d-logo-latin { height: 38px; }
.d-nav { display: flex; gap: 14px; margin-inline: auto; }
.d-nav a {
  color: var(--d-ink);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.d-nav a:hover { color: var(--d-purple-bright); }
.d-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--d-ink);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.d-header__phone img { width: 17px; height: 17px; }

/* Language switcher: a small dropdown at the far right of the bar. */
.d-lang { position: relative; flex: none; }
.d-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(36, 28, 46, .14);
  border-radius: 999px;
  color: var(--d-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
}
.d-lang__btn::-webkit-details-marker { display: none; }
.d-lang__btn:hover { border-color: var(--d-purple-bright); color: var(--d-purple-bright); }
.d-lang__btn:focus-visible { outline: 2px solid var(--d-purple-bright); outline-offset: 2px; }
.d-lang__chev { transition: transform .15s ease; }
.d-lang[open] .d-lang__chev { transform: rotate(180deg); }
.d-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--d-white);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(36, 28, 46, .16);
  z-index: 50;
}
.d-lang__item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--d-ink);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
a.d-lang__item:hover, a.d-lang__item:focus-visible { background: rgba(111, 83, 166, .09); color: var(--d-purple-bright); }
.d-lang__item.is-current { color: var(--d-purple-bright); font-weight: 600; }
.d-lang__item.is-current::after { content: ' ✓'; }

.d-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.d-burger span { display: block; width: 24px; height: 2px; background: var(--d-ink); margin: 5px 0; }

/* ---------- hero ---------- */

.d-hero {
  position: relative;
  isolation: isolate;
  background: var(--d-purple);
  color: var(--d-white);
  overflow: hidden;
}
.d-hero__media { position: absolute; inset: 0; z-index: -2; }
.d-hero__media { overflow: hidden; }
.d-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 56.25vw is the height a full-width 16:9 video needs; max() keeps it at least
   as tall as the hero, so the clip always covers and never letterboxes. */
.d-hero__media iframe {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: max(100%, 56.25vw);
  border: 0;
  pointer-events: none;
}
.d-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(36, 28, 46, .78) 0%, rgba(36, 28, 46, .45) 52%, rgba(36, 28, 46, .12) 100%);
}
/* The original hero band is exactly 660px tall; the content is centred in it. */
.d-hero__inner { min-height: 660px; padding-block: 32px; display: flex; flex-direction: column; justify-content: center; }
.d-hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.24;
  font-weight: 700;
  margin: 0 0 18px;
  max-width: 14em;
  text-wrap: normal;
}
.d-hero__sub { font-size: 18px; line-height: 28px; max-width: 900px; margin: 0 0 26px; color: #efeaf6; }
.d-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.d-hero__cta .d-btn { padding: 15px 26px; font-size: 12px; }

.d-hero__benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.d-benefit {
  background: rgba(224, 224, 224, .25);
  border-radius: 13px;
  padding: 12px 16px 16px;
  min-height: 105px;
}
.d-benefit h2 { font-size: 13px; line-height: 20px; font-weight: 700; margin: 0 0 6px; color: var(--d-white); }
.d-benefit p { font-size: 10px; line-height: 16px; color: var(--d-white); margin: 0; }

/* ---------- pain cards ---------- */

.d-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--d-gap); }
.d-pain {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  overflow: hidden;
  background: var(--d-white);
  box-shadow: var(--d-shadow);
}
.d-pain__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--d-tint); }
.d-pain__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-pain__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.d-pain h3 { font-size: 18px; line-height: 24px; font-weight: 700; margin: 0; color: var(--d-ink); }
.d-pain p { font-size: 14px; line-height: 23px; color: var(--d-muted); margin: 0; flex: 1; }

/* ---------- case cards + before/after ---------- */

.d-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.d-filter {
  padding: 9px 18px;
  border-radius: var(--d-r-btn);
  border: 1px solid var(--d-line);
  background: var(--d-white);
  color: var(--d-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.d-filter[aria-pressed="true"] { background: var(--d-purple-bright); border-color: var(--d-purple-bright); color: var(--d-white); }

.d-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--d-gap); }
.d-case {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  box-shadow: var(--d-shadow);
  padding: 16px 16px 20px;
}
.d-case[hidden] { display: none; }
.d-case h3 { font-size: 15px; line-height: 24px; font-weight: 700; margin: 6px 0 0; color: var(--d-ink); }
.d-case p { font-size: 12px; line-height: 19px; color: var(--d-muted); margin: 0; }
.d-case__doctors { font-size: 11px; line-height: 18px; color: var(--d-purple); font-weight: 600; }

/* The comparison slider: two stacked images, the top one clipped to a width
   the pointer drives. Pure CSS + one custom property, so there is no library
   and it degrades to the "after" photo if the script never runs. */
.d-ba {
  position: relative;
  border-radius: var(--d-r-soft);
  overflow: hidden;
  aspect-ratio: 694 / 462;
  background: var(--d-tint);
  touch-action: none;
  user-select: none;
  --pos: 50%;
}
.d-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.d-ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }
.d-ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--d-gold);
  z-index: 3;
  pointer-events: none;
}
.d-ba__handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--d-gold);
  z-index: 4;
  display: grid;
  place-items: center;
  color: #231a05;
  font-size: 11px;
  cursor: ew-resize;
  border: 0;
}
.d-ba__range { position: absolute; inset: 0; z-index: 5; opacity: 0; width: 100%; margin: 0; cursor: ew-resize; }
.d-ba__range:focus-visible + .d-ba__handle { outline: 3px solid var(--d-purple-bright); outline-offset: 3px; }

.d-case .d-link-more { font-size: 13px; line-height: 21px; }

/* ---------- case dialog ---------- */

.d-dialog {
  border: 0;
  border-radius: var(--d-r-card);
  padding: 0;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--d-white);
  color: var(--d-ink);
  /* A modal <dialog> is centred by the browser's own `position: fixed` and
     `margin: auto`. Setting `position: relative` here took it out of the
     viewport and pinned it to the top left of the document, so opening one
     sent the page back to the top. Both are spelled out, as the reset zeroes
     the margin. Fixed is also what the close button measures from. */
  position: fixed;
  margin: auto;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.d-dialog::backdrop { background: rgba(31, 21, 38, .72); }
/* The page behind an open case window stays where it is. The gutter keeps the
   layout from widening by a scrollbar's width while it is locked. */
html:has(.d-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.d-dialog__body { padding: 34px 36px 36px; display: flex; flex-direction: column; gap: 18px; }
/* Room on the right so a long title does not run under the close button. */
.d-dialog h3 { font-size: 26px; margin: 0; font-weight: 700; padding-right: 36px; }
.d-dialog__meta { font-size: 16px; color: var(--d-gold-ink); margin: 0; }
.d-dialog__label { font-size: 15px; font-weight: 700; color: var(--d-ink); margin: 0 0 6px; }
.d-dialog p, .d-dialog li { font-size: 12px; color: var(--d-muted); }
.d-dialog ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; list-style: disc; }
.d-dialog li::marker { color: var(--d-gold); }
.d-dialog img { width: 100%; height: auto; border-radius: var(--d-r-soft); display: block; }
/* The close button rides along when a long case scrolls inside the window:
   its form is a zero-height sticky row, and the button hangs from it. */
.d-dialog > form { position: sticky; top: 0; height: 0; z-index: 2; }
.d-dialog__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--d-white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--d-muted);
}
.d-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- inline strip form ---------- */

.d-quick__inner { display: grid; grid-template-columns: 1fr 1.35fr; gap: 32px; align-items: center; padding-block: 34px; }
.d-quick h2 { font-size: 26px; margin: 0 0 8px; font-weight: 700; }
.d-quick p { margin: 0; font-size: 15px; color: #efeaf6; }

.d-inline-form { display: flex; flex-direction: column; gap: 10px; }
.d-inline-form__row { display: flex; gap: 12px; flex-wrap: wrap; }
.d-inline-form input[type="text"],
.d-inline-form input[type="tel"] {
  flex: 1 1 180px;
  height: 50px;
  padding: 0 18px;
  border-radius: var(--d-r-btn);
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: var(--d-white);
  font: inherit;
  font-size: 15px;
}
.d-inline-form input::placeholder { color: rgba(255, 255, 255, .6); }
.d-inline-form input:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 2px; }
.d-inline-form .d-btn { height: 50px; }

/* ---------- doctors ----------
   A horizontal carousel, not a grid: the original shows cards at 45% width so
   two and a bit are visible, each playing a short muted loop of the doctor
   over the still photo. Arrow buttons scroll it one card at a time. */

/* Shared by the doctors rail and the reviews rail below — same page, same
   light background, so they get the same control. */
.d-docs__head, .d-revs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.d-docs__arrows, .d-revs__arrows { display: flex; gap: 8px; flex: none; }
.d-docs__arrow, .d-revs__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--d-purple);
  background: var(--d-white);
  color: var(--d-purple);
  font-size: 26px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.d-docs__arrow:hover, .d-revs__arrow:hover { background: var(--d-purple); color: var(--d-white); }
/* Nothing left to scroll to. The arrow stays in place — a control that appears
   and disappears as the rail moves is worse than one that dims. */
.d-docs__arrow[disabled], .d-revs__arrow[disabled] { opacity: .35; cursor: default; }
.d-docs__arrow[disabled]:hover, .d-revs__arrow[disabled]:hover { background: var(--d-white); color: var(--d-purple); }

.d-docs {
  cursor: grab;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 4px 4px 14px;
  /* Matches the inline padding, so the first card's snap position is offset 0
     and the rail does not nudge itself when snapping is switched on. */
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--d-line) transparent;
}
/* The snap is switched on after load, not declared here.
   A snap container that already exists at the first layout makes Chrome settle
   the largest contentful paint before it has recorded a single candidate, and
   the page then reports no LCP at all — which is exactly what Lighthouse saw
   here (NO_LCP, and with it no performance score). Turning the snap on once the
   page has loaded costs nothing: at scroll offset 0 the first card is already
   at its snap position, so nothing moves, and every swipe after that snaps as
   before. See the makeStrip() helper in the dentistry template. */
.d-docs.is-snap { scroll-snap-type: x mandatory; }
.d-docs.is-snap .d-doctor { scroll-snap-align: start; }
.d-docs.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.d-docs.is-dragging * { pointer-events: none; }

.d-doctor {
  flex: 0 0 45%;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(111, 83, 166, .12);
  display: flex;
  flex-direction: column;
}
.d-doctor__photo { position: relative; height: 440px; background: var(--d-tint); overflow: hidden; }
.d-doctor__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 0;
}
/* The loop sits on top of the still as a square, exactly as the original does,
   so the photo shows through until the clip has buffered. */
.d-doctor__loop { position: relative; padding-top: 100%; width: 100%; pointer-events: none; z-index: 1; }
.d-doctor__loop iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0; pointer-events: none; }
.d-doctor__video {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 5;
  background: rgba(30, 15, 40, .72);
  color: var(--d-white);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
}
.d-doctor__body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.d-doctor h3 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; color: var(--d-ink); }
.d-doctor__spec { color: var(--d-purple); font-weight: 700; font-size: 13.5px; margin: 0; }
.d-doctor__exp { color: var(--d-muted); font-size: 12.5px; margin: 0; }
.d-doctor__about {
  font-size: 13.5px;
  color: var(--d-ink);
  border-left: 3px solid var(--d-gold);
  padding-left: 12px;
  font-style: italic;
  margin: 4px 0 0;
}
.d-doctor__res { font-size: 12.5px; color: var(--d-muted); margin: 0; }
.d-doctor .d-btn { align-self: flex-start; margin-top: auto; padding: 11px 20px; font-size: 13.5px; border-radius: 999px; }

/* ---------- why (on purple) ---------- */

.d-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--d-gap); }
.d-why__item {
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  border-radius: var(--d-r-card);
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.d-why__icon { font-size: 24px; color: var(--d-gold-soft); line-height: 1; margin-bottom: 4px; }
.d-why__item h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--d-white); }
.d-why__item p { font-size: 13px; color: #f5f2fc; margin: 0; }

/* ---------- horizontal galleries ----------
   The original hides the scrollbar and drives the rail with two round buttons,
   and the strip can also be dragged. Same here: 240x300 tiles, 20px gap. */

.d-rail-head { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.d-rail-controls { display: inline-flex; gap: 5px; }
.d-rail-btn {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 0;
  background: rgba(42, 42, 42, .6);
  color: var(--d-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  font-family: inherit;
  transition: background-color .15s ease;
}
.d-rail-btn:hover { background: rgba(42, 42, 42, .85); }
.d-rail-btn[disabled] { opacity: .35; cursor: default; }

.d-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.d-rail::-webkit-scrollbar { display: none; }
.d-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.d-rail.is-dragging * { pointer-events: none; }
.d-rail > * { flex: 0 0 240px; margin: 0; }
.d-rail img { width: 100%; height: auto; display: block; }

/* Technology card — the original shipped this as a flat image; here it is
   markup, so the copy is editable and translatable. */
.d-tech {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--d-r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.d-tech h3 { font-size: 15px; line-height: 21px; font-weight: 700; margin: 0; color: var(--d-white); min-height: 63px; }
.d-tech__shot { background: var(--d-white); border-radius: 10px; overflow: hidden; }
.d-tech__shot img { aspect-ratio: 420 / 234; object-fit: contain; }
.d-tech__model {
  margin: 0;
  align-self: flex-start;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--d-white);
}
.d-tech__text { margin: 0; font-size: 12px; line-height: 19px; color: var(--d-on-dark); }

/* ---------- prices (on near-black) ---------- */

.d-prices { border-top: 1px solid rgba(255, 255, 255, .12); }
.d-price-row {
  display: flex;
  gap: 24px;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.d-price-row__title { font-size: 16px; font-weight: 600; margin: 0; color: var(--d-white); }
.d-price-row__note { font-size: 12px; color: var(--d-on-dark-3); margin: 6px 0 0; max-width: 72%; }
.d-price-row__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--d-gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.d-price-foot { font-size: 12px; color: var(--d-on-dark-3); margin: 24px 0 28px; max-width: none; }

/* ---------- reviews ---------- */

/* A rail, not a grid. The section used to wrap onto a second row the moment a
   fourth card appeared, and the imported Google reviews made that the normal
   case — one card stranded on a line of its own. Three fit in view, the rest
   are a swipe or an arrow away. Built like the doctors rail above, including
   the snap that is switched on only after load. */
.d-reviews {
  display: flex;
  align-items: stretch;
  gap: var(--d-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 4px 4px 14px;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--d-line) transparent;
  cursor: grab;
}
.d-reviews > .d-review { flex: 0 0 calc((100% - 2 * var(--d-gap)) / 3); }
.d-reviews.is-snap { scroll-snap-type: x mandatory; }
.d-reviews.is-snap .d-review { scroll-snap-align: start; }
.d-reviews.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.d-reviews.is-dragging * { pointer-events: none; }
.d-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--d-white);
  border-radius: var(--d-r-soft);
  padding: 16px 18px 22px;
}
.d-review__media {
  aspect-ratio: 368 / 250;
  border-radius: 10px;
  background: var(--d-tint);
  position: relative;
  overflow: hidden;
}
.d-review__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-review__play {
  font-size: 12px;
  line-height: 19px;
  font-weight: 700;
  color: var(--d-gold-ink);
  text-decoration: none;
  align-self: flex-start;
}
.d-review blockquote { margin: 0; font-size: 16px; line-height: 26px; color: var(--d-ink); }
.d-review__orig { font-size: 13px; line-height: 20px; color: var(--d-muted, #6b6478); }
.d-review__orig summary { cursor: pointer; }
.d-review__orig p { margin: 6px 0 0; font-style: italic; }
.d-review__rule { width: 200px; height: 2px; background: var(--d-gold-2); border: 0; margin: 4px 0; }
.d-review__author { font-size: 12px; line-height: 19px; color: #000; margin: 0; }

/* An imported Google review has no poster to fill the card, so the quote takes
   the space the video thumbnail would have held and the attribution keeps the
   baseline it shares with the cards beside it. */
.d-review--google blockquote { flex: 1 0 auto; }
.d-review__stars { margin: 0; color: var(--d-gold-2); font-size: 15px; letter-spacing: 3px; }
.d-review__source { color: var(--d-gold-ink); margin-left: 6px; }

/* ---------- process ---------- */

.d-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--d-gap); counter-reset: step; }
.d-step {
  border-radius: var(--d-r-card);
  background: var(--d-white);
  border: 1px solid var(--d-line);
  box-shadow: var(--d-shadow);
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-increment: step;
}
.d-step::before {
  content: counter(step);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--d-gold);
  color: #231a05;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}
.d-step h3 { font-size: 14px; line-height: 23px; font-weight: 700; margin: 0; color: var(--d-ink); }
.d-step p { font-size: 13px; line-height: 21px; color: var(--d-muted); margin: 0; }

/* ---------- faq ---------- */

.d-faq { max-width: 1020px; }
.d-faq details { border-bottom: 1px solid var(--d-line); }
.d-faq summary {
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
  position: relative;
  color: var(--d-ink);
}
.d-faq summary::-webkit-details-marker { display: none; }
.d-faq summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--d-purple-bright);
}
.d-faq details[open] summary::after { content: '−'; }
.d-faq p { margin: 0 0 22px; font-size: 14px; color: var(--d-muted); max-width: none; }

/* ---------- booking (white card on purple) ---------- */

#price .d-btn { font-size: 15px; }
#book .d-h2 { font-size: clamp(28px, 3.3vw, 38px); line-height: 1.6; }
#book .d-lead { font-size: 15px; line-height: 24px; color: #e7daf7; max-width: none; }

.d-book__grid { display: grid; grid-template-columns: 1fr 425px; gap: 56px; align-items: start; }
.d-book__list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.d-book__list li { display: flex; gap: 12px; font-size: 14px; line-height: 23px; color: #efe7fa; }
.d-book__list li::before { content: '✓'; color: var(--d-gold-soft); }

.d-form {
  background: var(--d-white);
  border-radius: 20px;
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--d-ink);
}
.d-form h3 { font-size: 20px; margin: 0; font-weight: 700; }
.d-form__lead { font-size: 15px; margin: 0; color: var(--d-muted); }
.d-field { display: flex; flex-direction: column; gap: 6px; }
.d-field > span { font-size: 14px; color: var(--d-ink); }
.d-field input,
.d-field select {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: var(--d-r-btn);
  border: 1px solid var(--d-line);
  background: var(--d-white);
  color: var(--d-ink);
  font: inherit;
  font-size: 16px;
}
.d-field input::placeholder { color: #a49bb4; }
.d-field input:focus-visible,
.d-field select:focus-visible { outline: 2px solid var(--d-purple-bright); outline-offset: 2px; }
.d-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--d-muted); }
.d-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; }
.d-consent a { color: var(--d-purple-bright); text-decoration: underline; }
.d-section--grad-up .d-inline-form .d-consent a,
.d-section--grad-down .d-inline-form .d-consent a { color: inherit; }
.d-error { color: #b03a3a; font-size: 13px; margin: 0; }
.d-ok { border-radius: 20px; background: var(--d-white); padding: 26px 28px; color: var(--d-ink); }
.d-ok h3 { margin: 0 0 8px; font-size: 20px; }
.d-ok p { margin: 0; font-size: 14px; color: var(--d-muted); }

/* ---------- footer (dark) ---------- */

.d-footer { background: var(--d-ink-dark); color: var(--d-white); padding-block: 52px 28px; }
.d-footer__grid { display: grid; grid-template-columns: 1.35fr 1.3fr 1fr .9fr; gap: 32px; }
.d-footer h2 { font-size: 14px; font-weight: 700; margin: 0 0 14px; color: var(--d-white); }
.d-footer p, .d-footer li, .d-footer a { font-size: 13px; color: var(--d-on-dark); }
.d-footer__logo { height: 30px; width: auto; margin-bottom: 16px; }
.d-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.d-footer a { text-decoration: none; }
.d-footer a:hover { color: var(--d-white); text-decoration: underline; }
.d-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px;
  color: #8b7ea0;
}
.d-footer__bottom a { font-size: 12px; color: #8b7ea0; }

/* ---------- sticky cta + cookie ---------- */

.d-sticky { position: fixed; right: 20px; bottom: 20px; z-index: 45; box-shadow: 0 8px 24px rgba(36, 28, 46, .25); }

.d-cookie {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 46;
  max-width: 420px;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  box-shadow: 0 10px 30px rgba(36, 28, 46, .18);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}
.d-cookie[hidden] { display: none; }
.d-cookie__row { display: flex; gap: 10px; }
.d-cookie .d-btn { padding: 9px 18px; font-size: 13px; }

.skip:focus { outline: 3px solid var(--d-gold); }

/* ---------- responsive ---------- */

@media (max-width: 1220px) {
  .d-header__phone { display: none; }
}

@media (max-width: 1100px) {
  .d-hero__benefits, .d-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .d-doctor { flex-basis: 70%; }
  .d-doctor__photo { height: 380px; }
  .d-docs__head, .d-revs__head { flex-direction: column; align-items: flex-start; }
  .d-why, .d-cases { grid-template-columns: repeat(2, 1fr); }
  .d-reviews > .d-review { flex-basis: calc((100% - var(--d-gap)) / 2); }
  .d-steps { grid-template-columns: repeat(2, 1fr); }
  .d-book__grid { grid-template-columns: 1fr; gap: 32px; }
  .d-footer__grid { grid-template-columns: 1fr 1fr; }
  .d-quick__inner { grid-template-columns: 1fr; }
}

/* The menu goes behind the burger as soon as it stops fitting on one line —
   the Georgian labels are the longest and need about 1060px of bar. Below this
   the logo, the switcher and the burger are all the bar holds. */
@media (max-width: 1080px) {
  .d-nav { display: none; }
  /* The button takes the free space, so button, switcher and burger sit
     together on the right. */
  .d-header__bar .d-btn { margin-left: auto; }
  .d-burger { display: block; margin-left: 0; }
  .d-nav--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 70px 0 auto;
    background: var(--d-purple-bright);
    padding: 20px;
    gap: 16px;
  }
  .d-nav--open a { color: var(--d-white); font-size: 17px; }
}

@media (max-width: 860px) {
  /* No room for the button either; the switcher takes its place. */
  .d-header__bar .d-btn { display: none; }
  .d-lang { margin-left: auto; }
}

@media (max-width: 620px) {
  .d-section { padding-block: 52px; }
  .d-hero__inner { height: auto; padding-block: 56px 44px; }
  .d-hero__benefits, .d-cards-4, .d-why, .d-cases, .d-steps {
    grid-template-columns: 1fr;
  }
  .d-doctor { flex-basis: 84%; }
  .d-reviews > .d-review { flex-basis: 84%; }
  .d-doctor__photo { height: 340px; }
  .d-footer__grid { grid-template-columns: 1fr; }
  .d-price-row { flex-direction: column; gap: 6px; }
  .d-dialog__body { padding: 26px 20px 30px; }
  .d-sticky { left: 20px; right: 20px; }
  .d-cookie { left: 12px; right: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- line field ----------
   The white sections are windows onto one fixed canvas behind the page
   (assets/dental-field.js). The tinted ones lose their tint: the field is what
   sets them apart now. The purple and ink bands keep their own backgrounds and
   cover it. */

.d-section[data-field] { background: transparent; }
/* Room above each heading for the smile drawing that opens the section
   (motif 1 only; the others fill the page rather than a margin). */
html[data-motif="1"] .d-section[data-field] { padding-top: 148px; }
@media (max-width: 620px) { html[data-motif="1"] .d-section[data-field] { padding-top: 112px; } }
.d-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
.d-lines.is-on { opacity: 1; }
/* The upper surface lights the coloured slabs. Screen blending leaves white
   paper and white type exactly as they were. */
.d-lines--over { z-index: 3; mix-blend-mode: screen; opacity: 1; }

/* The review cards used to stand out against the lilac tint; on white they
   need an edge of their own. */
.d-review { box-shadow: 0 10px 30px rgba(111, 83, 166, .1); }

/* ---------- review aid: motif switcher ----------
   Only on /dental/new/, and only until a motif is chosen. */

.d-lab {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(255, 255, 255, .94);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(36, 28, 46, .18), 0 0 0 1px rgba(111, 83, 166, .14);
}
.d-lab__title { padding: 0 8px 0 12px; color: var(--d-muted); font-size: 13px; font-weight: 600; }
.d-lab button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--d-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
/* On a wide screen too: seven names would not fit, and the numbers are what
   the visitor is asked to report back. */
.d-lab button span { display: none; }
.d-lab button { padding: 0 9px; }
.d-lab button[aria-pressed="true"] { padding-right: 14px; }
.d-lab button[aria-pressed="true"] span { display: inline; }
.d-lab button b {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--d-tint);
  color: var(--d-purple);
  font-size: 11px;
}
.d-lab button:hover { background: var(--d-tint); }
.d-lab button[aria-pressed="true"] { background: var(--d-purple); color: var(--d-white); }
.d-lab button[aria-pressed="true"] b { background: var(--d-gold); color: #231a05; }
.d-lab button:focus-visible { outline: 2px solid var(--d-purple-bright); outline-offset: 2px; }

/* While the cookie notice is up it owns the bottom-left corner, so the
   switcher steps to the right, above the booking button. */
.d-cookie:not([hidden]) ~ .d-lab { left: auto; right: 20px; bottom: 88px; transform: none; }

@media (max-width: 760px) {
  /* Above the pinned booking button: a caption, then numbers only, the
     chosen one named. */
  .d-lab {
    bottom: 86px;
    flex-wrap: wrap;
    justify-content: center;
    width: max-content;
    max-width: calc(100vw - 24px);
    border-radius: 24px;
    padding: 6px 6px 5px;
  }
  .d-lab__title { flex-basis: 100%; text-align: center; padding: 2px 0 4px; font-size: 12px; }
  .d-lab button span { display: none; }
  .d-lab button { padding: 0 8px; }
  .d-lab button[aria-pressed="true"] { padding-right: 13px; }
  .d-lab button[aria-pressed="true"] span { display: inline; }
  /* A phone has no room for both: the notice is answered first. */
  .d-cookie:not([hidden]) ~ .d-lab { display: none; }
}

/* =========================================================================
   MOTION AND STATE — the redesign layer
   -------------------------------------------------------------------------
   Everything above is the published page. What follows is what makes it move:
   one arrival for anything entering the screen, a physical response on every
   control, and a few authored moments — the hero's arc, the comparison slider
   showing itself, the treatment path filling as it is read.

   Rules kept throughout: nothing animates that the browser cannot composite,
   nothing hides content when scripts do not run (the classes below are added
   by dental-v3.js), and everything gives way to prefers-reduced-motion.
   ========================================================================= */

:root {
  --d-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- arrival ----------
   One movement, used everywhere: a short rise out of a blur. Lists stagger
   through --i, capped so a long list never keeps the reader waiting. */
.d-rise {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
  transition:
    opacity .7s var(--d-ease) calc(var(--i, 0) * 70ms),
    transform .7s var(--d-ease) calc(var(--i, 0) * 70ms),
    filter .7s var(--d-ease) calc(var(--i, 0) * 70ms);
  will-change: transform, opacity;
}
.d-rise.is-in { opacity: 1; transform: none; filter: none; will-change: auto; }

/* ---------- buttons ----------
   A light crosses the face on hover, the button leans a few pixels toward the
   pointer (dental-v3.js sets --bx/--by), and it presses in when clicked. */
.d-btn {
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scale(var(--bs, 1));
  transition:
    transform .35s var(--d-ease),
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .35s var(--d-ease);
}
.d-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, .42) 50%, transparent 66%);
  transform: translate3d(-130%, 0, 0);
  transition: transform .75s var(--d-ease);
  pointer-events: none;
}
.d-btn:hover::after, .d-btn:focus-visible::after { transform: translate3d(130%, 0, 0); }
.d-btn--gold:hover { box-shadow: 0 14px 30px rgba(199, 164, 85, .38); }
.d-btn--purple:hover { box-shadow: 0 14px 30px rgba(111, 83, 166, .34); }
.d-btn:active { --bs: .97; }

/* The text link keeps its habit but gains a rule that draws. */
.d-link-more {
  position: relative;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.d-link-more:hover { text-decoration: none; color: var(--d-purple-bright); }
.d-link-more::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--d-ease);
}
.d-link-more:hover::after, .d-link-more:focus-visible::after { transform: scaleX(1); }

/* ---------- header ----------
   It condenses once the hero is behind you, and carries how far through the
   page you are as a rule along its edge. */
.d-header { transition: box-shadow .3s ease, background-color .3s ease; }
.d-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--d-purple-bright), var(--d-gold));
  transition: opacity .3s ease;
  opacity: 0;
}
.d-header.is-stuck {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(36, 28, 46, .08);
}
.d-header.is-stuck::after { opacity: 1; }
.d-header.is-stuck .d-header__bar { min-height: 58px; }
.d-header__bar { transition: min-height .3s var(--d-ease); }
.d-header__logo img { transition: height .3s var(--d-ease); }
.d-header.is-stuck .d-header__logo img { height: 29px; }
.d-header.is-stuck .d-header__logo img.d-logo-latin { height: 30px; }

/* Nav links take the same rule, and the section being read keeps it drawn. */
.d-nav a { position: relative; padding-block: 6px; transition: color .2s ease; }
.d-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--d-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--d-ease);
}
.d-nav a:hover::after, .d-nav a.is-here::after { transform: scaleX(1); }
.d-nav a.is-here { color: var(--d-purple-bright); }

/* ---------- hero ----------
   The headline is left alone: it is the largest paint on the page and fading
   it in would only delay it. Everything under it arrives in sequence, and a
   gold arc draws itself across the foot of the video — the same curve the
   white sections are built on. */
.d-hero__sub, .d-hero__cta, .d-hero__benefits > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.d-hero.is-ready .d-hero__sub,
.d-hero.is-ready .d-hero__cta,
.d-hero.is-ready .d-hero__benefits > * {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--d-ease) var(--d, 0s), transform .8s var(--d-ease) var(--d, 0s);
}
.d-hero.is-ready .d-hero__sub { --d: .1s; }
.d-hero.is-ready .d-hero__cta { --d: .22s; }
.d-hero.is-ready .d-hero__benefits > :nth-child(1) { --d: .36s; }
.d-hero.is-ready .d-hero__benefits > :nth-child(2) { --d: .44s; }
.d-hero.is-ready .d-hero__benefits > :nth-child(3) { --d: .52s; }
.d-hero.is-ready .d-hero__benefits > :nth-child(4) { --d: .6s; }

/* A phone's hero is portrait and the clip is 16:9, so height alone left the
   video banded across the middle. Sized against the panel it sits in, it
   covers the whole hero on any shape of screen. */
@supports (width: 100cqw) {
  .d-hero__media { container-type: size; }
  .d-hero__media iframe {
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    transform: translate(-50%, -50%);
  }
}

.d-hero__arc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(56px, 9vw, 118px);
  z-index: 1;
  pointer-events: none;
}
.d-hero__arc path { stroke-dasharray: 1900; stroke-dashoffset: 1900; }
.d-hero.is-ready .d-hero__arc path {
  transition: stroke-dashoffset 2.2s var(--d-ease) .35s;
  stroke-dashoffset: 0;
}

/* The benefit chips become glass over the clip, and answer the pointer. */
.d-benefit {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  transition: transform .4s var(--d-ease), background-color .3s ease, border-color .3s ease;
}
.d-benefit:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .2);
  border-color: rgba(199, 164, 85, .6);
}

/* ---------- cards ----------
   One family of behaviour: lift, deepen the shadow, let the photograph
   breathe. The light that follows the pointer lives on the image, never over
   the text. */
.d-pain, .d-case, .d-step, .d-review, .d-tech, .d-why__item, .d-doctor {
  transition: transform .45s var(--d-ease), box-shadow .45s var(--d-ease), border-color .3s ease;
}
.d-pain:hover, .d-case:hover, .d-step:hover, .d-review:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 52px rgba(111, 83, 166, .17);
  border-color: rgba(199, 164, 85, .45);
}
.d-pain__img img, .d-tech__shot img, .d-doctor__photo img, .d-review__media img {
  transition: transform .7s var(--d-ease);
}
.d-pain:hover .d-pain__img img, .d-review:hover .d-review__media img { transform: scale(1.06); }
.d-pain__img { position: relative; }
.d-pain__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .34), transparent 68%);
  opacity: 0;
  transition: opacity .35s ease;
}
.d-pain:hover .d-pain__img::after { opacity: 1; }

.d-why__item:hover, .d-tech:hover {
  transform: translateY(-5px);
  border-color: rgba(199, 164, 85, .55);
  background: rgba(255, 255, 255, .12);
}
.d-why__icon { display: inline-block; transition: transform .45s var(--d-ease); }
.d-why__item:hover .d-why__icon { transform: translateY(-3px) scale(1.12); }
.d-tech:hover .d-tech__shot img { transform: scale(1.05); }

/* ---------- case filters ----------
   The chosen chip is a filled pill that slides between the options rather
   than blinking from one to the next. */
.d-filters { position: relative; }
.d-filters::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: var(--fh, 38px);
  width: var(--fw, 0);
  transform: translate3d(var(--fx, 0), var(--fy, 0), 0);
  border-radius: var(--d-r-btn);
  background: var(--d-purple-bright);
  transition: transform .5s var(--d-ease), width .5s var(--d-ease), opacity .3s ease;
  opacity: var(--fo, 0);
}
.d-filter { position: relative; z-index: 1; transition: color .25s ease, border-color .25s ease, background-color .25s ease; }
.d-filter[aria-pressed="true"] { background: transparent; border-color: transparent; }
.d-filter:hover { border-color: var(--d-purple-bright); }
.d-case { transition: transform .45s var(--d-ease), box-shadow .45s var(--d-ease), border-color .3s ease; }

/* ---------- before / after ----------
   The page's best proof, so it shows itself: the first time a card arrives
   the divider sweeps once, and after that the pointer scrubs it without any
   dragging. The range input underneath still serves the keyboard. */
.d-ba__line {
  width: 2px;
  background: linear-gradient(180deg, rgba(199, 164, 85, .35), var(--d-gold) 18%, var(--d-gold) 82%, rgba(199, 164, 85, .35));
  box-shadow: 0 0 18px rgba(199, 164, 85, .55);
}
.d-ba__handle {
  width: 40px;
  height: 40px;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(36, 28, 46, .32);
  transition: transform .3s var(--d-ease), box-shadow .3s ease;
}
.d-ba:hover .d-ba__handle {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 10px 26px rgba(36, 28, 46, .4);
}

/* ---------- doctors ----------
   The rail says how far along it is, and a card tips very slightly toward the
   pointer — enough to feel like an object, not enough to be a trick. */
.d-docs { perspective: 1200px; }
.d-doctor {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
}
.d-doctor:hover { --ty: -6px; box-shadow: 0 30px 60px rgba(111, 83, 166, .22); }
.d-doctor:hover .d-doctor__photo img { transform: scale(1.04); }
.d-doctor h3 { position: relative; display: inline-block; }
.d-doctor h3::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--d-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--d-ease);
}
.d-doctor:hover h3::after { transform: scaleX(1); }
.d-doctor__video { transition: background-color .3s ease, transform .3s var(--d-ease); }
.d-doctor:hover .d-doctor__video { background: rgba(111, 83, 166, .92); transform: translateY(-2px); }

.d-rail-progress {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: rgba(111, 83, 166, .14);
  margin-top: 14px;
  overflow: hidden;
}
.d-rail-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--w, 30%);
  transform: translateX(var(--x, 0));
  border-radius: 3px;
  background: linear-gradient(90deg, var(--d-purple-bright), var(--d-gold));
  transition: transform .2s linear, width .3s var(--d-ease);
}
.d-section--dark .d-rail-progress { background: rgba(255, 255, 255, .14); }

/* ---------- prices ----------
   Each row draws its own rule as it arrives, and lights up under the pointer. */
.d-price-row {
  position: relative;
  border-bottom-color: transparent;
  transition: background-color .3s ease, padding-left .35s var(--d-ease);
}
.d-price-row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .16);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--d-ease) calc(var(--i, 0) * 60ms);
}
.d-price-row.is-in::after { transform: scaleX(1); }
.d-price-row:hover { background: rgba(255, 255, 255, .04); padding-left: 14px; }
.d-price-row__value { transition: color .25s ease, transform .35s var(--d-ease); }
.d-price-row:hover .d-price-row__value { color: #e6c877; transform: scale(1.04); }

/* ---------- treatment path ----------
   Four steps are a sequence, so the line between them fills as they are read:
   --p is how far through the section the page has scrolled. */
.d-steps { position: relative; }
.d-steps::before {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  top: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--d-gold) 0 calc(var(--p, 0) * 100%), rgba(199, 164, 85, .2) calc(var(--p, 0) * 100%));
  z-index: 0;
}
.d-step { position: relative; z-index: 1; }
.d-step::before { transition: transform .5s var(--d-ease), box-shadow .5s var(--d-ease); }
.d-step:hover::before { transform: scale(1.08); box-shadow: 0 8px 20px rgba(199, 164, 85, .45); }

/* ---------- questions ----------
   Opening one is a change of state, so it is shown as one: the answer slides
   out under a mark that turns. dental-v3.js drives the height. */
.d-faq summary { transition: color .25s ease, padding-left .3s var(--d-ease); }
.d-faq summary:hover { color: var(--d-purple-bright); padding-left: 6px; }
.d-faq summary::after { transition: transform .35s var(--d-ease), color .25s ease; }
.d-faq details[open] summary { color: var(--d-purple-bright); }
.d-faq details[open] summary::after { content: '+'; transform: translateY(-50%) rotate(135deg); }
.d-faq p { overflow: hidden; }

/* ---------- forms ---------- */
.d-field input, .d-field select, .d-inline-form input {
  transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease;
}
.d-field input:focus, .d-field select:focus {
  outline: none;
  border-color: var(--d-purple-bright);
  box-shadow: 0 0 0 4px rgba(132, 82, 181, .16);
}
.d-inline-form input:focus { outline: none; border-color: var(--d-gold); box-shadow: 0 0 0 4px rgba(199, 164, 85, .25); }
.d-form { transition: box-shadow .45s var(--d-ease); }
.d-form:focus-within { box-shadow: 0 30px 70px rgba(20, 10, 40, .28); }
.d-book__list li { transition: transform .4s var(--d-ease); }
.d-book__list li::before { display: inline-block; transition: transform .4s var(--d-ease); }
.d-book__list li:hover { transform: translateX(4px); }
.d-book__list li:hover::before { transform: scale(1.25); }

/* ---------- case window ---------- */
.d-dialog { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .35s ease, transform .45s var(--d-ease); }
.d-dialog.is-open { opacity: 1; transform: none; }
.d-dialog::backdrop { background: rgba(31, 21, 38, .74); backdrop-filter: blur(3px); }
.d-dialog__close { transition: transform .3s var(--d-ease), color .2s ease; }
.d-dialog__close:hover { transform: rotate(90deg); color: var(--d-ink); }

/* ---------- pinned booking button ----------
   It steps aside once the form it points at is on screen. */
.d-sticky { transition: transform .45s var(--d-ease), opacity .35s ease; }
.d-sticky.is-away { transform: translateY(160%); opacity: 0; pointer-events: none; }

/* ---------- reviews without a recording ----------
   The imported Google reviews are text and a name; the empty video frame they
   used to show promised a recording that does not exist. */
.d-review--google .d-review__media { display: none; }
.d-review--google blockquote::before {
  content: '”';
  display: block;
  font-size: 46px;
  line-height: .7;
  color: rgba(199, 164, 85, .55);
  margin-bottom: 4px;
}

/* ---------- the dark bands ----------
   A slow sheen crosses them, so the page is never completely still. */
.d-section--dark, .d-section--ink, .d-section--purple, .d-section--grad-up, .d-section--grad-down {
  position: relative;
  overflow: hidden;
}
html[data-motif="1"] .d-section--dark::before,
html[data-motif="1"] .d-section--ink::before,
html[data-motif="1"] .d-section--purple::before,
html[data-motif="1"] .d-section--grad-up::before,
html[data-motif="1"] .d-section--grad-down::before,
html[data-motif="2"] .d-section--dark::before,
html[data-motif="2"] .d-section--ink::before,
html[data-motif="2"] .d-section--purple::before,
html[data-motif="2"] .d-section--grad-up::before,
html[data-motif="2"] .d-section--grad-down::before,
html[data-motif="3"] .d-section--dark::before,
html[data-motif="3"] .d-section--ink::before,
html[data-motif="3"] .d-section--purple::before,
html[data-motif="3"] .d-section--grad-up::before,
html[data-motif="3"] .d-section--grad-down::before {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgba(199, 164, 85, .07) 45%, rgba(132, 82, 181, .1) 55%, transparent);
  animation: d-sheen 16s linear infinite;
  pointer-events: none;
}
@keyframes d-sheen {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(280%, 0, 0); }
}

/* ---------- reduced motion ----------
   Arrivals, sheens and sweeps go; everything that reports a state stays. */
@media (prefers-reduced-motion: reduce) {
  .d-rise, .d-rise.is-in { opacity: 1; transform: none; filter: none; transition: none; }
  .d-hero__sub, .d-hero__cta, .d-hero__benefits > * { opacity: 1; transform: none; }
  .d-hero__arc path { stroke-dashoffset: 0; }
  .d-section--dark::before, .d-section--ink::before, .d-section--purple::before,
  .d-section--grad-up::before, .d-section--grad-down::before { animation: none; opacity: .4; }
  .d-btn::after { display: none; }
  .d-price-row::after { transform: scaleX(1); }
}

/* =========================================================================
   COMPOSITION — type, measure and rhythm
   -------------------------------------------------------------------------
   The page was set to match a Tilda export: headings at line-height 1.6, lead
   paragraphs running the full 1200px, and every band the same 72px tall. That
   reads as a template. The sizes below are the same content given a proper
   scale: bigger headings set tight and air that grows with the screen.
   Headings and leads still run the full width, as on the published page:
   a 68-character measure cut Georgian lines at about 660px and left half
   the row empty (owner, 2026-09-25).
   ========================================================================= */

.d-section { padding-block: clamp(62px, 6.4vw, 104px); }

.d-hero h1 {
  font-size: clamp(32px, 4.8vw, 56px);
  line-height: 1.14;
  letter-spacing: -.015em;
  max-width: 24ch;
  margin-bottom: 22px;
}
.d-hero__sub {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  max-width: 900px;
  color: #f1ecfa;
}
.d-hero__inner { min-height: min(86vh, 700px); }
.d-hero__cta { gap: 16px; margin-bottom: 52px; }
.d-hero__cta .d-btn { padding: 17px 30px; font-size: 14px; }
.d-benefit { padding: 16px 18px 18px; border-radius: 16px; }
.d-benefit h2 { font-size: 14px; line-height: 21px; margin-bottom: 7px; }
.d-benefit p { font-size: 11.5px; line-height: 17px; color: rgba(255, 255, 255, .88); }

/* A label above a heading earns its place only if it is read as a label: a
   short rule, then the words, in the gold that is legible on white. */
.d-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.d-eyebrow::before {
  content: '';
  width: 30px;
  height: 1.5px;
  background: currentColor;
  opacity: .75;
}

.d-h2 {
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.2;
  letter-spacing: -.012em;
  margin-bottom: 22px;
  max-width: none;
}
#book .d-h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.16; }
.d-lead {
  font-size: 17.5px;
  line-height: 1.7;
  max-width: none;
  margin-bottom: 44px;
}

/* Cards: one radius, one shadow, no doubled elevation. */
.d-pain, .d-case, .d-step, .d-review, .d-doctor {
  border-radius: 20px;
  border-color: rgba(231, 225, 239, .9);
  box-shadow: 0 14px 34px rgba(111, 83, 166, .09);
}
.d-pain h3 { font-size: 19px; line-height: 1.35; }
.d-pain p { font-size: 14.5px; line-height: 1.65; }
.d-case h3 { font-size: 16.5px; line-height: 1.4; }
.d-case p { font-size: 13px; line-height: 1.6; }
.d-step { padding: 24px 24px 28px; }
.d-step h3 { font-size: 15px; line-height: 1.5; }
.d-step p { font-size: 13.5px; line-height: 1.6; }
.d-why__item { border-radius: 20px; padding: 24px 26px 28px; }
.d-why__item h3 { font-size: 16px; line-height: 1.4; }
.d-why__item p { font-size: 13.5px; line-height: 1.66; }
.d-doctor h3 { font-size: 21px; }
.d-review { border-radius: 20px; padding: 20px 22px 24px; }
.d-review blockquote { font-size: 16.5px; line-height: 1.66; }

/* The price list is the page's most read table: give it size and let the
   figures line up. */
.d-price-row { padding: 22px 0; }
.d-price-row__title { font-size: 17px; }
.d-price-row__note { font-size: 12.5px; line-height: 1.55; max-width: 60ch; }
.d-price-row__value { font-size: 19px; }
.d-price-foot { max-width: none; }

.d-faq summary { font-size: 17px; padding-block: 22px; }
.d-faq p { font-size: 15px; line-height: 1.7; max-width: none; }

.d-form { border-radius: 22px; padding: 30px 32px 34px; }
.d-form h3 { font-size: 22px; }
.d-book__list li { font-size: 15px; }

@media (max-width: 1100px) {
  .d-h2, .d-lead { max-width: none; }
}
@media (max-width: 620px) {
  .d-hero h1 { max-width: none; }
  .d-hero__inner { min-height: 0; }
  .d-hero__cta { margin-bottom: 36px; }
  .d-lead { font-size: 16.5px; margin-bottom: 32px; }
  .d-eyebrow { margin-bottom: 14px; }
}

/* The hero's scrim is a left-to-right one, cut for a wide screen where the
   type sits on the dark side. A phone shows the whole width, so the same
   gradient leaves the lower half of the copy on the bright part of the clip.
   There it darkens top to bottom instead. */
@media (max-width: 760px) {
  .d-hero::after {
    background: linear-gradient(180deg, rgba(36, 28, 46, .84) 0%, rgba(36, 28, 46, .66) 52%, rgba(36, 28, 46, .8) 100%);
  }
}

/* ---------- the hero on a phone ----------
   A 16:9 clip stretched to cover a portrait screen is magnified past the
   point where anyone can tell what they are looking at: on a 390 px phone the
   frame is 1500 px wide and all that is left on screen is a slice of the
   middle. So below a tablet the clip stops being a background and becomes
   what it is — a wide film across the top, at its own shape, with the words
   under it on the brand's purple. */
@media (max-width: 900px) {
  .d-hero { display: flex; flex-direction: column; }
  .d-hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--d-purple-deep);
    container-type: normal;
  }
  .d-hero__media img,
  .d-hero__media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
  /* The scrim was there to keep white type legible over the clip. The type is
     on solid purple now, so it would only mute the film. */
  .d-hero::after { display: none; }
  .d-hero__inner { min-height: 0; padding-block: 30px 44px; }
  .d-hero h1 { margin-top: 0; }
}

/* On a phone the two hero buttons sized themselves to their labels, so the
   short one sat half as wide as the long one. Stacked, both take the full
   column and the same height — one pair, not two odd shapes. */
@media (max-width: 620px) {
  .d-hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .d-hero__cta .d-btn {
    width: 100%;
    min-height: 56px;
    padding: 14px 18px;
    font-size: 13.5px;
    line-height: 1.35;
  }
}

/* ---------- messenger dock ----------
   The same chat button as on the laser page: a round toggle in the corner that
   opens WhatsApp / Telegram / Messenger / phone.
   */
.d-msg{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  font-weight:600;font-size:14px;color:#fff;transition:transform .15s,filter .15s}
.d-msg:hover{transform:translateY(-1px);filter:brightness(1.08)}
.d-msg-ic{width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.d-msg-whatsapp{background:#25D366;color:#0b3d1e}
.d-msg-whatsapp .d-msg-ic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.64-2.05-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.6-.92-2.2-.24-.58-.49-.5-.67-.5h-.57c-.2 0-.52.07-.79.37s-1.04 1.01-1.04 2.47 1.06 2.86 1.21 3.06c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.63.71.23 1.36.2 1.87.12.57-.08 1.75-.71 2-1.4.25-.69.25-1.28.17-1.4-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.15h-.01c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.41a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.64-2.05-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.6-.92-2.2-.24-.58-.49-.5-.67-.5h-.57c-.2 0-.52.07-.79.37s-1.04 1.01-1.04 2.47 1.06 2.86 1.21 3.06c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.63.71.23 1.36.2 1.87.12.57-.08 1.75-.71 2-1.4.25-.69.25-1.28.17-1.4-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.15h-.01c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.41a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23z'/%3E%3C/svg%3E")}
.d-msg-telegram{background:#29A9EB;color:#04283d}
.d-msg-telegram .d-msg-ic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.94 4.3 18.9 19.1c-.23 1.02-.84 1.27-1.7.79l-4.7-3.46-2.27 2.18c-.25.25-.46.46-.94.46l.34-4.78 8.7-7.86c.38-.34-.08-.53-.59-.19L6.98 13.02l-4.63-1.45c-1.01-.31-1.03-1 .21-1.48l18.1-6.98c.84-.31 1.57.19 1.28 1.19z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.94 4.3 18.9 19.1c-.23 1.02-.84 1.27-1.7.79l-4.7-3.46-2.27 2.18c-.25.25-.46.46-.94.46l.34-4.78 8.7-7.86c.38-.34-.08-.53-.59-.19L6.98 13.02l-4.63-1.45c-1.01-.31-1.03-1 .21-1.48l18.1-6.98c.84-.31 1.57.19 1.28 1.19z'/%3E%3C/svg%3E")}
.d-msg-messenger{background:#0084FF;color:#00203d}
.d-msg-messenger .d-msg-ic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.24 2 2 6.22 2 11.92c0 3.05 1.3 5.7 3.44 7.5.18.15.29.37.3.61l.06 1.96c.02.62.66 1.03 1.23.78l2.19-.96c.18-.08.38-.1.57-.05 1.03.28 2.13.44 3.21.44 5.76 0 10-4.22 10-9.92S17.76 2 12 2zm6 7.46-2.94 4.66c-.47.74-1.47.93-2.18.4l-2.34-1.75a.6.6 0 0 0-.72 0l-3.16 2.4c-.42.32-.97-.18-.69-.63l2.94-4.66c.47-.74 1.47-.93 2.18-.4l2.34 1.75a.6.6 0 0 0 .72 0l3.16-2.4c.42-.32.97.18.69.63z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.24 2 2 6.22 2 11.92c0 3.05 1.3 5.7 3.44 7.5.18.15.29.37.3.61l.06 1.96c.02.62.66 1.03 1.23.78l2.19-.96c.18-.08.38-.1.57-.05 1.03.28 2.13.44 3.21.44 5.76 0 10-4.22 10-9.92S17.76 2 12 2zm6 7.46-2.94 4.66c-.47.74-1.47.93-2.18.4l-2.34-1.75a.6.6 0 0 0-.72 0l-3.16 2.4c-.42.32-.97-.18-.69-.63l2.94-4.66c.47-.74 1.47-.93 2.18-.4l2.34 1.75a.6.6 0 0 0 .72 0l3.16-2.4c.42-.32.97.18.69.63z'/%3E%3C/svg%3E")}
.d-msg-phone{background:var(--d-purple);color:#fff}
.d-msg-phone .d-msg-ic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E")}


.d-dock{position:fixed;right:20px;bottom:20px;z-index:44;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.d-dock-toggle{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--d-purple);
  color:#fff;font-size:24px;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .18s,background .18s}
.d-dock-toggle:hover{background:var(--d-purple-deep);transform:scale(1.05)}
.d-dock-list{display:grid;gap:8px;order:-1;list-style:none;margin:0;padding:0}
.d-dock-list[hidden]{display:none}
.d-dock-list .d-msg{box-shadow:0 6px 18px rgba(0,0,0,.22);text-decoration:none}
/* The pinned booking button. An older .d-btn { position: relative } further up
   overrode its fixed position, so it sat in the page flow; this puts it back in
   the corner, to the left of the chat button. */
.d-btn.d-sticky{position:fixed;right:92px;bottom:20px}
@media (max-width:640px){
  .d-dock{right:12px;bottom:12px}
  .d-btn.d-sticky{left:20px;right:80px;bottom:20px}
}
@media print{.d-dock{display:none!important}}


/* ---------- a vertical clip for phones ----------
   With a separate 9:16 clip the hero keeps the desktop arrangement on small
   screens: the film fills the band and the words sit over it. The wide clip is
   hidden there, the tall one elsewhere. */
.d-hero__media [data-kin-only="tall"] { display: none; }
@media (max-width: 900px) {
  .d-hero--tall .d-hero__media [data-kin-only="wide"] { display: none; }
  .d-hero--tall .d-hero__media [data-kin-only="tall"] { display: block; position: absolute; inset: 0; }
  .d-hero--tall .d-hero__media [data-kin-only="tall"] iframe {
    top: 50%; left: 50%; right: auto;
    width: max(100%, 56.25vh); height: max(100%, 177.78vw);
    transform: translate(-50%, -50%);
  }
  @supports (width: 100cqw) {
    .d-hero--tall .d-hero__media [data-kin-only="tall"] iframe {
      width: max(100cqw, 56.25cqh); height: max(100cqh, 177.78cqw);
    }
  }
  .d-hero--tall { display: block; }
  .d-hero--tall .d-hero__media {
    position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; height: auto;
    container-type: size;
  }
  .d-hero--tall .d-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .d-hero--tall::after {
    display: block;
    background: linear-gradient(180deg, rgba(36, 28, 46, .84) 0%, rgba(36, 28, 46, .66) 52%, rgba(36, 28, 46, .8) 100%);
  }
  .d-hero--tall .d-hero__inner { min-height: 620px; padding-block: 40px 64px; }
}

/* The strip's form, once sent: the same words as the main panel, in place. */
.d-inline-ok h3 { margin: 0 0 4px; color: #fff; font-size: 20px; }
.d-inline-ok p { margin: 0; color: rgba(255, 255, 255, .85); }