/* =====================================================================
   CSS GLOBAL STYLES
   ===================================================================== */

/* ---- COLOR THEME VARIABLES ----
   Change the site's colors by editing these values.
   --cyan  : primary brand blue
   --dark  : darker blue (hover states)
   --red   : accent / emergency red
   --ink   : main text color
   --paper : white page background
   --mist  : light gray background used for alternating sections          */
:root{--cyan:#0FA5D6;--dark:#087DA3;--red:#E22621;--ink:#111111;--paper:#FFFFFF;--mist:#F5F7F8}

/* ---- CSS RESET & BASE TYPOGRAPHY ----
   Removes default browser spacing and sets the base font for the site. */
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{overflow-x:hidden}img,video{max-width:100%;height:auto}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-weight:600}
h1,h2,h3,h4{font-weight:800;color:var(--ink)}a{text-decoration:none}

/* ---- LAYOUT HELPERS ----
   .wrap   : centers content and caps its width at 1160px
   section : adds 80px of vertical padding to every <section>
   .alt    : gives a section the light-gray background (for alternating) */
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}section{padding:80px 0}.alt{background:var(--mist)}

/* ---- SECTION HEADINGS ----
   .eyebrow    : small uppercase label above a section title
   .eyebrow.red: red variant of the eyebrow label
   .h2         : main section title (responsive font size)
   .sub        : subtitle paragraph below the heading
   .center     : centers content and its subtitle                     */
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}.eyebrow.red{color:var(--red)}
.h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15}.sub{color:#33383d;max-width:680px;margin-top:12px}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}

/* ---- ANIMATED GRADIENT ----
   flowGrad animates the background position so gradients "flow" smoothly.
   Used by .anim-grad backgrounds, buttons, the top strip and footer band. */
@keyframes flowGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.anim-grad{background:linear-gradient(120deg,var(--cyan) 0%,var(--dark) 30%,var(--cyan) 50%,var(--red) 80%,var(--red) 100%);background-size:300% 300%;animation:flowGrad 8s ease infinite}

/* =====================================================================
   ICON ANIMATIONS EVERY ICON ON THE SITE IS ANIMATED
   =====================================================================
   The following keyframes drive all icon movement. To adjust speed or
   intensity, edit the numbers here (they cascade to every icon below):

     iconFloat : gently bobs an icon up and down (card icons, back-to-top)
     iconPulse : smoothly scales an icon bigger/smaller (chat button, check)
     logoSpin  : continuously rotates the fan logo (thematic "vent" spin)

   Each icon and the rule that animates it (search these class names):
     .ic        → iconFloat   (all service / feature / benefit card icons)
     .brand svg → logoSpin    (header fan logo)
     .chatfab   → iconPulse   (floating chat button)
     .fab       → iconFloat   (floating "Request Service" button)
     .totop     → iconFloat   (back-to-top button)
     .success-check → iconPulse (the green check after form submit)      */
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes logoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ===================================================================== */

/* ---- BUTTONS ----
   .btn      : base button style
   .btn-grad : animated gradient button (primary call-to-action)
   .btn-cyan : solid blue button
   .btn-red  : solid red button
   .btn-sm   : smaller padding variant                              */
.btn{display:inline-flex;align-items:center;padding:14px 28px;border-radius:10px;font:800 15px 'Segoe UI',sans-serif;cursor:pointer;border:none;transition:all .28s;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn:hover::after{left:130%}
.btn-grad{background:linear-gradient(120deg,var(--cyan),var(--dark),var(--red),var(--cyan));background-size:300% 300%;animation:flowGrad 6s ease infinite;color:#fff}
.btn-grad:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,165,214,.4)}
.btn-cyan{background:var(--cyan);color:#fff}.btn-cyan:hover{background:var(--dark)}
.btn-red{background:var(--red);color:#fff}.btn-sm{padding:11px 20px;font-size:13.5px}

/* ---- HEADER &amp; NAVIGATION ----
   Sticky header bar with logo on the left, nav links center/right,
   a phone number, a "Request Service" button, and a mobile burger menu. */
header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid #edf1f4}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;color:var(--ink)}

/* ---- HEADER LOGO IMAGE ----
   .brand-logo is hidden by default and only shown once the image loads
   (.loaded class). If the file "images/aurian-logo.png" is missing,
   the <img> removes itself (onerror) and the fallback SVG logo shows.
   To change the logo, replace the file at images/aurian-logo.png.        */
.brand-logo{height:54px;width:78px;object-fit:fill;display:none;flex-shrink:0}
.brand-logo.loaded{display:block}
.brand-logo.loaded ~ svg{display:none}
/* Fallback fan logo spins continuously (see logoSpin in ICON ANIMATIONS). */
.brand > svg{flex-shrink:0;line-height:0;animation:logoSpin 16s linear infinite}
.brand{line-height:1.15}
.brand small{line-height:1.3}

/* Brand name text beside the logo: clean solid two-line lockup. */
.brand-name{display:flex;flex-direction:column;color:var(--dark);font-size:20px;line-height:1.1;white-space:nowrap}
.brand-name small{font-size:9.5px;letter-spacing:.14em;color:var(--cyan);font-weight:700;margin-top:3px;line-height:1.3}

/* ---- NAV LINKS ----
   Each link has an animated underline that slides in from the left. */
.navlinks{display:flex;gap:9px;list-style:none;align-items:center}
.navlinks a{color:var(--ink);font-weight:700;font-size:14.5px;padding:9px 14px;border-radius:10px;white-space:nowrap;border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.navlinks a:hover{background:rgba(15,165,214,.12);color:var(--dark);border-color:rgba(15,165,214,.35)}
.navlinks a.active{background:linear-gradient(120deg,var(--cyan),var(--dark),var(--red),var(--cyan));background-size:300% 300%;animation:flowGrad 6s ease infinite;color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(15,165,214,.35)}
.nav-cta{padding:11px 20px;font-size:14px}

/* ---- DROPDOWN NAVIGATION (service sub-pages) ---- */
.navlinks li{position:relative}
.navlinks .drop{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid #eaeef1;border-radius:14px;box-shadow:0 20px 46px rgba(17,17,17,.16);padding:8px 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:1002}
.navlinks li:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.navlinks .drop a{display:block;padding:11px 20px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;border:none;border-radius:0;transition:background .2s,color .2s}
.navlinks .drop a:hover{background:var(--mist);color:var(--cyan)}
.navlinks .drop a.active{background:linear-gradient(120deg,var(--cyan),var(--dark),var(--red),var(--cyan));background-size:300% 300%;animation:flowGrad 6s ease infinite;color:#fff}
.caret{display:inline-block;transition:transform .3s;font-size:12px;margin-left:3px}
@media(max-width:840px){.navlinks .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;min-width:0;padding:0;max-height:0;overflow:hidden;transition:max-height .35s ease}.navlinks li.open .drop{max-height:340px}.navlinks .drop a{padding:10px 0 10px 16px;font-size:14px;white-space:normal}.navlinks li.open > a .caret{transform:rotate(180deg)}}

/* Mobile "hamburger" menu button (hidden on desktop, shown via media query). */
.burger{display:none;background:none;border:none;cursor:pointer}.burger span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0}
.nav-close{display:none}
.nav-close-btn{background:var(--mist);border:none;width:42px;height:42px;border-radius:12px;font-size:26px;line-height:1;color:var(--ink);cursor:pointer;transition:background .2s}
.nav-close-btn:hover{background:#e8f1f5}
.nav-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.55);backdrop-filter:blur(3px);z-index:998;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.nav-backdrop.show{opacity:1;visibility:visible}
@media(min-width:841px){.nav-backdrop{display:none}}
.headphone{font-weight:800;color:var(--ink);white-space:nowrap;font-size:15.5px}

/* ---- HERO SECTION (home page) ----
   Large animated gradient banner with headline text and a white info card.
   .hero-grid handles the two-column layout and collapses via media queries. */
.hero{position:relative;color:#fff;padding:80px 0;overflow:hidden;background:linear-gradient(rgba(8,125,163,.86),rgba(17,24,39,.82)),url('../images/home-hero.jpg') center/cover no-repeat}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.hero h1{color:#fff;font-size:clamp(32px,4.4vw,52px);line-height:1.08}.hero h1 em{font-style:normal;color:#ffd6d4}
.hero p.lead{font-size:18px;color:#eafaff;max-width:540px;margin:18px 0 28px}

/* Small "pill" badges (e.g. "✓ Licensed &amp; Insured"). */
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:800;margin:4px 6px 4px 0}

/* The white card on the right side of the hero showing trust stats. */
.hero-card{background:#fff;border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.28)}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.mini-stat{background:var(--mist);border-radius:14px;padding:16px;text-align:center}
.mini-stat b{display:block;font-size:24px;color:var(--dark)}.mini-stat span{font-size:12px;font-weight:700;color:#333}

/* Red emergency call-out box inside the hero card. */
.emg-box{margin-top:20px;background:#fdf1f1;border:1.5px solid #f6c9c8;border-radius:14px;padding:14px 18px;font-weight:700}.emg-box b{color:var(--red)}

/* =====================================================================
   PRO TIP / TECHNICIAN TIP SECTION MODERN DARK CARD
   White space (with a subtle glow) after the hero, holding a dark
   gradient card: bigger image, gradient headline, animated checklist. */
.tip{position:relative;overflow:hidden;color:var(--ink);padding:96px 0;background:var(--paper)}
/* Subtle animated tint sweeping across the white space. */
.tip::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(15,165,214,.07) 50%,transparent 75%);background-size:300% 300%;animation:flowGrad 9s ease infinite;pointer-events:none}
/* Soft floating cyan glow. */
.tip::after{content:'';position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(15,165,214,.16),transparent 70%);top:-130px;right:-90px;filter:blur(50px);animation:iconFloat 7s ease-in-out infinite;pointer-events:none}

.tip .wrap{position:relative;z-index:2}

/* Dark gradient card with an animated gradient top edge. */
.tip-card{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:stretch;background:linear-gradient(135deg,#0a3f58 0%,#062033 55%,#0a3f58 100%);border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:46px;box-shadow:0 45px 90px rgba(6,32,51,.42),inset 0 1px 0 rgba(255,255,255,.12);overflow:visible}
.tip-card::before{content:'';position:absolute;top:-2px;left:12%;right:12%;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--dark),var(--red),var(--cyan));background-size:300% 100%;animation:flowGrad 5s ease infinite;filter:drop-shadow(0 0 12px rgba(15,165,214,.75))}

/* Floating badge tag overlapping the card's top edge. */
.tip-badge{position:absolute;top:-19px;left:36px;z-index:5;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,var(--cyan),var(--dark));color:#fff;border-radius:999px;padding:11px 20px;font:800 13.5px 'Segoe UI',sans-serif;letter-spacing:.05em;box-shadow:0 14px 30px rgba(15,165,214,.5);animation:iconFloat 4s ease-in-out infinite}

/* Image container: glow, hover zoom + a shine sweep across it. */
.tip-media{margin:0;height:100%;border-radius:22px;overflow:hidden;position:relative;box-shadow:0 26px 55px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.14)}
.tip-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.tip-card:hover .tip-media img{transform:scale(1.07)}
.tip-media::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .9s ease;pointer-events:none}
.tip-card:hover .tip-media::after{left:130%}
/* Caption strip over the bottom of the image. */
.tip-media figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(4,18,28,.92),transparent);color:#fff;font-size:13px;font-weight:700;padding:34px 18px 14px}

/* Text body + floating glass icon tile near the heading. */
.tip-body{position:relative}
.tip-float{position:absolute;top:-18px;right:8px;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:28px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);animation:iconFloat 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 20px rgba(15,165,214,.45))}
.tip .eyebrow{color:var(--cyan)}
/* Animated gradient headline. */
.tip-head{font-size:clamp(26px,3.2vw,36px);line-height:1.15;font-weight:800;background:linear-gradient(90deg,#7dd8f5,var(--cyan),var(--dark),var(--red),#7dd8f5);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:flowGrad 6s linear infinite}
.tip-copy{color:#cfe6f0;margin-top:16px;font-size:15.5px}
.tip-sub{font-size:15px;margin:22px 0 6px;text-transform:uppercase;letter-spacing:.08em;color:#7dd8f5}

/* Checklist chips with animated check circles. */
.tip-list{list-style:none;margin:14px 0 22px;display:grid;gap:12px}
.tip-list li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 16px;font-size:14.5px;font-weight:600;color:#eaf6fb;backdrop-filter:blur(6px);transition:transform .3s,border-color .3s,background .3s}
.tip-list li:hover{transform:translateX(6px);border-color:rgba(15,165,214,.65);background:rgba(15,165,214,.14)}
.tip-list li::before{content:'✓';flex-shrink:0;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--dark));color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px;box-shadow:0 6px 14px rgba(15,165,214,.45);animation:iconPulse 3s ease-in-out infinite}
.tip-list li b{color:#7dd8f5}

/* Trust signal pill. */
.tip-trust{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:10px 18px;font-size:13px;font-weight:800;color:#eaf6fb;margin-bottom:24px;backdrop-filter:blur(8px)}
.tip-trust b{color:#ffb3b0}

/* CTA row: primary button + secondary text link. */
.tip-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tip-link{color:#7dd8f5;font-weight:800;font-size:14.5px;transition:color .3s,transform .3s}.tip-link:hover{color:#fff;transform:translateX(3px)}

/* Reveal-on-scroll animation (driven by the IntersectionObserver). */
.tip-card.rv{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
.tip-card.rv.in{opacity:1;transform:translateY(0)}

/* ---- FEATURED PHOTO BANNER (before testimonials) ----
   Full-width rounded image with hover zoom + reveal-on-scroll. */
.feature-photo{margin:0;border-radius:26px;overflow:hidden;position:relative;box-shadow:0 30px 70px rgba(17,17,17,.16)}
.feature-photo img{width:100%;height:clamp(240px,36vw,420px);object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.feature-photo:hover img{transform:scale(1.05)}
.feature-photo.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.feature-photo.rv.in{opacity:1;transform:translateY(0)}

/* ---- ABOUT PAGE PHOTO (Who We Are section) ----
   Rounded image with hover zoom + reveal-on-scroll. */
.about-photo{margin:0;border-radius:22px;overflow:hidden;position:relative;box-shadow:0 26px 60px rgba(17,17,17,.18)}
.about-photo img{width:100%;height:360px;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.about-photo:hover img{transform:scale(1.05)}
.about-photo.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.about-photo.rv.in{opacity:1;transform:translateY(0)}

/* ---- RESIDENTIAL HERO: portrait image on the right ---- */
.res-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.res-hero-photo{margin:0;position:relative;border-radius:26px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.18),0 0 42px rgba(15,165,214,.35)}
.res-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.res-hero-photo:hover img{transform:scale(1.07)}
.res-hero-photo::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .9s ease;pointer-events:none}
.res-hero-photo:hover::after{left:130%}
.res-hero-photo.rv{opacity:0;transform:translateX(46px);transition:opacity .8s ease,transform .8s ease}
.res-hero-photo.rv.in{opacity:1;transform:translateX(0)}
@media(max-width:840px){.res-hero-grid{grid-template-columns:1fr}.res-hero-photo{max-width:340px;margin:0 auto}}

/* ---- HERO: iPhone-style phone mockup (chat) ---- */
.phone{position:relative;width:min(280px,100%);margin:0 auto;border-radius:44px;background:#0d1117;padding:12px;box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 3px #2a2f36,0 0 46px rgba(15,165,214,.35)}
.phone::before{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:108px;height:26px;background:#0d1117;border-radius:20px;z-index:3}
.phone::after{content:'';position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:120px;height:5px;border-radius:3px;background:rgba(255,255,255,.4);z-index:3}
.phone-screen{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:9/19;background:#000}
.phone.rv{opacity:0;transform:translateX(46px);transition:opacity .8s ease,transform .8s ease}
.phone.rv.in{opacity:1;transform:translateX(0)}
/* Chat conversation inside the phone screen (scoped "ph-" classes to avoid
   collision with the floating chat assistant). */
.ph-chat{position:absolute;inset:0;display:flex;flex-direction:column;background:#eef1f4}
.ph-chat-head{display:flex;align-items:center;gap:8px;padding:30px 12px 10px;background:#fff;border-bottom:1px solid #e2e6ea}
.ph-chat-head .ava{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--dark));color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}
.ph-chat-head b{font-size:12px;color:#111}
.ph-chat-head small{display:block;color:#3aa757;font-size:9.5px;font-weight:700;margin-top:1px}
.ph-chat-body{flex:1;display:flex;flex-direction:column;gap:7px;padding:12px 10px;overflow:hidden}
.ph-msg{max-width:84%;padding:8px 11px;border-radius:16px;font-size:11.5px;line-height:1.4;opacity:0;animation:chatIn .5s ease forwards;animation-delay:var(--d,0s)}
.ph-msg.us{align-self:flex-start;background:#fff;color:#111;border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ph-msg.cust{align-self:flex-end;background:linear-gradient(135deg,var(--cyan),var(--dark));color:#fff;border-bottom-right-radius:4px;box-shadow:0 1px 3px rgba(15,165,214,.35)}
.ph-chat-input{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border-top:1px solid #e2e6ea}
.ph-chat-input .bar{flex:1;background:#eef1f4;border-radius:999px;padding:8px 12px;font-size:10.5px;color:#8a94a0}
.ph-chat-input .send{width:30px;height:30px;border-radius:50%;background:var(--cyan);display:grid;place-items:center;color:#fff;font-size:12px;flex-shrink:0}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Team headshot: square rounded photo with hover zoom. */
.team-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/5;margin-bottom:14px;background:var(--mist);box-shadow:0 12px 28px rgba(17,17,17,.10)}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .team-photo img{transform:scale(1.07)}

/* Service card photo: landscape image with hover zoom. */
.service-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;margin-bottom:18px;background:var(--mist)}
.service-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .service-photo img{transform:scale(1.06)}

/* ---- BRANDS WE COVER (commercial page) ----
   Brand chips with hover gradient + shine sweep and staggered pop-in. */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:36px}
.brand-chip{position:relative;display:flex;align-items:center;justify-content:center;min-height:66px;background:#fff;border:1px solid #e6edf2;border-radius:16px;font-weight:800;font-size:15px;color:var(--dark);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease}
.brand-chip::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,var(--cyan),var(--dark));opacity:0;transition:opacity .35s ease}
.brand-chip::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
.brand-chip b{position:relative;z-index:2;transition:color .35s ease}
.brand-chip:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(15,165,214,.35);border-color:transparent}
.brand-chip:hover::before{opacity:1}
.brand-chip:hover::after{left:130%}
.brand-chip:hover b{color:#fff}
.brand-chip.rv{opacity:0}
.brand-chip.rv.in{opacity:1;animation:chipPop .7s cubic-bezier(.22,.9,.32,1.08) backwards;animation-delay:var(--d,0s)}
@keyframes chipPop{from{opacity:0;transform:translateY(38px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Industries cards: quick triple-spin entrance on scroll. */
.card.spin.rv{opacity:0}
.card.spin.rv.in{opacity:1;animation:spinIn .9s linear backwards;animation-delay:var(--d,0s)}
@keyframes spinIn{0%{opacity:0;transform:rotate(0deg) scale(.3)}100%{opacity:1;transform:rotate(1080deg) scale(1)}}

/* Service cards (commercial + residential): grow from tiny to normal on scroll. */
#comGrid .card.rv,#resGrid .card.rv{opacity:0}
#comGrid .card.rv.in,#resGrid .card.rv.in{opacity:1;animation:growIn .7s cubic-bezier(.2,.85,.3,1.08) backwards;animation-delay:var(--d,0s)}
@keyframes growIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

/* Generic reveal-on-scroll for inner/dropdown service pages.
   Cards use the same "animation + backwards" pattern as growIn so their
   final state stays clean (no lingering transform that breaks hover/tilt).
   #resGrid/#comGrid rules above are more specific and win on the overview
   pages. CTA banners, section headers, and FAQ items gently rise in too. */
.card.rv{opacity:0}
.card.rv.in{opacity:1;animation:cardUp .7s cubic-bezier(.22,.9,.32,1) backwards;animation-delay:var(--d,0s)}
@keyframes cardUp{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.anim-grad.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.anim-grad.rv.in{opacity:1;transform:translateY(0)}
.center.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.center.rv.in{opacity:1;transform:translateY(0)}
.faq details.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0s)}
.faq details.rv.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.card.rv,.anim-grad.rv,.center.rv,.faq details.rv{opacity:1;transform:none;animation:none;transition:none}}

/* ---- CARD GRIDS ----
   .cards : flexible grid container
   .c2/.c3/.c4 : 2, 3, or 4 equal columns (responsive via media queries) */
.cards{display:grid;gap:24px}.c2{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid #eaeef1;border-radius:18px;padding:28px;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;left:0;top:0;height:4px;width:0;background:linear-gradient(90deg,var(--cyan),var(--red));transition:width .4s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(17,17,17,.13)}.card:hover::before{width:100%}

/* ---- ICON BADGES (ANIMATED) ----
   .ic holds an SVG icon inside a rounded colored square.
   The icon box floats continuously (iconFloat). On hover, the inner SVG
   scales/rotates and the background turns solid. Cards with class "flag"
   switch the icon color from blue to red.                               */
.ic{width:56px;height:56px;border-radius:16px;background:rgba(15,165,214,.13);display:grid;place-items:center;margin-bottom:18px;transition:all .3s;animation:iconFloat 3.5s ease-in-out infinite}
.ic svg{width:28px;height:28px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:all .3s}
.card:hover .ic{background:var(--cyan)}.card:hover .ic svg{stroke:#fff;transform:scale(1.18) rotate(-10deg)}
.flag .ic{background:rgba(226,38,33,.12)}.flag .ic svg{stroke:var(--red)}
.flag:hover .ic{background:var(--red)}.flag:hover .ic svg{stroke:#fff;transform:scale(1.18) rotate(-10deg)}

/* ---- IMAGE PLACEHOLDER (.ph) ----
   .ph is a dashed placeholder box shown where a photo should go.
   It currently displays text like "[Image: AC Repair]".

   TO ADD A REAL PHOTO: put an <img> INSIDE the .ph div, for example:
       <div class="ph"><img src="images/ac-repair.jpg" alt="AC Repair"></div>
   The CSS below automatically makes .ph img fill the whole box and
   gently zoom on hover. Delete the "[Image: ...]" text when you add
   the real <img>. Recommended photo size is 16:9 landscape.             */
.ph{background:repeating-linear-gradient(45deg,var(--mist),var(--mist) 12px,#eef3f6 12px,#eef3f6 24px);border:1.5px dashed #c3d7e2;border-radius:14px;display:grid;place-items:center;color:#6a8494;font-size:13px;font-weight:800;text-align:center;padding:16px;min-height:170px;margin-bottom:18px;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;transition:transform .5s}
.ph:hover img{transform:scale(1.05)}

/* ---- ACCENT BAR &amp; STATS BAND ----
   .accent-bar : small animated gradient underline under section titles
   .band       : animated gradient stats strip (e.g. "6+ Years")        */
.accent-bar{width:56px;height:5px;border-radius:3px;display:inline-block;background:linear-gradient(90deg,var(--cyan),var(--red));background-size:200% 100%;animation:flowGrad 5s ease infinite}
.band{border-radius:24px;padding:48px 36px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;color:#fff;box-shadow:0 24px 48px rgba(8,125,163,.3)}
.band b{display:block;font-size:clamp(28px,4vw,42px);font-weight:800}.band span{font-size:13px;font-weight:800;color:#ffe3e1;text-transform:uppercase}

/* ---- TESTIMONIALS / REVIEWS ----
   .quote-mark : large red quotation mark
   .stars      : gold star rating
   .who        : row holding avatar + customer name/location
   .avatar     : circular initials badge                              */
.quote-mark{font:800 60px/0.6 Georgia,serif;color:var(--red);display:block;margin-bottom:12px}
.stars{color:#F5A623;letter-spacing:3px;margin-bottom:10px}
.who{margin-top:16px;display:flex;align-items:center;gap:12px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--dark));color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.who small{font-size:12.5px;color:#5b656d;font-weight:700}

/* ---- SUB-PAGE HERO (About, Residential, Commercial, etc.) ----
   Smaller version of the main hero used at the top of inner pages,
   with a breadcrumb trail (.crumb) leading back to Home.             */
.pagehero{color:#fff;padding:80px 0}
.pagehero h1{color:#fff;font-size:clamp(30px,4vw,46px);line-height:1.1}.pagehero p{color:#ffeceb;font-size:17px;margin-top:14px;max-width:640px}
.crumb{font-size:13px;font-weight:700;margin-bottom:16px}.crumb a{color:#cfeffb}.crumb a:hover{color:#fff;text-decoration:underline}

/* ---- SERVICE AREA HERO: animated map background ----
   A stylized map (street grid, roads, flowing route and pulsing pins)
   layered behind the hero text. */
.map-hero{position:relative;overflow:hidden}
.map-hero .wrap{position:relative;z-index:2}
.map-anim{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.95}
.map-route{fill:none;stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 14;animation:routeFlow 1.6s linear infinite}
.map-pin .dot{fill:var(--red);stroke:#fff;stroke-width:2}
.map-pin.small .dot{fill:#7fd6f5}
.map-pin .ring{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2;transform-origin:50% 50%;transform-box:fill-box;animation:pinPulse 2.6s ease-out infinite;animation-delay:var(--d)}
@keyframes routeFlow{to{stroke-dashoffset:-48}}
@keyframes pinPulse{0%{transform:scale(.4);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}

/* ---- CONTACT PAGE HERO: communication-themed animation ----
   Flowing connection line + floating contact glyphs with ripple rings. */
.contact-hero{position:relative;overflow:hidden}
.contact-hero .wrap{position:relative;z-index:2}
.contact-anim{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.contact-line{fill:none;stroke:rgba(255,255,255,.45);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 16;animation:routeFlow 1.8s linear infinite}
.contact-float{position:absolute;z-index:1;width:58px;height:58px;display:grid;place-items:center;font-size:28px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);border-radius:50%;backdrop-filter:blur(6px);animation:iconFloat 4.5s ease-in-out infinite;pointer-events:none}
.contact-float::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:pinPulse 2.8s ease-out infinite}
@media(max-width:840px){.contact-float{display:none}}

/* ---- SERVICE AREA: REGION CARDS &amp; CITY CHIPS ----
   .region : a block listing one service region and its cities
   .chips  : pill-shaped city name tags                            */
.region{background:#fff;border:1px solid #eaeef1;border-radius:18px;padding:28px;margin-bottom:22px}
.region h3{font-size:20px;margin-bottom:4px}.region .cnt{font-size:13px;color:var(--dark);font-weight:800;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--mist);border:1px solid #dfe6ea;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;transition:.25s}
.chips span:hover{background:var(--cyan);color:#fff;border-color:var(--cyan)}

/* ---- ZIP CODE CHECKER ----
   .zipbox : animated gradient box with the zip input and button
   .note   : small italic disclaimer text                            */
.zipbox{border-radius:24px;padding:44px 36px;color:#fff;box-shadow:0 24px 48px rgba(8,125,163,.3);margin-bottom:36px}
.zipbox input{padding:14px 16px;border-radius:10px;border:none;font:700 15px 'Segoe UI',sans-serif;width:100%;max-width:220px;outline:none}
.note{font-size:13.5px;color:#5b656d;font-style:italic;margin-top:20px}

/* ---- FORMS ----
   .field      : wraps a label + input/select/textarea
   .field.err  : highlights required fields that are empty (red border)
   .msg-e      : error message shown only inside a .field.err
   .two        : two-column row for laying out form fields side by side */
.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1.6px solid #d8dfe4;border-radius:10px;font:600 14.5px 'Segoe UI',sans-serif;outline:none;color:var(--ink);transition:all .25s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(15,165,214,.18)}
.field.err input{border-color:var(--red)}.field .msg-e{display:none;color:var(--red);font-size:12.5px;font-weight:700;margin-top:5px}.field.err .msg-e{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Animated phone number (soft pulse + glow to draw the eye). */
@keyframes telPulse{0%,100%{transform:scale(1);text-shadow:0 0 0 rgba(15,165,214,0)}50%{transform:scale(1.05);text-shadow:0 0 14px rgba(15,165,214,.6)}}
.tel-glow{display:inline-block;font-weight:800;color:var(--cyan);animation:telPulse 2.4s ease-in-out infinite}
.strip a{display:inline-block;animation:telPulse 2.4s ease-in-out infinite}

/* Hidden honeypot field (spam trap — humans never see it, bots fill it). */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ---- MODAL (Request Service popup) ----
   .overlay : dark full-screen background behind the modal
   .modal   : the white popup window
   .x       : the close (✕) button in the top-right corner           */
.overlay{position:fixed;inset:0;background:rgba(10,20,26,.62);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:20px;width:100%;max-width:540px;max-height:92vh;overflow-y:auto;padding:34px;position:relative;animation:pop .3s cubic-bezier(.2,.7,.3,1)}
.x{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:50%;background:var(--mist);border:none;cursor:pointer;font-weight:800}
.x:hover{background:var(--red);color:#fff}

/* ---- FLOATING BUTTONS (ANIMATED) ----
   .fab     : "Request Service" pill button, bottom-right.
              It has TWO animations: flowGrad (colors) + iconFloat (bob).
   .chatfab : circular chat icon button, bottom-left (iconPulse).      */
.fab{position:fixed;right:22px;bottom:22px;z-index:1500;background:linear-gradient(120deg,var(--cyan),var(--dark),var(--red),var(--cyan));background-size:300% 300%;animation:flowGrad 5s ease infinite, iconFloat 4.5s ease-in-out infinite;color:#fff;border:none;border-radius:999px;padding:16px 26px;font:800 15px 'Segoe UI',sans-serif;cursor:pointer;box-shadow:0 10px 26px rgba(15,165,214,.45)}
.chatfab{position:fixed;left:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:var(--cyan);border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 26px rgba(15,165,214,.45);z-index:1500;animation:iconPulse 2.2s ease-in-out infinite}
.chatfab:hover{background:var(--dark)}.chatfab svg{width:26px;height:26px;fill:#fff}

/* ---- CHAT WINDOW ----
   The automated chat assistant panel that opens from the chat button. */
.chat{position:fixed;left:22px;bottom:92px;width:370px;max-width:calc(100vw - 44px);height:500px;background:#fff;border-radius:18px;box-shadow:0 26px 60px rgba(17,17,17,.3);z-index:1600;display:none;flex-direction:column;animation:pop .28s cubic-bezier(.2,.7,.3,1)}
.chat.open{display:flex}
.chat-head{background:linear-gradient(120deg,var(--dark),var(--cyan));color:#fff;padding:15px 18px;display:flex;justify-content:space-between;align-items:center}
.chat-head button{background:rgba(255,255,255,.18);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-weight:800}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;background:var(--mist)}

/* Chat message bubbles. .bot = assistant, .usr = user, .hot = urgent. */
.msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:13.5px;font-weight:600;animation:pop .25s ease}
.msg.bot{background:#fff;border:1px solid #e7edf0;align-self:flex-start}
.msg.usr{background:var(--cyan);color:#fff;align-self:flex-end}
.msg.hot{background:#fdf1f1;border:1.5px solid #f3b9b8;color:var(--red);align-self:flex-start}

/* Quick-reply suggestion buttons and the text input row. */
.chiprow{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px;background:var(--mist);border-top:1px solid #e7edf0}
.chiprow button{background:#fff;border:1.5px solid var(--cyan);color:var(--dark);border-radius:999px;padding:7px 13px;font:700 12.5px 'Segoe UI',sans-serif;cursor:pointer}
.chiprow button:hover{background:var(--cyan);color:#fff}
.chat-in{display:flex;border-top:1px solid #e7edf0}
.chat-in input{flex:1;border:none;padding:14px;font:600 14px 'Segoe UI',sans-serif;outline:none}
.chat-in button{background:var(--cyan);border:none;color:#fff;padding:0 20px;cursor:pointer;font-weight:800}

/* ---- TOAST NOTIFICATION ----
   Small popup that slides up from the bottom to confirm form submits. */
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,180%);background:#fff;border-left:5px solid var(--cyan);border-radius:12px;box-shadow:0 16px 40px rgba(17,17,17,.25);padding:15px 22px;z-index:2200;font-weight:700;font-size:14px;transition:transform .45s}
#toast.show{transform:translate(-50%,0)}

/* ---- SCROLL PROGRESS BAR &amp; BACK-TO-TOP (ANIMATED) ----
   #prog : thin gradient bar at the top showing scroll progress
   .totop: circular "back to top" button that floats (iconFloat) and
           appears after scrolling (handled by the .show class + JS)   */
#prog{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--cyan),var(--red));z-index:2100}
.totop{position:fixed;right:24px;bottom:92px;z-index:1490;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--dark);border:2px solid var(--cyan);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.totop.show{opacity:1;pointer-events:auto;animation:iconFloat 2.5s ease-in-out infinite}
.totop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---- SUCCESS CHECKMARK (ANIMATED) ----
   The green circular check shown after a form is submitted has class
   "success-check" and pulses continuously via iconPulse.              */
.success-check{width:76px;height:76px;border-radius:50%;background:rgba(40,167,69,.13);display:grid;place-items:center;margin:0 auto 16px;animation:iconPulse 1.8s ease-in-out infinite}

/* ---- PAGE TRANSITIONS ----
   .page   : each <main> section is hidden by default
   .page.on: the active page fades + slides up (smooth page switch)  */
.page{display:none}.page.on{display:block;animation:pageIn .55s cubic-bezier(.22,.9,.32,1.05)}
@keyframes pageIn{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* Hero content: staggered entrance whenever a page is shown */
.page.on .pagehero .crumb,.page.on .pagehero h1,.page.on .pagehero p{opacity:0;animation:heroUp .7s cubic-bezier(.22,.9,.32,1.08) forwards}
.page.on .pagehero .crumb{animation-delay:.05s}
.page.on .pagehero h1{animation-delay:.15s}
.page.on .pagehero p{animation-delay:.28s}
@keyframes heroUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.86) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ---- FOOTER ----
   Dark footer with four columns and a bottom copyright bar. */
footer{background:var(--ink);color:#aab6bf;padding:60px 0 0}
footer h4{color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
footer h4 em{color:var(--cyan);font-style:normal}
footer a{color:#aab6bf;font-weight:600;font-size:14px}footer a:hover{color:var(--cyan)}
footer ul{list-style:none}footer li{margin-bottom:8px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.fbottom{border-top:1px solid #2a2a2a;margin-top:44px;padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;font-size:13px}
.femg{background:var(--red);color:#fff;border-radius:12px;padding:15px 18px;font-weight:800;font-size:14px;margin-top:18px}
.femg a{color:#fff;text-decoration:underline}

/* ---- TOP EMERGENCY STRIP ----
   The thin animated bar above the header with the phone number. */
.strip{background:linear-gradient(120deg,var(--cyan),var(--dark),var(--red),var(--cyan));background-size:300% 300%;animation:flowGrad 6s ease infinite;color:#fff;font-size:13px;font-weight:800;text-align:center;padding:8px 12px}
.strip a{color:#fff;text-decoration:underline}

/* ---- RESPONSIVE LAYOUT (tablets &amp; phones) ----
   1020px: collapse hero to one column, grids to fewer columns
   840px : slide-out mobile nav menu, stacks cards/forms into one column */
@media(max-width:1020px){.hero-grid{grid-template-columns:1fr}.c4{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:repeat(2,1fr)}.fgrid{grid-template-columns:1fr 1fr}.band{grid-template-columns:1fr 1fr}.hero-grid{display:block}.hero-card{margin-top:32px}}
@media(max-width:840px){.navlinks{position:fixed;top:0;right:-320px;width:min(320px,88vw);height:100vh;height:100dvh;overflow-y:auto;background:#fff;flex-direction:column;align-items:stretch;gap:2px;padding:16px 18px 40px;box-shadow:-14px 0 40px rgba(17,17,17,.18);transition:right .35s ease;z-index:999}.navlinks.open{right:0}.navlinks>li>a{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 14px}.navlinks .nav-close{display:flex;justify-content:flex-end;margin-bottom:6px}.burger{display:block}.c2,.c3{grid-template-columns:1fr}.two{grid-template-columns:1fr}}
/* Pro Tip section: stack image above text on mobile. */
@media(max-width:840px){.tip-card{grid-template-columns:1fr;padding:30px 24px;gap:28px}.tip-media{max-width:100%}.tip-media img{min-height:240px}.tip-badge{left:24px}.tip-float{top:-8px;right:-4px}}

/* ---- HEADER / GLOBAL RESPONSIVENESS ----
   Hide phone on mid screens, tighten nav, hide header CTA when cramped,
   and reduce section padding on small screens. */
@media(max-width:1120px){.headphone{display:none}.navlinks{gap:7px}.navlinks a{padding:8px 11px;font-size:13.5px}}
@media(max-width:1000px){.nav-cta{display:none}}
@media(max-width:640px){.brand small{display:none}}
@media(max-width:480px){section{padding:56px 0}.pagehero{padding:56px 0}.hero{padding:56px 0}.brand-logo{height:46px;width:66px}.wrap{padding:0 16px}.hero-grid,.res-hero-grid{gap:28px}}
@media(max-width:900px) and (orientation:landscape){section{padding:44px 0}.hero,.pagehero{padding:40px 0}.tip{padding:52px 0}.feat{padding:52px 0}.hero h1{font-size:clamp(26px,4vw,38px)}}

/* ---- NEW SEO/CONVERSION COMPONENTS (FAQ, pricing, plans, badges) ---- */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid #eaeef1;border-radius:14px;padding:18px 24px;margin-bottom:14px;box-shadow:0 8px 22px rgba(17,17,17,.04)}
.faq summary{cursor:pointer;font-weight:800;font-size:16px;color:var(--ink);list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--cyan);transition:transform .3s}
.faq details[open] summary::after{content:'–';transform:translateY(-50%) rotate(180deg)}
.faq details p{margin-top:12px;color:#444;font-size:15px;line-height:1.65}
.cost-table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(17,17,17,.06);margin-top:8px}
.cost-table th,.cost-table td{padding:14px 20px;text-align:left;font-size:15px;border-bottom:1px solid #eef1f3}
.cost-table th{background:var(--dark);color:#fff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.cost-table tr:last-child td{border-bottom:none}
.cost-table tr:nth-child(even) td{background:#fafcfd}
.plan-list{list-style:none;margin:16px 0 4px}
.plan-list li{padding:8px 0;border-bottom:1px dashed #e6ecf0;font-size:14.5px;color:#333}
.plan-list li::before{content:'✓';color:var(--cyan);font-weight:800;margin-right:9px}
.chips a{background:var(--mist);border:1px solid #dfe6ea;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink);transition:.25s;display:inline-block}
.chips a:hover{background:var(--cyan);color:#fff;border-color:var(--cyan)}

/* ---- MODERN FEATURE SECTION (dropdown pages) ----
   Replaces the plain two-column SEO blocks with animated, layered
   cards: a white content card, a dark checklist panel, a brand band
   and a dashed call-to-action strip. Everything reveals on scroll. */
.feat{position:relative;padding:84px 0;background:linear-gradient(180deg,#f8fcfd 0%,#eef6fa 100%);overflow:hidden}
.feat::before,.feat::after{content:'';position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none}
.feat::before{width:440px;height:440px;background:radial-gradient(circle,rgba(15,165,214,.16),transparent 70%);top:-130px;right:-70px;animation:iconFloat 8s ease-in-out infinite}
.feat::after{width:360px;height:360px;background:radial-gradient(circle,rgba(226,38,33,.13),transparent 70%);bottom:-120px;left:-60px;animation:iconFloat 11s ease-in-out infinite reverse}
.feat .wrap{position:relative;z-index:2}
.feat-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch}
.feat-card,.feat-box{position:relative;background:#fff;border:1px solid #e7eef3;border-radius:26px;padding:34px;box-shadow:0 24px 55px rgba(8,42,64,.08);overflow:hidden}
.feat-card::before,.feat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--cyan),var(--dark),var(--red),var(--cyan));background-size:300% 100%;animation:flowGrad 6s ease infinite}
.feat-card{transition:transform .3s ease,box-shadow .3s ease}
.feat-card:hover{transform:translateY(-6px);box-shadow:0 34px 70px rgba(8,42,64,.14)}
.feat-card p{font-size:16px;line-height:1.75;color:#41505a}
.feat-card p+p{margin-top:14px}
.feat-card p a{color:var(--cyan);font-weight:700}
.feat-card h3{font-size:18px;color:var(--dark);margin:22px 0 12px}
.feat-box{background:linear-gradient(160deg,#0a3f58 0%,#062033 100%);border-color:rgba(255,255,255,.1);color:#fff}
.feat-box::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(15,165,214,.3),transparent 70%);top:-60px;right:-50px;pointer-events:none}
.feat-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:24px;margin-bottom:14px;animation:iconFloat 5s ease-in-out infinite}
.feat-box h3{color:#fff;font-size:18px;margin-bottom:12px}
.feat-list{list-style:none;margin:0}
.feat-list li{position:relative;padding:10px 0 10px 34px;border-bottom:1px dashed rgba(0,0,0,.08);font-size:15px;line-height:1.5;color:#41505a}
.feat-list li:last-child{border-bottom:none}
.feat-list li::before{content:'✓';position:absolute;left:0;top:9px;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:linear-gradient(120deg,var(--cyan),var(--dark));color:#fff;font-size:12px;font-weight:800}
.feat-box .feat-list li{color:#d8ecf5;border-bottom-color:rgba(255,255,255,.12)}
.feat-box .feat-list li::before{background:rgba(255,255,255,.16);color:#7dd8f5}
.feat-brands{margin-top:26px;background:#fff;border:1px solid #e7eef3;border-radius:22px;padding:24px 28px;box-shadow:0 18px 40px rgba(8,42,64,.06)}
.feat-brands h3{color:var(--dark);font-size:16px;margin-bottom:14px}
.feat-chips{display:flex;flex-wrap:wrap;gap:10px}
.feat-chips a{background:var(--mist);border:1px solid #dbe6ec;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;text-decoration:none;color:var(--ink);transition:.25s}
.feat-chips a:hover{background:linear-gradient(120deg,var(--cyan),var(--dark));color:#fff;border-color:transparent;transform:translateY(-3px)}
.feat-cta{margin-top:24px;text-align:center;font-size:15px;line-height:1.7;color:#41505a;background:rgba(255,255,255,.7);border:1px dashed #cfe0ea;border-radius:16px;padding:18px 24px}
.feat-cta a{font-weight:800}
.feat-card.rv,.feat-box.rv,.feat-brands.rv,.feat-cta.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.feat-card.rv.in,.feat-box.rv.in,.feat-brands.rv.in,.feat-cta.rv.in{opacity:1;transform:translateY(0)}
.feat-box.rv{transition-delay:var(--d,0s)}
.feat-brands.rv{transition-delay:var(--d,0s)}
.feat-cta.rv{transition-delay:var(--d,0s)}
@media(max-width:840px){.feat-grid{grid-template-columns:1fr}.feat-card,.feat-box{padding:26px}}
.safety{background:linear-gradient(120deg,#E22621,#b91c1c);color:#fff;border-radius:18px;padding:26px 28px;margin-bottom:26px}
.safety b{font-size:16px}
.map-wrap{border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(15,60,80,.12);border:1px solid #e2ecf1;background:#eef4f7}
.map-wrap iframe{display:block;width:100%;height:450px;border:0}
.map-note{text-align:center;margin-top:14px;font-size:14px;color:#555}
.map-note a{color:var(--cyan);font-weight:800}
@media(max-width:640px){.map-wrap iframe{height:320px}}

/* =====================================================================
   COOL EFFECTS: count-up stats, 3D tilt + spotlight, hero orbs, shimmer
   ===================================================================== */

/* Animated stat counters (the numbers are counted up by JavaScript). */
.band b,.mini-stat b{font-variant-numeric:tabular-nums}

/* 3D tilt on hover + a cursor-following spotlight for .card elements. */
.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%}
.card::before{z-index:2}
.card::after{content:'';position:absolute;inset:0;background:radial-gradient(460px circle at var(--mx) var(--my),rgba(15,165,214,.12),transparent 45%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:0}
.card>*{position:relative;z-index:1}
.card.tilt{transition:transform .18s ease,box-shadow .3s ease}
.card.tilt:hover{transform:translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 22px 48px rgba(17,17,17,.16)}
.card.tilt:hover::after{opacity:1}

/* Floating gradient orbs drifting behind the home hero. */
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none}
.hero::before{width:340px;height:340px;background:radial-gradient(circle,rgba(15,165,214,.55),transparent 70%);top:-90px;left:-70px;animation:orbFloat 13s ease-in-out infinite}
.hero::after{width:300px;height:300px;background:radial-gradient(circle,rgba(226,38,33,.5),transparent 70%);bottom:-80px;right:-50px;animation:orbFloat 16s ease-in-out infinite reverse}
.hero .wrap{position:relative;z-index:2}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-22px) scale(1.07)}66%{transform:translate(-22px,20px) scale(.94)}}

/* Shimmering headline text on the home hero. */
.hero h1{background:linear-gradient(90deg,#fff 0%,#9fe3ff 45%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:textShimmer 6s linear infinite}
.hero h1 em{background:linear-gradient(90deg,#ffd6d4,#ff8f8a,#ffd6d4);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes textShimmer{0%{background-position:200% 0}100%{background-position:-120% 0}}

/* Clickable zip-table rows (each routes to the request form). */
#zipTable tr.clickable{cursor:pointer}
#zipTable tr.clickable:hover td{background:#e6f3fa}

/* Word-by-word reveal for the Our Story text. */
.story-text .w{display:inline-block;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s ease,transform .5s ease}
.story-text.in .w{opacity:1;transform:translateY(0) scale(1)}

/* 3D tilt for the brand chips (hover). */
.brand-chip{--rx:0deg;--ry:0deg}
.brand-chip.tilt{transition:transform .18s ease,box-shadow .3s ease,border-color .3s ease}
.brand-chip.tilt:hover{transform:translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry))}

/* Brands image: reveal on scroll + hover zoom + shine sweep. */
.brands-photo{display:block;max-width:900px;margin:40px auto 0;overflow:hidden;border-radius:16px;position:relative;background:#fff;box-shadow:0 20px 44px rgba(17,17,17,.12)}
.brands-photo img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.brands-photo:hover img{transform:scale(1.04)}
.brands-photo::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.brands-photo:hover::after{animation:brandShine 1s ease}
.brands-photo.rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.brands-photo.rv.in{opacity:1;transform:translateY(0)}
@keyframes brandShine{0%{left:-80%}100%{left:130%}}

/* =====================================================================
   MOBILE / SMALL-SCREEN REFINEMENTS
   Keeps the layout sitting cleanly on every screen size and lets
   pinch-zoom work correctly (the viewport meta was updated for this).
   ===================================================================== */

/* Data tables: trim padding so 2-column tables fit narrow phones. */
@media(max-width:640px){
  .cost-table th,.cost-table td{padding:12px 14px;font-size:14px}
}

/* Floating buttons: tighten on small screens so they never cover content. */
@media(max-width:640px){
  .fab{right:14px;bottom:14px;padding:13px 18px;font-size:14px}
  .chatfab{left:14px;bottom:14px;width:54px;height:54px}
  .totop{right:16px;bottom:76px;width:42px;height:42px}
  .chat{left:12px;bottom:76px;width:calc(100vw - 24px);height:min(480px,70vh)}
}

/* Very small phones: shrink the header lockup so it never wraps/overflows. */
@media(max-width:380px){
  .brand-logo{height:40px;width:58px}
  .brand-name{font-size:17px}
  .brand{gap:9px}
}

/* Safety net: never let long words/links force horizontal scroll. */
body{overflow-wrap:break-word}