.bell[data-v-4d27a620] {
  position: relative;
}
.bell__trigger[data-v-4d27a620] {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--dt-radius-pill);
  color: var(--dt-navy-700);
  transition:
    background-color var(--dt-dur-2) var(--dt-ease-out),
    color var(--dt-dur-2) var(--dt-ease-out);
}
.bell__trigger[data-v-4d27a620]:hover {
  background: var(--dt-teal-50);
  color: var(--dt-teal-600);
}
.bell__badge[data-v-4d27a620] {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  min-width: 17px;
  height: 17px;
  padding-inline: 3px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: var(--dt-fw-bold);
  display: grid;
  place-items: center;
  border: 2px solid var(--dt-white);
}
.bell__panel[data-v-4d27a620] {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  width: min(360px, calc(100vw - 2rem));
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  box-shadow: var(--dt-shadow-lg);
  overflow: hidden;
  transform-origin: top var(--dt-panel-origin, left);
}
.bell__head[data-v-4d27a620] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-3);
  padding: var(--dt-space-4);
  border-block-end: 1px solid var(--dt-line);
}
.bell__title[data-v-4d27a620] {
  font-size: var(--dt-fs-h4);
}
.bell__mark[data-v-4d27a620] {
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-teal-600);
}
.bell__mark[data-v-4d27a620]:hover {
  text-decoration: underline;
}
.bell__list[data-v-4d27a620] {
  max-height: 340px;
  overflow-y: auto;
}
.bell__item[data-v-4d27a620] {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-3);
  width: 100%;
  padding: var(--dt-space-3) var(--dt-space-4);
  text-align: start;
  border-block-end: 1px solid var(--dt-line);
  transition: background-color var(--dt-dur-2) var(--dt-ease-out);
}
.bell__item[data-v-4d27a620]:hover {
  background: var(--dt-teal-50);
}
.bell__item--unread[data-v-4d27a620] {
  background: color-mix(in srgb, var(--dt-teal-50) 60%, transparent);
}
.bell__icon[data-v-4d27a620] {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--dt-radius-sm);
  background: var(--dt-surface-sunken);
  color: var(--dt-navy-600);
}
.bell__icon--offer[data-v-4d27a620] {
  background: var(--dt-gold-300);
  color: var(--dt-navy-800);
}
.bell__icon--booking[data-v-4d27a620] {
  background: var(--dt-success-soft);
  color: var(--dt-success);
}
.bell__text[data-v-4d27a620] {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.bell__item-title[data-v-4d27a620] {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-snug);
}
.bell__item-body[data-v-4d27a620] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
  line-height: var(--dt-lh-snug);
}
.bell__time[data-v-4d27a620] {
  font-size: 0.7rem;
  color: var(--dt-muted-soft);
}
.bell__dot[data-v-4d27a620] {
  flex: none;
  width: 8px;
  height: 8px;
  margin-block-start: 0.5rem;
  border-radius: 50%;
  background: var(--dt-teal-500);
}
.bell__empty[data-v-4d27a620] {
  padding: var(--dt-space-8);
  text-align: center;
  color: var(--dt-muted);
  font-size: var(--dt-fs-sm);
}
.pop-enter-active[data-v-4d27a620],
.pop-leave-active[data-v-4d27a620] {
  transition:
    opacity var(--dt-dur-2) var(--dt-ease-out),
    transform var(--dt-dur-2) var(--dt-ease-out);
}
.pop-enter-from[data-v-4d27a620],
.pop-leave-to[data-v-4d27a620] {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
}

.header[data-v-be567749] {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--dt-z-header);
  height: var(--dt-header-h);
  display: flex;
  align-items: center;
  background: rgb(255 255 255 / 0.86);
  border-block-end: 1px solid transparent;
  transition:
    background-color var(--dt-dur-3) var(--dt-ease-out),
    box-shadow var(--dt-dur-3) var(--dt-ease-out),
    border-color var(--dt-dur-3) var(--dt-ease-out),
    height var(--dt-dur-3) var(--dt-ease-out),
    backdrop-filter var(--dt-dur-3) var(--dt-ease-out);
}
.header--condensed[data-v-be567749] {
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-block-end-color: rgb(7 59 76 / 0.08);
  box-shadow: 0 12px 32px -22px rgb(7 59 76 / 0.35);
}
.header__inner[data-v-be567749] {
  display: flex;
  align-items: center;
  gap: var(--dt-space-4);
  width: 100%;
}
.header__logo[data-v-be567749] {
  display: flex;
  align-items: center;
  border-radius: var(--dt-radius-sm);
  transition: transform var(--dt-dur-2) var(--dt-ease-spring);
}
.header__logo[data-v-be567749]:hover {
  transform: scale(1.03);
}
.header__nav[data-v-be567749] {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin-inline-end: auto;
  margin-inline-start: var(--dt-space-6);
}
.header__link[data-v-be567749] {
  position: relative;
  padding: 0.55rem 0.7rem;
  border-radius: var(--dt-radius-sm);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  color: var(--dt-ink-soft);
  white-space: nowrap;
  transition: color var(--dt-dur-2) var(--dt-ease-out);
}
.header__link[data-v-be567749]:hover {
  color: var(--dt-teal-600);
}
.header__link-underline[data-v-be567749] {
  position: absolute;
  inset-block-end: 0.15rem;
  inset-inline-start: 0.7rem;
  width: calc(100% - 1.4rem);
  height: 2px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-teal-500);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--dt-dur-3) var(--dt-ease-out);
}
.header__link:hover .header__link-underline[data-v-be567749],
.header__link--active .header__link-underline[data-v-be567749] {
  transform: scaleX(1);
}
.header__link--active[data-v-be567749] {
  color: var(--dt-teal-700);
  font-weight: var(--dt-fw-semibold);
}
.header__actions[data-v-be567749] {
  display: flex;
  align-items: center;
  gap: var(--dt-space-2);
  margin-inline-start: auto;
}
.header__icon-btn[data-v-be567749] {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--dt-radius-pill);
  color: var(--dt-navy-700);
  transition:
    background-color var(--dt-dur-2) var(--dt-ease-out),
    color var(--dt-dur-2) var(--dt-ease-out);
}
.header__icon-btn[data-v-be567749]:hover {
  background: var(--dt-teal-50);
  color: var(--dt-teal-600);
}
.header__cta[data-v-be567749] {
  display: none;
}

/* ---------- mobile: centred logo, menu on the start edge ---------- */
@media (max-width: 1023px) {
.header--home[data-v-be567749]:not(.header--condensed) {
    background: transparent;
    border-block-end-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.header__logo[data-v-be567749] {
    position: absolute;
    inset-inline-start: 50%;
    translate: 50% 0;
}
.header__account[data-v-be567749] {
    display: none;
}
}
@media (min-width: 1024px) {
.header__menu[data-v-be567749] {
    display: none;
}
.header__nav[data-v-be567749] {
    display: flex;
}
.header__cta[data-v-be567749] {
    display: inline-flex;
    margin-inline-start: var(--dt-space-2);
}
}
@media (min-width: 1280px) {
.header__link[data-v-be567749] {
    font-size: var(--dt-fs-body);
    padding-inline: 0.9rem;
}
}

.pm[data-v-fde5432e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dt-space-3);
  padding-block: var(--dt-space-6);
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
  text-align: center;
}
.pm__title[data-v-fde5432e] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  color: rgb(255 255 255 / 0.9);
}
.pm__list[data-v-fde5432e] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dt-space-2);
}
.pm__item[data-v-fde5432e] {
  display: grid;
  place-items: center;
  min-width: 58px;
  padding: 0.35rem 0.55rem;
  border-radius: var(--dt-radius-sm);
  background: rgb(255 255 255 / 0.94);
  box-shadow: var(--dt-shadow-xs);
  transition: transform var(--dt-dur-2) var(--dt-ease-spring);
}
.pm__item[data-v-fde5432e]:hover {
  transform: translateY(-3px);
}
.pm__note[data-v-fde5432e] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--dt-fs-xs);
  color: rgb(255 255 255 / 0.6);
}

/* Compact variant is used on light surfaces inside the booking summary. */
.pm--compact[data-v-fde5432e] {
  border: 0;
  padding-block: 0;
  align-items: flex-start;
  text-align: start;
}
.pm--compact .pm__title[data-v-fde5432e],
.pm--compact .pm__note[data-v-fde5432e] {
  color: var(--dt-muted);
}
.pm--compact .pm__item[data-v-fde5432e] {
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
}
@media (prefers-reduced-motion: reduce) {
.pm__item[data-v-fde5432e]:hover {
    transform: none;
}
}

.footer[data-v-9140984b] {
  background: var(--dt-grad-deep);
  color: rgb(255 255 255 / 0.82);
  padding-block: var(--dt-space-12) var(--dt-space-6);
  /* Clears the fixed mobile nav */
  padding-block-end: calc(var(--dt-space-6) + var(--dt-mobilenav-h));
}
.footer__link--all[data-v-9140984b] {
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-teal-200, #9fe3e0);
}

/**
 * Two columns from the smallest screen up. Stacked, the four link groups made
 * the footer taller than the page content above it; side by side they fit in
 * roughly half the height and stay comfortably tappable.
 */
.footer__top[data-v-9140984b] {
  display: grid;
  gap: var(--dt-space-6) var(--dt-space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block-end: var(--dt-space-8);
}

/* The brand block (logo, tagline, socials) keeps the full width. */
.footer__brand[data-v-9140984b] {
  grid-column: 1 / -1;
}
.footer__brand[data-v-9140984b] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dt-space-4);
}
.footer__tagline[data-v-9140984b] {
  font-size: var(--dt-fs-sm);
  color: rgb(255 255 255 / 0.7);
  max-width: 30ch;
}
.footer__social[data-v-9140984b] {
  display: flex;
  gap: var(--dt-space-2);
}
.footer__social a[data-v-9140984b] {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--dt-radius-pill);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.14);
  color: #fff;
  transition:
    background-color var(--dt-dur-2) var(--dt-ease-out),
    transform var(--dt-dur-2) var(--dt-ease-spring);
}
.footer__social a[data-v-9140984b]:hover {
  background: var(--dt-teal-500);
  transform: translateY(-3px);
}
.footer__column-title[data-v-9140984b] {
  font-size: var(--dt-fs-h4);
  color: #fff;
  margin-block-end: var(--dt-space-4);
}
.footer__column ul[data-v-9140984b] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-2);
}
.footer__column a[data-v-9140984b],
.footer__hours[data-v-9140984b] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--dt-fs-sm);
  color: rgb(255 255 255 / 0.74);
  transition:
    color var(--dt-dur-2) var(--dt-ease-out),
    transform var(--dt-dur-2) var(--dt-ease-out);
}
.footer__column a[data-v-9140984b]:hover {
  color: #fff;
  transform: translateX(-4px);
}
.footer__hours[data-v-9140984b] {
  color: rgb(255 255 255 / 0.55);
  line-height: var(--dt-lh-snug);
}
.footer__bottom[data-v-9140984b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dt-space-3);
  padding-block-start: var(--dt-space-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--dt-fs-xs);
  color: rgb(255 255 255 / 0.6);
}
@media (min-width: 640px) {
.footer__top[data-v-9140984b] {
    gap: var(--dt-space-8);
}
}
@media (max-width: 767px) {
.footer[data-v-9140984b] {
    padding-block: 34px calc(var(--dt-mobilenav-h) + 24px);
    border-radius: 30px 30px 0 0;
    background:
      radial-gradient(circle at 15% 0%, rgb(28 194 193 / 0.24), transparent 34%),
      linear-gradient(150deg, #087f84 0%, #05636c 52%, #073f4c 100%);
}
.footer__top[data-v-9140984b] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
    padding-block-end: 26px;
}
.footer__brand[data-v-9140984b] {
    grid-column: 1 / -1;
    align-items: center;
    gap: 11px;
    text-align: center;
    padding-block-end: 6px;
}
.footer__tagline[data-v-9140984b] {
    font-size: 0.78rem;
    line-height: 1.65;
    max-width: 34ch;
}
.footer__social[data-v-9140984b] {
    gap: 8px;
}
.footer__social a[data-v-9140984b] {
    width: 38px;
    height: 38px;
    background: rgb(255 255 255 / 0.13);
    border-color: rgb(255 255 255 / 0.2);
}
.footer__column[data-v-9140984b] {
    min-width: 0;
    text-align: start;
}
.footer__column-title[data-v-9140984b] {
    margin-block-end: 12px;
    font-size: 0.94rem;
    position: relative;
    padding-block-end: 7px;
}
.footer__column-title[data-v-9140984b]::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 30px;
    height: 2px;
    border-radius: 999px;
    background: var(--dt-gold-400, #f5c542);
}
.footer__column ul[data-v-9140984b] {
    gap: 8px;
}
.footer__column a[data-v-9140984b],
  .footer__hours[data-v-9140984b] {
    gap: 5px;
    font-size: 0.75rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.footer__contact[data-v-9140984b] {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 18px;
    background: rgb(255 255 255 / 0.08);
}
.footer__contact ul[data-v-9140984b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}
.footer__contact a[data-v-9140984b],
  .footer__contact .footer__hours[data-v-9140984b] {
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgb(255 255 255 / 0.07);
}
.footer__bottom[data-v-9140984b] {
    justify-content: center;
    gap: 6px 12px;
    padding-block-start: 16px;
    font-size: 0.68rem;
    text-align: center;
}
}
@media (min-width: 1024px) {
.footer[data-v-9140984b] {
    padding-block-end: var(--dt-space-6);
}
.footer__top[data-v-9140984b] {
    grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
    gap: var(--dt-space-6);
}
.footer__brand[data-v-9140984b] {
    grid-column: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.footer__social a[data-v-9140984b]:hover,
  .footer__column a[data-v-9140984b]:hover {
    transform: none;
}
}

.mnav[data-v-d0a8c9af] {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--dt-z-mobilenav);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dt-space-2);
  height: calc(var(--dt-mobilenav-h) + env(safe-area-inset-bottom, 0px));
  padding: 0.5rem var(--dt-space-3) calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-block-start: 1px solid rgb(7 59 76 / 0.07);
  box-shadow: 0 -8px 28px -20px rgb(7 59 76 / 0.5);
  transition:
    translate var(--dt-dur-3) var(--dt-ease-out),
    opacity var(--dt-dur-2) var(--dt-ease-out);
}
.mnav--hidden[data-v-d0a8c9af] {
  translate: 0 110%;
  opacity: 0;
  pointer-events: none;
}
.mnav__group[data-v-d0a8c9af] {
  display: flex;
  flex: 1;
  justify-content: space-around;
}
.mnav__item[data-v-d0a8c9af] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 56px;
  min-height: 48px;
  padding: 0.25rem 0.35rem;
  border-radius: var(--dt-radius-md);
  font-size: 0.68rem;
  font-weight: var(--dt-fw-medium);
  color: var(--dt-muted);
  transition:
    color var(--dt-dur-2) var(--dt-ease-out),
    background-color var(--dt-dur-2) var(--dt-ease-out);
}
.mnav__item[data-v-d0a8c9af] svg {
  transition: transform var(--dt-dur-3) var(--dt-ease-spring);
}
.mnav__item.router-link-active[data-v-d0a8c9af] {
  color: var(--dt-teal-600);
  font-weight: var(--dt-fw-semibold);
}
.mnav__item.router-link-active[data-v-d0a8c9af] svg {
  transform: translateY(-2px) scale(1.06);
}
.mnav__item[data-v-d0a8c9af]:active {
  background: var(--dt-teal-50);
}
.mnav__fab[data-v-d0a8c9af] {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 66px;
  height: 66px;
  margin-block-start: -26px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-grad-primary);
  color: #fff;
  box-shadow: var(--dt-shadow-teal);
  border: 4px solid var(--dt-white);
  transition: transform var(--dt-dur-2) var(--dt-ease-spring);
}
.mnav__fab[data-v-d0a8c9af]:active {
  transform: scale(0.94);
}
.mnav__fab-label[data-v-d0a8c9af] {
  font-size: 0.63rem;
  font-weight: var(--dt-fw-semibold);
}
.mnav__fab-ring[data-v-d0a8c9af] {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--dt-teal-500);
  z-index: -1;
  animation: dt-pulse-ring 2.8s var(--dt-ease-out) infinite;
}
.mnav__fab--active .mnav__fab-ring[data-v-d0a8c9af] {
  animation: none;
}
@media (min-width: 1024px) {
.mnav[data-v-d0a8c9af] {
    display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.mnav__fab-ring[data-v-d0a8c9af] {
    animation: none;
}
}

.drawer[data-v-414cc589] {
  position: fixed;
  inset: 0;
  z-index: var(--dt-z-drawer);
  background: rgb(4 30 40 / 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.drawer__panel[data-v-414cc589] {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--dt-surface);
  box-shadow: var(--dt-shadow-xl);
  padding: var(--dt-space-5) var(--dt-space-5) calc(var(--dt-space-5) + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
}
.drawer__head[data-v-414cc589] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--dt-space-5);
}
.drawer__close[data-v-414cc589] {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--dt-radius-pill);
  color: var(--dt-muted);
}
.drawer__close[data-v-414cc589]:hover {
  background: var(--dt-surface-sunken);
  color: var(--dt-ink);
}
.drawer__user[data-v-414cc589] {
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
  padding: var(--dt-space-4);
  border-radius: var(--dt-radius-lg);
  background: var(--dt-grad-mint);
  border: 1px solid var(--dt-teal-100);
  margin-block-end: var(--dt-space-5);
}
.drawer__avatar[data-v-414cc589] {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-teal-500);
  color: #fff;
}
.drawer__user-text[data-v-414cc589] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.drawer__user-text strong[data-v-414cc589] {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
}
.drawer__user-text small[data-v-414cc589] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.drawer__user-chevron[data-v-414cc589] {
  color: var(--dt-muted-soft);
}
.drawer__nav[data-v-414cc589] {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}
.drawer__link[data-v-414cc589] {
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
  padding: 0.85rem var(--dt-space-3);
  border-radius: var(--dt-radius-md);
  font-weight: var(--dt-fw-medium);
  color: var(--dt-ink-soft);
  transition:
    background-color var(--dt-dur-2) var(--dt-ease-out),
    color var(--dt-dur-2) var(--dt-ease-out);
  /* Staggered entrance driven by index */
  animation: drawer-item-414cc589 var(--dt-dur-4) var(--dt-ease-out) backwards;
  animation-delay: calc(120ms + var(--i) * 40ms);
}
.drawer__link[data-v-414cc589]:hover,
.drawer__link.router-link-active[data-v-414cc589] {
  background: var(--dt-teal-50);
  color: var(--dt-teal-700);
}
.drawer__link-icon[data-v-414cc589] {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--dt-radius-sm);
  background: var(--dt-surface-sunken);
  color: var(--dt-navy-600);
}
.drawer__link:hover .drawer__link-icon[data-v-414cc589],
.drawer__link.router-link-active .drawer__link-icon[data-v-414cc589] {
  background: var(--dt-teal-500);
  color: #fff;
}
.drawer__link-chevron[data-v-414cc589] {
  margin-inline-start: auto;
  color: var(--dt-muted-soft);
}
.drawer__footer[data-v-414cc589] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-3);
  padding-block-start: var(--dt-space-5);
  margin-block-start: var(--dt-space-4);
  border-block-start: 1px solid var(--dt-line);
  text-align: center;
}
.drawer__contact[data-v-414cc589] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-space-2);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-teal-700);
}
.drawer__hours[data-v-414cc589] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}

/* ---------- transitions ---------- */
.drawer-enter-active[data-v-414cc589],
.drawer-leave-active[data-v-414cc589] {
  transition: opacity var(--dt-dur-3) var(--dt-ease-out);
}
.drawer-enter-active .drawer__panel[data-v-414cc589],
.drawer-leave-active .drawer__panel[data-v-414cc589] {
  transition: translate var(--dt-dur-4) var(--dt-ease-out);
}
.drawer-enter-from[data-v-414cc589],
.drawer-leave-to[data-v-414cc589] {
  opacity: 0;
}

/* RTL: the panel is docked to the right, so it exits to the right (+X). */
.drawer-enter-from .drawer__panel[data-v-414cc589],
.drawer-leave-to .drawer__panel[data-v-414cc589] {
  translate: 100% 0;
}
@keyframes drawer-item-414cc589 {
from {
    opacity: 0;
    transform: translateX(-16px);
}
}
@media (prefers-reduced-motion: reduce) {
.drawer__link[data-v-414cc589] {
    animation: none;
}
.drawer-enter-from .drawer__panel[data-v-414cc589],
  .drawer-leave-to .drawer__panel[data-v-414cc589] {
    translate: none;
}
}

.toasts[data-v-30e7aff3] {
  position: fixed;
  z-index: var(--dt-z-toast);
  inset-block-start: calc(var(--dt-header-h) + 12px);
  inset-inline-end: var(--dt-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-3);
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast[data-v-30e7aff3] {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-space-3);
  padding: var(--dt-space-4);
  border-radius: var(--dt-radius-lg);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-shadow-lg);
  pointer-events: auto;
}
.toast__icon[data-v-30e7aff3] {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--dt-radius-sm);
}
.toast--success .toast__icon[data-v-30e7aff3] {
  background: var(--dt-success-soft);
  color: var(--dt-success);
}
.toast--error .toast__icon[data-v-30e7aff3] {
  background: var(--dt-danger-soft);
  color: var(--dt-danger);
}
.toast--info .toast__icon[data-v-30e7aff3] {
  background: var(--dt-teal-50);
  color: var(--dt-teal-600);
}
.toast--success[data-v-30e7aff3] {
  border-inline-start: 4px solid var(--dt-success);
}
.toast--error[data-v-30e7aff3] {
  border-inline-start: 4px solid var(--dt-danger);
}
.toast--info[data-v-30e7aff3] {
  border-inline-start: 4px solid var(--dt-teal-500);
}
.toast__body[data-v-30e7aff3] {
  flex: 1;
  min-width: 0;
}
.toast__title[data-v-30e7aff3] {
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-snug);
}
.toast__message[data-v-30e7aff3] {
  font-size: var(--dt-fs-sm);
  color: var(--dt-muted);
  line-height: var(--dt-lh-snug);
  margin-block-start: 0.15rem;
}
.toast__close[data-v-30e7aff3] {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--dt-radius-pill);
  color: var(--dt-muted-soft);
}
.toast__close[data-v-30e7aff3]:hover {
  background: var(--dt-surface-sunken);
  color: var(--dt-ink);
}
.toast-enter-active[data-v-30e7aff3],
.toast-leave-active[data-v-30e7aff3] {
  transition:
    opacity var(--dt-dur-3) var(--dt-ease-out),
    transform var(--dt-dur-3) var(--dt-ease-spring);
}
.toast-enter-from[data-v-30e7aff3] {
  opacity: 0;
  transform: translateX(-24px) scale(0.96);
}
.toast-leave-to[data-v-30e7aff3] {
  opacity: 0;
  transform: translateX(-24px) scale(0.96);
}
.toast-move[data-v-30e7aff3] {
  transition: transform var(--dt-dur-3) var(--dt-ease-out);
}
@media (max-width: 767px) {
.toasts[data-v-30e7aff3] {
    inset-block-start: auto;
    inset-block-end: calc(var(--dt-mobilenav-h) + 16px);
    inset-inline: var(--dt-space-4);
    width: auto;
}
.toast-enter-from[data-v-30e7aff3],
  .toast-leave-to[data-v-30e7aff3] {
    transform: translateY(24px) scale(0.96);
}
}

.app__main[data-v-afee241d] {
  /* Keeps content clear of the fixed bottom nav on phones. */
  padding-block-end: var(--dt-mobilenav-h);
  min-height: 60dvh;
}
@media (min-width: 1024px) {
.app__main[data-v-afee241d] {
    padding-block-end: 0;
}
}

.hero[data-v-8c4e4776] {
  position: relative;
  padding-block: calc(var(--dt-header-h) + clamp(1.5rem, 1rem + 3vw, 4rem)) clamp(3rem, 2rem + 6vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- background ---------- */
.hero__bg[data-v-8c4e4776] {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(170deg, #f1faf9 0%, #ffffff 45%, #f7fbfb 100%);
}
.hero__blob[data-v-8c4e4776] {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  animation: dt-float 12s ease-in-out infinite;
}
.hero__blob--1[data-v-8c4e4776] {
  inset-block-start: -12%;
  inset-inline-start: -8%;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  background: radial-gradient(circle, rgb(0 159 163 / 0.28), transparent 68%);
}
.hero__blob--2[data-v-8c4e4776] {
  inset-block-end: -18%;
  inset-inline-end: -10%;
  width: 40vw;
  height: 40vw;
  max-width: 540px;
  max-height: 540px;
  background: radial-gradient(circle, rgb(245 197 66 / 0.24), transparent 68%);
  animation-delay: -4s;
}
.hero__blob--3[data-v-8c4e4776] {
  inset-block-start: 32%;
  inset-inline-start: 42%;
  width: 26vw;
  height: 26vw;
  max-width: 360px;
  max-height: 360px;
  background: radial-gradient(circle, rgb(7 59 76 / 0.14), transparent 70%);
  animation-delay: -8s;
}
.hero__grid[data-v-8c4e4776] {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(7 59 76 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(7 59 76 / 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
}

/* ---------- layout ---------- */
.hero__inner[data-v-8c4e4776] {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.hero__copy[data-v-8c4e4776] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dt-space-5);
  max-width: 40rem;
}
.hero__title[data-v-8c4e4776] {
  font-size: var(--dt-fs-display);
  line-height: 1.14;
  letter-spacing: -0.025em;
}
.hero__title-mobile[data-v-8c4e4776] { display: none;
}
.hero__title-desktop[data-v-8c4e4776] { display: inline;
}
.hero__underline-holder[data-v-8c4e4776] { position: static;
}
.hero__title-accent[data-v-8c4e4776] {
  position: relative;
  display: inline-block;
  color: var(--dt-teal-600);
  white-space: nowrap;
}
.hero__underline[data-v-8c4e4776] {
  position: absolute;
  inset-inline: -2%;
  inset-block-end: -0.12em;
  width: 104%;
  height: 0.4em;
  fill: none;
  stroke: var(--dt-gold-500);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: underline-draw-8c4e4776 900ms var(--dt-ease-out) 800ms forwards;
}
.hero__lead[data-v-8c4e4776] {
  font-size: var(--dt-fs-body-lg);
  color: var(--dt-ink-soft);
  max-width: 46ch;
}
.hero__actions[data-v-8c4e4776] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-3);
}
.hero__trust[data-v-8c4e4776] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-2) var(--dt-space-4);
  padding-block-start: var(--dt-space-2);
}
.hero__trust-item[data-v-8c4e4776] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  color: var(--dt-ink-soft);
}
.hero__trust-item[data-v-8c4e4776] svg {
  color: var(--dt-teal-500);
}

/* ---------- visual ---------- */
.hero__visual-wrap[data-v-8c4e4776] {
  position: relative;
  min-width: 0;
}
.hero__parallax[data-v-8c4e4776] {
  position: relative;
  will-change: transform;
}
.hero__visual[data-v-8c4e4776] {
  position: relative;
  border-radius: var(--dt-radius-2xl);
  overflow: hidden;
  box-shadow: var(--dt-shadow-xl);
  border: 1px solid rgb(255 255 255 / 0.7);
  background: var(--dt-teal-50);
}
.hero__visual img[data-v-8c4e4776] {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hero__visual-glow[data-v-8c4e4776] {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgb(255 255 255 / 0.35), transparent 45%);
  pointer-events: none;
}

/* ---------- floating cards ---------- */
.hero__float[data-v-8c4e4776] {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
  padding: 0.7rem 1rem;
  border-radius: var(--dt-radius-lg);
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.85);
  box-shadow: var(--dt-shadow-lg);
  animation: dt-float 6s ease-in-out infinite;
}
.hero__float-text[data-v-8c4e4776] {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.hero__float-text strong[data-v-8c4e4776] {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-bold);
}
.hero__float-text span[data-v-8c4e4776] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.hero__float--rating[data-v-8c4e4776] {
  inset-block-start: 7%;
  inset-inline-start: -4%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.hero__float--guarantee[data-v-8c4e4776] {
  inset-block-end: 14%;
  inset-inline-end: -5%;
  animation-delay: -2s;
}
.hero__float--slot[data-v-8c4e4776] {
  inset-block-end: -4%;
  inset-inline-start: 8%;
  animation-delay: -4s;
}
.hero__float-icon[data-v-8c4e4776] {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--dt-radius-sm);
  background: var(--dt-teal-50);
  color: var(--dt-teal-600);
}
.hero__float-pulse[data-v-8c4e4776] {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dt-success);
}
.hero__float-pulse[data-v-8c4e4776]::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--dt-success);
  animation: dt-pulse-ring 2s var(--dt-ease-out) infinite;
}

/* ---------- scroll cue ---------- */
.hero__scroll[data-v-8c4e4776] {
  display: none;
  position: absolute;
  inset-block-end: 1.5rem;
  inset-inline-start: 50%;
  translate: 50% 0;
}
.hero__scroll-track[data-v-8c4e4776] {
  display: grid;
  justify-items: center;
  width: 26px;
  height: 42px;
  padding-block-start: 8px;
  border: 2px solid var(--dt-teal-300);
  border-radius: var(--dt-radius-pill);
}
.hero__scroll-dot[data-v-8c4e4776] {
  width: 4px;
  height: 8px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-teal-500);
  animation: scroll-hint-8c4e4776 1.8s var(--dt-ease-in-out) infinite;
}

/* ---------- keyframes ---------- */
@keyframes underline-draw-8c4e4776 {
to {
    stroke-dashoffset: 0;
}
}
@keyframes scroll-hint-8c4e4776 {
0%,
  100% {
    transform: translateY(0);
    opacity: 1;
}
60% {
    transform: translateY(12px);
    opacity: 0.2;
}
}

/* ---------- responsive ---------- */
/* The overlay checks belong to the phone layout only. */
.hero__checks[data-v-8c4e4776] {
  display: none;
}

/**
 * Phone hero, per the mobile design: the photograph becomes the backdrop and
 * the copy sits over it, rather than the two-column copy/illustration split
 * used from tablet up. A scrim on the inline-start edge keeps the headline
 * legible over the brightest part of the room.
 */
@media (max-width: 767px) {
.hero__title-mobile[data-v-8c4e4776] {
    display: flex;
    flex-direction: column;
    gap: 0.05em;
}
.hero__title-desktop[data-v-8c4e4776],
  .hero__underline-holder[data-v-8c4e4776] { display: none;
}
.hero[data-v-8c4e4776] {
    padding-block: 0;
}
.hero__inner[data-v-8c4e4776] {
    position: relative;
    display: block;
    padding: 0;
    min-height: 96vw;
    isolation: isolate;
}
.hero__visual-wrap[data-v-8c4e4776],
  .hero__parallax[data-v-8c4e4776],
  .hero__visual[data-v-8c4e4776] {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}
.hero__visual picture[data-v-8c4e4776],
  .hero__visual img[data-v-8c4e4776] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
    border-radius: 0;
}

  /**
   * Scrim: clear over the vacuum, opaque behind the text.
   *
   * It has to stay strong across the *whole* copy column (66% wide), not just
   * the right third — measured against the photo, the earlier falloff left the
   * far edge of the text sitting on the plant and hose at luminance 0. These
   * stops hold the darkest pixel under the text at ~153 and 95% of it above
   * 190, which carries the navy headline and the check list comfortably.
   */
.hero__inner[data-v-8c4e4776]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to left,
      rgb(255 255 255 / 0.95) 0%,
      rgb(255 255 255 / 0.9) 45%,
      rgb(255 255 255 / 0.6) 70%,
      rgb(255 255 255 / 0) 90%
    );
    pointer-events: none;
}

  /**
   * The copy sits on the *right*, over the scrim. In RTL the inline start IS
   * the right edge, so this needs `flex-start` / `text-align: start` and an
   * auto margin on the inline END — the mirrored values push everything to the
   * left, on top of the vacuum, where the scrim gives no contrast.
   *
   * The top padding clears the fixed header, which overlays the hero.
   */
.hero__copy[data-v-8c4e4776] {
    position: relative;
    z-index: 2;
    align-items: flex-start;
    text-align: start;
    gap: var(--dt-space-4);
    max-width: 66%;
    margin-inline-end: auto;
    padding: calc(var(--dt-header-h) + var(--dt-space-5)) var(--dt-gutter) var(--dt-space-8);
}

  /* Full-width headline would collide with the vacuum; keep it in the scrim. */
.hero__title[data-v-8c4e4776] {
    font-size: clamp(1.65rem, 1.1rem + 4.2vw, 2.3rem);
    line-height: var(--dt-lh-snug);
}
.hero__underline[data-v-8c4e4776] {
    display: none;
}

  /* Not in the phone design — the badges reappear as their own card row. */
.hero__eyebrow[data-v-8c4e4776],
  .hero__lead[data-v-8c4e4776],
  .hero__trust[data-v-8c4e4776],
  .hero__float[data-v-8c4e4776],
  .hero__visual-glow[data-v-8c4e4776] {
    display: none;
}
.hero__checks[data-v-8c4e4776] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--dt-fs-sm);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-navy-700);
}
.hero__checks li[data-v-8c4e4776] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.hero__checks[data-v-8c4e4776] svg {
    color: var(--dt-teal-500);
    flex: none;
}
.hero__actions[data-v-8c4e4776] {
    width: auto;
}
.hero__actions[data-v-8c4e4776] > * {
    flex: 0 0 auto;
}
  /* The design shows a single primary CTA on the photo. */
.hero__actions[data-v-8c4e4776] > *:nth-child(2) {
    display: none;
}
.hero__float--rating[data-v-8c4e4776] {
    inset-block-start: 4%;
    inset-inline-start: 2%;
    padding: 0.5rem 0.7rem;
}
.hero__float--guarantee[data-v-8c4e4776] {
    inset-block-end: 8%;
    inset-inline-end: 2%;
    padding: 0.5rem 0.7rem;
}
.hero__float--slot[data-v-8c4e4776] {
    display: none;
}
.hero__title-accent[data-v-8c4e4776] {
    white-space: normal;
}
}
@media (min-width: 1024px) {
.hero__inner[data-v-8c4e4776] {
    grid-template-columns: 1.02fr 1fr;
}
.hero__scroll[data-v-8c4e4776] {
    display: block;
}
}
@media (min-width: 1440px) {
.hero__inner[data-v-8c4e4776] {
    grid-template-columns: 1fr 1.08fr;
}
}
@media (prefers-reduced-motion: reduce) {
.hero__blob[data-v-8c4e4776],
  .hero__float[data-v-8c4e4776],
  .hero__float-pulse[data-v-8c4e4776]::after,
  .hero__scroll-dot[data-v-8c4e4776] {
    animation: none;
}
.hero__underline[data-v-8c4e4776] {
    animation: none;
    stroke-dashoffset: 0;
}
}

.gb[data-v-6d340d46] {
  padding-block: var(--dt-space-6);
}
.gb__card[data-v-6d340d46] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  align-items: center;
  gap: var(--dt-space-3);
  padding: var(--dt-space-5);
  border-radius: var(--dt-radius-xl);
  background: var(--dt-teal-50, #eef7f6);
  border: 1px solid var(--dt-line);
}
.gb__title[data-v-6d340d46] {
  font-size: var(--dt-fs-h4);
  font-weight: var(--dt-fw-bold);
}
.gb__text[data-v-6d340d46] {
  margin-block-start: 0.4rem;
  font-size: var(--dt-fs-sm);
  color: var(--dt-muted);
  line-height: var(--dt-lh-relaxed);
  text-wrap: pretty;
}
.gb__shield[data-v-6d340d46] {
  width: 100%;
  max-width: 150px;
  justify-self: center;
}

/* Three points sit under the copy, divided by hairlines as in the design. */
.gb__points[data-v-6d340d46] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dt-space-2);
  list-style: none;
  padding: 0;
  margin-block-start: var(--dt-space-5);
  grid-column: 1 / -1;
}
.gb__point[data-v-6d340d46] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-navy-700, var(--dt-ink));
}
.gb__point + .gb__point[data-v-6d340d46] {
  border-inline-end: 1px solid var(--dt-line);
}

/* The divider belongs between items, so it sits on the inline-end of all but
   the first — in RTL that puts a hairline to the left of each later item. */
.gb__point[data-v-6d340d46]:first-child {
  border-inline-end: 1px solid var(--dt-line);
}
.gb__point[data-v-6d340d46]:last-child {
  border-inline-end: 0;
}
.gb__point[data-v-6d340d46] svg {
  color: var(--dt-teal-600);
}
@media (min-width: 768px) {
.gb__card[data-v-6d340d46] {
    /* Shield stays on the left at every size, as on mobile. */
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: var(--dt-space-6);
    padding: var(--dt-space-6) var(--dt-space-8);
}
.gb__shield[data-v-6d340d46] {
    max-width: 190px;
}
.gb__points[data-v-6d340d46] {
    grid-column: auto;
}
.gb__title[data-v-6d340d46] {
    font-size: var(--dt-fs-h3);
}
}

.rw__grid[data-v-b588b298] {
  display: grid;
  gap: var(--dt-space-4);
  grid-template-columns: 1fr;
}
.rw__card[data-v-b588b298] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
  padding: var(--dt-space-4);
  border-radius: var(--dt-radius-xl);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-shadow-sm);
  overflow: hidden;
}
.rw__copy[data-v-b588b298] {
  flex: 1;
  min-width: 0;
}
.rw__title[data-v-b588b298] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--dt-fs-base);
  font-weight: var(--dt-fw-bold);
}
.rw__title[data-v-b588b298] svg {
  color: var(--dt-teal-600);
}
.rw__text[data-v-b588b298] {
  margin-block-start: 0.3rem;
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
  line-height: var(--dt-lh-relaxed);
  text-wrap: pretty;
}
.rw__cta[data-v-b588b298] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: var(--dt-space-3);
  padding: 0.5rem 1rem;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-teal-600);
  color: #fff;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  cursor: pointer;
}
.rw__cta--solid[data-v-b588b298] {
  background: var(--dt-navy-700);
}
.rw__wheel[data-v-b588b298] {
  width: 40%;
  max-width: 130px;
  flex: none;
  transform-origin: 50% 50%;
  /* Long ease-out so it coasts to a stop like a real wheel. */
  transition: transform 3.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.rw__cta[data-v-b588b298]:disabled {
  opacity: 0.75;
  cursor: default;
}
.rw__avatar[data-v-b588b298] {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  align-self: flex-start;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-teal-50);
  color: var(--dt-teal-600);
}
.rw__notice[data-v-b588b298] {
  margin-block-start: var(--dt-space-3);
  text-align: center;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-teal-700);
}
.rw__win[data-v-b588b298] {
  position: absolute;
  inset: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: var(--dt-radius-lg);
  background: rgb(255 255 255 / 0.94);
  color: var(--dt-teal-700);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-bold);
  text-align: center;
  box-shadow: var(--dt-shadow-md);
}
@media (min-width: 768px) {
.rw__grid[data-v-b588b298] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.rw__wheel[data-v-b588b298] {
    transition: none;
}
}

.qb[data-v-a2f5e4aa] {
  position: relative;
  z-index: 2;
  /* Overlaps the hero above it */
  margin-block-start: clamp(-2rem, -1rem - 3vw, -5rem);
}

/**
 * Hidden on phones: the four-row form pushed the whole page down before the
 * visitor had seen a single service, and the sticky "احجز" tab in the mobile
 * nav already covers the same job in one tap. Desktop keeps it.
 */
@media (max-width: 767px) {
.qb[data-v-a2f5e4aa] {
    display: none;
}
}
.qb__card[data-v-a2f5e4aa] {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--dt-radius-2xl);
  background: rgb(255 255 255 / 0.86);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgb(255 255 255 / 0.9);
  box-shadow: var(--dt-shadow-xl);
}
.qb__head[data-v-a2f5e4aa] {
  margin-block-end: var(--dt-space-5);
}
.qb__title[data-v-a2f5e4aa] {
  display: flex;
  align-items: center;
  gap: var(--dt-space-2);
  font-size: var(--dt-fs-h3);
}
.qb__title-icon[data-v-a2f5e4aa] {
  color: var(--dt-gold-500);
}
.qb__subtitle[data-v-a2f5e4aa] {
  font-size: var(--dt-fs-sm);
  color: var(--dt-muted);
  margin-block-start: 0.25rem;
}
.qb__form[data-v-a2f5e4aa] {
  display: grid;
  gap: var(--dt-space-2);
  grid-template-columns: 1fr;
}
.qb__segment[data-v-a2f5e4aa] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
  min-height: 68px;
  padding: 0.7rem 1rem;
  text-align: start;
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  background: var(--dt-surface);
  transition:
    border-color var(--dt-dur-2) var(--dt-ease-out),
    background-color var(--dt-dur-2) var(--dt-ease-out),
    box-shadow var(--dt-dur-2) var(--dt-ease-out),
    transform var(--dt-dur-2) var(--dt-ease-out);
}
.qb__segment[data-v-a2f5e4aa]:hover {
  border-color: var(--dt-teal-300);
  box-shadow: var(--dt-shadow-sm);
  transform: translateY(-2px);
}
.qb__segment--filled[data-v-a2f5e4aa] {
  border-color: var(--dt-teal-200);
  background: var(--dt-teal-50);
}
.qb__segment-index[data-v-a2f5e4aa] {
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-end: 0.6rem;
  font-size: 0.66rem;
  font-weight: var(--dt-fw-bold);
  color: var(--dt-line-strong);
}
.qb__segment--filled .qb__segment-index[data-v-a2f5e4aa] {
  color: var(--dt-teal-300);
}
.qb__segment-icon[data-v-a2f5e4aa] {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--dt-radius-md);
  background: var(--dt-surface-sunken);
  color: var(--dt-navy-600);
  transition:
    background-color var(--dt-dur-2) var(--dt-ease-out),
    color var(--dt-dur-2) var(--dt-ease-out);
}
.qb__segment--filled .qb__segment-icon[data-v-a2f5e4aa],
.qb__segment:hover .qb__segment-icon[data-v-a2f5e4aa] {
  background: var(--dt-teal-500);
  color: #fff;
}
.qb__segment-text[data-v-a2f5e4aa] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.qb__segment-label[data-v-a2f5e4aa] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
  font-weight: var(--dt-fw-medium);
}
.qb__segment-value[data-v-a2f5e4aa] {
  font-weight: var(--dt-fw-semibold);
  font-size: var(--dt-fs-sm);
  color: var(--dt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qb__submit[data-v-a2f5e4aa] {
  min-height: 68px;
}
.qb__perks[data-v-a2f5e4aa] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-2) var(--dt-space-5);
  margin-block-start: var(--dt-space-4);
  padding-block-start: var(--dt-space-4);
  border-block-start: 1px dashed var(--dt-line);
}
.qb__perks li[data-v-a2f5e4aa] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.qb__perks[data-v-a2f5e4aa] svg {
  color: var(--dt-success);
}
@media (min-width: 640px) {
.qb__form[data-v-a2f5e4aa] {
    grid-template-columns: 1fr 1fr;
}
.qb__submit[data-v-a2f5e4aa] {
    grid-column: 1 / -1;
}
}
@media (min-width: 1100px) {
.qb__form[data-v-a2f5e4aa] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: stretch;
}
.qb__submit[data-v-a2f5e4aa] {
    grid-column: auto;
    padding-inline: 2.2rem;
}
}

.ql[data-v-04272f54] {
  margin-block-start: calc(var(--dt-space-5) * -1);
  position: relative;
  z-index: 3;
}
.ql__rail[data-v-04272f54] {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: var(--dt-space-3) 0;
  border-radius: var(--dt-radius-xl);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-shadow-md);
  /* Five shortcuts don't fit a phone — swipe, with hairlines between them. */
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ql__rail[data-v-04272f54]::-webkit-scrollbar {
  display: none;
}
.ql__item[data-v-04272f54] {
  flex: 0 0 auto;
  min-width: 0;
}
.ql__item + .ql__item[data-v-04272f54] {
  border-inline-start: 1px solid var(--dt-line);
}
.ql__link[data-v-04272f54] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 84px;
  height: 100%;
  padding-inline: 0.35rem;
  color: var(--dt-ink);
  cursor: pointer;
}
.ql__icon[data-v-04272f54] {
  position: relative;
  color: var(--dt-teal-600);
  line-height: 0;
}
.ql__badge[data-v-04272f54] {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: -14px;
  padding: 0.1rem 0.35rem;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-danger, #e5484d);
  color: #fff;
  font-size: 0.58rem;
  font-weight: var(--dt-fw-bold);
  line-height: 1.4;
}
.ql__label[data-v-04272f54] {
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 768px) {
.ql__rail[data-v-04272f54] {
    justify-content: center;
    overflow-x: visible;
}
.ql__link[data-v-04272f54] {
    width: 118px;
}
}

.ts[data-v-ef5f59e7] {
  padding-block: var(--dt-space-5);
}

/**
 * Two-up on the narrowest phones and four-up from 420px. The design shows four
 * across, but below that width each card would be under 80px — too tight for
 * "مواد آمنة وفعالة" to sit on two lines without breaking mid-word.
 */
.ts__grid[data-v-ef5f59e7] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dt-space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ts__card[data-v-ef5f59e7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  min-width: 0;
  padding: var(--dt-space-4) var(--dt-space-2);
  border-radius: var(--dt-radius-lg);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-shadow-xs);
}
.ts__icon[data-v-ef5f59e7] {
  color: var(--dt-teal-600);
  line-height: 0;
}
.ts__title[data-v-ef5f59e7] {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-bold);
  line-height: var(--dt-lh-snug);
  text-wrap: balance;
}
.ts__text[data-v-ef5f59e7] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
  line-height: var(--dt-lh-snug);
  text-wrap: pretty;
}
@media (min-width: 420px) {
.ts__grid[data-v-ef5f59e7] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.ts__grid[data-v-ef5f59e7] {
    gap: var(--dt-space-4);
}
.ts__card[data-v-ef5f59e7] {
    padding: var(--dt-space-5) var(--dt-space-3);
}
.ts__title[data-v-ef5f59e7] {
    font-size: var(--dt-fs-base);
}
.ts__text[data-v-ef5f59e7] {
    font-size: var(--dt-fs-sm);
}
}

.disc__options[data-v-aafbf977] {
  display: grid;
  gap: var(--dt-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.disc__option[data-v-aafbf977] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
  width: 100%;
  min-height: 76px;
  padding: var(--dt-space-4);
  text-align: start;
  background: var(--dt-surface);
  border: 1.5px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  font-weight: var(--dt-fw-medium);
  transition:
    border-color var(--dt-dur-2) var(--dt-ease-out),
    background-color var(--dt-dur-2) var(--dt-ease-out),
    box-shadow var(--dt-dur-2) var(--dt-ease-out),
    transform var(--dt-dur-2) var(--dt-ease-spring);
}
.disc__option[data-v-aafbf977]:hover {
  border-color: var(--dt-teal-300);
  transform: translateY(-3px);
  box-shadow: var(--dt-shadow-md);
}
.disc__option--on[data-v-aafbf977] {
  border-color: var(--dt-teal-500);
  background: var(--dt-white);
  box-shadow: 0 0 0 3px var(--dt-teal-100), var(--dt-shadow-md);
}
.disc__emoji[data-v-aafbf977] {
  font-size: 1.6rem;
  line-height: 1;
  transition: transform var(--dt-dur-3) var(--dt-ease-spring);
}
.disc__option--on .disc__emoji[data-v-aafbf977] {
  transform: scale(1.15) rotate(-6deg);
}
.disc__label[data-v-aafbf977] {
  flex: 1;
}
.disc__check[data-v-aafbf977] {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--dt-radius-pill);
  border: 1.5px solid var(--dt-line-strong);
  color: transparent;
  transition:
    background-color var(--dt-dur-2) var(--dt-ease-out),
    border-color var(--dt-dur-2) var(--dt-ease-out),
    color var(--dt-dur-2) var(--dt-ease-out);
}
.disc__option--on .disc__check[data-v-aafbf977] {
  background: var(--dt-teal-500);
  border-color: var(--dt-teal-500);
  color: #fff;
}

/* ---------- recommendation ---------- */
.disc__reco[data-v-aafbf977] {
  display: grid;
  gap: var(--dt-space-5);
  align-items: center;
  margin-block-start: var(--dt-space-8);
  padding: var(--dt-space-4);
  border-radius: var(--dt-radius-xl);
  background: var(--dt-surface);
  border: 1px solid var(--dt-teal-100);
  box-shadow: var(--dt-shadow-lg);
}
.disc__reco-img[data-v-aafbf977] {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dt-radius-lg);
  background: var(--dt-teal-50);
}
.disc__reco-body[data-v-aafbf977] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-2);
}
.disc__reco-eyebrow[data-v-aafbf977] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-teal-600);
}
.disc__reco-title[data-v-aafbf977] {
  font-size: var(--dt-fs-h3);
}
.disc__reco-note[data-v-aafbf977] {
  color: var(--dt-muted);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-snug);
}
.disc__reco-price[data-v-aafbf977] {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: var(--dt-fs-sm);
  color: var(--dt-muted);
}
.disc__reco-price strong[data-v-aafbf977] {
  font-size: 1.5rem;
  color: var(--dt-teal-600);
}
.disc__reco-actions[data-v-aafbf977] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-2);
  align-items: stretch;
}
.reco-enter-active[data-v-aafbf977],
.reco-leave-active[data-v-aafbf977] {
  transition:
    opacity var(--dt-dur-3) var(--dt-ease-out),
    transform var(--dt-dur-4) var(--dt-ease-out);
}
.reco-enter-from[data-v-aafbf977],
.reco-leave-to[data-v-aafbf977] {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}
@media (min-width: 768px) {
.disc__reco[data-v-aafbf977] {
    grid-template-columns: 200px 1fr auto;
    padding: var(--dt-space-5);
}
.disc__reco-img[data-v-aafbf977] {
    aspect-ratio: 1;
}
}

.services__grid[data-v-84c69c1b] {
  display: grid;
  gap: var(--dt-space-5);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  align-items: stretch;
}
.services__grid > li[data-v-84c69c1b] {
  min-width: 0;
}
.services__rail-item[data-v-84c69c1b] {
  width: min(84vw, 340px);
}
.services__controls[data-v-84c69c1b] {
  margin-block-start: var(--dt-space-5);
}
.services__skeleton[data-v-84c69c1b] {
  overflow: hidden;
}
.services__skeleton-body[data-v-84c69c1b] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-3);
  padding: var(--dt-space-5);
}
@media (min-width: 900px) {
.services__cell--wide[data-v-84c69c1b] {
    grid-column: span 2;
}
}

.offers__item[data-v-57976e92] {
  width: min(88vw, 760px);
  display: flex;
}
.offers__item[data-v-57976e92] > * {
  width: 100%;
}
.offers__controls[data-v-57976e92] {
  margin-block-start: var(--dt-space-5);
}
@media (min-width: 1024px) {
.offers__item[data-v-57976e92] {
    width: min(72vw, 820px);
}
}

.why[data-v-0c8eab7e] {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgb(0 159 163 / 0.07), transparent 70%),
    var(--dt-canvas);
}
.why__grid[data-v-0c8eab7e] {
  display: grid;
  gap: var(--dt-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.why__card[data-v-0c8eab7e] {
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-3);
  padding: var(--dt-space-6) var(--dt-space-5);
  border-radius: var(--dt-radius-xl);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-shadow-sm);
  transition:
    transform var(--dt-dur-3) var(--dt-ease-out),
    box-shadow var(--dt-dur-3) var(--dt-ease-out),
    border-color var(--dt-dur-3) var(--dt-ease-out);
}
.why__card[data-v-0c8eab7e]:hover {
  transform: translateY(-6px);
  box-shadow: var(--dt-shadow-lg);
  border-color: var(--dt-teal-200);
}
.why__icon[data-v-0c8eab7e] {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: var(--dt-radius-lg);
  background: var(--dt-teal-50);
  color: var(--dt-teal-600);
  transition:
    background-color var(--dt-dur-3) var(--dt-ease-out),
    color var(--dt-dur-3) var(--dt-ease-out),
    transform var(--dt-dur-3) var(--dt-ease-spring);
}
.why__card:hover .why__icon[data-v-0c8eab7e] {
  background: var(--dt-grad-primary);
  color: #fff;
  transform: rotate(-5deg) scale(1.05);
}
.why__icon-ring[data-v-0c8eab7e] {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--dt-teal-300);
  opacity: 0;
  transition: opacity var(--dt-dur-3) var(--dt-ease-out);
}
.why__card:hover .why__icon-ring[data-v-0c8eab7e] {
  opacity: 1;
  animation: dt-pulse-ring 1.6s var(--dt-ease-out) infinite;
}
.why__title[data-v-0c8eab7e] {
  font-size: var(--dt-fs-h4);
  font-weight: var(--dt-fw-bold);
}
.why__text[data-v-0c8eab7e] {
  font-size: var(--dt-fs-sm);
  color: var(--dt-muted);
  line-height: var(--dt-lh-snug);
}
.why__stats[data-v-0c8eab7e] {
  display: grid;
  gap: var(--dt-space-4);
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--dt-space-8);
  padding: var(--dt-space-6) var(--dt-space-5);
  border-radius: var(--dt-radius-2xl);
  background: var(--dt-grad-deep);
  box-shadow: var(--dt-shadow-lg);
}
@media (min-width: 768px) {
.why__stats[data-v-0c8eab7e] {
    grid-template-columns: repeat(4, 1fr);
    padding: var(--dt-space-8);
}
}
@media (prefers-reduced-motion: reduce) {
.why__card[data-v-0c8eab7e],
  .why__icon[data-v-0c8eab7e] {
    transition: none;
}
.why__card[data-v-0c8eab7e]:hover {
    transform: none;
}
.why__card:hover .why__icon[data-v-0c8eab7e] {
    transform: none;
}
.why__card:hover .why__icon-ring[data-v-0c8eab7e] {
    animation: none;
}
}

.tl[data-v-1192c0e7] {
  background: var(--dt-surface);
}
.tl__list[data-v-1192c0e7] {
  position: relative;
  display: grid;
  gap: var(--dt-space-6);
  grid-template-columns: 1fr;
}

/* Connector: vertical on mobile, horizontal from the tablet breakpoint up. */
.tl__line[data-v-1192c0e7] {
  position: absolute;
  inset-block: 28px auto;
  inset-inline-start: 27px;
  width: 2px;
  height: calc(100% - 56px);
  background: var(--dt-line);
  border-radius: var(--dt-radius-pill);
  overflow: hidden;
}
.tl__line-fill[data-v-1192c0e7] {
  display: block;
  width: 100%;
  height: var(--line, 0%);
  background: var(--dt-grad-primary);
  transition: height 1.4s var(--dt-ease-out);
}
.tl__step[data-v-1192c0e7] {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'marker title'
    'marker text';
  column-gap: var(--dt-space-4);
  row-gap: 0.25rem;
}
.tl__marker[data-v-1192c0e7] {
  grid-area: marker;
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--dt-radius-lg);
  background: var(--dt-surface);
  border: 2px solid var(--dt-teal-200);
  color: var(--dt-teal-600);
  box-shadow: var(--dt-shadow-sm);
  transition:
    background-color var(--dt-dur-3) var(--dt-ease-out),
    color var(--dt-dur-3) var(--dt-ease-out),
    transform var(--dt-dur-3) var(--dt-ease-spring);
}
.tl__step:hover .tl__marker[data-v-1192c0e7] {
  background: var(--dt-grad-primary);
  color: #fff;
  transform: scale(1.06);
}
.tl__number[data-v-1192c0e7] {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-end: -10px;
  padding: 0.1rem 0.4rem;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-navy-700);
  color: #fff;
  font-size: 0.62rem;
  font-weight: var(--dt-fw-bold);
}
.tl__title[data-v-1192c0e7] {
  grid-area: title;
  font-size: var(--dt-fs-h4);
  font-weight: var(--dt-fw-bold);
  align-self: center;
}
.tl__text[data-v-1192c0e7] {
  grid-area: text;
  font-size: var(--dt-fs-sm);
  color: var(--dt-muted);
  line-height: var(--dt-lh-snug);
}
.tl__cta[data-v-1192c0e7] {
  display: flex;
  justify-content: center;
  margin-block-start: var(--dt-space-10);
}
@media (min-width: 768px) {
.tl__list[data-v-1192c0e7] {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dt-space-5);
}
.tl__line[data-v-1192c0e7] {
    inset-block-start: 28px;
    inset-inline: 12% 12%;
    width: auto;
    height: 2px;
}
.tl__line-fill[data-v-1192c0e7] {
    width: var(--line, 0%);
    height: 100%;
    transition: width 1.6s var(--dt-ease-out);
}
.tl__step[data-v-1192c0e7] {
    grid-template-columns: 1fr;
    grid-template-areas:
      'marker'
      'title'
      'text';
    justify-items: center;
    text-align: center;
    row-gap: var(--dt-space-3);
}
.tl__title[data-v-1192c0e7] {
    margin-block-start: var(--dt-space-2);
}
}
@media (prefers-reduced-motion: reduce) {
.tl__line-fill[data-v-1192c0e7] {
    transition: none;
    width: 100%;
    height: 100%;
}
.tl__marker[data-v-1192c0e7] {
    transition: none;
}
.tl__step:hover .tl__marker[data-v-1192c0e7] {
    transform: none;
}
}

.rc[data-v-91bf74fa] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-4);
  height: 100%;
  padding: var(--dt-space-5);
  border-radius: var(--dt-radius-xl);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-shadow-sm);
  overflow: hidden;
  transition:
    transform var(--dt-dur-3) var(--dt-ease-out),
    box-shadow var(--dt-dur-3) var(--dt-ease-out);
}
.rc[data-v-91bf74fa]:hover {
  transform: translateY(-4px);
  box-shadow: var(--dt-shadow-md);
}

/**
 * A testimonial can carry a job photo. When it does the card becomes a two-part
 * layout — image beside the words, as in the design — so the padding moves off
 * the card and onto the text column.
 */
.rc--with-photo[data-v-91bf74fa] {
  display: grid;
  /* RTL: column 1 is the RIGHT-hand track. The design puts the words on the
     right and the photo on the left, so the text takes column 1. */
  grid-template-columns: minmax(0, 1fr) 38%;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.rc--with-photo[data-v-91bf74fa] > :not(.rc__photo) {
  grid-column: 1;
}
.rc--with-photo .rc__photo[data-v-91bf74fa] {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc--with-photo .rc__head[data-v-91bf74fa] {
  padding: var(--dt-space-5) var(--dt-space-5) 0;
}
.rc--with-photo .rc__text[data-v-91bf74fa] {
  padding-inline: var(--dt-space-5);
}
.rc--with-photo .rc__foot[data-v-91bf74fa] {
  padding: 0 var(--dt-space-5) var(--dt-space-5);
}
.rc--with-photo .rc__quote[data-v-91bf74fa] {
  display: none;
}
.rc__quote[data-v-91bf74fa] {
  position: absolute;
  inset-block-start: var(--dt-space-4);
  inset-inline-end: var(--dt-space-4);
  color: var(--dt-teal-100);
  fill: currentColor;
  stroke: none;
}
.rc__head[data-v-91bf74fa] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--dt-space-3);
  align-items: center;
}
.rc__avatar[data-v-91bf74fa] {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-grad-primary);
  color: #fff;
  font-weight: var(--dt-fw-bold);
  font-size: var(--dt-fs-sm);
}
.rc__ident[data-v-91bf74fa] {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.rc__name[data-v-91bf74fa] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: var(--dt-fw-bold);
  font-size: var(--dt-fs-sm);
}
.rc__verified[data-v-91bf74fa] {
  color: var(--dt-teal-500);
}
.rc__place[data-v-91bf74fa] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.rc__head[data-v-91bf74fa] .rating {
  grid-column: 1 / -1;
}
.rc__text[data-v-91bf74fa] {
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-normal);
  color: var(--dt-ink-soft);
  flex: 1;
}
.rc__foot[data-v-91bf74fa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-3);
  padding-block-start: var(--dt-space-3);
  border-block-start: 1px dashed var(--dt-line);
  font-size: var(--dt-fs-xs);
}
.rc__service[data-v-91bf74fa] {
  padding: 0.2rem 0.65rem;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-teal-50);
  color: var(--dt-teal-700);
  font-weight: var(--dt-fw-semibold);
}
.rc__date[data-v-91bf74fa] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--dt-muted-soft);
}
@media (prefers-reduced-motion: reduce) {
.rc[data-v-91bf74fa] {
    transition: none;
}
.rc[data-v-91bf74fa]:hover {
    transform: none;
}
}
@media (max-width: 767px) {
.rc[data-v-91bf74fa] { gap: 10px; padding: 14px;
}
.rc__avatar[data-v-91bf74fa] { width: 38px; height: 38px; font-size: 0.7rem;
}
.rc__head[data-v-91bf74fa] { gap: 9px;
}
.rc__name[data-v-91bf74fa] { font-size: 0.72rem;
}
.rc__place[data-v-91bf74fa] { font-size: 0.61rem;
}
.rc__text[data-v-91bf74fa] { font-size: 0.72rem; line-height: 1.75;
}
.rc__foot[data-v-91bf74fa] { gap: 8px; padding-block-start: 9px; font-size: 0.62rem;
}
.rc__service[data-v-91bf74fa] { padding: 3px 8px;
}
}

.rv__summary[data-v-a9b19f6d] {
  display: grid;
  gap: var(--dt-space-5);
  align-items: center;
  padding: var(--dt-space-5);
  margin-block-end: var(--dt-space-8);
  border-radius: var(--dt-radius-xl);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-shadow-sm);
}
.rv__summary-cell[data-v-a9b19f6d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}
.rv__google[data-v-a9b19f6d] {
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
}
.rv__google-mark[data-v-a9b19f6d] {
  width: 34px;
  height: 34px;
}
.rv__google-text[data-v-a9b19f6d] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.rv__google-text strong[data-v-a9b19f6d] {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-bold);
}
.rv__google-text small[data-v-a9b19f6d] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--dt-fs-xs);
  color: var(--dt-success);
}
.rv__score[data-v-a9b19f6d] {
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem);
  font-weight: var(--dt-fw-bold);
  line-height: 1;
  color: var(--dt-teal-600);
}
.rv__score-of[data-v-a9b19f6d] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.rv__count[data-v-a9b19f6d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: var(--dt-teal-600);
}
.rv__count strong[data-v-a9b19f6d] {
  font-size: 1.7rem;
  color: var(--dt-ink);
  line-height: 1.1;
}
.rv__count small[data-v-a9b19f6d] {
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.rv__breakdown[data-v-a9b19f6d] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.rv__breakdown li[data-v-a9b19f6d] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--dt-space-2);
  font-size: var(--dt-fs-xs);
  color: var(--dt-muted);
}
.rv__bd-star[data-v-a9b19f6d] {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--dt-gold-600);
  font-weight: var(--dt-fw-semibold);
}
.rv__bd-star[data-v-a9b19f6d] svg {
  fill: currentColor;
}
.rv__bd-bar[data-v-a9b19f6d] {
  height: 6px;
  border-radius: var(--dt-radius-pill);
  background: var(--dt-surface-sunken);
  overflow: hidden;
}
.rv__bd-fill[data-v-a9b19f6d] {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--dt-gold-500);
}
.rv__bd-count[data-v-a9b19f6d] {
  min-width: 3.2em;
  text-align: start;
}
.rv__item[data-v-a9b19f6d] {
  width: min(86vw, 380px);
  display: flex;
}
.rv__item[data-v-a9b19f6d] > * {
  width: 100%;
}
.rv__controls[data-v-a9b19f6d] {
  margin-block-start: var(--dt-space-5);
  justify-content: center;
  gap: var(--dt-space-6);
}

/**
 * On phones the summary matches the design's compact bar: Google, the score and
 * the review count sit three-across with hairline dividers, and the per-star
 * breakdown is dropped — five bar rows cost a lot of height for detail nobody
 * reads on a small screen. It comes back from tablet up.
 */
@media (max-width: 767px) {
.rv__summary[data-v-a9b19f6d] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dt-space-2);
    padding: var(--dt-space-4) var(--dt-space-2);
}
.rv__breakdown[data-v-a9b19f6d] {
    display: none;
}
.rv__summary-cell[data-v-a9b19f6d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.rv__summary-cell + .rv__summary-cell[data-v-a9b19f6d] {
    border-inline-start: 1px solid var(--dt-line);
}
.rv__google-mark[data-v-a9b19f6d] { width: 24px; height: 24px;
}
.rv__google[data-v-a9b19f6d] { gap: 5px;
}
.rv__google-text strong[data-v-a9b19f6d] { font-size: 0.62rem;
}
.rv__google-text small[data-v-a9b19f6d] { font-size: 0.52rem;
}
.rv__score[data-v-a9b19f6d] { font-size: 1.55rem;
}
.rv__score-of[data-v-a9b19f6d],
  .rv__count small[data-v-a9b19f6d] { font-size: 0.58rem;
}
.rv__count strong[data-v-a9b19f6d] { font-size: 1.25rem;
}
.rv__item[data-v-a9b19f6d] { width: min(82vw, 340px);
}
}
@media (min-width: 768px) {
.rv__summary[data-v-a9b19f6d] {
    grid-template-columns: auto auto auto 1fr;
    padding: var(--dt-space-6);
}
.rv__summary-cell[data-v-a9b19f6d] {
    padding-inline-end: var(--dt-space-6);
    border-inline-end: 1px solid var(--dt-line);
}
.rv__breakdown[data-v-a9b19f6d] {
    padding-inline-start: var(--dt-space-4);
}
}

.blog__grid[data-v-784283b0] {
  display: grid;
  gap: var(--dt-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.blog__grid > li[data-v-784283b0] {
  min-width: 0;
}
/**
 * Lama Sans — the DOCTOL brand typeface, matching doctol.com.sa.
 *
 * Self-hosted rather than loaded from a CDN: it is not on Google Fonts, and
 * keeping the files local removes a third-party round-trip from the critical
 * path. `font-display: swap` means Arabic text paints immediately in the
 * fallback and reflows once, instead of blocking on the download.
 */

@font-face {
  font-family: 'Lama Sans';
  src: url('/fonts/lama-sans/LamaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lama Sans';
  src: url('/fonts/lama-sans/LamaSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lama Sans';
  src: url('/fonts/lama-sans/LamaSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lama Sans';
  src: url('/fonts/lama-sans/LamaSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/**
 * DOCTOL Design Tokens
 * Single source of truth for colour, type, space, radius, elevation and motion.
 * Components must never hard-code raw hex values — always reference a token.
 */

:root {
  /* ---------- Brand ---------- */
  --dt-teal-50: #f1faf9;
  --dt-teal-100: #ddf3f2;
  --dt-teal-200: #b9e6e6;
  --dt-teal-300: #7fd2d3;
  --dt-teal-400: #35b7ba;
  --dt-teal-500: #009fa3; /* primary */
  --dt-teal-600: #008c90;
  --dt-teal-700: #007377;
  --dt-teal-800: #045b60;

  --dt-navy-500: #0d5468;
  --dt-navy-600: #094354;
  --dt-navy-700: #073b4c; /* brand navy */
  --dt-navy-800: #052a37;
  --dt-navy-900: #041e28;

  --dt-gold-300: #fadd8c;
  --dt-gold-400: #f7cf62;
  --dt-gold-500: #f5c542; /* accent */
  --dt-gold-600: #dba91f;

  /* ---------- Neutrals ---------- */
  --dt-white: #ffffff;
  --dt-canvas: #f7fbfb;
  --dt-surface: #ffffff;
  --dt-surface-sunken: #f2f7f8;
  --dt-ink: #0b1f27;
  --dt-ink-soft: #33525e;
  --dt-muted: #5f7d89;
  --dt-muted-soft: #8aa2ac;
  --dt-line: #e3edef;
  --dt-line-strong: #cddde1;

  /* ---------- Semantic ---------- */
  --dt-success: #12a06a;
  --dt-success-soft: #e6f6ef;
  --dt-warning: #d9880c;
  --dt-warning-soft: #fdf3e2;
  --dt-danger: #d64550;
  --dt-danger-soft: #fdeced;
  --dt-info: var(--dt-teal-500);

  /* ---------- Aliases ---------- */
  --dt-primary: var(--dt-teal-500);
  --dt-primary-hover: var(--dt-teal-600);
  --dt-primary-press: var(--dt-teal-700);
  --dt-on-primary: #ffffff;
  --dt-focus-ring: color-mix(in srgb, var(--dt-teal-500) 45%, transparent);

  /* ---------- Gradients ---------- */
  --dt-grad-primary: linear-gradient(135deg, #009fa3 0%, #007f83 100%);
  --dt-grad-deep: linear-gradient(140deg, #073b4c 0%, #05606a 55%, #009fa3 130%);
  --dt-grad-mint: linear-gradient(160deg, #f1faf9 0%, #ffffff 70%);
  --dt-grad-gold: linear-gradient(135deg, #f7cf62 0%, #e6ac21 100%);
  --dt-grad-sheen: linear-gradient(
    100deg,
    transparent 20%,
    rgb(255 255 255 / 0.55) 50%,
    transparent 80%
  );

  /* ---------- Typography ---------- */
  /* Lama Sans is the brand face; the rest are metric-adjacent fallbacks that
     keep Arabic readable during the swap and on the rare unsupported client. */
  --dt-font: 'Lama Sans', 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', system-ui,
    -apple-system, sans-serif;
  --dt-fw-regular: 400;
  --dt-fw-medium: 500;
  --dt-fw-semibold: 600;
  --dt-fw-bold: 700;

  /* Fluid type — clamps between the 390px and 1440px breakpoints */
  --dt-fs-display: clamp(2.15rem, 1.35rem + 3.4vw, 4rem);
  --dt-fs-h1: clamp(1.85rem, 1.25rem + 2.5vw, 3rem);
  --dt-fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --dt-fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  --dt-fs-h4: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --dt-fs-body-lg: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --dt-fs-body: 1rem;
  --dt-fs-sm: 0.875rem;
  --dt-fs-xs: 0.78rem;

  --dt-lh-tight: 1.22;
  --dt-lh-snug: 1.4;
  --dt-lh-normal: 1.75;

  /* ---------- Space (4pt base) ---------- */
  --dt-space-1: 0.25rem;
  --dt-space-2: 0.5rem;
  --dt-space-3: 0.75rem;
  --dt-space-4: 1rem;
  --dt-space-5: 1.25rem;
  --dt-space-6: 1.5rem;
  --dt-space-8: 2rem;
  --dt-space-10: 2.5rem;
  --dt-space-12: 3rem;
  --dt-space-16: 4rem;
  --dt-space-20: 5rem;

  /* Section rhythm scales with viewport so mobile never feels airy-empty */
  --dt-section-y: clamp(3rem, 2rem + 5vw, 6.5rem);
  --dt-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --dt-container: 1240px;

  /* ---------- Radius ---------- */
  --dt-radius-xs: 8px;
  --dt-radius-sm: 12px;
  --dt-radius-md: 16px;
  --dt-radius-lg: 22px;
  --dt-radius-xl: 28px;
  --dt-radius-2xl: 36px;
  --dt-radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --dt-shadow-xs: 0 1px 2px rgb(7 59 76 / 0.06);
  --dt-shadow-sm: 0 2px 8px rgb(7 59 76 / 0.06), 0 1px 2px rgb(7 59 76 / 0.04);
  --dt-shadow-md: 0 8px 24px -8px rgb(7 59 76 / 0.14), 0 2px 6px rgb(7 59 76 / 0.05);
  --dt-shadow-lg: 0 20px 48px -16px rgb(7 59 76 / 0.2), 0 4px 12px rgb(7 59 76 / 0.06);
  --dt-shadow-xl: 0 36px 80px -24px rgb(7 59 76 / 0.28), 0 8px 20px rgb(7 59 76 / 0.08);
  --dt-shadow-teal: 0 16px 32px -12px rgb(0 159 163 / 0.45);
  --dt-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.6);

  /* ---------- Motion ---------- */
  --dt-dur-1: 140ms;
  --dt-dur-2: 220ms;
  --dt-dur-3: 320ms;
  --dt-dur-4: 480ms;
  --dt-dur-5: 700ms;
  --dt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dt-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- Layout constants ---------- */
  --dt-header-h: 72px;
  --dt-mobilenav-h: 68px;
  --dt-z-header: 900;
  --dt-z-mobilenav: 880;
  --dt-z-drawer: 950;
  --dt-z-modal: 1000;
  --dt-z-toast: 1100;
}

@media (min-width: 1024px) {
  :root {
    --dt-header-h: 84px;
  }
}

/* Motion is opt-out at the token level so every animation respects it at once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dt-dur-1: 1ms;
    --dt-dur-2: 1ms;
    --dt-dur-3: 1ms;
    --dt-dur-4: 1ms;
    --dt-dur-5: 1ms;
  }
}
/**
 * DOCTOL base layer — reset, Arabic-first typography, RTL defaults, focus model.
 */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding under it. */
  scroll-padding-top: calc(var(--dt-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--dt-font);
  font-size: var(--dt-fs-body);
  font-weight: var(--dt-fw-regular);
  line-height: var(--dt-lh-normal);
  color: var(--dt-ink);
  background: var(--dt-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Locks scroll while a modal / drawer / sheet owns the screen. */
body.is-locked {
  overflow: hidden;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  /**
   * The `width`/`height` HTML attributes land as presentational hints on the
   * CSS `height` property. Without this, an <img width="900" height="560">
   * styled `width: 100%` keeps a *used* height of 560px — so on a narrow screen
   * the artwork letterboxes inside its own box and leaves empty bands above and
   * below it. `height: auto` restores the intrinsic ratio while the attributes
   * still reserve space and prevent layout shift.
   */
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--dt-fw-bold);
  line-height: var(--dt-lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--dt-fs-h1);
}
h2 {
  font-size: var(--dt-fs-h2);
}
h3 {
  font-size: var(--dt-fs-h3);
}
h4 {
  font-size: var(--dt-fs-h4);
  font-weight: var(--dt-fw-semibold);
}

p {
  text-wrap: pretty;
}

/**
 * `.num` — a run that is *only* Latin digits and separators (prices without a
 * currency word, phone numbers, references, counts). Isolating it as LTR stops
 * neighbouring Arabic text from reordering the digits or the "+"/"−" sign.
 */
.num,
time,
[data-num] {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/**
 * `.money` — a number followed by the Arabic currency word ("1,250 ريال").
 * This one must stay in the RTL flow so the amount sits to the right of the
 * word, the way Arabic readers expect; forcing LTR here would flip the pair.
 */
.money {
  font-variant-numeric: tabular-nums;
}

/* ---------- Focus model ----------
   Pointer users never see rings; keyboard users always do. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--dt-focus-ring);
  outline-offset: 2px;
  border-radius: var(--dt-radius-xs);
}

::selection {
  background: var(--dt-teal-200);
  color: var(--dt-navy-800);
}

/* ---------- Scrollbars ---------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--dt-line-strong);
    border-radius: var(--dt-radius-pill);
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--dt-muted-soft);
    background-clip: content-box;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  inset-inline-start: 50%;
  top: 0;
  translate: 50% -120%;
  z-index: calc(var(--dt-z-toast) + 1);
  background: var(--dt-navy-700);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--dt-radius-md) var(--dt-radius-md);
  font-weight: var(--dt-fw-semibold);
  transition: translate var(--dt-dur-2) var(--dt-ease-out);
}

.skip-link:focus-visible {
  translate: 50% 0;
}
/**
 * DOCTOL utilities — layout primitives, reveal animations, shared surface recipes.
 * Kept deliberately small: anything used by 3+ components lives here, everything
 * else stays scoped inside its component.
 */

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

.container--wide {
  max-width: 1440px;
}

.section {
  padding-block: var(--dt-section-y);
  position: relative;
}

.section--tight {
  padding-block: calc(var(--dt-section-y) * 0.62);
}

.section--mint {
  background: var(--dt-grad-mint);
}

.section--sunken {
  background: var(--dt-surface-sunken);
}

.stack {
  display: flex;
  flex-direction: column;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-space-3);
}

/* ---------- Accessibility ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Surfaces ---------- */
.card-surface {
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-radius-lg);
  box-shadow: var(--dt-shadow-sm);
}

.glass-surface {
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.6);
}

/* ---------- Text helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-space-2);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-teal-600);
  background: var(--dt-teal-50);
  border: 1px solid var(--dt-teal-100);
  padding: 0.35rem 0.85rem;
  border-radius: var(--dt-radius-pill);
}

.text-muted {
  color: var(--dt-muted);
}

.lead {
  font-size: var(--dt-fs-body-lg);
  color: var(--dt-ink-soft);
  line-height: var(--dt-lh-normal);
}

/* ---------- Scroll reveal ----------
   Elements marked with v-reveal start hidden and are released by an
   IntersectionObserver adding [data-revealed]. If JS never runs the
   content still shows, because .no-js short-circuits the hidden state. */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--dt-dur-5) var(--dt-ease-out),
    transform var(--dt-dur-5) var(--dt-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal='up'] {
  transform: translate3d(0, 28px, 0);
}
[data-reveal='down'] {
  transform: translate3d(0, -22px, 0);
}
[data-reveal='start'] {
  transform: translate3d(32px, 0, 0); /* RTL: enters from the right */
}
[data-reveal='end'] {
  transform: translate3d(-32px, 0, 0);
}
[data-reveal='scale'] {
  transform: scale(0.94);
}
[data-reveal='fade'] {
  transform: none;
}

[data-revealed] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Horizontal scroll rails (mobile carousels) ---------- */
.rail {
  display: flex;
  gap: var(--dt-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--dt-space-2);
  /* Bleed to the viewport edges so cards peek past the container. */
  margin-inline: calc(var(--dt-gutter) * -1);
  padding-inline: var(--dt-gutter);
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* ---------- Skeleton loading ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--dt-surface-sunken);
  border-radius: var(--dt-radius-sm);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dt-grad-sheen);
  translate: -100% 0;
  animation: dt-sheen 1.4s infinite;
}

@keyframes dt-sheen {
  to {
    translate: 100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

/* ---------- Shared keyframes ---------- */
@keyframes dt-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes dt-pulse-ring {
  0% {
    opacity: 0.55;
    transform: scale(0.85);
  }
  70% {
    opacity: 0;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes dt-spin {
  to {
    rotate: 360deg;
  }
}

/* ---------- Route transitions ---------- */
.route-fade-enter-active,
.route-fade-leave-active {
  transition:
    opacity var(--dt-dur-3) var(--dt-ease-out),
    transform var(--dt-dur-3) var(--dt-ease-out);
}

.route-fade-enter-from {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.route-fade-leave-to {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

/**
 * `.mobile-hidden` — kept in the DOM for desktop, removed from the phone
 * layout. Used on the home page for sections the mobile design doesn't include,
 * and for the two that would otherwise duplicate a new section (WhyDoctol
 * repeats the trust strip; ExperienceTimeline repeats "كيف نخدمك؟").
 */
@media (max-width: 767px) {
  .mobile-hidden {
    display: none;
  }
}
/**
 * Service-landing accent variants.
 *
 * Every landing shares one design system but needs its own character — the
 * brief asked for pages that don't look like copies of each other. Rather than
 * seven stylesheets, each page sets one accent class on its root and the
 * section components read these variables. Teal stays the brand anchor
 * everywhere; the accent shifts hue, hero wash and pattern.
 */

.sl {
  --sl-accent: var(--dt-teal-500);
  --sl-accent-deep: var(--dt-teal-700);
  --sl-accent-soft: var(--dt-teal-50);
  --sl-accent-line: var(--dt-teal-100);
  --sl-on-accent: #ffffff;
  --sl-hero: linear-gradient(160deg, #f1faf9 0%, #ffffff 55%, #f7fbfb 100%);
  --sl-hero-orb: rgb(0 159 163 / 0.24);
  --sl-band: var(--dt-grad-deep);
  --sl-pattern-size: 64px;
  --sl-pattern-color: rgb(7 59 76 / 0.035);
}

/* التأهيلية — transformation, structural, navy-led */
.sl--rehab {
  --sl-accent: #0d5468;
  --sl-accent-deep: #073b4c;
  --sl-accent-soft: #eef4f6;
  --sl-accent-line: #d5e4e9;
  --sl-hero: linear-gradient(155deg, #eef4f6 0%, #ffffff 50%, #f4f8f9 100%);
  --sl-hero-orb: rgb(13 84 104 / 0.22);
  --sl-pattern-size: 40px;
}

/* الأثاث — warm, soft, tactile */
.sl--furniture {
  --sl-accent: #009fa3;
  --sl-accent-deep: #007377;
  --sl-accent-soft: #fbf6ef;
  --sl-accent-line: #ecdfcd;
  --sl-hero: linear-gradient(155deg, #fbf5ed 0%, #ffffff 52%, #f2faf9 100%);
  --sl-hero-orb: rgb(245 197 66 / 0.22);
  --sl-pattern-size: 88px;
  --sl-pattern-color: rgb(176 135 87 / 0.06);
}

/* المسابح والخزانات — cool, aquatic, calm */
.sl--water {
  --sl-accent: #1f9fc4;
  --sl-accent-deep: #0f6f8e;
  --sl-accent-soft: #eef8fb;
  --sl-accent-line: #cfe9f2;
  --sl-hero: linear-gradient(155deg, #e9f6fb 0%, #ffffff 55%, #f0fbfd 100%);
  --sl-hero-orb: rgb(31 159 196 / 0.28);
  --sl-band: linear-gradient(140deg, #0f6f8e 0%, #0b4f66 55%, #073b4c 100%);
  --sl-pattern-size: 56px;
  --sl-pattern-color: rgb(31 159 196 / 0.07);
}

/* المساجد — dignified, gold-touched, quiet */
.sl--mosque {
  --sl-accent: #1f7a5a;
  --sl-accent-deep: #145340;
  --sl-accent-soft: #f2f8f4;
  --sl-accent-line: #d8ebe1;
  --sl-hero: linear-gradient(155deg, #f6f3ea 0%, #ffffff 52%, #f1f8f4 100%);
  --sl-hero-orb: rgb(245 197 66 / 0.2);
  --sl-band: linear-gradient(140deg, #145340 0%, #0e3b2e 60%, #08251d 100%);
  --sl-pattern-size: 32px;
  --sl-pattern-color: rgb(31 122 90 / 0.07);
}

/* السيارات — dark, dynamic, high-contrast */
.sl--car {
  --sl-accent: #00a79d;
  --sl-accent-deep: #04575a;
  --sl-accent-soft: #eef3f4;
  --sl-accent-line: #d3e0e2;
  --sl-hero: linear-gradient(150deg, #eceff1 0%, #ffffff 48%, #eef7f7 100%);
  --sl-hero-orb: rgb(27 36 42 / 0.2);
  --sl-band: linear-gradient(140deg, #1b242a 0%, #04575a 70%, #00a79d 140%);
  --sl-pattern-size: 24px;
  --sl-pattern-color: rgb(27 36 42 / 0.06);
}

/* المكاتب والمحلات — corporate, structured, slate */
.sl--corporate {
  --sl-accent: #14657e;
  --sl-accent-deep: #0a3d4d;
  --sl-accent-soft: #eff3f5;
  --sl-accent-line: #d4e1e6;
  --sl-hero: linear-gradient(155deg, #eff3f5 0%, #ffffff 50%, #f2f8f9 100%);
  --sl-hero-orb: rgb(20 101 126 / 0.2);
  --sl-pattern-size: 48px;
  --sl-pattern-color: rgb(20 101 126 / 0.06);
}

/* مكافحة الحشرات — technical, amber-warned */
.sl--pest {
  --sl-accent: #0a7d78;
  --sl-accent-deep: #05504d;
  --sl-accent-soft: #f0f7f6;
  --sl-accent-line: #cfe6e3;
  --sl-hero: linear-gradient(155deg, #f0f7f6 0%, #ffffff 52%, #fdf7ea 100%);
  --sl-hero-orb: rgb(217 136 12 / 0.18);
  --sl-band: linear-gradient(140deg, #05504d 0%, #073b4c 60%, #0a7d78 130%);
  --sl-pattern-size: 36px;
  --sl-pattern-color: rgb(10 125 120 / 0.07);
}

/* Shared decorative grid used by the hero and band sections. */
.sl-pattern {
  background-image:
    linear-gradient(var(--sl-pattern-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--sl-pattern-color) 1px, transparent 1px);
  background-size: var(--sl-pattern-size) var(--sl-pattern-size);
}
/*
 * Home-page visual overrides for phones only.
 * All Vue components, stores, routes and booking behaviour remain untouched.
 */
@media (max-width: 767px) {
  :root {
    --dt-gutter: 14px;
    --dt-section-y: 30px;
    --dt-header-h: 76px;
    --dt-mobilenav-h: 76px;
  }

  body { background: #fff; }
  .container { width: 100%; padding-inline: var(--dt-gutter); }
  .section { padding-block: var(--dt-section-y); }

  /* Hero: photo and message proportions from the supplied mobile artwork. */
  .hero { height: 520px; min-height: 520px; }
  .hero__inner { height: 520px; min-height: 520px; }
  .hero__visual-wrap,
  .hero__parallax,
  .hero__visual { height: 100%; }
  .hero__visual picture,
  .hero__visual img {
    height: 100%;
    object-fit: cover;
    object-position: 34% center;
    filter: contrast(0.96) saturate(0.96) brightness(0.98);
  }
  .hero__inner::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  .hero__copy {
    position: absolute;
    inset-inline-start: 4%;
    inset-inline-end: auto;
    inset-block-start: 158px;
    width: 43%;
    max-width: 43%;
    margin: 0;
    padding: 0;
    gap: 14px;
    align-items: flex-start;
    text-align: start;
  }
  .hero__title {
    width: 100%;
    font-size: clamp(1.75rem, 7.4vw, 2.25rem);
    line-height: 1.42;
  }
  .hero__checks { width: 100%; gap: 8px; font-size: 13px; }
  .hero__checks li { white-space: nowrap; }
  .hero__actions,
  .hero__actions > * { width: 100%; }
  .hero__actions .btn { min-height: 48px; justify-content: center; border-radius: 999px; font-size: 17px; }

  /* Shortcut card directly below the hero. */
  .ql { margin-block-start: 0; padding: 10px 12px 0; background: #fff; }
  .ql .container { padding: 0; }
  .ql__rail { width: 100%; padding: 13px 0; border-radius: 18px; overflow: hidden; }
  .ql__item { flex: 1 1 20%; }
  .ql__link { width: 100%; min-width: 0; padding-inline: 2px; }
  .ql__label { font-size: 11px; }

  /* Compact headings used throughout the reference. */
  .sh { gap: 7px; margin-block-end: 16px; }
  .sh__text { gap: 5px; }
  .sh__eyebrow { display: none; }
  .sh__title { color: var(--dt-navy-700); font-size: 22px; }
  .sh__subtitle { color: var(--dt-muted); font-size: 13px; line-height: 1.55; }
  .sh__action { align-self: flex-start; }
  .sh__action .btn { min-height: 38px; padding: 6px 13px; font-size: 12px; }

  /* Service cards: three tall cards at the same visible scale as the design. */
  .services__rail { margin-inline: -14px; padding-inline: 14px; gap: 12px; }
  .services__rail-item { width: min(31vw, 138px); }
  .services__rail-item .sc { min-height: 278px; border-radius: 15px; }
  .services__rail-item .sc__media { height: 130px; }
  .services__controls {
    justify-content: center;
    margin-block-start: 12px;
  }
  .services__controls .cc__buttons { display: none; }

  /* Four trust cards across one row. */
  .ts { padding-block: 18px 28px; background: #fff; }
  .ts__grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .ts__card { min-height: 130px; padding: 10px 5px; border-radius: 14px; }
  .ts__icon { width: 42px; height: 42px; }
  .ts__title { font-size: 12px; text-align: center; }
  .ts__text { font-size: 9px; line-height: 1.55; text-align: center; }

  /* Offer and package cards occupy almost the full phone width. */
  .offers__rail { margin-inline: -14px; padding-inline: 14px; }
  .offers__item { width: min(88vw, 390px); }
  .offers__item .oc { min-height: 210px; border-radius: 16px; }
  .packages__grid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    margin-inline: -14px;
    padding-inline: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .packages__grid::-webkit-scrollbar { display: none; }
  .packages__grid > li { flex: 0 0 min(88vw, 390px); scroll-snap-align: start; }
  .packages__grid .pc { min-height: 230px; border-radius: 16px; }

  /* Rewards and before/after retain their original interactivity. */
  .rw__grid { grid-template-columns: 1.6fr 1fr; gap: 8px; }
  .rw__card { min-height: 150px; padding: 12px; border-radius: 14px; }
  .rw__title { font-size: 15px; }
  .rw__text { font-size: 10px; }
  .rw__cta { min-height: 32px; padding: 5px 12px; font-size: 11px; }
  .ba-sec__layout { gap: 10px; }
  .ba-sec__stage { border-radius: 15px; }

  /* Four booking steps in one line, like the third supplied screen. */
  .hws { background: #fff; text-align: center; }
  .hws__head { text-align: center; }
  .hws__title { font-size: 25px; }
  .hws__steps { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .hws__step { min-width: 0; padding-inline: 2px; }
  .hws__tile { width: 62px; height: 62px; margin-inline: auto; border-radius: 14px; }
  .hws__step-title { font-size: 11px; }
  .hws__step-text { font-size: 9px; line-height: 1.65; }

  .gb { padding-block: 4px 24px; }
  .gb__card { min-height: 190px; padding: 20px; border-radius: 18px; }
  .gb__title { font-size: 20px; }
  .gb__text { font-size: 12px; }

  /* Review summary and lead testimonial. */
  .rv__summary { border-radius: 16px; overflow: hidden; }
  .rv__rail { margin-inline: -14px; padding-inline: 14px; }
  .rv__item { width: min(88vw, 390px); }
  .rv__item .rc { min-height: 235px; border-radius: 16px; }

  /* Three article cards across the visible mobile rail. */
  .blog__grid {
    display: flex;
    overflow-x: auto;
    gap: 9px;
    margin-inline: -14px;
    padding-inline: 14px;
    scrollbar-width: none;
  }
  .blog__grid::-webkit-scrollbar { display: none; }
  .blog__grid > li { flex: 0 0 min(30vw, 135px); }
  .blog__grid .bc { min-height: 185px; border-radius: 13px; }

  /* Compact FAQ rows and final CTA. */
  .faq__list { gap: 6px; }
  .faq__item { border-radius: 12px; }
  .faq__trigger { min-height: 48px; padding: 7px 10px; }
  .faq__question { font-size: 11px; }
  .faq__help { display: none; }
  .cta { margin: 0 14px 18px; border-radius: 16px; overflow: hidden; }
  .cta__inner { min-height: 130px; padding: 12px; }

  /* Footer and fixed navigation remain the original functional components. */
  .footer { border-radius: 26px 26px 0 0; padding-block-end: calc(var(--dt-mobilenav-h) + 18px); }
  .mnav { border-radius: 26px 26px 0 0; }

  /* Precise card proportions. These rules only restyle the original,
     fully-wired components; no links, click handlers or booking calls change. */
  body #main .home-page .services__rail-item .sc__media {
    aspect-ratio: auto;
    height: 124px;
  }
  body #main .home-page .services__rail-item .sc__icon {
    inset-block-end: -18px;
    inset-inline-end: 50%;
    transform: translateX(50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
  body #main .home-page .services__rail-item .sc__body {
    gap: 5px;
    padding: 27px 9px 10px;
    text-align: center;
  }
  body #main .home-page .services__rail-item .sc__name {
    font-size: 13px;
    line-height: 1.45;
  }
  body #main .home-page .services__rail-item .sc__tagline,
  body #main .home-page .services__rail-item .sc__summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 9px;
    line-height: 1.55;
  }
  body #main .home-page .services__rail-item .sc__summary { color: var(--dt-muted); }
  body #main .home-page .services__rail-item .sc__tags,
  body #main .home-page .services__rail-item .sc__meta { display: none; }
  body #main .home-page .services__rail-item .sc__footer {
    padding: 7px 8px 9px;
    gap: 4px;
  }
  body #main .home-page .services__rail-item .sc__price-label,
  body #main .home-page .services__rail-item .sc__price-unit { display: none; }
  body #main .home-page .services__rail-item .sc__price-value { font-size: 15px; }
  body #main .home-page .services__rail-item .sc__price-currency { font-size: 9px; }
  body #main .home-page .services__rail-item .sc__fav { width: 29px; height: 29px; }
  body #main .home-page .services__rail-item .sc__actions { gap: 3px; }
  body #main .home-page .services__rail-item .sc__actions .btn {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 10px;
  }

  /* Horizontal promotional card: image left, live offer controls right. */
  body #main .home-page .offers__item .oc {
    display: flex;
    flex-direction: row-reverse;
    height: 218px;
    min-height: 218px;
  }
  body #main .home-page .offers__item .oc__media {
    flex: 0 0 49%;
    height: 100%;
    aspect-ratio: auto;
    position: relative;
    z-index: 1;
  }
  body #main .home-page .offers__item .oc__body {
    min-width: 0;
    gap: 7px;
    padding: 14px 11px;
    position: relative;
    z-index: 2;
    background: #fff;
  }
  body #main .home-page .offers__item .oc__title { font-size: 16px; line-height: 1.35; }
  body #main .home-page .offers__item .oc__subtitle { font-size: 10px; }
  body #main .home-page .offers__item .oc__highlights { gap: 3px 5px; }
  body #main .home-page .offers__item .oc__highlights li { font-size: 8px; }
  body #main .home-page .offers__item .oc__pricing { gap: 4px; }
  body #main .home-page .offers__item .oc__pricing .countdown { display: none; }
  body #main .home-page .offers__item .oc__scarcity { display: none; }
  body #main .home-page .offers__item .oc__body > .btn {
    min-height: 36px;
    margin-block-start: auto;
    padding: 5px 9px;
    font-size: 11px;
  }
  body #main .home-page .offers__item .oc__ribbon {
    inset-block-start: 10px;
    padding: 5px 10px;
    font-size: 10px;
  }

  /* Packages keep their expand and booking actions, in the compact artwork. */
  body #main .home-page .packages__grid .pc {
    display: grid;
    grid-template-columns: 43% 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 10px;
    row-gap: 6px;
    min-height: 236px;
    padding: 11px;
  }
  body #main .home-page .packages__grid .pc__toggle { display: contents; }
  body #main .home-page .packages__grid .pc__media {
    grid-column: 1;
    grid-row: 1 / 5;
    min-height: 210px;
    border-radius: 12px;
  }
  body #main .home-page .packages__grid .pc__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
  }
  body #main .home-page .packages__grid .pc__head { grid-column: 2; grid-row: 1; }
  body #main .home-page .packages__grid .pc__name { font-size: 15px; }
  body #main .home-page .packages__grid .pc__tagline { font-size: 9px; }
  body #main .home-page .packages__grid .pc__pricing {
    grid-column: 2;
    grid-row: 2;
    gap: 4px;
  }
  body #main .home-page .packages__grid .pc__saving { padding: 3px 6px; font-size: 8px; }
  body #main .home-page .packages__grid .pc__items {
    grid-column: 2;
    grid-row: 3;
    gap: 3px;
  }
  body #main .home-page .packages__grid .pc__items li { gap: 4px; font-size: 9px; }
  body #main .home-page .packages__grid .pc__item-icon { width: 22px; height: 22px; }
  body #main .home-page .packages__grid .pc__details { grid-column: 2; padding: 6px; gap: 3px; }
  body #main .home-page .packages__grid .pc__cta {
    grid-column: 2;
    grid-row: 4;
    min-height: 34px;
    padding: 4px 8px;
    font-size: 10px;
  }
  body #main .home-page .packages__grid .pc__flag {
    inset-block-start: 7px;
    inset-inline-end: 7px;
    z-index: 2;
    padding: 4px 8px;
    font-size: 8px;
  }

  /* Keep interactive rails compact and above the fixed navigation. */
  body #main .home-page .rw__grid { align-items: stretch; }
  body #main .home-page .rw__card { height: 144px; min-height: 144px; overflow: hidden; }
  body #main .home-page .rw__wheel { width: 126px; max-width: 48%; }
  body #main .home-page .ba-sec__layout { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
  body #main .home-page .ba-sec__stage { min-width: 0; }
  body #main .home-page .ba__frame { height: 185px; min-height: 185px; }
  body #main .home-page .ba-sec__side { min-width: 0; }
  body #main .home-page .ba-sec__tabs { gap: 6px; }
  body #main .home-page .ba-sec__tab { padding: 7px; gap: 5px; }
  body #main .home-page .ba-sec__tab-text strong { font-size: 9px; }
  body #main .home-page .ba-sec__tab-text small { display: none; }
  body #main .home-page .ba-sec__cta { display: none; }

  body #main .home-page .hws { padding-block: 26px; }
  body #main .home-page .hws__sub { font-size: 13px; }
  body #main .home-page .hws__marker { margin-block-end: 8px; }
  body #main .home-page .hws__num { width: 27px; height: 27px; font-size: 12px; }
  body #main .home-page .hws__step:not(:last-child) .hws__marker::after { top: 13px; }

  body #main .home-page .gb__card {
    display: grid;
    grid-template-columns: 35% 1fr;
    align-items: center;
    gap: 10px;
    min-height: 176px;
    padding: 16px;
  }
  body #main .home-page .gb__shield { grid-column: 1; grid-row: 1 / 4; width: 100%; }
  body #main .home-page .gb__title,
  body #main .home-page .gb__text,
  body #main .home-page .gb__points { grid-column: 2; }
  body #main .home-page .gb__points { gap: 5px; }
  body #main .home-page .gb__point { padding: 4px; font-size: 9px; }

  body #main .home-page .rv__summary { display: grid; grid-template-columns: repeat(3, 1fr); }
  body #main .home-page .rv__summary-cell { min-width: 0; padding: 10px 5px; }
  body #main .home-page .rv__score { font-size: 28px; }
  body #main .home-page .rv__breakdown { display: none; }
  body #main .home-page .rv__item .rc { min-height: 215px; }

  body #main .home-page .blog__grid .bc__media { height: 95px; aspect-ratio: auto; }
  body #main .home-page .blog__grid .bc__body { padding: 9px 7px; gap: 5px; }
  body #main .home-page .blog__grid .bc__title { font-size: 11px; line-height: 1.45; }
  body #main .home-page .blog__grid .bc__excerpt { display: none; }
  body #main .home-page .blog__grid .bc__meta { font-size: 8px; }

  body #main .home-page .cta__inner {
    display: grid;
    grid-template-columns: 1fr 38%;
    gap: 10px;
    align-items: center;
  }
  body #main .home-page .cta__copy { gap: 7px; }
  body #main .home-page .cta__eyebrow,
  body #main .home-page .cta__perks { display: none; }
  body #main .home-page .cta__title { font-size: 20px; }
  body #main .home-page .cta__text { font-size: 10px; }
  body #main .home-page .cta__actions { gap: 5px; }
  body #main .home-page .cta__actions .btn { min-height: 36px; padding: 5px 9px; font-size: 11px; }
  body #main .home-page .cta__phone { display: none; }
  body #main .home-page .cta__visual { display: block; }
  body #main .home-page .cta__visual img { width: 100%; max-height: 112px; object-fit: contain; }

  /* High-specificity mobile frame: component styles are scoped, therefore
     the mobile art direction must explicitly win without using desktop rules. */
  body #main .home-page .hero,
  body #main .home-page .hero__inner { height: 520px; min-height: 520px; }
  body #main .home-page .hero__copy {
    position: absolute;
    inset-inline-start: 4%;
    inset-inline-end: auto;
    inset-block-start: 158px;
    width: 43%;
    max-width: 43%;
    margin: 0;
    padding: 0;
    gap: 12px;
    align-items: flex-start;
    text-align: start;
  }
  body #main .home-page .hero__title { font-size: clamp(1.75rem, 7.4vw, 2.25rem); line-height: 1.42; }
  body #main .home-page .hero__title-mobile { align-items: flex-start; text-align: start; }
  body #main .home-page .hero__title-mobile .hero__title-accent { white-space: nowrap; }
  body #main .home-page .hero__checks { gap: 7px; font-size: 12px; }
  body #main .home-page .hero__actions,
  body #main .home-page .hero__actions > * { width: 100%; }

  body #main .home-page .ql { margin-block-start: 0; padding: 10px 12px 0; }
  body #main .home-page .ql__rail { padding: 11px 0; border-radius: 18px; }
  body #main .home-page .ql__item { flex: 1 1 20%; }
  body #main .home-page .ql__link { width: 100%; min-width: 0; padding-inline: 2px; }
  body #main .home-page .ql__label { font-size: 10px; }

  body #main .home-page .sh { gap: 7px; margin-block-end: 14px; }
  body #main .home-page .sh__eyebrow { display: none; }
  body #main .home-page .sh__title { font-size: 21px; }
  body #main .home-page .sh__subtitle { font-size: 12px; line-height: 1.5; }
  body #main .home-page .sh__action .btn { min-height: 36px; padding: 5px 12px; font-size: 11px; }

  body #main .home-page .services__rail { margin-inline: -14px; padding-inline: 14px; gap: 10px; }
  body #main .home-page .services__rail-item { width: min(31vw, 138px); }
  body #main .home-page .services__rail-item .sc { min-height: 205px; height: 205px; border-radius: 14px; }
  body #main .home-page .services__rail-item .sc__media { height: 105px; }
  body #main .home-page .services__rail-item .sc__body { padding: 24px 8px 8px; }
  body #main .home-page .services__rail-item .sc__summary { display: none; }
  body #main .home-page .services__rail-item .sc__footer { display: none; }
  body #main .home-page .services__controls { margin-block-start: 10px; }

  /* Original interactive Doctol assistant, adapted to the new mobile rhythm. */
  body #main .home-page #discovery { padding-block: 25px; }
  body #main .home-page #discovery .disc__options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  body #main .home-page #discovery .disc__option {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 82px;
    padding: 8px 5px;
    border-radius: 13px;
    text-align: center;
  }
  body #main .home-page #discovery .disc__emoji { font-size: 20px; }
  body #main .home-page #discovery .disc__label { flex: none; font-size: 9px; line-height: 1.35; }
  body #main .home-page #discovery .disc__check {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-end: 5px;
    width: 17px;
    height: 17px;
  }
  body #main .home-page #discovery .disc__reco {
    grid-template-columns: 32% 1fr;
    gap: 8px;
    margin-block-start: 12px;
    padding: 9px;
    border-radius: 14px;
  }
  body #main .home-page #discovery .disc__reco-img { height: 100px; aspect-ratio: auto; }
  body #main .home-page #discovery .disc__reco-title { font-size: 14px; }
  body #main .home-page #discovery .disc__reco-note { font-size: 9px; }
  body #main .home-page #discovery .disc__reco-price strong { font-size: 17px; }
  body #main .home-page #discovery .disc__reco-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
  }
  body #main .home-page #discovery .disc__reco-actions .btn { min-height: 34px; font-size: 10px; }

  body #main .home-page .ts { padding-block: 16px 25px; }
  body #main .home-page .ts__grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  body #main .home-page .ts__card { min-height: 108px; padding: 9px 4px; border-radius: 13px; }
  body #main .home-page .ts__icon { width: 36px; height: 36px; }
  body #main .home-page .ts__title { font-size: 10px; }
  body #main .home-page .ts__text { font-size: 8px; }

  body #main .home-page .offers__rail { margin-inline: -14px; padding-inline: 14px; }
  body #main .home-page .offers__item { width: min(88vw, 390px); }
  body #main .home-page .offers__item .oc { height: 168px; min-height: 168px; }
  body #main .home-page .offers__item .oc__body { gap: 5px; padding: 10px 9px; }
  body #main .home-page .offers__item .oc__title { font-size: 14px; }
  body #main .home-page .offers__item .oc__subtitle { font-size: 9px; }
  body #main .home-page .offers__item .oc__highlights { display: none; }
  body #main .home-page .offers__item .oc__body > .btn { min-height: 32px; font-size: 10px; }

  body #main .home-page .packages__grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin-inline: -14px;
    padding-inline: 14px;
  }
  body #main .home-page .packages__grid > li { flex: 0 0 min(88vw, 390px); }
  body #main .home-page .packages__grid .pc {
    grid-template-columns: 42% 1fr;
    min-height: 178px;
    height: 178px;
    padding: 9px;
  }
  body #main .home-page .packages__grid .pc__media {
    grid-column: 2;
    min-height: 158px;
  }
  body #main .home-page .packages__grid .pc__head,
  body #main .home-page .packages__grid .pc__pricing,
  body #main .home-page .packages__grid .pc__items,
  body #main .home-page .packages__grid .pc__details,
  body #main .home-page .packages__grid .pc__cta { grid-column: 1; }
  body #main .home-page .packages__grid .pc__media img { object-position: center; }
  body #main .home-page .packages__grid .pc__items { overflow: hidden; }
  body #main .home-page .packages__grid .pc__items li:nth-child(n + 4) { display: none; }
  body #main .home-page .packages__grid .pc__cta { min-height: 30px; }

  body #main .home-page .rw__grid { grid-template-columns: 1.6fr 1fr; gap: 8px; }
  body #main .home-page .rw__card { height: 145px; min-height: 145px; padding: 10px; }
  body #main .home-page .rw__title { font-size: 13px; }
  body #main .home-page .rw__text { font-size: 8px; }
  body #main .home-page .rw__cta { min-height: 29px; padding: 4px 9px; font-size: 9px; }
  body #main .home-page .rw__wheel {
    width: 118px;
    height: 118px;
    max-width: 49%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 50%;
  }
  body #main .home-page .rw__card--rewards { grid-column: 1; }
  body #main .home-page .rw__card--share { grid-column: 2; }
  body #main .home-page .rw__avatar { width: 38px; height: 38px; }
  body #main .home-page .rw__win { inset: 8px; padding: 8px; font-size: 10px; }

  body #main .home-page .ba-sec__layout { grid-template-columns: 1.1fr .9fr; gap: 8px; }
  body #main .home-page .ba__frame { height: 112px; min-height: 112px; }
  body #main .home-page .ba-sec__tab { min-height: 32px; padding: 5px; }
  body #main .home-page .ba-sec__mobile-grid { gap: 10px; }
  body #main .home-page .ba-sec__mobile-card { border-radius: 13px; }
  body #main .home-page .ba-sec__mobile-card .ba__frame {
    height: 116px;
    min-height: 116px;
    border-radius: 13px;
  }
  body #main .home-page .ba-sec__mobile-card .ba__tag {
    inset-block-start: 7px;
    padding: 3px 7px;
    font-size: 8px;
  }
  body #main .home-page .ba-sec__mobile-card .ba__handle { width: 34px; height: 34px; }

  /* Video album keeps its filters and modal, but uses compact swipe cards. */
  body #main .home-page #videos { padding-block: 25px; }
  body #main .home-page #videos .vg__filters {
    gap: 6px;
    margin-block-end: 12px;
  }
  body #main .home-page #videos .vg__filter {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 9px;
  }
  body #main .home-page #videos .vg__notice {
    margin-block-end: 11px;
    padding: 7px 9px;
    font-size: 8px;
  }
  body #main .home-page #videos .vg__grid { gap: 10px; }
  body #main .home-page #videos .vg__grid > li { width: min(63vw, 255px); }
  body #main .home-page #videos .vc { min-height: 210px; border-radius: 14px; }
  body #main .home-page #videos .vc__media { height: 128px; aspect-ratio: auto; }
  body #main .home-page #videos .vc__play { width: 40px; height: 40px; }
  body #main .home-page #videos .vc__body { gap: 4px; padding: 9px; }
  body #main .home-page #videos .vc__title { font-size: 11px; }
  body #main .home-page #videos .vc__quote,
  body #main .home-page #videos .vc__meta { font-size: 8px; }

  /* These two restored sections keep their original identity and layout. */
  body #main .home-page #discovery .sh__eyebrow,
  body #main .home-page #videos .sh__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    font-size: 11px;
  }
  body #main .home-page #discovery .disc__options {
    grid-template-columns: 1fr;
    gap: var(--dt-space-3);
  }
  body #main .home-page #discovery .disc__option {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--dt-space-3);
    min-height: 76px;
    padding: var(--dt-space-4);
    border-radius: var(--dt-radius-lg);
    text-align: start;
  }
  body #main .home-page #discovery .disc__emoji { font-size: 1.6rem; }
  body #main .home-page #discovery .disc__label {
    flex: 1;
    font-size: var(--dt-fs-base);
    line-height: normal;
  }
  body #main .home-page #discovery .disc__check {
    position: static;
    width: 24px;
    height: 24px;
  }
  body #main .home-page #discovery .disc__reco {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dt-space-5);
    margin-block-start: var(--dt-space-8);
    padding: var(--dt-space-4);
    border-radius: var(--dt-radius-xl);
  }
  body #main .home-page #discovery .disc__reco-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  body #main .home-page #discovery .disc__reco-title { font-size: var(--dt-fs-h3); }
  body #main .home-page #discovery .disc__reco-note { font-size: var(--dt-fs-sm); }
  body #main .home-page #discovery .disc__reco-price strong { font-size: 1.5rem; }
  body #main .home-page #discovery .disc__reco-actions {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-2);
  }
  body #main .home-page #discovery .disc__reco-actions .btn {
    min-height: initial;
    font-size: var(--dt-fs-sm);
  }

  body #main .home-page .hws__steps { grid-template-columns: repeat(4, 1fr); gap: 3px; }
  body #main .home-page .hws__tile { width: 58px; height: 58px; }
  body #main .home-page .hws__step-title { font-size: 10px; }
  body #main .home-page .hws__step-text { font-size: 8px; }

  body #main .home-page .blog__grid > li { flex: 0 0 min(30vw, 135px); }
  body #main .home-page #tips { padding-block: 24px; }
  body #main .home-page #tips .sh { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  body #main .home-page #tips .sh__action { grid-column: 2; grid-row: 1; }
  body #main .home-page #tips .blog__grid { gap: 9px; }
  body #main .home-page #tips .bc { height: 185px; min-height: 185px; }
  body #main .home-page .faq__list { gap: 6px; }
  body #main .home-page .faq__trigger { min-height: 47px; padding: 7px 9px; }
  body #main .home-page .faq__question { font-size: 10px; }

  /* Closing booking card: light horizontal composition from the mobile art. */
  body #main .home-page .cta {
    margin: 0 14px 18px;
    padding: 0;
    border-radius: 16px;
    background: #f1f7f7;
    color: var(--dt-navy-700);
  }
  body #main .home-page .cta__bg { display: none; }
  body #main .home-page .cta__inner {
    min-height: 145px;
    padding: 14px;
    grid-template-columns: 1fr 38%;
    gap: 10px;
  }
  body #main .home-page .cta__copy { grid-column: 1; grid-row: 1; gap: 7px; }
  body #main .home-page .cta__visual { grid-column: 2; grid-row: 1; }
  body #main .home-page .cta__title { color: var(--dt-navy-700); font-size: 20px; }
  body #main .home-page .cta__text { color: var(--dt-ink-soft); font-size: 10px; line-height: 1.55; }
  body #main .home-page .cta__actions { width: 100%; margin: 0; }
  body #main .home-page .cta__actions .btn {
    width: 100%;
    min-height: 36px;
    border: 0;
    background: var(--dt-grad-primary);
    color: #fff;
    box-shadow: none;
  }
  body #main .home-page .cta__visual img {
    width: 100%;
    height: 116px;
    max-height: 116px;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
  }
  body #main .home-page .cta__badge { width: 52px; height: 52px; inset: auto 0 0 auto; border-width: 3px; }
  body #main .home-page .cta__badge-value { font-size: 16px; }
  body #main .home-page .cta__badge-label { font-size: 7px; }

  body #main .home-page .footer {
    padding-block: 20px calc(var(--dt-mobilenav-h) + 18px);
    border-radius: 26px 26px 0 0;
    background: linear-gradient(135deg, #009fa3 0%, #00898e 100%);
  }
  body #main .home-page .footer__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 7px;
    padding-block-end: 16px;
  }
  body #main .home-page .footer__brand {
    grid-column: 1 / -1;
    align-items: center;
    gap: 7px;
    text-align: center;
  }
  body #main .home-page .footer__tagline { font-size: 10px; }
  body #main .home-page .footer__social { gap: 5px; }
  body #main .home-page .footer__social a { width: 29px; height: 29px; }
  body #main .home-page .footer__column { min-width: 0; text-align: center; }
  body #main .home-page .footer__column-title { margin-block-end: 8px; font-size: 10px; }
  body #main .home-page .footer__column ul { gap: 5px; }
  body #main .home-page .footer__column a,
  body #main .home-page .footer__hours {
    justify-content: center;
    gap: 3px;
    font-size: 7.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  body #main .home-page .footer__bottom {
    justify-content: center;
    gap: 4px 10px;
    padding-block-start: 10px;
    font-size: 8px;
    text-align: center;
  }
  body #main .home-page .pm { gap: 8px; padding-block: 12px; }
  body #main .home-page .pm__title { font-size: 9px; }
  body #main .home-page .pm__list {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 3px;
    padding: 7px 4px;
    border-radius: 10px;
    background: #fff;
  }
  body #main .home-page .pm__item {
    min-width: 0;
    padding: 2px 3px;
    background: transparent;
    box-shadow: none;
  }
  body #main .home-page .pm__note { font-size: 8px; }
  body #main .home-page .mnav { border-radius: 26px 26px 0 0; }
}