/*
Theme Name: Sverkers
Theme URI: https://sverkers.se
Description: Child theme for Sverkers Entreprenad. Holds the design system, page styling and interaction layer on top of Themify Ultra.
Author: Sverkers Entreprenad
Template: themify-ultra
Version: 1.0.0
Text Domain: sverkers
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* -- Colour ------------------------------------------------------- */
	--s-ink:          #211e1b;
	--s-ink-soft:     #4a423b;
	--s-muted:        #6f655c;
	--s-rust:         #7b260d;
	--s-rust-deep:    #5c1c09;
	--s-rust-tint:    #f6ece7;
	--s-slate:        #4f6d7a;
	--s-slate-deep:   #3a525c;
	--s-cream:        #fcf7f2;
	--s-sand:         #f3ebe2;
	--s-white:        #ffffff;
	--s-line:         rgba(33, 30, 27, .13);
	--s-line-soft:    rgba(33, 30, 27, .07);

	/* Dark surface used by CTA bands and the footer */
	--s-dark:         #23201c;
	--s-dark-soft:    #2e2a25;

	/* -- Type --------------------------------------------------------- */
	--s-font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
	--s-font-body:    "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

	--s-fs-hero:      clamp(2.5rem, 1.35rem + 4.6vw, 5rem);
	--s-fs-h1:        clamp(2.15rem, 1.5rem + 2.7vw, 3.6rem);
	--s-fs-h2:        clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
	--s-fs-h3:        clamp(1.2rem, 1.09rem + .5vw, 1.5rem);
	--s-fs-lead:      clamp(1.075rem, 1.01rem + .32vw, 1.3rem);
	--s-fs-body:      1.0625rem;
	--s-fs-sm:        .9375rem;
	--s-fs-xs:        .8125rem;

	--s-lh-tight:     1.06;
	--s-lh-snug:      1.2;
	--s-lh-body:      1.68;

	--s-track-label:  .14em;

	/* -- Space -------------------------------------------------------- */
	--s-1:  .25rem;
	--s-2:  .5rem;
	--s-3:  .75rem;
	--s-4:  1rem;
	--s-5:  1.5rem;
	--s-6:  2rem;
	--s-7:  2.5rem;
	--s-8:  3rem;
	--s-9:  4rem;
	--s-10: 5rem;

	--s-section:      clamp(3.75rem, 2rem + 7vw, 7rem);
	--s-section-tight: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);
	--s-gutter:       clamp(1.25rem, .6rem + 2.6vw, 3rem);

	/* -- Shape -------------------------------------------------------- */
	--s-radius:       14px;
	--s-radius-sm:    8px;
	--s-radius-lg:    22px;
	--s-radius-pill:  999px;

	--s-shadow-sm:    0 1px 2px rgba(33, 30, 27, .05), 0 2px 8px rgba(33, 30, 27, .04);
	--s-shadow:       0 2px 4px rgba(33, 30, 27, .05), 0 12px 32px -8px rgba(33, 30, 27, .13);
	--s-shadow-lg:    0 4px 8px rgba(33, 30, 27, .06), 0 28px 60px -16px rgba(33, 30, 27, .22);

	/* -- Motion ------------------------------------------------------- */
	--s-ease:         cubic-bezier(.22, .61, .36, 1);
	--s-ease-out:     cubic-bezier(.16, 1, .3, 1);
	--s-dur:          .45s;

	/* -- Layout ------------------------------------------------------- */
	--s-maxw:         1360px;
	--s-maxw-wide:    1500px;
	--s-maxw-text:    68ch;
	--s-header-h:     80px;

	/* Themify accent overrides */
	--theme_accent:       #7b260d;
	--theme_accent_hover: #5c1c09;
}

@media (max-width: 1250px) {
	:root { --s-header-h: 68px; }
}

/* The WP admin bar is fixed above everything; the sticky header has to start
   below it rather than underneath. */
body.admin-bar { --s-adminbar: 32px; }

@media screen and (max-width: 782px) {
	/* At this width WP switches the bar to 46px and lets it scroll away, so
	   the header only needs the offset while the page is at the top. */
	body.admin-bar { --s-adminbar: 46px; }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

body {
	background-color: var(--s-cream);
	font-family: var(--s-font-body);
	font-size: var(--s-fs-body);
	line-height: var(--s-lh-body);
	color: var(--s-ink-soft);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.tf_scrollbar { scrollbar-gutter: stable; }

h1, h2, h3, h4, h5, h6,
.module-title,
.fancy-heading .heading {
	font-family: var(--s-font-display);
	color: var(--s-ink);
	letter-spacing: -.017em;
	text-wrap: balance;
}

h1 { font-size: var(--s-fs-h1); font-weight: 800; line-height: var(--s-lh-tight); }
h2 { font-size: var(--s-fs-h2); font-weight: 800; line-height: var(--s-lh-snug); }
h3 { font-size: var(--s-fs-h3); font-weight: 700; line-height: 1.28; letter-spacing: -.01em; }
h4 { font-size: 1.125rem;      font-weight: 700; line-height: 1.35; letter-spacing: -.005em; }

p { text-wrap: pretty; }

a {
	color: var(--s-rust);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color .22s var(--s-ease);
}

a:hover { color: var(--s-rust-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--s-rust);
	outline-offset: 3px;
	border-radius: 3px;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--s-rust); color: #fff; }

/* Themify strips the page title itself; make sure nothing reserves space. */
#content { padding-top: 0; padding-bottom: 0; }
.page .post-title { display: none; }

/* Themify's reset leaves these content-box; every component below assumes
   border-box, so width:100% + padding stays inside its container. */
.s-btn, .s-card, .s-card__body, .s-formcard, .s-filter, .s-anchor,
.s-trust__item, .s-step, .s-split__body, .s-faq__q, .s-faq__a,
.s-hero > .row_inner, .s-cta > .row_inner, .s-footer__inner,
.s-gallery__item, .s-showcase__item, .s-contact__icon {
	box-sizing: border-box;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

/* Ultra's page width drives more than it looks. Its `fullwidth-rows` script
   pulls every full-width row out to the viewport with negative margins, then
   pads it back by (viewport - .pagewidth) / 2 so row content re-aligns with the
   theme's grid — and it writes that as a late <style> element at higher
   specificity than anything here. Rather than fight the injected rule, widen
   the measurement it is based on: one declaration and the theme's own maths
   lands the content where the design wants it. */
.pagewidth { width: var(--s-maxw); }

/* The header is deliberately wider than the content column. */
#header { width: 100%; }

.themify_builder .module_row.s-section > .row_inner,
.themify_builder .module_row.s-section-tight > .row_inner,
.themify_builder .module_row.s-flush > .row_inner {
	max-width: var(--s-maxw);
	margin-inline: auto;
	padding-inline: var(--s-gutter);
	width: 100%;
	box-sizing: border-box;
}

.themify_builder .module_row.s-section     { padding-block: var(--s-section); }
.themify_builder .module_row.s-section-tight { padding-block: var(--s-section-tight); }
.themify_builder .module_row.s-flush       { padding-block: 0; }

.themify_builder .module_row.s-wide > .row_inner { max-width: var(--s-maxw-wide); }

/* Surfaces */
.module_row.s-bg-cream { background-color: var(--s-cream); }
.module_row.s-bg-sand  { background-color: var(--s-sand); }
.module_row.s-bg-white { background-color: var(--s-white); }

.module_row.s-bg-dark,
.module_row.s-bg-dark h1,
.module_row.s-bg-dark h2,
.module_row.s-bg-dark h3,
.module_row.s-bg-dark h4 { color: var(--s-white); }

.module_row.s-bg-dark { background-color: var(--s-dark); color: rgba(255, 255, 255, .78); }
.module_row.s-bg-dark a:not(.s-btn) { color: #fff; }

/* Hairline separator between two same-coloured sections */
.module_row.s-divide-top { border-top: 1px solid var(--s-line-soft); }

/* ==========================================================================
   4. TYPE HELPERS
   ========================================================================== */

/* Eyebrow: small rust label with a leading rule — the repeating section motif */
.s-eyebrow,
.s-eyebrow p {
	font-family: var(--s-font-body);
	font-size: var(--s-fs-xs);
	font-weight: 700;
	letter-spacing: var(--s-track-label);
	text-transform: uppercase;
	color: var(--s-rust);
	margin: 0 0 var(--s-4);
	display: flex;
	align-items: center;
	gap: .7rem;
	line-height: 1.4;
}

.s-eyebrow p { margin: 0; }

.s-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--s-rust);
	flex: none;
	border-radius: 2px;
}

.s-bg-dark .s-eyebrow,
.s-bg-dark .s-eyebrow p { color: #d4a08c; }
.s-bg-dark .s-eyebrow::before { background: #d4a08c; }

/* Centred variant */
.s-text-center .s-eyebrow { justify-content: center; }

/* Lead paragraph */
.s-lead,
.s-lead p {
	font-size: var(--s-fs-lead);
	line-height: 1.6;
	color: var(--s-ink-soft);
}

.s-bg-dark .s-lead p { color: rgba(255, 255, 255, .8); }

/* Constrain measure for readability */
.s-measure { max-width: var(--s-maxw-text); }

/* Both forms matter: .s-measure is sometimes a child of the centred block and
   sometimes sits on the centred block itself. */
.s-text-center .s-measure,
.s-text-center.s-measure { margin-inline: auto; }
.s-text-center { text-align: center; }

/* Section heading block spacing */
.s-heading h2 { margin: 0 0 var(--s-4); }
.s-heading > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.s-btn,
.themify_builder .s-btn a,
.s-btn-wrap .module-buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	font-family: var(--s-font-body);
	font-size: var(--s-fs-sm);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1;
	padding: 1.0625rem 1.85rem;
	border-radius: var(--s-radius-pill);
	border: 1.5px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s var(--s-ease), color .25s var(--s-ease),
	            border-color .25s var(--s-ease), transform .25s var(--s-ease),
	            box-shadow .25s var(--s-ease);
	will-change: transform;
}

/* Primary */
.s-btn--primary,
.s-btn-primary .module-buttons a {
	background: var(--s-rust);
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(92, 28, 9, .2), 0 10px 24px -10px rgba(92, 28, 9, .55);
}

.s-btn--primary:hover,
.s-btn-primary .module-buttons a:hover {
	background: var(--s-rust-deep);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(92, 28, 9, .22), 0 16px 32px -10px rgba(92, 28, 9, .6);
}

/* Secondary — outlined */
.s-btn--ghost,
.s-btn-ghost .module-buttons a {
	background: transparent;
	color: var(--s-ink) !important;
	border-color: var(--s-line);
}

.s-btn--ghost:hover,
.s-btn-ghost .module-buttons a:hover {
	border-color: var(--s-ink);
	background: rgba(33, 30, 27, .035);
	color: var(--s-ink) !important;
	transform: translateY(-2px);
}

/* On dark surfaces */
.s-bg-dark .s-btn--ghost,
.s-bg-dark .s-btn-ghost .module-buttons a,
.s-hero .s-btn--ghost {
	color: #fff !important;
	border-color: rgba(255, 255, 255, .42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.s-bg-dark .s-btn--ghost:hover,
.s-bg-dark .s-btn-ghost .module-buttons a:hover,
.s-hero .s-btn--ghost:hover {
	background: rgba(255, 255, 255, .13);
	border-color: #fff;
	color: #fff !important;
}

/* Text link with arrow */
.s-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 700;
	font-size: var(--s-fs-sm);
	color: var(--s-rust);
	text-decoration: none;
}

.s-link::after {
	content: "→";
	transition: transform .25s var(--s-ease);
	font-size: 1.05em;
	line-height: 1;
}

.s-link:hover::after { transform: translateX(4px); }

/* Button group */
.s-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
}

.s-text-center .s-actions { justify-content: center; }

/* ==========================================================================
   6. HEADER
   ========================================================================== */

#headerwrap {
	position: sticky;
	top: var(--s-adminbar, 0px);
	z-index: 600;
	background: rgba(252, 247, 242, .88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--s-line-soft);
	transition: background-color .3s var(--s-ease), border-color .3s var(--s-ease),
	            box-shadow .3s var(--s-ease);
}

#headerwrap.s-scrolled {
	background: rgba(252, 247, 242, .96);
	box-shadow: 0 1px 0 var(--s-line-soft), 0 8px 24px -14px rgba(33, 30, 27, .3);
}

/* Transparent-over-hero treatment, toggled per page by body class + JS */
body.s-header-overlay #headerwrap {
	position: fixed;
	top: var(--s-adminbar, 0px);
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.s-header-overlay #headerwrap:not(.s-scrolled) #site-logo a img { filter: brightness(0) invert(1); }
body.s-header-overlay #headerwrap:not(.s-scrolled) #main-nav > li > a { color: #fff; }
body.s-header-overlay #headerwrap:not(.s-scrolled) #main-nav > li > a:hover { color: #fff; opacity: .72; }
body.s-header-overlay #headerwrap:not(.s-scrolled) .s-header-cta { color: #fff; border-color: rgba(255, 255, 255, .45); }
body.s-header-overlay #headerwrap:not(.s-scrolled) .s-header-cta:hover { background: rgba(255, 255, 255, .15); border-color: #fff; }
body.s-header-overlay #headerwrap:not(.s-scrolled) #menu-icon { color: #fff; }

body.s-header-overlay #headerwrap.s-scrolled {
	background: rgba(252, 247, 242, .96);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: var(--s-line-soft);
	box-shadow: 0 1px 0 var(--s-line-soft), 0 8px 24px -14px rgba(33, 30, 27, .3);
}

#header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--s-5);
	max-width: var(--s-maxw-wide);
	margin-inline: auto;
	padding: 0 var(--s-gutter);
	min-height: var(--s-header-h);
	box-sizing: border-box;
}

.s-header-cta { margin-left: auto; }

#site-logo { margin: 0; flex: none; line-height: 0; }

#site-logo a img {
	width: 132px;
	height: auto;
	transition: width .3s var(--s-ease), filter .3s var(--s-ease);
}

@media (max-width: 1250px) {
	#site-logo a img { width: 108px; }
}

/* Navigation.
   Ultra nests .navbar-wrapper inside #mobile-menu, so #mobile-menu is the
   flex child of #header on desktop and becomes the off-canvas sheet below
   the trigger point. */
#mobile-menu {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.navbar-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s-5);
	width: 100%;
	min-width: 0;
}

#main-nav-wrap { min-width: 0; }

#menu-icon-close { display: none; }

#main-nav {
	display: flex;
	align-items: center;
	gap: clamp(.4rem, .1rem + 1vw, 1.1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

#main-nav > li { margin: 0; position: relative; }

#main-nav > li > a {
	font-family: var(--s-font-body);
	font-size: var(--s-fs-sm);
	font-weight: 600;
	color: var(--s-ink-soft);
	text-decoration: none;
	padding: .55rem .7rem;
	border-radius: var(--s-radius-sm);
	display: block;
	transition: color .22s var(--s-ease), background-color .22s var(--s-ease);
	white-space: nowrap;
}

#main-nav > li > a:hover { color: var(--s-ink); background: rgba(33, 30, 27, .045); }

#main-nav > li.current_page_item > a,
#main-nav > li.current-menu-item > a,
#main-nav > li.current-menu-ancestor > a,
#main-nav > li.current-page-ancestor > a { color: var(--s-rust); }

/* Dropdowns */
#main-nav .sub-menu {
	min-width: 235px;
	background: var(--s-white);
	border: 1px solid var(--s-line-soft);
	border-radius: var(--s-radius);
	box-shadow: var(--s-shadow);
	padding: var(--s-2);
	margin-top: .4rem;
}

#main-nav .sub-menu li a {
	font-size: var(--s-fs-sm);
	font-weight: 600;
	color: var(--s-ink-soft);
	padding: .62rem .8rem;
	border-radius: var(--s-radius-sm);
	border: 0;
	display: block;
	text-decoration: none;
	transition: background-color .18s var(--s-ease), color .18s var(--s-ease);
}

#main-nav .sub-menu li a:hover { background: var(--s-rust-tint); color: var(--s-rust); }
#main-nav .sub-menu li.current-menu-item > a { color: var(--s-rust); }

/* Ultra adds bottom margin to submenu items, leaving dead space in the card */
#main-nav .sub-menu li { margin: 0; }
#main-nav .sub-menu li:last-child a { margin-bottom: 0; }

/* Header phone CTA */
.s-header-cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex: none;
	font-family: var(--s-font-body);
	font-size: var(--s-fs-sm);
	font-weight: 700;
	color: var(--s-ink);
	text-decoration: none;
	padding: .68rem 1.2rem;
	border: 1.5px solid var(--s-line);
	border-radius: var(--s-radius-pill);
	white-space: nowrap;
	transition: background-color .25s var(--s-ease), border-color .25s var(--s-ease),
	            color .25s var(--s-ease), transform .25s var(--s-ease);
}

.s-header-cta:hover {
	background: var(--s-rust);
	border-color: var(--s-rust);
	color: #fff;
	transform: translateY(-1px);
}

.s-header-cta svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

@media (max-width: 1240px) {
	.s-header-cta .s-header-cta__label { display: none; }
	.s-header-cta { padding: .68rem .9rem; }
}

/* Hide theme chrome we don't use */
#headerwrap .header-bar .site-description,
#headerwrap .header-widget,
#headerwrap .social-widget,
#headerwrap .search-button,
#headerwrap #searchform-wrap { display: none !important; }

/* ==========================================================================
   7. MOBILE NAVIGATION
   ========================================================================== */

/* Ultra positions .header-icons absolutely inside #headerwrap. */
.header-icons {
	position: absolute;
	right: var(--s-gutter);
	top: 0;
	bottom: 0;
	translate: none;
	z-index: 10;
	min-width: 0;
	display: none;
	align-items: center;
	text-align: right;
}

#menu-icon {
	color: var(--s-ink);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--s-radius-sm);
	text-decoration: none;
	transition: background-color .2s var(--s-ease), color .3s var(--s-ease);
}

#menu-icon:hover { background: rgba(33, 30, 27, .06); }

/* Hamburger drawn from the theme's empty inner span */
.menu-icon-inner,
.menu-icon-inner::before,
.menu-icon-inner::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .3s var(--s-ease), opacity .2s var(--s-ease);
}

.menu-icon-inner {
	position: relative;
	/* Ultra puts .tf_overflow (overflow:hidden) on this 2px-tall span, which
	   clipped the ::before/::after bars and left a single line. */
	overflow: visible;
}

.menu-icon-inner::before,
.menu-icon-inner::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-icon-inner::before { top: -7px; }
.menu-icon-inner::after  { top: 7px; }

body.s-nav-open .menu-icon-inner { background: transparent; }
body.s-nav-open .menu-icon-inner::before { transform: translateY(7px) rotate(45deg); }
body.s-nav-open .menu-icon-inner::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1250px) {
	.header-icons { display: flex; min-width: 0; width: 44px; }

	/* Reserve room for the absolutely positioned hamburger */
	#header { padding-right: calc(var(--s-gutter) + 44px + var(--s-4)); }

	/* Ultra ships a 300px "push" side menu: it slides a fixed panel in from the
	   right and shifts the whole page left to meet it. This design uses a
	   full-width overlay sheet instead, so the push has to be switched off —
	   otherwise the header slides 300px off-screen while the sheet is open. */
	/* !important is deliberate: Ultra's push offset reaches the header through
	   its own cascade and a plain override does not win here. */
	body.sidemenu-right,
	body.sidemenu-left,
	body.sidemenu-right .fixed-header,
	body.sidemenu-left .fixed-header,
	body.sidemenu-right #headerwrap,
	body.sidemenu-left #headerwrap {
		left: 0 !important;
		right: 0 !important;
	}

	#mobile-menu.sidemenu,
	#mobile-menu.sidemenu-on { right: 0; left: 0; }

	/* The hamburger stays put and morphs into a close control */
	body.mobile-menu-visible .header-icons,
	body.s-nav-open .header-icons { display: flex; }

	#mobile-menu {
		position: fixed;
		inset: calc(var(--s-header-h) + var(--s-adminbar, 0px)) 0 0 0;
		/* Themify's .sidemenu sets an explicit 300px, which beats left+right */
		width: auto;
		max-width: none;
		display: block;
		background: var(--s-cream);
		padding: var(--s-6) var(--s-gutter) var(--s-9);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .32s var(--s-ease), transform .32s var(--s-ease), visibility .32s;
		z-index: 590;
	}

	/* Ultra hides the hamburger while the sheet is open and shows its own close
	   control inside the panel — style that rather than fight it. The header
	   stays visible above the sheet so the phone CTA is always reachable. */
	#mobile-menu #menu-icon-close {
		display: grid;
		place-items: center;
		position: absolute;
		top: var(--s-4);
		right: var(--s-gutter);
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: var(--s-radius-sm);
		color: var(--s-ink);
		background: transparent;
		transition: background-color .2s var(--s-ease);
	}

	#mobile-menu #menu-icon-close:hover { background: rgba(33, 30, 27, .06); }

	/* Ultra draws the X as pseudo-elements at 56% of the box; against a 44px
	   hit area that reads far too large. */
	#mobile-menu #menu-icon-close::before,
	#mobile-menu #menu-icon-close::after { height: 38%; }

	/* Give the close control its own band so it clears the nav's top rule. */
	#mobile-menu { padding-top: calc(44px + var(--s-6)); }

	#mobile-menu.sidemenu-on,
	body.s-nav-open #mobile-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.navbar-wrapper { display: block; width: 100%; }

	#main-nav {
		display: block;
		width: 100%;
		border-top: 1px solid var(--s-line-soft);
	}

	#main-nav > li { border-bottom: 1px solid var(--s-line-soft); }

	#main-nav > li > a {
		font-family: var(--s-font-display);
		font-size: 1.35rem;
		font-weight: 700;
		color: var(--s-ink);
		padding: 1.05rem 0;
		border-radius: 0;
		letter-spacing: -.015em;
		white-space: normal;
	}

	#main-nav > li > a:hover { background: transparent; color: var(--s-rust); }

	#main-nav .sub-menu {
		position: static;
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 0 0 var(--s-4) var(--s-4);
		margin: 0;
		min-width: 0;
		transform: none !important;
	}

	#main-nav .sub-menu li a { padding: .5rem 0; font-size: 1rem; }
	#main-nav .sub-menu li a:hover { background: transparent; }

	/* Header must go solid while the sheet is open, even in overlay mode */
	body.s-header-overlay #headerwrap.s-nav-lit {
		background: var(--s-cream);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	body.s-header-overlay #headerwrap.s-nav-lit #site-logo a img { filter: none; }
	body.s-header-overlay #headerwrap.s-nav-lit #menu-icon { color: var(--s-ink); }
	body.s-header-overlay #headerwrap.s-nav-lit .s-header-cta { color: var(--s-ink); border-color: var(--s-line); }

	/* Panel links sit on cream, never on the hero photo — the overlay colour
	   rules must not reach inside the open sheet. */
	body.s-header-overlay #headerwrap #main-nav > li > a,
	body.s-header-overlay #headerwrap:not(.s-scrolled) #main-nav > li > a {
		color: var(--s-ink);
	}

	body.s-header-overlay #headerwrap #main-nav > li > a:hover,
	body.s-header-overlay #headerwrap:not(.s-scrolled) #main-nav > li > a:hover {
		color: var(--s-rust);
		opacity: 1;
	}

	body.s-nav-open { overflow: hidden; }

	/* Themify's scrim is redundant against a full-bleed sheet */
	.body-overlay { display: none !important; }
}

@media (max-width: 480px) {
	.s-header-cta { padding: .6rem .8rem; }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */

.themify_builder .module_row.s-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 88vh, 900px);
	padding-block: calc(var(--s-header-h) + var(--s-adminbar, 0px) + var(--s-9)) var(--s-9);
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}

.themify_builder .module_row.s-hero--short { min-height: clamp(400px, 58vh, 580px); }

/* The backdrop image module lives inside .row_inner, so .row_inner must stay
   unpositioned — otherwise it traps the backdrop above the scrim. Content is
   lifted by giving the text module its own stacking level instead. */
.s-hero > .row_inner,
.s-cta > .row_inner {
	position: static;
	z-index: auto;
	width: 100%;
	max-width: var(--s-maxw);
	margin-inline: auto;
	padding-inline: var(--s-gutter);
	box-sizing: border-box;
}

.s-hero .module_column,
.s-cta .module_column { position: static; }

.themify_builder .s-hero .module-text,
.themify_builder .s-cta .module-text {
	position: relative;
	z-index: 2;
}

/* Two crossed gradients rather than a flat wash: the vertical pass anchors the
   copy at the bottom, the horizontal one guarantees contrast behind
   left-aligned text no matter how bright that part of the photo is. */
.s-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to right, rgba(18, 16, 14, .72) 0%, rgba(18, 16, 14, .45) 42%, rgba(18, 16, 14, 0) 78%),
		linear-gradient(to top, rgba(18, 16, 14, .8) 0%, rgba(18, 16, 14, .42) 38%, rgba(18, 16, 14, .1) 66%, rgba(18, 16, 14, .42) 100%);
	pointer-events: none;
}

/* Centred heroes need an even wash instead */
.s-hero--center::after {
	background:
		radial-gradient(120% 90% at 50% 60%, rgba(18, 16, 14, .3) 0%, rgba(18, 16, 14, .68) 100%),
		linear-gradient(to top, rgba(18, 16, 14, .7) 0%, rgba(18, 16, 14, .25) 45%, rgba(18, 16, 14, .45) 100%);
}

.s-hero h1, .s-hero h2, .s-hero h3, .s-hero p { color: #fff; }

.s-hero h1 {
	font-size: var(--s-fs-hero);
	margin: 0 0 var(--s-5);
	max-width: 17ch;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}

.s-hero--short h1 { font-size: var(--s-fs-h1); max-width: 20ch; }

.s-hero .s-eyebrow,
.s-hero .s-eyebrow p { color: rgba(255, 255, 255, .88); }
.s-hero .s-eyebrow::before { background: #fff; }

.s-hero .s-lead p {
	color: rgba(255, 255, 255, .9);
	max-width: 56ch;
	margin-bottom: var(--s-7);
	text-shadow: 0 1px 20px rgba(0, 0, 0, .3);
}

.s-hero .s-lead > *:last-child { margin-bottom: var(--s-7); }

/* Background photo as a real <img>: gives the browser a preloadable LCP
   candidate and keeps srcset/alt intact, unlike a CSS background. */
/* Specificity has to beat Themify's own `.module { position: relative }`. */
.themify_builder .module.s-hero__bg,
.themify_builder .module.s-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.s-hero__bg .image-wrap,
.s-cta__bg .image-wrap {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	display: block;
}

.s-hero__bg img,
.s-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
	.s-hero-kenburns { animation: s-kenburns 26s ease-in-out infinite alternate; }
}

@keyframes s-kenburns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}

/* Scroll cue */
.s-hero__cue {
	position: absolute;
	right: var(--s-gutter);
	bottom: 2rem;
	z-index: 3;
	width: 24px;
	height: 38px;
	border: 1.5px solid rgba(255, 255, 255, .5);
	border-radius: var(--s-radius-pill);
	pointer-events: none;
}

.s-hero__cue::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 7px;
	translate: -50% 0;
	width: 3px;
	height: 7px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .85);
	animation: s-cue 1.9s var(--s-ease) infinite;
}

@keyframes s-cue {
	0%, 18%   { opacity: 0; transform: translateY(0); }
	35%       { opacity: 1; }
	70%, 100% { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 767px) {
	.s-hero__cue { display: none; }

	.themify_builder .module_row.s-hero {
		min-height: clamp(480px, 78vh, 640px);
		align-items: flex-end;
		padding-block: calc(var(--s-header-h) + var(--s-adminbar, 0px) + var(--s-7)) var(--s-7);
	}

	.themify_builder .module_row.s-hero--short {
		min-height: auto;
		padding-block: calc(var(--s-header-h) + var(--s-adminbar, 0px) + var(--s-7)) var(--s-7);
	}

	.s-hero h1 { max-width: 16ch; }
	.s-hero .s-lead p { margin-bottom: var(--s-6); }
	.s-hero .s-lead > *:last-child { margin-bottom: var(--s-6); }
	.s-hero .s-actions { flex-direction: column; align-items: stretch; width: 100%; }
	.s-hero .s-actions .s-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.s-hero__cue::after { animation: none; }
}

/* ==========================================================================
   9. TRUST STRIP
   ========================================================================== */

.s-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--s-line-soft);
	border-block: 1px solid var(--s-line-soft);
}

.s-trust__item {
	background: var(--s-cream);
	padding: var(--s-7) var(--s-5);
	text-align: center;
}

.s-trust__num {
	display: block;
	font-family: var(--s-font-display);
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
	font-weight: 800;
	line-height: 1;
	color: var(--s-rust);
	letter-spacing: -.03em;
	margin-bottom: var(--s-2);
}

.s-trust__label {
	display: block;
	font-size: var(--s-fs-sm);
	color: var(--s-muted);
	line-height: 1.45;
	max-width: 22ch;
	margin-inline: auto;
}

@media (max-width: 860px) {
	.s-trust { grid-template-columns: repeat(2, 1fr); }
	.s-trust__item { padding: var(--s-6) var(--s-4); }
}

/* ==========================================================================
   10. CARDS
   ========================================================================== */

.s-grid {
	display: grid;
	gap: clamp(1.25rem, .7rem + 1.6vw, 2rem);
}

.s-grid--2 { grid-template-columns: repeat(2, 1fr); }
.s-grid--3 { grid-template-columns: repeat(3, 1fr); }
.s-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
	.s-grid--3, .s-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.s-grid--2, .s-grid--3, .s-grid--4 { grid-template-columns: 1fr; }
}

/* Service card — photo top, content below, whole card is the link */
.s-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--s-white);
	border: 1px solid var(--s-line-soft);
	border-radius: var(--s-radius);
	overflow: hidden;
	transition: transform .35s var(--s-ease-out), box-shadow .35s var(--s-ease-out),
	            border-color .35s var(--s-ease);
	height: 100%;
}

.s-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--s-shadow);
	border-color: var(--s-line);
}

.s-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--s-sand);
}

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

.s-card:hover .s-card__media img { transform: scale(1.055); }

.s-card__body {
	padding: var(--s-5) var(--s-5) var(--s-6);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--s-3);
}

.s-card__body h3 { margin: 0; }

.s-card__body p {
	margin: 0;
	font-size: var(--s-fs-sm);
	color: var(--s-muted);
	line-height: 1.6;
}

.s-card__body .s-link { margin-top: auto; padding-top: var(--s-2); }

/* Stretched link keeps the whole card clickable without nesting anchors */
.s-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Feature list inside cards */
.s-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	font-size: var(--s-fs-sm);
	color: var(--s-ink-soft);
}

.s-card__list li {
	position: relative;
	padding-left: 1.4rem;
	line-height: 1.5;
}

.s-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .52em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--s-rust);
	rotate: 45deg;
}

/* ==========================================================================
   11. SPLIT (image + text) SECTIONS
   ========================================================================== */

.s-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}

.s-split--media-right .s-split__media { order: 2; }

.s-split__media {
	position: relative;
	border-radius: var(--s-radius-lg);
	overflow: hidden;
	background: var(--s-sand);
	aspect-ratio: 4 / 3.2;
	box-shadow: var(--s-shadow);
}

.s-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.s-split__body > *:first-child { margin-top: 0; }
.s-split__body > *:last-child  { margin-bottom: 0; }
.s-split__body h2 { margin-bottom: var(--s-4); }

@media (max-width: 880px) {
	.s-split { grid-template-columns: 1fr; gap: var(--s-6); }
	.s-split--media-right .s-split__media { order: 0; }
	.s-split__media { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   12. PROCESS STEPS
   ========================================================================== */

.s-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, .8rem + 2.2vw, 2.75rem);
	counter-reset: step;
}

.s-step { position: relative; padding-top: var(--s-6); }

.s-step::before {
	counter-increment: step;
	content: "0" counter(step);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--s-font-display);
	font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
	font-weight: 800;
	line-height: .8;
	color: var(--s-rust);
	opacity: .17;
	letter-spacing: -.04em;
}

.s-step__rule {
	width: 100%;
	height: 2px;
	background: var(--s-line);
	margin-bottom: var(--s-4);
	position: relative;
}

.s-step__rule::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 32px;
	background: var(--s-rust);
}

.s-step h3 { margin: 0 0 var(--s-2); }

.s-step p {
	margin: 0;
	font-size: var(--s-fs-sm);
	color: var(--s-muted);
	line-height: 1.6;
}

.s-bg-dark .s-step p { color: rgba(255, 255, 255, .68); }
.s-bg-dark .s-step__rule { background: rgba(255, 255, 255, .17); }
.s-bg-dark .s-step::before { color: #fff; opacity: .16; }

@media (max-width: 900px) { .s-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .s-steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   13. GALLERY / SHOWCASE
   ========================================================================== */

/* Explicit placement, not auto-flow spans: auto-placement leaves holes as soon
   as an item's span doesn't divide evenly into the remaining track. */
.s-showcase {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, clamp(130px, 15.5vw, 215px));
	gap: clamp(.6rem, .3rem + .9vw, 1rem);
}

.s-showcase__item:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.s-showcase__item:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
.s-showcase__item:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
.s-showcase__item:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
.s-showcase__item:nth-child(5) { grid-area: 2 / 4 / 3 / 5; }
.s-showcase__item:nth-child(6) { grid-area: 3 / 1 / 4 / 5; }

.s-showcase__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--s-radius);
	background: var(--s-sand);
	display: block;
}

.s-showcase__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s var(--s-ease-out);
}

.s-showcase__item:hover img { transform: scale(1.06); }


.s-showcase__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--s-6) var(--s-4) var(--s-4);
	background: linear-gradient(to top, rgba(18, 16, 14, .82), transparent);
	color: #fff;
	font-size: var(--s-fs-sm);
	font-weight: 600;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s var(--s-ease), transform .3s var(--s-ease);
}

.s-showcase__item:hover .s-showcase__cap { opacity: 1; transform: none; }

@media (max-width: 900px) {
	.s-showcase {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, clamp(130px, 28vw, 190px));
	}

	.s-showcase__item:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
	.s-showcase__item:nth-child(2) { grid-area: 3 / 1 / 4 / 2; }
	.s-showcase__item:nth-child(3) { grid-area: 3 / 2 / 4 / 3; }
	.s-showcase__item:nth-child(4) { grid-area: 4 / 1 / 5 / 2; }
	.s-showcase__item:nth-child(5) { grid-area: 4 / 2 / 5 / 3; }
	.s-showcase__item:nth-child(6) { display: none; }
}

@media (max-width: 520px) {
	.s-showcase__cap { opacity: 1; transform: none; }
}

/* Filterable reference gallery */
.s-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	justify-content: center;
	margin-bottom: var(--s-7);
}

/* The gallery row needs less top air than a normal section — the filter bar
   already reads as a header. */
.themify_builder .module_row.s-section:has(.s-filters) { padding-top: var(--s-section-tight); }

.s-filter {
	font-family: var(--s-font-body);
	font-size: var(--s-fs-sm);
	font-weight: 600;
	color: var(--s-ink-soft);
	background: transparent;
	border: 1.5px solid var(--s-line);
	border-radius: var(--s-radius-pill);
	padding: .6rem 1.15rem;
	cursor: pointer;
	transition: all .22s var(--s-ease);
	line-height: 1;
}

.s-filter,
.s-filter:hover,
.s-filter:focus,
.s-filter:active {
	box-shadow: none;
	transform: none;
}

.s-filter:hover {
	border-color: var(--s-ink);
	color: var(--s-ink);
	background-color: transparent;
}

.s-filter[aria-pressed="true"]:hover {
	background-color: var(--s-rust-deep);
	border-color: var(--s-rust-deep);
	color: #fff;
}

.s-filter[aria-pressed="true"] {
	background: var(--s-rust);
	border-color: var(--s-rust);
	color: #fff;
}

.s-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(.6rem, .3rem + .9vw, 1rem);
}

.s-gallery__item {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--s-radius);
	background: var(--s-sand);
	display: block;
	transition: opacity .3s var(--s-ease), transform .3s var(--s-ease);
}

.s-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s var(--s-ease-out);
}

.s-gallery__item:hover img { transform: scale(1.07); }

.s-gallery__item[hidden] { display: none; }

/* ==========================================================================
   14. BRAND / DEALER ROW
   ========================================================================== */

.s-brands {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(1.5rem, .5rem + 3vw, 4rem);
}

.s-brand {
	font-family: var(--s-font-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--s-ink);
	opacity: .42;
	transition: opacity .3s var(--s-ease);
}

.s-brand:hover { opacity: .78; }

/* ==========================================================================
   15. FAQ / ACCORDION
   ========================================================================== */

.s-faq { max-width: 860px; margin-inline: auto; }

.s-faq__item {
	border-bottom: 1px solid var(--s-line-soft);
}

.s-faq__item:first-child { border-top: 1px solid var(--s-line-soft); }

.s-faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-4);
	background: none;
	border: 0;
	padding: var(--s-5) 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--s-font-display);
	font-size: var(--s-fs-h3);
	font-weight: 700;
	color: var(--s-ink);
	line-height: 1.3;
	letter-spacing: -.01em;
	transition: color .22s var(--s-ease);
}

/* Ultra's `button:hover { background-color: var(--theme_accent_hover) }` beats a
   single-class rule, so these controls need their transparency restated for
   every interaction state — it applied to the FAQ and the gallery filters. */
.s-faq__q,
.s-faq__q:hover,
.s-faq__q:focus,
.s-faq__q:active {
	background: none;
	background-color: transparent;
	box-shadow: none;
	transform: none;
}

.s-faq__q:hover { color: var(--s-rust); }
.s-faq__q:hover .s-faq__icon::before,
.s-faq__q:hover .s-faq__icon::after { background: var(--s-rust); }

.s-faq__icon {
	flex: none;
	width: 26px;
	height: 26px;
	position: relative;
	margin-top: .18em;
}

.s-faq__icon::before,
.s-faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--s-rust);
	border-radius: 2px;
	translate: 0 -50%;
	transition: transform .3s var(--s-ease), opacity .3s var(--s-ease);
}

.s-faq__icon::after { rotate: 90deg; }

.s-faq__q[aria-expanded="true"] .s-faq__icon::after { transform: scaleX(0); opacity: 0; }

.s-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .38s var(--s-ease-out);
}

.s-faq__q[aria-expanded="true"] + .s-faq__a { grid-template-rows: 1fr; }

.s-faq__a > div { overflow: hidden; }

.s-faq__a p {
	margin: 0 0 var(--s-5);
	padding-right: clamp(0px, 4vw, 3.5rem);
	color: var(--s-muted);
}

.s-faq__a > div > *:first-child { padding-top: 0; }

/* ==========================================================================
   16. CTA BAND
   ========================================================================== */

.s-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
}

.s-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(105deg, rgba(20, 17, 15, .92) 0%, rgba(20, 17, 15, .74) 48%, rgba(20, 17, 15, .5) 100%);
}

.s-cta h2 { color: #fff; margin: 0 0 var(--s-4); max-width: 18ch; }
.s-cta p  { color: rgba(255, 255, 255, .82); max-width: 52ch; }

.s-cta__inner {
	display: grid;
	grid-template-columns: 1.15fr auto;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}

.s-cta .s-actions { gap: var(--s-6); }

@media (max-width: 880px) {
	.s-cta__inner { grid-template-columns: 1fr; gap: var(--s-6); }
	.s-cta h2 { max-width: none; }
}

@media (max-width: 480px) {
	.s-cta .s-actions { gap: var(--s-5); flex-direction: column; align-items: flex-start; }
}

/* Phone block inside the CTA */
.s-phone {
	display: inline-flex;
	flex-direction: column;
	gap: .3rem;
	text-decoration: none;
}

.s-phone__label {
	font-size: var(--s-fs-xs);
	font-weight: 700;
	letter-spacing: var(--s-track-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.s-phone__num {
	font-family: var(--s-font-display);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.02em;
	line-height: 1.1;
	white-space: nowrap;
	transition: color .22s var(--s-ease);
}

.s-phone:hover .s-phone__num { color: #e8b9a6; }

/* ==========================================================================
   17. CONTACT
   ========================================================================== */

.s-contact {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: start;
}

@media (max-width: 880px) { .s-contact { grid-template-columns: 1fr; } }

.s-contact__list {
	list-style: none;
	margin: var(--s-6) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.s-contact__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-4);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--s-line-soft);
}

.s-contact__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.s-contact__icon {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--s-radius-sm);
	background: var(--s-rust-tint);
	color: var(--s-rust);
}

.s-contact__icon svg { width: 18px; height: 18px; fill: currentColor; }

.s-contact__k {
	display: block;
	font-size: var(--s-fs-xs);
	font-weight: 700;
	letter-spacing: var(--s-track-label);
	text-transform: uppercase;
	color: var(--s-muted);
	margin-bottom: .18rem;
}

.s-contact__v {
	display: block;
	font-family: var(--s-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--s-ink);
	text-decoration: none;
	line-height: 1.35;
}

a.s-contact__v:hover { color: var(--s-rust); }

/* Form card */
.s-formcard {
	background: var(--s-white);
	border: 1px solid var(--s-line-soft);
	border-radius: var(--s-radius-lg);
	padding: clamp(1.5rem, .9rem + 2.4vw, 3rem);
	box-shadow: var(--s-shadow-sm);
}

/* Themify Builder Contact form styling */
.s-formcard .module-contact label,
.s-formcard .tb_contact_form label {
	display: block;
	font-size: var(--s-fs-xs);
	font-weight: 700;
	letter-spacing: var(--s-track-label);
	text-transform: uppercase;
	color: var(--s-muted);
	margin: 0 0 .5rem;
}

.s-formcard input[type="text"],
.s-formcard input[type="email"],
.s-formcard input[type="tel"],
.s-formcard select,
.s-formcard textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--s-font-body);
	font-size: var(--s-fs-body);
	color: var(--s-ink);
	background: var(--s-cream);
	border: 1.5px solid var(--s-line-soft);
	border-radius: var(--s-radius-sm);
	padding: .85rem 1rem;
	margin-bottom: var(--s-5);
	transition: border-color .22s var(--s-ease), background-color .22s var(--s-ease),
	            box-shadow .22s var(--s-ease);
}

.s-formcard textarea { min-height: 160px; resize: vertical; line-height: 1.6; }

.s-formcard input:focus,
.s-formcard select:focus,
.s-formcard textarea:focus {
	outline: none;
	border-color: var(--s-rust);
	background: var(--s-white);
	box-shadow: 0 0 0 4px rgba(123, 38, 13, .1);
}

.s-formcard input::placeholder,
.s-formcard textarea::placeholder { color: #a79a8f; }

.s-formcard button[type="submit"],
.s-formcard input[type="submit"] {
	background: var(--s-rust);
	color: #fff;
	font-family: var(--s-font-body);
	font-size: var(--s-fs-sm);
	font-weight: 700;
	border: 0;
	border-radius: var(--s-radius-pill);
	padding: 1.0625rem 2.2rem;
	cursor: pointer;
	transition: background-color .25s var(--s-ease), transform .25s var(--s-ease),
	            box-shadow .25s var(--s-ease);
	box-shadow: 0 1px 2px rgba(92, 28, 9, .2), 0 10px 24px -10px rgba(92, 28, 9, .55);
}

.s-formcard button[type="submit"]:hover,
.s-formcard input[type="submit"]:hover {
	background: var(--s-rust-deep);
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(92, 28, 9, .22), 0 16px 32px -10px rgba(92, 28, 9, .6);
}

/* ==========================================================================
   18. FOOTER
   ========================================================================== */

#footerwrap { display: none; }

/* The footer is a Builder layout part injected on wp_footer, so these styles
   hang off the row classes rather than bespoke wrapper markup. */
.tb_layout_part_wrap { background: var(--s-dark); }

.themify_builder .module_row.s-footer {
	background-color: var(--s-dark);
	color: rgba(255, 255, 255, .66);
	font-size: var(--s-fs-sm);
}

.themify_builder .module_row.s-footer > .row_inner {
	max-width: var(--s-maxw);
	margin-inline: auto;
	padding-inline: var(--s-gutter);
	width: 100%;
	box-sizing: border-box;
}

.themify_builder .module_row.s-footer--cols { padding-block: var(--s-9) var(--s-7); }
.themify_builder .module_row.s-footer--bottom { padding-block: 0 var(--s-7); }

.s-footer h4 {
	color: #fff;
	font-size: var(--s-fs-xs);
	font-weight: 700;
	letter-spacing: var(--s-track-label);
	text-transform: uppercase;
	margin: 0 0 var(--s-4);
	font-family: var(--s-font-body);
}

.s-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.s-footer a:hover { color: #fff; }

.s-footer__logo img { width: 150px; height: auto; opacity: .95; }

.s-footer__blurb {
	margin: var(--s-5) 0;
	max-width: 34ch;
	line-height: 1.65;
	color: rgba(255, 255, 255, .58);
}

/* Four Builder columns, laid out as a grid so the brand column can be wider */
.s-footer--cols > .row_inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: clamp(1.75rem, 1rem + 3vw, 4rem);
	align-items: start;
}

.s-footer--cols .module_column { width: auto; margin: 0; float: none; }

@media (max-width: 960px) {
	.s-footer--cols > .row_inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.s-footer--cols > .row_inner { grid-template-columns: 1fr; }
}

.s-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	font-size: var(--s-fs-sm);
}

.s-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	line-height: 1.5;
}

.s-footer__contact svg {
	width: 16px;
	height: 16px;
	fill: #c4795f;
	flex: none;
	margin-top: .28em;
}

.s-footer__bottom {
	padding-top: var(--s-5);
	border-top: 1px solid rgba(255, 255, 255, .11);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-6);
	align-items: center;
	justify-content: space-between;
	font-size: var(--s-fs-xs);
	color: rgba(255, 255, 255, .48);
}

.s-social {
	display: flex;
	gap: var(--s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.s-social a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--s-radius-sm);
	background: rgba(255, 255, 255, .07);
	transition: background-color .22s var(--s-ease), transform .22s var(--s-ease);
}

.s-social a:hover { background: var(--s-rust); transform: translateY(-2px); }
.s-social svg { width: 17px; height: 17px; fill: #fff; }

/* ==========================================================================
   19. ANCHOR NAV (service hub)
   ========================================================================== */

.s-anchors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	justify-content: center;
}

.s-anchor {
	font-size: var(--s-fs-sm);
	font-weight: 600;
	color: var(--s-ink-soft);
	text-decoration: none;
	border: 1.5px solid var(--s-line);
	border-radius: var(--s-radius-pill);
	padding: .6rem 1.15rem;
	transition: all .22s var(--s-ease);
	line-height: 1;
}

.s-anchor:hover {
	background: var(--s-rust);
	border-color: var(--s-rust);
	color: #fff;
}

/* Offset anchor targets so the sticky header doesn't cover headings */
[id] { scroll-margin-top: calc(var(--s-header-h) + var(--s-adminbar, 0px) + 1.5rem); }

html { scroll-behavior: smooth; }

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

/* ==========================================================================
   20. SCROLL REVEAL
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.s-js .s-reveal {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .7s var(--s-ease-out), transform .7s var(--s-ease-out);
	}

	.s-reveal.is-in { opacity: 1; transform: none; }

	.s-js .s-reveal-stagger > * {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .7s var(--s-ease-out), transform .7s var(--s-ease-out);
	}

	.s-reveal-stagger.is-in > * { opacity: 1; transform: none; }

	.s-reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0s; }
	.s-reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
	.s-reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
	.s-reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
	.s-reveal-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
	.s-reveal-stagger.is-in > *:nth-child(6) { transition-delay: .4s; }
	.s-reveal-stagger.is-in > *:nth-child(7) { transition-delay: .48s; }
	.s-reveal-stagger.is-in > *:nth-child(8) { transition-delay: .56s; }
}

/* ==========================================================================
   21. UTILITIES
   ========================================================================== */

.s-mt-0 { margin-top: 0 !important; }
.s-mb-0 { margin-bottom: 0 !important; }
.s-mb-4 { margin-bottom: var(--s-4) !important; }
.s-mb-6 { margin-bottom: var(--s-6) !important; }
.s-mb-7 { margin-bottom: var(--s-7) !important; }
.s-mb-8 { margin-bottom: var(--s-8) !important; }

.s-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Rich text defaults inside builder text modules */
.s-rt ul, .s-rt ol { padding-left: 1.15rem; margin: 0 0 var(--s-5); }
.s-rt li { margin-bottom: .45rem; }
.s-rt > *:last-child { margin-bottom: 0; }
.s-rt strong { color: var(--s-ink); font-weight: 700; }

/* Skip link */
.s-skip {
	position: absolute;
	left: var(--s-4);
	top: -100px;
	z-index: 9999;
	background: var(--s-rust);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: var(--s-radius-sm);
	font-weight: 700;
	font-size: var(--s-fs-sm);
	text-decoration: none;
	transition: top .2s var(--s-ease);
}

.s-skip:focus { top: var(--s-4); color: #fff; }

/* Card without media — used for values, brands and other text-only grids */
.s-card--plain .s-card__body { padding: var(--s-6); gap: var(--s-4); }
.s-card--plain { border-color: var(--s-line); }

/* Filter count badge */
.s-filter__n {
	font-size: .75em;
	opacity: .5;
	font-weight: 600;
	margin-left: .15em;
}

.s-filter[aria-pressed="true"] .s-filter__n { opacity: .72; }

/* ==========================================================================
   23. CONTACT PAGE LAYOUT
   ========================================================================== */

/* Real Builder columns here, so the client can reorder them in the editor. */
.s-contact-row > .row_inner {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: start;
}

.s-contact-row .module_column { width: auto; margin: 0; float: none; }

@media (max-width: 880px) {
	.s-contact-row > .row_inner { grid-template-columns: 1fr; }
}

/* Themify Builder Contact module inside the card shell */
.themify_builder .module-contact.s-formcard {
	background: var(--s-white);
	border: 1px solid var(--s-line-soft);
	border-radius: var(--s-radius-lg);
	padding: clamp(1.5rem, .9rem + 2.4vw, 2.75rem);
	box-shadow: var(--s-shadow-sm);
}

.module-contact.s-formcard .module-title {
	font-size: var(--s-fs-h3);
	margin: 0 0 var(--s-5);
}

.module-contact.s-formcard label {
	display: block;
	font-size: var(--s-fs-xs);
	font-weight: 700;
	letter-spacing: var(--s-track-label);
	text-transform: uppercase;
	color: var(--s-muted);
	margin: 0 0 .5rem;
}

.module-contact.s-formcard input[type="text"],
.module-contact.s-formcard input[type="email"],
.module-contact.s-formcard input[type="tel"],
.module-contact.s-formcard textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--s-font-body);
	font-size: var(--s-fs-body);
	color: var(--s-ink);
	background: var(--s-cream);
	border: 1.5px solid var(--s-line-soft);
	border-radius: var(--s-radius-sm);
	padding: .85rem 1rem;
	margin-bottom: var(--s-5);
	transition: border-color .22s var(--s-ease), background-color .22s var(--s-ease),
	            box-shadow .22s var(--s-ease);
}

.module-contact.s-formcard textarea { min-height: 170px; resize: vertical; line-height: 1.6; }

.module-contact.s-formcard input:focus,
.module-contact.s-formcard textarea:focus {
	outline: none;
	border-color: var(--s-rust);
	background: var(--s-white);
	box-shadow: 0 0 0 4px rgba(123, 38, 13, .1);
}

.module-contact.s-formcard button[type="submit"],
.module-contact.s-formcard input[type="submit"] {
	background: var(--s-rust);
	color: #fff;
	font-family: var(--s-font-body);
	font-size: var(--s-fs-sm);
	font-weight: 700;
	border: 0;
	border-radius: var(--s-radius-pill);
	padding: 1.0625rem 2.2rem;
	cursor: pointer;
	width: auto;
	transition: background-color .25s var(--s-ease), transform .25s var(--s-ease),
	            box-shadow .25s var(--s-ease);
	box-shadow: 0 1px 2px rgba(92, 28, 9, .2), 0 10px 24px -10px rgba(92, 28, 9, .55);
}

.module-contact.s-formcard button[type="submit"]:hover,
.module-contact.s-formcard input[type="submit"]:hover {
	background: var(--s-rust-deep);
	transform: translateY(-2px);
}

/* reCAPTCHA sits between the last field and the button */
.module-contact.s-formcard .g-recaptcha,
.module-contact.s-formcard .tb_captcha { margin-bottom: var(--s-5); }

/* Ultra indents the submit row; align it with the inputs above. */
.module-contact.s-formcard .builder-contact-field-send { padding-left: 0; }
.module-contact.s-formcard .builder-contact-field { margin-bottom: 0; }

/* ==========================================================================
   24. 404
   ========================================================================== */

.s-404-row { min-height: 70vh; display: flex; align-items: center; }
.s-404 { padding-block: var(--s-8); }
.s-404 h1 { margin: 0 0 var(--s-5); }
.s-404 .s-lead { margin-bottom: var(--s-7); }

/* ==========================================================================
   22. THEMIFY OVERRIDES
   ========================================================================== */

/* Kill legacy module chrome that fights the new design */
.themify_builder .module-image .image-title { font-family: var(--s-font-display); }
.themify_builder .module_row .row_inner { max-width: none; }
.themify_builder .module { margin-bottom: 0; }

/* Builder columns: our own grids handle spacing */
.themify_builder .module_column { padding: 0; }

/* Lightbox backdrop */
.mfp-bg { background: rgba(18, 16, 14, .93); }

/* Back-to-top */
#back-top { display: none !important; }