/* ==========================================================================
   Savant Systems — brand theme layer
   Loaded AFTER assets/css/savantsystems.css. Do not edit savantsystems.css
   directly — all site-specific look-and-feel changes live here so template
   updates stay possible.
   ========================================================================== */

:root {
	--savant-ink: #0d0d0d;
	--savant-charcoal: #141414;
	--savant-line: rgba(255, 255, 255, 0.12);
	--savant-brass: #b08d57;
	--savant-brass-light: #cba873;
}

body { -webkit-font-smoothing: antialiased; }

/* ==========================================================================
   Eyebrow labels + section titles
   ========================================================================== */

.eyebrow {
	display: block;
	margin-bottom: 14px;
	color: var(--savant-brass);
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.section-title {
	margin-bottom: 40px;
}

.section-subtitle {
	max-width: 580px;
	margin: 16px auto 0;
	color: #7c7c7c;
	font-size: 14px;
	line-height: 26px;
}

.solutions-section .section-subtitle,
.portfolio-section .section-subtitle,
.testimonials-section .section-subtitle { color: #a3a3a3; }

/* ==========================================================================
   Header + navigation
   ========================================================================== */

.sf-menu > li > a,
.sf-menu > li.dropdown > a { letter-spacing: 2px; }

.sf-menu > li.current > a,
.sf-menu li a:hover,
.sf-menu li.sfHover a:hover { color: var(--savant-brass-light) !important; }

/* ==========================================================================
   Buttons — brass accent CTA
   ========================================================================== */

.btn-accent {
	border: 2px solid var(--savant-brass) !important;
	background-color: transparent !important;
	color: var(--savant-ink) !important;
}

.btn-accent:hover {
	background-color: var(--savant-brass) !important;
	border-color: var(--savant-brass) !important;
	color: #0d0d0d !important;
}

/* On dark backgrounds (hero slider, dark CTA bands) the resting state needs light text instead */
.main-slider .btn-accent,
.fullwidth-section .btn-accent {
	color: #fff !important;
}

/* ==========================================================================
   Hero slider
   ========================================================================== */

.main-slider__slides > li { position: relative; }

.main-slider__slides > li:before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.6) 100%);
	z-index: 1;
}

.main-slider-slide__content { position: relative; z-index: 2; }

.main-slider-slide__content-wrap .hero-kicker {
	display: block;
	margin-bottom: 18px;
	color: var(--savant-brass-light);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 5px;
	text-transform: uppercase;
}

/* ==========================================================================
   Trust strip (credibility bar under the hero)
   ========================================================================== */

.trust-strip {
	background-color: var(--savant-ink);
	padding: 30px 0;
}

.trust-strip ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.trust-strip li {
	padding: 6px 34px;
	color: #cfcfcf;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-right: 1px solid var(--savant-line);
}

.trust-strip li:last-child { border-right: none; }

.trust-strip li strong {
	display: block;
	margin-bottom: 6px;
	color: #fff;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 24px;
	letter-spacing: 1px;
	text-transform: none;
}

@media (max-width: 767px) {
	.trust-strip li { border-right: none; padding: 12px 20px; }
}

/* ==========================================================================
   Dark section banding (Solutions / Portfolio / Testimonials)
   ========================================================================== */

.solutions-section,
.portfolio-section,
.testimonials-section {
	padding: 100px 0 70px;
	background-color: var(--savant-charcoal);
}

.solutions-section h4,
.portfolio-section h4,
.testimonials-section h4 { color: #fff; }

/* Icon boxes on dark background */
.solutions-section .icon-box-4 {
	border-color: var(--savant-line);
}

.solutions-section .icon-box-4 h5,
.solutions-section .icon-box-4 h5 a { color: #fff; }

.solutions-section .icon-box-4 > i { color: var(--savant-brass); }

.solutions-section .icon-box-4 .icon-box-content p { color: #b7b7b7; }

.solutions-section .icon-box-4:hover {
	background-color: var(--savant-brass);
	border-color: var(--savant-brass);
}

.solutions-section .icon-box-4:hover > i,
.solutions-section .icon-box-4:hover h5,
.solutions-section .icon-box-4:hover h5 a,
.solutions-section .icon-box-4:hover .icon-box-content p { color: #0d0d0d; }

/* Testimonials on dark background */
.testimonials-section .testimonial blockquote p { color: #d6d6d6; }
.testimonials-section .testimonial h4 { color: var(--savant-brass-light); }
.testimonials-section .testimonial blockquote:before { color: var(--savant-brass); }

/* Portfolio grid on dark background */
.portfolio-section .portfolio-item-description h4 a { color: #fff; }
.portfolio-section .portfolio-item-description p { color: #9a9a9a; }

/* Portfolio detail lines on light background (dedicated portfolio page) */
.portfolio-item-location {
	margin: 6px 0 4px;
	color: #9a9a9a;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.portfolio-item-desc {
	margin: 0;
	color: #666;
	font-size: 14px;
	line-height: 22px;
}

/* ==========================================================================
   Portfolio page — extra breathing room + rounded thumbnails for a more
   editorial, less template-y feel
   ========================================================================== */

/*
 * The base template lays out .portfolio-grid with floated, fixed-width
 * items — fine when every item is the same height, but our captions
 * (name / province / description) vary in length, so a taller item breaks
 * the float flow and knocks later items out of alignment. Grid keeps every
 * row aligned regardless of caption length.
 */
.portfolio-grid--luxe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin: 0;
}

.portfolio-grid--luxe .item {
	float: none;
	width: auto;
	padding: 0;
}

@media (min-width: 768px) and (max-width: 991px) {
	.portfolio-grid--luxe { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.portfolio-grid--luxe { grid-template-columns: 1fr; }
}

/* The base template assumes portfolio captions always sit over a dark,
   semi-transparent overlay image — true on the homepage grid, not true
   here where captions sit directly on the white page background. */
.portfolio-grid--luxe .portfolio-item-description h4 { color: var(--savant-ink); }

.portfolio-grid--luxe .portfolio-item-preview {
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.portfolio-grid--luxe .portfolio-item-preview img { border-radius: 10px; }

.portfolio-grid--luxe .portfolio-item:hover .portfolio-item-preview {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36);
}

/* The base template shows a dark tint box + magnifying-glass icon on hover.
   We want a plain, quiet thumbnail instead — keep the click target (it still
   opens the lightbox) but drop the visible box/icon entirely. */
.portfolio-grid--luxe .portfolio-item-overlay {
	margin: 0;
	background: transparent;
	opacity: 1;
	transform: none;
}

.portfolio-grid--luxe .portfolio-item-overlay-actions,
.portfolio-grid--luxe .portfolio-item:hover .portfolio-item-overlay-actions {
	top: 0;
	height: 100%;
	opacity: 1;
}

.portfolio-grid--luxe .portfolio-item-overlay-actions .portfolio-item-zoom {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	transform: none;
}

.portfolio-grid--luxe .portfolio-item-overlay-actions .portfolio-item-zoom i {
	display: none;
}

/* Black-and-white thumbnail crossfades to a color version on hover, for
   properties that have a matching "-0" color photo of the same shot. */
.portfolio-item-preview-color {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.portfolio-item:hover .portfolio-item-preview-color { opacity: 1; }

/* ==========================================================================
   Who We Serve
   ========================================================================== */

.who-we-serve-section {
	padding: 100px 0 90px;
	background-color: var(--savant-charcoal);
}

.who-we-serve-section h4 { color: #fff; }

.segment-card {
	height: 100%;
	padding: 40px 30px;
	border: 1px solid var(--savant-line);
	transition: border-color 0.3s ease;
}

.segment-card:hover { border-color: var(--savant-brass); }

.segment-index {
	display: block;
	margin-bottom: 18px;
	color: var(--savant-brass);
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
}

.segment-card h5 {
	margin-bottom: 14px;
	color: #fff;
	font-weight: 700;
}

.segment-card p { color: #b7b7b7; }

/* ==========================================================================
   Products / brand-partner strip
   ========================================================================== */

.products-section { padding: 80px 0 90px; background-color: #fff; }

.clients-slider img {
	max-height: 60px;
	width: auto;
	margin: 0 auto;
	filter: grayscale(100%);
	opacity: 0.55;
	transition: all 0.3s ease;
}

.clients-slider img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* ==========================================================================
   Page header (inner-page hero banners)
   ========================================================================== */

#page-header:before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 100%);
}

#page-header .eyebrow { color: var(--savant-brass-light); }

/* ==========================================================================
   Forms — quiet, editorial inputs
   ========================================================================== */

#contact-form input[type="text"],
#contact-form textarea {
	border: none;
	border-bottom: 1px solid #d8d8d8;
	border-radius: 0;
	padding-left: 0;
	background: transparent;
}

#contact-form input[type="text"]:focus,
#contact-form textarea:focus { border-color: var(--savant-brass); }

/* ==========================================================================
   Footer polish
   ========================================================================== */

#footer-top { border-top: 3px solid var(--savant-brass); }

#footer-top-widget-area-2 li,
#footer-top-widget-area-3 li { color: #cfcfcf; }

#footer-bottom .social-icon {
	transition: color 0.3s ease;
}

#footer-bottom .social-icon:hover { color: var(--savant-brass-light) !important; }