/* Remaining pages and accessible Services dropdown. */
/* Keep the charcoal artwork around photos in the full-screen gallery too. */
#gallery{background:#050505;isolation:isolate;border-color:#666;box-shadow:0 18px 70px #000b}
#gallery:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--paint) center/cover;filter:grayscale(1);opacity:.55}
#gallery .viewer-head,#gallery .viewer-bottom{background:#05050550}
#gallery .close,#gallery .previous,#gallery .next{background:#080808b8;border-color:#888}
#gallery .close:hover,#gallery .previous:hover,#gallery .next:hover{background:#a4141a;border-color:#ee4146}
.nav-services{position:relative}
.nav-services-heading{display:flex;align-items:center;gap:4px}
.services-toggle{width:26px;height:32px;background:none;color:#ddd;border:0;padding:0;font-size:23px;line-height:1}
.services-toggle:hover,.services-toggle[aria-expanded=true],.nav-services.active>.nav-services-heading>a{color:var(--red)}
.services-toggle span{display:block;width:9px;height:9px;margin:auto;border:solid currentColor;border-width:0 1.5px 1.5px 0;font-size:0;transform:rotate(45deg);transition:transform .2s}
.services-toggle[aria-expanded=true] span{transform:rotate(225deg)}
.services-dropdown{position:absolute;top:100%;left:-18px;min-width:270px;padding:10px 0;background:#080808;border:1px solid #555;border-top:3px solid var(--red);box-shadow:0 15px 35px #000a}
.services-dropdown[hidden]{display:none}
nav .services-dropdown a{display:block;padding:12px 19px;border-bottom:1px solid #262626;font-size:17px;line-height:1.2;white-space:normal}
nav .services-dropdown a:last-child{border-bottom:0}
nav .services-dropdown a:hover,nav .services-dropdown a[aria-current]{background:#481014;color:#fff}
.service-detail-hero{min-height:540px}
.service-detail-hero h1{font-size:clamp(52px,5.8vw,80px)}
.service-detail-hero .lead{max-width:490px}
.hero-photo-credit{position:absolute;right:24px;bottom:14px;z-index:2;font-size:10px;color:#ccc;background:#050505b8;padding:4px 8px;border-radius:2px}
.hero-photo-credit:hover{color:white;text-decoration:underline}
.hero-service-symbol{position:absolute;right:8%;top:50%;transform:translateY(-50%) rotate(-7deg);width:330px;height:330px;color:#dadbd5;opacity:.65;filter:drop-shadow(5px 5px #83181e);pointer-events:none}
.hero-service-symbol svg{width:100%;height:100%;stroke-width:1.2}
@media(max-width:800px){.hero-service-symbol{right:-35px;width:260px;height:260px;opacity:.15}}
/* Each service blends its photo into a different shade of the same paint artwork. */
.renovation-hero{background:#050505}
.renovation-hero:before{z-index:-3;background:var(--paint) center/cover;opacity:.7;mask-image:none;filter:brightness(.68) saturate(.85)}
.renovation-hero[data-splash=charcoal]:before{filter:grayscale(1) brightness(.85)}
.renovation-hero[data-splash=silver]:before{filter:grayscale(1) brightness(1.65)}
.renovation-hero>img{width:75%;opacity:1;mask-image:linear-gradient(90deg,transparent,#0005 20%,black 48%),linear-gradient(180deg,black 72%,transparent);mask-composite:intersect}
.renovation-hero>img[src*="pest-treatment-warehouse"]{object-position:50% 76%}
.renovation-hero>img[src*="boston-residential-street-snow"]{object-position:50% 68%}
.renovation-hero:after{background:linear-gradient(90deg,#05050555,#05050560 43%,transparent 80%)}
.landscape-overview{position:relative}
.landscape-overview .service-overview{padding-bottom:110px}
.landscape-grass{position:absolute;left:0;right:0;bottom:0;height:70px;z-index:2;pointer-events:none;background:url('/assets/grass-border.svg') left bottom/315px 70px repeat-x;border-bottom:2px solid #335d2c}
@media(max-width:800px){.landscape-grass{height:48px;background-size:216px 48px}.landscape-overview .service-overview{padding-bottom:85px}}
.service-overview{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center}
.service-overview h2{font-size:44px;line-height:1.05;margin-bottom:22px}
.service-overview>div>p:not(.eyebrow){font-size:17px;line-height:1.75}
.junk-removal-accent,.service-illustration{display:block;width:100%;max-width:640px;height:auto;margin-top:24px}
.vehicle-types{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:32px 0 0;padding:0;list-style:none;max-width:530px}
.vehicle-types li{text-align:center;font:600 20px var(--heading);text-transform:uppercase;letter-spacing:.5px}
.vehicle-types .icon-medallion{width:76px;height:76px;margin-bottom:13px}
.vehicle-types svg{width:53px;height:53px}
@media(max-width:420px){.vehicle-types{gap:12px}.vehicle-types .icon-medallion{width:62px;height:62px}.vehicle-types svg{width:46px;height:46px}.vehicle-types li{font-size:18px}}
.offerings{border-left:2px solid #b51b20;padding:20px 0 20px 32px}
.offerings ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.offerings li{border-bottom:1px solid #333;padding-bottom:10px;display:flex;gap:15px;align-items:center}
.offerings li span{color:#f3292f;font-size:23px;line-height:1}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.collection-photo{position:relative;background:#171717;border:1px solid #555;padding:0;aspect-ratio:1.3;overflow:hidden;color:white}
.collection-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.collection-photo:hover img{transform:scale(1.045)}
.collection-photo:hover{border-color:#ef272d}
.collection-photo>span{position:absolute;bottom:12px;left:12px;background:#050505df;border-left:2px solid #e1262c;padding:5px 10px;font-size:11px;letter-spacing:.7px;display:flex;gap:15px}
.collection-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:25px;font-size:13px}
.service-next-step{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.service-next-step h2{line-height:1.1}
.service-next-step>div>p{margin-bottom:25px}
.service-next-step .button{margin:0 10px 10px 0;font-size:16px;gap:18px}
.about-story{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.about-story p:not(.eyebrow){margin:20px 0;line-height:1.75}
.about-story figure{margin:0;position:relative}
.about-story img{width:100%;height:400px;object-fit:cover}
.about-story figcaption{position:absolute;bottom:20px;left:20px;background:#050505d9;border-left:3px solid #ee2228;padding:12px 18px;font:600 22px var(--heading);text-transform:uppercase}
.about-principles{display:grid;grid-template-columns:1fr 1fr;gap:75px}
.about-principles p{color:#303030}
.about-principles .eyebrow{color:#a00d13}
.about-principles h2{color:#111}
.about-principles>div>p:not(.eyebrow){margin-top:22px;line-height:1.7}
.about-principles .values article{border-color:#ccc}
.about-quote{border-top:1px solid #666;max-width:850px;text-align:center}
.about-quote blockquote{margin:0 0 20px;font:500 32px/1.35 var(--heading)}
.about-quote .text-link{margin-top:20px}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.testimonial{margin:0;display:flex;flex-direction:column;background:linear-gradient(#0007,#000b),var(--paint) center/cover;padding:30px;border-bottom:2px solid #ad1e24}
.quote-mark{color:#f12a30;font:800 90px/.8 var(--heading)}
.testimonial blockquote{margin:12px 0 30px;font:500 25px/1.45 var(--heading);flex:1}
.testimonial figcaption{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #555;padding-top:17px;gap:12px}
.testimonial figcaption span{font-weight:600}.testimonial small{color:#aaa;font-size:12px}
.testimonial-invitation{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.testimonial-invitation p{color:#292929;line-height:1.7}
.testimonial-invitation p:not(.eyebrow){margin:22px 0}
.testimonial-invitation h2{color:#111;line-height:1.05}
.testimonial-invitation .eyebrow{color:#ab1419}
.testimonial-invitation img{width:100%;height:320px;object-fit:cover;mask-image:radial-gradient(ellipse,black 50%,transparent 74%)}
@media(max-width:1150px){.service-overview,.about-story,.about-principles,.testimonial-invitation{gap:40px}.testimonial{padding:23px}.testimonial blockquote{font-size:23px}.service-next-step{gap:35px}}
@media(max-width:800px){
 .nav-services-heading{justify-content:space-between;gap:0}
 .nav-services-heading>a{flex:1}
 .services-toggle{width:45px;height:43px;border:1px solid #444}
 .services-dropdown{position:static;width:100%;min-width:0;border-top:1px solid #b31920;box-shadow:none;margin:4px 0 10px;padding:4px 0}
 nav .services-dropdown a{padding:12px 20px;font-size:16px}
 nav.open{max-height:calc(100dvh - 76px);overflow-y:auto}
 .service-detail-hero{min-height:520px}
 .renovation-hero:before{opacity:.65}
 .renovation-hero>img{width:100%;opacity:.65;mask-image:linear-gradient(90deg,transparent,#0008 35%,black),linear-gradient(180deg,black 60%,transparent)}
 .renovation-hero:after{background:linear-gradient(90deg,#05050570,#05050535)}
 .service-detail-hero h1{font-size:55px}
 .service-overview,.service-next-step,.about-story,.about-principles,.testimonial-invitation{grid-template-columns:1fr;gap:30px}
 .offerings{padding-left:22px}.service-overview h2{font-size:37px}
 .collection-grid{grid-template-columns:repeat(2,1fr);gap:14px}
 .collection-bottom .button{font-size:15px;padding:12px 15px;gap:15px}
 .about-story img{height:320px}.about-principles h2{font-size:40px}
 .testimonial-grid{grid-template-columns:1fr;gap:20px}
 .testimonial blockquote{font-size:26px}.testimonial{padding:30px}
 .testimonial-invitation img{height:300px}
 .about-quote blockquote{font-size:29px}
}
@media(max-width:420px){.service-detail-hero h1{font-size:49px}.collection-grid{gap:10px}.collection-photo{aspect-ratio:1}.collection-photo>span{font-size:9px;left:7px;bottom:7px;padding:4px 6px;gap:6px}.collection-bottom{flex-wrap:wrap}.offerings li{font-size:15px}}
