@import url("/themes/white.css"); /* THEME: white or black, see THEME.md */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
}

/* ============================================================
   PREVIEW LAYER - editorial redesign over the PR 14 base.
   Loaded LAST after styles.css + enhance.css + interact.css, so
   it cascades on top of everything. Colors come from the theme
   file imported above; see THEME.md to switch palettes.

   Design DNA (both themes):
   - Cormorant Garamond display, Inter body
   - Hairline-separated structure, 5fr/7fr editorial grids
   - Buttons that fill with gold on hover
   - Hero image Ken Burns, scroll-reveal clip-path wipes
   - Respects prefers-reduced-motion
   - Reveals gated behind html.js so no-JS visitors see content
   ============================================================ */

/* Remap PR 14's design tokens onto preview tokens so every
   element the base CSS styles inherits the new palette. */
:root {
  --bg:         var(--p-bg);
  --text:       var(--p-fg);
  --muted:      var(--p-mut);
  --gold:       var(--p-gold);
  --gold-hi:    var(--p-gold);
  --gold-deep:  var(--p-gold);
  --line:       var(--p-line);
  --hairline:   var(--p-line);
  --surface:    var(--p-alt);
  --surface-2:  var(--p-alt);
  --black:      var(--p-bg);
}

/* ---- BASE ------------------------------------------------- */
html, body {
  background: var(--p-bg) !important;
  color: var(--p-fg) !important;
}
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, blockquote, .serif,
.nav-wordmark, .logo {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--p-fg);
}

h1, .hero h1, main h1, .page-hero h1 { font-size: clamp(44px, 7.4vw, 84px); line-height: 0.98; margin: 0 0 0.4em; font-weight: 500; }
h2, main h2, section h2 { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.04; margin: 0 0 0.4em; font-weight: 500; }
h3, section h3, .icons-grid h3, .steps h3, .pillars h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin: 0 0 0.4em; font-weight: 500; }
h4 { font-size: 18px; font-weight: 500; line-height: 1.3; }
.hero h1 { line-height: 0.98; margin: 1.1rem 0 1.2rem; }

h1 em, h2 em, h3 em { color: var(--p-gold); font-style: normal; }
p, li { color: var(--p-fg); }
.muted, .text-muted, p.sub, .fine, figcaption, .lead,
section p:not(:first-child), .steps span, .pillars p {
  color: var(--p-mut);
}
.lead, p.sub { font-size: 18px; max-width: 48ch; }
figcaption { font-size: 12px; margin-top: 10px; }
a { color: inherit; }
hr { border: 0; border-top: 1px solid var(--p-line); margin: 2rem 0; }
img { max-width: 100%; height: auto; display: block; }

/* ---- EYEBROW: gold rule + uppercase label ----------------- */
.eyebrow,
section > .container > .eyebrow,
.reveal > .eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-gold);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--p-gold);
  vertical-align: middle;
  margin: -2px 12px 0 0;
  transform-origin: left;
}

/* ---- NAV --------------------------------------------------- */
.nav {
  background: var(--p-nav) !important;
  border-bottom: 1px solid var(--p-line) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.nav.scrolled { background: var(--p-nav) !important; border-bottom-color: var(--p-line) !important; }
.nav-wordmark { font-size: 22px; color: var(--p-fg); letter-spacing: 0.02em; }
.nav-brand img { border-radius: 50%; box-shadow: 0 0 0 1px var(--p-line); }
.nav-links a {
  color: var(--p-mut) !important;
  font-size: 14px;
  border-bottom-color: transparent !important;
  transition: color 0.3s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active { color: var(--p-gold) !important; }
.nav-toggle span { background: var(--p-fg) !important; }

.nav-menu {
  background: var(--p-bg) !important;
  color: var(--p-fg);
}
.nav-menu nav a { color: var(--p-fg) !important; border-color: var(--p-line) !important; }

/* ---- STICKY MOBILE BAR ----------------------------------- */
.sticky-bar {
  background: var(--p-bg) !important;
  border-top: 1px solid var(--p-line) !important;
}
.sticky-bar a { color: var(--p-fg) !important; }
.sticky-bar .call { background: var(--p-gold) !important; color: var(--p-gold-ink) !important; }
.sticky-bar .quote { color: var(--p-fg) !important; border-color: var(--p-gold) !important; }

/* ---- BUTTONS: wipe-fill on hover -------------------------- */
.btn, button[type="submit"], .cta-button {
  position: relative;
  display: inline-block;
  padding: 15px 26px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--p-gold);
  background: transparent;
  color: var(--p-fg);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  border-radius: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              color 0.45s ease,
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}
.btn::before, button[type="submit"]::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--p-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.btn:hover::before, button[type="submit"]:hover::before { transform: scaleX(1); }
.btn:hover, button[type="submit"]:hover {
  color: var(--p-gold-ink);
  transform: translateY(-2px);
  box-shadow: var(--p-shadow);
}
.btn:active, button[type="submit"]:active { transform: translateY(0); }

.btn-solid { background: var(--p-gold); color: var(--p-gold-ink); border-color: var(--p-gold); }
.btn-solid::before { background: var(--p-fg); }
.btn-solid:hover { color: var(--p-bg); }
.btn-outline { background: transparent; color: var(--p-fg); border-color: var(--p-gold); }
.btn-outline:hover { background: transparent; color: var(--p-gold-ink); }

/* ---- LAYOUT: section rhythm ------------------------------ */
.container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
.section { padding: 7rem 0; }
section + section { border-top: 1px solid var(--p-line); }
.section-link a { color: var(--p-gold); }
.section-link a::after { content: " →"; color: var(--p-gold); }

/* ---- HERO -------------------------------------------------- */
.hero { padding: 5.5rem 0 6rem; border-bottom: 1px solid var(--p-line); }
.hero-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.hero h1 { margin-top: 1.1rem; }
.hero h1 em { color: var(--p-gold); font-style: normal; }
.hero p.sub, .hero .lead { font-size: 19px; color: var(--p-mut); max-width: 48ch; margin-top: 0.8rem; }
.hero .photo-frame, .hero-photo { position: relative; overflow: hidden; margin-top: 2rem; }
/* height: auto so the ratio sets the height from the column width; the base
   fixed height would otherwise set a narrow width from the ratio. */
.hero-photo { aspect-ratio: 7 / 8; height: auto; width: 100%; max-height: 640px; }
.hero-photo img, .hero-photo picture { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- QUOTE FORM (home) ------------------------------------ */
.quote-form {
  background: var(--p-alt);
  border: 1px solid var(--p-line);
  padding: 30px 28px 26px;
  color: var(--p-fg);
}
.quote-form h2 { font-size: 28px; margin-bottom: 16px; }
.quote-form label { color: var(--p-mut); font-size: 13px; display: block; margin: 10px 0 6px; font-family: 'Inter', sans-serif; }
.quote-form input[type="text"], .quote-form input[type="tel"], .quote-form input[type="email"],
.quote-form input[type="number"], .quote-form select, .quote-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--p-input-bg);
  color: var(--p-fg);
  border: 1px solid var(--p-input-br);
  border-radius: 0;
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none;
  border-color: var(--p-gold);
  box-shadow: 0 0 0 3px var(--p-ring);
}
.quote-form input::placeholder, .quote-form textarea::placeholder { color: var(--p-mut); }
.quote-form fieldset { border: 0; padding: 0; margin: 14px 0 4px; }
.quote-form legend { color: var(--p-mut); font-size: 13px; font-family: 'Inter', sans-serif; margin-bottom: 6px; }
.quote-form .yn label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 20px 6px 0;
  color: var(--p-fg);
  font-size: 15px;
}
.quote-form .consent label { color: var(--p-mut); font-size: 12px; line-height: 1.6; }
.quote-form .consent a { color: var(--p-gold); text-decoration: underline; }
.quote-form .fine { color: var(--p-mut); font-size: 12px; margin-top: 10px; }
.quote-form button[type="submit"] { width: 100%; margin-top: 14px; background: var(--p-gold); color: var(--p-gold-ink); border-color: var(--p-gold); }
.quote-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- ICONS → pillars (4-col hairline) --------------------- */
.icons, .icons-grid {
  background: transparent !important;
  padding: 0 !important;
}
.icons .container { padding-top: 0; padding-bottom: 0; }
.icons-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
  padding: 0 !important;
}
.icons-grid .ic {
  padding: 36px 28px 40px 0;
  border-right: 1px solid var(--p-line);
  background: transparent;
}
.icons-grid .ic:last-child { border-right: 0; }
.icons-grid .ic:not(:first-child) { padding-left: 28px; }
.icons-grid .ic .ico { font-size: 22px; margin-bottom: 10px; opacity: 0.85; }
.icons-grid .ic h3 { font-size: 26px; margin-bottom: 8px; }
.icons-grid .ic p { color: var(--p-mut); font-size: 15px; }

/* ---- STEPS (numbered 01/02/03) ---------------------------- */
.steps, ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 1rem 0 0; }
.steps li, ol.steps li {
  counter-increment: s;
  padding: 22px 0;
  border-top: 1px solid var(--p-line);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  align-items: start;
}
.steps li::before, ol.steps li::before {
  content: "0" counter(s);
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--p-gold);
  line-height: 1.1;
}
.steps b, ol.steps b { display: block; color: var(--p-fg); font-weight: 500; margin-bottom: 4px; }
.steps span, ol.steps span { color: var(--p-mut); font-size: 15px; }

/* ---- PR 14 timeline items get the same mark + rail treatment */
.timeline-item { border-top: 1px solid var(--p-line); padding: 1.5rem 0 1.5rem 3rem; position: relative; }
.timeline-item::before {
  content: "";
  position: absolute; left: 0; top: 1.7rem;
  width: 28px; height: 1px; background: var(--p-gold);
}
.timeline-item h3 { color: var(--p-fg); }
.timeline-item p { color: var(--p-mut); }

/* ---- SPLITS / 2-COL / BANDS ------------------------------- */
.split { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; padding: 7rem 0; align-items: center; }
.split img { width: 100%; max-height: 520px; object-fit: cover; }
.band {
  background: var(--p-alt) !important;
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
  padding: 6.5rem 0;
}
.two, .options-grid, .homeowners-grid, .outage-grid, .explainer-points {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  margin-top: 24px;
}
.outage-grid h3, .two h3 { font-size: 32px; margin-bottom: 12px; color: var(--p-fg); }
.outage-grid p, .two li, .explainer-point p { color: var(--p-mut); }
.band.outage-band {
  background-color: #1a1917 !important;
  background-image: url('/assets/monsoon-backup.jpg') !important;
  background-size: cover !important;
  background-position: center 68% !important;
}
.outage-band::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%); }
.outage-band h2, .outage-band h3 { color: var(--p-on-dark) !important; }
.outage-band p, .outage-band li { color: var(--p-on-dark-mut) !important; }
.outage-band .lead { color: var(--p-on-dark) !important; }
.two ul { list-style: disc; padding-left: 1.1rem; }
.two li { margin: 0 0 10px; }

/* explainer-points (solar page) reflow */
.explainer-point { padding: 22px 0; border-top: 1px solid var(--p-line); }
.explainer-point h3 { color: var(--p-fg); font-size: 24px; }

/* ---- GALLERY (projects, variety) -------------------------- */
.variety-grid, .projects-grid, .project-grid, .gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.variety-item, .project-card {
  margin: 0;
  background: var(--p-alt);
  border: 1px solid var(--p-line);
  overflow: hidden;
}
.variety-item img, .project-card img, .img-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.variety-item figcaption, .project-card figcaption {
  padding: 14px 16px;
  color: var(--p-mut);
  font-size: 13px;
  border-top: 1px solid var(--p-line);
}

/* ---- CITIES: SERVICE AREA --------------------------------- */
.area {
  padding: 6rem 0 3rem;
  background: transparent !important;
}
.area .container > h2 { max-width: 24ch; }
.area .container > p.sub { max-width: 50ch; margin-bottom: 2.5rem; }
.valley-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 1rem;
}
.valley-group h3 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--p-gold);
  margin-bottom: 1rem;
}
.valley-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0; }
.valley-group li { display: inline; margin: 0; }
.valley-group li + li::before { content: " / "; color: var(--p-line); margin: 0 0.4em; }
.valley-group li a, .valley-group li .chip {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--p-fg);
  display: inline;
  transition: color 0.3s ease;
}
.valley-group li a { color: var(--p-gold); text-decoration: none; }
.valley-group li a:hover { color: var(--p-fg); }
.valley-group li .chip { color: var(--p-mut); }

.cities, .area-list {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 500;
  line-height: 1.3;
}
.cities span, .area-list span { color: var(--p-gold); margin: 0 0.3em; }

/* Marquee strip */
.marq {
  overflow: hidden;
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
  margin: 1.5rem 0 3.5rem;
  padding: 16px 0;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--p-mut);
}
.marq > div { display: inline-block; animation: p-mq 60s linear infinite; }
.marq i { color: var(--p-gold); font-style: normal; margin: 0 22px; }
@keyframes p-mq { to { transform: translateX(-50%); } }

/* ---- QUOTE / stories -------------------------------------- */
.quote, .stories blockquote {
  border-top: 1px solid var(--p-line);
  padding: 6rem 0;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
}
blockquote, .quote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
  font-style: italic;
  color: var(--p-fg);
}
.who, .story-attrib { color: var(--p-mut); font-size: 14px; margin-top: 20px; font-family: 'Inter', sans-serif; font-style: normal; }
.story-slot {
  background: var(--p-alt);
  border: 1px solid var(--p-line);
  padding: 1.75rem;
}
.story-slot blockquote { font-size: 20px; font-style: italic; line-height: 1.4; display: block; padding: 0; border-top: 0; }
.story-slot .stars { color: var(--p-gold); font-size: 15px; letter-spacing: 2px; }
.story-slot figcaption { color: var(--p-mut); margin-top: 1rem; }

/* ---- FAQ --------------------------------------------------- */
.faq-list, .faq {
  border-top: 1px solid var(--p-line);
}
.faq-list details, .faq details {
  border-bottom: 1px solid var(--p-line);
  padding: 20px 0;
}
.faq-list summary, .faq summary {
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--p-fg);
  list-style: none;
  position: relative;
  padding-right: 2rem;
  transition: color 0.25s ease;
}
.faq-list summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.faq-list summary::after, .faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  color: var(--p-gold);
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  transition: transform 0.3s ease;
}
.faq-list details[open] summary::after, .faq details[open] summary::after { content: "–"; }
.faq-list summary:hover, .faq summary:hover { color: var(--p-gold); }
.faq-list details p, .faq details p { color: var(--p-mut); margin-top: 10px; }

/* ---- Final CTA band --------------------------------------- */
.final, .final-cta, .cta-band {
  border-top: 1px solid var(--p-line);
  padding: 7rem 0;
  text-align: left;
}
.final h2, .final-cta h2 { font-size: clamp(44px, 6vw, 72px); max-width: 820px; }
.final .big, .big-phone {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 44px);
  color: var(--p-gold);
  margin: 1rem 0;
}

/* ---- FOOTER ----------------------------------------------- */
.footer, footer {
  background: var(--p-bg) !important;
  color: var(--p-mut) !important;
  border-top: 1px solid var(--p-line) !important;
  font-size: 13px;
  padding: 2rem 0 3rem;
}
.footer a, footer a { color: var(--p-mut) !important; }
.footer a:hover, footer a:hover { color: var(--p-gold) !important; }
.footer-brand p, .footer-legal p, .footer-bottom p { color: var(--p-mut); }
.footer-wordmark, .footer-brand strong { color: var(--p-fg); }
.footer-legal-links a { color: var(--p-mut); }

/* City-page tabs, cards, and misc PR 14 components ---------- */
.tab-list, .tabs { border-bottom: 1px solid var(--p-line); }
.tab-list button, .tabs button {
  background: transparent;
  color: var(--p-mut);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: none;
}
.tab-list button[aria-selected="true"], .tabs button[aria-selected="true"] {
  color: var(--p-fg);
  border-bottom-color: var(--p-gold);
}
.compare, .compare-wrap, .compare-slider { background: var(--p-alt); border: 1px solid var(--p-line); }

/* ---- Icons / symbols in the icons-grid stay subtle -------- */
.icons-grid .ic .ico { color: var(--p-gold); filter: grayscale(10%); }

/* ---- MOTION ----------------------------------------------- */
@keyframes p-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes p-kb { from { transform: scale(1); } to { transform: scale(1.06); } }

/* H1 line stagger: preview.js wraps the first-last h1 line in a span */
html.js .hero h1 .ln { display: block; opacity: 0; transform: translateY(18px); animation: p-up 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
html.js .hero h1 .ln:nth-child(2) { animation-delay: 0.18s; }
html.js .hero h1 .ln:nth-child(3) { animation-delay: 0.32s; }
html.js .hero p.sub, html.js .hero .lead, html.js .hero .cta, html.js .hero .btn-row, html.js .hero .quote-form {
  opacity: 0; animation: p-up 1.1s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

/* Hero image Ken Burns */
.hero-photo img, .hero figure img, .photo-frame.hero-photo img {
  animation: p-kb 14s ease-out both;
}

/* Scroll reveals: PR 14 already uses .reveal + .in / .is-visible.
   Layer on image clip-path wipes + eyebrow underline draw. */
/* An inline <picture> clips to its one-line box, hiding the photo inside. */
.reveal picture { display: block; }
html.js .reveal img, html.js .reveal picture {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
html.js .reveal.in img, html.js .reveal.is-visible img,
html.js .reveal.in picture, html.js .reveal.is-visible picture {
  clip-path: inset(0 0 0 0);
  animation: reveal-unclip 0s linear 1.6s forwards;
}
@keyframes reveal-unclip { to { clip-path: none; } }
/* A clipped lazy image never intersects, so the browser never fetches it. */
html.js .reveal img[loading="lazy"],
html.js .reveal picture:has(img[loading="lazy"]) {
  clip-path: none;
  transition: none;
}
/* The compare slider clips .compare-top itself; the wipe and its
   clip-path: none end state would override that inline clip. */
html.js .reveal .compare-frame img,
html.js .reveal.in .compare-frame img,
html.js .reveal.is-visible .compare-frame img {
  clip-path: none;
  transition: none;
  animation: none;
}
html.js .reveal .eyebrow::before { transform: scaleX(0); transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
html.js .reveal.in .eyebrow::before, html.js .reveal.is-visible .eyebrow::before { transform: scaleX(1); }

/* City words fade in sequentially */
html.js .cities .c, html.js .area-list .c {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js .reveal.in .cities .c, html.js .reveal.is-visible .cities .c,
html.js .reveal.in .area-list .c, html.js .reveal.is-visible .area-list .c {
  opacity: 1; transform: none;
}

/* Reduced motion kills everything added here */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .hero h1 .ln, html.js .hero p.sub, html.js .hero .lead,
  html.js .hero .cta, html.js .hero .btn-row, html.js .hero .quote-form,
  html.js .reveal img:not(.compare-top), html.js .reveal picture,
  html.js .cities .c, html.js .area-list .c {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  html.js .reveal .eyebrow::before { transform: none !important; }
  .marq > div { animation: none !important; }
}

/* ---- RESPONSIVE ------------------------------------------- */
@media (max-width: 900px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .section { padding: 4.5rem 0; }
  .hero { padding: 3.5rem 0 4rem; }
  .hero-grid, .split, .two, .area, .quote,
  .options-grid, .homeowners-grid, .outage-grid, .explainer-points,
  .variety-grid, .projects-grid, .project-grid, .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .icons-grid { grid-template-columns: 1fr 1fr !important; }
  .icons-grid .ic { border-right: 0; padding: 24px 16px !important; border-bottom: 1px solid var(--p-line); }
  .icons-grid .ic:nth-child(odd) { border-right: 1px solid var(--p-line); }
  .icons-grid .ic:nth-last-child(-n+2) { border-bottom: 0; }
  .quote-form .row2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  /* PR 14's rule hides the inline nav Call button on phones because the
     sticky bar below already carries it. My .btn display rule above wins
     by document order, so re-assert the hide here. */
  .nav-call { display: none !important; }
  /* Make the brand wordmark survive a narrow bar */
  .nav-wordmark { font-size: 18px; }
  body { padding-bottom: 88px; } /* clear sticky bar */
  .hero { padding: 2.5rem 0 3rem; }
  .hero h1, .page-hero h1 { font-size: 40px; line-height: 1; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .section { padding: 3rem 0; }
  .flow { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  h1, .hero h1, .page-hero h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .btn { padding: 14px 18px; font-size: 14px; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   PR 14 SPECIFIC COMPONENTS
   PR 14 ships bespoke component classes (.flow, .shot, .quiz,
   .compare, .carousel, lightbox) that render as white cards or
   use light hover states. The preview palette has to catch
   every one of them.
   ============================================================ */

/* .flow (numbered horizontal steps on the home page) */
.flow {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.flow-item {
  background: var(--p-alt) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 0 !important;
  padding: 24px 20px 22px !important;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease !important;
}
.flow-item:hover {
  border-color: var(--p-gold) !important;
  transform: translateY(-3px);
  box-shadow: var(--p-shadow) !important;
}
.flow-num {
  width: 44px !important; height: 44px !important;
  background: transparent !important;
  color: var(--p-gold) !important;
  border: 1px solid var(--p-gold) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 20px !important; font-weight: 500 !important;
  letter-spacing: 0;
}
.flow-item h3 { color: var(--p-fg) !important; font-size: 20px !important; margin: 0.5rem 0 0.4rem !important; font-family: 'Cormorant Garamond', serif; font-weight: 500; }
.flow-item p { color: var(--p-mut) !important; font-size: 14px !important; line-height: 1.55 !important; }
.flow-item:not(:last-child)::after {
  background: var(--p-gold) !important;
  opacity: 0.4;
}

/* .valley-map proportional grid override on wide */
@media (min-width: 901px) {
  .valley-map { grid-template-columns: repeat(3, 1fr) !important; gap: 56px !important; }
}

/* story cards (homepage + reviews) */
.story-slot {
  background: var(--p-alt) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 0 !important;
  padding: 1.6rem 1.75rem !important;
}
.story-slot:hover { border-color: var(--p-gold) !important; box-shadow: var(--p-shadow) !important; }
.stories-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.stories-grid-single { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; }
.story-slot .stars { color: var(--p-gold); }
.stories-note { color: var(--p-mut); }

/* carousel */
.carousel-prev, .carousel-next {
  background: transparent !important;
  color: var(--p-fg) !important;
  border: 1px solid var(--p-gold) !important;
}
.carousel-prev:hover, .carousel-next:hover {
  background: var(--p-gold) !important;
  color: var(--p-gold-ink) !important;
}
.carousel-status { color: var(--p-mut) !important; }

/* shot (gallery tiles) */
.shot {
  background: var(--p-alt) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 0 !important;
  color: var(--p-fg) !important;
}
.shot:hover, .shot:focus-visible { border-color: var(--p-gold) !important; box-shadow: var(--p-shadow) !important; }
.shot-label { color: var(--p-fg) !important; font-family: 'Cormorant Garamond', serif; font-weight: 500 !important; }

/* lightbox */
.lightbox { background: rgba(5,5,4,0.92) !important; }
.lightbox-close { color: var(--p-fg) !important; }

/* compare slider */
.compare { background: var(--p-alt); border: 1px solid var(--p-line); border-radius: 0 !important; overflow: hidden; }
.compare-label {
  background: var(--p-bg) !important;
  color: var(--p-fg) !important;
  border: 1px solid var(--p-line);
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px;
}
.compare-frame { border: 0; border-radius: 0; }
/* home-golden-hour.jpg has thin black bars down both side edges. */
.compare.is-ready .compare-frame .compare-base { left: -1%; width: 102%; }
.compare-handle { background: var(--p-gold) !important; }
.compare-note { color: var(--p-mut) !important; margin: 0; padding: 12px 16px 14px; }

/* quiz */
.quiz {
  background: var(--p-alt) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 0 !important;
  color: var(--p-fg) !important;
}
.quiz-q { color: var(--p-fg) !important; font-family: 'Cormorant Garamond', serif; font-weight: 500 !important; font-size: 22px !important; }
.quiz-choices button, .quiz-back, .quiz-restart {
  background: transparent !important;
  color: var(--p-fg) !important;
  border: 1px solid var(--p-gold) !important;
  border-radius: 0 !important;
}
.quiz-choices button:hover, .quiz-back:hover, .quiz-restart:hover {
  background: var(--p-gold) !important;
  color: var(--p-gold-ink) !important;
}
.quiz-progress, .quiz-result-text { color: var(--p-mut) !important; }

/* bento / who-card remnants */
.bento-cell, .who-card { background: var(--p-alt) !important; border-color: var(--p-line) !important; color: var(--p-fg) !important; border-radius: 0 !important; }
.bento-cell:hover, .who-card:hover { border-color: var(--p-gold) !important; box-shadow: var(--p-shadow) !important; }

/* footer specific */
.footer-areas a {
  color: var(--p-mut) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.footer-areas a:hover, .footer-areas a:focus-visible { color: var(--p-gold) !important; text-decoration: none; }
.footer-areas a[aria-current="page"] { color: var(--p-fg) !important; font-weight: 500; }
.footer-areas .chip { color: var(--p-mut) !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
.footer-copy { color: var(--p-mut) !important; }

/* valley-group chips (city-page body) */
.valley-group {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.valley-group ul {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
.valley-group li {
  display: inline !important;
  background: transparent !important;
}
.valley-group .chip {
  color: var(--p-mut) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* city page headings/banners inherit cleanly */
.page-hero { padding: 5rem 0 4rem; border-bottom: 1px solid var(--p-line); }
.page-hero h1 { font-size: clamp(44px, 7vw, 76px); }
.page-hero p.lead { font-size: 20px; max-width: 60ch; color: var(--p-mut); }

/* contact page map/card */
.contact-card, .contact-grid > div { background: var(--p-alt); border: 1px solid var(--p-line); padding: 1.75rem; }

/* ---- Preview-only atmosphere strip (injected by preview.js) ---- */
.preview-wide {
  position: relative;
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
  padding: 0;
  overflow: hidden;
}
.preview-wide-img {
  width: 100%;
  height: clamp(260px, 42vw, 540px);
  background-size: cover;
  background-position: center 55%;
  transition: transform 10s ease-out;
}
.preview-wide-cap {
  margin: 0;
  padding: 10px 32px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--p-mut);
  background: var(--p-bg);
}
html.js .preview-wide.in .preview-wide-img,
html.js .preview-wide.is-visible .preview-wide-img { transform: scale(1.04); }

/* ---- Save a copy of PR 14's calculator state: STILL off -- */
.savings-calc { display: none !important; }

/* ---- Late responsive overrides --------------------------------
   These follow the component rules above on purpose: an earlier
   media query loses to a later base rule of the same specificity. */
@media (max-width: 900px) {
  .flow, .stories-grid { grid-template-columns: 1fr 1fr; }
}
.why-row, .explainer-point { margin-inline: 0; padding-inline: 0; }
@media (max-width: 560px) {
  .flow, .stories-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-item { transition: none !important; }
  .flow-item:hover { transform: none; }
}

/* Financing comparison: one card per row on phones. */
@media (max-width: 640px) {
  .compare-table, .compare-table tbody, .compare-table tr,
  .compare-table th, .compare-table td { display: block; width: 100%; min-width: 0; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-table tbody tr { border: 1px solid var(--p-line); background: var(--p-bg); padding: 4px 16px 8px; margin-bottom: 12px; }
  .compare-table tbody th { border: 0; padding: 12px 0 6px; font-size: 17px; color: var(--p-fg); }
  .compare-table tbody td {
    display: flex; justify-content: space-between; gap: 16px;
    border: 0; border-top: 1px solid var(--p-line); padding: 8px 0; text-align: right;
  }
  .compare-table tbody td::before { content: attr(data-label); color: var(--p-fg); font-weight: 600; text-align: left; }
}

/* Keep each community name on one line in service-area lists. */
.footer-areas a, .footer-areas .chip, .valley-map li, .valley-map a, .valley-map .chip,
.cities .c, .area-list .c { white-space: nowrap; }
@media (max-width: 800px) { .valley-map { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .valley-map { grid-template-columns: 1fr; gap: 28px; } }