html {
  scroll-padding-top: 0;
}

:root {
  --anchor-offset: 106px;
}

main > section[id],
footer[id] {
  scroll-margin-top: var(--anchor-offset);
}

@media (min-width: 821px) {
  .procedure-page-v2 h2 {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 820px) {
  html {
    scroll-padding-top: 0;
  }

  :root {
    --anchor-offset: 94px;
  }

  main > section[id],
  footer[id],
  .procedure-page-v2 main > section[id] {
    scroll-margin-top: var(--anchor-offset);
  }

  h2,
  .footer-lead h2,
  .booking-panel h2 {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }

  .section-space {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .surface-section,
  .dark-section,
  .site-footer {
    width: calc(100% - 0.75rem) !important;
  }

  .about-section,
  .why-section,
  .stories-section,
  .transformation-section,
  .care-section,
  .insights-section {
    width: calc(100% - 2rem) !important;
  }

  .services-section > *,
  .special-section > *,
  .studio-section > *,
  .expertise-section > *,
  .site-footer > * {
    width: calc(100% - 2rem) !important;
  }

  .split-heading {
    gap: 1.25rem !important;
    margin-bottom: 2rem !important;
  }

  .about-section,
  .why-section,
  .care-section,
  .faq-section {
    gap: 2rem !important;
  }

  .hero-shell {
    min-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #242326;
  }

  .hero-shell .announcement-bar {
    display: none;
  }

  .hero-shell .site-header {
    top: 0;
    min-height: 5.4rem;
    border-bottom-color: transparent;
  }

  .hero-shell .site-header.is-scrolled {
    right: 0;
    left: 0;
  }

  .hero-shell .hero-compare {
    bottom: 0;
    overflow: hidden;
    background: #443a34;
  }

  .hero-shell .hero-compare::after {
    display: none;
  }

  .hero-shell .compare-picture {
    bottom: auto;
    height: 100%;
    overflow: hidden;
    background: #443a34;
  }

  .hero-shell .compare-picture::before {
    display: none;
  }

  .hero-shell .compare-picture img {
    position: absolute;
    z-index: auto;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
  }

  .hero-shell:hover .compare-picture img {
    transform: scale(1);
  }

  .hero-shell .compare-shade {
    background:
      linear-gradient(180deg, rgba(20, 18, 19, 0.18) 0%, rgba(20, 18, 19, 0.03) 38%, rgba(36, 35, 38, 0.32) 54%, rgba(36, 35, 38, 0.72) 72%, rgba(36, 35, 38, 0.92) 100%),
      linear-gradient(90deg, rgba(20, 18, 19, 0.18), transparent 72%);
  }

  .hero-shell .compare-divider {
    top: 5.4rem !important;
    bottom: 42%;
  }

  .hero-shell .compare-divider span {
    top: 50%;
    width: 3rem;
    height: 3rem;
  }

  .hero-content {
    bottom: 9.9rem;
  }

  .hero-message {
    gap: 0 !important;
  }

  .hero-message > p,
  .hero-message > .hero-description {
    display: none !important;
  }

  .hero-shell h1 {
    width: min(100%, 20rem) !important;
    max-width: 20rem !important;
    font-size: clamp(2.15rem, 9.4vw, 2.4rem) !important;
    line-height: 1;
  }

  .hero-copy {
    bottom: 4.95rem !important;
  }

  .hero-actions .button-link {
    min-width: 13.25rem;
  }

  .simulation-note {
    right: 1rem;
    bottom: 0.8rem;
    left: 1rem;
    max-width: 21rem;
    gap: 0.1rem;
    justify-items: start;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.28;
    text-align: left;
  }

  .simulation-note span,
  .simulation-note span:last-child {
    display: block;
  }

  .about-collage {
    height: 25rem !important;
    min-height: 25rem !important;
  }

  .about-principles {
    gap: 1.25rem;
  }

  .about-quote {
    margin-top: 1.75rem;
    padding-block: 1.75rem;
  }

  .expertise-section > header {
    width: min(calc(100% - 2rem), 42rem) !important;
  }

  .expertise-grid {
    gap: 0.9rem !important;
  }

  .expertise-grid > * {
    min-height: 0 !important;
  }

  .expertise-benefit {
    min-height: 13.5rem !important;
    padding: 1.6rem !important;
  }

  .expertise-image {
    min-height: 19rem !important;
  }

  .expertise-image img {
    padding: 1.25rem 1.15rem 3rem;
  }

  .expertise-center-cta {
    min-height: 0 !important;
    padding-top: 0.75rem;
  }

  .treatment-card {
    min-height: 22rem !important;
  }

  .treatment-navigation {
    gap: 1rem;
    margin-top: 1rem;
  }

  .why-collage {
    height: 25rem !important;
  }

  .story-grid,
  .insight-grid,
  .transformation-grid,
  .procedure-related__grid {
    display: flex !important;
    gap: 0.85rem !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 0 0.5rem;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .story-grid::-webkit-scrollbar,
  .insight-grid::-webkit-scrollbar,
  .transformation-grid::-webkit-scrollbar,
  .procedure-related__grid::-webkit-scrollbar {
    display: none;
  }

  .story-grid > a,
  .story-grid > a:nth-child(2),
  .story-grid > a:nth-child(3) {
    min-width: 86%;
    min-height: 22rem !important;
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  .special-section {
    padding-bottom: 3.5rem !important;
  }

  .treatment-pills {
    gap: 0.75rem !important;
  }

  .treatment-pills a {
    width: calc(50% - 0.375rem) !important;
    min-height: 3.1rem;
    padding-right: 0.75rem;
    font-size: 13px;
  }

  .booking-panel {
    width: calc(100% - 2rem) !important;
    min-height: 20rem !important;
    margin: 0 auto !important;
    padding: 1.75rem !important;
  }

  .booking-panel > img {
    right: -6% !important;
    bottom: -8% !important;
    width: 56% !important;
    height: 58% !important;
  }

  .transformation-section {
    padding-top: 3.5rem !important;
  }

  .transformation-grid {
    width: 100%;
  }

  .transformation-compare {
    width: 90%;
    height: 22rem !important;
    min-height: 22rem !important;
    flex: 0 0 90%;
    scroll-snap-align: start;
  }

  .studio-benefits span {
    min-height: 4rem;
    padding: 0.75rem;
    font-size: 13px;
  }

  .studio-feature > div {
    padding: 1.75rem !important;
  }

  .studio-feature figure {
    min-height: 18rem !important;
  }

  .care-mosaic,
  .faq-collage {
    min-height: 23rem !important;
  }

  .care-slider {
    min-height: 17rem;
    padding: 1.6rem;
  }

  .faq-section {
    gap: 2rem !important;
  }

  .insight-grid > a {
    min-width: 86%;
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  .mobile-conversion {
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    left: 0.75rem;
    min-height: 3.25rem;
  }

  .procedure-page-v2 h1 {
    font-size: 38px !important;
    line-height: 1 !important;
  }

  .procedure-page-v2 h2 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }

  .procedure-page-v2 .announcement-bar {
    min-height: 2.8rem;
  }

  .procedure-page-v2 .site-header {
    top: 2.8rem;
  }

  .procedure-page-v2 .site-header.is-scrolled {
    top: 0;
  }

  .procedure-hero-v2__content {
    bottom: 3rem;
  }

  .procedure-overview,
  .procedure-related {
    width: calc(100% - 2rem);
  }

  .procedure-overview {
    gap: 2rem;
  }

  .procedure-directory summary {
    min-height: 4.6rem;
    padding: 1rem 1.25rem;
  }

  .procedure-introduction {
    gap: 1.25rem;
    padding-bottom: 2.75rem;
  }

  .procedure-introduction p,
  .procedure-detail__content {
    font-size: 16px;
    line-height: 1.65;
  }

  .procedure-detail {
    gap: 1.25rem;
    padding: 2.75rem 0;
  }

  .procedure-detail--list header {
    margin-bottom: 1.75rem;
  }

  .procedure-detail__content ul {
    gap: 0.8rem;
  }

  .procedure-detail__content li {
    padding: 1.35rem;
    border-radius: 1.2rem;
  }

  .procedure-conversion {
    min-height: 29rem;
    gap: 1.5rem;
    padding: 3.25rem 1.25rem;
  }

  .procedure-related.section-space {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .procedure-related > header {
    margin-bottom: 2rem;
  }

  .procedure-related-card {
    min-width: 86%;
    min-height: 22rem;
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  .procedure-faq {
    gap: 2rem;
    padding: 3.5rem 1.25rem;
  }
}

@media (max-width: 520px) {
  h2,
  .footer-lead h2,
  .booking-panel h2 {
    font-size: 32px !important;
  }

  .hero-shell h1 {
    font-size: clamp(2.1rem, 9.4vw, 2.35rem) !important;
  }

  .treatment-pills a {
    width: calc(50% - 0.375rem) !important;
  }

  .procedure-page-v2 h2 {
    font-size: 32px !important;
  }
}

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