/* ==========================================================================
   HandyLoft – Design System
   Faithful, self-hosted reproduction of the original Tailwind/HTML design.
   No Tailwind runtime, no CDN. All widgets + header/footer consume these rules.
   Sections:
     0  Tokens
     1  Base & typography
     2  Layout helpers
     3  Effects (glass, gradients, reveal, keyframes)
     4  Buttons
     5  Navbar + mobile menu
     6  Footer
     7  Back-to-top
     8  Cookie banner
     9  Hero
     10 Partners
     11 Feature cards (trust + service)
     12 Section heading
     13 Service row (+ glass benefit cards)
     14 Testimonial banner
     15 Testimonials grid
     16 Stats + prose cards
     17 Contact (info + form)
     18 404
     19 Blog / prose
     20 Responsive
   ========================================================================== */

/* 0 — TOKENS ============================================================== */
:root {
	--hl-primary: #0F172A;
	--hl-secondary: #3B82F6;
	--hl-accent: #06B6D4;
	--hl-surface: #FFFFFF;
	--hl-bg: #FAFAFA;
	--hl-muted: #64748B;
	--hl-border: #E2E8F0;

	--hl-green: #22C55E;
	--hl-yellow: #FACC15;
	--hl-gray-50: #F9FAFB;
	--hl-gray-200: #E5E7EB;
	--hl-gray-400: #9CA3AF;
	--hl-gray-500: #6B7280;
	--hl-blue-50: #EFF6FF;
	--hl-cyan-50: #ECFEFF;
	--hl-slate-100: #F1F5F9;

	--hl-nav-h: 5rem;             /* h-20 */
	--hl-container: 80rem;        /* max-w-7xl */
	--hl-radius-xl: 0.75rem;
	--hl-radius-2xl: 1rem;
	--hl-radius-3xl: 1.5rem;
	--hl-ease: cubic-bezier(0.16, 1, 0.3, 1);

	--hl-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 1 — BASE & TYPOGRAPHY ================================================== */
.hl-body {
	margin: 0;
	background-color: var(--hl-bg);
	color: var(--hl-primary);
	font-family: var(--hl-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
	/* Remove the grey/black flash browsers paint over tapped links & buttons on touch devices. */
	-webkit-tap-highlight-color: transparent;
}
.hl-body * { box-sizing: border-box; }
/* Belt-and-braces: kill the tap overlay on every interactive element too. */
.hl-body a, .hl-body button, .hl-navbar__toggle, .hl-mobile-menu a, .hl-btn { -webkit-tap-highlight-color: transparent; }

.hl-icon { display: inline-block; width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.hl-main { padding-top: var(--hl-nav-h); }

/* Skip link — visually hidden until focused (style.css is not enqueued, so it lives here). */
.hl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--hl-primary);
	color: #fff;
	border-radius: 0 0 8px 0;
	text-decoration: none;
}
.hl-skip-link:focus { left: 0; }

/* No-JS safety: never leave reveal content hidden if JS is unavailable. */
.no-js .reveal, .no-js .hl-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }

/* WordPress admin bar must not overlap the fixed navbar. */
.admin-bar .hl-navbar { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .hl-navbar { top: 46px; }
}

/* Custom scrollbar (matches original) */
.hl-body::-webkit-scrollbar { width: 8px; }
.hl-body::-webkit-scrollbar-track { background: var(--hl-bg); }
.hl-body::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.hl-body::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* 2 — LAYOUT HELPERS ==================================================== */
.hl-container {
	max-width: var(--hl-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
	width: 100%;
}
@media (min-width: 1024px) { .hl-container { padding-inline: 2rem; } }
.hl-container--narrow { max-width: 48rem; }

.hl-section { padding-block: 6rem; padding-inline: 1.5rem; }
.hl-section--tight { padding-block: 4rem; }

/* Block band: default vertical rhythm for content widgets (override in Elementor > Advanced). */
.hl-block { padding-block: 6rem; }
/* Compact rhythm when several bands are stacked as one group (e.g. service rows). */
.hl-block--grouped { padding-block: 3rem; }

/* 3 — EFFECTS =========================================================== */
.mesh-gradient {
	background-color: var(--hl-bg);
	background-image:
		radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.08) 0px, transparent 50%),
		radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
		radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.08) 0px, transparent 50%),
		radial-gradient(at 0% 100%, rgba(6, 182, 212, 0.08) 0px, transparent 50%);
}
.glass {
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
.glass-card {
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
}
.text-gradient {
	background: linear-gradient(135deg, #0F172A 0%, #3B82F6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.reveal, .hl-reveal {
	opacity: 0;
	transform: translateY(30px);
	filter: blur(10px);
	transition: all 0.8s var(--hl-ease);
}
.reveal.active, .hl-reveal.active { opacity: 1; transform: translateY(0); filter: blur(0); }
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }

@keyframes hl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes hl-pulse-slow { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes hl-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.hl-float { animation: hl-float 6s ease-in-out infinite; }
.hl-pulse-slow { animation: hl-pulse-slow 4s cubic-bezier(0.4,0,0.6,1) infinite; }

@media (prefers-reduced-motion: reduce) {
	.reveal, .hl-reveal { transition: none; opacity: 1; transform: none; filter: none; }
	.hl-float, .hl-pulse-slow { animation: none; }
	html.scroll-smooth { scroll-behavior: auto; }
}

/* 4 — BUTTONS =========================================================== */
.hl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.3s ease;
	white-space: nowrap;
}
.hl-btn .hl-icon { width: 1rem; height: 1rem; }
.hl-btn--pill { border-radius: 9999px; }
.hl-btn--block { width: 100%; }
.hl-btn--sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.hl-btn--md { padding: 0.75rem 1.5rem; font-size: 1rem; }
.hl-btn--lg { padding: 1rem 2rem; font-size: 1rem; }

.hl-btn--primary { background: var(--hl-primary); color: #fff; }
.hl-btn--primary:hover {
	background: var(--hl-secondary);
	box-shadow: 0 20px 25px -5px rgba(59,130,246,.25), 0 8px 10px -6px rgba(59,130,246,.25);
	transform: translateY(-2px);
}
.hl-btn--ghost { background: var(--hl-surface); color: var(--hl-primary); border-color: var(--hl-border); }
.hl-btn--ghost:hover { background: var(--hl-gray-50); transform: translateY(-2px); }
.hl-btn--primary:focus-visible,
.hl-btn--ghost:focus-visible { outline: 2px solid var(--hl-secondary); outline-offset: 2px; }

/* 5 — NAVBAR ============================================================ */
.hl-navbar {
	position: fixed;
	top: 0;
	inset-inline: 0;
	width: 100%;
	z-index: 50;
	transition: box-shadow .3s ease, background .3s ease;
}
.hl-navbar.is-scrolled {
	background: rgba(255,255,255,0.9);
	box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.hl-navbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--hl-nav-h);
}

/* Brand */
.hl-brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.hl-brand__mark {
	width: 2.5rem; height: 2.5rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--hl-radius-xl);
	font-weight: 700; font-size: 1.25rem;
	transition: transform .3s ease;
}
.hl-brand--header .hl-brand__mark { background: var(--hl-primary); color: #fff; }
.hl-brand--footer .hl-brand__mark { background: #fff; color: var(--hl-primary); }
.hl-brand:hover .hl-brand__mark { transform: scale(1.05); }
.hl-brand__logo-img { display: block; height: 40px; width: auto; max-width: 200px; }
.hl-brand__logo-img--footer { height: 38px; }
.hl-brand__text { font-weight: 700; letter-spacing: -0.025em; }
.hl-brand--header .hl-brand__text { font-size: 1.25rem; color: var(--hl-primary); }
.hl-brand--footer .hl-brand__text { font-size: 1.5rem; color: #fff; }
.hl-brand__accent { color: var(--hl-secondary); }

/* Desktop menu */
.hl-navbar__menu { display: none; }
.hl-nav__list {
	display: flex; align-items: center; gap: 2rem;
	list-style: none; margin: 0; padding: 0;
}
.hl-nav__list a {
	font-size: 0.875rem; font-weight: 500;
	color: var(--hl-muted); text-decoration: none;
	transition: color .2s ease;
}
.hl-nav__list a:hover,
.hl-nav__list .current-menu-item > a,
.hl-nav__list .current_page_item > a { color: var(--hl-primary); }

.hl-navbar__cta { display: none; align-items: center; gap: 1.5rem; }

.hl-repair-link { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; text-decoration: none; }
.hl-repair-link__label {
	display: inline-flex; align-items: center; gap: 0.25rem;
	font-size: 0.875rem; font-weight: 500; color: var(--hl-primary);
	transition: color .2s ease;
}
.hl-repair-link:hover .hl-repair-link__label { color: var(--hl-secondary); }
.hl-repair-link__ext { width: 0.75rem; height: 0.75rem; opacity: 0.4; transition: opacity .2s ease; }
.hl-repair-link:hover .hl-repair-link__ext { opacity: 1; }
.hl-repair-link__note { font-size: 0.625rem; letter-spacing: 0.025em; color: var(--hl-muted); opacity: 0.6; transition: opacity .2s ease; }
.hl-repair-link:hover .hl-repair-link__note { opacity: 1; }

/* Mobile toggle */
.hl-navbar__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; color: var(--hl-primary); cursor: pointer; padding: 0.25rem;
}
.hl-navbar__toggle .hl-icon { width: 1.5rem; height: 1.5rem; }
.hl-navbar__toggle-close { display: none; }
.hl-navbar__toggle[aria-expanded="true"] .hl-navbar__toggle-open { display: none; }
.hl-navbar__toggle[aria-expanded="true"] .hl-navbar__toggle-close { display: inline-block; }

/* Mobile menu panel */
.hl-mobile-menu {
	position: absolute; inset-inline: 0; top: 100%; width: 100%;
	border-top: 1px solid rgba(226,232,240,0.5);
}
/* Keep the dropdown readable over page content (backdrop-blur is unreliable on some devices). */
.hl-mobile-menu.glass { background: rgba(255,255,255,0.98); box-shadow: 0 20px 30px -12px rgba(0,0,0,.15); }
.hl-mobile-menu[hidden] { display: none; }
.hl-mobile-menu__inner { padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.hl-mobile-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.hl-mobile-menu__list a { font-size: 1rem; font-weight: 500; color: var(--hl-primary); text-decoration: none; }
.hl-mobile-menu__repair {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-size: 1rem; font-weight: 500; color: var(--hl-secondary); text-decoration: none;
}
.hl-mobile-menu__book { align-self: flex-start; }
.hl-nav__setup { font-size: 0.8rem; color: var(--hl-secondary); text-decoration: underline; }

/* 6 — FOOTER ============================================================ */
.hl-footer {
	background: var(--hl-primary);
	color: #fff;
	padding: 5rem 1.5rem 2.5rem;
	border-top: 1px solid rgba(255,255,255,0.1);
}
.hl-footer__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; }
.hl-footer__brand .hl-brand { margin-bottom: 1.5rem; }
.hl-footer__desc { color: var(--hl-gray-400); max-width: 24rem; margin: 0 0 1.5rem; line-height: 1.6; }
.hl-footer__social { display: flex; gap: 0.75rem; }
.hl-footer__social-link {
	width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 9999px; background: rgba(255,255,255,0.08); color: #fff; transition: background .2s ease;
}
.hl-footer__social-link:hover { background: var(--hl-secondary); }
.hl-footer__heading { font-size: 1.125rem; font-weight: 600; margin: 0 0 1.5rem; color: #fff; }
.hl-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.hl-footer__list a { color: var(--hl-gray-400); text-decoration: none; transition: color .2s ease; }
.hl-footer__list a:hover { color: #fff; }
.hl-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 2rem;
	display: flex; flex-direction: column; gap: 1rem;
	justify-content: space-between; align-items: center;
	font-size: 0.875rem; color: var(--hl-gray-500);
}
.hl-footer__bottom p { margin: 0; }

/* 7 — BACK TO TOP ======================================================= */
.hl-back-to-top {
	position: fixed; bottom: 2rem; right: 2rem;
	width: 3rem; height: 3rem; border: 0; border-radius: 9999px;
	background: var(--hl-primary); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
	opacity: 0; pointer-events: none; transform: translateY(0);
	transition: all .3s ease; z-index: 40;
}
.hl-back-to-top.is-visible { opacity: 1; pointer-events: auto; }
.hl-back-to-top:hover { background: var(--hl-secondary); transform: translateY(-4px); }
.hl-back-to-top .hl-icon { width: 1.5rem; height: 1.5rem; }

/* 8 — COOKIE BANNER ===================================================== */
.hl-cookie-banner {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
	background: #fff; border-top: 1px solid var(--hl-border);
	padding: 1.5rem; box-shadow: 0 -10px 30px rgba(0,0,0,.12);
	transform: translateY(100%); transition: transform .5s ease;
}
.hl-cookie-banner.is-visible { transform: translateY(0); }
.hl-cookie-banner[hidden] { display: block; } /* JS controls visibility via class */
.hl-cookie-banner__inner {
	display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
	justify-content: space-between;
}
.hl-cookie-banner__text { flex: 1; }
.hl-cookie-banner__title { font-size: 1rem; font-weight: 600; color: var(--hl-primary); margin: 0 0 0.25rem; }
.hl-cookie-banner__text p { font-size: 0.875rem; color: var(--hl-muted); margin: 0; }
.hl-cookie-banner__text a { color: var(--hl-secondary); text-decoration: underline; }
.hl-cookie-banner__actions { display: flex; gap: 1rem; }
.hl-cookie-banner__actions .hl-btn { font-size: 0.875rem; padding: 0.625rem 1.5rem; }

/* 9 — HERO ============================================================== */
.hl-hero {
	position: relative;
	min-height: 85vh;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	padding: 3rem 1.5rem;
}
.hl-hero__blob { position: absolute; border-radius: 9999px; filter: blur(64px); pointer-events: none; }
.hl-hero__blob--1 { top: 5rem; right: 0; width: 500px; height: 500px; background: rgba(59,130,246,0.1); }
.hl-hero__blob--2 { bottom: 0; left: 0; width: 400px; height: 400px; background: rgba(6,182,212,0.1); animation-delay: 2s; }
.hl-hero__inner { max-width: 64rem; margin-inline: auto; text-align: center; position: relative; z-index: 10; }
.hl-badge {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.5rem 1rem; border-radius: 9999px;
	background: #fff; border: 1px solid var(--hl-border);
	box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: 2rem;
}
.hl-badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--hl-green); animation: hl-pulse-dot 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.hl-badge__text { font-size: 0.875rem; font-weight: 500; color: var(--hl-muted); }
.hl-hero__title {
	font-size: 3rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em;
	color: var(--hl-primary); margin: 0 0 1.5rem;
}
.hl-hero__subtitle {
	font-size: 1.125rem; line-height: 1.625; color: var(--hl-muted);
	max-width: 42rem; margin: 0 auto 2.5rem;
}
.hl-hero__actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.hl-hero__actions .hl-btn { width: 100%; }

/* 10 — PARTNERS ========================================================= */
.hl-partners {
	padding: 4rem 1.5rem;
	border-block: 1px solid rgba(226,232,240,0.5);
	background: rgba(255,255,255,0.6);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	text-align: center;
}
.hl-partners__eyebrow {
	font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.2em; color: var(--hl-muted); margin: 0 0 2.5rem;
}
.hl-partners__list {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 1.5rem;
}
.hl-partner {
	display: inline-flex; align-items: center; gap: 0.75rem;
	padding: 0.75rem 1.5rem; border-radius: var(--hl-radius-2xl);
	background: #fff; border: 1px solid var(--hl-border);
	transition: border-color .3s ease, box-shadow .3s ease;
}
.hl-partner:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.hl-partner__dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; opacity: 0.6; transition: opacity .3s ease; }
.hl-partner:hover .hl-partner__dot { opacity: 1; }
.hl-partner__name { font-size: 1.125rem; font-weight: 700; color: var(--hl-gray-400); transition: color .3s ease; }
.hl-partner:hover .hl-partner__name { color: var(--hl-primary); }
.hl-partners__note { font-size: 0.75rem; color: var(--hl-muted); margin: 2rem 0 0; }

/* 11 — FEATURE CARDS ==================================================== */
/* Trust variant: horizontal, soft icon tile */
.hl-trust { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.hl-trust__item { display: flex; align-items: flex-start; gap: 1rem; }
.hl-icon-tile {
	width: 3rem; height: 3rem; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--hl-radius-2xl);
}
.hl-icon-tile .hl-icon { width: 1.5rem; height: 1.5rem; }
.hl-icon-tile--blue { background: var(--hl-blue-50); color: var(--hl-secondary); }
.hl-icon-tile--cyan { background: var(--hl-cyan-50); color: var(--hl-accent); }
.hl-icon-tile--slate { background: var(--hl-slate-100); color: var(--hl-primary); }
.hl-trust__title { font-weight: 600; color: var(--hl-primary); margin: 0 0 0.25rem; }
.hl-trust__text { font-size: 0.875rem; color: var(--hl-muted); margin: 0; }

/* Service variant: vertical card, dark icon */
.hl-service-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.hl-service-card {
	background: #fff; padding: 2rem; border-radius: var(--hl-radius-3xl);
	border: 1px solid var(--hl-border);
	transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.hl-service-card:hover {
	transform: translateY(-8px);
	border-color: rgba(59,130,246,0.3);
	box-shadow: 0 20px 25px -5px rgba(59,130,246,.05);
}
.hl-service-card__icon {
	width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--hl-radius-2xl); background: var(--hl-primary); color: #fff;
	transition: transform .3s ease;
}
.hl-service-card__icon .hl-icon { width: 1.75rem; height: 1.75rem; }
.hl-service-card:hover .hl-service-card__icon { transform: scale(1.1); }
.hl-service-card__title { font-size: 1.25rem; font-weight: 600; color: var(--hl-primary); margin: 0 0 0.75rem; }
.hl-service-card__text { font-size: 0.875rem; line-height: 1.625; color: var(--hl-muted); margin: 0; }

.hl-bg-white-50 { background: rgba(255,255,255,0.5); }

/* 12 — SECTION HEADING ================================================== */
.hl-heading { text-align: center; max-width: 42rem; margin-inline: auto; }
.hl-heading--wide { max-width: 48rem; }
.hl-heading__eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hl-secondary); }
.hl-heading__title { font-size: 1.875rem; line-height: 1.1; font-weight: 700; color: var(--hl-primary); margin: 0.75rem 0 1rem; letter-spacing: -0.01em; }
.hl-heading__subtitle { color: var(--hl-muted); margin: 0; }
.hl-heading__subtitle--lg { font-size: 1.25rem; line-height: 1.7; }
.hl-heading__title--lg { font-size: 2.25rem; }
.hl-heading__title--xl { font-size: 2.25rem; }
.hl-heading--eyebrow-top .hl-heading__title { margin-top: 0.75rem; }

/* 13 — SERVICE ROW ====================================================== */
.hl-srow { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.hl-srow__body .hl-icon-tile { width: 4rem; height: 4rem; border-radius: var(--hl-radius-3xl); margin-bottom: 1.5rem; }
.hl-srow__body .hl-icon-tile .hl-icon { width: 2rem; height: 2rem; }
.hl-srow__title { font-size: 1.875rem; font-weight: 700; color: var(--hl-primary); margin: 0 0 1rem; }
.hl-srow__text { color: var(--hl-muted); line-height: 1.625; margin: 0 0 1.5rem; }
.hl-srow__list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.hl-srow__list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--hl-primary); }
.hl-srow__list .hl-icon { width: 1.25rem; height: 1.25rem; color: var(--hl-secondary); flex-shrink: 0; }

/* Visual (glass benefit card) */
.hl-srow__visual { position: relative; min-height: 20rem; display: flex; align-items: center; justify-content: center; }
.hl-srow__glow { position: absolute; inset: 0; border-radius: var(--hl-radius-3xl); }
.hl-srow__glow--blue { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(6,182,212,0.05), transparent); }
.hl-srow__glow--cyan { background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(59,130,246,0.05), transparent); }
.hl-srow__orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 16rem; height: 16rem; border-radius: 9999px; filter: blur(64px); }
.hl-srow__orb--blue { background: rgba(59,130,246,0.2); }
.hl-srow__orb--cyan { background: rgba(6,182,212,0.2); }

.hl-benefit { position: relative; padding: 2rem; border-radius: var(--hl-radius-3xl); width: 100%; max-width: 24rem; transition: transform .5s ease; }
.hl-benefit:hover { transform: scale(1.02); }
.hl-benefit__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.hl-benefit__badge { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--hl-radius-xl); color: #fff; }
.hl-benefit__badge .hl-icon { width: 1.25rem; height: 1.25rem; }
.hl-benefit__badge--primary { background: var(--hl-primary); }
.hl-benefit__badge--accent { background: var(--hl-accent); }
.hl-benefit__title { font-weight: 700; color: var(--hl-primary); margin: 0; }
.hl-benefit__sub { font-size: 0.75rem; color: var(--hl-muted); margin: 0; }
.hl-benefit__list { display: flex; flex-direction: column; gap: 1rem; }
.hl-benefit__row { display: flex; align-items: flex-start; gap: 0.75rem; }
.hl-benefit__row .hl-icon { width: 1.25rem; height: 1.25rem; color: var(--hl-green); margin-top: 0.125rem; flex-shrink: 0; }
.hl-benefit__row span { font-size: 0.875rem; font-weight: 500; color: var(--hl-primary); }
.hl-benefit__foot { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(226,232,240,0.5); }
.hl-benefit__foot--flex { display: flex; justify-content: space-between; align-items: center; }
.hl-benefit__foot-label { font-size: 0.75rem; color: var(--hl-muted); }
.hl-stars { display: inline-flex; color: var(--hl-yellow); }
.hl-stars .hl-icon { width: 1rem; height: 1rem; }
.hl-meter { width: 100%; height: 0.5rem; border-radius: 9999px; background: var(--hl-gray-200); margin-bottom: 0.5rem; overflow: hidden; }
.hl-meter__fill { height: 100%; border-radius: 9999px; background: var(--hl-accent); }
.hl-benefit__meter-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--hl-muted); }
.hl-benefit__meter-labels strong { color: var(--hl-primary); font-weight: 600; }

/* 14 — TESTIMONIAL BANNER =============================================== */
.hl-quote-banner {
	position: relative; overflow: hidden;
	background: var(--hl-primary); color: #fff;
	padding: 6rem 1.5rem;
}
.hl-quote-banner__glow {
	position: absolute; inset: 0;
	background: radial-gradient(circle at top right, rgba(59,130,246,0.2), transparent 60%);
	pointer-events: none;
}
.hl-quote-banner__inner { position: relative; z-index: 10; max-width: 56rem; margin-inline: auto; text-align: center; }
.hl-quote-banner__mark { display: block; width: 3rem; height: 3rem; color: var(--hl-secondary); opacity: 0.5; margin: 0 auto 2rem; }
.hl-quote-banner__text { font-size: 1.5rem; font-weight: 500; line-height: 1.5; margin: 0 0 2rem; }
.hl-quote-banner__author { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.hl-avatar {
	width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 9999px;
	display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.hl-avatar--soft { background: rgba(59,130,246,0.2); color: var(--hl-secondary); }
.hl-avatar--primary { background: var(--hl-primary); color: #fff; }
.hl-avatar--secondary { background: var(--hl-secondary); color: #fff; }
.hl-quote-banner__meta { text-align: left; }
.hl-quote-banner__name { font-weight: 600; margin: 0; }
.hl-quote-banner__role { font-size: 0.875rem; color: var(--hl-gray-400); margin: 0; }

/* 15 — TESTIMONIALS GRID ================================================ */
.hl-reviews { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 64rem; margin-inline: auto; }
.hl-review {
	background: #fff; padding: 2.5rem; border-radius: var(--hl-radius-3xl);
	border: 1px solid var(--hl-border); box-shadow: 0 1px 2px rgba(0,0,0,.05);
	transition: box-shadow .5s ease;
}
.hl-review:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.hl-review__stars { display: flex; gap: 0.25rem; color: var(--hl-yellow); margin-bottom: 1.5rem; }
.hl-review__stars .hl-icon { width: 1.25rem; height: 1.25rem; }
.hl-review__text { font-size: 1.125rem; line-height: 1.625; color: var(--hl-primary); font-style: italic; margin: 0 0 2rem; }
.hl-review__author { display: flex; align-items: center; gap: 1rem; }
.hl-review__name { font-weight: 600; color: var(--hl-primary); margin: 0; }
.hl-review__role { font-size: 0.875rem; color: var(--hl-muted); margin: 0; }

/* 16 — STATS + PROSE CARD =============================================== */
.hl-prose-card {
	background: #fff; border: 1px solid var(--hl-border);
	border-radius: 2.5rem; padding: 2rem;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,.05);
	max-width: 64rem; margin-inline: auto;
}
.hl-prose { color: var(--hl-muted); line-height: 1.7; font-size: 1.125rem; }
.hl-prose p { margin: 0 0 1.5rem; }
.hl-prose strong { color: var(--hl-primary); }
.hl-prose a { color: var(--hl-secondary); }
.hl-prose h1 { font-size: 1.875rem; font-weight: 700; color: var(--hl-primary); margin: 0 0 2rem; }
.hl-prose h2 { font-size: 1.125rem; font-weight: 600; color: var(--hl-primary); margin: 2rem 0 0.5rem; }
.hl-prose h3 { font-size: 1.25rem; font-weight: 600; color: var(--hl-primary); margin: 2rem 0 1rem; }
/* Legal pages are narrower & left-aligned */
.hl-prose-card--legal { max-width: 48rem; }

.hl-stats {
	display: grid; grid-template-columns: 1fr; gap: 2rem; text-align: center;
}
.hl-stats--bordered { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--hl-border); }
.hl-stat__value { font-size: 2.25rem; font-weight: 700; color: var(--hl-primary); margin-bottom: 0.5rem; }
.hl-stat__label { font-size: 0.875rem; color: var(--hl-muted); }

.hl-intro { max-width: 56rem; margin-inline: auto; text-align: center; }
.hl-intro__lead { font-size: 1.25rem; line-height: 1.7; color: var(--hl-muted); margin: 0 0 3rem; }

/* 17 — CONTACT ========================================================== */
.hl-contact-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
.hl-contact-info__title { font-size: 2.25rem; font-weight: 700; color: var(--hl-primary); margin: 0.75rem 0 1.5rem; }
.hl-contact-info__lead { font-size: 1.125rem; color: var(--hl-muted); margin: 0 0 2.5rem; }
.hl-contact-list { display: flex; flex-direction: column; gap: 2rem; }
.hl-contact-item { display: flex; align-items: flex-start; gap: 1rem; }
.hl-contact-item__title { font-weight: 600; color: var(--hl-primary); margin: 0 0 0.25rem; }
.hl-contact-item__body, .hl-contact-item__body a { color: var(--hl-muted); text-decoration: none; }
.hl-contact-item__body a:hover { color: var(--hl-secondary); }
.hl-contact-item__body a.is-lg { font-size: 1.125rem; }
.hl-hours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; color: var(--hl-muted); }
.hl-hours li { display: flex; justify-content: space-between; gap: 2rem; }

/* Form */
.hl-form-card {
	background: #fff; padding: 2rem; border-radius: var(--hl-radius-3xl);
	border: 1px solid var(--hl-border); box-shadow: 0 20px 25px -5px rgba(0,0,0,.05);
}
.hl-form-card__title { font-size: 1.5rem; font-weight: 700; color: var(--hl-primary); margin: 0 0 1.5rem; }
.hl-form { display: flex; flex-direction: column; gap: 1.5rem; }
.hl-form__row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.hl-form__group { display: flex; flex-direction: column; }
.hl-form__label { font-size: 0.875rem; font-weight: 500; color: var(--hl-primary); margin-bottom: 0.5rem; }
.hl-form__req { color: var(--hl-secondary); }
.hl-input, .hl-select, .hl-textarea {
	width: 100%; padding: 0.75rem 1rem; border-radius: var(--hl-radius-xl);
	border: 1px solid var(--hl-border); background: var(--hl-gray-50);
	font-family: inherit; font-size: 1rem; color: var(--hl-primary);
	transition: border-color .2s ease, box-shadow .2s ease; outline: none;
}
.hl-textarea { resize: vertical; min-height: 6.5rem; }
.hl-input:focus, .hl-select:focus, .hl-textarea:focus {
	border-color: var(--hl-secondary);
	box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}
.hl-input[aria-invalid="true"], .hl-textarea[aria-invalid="true"] { border-color: #ef4444; }
.hl-field-error { color: #dc2626; font-size: 0.8rem; margin-top: 0.375rem; }
.hl-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hl-form__submit { width: 100%; padding: 1rem; border-radius: var(--hl-radius-xl); }
.hl-form__status { border-radius: var(--hl-radius-xl); padding: 0.875rem 1rem; font-size: 0.9rem; }
.hl-form__status[hidden] { display: none; }
.hl-form__status--success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.hl-form__status--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* 18 — 404 ============================================================== */
.hl-404 { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.hl-404__inner { text-align: center; }
.hl-404__code { font-size: 8rem; line-height: 1; font-weight: 700; color: var(--hl-gray-200); margin-bottom: 1rem; }
.hl-404__title { font-size: 1.875rem; font-weight: 700; color: var(--hl-primary); margin: 0 0 1rem; }
.hl-404__text { color: var(--hl-muted); max-width: 28rem; margin: 0 auto 2rem; }

/* 19 — BLOG / PROSE ===================================================== */
.hl-prose-wrap { padding-block: 8rem 6rem; }
.hl-page-header { margin-bottom: 2.5rem; }
.hl-page-title { font-size: 2.25rem; font-weight: 700; color: var(--hl-primary); margin: 0 0 0.5rem; }
.hl-post-list { display: grid; gap: 2.5rem; }
.hl-post-card { background: #fff; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-3xl); padding: 2rem; }
.hl-post-card__title { font-size: 1.5rem; margin: 1rem 0 0.5rem; }
.hl-post-card__title a { color: var(--hl-primary); text-decoration: none; }
.hl-post-card__title a:hover { color: var(--hl-secondary); }
.hl-post-card__meta { font-size: 0.85rem; color: var(--hl-muted); }
.hl-post-card__thumb img { border-radius: var(--hl-radius-2xl); }
.hl-single__thumb { margin-bottom: 2rem; }
.hl-single__thumb img { border-radius: var(--hl-radius-3xl); }

/* 20 — RESPONSIVE ======================================================= */
@media (min-width: 640px) {
	.hl-hero__actions { flex-direction: row; }
	.hl-hero__actions .hl-btn { width: auto; }
	.hl-cookie-banner__inner { flex-direction: row; }
	.hl-form__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
	.hl-navbar__menu { display: flex; }
	.hl-navbar__cta { display: flex; }
	.hl-navbar__toggle { display: none; }
	.hl-mobile-menu { display: none !important; }

	.hl-trust { grid-template-columns: repeat(3, 1fr); }
	.hl-service-grid { grid-template-columns: repeat(2, 1fr); }
	.hl-srow { grid-template-columns: 1fr 1fr; }
	.hl-srow__visual { min-height: 24rem; } /* original md:h-96 */
	.hl-reviews { grid-template-columns: repeat(2, 1fr); }
	.hl-stats { grid-template-columns: repeat(3, 1fr); }
	.hl-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
	.hl-footer__bottom { flex-direction: row; }
	.hl-prose-card { padding: 4rem; }
	.hl-form-card { padding: 2.5rem; }

	.hl-hero__title { font-size: 4.5rem; }
	.hl-hero__subtitle { font-size: 1.25rem; }
	.hl-heading__title { font-size: 2.25rem; }
	.hl-heading__title--lg { font-size: 3rem; }
	.hl-heading__title--xl { font-size: 3.75rem; }
	.hl-contact-info__title, .hl-404__title { font-size: 3rem; }
	.hl-quote-banner__text { font-size: 2.25rem; }
	.hl-intro__title { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
	.hl-service-grid { grid-template-columns: repeat(4, 1fr); }
	.hl-contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* Service row: allow authored order (image left/right) on desktop */
.hl-srow--reverse .hl-srow__visual { order: 1; }
.hl-srow--reverse .hl-srow__body { order: 2; }
@media (max-width: 767px) {
	.hl-srow__visual { order: 1; }
	.hl-srow__body { order: 2; }
}