/* =========================================================
   Camellia — custom theme styles
   Design tokens
========================================================= */
:root {
	--c-dark: #16181d;       /* charcoal / near-black */
	--c-dark-2: #1f232b;     /* secondary dark panel */
	--c-accent: #e6402f;     /* construction red */
	--c-accent-2: #ff7a5c;   /* lighter red, used sparingly in gradients */
	--c-cream: #f6f5f1;      /* light section background */
	--c-white: #ffffff;
	--c-body: #5b5f66;
	--c-border: #e7e5df;

	--font-display: "Plus Jakarta Sans", sans-serif;
	--font-body: "Manrope", sans-serif;

	--radius: 14px;
	--ease: cubic-bezier(.4, 0, .2, 1);
}

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	color: var(--c-body);
	background: var(--c-white);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--c-dark);
	font-weight: 600;
	letter-spacing: -0.01em;
}

a { text-decoration: none; color: inherit; transition: color .25s var(--ease); }

.section-pad { padding: 100px 0; }
@media (max-width: 991.98px) { .section-pad { padding: 64px 0; } }

.bg-light-alt { background: var(--c-cream); }
.bg-dark-alt { background: var(--c-dark); color: #cfd2d8; }
.bg-dark-alt .section-title,
.bg-dark-alt .eyebrow { color: var(--c-white); }

.text-accent { color: var(--c-accent) !important; }

.eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin-bottom: 14px;
	position: relative;
	padding-left: 28px;
}
.eyebrow::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 18px; height: 2px;
	background: var(--c-accent);
	transform: translateY(-50%);
}
.eyebrow-light { color: var(--c-accent-2); }

.section-title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; margin-bottom: 18px; }
.section-text { font-size: 16px; max-width: 46ch; }

/* =========================================================
   Buttons — sliding fill hover effect
========================================================= */
.btn { border-radius: 999px; font-weight: 600; padding: 12px 28px; font-family: var(--font-body); }

.btn-shine {
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: color .35s var(--ease);
}
.btn-shine::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-dark);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--ease);
	z-index: -1;
	border-radius: inherit;
}
.btn-shine:hover::before { transform: scaleX(1); transform-origin: left; }

.btn-accent { background: var(--c-accent); border: 1px solid var(--c-accent); color: var(--c-white); }
.btn-accent:hover { color: var(--c-white); }
.btn-accent.btn-shine::before { background: var(--c-dark); }

.btn-dark { background: var(--c-dark); border: 1px solid var(--c-dark); color: var(--c-white); }
.btn-dark:hover { color: var(--c-white); }
.btn-dark.btn-shine::before { background: var(--c-accent); }

.btn-outline-dark { border: 1px solid var(--c-border); color: var(--c-dark); background: transparent; }
.btn-play { display: inline-flex; align-items: center; gap: 12px; }
.play-circle {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--c-accent); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .3s var(--ease);
}
.btn-play:hover .play-circle { transform: scale(1.12); }

/* Underline link (arrow slides on hover) */
.link-underline {
	font-weight: 700;
	font-size: 14px;
	color: var(--c-dark);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
}
.link-underline.sm { font-size: 13px; }
.link-underline::after {
	content: "";
	position: absolute;
	left: 0; bottom: -4px;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); }
.link-underline i { transition: transform .3s var(--ease); }
.link-underline:hover i { transform: translate(3px, -3px); }

/* =========================================================
   Header
========================================================= */
.site-header {
	position: fixed;
	width: 100%;
	top: 30px;
	z-index: 1000;
	background: #ffffff;
	transition: box-shadow .3s var(--ease), padding .3s var(--ease);
	padding: 0px 0;
}
.site-header nav{
	padding: 0px;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(20, 20, 20, .08); padding: 0px 0;top: 0px;}

/* Logo: icon mark (4-petal bloom) + wordmark */
.site-logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 32px; height: 32px; display: inline-flex; flex-shrink: 0; }
.logo-mark svg { width: 100%; height: 100%; }
.logo-mark svg path { fill: var(--c-accent); }
.logo-word { font-family: var(--font-display); font-weight: 800; font-size: 25px; color: var(--c-dark); letter-spacing: -.01em; }
.custom-logo-link{
	width: 300px;
}
.custom-logo-link img{
	max-width: 200px;
	width: 100%;
	height: auto;
}
/* Nav: label + small accent dot, like "Home ." */
.navbar-nav .nav-link {
	color: var(--c-dark);
	font-weight: 700;
	font-size: 15px;
	padding: 10px 14px !important;
	position: relative;
}
.navbar-nav .nav-link::after {
	content: ".";
	color: var(--c-accent);
	font-weight: 800;
	margin-left: 2px;
}
.navbar-nav .nav-link.dropdown-toggle::after {
	content: ".";
	border: 0;              /* kill Bootstrap's default caret triangle */
	vertical-align: baseline;
}

.hover-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.5em;
    line-height: 1.5em;
    vertical-align: top;
}

.hover-text > span {
    display: block;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Main text */
.hover-text > span {
    transform: translateY(0);
}

/* Create the duplicate hover text from data-name */
.hover-text::before {
    content: attr(data-name);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Hover */
.nav-link:hover .hover-text > span {
    transform: translateY(100%);
}

.nav-link:hover .hover-text::before {
    transform: translateY(0);
}

.navbar-nav .nav-item:hover > .nav-link { color: var(--c-accent); }

.navbar-nav .dropdown-menu {
	border: none;
	border-radius: 10px;
	box-shadow: 0 20px 40px rgba(20, 20, 20, .12);
	padding: 10px;
	margin-top: 4px !important;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	display: block;
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.navbar-nav .dropdown.show > .dropdown-menu,
.navbar-nav .dropdown-menu.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.dropdown-item { border-radius: 6px; padding: 8px 14px; font-weight: 500; font-size: 14px; }
.dropdown-item:hover { background: var(--c-cream); color: var(--c-accent); }

/* Right side: support icon + phone, then split red CTA button */
.header-cta { gap: 26px; }

.header-support { padding-right: 26px; border-right: 1px solid var(--c-border); }
.support-icon {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--c-cream);
	color: var(--c-accent);
	font-size: 15px;
	display: inline-flex; align-items: center; justify-content: center;
}
.header-support small { color: #9a9da3; font-size: 12px; }
.header-support strong { font-size: 14px; color: var(--c-dark); }

.btn-quote {
	display: inline-flex;
	align-items: stretch;
	border-radius: 0px;
	overflow: hidden;
	background: var(--c-accent);
	min-height: 80px;
}
.btn-quote-label {
	display: flex; align-items: center;
	padding: 15px 40px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	transition: background .3s var(--ease);
}
.btn-quote-arrow {
	display: flex; align-items: center; justify-content: center;
	width: 48px;
	background: rgba(0, 0, 0, .14);
	color: #fff;
	font-size: 16px;
	transition: transform .3s var(--ease), background .3s var(--ease);
}
.btn-quote:hover .btn-quote-label { background: var(--c-dark); }
.btn-quote:hover .btn-quote-arrow { transform: translate(2px, -2px); background: var(--c-dark); }

.navbar-toggler { border: none; background: none; width: 30px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.navbar-toggler span { height: 2px; width: 100%; background: var(--c-dark); border-radius: 2px; transition: all .3s var(--ease); }

/* =========================================================
   Hero — full-bleed photo, dark/red overlay, huge headline
========================================================= */

.hero-section {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
}
 
/* Slide stack — each slide is a full-bleed background image that crossfades */
.hero-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
.hero-slide {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.1s var(--ease);
}
.hero-slide.active { opacity: 1; z-index: 1; }
 
/* Color wash over the photo for text contrast + brand tint (red bottom-left, blue bottom-right) */
.hero-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
	background:
		radial-gradient(55% 65% at 0% 100%, rgba(230, 64, 47, .6) 0%, rgba(230, 64, 47, 0) 62%),
		radial-gradient(50% 60% at 100% 100%, rgba(24, 52, 130, .55) 0%, rgba(24, 52, 130, 0) 62%),
		linear-gradient(90deg, rgba(10, 10, 12, .8) 0%, rgba(10, 10, 12, .5) 32%, rgba(10, 10, 12, .08) 58%, rgba(10, 10, 12, 0) 72%);
}
 
.hero-content { position: relative; z-index: 2; max-width: 780px; padding: 120px 0 190px; }
 
.hero-title {
	font-family: var(--font-display);
	font-weight: 800;
	color: #fff;
	font-size: clamp(42px, 6.2vw, 120px);
	line-height: .98;
	letter-spacing: -.01em;
	margin: 0 0 34px;
}
 
/* CTA: outline box + solid arrow square */
.btn-hero {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid rgba(255, 255, 255, .85);
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
}
.btn-hero-label {
	display: flex; align-items: center;
	padding: 15px 26px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	transition: background .3s var(--ease), color .3s var(--ease);
}
.btn-hero-arrow {
	display: flex; align-items: center; justify-content: center;
	width: 52px;
	background: var(--c-accent);
	color: #fff;
	font-size: 17px;
	transition: transform .3s var(--ease);
}
.btn-hero:hover .btn-hero-label { background: #fff; color: var(--c-dark); }
.btn-hero:hover .btn-hero-arrow { transform: translate(3px, -3px); }
 
/* ---- Bottom bar: numbered thumbnails with animated progress line ---- */
.hero-bottom {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: 0 0 40px;
}
 
.hero-thumbs { display: flex; gap: 0px; }
.hero-thumbs .hero-thumb { margin-right: 56px; } /* fallback for browsers without flex gap */
.hero-thumbs .hero-thumb:last-child { margin-right: 0; }
 
.hero-thumb {
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
	min-width: 150px;
}
 
/* Track = static thin line; Fill = the animated "loading" line that grows over the slide duration */
.thumb-track {
	display: block;
	width: 100%;
	height: 2px;
	background: rgba(255, 255, 255, .28);
	margin-bottom: 14px;
	position: relative;
	overflow: hidden;
}
.thumb-fill {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 0;
	background: var(--c-accent);
	transform-origin: left;
}
/* Duration here (6000ms) must match AUTOPLAY_MS in hero-slider.js */
.hero-thumb.active .thumb-fill { animation: heroThumbFill 6000ms linear forwards; }
 
.thumb-num {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 4px;
	transition: color .3s var(--ease);
}
.thumb-label {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	color: rgba(255, 255, 255, .5);
	transition: color .3s var(--ease);
}
.hero-thumb.active .thumb-num,
.hero-thumb.active .thumb-label { color: #fff; }
.hero-thumb:hover .thumb-num,
.hero-thumb:hover .thumb-label { color: rgba(255, 255, 255, .85); }
 
@keyframes heroThumbFill { from { width: 0; } to { width: 100%; } }
 
.hero-nav { display: flex; gap: 10px; }
.hero-nav-btn {
	width: 46px; height: 46px;
	border: 1.5px solid rgba(255, 255, 255, .4);
	background: transparent;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	cursor: pointer;
	transition: all .3s var(--ease);
}
.hero-nav-btn:hover { background: #fff; color: var(--c-dark); border-color: #fff; }
 
@media (max-width: 767.98px) {
	.hero-section { min-height: 620px; }
	.hero-content { padding: 48px 0 190px; }
	.hero-thumbs { gap: 24px; }
	.hero-thumbs .hero-thumb { margin-right: 24px; }
	.hero-thumb { min-width: 100px; }
	.thumb-label { font-size: 12px; }
}
@media (max-width: 575.98px) {
	.hero-bottom { padding-bottom: 24px; }
	.hero-thumbs { display: none; } /* keep only arrows on very small screens */
}
 
@media (prefers-reduced-motion: reduce) {
	.hero-slide, .thumb-fill { transition: none !important; animation-duration: .01ms !important; }
}


/* =========================================================
   Text Marquee — infinite scroll, gray → black on hover
========================================================= */

.text-marquee {
	overflow: hidden;
	width: 100%;
	padding: 60px 0;
	background: #fff;
	cursor: default;
}
 
.marquee-track {
	display: flex;
	width: max-content;
	animation: marqueeScroll 44s linear infinite;
}
 
/* Pause the scroll while hovering, same as most awwwards-style tickers */
/* .text-marquee:hover .marquee-track {
	animation-play-state: paused;
} */
 
.marquee-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
 
.marquee-group span {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	font-size: clamp(36px, 6vw, 84px);
	line-height: 1;
	white-space: nowrap;
	color: #e7e7e7;              /* default light gray */
	padding: 0 40px;
	transition: color .35s ease;
}

.marquee-group span { color: #e7e7e7; }
.marquee-group span:hover { color: #111214; }
 
@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* exactly half, since content is duplicated once */
}
 
@media (prefers-reduced-motion: reduce) {
	.marquee-track { animation: none; }
}

/* =========================================================
   Stats Cards — white cards turn into "photo cards" on hover
========================================================= */

.stats-section {
	position: relative;
	background: #dde4e9;
	padding: 90px 40px 0;
	overflow: hidden;
}

.stats-row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	max-width: 1400px;
	margin: 0 auto;
}

/* ---- Real <img>, intentionally taller than the row so it overflows top/bottom ---- */
.stats-image-wrap {
	flex: 1 1 auto;
	align-self: flex-end;
	margin: -110px 32px 0;
	position: relative;
	transform: scale(1.75);
    z-index: -1;
}
.stats-feature-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 700px;
	object-fit: cover;
	box-shadow: 0 40px 70px rgba(20, 22, 26, .28);
	will-change: transform;
}

/* ---- Shared card shell ---- */
.stat-card {
	position: relative;
	flex: 0 0 340px;
	width: 340px;
	min-height: 480px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.stat-card-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 34px;
}

.stat-label {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	transition: color .4s var(--ease);
}

.stat-number {
	font-size: clamp(46px, 4.4vw, 64px);
	font-weight: 800;
	line-height: 1;
	transition: color .4s var(--ease);
}
.stat-number span {
	font-weight: 600;
	font-size: .62em;
	margin-left: 2px;
}

.text-accent { color: var(--c-accent); transition: color .4s var(--ease); }

/* ---- Card 1: permanent photo card (the "target" look) ---- */
.stat-card-photo {
	color: #fff;
}
.stat-card-photo::after {
	/* subtle scrim so white text stays legible over any photo */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
	z-index: 1;
}
.stat-card-photo .stat-label,
.stat-card-photo .stat-number,
.stat-card-photo .text-accent { color: #fff; }

/* ---- Cards 2 & 3: white by default ---- */
.stat-card-white {
	background-color: #fff;
}
.stat-card-white .stat-label { color: var(--c-dark); }
.stat-card-white .stat-number { color: var(--c-dark); }

/* Hidden photo layer, revealed on hover */
.stat-card-white::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--hover-bg);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.1);
	transition: opacity .5s var(--ease), transform .7s var(--ease);
	z-index: 0;
}
/* Scrim that fades in with the photo, matching card 1's gradient */
.stat-card-white::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
	opacity: 0;
	transition: opacity .5s var(--ease);
	z-index: 1;
}

.stat-card-white:hover::before { opacity: 1; transform: scale(1); }
.stat-card-white:hover::after { opacity: 1; }

/* Text becomes white on hover, exactly like card 1 */
.stat-card-white:hover .stat-label,
.stat-card-white:hover .stat-number,
.stat-card-white:hover .text-accent {
	color: #fff;
}

.stat-card-floating { margin-right: 0; }

@media (max-width: 991.98px) {
	.stats-row { flex-wrap: wrap; gap: 20px; }
	.stat-card { flex: 1 1 260px; width: auto; min-height: 340px; margin-right: 0; }
	.stats-image-wrap { flex-basis: 100%; margin: 0; order: -1; }
	.stats-feature-img { max-height: 380px; object-fit: cover; box-shadow: none; }
}
.stats-section { padding-bottom: 90px; }


/* =========================================================
   Services Accordion — hover any card to expand it into the
   "featured" look (card 1's default appearance). Pure CSS.
========================================================= */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Manrope", sans-serif; background: #fff; }

:root {
	--c-dark: #14161a;
	--c-accent: #e6402f;
	--font-display: "Plus Jakarta Sans", sans-serif;
	--ease: cubic-bezier(.4, 0, .2, 1);
}

.services-section { padding: 90px 40px; max-width: 1500px; margin: 0 auto; }

.services-heading h2 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(32px, 4.4vw, 56px);
	line-height: 1.1;
	color: var(--c-dark);
	margin: 0 0 44px;
}

/* =========================================================
   Row + card shell
========================================================= */
.services-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	min-height: 400px;
}

.service-card {
	position: relative;
	flex: 1 1 0%;             /* collapsed width by default */
	min-width: 0;
	overflow: hidden;
	background-color: var(--c-accent);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 30px;
	cursor: pointer;
	transition: flex .55s var(--ease);
}

/* Card 1 starts wide; on row hover everything resets to 1, then the
   specifically-hovered card (which may or may not be card 1) re-expands.
   See the specificity notes inline — this ordering is intentional. */
.service-card.is-featured { flex: 2.3 1 0%; }
.services-row:hover .service-card { flex: 1 1 0%; }
.services-row:hover .service-card:hover { flex: 2.3 1 0%; }

/* Hidden photo layer + dark scrim, revealed only on the expanded card */
.service-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--card-bg);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity .5s var(--ease), transform .7s var(--ease);
	z-index: 0;
}
.service-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(190deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.62) 100%);
	opacity: 0;
	transition: opacity .5s var(--ease);
	z-index: 0;
}

.service-card.is-featured::before,
.service-card:hover::before { opacity: 1; transform: scale(1); }
.service-card.is-featured::after,
.service-card:hover::after { opacity: 1; }

.services-row:hover .service-card::before,
.services-row:hover .service-card::after { opacity: 0; }
.services-row:hover .service-card:hover::before { opacity: 1; transform: scale(1); }
.services-row:hover .service-card:hover::after { opacity: 1; }

/* =========================================================
   Icon — folded-corner document shape
========================================================= */
.card-icon {
	position: relative;
	z-index: 2;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	background: #fff;
	color: var(--c-dark);
	clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	transition: background .4s var(--ease), color .4s var(--ease);
}
.card-icon::after {
	content: "";
	position: absolute;
	top: 0; right: 0;
	width: 30%; height: 26%;
	background: #d8d8d8;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Icon inverts to red-on-white → white-on-red when expanded, matching card 1 */
.service-card.is-featured .card-icon,
.service-card:hover .card-icon { background: var(--c-accent); color: #fff; }
.services-row:hover .service-card .card-icon { background: #fff; color: var(--c-dark); }
.services-row:hover .service-card:hover .card-icon { background: var(--c-accent); color: #fff; }

/* =========================================================
   Text block
========================================================= */
.card-bottom { position: relative; z-index: 2; }

.card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.3;
	color: #fff;
	margin: 0;
	transition: font-size .45s var(--ease);
}
.service-card.is-featured .card-title,
.service-card:hover .card-title {
	font-size: 32px;
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 2px;
}
.services-row:hover .service-card .card-title { font-size: 21px; text-decoration: none; }
.services-row:hover .service-card:hover .card-title {
	font-size: 32px;
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 2px;
}

/* Description + button — hidden when collapsed, revealed when expanded */
.card-expanded-content {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity .35s var(--ease), max-height .5s var(--ease);
}
.card-expanded-content p {
	color: rgba(255,255,255,.85);
	font-size: 15px;
	line-height: 1.6;
	margin: 18px 0 22px;
	max-width: 34ch;
}

.service-card.is-featured .card-expanded-content,
.service-card:hover .card-expanded-content { max-height: 240px; opacity: 1; }
.services-row:hover .service-card .card-expanded-content { max-height: 0; opacity: 0; }
.services-row:hover .service-card:hover .card-expanded-content { max-height: 240px; opacity: 1; }

.btn-card-learn {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid rgba(255,255,255,.85);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
}
.btn-card-learn span:first-child {
	display: flex; align-items: center;
	padding: 12px 20px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	transition: background .3s var(--ease), color .3s var(--ease);
}
.btn-card-learn .arrow {
	display: flex; align-items: center; justify-content: center;
	width: 42px;
	background: var(--c-accent);
	color: #fff;
	transition: transform .3s var(--ease);
}
.btn-card-learn:hover span:first-child { background: #fff; color: var(--c-dark); }
.btn-card-learn:hover .arrow { transform: translate(2px, -2px); }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 991.98px) {
	.services-row { flex-wrap: wrap; min-height: 0; gap: 16px; }
	.service-card, .service-card.is-featured { flex: 1 1 100%; min-height: 320px; }
	.services-row:hover .service-card { flex: 1 1 100%; }
	.services-row:hover .service-card:hover { flex: 1 1 100%; }
	/* On touch/tablet, keep card 1 expanded-looking and let :hover still work per-card via tap */
}

@media (prefers-reduced-motion: reduce) {
	.service-card, .service-card::before, .service-card::after,
	.card-title, .card-expanded-content { transition: none !important; }
}



/* =========================================================
   Process / How We Work — cards stack on scroll
   Core stacking is pure CSS (position: sticky). No JS required
   for the effect itself — process-stack.js only adds an
   optional subtle scale/opacity depth touch.
========================================================= */
:root {
	--ease: cubic-bezier(.4, 0, .2, 1);
	--sticky-top: 120px; /* must match STICKY_TOP_PX in process-stack.js if you use it */
}

.process-section {
	background: #D1DEE4;
	padding: 110px 40px;
}

.process-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	gap: 70px;
	align-items: flex-start;
}

/* =========================================================
   Left column — pinned while the cards scroll past
========================================================= */
.process-left {
	flex: 0 0 520px;
	position: sticky;
	top: var(--sticky-top);
}

.process-tag {
	display: inline-block;
	background: var(--c-accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 10px 18px;
	margin-bottom: 26px;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.process-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.12;
	color: var(--c-dark);
	margin: 0;
}

/* =========================================================
   Right column — the stack
========================================================= */
.process-right {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.process-card-wrap {
	position: sticky;
	top: var(--sticky-top);
}

.process-card {
	background: #fff;
	box-shadow: 0 20px 50px rgba(20, 22, 26, .1);
	padding: 40px 44px;
	min-height: 340px;
	transition: transform .3s var(--ease), opacity .3s var(--ease);
	transform-origin: top center;
}

.process-card-head {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-bottom: 22px;
	border-bottom: 1px solid #ececec;
}

.process-num {
	flex-shrink: 0;
	width: 76px;
	height: 76px;
	background: var(--c-accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.process-card-head h3 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(22px, 2vw, 30px);
	color: var(--c-dark);
	margin: 0;
}

.process-card-body { padding-top: 30px; }

.process-step-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9aa0a8;
	margin-bottom: 14px;
}

.process-card-body p {
	font-size: 17px;
	line-height: 1.7;
	color: #3c4148;
	max-width: 56ch;
	margin: 0;
}
/* =========================================================
   Last card — inverted color style (red card, white badge)
========================================================= */
.process-card-wrap:last-child .process-card {
	background: var(--c-accent);
	box-shadow: 0 20px 50px rgba(230, 64, 47, .25);
}

.process-card-wrap:last-child .process-num {
	background: #fff;
	color: var(--c-dark);
}

.process-card-wrap:last-child .process-card-head {
	border-bottom-color: rgba(255, 255, 255, .3);
}

.process-card-wrap:last-child .process-card-head h3 {
	color: #fff;
}

.process-card-wrap:last-child .process-step-label {
	color: rgba(255, 255, 255, .75);
}

.process-card-wrap:last-child .process-card-body p {
	color: rgba(255, 255, 255, .92);
}
/* =========================================================
   Responsive — stop stacking on small screens, just stack in flow
========================================================= */
@media (max-width: 900px) {
	.process-inner { flex-direction: column; gap: 40px; }
	.process-left { position: static; }
	.process-card-wrap { position: static; }
	.process-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.process-card { transition: none; }
}


/* =========================================================
   Parallax Banner — full-bleed photo, red/dark overlay,
   centered headline (+ optional button)
========================================================= */
 
.parallax-banner {
	position: relative;
	height: 100vh;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
 
/* Dark scrim + red glow bottom-left, matching the brand treatment used elsewhere */
.parallax-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
	background:
		radial-gradient(55% 65% at 0% 100%, rgba(230, 64, 47, .65) 0%, rgba(230, 64, 47, 0) 60%),
		linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.25) 40%, rgba(10,10,12,.55) 100%);
}
 
.parallax-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 24px;
}
 
.parallax-title {
	font-family: var(--font-display);
	font-weight: 800;
	color: #fff;
	font-size: clamp(38px, 6.4vw, 96px);
	line-height: 1;
	letter-spacing: -.01em;
	margin: 0;
}
 
.btn-parallax {
	display: inline-flex;
	align-items: stretch;
	margin-top: 34px;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.btn-parallax span:first-child {
	display: flex; align-items: center;
	padding: 15px 26px;
	background: #fff;
	color: var(--c-dark);
	font-weight: 700;
	font-size: 15px;
	transition: background .3s var(--ease), color .3s var(--ease);
}
.btn-parallax-arrow {
	display: flex; align-items: center; justify-content: center;
	width: 52px;
	background: var(--c-accent);
	color: #fff;
	font-size: 17px;
	transition: transform .3s var(--ease);
}
.btn-parallax:hover span:first-child { background: var(--c-dark); color: #fff; }
.btn-parallax:hover .btn-parallax-arrow { transform: translate(3px, -3px); }
 
@media (max-width: 767.98px) {
	/* iOS Safari ignores background-attachment: fixed entirely (it silently
	   falls back to normal scroll behavior there), so no extra override is
	   needed — this rule just relaxes the forced full-height on short mobile
	   viewports so content never feels cramped. */
	.parallax-banner { height: auto; min-height: 100vh; }
}
 
@media (prefers-reduced-motion: reduce) {
	.parallax-banner { background-attachment: scroll; }
}


/* =========================================================
   Testimonials — full-bleed photo, quote card + author bar carousel
========================================================= */
.testimonials-section {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 90px 0 0px;
}

.testimonials-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(90deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.55) 42%, rgba(10,10,12,.2) 68%, rgba(10,10,12,.05) 100%);
}

.testimonials-row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

/* =========================================================
   Left column
========================================================= */
.testimonials-left { flex: 1 1 420px; max-width: 560px; padding-top: 40px; }

.section-tag {
	display: inline-block;
	background: var(--c-accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 9px 16px;
	margin-bottom: 24px;
	clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
}

.testimonials-title {
	font-family: var(--font-display);
	font-weight: 800;
	color: #fff;
	font-size: clamp(32px, 4vw, 54px);
	line-height: 1.12;
	margin: 0 0 50px;
}

.trusted-by p {
	color: rgba(255,255,255,.7);
	font-size: 14px;
	margin: 0 0 22px;
}
.trusted-by strong { color: #fff; font-weight: 700; }

/* Marquee wrapper — fades the edges so logos don't hard-cut at the bounds */
.logo-marquee {
	overflow: hidden;
	width: 100%;
	max-width: 560px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.logo-track {
	display: flex;
	width: max-content;
	animation: logoMarqueeScroll 16s linear infinite;
}
.logo-marquee:hover .logo-track {
	animation-play-state: paused;
}

.logo-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

@keyframes logoMarqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* exactly half, since content is duplicated once */
}

.client-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	opacity: .88;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.01em;
	white-space: nowrap;
	margin-right: 40px;
}
.client-logo svg { width: 22px; height: 22px; flex-shrink: 0; }
.client-logo small {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .7;
	margin-top: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.logo-track { animation: none; }
}

/* =========================================================
   Right column — quote card + author bar
========================================================= */
.testimonials-right {
	flex: 0 1 470px;
	width: 100%;
	max-width: 470px;
	position: relative;
    bottom: -75px !important;
}

.testimonial-card {
	background: #fff;
	padding: 42px 40px 46px;
	position: relative;
	z-index: 2;
	min-height: 350px;
}
.quote-icon {
	color: var(--c-accent);
	font-size: 44px;
	line-height: 1;
	display: block;
	margin-bottom: 18px;
}
.quote-text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.5;
	color: var(--c-dark);
	margin: 0;
	transition: opacity .3s var(--ease);
}
.quote-text u { text-decoration-thickness: 2px; text-underline-offset: 3px; }

.testimonial-author-bar {
	background: #1279cd;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	position: relative;
	z-index: 1;
	margin-top: -4px;
}
.author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	transition: opacity .3s var(--ease);
}
.author-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}
.author-info strong {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: opacity .3s var(--ease);
}
.author-info span {
	color: rgba(255,255,255,.62);
	font-size: 13px;
	transition: opacity .3s var(--ease);
}

.testimonial-pagination {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.testimonial-pagination span {
	color: rgba(255,255,255,.8);
	font-size: 13px;
	font-weight: 600;
	min-width: 30px;
	text-align: center;
}
.testimonial-pagination button {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.35);
	background: transparent;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
	cursor: pointer;
	transition: background .25s var(--ease), border-color .25s var(--ease);
}
.testimonial-pagination button:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

/* Fade-out/in state used briefly during a slide transition (see JS) */
.is-fading .quote-text,
.is-fading .author-avatar,
.is-fading .author-info strong,
.is-fading .author-info span {
	opacity: 0;
}

@media (max-width: 991.98px) {
	.testimonials-title { margin-bottom: 50px; }
	.testimonials-right { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.quote-text, .author-avatar, .author-info strong, .author-info span { transition: none; }
}



/* =========================================================
   News / Blog Grid
   Hover: image shifts left slightly, top divider line fills
   red from 0% to 100% width.
========================================================= */

.news-section { padding: 150px 10px; max-width: 1400px; margin: 0 auto; }

.news-heading { text-align: center; margin-bottom: 60px; }

.news-tag {
	display: inline-block;
	background: var(--c-accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 9px 18px;
	margin-bottom: 22px;
	clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

.news-heading h2 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(36px, 5.4vw, 72px);
	color: var(--c-dark);
	margin: 0;
	line-height: 1;
}

/* =========================================================
   Grid + cards
========================================================= */
.news-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.news-card { flex: 1 1 calc(33.333% - 27px); min-width: 280px; display: flex; flex-direction: column; }

/* Top divider line: gray track + red fill that animates 0% -> 100% on hover */
.news-card-line {
	position: relative;
	width: 100%;
	height: 1px;
	background: #e2e2e2;
	margin-bottom: 20px;
	overflow: hidden;
}
.news-card-fill {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 0%;
	background: var(--c-accent);
	transition: width .5s var(--ease);
}
.news-card:hover .news-card-fill { width: 100%; }

.news-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	font-size: 14px;
}
.news-card-cat { color: var(--c-accent); font-weight: 700; }
.news-card-date { color: #8a8d93; }

.news-card-img-wrap {
	overflow: hidden;
	margin-bottom: 24px;
	aspect-ratio: 5/4;
	min-height: 260px; /* fallback for browsers that don't support aspect-ratio */
}
.news-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--ease);
}
/* Image nudges left on hover */
.news-card:hover .news-card-img-wrap img {
	transform: translateX(-14px);
}

.news-card-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.25;
	color: var(--c-dark);
	margin: 0 0 20px;
	transition: color .3s var(--ease);
}
.news-card:hover .news-card-title { color: var(--c-accent); }

.news-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-dark);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	width: fit-content;
}
.news-card-link i { transition: transform .3s var(--ease); }
.news-card:hover .news-card-link i { transform: translate(3px, -3px); }

@media (max-width: 900px) {
	.news-grid { grid-template-columns: 1fr; gap: 50px; }
}



/* =========================================================
   Submit Request — full-bleed photo + floating form panel
========================================================= */
:root {
	--c-navy: #1e2a52;
}

.quote-section {
	position: relative;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	padding-bottom: 50px;
}

.quote-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(90deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.3) 45%, rgba(10,10,12,.08) 65%, rgba(10,10,12,0) 78%);
}
.quote-section .container{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}
/* =========================================================
   Left: tag + heading
========================================================= */
.quote-content {
	position: relative;
	z-index: 1;
	width: 50%;
}

.quote-tag {
	display: inline-block;
	background: var(--c-accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 9px 18px;
	margin-bottom: 22px;
	clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
}

.quote-title {
	font-family: var(--font-display);
	font-weight: 800;
	color: #fff;
	font-size: clamp(32px, 4.4vw, 58px);
	line-height: 1.12;
	margin: 0;
}

/* =========================================================
   Right: floating form panel
========================================================= */
.quote-form-panel {
	background: #fff;
	z-index: 2;
	width: 50%;
	margin-top: -80px;
}

.quote-form-header {
	background: var(--c-navy);
	padding: 26px 44px;
}
.quote-form-header h3 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 24px;
	color: #fff;
	margin: 0;
}

.quote-form { padding: 40px 44px 44px; }

.form-row {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.form-row .form-field { flex: 1 1 200px; }

.form-field { margin-bottom: 30px; }

.form-field label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--c-dark);
	margin-bottom: 10px;
}
.req { color: var(--c-accent); }

.form-field input,
.form-field textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid #cfd1d5;
	padding: 4px 0 10px;
	font-family: inherit;
	font-size: 15px;
	color: var(--c-dark);
	background: transparent;
	resize: vertical;
	transition: border-color .25s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--c-accent);
}
.form-field textarea { min-height: 70px; }

.btn-submit {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--c-dark);
	background: none;
	border-radius: 2px;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
}
.btn-submit span:first-child {
	display: flex; align-items: center;
	padding: 13px 26px;
	color: var(--c-dark);
	font-weight: 700;
	font-size: 15px;
	transition: background .3s var(--ease), color .3s var(--ease);
}
.btn-submit-arrow {
	display: flex; align-items: center; justify-content: center;
	width: 46px;
	background: var(--c-dark);
	color: #fff;
	font-size: 16px;
	transition: transform .3s var(--ease);
}
.btn-submit:hover span:first-child { background: var(--c-dark); color: #fff; }
.btn-submit:hover .btn-submit-arrow { transform: translate(3px, -3px); }

.form-success {
	display: none;
	margin: 18px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #1a7d3c;
}
.form-success.is-visible { display: block; }

@media (max-width: 900px) {
	.quote-section { min-height: 0; flex-direction: column; align-items: stretch; }
	.quote-form-panel { position: static; width: 100%; max-width: 100%; }
	.quote-content { padding: 60px 24px 40px; max-width: 100%; }
}





/* =========================================================
   Footer — dark background with red glow + vertical light rays
========================================================= */

.text-accent { color: var(--c-accent); }

.site-footer {
	position: relative;
	background: var(--c-dark);
	color: #c7c9cd;
	overflow: hidden;
	padding-top: 90px;
}

/* Red glow rising from the bottom-left, with a subtle vertical ray texture */
.footer-glow {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 62%;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 40px, rgba(0,0,0,0) 40px 80px),
		radial-gradient(60% 100% at 8% 100%, rgba(230, 64, 47, .85) 0%, rgba(230, 64, 47, .35) 42%, rgba(230, 64, 47, 0) 75%);
}

.footer-inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px 40px;
}

/* =========================================================
   Top: link columns + contact block
========================================================= */
.footer-top {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	padding-bottom: 60px;
}

.footer-columns {
	display: flex;
	gap: 70px;
	flex-wrap: wrap;
}

.footer-col h6 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	color: #8b8e94;
	margin: 0 0 22px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 14px; }
.footer-col a {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	transition: color .25s var(--ease);
}
.footer-col a:hover { color: var(--c-accent); }

.footer-contact { flex: 0 0 300px; }

.footer-logo-mark { width: 88px; height: 88px; margin-bottom: 26px; }
.footer-logo-mark svg { width: 100%; height: 100%; }
.footer-logo-mark svg path { fill: var(--c-accent); }

.footer-contact-item { margin-bottom: 20px; }
.footer-contact-item span {
	display: block;
	font-size: 13px;
	color: #8b8e94;
	margin-bottom: 4px;
}
.footer-contact-item strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
}

/* =========================================================
   Divider + tagline + social row
========================================================= */
.footer-divider { height: 1px; background: rgba(255,255,255,.1); margin-bottom: 40px; }

.footer-bottom-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
	padding-bottom: 120px;
}

.footer-tagline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.35;
	color: #fff;
	margin: 0;
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
	width: 44px; height: 44px;
	background: #1a1b1e;
	color: #fff;
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
	text-decoration: none;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.footer-social a:hover { background: var(--c-accent); }

/* =========================================================
   Legal row
========================================================= */
.footer-legal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 14px;
	color: #9a9da3;
}
.footer-legal a { color: #fff; text-decoration: underline; }
.footer-legal a:hover { color: var(--c-accent); }
.footer-legal p { margin: 0; }

/* =========================================================
   Back to top
========================================================= */
.back-to-top {
	position: fixed;
	right: 24px; bottom: 24px;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--c-accent);
	color: #fff;
	border: none;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	cursor: pointer;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .3s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #fff; color: var(--c-accent); }

@media (max-width: 900px) {
	.footer-top { flex-direction: column; }
	.footer-bottom-row { padding-bottom: 60px; }
}