/* =====================================================================
   HomePros HS — scoped design system.
   Everything is scoped under .hs-scope (or .hs-site-*) so it never leaks
   into Elementor's own widgets or other plugins. Section rendering uses
   .hs-section instead of a bare `section` selector for the same reason.
   ===================================================================== */

/* ---------- Reset within scope ---------- */
.hs-scope, .hs-scope *, .hs-scope *::before, .hs-scope *::after { box-sizing: border-box; }
.hs-scope { font-family: var(--font-body); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.hs-scope img { max-width: 100%; display: block; }
.hs-scope a { color: inherit; }
.hs-scope h1, .hs-scope h2, .hs-scope h3, .hs-scope h4 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.12; color: var(--ink); letter-spacing: -.01em; }
.hs-scope p { margin: 0; }
.hs-scope ul { margin: 0; padding: 0; list-style: none; }
.hs-scope button { font-family: inherit; cursor: pointer; }
.hs-scope input, .hs-scope select, .hs-scope textarea { font-family: inherit; }

.hs-inner { max-width: var(--hs-maxw); margin: 0 auto; padding: 0 24px; }
.hs-section { padding: 84px 0; }
.hs-section.section-alt { background: var(--paper-2); }
.hs-page-content { overflow: hidden; }
.hs-head { max-width: 700px; }

.hs-scope .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
.hs-scope .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--amber); display: inline-block; }
.hs-scope .section-title { font-size: clamp(1.7rem, 3.2vw, 2.35rem); max-width: 660px; }
.hs-scope .section-sub { font-size: 1.05rem; color: var(--ink-soft); max-width: 560px; margin-top: 14px; }

/* ---------- Buttons ---------- */
.hs-scope .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: var(--radius-pill); font-weight: 700; font-size: .98rem; border: none; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; }
.hs-scope .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 14px 28px -12px rgba(11,109,199,.55); }
.hs-scope .btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); color: #fff; }
.hs-scope .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.hs-scope .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.hs-scope .btn-block { width: 100%; }
.hs-scope .btn-sm { padding: 10px 18px; font-size: .85rem; }
.hs-scope .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; }

/* ---------- Fields ---------- */
.hs-scope .field-label { font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 8px; display: block; }
.hs-scope select, .hs-scope .text-input, .hs-scope textarea.text-input { width: 100%; padding: 14px; border-radius: var(--radius-input); border: 1.5px solid var(--line); background: #fff; font-size: .98rem; color: var(--ink); }
.hs-scope select:focus, .hs-scope .text-input:focus, .hs-scope input:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 1px; }
.hs-scope .zip-input { font-size: 1.05rem; letter-spacing: .14em; font-weight: 600; }

/* =====================================================================
   SITE HEADER (chrome)
   ===================================================================== */
/* =====================================================================
   SITE HEADER (chrome) — scroll-swap two-header system.

   Two header elements live in the DOM: a top / white one and a scrolled /
   blue one. Both start rendered; only their transforms differ. JS toggles
   .is-hidden and .is-visible when the user crosses the scroll threshold.
   ===================================================================== */
.hs-header-stack { position: relative; }

.hs-site-header {
	left: 0; right: 0;
	z-index: 100;
	transition: transform 320ms cubic-bezier(.32,.72,0,1);
	will-change: transform;
}

/* Top: sticky so it holds its box in layout — content below never jumps. */
.hs-site-header.hs-header-top {
	position: sticky; top: 0;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transform: translateY(0);
}
.hs-site-header.hs-header-top.is-hidden { transform: translateY(-100%); }

/* Scrolled: fixed at the top, initially translated above the viewport.
   The 150ms transition-delay lets the top header slide up first, so the
   swap reads as sequential (hide → then reveal), not simultaneous. */
.hs-site-header.hs-header-scrolled {
	position: fixed; top: 0;
	z-index: 101;
	background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
	color: #fff;
	box-shadow: 0 10px 30px -14px rgba(11,41,66,.45);
	transform: translateY(-100%);
	transition: transform 320ms cubic-bezier(.32,.72,0,1) 150ms;
}
.hs-site-header.hs-header-scrolled.is-visible { transform: translateY(0); }

/* Blue-header link/logo/button color overrides. */
.hs-header-scrolled .logo,
.hs-header-scrolled .logo em { color: #fff; }
.hs-header-scrolled .logo-mark { background: rgba(255,255,255,.16); box-shadow: none; }
.hs-header-scrolled .logo-mark svg { color: #fff; }
.hs-header-scrolled .nav-links > li > a { color: rgba(255,255,255,.92); }
.hs-header-scrolled .nav-links > li > a:hover,
.hs-header-scrolled .nav-links > li.current-menu-item > a { color: #fff; }
.hs-header-scrolled .nav-links .sub-menu { background: #fff; color: var(--ink); }
.hs-header-scrolled .nav-links .sub-menu a { color: var(--ink); }
.hs-header-scrolled .btn.btn-primary { background: #fff; color: var(--blue); box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }
.hs-header-scrolled .btn.btn-primary:hover { background: var(--blue-tint); color: var(--blue-dark); }
.hs-header-scrolled .nav-burger span { background: #fff; }

/* Optional: sticky drop-shadow appears once we're actively scrolling. */
.hs-site-header.hs-header-top.scrolled { box-shadow: 0 4px 24px -14px rgba(11,41,66,.22); border-color: var(--line); }

/* Phone link inside the header (top variant). */
.hs-scope .header-phone {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--ink); text-decoration: none;
	font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
	padding: 8px 12px; border-radius: 999px;
	transition: color .2s ease, background .2s ease;
}
.hs-scope .header-phone:hover { color: var(--blue); background: var(--blue-tint); }
.hs-scope .header-phone svg { color: var(--blue); }

/* Phone link inside the scrolled (blue) header — inverted colors. */
.hs-header-scrolled .header-phone { color: #fff; }
.hs-header-scrolled .header-phone svg { color: #fff; }
.hs-header-scrolled .header-phone:hover { color: #fff; background: rgba(255,255,255,.15); }

/* Phone link inside the mobile panel. */
.hs-scope .mobile-phone {
	display: block; margin-top: 14px;
	color: var(--blue); font-weight: 700; font-size: 1.05rem;
	text-decoration: none; text-align: center;
	padding: 12px; border: 1.5px solid var(--line); border-radius: 12px;
}
.hs-scope .mobile-phone:hover { border-color: var(--blue); }

/* Hide the phone on very narrow screens so the header doesn't overflow. */
@media (max-width: 640px) {
	.hs-scope .header-phone { display: none; }
}
.hs-nav { }
.hs-nav-inner { max-width: var(--hs-maxw); margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hs-scope .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--blue-deep); text-decoration: none; }
.hs-scope .logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 6px 14px -6px rgba(11,109,199,.6); }
.hs-scope .logo-mark svg { color: #fff; }
.hs-scope .logo em { font-style: normal; color: var(--blue); }
.hs-nav .custom-logo-link { display: inline-flex; }

.hs-scope .nav-links { display: flex; align-items: center; gap: 30px; }
.hs-scope .nav-links li { position: relative; }
.hs-scope .nav-links a { font-size: .94rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.hs-scope .nav-links a:hover { color: var(--blue); }
.hs-scope .nav-links .sub-menu { position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease; z-index: 20; }
.hs-scope .nav-links li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(4px); }
.hs-scope .nav-links .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-weight: 500; }
.hs-scope .nav-links .sub-menu a:hover { background: var(--blue-tint); }
.hs-scope .nav-links .menu-item-has-children > a::after { content: "▾"; font-size: .7em; margin-left: 5px; color: var(--ink-soft); }

.hs-scope .nav-cta { display: flex; align-items: center; gap: 14px; }
.hs-scope .nav-burger { display: none; background: none; border: none; padding: 8px; }
.hs-scope .nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }
.hs-scope .mobile-panel { display: none; flex-direction: column; gap: 2px; padding: 8px 24px 22px; }
.hs-scope .mobile-panel.open { display: flex; }
.hs-scope .mobile-panel .mobile-links { display: flex; flex-direction: column; }
.hs-scope .mobile-panel .mobile-links a { display: block; padding: 12px 4px; font-weight: 600; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.hs-scope .mobile-panel .sub-menu a { padding-left: 18px; font-weight: 500; }

/* =====================================================================
   HERO
   ===================================================================== */
.hs-hero { background: linear-gradient(180deg, var(--blue-tint) 0%, rgba(234,243,252,0) 78%); padding: 52px 0 78px; }
.hs-hero .hs-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; }
.hs-scope .hero-copy { max-width: 540px; }
.hs-scope .hero-copy h1 { font-size: clamp(2.2rem, 4.4vw, 3.35rem); }
.hs-scope .hero-copy h1 em { font-style: normal; color: var(--blue); }
.hs-scope .hero-sub { margin-top: 18px; font-size: 1.1rem; color: var(--ink-2); max-width: 490px; }
.hs-scope .hero-form-card { margin-top: 26px; background: var(--card); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-lg); border: 1px solid var(--blue-line); }
.hs-scope .hero-form-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--blue-deep); margin-bottom: 16px; }
.hs-scope .hero-form-title .qmark { width: 24px; height: 24px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; flex: none; }
.hs-scope .hero-form-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.hs-scope .hero-microcopy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.hs-scope .hero-microcopy span { display: inline-flex; align-items: center; gap: 6px; }
.hs-scope .hero-microcopy svg { color: var(--green); }
.hs-scope .hero-media { position: relative; }
.hs-scope .hero-media-frame { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/4.4; }
.hs-scope .hero-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.hs-scope .hero-float-card { position: absolute; left: -24px; bottom: 32px; background: #fff; border-radius: 16px; padding: 15px 18px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; max-width: 230px; border: 1px solid var(--blue-line); }
.hs-scope .hero-float-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--green-tint); display: flex; align-items: center; justify-content: center; flex: none; }
.hs-scope .hero-float-card strong { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--blue-deep); }
.hs-scope .hero-float-card span { font-size: .78rem; color: var(--ink-soft); }
.hs-scope .hero-badge-top { position: absolute; top: -16px; right: 12px; background: var(--blue-deep); color: #fff; padding: 10px 16px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 700; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 7px; }
.hs-scope .hero-badge-top svg { color: var(--amber); }

/* =====================================================================
   TRUST BAR
   ===================================================================== */
.hs-trust { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.hs-scope .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hs-scope .trust-item { display: flex; align-items: center; gap: 12px; justify-content: center; }
.hs-scope .trust-badge { width: 40px; height: 40px; border-radius: 11px; background: var(--blue-tint); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.hs-scope .trust-item strong { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--blue-deep); line-height: 1.2; }
.hs-scope .trust-item span { font-size: .8rem; color: var(--ink-soft); }
.hs-scope .trust-disclaimer { text-align: center; font-size: .76rem; color: var(--ink-soft); margin-top: 20px; }

/* =====================================================================
   SERVICE GRID
   ===================================================================== */
.hs-scope .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.hs-scope .service-card { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; text-align: left; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hs-scope .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--blue); }
.hs-scope .service-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-tint); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.hs-scope .service-card h4 { font-size: 1rem; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.hs-scope .service-card p { font-size: .82rem; color: var(--ink-soft); }
.hs-scope .service-tag { position: absolute; top: 14px; right: 14px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill); }
.hs-scope .tag-live { background: var(--green-tint); color: var(--green); }
.hs-scope .tag-soon { background: var(--blue-tint-2); color: var(--blue-dark); }

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.hs-scope .steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }
.hs-scope .step-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow-sm); }
.hs-scope .step-num { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; background: var(--blue); width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.hs-scope .step-card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.hs-scope .step-card p { color: var(--ink-soft); font-size: .95rem; }

/* =====================================================================
   WHY US
   ===================================================================== */
.hs-scope .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.hs-scope .why-img { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.hs-scope .why-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.hs-scope .why-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.hs-scope .why-item { display: flex; gap: 16px; }
.hs-scope .why-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-tint); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.hs-scope .why-item h4 { font-size: 1.02rem; margin-bottom: 4px; }
.hs-scope .why-item p { font-size: .9rem; color: var(--ink-soft); }

/* =====================================================================
   WIZARD / LEAD FORM
   ===================================================================== */
.hs-wizard { background: linear-gradient(180deg, var(--paper-2) 0%, var(--blue-tint) 100%); }
.hs-scope .wizard-shell { margin-top: 42px; display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: flex-start; }
.hs-scope .wizard-shell.no-summary { grid-template-columns: minmax(0, 720px); justify-content: center; }
.hs-scope .wizard-card { background: #fff; color: var(--ink); border-radius: 22px; padding: 36px; box-shadow: var(--shadow-lg); min-height: 440px; border: 1px solid var(--blue-line); }
.hs-scope .progress-track { display: flex; gap: 6px; margin-bottom: 24px; }
.hs-scope .progress-seg { flex: 1; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.hs-scope .progress-seg i { display: block; height: 100%; width: 0%; background: var(--blue); transition: width .3s ease; }
.hs-scope .progress-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-soft); margin-bottom: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; gap: 6px; }
.hs-scope .progress-labels span { flex: 1; text-align: center; }
.hs-scope .progress-labels span.active { color: var(--blue); }
.hs-scope .wiz-step { display: none; animation: hsFadeUp .35s ease; }
.hs-scope .wiz-step.active { display: block; }
.hs-scope .wiz-step h3 { font-size: 1.32rem; margin-bottom: 6px; }
.hs-scope .wiz-step .step-hint { color: var(--ink-soft); font-size: .9rem; margin-bottom: 24px; }
.hs-scope .zip-big-wrap { max-width: 280px; }
.hs-scope .zip-big { font-size: 1.4rem !important; letter-spacing: .2em; text-align: center; padding: 16px !important; }
.hs-scope .service-chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.hs-scope .service-chip { position: relative; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--ink-2); background: #fff; transition: .15s; }
.hs-scope .service-chip:hover { border-color: var(--blue); }
.hs-scope .service-chip.selected { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-dark); }
.hs-scope .service-chip svg { width: 24px; height: 24px; color: var(--blue); }
.hs-scope .chip-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hs-scope .field-block { margin-bottom: 24px; }
.hs-scope .field-block:last-child { margin-bottom: 0; }
.hs-scope .radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-scope .radio-pill { border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 11px 20px; font-size: .88rem; font-weight: 600; cursor: pointer; background: #fff; color: var(--ink-2); transition: .15s; }
.hs-scope .radio-pill:hover { border-color: var(--blue); }
.hs-scope .radio-pill.selected { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-dark); }
.hs-scope .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
.hs-scope .form-grid .full { grid-column: 1 / -1; }
.hs-scope .consent-box { display: flex; gap: 12px; align-items: flex-start; background: var(--paper-2); border: 1px solid var(--blue-line); border-radius: 14px; padding: 16px; margin: 22px 0; font-size: .8rem; color: var(--ink-2); line-height: 1.55; }
.hs-scope .consent-box input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--blue); }
.hs-scope .recap-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.hs-scope .recap-row { display: flex; justify-content: space-between; font-size: .9rem; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hs-scope .recap-row span:first-child { color: var(--ink-soft); }
.hs-scope .recap-row span:last-child { font-weight: 700; text-align: right; }
.hs-scope .wiz-nav { display: flex; justify-content: space-between; margin-top: 30px; gap: 14px; }
.hs-scope .field-error { color: #C24A2E; font-size: .8rem; margin-top: 12px; display: none; font-weight: 600; }
.hs-scope .success-panel { display: none; text-align: center; padding: 44px 10px; }
.hs-scope .success-check { width: 66px; height: 66px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.hs-scope .success-panel h3 { font-size: 1.5rem; margin-bottom: 10px; }
.hs-scope .success-panel p { color: var(--ink-soft); max-width: 400px; margin: 0 auto; }
.hs-scope .summary-card { background: var(--blue-deep); border-radius: 20px; padding: 26px; position: sticky; top: 100px; color: #fff; }
.hs-scope .summary-card h4 { font-family: var(--font-display); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #8FC0EC; margin-bottom: 16px; }
.hs-scope .summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: .9rem; }
.hs-scope .summary-row:last-of-type { border-bottom: none; }
.hs-scope .summary-row span:first-child { color: #AFC8DD; }
.hs-scope .summary-row span:last-child { font-weight: 700; text-align: right; }
.hs-scope .summary-note { margin-top: 18px; font-size: .74rem; color: #94AEC6; line-height: 1.55; }
.hs-scope .summary-note code { background: rgba(255,255,255,.1); padding: 2px 6px; border-radius: 5px; font-size: .72rem; }

/* =====================================================================
   FAQ
   ===================================================================== */
.hs-scope .faq-list { max-width: 760px; margin: 42px auto 0; }
.hs-scope .faq-item { border-bottom: 1px solid var(--line); }
.hs-scope .faq-q { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; text-align: left; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.hs-scope .faq-q svg { flex: none; transition: transform .25s ease; width: 20px; height: 20px; color: var(--blue); }
.hs-scope .faq-item.open .faq-q svg { transform: rotate(45deg); }
.hs-scope .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.hs-scope .faq-a p { padding: 0 4px 22px; color: var(--ink-soft); font-size: .95rem; max-width: 660px; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.hs-scope .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.hs-scope .contact-lines { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.hs-scope .contact-line { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.hs-scope .contact-line a { color: var(--blue-deep); text-decoration: none; }
.hs-scope .contact-line a:hover { color: var(--blue); }
.hs-scope .contact-card { background: #fff; border: 1px solid var(--blue-line); border-radius: var(--radius-card); padding: 26px; box-shadow: var(--shadow-md); }
.hs-scope .contact-note { font-size: .74rem; color: var(--ink-soft); margin-top: 12px; }

/* =====================================================================
   SITE FOOTER (chrome)
   ===================================================================== */
.hs-site-footer { background: var(--blue-deep); color: #C4D6E6; padding: 66px 0 30px; margin-top: 0; }
.hs-site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.14); }
.hs-site-footer .footer-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; margin-bottom: 14px; }
.hs-site-footer .footer-logo .logo-mark { width: 30px; height: 30px; }
.hs-site-footer .footer-grid p { font-size: .88rem; color: #9FB6CA; max-width: 340px; }
.hs-site-footer .footer-col h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: #fff; margin-bottom: 16px; }
.hs-site-footer .footer-links { display: flex; flex-direction: column; gap: 11px; }
.hs-site-footer .footer-links a { font-size: .88rem; color: #9FB6CA; text-decoration: none; }
.hs-site-footer .footer-links a:hover { color: #fff; }
.hs-site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-top: 24px; flex-wrap: wrap; }
.hs-site-footer .footer-bottom p { font-size: .75rem; color: #7C93A8; max-width: 780px; line-height: 1.65; }
.hs-site-footer .footer-copy { font-size: .78rem; color: #7C93A8; white-space: nowrap; }

/* =====================================================================
   PLAIN / ARTICLE PAGES (legal, blog)
   ===================================================================== */
.hs-plain .hs-article { padding: 64px 0; }
.hs-plain .hs-article h1, .hs-plain .hs-article h2 { margin-bottom: 16px; }
.hs-plain .hs-article p { margin-bottom: 16px; color: var(--ink-2); }
.hs-plain .hs-article a { color: var(--blue); }

@keyframes hsFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hs-scope .wiz-step { animation: none; } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.hs-hero .hs-hero-grid { grid-template-columns: 1fr; }
	.hs-scope .hero-media { order: -1; max-width: 440px; margin: 0 auto; }
	.hs-scope .wizard-shell { grid-template-columns: 1fr; }
	.hs-scope .summary-card { position: static; order: -1; }
	.hs-scope .why-grid { grid-template-columns: 1fr; gap: 34px; }
	.hs-scope .why-img { max-width: 460px; }
	.hs-scope .service-grid { grid-template-columns: repeat(2, 1fr); }
	.hs-scope .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.hs-scope .contact-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 720px) {
	.hs-section { padding: 60px 0; }
	.hs-scope .nav-links { display: none; }
	.hs-scope .nav-burger { display: block; }
	.hs-scope .steps-row { grid-template-columns: 1fr; }
	.hs-scope .form-grid { grid-template-columns: 1fr; }
	.hs-scope .service-chip-grid { grid-template-columns: repeat(3, 1fr); }
	.hs-scope .wizard-card { padding: 24px; }
	.hs-scope .progress-labels { font-size: .6rem; }
	.hs-site-footer .footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.hs-scope .hero-float-card { left: 0; }
}

/* =====================================================================
   ELEMENTOR-NATIVE WIDGET STYLING
   The demo pages are built with native Elementor widgets. These rules give
   them the HomePros look while every value stays overridable from the
   Elementor UI (Elementor's generated CSS is more specific and wins).
   ===================================================================== */
body.homepros-hs .elementor-widget-heading .elementor-heading-title { font-family: var(--font-display); letter-spacing: -.01em; }
body.homepros-hs .elementor-widget-text-editor,
body.homepros-hs .elementor-widget-icon-box .elementor-icon-box-description,
body.homepros-hs .elementor-widget-icon-list .elementor-icon-list-text,
body.homepros-hs .elementor-accordion .elementor-tab-content { font-family: var(--font-body); }

/* Eyebrow */
body.homepros-hs .hs-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
body.homepros-hs .hs-eyebrow .elementor-heading-title::before { content: ""; width: 22px; height: 2px; background: var(--amber); display: inline-block; }

/* H1 accent */
body.homepros-hs .hs-h1 .elementor-heading-title { font-size: clamp(2.2rem, 4.4vw, 3.3rem); line-height: 1.1; }
body.homepros-hs .hs-h1 .elementor-heading-title em { font-style: normal; color: var(--blue); }
body.homepros-hs .hs-hero-sub { font-size: 1.08rem; }
body.homepros-hs .hs-microcopy .elementor-icon-list-text { font-weight: 600; font-size: .86rem; }

/* Hero image */
body.homepros-hs .hs-img-round img { border-radius: 24px; box-shadow: var(--shadow-lg); }
body.homepros-hs .hs-hero-img img { aspect-ratio: 4/4.4; object-fit: cover; }

/* Trust icon boxes */
body.homepros-hs .hs-trust-box .elementor-icon { background: var(--blue-tint); color: var(--blue); border-radius: 11px; padding: 10px; font-size: 20px; }
body.homepros-hs .hs-trust-box .elementor-icon-box-title { font-size: .98rem; color: var(--blue-deep); margin-bottom: 2px; }
body.homepros-hs .hs-trust-box .elementor-icon-box-description { font-size: .8rem; color: var(--ink-soft); }

/* Service cards */
body.homepros-hs .hs-card { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 22px 18px; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
body.homepros-hs .hs-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--blue); }
body.homepros-hs .hs-card .elementor-icon { background: var(--blue-tint); color: var(--blue); border-radius: 12px; padding: 11px; font-size: 22px; }
body.homepros-hs .hs-card .elementor-icon-box-icon { margin-bottom: 12px; }
body.homepros-hs .hs-card .elementor-icon-box-title { font-size: 1rem; }
body.homepros-hs .hs-card .elementor-icon-box-description { font-size: .82rem; }
body.homepros-hs .hs-tag { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
body.homepros-hs .hs-tag-live { background: var(--green-tint); color: var(--green); }
body.homepros-hs .hs-tag-soon { background: var(--blue-tint-2); color: var(--blue-dark); }

/* How-it-works steps */
body.homepros-hs .hs-step-col > .elementor-widget-wrap { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px !important; box-shadow: var(--shadow-sm); }
body.homepros-hs .hs-step-num .elementor-heading-title { width: 40px; height: 40px; background: var(--blue); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; }
body.homepros-hs .hs-step-title .elementor-heading-title { font-size: 1.16rem; margin-top: 14px; }

/* Why icon boxes */
body.homepros-hs .hs-why-box .elementor-icon { background: var(--blue-tint); color: var(--blue); border-radius: 12px; padding: 11px; font-size: 20px; }
body.homepros-hs .hs-why-box .elementor-icon-box-title { font-size: 1.02rem; margin-bottom: 4px; }
body.homepros-hs .hs-why-box .elementor-icon-box-description { font-size: .9rem; }

/* FAQ accordion */
body.homepros-hs .hs-faq-acc .elementor-accordion-item { border: none !important; border-bottom: 1px solid var(--line) !important; }
body.homepros-hs .hs-faq-acc .elementor-tab-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; padding: 20px 4px; }
body.homepros-hs .hs-faq-acc .elementor-tab-content { border: none !important; padding: 0 4px 20px; color: var(--ink-soft); }

/* =====================================================================
   Elementor page utilities.

   Elementor's default rules on `.elementor-element.e-con` set
     display: flex; flex-direction: column;
   with specificity (0,2,0). We need higher specificity — the safest cross-
   version approach is `!important` on the display, columns and gap.

   All layouts collapse to a single column on narrow screens.
   ===================================================================== */

/* Reset: any Elementor container carrying our layout class becomes a grid.
   We repeat the class both bare and prefixed so it wins over Elementor's
   `.elementor-element.e-con { display:flex }` regardless of version. */
.hs-2col, .e-con.hs-2col, .elementor-element.hs-2col,
.hs-hero-split, .e-con.hs-hero-split, .elementor-element.hs-hero-split,
.hs-grid-4, .e-con.hs-grid-4, .elementor-element.hs-grid-4,
.hs-grid-3, .e-con.hs-grid-3, .elementor-element.hs-grid-3,
.hs-grid-2, .e-con.hs-grid-2, .elementor-element.hs-grid-2 {
	display: grid !important;
	flex-direction: initial !important;
	flex-wrap: initial !important;
	width: 100%;
	align-items: stretch;
	box-sizing: border-box;
}

.hs-2col        { grid-template-columns: 1fr 1fr !important;                gap: 40px !important; align-items: center; }
.hs-hero-split  { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr) !important; gap: 52px !important; align-items: center; }
.hs-grid-4      { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 20px !important; }
.hs-grid-3      { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 20px !important; }
.hs-grid-2      { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 20px !important; }

/* Grid items should stretch to fill the cell so cards line up. */
.hs-grid-4 > .e-con,   .hs-grid-3 > .e-con,   .hs-grid-2 > .e-con,
.hs-2col   > .e-con,   .hs-hero-split > .e-con,
.hs-grid-4 > .elementor-element,   .hs-grid-3 > .elementor-element,   .hs-grid-2 > .elementor-element,
.hs-2col   > .elementor-element,   .hs-hero-split > .elementor-element {
	width: auto !important;
	max-width: none !important;
	min-height: 0;
}

/* Tablet — 4 col drops to 2, 3 col drops to 2, split hero stacks. */
@media (max-width: 1024px) {
	.hs-hero-split { grid-template-columns: 1fr !important; gap: 32px !important; }
	.hs-grid-4     { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
	.hs-grid-3     { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Phone — everything single column. */
@media (max-width: 720px) {
	.hs-2col,
	.hs-grid-4,
	.hs-grid-3,
	.hs-grid-2 {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	.hs-hero-split { gap: 24px !important; }
}

/* FAQ / narrow-content utility: constrain to a readable center column. */
.hs-narrow { max-width: 780px; margin-left: auto; margin-right: auto; }

/* Make Elementor images fill their grid cell (hero image, why-us image). */
.hs-hero-split .elementor-widget-image img,
.hs-2col .elementor-widget-image img { width: 100%; height: auto; display: block; }

/* Icon-box hover animation shouldn't clip the shadow of hs_card_wrap. */
.hs-grid-4 > .e-con,
.hs-grid-3 > .e-con,
.hs-grid-2 > .e-con,
.hs-grid-4 > .elementor-element,
.hs-grid-3 > .elementor-element,
.hs-grid-2 > .elementor-element { overflow: visible; }

/* --------------------- Custom widget integration --------------------- */
/* Our two JS-driven widgets already carry their own .hs-scope wrapper. */
.elementor-widget-hs_hero_form .hs-hero-form.hero-form-card { margin-top: 8px; }

/* Lead form: keep the native gradient/padding but center inner content
   at the site width (Elementor doesn't wrap it in .hs-inner). */
.elementor-widget-hs_lead_form .hs-wizard.hs-section .hs-head,
.elementor-widget-hs_lead_form .hs-wizard.hs-section .wizard-shell {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* Make sure the hero form and lead form are full-width in their grid cell. */
.hs-hero-split .elementor-widget-hs_hero_form,
.hs-hero-split .elementor-widget-hs_hero_form .hs-scope,
.hs-hero-split .elementor-widget-hs_hero_form .hero-form-card { width: 100%; }

/* --------------------- Mobile-safe overrides --------------------- */
@media (max-width: 720px) {
	.elementor-widget-hs_lead_form .hs-wizard.hs-section .hs-head,
	.elementor-widget-hs_lead_form .hs-wizard.hs-section .wizard-shell {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* =====================================================================
   Scrolled-header logo fallback
   If the user hasn't uploaded a dedicated white/light logo for the blue
   header, invert the main custom logo image to white via CSS filter.
   The uploaded scrolled logo carries `.hs-scrolled-logo-link` and is
   excluded from the filter.
   ===================================================================== */
.hs-header-scrolled .hs-logo-invert .custom-logo {
	filter: brightness(0) invert(1);
}

/* Optional four-column footer when the Contact column is enabled. */
.hs-scope .footer-grid.footer-grid-4 { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) {
	.hs-scope .footer-grid.footer-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.hs-scope .footer-grid.footer-grid-4 { grid-template-columns: 1fr; }
}
.hs-scope .footer-contact p { margin: 0 0 6px; color: #B7CFE4; font-size: .93rem; line-height: 1.5; }
.hs-scope .footer-contact a { color: #fff; text-decoration: none; }
.hs-scope .footer-contact a:hover { text-decoration: underline; }

/* =====================================================================
   HOVER EFFECTS — elegant lifts, gloss on buttons, smooth transitions.
   Applied via `.hs-hover-lift` class on cards / images / containers.
   ===================================================================== */

/* Base: any element carrying .hs-hover-lift animates smoothly. */
.hs-hover-lift,
.hs-hover-lift.e-con,
.hs-hover-lift .elementor-widget-image img {
	transition:
		transform 350ms cubic-bezier(.22, 1, .36, 1),
		box-shadow 350ms cubic-bezier(.22, 1, .36, 1),
		border-color 250ms ease;
	will-change: transform;
}

/* Card lift: elevation increases, border tints toward brand blue. */
.hs-hover-lift:hover,
.hs-hover-lift.e-con:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px -18px rgba(11, 41, 66, 0.28);
	border-color: var(--blue, #0B6DC7);
}

/* Icon inside a lifted card scales subtly and gets a brand ring. */
.hs-hover-lift:hover .elementor-widget-icon-box .elementor-icon,
.hs-hover-lift.e-con:hover .elementor-widget-icon-box .elementor-icon {
	transform: scale(1.08);
	box-shadow: 0 0 0 6px rgba(11, 109, 199, 0.08);
	transition: transform 300ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms;
}

/* Image lift: subtle zoom on the img itself, brighter shadow. */
.hs-hover-lift:hover .elementor-widget-image img {
	transform: scale(1.02);
	box-shadow: 0 40px 70px -30px rgba(11, 41, 66, 0.42);
}

/* Elementor buttons across the whole site — glossy sheen sweep on hover. */
.elementor-button,
.btn,
.hs-scope .btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.elementor-button::before,
.btn::before,
.hs-scope .btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -140%;
	width: 45%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255, 255, 255, 0.35) 50%,
		transparent 100%
	);
	transform: skewX(-24deg);
	pointer-events: none;
	transition: left 700ms cubic-bezier(.22, 1, .36, 1);
	z-index: 1;
}
.elementor-button:hover::before,
.btn:hover::before,
.hs-scope .btn:hover::before {
	left: 140%;
}
.elementor-button:hover,
.btn:hover,
.hs-scope .btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 34px -12px rgba(11, 109, 199, 0.6);
}

/* Trust bar icon-boxes get a soft scale on hover. */
.hs-scope .trust-bar .trust-item,
.elementor-section .elementor-widget-icon-box:hover .elementor-icon-box-icon {
	transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}

/* Anchor / link items inside icon-boxes get a lift underline hint. */
.elementor-widget-icon-box a {
	background-image: linear-gradient(var(--blue, #0B6DC7), var(--blue, #0B6DC7));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size 300ms ease;
}
.elementor-widget-icon-box a:hover {
	background-size: 100% 2px;
}

/* Wide-narrow content utility for pricing/coverage editorial paragraphs. */
.hs-narrow-wide,
.e-con.hs-narrow-wide,
.elementor-element.hs-narrow-wide {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* Reduced motion — respect the user's preference. */
@media (prefers-reduced-motion: reduce) {
	.hs-hover-lift,
	.hs-hover-lift.e-con,
	.hs-hover-lift .elementor-widget-image img,
	.elementor-button,
	.btn,
	.hs-scope .btn {
		transition: none !important;
	}
	.hs-hover-lift:hover,
	.hs-hover-lift.e-con:hover {
		transform: none !important;
	}
	.elementor-button::before,
	.btn::before,
	.hs-scope .btn::before {
		display: none;
	}
}