/* Service pages (dental implants, general dentistry, sedation).
   Loaded after booking-style.css and reuses its variables, buttons, layout helpers and shared sections. */

.btn_white { background: #fff; color: var(--dark); }
.text_center { text-align: center; }
.narrow { max-width: 860px; }
.dark_watermark { background: linear-gradient(rgba(20, 20, 20, .95), rgba(20, 20, 20, .95)), url(lp-images/icon-white.webp) left center / contain no-repeat; color: #fff; }

/* Service hero: text on the left, photo on the right */
.svc_hero { display: flex; min-height: 590px; }
.svc_hero > * { flex: 1 1 0; min-width: 0; }
.svc_hero_content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 80px 60px 80px max(30px, calc((100vw - 1440px) / 2)); }
.svc_hero h1 { color: #fff; }
.svc_hero_tagline { margin: 20px 0 36px; font-size: 18px; max-width: 560px; }
.svc_hero_tagline + .svc_hero_tagline { margin-top: -20px; }
.svc_hero_image img { width: 100%; height: 100%; object-fit: cover; }
.rating_badge { display: inline-flex; flex-direction: column; gap: 4px; margin-top: 30px; color: #fff; }
.rating_badge_stars { color: var(--gold); font-size: 13px; letter-spacing: 3px; }
.rating_badge_text { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.rating_badge img { width: 90px; }

/* Video story: thumbnail + title, alternating sides */
.story { padding: 70px 0; background: linear-gradient(270deg, #363636, #1f1f1f); color: #fff; }
.story_reverse .split { flex-direction: row-reverse; }
.story h2 { color: #fff; margin-bottom: 24px; }
.story_label { display: block; font-size: 24px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }
.story_video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.story_video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video popup */
.video_popup { width: calc(100% - 40px); max-width: 1000px; margin: auto; padding: 0; border: 0; background: #000; overflow: visible; }
.video_popup::backdrop { background: rgba(0, 0, 0, .85); }
.video_popup .popup_close { position: absolute; top: -46px; right: 0; margin: 0; color: #fff; }
.video_frame { position: relative; padding-top: 56.25%; }
.video_frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body:has(.video_popup[open]) { overflow: hidden; }

/* Intro text block */
.intro .container { display: flex; flex-direction: column; align-items: center; }
.intro p { margin-bottom: 30px; }
.intro_logo { width: 150px; margin-bottom: 24px; }

/* Alternating image / text rows */
.alt_row { display: flex; min-height: 600px; }
.alt_row > * { flex: 1 1 0; min-width: 0; }
.alt_row:nth-child(even) { flex-direction: row-reverse; }
.alt_row > img { width: 100%; object-fit: cover; }
/* Long rows (e.g. sedation lists) would stretch the photo far past its resolution: cap it and keep it in view while the text scrolls. */
.alt_row > img { max-height: 720px; position: sticky; top: 90px; }
.alt_row_content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 80px max(30px, calc((100vw - 1440px) / 2)) 80px 60px; background: var(--light); }
.alt_row:nth-child(even) .alt_row_content { padding: 80px 60px 80px max(30px, calc((100vw - 1440px) / 2)); }
.alt_row h3 { font-size: 36px; margin-bottom: 20px; }
.alt_row .btn { margin-top: 30px; }
.alt_row ul, .alt_row ol { margin-top: 16px; padding-left: 20px; }
.alt_row ul { list-style: disc; }
.alt_row li + li { margin-top: 10px; }

/* Benefits */
.benefits > p { margin-bottom: 40px; }

/* Consultation: photo background with a white content box */
.consult { display: flex; align-items: center; min-height: 700px; background: url(lp-images/consult-bg.webp) center / cover; }
.consult_box { max-width: 620px; padding: 60px; background: #fff; }
.consult_box .btn { margin-top: 30px; }

/* FAQ: native <details> accordion */
.faq .split { align-items: flex-start; }
.faq h2 { color: #fff; font-size: 36px; }
.faq_item { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.faq_item summary { position: relative; padding: 18px 30px 18px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq_item summary::-webkit-details-marker { display: none; }
.faq_item summary::after { content: '\f107'; position: absolute; top: 18px; right: 0; font-family: 'Font Awesome 7 Free'; font-weight: 900; transition: transform .3s; }
.faq_item[open] summary::after { transform: rotate(180deg); }
.faq_item p { padding-bottom: 20px; color: rgba(255, 255, 255, .85); }

/* Responsive */
@media (max-width: 991px) {
  .svc_hero, .alt_row, .alt_row:nth-child(even) { flex-direction: column; }
  .svc_hero > *, .alt_row > * { flex: none; }
  .alt_row > img { position: static; max-height: none; }
  .svc_hero_content, .alt_row_content, .alt_row:nth-child(even) .alt_row_content { padding: 60px 30px; }
  .svc_hero_image img, .alt_row > img { height: auto; aspect-ratio: 4 / 3; }
  .story_reverse .split { flex-direction: column; }
  .alt_row h3 { font-size: 30px; }
  .consult { min-height: 0; padding: 60px 0; }
}

@media (max-width: 767px) {
  .story { padding: 50px 0; }
  .story_label { font-size: 20px; }
  .consult_box { padding: 40px 24px; }
  .faq h2 { font-size: 30px; }
}

@media (max-width: 575px) {
  .svc_hero_content, .alt_row_content, .alt_row:nth-child(even) .alt_row_content { padding: 50px 20px; }
  .alt_row h3 { font-size: 26px; }
}

/* Legal pages: page title + policy text */
.legal_title { padding-top: 64px; }
.legal_title h1 { margin-bottom: 0; font-size: 56px; }
.legal_content { padding: 64px 0 80px; }
.legal_text { padding-top: 40px; border-top: 4px solid var(--teal); font-size: 19px; }
.legal_text h2 { margin: 40px 0 20px; font-size: 36px; color: var(--dark); }
.legal_text p { font-size: 19px; }
.legal_text blockquote { margin: 24px 0; padding: 24px; border-left: 5px solid var(--teal); background: var(--light); font-size: 18px; }

@media (max-width: 767px) {
  .legal_title h1 { font-size: 42px; }
  .legal_text h2 { font-size: 28px; }
}