html,
body {
  overflow-x: clip;
  overflow-y: visible;
}

/* Use the same complete clinic wordmark as the PHP inner-page navbar. */
body[data-php-site="true"] header > div > a[aria-label*="Skin Speciality Clinic"] {
  display: block !important;
  width: 158px !important;
  height: 50px !important;
  flex: 0 0 158px !important;
  background: url("../brand/navbar-logo-wordmark.png") left center / contain no-repeat !important;
}

body[data-php-site="true"] header > div > a[aria-label*="Skin Speciality Clinic"] > span {
  display: none !important;
}

@media (max-width: 767px) {
  body[data-php-site="true"] header > div > a[aria-label*="Skin Speciality Clinic"] {
    width: 138px !important;
    height: 44px !important;
    flex-basis: 138px !important;
  }
}

body[data-php-site="true"] {
  min-height: 100vh;
  --clinic-display: "Iowan Old Style", Baskerville, "Times New Roman", Georgia, serif;
}

body[data-php-site="true"] :where(h1, h2, h3) {
  font-family: var(--clinic-display);
  font-weight: 400;
  letter-spacing: 0;
}

body[data-php-site="true"] .relative.z-10 > section:first-child h1 {
  font-style: italic;
}

body[data-php-site="true"] main.overflow-x-hidden {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body[data-php-site="true"] .backdrop-blur-2xl {
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

body[data-php-site="true"] .backdrop-blur-xl {
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

.php-reveal {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.php-ready .php-reveal:not(.is-visible) {
  opacity: 0 !important;
  transform: translateY(1rem) !important;
}

.php-reveal,
.php-reveal.is-visible {
  transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

.php-word {
  display: inline-block;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.php-copy-word {
  display: inline-block;
  opacity: 1;
  transform: none;
}

.php-ready .php-copy-word:not(.is-visible) {
  opacity: 0 !important;
  transform: translateY(.22em) !important;
}

.php-copy-word,
.php-copy-word.is-visible {
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.php-char {
  display: inline-block;
  opacity: 1;
  filter: none;
  transform: none;
}

.php-ready .php-char:not(.is-visible) {
  opacity: 0 !important;
  transform: translateY(.24em) !important;
}

.php-char,
.php-char.is-visible {
  transition: opacity .82s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

.php-stagger {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.php-ready .php-stagger:not(.is-visible) {
  opacity: 0 !important;
  transform: translateY(1.25rem) !important;
}

.php-stagger,
.php-stagger.is-visible {
  transition: opacity .82s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

body[data-php-site="true"] #treatments {
  height: 260vh !important;
}

body[data-php-site="true"] #patient-trust {
  height: 280vh !important;
}

.php-powered-by {
  display: inline-block;
  margin-left: 10px;
  opacity: .72;
}

.php-powered-by a {
  color: #2d6fa3;
  font-weight: 600;
}

.php-chat-panel {
  width: min(22rem, calc(100vw - 2rem));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  padding: 1.25rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(45,111,163,.2);
  backdrop-filter: blur(24px);
}

.php-chat-panel h2 { margin-top: .25rem; font-size: 1.3rem; font-weight: 600; color: #333; }
.php-chat-panel p { margin-top: 1rem; color: #626670; line-height: 1.6; font-size: .94rem; }
.php-chat-panel a { display: flex; min-height: 44px; margin-top: 1.25rem; align-items: center; justify-content: center; border-radius: 999px; background: #e94b8a; color: #fff; font-size: .875rem; font-weight: 600; }
.php-chat-close { color: #777b89; font-size: .8rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .php-reveal, .php-word, .php-char, .php-copy-word, .php-stagger { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}

@media (max-width: 767px) {
  body[data-php-site="true"] .backdrop-blur-2xl,
  body[data-php-site="true"] .backdrop-blur-xl {
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
  }

  body[data-php-site="true"] #treatments {
    height: 270vh !important;
  }

  body[data-php-site="true"] #patient-trust {
    height: 290vh !important;
  }
}

@media (min-width: 320px) and (max-width: 768px) {
  body[data-php-site="true"] header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body[data-php-site="true"] header > div {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body[data-php-site="true"] header > div > a[aria-label*="Skin Speciality Clinic"] {
    position: relative !important;
    left: auto !important;
    z-index: 1 !important;
    transform: none !important;
  }

  body[data-php-site="true"] header > div > a[aria-label*="Skin Speciality Clinic"] > span:first-child {
    display: none !important;
  }

  body[data-php-site="true"] header > div > a[aria-label*="Skin Speciality Clinic"] > span:nth-child(2) {
    display: none !important;
  }

  body[data-php-site="true"] header > div > .ml-auto {
    position: relative;
    z-index: 2;
    gap: 4px !important;
  }

  body[data-php-site="true"] header > div > .ml-auto > a[href="/consultation"]:not(.hidden) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body[data-php-site="true"] main > div[aria-hidden="true"].fixed canvas,
  body[data-php-site="true"] main > div[aria-hidden="true"].fixed > img {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100svh !important;
    object-fit: cover !important;
    transform: none !important;
    transform-origin: center center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body[data-php-site="true"] [data-sequence-panels="true"] > section {
    min-height: 88vh !important;
    min-height: 88svh !important;
  }
}