@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
	--bs-border-color: #113193;
	--footer-border-color:#ffffff;
}
.footer-class{
	--bs-border-color: var(--footer-border-color);
}
.app {
	--bs-border-color: var(--bs-yellow);
}
/** nav **/
.napbgb{
	background: rgb(0,70,137);
	background: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(0,70,137,1)), color-stop(50%, rgba(0,14,137,1)), color-stop(75%, rgba(0,70,137,1)));
	background: -o-linear-gradient(left, rgba(0,70,137,1) 25%, rgba(0,14,137,1) 50%, rgba(0,70,137,1) 75%);
	background: linear-gradient(90deg, rgba(0,70,137,1) 25%, rgba(0,14,137,1) 50%, rgba(0,70,137,1) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004689",endColorstr="#004689",GradientType=1);
	height: 159.625px;
}
.footer{
	background: rgb(0,70,137);
	background: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(0,70,137,1)), color-stop(50%, rgba(0,14,137,1)), color-stop(75%, rgba(0,70,137,1)));
	background: -o-linear-gradient(left, rgba(0,70,137,1) 25%, rgba(0,14,137,1) 50%, rgba(0,70,137,1) 75%);
	background: linear-gradient(90deg, rgba(0,70,137,1) 25%, rgba(0,14,137,1) 50%, rgba(0,70,137,1) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004689",endColorstr="#004689",GradientType=1);
	color: #ffffff;
}
.footer a{
	text-decoration: none;
	color: #ffffff;
}
.footer ul {
	list-style: none;
}
.napbgy {
	background: rgb(244,199,80);
	background: -webkit-gradient(linear, left top, right top, from(rgba(244,199,80,1)), color-stop(49%, rgba(255,186,0,1)), to(rgba(244,199,80,1)));
	background: -o-linear-gradient(left, rgba(244,199,80,1) 0%, rgba(255,186,0,1) 49%, rgba(244,199,80,1) 100%);
	background: linear-gradient(90deg, rgba(244,199,80,1) 0%, rgba(255,186,0,1) 49%, rgba(244,199,80,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4c750",endColorstr="#f4c750",GradientType=1);
}
.nav-link{
	color: #333333;
	font-weight: bold;
	font-size: 18px;
}
.btns{
	max-width: 400px;
	width: 100%;
}
.animated-image {
	-webkit-animation: enterFromRight 1s ease-out forwards, wobble 2s 1s forwards;
	        animation: enterFromRight 1s ease-out forwards, wobble 2s 1s forwards;
}
@-webkit-keyframes enterFromRight {
	from {
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
}
@keyframes enterFromRight {
	from {
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
}
.truck {
	position: absolute;
	height: auto;
	max-width: 100%;
	z-index: 1;
	width: 350px;
	top:4%;
	right:15%;
	pointer-events: none;
}
@-webkit-keyframes wobble {
	0% {
		-webkit-transform: none;
		transform: none
}
	15% {
		-webkit-transform: translate3d(-25%,0,0) rotate(-5deg);
		transform: translate3d(-25%,0,0) rotate(-5deg)
}
	30% {
		-webkit-transform: translate3d(20%,0,0) rotate(3deg);
		transform: translate3d(20%,0,0) rotate(3deg)
}
	45% {
		-webkit-transform: translate3d(-15%,0,0) rotate(-3deg);
		transform: translate3d(-15%,0,0) rotate(-3deg)
}
	60% {
		-webkit-transform: translate3d(10%,0,0) rotate(2deg);
		transform: translate3d(10%,0,0) rotate(2deg)
}
	75% {
		-webkit-transform: translate3d(-5%,0,0) rotate(-1deg);
		transform: translate3d(-5%,0,0) rotate(-1deg)
}
	to {
		-webkit-transform: none;
		transform: none
}
}
@keyframes wobble {
	0% {
		-webkit-transform: none;
		transform: none
}
	15% {
		-webkit-transform: translate3d(-25%,0,0) rotate(-5deg);
		transform: translate3d(-25%,0,0) rotate(-5deg)
}
	30% {
		-webkit-transform: translate3d(20%,0,0) rotate(3deg);
		transform: translate3d(20%,0,0) rotate(3deg)
}
	45% {
		-webkit-transform: translate3d(-15%,0,0) rotate(-3deg);
		transform: translate3d(-15%,0,0) rotate(-3deg)
}
	60% {
		-webkit-transform: translate3d(10%,0,0) rotate(2deg);
		transform: translate3d(10%,0,0) rotate(2deg)
}
	75% {
		-webkit-transform: translate3d(-5%,0,0) rotate(-1deg);
		transform: translate3d(-5%,0,0) rotate(-1deg)
}
	to {
		-webkit-transform: none;
		transform: none
}
}
.wobble {
	-webkit-animation-name: wobble;
	animation-name: wobble
}
.hero {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	color: #ffffff;
	min-height: 100vh;
	/* Adjust to your needs */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.hero h1, .hero p {
	text-shadow: 2px 2px #000000;
}
/* Darken the background image */
.hero::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.228);
	/* This darkens the background */
	z-index: 1;
}
.hero .container {
	z-index: 2;
	/* Ensure content is above the darkening overlay */
	position: relative;
}
.services h2 {
	color: #113193;
}
.services p{
	color: #4b4b4b;
}
.bluetext{
	color:#113193;
}
.warranty{
	background: rgb(0,70,137);
	background: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(0,70,137,1)), color-stop(50%, rgba(0,14,137,1)), color-stop(75%, rgba(0,70,137,1)));
	background: -o-linear-gradient(left, rgba(0,70,137,1) 25%, rgba(0,14,137,1) 50%, rgba(0,70,137,1) 75%);
	background: linear-gradient(90deg, rgba(0,70,137,1) 25%, rgba(0,14,137,1) 50%, rgba(0,70,137,1) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004689",endColorstr="#004689",GradientType=1);
	color:#ffffff;
}
.napacard {
	background: rgb(244,199,80);
	background: -webkit-gradient(linear, left top, right top, from(rgba(244,199,80,1)), color-stop(49%, rgba(255,186,0,1)), to(rgba(244,199,80,1)));
	background: -o-linear-gradient(left, rgba(244,199,80,1) 0%, rgba(255,186,0,1) 49%, rgba(244,199,80,1) 100%);
	background: linear-gradient(90deg, rgba(244,199,80,1) 0%, rgba(255,186,0,1) 49%, rgba(244,199,80,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4c750",endColorstr="#f4c750",GradientType=1);
}
.app {
	background: rgb(0,70,137);
	background: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(0,70,137,1)), color-stop(50%, rgba(0,14,137,1)), color-stop(75%, rgba(0,70,137,1)));
	background: -o-linear-gradient(left, rgba(0,70,137,1) 25%, rgba(0,14,137,1) 50%, rgba(0,70,137,1) 75%);
	background: linear-gradient(90deg, rgba(0,70,137,1) 25%, rgba(0,14,137,1) 50%, rgba(0,70,137,1) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004689",endColorstr="#004689",GradientType=1);
	color:#ffffff;
}
a.makeityellow{
	color: #F4C751;
}
a.sneak-text{
	color: #F4C751;
}
#myBtn {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Fixed/sticky position */
	bottom: 20px;
	/* Place the button at the bottom of the page */
	right: 30px;
	/* Place the button 30px from the right */
	z-index: 99;
	/* Make sure it does not overlap */
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: #c7180c00;
	/* Set a background color */
	cursor: pointer;
	/* Add a mouse pointer on hover */
	border-radius: 5px;
	/* Rounded corners */
	width: 48px;
	/* box width */
	height:48px ;
	/* box height */
}
#myBtn:hover {
	background-color: #F4C751;
	/* Add a yellow background on hover */
}
/*--- setting img color and hover -----*/
#myBtn img {
	/* img color to dark gray */
	-webkit-filter: invert(15%) sepia(0%) saturate(1509%) hue-rotate(170deg) brightness(97%) contrast(85%);
	filter: invert(15%) sepia(0%) saturate(1509%) hue-rotate(170deg) brightness(97%) contrast(85%);
}
#myBtn img:hover {
	/* hover img to yellow */
	-webkit-filter: invert(13%) sepia(37%) saturate(7494%) hue-rotate(226deg) brightness(90%) contrast(95%);
	filter: invert(13%) sepia(37%) saturate(7494%) hue-rotate(226deg) brightness(90%) contrast(95%);
}
/*---- hide button on smaller screens -----*/
@media only screen and (max-width: 725px) {
	#myBtn {
		visibility: hidden;
	}
}
.list-group {
	--bs-list-group-border-color:#FFFFFF;
}
.list-group-item {
	--bs-list-group-border-color:var(--bs-border-color);
	padding: 1rem 1.125rem;
}
.service-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.service-list li {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--white);
	box-shadow: 0 8px 24px rgba(21,38,56,.05);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-list li:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(21,38,56,.1);
	border-color: var(--blue);
}
.service-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.125rem;
	color: var(--blue-dark);
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: color .2s ease;
}
.service-list li a::after {
	content: '\2192';
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--gold);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
}
.service-list li a:hover::after, .service-list li a:focus::after {
	opacity: 1;
	transform: translateX(2px);
}
.service-list li a:hover, .service-list li a:focus, .service-list li a:active {
	color: var(--blue);
}
.servicep {
	background: var(--paper);
}
.servicep .section-heading h2 {
	color: var(--blue);
}
@media screen and (max-width: 600px) {
	.service-list {
		grid-template-columns: 1fr;
	}
}
.subreadbg{
	background: -o-linear-gradient(#21252952, #21252940), url('/wp-content/uploads/2024/10/jsub.webp');
	background: -webkit-gradient(linear, left top, left bottom, from(#21252952), to(#21252940)), url('/wp-content/uploads/2024/10/jsub.webp');
	background: linear-gradient(#21252952, #21252940), url('/wp-content/uploads/2024/10/jsub.webp');
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center;
}
.top-titlez{
  color: #ffffff;
  text-shadow: 2px 2px #111111;
}
.breadcrumb {
	font-weight:500;
	list-style: none;
	border-color: #c7180c!important;
	text-shadow: 1px 1px 2px #111111;
	color: #ffffff;
}
.breadcrumb a {
	color: #fff;
	text-decoration: none;
}
.breadcrumb img{
	/*-- changing the -> icon to white --- */
	-webkit-filter: invert(100%) sepia(99%) saturate(0%) hue-rotate(46deg) brightness(107%) contrast(101%);
	filter: invert(100%) sepia(99%) saturate(0%) hue-rotate(46deg) brightness(107%) contrast(101%);
}
.top-title{
	color: #FFFFFF;
}
@media only screen and (min-width:769px) {
	.mobonly{
		display: none;
	}
}
.m-2{
	text-decoration: none;
	font-weight: bold;
}
.shadowlogo{
	-webkit-filter: drop-shadow(5px 5px 5px #2222229e);
	filter: drop-shadow(5px 5px 5px #2222229e);
}
.service-list li{
  --color-on-hover:#686868;
    --background-color:#ffffff;
    --background-on-hover:#cecece;
    --border-color:#dfdfdf;
    --border-color-on-hover:#cecece;
}

/* Jake's Auto Care visual system */
:root { --blue: #07549a; --blue-dark: #063667; --gold: #f7bd24; --ink: #152638; --muted: #5b6975; --paper: #f5f7f8; --line: #dbe3e9; --white: #fff; --bs-border-color: var(--line); }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: 'DM Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4, .button, .nav-link { font-family: 'Space Grotesk', sans-serif; }
h1, h2, h3, h4 { color: var(--blue-dark); line-height: 1.08; }
a { color: var(--blue); }
.site-container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.utility-bar { background: var(--gold); color: var(--blue-dark); font-size: .8rem; font-weight: 600; }
.utility-bar__inner { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; }
.utility-bar a { color: var(--blue-dark); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.site-header__main-band { background: var(--blue); }
.site-header__main { position: relative; z-index: 0; display: flex; align-items: center; gap: 2rem; min-height: 108px; }
.site-header__main::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--blue-dark); }
.site-brand { display: block; line-height: 0; margin-right: auto; padding: .7rem 1rem; border-radius: 3px; background: transparent; }
.site-brand img, .site-brand .custom-logo { width: auto; max-width: 250px; max-height: 96px; object-fit: contain; }
.header-trust { display: grid; color: var(--white); font-size: .82rem; line-height: 1.25; }
.header-trust strong { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; }
.header-trust span { color: #dceafa; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 3px; padding: .8rem 1.2rem; font-weight: 700; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.button:hover, .button:focus { transform: translateY(-2px); }
.button--gold { background: var(--gold); color: var(--blue-dark); }
.button--gold:hover, .button--gold:focus { background: #ffd45b; color: var(--blue-dark); }
.site-nav { border-top: 1px solid rgba(255,255,255,.14); background: var(--blue); box-shadow: 0 5px 14px rgba(6,54,103,.16); }
.site-nav__inner { display: flex; justify-content: center; }
.navbar-collapse.collapse { display: flex; justify-content: center; }
.navbar-nav { display: flex; flex-direction: row; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.site-nav .nav-link { position: relative; display: block; color: var(--white) !important; padding: .85rem 1rem; font-size: .92rem; font-weight: 600; text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.site-nav .nav-link::after { content: ''; position: absolute; right: 1rem; bottom: .45rem; left: 1rem; height: 2px; transform: scaleX(0); transform-origin: center; background: var(--gold); transition: transform .2s ease; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus, .site-nav .nav-link.active { color: var(--gold) !important; }
.site-nav .nav-link:hover::after, .site-nav .nav-link:focus::after, .site-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-toggler { display: none; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; background: transparent; padding: .55rem .65rem; }
.navbar-toggler span { display: block; width: 25px; height: 2px; margin: 5px; background: var(--white); }
.page-banner { background: var(--paper); border-bottom: 5px solid var(--gold); padding: 2.5rem 0; }
.page-banner h1 { margin: .25rem 0; font-size: clamp(2rem, 5vw, 3.5rem); }
.page-banner p { max-width: 620px; margin: .5rem 0 0; color: var(--muted); font-size: 1.05rem; }
.eyebrow { margin: 0; color: var(--blue); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow--gold { color: var(--gold); }
.breadcrumb { color: var(--muted); font-size: .9rem; }
.breadcrumb a { text-decoration: none; }
.hero { min-height: 620px; display: flex; align-items: center; position: relative; overflow: hidden; background-color: #042649; background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--white); }
.hero .container { position: relative; z-index: 1; width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 5rem 0; }
.hero h1 { max-width: 720px; margin: .45rem 0 1.1rem; color: var(--white); font-size: clamp(2.5rem, 6vw, 5.25rem); }
.hero p { max-width: 600px; font-size: 1.18rem; }
.hero .text-shadow { text-shadow: none; }
.hero .button, .hero .btn { margin-top: .8rem; }
.welcome, .services, .napacard { background: var(--white); }
.welcome .container, .services .container, .warranty .container, .napacard .container, .app .container { padding-top: 5rem; padding-bottom: 5rem; }
.welcome h2, .services h2, .app h2 { margin-top: .4rem; border: 0 !important; font-size: clamp(2rem, 4vw, 3.3rem); }
.welcome p, .warranty p, .napacard p { color: var(--muted); }
.bluetext, .services h2 { color: var(--blue); }
.warranty { background: var(--blue); color: var(--white); }
.warranty h2, .warranty p { color: var(--white); }
.napacard { background: var(--gold); }
.napacard h2 { color: var(--blue-dark); }
.services { background: var(--paper); }
.services h4 { margin-top: .5rem; color: var(--blue-dark); }
.services p { color: var(--muted); }
.services img { max-width: 72px; }
.app { background: var(--blue-dark); color: var(--white); padding-top: 5rem; padding-bottom: 5rem; }
.app h2 { color: var(--white); }
.app .form-control { min-height: 52px; border: 0; border-radius: 2px; padding: .8rem 1rem; }
.app textarea.form-control { min-height: 110px; }
.app .btn-warning, .btn-warning { background: var(--gold); border-color: var(--gold); color: var(--blue-dark); font-weight: 700; }
.app .btn-secondary { background: var(--blue); border-color: var(--blue); }
.app .input-group-text { background: var(--white); color: var(--blue-dark); }
.btn-primary { background: var(--blue); border-color: var(--blue); font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background: var(--blue-dark); border-color: var(--blue-dark); }
.footer { border-top: 5px solid var(--gold); background: var(--blue-dark); color: #dceafa; padding: 4.5rem 0 1.25rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; padding-bottom: 3.5rem; }
.footer p { max-width: 300px; color: #b8cbe0; }
.footer-brand { margin-bottom: 1.2rem; }
.footer-brand img, .footer-brand .custom-logo { width: auto; max-width: 240px; max-height: 100px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.footer a { display: block; width: fit-content; margin: .6rem 0; color: var(--white); text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer address { margin: .8rem 0 1.15rem; font-style: normal; line-height: 1.8; }
.footer-phone { color: var(--gold) !important; font-size: 1.2rem; font-weight: 700; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.25rem; color: #9fb5ca; font-size: .8rem; }
@media (max-width: 767px) { .site-container, .hero .container { width: min(100% - 28px, 1160px); } .utility-bar__inner { display: block; text-align: center; } .utility-bar__inner span { display: none; } .site-header__main { min-height: 84px; gap: .75rem; } .site-brand img, .site-brand .custom-logo { max-width: 175px; max-height: 62px; } .header-trust { display: none; } .header-appointment { padding: .6rem .7rem; font-size: .74rem; text-align: center; } .site-nav__inner { display: flex; flex-wrap: wrap; justify-content: flex-end; } .navbar-toggler { display: block; } .navbar-collapse.collapse:not(.show) { display: none; } .navbar-collapse { display: block; flex-basis: 100%; width: 100%; margin-top: .35rem; border-top: 1px solid rgba(255,255,255,.2); } .navbar-nav { align-items: stretch; flex-direction: column; gap: 0; padding: .35rem 0 .65rem; } .nav-link { padding: .8rem .35rem; border-bottom: 1px solid rgba(255,255,255,.12); } .navbar-nav li:last-child .nav-link { border-bottom: 0; } .nav-link:hover, .nav-link:focus, .nav-link.active { padding-left: .7rem; background: rgba(255,255,255,.08); } .hero { min-height: 540px; background-position: 62% center; } .hero .container { padding: 4rem 0; } .hero h1 { font-size: clamp(2.4rem, 13vw, 4rem); } .hero p { font-size: 1rem; } .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; } .footer__bottom { display: block; } .footer__bottom span { display: block; margin-top: .4rem; } }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 1rem; }
.section-heading > p { max-width: 430px; margin: 0 0 .7rem; color: var(--muted); }
.service-card { min-height: 240px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); padding: 1.5rem; box-shadow: 0 8px 24px rgba(21,38,56,.05); transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21,38,56,.1); }
.service-card__icon { width: 62px; height: 62px; justify-content: center; border-radius: 50%; background: #e9f2fb; }
.service-card__icon img { max-width: 48px; max-height: 48px; }
.service-card__icon--text { color: var(--blue); font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; }
.service-card h4 { font-size: 1.15rem; }
.service-card p { margin: 0; font-size: .92rem; }
.button--blue { background: var(--blue); color: var(--white); }
.button--blue:hover, .button--blue:focus { background: var(--blue-dark); color: var(--white); }
.button--blue span { margin-left: .6rem; font-size: 1.1rem; }
.appointment-intro { max-width: 680px; margin-bottom: 2.5rem; }
.appointment-intro h2 { margin-bottom: .8rem; }
.appointment-intro > p:last-child { max-width: 570px; margin-bottom: 0; color: #c8d8e8; font-size: 1.05rem; }
.app form { max-width: 1000px; }
.app > .container { width: min(1160px, calc(100% - 40px)); margin-right: auto; margin-left: auto; }
.app .appointment-intro, .app form { width: min(100%, 1000px); margin-right: auto; margin-left: auto; }
.app .appointment-intro { max-width: 1000px; }
.form-section-label { margin: 1.75rem 0 0; color: var(--gold); font-family: 'Space Grotesk', sans-serif; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app label { display: block; margin-bottom: .35rem; color: #dceafa; font-size: .82rem; font-weight: 700; }
.app label span { color: var(--gold); }
.app .form-control { color: var(--ink); }
.app .form-control::placeholder { color: #74818d; opacity: 1; }
.app .row { margin-left: -.45rem; margin-right: -.45rem; }
.app .row > * { padding-left: .45rem; padding-right: .45rem; }
#form-message { margin-top: 1.25rem; }
.form-field-trap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }

/* Single service/page styles */
.page-featured-image { max-width: 720px; border-radius: 4px; overflow: hidden; box-shadow: 0 16px 36px rgba(21,38,56,.12); }
.page-featured-image img { width: 100%; max-height: 400px; object-fit: cover; display: block; }
.page-content { font-size: 1.05rem; line-height: 1.75; }
.page-content h2, .page-content h3, .page-content h4 { margin-top: 2rem; color: var(--blue-dark); }
.page-content h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.page-content h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
.page-content p { margin-bottom: 1.25rem; color: var(--ink); }
.page-content ul, .page-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.page-content li { margin-bottom: .5rem; }
.page-content img { max-width: 100%; height: auto; border-radius: 3px; }
.page-content blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--gold); background: var(--paper); font-style: italic; color: var(--muted); }
.page-content blockquote p:last-child { margin-bottom: 0; }
.page-content table { width: 100%; margin: 2rem 0; border-collapse: collapse; }
.page-content th, .page-content td { padding: .75rem 1rem; border: 1px solid var(--line); text-align: left; }
.page-content th { background: var(--paper); font-weight: 700; color: var(--blue-dark); }

/* Specials / Posts grid */
.specials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.special-card { border: 1px solid var(--line); border-radius: 4px; background: var(--white); overflow: hidden; box-shadow: 0 8px 24px rgba(21,38,56,.05); transition: transform .2s ease, box-shadow .2s ease; }
.special-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21,38,56,.1); }
.special-card__link { display: block; color: inherit; text-decoration: none; }
.special-card__image { aspect-ratio: 16/9; overflow: hidden; background: var(--paper); }
.special-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.special-card:hover .special-card__image img { transform: scale(1.03); }
.special-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color: var(--white); font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; }
.special-card__body { padding: 1.25rem; }
.special-card__title { margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.3; }
.special-card__excerpt { margin: 0 0 .75rem; color: var(--muted); font-size: .92rem; }
.special-card__cta { color: var(--blue); font-weight: 700; font-size: .9rem; }
.specials-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 1.1rem; padding: 3rem 0; }

@media (max-width: 767px) { .section-heading { display: block; } .section-heading > p { margin-top: 1rem; } .service-card { min-height: 0; } .app { padding-left: 0 !important; padding-right: 0 !important; } .app .container { width: min(100% - 28px, 1160px); } .specials-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .services .service-card:nth-child(n+5) { display: none !important; } }

.financing-feature { display: grid; grid-template-columns: minmax(280px, 390px) 1fr; align-items: center; gap: clamp(2rem, 7vw, 6rem); padding-top: 4.5rem; padding-bottom: 4.5rem; }
.financing-feature__image { display: grid; min-height: 250px; place-items: center; padding: 1.5rem; border-radius: 4px; background: rgba(255,255,255,.5); }
.financing-feature__image img { max-height: 230px; object-fit: contain; }
.financing-feature__copy { max-width: 650px; }
.financing-feature__copy h2 { margin: .35rem 0 1rem; font-size: clamp(2rem, 4vw, 3.4rem); }
.financing-feature__copy p { color: var(--blue-dark); }
.financing-feature__copy .financing-offer { margin: 0 0 1rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.financing-feature__copy small { display: block; margin-top: 1rem; color: #4f5e68; font-size: .75rem; }
.brand-section { padding: 5rem 0; background: var(--paper); }
.brand-heading { margin-bottom: 2.25rem; }
.brand-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .75rem; align-items: stretch; }
.brand-logo { display: grid; min-height: 100px; place-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 3px; background: var(--white); }
.brand-logo img { width: 100%; max-width: 125px; max-height: 58px; object-fit: contain; }
@media (max-width: 991px) { .brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .financing-feature { grid-template-columns: 1fr; gap: 2rem; padding-top: 3.5rem; padding-bottom: 3.5rem; } .financing-feature__image { min-height: 180px; } .financing-feature__image img { max-height: 160px; } .brand-section { padding: 3.5rem 0; } .brand-grid { grid-template-columns: repeat(2, 1fr); } .brand-logo { min-height: 88px; } }

.warranty-feature { display: grid; grid-template-columns: minmax(210px, 290px) 1fr; align-items: center; gap: clamp(2rem, 8vw, 7rem); padding-top: 4.5rem; padding-bottom: 4.5rem; }
.warranty-feature__badge { display: grid; place-items: center; }
.warranty-feature__badge a { display: block; padding: 1rem; border-radius: 50%; background: rgba(255,255,255,.1); }
.warranty-feature__badge img { max-height: 245px; object-fit: contain; }
.warranty-feature__copy { max-width: 650px; }
.warranty-feature__copy h2 { margin: .35rem 0 1rem; color: var(--white); font-size: clamp(2rem, 4vw, 3.4rem); }
.warranty-feature__copy p:not(.eyebrow) { max-width: 590px; color: #dceafa; font-size: 1.05rem; }
.warranty-feature__copy .button span, .reviews-heading .button span { margin-left: .6rem; font-size: 1.1rem; }
.reviews-section { padding: 5rem 0; background: var(--white); }
.reviews-heading { align-items: center; margin-bottom: 2.25rem; }
.reviews-heading h2 { margin: .35rem 0 0; font-size: clamp(2rem, 4vw, 3.3rem); }
.reviews-widget { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-top: 4px solid var(--gold); background: var(--paper); }
.reviews-widget .ti-widget { margin: 0 !important; }
@media (max-width: 767px) { .warranty-feature { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; text-align: center; } .warranty-feature__badge img { max-height: 180px; } .warranty-feature__copy { margin: 0 auto; } .reviews-section { padding: 3.5rem 0; } .reviews-heading { display: block; } .reviews-heading .button { margin-top: 1.25rem; } .reviews-widget { padding: .75rem; } }
.welcome-heading { align-items: center; }
.welcome-heading h2 { margin-bottom: 0; }
.welcome-heading > p { max-width: 380px; }
.welcome-image { position: relative; }
.welcome-image::after { content: ''; position: absolute; right: 1.25rem; bottom: -1.25rem; z-index: 0; width: 42%; height: 42%; border-right: 8px solid var(--gold); border-bottom: 8px solid var(--gold); pointer-events: none; }
.welcome-image img { position: relative; z-index: 1; width: 100%; border-radius: 3px; object-fit: cover; box-shadow: 0 16px 36px rgba(21,38,56,.12); }
.welcome-copy { max-width: 560px; }
.welcome-copy .lead { color: var(--muted); font-size: 1.05rem; }
.welcome-priority { margin: 1.5rem 0 1rem; color: var(--blue); font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: .02em; }
.welcome-proof { display: flex; align-items: center; gap: .85rem; margin: 1.5rem 0; padding: .9rem 1rem; border-left: 4px solid var(--gold); background: var(--paper); }
.welcome-proof strong { color: var(--blue); font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; white-space: nowrap; }
.welcome-proof span { color: var(--muted); font-size: .88rem; line-height: 1.3; }
.welcome-image__placeholder { display: grid; place-items: center; width: 100%; min-height: 280px; border-radius: 3px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color: var(--white); font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; box-shadow: 0 16px 36px rgba(21,38,56,.12); }
.welcome-image--icon img { object-fit: contain; max-height: 320px; box-shadow: none; }
.page-content-section { background: var(--white); }

/* Contact page */
.contact-info-section { background: var(--paper); }
.contact-details h2 { margin-bottom: 1.5rem; color: var(--blue-dark); }
.contact-item { margin-bottom: 1.5rem; }
.contact-item strong { display: block; margin-bottom: .35rem; color: var(--blue); font-family: 'Space Grotesk', sans-serif; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contact-item p { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.6; }
.contact-item a { color: var(--blue-dark); font-weight: 600; text-decoration: none; }
.contact-item a:hover { color: var(--blue); text-decoration: underline; }
.contact-map { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: 0 16px 36px rgba(21,38,56,.12); }
.contact-map iframe, .google-map-iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (max-width: 767px) { .welcome-heading { display: block; } .welcome-image::after { right: .5rem; bottom: -.5rem; border-width: 5px; } .welcome-copy { text-align: left; } .welcome-proof { align-items: flex-start; } .contact-map iframe, .google-map-iframe { height: 300px; } }