/* ============================================================
   BYOP homepage — "Light Trade"  (2026-08-28)
   Page-scoped stylesheet, loads after byop-v5b.css. The header,
   mobile nav, footer and buttons come from v5b; everything below is
   the homepage itself. White + neutral light gray ground, pure black
   only where the page talks about the outage, yellow as one accent
   per screen, the exact logo mark as the signature.
   ============================================================ */

.home-lt{--mist:#F5F5F5;--fog:#EBEBEB;--smoke:#DADADA;--steel:#5C5C5C;--steel-dark:#B9B9B9;--hair:#E3E3E3}

/* ---------- type: sentence case, weight 600, more air ---------- */
.home-lt h1,.home-lt h2{text-transform:none;letter-spacing:-.012em;font-weight:600}
.home-lt h1{font-size:clamp(3.8rem,8vw,6.5rem);line-height:.92}
.home-lt h2{font-size:clamp(2.4rem,4.2vw,3.625rem);line-height:1;text-wrap:balance;margin-bottom:.35em}
.home-lt h3{font-weight:600;font-size:1.3rem;line-height:1.2;letter-spacing:-.005em;margin:0}
.lt-k{display:inline-flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:600;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:22px}
.lt-k::before{content:"";display:block;width:22px;height:3px;background:var(--yellow);flex-shrink:0}
.lt-k--light{color:#fff}
.lt-dek{font-size:clamp(1.08rem,1.4vw,1.25rem);line-height:1.55;color:var(--steel)}
.lt-small{font-size:1rem;line-height:1.55;color:var(--steel)}
.lt-num{font-family:var(--disp);font-weight:600;font-size:.875rem;letter-spacing:.14em;color:var(--steel)}
.lt-link{font-weight:600;color:var(--ink);border-bottom:2px solid var(--yellow);padding-bottom:1px}
.lt-link:hover{color:var(--gold-text)}
.lt-mark{position:absolute;pointer-events:none;display:block}
.lt-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.lt-sec{padding:72px 0}
.lt-sec--rel{position:relative;overflow:hidden}
.lt-sec--mist{background:var(--mist)}
.lt-sec--ink{background:#000;color:#fff}
.lt-sec--ink h2,.lt-sec--ink h3{color:#fff}
.lt-sec--ink .lt-dek,.lt-sec--ink .lt-small{color:var(--steel-dark)}
.lt-sec--ink .lt-row{border-color:#2A2A2A}
.lt-stars{display:inline-flex;gap:3px;vertical-align:middle}
.lt-stars svg{width:18px;height:18px;fill:var(--yellow)}
@media(min-width:980px){.lt-sec{padding:120px 0 110px}}

/* ---------- hero: words on the mark, the installs standing beside them ---------- */
.lt-hero{position:relative;overflow:hidden;background:#fff;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "film" "form"}
.lt-hero__mark{left:-36px;top:-8px;width:320px;height:339px;color:var(--fog)}
.lt-hero__copy{grid-area:copy;position:relative;padding:44px 20px 30px;display:flex;flex-direction:column}
.lt-hero__copy .lt-k{margin-bottom:18px}
.lt-hero__copy .lt-dek{margin-top:20px;max-width:520px}
.lt-hero__form{grid-area:form;position:relative;padding:24px 20px 36px;background:var(--mist)}
.lt-hero__form>div{max-width:640px}
.lt-hero__note{margin:14px 0 0;font-size:.9rem;color:var(--steel);text-align:center}
.lt-hero__film{grid-area:film;position:relative;background:#000;aspect-ratio:4/5;overflow:hidden}
@media(min-width:980px){
  .lt-hero{grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"copy film" "form film"}
  .lt-hero__mark{left:-40px;top:-36px;width:640px;height:678px}
  .lt-hero__copy{padding:100px 48px 0 max(20px,calc((100vw - 1180px) / 2));max-width:calc(680px + max(20px,calc((100vw - 1180px) / 2)))}
  .lt-hero__copy .lt-k{margin-bottom:26px}
  .lt-hero__copy .lt-dek{margin-top:26px}
  .lt-hero__form{padding:34px 48px 72px max(20px,calc((100vw - 1180px) / 2));background:transparent}
  .lt-hero__note{text-align:left}
  .lt-hero__film{aspect-ratio:auto;min-height:880px;height:100%}
}
@media(min-width:1200px){.lt-hero{grid-template-columns:minmax(0,1fr) minmax(495px,42%)}}
@media(min-width:1600px){.lt-hero{grid-template-columns:1fr 1fr}}

/* carousel — the battery showcase, standing in for the film */
.lt-car{position:absolute;inset:0}
.lt-car__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.lt-car__slide.is-on{opacity:1}
.lt-car__slide img{width:100%;height:100%;object-fit:cover;display:block}
.lt-car__shade{position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
.lt-car__cap{position:absolute;left:20px;bottom:22px;right:110px;color:#fff;display:flex;flex-direction:column;gap:2px}
.lt-car__cap b{font-family:var(--disp);font-weight:600;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase}
.lt-car__cap span{font-size:1rem;color:#DADADA}
.lt-car__dots{position:absolute;right:20px;bottom:30px;display:flex;gap:8px;z-index:2}
.lt-car__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);border:0;padding:0;cursor:pointer;transition:background .2s ease}
.lt-car__dot:hover{background:rgba(255,255,255,.8)}
.lt-car__dot.is-on{background:var(--yellow)}
.lt-car__dot:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media(min-width:980px){.lt-car__cap{left:24px;bottom:24px}.lt-car__dots{right:24px;bottom:32px}}
@media(prefers-reduced-motion:reduce){.lt-car__slide{transition:none}}

/* ---------- the universal form, in the light ---------- */
.home-lt .byop-form{--bf-bg:#fff;--bf-fg:#000;--bf-line:#DADADA;--bf-accent:#FCCE08;border:1px solid var(--smoke);border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.08);padding:22px 22px 20px;max-width:none;margin:0}
.home-lt .byop-form h3{font-family:var(--disp);font-weight:600;font-size:1.7rem;line-height:1;text-transform:none;margin:0 0 6px}
.home-lt .byop-form p.byop-form__sub{color:var(--steel);opacity:1;font-size:1rem;margin-bottom:18px}
.home-lt .byop-form label{font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);opacity:1;margin-bottom:8px}
.home-lt .byop-form input,.home-lt .byop-form select,.home-lt .byop-form textarea{height:52px;padding:0 16px;border-radius:6px;background:#fff;color:#000;font-size:1.05rem}
.home-lt .byop-form textarea{height:auto;min-height:5.5rem;padding:14px 16px}
.home-lt .byop-form select option{background:#fff;color:#000}
.home-lt .byop-form .byop-form__row{margin-bottom:16px}
.home-lt .byop-form .byop-form__consent{opacity:1;color:var(--steel);font-size:.78rem;margin:2px 0 16px}
.home-lt .byop-form .byop-form__consent input{height:auto;width:auto;padding:0}
.home-lt .byop-form .byop-form__consent a{color:var(--ink)}
.home-lt .byop-form button{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;height:54px;padding:0 26px;border-radius:6px;transition:background-color .15s ease}
.home-lt .byop-form button:hover{background:var(--yellow-press)}
.home-lt .byop-form .byop-form__msg--ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-fg)}
.home-lt .byop-form .byop-form__msg--err{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-fg)}
.lt-close .byop-form__sub{display:none}

/* ---------- proof strip ---------- */
.lt-proof{background:var(--mist);border-top:1px solid #E6E6E6;border-bottom:1px solid #E6E6E6}
.lt-proof__in{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;align-items:center;padding:22px 20px;font-weight:600;font-size:1rem}
.lt-proof__in img{height:32px;width:auto}
.lt-proof__in>span{display:inline-flex;align-items:center;gap:10px}
@media(min-width:980px){.lt-proof__in{display:flex;justify-content:space-between;height:100px;padding:0 20px;font-size:1.06rem}.lt-proof__in img{height:40px}}

/* ---------- why now ---------- */
.lt-why{display:grid;gap:40px}
.lt-why .lt-dek{margin-bottom:28px}
.lt-list{display:flex;flex-direction:column}
.lt-row{display:grid;grid-template-columns:1fr;gap:8px;padding:22px 0;border-top:1px solid var(--hair)}
.lt-row:last-child{border-bottom:1px solid var(--hair)}
.lt-row>div{display:flex;flex-direction:column;gap:8px}
.lt-row p{margin:0}
.lt-scene{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block}
.lt-cap{font-size:.875rem;color:var(--steel);margin:14px 0 0}
@media(min-width:640px){.lt-row{grid-template-columns:60px 1fr;gap:0 20px}.lt-row--plain{grid-template-columns:1fr}}
@media(min-width:980px){.lt-why{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}.lt-why__img{padding-top:36px}}

/* ---------- what it feels like — the outage, so the page goes black ---------- */
.lt-feels{display:grid;gap:12px;padding-top:72px}
.lt-feels__copy{padding:0 20px;display:flex;flex-direction:column}
.lt-feels__copy .lt-dek{margin-bottom:18px}
.lt-feels__img{width:100%;display:block;object-fit:cover;object-position:center bottom;aspect-ratio:390/440;margin-top:12px}
@media(min-width:980px){
  .lt-feels{grid-template-columns:560px minmax(0,1fr);gap:60px;align-items:end;padding:120px 0 0 max(20px,calc((100vw - 1180px) / 2))}
  .lt-feels__copy{padding:0 0 120px}
  .lt-feels__img{aspect-ratio:740/863;margin-top:0}
}

/* ---------- the work — eight brands, real garages ---------- */
.lt-work{padding-bottom:56px}
.lt-work__head{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.lt-work__head h2{margin-bottom:0}
.lt-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lt-strip::-webkit-scrollbar{display:none}
.lt-strip figure{margin:0;flex:0 0 220px;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.lt-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;background:var(--mist)}
.lt-strip figcaption b{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.lt-strip figcaption span{font-size:.85rem;color:var(--steel)}
.lt-loyal{display:grid;gap:20px;padding-top:36px}
.lt-loyal__line{font-family:var(--disp);font-weight:600;font-size:clamp(2rem,3vw,2.75rem);line-height:1.02;letter-spacing:-.01em;text-wrap:balance;margin:0}
.lt-loyal p{margin:0}
.lt-brands{font-family:var(--disp);font-weight:600;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);line-height:1.7}
@media(min-width:980px){
  .lt-work{padding-bottom:110px}
  .lt-work__head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:56px}
  .lt-work__head .lt-dek{max-width:420px;padding-bottom:6px}
  .lt-strip{gap:18px;padding:0 20px 8px max(20px,calc((100vw - 1180px) / 2))}
  .lt-strip figure{flex-basis:300px}
  .lt-strip figure:nth-child(even){padding-top:48px}
  .lt-strip img{border-radius:12px}
  .lt-loyal{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;padding-top:72px;align-items:start}
}

/* ---------- already have solar ---------- */
.lt-solar{display:grid;gap:24px}
.lt-solar__img{order:1}
.lt-solar__copy{order:2}
.lt-inv{display:grid;gap:18px;margin:22px 0}
.lt-inv>div{padding-top:12px;border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:4px}
.lt-inv h3{font-size:1.1rem}
.lt-inv p{font-size:.9rem;color:var(--steel);line-height:1.45;margin:0}
@media(min-width:640px){.lt-inv{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media(min-width:980px){.lt-solar{grid-template-columns:520px minmax(0,1fr);gap:90px;align-items:center}}

/* ---------- who you're working with — Bat, once ---------- */
.lt-bat{position:relative;display:grid;gap:26px}
.lt-bat__mark{right:-150px;bottom:-150px;width:420px;height:420px;color:#EFEFEF}
.lt-bat__photo{width:100%;aspect-ratio:460/580;object-fit:cover;object-position:center 20%;border-radius:14px;display:block}
.lt-bat__name{font-weight:600;font-size:1.1rem;margin:0 0 16px}
.lt-bat__name span{font-weight:400;color:var(--steel)}
.lt-prose{display:flex;flex-direction:column;gap:14px}
.lt-prose p{margin:0}
@media(min-width:980px){.lt-bat{grid-template-columns:460px minmax(0,1fr);gap:90px;align-items:center}.lt-bat__mark{right:-240px;bottom:-260px;width:720px;height:720px}}

/* ---------- reviews ---------- */
.lt-rev__head{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.lt-rev__head h2{margin-bottom:0}
.lt-rev__score{display:flex;align-items:center;gap:12px}
.lt-rev__num{font-family:var(--disp);font-weight:600;font-size:2.2rem;line-height:1}
.lt-rev__note{font-size:.875rem;color:var(--steel);max-width:340px;margin:0}
.lt-rev__grid{display:grid;gap:14px;margin-bottom:24px}
.lt-review{background:#fff;border:1px solid var(--hair);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px}
.lt-review p{font-size:1.05rem;line-height:1.55;margin:0}
.lt-review footer{display:flex;justify-content:space-between;gap:12px;margin-top:auto;font-size:.9rem}
.lt-review footer b{font-weight:600}
.lt-review footer span{color:var(--steel)}
.lt-rev__link{display:inline-flex;align-items:center;gap:10px}
@media(min-width:980px){
  .lt-rev__head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:44px}
  .lt-rev__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:34px}
  .lt-review{padding:30px 30px 26px}
}

/* ---------- why homeowners call ---------- */
.lt-whyus{display:grid;gap:32px}
.lt-whyus>div{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:2px solid var(--ink)}
.lt-whyus>div p{margin:0}
.lt-whyus__t{font-family:var(--disp);font-weight:600;font-size:clamp(1.9rem,2.5vw,2.25rem);line-height:1;letter-spacing:-.01em}
@media(min-width:980px){.lt-whyus{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}.lt-whyus>div{padding-top:22px;gap:14px}}

/* ---------- FAQ ---------- */
.lt-faq{max-width:820px}
.lt-faq details{border-top:1px solid var(--hair)}
.lt-faq details:last-child{border-bottom:1px solid var(--hair)}
.lt-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:22px 0;font-weight:600;font-size:1.15rem;line-height:1.25}
.lt-faq summary::-webkit-details-marker{display:none}
.lt-faq summary::after{content:"+";font-family:var(--disp);font-weight:500;font-size:1.8rem;line-height:1;color:#8A8A8A;flex-shrink:0}
.lt-faq details[open] summary::after{content:"\2013";color:var(--yellow)}
.lt-faq details p{padding:0 0 22px;max-width:700px;margin:0}

/* ---------- close — the form again, the outage again ---------- */
.lt-close{position:relative;overflow:hidden}
.lt-close__mark{left:-20px;top:30px;width:300px;height:318px;color:#111}
.lt-close__grid{display:grid;gap:36px;position:relative}
.lt-close h2{max-width:14ch}
.lt-close .lt-dek{margin-bottom:26px;max-width:520px}
.lt-close__form{max-width:640px}
.lt-close__photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 60%;border-radius:16px;display:block}
@media(min-width:980px){.lt-close__mark{left:-40px;top:60px;width:520px;height:551px}.lt-close__grid{grid-template-columns:minmax(0,1fr) 520px;gap:90px;align-items:center}}