/* =========================================================
   PUBLIC EV CHARGING — PAGE CSS
   - Same design system as Private Condo
========================================================= */

body.blh-public-page{
  background:#050b16;
  overflow-x:hidden;
}

/* --------------------
   HERO
-------------------- */
.blh-public-page .pb-hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:100svh;
  overflow:hidden;
  padding-top:var(--pb-header-h, 0px);
  box-sizing:border-box;
}

.blh-public-page .pb-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.blh-public-page .pb-hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.60) 55%,
    rgba(0,0,0,.78) 100%
  );
  display:flex;
  align-items:center;
}

.blh-public-page .pb-hero-container{
  width:min(1200px, calc(100% - 48px));
  margin:0 auto;
}

.blh-public-page .pb-hero-content{
  max-width:760px;
  color:#fff;
}

.blh-public-page .pb-hero-content h1{
  margin:0 0 14px;
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.12;
  letter-spacing:-0.02em;
  color:#fff;
}

.blh-public-page .pb-hero-content p{
  margin:0 0 26px;
  font-size:18px;
  line-height:1.6;
  opacity:.90;
}

.blh-public-page .pb-hero-note{
  margin-top:14px;
  font-size:14px;
  opacity:.80;
}

.blh-public-page .pb-hero-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.blh-public-page a.theme-btn.btn-one.pb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  text-decoration:none;
}

.blh-public-page a.theme-btn.btn-one.pb-cta-primary{
  background:#0a8a4b;
  color:#fff;
}

.blh-public-page a.theme-btn.btn-one.pb-cta-ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.65);
}

/* shared wrap */
.blh-public-page .pb-wrap{
  width:min(1200px, calc(100% - 48px));
  margin:0 auto;
}

.blh-public-page .pb-eyebrow{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.65;
  margin-bottom:10px;
}

/* --------------------
   SECTION 2 (flip)
-------------------- */
.blh-public-page .pb-s2{
  background:#fff;
  padding:96px 0;
  color:#0e1420;
}

.blh-public-page .pb-s2-head{
  text-align:center;
  margin-bottom:38px;
}

.blh-public-page .pb-s2-head h2{
  margin:0 0 10px;
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.15;
}

.blh-public-page .pb-s2-head p{
  margin:0 auto;
  max-width:760px;
  opacity:.75;
}

.blh-public-page .pb-s2-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
}

.blh-public-page .pb-card.pb-flip{
  position:relative;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 14px 40px rgba(15,23,42,.10);
  overflow:hidden;
  height:220px;
  transition:transform .25s ease, box-shadow .25s ease;
}

.blh-public-page .pb-card.pb-flip:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 60px rgba(15,23,42,.18);
}

.blh-public-page .pb-front,
.blh-public-page .pb-back{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:26px 22px;
  text-align:center;
  transition:opacity .22s ease, transform .22s ease;
}

.blh-public-page .pb-front{ opacity:1; transform:translateY(0); }
.blh-public-page .pb-back{
  opacity:0;
  transform:translateY(10px);
  color:rgba(14,20,32,.72);
  font-size:14px;
  line-height:1.6;
}

.blh-public-page .pb-card.pb-flip:hover .pb-front{
  opacity:0; transform:translateY(-10px);
}
.blh-public-page .pb-card.pb-flip:hover .pb-back{
  opacity:1; transform:translateY(0);
}

.blh-public-page .pb-icon{
  width:74px;
  height:74px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  display:grid;
  place-items:center;
  margin:0 auto 14px;
}

.blh-public-page .pb-icon i{
  font-size:28px;
  color:#0a8a4b;
}

.blh-public-page .pb-front h3{
  margin:0;
  font-size:18px;
  line-height:1.25;
}

/* --------------------
   SECTION 3 (hero-like)
-------------------- */
.blh-public-page{
  --pb-header-h: 84px;
}

.blh-public-page .pb-s3.pb-s3-hero{
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--pb-header-h));
  padding-top: var(--pb-header-h);
  overflow: hidden;
  box-sizing: border-box;
}

.blh-public-page .pb-s3-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:1;
}

.blh-public-page .pb-s3-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,.65) 100%
  );
  display:flex;
  align-items:center;
}

.blh-public-page .pb-s3-container{
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.blh-public-page .pb-s3-content{
  color:#fff;
  text-align:center;
}

.blh-public-page .pb-s3 h2{
  margin:0 0 10px;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height:1.12;
  letter-spacing:-0.02em;
  color:#fff;
}

.blh-public-page .pb-s3-lead{
  margin:0 auto 18px;
  max-width:820px;
  font-size:15px;
  line-height:1.65;
  opacity:.9;
}

.blh-public-page .pb-s3-card{
  max-width: 940px;
  margin: 0 auto 14px;
  background: rgba(255,255,255,.96);
  color: #0e1420;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
  padding: 18px 22px;
  text-align:left;
}

.blh-public-page .pb-s3-card h3{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.25;
}

.blh-public-page .pb-s3-card ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  font-size:13.5px;
  line-height:1.6;
  color: rgba(14,20,32,.78);
}

.blh-public-page .pb-s3-tags{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

.blh-public-page .pb-s3-tag{
  background: rgba(10,138,75,.09);
  border: 1px solid rgba(10,138,75,.22);
  border-radius: 12px;
  padding: 11px 14px;
}

.blh-public-page .pb-s3-tag .k{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:4px;
  color: rgba(14,20,32,.72);
}

.blh-public-page .pb-s3-tag strong{
  font-size:14px;
  color:#0e1420;
}

.blh-public-page .pb-s3-benefits{
  max-width:1100px;
  margin:0 auto;
  text-align:left;
}

.blh-public-page .pb-s3-benefits h4{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
  color: rgba(255,255,255,.95);
}

.blh-public-page .pb-s3-benefit-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}

.blh-public-page .pb-s3-benefit{
  background: rgba(255,255,255,.96);
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 14px 38px rgba(0,0,0,.18);
  padding:12px 12px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:start;
}

.blh-public-page .pb-s3-benefit .ico{
  width:34px;
  height:34px;
  border-radius:10px;
  background: rgba(10,138,75,.10);
  border:1px solid rgba(10,138,75,.18);
  display:grid;
  place-items:center;
}

.blh-public-page .pb-s3-benefit .ico i{
  color:#0a8a4b;
  font-size:16px;
}

.blh-public-page .pb-s3-benefit .t{
  font-weight:800;
  font-size:13px;
  margin-bottom:4px;
  color:#0e1420;
}

.blh-public-page .pb-s3-benefit .d{
  font-size:12.5px;
  line-height:1.5;
  color: rgba(14,20,32,.72);
}

/* --------------------
   SECTION 4 (projects)
-------------------- */
.blh-public-page .pb-s4{
  background:#fff;
  padding:92px 0;
  color:#0e1420;
}

.blh-public-page .pb-s4-head{
  text-align:center;
  margin-bottom:34px;
}

.blh-public-page .pb-s4-head h2{
  margin:0 0 10px;
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.15;
}

.blh-public-page .pb-s4-head p{
  margin:0 auto;
  max-width:760px;
  opacity:.75;
}

.blh-public-page .pb-s4-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

.blh-public-page .pb-pcard{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 40px rgba(15,23,42,.10);
  background:#fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.blh-public-page .pb-pcard:hover{
  transform: translateY(-6px);
  box-shadow:0 22px 60px rgba(15,23,42,.18);
}

.blh-public-page .pb-pthumb img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.blh-public-page .pb-pbody{
  padding:16px 16px 18px;
}

.blh-public-page .pb-pbody h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
}

.blh-public-page .pb-pbody p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color: rgba(14,20,32,.70);
}

/* --------------------
   PROCESS
-------------------- */
.blh-public-page .pb-s6-process{
  background:#fff;
  padding:92px 0;
  color:#0e1420;
}

.blh-public-page .pb-s6-head{
  text-align:center;
  margin-bottom:36px;
}

.blh-public-page .pb-s6-head h2{
  margin:0;
  font-size: clamp(34px, 4vw, 56px);
  line-height:1.08;
  letter-spacing:-0.02em;
}

.blh-public-page .pb-s6-grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:34px;
  align-items:start;
  margin-top:44px;
}

.blh-public-page .pb-s6-grid::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:12px;
  height:1px;
  background: rgba(15,23,42,.08);
}

.blh-public-page .pb-s6-item{
  text-align:center;
  padding:0 8px;
  position:relative;
}

.blh-public-page .pb-s6-step{
  position:relative;
  display:inline-flex;
  padding:6px 12px;
  border-radius:8px;
  background:#0a8a4b;
  color:#fff;
  font-weight:700;
  font-size:12px;
  line-height:1;
  margin-bottom:22px;
  z-index:1;
}

.blh-public-page .pb-s6-icon{
  width:118px;
  height:118px;
  border-radius:999px;
  margin:0 auto 18px;
  background:#fff;
  border:8px solid rgba(10,138,75,.18);
  box-shadow:0 16px 45px rgba(15,23,42,.10);
  display:grid;
  place-items:center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blh-public-page .pb-s6-icon i{
  font-size:42px;
  color:#0a8a4b;
}

.blh-public-page .pb-s6-item h3{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.25;
  font-weight:800;
}

.blh-public-page .pb-s6-item p{
  margin:0 auto;
  max-width:260px;
  font-size:14px;
  line-height:1.65;
  color: rgba(14,20,32,.70);
}

.blh-public-page .pb-s6-item:hover .pb-s6-icon{
  transform: translateY(-6px);
  box-shadow:0 22px 60px rgba(15,23,42,.14);
  border-color: rgba(10,138,75,.28);
}

/* --------------------
   FAQ (scroll inside)
-------------------- */
.blh-public-page .pb-faq{
  background:#fff;
  color:#0e1420;
  padding:96px 0;
}

.blh-public-page .pb-faq-inner{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:42px;
  align-items:start;
}

.blh-public-page .pb-faq-left h2{
  margin:0 0 14px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height:1.05;
  letter-spacing:-0.02em;
}

.blh-public-page .pb-faq-lead{
  margin:0;
  max-width:480px;
  font-size:15px;
  line-height:1.75;
  opacity:.78;
}

.blh-public-page .pb-faq-scrollbox{
  max-height: clamp(360px, 60vh, 520px);
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  padding-right:6px;
}

.blh-public-page .pb-faq-scrollbox::-webkit-scrollbar{ width:8px; }
.blh-public-page .pb-faq-scrollbox::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius:999px;
}
.blh-public-page .pb-faq-scrollbox::-webkit-scrollbar-track{
  background: rgba(15,23,42,.06);
  border-radius:999px;
}

.blh-public-page .pb-faq-item{
  background:#f4f6f8;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:14px;
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}

.blh-public-page .pb-faq-q{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:center;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:18px 18px;
  text-align:left;
  font-weight:800;
  color:#0e1420;
  font-size:14px;
}

.blh-public-page .pb-faq-q:hover{
  background: rgba(255,255,255,.55);
}

.blh-public-page .pb-faq-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:900;
  background: rgba(10,138,75,.10);
  color:#0a8a4b;
}

.blh-public-page .pb-faq-a{
  max-height:0;
  overflow:hidden;
  transition: max-height .28s ease;
}

.blh-public-page .pb-faq-a p{
  margin:0;
  padding:0 18px 18px;
  font-size:14px;
  line-height:1.7;
  color: rgba(14,20,32,.78);
}

.blh-public-page .pb-faq-item.is-open{
  background:#fff;
}

/* --------------------
   FINAL CTA
-------------------- */
.blh-public-page .pb-s7-cta{
  position:relative;
  width:100%;
  padding:96px 24px;
  background:
    radial-gradient(circle at top right, rgba(10,138,75,.10), transparent 55%),
    linear-gradient(180deg, #f6f8f9 0%, #eef1f3 100%);
  text-align:center;
}

.blh-public-page .pb-s7-inner{
  max-width:760px;
  margin:0 auto;
}

.blh-public-page .pb-s7-inner h2{
  margin:0 0 14px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height:1.15;
  color:#0e1420;
}

.blh-public-page .pb-s7-inner p{
  margin:0 auto 32px;
  max-width:620px;
  font-size:16px;
  line-height:1.6;
  color: rgba(14,20,32,.75);
}

.blh-public-page .pb-s7-btn{ margin-top:6px; }

/* --------------------
   responsive
-------------------- */
@media (max-width:1024px){
  .blh-public-page .pb-s2-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .blh-public-page .pb-s3-benefit-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .blh-public-page .pb-s4-grid{ grid-template-columns: 1fr; }
  .blh-public-page .pb-s6-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); row-gap:46px; }
  .blh-public-page .pb-s6-grid::before{ display:none; }
  .blh-public-page .pb-faq-inner{ grid-template-columns: 1fr; gap:26px; }
  .blh-public-page .pb-wrap{ width:min(1200px, calc(100% - 32px)); }
}

@media (max-width:768px){
  .blh-public-page .pb-hero-container{ width:min(1200px, calc(100% - 32px)); }
  .blh-public-page .pb-hero-content p{ font-size:16px; }
  .blh-public-page .pb-hero-cta{ flex-direction:column; align-items:flex-start; }
  .blh-public-page a.theme-btn.btn-one.pb-cta{ width:100%; }
}

@media (max-width:560px){
  .blh-public-page .pb-s2{ padding:72px 0; }
  .blh-public-page .pb-s2-grid{ grid-template-columns: 1fr; }
  .blh-public-page .pb-s3-tags{ grid-template-columns: 1fr; }
  .blh-public-page .pb-s3-benefit-grid{ grid-template-columns: 1fr; }
  .blh-public-page .pb-s7-cta{ padding:72px 20px; }
}