/* SolarBanko Why Solar — synced from Codex/solarbanko-why-solar/why-solar.html */

body.page-slug-why-solar .entry-header,
body.solarbanko-theme.page-slug-why-solar .entry-header {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.sb-why-solar-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.solarbanko-theme .sb-why-solar a {
  color: inherit;
  text-decoration: inherit;
}
body.solarbanko-theme .sb-why-solar a:hover,
body.solarbanko-theme .sb-why-solar a:focus {
  color: inherit;
}
body.solarbanko-theme .sb-why-solar .btn-primary,
body.solarbanko-theme .sb-why-solar .btn-primary:hover,
body.solarbanko-theme .sb-why-solar .btn-primary:focus {
  color: #fff !important;
}
body.solarbanko-theme .sb-why-solar .ledger-link,
body.solarbanko-theme .sb-why-solar .ledger-body h3 a:hover {
  color: var(--peso-deep);
}

.sb-why-solar *,
.sb-why-solar *::before,
.sb-why-solar *::after {
  box-sizing: border-box;
}

.sb-why-solar .photo-note {
  font-size: .78rem;
  color: var(--ink-soft);
  margin: 24px auto 0;
  max-width: var(--max);
  padding: 0 28px 40px;
}


  .sb-why-solar{
    --paper:#F2F6F3;
    --paper-alt:#E7F0EB;
    --ink:#14231F;
    --ink-soft:#54655F;
    --sun:#E8A33D;
    --sun-deep:#B67A16;
    --peso:#1B7A5C;
    --peso-deep:#125240;
    --panel-dark:#122824;
    --brownout:#B8542A;
    --line:#DCE6E0;
    --line-strong:#AFC4B9;
    --max: var(--global-content-width, 1440px);
  }

  
  
  
    .sb-why-solar *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  .sb-why-solar }

  .sb-why-solar{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
   box-sizing:border-box;}

  .sb-why-solar h1,
.sb-why-solar h2,
.sb-why-solar h3{
    font-family:'Fraunces', Georgia, serif;
    font-weight:560;
    line-height:1.12;
    margin:0;
    color:var(--ink);
  }

  .sb-why-solar a{color:inherit;}
  .sb-why-solar a:focus-visible,
.sb-why-solar button:focus-visible{
    outline:2px solid var(--peso-deep);
    outline-offset:3px;
    border-radius:2px;
  }

  .sb-why-solar .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--global-content-edge-padding, 1.5rem);}

  /* ---------- hero ---------- */
  .sb-why-solar .hero{
    padding:76px 0 64px;
    border-bottom:1px solid var(--line);
  }
  .sb-why-solar .hero .wrap{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
  }
  .sb-why-solar .eyebrow-line{
    display:flex; align-items:center; gap:10px;
    font-size:0.92rem; color:var(--ink-soft); margin-bottom:18px;
  }
  .sb-why-solar .eyebrow-line .dot{width:7px; height:7px; border-radius:50%; background:var(--sun-deep); flex:none;}
  .sb-why-solar .hero h1{
    font-size:clamp(2.35rem, 4.4vw, 3.55rem);
    max-width:14ch;
    letter-spacing:-0.01em;
  }
  .sb-why-solar .hero h1 em{font-style:italic; color:var(--peso-deep);}
  .sb-why-solar .hero p.lede{
    margin:22px 0 30px; max-width:46ch;
    font-size:1.1rem; color:var(--ink-soft);
  }
  .sb-why-solar .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .sb-why-solar .btn{
    display:inline-block; text-decoration:none; font-size:0.98rem; font-weight:500;
    padding:13px 22px; border-radius:3px; border:1px solid transparent;
    transition:transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .sb-why-solar .btn-primary{background:var(--peso); color:#fff;}
  .sb-why-solar .btn-primary:hover{background:var(--peso-deep); transform:translateY(-1px);}
  .sb-why-solar .btn-outline{border-color:var(--line-strong); color:var(--ink); background:transparent;}
  .sb-why-solar .btn-outline:hover{border-color:var(--ink); transform:translateY(-1px);}

  /* hero graphic */
  .sb-why-solar .hero-graphic{display:flex; justify-content:center;}
  .sb-why-solar .hero-graphic svg{width:100%; max-width:340px; height:auto;}
  .sb-why-solar .ray{
    stroke:var(--sun-deep); stroke-width:2.5; stroke-linecap:round;
    transform-origin:170px 78px;
  }
  @media (prefers-reduced-motion: no-preference){
    .sb-why-solar .ray{ animation: rayfade 1.1s ease-out both; }
    .sb-why-solar .ray:nth-child(1){animation-delay:.02s;}
    .sb-why-solar .ray:nth-child(2){animation-delay:.09s;}
    .sb-why-solar .ray:nth-child(3){animation-delay:.16s;}
    .sb-why-solar .ray:nth-child(4){animation-delay:.23s;}
    .sb-why-solar .ray:nth-child(5){animation-delay:.30s;}
    @keyframes rayfade{ from{opacity:0; stroke-dasharray:22; stroke-dashoffset:22;} to{opacity:1; stroke-dashoffset:0;} }
    .sb-why-solar .flowline{ stroke-dasharray:5 6; animation:dash 14s linear infinite; }
    @keyframes dash{ to{ stroke-dashoffset:-220; } }
    .sb-why-solar .peso-badge{ animation:pop .5s ease-out .55s both; }
    @keyframes pop{ from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);} }
  }

  /* ---------- section shell ---------- */
  .sb-why-solar section{padding:64px 0;}
  .sb-why-solar section.alt{background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .sb-why-solar .section-head{max-width:56ch; margin-bottom:36px;}
  .sb-why-solar .section-head h2{font-size:clamp(1.55rem, 2.6vw, 2.1rem);}
  .sb-why-solar .section-head p{color:var(--ink-soft); margin:12px 0 0; font-size:1.02rem;}

  /* ---------- use-case ledger rows ---------- */
  .sb-why-solar .ledger{border-top:1px solid var(--line-strong);}
  .sb-why-solar .ledger-row{
    display:grid; grid-template-columns:150px 1fr auto;
    gap:28px; align-items:center;
    padding:26px 0; border-bottom:1px solid var(--line);
  }
  .sb-why-solar .ledger-tag{
    font-family:'Fraunces', serif; font-style:italic; font-weight:500;
    font-size:1rem; color:var(--sun-deep);
  }
  .sb-why-solar .ledger-body h3{font-size:1.22rem; margin-bottom:6px;}
  .sb-why-solar .ledger-body h3 a{text-decoration:none;}
  .sb-why-solar .ledger-body h3 a:hover{color:var(--peso-deep);}
  .sb-why-solar .ledger-body p{margin:0; color:var(--ink-soft); max-width:56ch;}
  .sb-why-solar .ledger-link{
    text-decoration:none; font-size:0.95rem; font-weight:500; color:var(--peso-deep);
    white-space:nowrap; border-bottom:1px solid transparent;
  }
  .sb-why-solar .ledger-link:hover{border-color:var(--peso-deep);}

  @media (max-width:760px){
    .sb-why-solar .hero .wrap{grid-template-columns:1fr;}
    .sb-why-solar .hero-graphic{order:-1; margin-bottom:8px;}
    .sb-why-solar .ledger-row{grid-template-columns:1fr; gap:8px;}
    .sb-why-solar .ledger-tag{order:0;}
  }

  /* ---------- receipt / featured stack ---------- */
  .sb-why-solar .receipt{
    background:var(--paper); border:1px solid var(--line-strong); border-radius:4px;
    padding:8px 30px; max-width:680px;
  }
  .sb-why-solar .receipt-row{
    display:flex; justify-content:space-between; gap:16px;
    padding:18px 0; border-bottom:1px dashed var(--line-strong);
    font-size:1rem;
  }
  .sb-why-solar .receipt-row:last-child{border-bottom:none;}
  .sb-why-solar .receipt-row a{text-decoration:none; font-weight:500;}
  .sb-why-solar .receipt-row a:hover{color:var(--peso-deep);}
  .sb-why-solar .receipt-val{color:var(--ink-soft); text-align:right;}
  .sb-why-solar .disclaimer{
    font-size:0.9rem; color:var(--ink-soft); margin-top:20px; max-width:56ch;
  }

  /* ---------- how it works (steps) ---------- */
  .sb-why-solar .steps{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong);
  }
  .sb-why-solar .step{
    padding:30px 28px; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
    position:relative;
  }
  .sb-why-solar .step-index{
    font-family:'Fraunces', serif; font-style:italic; font-size:1.6rem; color:var(--sun-deep);
    display:block; margin-bottom:14px;
  }
  .sb-why-solar .step h3{font-size:1.08rem; margin-bottom:8px;}
  .sb-why-solar .step p{margin:0; color:var(--ink-soft); font-size:0.97rem;}
  @media (max-width:760px){
    .sb-why-solar .steps{grid-template-columns:1fr;}
  }

  /* ---------- good fit / not yet ---------- */
  .sb-why-solar .fit-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    border:1px solid var(--line-strong); border-radius:4px; overflow:hidden;
  }
  .sb-why-solar .fit-col{padding:32px 34px;}
  .sb-why-solar .fit-col.yes{background:var(--paper); border-right:1px solid var(--line-strong);}
  .sb-why-solar .fit-col.not-yet{background:var(--paper-alt);}
  .sb-why-solar .fit-label{
    display:flex; align-items:center; gap:9px; margin-bottom:16px;
    font-family:'Fraunces', serif; font-weight:560; font-size:1.1rem;
  }
  .sb-why-solar .fit-mark{
    width:22px; height:22px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-size:0.8rem; font-weight:600; color:#fff;
  }
  .sb-why-solar .fit-col.yes .fit-mark{background:var(--peso);}
  .sb-why-solar .fit-col.not-yet .fit-mark{background:var(--brownout);}
  .sb-why-solar .fit-col ul{margin:0; padding:0; list-style:none;}
  .sb-why-solar .fit-col li{
    padding:11px 0; border-top:1px solid var(--line); color:var(--ink-soft); font-size:0.97rem;
  }
  .sb-why-solar .fit-col li:first-of-type{border-top:none;}
  @media (max-width:760px){
    .sb-why-solar .fit-grid{grid-template-columns:1fr;}
    .sb-why-solar .fit-col.yes{border-right:none; border-bottom:1px solid var(--line-strong);}
  }

  /* ---------- reference packages teaser ---------- */
  .sb-why-solar .ref-list{border-top:1px solid var(--line-strong);}
  .sb-why-solar .ref-row{
    display:grid; grid-template-columns:1fr 1fr auto; gap:24px; align-items:start;
    padding:24px 0; border-bottom:1px solid var(--line);
  }
  .sb-why-solar .ref-row h3{font-size:1.08rem; margin-bottom:6px;}
  .sb-why-solar .ref-row .ref-stack{color:var(--ink-soft); font-size:0.93rem; margin:0;}
  .sb-why-solar .ref-row .ref-use{color:var(--ink-soft); font-size:0.97rem; margin:0;}
  .sb-why-solar .ref-row a.ledger-link{align-self:center;}
  @media (max-width:760px){
    .sb-why-solar .ref-row{grid-template-columns:1fr;}
  }

  /* ---------- category quick nav ---------- */
  .sb-why-solar .cat-nav{
    background:var(--paper-alt); border-bottom:1px solid var(--line-strong);
    position:sticky; top:63px; z-index:30;
  }
  .sb-why-solar .cat-nav-inner{
    display:flex; gap:8px; padding:12px 28px; overflow-x:auto;
  }
  .sb-why-solar .cat-nav a{
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    text-decoration:none; font-size:0.9rem; color:var(--ink-soft);
    padding:8px 14px; border:1px solid var(--line-strong); border-radius:20px;
    background:var(--paper); transition:border-color .15s ease, color .15s ease;
  }
  .sb-why-solar .cat-nav a:hover{border-color:var(--peso); color:var(--ink);}
  .sb-why-solar .cat-nav a span{
    font-size:0.75rem; color:var(--peso-deep); background:var(--paper-alt);
    padding:1px 6px; border-radius:10px;
  }
  .sb-why-solar .warranty-note{
    margin:8px 0 0 !important; font-size:0.88rem !important; color:var(--peso-deep) !important;
  }

  /* ---------- site-type icon cards ---------- */
  .sb-why-solar .type-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong);}
  .sb-why-solar .type-grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .sb-why-solar .type-card{background:var(--paper); padding:28px 24px; border-top:3px solid var(--peso);}
  .sb-why-solar .type-icon{
    width:42px; height:42px; border-radius:50%; background:var(--paper-alt);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .sb-why-solar .type-icon svg{width:22px; height:22px; stroke:var(--peso-deep);}
  .sb-why-solar .type-card h3{font-size:1.05rem; margin-bottom:8px;}
  .sb-why-solar .type-card p{margin:0; color:var(--ink-soft); font-size:0.92rem;}
  @media (max-width:860px){ .sb-why-solar .type-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .sb-why-solar .type-grid{grid-template-columns:1fr;} }

  /* ---------- who this serves ---------- */
  .sb-why-solar .serve-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .sb-why-solar .serve-col{background:var(--paper-alt); border:1px solid var(--line-strong); border-radius:4px; padding:26px 26px;}
  .sb-why-solar .serve-col h3{font-size:1.08rem; margin-bottom:14px; display:flex; align-items:center; gap:9px;}
  .sb-why-solar .serve-col ul{list-style:none; margin:0; padding:0;}
  .sb-why-solar .serve-col li{
    display:flex; gap:9px; padding:7px 0; color:var(--ink-soft); font-size:0.94rem;
  }
  .sb-why-solar .serve-col li::before{content:"✓"; color:var(--peso); font-weight:600; flex:none;}
  @media (max-width:760px){ .sb-why-solar .serve-grid{grid-template-columns:1fr;} }

  /* ---------- honest stats strip ---------- */
  .sb-why-solar .stats-strip{background:var(--panel-dark); padding:0;}
  .sb-why-solar .stats-strip .wrap{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  }
  .sb-why-solar .stat{
    padding:34px 20px; text-align:center; border-right:1px solid rgba(255,255,255,0.12);
  }
  .sb-why-solar .stat:last-child{border-right:none;}
  .sb-why-solar .stat .num{
    font-family:'Fraunces', serif; font-size:clamp(1.6rem,3vw,2.1rem); color:#fff; font-weight:560;
    display:block;
  }
  .sb-why-solar .stat .label{color:#B7C9C1; font-size:0.88rem; margin-top:4px;}
  @media (max-width:700px){
    .sb-why-solar .stats-strip .wrap{grid-template-columns:1fr 1fr;}
    .sb-why-solar .stat{border-bottom:1px solid rgba(255,255,255,0.12);}
  }

  /* ---------- filterable project cards ---------- */
  .sb-why-solar .proj-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
  .sb-why-solar .proj-chip{
    font-family:inherit; font-size:0.88rem; color:var(--ink-soft);
    background:var(--paper); border:1px solid var(--line-strong); border-radius:20px;
    padding:8px 16px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .sb-why-solar .proj-chip:hover{border-color:var(--peso);}
  .sb-why-solar .proj-chip.active{background:var(--peso); border-color:var(--peso); color:#fff;}
  .sb-why-solar .proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .sb-why-solar .proj-card{
    background:var(--paper); border:1px solid var(--line-strong); border-radius:4px; overflow:hidden;
    display:none; flex-direction:column;
  }
  .sb-why-solar .proj-card.show{display:flex;}
  .sb-why-solar .proj-card-head{
    padding:22px 22px 18px; background:var(--paper-alt); border-bottom:1px solid var(--line-strong);
  }
  .sb-why-solar .proj-card-head svg{width:26px; height:26px; stroke:var(--peso-deep); margin-bottom:10px;}
  .sb-why-solar .proj-tag{font-size:0.8rem; color:var(--peso-deep); font-weight:500;}
  .sb-why-solar .proj-card-body{padding:18px 22px 22px; flex:1; display:flex; flex-direction:column;}
  .sb-why-solar .proj-card-body h3{font-size:1.05rem; margin-bottom:8px;}
  .sb-why-solar .proj-card-body p{margin:0 0 14px; color:var(--ink-soft); font-size:0.92rem; flex:1;}
  .sb-why-solar .proj-card-body a{
    font-size:0.9rem; font-weight:500; color:var(--peso-deep); text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .sb-why-solar .proj-card-body a:hover{border-color:var(--peso-deep);}
  @media (max-width:860px){ .sb-why-solar .proj-grid{grid-template-columns:1fr;} }

  /* ---------- cta banner ---------- */
  .sb-why-solar .banner{
    background:var(--panel-dark); color:var(--paper);
    padding:56px 0; text-align:left;
  }
  .sb-why-solar .banner .wrap{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
  .sb-why-solar .banner h2{color:var(--paper); font-size:clamp(1.4rem,2.6vw,1.9rem); max-width:22ch;}
  .sb-why-solar .banner .btn-primary{background:var(--peso); color:#fff;}
  .sb-why-solar .banner .btn-primary:hover{background:#1E9670; color:#fff;}
  .sb-why-solar .banner .btn-outline{border-color:#3B5850; color:var(--paper);}
  .sb-why-solar .banner .btn-outline:hover{border-color:var(--paper);}
  .sb-why-solar .banner-ctas{display:flex; gap:14px; flex-wrap:wrap;}

  .sb-why-solar .hero-photo{margin:0;min-width:0;}
  .sb-why-solar .hero-photo img{display:block;width:100%;height:440px;object-fit:cover;object-position:50% 49%;border-radius:3px;}
  .sb-why-solar .hero-photo figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:13px;font-size:.76rem;color:var(--ink-soft);}
  .sb-why-solar .hero-photo figcaption span:first-child{font-weight:600;color:var(--peso-deep);}
  .sb-why-solar .system-diagram{display:block;width:100%;height:auto;margin:0 0 22px;border-bottom:1px solid var(--line-strong);}
  .sb-why-solar .type-card{overflow:hidden;min-width:0;}
  .sb-why-solar .type-photo{display:block;width:calc(100% + 48px);max-width:none;height:205px;object-fit:cover;margin:-28px -24px 22px;}
  .sb-why-solar .type-photo.technician-asian{object-position:50% 44%;}
  .sb-why-solar .type-photo.philippines-solar{object-position:50% 54%;}
  .sb-why-solar .photo-note{font-size:.78rem;color:var(--ink-soft);margin-top:22px;}
  @media(max-width:980px) and (min-width:761px){.sb-why-solar .hero .wrap{gap:28px;}}
  @media(max-width:760px){
    .sb-why-solar .hero{padding:42px 0;}.sb-why-solar .hero .wrap{gap:32px;}
    .sb-why-solar .hero-photo img{height:auto;aspect-ratio:4/3;}
    .sb-why-solar .type-grid.cols-3{grid-template-columns:1fr;}
    .sb-why-solar .type-photo{height:auto;aspect-ratio:16/10;}
    .sb-why-solar .fit-col{padding:26px 22px;}
  }