/* ==========================================================================
 * J & L LLC Consolidated Stylesheet (main.css)
 * --------------------------------------------------------------------------
 * Single concatenated CSS file. Replaces the previous 23 separate files that
 * were enqueued individually. Concatenation order matches the cascade order
 * the original enqueues produced:
 
 *
 * One CSS file means ONE HTTP request, simpler caching, and an easier mental
 * model when looking up rules. The trade-off is that pages load CSS for
 * sections they may not render that's acceptable given the modest total
 * payload after gzip.
 * ========================================================================== */


/* ==========================================================================
 * Source: globals/globals.css
 * ========================================================================== */
/* ==========================================================================
 * J & L LLC  Global Styles
 * --------------------------------------------------------------------------
 * Loaded site-wide before any per-block CSS. Hosts:
 *   1. Design tokens (CSS custom properties) populated from Figma tokens.
 *   2. Reset / normalize
 *   3. Base typography
 *   4. Layout primitives (container, screen-reader-text)
 *   5. Global header / footer
 *
 * Per-block component CSS lives in /css/blocks/<layout>.css and is enqueued
 * from each block's PHP template so only the CSS for rendered sections loads.
 * ========================================================================== */

/* ---------- 1. Design tokens (placeholder overwritten by token sync) ---------- */
:root {
	/* Typography families */
	--ff-outfit: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ff-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ff-oswald: "Oswald", "Outfit", system-ui, sans-serif;
	--ff-poppins: "Poppins", system-ui, sans-serif;
	--ff-damion: "Damion", "Outfit", cursive;

	/* Base sizing */
	--container-max: 1920px;
	--container-pad-x: clamp(16px, 4vw, 80px);
	--section-pad-y: clamp(48px, 6vw, 104px);

	/* Brand colors synced from Figma */
	--clr-000000: #000000;
	--clr-d9d9d9: #D9D9D9;
	--clr-d31833: #D31833;          /* primary brand red */
	--clr-161616: #161616;          /* near-black body text */
	--clr-ffffff: #FFFFFF;
	--clr-65131b: #65131B;          /* deep red accent */
	--clr-5e5e5e: #5E5E5E;          /* mid-grey body */
	--clr-cc001c: #CC001C;          /* alt red */
	--clr-a8a08d: #A8A08D;          /* warm grey */
	--clr-908a8c: #908A8C;          /* cool grey */
	--clr-e7000b: #E7000B;          /* hot red */

	/* Semantic aliases for the most-used roles */
	--clr-bg: var(--clr-ffffff);
	--clr-fg: var(--clr-161616);
	--clr-muted: var(--clr-5e5e5e);
	--clr-accent: var(--clr-d31833);
	--clr-accent-dark: var(--clr-65131b);
	--clr-line: var(--clr-d9d9d9);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Sticky header would otherwise hide content under itself when an anchor
   scrolls a section to the top of the viewport. Reserve a margin equal to
   the header height so the section's first lines stay visible. */
[id] {
	scroll-margin-top: clamp(96px, 12vh, 160px);
}

body {
	margin: 0;
	font-family: var(--ff-outfit);
	color: var(--clr-fg);
	background: var(--clr-bg);
	line-height: 1.5;
	--explore-cta-height: clamp(240px, 40vw, 443px);
}

.customer-feedback + .global-cta-banner {
    background: #f6f5f4;
}

.c-gravity-button span { font-weight: 600 !important; }

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	word-break: break-word;
}

button {
	font: inherit;
	cursor: pointer;
	border: none;
	background: transparent;
	color: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .gform_validation_errors { display: none !important; }
.gform-theme--framework .gfield:where(.gfield--type-multiselect,.gfield--input-type-multiselect) .chosen-container-multi:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework .gfield:where(.gfield--type-select,.gfield--input-type-select) .chosen-search input[type=text]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework .gfield:where(.gfield--type-select,.gfield--input-type-select) .chosen-single:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework .gform-theme-field-control:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework select:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework select[multiple]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework textarea:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework.gform-theme.gform_wrapper .button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework.gform-theme.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework.gform-theme.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework.gform-theme.gform_wrapper button.button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework.gform-theme.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme--framework.gform-theme.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework)):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus { outline: none !important; border: none !important; }


h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

.wp-block-paragraph, .wp-block-heading { margin: 1.15em 0 0; }
.wp-block-paragraph:first-child, .wp-block-heading:first-child { margin-top: 0; }

/* ---------- 3. Layout primitives ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100000;
}
.skip-link:focus {
	background-color: #fff;
	color: #000;
	display: block;
	font-weight: 700;
	left: 6px;
	top: 7px;
	padding: 15px 23px 14px;
	text-decoration: none;
}




/* ---------- 4. Global header (placeholder; final styles ship in css/blocks/global_header.css if needed) ---------- */
.global-header {
	background: var(--clr-bg);
}

.global-header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 16px var(--container-pad-x);
	gap: 24px;
}

.global-header__menu {
	display: flex;
	gap: 32px;
	align-items: center;
}

.global-header__toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
}
.global-header__toggle-bar {
	width: 24px;
	height: 2px;
	background: var(--clr-fg);
	display: block;
}

@media (max-width: 1023px) {
	.global-header__toggle {
		display: inline-flex;
	}
	.global-header__nav {
		display: none;
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		background: var(--clr-bg);
		padding: 24px var(--container-pad-x);
		border-top: 1px solid var(--clr-line);
	}
	.global-header__nav.is-open {
		display: flex;
	}
	.global-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

/* ---------- 5. Global footer (placeholder) ---------- */
.global-footer {
	background: var(--clr-fg);
	color: var(--clr-bg);
	margin-top: auto;
}

.global-footer__container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 64px var(--container-pad-x) 32px;
}

.global-footer__top {
	display: grid;
	grid-template-columns: 1fr 2fr auto;
	gap: 48px;
	align-items: start;
}

.global-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.global-footer__social {
	display: flex;
	gap: 16px;
}

.global-footer__bottom {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	text-align: center;
	font-size: 14px;
	color: var(--clr-muted);
}

@media (max-width: 1023px) {
	.global-footer__top {
		grid-template-columns: 1fr;
	}
	.global-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.global-footer__columns {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
 * Source: globals/utilities-typography.css
 * ========================================================================== */
/* ==========================================================================
 * Utilities Typography (font-size)
 * --------------------------------------------------------------------------
 * Fluid `clamp()`-based font-size utilities driven by the Figma type scale.
 *
 * Scale & formula
 *   Each utility is `font-size: clamp(MIN, MID + Xvw, MAX)`.
 *   - MAX  = target size in rem (the design value at >= ~1440px).
 *   - MIN  ~ 90% of MAX (gracefully shrinks on small screens).
 *   - MID  is set so that at our reference viewport (~1440px) the computed
 *          value resolves to MAX, then `Xvw` carries the fluid scaling.
 *   - Fluid factor is ~0.25vw (gentle) for body sizes, ramped up for display
 *     sizes (fs48 / fs64) where the visual jump is more noticeable.
 *
 * Naming
 *   `.fs12` -> 12px / 0.75rem
 *   `.fs14` -> 14px / 0.875rem
 *   `.fs16` -> 16px / 1rem
 *   `.fs18` -> 18px / 1.125rem
 *   `.fs20` -> 20px / 1.25rem
 *   `.fs24` -> 24px / 1.5rem
 *   `.fs32` -> 32px / 2rem
 *   `.fs40` -> 40px / 2.5rem
 *   `.fs48` -> 48px / 3rem
 *   `.fs64` -> 64px / 4rem
 *
 * 1rem = 16px (browser default; we do not override <html> font-size).
 * ========================================================================== */

.fs9  { font-size: clamp(0.5rem, 0.49rem + 0.06vw, 0.5625rem); }     /* 8 -> 9 */
.fs10 { font-size: clamp(0.55rem, 0.54rem + 0.07vw, 0.625rem); }     /* 8.8 -> 10 */
.fs12 { font-size: clamp(0.675rem, 0.65rem + 0.125vw, 0.75rem); }    /* 10.8 -> 12 */
.fs13 { font-size: clamp(0.73rem, 0.7rem + 0.15vw, 0.8125rem); }     /* 11.7 -> 13 */
.fs14 { font-size: clamp(0.7875rem, 0.755rem + 0.165vw, 0.875rem); } /* 12.6 -> 14 */
.fs16 { font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); }           /* 14.4 -> 16 */
.fs18 { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }        /* 16 -> 18 */
.fs20 { font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem); }     /* 18 -> 20 */
.fs22 { font-size: clamp(1.2rem, 1.15rem + 0.3vw, 1.375rem); }       /* 19.2 -> 22 */
.fs24 { font-size: clamp(1.35rem, 1.27rem + 0.4vw, 1.5rem); }        /* 21.6 -> 24 */
.fs26 { font-size: clamp(1.4rem, 1.32rem + 0.4vw, 1.625rem); }       /* 22.4 -> 26 */
.fs28 { font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem); }         /* 24 -> 28 */
.fs30 { font-size: clamp(1.6rem, 1.5rem + 0.55vw, 1.875rem); }       /* 25.6 -> 30 */
.fs32 { font-size: clamp(1.8rem, 1.65rem + 0.75vw, 2rem); }          /* 28.8 -> 32 */
.fs36 { font-size: clamp(1.85rem, 1.7rem + 0.8vw, 2.25rem); }        /* 29.6 -> 36 */
.fs40 { font-size: clamp(2.25rem, 2rem + 1.25vw, 2.5rem); }          /* 36 -> 40 */
.fs42 { font-size: clamp(2rem, 1.7rem + 1.4vw, 2.625rem); }          /* 32 -> 42 */
.fs44 { font-size: clamp(2.1rem, 1.78rem + 1.5vw, 2.75rem); }        /* 33.6 -> 44 */
.fs48 { font-size: clamp(2.7rem, 2.4rem + 1.5vw, 3rem); }            /* 43.2 -> 48 */
.fs52 { font-size: clamp(2.4rem, 2rem + 1.85vw, 3.25rem); }          /* 38.4 -> 52 */
.fs55 {font-size: clamp(2.24rem, 2.05rem + 1.85vw, 3.4375rem);}     /* 38.4 -> 55 */
.fs56 { font-size: clamp(2.5rem, 2.1rem + 2vw, 3.5rem); }            /* 40 -> 56 */
.fs64 { font-size: clamp(3.6rem, 3rem + 3vw, 4rem); }                /* 57.6 -> 64 */
.fs70 { font-size: clamp(2.6rem, 2rem + 3vw, 4.375rem); }            /* 41.6 -> 70 */
.fs78 { font-size: clamp(2.6rem, 2rem + 3.4vw, 4.875rem); }          /* 41.6 -> 78 */

/* ==========================================================================
 * Source: globals/utilities-fontweight.css
 * ========================================================================== */
/* ==========================================================================
 * Utilities Font Weight
 * --------------------------------------------------------------------------
 * Single-property utilities for the weight axis. Pair with `.fsN` utilities
 * for the most common heading/body patterns.
 * ========================================================================== */

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* ==========================================================================
 * Source: globals/utilities-fontfamily.css
 * ========================================================================== */
/* ==========================================================================
 * Utilities Font Family
 * --------------------------------------------------------------------------
 * Single-property utilities for the font-family axis. Driven by the CSS
 * custom properties declared in globals.css šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã‚ Ã¢â‚¬â„¢ :root.
 * Apply at the markup level (PHP class attribute) so block CSS files
 * don't need to repeat `font-family: var(--ff-*)`.
 * ========================================================================== */

.ff-outfit  { font-family: var(--ff-outfit); }
.ff-inter   { font-family: var(--ff-inter); }
.ff-oswald  { font-family: var(--ff-oswald); }
.ff-poppins { font-family: var(--ff-poppins); }
.ff-damion  { font-family: var(--ff-damion); }

/* ==========================================================================
 * Source: globals/section-settings-hooks.css
 * ========================================================================== */
/* ==========================================================================
 * Section Settings text color class hooks (Phase 2.6)
 *
 * Output by `jl_build_section_attributes()` from the ACF Section Settings
 * Clone field on every FC layout. Text color is still a curated palette
 * Select so we render it as a class hook.
 *
 * BACKGROUND COLOR was migrated to ACF Color Picker (w/ alpha) in Phase 2.6.
 * It is now emitted as an inline style="background-color: šÃ‚¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚¬Ãââ‚
 ¦" attribute
 * directly on the <section>, so no .has-bg-* rules live here anymore.
 *
 * Loaded after jl-globals so it can reference --clr-* tokens if needed.
 * Per-block component CSS may override these for tighter contrast needs.
 * ========================================================================== */

/* ---------- Text color ---------- */
.has-text-dark      { color: #161616; }
.has-text-white     { color: #FFFFFF; }
.has-text-brand-red { color: #D31833; }
.has-text-muted     { color: #5E5E5E; }

/* ==========================================================================
 * Source: components/c-container.css
 * ========================================================================== */
/* ==========================================================================
 * Component c-container
 * --------------------------------------------------------------------------
 * The single source of horizontal layout constraint.
 *
 * Formula: design canvas W -> max-width: (W + 48)px, padding-inline: 24px.
 * For a 1440px Figma canvas:  1440 + 48 = 1488px max-width, 24px side gutter.
 * The +48 keeps the content "bleed" away from the viewport edge at the exact
 * design width so the 24px inner gutter is preserved when the viewport is
 * narrower than the canvas.
 *
 * Rules (enforced by Phase 3 refactor):
 *   - Sections, headers, footers MUST NOT carry horizontal padding.
 *   - All horizontal padding lives here.
 * ========================================================================== */

.c-container {
	width: 100%;
	max-width: 1488px;
	margin-inline: auto;
	padding-inline: 23px;
}

/* Narrow content variant (e.g. centered text blocks, single-column copy). */
.c-container--narrow {
	max-width: 960px;
}

/* ==========================================================================
 * Source: components/c-button.css
 * ========================================================================== */
/* ==========================================================================
 * Component c-button
 * --------------------------------------------------------------------------
 * Base button + colour modifiers.
 *
 * Markup pattern:
 *   <a class="c-button c-button--primary fs16 fw-600" href=""</a>
 *
 * The base owns layout (display, padding, radius, transition).
 * Modifiers own colour (background, foreground, border).
 * Typography is layered on by utilities (.fsN .fw-N) keeps the base free of
 * any font-size declarations so a single button can be re-skinned by simply
 * swapping the utility classes.
 * ========================================================================== */

.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: var(--ff-outfit);
	font-weight: 600;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.c-button:focus-visible {
	outline: 2px solid var(--clr-d31833);
	outline-offset: 2px;
}

/* ---------- Size modifiers ---------- */
.c-button--sm {
	padding: 10px 20px;
	font-size: 14px;
}

.c-button--lg {
	padding: 18px 36px;
	font-size: 20px;
}

/* ---------- Colour modifiers ---------- */

/* Primary brand red filled. */
.c-button--primary {
	background: var(--clr-d31833);
	color: var(--clr-ffffff);
	border-color: var(--clr-d31833);
}

.c-button--primary:hover,
.c-button--primary:focus-visible {
	background: #fbecef;
	border-color: #fbecef;
	color: var(--clr-000000);
	transform: translateY(-1px);
}

/* Secondary white filled, red text & red border. */
.c-button--secondary {
	background: var(--clr-ffffff);
	color: var(--clr-d31833);
	border-color: var(--clr-d31833);
}

.c-button--secondary:hover,
.c-button--secondary:focus-visible {
	background: var(--clr-d31833);
	color: var(--clr-ffffff);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(211, 24, 51, 0.25);
}

/* Outline transparent with currentColor border. */
.c-button--outline {
	background: transparent;
	color: currentColor;
	border-color: currentColor;
}

.c-button--outline:hover,
.c-button--outline:focus-visible {
	background: currentColor;
	color: var(--clr-d31833);
	transform: translateY(-2px);
}

/* Ghost translucent-white over photographic background (used on hero secondary). */
.c-button--ghost {
	background: rgba(255, 255, 255, 0.10);
	color: var(--clr-ffffff);
	border-color: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(6px);
}

.c-button--ghost:hover,
.c-button--ghost:focus-visible {
	background: #000;
	color: var(--clr-ffffff);
	transform: translateY(-2px);
	border-color: #000;
	filter: invert(1);
}

/* ==========================================================================
 * Source: components/c-slider-arrow.css
 * ========================================================================== */
/* ==========================================================================
 * Component c-slider-arrow
 * --------------------------------------------------------------------------
 * 48x48 circular arrow button used to navigate carousels (Slick, etc.).
 *
 * Markup pattern:
 *   <button class="c-slider-arrow c-slider-arrow--prev" aria-label="Previous">
 *     <svg>/svg>
 *   </button>
 *
 * Positioning is the responsibility of the consumer (carousel wrapper). This
 * component only owns the round container, the colour states, and the
 * left/right orientation of its child SVG.
 * ========================================================================== */

.c-slider-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: var(--clr-d31833);
	cursor: pointer;
	transition: all 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.c-slider-arrow:hover,
.c-slider-arrow:focus-visible {filter: brightness(0.5);}

.c-slider-arrow:disabled,
.c-slider-arrow.is-disabled,
.c-slider-arrow.slick-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.c-slider-arrow svg {
	width: 14px;
	height: 20px;
	display: block;
}

/* Orientation the SVG ships pointing right; rotate the prev variant. */
.c-slider-arrow--next svg { transform: rotate(180deg); }
.c-slider-arrow--next svg {transform: rotate(180deg);}

/* ==========================================================================
 * Source: components/u-has-home.css
 * ========================================================================== */
/* ==========================================================================
 * Utility u-has-home (eyebrow with home/house icon prefix)
 * --------------------------------------------------------------------------
 * Drop the `.has-home` class on an inline eyebrow element to prepend a small
 * home-icon glyph via ::before.
 *
 * Markup pattern:
 *   <span class="has-home fs18 fw-600">REAL CUSTOMER EXPERIENCES</span>
 *
 * The icon ships as an SVG file in /assets/icons/home.svg and is injected as
 * a `background-image` so its colour can be inverted by sibling utility
 * classes (e.g. white text on dark sections) without round-tripping back to
 * the asset.
 * ========================================================================== */

.has-home {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.has-home::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 18px;
	flex-shrink: 0;
	background-image: url("../assets/icons/home-icn.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* On dark backgrounds invert the icon to white. Currently swap by providing
   a sibling utility on the parent: `<div class="has-home has-home--on-dark">`.
   We can't recolor a background-image with CSS filters cleanly without losing
   crispness, so this uses a separate SVG file when an inverted variant lands. */
.has-home--on-dark::before {
	filter: brightness(0) invert(1);
}

/* ==========================================================================
 * Source: globals/global_header.css
 * ========================================================================== */
/* ==========================================================================
 * Global Header site-wide
 * Source: pages/home-page/figma/sections/header.json + screenshots/header.png
 *
 * Phase 3 refactor
 *   - Horizontal padding removed from contact-bar-inner / main-inner; both
 *     elements now carry `.c-container` so the 24px gutter + max-width comes
 *     from the single source of truth.
 *   - Logo overlap fix: brand is no longer absolutely positioned. The main
 *     row is now `align-items: center` with the brand as the first flex
 *     child; the negative top inset that used to push the logo above the row
 *     is gone.
 *   - Font-size / weight / line-height moved to `.fsN .fw-N` utilities on
 *     the matching elements in PHP. BEM rules now declare only the
 *     per-instance font-family + color where they differ from inherit.
 *   - Color inheritance DRY pass: removed redundant color declarations that
 *     equaled the inherited body color.
 * ========================================================================== */

.global-header {
	position: relative;
	z-index: 50;
	background: var(--clr-ffffff);
}

/* The logo lives inside `.global-header__main-inner` but is positioned
   absolutely relative to the entire `.global-header` so it can bleed above
   the contact bar AND below the white nav row, matching the Figma where the
   dog illustration sits above the header and "ROOFING LLC" sits below the
   bottom border. */
.global-header__main-inner .global-header__brand {
	position: absolute;
}

/* ---------- Contact bar (top thin grey row) ---------- */
.global-header__contact-bar {
	background: #EEECE8;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* `.global-header__contact-bar-inner` element now carries `.c-container` in
   markup, so the 24px gutter + max-width come from the single source. */
.global-header__contact-bar-inner {
	padding-block: 10px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 35px;
	flex-wrap: wrap;
}

.global-header__contact-item {
	color: #000;
	line-height: calc(24 / 16);
	margin: 0;
}

.global-header__contact-phone {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	padding-left: 35px;
	transition: all 0.3s ease;
	color: var(--clr-161616);
	border-left: #D9D9D9 1px solid;
}

.global-header__contact-phone-icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	color: var(--clr-d31833);
}

.global-header__contact-phone-icon svg {
	width: 100%;
	height: 100%;
}

.global-header__contact-phone-number {
	line-height: calc(34 / 24);
	text-shadow: 0px 4px 29px rgba(0, 0, 0, 0.25);
}

.global-header__contact-phone:hover {
	color: var(--clr-d31833);
}

/* ---------- Main nav row ---------- */
.global-header__main {
	background: var(--clr-ffffff);
	position: relative;
	border-bottom: 3px solid var(--clr-d9d9d9);
}

/* `.global-header__main-inner` element carries `.c-container` in markup. The
   row is now flex/center so the logo and the menu can never collide
   vertically they share a baseline. Use `justify-content: space-between`
   so the logo anchors left, menu+CTA anchor right. */
/* The c-container already provides the horizontal gutter. We reserve space
   for the absolutely-positioned logo via a fluid clamp() so the menu never
   crashes into it without hardcoding a specific px value. */
.global-header__main-inner {
	padding-inline-start: clamp(110px, 12vw, 200px);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	position: relative;
}

/* Logo bleeds vertically above and below the header. The brand is anchored
   to the bottom of `.global-header__main` (white nav row) and overflows
   downward; its height is larger than that row so it also rises above the
   contact bar (its top edge sits ~24px above the contact bar top). */
.global-header__brand {
	display: inline-flex;
	align-items: center;
	transition: all 0.3s ease;
	flex-shrink: 0;
	left: 24px;
	bottom: -82px;
	z-index: 3;
}

.global-header__brand:hover {
	transform: translateY(-2px);
}

.global-header__logo {
	max-width: clamp(110px, 10vw, 172px);
	max-height: 200px;
	display: block;
}

/* Brand-text falls back to .ff-outfit applied as a utility on markup. */
.global-header__brand-text {}

/* ---------- Navigation menu ---------- */
.global-header__nav {
	display: flex;
	align-items: center;
	gap: 20px;
}

.global-header__menu {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-header__menu-item {
	position: relative;
}

/* Legacy ACF-driven menu hook (kept for backward compat). The WP-nav-menu
   bridge below has its own font sizing because we can't apply utility
   classes on wp_nav_menu output. */
.global-header__menu-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: calc(24 / 16);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--clr-161616);
	padding: 6px 4px;
	transition: all 0.3s ease;
}

.global-header__menu-link:hover {
	color: var(--clr-d31833);
}

.global-header__menu-caret {
	display: inline-flex;
	width: 13px;
	height: 7px;
}

.global-header__menu-caret svg {
	width: 100%;
	height: 100%;
}

/* ---------- Submenu dropdowns ----------
   Activated automatically whenever a primary nav item has children in WP
   admin  Menus. The default WP walker emits:
     <li class="menu-item menu-item-has-children">
       <a>Parent</a>
       <ul class="sub-menu">
         <li class="menu-item"><a>Child</a></li>
       </ul>
     </li>
   We render a caret next to parent items via a CSS pseudo-element (no PHP
   walker dependency) and toggle the panel on hover or focus-within. */
.global-header__menu .menu-item-has-children > a::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 6px;
	margin-left: 4px;
	order: 2; /* sits after the label inside the flex link */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D31833' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transition: transform 0.3s ease;
}

.global-header__menu .menu-item-has-children:hover > a::before,
.global-header__menu .menu-item-has-children:focus-within > a::before {
	transform: rotate(180deg);
}

.global-header__menu .sub-menu {
	position: absolute;
	top: calc(100% - 6px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 220px;
	background: var(--clr-ffffff);
	border-radius: 0;
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
	padding: 12px 0 0;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	z-index: 10;
}

.global-header__menu .menu-item-has-children:hover > .sub-menu,
.global-header__menu .menu-item-has-children:focus-within > .sub-menu,
.global-header__menu .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.global-header__menu .sub-menu .menu-item {
	display: block;
	width: 100%;
}

.global-header__menu .sub-menu .menu-item > a {
	display: flex;
	width: 100%;
	padding: 10px 20px;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--clr-161616);
}

.global-header__menu .sub-menu .menu-item > a::before {
	content: none;
}

.global-header__menu .sub-menu .menu-item > a::after {
	content: none;
}

.global-header__menu .sub-menu .menu-item > a:hover,
.global-header__menu .sub-menu .menu-item > a:focus-visible {
	background: rgba(211, 24, 51, 0.06);
	color: var(--clr-d31833);
}

/* ---------- WP nav-menu bridge ---------- *
 * `wp_nav_menu()` outputs <li class="menu-item"> with a child <a>. The legacy
 * ACF-driven markup used `.global-header__menu-item` / `.global-header__menu-link`.
 * Bridge both so existing styles apply to the WP-generated menu without
 * duplicating every rule above. We can't move these to .fsN utilities because
 * we don't control the markup wp_nav_menu emits. */
.global-header__menu .menu-item {
	position: relative;
}

.global-header__menu li:not(.current_page_item) > a::before {
    filter: brightness(0);
}

.global-header__menu li:not(.current_page_item) > a:hover::before {
    filter: inherit;
}

.global-header__menu .menu-item > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ff-inter);
	font-weight: 500;
	font-size: 16px;
	line-height: calc(24 / 16);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--clr-161616);
	padding: 29px 4px;
	transition: color 0.3s ease;
	position: relative;
}

/* Animated underline anchored to the link's bottom edge. Hidden by default;
   scales to full width on hover or for the current page. */
.global-header__menu .menu-item > a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -3px;
	height: 3px;
	background: var(--clr-d31833);
	transform: translateX(-50%);
	transform-origin: center;
	transition: 0.7s ease;
	width: 0;
	visibility: hidden;
	max-width: 30px;
}

.global-header__menu .menu-item > a:hover,
.global-header__menu .menu-item > a:focus-visible,
.global-header__menu .current-menu-item > a,
.global-header__menu .current-menu-ancestor > a,
.global-header__menu .current-menu-parent > a {
	color: var(--clr-d31833);
}

.global-header__menu .menu-item > a:hover::after,
.global-header__menu .menu-item > a:focus-visible::after,
.global-header__menu .current-menu-item > a::after,
.global-header__menu .current-menu-ancestor > a::after,
.global-header__menu .current-menu-parent > a::after {
	visibility: visible;
	width: 100%;
}

/* ---------- CTA button ----------
   Typography (size/weight/family) comes from .ff-outfit .fs18 .fw-600
   utilities applied on the markup. */
.global-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--clr-d31833);
	color: var(--clr-ffffff);
	line-height: 1;
	padding: 16px 25px;
	border-radius: 8px;
	transition: all 0.3s ease;
	margin-left: 20px;
}

.global-header__cta:hover {
	background: var(--clr-65131b);
}

.global-header__cta-arrow {
	display: inline-flex;
	width: 18px;
	height: 14px;
}

.global-header__cta-arrow svg {
	width: 100%;
	height: 100%;
}

/* ---------- Hamburger toggle (mobile/tablet) ---------- */
.global-header__toggle {
	display: none;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-left: auto;
}

.global-header__toggle-bar {
	display: block;
	width: 34px;
	height: 3px;
	background: var(--clr-161616);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.global-header__toggle[aria-expanded="true"] .global-header__toggle-bar:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}
.global-header__toggle[aria-expanded="true"] .global-header__toggle-bar:nth-child(3) {
	opacity: 0;
}
.global-header__toggle[aria-expanded="true"] .global-header__toggle-bar:nth-child(4) {
	transform: translateY(-10px) rotate(-45deg);
}

/* ---------- Responsive ---------- */
/* Tighter desktop scaling between 1024 and 1599 so the menu, logo and CTA
   never crowd into each other before the hamburger kicks in. The logo
   reserve padding already uses clamp() on the base rule so this block only
   tunes typography + gap, not horizontal padding. */
@media (max-width: 1599px) {
	.global-header__logo {
	}
	.global-header__menu {
		gap: 14px;
	}
	.global-header__menu .menu-item > a {
		font-size: 14px;
	}
	.global-header__cta {
		font-size: 16px;
		padding: 12px 22px;
	}
}


@media (max-width: 1300px) {
	.global-header__menu .menu-item > a { font-size: 13px; }
	
}

@media (max-width: 1279px) {
	.global-header__contact-bar-inner {
		justify-content: center;
		gap: 8px;
	}
	.global-header__contact-item--warranty,
	.global-header__contact-item--financing {
		font-size: 12px;
		text-align: center;
	}
	.global-header__contact-phone {
		padding-left: 0;
		display: flex;
		width: 100%;
		justify-content: center;
		border-left: 0;
	}
	.global-header__contact-phone-number {
		font-size: 20px;
	}
	/* Below 1200px swap to the hamburger experience. The header collapses to
	   a compact logo + toggle row; the full menu opens in a dropdown panel. */
	.global-header__main-inner .global-header__brand {
		position: relative;
		left: 0;
		bottom: auto;
	}
	.global-header__main-inner {
		padding: 16px 23px;
		justify-content: space-between;
	}
	 
	.global-header__toggle {
		display: inline-flex;
	}
	.global-header__nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--clr-ffffff);
		padding: 16px 24px 24px;
		border-top: 1px solid var(--clr-d9d9d9);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
		z-index: 60;
	}
	.global-header__nav.is-open {
		display: flex;
	}
	.global-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.global-header__menu .menu-item {
		width: 100%;
	}
	.global-header__menu .menu-item > a {
		justify-content: space-between;
		width: 100%;
		padding: 14px 0;
		border-bottom: 1px solid var(--clr-d9d9d9);
		font-size: 15px;
	}
	.global-header__menu .menu-item > a::after {
		display: none; /* underline only on desktop */
	}
	/* Override desktop's caret pseudo + replace with a larger tap target.
	   The desktop caret rotates 180deg on hover; on mobile we rotate it via
	   the parent's `.is-open` class for clearer affordance. */
	.global-header__menu .menu-item-has-children > a::before {
		width: 14px;
		height: 14px;
		margin-left: 0;
		flex-shrink: 0;
		order: 2;
		background-size: 14px 8px;
	}
	.global-header__menu .menu-item-has-children:hover > a::before,
	.global-header__menu .menu-item-has-children:focus-within > a::before {
		transform: none; /* stop the desktop hover rotation on mobile */
	}
	.global-header__menu .menu-item-has-children.is-open > a::before {
		transform: rotate(180deg);
	}
	/* Mobile submenu 
 
	 flow as a nested list. JS handles the open/close via
	   jQuery `slideToggle()` for a smooth animation, so we only set the
	   resting/hidden state here. No CSS max-height transition (would jerk). */
	.global-header__menu .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.03);
		border-radius: 0;
		padding: 0;
		min-width: 0;
		display: none;
		transition: none;
	}
	/* On mobile, jQuery slideToggle is the sole driver of show/hide for the
	   submenu. We deliberately do NOT set `display: block` here — letting CSS
	   flip display the instant `.is-open` is added would race jQuery and the
	   slide animation would jerk to the final height. The `.is-open` class
	   stays as a state hook (caret rotation, aria-expanded mirror). */
	.global-header__menu .menu-item-has-children.is-open > .sub-menu {
		transform: inherit;
	}
	.global-header__menu .sub-menu .menu-item > a {
		padding: 12px 24px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
		font-size: 14px;
	}
	.global-header__cta {
		margin-left: 0;
		margin-top: 12px;
		justify-content: center;
	}

	/* Open mobile nav: lock page scroll + show overlay behind the menu.
	   The header (z-index: 50) and its nav panel (z-index: 60) stay above the
	   overlay; clicks on the overlay land outside `.global-header` so the
	   existing document-level handler in theme.js closes the panel. The nav
	   itself already has `overflow-y: auto` + `max-height: calc(100vh - 100%)`
	   so a tall menu scrolls inside the panel while the page underneath is
	   pinned. */
	body.is-nav-open {
		overflow: hidden;
	}
	body.is-nav-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 40;
	}
}

@media (max-width: 599px) {
	.global-header__main-inner {
		min-height: 64px;
	}
	 
	.global-header__contact-item--financing {
		display: none;
	}
	.global-header__contact-phone-number {
		font-size: 18px;
	}
}

/* ==========================================================================
 * Source: globals/global_footer.css
 * ========================================================================== */
/* ==========================================================================
 * Global Footer site-wide
 * Source: pages/home-page/figma/sections/footer.json + screenshots/footer.png
 * ========================================================================== */

.global-footer {
	position: relative;
	background: url('../assets/images/footer-top-bg.jpg') no-repeat;
	color: var(--clr-ffffff);
	overflow: hidden;
	background-size: cover;
	--footer-logox: clamp(90px, 10vw, 184px);
}

.global-footer::before {
	/* Dog silhouette watermark left-side bleed (decorative). */
	content: "";
	position: absolute;
	left: -40px;
	top: 80px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
	pointer-events: none;
	opacity: 0.6;
}

.global-footer__container {
	position: relative;
	z-index: 1;
	padding: calc((var(--explore-cta-height) * 0.4 ) + clamp(22px, 6vw, 76px)) 0 clamp(50px, 8vw, 130px);
}

.global-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	row-gap: 34px;
	align-items: start;
	column-gap: 24px;
}

/* ---------- Brand column (logo + tagline + social) ---------- */
.global-footer__brand-col {
	display: flex;
	flex-wrap: wrap;
	min-width: min(24.25vw, 454px);
	column-gap: 24px;
	align-items: center;
	row-gap: clamp(32px, 3vw, 55px);
}

.global-footer__brand-link {
	display: inline-flex;
	transition: all 0.3s ease;
	max-width: var(--footer-logox);
	flex-direction: column;
}

.global-footer__brand-link:hover {
	transform: translateY(-2px);
}

.global-footer__logo {
	width: clamp(80px,10vw, 184px);
	height: auto;
	display: block;
}

.global-footer__brand-text {
	color: var(--clr-ffffff);
}

.global-footer__tagline {
	line-height: 30px;
	color: var(--clr-908a8c);
	margin: 0;
	max-width: calc(100% - var(--footer-logox) - 24px);
	padding: 32px 0;
}

.global-footer__tagline p {
	margin: 0;
}

.global-footer__social {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: var(--clr-d9d9d9);
	transition: all 0.3s ease;
}

.global-footer__social-link:hover {
	background: var(--clr-d31833);
	border-color: var(--clr-d31833);
	color: var(--clr-ffffff);
	transform: translateY(-2px);
}

.global-footer__social-icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	object-fit: contain;
	color: currentColor;
}

.global-footer__social-icon svg, .global-footer__social-icon path {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.global-footer__social-text {
	/* Sizing comes from .fs12 + .fw-600 utilities applied in markup. */
}

/* ---------- Column lists ---------- */
.global-footer__column,
.global-footer__contact-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 0 0;
}

.global-footer__contact-col {background: linear-gradient(180deg, #5e5e5e40 0%, rgba(94, 94, 94, 0) 100%);border-radius: 32px;padding: 32px;min-width: 420px;}

.global-footer__column-title {
	    font-family: 'Inter';
	line-height: 1.3;
	color: var(--clr-d31833);
	margin: 0;
}

.global-footer__column-title:after { content: ''; height: 2px; width: 30px; background: #fff; display: block; margin: 8px 0 0;}

.global-footer__column-title--accent {
	/* Reserved hook; current site renders every footer column title red. */
}

.global-footer__column-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-footer__column-link {
	line-height: 30px;
	color: var(--clr-908a8c);
	transition: all 0.3s ease;
}

.global-footer__column-link:hover {
	color: var(--clr-ffffff);
}

/* ---------- WP nav-menu bridge ----------
 * wp_nav_menu() emits its own DOM; we can't drop utility classes on those
 * elements from PHP, so style them here. Use CSS variables tied to the
 * design tokens so they stay in sync if those tokens change. */
.global-footer__column-list .menu-item {
	display: block;
}

.global-footer__column-list .menu-item > a {
	font-family: var(--ff-inter);
	font-weight: 400;
	font-size: 1.125rem; /* .fs18 equivalent wp_nav_menu can't carry .fs18 */
	line-height: 30px;
	color: var(--clr-908a8c);
	transition: all 0.3s ease;
}

.global-footer__column-list .menu-item > a:hover {
	color: var(--clr-ffffff);
}

/* ---------- Contact column ---------- */
.global-footer__contact-list {
	display: flex;
	flex-direction: column;
 
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-footer__contact-item {
	display: flex;
	align-items: flex-start;
	column-gap: clamp(22px, 2vw, 44px);
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.global-footer__contact-item:after {content: '';width: 100%;position: absolute;height: 1px;background: linear-gradient(90deg, #5E5E5E 0%, rgba(94, 94, 94, 0) 100%);bottom: 0;}

.global-footer__contact-item:last-child:after { opacity: 0 }

/* Each contact icon sits inside a small red round badge matches the
   Figma where address/phone/email glyphs are wrapped in red circles. */
.global-footer__contact-icon {margin: 4px 0 0;}

.global-footer__contact-list svg {
	max-width: 21px;
	max-height: 22px;
}

 

.global-footer__contact-text {
	line-height: 1;
	color: var(--clr-908a8c);
}

.global-footer__contact-link {
	line-height: 30px;
	color: var(--clr-908a8c);
	transition: all 0.3s ease;
}

.global-footer__contact-link:hover {
	color: var(--clr-ffffff);
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
	.global-footer__container {
	}
}

@media (max-width: 1279px) {
	.global-footer__container {
	}
	.global-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.global-footer__contact-col,
	.global-footer__brand-col {
		min-width: inherit;
	}

	.global-footer__brand-col {
		padding-top: 40px;
		flex-direction: column;
		align-items: flex-start;
	}

	.global-footer__tagline {padding: 0;max-width: 100%;}
	
}

@media (max-width: 640px) {

	.global-footer__grid { grid-template-columns: 1fr; }
	
	.global-footer__container {
	}
	.global-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
 * Source: globals/global_legal.css
 * ========================================================================== */
/* ==========================================================================
 * Legal black strip
 * Source: pages/home-page/figma/sections/legal.json + screenshots/legal.png
 *
 * Phase 1 refactor notes
 *   - Container max-width + margin-inline -> `.c-container` (markup).
 *   - 16px copyright / link text -> .fs16 + .fw-400 utilities.
 *   - PHASE 3 TODO: remove `padding: 28px 240px` from `.legal-strip`.
 * ========================================================================== */

.legal-strip {
	background: url('../assets/images/footer-bottom-bg.jpg') no-repeat;
	/* PHASE 3 TODO: remove inline padding-x; let .c-container provide gutter. */
	padding: 28px 0;
}

/* `.legal-strip__container` element also carries `.c-container` in markup. */
.legal-strip__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.legal-strip__copyright {
	line-height: 1.5;
	color: #BBB3B4;
	margin: 0;
}

.legal-strip__links {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-strip__link-item {
	display: inline-flex;
	align-items: center;
	 
	gap: 14px;
}

.legal-strip__link {
	line-height: 1.5;
	color: #BBB3B4;
	transition: all 0.3s ease;
}

.legal-strip__link:hover {
	color: var(--clr-ffffff);
}

.legal-strip__divider {
	color: var(--clr-908a8c);
	opacity: 0.6;
}

@media (max-width: 1280px) {
	.legal-strip {
		padding: 24px 0;
	}
}

@media (max-width: 1023px) {
	.legal-strip {
	}
}

@media (max-width: 599px) {
	.legal-strip {
		padding: 20px 16px;
	}
	.legal-strip__container {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
	}
}

/* ==========================================================================
 * Source: blocks/hero.css
 * ========================================================================== */
/* ==========================================================================
 * Hero full-bleed banner with overlay + trust cards
 * Source: pages/home-page/figma/sections/hero.json + screenshots/hero.png
 *
 * Phase 3 refactor
 *   - Removed horizontal padding from `.hero`; section now full-bleed and
 *     the inner `.hero__container` (carrying `.c-container`) owns the gutter.
 *   - Trust cards stop using a viewport-anchored `width: calc(100% - 240px)`.
 *     They now max-width at the container (1488px) so they no longer over-
 *     hang the secondary button when the section padding-x is gone.
 *   - Gave the `.hero__buttons` a larger bottom margin so the buttons clear
 *     the trust-cards row at all viewport widths.
 *   - Heading + accent-heading remain off-scale display sizes (70 / 78);
 *     they stay as BEM declarations because there is no .fs70 / .fs78
 *     utility. Body/button/trust-card sizes already use .fsN utilities
 *     applied in PHP.
 *   - Color inheritance: dropped the redundant `color: var(--clr-ffffff)`
 *     from `.hero__heading` and `.hero__body` since the section root sets
 *     the same color and they inherit it.
 * ========================================================================== */

.hero {
	position: relative;
	min-height: 945px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--clr-ffffff);
	overflow: hidden;
	padding-block: clamp(146px, 16vw, 215px) 110px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}



.hero:before, .page-banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: url('../assets/images/overlay-image.png') no-repeat;
    background-size: cover;
    pointer-events: none;
}

/* `.hero__container` element carries `.c-container` in markup gutter +
   max-width come from there. We only own the in-section layout (column flex,
   z-index above the overlay, gap between content and trust-card row). */
.hero__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.hero__content {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 1128px;
}

/* Typography (size/weight/family) lives in utilities applied on the markup. */
.hero__accent-heading {
	line-height: 1;
	color: var(--clr-d31833);
	margin: 0;
}

.hero__heading {
	line-height: calc(95 / 78);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0;
}

.hero__body {
	line-height: calc(36 / 20);
	margin: 0;
	max-width: 791px;
}

.hero__body strong {
	font-weight: 700;
}

.hero__buttons {
	display: flex;
	flex-direction: row;
	gap: clamp(16px, 1.5vw, 30px);
	margin-top: 10px;
	flex-wrap: wrap;
}

/* `.hero__btn` is the legacy BEM hook kept as a no-op anchor so any
   page-level overrides can target it. All paint / sizing now lives on
   `.c-button` + modifiers. Trailing svg sizing helpers stay here because
   they're specific to the hero buttons' icon slot. */
.hero__btn-arrow,
.hero__btn-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}

.hero__btn-arrow svg,
.hero__btn-icon svg {
	width: 100%;
	height: 100%;
}

/* ---------- Trust cards (in-flow row at bottom of hero) ----------
   Cards live as the last child of `.hero__container` so they sit naturally
   below the content with the container's gap controlling the spacing. Using
   `flex-wrap` means N>4 cards push the row to additional lines and the hero
   simply grows taller (it has no fixed height) so the cards never bleed into
   the next section. Each card uses `flex-basis: calc(25% - gap)` so up to 4
   fit per row at design width, then wrap. */

.hero__trust {
    z-index: 3;
    position: relative;
}

.hero__trust-cards {
	display: flex;
	flex-wrap: wrap;
	--gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--gap);
	padding: 16px 16px;
	background: #fff;
	transform: translateY(var(--stats-transform));
	--stats-transform: -88px;
	margin-bottom: var(--stats-transform);
	border-radius: 16px;
}

.hero__trust-card {
	background: var(--clr-ffffff);
	border-radius: 16px;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: all 0.3s ease;
	 /* 4 per row at design width, wraps when N>4 */
	max-width: calc(( 100% - 3 * var(--gap) ) / 4);
	width: 100%;
	background: linear-gradient(180deg, rgba(22, 22, 22, 0.1) 0%, rgba(22, 22, 22, 0) 100%);
}

.hero__trust-card:nth-child(2n) { background: linear-gradient(180deg, rgba(211, 24, 51, 0.1) 0%, rgba(211, 24, 51, 0) 100%);
}


 

 

.hero__trust-card-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	position: relative;
	z-index: 1;
}

.hero__trust-card-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.hero__trust-card-text:first-line {
	color: var(--clr-161616); 
}

.hero__trust-card-text {
	line-height: calc(32 / 22);
	color: #5E5E5E;
	position: relative;
	z-index: 1;
	max-width: 200px;
}

.hero__trust-card-text:first-line {
	font-weight: 700;
}


.hero__trust-card-text strong {
	font-weight: 700;
}

/* ---------- Responsive ----------
   Heading/accent sizes already scale via the `.fs70` / `.fs78` clamp()-based
   utilities applied on markup, so this block only collapses layout. */
@media (max-width: 1260px) {

	.hero {
		min-height: 720px;
		padding-bottom: 140px;
	}
	
	.hero__heading {
		line-height: calc(58 / 52);
	}
	
	.hero__trust-card {
		max-width: calc(( 100% - var(--gap) ) / 2);
	}

	
}

@media (max-width: 599px) {
	.hero {
	}
	.hero__heading {
		line-height: calc(42 / 36);
	}
	.hero__buttons {
		flex-direction: column;
		gap: 14px;
	}
	.hero__trust-cards {
		gap: 16px;
	}
	.hero__trust-card {
		max-width: 100%;
		padding: 16px 20px;
	}
}

/* ==========================================================================
 * Source: blocks/about.css
 * ========================================================================== */
/* ==========================================================================
 * About owner portrait + metrics
 * Source: pages/home-page/figma/sections/about.json + screenshots/about.png
 *
 * Phase 3 refactor
 *   - Removed horizontal padding from `.about`; container lives on inner
 *     `.c-container` element.
 *   - Grid šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã‚ Ã¢â‚¬â„¢ Flex: `.about__container` was 2-col grid; now a flex row with
 *     each child taking 1/2 of the width minus the gap. `.about__metrics`
 *     was 2-col grid; now flex-wrap with each <li> at calc(50% - gap/2).
 *   - Decimal line-heights converted to `calc(target / base)` form.
 *   - Color inheritance: section root sets the page text color via the
 *     ACF section-settings hook (`.has-text-*`). Children only declare
 *     color when they genuinely differ eyebrow (red), heading (black),
 *     metric-label (muted grey), badge text (white). Body uses muted grey
 *     so it stays explicit.
 * ========================================================================== */

.about {
	padding-block: clamp(72px, 9vw, 120px) clamp(64px, 8vw, 160px);
	position: relative;
	overflow: hidden;
	background: url(../assets/images/about-bg-decore.png) no-repeat #fff;
	background-position: left top -160%;
	background-size: 40%;
}

 

/* ---------- Modifier variants ----------
   - `.about--image-right` swaps the portrait + content columns so the image
     sits on the right instead of the default left.
   - `.about--bg-cream` / `.about--bg-light-grey` change the section bg color
     for pages that want a softer surface than pure white.
*/
.about--image-right .about__container {
	flex-direction: row-reverse;
}

.about--bg-cream {
	background: #FFF8F0;
}

.about--bg-light-grey {
	background: #F5F5F5;
}

/* `.about__container` element carries `.c-container` in markup.
   Was 2-col CSS Grid; converted to Flex Phase 3. */
.about__container {
	display: flex;
	flex-direction: row;
	column-gap: clamp(40px, 9vw, 156px);
	align-items: center;
	flex-wrap: wrap;
}

.about__container > .about__media,
.about__container > .about__content {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- Media side ---------- */
.about__media {
	position: relative;
	display: flex;
	align-items: flex-start;
}

.about__image-wrap {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.about__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	min-height: clamp(290px, 40vw, 640px);
}

/* Iframe variant  used when the about block's media_type = iframe (e.g. county
   pages embedding a Google Map). Keeps the same outer shape as the image. */
.about__image-wrap--iframe {
	aspect-ratio: 683 / 510;
	min-height: 320px;
}

.about__image-wrap--iframe iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	border-radius: inherit;
}

/* 35 YEARS animated badge the entire badge (red circle, ring text, number,
   label) is now baked into a single GIF the developer uploads via ACF. The
   markup is just an <img> floated over the top-right of the portrait so the
   GIF can animate on its own. */
.about__badge {
	position: absolute;
	transform: translatex(50%);
	top: 25%;
	width: clamp(110px, 11vw, 170px);
	height: clamp(110px, 11vw, 170px);
	z-index: 2;
	right: 0;
}


.about--image-right .about__badge {right: 100%;top: 50px;}

.about__badge-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Content side ---------- */
.about__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Eyebrow uses `.has-home` utility for icon + .ff/.fs/.fw utilities on markup. */
.about__eyebrow {
	line-height: calc(24 / 18);
	color: var(--clr-d31833);
	margin: 0;
}

.about__heading {
	line-height: calc(56 / 55);
	color: var(--clr-000000);
	margin: 0;
}

.about__body {
	line-height: calc(30 / 18);
	color: var(--clr-5e5e5e);
}

.about__body strong { font-weight: 600; }

.about__bottom-content {
    margin-top: 16px;
}

.about__body p {
	margin: 0 0 16px;
}

.about__body p:last-child {
	margin-bottom: 0;
}

/* Was 2-col CSS Grid; converted to Flex Phase 3 (flex-wrap so it collapses
   to 1 column at small viewports). */
.about__metrics {
	display: flex;
	flex-wrap: wrap;
	column-gap: 41px;
	row-gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about__metric {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 15px;
	flex: 1 1 calc(50% - 41px / 2);
	min-width: 220px;
	position: relative;
}


.about__metric:after {background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);content: '';height: 1px;width: 100%;display: block;position: absolute;bottom: 0;}


.about__metric-icon {
	display: inline-flex;
	width: 16px;
	height: 14px;
	flex-shrink: 0;
}

.about__metric-label {
	line-height: calc(30 / 18);
	color: var(--clr-5e5e5e);
}

/* CTA: padding / radius / transition / base font now provided by .c-button.
   We keep the BEM class as an override hook (no-op currently). */
.about__cta {
	align-self: flex-start;
	margin-top: 10px;
}

.about__cta-arrow {
	display: inline-flex;
	width: 18px;
	height: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
	 
}

@media (max-width: 1023px) {

	.about {
	background-size: 56% auto;
	background-position: center left;
	}
	
	.about__container {
		flex-direction: column;
		gap: 80px;
	}
	.about__container > .about__media {
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
		flex: inherit;
		width: 100%;
	}
	.about__container > .about__content {
		flex: 1 1 auto;
		width: 100%;
	}
	.about__heading {
		line-height: calc(48 / 42);
	}
	.about__badge, .about--image-right .about__badge {
		right: 0;
		top: inherit;
		transform: translateY(50%);
		bottom: 0;
	}

	.about--image-right .about__container:has(.about__image-wrap--iframe) {
		row-gap: 40px;
	}

	
}

@media (max-width: 599px) {
	.about__metrics {
		flex-direction: column;
		row-gap: 8px;
	}
	.about__metric {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ==========================================================================
 * Source: blocks/services.css
 * ========================================================================== */
/* ==========================================================================
 * Services dark-red full-bleed, centred header, 2 large cards
 * Source: pages/home-page/figma/sections/services.json + screenshots/services.png
 *
 * Phase 3 refactor
 *   - Removed horizontal padding from `.services`; the inner
 *     `.services__container` carries `.c-container` for gutter + max-width.
 *   - Grid šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã‚ Ã¢â‚¬â„¢ Flex: `.services__cards` was `display: grid` / 2 cols; now a
 *     flex row with each card at 1/2 of the row minus gap.
 *   - Decoration fix: was `right: -60px; max-width: 22vw` which on a wide
 *     viewport rendered behind the overlay and well off-canvas. Re-positioned
 *     to right: 0 with `z-index: 2` (already > overlay's `z-index: 0`) and
 *     widened to a fixed-px size so it appears in the bottom-right corner.
 *   - Color inheritance: section root sets `color: white`. Heading + intro
 *     drop their `color:` declarations (intro keeps the translucent variant
 *     so it stays muted on the red ground).
 * ========================================================================== */

.services {
	position: relative;
	padding-block: clamp(56px, 6.5vw, 120px) clamp(192px, 30vw, 180px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}


.services:not(:has(.services__decoration)) {
    padding: clamp(56px, 6.5vw, 120px) 0 clamp(80px, 24vw, 140px);
}

/* Theme variants selected automatically from the bg_image presence (PHP).
   Editors can still override with section_settings šÃ‚¢ÃƒÂ¢Ã¢â€šÂ¬Ã‚ Ã¢â‚¬â„¢ background_color / text_color. */
.services[data-theme="dark"] {
	background-color: #2A0A0E;
	color: var(--clr-ffffff);
}
.services[data-theme="light"] {
	background-color: #F5F4F1;
	color: var(--clr-161616);
	background: url(../assets/images/serivces-3cols-bg.png) no-repeat;
	background-position: left bottom;
	background-size: auto 66%;
}
.services[data-theme="light"] .services__card-text {
	color: var(--clr-5e5e5e);
}


/* Phase 3 fix: decoration was effectively hidden by `right: -60px` +
   `max-width: 22vw` (became < 100px on most viewports and disappeared off-
   canvas). Now anchored to the right edge with a fixed display size and a
   guaranteed z-index above the overlay. */
.services__decoration {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(180px, 17vw, 280px);
	max-width: 30vw;
	z-index: 2;
	pointer-events: none;
}

.services__decoration-img {
	width: 100%;
	height: auto;
	display: block;
}

/* `.services__container` element carries `.c-container` in markup. */
.services__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 3.75vw, 64px);
	align-items: center;
}

/* ---------- Header ---------- */
.services__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.services__eyebrow {
	line-height: calc(24 / 18);
	color: var(--clr-d31833);
	margin: 0;
}

.services__heading {
	line-height: calc(64 / 55);
	margin: 0;
}

.services__intro {
	line-height: calc(30 / 18);
	margin: 0 auto;
	max-width: 1040px;
}

/* ---------- Cards ---------- */
/* Was 2-col CSS Grid; converted to Flex Phase 3. */
.services__cards {
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	--gap: clamp(34px, 5vw, 96px);
	--gapy: clamp(34px, 5vw, 96px);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	row-gap: var(--gap);
	column-gap: var(--gapy);
}

.services[data-columns="3"] .services__cards { --gapy: clamp(34px, 5vw, 30px); }

.services__card {
	background: var(--clr-ffffff);
	border-radius: 24px;
	overflow: hidden;
	

	/* Default 2-up; widened to (100% - 2*gap)/3 for the 3-column variant below. */
	max-width: calc( (100% - var(--gapy)) / 2 );
	min-width: 280px;
	padding: 16px;
	width: 100%;
	box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.05);
}

.services[data-columns="3"] .services__card {
	max-width: calc( (100% - 2 * var(--gapy)) / 3 );
}

.services__card:hover {
	transition: all 0.3s ease;
	box-shadow: 0 0 42px rgba(0, 0, 0, 0.15);
}

/* `.services__card-link` is a structural anchor wrapper, not a button. */
.services__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--clr-161616);
	transition: all 0.3s ease;
}



.services__card-imgwrap {
	overflow: hidden;
	height: clamp(290px, 36vw, 385px);
	border-radius: 16px;
}


.services__card-media {
	position: relative;
	width: 100%;
}

.services__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.services__card-link:hover .services__card-image {
	transform: scale(1.05);
}

.services__card-arrow {
	position: absolute;
	right: 0;
	bottom: -20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 6vw, 86px);
	height: clamp(64px, 6vw, 86px);
	border-radius: 50% 0 0;
	color: var(--clr-ffffff);
	transition: all 0.3s ease;
	border: 10px solid;
	background: #fff;
}

.services__card-arrow svg {transform: scale(1.5) translate(6%, 6%); }

 
.services__card-body {
	padding: 16px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.services__card-heading {
	line-height: calc(42 / 36);
	margin: 0;
}

/* Card text: .fs18 + .fw-400 utilities in PHP. */
.services__card-text {
	font-family: var(--ff-inter);
	line-height: calc(30 / 18);
	color: var(--clr-5e5e5e);
	margin: 0;
}

/* ---------- Responsive ----------
   Heading/card-heading sizes scale via .fs55 / .fs36 clamp() utilities on
   markup. Only layout collapse remains here. */


@media (max-width: 1279px) {

	.services[data-columns="3"] .services__card { max-width: calc( (100% - var(--gapy)) / 2 ); }
	
}

@media (max-width: 990px) {
	.services__heading {
		line-height: calc(48 / 42);
	}
	.services__cards {
		flex-direction: column;
		gap: 24px;
		max-width: 540px;
	}
	
	.services[data-columns="3"] .services__card, .services__card {
		max-width: 100%;
	}
	
}

@media (max-width: 599px) {
	.services__card-body {
		padding: 22px 24px 28px;
	}
	 
}

/* ==========================================================================
 * Source: blocks/why_us_upper.css + blocks/why_us_band.css
 * ========================================================================== */
/* ==========================================================================
 * why-us-upper independent features grid section
 *   - White-bg section: eyebrow + heading + feature cards (left) + side photo (right)
 *   - Carries its own padding-block; no shared parent with why-us-band.
 * ========================================================================== */

.why-us-upper {
	background: url('../assets/images/sticky-blockbg-pattern.png'), url('../assets/images/grey-bg-ptrn-homt.png');
	padding-block: clamp(56px, 10vw, 165px);
	background-size: 100% auto ,cover;
	background-position: top center, bottom left;
	background-repeat: no-repeat no-repeat;
}

.why-us-upper__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	margin-bottom: clamp(32px, 5vw, 64px);
}

.why-us-upper__eyebrow {
	line-height: calc(24 / 18);
	color: var(--clr-d31833);
	margin: 0;
}

.why-us-upper__heading {
	line-height: calc(64 / 55);
	color: var(--clr-000000);
	margin: 0;
}

.why-us-upper__grid {
	display: flex;
	flex-direction: row;
	gap: 64px;
	align-items: flex-start;
}

.why-us-upper__cards,
.why-us-upper__side-image {
	flex: 1 1 0;
	min-width: 0;
}

.why-us-upper__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	--icn-size: clamp(54px, 6vw, 76px);
}

/* Alternating bg (grey for odd, pink for even); left-only rounded corners. */
.why-us-upper__card {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	padding: 32px;
	border-radius: 24px 0 0 24px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	--bg-grad: rgb(255 220 225);
	border-left: 1px solid color-mix(in srgb, var(--bg-grad) 70%, white);
	background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--bg-grad) 88%, white),
        color-mix(in srgb, var(--bg-grad) 12%, transparent) 40%,
        transparent 100%
    );
}


.why-us-band__eyebrow { color: var(--clr-d31833); }

.has-home--on-dark::before { filter: none; }

.why-us-upper__card:before {
	background: linear-gradient(90deg, #FDF3F5, transparent);
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: block;
	z-index: 0;
	}


.why-us-upper__card:nth-child(2n-1) {--bg-grad: rgba(243, 243, 243, 1);border-left-color: var(--bg-grad);background: linear-gradient(270deg, rgba(243, 243, 243, 0) 0%, #F3F3F3 100%);}
 
.why-us-upper__card:nth-child(2n-1):before {
	background: linear-gradient(270deg, rgba(243, 243, 243, 0) 0%, #F3F3F3 100%);
}
 

.why-us-upper__card-icon:after, .hero__trust-card-icon:after {
    content: '';
    height: 4px;
    width: 90%;
    background: radial-gradient(rgba(101, 19, 27, 1), transparent);
    position: absolute;
    top: 100%;
    filter: blur(6px);
    opacity: .5;
}

.why-us-upper__card-icon {
	flex-shrink: 0;
	width: var(--icn-size);
	height: var(--icn-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.why-us-upper__card-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.why-us-upper__card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}

.why-us-upper__card-title {
	line-height: calc(28 / 22);
	color: var(--clr-d31833);
	margin: 0;
}

.why-us-upper__card-text {
	line-height: calc(26 / 16);
	color: var(--clr-5e5e5e);
	margin: 0;
}

/* Side image center-aligned vertically next to cards stack. */
.why-us-upper__side-image {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
	position: sticky;
	top: 100px;
	max-height: 712px;
}

.why-us-upper__side-image-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* ==========================================================================
 * why-us-band independent dark CTA band section
 *   - Dark red bg, two-column flex row: text content (left) + house photo (right).
 *   - 35-year animated GIF badge sits absolutely over the right column.
 *   - Optional bg_image rendered as inline background-image behind the color.
 * ========================================================================== */

.why-us-band {
	position: relative;
	background-color: #2A0A0E;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--clr-ffffff);
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.why-us-band:before {
    position: absolute;
    content: '';
    height: auto;
    width: clamp(240px, 18vw, 318px);
    aspect-ratio: 318/337;
    background: url('../assets/images/bg image dog.png') no-repeat;
    display: block;
    background-size: contain;
    bottom: 0;
    left: 0;
}

.why-us-band__container {
	z-index: 2;
	display: flex;
	flex-direction: row;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
	justify-content: space-between;
	--mediax: min(50vw,963px);
}

.why-us-band__image-wrap {
}

.why-us-band__image {
	width: 100%;
	height: calc(100% + var(--overflow-img));
	object-fit: cover;
	display: block;
	position: absolute;
	top: calc(-1 * var(--overflow-img));
	right: 0;
	max-width: var(
	--mediax);
	z-index: 2;
	--overflow-img: 45px;
	object-position: left center;
}

/* Badge overlaps the image wrap on the left edge. */
.why-us-band__image-wrap .why-us-band__badge {
	right: calc(var(--mediax) - 11vw);
	position: absolute;
	top: 20%;
	max-width: 156px;
}

.why-us-band__badge-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.why-us-band__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: clamp(600px, 46vw, 760px);
	flex: 1 1 auto;
	min-width: 0;
	min-height: 802px;
	justify-content: center;
	padding: clamp(64px, 8vw, 120px) 0;
	z-index: 3;
	position: relative;
}

.why-us-band__heading {
	line-height: calc(64 / 55);
	margin: 0;
	max-width: 740px;
}

.why-us-band__body {
	line-height: calc(30 / 18);
	max-width: 616px;
}

.why-us-band__body p {
	margin: 0 0 12px;
}

.why-us-band__body p:last-child {
	margin-bottom: 0;
}

/* Inverted hover swap (white bg, red text) overrides .c-button default. */
.why-us-band__cta {
	align-self: flex-start;
	margin-top: 8px;
}

.why-us-band__cta:hover,
.why-us-band__cta:focus-visible {
	background: var(--clr-ffffff);
	color: var(--clr-d31833);
	border-color: var(--clr-ffffff);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.why-us-band__cta-arrow {
	display: inline-flex;
	width: 18px;
	height: 14px;
}

/* 35-year circular badge. */
.why-us-band__badge {
	width: 180px;
	height: 180px;
	justify-content: center;
	flex-shrink: 0;
}

/* ---------- Responsive ---------- */

@media (min-width: 2250px) {
	.why-us-band__image-wrap .why-us-band__badge {
		right: calc(var(--mediax) - 8vw);
	}
}

@media (max-width: 1700px) {
	.why-us-band__image-wrap .why-us-band__badge {
		right: calc(var(--mediax) - 12vw);
	}
}

@media (max-width: 1279px) {
	.why-us-upper__heading,
	.why-us-band__heading {
		line-height: calc(48 / 42);
	}
	.why-us-upper__grid {
		flex-direction: column;
		gap: 48px;
	}
	.why-us-upper__cards,
	.why-us-upper__side-image {
		flex: inherit;
		width: 100%;
		max-height: none;
		max-width: 100%;
	}


	.why-us-upper__side-image {max-width: 540px;order: -1;position: relative;top: 0;margin: 0 auto;}
	
	.why-us-band__container {
		flex-direction: column;
		--mediax: min(70%, 500px);
	}
	
	.why-us-band__image {
		height: 446px;
	}

	.why-us-band {margin: 80px 0 0;}

	
	.why-us-band__content  {padding: 444px 0 237px;max-width: 100%;}
	
	.why-us-band__image-wrap .why-us-band__badge {
		position: absolute;
		top: 4%;
		right: calc(var(--mediax) - 11vw);
	}
	.why-us-band__badge {
		width: 150px;
		height: 150px;
	}
}

@media (max-width: 599px) {
	.why-us-upper__card {
		padding: 36px 18px;
		flex-direction: column;
		row-gap: 12px;
	}
}

/* ==========================================================================
 * Source: blocks/customer_feedback.css
 * ========================================================================== */
/* ==========================================================================
 * Customer Feedback live Google Reviews (GRW) in a Slick carousel
 * Source: pages/home-page/figma/sections/customer_feedback.json
 *
 * Phase 3 refactor
 *   - Removed horizontal padding from `.customer-feedback`; container moved
 *     to inner `.c-container` wrapper.
 *   - GRW plugin reviews are wrapped at runtime (js/theme.js) inside
 *     `.customer-feedback__slider > .customer-feedback__slide  Ã¢â‚¬â„¢ÃƒÆ’¢â‚¬â€ N` and slick
 *     is initialised on the wrapper. The legacy `.customer-feedback__card`
 *     CSS is kept as a fallback for any place still rendering the old
 *     static repeater, but the GRW path uses `.wp-google-review` markup
 *     restyled inside the slide wrapper.
 *   - Slick arrows are inserted with `.c-slider-arrow` classes (paint lives
 *     on the component); only positioning + slick-glyph-hiding shims remain.
 *   - Color inheritance DRY: section root is light; all body text inherits.
 * ========================================================================== */


 


.customer-feedback {
	padding-block: clamp(56px, 7vw, 120px);
	background-color: #f6f5f4;
	background-image: url('../assets/images/blocks/customer-feedback-bg.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

/* `.customer-feedback__container` element carries `.c-container`. */
.customer-feedback__container {
	display: flex;
	flex-direction: column;
	gap: 56px;
	align-items: center;
}

.customer-feedback__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.customer-feedback__eyebrow {
	line-height: calc(24 / 18);
	color: var(--clr-d31833);
	margin: 0;
}

.customer-feedback__heading {
	line-height: calc(64 / 55);
	color: var(--clr-000000);
	margin: 0;
}

.customer-feedback__intro {
	line-height: calc(30 / 18);
	color: var(--clr-5e5e5e);
	margin: 0;
}

/* ---------- GRW reviews wrapper (slick host) ---------- */
.customer-feedback__reviews {
	width: 100%;
	position: relative;
	padding: 0 6px;
}

/* Hide the plugin's SVG-symbol blob + the original .rpi-flx grid wrapper
   (we've moved its children into `.customer-feedback__slider`). */
.customer-feedback__reviews .wp-gr > svg {
	display: none;
}

.customer-feedback__reviews .wp-google-list {
	display: block;
}

.customer-feedback__reviews .rpi-flx {
	display: none;
}

/* Hide GRW's footer logo + url so the carousel is the only chrome. */
.customer-feedback__reviews .wp-google-url {
	display: none;
}

/* ---------- Slick wrapper ---------- */
.customer-feedback__slider {
	width: 100%;
	margin-bottom: 0 !important;
}

/* Slick adds .slick-list / .slick-track. Add a touch of breathing room
   around each slide so the card shadows aren't clipped. */
.customer-feedback__slider .slick-list {
	margin: 0 -12px;
	overflow: hidden;
}

.customer-feedback__slide {
	padding: 16px 12px;
	box-sizing: border-box;
	display: flex !important;
}

/* ---------- Per-review card (GRW markup) ---------- */
.customer-feedback__slide .wp-google-review {
	position: relative;
	padding: 1px;
	border-radius: 16px;
	min-height: 310px;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
	--icn-size: clamp(44px, 5vw, 64px);
	width: 100%;
}

.wp-google-review > div {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 31px;
    border-radius: 14px;
    --dir: column-reverse;   
}

.wp-google-review  .rpi-stars::after {
     --star-color: #D31833;
}

.wp-google-time { display: none; }

.wp-google-name {line-height: calc(18/16);font-weight: 600;font-size: clamp(16px, 2vw, 18px);color: #161616;position: absolute;top: calc(100% + calc(var(--icn-size) /2));left: calc(var(--icn-size) + 16px); font-family: 'Inter'; }

.customer-feedback__reviews .rpi-row12 { --icn-size: var(44px, 5vw, 64px); background: url(../assets/images/dog-icn.png) no-repeat var(--clr-ffffff);background-position: bottom right 18px;background-size: clamp(64px, 6vw,107px) auto;}

.customer-feedback__reviews .rpi-flx {--dir: column-reverse; position: relative;     --rpi-star-size: 23px; }

.customer-feedback__slide .wp-google-review:hover {
}

.customer-feedback__slide .wp-google-review img.grw-img {
	width: var(--icn-size);
	height: var(--icn-size);
	border-radius: 50%;
	object-fit: cover;
}

/* Star color (GRW outputs inline svgs colored via fill). */
.customer-feedback__slide .wp-google-review svg[fill="#F5A623"],
.customer-feedback__slide .wp-google-review .grw-stars svg {
	color: #F5A623;
}

/* GRW review body text keep typography aligned with the rest of the
   section. font-family/size come from CSS here ONLY because the GRW plugin
   renders its own markup at runtime (we can't put utility classes on it).
   The review copy can be arbitrarily long, so we clamp it to a consistent
   height per card so all slides line up visually:
     - Desktop: 3 lines
     - Mobile: 5 lines (more vertical room when stacked)
   The slick slider stays balanced because every card has the same body
   height regardless of which review is the longest. */
.customer-feedback__slide .wp-google-review p, .customer-feedback__slide .wp-google-review .wp-google-text {
	font-family: var(--ff-inter);
	font-size: clamp(14px,2vw, 18px);
	line-height: calc(30 / 18);
	color: #161616;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 24px 0 34px;
}

.customer-feedback__slide .wp-google-review .wp-google-author,
.customer-feedback__slide .wp-google-review h4,
.customer-feedback__slide .wp-google-review .grw-name {
	font-family: var(--ff-outfit);
	font-weight: 600;
	font-size: 18px;
	color: var(--clr-161616);
}

/* ---------- Slick arrows positioning ----------
   Slick injects `button.slick-prev` / `button.slick-next` inside the carousel.
   They now also carry `.c-slider-arrow` + `.c-slider-arrow--prev/--next`
   classes (added via slick's prevArrow/nextArrow options in JS).
   This block keeps only the positioning shim paint lives on the component. */
.customer-feedback__slider .slick-prev,
.customer-feedback__slider .slick-next {
	z-index: 5;
	top: 50%;
}

.customer-feedback__slider .slick-prev {
	left: -40px;
}

.customer-feedback__slider .slick-next {
	right: -40px;
}

/* Hide slick's default `::before` glyph we render an SVG inside the
   custom prevArrow/nextArrow markup instead. */
.customer-feedback__slider .slick-prev::before,
.customer-feedback__slider .slick-next::before {
	content: none;
}

/* Slick dots small red round dots, brand-aligned. */
.customer-feedback__slider .slick-dots {
	position: relative;
	bottom: -16px;
	margin-top: 0;
	display: flex !important;
	justify-content: center;
	gap: 8px;
	padding: 0;
	list-style: none;
	height: 0;
	overflow: hidden;
}

.customer-feedback__slider .slick-dots li button {
	width: 10px;
	height: 10px;
	padding: 0;
	background: rgba(0, 0, 0, 0.18);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 0;
	line-height: 0;
}

.customer-feedback__slider .slick-dots li button::before {
	content: none;
}

.customer-feedback__slider .slick-dots li.slick-active button {
	background: var(--clr-d31833);
}

/* ---------- CTA ---------- */
.customer-feedback__cta-wrap {
	display: flex;
	justify-content: center;
}

.customer-feedback__cta {}

.customer-feedback__cta-arrow {
	display: inline-flex;
	width: 18px;
	height: 14px;
}

/* ---------- Responsive ----------
   Padding scales fluidly via the base `clamp()`. Only typography + slick
   arrow positioning shifts here. */
@media (max-width: 1023px) {
	.customer-feedback__heading {
		font-size: clamp(28px, 4.2vw, 42px);
		line-height: calc(48 / 42);
	}
	.customer-feedback__slider .slick-prev {
		left: -36px;
	}
	.customer-feedback__slider .slick-next {
		right: -36px;
	}
}

@media (max-width: 599px) {
	.customer-feedback__heading {
		font-size: 30px;
	}
	.customer-feedback__slide .wp-google-review {
		min-height: 240px;
	}
	/* Mobile gets more vertical room when slides stack bump clamp to 5 lines. */
	.customer-feedback__slide .wp-google-review p,
	.customer-feedback__slide .wp-google-review .wp-google-text {
		-webkit-line-clamp: 5;
		line-clamp: 5;
	}
}

/* ==========================================================================
 * Source: blocks/explore_gallery.css
 * ========================================================================== */
/* ==========================================================================
 * Explore Photo Gallery (asymmetric bento, 6 images)
 * Source: pages/home-page/figma/sections/explore.json (upper half)
 *
 * Phase 1 refactor notes
 *   - Container max-width + margin-inline -> `.c-container` (markup).
 *   - Eyebrow row/icon (this section uses a small chart-glyph instead of the
 *     home icon) -> still `.has-home` utility for layout consistency; the
 *     glyph itself is the standard home icon to stay on-brand.
 *   - 18px eyebrow -> .fs18 + .fw-500 utilities.
 *   - PHASE 3 TODO: remove `padding: 120px 240px 80px` from `.explore-gallery`.
 *     PHASE 3 TODO: convert `.explore-gallery__bento` from CSS Grid to Flex.
 * ========================================================================== */

.explore-gallery {
	padding-block: clamp(64px, 7.5vw, 120px) clamp(40px, 8vw, 140px);
	background: var(--clr-ffffff);
}

/* `.explore-gallery__container` element also carries `.c-container`. */
.explore-gallery__container {}

.explore-gallery__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	margin-bottom: 48px;
}

.explore-gallery__eyebrow {
	line-height: calc(24 / 18);
	color: var(--clr-d31833);
	margin: 0;
}

.explore-gallery__heading {
	line-height: calc(64 / 55);
	color: var(--clr-000000);
	margin: 0;
}

/* ---------- Bento (flex, nth-child pattern) ----------
   The 6-image pattern repeats every 6 items, driven entirely by :nth-child(6n+X):
     items 1, 6, 7, 12, 13, 18 ... = WIDE  (50% of row)
     items 2, 3, 4, 5, 8, 9, 10, 11 ... = NARROW (25% of row)
   Row 1 = [W][N][N]  (50 + 25 + 25 = 100%)
   Row 2 = [N][N][W]  (25 + 25 + 50 = 100%)
   The PHP iterates *all* gallery images and the layout cycles automatically,
   so adding more images to the ACF gallery never breaks the rhythm. Orphan
   items in an incomplete final row keep their basis via flex-grow: 1.
*/
.explore-gallery__bento {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.explore-gallery__item {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: clamp(280px, 30vw, 341px);
	min-width: 0;
	/* Default basis = NARROW (quarter of a row minus its share of the gap) */
	flex: 1 1 calc(25% - 22px);
}

/* WIDE positions inside the 6-cell pattern. Both row 1's first cell
   (:nth-child(6n+1)) and row 2's last cell (:nth-child(6n)) are wide. */
.explore-gallery__item:nth-child(6n+1),
.explore-gallery__item:nth-child(6n) {
	flex: 1 1 calc(50% - 17px);
}

.explore-gallery__item:hover {
}

.explore-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.explore-gallery__item:hover .explore-gallery__image {
}

/* ---------- Responsive ----------
   Padding scales fluidly via the base `clamp()`. Only the layout collapse +
   item heights step here. */
 

@media (max-width: 1023px) {
	.explore-gallery__heading {
		line-height: calc(48 / 42);
	}
	/* Collapse to two equal columns; every item is half-width */
	.explore-gallery__item,
	.explore-gallery__item:nth-child(6n+1),
	.explore-gallery__item:nth-child(6n) {
		flex: 1 1 calc(50% - 8px);
	}
}

@media (max-width: 599px) {
	/* Stack each image full width on mobile */
	.explore-gallery__item,
	.explore-gallery__item:nth-child(6n+1),
	.explore-gallery__item:nth-child(6n) {
		height: auto;
	}
}

/* ==========================================================================
 * Source: blocks/explore_cta_banner.css
 * ========================================================================== */
/* ==========================================================================
 * Explore CTA "Request Your FREE Estimate Today" banner
 * Source: pages/home-page/figma/sections/explore.json (lower half)
 *
 * Phase 1 refactor notes
 *   - `.explore-cta-banner__inner` is the visible rounded card (NOT a layout
 *     container) so it does NOT get `.c-container`. The section keeps its
 *     own `padding: 40px 240px` to position the card within the 1440px band.
 *     PHASE 3 will move section gutters to `.c-container` consistently.
 *   - 16px kicker -> .fs16 + .fw-500 utilities.
 *   - CTA -> `.c-button .c-button--primary`.
 *   - PHASE 3 TODO: remove `padding: 40px 240px 120px` from `.explore-cta-banner`
 *     and wrap the inner card in a `.c-container` element instead.
 * ========================================================================== */


body:has(.customer-feedback:last-child) .global-cta-banner {
	background: #f6f5f4;	
}


.explore-cta-banner__inner {
	transform: translateY(calc((var(--explore-cta-height) * 0.4 )));
	margin-top: calc((var(--explore-cta-height) * -0.4 ));
	border-radius: 24px;
	overflow: hidden;
	background-size: cover;
	background-position: right top;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	height: 142%;
	z-index: 6;
	position: relative;

}

.explore-cta-banner__inner:before {content: '';background: url(/wp-content/uploads/2026/06/cta-bg-flx-scaled.jpg) no-repeat;background-size: cover;position: absolute;height: 100%;width: 100%;top: 30px;border-radius: 30px;}

 

.explore-cta-banner__panel {
	position: relative;
	z-index: 2;
	padding: clamp(28px, 4vw, 56px) clamp(28px, 4.4vw, 72px) clamp(28px, 4vw, 56px) clamp(28px, 5.4vw, 100px);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	min-height: var(--explore-cta-height);
	margin-top: 30px;
	border-radius: 30px;
	background-size: cover;
	z-index: 0;
	position: relative;
	justify-content: center;
}

.explore-cta-banner__media img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: top right;
    top: 0;
    z-index: 0;
    object-fit: cover;
}

.explore-cta-banner__kicker {
	line-height: calc(24 / 16);
	color: var(--clr-161616);
	margin: 0;
	max-width: 420px;
}

.explore-cta-banner__heading {
	line-height: calc(56 / 55);
	color: #161616;
	margin: 0;
}

.explore-cta-banner__heading span:first-child { display: block; }

.explore-cta-banner__heading-part--red {
	color: var(--clr-d31833);
}

.explore-cta-banner__heading-part-suffix {
}

/* CTA paint now from .c-button .c-button--primary. */
.explore-cta-banner__cta {
	align-self: flex-start;
	margin-top: 4px;
}

.explore-cta-banner__cta-arrow {
	display: inline-flex;
	width: 18px;
	height: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.explore-cta-banner__inner {
		min-height: 320px;
	}
	.explore-cta-banner__heading {
		line-height: calc(48 / 42);
	}
}

@media (max-width: 599px) {
	.explore-cta-banner__inner {
		background-position: 80% center;
	}
	.explore-cta-banner__inner::before {
		background: linear-gradient(180deg, rgba(241, 215, 218, 0.95) 0%, rgba(241, 215, 218, 0.85) 60%, rgba(241, 215, 218, 0.55) 100%);
	}
	.explore-cta-banner__heading {
		line-height: calc(34 / 28);
	}
	.explore-cta-banner__heading-part-suffix {
		margin-left: 0;
	}

	.explore-cta-banner__media img { height: 300px; bottom: 0; top: inherit; }

	.explore-cta-banner__panel {padding-bottom: 340px;}
	
}

/* ==========================================================================
 * Source: blocks/page_banner.css
 * ========================================================================== */
/* ==========================================================================
 * Page Banner compact page-header strip with title + breadcrumb
 * Source: pages/financing/figma/screenshots/top-section.png
 *
 * Used as the FIRST section on inner pages (Financing, Services pages, etc.)
 * in place of the full Hero. Renders a background photo with a dark overlay,
 * a big H1 page title, and a breadcrumb trail beneath it.
 *
 * Typography: ff-outfit + fs78 + fw-800 applied via utility classes on
 * markup (per the global typography rule).
 * ========================================================================== */

.page-banner {
	position: relative;
	background-color: #1A0608;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--clr-ffffff);
	overflow: hidden;
	padding-block: clamp(80px, 8vw, 110px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(400px, 40vw, 650px);
}

.page-banner__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.page-banner__title {
	line-height: calc(95 / 78);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0;
}

.page-banner__breadcrumb {
	margin-top: 4px;
}

.page-banner__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: calc(30 / 18);
}

.page-banner__breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.page-banner__breadcrumb-link {
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.3s ease;
}

.page-banner__breadcrumb-link:hover,
.page-banner__breadcrumb-link:focus-visible {
	color: var(--clr-d31833);
}

.page-banner__breadcrumb-current {
	color: var(--clr-ffffff);
}

.page-banner__breadcrumb-sep {
}

@media (max-width: 1023px) {
	.page-banner {
		min-height: 260px;
	}
	.page-banner__title {
		line-height: calc(58 / 52);
	}
}

@media (max-width: 599px) {
	.page-banner {
		min-height: 220px;
	}
	.page-banner__title {
		line-height: calc(42 / 36);
	}
}

/* ==========================================================================
 * Source: blocks/financing_options.css
 * ========================================================================== */
/* ==========================================================================
 * Financing Options full-bleed bg with content panel on the right
 * Source: pages/financing/figma/screenshots/financing-options.png
 *
 * Layout per design spec:
 *   - The whole section is a single bg image (worker on roof, darker right side).
 *     A dark gradient overlay on top keeps the heading + body + cards legible.
 *   - Content sits on the RIGHT half of the section: eyebrow + heading + body
 *     + N option cards. The "left half" stays as visual breathing room over
 *     the bg image there is no separate side <img> element.
 *   - Cards: solid red gradient bg, 56px design SVG icon on the left, single
 *     line of 22px Inter 700 white text on the right. 16px radius, 20px pad.
 *
 * Typography: ff-*, .fs*, .fw-* utilities on markup (per the global rule).
 * ========================================================================== */

.financing-options {
	position: relative;
	padding-block: clamp(64px, 8vw, 140px);
	background-color: #2A0A0E;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--clr-ffffff);
	overflow: hidden;
}

.financing-options--centered-grid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: #65131b;
    background-size: cover;
    opacity: .85;
}

/* Dark overlay biased to the right so the content panel reads cleanly while
   the left side stays atmospheric (worker silhouette + trees visible). */
.financing-options__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(42, 10, 14, 0.7) 40%, rgba(42, 10, 14, 1) 100%);
	pointer-events: none;
	z-index: 0;
}

.financing-options__container {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
}

/* Content panel anchored to the right half of the section. */
.financing-options__content {
	flex: 0 1 600px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.financing-options__eyebrow {
	line-height: calc(24 / 18);
	color: var(--clr-d31833);
	margin: 0;
}

.financing-options__heading {
	line-height: calc(56 / 55);
	margin: 0;
}

.financing-options__body {
	line-height: calc(30 / 18);
}

.financing-options__body p {
	margin: 0 0 12px;
}

.financing-options__body p:last-child {
	margin-bottom: 0;
}

/* ---------- Option cards (single-line per design) ---------- */
.financing-options__cards {
	display: flex; justify-content: center;
	flex-direction: column;
	gap: 16px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.financing-options__card {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px;
	border-radius: 16px;
	background: linear-gradient(90deg, #D31833 2%, rgba(211, 24, 51, 0) 98.29%);
}

.financing-options__card-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.financing-options__card-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.financing-options__card-text {
	color: var(--clr-ffffff);
	line-height: calc(30 / 22);
	max-width: 240px;
}

@media (max-width: 1023px) {
	.financing-options__container {
		justify-content: stretch;
	}
	.financing-options__content {
		flex: 1 1 auto;
		width: 100%;
	}
	.financing-options__heading {
		line-height: calc(48 / 42);
	}
}

@media (max-width: 599px) {
	.financing-options__card {
		gap: 16px;
		padding: 16px;
	}
	.financing-options__card-icon {
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
 * Variant 2 — Centered White Cards Grid
 * --------------------------------------------------------------------------
 * Dark roof bg + centered eyebrow/heading/body, then three white cards in a
 * row. Each card has a red star-burst icon, a multi-line heading, and a
 * gray body paragraph. Mirrors the second Figma frame for this section.
 * ========================================================================== */
.financing-options--centered-grid .financing-options__overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.financing-options--centered-grid .financing-options__container {
	justify-content: center;
}

.financing-options--centered-grid .financing-options__content {
	flex: 1 1 auto;
	width: 100%;
	align-items: center;
	text-align: center;
	gap: 24px;
}

.financing-options--centered-grid .financing-options__eyebrow,
.financing-options--centered-grid .financing-options__heading {
	text-align: center;
}

.financing-options--centered-grid .financing-options__body {
	text-align: center;
	color: rgba(255, 255, 255, 0.88);
}

.financing-options--centered-grid .financing-options__cards {
	gap: clamp(22px, 3vw, 32px);
	width: 100%;
	margin-top: 16px;
	flex-direction: row;
}

.financing-options--centered-grid .financing-options__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: clamp(16px, 1.75vw, 32px);
	border-radius: clamp(16px, 1.5vw, 24px);
	background: var(--clr-ffffff, #ffffff);
	color: var(--clr-161616, #161616);
	text-align: left;
	max-width: calc( (100% - clamp(22px, 3vw, 32px) * 2 ) / 3 );
	flex-wrap: wrap;
}

 

.financing-options--centered-grid .financing-options__card-icon {
	width: clamp(54px, 6vw, 92px);
	height: auto;
}

.financing-options--centered-grid .financing-options__card-text-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.financing-options--centered-grid .financing-options__card-heading {
	margin: 0;
	color: var(--clr-161616, #161616);
	line-height: calc(44 / 36);
}

.financing-options--centered-grid .financing-options__card-body {
	color: var(--clr-5e5e5e, #5e5e5e);
	line-height: calc(28 / 16);
}

.financing-options--centered-grid .financing-options__card-body p {
	margin: 0;
}

@media (max-width: 1023px) {
	.financing-options--centered-grid .financing-options__card {
	max-width: calc( (100% - clamp(22px, 3vw, 32px) ) / 2 );
	}
}

@media (max-width: 599px) {
	.financing-options--centered-grid .financing-options__cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.financing-options--centered-grid .financing-options__card {
		padding: 24px;
		max-width: 100%;
	}
}

 /* ==========================================================================
 * Source: blocks/service_area.css
 * ========================================================================== */
/* ==========================================================================
 * Service Area map iframe + locations grid + brand image
 * Source: pages/financing/figma/screenshots/service-area.png
 *
 * Cream-pink background. Three flex children:
 *   1. Map (left) iframe wrapped in a rounded card with subtle shadow.
 *   2. Content (right) eyebrow + heading + 2-col location pill grid.
 *   3. Brand image absolutely positioned dog photo that bleeds off the
 *      right edge of the section.
 *
 * Typography: ff-*, .fs*, .fw-* utilities applied via PHP markup.
 * ========================================================================== */

.service-area {
	position: relative;
	padding-block: clamp(48px, 8vw, 120px);
	background: linear-gradient(90deg, #D5CEBF 32.28%, #FEA3B0 145.97%);
	overflow: hidden;
}

.service-area__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	border-radius: 18px;
	overflow: hidden;
}

/* ---------- Map ---------- */
.service-area__map {
	flex: 1 1 0;
	min-width: 0;
	background: var(--clr-ffffff);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
	min-height: 360px;
	display: flex;
}

.service-area__map iframe {
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
	display: block;
}

/* ---------- Content (right column) ---------- */
.service-area__content {
	max-width: 50%;
	min-width: 0;
	color: var(--clr-ffffff);
	padding: clamp(32px, 4vw, 74px) clamp(32px, 10vw, 250px) clamp(32px, 4vw, 74px) clamp(32px, 3vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	overflow: hidden;
	background: #291519;
}

.service-area__eyebrow {
	line-height: calc(24 / 18);
	color: var(--clr-d31833);
	margin: 0;
}

.service-area__heading {
	line-height: calc(64 / 55);
	margin: 0;
	z-index: 2;
}

/* Locations grid 2 columns of pill links. flex-wrap so it stays balanced
   even when location count isn't even. */
.service-area__locations {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	z-index: 2;
}

.service-area__location {
	max-width: calc(50% - 6px);
	display: flex;
	width: 100%;
}

.service-area__location-link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 18px;
	background: var(--clr-ffffff);
	color: var(--clr-161616);
	border-radius: 6px;
	text-align: center;
	transition: all 0.3s ease;
	line-height: calc(24 / 18);
	font-weight: 600;
}

a.service-area__location-link:hover,
a.service-area__location-link:focus-visible {
	background: var(--clr-d31833);
	color: var(--clr-ffffff);
}

/* ---------- Brand image (dog photo, bleeds off right) ----------
   In the Figma the dog is a large photo that overlaps the right panel from
   its right edge, partially obscuring the last column of locations. We pin
   it bottom-right of the section and translate it slightly outside the
   right edge so it bleeds over the cream bg too. */
.service-area__brand-image {
	position: absolute;
	bottom: 0;
	pointer-events: none;
	height: 86%;
	width: 88%;
	z-index: 0;
	right: 0;
	display: flex;
}

.service-area__brand-image-img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 100%;
	object-position: bottom right;
	object-fit: contain;
}

@media (max-width: 1023px) {
	.service-area__container {
		flex-direction: column;
	}
	.service-area__map,
	.service-area__content {
		max-width: 100%;
		width: 100%;
	}

	.service-area__content {padding-bottom: 41vw;}
	
	.service-area__heading {
		line-height: calc(48 / 42);
	}
	.service-area__brand-image {
		height: 90%;
	}
}

@media (max-width: 599px) {
	.service-area__locations {
		gap: 8px;
	}
	.service-area__location {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.service-area__brand-image {
	}
}
/* ==========================================================================
 * Source: blocks/banner.css
 * ========================================================================== */
/* ==========================================================================
 * Banner mid-page promo strip
 *
 * Generic full-width banner the editor can drop anywhere mid-page. Without
 * a background image it falls back to a neutral light surface; with one,
 * a dark overlay keeps the centered text readable.
 *
 * Typography: ff-*, .fs*, .fw-* utilities applied via PHP markup.
 * ========================================================================== */

.banner {
	position: relative;
	padding-block: clamp(56px, 7vw, 110px);
	background-color: var(--clr-ffffff);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.banner--has-bg {
	background-color: #2A0A0E;
	color: var(--clr-ffffff);
}

.banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
	z-index: 0;
}

.banner__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
	max-width: 920px;
}

.banner__eyebrow {
	line-height: calc(24 / 18);
	color: var(--clr-d31833);
	margin: 0;
}

.banner__heading {
	line-height: calc(56 / 48);
	margin: 0;
}

.banner--has-bg .banner__heading {
	color: var(--clr-ffffff);
}

.banner__body {
	line-height: calc(30 / 18);
	color: var(--clr-5e5e5e);
}

.banner--has-bg .banner__body {
	color: rgba(255, 255, 255, 0.85);
}

.banner__body p {
	margin: 0 0 12px;
}

.banner__body p:last-child {
	margin-bottom: 0;
}

.banner__cta {
	margin-top: 4px;
}

.banner__cta-arrow {
	display: inline-flex;
	width: 14px;
	height: 14px;
}

@media (max-width: 1023px) {
	.banner__heading {
		line-height: calc(48 / 36);
	}
}

/* ==========================================================================
 * Source: blocks/service_detail.css
 * ========================================================================== */
/* ==========================================================================
 * Service Detail two-column body for service inner pages
 * Source: pages/roof-installation/figma/screenshots/body-container.png
 *
 * Layout:
 *   - Left column: stacked content blocks (intro / highlight callout / benefits).
 *   - Right column: sticky "Our Services" sidebar auto-built from the page's
 *     parent's other published children. Active page gets the pink tint + red
 *     accent + arrow.
 *
 * Typography: ff-*, .fs*, .fw-* utilities are applied via PHP markup; this file
 * only owns layout, color, spacing.
 * ========================================================================== */

.service-detail {
	padding-block: clamp(56px, 7vw, 120px);
	background: url(../assets/images/about-bg-decore.png) no-repeat #fff;
	background-position: left top 28%;
	background-size: 25% auto;
}

.service-detail__container {
	display: flex;
	gap: clamp(26px, 3.5vw, 64px);
	align-items: flex-start;
}

.service-detail__main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.service-detail__sidebar {
	flex: 0 0 auto;
	width: 467px;
	background-color: var(--clr-ffffff);
	border: 1px solid #EEECE8;
	border-radius: 16px;
	padding: 40px clamp(16px, 2.25vw, 40px);
	position: sticky;
	top: 120px;
	box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
}

/* Generic block wrapper. */
.service-detail__block {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* -------- Intro block -------- */
.service-detail__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--clr-d31833);
	margin: 0;
}

.service-detail__eyebrow-icon {
	display: inline-flex;
	width: 20px;
	height: 18px;
}

.service-detail__eyebrow-icon-img,
.service-detail__eyebrow-icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.service-detail__intro-heading {
	color: var(--clr-000000);
	line-height: calc(56 / 55);
	margin: 0;
}

.service-detail__intro-body {
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
}

.service-detail__intro-body p {
	margin: 0 0 16px;
}

.service-detail__intro-body p:last-child {
	margin-bottom: 0;
}

.service-detail__intro-image-wrap {
	margin: clamp(4px, 1.15vw, 16px) 0;
	border-radius: 24px;
	overflow: hidden;
}

.service-detail__intro-image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* -------- Highlight callout block -------- */
.service-detail__block--highlight-callout {
	background-color: #FEF6F8;
	padding: 32px;
	border-radius: 16px;
	gap: 32px;
}

.service-detail__highlight-heading {
	line-height: calc(56 / 55);
	margin: 0;
}

.service-detail__highlight-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.service-detail__highlight-card {
	flex: 1 1 200px;
	background-color: var(--clr-ffffff);
	padding: 12px 20px;
	border-left: 2px solid var(--clr-d31833);
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
}

.service-detail__highlight-body {
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
}

.service-detail__highlight-body p {
	margin: 0 0 12px;
}

.service-detail__highlight-body p:last-child {
	margin-bottom: 0;
}

/* -------- Benefits block -------- */
.service-detail__benefits-row {
	display: flex;
	gap: 32px;
	align-items: stretch;
}

.service-detail__benefits-image-wrap {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
}

.service-detail__benefits-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.service-detail__benefits-content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
}

.service-detail__benefits-heading {
	line-height: calc(44 / 36);
	margin: 0;
}

.service-detail__benefits-body {
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
	margin-top: 12px;
}

.service-detail__benefits-body p {
	margin: 0 0 12px;
}

.service-detail__benefits-body p:last-child {
	margin-bottom: 0;
}

.service-detail__benefits-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

.service-detail__benefits-feature {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #5E5E5E;
	padding-bottom: 16px;
	margin-bottom: 16px;
	position: relative;
}

.service-detail__benefits-feature:after {
    content: '';
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.service-detail__benefits-bullet {
	flex: none;
	width: 16px;
	height: 14px;
	background: url(../assets/icons/dog-fooot-print-icn.svg) no-repeat;
}

/* -------- Sidebar -------- */
.service-detail__sidebar-heading {
	color: #000;
	line-height: calc(44 / 36);
	margin: 0 0 24px;
}

.service-detail__sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.service-detail__sidebar-item {
	background-color: #FEF6F8;
	transition: background-color 0.2s ease;
}

.service-detail__sidebar-item.is-active {
	background-color: #FEF6F8;
	order: -1;
	pointer-events: none;
}

.service-detail__sidebar-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15.5px 18px;
	gap: 16px;
	color: var(--clr-161616);
	text-decoration: none;
	transition: color 0.2s ease;
}

.service-detail__sidebar-item.is-active .service-detail__sidebar-link {
	color: var(--clr-d31833);
}

.service-detail__sidebar-item:not(.is-active):hover .service-detail__sidebar-link {
	color: var(--clr-d31833);
}

.service-detail__sidebar-arrow {
	flex: none;
	display: inline-flex;
	width: 11px;
	height: 11px;
	transition: opacity 0.2s ease;
}

 
.service-detail__sidebar-arrow img {
	width: 100%;
	height: 100%;
	display: block;
}

/* -------- Responsive -------- */
@media (max-width: 1199px) {
	.service-detail__sidebar {
		width: 360px;
		padding: 32px;
	}
}

@media (max-width: 1023px) {
	.service-detail__container {
		flex-direction: column;
	}
	.service-detail__sidebar {
		width: 100%;
		position: static;
		order: 2;
		padding: 32px;
	}
	.service-detail__main {
		order: 1;
		width: 100%;
	}
	.service-detail__benefits-row {
		gap: 24px;
	}
}

@media (max-width: 767px) {
	
	
	.service-detail__highlight-card { flex: inherit; }
	
	
	.service-detail {
		padding-block: 48px;
	}
	.service-detail__main {
		gap: 40px;
	}
	.service-detail__block--highlight-callout {
		padding: 24px;
	}
	.service-detail__highlight-cards {
		flex-direction: column;
		gap: 16px;
	}
	.service-detail__benefits-row {
		flex-direction: column;
	}
	.service-detail__sidebar {
		padding: 24px;
	}
	.service-detail__sidebar-link {
		padding: 18px 14px;
	}
	.service-detail__intro-heading,
	.service-detail__highlight-heading {
		line-height: calc(42 / 36);
	}
	.service-detail__benefits-heading,
	.service-detail__sidebar-heading {
		line-height: calc(36 / 28);
	}
}

/* ==========================================================================
 * Source: blocks/certificate_section.css
 * ========================================================================== */
/* ==========================================================================
 * Certificate Section — "How you benefit by using a GAF Master Elite Certified Roofer"
 * Source: pages/residential-roofing/figma/sections/certificate_section.json
 *
 * Layout (desktop ≥1280px)
 *   1. Centered header — eyebrow chip with icon + H2.
 *   2. Centered intro paragraph (max ~880px).
 *   3. Two-column body row:
 *        LEFT  : free-text paragraphs + 2Ý2 feature grid (icon + heading + text).
 *        RIGHT : GAF Master Elite badge image (square).
 *
 * Background defaults to the light cream #F6F5F4 surface used across this page
 * (intro / services bottom band / video section). Editor can override via the
 * section-settings clone (Color Picker).
 * ========================================================================== */

.certificate-section {
	padding-block: clamp(72px, 9vw, 120px);
	background: #fff;
	position: relative;
	overflow: hidden;
}

.certificate-section:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background: url('../assets/images/home-layered.png') no-repeat;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    background-position: left bottom;
    opacity: .05;
    pointer-events: none;
}

.certificate-section__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

/* ---------- Shared "centered eyebrow + heading" header ----------
   The same partial used by video_section — keep these selectors generic
   enough that adding more sections later is just a class swap. */
.certificate-section__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 1.75vw, 21px);
	text-align: center;
	max-width: 880px;
}

.certificate-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--clr-d31833);
	margin: 0;
	line-height: calc(24 / 18);
}

.certificate-section__eyebrow-icon {
	display: inline-flex;
	width: 20px;
	height: 18px;
	flex-shrink: 0;
}

.certificate-section__eyebrow-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.certificate-section__heading {
	color: var(--clr-000000);
	line-height: calc(56 / 55);
	margin: 0;
}

/* ---------- Centered intro paragraph ---------- */
.certificate-section__intro {
	color: var(--clr-5e5e5e);
	 
	text-align: center;
	line-height: calc(30 / 18);
}

.certificate-section__intro p {
	margin: 0 0 16px;
}

.certificate-section__intro p:last-child {
	margin-bottom: 0;
}

/* ---------- Two-column body row ---------- */
.certificate-section__body {
	display: flex;
	flex-direction: row;
	gap: clamp(40px, 7vw, 120px);
	align-items: center;
	width: 100%;
}

.certificate-section--image-left .certificate-section__body {
	flex-direction: row-reverse;
}

.certificate-section__body-left {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.certificate-section__paragraphs {
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
}

.certificate-section__paragraphs p {
	margin: 0 0 16px;
}

.certificate-section__paragraphs p:last-child {
	margin-bottom: 0;
}

/* Feature grid — 2Ý2 on desktop, 1 column on small screens. */
.certificate-section__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: clamp(24px, 4vw, 20px);
	row-gap: 20px;
	flex-wrap: wrap;
}

.certificate-section__feature {
	flex: 1 1 calc(50% - 32px);
	min-width: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(180deg, rgba(211, 24, 51, 0.1) 0%, rgba(211, 24, 51, 0) 100%);
	border-radius: 20px 20px 0 0;
	margin-top: 23px;
	text-align: center;
}

.certificate-section__feature-icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border: 1px solid #f7b3b7;
	border-radius: 50%;
	transform: translateY(-23px);
}

.certificate-section__feature-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.certificate-section__feature-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	max-width: 302px;
	padding-bottom: 22px;
}

.certificate-section__feature-heading {
	margin: 0;
	color: var(--clr-161616);
	line-height: calc(30 / 22);
	    font-family: 'Inter';
}

.certificate-section__feature-body {
	margin: 0;
	color: var(--clr-5e5e5e);
	line-height: calc(24 / 16);
}

/* Right column — GAF Master Elite shield image. */
.certificate-section__badge {
	flex: 0 0 auto;
	max-width: 542px;
	width: 40%;
}

.certificate-section__badge-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

@media (max-width: 1023px) {
	.certificate-section--image-left .certificate-section__body, .certificate-section__body {
		flex-direction: column-reverse; text-align: center;
		align-items: stretch;
	}
	.certificate-section__badge {
		width: 100%;
		max-width: 420px;
		align-self: center;
	}
	.certificate-section__heading {
		line-height: calc(48 / 40);
	}
}

@media (max-width: 599px) {
	.certificate-section__features {
	}
	.certificate-section__feature {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
 * Source: blocks/video_section.css
 * ========================================================================== */
/* ==========================================================================
 * Video Section — same centered eyebrow + H2 as certificate_section,
 * followed by a YouTube facade. On click the facade is swapped for the
 * real iframe by initYouTubeFacades() in theme.js.
 *
 * Source: pages/residential-roofing/figma/sections/video_section.json
 * ========================================================================== */

.video-section {
	padding-block: clamp(72px, 9vw, 120px);
	background: #F6F5F4;
	position: relative;
	overflow: hidden;
}

/* When certificate_section sits immediately above video_section (same bg),
   the visual is a single 40px gap, not two 120px paddings stacked. The
   :has() rule below pulls in the top padding so the two blocks share air. */
.certificate-section + .video-section {
}

.video-section__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

.video-section__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 21px;
	text-align: center;
	max-width: 1100px;
}

.video-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--clr-d31833);
	margin: 0;
	line-height: calc(24 / 18);
}

.video-section__eyebrow-icon {
	display: inline-flex;
	width: 20px;
	height: 18px;
	flex-shrink: 0;
}

.video-section__eyebrow-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.video-section__heading {
	color: var(--clr-000000);
	line-height: calc(56 / 55);
	margin: 0;
}

/* ---------- YouTube facade (button → swap to iframe on click) ----------
   Aspect ratio 144/79 from Figma; capped at the container width (1440px on
   page-flexible.php) with 24px border-radius and a soft drop shadow. */
.c-yt-facade {
	all: unset;
	cursor: pointer;
	display: block;
	width: 100%;
	aspect-ratio: 144 / 79;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #1c1c1c; /* shows through while the poster loads */
	border-radius: 24px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease;
	border: clamp(2px, 1.24vw, 10px) solid #fff;
}

.c-yt-facade:hover,
.c-yt-facade:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.c-yt-facade:focus-visible {
	outline: 3px solid var(--clr-d31833);
	outline-offset: 4px;
}

.c-yt-facade__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.c-yt-facade:hover .c-yt-facade__play {
	transform: scale(1.06);
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Once JS swaps in the iframe, the wrapper holds the iframe at the same
   aspect-ratio so layout doesn't shift on play. */
.video-section__video.is-playing {
	background-image: none !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.video-section__video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 24px;
	display: block;
}

@media (max-width: 1023px) {
	.video-section__heading {
		line-height: calc(48 / 40);
	}
}

/* ========================================================================
   Locations Service Area  dark band with county-card grid + side bleed
   ======================================================================== */
.locations-service-area {
	position: relative;
	overflow: hidden;
	background-color: #161616;
	background-size: cover;
	background-position: center;
	padding: clamp(64px, 7vw, 120px) 0;
	color: #FFFFFF;
}


.locations-service-area__overlay ,
.services__overlay {
    background: #2A0A0E;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .95;
}


.services[data-theme="light"] .services__overlay { opacity: 0}


.locations-service-area__side {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(180px, 15vw, 338px);
	z-index: 1;
	pointer-events: none;
}

.locations-service-area__side-img {
	width: 100%;
	height: auto;
	display: block;
}

.locations-service-area__container {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 48px);
	align-items: center;
}

.locations-service-area__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	text-align: center;
	 
	width: 100%;
}

.locations-service-area__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: #D31833;
}

.locations-service-area__eyebrow-icon {
	display: inline-flex;
	align-items: center;
}

.locations-service-area__eyebrow-icon-img {
	width: 20px;
	height: auto;
	display: block;
}

.locations-service-area__heading {
	margin: 0;
	color: #FFFFFF;
	line-height: calc(56 / 55);
}

.locations-service-area__intro {
	margin: 0;
	line-height: calc(30 / 18);
	 
}

.locations-service-area__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	--gap: clamp(16px, 1.75vw, 24px);
	gap: var(--gap);
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

.locations-service-area__card {
	background: rgba(254, 246, 248, 1);
	border-radius: 12px;
	width: 100%;
	max-width: calc( (100% - (var(--gap) * 3) ) / 4);
}

/* Row 2  wrap 3 cards centered as a 3-of-4 row. Each card shifts half a
   column to the right (50% of its own width + half the column gap). */
.locations-service-area__card-inner {
	display: flex;
	flex-direction: row;
	gap: 14px;
	padding: 18.5px 18px;
	width: 100%;
	color: #161616;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease;
	align-items: flex-start;
}

a.locations-service-area__card-inner:hover,
a.locations-service-area__card-inner:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.locations-service-area__card-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 3px;
}

.locations-service-area__card-icon-img {
	width: 20px;
	height: auto;
	display: block;
}

.locations-service-area__card-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.locations-service-area__card-name {
	color: #161616;
	line-height: calc(24 / 18);
}

.locations-service-area__card-body {
	color: #5E5E5E;
	line-height: calc(22 / 14);
}

@media (max-width: 1279px) {

.locations-service-area__card {
    max-width: calc((100% - (var(--gap) * 2)) / 3);
}
	 
}

@media (max-width: 991px) {


	.locations-service-area__card {
	   max-width: calc((100% - (var(--gap) * 1) ) / 2) ;
	}
	
	.locations-service-area__side {
		display: none;
	}
}

@media (max-width: 767px) {

	.locations-service-area__card {
	   max-width: 100%;
	}
	 
	.locations-service-area__heading {
		line-height: calc(48 / 40);
	}
}

/* ========================================================================
   Get In Touch  Contact form (white card on light bg) + dark info band
   with 3 contact cards (Call / Address / Email). Used on Contact Us page.
   ======================================================================== */
.get-in-touch {
	position: relative;
}

/* Eyebrow uses the global `.has-home` utility (with `.has-home--on-dark`
   for the info band)  no per-block icon markup. */
.get-in-touch__eyebrow {
	margin: 0;
	color: #D31833;
}

::before {}

body .get-in-touch__eyebrow:before {
    filter: inherit;
}

/* ----- Top: form card ----- */
.get-in-touch__form-wrap {
	position: relative;
	padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 7vw, 120px);
	overflow: hidden;
	background: url(../assets/images/about-bg-decore.png) no-repeat #fff;
	background-position: left bottom;
	background-size: auto 74%;
}

.get-in-touch__form-side {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(140px, 12vw, 240px);
	pointer-events: none;
	z-index: 1;
}

.get-in-touch__form-side-img {
	width: 100%;
	height: auto;
	display: block;
}

.get-in-touch__form-card {
	position: relative;
	z-index: 2;
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0px 20px 67px 0px rgba(0, 0, 0, 0.05);
	padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3vw, 40px);
}

.get-in-touch__form-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-align: center;
}

.get-in-touch__form-heading {
	margin: 0;
	color: #161616;
	line-height: calc(56 / 55);
}

.get-in-touch__form-body {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Gravity Forms inside the card  soften default styling to match design */
.get-in-touch__form-body .gform_wrapper input[type=text],
.get-in-touch__form-body .gform_wrapper input[type=email],
.get-in-touch__form-body .gform_wrapper input[type=tel],
.get-in-touch__form-body .gform_wrapper input[type=url],
.get-in-touch__form-body .gform_wrapper textarea {
	width: 100%;
	padding: clamp(12px, 1.75vw,16px) 20px;
	border: 1px solid #BBB3B4;
	border-radius: 10px;
	background-color: #FFFFFF;
	color: #908A8C;
	line-height: 1.5;
	font-size: clamp(14px, 2vw, 18px);
	height: auto;
}

.get-in-touch__form-body .gform_wrapper input::placeholder,
.get-in-touch__form-body .gform_wrapper textarea::placeholder {
	color: #908A8C;
}

.get-in-touch__form-body .gform_wrapper input:focus,
.get-in-touch__form-body .gform_wrapper textarea:focus {
	outline: none;
	border-color: #D31833;
	box-shadow: 0 0 0 3px rgba(211, 24, 51, 0.12);
}

.get-in-touch__form-body .gform_wrapper textarea {
	height: 140px;
	resize: none;
	min-block-size: inherit !important;
}

.get-in-touch__form-body .gform_wrapper .gform_footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(20px, 2.5vw, 36px);
	padding: 0;
}

/* Override Gravity Forms theme-framework button color to brand red.
   GF defines --gf-color-primary upstream; we override it inside our card
   so the form submit button picks up the brand color instead of GF blue. */
.get-in-touch__form-body .gform_wrapper.gform-theme,
.get-in-touch__form-body .gform_wrapper {
	--gf-color-primary: #D31833;
	--gf-color-primary-rgb: 211, 24, 51;
	--gf-color-primary-darker: #B41229;
	--gf-color-primary-contrast: #FFFFFF;
	--gf-ctrl-btn-bg-color-primary: #D31833;
	--gf-ctrl-btn-bg-color-primary-hover: #B41229;
	--gf-ctrl-btn-border-color-primary: #D31833;
	--gf-ctrl-btn-border-color-primary-hover: #B41229;
	--gf-local-bg-color: #D31833;
	--gf-local-bg-color-hover: #B41229;
	--gf-local-color: #FFFFFF;
	--gf-local-border-color: #D31833;
	--gf-local-border-color-hover: #B41229;
}

.get-in-touch__form-body .gform_wrapper .gform_button {
	border-radius: 8px;
	cursor: pointer;
}

.c-gravity-button__arrow {
	display: inline-flex;
	width: 18px;
	height: 14px;
}

/* ----- Bottom: info band (dark) ----- */
.get-in-touch__info-wrap {
	position: relative;
	overflow: hidden;
	background-color: #161616;
	background-size: cover;
	background-position: center;
	padding: clamp(64px, 7vw, 120px) 0;
	color: #FFFFFF;
}

.get-in-touch__info-overlay {
	position: absolute;
	inset: 0;
	background: #2A0A0E;
	z-index: 0;
	pointer-events: none;
	opacity: 0.95;
}

.get-in-touch__info-container {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 48px);
	align-items: center;
}

.get-in-touch__info-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	text-align: center;
}

.get-in-touch__info-heading {
	margin: 0;
	color: #FFFFFF;
	line-height: calc(56 / 55);
}

.get-in-touch__info-intro {
	margin: clamp(6px, 1vw, 13px) 0 0;
	color: rgba(255, 255, 255, 0.88);
	line-height: calc(30 / 18);
}

/* ----- 3-card grid ----- */
.get-in-touch__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 30px);
	width: 100%;
}

.get-in-touch__card {
	display: flex;
}

.get-in-touch__card a:hover span {color: var(--clr-d31833);}

.get-in-touch__card-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	background-color: #FFFFFF;
	border-radius: 16px;
	padding: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
	width: 100%;
	min-height: 220px;
	text-align: center;
	text-decoration: none;
	color: #161616;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

a.get-in-touch__card-inner:hover,
a.get-in-touch__card-inner:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.get-in-touch__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icn-size);
	margin-bottom: 4px;
	height: var(--icn-size);
	--icn-size: clamp(54px, 8vw, 115px);
}

.get-in-touch__card-icon-img {
}

.get-in-touch__card-label {
	color: #161616;
	line-height: calc(28 / 22);
}

.get-in-touch__card-value {
	color: #5E5E5E;
	margin-top: 4px;
}

@media (max-width: 899px) {
	.get-in-touch__cards {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
	.get-in-touch__form-side {
		display: none;
	}
}

/* ==========================================================================
   Blog Listing (home.php)  blog-grid section
   3-col card grid with featured image, meta row, title, excerpt.
   ========================================================================== */
.blog-grid {
	position: relative;
	padding-block: var(--section-pad-y);
	overflow: hidden;
	background: url(../assets/images/about-bg-decore.png), url(../assets/images/dog-right-bottom.png);
	background-repeat: no-repeat, no-repeat;
	background-size: auto 50%, auto clamp( 200px , 20%, 318px);
	background-position: left top 36%, bottom right;
}

.blog-grid__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.blog-grid__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 1405px;
	margin-inline: auto;
	text-align: center;
}

.blog-grid__eyebrow {
	margin: 0;
	    color: #D31833;
}

.blog-grid__heading {
	margin: 0;
	line-height: calc(56 / 55);
	color: var(--clr-000000);
}

.blog-grid__intro {
	margin: 0;
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
	margin-top: clamp(6px, 1.5vw, 20px);
}

.blog-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.blog-grid__card {
	display: flex;
	background-color: var(--clr-ffffff);
	border-radius: 24px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-grid__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}

.blog-grid__card-link {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 10px;
	color: inherit;
	text-decoration: none;
	width: 100%;
}

.blog-grid__card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 8 / 7;
	border-radius: 18px;
	min-height: 280px;
}

.blog-media__wrap {
    height: 100%; 
    border-radius: 18px;
    overflow: hidden;
}

.blog-media__wrap:before {
	bottom: -1px;
	right: 0;
	content: '';
	background: #fff;
	position: absolute;
	height: 61px;
	width: 87px;
	border-radius: 45px 0 0 0;
	z-index: 1;
	}



.blog-grid__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
	z-index: 0;
	position: relative;
}

.blog-grid__card-image--placeholder {
	background: linear-gradient(135deg, #e9e6e0 0%, #c9c4ba 100%);
}

.blog-grid__card:hover .blog-grid__card-image {
	transform: scale(1.04);
}

.blog-grid__card-arrow {
	position: absolute;
	right: 0;
	bottom: -24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--clr-d31833);
	color: var(--clr-ffffff);
	transition: transform 0.3s ease;
	z-index: 2;
}

.blog-grid__card:hover .blog-grid__card-arrow {
	transform: translate(2px, -2px);
}

.blog-grid__card-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 14px 18px;
}

.blog-grid__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	color: var(--clr-a8a08d);
}

.blog-grid__card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.blog-grid__card-meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-a8a08d);
}

.blog-grid__card-title {
	margin: 0;
	color: var(--clr-161616);
	line-height: calc(44 / 36);
}

.blog-grid__card-title:hover {
	color: var(--clr-d31833);
}

.blog-grid__card-excerpt {
	margin: 0;
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-grid__empty {
	text-align: center;
	color: var(--clr-5e5e5e);
	padding-block: 40px;
}

.blog-grid__dog {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(180px, 18vw, 318px);
	z-index: 0;
	pointer-events: none;
}

.blog-grid__dog-img {
	width: 100%;
	height: auto;
	display: block;
}

/* Pagination */
.blog-grid__pagination {
	display: flex;
	justify-content: center;
}

.blog-grid__pagination-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-grid__pagination-item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 8px;
	background-color: var(--clr-ffffff);
	border: 1px solid var(--clr-line);
	color: var(--clr-161616);
	font-family: var(--ff-inter);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-grid__pagination-item .page-numbers:hover,
.blog-grid__pagination-item .page-numbers:focus-visible {
	background-color: var(--clr-d31833);
	border-color: var(--clr-d31833);
	color: var(--clr-ffffff);
}

.blog-grid__pagination-item .page-numbers.current {
	background-color: var(--clr-d31833);
	border-color: var(--clr-d31833);
	color: var(--clr-ffffff);
}

.blog-grid__pagination-item .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

@media (max-width: 1279px) {
	
	.blog-grid__list {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.blog-media__wrap:before {
		width: 70px;
		height: 58px;
	}

	
	.blog-grid__card-arrow {
		width: 56px;
		height: 56px;
		bottom: -12px;
	}
	 
}


@media (max-width: 1279px) {
	.blog-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.blog-grid__card-title {
		font-size: 28px;
		line-height: 1.2;
	}
}

@media (max-width: 767px) {
	.blog-grid__list {
		grid-template-columns: repeat(1, 1fr);
	}

}


/* ==========================================================================
   Single Post (single.php)  article + sidebar
   ========================================================================== */
.blog-detail-main {
	background: linear-gradient(180deg, #E5E3DD 0%, #FFFFFF 50%);
}

.blog-detail {
	padding-block: clamp(48px, 6vw, 120px);
}

.blog-detail__container {
	display: flex;
	flex-direction: column;
	gap: clamp(44px, 4.5vw,64px);
}

.blog-detail__breadcrumb {
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
}

.blog-detail__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-detail__breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.blog-detail__breadcrumb-link {
	color: var(--clr-5e5e5e);
	transition: color 0.3s ease;
}

.blog-detail__breadcrumb-link:hover,
.blog-detail__breadcrumb-link:focus-visible {
	color: var(--clr-d31833);
}

.blog-detail__breadcrumb-current {color: #5E5E5E;}

.blog-detail__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 387px;
	gap: 60px;
	align-items: flex-start;
}

/* ---- Article ---- */
.blog-detail__article {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.blog-detail__header {
	display: flex;
	flex-direction: column;
}

.blog-detail__eyebrow {color: #D31833;}

.blog-detail__title {
	margin: 0;
	color: var(--clr-000000);
	line-height: calc(56 / 55);
	margin: 12px 0 20px;
}

.blog-detail__short-desc {
	margin: 0;
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
}

.blog-detail__featured {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 909 / 476;
}

.blog-detail__featured-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-detail__content {
	color: var(--clr-5e5e5e);
	line-height: calc(30 / 18);
}

.blog-detail__content p {
	margin: 0 0 16px;
}

.blog-detail__content h2,
.blog-detail__content h3,
.blog-detail__content h4 {
	color: var(--clr-161616);
	margin: 0  0 12px;
	line-height: 1.25;
}

.blog-detail__content h2 { font-family: var(--ff-outfit); font-size: 32px; font-weight: 700; }
.blog-detail__content h3 { font-family: var(--ff-outfit); font-size: 26px; font-weight: 600; }
.blog-detail__content h4 { font-family: var(--ff-outfit); font-size: 22px; font-weight: 600; }

.blog-detail__content a {
	color: var(--clr-d31833);
	text-decoration: underline;
}

.blog-detail__content ul,
.blog-detail__content ol {
	margin: 0 0 16px 1.25em;
	padding: 0;
}

.blog-detail__content li { margin: 0 0 8px; }

.blog-detail__content blockquote {
	margin: 24px 0;
	padding: 16px 24px;
	border-left: 4px solid var(--clr-d31833);
	background: #f6f2ec;
	color: var(--clr-161616);
	font-style: italic;
}

/* ---- Sidebar ---- */
.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 100px;
}

.blog-sidebar__widget {
	background-color: #291619;
	border-radius: 24px;
	padding: 40px clamp(16px, 2.25vw, 40px);
	color: var(--clr-ffffff);
}

.blog-sidebar__widget-title {
	margin: 0 0 24px;
	color: var(--clr-ffffff);
	line-height: calc(44 / 36);
	position: relative;
	padding: 0 0 24px;
}




.blog-sidebar__widget-title:after { position: absolute; 
bottom: 0; height: 1px; width: 100%; content: '';
background: linear-gradient(90deg, #5E5E5E 0%, rgba(94, 94, 94, 0) 100%);
left: 0; }



.blog-sidebar__widget--services .blog-sidebar__widget-title:after { opacity: 0; }
.blog-sidebar__widget--services .blog-sidebar__widget-title { padding-bottom: 0;}


/* Recent Posts */
.blog-sidebar__recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-sidebar__recent-link {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--clr-ffffff);
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.blog-sidebar__recent-item {
    padding: clamp(6px, 1.75vw, 20px) 0;
}

.blog-sidebar__recent-link:hover,
.blog-sidebar__recent-link:focus-visible {
	opacity: 0.8;
}

.blog-sidebar__recent-thumb {
	min-width: 100px;
	height: 100px;
	border-radius: 8px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.05);
	display: block;
}

.blog-sidebar__recent-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-sidebar__recent-thumb-img--placeholder {
	background: linear-gradient(135deg, #444 0%, #2a2a2a 100%);
}

.blog-sidebar__recent-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: calc(22 / 16);
	color: var(--clr-ffffff);
	transition: color 0.3s ease;
}

.blog-sidebar__recent-link:hover .blog-sidebar__recent-title {
	color: var(--clr-d31833);
}

/* Our Services  NOT a dark card; light treatment per Figma spec.
   Heading: black H3 on the page background.
   Items: each row sits on the page bg with red arrow always visible.
   Active item: #FEF6F8 (pale pink) fill + red text + red arrow. */
.blog-sidebar__widget--services {
	background-color: #fff;
	padding: 40px clamp(16px, 2.25vw, 40px);
	color: var(--clr-161616);
	box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
	border-radius: 16px;
}

.blog-sidebar__widget--services .blog-sidebar__widget-title {
	color: var(--clr-000000);
	margin: 0 0 24px;
}

.blog-sidebar__services-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.blog-sidebar__services-item {
	transition: background-color 0.3s ease;
}

.blog-sidebar__services-item + .blog-sidebar__services-item {
	border-top: 1px solid rgba(22, 22, 22, 0.08);
}

.blog-sidebar__services-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15.5px 18px;
	color: #FA0510;
	text-decoration: none;
	background-color: #FEF6F8;
	transition: background-color 0.2s ease;
	border: none;
}

.blog-sidebar__services-label {
	flex: 1;
	min-width: 0;
}

.blog-sidebar__services-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 25px;
	flex: 0 0 22px;
	color: var(--clr-d31833);
	transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover lifts the arrow and tints the row text red */
.blog-sidebar__services-link:hover,
.blog-sidebar__services-link:focus-visible {
	color: var(--clr-d31833);
}

 
/* Active item  pink fill, red text, red arrow (matches Figma service_tab) */
.blog-sidebar__services-item--active {
	background-color: #FEF6F8;
}

.blog-sidebar__services-item--active + .blog-sidebar__services-item,
.blog-sidebar__services-item--active {
	border-top-color: transparent;
}

 
.blog-sidebar__services-item--active .blog-sidebar__services-link {
	color: var(--clr-d31833);
}

@media (max-width: 1199px) {
	.blog-detail__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 40px;
	}
}

@media (max-width: 899px) {
	.blog-detail__layout {
		grid-template-columns: 1fr;
	}
	.blog-sidebar {
		position: static;
	}
}

@media (max-width: 599px) {
	.blog-detail__title {
		font-size: 36px;
		line-height: 1.15;
	}
	.blog-sidebar__widget {
		padding: 24px;
	}
}

	color: var(--clr-d31833);
}

@media (max-width: 1199px) {
	.blog-detail__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 40px;
	}
}

@media (max-width: 899px) {
	.blog-detail__layout {
		grid-template-columns: 1fr;
	}
	.blog-sidebar {
		position: static;
	}
}

@media (max-width: 599px) {
	.blog-detail__title {
		font-size: 36px;
		line-height: 1.15;
	}
	.blog-sidebar__widget {
		padding: 24px;
	}
}


.has-bg-styled .c-container, .has-bg-styled { position: relative; }

.has-bg-styled:before { position: absolute; z-index: 0;
    position: absolute; content: ''; height: 100%; width: 100%; top: 0; left: 0;
	background-image: url('../assets/images/has-bg-styled.png');
    background-repeat: no-repeat;
    background-position: center;
	background-size: cover
}