/* Solar House World — site styles. One sheet, mobile first.

   Palette   evergreen night #07231C → #0E4636 (header + hero) · emerald #12A26A (accent)
             mint #BDF0D6 (accents on dark) · mist #EFF6F2 (light sections) · ink #0F241D
   Type      Archivo (headings, slightly wide) · Public Sans (body)
   The one bold moment is the evergreen pre-dawn hero with the sun rising over a roof;
   everything below stays calm and disciplined so that moment carries the premium feel.
   The sun in the illustration stays gold because it is the sun; every accent is green. */

:root {
  --ink: #0F241D;
  --ink-2: #475A52;
  --paper: #FFFFFF;
  --mist: #EFF6F2;
  --line: #D7E4DC;
  --night: #07231C;
  --night-2: #0E4636;
  --green: #12A26A;
  --green-light: #2BC486;
  --green-deep: #0B7D50;
  --mint: #BDF0D6;
  --on-dark: #CFE3DA;
  --error-bg: #FBEAEA;
  --error-ink: #8A1F1F;
  --wrap: 1120px;
  --radius-card: 16px;
  --radius-field: 8px;
  --head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #E4EDE8; color: var(--ink); font: 17px/1.6 var(--body); }

/* Everything sits in one centred page, so header, hero, sections and footer share the
   same edges; nothing runs to the screen edge while other parts stay boxed. */
.page { max-width: 1200px; margin: 0 auto; background: var(--paper); min-height: 100vh;
        box-shadow: 0 0 0 1px rgba(15, 36, 29, .06), 0 30px 80px -40px rgba(7, 35, 28, .45); }
@media (min-width: 1240px) { .page { margin-top: 24px; margin-bottom: 24px; border-radius: 18px; overflow: hidden; } }

img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--head); font-stretch: 112%; color: var(--ink); margin: 0; }
h1 { font-weight: 800; font-size: clamp(34px, 5.2vw, 54px); line-height: 1.05; letter-spacing: -0.015em; }
h2 { font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.14; letter-spacing: -0.01em; }
h3 { font-weight: 700; font-size: 20px; line-height: 1.3; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: 12px; top: 12px; background: var(--paper); padding: 8px 12px; z-index: 10; }

/* ---- Header (one block with the hero) ------------------------------------------- */

.site-header { background: var(--night); border-bottom: 1px solid rgba(189, 240, 214, .08); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand svg .brand-ray, .brand svg .brand-ring { stroke: #FFFFFF; }
.brand-name { font: 800 19px/1 var(--head); font-stretch: 112%; color: #FFFFFF; white-space: nowrap; }
.site-nav { display: flex; gap: 28px; }
.site-nav a { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--on-dark); padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--green-light); }
.header-call { font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; color: #FFFFFF;
               border: 1.5px solid rgba(189, 240, 214, .45); border-radius: 999px; padding: 9px 18px; }
.header-call:hover { color: var(--night); background: var(--mint); border-color: var(--mint); }
:where(.site-header, .hero) :focus-visible { outline-color: var(--mint); }

/* ---- Hero: evergreen pre-dawn, the sun rising over a roof ------------------------- */

.hero { position: relative; overflow: hidden; color: #FFFFFF;
        background: radial-gradient(80% 70% at 30% 100%, rgba(43, 196, 134, .28) 0%, rgba(43, 196, 134, 0) 70%),
                    radial-gradient(60% 50% at 95% 0%, rgba(189, 240, 214, .10) 0%, rgba(189, 240, 214, 0) 70%),
                    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
/* The illustration follows the hero copy, so it stays in view however long the form beside it is.
   The bottom and right edges fade out so the ground and the sun's arc have no hard edge. */
.sunpath { --fade: linear-gradient(#000 78%, transparent), linear-gradient(90deg, #000 80%, transparent);
           display: block; width: 100%; height: auto; margin-top: 18px; pointer-events: none;
           -webkit-mask-image: var(--fade); -webkit-mask-composite: source-in;
           mask-image: var(--fade); mask-composite: intersect; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 60px;
              align-items: start; padding-top: 76px; padding-bottom: 92px; }
.hero-copy { padding-top: 6px; max-width: 33em; }
.hero-copy h1 { color: #FFFFFF; font-size: clamp(36px, 5.6vw, 60px); line-height: 1.03; margin-bottom: 22px; }
.lead { font-size: 19px; line-height: 1.6; color: var(--on-dark); margin-bottom: 28px; }
.reassure { list-style: none; margin: 0; padding: 0; }
.reassure li { position: relative; padding-left: 34px; margin-bottom: 13px; color: #F1F8F4; }
/* Green check marks rather than bullets: each line is a reassurance. */
.reassure li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(43, 196, 134, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.6' fill='none' stroke='%23BDF0D6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: inset 0 0 0 1px rgba(189, 240, 214, .45); }
.crumbs { font-size: 14px; color: var(--on-dark); margin-bottom: 14px; }
.crumbs a { color: var(--mint); }

/* One orchestrated moment: the sun rises into place once, on load. */
@media (prefers-reduced-motion: no-preference) {
  .sunpath .sun { animation: sunrise 1.6s cubic-bezier(.2, .7, .2, 1) both .15s; transform-box: view-box; }
  @keyframes sunrise { from { transform: translate(-60px, 150px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---- Form card --------------------------------------------------------------- */

.form-card { position: relative; background: var(--paper); border-radius: var(--radius-card); color: var(--ink);
             padding: 30px 28px 24px;
             box-shadow: 0 0 0 1px rgba(15, 36, 29, .05), 0 34px 70px -30px rgba(0, 0, 0, .6); }
/* A thin emerald edge along the top of the card. */
.form-card::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 4px;
                     border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--green-light), var(--green)); }
.form-card h2 { font-size: 25px; margin-bottom: 4px; }
.form-card .form-sub { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; }

.lead-form .field { margin-bottom: 12px; }
.lead-form label.field-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.lead-form .opt { font-weight: 400; color: var(--ink-2); }
.lead-form input[type=text], .lead-form input[type=email], .lead-form input[type=tel],
.lead-form select, .lead-form textarea {
  width: 100%; font: 16px/1.3 var(--body); color: var(--ink); background: #FBFDFC;
  border: 1.5px solid var(--line); border-radius: var(--radius-field); padding: 10px 12px; min-height: 46px;
}
.lead-form select { appearance: none; padding-right: 34px;
  background: #FBFDFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F241D' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; }
.lead-form input:hover, .lead-form select:hover, .lead-form textarea:hover { border-color: #BFD3C7; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; background-color: #FFFFFF;
  border-color: var(--green); box-shadow: 0 0 0 4px rgba(18, 162, 106, .16); }
.lead-form textarea { min-height: 76px; resize: vertical; }
.lead-form input[type=file] { font: 14px var(--body); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13px; line-height: 1.5;
           color: var(--ink-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--green); }

.btn { display: inline-block; font: 700 17px/1 var(--body); text-decoration: none; text-align: center; cursor: pointer;
       border-radius: 999px; padding: 16px 28px; border: 2px solid transparent; }
.btn-primary { color: #FFFFFF; background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 55%, var(--green-deep) 100%);
               box-shadow: 0 12px 24px -12px rgba(11, 125, 80, .9), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn-primary:hover { color: #FFFFFF; filter: brightness(1.06); transform: translateY(-1px);
                     box-shadow: 0 16px 28px -12px rgba(11, 125, 80, .95), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn-primary:active { transform: none; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) { .btn { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease; } }
.lead-form .btn { width: 100%; }

.form-errors { background: var(--error-bg); color: var(--error-ink); border-radius: var(--radius-field);
               padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Sections ---------------------------------------------------------------- */

.section { padding: 84px 0; }
.section-sky { background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 40em; margin-bottom: 40px; }
.section-head p { color: var(--ink-2); font-size: 18px; margin-top: 12px; }

/* How it works: a real sequence, so it is numbered. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: 24px; }
.steps li::before { content: counter(step); display: block; font: 800 60px/1 var(--head); font-stretch: 112%; letter-spacing: -0.02em;
                    margin-bottom: 14px; color: transparent; -webkit-text-stroke: 1.5px var(--green); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); margin: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split p { color: var(--ink-2); }
.split h2 { margin-bottom: 14px; }
.split .btn { margin-top: 8px; }

.checklist { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 30px;
             box-shadow: 0 28px 60px -36px rgba(7, 35, 28, .45); }
.checklist h3 { font-size: 17px; margin-bottom: 14px; }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.checklist li:first-child { border-top: 0; }
.checklist li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--mist)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9'%3E%3Cpath d='M1 4.5l3 3L10 1.5' fill='none' stroke='%2312A26A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: inset 0 0 0 1px #BFE3CF; }
.checklist b { display: block; }
.checklist span { color: var(--ink-2); font-size: 15px; }

.photo { border-radius: var(--radius-card); width: 100%; height: 100%; max-height: 400px; object-fit: cover;
         box-shadow: 0 28px 60px -36px rgba(7, 35, 28, .5); }
.aside-note { font-size: 15px; color: var(--ink-2); }

/* ---- Guides (state pages and the index) ------------------------------------------ */

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.guide-aside { position: sticky; top: 24px; display: grid; gap: 18px; }
.aside-card { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; }
.aside-card h3 { font-size: 17px; margin-bottom: 8px; }
.aside-card p { font-size: 15px; color: var(--ink-2); }
.aside-card .btn { width: 100%; font-size: 15px; padding: 13px 18px; }
.state-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.state-links a { font-size: 15px; font-weight: 600; }

.state-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
.state-grid a { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; gap: 14px; height: 100%;
                text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
                padding: 22px 22px 24px; box-shadow: 0 20px 40px -34px rgba(7, 35, 28, .5); }
.state-grid a:hover { border-color: var(--green); box-shadow: 0 24px 44px -30px rgba(11, 125, 80, .55); }
.state-code { font: 800 15px/1 var(--head); font-stretch: 112%; color: var(--green-deep);
              background: var(--mist); border: 1px solid #BFE3CF; border-radius: 10px; padding: 12px 10px; }
.state-name { font: 700 19px/1.2 var(--head); font-stretch: 112%; color: var(--ink); }
.state-lead { grid-column: 1 / -1; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---- Long-form pages (guides, policies) ---------------------------------------- */

.prose { max-width: 44em; }
.prose h2 { margin: 44px 0 14px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 8px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 8px; }
.prose b, .prose strong { color: var(--ink); }
.small { font-size: 14px; color: var(--ink-2); }
.page-title { color: #FFFFFF; padding: 60px 0 52px;
              background: radial-gradient(70% 90% at 20% 100%, rgba(43, 196, 134, .22) 0%, rgba(43, 196, 134, 0) 70%),
                          linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.page-title h1 { color: #FFFFFF; }
.page-title p { color: var(--on-dark); margin: 12px 0 0; font-size: 18px; max-width: 40em; }
.faq h3 { margin-top: 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- Footer ------------------------------------------------------------------ */

.site-footer { background: var(--night); color: #B7CCC2; padding: 52px 0 36px; font-size: 15px; }
.site-footer a { color: #FFFFFF; text-decoration-color: var(--green-light); }
.site-footer a:hover { color: var(--mint); }
.site-footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.site-footer .brand-name { color: #FFFFFF; margin-bottom: 10px; }
.site-footer h3 { color: #FFFFFF; font-size: 15px; font-stretch: 100%; margin-bottom: 10px; }
.site-footer p { margin: 0 0 6px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.footer-legal { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; font-size: 13px; color: #8FA89D; }

/* ---- Responsive -------------------------------------------------------------- */

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; padding-bottom: 52px; }
  .hero-copy { max-width: none; padding-top: 0; }
  .form-card { max-width: 560px; }
  .split, .guide-layout { grid-template-columns: 1fr; gap: 32px; }
  .guide-aside { position: static; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .site-header .wrap { flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 8px; min-height: 0; }
  .site-nav { order: 3; width: 100%; gap: 20px; overflow-x: auto; }
  .site-nav a { font-size: 14px; }
  body { font-size: 16px; }
  .lead { font-size: 17px; }
  .section { padding: 56px 0; }
  .form-card { padding: 22px 18px 18px; }
  /* On phones the band would sit behind the form; the sky gradient carries the hero. */
  .sunpath { display: none; }
  .header-call .call-word { display: none; }
  .wrap { padding: 0 16px; }
  .brand-name { font-size: 16px; }
  .brand svg { width: 26px; height: 26px; }
  .header-call { padding: 6px 10px; font-size: 13px; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}