/*
 * Marketing home / landing page (Views/Home/Index.cshtml)
 * Extracted verbatim from the view's inline <style> block.
 */
	/* ─── Global ─────────────────────────────────────────────── */
	:root {
		--color-red:      var(--color-blue);
		--color-dark:     #000000;
		--color-dark-rgb: 0, 0, 0;
	}

	html { scroll-behavior: smooth; }
	body { overflow-x: hidden; }

	/* ─── Navbar ─────────────────────────────────────────────── */
	.landing-nav-link {
		color: #000 !important;
		font-weight: 600;
		font-size: 1.15rem;
		padding: .5rem 1rem;
		border-radius: .375rem;
		transition: color .2s, background .2s;
		text-decoration: none;
	}
	.landing-nav-link:hover { color: var(--color-red) !important; background: none; }
	.landing-nav-link.active { color: var(--color-red) !important; }

	/* ── Organizations menu: dropdown on desktop, accordion in the mobile drawer ── */
	.landing-nav-orgs-toggle { cursor: pointer; }
	/* The label lives in a .menu-title span, which Metronic's .menu-title-gray-600 /
	   .menu-state-title-primary rules colour gray (then blue on hover) at a specificity the
	   inherited .landing-nav-link colour can't beat. Match the plain black nav links instead. */
	#kt_landing_menu .landing-nav-orgs-toggle .menu-title { color: #000 !important; }
	#kt_landing_menu .landing-nav-orgs-toggle:hover .menu-title,
	#kt_landing_menu .menu-item.hover > .landing-nav-orgs-toggle .menu-title { color: var(--color-red) !important; }
	/* Metronic's .menu-arrow is a side chevron (it rotates for the accordion), so desktop gets its
	   own down-caret instead — see the d-lg-none on the arrow span. */
	.landing-nav-orgs-toggle::after {
		content: "";
		display: none;
		margin-left: .4rem;
		border: .3rem solid transparent;
		border-top-color: currentColor;
		transform: translateY(.15rem);
	}
	/* Flat panel — Metronic's dropdown shadow (0 0 50px rgba(82,63,105,.15)) is removed, and its
	   move-up animation with it: the panel fades in place instead of sliding up. */
	#kt_landing_menu .landing-nav-orgs {
		box-shadow: none;
		animation: menu-sub-dropdown-animation-fade-in .2s ease 1;
	}
	.landing-nav-orgs .menu-link.landing-nav-org-link {
		color: #181c32;
		font-size: 1.05rem;
		font-weight: 600;
		padding: .55rem 1.25rem;
		text-decoration: none;
	}
	/* KTMenu sets .hover on the item; cover plain :hover too for keyboard/touch paths. */
	.landing-nav-orgs .menu-item.hover > .menu-link.landing-nav-org-link,
	.landing-nav-orgs .menu-link.landing-nav-org-link:hover {
		color: var(--color-red);
		background: #f5f8fa;
	}

	@media (min-width: 992px) {
		.landing-nav-orgs-toggle::after { display: inline-block; }
	}

	@media (max-width: 991px) {
		.mobile-menu-block { width: 100%; padding: .6rem 0; }
		.nav-mobile .landing-nav-link { color: #000 !important; display: block; padding: .65rem 1rem; }
		/* The block rule above out-specifies Metronic's flex .menu-link — the toggle needs flex back
		   so its accordion arrow sits on the baseline of the label instead of wrapping. */
		.nav-mobile .landing-nav-orgs-toggle { display: flex; align-items: center; }

		/* ── Mobile header bar: [☰] ……… [logo] ……… [Organizations ⌄] ──
		The Organizations picker is promoted out of the drawer into the bar, to the RIGHT
		of the logo (.landing-mobile-orgs). Navy, not the brand accent: next to a plain
		hamburger and a wordmark it should read as part of the bar's own type, with the
		caret carrying the "this opens" signal. Scoped by the --mobile modifier alone —
		these rules were parent-scoped to .landing-mobile-lead once, and silently died
		(chevron and 44px tap floor included) when the picker moved across the bar. */
		.landing-nav-orgs-toggle--mobile {
			padding: .4rem .5rem;
			min-height: 44px; /* px, not rem — tap target */
			font-size: 1.35rem;
			font-weight: 600;
			white-space: nowrap; /* never wrap "Organizations" onto a second line */
		}
		.landing-nav-orgs-toggle--mobile .menu-title { color: #181c32 !important; }
		/* Chevron, not the desktop toggle's solid triangle — a lighter mark at this size. */
		.landing-nav-orgs-toggle--mobile::after {
			display: inline-block;
			width: .5rem;
			height: .5rem;
			margin-left: .55rem;
			border: 0;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			transform: rotate(45deg) translateY(-.12rem);
		}
		/* Floating white card (the drawer's flat-list treatment below doesn't apply here). */
		.landing-nav-orgs.landing-nav-orgs--mobile {
			min-width: 13rem;
			box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
			border-radius: .75rem;
		}
		/* Org names sit a step above the shared 1.05rem so they carry at phone size, under the
		   1.35rem toggle that opens them. */
		.landing-nav-orgs--mobile .menu-link.landing-nav-org-link {
			font-size: 1.2rem;
			padding: .7rem 1.35rem;
			min-height: 44px; /* px, not rem — tap target */
		}

		/* Hamburger ⇄ close. KTDrawer puts .active (and .show) on its toggle while the drawer
		   is open, and Bootstrap's pressed-button styling then paints a dark filled box behind
		   the glyph. Neutralise every state: this is a bare glyph, not a button surface. */
		.btn.landing-menu-toggle,
		.btn.landing-menu-toggle:hover,
		.btn.landing-menu-toggle:focus,
		.btn.landing-menu-toggle:active,
		.btn.landing-menu-toggle.active,
		.btn.landing-menu-toggle.show {
			width: 44px;
			height: 44px;
			padding: 0;
			background: transparent !important;
			border-color: transparent !important;
			box-shadow: none !important;
			color: #181c32 !important;
		}
		.landing-menu-icon--close { display: none; }
		.landing-menu-toggle.active .landing-menu-icon--open { display: none; }
		.landing-menu-toggle.active .landing-menu-icon--close { display: block; }

		/* Keep the bar out of the drawer's scrim, two ways, because z-index alone wasn't enough:
		   KTSticky writes an inline z-index on this header once the page is scrolled past its
		   offset, and an inline value beats a plain rule — hence !important. The overlay is then
		   ALSO started below the bar, so the header can never sit under the scrim whatever the
		   stacking works out to. home.css only loads on the landing page, so scoping this to the
		   one drawer here needs no extra selector. */
		.landing-header {
			position: relative;
			z-index: 111 !important;
			background: #fff;
		}
		.drawer-overlay {
			top: var(--landing-header-h, 60px);
		}

		/* Drawer sits UNDER the header bar so the close button stays visible and tappable.
		   --landing-header-h is measured in home.js (the header's height moves with the logo
		   and sticky state); the fallback keeps it usable if that script never runs. */
		.nav-mobile.drawer {
			top: var(--landing-header-h, 60px);
			bottom: auto;
			max-height: calc(100dvh - var(--landing-header-h, 60px));
			padding: 0 !important;
			border-bottom-right-radius: 1rem;
			box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
		}
		.nav-mobile.drawer #kt_landing_menu { width: 100%; }
		/* One roomy row per link, hairline-separated. */
		.nav-mobile .menu-item + .menu-item { border-top: 1px solid #eef2f6; }
		.nav-mobile .landing-nav-link {
			padding: 1.1rem 1.5rem;
			font-size: 1.2rem;
			font-weight: 500;
		}

		/* CTAs at the end of the drawer list: full-width pills, sized like the hero buttons —
		   the phone-width rules further down shrink .btn-nav-* with !important, which is right
		   in the desktop header bar but leaves them undersized here. */
		.landing-drawer-cta {
			display: flex;
			flex-direction: column;
			gap: .85rem;
			padding: 1.25rem 1.5rem 1.5rem;
		}
		.landing-drawer-cta .btn-nav-login,
		.landing-drawer-cta .btn-nav-cta {
			display: flex;
			width: 100%;
			text-align: center;
			padding: .9rem 1.5rem !important;
			font-size: 1.15rem !important;
			border-radius: 50px;
		}
	}

	/* ─── Hero ───────────────────────────────────────────────── */
	.hero-section {
		position: relative;
		min-height: 92vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, rgba(0,0,0,.96) 0%, rgba(0,158,247,.28) 100%),
		            url('/media/images/hero-moto.webp') center center / cover no-repeat;
		padding: 120px 0 80px;
	}
	.hero-section::after {
		content: '';
		position: absolute;
		bottom: -1px; left: 0; right: 0;
		height: 60px;
		background: #fff;
		clip-path: ellipse(55% 100% at 50% 100%);
	}
	.hero-title {
		font-size: clamp(2.5rem, 5vw, 3.8rem);
		font-weight: 700;
		line-height: 1.15;
		color: #fff;
		text-shadow: 0 2px 12px rgba(0,0,0,.55);
	}
	.hero-title .accent { color: var(--color-blue); }
	.hero-sub {
		font-size: clamp(1.25rem, 2.4vw, 1.55rem);
		color: #fff;
		max-width: 560px;
		margin: 0 auto;
		line-height: 1.7;
		text-shadow: 0 1px 8px rgba(0,0,0,.4);
	}
	.btn-hero-primary {
		background: var(--color-red);
		color: #fff;
		font-weight: 700;
		padding: .85rem 2.25rem;
		border-radius: 50px;
		border: none;
		font-size: 1.15rem;
		text-decoration: none;
		transition: background .2s, transform .2s, box-shadow .2s;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.btn-nav-cta { padding: .6rem 1.4rem; font-size: 1rem; }
	.btn-nav-login {
		padding: .6rem 1.4rem;
		font-size: 1rem;
		font-weight: 700;
		border-radius: 50px;
		border: 2px solid var(--color-blue);
		color: var(--color-blue);
		background: transparent;
		text-decoration: none;
		transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.btn-nav-login:hover {
		background: #0085d0;
		border-color: #0085d0;
		color: #fff;
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0,105,180,.45);
	}

	.btn-hero-primary:hover {
		background: #0085d0;
		color: #fff;
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0,105,180,.45);
	}
	/* Second organization CTA. Same pill geometry as .btn-hero-primary so the two org buttons read
	   as peers rather than as two tiers — the difference is an inversion, not a new brand colour,
	   which also keeps it legible against the hero photo. */
	.btn-hero-light {
		background: #fff;
		color: var(--color-blue);
		font-weight: 700;
		padding: .85rem 2.25rem;
		border-radius: 50px;
		border: none;
		font-size: 1.15rem;
		text-decoration: none;
		transition: background .2s, color .2s, transform .2s, box-shadow .2s;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.btn-hero-light:hover {
		background: var(--surface-tint);
		color: var(--color-blue);
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(255,255,255,.35);
	}
	.btn-hero-outline {
		background: transparent;
		color: #fff;
		font-weight: 700;
		padding: .85rem 2.25rem;
		border-radius: 50px;
		border: 2px solid rgba(255,255,255,.55);
		font-size: 1.15rem;
		text-decoration: none;
		transition: background .2s, border-color .2s, transform .2s;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.btn-hero-outline:hover {
		background: rgba(255,255,255,.12);
		border-color: #fff;
		color: #fff;
		transform: translateY(-2px);
	}

	/* ─── Stats bar ──────────────────────────────────────────── */
	.stats-bar { background: #fff; padding: 2.5rem 0; border-bottom: 1px solid #f0f0f0; }
	.stat-item { text-align: center; }
	.stat-number { font-size: 3rem; font-weight: 700; color: var(--color-dark); line-height: 1; }
	.stat-label { font-size: 1.1rem; color: #000; font-weight: 500; margin-top: .25rem; }

	/* ─── Section titles ─────────────────────────────────────── */
	.section-label {
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--color-red);
		display: block;
		margin-bottom: .5rem;
	}
	.section-title {
		font-size: clamp(1.9rem, 3.5vw, 2.7rem);
		font-weight: 700;
		color: var(--color-dark);
		line-height: 1.2;
	}
	.section-sub { font-size: 1.3rem; color: #000; max-width: 600px; margin: 0 auto; line-height: 1.7; }
	.section-title-white { color: #fff; }
	.section-sub-white { color: #fff; }

	/* ─── Feature cards ──────────────────────────────────────── */
	.feature-card {
		background: #fff;
		border: 1px solid #e8ecf0;
		border-radius: 1rem;
		padding: 2rem 1.75rem;
		height: 100%;
		transition: transform .25s, box-shadow .25s, border-color .25s;
	}
	.feature-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(0,0,0,.10);
		border-color: var(--color-red);
	}
	a.feature-card-link {
		display: block;
		text-decoration: none;
		color: inherit;
	}
	a.feature-card-link:hover,
	a.feature-card-link:focus {
		color: inherit;
	}
	.feature-icon {
		width: 56px; height: 56px;
		border-radius: .75rem;
		background: rgba(0,158,247,.10);
		display: flex; align-items: center; justify-content: center;
		margin-bottom: 1.25rem;
	}
	.feature-icon svg { width: 28px; height: 28px; }
	.feature-title { font-size: 1.35rem; font-weight: 700; color: var(--color-dark); margin-bottom: .5rem; }
	.feature-desc { font-size: 1.15rem; color: #000; line-height: 1.65; }

	/* ─── How it Works ───────────────────────────────────────── */
	.step-card { text-align: center; padding: 1.5rem 1rem; }
	.step-number {
		width: 52px; height: 52px;
		border-radius: 50%;
		background: var(--color-red);
		color: #fff;
		font-size: 1.3rem;
		font-weight: 800;
		display: flex; align-items: center; justify-content: center;
		margin: 0 auto 1.25rem;
	}
	.step-icon { margin-bottom: 1rem; }
	.step-icon svg { width: 72px; height: 72px; }
	.step-title { font-size: 1.3rem; font-weight: 700; color: var(--color-dark); margin-bottom: .5rem; }
	.step-desc { font-size: 1.15rem; color: #000; line-height: 1.6; }

	/* connector line between steps on desktop */
	.steps-row { position: relative; }
	@media (min-width: 992px) {
		.steps-row::before {
			content: '';
			position: absolute;
			top: 26px; left: 12.5%; right: 12.5%;
			height: 2px;
			background: repeating-linear-gradient(90deg, var(--color-red) 0 8px, transparent 8px 16px);
			z-index: 0;
		}
		.step-card { position: relative; z-index: 1; }
	}

	/* ─── Showcase carousel ──────────────────────────────────── */
	.showcase-section { background: #000; padding: 80px 0; }
	.showcase-carousel-item { border-radius: 1rem; overflow: hidden; height: 500px; }
	.showcase-carousel-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; }
	.carousel-control-prev-icon, .carousel-control-next-icon {
		background-color: rgba(0,0,0,.65);
		border-radius: 50%;
		padding: 1.5rem;
		background-size: 60%;
	}
	@media (max-width: 768px) { .showcase-carousel-item { height: 240px; } }

	/* ─── Testimonials ───────────────────────────────────────── */
	.testimonial-card {
		background: #fff;
		border: 1px solid #e8ecf0;
		border-radius: 1rem;
		padding: 2rem 1.75rem;
		height: 100%;
		position: relative;
	}
	.testimonial-card::before { content: none; }
	.testimonial-text { font-size: 1.2rem; color: #000; line-height: 1.75; margin-bottom: 1.5rem; }
	.testimonial-author { font-weight: 700; color: var(--color-dark); font-size: 1.15rem; }
	.testimonial-role { font-size: 1.05rem; color: #000; }
	.stars { color: #f59e0b; font-size: 1.25rem; margin-bottom: .75rem; }

	/* ─── Pricing ────────────────────────────────────────────── */
	.pricing-card {
		background: #fff;
		border-radius: 1.5rem;
		padding: 3rem 2.5rem;
		max-width: 500px;
		margin: 0 auto;
		text-align: center;
	}
	.pricing-badge {
		display: inline-block;
		background: rgba(0,105,180,.12);
		color: var(--color-red);
		font-weight: 700;
		font-size: .9rem;
		letter-spacing: .08em;
		text-transform: uppercase;
		border-radius: 50px;
		padding: .3rem .9rem;
		margin-bottom: 1.25rem;
	}
	.pricing-amount { font-size: 3.8rem; font-weight: 800; color: var(--color-dark); line-height: 1; }
	.pricing-unit { font-size: 1.2rem; color: #000; font-weight: 500; }
	.pricing-divider { border-top: 1px solid #e8ecf0; margin: 1.75rem 0; }
	.pricing-feature {
		display: flex; align-items: center; gap: .75rem;
		font-size: 1.15rem; color: #000;
		margin-bottom: .875rem; text-align: left;
	}
	.pricing-feature svg { flex-shrink: 0; color: #16a34a; }
	.btn-pricing {
		background: var(--color-dark);
		color: #fff;
		font-weight: 700;
		padding: 1rem 2.5rem;
		border-radius: 50px;
		border: none;
		font-size: 1.05rem;
		text-decoration: none;
		width: 100%;
		display: block;
		text-align: center;
		transition: background .2s, transform .2s;
		margin-top: 1.75rem;
	}
	.btn-pricing:hover { background: var(--color-red); color: #fff; transform: translateY(-2px); }

	/* ─── FAQ ────────────────────────────────────────────────── */
	.faq-item {
		border: 1px solid #e8ecf0;
		border-radius: .875rem;
		margin-bottom: .875rem;
		overflow: hidden;
		transition: box-shadow .2s;
	}
	.faq-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
	.faq-question {
		width: 100%;
		background: #fff;
		border: none;
		padding: 1.25rem 1.5rem;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 700;
		font-size: 1.2rem;
		color: var(--color-dark);
		margin: 0;
		gap: 1rem;
	}
	.faq-answer { background: #fafafa; padding: 1rem 1.5rem 1.5rem; }
	.faq-answer p { font-size: 1.15rem; color: #000; line-height: 1.7; margin: 0; }

	/* ─── CTA Banner ─────────────────────────────────────────── */
	.cta-banner {
		background: linear-gradient(135deg, #000 0%, #007bc4 100%);
		border-radius: 1.5rem;
		padding: 4rem 3rem;
	}
	@media (max-width: 768px) { .cta-banner { padding: 2.5rem 1.5rem; border-radius: 1rem; } }
	.btn-cta {
		background: #fff;
		color: #000;
		font-weight: 700;
		padding: .9rem 2.5rem;
		border-radius: 50px;
		border: none;
		font-size: 1.05rem;
		text-decoration: none;
		transition: transform .2s, box-shadow .2s;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		white-space: nowrap;
	}
	.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); color: #000; }

	/* ─── Footer ─────────────────────────────────────────────── */
	.site-footer { background: #000; padding: 3.5rem 0 2rem; }
	.footer-logo img { width: 234px; max-width: 100%; height: auto; aspect-ratio: 10101 / 1212; }
	.footer-tagline { color: rgba(255,255,255,.75); font-size: 1.2rem; margin-top: .5rem; }
	.footer-link { color: rgba(255,255,255,.8); text-decoration: none; font-size: 1.15rem; transition: color .2s; }
	.footer-link:hover { color: #fff; }
	.footer-divider { border-top: 1px solid rgba(255,255,255,.12); margin: 2rem 0 1.5rem; }
	.footer-copy { color: rgba(255,255,255,.9); font-size: 1.05rem; }
	.footer-copy a { color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; }
	.footer-copy a:hover { color: #fff; }

	/* ─── Utilities ──────────────────────────────────────────── */
	.section-py { padding: 90px 0; }

	/* ─── Mobile ─────────────────────────────────────────────── */
	@media (max-width: 767.98px) {
		/* Hero */
		.hero-section {
			min-height: 80vh;
			padding: 90px 0 60px;
		}
		.hero-sub { font-size: 1.05rem; }
		.btn-hero-primary, .btn-hero-light, .btn-hero-outline {
			width: 100%;
			font-size: 1rem;
		}
		/* Section spacing */
		.section-py { padding: 56px 0; }
		/* Stats */
		.stat-number { font-size: 2rem; }
		.stat-label { font-size: .95rem; }
		.stats-bar { padding: 2rem 0; }
		/* Feature cards — full width, less padding */
		.feature-card { padding: 1.5rem 1.25rem; }
		.feature-title { font-size: 1.1rem; }
		.feature-desc { font-size: 1rem; }
		/* Steps */
		.step-card { padding: 1rem .75rem; }
		.step-title { font-size: 1.1rem; }
		.step-desc { font-size: 1rem; }
		/* Showcase */
		.showcase-section { padding: 48px 0; }
		.showcase-carousel-item { height: 220px; }
		/* Testimonials */
		.testimonial-card { padding: 1.5rem 1.25rem; }
		.testimonial-text { font-size: 1rem; }
		/* Pricing */
		.pricing-card { padding: 2rem 1.5rem; max-width: 100%; }
		.pricing-amount { font-size: 2.8rem; }
		.pricing-feature { font-size: 1rem; }
		/* FAQ */
		.faq-question { font-size: 1rem; padding: 1rem 1.25rem; }
		.faq-answer p { font-size: 1rem; }
		.faq-answer.open { padding: .875rem 1.25rem 1.25rem; }
		/* CTA banner */
		.cta-banner { padding: 2.25rem 1.5rem; border-radius: 1rem; text-align: center; }
		.btn-cta { width: 100%; font-size: 1rem; }
		/* Footer */
		.site-footer { padding: 2.5rem 0 1.5rem; }
		.footer-tagline { font-size: .95rem; }
		.footer-bottom-row { text-align: center; }
	}

	@media (max-width: 575.98px) {
		.landing-header .container { padding-left: 8px; padding-right: 8px; }
		.btn-nav-cta { padding: .5rem 1.1rem !important; font-size: .95rem !important; white-space: nowrap; }
		.btn-nav-login { padding: .5rem 1.1rem !important; font-size: .95rem !important; white-space: nowrap; }
		.landing-header .flex-equal:last-child { flex: 0 0 auto; }
		.hero-section { padding: 80px 0 52px; }
		.section-title { font-size: 1.65rem; }
		.section-sub { font-size: 1.05rem; }
		.stat-number { font-size: 1.75rem; }
	}


/* ── Classes promoted from former inline styles on the landing page ── */
/* 2026 V4 horizontal lockup (8.33:1, upright lettering — same height, ~1% narrower): width-driven so the header height is deterministic before the SVG loads.
   Widths are chosen so the V4 wordmark's x-height matches the retired mark's (measured, Sep 2026): the old
   lockup rendered at h-30px / h-lg-40px, but its PNG carried ~13% transparent padding top and bottom and its
   wordmark sat inside a taller podium icon (x-height 11.8px phone / 15.5px desktop). The V4 wordmark is as tall
   as its icon, so at 234px it was 24% taller than the old text (x-height 19.2px) and read as "too tall" in the
   header. 189px desktop / 146px phone put the V4 x-height at 15.5px / 11.8px (heights ~22.7px / ~17.5px).
   On phones the flex-equal brand box is only ~185px wide, so any width above that is silently capped by
   max-width. display:block removes the inline baseline gap under the img, so the mark centres on the row's axis. */
.home-logo-img { display: block; width: 146px; max-width: 100%; height: auto; aspect-ratio: 10101 / 1212; }
@media (min-width: 992px) { .home-logo-img { width: 189px; } }
.home-hero-badge { background: rgba(255,255,255,.15); color: #fff; font-size: .875rem; letter-spacing: .06em; }
.section-bg-light { background: #f8fafc; }
.section-bg-dark { background: var(--color-dark); }
.section-label-light { color: rgba(255,255,255,.8); }
.home-link-plain { color: #000; text-decoration: none; }
.home-link-red { color: var(--color-red); }
.home-contact-note { font-size: 1rem; color: #000; }
.home-cta-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.home-cta-sub { opacity: .9; font-size: 1.15rem; max-width: 500px; }
.home-cta-btn-outline { border-color: rgba(255,255,255,.4); }
.home-footer-heading { font-size: 1.05rem; }