/* Sunpoint Electric (fictional, residential electrician, West Valley). Its own brand on the shared demo system:
   deep evergreen with a bright "spark" lime, Archivo at normal width (the roofing demo is condensed), 8px corners.
   Sections: footage hero, intro with a panel photo, icon service cards, the panel-upgrade sequence, an outdoor
   lighting band, FAQ, request form. Base layout (nav, form, footer, FAQ): demo-pro.css. */
@font-face { font-family: "Archivo"; src: url("/demos/fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; }
:root {
    --ink: #10221b; --accent: #1d6b42; --accent-dark: #155535; --dark: #0f2a21; --dark-2: #163a2d; --green: #0f2a21;
    --spark: #c8f560; --bg: #ffffff; --alt: #f2f5ef; --line: #dbe2d6; --muted: #4f5e56; --accent-soft: #e3f0e4;
    --eyebrow-light: #c8f560; --footer-bg: #0b1f18; --request-bg: #0f2a21; --form-head: #1d6b42; --submit-bg: #0f2a21;
    --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --head-weight: 800; --head-track: -.02em; --r: 8px; --r-lg: 8px; --btn-r: 6px;
    --f-accent: #1d6b42; --f-accent-dark: #155535; --f-ink: #0f2a21; --f-line: #d3dccf; --f-soft: rgba(29,107,66,.15); --f-radius: 6px; --f-btn-radius: 6px;
}
h1, h2, h3, .pro-faq-list summary, .pro-logo-text strong, .pro-footer-logo { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.pro-logo-text strong { font-size: 1.35rem; color: var(--green); }
.pro-logo-text em { color: var(--accent); letter-spacing: .18em; }
.pro-nav { --gutter: 2rem; padding-left: max(var(--gutter), calc(50% - 600px + var(--gutter))); padding-right: max(var(--gutter), calc(50% - 600px + var(--gutter))); }
.pro-mark { margin-left: -1px; }
.demo-nav-actions a { font-weight: 700; }
.demo-nav-actions .quote-link { background: var(--accent); border-radius: var(--btn-r); }
.demo-nav-actions .quote-link:hover { background: var(--accent-dark); }
.demo-btn { font-family: var(--display); font-weight: 800; border-radius: var(--btn-r); }
.se-kicker { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--eyebrow-light); margin-bottom: clamp(.4rem, 1.4vh, .9rem); }
.se-kicker.dark { color: var(--accent); }

/* Hero: footage of the panel, headline on the left over a green-black fade */
.se-hero { position: relative; min-height: var(--hero-h); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--green); }
.se-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.se-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,24,18,.92) 0%, rgba(8,24,18,.7) 42%, rgba(8,24,18,.15) 100%), linear-gradient(0deg, rgba(8,24,18,.65) 0%, transparent 50%); }
.se-hero-inner { position: relative; z-index: 1; width: 100%; padding-top: var(--hero-pad); padding-bottom: var(--hero-pad); }
.se-hero h1 { font-size: clamp(2.4rem, min(4.6vw, 7.4vh), 4.4rem); line-height: 1; max-width: 13.5em; margin-bottom: clamp(.8rem, 2.4vh, 1.5rem); }
.se-hero h1 span { display: block; color: var(--spark); }
.se-lede { font-size: clamp(1rem, 2.1vh, 1.15rem); line-height: 1.55; color: rgba(255,255,255,.88); max-width: 560px; margin-bottom: clamp(1rem, 3vh, 2rem); }
.se-hero .pro-badge { color: rgba(255,255,255,.85); }

/* Intro */
.se-intro { padding: 6rem 0; background: var(--alt); }
.se-intro-grid { display: grid; gap: 3rem; align-items: center; }
.se-intro h2 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: 1; color: var(--green); margin-bottom: 1.3rem; }
.se-intro h2 span { display: block; color: var(--accent); }
.se-intro p:not(.se-kicker) { color: var(--muted); font-size: 1.1rem; line-height: 1.65; max-width: 520px; margin-bottom: 1.5rem; }
.se-intro-photo { margin: 0; }
.se-intro-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.se-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-family: var(--display); font-weight: 800; color: var(--accent-dark); text-decoration: none; }
.se-link::after { content: "\2192"; }
.se-link:hover { color: var(--green); }

/* Section heads */
.se-head { display: grid; gap: .9rem; margin-bottom: 2.6rem; max-width: 720px; }
.se-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1; color: var(--green); }
.se-head p:not(.se-kicker) { color: var(--muted); font-size: 1.08rem; }

/* Services: icon cards on shared rows (icon / title / text) */
.se-services { padding: 6rem 0; }
.se-cards { list-style: none; display: grid; gap: 1rem; }
.se-cards li { display: grid; align-content: start; gap: .55rem; padding: 1.6rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.se-cards svg { width: 36px; height: 36px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .35rem; }
.se-cards h3 { font-size: 1.3rem; line-height: 1.15; color: var(--green); }
.se-cards p { color: var(--muted); line-height: 1.6; }

/* Panel upgrade sequence: a real order, so numbered */
.se-steps { padding: 0 0 6rem; }
.se-step-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.se-step-list li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; row-gap: .35rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.se-step-list span { grid-row: span 2; font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: .08em; color: var(--accent); padding-top: .25rem; }
.se-step-list h3 { font-size: 1.25rem; color: var(--green); }
.se-step-list p { color: var(--muted); line-height: 1.6; }

/* Outdoor lighting band */
.se-lighting { padding: 6rem 0; background: var(--green); color: #fff; }
.se-lighting-grid { display: grid; gap: 3rem; align-items: center; }
.se-lighting-photo { margin: 0; }
.se-lighting-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.se-lighting h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1; margin-bottom: 1.1rem; }
.se-lighting p:not(.se-kicker) { color: rgba(255,255,255,.82); font-size: 1.08rem; line-height: 1.65; max-width: 520px; margin-bottom: 1.4rem; }
.se-checks { list-style: none; display: grid; gap: .55rem; margin-bottom: 2rem; }
.se-checks li { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.se-checks li::before { content: ""; flex: 0 0 auto; width: 18px; height: 10px; border-left: 3px solid var(--spark); border-bottom: 3px solid var(--spark); transform: rotate(-45deg) translateY(-3px); }
.se-lighting .demo-btn { background: var(--spark); border-color: var(--spark); color: var(--green); }
.se-lighting .demo-btn:hover { background: #b4e445; border-color: #b4e445; }

/* FAQ and request band in the brand voice */
.pro-faq-list summary { font-size: 1.25rem; line-height: 1.2; }
.pro-request h2 { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; }
.pro-phone { font-family: var(--display); }
.pro-footer-logo span { color: var(--spark); }
.pro-footer-note { border-top: 0; padding-top: 0; }
.pro-footer-note p { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; }
.sticky-mobile a:last-child { background: var(--spark); color: var(--green); }

@media (min-width: 700px) {
    .se-cards { grid-template-columns: repeat(2, 1fr); }
    .se-step-list { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; border-top: 0; }
    .se-step-list li { border-top: 1px solid var(--line); border-bottom: 0; }
}
@media (min-width: 900px) {
    .se-intro-grid, .se-lighting-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
    .se-cards { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
    .se-cards li { grid-row: span 3; grid-template-rows: subgrid; row-gap: .55rem; }
    .se-step-list { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; }
    .se-step-list li { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
    .se-step-list span { grid-row: auto; padding-top: 0; }
}
@media (max-width: 600px) {
    .pro-nav { --gutter: 1.25rem; }
    .se-hero::after { background: linear-gradient(180deg, rgba(8,24,18,.5), rgba(8,24,18,.93) 72%); }
    .se-hero h1 { font-size: clamp(2.3rem, min(11.5vw, 7.4vh), 3.2rem); }
    .se-lede { font-size: 1rem; line-height: 1.5; }
    .se-intro, .se-services, .se-lighting { padding: 4.5rem 0; }
    .se-steps { padding-bottom: 4.5rem; }
}
@media (max-width: 600px) and (max-height: 600px) { .se-lede { display: none; } }