/**
 * Garage Door Repair Boise
 *
 * Design notes for whoever picks this up next:
 *
 * - The palette comes from the printed signage: navy #204192, vermillion
 *   #F1461F, white. Those two brand colours are injected as CSS variables from
 *   the Customizer (see inc/enqueue.php), and every tint and shade below is
 *   derived from them - so changing the two colours recolours the site.
 *
 * - The recurring motif is the "panel rail": evenly spaced horizontal seams
 *   that echo the sections of a garage door. It appears on dark bands only,
 *   never on white, so it reads as texture rather than decoration.
 *
 * - Vermillion is reserved for actions. If something is orange, it is either a
 *   button, a link on hover, or a deliberate accent mark. Nothing decorative is
 *   orange, which is what keeps the call buttons loud.
 *
 * Sections, in order:
 *   1. Tokens      6. Hero          11. Blog + prose
 *   2. Reset       7. Home sections 12. Contact / About / Resources
 *   3. Type        8. Forms         13. Footer + sticky bar
 *   4. Buttons     9. Cards         14. Responsive
 *   5. Header     10. FAQ           15. Accessibility
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Brand colours are overridden inline from the Customizer. */
	--navy: #204192;
	--navy-rgb: 32, 65, 146;
	--navy-deep: #17306a;
	--navy-ink: #0c1838;
	--orange: #f1461f;
	--orange-rgb: 241, 70, 31;
	--orange-deep: #ca3a1a;

	--ink: #141922;
	--ink-soft: #4b5468;
	--ink-faint: #6f7889;
	--line: #dde2ec;
	--line-soft: #eef1f6;
	--concrete: #f3f5f9;
	--white: #ffffff;

	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;

	--shadow-sm: 0 1px 2px rgba(12, 24, 56, .06), 0 2px 8px rgba(12, 24, 56, .05);
	--shadow-md: 0 4px 12px rgba(12, 24, 56, .08), 0 12px 32px rgba(12, 24, 56, .07);
	--shadow-lg: 0 18px 48px rgba(12, 24, 56, .16);

	--wrap: 1200px;
	--wrap-narrow: 760px;
	--gutter: clamp(1.15rem, 4vw, 2.5rem);
	--section-y: clamp(3.5rem, 7vw, 6.5rem);

	--font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* The garage-door seam pattern. Used on dark bands only. */
	/*
	 * One garage door section seam, drawn at the foot of its tile. The tile is
	 * sized to a fraction of the band it paints (see the seam rule below), so
	 * the seams always divide a band into equal sections however tall it is.
	 *
	 * The seam is a groove rather than a line: two pixels of shadow for the
	 * recess, one of light underneath for the lip that catches the sun. A flat
	 * hairline reads as ruling on paper; this reads as a joint between panels.
	 */
	--seam: linear-gradient(
		180deg,
		transparent 0,
		transparent calc(100% - 3px),
		rgba(0, 0, 0, .24) calc(100% - 3px),
		rgba(0, 0, 0, .24) calc(100% - 1px),
		rgba(255, 255, 255, .10) calc(100% - 1px),
		rgba(255, 255, 255, .10) 100%
	);

	/* Fades the seams out at the sides, so they read as a door surface
	   rather than lines ruled across the full width of the page. */
	--seam-fade: linear-gradient(
		90deg,
		transparent 0,
		#000 13%,
		#000 87%,
		transparent 100%
	);

	--ease: cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   1b. Garage door panel seams
   --------------------------------------------------------------------------
   The theme's signature motif, painted on the dark bands. Each band is
   divided into exactly `--panels` equal sections whatever its height, so a
   seam is never left cut off part-way through a panel - which is what made
   the old fixed 88px spacing look arbitrary.

   Panel counts differ by band because a panel has to keep roughly the
   proportions of a real door section: five across a tall hero or footer,
   three across a short page header. Every band that paints seams sets its
   own `--panels`; the fallback here only catches a band that forgets to.

   Masking is progressive - where it is unsupported the seams simply run the
   full width, which is where they started.
   ========================================================================== */

.hero::after,
.cta-band::after,
.page-hero::after,
.single__head::after,
.site-footer::after {
	background-image: var(--seam);
	background-size: 100% calc(100% / var(--panels, 4));
	background-repeat: repeat-y;
	-webkit-mask-image: var(--seam-fade);
	mask-image: var(--seam-fade);
}

.hero { --panels: 5; }

/* The footer is dense with menus and text, so it takes three wide panels -
   five put seams through the logo and right beside the copyright rule. */
.site-footer,
.cta-band,
.page-hero,
.single__head { --panels: 3; }

/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video,
iframe { max-width: 100%; }

img,
video { height: auto; display: block; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--orange-deep); }

button { font: inherit; }

ul, ol { margin: 0; padding: 0; }

figure { margin: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.5rem 0;
}

/* ==========================================================================
   3. Type
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.018em;
	color: var(--navy-ink);
	margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

.eyebrow {
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 .85rem;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.eyebrow--light { color: #ffb9a5; }

.lead {
	font-size: 1.15rem;
	color: var(--ink-soft);
}

.text-link {
	color: var(--navy);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.text-link .icon { width: 1em; height: 1em; }

/* Layout primitives ------------------------------------------------------ */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { margin-bottom: .35em; }
.section-head__intro { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }

.section__foot {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 2rem;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.section__foot p { margin: 0; color: var(--ink-soft); font-weight: 600; }
.section__foot--simple { justify-content: center; border-top: 0; }

.icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 700;
	padding: .4rem .8rem;
	border-radius: 999px;
	background: rgba(var(--navy-rgb), .08);
	color: var(--navy);
}

.chip--light {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .22);
}

/* Rating ----------------------------------------------------------------- */

.rating {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .9rem;
	white-space: nowrap;
}

.rating__stars {
	position: relative;
	width: 5.6em;
	height: 1em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c3cad8' d='m12 17.3-6.2 3.7 1.7-7L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.5 4.8 1.7 7z'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 1.12em 1em;
}

.rating__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a623' d='m12 17.3-6.2 3.7 1.7-7L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.5 4.8 1.7 7z'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 1.12em 1em;
}

.rating b { font-weight: 800; }
.rating__count { color: inherit; opacity: .75; }
.rating-link { text-decoration: none; color: inherit; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -.005em;
	line-height: 1.2;
	padding: .95rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--r-sm);
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--accent {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
	box-shadow: 0 2px 0 var(--orange-deep);
}

.btn--accent:hover {
	background: var(--orange-deep);
	border-color: var(--orange-deep);
	color: #fff;
}

.btn--call { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 2px 0 var(--orange-deep); }
.btn--call:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }

.btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--navy);
}

.btn--ghost:hover {
	border-color: var(--navy);
	background: rgba(var(--navy-rgb), .05);
	color: var(--navy);
}

.btn--ghost-light {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}

.btn--ghost-light:hover {
	background: rgba(255, 255, 255, .16);
	border-color: #fff;
	color: #fff;
}

.btn--lg { padding: 1.1rem 2rem; font-size: 1.075rem; }
.btn--sm { padding: .65rem 1.1rem; font-size: .9rem; }
.btn--block { width: 100%; }
.btn + .btn { margin-top: 0; }

.cta-pair,
.cta-inline {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.cta-inline { margin: 1.75rem 0; }

/* ==========================================================================
   5. Header
   ========================================================================== */

.topbar {
	background: var(--navy-ink);
	color: rgba(255, 255, 255, .82);
	font-size: .82rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	padding-block: .4rem;
}

.topbar__note { margin: 0; font-weight: 600; }

.topbar__meta {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	white-space: nowrap;
}

.topbar__badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 700;
	color: #fff;
}

.topbar__badge .icon { width: 1.05em; height: 1.05em; color: var(--orange); }

.topbar__license {
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

.masthead {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--line);
	transition: box-shadow .2s var(--ease);
}

.masthead.is-stuck { box-shadow: var(--shadow-md); }

.masthead__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 84px;
	padding-block: .65rem;
}

.brand { margin-right: auto; }

.brand__link {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	color: inherit;
}

.brand__badge { width: 58px; height: 58px; }
.brand__logo { max-height: 62px; width: auto; }

.brand__words { display: flex; flex-direction: column; line-height: 1; }

.brand__name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.14rem;
	letter-spacing: -.02em;
	color: var(--navy);
	text-transform: uppercase;
}

.brand__place {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--orange);
	margin-top: .22em;
}

/* Nav -------------------------------------------------------------------- */

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: .25rem;
	list-style: none;
}

.primary-nav__list li { position: relative; }

.primary-nav__list a {
	display: block;
	padding: .6rem .8rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .96rem;
	color: var(--navy-ink);
	text-decoration: none;
	border-radius: var(--r-xs);
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a {
	color: var(--navy);
	background: rgba(var(--navy-rgb), .07);
}

/* Dropdowns */
.primary-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 15rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-md);
	padding: .35rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
	z-index: 5;
}

.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/*
 * Third level (e.g. Service Areas > Treasure Valley > Boise).
 * Without this it would drop below its parent item and cover the menu it
 * came from, because the rule above positions every sub-menu at top:100%.
 * Flying out to the side is the only arrangement that works at this depth.
 */
.primary-nav__list .sub-menu .sub-menu {
	top: -.35rem;          /* line the first child up with its parent item */
	left: 100%;
	margin-left: .25rem;
	transform: translateX(-6px);
}

.primary-nav__list .sub-menu li:hover > .sub-menu,
.primary-nav__list .sub-menu li:focus-within > .sub-menu {
	transform: translateX(0);
}

/* A parent that has children gets a caret so the flyout is discoverable. */
.primary-nav__list .sub-menu .menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.primary-nav__list .sub-menu .menu-item-has-children > a::after {
	content: "";
	width: .32rem;
	height: .32rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: .5;
	flex: none;
}

.primary-nav__cta { display: none; }

.nav-toggle {
	display: none;
	align-items: center;
	gap: .45rem;
	background: transparent;
	border: 2px solid var(--line);
	border-radius: var(--r-sm);
	padding: .55rem .8rem;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy-ink);
	cursor: pointer;
}

.nav-toggle__icon { display: inline-flex; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.masthead__call {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.15;
	gap: .12rem;
}

.masthead__rating { color: var(--ink-faint); font-size: .8rem; }

.masthead__call-label {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.masthead__number {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -.02em;
	color: var(--navy);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.masthead__number:hover { color: var(--orange-deep); }
.masthead__number .icon { color: var(--orange); width: .95em; height: .95em; }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
	position: relative;
	isolation: isolate;
	background: var(--navy-deep);
	color: #fff;
	overflow: hidden;
}

/* The door-section rail. Sits above the background, under the content. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.hero__media,
.hero__art {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(12, 24, 56, .93) 0%, rgba(12, 24, 56, .82) 46%, rgba(23, 48, 106, .55) 100%);
}

/* No photo yet: the crest becomes the hero image. */
.hero__art {
	background:
		radial-gradient(80% 120% at 82% 20%, rgba(var(--orange-rgb), .22) 0%, transparent 60%),
		linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-ink) 100%);
}

.hero__crest {
	position: absolute;
	right: -4%;
	bottom: -22%;
	width: min(46vw, 560px);
	opacity: .16;
	filter: saturate(0) brightness(2.4);
	transform: rotate(-6deg);
}

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	/* Above .hero__door, so the copy and the form are never covered by it. */
	position: relative;
	z-index: 1;
}

/* The door that lifts away on load (Customize > Business Info > Home page
   hero). Layer order inside the hero, bottom to top:

       -2  .hero__media / .hero__art   the photo or the crest artwork
       -1  .hero::after                the static panel seams
        0  .hero__door                 the door, which slides up and off
        1  .hero__inner                headline, buttons, form

   Because the door only ever covers the background, the content behind it
   is painted immediately and stays clickable throughout. Nothing waits on
   the animation, and the element carries no text. */
.hero__door {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* A shade lighter than the hero behind it, so the lift is visible. */
	background-color: var(--navy);
	background-image:
		var(--seam),
		linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(0, 0, 0, .12));
	/* The shadow the door throws onto the space it is uncovering. */
	box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
	background-size: 100% calc(100% / var(--panels, 5)), 100% 100%;
	background-repeat: repeat-y, no-repeat;
	animation: gdb-door-lift 900ms cubic-bezier(.32, 0, .22, 1) 160ms both;
}

/* The bottom rail of the door, so the lifting edge reads as an edge. */
.hero__door::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 6px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .35));
}

@keyframes gdb-door-lift {
	from { transform: translateY(0); }
	to   { transform: translateY(-100%); }
}

/* Already seen this session, so the door is not in the way a second time. */
.gdb-door-seen .hero__door { display: none; }

.hero__eyebrow {
	font-family: var(--font-display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #ffbca8;
	margin: 0 0 1rem;
}

.hero__title {
	color: #fff;
	font-size: clamp(2.3rem, 5.4vw, 4rem);
	font-weight: 900;
	letter-spacing: -.028em;
	line-height: 1.03;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.hero__text {
	font-size: clamp(1.02rem, 1.6vw, 1.18rem);
	color: rgba(255, 255, 255, .84);
	max-width: 38rem;
	margin: 0 0 1.5rem;
}

.hero__points {
	list-style: none;
	display: grid;
	gap: .6rem;
	margin: 0 0 1.9rem;
}

.hero__points li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .95);
}

.hero__points .icon {
	color: var(--orange);
	background: rgba(var(--orange-rgb), .16);
	border-radius: 50%;
	padding: .12em;
	margin-top: .12em;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.6rem;
}

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	color: rgba(255, 255, 255, .9);
}

.hero__form { position: relative; }

.hero--landing .hero__inner { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ==========================================================================
   7. Home sections
   ========================================================================== */

/* Trust strip ------------------------------------------------------------ */

.trust {
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.trust__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.5rem 2rem;
	padding-block: 1.75rem;
}

.trust__item { display: flex; align-items: flex-start; gap: .75rem; }

.trust__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	border-radius: var(--r-sm);
	background: rgba(var(--orange-rgb), .1);
	color: var(--orange);
}

.trust__text { display: flex; flex-direction: column; line-height: 1.35; }
.trust__text b { font-family: var(--font-display); font-size: 1rem; color: var(--navy-ink); }
.trust__text span { font-size: .9rem; color: var(--ink-soft); }

/* Services --------------------------------------------------------------- */

.section--services { background: var(--concrete); }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 1.25rem;
}

.service-card {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

a.service-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: rgba(var(--navy-rgb), .35);
}

.service-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }

.service-card__body { display: block; padding: 1.4rem 1.5rem 1.5rem; }

.service-card__title {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--navy-ink);
	margin-bottom: .45rem;
	/* The accent mark: a short vermillion rule, like a door seam. */
	padding-top: .9rem;
	position: relative;
}

.service-card__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 3px;
	background: var(--orange);
	border-radius: 2px;
}

.service-card__text { display: block; color: var(--ink-soft); font-size: .96rem; }

.service-card__more {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .9rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .92rem;
	color: var(--navy);
}

a.service-card:hover .service-card__more { color: var(--orange-deep); }

/* Why us ----------------------------------------------------------------- */

.section--why { position: relative; overflow: hidden; }

.why__watermark {
	position: absolute;
	right: -8%;
	top: 50%;
	transform: translateY(-50%);
	width: min(52vw, 620px);
	opacity: .05;
	pointer-events: none;
	z-index: 0;
}

.section--why .wrap { position: relative; z-index: 1; }

.why__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.why__lead { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 1.75rem; }

.why__list { list-style: none; display: grid; gap: 1.5rem; }

.why__item { display: flex; gap: 1rem; align-items: flex-start; }

.why__check {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
}

.why__item h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.why__item p { margin: 0; color: var(--ink-soft); }

/* Offers ----------------------------------------------------------------- */

.section--offers {
	background: var(--orange);
	color: #fff;
	position: relative;
}

.section--offers .section-head__title { color: #fff; }
.section--offers .eyebrow { color: rgba(255, 255, 255, .82); }
.section--offers .section-head__intro { color: rgba(255, 255, 255, .9); }

.offer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

.offer {
	background: #fff;
	border-radius: var(--r-md);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.offer__body { padding: 1.75rem 1.6rem 1.6rem; flex: 1; }

.offer__title {
	font-size: 1.4rem;
	color: var(--navy-ink);
	margin-bottom: .5rem;
}

.offer__text { color: var(--ink-soft); margin-bottom: 1.25rem; }

.offer__fine {
	margin: 0;
	padding: .8rem 1.6rem;
	font-size: .78rem;
	color: var(--ink-faint);
	background: var(--concrete);
	border-top: 1px dashed var(--line);
}

/* Process ---------------------------------------------------------------- */

.process {
	list-style: none;
	counter-reset: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.process__step { position: relative; padding-top: 1.25rem; }

.process__step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--line);
	border-radius: 2px;
}

.process__step:first-child::before { background: var(--orange); }

.process__num {
	display: block;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--orange);
	letter-spacing: -.04em;
	margin-bottom: .5rem;
	font-variant-numeric: tabular-nums;
}

.process__title { font-size: 1.2rem; margin-bottom: .4rem; }
.process__text { color: var(--ink-soft); margin: 0; }

/* Portfolio -------------------------------------------------------------- */

.job-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
}

.job-card {
	display: block;
	position: relative;
	border-radius: var(--r-md);
	overflow: hidden;
	text-decoration: none;
	background: var(--navy-ink);
}

.job-card__media { display: block; aspect-ratio: 4 / 3; }
.job-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.job-card:hover .job-card__media img { transform: scale(1.04); opacity: .8; }

.job-card__title {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem 1.1rem 1rem;
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	background: linear-gradient(to top, rgba(12, 24, 56, .9), transparent);
}

/* Reviews ---------------------------------------------------------------- */

.section--reviews { background: var(--concrete); }

.review-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

.review {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 1.6rem;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.review__stars { display: inline-flex; gap: .1rem; color: #f5a623; margin-bottom: .85rem; }
.review__stars .icon { width: 1.1rem; height: 1.1rem; }

.review__quote {
	margin: 0 0 1.1rem;
	font-size: 1.02rem;
	color: var(--ink);
	flex: 1;
}

.review__quote p { margin-bottom: .75rem; }

.review__by { display: flex; flex-direction: column; line-height: 1.3; }
.review__by b { font-family: var(--font-display); color: var(--navy-ink); }
.review__by span { font-size: .88rem; color: var(--ink-faint); }

/* Service area ----------------------------------------------------------- */

.area__grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.area__note { color: var(--ink-soft); margin-bottom: 1.5rem; }

.area__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: .5rem;
}

.area__list a,
.area__list span {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .7rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	font-weight: 600;
	font-size: .95rem;
	color: var(--navy-ink);
	text-decoration: none;
}

.area__list .icon { color: var(--orange); width: 1.05em; height: 1.05em; }

.area__list a:hover {
	border-color: var(--navy);
	background: rgba(var(--navy-rgb), .05);
}

/* CTA band --------------------------------------------------------------- */

.cta-band {
	position: relative;
	background: var(--navy-ink);
	color: #fff;
	overflow: hidden;
}

.cta-band::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cta-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cta-band__copy { max-width: 34rem; }
.cta-band__title { color: #fff; margin-bottom: .4rem; }
.cta-band__text { color: rgba(255, 255, 255, .8); margin: 0; }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   8. Forms
   ========================================================================== */

.lead-form {
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	padding: clamp(1.5rem, 3vw, 2rem);
	color: var(--ink);
	position: relative;
	border-top: 5px solid var(--orange);
}

.lead-form__title { font-size: 1.4rem; margin-bottom: .35rem; }
.lead-form__intro { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.25rem; }

.search-form__input,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: .7rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--ink);
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.search-form__input:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .16);
}

.lead-form__foot {
	margin: .9rem 0 0;
	font-size: .88rem;
	color: var(--ink-soft);
	text-align: center;
}

.lead-form--compact .lead-form__title { font-size: 1.25rem; }

.form-notice {
	padding: .8rem 1rem;
	border-radius: var(--r-sm);
	font-size: .92rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.form-notice--error { background: #fdeceb; color: #9c2a12; border: 1px solid #f5c4bb; }
.form-notice--ok { background: #e8f5ec; color: #1a6b36; border: 1px solid #b9dfc6; }

.search-form { display: flex; gap: .5rem; }
.search-form__input { flex: 1; }

.search-form__submit {
	background: var(--navy);
	color: #fff;
	border: 0;
	border-radius: var(--r-sm);
	padding: .7rem 1.2rem;
	font-family: var(--font-display);
	font-weight: 700;
	cursor: pointer;
}

.search-form__submit:hover { background: var(--navy-deep); }

/* ==========================================================================
   9. Cards, blog and prose
   ========================================================================== */

.page-hero {
	background: var(--navy-deep);
	color: #fff;
	padding-block: clamp(2.25rem, 5vw, 3.75rem);
	position: relative;
	overflow: hidden;
}

.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.page-hero .wrap { position: relative; z-index: 1; }
.page-hero__title { color: #fff; margin-bottom: .35rem; }
.page-hero__text { color: rgba(255, 255, 255, .82); max-width: 44rem; margin: 0; }
.page-hero__search { margin-top: 1.25rem; max-width: 30rem; }

.breadcrumbs { margin-bottom: .9rem; font-size: .85rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumbs a { color: rgba(255, 255, 255, .8); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs [aria-current] { color: rgba(255, 255, 255, .6); }

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: var(--section-y);
	align-items: start;
}

.layout--full { grid-template-columns: minmax(0, 1fr); }

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
}

.post-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.post-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--concrete); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.post-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	background: linear-gradient(160deg, var(--navy) 0%, var(--navy-ink) 100%);
}

.post-card__placeholder img { width: 40%; max-width: 90px; opacity: .55; filter: saturate(0) brightness(2.2); }

.post-card__body { display: block; padding: 1.25rem 1.35rem 1.4rem; }

.post-card__cat {
	display: inline-block;
	font-family: var(--font-display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: .5rem;
}

.post-card__title { font-size: 1.18rem; margin-bottom: .45rem; }
.post-card__excerpt { display: block; color: var(--ink-soft); font-size: .95rem; }

.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .85rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9rem;
	color: var(--navy);
}

.post-meta { color: rgba(255, 255, 255, .7); font-size: .9rem; display: flex; gap: .5rem; }
.post-meta__sep { opacity: .5; }

/* Sidebar ---------------------------------------------------------------- */

.layout__aside { position: sticky; top: 110px; display: grid; gap: 1.5rem; }

.aside-card {
	background: var(--concrete);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 1.5rem;
	text-align: center;
	display: grid;
	gap: .65rem;
	justify-items: center;
}

.aside-card__badge { width: 68px; }
.aside-card__title { font-size: 1.25rem; margin: 0; }
.aside-card__text { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .35rem; }
.aside-card .btn { width: 100%; }
.aside-card__license { font-size: .8rem; color: var(--ink-faint); margin: .25rem 0 0; }

.widget { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
.widget:last-child { border-bottom: 0; }
.widget__title { font-size: 1.1rem; margin-bottom: .75rem; }
.widget ul { list-style: none; display: grid; gap: .5rem; }
.widget a { color: var(--navy-ink); text-decoration: none; font-weight: 600; }
.widget a:hover { color: var(--orange-deep); }

/* Single post ------------------------------------------------------------ */

.single__head {
	background: var(--navy-deep);
	color: #fff;
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
	position: relative;
	overflow: hidden;
}

.single__head::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.single__head .wrap { position: relative; z-index: 1; }
.single__title { color: #fff; margin-bottom: .5rem; }

.single__media { margin-top: -2rem; position: relative; z-index: 2; }
.single__media img { border-radius: var(--r-md); box-shadow: var(--shadow-md); width: 100%; }

.single__terms { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }

.single__terms a {
	display: inline-block;
	padding: .35rem .75rem;
	background: var(--concrete);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--navy-ink);
}

.single__cta { margin-top: 2.5rem; }
.single__cta .cta-band { border-radius: var(--r-md); }
.single__cta .cta-band__inner { padding-inline: clamp(1.5rem, 3vw, 2.5rem); }

.section--related { background: var(--concrete); }

/* Prose ------------------------------------------------------------------ */

.prose { font-size: 1.075rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.9em; margin-bottom: .5em; }
.prose h3 { margin-top: 1.6em; margin-bottom: .4em; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .35em; }
.prose img { border-radius: var(--r-sm); }

.prose blockquote {
	margin: 1.75em 0;
	padding: .35em 0 .35em 1.35em;
	border-left: 4px solid var(--orange);
	font-size: 1.1rem;
	color: var(--navy-ink);
}

.prose a { font-weight: 600; }
.prose code { background: var(--concrete); padding: .15em .4em; border-radius: var(--r-xs); font-size: .92em; }

.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }
.prose th { background: var(--concrete); font-family: var(--font-display); }

/* Pagination ------------------------------------------------------------- */

.gdb-pagination { margin-top: 2.5rem; }

.gdb-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

.gdb-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: .75rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	text-decoration: none;
	font-weight: 700;
	color: var(--navy-ink);
}

.gdb-pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.gdb-pagination a.page-numbers:hover { border-color: var(--navy); }

/* Comments --------------------------------------------------------------- */

.comments { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.comments__title { font-size: 1.4rem; }
.comments__list { list-style: none; display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.comments__list .children { list-style: none; padding-left: 1.5rem; margin-top: 1.5rem; display: grid; gap: 1.5rem; }
.comments__list .comment-body { background: var(--concrete); border-radius: var(--r-md); padding: 1.25rem; }
.comment-form { display: grid; gap: .85rem; }
.comment-form p { margin: 0; }
.comment-form label { font-weight: 700; font-size: .88rem; display: block; margin-bottom: .25rem; }

/* Empty states ----------------------------------------------------------- */

.empty-state {
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
	background: var(--concrete);
	border-radius: var(--r-md);
}

.empty-state__title { margin-bottom: .5rem; }
.empty-state .search-form { max-width: 24rem; margin: 1.5rem auto 0; }
.empty-state .cta-inline { justify-content: center; }

.section--404 { text-align: center; }
.section--404 .cta-inline { justify-content: center; }
.notfound__search { max-width: 26rem; margin: 0 auto 1.5rem; }
.notfound__links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; font-weight: 600; }

/* ==========================================================================
   10. FAQ
   ========================================================================== */

.section--faq { background: var(--concrete); }

.faq { display: grid; gap: .65rem; }

.faq__item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.faq__item[open] { border-color: rgba(var(--navy-rgb), .35); box-shadow: var(--shadow-sm); }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--navy-ink);
	list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { color: var(--orange); transition: transform .2s var(--ease); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__q:hover { background: rgba(var(--navy-rgb), .04); }

.faq__a { padding: 0 1.25rem 1.25rem; color: var(--ink-soft); }
.faq__a p:last-child { margin-bottom: 0; }

.faq__foot { text-align: center; margin-top: 1.75rem; color: var(--ink-soft); }

/* ==========================================================================
   11. Contact / About / Resources
   ========================================================================== */

.contact__intro { margin: 0 auto clamp(2rem, 4vw, 3rem); }

.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.contact__heading { font-size: 1.4rem; margin-bottom: 1.1rem; }

.contact__row {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
}

.contact__details .contact__row:nth-child(2) { border-top: 1px solid var(--line); }

.contact__row > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.contact__row b { font-family: var(--font-display); font-size: 1.1rem; color: var(--navy-ink); }
.contact__row > span:last-child > span { font-size: .88rem; color: var(--ink-faint); }

.contact__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: var(--r-sm);
	background: rgba(var(--orange-rgb), .1);
	color: var(--orange);
}

a.contact__row:hover .contact__icon { background: var(--orange); color: #fff; }

.contact__license {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.25rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.contact__license .icon { color: var(--navy); }

.contact__map { margin-top: clamp(2.5rem, 5vw, 4rem); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact__map iframe { display: block; }

.hours { margin-top: 1.75rem; }

.hours__title {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: 1rem;
	margin-bottom: .6rem;
}

.hours__title .icon { color: var(--orange); }
.hours__list { margin: 0; }

.hours__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .35rem 0;
	border-bottom: 1px dotted var(--line);
	font-size: .95rem;
}

.hours__row dt { font-weight: 600; }
.hours__row dd { margin: 0; color: var(--ink-soft); }

.hours__emergency {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: .75rem 0 0;
	font-weight: 700;
	color: var(--orange);
	font-size: .92rem;
}

.hours__note { margin: .5rem 0 0; font-size: .85rem; color: var(--ink-faint); }

.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.about__placeholder {
	padding: 1.25rem;
	border: 1px dashed var(--line);
	border-radius: var(--r-sm);
	color: var(--ink-faint);
	background: var(--concrete);
}

.about__aside { display: grid; gap: 1.5rem; position: sticky; top: 110px; }
.about__photo img { border-radius: var(--r-md); width: 100%; }

.resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

.resource-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: var(--r-sm);
	overflow: hidden; /* keeps the image inside the rounded corner */
	text-decoration: none;
	color: inherit;
	transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.resource-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--concrete);
}

.resource-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s var(--ease);
}

.resource-card:hover .resource-card__media img { transform: scale(1.03); }

/* Shown when a resource page has no featured image, so the grid keeps its
   rhythm instead of leaving one card short. */
.resource-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	background: linear-gradient(160deg, var(--navy) 0%, var(--navy-ink) 100%);
}

.resource-card__placeholder img {
	width: 38%;
	max-width: 84px;
	opacity: .55;
	filter: saturate(0) brightness(2.2);
}

.resource-card__body {
	display: flex;
	flex-direction: column;
	flex: 1; /* fill the card, so the arrow can sit on the bottom edge */
	gap: .4rem;
	padding: 1.25rem 1.4rem 1.4rem;
}

.resource-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--navy-ink); }
.resource-card__text { color: var(--ink-soft); font-size: .93rem; }
.resource-card__more { color: var(--orange); margin-top: auto; padding-top: .6rem; }

/* Plugin-owned templates get the same reading width by default. */
body.is-plugin-content .site-main > .entry-content,
body.is-plugin-content .site-main > article {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--section-y) var(--gutter);
}

/* ==========================================================================
   12. Footer + sticky call bar
   ========================================================================== */

.site-footer {
	background: var(--navy-ink);
	color: rgba(255, 255, 255, .76);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	position: relative;
	overflow: hidden;
	font-size: .96rem;
}

.site-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.site-footer .wrap { position: relative; z-index: 1; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: clamp(1.75rem, 4vw, 3rem);
}

.footer__badge { width: 84px; margin-bottom: 1rem; }
.footer__about { color: rgba(255, 255, 255, .72); }

.footer__license {
	margin-top: .85rem;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .55);
}

.footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }

.social {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .09);
	color: #fff;
	transition: background-color .15s var(--ease);
}

.social:hover { background: var(--orange); color: #fff; }

.footer__title {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1rem;
}

.footer__menu { list-style: none; display: grid; gap: .55rem; }
.footer__menu a { color: rgba(255, 255, 255, .76); text-decoration: none; }
.footer__menu a:hover { color: #fff; }

.footer__contact { list-style: none; display: grid; gap: .8rem; }
.footer__contact li { display: flex; align-items: flex-start; gap: .6rem; }
.footer__contact .icon { color: var(--orange); margin-top: .15em; }
.footer__contact a { color: #fff; text-decoration: none; }
.footer__contact a:hover { color: var(--orange); }

.footer__phone {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -.02em;
}

.site-footer .hours { margin-top: 1.5rem; }
.site-footer .hours__title { color: #fff; }
.site-footer .hours__row { border-bottom-color: rgba(255, 255, 255, .14); }
.site-footer .hours__row dd { color: rgba(255, 255, 255, .7); }
.site-footer .hours__note { color: rgba(255, 255, 255, .5); }

.footer-bottom {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	font-size: .87rem;
	color: rgba(255, 255, 255, .55);
}

.footer-bottom__copy { margin: 0; }
.footer-bottom__menu { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom__menu a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.footer-bottom__menu a:hover { color: #fff; }

/* Sticky call bar (mobile) ------------------------------------------------ */

.sticky-call {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 70;
	display: none;
	background: var(--navy-ink);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
	gap: .5rem;
	box-shadow: 0 -6px 24px rgba(12, 24, 56, .28);
}

.sticky-call__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .8rem .5rem;
	border-radius: var(--r-sm);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .98rem;
	text-decoration: none;
}

.sticky-call__btn--call { background: var(--orange); color: #fff; }
.sticky-call__btn--quote { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
	.hero__inner { grid-template-columns: minmax(0, 1fr); }
	.hero__form { max-width: 34rem; }
	.why__grid,
	.area__grid,
	.contact__grid,
	.about__grid,
	.layout { grid-template-columns: minmax(0, 1fr); }
	.layout__aside,
	.about__aside { position: static; }
	.masthead__call { display: none; }
	.why__watermark { display: none; }
}

@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; }

	.primary-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(88vw, 24rem);
		background: #fff;
		padding: 5.5rem 1.5rem 2rem;
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		transition: transform .25s var(--ease);
		overflow-y: auto;
		z-index: 65;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	body.nav-open .primary-nav { transform: translateX(0); }

	/* Must stay below .masthead (z-index 60) so the dimmer does not cover
	   the menu panel, which lives inside the masthead stacking context. */
	body.nav-open::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(12, 24, 56, .5);
		z-index: 55;
	}

	body.nav-open .sticky-call { display: none; }

	body.nav-open { overflow: hidden; }

	.primary-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
	.primary-nav__list a { padding: .85rem .75rem; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }

	.primary-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 .85rem;
	}

	/* The desktop flyout offsets have no place in the drawer - each level
	   just indents under the one above it. */
	.primary-nav__list .sub-menu .sub-menu {
		top: auto;
		left: auto;
		margin-left: 0;
		transform: none;
	}

	.primary-nav__list .sub-menu .menu-item-has-children > a::after { display: none; }

	.primary-nav__list .sub-menu a { font-size: .96rem; color: var(--ink-soft); }
	.primary-nav__cta { display: block; }
	.primary-nav__cta .btn { width: 100%; }

	.topbar__meta { display: none; }
	.topbar__note { font-size: .78rem; text-align: center; width: 100%; }
	.topbar__inner { justify-content: center; }
}

@media (max-width: 760px) {
	.sticky-call { display: flex; }
	body.has-sticky-call { padding-bottom: 4.5rem; }
	body.has-sticky-call .site-footer { padding-bottom: 5rem; }

	.section__foot { flex-direction: column; align-items: flex-start; }
	.cta-band__inner { flex-direction: column; align-items: flex-start; }
	.hero__crest { width: 74vw; right: -18%; bottom: -14%; }
	.single__media { margin-top: -1rem; }
	.masthead__inner { min-height: 68px; }
	.brand__badge { width: 46px; height: 46px; }
	.brand__name { font-size: 1rem; }
	.brand__place { font-size: .72rem; letter-spacing: .26em; }
	.btn { width: 100%; }
	.btn--sm { width: auto; }
	.cta-pair, .hero__actions, .cta-band__actions { width: 100%; }
}

@media (max-width: 420px) {
	.trust__list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   14. Accessibility
   ========================================================================== */

.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;
	z-index: 100;
	padding: .85rem 1.25rem;
	background: var(--orange);
	color: #fff;
	font-weight: 700;
	border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus { left: 0; color: #fff; }

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

.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible {
	outline-color: #fff;
}

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

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	/* The rule above would leave the door finishing in a single frame, which
	   is a flash rather than no motion. Take it out of the page instead. */
	.hero__door { display: none !important; }
}

@media print {
	.topbar, .masthead, .site-footer, .sticky-call, .cta-band, .lead-form { display: none !important; }
	body { color: #000; }
}

/* ==========================================================================
   15. Jetpack Forms
   --------------------------------------------------------------------------
   When Jetpack owns the form (so its submissions land in Feedback as well as
   Leads), its markup inherits the same treatment as the built-in form. Only
   layout and colour are set here - nothing depends on Jetpack's internals
   beyond these wrapper classes.
   ========================================================================== */

.lead-form .contact-form,
.lead-form .wp-block-jetpack-contact-form {
	display: grid;
	gap: .85rem;
}

.lead-form .grunion-field-wrap,
.lead-form .contact-form div[class*="grunion-field"] {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.lead-form .contact-form label,
.lead-form .wp-block-jetpack-contact-form label {
	font-size: .82rem;
	font-weight: 700;
	color: var(--navy-ink);
	margin: 0;
}

.lead-form .contact-form input[type="text"],
.lead-form .contact-form input[type="email"],
.lead-form .contact-form input[type="tel"],
.lead-form .contact-form input[type="url"],
.lead-form .contact-form select,
.lead-form .contact-form textarea,
.lead-form .wp-block-jetpack-contact-form input[type="text"],
.lead-form .wp-block-jetpack-contact-form input[type="email"],
.lead-form .wp-block-jetpack-contact-form input[type="tel"],
.lead-form .wp-block-jetpack-contact-form select,
.lead-form .wp-block-jetpack-contact-form textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: .7rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--ink);
	box-shadow: none;
}

.lead-form .contact-form input:focus,
.lead-form .contact-form select:focus,
.lead-form .contact-form textarea:focus,
.lead-form .wp-block-jetpack-contact-form input:focus,
.lead-form .wp-block-jetpack-contact-form select:focus,
.lead-form .wp-block-jetpack-contact-form textarea:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .16);
}

.lead-form .contact-form textarea,
.lead-form .wp-block-jetpack-contact-form textarea { min-height: 5.5rem; resize: vertical; }

.lead-form .contact-form .contact-form-submission,
.lead-form .contact-form button[type="submit"],
.lead-form .contact-form input[type="submit"],
.lead-form .wp-block-jetpack-contact-form button[type="submit"] {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	padding: .95rem 1.6rem;
	background: var(--orange);
	border: 2px solid var(--orange);
	border-radius: var(--r-sm);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 0 var(--orange-deep);
}

.lead-form .contact-form button[type="submit"]:hover,
.lead-form .contact-form input[type="submit"]:hover,
.lead-form .wp-block-jetpack-contact-form button[type="submit"]:hover {
	background: var(--orange-deep);
	border-color: var(--orange-deep);
}

/* Jetpack's own confirmation message after a submission. */
.lead-form .contact-form-submission {
	background: #e8f5ec;
	border: 1px solid #b9dfc6;
	border-radius: var(--r-sm);
	padding: 1rem;
	color: #1a6b36;
}

.lead-form .contact-form-submission p { margin-bottom: .5rem; }

/* ==========================================================================
   16. Steadfast lead form (plugin)
   --------------------------------------------------------------------------
   The lead form is rendered by the lead form plugin. These rules map its
   markup onto the theme, inside the existing .lead-form card, so the plugin
   form is visually identical to the form it replaced.

   Every custom property referenced below is defined in :root at the top of
   this file - checked against the theme, no substitutions were needed.
   ========================================================================== */

/* Steadfast lead form — mapped onto the garage-door-boise theme, inside the existing .lead-form box. */
.steadfast-lead-form { font-family: var(--font-body); color: var(--ink); }

/* field rows: label above control, stacked */
.steadfast-lead-form .slf-row { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .85rem; }
.steadfast-lead-form .slf-row label {
  font-size: .82rem; font-weight: 700; color: var(--navy-ink);
  display: flex; align-items: baseline; gap: .4rem;
}
.steadfast-lead-form .slf-req { color: var(--orange); font-weight: 700; }

/* inputs / select / textarea — his .field control styling */
.steadfast-lead-form .slf-row input,
.steadfast-lead-form .slf-row select,
.steadfast-lead-form .slf-row textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .7rem .8rem;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.steadfast-lead-form .slf-row textarea { resize: vertical; min-height: 5.5rem; }
.steadfast-lead-form .slf-row input:focus,
.steadfast-lead-form .slf-row select:focus,
.steadfast-lead-form .slf-row textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .16);
}
.steadfast-lead-form .slf-row input:user-invalid,
.steadfast-lead-form .slf-row select:user-invalid { border-color: rgba(var(--orange-rgb), .7); }

/* consent — small, muted, checkbox beside the disclosure */
.steadfast-lead-form .slf-consent { margin: 0 0 .85rem; }
.steadfast-lead-form .slf-consent label { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.steadfast-lead-form .slf-consent input { margin-top: .2rem; flex: 0 0 auto; }
.steadfast-lead-form .slf-disclosure { font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }

/* honeypot — stays off-screen even if a reset clobbers the inline style */
.steadfast-lead-form .slf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* submit — his .btn.btn--accent.btn--block */
.steadfast-lead-form .slf-actions { margin: 1.1rem 0 0; }
.steadfast-lead-form .slf-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: .95rem 1.6rem; border: 2px solid var(--orange); border-radius: var(--r-sm);
  background: var(--orange); color: #fff; box-shadow: 0 2px 0 var(--orange-deep);
  cursor: pointer; transition: transform .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.steadfast-lead-form .slf-actions button:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.steadfast-lead-form .slf-actions button:active { transform: translateY(1px); }

/* post-submit confirmation — shown in place of the form, inside the .lead-form box */
.slf-confirmation { text-align: center; padding: 1rem .5rem; }
.slf-confirmation p { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--navy-ink); margin: 0; }