/**
 * Est. 1973 — city/service-area unification layer (owner brief 2026-08-13).
 *
 * Design-system enforcement + broken-component repair for the city-hub
 * template's 20-section full-width main column. CSS-only, tokens-only,
 * scoped under body.ccs-est1973 #main so shared block files are untouched.
 * D3/D4/D5 mirror the service-unify layer with city-template scoping (the
 * service layer's rules sit under .e73-inner-main, which this template
 * does not have).
 */

/* ═══════════════ D1 — tab-accordion dead zone (992-1199px) ═══════════════
   hidden-md-down (tabs) and hidden-lg (toggles) are not complementary in
   this Bootstrap variant: both compute display:none across a laptop-width
   band, leaving three of four panels unreachable. One explicit breakpoint,
   exactly one control set visible everywhere. */
@media (max-width: 1199px) {
	body.ccs-est1973 #main .tab-accordion .tab-accordion__tabs { display: none !important; }
	body.ccs-est1973 #main .tab-accordion .tab-accordion__panel__toggle { display: flex !important; }
	body.ccs-est1973 #main .tab-accordion .tab-accordion__panel.is-expanded .tab-accordion__panel__content { display: block !important; }
}
@media (min-width: 1200px) {
	body.ccs-est1973 #main .tab-accordion .tab-accordion__tabs { display: flex !important; }
	body.ccs-est1973 #main .tab-accordion .tab-accordion__panel__toggle { display: none !important; }
}

/* ═══════════════ D2 — image-button titles: cream on a real scrim ═══════ */
body.ccs-est1973 #main .image-button__title,
body.ccs-est1973 #main h3.image-button__title {
	color: var(--e73-cream) !important;
	text-shadow: 0 1px 3px rgba(20, 14, 8, .55);
	z-index: 2;
}
body.ccs-est1973 #main .image-button::after,
body.ccs-est1973 #main [class*="image-button"]::after {
	background: linear-gradient(rgba(36, 28, 20, 0) 30%, rgba(36, 28, 20, .92) 78%) !important;
}

/* ═══════════════ D3 — CTA highlight double-draw ═══════════════ */
body.ccs-est1973 #main .full-width-cta__highlight-text-visual { position: relative; }
body.ccs-est1973 #main .full-width-cta__highlight-text-visual::before {
	font-family: var(--e73-font-slab) !important;
	color: var(--e73-butter) !important;
	text-shadow: 2px 2px 0 var(--e73-ink);
	position: static !important;
	white-space: normal;
}
body.ccs-est1973 #main .full-width-cta__highlight-text-visual::after { content: none !important; }

/* ═══════════════ D4 — QUICK ANSWER eyebrow pill ═══════════════ */
body.ccs-est1973 #main .ccs-answer-card__eyebrow,
body.ccs-est1973 #main span.ccs-answer-card__eyebrow {
	display: inline-block !important;
	width: auto !important;
	background: var(--e73-butter-2) !important;
	color: var(--e73-ink) !important;
	font-family: var(--e73-font-slab) !important;
	font-size: var(--e73-fs-xs) !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 4px 12px !important;
	border-radius: 999px;
}

/* ═══════════════ D5 — growth linkfolds: one default state ═══════════════ */
body.ccs-est1973 #main .ccs-growth-links__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--e73-space-sm);
	align-items: stretch;
}
@media (min-width: 768px) {
	body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold > ul,
	body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold > div { display: block !important; }
	body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold summary { pointer-events: none; }
	body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold summary::marker { content: ""; }
}
body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold {
	background: var(--e73-porcelain) !important;
	border: 1px solid var(--e73-line) !important;
	border-radius: var(--e73-radius-lg) !important;
}
body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold summary,
body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold summary h3 {
	color: var(--e73-ink) !important;
	background: transparent !important;
	font-family: var(--e73-font-slab) !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: var(--e73-fs-sm) !important;
}

/* ═══════════════ §B2 — one page container for all 20 sections ═══════════ */
body.ccs-est1973 #main > * > .container,
body.ccs-est1973 #main > .container,
body.ccs-est1973 #main > div[class^="ccs-"],
body.ccs-est1973 #main > section[class^="ccs-"],
body.ccs-est1973 #main .ccs-answer-card,
body.ccs-est1973 #main .ccs-answer-block {
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px;
	padding-right: 24px;
	float: none !important;
}

/* ═══════════════ §B3 — hero: photo legible, text on a scrim ═══════════ */
body.ccs-est1973 #main .masthead--innerpage__bg { opacity: 1 !important; }
body.ccs-est1973 #main .masthead--innerpage__bg img { opacity: .85 !important; }
body.ccs-est1973 #main .masthead--innerpage__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(36, 28, 20, .72), rgba(36, 28, 20, .45) 55%, rgba(36, 28, 20, .78));
}
body.ccs-est1973 #main .masthead--innerpage__wrapper { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 56px; }

/* ═══════════════ §B1 — container-relative grids ═══════════════ */
body.ccs-est1973 #main .image-buttons .row,
body.ccs-est1973 #main .image-buttons [class*="image-buttons__grid"] {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--e73-space-sm) !important;
}
body.ccs-est1973 #main .image-buttons [class*="col-"],
body.ccs-est1973 #main .tab-accordion [class*="col-"] {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	float: none !important;
	position: static !important;
}
body.ccs-est1973 #main .image-buttons .image-button { width: 100% !important; max-width: none !important; }

/* ═══════════════ §B4 — testimonial carousel containment ═══════════════ */
body.ccs-est1973 #main .testimonial-card,
body.ccs-est1973 #main [class*="testimonial-card"] {
	overflow: visible !important;
	max-height: none !important;
}
body.ccs-est1973 #main .testimonial-card p,
body.ccs-est1973 #main [class*="testimonial-card"] p {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
}
body.ccs-est1973 #main .slick-list { padding-left: 24px; padding-right: 24px; }

/* ═══════════════ §B5/§B6 — city-depth density + differentiation ═══════ */
body.ccs-est1973 #main .ccs-city-depth ul,
body.ccs-est1973 #main .ccs-city-service-intent ul {
	line-height: 1.45;
}
body.ccs-est1973 #main .ccs-city-depth li { margin-bottom: 5px !important; }
@media (min-width: 768px) {
	body.ccs-est1973 #main .ccs-city-depth ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 4px 26px;
	}
}
/* alternating surface so consecutive cards read as distinct */
body.ccs-est1973 #main > div.ccs-city-depth:nth-of-type(odd) > div,
body.ccs-est1973 #main .ccs-city-depth:nth-of-type(odd) {
	background: var(--e73-cream) !important;
	border: 1px solid var(--e73-line);
	border-radius: var(--e73-radius-lg);
}
body.ccs-est1973 #main .ccs-city-depth:nth-of-type(even) {
	background: var(--e73-porcelain) !important;
	border: 1px solid var(--e73-line);
	border-radius: var(--e73-radius-lg);
}

/* ═══════════════ §A — type, color, radii, buttons ═══════════════ */
body.ccs-est1973 #main h2 {
	font-family: var(--e73-font-slab) !important;
	font-size: var(--e73-fs-xl) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--e73-ink) !important;
}
body.ccs-est1973 #main .full-width-cta h2,
body.ccs-est1973 #main .ccs-emergency-hub h2 { color: var(--e73-porcelain) !important; }
body.ccs-est1973 #main h3:not(.image-button__title) {
	font-family: var(--e73-font-slab) !important;
	font-size: clamp(18px, 2vw, 22px) !important;
	font-weight: 700 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--e73-ink) !important;
}
body.ccs-est1973 #main p,
body.ccs-est1973 #main li,
body.ccs-est1973 #main [class^="ccs-"],
body.ccs-est1973 #main [class*=" ccs-"] {
	font-family: var(--e73-font-serif);
	font-size: var(--e73-fs-base);
	line-height: 1.55;
	color: var(--e73-body);
}
body.ccs-est1973 #main a { color: var(--e73-teal); }
body.ccs-est1973 #main a:hover { color: var(--e73-teal-2); }
body.ccs-est1973 #main .full-width-cta a { color: var(--e73-butter); }

/* ═══ Dark-band exceptions ═══════════════════════════════════════════════
   The three rules above carry #main id specificity, so they beat EVERY
   class-based rule in every other sheet — including each component's own
   dark-band styling. The result was body ink and teal links painted onto
   dark and teal grounds across the site: the combo h2 measured 1.06:1, the
   city hero subline 1.70:1, and the aside phone link 2.68:1. That text is
   invisible, not merely low-contrast.

   These exceptions must live HERE, at the same #main specificity and after
   those rules — an override in another sheet cannot reach them no matter how
   many classes it stacks. Porcelain is used throughout because it clears both
   grounds these bands use: on --e73-dark 16.11:1, on --e73-teal 6.11:1.
   Butter would not — it is only 3.45:1 on teal. ════════════════════════ */
body.ccs-est1973 #main .masthead--innerpage p,
body.ccs-est1973 #main .masthead--innerpage li,
body.ccs-est1973 #main .masthead--innerpage [class^="ccs-"],
body.ccs-est1973 #main .masthead--innerpage [class*=" ccs-"],
body.ccs-est1973 #main .bg-dark-blue p,
body.ccs-est1973 #main .bg-dark-blue li,
body.ccs-est1973 #main .bg-dark-blue h2,
body.ccs-est1973 #main .bg-dark-blue h3,
body.ccs-est1973 #main .bg-dark-blue [class^="ccs-"],
body.ccs-est1973 #main .full-width-cta p,
body.ccs-est1973 #main .full-width-cta h2,
body.ccs-est1973 #main .ccs-city-service__aside p,
body.ccs-est1973 #main .ccs-city-service__aside li,
body.ccs-est1973 #main .ccs-city-service__aside h2,
body.ccs-est1973 #main .ccs-city-service__aside h3,
body.ccs-est1973 #main .ccs-city-service section:nth-of-type(5) p,
body.ccs-est1973 #main .ccs-city-service section:nth-of-type(5) li,
body.ccs-est1973 #main .ccs-city-service section:nth-of-type(5) h2,
body.ccs-est1973 #main .ccs-virtual-guide__aside p,
body.ccs-est1973 #main .ccs-virtual-guide__aside li,
body.ccs-est1973 #main .ccs-virtual-guide__aside h2,
body.ccs-est1973 #main .ccs-virtual-guide__aside h3,
body.ccs-est1973 #main .ccs-equipment__aside p,
body.ccs-est1973 #main .ccs-equipment__aside li,
body.ccs-est1973 #main .ccs-captain p,
body.ccs-est1973 #main .ccs-captain h2,
body.ccs-est1973 #main .ccs-captain .ccs-captain__message,
body.ccs-est1973 #main .ccs-captain .ccs-captain__headline {
	color: var(--e73-porcelain);
}

/* Links in those bands inherited #main's teal, which is 2.64:1 on --e73-dark.
   Porcelain clears both grounds; the underline carries the affordance that the
   colour change would otherwise have to (DESIGN.md A5). --full-width-cta keeps
   its butter, which is 9.10:1 on the dark ground it always uses. */
body.ccs-est1973 #main .masthead--innerpage a,
body.ccs-est1973 #main .bg-dark-blue a,
body.ccs-est1973 #main .ccs-city-service__aside a:not([class*="__button"]),
body.ccs-est1973 #main .ccs-city-service section:nth-of-type(5) a:not([class*="__button"]),
body.ccs-est1973 #main .ccs-virtual-guide__aside a:not([class*="__button"]),
body.ccs-est1973 #main .ccs-equipment__aside a:not([class*="__button"]) {
	color: var(--e73-porcelain);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Breadcrumbs are a quiet trail, not body copy — kept legible but recessive. */
body.ccs-est1973 #main .masthead--innerpage .breadcrumbs a,
body.ccs-est1973 #main .masthead--innerpage .breadcrumbs li {
	color: var(--e73-porcelain);
	text-decoration: none;
}

/* buttons: one system — token rectangle; primary teal / secondary red / ghost */
body.ccs-est1973 #main a.btn,
body.ccs-est1973 #main button.btn,
body.ccs-est1973 #main a[class*="__btn"],
body.ccs-est1973 #main .ccs-answer-card__actions a,
body.ccs-est1973 #main .ccs-growth-links__actions a,
body.ccs-est1973 #main .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 12px 24px !important;
	border-radius: var(--e73-radius-sm) !important;
	font-family: var(--e73-font-slab) !important;
	font-size: var(--e73-fs-sm) !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	background: var(--e73-teal) !important;
	color: var(--e73-porcelain) !important;
	border: 0 !important;
	box-shadow: var(--e73-shadow-btn-teal) !important;
}
body.ccs-est1973 #main a.btn-secondary,
body.ccs-est1973 #main .full-width-cta a.btn,
body.ccs-est1973 #main .ccs-answer-card__actions a:first-child {
	background: var(--e73-red) !important;
	box-shadow: 0 6px 0 var(--e73-red-2) !important;
}
body.ccs-est1973 #main a.btn-tertiary,
body.ccs-est1973 #main .ccs-answer-card__actions a + a,
body.ccs-est1973 #main .ccs-growth-links__actions a + a {
	background: transparent !important;
	color: var(--e73-teal) !important;
	border: 2px solid currentColor !important;
	box-shadow: none !important;
}
body.ccs-est1973 #main .full-width-cta a.btn-tertiary { color: var(--e73-porcelain) !important; }

/* surfaces + radii to tokens */
body.ccs-est1973 #main .ccs-answer-card,
body.ccs-est1973 #main .ccs-seo-nap-grid,
body.ccs-est1973 #main .ccs-city-service-intent,
body.ccs-est1973 #main details {
	background: var(--e73-porcelain) !important;
	border: 1px solid var(--e73-line) !important;
	border-radius: var(--e73-radius-lg) !important;
	box-shadow: none !important;
}
body.ccs-est1973 #main [style*="border-radius"] { border-radius: var(--e73-radius-lg) !important; }

/* ═══════════════ §C — rhythm ═══════════════ */
body.ccs-est1973 #main > * { margin-bottom: 0 !important; }
body.ccs-est1973 #main > * + * { margin-top: var(--e73-space-lg) !important; }
body.ccs-est1973 #main > .masthead--innerpage + * { margin-top: var(--e73-space-md) !important; }
body.ccs-est1973 #main section.fx-block {
	padding-top: var(--e73-space-md) !important;
	padding-bottom: var(--e73-space-md) !important;
}
body.ccs-est1973 #main > section:has(.full-width-cta),
body.ccs-est1973 #main > .full-width-cta,
body.ccs-est1973 #main > .ccs-seo-content { margin-top: var(--e73-space-xl) !important; }

/* legacy animation initial states never resolve here either */
body.ccs-est1973 #main [class*="slide-left-animation"],
body.ccs-est1973 #main [class*="slide-up-animation"],
body.ccs-est1973 #main [class*="animation-item"] { transform: none !important; }

/* ═══════════════ §E — mobile ═══════════════ */
@media (max-width: 480px) {
	body.ccs-est1973 #main h2 { font-size: 22px !important; }
	body.ccs-est1973 #main > * + * { margin-top: var(--e73-space-sm) !important; }
	body.ccs-est1973 #main section.fx-block {
		padding-top: var(--e73-space-sm) !important;
		padding-bottom: var(--e73-space-sm) !important;
	}
	body.ccs-est1973 #main .ccs-answer-card,
	body.ccs-est1973 #main .ccs-city-depth { padding: 14px !important; }
	body.ccs-est1973 #main p { margin-bottom: 10px; }
	body.ccs-est1973 #main li { margin-bottom: 5px !important; }
}

/* §E round 2 — mobile height + carousel containment */
body.ccs-est1973 {
	overflow-x: clip !important;
	overflow-y: visible !important;
}
body.ccs-est1973 #main .fx-slider,
body.ccs-est1973 #main .slick-list { overflow: hidden !important; }

@media (max-width: 600px) {
	/* photo cards 2-up */
	body.ccs-est1973 #main .image-buttons .row,
	body.ccs-est1973 #main .image-buttons [class*="image-buttons__grid"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
	/* city-depth density */
	body.ccs-est1973 #main .ccs-city-depth,
	body.ccs-est1973 #main .ccs-city-service-intent { font-size: var(--e73-fs-sm) !important; }
	body.ccs-est1973 #main .ccs-city-depth li,
	body.ccs-est1973 #main .ccs-city-service-intent li {
		font-size: var(--e73-fs-sm) !important;
		line-height: 1.35 !important;
		margin-bottom: 3px !important;
	}
	body.ccs-est1973 #main .ccs-city-depth h3,
	body.ccs-est1973 #main .ccs-city-service-intent h3 { font-size: 15px !important; }
}
@media (max-width: 767px) {
	/* linkfolds: closed by default, still toggleable */
	body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold > ul { display: none; }
	body.ccs-est1973 #main .ccs-growth-links .ccs-linkfold[open] > ul { display: block; }
}

/* final round — radii + surface survivors (named owners) */
body.ccs-est1973 #main .image-text__img img.object-fit,
body.ccs-est1973 #main .image-text__pattern,
body.ccs-est1973 #main img.image-text__img__sml,
body.ccs-est1973 #main .fx-accordion--service-location__map,
body.ccs-est1973 #main [class*="__frame"] { border-radius: var(--e73-radius-lg) !important; }
body.ccs-est1973 #main .tab-accordion__panel__content { border-radius: var(--e73-radius-md) !important; background: var(--e73-porcelain) !important; }
body.ccs-est1973 #main .wpcm-zip__zipcode {
	border-radius: var(--e73-radius-sm) !important;
	background: var(--e73-porcelain) !important;
	border: 1.5px solid var(--e73-line) !important;
}
body.ccs-est1973 #main .wpcm-zip__submit,
body.ccs-est1973 #main .ccs-readmore {
	background: var(--e73-butter) !important;
	color: var(--e73-ink) !important;
	border: 0 !important;
	border-radius: var(--e73-radius-sm) !important;
	font-family: var(--e73-font-slab) !important;
	font-weight: 700 !important;
}
body.ccs-est1973 #main .ccs-local-map__frame { background: var(--e73-porcelain) !important; border: 1px solid var(--e73-line) !important; }
body.ccs-est1973 #main .tab-accordion__tab,
body.ccs-est1973 #main .tab-accordion__panel__toggle {
	background: var(--e73-porcelain) !important;
	color: var(--e73-ink) !important;
	font-family: var(--e73-font-slab) !important;
	border: 1px solid var(--e73-line) !important;
	border-radius: var(--e73-radius-sm) !important;
}
body.ccs-est1973 #main .tab-accordion__tab.is-active,
body.ccs-est1973 #main .tab-accordion__panel.is-expanded .tab-accordion__panel__toggle {
	background: var(--e73-teal) !important;
	color: var(--e73-porcelain) !important;
	border-color: var(--e73-teal) !important;
}
body.ccs-est1973 #main .ccs-city-depth > div,
body.ccs-est1973 #main div[style*="background"] { background: transparent !important; }

/* on-dark headings inside dark bands + tokenized controls */
body.ccs-est1973 #main .bg-dark h2,
body.ccs-est1973 #main .bg-dark-blue h2,
body.ccs-est1973 #main section[class*="testimonial"] h2,
body.ccs-est1973 #main .fx-block.bg-dark .sub-heading,
body.ccs-est1973 #main section[class*="testimonial"] .sub-heading { color: var(--e73-porcelain) !important; }
body.ccs-est1973 #main .slick-arrow,
body.ccs-est1973 #main button[class*="arrow"] {
	background: var(--e73-teal) !important;
	color: var(--e73-porcelain) !important;
	border: 0 !important;
}
body.ccs-est1973 #main .tab-accordion__panel__toggle i,
body.ccs-est1973 #main .tab-accordion__panel__toggle [class*="icon"],
body.ccs-est1973 #main .fx-accordion__panel__toggle i {
	background: var(--e73-teal) !important;
	color: var(--e73-porcelain) !important;
}

/* the shared default masthead hides __bg; the city treatment keeps its
   photo (brief #2 §B3) — restore display here, opacity/scrim above. */
body.ccs-est1973 #main .masthead--innerpage__bg { display: block !important; }
body.ccs-est1973 #main .masthead--innerpage { background: var(--e73-dark, #241C14) !important; }
body.ccs-est1973 #main .masthead--innerpage::before { content: none !important; }

/* ═══ City-family parity pass (visual audit 2026-08-17) ═══ */

/* The porcelain image-text card kept white copy from the legacy dark band —
   invisible (1:1) on the service-areas index. Pair the ground with body ink. */
body.ccs-est1973 .fx-block.image-text .image-text__text {
	color: var(--e73-body);
}

body.ccs-est1973 .fx-block.image-text .image-text__text h2,
body.ccs-est1973 .fx-block.image-text .image-text__text h3 {
	color: var(--e73-ink);
}

/* T2 floor for the tile titles and growth card summaries that shipped at
   14–15px (mobile growth blocks drop to 15px). */
body.ccs-est1973 .image-button__title,
body.ccs-est1973 .ccs-growth-links__grid summary h3,
body.ccs-est1973 .footer-seo-services h3 {
	font-size: var(--e73-fs-base) !important;
	line-height: 1.3;
}

@media (max-width: 767px) {
	body.ccs-est1973 .ccs-growth-links__grid summary h3,
	body.ccs-est1973 .ccs-city-depth h3,
	body.ccs-est1973 .image-button__title {
		font-size: 16.5px !important;
	}
}

/* The 600px tier above wins on ID specificity — repeat the h3 floor at the
   same tier so growth summaries and depth headings hold T2 there too. */
@media (max-width: 600px) {
	body.ccs-est1973 #main .ccs-growth-links__grid summary h3,
	body.ccs-est1973 #main .ccs-city-depth h3,
	body.ccs-est1973 #main .ccs-city-service-intent h3 {
		font-size: 16.5px !important;
	}
}

/* Two-line tab labels clipped against legacy per-tab fixed heights. */
body.ccs-est1973 .tab-accordion__tabs .tab-accordion__tab {
	height: auto !important;
	min-height: 46px;
	padding-block: 12px;
	line-height: 1.3 !important;
}