/* Shared presentation for the compact service-page family. Content remains page specific. */
.service-family { background: #f7f8f7; }
.service-family main { background: #fff; }
.service-family main h2 { font-size: clamp(31px, 3.1vw, 43px); line-height: 1.1; letter-spacing: -.035em; }
.service-family #branches, .service-family #appointment { scroll-margin-top: 110px; }
.service-family .breadcrumb-bar { background: #fff; }

.service-family .page-hero { padding: 52px 0 58px; color: #17212b; background: #eff2f1; }
.service-family .page-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); }
.service-family .page-hero__grid > div:first-child { padding-block: 20px; }
.service-family .page-hero .eyebrow { color: #285fc8; font-size: 12px; letter-spacing: .1em; }
.service-family .page-hero h1 { max-width: 760px; margin-bottom: 26px; font-size: clamp(42px, 4.45vw, 68px); line-height: 1.05; }
.service-family .page-hero .lead { max-width: 660px; color: #475666; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; }
.service-family .page-hero .actions { margin-top: 32px; }
.service-family .page-hero .btn--light { color: #214c95; background: transparent; border-color: #a7b8ca; }
.service-family .page-hero .btn--light:hover { color: #fff; background: #285fc8; border-color: #285fc8; }
.service-family .page-hero__media { min-height: 0; aspect-ratio: 1.25; border: 0; border-radius: 8px; background: #d8dee0; box-shadow: none; }
.service-family .page-hero__media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }

.service-family .service-jump-nav { border-bottom: 1px solid #e1e5e9; background: #fff; }
.service-family .service-jump-nav__inner { min-height: 56px; display: flex; align-items: center; gap: clamp(22px, 3.5vw, 44px); }
.service-family .service-jump-nav a { flex: none; padding: 17px 0 15px; color: #4c5b69; font-size: 14px; font-weight: 650; border-bottom: 2px solid transparent; }
.service-family .service-jump-nav a:hover, .service-family .service-jump-nav a:focus-visible { color: #17459f; border-color: #447eee; }

.service-family .service-overview { padding-block: 70px 76px; }
.service-family .service-overview > .container { display: block; }
.service-family .service-overview h2 { max-width: none; margin: 0 0 30px; }
.service-family .service-overview .price-summary { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.service-family .service-overview .price-summary:has(> article:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.service-family .service-overview .price-summary > article { display: flex; flex-direction: column; min-width: 0; min-height: 235px; padding: 30px 32px 26px; border: 1px solid #d9e0e6; border-radius: 10px; color: #263440; background: #fff; box-shadow: 0 8px 24px rgba(20, 38, 55, .035); }
.service-family .price-summary > article > span { color: #263747; font-size: 17px; font-weight: 720; line-height: 1.35; }
.service-family .price-summary > article > strong { display: block; margin: 15px 0 15px; color: #142c44; font-size: clamp(29px, 2.5vw, 36px); font-weight: 790; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.service-family .price-summary > article > p { margin: 0; color: #526170; font-size: 15px; line-height: 1.55; }
.service-family .price-summary > article > p + p { margin-top: auto; padding-top: 20px; font-size: 13px; }
.service-family .price-summary > article a, .service-family .service-overview .section-note a { color: #2157ad; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.service-family .service-overview .section-note { max-width: none; margin: 20px 0 0; color: #596674; font-size: 14px; }
.service-family .service-overview .price-summary--quote { gap: 0; overflow: hidden; border: 1px solid #d9e0e6; border-radius: 10px; background: #f5f8fa; }
.service-family .service-overview .price-summary--quote > article { min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.service-family .service-overview .price-summary--quote > article + article { border-left: 1px solid #d9e0e6; }
.service-family .price-summary > article.service-quote-card > strong { max-width: 30ch; margin: 14px 0 16px; color: #264b75; font-size: clamp(22px, 2vw, 27px); font-weight: 730; line-height: 1.2; letter-spacing: -.025em; }
.service-family .price-summary > article.service-quote-card--requirements > strong { color: #405467; font-size: 22px; }

.service-family .service-work-details { padding-block: 84px 92px; background: #f5f7f8; }
.service-family .service-work-details > .container > h2 { margin-bottom: 32px; }
.service-family .service-work-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.service-family .service-work-grid { counter-reset: work; gap: 0 34px; }
.service-family .service-work-layout .service-work-grid { grid-template-columns: 1fr; }
.service-family .service-work-grid article { position: relative; min-width: 0; padding: 28px 0 30px 53px; border: 0; border-top: 1px solid #d4dfe5; border-radius: 0; background: transparent; counter-increment: work; }
.service-family .service-work-grid article::before { content: counter(work, decimal-leading-zero); position: absolute; top: 28px; left: 0; color: #255bb6; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; }
.service-family .service-work-grid article h3 { margin: 0 0 12px; color: #192b3c; font-size: 21px; }
.service-family .service-work-grid article p { color: #465667; font-size: 16px; line-height: 1.65; }
.service-family .service-work-grid article p + p { margin-top: 12px; }
.service-family .service-work-media { position: sticky; top: 112px; margin: 0; }
.service-family .service-work-media img { width: 100%; aspect-ratio: 1.14; object-fit: cover; border-radius: 8px; }
.service-family .service-work-media figcaption { margin-top: 12px; color: #647485; font-size: 13px; line-height: 1.5; }

.service-family #branches { padding-block: 68px 72px; color: #172432; background: #f1f4f6; }
.service-family #branches > .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.service-family #branches .section-head { grid-column: 1 / -1; margin-bottom: 14px; }
.service-family #branches h2 { margin: 0; color: #172432; }
.service-family #branches .section-note:has(a[href^="tel:"]) { max-width: none; margin: 0; padding: 24px 28px; border: 1px solid #d6dfe6; border-radius: 10px; color: #3b4b5b; background: #fff; font-size: 16px; line-height: 1.55; }
.service-family #branches .section-note:has(a[href^="tel:"]):first-of-type:nth-last-of-type(2) { grid-column: 1 / -1; max-width: 720px; }
.service-family #branches .section-note:has(a[href^="tel:"]) a:first-child { color: #172432; font-weight: 740; }
.service-family #branches .section-note a[href^="tel:"] { display: block; width: fit-content; margin-top: 12px; color: #235cbd; font-size: 18px; font-weight: 750; }
.service-family #branches .section-note:not(:has(a[href^="tel:"])) { grid-column: 1 / -1; max-width: none; margin: 5px 0 0; color: #576777; font-size: 14px; }
.service-family #branches .section-note:not(:has(a[href^="tel:"])) a { color: #2157ad; text-decoration: underline; text-underline-offset: 3px; }

.service-family .section--soft:has(.faq-list) { padding-block: 70px; background: #fff; }
.service-family .section--soft:has(.faq-list) > .container { display: block; }
.service-family .section--soft:has(.faq-list) h2 { margin: 0 0 28px; }
.service-family .faq-list { max-width: 1050px; }
.service-family .faq-list details { border: 0; border-bottom: 1px solid #d9e1e6; border-radius: 0; }
.service-family .faq-list details:first-child { border-top: 1px solid #d9e1e6; }
.service-family .faq-list summary { padding-inline: 0 44px; font-size: 17px; }
.service-family .faq-list summary::after { right: 6px; }
.service-family .faq-list details p { padding: 0 32px 22px 0; color: #485b6c; font-size: 15px; }

.service-family .section:has(> .container > .related-links) { padding-block: 62px; border-top: 1px solid #e1e7eb; }
.service-family .section:has(> .container > .related-links) h2 { margin-bottom: 28px; }
.service-family .related-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 25px; }
.service-family .related-links a { min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 0; border: 0; border-bottom: 1px solid #dce4e8; border-radius: 0; box-shadow: none; background: transparent; }
.service-family .related-links a:hover { border-color: #447eee; color: #2157ad; transform: none; }
.service-family .related-links b { margin: 0; font-size: 16px; font-weight: 750; }
.service-family .related-links a::after { content: "↗"; flex: none; color: #447eee; font-size: 18px; }
.service-family #appointment { padding-block: 72px; background: #f1f4f5; }
.service-family #appointment .form-shell { gap: clamp(24px, 4vw, 55px); padding: clamp(27px, 4vw, 48px); border-radius: 8px; box-shadow: none; }
.service-family #appointment .form-shell__intro { min-height: 0; padding-bottom: 0; }
.service-family #appointment .form-shell__vehicle { display: none; }

@media (max-width: 950px) {
  .service-family .page-hero__grid { grid-template-columns: 1fr; }
  .service-family .page-hero__media { max-height: 460px; aspect-ratio: 1.7; }
  .service-family .service-work-layout { grid-template-columns: 1fr; }
  .service-family .service-work-media { position: static; }
  .service-family .service-work-media img { max-height: 450px; aspect-ratio: 1.65; }
}
@media (max-width: 700px) {
  .service-family .topbar { display: none; }
  .service-family .page-hero { padding: 34px 0 38px; }
  .service-family .page-hero__grid { gap: 28px; }
  .service-family .page-hero__grid > div:first-child { padding: 0; }
  .service-family .page-hero h1 { margin-bottom: 18px; font-size: clamp(34px, 9.4vw, 45px); }
  .service-family .page-hero .lead { font-size: 16px; line-height: 1.5; }
  .service-family .page-hero .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  .service-family .page-hero .actions .btn { width: 100%; padding-inline: 10px; font-size: 14px; }
  .service-family .page-hero__media { aspect-ratio: 1.65; }
  .service-family .service-jump-nav__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 54px; gap: 0; }
  .service-family .service-jump-nav a { padding: 16px 2px 13px; font-size: 12px; text-align: center; white-space: nowrap; }
  .service-family .service-overview, .service-family .service-work-details, .service-family #branches, .service-family .section--soft:has(.faq-list), .service-family #appointment { padding-block: 48px; }
  .service-family .service-overview .price-summary, .service-family #branches > .container, .service-family .related-links { grid-template-columns: 1fr; }
  .service-family .service-overview .price-summary > article { min-height: 0; padding: 24px; }
  .service-family .service-overview .price-summary--quote > article + article { border-left: 0; border-top: 1px solid #d9e0e6; }
  .service-family .service-work-grid { grid-template-columns: 1fr; }
  .service-family .service-work-grid article { padding-left: 43px; }
  .service-family .service-work-media img { aspect-ratio: 1.4; }
  .service-family .section:has(> .container > .related-links) { padding-block: 44px; }
  .service-family #branches .section-head, .service-family #branches .section-note:not(:has(a[href^="tel:"])), .service-family #branches .section-note:has(a[href^="tel:"]):first-of-type:nth-last-of-type(2) { grid-column: 1; }
  .service-family .mobile-actions:has(> a:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}