/* ============================================================
   CARLSBAD HVAC PROS — 2026 Master Radiant Design System
   Brand: Icy Sky Blue #0284C7 · Deep Navy #0B192C · White #FFFFFF
   Type: Montserrat (Display & Body) — Clean, Modern, Luminous Magazine Feel
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root{
  /* Brand */
  --blue:        #0284c7;   /* luminous primary sky blue */
  --blue-bright: #38bdf8;   /* radiant icy sky highlight */
  --blue-deep:   #0369a1;   /* deep ocean blue hover */
  --navy:        #0b192c;   /* rich deep navy headings */
  --navy-2:      #0f2438;   /* crisp dark accent */
  --red:         #ea580c;   /* warm emergency CTA */
  --red-deep:    #c2410c;   /* warm hover */

  /* High-Contrast Clear Neutrals */
  --ink:    #0f172a;        /* crisp, dark, 100% easily readable text */
  --muted:  #1e293b;        /* clear secondary text — NEVER faint or dim */
  --faint:  #475569;        /* crisp subtitle text */
  --line:   #e2e8f0;        /* crisp clean slate hairline borders */
  --line-2: #cbd5e1;
  --paper:  #ffffff;        /* pure brilliant white canvas */
  --paper-2:#ffffff;        /* 100% bright white */
  --white:  #ffffff;

  /* Effects */
  --radius:   14px;
  --radius-lg:22px;
  --radius-sm:9px;
  --shadow-sm: 0 1px 3px rgba(2,132,199,.06), 0 2px 6px rgba(15,23,42,.04);
  --shadow:    0 4px 14px rgba(2,132,199,.08), 0 10px 30px rgba(15,23,42,.06);
  --shadow-lg: 0 12px 40px rgba(2,132,199,.14), 0 30px 70px rgba(15,23,42,.08);
  --shadow-blue: 0 10px 30px rgba(2,132,199,.22);
  --shadow-red:  0 8px 24px rgba(234,88,12,.22);

  /* Layout */
  --maxw: 1200px;
  --maxw-wide: 1340px;
  --gutter: clamp(18px, 4vw, 48px);
  --nav-h: 68px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --ff-display: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background: #ffffff; }
body{
  margin:0; font-family:var(--ff-body); color:#000000;
  background:#ffffff; line-height:1.95; font-size:19px; font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4,h5{ font-family:var(--ff-display); font-weight:800; line-height:1.25;
  letter-spacing:-.015em; margin:0; color:#000000; text-wrap:balance; }
p{ margin:0 0 1.35em; text-wrap:pretty; color:#000000; font-weight:500; font-size:1.18rem; line-height:1.95; }

.h-display{ font-size:clamp(2.2rem, 5vw, 4rem); line-height:.98; }
.h1{ font-size:clamp(1.8rem, 3.6vw, 2.8rem); }
.h2{ font-size:clamp(1.35rem, 2.4vw, 2rem); }
.h3{ font-size:clamp(1.15rem, 1.8vw, 1.45rem); }
.lead{ font-size:clamp(0.98rem,1.3vw,1.15rem); color:var(--muted); line-height:1.45; font-weight:500; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:var(--maxw-wide); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block: 4px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.section-sm{ padding-block: 2px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.bg-paper{ background:var(--paper); }
.bg-navy{ background:var(--navy); color:#DCE6F0; }
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{ color:#fff; }
.center{ text-align:center; }
.grid{ display:grid; gap:28px; }
.stack-sm{ display:flex; flex-direction:column; gap:10px; }

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-body); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--red); border-radius:2px; }
.kicker.on-dark{ color:var(--blue-bright); }
.kicker.center-line{ }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-display); font-weight:700; font-size:1rem;
  padding:15px 26px; border-radius:var(--radius-sm); border:2px solid transparent;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:18px; height:18px; }
.btn-red{ background:var(--red); color:#fff; box-shadow:var(--shadow-red); }
.btn-red:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn-blue{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn-blue:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--navy); transform:translateY(-2px); }
.btn-ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.32); }
.btn-ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-white{ background:#fff; color:var(--navy); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-lg{ padding:18px 32px; font-size:1.08rem; }
.btn-block{ width:100%; }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.card-hover:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }

/* ---------- Placeholder image slots ---------- */
.ph{
  position:relative; overflow:hidden; background:
    repeating-linear-gradient(135deg, #e7eef5 0 14px, #eef3f8 14px 28px);
  border:1px dashed var(--line-2); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; color:#7d8a98;
  min-height:200px;
}
.ph::after{
  content:attr(data-label);
  font-family:'Sora',monospace; font-size:.74rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#6b7886; text-align:center; padding:10px 14px;
  background:rgba(255,255,255,.78); border-radius:6px; max-width:84%;
  border:1px solid rgba(0,0,0,.04);
}
.ph.gen{ background:
    repeating-linear-gradient(135deg, #fde8ea 0 14px, #fef1f2 14px 28px);
  border-color:#f3b9bf; }
.ph.gen::after{ color:var(--red-deep); background:rgba(255,255,255,.85); }
.ph.round{ border-radius:50%; }
.ph.cover{ position:absolute; inset:0; min-height:0; border-radius:inherit; }

/* ---------- Trust badges / chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.86rem;
  padding:8px 14px; border-radius:100px; background:var(--paper); color:var(--navy);
  border:1px solid var(--line); }
.chip svg{ width:16px; height:16px; color:var(--blue); }

.stars{ display:inline-flex; gap:3px; color:#FFB400; }
.stars svg{ width:18px; height:18px; }

.cert-band{ padding-top:4px !important; padding-bottom:4px !important; padding-block:4px !important; background:transparent !important; border-top:none !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.cert-head{ max-width:680px; margin:0 auto 10px !important; text-align:center; }
.cert-head .kicker{ justify-content:center; }
.cert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:1080px; margin:0 auto; }
.cert{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.cert:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-2); }
.cert-emblem{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  color:#fff; background:linear-gradient(140deg,var(--blue),var(--blue-bright)); box-shadow:var(--shadow-blue); }
.cert-emblem svg{ width:20px; height:20px; }
.cert-emblem.navy{ background:linear-gradient(140deg,var(--navy),var(--navy-2)); box-shadow:0 8px 18px rgba(11,33,56,.26); }
.cert-emblem.gold{ background:linear-gradient(140deg,#caa14a,#f0cf7a); color:#43320b; box-shadow:0 8px 18px rgba(202,161,74,.34); }
.cert-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cert-org{ font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.cert-title{ font-family:var(--ff-display); font-weight:800; font-size:.96rem; color:var(--navy); line-height:1.15; letter-spacing:-.01em; }
.cert-sub{ font-size:.78rem; color:var(--muted); font-weight:500; }

/* featured — Mitsubishi Diamond Contractor */
.cert-feature{ grid-column:span 3; gap:16px; padding:14px 18px;
  background:linear-gradient(120deg,#fff 40%,#fef2f3); border-color:#f4c6cb; }
.cert-diamond{ width:46px; height:46px; flex:none; transform:rotate(45deg); border-radius:12px;
  background:linear-gradient(140deg,var(--red),#ff5a6e); box-shadow:0 8px 20px rgba(225,20,35,.35);
  display:grid; place-items:center; }
.cert-diamond svg{ width:22px; height:22px; transform:rotate(-45deg); color:#fff; }
.cert-feature .cert-org{ color:var(--red-deep); }
.cert-feature .cert-title{ font-size:1.15rem; }
.cert-tier{ margin-left:auto; align-self:center; font-family:var(--ff-display); font-weight:800;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red-deep);
  background:rgba(225,20,35,.1); border:1px solid rgba(225,20,35,.24); padding:4px 12px; border-radius:100px; }

@media (max-width:900px){
  .cert-grid{ grid-template-columns:repeat(2,1fr); }
  .cert-feature{ grid-column:span 2; }
}
@media (max-width:560px){
  .cert-grid{ grid-template-columns:1fr; }
  .cert-feature{ grid-column:span 1; flex-wrap:wrap; }
  .cert-tier{ margin-left:0; }
}

/* dark (bold theme) variant */
body.theme-bold .cert-band{ background:transparent; border-top:none; }
body.theme-bold .cert-head h2{ color:#fff; }
body.theme-bold .cert-head .lead{ color:#9fb2c5; }
body.theme-bold .cert{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.09); box-shadow:none; }
body.theme-bold .cert:hover{ border-color:rgba(0,174,239,.4); box-shadow:0 20px 50px rgba(0,0,0,.4); }
body.theme-bold .cert-title{ color:#fff; }
body.theme-bold .cert-sub{ color:#9fb2c5; }
body.theme-bold .cert-feature{ background:linear-gradient(120deg,rgba(225,20,35,.16),rgba(8,20,34,.5)); border-color:rgba(225,20,35,.34); }
body.theme-bold .cert-feature .cert-org{ color:#ff8a96; }
body.theme-bold .cert-tier{ color:#ff8a96; background:rgba(225,20,35,.16); border-color:rgba(225,20,35,.4); }

/* ---------- Header / Nav ---------- */
.topbar{ background:var(--navy); color:#cdd9e6; font-size:.86rem; }
.topbar .wrap-wide{ display:flex; align-items:center; justify-content:space-between;
  min-height:42px; gap:18px; }
.topbar a{ color:#cdd9e6; font-weight:600; }
.topbar a:hover{ color:#fff; }
.topbar-left{ display:flex; align-items:center; gap:8px; font-weight:600; }
.topbar-left svg{ width:15px; height:15px; color:var(--blue-bright); flex:none; }
.topbar-right{ display:flex; align-items:center; gap:20px; }
.topbar .tphone{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-display); font-weight:700; color:#fff; }
.topbar .tphone svg{ width:15px; height:15px; color:var(--blue-bright); }

.nav{ position:sticky; top:0; z-index:1000 !important; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line);
  transition:box-shadow .25s; }
.nav.scrolled{ box-shadow:var(--shadow); }
.nav-inner{ display:flex; align-items:center; gap:22px; min-height:var(--nav-h);
  max-width:var(--maxw-wide); margin:0 auto; padding-inline:var(--gutter); }
.brand img{ height:50px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-links > a, .nav-item > button{
  font-family:var(--ff-display); font-weight:600; font-size:.98rem; color:var(--navy);
  padding:10px 14px; border-radius:8px; background:none; border:none;
  display:inline-flex; align-items:center; gap:6px; transition:color .15s, background .15s;
}
.nav-links > a:hover, .nav-item > button:hover{ color:var(--blue); background:var(--paper); }
.nav-item{ position:relative; }
.nav-item > button svg{ width:13px; height:13px; transition:transform .2s; }
.nav-item:hover > button svg{ transform:rotate(180deg); }
.nav-spacer{ flex:1; }
.nav-cta{ display:flex; align-items:center; gap:12px; }

/* ---------- COMPACT & ELEGANT SERVICES DROPDOWN ---------- */
.mega{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(8px);
  width:580px; max-width:92vw; background:#ffffff;
  border:1px solid rgba(11,33,56,.12);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(11,33,56,.20), 0 4px 16px rgba(0,0,0,.06);
  opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease), visibility 0s linear .2s, transform .2s var(--ease);
  z-index:90; overflow:hidden;
}
.mega::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav-item:hover .mega,
.nav-item.open .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;
  transition:opacity .2s, visibility 0s, transform .2s var(--ease); }
.nav-item.open > button svg{ transform:rotate(180deg); }

/* Mega Layout */
.mega-body{
  padding:14px;
  background:#ffffff;
}
.mega-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}

/* Service Tile Card */
.mega-card{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  background:#f8fafc; border:1px solid #edf2f7;
  transition:all .18s var(--ease); text-decoration:none;
}
.mega-card:hover{
  background:#ffffff;
  border-color:var(--blue-bright);
  box-shadow:0 6px 18px rgba(0,152,219,.12);
  transform:translateY(-1px);
}
.mega-card-icon{
  width:36px; height:36px; border-radius:10px; flex:none;
  display:grid; place-items:center; transition:transform .18s;
}
.mega-card:hover .mega-card-icon{ transform:scale(1.08); }
.mega-card-icon svg{ width:18px; height:18px; }

/* Distinct Icon Palette */
.icon-cool{ background:linear-gradient(135deg,#e0f4ff,#c8ecff); color:#0088cc; border:1px solid #b3e3ff; }
.icon-warm{ background:linear-gradient(135deg,#ffe8eb,#ffd2d7); color:#d91221; border:1px solid #ffbcc4; }
.icon-electric{ background:linear-gradient(135deg,#e6fbf3,#cbf7e4); color:#0a9b64; border:1px solid #aef0d2; }
.icon-install{ background:linear-gradient(135deg,#eef2ff,#dbe4fe); color:#4338ca; border:1px solid #c7d7fe; }
.icon-motor{ background:linear-gradient(135deg,#fffbeb,#fef3c7); color:#d97706; border:1px solid #fde68a; }
.icon-air{ background:linear-gradient(135deg,#ecfeff,#cffafe); color:#0891b2; border:1px solid #a5f3fc; }

.mega-card-info{ flex:1; min-width:0; }
.mega-card-info h4{ font-size:.88rem; font-weight:700; color:var(--navy); margin:0; line-height:1.25; }
.mega-card:hover .mega-card-info h4{ color:var(--blue-deep); }
.mega-card-sub{ font-size:.74rem; color:#64748b; margin:2px 0 0; display:block; line-height:1.2; font-weight:500; }

/* Mega Bottom Strip */
.mega-footer{
  background:#f8fafc; border-top:1px solid #eef2f6; padding:10px 18px;
  text-align:right;
}
.mega-view-all{
  font-size:.82rem; font-weight:700; color:var(--navy); display:inline-flex; align-items:center;
  gap:4px; text-decoration:none; transition:color .15s;
}
.mega-view-all:hover{ color:var(--blue); }

/* Mobile nav */
.nav-toggle{
  display:none;
  background:none !important;
  border:none !important;
  padding:6px !important;
  color:#fff !important;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  outline:none;
}
.nav-toggle svg{ width:28px; height:28px; stroke:#fff; }
.nav-toggle:hover, .nav-toggle:active{
  opacity:0.85;
}
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:99999 !important;
  background:#0B2138;
  color:#fff;
  transform:translateX(100%);
  transition:transform .32s var(--ease);
  display:flex;
  flex-direction:column;
  padding:22px var(--gutter) 40px;
  overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.mobile-nav-top img{ height:46px; }
.mobile-nav .close{ background:none; border:none; color:#fff; padding:8px; cursor:pointer; }
.mobile-nav .close svg{ width:30px; height:30px; stroke:#fff; }
.mobile-nav a{ display:block; font-family:var(--ff-display); font-weight:700; font-size:1.3rem;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); color:#fff; }
.mobile-nav .sub{ padding-left:8px; margin-bottom:8px; }
.mobile-nav .sub a{ font-size:1rem; font-weight:600; color:#b9c8d8; padding:8px 0 8px 12px; border:none; }
.mobile-nav-cta{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }

/* Mobile Tabs Bar (Hidden on desktop by default) */
.mobile-tabs-bar {
  display: none;
}

/* ---------- Footer ---------- */
.footer{ background:#071527; color:#94a3b8; padding-top:44px; border-top:1px solid rgba(56, 189, 248, 0.25); }
.footer h4{ color:#fff; font-size:1.02rem; margin-bottom:18px; letter-spacing:.01em; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:54px; }
.footer-brand img{ height:64px; margin-bottom:18px; }
.footer a{ color:#a9bacb; transition:color .15s; }
.footer a:hover{ color:#fff; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; font-weight:600; }
.footer-contact{ display:flex; flex-direction:column; gap:14px; }
.footer-contact .row{ display:flex; gap:11px; align-items:flex-start; }
.footer-contact svg{ width:18px; height:18px; color:var(--blue-bright); flex:none; margin-top:2px; }
.footer-phone{ font-family:var(--ff-display); font-weight:800; font-size:1.5rem; color:#fff !important; }
.socials{ display:flex; gap:10px; margin-top:6px; }
.socials a{ width:40px; height:40px; border-radius:9px; background:rgba(255,255,255,.07);
  display:grid; place-items:center; transition:background .18s, transform .18s; }
.socials a:hover{ background:var(--blue); transform:translateY(-2px); }
.socials svg{ width:18px; height:18px; color:#fff; }
.service-areas{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0 4px; }
.service-areas h4{ font-family:var(--ff-display); font-weight:800; font-size:.92rem; color:#fff;
  letter-spacing:.02em; text-transform:uppercase; opacity:.92; margin:0 0 8px; }
.city-head h4, .city-box h4{ color:#ffffff !important; }
.service-areas p{ font-size:.86rem; color:rgba(255,255,255,.7); line-height:1.7; margin:0; }
.service-areas span{ color:rgba(255,255,255,.88); white-space:nowrap; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; font-size:.86rem;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; }
.footer-bottom-links{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Quote form ---------- */
.qform{ display:flex; flex-direction:column; gap:14px; }
.qform .field{ display:flex; flex-direction:column; gap:6px; }
.qform label{ font-weight:700; font-size:.82rem; color:var(--navy); letter-spacing:.01em; }
.qform input, .qform select, .qform textarea{
  font-family:var(--ff-body); font-size:1rem; padding:13px 15px; border:1.5px solid var(--line-2);
  border-radius:10px; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; width:100%;
}
.qform input:focus, .qform select:focus, .qform textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,152,219,.13); }
.qform .two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-note{ font-size:.8rem; color:var(--faint); }
.form-success{ background:#E7F8EE; border:1px solid #A9E2C0; color:#1B7A45; padding:14px 16px;
  border-radius:10px; font-weight:600; display:none; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ---------- Breadcrumb ---------- */
.crumb{ display:flex; gap:9px; align-items:center; font-size:.86rem; color:var(--faint); font-weight:600; }
.crumb a:hover{ color:var(--blue); }
.crumb .sep{ color:var(--line-2); }

/* ---------- Misc ---------- */
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.eyebrow-num{ font-family:var(--ff-display); font-weight:800; color:var(--blue); font-size:.95rem; }

/* ============================================================
   INNER PAGE / SERVICE TEMPLATE
   ============================================================ */
.page-hero{ background:var(--navy); color:#fff; position:relative; overflow:hidden;
  padding-block: clamp(20px, 2.5vw, 32px); }
.page-hero::before{ content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle, rgba(0,174,239,.18), transparent 68%); }
.page-hero .crumb{ color:#9fb2c4; margin-bottom:12px; }
.page-hero .crumb a{ color:#cdd9e6; } .page-hero .crumb .sep{ color:#46586c; }
.page-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; position:relative; z-index:2; }
.page-hero h1{ color:#fff; }
.page-hero .lead{ color:#cfddea; margin-top:12px; }
.page-hero .hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.page-hero .hero-trust{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; }
.page-hero .hero-trust .t{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.88rem; color:#dce7f1; }
.page-hero .hero-trust .t svg{ width:16px; height:16px; color:var(--blue-bright); }
.page-hero-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3; }

.simple-hero{ padding-block: clamp(18px,2vw,28px); border-bottom: none; }
.simple-hero .crumb{ margin-bottom:12px; }

/* two-col content block */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.split.media-left{ direction:rtl; } .split.media-left > *{ direction:ltr; }
.split .media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; }
.prose p{ color:var(--muted); font-size:1.02rem; }
.prose h2{ margin-bottom:12px; }

/* checklist / signs grid */
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-top:6px; }
.checks .ci{ display:flex; gap:10px; align-items:flex-start; }
.checks .ci .ck{ width:24px; height:24px; border-radius:6px; background:#E7F8EE; color:#1B9D54; display:grid; place-items:center; flex:none; margin-top:1px; }
.checks .ci .ck svg{ width:14px; height:14px; }
.checks .ci b{ display:block; font-family:var(--ff-display); font-size:0.98rem; color:var(--navy); }
.checks .ci span{ color:var(--muted); font-size:.88rem; }

/* section heading block — compact suitable distance */
.section-head{ margin-bottom: clamp(12px, 1.8vw, 18px); }
.section-head.center{ max-width:760px; margin-inline:auto; }
.section-head .h2,.section-head .h1{ text-wrap:balance; }

/* map image filling a .media / .area-map slot */
.map-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================ SERVICE AREA TERRITORY (About page) */
.area2 {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: clamp(28px, 4vw, 50px) !important;
  align-items: center !important;
}

.citylist {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 18px !important;
}

.citylist .c {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #d8e5f2 !important;
  transition: all 0.2s ease !important;
}

.citylist .c:hover {
  background: rgba(0, 174, 239, 0.18) !important;
  border-color: #00AEEF !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}



/* photo filling an aspect-ratio media frame (hero / split) */
.img-fill{ display:block; width:100%; height:100%; object-fit:cover; }

/* split section reduced to a single centered text column (no second image) */
.split-solo{ max-width:780px; margin-inline:auto; }

/* About gallery + lightbox */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery-grid button{ all:unset; cursor:pointer; display:block; border-radius:14px; overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow); background:var(--paper); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s var(--ease); }
.gallery-grid button:hover img, .gallery-grid button:focus-visible img{ transform:scale(1.06); }
.gallery-grid button:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
@media(max-width:900px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } }
.lightbox{ position:fixed; inset:0; background:rgba(6,13,22,.93); display:none; align-items:center; justify-content:center; z-index:1000; padding:24px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.lightbox button{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer; width:48px; height:48px; border-radius:50%; font-size:1.6rem; line-height:1; display:grid; place-items:center; transition:background .2s; }
.lightbox button:hover{ background:rgba(255,255,255,.25); }
.lightbox .lb-close{ top:20px; right:20px; }
.lightbox .lb-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:20px; top:50%; transform:translateY(-50%); }
@media(max-width:560px){ .lightbox .lb-prev{ left:8px; } .lightbox .lb-next{ right:8px; } }

/* process steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; }
.step .n{ width:52px; height:52px; border-radius:14px; background:linear-gradient(140deg,var(--blue),var(--blue-bright));
  color:#fff; display:grid; place-items:center; font-family:var(--ff-display); font-weight:800; font-size:1.3rem;
  box-shadow:var(--shadow-blue); margin-bottom:18px; }
.step h3{ font-size:1.18rem; margin-bottom:8px; }
.step p{ color:var(--muted); font-size:.95rem; }

/* feature/benefit cards */
.benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.benefit{ padding:30px; } 
.benefit .ic{ width:52px; height:52px; border-radius:13px; background:linear-gradient(140deg,#e6f6fe,#d6effc); color:var(--blue); display:grid; place-items:center; margin-bottom:18px; }
.benefit .ic svg{ width:26px; height:26px; }
.benefit h3{ font-size:1.2rem; margin-bottom:8px; }
.benefit p{ color:var(--muted); font-size:.95rem; }

/* brands row */
.brands{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.brands .b{ font-family:var(--ff-display); font-weight:700; color:var(--navy); padding:14px 26px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:1.05rem; }

/* FAQ accordion */
.faq{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.faq-item.open{ box-shadow:var(--shadow); border-color:transparent; }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--ff-display); font-weight:700; font-size:1.08rem; color:var(--navy); }
.faq-q .pm{ width:30px; height:30px; border-radius:50%; background:var(--paper); display:grid; place-items:center; flex:none; transition:background .2s, transform .25s; }
.faq-q .pm svg{ width:16px; height:16px; color:var(--blue); transition:transform .25s; }
.faq-item.open .faq-q .pm{ background:var(--blue); transform:rotate(180deg); }
.faq-item.open .faq-q .pm svg{ color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a .inner{ padding:0 24px 22px; color:var(--muted); }

/* Dark Theme FAQ Accordion */
body.theme-bold .svc-faq-wrap {
  max-width: 860px;
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.theme-bold .svc-faq-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
body.theme-bold .svc-faq-item:hover {
  border-color: rgba(0, 174, 239, 0.35) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
}
body.theme-bold .svc-faq-item.active {
  border-color: rgba(0, 174, 239, 0.5) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 174, 239, 0.2) !important;
  background: linear-gradient(180deg, rgba(0, 152, 219, 0.1) 0%, rgba(8, 20, 34, 0.5) 100%) !important;
}
body.theme-bold .svc-faq-trigger {
  color: #ffffff !important;
  font-family: var(--ff-display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
}
body.theme-bold .svc-faq-trigger:hover {
  color: var(--blue-bright) !important;
}
body.theme-bold .svc-faq-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--blue-bright) !important;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
body.theme-bold .svc-faq-item.active .svc-faq-icon {
  transform: rotate(180deg);
  background: var(--blue-bright) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
body.theme-bold .svc-faq-content {
  padding: 0 20px 18px !important;
  color: #c5d8eb !important;
  font-size: 0.94rem;
  line-height: 1.65;
}
body.theme-bold .svc-faq-content p {
  margin: 0;
  color: #c5d8eb;
}
body.theme-bold .svc-faq-content strong {
  color: #ffffff;
}

/* split CTA at bottom of service */
.svc-cta{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.svc-cta .qcard{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:30px; border-top:5px solid var(--red); }



/* ============================================================
   AIM MECHANICAL — "Dial In Your Comfort" bold homepage
   Layered on top of styles.css. Scoped to body.theme-bold
   ============================================================ */

body.theme-bold{ background:#060d16; color:#cdd9e6; }

/* ---- Transparent nav over dark hero, solid on scroll ---- */
body.theme-bold .nav{ background:transparent; backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.08); transition:background .3s, backdrop-filter .3s, border-color .3s, box-shadow .3s; }
body.theme-bold .nav .nav-links > a, body.theme-bold .nav .nav-item > button{ color:#e7eef6; }
body.theme-bold .nav .nav-links > a:hover, body.theme-bold .nav .nav-item > button:hover{ color:#fff; background:rgba(255,255,255,.08); }
body.theme-bold .nav.scrolled{ background:rgba(8,18,30,.98) !important; backdrop-filter:saturate(140%) blur(16px); border-bottom-color:rgba(255,255,255,.12); box-shadow:0 10px 40px rgba(0,0,0,.5); }
body.theme-bold .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
body.theme-bold .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* glow utility text - eye friendly soft coastal blue */
.grad-text{ background:linear-gradient(120deg,#ffffff 30%, #7dd3fc 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================================================ HERO */
.bhero{ position:relative; min-height:auto; display:block; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 10%, #0f233a 0%, #0b1a2d 55%, #081321 100%); }
.bhero .grain{ position:absolute; inset:0; opacity:.3; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
/* toned down / hidden blobs to prevent eye strain */
.blob{ display:none !important; }
@keyframes drift1{ 50%{ transform:translate(6vw,4vw) scale(1.08);} }
@keyframes drift2{ 50%{ transform:translate(-5vw,-4vw) scale(1.1);} }
@keyframes drift3{ 50%{ transform:translate(-4vw,5vw) scale(1.12);} }
.cursor-glow{ position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(120,180,255,.16), transparent 60%); left:50%; top:40%; transition:opacity .4s; z-index:1; }

.bhero-inner{ position:relative; z-index:3; width:100%; display:grid; grid-template-columns:1.06fr .94fr; gap:20px; align-items:center;
  max-width:var(--maxw-wide); margin:0 auto; padding: 10px var(--gutter) 6px; }
.bhero-copy .tag{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:100px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-weight:700; font-size:.76rem;
  letter-spacing:.08em; text-transform:uppercase; color:#bfe6fb; backdrop-filter:blur(8px); }
.tag .dot{ width:7px; height:7px; border-radius:50%; background:#36e07f; box-shadow:0 0 0 0 rgba(54,224,127,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(54,224,127,0);} 100%{ box-shadow:0 0 0 0 rgba(54,224,127,0);} }
.bhero h1{ font-size:clamp(2rem, 3.8vw, 3.2rem); line-height:1.05; color:#fff; margin:8px 0 0; letter-spacing:-.02em; }
.bhero h1 em{ font-style:normal; display:block; }
.bhero .sub{ font-size:0.96rem; color:#aebfd0; max-width:32em; margin:8px 0 0; font-weight:500; line-height:1.45; }
.bhero-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.btn-glow{ background:linear-gradient(100deg,var(--blue),var(--blue-bright)); color:#fff; box-shadow:0 8px 24px rgba(0,174,239,.4); }
.btn-glow:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,174,239,.55); }
.bhero-meta{ display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }
.bhero-meta .m{ display:flex; flex-direction:column; }
.bhero-meta .m b{ font-family:var(--ff-display); font-weight:800; font-size:1.25rem; color:#fff; }
.bhero-meta .m span{ font-size:.78rem; color:#8ea3b8; font-weight:600; }
.bhero-meta .div{ width:1px; background:rgba(255,255,255,.12); }

/* ---- Thermostat dial ---- */
.dial-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.dial-stage{ position:relative; width:min(440px,86vw); aspect-ratio:1; }
.dial-stage .ring-glow{ position:absolute; inset:6%; border-radius:50%; filter:blur(34px);
  background:conic-gradient(from 220deg, #00aeef, #6f7bff 40%, #ff5a6e 70%, #00aeef);
  opacity:.55; animation:spin 14s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.dial-svg{ position:relative; width:100%; height:100%; touch-action:none; cursor:grab; filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
.dial-svg:active{ cursor:grabbing; }
.dial-face{ fill:#0a1622; stroke:rgba(255,255,255,.08); stroke-width:2; }
.dial-track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:14; stroke-linecap:round; }
.dial-prog{ fill:none; stroke:url(#dialgrad); stroke-width:14; stroke-linecap:round; }
.dial-tick{ stroke:rgba(255,255,255,.16); stroke-width:2; }
.dial-knob{ fill:#fff; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.dial-knob-ring{ fill:none; stroke:rgba(255,255,255,.9); stroke-width:3; }
.dial-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.dial-temp{ font-family:var(--ff-display); font-weight:800; font-size:clamp(3.4rem,9vw,5rem); color:#fff; line-height:1; letter-spacing:-.04em; }
.dial-temp sup{ font-size:.34em; vertical-align:super; color:#7fd6ff; }
.dial-label{ font-family:var(--ff-display); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.82rem; margin-top:8px; transition:color .3s; }
.dial-hint{ font-size:.84rem; color:#7e93a8; font-weight:600; display:flex; align-items:center; gap:8px; }
.dial-hint svg{ width:16px; height:16px; }

/* ============================================================ MARQUEE STRIP */
.mstrip{ background:#0f172a !important; border-top:1.5px solid #38bdf8 !important; border-bottom:1.5px solid #38bdf8 !important; padding:10px 0 !important; overflow:hidden; box-shadow:0 4px 16px rgba(15,23,42,0.12) !important; }
.mstrip .track{ display:flex; gap:54px; width:max-content; animation:scrollx 26s linear infinite; }
.mstrip .item{ display:flex; align-items:center; gap:12px; font-family:var(--ff-display); font-weight:800; color:#ffffff !important; white-space:nowrap; font-size:1rem; }
.mstrip .item svg{ width:20px; height:20px; color:#38bdf8 !important; }
.mstrip .item .sep{ color:#ea580c !important; font-weight:900; font-size:1.3rem; }
@keyframes scrollx{ to{ transform:translateX(-50%);} }

/* ============================================================ SECTION SHELL (dark) */
.bsec{ position:relative; padding-block: 4px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.bsec.lite{ background:transparent !important; padding-block: 4px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.beyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-body); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright); }
.beyebrow::before{ content:""; width:28px; height:2px; background:var(--red); border-radius:2px; }
.bsec h2{ color:#0f172a; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.025em; }
.bhead{ max-width:720px; margin-bottom:8px !important; }
.bhead.center{ margin-inline:auto; text-align:center; }
.bhead.center .beyebrow{ }
.bhead p{ color:#334155; font-size:1.02rem; margin-top:4px !important; margin-bottom:4px !important; }

/* ============================================================ STATS */
.bstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.bstat{ position:relative; padding:30px 24px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.bstat::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg,var(--blue-bright),var(--red)); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.bstat.in::before{ transform:scaleX(1); }
.bstat .n{ font-family:var(--ff-display); font-weight:800; font-size:clamp(2.4rem,4vw,3.4rem); color:#fff; line-height:1; letter-spacing:-.02em; }
.bstat .l{ color:#9fb2c5; font-weight:600; margin-top:8px; font-size:.95rem; }

/* ============================================================ SERVICES tilt grid */
.svc-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tcard{ position:relative; border-radius:16px; padding:18px 20px; min-height:180px; overflow:hidden; cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09);
  transform-style:preserve-3d; transition:transform .25s var(--ease), border-color .3s, box-shadow .3s; display:flex; flex-direction:column; }
.tcard:hover{ border-color:rgba(0,174,239,.45); box-shadow:0 16px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(0,174,239,.2); }
.tcard .glow{ position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(0,174,239,.3),transparent 60%); pointer-events:none; opacity:0; transition:opacity .3s; transform:translate(-50%,-50%); }
.tcard:hover .glow{ opacity:1; }
.tcard.span2{ grid-column:span 2; }
.tcard .tic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; transform:translateZ(40px);
  background:linear-gradient(140deg,var(--blue),var(--blue-bright)); box-shadow:0 8px 20px rgba(0,174,239,.35); }
.tcard .tic svg{ width:22px; height:22px; }
.tcard h3{ color:#fff; font-size:1.22rem; margin:8px 0 4px; transform:translateZ(28px); }
.tcard p{ color:#9fb2c5; font-size:.88rem; line-height:1.4; transform:translateZ(18px); margin:0; }
.tcard .go{ margin-top:10px; display:inline-flex; align-items:center; gap:6px; color:var(--blue-bright); font-family:var(--ff-display); font-weight:700; font-size:.86rem; transform:translateZ(28px); }
.tcard .go svg{ width:15px; height:15px; transition:transform .2s; }
.tcard:hover .go svg{ transform:translateX(4px); }
.tcard.feature{ background:linear-gradient(140deg,rgba(0,120,180,.4),rgba(8,20,34,.6)); border-color:rgba(0,174,239,.3); }

/* ============================================================ HOW IT WORKS compact horizontal flow */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; }
.flow-track, .flow-fill{ display:none; }
.fstep{ position:relative; padding:0; }
.fstep .fn{ position:static; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:800; font-size:1.15rem; color:#fff; background:#0c1a2a; border:1px solid rgba(255,255,255,.12); z-index:2; margin-bottom:8px; }
.fstep.in .fn{ background:linear-gradient(140deg,var(--blue),var(--blue-bright)); box-shadow:0 8px 20px rgba(0,174,239,.4); }
.fstep h3{ color:#fff; font-size:1.12rem; margin:0 0 4px; }
.fstep p{ color:#9fb2c5; font-size:.86rem; line-height:1.4; margin:0; }

/* ============================================================ REVIEWS marquee */
.revrow{ display:flex; gap:14px; width:max-content; }
.revrow.r1{ animation:scrollx 46s linear infinite; }
.revrow.r2{ animation:scrollx 52s linear infinite reverse; margin-top:10px; }
.revmarq{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.revmarq:hover .revrow{ animation-play-state:paused; }
.rcard{ width:320px; flex:none; border-radius:16px; padding:16px 18px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09); }
.rcard .stars{ margin-bottom:6px; }
.rcard p{ color:#dbe6f1; font-size:.88rem; line-height:1.4; margin:0 0 10px; }
.rcard .who{ display:flex; align-items:center; gap:10px; }
.rcard .av{ width:34px; height:34px; border-radius:50%; background:linear-gradient(140deg,var(--blue),var(--navy)); display:grid; place-items:center; color:#fff; font-family:var(--ff-display); font-weight:700; font-size:.88rem; }
.rcard .who b{ color:#fff; font-family:var(--ff-display); font-size:.9rem; display:block; } .rcard .who span{ font-size:.78rem; color:#8ea3b8; }

/* ============================================================ FINANCING / CTA */
.bfin{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.bfin .pts{ display:flex; flex-direction:column; gap:14px; margin:24px 0 30px; }
.bfin .pts .p{ display:flex; gap:13px; align-items:flex-start; color:#cfe0f0; }
.bfin .pts .p .ck{ width:26px; height:26px; border-radius:50%; background:rgba(0,174,239,.18); color:var(--blue-bright); display:grid; place-items:center; flex:none; margin-top:2px; }
.bfin .pts .p .ck svg{ width:15px; height:15px; }
.fincard{ border-radius:24px; padding:38px; text-align:center; background:linear-gradient(160deg,rgba(0,120,180,.3),rgba(8,18,30,.5)); border:1px solid rgba(0,174,239,.25); }
.fincard .big{ font-family:var(--ff-display); font-weight:800; font-size:4rem; color:#fff; line-height:1; }
.fincard .apr{ color:#9fb2c5; font-weight:600; margin:8px 0 24px; }

.bigcta{ position:relative; border-radius:24px; overflow:hidden; padding:clamp(24px,3.5vw,40px); text-align:center;
  background:radial-gradient(120% 140% at 50% 0%, #0e3a5c, #0a1f33 60%, #081320); border:1px solid rgba(255,255,255,.1); }
.bigcta::before{ content:""; position:absolute; inset:0; background:conic-gradient(from 180deg at 50% -20%, transparent, rgba(0,174,239,.18), transparent, rgba(225,20,35,.14), transparent); animation:spin 24s linear infinite; }
.bigcta > *{ position:relative; z-index:2; }
.bigcta h2{ font-size:clamp(2rem,4vw,3.2rem); color:#fff; }
.bigcta p{ color:#bcd0e2; font-size:1.1rem; max-width:34em; margin:14px auto 22px; }
.bigcta .ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

body.theme-bold .footer{ background:#071527; border-top:1px solid rgba(56, 189, 248, 0.25); }


@media (prefers-reduced-motion:reduce){
  .blob,.ring-glow,.bigcta::before,.revrow,.mstrip .track,.pin .dot::after{ animation:none !important; }
}



/* ============================================================
   CARLSBAD HVAC PROS - CUSTOM ENHANCEMENTS & WORDPRESS GLUE
   ============================================================ */

/* WordPress Admin Bar Compatibility */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}

/* Brand Logo */
.brand { display: flex; align-items: center; }
.brand img, .site-logo-img { height: 50px; width: auto; max-height: 52px; object-fit: contain; }
.footer-brand-logo img, .footer-logo-img { height: 56px; width: auto; max-height: 60px; object-fit: contain; }

/* Bento Service Cards with Photos */
.tcard {
  position: relative;
  background-size: cover;
  background-position: center;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.tcard-bg-wrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
}
.tcard-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  transition: opacity .4s ease, transform .6s ease;
}
.tcard:hover .tcard-bg-img {
  opacity: 0.28;
  transform: scale(1.06);
}
.tcard-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Service Badge in Bento */
.tcard-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-bright);
  margin-bottom: 12px;
  background: rgba(0, 174, 239, 0.12);
  border: 1px solid rgba(0, 174, 239, 0.25);
  padding: 4px 10px;
  border-radius: 100px;
  width: fit-content;
  transform: translateZ(30px);
}

/* Booking Section on Dark Theme */
.booking-section-wrap {
  background: radial-gradient(120% 120% at 50% 20%, #0e2942 0%, #081422 60%, #050a12 100%);
  border-top: none;
  border-bottom: none;
  position: relative;
  overflow: hidden;
  padding-block: clamp(8px, 1vw, 12px) !important;
}
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width: 960px) {
  .booking-grid { grid-template-columns: 1fr; gap: 36px; }
}

.booking-info h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #fff;
  letter-spacing: -0.025em;
  margin-top: 14px;
}
.booking-info p {
  color: #9fb2c5;
  font-size: 1.12rem;
  margin-top: 16px;
  line-height: 1.6;
}
.booking-trust-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0;
}
.booking-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #dce7f2;
  font-weight: 600;
  font-size: 1.02rem;
}
.booking-trust-item i, .booking-trust-item svg {
  color: var(--blue-bright);
  font-size: 1.15rem;
}

.booking-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 42px);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.booking-card h3 {
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.booking-card p.subtitle {
  color: #8ea3b8;
  font-size: 0.95rem;
  margin-bottom: 24px;
}
.booking-card label {
  color: #0f172a !important;
  font-size: 0.88rem;
  font-weight: 800;
  margin-bottom: 6px;
  display: block;
}
.booking-card input, .booking-card select, .booking-card textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px;
  padding: 13px 15px;
  font-family: var(--ff-body);
  font-size: 1rem;
  width: 100%;
  transition: all 0.2s ease;
}
.booking-card input:focus, .booking-card select:focus, .booking-card textarea:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
  outline: none;
}
.booking-card select option {
  background: #ffffff;
  color: #0f172a;
}
.form-submit-btn {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 16px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.08rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-red);
  width: 100%;
  margin-top: 10px;
}
.form-submit-btn:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(225, 20, 35, 0.45);
}
.booking-card .form-note {
  color: #7e93a8;
  font-size: 0.82rem;
  margin-top: 12px;
  text-align: center;
}
.booking-result {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 600;
  display: none;
}
.booking-result.success {
  display: block;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}
.booking-result.error {
  display: block;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

/* Floating Mobile Call/Book Bar */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(11, 33, 56, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 14px;
  z-index: 999;
  gap: 10px;
}
@media (max-width: 768px) {
  .mobile-sticky-bar {
    display: flex;
  }
}
.mobile-sticky-bar a {
  flex: 1;
  text-align: center;
  padding: 12px 14px;
  border-radius: 9px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mobile-sticky-call {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.mobile-sticky-book {
  background: var(--red);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(225, 20, 35, 0.35);
}

/* ============================================================
   SERVICE PAGES DESIGN SYSTEM (AIM Mechanical Aesthetic)
   ============================================================ */
.svc-hero {
  position: relative;
  background: radial-gradient(130% 120% at 50% 15%, #0e2942 0%, #081422 65%, #050a12 100%);
  padding-top: clamp(24px, 3.5vw, 36px);
  padding-bottom: clamp(16px, 2.5vw, 24px);
  color: #fff;
  overflow: hidden;
  border-bottom: none;
}
.svc-hero .grain {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(0, 174, 239, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(225, 20, 35, 0.12) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}
.svc-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
@media (max-width: 991px) {
  .svc-hero-inner {
    grid-template-columns: 1fr;
  }
}
.svc-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #8ea3b8;
  margin-bottom: 18px;
}
.svc-breadcrumbs a {
  color: #8ea3b8;
  transition: color 0.2s;
}
.svc-breadcrumbs a:hover {
  color: var(--blue-bright);
}
.svc-breadcrumbs span.sep {
  opacity: 0.5;
}
.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-bright);
  background: rgba(0, 174, 239, 0.12);
  border: 1px solid rgba(0, 174, 239, 0.25);
  margin-bottom: 18px;
}
.svc-hero h1 {
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.svc-hero h1 .grad-text {
  background: linear-gradient(135deg, #00AEEF 0%, #6f7bff 50%, #ff5a6e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.svc-hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  line-height: 1.6;
  color: #b0c4d8;
  margin-bottom: 28px;
  max-width: 680px;
}
.svc-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}
.svc-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.svc-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: #c7d8e8;
  font-weight: 600;
}
.svc-meta-item i, .svc-meta-item svg {
  color: var(--blue-bright);
  font-size: 1.1rem;
}

.svc-hero-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.svc-hero-card img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
.svc-hero-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(8, 20, 34, 0.95) 0%, rgba(8, 20, 34, 0.7) 60%, transparent 100%);
  color: #fff;
}
.svc-hero-card-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--red);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* Sticky In-Page Sub Navigation */
.svc-subnav-sticky {
  position: sticky;
  top: 85px;
  z-index: 850;
  background: rgba(8, 18, 30, 0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: top 0.2s ease;
}
.admin-bar .svc-subnav-sticky {
  top: 117px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar .svc-subnav-sticky {
    top: 131px !important;
  }
}
.svc-subnav-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
  scrollbar-width: none;
}
.svc-subnav-inner::-webkit-scrollbar {
  display: none;
}
.svc-subnav-inner a {
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: #a4b8cc;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
}
.svc-subnav-inner a:hover, .svc-subnav-inner a.active {
  color: #fff;
  background: rgba(0, 174, 239, 0.18);
  color: var(--blue-bright);
}
.svc-subnav-inner .subnav-phone {
  margin-left: auto;
  color: #fff;
  background: var(--red);
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.svc-subnav-inner .subnav-phone:hover {
  background: var(--red-deep);
  color: #fff;
}

/* Service Main Layout */
.svc-body-section {
  padding-block: clamp(28px, 3.5vw, 44px);
  background: #fff;
}
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 1040px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

/* Service Article Content Typography & Structure */
.svc-content {
  color: #d1e2f3;
  font-size: 1.08rem;
  line-height: 1.78;
}
.svc-content h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  color: #ffffff;
  margin-top: 50px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  letter-spacing: -0.02em;
}
.svc-content h2:first-of-type {
  margin-top: 0;
}
.svc-content h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: #ffffff;
  margin-top: 36px;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}
.svc-content h4 {
  font-size: 1.16rem;
  color: #ffffff;
  margin-top: 24px;
  margin-bottom: 10px;
}
.svc-content p {
  color: #d1e2f3;
  margin-bottom: 20px;
}
.svc-content strong,
.svc-content b {
  color: #ffffff;
  font-weight: 700;
}
.svc-content ul, .svc-content ol {
  color: #d1e2f3;
  margin: 0 0 24px 20px;
  padding: 0;
}
.svc-content li {
  color: #d1e2f3;
  margin-bottom: 10px;
}

/* Visual Feature Callouts */
.svc-callout {
  border-radius: 16px;
  padding: 24px 28px;
  margin: 32px 0;
  position: relative;
  border-left: 5px solid;
}
.svc-callout.tip {
  background: rgba(0, 174, 239, 0.08);
  border-color: var(--blue-bright);
}
.svc-callout.alert {
  background: rgba(225, 20, 35, 0.08);
  border-color: var(--red);
}
.svc-callout.success {
  background: rgba(34, 197, 94, 0.08);
  border-color: #22c55e;
}
.svc-callout h4 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
}
.svc-callout p:last-child {
  margin-bottom: 0;
}

/* Symptom / Diagnostic Card Grid */
.svc-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 28px 0 40px;
}
.svc-diag-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.svc-diag-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--blue-bright);
}
.svc-diag-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 174, 239, 0.14);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.svc-diag-card h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.12rem;
  color: var(--navy);
}
.svc-diag-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 0;
}

/* Process Steps */
.svc-step-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0 44px;
}
.svc-step-item {
  display: flex;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s;
}
.svc-step-item:hover {
  border-color: var(--blue);
}
.svc-step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--blue-bright);
}
.svc-step-text h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.18rem;
  color: var(--navy);
}
.svc-step-text p {
  margin-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Tables (Pricing & Comparisons) */
.svc-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 30px 0 40px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.svc-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.98rem;
}
.svc-table th {
  background: var(--navy);
  color: #fff;
  padding: 16px 20px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
}
.svc-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #d1e2f3;
}
.svc-table tr:last-child td {
  border-bottom: none;
}
.svc-table tr:nth-child(even) td {
  background: rgba(243, 246, 250, 0.6);
}
.svc-table tr:hover td {
  background: rgba(0, 174, 239, 0.05);
}

/* FAQ Accordion */
.svc-faq-wrap {
  margin: 32px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.svc-faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s;
}
.svc-faq-item.active {
  border-color: var(--blue-bright);
}
.svc-faq-trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--navy);
}
.svc-faq-trigger:hover {
  color: var(--blue);
}
.svc-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
.svc-faq-item.active .svc-faq-icon {
  transform: rotate(180deg);
  background: var(--blue-bright);
  color: #fff;
}
.svc-faq-content {
  display: none;
  padding: 0 24px 22px;
  color: #51606f;
  line-height: 1.7;
  font-size: 0.98rem;
  border-top: 1px solid transparent;
}
.svc-faq-item.active .svc-faq-content {
  display: block;
}

/* Sticky Sidebar */
.svc-sidebar {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.svc-sidecard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.svc-sidecard.emergency {
  background: linear-gradient(145deg, #0e2942 0%, #081422 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
.svc-sidecard.emergency h3 {
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.svc-sidecard.emergency p {
  color: #9fb2c5;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
.svc-sidecard-phone {
  background: var(--red);
  color: #fff !important;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.18rem;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-red);
  transition: all 0.2s;
  margin-bottom: 12px;
}
.svc-sidecard-phone:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
}
.svc-coupon-card {
  border: 2px dashed #00AEEF;
  background: rgba(0, 174, 239, 0.05);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
}
.svc-coupon-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #00AEEF;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.svc-coupon-card h4 {
  font-size: 1.35rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.svc-coupon-card p {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.svc-coupon-btn {
  display: block;
  background: var(--navy);
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.svc-coupon-btn:hover {
  background: var(--blue-deep);
}
.svc-quick-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.svc-quick-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: #3d4e60;
  margin-bottom: 10px;
  font-weight: 600;
}
.svc-quick-list li i, .svc-quick-list li svg {
  color: var(--blue-bright);
}

/* ============================================================
   RESPONSIVE DESIGN & MOBILE OPTIMIZATION (EVERY ELEMENT CRYSTAL CLEAR)
   ============================================================ */

/* Global container constraints for mobile */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

.mobile-quick-tabs,
.mobile-sticky-bar {
  display: none !important;
}

/* ---------- Header & Navigation (<= 980px) ---------- */
@media (max-width: 980px) {
  /* Completely hide topbar on mobile */
  .topbar,
  .desktop-only {
    display: none !important;
  }

  .nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #0B2138 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .nav-inner {
    padding-inline: 16px !important;
    min-height: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .brand {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .brand img, .site-logo-img {
    height: 36px !important;
    width: auto !important;
    max-height: 36px !important;
  }
  .nav-links,
  .mega,
  .nav-cta .btn,
  .nav-cta {
    display: none !important;
  }
  .nav-toggle {
    display: none !important;
  }

  /* Full Width Responsive Mobile Navigation Bar (100% Fit On Screen, No Horizontal Scroll) */
  .mobile-tabs-bar {
    display: block !important;
    background: #081a2d !important;
    padding: 6px 8px 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .mobile-tabs-scroll {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 3px !important;
    overflow-x: visible !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .mobile-tabs-scroll::-webkit-scrollbar {
    display: none !important;
  }
  .tab-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    padding: 5px 3px !important;
    font-family: var(--ff-display), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(0.68rem, 2.4vw, 0.82rem) !important;
    font-weight: 600 !important;
    color: #9fb2c5 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    text-align: center !important;
    line-height: 1.15 !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
  }
  .tab-pill:hover,
  .tab-pill:active {
    color: #ffffff !important;
  }
  .tab-pill.active {
    background: #00aeef !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 174, 239, 0.35) !important;
  }

  /* Services Dropdown Button in Tabs */
  .tab-pill.tab-dropdown-btn {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: transparent !important;
    border: none !important;
    font-family: inherit !important;
    outline: none !important;
    padding: 5px 6px !important;
  }
  .tab-pill.tab-dropdown-btn svg {
    width: 10px !important;
    height: 10px !important;
    stroke: currentColor !important;
    transition: transform 0.22s ease !important;
    flex: none !important;
  }
  .tab-pill.tab-dropdown-btn.open svg {
    transform: rotate(180deg) !important;
  }
  .tab-pill.tab-dropdown-btn.open {
    background: rgba(0, 174, 239, 0.18) !important;
    color: #ffffff !important;
  }

  /* Mobile Services Dropdown Panel */
  .mobile-services-dropdown {
    display: none;
    background: #060d16 !important;
    margin-top: 8px !important;
    padding: 12px 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 174, 239, 0.25) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
    animation: msSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .mobile-services-dropdown.open {
    display: block !important;
  }
  @keyframes msSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .ms-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .ms-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }
  .ms-item:hover, .ms-item:active {
    background: rgba(0, 174, 239, 0.14) !important;
    border-color: rgba(0, 174, 239, 0.35) !important;
  }
  .ms-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
  }
  .ms-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
  .ms-icon.icon-cool { background: rgba(0, 174, 239, 0.15) !important; color: #00aeef !important; }
  .ms-icon.icon-warm { background: rgba(239, 68, 68, 0.15) !important; color: #ef4444 !important; }
  .ms-icon.icon-electric { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; }
  .ms-icon.icon-install { background: rgba(245, 158, 11, 0.15) !important; color: #f59e0b !important; }
  .ms-icon.icon-fan { background: rgba(168, 85, 247, 0.15) !important; color: #a855f7 !important; }
  .ms-icon.icon-air { background: rgba(6, 182, 212, 0.15) !important; color: #06b6d4 !important; }

  .ms-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  .ms-title {
    font-family: var(--ff-display), sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
  }
  .ms-sub {
    font-size: 0.74rem !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
  }
  .ms-foot {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-align: center !important;
  }
  .ms-view-all {
    display: inline-block !important;
    font-family: var(--ff-display), sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #00aeef !important;
    text-decoration: none !important;
  }

  /* Hide old elements */
  .mobile-nav,
  .mobile-nav-backdrop,
  .mobile-quick-tabs,
  .mobile-sticky-bar {
    display: none !important;
  }
}

/* Mobile Slide-Out Drawer Navigation */
.mobile-nav-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 99998 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease !important;
}
.mobile-nav-backdrop.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-nav {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  width: min(340px, 86vw) !important;
  z-index: 99999 !important;
  background: #0B2138 !important;
  color: #fff !important;
  transform: translateX(100%) !important;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 20px 40px !important;
  overflow-y: auto !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
}
.mobile-nav.open {
  transform: translateX(0) !important;
}
.mobile-nav-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.mobile-nav-top img {
  height: 38px !important;
  width: auto !important;
}
.mobile-nav .close {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
}
.mobile-nav .close svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #fff !important;
}
.mobile-nav > a {
  display: block !important;
  font-family: var(--ff-display) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.mobile-nav .sub {
  padding-left: 10px !important;
  margin: 6px 0 10px !important;
  border-left: 2px solid var(--blue-bright) !important;
}
.mobile-nav .sub a {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #b9c8d8 !important;
  padding: 8px 0 8px 10px !important;
  border: none !important;
}
.mobile-nav .sub a:hover {
  color: #ffffff !important;
}
.mobile-nav-cta {
  margin-top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Floating Mobile Sticky Bottom Bar (<= 768px) */
@media (max-width: 768px) {
  .mobile-sticky-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(11, 33, 56, 0.97) !important;
    backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9999 !important;
    gap: 10px !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4) !important;
  }
  .mobile-sticky-bar a {
    flex: 1 !important;
    text-align: center !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-family: var(--ff-display) !important;
    font-weight: 700 !important;
    font-size: 0.94rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
  }
  .mobile-sticky-call {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
  }
  .mobile-sticky-book {
    background: linear-gradient(135deg, var(--red), #ff4a5e) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(225, 20, 35, 0.4) !important;
  }
}

/* ---------- HERO SECTION MOBILE STACKING (<= 980px) ---------- */
@media (max-width: 980px) {
  .bhero {
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 20px !important;
    display: block !important;
  }
  .bhero-inner {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: center !important;
    text-align: center !important;
    padding: 28px var(--gutter) 20px !important;
    max-width: 640px !important;
    margin: 0 auto !important;
  }
  .bhero-copy {
    width: 100% !important;
  }
  .bhero-copy .tag {
    display: inline-flex !important;
    margin: 0 auto !important;
  }
  .bhero h1 {
    font-size: clamp(2.3rem, 7vw, 3.8rem) !important;
    line-height: 1.05 !important;
    margin: 18px 0 0 !important;
  }
  .bhero .sub {
    font-size: 1.08rem !important;
    line-height: 1.55 !important;
    max-width: 32em !important;
    margin: 16px auto 0 !important;
    color: #b0c2d4 !important;
  }
  .bhero-ctas {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 26px !important;
    flex-wrap: wrap !important;
  }
  .bhero-meta {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    margin-top: 30px !important;
    flex-wrap: wrap !important;
  }
  .dial-wrap {
    order: 2 !important;
    width: 100% !important;
    margin: 10px auto 0 !important;
  }
  .dial-stage {
    width: min(340px, 84vw) !important;
    margin: 0 auto !important;
  }

  /* Grid components at 980px */
  .bstats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .svc-bento {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
  .tcard.span2 {
    grid-column: span 2 !important;
  }
  .area2, .bfin {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  .page-hero-grid, .split, .svc-cta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* ---------- SMALL MOBILE PHONES (<= 600px) ---------- */
@media (max-width: 600px) {
  /* Eliminate unnecessary padding & height across all sections */
  .about-hero-img {
    height: 220px !important;
  }
  .citylist .c {
    font-size: 0.76rem !important;
    padding: 4px 10px !important;
  }
  .bsec, .section, .cert-band, .booking-section-wrap, .svc-hero, .about-hero, .simple-hero {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-block: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .bhead {
    margin-bottom: 6px !important;
  }
  .bhead h2, .cert-head h2 {
    font-size: clamp(1.4rem, 5.2vw, 1.75rem) !important;
    line-height: 1.15 !important;
  }
  .bhead p, .cert-head .lead {
    font-size: 0.88rem !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
  }
  .cert-head {
    margin: 0 auto 10px !important;
  }

  /* Compact Hero */
  .bhero {
    padding-top: 6px !important;
    padding-bottom: 12px !important;
  }
  .bhero-inner {
    padding: 10px 14px 12px !important;
    gap: 12px !important;
  }
  .bhero h1 {
    font-size: clamp(1.7rem, 6.8vw, 2.1rem) !important;
    line-height: 1.1 !important;
  }
  .bhero .sub {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
  }
  .bhero-ctas {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .bhero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 8px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
  }
  .carlsbad-live-pill {
    margin: 6px 0 8px !important;
    padding: 4px 10px !important;
    font-size: 0.74rem !important;
  }
  .bhero-meta {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
  .bhero-meta .div {
    display: none !important;
  }
  .bhero-meta .m {
    align-items: center !important;
    text-align: center !important;
  }
  .bhero-meta .m b {
    font-size: 1.05rem !important;
    line-height: 1.1 !important;
  }
  .bhero-meta .m span {
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
  }
  .carlsbad-hero-visual-stage {
    margin-top: 12px !important;
    max-width: 100% !important;
  }
  .hero-tech-photo {
    height: 220px !important;
  }
  .float-badge {
    padding: 5px 8px !important;
    gap: 6px !important;
  }
  .float-badge strong {
    font-size: 0.7rem !important;
  }
  .float-badge span {
    font-size: 0.62rem !important;
  }

  /* Compact Services Bento Cards */
  .svc-bento {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .tcard.span2 {
    grid-column: span 1 !important;
  }
  .tcard {
    min-height: auto !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }
  .tcard .tic {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }
  .tcard .tic svg {
    width: 18px !important;
    height: 18px !important;
  }
  .tcard h3 {
    font-size: 1.1rem !important;
    margin: 4px 0 !important;
  }
  .tcard p {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  .tcard .go {
    margin-top: 6px !important;
    font-size: 0.82rem !important;
  }
  .tcard-badge {
    font-size: 0.66rem !important;
    padding: 2px 7px !important;
    margin-bottom: 6px !important;
  }

  /* Compact How It Works */
  .flow {
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .flow-track, .flow-fill {
    display: none !important;
  }
  .fstep {
    padding-left: 44px !important;
    position: relative !important;
    padding-bottom: 0 !important;
  }
  .fstep .fn {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
  }
  .fstep h3 {
    font-size: 1.05rem !important;
    margin-bottom: 2px !important;
  }
  .fstep p {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
  }

  /* Compact 2-column Certifications Grid */
  .cert-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .cert {
    padding: 10px 8px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    align-items: center !important;
  }
  .cert-feature {
    grid-column: span 2 !important;
    flex-wrap: wrap !important;
  }
  .cert-tier {
    margin-left: 0 !important;
    padding: 3px 8px !important;
    font-size: 0.65rem !important;
  }
  .cert-emblem, .cert-diamond {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  .cert-diamond svg, .cert-emblem svg {
    width: 18px !important;
    height: 18px !important;
  }
  .cert-title {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }
  .cert-sub {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }
  .cert-org {
    font-size: 0.68rem !important;
  }

  /* Compact Reviews Marquee */
  .revmarq {
    padding: 2px 0 !important;
  }
  .revrow.r2 {
    display: none !important; /* Cut marquee height on mobile */
  }
  .rcard {
    width: 260px !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .rcard p {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  .rcard .who .av {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
  }
  .rcard .who b {
    font-size: 0.84rem !important;
  }
  .rcard .who span {
    font-size: 0.72rem !important;
  }

  /* Compact Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-bottom: 18px !important;
  }
  .footer {
    padding-top: 18px !important;
  }

  /* Big CTA Banner */
  .bigcta {
    padding: 22px 14px !important;
    border-radius: 14px !important;
  }
  .bigcta h2 {
    font-size: 1.45rem !important;
  }
  .bigcta .ctas {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .bigcta .ctas .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ========================================================
   GLOBAL HERO STYLES FOR STANDALONE INNER PAGES
   ======================================================== */
.about-hero {
  position: relative !important;
  padding-top: clamp(16px, 2.5vw, 26px) !important;
  padding-bottom: clamp(12px, 1.8vw, 18px) !important;
  background: transparent !important;
  overflow: hidden !important;
  color: #ffffff !important;
  border-bottom: none !important;
}
.about-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.84rem !important;
  color: #9fb2c5 !important;
  margin-bottom: 10px !important;
  font-weight: 600 !important;
}
.about-breadcrumbs a {
  color: #00AEEF !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.about-breadcrumbs a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.about-breadcrumbs .sep {
  color: #64748b !important;
  font-size: 0.95rem !important;
}
.about-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  background: rgba(0, 174, 239, 0.12) !important;
  border: 1px solid rgba(0, 174, 239, 0.32) !important;
  color: #00AEEF !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.about-tag .dot {
  width: 7px !important;
  height: 7px !important;
  background: #00AEEF !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px #00AEEF !important;
  animation: livePulse 2s infinite !important;
}
.about-title {
  font-family: var(--ff-display, 'Sora', system-ui, sans-serif) !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 12px !important;
}
.about-title .grad-text {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 60%, #ea580c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.about-sub {
  font-size: clamp(0.96rem, 1.2vw, 1.12rem) !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin-bottom: 16px !important;
  max-width: 680px !important;
}
.about-hero-inner {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: clamp(18px, 3vw, 36px) !important;
  align-items: center !important;
}
.about-hero-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.about-hero-meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.about-hero-meta .m {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.about-hero-meta .m b {
  display: block !important;
  font-size: 1.4rem !important;
  color: #0f172a !important;
  font-family: var(--ff-display, 'Sora', system-ui, sans-serif) !important;
  line-height: 1.1 !important;
}
.about-hero-meta .m span {
  display: block !important;
  font-size: 0.82rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.about-hero-meta .div {
  width: 1px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.16) !important;
}
.about-card-stage {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  background: #0f2438 !important;
}
.about-hero-img {
  width: 100% !important;
  height: 380px !important;
  object-fit: cover !important;
  display: block !important;
  filter: contrast(1.02) brightness(1.02) !important;
}
.about-visual-badge {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  background: rgba(11, 33, 56, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 2 !important;
}
.about-visual-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(0deg, rgba(8, 22, 37, 0.96) 0%, rgba(8, 22, 37, 0.6) 70%, transparent 100%) !important;
  padding: 30px 24px 24px !important;
  display: flex !important;
  justify-content: space-around !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.overlay-stat .n {
  display: block !important;
  font-family: var(--ff-display, 'Sora', system-ui, sans-serif) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #00AEEF !important;
  line-height: 1 !important;
}
.overlay-stat .l {
  font-size: 0.76rem !important;
  color: #c5d8eb !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
@media (max-width: 980px) {
  .about-hero-inner {
    grid-template-columns: 1fr !important;
  }
  .about-hero-meta {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .about-hero-img {
    height: 360px !important;
  }
}

/* ========================================================
   GLOBAL COMPACT ZERO-BLOAT SPACING ARCHITECTURE
   Eliminates all excessive padding & vertical gaps site-wide
   ======================================================== */
body .section,
body .section-sm,
body .bsec,
body .bsec.lite,
body .cert-band,
body .svc-body-section,
body .booking-section-wrap,
body main > section,
body main > div.bsec {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-block: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

body .bhead {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
body .bhead p {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

body .bhero {
  min-height: auto !important;
  padding-top: 4px !important;
  padding-bottom: 6px !important;
}
body .bhero-inner {
  padding: 8px var(--gutter) 8px !important;
  gap: 16px !important;
}
body .about-hero {
  padding-top: 8px !important;
  padding-bottom: 6px !important;
}
body .simple-hero,
body .page-hero {
  padding-block: 8px !important;
}

body .mstrip {
  padding: 2px 0 !important;
  margin: 0 !important;
}

body .footer-cta-banner {
  padding: 10px 0 !important;
  margin-bottom: 10px !important;
}
body .footer-grid {
  gap: 16px !important;
  padding-bottom: 12px !important;
}
body .footer-col-title {
  margin-bottom: 10px !important;
}
body .service-areas-modern {
  margin-top: 10px !important;
  padding-top: 10px !important;
}
body .footer-bottom-bar {
  padding: 8px 0 10px !important;
  margin-top: 10px !important;
}

@media (max-width: 768px) {
  body .section,
  body .section-sm,
  body .bsec,
  body .bsec.lite,
  body .cert-band,
  body .svc-body-section,
  body .booking-section-wrap,
  body main > section,
  body main > div.bsec {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-block: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body .bhero {
    padding-top: 2px !important;
    padding-bottom: 4px !important;
  }
  body .bhero-inner {
    padding: 4px var(--gutter) 4px !important;
    gap: 10px !important;
  }
  body .about-hero {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  body .bhead {
    margin-bottom: 4px !important;
  }
}

/* Global Mobile Viewport & Button Text Wrap Safeguards */
@media (max-width: 768px) {
  .btn, .btn-lg, .btn-block, a.btn, button.btn {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .btn-lg {
    padding: 13px 18px !important;
    font-size: 1rem !important;
  }
  
  /* High-Visibility Animated Hamburger Toggle Button */
  .mobile-nav-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background: #0f2744 !important;
    border: 2px solid #38bdf8 !important;
    border-radius: 11px !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.38), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
  }
  .mobile-nav-toggle .mbar {
    width: 22px !important;
    height: 2.8px !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    display: block !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }
}

/* ============================================================
   GLOBAL FIX: ALL DARK UNREADABLE BOXES ACROSS ALL PAGES
   Turns dark #0b1d30 cards into soft icy sky-blue high-contrast cards
   ============================================================ */
div[style*="background:#0b1d30"],
div[style*="background: #0b1d30"],
div[style*="background:#0f2438"],
div[style*="background: #0f2438"] {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1.5px solid #38bdf8 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.14) !important;
}

div[style*="background:#0b1d30"] h3,
div[style*="background: #0b1d30"] h3,
div[style*="background:#0f2438"] h3,
div[style*="background: #0f2438"] h3,
div[style*="background:#0b1d30"] h4,
div[style*="background:#0b1d30"] strong,
div[style*="background: #0b1d30"] strong {
  color: #ffffff !important;
  font-family: var(--ff-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

div[style*="background:#0b1d30"] p,
div[style*="background: #0b1d30"] p,
div[style*="background:#0f2438"] p,
div[style*="background: #0f2438"] p,
div[style*="background:#0b1d30"] li,
div[style*="background: #0b1d30"] li {
  color: #e2e8f0 !important;
  font-family: var(--ff-body) !important;
  font-size: 0.94rem !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

div[style*="background:#0b1d30"] span[style*="background:rgba(0,174,239"],
div[style*="background: #0b1d30"] span[style*="background:rgba(0,174,239"],
div[style*="background:#0b1d30"] span[style*="background:rgba(16,185,129"],
div[style*="background:#0b1d30"] span[style*="background:rgba(245,158,11"],
div[style*="background:#0b1d30"] span[style*="background:rgba(129,140,248"] {
  background: #ffffff !important;
  border: 1px solid #7dd3fc !important;
  color: #0284c7 !important;
  font-weight: 800 !important;
}

/* ========================================================
   CLASSY EDITORIAL ARTICLE & GUIDE HIGHLIGHTS (ICY SKY-BLUE)
   ======================================================== */
mark, .highlight-sky, .hl-icy, .text-highlight {
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.22) 0%, rgba(2, 132, 199, 0.12) 100%) !important;
  color: #0369a1 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  border-bottom: 2px solid #38bdf8 !important;
  font-weight: 700 !important;
  display: inline !important;
}

/* In Dark Sections / Backgrounds */
.on-dark mark, .svc-hero mark, .problem-service-page mark, .dark-wrap mark {
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.28) 0%, rgba(14, 165, 233, 0.18) 100%) !important;
  color: #e0f2fe !important;
  border-bottom: 2px solid #38bdf8 !important;
}

/* Classy Editorial Pro-Tip & Key Takeaway Boxes */
.pro-tip-box, .key-takeaway, .article-takeaway, .callout-icy {
  background: radial-gradient(900px 300px at 0% 0%, rgba(56, 189, 248, 0.12) 0%, rgba(240, 249, 255, 0.8) 100%) !important;
  border: 1.5px solid #bae6fd !important;
  border-left: 5px solid #0284c7 !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  margin: 30px 0 !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.08) !important;
  position: relative !important;
}

.pro-tip-box h4, .key-takeaway h4, .article-takeaway h4, .callout-icy h4 {
  color: #0369a1 !important;
  font-family: var(--ff-display, system-ui, sans-serif) !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  margin: 0 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: -0.01em !important;
}

.pro-tip-box p, .key-takeaway p, .article-takeaway p, .callout-icy p {
  color: #334155 !important;
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
  margin-bottom: 0 !important;
}

/* Article Blockquotes */
.svc-content blockquote, article blockquote, .guide-content blockquote {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(224, 242, 254, 0.3) 100%) !important;
  border-left: 4px solid #0284c7 !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 18px 24px !important;
  margin: 28px 0 !important;
  font-style: italic !important;
  color: #1e293b !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.06) !important;
}

/* Key Stat & Metric Pills in Articles */
.stat-pill, .badge-highlight, .metric-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #0284c7 !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  vertical-align: middle !important;
}

/* Article Headings Decorative Accent Removed */
.svc-content h2::before, article h2::before, .problem-service-page .svc-body-section h2::before {
  content: none !important;
  display: none !important;
}

/* ============================================================
   WHITE SCREEN THEME OVERRIDE (Clean, Bright, High-Contrast)
   ============================================================ */
body, main {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* 1. HOMEPAGE HERO — PURE WHITE SCREEN */
.bhero {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.bhero .grain,
.bhero .cursor-glow,
.bhero .blob {
  display: none !important;
}
.bhero h1 {
  color: #0f172a !important;
}
.bhero h1 .grad-text {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0284c7 !important;
}
.bhero .sub {
  color: #475569 !important;
}
.bhero-copy .tag {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}
.bhero-meta .m b {
  color: #0f172a !important;
}
.bhero-meta .m span {
  color: #64748b !important;
}
.bhero-meta .div {
  background: #e2e8f0 !important;
}
.bhero .btn-ghost {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}
.bhero .btn-ghost:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}
.dial-stage .ring-glow {
  opacity: 0.1 !important;
}
.dial-face {
  fill: #ffffff !important;
  stroke: #e2e8f0 !important;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.06)) !important;
}
.dial-track {
  stroke: #f1f5f9 !important;
}
.dial-tick {
  stroke: #cbd5e1 !important;
}
.dial-knob {
  fill: #ffffff !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15)) !important;
}
.dial-knob-ring {
  stroke: #0284c7 !important;
}
.dial-temp {
  color: #0f172a !important;
}
.dial-temp sup {
  color: #0284c7 !important;
}
.dial-label {
  color: #475569 !important;
}
.dial-hint {
  color: #64748b !important;
}
.carlsbad-live-pill {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
}
.carlsbad-bbb-pill {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
}

/* 2. SERVICE PAGES HERO — ICY SKY BLUE TO CLEAN WHITE */
.svc-hero {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e0f2fe !important;
}
.svc-hero .grain {
  display: none !important;
}
.svc-hero h1 {
  color: #0f172a !important;
}
.svc-hero h1 .grad-text {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0284c7 !important;
}
.svc-hero-sub {
  color: #475569 !important;
}
.svc-badge {
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}
.svc-breadcrumbs {
  color: #64748b !important;
}
.svc-breadcrumbs a {
  color: #475569 !important;
}
.svc-breadcrumbs span[aria-current="page"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}
.svc-hero .btn-ghost,
.svc-hero .btn-ghost.on-dark {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}
.svc-hero .btn-ghost:hover,
.svc-hero .btn-ghost.on-dark:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}
.svc-hero-meta {
  border-top: 1px solid #e0f2fe !important;
}
.svc-meta-item {
  color: #0369a1 !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
}

/* 3. LOCATION PAGES HERO — ICY SKY BLUE TO CLEAN WHITE */
.loc-hero,
.loc-hero-banner {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important;
  background-color: #f0f9ff !important;
  background-image: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #e0f2fe !important;
}
.loc-hero-overlay {
  display: none !important;
}
.loc-title,
.loc-h1 {
  color: #0f172a !important;
}
.loc-sub {
  color: #475569 !important;
}
.loc-badge {
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}
.loc-meta span {
  color: #0369a1 !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
}
.loc-hero .btn-white,
.loc-hero-banner .btn-white {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}
.loc-hero .btn-white:hover,
.loc-hero-banner .btn-white:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

/* 4. ABOUT & GENERIC PAGES HERO — ICY SKY BLUE TO CLEAN WHITE */
.about-hero,
.page-hero,
.simple-hero {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #e0f2fe !important;
}
.about-hero h1,
.about-title,
.page-hero h1 {
  color: #0f172a !important;
}
.about-hero p,
.about-sub,
.page-hero p {
  color: #475569 !important;
}
.about-breadcrumbs {
  color: #64748b !important;
}
.about-breadcrumbs a {
  color: #475569 !important;
}

/* 5. MARQUEE STRIP — REFRESHING ICY SKY BLUE */
.mstrip {
  background: #f0f9ff !important;
  border-top: 1px solid #e0f2fe !important;
  border-bottom: 1px solid #bae6fd !important;
  box-shadow: none !important;
}
.mstrip .item {
  color: #0f172a !important;
}
.mstrip .item svg {
  color: #0284c7 !important;
}
.mstrip .item .sep {
  color: #0284c7 !important;
}


/* Global Suppression of Cheesy Clutter */
.svc-hero-meta, .svc-hero-ctas, .mstrip, .beyebrow, .svc-badge, .hm-hero-badges, .hm-trust-pill, .svc-clean-pill, .svc-clean-badges, .svc-clean-ctas { display: none !important; }

/* Ensure Entire Website Footer Has Pure Crisp White Text & Zero Dark Dim Characters */
.footer p,
#site-footer p,
.footer-contact-info p,
.footer-contact-info span,
.footer-bio,
.fb-left span {
  color: #ffffff !important;
}
.footer-contact-info .fc-val {
  color: #ffffff !important;
}

/* ========================================================
   CARLSBAD COASTAL CALIFORNIA RADIANT COLOR & VIBE SUITE
   Pacific Deep Navy #071527 · Ocean Sky Blue #0284C7 · Coastal Teal #0891B2 · Cyan #38BDF8
   ======================================================== */

/* Nav Sticky Header Coastal Accent */
.nav#aimNav {
  border-bottom: 2px solid rgba(56, 189, 248, 0.28) !important;
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.08) !important;
}

/* Primary Coastal Action Buttons */
.btn-primary,
.btn-clean-primary,
.btn-blue,
a.btn.btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.32) !important;
  border: none !important;
  transition: all 0.2s cubic-bezier(.22,.61,.36,1) !important;
}
.btn-primary:hover,
.btn-clean-primary:hover,
.btn-blue:hover,
a.btn.btn-primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.42) !important;
}

/* California Coastal Sunset Emergency CTAs */
.btn-red,
.btn-danger,
a.btn.btn-red,
.sticky-call-btn {
  background: linear-gradient(135deg, #ea580c 0%, #e11423 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}
.btn-red:hover,
a.btn.btn-red:hover,
.sticky-call-btn:hover {
  background: linear-gradient(135deg, #c2410c 0%, #b80c18 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(234, 88, 12, 0.45) !important;
}

/* Coastal Wave Bars & Accent Lines */
.icy-bar,
.coastal-wave-bar {
  background: linear-gradient(90deg, #0284c7 0%, #0891b2 50%, #38bdf8 100%) !important;
  height: 5px !important;
  width: 72px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.35) !important;
  margin: 0 0 28px !important;
}

/* Coastal Sea-Glass Quote Boxes */
.editorial-quote,
.callout-icy {
  background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%) !important;
  border-left: 5px solid #0891b2 !important;
  border-radius: 0 14px 14px 0 !important;
  box-shadow: 0 6px 22px rgba(6, 182, 212, 0.12) !important;
}

/* Coastal Pill Badges */
.icy-pill,
.hm-trust-pill,
.chip-coastal {
  background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%) !important;
  color: #0369a1 !important;
  border: 1.5px solid #7dd3fc !important;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.16) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
}

/* Coastal Photo Frames with Pacific Glow */
.img-container,
.hm-svc-img-wrap {
  border: 2px solid #bae6fd !important;
  box-shadow: 0 16px 36px -8px rgba(6, 182, 212, 0.22) !important;
  border-radius: 14px !important;
}

/* Front Page Trust Strip Fresh Coastal Styling */
.hm-trust-bar {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%) !important;
  border-top: 1.5px solid #e0f2fe !important;
  border-bottom: 1.5px solid #e0f2fe !important;
}
.hm-trust-item strong {
  color: #0284c7 !important;
}

/* Review / Testimonial Cards Coastal Upgrade */
.hm-rev-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%) !important;
  border: 1.5px solid #bae6fd !important;
  border-left: 4.5px solid #0891b2 !important;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.08) !important;
}
.hm-rev-stars {
  color: #f59e0b !important;
  text-shadow: 0 1px 4px rgba(245, 158, 11, 0.3) !important;
}

/* Footer Coastal Top Wave Border */
.footer#site-footer {
  border-top: 3.5px solid #0284c7 !important;
  border-image: linear-gradient(90deg, #0284c7 0%, #0891b2 50%, #38bdf8 100%) 1 !important;
}
.footer-col-title {
  border-bottom: 2px solid #0891b2 !important;
}