/* ============================================================
   ElitePhase Electric — v3 stylesheet (2026-07-16)
   Warm neutral + red. Light site. Red appears only on clickable
   elements and the logo. Hierarchy from type and space, not
   colored blocks. Hairline borders, no shadows, no gradients.
   Footer is the single dark block.
   ============================================================ */

:root{
  --bg:#FAF8F5;          /* page background */
  --card:#FFFFFF;        /* card surface */
  --band:#F2EEE8;        /* alternating section band, sparingly */
  --line:#E0DBD3;        /* hairline borders and dividers */
  --ink:#1C1B18;         /* primary text */
  --ink-2:#5C5952;       /* secondary text */
  --accent:#C1121F;      /* clickable red + logo */
  --accent-hover:#A00E19;
  --tint:#FBEAEA;        /* badge and pill backgrounds only */
  --tint-text:#7A0C14;   /* text on tint */
  --foot:#1C1B18;        /* footer background */
  --foot-text:#FAF8F5;
  --foot-text-2:#B9B4AC;
  --maxw:1120px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.7;font-size:1.02rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;font-weight:800;letter-spacing:-.012em}
h1{font-size:clamp(2rem,4.4vw,3rem)}
h2{font-size:clamp(1.55rem,3vw,2.15rem)}
h3{font-size:1.16rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section[id],aside[id],div[id]{scroll-margin-top:84px}
section{padding:4.4rem 0}
.sec-label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.55rem}
.sec-intro{max-width:62ch;color:var(--ink-2);margin-top:.7rem}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:800;font-size:.95rem;
  padding:.9rem 1.6rem;border-radius:8px;cursor:pointer;border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-red{background:var(--accent);color:#fff}
.btn-red:hover{background:var(--accent-hover);color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}
.ic{width:18px;height:18px;flex:none}

/* ============ header ============ */
.header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:var(--maxw);margin:0 auto;padding:.7rem 24px}
.brand-logo img{height:48px;width:auto}
.menu{display:flex;align-items:center;gap:1.5rem;list-style:none;font-weight:700;font-size:.95rem}
.menu>li>a{color:var(--ink);padding:.4rem 0;text-decoration:none}
.menu>li>a:hover{color:var(--accent);text-decoration:none}
.nav-phone{font-weight:800;font-size:1.05rem;color:var(--accent);white-space:nowrap;text-decoration:none}
.nav-phone:hover{color:var(--accent-hover);text-decoration:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0}
.menu .has-drop{position:relative}
.menu .caret{font-size:.7em;opacity:.7}
.menu .dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.4rem;list-style:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:.15s;z-index:70}
.menu .has-drop:hover .dropdown,.menu .has-drop:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.menu .dropdown a{display:block;padding:.5rem .75rem;border-radius:6px;font-size:.9rem;color:var(--ink);white-space:nowrap;text-decoration:none;font-weight:600}
.menu .dropdown a:hover{background:var(--band);color:var(--ink)}

/* ============ hero ============ */
.hero{padding:4.6rem 0 4.2rem}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:3.4rem;align-items:start}
.hero h1{margin:.55rem 0 1rem}
.hero .lead{font-size:1.12rem;color:var(--ink-2);max-width:52ch;margin-bottom:1.5rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:.5rem .6rem;flex-wrap:wrap;margin-top:1.6rem}
.chip{background:var(--tint);color:var(--tint-text);font-size:.8rem;font-weight:800;padding:.34rem .75rem;border-radius:999px}

/* hero request form card */
.req-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.4rem 1.2rem}
.req-card h3{margin-bottom:.2rem}
.req-card .rc-sub{font-size:.9rem;color:var(--ink-2);margin-bottom:.9rem}
.jobber-embed{background:var(--card);min-height:130px}
.jobber-embed iframe{width:100%!important;border:0;display:block}
.jobber-embed>div:empty{min-height:300px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:8px}
.jobber-embed>div:empty::before{content:"Request form loads here";color:var(--ink-2);font-size:.9rem}

/* ============ services ============ */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.8rem}
.svc-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.4rem;display:block;text-decoration:none;color:var(--ink)}
.svc-card:hover{border-color:var(--ink);text-decoration:none;color:var(--ink)}
.svc-card h3{margin-bottom:.4rem}
.svc-card p{font-size:.95rem;color:var(--ink-2)}
.svc-card .go{display:inline-block;margin-top:.8rem;color:var(--accent);font-weight:800;font-size:.9rem}
.svc-card:hover .go{color:var(--accent-hover);text-decoration:underline}
.svc-note{margin-top:1.3rem;color:var(--ink-2)}

/* ============ owner ============ */
.owner{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.owner .container{display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:center}
.owner-photo{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.owner-photo img{width:100%;height:auto;display:block}
.photo-slot{aspect-ratio:4/5;display:grid;place-items:center;border:1.5px dashed var(--line);border-radius:12px;color:var(--ink-2);font-size:.92rem;text-align:center;padding:1rem;background:var(--card)}
.owner-truck{margin-top:1.2rem}
.owner h2{margin-bottom:.9rem}
.owner p{margin-bottom:.9rem}
.owner .fine{color:var(--ink-2);font-size:.95rem}

/* ============ how it works ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.3rem}
.step b.num{display:block;font-size:1.7rem;font-weight:800;color:var(--ink);margin-bottom:.35rem}
.step h3{font-size:1.05rem;margin-bottom:.35rem}
.step p{font-size:.93rem;color:var(--ink-2)}

/* ============ gallery ============ */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem}
.work-item{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.work-item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.work-item figcaption{font-size:.85rem;color:var(--ink-2);padding:.6rem .8rem;border-top:1px solid var(--line)}

/* ============ reviews ============ */
.reviews-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem}
.rev-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.3rem;display:flex;flex-direction:column}
.rev-stars{color:#E7A33B;letter-spacing:2px;font-size:1rem;margin-bottom:.6rem}
.rev-card blockquote{font-size:.95rem;color:var(--ink);flex:1;margin:0}
.rev-card cite{display:block;font-style:normal;font-weight:800;font-size:.9rem;color:var(--ink);margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.rev-card cite span{display:block;font-weight:600;color:var(--ink-2);font-size:.8rem}
.rev-note{margin-top:1.2rem;font-size:.95rem;color:var(--ink-2)}
@media(max-width:960px){.rev-grid{grid-template-columns:1fr}}

/* ============ service area ============ */
.areas .cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:1.4rem}
.areas h3{margin-bottom:.5rem}
.city-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.city-list span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.32rem .8rem;font-size:.87rem;font-weight:700;color:var(--ink)}
.areas p{color:var(--ink-2);font-size:.97rem}

/* ============ pricing line ============ */
.priceline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.2rem 0;text-align:center}
.priceline p{max-width:64ch;margin:0 auto;font-size:1.05rem}
.priceline p b{font-weight:800}

/* ============ final cta ============ */
.closing{text-align:center;padding:4.6rem 0}
.closing h2{margin-bottom:.6rem}
.closing p{color:var(--ink-2);margin-bottom:1.5rem}
.closing .hero-cta{justify-content:center}

/* ============ footer ============ */
.footer{background:var(--foot);color:var(--foot-text-2);padding:3.6rem 0 1.6rem;font-size:.95rem}
.footer a{color:var(--foot-text);text-decoration:none}
.footer a:hover{text-decoration:underline;color:var(--foot-text)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
.footer h4{color:var(--foot-text);font-size:.88rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.08em}
.footer ul{list-style:none}
.footer ul li{margin-bottom:.5rem}
.footer .foot-logo img{width:180px;height:auto;margin-bottom:1rem}
.foot-phone{font-size:1.2rem;font-weight:800;color:var(--foot-text)}
.foot-bottom{border-top:1px solid rgba(250,248,245,.16);margin-top:2.4rem;padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem}

/* ============ responsive ============ */
@media(max-width:960px){
  .menu{display:none}
  .burger{display:block}
  .brand-logo img{height:40px}
  section{padding:3.2rem 0}
  .hero{padding:2.8rem 0 3rem}
  .hero .container{grid-template-columns:1fr;gap:2.2rem}
  .svc-grid{grid-template-columns:1fr}
  .owner .container{grid-template-columns:1fr;gap:1.8rem}
  .steps{grid-template-columns:1fr}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .areas .cols{grid-template-columns:1fr;gap:1.6rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:.8rem 24px 1.2rem;gap:0}
  .menu.open>li{width:100%}
  .menu.open>li>a{display:block;padding:.7rem 0;border-bottom:1px solid var(--line);width:100%}
  .menu.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;border:0;background:transparent;padding:.2rem 0 .4rem .9rem;min-width:0}
  .menu.open .dropdown a{padding:.45rem 0;border-bottom:1px solid var(--line);border-radius:0}
}
@media(max-width:600px){
  .work-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .work-item figcaption{font-size:.75rem;padding:.45rem .6rem}
  .foot-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .closing .hero-cta{align-items:center}
  .closing .hero-cta .btn{width:100%;max-width:340px}
  .nav-phone span.np-label{display:none}
}

/* ============ large screens ============ */
@media (min-width:1600px){
  html{font-size:115%}
  :root{--maxw:1340px}
  .brand-logo img{height:54px}
}
@media (min-width:2200px){
  html{font-size:128%}
  :root{--maxw:1480px}
}

/* ============ lead forms (Web3Forms) ============ */
.lead-form{display:flex;flex-direction:column;gap:.65rem}
.lead-form input:not([type=checkbox]),.lead-form select,.lead-form textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.97rem;color:var(--ink);background:var(--card)}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--ink)}
.lead-form ::placeholder{color:var(--ink-2);opacity:.75}
.lead-form textarea{resize:vertical}
.lead-form .lf-btn{width:100%;margin-top:.2rem}
.lf-note{font-size:.85rem;color:var(--ink-2);text-align:center;margin-top:.2rem}
.lf-error{display:none;font-size:.9rem;color:var(--accent);text-align:center}
.form-ok{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:1.4rem;text-align:center}
.form-ok b{display:block;font-size:1.05rem;margin-bottom:.3rem}
.form-ok p{font-size:.93rem;color:var(--ink-2)}

/* ============ hero photo band ============ */
.hero-photo{margin:2.8rem 0 0}
.hero-photo img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}
.hero-photo figcaption{font-size:.85rem;color:var(--ink-2);margin-top:.6rem}
@media(max-width:600px){.hero-photo img{aspect-ratio:16/10}}

/* ============ page photos, natural aspect (vertical friendly) ============ */
.photo-solo{margin:2.6rem auto 0;max-width:820px}
.photo-solo.tall{max-width:520px}
.photo-solo img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.photo-solo figcaption{font-size:.85rem;color:var(--ink-2);margin-top:.6rem;text-align:center}
.work-grid.tall .work-item img{aspect-ratio:4/5}

/* ============ hero banner ============ */
.hero-banner{grid-column:1/-1;margin:2.8rem 0 0}
.hero-banner img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}

/* ============ mobile photo sizing ============ */
@media(max-width:600px){
  .photo-solo{margin:2rem auto 0}
  .photo-solo.tall{max-width:300px}
  .photo-solo figcaption{font-size:.78rem}
  .owner-photo{max-width:320px;margin:0 auto}
}