/*
Theme Name: MPI 2026
Theme URI: https://masonplumbing.com
Author: Wright (ihstiv)
Description: Trust-first, premium heritage-trades theme for Mason Plumbing. Lora (brand serif) + Inter, forest green + brass + cream, real third-party ratings and certifications featured throughout. Shares the classic theme's content layer.
Version: 6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mpi2026
*/

:root {
	--green: #0a6b34;
	--green-dk: #074d26;
	--green-deep: #102a1c;
	--gold: #c89b46;
	--gold-2: #c89b46;
	--gold-dk: #9a6f25;
	--gold-lt: #e7c277;
	--star: #e9b949;
	--ink: #1b2620;
	--cream: #f5f7f6;
	--cream-2: #e9edeb;
	--paper: #ffffff;
	--muted: #5e675f;
	--line: #e5e1d4;
	--line-dk: rgba(255,255,255,.14);
	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--disp: "Newsreader", Georgia, serif;
	--sans: "Inter", system-ui, sans-serif;
	--wrap: 1200px;
	--pad: clamp(26px, 5vw, 56px);
	--shadow: 0 18px 50px rgba(16, 30, 20, .12);
	--shadow-sm: 0 8px 26px rgba(16, 30, 20, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.12; margin: 0 0 .45em; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }

.mp-wrap, .mp-container { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.mp-section { padding: clamp(52px, 7vw, 88px) 0; }
.mp-section--cream { background: var(--cream); }
.mp-section--dark { background: var(--green-deep); color: #e7ece8; }
.mp-section--dark h2, .mp-section--dark h3 { color: #fff; }
.text-center { text-align: center; }

/* Stars */
.mp-stars { color: var(--star); letter-spacing: 1px; }

/* Icons */
.mp-ico { width: 24px; height: 24px; display: block; }

/* Kicker / eyebrow */
.mp-kicker, .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.mp-kicker::before, .eyebrow::before { content: none; }
.mp-kicker--light { color: var(--gold-2); }
.mp-kicker--light::before { background: var(--gold-2); }

.mp-head2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; }
.mp-head2 h2 { margin: 0; }
.mp-head2.text-center { display: block; }
.mp-arrowlink { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--green); white-space: nowrap; }
.mp-arrowlink:hover { color: var(--gold); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 600; font-size: .96rem; padding: 14px 26px; border-radius: 6px; background: var(--green); color: #fff; border: 0; cursor: pointer; transition: transform .16s, background .16s, box-shadow .16s; }
.btn:hover { background: var(--green-dk); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--gold { background: var(--gold); }
.btn--gold:hover { background: #9c7227; }
.btn--ghost { background: transparent; border: 1.5px solid currentColor; color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }

/* ---- Top bar ---- */
.mp-top { background: var(--green-deep); color: #cdd6cf; font-size: .82rem; }
.mp-top__row { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; }
.mp-top__trust .mp-stars { margin-right: 6px; }

/* ---- Header ---- */
.mp-head { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); transition: box-shadow .25s; }
.mp-head.is-stuck { box-shadow: 0 6px 22px rgba(0,0,0,.07); }
.mp-head__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 96px; }
.mp-head__logo img { max-height: 66px; width: auto; }
.mp-nav { flex: 1 1 auto; }
.mp-nav ul { list-style: none; display: flex; justify-content: center; gap: 22px; margin: 0; padding: 0; }
.mp-nav a { font-family: var(--sans); font-weight: 600; font-size: .94rem; color: var(--ink); white-space: nowrap; }
.mp-nav a:hover, .mp-nav .current-menu-item > a { color: var(--green); }
.mp-head__cta { display: flex; align-items: center; gap: 18px; }
.mp-head__phone { display: flex; flex-direction: column; line-height: 1.15; text-align: right; flex: 0 0 auto; }
.mp-head__phone-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; white-space: nowrap; }
.mp-head__phone-n { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--green); white-space: nowrap; }
.mp-burger { display: none; background: none; border: 0; font-size: 1.7rem; color: var(--green); cursor: pointer; line-height: 1; }

/* ---- Hero ---- */
.mp-hero { position: relative; color: var(--ink); }
.mp-hero__photo { position: relative; background-size: cover; background-position: center; min-height: clamp(520px, 66vh, 720px); overflow: hidden; }
.mp-hero__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 20%); }
.mp-hero__inner { position: relative; z-index: 2; text-align: center; padding-top: clamp(24px, 3.5vw, 52px); padding-bottom: 28px; }
.mp-hero h1 { color: var(--green); font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1.04; margin: 0 0 8px; text-shadow: 0 2px 16px rgba(255,255,255,.55); }
.mp-hero__welcome { display: block; font-weight: 600; font-size: .8em; line-height: 1.06; }
.mp-hero__tag { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.75rem); color: var(--ink); margin: 0; text-shadow: 0 2px 12px rgba(255,255,255,.7); }
.mp-hero__rating { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; font-size: .92rem; color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; margin: 0; }
.mp-hero__rating .mp-stars { color: var(--star); }
.mp-hero__rating strong { color: var(--green); }
.mp-hero__rating span { opacity: .35; }
.mp-hero__bar { background: var(--green); color: #fff; }
.mp-hero__barrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; }
.mp-hero__sched { color: #fff; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 1rem; }
.mp-hero__sched:hover { color: #fff; opacity: .85; }
.mp-hero__tel { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
.mp-hero__tel .mp-ico { width: 24px; height: 24px; }

/* ---- Hero: circle riff ---- */
.mp-rhero { position: relative; overflow: hidden; min-height: clamp(540px, 72vh, 740px); display: flex; align-items: center; background: var(--cream); }
.mp-rhero__photo { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; }
.mp-rhero__circle { position: absolute; z-index: 2; top: 50%; right: 0; transform: translate(27%, -50%); width: clamp(640px, 88vh, 920px); height: clamp(640px, 88vh, 920px); border-radius: 50%; background: rgba(8,74,36,.9); }
.mp-rhero__content { position: relative; z-index: 3; width: 100%; }
.mp-rhero__inner { margin-left: auto; width: min(470px, 47%); color: #fff; }
.mp-rhero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .85rem; letter-spacing: .03em; color: #fff; margin: 0 0 10px; }
.mp-rhero__eyebrow .mp-stars { color: var(--star); }
.mp-rhero h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.06; margin: 0 0 16px; }
.mp-rhero__phone { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.7rem); color: #fff; margin: 0 0 16px; }
.mp-rhero__phone .mp-ico { width: 28px; height: 28px; color: var(--gold-2); }
.mp-rhero__phone:hover { color: var(--gold-2); }
.mp-rhero__sub { color: rgba(255,255,255,.92); font-size: 1.02rem; line-height: 1.55; margin: 0 0 10px; }
.mp-rhero__lic { color: rgba(255,255,255,.8); font-size: .85rem; margin: 0 0 24px; }
@media (max-width: 860px) {
	.mp-rhero__circle { width: 170vw; height: 170vw; transform: translate(22%, -50%); background: rgba(8,74,36,.92); }
	.mp-rhero__inner { width: 64%; }
}
@media (max-width: 600px) {
	.mp-rhero { display: block; min-height: 0; }
	.mp-rhero__photo { position: relative; height: 230px; }
	.mp-rhero__circle { display: none; }
	.mp-rhero__content { background: var(--green-deep); padding: 34px 0; }
	.mp-rhero__inner { width: 100%; margin: 0; }
}

/* ---- Trust bar ---- */
.mp-trustbar { background: var(--paper); border-bottom: 1px solid var(--line); margin-top: -1px; }
.mp-trustbar__row { display: grid; grid-template-columns: repeat(5, 1fr); }
.mp-trustcard { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 28px 18px; border-right: 1px solid var(--line); color: var(--ink); transition: background .15s; }
.mp-trustcard:last-child { border-right: 0; }
.mp-trustcard:hover { background: var(--cream); color: var(--ink); }
.mp-trustcard__top { display: inline-flex; align-items: center; gap: 7px; }
.mp-trustcard__top .mp-stars { font-size: .95rem; }
.mp-trustcard__top b { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.mp-trustcard__top .mp-bbb { color: var(--green); font-size: 1.3rem; }
.mp-trustcard__name { font-weight: 600; font-size: .95rem; }
.mp-trustcard__count { color: var(--muted); font-size: .8rem; }
.mp-recognition { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; padding: 16px var(--pad) 22px; border-top: 1px solid var(--line); }
.mp-recognition span { font-size: .82rem; color: var(--muted); font-weight: 500; }
.mp-recognition span::before { content: "\2713\00a0\00a0"; color: var(--gold); font-weight: 700; }

/* ---- Diamond Certified feature ---- */
.mp-diamond { background: var(--cream); color: var(--ink); padding: clamp(44px, 6vw, 76px) 0; }
.mp-diamond__row { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.mp-diamond__badge img { width: clamp(120px, 16vw, 188px); height: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.mp-diamond__body h2 { color: var(--green); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.3rem); max-width: 21ch; }
.mp-diamond__body p { color: var(--muted); max-width: 60ch; }
.mp-diamond__body p strong { color: var(--ink); }

/* ---- Promises ---- */
.mp-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 36px; margin-top: 52px; }
.mp-promise { display: flex; gap: 20px; align-items: flex-start; padding: 8px 0; }
.mp-promise__i { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); color: var(--gold); display: grid; place-items: center; }
.mp-promise__i .mp-ico { width: 26px; height: 26px; }
.mp-promise h3 { font-size: 1.14rem; margin: 4px 0 .35em; }
.mp-promise p { color: var(--muted); margin: 0; font-size: .96rem; line-height: 1.55; }

/* ---- Service cards ---- */
.mp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mp-card { position: relative; display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 34px 32px 60px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.mp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.mp-card__icon { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 16px; background: var(--cream); color: var(--green); margin-bottom: 22px; transition: background .18s, color .18s; }
.mp-card:hover .mp-card__icon { background: var(--green); color: #fff; }
.mp-card__icon .mp-ico { width: 32px; height: 32px; }
.mp-card h3 { margin-bottom: .4em; }
.mp-card p { color: var(--muted); font-size: .95rem; margin: 0; line-height: 1.55; }
.mp-card__go { position: absolute; left: 32px; bottom: 26px; color: var(--gold); display: inline-flex; transition: transform .18s; }
.mp-card__go .mp-ico { width: 22px; height: 22px; }
.mp-card:hover .mp-card__go { transform: translateX(6px); }

/* ---- Process steps ---- */
.mp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.mp-step { text-align: center; }
.mp-step__n { font-family: var(--serif); font-weight: 700; font-size: .85rem; color: var(--gold); letter-spacing: .14em; }
.mp-step__i { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); color: var(--green); margin: 12px 0 18px; }
.mp-step__i .mp-ico { width: 28px; height: 28px; }
.mp-step h3 { font-size: 1.14rem; margin-bottom: .35em; }
.mp-step p { color: var(--muted); font-size: .94rem; margin: 0; line-height: 1.55; }

/* ---- Guarantees ---- */
.mp-guarantees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
.mp-guarantee { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 32px 26px; text-align: center; }
.mp-guarantee__i { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--green-deep); color: var(--gold-2); margin-bottom: 18px; }
.mp-guarantee__i .mp-ico { width: 28px; height: 28px; }
.mp-guarantee h3 { font-size: 1.18rem; margin-bottom: .4em; }
.mp-guarantee p { color: var(--muted); font-size: .94rem; margin: 0; line-height: 1.55; }

/* ---- Booking form ---- */
.mp-booking { scroll-margin-top: 92px; }
.mp-booking__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.mp-booking__pitch h2 { color: var(--green); }
.mp-booking__pitch p { color: var(--muted); }
.mp-booking__phone { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 700; font-size: 1.7rem; color: var(--green); margin: 8px 0 8px; }
.mp-booking__phone .mp-ico { width: 26px; height: 26px; color: var(--gold); }
.mp-booking__meta { font-size: .9rem; color: var(--muted); margin: 0; }
.mp-bform { background: var(--paper); border-radius: 16px; padding: 32px 34px; box-shadow: var(--shadow); }
.mp-bform h3 { margin-bottom: 18px; color: var(--ink); }
.mp-bform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mp-bform label { display: block; font-weight: 600; font-size: .84rem; color: var(--ink); margin-bottom: 14px; }
.mp-bform input, .mp-bform select, .mp-bform textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .95rem; background: #fff; color: var(--ink); }
.mp-bform input:focus, .mp-bform select:focus, .mp-bform textarea:focus { outline: 2px solid var(--green); border-color: var(--green); }
.mp-bform .btn { width: 100%; justify-content: center; margin-top: 6px; }
.mp-bform__note { font-size: .8rem; color: var(--muted); text-align: center; margin: 12px 0 0; }

/* ---- FAQ ---- */
.mp-faqlist { max-width: 820px; margin: 0 auto; }
.mp-faqitem { border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 12px; }
.mp-faqitem summary { list-style: none; cursor: pointer; padding: 20px 24px; font-family: var(--serif); font-weight: 600; font-size: 1.08rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mp-faqitem summary::-webkit-details-marker { display: none; }
.mp-faqitem summary::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 1.7rem; color: var(--gold); line-height: 1; transition: transform .2s; }
.mp-faqitem[open] summary::after { transform: rotate(45deg); }
.mp-faqitem__a { padding: 0 24px 22px; }
.mp-faqitem__a p { color: var(--muted); margin: 0; line-height: 1.62; }

/* ---- Skip link ---- */
.mp-skip { position: absolute; left: 12px; top: -64px; z-index: 200; background: var(--green); color: #fff; padding: 10px 18px; border-radius: 6px; font-weight: 600; transition: top .16s; }
.mp-skip:focus { top: 12px; color: #fff; outline: 2px solid var(--gold); }
#mp-main { outline: none; }

/* ---- About teaser ---- */
.mp-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 66px); align-items: center; }
.mp-about__media { position: relative; }
.mp-about__media img { width: 100%; border-radius: 12px; box-shadow: var(--shadow); }
.mp-about__tag { position: absolute; right: -18px; bottom: -18px; background: var(--gold); color: #fff; border-radius: 10px; padding: 16px 22px; text-align: center; box-shadow: var(--shadow); }
.mp-about__tag strong { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1; }
.mp-about__tag span { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.mp-pull { margin: 22px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink); }
.mp-pull cite { display: block; margin-top: 10px; font-size: .9rem; font-style: normal; font-family: var(--sans); color: var(--muted); }

/* ---- Reviews (dark) ---- */
.mp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mp-review { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 30px; margin: 0; box-shadow: var(--shadow-sm); }
.mp-review .mp-stars { font-size: 1.05rem; }
.mp-review blockquote { margin: 14px 0 18px; font-size: 1.04rem; line-height: 1.6; color: var(--ink); }
.mp-review figcaption strong { display: block; font-family: var(--serif); color: var(--green); }
.mp-review figcaption span { font-size: .85rem; color: var(--gold); }

/* ---- Service area ---- */
.mp-area { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.mp-area__cities { list-style: none; margin: 18px 0 22px; padding: 0; columns: 2; column-gap: 28px; }
.mp-area__cities li { padding: 5px 0 5px 24px; position: relative; }
.mp-area__cities li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.mp-area__map img { width: 100%; border-radius: 12px; box-shadow: var(--shadow); }

/* ---- CTA ---- */
.mp-cta { position: relative; overflow: hidden; color: #fff; text-align: center; }
.mp-cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; }
.mp-cta::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(120deg, rgba(10,107,52,.93), rgba(7,77,38,.9)); }
.mp-cta__inner { position: relative; z-index: 3; padding: clamp(70px, 10vw, 130px) 0; }
.mp-cta h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0 0 14px; }
.mp-cta p { color: rgba(255,255,255,.9); max-width: 56ch; margin: 0 auto 28px; }
.mp-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mp-areasec { position: relative; overflow: hidden; }
.mp-areasec__map { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .06; z-index: 1; }
.mp-areasec__in { position: relative; z-index: 2; }
/* Reviews carousel */
.mp-rvwrap { position: relative; }
.mp-rvview { overflow: hidden; }
.mp-reviews.mp-rvtrack { display: flex; gap: 24px; padding: 6px 2px 16px; transition: transform .7s cubic-bezier(.18, 1.25, .4, 1); will-change: transform; }
.mp-reviews.mp-rvtrack .mp-review { flex: 0 0 calc((100% - 48px) / 3); }
.mp-rvnav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; }
.mp-rvprev { left: -12px; } .mp-rvnext { right: -12px; }
.mp-rvnav:hover { background: var(--green); color: #fff; border-color: var(--green); }
@media (max-width: 900px) { .mp-reviews.mp-rvtrack .mp-review { flex: 0 0 calc((100% - 24px) / 2); } }
@media (max-width: 600px) { .mp-reviews.mp-rvtrack .mp-review { flex: 0 0 86%; } }

/* ---- Footer ---- */
.mp-foot { background: var(--ink); color: #b3bcb4; font-size: .94rem; padding: clamp(56px, 8vw, 90px) 0 34px; }
.mp-foot__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 38px; padding-bottom: 38px; border-bottom: 1px solid var(--line-dk); }
.mp-foot__logo { max-height: 60px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .95; }
.mp-foot h4 { color: #fff; font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1em; }
.mp-foot ul { list-style: none; margin: 0; padding: 0; }
.mp-foot li { margin-bottom: .58em; }
.mp-foot a { color: #b3bcb4; }
.mp-foot a:hover { color: #fff; }
.mp-foot__phone { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: #fff !important; }
.mp-foot__badges { display: flex; gap: 12px; margin-top: 18px; }
.mp-foot__badges img { max-height: 58px; background: #fff; border-radius: 8px; padding: 6px; }
.mp-foot__social a { display: inline-block; margin-right: 16px; margin-top: 8px; font-weight: 600; font-size: .85rem; }
.mp-foot__bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: .8rem; }

/* ---- Sticky mobile call bar ---- */
.mp-callbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; }
.mp-callbar a { flex: 1; text-align: center; padding: 15px; font-family: var(--sans); font-weight: 700; font-size: 1rem; background: var(--green); color: #fff; }
.mp-callbar a.mp-callbar--alt { background: var(--gold); }

/* ============================================================ *
 *  Shared interior-template classes
 * ============================================================ */
section { padding: clamp(58px, 8vw, 100px) 0; }
.mp-pagehead { position: relative; overflow: hidden; background: #fff; color: var(--ink); text-align: center; padding: clamp(140px, 16vw, 188px) 0 clamp(46px, 6vw, 66px); border-bottom: 1px solid #e8ece9; }
.mp-pagehead__bg { display: none; }
.mp-pagehead::before { display: none; }
.mp-pagehead__in { position: relative; z-index: 3; }
.mp-pagehead h1 { color: var(--ink); font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0; }
.mp-pagehead .mp-kicker, .mp-pagehead .mp-kicker--light { justify-content: center; color: #9a6f25; }
.mp-pagehead .mp-kicker--light::before { background: #9a6f25; }
.mp-pagehead__sub { max-width: 58ch; margin: 16px auto 0; color: #41504a; font-size: 1.08rem; }
.mp-pagehead__trust { margin: 22px 0 0; font-size: .92rem; color: #41504a; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mp-pagehead__trust .mp-stars { color: var(--star); }
.mp-pagehead__trust strong { color: var(--green); }
/* Service Area — full-page map background (placeholder map; swap in a hi-res Bay Area map) */
body.mp-mapbg { background: linear-gradient(rgba(247,249,247,.42), rgba(247,249,247,.52)), url('assets/img/service-area-map.png') center top / cover fixed no-repeat; background-color: #e6edf1; }
body.mp-mapbg .mp-section, body.mp-mapbg .mp-section--cream { background: transparent; }
body.mp-mapbg .mp-pagehead__bg, body.mp-mapbg .mp-pagehead::before { display: none; }
body.mp-mapbg .mp-pagehead { background: transparent; border-bottom: none; color: var(--ink); }
body.mp-mapbg .mp-pagehead h1 { color: var(--ink); text-shadow: none; }
body.mp-mapbg .mp-pagehead .mp-kicker--light { color: #9a6f25; }
body.mp-mapbg .mp-pagehead .mp-kicker--light::before { background: #9a6f25; }
body.mp-mapbg .mp-pagehead__sub { color: #41504a; text-shadow: none; }
body.mp-mapbg .mp-pagehead__trust { color: #41504a; }
body.mp-mapbg .mp-pagehead__trust strong { color: var(--green); }
.mp-pagehead__trust span { opacity: .4; }

.mp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.mp-split img { width: 100%; border-radius: 12px; box-shadow: var(--shadow); }
.mp-split--soft { background: var(--cream); }

.mp-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.mp-feature { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 34px 30px; }
.mp-feature__icon { width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--gold); display: grid; place-items: center; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.mp-feature__icon .mp-ico { width: 26px; height: 26px; }
.mp-feature h3 { margin-bottom: .4em; }
.mp-feature p { color: var(--muted); margin: 0; font-size: .96rem; }

.mp-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.mp-svc { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: transform .16s, box-shadow .16s; }
.mp-svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mp-svc__media { aspect-ratio: 16/10; background: var(--cream); display: grid; place-items: center; padding: 22px; }
.mp-svc__media img { max-height: 160px; width: auto; }
.mp-svc__media .mp-ico, .mp-ico--lg { width: 72px; height: 72px; color: var(--green); stroke-width: 1.2; }
.mp-svc__body { padding: 24px 26px 28px; }
.mp-svc h3 { margin-bottom: .35em; }
.mp-svc p { color: var(--muted); font-size: .95rem; margin: 0 0 1em; }
.mp-svc a { font-family: var(--sans); font-weight: 600; }

.mp-checklist { list-style: none; margin: 18px 0 0; padding: 0; }
.mp-checklist li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--line); }
.mp-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 9px; color: var(--gold); font-weight: 800; }
.mp-checklist--cols { columns: 3; column-gap: 40px; }
.mp-checklist--cols li { break-inside: avoid; border-bottom: 0; padding: 6px 0 6px 30px; }

.mp-contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 56px); align-items: start; }
.mp-infolist { list-style: none; margin: 24px 0; padding: 0; }
.mp-infolist li { display: flex; gap: 16px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.mp-infolist span { color: var(--gold); font-size: 1.3rem; width: 26px; text-align: center; }
.mp-infolist a { font-weight: 600; }
.mp-contact__social a { margin-right: 18px; font-weight: 600; font-size: .85rem; }
.mp-contact__form { background: var(--green-deep); color: #fff; border-radius: 12px; padding: 36px 38px; }
.mp-contact__form h3 { color: #fff; }
.mp-form label { display: block; font-weight: 500; font-size: .88rem; margin-bottom: 18px; color: rgba(255,255,255,.86); }
.mp-form input, .mp-form textarea { display: block; width: 100%; margin-top: 7px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; font: inherit; font-size: .96rem; background: rgba(255,255,255,.06); color: #fff; }
.mp-form input:focus, .mp-form textarea:focus { outline: 2px solid var(--gold-2); border-color: var(--gold-2); }
.mp-form .btn { background: var(--gold); color: #fff; }

.mp-content { max-width: 760px; margin: 0 auto; padding: clamp(60px, 8vw, 100px) var(--pad); }
.mp-content img { border-radius: 10px; margin: 1.4em 0; }
.mp-postmeta { color: var(--muted); font-size: .9rem; margin-bottom: 1.4em; }
.mp-postlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.mp-postcard { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.mp-postcard__body { padding: 24px 26px; }

/* ============================================================ *
 *  Responsive
 * ============================================================ */
@media (max-width: 1180px) {
	.mp-head__phone { display: none; }
}
@media (max-width: 1000px) {
	.mp-trustbar__row { grid-template-columns: repeat(3, 1fr); }
	.mp-trustcard:nth-child(3) { border-right: 0; }
	.mp-promises, .mp-cards, .mp-reviews, .mp-steps, .mp-guarantees, .mp-features__grid, .mp-services__grid { grid-template-columns: repeat(2, 1fr); }
	.mp-foot__top { grid-template-columns: repeat(2, 1fr); }
	.mp-head__phone-l { display: none; }
}
@media (max-width: 760px) {
	.mp-top__meta { display: none; }
	.mp-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
	.mp-nav.is-open { display: block; }
	.mp-nav ul { flex-direction: column; gap: 0; padding: 8px 0; }
	.mp-nav li { padding: 12px var(--pad); border-top: 1px solid var(--line); }
	.mp-burger { display: block; }
	.mp-head__phone { display: none; }
	.mp-head__cta .btn--green { display: none; }
	.mp-trustbar__row { grid-template-columns: 1fr 1fr; }
	.mp-trustcard { border-right: 0; border-bottom: 1px solid var(--line); }
	.mp-diamond__row, .mp-promises, .mp-cards, .mp-reviews, .mp-steps, .mp-guarantees, .mp-booking__grid, .mp-bform__row, .mp-about, .mp-area, .mp-split, .mp-contact, .mp-features__grid, .mp-services__grid, .mp-postlist { grid-template-columns: 1fr; }
	.mp-diamond__badge { display: none; }
	.mp-about__tag { right: 12px; }
	.mp-area__cities { columns: 2; }
	.mp-checklist--cols { columns: 2; }
	.mp-callbar { display: flex; }
	body { padding-bottom: 54px; }
	.mp-section, section { padding: 52px 0; }
}

/* =========================================================================
   HOMEPAGE (v5) — ported from the approved mockup
   ========================================================================= */
.mp-skip{position:absolute;left:-9999px}
.mp-skip:focus{left:8px;top:8px;background:#fff;padding:8px 14px;z-index:100;border-radius:6px}

/* --- Site nav (transparent, over hero / page hero) --- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 52px;transition:background .25s,padding .25s,box-shadow .25s}
.nav-logo img{height:66px;width:auto}
.nav-logo .logo-dk{display:none;height:66px}
/* sticky state once scrolled */
.nav.is-stuck{background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.09);padding-top:14px;padding-bottom:14px}
.nav.is-stuck .nav-links a{color:var(--ink)}
.nav.is-stuck .nav-burger{color:var(--ink)}
.nav.is-stuck .logo-lt{display:none}
.nav.is-stuck .logo-dk{display:block}
body.home .nav.is-stuck{justify-content:space-between}
body.home .nav.is-stuck .nav-logo{display:block}
/* Photo page-hero on interior pages — show the nav-logo over it (light) */
body:not(.home) .nav-logo{display:block}
.nav-links{display:flex;align-items:center;gap:28px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.nav-links a{color:var(--ink)}
.nav-links a:hover{color:var(--green)}
.nav-phone{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:16px;letter-spacing:0;text-transform:none;color:var(--green)}
.nav-phone .mp-ico{width:18px;height:18px}
.nav-phone:hover{color:var(--gold)}
.nav .sch{background:var(--gold);color:#23190a;padding:11px 22px;border-radius:6px;font-weight:700;letter-spacing:.05em}
.nav .sch:hover{background:#b6822f;color:#23190a}
.nav-burger{display:none;background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer;line-height:1}
body.home .nav-logo{display:none}
body.home .nav{justify-content:flex-end}
/* Interior pages carry a dark page-hero, so the nav goes light */
body:not(.home) .nav-logo .logo-lt{display:none}
body:not(.home) .nav-logo .logo-dk{display:block;height:66px}
body:not(.home) .nav-links a{color:var(--ink)}
body:not(.home) .nav-links a:hover{color:var(--green)}
body:not(.home) .nav-burger{color:var(--ink)}
/* About dropdown */
.nav-item{position:relative;display:flex;align-items:center}
.nav-has-sub::after{content:"";position:absolute;top:100%;left:0;width:100%;height:12px}
.nav-has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.65}
.nav-sub{position:absolute;top:calc(100% + 6px);left:0;display:none;flex-direction:column;min-width:172px;background:rgba(248,250,248,.55);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);padding:7px 0;border-radius:8px;box-shadow:0 14px 36px rgba(0,0,0,.22);z-index:40}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{display:flex}
.nav-sub a{padding:8px 16px;color:var(--ink) !important;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;white-space:nowrap}
.nav-sub a:hover{background:rgba(10,107,52,.08);color:var(--green) !important}
@media (max-width:980px){
  .nav.is-open .nav-item{flex-direction:column;align-items:flex-start;width:100%}
  .nav.is-open .nav-sub{position:static;transform:none;display:flex;background:none;box-shadow:none;padding:2px 0 2px 14px;min-width:0}
  .nav-has-sub>a::after{display:none}
}

/* --- Hero --- */
.hero{position:relative;min-height:880px;overflow:hidden;padding:0;line-height:normal}
.nav,.ft{line-height:normal}
.hero .bg{position:absolute;inset:0;background:url(assets/img/hero-fleet.jpg) center 6%/auto 107% no-repeat}
.hero .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 12%,rgba(0,0,0,0) 100%)}
.hero .wrap{position:relative;z-index:4;max-width:1200px;margin:0 auto;padding:0 52px}
.hero .top{display:flex;justify-content:space-between;align-items:flex-start;padding-top:52px;gap:30px}
.brand{flex:0 0 auto;max-width:500px;position:relative;top:-50px;left:-50px;text-align:center}
.brand .logo{height:301px;width:auto}
.svc{margin:2px 0 0;font-weight:700;font-size:12px;text-transform:uppercase;white-space:nowrap;color:var(--gold-dk);text-shadow:0 1px 5px rgba(255,255,255,.6)}
.dc{display:inline-flex;align-items:center;gap:13px;margin-top:26px;padding:6px 13px;border:1px solid rgba(27,38,32,.32);border-radius:10px;text-align:left}
.dc img{height:60px;width:auto}
.dc b{display:block;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--green);text-shadow:0 1px 5px rgba(255,255,255,.6)}
.dc span{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-dk);text-shadow:0 1px 5px rgba(255,255,255,.6)}
.msg{flex:1 1 0;max-width:580px;text-align:center;padding-top:68px}
.msg h1{font-family:var(--disp);font-weight:500;font-size:39px;line-height:1.07;color:var(--ink);text-shadow:0 1px 12px rgba(255,255,255,.72);letter-spacing:0;margin:0}
.msg .sub{margin-top:18px;margin-bottom:0;font-family:var(--disp);font-style:italic;font-size:22px;color:#33423b;text-shadow:0 1px 10px rgba(255,255,255,.8)}
.cta{display:flex;gap:14px;justify-content:center;margin-top:26px}
.hbtn{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;padding:16px 32px;border-radius:6px;background:var(--gold);color:#23190a;border:1.5px solid var(--gold)}
.hbtn:hover{background:#b6822f;color:#23190a}
.hbtn--o{background:var(--green);border-color:var(--green);color:#fff}
.hbtn--o:hover{background:var(--green-dk);color:#fff}

/* --- Rotating testimonial --- */
.tw{position:absolute;left:54%;transform:translateX(-50%);bottom:273px;z-index:5;width:min(420px,60%);text-align:center;color:#fff}
.tw::before{content:"";position:absolute;inset:-32px -72px;z-index:-1;background:radial-gradient(ellipse 86% 95% at 50% 50%,rgba(5,13,9,.82),rgba(5,13,9,0) 74%);filter:blur(11px);pointer-events:none}
.tw .st{color:var(--star);font-size:12px;letter-spacing:1px;margin-right:8px;vertical-align:1px}
.tw .q{font-family:var(--disp);font-style:italic;font-size:26px;line-height:1.45;margin:8px 0 0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 22px rgba(0,0,0,.85);transition:opacity .5s}
.tw .a{margin:10px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt);text-shadow:0 1px 8px rgba(0,0,0,.85)}
.tnav{position:absolute;bottom:40px;background:none;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer;opacity:.65;padding:0 8px;text-shadow:0 2px 12px rgba(0,0,0,.55);transition:opacity .15s}
.tnav:hover{opacity:1}
.tprev{left:-50px}
.tnext{right:-50px}
.tbody.anim{animation:tin .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes tin{0%{opacity:0;transform:translateX(80px)}100%{opacity:1;transform:translateX(0)}}

/* --- Ratings strip --- */
.rstrip{position:absolute;left:0;right:0;bottom:0;z-index:5}
.rstrip .row{max-width:1100px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;position:relative}
.rstrip .row::before{content:"";position:absolute;inset:-16px -36px -10px;z-index:0;background:radial-gradient(ellipse 70% 135% at 50% 60%,rgba(4,11,8,.88),rgba(4,11,8,0) 72%);filter:blur(16px);pointer-events:none}
.rstrip .c{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 28px 8px;position:relative;z-index:1;text-decoration:none;color:inherit}
.rstrip .lg{display:flex;align-items:flex-end;justify-content:center;height:40px;margin-bottom:7px;position:relative;top:4px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:19px;line-height:1}
.rstrip .lg img{height:19px;width:auto;display:block;filter:drop-shadow(0 0 4px rgba(255,255,255,.45)) drop-shadow(0 0 1px rgba(255,255,255,.35))}
.rstrip .lg img[src*="google"],.rstrip .lg img[src*="houzz"]{filter:drop-shadow(0 0 2px rgba(255,255,255,.4))}
.rstrip .lg-bbb b{background:#0a6ebd;color:#fff;padding:3px 8px;border-radius:3px;font-size:14px;letter-spacing:.5px;box-shadow:0 0 5px rgba(255,255,255,.4)}
.rstrip .lg-dc img{height:38px}
.rstrip .v{font-family:var(--sans);font-size:15px;font-weight:400;color:#fff;display:flex;align-items:center;gap:6px}
.rstrip .v--txt{font-size:13px}
.rstrip .v .s{color:var(--star)}

/* --- Footer (5 columns) --- */
.ft{background:#0d2316;color:#c4cfc7;font-size:14px}
.ft-wrap{max-width:1140px;margin:0 auto;padding:23px 52px 16px;display:grid;grid-template-columns:1.3fr 0.95fr 1.05fr 1fr 1.15fr;gap:40px;align-items:start}
.ft-logocol{text-align:center}
.ft h4{color:var(--gold-lt);font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 4px}
.ft h4.ft-hours{margin-top:19px}
.ft p{margin:0 0 6px;line-height:1.4}
.ft a{color:#c4cfc7;display:block;margin-bottom:5px}
.ft a:hover{color:var(--gold-lt)}
.ft-famwrap{text-align:center;margin:0;transform:translateX(-10px)}
.ft-famwrap figcaption{margin-top:7px;font-size:9.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-lt);white-space:nowrap}
.ft-logo{height:118px;width:auto;margin:0 auto}
.ft-fam{width:168px;height:150px;margin:0 auto;border:1px solid rgba(255,255,255,.55);box-shadow:0 10px 24px rgba(0,0,0,.3);background:url(assets/img/family-fairfax.jpg) 80% 50%/140% no-repeat}
.ftb{max-width:1140px;margin:0 auto;padding:2px 52px 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#8fa096}
.ft-credit{white-space:nowrap}.ft-credit a{display:inline;color:#8fa096;text-decoration:none;margin-bottom:0}
.ft-credit a:hover{color:#c89b46}
.ft-lic{margin-top:3px;font-size:12.5px;line-height:1.55;color:#9aa89e;text-align:center}

/* --- Homepage responsive --- */
@media (max-width:980px){
  .nav-links a:not(.sch){display:none}
  .nav-burger{display:block}
  .nav.is-open{flex-wrap:wrap;background:rgba(13,35,22,.97);padding-bottom:16px}
  .nav.is-open .nav-burger{color:#fff}
  .nav.is-open .nav-links{flex-direction:column;align-items:flex-start;width:100%;gap:14px;margin-top:10px}
  .nav.is-open .nav-links a{color:#fff;display:block}
  .hero{min-height:auto}
  .hero .top{flex-direction:column;align-items:center;padding-top:96px;gap:8px}
  .brand{position:static;max-width:none}
  .brand .logo{height:210px}
  .msg{padding-top:18px}
  .tw{position:static;transform:none;width:auto;max-width:560px;margin:18px auto 8px;padding:0 24px}
  .tw::before{display:none}
  .tw .q{font-size:21px;text-shadow:none;color:var(--ink)}
  .tw .a{color:var(--gold-dk);text-shadow:none}
  .tnav{display:none}
  .rstrip{position:static;background:#0d2316;padding:6px 0}
  .rstrip .row::before{display:none}
  .ft-wrap{grid-template-columns:1fr 1fr;gap:30px;text-align:center;justify-items:center}
  .ft-fam{left:0}
  .ft-famwrap{transform:none}
}
@media (max-width:560px){
  .nav{padding:16px 22px}
  .hero .wrap{padding:0 22px}
  .msg h1{font-size:30px}
  .cta{flex-direction:column}
  .ft-wrap{grid-template-columns:1fr}
}

/* --- FAQ page --- */
.mp-faqwrap{max-width:840px}
.mp-faq{border-bottom:1px solid var(--line)}
.mp-faq summary{font-family:var(--disp);font-size:1.3rem;font-weight:500;color:var(--ink);cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative}
.mp-faq summary::-webkit-details-marker{display:none}
.mp-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.7rem;font-weight:400;color:var(--gold);font-family:var(--sans);transition:transform .2s}
.mp-faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.mp-faq summary:hover{color:var(--green)}
.mp-faq__a{padding:0 40px 22px 0;color:var(--muted)}
.mp-faq__a p{margin:0;font-size:1.02rem;line-height:1.7}

/* ===== House style: home hero full-bleed + transparent-over-hero nav ===== */
.home .hero .bg{background-position:center 32%;background-size:cover}
/* scrim: darker behind the nav (top) + a touch at the bottom for the white
   testimonial/ratings text; keeps the middle (brand lockup) legible */
.home .hero .ov{background:linear-gradient(180deg,
  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 62%, rgba(0,0,0,.30) 100%)}
/* The dark band at the top is only for the white nav links on the right, so the logo on the left
   keeps the lighter sky behind it. */
.home .hero .ov::before{content:"";position:absolute;left:0;right:0;top:0;height:34%;
  background:linear-gradient(180deg,rgba(10,26,20,.55) 0%,rgba(10,26,20,.22) 36%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 40%,#000 54%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 40%,#000 54%)}
/* transparent nav = light text/logo over the photo (reverts to dark on .is-stuck) */
.home .nav:not(.is-stuck) .nav-links a{color:#fff}
.home .nav:not(.is-stuck) .nav-links a:hover{color:var(--gold-lt,#e7c277)}
.home .nav:not(.is-stuck) .nav-phone{color:#fff}
.home .nav:not(.is-stuck) .nav-phone:hover{color:var(--gold-lt,#e7c277)}
.home .nav:not(.is-stuck) .nav-burger{color:#fff}

/* Reusable text + image split row (house style: photo beside content) */
.mp-splitrow{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,64px);align-items:center;text-align:left}
.mp-splitrow__text{text-align:left}
.mp-splitrow__img{margin:0}
.mp-splitrow__img img{width:100%;height:100%;max-height:460px;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);display:block}
@media(max-width:860px){.mp-splitrow{grid-template-columns:1fr;gap:24px}.mp-splitrow__img img{max-height:300px}}

/* Full-bleed photo variant for service cards (fills the tile, no padding) */
.mp-svc__media--photo{padding:0}
.mp-svc__media--photo img{width:100%;height:100%;object-fit:cover;max-height:none}

/* keep photo cards locked to the 16/10 tile (fill, no stretch) */
.mp-svc__media{position:relative}
.mp-svc__media--photo img{position:absolute;inset:0}

/* Contact form: light card (was dark green) */
.mp-contact__form{background:var(--cream);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.mp-contact__form h3{color:var(--green)}
.mp-form label{color:var(--ink)}
.mp-form input,.mp-form textarea{border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.mp-form input::placeholder,.mp-form textarea::placeholder{color:var(--muted)}
.mp-form input:focus,.mp-form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.mp-form .btn{background:var(--gold);color:#23190a}

/* ===== House style: interior page heroes = full-bleed photo ===== */
.mp-pagehead{color:#fff;background:var(--green-deep);border-bottom:0;padding:clamp(150px,18vw,224px) 0 clamp(58px,8vw,88px)}
.mp-pagehead__bg{display:block;position:absolute;inset:0;background-size:cover;background-position:center;z-index:1}
body.mp-mapbg .mp-pagehead__bg{display:block}
.mp-pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,20,.58) 0%,rgba(10,26,20,.26) 45%,rgba(10,26,20,.58) 100%);z-index:2}
.mp-pagehead__in{position:relative;z-index:3}
.mp-pagehead h1{color:#fff}
.mp-pagehead__sub{color:rgba(255,255,255,.92)}
.mp-pagehead .mp-kicker,.mp-pagehead .mp-kicker--light{color:var(--gold-lt)}
.mp-pagehead .mp-kicker--light::before{background:var(--gold-lt)}
.mp-pagehead__trust{color:rgba(255,255,255,.9)}
.mp-pagehead__trust strong{color:#fff}

/* Interior nav: transparent + light over the photo hero, solid on scroll */
body:not(.home) .nav:not(.is-stuck) .nav-logo .logo-lt{display:block}
body:not(.home) .nav:not(.is-stuck) .nav-logo .logo-dk{display:none}
body:not(.home) .nav:not(.is-stuck) .nav-links a{color:#fff}
body:not(.home) .nav:not(.is-stuck) .nav-links a:hover{color:var(--gold-lt)}
body:not(.home) .nav:not(.is-stuck) .nav-phone{color:#fff}
body:not(.home) .nav:not(.is-stuck) .nav-burger{color:#fff}

/* Service Area (mp-mapbg) now has a photo hero -> light text like the others */
body.mp-mapbg .mp-pagehead{color:#fff}
body.mp-mapbg .mp-pagehead h1{color:#fff}
body.mp-mapbg .mp-pagehead__sub{color:rgba(255,255,255,.92)}
body.mp-mapbg .mp-pagehead .mp-kicker,body.mp-mapbg .mp-pagehead .mp-kicker--light{color:var(--gold-lt)}
body.mp-mapbg .mp-pagehead .mp-kicker--light::before{background:var(--gold-lt)}
body.mp-mapbg .mp-pagehead__trust{color:rgba(255,255,255,.9)}
body.mp-mapbg .mp-pagehead__trust strong{color:#fff}

/* White nav logo (transparent-over-hero state): subtle shadow to pop on any photo */
.nav .logo-lt{filter:drop-shadow(0 1px 5px rgba(0,0,0,.45))}

/* ============================================================
   Photo-backdrop section: full-bleed photo + light frosted boxes
   (house design exploration — light boxes / black text variant)
   ============================================================ */
.mp-section--photobox{position:relative;overflow:hidden;isolation:isolate;color:#fff}
.mp-section--photobox .mp-photobox__bg{position:absolute;inset:0;z-index:-2;
	background-size:cover;background-position:center 42%;background-repeat:no-repeat}
/* legibility scrim: deepen the photo so the white heading + light cards pop */
.mp-section--photobox::before{content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(16,42,28,.55) 0%,rgba(16,42,28,.34) 42%,rgba(16,42,28,.5) 100%)}
.mp-section--photobox .mp-head2 h2{color:#fff;text-shadow:0 2px 18px rgba(10,20,14,.45)}
.mp-section--photobox .mp-kicker--light{color:var(--gold-lt)}

/* Frosted light card: translucent white glass, black text */
.mp-section--photobox .mp-card{
	background:rgba(255,255,255,.86);
	-webkit-backdrop-filter:blur(9px) saturate(1.08);
	backdrop-filter:blur(9px) saturate(1.08);
	border:1px solid rgba(255,255,255,.75);
	box-shadow:0 20px 48px rgba(12,30,20,.34);
	color:var(--ink);}
.mp-section--photobox .mp-card h3{color:var(--ink);}
.mp-section--photobox .mp-card p{color:#3c453e;}
.mp-section--photobox .mp-card__icon{background:rgba(10,107,52,.10);color:var(--green);}
.mp-section--photobox .mp-card:hover{transform:translateY(-6px);
	box-shadow:0 28px 60px rgba(12,30,20,.42);border-color:rgba(255,255,255,.9);
	background:rgba(255,255,255,.94);}
.mp-section--photobox .mp-card:hover .mp-card__icon{background:var(--green);color:#fff;}
.mp-section--photobox .mp-card__go{color:var(--gold);}

/* Transparent-nav legibility: dark top scrim so the white logo + links read on ANY hero photo
   (fixes wash-out over light photo areas like a bright sky). Only in the non-stuck state. */
.nav:not(.is-stuck)::before{content:"";position:fixed;top:0;left:0;right:0;height:172px;z-index:-1;
	pointer-events:none;
	background:linear-gradient(180deg,rgba(9,20,13,.62) 0%,rgba(9,20,13,.30) 48%,rgba(9,20,13,0) 100%)}
.nav:not(.is-stuck) .logo-lt{filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}

/* ---- Photobox: extend frosting to feature cards & review cards ---- */
.mp-section--photobox .mp-feature{
	background:rgba(255,255,255,.86);
	-webkit-backdrop-filter:blur(9px) saturate(1.08);backdrop-filter:blur(9px) saturate(1.08);
	border:1px solid rgba(255,255,255,.75);box-shadow:0 20px 48px rgba(12,30,20,.34);color:var(--ink);}
.mp-section--photobox .mp-feature h3{color:var(--ink);}
.mp-section--photobox .mp-feature p{color:#3c453e;}
.mp-section--photobox .mp-feature__icon{background:#fff;color:var(--green);}

.mp-section--photobox .mp-review{
	background:rgba(255,255,255,.9);
	-webkit-backdrop-filter:blur(9px) saturate(1.06);backdrop-filter:blur(9px) saturate(1.06);
	border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 48px rgba(12,30,20,.34);}
.mp-section--photobox .mp-review blockquote{color:var(--ink);}
.mp-section--photobox .mp-rvnav{background:rgba(255,255,255,.95);}

/* ---- Glass layout: content sits in a frosted panel over a full-bleed photo ---- */
.mp-section--glass .mp-wrap{display:flex;justify-content:flex-start;}
.mp-glass{max-width:620px;background:rgba(255,255,255,.9);
	-webkit-backdrop-filter:blur(11px) saturate(1.05);backdrop-filter:blur(11px) saturate(1.05);
	border:1px solid rgba(255,255,255,.75);border-radius:16px;
	padding:clamp(32px,4vw,54px);box-shadow:0 26px 64px rgba(12,30,20,.42);color:var(--ink);}
.mp-glass h2{color:var(--ink);margin-top:0;}
.mp-glass p{color:#3c453e;}
.mp-glass .eyebrow{color:var(--gold);}
.mp-glass .btn{margin-top:8px;}
@media(max-width:900px){.mp-glass{max-width:100%;}}

/* =========================================================
   MOBILE FIXES (2026-08-21): nav bar, full-screen menu,
   hamburger tap target, hero DC badge, reviews centering
   ========================================================= */
@media (max-width:980px){
  /* Top bar declutter: hide the redundant CTA when closed so the
     logo has room and nothing wraps */
  .nav:not(.is-open) .sch{display:none}
  .nav .sch{white-space:nowrap}
  .nav{gap:16px}
  .nav-logo img,.nav-logo .logo-lt,.nav-logo .logo-dk{height:54px}

  /* Hamburger: real 46px tap target */
  .nav-burger{display:flex;align-items:center;justify-content:center;
    min-width:46px;min-height:46px;font-size:2rem;padding:4px;line-height:1}

  /* Open menu = full-screen opaque overlay */
  .nav.is-open{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:var(--green-deep);padding:20px 26px 44px;gap:0;
    overflow-y:auto;z-index:300;box-shadow:none;flex-wrap:nowrap}
  .nav.is-open .nav-logo{display:block !important;margin:0}
  .nav.is-open .nav-logo .logo-lt{display:block !important}
  .nav.is-open .nav-logo .logo-dk{display:none !important}
  .nav.is-open .nav-burger{position:absolute;top:22px;right:18px;font-size:0;
    min-width:46px;min-height:46px}
  .nav.is-open .nav-burger::before{content:"\00d7";font-size:2.6rem;line-height:1;color:#fff}
  .nav.is-open .nav-links{display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:0;margin-top:42px}
  .nav.is-open .nav-item{flex-direction:column;align-items:stretch;width:100%}
  .nav.is-open .nav-links a{color:#fff !important;display:block;padding:15px 2px;
    font-size:1.06rem;letter-spacing:.01em;text-transform:none;
    border-bottom:1px solid rgba(255,255,255,.13)}
  .nav.is-open .nav-sub{position:static;display:flex;flex-direction:column;
    background:none;box-shadow:none;padding:2px 0 8px 16px;min-width:0;border-radius:0;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.is-open .nav-sub a{color:rgba(255,255,255,.82) !important;font-size:.96rem;
    padding:11px 0;border-bottom:0}
  .nav.is-open .nav-phone{color:#fff !important;justify-content:flex-start;
    font-size:1.15rem;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.13)}
  .nav.is-open .nav-phone .mp-ico{width:20px;height:20px}
  .nav.is-open .sch{display:inline-flex;align-items:center;justify-content:center;
    background:var(--gold);color:#23190a !important;margin-top:24px;padding:16px 22px;
    border-radius:8px;border-bottom:0;font-size:1rem;white-space:nowrap}

  /* Home hero: frosted chip so the Diamond Certified badge reads over the photo */
  .dc{background:rgba(255,255,255,.88);border-color:rgba(27,38,32,.12);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    padding:11px 16px;box-shadow:0 6px 20px rgba(0,0,0,.16)}
}

/* Reviews carousel: one centered full-width card on phones, tighter arrows */
@media (max-width:600px){
  .mp-reviews.mp-rvtrack .mp-review{flex:0 0 100%}
  .mp-rvnav{width:40px;height:40px;font-size:20px}
  .mp-rvprev{left:-2px}
  .mp-rvnext{right:-2px}
}

/* Scroll lock behind the open mobile menu */
body.mp-noscroll{overflow:hidden}

/* Two-panel glass: side-by-side frosted panels over one full-bleed photo */
.mp-section--glasssplit .mp-split{align-items:stretch}
.mp-section--glasssplit .mp-glass{max-width:none;height:100%}
.mp-glass h3{color:var(--ink);margin-top:0}
.mp-glass .mp-checklist li{color:#3c453e;border-color:rgba(27,38,32,.14)}

/* Trust-bar stars: exclude .mp-stars from the separator opacity dim (they were rendering at 40%) */
.mp-pagehead__trust .mp-stars{opacity:1;color:var(--star)}

/* =========================================================
   Nav WORDMARK — crisp live text replaces the raster logo,
   which aliased badly scaled down to nav size.
   ========================================================= */
.nav-wordmark{font-family:var(--disp);font-weight:600;
  font-size:clamp(1.3rem,2vw,1.62rem);line-height:1;letter-spacing:.004em;
  color:#fff;white-space:nowrap;text-decoration:none;display:inline-block}
.nav-wordmark span{font-weight:500;font-size:.9em;opacity:.82}
.nav:not(.is-stuck) .nav-wordmark{text-shadow:0 1px 6px rgba(0,0,0,.5)}
.nav.is-stuck .nav-wordmark{color:var(--green);text-shadow:none}
.nav.is-open .nav-wordmark{color:#fff !important;text-shadow:none}

/* ============================================================
   Interior page heroes → LIGHT wash + DARK text (2026-08-21)
   The dark-scrim photos read too gloomy. Keep the full-bleed
   image but overlay a light wash so it's airy, text stays dark.
   ============================================================ */
.mp-pagehead{color:var(--ink);background:var(--cream)}
.mp-pagehead::after{background:linear-gradient(180deg,
  rgba(255,255,255,.50) 0%,
  rgba(255,255,255,.22) 42%,
  rgba(255,255,255,.46) 100%)}
.mp-pagehead h1{color:var(--ink);text-shadow:0 1px 2px rgba(255,255,255,.55)}
.mp-pagehead__sub{color:#41504a;text-shadow:none}
.mp-pagehead .mp-kicker,.mp-pagehead .mp-kicker--light{color:#9a6f25}
.mp-pagehead .mp-kicker--light::before{background:#9a6f25}
.mp-pagehead__trust{color:#41504a}
.mp-pagehead__trust strong{color:var(--green)}
.mp-pagehead__trust .mp-stars{opacity:1;color:var(--star)}

/* Service Area (mp-mapbg) matches the light treatment */
body.mp-mapbg .mp-pagehead{color:var(--ink)}
body.mp-mapbg .mp-pagehead h1{color:var(--ink)}
body.mp-mapbg .mp-pagehead__sub{color:#41504a}
body.mp-mapbg .mp-pagehead .mp-kicker,body.mp-mapbg .mp-pagehead .mp-kicker--light{color:#9a6f25}
body.mp-mapbg .mp-pagehead .mp-kicker--light::before{background:#9a6f25}
body.mp-mapbg .mp-pagehead__trust{color:#41504a}
body.mp-mapbg .mp-pagehead__trust strong{color:var(--green)}

/* Interior transparent nav → DARK text over the now-light hero */
body:not(.home) .nav:not(.is-stuck) .nav-wordmark{color:var(--green);text-shadow:none}
body:not(.home) .nav:not(.is-stuck) .nav-links a{color:var(--ink)}
body:not(.home) .nav:not(.is-stuck) .nav-links a:hover{color:var(--green)}
body:not(.home) .nav:not(.is-stuck) .nav-phone{color:var(--green)}
body:not(.home) .nav:not(.is-stuck) .nav-burger{color:var(--ink)}
/* Dark top-scrim only belongs on the dark home hero, not the light interior ones */
body:not(.home) .nav:not(.is-stuck)::before{display:none}

/* ============================================================
   Photobox / glass SUBSECTIONS → LIGHT wash + DARK text
   (match the light interior heroes; user wants light bg /
   black text for these credential/review/feature bands)
   ============================================================ */
.mp-section--photobox{color:var(--ink)}
.mp-section--photobox::before{background:linear-gradient(180deg,
  rgba(255,255,255,.70) 0%,
  rgba(255,255,255,.48) 45%,
  rgba(255,255,255,.72) 100%)}
.mp-section--photobox .mp-head2 h2{color:var(--ink);text-shadow:0 1px 2px rgba(255,255,255,.5)}
.mp-section--photobox .mp-kicker,
.mp-section--photobox .mp-kicker--light{color:#9a6f25}
.mp-section--photobox .mp-kicker--light::before{background:#9a6f25}
/* keep the frosted cards crisp and separated on the lighter backdrop */
.mp-section--photobox .mp-card,
.mp-section--photobox .mp-feature,
.mp-section--photobox .mp-review{background:rgba(255,255,255,.93);
  border-color:rgba(22,42,30,.07);box-shadow:0 20px 44px rgba(22,42,30,.18)}

/* ============================================================
   Nav logo = colored wreath + wordmark lockup (logo.png),
   matching asdfm.com/mp. Light interior heroes + the solid bar
   both show the colored lockup; only the dark mobile menu
   overlay uses the white version (rules above, !important).
   ============================================================ */
.nav-logo .logo-lt{display:none}
.nav-logo .logo-dk{display:block}
body:not(.home) .nav:not(.is-stuck) .nav-logo .logo-dk{display:block}
body:not(.home) .nav:not(.is-stuck) .nav-logo .logo-lt{display:none}

/* ============================================================
   Mobile menu overlay → WHITE panel, BLACK text (2026-08-21)
   (was dark green). Colored logo, dark close ×, and the
   Contact Us button gets dark text on gold (was white-on-gold).
   ============================================================ */
@media (max-width:980px){
  .nav.is-open{background:#fff}
  .nav.is-open .nav-logo .logo-dk{display:block !important}
  .nav.is-open .nav-logo .logo-lt{display:none !important}
  .nav.is-open .nav-burger::before{color:var(--ink)}
  .nav.is-open .nav-links a{color:var(--ink) !important;border-bottom-color:rgba(20,40,30,.12)}
  .nav.is-open .nav-links a:hover{color:var(--green) !important}
  .nav.is-open .nav-sub a{color:#5e675f !important}
  .nav.is-open .nav-phone{color:var(--green) !important;border-bottom-color:rgba(20,40,30,.12)}
  /* Contact Us button: dark text on gold (beats the .nav-links a color rule) */
  .nav.is-open .nav-links a.sch{background:var(--gold);color:#23190a !important;border-bottom:0}
}

/* ============================================================
   Interior hero text: BLACK + a soft light glow behind the
   text block for readability over the (more colorful) photo.
   ============================================================ */
.mp-pagehead h1{color:#141414;text-shadow:0 1px 3px rgba(255,255,255,.6)}
.mp-pagehead__sub{color:#1b1b1b;text-shadow:0 1px 3px rgba(255,255,255,.55)}
.mp-pagehead__trust{color:#1b1b1b}
.mp-pagehead__in{position:relative}
.mp-pagehead__in::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:min(1120px,100%);height:170%;
  z-index:-1;pointer-events:none;filter:blur(44px);
  background:radial-gradient(ellipse 70% 100% at center,
    rgba(255,255,255,.76) 0%,
    rgba(255,255,255,.56) 34%,
    rgba(255,255,255,.32) 56%,
    rgba(255,255,255,.11) 74%,
    rgba(255,255,255,0) 88%)}

/* Home hero CTA buttons on phones: not full-width, centered, label centered */
@media (max-width:560px){
  .cta{flex-direction:column;align-items:center}
  .hbtn{justify-content:center;width:min(340px,100%)}
}

/* Reviews carousel on phones: arrows centered BELOW the full-width card (were overlapping text) */
@media (max-width:600px){
  .mp-rvwrap{padding-bottom:64px}
  .mp-rvnav{top:auto;bottom:0;transform:none}
  .mp-rvprev{left:calc(50% - 50px);right:auto}
  .mp-rvnext{right:calc(50% - 50px);left:auto}
}

/* Blog thumbnails: crop every post image to one uniform size */
.mp-postcard img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block}

/* Home hero: same soft light fade behind the message text (consistency with subpage heroes) */
.msg{position:relative}
.msg::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(720px,124%);height:152%;z-index:-1;pointer-events:none;filter:blur(48px);
  background:radial-gradient(ellipse 70% 100% at center,
    rgba(255,255,255,.66) 0%,
    rgba(255,255,255,.44) 36%,
    rgba(255,255,255,.18) 60%,
    rgba(255,255,255,0) 84%)}

/* Single blog post: lead image at the top of the body (photo moved out of the hero) */
.mp-post-lead{margin:0 0 34px}
.mp-post-lead img{width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow);margin:0;display:block}


/* ===== Nav logo: emblem + live wordmark (same lockup as /v9/). The dark-text version shows on the solid
   bar, the bright version over photos. Visibility follows the existing .logo-dk / .logo-lt rules above;
   these rules only lay the spans out like an image and size them. ===== */
.nav-logo .logo-dk,.nav-logo .logo-lt{white-space:nowrap;line-height:0}
.nav-logo .logo-dk img,.nav-logo .logo-lt img{display:inline-block;vertical-align:middle}
.nav-logo .logo-word{display:inline-block;vertical-align:middle;margin-left:12px}
.nav-logo .logo-dk{color:#3a7d52}
.nav-logo .logo-lt{color:#fff}
.nav-logo .logo-lt img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.nav-logo .logo-lt .logo-word{text-shadow:0 1px 4px rgba(0,0,0,.5)}
.nav-logo .logo-word{font-family:'Times New Roman',Times,serif;font-size:24px;line-height:1;letter-spacing:.01em}
.nav-logo .logo-dk img,.nav-logo .logo-lt img{height:56px;width:auto}
@media (max-width:980px){
  .nav-logo .logo-dk img,.nav-logo .logo-lt img{height:44px}
  .nav-logo .logo-word{font-size:20px}
}