@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-italic-500.ttf") format("truetype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

:root {
  --refine-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Homepage typography system, shared by every route. */
body {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1rem, .98rem + .12vw, 1.075rem);
  font-weight: 400;
  line-height: 1.68;
}
h1, h2, h3, h4, h5, h6,
.product-name, .signature-copy strong, .home-result-group-head strong {
  font-family: "Poppins", ui-sans-serif, sans-serif;
  text-wrap: balance;
}
h1, .hero h1, .sub-hero h1, .about-hero h1, .procedure-hero h1 {
  font-size: clamp(3.25rem, 5vw, 4rem) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}
h2, .section-head h2, .section-heading h2, .category-head h2 {
  font-size: clamp(2.25rem, 3.5vw, 2.75rem) !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  letter-spacing: -.035em !important;
}
h3 { font-size: clamp(1.375rem, 1.8vw, 1.625rem); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
p, li, blockquote { font-family: "Poppins", ui-sans-serif, sans-serif; }
.eyebrow, .hero-brandline, .breadcrumbs,
.announcement, .nav-links, .button, .product-badge, .benefit-label,
.concern, .review-procedure, .footer-grid h3 {
  font-family: "Montserrat", ui-sans-serif, sans-serif;
}
.eyebrow, .hero-brandline { font-size: .72rem; font-weight: 600; letter-spacing: .12em; line-height: 1.45; }
.button { font-size: .84rem; font-weight: 600; line-height: 1.2; transition-duration: 200ms; }
.nav-links a:not(.button) { font-family: "Montserrat", ui-sans-serif, sans-serif; font-size: .82rem; font-weight: 500; }
.lead, .section-head > p, .section-heading > p { max-width: 680px; font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.72; }
.editorial-accent { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.025em; }

/* Minimal brand bar replacing the former announcement banner. */
.announcement {
  display: block;
  width: 100%;
  height: 18px;
  min-height: 18px;
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  background: #114a65 !important;
  font-size: 0;
  line-height: 0;
}
.announcement > * { display: none; }

/* Treatment discovery: four cards per row on desktop, two on tablet, one on mobile. */
.discovery-shortcuts,
.concern-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.discovery-shortcuts { border: 0; gap: 14px; }
.discovery-shortcuts > a,
.discovery-shortcuts > a:last-child {
  min-height: 270px;
  padding: 28px;
  border: 1px solid #d8cbb9;
  background: #fff;
}
.discovery-shortcuts strong { font-size: 1.35rem; font-weight: 500; line-height: 1.25; }
.discovery-shortcuts span { margin-top: 14px; font-size: .83rem; line-height: 1.65; }

/* Four visible Additional Services cards with horizontal browsing. */
.brochure-service-grid {
  display: grid;
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 4);
  gap: 16px;
  overflow-x: auto;
  padding: 2px 0 18px;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--teal) #ded6ca;
}
.brochure-service-card { scroll-snap-align: start; }

/* The portrait treatment is intentionally limited to Watch & Learn video groups. */
.procedure-videos .video-card-grid,
.procedure-cluster .procedure-video-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.procedure-videos .video-card,
.procedure-cluster .procedure-video-link { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
.procedure-videos .video-thumb { aspect-ratio: 4 / 5; min-height: 0; }
.procedure-videos .video-copy { min-height: 168px; padding: 21px; }
.procedure-cluster .procedure-video-link img { width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; object-fit: cover; }
.procedure-cluster .procedure-video-copy { min-height: 168px; padding: 21px; }

.motion-ready .refine-reveal { opacity: 0; transform: translateY(14px); }
.motion-ready .refine-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 620ms var(--refine-ease), transform 620ms var(--refine-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.button:hover { transform: translateY(-1px); }
a:hover em, a:hover .popular-video-action, a:hover .third-party-action { transform: translateX(3px); }
em, .popular-video-action, .third-party-action { transition: transform 200ms var(--refine-ease); }

@media (max-width: 900px) {
  .discovery-shortcuts,
  .concern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brochure-service-grid { grid-auto-columns: calc((100% - 16px) / 2); }
  .procedure-videos .video-card-grid,
  .procedure-cluster .procedure-video-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  body { font-size: clamp(.95rem, 4vw, 1.03rem); }
  h1, .hero h1, .sub-hero h1, .about-hero h1, .procedure-hero h1 { font-size: clamp(2.375rem, 11vw, 2.75rem) !important; line-height: 1.1 !important; }
  h2, .section-head h2, .section-heading h2, .category-head h2 { font-size: clamp(1.75rem, 8vw, 2.125rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1.25rem, 5.5vw, 1.375rem); }
  .discovery-shortcuts,
  .concern-grid { grid-template-columns: 1fr; }
  .discovery-shortcuts > a,
  .discovery-shortcuts > a:last-child { min-height: 240px; border: 1px solid #d8cbb9; }
  .brochure-service-grid { grid-template-columns: none !important; grid-auto-columns: min(86vw, 330px); }
  .procedure-videos .video-card-grid,
  .procedure-cluster .procedure-video-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .motion-ready .refine-reveal { opacity: 1; transform: none; }
}

/* Homepage welcome and concern-search modal. */
body.welcome-modal-open { overflow: hidden; }
.welcome-modal[hidden],
.welcome-modal-reopen[hidden] { display: none !important; }
.welcome-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 22px; opacity: 0; transition: opacity 220ms ease; }
.welcome-modal.is-open { opacity: 1; }
.welcome-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 27, 37, .46); backdrop-filter: blur(3px); }
.welcome-modal-panel {
  position: relative;
  width: min(100%, 660px);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  padding: clamp(24px, 4vw, 36px) clamp(28px, 5vw, 46px) 28px;
  border: 1px solid rgba(17, 74, 101, .15);
  border-radius: 20px;
  background: #fffdf9;
  box-shadow: 0 24px 70px rgba(5, 27, 37, .18);
  color: var(--ink);
  text-align: center;
  transform: translateY(14px) scale(.985);
  transition: transform 220ms ease;
}
.welcome-modal.is-open .welcome-modal-panel { transform: translateY(0) scale(1); }
.welcome-modal-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #114a65; font: 300 1.7rem/1 Poppins, sans-serif; cursor: pointer; }
.welcome-modal-close:hover { background: rgba(17, 74, 101, .07); }
.welcome-modal-logo { display: block; width: auto; height: 100px; margin: 0 auto 12px; object-fit: contain; }
.welcome-modal-kicker { margin: 0 0 6px; color: #114a65; font: 600 .73rem/1.4 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.welcome-modal-panel h2 { max-width: 520px; margin: 0 auto; color: var(--teal-dark); font-size: clamp(2.15rem, 5vw, 2.85rem) !important; }
.welcome-modal-search { margin: 22px 0 16px; }
.welcome-modal-search-field { display: grid; grid-template-columns: minmax(0, 1fr) 52px; min-height: 56px; overflow: hidden; border: 1px solid rgba(17, 74, 101, .28); border-radius: 12px; background: #fff; }
.welcome-modal-search-field:focus-within { border-color: #114a65; box-shadow: 0 0 0 3px rgba(17, 74, 101, .1); }
.welcome-modal-search input { min-width: 0; padding: 0 18px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 1rem/1.4 Poppins, sans-serif; }
.welcome-modal-search button { border: 0; background: transparent; color: #114a65; font-size: 1.45rem; cursor: pointer; }

/* Preserve complete before-and-after panels, labels, and clinical context. */
.home-result-card img,
.result-card img,
.case-card img,
.case-story-gallery img,
.case-images img {
  object-fit: contain !important;
  object-position: center !important;
  background: #fff;
}
.case-story-gallery button,
.case-card > button,
.home-result-card button {
  background: #fff !important;
}

/* Results hierarchy: title first, compact complete images second, context last. */
.case-story,
.case-story.case-story-featured { display: flex !important; flex-direction: column; }
.case-story-content { display: contents !important; }
.case-story-intro {
  order: 1;
  min-height: 0 !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border-right: 0 !important;
  border-bottom: 1px solid #d8cbb9;
}
.case-story-intro h3 {
  max-width: 780px !important;
  margin-top: 10px !important;
  font-size: clamp(1.55rem, 2.5vw, 2.35rem) !important;
}
.case-story-intro span { margin-top: 16px; }
.case-story-gallery {
  order: 2;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  width: 100%;
  padding: 12px;
  background: #f4f1eb !important;
}
.case-story-gallery img { width: 100% !important; height: 260px !important; min-height: 0 !important; }
.case-story-details { order: 3; }
.case-title-bar { min-height: 94px; padding: 18px 20px; background: #0b3447; }
.case-title-bar .eyebrow { margin: 0 0 6px; color: #c8a977; }
.case-title-bar h3 { margin: 0; color: #fff; font-size: 1.25rem; }
.case-card > button { order: 2; }
.case-card > button img { display: block; width: 100%; height: 250px; aspect-ratio: auto !important; }
.case-card .case-copy { order: 3; }
.case-scroller { grid-auto-columns: min(78vw, 330px) !important; }

/* Image cards must follow their real content height instead of stretching to the tallest card. */
.results-grid,
.case-scroller { align-items: start !important; }
.result-card,
.case-card {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}
.result-card { display: grid; grid-template-rows: auto auto; }
.case-card { display: grid; grid-template-rows: auto auto auto; }
.result-card > button,
.case-card > button {
  display: block !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  align-self: start;
  line-height: 0;
}
.result-card > button img,
.case-card > button img {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}
.result-card figcaption,
.case-card .case-copy { height: auto !important; min-height: 0 !important; }

@media (max-width: 680px) {
  .case-story-gallery { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; }
  .case-story-gallery button { flex: 0 0 86%; scroll-snap-align: start; }
  .case-story-gallery img { height: 240px !important; }
  .case-story-details { grid-template-columns: 1fr !important; }
  .case-story-detail { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
}
.welcome-modal-primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.welcome-action { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 9px; padding: 12px 16px; border: 1px solid #114a65; border-radius: 10px; font: 600 .82rem/1.2 Montserrat, sans-serif; text-align: center; text-decoration: none; }
.welcome-action-primary { background: #114a65; color: #fff; }
.welcome-action-secondary { background: transparent; color: #114a65; }
.welcome-action:hover { transform: translateY(-1px); }
.welcome-modal-divider { height: 1px; margin: 22px 0 12px; background: rgba(17, 74, 101, .13); }
.welcome-modal-exit { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 5px; padding: 7px 14px; border: 0; background: transparent; color: #114a65; font: 500 .78rem/1.2 Montserrat, sans-serif; cursor: pointer; }
.welcome-modal-exit:hover { text-decoration: underline; text-underline-offset: 3px; }
.welcome-modal-reopen { position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 900; min-height: 44px; padding: 11px 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: #114a65; box-shadow: 0 9px 26px rgba(5,27,37,.19); color: #fff; font: 600 .76rem/1.2 Montserrat, sans-serif; cursor: pointer; }
@media (max-width: 620px) {
  .welcome-modal { align-items: end; padding: 12px; }
  .welcome-modal-panel { max-height: calc(100dvh - 24px); padding: 24px 20px 18px; border-radius: 18px; }
  .welcome-modal-logo { height: 86px; margin-bottom: 10px; }
  .welcome-modal-panel h2 { font-size: clamp(1.8rem, 9vw, 2.2rem) !important; }
  .welcome-modal-primary-actions { grid-template-columns: 1fr; }
  .welcome-modal-reopen { bottom: calc(92px + env(safe-area-inset-bottom)); }
}