/* ==========================================================================
   Brightline Electrical — demo site by Zatto (simple tier)
   Same identity as the flagship: ink navy, warm-white light, one live accent, Onest (OFL).
   ========================================================================== */

@font-face { font-family: "Onest"; src: url("fonts/onest.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: oklch(0.155 0.022 262);
  --bg-2: oklch(0.185 0.024 262);
  --surface: oklch(0.215 0.026 262);
  --line: oklch(0.36 0.03 262);
  --line-soft: oklch(0.265 0.026 262);
  --text: oklch(0.975 0.008 90);
  --text-2: oklch(0.86 0.012 90);
  --text-3: oklch(0.74 0.022 262);
  --live: oklch(0.9 0.19 128);
  --live-hi: oklch(0.96 0.12 125);
  --live-ink: oklch(0.21 0.05 135);
  --glow: oklch(0.9 0.08 80);
  --draw: oklch(0.62 0.03 262);
  --draw-dim: oklch(0.34 0.03 262);
  --bad: oklch(0.72 0.18 30);
  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 112px;
  --radius-2: 12px; --radius-3: 18px;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); font-weight: 300; line-height: 1.06; letter-spacing: -.032em; text-wrap: balance; }
h3 { font-size: 1.22rem; font-weight: 450; line-height: 1.25; letter-spacing: -.015em; }
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); font-size: .95rem; font-weight: 450; color: var(--text-3); }
.kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--live); }
.live { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: live 2.4s var(--ease) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--live) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .95rem; }
.btn--live { background: var(--live); color: var(--live-ink); }
.btn--live:hover { background: var(--live-hi); }
.btn--line { border-color: var(--line); }
.btn--line:hover { border-color: var(--text-3); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: oklch(0.155 0.022 262 / .94); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(10px); }
.top__in { max-width: var(--max); margin: 0 auto; height: 68px; padding: 0 var(--gutter); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; }
.bm-bg { fill: var(--surface); stroke: var(--line); }
.bm-r { fill: var(--text); }
.bm-on { fill: var(--live); }
.brand__name { font-weight: 560; font-size: 1.04rem; letter-spacing: -.02em; white-space: nowrap; }
.brand__name span { color: var(--text-3); font-weight: 400; }
.nav ul { display: flex; gap: 26px; }
.nav a { text-decoration: none; color: var(--text-2); font-size: .97rem; }
.nav a:hover { color: var(--text); }
.top__r { display: flex; align-items: center; gap: 14px; }
.top__tel { text-decoration: none; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: .95rem; }
.burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; place-content: center; gap: 5px; }
.burger i { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform .2s var(--ease); }
.burger[aria-expanded="true"] i:first-of-type { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-of-type { transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 959px) {
  .burger { display: grid; }
  .top__tel { display: none; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; padding: 8px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--line-soft); box-shadow: 0 24px 40px -20px oklch(0 0 0 / .8); display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: 14px 0; font-size: 1.15rem; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 400px) { .top .brand__name span { display: none; } .top__r { gap: 8px; } }

/* ---------- hero ---------- */
.hero { max-width: var(--max); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-7); display: grid; gap: var(--space-7); align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; color: var(--text-2); }
.h1 { margin-top: var(--space-5); }
.h1__big { display: block; font-size: clamp(3.2rem, .8rem + 5vw, 5.8rem); font-weight: 250; line-height: .95; letter-spacing: -.05em; white-space: nowrap; }
.motion .h1__big .l { color: oklch(0.42 0.03 262); transition: color .35s var(--ease) var(--d, 0s), text-shadow .35s var(--ease) var(--d, 0s); }
.is-on .h1__big .l { color: var(--text); text-shadow: 0 0 .35em color-mix(in oklch, var(--glow) 28%, transparent); }
.h1__big .l--dot, .is-on .h1__big .l--dot { color: var(--live); }
.motion .h1__big .l--dot { color: oklch(0.42 0.03 262); }
.motion .is-on .h1__big .l--dot { color: var(--live); }
.h1__sub { display: block; margin-top: var(--space-4); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 380; color: var(--text-2); }
.lede { margin-top: var(--space-5); color: var(--text-2); max-width: 32rem; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-6); }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--space-6); color: var(--text-2); font-size: .95rem; }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ticks li::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--live); border-bottom: 2px solid var(--live); transform: rotate(-45deg) translateY(-2px); }
.hero__art { position: relative; border-radius: var(--radius-3); border: 1px solid var(--line-soft); background: radial-gradient(120% 100% at 50% 0%, var(--bg-2), var(--bg)); padding: var(--space-5) var(--space-3) 0; overflow: hidden; }
.hero__house .house { width: 112%; margin-left: -8%; height: auto; }
.lamp-toggle { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text-2); font-size: .88rem; cursor: pointer; }
.lamp-toggle:hover { color: var(--text); }
.lamp-toggle i { width: 12px; height: 18px; border-radius: 3px; border: 1.5px solid currentColor; position: relative; }
.lamp-toggle i::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 1.5px; height: 6px; border-radius: 1.5px; background: var(--text-3); }
.lamp-toggle[aria-pressed="true"] i::after { top: auto; bottom: 1.5px; background: var(--live); }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-top: var(--space-9); } }

/* house drawing (shared with the flagship) */
.house { --k: 1.25; overflow: visible; }
.st-warm { stop-color: var(--glow); }
.st-live { stop-color: var(--live); }
.hatch { stroke: var(--line-soft); stroke-width: 2; }
.earth { opacity: .6; }
.ln * { fill: none; stroke: var(--draw); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: stroke .6s var(--ease) .2s; }
.ln--soft * { stroke: color-mix(in oklch, var(--draw) 75%, var(--bg)); stroke-width: 1.7; }
.ln .roof { fill: var(--bg-2); }
.ln .slab { fill: var(--line-soft); }
.ln .win { fill: oklch(0.13 0.02 262); }
.fx * { fill: var(--bg-2); stroke: var(--draw); stroke-width: 1.8; stroke-linejoin: round; transition: stroke .6s var(--ease) .2s; }
.fx path:not([class]) { fill: none; }
.pv__p { fill: oklch(0.24 0.05 262); }
.pv__c, .pv__f { fill: none; stroke: color-mix(in oklch, var(--draw) 55%, var(--bg)); stroke-width: 1.2; }
.fx .fx__bar { fill: none; stroke: var(--line); stroke-width: 5; stroke-linecap: round; transition: stroke .4s; }
.fx .fx__scr { transition: fill .4s; }
.fx .lamp { transition: fill .35s, stroke .35s; }
.fx .lamp[stroke-width] { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.fx .led { fill: var(--line); stroke: none; transition: fill .3s; }
.fx .cu, .fx .charger, .fx .sw-mini { fill: oklch(0.88 0.006 90); }
.fx .cu__rail { fill: none; stroke: oklch(0.55 0.01 262); }
.fx .cu__mcb { fill: none; stroke: oklch(0.3 0.02 262); stroke-width: 3; stroke-linecap: round; }
.fx .sw-mini__r { fill: oklch(0.78 0.008 90); stroke: none; }
.glow { opacity: 0; transition: opacity .5s var(--ease); }
.cone { mix-blend-mode: screen; }
.wire__b { fill: none; stroke: var(--line-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wire__l { fill: none; stroke: var(--live); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .85; transition: stroke-dashoffset .9s var(--ease-io); }
.wire__f { display: none; }
.motion .hero:not(.is-on) .ln *, .motion .hero:not(.is-on) .fx * { stroke: var(--draw-dim); }
.is-on .wire__l { stroke-dashoffset: 0; }
.is-on .wire[data-c="light"] .wire__l { transition-delay: .25s; }
.is-on .wire[data-c="ring"] .wire__l { transition-delay: .5s; }
.is-on .wire[data-c="ev"] .wire__l { transition-delay: .8s; }
.is-on .wire[data-c="solar"] .wire__l { transition-delay: 1.05s; }
.is-on .glow { opacity: 1; transition-delay: .7s; }
.is-on .glow[data-room="drive"], .is-on .glow[data-room="loft"] { transition-delay: 1.4s; }
.is-on .lamp { fill: var(--glow); stroke: var(--glow); transition-delay: .7s; }
.is-on .lamp[stroke-width] { stroke: var(--glow); }
.is-on .led { fill: var(--live); transition-delay: 1.1s; }
.is-on .fx__scr { fill: color-mix(in oklch, var(--live) 55%, var(--bg)); transition-delay: 1.5s; }
.is-on .fx__bar { stroke: var(--live); transition-delay: 1.6s; }
.is-on .fx .sw-mini__r { fill: var(--live); }

/* ---------- accreditation strip ---------- */
.trust { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) var(--space-7); }
.markers { display: flex; flex-wrap: wrap; row-gap: 16px; }
.markers li { display: flex; align-items: center; padding: 0 14px; background: linear-gradient(oklch(0.42 0.012 262), oklch(0.42 0.012 262)) center / 100% 3px no-repeat; }
.markers li:first-child { padding-left: 0; }
.markers span { padding: 8px 14px; border-radius: 7px; background: linear-gradient(oklch(0.97 0.01 92), oklch(0.89 0.012 92)); color: oklch(0.22 0.02 262); font-size: .9rem; white-space: nowrap; }
.markers b { font-weight: 700; }

/* ---------- sections ---------- */
.sec { max-width: var(--max); margin: 0 auto; padding: var(--space-9) var(--gutter) 0; }
.sec__head { margin-bottom: var(--space-7); max-width: 40rem; }
.cards { display: grid; gap: 16px; }
.card { padding: var(--space-6); border-radius: var(--radius-3); border: 1px solid var(--line-soft); background: var(--bg-2); transition: border-color .2s; }
.card:hover { border-color: var(--line); }
.card__ic { width: 44px; height: 44px; margin-bottom: var(--space-5); fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card__ic .hot { stroke: var(--live); }
.card p { margin-top: var(--space-3); color: var(--text-2); }
.card .card__from { margin-top: var(--space-4); color: var(--live); font-size: .95rem; font-weight: 500; }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.why { margin-top: var(--space-9); padding: var(--space-9) 0; background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.why__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.stats { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.stats > div { padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.stats dt { color: var(--text-3); font-size: .92rem; }
.stats dd:not(.note) { margin-top: 6px; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 280; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats .note { margin-top: var(--space-3); color: var(--text-2); font-size: .95rem; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.guarantee { display: grid; gap: var(--space-6); margin-top: var(--space-8); align-items: center; }
.guarantee img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 40%; border-radius: var(--radius-2); }
.guarantee h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.15; }
.guarantee p { margin-top: var(--space-4); color: var(--text-2); }
@media (min-width: 900px) { .guarantee { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } }

.steps { display: grid; gap: 16px; counter-reset: s; }
.steps li { position: relative; padding: var(--space-5) 0 var(--space-5) 60px; border-top: 1px solid var(--line-soft); }
.steps__n { position: absolute; left: 0; top: var(--space-5); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--live); color: var(--live); font-weight: 500; font-variant-numeric: tabular-nums; }
.steps p { margin-top: 6px; color: var(--text-2); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.work { display: grid; gap: 28px; }
.work img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-2); background: var(--bg-2); }
.work__meta { margin-top: var(--space-4); color: var(--live); font-size: .92rem; font-weight: 500; }
.work h3 { margin-top: 4px; }
.work li > p:last-child { margin-top: 6px; color: var(--text-2); }
@media (min-width: 800px) { .work { grid-template-columns: repeat(3, 1fr); } }

.quotes { display: grid; gap: 16px; }
.quotes figure { padding: var(--space-6); border-radius: var(--radius-3); border: 1px solid var(--line-soft); background: var(--bg-2); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); }
.quotes blockquote { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.quotes blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: .6; color: var(--live); margin-bottom: 8px; }
.quotes figcaption { color: var(--text-3); }
.quotes b { color: var(--text-2); font-weight: 500; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.sos { margin-top: var(--space-9); background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.sos__in { max-width: var(--max); margin: 0 auto; padding: var(--space-8) var(--gutter); display: grid; gap: var(--space-5); align-items: center; }
.sos__status { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--live) 45%, var(--line)); font-size: .92rem; font-variant-numeric: tabular-nums; }
.sos h2 { margin-top: var(--space-4); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.sos p:not(.sos__status) { margin-top: var(--space-3); color: var(--text-2); max-width: 34rem; }
.sos__tel { font-size: min(4.6rem, 11vw); font-weight: 250; letter-spacing: -.045em; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sos__tel:hover { color: var(--live); }
@media (min-width: 960px) { .sos__in { grid-template-columns: 1fr auto; } }

.area { display: grid; gap: var(--space-8); }
.area__txt p:not(.kicker) { margin-top: var(--space-4); color: var(--text-2); }
.towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5); }
.towns li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-soft); font-size: .9rem; color: var(--text-2); }
.faq h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-bottom: var(--space-5); }
.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--live); font-size: 1.4rem; line-height: 1; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--text-2); }
@media (min-width: 960px) { .area { grid-template-columns: 1fr 1.2fr; } }

.contact { display: grid; gap: var(--space-7); padding-bottom: var(--space-9); }
.contact__txt > p:not(.kicker) { margin-top: var(--space-4); color: var(--text-2); }
.info { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.info dt { color: var(--text-3); font-size: .9rem; }
.info dd { overflow-wrap: anywhere; }
.info a { text-decoration: none; }
.info a:hover { color: var(--live); }
.formbox { padding: var(--space-6); border-radius: var(--radius-3); border: 1px solid var(--line-soft); background: var(--bg-2); }
.cform { display: grid; gap: var(--space-4); }
.field { display: grid; gap: 6px; }
.field label { color: var(--text-2); font-size: .95rem; }
.field small { color: var(--text-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius-2); border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.field select { appearance: none; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c6f05a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--live); box-shadow: 0 0 0 3px color-mix(in oklch, var(--live) 25%, transparent); }
.field__err { display: none; color: var(--bad); font-size: .9rem; }
.field.is-invalid input { border-color: var(--bad); }
.field.is-invalid .field__err { display: block; }
.cform__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cform__go p { color: var(--text-3); font-size: .9rem; }
.cdone:focus { outline: none; }
.cdone__t { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.15; }
.cdone p:not(.cdone__t) { margin-top: var(--space-3); color: var(--text-2); }
.cdone .cdone__demo { color: var(--text-3); font-size: .9rem; }
@media (min-width: 640px) { .cform { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
@media (min-width: 960px) { .contact { grid-template-columns: 1fr 1.3fr; gap: var(--space-8); } }

.foot { border-top: 1px solid var(--line-soft); }
.foot__in { max-width: var(--max); margin: 0 auto; padding: var(--space-6) var(--gutter); display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; color: var(--text-3); font-size: .9rem; }
.zatto { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.zatto:hover { color: var(--text); border-color: var(--live); }

/* subtle reveal */
.motion .reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.motion .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}