/* ═══════════════════════════════════════════════════════
SOLIGO AIR
Poppins, Imperial Blue, Blaze Orange
═══════════════════════════════════════════════════════ */

:root {
/* ── Brand Colors (from Identity Manual) ── */
--imperial-blue:  #002C6D;
--blue-bell:      #0095D9;
--blaze-orange:   #F75600;
--white:          #FFFFFF;
--silver:         #B2B2B2;
--black:          #000000;

/* ── Extended Design System ── */
--bg-page:        #FAFAFA;
--bg-section:     #FFFFFF;
--bg-dark:        #001A42;
--bg-mid:         #021F55;
--text-primary:   #0A1628;
--text-body:      #334155;
--text-muted:     #64748B;
--text-light:     #94A3B8;
--border:         #E2E8F0;
--border-light:   #F1F5F9;

/* ── Typography ── */
--font:           'Poppins', sans-serif;

/* ── Spacing ── */
--max-w:          1240px;
--section-y:      96px;

/* ── Motion ── */
--ease:           cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

/* ── Shadows ── */
--shadow-sm:      0 1px 3px rgba(0,44,109,.08), 0 1px 2px rgba(0,44,109,.04);
--shadow-md:      0 4px 20px rgba(0,44,109,.10), 0 2px 8px rgba(0,44,109,.06);
--shadow-lg:      0 20px 60px rgba(0,44,109,.14), 0 8px 24px rgba(0,44,109,.08);
--shadow-orange:  0 8px 32px rgba(247,86,0,.30);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
font-family: var(--font);
background: var(--bg-page);
color: var(--text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

/* ── LAYOUT UTILS ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-y) 0; }
.section--dark { background: var(--bg-dark); }
.section--mid { background: var(--bg-mid); }
.section--white { background: var(--bg-section); }
.section--tinted { background: #F0F6FF; }

.label {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--blaze-orange);
margin-bottom: 12px;
}

h1, h2, h3, h4 { font-family: var(--font); line-height: 1.2; }
h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; }
h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 600; }

p { font-size: 16px; line-height: 1.75; color: var(--text-body); }

/* ── BUTTONS ── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 32px;
border-radius: 8px;
font-family: var(--font);
font-size: 15px;
font-weight: 600;
letter-spacing: .2px;
cursor: pointer;
border: none;
text-decoration: none;
transition: all .25s var(--ease);
white-space: nowrap;
}
.btn-primary {
background: var(--blaze-orange);
color: white;
box-shadow: var(--shadow-orange);
}
.btn-primary:hover {
background: #e04e00;
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(247,86,0,.45);
}
.btn-secondary {
background: transparent;
color: white;
border: 1.5px solid rgba(255,255,255,.35);
}
.btn-secondary:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.6);
}
.btn-blue {
background: var(--imperial-blue);
color: white;
}
.btn-blue:hover {
background: #003a8c;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background: transparent;
color: var(--imperial-blue);
border: 1.5px solid var(--imperial-blue);
}
.btn-outline:hover {
background: var(--imperial-blue);
color: white;
}
.btn-sm { padding: 10px 20px; font-size: 13px; }

/* ──────────────────────────────────────────
NAV
─────────────────────────────────────────── */
nav {
position: sticky;
top: 0;
z-index: 999;
background: rgba(255,255,255,.97);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 20px rgba(0,44,109,.06);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
gap: 40px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}

.nav-logo-text { font-size: 20px; font-weight: 800; color: var(--imperial-blue); letter-spacing: -.3px; }
.nav-logo-text span { color: var(--blaze-orange); }
.nav-links {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
}
.nav-links a {
font-size: 14px;
font-weight: 500;
color: var(--text-body);
text-decoration: none;
padding: 8px 14px;
border-radius: 6px;
transition: all .2s;
}
.nav-links a:hover { color: var(--imperial-blue); background: #F0F6FF; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-phone {
font-size: 15px;
font-weight: 700;
color: var(--imperial-blue);
text-decoration: none;
letter-spacing: -.2px;
}

/* ──────────────────────────────────────────
HERO
─────────────────────────────────────────── */
.hero {
position: relative;
min-height: 660px;
background: linear-gradient(105deg, var(--bg-dark) 0%, #003A8C 55%, #005FBF 100%);
overflow: hidden;
display: flex;
align-items: center;
}

/* Geometric pattern overlay */
.hero::before {
z-index:0;
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 75% 50%, rgba(0,149,217,.18) 0%, transparent 55%),
radial-gradient(circle at 20% 80%, rgba(247,86,0,.12) 0%, transparent 40%);
pointer-events: none;
}

/* Diagonal accent stripe */
.hero::after {
z-index:0;
content: '';
position: absolute;
right: -80px;
top: 0;
bottom: 0;
width: 52%;
background: rgba(255,255,255,.03);
transform: skewX(-6deg);
pointer-events: none;
}

.hero-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 420px;
gap: 64px;
align-items: center;
padding: 80px 24px;
max-width: var(--max-w);
margin: 0 auto;
width: 100%;
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(247,86,0,.15);
border: 1px solid rgba(247,86,0,.3);
border-radius: 100px;
padding: 6px 16px;
font-size: 12px;
font-weight: 600;
color: #FFAB88;
letter-spacing: .5px;
margin-bottom: 20px;
}
.hero-badge-dot {
width: 6px;
height: 6px;
background: var(--blaze-orange);
border-radius: 50%;
animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(1.4); }
}

.hero h1 { color: white; margin-bottom: 20px; }
.hero h1 em { color: var(--blue-bell); font-style: normal; }
.hero-sub { font-size: 18px; color: rgba(255,255,255,.75); margin-bottom: 36px; line-height: 1.65; max-width: 520px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }

.hero-stats {
display: flex;
gap: 32px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,.12);
}
.hero-stat-val { font-size: 28px; font-weight: 800; color: white; }
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,.55); font-weight: 500; margin-top: 2px; }

/* Hero Form Card */
.hero-form-card {
background: white;
border-radius: 16px;
padding: 36px 32px;
box-shadow: var(--shadow-lg);
}
.hero-form-card h3 { color: var(--imperial-blue); margin-bottom: 4px; font-size: 20px; }
.hero-form-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-body); margin-bottom: 6px; letter-spacing: .3px; }
.form-group input,
.form-group select {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--border);
border-radius: 8px;
font-family: var(--font);
font-size: 14px;
color: var(--text-primary);
background: white;
transition: border-color .2s;
outline: none;
-webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--blue-bell); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-form-card .btn { width: 100%; justify-content: center; padding: 14px; font-size: 15px; margin-top: 4px; }
.form-trust { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 12px; }

/* ──────────────────────────────────────────
TRUST BAR
─────────────────────────────────────────── */
.trust-bar {
background: white;
border-bottom: 1px solid var(--border);
padding: 20px 0;
}
.trust-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
color: var(--text-body);
}
.trust-icon {
width: 36px;
height: 36px;
background: #F0F6FF;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--imperial-blue);
font-size: 16px;
flex-shrink: 0;
}
.trust-divider { width: 1px; height: 36px; background: var(--border); }

/* ──────────────────────────────────────────
SERVICES
─────────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 56px; }
.section-header h2 { color: var(--imperial-blue); margin-bottom: 14px; }
.section-header p { max-width: 560px; margin: 0 auto; color: var(--text-body); }

.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.service-card {
background: white;
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px 28px;
transition: all .3s var(--ease);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--imperial-blue), var(--blue-bell));
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ease);
}
.service-card:hover {
border-color: rgba(0,44,109,.15);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
width: 52px;
height: 52px;
background: #F0F6FF;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
transition: background .3s;
}
.service-card:hover .service-icon { background: var(--imperial-blue); }
.service-card h3 { font-size: 18px; color: var(--imperial-blue); margin-bottom: 10px; }
.service-card p { font-size: 14px; line-height: 1.65; color: var(--text-body); margin-bottom: 20px; }
.service-link {
font-size: 13px;
font-weight: 700;
color: var(--imperial-blue);
text-decoration: none;
letter-spacing: .3px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap .2s;
}
.service-link:hover { gap: 10px; color: var(--blaze-orange); }

/* ──────────────────────────────────────────
AIR CARE+ MEMBERSHIP
─────────────────────────────────────────── */
.membership {
background: linear-gradient(135deg, var(--imperial-blue) 0%, #003A8C 60%, #005FBF 100%);
position: relative;
overflow: hidden;
}
.membership::before {
content: '';
position: absolute;
right: -100px;
top: -100px;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(0,149,217,.12);
pointer-events: none;
}
.membership-inner {
display: grid;
grid-template-columns: 1fr 400px;
gap: 80px;
align-items: center;
}
.membership h2 { color: white; margin-bottom: 12px; }
.membership-sub { color: rgba(255,255,255,.7); font-size: 17px; margin-bottom: 36px; }
.membership-features { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.membership-features li {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,.85);
font-size: 15px;
}
.check-icon {
width: 22px;
height: 22px;
background: var(--blue-bell);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: white;
flex-shrink: 0;
}

/* Membership card */
.membership-card {
background: rgba(255,255,255,.06);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
padding: 36px;
}
.membership-card-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: var(--blaze-orange);
text-transform: uppercase;
margin-bottom: 8px;
}
.membership-card h3 { color: white; font-size: 24px; margin-bottom: 6px; }
.membership-card-price {
margin: 20px 0;
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.price-val { font-size: 48px; font-weight: 800; color: white; line-height: 1; }
.price-unit { font-size: 14px; color: rgba(255,255,255,.5); margin-top: 4px; }
.membership-card .btn { width: 100%; justify-content: center; }
.membership-note { text-align: center; font-size: 12px; color: rgba(255,255,255,.4); margin-top: 14px; }

/* ──────────────────────────────────────────
AREAS SERVED
─────────────────────────────────────────── */
.areas-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 16px;
}
.area-chip {
background: white;
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 18px;
text-align: center;
font-size: 14px;
font-weight: 500;
color: var(--imperial-blue);
text-decoration: none;
transition: all .2s;
display: block;
}
.area-chip:hover {
background: var(--imperial-blue);
color: white;
border-color: var(--imperial-blue);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}

/* ──────────────────────────────────────────
ABOUT / WHY US
─────────────────────────────────────────── */
.about-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-img-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
gap: 24px;
}
.about-photo {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 16px;
aspect-ratio: 4 / 5;
position: relative;
background: #E8F0FD;
}
.about-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 25%;
display: block;
}
.about-photo-label {
position: absolute;
bottom: 12px;
left: 12px;
right: 12px;
background: rgba(0,44,109,.85);
border-radius: 8px;
padding: 8px 10px;
color: white;
font-size: 11px;
font-weight: 600;
text-align: center;
}
.about-text h2 { color: var(--imperial-blue); margin-bottom: 16px; }
.about-values { display: flex; flex-direction: column; gap: 20px; margin: 32px 0; }
.about-value {
display: flex;
gap: 16px;
align-items: flex-start;
}
.about-value-icon {
width: 44px;
height: 44px;
background: #F0F6FF;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.about-value h4 { font-size: 15px; color: var(--imperial-blue); margin-bottom: 4px; }
.about-value p { font-size: 14px; }

/* ──────────────────────────────────────────
TESTIMONIALS
─────────────────────────────────────────── */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial-card {
background: white;
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
transition: all .25s var(--ease);
}
.testimonial-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.stars { color: #F59E0B; font-size: 14px; letter-spacing: 1px; margin-bottom: 14px; }
.testimonial-text { font-size: 14px; line-height: 1.75; color: var(--text-body); margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--imperial-blue), var(--blue-bell));
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: white;
flex-shrink: 0;
}
.author-name { font-size: 14px; font-weight: 600; color: var(--imperial-blue); }
.author-loc { font-size: 12px; color: var(--text-muted); }
.testimonial-badge {
display: flex;
align-items: center;
gap: 6px;
background: #F0F9F0;
border: 1px solid #BBF7D0;
border-radius: 6px;
padding: 6px 10px;
font-size: 11px;
font-weight: 600;
color: #15803D;
margin-bottom: 24px;
}

/* ──────────────────────────────────────────
CTA BANNER
─────────────────────────────────────────── */
.cta-banner {
background: var(--blaze-orange);
padding: 72px 0;
text-align: center;
}
.cta-banner h2 { color: white; margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,.8); font-size: 18px; margin-bottom: 36px; }
.cta-banner-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-white {
background: white;
color: var(--blaze-orange);
font-weight: 700;
}
.btn-white:hover {
background: #FFF7F5;
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
.btn-white-outline {
background: transparent;
color: white;
border: 2px solid rgba(255,255,255,.5);
}
.btn-white-outline:hover {
background: rgba(255,255,255,.1);
border-color: white;
}

/* ──────────────────────────────────────────
FOOTER
─────────────────────────────────────────── */
footer {
background: var(--bg-dark);
padding: 64px 0 32px;
color: rgba(255,255,255,.6);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-brand p { font-size: 14px; line-height: 1.7; max-width: 260px; margin-top: 16px; }
.footer-col h4 {
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: white;
margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
color: rgba(255,255,255,.55);
text-decoration: none;
font-size: 14px;
transition: color .2s;
}
.footer-col ul a:hover { color: white; }
.footer-contact-item { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 12px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
}
.footer-badges { display: flex; gap: 8px; }
.footer-badge {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px;
padding: 5px 10px;
font-size: 11px;
color: rgba(255,255,255,.5);
font-weight: 500;
}

/* ──────────────────────────────────────────
STYLE GUIDE SECTION
─────────────────────────────────────────── */

.sg-section { margin-bottom: 60px; }
.sg-section h3 { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blaze-orange); margin-bottom: 24px; }

.color-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch { width: 80px; }
.swatch-block { width: 80px; height: 80px; border-radius: 10px; box-shadow: var(--shadow-sm); margin-bottom: 8px; }
.swatch-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.swatch-hex { font-size: 10px; color: var(--text-muted); font-family: monospace; }

.type-samples { display: flex; flex-direction: column; gap: 16px; }
.type-sample { border-left: 3px solid var(--border); padding-left: 16px; }
.type-sample-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }

.btn-showcase { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.spacing-samples { display: flex; gap: 20px; align-items: flex-end; }
.spacing-block { background: var(--imperial-blue); opacity: .15; border-radius: 4px; }

/* ──────────────────────────────────────────
ANIMATION SPEC
─────────────────────────────────────────── */

.anim-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.anim-card {
background: var(--bg-page);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
}
.anim-card h4 { font-size: 14px; font-weight: 700; color: var(--imperial-blue); margin-bottom: 8px; }
.anim-card p { font-size: 13px; }
.anim-tag {
display: inline-block;
background: #F0F6FF;
color: var(--imperial-blue);
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 10px;
letter-spacing: .5px;
}

/* ──────────────────────────────────────────
REVEAL ANIMATIONS
─────────────────────────────────────────── */
.reveal { opacity: 1 !important; transform: none !important; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

:root {  }
/* CHAT WIDGET OVERRIDES for new design */
:root{--sa-navy:#0d1f3c;--sa-blue:#0095D9;--sa-orange:#F75600;--sa-ease:cubic-bezier(.4,0,.2,1);}
#sa-chat-btn{position:fixed;bottom:28px;right:28px;z-index:99990;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#F75600,#ff7a2f);color:#fff;border:none;border-radius:50px;padding:14px 22px;font-family:'Barlow',sans-serif;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 32px rgba(247,86,0,.45);transition:transform .25s var(--sa-ease),box-shadow .25s;white-space:nowrap;}
#sa-chat-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 44px rgba(247,86,0,.55);}
#sa-chat-btn .sa-icon{font-size:18px;line-height:1;}
#sa-chat-btn .sa-dot{position:absolute;top:-5px;right:-5px;width:18px;height:18px;background:#fff;color:var(--sa-orange);border-radius:50%;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .3s var(--sa-ease);}
#sa-chat-btn .sa-dot.show{opacity:1;transform:scale(1);}
#sa-win{position:fixed;bottom:100px;right:28px;width:380px;max-width:calc(100vw - 40px);height:520px;background:#0d1f3c;border:1px solid rgba(0,149,217,.2);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);display:flex;flex-direction:column;overflow:hidden;z-index:99991;opacity:0;transform:translateY(20px) scale(.97);pointer-events:none;transition:opacity .3s var(--sa-ease),transform .3s var(--sa-ease);}
#sa-win.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all;}
.sa-hd{background:linear-gradient(135deg,var(--sa-navy),#0f2a5c);padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(0,149,217,.15);flex-shrink:0;}
.sa-av{width:40px;height:40px;background:linear-gradient(135deg,var(--sa-orange),#ff7a2f);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 4px 12px rgba(247,86,0,.4);}
.sa-hi{flex:1;}
.sa-hn{font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;color:#fff;line-height:1.2;}
.sa-hs{font-size:11px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px;margin-top:2px;}
.sa-sd{width:6px;height:6px;background:#22c55e;border-radius:50%;animation:saPulse 2s ease-in-out infinite;}
@keyframes saPulse{0%,100%{opacity:1}50%{opacity:.4}}
.sa-xb{background:rgba(255,255,255,.07);border:none;color:rgba(255,255,255,.6);width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .2s,color .2s;flex-shrink:0;}
.sa-xb:hover{background:rgba(255,255,255,.14);color:#fff;}
.sa-qp{padding:10px 14px;display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;max-height:140px;overflow-y:auto;}
.sa-qp.gone{display:none;}
.sa-ql{width:100%;font-size:10px;font-weight:700;letter-spacing:.8px;color:rgba(255,255,255,.3);text-transform:uppercase;margin-bottom:2px;}
.sa-qb{background:rgba(0,149,217,.1);border:1px solid rgba(0,149,217,.25);color:rgba(255,255,255,.8);border-radius:20px;padding:10px 16px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,color .2s;line-height:1.3;}
.sa-qb:hover{background:rgba(0,149,217,.18);border-color:rgba(0,149,217,.4);color:#fff;}
.sa-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;}
.sa-msgs::-webkit-scrollbar{width:4px;}.sa-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}
.sa-m{display:flex;flex-direction:column;max-width:85%;animation:saIn .25s var(--sa-ease) both;}
@keyframes saBounce{0%,100%{transform:translateY(0);}30%{transform:translateY(-8px);}50%{transform:translateY(-4px);}}
@keyframes saIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sa-m.b{align-self:flex-start;}.sa-m.u{align-self:flex-end;}
.sa-bbl{padding:12px 16px;border-radius:14px;font-size:15px;line-height:1.6;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Poppins',sans-serif;font-weight:400;}
.sa-m.b .sa-bbl{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.92);border-bottom-left-radius:4px;}
.sa-m.u .sa-bbl{background:linear-gradient(135deg,var(--sa-navy),#1a3a7c);border:1px solid rgba(0,149,217,.25);color:#fff;border-bottom-right-radius:4px;}
.sa-bbl strong{color:#fff;font-weight:700;}.sa-bbl a{color:var(--sa-blue);text-decoration:none;}
.sa-bbl a.sa-lnk{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--sa-orange),#ff7a2f);color:#fff!important;padding:8px 16px;border-radius:8px;font-weight:700;font-size:13px;margin-top:8px;text-decoration:none!important;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(247,86,0,.35);}
.sa-bbl a.sa-lnk:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(247,86,0,.5);}
.sa-typ{display:flex;align-items:center;gap:5px;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:14px;border-bottom-left-radius:4px;width:fit-content;align-self:flex-start;animation:saIn .25s var(--sa-ease) both;}
.sa-typ span{width:6px;height:6px;background:rgba(255,255,255,.4);border-radius:50%;animation:saTyp 1.2s ease-in-out infinite;}
.sa-typ span:nth-child(2){animation-delay:.2s}.sa-typ span:nth-child(3){animation-delay:.4s}
@keyframes saTyp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.sa-nudge{background:linear-gradient(135deg,rgba(247,86,0,.12),rgba(0,44,109,.2));border:1px solid rgba(247,86,0,.25);border-radius:12px;padding:12px 14px;align-self:stretch;animation:saIn .3s var(--sa-ease) both;}
.sa-nudge p{font-size:12px;color:rgba(255,255,255,.6);margin:0 0 8px;font-family:'Barlow',sans-serif;}
.sa-inp{padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:8px;align-items:flex-end;flex-shrink:0;background:rgba(0,0,0,.15);}
#sa-txt{flex:1;touch-action:manipulation;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-family:'Barlow',sans-serif;font-size:16px;padding:9px 12px;resize:none;outline:none;max-height:100px;min-height:38px;line-height:1.45;transition:border-color .2s;overflow-y:auto;}
#sa-txt::placeholder{color:rgba(255,255,255,.3);}
#sa-txt:focus{border-color:rgba(0,149,217,.4);}
#sa-snd{width:38px;height:38px;background:linear-gradient(135deg,var(--sa-orange),#ff7a2f);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s,box-shadow .2s;box-shadow:0 3px 12px rgba(247,86,0,.35);}
#sa-snd:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px rgba(247,86,0,.5);}
#sa-snd:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.sa-pw{text-align:center;font-size:10px;color:rgba(255,255,255,.18);padding:6px 0 8px;font-family:'Barlow',sans-serif;flex-shrink:0;}
#sa-snd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ═══ CALCULATOR INTERACTIVE ═══ */
.calc-step{width:32px;height:32px;border-radius:50%;background:var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:all .3s;}
.calc-step.active{background:#D0E1FF;color:var(--imperial-blue);}
.calc-step.current{background:var(--imperial-blue);color:white;box-shadow:0 4px 12px rgba(0,44,109,.3);}
.calc-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.calc-opt{background:white;border:2px solid var(--border);border-radius:12px;padding:20px 12px;text-align:center;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:6px;}
.calc-opt:hover{border-color:var(--blue-bell);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,44,109,.1);}
.calc-opt.selected{border-color:var(--imperial-blue);background:#F0F6FF;box-shadow:0 4px 16px rgba(0,44,109,.15);}
.calc-opt-icon{font-size:28px;}
.calc-opt-label{font-size:14px;font-weight:700;color:var(--text-primary);}
.calc-opt-desc{font-size:12px;color:var(--text-muted);}
.calc-slide{animation:calcFadeIn .3s ease;}
@keyframes calcFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:640px){.calc-options{grid-template-columns:repeat(2,1fr);}.calc-opt{padding:16px 10px;}}

/* ═══ NAV LOGO ═══ */
.nav-logo-icon { width:36px; height:auto; flex-shrink:0; }

/* ═══ MOBILE NAV ═══ */
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--imperial-blue);border-radius:2px;transition:all .3s;}
.nav-mobile{display:none;flex-direction:column;gap:4px;padding:16px 24px 20px;border-top:1px solid var(--border);background:#fff;position:relative;z-index:9997;}
.nav-mobile a{font-size:15px;font-weight:500;color:var(--text-body);text-decoration:none;padding:10px 12px;border-radius:8px;transition:all .2s;}
.nav-mobile a:hover{color:var(--imperial-blue);background:#F0F6FF;}
.nav-mob-phone{font-weight:700!important;color:var(--imperial-blue)!important;}
.nav-mobile.open{display:flex;}
.nav-close-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-muted);padding:8px;line-height:1;align-self:flex-end;margin-bottom:-4px;}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9989;-webkit-tap-highlight-color:transparent;}
.nav-backdrop.open{display:block;}
.hero-mobile-cta{display:none;flex-direction:column;gap:10px;margin-top:24px;}
.mobile-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#fff;border-top:2px solid var(--border);padding:10px 16px;gap:10px;box-shadow:0 -4px 20px rgba(0,0,0,.1);}
.sticky-call{flex:1;text-align:center;padding:12px;font-weight:700;font-size:14px;color:var(--imperial-blue);background:#F0F6FF;border-radius:10px;text-decoration:none;}
.sticky-quote{flex:1;text-align:center;padding:12px;font-weight:700;font-size:14px;color:#fff;background:var(--blaze-orange);border-radius:10px;text-decoration:none;}

/* ═══════════════════════════════════════════
   MOBILE — consolidated, mobile-first
   Target: 390px (iPhone 14) primary
═══════════════════════════════════════════ */

/* Force 16px inputs to prevent iOS zoom */
input,select,textarea{font-size:16px!important;}
*{-webkit-tap-highlight-color:transparent;}
html,body{overflow-x:hidden;max-width:100vw;}

/* ── TABLET (≤1024px) ── */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-form-card{display:none;}
  .hero-mobile-cta{display:flex;}
  .hero-actions{display:none;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .membership-inner{grid-template-columns:1fr;gap:40px;}
  .about-inner{grid-template-columns:1fr;}
  .about-img-grid{grid-template-columns:repeat(2,1fr);}
  .testimonials-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .areas-grid{grid-template-columns:repeat(3,1fr);}
  .hero-highlights{display:none!important;}
  .pricing-grid{grid-template-columns:1fr!important;gap:16px!important;max-width:400px!important;}
}

/* ── MOBILE (≤640px) ── */
@media(max-width:640px){
  /* Typography */
  :root{--section-y:48px;}
  h1{font-size:30px!important;line-height:1.15!important;}
  h2{font-size:24px!important;}
  h3{font-size:19px!important;}
  p{font-size:15px!important;line-height:1.65!important;}

  /* Layout */
  .container{padding:0 18px;}
  .section{padding:44px 0!important;}

  /* Nav */
  nav .nav-links,nav .nav-phone{display:none;}
  nav .nav-right .btn{display:none;}
  .nav-burger{display:flex;}
  .nav-logo img{height:34px;}

  /* Hero */
  .hero{min-height:auto!important;padding:72px 0 40px!important;}
  .hero-inner{padding:0;}
  .hero-content{text-align:left;}
  .hero-badge{font-size:11px!important;padding:6px 14px!important;}
  .hero-sub{font-size:15px!important;line-height:1.65!important;margin-bottom:20px!important;}
  .hero-mobile-cta{display:flex!important;flex-direction:column;gap:10px;}
  .hero-mobile-cta .btn{width:100%!important;justify-content:center;text-align:center;padding:15px!important;font-size:16px!important;}
  .hero-stats{flex-wrap:wrap;gap:14px;margin-top:20px;justify-content:flex-start;}
  .hero-stat-val{font-size:20px!important;}
  .hero-stat-label{font-size:11px!important;}
  .hero-actions{display:none;}

  /* Trust bar */
  .trust-bar{padding:12px 0;}
  .trust-bar-inner{flex-wrap:wrap;gap:10px;justify-content:center;}
  .trust-item{font-size:12px;gap:5px;}
  .trust-icon{width:26px;height:26px;font-size:12px;}
  .trust-divider{display:none;}

  /* Services */
  .services-grid{grid-template-columns:1fr!important;}
  .service-card{padding:20px!important;}

  /* Membership */
  .membership-inner{grid-template-columns:1fr!important;}
  .membership-features{gap:12px!important;}

  /* About */
  .about-inner{grid-template-columns:1fr!important;}
  .about-img-grid{display:none!important;}
  .about-values{gap:14px!important;}

  /* Reviews */
  .testimonials-grid{grid-template-columns:1fr!important;}
  .testimonials-grid>*:nth-child(n+2){display:none!important;}
  .rv-grid{display:block!important;}
  .rv-grid>*:nth-child(n+2){display:none!important;}

  /* Areas */
  .areas-grid,.area-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* Calculator */
  .calc-wrap{padding:20px 16px;}
  .calc-grid{grid-template-columns:1fr;}
  .calc-options{grid-template-columns:repeat(2,1fr);}
  .calc-opt{padding:14px 8px;}

  /* Quote form */
  .form-row{grid-template-columns:1fr;}
  #quote .form-group input,
  #quote .form-group select{padding:14px 16px!important;border-radius:10px!important;}
  #quote .btn{width:100%!important;justify-content:center;padding:15px!important;font-size:16px!important;}

  /* CTA banner */
  .cta-banner{display:none!important;}
  .cta-banner-actions{flex-direction:column!important;gap:10px!important;}
  .mobile-cta-banner{display:block!important;}

  /* Chat */
  #sa-chat-btn{bottom:72px;}
  #sa-win{bottom:64px;right:0;left:0;width:100%;max-width:100%;
    height:calc(100dvh - 120px);max-height:none;border-radius:16px 16px 0 0;}

  /* Sticky CTA */
  .mobile-sticky-cta{display:flex!important;}

  /* Air Care+ hero buttons — full width on mobile */
  .air-care-hero-actions .btn,.air-care-hero-actions a{width:100%!important;justify-content:center;text-align:center;}

  /* Footer */
  footer{padding:24px 0 80px!important;}
  .footer-grid{grid-template-columns:1fr!important;gap:0!important;}
  .footer-col{display:none!important;}
  .footer-brand{text-align:center;margin-bottom:16px;}
  .footer-brand>div{justify-content:center!important;}
  .footer-brand p{display:none!important;}
  .footer-badges{display:none!important;}
  .footer-bottom{flex-direction:column!important;text-align:center;gap:8px;}
  .footer-bottom span{font-size:11px!important;}
  .footer-bottom a{font-size:11px!important;}
}

/* ── SCROLL REVEAL ── */
.reveal{opacity:1!important;transform:none!important;}
.reveal.visible{opacity:1;transform:none;}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.reveal-delay-4{transition-delay:.4s;}
.reveal-delay-5{transition-delay:.5s;}

/* ── CARD HOVER ── */
.service-card{transition:transform .25s ease,box-shadow .25s ease;}
.service-card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(0,44,109,.11);}

/* ── COUNTER PULSE ── */
@keyframes countPulse{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}}
.count-done{animation:countPulse .4s ease;}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .service-card:hover{transform:none;}
  .count-done{animation:none;}
}

/* ── HERO NET CANVAS ── */
.hero .hero-inner,.hero .hero-form-card,.hero .hero-form-card *{position:relative;z-index:2;}
@media(min-width:768px){
  #hero-net{pointer-events:auto;}
  .hero .hero-inner,.hero .hero-inner *{position:relative;z-index:2;}
}

/* deploy 1773764379575 */

/* ─── FUNNEL STYLES ─────────────────────────────────────────────────────────── */
.funnel-wrap{max-width:620px;margin:0 auto;width:100%;}

.funnel-progress{display:flex;gap:6px;margin-bottom:28px;}
.fp-seg{flex:1;height:4px;background:rgba(255,255,255,0.15);border-radius:4px;transition:background 0.3s;}
.fp-seg.done{background:var(--blaze-orange);}

.funnel-step{display:none;}
.funnel-step.active{display:block;}

.funnel-card{background:#fff;border-radius:20px;padding:36px 32px;box-shadow:0 24px 60px rgba(0,0,0,0.3);}
.funnel-card h2{font-size:clamp(1.3rem,3.5vw,1.75rem);font-weight:800;color:var(--imperial-blue);margin-bottom:8px;line-height:1.2;}
.funnel-card>p{font-size:14px;color:var(--text-muted);margin-bottom:22px;}

.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;}
.opt-btn{background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;padding:14px 10px;cursor:pointer;transition:all 0.18s;text-align:center;font-family:var(--font);}
.opt-btn:hover{border-color:var(--imperial-blue);background:#f0f6ff;}
.opt-btn.selected{border-color:var(--blaze-orange);background:#fff5f1;box-shadow:0 0 0 3px rgba(247,86,0,0.12);}
.opt-icon{font-size:22px;margin-bottom:6px;}
.opt-label{font-size:12px;font-weight:600;color:var(--imperial-blue);line-height:1.3;}

.funnel-nav{display:flex;gap:12px;margin-top:20px;}

.success-wrap{text-align:center;padding:12px 0;}
.success-icon{font-size:48px;margin-bottom:16px;}

/* Funnel button overrides — prevent global mobile width:100% from breaking layout */
.funnel-card .btn{display:inline-flex;width:auto;}
.funnel-card .btn-primary{background:var(--blaze-orange);color:#fff;padding:13px 28px;border-radius:10px;font-size:15px;font-weight:700;border:none;cursor:pointer;transition:all 0.2s;font-family:var(--font);}
.funnel-card .btn-primary:hover{background:#e04e00;transform:translateY(-1px);}
.funnel-card .btn-outline{background:transparent;color:var(--imperial-blue);border:1.5px solid var(--border);padding:13px 20px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:var(--font);}
.funnel-card .btn-outline:hover{border-color:var(--imperial-blue);background:#f0f6ff;}

/* Step 1 Next button — full width */
#fstep1 .funnel-card>.btn-primary{width:100%;justify-content:center;}

/* Step 2, 3 nav — flex children fill naturally */
.funnel-nav .btn-outline{flex:1;justify-content:center;}
.funnel-nav .btn-primary{flex:2;justify-content:center;}

@media(max-width:560px){
  .funnel-card{padding:24px 18px;}
  .option-grid{grid-template-columns:repeat(2,1fr);}
  .funnel-card h2{font-size:1.2rem;}
}

/* ── NAV ICON ONLY ── */
@keyframes iconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.nav-icon-only{height:36px;width:auto;animation:iconFloat 3s ease-in-out infinite;transition:opacity .2s;display:block;}
.nav-icon-only:hover{opacity:.8;}
nav{z-index:9999!important;}

/* Form bar scroll offset so nav doesn't cover it */
.form-bar{scroll-margin-top:68px;}

/* Close mobile nav when any link is tapped */

/* ── HERO-B CENTERED ── */
.hero-b-inner{text-align:center;}
.hero-b-badge{margin-left:auto;margin-right:auto;}
.hero-b-sub{margin-left:auto;margin-right:auto;}
.hero-b-actions{justify-content:center;}