/**
 * Est. 1973 section-flow system.
 *
 * This layer owns the visual handoff between full-width content blocks. It
 * deliberately uses no layout, generated markup, animation, or wavy SVGs:
 * joins are made with token shadows and background washes so first paint and
 * settled paint remain identical.
 */

/* Legacy FX blocks used literal top/bottom rules as separators. Full-width
   page sections now rely on tone and spacing; borders inside cards, tickets,
   accordions, and form controls remain untouched. */
body.ccs-est1973 .fx-block:not(.masthead) {
	border-top-width: 0 !important;
	border-bottom-width: 0 !important;
}

/* Dark and dominant-color sections receive a shallow porcelain reflection at
   each edge. It softens the color change without introducing a divider. */
body.ccs-est1973 :is(
	.fx-block.full-width-cta,
	.fx-block.bg-dark-blue,
	.testimonials.e73-wall,
	.ccs-repair-launch,
	.ccs-emergency-hub,
	.ccs-calc__cta,
	.half-form-text--contact,
	.footer-seo-services
) {
	box-shadow: var(--e73-shadow-flow-on-dark) !important;
}

/* Major full-width dark beats need a true color handoff, not only a shadow.
   The wash starts on the page ground and becomes transparent into whatever
   dominant/dark background that component already owns. */
body.ccs-est1973 :is(
	.fx-block.full-width-cta,
	.fx-block.bg-dark-blue,
	.ccs-calc__cta,
	.half-form-text--contact,
	.footer-seo-services
) {
	background-image: linear-gradient(
		to bottom,
		var(--e73-porcelain) 0,
		transparent var(--e73-flow-depth)
	) !important;
}

/* Full-width CTA artwork is painted by child/pseudo layers, so a background
   gradient on the section alone can sit behind the artwork and disappear.
   This foreground veil keeps the incoming page tone visible while the CTA
   content stays above it. */
body.ccs-est1973 .fx-block.full-width-cta {
	position: relative;
}

body.ccs-est1973 .fx-block.full-width-cta::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: var(--e73-flow-depth);
	background: linear-gradient(to bottom, var(--e73-porcelain) 0, transparent 100%);
	pointer-events: none;
	/* The CTA's content wrapper owns an opaque dark background, so the wash
	   must paint above that wrapper. Its content begins below this shallow
	   decorative veil. */
	z-index: 3;
}

body.ccs-est1973 .fx-block.full-width-cta > .full-width-cta__content {
	position: relative;
	z-index: 2;
}

body.ccs-est1973.home .testimonials.e73-wall {
	background-image: linear-gradient(
		to bottom,
		var(--e73-cream) 0,
		transparent var(--e73-flow-depth)
	) !important;
}

body.ccs-est1973 .footer-seo-services {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

/* When a normal FX section follows a dark beat, carry a trace of the dark
   tone into the next surface instead of cutting straight to cream. */
body.ccs-est1973 :is(
	.fx-block.full-width-cta,
	.fx-block.bg-dark-blue,
	.testimonials.e73-wall,
	.ccs-repair-launch,
	.ccs-emergency-hub,
	.ccs-calc__cta,
	.half-form-text--contact
) + .fx-block:not(.masthead) {
	box-shadow: var(--e73-shadow-flow-after-dark) !important;
}

/* Homepage: porcelain intro -> cream coupon. */
body.ccs-est1973.home .half-image-text-icon-pullouts {
	border-bottom: 0 !important;
}

body.ccs-est1973.home .promo-cta {
	background-color: var(--e73-cream) !important;
	background-image: linear-gradient(
		to bottom,
		var(--e73-porcelain) 0,
		var(--e73-cream) var(--e73-flow-depth)
	) !important;
	/* A legacy full-section elevation cast a 62px horizontal shadow over the
	   following block. The coupon card keeps its own lifted shadow. */
	box-shadow: none !important;
}

/* The service-board dots previously began and ended on a hard horizontal
   pixel. Two cream veils let the texture emerge and recede gradually. */
body.ccs-est1973.home .half-image-half-accordian-links {
	background-color: var(--e73-cream) !important;
	background-image:
		linear-gradient(to bottom, var(--e73-cream) 0, transparent var(--e73-flow-depth)),
		linear-gradient(to top, var(--e73-cream) 0, transparent var(--e73-flow-depth)),
		radial-gradient(rgba(43, 29, 18, .07) 1.2px, transparent 1.3px) !important;
	background-size: 100% 100%, 100% 100%, 22px 22px !important;
	background-position: 0 0, 0 0, 0 0 !important;
}

body.ccs-est1973.home .testimonials.e73-wall {
	border-top: 0 !important;
}

/* Proof -> lead form -> captain CTA. These are three distinct beats, but the
   page ground now travels through them as a soft print wash rather than a
   pair of double rules. */
body.ccs-est1973.home .ccs-lead {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: var(--e73-shadow-flow-soft) !important;
}

body.ccs-est1973.home .floating-cta {
	background-color: var(--e73-porcelain) !important;
	background-image: linear-gradient(
		to bottom,
		var(--e73-paper) 0,
		var(--e73-porcelain) var(--e73-flow-depth)
	) !important;
}

body.ccs-est1973.home .floating-cta::after {
	background-color: var(--e73-cream) !important;
}

body.ccs-est1973.home .fx-accordion--service-location {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: var(--e73-shadow-flow-soft) !important;
}

/* Blog index: the pale-blue legacy hub was the only cool full-width band in
   the Est. 1973 flow. Return it to porcelain and soften both edges. */
body.ccs-est1973 section.ccs-post-paths {
	background: var(--e73-porcelain) !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: var(--e73-shadow-flow-soft) !important;
}

/* Major content systems use bordered cards internally. Their outer wrappers
   stay borderless so a sequence of cards does not become a stack of rules. */
body.ccs-est1973 :is(
	.ccs-city-service,
	.ccs-equipment,
	.ccs-calc,
	.ccs-cityhub,
	.ccs-offers-hub,
	.ccs-offer
) > :is(header, footer) {
	border-top-width: 0 !important;
	border-bottom-width: 0 !important;
}

@media (max-width: 767px) {
	body.ccs-est1973 {
		--e73-flow-depth: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ccs-est1973 .fx-block:not(.masthead),
	body.ccs-est1973 .half-image-half-accordian-links {
		transition: none !important;
	}
}