/* ============================================================ service-d.css — shared styles for redesigned service-detail pages (Direction D). Accent set on : art-orange = pavers · art-green = washing · art-blue = pool Pair with hero classes ph-orange/green/blue + hl-o/hl-g/hl-b from d-style.css. ============================================================ */ body.art-orange{--art:var(--orange);--art-hi:var(--orange-hi);--art-b1:var(--band-orange-1);--art-b2:var(--band-orange-2);} body.art-green {--art:var(--green); --art-hi:var(--green-hi); --art-b1:var(--band-green-1); --art-b2:var(--band-green-2);} body.art-blue {--art:var(--blue); --art-hi:var(--blue-hi); --art-b1:var(--band-blue-1); --art-b2:var(--band-blue-2);} /* hero (text + rotated photo card) */ .hero-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;} .hero-ph{position:relative;} .hero-ph .ph{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);border:5px solid rgba(255,255,255,.2);transform:rotate(1.6deg);} .hero-ph .ph img{width:100%;object-fit:cover;aspect-ratio:16/11.5;} .hero-ph .band-stat{left:auto;right:-14px;bottom:-18px;} @media (max-width:980px){.hero-grid2{grid-template-columns:1fr;gap:40px;}} /* "what's included" steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .step{background:var(--off);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;} .step:hover{transform:translateY(-4px);box-shadow:var(--sh);} .step .im{aspect-ratio:16/10;overflow:hidden;} .step .im img{width:100%;height:100%;object-fit:cover;} .step .bd{padding:20px 22px 24px;} .step .no{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--art);} .step .no i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--art);color:#fff;display:grid;place-items:center;font-size:13px;} .step h3{font-size:22px;margin-top:10px;} .step p{font-size:14px;color:var(--mut);margin-top:8px;line-height:1.55;} @media (max-width:900px){.steps{grid-template-columns:1fr;}} /* colored option band extras */ .finish-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;} .fin{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:20px 22px;} .fin h3{color:#fff;font-size:19px;} .fin p{font-size:13px;color:rgba(255,255,255,.78);margin-top:7px;line-height:1.5;} @media (max-width:900px){.finish-opts{grid-template-columns:1fr;}} /* "what sets your price" factors */ .factors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .factor{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:22px;} .factor .ic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--art) 12%,transparent);color:var(--art);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:16px;} .factor h3{font-size:16.5px;margin-top:12px;} .factor p{font-size:13px;color:var(--mut);margin-top:6px;line-height:1.5;} @media (max-width:900px){.factors{grid-template-columns:1fr 1fr;}} .price-line{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:40px;} .price-line .big{font-family:var(--disp);font-weight:800;font-size:56px;color:var(--navy);letter-spacing:-.02em;} .price-line .big small{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);margin-top:6px;} /* before/after + reviews */ .ba-row.two{grid-template-columns:1fr 1fr;} @media (max-width:900px){.ba-row.two{grid-template-columns:1fr;}} .rev-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin:0 auto;} @media (max-width:800px){.rev-strip{grid-template-columns:1fr;}} /* accent helpers used in markup */ .dbtn-white.art{color:var(--art-b2);} .hl-art{color:var(--art-hi);}