/* Match the Services overview: concept first, followed by six supporting services. */
#services .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Keep the featured card's copy together, with one clear action beside it. */
#services .service-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; padding: var(--card-pad); background: #0b261c; border-color: #24d18645; }
#services .service-card-featured .service-card-top { grid-column: 1; grid-row: 1; flex-direction: row; justify-content: flex-start; gap: 12px; margin: 0 0 16px; }
#services .service-card-featured h3 { grid-column: 1; grid-row: 2; margin: 0 0 10px; }
#services .service-card-featured > p { grid-column: 1; grid-row: 3; max-width: 56ch; margin: 0; }
#services .service-card-featured .service-more { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-content: flex-start; gap: 12px; margin: 0; padding: 0; white-space: nowrap; }

/* Equal space above and below the complete, centered popup content. */
#service-dialog .dialog-body { padding: 64px 40px; text-align: center; overflow-wrap: anywhere; }
#service-dialog .dialog-body h2 { font-size: 36px; line-height: 1.15; }
#service-dialog #service-description { margin-top: 20px; }
#service-dialog #service-points { display: grid; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; color: #d6e2dc; font-size: 14px; line-height: 1.6; }
#service-dialog #service-points li::before { content: "·"; color: var(--green); margin-right: 8px; }
#service-dialog .dialog-actions { justify-content: center; align-items: center; flex-direction: row; gap: 16px 24px; margin-top: 28px; }
/* Same height, type and padding as the main header CTA. Width follows the label. */
#service-dialog .dialog-actions .button { width: auto; min-height: 44px; padding: 11px 18px; gap: 14px; border-radius: 5px; font-size: 13px; font-weight: 650; line-height: 1.5; }
#service-dialog .dialog-actions .button .icon { width: 17px; height: 17px; }
#service-dialog #service-page { justify-content: center; min-height: 44px; font-size: 13px; }
#service-dialog .service-dialog-navigation { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
#service-dialog .service-dialog-navigation button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--green); font-size: 20px; line-height: 1; transition: background .2s, border-color .2s; }
#service-dialog .service-dialog-navigation button:hover { background: #153d2c; border-color: var(--green); }
#service-dialog #service-position { min-width: 52px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
#service-dialog [hidden] { display: none; }

@media (max-width: 1000px) {
    #services .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    #services .service-grid { grid-template-columns: 1fr; }
    #services .service-card-featured { grid-template-columns: minmax(0, 1fr); }
    #services .service-card-featured .service-more { grid-column: 1; grid-row: 4; margin-top: 20px; }
    #service-dialog .dialog-body { padding: 56px 24px; }
    #service-dialog .dialog-body h2 { font-size: 28px; }
    #service-dialog .dialog-actions { gap: 8px 20px; }
    #service-dialog .dialog-actions .button { min-height: 40px; padding: 9px 13px; font-size: 12px; gap: 0; }
    #service-dialog .dialog-actions .button .icon { display: none; }
    #service-dialog .service-dialog-navigation { margin-top: 24px; }
}
@media (max-width: 360px) {
    #service-dialog .dialog-actions .button { padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    #service-dialog .service-dialog-navigation button { transition: none; }
}