/* ============================================================
   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,16,26,.82); backdrop-filter:saturate(140%) blur(16px); border-bottom-color:rgba(255,255,255,.1); box-shadow:0 10px 40px rgba(0,0,0,.4); }
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 */
.grad-text{ background:linear-gradient(100deg,#5fd0ff 0%, #aab4ff 45%, #ff6a7a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================================================ HERO */
.bhero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(120% 120% at 70% -10%, #0c2034 0%, #081320 45%, #050a12 100%); }
.bhero .grain{ position:absolute; inset:0; opacity:.5; 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"); }
/* drifting temperature blobs */
.blob{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; will-change:transform,opacity; }
.blob.cool{ width:60vw; height:60vw; left:-12vw; top:-18vw; background:radial-gradient(circle, rgba(0,174,239,.55), transparent 62%);
  opacity:calc(.35 + .55*(1 - var(--f,.5))); animation:drift1 16s ease-in-out infinite; }
.blob.warm{ width:55vw; height:55vw; right:-14vw; bottom:-20vw; background:radial-gradient(circle, rgba(225,20,35,.5), transparent 62%);
  opacity:calc(.3 + .55*var(--f,.5)); animation:drift2 19s ease-in-out infinite; }
.blob.mid{ width:36vw; height:36vw; left:38%; top:30%; background:radial-gradient(circle, rgba(120,110,255,.28), transparent 65%); animation:drift3 22s ease-in-out infinite; }
@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:40px; align-items:center;
  max-width:var(--maxw-wide); margin:0 auto; padding: 120px var(--gutter) 70px; }
.bhero-copy .tag{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:100px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-weight:700; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; color:#bfe6fb; backdrop-filter:blur(8px); }
.tag .dot{ width:8px; height:8px; 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(2.9rem, 6vw, 5.6rem); line-height:.95; color:#fff; margin:22px 0 0; letter-spacing:-.03em; }
.bhero h1 em{ font-style:normal; display:block; }
.bhero .sub{ font-size:clamp(1.08rem,1.5vw,1.3rem); color:#aebfd0; max-width:30em; margin:22px 0 0; font-weight:500; line-height:1.55; }
.bhero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn-glow{ background:linear-gradient(100deg,var(--blue),var(--blue-bright)); color:#fff; box-shadow:0 10px 36px rgba(0,174,239,.45); }
.btn-glow:hover{ transform:translateY(-2px); box-shadow:0 16px 46px rgba(0,174,239,.6); }
.bhero-meta{ display:flex; gap:26px; margin-top:36px; 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.5rem; color:#fff; }
.bhero-meta .m span{ font-size:.84rem; 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:#0a1320; border-block:1px solid rgba(255,255,255,.07); padding:18px 0; overflow:hidden; }
.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:700; color:#e7eef6; white-space:nowrap; font-size:1.05rem; }
.mstrip .item svg{ width:22px; height:22px; color:var(--blue-bright); }
.mstrip .item .sep{ color:var(--red); }
@keyframes scrollx{ to{ transform:translateX(-50%);} }

/* ============================================================ SECTION SHELL (dark) */
.bsec{ position:relative; padding-block: clamp(72px,9vw,140px); }
.bsec.lite{ background:#0a1320; }
.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:#fff; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.025em; }
.bhead{ max-width:720px; margin-bottom:54px; }
.bhead.center{ margin-inline:auto; text-align:center; }
.bhead.center .beyebrow{ }
.bhead p{ color:#9fb2c5; font-size:1.12rem; margin-top:16px; }

/* ============================================================ 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:22px; }
.tcard{ position:relative; border-radius:22px; padding:30px; min-height:300px; 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 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(0,174,239,.2); }
.tcard .glow{ position:absolute; width:300px; height:300px; 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:58px; height:58px; border-radius:16px; display:grid; place-items:center; color:#fff; transform:translateZ(40px);
  background:linear-gradient(140deg,var(--blue),var(--blue-bright)); box-shadow:0 12px 30px rgba(0,174,239,.4); }
.tcard .tic svg{ width:28px; height:28px; }
.tcard h3{ color:#fff; font-size:1.45rem; margin:auto 0 8px; transform:translateZ(28px); }
.tcard p{ color:#9fb2c5; font-size:.96rem; transform:translateZ(18px); margin:0; }
.tcard .go{ margin-top:18px; display:inline-flex; align-items:center; gap:8px; color:var(--blue-bright); font-family:var(--ff-display); font-weight:700; font-size:.95rem; transform:translateZ(28px); }
.tcard .go svg{ width:17px; height:17px; transition:transform .2s; }
.tcard:hover .go svg{ transform:translateX(5px); }
.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 swoosh timeline */
.flow{ position:relative; }
.flow-track{ position:absolute; left:33px; top:20px; bottom:20px; width:3px; background:linear-gradient(180deg,var(--blue-bright),#6f7bff,var(--red)); border-radius:3px; opacity:.3; }
.flow-fill{ position:absolute; left:33px; top:20px; width:3px; background:linear-gradient(180deg,var(--blue-bright),#6f7bff,var(--red)); border-radius:3px; height:0; transition:height .1s linear; box-shadow:0 0 16px rgba(0,174,239,.5); }
.fstep{ position:relative; padding:0 0 46px 92px; }
.fstep:last-child{ padding-bottom:0; }
.fstep .fn{ position:absolute; left:0; top:-4px; width:68px; height:68px; border-radius:20px; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:800; font-size:1.5rem; color:#fff; background:#0c1a2a; border:1px solid rgba(255,255,255,.12); z-index:2; transition:transform .3s, box-shadow .3s, background .3s; }
.fstep.in .fn{ background:linear-gradient(140deg,var(--blue),var(--blue-bright)); box-shadow:0 14px 34px rgba(0,174,239,.45); }
.fstep h3{ color:#fff; font-size:1.5rem; margin-bottom:8px; }
.fstep p{ color:#9fb2c5; font-size:1.02rem; max-width:46em; margin:0; }

/* ============================================================ SERVICE AREA interactive */
.area2{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.area-visual{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:1/1; border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(120% 120% at 60% 20%, #10283f, #081320); }
.area-visual .ph{ position:absolute; inset:0; min-height:0; border:0; border-radius:0; opacity:.5; }
.area-visual .area-map{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pin{ position:absolute; transform:translate(-50%,-50%); }
.pin .dot{ width:14px; height:14px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 0 0 rgba(0,174,239,.5); }
.pin.active .dot{ background:var(--red); }
.pin .dot::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid currentColor; color:var(--blue-bright); animation:ping 2.4s ease-out infinite; opacity:0; }
.pin .lbl{ position:absolute; left:18px; top:-4px; white-space:nowrap; font-weight:700; font-size:.8rem; color:#cfe0f0; background:rgba(8,18,30,.8); padding:3px 9px; border-radius:8px; opacity:0; transition:opacity .2s; }
.pin.active .lbl{ opacity:1; }
@keyframes ping{ 0%{ transform:scale(.6); opacity:.8;} 100%{ transform:scale(2.4); opacity:0;} }
.citylist{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.citylist .c{ font-weight:600; font-size:.92rem; padding:8px 15px; border-radius:100px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); color:#cfe0f0; cursor:pointer; transition:all .2s; }
.citylist .c:hover, .citylist .c.on{ background:var(--blue); border-color:transparent; color:#fff; transform:translateY(-2px); }

/* ============================================================ REVIEWS marquee */
.revrow{ display:flex; gap:22px; width:max-content; }
.revrow.r1{ animation:scrollx 46s linear infinite; }
.revrow.r2{ animation:scrollx 52s linear infinite reverse; margin-top:22px; }
.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:380px; flex:none; border-radius:20px; padding:26px; 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:12px; }
.rcard p{ color:#dbe6f1; font-size:1rem; line-height:1.5; margin:0 0 16px; }
.rcard .who{ display:flex; align-items:center; gap:12px; }
.rcard .av{ width:42px; height:42px; 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; }
.rcard .who b{ color:#fff; font-family:var(--ff-display); display:block; } .rcard .who span{ font-size:.84rem; 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:30px; overflow:hidden; padding:clamp(48px,7vw,90px); 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(2.2rem,5vw,4rem); color:#fff; }
.bigcta p{ color:#bcd0e2; font-size:1.15rem; max-width:34em; margin:18px auto 32px; }
.bigcta .ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================ FOOTER tweak (dark already) */
body.theme-bold .footer{ background:#060d16; border-top:1px solid rgba(255,255,255,.07); }

/* ============================================================ RESPONSIVE */
@media (max-width:980px){
  .bhero-inner{ grid-template-columns:1fr; gap:48px; padding-top:108px; text-align:center; }
  .bhero-copy .tag, .bhero-ctas, .bhero-meta{ justify-content:center; }
  .bhero .sub{ margin-inline:auto; }
  .dial-wrap{ order:2; }
  .bstats{ grid-template-columns:1fr 1fr; }
  .svc-bento{ grid-template-columns:1fr 1fr; }
  .tcard.span2{ grid-column:span 2; }
  .area2, .bfin{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .bstats, .svc-bento{ grid-template-columns:1fr; }
  .tcard.span2{ grid-column:span 1; }
  .bhero-meta .div{ display:none; }
  .fstep{ padding-left:80px; }
}
@media (prefers-reduced-motion:reduce){
  .blob,.ring-glow,.bigcta::before,.revrow,.mstrip .track,.pin .dot::after{ animation:none !important; }
}