.detail-page { background: #fff; }
.service-static-fallback { min-height: 100vh; padding: 150px 24px 80px; color: #c4d3ce; background: linear-gradient(122deg, #091e19, #1a493d); }
.service-static-fallback article { width: min(760px, 100%); margin: auto; }
.service-static-fallback h1 { color: #fff; font-size: clamp(42px, 6vw, 72px); }
.service-static-fallback h2 { color: #fff; margin-top: 34px; font-size: 30px; }
.service-static-fallback p { max-width: 680px; font-size: 17px; }
.service-static-fallback ul { padding-left: 20px; line-height: 1.8; }
.service-static-fallback a { display: inline-block; margin-top: 24px; padding: 13px 22px; color: #102c25; background: #fffefb; border-radius: 999px; font-weight: 700; }
.detail-header { top: 38px; color: white; }
.detail-header.scrolled { top: 0; }
.detail-hero { min-height: 735px; padding: 185px 0 95px; background: radial-gradient(circle at 78% 25%, rgba(50,130,255,.2), transparent 28%), linear-gradient(120deg, #061642, #0b2c6c); color: white; position: relative; overflow: hidden; }
.detail-hero::after { content: ''; position: absolute; width: 520px; height: 520px; border: 90px solid rgba(37,199,232,.07); border-radius: 50%; right: -210px; bottom: -330px; }
.detail-hero-grid { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 90px; position: relative; z-index: 1; }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: #9db3d6; font-size: 11px; margin-bottom: 32px; }
.breadcrumbs a:hover { color: white; }.breadcrumbs b { color: #4d6f9f; }
.detail-hero h1 { color: white; font-size: clamp(52px, 5.2vw, 76px); max-width: 710px; }
.detail-hero h1 em { color: #86cfff; }
.detail-hero-copy > p { max-width: 630px; color: #c2d0e7; font-size: 17px; margin: 25px 0 30px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 11px; margin: 30px 0 0; }
.hero-points span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #d5e2f3; font-size: 11px; }
.detail-hero-image { height: 470px; border-radius: 210px 210px 20px 20px; overflow: hidden; box-shadow: 0 35px 90px rgba(0,0,0,.3); border: 8px solid rgba(255,255,255,.1); position: relative; }
.detail-hero-image img { height: 100%; object-fit: cover; }
.detail-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(5,18,55,.35)); }

.detail-overview { display: grid; grid-template-columns: 1.2fr .55fr; gap: 90px; align-items: start; }
.detail-content h2, .benefits-heading h2, .process-heading h2, .detail-faq-copy h2 { font-size: clamp(39px, 4vw, 55px); }
.detail-content h2 em, .benefits-heading h2 em, .process-heading h2 em, .detail-faq-copy h2 em { color: #3978f6; }
.detail-content > p { font-size: 16px; margin: 24px 0; }
.detail-content .intro-large { color: #12203d; font: 20px/1.65 Georgia, serif; }
.treatment-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0; }
.treatment-list span { display: flex; align-items: center; gap: 10px; color: #12203d; font-size: 13px; font-weight: 700; }
.treatment-list i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: #28bd7c; font-style: normal; }
.treatment-list svg { width: 13px; }
.detail-sidebar { position: sticky; top: 110px; background: #f5f8fc; border: 1px solid #e2eaf3; border-radius: 16px; padding: 28px; }
.detail-sidebar h3 { font-size: 21px; margin-bottom: 20px; }
.detail-sidebar-item { display: flex; gap: 12px; padding: 15px 0; border-top: 1px solid #dde5ee; }
.detail-sidebar-item i { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: #3978f6; background: #e7f0ff; font-style: normal; }
.detail-sidebar-item small, .detail-sidebar-item strong { display: block; }.detail-sidebar-item small { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }.detail-sidebar-item strong { color: #12203d; font-size: 12px; line-height: 1.45; }
.detail-sidebar .btn { width: 100%; margin-top: 18px; }

.benefits-section { background: #f5f8fc; }
.benefits-heading, .process-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 50px; }
.benefits-heading p, .process-heading p { max-width: 470px; margin: 0; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.benefit-card { background: white; border: 1px solid #e4ebf3; border-radius: 14px; padding: 28px 24px; transition: .3s; }
.benefit-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(13,41,90,.1); }
.benefit-card > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; background: #e9f2ff; color: #3978f6; font: 800 12px 'Manrope'; }
.benefit-card h3 { font-size: 17px; margin: 21px 0 8px; }.benefit-card p { margin: 0; font-size: 13px; line-height: 1.65; }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.process-step { position: relative; padding: 0 28px 0 0; }
.process-step:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: 52px; right: 10px; border-top: 1px dashed #b8c8dc; }
.process-step > span { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: white; background: #071848; box-shadow: 0 0 0 8px white; font: 800 12px 'Manrope'; }
.process-step h3 { font-size: 17px; margin: 24px 0 8px; }.process-step p { font-size: 13px; margin: 0; }

.detail-faq { background: #eaf3ff; }
.detail-faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.detail-faq-copy p { max-width: 380px; }
.detail-faq .faq-item { border-color: #cbdbea; }

.related-heading { text-align: center; margin-bottom: 44px; }.related-heading h2 { font-size: 44px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-card { display: grid; grid-template-columns: 105px 1fr; gap: 18px; align-items: center; padding: 12px; border: 1px solid #e2e9f2; border-radius: 13px; transition: .3s; }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(13,41,90,.1); }
.related-card img { width: 105px; height: 95px; object-fit: cover; border-radius: 9px; }.related-card h3 { font-size: 16px; }.related-card span { display: inline-flex; color: #3978f6; font-size: 11px; font-weight: 800; margin-top: 8px; }

.detail-cta { padding: 95px 0; background: linear-gradient(115deg,#0c3486,#071848); color: white; }
.detail-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.detail-cta h2 { color: white; font-size: 45px; }.detail-cta p { color: #afc1dd; margin: 10px 0 0; }

@media (max-width: 900px) {
  .detail-header { top: 0; }
  .detail-hero { min-height: auto; padding: 140px 0 90px; }
  .detail-hero-grid, .detail-overview, .detail-faq-grid { grid-template-columns: 1fr; gap: 55px; }
  .detail-hero-copy { max-width: 690px; }
  .detail-hero-image { width: min(510px, 100%); margin: auto; }
  .detail-overview { gap: 45px; }
  .detail-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .detail-sidebar h3, .detail-sidebar .btn { grid-column: 1/-1; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefits-heading, .process-heading { align-items: start; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .process-step:nth-child(2)::after { display: none; }
  .related-grid { grid-template-columns: 1fr; max-width: 650px; margin: auto; }
}

@media (max-width: 700px) {
  .detail-hero { padding: 120px 0 75px; }
  .detail-hero h1 { font-size: 45px; }
  .detail-hero-copy > p { font-size: 15px; }
  .detail-hero-image { height: 410px; }
  .treatment-list, .detail-sidebar, .benefit-grid, .process-grid { grid-template-columns: 1fr; }
  .benefits-heading, .process-heading, .detail-cta-inner { display: block; }
  .benefits-heading p, .process-heading p { margin-top: 18px; }
  .process-grid { gap: 0; }
  .process-step { display: grid; grid-template-columns: 50px 1fr; column-gap: 16px; padding: 0 0 28px; }
  .process-step:not(:last-child)::after { top: 45px; bottom: -2px; left: 23px; right: auto; height: auto; border-top: 0; border-left: 1px dashed #b8c8dc; }
  .process-step > span { grid-row: 1 / span 2; box-shadow: 0 0 0 6px white; }
  .process-step h3 { margin: 5px 0 5px; }.process-step p { grid-column: 2; }
  .related-card { grid-template-columns: 86px 1fr; }.related-card img { width: 86px; height: 82px; }
  .detail-cta h2 { font-size: 37px; }.detail-cta .btn { margin-top: 24px; }
}

@media (max-width: 700px) {
  .detail-hero { padding: 115px 0 75px; }
  .detail-hero h1 { font-size: 44px; }
  .detail-hero-copy > p { font-size: 15px; }
  .detail-hero-image { height: 420px; }
  .detail-content .intro-large { font-size: 18px; }
  .treatment-list { grid-template-columns: 1fr; }
  .detail-sidebar { grid-template-columns: 1fr; }
  .detail-sidebar h3, .detail-sidebar .btn { grid-column: auto; }
  .benefits-heading, .process-heading { display: block; }
  .benefits-heading > p, .process-heading > p { margin-top: 18px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: 34px; }
  .process-step:not(:last-child)::after { display: none; }
  .related-grid { grid-template-columns: 1fr; }
  .detail-cta-inner { align-items: flex-start; flex-direction: column; gap: 0; }
  .detail-cta .btn { width: 100%; }
}

/* Premium theme extension */
.detail-page { background: #fbfaf6; }
.detail-hero { background: radial-gradient(circle at 78% 24%, rgba(216,183,120,.15), transparent 29%), linear-gradient(122deg, #091e19, #1a493d); }
.detail-hero::after { border-color: rgba(216,183,120,.08); }
.breadcrumbs { color: #aec2bb; }.breadcrumbs b { color: #66847a; }
.detail-hero h1 em { color: #e1c38e; }
.detail-hero-copy > p { color: #c4d3ce; }
.hero-points span { color: #dce6e2; border-color: rgba(225,195,142,.24); background: rgba(255,255,255,.03); }
.detail-hero-image { border-radius: 240px 240px 28px 28px; border-color: rgba(225,195,142,.2); box-shadow: 0 38px 95px rgba(4,20,16,.4); }
.detail-hero-image::after { background: linear-gradient(180deg, transparent 58%, rgba(9,30,25,.45)); }
.detail-content h2 em, .benefits-heading h2 em, .process-heading h2 em, .detail-faq-copy h2 em { color: #a97d42; }
.detail-content .intro-large { color: #172b26; }
.treatment-list span { color: #172b26; }.treatment-list i { background: #35705e; }
.detail-sidebar { background: #f3efe6; border-color: #e1dbcf; border-radius: 22px; }
.detail-sidebar-item { border-color: #ddd7cc; }
.detail-sidebar-item i { color: #936630; background: #eadcc5; border-radius: 11px; }
.detail-sidebar-item strong { color: #172b26; }
.benefits-section { background: #f5f2ea; }
.benefit-card { background: #fffefb; border-color: #e5ded1; border-radius: 22px; }
.benefit-card:hover { border-color: #d8c097; box-shadow: 0 24px 50px rgba(16,44,37,.11); }
.benefit-card > span { color: #936630; background: #f1e6d4; border-radius: 13px; }
.process-step:not(:last-child)::after { border-color: #c8b58f; }
.process-step > span { color: #fffefb; background: #214f43; box-shadow: 0 0 0 8px #fbfaf6; }
.detail-faq { background: #e8f0eb; }.detail-faq .faq-item { border-color: #cbd8d1; }
.related-card { background: #fffefb; border-color: #e3ddd2; border-radius: 19px; }
.related-card:hover { border-color: #d7bf97; box-shadow: 0 20px 45px rgba(16,44,37,.1); }
.related-card img { border-radius: 13px; }.related-card span { color: #9a6c34; }
.detail-cta { background: linear-gradient(120deg, #1c4a3e, #091e19); }
.detail-cta p { color: #bdcec8; }

@media (max-width: 700px) {
  .process-step > span { box-shadow: 0 0 0 6px #fbfaf6; }
}

/* Shared responsive hardening for every service detail page */
.detail-hero-grid > *, .detail-overview > *, .detail-faq-grid > *,
.benefit-card, .process-step, .related-card > * { min-width: 0; }
.detail-sidebar-item > div, .detail-sidebar-item strong,
.detail-sidebar-item a { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .detail-hero { padding: 108px 0 62px; }
  .detail-hero-grid { gap: 38px; }
  .breadcrumbs { flex-wrap: wrap; margin-bottom: 24px; line-height: 1.5; }
  .detail-hero h1 { font-size: 38px; line-height: 1.04; }
  .detail-hero-copy > p { margin: 20px 0 24px; line-height: 1.65; }
  .hero-points { gap: 8px; margin-top: 24px; }
  .hero-points span { padding: 8px 10px; }
  .detail-hero-image { height: 335px; border-width: 6px; }

  .detail-content h2, .benefits-heading h2, .process-heading h2,
  .detail-faq-copy h2 { font-size: 34px; }
  .detail-content .intro-large { font-size: 17px; }
  .detail-content > p { font-size: 15px; }
  .detail-sidebar { padding: 21px 18px; border-radius: 18px; }
  .detail-sidebar-item { gap: 10px; }
  .benefits-heading, .process-heading { margin-bottom: 34px; }
  .benefit-card { padding: 23px 20px; }
  .process-step { column-gap: 13px; }
  .related-heading { margin-bottom: 30px; }
  .related-heading h2 { font-size: 34px; }
  .related-card { grid-template-columns: 76px 1fr; gap: 13px; padding: 9px; }
  .related-card img { width: 76px; height: 76px; }
  .related-card h3 { font-size: 15px; }
  .detail-cta { padding: 70px 0; }
  .detail-cta h2 { font-size: 34px; }
}

@media (max-width: 360px) {
  .detail-hero h1 { font-size: 34px; }
  .detail-hero-image { height: 295px; }
  .detail-content h2, .benefits-heading h2, .process-heading h2,
  .detail-faq-copy h2, .related-heading h2 { font-size: 31px; }
  .detail-cta h2 { font-size: 31px; }
}