/*
Theme Name: BW Mortgage Theme
Theme URI: https://jsmcorp.com/
Author: Jump Start Marketing
Author URI: https://jsmcorp.com/
Description: Custom theme for BW Mortgage.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bw-mortgage-theme
Tags: custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/
/* =========================================================
   1. Tokens
   ========================================================= */
:root {
	--primary: #0b1f3a;
	--accent: #f5a623;
	--secondary: #1d4e89;
	--dark: #0a1729;
	--text: #1f2933;
	--muted: #5b6975;
	--light-bg: #f6f8fa;
	--border: #e2e8ee;
	--white: #ffffff;
	--radius: 10px;
	--radius-btn: 10px;
	--container: 1200px;
	--section-y: 88px;
	--topbar-image-h: 28px;
	--topbar-image-max-w: 420px;
	--card-pad: 30px;
	--font-head: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .08);
	--shadow-lg: 0 8px 20px rgba(16, 24, 40, .10), 0 24px 48px rgba(16, 24, 40, .12);
	--transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================
   2. Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--text);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--secondary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	color: var(--primary);
	line-height: 1.18;
	margin: 0 0 .6em;
	font-weight: 700;
	letter-spacing: -.01em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
blockquote {
	margin: 1.6em 0;
	padding: 1em 1.4em;
	border-left: 4px solid var(--accent);
	background: var(--light-bg);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
}
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
th, td { padding: .7em .9em; border-bottom: 1px solid var(--border); text-align: left; }
th { font-family: var(--font-head); color: var(--primary); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--accent);
	color: #111;
	padding: 12px 20px;
	z-index: 10000;
	font-weight: 700;
	border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
   3. Layout
   ========================================================= */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* A max-width with no auto margins does not centre — it just pins the column
   to the left of its parent and leaves the rest of the container empty. This
   wraps page bodies and content blocks, so it has to centre itself. */
.container-narrow { max-width: 820px; margin-left: auto; margin-right: auto; }

/* Homepage intro: the lead paragraph under the hero. Reads a size up from
   body copy so it carries the page before the section grids start. */
.section--intro .container-narrow { text-align: center; }
.section--intro .entry-content p { font-size: 1.12rem; line-height: 1.75; color: var(--muted); }
.section--intro .entry-content p:last-child { margin-bottom: 0; }
.section { padding: var(--section-y) 0; }
.section--tint { background: var(--light-bg); }
.section--dark { background: var(--primary); color: #dbe3ec; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.06rem; margin: 0; }
.section-head--left { margin-left: 0; text-align: left; }
.eyebrow {
	display: inline-block;
	font-family: var(--font-head);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 10px;
}
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* =========================================================
   4. Buttons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 15px 28px;
	border-radius: var(--radius-btn);
	border: 2px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #14181d; }
.btn--primary:hover { background: var(--accent); color: #14181d; box-shadow: var(--shadow); }
.btn--dark { background: var(--primary); color: #fff; }
.btn--dark:hover { background: var(--secondary); color: #fff; }
.btn--ghost { background: transparent; color: var(--primary); border-color: currentColor; }
.btn--ghost:hover { background: var(--primary); color: #fff; }
.btn--light { background: #fff; color: var(--primary); }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--on-dark:hover { background: #fff; color: var(--primary); }
.btn--wide { width: 100%; }

/* =========================================================
   5. Header
   ========================================================= */
.topbar {
	background: var(--primary);
	color: rgba(255,255,255,.86);
	font-size: .875rem;
	padding: 8px 0;
}
.topbar a { color: rgba(255,255,255,.86); }
.topbar a:hover { color: var(--accent); }

/* Full-width variant: no container, so the row carries its own side padding.
   Without it the first and last items sit flush against the browser edge. */
.topbar__bleed { width: 100%; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }

/* Three tracks, with the outer two equal, is what keeps the middle column
   optically centred in the bar rather than centred in the space left over
   after the left and right columns have taken what they need. */
.topbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.topbar__left { justify-self: start; text-align: left; min-width: 0; }
.topbar__center { justify-self: center; text-align: center; min-width: 0; }
.topbar__right { justify-self: end; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
/* Bounded on BOTH axes. Height alone is not enough: a wide banner scaled to
   28px tall is still ~1150px across, which swallows the middle track, crushes
   the left column and overlaps the right one. Capping width too means an
   oversized upload simply renders smaller instead of breaking the bar.
   Two rules learned the hard way here. The width cap must be a LENGTH, never a
   percentage: a percentage max-width inside an auto-sized grid track is
   circular, resolves to zero, and the image vanishes. And the height must be
   set outright rather than left auto under a max-height, because an SVG with a
   viewBox but no width/height attributes — a very common logo export — has no
   intrinsic size to resolve auto against and collapses to nothing.
   object-fit keeps the aspect ratio when the width cap bites. */
.topbar__image { display: block; height: var(--topbar-image-h); width: auto; max-width: var(--topbar-image-max-w); object-fit: contain; object-position: center; }
.social-nav { display: flex; gap: 12px; align-items: center; }
.social-nav a { display: inline-flex; opacity: .85; }
.social-nav a:hover { opacity: 1; }
.social-nav svg { width: 17px; height: 17px; fill: currentColor; }

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--border);
	position: relative;
	z-index: 200;
}
.site-header.is-sticky { position: sticky; top: 0; }
.site-header.scrolled { box-shadow: var(--shadow); }
.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 96px;
}
.site-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-brand img { height: 80px; min-height: 80px; max-height: 80px; width: auto; max-width: 260px; object-fit: contain; }
.site-brand__text { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--primary); line-height: 1.1; }
.site-brand__tag { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

.main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; align-items: center; }
.main-nav li { position: relative; }
.main-nav a {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .96rem;
	color: var(--primary);
	padding: 11px 13px;
	border-radius: var(--radius);
	white-space: nowrap;
}
/* Long menus should tighten up rather than wrap onto two lines. */
@media (min-width: 901px) and (max-width: 1320px) {
	.main-nav a { padding: 10px 9px; font-size: .9rem; }
	.header__inner { gap: 14px; }
	.header__cta { gap: 10px; }
}
.main-nav .menu-item-home-icon a { display: flex; align-items: center; padding: 9px 12px; }
.nav-home-icon { display: block; }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav a[aria-current="page"] {
	color: var(--accent);
	background: var(--light-bg);
}
.main-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 8px;
	flex-direction: column;
	gap: 0;
	z-index: 40;
}
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: flex; }

.header__cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header__phone { font-family: var(--font-head); font-weight: 700; color: var(--primary); white-space: nowrap; }

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	width: 46px;
	height: 46px;
	padding: 10px;
	cursor: pointer;
	border-radius: var(--radius);
}
.nav-toggle span { display: block; height: 2px; background: var(--primary); margin: 5px 0; border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   6. Hero
   ========================================================= */
.hero {
	position: relative;
	background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
	color: #fff;
	padding: clamp(70px, 11vw, 140px) 0;
	overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .34; }
.hero__inner { position: relative; z-index: 2; max-width: 780px; }
.hero--split .hero__inner { max-width: none; display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: .45em; }
.hero__badge {
	display: inline-block;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.25);
	color: #fff;
	font-family: var(--font-head);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 999px;
	margin-bottom: 22px;
}
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: rgba(255,255,255,.9); max-width: 640px; margin-bottom: 32px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* =========================================================
   7. Cards
   ========================================================= */
.card {
	background: #fff;
	border-radius: var(--radius);
	padding: var(--card-pad);
	height: 100%;
	/* Grid rows are as tall as their tallest card, so shorter cards would
	   otherwise end with a pool of empty space under the text. Column flex with
	   the link pushed down makes every card end on the same line instead. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: transform var(--transition), box-shadow var(--transition);
}
.card > .card__link { margin-top: auto; padding-top: 14px; }
.card__media { flex: 0 0 auto; align-self: stretch; }
.card-shadow { box-shadow: var(--shadow); }
.card-border { border: 1px solid var(--border); }
.card-flat { background: var(--light-bg); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: .5em; }
.card p:last-child { margin-bottom: 0; }
/* Service card media. The image is the default: a real photo beats initials,
   and a card with no image set simply has no media rather than a placeholder. */
.card__media {
	/* Cancel the card's padding so the image sits flush to the top and side
	   edges — a card header image, not a picture inset inside the card. */
	margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--light-bg);
}
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__icon {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: var(--radius);
	background: var(--light-bg);
	color: var(--accent);
	margin-bottom: 18px;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.15rem;
}
.card__price { font-family: var(--font-head); font-weight: 700; color: var(--accent); margin-bottom: .4em; }
.card__link { font-family: var(--font-head); font-weight: 700; display: inline-flex; gap: 6px; margin-top: 14px; }

/* =========================================================
   8. Stats / process
   ========================================================= */
.stats { background: var(--primary); color: #fff; padding: 46px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px; text-align: center; }
.stats__value { font-family: var(--font-head); font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 800; color: var(--accent); line-height: 1; }
.stats__label { font-size: .92rem; color: rgba(255,255,255,.82); margin-top: 8px; }

.steps { counter-reset: step; display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* An auto-fit grid strands the last step on a row of its own whenever the
   count does not divide by however many columns happen to fit — five steps
   render as four plus a lonely fifth, which reads as a mistake rather than a
   layout. These pin the column count to something that divides evenly. */
@media (min-width: 700px) {
	.steps--2, .steps--4 { grid-template-columns: repeat(2, 1fr); }
	.steps--3, .steps--5, .steps--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px) {
	.steps--4 { grid-template-columns: repeat(4, 1fr); }
	.steps--5 { grid-template-columns: repeat(5, 1fr); gap: 20px; }
	.steps--6 { grid-template-columns: repeat(3, 1fr); }
}

.step { position: relative; padding-top: 8px; }
.step__num {
	counter-increment: step;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: #14181d;
	font-family: var(--font-head);
	font-weight: 800;
	margin-bottom: 16px;
}
.step__num::before { content: counter(step); }

/* =========================================================
   9. Testimonials
   ========================================================= */
.testimonials { position: relative; }
.testimonial-track { position: relative; min-height: 220px; }
.testimonial {
	display: none;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 34px;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}
.testimonial.is-active { display: block; }
.testimonial__stars { color: var(--accent); font-size: 1.15rem; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial__text { font-size: 1.08rem; margin-bottom: 18px; }
.testimonial__who { font-family: var(--font-head); font-weight: 700; color: var(--primary); }
.testimonial__meta { font-size: .86rem; color: var(--muted); }
.testimonial-nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }
.testimonial-nav button {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: #fff;
	cursor: pointer;
	font-size: 1.1rem;
	color: var(--primary);
}
.testimonial-nav button:hover { background: var(--primary); color: #fff; }
.testimonial-dots { display: flex; gap: 8px; }
.testimonial-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: var(--border); cursor: pointer; }
.testimonial-dots button[aria-current="true"] { background: var(--accent); }

/* =========================================================
   10. FAQ
   ========================================================= */
.faq { max-width: 860px; margin: 0 auto; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; background: #fff; overflow: hidden; }
.faq__q {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 20px 54px 20px 22px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.03rem;
	color: var(--primary);
	cursor: pointer;
	position: relative;
}
.faq__q::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--accent);
	line-height: 1;
}
.faq__q[aria-expanded="true"]::after { content: "\2212"; }
.faq__a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height var(--transition), padding var(--transition); }
.faq__a.is-open { padding: 0 22px 20px; max-height: 900px; }

/* =========================================================
   11. Contact / forms
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0 0 26px; }
.contact-list li { display: flex; gap: 12px; margin-bottom: 16px; }
.contact-list strong { display: block; font-family: var(--font-head); color: var(--primary); }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.map-embed iframe { display: block; width: 100%; height: 340px; border: 0; }

.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .93rem; margin-bottom: 6px; color: var(--primary); }
.form-row input, .form-row select, .form-row textarea {
	width: 100%;
	padding: 13px 15px;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0,0,0,.05);
	outline: none;
}
.form-row textarea { min-height: 150px; resize: vertical; }
.form-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .84rem; color: var(--muted); }
.form-message { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; }
.form-message--ok { background: #e6f6ec; color: #1b5e2a; border: 1px solid #b9e3c6; }
.form-message--err { background: #fdeaea; color: #8a1f1f; border: 1px solid #f3c3c3; }

/* =========================================================
   12. Blog
   ========================================================= */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 46px; align-items: start; }
.post-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; height: 100%; }
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-size: .82rem; color: var(--muted); margin-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.post-card__badge { background: var(--light-bg); color: var(--secondary); padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.post-card h3 { font-size: 1.2rem; margin-bottom: .45em; }
.post-card h3 a { color: var(--primary); }
.post-card h3 a:hover { color: var(--accent); }
.post-card__more { margin-top: auto; font-family: var(--font-head); font-weight: 700; }

.post-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; background: var(--light-bg); border-radius: var(--radius); overflow: hidden; margin-bottom: 40px; }
.post-featured img { width: 100%; height: 100%; object-fit: cover; }
.post-featured__body { padding: 34px; }

.entry-header { margin-bottom: 30px; }
.entry-meta { font-size: .9rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content img { border-radius: var(--radius); }
.entry-thumb img { width: 100%; border-radius: var(--radius); margin-bottom: 30px; }

.widget { background: var(--light-bg); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.widget h3 { font-size: 1.05rem; margin-bottom: .8em; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.widget li:last-child { border-bottom: 0; }

/* Sidebar CTA card */
.widget--cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(158deg, #34383e 0%, #2c2f34 55%, #24272b 100%);
	color: #fff;
	padding: 28px 26px 24px;
	box-shadow: var(--shadow);
}
.widget--cta::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -80px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--accent) 0%, rgba(245, 166, 35, 0) 70%);
	opacity: .38;
	pointer-events: none;
}
.widget--cta > * { position: relative; }
.widget--cta__eyebrow {
	margin: 0 0 .5em;
	font-family: var(--font-head);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
}
.widget--cta h3 { color: #fff; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
.widget--cta__text { color: rgba(255, 255, 255, .82); font-size: .93rem; line-height: 1.6; margin: 0 0 18px; }
.widget--cta__points { margin: 0 0 22px; }
.widget--cta__points li {
	position: relative;
	padding: 5px 0 5px 26px;
	border-bottom: 0;
	font-size: .9rem;
	color: rgba(255, 255, 255, .92);
}
.widget--cta__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 13px;
	height: 8px;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}
.widget--cta__phone {
	display: block;
	margin-top: 14px;
	text-align: center;
	color: #fff;
	font-size: .95rem;
}
.widget--cta__phone span { color: rgba(255, 255, 255, .7); margin-right: 5px; }
.widget--cta__phone strong { font-family: var(--font-head); font-weight: 700; }
.widget--cta__phone:hover strong { color: var(--accent); }
.widget--cta__note {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .76rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
}

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--primary);
	background: #fff;
}
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* =========================================================
   13. Breadcrumbs / misc
   ========================================================= */
.breadcrumbs { font-size: .875rem; color: var(--muted); padding: 16px 0; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span + span::before { content: "/"; margin: 0 8px; color: var(--border); }

.page-hero { background: var(--light-bg); padding: 54px 0; border-bottom: 1px solid var(--border); text-align: center; }
.page-hero h1 { margin-bottom: .3em; }
.page-hero p { color: var(--muted); margin: 0 auto; max-width: 720px; }

.cta-band { background: var(--primary); color: #fff; text-align: center; padding: 66px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto 26px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.gallery-grid img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.team-card { text-align: center; }
.team-card img { border-radius: var(--radius); margin-bottom: 14px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.team-card__role { color: var(--muted); font-size: .92rem; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.price-card { text-align: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 26px; background: #fff; }
.price-card__amount { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; color: var(--primary); }

.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	display: none;
	background: var(--primary);
	z-index: 500;
	box-shadow: 0 -4px 18px rgba(0,0,0,.18);
}
.sticky-cta a {
	flex: 1;
	text-align: center;
	padding: 15px 8px;
	color: #fff;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .95rem;
}
.sticky-cta a + a { border-left: 1px solid rgba(255,255,255,.18); }
.sticky-cta a.is-accent { background: var(--accent); color: #14181d; }

.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--primary);
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
	z-index: 400;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }

.error-404 { text-align: center; padding: 90px 0; }
.error-404__code { font-family: var(--font-head); font-size: clamp(4rem, 14vw, 9rem); font-weight: 800; color: var(--accent); line-height: 1; }

/* =========================================================
   14. Footer
   ========================================================= */
.site-footer { background: var(--dark); color: rgba(255,255,255,.74); padding: 62px 0 0; font-size: .95rem; }
.site-footer--light { background: var(--light-bg); color: var(--muted); }
.site-footer h3 { color: #fff; font-size: 1.02rem; margin-bottom: 1em; }
.site-footer--light h3 { color: var(--primary); }
.site-footer a { color: rgba(255,255,255,.74); }
.site-footer--light a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.footer__grid { display: grid; gap: 34px; }
.footer__grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.footer__grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.footer__grid.cols-4 { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
.footer__grid ul { list-style: none; padding: 0; margin: 0; }
.footer__grid li { padding: 5px 0; }
.footer__bottom {
	margin-top: 46px;
	padding: 22px 0;
	border-top: 1px solid rgba(255,255,255,.12);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: .87rem;
}
.site-footer--light .footer__bottom { border-top-color: var(--border); }

/* =========================================================
   15. Animation
   ========================================================= */
.anim-target { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.anim-target.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.anim-target { opacity: 1 !important; transform: none !important; transition: none; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   16. Responsive
   ========================================================= */
@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.blog-layout { grid-template-columns: 1fr; }
	.footer__grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
	.hero--split .hero__inner { grid-template-columns: 1fr; }
	.post-featured { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.nav-toggle { display: block; }
	.main-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid var(--border);
		box-shadow: var(--shadow);
		padding: 12px 0 18px;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px; }
	.main-nav a { padding: 14px 10px; border-bottom: 1px solid var(--border); border-radius: 0; }
	.main-nav .sub-menu { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 16px; }
	.header__phone { display: none; }
	.contact-grid { grid-template-columns: 1fr; }
	/* Three columns will not fit on a phone. Stack them, centred, and keep the
	   reading order the same as the desktop row. */
	.topbar__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
	.topbar__left, .topbar__center, .topbar__right { justify-self: center; text-align: center; }
	.topbar__right { justify-content: center; }
}

@media (max-width: 768px) {
	:root { --section-y: 58px; }
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.footer__grid.cols-2, .footer__grid.cols-3, .footer__grid.cols-4 { grid-template-columns: 1fr; }
	.sticky-cta { display: flex; }
	body { padding-bottom: 54px; }
	.to-top { bottom: 66px; }
}

@media (max-width: 480px) {
	.container { padding: 0 18px; }
	.card { padding: 22px; }
	.btn { width: 100%; }
	.hero__actions .btn { width: auto; flex: 1 1 auto; }
}

/* =========================================================
   17. Print
   ========================================================= */
@media print {
	.topbar, .site-header, .site-footer, .sticky-cta, .to-top, .btn { display: none !important; }
	body { color: #000; font-size: 12pt; }
}
/* Card variant chosen in the build spec: shadow */
.card { box-shadow: var(--shadow); }

/* =========================================================
   Section overrides (Site Structure tab)
   Only the sections you actually styled appear here.
   ========================================================= */
:root .topbar { background-color: #f5a623; color: rgba(255, 255, 255, .88); }
:root .topbar a { color: rgba(255, 255, 255, .88); }
:root .site-header { background-color: rgba(44, 47, 52, 0.7); color: rgba(255, 255, 255, .88); }
:root .site-header a { color: rgba(255, 255, 255, .88); }


/* =========================================================
   Custom CSS (Brand & Design tab / Design Chat)
   Everything below is yours. Regenerated from the build spec,
   so edit it there rather than here if you plan to rebuild.
   ========================================================= */
.topbar__left:first-child::after,
.topbar li:first-child::after {
  content: " | NMLS # 954199";
  color: inherit;
  opacity: 0.85;
  margin-left: 4px;
}

.service-card .card__icon { display: none; }

.service-card { display: flex; flex-direction: column; }
.service-card img,
.service-card .card__media,
.service-card .card__icon-media { order: -1; width: 100%; margin: 0 0 16px 0; border-radius: var(--radius) var(--radius) 0 0; object-fit: cover; }
.service-card .card__body { order: 1; }

.site-header { background: #2c2f34; }
.site-header.is-sticky { background: #2c2f34; }
.main-nav a { color: var(--white); }
.topbar { background: var(--secondary); }

.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav a[aria-current="page"] {color: #f5a623 !important;}

/* Mobile menu toggle — white button so it reads against the dark header */
.nav-toggle {
	background: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.nav-toggle:hover,
.nav-toggle:focus-visible { background: #fff; }
.nav-toggle span { background: var(--primary); }

/* Dark surfaces all use the header charcoal from the logo lockup */
.cta-band { background: #2c2f34; }
.site-footer:not(.site-footer--light) { background: #24272b; }
.sticky-cta { background: #2c2f34; }
.to-top { background: #2c2f34; }
.to-top:hover { background: #3a3e45; }