/* Boston directory headings retain the approved navy theme. Client sites are separate. */
.page-heading{background:var(--navy,#10264c);color:#fff}
.page-heading h1{color:#fff}
.page-heading p{color:#d4dff0}
.page-heading .breadcrumbs{color:#c1cfe4}
.page-heading .breadcrumbs a{color:#e3edff}
.page-heading:before{opacity:.08}
.directory-service-matches{grid-column:1/-1;min-width:0}
.directory-service-matches h2{font-size:clamp(24px,3vw,32px);margin:12px 0 24px}
.directory-service-matches>.button{margin-top:24px}
.catalog-batch-controls{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.catalog-batch-controls p{margin:0;font-size:12px;color:#476187}
.catalog-batch-controls [hidden]{display:none!important}

/* Company cards identify the actual advertiser, or the Home Pros open listing. */
.company-card-brandline{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:7px}
.company-card-brandline .company-tag{margin:0}
.company-card-logo{width:62px;height:44px;object-fit:contain;background:transparent;flex-shrink:0}
.company-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:13px;border-top:1px solid #e0e7f0;font-size:11px}
.company-card-open{display:inline-flex;align-items:center;padding:6px 9px;border:1px solid #c7d9ef;border-radius:6px;color:#21558b;background:#f2f7fc;font-weight:700;line-height:1.35}
.company-card-occupied{color:#46627c;font-weight:700}
.company-card-owner{max-width:50%;text-align:right;color:#17385d;font-weight:700;line-height:1.4}

/* A restrained 10% reduction, shared by service and company catalogue cards. */
#main .service-visual-card .service-card-photo,#main .company-card .company-art{aspect-ratio:160/63;height:auto!important;padding:0!important;overflow:hidden}
#main .service-visual-card .service-card-copy,#main .company-card .company-body{padding:18px 19px 20px}
#main .service-visual-card .service-card-heading{margin:3px 0 6px}
#main .service-visual-card h3{font-size:20px}
#main .service-visual-card .service-card-copy>p{line-height:1.6;margin-bottom:10px}
#main .service-visual-card .service-bottom{padding-top:14px}
#main .service-visual-card .slot-status{padding-block:5.4px}
#main .company-card{display:flex;flex-direction:column}
#main .company-card .company-body{display:flex;flex:1;flex-direction:column}
#main .company-card-brandline{min-height:32px;margin-bottom:5px}
#main .company-card-logo{width:56px;height:32px}
#main .company-body h3{font-size:20px;line-height:1.28;margin:5px 0 8px}
#main .company-body .record-status{font-size:11.5px;line-height:1.4;margin:0 0 10px}
#main .company-body>.text-link{align-self:flex-start;margin-top:auto}
#main .company-card-meta{margin-top:12px;padding-top:10px}
#main .company-card-open,#main .service-visual-card .slot-status.open{background:#edf8f1;color:#267047;border-color:#c5e5d1}
#main .company-card-open:hover{background:#def1e5;border-color:#93c9a8}
/* Keep the availability pill from making company cards taller than service cards. */
#main .company-card-open{margin-block:-6px}

/* Compact only the company directory's introduction and search area. */
#main:has(#company-results)>.page-heading{padding:20px 0 22px}
#main:has(#company-results)>.page-heading .breadcrumbs{margin-bottom:10px}
#main:has(#company-results)>.page-heading h1{font-size:clamp(30px,3.2vw,44px);line-height:1.12;margin:10px 0 12px}
#main:has(#company-results)>.page-heading p{font-size:14px;line-height:1.5;margin-bottom:0}
#main>.section:has(#company-results){padding-top:24px}
#main:has(#company-results) .directory-tabs{gap:8px;margin-bottom:12px}
#main:has(#company-results) .directory-tabs .button{width:auto;min-height:40px;padding:9px 15px;font-size:13px}
#main:has(#company-results) .company-search-tools .company-search{padding:11px 16px;margin-bottom:8px}
#main:has(#company-results) .company-search input{font-size:16px;line-height:1.4}
#main:has(#company-results) .company-search button[type="submit"]{padding:7px 11px}
#main:has(#company-results) .company-filter-row{gap:8px;padding:4px 8px;margin-bottom:12px}
#main:has(#company-results) .company-filter-row .filter-button{font-size:12px;padding:7px 11px}
#main:has(#company-results) .company-results-header{margin:12px 0 14px}
@media(max-width:640px){
 #main>.section:has(#company-results){padding-top:20px}
 #main:has(#company-results) .directory-tabs .button{flex:1 1 auto;font-size:12px;padding-inline:11px}
}

/* Center the About page purpose and contact introductions. */
#main .mission-section>.container>.section-heading{display:block;text-align:center}
#main .mission-section>.container>.section-heading>div{width:100%}
#main .mission-section>.container>.section-heading p{margin-inline:auto}
#main .contact-band>.container{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px}
#main .contact-band>.container>div{width:100%}
#main .contact-band p{margin-inline:auto}

#main .contact-band h2{margin-inline:auto}
#main .contact-band .eyebrow,#main .mission-section .section-heading .eyebrow{justify-content:center}
#main .how-step-card{position:relative;overflow:hidden;padding:28px}
#main .how-step-card .how-step-art{position:absolute;right:12px;top:10px;width:152px;height:128px;object-fit:contain;pointer-events:none;mask-image:linear-gradient(to bottom,#000 78%,transparent)}
#main .how-step-card .purpose-number{margin-bottom:52px}
#main .how-step-card h2{font-size:24px;line-height:1.2;margin:0 0 14px}
#main .how-step-card p{font-size:14px;line-height:1.7;margin-bottom:0}

/* Compact public resources while preserving emergency numbers and links. */
#main:has(.resource-section)>.page-heading{padding:18px 0 22px}
#main:has(.resource-section)>.page-heading .breadcrumbs{margin-bottom:10px}
#main:has(.resource-section)>.page-heading h1{font-size:clamp(30px,3.2vw,44px);line-height:1.08;margin:10px 0 12px}
#main:has(.resource-section)>.page-heading p{font-size:14px;line-height:1.5;margin-bottom:0}
#main .resource-section{padding-top:24px}
#main .emergency-panel{padding:22px 26px;gap:24px;margin-bottom:24px}
#main .emergency-panel h2{font-size:26px;line-height:1.2;margin:10px 0}
#main .emergency-panel p{font-size:13px;line-height:1.55;margin:10px 0}
#main .emergency-call{padding:16px 22px;min-width:180px}
#main .emergency-call strong{font-size:48px}
#main .emergency-art{display:flex;float:right;gap:2px;margin:-12px 0 0 15px}
#main .emergency-art svg{width:64px;height:48px}
#main .resource-toolbar{margin-top:22px;margin-bottom:10px}
#main .resource-toolbar h2{font-size:28px;margin:8px 0}
#main .resource-count{margin:10px 0 16px}
#main .resource-card{position:relative;padding:24px}
#main .resource-card-top{padding-right:80px;min-height:48px;align-items:center}
#main .resource-art{position:absolute;top:12px;right:14px;display:grid;place-items:center;width:76px;height:64px;border-radius:18px;background:radial-gradient(ellipse,#e3eefb 0%,#f7faff 55%,transparent 74%);color:#26568d}
#main .resource-art>svg{width:68px;height:52px}
#main .resource-art>svg:not([viewBox="0 0 104 76"]){width:40px;height:40px;stroke-width:1.3}
#main .district-art{display:inline-flex;width:48px;margin-right:10px;vertical-align:middle}
#main .district-art svg{width:48px;height:36px}
@media(max-width:640px){#main .emergency-art{float:none;justify-content:flex-start;margin:0 0 10px}#main .emergency-panel{padding:20px}#main .emergency-call{min-width:0}}

/* Add red to the existing blue-white moving light on Boston’s upper menu edge. */
.site-header::before{background-image:linear-gradient(90deg,transparent,var(--hp-header-top) 25%,#fff 50%,#f23550 75%,transparent)}

#main a.resource-art{cursor:pointer;text-decoration:none;transition:transform .18s ease,background-color .18s ease}
#main a.resource-art:hover{transform:translateY(-2px);background-color:#eaf3ff}
#main a.resource-art:focus-visible{outline:3px solid #3584db;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#main a.resource-art{transition:none}#main a.resource-art:hover{transform:none}}

/* Center the requested plain About copy, preserving its adjacent photo and shaded banners. */
#main .about-layout>div{text-align:center}
#main .about-layout>div .eyebrow{justify-content:center}

/* Catalogue logos retain their intrinsic proportions, including standalone views. */
#main .service-card .service-card-heading .service-card-brand{display:block;width:48px;height:48px;max-width:100%;flex:0 0 48px;object-fit:contain;object-position:center;aspect-ratio:1/1;align-self:center;background:transparent}