/* Service pages share the existing colours, logo, fonts and navigation. */
.service-page { padding-block: 24px 48px; }
.service-breadcrumb { margin-bottom: 24px; font-size: 14px; overflow-wrap: anywhere; }
.service-breadcrumb a { text-underline-offset: 3px; }
.service-layout { display: grid; gap: 24px; align-items: center; }
.service-intro h1 { color: var(--navy); font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.service-lead { margin-top: 20px; max-width: 65ch; line-height: 1.7; }
.service-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.service-actions .btn { white-space: normal; text-align: center; min-height: 44px; }
.service-photo { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-card); }
.service-photo img { width: 100%; height: 320px; object-fit: contain; }
.service-copy { max-width: 850px; margin-top: 40px; }
.service-copy section + section, .service-related { margin-top: 32px; }
.service-copy h2 { color: var(--navy); font-size: clamp(22px, 3vw, 28px); line-height: 1.3; }
.service-copy p + h2 { margin-top: 28px; }
.service-copy p { margin-top: 14px; line-height: 1.7; }
.service-copy a { text-underline-offset: 3px; }
.service-copy .btn { text-decoration: none; }
.service-copy address { margin-top: 10px; font-weight: 600; }
.service-checklist { list-style: disc; padding-left: 24px; margin-top: 16px; }
.service-checklist li + li { margin-top: 8px; }
.service-examples { display: grid; gap: 16px; margin-top: 20px; }
.service-examples img { width: 100%; height: 260px; object-fit: contain; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.service-contact { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 30px); overflow-wrap: anywhere; }
.service-related ul { display: grid; gap: 12px; margin-top: 16px; }
.service-related a { display: inline-block; padding-block: 8px; }
@media (min-width: 768px) {
  .service-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; }
  .service-photo img { height: 400px; }
  .service-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}