/* ============================================================
   site.css — Werkstatte site-specific styles
   ------------------------------------------------------------
   ALL custom CSS for this site lives in this one file.
   - Do NOT edit style.css / bootstrap.css / responsive.css:
     they are generated template files (sources in /scss).
   - Do NOT paste <style> blocks into the HTML pages.
   Every page loads this file after css/responsive.css, so
   rules here win over the template styles.
   ============================================================ */

/* ------------------------------------------------------------
   Component showcase (used on service-page_grenadier.php)
   The two-tone dark section from Victor's original mockup - a
   black block dropped into an otherwise light page, showing the
   real BMW-derived hardware inside the vehicle.
   ------------------------------------------------------------ */
.component-section {
	padding: 70px 0;
	background: #101010;
	color: #fff;
}
.component-section .section-title {
	color: #fff;
	text-align: center;
	margin-bottom: 12px;
	font-weight: 700;
}
.component-intro {
	max-width: 840px;
	margin: 0 auto 34px;
	color: #cfcfcf;
	text-align: center;
	font-size: 17px;
}
.component-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.component-card {
	background: #181818;
	border: 1px solid #313131;
	overflow: hidden;
	border-radius: 4px;
}
.component-card img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
	background: #0b0b0b;
}
.component-copy {
	padding: 20px;
}
.component-copy h3 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 20px;
}
.component-copy p {
	margin: 0;
	color: #bdbdbd;
	font-size: 15px;
}
@media (max-width: 800px) {
	.component-grid { grid-template-columns: 1fr; }
	.component-card img { height: auto; max-height: 320px; object-fit: contain; }
}

/* ------------------------------------------------------------
   Black structural surfaces (Victor's palette)
   His mockups use a consistent black family - #101010 sections,
   #1c1c1c bands, #292929 boxes, #111 footer. These overrides
   bring the template's leftover grey/blue surfaces in line.
   Content areas stay light: the two-tone IS the design.
   ------------------------------------------------------------ */
.menuHolder {
	background-color: #111 !important;      /* desktop nav bar (was grey #737172) */
}
.headerFixed .menuHolder {
	background-color: #111 !important;      /* sticky nav on scroll (was blue #0b4b8a) */
}
.navCollapse .dropdown-menu {
	background-color: #1c1c1c;              /* desktop dropdown (was blue #0b4b8a) */
}
.navCollapse .dropMenu .dropdown-item {
	color: #ddd;                            /* light links on the dark dropdown */
}
.navCollapse .dropMenu .dropdown-item:hover,
.navCollapse .dropMenu .dropdown-item:focus,
.navCollapse .dropMenu .dropdown-item:active {
	color: #fff;
	background-color: #292929;
}
.bg-greyBlue {
	background-color: #292929 !important;   /* CTA bands + boxes (was blue-grey #4175aa) */
}
.footerAside .contactHolder {
	background: rgba(0, 0, 0, 0.35);        /* call/address/hours strip (was navy overlay) */
}
#footer {
	background: #111;                       /* copyright bar, matches mockup footers */
}
#footer, #footer .txt, #footer a {
	color: #999;
}
#footer a:hover {
	color: #fff;
}

/* ------------------------------------------------------------
   All-black page treatment (Victor's request: "keep it all
   black - black looks so luxurious"). Applied via
   $bodyClass = 'pageDark' on the Grenadier / Range Rover pages.
   Content sections go dark; the service cards restyle to match
   the component showcase cards.
   ------------------------------------------------------------ */
body.pageDark,
.pageDark #pageWrapper {
	background: #101010;
}
.pageDark .brdCrmbHolder {
	background: #0b0b0b;
}
.pageDark .breadcrumb-item a {
	color: #999;
}
.pageDark .breadcrumb-item.active {
	color: #fff;
}
.pageDark .breadcrumb-item + .breadcrumb-item::before {
	color: #666;
}
.pageDark .wsisSec h1,
.pageDark .wsisSec h2,
.pageDark .wsisSec h3,
.pageDark .wsisSec .headingI,
.pageDark .wsisSec .headingIX {
	color: #fff;
}
.pageDark .wsisSec p,
.pageDark .wsisSec li {
	color: #cfcfcf;
}
.pageDark .sBlock {
	background: #181818;
	border: 1px solid #313131;
	border-radius: 4px;
	padding: 20px;
}
.pageDark .sBlock h2 a {
	color: #fff;
}
.pageDark .sBlock p {
	color: #bdbdbd;
}
.pageDark .cta-row {
	color: #8a8a8a;
}
.pageDark .component-section {
	border-top: 1px solid #292929;
	border-bottom: 1px solid #292929;
}
.pageDark .darkBand {
	margin-bottom: 0;
}

/* --- slim book-appointment strip between sections --- */
.ctaStrip {
	padding: 26px 0;
	background: #0b0b0b;
	border-top: 1px solid #292929;
	border-bottom: 1px solid #292929;
}

/* ------------------------------------------------------------
   Dark band (Grenadier / Range Rover pages)
   The second dark stripe from Victor's two-tone mockups: a
   #1c1c1c section with a #292929 inset box.
   ------------------------------------------------------------ */
.darkBand {
	padding: 60px 0;
	margin-bottom: 50px;
	background: #1c1c1c;
	color: #d2d2d2;
}
.darkBand h2,
.darkBand h3 {
	color: #fff;
}
.darkBand p,
.darkBand li {
	color: #d2d2d2;
}
.darkBox {
	background: #292929;
}
.darkBox strong {
	color: #fff;
}

/* ------------------------------------------------------------
   Service page cards (service-page_*.html)
   Keeps the Book/Quote row pinned to the bottom of each card.
   ------------------------------------------------------------ */
.sBlock {
	display: flex;
	flex-direction: column;
}
.cta-row {
	margin-top: auto;
	white-space: nowrap;
}
.cta-row .readMore {
	display: inline;
}

/* ------------------------------------------------------------
   Mobile / tablet header (below the desktop lg breakpoint)
   ------------------------------------------------------------
   One fixed compact bar: logo left; phone + menu buttons right
   (plus the appointment button on tablet). The old behavior —
   a floating hamburger positioned with margin hacks, and the
   jQuery stickyScrollBlock bar that appeared on scroll — is
   disabled below; the bar simply stays fixed and never changes.
   Desktop (>= 992px) is untouched.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

	/* --- the fixed bar --- */
	#header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1030;
		background: #050505;
		border-bottom: 1px solid #262626;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	}
	body {
		padding-top: 56px; /* = bar height: 8 + 40 + 8 */
	}
	#header .midBar {
		padding: 8px 0 !important;
	}
	#header .midBar .row {
		align-items: center;
	}
	#header .logo {
		display: flex;
		align-items: center;
	}
	#header .logo img {
		height: 40px !important;
		width: auto !important;
		max-width: none !important;
	}

	/* --- right side: phone + hamburger as matching 42px buttons --- */
	#header .contactList {
		margin: 0 !important;
	}
	#header .contactList > li {
		margin: 0 !important;
	}
	#header .contactList .ico {
		margin: 0 !important;
		padding: 0 !important;
	}
	#header .contactList .ico .icn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		font-size: 16px;
		color: #111;
		background: #C9A35B; /* theme gold, same as the CTA buttons */
		border: 0;
		border-radius: 6px;
	}
	.midbar-toggler {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		margin-left: 8px;
		line-height: 0;
		background: transparent;
		border: 1px solid #4a4a4a;
		border-radius: 6px;
		cursor: pointer;
		flex-shrink: 0;
	}
	.midbar-toggler:focus {
		outline: none;
		box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.35);
	}
	.midbar-toggler .navbar-toggler-icon {
		display: block;
		width: 20px;
		height: 20px;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C9A35B' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-size: contain;
	}

	/* --- tablet-only appointment button: a normal inline button,
	       not the old full-width absolute strip --- */
	#header .midBar .btnHolder {
		position: static;
		margin-left: 8px;
	}
	#header .midBar .btnHolder .btn {
		min-width: 0;
		border-radius: 6px;
		padding: 12px 14px;
		font-size: 12px;
	}

	/* --- retire the old floating toggler and sticky-scroll bar --- */
	.navHolder .toggleBar {
		display: none !important;
	}
	.navHolder {
		margin: 0 !important;
	}
	.sticky-wrap-menuHolder {
		height: auto !important;
		margin: 0 !important;
	}
	.menuHolder,
	.headerFixed .menuHolder {
		position: static !important;
		top: auto !important;
		padding: 0 !important;
		background: #050505 !important;
		box-shadow: none !important;
	}
	.menuHolder .menuLogo,
	.headerFixed .menuLogo {
		display: none !important;
	}

	/* --- the open menu: dark full-width panel under the bar --- */
	.navCollapse {
		margin-top: 0 !important;
		background: #1c1c1c !important;
		max-height: calc(100vh - 56px);
		overflow-y: auto;
	}
	.navCollapse .navbar-nav {
		margin: 0;
		padding: 6px 0;
	}
	.navCollapse .nav-item .nav-link {
		color: #fff;
		padding: 12px 22px;
	}
	.navCollapse .nav-item .nav-link:before {
		display: none;
	}
	.navCollapse .dropdown-menu {
		position: static;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #292929;
	}
	.navCollapse .dropMenu .dropdown-item {
		color: #cfcfcf;
		background: transparent;
		padding: 11px 34px;
	}
	.navCollapse .dropMenu .dropdown-item:hover,
	.navCollapse .dropMenu .dropdown-item:focus {
		color: #fff;
		background: #383838;
	}
}

/* ============================================================
   BLACK & GOLD SITE THEME (Victor's full-site makeover mockup)
   ------------------------------------------------------------
   The whole site goes black-on-gold luxury: near-black surfaces,
   champagne-gold #C9A35B accents, white condensed (Oswald)
   headings, gold CTA buttons with black text. This section is
   appended LAST so it wins over both the generated template
   styles and the older rules above.
   Palette: page #0b0b0b - header #050505 - cards #151515 -
   borders #2a2a2a - gold #C9A35B (hover #DCBC7E).
   ============================================================ */

/* --- global surfaces & text --- */
body,
#pageWrapper {
	background: #0b0b0b;
	color: #c7c7c7;
}
main { background: #0b0b0b; }
h1, h2, h3, h4, h5, h6,
.heading, .headingI, .headingIX, .headingXI, .headingXII {
	font-family: 'Oswald', 'Muli', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2; /* template px line-heights are too tight for Oswald */
	color: #fff;
}
p, li { color: #c7c7c7; }
a { color: #C9A35B; }
a:hover { color: #DCBC7E; }
.text-secondary { color: #a9a9a9 !important; }
.bg-white { background-color: #050505 !important; }

/* --- section headers get the mockup's gold eyebrow rule --- */
.header.ltrSpce h2, .header.ltrSpce h3, .header.ltrSpce .h2 {
	color: #fff;
}

/* --- desktop header: black bar, gold logo --- */
#header { background: #050505 !important; }
#header .contactList .icn {
	background: #C9A35B !important;
	color: #111 !important;
	border-color: #C9A35B !important;
}
#header .time .icn {
	background: transparent !important;
	color: #C9A35B !important;
}
#header .timeList li time,
#header .contactList .text { color: #9a9a9a; }
#header .tell { color: #fff; }
#header .tell:hover { color: #DCBC7E; }
.menuHolder,
.headerFixed .menuHolder { background-color: #050505 !important; }
.navCollapse .nav-item .nav-link { color: #fff; }
.navCollapse .nav-item .nav-link:hover,
.navCollapse .nav-item .nav-link:focus,
.navCollapse .nav-item.active .nav-link { color: #C9A35B; }
.navCollapse .nav-item .nav-link:before { background: #C9A35B !important; }

/* --- buttons: everything becomes the gold system.
       Solid gold + black text for primary actions; the outline
       variant (thin gold border on black) for secondary ones. --- */
.btn-warning, .btnTheme, .btn-primary,
.btn-warning:hover, .btnTheme:hover, .btn-primary:hover,
.btn-warning:focus, .btnTheme:focus, .btn-primary:focus,
.btn-warning:active, .btnTheme:active, .btn-primary:active,
.btnGold {
	background-color: #C9A35B !important;
	background-image: none !important;
	border: 1px solid #C9A35B !important;
	color: #111 !important;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: none !important;
}
.btn-warning:hover, .btnTheme:hover, .btn-primary:hover, .btnGold:hover {
	background-color: #DCBC7E !important;
	border-color: #DCBC7E !important;
	color: #000 !important;
}
.btn-light, .btn-outline-primary, .btn-outline-light, .btn-outline-secondary,
.btnGoldOutline {
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid #C9A35B !important;
	color: #C9A35B !important;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: none !important;
}
.btn-light:hover, .btn-outline-primary:hover, .btn-outline-light:hover,
.btn-outline-secondary:hover, .btnGoldOutline:hover {
	background-color: #C9A35B !important;
	color: #111 !important;
}
.btn .icn { margin-left: 6px; }
.readMore { color: #C9A35B; }
.readMore:hover { color: #DCBC7E; }

/* --- homepage hero (Victor's mockup layout) --- */
.heroDark:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5,5,5,0.82) 0%, rgba(5,5,5,0.55) 45%, rgba(11,11,11,0.88) 100%);
}
.heroDark .alignCenter { position: relative; z-index: 2; }
.heroEyebrow {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	color: #C9A35B;
	margin-bottom: 10px;
}
.heroTitle {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: clamp(52px, 8.5vw, 110px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	color: #fff;
	margin-bottom: 18px;
}
.heroSub {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: clamp(24px, 3.4vw, 42px);
	line-height: 1.15;
	text-transform: uppercase;
	margin-bottom: 0;
}
.heroSub .goldLine { display: block; color: #C9A35B; }
.heroSub .whiteLine { display: block; color: #fff; }
.heroRule {
	width: 64px;
	margin: 26px 0;
	border: 0;
	border-top: 2px solid #C9A35B;
}
.text-center .heroRule, .text-center.caption .heroRule { margin-left: auto; margin-right: auto; }
@media (min-width: 1440px) {
	.text-xxl-left .heroRule { margin-left: 0; margin-right: 0; }
}
.heroTag {
	max-width: 520px;
	font-size: 17px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #d9d9d9;
	margin-bottom: 34px;
}
.text-center .heroTag { margin-left: auto; margin-right: auto; }
@media (min-width: 1440px) {
	.text-xxl-left .heroTag { margin-left: 0; }
}
.heroBtns .btn { margin: 0 10px 12px 0; padding: 16px 30px; font-size: 15px; }

/* --- homepage tiles (Directions / BMW / Rolls / MINI) --- */
.hlpSec { background: #0b0b0b; }
.hlpBlock {
	background: #151515 !important;
	border: 1px solid #2a2a2a;
}
.hlpBlock + .hlpBlock { border-left: 0; }
.hlpBlock h2 { color: #fff; }
.hlpBlock p { color: #a9a9a9; }

/* --- pricing cards --- */
.planList {
	background: #151515;
	border: 1px solid #2a2a2a;
}
.planList header h4 { color: #fff; }
.planList .priceHolder {
	background: #101010;
	border-top: 1px solid #2a2a2a;
	border-bottom: 1px solid #2a2a2a;
	color: #C9A35B;
}
.planList .priceHolder .price,
.planList .priceHolder sup,
.planList .priceHolder p { color: #C9A35B !important; }
.planList .typeList li { color: #a9a9a9; }
.planList.active { background: #1a1a1a; }

/* --- reviews band --- */
.customerSec, .cutomerFeedback { background: #0b0b0b !important; }
.customerSec .header a { color: #C9A35B; }

/* --- request-a-callback band + forms --- */
.rqstSrvic { border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
.bg-greyBlue { background-color: #151515 !important; }
.rqstSrvic .txtHolder h4:after { background: #C9A35B; }
.requestForm.bg-white { background: #151515 !important; border: 1px solid #2a2a2a; }
.requestForm label, .requestForm .text-gray { color: #a9a9a9 !important; }
.form-control, .custom-select {
	background-color: #0f0f0f;
	border: 1px solid #3a3a3a;
	color: #eee;
}
.form-control:focus, .custom-select:focus {
	background-color: #0f0f0f;
	border-color: #C9A35B;
	color: #fff;
	box-shadow: 0 0 0 2px rgba(201, 163, 91, 0.25);
}
.form-control::placeholder { color: #8a8a8a; }

/* --- inner-page banners & breadcrumbs --- */
.bannerInr.overlayII:after, .overlay:after { background: rgba(5, 5, 5, 0.6); }
.brdCrmbHolder { background: #050505; }
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: #999; }
.breadcrumb-item a:hover { color: #C9A35B; }
.breadcrumb-item.active { color: #fff; }
.breadcrumb-item + .breadcrumb-item::before { color: #666; }

/* --- generic content sections (about, service pages, posts) --- */
.wsisSec, .plnSec, .gallerySec, .testimonialSec, .contactSec {
	background: #0b0b0b;
}
.wsisSec h1, .wsisSec h2, .wsisSec h3,
.wsisSec .headingI, .wsisSec .headingIX { color: #fff; }
.wsisSec p, .wsisSec li { color: #c7c7c7; }
.sBlock {
	background: #151515;
	border: 1px solid #2a2a2a;
	border-radius: 4px;
	padding: 20px;
}
.sBlock h2 a, .sBlock h2 { color: #fff; }
.sBlock .headingIX a { color: #fff; }
.sBlock .headingIX a:hover, .sBlock .headingIX a:focus { color: #C9A35B; }
.sBlock p { color: #a9a9a9; }
.component-card, .pageDark .sBlock { background: #151515; border-color: #2a2a2a; }
.darkBand { background: #101010; }
.darkBox { background: #1a1a1a; border: 1px solid #2a2a2a; }
.ctaStrip { background: #050505; border-color: #2a2a2a; }

/* --- footer --- */
.footerAside { background-color: #080808 !important; }
.footerAside .contactHolder {
	background: #0f0f0f;
	border-top: 1px solid #2a2a2a;
	border-bottom: 1px solid #2a2a2a;
}
.footerAside .tell { color: #C9A35B; }
.footerAside .tell:hover { color: #DCBC7E; }
.footerAside h6 {
	color: #C9A35B;
	letter-spacing: 0.12em;
}
.footerAside p, .footerAside li, .footerAside time { color: #9a9a9a; }
.fLink li a { color: #9a9a9a; }
.fLink li a:hover { color: #C9A35B; }
.socialFNetwork li a { color: #C9A35B; }
.socialFNetwork li a:hover { color: #DCBC7E; }
.footerAside .bdrTop { border-color: #2a2a2a !important; }
#footer { background: #050505; border-top: 1px solid #1c1c1c; }
#footer, #footer .txt, #footer a { color: #777; }
#footer a:hover { color: #C9A35B; }

/* --- appointment modal --- */
.appointPopup .modal-content { background: #121212; border: 1px solid #2a2a2a; }
.appointPopup .modal-header {
	background: #050505;
	border-bottom: 1px solid #2a2a2a;
}
.appointPopup .modal-title { color: #C9A35B; }
.appointPopup .formGroup { border-color: #2a2a2a !important; }
.appointPopup h3 { color: #fff; }
.appointPopup label, .appointPopup .form-check-label, .appointPopup p { color: #a9a9a9; }
.appointPopup .close {
	background: #C9A35B;
	color: #111;
	opacity: 1;
}

/* --- image captions (about page) --- */
.wsisSec .caption { color: #a9a9a9; }

/* --- odds & ends --- */
#back-top { background: #C9A35B; color: #111; }
.loader-holder { background: #0b0b0b; }
::selection { background: #C9A35B; color: #111; }

/* the dark mobile menu panel from the older section, re-tinted */
@media (max-width: 991.98px) {
	.navCollapse { background: #101010 !important; border-top: 1px solid #2a2a2a; }
	.navCollapse .dropdown-menu { background: #181818; }
	.navCollapse .dropMenu .dropdown-item:hover,
	.navCollapse .dropMenu .dropdown-item:focus { color: #C9A35B; background: #202020; }
	body { background: #0b0b0b; }
}

/* ---- spam honeypot ----
   Every mail form carries a "website" field inside .hpWrap. It is moved
   off-screen (not display:none - smarter bots skip those), so humans never
   see or tab into it; bots auto-fill it and the mail scripts drop those
   submissions silently. */
.hpWrap { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; }