/* ===== Solar Clean · Location page (Local SEO) — ทุก selector prefix .scl-page เพื่อ scope + ชนะ specificity ธีม ===== */
html{scroll-behavior:smooth}

.scl-page{
  --green:#2FA84F; --green-deep:#1B6B2B; --green-dark:#14431F;
  --navy:#123A5E; --navy-deep:#0C2942; --blue:#2AA9E0;
  --ink:#17241C; --muted:#5C6B61; --line:#E4EEE6;
  --soft:#F1F8F2; --soft2:#EAF4FB; --white:#fff;
  --shadow:0 20px 44px -22px rgba(18,58,94,.30);
  --shadow-sm:0 12px 26px -16px rgba(18,58,94,.26);
  --r:16px; --container:1180px;
  --f-body:'Prompt',sans-serif; --f-num:'Poppins',sans-serif;
  font-family:var(--f-body);color:var(--ink);line-height:1.7;
}
.scl-page *{box-sizing:border-box}
.scl-page img{max-width:100%;display:block}
.scl-page a{color:inherit;text-decoration:none}
.scl-page h1,.scl-page h2,.scl-page h3,.scl-page h4{line-height:1.3;font-weight:700}

.scl-page .scl-container{max-width:var(--container);margin:0 auto;padding:0 20px}
.scl-page .scl-eyebrow{font-size:.85rem;font-weight:600;letter-spacing:.14em;color:var(--green-deep);text-transform:uppercase}

/* buttons */
.scl-page .scl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.98rem;padding:.8rem 1.5rem;border-radius:100px;border:2px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.scl-page .scl-btn svg{width:18px;height:18px}
.scl-page .scl-btn--green{background:var(--green);color:#fff}
.scl-page .scl-btn--green:hover{background:var(--green-deep);transform:translateY(-2px)}
.scl-page .scl-btn--navy{background:var(--navy);color:#fff}
.scl-page .scl-btn--navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.scl-page .scl-btn--line{background:#06C755;color:#fff}
.scl-page .scl-btn--line:hover{filter:brightness(.94);transform:translateY(-2px)}
.scl-page .scl-btn--ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.scl-page .scl-btn--ghost:hover{border-color:var(--green);color:var(--green-deep)}
.scl-page .scl-btn--wide{width:100%}

/* section heads */
.scl-page .scl-shead{margin-bottom:8px}
.scl-page .scl-shead h2{font-size:clamp(1.5rem,3vw,2.05rem);color:var(--navy)}
.scl-page .scl-shead h2 .g{color:var(--green)}
.scl-page .scl-shead p{margin-top:8px;color:var(--muted)}
.scl-page .scl-sec{padding:52px 0}
.scl-page .scl-sec--soft{background:var(--soft)}

/* breadcrumb */
.scl-page .scl-crumb{background:#fff;border-bottom:1px solid var(--line)}
.scl-page .scl-crumb .scl-container{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 20px;font-size:.86rem;color:var(--muted)}
.scl-page .scl-crumb a:hover{color:var(--green)}
.scl-page .scl-crumb svg{width:13px;height:13px}
.scl-page .scl-crumb b{color:var(--ink);font-weight:600}

/* hero */
.scl-page .scl-hero{background:linear-gradient(120deg,var(--soft2),var(--soft) 55%,#eaf7ef);padding:44px 0 48px}
.scl-page .scl-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.scl-page .scl-hero__badge{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:100px;padding:.4rem 1rem;font-size:.85rem;font-weight:600;color:var(--green-deep);box-shadow:var(--shadow-sm)}
.scl-page .scl-hero__badge svg{width:16px;height:16px;color:var(--green)}
.scl-page .scl-hero h1{margin-top:16px;font-size:clamp(1.9rem,4.2vw,2.9rem);color:var(--navy);line-height:1.18}
.scl-page .scl-hero h1 .g{color:var(--green)}
.scl-page .scl-hero__lead{margin-top:16px;color:var(--muted);font-size:1.06rem;max-width:560px}
.scl-page .scl-hero__facts{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 22px}
.scl-page .scl-hero__fact{display:inline-flex;align-items:center;gap:8px;font-size:.94rem;color:var(--ink)}
.scl-page .scl-hero__fact svg{width:18px;height:18px;color:var(--green);flex:0 0 auto}
.scl-page .scl-hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.scl-page .scl-hero__media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:linear-gradient(150deg,#bfe6cd,#cfe8f6);display:grid;place-items:center;color:rgba(18,58,94,.4);font-size:.9rem}
.scl-page .scl-hero__media img{width:100%;height:100%;object-fit:cover}
.scl-page .scl-hero__chip{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);padding:12px 16px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem;color:var(--navy)}
.scl-page .scl-hero__chip svg{width:22px;height:22px;color:var(--green)}
.scl-page .scl-hero__chip--tl{top:16px;left:16px}
.scl-page .scl-hero__chip--br{bottom:16px;right:16px}

/* content article (Gutenberg) */
.scl-page .scl-content h2{font-size:clamp(1.35rem,2.6vw,1.8rem);color:var(--navy);margin:34px 0 12px;padding-left:14px;border-left:4px solid var(--green);line-height:1.35}
.scl-page .scl-content>h2:first-child{margin-top:0}
.scl-page .scl-content h2 .g{color:var(--green)}
.scl-page .scl-content h3{font-size:1.16rem;color:var(--navy);margin:24px 0 9px}
.scl-page .scl-content p{margin:12px 0;color:var(--ink);line-height:1.9}
.scl-page .scl-content strong{color:var(--green-deep)}
.scl-page .scl-content ul,.scl-page .scl-content ol{margin:14px 0;padding-left:0;list-style:none;display:grid;gap:11px}
.scl-page .scl-content ul li{position:relative;padding-left:30px;color:var(--ink);line-height:1.7;list-style:none}
.scl-page .scl-content ul li::before{content:"";position:absolute;left:6px;top:.7em;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #d7f0dd}
.scl-page .scl-content ol{counter-reset:c}
.scl-page .scl-content ol li{position:relative;padding-left:44px;counter-increment:c;min-height:32px;padding-top:3px;color:var(--ink);line-height:1.7;list-style:none}
.scl-page .scl-content ol li::before{content:counter(c);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--f-num);font-weight:700;font-size:.9rem;display:grid;place-items:center}
.scl-page .scl-content__lead{font-size:1.06rem;color:var(--muted)}
.scl-page .scl-content img{border-radius:14px;margin:16px 0}

/* gallery */
.scl-page .scl-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.scl-page .scl-gcell{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#bfe6cd,#cfe8f6);box-shadow:var(--shadow-sm);display:block}
.scl-page .scl-gcell img{width:100%;height:100%;object-fit:cover;transition:.4s}
.scl-page .scl-gcell:hover img{transform:scale(1.06)}

/* info + sticky sidebar */
.scl-page .scl-info__grid{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.scl-page .scl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:24px 26px}
.scl-page .scl-side{position:sticky;top:88px;display:grid;gap:18px}
.scl-page .scl-toc b{display:block;font-weight:700;color:var(--navy);margin-bottom:12px}
.scl-page .scl-toc ul{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.scl-page .scl-toc a{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.92rem}
.scl-page .scl-toc a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto}
.scl-page .scl-toc a:hover{color:var(--green-deep)}
.scl-page .scl-ctacard{background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
.scl-page .scl-ctacard b{font-size:1.1rem}
.scl-page .scl-ctacard p{margin:6px 0 14px;color:rgba(255,255,255,.82);font-size:.9rem}

/* areas chips */
.scl-page .scl-areas__group{margin-top:16px}
.scl-page .scl-areas__group>span{font-size:.9rem;color:var(--muted);display:block;margin-bottom:10px}
.scl-page .scl-chips{display:flex;flex-wrap:wrap;gap:9px}
.scl-page .scl-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:.42rem 1rem;font-size:.88rem;color:var(--navy);transition:.2s}
.scl-page .scl-chip svg{width:14px;height:14px;color:var(--green)}
.scl-page .scl-chip:hover{border-color:var(--green);color:var(--green-deep)}
.scl-page .scl-areas__note{margin-top:14px;color:var(--muted);font-size:.86rem}

/* services */
.scl-page .scl-svc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.scl-page .scl-svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm);transition:.2s}
.scl-page .scl-svc:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.scl-page .scl-svc__ic{width:52px;height:52px;border-radius:14px;background:var(--soft);color:var(--green);display:grid;place-items:center;margin-bottom:14px}
.scl-page .scl-svc__ic svg{width:27px;height:27px}
.scl-page .scl-svc h3{font-size:1.08rem;color:var(--navy)}
.scl-page .scl-svc p{margin-top:7px;color:var(--muted);font-size:.93rem}

/* steps */
.scl-page .scl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px}
.scl-page .scl-step__n{font-family:var(--f-num);font-weight:800;font-size:1.5rem;color:var(--green);opacity:.5}
.scl-page .scl-step h3{margin-top:6px;font-size:1.04rem;color:var(--navy)}
.scl-page .scl-step p{margin-top:6px;color:var(--muted);font-size:.92rem}

/* pricing */
.scl-page .scl-price{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;margin-top:26px;align-items:center}
.scl-page .scl-price__list{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.scl-page .scl-price__list li{display:flex;gap:12px;color:var(--ink)}
.scl-page .scl-price__list svg{width:22px;height:22px;color:var(--green);flex:0 0 auto;margin-top:2px}
.scl-page .scl-price__card{background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fff;border-radius:20px;padding:32px;text-align:center;box-shadow:var(--shadow)}
.scl-page .scl-price__card span{font-size:.95rem;opacity:.9}
.scl-page .scl-price__card b{display:block;font-family:var(--f-num);font-size:2.6rem;font-weight:800;margin:6px 0}
.scl-page .scl-price__card .scl-btn{margin-top:16px}

/* faq */
.scl-page .scl-faq{display:grid;gap:12px;margin-top:24px}
.scl-page .scl-faq details{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.scl-page .scl-faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:12px}
.scl-page .scl-faq summary::-webkit-details-marker{display:none}
.scl-page .scl-faq summary svg{width:22px;height:22px;color:var(--green);transition:.25s;flex:0 0 auto}
.scl-page .scl-faq details[open] summary svg{transform:rotate(45deg)}
.scl-page .scl-faq__a{padding:0 20px 18px;color:var(--muted);font-size:.95rem;line-height:1.75}
.scl-page .scl-faq__a p{margin:0 0 8px}

/* cta band */
.scl-page .scl-band{background:linear-gradient(120deg,var(--navy),var(--navy-deep));position:relative;overflow:hidden}
.scl-page .scl-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(47,168,79,.35),transparent 45%)}
.scl-page .scl-band .scl-container{position:relative;padding:52px 20px;text-align:center;color:#fff}
.scl-page .scl-band h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.scl-page .scl-band p{margin:12px auto 22px;max-width:600px;color:rgba(255,255,255,.85)}
.scl-page .scl-band__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* other locations */
.scl-page .scl-other__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.scl-page .scl-oc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-sm);transition:.2s}
.scl-page .scl-oc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green)}
.scl-page .scl-oc__t{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--navy)}
.scl-page .scl-oc__t svg{width:18px;height:18px;color:var(--green)}
.scl-page .scl-oc p{margin-top:6px;color:var(--muted);font-size:.9rem}
.scl-page .scl-oc__more{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-weight:600;font-size:.9rem;color:var(--green-deep);white-space:nowrap}
.scl-page .scl-oc__more svg{width:16px;height:16px}
.scl-page .scl-other__all{margin-top:24px;text-align:center}

/* ===== responsive ===== */
@media(max-width:960px){
  .scl-page .scl-hero__grid{grid-template-columns:1fr;gap:28px}
  /* มือถือ: สารบัญ (TOC) ขึ้นก่อน content, CTA card ต่อท้าย content */
  .scl-page .scl-info__grid{grid-template-columns:1fr}
  .scl-page .scl-side{display:contents}
  .scl-page .scl-toc{order:-1}
  .scl-page .scl-ctacard{order:1}
}
@media(max-width:860px){
  .scl-page .scl-gallery{grid-template-columns:repeat(3,1fr)}
  .scl-page .scl-svc__grid{grid-template-columns:1fr 1fr}
  .scl-page .scl-steps{grid-template-columns:1fr 1fr}
  .scl-page .scl-other__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .scl-page .scl-price{grid-template-columns:1fr}
}
@media(max-width:600px){
  /* มือถือ: ปุ่ม hero 2 คอลัมน์ */
  .scl-page .scl-hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .scl-page .scl-hero__cta .scl-btn{white-space:normal;text-align:center;padding:.8rem .55rem;font-size:.9rem;line-height:1.3}
}
@media(max-width:560px){
  .scl-page .scl-gallery{grid-template-columns:repeat(2,1fr)}
  .scl-page .scl-svc__grid{grid-template-columns:1fr}
  /* การ์ดพื้นที่อื่น = เลื่อนแนวนอน (full-bleed ไม่โดนตัดขอบ) */
  .scl-page .scl-other__grid{display:flex;overflow-x:auto;gap:14px;margin:26px -20px 0;padding:4px 20px 14px;scroll-padding-left:20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .scl-page .scl-other__grid::-webkit-scrollbar{display:none}
  .scl-page .scl-oc{flex:0 0 78%;scroll-snap-align:start}
  .scl-page .scl-oc:last-child{margin-right:6px}
}
@media(max-width:480px){
  .scl-page .scl-steps{grid-template-columns:1fr}
}