/* Services body only: shared primitives, five optional compositions. */
body #content .service-design { --sd-ink:#17394c; --sd-accent:#176c7a; --sd-paper:#eff6f6; color:var(--sd-ink); margin:0 0 3rem; padding:0; text-align:left; font:400 16px/1.6 Arial,Helvetica,sans-serif; }
body #content .service-design * { box-sizing:border-box; }
body #content .service-design h2, body #content .service-design h3, body #content .service-design p { margin:0; padding:0; background:none; text-align:left; color:inherit; font-family:inherit; letter-spacing:normal; text-transform:none; }
body #content .service-design .service-design__intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:stretch; overflow:hidden; border-radius:14px; background:var(--sd-paper); margin:0 0 1.25rem; }
body #content .service-design .service-design__intro-copy { padding:clamp(1.25rem,4vw,3rem); align-self:center; }
body #content .service-design .service-design__eyebrow { color:var(--sd-accent); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.8rem; }
body #content .service-design h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:700; line-height:1.12; max-width:18ch; margin-bottom:1rem; }
body #content .service-design .service-design__lede { font-size:1rem; line-height:1.65; max-width:62ch; }
body #content .service-design .service-design__caption { margin-top:1.5rem; font-size:.82rem; font-weight:700; }
body #content .service-design .service-design__caption span { display:inline-block; margin-left:.6rem; }
body #content .service-design img { display:block; max-width:100%; margin:0; border:0; border-radius:0; float:none; box-shadow:none; }
body #content .service-design .service-design__hero { width:100%; height:100%; min-height:260px; max-height:380px; object-fit:cover; }
body #content .service-design ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; list-style:none; margin:1.25rem 0 0; padding:0; }
body #content .service-design .service-design__card { position:relative; display:block; min-width:0; margin:0; padding:0; overflow:hidden; list-style:none; background:#fff; border:1px solid #d5e2e7; border-radius:10px; box-shadow:0 3px 12px #17394c08; }
body #content .service-design .service-design__card-copy { padding:1.25rem 2.5rem 1.25rem 1.25rem; }
body #content .service-design .service-design__number { display:block; margin-bottom:.5rem; color:var(--sd-accent); font-size:.72rem; font-weight:700; letter-spacing:.1em; }
body #content .service-design h3 { font-size:1.1rem; line-height:1.25; font-weight:700; margin:0 0 .6rem; }
body #content .service-design a { display:inline-block; color:var(--sd-ink); background:transparent; min-height:44px; padding:.3rem 0; text-decoration:underline; text-decoration-color:#a9c8cd; text-underline-offset:4px; overflow-wrap:anywhere; }
body #content .service-design a::after { content:''; position:absolute; inset:0; }
body #content .service-design a:hover { color:#0d5968; text-decoration-color:currentColor; }
body #content .service-design a:focus-visible { outline:3px solid #b4510b; outline-offset:3px; border-radius:2px; }
body #content .service-design .service-design__card:focus-within { outline:3px solid #b4510b; outline-offset:3px; }
body #content .service-design .service-design__card p { color:#46616e; font-size:.88rem; line-height:1.55; }
body #content .service-design .service-design__arrow { position:absolute; bottom:1.2rem; right:1rem; color:var(--sd-accent); font-size:1.3rem; }
body #content .service-design .service-design__card-photo { width:100%; height:160px; object-fit:cover; }
/* Photo grid: light introduction and image-led service tiles. */
body #content .service-design--photo-grid .service-design__intro { display:block; border-left:5px solid var(--sd-accent); }
body #content .service-design--photo-grid h2 { max-width:25ch; }
body #content .service-design--photo-grid .service-design__cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
body #content .service-design--photo-grid .service-design__number { display:none; }
/* Split: dark introduction beside a project photograph, then numbered choices. */
body #content .service-design--split .service-design__intro { background:#17394c; color:#fff; }
body #content .service-design--split .service-design__eyebrow { color:#a5d9dc; }
body #content .service-design--split .service-design__card { border-left:4px solid var(--sd-accent); }
/* Spotlight: a wide photograph above a contrasting title panel. */
body #content .service-design--spotlight { --sd-accent:#286990; --sd-paper:#edf5fa; }
body #content .service-design--spotlight .service-design__intro { grid-template-columns:minmax(0,1fr); }
body #content .service-design--spotlight .service-design__hero { grid-row:1; height:230px; min-height:0; object-position:center 45%; }
body #content .service-design--spotlight .service-design__intro-copy { border-left:5px solid var(--sd-accent); }
body #content .service-design--spotlight h2 { max-width:28ch; }
/* Directory: grouped choices for a broader service/information mix. */
body #content .service-design--directory { --sd-accent:#386a4b; --sd-paper:#edf4ee; }
body #content .service-design--directory .service-design__groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin-top:1.75rem; }
body #content .service-design--directory .service-design__group-title { font-size:.85rem; color:var(--sd-accent); border-bottom:2px solid #c2d5c8; padding-bottom:.65rem; }
body #content .service-design--directory ul { grid-template-columns:minmax(0,1fr); gap:.65rem; margin-top:.85rem; }
body #content .service-design--directory .service-design__number { display:none; }
/* Compact: three substantial choices for small roof-service sites. */
body #content .service-design--compact { --sd-accent:#925221; --sd-paper:#f8f2eb; }
body #content .service-design--compact .service-design__intro { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
body #content .service-design--compact .service-design__cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
body #content .service-design--compact .service-design__card { border-top:4px solid var(--sd-accent); }
@media(max-width:900px) {
 body #content .service-design--photo-grid .service-design__cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 body #content .service-design .service-design__intro, body #content .service-design--compact .service-design__intro { grid-template-columns:minmax(0,1fr); }
 body #content .service-design .service-design__hero { height:190px; min-height:0; max-height:none; }
 body #content .service-design .service-design__intro-copy { padding:1.4rem; }
 body #content .service-design .service-design__cards, body #content .service-design .service-design__groups { grid-template-columns:minmax(0,1fr); }
 body #content .service-design .service-design__card-photo { height:180px; }
 body #content .service-design .service-design__card-copy { padding:1.05rem 2.5rem 1.05rem 1.15rem; }
}
@media(forced-colors:active) {
 body #content .service-design .service-design__card { border:1px solid CanvasText; }
 body #content .service-design a:focus-visible, body #content .service-design .service-design__card:focus-within { outline-color:Highlight; }
}