/* ==========================================================================
   Solar Panels Vernon — solarpanelsvernon.com
   Plain CSS, no build step, no web fonts.
   Palette: #2E85BD + variations (client-specified) + one amber CTA accent.
   Layout language adapted from kurtiskitchen.com.
   ========================================================================== */

:root{
  /* Brand — #2E85BD and variations */
  --brand:        #2E85BD;
  --brand-dark:   #24699A;
  --brand-deep:   #1B4E73;
  --brand-navy:   #12354F;
  --brand-light:  #5BA3D0;
  --brand-pale:   #E8F2F9;

  /* Accent — primary CTAs only */
  --accent:       #F0A81E;
  --accent-dark:  #D18F0F;

  /* Neutrals */
  --ink:          #0F1B24;
  --ink-soft:     #4A5C68;
  --line:         #DCE6ED;
  --bg:           #FFFFFF;
  --bg-alt:       #F5F8FB;

  /* Layout */
  --max:          1180px;
  --radius:       0;

  /* Type — blueprint default, no web fonts */
  --font-head:    Georgia, 'Times New Roman', Times, serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark)}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;color:var(--brand)}
h3{font-size:1.25rem;font-weight:700;color:var(--ink)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
table{border-collapse:collapse;width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.eyebrow{
  font-family:var(--font-body);font-size:.8125rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dark);
  margin:0 0 .8em;
}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:8px;top:8px;z-index:200;background:var(--accent);color:var(--ink);
  padding:10px 16px;font-weight:700;
}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--font-body);font-size:.875rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:15px 28px;border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.btn--lg{padding:18px 36px;font-size:.9375rem}
.btn--accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn--brand{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.btn--brand:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn--navy{background:var(--brand-navy);color:#fff;border-color:var(--brand-navy)}
.btn--navy:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.btn--ghost:hover{background:#fff;color:var(--brand-navy)}
.btn--outline{background:transparent;color:var(--brand-dark);border-color:var(--brand)}
.btn--outline:hover{background:var(--brand);color:#fff}

/* ---------- Offer bar ---------- */
.offer-bar{background:var(--brand-deep);color:#fff;text-align:center;padding:11px 20px;font-size:.9375rem}
.offer-bar strong{color:var(--accent)}
.offer-bar a{color:#fff;font-weight:700;text-decoration:underline;margin-left:10px;white-space:nowrap}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:50}
.header-top{background:var(--brand-navy);color:#fff}
.header-top__inner{
  max-width:var(--max);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.nav__logo{
  display:block;font-family:var(--font-head);font-size:1.3rem;font-weight:700;
  color:#fff;text-decoration:none;letter-spacing:.02em;line-height:1.15;
}
.nav__logo span{display:block;font-family:var(--font-body);font-size:.6875rem;font-weight:700;
  letter-spacing:.22em;color:var(--brand-light);text-transform:uppercase;margin-top:3px}
.header-contact{display:flex;gap:26px;flex-wrap:wrap}
.header-contact__item{font-size:.875rem;color:#cfe0ee;text-decoration:none;white-space:nowrap}
.header-contact__item:hover{color:#fff}
.header-contact__item strong{color:#fff}

.site-nav{background:var(--brand-dark);position:relative}
.site-nav .wrap{display:flex;align-items:center;justify-content:flex-end}
.nav__toggle{
  display:none;background:none;border:2px solid rgba(255,255,255,.6);color:#fff;
  font:inherit;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:9px 14px;margin:9px 0;cursor:pointer;
}
.nav__links{
  list-style:none;display:flex;flex-wrap:wrap;align-items:stretch;
  margin:0;padding:0;width:100%;gap:0;
}
.nav__links > li{position:relative}
.nav__links > li > a{
  display:block;padding:16px 15px;color:#fff;text-decoration:none;
  font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.nav__links > li > a:hover{background:var(--brand-deep)}
.nav__links > li.nav__spacer{margin-left:auto}
/* Estimate button: --brand-navy matched the header-top bar directly above it,
   so it read as part of that row rather than as a button. --brand-deep sits
   clearly between the top bar and the nav bar. */
/* no margin/padding overrides: it inherits the nav link box so it sits at the
   same height as the amber call button beside it */
.nav__cta{background:transparent;box-shadow:inset 0 0 0 2px #fff}
.nav__cta:hover{background:#fff;color:var(--brand-navy)}
.nav__call{background:var(--accent);color:var(--ink) !important}
.nav__call:hover{background:var(--accent-dark) !important}

/* dropdown */
.nav__has-children > a::after{content:" \25BE";font-size:.8em}
.nav__dropdown{
  list-style:none;margin:0;padding:0;position:absolute;top:100%;left:0;
  min-width:290px;background:var(--brand-deep);
  display:none;box-shadow:0 10px 26px rgba(15,27,36,.28);
}
.nav__has-children:hover .nav__dropdown,
.nav__has-children:focus-within .nav__dropdown{display:block}
.nav__dropdown a{
  display:block;padding:12px 18px;color:#fff;text-decoration:none;
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;text-transform:none;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav__dropdown a:hover{background:var(--brand-navy)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--brand-navy);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,53,79,.90) 0%,rgba(18,53,79,.76) 46%,rgba(27,78,115,.56) 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;margin-bottom:.45em}
.hero .eyebrow{color:var(--accent)}
.hero__lead{font-size:1.1875rem;max-width:56ch;color:#e6f0f7;margin-bottom:1.5em}

.hero--home{padding:54px 0 58px}
.hero--inner{padding:64px 0 66px}
.hero--inner .hero__lead{margin-bottom:1.6em}

.hero__split{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start}
.hero__checklist{list-style:none;padding:0;margin:0 0 1.8em}
.hero__checklist li{position:relative;padding-left:32px;margin-bottom:.6em;font-size:1.0625rem;color:#eaf3f9}
.hero__checklist li::before{
  content:"\2713";position:absolute;left:0;top:-1px;
  color:var(--accent);font-size:1.25rem;font-weight:700;
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Form card ---------- */
.form-card{background:#fff;color:var(--ink);padding:28px 26px 30px;box-shadow:0 18px 44px rgba(15,27,36,.26)}
.form-card h2,.form-card h3{font-size:1.4rem;color:var(--brand-navy);margin-bottom:.25em}
.form-card__sub{font-size:.9375rem;color:var(--ink-soft);margin-bottom:1.2em}
.field{margin-bottom:14px}
.field label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.9375rem;color:var(--ink);
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(46,133,189,.16)}
.field textarea{min-height:88px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Server-side rejection notice. Hidden until main.js fills it from ?error= */
.formerror{display:none;margin:0 0 14px;padding:12px 14px;font-size:.9063rem;
  background:#FDF1D8;border-left:4px solid var(--accent);color:#0F1B24;line-height:1.5}
.formerror.show{display:block}
.turnstile-wrap{margin:4px 0 12px;min-height:65px}
.turnstile-wrap .cf-turnstile{max-width:100%}
.field abbr[title]{color:var(--accent-dark);text-decoration:none;border:0}

/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-card .btn{width:100%;text-align:center;margin-top:6px}
.form-note{font-size:.8125rem;color:var(--ink-soft);margin:12px 0 0;line-height:1.55}

/* Hero form card — compact so the hero stays a sensible height.
   The full-size card is kept on /estimate and /contact. */
.hero .form-card{padding:20px 20px 22px}
.hero .form-card h2{font-size:1.2rem;margin-bottom:.2em}
.hero .form-card__sub{font-size:.875rem;margin-bottom:.9em}
.hero .form-card .field{margin-bottom:9px}
.hero .form-card .field label{font-size:.6875rem;margin-bottom:3px}
.hero .form-card .field input,
.hero .form-card .field select{padding:9px 11px;font-size:.9063rem}
.hero .form-card .form-row{gap:10px}
.hero .form-card .btn{margin-top:4px;padding:14px 24px;font-size:.875rem}
.hero .form-card .form-note{font-size:.75rem;margin-top:9px;line-height:1.45}

/* ---------- Sections ---------- */
.section{padding:70px 0}
.section--alt{background:var(--bg-alt)}
.section--pale{background:var(--brand-pale)}
.section--tight{padding:48px 0}
.section__lead{max-width:68ch;font-size:1.0625rem}
/* a CTA that ends a lead block sits on its own line rather than colliding
   with the text baseline above it */
.section__lead > p > .btn:only-child{margin:4px 0 6px}
.section__lead--center{margin-left:auto;margin-right:auto;text-align:center}
.section--center{text-align:center}
.section--center .section__lead{margin-left:auto;margin-right:auto}

.section--photo{position:relative;color:#fff;padding:76px 0;background:var(--brand-navy)}
.section--photo .section__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.section--photo::after{content:"";position:absolute;inset:0;background:rgba(18,53,79,.86)}
.section--photo .wrap{position:relative;z-index:2}
.section--photo h2{color:#fff}
.section--photo .section__lead{color:#dbe8f1}

/* ---------- Intro split (lead text + supporting photo) ---------- */
.intro-split{display:grid;grid-template-columns:1.18fr .82fr;gap:46px;align-items:stretch}
.intro-split .section__lead{max-width:none}
/* the figure stretches to the height of the copy beside it, so the column
   never reads as half-empty */
.intro-media{margin:0;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;overflow:hidden}
.intro-media img{width:100%;flex:1 1 auto;min-height:260px;object-fit:cover;display:block}
.intro-media figcaption{
  background:var(--brand-pale);color:var(--ink-soft);
  padding:14px 17px;font-size:.8438rem;line-height:1.55;
  border-top:1px solid var(--line);
}
.intro-media figcaption strong{color:var(--brand-navy)}

/* ---------- Image band ---------- */
.image-band{padding:18px 0}
.image-band img{width:100%;max-height:320px;object-fit:cover;border-radius:var(--radius)}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:24px;margin-top:34px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--5{grid-template-columns:repeat(5,1fr)}

.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--brand);padding:26px 24px}
.card h3{margin-bottom:.45em}
.card p{margin-bottom:.8em;font-size:.9688rem;color:var(--ink-soft)}
.card p:last-child{margin-bottom:0}
.card__link{font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--brand-dark)}
.card__link:hover{text-decoration:underline}
.card__links{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.section--alt .card{background:#fff}

.card--photo{padding:0;border-top-width:0;display:flex;flex-direction:column}
.card--photo img{width:100%;height:170px;object-fit:cover}
.card--photo .card__body{padding:22px 20px 24px;border-top:4px solid var(--brand);flex:1;
  display:flex;flex-direction:column}
.card--photo .card__links{margin-top:auto;padding-top:12px}

.step{background:transparent;border:0;padding:0}
.step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:var(--accent);color:var(--ink);
  font-family:var(--font-head);font-size:1.3rem;font-weight:700;margin-bottom:14px;
}
.section--photo .step h3{color:#fff}
.section--photo .step p{color:#d3e3ee;font-size:.9688rem}

/* ---------- Checklist ---------- */
.checklist{list-style:none;padding:0;margin:26px 0 0}
.checklist li{position:relative;padding-left:34px;margin-bottom:1em}
.checklist li::before{
  content:"\2713";position:absolute;left:0;top:-2px;
  color:var(--brand);font-size:1.3rem;font-weight:700;
}
.checklist strong{display:block;color:var(--ink)}

/* ---------- Link list / area links ---------- */
.linklist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0;margin:30px 0 0}
.linklist a{
  display:block;padding:15px 18px;background:#fff;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;
  font-weight:600;font-size:.9688rem;transition:border-color .15s,background .15s;
}
.linklist a:hover{border-color:var(--brand);background:var(--brand-pale)}
.area-link__name{display:block;font-weight:700}
.area-link__city{display:block;font-size:.8125rem;color:var(--ink-soft);font-weight:400;margin-top:2px}
.linklist-more{display:inline-block;margin-top:22px;font-weight:700;font-size:.875rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark);text-decoration:none}
.linklist-more:hover{text-decoration:underline}

/* ---------- Cost table ---------- */
.table-wrap{overflow-x:auto;margin:30px 0 18px}
.cost-table{min-width:560px;background:#fff;border:1px solid var(--line)}
.cost-table th,.cost-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.9688rem}
.cost-table thead th{background:var(--brand-navy);color:#fff;font-family:var(--font-body);
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase}
.cost-table tbody tr:nth-child(odd){background:var(--bg-alt)}
.cost-table td strong{color:var(--brand-dark)}
.cost-table tr:last-child td{border-bottom:0}
.table-note{font-size:.875rem;color:var(--ink-soft);max-width:80ch;font-style:italic}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:34px auto 0}
.faq details{background:#fff;border:1px solid var(--line);margin-bottom:12px}
.faq summary{
  cursor:pointer;padding:18px 52px 18px 22px;position:relative;list-style:none;
  font-family:var(--font-head);font-size:1.0625rem;font-weight:700;color:var(--brand-navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.6rem;color:var(--brand);line-height:1;font-family:var(--font-body);
}
.faq details[open] summary::after{content:"\2013"}
.faq details > div,.faq details > p{padding:0 22px 20px;margin:0;color:var(--ink-soft)}
.faq details > div > p{margin:0 0 .9em}
.faq details > div > p:last-child{margin:0}

/* ---------- Phone strip ---------- */
.phone-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:56px 0;text-align:center}
.phone-strip h2{margin-bottom:.3em}
.phone-strip .sub{max-width:62ch;margin:0 auto 1.6em;color:var(--ink-soft)}
.phone-strip .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:60fr 40fr;gap:48px;align-items:start}

/* ---------- Contact / NAP ---------- */
.nap{list-style:none;padding:0;margin:26px 0 0}
.nap li{margin-bottom:18px}
.nap strong{display:block;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);margin-bottom:3px}
.nap a{color:var(--ink);text-decoration:none;font-weight:600}
.nap a:hover{color:var(--brand-dark)}

/* ---------- Prose (legal pages) ---------- */
.prose{max-width:76ch}
.prose h2{font-size:1.5rem;margin-top:1.8em}
.prose h3{margin-top:1.4em}
.prose ul{padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose .updated{font-size:.875rem;color:var(--ink-soft);font-style:italic}

/* ---------- Footer ---------- */
.site-footer{background:var(--brand-navy);color:#c3d6e4;padding:60px 0 0;font-size:.9375rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px;padding-bottom:44px}
.site-footer h3{color:#fff;font-size:1rem;font-family:var(--font-body);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.6em}
.site-footer a{color:#c3d6e4;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-brand__name{font-family:var(--font-head);font-size:1.25rem;color:#fff;margin-bottom:.25em}
.footer-brand__tag{color:var(--brand-light);font-style:italic;margin-bottom:1em}
.footer-note{font-size:.8125rem;color:#93aec3;line-height:1.6;margin-top:1em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:20px 0 26px;
  font-size:.8125rem;color:#93aec3}
.footer-bottom p{margin:0}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid--5{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .hero__split{grid-template-columns:1fr 360px;gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
/* The full nav needs ~1040px to sit on one line. Between that and the old
   900px hamburger breakpoint it wrapped onto two rows, so the nav switches at
   1024px and tightens its padding just above that. */
@media (max-width:1100px) and (min-width:1024px){
  .nav__links > li > a{padding:16px 9px;letter-spacing:.05em}
}
@media (max-width:1023px){
  .nav__toggle{display:block;align-self:flex-start;min-width:132px}
  .site-nav .wrap{flex-direction:column;align-items:stretch}
  .nav__links{display:none;flex-direction:column;width:100%;padding-bottom:10px}
  .nav__links.is-open{display:flex}
  .nav__links > li.nav__spacer{margin-left:0}
  .nav__links > li > a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.16)}
  .nav__dropdown{position:static;display:block;min-width:0;background:rgba(0,0,0,.14);box-shadow:none}
  .nav__dropdown a{padding-left:22px;border-bottom:0;font-size:.8125rem}
  .nav__has-children > a::after{content:""}
  /* stacked menu: both buttons keep the standard stacked link box */
  .nav__cta{margin:6px 0 0}
  .nav__call{margin-top:6px}
}
@media (max-width:900px){
  .intro-split{grid-template-columns:1fr;gap:30px}
  .intro-media{max-width:560px}
  .intro-media img{flex:none;aspect-ratio:4/3;min-height:0}
  .hero__split{grid-template-columns:1fr}
  .hero--home{padding:44px 0 50px}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .linklist{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .section{padding:56px 0}
}
@media (max-width:600px){
  .intro-media img{aspect-ratio:16/10}
  .grid--2,.grid--3,.grid--5{grid-template-columns:1fr}
  .linklist{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{text-align:center}
  .phone-strip .btns{flex-direction:column}
  .header-top__inner{flex-direction:column;align-items:flex-start;gap:10px}
  .header-contact{gap:14px}
  .footer-grid{grid-template-columns:1fr}
  .image-band img{max-height:220px}
}

@media print{
  .offer-bar,.site-nav,.hero__cta,.phone-strip,.form-card{display:none}
  body{color:#000}
}