/* ===== Next Gen Innovative — Solar Sale Page ===== */
:root{
  --blue:#00A6D0;
  --blue-d:#0086ab;
  --blue-dd:#065a8f;
  --green:#2C9817;
  --green-d:#237a11;
  --ink:#122029;
  --muted:#5b6a75;
  --bg:#ffffff;
  --bg-soft:#f4f9fb;
  --line:#e5eef2;
  --shadow:0 18px 45px -20px rgba(6,90,143,.28);
  --radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:'Kanit',sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:300;
}
.container{width:min(1180px,92%);margin:0 auto}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:12px;font-weight:600;font-size:1.05rem;transition:.3s;text-decoration:none;cursor:pointer}
.btn-small{padding:10px 22px;font-size:0.95rem;border-radius:10px}
.btn:hover{transform:translateY(-2px)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 12px 24px -10px rgba(44,152,23,.7)}
.btn-green:hover{background:var(--green-d)}
/* ปุ่ม "สอบถาม" ในหัวข้อ บริการของเรา : ปกติเป็นฟ้าอ่อน / hover เป็นสีใส */
.services .btn-green.btn-small{
  background:#e2f2f9;color:var(--blue-d);box-shadow:none;border:1px solid transparent;font-weight:600;
}
.services .btn-green.btn-small:hover{
  background:transparent;color:var(--blue-d);border-color:rgba(0,134,171,.35);box-shadow:none;
}
/* ปุ่ม "เริ่มต้นกับเรา" ในหัวข้อ จุดเด่นของเรา : สีฟ้า ตัวหนังสือขาว (hover ยังคงสีฟ้า) */
.benefits .btn-green.btn-small,
.benefits .btn-green.btn-small:hover{
  background:var(--blue);color:#fff;box-shadow:0 12px 24px -10px rgba(0,166,208,.7);
}
/* ปุ่ม "ประเมินหน้างานฟรี" ใน hero-cta : พื้นหลังขุ่นเหมือนปุ่ม "ดูผลงานที่ติดตั้ง" */
.hero-cta .btn-green{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.7);
  backdrop-filter:blur(4px);box-shadow:none;
}
/* hover เป็นพื้นขาว ตัวหนังสือฟ้า */
.hero-cta .btn-green:hover{
  background:#fff;color:var(--blue-d);box-shadow:0 12px 24px -10px rgba(6,90,143,.45);
}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 12px 24px -10px rgba(0,166,208,.7)}
.btn-blue:hover{background:var(--blue-d)}
.btn-outline-white{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.7);backdrop-filter:blur(4px)}
.btn-outline-white:hover{background:#fff;color:var(--blue-dd);border-color:#fff}
.btn-quote{background:var(--blue);color:#fff;padding:.7rem 1.4rem;font-size:.95rem}
.btn-quote:hover{background:#008ca6;color:#fff}
.btn.full{width:100%}

/* ===== HEADER ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s;
  background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(255,255,255,.96);box-shadow:0 8px 30px -18px rgba(6,90,143,.4);border-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:1.5rem;padding:.6rem 0}
.brand-logo{width:100px;height:60px;object-fit:contain}
.main-nav{display:flex;gap:1.6rem;margin-left:auto}
.main-nav a{font-size:.98rem;font-weight:400;color:var(--ink);position:relative;padding:.3rem 0}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);transition:.25s}
.main-nav a:hover{color:var(--blue)}
.main-nav a:hover::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* ===== LEFT DOT NAV ===== */
.dot-nav{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:14px;padding:14px 10px;background:#fff;
  border-radius:40px;box-shadow:var(--shadow)}
.dot-nav a{width:11px;height:11px;border-radius:50%;background:#cfdde4;position:relative;transition:.25s}
.dot-nav a.active{background:var(--green);transform:scale(1.25)}
.dot-nav a:hover{background:var(--blue)}
.dot-nav a::before{content:attr(data-label);position:absolute;left:26px;top:50%;transform:translateY(-50%);
  background:var(--ink);color:#fff;font-size:.72rem;padding:3px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:.2s}
.dot-nav a:hover::before{opacity:1}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('../images/hero1.jpg') center/cover no-repeat;transform:scale(1.05)}
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(0,166,208,.17) 0%,rgba(0,166,208,.59) 45%,rgba(6,90,143,.35) 100%)}
.hero-content{position:relative;z-index:2;padding:120px 0 70px;max-width:760px}
.hero-badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  padding:.5rem 1.1rem;border-radius:50px;font-size:.9rem;font-weight:400;margin-bottom:1.3rem;backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(2.3rem,5.5vw,4rem);font-weight:700;line-height:1.15;letter-spacing:-.5px}
.hero h1 .hl{color:#7ff0a1;text-shadow:0 2px 18px rgba(44,152,23,.5)}
.hero-sub{font-size:clamp(1rem,1.6vw,1.22rem);font-weight:300;margin:1.3rem 0 2rem;max-width:640px;color:#eef7fb}
.hero-sub strong{color:#7ff0a1;font-weight:600}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:1.2rem;margin-top:3rem;flex-wrap:wrap}
.hstat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:16px;
  padding:1rem 1.3rem;min-width:120px;backdrop-filter:blur(6px)}
.hstat b{display:block;font-size:1.7rem;font-weight:700;color:#fff}
.hstat span{font-size:.85rem;color:#dcecf3;font-weight:300}

/* ===== shared section ===== */
.section{padding:90px 0}
.eyebrow{display:inline-block;color:var(--green);font-weight:600;font-size:.95rem;letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:.6rem}
.sec-head{margin-bottom:3rem}
.sec-head.center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.sec-head h2,.section h2,.value-text h2,.benefits-text h2,.quote-text h2{
  font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700;line-height:1.25;letter-spacing:-.3px}
.sec-lead{color:var(--muted);font-size:1.05rem;font-weight:300;margin-top:.9rem}

/* ===== VALUE ===== */
.value-sec{padding:90px 0;background:var(--bg-soft)}
.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.value-media{position:relative}
.value-media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:auto;display:block}
.value-float{position:absolute;right:-18px;bottom:26px;background:#fff;border-radius:16px;padding:1rem 1.2rem;
  box-shadow:var(--shadow);max-width:230px;border-left:4px solid var(--green)}
.value-float b{display:block;color:var(--blue-dd);font-weight:600;margin-bottom:.2rem}
.value-float span{font-size:.85rem;color:var(--muted);font-weight:300}
.check-list{list-style:none;margin:1.6rem 0 2rem;display:grid;gap:.9rem}
.check-list li{position:relative;padding-left:2.2rem;font-size:1.08rem;font-weight:400}
.check-list li::before{content:"✓";position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.9rem;font-weight:600}

/* ===== ABOUT ===== */
.about{background:#fff}
.about-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.about-card{text-align:center;padding:2.2rem 1.2rem;border-radius:var(--radius);background:var(--bg-soft);
  border:1px solid var(--line);transition:.25s}
.about-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.ac-num{font-size:2.6rem;font-weight:700;color:var(--blue);line-height:1}
.about-card p{margin-top:.6rem;color:var(--muted);font-weight:400}

/* ===== SERVICES ===== */
.services{background:var(--bg-soft)}
.svc-wrap{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:1.6rem;align-items:stretch}
.svc-tabs{display:flex;flex-direction:column;gap:1rem}
.svc-tab{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 1.5rem;
  border-radius:16px;background:#fff;border:1px solid var(--line);cursor:pointer;font-family:inherit;
  text-align:left;transition:.25s;font-size:1.05rem;font-weight:500;color:var(--ink)}
.svc-tab .st-arrow{width:34px;height:34px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;
  color:var(--muted);transition:.25s;flex-shrink:0}
.svc-tab:hover{border-color:var(--green)}
.svc-tab.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 14px 30px -14px rgba(44,152,23,.7)}
.svc-tab.active .st-arrow{background:#fff;color:var(--green)}
.svc-media img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:16px;box-shadow:var(--shadow)}
.svc-detail{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.8rem}
.svc-detail h3{font-size:1.35rem;font-weight:600;color:var(--blue-dd);margin-bottom:.8rem}
.svc-detail p{color:var(--muted);font-weight:300;font-size:.98rem}
.svc-points{list-style:none;margin-top:1.2rem;display:grid;gap:.7rem}
.svc-points li{position:relative;padding-left:1.7rem;font-size:.95rem;font-weight:400}
.svc-points li::before{content:"◆";position:absolute;left:0;color:var(--green)}

/* ===== BENEFITS ===== */
.benefits{background:#fff}
.benefits-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:stretch}
.benefits-text{display:flex;flex-direction:column;align-items:flex-start}
.benefits-text .btn{margin-top:auto}
.benefits-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.bcard{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.5rem;transition:.25s;text-align:center}
.bcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent;background:#fff}
.bicon{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--green),#3fb524);
  color:#fff;display:grid;place-items:center;font-size:1.4rem;font-weight:600;margin:0 auto 1rem}
.bcard:nth-child(odd) .bicon{background:linear-gradient(135deg,var(--blue),#33c2e6)}
.bcard h4{font-size:1.15rem;font-weight:600;margin-bottom:.4rem;text-align:center}
.bcard p{color:var(--muted);font-weight:300;font-size:.92rem;text-align:center}

/* ===== CALCULATOR ===== */
.calculator{background:var(--bg-soft)}
.calc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem;align-items:start}
.calc-input{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);border:1px solid var(--line)}
.ci-head{display:flex;align-items:center;gap:.6rem;font-size:1.2rem;font-weight:600;margin-bottom:1.8rem}
.ci-ico{width:38px;height:38px;border-radius:10px;background:var(--bg-soft);display:grid;place-items:center}
.ci-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.ci-label{color:var(--muted);font-weight:400;font-size:.98rem}
.ci-label.mt{margin-top:1.5rem;margin-bottom:.6rem;display:block}
.ci-val{font-size:1.5rem;font-weight:700;color:var(--blue)}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:6px;background:#e3eef3;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--blue);cursor:pointer;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,166,208,.5)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--blue);cursor:pointer;border:3px solid #fff}
.ci-scale{display:flex;justify-content:space-between;color:#9db2bd;font-size:.8rem;margin-top:.4rem}
.seg{display:flex;gap:.6rem}
.seg button{flex:1;padding:.7rem;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-family:inherit;font-size:.92rem;font-weight:400;cursor:pointer;transition:.2s;color:var(--ink)}
.seg button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.ci-hint{font-size:.82rem;color:var(--muted);font-weight:300;margin-top:.6rem}
.quick{display:flex;gap:.5rem;flex-wrap:wrap}
.quick button{padding:.5rem .95rem;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  font-family:inherit;font-weight:400;cursor:pointer;transition:.2s;color:var(--ink)}
.quick button.active{background:var(--green);color:#fff;border-color:var(--green)}

.calc-output{display:grid;gap:1rem}
.co-hero{background:linear-gradient(120deg,var(--blue),var(--blue-dd));color:#fff;border-radius:var(--radius);
  padding:1.6rem 1.8rem;display:flex;justify-content:space-between;align-items:flex-start;box-shadow:0 20px 40px -18px rgba(0,166,208,.7)}
.co-hero-label{font-size:.95rem;font-weight:300;opacity:.95}
.co-hero-val{font-size:2.8rem;font-weight:700;line-height:1.1;margin:.2rem 0}
.co-hero-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.82rem;font-weight:300;opacity:.95}
.co-hero-meta b{font-weight:600}
.co-hero-ico{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:1.4rem}
.co-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.co-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.3rem}
.cc-l{font-size:.85rem;color:var(--muted);font-weight:400}
.cc-v{font-size:1.5rem;font-weight:700;color:var(--ink)}
.co-card:nth-child(4) .cc-v{color:var(--green)}
.co-chart{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.cch-title{font-weight:600;margin-bottom:1.2rem}
.bar-row{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.bar-name{width:100px;font-size:.85rem;color:var(--muted);font-weight:300;flex-shrink:0}
.bar-track{flex:1;background:#f0f5f7;border-radius:8px;height:26px;overflow:hidden}
.bar-fill{height:100%;border-radius:8px;transition:width .5s ease}
.bar-fill.before{background:linear-gradient(90deg,#f26c6c,#e34a4a)}
.bar-fill.after{background:linear-gradient(90deg,#3fb524,var(--green))}
.bar-amt{width:70px;text-align:right;font-weight:600;font-size:.9rem;flex-shrink:0}
.cch-legend{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-top:.4rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
.dot.red{background:#e34a4a}.dot.green{background:var(--green)}
.save-tag{margin-left:auto;color:var(--green);font-weight:400}
.save-tag b{font-weight:700}

/* ===== CLIENTS ===== */
.clients{background:#fff}
.client-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem}
.clogo{aspect-ratio:3/2;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;padding:0;color:var(--muted);
  font-weight:500;background:#fff;transition:.25s;overflow:hidden;cursor:default}
.clogo:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue)}
.clogo-img img{width:100%;height:100%;object-fit:contain;padding:1rem;transition:.3s}
.clogo-img span{display:none}
.clogo-img:hover img{transform:scale(1.06)}

/* ===== REVIEWS ===== */
.reviews{background:var(--bg-soft)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:0 12px 30px -22px rgba(6,90,143,.4)}
.stars{color:#f5b301;font-size:1.15rem;letter-spacing:2px;margin-bottom:1rem}
.rcard p{font-weight:300;color:#33454f;font-size:1rem}
.rperson{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem}
.rav{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600;font-size:1.2rem}
.rperson b{display:block;font-weight:600}
.rperson small{color:var(--muted);font-weight:300}

/* ===== PORTFOLIO ===== */
.portfolio{background:#fff}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.gallery figure{overflow:hidden;border-radius:16px;box-shadow:var(--shadow);aspect-ratio:4/3;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gallery figure:hover img{transform:scale(1.08)}
.gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,90,143,.25),transparent 55%);opacity:0;transition:.3s;pointer-events:none}
.gallery figure:hover::after{opacity:1}

/* สไลด์ผลงาน : แสดง 3 คอลัมน์ เลื่อนดูได้ครบทุกผลงาน */
.portfolio-slider{position:relative;--pgap:1.6rem;--pcols:3}
.portfolio-track{display:flex;gap:var(--pgap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.4rem .2rem 1rem;margin:0 -.2rem;scrollbar-width:none;-ms-overflow-style:none}
.portfolio-track::-webkit-scrollbar{display:none}
.portfolio-track .pcard{flex:0 0 calc((100% - (var(--pcols) - 1) * var(--pgap)) / var(--pcols));scroll-snap-align:start}
.pslide-btn{position:absolute;top:calc(50% - 1.5rem);transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--blue);font-size:1.1rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(6,90,143,.5);transition:.25s}
.pslide-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.pslide-btn[disabled]{opacity:.35;cursor:default;pointer-events:none}
.pslide-prev{left:-22px}
.pslide-next{right:-22px}
.pslide-dots{display:flex;justify-content:center;gap:8px;margin-top:.6rem}
.pslide-dot{width:10px;height:10px;border-radius:50%;border:none;padding:0;background:#cfdde6;cursor:pointer;transition:.25s}
.pslide-dot.active{background:var(--blue);width:26px;border-radius:999px}

/* การ์ดผลงาน : โชว์รูปปกรูปเดียว + ชื่อผลงานใต้รูป คลิกเพื่อดูรูปทั้งหมด */
.pcard{cursor:pointer}
.pcard-img{overflow:hidden;border-radius:16px;box-shadow:var(--shadow);aspect-ratio:4/3;position:relative}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:.4s;display:block}
.pcard:hover .pcard-img img{transform:scale(1.08)}
.pcard-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,90,143,.25),transparent 55%);opacity:0;transition:.3s;pointer-events:none}
.pcard:hover .pcard-img::after{opacity:1}
.pcard-count{position:absolute;right:.7rem;bottom:.7rem;background:rgba(0,0,0,.55);color:#fff;font-size:.78rem;
  font-weight:500;padding:.28rem .6rem;border-radius:999px;backdrop-filter:blur(4px)}
.pcard figcaption{margin-top:.8rem;text-align:center;font-size:1rem;font-weight:500;color:var(--ink);line-height:1.4}
.pcard:hover figcaption{color:var(--blue)}

.why{background:var(--bg-soft)}
.why-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.wstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.8rem;position:relative;transition:.25s;overflow:hidden;text-align:center}
.wstep::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:.3s}
.wstep:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.wstep:hover::before{transform:scaleY(1)}
.wnum{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--blue),#33c2e6);
  display:grid;place-items:center;margin:0 auto 1rem;color:#fff}
.wstep:nth-child(3n) .wnum,.wstep:nth-child(3n-1) .wnum{background:linear-gradient(135deg,var(--green),#3fb524)}
.wstep h4{font-size:1.15rem;font-weight:600;margin:.5rem 0;text-align:center}
.wstep p{color:var(--muted);font-weight:300;font-size:.92rem;text-align:center}

/* ===== QUOTE CTA ===== */
.quote-cta{padding:90px 0;background:linear-gradient(130deg,#f0f8ff 0%,#e6f4fb 50%,#f4f9fb 100%);color:var(--ink)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.quote-text h2{color:var(--blue-dd)}
.quote-text .hl-g{color:var(--green)}
.quote-text p{margin:1.2rem 0 1.8rem;font-weight:300;color:var(--muted);font-size:1.08rem}
.quote-contacts{display:flex;flex-direction:column;gap:.8rem}
.qc{display:inline-flex;align-items:center;gap:.7rem;font-weight:400;font-size:1.1rem;color:var(--ink)}
.qc span{width:38px;height:38px;border-radius:10px;background:rgba(0,166,208,.12);display:grid;place-items:center}
.quote-form{background:#fff;border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow);display:grid;gap:1rem}
.quote-form label{display:grid;gap:.4rem;font-weight:400;color:var(--ink);font-size:.92rem}
.quote-form input,.quote-form select{padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:1rem;font-weight:300;color:var(--ink);background:#fff}
.quote-form input:focus,.quote-form select:focus{outline:none;border-color:var(--blue)}
.form-note{font-size:.9rem;text-align:center;color:var(--green);font-weight:400;min-height:1.2rem}

/* ===== PRE-FOOTER CTA ===== */
.footer-cta{position:relative;background:linear-gradient(120deg,#083b5c 0%,#075878 55%,#087f9d 100%);overflow:hidden}
.footer-cta::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-130px;top:-230px;background:rgba(255,255,255,.06)}
.footer-cta::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;left:-100px;bottom:-190px;background:rgba(53,216,255,.09)}
.footer-cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2.5rem;padding:42px 0}
.footer-cta-copy{max-width:760px;color:#fff}
.footer-cta-kicker{display:inline-block;margin-bottom:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#83e7ff}
.footer-cta h2{margin:0 0 .45rem;color:#fff;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.2}
.footer-cta p{margin:0;max-width:700px;color:rgba(255,255,255,.78);font-size:1rem;font-weight:300;line-height:1.75}
.footer-cta-actions{display:flex;gap:.8rem;flex-shrink:0}
.footer-cta-btn{min-height:50px;padding:0 20px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;font-weight:600;white-space:nowrap;transition:.2s;box-shadow:0 12px 28px rgba(0,0,0,.13)}
.footer-cta-btn svg{width:20px;height:20px}
.footer-cta-line{background:#19c759;color:#fff}.footer-cta-line svg{fill:currentColor}
.footer-cta-phone{background:#fff;color:#073b55}.footer-cta-phone svg{fill:none;stroke:currentColor;stroke-width:2}
.footer-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.18)}

/* ===== FOOTER ===== */
.site-footer{background:linear-gradient(135deg,#0aa8cb 0%,#079fca 56%,#078fb9 100%);color:#fff}
.footer-inner{display:grid;grid-template-columns:minmax(300px,1.65fr) minmax(150px,.75fr) minmax(150px,.75fr) minmax(260px,1.1fr);gap:3.2rem;padding:64px 0 48px}
.foot-logo-wrap{display:flex;align-items:center;gap:1rem;margin-bottom:1.15rem;width:max-content}
.foot-brand img{width:78px;height:78px;background:#fff;padding:8px;border-radius:18px;object-fit:contain;box-shadow:0 10px 28px rgba(4,67,91,.14);margin:0}
.foot-brand-name{display:grid;line-height:1}.foot-brand-name strong{font-size:1.32rem;letter-spacing:.08em;color:#fff}.foot-brand-name span{margin-top:.33rem;font-size:.72rem;letter-spacing:.22em;color:rgba(255,255,255,.72)}
.foot-brand p{margin:0;max-width:405px;font-weight:300;font-size:.94rem;line-height:1.78;color:rgba(255,255,255,.82)}
.foot-social{display:flex;gap:.55rem;margin-top:1.35rem}.foot-social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.17);color:#fff;transition:.2s}.foot-social a:hover{background:#fff;color:#087fa4;transform:translateY(-2px)}.foot-social svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.7}
.foot-col h5{position:relative;margin:4px 0 1.25rem;padding-bottom:.75rem;color:#fff;font-weight:650;font-size:1.04rem}.foot-col h5::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;border-radius:4px;background:rgba(255,255,255,.72)}
.foot-col>a:not(.foot-contact-row){display:block;padding:.4rem 0;color:rgba(255,255,255,.78);font-weight:300;font-size:.92rem;transition:.2s}.foot-col>a:not(.foot-contact-row):hover{color:#fff;transform:translateX(3px)}
.foot-contact{display:flex;flex-direction:column}.foot-contact h5{align-self:stretch}.foot-contact-row{display:grid!important;grid-template-columns:38px 1fr;align-items:start;gap:.75rem;padding:.5rem 0!important;color:#fff!important}.foot-contact-row:hover{transform:none!important}.foot-contact-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.17)}.foot-contact-icon svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.foot-contact-row>span:last-child{display:grid;gap:.06rem}.foot-contact-row small{font-size:.72rem;color:rgba(255,255,255,.63);font-weight:300}.foot-contact-row b{font-size:.88rem;line-height:1.45;color:#fff;font-weight:500}
.foot-bottom{border-top:1px solid rgba(255,255,255,.2);padding:19px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.78rem;font-weight:300;color:rgba(255,255,255,.72)}
.foot-legal{display:flex;align-items:center;gap:.55rem}.foot-legal a{color:rgba(255,255,255,.76);transition:.2s}.foot-legal a:hover{color:#fff}

/* ===== FLOATING POPUP CONTACT ===== */
.popup-contact{position:fixed;right:22px;bottom:22px;z-index:999;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px}

/* circular toggle button */
.popup-toggle{position:relative;width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-dd));border:none;
  cursor:pointer;display:grid;place-items:center;color:#fff;overflow:visible;flex-shrink:0}
.popup-toggle:hover{transform:scale(1.08)}
.popup-toggle-icon{display:grid;place-items:center;position:relative;z-index:2}
.popup-toggle-text{display:none}

/* ripple rings */
.popup-toggle::before,.popup-toggle::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(0,166,208,.4);animation:rippleWave 2.4s ease-out infinite;z-index:0}
.popup-toggle::after{animation-delay:1.2s}
@keyframes rippleWave{
  0%{transform:scale(1);opacity:.65}
  100%{transform:scale(2.4);opacity:0}}

/* items wrapper — always in DOM, hidden by default */
.popup-items{display:flex;flex-direction:column;align-items:flex-end;gap:10px}

/* each item hidden by default */
.popup-item-wrap{
  display:flex;align-items:center;gap:12px;
  opacity:0;pointer-events:none;
  transform:translateY(14px) scale(.88);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1)}

/* when parent has .open class — show items with stagger */
.popup-contact.open .popup-item-wrap{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.popup-contact.open .popup-item-wrap:nth-child(4){transition-delay:.04s}
.popup-contact.open .popup-item-wrap:nth-child(3){transition-delay:.09s}
.popup-contact.open .popup-item-wrap:nth-child(2){transition-delay:.14s}
.popup-contact.open .popup-item-wrap:nth-child(1){transition-delay:.19s}

.popup-label{background:rgba(18,32,41,.88);color:#fff;padding:5px 14px;border-radius:8px;
  font-size:.88rem;font-weight:400;white-space:nowrap;backdrop-filter:blur(8px);font-family:inherit;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.3)}
.popup-btn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.35);transition:transform .2s;flex-shrink:0}
.popup-btn:hover{transform:scale(1.12)}
.pb-map{background:#fff;box-shadow:0 8px 22px -6px rgba(234,67,53,.5)}
.pb-line{background:#00c300;box-shadow:0 8px 22px -6px rgba(0,195,0,.5)}
.pb-fb{background:#1877f2;box-shadow:0 8px 22px -6px rgba(24,119,242,.5)}
.pb-phone{background:var(--green);box-shadow:0 8px 22px -6px rgba(44,152,23,.5)}

/* ===== reveal anim ===== */
.reveal{opacity:0;transform:translateY(30px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ===== RESPONSIVE ===== */
@media(max-width:960px){
  .dot-nav{display:none}
  .main-nav{position:fixed;top:70px;right:4%;left:4%;flex-direction:column;background:#fff;border-radius:16px;
    padding:1rem;box-shadow:var(--shadow);gap:.4rem;display:none;border:1px solid var(--line)}
  .main-nav.open{display:flex}
  .main-nav a{padding:.7rem;border-radius:8px}
  .nav-toggle{display:flex;margin-left:auto}
  .btn-quote{display:none}
  .value-grid,.benefits-grid,.calc-grid,.quote-grid{grid-template-columns:1fr;gap:2.5rem}
  .svc-wrap{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr 1fr}
  .benefits-cards{grid-template-columns:1fr 1fr}
  .bcard:nth-child(2),.bcard:nth-child(3){transform:none}
  .review-grid,.gallery,.why-steps{grid-template-columns:1fr 1fr}
  .portfolio-slider{--pcols:2}
  .pslide-prev{left:4px}
  .pslide-next{right:4px}
  .client-logos{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
  .co-cards{grid-template-columns:1fr 1fr}
  .value-float{right:10px}
}
@media(max-width:600px){
  .section{padding:64px 0}
  .hero-content{padding:110px 0 60px}
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .hero-cta .btn{font-size:.9rem;padding:12px 5px;text-align:center;width:100%}
  /* การ์ดสถิติบนมือถือ : ย่อขนาดลง + จัดตัวหนังสือกึ่งกลาง */
  .hero-stats{gap:.5rem;margin-top:2rem}
  .hstat{min-width:0;flex:1 1 calc(50% - .5rem);padding:.6rem .5rem;border-radius:12px;text-align:center}
  .hstat b{font-size:1.15rem}
  .hstat span{font-size:.72rem;line-height:1.35}
  .about-grid,.co-cards{grid-template-columns:1fr}
  /* สถิติในหัวข้อเกี่ยวกับเรา : แสดง 2 คอลัมน์ */
  .about-grid.small-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .small-grid .about-card{padding:1.1rem .7rem}
  .small-grid .ac-num{font-size:1.5rem}
  .small-grid .about-card p{font-size:.85rem}
  /* จัดหัวข้อกึ่งกลางบนมือถือ */
  .value-text .eyebrow,.value-text h2,
  .about-content .eyebrow,.about-content h2,
  .benefits-text .eyebrow,.benefits-text h2{width:100%;text-align:center}
  /* จุดเด่นของเรา / รีวิวจากลูกค้า / ผลงานของเรา บนมือถือ : แสดง 2 คอลัมน์ */
  .benefits-cards{grid-template-columns:1fr 1fr;gap:.8rem}
  .bcard{padding:1.3rem .85rem}
  .bicon{width:46px;height:46px;border-radius:13px;font-size:1.15rem;margin-bottom:.7rem}
  .bcard h4{font-size:1rem}
  .bcard p{font-size:.85rem}
  .review-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .rcard{padding:1.2rem 1rem;border-radius:14px}
  .rcard p{font-size:.88rem}
  .stars{font-size:1rem;margin-bottom:.6rem}
  .rperson{gap:.55rem;margin-top:1rem}
  .rav{width:34px;height:34px;font-size:.95rem}
  .rperson b{font-size:.88rem}
  .rperson small{font-size:.75rem}
  .gallery{grid-template-columns:1fr 1fr;gap:.6rem}
  .gallery figure{border-radius:12px}
  .portfolio-slider{--pcols:2;--pgap:.6rem}
  .pslide-btn{width:38px;height:38px;font-size:.95rem}
  .pcard-img{border-radius:12px}
  .pcard figcaption{margin-top:.5rem;font-size:.85rem}
  .pcard-count{font-size:.7rem;right:.45rem;bottom:.45rem;padding:.2rem .5rem}
  /* ทำไมต้องเลือกเรา บนมือถือ : แสดง 2 คอลัมน์ */
  .why-steps{grid-template-columns:1fr 1fr;gap:.8rem}
  .wstep{padding:1.4rem .9rem}
  .wstep h4{font-size:1rem}
  .wstep p{font-size:.85rem}
  /* โลโก้พาร์ทเนอร์บนมือถือ : ย่อขนาดลง แสดง 3 คอลัมน์ */
  .client-logos{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .clogo{border-radius:12px}
  .clogo-img img{padding:.45rem}
  .co-hero-val{font-size:2.2rem}
  /* footer บนมือถือ : จัดกึ่งกลางทั้งหมด */
  .footer-inner{grid-template-columns:1fr;text-align:center;gap:2rem}
  .foot-brand p{max-width:none;margin:0 auto}
  .foot-logo-wrap{justify-content:center}
  .foot-col a,.foot-col span{text-align:center}
  .seg{flex-wrap:wrap}
}

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.active {
  display: flex;
  opacity: 1;
}
/* กล่องแสดงรูป : รูปใหญ่ + ปุ่มเลื่อนซ้ายขวาในกรอบ + แถบรูปย่อยด้านล่าง */
.lb-content {
  position: relative;
  width: min(760px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.8);
}
.lb-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f7f9;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.lb-content img {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  object-fit: contain;
}
.lb-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 12px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}
.lb-caption #lb-counter {
  color: var(--muted);
  font-weight: 300;
  font-size: .9rem;
  white-space: nowrap;
}
.lb-close {
  position: absolute;
  top: -46px;
  right: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  z-index: 10000;
  line-height: 1;
}
.lb-prev, .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  color: #33454f;
  font-size: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}
.lb-prev:hover, .lb-next:hover {
  background: #fff;
  color: var(--blue);
}
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
/* แถบรูปย่อย */
.lb-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.lb-thumb {
  flex: 0 0 auto;
  width: 92px;
  height: 70px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f7f9;
  cursor: pointer;
  padding: 0;
  transition: .25s;
}
.lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: none;
}
.lb-thumb:hover { border-color: #b9d5e6; }
.lb-thumb.active { border-color: var(--blue); }
@media(max-width:600px){
  .lb-content { padding: 10px; width: 94vw; }
  .lb-content img { max-height: 52vh; }
  .lb-caption { font-size: .9rem; flex-wrap: wrap; gap: .3rem }
  .lb-thumb { width: 68px; height: 54px; }
  .lb-prev, .lb-next { width: 34px; height: 34px; font-size: 16px; }
}

/* ===== ABOUT REDESIGN ===== */
.about-flex {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 3rem;
}
.about-content {
  flex: 1;
}
.about-content .sec-lead {
  margin-bottom: 1.5rem;
}
.about-image {
  flex: 1;
}
.about-image img {
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--shadow);
  object-fit: cover;
}
.about-desc {
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.small-grid {
  gap: 1rem;
  margin-top: 2rem;
}
.small-grid .about-card {
  padding: 1.5rem 1rem;
}
.small-grid .ac-num {
  font-size: 1.8rem;
}

@media (max-width: 900px) {
  .about-flex {
    flex-direction: column;
  }
}

/* ===== SERVICES 3-CARDS ===== */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.svc-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  transition: .3s;
  display: flex;
  flex-direction: column;
}
.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(6, 90, 143, 0.15);
}
.svc-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.svc-card-body {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.svc-card-body h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--blue);
}
.svc-card-desc {
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.svc-card .svc-points {
  list-style: none;
  padding: 0;
  margin: auto 0 0 0;
}
.svc-card .svc-points li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  color: #33454f;
  font-weight: 300;
}
.svc-card .svc-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 800;
}
@media (max-width: 900px) {
  .svc-cards {
    grid-template-columns: 1fr;
  }
}


/* ===== FOOTER RESPONSIVE OVERRIDES ===== */
@media(max-width:980px){
  .footer-cta-inner{align-items:flex-start;flex-direction:column;gap:1.4rem}
  .footer-cta-actions{width:100%}
  .footer-inner{grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem}
  .foot-contact{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem 1.2rem}
  .foot-contact h5{grid-column:1/-1}
}
@media(max-width:700px){
  .footer-cta-inner{padding:34px 0}
  .footer-cta-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .footer-cta-btn{padding:0 12px;font-size:.88rem}
  .footer-inner{grid-template-columns:1fr 1fr;text-align:left;gap:2.2rem 1.4rem;padding:48px 0 36px}
  .foot-brand{grid-column:1/-1}
  .foot-logo-wrap{justify-content:flex-start}
  .foot-brand p{margin:0;max-width:520px}
  .foot-contact{grid-column:1/-1;grid-template-columns:1fr}
  .foot-col h5::after{left:0;transform:none}
  .foot-col a,.foot-col span{text-align:left}
  .foot-bottom{flex-direction:column;align-items:flex-start;padding-left:0;padding-right:0}
}
@media(max-width:420px){
  .footer-cta-actions{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .foot-brand,.foot-contact{grid-column:auto}
  .foot-brand-name strong{font-size:1.12rem}
  .foot-brand img{width:70px;height:70px}
}


/* =========================================================
   SOLAR FOOTER V3 — Energy Technology / Solar Engineering
   ========================================================= */
.solar-cta{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 12%,rgba(255,204,65,.20),transparent 18%),
    linear-gradient(115deg,#07334f 0%,#075875 46%,#0586a5 100%);
  color:#fff;
}
.solar-cta::after{
  content:"";position:absolute;right:-110px;top:-150px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,94,.26) 0%,rgba(255,214,94,.08) 38%,transparent 69%);
}
.solar-cta-grid{
  position:absolute;inset:auto -8% -90px 45%;height:250px;
  transform:skewX(-22deg) rotate(-4deg);
  background:
    repeating-linear-gradient(90deg,rgba(118,225,255,.10) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,rgba(118,225,255,.10) 0 1px,transparent 1px 48px);
  border:1px solid rgba(118,225,255,.08);
}
.solar-cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .8fr;align-items:center;gap:3rem;padding:54px 0}
.solar-cta-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;letter-spacing:.15em;font-weight:700;color:#8deaff}
.solar-cta-eyebrow svg{width:17px;height:17px;fill:none;stroke:#ffd95d;stroke-width:1.8}
.solar-cta h2{font-size:clamp(1.8rem,3.1vw,2.7rem);line-height:1.16;margin:.7rem 0 .8rem;color:#fff;font-weight:700}
.solar-cta h2 span{color:#99edff}
.solar-cta p{margin:0;max-width:760px;color:rgba(255,255,255,.78);line-height:1.75;font-weight:300}
.solar-cta-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.15rem}
.solar-cta-tags span{padding:.38rem .65rem;border:1px solid rgba(153,237,255,.26);border-radius:999px;background:rgba(2,27,45,.18);font-size:.68rem;letter-spacing:.08em;color:#bcefff}
.solar-cta-actions{display:grid;gap:.7rem}
.solar-action{min-height:68px;padding:.75rem .9rem;border-radius:16px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:.7rem;transition:.2s;border:1px solid rgba(255,255,255,.14)}
.solar-action:hover{transform:translateY(-2px)}
.solar-action-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.solar-action-icon svg{width:20px;height:20px}
.solar-action small{display:block;font-size:.72rem;font-weight:300;opacity:.72}.solar-action b{display:block;margin-top:.05rem;font-size:.96rem}
.solar-action-line{background:#1fc85d;color:#fff;box-shadow:0 14px 30px rgba(31,200,93,.18)}
.solar-action-line .solar-action-icon{background:rgba(255,255,255,.16)}.solar-action-line svg{fill:#fff}
.solar-action-phone{background:rgba(255,255,255,.96);color:#07354d;box-shadow:0 14px 30px rgba(0,0,0,.12)}
.solar-action-phone .solar-action-icon{background:#e8f8fc}.solar-action-phone svg{fill:none;stroke:#087fa4;stroke-width:2}

/* Footer */
.solar-footer{
  position:relative;overflow:hidden;color:#d8e8f2;
  background:
    radial-gradient(circle at 82% 16%,rgba(0,183,224,.13),transparent 24%),
    linear-gradient(145deg,#03131f 0%,#061d2b 48%,#062b3c 100%);
}
.solar-footer::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent 0%,#000 28%,#000 100%);pointer-events:none;
}
.solar-footer-glow{position:absolute;width:420px;height:420px;border-radius:50%;right:-210px;top:-180px;background:radial-gradient(circle,rgba(255,211,79,.15),rgba(0,171,214,.05) 45%,transparent 68%);pointer-events:none}
.solar-panel-art{position:absolute;right:-5%;bottom:20px;width:38%;height:240px;opacity:.12;transform:perspective(600px) rotateX(58deg) rotateZ(-8deg);transform-origin:bottom right;border:1px solid #52d7ff;background:linear-gradient(135deg,rgba(9,126,170,.45),rgba(12,58,91,.2));pointer-events:none}
.panel-lines{width:100%;height:100%;background:repeating-linear-gradient(90deg,#62d8f8 0 1px,transparent 1px 62px),repeating-linear-gradient(0deg,#62d8f8 0 1px,transparent 1px 50px)}
.solar-footer-main{position:relative;z-index:2;display:grid;grid-template-columns:1.45fr .72fr .72fr 1.2fr;gap:3rem;padding:68px 0 52px}
.solar-brand{min-width:0}
.solar-logo{display:block;width:240px;margin:0 0 1rem}
.solar-logo img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.24))}
.solar-brand-copy{margin-bottom:.85rem}
.solar-brand-th{margin:0;color:#fff;font-weight:600;font-size:.95rem}
.solar-brand-en{margin:.15rem 0 0;color:#6bdcff;font-size:.72rem;letter-spacing:.11em}
.solar-brand-desc{max-width:460px;margin:.85rem 0 0;color:rgba(216,232,242,.73);font-size:.9rem;line-height:1.8;font-weight:300}
.solar-capabilities{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.solar-capabilities span{display:inline-flex;align-items:center;gap:.42rem;padding:.38rem .65rem;border-radius:999px;border:1px solid rgba(105,220,255,.14);background:rgba(26,152,190,.08);font-size:.7rem;letter-spacing:.04em;color:#9edff0}
.solar-capabilities i{width:6px;height:6px;border-radius:50%;background:#ffd95d;box-shadow:0 0 0 4px rgba(255,217,93,.08)}
.solar-social{display:flex;gap:.55rem;margin-top:1.2rem}
.solar-social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#d7edf5;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);transition:.2s}
.solar-social a:hover{color:#fff;background:#078cae;border-color:#21c8ee;transform:translateY(-2px)}
.solar-social svg{width:17px;height:17px;fill:currentColor}
.solar-footer-col h5{margin:.2rem 0 1.15rem;color:#fff;font-size:.95rem;font-weight:650}
.solar-footer-col h5::after{content:"";display:block;width:34px;height:2px;margin-top:.65rem;background:linear-gradient(90deg,#26ccee,#ffd95d);border-radius:2px}
.solar-footer-col a{display:flex;align-items:center;gap:.55rem;padding:.42rem 0;color:rgba(216,232,242,.68);font-size:.87rem;font-weight:300;transition:.2s}
.solar-footer-col a span{font-size:.65rem;color:#39c9ea;letter-spacing:.06em}
.solar-footer-col a:hover{color:#fff;transform:translateX(3px)}
.solar-contact-card{position:relative;padding:1.15rem;border-radius:20px;background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(120,218,244,.13);box-shadow:0 22px 50px rgba(0,0,0,.13);backdrop-filter:blur(6px)}
.solar-contact-head{display:flex;align-items:center;gap:.65rem;padding-bottom:.75rem;margin-bottom:.25rem;border-bottom:1px solid rgba(255,255,255,.07)}
.solar-contact-head small{font-size:.6rem;letter-spacing:.14em;color:#5ed8f3}.solar-contact-head h5{margin:.1rem 0 0;color:#fff;font-size:1rem}
.live-dot{width:10px;height:10px;border-radius:50%;background:#ffd95d;box-shadow:0 0 0 6px rgba(255,217,93,.08),0 0 16px rgba(255,217,93,.55)}
.solar-contact-item{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:.65rem;padding:.62rem 0;color:#fff;border-bottom:1px solid rgba(255,255,255,.055)}
.contact-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(41,196,232,.09);border:1px solid rgba(41,196,232,.1)}
.contact-icon svg{width:15px;height:15px;fill:none;stroke:#6de1f7;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.solar-contact-item small{display:block;color:rgba(216,232,242,.5);font-size:.66rem}.solar-contact-item b{display:block;margin-top:.03rem;color:#eefaff;font-size:.79rem;line-height:1.35;font-weight:500;overflow-wrap:anywhere}
.solar-contact-meta{display:flex;flex-wrap:wrap;gap:.4rem;padding:.72rem 0}
.solar-contact-meta span{font-size:.65rem;color:#8db5c6;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);padding:.3rem .45rem;border-radius:7px}
.solar-line-button{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:11px;background:#1fc85d;color:#fff;font-size:.79rem;font-weight:600;box-shadow:0 10px 20px rgba(31,200,93,.15);transition:.2s}
.solar-line-button:hover{background:#1bb552;transform:translateY(-1px)}
.solar-footer-bottom{position:relative;z-index:2;min-height:68px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:1rem;color:rgba(190,216,226,.5);font-size:.72rem;letter-spacing:.02em}
.solar-footer-bottom>div{display:flex;align-items:center;gap:.55rem}.solar-footer-bottom a{color:rgba(190,216,226,.6)}.solar-footer-bottom a:hover{color:#fff}

/* Hide old footer styles if cached markup is absent */
.site-footer,.footer-cta{}

/* responsive */
@media (max-width:1100px){
  .solar-footer-main{grid-template-columns:1.3fr .8fr .8fr;gap:2.3rem}
  .solar-contact-card{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0 .9rem}
  .solar-contact-head,.solar-contact-meta,.solar-line-button{grid-column:1/-1}
}
@media (max-width:800px){
  .solar-cta-inner{grid-template-columns:1fr;gap:1.45rem;padding:42px 0}
  .solar-cta-actions{grid-template-columns:1fr 1fr}
  .solar-footer-main{grid-template-columns:1fr 1fr;gap:2rem 1.4rem;padding:50px 0 38px}
  .solar-brand{grid-column:1/-1}
  .solar-logo{width:210px}
  .solar-contact-card{grid-column:1/-1;display:block}
  .solar-panel-art{width:70%;right:-25%;opacity:.08}
}
@media (max-width:540px){
  .solar-cta h2 br{display:none}
  .solar-cta-actions{grid-template-columns:1fr}
  .solar-footer-main{grid-template-columns:1fr}
  .solar-brand{grid-column:auto}
  .solar-logo{width:195px}
  .solar-footer-col{padding-top:.2rem}
  .solar-footer-bottom{padding:18px 0;min-height:auto;flex-direction:column;align-items:flex-start}
}

/* ===== Contact V4 + Compact Footer ===== */
.company-contact-v4{padding:68px 0;background:linear-gradient(145deg,#f4fbfe,#eaf7fc)}
.contact-v4-head{max-width:760px;margin-bottom:28px}
.contact-v4-head>span{display:block;color:#0791b7;font-size:.68rem;font-weight:750;letter-spacing:.16em;margin-bottom:5px}
.contact-v4-head h2{margin:0;color:#063f60;font-size:clamp(1.75rem,3vw,2.25rem)}
.contact-v4-head p{margin:8px 0 0;color:#607b8b;line-height:1.7}
.contact-v4-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:24px;align-items:stretch}
.contact-v4-info,.contact-v4-map{background:#fff;border:1px solid rgba(4,92,126,.09);border-radius:22px;box-shadow:0 18px 42px rgba(20,93,124,.08);overflow:hidden}
.contact-v4-info{padding:24px}
.contact-v4-company{display:flex;align-items:center;gap:14px;padding-bottom:17px;border-bottom:1px solid #e8f0f4}
.contact-v4-company img{width:74px;height:74px;object-fit:contain;padding:6px;border-radius:14px;background:#061c2b}
.contact-v4-company h3{margin:0;color:#073e5c;font-size:1rem}.contact-v4-company small{display:block;margin-top:3px;color:#2099b8;font-size:.67rem;letter-spacing:.07em}
.contact-v4-list{padding-top:7px}
.contact-v4-list>a{display:grid;grid-template-columns:40px 1fr;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid #edf3f6;color:#123f55}
.contact-v4-list>a:last-child{border-bottom:0}
.contact-v4-list i{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:.68rem;font-weight:700}
.v4-phone{background:#fff0f1;color:#e84f5c}.v4-line{background:#e7f9ec;color:#18a74c;font-size:.5rem!important}.v4-mail{background:#e9f8fd;color:#078cb1}.v4-map{background:#edf4ff;color:#3479ca}
.contact-v4-list small{display:block;color:#899ca7;font-size:.65rem}.contact-v4-list b{display:block;margin-top:1px;font-size:.82rem;font-weight:550;line-height:1.4;overflow-wrap:anywhere}
.contact-v4-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.contact-v4-meta>div{padding:9px 11px;border-radius:10px;background:#f3f9fb;border:1px solid #e5f1f5}
.contact-v4-meta small{display:block;color:#8299a5;font-size:.61rem}.contact-v4-meta b{display:block;margin-top:2px;color:#174d65;font-size:.71rem}
.contact-v4-social{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.contact-v4-social a{padding:6px 10px;border-radius:8px;background:#073f5d;color:#fff;font-size:.68rem}
.contact-v4-social a:hover{background:#078caf}
.contact-v4-map{display:flex;flex-direction:column}
.contact-v4-map iframe{width:100%;min-height:365px;flex:1;border:0;display:block}
.contact-v4-mapbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px}
.contact-v4-mapbar small{display:block;color:#1593b5;font-size:.59rem;letter-spacing:.07em}.contact-v4-mapbar b{display:block;margin-top:2px;color:#174b62;font-size:.77rem}
.contact-v4-mapbar>a{flex:none;padding:10px 12px;border-radius:9px;background:#208f1c;color:#fff;font-size:.7rem;font-weight:650}

/* Footer is now summary only */
.solar-footer-main{grid-template-columns:1.5fr .8fr .8fr!important;gap:3rem!important;padding:34px 0 24px!important}
.solar-logo{width:175px!important;margin-bottom:.45rem!important}
.solar-brand-copy{margin-bottom:.55rem!important}
.solar-brand-desc{max-width:420px!important;font-size:.78rem!important;line-height:1.55!important;margin-top:.5rem!important}
.solar-capabilities{margin-top:.65rem!important}.solar-social{margin-top:.7rem!important}
.solar-footer-col h5{margin-bottom:.75rem!important}.solar-footer-col a{padding:.3rem 0!important;font-size:.8rem!important}
.solar-footer-bottom{min-height:48px!important}
.solar-panel-art{height:145px!important;bottom:-20px!important}
@media(max-width:800px){
 .company-contact-v4{padding:50px 0}.contact-v4-grid{grid-template-columns:1fr}.contact-v4-map iframe{min-height:300px}
 .solar-footer-main{grid-template-columns:1fr 1fr!important;gap:1.5rem!important;padding:30px 0 22px!important}.solar-brand{grid-column:1/-1}
}
@media(max-width:540px){
 .contact-v4-info{padding:17px}.contact-v4-company{align-items:flex-start}.contact-v4-company img{width:60px;height:60px}
 .contact-v4-meta{grid-template-columns:1fr}.contact-v4-mapbar{align-items:flex-start;flex-direction:column}.contact-v4-mapbar>a{width:100%;text-align:center}
 .solar-footer-main{grid-template-columns:1fr!important}.solar-brand{grid-column:auto}.solar-logo{width:160px!important}
}


/* =========================================================
   HEADER V5 — larger logo + phone / LINE + sticky
   ========================================================= */
.site-header-v5{
  position:fixed !important;
  top:0;left:0;right:0;
  z-index:1000;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(7,80,116,.08);
  box-shadow:0 5px 22px rgba(4,56,82,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transform:none !important;
}
.site-header-v5.scrolled{
  background:rgba(255,255,255,.985) !important;
  box-shadow:0 10px 32px rgba(3,50,74,.11) !important;
}
.header-inner-v5{
  min-height:88px;
  padding:7px 0 !important;
  display:flex;
  align-items:center;
  gap:24px;
}
.brand-v5{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  margin-right:18px;
}
.brand-logo-v5{
  width:155px !important;
  height:72px !important;
  object-fit:contain !important;
  display:block;
}
.main-nav-v5{
  margin-left:auto !important;
  display:flex;
  align-items:center;
  gap:27px !important;
}
.main-nav-v5 a{
  color:#102b3b !important;
  font-size:.96rem !important;
  font-weight:500 !important;
  white-space:nowrap;
}
.main-nav-v5 a::after{
  height:2px !important;
  background:linear-gradient(90deg,#087fba,#17b9dc) !important;
}
.header-actions-v5{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:8px;
}
.header-phone-v5,
.header-line-v5{
  min-height:48px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 16px;
  font-weight:650;
  font-size:.92rem;
  transition:.2s ease;
  white-space:nowrap;
}
.header-phone-v5{
  color:#fff;
  background:linear-gradient(135deg,#063f78,#075d99);
  box-shadow:0 9px 20px rgba(4,69,119,.18);
}
.header-phone-v5:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(4,69,119,.24);
}
.ha-icon{
  width:23px;height:23px;
  display:grid;place-items:center;
}
.ha-icon svg{
  width:19px;height:19px;
  fill:none;stroke:#fff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.header-line-v5{
  color:#fff;
  background:linear-gradient(135deg,#13ad3e,#09c653);
  box-shadow:0 9px 20px rgba(15,177,70,.17);
  padding:0 17px;
}
.header-line-v5:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(15,177,70,.24);
}
.ha-line-badge{
  width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:#0ead43;
  font-size:.5rem;font-weight:800;letter-spacing:-.02em;
}
.nav-toggle-v5{margin-left:auto}

/* Prevent content from tucking behind the fixed header */
body{padding-top:88px}
.hero{min-height:calc(100vh - 88px)}
.hero-content{padding-top:70px !important}

/* desktop tuning */
@media (max-width:1180px){
  .brand-logo-v5{width:138px !important}
  .main-nav-v5{gap:19px !important}
  .main-nav-v5 a{font-size:.89rem !important}
  .header-phone-v5,.header-line-v5{padding:0 12px;font-size:.84rem}
}
@media (max-width:1020px){
  .header-inner-v5{min-height:78px}
  body{padding-top:78px}
  .hero{min-height:calc(100vh - 78px)}
  .brand-logo-v5{width:128px !important;height:62px !important}
  .header-actions-v5{margin-left:auto}
  .header-phone-v5{min-height:44px}
  .header-line-v5{min-height:44px}
  .nav-toggle-v5{display:flex !important}
  .main-nav-v5{
    position:fixed !important;
    top:86px !important;
    left:4% !important;right:4% !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:3px !important;
    padding:12px !important;
    background:#fff !important;
    border:1px solid rgba(7,80,116,.10);
    border-radius:16px;
    box-shadow:0 18px 40px rgba(4,53,77,.16);
    display:none !important;
  }
  .main-nav-v5.open{display:flex !important}
  .main-nav-v5 a{padding:11px 12px !important;border-radius:10px}
  .main-nav-v5 a:hover{background:#eef9fd}
}
@media (max-width:760px){
  .header-inner-v5{min-height:70px;padding:5px 0 !important;gap:8px}
  body{padding-top:70px}
  .hero{min-height:calc(100vh - 70px)}
  .brand-v5{margin-right:0}
  .brand-logo-v5{width:108px !important;height:54px !important}
  .header-actions-v5{gap:6px}
  .header-phone-v5{width:42px;min-width:42px;height:42px;min-height:42px;padding:0;border-radius:11px}
  .header-phone-v5>span:last-child{display:none}
  .header-line-v5{height:42px;min-height:42px;padding:0 10px;border-radius:11px;font-size:.78rem}
  .ha-line-badge{width:26px;height:26px;font-size:.42rem}
  .main-nav-v5{top:76px !important}
}
@media (max-width:430px){
  .brand-logo-v5{width:96px !important}
  .header-line-v5>span:last-child{display:none}
  .header-line-v5{width:42px;padding:0}
  .ha-line-badge{width:28px;height:28px}
}


/* =========================================================
   CONTACT V5 — refined clean corporate / solar
   ========================================================= */
.contact-v5{
  padding:72px 0 76px;
  background:
    radial-gradient(circle at 88% 12%,rgba(0,167,213,.07),transparent 28%),
    linear-gradient(145deg,#f7fcfe 0%,#edf8fc 100%);
}
.contact-v5-head{max-width:760px;margin-bottom:30px}
.contact-v5-head>span{
  display:block;margin-bottom:6px;
  color:#048fba;font-size:.68rem;font-weight:800;letter-spacing:.16em
}
.contact-v5-head h2{margin:0;color:#073f5f;font-size:clamp(1.8rem,3vw,2.35rem);line-height:1.15}
.contact-v5-head p{margin:9px 0 0;color:#617e8f;line-height:1.75;max-width:720px}
.contact-v5-grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:26px;align-items:stretch}
.contact-v5-card,.contact-v5-map-card{
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(7,80,116,.08);
  box-shadow:0 20px 48px rgba(12,83,116,.09);
  overflow:hidden
}
.contact-v5-card{padding:27px 28px 23px}
.contact-v5-company{display:flex;align-items:center;gap:18px}
.contact-v5-logo{
  width:112px;height:74px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:#fff;
}
.contact-v5-logo img{width:100%;height:100%;object-fit:contain;display:block}
.contact-v5-company-name h3{margin:0;color:#073f5f;font-size:1.03rem;font-weight:700}
.contact-v5-company-name span{display:block;margin-top:4px;color:#1f9abc;font-size:.68rem;letter-spacing:.08em}
.contact-v5-divider{
  height:2px;margin:20px 0 6px;border-radius:2px;
  background:linear-gradient(90deg,#0aa4cf 0%,#175dc5 26%,#e8f1f5 26%,#e8f1f5 100%)
}
.contact-v5-list{padding-top:2px}
.contact-v5-row{
  display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid #edf3f6;color:#113f55
}
.contact-v5-row:last-child{border-bottom:0}
.v5-icon{
  width:39px;height:39px;border-radius:11px;display:grid;place-items:center;
  background:#edf8fc;color:#0789af
}
.v5-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.v5-icon.phone{background:#eef5ff;color:#186aca}
.v5-icon.line{background:#e8f9ed;color:#16a64b;font-size:.52rem;font-weight:800}
.v5-icon.mail{background:#edf9fd;color:#078eb3}
.v5-icon.map{background:#f0f4ff;color:#446fd0}
.contact-v5-row small{display:block;color:#8aa0ad;font-size:.65rem}
.contact-v5-row b{display:block;margin-top:2px;color:#113f55;font-size:.82rem;line-height:1.45;font-weight:600;overflow-wrap:anywhere}
.contact-v5-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.contact-v5-meta>div{
  padding:11px 13px;border-radius:12px;background:#f5fafc;border:1px solid #e6f0f4
}
.meta-label{display:block;color:#8aa0ad;font-size:.61rem}
.contact-v5-meta strong{display:block;margin-top:3px;color:#174e66;font-size:.72rem;font-weight:600}
.contact-v5-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.contact-v5-social a{
  display:inline-flex;align-items:center;gap:7px;
  color:#315568;font-size:.69rem;font-weight:600
}
.social-dot{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:.7rem;font-weight:800
}
.social-dot.fb{background:#1877f2}.social-dot.yt{background:#f20d19}.social-dot.web{background:#078eb3}
.contact-v5-social a:hover{color:#0584aa}

.contact-v5-map-card{display:flex;flex-direction:column}
.contact-v5-map-header{
  display:flex;align-items:flex-start;gap:12px;padding:18px 19px 15px;
  border-bottom:1px solid #eaf1f4
}
.map-pin-v5{
  flex:0 0 38px;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;background:#eaf4ff;color:#176cc8
}
.map-pin-v5 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9}
.contact-v5-map-header h3{margin:0;color:#0b425e;font-size:.87rem}
.contact-v5-map-header p{margin:4px 0 0;color:#7b939f;font-size:.7rem;line-height:1.5}
.contact-v5-map{flex:1;min-height:330px;background:#dcecf3}
.contact-v5-map iframe{width:100%;height:100%;min-height:330px;border:0;display:block}
.contact-v5-map-footer{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px 16px
}
.contact-v5-map-footer small{display:block;color:#2399b7;font-size:.57rem;letter-spacing:.08em}
.contact-v5-map-footer b{display:block;margin-top:2px;color:#244f63;font-size:.73rem}
.contact-v5-map-footer a{
  flex:none;padding:10px 13px;border-radius:10px;background:#1f941f;color:#fff;
  font-size:.7rem;font-weight:650;box-shadow:0 8px 18px rgba(31,148,31,.15)
}
.contact-v5-map-footer a:hover{background:#197e1a}

@media(max-width:820px){
  .contact-v5{padding:54px 0}
  .contact-v5-grid{grid-template-columns:1fr}
  .contact-v5-map{min-height:300px}.contact-v5-map iframe{min-height:300px}
}
@media(max-width:540px){
  .contact-v5-card{padding:19px}
  .contact-v5-company{align-items:flex-start}
  .contact-v5-logo{width:92px;height:62px}
  .contact-v5-meta{grid-template-columns:1fr}
  .contact-v5-map-footer{align-items:flex-start;flex-direction:column}
  .contact-v5-map-footer a{width:100%;text-align:center}
}


/* =========================================================
   CONTACT V6 — vivid version matching approved visual
   ========================================================= */
.contact-v5{
  background:
    radial-gradient(circle at 92% 8%,rgba(39,183,255,.12),transparent 30%),
    linear-gradient(145deg,#f8fdff 0%,#eaf7ff 100%) !important;
}
.contact-v5-head>span{color:#007bd9 !important;font-weight:850 !important}
.contact-v5-head h2{color:#032f55 !important;font-weight:800 !important}
.contact-v5-head p{color:#486b84 !important}

.contact-v5-card,.contact-v5-map-card{
  border:1px solid rgba(0,104,190,.10) !important;
  box-shadow:0 22px 55px rgba(18,91,139,.14) !important;
}
.contact-v5-company-name h3{color:#07385f !important;font-weight:800 !important}
.contact-v5-company-name span{color:#0b8fe5 !important;font-weight:500 !important}
.contact-v5-divider{
  background:linear-gradient(90deg,#0869ee 0%,#0869ee 26%,#dbe9f2 26%,#dbe9f2 100%) !important;
}

/* vivid circular icons */
.v5-icon{
  width:42px !important;height:42px !important;border-radius:50% !important;
  box-shadow:0 5px 13px rgba(13,92,176,.15);
}
.v5-icon.phone{
  color:#fff !important;background:linear-gradient(145deg,#0875f5,#0759cf) !important;
}
.v5-icon.line{
  color:#fff !important;background:linear-gradient(145deg,#16b849,#079c36) !important;
  font-size:.5rem !important;
}
.v5-icon.mail{
  color:#fff !important;background:linear-gradient(145deg,#0875f5,#0759cf) !important;
}
.v5-icon.map{
  color:#fff !important;background:linear-gradient(145deg,#0875f5,#0759cf) !important;
}
.contact-v5-row small{color:#6e879a !important;font-size:.68rem !important}
.contact-v5-row b{color:#062f54 !important;font-size:.88rem !important;font-weight:700 !important}

.contact-v5-meta>div{
  background:linear-gradient(145deg,#f1f8ff,#eaf4fb) !important;
  border:1px solid #d7e8f4 !important;
}
.meta-label{color:#6d8799 !important}
.contact-v5-meta strong{color:#062f54 !important;font-size:.76rem !important;font-weight:700 !important}

.contact-v5-social{gap:18px !important;margin-top:19px !important}
.contact-v5-social a{
  gap:9px !important;color:#07385d !important;font-size:.76rem !important;font-weight:700 !important
}
.social-dot{
  width:34px !important;height:34px !important;
  box-shadow:0 6px 14px rgba(10,83,155,.16)
}
.social-dot.fb{background:#096df0 !important}
.social-dot.yt{background:#e90012 !important}
.social-dot.web{background:#0874e7 !important}

/* map header vivid */
.map-pin-v5{
  width:42px !important;height:42px !important;flex-basis:42px !important;
  border-radius:50% !important;
  color:#fff !important;
  background:linear-gradient(145deg,#0875f5,#0759cf) !important;
  box-shadow:0 6px 15px rgba(10,96,201,.18)
}
.contact-v5-map-header h3{color:#07385d !important;font-size:.92rem !important;font-weight:800 !important}
.contact-v5-map-header p{color:#617f92 !important}
.contact-v5-map-footer small{color:#078ed0 !important;font-weight:700 !important}
.contact-v5-map-footer b{color:#07385d !important;font-weight:650 !important}
.contact-v5-map-footer a{
  background:linear-gradient(135deg,#16a52c,#0b8d1c) !important;
  min-width:165px !important;
  padding:11px 15px !important;
  box-shadow:0 9px 20px rgba(16,145,35,.22) !important;
}
.contact-v5-map-footer a:hover{background:linear-gradient(135deg,#118d24,#087a17) !important}

/* Header buttons: stronger like approved visual */
.header-phone-v5{
  background:linear-gradient(135deg,#0759d8,#0647a9) !important;
  box-shadow:0 9px 22px rgba(4,74,180,.22) !important;
}
.header-line-v5{
  background:linear-gradient(135deg,#12b73d,#08a631) !important;
  box-shadow:0 9px 22px rgba(10,164,52,.22) !important;
}


/* =========================================================
   HEADER V8 — larger logo + equal phone/LINE buttons
   ========================================================= */
.header-inner-v5{
  min-height:96px !important;
  padding:6px 0 !important;
}
.brand-v5{
  margin-right:24px !important;
}
.brand-logo-v5{
  width:190px !important;
  height:82px !important;
  object-fit:contain !important;
}
.header-actions-v5{
  gap:10px !important;
}
.header-phone-v5,
.header-line-v5{
  width:178px !important;
  min-width:178px !important;
  height:50px !important;
  min-height:50px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  font-size:.88rem !important;
  font-weight:700 !important;
}
.header-line-v5{
  gap:8px !important;
}
.ha-line-badge{
  width:29px !important;
  height:29px !important;
  flex:0 0 29px !important;
}
body{padding-top:96px !important}
.hero{min-height:calc(100vh - 96px) !important}

@media (max-width:1180px){
  .brand-logo-v5{
    width:168px !important;
    height:74px !important;
  }
  .header-phone-v5,
  .header-line-v5{
    width:160px !important;
    min-width:160px !important;
    font-size:.82rem !important;
  }
}
@media (max-width:1020px){
  .header-inner-v5{min-height:82px !important}
  body{padding-top:82px !important}
  .hero{min-height:calc(100vh - 82px) !important}
  .brand-logo-v5{
    width:145px !important;
    height:66px !important;
  }
  .header-phone-v5,
  .header-line-v5{
    width:auto !important;
    min-width:0 !important;
  }
}
@media (max-width:760px){
  .header-inner-v5{min-height:72px !important}
  body{padding-top:72px !important}
  .hero{min-height:calc(100vh - 72px) !important}
  .brand-logo-v5{
    width:116px !important;
    height:56px !important;
  }
  .header-phone-v5{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
  }
  .header-line-v5{
    width:118px !important;
    min-width:118px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 9px !important;
    font-size:.72rem !important;
  }
}
@media (max-width:430px){
  .brand-logo-v5{
    width:102px !important;
    height:52px !important;
  }
  .header-line-v5{
    width:42px !important;
    min-width:42px !important;
    padding:0 !important;
  }
  .header-line-v5>span:last-child{display:none !important}
}


/* =========================================================
   HEADER V9 FINAL FIX — cropped logo + equal CTA buttons
   ========================================================= */
.site-header-v5 .header-inner-v5{
  min-height:96px !important;
  padding:6px 0 !important;
}
.site-header-v5 .brand-v5{
  flex:0 0 220px !important;
  width:220px !important;
  margin-right:20px !important;
}
.site-header-v5 .brand-logo-v5{
  display:block !important;
  width:210px !important;
  height:78px !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.site-header-v5 .header-actions-v5{
  display:grid !important;
  grid-template-columns:178px 178px !important;
  gap:10px !important;
  align-items:center !important;
}
.site-header-v5 .header-phone-v5,
.site-header-v5 .header-line-v5{
  width:178px !important;
  min-width:178px !important;
  max-width:178px !important;
  height:50px !important;
  min-height:50px !important;
  padding:0 13px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  box-sizing:border-box !important;
  border-radius:14px !important;
  font-size:.86rem !important;
  font-weight:750 !important;
  line-height:1 !important;
}
.site-header-v5 .header-line-v5{
  white-space:nowrap !important;
}
.site-header-v5 .ha-line-badge{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  flex:0 0 28px !important;
  font-size:.44rem !important;
}
.site-header-v5 .ha-icon{
  width:25px !important;
  height:25px !important;
  flex:0 0 25px !important;
}
body{padding-top:96px !important}

@media(max-width:1180px){
  .site-header-v5 .brand-v5{flex-basis:185px !important;width:185px !important}
  .site-header-v5 .brand-logo-v5{width:178px !important;height:72px !important}
  .site-header-v5 .header-actions-v5{grid-template-columns:158px 158px !important}
  .site-header-v5 .header-phone-v5,
  .site-header-v5 .header-line-v5{
    width:158px !important;min-width:158px !important;max-width:158px !important;
    font-size:.79rem !important;
  }
}
@media(max-width:1020px){
  .site-header-v5 .brand-v5{flex-basis:150px !important;width:150px !important}
  .site-header-v5 .brand-logo-v5{width:145px !important;height:64px !important}
  .site-header-v5 .header-actions-v5{
    display:flex !important;
    grid-template-columns:none !important;
    margin-left:auto !important;
  }
  .site-header-v5 .header-phone-v5,
  .site-header-v5 .header-line-v5{
    width:auto !important;min-width:0 !important;max-width:none !important;
  }
}
@media(max-width:760px){
  .site-header-v5 .brand-v5{flex-basis:118px !important;width:118px !important}
  .site-header-v5 .brand-logo-v5{width:114px !important;height:55px !important}
  .site-header-v5 .header-phone-v5{
    width:42px !important;min-width:42px !important;max-width:42px !important;
  }
  .site-header-v5 .header-line-v5{
    width:120px !important;min-width:120px !important;max-width:120px !important;
    font-size:.70rem !important;
  }
}
@media(max-width:430px){
  .site-header-v5 .brand-v5{flex-basis:104px !important;width:104px !important}
  .site-header-v5 .brand-logo-v5{width:100px !important;height:50px !important}
  .site-header-v5 .header-line-v5{
    width:42px !important;min-width:42px !important;max-width:42px !important;
  }
  .site-header-v5 .header-line-v5>span:last-child{display:none !important}
}


/* =========================================================
   HEADER V10 — ACTUAL FINAL FIX
   full cropped logo / equal CTA widths / correct LINE text
   ========================================================= */
.site-header-v5 .header-inner-v5{
  min-height:96px !important;
  height:96px !important;
  padding:5px 0 !important;
}
.site-header-v5 .brand-v5{
  flex:0 0 205px !important;
  width:205px !important;
  height:82px !important;
  margin-right:20px !important;
  display:flex !important;
  align-items:center !important;
}
.site-header-v5 .brand-logo-v5{
  display:block !important;
  width:195px !important;
  height:76px !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.site-header-v5 .header-actions-v5{
  display:grid !important;
  grid-template-columns:176px 176px !important;
  gap:10px !important;
  margin-left:10px !important;
}
.site-header-v5 .header-phone-v5,
.site-header-v5 .header-line-v5{
  width:176px !important;
  min-width:176px !important;
  max-width:176px !important;
  height:50px !important;
  min-height:50px !important;
  padding:0 13px !important;
  box-sizing:border-box !important;
  justify-content:center !important;
  border-radius:14px !important;
  font-size:.84rem !important;
  font-weight:750 !important;
  white-space:nowrap !important;
}
.site-header-v5 .header-phone-v5{gap:9px !important}
.site-header-v5 .header-line-v5{gap:8px !important}
.site-header-v5 .ha-line-badge{
  width:28px !important;height:28px !important;
  min-width:28px !important;flex:0 0 28px !important;
  font-size:.43rem !important;
}
body{padding-top:96px !important}

@media(max-width:1180px){
  .site-header-v5 .brand-v5{flex-basis:178px !important;width:178px !important}
  .site-header-v5 .brand-logo-v5{width:170px !important;height:68px !important}
  .site-header-v5 .header-actions-v5{grid-template-columns:156px 156px !important}
  .site-header-v5 .header-phone-v5,
  .site-header-v5 .header-line-v5{
    width:156px !important;min-width:156px !important;max-width:156px !important;
    font-size:.77rem !important;
  }
}
@media(max-width:1020px){
  .site-header-v5 .header-inner-v5{height:82px !important;min-height:82px !important}
  body{padding-top:82px !important}
  .site-header-v5 .brand-v5{flex-basis:145px !important;width:145px !important;height:68px !important}
  .site-header-v5 .brand-logo-v5{width:138px !important;height:62px !important}
  .site-header-v5 .header-actions-v5{display:flex !important;grid-template-columns:none !important;margin-left:auto !important}
  .site-header-v5 .header-phone-v5,
  .site-header-v5 .header-line-v5{width:auto !important;min-width:0 !important;max-width:none !important}
}
@media(max-width:760px){
  .site-header-v5 .header-inner-v5{height:72px !important;min-height:72px !important}
  body{padding-top:72px !important}
  .site-header-v5 .brand-v5{flex-basis:118px !important;width:118px !important;height:58px !important}
  .site-header-v5 .brand-logo-v5{width:112px !important;height:54px !important}
  .site-header-v5 .header-phone-v5{width:42px !important;min-width:42px !important;max-width:42px !important;height:42px !important}
  .site-header-v5 .header-line-v5{width:120px !important;min-width:120px !important;max-width:120px !important;height:42px !important;font-size:.68rem !important}
}
@media(max-width:430px){
  .site-header-v5 .brand-v5{flex-basis:104px !important;width:104px !important}
  .site-header-v5 .brand-logo-v5{width:100px !important;height:50px !important}
  .site-header-v5 .header-line-v5{width:42px !important;min-width:42px !important;max-width:42px !important;padding:0 !important}
  .site-header-v5 .header-line-v5>span:last-child{display:none !important}
}


/* HEADER V11 — visibly larger company logo */
.site-header-v5 .brand-v5{
  flex:0 0 250px !important;
  width:250px !important;
  height:86px !important;
  overflow:visible !important;
  margin-right:14px !important;
}
.site-header-v5 .brand-logo-v5{
  width:240px !important;
  height:82px !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  transform:none !important;
}
@media(max-width:1180px){
  .site-header-v5 .brand-v5{flex-basis:210px !important;width:210px !important}
  .site-header-v5 .brand-logo-v5{width:202px !important;height:76px !important}
}
@media(max-width:1020px){
  .site-header-v5 .brand-v5{flex-basis:160px !important;width:160px !important;height:68px !important}
  .site-header-v5 .brand-logo-v5{width:154px !important;height:64px !important}
}
@media(max-width:760px){
  .site-header-v5 .brand-v5{flex-basis:126px !important;width:126px !important}
  .site-header-v5 .brand-logo-v5{width:120px !important;height:56px !important}
}


/* =========================================================
   HEADER V12 — force actual painted logo larger
   The source logo is nearly square with a small lockup inside,
   so width alone did not enlarge the visible artwork enough.
   ========================================================= */
.site-header-v5 .header-inner-v5{
  overflow:visible !important;
}
.site-header-v5 .brand-v5{
  position:relative !important;
  flex:0 0 245px !important;
  width:245px !important;
  height:90px !important;
  overflow:visible !important;
  margin-right:18px !important;
}
.site-header-v5 .brand-logo-v5{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:205px !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  transform:translateY(-50%) scale(1.55) !important;
  transform-origin:left center !important;
  object-fit:contain !important;
  z-index:2 !important;
}
@media(max-width:1180px){
  .site-header-v5 .brand-v5{flex-basis:220px !important;width:220px !important}
  .site-header-v5 .brand-logo-v5{
    width:185px !important;
    transform:translateY(-50%) scale(1.45) !important;
  }
}
@media(max-width:1020px){
  .site-header-v5 .brand-v5{flex-basis:165px !important;width:165px !important;height:72px !important}
  .site-header-v5 .brand-logo-v5{
    width:142px !important;
    transform:translateY(-50%) scale(1.30) !important;
  }
}
@media(max-width:760px){
  .site-header-v5 .brand-v5{flex-basis:126px !important;width:126px !important;height:60px !important}
  .site-header-v5 .brand-logo-v5{
    width:108px !important;
    transform:translateY(-50%) scale(1.20) !important;
  }
}


/* =========================================================
   HEADER V13 — horizontal company lockup (FINAL STRUCTURE)
   N symbol + company name text, no oversized square artwork
   ========================================================= */
.site-header-v5 .header-inner-v5{
  height:90px !important;
  min-height:90px !important;
  padding:4px 0 !important;
  overflow:visible !important;
}

.site-header-v5 .brand-v5{
  position:static !important;
  flex:0 0 auto !important;
  width:auto !important;
  height:auto !important;
  min-width:235px !important;
  margin-right:26px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  overflow:visible !important;
  transform:none !important;
}

.site-header-v5 .brand-v5 .brand-logo-v5{
  display:none !important;
}

.site-header-v5 .header-n-symbol{
  position:static !important;
  display:block !important;
  width:72px !important;
  height:72px !important;
  max-width:none !important;
  object-fit:contain !important;
  transform:none !important;
  flex:0 0 72px !important;
}

.site-header-v5 .header-brand-text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.site-header-v5 .header-brand-text strong{
  display:block !important;
  color:#09253a !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:1.42rem !important;
  font-weight:800 !important;
  letter-spacing:.13em !important;
  line-height:1.05 !important;
}

.site-header-v5 .header-brand-text small{
  display:block !important;
  margin-top:5px !important;
  color:#1c5b8d !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:.59rem !important;
  font-weight:650 !important;
  letter-spacing:.12em !important;
  line-height:1 !important;
}

/* CTA buttons remain equal */
.site-header-v5 .header-actions-v5{
  display:grid !important;
  grid-template-columns:176px 176px !important;
  gap:10px !important;
  margin-left:12px !important;
}

.site-header-v5 .header-phone-v5,
.site-header-v5 .header-line-v5{
  width:176px !important;
  min-width:176px !important;
  max-width:176px !important;
  height:50px !important;
  min-height:50px !important;
}

body{padding-top:90px !important}

@media(max-width:1180px){
  .site-header-v5 .brand-v5{
    min-width:195px !important;
    margin-right:16px !important;
    gap:9px !important;
  }
  .site-header-v5 .header-n-symbol{
    width:60px !important;height:60px !important;flex-basis:60px !important;
  }
  .site-header-v5 .header-brand-text strong{font-size:1.12rem !important}
  .site-header-v5 .header-brand-text small{font-size:.49rem !important}

  .site-header-v5 .header-actions-v5{
    grid-template-columns:156px 156px !important;
  }
  .site-header-v5 .header-phone-v5,
  .site-header-v5 .header-line-v5{
    width:156px !important;
    min-width:156px !important;
    max-width:156px !important;
  }
}

@media(max-width:1020px){
  .site-header-v5 .header-inner-v5{
    height:78px !important;
    min-height:78px !important;
  }
  body{padding-top:78px !important}
  .site-header-v5 .brand-v5{min-width:150px !important;margin-right:8px !important}
  .site-header-v5 .header-n-symbol{
    width:52px !important;height:52px !important;flex-basis:52px !important;
  }
  .site-header-v5 .header-brand-text strong{font-size:.92rem !important}
  .site-header-v5 .header-brand-text small{font-size:.4rem !important}
  .site-header-v5 .header-actions-v5{
    display:flex !important;
    grid-template-columns:none !important;
    margin-left:auto !important;
  }
}

@media(max-width:760px){
  .site-header-v5 .header-inner-v5{
    height:70px !important;
    min-height:70px !important;
  }
  body{padding-top:70px !important}
  .site-header-v5 .brand-v5{min-width:auto !important}
  .site-header-v5 .header-n-symbol{
    width:46px !important;height:46px !important;flex-basis:46px !important;
  }
  .site-header-v5 .header-brand-text strong{font-size:.78rem !important}
  .site-header-v5 .header-brand-text small{font-size:.34rem !important}
}

@media(max-width:520px){
  .site-header-v5 .header-brand-text{display:none !important}
  .site-header-v5 .brand-v5{margin-right:0 !important}
}


/* =========================================================
   HEADER V14 — USE ORIGINAL USER LOGO FILE DIRECTLY
   ========================================================= */
.site-header-v5 .header-inner-v5{
  height:96px !important;
  min-height:96px !important;
  padding:4px 0 !important;
  overflow:visible !important;
}

.site-header-v5 .brand-v5{
  position:static !important;
  flex:0 0 265px !important;
  width:265px !important;
  height:88px !important;
  min-width:265px !important;
  margin-right:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:visible !important;
  transform:none !important;
}

.site-header-v5 .brand-logo-real{
  position:static !important;
  display:block !important;
  width:245px !important;
  height:auto !important;
  max-width:none !important;
  max-height:82px !important;
  object-fit:contain !important;
  object-position:left center !important;
  transform:none !important;
  filter:none !important;
}

.site-header-v5 .header-brand-text,
.site-header-v5 .header-n-symbol,
.site-header-v5 .brand-logo-v5{
  display:none !important;
}

/* โทร + LINE เท่ากัน */
.site-header-v5 .header-actions-v5{
  display:grid !important;
  grid-template-columns:176px 176px !important;
  gap:10px !important;
  margin-left:12px !important;
}
.site-header-v5 .header-phone-v5,
.site-header-v5 .header-line-v5{
  width:176px !important;
  min-width:176px !important;
  max-width:176px !important;
  height:50px !important;
  min-height:50px !important;
}
body{padding-top:96px !important}

@media(max-width:1180px){
  .site-header-v5 .brand-v5{
    flex-basis:225px !important;
    width:225px !important;
    min-width:225px !important;
    margin-right:16px !important;
  }
  .site-header-v5 .brand-logo-real{
    width:210px !important;
    max-height:74px !important;
  }
  .site-header-v5 .header-actions-v5{
    grid-template-columns:156px 156px !important;
  }
  .site-header-v5 .header-phone-v5,
  .site-header-v5 .header-line-v5{
    width:156px !important;
    min-width:156px !important;
    max-width:156px !important;
  }
}

@media(max-width:1020px){
  .site-header-v5 .header-inner-v5{
    height:82px !important;
    min-height:82px !important;
  }
  body{padding-top:82px !important}
  .site-header-v5 .brand-v5{
    flex-basis:175px !important;
    width:175px !important;
    min-width:175px !important;
    height:72px !important;
    margin-right:8px !important;
  }
  .site-header-v5 .brand-logo-real{
    width:164px !important;
    max-height:66px !important;
  }
  .site-header-v5 .header-actions-v5{
    display:flex !important;
    grid-template-columns:none !important;
    margin-left:auto !important;
  }
  .site-header-v5 .header-phone-v5,
  .site-header-v5 .header-line-v5{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

@media(max-width:760px){
  .site-header-v5 .header-inner-v5{
    height:72px !important;
    min-height:72px !important;
  }
  body{padding-top:72px !important}
  .site-header-v5 .brand-v5{
    flex-basis:135px !important;
    width:135px !important;
    min-width:135px !important;
    height:60px !important;
  }
  .site-header-v5 .brand-logo-real{
    width:128px !important;
    max-height:56px !important;
  }
  .site-header-v5 .header-phone-v5{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
  }
  .site-header-v5 .header-line-v5{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
    height:42px !important;
    font-size:.68rem !important;
  }
}

@media(max-width:430px){
  .site-header-v5 .brand-v5{
    flex-basis:112px !important;
    width:112px !important;
    min-width:112px !important;
  }
  .site-header-v5 .brand-logo-real{
    width:108px !important;
    max-height:50px !important;
  }
  .site-header-v5 .header-line-v5{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
  }
  .site-header-v5 .header-line-v5>span:last-child{
    display:none !important;
  }
}


/* =========================================================
   TYPOGRAPHY V15 — premium Thai corporate / solar
   ========================================================= */
:root{
  --font-body:"IBM Plex Sans Thai","Noto Sans Thai","Tahoma",sans-serif;
  --font-display:"Kanit","IBM Plex Sans Thai","Tahoma",sans-serif;
}

html,body{
  font-family:var(--font-body) !important;
  font-weight:400;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

button,input,select,textarea{
  font-family:var(--font-body) !important;
}

/* navigation + buttons */
.main-nav-v5 a,
.header-phone-v5,
.header-line-v5,
.btn,
.solar-action,
.solar-line-button{
  font-family:var(--font-body) !important;
  font-weight:600 !important;
}

/* Headings: less blocky, more refined */
h1,h2,h3,h4,h5,h6,
.hero h1,
.section-title,
.contact-v5-head h2{
  font-family:var(--font-display) !important;
  font-weight:600 !important;
  letter-spacing:-.018em !important;
}

/* Hero headline */
.hero h1{
  font-size:clamp(2.65rem,4.7vw,4.45rem) !important;
  line-height:1.13 !important;
  font-weight:600 !important;
  letter-spacing:-.035em !important;
  text-shadow:0 4px 22px rgba(0,43,73,.12) !important;
}
.hero h1 .accent,
.hero h1 span{
  font-weight:600 !important;
}

/* Hero supporting copy */
.hero p,
.hero .lead,
.hero-subtitle{
  font-family:var(--font-body) !important;
  font-weight:400 !important;
  font-size:1.02rem !important;
  line-height:1.8 !important;
  letter-spacing:0 !important;
}

/* eyebrow / small technical labels */
.hero-badge,
.eyebrow,
.section-kicker,
.contact-v5-head>span,
.solar-cta-eyebrow{
  font-family:var(--font-body) !important;
  font-weight:600 !important;
  letter-spacing:.085em !important;
}

/* Hero feature cards */
.hero .feature-card h3,
.hero .feature-card strong,
.hero .hero-feature h3,
.hero .hero-feature strong{
  font-family:var(--font-display) !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
}
.hero .feature-card p,
.hero .hero-feature p{
  font-family:var(--font-body) !important;
  font-weight:400 !important;
}

/* General section headings */
section h2{
  line-height:1.25 !important;
}
section h3{
  line-height:1.35 !important;
}

/* Cards/content */
.service-card h3,
.portfolio-card h3,
.why-card h3,
.contact-v5-company-name h3,
.contact-v5-map-header h3,
.solar-footer h5{
  font-family:var(--font-display) !important;
  font-weight:500 !important;
}

.service-card p,
.portfolio-card p,
.why-card p,
.contact-v5-row,
.solar-footer,
.footer{
  font-family:var(--font-body) !important;
}

/* Numbers/contact: clear and modern */
.header-phone-v5,
.contact-v5-row b,
.contact-v5-meta strong,
.contact-v5-map-footer b{
  font-variant-numeric:tabular-nums;
}

/* Desktop refinement */
@media(min-width:1021px){
  .main-nav-v5 a{
    font-size:.92rem !important;
    font-weight:500 !important;
  }
  .hero-content{
    max-width:800px;
  }
}

/* Mobile sizing */
@media(max-width:760px){
  .hero h1{
    font-size:clamp(2.15rem,10vw,3.15rem) !important;
    line-height:1.12 !important;
  }
  .hero p,
  .hero .lead,
  .hero-subtitle{
    font-size:.95rem !important;
    line-height:1.72 !important;
  }
}


/* =========================================================
   BRAND SHOWCASE V16 — compact, expandable multi-brand grid
   ========================================================= */
.brand-showcase-v16{
  padding-top:68px !important;
  padding-bottom:68px !important;
}
.brand-showcase-v16 .section-head,
.brand-showcase-v16 .section-header{
  max-width:860px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.brand-showcase-v16 h2{
  font-size:clamp(2rem,3.2vw,2.85rem) !important;
  margin-bottom:.55rem !important;
}
.brand-showcase-v16 .section-head p,
.brand-showcase-v16 .section-header p{
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  line-height:1.7 !important;
}

/* Existing logo wrapper variations */
.brand-showcase-v16 .brand-grid,
.brand-showcase-v16 .brands-grid,
.brand-showcase-v16 .logo-grid,
.brand-showcase-v16 .partner-logos{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:34px !important;
}

/* Existing individual card variations */
.brand-showcase-v16 .brand-card,
.brand-showcase-v16 .brand-item,
.brand-showcase-v16 .logo-card,
.brand-showcase-v16 .partner-logo{
  min-height:104px !important;
  height:104px !important;
  padding:16px 18px !important;
  border-radius:15px !important;
  background:#fff !important;
  border:1px solid #dce9ef !important;
  box-shadow:0 5px 16px rgba(14,78,106,.035) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease !important;
}
.brand-showcase-v16 .brand-card:hover,
.brand-showcase-v16 .brand-item:hover,
.brand-showcase-v16 .logo-card:hover,
.brand-showcase-v16 .partner-logo:hover{
  transform:translateY(-3px) !important;
  border-color:#9dd9e9 !important;
  box-shadow:0 12px 24px rgba(11,111,148,.09) !important;
}

.brand-showcase-v16 .brand-card img,
.brand-showcase-v16 .brand-item img,
.brand-showcase-v16 .logo-card img,
.brand-showcase-v16 .partner-logo img{
  width:auto !important;
  max-width:125px !important;
  max-height:52px !important;
  object-fit:contain !important;
}

/* Makes future added brand cards automatically wrap into more rows. */
@media(max-width:1100px){
  .brand-showcase-v16 .brand-grid,
  .brand-showcase-v16 .brands-grid,
  .brand-showcase-v16 .logo-grid,
  .brand-showcase-v16 .partner-logos{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media(max-width:720px){
  .brand-showcase-v16{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }
  .brand-showcase-v16 .brand-grid,
  .brand-showcase-v16 .brands-grid,
  .brand-showcase-v16 .logo-grid,
  .brand-showcase-v16 .partner-logos{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  .brand-showcase-v16 .brand-card,
  .brand-showcase-v16 .brand-item,
  .brand-showcase-v16 .logo-card,
  .brand-showcase-v16 .partner-logo{
    min-height:88px !important;
    height:88px !important;
    padding:12px !important;
  }
  .brand-showcase-v16 .brand-card img,
  .brand-showcase-v16 .brand-item img,
  .brand-showcase-v16 .logo-card img,
  .brand-showcase-v16 .partner-logo img{
    max-width:96px !important;
    max-height:42px !important;
  }
}
@media(max-width:430px){
  .brand-showcase-v16 .brand-grid,
  .brand-showcase-v16 .brands-grid,
  .brand-showcase-v16 .logo-grid,
  .brand-showcase-v16 .partner-logos{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   PORTFOLIO V17 — Project Showcase / sales-focused portfolio
   ========================================================= */
.portfolio-v17{
  padding-top:76px !important;
  padding-bottom:76px !important;
  background:
    radial-gradient(circle at 10% 8%,rgba(21,168,211,.055),transparent 25%),
    #fff !important;
}
.portfolio-v17 .section-head,
.portfolio-v17 .section-header{
  max-width:860px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.portfolio-v17 .section-kicker,
.portfolio-v17 .eyebrow{
  color:#078f30 !important;
  font-size:.7rem !important;
  letter-spacing:.13em !important;
}
.portfolio-v17 h2{
  color:#062f4f !important;
  font-size:clamp(2.05rem,3.3vw,2.9rem) !important;
  margin-bottom:.55rem !important;
}
.portfolio-v17 .section-head p,
.portfolio-v17 .section-header p{
  color:#657e8d !important;
  line-height:1.72 !important;
}

/* filters */
.project-filters-v17{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:28px auto 24px;
}
.project-filters-v17 button{
  appearance:none;border:1px solid #d8e8ef;background:#fff;color:#456779;
  min-height:38px;padding:0 15px;border-radius:999px;
  font-family:var(--font-body) !important;font-size:.73rem;font-weight:550;
  cursor:pointer;transition:.2s;
}
.project-filters-v17 button:hover{
  border-color:#75cce3;color:#057d9f;background:#f2fbfd;
}
.project-filters-v17 button.active{
  color:#fff;border-color:#087da5;
  background:linear-gradient(135deg,#0879a2,#09a6ca);
  box-shadow:0 8px 18px rgba(8,126,165,.17);
}

/* project card */
.portfolio-v17 .project-card-v17{
  position:relative;
  border-radius:19px !important;
  overflow:visible !important;
  background:#fff !important;
  border:1px solid #e3edf2 !important;
  box-shadow:0 12px 28px rgba(14,74,103,.07) !important;
  transition:transform .25s ease,box-shadow .25s ease !important;
}
.portfolio-v17 .project-card-v17:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 22px 42px rgba(10,77,110,.14) !important;
}

/* image/media */
.portfolio-v17 .project-card-v17 .portfolio-media,
.portfolio-v17 .project-card-v17 .portfolio-img,
.portfolio-v17 .project-card-v17 .portfolio-image,
.portfolio-v17 .project-card-v17 .work-image,
.portfolio-v17 .project-card-v17>div:has(>img){
  position:relative !important;
  overflow:hidden !important;
  border-radius:18px 18px 0 0 !important;
}
.portfolio-v17 .project-card-v17 img{
  transition:transform .5s ease,filter .3s ease !important;
}
.portfolio-v17 .project-card-v17:hover img{
  transform:scale(1.045) !important;
  filter:saturate(1.04) contrast(1.02) !important;
}

/* Overlay */
.project-overlay-v17{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:15px;
  background:linear-gradient(to bottom,rgba(2,24,39,.18) 0%,transparent 42%,rgba(2,25,41,.78) 100%);
}
.project-type-v17{
  align-self:flex-start;
  padding:6px 9px;border-radius:999px;
  color:#fff;background:rgba(4,52,79,.82);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(5px);
  font-size:.61rem;font-weight:700;letter-spacing:.07em;
}
.project-type-v17.hybrid{background:rgba(0,129,101,.86)}
.project-type-v17.ongrid{background:rgba(7,98,179,.86)}
.project-overlay-bottom-v17{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  color:#fff;opacity:0;transform:translateY(6px);transition:.25s;
}
.project-card-v17:hover .project-overlay-bottom-v17{
  opacity:1;transform:none;
}
.project-overlay-bottom-v17 span{
  font-size:.67rem;color:rgba(255,255,255,.78);
}
.project-overlay-bottom-v17 b{
  white-space:nowrap;font-size:.72rem;font-weight:600;
}
.project-overlay-bottom-v17 i{
  font-style:normal;margin-left:3px;color:#63e3ff;
}

/* captions */
.portfolio-v17 .project-card-v17 h3,
.portfolio-v17 .project-card-v17 h4,
.portfolio-v17 .project-card-v17 .portfolio-title{
  margin:0 !important;
  padding:14px 15px 5px !important;
  color:#083b58 !important;
  font-family:var(--font-display) !important;
  font-size:1rem !important;
  font-weight:500 !important;
  text-align:left !important;
}
.portfolio-v17 .project-card-v17 p{
  padding:0 15px 14px !important;
  color:#77909e !important;
  font-size:.72rem !important;
  text-align:left !important;
}

/* count badge / existing controls get cleaner */
.portfolio-v17 .project-card-v17 .count,
.portfolio-v17 .project-card-v17 [class*="count"],
.portfolio-v17 .project-card-v17 [class*="badge"]{
  backdrop-filter:blur(5px);
}

/* Bottom sales CTA */
.portfolio-cta-v17{
  max-width:1180px;margin:34px auto 0;
  padding:20px 22px;border-radius:17px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(120deg,#063d5a,#075f7d);
  color:#fff;box-shadow:0 16px 34px rgba(5,72,101,.13);
}
.portfolio-cta-v17 span{
  display:block;color:#82ddf2;font-size:.67rem;letter-spacing:.03em;
}
.portfolio-cta-v17 strong{
  display:block;margin-top:3px;font-family:var(--font-display);font-size:1rem;font-weight:500;
}
.portfolio-cta-v17 a{
  flex:none;padding:11px 15px;border-radius:10px;background:#19bd4d;color:#fff;
  font-size:.74rem;font-weight:650;box-shadow:0 8px 18px rgba(25,189,77,.16);
}

/* filtering helper */
.project-card-v17.project-hidden{
  display:none !important;
}

@media(max-width:760px){
  .portfolio-v17{padding-top:55px !important;padding-bottom:55px !important}
  .project-filters-v17{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}
  .project-filters-v17 button{flex:none}
  .portfolio-cta-v17{align-items:flex-start;flex-direction:column}
  .portfolio-cta-v17 a{width:100%;text-align:center}
  .project-overlay-bottom-v17{opacity:1;transform:none}
}


/* =========================================================
   PORTFOLIO V18 — actual CMS-compatible Project Showcase
   ========================================================= */
.portfolio-v17{
  padding-top:72px !important;
  padding-bottom:72px !important;
  background:
    radial-gradient(circle at 8% 10%,rgba(8,162,205,.055),transparent 27%),
    linear-gradient(180deg,#fff 0%,#fbfdfe 100%) !important;
}
.portfolio-v17 .sec-head{max-width:860px;margin-left:auto;margin-right:auto}
.portfolio-v17 .eyebrow{
  color:#168a31 !important;
  font-size:.7rem !important;
  font-weight:650 !important;
  letter-spacing:.12em !important;
}
.portfolio-v17 .sec-head h2{
  color:#062f4e !important;
  font-size:clamp(2.05rem,3vw,2.75rem) !important;
  margin:.45rem 0 .5rem !important;
}
.portfolio-v17 .sec-lead{
  max-width:760px;margin-left:auto !important;margin-right:auto !important;
  color:#6d8391 !important;line-height:1.7 !important;
}

/* System filters */
.project-filters-v18{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:27px 0 24px;
}
.project-filters-v18 button{
  appearance:none;cursor:pointer;
  min-height:39px;padding:0 17px;border-radius:999px;
  border:1px solid #d9e7ed;background:#fff;color:#476878;
  font-family:var(--font-body);font-size:.74rem;font-weight:550;
  transition:.2s ease;
}
.project-filters-v18 button:hover{border-color:#65c4dd;color:#087e9e;background:#f2fbfd}
.project-filters-v18 button.active{
  color:#fff;border-color:#077ea5;
  background:linear-gradient(135deg,#087aa1,#08a7ca);
  box-shadow:0 8px 18px rgba(8,129,164,.17);
}

/* Cards */
.portfolio-v17 .portfolio-track{padding:8px 3px 15px !important}
.portfolio-v17 .pcard-v18{
  background:#fff !important;
  border:1px solid #e1ebf0 !important;
  border-radius:20px !important;
  overflow:hidden !important;
  box-shadow:0 12px 28px rgba(9,72,103,.075) !important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important;
}
.portfolio-v17 .pcard-v18:hover{
  transform:translateY(-6px) !important;
  border-color:#c8e2eb !important;
  box-shadow:0 22px 44px rgba(8,73,105,.14) !important;
}
.portfolio-v17 .pcard-v18 .pcard-img{
  position:relative !important;
  overflow:hidden !important;
  border-radius:0 !important;
}
.portfolio-v17 .pcard-v18 .pcard-img>img{
  width:100% !important;
  height:285px !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .5s ease,filter .3s ease !important;
}
.portfolio-v17 .pcard-v18:hover .pcard-img>img{
  transform:scale(1.045) !important;
  filter:saturate(1.06) contrast(1.02) !important;
}
.portfolio-v17 .pcard-count{
  z-index:7 !important;
  top:auto !important;right:13px !important;bottom:13px !important;
  padding:6px 9px !important;border-radius:999px !important;
  background:rgba(2,25,41,.72) !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  backdrop-filter:blur(6px);
  font-size:.66rem !important;font-weight:600 !important;
}

/* Photo overlay */
.pcard-overlay-v18{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:14px;
  background:linear-gradient(to bottom,rgba(2,26,44,.17) 0%,transparent 45%,rgba(2,27,44,.82) 100%);
}
.pcard-system-v18{
  align-self:flex-start;
  color:#fff;padding:6px 10px;border-radius:999px;
  background:rgba(6,72,109,.88);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  font-size:.6rem;font-weight:700;letter-spacing:.075em;
}
.pcard-system-v18.hybrid{background:rgba(0,133,98,.9)}
.pcard-system-v18.ongrid{background:rgba(4,104,190,.9)}
.pcard-open-v18{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  color:#fff;opacity:0;transform:translateY(7px);transition:.23s ease;
}
.pcard-v18:hover .pcard-open-v18{opacity:1;transform:none}
.pcard-open-v18 span{font-size:.65rem;color:rgba(255,255,255,.75)}
.pcard-open-v18 b{font-size:.72rem;font-weight:600;white-space:nowrap;color:#fff}

/* Caption becomes project info strip */
.portfolio-v17 .pcard-v18 figcaption{
  min-height:78px !important;padding:14px 16px 15px !important;
  display:flex !important;flex-direction:column !important;align-items:flex-start !important;
  text-align:left !important;background:#fff !important;
}
.portfolio-v17 .pcard-v18 figcaption strong{
  color:#073b58 !important;
  font-family:var(--font-display) !important;
  font-size:1rem !important;font-weight:500 !important;line-height:1.3 !important;
}
.portfolio-v17 .pcard-v18 figcaption span{
  margin-top:4px;color:#8296a1 !important;font-size:.66rem !important;font-weight:400 !important;
}

/* Cleaner slider controls */
.portfolio-v17 .pslide-btn{
  width:44px !important;height:44px !important;
  background:#fff !important;color:#0795bd !important;
  border:1px solid #d9e9ef !important;
  box-shadow:0 8px 20px rgba(7,79,110,.11) !important;
}
.portfolio-v17 .pslide-btn:hover{background:#079cc3 !important;color:#fff !important}
.portfolio-v17 .pslide-dot{width:9px !important;height:9px !important;background:#cfdee5 !important}
.portfolio-v17 .pslide-dot.active{width:28px !important;border-radius:999px !important;background:#079fc7 !important}

/* CTA */
.portfolio-cta-v18{
  max-width:1180px;margin:30px auto 0;padding:20px 22px;
  border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:
    radial-gradient(circle at 90% 20%,rgba(53,205,239,.15),transparent 22%),
    linear-gradient(120deg,#06354f,#075b77);
  color:#fff;box-shadow:0 16px 34px rgba(5,69,96,.13);
}
.portfolio-cta-v18 small{display:block;color:#7edbed;font-size:.68rem}
.portfolio-cta-v18 strong{
  display:block;margin-top:3px;
  font-family:var(--font-display);font-size:1rem;font-weight:500;
}
.portfolio-cta-actions-v18{display:flex;gap:8px;flex:none}
.portfolio-cta-actions-v18 a{
  min-height:42px;padding:0 13px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.72rem;font-weight:650;
}
.pcta-line{background:#18bd4d;box-shadow:0 8px 18px rgba(24,189,77,.17)}
.pcta-phone{background:#0878b5;border:1px solid rgba(255,255,255,.13)}

@media(max-width:760px){
  .portfolio-v17{padding-top:54px !important;padding-bottom:54px !important}
  .project-filters-v18{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .project-filters-v18 button{flex:none}
  .portfolio-v17 .pcard-v18 .pcard-img>img{height:250px !important}
  .pcard-open-v18{opacity:1;transform:none}
  .portfolio-cta-v18{flex-direction:column;align-items:flex-start}
  .portfolio-cta-actions-v18{width:100%}
  .portfolio-cta-actions-v18 a{flex:1}
}
@media(max-width:480px){
  .portfolio-cta-actions-v18{flex-direction:column}
}


/* =========================================================
   PROCESS V19 — premium connected workflow
   CMS SAFE: styles existing .why-steps / .wstep only
   ========================================================= */
.process-v19{
  position:relative;
  overflow:hidden;
  padding-top:76px !important;
  padding-bottom:82px !important;
  background:
    radial-gradient(circle at 12% 10%,rgba(0,164,207,.08),transparent 24%),
    radial-gradient(circle at 92% 88%,rgba(18,159,70,.055),transparent 24%),
    linear-gradient(180deg,#f7fbfd 0%,#eef7fb 100%) !important;
}
.process-v19::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(7,89,125,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,89,125,.025) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 82%,transparent);
}
.process-v19 .container{position:relative;z-index:2}
.process-v19 .sec-head{
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:42px !important;
}
.process-v19 .eyebrow{
  color:#14952e !important;
  font-size:.7rem !important;
  letter-spacing:.12em !important;
  font-weight:650 !important;
}
.process-v19 h2{
  color:#062f4e !important;
  font-size:clamp(2.05rem,3.15vw,2.8rem) !important;
  line-height:1.2 !important;
  margin:.45rem 0 0 !important;
}

/* 3 x 2 process grid */
.process-v19 .why-steps{
  position:relative;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:24px !important;
  counter-reset:processStep;
}

/* connecting horizontal line behind top row */
.process-v19 .why-steps::before{
  content:"";
  position:absolute;
  top:47px;
  left:15%;
  right:15%;
  height:2px;
  background:linear-gradient(90deg,#26b9df 0%,#1e93cf 46%,#1ca83c 100%);
  opacity:.28;
  z-index:0;
}

.process-v19 .wstep{
  counter-increment:processStep;
  position:relative;
  z-index:1;
  min-height:228px !important;
  padding:28px 27px 25px !important;
  border-radius:22px !important;
  text-align:left !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(6,92,128,.10) !important;
  box-shadow:0 14px 34px rgba(12,79,108,.07) !important;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important;
}
.process-v19 .wstep:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(13,153,195,.28) !important;
  box-shadow:0 24px 48px rgba(8,78,110,.13) !important;
}

/* very subtle accent inside the card */
.process-v19 .wstep::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#18b9de,#1183c5,#23a630);
  opacity:.82;
}
.process-v19 .wstep::before{
  content:"0" counter(processStep);
  position:absolute;
  right:18px;
  top:13px;
  color:rgba(5,71,102,.055);
  font-family:Arial,sans-serif;
  font-size:3.3rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
}

/* Icon now becomes the process node */
.process-v19 .wnum{
  position:relative;
  width:58px !important;
  height:58px !important;
  margin:0 0 22px !important;
  border-radius:17px !important;
  display:grid !important;
  place-items:center !important;
  color:#fff !important;
  background:linear-gradient(145deg,#08a9d1,#0a7fbb) !important;
  box-shadow:
    0 10px 24px rgba(7,135,185,.20),
    0 0 0 7px #fff,
    0 0 0 8px rgba(10,132,177,.09) !important;
}
.process-v19 .wstep:nth-child(3n+2) .wnum,
.process-v19 .wstep:nth-child(3n) .wnum{
  background:linear-gradient(145deg,#27ad2c,#189a20) !important;
  box-shadow:
    0 10px 24px rgba(28,159,39,.18),
    0 0 0 7px #fff,
    0 0 0 8px rgba(28,159,39,.09) !important;
}
.process-v19 .wnum svg{
  width:25px !important;height:25px !important;
  stroke-width:1.8 !important;
}

/* Titles/content */
.process-v19 .wstep h4{
  position:relative;
  margin:0 0 9px !important;
  color:#082f4b !important;
  font-family:var(--font-display) !important;
  font-size:1.08rem !important;
  line-height:1.35 !important;
  font-weight:500 !important;
}
.process-v19 .wstep p{
  margin:0 !important;
  color:#738895 !important;
  font-family:var(--font-body) !important;
  font-size:.84rem !important;
  line-height:1.72 !important;
  font-weight:400 !important;
}

/* Small process arrow on desktop */
.process-v19 .wstep:not(:nth-child(3n)) .wnum::after{
  content:"→";
  position:absolute;
  left:calc(100% + 27px);
  top:50%;
  transform:translateY(-50%);
  color:#75cfe5;
  font-size:1.05rem;
  font-family:Arial,sans-serif;
  font-weight:700;
}

@media(max-width:900px){
  .process-v19 .why-steps{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .process-v19 .why-steps::before,
  .process-v19 .wstep .wnum::after{
    display:none !important;
  }
  .process-v19 .wstep{min-height:215px !important}
}

@media(max-width:600px){
  .process-v19{
    padding-top:55px !important;
    padding-bottom:58px !important;
  }
  .process-v19 .sec-head{margin-bottom:28px !important}
  .process-v19 .why-steps{
    grid-template-columns:1fr !important;
    gap:13px !important;
  }
  .process-v19 .wstep{
    min-height:0 !important;
    padding:21px 20px !important;
    display:grid !important;
    grid-template-columns:52px 1fr !important;
    column-gap:15px !important;
    align-items:start !important;
  }
  .process-v19 .wnum{
    width:50px !important;height:50px !important;
    margin:0 !important;
    border-radius:14px !important;
    grid-row:1 / span 2;
  }
  .process-v19 .wstep h4{margin-top:2px !important}
  .process-v19 .wstep p{font-size:.8rem !important}
  .process-v19 .wstep::before{font-size:2.6rem;right:12px;top:10px}
}


/* =========================================================
   BENEFITS V20 — Premium Solar Engineering
   Real classes: .benefits-grid .benefits-text .benefits-cards .bcard .bicon
   ========================================================= */
.benefits-v20{
  position:relative;
  overflow:hidden;
  padding:86px 0 90px !important;
  background:
    radial-gradient(circle at 4% 12%,rgba(0,169,218,.085),transparent 26%),
    radial-gradient(circle at 94% 88%,rgba(37,169,57,.065),transparent 24%),
    linear-gradient(145deg,#ffffff 0%,#f5fbfe 100%) !important;
}
.benefits-v20::before{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-155px;
  width:560px;
  height:340px;
  transform:perspective(600px) rotateX(58deg) rotateZ(-8deg);
  background:
    repeating-linear-gradient(90deg,rgba(18,142,183,.07) 0 1px,transparent 1px 66px),
    repeating-linear-gradient(0deg,rgba(18,142,183,.07) 0 1px,transparent 1px 48px);
  pointer-events:none;
}
.benefits-v20 .benefits-grid{
  position:relative;
  z-index:2;
  display:grid !important;
  grid-template-columns:.88fr 1.28fr !important;
  gap:72px !important;
  align-items:center !important;
}

/* Left story */
.benefits-v20 .benefits-text{
  position:relative;
  max-width:550px;
  padding:8px 0 !important;
}
.benefits-v20 .benefits-text .eyebrow{
  display:inline-flex !important;
  align-items:center;
  gap:9px;
  color:#15912f !important;
  font-size:.7rem !important;
  font-weight:650 !important;
  letter-spacing:.11em !important;
}
.benefits-v20 .benefits-text .eyebrow::before{
  content:"";
  width:27px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#0ca7d1,#20a331);
}
.benefits-v20 .benefits-text h2{
  margin:.75rem 0 .95rem !important;
  color:#062f4d !important;
  font-family:var(--font-display) !important;
  font-size:clamp(2.3rem,3.45vw,3.35rem) !important;
  line-height:1.15 !important;
  font-weight:600 !important;
  letter-spacing:-.03em !important;
}
.benefits-v20 .benefits-text .sec-lead{
  margin:0 !important;
  max-width:530px;
  color:#6f8491 !important;
  font-size:.94rem !important;
  line-height:1.82 !important;
}
.benefits-v20 .benefits-text::after{
  content:"LOAD PROFILE  •  SYSTEM DESIGN  •  SAFETY";
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:24px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid #d9e9ef;
  background:rgba(255,255,255,.78);
  color:#367d99;
  font-family:Arial,sans-serif;
  font-size:.61rem;
  font-weight:700;
  letter-spacing:.075em;
}
.benefits-v20 .benefits-text .btn{
  min-height:48px !important;
  margin-top:25px !important;
  padding:0 20px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#0785b5,#08a9cc) !important;
  border:0 !important;
  color:#fff !important;
  font-size:.8rem !important;
  font-weight:650 !important;
  box-shadow:0 12px 25px rgba(8,139,181,.2) !important;
  transition:.22s !important;
}
.benefits-v20 .benefits-text .btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 32px rgba(8,139,181,.27) !important;
}

/* Right: 2x2 architecture */
.benefits-v20 .benefits-cards{
  counter-reset:benefitCard;
  position:relative;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:17px !important;
}

/* subtle cross connector */
.benefits-v20 .benefits-cards::before{
  content:"";
  position:absolute;
  left:50%;top:7%;bottom:7%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,transparent,#d9e8ee 18%,#d9e8ee 82%,transparent);
  pointer-events:none;
}
.benefits-v20 .benefits-cards::after{
  content:"";
  position:absolute;
  top:50%;left:7%;right:7%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(to right,transparent,#d9e8ee 18%,#d9e8ee 82%,transparent);
  pointer-events:none;
}

.benefits-v20 .bcard{
  counter-increment:benefitCard;
  position:relative;
  z-index:1;
  min-height:218px !important;
  padding:27px 26px 25px !important;
  border-radius:22px !important;
  text-align:left !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(7,91,126,.10) !important;
  box-shadow:0 13px 34px rgba(10,77,107,.065) !important;
  overflow:hidden !important;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease !important;
}
.benefits-v20 .bcard:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(9,151,194,.27) !important;
  box-shadow:0 24px 48px rgba(7,75,106,.13) !important;
}
.benefits-v20 .bcard::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,#0bb6da,#087fc0);
}
.benefits-v20 .bcard:nth-child(even)::before{
  background:linear-gradient(180deg,#36b63b,#1a9624);
}
.benefits-v20 .bcard::after{
  content:"0" counter(benefitCard);
  position:absolute;
  right:15px;
  top:10px;
  color:rgba(5,65,94,.045);
  font-family:Arial,sans-serif;
  font-size:3.2rem;
  font-weight:800;
  line-height:1;
}

/* icons */
.benefits-v20 .bicon{
  width:58px !important;
  height:58px !important;
  margin:0 0 22px !important;
  border-radius:17px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(145deg,#0bb2d5,#078cc2) !important;
  box-shadow:0 11px 24px rgba(8,144,189,.18) !important;
}
.benefits-v20 .bcard:nth-child(even) .bicon{
  background:linear-gradient(145deg,#35b63a,#1c9726) !important;
  box-shadow:0 11px 24px rgba(28,154,39,.17) !important;
}
.benefits-v20 .bicon svg{
  width:26px !important;
  height:26px !important;
  stroke:#fff !important;
  stroke-width:1.8 !important;
}

/* copy */
.benefits-v20 .bcard h4{
  margin:0 0 9px !important;
  color:#082f4b !important;
  font-family:var(--font-display) !important;
  font-size:1.08rem !important;
  font-weight:500 !important;
  line-height:1.34 !important;
}
.benefits-v20 .bcard p{
  margin:0 !important;
  color:#758995 !important;
  font-family:var(--font-body) !important;
  font-size:.82rem !important;
  line-height:1.7 !important;
  font-weight:400 !important;
}

/* tablet */
@media(max-width:980px){
  .benefits-v20{
    padding:68px 0 72px !important;
  }
  .benefits-v20 .benefits-grid{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  .benefits-v20 .benefits-text{
    max-width:720px;
  }
}

/* mobile */
@media(max-width:620px){
  .benefits-v20{
    padding:54px 0 58px !important;
  }
  .benefits-v20 .benefits-text h2{
    font-size:clamp(2rem,10vw,2.65rem) !important;
  }
  .benefits-v20 .benefits-cards{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .benefits-v20 .benefits-cards::before,
  .benefits-v20 .benefits-cards::after{
    display:none !important;
  }
  .benefits-v20 .bcard{
    min-height:0 !important;
    padding:21px 20px !important;
  }
}


/* =========================================================
   DESIGN V21 — premium "design from real data" section
   Visual only / CMS-safe
   ========================================================= */
.design-v21{
  position:relative;
  overflow:hidden;
  padding:86px 0 90px !important;
  background:
    radial-gradient(circle at 12% 8%,rgba(0,166,211,.08),transparent 24%),
    radial-gradient(circle at 92% 88%,rgba(38,170,56,.05),transparent 22%),
    linear-gradient(145deg,#f8fcfe 0%,#eef7fb 100%) !important;
}
.design-v21::before{
  content:"";
  position:absolute;
  right:-100px;
  bottom:-130px;
  width:520px;
  height:280px;
  transform:skewX(-20deg) rotate(-7deg);
  background:
    repeating-linear-gradient(90deg,rgba(10,135,177,.055) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(10,135,177,.055) 0 1px,transparent 1px 44px);
  pointer-events:none;
}
.design-v21 .container{position:relative;z-index:2}

/* Main two-column layout */
.design-v21 .design-grid,
.design-v21 .roi-grid,
.design-v21 .analysis-grid{
  display:grid !important;
  grid-template-columns:.95fr 1.05fr !important;
  gap:64px !important;
  align-items:center !important;
}

/* LEFT PANEL */
.design-v21 .design-flow,
.design-v21 .analysis-card,
.design-v21 .flow-card{
  position:relative;
  padding:31px !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at 18% 12%,rgba(35,187,224,.06),transparent 25%),
    rgba(255,255,255,.88) !important;
  border:1px solid rgba(8,94,129,.10) !important;
  box-shadow:0 22px 50px rgba(10,79,110,.09) !important;
  backdrop-filter:blur(6px);
}
.design-v21 .design-flow h3,
.design-v21 .analysis-card h3,
.design-v21 .flow-card h3{
  margin:0 !important;
  color:#073b5b !important;
  font-family:var(--font-display) !important;
  font-size:1.15rem !important;
  font-weight:500 !important;
}
.design-v21 .design-flow>p,
.design-v21 .analysis-card>p,
.design-v21 .flow-card>p{
  margin:.28rem 0 1.5rem !important;
  color:#78909d !important;
  font-size:.76rem !important;
}

/* Steps - actual common class fallbacks */
.design-v21 .flow-steps,
.design-v21 .design-steps,
.design-v21 .analysis-steps{
  position:relative;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
}
.design-v21 .flow-step,
.design-v21 .design-step,
.design-v21 .analysis-step{
  position:relative;
  min-height:102px !important;
  padding:18px 17px 16px 66px !important;
  border-radius:17px !important;
  background:#fff !important;
  border:1px solid #e3edf2 !important;
  box-shadow:0 9px 24px rgba(10,75,105,.065) !important;
  transition:.22s ease !important;
}
.design-v21 .flow-step:hover,
.design-v21 .design-step:hover,
.design-v21 .analysis-step:hover{
  transform:translateY(-4px);
  border-color:#a9dbe8 !important;
  box-shadow:0 16px 32px rgba(9,83,116,.11) !important;
}
.design-v21 .flow-step strong,
.design-v21 .design-step strong,
.design-v21 .analysis-step strong{
  display:block !important;
  color:#083a58 !important;
  font-family:var(--font-display) !important;
  font-size:.86rem !important;
  font-weight:500 !important;
  line-height:1.35 !important;
}
.design-v21 .flow-step span,
.design-v21 .design-step span,
.design-v21 .analysis-step span,
.design-v21 .flow-step p,
.design-v21 .design-step p,
.design-v21 .analysis-step p{
  color:#8297a2 !important;
  font-size:.64rem !important;
  line-height:1.45 !important;
}
.design-v21 .flow-step::before,
.design-v21 .design-step::before,
.design-v21 .analysis-step::before{
  content:attr(data-step);
  position:absolute;
  left:16px;top:50%;
  transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#eaf8fd,#f5fcfe);
  border:1px solid #d7eaf1;
  color:#0c6386;
  font-family:Arial,sans-serif;
  font-size:.8rem;font-weight:700;
}

/* RIGHT COPY */
.design-v21 .design-copy,
.design-v21 .analysis-copy,
.design-v21 .roi-copy{
  max-width:590px;
}
.design-v21 .design-copy .eyebrow,
.design-v21 .analysis-copy .eyebrow,
.design-v21 .roi-copy .eyebrow{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  color:#15912f !important;
  font-size:.7rem !important;
  font-weight:650 !important;
  letter-spacing:.11em !important;
}
.design-v21 .design-copy .eyebrow::before,
.design-v21 .analysis-copy .eyebrow::before,
.design-v21 .roi-copy .eyebrow::before{
  content:"";
  width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#0aa7d1,#20a230);
}
.design-v21 .design-copy h2,
.design-v21 .analysis-copy h2,
.design-v21 .roi-copy h2{
  margin:.7rem 0 1rem !important;
  color:#062f4d !important;
  font-family:var(--font-display) !important;
  font-size:clamp(2.35rem,3.55vw,3.35rem) !important;
  line-height:1.16 !important;
  font-weight:600 !important;
  letter-spacing:-.03em !important;
}

/* Checklist becomes premium rows */
.design-v21 .design-copy ul,
.design-v21 .analysis-copy ul,
.design-v21 .roi-copy ul{
  list-style:none !important;
  margin:1.25rem 0 1.55rem !important;
  padding:0 !important;
  display:grid !important;
  gap:8px !important;
}
.design-v21 .design-copy li,
.design-v21 .analysis-copy li,
.design-v21 .roi-copy li{
  position:relative;
  min-height:46px;
  padding:11px 14px 11px 48px !important;
  border-radius:13px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(7,93,128,.08);
  color:#173f55 !important;
  font-size:.88rem !important;
  line-height:1.55 !important;
}
.design-v21 .design-copy li::before,
.design-v21 .analysis-copy li::before,
.design-v21 .roi-copy li::before{
  content:"✓";
  position:absolute;
  left:13px;top:50%;
  transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#09abd0,#078abb);
  box-shadow:0 6px 14px rgba(8,143,184,.17);
  font-size:.78rem;font-weight:700;
}

/* CTA */
.design-v21 .btn,
.design-v21 a.btn{
  min-height:50px !important;
  padding:0 21px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#087fae,#08a8cb) !important;
  color:#fff !important;
  font-weight:650 !important;
  font-size:.82rem !important;
  box-shadow:0 13px 26px rgba(8,139,181,.21) !important;
  transition:.2s !important;
}
.design-v21 .btn:hover,
.design-v21 a.btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 17px 34px rgba(8,139,181,.28) !important;
}

/* If the original flow uses generic divs/cards, give them the same premium treatment */
.design-v21 [class*="step-card"],
.design-v21 [class*="flow-item"]{
  border-radius:17px !important;
  background:#fff !important;
  border:1px solid #e3edf2 !important;
  box-shadow:0 9px 24px rgba(10,75,105,.065) !important;
}

/* Responsive */
@media(max-width:980px){
  .design-v21{
    padding:68px 0 72px !important;
  }
  .design-v21 .design-grid,
  .design-v21 .roi-grid,
  .design-v21 .analysis-grid{
    grid-template-columns:1fr !important;
    gap:38px !important;
  }
}
@media(max-width:620px){
  .design-v21{
    padding:54px 0 58px !important;
  }
  .design-v21 .design-flow,
  .design-v21 .analysis-card,
  .design-v21 .flow-card{
    padding:20px !important;
  }
  .design-v21 .flow-steps,
  .design-v21 .design-steps,
  .design-v21 .analysis-steps{
    grid-template-columns:1fr !important;
  }
  .design-v21 .design-copy h2,
  .design-v21 .analysis-copy h2,
  .design-v21 .roi-copy h2{
    font-size:clamp(2rem,10vw,2.7rem) !important;
  }
}

/* GOOGLE ADS READY V22 */
.service-area-v22,.faq-v22,.lead-v22{padding:72px 0}
.service-area-v22{background:#fff}.service-area-v22 .sec-head,.faq-v22 .sec-head{max-width:820px;margin:0 auto 30px}
.service-area-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;padding:24px;border-radius:22px;background:linear-gradient(135deg,#063d5d,#08799a);color:#fff;box-shadow:0 18px 40px rgba(7,83,112,.14)}
.service-area-main{padding:8px}.service-area-badge{display:inline-block;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.12);font-size:.65rem;color:#92eaff}
.service-area-main h3{margin:.65rem 0 .45rem;color:#fff;font-size:1.45rem}.service-area-main p{margin:0;color:rgba(255,255,255,.72);line-height:1.7}
.service-area-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;align-content:center}.service-area-list span{padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.10);font-size:.8rem}
.faq-v22{background:linear-gradient(180deg,#f6fbfd,#eef7fb)}.faq-list-v22{max-width:980px;margin:0 auto;display:grid;gap:10px}
.faq-list-v22 details{background:#fff;border:1px solid #deebf0;border-radius:15px;padding:0 17px;box-shadow:0 8px 22px rgba(7,70,99,.045)}
.faq-list-v22 summary{cursor:pointer;list-style:none;padding:17px 32px 17px 0;color:#073b59;font-weight:600;position:relative}.faq-list-v22 summary::-webkit-details-marker{display:none}
.faq-list-v22 summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#edf8fc;color:#078caf}
.faq-list-v22 details[open] summary::after{content:"–";background:#078caf;color:#fff}.faq-list-v22 details p{margin:0;padding:0 36px 17px 0;color:#6d8390;line-height:1.7;font-size:.84rem}
.lead-v22{background:#fff}.lead-v22-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:start}.lead-v22-copy{padding-top:18px}
.lead-v22-copy h2{margin:.65rem 0 .8rem;color:#062f4e;font-size:clamp(2.15rem,3.2vw,3rem)}.lead-v22-copy p{color:#6d8390;line-height:1.75}
.lead-v22-points{display:grid;gap:8px;margin-top:18px}.lead-v22-points span{color:#17475e;font-size:.85rem}
.lead-form-v22{padding:25px;border:1px solid #dce9ef;border-radius:22px;background:#fafdfe;box-shadow:0 18px 42px rgba(8,78,108,.08)}
.lead-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lead-form-v22 label{display:block;margin-bottom:12px;color:#426375;font-size:.72rem}
.lead-form-v22 input,.lead-form-v22 select,.lead-form-v22 textarea{width:100%;margin-top:6px;padding:11px 12px;border:1px solid #d8e7ee;border-radius:10px;background:#fff;color:#123f55;outline:none}
.lead-form-v22 input:focus,.lead-form-v22 select:focus,.lead-form-v22 textarea:focus{border-color:#5fc5df;box-shadow:0 0 0 3px rgba(12,166,205,.08)}
.lead-consent-v22{display:flex!important;gap:8px;align-items:flex-start}.lead-consent-v22 input{width:auto;margin-top:3px}.lead-consent-v22 a{color:#078caf}
.lead-submit-v22{width:100%;min-height:48px;border:0;border-radius:11px;background:linear-gradient(135deg,#0784b4,#08a8ca);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 10px 22px rgba(8,139,181,.2)}
.lead-form-note-v22{text-align:center;margin:.7rem 0 0;color:#77909e;font-size:.7rem}.lead-form-note-v22 a{color:#19a947;font-weight:700}
.cookie-v22{position:fixed;left:22px;right:22px;bottom:18px;z-index:1500;max-width:980px;margin:auto;padding:13px 15px;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(5,31,46,.96);color:#fff;box-shadow:0 16px 44px rgba(0,0,0,.24)}
.cookie-v22[hidden]{display:none!important}.cookie-v22 strong{display:block;font-size:.82rem}.cookie-v22 span{display:block;margin-top:2px;color:rgba(255,255,255,.68);font-size:.68rem}
.cookie-actions-v22{display:flex;gap:8px;align-items:center}.cookie-actions-v22 a{color:#8bddf1;font-size:.7rem}.cookie-actions-v22 button{border:0;border-radius:9px;background:#16b64a;color:#fff;padding:9px 13px;font-weight:650;cursor:pointer}
@media(max-width:800px){.service-area-grid,.lead-v22-grid{grid-template-columns:1fr}.service-area-list{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.service-area-v22,.faq-v22,.lead-v22{padding:52px 0}.service-area-list{grid-template-columns:repeat(2,1fr)}.lead-form-row{grid-template-columns:1fr}.cookie-v22{left:10px;right:10px;bottom:10px;align-items:flex-start;flex-direction:column}.cookie-actions-v22{width:100%;justify-content:flex-end}}


/* =========================================================
   HERO V23 — SOLAR-FIRST / Google Ads landing hero
   ========================================================= */
.hero{
  min-height:calc(100vh - 96px) !important;
}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(1,34,55,.70) 0%,rgba(2,72,101,.48) 42%,rgba(0,88,117,.18) 68%,rgba(0,60,83,.25) 100%) !important;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:1;
  right:8%;
  top:8%;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,218,67,.22) 0%,rgba(255,218,67,.07) 38%,transparent 70%);
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:3;
  max-width:920px !important;
  padding-top:68px !important;
  padding-bottom:54px !important;
}
.hero-badge{
  display:inline-flex !important;
  align-items:center;
  gap:9px;
  min-height:39px;
  padding:0 15px !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:999px !important;
  background:rgba(5,55,78,.22) !important;
  backdrop-filter:blur(5px);
  color:#fff !important;
  font-size:.69rem !important;
  font-weight:650 !important;
  letter-spacing:.09em !important;
}
.hero-badge::before{
  content:"";
  width:9px;height:9px;border-radius:50%;
  background:#ffd84d;
  box-shadow:0 0 0 5px rgba(255,216,77,.12),0 0 18px rgba(255,216,77,.42);
}
.hero h1{
  max-width:900px !important;
  margin:19px 0 15px !important;
  color:#fff !important;
  font-family:var(--font-display) !important;
  font-size:clamp(3.15rem,5.3vw,5.25rem) !important;
  line-height:1.04 !important;
  font-weight:600 !important;
  letter-spacing:-.045em !important;
  text-shadow:0 5px 25px rgba(0,34,56,.23) !important;
}
.hero h1 .hl{
  display:inline-block;
  margin-top:5px;
  color:#70ef88 !important;
  font-weight:600 !important;
}
.hero-sub{
  max-width:760px !important;
  margin:0 !important;
  color:rgba(255,255,255,.91) !important;
  font-size:1.02rem !important;
  line-height:1.78 !important;
  font-weight:400 !important;
  text-shadow:0 2px 10px rgba(0,40,60,.16);
}
.hero-solar-proof-v23{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  color:rgba(255,255,255,.83);
  font-size:.68rem;
}
.hero-solar-proof-v23 span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(4px);
}
.hero-solar-proof-v23 i{
  font-style:normal;
  color:#79e8ff;
}
.hero-cta{
  display:flex !important;
  gap:12px !important;
  margin-top:25px !important;
}
.hero-cta .btn{
  min-height:52px !important;
  padding:0 22px !important;
  border-radius:13px !important;
  font-size:.84rem !important;
  font-weight:700 !important;
}
.hero-cta .btn-green{
  background:linear-gradient(135deg,#16b947,#0ba238) !important;
  box-shadow:0 14px 28px rgba(15,174,63,.26) !important;
  border:1px solid rgba(255,255,255,.11) !important;
}
.hero-cta .btn-outline-white{
  background:rgba(4,47,70,.26) !important;
  border:1px solid rgba(255,255,255,.38) !important;
  backdrop-filter:blur(5px);
  box-shadow:none !important;
}
.hero-cta .btn:hover{transform:translateY(-2px) !important}

/* Technical system cards become more sales-focused */
.hero-stats{
  max-width:900px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:34px !important;
}
.hero-stats .hstat{
  position:relative;
  min-height:108px !important;
  padding:17px 17px 15px !important;
  border-radius:17px !important;
  background:linear-gradient(145deg,rgba(3,57,82,.42),rgba(9,109,137,.22)) !important;
  border:1px solid rgba(255,255,255,.27) !important;
  backdrop-filter:blur(8px) !important;
  box-shadow:0 12px 30px rgba(1,35,54,.12);
  overflow:hidden;
}
.hero-stats .hstat::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#37d8f3,#5cec87);
}
.hero-stats .hstat b{
  display:block !important;
  color:#fff !important;
  font-family:var(--font-display) !important;
  font-size:1.08rem !important;
  font-weight:500 !important;
  line-height:1.25 !important;
}
.hero-stats .hstat span{
  display:block !important;
  margin-top:7px !important;
  color:rgba(255,255,255,.74) !important;
  font-size:.69rem !important;
  line-height:1.45 !important;
}

/* desktop wide */
@media(min-width:1400px){
  .hero-content{max-width:980px !important}
  .hero h1{font-size:5.15rem !important}
}

/* tablet */
@media(max-width:900px){
  .hero h1{font-size:clamp(2.8rem,8vw,4.2rem) !important}
  .hero-stats{grid-template-columns:repeat(2,1fr) !important}
}

/* mobile */
@media(max-width:600px){
  .hero-content{padding-top:45px !important;padding-bottom:40px !important}
  .hero h1{
    font-size:clamp(2.35rem,11vw,3.3rem) !important;
    line-height:1.08 !important;
  }
  .hero-sub{font-size:.91rem !important}
  .hero-solar-proof-v23 i{display:none}
  .hero-cta{flex-direction:column !important}
  .hero-cta .btn{width:100%}
  .hero-stats{grid-template-columns:1fr 1fr !important;gap:8px !important;margin-top:24px !important}
  .hero-stats .hstat{min-height:94px !important;padding:14px !important}
  .hero-stats .hstat b{font-size:.92rem !important}
}


/* =========================================================
   V24 — Google Ads page order
   Hero -> Project Showcase immediately
   ========================================================= */
#hero + #portfolio{
  position:relative;
  margin-top:0 !important;
}
#hero + #portfolio::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(1180px,88%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(7,145,183,.20),transparent);
}
#portfolio{
  scroll-margin-top:96px;
}


/* =========================================================
   SERVICES V25 — Premium Solar Solution Cards
   Visual only / CMS-safe
   ========================================================= */
.services-v25{
  position:relative;
  overflow:hidden;
  padding-top:76px !important;
  padding-bottom:84px !important;
  background:
    radial-gradient(circle at 8% 10%,rgba(0,164,210,.06),transparent 24%),
    linear-gradient(180deg,#f8fcfe 0%,#eef7fb 100%) !important;
}
.services-v25 .container{position:relative;z-index:2}
.services-v25 .sec-head{max-width:840px;margin-left:auto;margin-right:auto;margin-bottom:34px !important}

/* Cards grid */
.services-v25 .services-grid,
.services-v25 .svc-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
  align-items:stretch !important;
}

.services-v25 .svc-card{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:22px !important;
  background:#fff !important;
  border:1px solid rgba(7,91,126,.10) !important;
  box-shadow:0 15px 34px rgba(8,75,105,.075) !important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important;
}
.services-v25 .svc-card:hover{
  transform:translateY(-7px) !important;
  border-color:rgba(8,155,198,.28) !important;
  box-shadow:0 27px 50px rgba(7,75,106,.14) !important;
}

/* image */
.services-v25 .svc-card>img{
  width:100% !important;
  height:245px !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .55s ease,filter .35s ease !important;
}
.services-v25 .svc-card:hover>img{
  transform:scale(1.045) !important;
  filter:saturate(1.06) contrast(1.02) !important;
}

/* colored top rail gives system identity */
.services-v25 .svc-card::before{
  content:"SOLAR ON-GRID";
  position:absolute;
  z-index:3;
  top:18px;left:18px;
  padding:7px 10px;
  border-radius:999px;
  color:#fff;
  background:rgba(4,104,190,.90);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
  font-family:Arial,sans-serif;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.07em;
}
.services-v25 .svc-card:nth-child(2)::before{
  content:"HYBRID + BATTERY";
  background:rgba(0,137,92,.91);
}
.services-v25 .svc-card:nth-child(3)::before{
  content:"COMMERCIAL SOLAR";
  background:rgba(4,67,111,.91);
}

/* body */
.services-v25 .svc-card-body{
  flex:1;
  display:flex !important;
  flex-direction:column !important;
  padding:24px 25px 22px !important;
}
.services-v25 .svc-card-body h3{
  margin:0 0 9px !important;
  color:#063b59 !important;
  font-family:var(--font-display) !important;
  font-size:1.35rem !important;
  font-weight:500 !important;
  line-height:1.25 !important;
}
.services-v25 .svc-card-body h3::after{
  content:"";
  display:block;
  width:34px;height:2px;
  margin-top:11px;
  border-radius:2px;
  background:linear-gradient(90deg,#0aa9d0,#37b83c);
}
.services-v25 .svc-card-desc{
  min-height:68px;
  margin:0 0 15px !important;
  color:#6e8491 !important;
  font-size:.83rem !important;
  line-height:1.72 !important;
}
.services-v25 .svc-card-desc strong{
  color:#31576a !important;
  font-weight:600 !important;
}

/* bullet list as feature rows */
.services-v25 .svc-points{
  list-style:none !important;
  margin:0 0 18px !important;
  padding:0 !important;
  display:grid !important;
  gap:8px !important;
}
.services-v25 .svc-points li{
  position:relative;
  padding:10px 10px 10px 38px !important;
  border-radius:11px;
  background:#f7fbfd;
  border:1px solid #e8f1f4;
  color:#55717f !important;
  font-size:.76rem !important;
  line-height:1.55 !important;
}
.services-v25 .svc-points li::before{
  content:"✓";
  position:absolute;
  left:10px;top:11px;
  width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#14ad43,#16952f);
  font-size:.58rem;font-weight:800;
}
.services-v25 .svc-points strong{
  color:#17485e !important;
  font-weight:650 !important;
}

/* Existing bottom row: make it look intentional */
.services-v25 .svc-card-body>div:last-child{
  margin-top:auto !important;
  padding-top:16px !important;
  border-top:1px solid #e9f1f4;
  gap:12px !important;
}
.services-v25 .svc-card-body>div:last-child>div{
  max-width:62%;
  color:#123f57 !important;
  font-size:.75rem !important;
  line-height:1.5 !important;
  font-weight:600 !important;
}
.services-v25 .btn.btn-small{
  flex:none;
  min-height:40px !important;
  padding:0 13px !important;
  border-radius:10px !important;
  background:#e9f7fc !important;
  color:#087fa7 !important;
  border:1px solid #d6edf4 !important;
  font-size:.71rem !important;
  font-weight:650 !important;
  box-shadow:none !important;
}
.services-v25 .btn.btn-small:hover{
  background:#078fb7 !important;
  color:#fff !important;
  border-color:#078fb7 !important;
  transform:translateY(-1px) !important;
}

/* Distinguish the middle "hero" service */
.services-v25 .svc-card:nth-child(2){
  border-color:rgba(19,164,65,.18) !important;
}
.services-v25 .svc-card:nth-child(2) .btn.btn-small{
  background:#eaf9ef !important;
  color:#15973a !important;
  border-color:#d6efde !important;
}
.services-v25 .svc-card:nth-child(2) .btn.btn-small:hover{
  background:#16a743 !important;
  color:#fff !important;
}

/* Responsive */
@media(max-width:980px){
  .services-v25 .services-grid,
  .services-v25 .svc-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .services-v25 .svc-card:nth-child(3){
    grid-column:1/-1;
    max-width:620px;
    width:100%;
    justify-self:center;
  }
}
@media(max-width:650px){
  .services-v25{
    padding-top:54px !important;
    padding-bottom:58px !important;
  }
  .services-v25 .services-grid,
  .services-v25 .svc-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .services-v25 .svc-card:nth-child(3){
    grid-column:auto;
    max-width:none;
  }
  .services-v25 .svc-card>img{height:215px !important}
  .services-v25 .svc-card-body{padding:20px !important}
}


/* =========================================================
   V26 — GLOBAL VISUAL RHYTHM
   IMAGE → WHITE → LIGHT → DARK → WHITE → DARK → LIGHT ...
   ========================================================= */

/* Shared transitions */
.rhythm-white,.rhythm-light,.rhythm-dark{
  position:relative;
  isolation:isolate;
}
.rhythm-white{
  background:#fff !important;
}
.rhythm-light{
  background:
    radial-gradient(circle at 88% 12%,rgba(17,164,207,.055),transparent 24%),
    linear-gradient(180deg,#f5fbfd 0%,#edf7fb 100%) !important;
}
.rhythm-dark{
  color:#dcecf4 !important;
  background:
    radial-gradient(circle at 85% 10%,rgba(0,185,224,.13),transparent 26%),
    radial-gradient(circle at 8% 90%,rgba(43,179,67,.08),transparent 22%),
    linear-gradient(145deg,#031b2a 0%,#06344a 100%) !important;
}
.rhythm-dark::after{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(113,213,240,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(113,213,240,.025) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}

/* Clear but elegant separators */
.rhythm-white + .rhythm-light::before,
.rhythm-light + .rhythm-white::before,
.rhythm-dark + .rhythm-white::before,
.rhythm-white + .rhythm-dark::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  width:min(1180px,88%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(7,117,153,.14),transparent);
}

/* More varied vertical spacing */
#portfolio{padding-top:72px !important;padding-bottom:78px !important}
#clients{padding-top:58px !important;padding-bottom:62px !important}
#about{padding-top:82px !important;padding-bottom:84px !important}
#services{padding-top:74px !important;padding-bottom:80px !important}
#benefits{padding-top:80px !important;padding-bottom:84px !important}
#why{padding-top:64px !important;padding-bottom:68px !important}
#service-area{padding-top:60px !important;padding-bottom:64px !important}
#faq{padding-top:62px !important;padding-bottom:66px !important}
#lead-form{padding-top:78px !important;padding-bottom:82px !important}
#quote{padding-top:66px !important;padding-bottom:70px !important}

/* ---------------------------------------------------------
   ABOUT — dark corporate credibility break
   --------------------------------------------------------- */
#about.rhythm-dark .eyebrow{color:#6fe68b !important}
#about.rhythm-dark h2,
#about.rhythm-dark h3,
#about.rhythm-dark h4{color:#fff !important}
#about.rhythm-dark p,
#about.rhythm-dark .sec-lead{color:rgba(225,240,247,.72) !important}
#about.rhythm-dark .about-stat,
#about.rhythm-dark [class*="stat-card"]{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(126,221,245,.12) !important;
  color:#fff !important;
  backdrop-filter:blur(7px);
}
#about.rhythm-dark img{
  box-shadow:0 22px 50px rgba(0,0,0,.20) !important;
}

/* ---------------------------------------------------------
   BENEFITS — strongest credibility contrast section
   --------------------------------------------------------- */
#benefits.rhythm-benefits-dark{
  background:
    radial-gradient(circle at 10% 12%,rgba(0,190,226,.15),transparent 26%),
    radial-gradient(circle at 90% 82%,rgba(45,187,65,.11),transparent 24%),
    linear-gradient(145deg,#031927 0%,#06364a 100%) !important;
}
#benefits.rhythm-benefits-dark .benefits-text .eyebrow{color:#6ee88a !important}
#benefits.rhythm-benefits-dark .benefits-text h2{color:#fff !important}
#benefits.rhythm-benefits-dark .benefits-text .sec-lead{color:rgba(225,240,247,.70) !important}
#benefits.rhythm-benefits-dark .benefits-text::after{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(124,218,242,.13) !important;
  color:#8edff2 !important;
}
#benefits.rhythm-benefits-dark .bcard{
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.055)) !important;
  border-color:rgba(121,218,243,.13) !important;
  box-shadow:0 20px 42px rgba(0,0,0,.13) !important;
  backdrop-filter:blur(9px);
}
#benefits.rhythm-benefits-dark .bcard:hover{
  border-color:rgba(95,217,244,.30) !important;
  box-shadow:0 26px 48px rgba(0,0,0,.19) !important;
}
#benefits.rhythm-benefits-dark .bcard h4{color:#fff !important}
#benefits.rhythm-benefits-dark .bcard p{color:rgba(221,237,244,.67) !important}
#benefits.rhythm-benefits-dark .bcard::after{color:rgba(255,255,255,.055) !important}
#benefits.rhythm-benefits-dark .benefits-cards::before,
#benefits.rhythm-benefits-dark .benefits-cards::after{
  background:linear-gradient(to bottom,transparent,rgba(127,218,242,.11),transparent) !important;
}

/* ---------------------------------------------------------
   LEAD FORM — conversion block must visually stop the scroll
   --------------------------------------------------------- */
#lead-form.rhythm-lead-dark{
  background:
    radial-gradient(circle at 15% 10%,rgba(0,190,229,.17),transparent 28%),
    radial-gradient(circle at 90% 90%,rgba(37,184,63,.12),transparent 24%),
    linear-gradient(135deg,#031a29 0%,#06425a 100%) !important;
}
#lead-form.rhythm-lead-dark .lead-v22-copy .eyebrow{color:#72e78c !important}
#lead-form.rhythm-lead-dark .lead-v22-copy h2{color:#fff !important}
#lead-form.rhythm-lead-dark .lead-v22-copy p{color:rgba(225,240,247,.72) !important}
#lead-form.rhythm-lead-dark .lead-v22-points span{
  color:#d9edf5 !important;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
}
#lead-form.rhythm-lead-dark .lead-form-v22{
  background:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 28px 60px rgba(0,0,0,.22) !important;
}

/* ---------------------------------------------------------
   CLIENT/BRAND area — compact light band
   --------------------------------------------------------- */
#clients.rhythm-light{
  background:
    radial-gradient(circle at 50% 0%,rgba(8,159,201,.06),transparent 34%),
    linear-gradient(180deg,#f4fafc 0%,#edf6fa 100%) !important;
}
#clients.rhythm-light .brand-card,
#clients.rhythm-light .brand-item,
#clients.rhythm-light .logo-card,
#clients.rhythm-light .partner-logo{
  background:rgba(255,255,255,.92) !important;
}

/* ---------------------------------------------------------
   PROCESS/WHY — light technical zone
   --------------------------------------------------------- */
#why.rhythm-light{
  background:
    radial-gradient(circle at 8% 12%,rgba(9,166,209,.07),transparent 23%),
    linear-gradient(180deg,#f3fafd,#eaf5fa 100%) !important;
}

/* FAQ is slightly cooler than process to separate it */
#faq.rhythm-light{
  background:
    radial-gradient(circle at 90% 8%,rgba(16,158,201,.06),transparent 22%),
    linear-gradient(180deg,#eef7fb 0%,#f7fbfd 100%) !important;
}

/* Contact remains bright after dark lead form */
#quote.rhythm-white{
  background:
    radial-gradient(circle at 92% 10%,rgba(10,166,208,.055),transparent 24%),
    #fff !important;
}

/* Mobile: reduce vertical fatigue */
@media(max-width:700px){
  #portfolio,#clients,#about,#services,#benefits,#why,#service-area,#faq,#lead-form,#quote{
    padding-top:52px !important;
    padding-bottom:54px !important;
  }
}


/* =========================================================
   ABOUT V27 — premium dark corporate solar section
   ========================================================= */
.about-v27{
  padding:88px 0 86px !important;
  background:
    radial-gradient(circle at 84% 15%,rgba(27,180,223,.15),transparent 26%),
    radial-gradient(circle at 12% 85%,rgba(31,166,55,.10),transparent 22%),
    linear-gradient(145deg,#021923 0%,#043447 58%,#052a3d 100%) !important;
}
.about-v27::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(110,218,245,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,218,245,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 86%,transparent);
}
.about-v27 .container{position:relative;z-index:2}
.about-v27 .about-flex{
  display:grid !important;
  grid-template-columns:1.03fr .97fr !important;
  gap:74px !important;
  align-items:center !important;
}
.about-v27 .about-content{
  max-width:650px;
}
.about-v27 .eyebrow{
  display:inline-flex !important;
  align-items:center;
  gap:9px;
  color:#74ec8c !important;
  font-size:.69rem !important;
  font-weight:650 !important;
  letter-spacing:.12em !important;
}
.about-v27 .eyebrow::before{
  content:"";
  width:28px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#36d9f3,#5fe47c);
}
.about-v27 h2{
  margin:.72rem 0 .8rem !important;
  color:#fff !important;
  font-size:clamp(2.35rem,3.5vw,3.4rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.03em !important;
}
.about-v27 .sec-lead{
  color:#e8f5fa !important;
  font-size:1rem !important;
  line-height:1.72 !important;
  font-weight:500 !important;
}
.about-v27 .about-desc{
  color:rgba(221,238,245,.67) !important;
  font-size:.87rem !important;
  line-height:1.82 !important;
  margin-top:16px !important;
}

/* image becomes stronger credibility element */
.about-v27 .about-image{
  position:relative;
}
.about-v27 .about-image::before{
  content:"";
  position:absolute;
  left:-16px;top:22px;bottom:22px;
  width:4px;border-radius:5px;
  background:linear-gradient(#45dff5,#61e47a);
}
.about-v27 .about-image::after{
  content:"ทีมติดตั้งจริง • สำรวจ • ติดตั้ง • ทดสอบ";
  position:absolute;
  left:18px;bottom:18px;
  padding:8px 11px;border-radius:999px;
  color:#fff;background:rgba(2,29,42,.66);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(7px);
  font-size:.63rem;font-weight:600;
}
.about-v27 .about-image img{
  width:100% !important;
  height:455px !important;
  object-fit:cover !important;
  border-radius:24px !important;
  border:1px solid rgba(124,218,243,.12);
  box-shadow:0 28px 65px rgba(0,0,0,.28) !important;
}

/* capability strip */
.about-trust-v27{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin:34px 0 20px;
  padding:12px 15px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(120,217,243,.10);
  color:#9ddff0;
  font-size:.65rem;
  letter-spacing:.04em;
}
.about-trust-v27 i{
  width:4px;height:4px;border-radius:50%;
  background:#5ce67b;
  box-shadow:0 0 0 4px rgba(92,230,123,.07);
}

/* stats become glass cards integrated with section */
.about-v27 .about-grid.small-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:0 !important;
}
.about-v27 .about-card{
  min-height:118px !important;
  padding:20px 19px !important;
  border-radius:17px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.045)) !important;
  border:1px solid rgba(121,218,243,.12) !important;
  box-shadow:0 16px 32px rgba(0,0,0,.10) !important;
  backdrop-filter:blur(8px);
  text-align:left !important;
  transition:.23s ease !important;
}
.about-v27 .about-card:hover{
  transform:translateY(-4px);
  border-color:rgba(91,220,244,.28) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.06)) !important;
}
.about-v27 .about-card .ac-num{
  color:#65ddf4 !important;
  font-family:var(--font-display) !important;
  font-size:1.18rem !important;
  font-weight:500 !important;
}
.about-v27 .about-card:nth-child(2) .ac-num,
.about-v27 .about-card:nth-child(4) .ac-num{
  color:#69e883 !important;
}
.about-v27 .about-card p{
  margin:7px 0 0 !important;
  color:rgba(225,240,246,.65) !important;
  font-size:.72rem !important;
  line-height:1.5 !important;
}

/* Responsive */
@media(max-width:980px){
  .about-v27 .about-flex{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .about-v27 .about-content{max-width:760px}
  .about-v27 .about-image img{height:380px !important}
  .about-v27 .about-grid.small-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:620px){
  .about-v27{padding:56px 0 !important}
  .about-v27 .about-image img{height:300px !important}
  .about-v27 .about-image::after{font-size:.56rem;left:12px;bottom:12px}
  .about-trust-v27{margin-top:24px}
  .about-v27 .about-grid.small-grid{grid-template-columns:1fr 1fr !important;gap:9px !important}
  .about-v27 .about-card{min-height:104px !important;padding:16px !important}
}


/* =========================================================
   VALUE V28 — rebuilt process section, no overflow
   ========================================================= */
.value-v28{
  position:relative !important;
  overflow:hidden !important;
  padding:78px 0 82px !important;
  background:
    radial-gradient(circle at 6% 12%,rgba(10,168,211,.07),transparent 26%),
    linear-gradient(145deg,#f8fcfe 0%,#edf7fb 100%) !important;
}
.value-v28 .container.value-grid{
  width:min(1180px,90%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:68px !important;
  align-items:center !important;
}
.value-v28 .value-cms-image-v28{
  display:none !important;
}

/* left panel */
.value-v28 .value-media{
  min-width:0 !important;
  width:100% !important;
  padding:0 !important;
  background:none !important;
  overflow:visible !important;
}
.value-v28 .value-process-v28{
  width:100% !important;
  box-sizing:border-box !important;
  padding:30px 30px 28px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid #dceaf0 !important;
  box-shadow:0 20px 48px rgba(8,79,110,.09) !important;
}
.value-process-head-v28{
  padding-bottom:20px;
  margin-bottom:6px;
  border-bottom:1px solid #e7f0f4;
}
.value-process-head-v28>span{
  display:block;
  color:#0794bb;
  font-family:Arial,sans-serif;
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.13em;
}
.value-process-head-v28 h3{
  margin:5px 0 2px !important;
  color:#073a58 !important;
  font-family:var(--font-display) !important;
  font-size:1.25rem !important;
  font-weight:500 !important;
  line-height:1.3 !important;
}
.value-process-head-v28 p{
  margin:0 !important;
  color:#8297a2 !important;
  font-size:.72rem !important;
  line-height:1.5 !important;
}

/* vertical timeline — impossible to overflow sideways */
.value-timeline-v28{
  position:relative;
  display:grid;
  gap:0;
}
.value-timeline-v28::before{
  content:"";
  position:absolute;
  left:24px;
  top:37px;
  bottom:37px;
  width:2px;
  background:linear-gradient(#16b7d9,#0e8fc1 55%,#24ad3a);
  opacity:.30;
}
.value-step-v28{
  position:relative;
  display:grid !important;
  grid-template-columns:50px minmax(0,1fr) !important;
  gap:15px !important;
  align-items:start !important;
  padding:15px 0 !important;
  min-width:0 !important;
}
.vs-num{
  position:relative;
  z-index:2;
  width:48px;height:48px;
  border-radius:14px;
  display:grid;place-items:center;
  background:#eef9fc;
  border:1px solid #d8edf3;
  color:#086887;
  font-family:Arial,sans-serif;
  font-size:.76rem;
  font-weight:800;
  box-shadow:0 5px 13px rgba(9,100,135,.07);
}
.value-step-v28:nth-child(3) .vs-num,
.value-step-v28:nth-child(4) .vs-num{
  background:#edf9f0;
  border-color:#d9efde;
  color:#188b31;
}
.vs-copy{
  min-width:0 !important;
  padding:3px 0 0 !important;
}
.vs-copy strong{
  display:block;
  color:#0a3b55;
  font-family:var(--font-display);
  font-size:.9rem;
  font-weight:500;
  line-height:1.4;
}
.vs-copy span{
  display:block;
  margin-top:4px;
  color:#718995;
  font-size:.7rem;
  line-height:1.55;
  overflow-wrap:anywhere;
}

/* right side */
.value-v28 .value-text{
  min-width:0 !important;
  max-width:580px !important;
  padding:0 !important;
}
.value-v28 .value-text .eyebrow{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  color:#15932e !important;
  font-size:.7rem !important;
  font-weight:650 !important;
  letter-spacing:.1em !important;
}
.value-v28 .value-text .eyebrow::before{
  content:"";
  width:27px;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#0aa8d0,#20a832);
}
.value-v28 .value-text h2{
  margin:.7rem 0 1.05rem !important;
  color:#062f4d !important;
  font-family:var(--font-display) !important;
  font-size:clamp(2.35rem,3.45vw,3.25rem) !important;
  line-height:1.15 !important;
  font-weight:600 !important;
  letter-spacing:-.03em !important;
}
.value-v28 .check-list{
  display:grid !important;
  gap:9px !important;
  padding:0 !important;
  margin:0 0 22px !important;
  list-style:none !important;
}
.value-v28 .check-list li{
  position:relative !important;
  min-height:44px !important;
  padding:10px 12px 10px 45px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid #e1edf2 !important;
  color:#234a5d !important;
  font-size:.82rem !important;
  line-height:1.55 !important;
  overflow-wrap:anywhere !important;
}
.value-v28 .check-list li::before{
  content:"✓" !important;
  position:absolute !important;
  left:11px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:25px !important;height:25px !important;
  border-radius:50% !important;
  display:grid !important;place-items:center !important;
  background:linear-gradient(145deg,#0aaed0,#078bb7) !important;
  color:#fff !important;
  font-size:.72rem !important;
  font-weight:800 !important;
}
.value-v28 .value-text .btn{
  min-height:48px !important;
  padding:0 19px !important;
  border-radius:11px !important;
  background:linear-gradient(135deg,#0784b4,#08a7c9) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(8,139,181,.20) !important;
  font-size:.78rem !important;
  font-weight:700 !important;
}

/* wipe out decorative artifacts inherited from older V21 */
.value-v28 .value-media::before,
.value-v28 .value-media::after,
.value-v28 .value-process-v28::before,
.value-v28 .value-process-v28::after{
  content:none !important;
}

/* Responsive */
@media(max-width:900px){
  .value-v28 .container.value-grid{
    grid-template-columns:1fr !important;
    gap:38px !important;
    width:min(760px,90%) !important;
  }
  .value-v28 .value-text{max-width:none !important}
}
@media(max-width:560px){
  .value-v28{padding:54px 0 58px !important}
  .value-v28 .value-process-v28{padding:22px 19px !important}
  .value-v28 .value-text h2{
    font-size:clamp(2rem,10vw,2.7rem) !important;
  }
  .value-step-v28{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:12px !important;
  }
  .vs-num{width:42px;height:42px;border-radius:12px}
  .value-timeline-v28::before{left:20px;top:34px;bottom:34px}
}

/* V29 REAL USER-SUPPLIED BRAND LOGOS */
#clients .client-logos{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:10px!important}
#clients .clogo{height:108px!important;min-height:108px!important;padding:9px!important;border-radius:15px!important;background:#fff!important;border:1px solid #dce9ef!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
#clients .clogo img{width:100%!important;height:78px!important;max-width:100%!important;max-height:78px!important;object-fit:contain!important}
#clients .clogo span{display:none!important}
@media(max-width:1100px){#clients .client-logos{grid-template-columns:repeat(4,1fr)!important}}
@media(max-width:650px){#clients .client-logos{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}#clients .clogo{height:94px!important;min-height:94px!important}#clients .clogo img{height:66px!important;max-height:66px!important}}


/* =========================================================
   V30 — BRAND LOGOS: tighter crop + larger visual occupancy
   ========================================================= */
#clients .client-logos{
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}
#clients .clogo{
  height:122px !important;
  min-height:122px !important;
  padding:8px 12px !important;
  border-radius:17px !important;
  background:#fff !important;
  border:1px solid #d6e6ed !important;
  box-shadow:0 9px 22px rgba(6,75,105,.055) !important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease !important;
}
#clients .clogo:hover{
  transform:translateY(-4px) !important;
  border-color:#9dd7e5 !important;
  box-shadow:0 16px 30px rgba(6,83,116,.10) !important;
}
#clients .clogo img{
  width:100% !important;
  height:94px !important;
  max-width:100% !important;
  max-height:94px !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:scale(1.08) !important;
}
#clients .clogo span{display:none !important}

/* compact logos need a little extra visual scale */
#clients .clogo:nth-child(3) img{transform:scale(1.30) !important} /* PSI */
#clients .clogo:nth-child(7) img{transform:scale(1.18) !important} /* Thornova */

@media(max-width:1100px){
  #clients .client-logos{grid-template-columns:repeat(4,1fr) !important}
  #clients .clogo{height:116px !important;min-height:116px !important}
}
@media(max-width:650px){
  #clients .client-logos{grid-template-columns:repeat(2,1fr) !important;gap:9px !important}
  #clients .clogo{height:104px !important;min-height:104px !important;padding:7px 10px !important}
  #clients .clogo img{height:82px !important;max-height:82px !important}
}


/* V31 — Thornova: original supplied logo, navy background removed */
#clients .clogo:nth-child(7) img{
  width:100% !important;
  height:94px !important;
  max-width:100% !important;
  max-height:94px !important;
  object-fit:contain !important;
  transform:scale(1.12) !important;
}
@media(max-width:650px){
  #clients .clogo:nth-child(7) img{
    height:82px !important;
    max-height:82px !important;
    transform:scale(1.08) !important;
  }
}


/* V32 — Thornova readable on white card */
#clients .clogo:nth-child(7) img{
  width:100% !important;
  height:94px !important;
  max-width:100% !important;
  max-height:94px !important;
  object-fit:contain !important;
  transform:scale(1.18) !important;
  opacity:1 !important;
  filter:none !important;
}
@media(max-width:650px){
  #clients .clogo:nth-child(7) img{
    transform:scale(1.12) !important;
  }
}


/* V33 — Contact uses the REAL supplied NEXT GEN logo */
#quote .contact-logo-real-v33{
  width:112px !important;
  height:82px !important;
  max-width:112px !important;
  max-height:82px !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
  opacity:1 !important;
  transform:none !important;
}
@media(max-width:650px){
  #quote .contact-logo-real-v33{
    width:96px !important;
    height:72px !important;
  }
}

/* V34 PROFESSIONAL PRICING */
.pricing-v34{padding:76px 0 82px!important;background:linear-gradient(180deg,#f3fafc,#eaf5fa)!important}
.pricing-head-v34{max-width:900px;margin:0 auto 26px}
.price-filters-v34{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:25px}
.price-filters-v34 button{border:1px solid #d5e6ed;background:#fff;color:#476879;min-height:39px;padding:0 15px;border-radius:999px;font-family:var(--font-body);font-size:.72rem;font-weight:600;cursor:pointer}
.price-filters-v34 button.active{background:#087fa8;color:#fff;border-color:#087fa8;box-shadow:0 8px 18px rgba(8,127,168,.16)}
.price-grid-v34{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.price-card-v34{position:relative;padding:22px;border-radius:20px;background:#fff;border:1px solid #dce9ef;box-shadow:0 14px 34px rgba(8,74,104,.07);transition:.22s}
.price-card-v34:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(8,74,104,.12)}
.price-card-v34.featured{border:1px solid rgba(24,170,68,.35);box-shadow:0 18px 42px rgba(21,151,61,.10)}
.price-brand-v34{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #e9f1f4}
.price-brand-v34 small{display:block;color:#159a3a;font-size:.58rem;font-weight:700;letter-spacing:.08em}.price-brand-v34 h3{margin:3px 0 0;color:#073b59;font-size:1.15rem;font-weight:500}.price-brand-v34>b{padding:6px 8px;border-radius:999px;background:#eef8fb;color:#087d9f;font-size:.6rem}
.price-desc-v34{min-height:43px;margin:13px 0;color:#718895;font-size:.73rem;line-height:1.55}
.price-start-v34{display:flex;align-items:baseline;gap:6px;margin:4px 0 15px}.price-start-v34 span{color:#7b909b;font-size:.65rem}.price-start-v34 strong{color:#073c59;font-family:var(--font-display);font-size:1.85rem;font-weight:600}.price-start-v34 em{font-style:normal;color:#159a3a;font-size:.68rem;font-weight:600}
.package-list-v34{display:grid;gap:7px}.package-list-v34>div{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 11px;border-radius:11px;background:#f7fbfd;border:1px solid #e8f1f4}.package-list-v34 b{color:#17465b;font-size:.72rem}.package-list-v34 span{grid-column:1;color:#80939d;font-size:.62rem}.package-list-v34 strong{grid-column:2;grid-row:1/span 2;align-self:center;color:#087ea5;font-size:.78rem}
.price-cta-v34{display:flex;align-items:center;justify-content:center;min-height:43px;margin-top:15px;border-radius:10px;background:linear-gradient(135deg,#0784b4,#08a7ca);color:#fff;font-size:.72rem;font-weight:700;box-shadow:0 9px 20px rgba(8,139,181,.16)}
.price-card-v34.featured .price-cta-v34{background:linear-gradient(135deg,#18b849,#119d39)}
.price-note-v34{margin-top:22px;padding:18px 20px;border-radius:16px;background:linear-gradient(120deg,#063b58,#076f8d);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.price-note-v34 strong{display:block;font-size:.9rem}.price-note-v34 span{display:block;margin-top:3px;color:rgba(255,255,255,.68);font-size:.66rem}.price-note-v34 a{flex:none;padding:11px 14px;border-radius:9px;background:#17b848;color:#fff;font-size:.7rem;font-weight:700}
.price-card-v34.price-hidden{display:none!important}
@media(max-width:1050px){.price-grid-v34{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.pricing-v34{padding:54px 0!important}.price-filters-v34{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}.price-filters-v34 button{flex:none}.price-grid-v34{grid-template-columns:1fr}.price-note-v34{align-items:flex-start;flex-direction:column}.price-note-v34 a{width:100%;text-align:center}}

/* =========================================================
   V35 — Pricing with REAL user-supplied equipment imagery
   ========================================================= */
.pricing-v34{
  background:
    radial-gradient(circle at 84% 4%,rgba(255,202,91,.13),transparent 22%),
    radial-gradient(circle at 8% 12%,rgba(9,165,207,.07),transparent 24%),
    linear-gradient(180deg,#f8fcfe 0%,#edf7fb 100%) !important;
}
.price-grid-v34{gap:18px !important}
.price-card-v34{
  padding:0 !important;
  overflow:hidden !important;
  border-radius:22px !important;
  background:#fff !important;
}
.price-brand-v34{
  padding:19px 20px 13px !important;
  border-bottom:0 !important;
}
.price-visual-v35{
  height:185px;
  margin:0 13px 6px;
  overflow:hidden;
  border-radius:15px;
  background:#eef4f6;
  border:1px solid #e1ebef;
}
.price-visual-v35 img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}
.price-card-v34:hover .price-visual-v35 img{transform:scale(1.025)}
.price-desc-v34{padding:0 20px !important;margin:12px 0 7px !important;min-height:38px !important}
.price-start-v34{padding:0 20px !important;margin:0 0 13px !important}
.package-list-v34{padding:0 13px !important}
.price-cta-v34{margin:15px 13px 14px !important}
.price-card-v34.featured::before{
  content:"POPULAR";
  position:absolute;z-index:5;top:10px;right:10px;
  padding:5px 8px;border-radius:999px;
  background:#17b84a;color:#fff;font-family:Arial,sans-serif;
  font-size:.52rem;font-weight:800;letter-spacing:.06em;
  box-shadow:0 6px 14px rgba(23,184,74,.18);
}
.price-brand-v34>b{margin-right:0}
.price-trust-v35{
  margin-top:24px;padding:24px;border-radius:20px;
  background:#fff;border:1px solid #dce9ef;
  box-shadow:0 14px 34px rgba(7,75,104,.06);
}
.price-trust-v35 h3{
  margin:0 0 18px;text-align:center;color:#073b59;
  font-family:var(--font-display);font-size:1.25rem;font-weight:500;
}
.price-trust-v35>div{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.price-trust-v35 span{
  min-width:0;text-align:center;padding:15px 9px;border-radius:13px;background:#f7fbfd;
}
.price-trust-v35 b{
  width:34px;height:34px;margin:0 auto 8px;border-radius:50%;
  display:grid;place-items:center;background:#e8f8ee;color:#159b3a;font-size:.8rem;
}
.price-trust-v35 strong{display:block;color:#17475d;font-size:.72rem}
.price-trust-v35 small{display:block;margin-top:4px;color:#82959e;font-size:.59rem;line-height:1.45}

@media(max-width:1050px){
  .price-visual-v35{height:205px}
  .price-trust-v35>div{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .price-visual-v35{height:210px}
  .price-trust-v35>div{grid-template-columns:1fr 1fr}
}

/* =========================================================
   V36 — PRICING MATCH APPROVED REFERENCE
   ========================================================= */
.pricing-v34{
  padding:0 !important;
  background:
    radial-gradient(circle at 92% 6%,rgba(255,219,149,.22),transparent 24%),
    radial-gradient(circle at 8% 10%,rgba(102,193,221,.12),transparent 26%),
    linear-gradient(180deg,#f8fbfc 0%,#eff7fb 100%) !important;
}
.pricing-shell-v36{padding-top:48px !important;padding-bottom:48px !important}
.pricing-hero-v36{
  position:relative;min-height:150px;margin-bottom:8px;display:flex;align-items:flex-start;justify-content:space-between;
  overflow:hidden;
}
.pricing-copy-v36{position:relative;z-index:2;max-width:700px;margin:0 auto;text-align:center}
.pricing-kicker-v36{color:#1aa139;font-size:.64rem;font-weight:700;letter-spacing:.1em}
.pricing-copy-v36 h2{margin:.35rem 0 .4rem;color:#092f4d;font-size:clamp(2rem,3.3vw,3rem);font-weight:700}
.pricing-copy-v36 p{margin:0;color:#718594;font-size:.78rem;line-height:1.6}
.pricing-roof-v36{position:absolute;right:0;top:-26px;width:320px;height:180px;opacity:.55}
.roof-sky{position:absolute;inset:0;background:radial-gradient(circle at 72% 38%,#fff7d7 0 7%,transparent 8%),linear-gradient(180deg,#dff4ff,#fff)}
.roof-house{position:absolute;right:5px;bottom:-5px;width:260px;height:120px;background:#d5c4ad;clip-path:polygon(20% 33%,53% 0,100% 26%,100% 100%,8% 100%)}
.roof-panel{position:absolute;left:88px;top:25px;width:138px;height:56px;background:repeating-linear-gradient(90deg,#203b61 0 18px,#456183 19px 20px);transform:skewY(-18deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.price-filters-v36{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0 25px;position:relative;z-index:3}
.price-filters-v36 button{min-height:38px;padding:0 17px;border-radius:999px;border:1px solid #d8e5eb;background:#fff;color:#58707d;font-family:var(--font-body);font-size:.72rem;font-weight:600;cursor:pointer;box-shadow:0 4px 10px rgba(8,75,105,.035)}
.price-filters-v36 button.active{background:#0780a9;color:#fff;border-color:#0780a9}
.price-grid-v36{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.price-card-v36{
  --accent:#0b83b4;--accent2:#0a6f9b;
  position:relative;padding:14px;border-radius:18px;background:#fff;border:1px solid #dce7ec;
  box-shadow:0 10px 26px rgba(8,74,104,.07);overflow:hidden;transition:.2s;
}
.price-card-v36:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(8,74,104,.11)}
.theme-sig{--accent:#14b64b;--accent2:#069a3b;border-color:#9ad8ae}
.theme-solis{--accent:#ff8a00;--accent2:#ff6c00}
.theme-deye{--accent:#123d9c;--accent2:#092f7e}
.theme-goodwe{--accent:#ed1b24;--accent2:#d20811}
.theme-psi{--accent:#0875c9;--accent2:#0756a0}
.theme-thorn{--accent:#ff7a00;--accent2:#ef5c00}
.price-card-top-v36{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:42px}
.price-logo-v36{height:34px;display:flex;align-items:center}.price-logo-v36 img{max-height:30px;max-width:150px;object-fit:contain}.price-logo-v36 strong{font-size:1rem;color:#183f55}
.price-badges-v36{display:flex;flex-direction:column;gap:5px;align-items:flex-end}.price-badges-v36 span{padding:5px 8px;border-radius:999px;background:#ecfaef;color:#249843;font-size:.55rem;font-weight:650}.price-badges-v36 b{padding:5px 8px;border-radius:999px;background:#14b64b;color:#fff;font-size:.55rem}
.price-image-slot-v36{
  height:130px;margin:6px 0 12px;border:1.5px dashed #cdd9df;border-radius:12px;background:linear-gradient(180deg,#fff,#fafcfd);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9aabb3;text-align:center
}
.slot-icon-v36{font-size:1.45rem;color:#9eabb2}.price-image-slot-v36 strong{margin-top:2px;font-size:.72rem;font-weight:500}.price-image-slot-v36 small{margin-top:2px;font-size:.56rem}
.price-start-v36{display:flex;flex-direction:column;gap:0;margin-bottom:8px}.price-start-v36 span{font-size:.58rem;color:#7c909a}.price-start-v36 strong{color:var(--accent);font-size:1.75rem;line-height:1.1;font-weight:700}
.price-bar-v36{margin:0 -1px 6px;padding:7px 10px;border-radius:7px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;text-align:center;font-size:.66rem;font-weight:650}
.price-list-v36{display:grid}.price-list-v36>div{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 2px;border-bottom:1px solid #edf2f4}.price-list-v36>div:last-child{border-bottom:0}
.price-list-v36 b{display:block;color:#173e53;font-size:.67rem}.price-list-v36 span{display:block;margin-top:2px;color:#758b96;font-size:.56rem}.price-list-v36>div>strong{align-self:center;color:var(--accent);font-size:.66rem}
.price-cta-v36{display:flex;align-items:center;justify-content:center;min-height:38px;margin-top:10px;border-radius:7px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font-size:.65rem;font-weight:700}
.price-card-v36.price-hidden{display:none!important}

.pricing-benefits-v36,.pricing-brands-v36{margin-top:18px;border-radius:18px;background:#fff;border:1px solid #dfe9ee;box-shadow:0 10px 26px rgba(8,74,104,.055)}
.pricing-benefits-v36{padding:23px 22px}.pricing-benefits-v36 h3,.pricing-brands-v36 h3{text-align:center;margin:0 0 16px;color:#103852;font-size:1.05rem}
.benefit-grid-v36{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.benefit-grid-v36>div{text-align:center}.benefit-grid-v36 i{width:42px;height:42px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;border:1px solid #d9e5ec;color:#0d3e72;font-style:normal;font-size:1rem}.benefit-grid-v36 b{display:block;color:#173d54;font-size:.66rem}.benefit-grid-v36 span{display:block;margin-top:2px;color:#718793;font-size:.57rem}
.pricing-brands-v36{padding:18px 20px}.pricing-brand-row-v36{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}.pricing-brand-row-v36 img{height:28px;max-width:120px;object-fit:contain}.brand-text-goodwe{font-weight:800;color:#e3161c;font-size:1rem}
.pricing-bottom-v36{margin-top:20px;padding:18px 22px;border-radius:14px;background:linear-gradient(90deg,#062f59,#073f73);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}
.pricing-bottom-left-v36,.pricing-bottom-contact-v36{display:flex;align-items:center;gap:14px}.shield-v36{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#ffcf3b}.pricing-bottom-left-v36 strong{display:block;font-size:.85rem}.pricing-bottom-left-v36 small{display:block;margin-top:3px;color:rgba(255,255,255,.62);font-size:.55rem}.pricing-bottom-contact-v36 small{display:block;color:rgba(255,255,255,.68);font-size:.57rem}.pricing-bottom-contact-v36 strong{display:block;color:#44df64;font-size:1.55rem;line-height:1.1}.pricing-bottom-contact-v36 a{padding:11px 17px;border-radius:9px;background:#1fc249;color:#fff;font-size:.68rem;font-weight:700}

@media(max-width:1050px){
  .price-grid-v36{grid-template-columns:repeat(2,1fr)}
  .pricing-roof-v36{opacity:.28}
}
@media(max-width:700px){
  .pricing-shell-v36{padding-top:36px!important;padding-bottom:36px!important}
  .pricing-hero-v36{min-height:135px}
  .pricing-roof-v36{display:none}
  .price-filters-v36{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px}
  .price-filters-v36 button{flex:none}
  .price-grid-v36{grid-template-columns:1fr}
  .price-image-slot-v36{height:180px}
  .benefit-grid-v36{grid-template-columns:repeat(2,1fr)}
  .pricing-bottom-v36{flex-direction:column;align-items:flex-start}
  .pricing-bottom-contact-v36{width:100%;justify-content:space-between}
}


/* V38 — Sigenergy logo supplied by user */
#pricing .theme-sig .price-logo-v36 img{
  max-width:170px !important;
  max-height:34px !important;
  width:auto !important;
  height:34px !important;
  object-fit:contain !important;
  filter:none !important;
  opacity:1 !important;
}

/* V39 — force real Sigenergy logo image in pricing card */
#pricing .theme-sig .price-logo-v36{
  width:150px !important;
  height:38px !important;
  display:flex !important;
  align-items:center !important;
}
#pricing .theme-sig .price-logo-v36 .sigenergy-logo-v39{
  display:block !important;
  width:145px !important;
  height:36px !important;
  max-width:145px !important;
  max-height:36px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:none !important;
  opacity:1 !important;
}

/* V40 — Sigenergy logo tight crop + full visual size */
#pricing .theme-sig .price-logo-v36{
  width:190px !important;
  height:44px !important;
  overflow:visible !important;
}
#pricing .theme-sig .price-logo-v36 .sigenergy-logo-v39{
  width:185px !important;
  height:42px !important;
  max-width:185px !important;
  max-height:42px !important;
  object-fit:contain !important;
  object-position:left center !important;
  transform:scale(1.08) !important;
  transform-origin:left center !important;
}

/* V41 — new user-supplied Sigenergy full wordmark */
#pricing .theme-sig .price-logo-v36{
  width:205px !important;
  height:42px !important;
  overflow:visible !important;
}
#pricing .theme-sig .price-logo-v36 .sigenergy-logo-v39{
  display:block !important;
  width:200px !important;
  height:40px !important;
  max-width:200px !important;
  max-height:40px !important;
  object-fit:contain !important;
  object-position:left center !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
}

/* V42 — GoodWe logo supplied by user */
#pricing .theme-goodwe .price-logo-v36{
  width:185px !important;
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
}
#pricing .theme-goodwe .price-logo-v36 .goodwe-logo-v42{
  display:block !important;
  width:180px !important;
  height:38px !important;
  max-width:180px !important;
  max-height:38px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:none !important;
  opacity:1 !important;
}

/* =========================================================
   V43 — GOOGLE ADS CLEANUP / less choice overload
   ========================================================= */
.ads-quick-cta-v43{
  width:min(1120px,90%);
  margin:28px auto 0;
  padding:16px 18px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(105deg,#063b58,#087b98);
  color:#fff;
  box-shadow:0 13px 28px rgba(7,76,104,.12);
}
.ads-quick-cta-v43 strong{display:block;font-size:.9rem}
.ads-quick-cta-v43 span{display:block;margin-top:2px;color:rgba(255,255,255,.70);font-size:.66rem}
.ads-quick-cta-v43 a{
  flex:none;padding:10px 14px;border-radius:9px;background:#17b849;color:#fff;
  font-size:.68rem;font-weight:700
}

/* Pricing should feel like a shortlist, not a catalogue */
#pricing .price-grid-v36{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
#pricing .price-card-v36{box-shadow:0 9px 22px rgba(8,74,104,.06) !important}
#pricing .pricing-shell-v36{padding-top:42px !important;padding-bottom:44px !important}

/* Compact lower funnel */
#about{padding-top:64px !important;padding-bottom:66px !important}
#faq{padding-top:54px !important;padding-bottom:58px !important}
#lead-form{padding-top:64px !important;padding-bottom:66px !important}
#quote{padding-top:58px !important;padding-bottom:62px !important}

@media(max-width:900px){
  #pricing .price-grid-v36{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:650px){
  .ads-quick-cta-v43{flex-direction:column;align-items:flex-start}
  .ads-quick-cta-v43 a{width:100%;text-align:center}
  #pricing .price-grid-v36{grid-template-columns:1fr !important}
}


/* V44 — single CTA after portfolio; duplicate CTA removed */
#portfolio .ads-quick-cta-v43{display:none!important}


/* =========================================================
   V46 — PORTFOLIO 6 CARDS / SLIDER PRESERVED
   ========================================================= */
#portfolio.portfolio-six-v46 .portfolio-viewport,
#portfolio.portfolio-six-v46 .portfolio-slider,
#portfolio.portfolio-six-v46 .portfolio-wrap{
  overflow:hidden !important;
}

/* 6 cards visible on wide desktop */
#portfolio.portfolio-six-v46 .portfolio-track{
  gap:12px !important;
}
#portfolio.portfolio-six-v46 .portfolio-card{
  flex:0 0 calc((100% - 60px) / 6) !important;
  min-width:calc((100% - 60px) / 6) !important;
  border-radius:15px !important;
}
#portfolio.portfolio-six-v46 .portfolio-card img,
#portfolio.portfolio-six-v46 .portfolio-card .portfolio-img{
  height:165px !important;
  object-fit:cover !important;
}
#portfolio.portfolio-six-v46 .portfolio-card-body{
  padding:13px 13px 14px !important;
}
#portfolio.portfolio-six-v46 .portfolio-card h3{
  font-size:.82rem !important;
  line-height:1.35 !important;
}
#portfolio.portfolio-six-v46 .portfolio-card p{
  font-size:.60rem !important;
  line-height:1.45 !important;
}
#portfolio.portfolio-six-v46 .portfolio-badge{
  font-size:.52rem !important;
  padding:5px 7px !important;
}

/* 4 cards tablet */
@media(max-width:1200px){
  #portfolio.portfolio-six-v46 .portfolio-card{
    flex-basis:calc((100% - 36px) / 4) !important;
    min-width:calc((100% - 36px) / 4) !important;
  }
}

/* 2 cards mobile/tablet */
@media(max-width:760px){
  #portfolio.portfolio-six-v46 .portfolio-card{
    flex-basis:calc((100% - 12px) / 2) !important;
    min-width:calc((100% - 12px) / 2) !important;
  }
  #portfolio.portfolio-six-v46 .portfolio-card img,
  #portfolio.portfolio-six-v46 .portfolio-card .portfolio-img{
    height:155px !important;
  }
}

/* 1 card narrow phones */
@media(max-width:480px){
  #portfolio.portfolio-six-v46 .portfolio-card{
    flex-basis:100% !important;
    min-width:100% !important;
  }
}


/* =========================================================
   V47 — REAL PORTFOLIO CARD SELECTOR: 6 visible desktop
   CMS renderer uses .p-card
   ========================================================= */
#portfolio.portfolio-six-v46 .portfolio-track{
  display:flex !important;
  gap:12px !important;
  overflow:visible !important;
}
#portfolio.portfolio-six-v46 .p-card,
#portfolio.portfolio-six-v46 .portfolio-card{
  flex:0 0 calc((100% - 60px) / 6) !important;
  width:calc((100% - 60px) / 6) !important;
  min-width:calc((100% - 60px) / 6) !important;
  max-width:calc((100% - 60px) / 6) !important;
}
#portfolio.portfolio-six-v46 .p-card .p-img,
#portfolio.portfolio-six-v46 .p-card img{
  height:150px !important;
  object-fit:cover !important;
}
#portfolio.portfolio-six-v46 .p-card .p-body{
  padding:12px !important;
}
#portfolio.portfolio-six-v46 .p-card h3{
  font-size:.76rem !important;
  line-height:1.35 !important;
}
#portfolio.portfolio-six-v46 .p-card p{
  font-size:.57rem !important;
}

/* 4 cards */
@media(max-width:1200px){
  #portfolio.portfolio-six-v46 .p-card,
  #portfolio.portfolio-six-v46 .portfolio-card{
    flex-basis:calc((100% - 36px) / 4) !important;
    width:calc((100% - 36px) / 4) !important;
    min-width:calc((100% - 36px) / 4) !important;
    max-width:calc((100% - 36px) / 4) !important;
  }
}
/* 2 cards */
@media(max-width:760px){
  #portfolio.portfolio-six-v46 .p-card,
  #portfolio.portfolio-six-v46 .portfolio-card{
    flex-basis:calc((100% - 12px) / 2) !important;
    width:calc((100% - 12px) / 2) !important;
    min-width:calc((100% - 12px) / 2) !important;
    max-width:calc((100% - 12px) / 2) !important;
  }
}
/* 1 card */
@media(max-width:480px){
  #portfolio.portfolio-six-v46 .p-card,
  #portfolio.portfolio-six-v46 .portfolio-card{
    flex-basis:100% !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
  }
}


/* =========================================================
   V48 — ACTUAL FIX: portfolio uses .pcard + --pcols variable
   ========================================================= */
#portfolio.portfolio-six-v46 .portfolio-slider{
  --pcols:6 !important;
  --pgap:.75rem !important;
}

#portfolio.portfolio-six-v46 .portfolio-track .pcard{
  flex:0 0 calc((100% - (var(--pcols) - 1) * var(--pgap)) / var(--pcols)) !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  scroll-snap-align:start !important;
}

#portfolio.portfolio-six-v46 .pcard-v18 .pcard-img>img{
  height:155px !important;
}

#portfolio.portfolio-six-v46 .pcard-v18 figcaption{
  padding:12px 12px 13px !important;
}

#portfolio.portfolio-six-v46 .pcard-v18 figcaption strong{
  font-size:.74rem !important;
  line-height:1.35 !important;
}

#portfolio.portfolio-six-v46 .pcard-v18 figcaption span{
  font-size:.55rem !important;
}

#portfolio.portfolio-six-v46 .pcard-system-v18{
  font-size:.48rem !important;
  padding:5px 7px !important;
}

#portfolio.portfolio-six-v46 .pcard-count{
  font-size:.52rem !important;
  padding:5px 7px !important;
}

/* 4 columns on medium screens */
@media(max-width:1200px){
  #portfolio.portfolio-six-v46 .portfolio-slider{
    --pcols:4 !important;
    --pgap:.7rem !important;
  }
  #portfolio.portfolio-six-v46 .pcard-v18 .pcard-img>img{
    height:175px !important;
  }
}

/* 2 columns on mobile/tablet */
@media(max-width:760px){
  #portfolio.portfolio-six-v46 .portfolio-slider{
    --pcols:2 !important;
    --pgap:.6rem !important;
  }
  #portfolio.portfolio-six-v46 .pcard-v18 .pcard-img>img{
    height:190px !important;
  }
}

/* 1 column on narrow phones */
@media(max-width:480px){
  #portfolio.portfolio-six-v46 .portfolio-slider{
    --pcols:1 !important;
  }
  #portfolio.portfolio-six-v46 .pcard-v18 .pcard-img>img{
    height:230px !important;
  }
}


/* =========================================================
   V49 — PORTFOLIO 3 x 2 GRID PER SLIDE VIEW
   3 columns, 2 rows = 6 projects visible
   ========================================================= */
#portfolio.portfolio-six-v46 .portfolio-slider{
  --pcols:3 !important;
  --pgap:.8rem !important;
  overflow:hidden !important;
}

#portfolio.portfolio-six-v46 .portfolio-track{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-rows:repeat(2,auto) !important;
  grid-auto-columns:calc((100% - (2 * var(--pgap))) / 3) !important;
  column-gap:var(--pgap) !important;
  row-gap:var(--pgap) !important;
  align-items:stretch !important;
}

#portfolio.portfolio-six-v46 .portfolio-track .pcard{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:none !important;
  margin:0 !important;
}

#portfolio.portfolio-six-v46 .pcard-v18 .pcard-img>img{
  height:190px !important;
  object-fit:cover !important;
}

#portfolio.portfolio-six-v46 .pcard-v18 figcaption{
  padding:13px 14px 14px !important;
  min-height:72px !important;
}

#portfolio.portfolio-six-v46 .pcard-v18 figcaption strong{
  font-size:.82rem !important;
}

#portfolio.portfolio-six-v46 .pcard-v18 figcaption span{
  font-size:.59rem !important;
}

/* Tablet: 2 columns x 2 rows = 4 visible */
@media(max-width:900px){
  #portfolio.portfolio-six-v46 .portfolio-track{
    grid-template-rows:repeat(2,auto) !important;
    grid-auto-columns:calc((100% - var(--pgap)) / 2) !important;
  }
}

/* Mobile: 1 column x 2 rows = 2 visible */
@media(max-width:600px){
  #portfolio.portfolio-six-v46 .portfolio-track{
    grid-template-rows:repeat(2,auto) !important;
    grid-auto-columns:100% !important;
  }
  #portfolio.portfolio-six-v46 .pcard-v18 .pcard-img>img{
    height:220px !important;
  }
}


/* =========================================================
   V50 — PORTFOLIO 3x2: WORKING SLIDER + FULL PHOTOS
   ========================================================= */

/* Keep track as the actual horizontal scroll container */
#portfolio.portfolio-six-v46 .portfolio-track{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-behavior:smooth !important;
  scroll-snap-type:x mandatory !important;
  overscroll-behavior-x:contain;
}

/* Each column still contains 2 projects; 3 columns = 6 projects/page */
#portfolio.portfolio-six-v46 .portfolio-track .pcard{
  scroll-snap-align:start !important;
}

/* Make the project photo truly fill its visual area */
#portfolio.portfolio-six-v46 .pcard-v18 .pcard-img{
  height:210px !important;
  aspect-ratio:auto !important;
  background:#eef4f6 !important;
}
#portfolio.portfolio-six-v46 .pcard-v18 .pcard-img>img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* Remove the heavy gray/navy veil that was hiding half the photo */
#portfolio.portfolio-six-v46 .pcard-overlay-v18{
  background:linear-gradient(
    to bottom,
    rgba(2,26,44,.14) 0%,
    rgba(2,26,44,0) 38%,
    rgba(2,26,44,0) 100%
  ) !important;
}

/* Do not put text/gradient over the bottom of the photo */
#portfolio.portfolio-six-v46 .pcard-open-v18{
  display:none !important;
}

/* Keep count readable without covering the image */
#portfolio.portfolio-six-v46 .pcard-count{
  background:rgba(2,25,41,.68) !important;
  backdrop-filter:blur(5px);
}

/* Slightly stronger arrows so users know it slides */
#portfolio.portfolio-six-v46 .pslide-btn{
  display:grid !important;
  place-items:center !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:20 !important;
}
#portfolio.portfolio-six-v46 .pslide-btn:disabled{
  opacity:.28 !important;
}

/* Tablet */
@media(max-width:900px){
  #portfolio.portfolio-six-v46 .pcard-v18 .pcard-img{
    height:200px !important;
  }
}

/* Mobile */
@media(max-width:600px){
  #portfolio.portfolio-six-v46 .pcard-v18 .pcard-img{
    height:230px !important;
  }
}


/* =========================================================
   V51 — PORTFOLIO ARROWS: fully visible outside card grid
   ========================================================= */
#portfolio.portfolio-six-v46 .portfolio-slider{
  position:relative !important;
  overflow:visible !important;
  padding-left:28px !important;
  padding-right:28px !important;
}

#portfolio.portfolio-six-v46 .portfolio-track{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  border-radius:18px !important;
}

#portfolio.portfolio-six-v46 .pslide-btn{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:46px !important;
  height:46px !important;
  border-radius:50% !important;
  background:#fff !important;
  border:1px solid #d8e6ec !important;
  color:#0695bd !important;
  box-shadow:0 10px 24px rgba(7,76,104,.14) !important;
  z-index:50 !important;
  display:grid !important;
  place-items:center !important;
  opacity:1 !important;
  visibility:visible !important;
}

#portfolio.portfolio-six-v46 .pslide-btn.prev,
#portfolio.portfolio-six-v46 .pslide-btn[aria-label="Previous"]{
  left:-2px !important;
}

#portfolio.portfolio-six-v46 .pslide-btn.next,
#portfolio.portfolio-six-v46 .pslide-btn[aria-label="Next"]{
  right:-2px !important;
}

#portfolio.portfolio-six-v46 .pslide-btn:hover{
  background:#08a3cc !important;
  color:#fff !important;
  border-color:#08a3cc !important;
  transform:translateY(-50%) scale(1.05) !important;
}

#portfolio.portfolio-six-v46 .pslide-btn:disabled{
  opacity:.22 !important;
  cursor:default !important;
}

/* Keep pagination dots separated from cards */
#portfolio.portfolio-six-v46 .portfolio-dots,
#portfolio.portfolio-six-v46 .pslide-dots{
  margin-top:18px !important;
  position:relative !important;
  z-index:5 !important;
}

/* On smaller screens bring arrows slightly inward */
@media(max-width:900px){
  #portfolio.portfolio-six-v46 .portfolio-slider{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  #portfolio.portfolio-six-v46 .pslide-btn{
    width:42px !important;
    height:42px !important;
  }
}

@media(max-width:600px){
  #portfolio.portfolio-six-v46 .portfolio-slider{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  #portfolio.portfolio-six-v46 .pslide-btn{
    width:38px !important;
    height:38px !important;
  }
}


/* V57 — SIGENERGY exact package details + upgrade options */
#pricing .theme-sig .price-list-v36>div{padding:9px 2px !important}
#pricing .theme-sig .price-list-v36 b{font-size:.68rem !important}
#pricing .theme-sig .price-list-v36 span{font-size:.56rem !important;line-height:1.45 !important}
.sig-options-v57{margin-top:11px;padding:11px;border-radius:11px;background:#f3fbf6;border:1px solid #d8f0df}
.sig-options-title-v57{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:8px}
.sig-options-title-v57 strong{color:#128e37;font-size:.68rem}
.sig-options-title-v57 span{color:#82938a;font-size:.51rem}
.sig-options-grid-v57{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sig-options-grid-v57>div{min-width:0;padding:8px;border-radius:8px;background:#fff;border:1px solid #e3eee6}
.sig-options-grid-v57 span{display:block;color:#49685a;font-size:.55rem;line-height:1.35}
.sig-options-grid-v57 small{font-size:.48rem;color:#82958a}
.sig-options-grid-v57 strong{display:block;margin-top:4px;color:#10a63e;font-size:.65rem}
@media(max-width:420px){.sig-options-grid-v57{grid-template-columns:1fr}}


/* =========================================================
   V65 — PRICING COMPACT MASONRY
   Pack unequal-height cards with minimum empty space
   ========================================================= */
#pricing .price-grid-v36{
  display:block !important;
  columns:3 !important;
  column-gap:16px !important;
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#pricing .price-grid-v36 .price-card-v36{
  display:inline-block !important;
  width:100% !important;
  margin:0 0 16px !important;
  break-inside:avoid !important;
  page-break-inside:avoid !important;
  vertical-align:top !important;
}

/* Filtering must still be able to hide cards */
#pricing .price-grid-v36 .price-card-v36.price-hidden{
  display:none !important;
}

/* Reduce excessive vertical space inside cards slightly */
#pricing .price-card-v36{
  padding:13px !important;
}
#pricing .price-image-slot-v36{
  height:120px !important;
  margin-bottom:10px !important;
}
#pricing .price-list-v36>div{
  padding-top:7px !important;
  padding-bottom:7px !important;
}
#pricing .price-cta-v36{
  margin-top:9px !important;
}

/* Tablet */
@media(max-width:950px){
  #pricing .price-grid-v36{
    columns:2 !important;
    column-gap:14px !important;
  }
}

/* Mobile */
@media(max-width:620px){
  #pricing .price-grid-v36{
    columns:1 !important;
  }
}


/* =========================================================
   V66 — COMPACT FOOTER
   Smaller logo + less vertical empty space
   ========================================================= */
footer.site-footer,
.footer-v27{
  padding-top:32px !important;
  padding-bottom:18px !important;
}

.footer-v27 .footer-grid,
footer.site-footer .footer-grid{
  align-items:start !important;
  gap:34px !important;
}

/* Footer company logo */
.footer-v27 .footer-brand img,
footer.site-footer .footer-brand img,
.footer-logo{
  width:145px !important;
  height:auto !important;
  max-height:155px !important;
  object-fit:contain !important;
  margin-bottom:8px !important;
}

/* Tighten company copy */
.footer-v27 .footer-brand h3,
footer.site-footer .footer-brand h3{
  margin-top:5px !important;
  margin-bottom:5px !important;
}
.footer-v27 .footer-brand p,
footer.site-footer .footer-brand p{
  margin-top:5px !important;
  margin-bottom:7px !important;
  line-height:1.55 !important;
}

/* Reduce spacing around chips/social icons */
.footer-v27 .footer-tags,
footer.site-footer .footer-tags{
  margin-top:9px !important;
  margin-bottom:9px !important;
}
.footer-v27 .footer-social,
footer.site-footer .footer-social{
  margin-top:8px !important;
}

/* Pull bottom copyright line upward */
.footer-v27 .footer-bottom,
footer.site-footer .footer-bottom{
  margin-top:18px !important;
  padding-top:14px !important;
}

/* Compact link columns */
.footer-v27 .footer-col h4,
footer.site-footer .footer-col h4{
  margin-bottom:13px !important;
}
.footer-v27 .footer-col li,
footer.site-footer .footer-col li{
  margin-bottom:8px !important;
}

@media(max-width:700px){
  footer.site-footer,
  .footer-v27{
    padding-top:26px !important;
  }
  .footer-v27 .footer-brand img,
  footer.site-footer .footer-brand img,
  .footer-logo{
    width:125px !important;
    max-height:135px !important;
  }
}


/* =========================================================
   V67 — FINANCING: ICBC Leasing + GSB
   ========================================================= */
.hero-finance-v67{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:13px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(3,44,64,.28);
  border:1px solid rgba(255,255,255,.17);
  color:rgba(255,255,255,.82);
  backdrop-filter:blur(5px);
  font-size:.63rem;
}
.hero-finance-v67 span{
  padding:4px 7px;
  border-radius:999px;
  background:#ffd24b;
  color:#173d51;
  font-weight:800;
}
.hero-finance-v67 strong{font-weight:600}

.finance-v67{
  padding:68px 0 72px !important;
  background:
    radial-gradient(circle at 8% 10%,rgba(10,164,205,.07),transparent 24%),
    radial-gradient(circle at 92% 88%,rgba(26,166,63,.06),transparent 22%),
    linear-gradient(180deg,#fff 0%,#f4fafc 100%) !important;
}
.finance-head-v67{
  max-width:780px;
  margin:0 auto 27px;
  text-align:center;
}
.finance-head-v67 .eyebrow{color:#15963a !important}
.finance-head-v67 h2{
  margin:.5rem 0 .55rem;
  color:#073653;
  font-size:clamp(2rem,3.1vw,2.8rem);
  line-height:1.18;
}
.finance-head-v67 p{
  margin:0;
  color:#718793;
  font-size:.8rem;
  line-height:1.65;
}
.finance-grid-v67{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
  max-width:980px;
  margin:0 auto;
}
.finance-card-v67{
  position:relative;
  padding:24px;
  border-radius:20px;
  background:#fff;
  border:1px solid #dce9ef;
  box-shadow:0 13px 32px rgba(7,73,102,.065);
  overflow:hidden;
}
.finance-card-v67::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;height:4px;
}
.icbc-v67::before{background:linear-gradient(90deg,#c9222c,#e64c55)}
.gsb-v67::before{background:linear-gradient(90deg,#e64d99,#bd2976)}
.finance-card-top-v67{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
.finance-mark-v67{
  min-width:68px;
  height:38px;
  padding:0 11px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.03em;
}
.icbc-v67 .finance-mark-v67{background:#c82431}
.gsb-v67 .finance-mark-v67{background:#d83b8b}
.finance-card-top-v67>span{
  color:#8a9ba4;
  font-size:.62rem;
  font-weight:650;
}
.finance-card-v67 h3{
  margin:0 0 7px;
  color:#103d55;
  font-size:1.15rem;
}
.finance-card-v67>p{
  margin:0 0 15px;
  color:#738995;
  font-size:.75rem;
  line-height:1.65;
}
.finance-card-v67 ul{
  list-style:none;
  margin:0 0 17px;
  padding:0;
  display:grid;
  gap:8px;
}
.finance-card-v67 li{
  position:relative;
  padding-left:23px;
  color:#476777;
  font-size:.7rem;
  line-height:1.5;
}
.finance-card-v67 li::before{
  content:"✓";
  position:absolute;
  left:0;top:0;
  color:#18a642;
  font-weight:800;
}
.finance-card-v67>a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:10px;
  color:#fff;
  font-size:.7rem;
  font-weight:700;
}
.icbc-v67>a{background:linear-gradient(90deg,#c72431,#dc414b)}
.gsb-v67>a{background:linear-gradient(90deg,#d53a87,#b92a75)}
.finance-cta-v67{
  max-width:980px;
  margin:17px auto 0;
  padding:16px 18px;
  border-radius:15px;
  background:linear-gradient(105deg,#063b58,#087995);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.finance-cta-v67 strong{display:block;font-size:.83rem}
.finance-cta-v67 span{display:block;margin-top:3px;color:rgba(255,255,255,.67);font-size:.61rem}
.finance-cta-v67>a{
  flex:none;
  padding:10px 14px;
  border-radius:9px;
  background:#18b849;
  color:#fff;
  font-size:.68rem;
  font-weight:700;
}
.finance-note-v67{
  max-width:980px;
  margin:10px auto 0;
  color:#8a9ba4;
  font-size:.55rem;
  line-height:1.55;
  text-align:center;
}

@media(max-width:720px){
  .hero-finance-v67{align-items:flex-start;flex-direction:column;border-radius:12px}
  .finance-v67{padding:52px 0 56px !important}
  .finance-grid-v67{grid-template-columns:1fr}
  .finance-cta-v67{align-items:flex-start;flex-direction:column}
  .finance-cta-v67>a{width:100%;text-align:center}
}


/* V68 — real financing logos supplied by user */
.finance-card-v67 .finance-mark-v67{
  width:auto !important;
  min-width:0 !important;
  height:48px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.finance-card-v67 .finance-mark-v67 img{
  display:block !important;
  width:auto !important;
  height:44px !important;
  max-width:190px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.finance-card-v67.gsb-v67 .finance-mark-v67 img{
  height:46px !important;
  max-width:210px !important;
}


/* V69 — finance hard containment / cache-safe */
#finance .finance-card-v67{min-width:0 !important}
#finance .finance-card-top-v67{min-height:52px !important}
#finance .finance-mark-v67{
  width:210px !important;
  max-width:48% !important;
  height:48px !important;
  overflow:hidden !important;
  flex:0 0 auto !important;
}
#finance .finance-mark-v67 img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:48px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
#finance .gsb-v67 .finance-mark-v67{width:230px !important}
@media(max-width:720px){
  #finance .finance-mark-v67,
  #finance .gsb-v67 .finance-mark-v67{
    width:180px !important;
    max-width:62% !important;
  }
}