html,
body {
  max-width: 100%;
  overflow-x: clip;
}

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

img,
svg,
video,
canvas {
  max-width: 100%;
}

.hero,
.section,
.page-hero,
.profile-section,
.request-section,
.about-intro,
.about-section,
.about-final {
  min-width: 0;
}

.hero > *,
.section > *,
.page-hero > *,
.profile-section > *,
.request-section > *,
.profile-card,
.provider-card,
.featured-profile-card,
.featured-category,
.category-row,
.form-card {
  min-width: 0;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (min-width: 1601px) {
  .site-header,
  .hero,
  .section,
  .page-hero,
  .profile-section,
  .about-intro,
  .about-section,
  .about-final {
    padding-right: max(72px, calc((100vw - 1680px) / 2 + 72px));
    padding-left: max(72px, calc((100vw - 1680px) / 2 + 72px));
  }

  .request-section {
    padding-right: max(72px, calc((100vw - 1680px) / 2 + 72px));
    padding-left: max(72px, calc((100vw - 1680px) / 2 + 72px));
  }
}

@media (min-width: 1441px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: clamp(56px, 5vw, 104px);
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    max-width: min(100%, 980px);
  }

  .hero-phone-wrap {
    z-index: 1;
    width: min(430px, 100%);
    justify-self: end;
    padding-right: 0;
  }

  .hero-phone-wrap::before {
    width: min(420px, 100%);
    transform: translate(0, 2px);
  }

  .phone-frame {
    width: min(306px, 100%);
  }
}

@media (min-width: 1536px) {
  .hero {
    grid-template-columns: minmax(0, 820px) minmax(320px, 430px);
    justify-content: center;
    gap: clamp(96px, 7vw, 160px);
  }

  .hero-copy {
    max-width: 820px;
  }

  .hero h1 {
    max-width: 820px;
    white-space: normal;
    text-wrap: balance;
  }

  .hero-phone-wrap {
    justify-self: end;
  }
}

.phone-screen,
.phone-profile-card,
.phone-fake-button {
  box-sizing: border-box;
}

.phone-screen {
  position: relative;
  overflow: hidden;
}

.phone-profile-card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.phone-profile-card strong,
.phone-profile-card small {
  min-width: 0;
  overflow-wrap: normal;
}

.phone-profile-card small {
  line-height: 1.38;
}

.phone-fake-button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 1440px) {
  .site-header {
    padding-right: clamp(28px, 4vw, 56px);
    padding-left: clamp(28px, 4vw, 56px);
  }

  .hero,
  .section,
  .page-hero,
  .profile-section,
  .about-intro,
  .about-section,
  .about-final {
    padding-right: clamp(28px, 4vw, 56px);
    padding-left: clamp(28px, 4vw, 56px);
  }

  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.78fr);
    gap: clamp(30px, 4vw, 62px);
    min-height: 680px;
  }

  .hero h1 {
    font-size: clamp(2.85rem, 3.65vw, 4.15rem);
  }

  .lead {
    max-width: 620px;
    font-size: clamp(1.04rem, 1.45vw, 1.22rem);
  }

  .hero-phone-wrap {
    min-height: 560px;
  }

  .phone-frame {
    width: min(286px, 25vw);
  }

  .phone-screen {
    padding: 48px 18px 28px;
  }

  .phone-profile-card {
    padding: 18px;
  }

  .category-editorial,
  .value-editorial,
  .about-intro,
  .about-request,
  .about-goal-modern,
  .request-section .split,
  .profile-showcase {
    gap: clamp(26px, 4vw, 58px);
  }

  .featured-category h3 {
    font-size: clamp(1.85rem, 3vw, 3.1rem);
  }

  .featured-category > :not(.featured-category-art) {
    max-width: 60%;
  }

  .weekly-featured-grid,
  .provider-grid,
  .category-grid,
  .compact-grid {
    gap: 16px;
  }

  .featured-profile-card h3 {
    font-size: clamp(1.45rem, 2vw, 2.05rem);
  }

  .profile-card h1,
  .page-hero h1,
  .split h1 {
    font-size: clamp(2.4rem, 4.7vw, 4.35rem);
  }

  .profile-media-grid {
    margin-top: clamp(70px, 7vw, 112px);
  }

  .about-intro h1 {
    font-size: clamp(3rem, 6vw, 5.4rem);
  }

  .about-feature-grid article {
    min-height: 220px;
  }
}

@media (max-width: 1280px) {
  .hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(270px, 0.7fr);
    gap: clamp(24px, 3.4vw, 44px);
    min-height: 620px;
    padding-top: clamp(58px, 7vw, 86px);
    padding-bottom: clamp(54px, 6vw, 76px);
  }

  .hero h1 {
    font-size: clamp(2.45rem, 3.25vw, 3.45rem);
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero-phone-wrap {
    min-height: 500px;
    padding-right: 0;
  }

  .hero-phone-wrap::before {
    width: min(430px, 94%);
    height: min(520px, 90%);
  }

  .phone-frame {
    width: min(264px, 24vw);
  }

  .phone-screen img {
    width: min(150px, 82%);
  }

  .phone-profile-card strong {
    font-size: 1.12rem;
  }

  .phone-profile-card small {
    font-size: 0.82rem;
  }

  .category-editorial {
    grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
  }

  .featured-category,
  .featured-category:first-child {
    min-height: 220px;
  }

  .featured-category:first-child {
    min-height: 260px;
  }

  .filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .weekly-featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .featured-profile-body {
    gap: 11px;
    padding: 20px;
  }

  .featured-profile-meta {
    font-size: 0.86rem;
  }

  .profile-showcase {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.84fr);
  }

  .profile-logo-tile {
    min-height: clamp(190px, 22vw, 260px);
  }

  .profile-logo-tile strong {
    font-size: clamp(1.8rem, 4vw, 3.6rem);
  }

  .request-section .split {
    grid-template-columns: minmax(0, 0.95fr) minmax(310px, 480px);
  }

  .request-section .form-card {
    max-width: 480px;
  }

  .about-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-feature-grid article {
    min-height: 0;
  }

  .about-hero-card h2 {
    margin-top: 32px;
  }
}

@media (max-width: 1180px) {
  .hero h1 {
    white-space: normal;
    text-wrap: balance;
  }

  .weekly-featured-grid {
    grid-template-columns: 1fr;
  }

  .featured-profile-card {
    grid-template-columns: minmax(220px, 0.86fr) minmax(0, 1fr);
  }

  .featured-profile-image {
    min-height: 100%;
    aspect-ratio: auto;
  }
}

@media (max-width: 1024px) {
  .site-header,
  .hero,
  .section,
  .page-hero,
  .profile-section,
  .about-intro,
  .about-section,
  .about-final {
    padding-right: clamp(22px, 4vw, 42px);
    padding-left: clamp(22px, 4vw, 42px);
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy,
  .lead {
    max-width: 760px;
  }

  .hero-phone-wrap {
    min-height: 440px;
    width: 100%;
    max-width: 340px;
    justify-self: center;
  }

  .phone-frame {
    width: min(258px, 50vw);
  }

  .category-editorial,
  .value-editorial,
  .profile-showcase,
  .request-section .split,
  .about-intro,
  .about-request,
  .about-goal-modern {
    grid-template-columns: 1fr;
  }

  .provider-grid,
  .category-grid,
  .compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .request-section .form-card,
  .request-copy {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .reviews-shell {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .site-header,
  .hero,
  .section,
  .page-hero,
  .profile-section,
  .request-section,
  .about-intro,
  .about-section,
  .about-final {
    padding-right: 20px;
    padding-left: 20px;
  }

  .hero {
    min-height: auto;
  }

  .hero-phone-wrap {
    max-width: 310px;
    min-height: 414px;
  }

  .hero-phone-wrap::before {
    width: min(292px, 90%);
    height: 340px;
  }

  .phone-frame {
    width: min(236px, 68vw);
  }

  .phone-screen {
    gap: 10px;
    align-items: stretch;
    padding: 42px 14px 22px;
  }

  .phone-screen img {
    width: min(142px, 82%);
    align-self: center;
    margin-bottom: 6px;
  }

  .phone-profile-card {
    gap: 7px;
    padding: 14px;
    border-radius: 20px;
  }

  .phone-profile-card strong {
    font-size: 1.06rem;
    line-height: 1.08;
  }

  .phone-profile-card small {
    font-size: 0.78rem;
  }

  .phone-fake-button {
    min-height: 35px;
    margin-top: 4px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .hero h1,
  .page-hero h1,
  .profile-card h1,
  .split h1 {
    white-space: normal;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .featured-profile-card {
    grid-template-columns: 1fr;
  }

  .featured-profile-image {
    min-height: 0;
  }

  .provider-grid,
  .category-grid,
  .compact-grid,
  .category-featured {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .request-section .form-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .request-section .choice-field {
    gap: 6px;
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .request-section .form-card input[type="date"],
  .request-section .form-card input[type="time"],
  .request-section .time-field select {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .request-section .form-card input[type="date"]::-webkit-date-and-time-value,
  .request-section .form-card input[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .site-header,
  .hero,
  .section,
  .page-hero,
  .profile-section,
  .request-section,
  .about-intro,
  .about-section,
  .about-final {
    padding-right: 16px;
    padding-left: 16px;
  }

  .main-nav {
    gap: 8px;
  }

  .hero-phone-wrap {
    max-width: 292px;
    min-height: 392px;
  }

  .phone-frame {
    width: min(224px, 72vw);
  }

  .phone-screen {
    gap: 9px;
    padding: 39px 13px 20px;
  }

  .phone-screen img {
    width: min(132px, 80%);
  }

  .phone-profile-card {
    padding: 13px;
  }

  .button,
  .small-button {
    min-width: 0;
  }

  .filter-bar {
    gap: 8px;
  }

  .filter-chip {
    padding-right: 10px;
    padding-left: 10px;
  }
}

/* First-load stability: reserve space for dynamic mounts and media so refreshes do not jump. */
html {
  scrollbar-gutter: stable;
}

img {
  overflow-clip-margin: content-box;
}

[data-render]:empty {
  min-width: 0;
}

.category-editorial[data-render="categories"]:empty {
  min-height: clamp(500px, 42vw, 620px);
}

.category-grid[data-render="categories"]:empty {
  min-height: clamp(420px, 36vw, 520px);
}

.weekly-featured-grid[data-render="weekly-featured-profiles"]:empty {
  min-height: clamp(560px, 44vw, 680px);
}

.search-shell[data-render]:empty {
  min-height: 58px;
}

.filter-bar[data-render]:empty {
  min-height: 42px;
}

.provider-grid[data-render="providers"]:empty {
  min-height: clamp(520px, 42vw, 640px);
}

.profile-section[data-render="profile"]:empty,
.profile-section[data-render="profile"][data-render-pending="true"] {
  min-height: clamp(980px, 110vw, 1320px);
}

.latest-reviews-list[data-render="latest-reviews"]:empty {
  min-height: clamp(620px, 62vw, 820px);
}

.provider-image,
.featured-profile-image,
.work-button,
.clinic-tile,
.gallery-image-wrap,
.phone-frame,
.phone-screen,
.request-profile-avatar {
  min-width: 0;
}

.provider-image,
.featured-profile-image,
.work-button,
.clinic-tile img,
.gallery-image-wrap,
.phone-screen {
  background: var(--beige);
}

.provider-image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.provider-image img,
.featured-profile-image img,
.clinic-tile img,
.work-button img,
.gallery-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1181px) and (max-width: 1680px) {
  .profile-showcase .profile-media-grid {
    align-items: start;
    --profile-side-card-size: clamp(330px, 23vw, 390px);
  }

  .profile-showcase .profile-media-grid > .profile-logo-tile,
  .profile-showcase .profile-media-grid > .clinic-address-tile img {
    width: 100%;
    height: var(--profile-side-card-size);
    min-height: var(--profile-side-card-size);
    max-height: var(--profile-side-card-size);
  }

  .profile-showcase .profile-media-grid > .clinic-address-tile img {
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }
}

.provider-card,
.featured-profile-card {
  contain: layout paint;
}

.provider-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.provider-body .small-button {
  margin-top: auto;
}

@media (max-width: 720px) {
  .category-editorial[data-render="categories"]:empty {
    min-height: 760px;
  }

  .weekly-featured-grid[data-render="weekly-featured-profiles"]:empty,
  .provider-grid[data-render="providers"]:empty,
  .latest-reviews-list[data-render="latest-reviews"]:empty {
    min-height: 720px;
  }

  .profile-section[data-render="profile"]:empty,
  .profile-section[data-render="profile"][data-render-pending="true"] {
    min-height: 1180px;
  }
}