:root { --service-ink: #111827; --service-copy: #6b7280; --service-surface: #fff; --service-muted: #f9fafb; --service-border: #e5e7eb; }
html { scroll-padding-top: 6rem; }
html.dark { --service-ink: #f9fafb; --service-copy: #cbd5e1; --service-surface: #111827; --service-muted: #030712; --service-border: #1f2937; }
.service-container { width: min(1120px, calc(100% - 3rem)); margin-inline: auto; }
.service-intro { padding: 2rem 0 4.5rem; background: var(--service-muted); }
.service-breadcrumb { font-size: .875rem; color: var(--service-copy); margin-bottom: 3rem; }
.service-breadcrumb a { color: #087e9c; text-decoration: underline; text-underline-offset: 3px; }
.service-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.service-eyebrow { color: #087e9c; font-weight: 700; font-size: .85rem; letter-spacing: .025em; margin-bottom: 1rem; display: block; }
html.dark .service-eyebrow, html.dark .service-link, html.dark .service-breadcrumb a { color: #67e8f9; }
.service-page h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.13; font-weight: 700; color: var(--service-ink); }
.service-lead { font-size: 1rem; line-height: 1.8; color: var(--service-copy); margin: 1.5rem 0 2rem; }
.service-hero-image { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: .75rem; }
.service-primary { display: inline-flex; gap: .75rem; justify-content: center; align-items: center; padding: .75rem 1.5rem; border-radius: 999px; color: #fff; background: linear-gradient(to right, #06b6d4, #2563eb); font-weight: 700; line-height: 1.5; text-align: center; }
.service-primary:hover { filter: brightness(1.08); }
.service-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 2rem; padding-top: 3rem; align-items: start; }
.service-section { margin-bottom: 2.75rem; }
.service-page h2, .coverage-section h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--service-ink); margin-bottom: 1rem; }
.service-section p, .service-section li, .service-contact p { color: var(--service-copy); line-height: 1.85; }
.service-section ul { list-style: disc; padding-left: 1.5rem; margin-top: 1rem; }
.service-section li { padding-left: .25rem; margin-bottom: .5rem; }
.service-contact { padding: 1.75rem; background: var(--service-surface); border: 1px solid var(--service-border); border-radius: 1rem; position: sticky; top: 6rem; scroll-margin-top: 6rem; }
.service-contact .service-primary { width: 100%; margin-top: 1.5rem; }
.service-secondary { display: block; text-align: center; color: var(--service-ink); margin-top: 1rem; text-decoration: underline; text-underline-offset: 4px; line-height: 1.6; }
.service-contact .service-contact-note { font-size: .8rem; margin-top: 1.5rem; }
.service-faq details { border-bottom: 1px solid var(--service-border); padding: 1.125rem 0; }
.service-faq summary { color: var(--service-ink); cursor: pointer; font-weight: 650; line-height: 1.6; }
.service-faq details p { margin-top: .75rem; }
.service-related { padding-top: 1.5rem; padding-bottom: 5rem; }
.service-related-grid, .coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.service-related-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; background: var(--service-surface); border: 1px solid var(--service-border); border-radius: 1rem; }
.service-related-card:hover { border-color: #0891b2; }
.service-related-card h3 { font-size: 1.15rem; line-height: 1.5; font-weight: 700; color: var(--service-ink); }
.service-related-card .service-eyebrow { margin: 0; }
.service-link { color: #087e9c; font-weight: 650; margin-top: auto; }
.coverage-section { padding: 4rem 0; background: var(--service-muted); }
.coverage-section > div > p { color: var(--service-copy); line-height: 1.8; max-width: 720px; margin-bottom: 2rem; }
.coverage-card p { color: var(--service-copy); line-height: 1.7; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #0891b2; outline-offset: 4px; }

@media (max-width: 800px) {
  .service-hero-grid, .service-content-grid { grid-template-columns: 1fr; gap: 2rem; }
  .service-related-grid, .coverage-grid { grid-template-columns: 1fr; }
  .service-contact { position: static; }
  .service-breadcrumb { margin-bottom: 2rem; }
  .service-intro { padding-bottom: 2.5rem; }
  .service-hero-image { max-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.service-page h1, .service-page h2 {
  background: linear-gradient(to right, #0891b2, #2563eb);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.service-page { background: var(--service-muted); }
.service-content-grid > div > .service-section { background: var(--service-surface); border: 1px solid var(--service-border); border-radius: .75rem; padding: 1.5rem; }
.service-section p, .service-section li, .service-contact p { font-size: .875rem; }
.service-related-card { padding: 0 0 1.25rem; overflow: hidden; border-radius: .75rem; }
.service-related-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.service-related-card h3, .service-related-card .service-link, .service-related-card .service-eyebrow { margin-inline: 1.25rem; }
.service-breadcrumb { font-size: .75rem; line-height: 1.8; }
@media (max-width: 600px) { .service-container { width: calc(100% - 2rem); } }

.team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin-top:3rem; }
.team-card { background:var(--service-surface); border:1px solid var(--service-border); border-radius:.75rem; overflow:hidden; text-align:center; }
.team-portrait { width:100%; aspect-ratio:1; object-fit:cover; object-position:center top; }
.team-initials { width:6rem; height:6rem; display:grid; place-items:center; margin:2rem auto 0; border-radius:50%; background:linear-gradient(135deg,#06b6d4,#2563eb); color:white; font-size:1.75rem; font-weight:700; }
.team-copy { padding:1.5rem; }
.team-copy h3 { color:var(--service-ink); font-weight:700; font-size:1rem; margin-bottom:.75rem; }
.team-copy p { color:var(--service-copy); font-size:.875rem; line-height:1.8; }
.team-copy .team-specialty { margin-top:.5rem; font-size:.8rem; color:#0891b2; }
.location-map { padding-top:3.5rem; }
.location-map-heading { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin-bottom:1.5rem; }
.location-map-heading h3 { color:var(--service-ink); font-weight:700; font-size:1.3rem; margin-bottom:.75rem; }
.location-map-heading p { color:var(--service-copy); font-size:.875rem; line-height:1.8; }
.location-map iframe { display:block; width:100%; height:360px; border:1px solid var(--service-border); border-radius:.75rem; }
@media(max-width:700px) { .team-grid { grid-template-columns:1fr; gap:1.25rem; } .location-map-heading { flex-direction:column; align-items:flex-start; } .location-map iframe { height:300px; } }
