/* California Sustainable Energy. Loads after /vse/redesign.css: the two
   state sites are one family (navy, gold, Barlow, editorial sections), and
   this file holds only what California does differently: the wordmark, the
   quiz living in the hero, the source notes under every number, and the
   installer and consumer-guide blocks California requires. */
@font-face{font-display:swap;font-family:Barlow;src:url('/vse/fonts/Barlow-500.woff2');font-weight:500}

/* Wordmark: the same circle, sun and roof-line mark as the Virginia logo,
   set as live type so it stays sharp and needs no raster per state. */
.cse-mark{display:flex;align-items:center;gap:14px;flex-shrink:0;color:#fffdf9}
.cse-mark svg{width:48px;height:48px;color:var(--gold)}
.cse-mark .wm{display:grid;line-height:1}
.cse-mark .wm b{font:600 25px/1 'Playfair Display',Georgia,serif;letter-spacing:.035em}
.cse-mark .wm span{font-size:9.5px;font-weight:600;letter-spacing:.34em;color:var(--gold);margin-top:7px;white-space:nowrap}
footer .cse-mark svg{width:54px;height:54px}
footer .cse-mark .wm b{font-size:27px}

.nav .right .tel{display:inline-flex}
@media(max-width:1200px){.nav .right .tel{display:none}}

/* Hero: headline left, the quiz itself right. A visitor from an ad answers
   question one without scrolling or clicking through. */
.hero.cse{display:block;padding:72px 0 80px;min-height:0}
.hero.cse .photo img{object-position:50% 40%}
.hero.cse .shade{background:linear-gradient(90deg,rgba(8,17,23,.93) 0%,rgba(8,17,23,.8) 36%,rgba(8,17,23,.4) 62%,rgba(8,17,23,.18) 100%),linear-gradient(0deg,rgba(8,17,23,.5),transparent 35%)}
.hero.cse .inner{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"text quiz" "trust quiz";grid-template-rows:auto 1fr;column-gap:64px;align-items:end}
.hero.cse .htext{grid-area:text}
.hero.cse .quiz{grid-area:quiz;align-self:center}
.hero.cse .trust{grid-area:trust;align-self:start}
.hero.cse h1 span{display:block;text-wrap:balance}
.hero.cse h1{font-size:clamp(44px,4.1vw,64px);max-width:none}
.hero.cse .lead{max-width:520px}
.trust{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:12px;max-width:520px}
.trust li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:#c9d2d7}
.trust li svg{width:18px;height:18px;margin-top:2px;color:var(--gold)}
.trust a{text-decoration:underline;text-decoration-color:#ffffff55;text-underline-offset:3px}
.trust a:hover{color:#fff}

/* The quiz card. Ported from the original one-card page; same API, same
   screens, restyled into the family's paper card. */
.quiz{background:#fff;color:var(--ink);border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;scroll-margin-top:20px;display:flex;flex-direction:column;min-height:520px}
.quiz .qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px 0;min-height:44px}
.quiz .count{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8a6c3c}
.quiz .qback{background:none;border:0;padding:8px 0;color:var(--muted);font-size:15px;cursor:pointer;min-height:40px}
.quiz .bar{height:3px;background:#eceff1;margin:12px 24px 0}
.quiz .bar i{display:block;height:100%;width:100%;background:#c59448;transform-origin:left;transform:scaleX(.08);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.screen{padding:22px 24px 26px;display:flex;flex-direction:column;gap:16px;flex:1}
.screen h2,.screen h3{font-size:27px;font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:0;max-width:none;text-align:left}
.screen h3.sub{font-size:20px;font-weight:600;letter-spacing:-.015em}
.screen p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.screen .why{font-size:14.5px}
.screen .why b{color:var(--ink);font-weight:600}
.tiles{display:grid;gap:10px}
.tile{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:13px 16px;background:#fff;border:1px solid #d5dfe4;border-radius:3px;font-size:16.5px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s;touch-action:manipulation}
.tile:hover{border-color:#bd9c65;background:#fbf8f2}
.tile:active{transform:scale(.99)}
.tile .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid #b8c4ca;flex:none}
.tile.sel{border-color:#bd9c65;background:#fbf8f2}
.tile.sel .dot{border-color:#b58337;background:radial-gradient(#b58337 45%,transparent 50%)}
.tile small{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.field input{width:100%;min-height:52px;padding:11px 13px;border:1px solid #cad6dc;border-radius:3px;font-size:17px;color:var(--ink);background:#fff}
.field input:focus{outline:none;border-color:#b58337;box-shadow:0 0 0 3px rgba(218,184,120,.35)}
.quiz .btn{width:100%;min-height:54px;gap:14px}
.quiz .btn.alt{background:#fff;border-color:#cad6dc;color:var(--ink)}
.quiz .btn.alt:hover{background:#f6f8f9}
.confirm{border:1px solid #d5dfe4;border-radius:3px;padding:16px;display:grid;gap:12px;font-size:16px}
.confirm .row{display:flex;gap:10px}
.confirm .row .btn{min-height:48px}
.screen .note{font-size:12.5px;line-height:1.5}
.screen .err{font-size:14.5px;color:#a62f20;font-weight:500;margin:0}
.screen .err:empty{display:none}
.consent{margin-top:0;font-size:12.5px;line-height:1.5}
.consent input{width:20px;height:20px;margin-top:2px}
.code{display:flex;gap:10px;justify-content:center}
.code input{width:54px;height:60px;text-align:center;font-size:26px;font-weight:600;border:1px solid #cad6dc;border-radius:3px;color:var(--ink)}
.linkbtn{background:none;border:0;padding:8px;font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer;align-self:center;min-height:40px}
.facts{background:#f5f6f6;border-radius:3px;padding:2px 16px;display:grid}
.facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #e3e7e9;font-size:15px}
.facts div:first-child{border-top:0}
.facts span{color:var(--muted)}
.facts b{font-weight:600;text-align:right}
.echo{font-size:16px;color:var(--ink)!important}
.closer{display:flex;gap:14px;align-items:center;border:1px solid #d5dfe4;border-radius:3px;padding:13px 14px}
.avatar{width:50px;height:50px;border-radius:50%;background:#152832;color:var(--gold);display:grid;place-items:center;font-size:20px;font-weight:600;flex:none;position:relative;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .live{position:absolute;right:0;bottom:1px;width:13px;height:13px;border-radius:50%;background:#3cbf6b;border:2px solid #fff}
.closer b{display:block}
.closer span{font-size:14px;color:var(--muted)}
.days,.times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{min-height:54px;border:1px solid #d5dfe4;border-radius:3px;background:#fff;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;touch-action:manipulation}
.chip small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.chip.sel,.chip:hover{border-color:#bd9c65;background:#fbf8f2}
.big-check{width:60px;height:60px;border-radius:50%;background:#edf5ef;color:#347351;display:grid;place-items:center;margin:0 auto}
.spacer{flex:1}
.screen .center{text-align:center}
.busy{opacity:.6;pointer-events:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quiz .qfoot{padding:12px 24px 16px;border-top:1px solid #eceff1;font-size:12px;line-height:1.5;color:#7c8b93}

/* Numbers carry their source right under them. */
.proof .stats span{max-width:170px}
.proof .src{font-size:12px;color:#7d8a92;text-align:center;padding:0 0 22px;margin:0}
.vs .src{font-size:12.5px;color:#7f929c;margin-top:26px;text-align:center}
.vs .deadline{margin:42px auto 0;max-width:820px;border:1px solid #dab87866;border-radius:3px;padding:24px 28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.vs .deadline b{font-size:40px;font-weight:400;letter-spacing:-.04em;color:var(--gold);line-height:1}
.vs .deadline p{color:#c3ced4;font-size:16px;line-height:1.7}
.vs .deadline p strong{color:#fff;font-weight:600}

/* Who installs: the contractor, by name and licence number. */
.qual .three a{text-decoration:underline;text-underline-offset:3px;color:#8a6c3c}
.who .avatar{width:64px;height:64px;font-size:24px}
.who .person{display:flex;align-items:center;gap:16px;margin-top:30px}
.who .person b{display:block;font-size:19px;font-weight:600}
.who .person span{font-size:15px;color:var(--muted)}

/* Close: one action, back up to the quiz. */
.close.cse .wrap{grid-template-columns:1fr;gap:0;text-align:center}
.close.cse .center{text-align:center;padding-top:0}
.close.cse .center .kick{justify-content:center}
.close.cse h2{max-width:760px;margin:auto}
.close.cse .lead{margin-left:auto;margin-right:auto}
.close.cse .cta{justify-content:center}
.close.cse .ghost{color:#f3f5f6}
.guide{margin:56px auto 0;max-width:760px;border-top:1px solid #ffffff25;padding-top:30px;display:flex;gap:18px;align-items:flex-start;text-align:left}
.guide svg{width:26px;height:26px;color:var(--gold);margin-top:3px}
.guide p{color:#b5c2c9;font-size:15px;line-height:1.7}
.guide a{color:#fff;text-decoration:underline;text-underline-offset:3px}

footer .addr{font-style:normal;line-height:1.7;color:#a0b1bc;font-size:14px}
footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer .legal a{text-decoration:underline;text-underline-offset:3px}

/* Plain pages (About). */
.page{padding:90px 0 100px;background:#fff}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(40px,5vw,60px);font-weight:400;letter-spacing:-.045em;line-height:1.08}
.page h2{font-size:30px;font-weight:400;margin:56px 0 14px;letter-spacing:-.03em}
.page p{font-size:18px;line-height:1.8;margin-top:16px}
.page .facts{margin-top:22px;padding:4px 22px}
.page .facts div{font-size:16px;padding:14px 0}
.page .facts a{text-decoration:underline;text-underline-offset:3px}
.page-hero{background:#152832;color:#fff;padding:80px 0 70px}
.page-hero .kick{color:#e1c18b}
.page-hero p{color:#c9d2d7;font-size:19px;max-width:620px;margin-top:22px;line-height:1.7}

@media(max-width:1100px){
  .hero.cse .inner{grid-template-columns:minmax(0,1fr) 400px;gap:40px}
}
@media(max-width:900px){
  .hero.cse{padding:48px 0 56px}
  .hero.cse .inner{grid-template-columns:1fr;grid-template-areas:"text" "quiz" "trust";grid-template-rows:auto;row-gap:30px}
  .hero.cse .trust{margin-top:0}
  .hero.cse h1{font-size:clamp(40px,8vw,60px)}
  .hero.cse .shade{background:linear-gradient(180deg,rgba(8,17,23,.9) 0%,rgba(8,17,23,.8) 50%,rgba(8,17,23,.92) 100%)}
  .quiz{max-width:560px;min-height:0}
  .vs .deadline{grid-template-columns:1fr;gap:10px}
}
@media(max-width:600px){
  .cse-mark{gap:10px}
  .cse-mark svg{width:40px;height:40px}
  .cse-mark .wm b{font-size:21px}
  .cse-mark .wm span{font-size:8px;letter-spacing:.3em;margin-top:6px}
  .hero.cse{padding:30px 0 36px}
  .hero.cse .photo{top:0}
  .hero.cse .photo img{object-position:55% 30%}
  .hero.cse .kick{margin-bottom:14px}
  .hero.cse h1{font-size:clamp(32px,9vw,44px);line-height:1.1}
  .proof .stats b{font-size:27px;white-space:nowrap}
  .hero.cse .lead{font-size:16.5px;margin-top:16px;line-height:1.6}
  .trust{margin-top:20px;gap:9px}
  .trust li{font-size:13.5px}
  .hero.cse .inner{row-gap:22px}
  .quiz .qhead{padding:14px 18px 0}
  .quiz .bar{margin:10px 18px 0}
  .screen{padding:18px 18px 22px;gap:14px}
  .screen h2,.screen h3{font-size:24px}
  .quiz .qfoot{padding:12px 18px 14px}
  .proof .stats span{max-width:105px}
  .proof .src{padding:0 20px 20px}
  .vs .deadline{padding:20px}
  .vs .deadline b{font-size:34px}
  .guide{margin-top:40px}
  .page{padding:56px 0 70px}
  .page-hero{padding:56px 0 50px}
  .page p{font-size:17px}
  .page h2{font-size:26px;margin-top:44px}
}

/* Legal pages share the plain page; lists and the opt-out control. */
.legal-page ul{padding-left:22px;margin:14px 0 0;display:grid;gap:10px}
.legal-page li{font-size:17px;line-height:1.75;color:var(--muted)}
.legal-page li b,.legal-page p b{color:var(--ink);font-weight:600}
.legal-page p a,.legal-page li a{text-decoration:underline;text-underline-offset:3px}
.legal-page .choice{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px}
.legal-page .choice span{font-size:15px;color:var(--ink)}
.page-hero h1{font-size:clamp(36px,4.6vw,56px);font-weight:400;letter-spacing:-.04em;line-height:1.1;max-width:900px}

/* Price figures: the cent sign and the joining words sit smaller than the digits, the way a price is set */
.stats b .to,.big .to{font-size:.5em;letter-spacing:0;margin:0 .3em;vertical-align:.32em;opacity:.7}
.stats b .cent,.big .cent{font-size:.55em;letter-spacing:0;margin-left:.06em;vertical-align:.62em}
.stats b .per,.big .per{font-size:.5em;letter-spacing:0;margin-left:.45em;opacity:.75}