
/* Annotated drainage photograph and three clear steps. */
main#panel .servicepage-90 .dsl-drainage-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
main#panel .servicepage-90 .dsl-drainage-photo{position:relative;margin:0;border-radius:30px;overflow:hidden}
main#panel .servicepage-90 .dsl-drainage-photo img{display:block;width:100%;height:auto}
main#panel .servicepage-90 .dsl-drainage-pin{position:absolute;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#339ace;color:#fff;border:3px solid #fff;box-shadow:0 3px 16px #0004;font:700 15px Montserrat,Arial,sans-serif;transform:translate(-50%,-50%)}
main#panel .servicepage-90 .pin-gutter{left:62%;top:62%}main#panel .servicepage-90 .pin-funnel{left:41%;top:51%}main#panel .servicepage-90 .pin-pipe{left:27%;top:85%}
main#panel .servicepage-90 .dsl-drainage-copy>p{font:15px/1.7 Montserrat,Arial,sans-serif;margin-bottom:24px}
main#panel .servicepage-90 .dsl-drainage-list{list-style:none;padding:0;margin:0;display:grid;gap:20px}
main#panel .servicepage-90 .dsl-drainage-list li{display:flex;gap:16px;align-items:flex-start}
main#panel .servicepage-90 .dsl-drainage-list li>span{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:#edf7fc;color:#339ace;font:700 14px Montserrat,Arial,sans-serif}
main#panel .servicepage-90 .doma-service-landing .dsl-drainage-list h3{font-size:18px!important;margin:3px 0 7px!important}
main#panel .servicepage-90 .dsl-drainage-list p{font:14px/1.65 Montserrat,Arial,sans-serif;margin:0}
main#panel .servicepage-90 .dsl-drainage-note{margin-top:28px;padding:22px 28px;border-left:4px solid #339ace;border-radius:0 18px 18px 0;background:#f2f8fb;color:#172832;font:500 15px/1.6 Montserrat,Arial,sans-serif}
@media(max-width:991px){main#panel .servicepage-90 .dsl-drainage-grid{gap:28px;align-items:start}}
@media(max-width:767px){main#panel .servicepage-90 .dsl-drainage-grid{grid-template-columns:1fr;gap:26px}main#panel .servicepage-90 .dsl-drainage-photo{border-radius:24px}main#panel .servicepage-90 .dsl-drainage-note{padding:20px;margin-top:24px}}

/* Match the photograph to the adjacent copy without changing marker alignment. */
@media(min-width:768px){
main#panel .servicepage-90 .dsl-drainage-grid{align-items:stretch}
main#panel .servicepage-90 .dsl-drainage-photo{min-height:0}
main#panel .servicepage-90 .dsl-drainage-photo img{height:100%;position:absolute;inset:0;object-fit:cover}
}
