/* Service pages extend the existing MDose identity and editorial layouts. */
.service-breadcrumb { margin: 0 0 28px; font-size: 12px; color: #536579; }
.service-hero h1 { font-size: clamp(38px, 4.6vw, 66px); max-width: 17ch; line-height: 1.06; overflow-wrap: break-word; }
.service-hero .lead { font-size: 17px; line-height: 1.75; max-width: 65ch; }
.service-local { margin-top: 22px; font-size: 12px; color: #536579; }
.service-hero .hero-panel { align-self: center; }
.service-training { padding: 30px; border: 1px solid #dce6ee; border-radius: 8px; background: #f1f6fa; }
.service-training > p:first-child { margin-top: 0; }
.service-training ul { padding-left: 20px; }
.service-training li { margin: 14px 0; }
.service-small { font-size: 12px; color: #536579; }
.service-text-link { display: inline-block; margin-top: 22px; font-size: 14px; color: #084a91; }
.service-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-related-card { display: block; padding: 28px; border: 1px solid #dce6ee; border-radius: 8px; text-decoration: none; background: #fff; }
.service-related-card:hover { border-color: #2291d1; background: #f1f6fa; }
.service-related-card h3 { font-size: 24px; line-height: 1.2; margin: 0 0 15px; }
.service-related-card p { color: #536579; font-size: 14px; line-height: 1.75; }
.service-related-card > span { display: block; margin-top: 20px; color: #084a91; font-size: 22px; }
.service-directory { padding-block: 40px; border-top: 1px solid #dce6ee; }
.service-directory h2 { font-size: 25px; margin-bottom: 20px; }
.service-directory nav { display: flex; flex-wrap: wrap; gap: 16px 26px; font-size: 14px; }
@media (max-width: 850px) { .service-related-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .service-hero h1 { font-size: clamp(36px, 9.5vw, 48px); } .service-hero .lead { font-size: 16px; } .service-training { padding: 23px; } .service-hero .hero-panel { min-height: auto; } }
@media (max-width: 400px) { .site-header .brand, .site-header .brand img { width: 105px; } .header-inner { gap: 10px; } }