/*
Theme Name: Legacy Flat Roofing
Theme URI: https://legacyroofs.com
Template: cecile
Author: Cecile Marketing
Author URI: https://cecile.co
Description: Client child theme for Legacy Flat Roofing & Sheet Metal. "Bold Field" industrial skin (black/red, condensed Oswald) over the Cecile foundation. Brand lives in theme.json tokens; sections come from the Cecile Blocks plugin.
Requires at least: 6.6
Requires PHP: 7.4
Version: 1.11.41
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cecile-legacy
*/

/* Utility bar (red strip above the nav). Heading font (Oswald), not body:
   the mobile-overlay clone doesn't carry the .legacy-utilbar class (it only
   clones .legacy-utilbar__contacts), so it was inheriting Oswald from the
   nav's own typography instead — inconsistently (phone's <strong> got it,
   plain email text didn't). Setting it explicitly here and on the clone
   below makes both always Oswald, matching in every state. */
.legacy-utilbar { font-family: var(--wp--preset--font-family--heading); }
.legacy-utilbar a { color: #fff; text-decoration: none; }
.legacy-utilbar a:hover { text-decoration: underline; }
.legacy-utilbar__contacts { gap: 26px; }
.legacy-utilbar__phone,
.legacy-utilbar__email { margin: 0; }
/* Phone is wrapped in <strong> (bold); email wasn't, and was also dimmed
   to 85% opacity — read as a visibly weaker weight next to CALL. Client
   wants them to match. */
.legacy-utilbar__email { font-weight: 700; }
/* Uppercase + wider tracking, same treatment the mobile banner already
   had (previously mobile-only, see the 900px media query below) — client
   wants desktop to match. Phone is already literal caps; set it
   explicitly so it doesn't rely on that. */
.legacy-utilbar__phone, .legacy-utilbar__email { text-transform: uppercase; letter-spacing: 0.06em; }

/* Logo lockup — one link home, wordmark over a left-aligned two-line tag,
   matching the footer's lockup. */
.legacy-logo { margin: 0; text-align: left; }
.legacy-logo a { display: inline-block; text-decoration: none; }
.legacy-logo__mark {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: 0.04em; color: #fff; margin: 0;
}
/* Tracking is tuned so each tag line runs roughly the width of LEGACY. */
.legacy-logo__tag {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 12px; line-height: 1.35; letter-spacing: 0.52em; text-transform: uppercase;
	color: var(--wp--preset--color--primary); margin: 3px 0 0;
}

/* Service archive cards. */
.legacy-service-card { background: #fff; border: 1px solid var(--wp--preset--color--border); }

/* ============================================================
   "Bold Field" polish — square edges + hero/stats to match the design.
   ============================================================ */

/* Square corners: the foundation rounds blocks; this brand doesn't. */
.cecile-hero,
.cecile-stats,
.cecile-quote,
.cecile-cta,
.cecile-steps,
.cecile-features__card,
.cecile-testimonials__card,
.cecile-mediatext__media img,
.cecile-features__icon { border-radius: 0 !important; }

/* Hero: taller and image-forward, text anchored to the bottom. */
.cecile-hero { min-height: 620px; align-items: flex-end; }

/* Hero eyebrow as a filled red chip (design uses a red tag, not gold text). */
.cecile-hero__eyebrow {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: #fff !important;
	padding: 7px 14px;
	letter-spacing: 0.16em;
}
.cecile-hero__eyebrow::before,
.cecile-hero__eyebrow::after { content: none !important; }

/* Stats strip: hairline dividers between the numbers. */
.cecile-stats__row { gap: 0; }
.cecile-stats__stat {
	padding-inline: clamp(1.5rem, 4vw, 3rem);
	border-right: 1px solid #2b2b2b;
}
.cecile-stats__stat:last-child { border-right: 0; }

/* ============================================================
   True full-bleed sections — make full-width blocks span the whole
   viewport even when the page's content container caps their width.
   ============================================================ */
.cecile-hero.alignfull,
.cecile-stats.alignfull,
.cecile-quote.alignfull,
.cecile-cta.alignfull,
.cecile-steps.alignfull,
.wp-block-group.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Prevent any horizontal scrollbar introduced by viewport-width sections. */
html,
body { overflow-x: clip; }

/* iOS paints a grey flash over tapped links/buttons/summaries — off. */
* { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   Flush stacking + stats styling to match the design.
   ============================================================ */

/* No gap between the header and the first section... */
.wp-site-blocks > main { margin-block-start: 0 !important; }
.home main { padding-top: 0 !important; }

/* ...none between the last section and the footer... */
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0 !important;
}
.wp-site-blocks > main { margin-block-end: 0 !important; padding-bottom: 0 !important; }

/* ...and no gaps between stacked full-bleed sections. */
.cecile-hero.alignfull,
.cecile-stats.alignfull,
.cecile-quote.alignfull,
.cecile-cta.alignfull,
.cecile-steps.alignfull,
.wp-block-group.alignfull {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Stats: red numbers, taller strip like the design. */
.cecile-stats__value { color: var(--wp--preset--color--primary) !important; }
.cecile-stats { padding-block: var(--wp--preset--spacing--50, 2.5rem); }

/* ============================================================
   Hero type locked to the design spec (fixed, not fluid).
   ============================================================ */
.cecile-hero__inner { max-width: 900px; }
.cecile-hero__eyebrow { font-size: 13px; }
.cecile-hero__heading {
	font-size: 76px;
	line-height: 0.98;
	letter-spacing: 0.005em;
}
.cecile-hero__subheading {
	font-size: 20px;
	line-height: 1.55;
	max-width: 600px;
}
@media (max-width: 900px) {
	.cecile-hero__heading { font-size: 12vw; }
	.cecile-hero__subheading { font-size: 18px; }
}

/* ============================================================
   HOMEPAGE — pinned to the Claude Design "Bold Field" mockup.
   Values taken directly from legacy-homepage.html.
   ============================================================ */

/* Shared 1280px content column (the design's .wrap). */
.cecile-hero__inner,
.cecile-stats__row,
.cecile-quote__inner { max-width: 1280px; margin-inline: auto; }

/* ---------- Hero ---------- */
.cecile-hero { min-height: 600px; padding: 0 !important; align-items: flex-end; }
.cecile-hero__inner { padding: 0 64px 56px; box-sizing: border-box; }
/* The plugin zeroes the inline margin on left-layout heroes; re-centre the 1280 wrap. */
.cecile-hero--left .cecile-hero__inner { margin-inline: auto; }
.cecile-hero.has-background-image .cecile-hero__overlay {
	opacity: 1 !important;
	background: linear-gradient(180deg, rgba(17,17,17,.5) 0%, rgba(17,17,17,.25) 40%, rgba(17,17,17,.92) 100%) !important;
}
.cecile-hero__eyebrow { font-size: 13px; letter-spacing: .18em; padding: 7px 14px; margin-bottom: 20px; }
/* 700px wraps the H1 after "ownership" like the mockup, even on content without the <br>. */
.cecile-hero__heading { font-size: 76px; line-height: .98; letter-spacing: .005em; margin-bottom: 18px; max-width: 700px; }
.cecile-hero__subheading { font-size: 20px; line-height: 1.55; color: #d8d5cf; max-width: 600px; margin-bottom: 30px; }
.cecile-hero__actions { gap: 16px; align-items: center; margin-top: 0; }
.cecile-hero__btn--primary { font-size: 16px; padding: 17px 34px; text-transform: uppercase; letter-spacing: .06em; }
.cecile-hero__btn--ghost { border: 0; background: transparent; padding: 17px 4px; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; }
/* Scoped to out-specific the plugin's .is-tone-dark ghost hover (which assumes a filled hover we disable). */
.cecile-hero .cecile-hero__btn--ghost:hover { background: transparent; transform: none; color: var(--wp--preset--color--primary); text-decoration: none; }

/* ---------- Stats strip ---------- */
.cecile-stats { background: #1a1a1a !important; padding: 0 !important; }
.cecile-stats__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.cecile-stats__stat { padding: 34px 40px; border-right: 1px solid #2b2b2b; }
.cecile-stats__stat:last-child { border-right: 0; }
.cecile-stats__value { font-size: 40px !important; color: #E01B22 !important; line-height: 1; }
.cecile-stats__label { font-size: 13px; letter-spacing: .1em; color: #9c988f; margin-top: 8px; }

/* ---------- Services grid (homepage only) ---------- */
.home .cecile-features { background: #f4f2ee; padding: 76px 0 !important; }
.home .cecile-features__header { margin-bottom: 48px; max-width: 1280px; }
.home .cecile-features__eyebrow { font-size: 14px; letter-spacing: .22em; color: #E01B22; margin-bottom: 12px; }
.home .cecile-features__heading { font-size: 46px; letter-spacing: .01em; color: #111; }
.home .cecile-features__grid {
	max-width: 1152px; margin-inline: auto;
	grid-template-columns: repeat(4, 1fr);
	/* 1px gap over the border-colour background = inner lines that match
	   the 1px outer border. */
	gap: 1px; background: #dcd8d1; border: 1px solid #dcd8d1;
	counter-reset: svc;
}
.home .cecile-features__card {
	border: 0 !important; background: #fff; padding: 34px 30px; gap: 0;
	counter-increment: svc;
}
.home .cecile-features__card::before {
	content: "0" counter(svc);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 15px; color: #E01B22; display: block; margin-bottom: 8px;
}
.home .cecile-features__card-title { font-size: 22px; margin: 8px 0 12px; color: #111; transition: color .15s ease; }
.home .cecile-features__card-title a { color: inherit; text-decoration: none; }

/* The whole card is the click target (stretched link) with a quiet hover. */
.home .cecile-features__card { position: relative; transition: background-color .15s ease; }
.home .cecile-features__card-title a::after {
	content: ""; position: absolute; inset: 0;
}
.home .cecile-features__card:hover { background: #f7f5f0; }
.home .cecile-features__card:hover .cecile-features__card-title { color: var(--wp--preset--color--primary); }
.home .cecile-features__card-text { font-size: 15px; line-height: 1.6; color: #6f6a62; }

/* ---------- Quote split ---------- */
.cecile-quote { background: #111 !important; }
.cecile-quote__inner { grid-template-columns: 1fr 1fr; }
.cecile-quote__intro { padding: 68px 64px; }
.cecile-quote__eyebrow { font-size: 14px; letter-spacing: .22em; color: #E01B22 !important; }
/* 340px wraps the heading after "free" like the mockup, even on content without the <br>. */
.cecile-quote__heading { font-size: 52px; line-height: .98; max-width: 340px; }
.cecile-quote__text { font-size: 18px; color: #b4b0a8; max-width: 420px; }
.cecile-quote__phone-num { font-size: 30px; }
.cecile-quote__phone-sub { font-size: 14px; color: #7c7870; }
.cecile-quote__form { background: #E01B22; padding: 56px 64px; }

/* ---------- Service-area band ---------- */
.legacy-servicearea { background: #1a1a1a !important; padding: 48px 0 !important; }
.legacy-servicearea > * { max-width: 1280px; margin-inline: auto; padding-inline: 64px; }
.legacy-servicearea h2 { font-size: 14px !important; letter-spacing: .16em; color: #fff; margin: 0 0 14px; }
.legacy-servicearea p { font-size: 14px !important; line-height: 1.9; color: #8a857c !important; }

/* ---------- Responsive (matches the design's 900px breakpoint) ---------- */
@media (max-width: 900px) {
	.cecile-hero__heading { font-size: 44px; }
	.cecile-hero__inner { padding: 0 24px 40px; }
	.cecile-stats__row,
	.home .cecile-features__grid,
	.cecile-quote__inner { grid-template-columns: 1fr; }
	.cecile-stats__stat { border-right: 0; border-bottom: 1px solid #2b2b2b; }
	.cecile-quote__intro, .cecile-quote__form { padding: 40px 24px; }
	.legacy-servicearea > * { padding-inline: 24px; }
	/* Stacked service cards read airy at desktop spacing — tighten. */
	.home .cecile-features { padding: 48px 0 !important; }
	.home .cecile-features__header { margin-bottom: 28px; }
	.home .cecile-features__card { padding: 20px 24px; }
	.home .cecile-features__card::before { margin-bottom: 4px; }
	.home .cecile-features__card-title { margin: 4px 0 8px; }
}

/* ---------- Header / utility bar (pinned to mockup) ---------- */
/* Kill the theme's default group padding — the bars set their own on the inner wrap. */
.wp-block-group.legacy-utilbar,
.wp-block-group.legacy-nav { padding: 0; }
/* Every hero uses position:relative (for its overlay), which makes it a
   positioned element — positioned elements always paint above static ones
   regardless of source order. Without this, the Services dropdown's lower
   rows fall into the header/hero overlap and the hero silently eats the
   click. Elevate the whole header so its dropdown always wins. */
.legacy-nav { position: relative; z-index: 20; }
/* The design's 1280 wrap, centred (the constrained layout offsets it otherwise). */
.legacy-utilbar > .wp-block-group,
.legacy-nav > .wp-block-group { max-width: 1280px; margin-inline: auto !important; box-sizing: border-box; }
.legacy-utilbar > .wp-block-group { padding: 9px 40px; letter-spacing: .03em; }
.legacy-utilbar,
.legacy-utilbar.has-sm-font-size { font-size: 13px !important; }
.legacy-utilbar__left strong { font-family: var(--wp--preset--font-family--heading); font-weight: 600; letter-spacing: .05em; }
.legacy-utilbar__rating { display: inline-flex; align-items: center; gap: 8px; }
.legacy-utilbar__muted { opacity: .85; }
.legacy-gbadge {
	background: #fff; color: #E01B22; font-weight: 700;
	border-radius: 50%; width: 18px; height: 18px;
	display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.legacy-nav > .wp-block-group { padding: 20px 40px; }
.legacy-logo__mark { font-size: 30px !important; letter-spacing: .12em; }
.legacy-logo__tag { font-size: 12px !important; letter-spacing: .52em; margin-top: 3px !important; }
.legacy-nav .wp-block-navigation { font-size: 15px; }
/* Free Quote button at the mockup's size (theme default is much chunkier). */
.legacy-nav .wp-block-button__link { padding: 11px 22px; font-size: 15px; letter-spacing: .08em; }
/* Oswald nav links like the mockup (the preset colour class carries !important). */
.legacy-nav .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	color: #e6e3dd !important;
	text-decoration: none !important;
}
.legacy-nav .wp-block-navigation a[aria-current="page"],
.legacy-nav .wp-block-navigation .current-menu-item > a {
	color: #fff !important;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 3px;
}

/* ---------- Header dropdowns (the Services tree) ----------
   Big-panel treatment: wide, tall rows divided by hairlines. */
.legacy-nav .wp-block-navigation__submenu-container {
	background: #111 !important;
	border: 1px solid #2b2b2b !important;
	border-radius: 0 !important;
	min-width: 340px;
	padding: 0;
}
.legacy-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #e6e3dd !important;
	font-size: 15px;
	letter-spacing: .07em;
	padding: 21px 26px;
}
.legacy-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #fff !important;
	background: #1a1a1a;
}
@media (min-width: 601px) {
	.legacy-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(:last-child) {
		border-bottom: 1px solid #232323;
	}
}
/* Inside dropdowns the current page reads red, not underlined. */
.legacy-nav .wp-block-navigation__submenu-container a[aria-current="page"] {
	color: var(--wp--preset--color--primary) !important;
	border-bottom: 0;
	padding-bottom: 21px;
}
.legacy-nav .wp-block-navigation__submenu-icon { color: currentColor; }

/* Open direction: right-anchor the first panel under Services, then let
   every nested flyout open to the RIGHT of its parent (core flips them
   left on right-justified navs, which reads backwards). */
.legacy-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	left: auto;
	right: 0;
	/* Core's default top:100% sits the panel flush against the nav row —
	   too tight a gap. Nested flyouts (below) open to the side, not
	   below, so their own top:-1px is untouched by this. */
	margin-top: 10px;
}
/* The 10px gap above is empty space outside the li's own box — moving the
   mouse straight down through it crosses over whatever's behind the nav
   (not a descendant of the li), which fires pointerleave and closes the
   menu before you reach it. This invisible pseudo-element bridges that gap
   as generated content on the li itself, so hovering through it still
   reads as "inside" the trigger and the panel stays open. */
.legacy-nav .wp-block-navigation__container > .has-child::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 340px;
	height: 10px;
}
.legacy-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	left: 100% !important;
	right: auto !important;
	top: -1px;
}

/* ---------- Mobile: utility bar + nav overlay ---------- */
@media (max-width: 900px) {
	/* Utility bar: phone left, email right, no rating, a size up. */
	.legacy-utilbar__rating { display: none; }
	.legacy-utilbar,
	.legacy-utilbar.has-sm-font-size { font-size: 13px !important; }
	.legacy-utilbar > .wp-block-group { padding: 12px 24px; }
	/* A tighter column-gap than the 26px desktop default buys back the
	   handful of px the uppercase + wider letter-spacing (global, above)
	   cost — without it, CALL + info@ clip by well under a pixel at
	   375px. (Tried adding
	   flex-wrap as a narrower-device safety net, but wrap + space-between
	   triggered unconditionally regardless of whether content fit, so it's
	   nowrap — confirmed a ~10px margin at 375px, the narrowest common
	   width.) */
	.legacy-utilbar__contacts { width: 100%; justify-content: space-between; column-gap: 16px; }
	.legacy-utilbar__phone a, .legacy-utilbar__email a { white-space: nowrap; }
	.legacy-nav > .wp-block-group { padding: 16px 24px; }

	/* Smaller lockup on phones. */
	.legacy-logo__mark { font-size: 24px !important; }
	.legacy-logo__tag { font-size: 9.5px !important; letter-spacing: .5em; }

	/* Hamburger sits at the far right, after the Free Quote button. */
	.legacy-nav > .wp-block-group > .wp-block-group > .wp-block-navigation { order: 2; }
	.legacy-nav > .wp-block-group > .wp-block-group > .wp-block-buttons { order: 1; }
}

/* The hamburger + close controls. */
.legacy-nav .wp-block-navigation__responsive-container-open { color: #fff; }
.legacy-nav .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
/* The X lands exactly where the hamburger sits — a toggle in place.
   (The dialog wrapper is position:relative and inset by the overlay
   padding; neutralise it so the offsets are viewport-true.) top:75.65px
   measured to match the real hamburger's rendered position exactly
   (getBoundingClientRect diff: 0px). */
.legacy-nav .is-menu-open .wp-block-navigation__responsive-dialog { position: static !important; }
.legacy-nav .wp-block-navigation__responsive-container-close {
	position: absolute; top: 75.65px; right: 24px; color: #fff;
	width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
	padding: 0; margin: 0;
}
.legacy-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* "All …" links exist for the mobile accordion; the desktop dropdowns
   already link the category labels themselves. */
@media (min-width: 600px) {
	.legacy-nav .legacy-nav-all { display: none !important; }
}

/* Open overlay: dark, left-aligned, roomy — a proper menu, not a popup.
   Structure mirrors the page header: logo row, then items. */
.legacy-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #111 !important;
	/* No top padding: the cloned utility bar sits flush against the top
	   of the screen, matching the real header. Bottom padding still
	   gives the link list room to breathe. */
	padding: 0 0 32px;
	/* Core slides the overlay in from 7.5px below — under the cloned logo
	   that transient reads as the header logo jumping. Open in place. */
	animation: none !important;
}
/* Overlay chrome (injected by assets/nav.js) — hidden outside the overlay.
   Two cloned rows mirror the real header so it doesn't vanish behind the
   full-screen takeover: utility bar (call/email), then logo + Free Quote.
   Top padding on the head row tuned so the logo clone sits exactly over
   the header logo; the close-X's own top offset (above) accounts for the
   utility row's height sitting above it now. */
.legacy-ovutil { display: none; }
.is-menu-open .legacy-ovutil { display: block; background: var(--wp--preset--color--primary); }
.legacy-ovutil .legacy-utilbar__contacts {
	display: flex; justify-content: space-between; align-items: center;
	/* 12px matches the real utility bar's own padding exactly — was 11px,
	   a stray 1px/side that made this bar ~2px shorter than the real one. */
	padding: 12px 24px; font-size: 13px;
	font-family: var(--wp--preset--font-family--heading);
}
.legacy-ovutil .legacy-utilbar__phone,
.legacy-ovutil .legacy-utilbar__email { margin: 0; }
/* !important + the extra .is-menu-open/.legacy-nav ancestors: this clone's
   <a> tags sit inside .wp-block-navigation's DOM subtree, so
   ".legacy-nav .wp-block-navigation a { color:#e6e3dd !important }" (written
   for real nav links) was catching them too, tinting off-white instead of
   pure white. Needs to out-rank that rule's specificity, not just its own
   !important. */
.legacy-nav .is-menu-open .legacy-ovutil a { color: #fff !important; font-weight: 700 !important; }

.legacy-ovhead { display: none; }
/* Padding measured to match the real header's logo/Free Quote row
   exactly (getBoundingClientRect diffs: button top/left/right/width all
   0px). Right reserves the same 70px (24px edge + 30px hamburger + 16px
   gap) the real row spends on its nav toggle, so the button lands at the
   same right edge; top is asymmetric (18.89 vs 16 bottom) because this
   row's own content (just logo + button) is shorter than the real row's,
   which also centers against its hidden nav-toggle sibling. (18.89, not
   20.89: re-tuned after fixing the utility bar's height above it, which
   had been pushing this row 2px further down than the real header.) */
.is-menu-open .legacy-ovhead {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18.89px 70px 16px 24px;
}
.is-menu-open .legacy-ovhead a { display: inline-block; text-decoration: none; }
.is-menu-open .legacy-ovhead .wp-block-buttons { flex: 0 0 auto; }
/* The cloned logo still centers ~2.88px lower than the real one despite
   matching row height/padding — likely a flex cross-axis quirk specific
   to this item (unclear exactly why; verified in isolation that this
   offset doesn't perturb the Free Quote button's own already-exact
   position). position:relative is a pure paint-time offset, so it can
   correct this without affecting the row's layout/sizing for its sibling.
   text-align:left here (not the a-wide rule above) so it only affects
   the logo, matching the closed header's now-left-aligned lockup —
   the button next door centers its own label via flex, not text-align. */
.is-menu-open .legacy-ovhead > a { position: relative; top: -2.88px; text-align: left; }
/* The clone sits inside .wp-block-navigation's DOM subtree (it's part of
   the overlay), so ".legacy-nav .wp-block-navigation a { font-weight:500 }"
   — meant only for real nav links — was matching this button's <a> too,
   rendering it ~1.76px narrower than the real one (600 vs 500, measured
   via getBoundingClientRect). Restore the real button's weight. */
.is-menu-open .legacy-ovhead .wp-block-button__link { font-weight: 600; color: #fff !important; }
/* Real iPhone Safari renders this clone slightly lower than the real
   button despite matching computed geometry (getBoundingClientRect
   diffs 0px in desktop tooling) — a device-pixel rounding artifact,
   same category as the logo's -2.88px correction above. A full -1px
   overshot the gap by 1px the other way, so the true device-pixel
   delta is under 1 CSS px; split the difference. position:relative is
   paint-time only, so it can't perturb the row's layout. */
.is-menu-open .legacy-ovhead .wp-block-button__link { position: relative; top: -0.5px; }
.legacy-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	width: 100%;
	overflow-y: auto;
}
.legacy-nav .is-menu-open .wp-block-navigation__container {
	flex-direction: column; align-items: flex-start !important;
	justify-content: flex-start !important;
	width: 100%; gap: 0;
	text-align: left;
	padding: 0 24px; box-sizing: border-box;
}
.legacy-nav .is-menu-open .wp-block-navigation-item {
	width: 100% !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
}
/* Flex at every level so the chevron ::after can auto-margin to the right
   edge and centre itself (top-level links are block by default; submenu
   links are already flex via core). */
.legacy-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex; align-items: center; width: 100%; text-align: left;
}
.legacy-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	padding: 6px 0;
}
.legacy-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 20px; padding: 12px 0; letter-spacing: .1em;
	color: #fff !important;
}
/* Submenus flatten into indented lists — no desktop panel chrome. */
.legacy-nav .is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	left: auto !important; right: auto !important; top: auto !important;
	width: 100% !important; min-width: 0;
	align-items: flex-start !important; justify-content: flex-start !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	padding: 0 0 4px 18px; margin: 0;
	visibility: visible; opacity: 1; height: auto; overflow: visible;
}
.legacy-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0; padding: 0;
}
/* Core indents submenu links by 1em — kill it so every level shares the
   same 24px text line (the containers carry the inset). */
.legacy-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block; width: 100%;
	font-size: 17px; letter-spacing: .08em;
	color: #fff !important; padding: 9px 0 !important;
}
/* Category rows inside Services read as section headers — with or
   without children (Metal Roofing has no sub-pages but is a peer). */
.legacy-nav .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 18px; padding: 10px 0 9px !important;
}
.legacy-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	padding: 6px 12px !important;
}
/* The label itself is the toggle (assets/nav.js) — chevrons are noise. */
.legacy-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }

/* Accordion: sub-lists stay rendered but collapsed (height 0) so opening
   can animate; assets/nav.js slides height + opacity via the Web
   Animations API (height can't CSS-transition to auto). The visibility
   transition just delays the hidden flip until the collapse finishes;
   hidden keeps collapsed links out of the tab order. */
/* Specificity note: core forces height:auto/opacity:1/visibility:visible on
   overlay submenus at (0,5,0); the doubled .has-child outranks it at (0,6,0).
   :not(.is-open) keeps this rule off open panels (it would also outrank the
   open rule below). :not(.is-closing) keeps it off collapsing panels — they
   hold the open-state geometry (bleed margins/width/padding) until the slide
   finishes, else the panel snaps 24px rightward at collapse start. No
   !important on height/opacity — important beats WAAPI and would kill the
   slide animation. */
.legacy-nav .is-menu-open .wp-block-navigation__responsive-container-content .has-child.has-child:not(.is-open):not(.is-closing) > .wp-block-navigation__submenu-container {
	display: flex;
	box-sizing: border-box;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	padding-block: 0 !important;
	margin-block: 0;
	transition: visibility .3s;
}
/* Panels bleed to the overlay edges; text stays on the shared 24px line.
   .is-closing (nav.js, while the collapse slide runs) keeps this geometry
   so nothing snaps mid-animation. */
.legacy-nav .is-menu-open :is(.has-child.is-open, .has-child.is-closing) > .wp-block-navigation__submenu-container {
	display: flex;
	background: #1a1a1a !important;
	padding: 8px 24px !important;
	margin: 6px -24px 10px;
	width: calc(100% + 48px) !important;
	box-sizing: border-box;
	overflow: hidden;
	visibility: visible;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.legacy-nav .is-menu-open .wp-block-navigation__responsive-container-content .has-child.has-child:not(.is-open):not(.is-closing) > .wp-block-navigation__submenu-container { transition: none; }
}
/* Nested (third-level) panel: same full-bleed treatment, lighter tint. */
.legacy-nav .is-menu-open :is(.has-child.is-open, .has-child.is-closing) :is(.has-child.is-open, .has-child.is-closing) > .wp-block-navigation__submenu-container {
	background: #242424 !important;
	padding: 6px 24px !important;
	margin: 4px -24px 8px;
	width: calc(100% + 48px) !important;
}
/* Expand state: a right-edge chevron that flips when open.
   The link computes display:flex (core), so auto margin does the push.
   translateY re-centres the glyph: a rotated V's strokes sit entirely in
   one half of its box, so the box centre isn't the visual centre. */
.legacy-nav .is-menu-open .has-child > .wp-block-navigation-item__content::after {
	content: ""; margin-left: auto;
	flex: 0 0 auto; align-self: center;
	width: 9px; height: 9px; margin-right: 6px;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-3px) rotate(45deg);
	transition: transform .3s ease; /* matches the panel slide */
}
.legacy-nav .is-menu-open .has-child.is-open > .wp-block-navigation-item__content::after {
	transform: translateY(3px) rotate(225deg);
}
/* "All …" links stand out (white) against the red items. */
.legacy-nav .is-menu-open .legacy-nav-all > .wp-block-navigation-item__content {
	color: #fff !important;
	font-size: 15px !important;
}
.legacy-nav .is-menu-open a[aria-current="page"] {
	border-bottom: 0;
	color: #fff !important;
}

/* ---------- WPForms in the quote panel — pinned to the mockup ---------- */
.cecile-quote__form .wpforms-container { margin: 0 !important; }
.cecile-quote__form .wpforms-field { padding: 8px 0 !important; }
.cecile-quote__form .wpforms-field-label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: #fff !important; margin: 0 0 6px !important;
}
.cecile-quote__form .wpforms-required-label { color: #7a0d11; }
.cecile-quote__form .wpforms-field-sublabel { display: none !important; }
.cecile-quote__form input[type="text"],
.cecile-quote__form input[type="email"],
.cecile-quote__form input[type="tel"],
.cecile-quote__form textarea {
	width: 100% !important; max-width: 100% !important; box-sizing: border-box;
	background: #fff !important; border: 0 !important; border-radius: 2px !important;
	height: 46px; padding: 0 14px !important;
	font-size: 14px; color: #111 !important; box-shadow: none !important;
}
.cecile-quote__form textarea { height: 104px !important; min-height: 104px; padding: 14px !important; resize: vertical; }
.cecile-quote__form .wpforms-field-name .wpforms-field-row {
	display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px;
	max-width: none !important; margin: 0 !important;
}
.cecile-quote__form .wpforms-field-row-block {
	width: auto !important; max-width: none !important; flex: none !important;
	float: none !important; margin: 0 !important; padding: 0 !important;
}
/* Pin First left / Last right — something in WPForms reverses them. */
.cecile-quote__form .wpforms-field-name .wpforms-field-row-block.wpforms-first { grid-column: 1 !important; grid-row: 1; }
.cecile-quote__form .wpforms-field-name .wpforms-field-row-block:not(.wpforms-first) { grid-column: 2 !important; grid-row: 1; }
.cecile-quote__form .wpforms-submit,
.cecile-quote__form button[type="submit"] {
	width: 100%; display: block;
	background: #111 !important; color: #fff !important;
	border: 0 !important; border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 600 !important; font-size: 16px !important;
	letter-spacing: .06em; text-transform: uppercase;
	padding: 16px !important; cursor: pointer;
}
.cecile-quote__form .wpforms-submit:hover,
.cecile-quote__form button[type="submit"]:hover { background: #000 !important; }

/* ---------- CTA band on the shared content line ----------
   Inner column = 1280 wrap minus the 40px band padding, so its text
   left-aligns with the header and footer at every viewport. */
.cecile-cta { padding-inline: 40px; box-sizing: border-box; }
.cecile-cta__inner { max-width: 1200px; }
@media (max-width: 900px) {
	.cecile-cta { padding-inline: 24px; }
}

/* ---------- Footer (pinned to mockup) ---------- */
/* Same content box as the header bars: 1280 wrap + 40px inline padding.
   (The block's own 64px padding gave the footer a different edge.) */
.wp-block-group.legacy-footer { padding-left: 0 !important; padding-right: 0 !important; }
.legacy-footer > .wp-block-group {
	max-width: 1280px; margin-inline: auto !important;
	padding-inline: 40px; box-sizing: border-box;
}
.legacy-footer .wp-block-navigation { font-size: 13px !important; }
.legacy-footer .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	color: #c9c6c0 !important;
}
/* The header lockup, scaled down (tag tracking scales with font-size). */
.legacy-footer .legacy-logo { text-align: left; }
.legacy-footer .legacy-logo__mark { font-size: 22px; }
.legacy-footer .legacy-logo__tag { font-size: 9px; margin-top: 2px; }
@media (max-width: 900px) {
	.legacy-footer > .wp-block-group {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 22px;
		padding-inline: 24px;
	}
	.legacy-footer .wp-block-navigation .wp-block-navigation__container {
		justify-content: flex-start !important;
		row-gap: 10px;
	}
	/* Dissolve the logo+copyright wrapper so the column can order:
	   logo, links, copyright. The wrapper's constrained layout gave its
	   children auto inline margins — zero them or the logo centres. */
	.legacy-footer > .wp-block-group > .wp-block-group:first-child { display: contents; }
	.legacy-footer .legacy-logo,
	.legacy-footer .legacy-footer__copy { margin-left: 0 !important; margin-right: 0 !important; }
	.legacy-footer .legacy-logo { order: 1; }
	.legacy-footer .wp-block-navigation { order: 2; }
	.legacy-footer .legacy-footer__copy { order: 3; }
}

/* ============================================================
   SERVICE PAGES — pinned to the Claude Design handover
   (Legacy Services + Legacy Flat Roofing Service standalones).
   Everything scoped to legacy-* classes set in the page content.
   ============================================================ */

/* ---------- Page hero (all service pages) ---------- */
.cecile-hero.legacy-pagehero { min-height: 520px; }
/* The project-frame heroes are 1280x656 video stills — cover-cropping from
   the centre beheads whoever's talking. Show the top of the frame. */
.cecile-hero.legacy-pagehero { background-position: center top; }
.legacy-pagehero .cecile-hero__breadcrumbs {
	font-size: 13px; letter-spacing: .04em; opacity: 1;
	color: #c9c6c0; margin-bottom: 16px;
}
.legacy-pagehero .cecile-hero__breadcrumbs a { color: #c9c6c0; }
.legacy-pagehero .cecile-hero__breadcrumbs a:hover { color: #fff; }
.legacy-pagehero .cecile-hero__heading { font-size: 64px; max-width: 820px; margin-bottom: 16px; }
.legacy-pagehero .cecile-hero__subheading { font-size: 19px; line-height: 1.6; margin-bottom: 0; }
.legacy-pagehero .cecile-hero__inner { padding-bottom: 52px; }
/* Category/leaf service heroes: left-to-right gradient (not the index hub,
   which keeps its own flat dark treatment below) — dark behind the text on
   the left, image reads clearly on the right. :not() bumps specificity past
   the base .cecile-hero.has-background-image rule regardless of source order. */
.legacy-pagehero.has-background-image:not(.legacy-pagehero--index) .cecile-hero__overlay {
	background: linear-gradient(90deg, rgba(17,17,17,.98) 0%, rgba(17,17,17,.7) 45%, rgba(17,17,17,.1) 100%) !important;
}

/* Services index variant: padded band, image dimmed almost out. */
.cecile-hero.legacy-pagehero--index { min-height: 0; }
.legacy-pagehero--index .cecile-hero__inner { padding-top: 76px; padding-bottom: 68px; }
.legacy-pagehero--index .cecile-hero__heading { font-size: 68px; max-width: 900px; }
.legacy-pagehero--index.has-background-image .cecile-hero__overlay {
	background: rgba(17, 17, 17, .8) !important;
}

/* ---------- Two-column article + sticky quote card ---------- */
.legacy-svcbody {
	display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px;
	padding: 64px; box-sizing: border-box;
	max-width: 1280px; margin-inline: auto !important;
}
.legacy-svcbody__main > h2 { font-size: 34px; line-height: 1.05; margin: 0 0 18px; }
.legacy-svcbody__main > p { font-size: 17px; line-height: 1.75; color: #4a463f; margin: 0 0 18px; }

/* "What's included" grid (feature-grid re-skinned inside the article). */
.legacy-included { padding: 0 !important; background: transparent !important; margin-top: 30px; }
.legacy-included .cecile-features__header { text-align: left; margin-bottom: 18px; max-width: none; }
.legacy-included .cecile-features__eyebrow {
	font-size: 15px; letter-spacing: .14em;
	color: var(--wp--preset--color--primary); margin: 0;
}
.legacy-included .cecile-features__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.legacy-included .cecile-features__card {
	background: #fff; border: 1px solid #e2ded7 !important;
	padding: 22px; border-radius: 0 !important; gap: 0;
}
.legacy-included .cecile-features__card-title { font-size: 18px; margin: 0 0 8px; color: #111; }
.legacy-included .cecile-features__card-title a { color: inherit; text-decoration: none; }
.legacy-included .cecile-features__card-title a:hover { color: var(--wp--preset--color--primary); }
.legacy-included .cecile-features__card-text { font-size: 15px; line-height: 1.6; color: #6f6a62; }

/* Sticky quote card. */
.legacy-sidecard {
	background: #111; color: #fff; padding: 32px;
	position: sticky; top: 24px; align-self: start;
}
.legacy-sidecard__eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--wp--preset--color--primary); margin: 0 0 12px;
}
.legacy-sidecard__heading { font-size: 28px; line-height: 1; color: #fff; margin: 0 0 14px; }
.legacy-sidecard__text { font-size: 15px; line-height: 1.6; color: #b4b0a8; margin: 0 0 22px; }
.legacy-sidecard .wp-block-buttons { display: flex; flex-direction: column; gap: 12px; }
.legacy-sidecard .wp-block-button { width: 100%; }
.legacy-sidecard .wp-block-button__link {
	display: block; width: 100%; text-align: center; box-sizing: border-box;
	font-size: 15px; letter-spacing: .06em; padding: 15px;
}
.legacy-sidecard .is-ghost .wp-block-button__link {
	background: transparent; border: 1px solid #333; color: #fff;
}
.legacy-sidecard .is-ghost .wp-block-button__link:hover { border-color: var(--wp--preset--color--primary); }
.legacy-sidecard__rating {
	display: flex; align-items: center; gap: 8px;
	margin: 22px 0 0; padding-top: 20px; border-top: 1px solid #2b2b2b;
	font-size: 13px; color: #9c988f;
}

/* ---------- Red-check lists (Why panel + index rows) ---------- */
.legacy-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.legacy-checklist li { position: relative; padding-left: 38px; font-size: 15px; line-height: 1.6; color: #9c988f; }
.legacy-checklist li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 22px; line-height: 1;
	color: var(--wp--preset--color--primary);
}
.legacy-checklist li strong {
	display: block; font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 18px; text-transform: uppercase;
	color: #fff; margin-bottom: 4px;
}
/* The markup separates title and text with a <br>; the strong is already a
   block, so that break would double the gap (design wants 4px). */
.legacy-checklist li strong + br { display: none; }
/* Base checklist assumes a dark background (muted #9c988f body text, white
   strong headings) — the Careers page list sits on the plain light page
   background instead, so it needs its own dark-on-light treatment plus a
   bit more room above it (was sitting right under the intro paragraph). */
.legacy-checklist--dark { margin-top: 24px; }
.legacy-checklist--dark li { color: #2a2825; }

/* ---------- "Why Legacy" split (media-text re-skinned) ---------- */
/* The plugin stacks the body with a flex gap; the design spaces purely
   with margins (12px eyebrow, 26px heading), so drop the gap. */
.legacy-why .cecile-mediatext__body,
.legacy-svc .cecile-mediatext__body { gap: 0; }
.cecile-mediatext.legacy-why { padding: 0 !important; background: transparent !important; }
.legacy-why .cecile-mediatext__inner {
	grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; max-width: none;
}
.legacy-why .cecile-mediatext__media img {
	width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important;
}
.legacy-why .cecile-mediatext__body { background: #1a1a1a; padding: 56px 64px; }
.legacy-why .cecile-mediatext__eyebrow {
	font-size: 14px; letter-spacing: .22em;
	color: var(--wp--preset--color--primary) !important;
	margin-bottom: 12px;
}
.legacy-why .cecile-mediatext__heading { font-size: 34px; line-height: 1.05; color: #fff; margin: 0 0 26px; }
/* The plugin's default muted text color (#6F6A62) is tuned for a light
   background; on this section's #1a1a1a body it reads too dim. Reuse the
   same light warm-gray already used for hero subheadings on dark tone. */
.legacy-why .cecile-mediatext__text { color: #d8d5cf; }

/* ---------- Steps on service pages (light band, white cards) ---------- */
.cecile-steps.legacy-steps { padding: 72px 0 !important; }
.legacy-steps .cecile-steps__header { margin-bottom: 44px; }
.legacy-steps .cecile-steps__eyebrow { font-size: 14px; letter-spacing: .22em; color: var(--wp--preset--color--primary) !important; }
.legacy-steps .cecile-steps__heading { font-size: 40px; color: #111; }
.legacy-steps .cecile-steps__list {
	max-width: 1152px; margin-inline: auto; gap: 20px; padding-inline: 0;
}
.legacy-steps .cecile-steps__step {
	background: #fff; border: 1px solid #e2ded7; border-radius: 0 !important; padding: 28px;
}
/* Plain red numerals like the design, not the plugin's badge circle. */
.legacy-steps .cecile-steps__num {
	display: block; width: auto; height: auto; border-radius: 0;
	background: transparent !important;
	font-size: 40px; color: var(--wp--preset--color--primary) !important; line-height: 1;
	margin-bottom: 0;
}
.legacy-steps .cecile-steps__label { font-size: 18px; color: #111; margin: 12px 0 8px; }
.legacy-steps .cecile-steps__text { font-size: 14px; line-height: 1.55; color: #6f6a62; }

/* ---------- FAQ (white band, two-column open Q&A look) ---------- */
.cecile-faq.legacy-faq { background: #fff; border-top: 1px solid #e2ded7; padding: 64px 0 96px !important; }
.legacy-faq .cecile-faq__header,
.legacy-faq .cecile-faq__list { max-width: 1152px; margin-inline: auto; }
.legacy-faq .cecile-faq__heading { font-size: 34px; color: #111; margin-bottom: 32px; }
.legacy-faq .cecile-faq__list {
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px;
	/* Without this, grid's default stretch matches every card in a row to
	   the tallest one — so opening a question also visibly grows its
	   still-closed row-neighbour, doubling the amount of layout that
	   moves per animation frame. Each card sizing to just its own
	   content keeps that reflow contained to the card actually animating. */
	align-items: start;
}
/* Each Q&A now reads as its own bordered card (per client feedback) —
   square corners to match the site's other card treatments (e.g.
   .legacy-related). No padding override on __a: the plugin's own
   open/closed rules need to control padding-bottom for the animation. */
.legacy-faq .cecile-faq__item { border: 1px solid #e2ded7; background: transparent; border-radius: 0 !important; }
.legacy-faq .cecile-faq__q {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 18px; color: #111; padding: 16px 0;
}
.legacy-faq .cecile-faq__a { font-size: 15px; line-height: 1.65; color: #6f6a62; }

/* ---------- Related services ---------- */
.cecile-features.legacy-related { background: #f4f2ee !important; padding: 56px 0 !important; }
.legacy-related .cecile-features__header,
.legacy-related .cecile-features__grid { max-width: 1152px; margin-inline: auto; }
.legacy-related .cecile-features__header { text-align: left; margin-bottom: 20px; }
.legacy-related .cecile-features__eyebrow { font-size: 14px; letter-spacing: .16em; color: #111; }
.legacy-related .cecile-features__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.legacy-related .cecile-features__card {
	background: #fff; border: 1px solid #e2ded7 !important;
	padding: 24px; border-radius: 0 !important; gap: 0;
}
.legacy-related .cecile-features__card-title { font-size: 20px; margin: 0 0 6px; }
.legacy-related .cecile-features__card-title a { color: #111; text-decoration: none; }
.legacy-related .cecile-features__card-title a:hover { color: var(--wp--preset--color--primary); }
.legacy-related .cecile-features__card-text { font-size: 14px; line-height: 1.55; color: #6f6a62; }

/* ---------- Services index: jump bar + alternating rows ---------- */
.legacy-jumpbar { background: #1a1a1a; padding: 20px 0; }
.legacy-jumpbar .wp-block-buttons {
	display: flex; gap: 12px; flex-wrap: wrap;
	max-width: 1280px; margin-inline: auto; padding-inline: 64px; box-sizing: border-box;
}
.legacy-jump .wp-block-button__link {
	background: transparent; border: 1px solid #333; color: #e6e3dd;
	font-size: 14px; letter-spacing: .05em; padding: 9px 18px;
}
.legacy-jump .wp-block-button__link:hover { border-color: var(--wp--preset--color--primary); color: #fff; }

.legacy-svclist {
	max-width: 1280px; margin-inline: auto !important;
	padding: 8px 64px 0; box-sizing: border-box;
}
.legacy-svc-row { padding: 56px 0; border-bottom: 1px solid #ddd9d2; scroll-margin-top: 24px; }
.legacy-svc-row:last-child { border-bottom: 0; }
.cecile-mediatext.legacy-svc { padding: 0 !important; background: transparent !important; }
.legacy-svc .cecile-mediatext__inner {
	grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; max-width: none;
}
.cecile-mediatext--media-right.legacy-svc .cecile-mediatext__inner { grid-template-columns: 1.05fr .95fr; }
.legacy-svc .cecile-mediatext__eyebrow {
	font-size: 15px; font-weight: 700; letter-spacing: 0;
	color: var(--wp--preset--color--primary) !important; margin: 0;
}
.legacy-svc .cecile-mediatext__heading { font-size: 38px; line-height: 1; margin: 6px 0 14px; color: #111; }
.legacy-svc .cecile-mediatext__text > p { font-size: 16px; line-height: 1.65; color: #5c574f; margin: 0 0 22px; }
.legacy-svc .cecile-mediatext__media img {
	width: 100%; height: 320px; object-fit: cover;
	border: 1px solid #d3cfc7; border-radius: 0 !important;
}
.legacy-svc .cecile-mediatext__btn {
	background: var(--wp--preset--color--primary); color: #fff;
	font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
	padding: 13px 26px; border-radius: 0 !important;
}

/* Checklist links read like the design's plain items, not default links. */
.legacy-checklist a {
	color: inherit; text-decoration: none;
	border-bottom: 1px solid #d3cfc7;
}
.legacy-checklist a:hover { color: var(--wp--preset--color--primary); border-bottom-color: currentColor; }

/* Index rows use the compact two-column check list in body text. */
.legacy-checklist--2col {
	display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; margin-bottom: 24px;
}
.legacy-svc .legacy-checklist--2col li { color: #2a2825; font-size: 15px; padding-left: 24px; }
.legacy-svc .legacy-checklist--2col li::before { font-size: 15px; top: 2px; }

/* ---------- Shared plumbing for the new full-bleed sections ---------- */
.cecile-mediatext.alignfull,
.cecile-faq.alignfull,
.cecile-features.alignfull,
.cecile-steps.alignfull,
.legacy-jumpbar {
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	margin-top: 0 !important; margin-bottom: 0 !important;
}
.legacy-faq .cecile-faq__header,
.legacy-faq .cecile-faq__list,
.legacy-related .cecile-features__header,
.legacy-related .cecile-features__grid,
.legacy-steps .cecile-steps__header,
.legacy-steps .cecile-steps__list { padding-inline: 64px; box-sizing: content-box; }

/* Service pages start flush under the header too. */
.page main { padding-top: 0 !important; }
.page .entry-content { margin-block-start: 0 !important; }

/* ============================================================
   BLOG / PROJECT PORTFOLIO — pinned to the Legacy Blog +
   Legacy Blog Post .dc references from the redesign handoff.
   ============================================================ */

/* ---------- Blog hero (padded dark band, no image) ---------- */
.cecile-hero.legacy-bloghero { min-height: 0; }
.legacy-bloghero .cecile-hero__inner { padding-top: 64px; padding-bottom: 64px; }
.legacy-bloghero .cecile-hero__breadcrumbs { font-size: 13px; color: #9c988f; letter-spacing: .04em; opacity: 1; margin-bottom: 16px; }
.legacy-bloghero .cecile-hero__breadcrumbs a { color: #9c988f; }
.legacy-bloghero .cecile-hero__heading { font-size: 60px; max-width: none; margin-bottom: 14px; }
.legacy-bloghero .cecile-hero__subheading { font-size: 18px; line-height: 1.6; max-width: 640px; margin-bottom: 0; }

/* Archive (category) hero. Plain group block (no cecile/hero backgroundUrl
   mechanism here), so the photo + dark overlay are hand-rolled: same
   ~55% dark tint cecile/hero uses elsewhere, content lifted above it
   with z-index since the overlay is a full-bleed ::before. */
.legacy-archivehero { position: relative; padding: 64px 0; overflow: hidden;
	background: #111 url('/wp-content/themes/cecile-legacy/assets/heroes/hero-our-work.jpg') center/cover no-repeat;
}
.legacy-archivehero::before { content: ""; position: absolute; inset: 0; background: #111; opacity: .55; }
.legacy-archivehero > * { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto !important; padding-inline: 64px; box-sizing: border-box; }
.legacy-archivehero__crumbs { font-size: 13px; color: #9c988f; letter-spacing: .04em; margin: 0 0 16px; }
.legacy-archivehero__crumbs a { color: #9c988f; }
/* The chip paragraph shares the centred 1280 column with everything else;
   the red chip itself is the inline span. */
.legacy-archivehero__chip { margin-top: 0; margin-bottom: 18px; }
.legacy-archivehero__chip span {
	display: inline-block; background: var(--wp--preset--color--primary); color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
	padding: 7px 14px;
}
.legacy-archivehero .wp-block-query-title {
	font-size: 60px; line-height: .98; color: #fff; margin: 0;
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; text-transform: uppercase;
}

/* ---------- Category filter bar ---------- */
.legacy-filterbar { background: #1a1a1a; padding: 18px 0; position: relative; }
/* All 18 of the client's real categories are listed (see the buttons
   markup) — a wrapping row that long would run to 4-5 tall rows, so
   this scrolls horizontally in one row instead, like a tab strip. */
.legacy-filterbar .wp-block-buttons {
	display: flex; gap: 12px; flex-wrap: nowrap; overflow-x: auto;
	max-width: 1280px; margin-inline: auto; padding-inline: 64px; box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
	/* The native scrollbar reserved its own strip of height below the
	   pills, which also pushed the arrows' 50%-of-.legacy-filterbar
	   vertical center down with it. Hiding it fixes both. */
	scrollbar-width: none; -ms-overflow-style: none;
}
.legacy-filterbar .wp-block-buttons::-webkit-scrollbar { display: none; }
/* Edge fades hint that the row scrolls — otherwise it just looks like a
   row that's cut off. Sized/positioned to match the buttons row's own
   1280px-max centering + 64px inline padding, so the fade sits flush
   with its edge instead of the alignfull bar's. The left one only makes
   sense once there's somewhere left to scroll back to, so it starts
   hidden and filterbar.js reveals it once scrolled (mirrors the left
   arrow's own is-hidden toggle). */
.legacy-filterbar::before,
.legacy-filterbar::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 160px;
	pointer-events: none; z-index: 1;
}
.legacy-filterbar::before {
	left: max(0px, calc(50% - 640px));
	background: linear-gradient(to right, #1a1a1a, transparent);
	opacity: 0; transition: opacity .2s ease;
}
.legacy-filterbar.is-scrolled::before { opacity: 1; }
.legacy-filterbar::after {
	right: max(0px, calc(50% - 640px));
	background: linear-gradient(to left, #1a1a1a, transparent);
}
/* Clickable, scrolls the row left/right — sit over the fades (higher
   z-index), inset the same amount as the fades so they land just inside
   the row's own edge rather than the alignfull bar's. An SVG icon (not
   a text character) so it centers on its own box exactly, instead of
   sitting off-center to whatever a glyph's font metrics happen to be.
   filterbar.js shows/hides each as the row scrolls. */
.legacy-filterbar__arrow {
	/* top:0/bottom:0 + margin-block:auto should split the leftover space
	   evenly, but something else on the page pins margin-bottom to 0,
	   so the auto side (margin-top) absorbed 100% of it instead of 50%
	   — the arrow rendered near the bottom edge. A fixed negative
	   margin-top (half the icon's own height) doesn't depend on any
	   auto-margin split at all, so it can't be hijacked the same way;
	   !important defends against whatever's setting that margin-bottom. */
	position: absolute; top: 50%; height: 28px; margin: -14px 0 0 !important;
	z-index: 2;
	width: auto; background: none; border: none; padding: 0;
	color: #fff; cursor: pointer; line-height: 0;
	display: flex; align-items: center; justify-content: center;
}
.legacy-filterbar__arrow svg { display: block; }
.legacy-filterbar__arrow:hover { color: var(--wp--preset--color--primary); }
.legacy-filterbar__arrow.is-hidden { display: none; }
.legacy-filterbar__arrow--prev { left: max(16px, calc(50% - 640px + 16px)); }
.legacy-filterbar__arrow--next { right: max(16px, calc(50% - 640px + 16px)); }
.legacy-filter { flex-shrink: 0; }
.legacy-filter .wp-block-button__link {
	background: transparent; border: 1px solid #333; color: #e6e3dd;
	font-size: 14px; letter-spacing: .05em; padding: 9px 18px; white-space: nowrap;
}
.legacy-filter .wp-block-button__link:hover { border-color: var(--wp--preset--color--primary); color: #fff; }
/* Active chip: "All Projects" on the main index; the queried term on category pages. */
.blog .legacy-filter.is-all .wp-block-button__link,
.category-new-roof .legacy-filter a[href*="/new-roof/"],
.category-re-roof .legacy-filter a[href*="/re-roof/"],
.category-repair .legacy-filter a[href*="/category/repair/"],
.category-duradek-vinyl-decking .legacy-filter a[href*="duradek"],
.category-videos .legacy-filter a[href*="/videos/"],
.category-tips .legacy-filter a[href*="/tips/"],
.category-residential-videos .legacy-filter a[href*="residential-videos"],
.category-leaking-roof .legacy-filter a[href*="leaking-roof"],
.category-finished-product .legacy-filter a[href*="finished-product"],
.category-commercial-videos .legacy-filter a[href*="commercial-videos"],
.category-testimonials .legacy-filter a[href*="testimonials"],
.category-free-quote .legacy-filter a[href*="free-quote"],
.category-client-referral .legacy-filter a[href*="client-referral"],
.category-photos .legacy-filter a[href$="/photos/"],
.category-commercial-photos .legacy-filter a[href*="commercial-photos"],
.category-residential-photos .legacy-filter a[href*="residential-photos"],
.category-eavestrough-cleaning .legacy-filter a[href*="eavestrough-cleaning"] {
	background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff;
}

/* ---------- Project grid ---------- */
.legacy-projects .wp-block-post-template {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
	max-width: 1280px; margin-inline: auto; padding: 40px 64px 8px;
	box-sizing: border-box; list-style: none;
}
.legacy-projects .wp-block-post { margin: 0; }
.legacy-card { background: #fff; border: 1px solid #e2ded7; height: 100%; display: flex; flex-direction: column; }
.legacy-card__media { margin: 0; position: relative; }
.legacy-card__media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.legacy-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.legacy-card__chips { margin: 0 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.legacy-card__chips .wp-block-post-terms__separator { display: none; }
.legacy-card__chips a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
	color: #8a857c; border: 1px solid #ddd9d2; padding: 4px 8px; text-decoration: none;
}
.legacy-card__chips a:first-of-type { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.legacy-card__chips a:nth-of-type(n+3) { display: none; }
.legacy-card__title { font-size: 21px; line-height: 1.1; margin: 0 0 10px; }
.legacy-card__title a { color: #111; text-decoration: none; }
.legacy-card__title a:hover { color: var(--wp--preset--color--primary); }
.legacy-card__excerpt { font-size: 14px; line-height: 1.6; color: #6f6a62; margin: 0 0 18px; }
.legacy-card__excerpt p { margin: 0; }
.legacy-card__meta { margin-top: auto !important; font-size: 12px; color: #a09b93; }
/* Posts filed under Videos get the play flag on their card image. */
.legacy-card:has(.legacy-card__chips a[href*="/videos/"]) .legacy-card__media::after {
	content: "▶ Video"; position: absolute; top: 14px; right: 14px;
	background: var(--wp--preset--color--primary); color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 9px;
}


/* ---------- Pagination ---------- */
.legacy-pagination { padding: 48px 0; gap: 10px; }
.legacy-pagination .page-numbers {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 14px; color: #111;
	border: 1px solid #d3cfc7; min-width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 12px; text-decoration: none;
}
.legacy-pagination .page-numbers.current { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }
.legacy-pagination a.page-numbers:hover { border-color: var(--wp--preset--color--primary); }
.legacy-pagination .wp-block-query-pagination-previous,
.legacy-pagination .wp-block-query-pagination-next {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
	color: #111; border: 1px solid #d3cfc7; height: 42px;
	display: inline-flex; align-items: center; padding: 0 18px; text-decoration: none;
}

/* ---------- Single post: article header ---------- */
.legacy-articlehead { background: #111; padding: 56px 0 48px; }
.legacy-articlehead > * { max-width: 1280px; margin-inline: auto !important; padding-inline: 64px; box-sizing: border-box; }
.legacy-articlehead__crumbs { font-size: 13px; color: #9c988f; letter-spacing: .04em; margin: 0 0 20px; }
.legacy-articlehead__crumbs a { color: #9c988f; }
.legacy-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.legacy-chips .wp-block-post-terms__separator { display: none; }
.legacy-chips a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: #9c988f; border: 1px solid #333; padding: 5px 10px; text-decoration: none;
}
.legacy-chips a:first-of-type { color: #fff; border-color: var(--wp--preset--color--primary); }
/* Cap line length with right padding, not max-width — the shared
   `> *` centering rule would otherwise indent narrower children. */
.legacy-articlehead__title {
	font-size: 50px; line-height: 1.02; color: #fff; margin: 0 0 24px;
	padding-right: min(376px, 25%);
}
.legacy-articlehead__meta {
	border-top: 1px solid #2b2b2b; padding-top: 22px; gap: 14px;
}
.legacy-articlehead__badge {
	width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--primary);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 16px; color: #fff; margin: 0;
}
.legacy-articlehead__author {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 15px; color: #fff; margin: 0;
}
.legacy-articlehead__date { font-size: 13px; color: #77736b; }

/* ---------- Single post: body + sidebar ---------- */
.legacy-postbody {
	display: grid; grid-template-columns: 1fr 320px; gap: 56px;
	padding: 56px 64px; box-sizing: border-box;
	max-width: 1280px; margin-inline: auto !important;
}
.legacy-postbody__main .wp-block-post-content > p:first-child { font-size: 20px; line-height: 1.7; color: #2a2825; font-weight: 500; margin-top: 0; }
.legacy-postbody__main .wp-block-post-content p { font-size: 17px; line-height: 1.8; color: #4a463f; margin: 0 0 20px; }
.legacy-postbody__main .wp-block-post-content h2 { font-size: 28px; line-height: 1.1; color: #111; margin: 40px 0 14px; }
.legacy-postbody__main .wp-block-post-content h3 { font-size: 22px; color: #111; margin: 32px 0 12px; }
.legacy-postbody__main .wp-block-post-content blockquote {
	border-left: 4px solid var(--wp--preset--color--primary);
	margin: 36px 0; padding: 6px 0 6px 26px;
}
.legacy-postbody__main .wp-block-post-content blockquote p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500; font-size: 24px; line-height: 1.35; color: #111;
	text-transform: uppercase; margin: 0;
}
.legacy-postbody__main .wp-block-post-content .wp-block-embed { margin: 0 0 32px; }
.legacy-postbody__main .wp-block-post-content .wp-block-embed__wrapper { position: relative; }
.legacy-postbody__main .wp-block-post-content img { max-width: 100%; height: auto; }
/* Tags + share sit on one bordered row under the article. */
.legacy-tagshare { margin-top: 36px; padding-top: 24px; border-top: 1px solid #ddd9d2; }
.legacy-postbody__main .cecile-facts { margin: 0 0 32px; }
.legacy-postbody__main .cecile-beforeafter__tag { margin: 0; }
.legacy-tagchips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.legacy-tagchips .wp-block-post-terms__separator { display: none; }
.legacy-tagchips a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: #8a857c; background: #eceae5; padding: 7px 12px; text-decoration: none;
}
.legacy-tagchips a:hover { color: var(--wp--preset--color--primary); }

/* ---------- Related posts (pin plugin block to the reference) ---------- */
.cecile-relposts.legacy-related-posts { background: #fff; border-top: 1px solid #e2ded7; padding: 64px 0; }
.legacy-related-posts .cecile-relposts__inner { max-width: 1280px; padding-inline: 64px; }
.legacy-related-posts .cecile-relposts__heading { font-size: 32px; color: #111; margin-bottom: 32px; }
.legacy-related-posts .cecile-relposts__media { aspect-ratio: auto; height: 180px; }
.legacy-related-posts .cecile-relposts__title { font-size: 20px; color: #111; }

/* Blog + archive + single start flush under the header. */
.blog main, .archive main, .single main { padding-top: 0 !important; margin-block-start: 0 !important; }
.blog .wp-site-blocks, .archive .wp-site-blocks, .single .wp-site-blocks { padding-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.legacy-pagehero .cecile-hero__heading,
	.legacy-pagehero--index .cecile-hero__heading { font-size: 40px; }
	.legacy-svcbody { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; }
	.legacy-sidecard { position: static; }
	.legacy-included .cecile-features__grid,
	.legacy-faq .cecile-faq__list,
	.legacy-related .cecile-features__grid,
	.legacy-checklist--2col { grid-template-columns: 1fr; }
	.legacy-why .cecile-mediatext__inner,
	.legacy-svc .cecile-mediatext__inner { grid-template-columns: 1fr !important; }
	.legacy-why .cecile-mediatext__body { padding: 40px 24px; }
	.legacy-svclist { padding-inline: 24px; }
	.legacy-jumpbar .wp-block-buttons { padding-inline: 24px; }
	.legacy-faq .cecile-faq__header, .legacy-faq .cecile-faq__list,
	.legacy-related .cecile-features__header, .legacy-related .cecile-features__grid,
	.legacy-steps .cecile-steps__header, .legacy-steps .cecile-steps__list { padding-inline: 24px; }

	/* Blog */
	.legacy-bloghero .cecile-hero__heading,
	.legacy-archivehero .wp-block-query-title { font-size: 38px; }
	.legacy-projects .wp-block-post-template { grid-template-columns: 1fr; padding: 24px; }
	.legacy-filterbar .wp-block-buttons { padding-inline: 24px; }
	.legacy-archivehero > *, .legacy-articlehead > * { padding-inline: 24px; }
	.legacy-articlehead__title { font-size: 34px; }
	.legacy-postbody { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
	.legacy-related-posts .cecile-relposts__inner { padding-inline: 24px; }
}

/* ---------- Floating Google review badge (every page, wp_footer) ---------- */
.legacy-review-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 40;
	display: flex; align-items: center; gap: 16px;
	background: #fff; border-radius: 8px; overflow: hidden;
	padding: 20px 24px 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body, sans-serif);
}
/* Top accent strip — overflow:hidden on the card clips its square
   corners to the card's own radius, so this doesn't need its own. */
.legacy-review-float::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: var(--wp--preset--color--primary);
}
.legacy-review-float__logo { flex-shrink: 0; display: flex; }
.legacy-review-float__text { display: flex; flex-direction: column; gap: 2px; }
.legacy-review-float__label { font-size: 17px; font-weight: 600; color: #202124; }
.legacy-review-float__stars { font-size: 18px; color: #FBBC04; letter-spacing: 1px; }
.legacy-review-float__stars strong { color: #202124; font-weight: 700; margin-right: 4px; }
.legacy-review-float__count { font-size: 13px; color: #5f6368; }
@media (max-width: 480px) {
	.legacy-review-float { right: 12px; bottom: 12px; padding: 14px 18px 12px; gap: 12px; }
	.legacy-review-float__logo svg { width: 28px; height: 28px; }
	.legacy-review-float__label { font-size: 15px; }
	.legacy-review-float__stars { font-size: 15px; }
	.legacy-review-float__count { display: none; }
}