/* OneUp Solar - home page upgrades (Nov 2026)
   Loaded after the page's own styles. Remove this file and enhance.js to undo. */

/* ---------- Hero: real install photo behind the text ---------- */
.hero.hero-photo{
  background:
    linear-gradient(155deg, rgba(8,33,61,.94) 0%, rgba(13,47,82,.86) 50%, rgba(18,64,107,.78) 100%),
    url('/assets/projects/madambakkam-1-after-1200.webp') center / cover no-repeat,
    var(--navy-900);
}

/* ---------- Scroll reveal (only kicks in when enhance.js runs) ---------- */
.js-rv .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.js-rv .rv.in{opacity:1; transform:none;}

/* ---------- Calculator: show the bill bars on desktop too ---------- */
@media (min-width: 981px){
  .save-bars{display:block; margin-top:14px;}
  .save-row{display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--ink-soft); margin-top:7px;}
  .save-row .nm{width:80px; flex:none;}
  .save-row .bar{flex:1; height:10px; border-radius:5px; background:rgba(8,33,61,.08); overflow:hidden;}
  .save-row .bar i{display:block; height:10px; border-radius:5px;}
  .save-row .am{width:70px; flex:none; text-align:right; color:var(--navy-900); font-weight:700;}
}
.save-row .bar i{transition:width .5s ease !important;}

/* ---------- How it works: line fills and steps light up ---------- */
.process-track::after{
  content:""; position:absolute; top:27px; left:10%; height:2px; width:0;
  background:var(--gold); transition:width 2.4s ease; z-index:1;
}
.process-track.lit::after{width:80%;}
.process-step .p-num{transition:background .4s ease, border-color .4s ease, color .4s ease, transform .4s ease;}
.process-step.on .p-num{background:var(--gold) !important; border-color:var(--gold) !important; color:var(--navy-900) !important; transform:scale(1.08);}
@media (max-width: 980px){ .process-track::after{display:none;} }

/* ---------- Projects: before / after slider ---------- */
.ba-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
.ba{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-l); overflow:hidden;
  box-shadow:var(--shadow-2); background:var(--navy-800); touch-action:pan-y; user-select:none;
}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.ba .ba-after{clip-path:inset(0 50% 0 0);}
.ba .ba-line{position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px; background:#fff; pointer-events:none;}
.ba .ba-knob{
  position:absolute; top:50%; left:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.ba .ba-knob svg{width:24px; height:24px; color:var(--navy-900);}
.ba .ba-tag{
  position:absolute; bottom:14px; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:700; pointer-events:none;
}
.ba .ba-tag.after{left:14px; background:rgba(8,33,61,.82); color:#fff;}
.ba .ba-tag.before{right:14px; background:rgba(255,255,255,.92); color:var(--navy-900);}
.ba input[type=range]{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.ba input[type=range]:focus-visible ~ .ba-knob{outline:3px solid var(--gold); outline-offset:2px;}
.ba-copy .ba-place{font-family:'Poppins',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.06em; color:var(--leaf-dark); text-transform:uppercase;}
.ba-copy h3{font-size:1.5rem; margin:8px 0 12px;}
.ba-copy p{color:var(--ink-soft);}
.ba-copy .ba-link{font-weight:700; color:var(--navy-700); text-decoration:underline;}

/* ---------- Projects: swipeable strip ---------- */
.proj-strip{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:36px;
  padding:4px 4px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.proj-card{
  flex:0 0 260px; scroll-snap-align:start; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-m); overflow:hidden; cursor:zoom-in; padding:0; text-align:left;
  font:inherit; color:inherit; transition:transform .18s ease, box-shadow .18s ease;
}
.proj-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2);}
.proj-card img{width:100%; height:190px; object-fit:cover; display:block;}
.proj-card .pc-txt{display:block; padding:12px 14px 14px;}
.proj-card b{display:block; color:var(--navy-900); font-size:.95rem;}
.proj-card small{display:block; color:var(--ink-soft); font-size:.82rem; margin-top:2px;}
.proj-more{display:flex; justify-content:flex-end; margin-top:6px;}
.proj-more a{font-weight:700; color:var(--navy-700); text-decoration:underline;}

/* ---------- Google reviews ---------- */
.rev-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px;}
.rev-head .sec-head{margin-bottom:0;}
.rev-score{
  display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-m); padding:12px 18px; text-decoration:none; color:inherit;
}
.rev-score b{font-family:'Poppins',sans-serif; font-size:1.9rem; color:var(--navy-900); line-height:1;}
.rev-score span{display:block; font-size:.8rem; color:var(--ink-soft);}
.stars, .rev-score .stars{display:flex; gap:2px; color:var(--gold); margin-bottom:3px;}
.stars svg{width:16px; height:16px;}
.rev-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.rev-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:22px;
  display:flex; flex-direction:column; gap:12px; margin:0;
}
.rev-card blockquote{margin:0; font-size:.95rem; line-height:1.65; color:var(--ink);}
.rev-card figcaption{margin-top:auto; font-size:.85rem; font-weight:700; color:var(--navy-900);}
.rev-card figcaption span{font-weight:500; color:var(--ink-soft);}
.rev-foot{margin-top:18px; font-size:.85rem; color:var(--ink-soft);}
.rev-foot a{color:var(--navy-700); font-weight:700; text-decoration:underline;}
@media (max-width: 980px){
  .rev-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:12px;}
  .rev-card{flex:0 0 82%; scroll-snap-align:start;}
  .ba-wrap{grid-template-columns:1fr; gap:22px;}
}

/* ---------- Area map ---------- */
.map-card .area-map{width:100%; height:360px; background:#0d2f52;}
.area-map .leaflet-popup-content{font-family:'Noto Sans',sans-serif; font-size:13px; margin:10px 12px;}
.area-pin{
  width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35);
  position:relative;
}
.area-pin::after{
  content:""; position:absolute; inset:-2px; border-radius:50%; background:inherit; opacity:.5;
  animation:pin-ring 2s ease-out infinite;
}
.area-pin.office{background:var(--gold); width:20px; height:20px;}
.area-pin.site{background:var(--leaf);}
.map-legend{display:flex; gap:16px; flex-wrap:wrap; padding:12px 16px 0; font-size:.8rem; color:#c6d5e4;}
.map-legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px;}
@keyframes pin-ring{0%{transform:scale(1); opacity:.5} 100%{transform:scale(2.4); opacity:0}}
@media (max-width: 620px){ .map-card .area-map{height:280px;} }

/* ---------- WhatsApp button: gentle pulse after a few seconds ---------- */
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:-1; opacity:0;
}
.wa-float.pulse::before{animation:wa-ring 2.4s ease-out infinite;}
@keyframes wa-ring{0%{transform:scale(1); opacity:.55} 70%,100%{transform:scale(1.8); opacity:0}}

/* ---------- Respect "reduce motion" settings ---------- */
@media (prefers-reduced-motion: reduce){
  .js-rv .rv{opacity:1; transform:none; transition:none;}
  .process-track::after, .process-step .p-num, .save-row .bar i{transition:none !important;}
  .wa-float.pulse::before, .area-pin::after{animation:none;}
}