/* Sinevir Pages - components for hub, service and company pages.
   Loads after the theme's site.css and uses its tokens (--rm-*). */

/* ---------- full-width fallback + hide the theme's page title ---------- */
html body.sv-page .page-wrapper { padding-top: 0; padding-bottom: 0; }
html body.sv-page .row.row-main { max-width: none; padding: 0; margin: 0; width: 100%; }
html body.sv-page .row.row-main > .col,
html body.sv-page .row.row-main > .large-12 { padding: 0; max-width: 100%; flex-basis: 100%; }
html body.sv-page .row.row-main > .col > .col-inner { padding: 0; }
html body.sv-page .entry-header,
html body.sv-page .page-wrapper > .row-main .entry-title { display: none; }

/* ---------- page hero ---------- */
.sv-hero { position: relative; overflow: hidden; background-color: var(--rm-ink, #121419); }
.sv-hero::before {
	content: "";
	position: absolute;
	inset: -48px;
	background-image:
		linear-gradient(rgba(127, 181, 238, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(127, 181, 238, .07) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
	animation: svGrid 38s linear infinite;
	pointer-events: none;
}
.sv-hero::after {
	content: "";
	position: absolute;
	width: 60vw;
	height: 60vw;
	right: -18vw;
	top: -24vw;
	background: radial-gradient(circle, rgba(22, 104, 185, .28), rgba(22, 104, 185, 0) 62%);
	pointer-events: none;
}
@keyframes svGrid { to { transform: translate(48px, 48px); } }
.sv-hero > .section-content { position: relative; z-index: 2; }
html body .sv-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.05; letter-spacing: -.03em; color: #fff; max-width: 13em; margin-bottom: .45em; }
.sv-hero .rm-lede { margin-bottom: 1.8rem; }

.sv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1.4rem; font-size: .85rem; color: rgba(244, 246, 249, .6); }
.sv-crumbs a { color: rgba(244, 246, 249, .78) !important; }
.sv-crumbs a:hover { color: #fff !important; }
.sv-crumbs [aria-current] { color: #fff; }
.rm-hero .sv-crumbs { margin-top: .5rem; }

.sv-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.6rem 0 0 !important; padding: 0; max-width: none !important; }
.sv-chips li {
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45em .9em;
	border: 1px solid rgba(244, 246, 249, .16);
	border-radius: 99px;
	font-size: .84rem;
	color: rgba(244, 246, 249, .82);
	background: rgba(244, 246, 249, .04);
}
.sv-chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rm-accent, #1668B9); box-shadow: 0 0 0 3px rgba(22, 104, 185, .25); }

.sv-hero-media { border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); transition: transform .6s var(--rm-ease, ease); }
.sv-hero-media .img-inner, .sv-hero-media img { border-radius: 14px; }

/* 3D slab in countertop heroes */
.sv-slab { position: relative; padding: 8px 0 0; }
.sv-slab .js-slabs3d { height: clamp(280px, 30vw, 420px); }
.sv-slab .rm-slab-picker { justify-content: center; gap: .4rem; margin: .6rem 0 1rem; }
.sv-slab .rm-slab-picker button { padding: .45rem .8rem; font-size: .82rem; }
.sv-slab .rm-slab-info { min-height: 0; margin: 0; }
.sv-slab .rm-slab-info p { font-size: .92rem; }

/* ---------- checklist (animated when it scrolls into view) ---------- */
.sv-checklist {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0 !important;
	padding: 0;
	max-width: none !important;
}
.sv-checklist li {
	position: relative;
	margin: 0 !important;
	padding: 1rem 1.1rem 1rem 3.1rem;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(18, 20, 25, .08);
	box-shadow: 0 10px 30px -22px rgba(18, 20, 25, .45);
	font-weight: 500;
	line-height: 1.45;
}
.sv-checklist li::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--rm-accent, #1668B9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.sv-js .sv-checklist li { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--rm-ease, ease), transform .6s var(--rm-ease, ease); transition-delay: calc(var(--i, 0) * 80ms); }
.sv-js .sv-checklist.is-in li { opacity: 1; transform: none; }
.sv-extra { font-size: .95rem; color: #4A505B; }

/* ---------- option tabs (Flatsome tabgroup) ---------- */
.sv-options .tabbed-content > .nav { gap: 0 1.6rem; border-bottom: 1px solid rgba(18, 20, 25, .12); margin-bottom: 2rem; flex-wrap: wrap; }
.sv-options .tabbed-content > .nav > li > a {
	padding: .9em 0;
	margin: 0;
	font-size: 1rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #6B717C;
}
.sv-options .tabbed-content > .nav > li.active > a,
.sv-options .tabbed-content > .nav > li > a:hover { color: var(--rm-ink, #121419); }
.sv-options .nav-line > li > a::before,
.sv-options .nav-line-bottom > li > a::before { background-color: var(--rm-accent, #1668B9) !important; height: 3px; }
.sv-options .tab-panels .panel.active { animation: svFade .45s var(--rm-ease, ease); }
@keyframes svFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- before / after slider ---------- */
.sv-ba {
	--x: 50%;
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	background: #1A1D23;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
	cursor: ew-resize;
	box-shadow: 0 30px 60px -36px rgba(18, 20, 25, .6);
}
.sv-ba-layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sv-ba-before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.sv-ba-layer.is-empty.sv-ba-before { background-image: repeating-linear-gradient(135deg, #5b6069 0 18px, #535861 18px 36px); }
.sv-ba-layer.is-empty.sv-ba-after { background-image: radial-gradient(ellipse at 70% 30%, #eef1f5, rgba(238, 241, 245, 0) 55%), linear-gradient(160deg, #cfd5de, #7e8795 55%, #1a1d23); }
.sv-ba-tag {
	position: absolute;
	top: 14px;
	padding: .35em .75em;
	border-radius: 99px;
	background: rgba(18, 20, 25, .7);
	color: #fff;
	font: 600 .78rem/1.2 var(--rm-sans, Inter, sans-serif);
	backdrop-filter: blur(6px);
	pointer-events: none;
}
.sv-ba-tag.is-before { left: 14px; }
.sv-ba-tag.is-after { right: 14px; }
.sv-ba-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); pointer-events: none; }
.sv-ba-handle {
	position: absolute;
	top: 50%;
	left: var(--x);
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121419' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 56% no-repeat;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
	cursor: ew-resize;
	min-height: 0;
}
.sv-ba-handle:focus-visible { outline: 3px solid var(--rm-accent-light, #7FB5EE); outline-offset: 3px; }
.sv-compare.sv-compare-ready > .col { display: none; }
.sv-compare.sv-compare-ready { display: block; margin: 0; }

/* ---------- note cards with pointer spotlight ---------- */
.sv-notes .sv-note > .col-inner {
	position: relative;
	height: 100%;
	padding: 1.7rem 1.6rem;
	border-radius: 14px;
	border: 1px solid rgba(244, 246, 249, .12);
	background: rgba(244, 246, 249, .035);
	overflow: hidden;
	transition: border-color .3s, transform .4s var(--rm-ease, ease);
}
.sv-notes .sv-note > .col-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(22, 104, 185, .22), transparent 60%);
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
.sv-notes .sv-note:hover > .col-inner { border-color: rgba(127, 181, 238, .4); transform: translateY(-3px); }
.sv-notes .sv-note:hover > .col-inner::before { opacity: 1; }
.sv-notes .sv-note h3 { font-size: 1.2rem; }
.sv-notes .sv-note p { margin: 0; }

/* ---------- service cards ---------- */
.sv-card .box-text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-card .box-text h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem) !important; }

/* ---------- comparison table ---------- */
.sv-table-wrap { overflow-x: auto; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px -34px rgba(18, 20, 25, .5); margin-top: 1.4rem; }
.sv-table { width: 100%; border-collapse: collapse; min-width: 640px; margin: 0; }
.sv-table th, .sv-table td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid rgba(18, 20, 25, .08); font-size: .95rem; }
.sv-table thead th { font-size: .8rem; font-weight: 600; color: #6B717C; background: #F4F6F9; }
.sv-table tbody tr { transition: background-color .2s; }
.sv-table tbody tr:hover { background: #F1F5FB; }
.sv-table tbody th a { font-weight: 700; color: var(--rm-ink, #121419) !important; }
.sv-table tbody tr:hover th a { color: var(--rm-accent-deep, #0A4C93) !important; }

/* ---------- project filter ---------- */
.sv-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.sv-filter button {
	appearance: none;
	margin: 0;
	min-height: 0;
	padding: .6rem 1.1rem;
	border-radius: 99px;
	border: 1px solid rgba(18, 20, 25, .16);
	background: #fff;
	color: var(--rm-ink, #121419);
	font: 600 .9rem/1.2 var(--rm-sans, Inter, sans-serif);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.sv-filter button:hover { border-color: var(--rm-ink, #121419); }
.sv-filter button.is-active { background: var(--rm-ink, #121419); color: #fff; border-color: var(--rm-ink, #121419); }
.sv-gallery .sv-item.is-hidden { display: none; }

/* ---------- contact ---------- */
.sv-contact-card > .col-inner { padding: 2rem; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px -40px rgba(18, 20, 25, .55); }
.sv-contact-line { display: flex; flex-direction: column; margin: 0 0 1rem !important; }
.sv-contact-line span { font-size: .78rem; font-weight: 600; color: #6B717C; margin-bottom: .15rem; }
.sv-contact-line a { font-weight: 600; }
.sv-map { margin-top: 1.4rem; border-radius: 12px; overflow: hidden; }
.sv-map iframe { display: block; width: 100%; height: 240px; border: 0; filter: saturate(.8); }

.sv-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; margin-top: 1.2rem; }
.sv-form .sv-field { display: flex; flex-direction: column; margin: 0; }
.sv-form .sv-field.is-wide { grid-column: 1 / -1; }
.sv-form label { font-size: .86rem; font-weight: 600; margin-bottom: .35rem; color: var(--rm-ink, #121419); }
.sv-form label abbr { color: var(--rm-accent, #1668B9); text-decoration: none; border: 0; }
.sv-form input[type=text], .sv-form input[type=email], .sv-form input[type=tel], .sv-form select, .sv-form textarea {
	width: 100%;
	margin: 0;
	padding: .8em .9em;
	border: 1px solid rgba(18, 20, 25, .18);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	font: 400 1rem/1.4 var(--rm-sans, Inter, sans-serif);
	color: var(--rm-ink, #121419);
	height: auto;
	transition: border-color .2s, box-shadow .2s;
}
.sv-form textarea { min-height: 150px; resize: vertical; }
.sv-form input:focus, .sv-form select:focus, .sv-form textarea:focus { outline: none; border-color: var(--rm-accent, #1668B9); box-shadow: 0 0 0 4px rgba(22, 104, 185, .15); }
.sv-form .sv-consent { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.sv-form .sv-consent input { margin-top: .25rem; }
.sv-form .sv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sv-form .sv-submit { grid-column: 1 / -1; }
.sv-form .sv-submit .button { margin: 0; }
.sv-form-msg { grid-column: 1 / -1; padding: 1rem 1.2rem; border-radius: 12px; font-weight: 500; margin: 0 0 .5rem; }
.sv-form-msg.is-ok { background: #E7F1FB; color: #0A4C93; }
.sv-form-msg.is-err { background: #FDECEC; color: #9A1C1C; }
@media (max-width: 549px) { .sv-form { grid-template-columns: 1fr; } }

/* three-step lists use three columns */
.rm-steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 849px) {
	.rm-steps:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; }
	.sv-checklist { grid-template-columns: 1fr; }
	html body .sv-hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
	.sv-hero .button { width: 100%; margin: 0 0 10px 0 !important; }
	.sv-hero-media { margin-top: 1rem; }
}

/* ---------- sticky consultation bar (phones) ---------- */
.sv-sticky {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 80;
	display: none;
	gap: 8px;
	padding: 8px;
	border-radius: 16px;
	background: rgba(18, 20, 25, .86);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
	transform: translateY(140%);
	transition: transform .4s var(--rm-ease, ease);
}
.sv-sticky.is-on { transform: none; }
.sv-sticky a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: 11px;
	font: 600 .95rem/1.2 var(--rm-sans, Inter, sans-serif);
	text-decoration: none;
}
.sv-sticky .sv-sticky-book { flex: 1; background: var(--rm-accent, #1668B9); color: #fff !important; }
.sv-sticky .sv-sticky-call { width: 48px; flex: 0 0 48px; background: rgba(244, 246, 249, .12); color: #fff !important; }
.sv-sticky .sv-sticky-call svg { width: 20px; height: 20px; }
@media (max-width: 849px) { .sv-sticky { display: flex; } }

@media (prefers-reduced-motion: reduce) {
	.sv-hero::before { animation: none; }
	.sv-js .sv-checklist li { opacity: 1; transform: none; transition: none; }
	.sv-options .tab-panels .panel.active { animation: none; }
}

/* ---------- link-style buttons ([button style="link"]) shown as clear outline buttons ----------
   The theme makes primary buttons white-on-blue; Flatsome then drops the background of
   link buttons, which left white text on light sections. These win over both. */
html body .button.is-link,
html body .button.primary.is-link:not(.is-outline) {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 2.75em;
	padding: .55em 1.3em !important;
	margin-top: .4em;
	border: 2px solid var(--rm-accent, #1668B9) !important;
	border-radius: var(--rm-radius-sm, 8px) !important;
	background: transparent !important;
	color: var(--rm-accent-deep, #0A4C93) !important;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color .2s, color .2s, border-color .2s;
}
html body .button.is-link::after,
html body .button.primary.is-link:not(.is-outline)::after { content: "\2192"; transition: transform .2s; }
html body .button.is-link:hover,
html body .button.primary.is-link:not(.is-outline):hover {
	background: var(--rm-accent, #1668B9) !important;
	border-color: var(--rm-accent, #1668B9) !important;
	color: #fff !important;
}
html body .button.is-link:hover::after { transform: translateX(3px); }
html body .dark .button.is-link,
html body .dark .button.primary.is-link:not(.is-outline) {
	border-color: rgba(244, 246, 249, .7) !important;
	color: #fff !important;
}
html body .dark .button.is-link:hover,
html body .dark .button.primary.is-link:not(.is-outline):hover { background: #fff !important; border-color: #fff !important; color: var(--rm-ink, #121419) !important; }

/* ---------- homepage image slider (replaces the 3D hero; see Sinevir Pages > Import) ---------- */
.rm-hero-slider-wrap { padding: 0 !important; }
.rm-hero-slider .banner { background-color: var(--rm-night, #1A1D23); }
.rm-hero-slider .banner .overlay {
	background: linear-gradient(90deg, rgba(18, 20, 25, .86) 0%, rgba(18, 20, 25, .62) 42%, rgba(18, 20, 25, .18) 100%) !important;
}
.rm-hero-slider .banner .bg { transform-origin: 60% 50%; }
.rm-hero-slider .banner.is-selected .bg,
.rm-hero-slider .is-selected .banner .bg { animation: svKen 9s ease-out both; }
@keyframes svKen { from { transform: scale(1.08); } to { transform: scale(1); } }
/* text waits for its slide only once the slider is running, so it can never stay hidden */
.rm-hero-slider.flickity-enabled .text-box .text-inner > * { opacity: 0; }
.rm-hero-slider .is-selected .text-box .text-inner > * { animation: svUp .8s cubic-bezier(.2, .7, .2, 1) both; }
.rm-hero-slider .is-selected .text-box .text-inner > *:nth-child(2) { animation-delay: .12s; }
.rm-hero-slider .is-selected .text-box .text-inner > *:nth-child(3) { animation-delay: .24s; }
.rm-hero-slider .is-selected .text-box .text-inner > *:nth-child(n+4) { animation-delay: .36s; }
@keyframes svUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rm-hero-slider .rm-eyebrow {
	display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1rem;
	font: 600 .82rem/1.2 var(--rm-sans, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--rm-accent-light, #7FB5EE);
}
.rm-hero-slider .rm-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
html body .rm-hero-slider h1, html body .rm-hero-slider h2 {
	color: #fff; font-size: clamp(2.3rem, 4.6vw, 4.1rem); line-height: 1.05; letter-spacing: -.03em; margin-bottom: .45em; max-width: 13em;
}
.rm-hero-slider .text-box p:not(.rm-eyebrow) { color: rgba(244, 246, 249, .84); font-size: clamp(1.02rem, 1.3vw, 1.2rem); max-width: 34em; margin-bottom: 1.8rem; }
.rm-hero-slider .flickity-page-dots { bottom: 26px; }
.rm-hero-slider .flickity-page-dots .dot { width: 28px; height: 4px; border-radius: 4px; background: #fff; opacity: .4; border: 0; margin: 0 4px; }
.rm-hero-slider .flickity-page-dots .dot.is-selected { opacity: 1; background: var(--rm-accent-light, #7FB5EE); }
@media (max-width: 849px) {
	.rm-hero-slider .banner .overlay { background: linear-gradient(180deg, rgba(18, 20, 25, .55) 0%, rgba(18, 20, 25, .82) 100%) !important; }
	.rm-hero-slider .text-box .button { width: 100%; margin: 0 0 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.rm-hero-slider .banner.is-selected .bg, .rm-hero-slider .is-selected .banner .bg, .rm-hero-slider .is-selected .text-box .text-inner > * { animation: none; opacity: 1; }
	.rm-hero-slider.flickity-enabled .text-box .text-inner > * { opacity: 1; }
}

/* ---------- buttons on dark heroes and sections: brand blue + crisp glass outline ---------- */
html body .rm-hero-slider .button.primary:not(.is-outline):not(.is-link),
html body .dark .button.primary:not(.is-outline):not(.is-link) {
	background-color: var(--rm-accent, #1668B9) !important;
	border-color: var(--rm-accent, #1668B9) !important;
	color: #fff !important;
	box-shadow: 0 12px 30px -12px rgba(22, 104, 185, .85);
	transition: transform .25s var(--rm-ease, ease), box-shadow .25s, background-color .2s;
}
html body .rm-hero-slider .button.primary:not(.is-outline):not(.is-link):hover,
html body .dark .button.primary:not(.is-outline):not(.is-link):hover {
	background-color: #1d77d1 !important;
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -12px rgba(22, 104, 185, .95);
}
html body .rm-hero-slider .button.is-outline:not(.is-link),
html body .dark .button.is-outline:not(.is-link) {
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, .9) !important;
	background-color: rgba(255, 255, 255, .07) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 1 !important;
	transition: transform .25s var(--rm-ease, ease), background-color .2s, color .2s;
}
html body .rm-hero-slider .button.is-outline:not(.is-link):hover,
html body .dark .button.is-outline:not(.is-link):hover {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--rm-ink, #121419) !important;
	transform: translateY(-2px);
}

/* ---------- slider moves with the mouse (driven by sv.js) ---------- */
.rm-hero-slider .banner { --mx: 0; --my: 0; --px: 50%; --py: 50%; }
.rm-hero-slider .banner .bg { translate: calc(var(--mx) * -22px) calc(var(--my) * -14px); will-change: transform, translate; }
.rm-hero-slider .banner .text-box { translate: calc(var(--mx) * 10px) calc(var(--my) * 6px); }
.rm-hero-slider .banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(520px circle at var(--px) var(--py), rgba(127, 181, 238, .18), transparent 60%);
	opacity: 0;
	transition: opacity .5s;
}
.rm-hero-slider.is-pointer .banner::after { opacity: 1; }
.rm-hero-slider .banner .text-box { z-index: 2; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
	.rm-hero-slider .banner .bg, .rm-hero-slider .banner .text-box { translate: none; }
	.rm-hero-slider .banner::after { display: none; }
}

/* ---------- slider on phones: taller slide, text anchored low, nothing hidden under the header ---------- */
@media (max-width: 549px) {
	.rm-hero-slider .banner { min-height: 680px; }
	.rm-hero-slider .banner .text-box {
		top: auto !important;
		bottom: 64px !important;
		transform: translateX(-50%) !important;
		left: 50% !important;
		width: 90% !important;
		max-height: calc(100% - 96px);
	}
	html body .rm-hero-slider h1, html body .rm-hero-slider h2 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); margin-bottom: .35em; }
	.rm-hero-slider .text-box p:not(.rm-eyebrow) { font-size: 1rem; line-height: 1.5; margin-bottom: 1.2rem; }
	.rm-hero-slider .rm-eyebrow { margin-bottom: .6rem; font-size: .74rem; }
	.rm-hero-slider .text-box .button { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 50px; font-size: 1rem; padding: .7em 1em !important; margin: 0 0 10px !important; }
	.rm-hero-slider .text-box, .rm-hero-slider .text-box * { box-sizing: border-box; }
	.rm-hero-slider .flickity-page-dots { bottom: 22px; }
}

/* ==========================================================================
   Calais Construction brand: navy, blue, teal and gray, Montserrat headings.
   Overrides the theme tokens, so every section, button and link follows.
   ========================================================================== */
html:root {
	--rm-night: #0F2236;
	--rm-ink: #0B1A2B;
	--rm-steel: #7C7F84;
	--rm-accent: #22629A;
	--rm-accent-deep: #12395F;
	--rm-accent-light: #6FC7CC;
	--rm-teal: #1A9AA2;
	--rm-gray: #7C7C78;
	--rm-line: rgba(11, 26, 43, .14);
	--rm-display: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html body h1, html body h2, html body h3, html body h4,
html body .heading-font, html body .section-title { font-family: var(--rm-display); letter-spacing: -.015em; }
html body h1 { font-weight: 800; }
html body h2, html body h3 { font-weight: 700; }

/* teal highlights */
.sv-chips li::before { background: var(--rm-teal); box-shadow: 0 0 0 3px rgba(26, 154, 162, .25); }
.sv-checklist li::before { background-color: var(--rm-teal); }
.rm-hero-slider .rm-eyebrow, .rm-eyebrow { color: var(--rm-accent-light); }
.sv-filter button.is-active { background: var(--rm-accent-deep); border-color: var(--rm-accent-deep); }
.sv-table tbody tr:hover { background: #EEF5F8; }

/* navy instead of charcoal on the page components */
.sv-hero { background-color: #0B1A2B; }
.sv-hero::after { background: radial-gradient(circle, rgba(26, 154, 162, .22), rgba(26, 154, 162, 0) 62%); }
.sv-sticky { background: rgba(11, 26, 43, .9); }
.sv-ba { background: var(--rm-night); }
.rm-hero-slider .banner { background-color: var(--rm-night); }
.rm-hero-slider .banner .overlay {
	background: linear-gradient(90deg, rgba(11, 26, 43, .88) 0%, rgba(11, 26, 43, .6) 42%, rgba(11, 26, 43, .15) 100%) !important;
}
@media (max-width: 849px) {
	.rm-hero-slider .banner .overlay { background: linear-gradient(180deg, rgba(11, 26, 43, .5) 0%, rgba(11, 26, 43, .85) 100%) !important; }
}
.rm-hero-slider .banner::after { background: radial-gradient(520px circle at var(--px) var(--py), rgba(111, 199, 204, .18), transparent 60%); }
html body .rm-hero-slider .button.primary:not(.is-outline):not(.is-link):hover,
html body .dark .button.primary:not(.is-outline):not(.is-link):hover { background-color: #2a72b0 !important; box-shadow: 0 18px 36px -12px rgba(34, 98, 154, .95); }
html body .rm-hero-slider .button.primary:not(.is-outline):not(.is-link),
html body .dark .button.primary:not(.is-outline):not(.is-link) { box-shadow: 0 12px 30px -12px rgba(34, 98, 154, .85); }

.sv-disclaimer { font-size: .85rem; color: rgba(244, 246, 249, .6); margin: -.6rem 0 1.4rem; }