/* Shared service directory and detail-page content. */
.property-services { background: #d9d2c7; color: #171717; padding: clamp(40px, 6vw, 88px) 0; }
.property-services + .property-services { padding-top: 12px; }
.property-services h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.12; margin: 0 0 18px; }
.property-services-intro { max-width: 850px; font-size: 17px; line-height: 1.6; margin: 0 0 28px; }
.property-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.property-service-card { display: flex; flex-direction: column; min-width: 0; background: #f4f0e9; color: #171717; border-top: 4px solid #bd0000; padding: 26px; text-decoration: none; scroll-margin-top: 110px; }
.property-service-card h3 { font-size: 21px; line-height: 1.3; margin: 0 0 14px; }
.property-service-card p { font-size: 16px; line-height: 1.65; margin: 0 0 18px; }
.property-service-card a, .property-services-intro a { color: #950000; text-decoration: underline; text-underline-offset: 3px; }
.property-service-link { margin-top: auto; font-size: 14px; font-weight: 700; color: #950000; }
a.property-service-card:hover { background: #fff; }
.property-service-card:focus-visible, .property-services a:focus-visible { outline: 3px solid #950000; outline-offset: 4px; }
.property-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.property-photo { margin: 0; }
.property-photo-space { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 24px; text-align: center; background: #242424; color: #f4f0e9; border: 1px dashed #777; }
.property-photo figcaption { padding: 12px 0; font-size: 15px; line-height: 1.5; }
#roof-installations { scroll-margin-top: 100px; }
.hero-services h1 { font-size: clamp(36px, 6vw, 82px); line-height: 1.08; letter-spacing: -.035em; overflow-wrap: break-word; }
@media (max-width: 640px) { .property-photo-grid { grid-template-columns: 1fr; } .property-service-card { padding: 22px; } }

.service-hierarchy-hero { min-height: auto; }
.service-hierarchy-hero .hero-title { font-size: clamp(34px, 5vw, 76px); line-height: 1.1; max-width: 24ch; }
.service-hierarchy-hero .hero-copy { max-width: 850px; }
.service-breadcrumbs { color: #f0ede8; font-size: 14px; line-height: 1.7; }
.service-breadcrumbs a { color: inherit; text-underline-offset: 3px; }

/* Before/after slots for each individual service, immediately after the hero. */
.service-comparison-section { background: #d9d2c7; color: #171717; padding: clamp(36px, 6vw, 80px) 0; }
.service-comparison-section h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.15; margin: 0 0 16px; }
.service-comparison-intro { max-width: 760px; font-size: 17px; line-height: 1.5; margin-bottom: 22px; }
.service-comparison-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.service-comparison-jumps a { padding: 8px 12px; border: 1px solid #9e978e; color: #171717; font-size: 14px; line-height: 1.3; text-decoration: none; }
.service-comparison-jumps a:hover { background: #f4f0e9; }
.service-comparison { margin: 0 0 48px; scroll-margin-top: 100px; }
.service-comparison:last-child { margin-bottom: 0; }
.service-comparison h3 { font-size: clamp(23px, 2.4vw, 32px); line-height: 1.2; margin-bottom: 18px; }
.service-comparison-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); }
.service-comparison-photo { min-width: 0; margin: 0; }
.service-comparison-photo figcaption { font-size: 15px; font-weight: 700; padding: 10px 14px; background: #171717; color: #fff; }
.service-comparison-placeholder, .service-comparison-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.service-comparison-placeholder { display: grid; place-items: center; padding: 16px; background: #c8c1b7; border: 1px dashed #8e877e; text-align: center; color: #47413b; font-size: 14px; }
.service-comparison-description { max-width: 900px; font-size: 17px; line-height: 1.6; margin: 20px 0 12px; }
.service-scope-details { max-width: 900px; font-size: 16px; line-height: 1.6; }
.service-scope-details summary { cursor: pointer; font-weight: 700; }
.service-scope-details p { margin: 12px 0; }
.service-scope-details a { color: #950000; text-decoration: underline; }
.service-comparison-section a:focus-visible, .service-scope-details summary:focus-visible { outline: 2px solid #950000; outline-offset: 3px; }
@media (max-width: 640px) {
 .service-comparison { margin-bottom: 32px; }
 .service-comparison-description { font-size: 15px; }
 .service-comparison-placeholder { padding: 10px; font-size: 12px; }
}

/* Clickable cards use the same arrow artwork as the homepage. */
a.property-service-card { position: relative; padding-bottom: 62px; }
a.property-service-card .property-card-arrow { position: absolute; right: 26px; bottom: 22px; width: 32px; height: auto; color: #f00303; pointer-events: none; transition: transform .2s ease; }
a.property-service-card:hover .property-card-arrow,
a.property-service-card:focus-visible .property-card-arrow { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { a.property-service-card .property-card-arrow { transition: none; } }