/*
Theme Name: All-Brite
Theme URI: https://allbritesignsandrentals.com
Author: PMG
Author URI: https://thisispmg.com
Description: Custom block theme for All-Brite Signs & Rentals, Jackson TN. Built for local SEO and lead generation — every section is an editable block pattern, and all brand colours, fonts and spacing live in Appearance > Editor > Styles.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.4.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: allbrite
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-logo, custom-menu, editor-style, block-patterns
*/

/* ==========================================================================
   All-Brite — theme styles
   Only what block supports cannot express lives here.
   Brand tokens all come from theme.json (Appearance > Editor > Styles).
   ========================================================================== */

:root {
	--ab-stripe: repeating-linear-gradient(
		-55deg,
		var(--wp--preset--color--brand) 0 14px,
		transparent 14px 28px
	);
	--ab-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }

/* Focus visibility — never remove, keyboard users and accessibility audits both need it */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Skip link */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--wp--preset--color--brand); color: #fff;
	padding: .75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.ab-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(11, 11, 20, 0.92);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 0;
}

/* The comp's bar is 154px tall on a 1920 canvas with a 210x140 logo, and is
   edged top and bottom by a translucent WHITE hairline (sampled at y46/y206:
   roughly +12 RGB over the surrounding photo) — not an orange rule. */
.ab-header::before,
.ab-header::after {
	content: ""; position: absolute; left: 0; right: 0; height: 4px;
	background: rgba(255, 255, 255, .16);
	pointer-events: none;
}
.ab-header::before { top: 0; }
.ab-header::after  { bottom: -4px; }

.ab-header .wp-block-site-logo img {
	height: clamp(52px, 7.3vw, 140px);
	width: auto;
	transition: height .3s var(--ab-ease);
}
.ab-header.is-stuck .wp-block-site-logo img { height: clamp(46px, 4vw, 76px); }

/* On the homepage the bar floats over the hero photo, as in the comp. */
.ab-home .ab-header {
	position: absolute; top: 0; left: 0; right: 0;
	background: rgba(9, 9, 16, .42);
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ab-home .ab-header.is-stuck {
	background: rgba(9, 9, 16, .94);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
}
.ab-home .wp-site-blocks > header { position: relative; z-index: 100; }

/* Mobile keeps the hazard stripe from the mobile comp. */
@media (max-width: 781px) {
	.ab-header::after { background: var(--ab-stripe); opacity: .95; }
	.ab-header::before { display: none; }
}

/* Navigation */
.ab-nav .wp-block-navigation-item__content {
	font-weight: 500; text-decoration: none;
	font-size: clamp(.95rem, 1.05vw, 1.25rem);
	padding-block: .5rem; position: relative; white-space: nowrap;
}
.ab-nav .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--wp--preset--color--brand);
	transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ab-ease);
}
.ab-nav .wp-block-navigation-item__content:hover::after,
.ab-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.ab-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--brand); }

/* Dropdown submenus */
.ab-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface-2) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 12px; padding: .5rem; min-width: 260px;
	box-shadow: var(--wp--preset--shadow--card);
}
.ab-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem .75rem; border-radius: 8px; }
.ab-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.06); }
.ab-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }

/* Mobile overlay menu */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--deep) !important;
	padding-top: 5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; }

/* Phone link in header */
.ab-phone {
	display: inline-flex; align-items: center; gap: .5rem;
	font-weight: 800; text-decoration: none !important; white-space: nowrap;
	font-size: clamp(1rem, 1.25vw, 1.5rem);
}
.ab-header-actions .wp-block-button__link {
	font-size: clamp(.95rem, 1.05vw, 1.25rem);
	padding: clamp(.75rem, .95vw, 1.15rem) clamp(1.2rem, 1.7vw, 2.1rem);
}
.ab-phone:hover { color: var(--wp--preset--color--brand) !important; }

/* --------------------------------------------------------------------------
   Section heading with flanking rules  (block style: "Rule Both Sides")
   -------------------------------------------------------------------------- */
.is-style-ab-rule {
	display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
	text-align: center; justify-content: center;
}
.is-style-ab-rule::before,
.is-style-ab-rule::after {
	content: ""; height: 2px; flex: 1 1 auto; max-width: 260px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--line));
}
.is-style-ab-rule::after { background: linear-gradient(90deg, var(--wp--preset--color--line), transparent); }
@media (max-width: 600px) {
	.is-style-ab-rule::before, .is-style-ab-rule::after { max-width: 40px; }
}

/* Underlined heading (left aligned variant) */
.is-style-ab-underline { position: relative; padding-bottom: .6rem; }
.is-style-ab-underline::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 68px; height: 4px;
	background: var(--wp--preset--color--brand); border-radius: 2px;
}
.has-text-align-center.is-style-ab-underline::after { left: 50%; transform: translateX(-50%); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ab-hero { position: relative; overflow: hidden; }
.ab-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(900px 420px at 12% 18%, rgba(255,91,0,.16), transparent 62%),
		radial-gradient(760px 420px at 88% 78%, rgba(0,82,148,.30), transparent 60%);
}
.ab-hero > * { position: relative; z-index: 1; }
.ab-hero h1 .ab-accent { color: var(--wp--preset--color--brand); }

/* Hero eyebrow chip */
.ab-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	border: 1px solid rgba(255,91,0,.45); border-radius: 999px;
	padding: .45rem 1rem; background: rgba(255,91,0,.08);
}

/* Hero photo panel — sized to the real photo so nothing is upscaled */
.ab-hero-photo img {
	border-radius: 18px; box-shadow: var(--wp--preset--shadow--card);
	border: 1px solid var(--wp--preset--color--line);
}

/* --------------------------------------------------------------------------
   Trust band
   -------------------------------------------------------------------------- */
.ab-trust { border-block: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); }
.ab-trust .ab-trust-item { display: flex; align-items: center; justify-content: center; gap: .9rem; text-align: left; }
.ab-trust .ab-trust-item svg { flex: 0 0 auto; width: 40px; height: 40px; stroke: var(--wp--preset--color--blue-light); }
.ab-trust .ab-trust-item p { margin: 0; color: var(--wp--preset--color--contrast); font-weight: 600; font-size: 1.0625rem; }
@media (min-width: 782px) {
	.ab-trust .wp-block-columns { position: relative; }
	.ab-trust .wp-block-column + .wp-block-column { border-left: 1px solid var(--wp--preset--color--line); }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.ab-card {
	position: relative; height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px; overflow: hidden;
	transition: transform .35s var(--ab-ease), border-color .35s var(--ab-ease), box-shadow .35s var(--ab-ease);
}
.ab-card:hover { transform: translateY(-6px); border-color: rgba(255,91,0,.55); box-shadow: var(--wp--preset--shadow--card); }
.ab-card figure, .ab-card .wp-block-image { margin: 0; }
.ab-card img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .6s var(--ab-ease); }
.ab-card:hover img { transform: scale(1.05); }
.ab-card .ab-card-body { padding: 1.5rem; }
.ab-card h3 { margin: 0 0 .5rem; font-size: 1.3125rem; }
.ab-card p { margin: 0 0 1.1rem; font-size: .975rem; line-height: 1.6; }
/* Whole-card link target without nesting interactive elements */
.ab-card .ab-card-link::after { content: ""; position: absolute; inset: 0; }

/* Product / link list cards */
.ab-linkcard {
	display: block; text-decoration: none !important; height: 100%;
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px; padding: 1.35rem 1.5rem;
	transition: border-color .3s var(--ab-ease), background .3s var(--ab-ease), transform .3s var(--ab-ease);
}
.ab-linkcard:hover { border-color: rgba(255,91,0,.55); background: var(--wp--preset--color--surface-2); transform: translateY(-3px); }
.ab-linkcard strong { display: block; color: var(--wp--preset--color--contrast); font-size: 1.0625rem; margin-bottom: .3rem; }
.ab-linkcard span { display: block; color: var(--wp--preset--color--muted); font-size: .9rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.ab-gallery.wp-block-gallery figure.wp-block-image {
	border-radius: 14px; overflow: hidden; border: 1px solid var(--wp--preset--color--line);
}
.ab-gallery.wp-block-gallery figure.wp-block-image img { transition: transform .6s var(--ab-ease); }
.ab-gallery.wp-block-gallery figure.wp-block-image:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */
.ab-testimonial { position: relative; }
.ab-testimonial blockquote { border: 0; margin: 0; padding: 0; }
.ab-testimonial cite {
	display: inline-block; margin-top: 1.25rem; font-style: normal; font-weight: 800;
	font-size: 1.125rem; color: var(--wp--preset--color--contrast); position: relative; padding-bottom: .55rem;
}
.ab-testimonial cite::after {
	content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
	width: 56px; height: 3px; background: var(--wp--preset--color--brand); border-radius: 2px;
}
.ab-stars { color: var(--wp--preset--color--brand); letter-spacing: .18em; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   FAQ (details/summary — no JS, and Google parses it for FAQ rich results)
   -------------------------------------------------------------------------- */
.ab-faq .wp-block-details {
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px; padding: 1.1rem 1.4rem; margin-bottom: .85rem;
}
.ab-faq .wp-block-details summary { font-weight: 700; color: var(--wp--preset--color--contrast); cursor: pointer; list-style: none; padding-right: 2rem; position: relative; }
.ab-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ab-faq .wp-block-details summary::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	color: var(--wp--preset--color--brand); font-size: 1.5rem; font-weight: 400; line-height: 1;
}
.ab-faq .wp-block-details[open] summary::after { content: "\2212"; }
.ab-faq .wp-block-details p { margin: .85rem 0 0; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.ab-cta { position: relative; overflow: hidden; border-block: 1px solid var(--wp--preset--color--line); }
.ab-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 50% 0%, rgba(255,91,0,.18), transparent 65%); }
.ab-cta > * { position: relative; }
.ab-cta-phone { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--wp--preset--color--brand) !important; text-decoration: none !important; letter-spacing: -0.02em; }
.ab-cta-phone:hover { color: var(--wp--preset--color--contrast) !important; }

/* --------------------------------------------------------------------------
   Forms (Fluent Forms, styled to the design)
   -------------------------------------------------------------------------- */
.ab-form .fluentform .ff-el-group { margin-bottom: 1rem; }
.ab-form .fluentform .ff-el-input--label label { color: var(--wp--preset--color--contrast); font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.ab-form .fluentform .ff-el-input--label .ff-el-is-required.asterisk-right label:after { color: var(--wp--preset--color--brand); }
.ab-form .fluentform input[type=text],
.ab-form .fluentform input[type=email],
.ab-form .fluentform input[type=tel],
.ab-form .fluentform input[type=date],
.ab-form .fluentform select,
.ab-form .fluentform textarea {
	background: var(--wp--preset--color--field) !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	color: #14141F !important;
	padding: .9rem 1rem !important;
	font-family: inherit !important; font-size: 1rem !important;
	box-shadow: none !important; width: 100%;
	transition: border-color .25s var(--ab-ease), box-shadow .25s var(--ab-ease);
}
.ab-form .fluentform textarea { min-height: 150px; }
.ab-form .fluentform input:focus, .ab-form .fluentform textarea:focus, .ab-form .fluentform select:focus {
	border-color: var(--wp--preset--color--brand) !important;
	box-shadow: 0 0 0 3px rgba(255,91,0,.28) !important;
}
.ab-form .fluentform ::placeholder { color: #5B6076; opacity: 1; }
.ab-form .fluentform .ff-btn-submit {
	background: var(--wp--preset--color--brand) !important;
	border: 0 !important; border-radius: 8px !important;
	color: #fff !important; font-weight: 700 !important; font-family: inherit !important;
	padding: .95rem 2.2rem !important; font-size: 1rem !important; cursor: pointer;
	transition: background .25s var(--ab-ease), transform .25s var(--ab-ease);
}
.ab-form .fluentform .ff-btn-submit:hover { background: var(--wp--preset--color--brand-dark) !important; transform: translateY(-2px); }
.ab-form .fluentform .ff-el-form-check-label, .ab-form .fluentform .ff-el-help-message { color: var(--wp--preset--color--muted); }
.ab-form .fluentform .error-text, .ab-form .fluentform .text-danger { color: #FF9A6B !important; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ab-footer { background: var(--wp--preset--color--deep); border-top: 1px solid var(--wp--preset--color--line); }
.ab-footer h2, .ab-footer h3 { font-size: 1.25rem; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--wp--preset--color--line); font-weight: 600; }
.ab-footer ul { list-style: none; padding: 0; margin: 0; }
.ab-footer li { margin-bottom: .5rem; }
.ab-footer a { color: var(--wp--preset--color--muted); text-decoration: none; transition: color .2s var(--ab-ease); }
.ab-footer a:hover { color: var(--wp--preset--color--brand); }
.ab-footer .ab-footer-phone { color: var(--wp--preset--color--brand); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.ab-footer .ab-footer-phone:hover { color: #fff; }
.ab-footer img { max-width: 220px; height: auto; }
.ab-colophon { border-top: 1px solid var(--wp--preset--color--line); font-size: .85rem; color: var(--wp--preset--color--muted); }
.ab-colophon a { color: var(--wp--preset--color--muted); }

/* Sticky mobile call bar — real lead-capture lever on phones */
.ab-callbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: none; grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--wp--preset--color--line);
	background: rgba(5,5,11,.96); backdrop-filter: blur(8px);
}
.ab-callbar a {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .95rem .5rem; font-weight: 700; text-decoration: none; font-size: .95rem;
}
.ab-callbar a:first-child { background: var(--wp--preset--color--brand); color: #fff; }
.ab-callbar a:last-child { color: #fff; }
.ab-callbar svg { width: 18px; height: 18px; }
@media (max-width: 781px) {
	.ab-callbar { display: grid; }
	body { padding-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   Page masthead (inner pages)
   -------------------------------------------------------------------------- */
.ab-masthead { position: relative; border-bottom: 1px solid var(--wp--preset--color--line); }
.ab-masthead::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(800px 340px at 20% 0%, rgba(0,82,148,.38), transparent 65%),
	            radial-gradient(600px 300px at 90% 100%, rgba(255,91,0,.14), transparent 60%);
}
.ab-masthead > * { position: relative; }
.ab-breadcrumb { font-size: .85rem; color: var(--wp--preset--color--muted); }
.ab-breadcrumb a { color: var(--wp--preset--color--muted); text-decoration: none; }
.ab-breadcrumb a:hover { color: var(--wp--preset--color--brand); }

/* Entry content rhythm on inner pages */
.ab-prose > * + * { margin-top: 1.15rem; }
.ab-prose h2 { margin-top: 2.75rem; }
.ab-prose h3 { margin-top: 2rem; }
.ab-prose ul, .ab-prose ol { padding-left: 1.25rem; }
.ab-prose li { margin-bottom: .5rem; }
.ab-prose li::marker { color: var(--wp--preset--color--brand); }

/* --------------------------------------------------------------------------
   Reveal on scroll — IntersectionObserver, degrades to visible with no JS
   -------------------------------------------------------------------------- */
.ab-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ab-ease), transform .7s var(--ab-ease); }
.ab-reveal.is-in, .no-js .ab-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ab-reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.ab-hairline { border: 0; height: 1px; background: var(--wp--preset--color--line); margin: 0; }
.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.wp-block-image img { border-radius: 12px; }
.ab-flat img { border-radius: 0; }

/* ==========================================================================
   Figma-accurate homepage sections
   Measurements taken from the 1920px comp and expressed proportionally so
   they hold at every width.
   ========================================================================== */

/* --- Hero: full-bleed photo, headline left ------------------------------- */
.ab-hero--photo {
	position: relative;
	display: flex;
	/* Top-aligned: the comp puts the H1 at y308, and centring would stack on
	   top of the padding and push it far lower. */
	align-items: flex-start;
	min-height: clamp(540px, 47.7vw, 915px);
	background-color: #05050B;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: clamp(118px, 16vw, 308px);
	padding-bottom: clamp(48px, 6vw, 96px);
}
.ab-hero--photo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(5,5,11,.88) 0%, rgba(5,5,11,.62) 38%, rgba(5,5,11,.12) 66%, rgba(5,5,11,.30) 100%);
}
.ab-hero--photo > * { position: relative; z-index: 1; }
.ab-hero--photo h1 { margin: 0; text-wrap: balance; }
.ab-hero--photo h1 .ab-accent { color: var(--wp--preset--color--brand); }

.ab-hero-rule {
	border: 0; height: 1px; background: rgba(255,255,255,.42);
	width: min(681px, 100%); margin: clamp(1.25rem, 2vw, 2rem) 0 clamp(.9rem, 1.4vw, 1.4rem);
}
.ab-hero-sub {
	color: #fff !important;
	font-size: clamp(1rem, 1.15vw, 1.35rem);
	letter-spacing: .01em; margin: 0;
}

/* --- Service cards: comp artwork with the label and button over it ------- */
.ab-svc-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.1vw, 2.2rem);
}
.ab-svc {
	position: relative; display: block; text-decoration: none !important;
	transition: transform .35s var(--ab-ease);
}
.ab-svc:hover { transform: translateY(-6px); }
.ab-svc img {
	display: block; width: 100%; height: auto;
	border-radius: 2px;
}
.ab-svc-body {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 0 9% 7.5%;
}
.ab-svc h3 {
	margin: 0 0 clamp(.6rem, 1.1vw, 1rem);
	color: #fff;
	font-size: clamp(1.15rem, 1.55vw, 1.75rem);
	line-height: 1.15;
}
.ab-svc-btn {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: clamp(44px, 3.4vw, 64px);
	border-radius: 10px; color: #fff; font-weight: 700;
	font-size: clamp(.9rem, 1.05vw, 1.125rem);
	transition: filter .25s var(--ab-ease);
}
.ab-svc:hover .ab-svc-btn { filter: brightness(1.12); }
.ab-svc--orange .ab-svc-btn { background: var(--wp--preset--color--brand); }
.ab-svc--blue   .ab-svc-btn { background: var(--wp--preset--color--blue); }

@media (max-width: 1024px) { .ab-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ab-svc-grid { grid-template-columns: 1fr; } }

/* --- Section background photo (intro + services band) -------------------- */
.ab-photo-band {
	position: relative;
	background-color: #05050B;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.ab-photo-band::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(5,5,11,.92) 0%, rgba(5,5,11,.72) 30%, rgba(5,5,11,.72) 70%, rgba(5,5,11,.92) 100%);
}
.ab-photo-band > * { position: relative; z-index: 1; }

/* --- Testimonial over photo --------------------------------------------- */
.ab-testimonial--photo {
	position: relative;
	background-color: #05050B;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.ab-testimonial--photo::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(5,5,11,.62) 0%, rgba(5,5,11,.48) 50%, rgba(5,5,11,.72) 100%);
}
.ab-testimonial--photo > * { position: relative; z-index: 1; }
.ab-testimonial--photo p { color: #fff !important; }
.ab-testi-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 0; height: 0; border-style: solid; opacity: .9;
	background: none; border-width: 0; padding: 0; cursor: default;
}
.ab-testi-nav svg { width: clamp(34px, 3.2vw, 56px); height: auto; fill: #fff; }
.ab-testi-nav--prev { left: clamp(1rem, 4vw, 6rem); }
.ab-testi-nav--next { right: clamp(1rem, 4vw, 6rem); }
@media (max-width: 781px) { .ab-testi-nav { display: none; } }

/* --- Quote form laid out like the comp ----------------------------------- */
.ab-form .fluentform .ff-t-container,
.ab-form .fluentform form > .ff-el-group { margin-bottom: clamp(.85rem, 1.2vw, 1.15rem); }


.ab-form .fluentform .ff-el-input--label label { color: #fff; }
.ab-form .fluentform .ff-btn-submit { min-width: 210px; }

/* --- Footer to match the comp ------------------------------------------- */
.ab-footer h2, .ab-footer h3 { color: #fff; font-weight: 500; letter-spacing: .01em; }
.ab-footer .ab-footer-phone { display: inline-block; margin-top: .35rem; }

/* --- Trust band row, matching the comp's spacing and dividers ------------ */
.ab-trust-row {
	display: flex; align-items: center; justify-content: center;
	gap: clamp(1.5rem, 5vw, 6rem);
	flex-wrap: wrap;
}
.ab-trust-row .ab-trust-item { gap: clamp(.75rem, 1.4vw, 1.4rem); }
.ab-trust-row .ab-trust-item svg { width: clamp(34px, 3.2vw, 56px); height: auto; }
.ab-trust-row .ab-trust-item p {
	font-size: clamp(1rem, 1.35vw, 1.5rem); font-weight: 500; color: #fff;
}
.ab-trust-sep {
	width: 2px; height: clamp(44px, 4.7vw, 90px);
	background: rgba(255,255,255,.22); border-radius: 2px;
}
@media (max-width: 781px) { .ab-trust-sep { display: none; } }


/* --- Quote form: three across, as in the comp ---------------------------
   Fluent Forms wraps every field in a <fieldset>, so the grid has to live
   there — not on <form>, which has a single child. */
.ab-form .fluentform fieldset {
	border: 0; margin: 0; padding: 0; min-width: 0;
}
.ab-form .fluentform .ff-el-group { margin-bottom: 0; }
.ab-form .fluentform input,
.ab-form .fluentform select,
.ab-form .fluentform textarea { width: 100% !important; max-width: 100% !important; }

@media (min-width: 783px) {
	.ab-form .fluentform fieldset {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(1rem, 1.8vw, 1.75rem);
		row-gap: clamp(1rem, 1.5vw, 1.35rem);
		align-items: start;
	}
	.ab-form .fluentform fieldset > legend { grid-column: 1 / -1; }
	.ab-form .fluentform fieldset > div { grid-column: span 1; min-width: 0; }
	/* Message and submit run the full width. */
	.ab-form .fluentform fieldset > div:nth-of-type(n+7) { grid-column: 1 / -1; }
	.ab-form .fluentform .ff-el-group.ff-text-left,
	.ab-form .fluentform .ff_submit_btn_wrapper { text-align: right; }
}
@media (max-width: 782px) {
	.ab-form .fluentform .ff-el-group { margin-bottom: 1rem; }
}

/* Hero and masthead copy sit at the LEFT edge of the container.
   WordPress's constrained layout centres its children, so both the wrapper
   and its children need the auto margin cancelled. */
.ab-hero--photo > .wp-block-group,
.ab-masthead > .wp-block-group {
	margin-left: 0 !important;
	margin-right: auto !important;
	width: 100%;
}
.ab-hero--photo > .wp-block-group > *,
.ab-masthead > .wp-block-group > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}
/* The comp starts the hero copy 188px in on a 1920 canvas (9.8%). Expressing
   that as a viewport-proportional inset keeps the same relationship at every
   width, and drops to the normal gutter on phones where the comp does too. */
.ab-hero--photo > .wp-block-group {
	margin-left: 0 !important;
	margin-right: auto !important;
	padding-left: clamp(0rem, 7.3vw, 8.75rem);
}
@media (max-width: 782px) {
	.ab-hero--photo > .wp-block-group { padding-left: 0; }
}

/* ==========================================================================
   Scroll motion
   Elements are hidden only while .ab-js is on <html> — that class is set by a
   tiny head script and removed if JS is unavailable or motion is reduced, so
   the site degrades to fully visible content.
   ========================================================================== */

.ab-js .ab-anim {
	opacity: 0;
	transition:
		opacity .75s var(--ab-ease),
		transform .85s var(--ab-ease),
		filter .75s var(--ab-ease),
		clip-path .9s var(--ab-ease);
	transition-delay: calc(var(--i, 0) * 85ms);
	will-change: opacity, transform;
}
.ab-js .ab-anim-up    { transform: translate3d(0, 34px, 0); }
.ab-js .ab-anim-left  { transform: translate3d(-44px, 0, 0); }
.ab-js .ab-anim-right { transform: translate3d(44px, 0, 0); }
.ab-js .ab-anim-zoom  { transform: scale(.93); }
.ab-js .ab-anim-blur  { transform: translate3d(0, 22px, 0); filter: blur(9px); }
.ab-js .ab-anim-mask  { clip-path: inset(0 100% 0 0); }

.ab-js .ab-anim.is-in {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0);
	will-change: auto;
}

/* Hero entrance is pure CSS — the H1 is the LCP element and must never wait
   on a script to become visible. */
@keyframes ab-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes ab-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }

.ab-hero--photo h1      { animation: ab-rise .85s var(--ab-ease) both; }
.ab-hero-rule           { animation: ab-grow .9s .25s var(--ab-ease) both; transform-origin: left center; }
.ab-hero--photo .ab-hero-sub { animation: ab-rise .85s .38s var(--ab-ease) both; }
.ab-header              { animation: ab-fade .6s both; }

/* Backgrounds are fixed in place — no parallax drift. */
.ab-hero--photo,
.ab-photo-band,
.ab-testimonial--photo {
	background-position: center center;
}

/* Sticky header state once the page has moved */
.ab-header.is-stuck {
	background: rgba(9, 9, 16, .94);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.ab-home .ab-header.is-stuck {
	position: fixed;
	animation: ab-slide-down .38s var(--ab-ease) both;
}
@keyframes ab-slide-down { from { transform: translateY(-100%); } to { transform: none; } }

/* Reading-progress bar */
.ab-progress {
	position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300;
	pointer-events: none; background: transparent;
}
.ab-progress span {
	display: block; height: 100%; width: 100%;
	background: linear-gradient(90deg, var(--wp--preset--color--brand), #FFA35B);
	transform: scaleX(0); transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
	.ab-js .ab-anim { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
	.ab-hero--photo h1, .ab-hero-rule, .ab-hero--photo .ab-hero-sub, .ab-header { animation: none !important; }
	.ab-progress { display: none; }
}

/* ==========================================================================
   Responsive hardening
   ========================================================================== */

img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }

/* Long URLs, part numbers and unbroken strings must not push the page wide */
.ab-prose, .ab-footer, .ab-masthead, .ab-photo-band, .ab-testimonial--photo {
	overflow-wrap: anywhere;
}
.ab-prose :where(h1, h2, h3, h4) { overflow-wrap: break-word; }

/* Any table becomes scrollable rather than widening the document */
.ab-prose table { display: block; width: 100%; overflow-x: auto; }
pre, code { overflow-x: auto; max-width: 100%; }

@media (max-width: 1024px) {
	.ab-gallery.wp-block-gallery { --wp--style--unstable-gallery-gap: .75rem; }
	.ab-gallery.wp-block-gallery.columns-4 figure.wp-block-image { width: calc(50% - .5rem) !important; }
}
@media (max-width: 600px) {
	.ab-gallery.wp-block-gallery.columns-4 figure.wp-block-image { width: 100% !important; }
	.ab-card img { height: 190px; }
	.is-style-ab-rule { gap: .75rem; }
	.ab-footer .wp-block-column { flex-basis: 100% !important; }
	.ab-cta-phone { word-break: keep-all; }
}
@media (max-width: 400px) {
	.ab-hero--photo { min-height: 480px; }
	.ab-trust-row { gap: 1.25rem; }
}

/* ==========================================================================
   Section seams
   The comp butts every full-width band straight against the next one. WordPress
   adds a 1.5rem blockGap between top-level blocks, which showed as dark strips
   above and below the trust band — remove it for the page-level sections.
   ========================================================================== */
.wp-block-post-content > .alignfull,
main > .wp-block-group.alignfull,
main > .wp-block-post-content > .alignfull {
	margin-block: 0 !important;
}
.wp-site-blocks > * + *,
main > * + * { margin-block-start: 0; }

/* The trust band sits flush against the hero and the band below it. */
.ab-trust { border-top: 0; border-bottom: 1px solid var(--wp--preset--color--line); }

/* Nothing above the hero — the page starts on the photo. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:first-child { margin-block-start: 0 !important; }
.wp-block-post-content > *:first-child,
main > *:first-child { margin-block-start: 0 !important; }
.ab-home .wp-site-blocks { padding-top: 0; }

/* Comp puts 65px between the intro copy and the "Our Services" heading. */
.ab-photo-band .ab-svc-grid { margin-top: 0; }
/* Hide the LiteSpeed/admin-only spacer that only appears when logged in. */
body > div.nojq { display: none; }


/* ==========================================================================
   MOBILE HEADER FIX
   ========================================================================== */

/* The overlay menu is position:fixed, but backdrop-filter on the header makes
   the header a containing block for fixed descendants — so the overlay was
   being trapped inside the header box instead of covering the screen. That is
   why the burger appeared to do nothing. Drop the blur at mobile widths, where
   the overlay is the only way to navigate. */
@media (max-width: 781px) {
  .ab-header,
  .ab-header.is-stuck,
  .ab-home .ab-header,
  .ab-home .ab-header.is-stuck {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* On phones the header carries the logo and the menu, nothing else. The
     phone number and quote button already live in the sticky call bar at the
     bottom of the screen, so repeating them here only caused the overflow. */
  .ab-header .ab-header-actions { display: none !important; }
  .ab-header .ab-nav { margin-left: auto; }

  /* Burger sits hard right and is a comfortable tap target. */
  .wp-block-navigation__responsive-container-open {
    margin-left: auto;
    padding: 10px;
    display: flex !important;
  }
  .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
}

/* The open overlay must sit above everything and fill the screen. */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: var(--wp--preset--color--deep) !important;
  padding: 5rem 1.5rem 2rem !important;
  overflow-y: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  max-width: none;
}
.wp-block-navigation__responsive-container-close {
  padding: 10px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: .35rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding-block: .55rem;
}
/* Give the overlay its own call-to-action, since the header no longer has one. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container::after {
  content: "Call 731-300-9144";
  display: block; margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--brand); font-weight: 800; font-size: 1.125rem;
}