/* ============================================================
   EV Charger Installation — page-scoped redesign
   Loaded only by /ev-charger-installation-winston-salem/. Every rule
   is scoped under .page-ev so the other eleven pages cannot move.

   Direction: a conversion path built as a sequence of distinct
   moments. Each section gets its own structure and surface rather
   than one uniform article rhythm, so the eye keeps moving and the
   money section (the Duke Energy credit) lands as the loudest thing
   on the page. Gold is rationed: it marks the section index, the
   credit, and the CTA. Nothing else.
   ============================================================ */

body.page-ev{overflow-x:clip}          /* lets .bleed use 100vw safely */

.page-ev main{max-width:var(--shell);position:relative;counter-reset:evsec}
.page-ev main > section:first-child{margin-top:0}
.page-ev main > section,
.page-ev main > figure{margin-block:clamp(3.5rem,8vw,6.5rem)}

/* break out of the shell to the full viewport, then re-inset the content */
.page-ev .bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.page-ev .shell{display:block;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* one index runs the length of the page, whatever layout the section uses */
.page-ev .ev-numbered h2{padding-left:0;position:relative}
/* The numeric index is retired: every section now carries an icon mark, and a
   number stacked above a mark was two gold objects doing one job. */
.page-ev .ev-numbered h2::before{display:none}

/* ---------- 1. spec strip: hard facts, directly under the hero ---------- */
.page-ev .ev-spec{
  /* margin-block only: the `margin` shorthand would reset .bleed's inline margins */
  margin-block:0 clamp(3rem,7vw,5rem);padding-block:clamp(1.6rem,3.4vw,2.6rem);
  background:linear-gradient(180deg,rgba(27,60,92,.92),rgba(16,40,61,.7));
  border-block:1px solid var(--hair)}
.page-ev .ev-spec-list{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none}
.page-ev .ev-spec-list li{
  display:flex;flex-direction:column;gap:.5rem;position:relative;
  padding-inline:clamp(1rem,2.2vw,2rem)}
.page-ev .ev-spec-list li:first-child{padding-left:0}
.page-ev .ev-spec-list li + li::before{
  content:"";position:absolute;left:0;top:.1rem;bottom:.1rem;width:1px;background:var(--hair)}
.page-ev .ev-spec-list b{
  font-family:Montserrat,sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.page-ev .ev-spec-list span{color:var(--text);font-size:.97rem;line-height:1.5}

/* ---------- 2. opener: breadcrumb + oversized deck ---------- */
.page-ev .ev-open{margin-block:clamp(2.5rem,6vw,4rem)}
.page-ev .crumbs{max-width:none;margin:0 0 clamp(1.5rem,3vw,2.4rem)}
.page-ev .ev-deck{
  position:relative;padding-top:clamp(1.4rem,2.8vw,2rem);margin:0;
  max-width:52ch;font-size:clamp(1.28rem,2.3vw,1.8rem);line-height:1.48;
  letter-spacing:-.005em;color:var(--text);text-wrap:pretty}
.page-ev .ev-deck::before{
  content:"";position:absolute;top:0;left:0;width:4rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* ---------- 3. opening band ----------
   Deliberately uncaptioned: it sets the scene, it does not make a claim. The
   captioned install photo lives in the comparison below, next to the sentence
   that actually describes it. */
.page-ev .ev-feature{margin-block:0 clamp(3.5rem,8vw,6rem);position:relative;overflow:hidden}   /* clips the drift's scale so it cannot widen the document */
.page-ev .ev-feature img{
  display:block;width:100%;height:clamp(13rem,30vw,21rem);object-fit:cover;object-position:center 54%;
  border:0;border-block:1px solid var(--hair);border-radius:0;box-shadow:none}
.page-ev .ev-feature::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,40,61,.55),transparent 34%,rgba(16,40,61,.6))}

/* ---------- 4. section 01: image left, copy right ---------- */
.page-ev .ev-split{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;isolation:isolate}
.page-ev .ev-split-shot{position:relative}
.page-ev .ev-split-shot img{
  position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid rgba(159,212,240,.24);box-shadow:var(--lift)}
/* offset plate, mirrored from the hero stack so the page feels of a piece */
.page-ev .ev-split-shot::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:var(--radius);
  transform:translate(-15px,15px);
  background:linear-gradient(200deg,rgba(159,212,240,.42),rgba(231,162,0,.28))}
.page-ev .ev-split-copy h2{font-size:clamp(1.5rem,2.4vw,2.05rem);margin-bottom:var(--s-3);color:#fff}
.page-ev .ev-split-copy p{font-size:1.05rem;line-height:1.78;color:var(--muted);margin:0}

/* ---------- 5. section 02: the credit. loudest block on the page ---------- */
.page-ev .ev-credit{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(3.5rem,8vw,6rem)}
.page-ev .ev-credit-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;
  z-index:-2;filter:brightness(.62) saturate(.92)}
/* Scrim is a horizontal wipe, not a blanket: near-opaque under the copy on the
   left, thinning to the right so the install photo is actually visible behind
   the note card. Stacked full-coverage layers had buried it entirely. */
.page-ev .ev-credit::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 90% at 14% 45%,rgba(231,162,0,.26),transparent 64%),
    linear-gradient(90deg,rgba(12,31,48,.95) 6%,rgba(12,31,48,.78) 42%,rgba(12,31,48,.28) 100%),
    linear-gradient(180deg,rgba(16,40,61,.55),transparent 22%,transparent 74%,rgba(16,40,61,.62))}
.page-ev .ev-credit-inner{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.page-ev .ev-credit-copy h2{font-size:clamp(1.75rem,3.2vw,2.7rem);color:#fff;margin-bottom:var(--s-3)}
.page-ev .ev-credit-copy p{font-size:1.06rem;line-height:1.76;color:#DCE8F4;margin:0}
.page-ev .ev-credit-note{
  position:relative;padding:clamp(1.4rem,2.6vw,2rem);border-radius:var(--radius);
  background:rgba(8,22,36,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(231,162,0,.42);box-shadow:0 24px 54px rgba(0,0,0,.45)}
.page-ev .ev-credit-note::before{
  content:"";position:absolute;top:0;left:clamp(1.4rem,2.6vw,2rem);width:2.75rem;height:2px;
  background:var(--gold);border-radius:0 0 2px 2px}
.page-ev .ev-credit-note p{margin:0;color:var(--text);font-size:1.04rem;line-height:1.62}

/* ---------- 6. section 03: copy beside a single install shot ----------
   One photograph now, on the right, stretched to the copy's own height so the
   two columns finish level. The pair that used to sit here was a staggered
   two-up, which never lined up with anything. */
.page-ev .ev-compare{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.75rem,4vw,3.25rem);align-items:stretch}
.page-ev .ev-compare-copy{display:flex;flex-direction:column;justify-content:center}
.page-ev .ev-compare h2{font-size:clamp(1.5rem,2.4vw,2.05rem);color:#fff;margin-bottom:var(--s-3)}
.page-ev .ev-compare-copy p{
  max-width:52ch;font-size:1.05rem;line-height:1.78;color:var(--muted);margin:0}
.page-ev .ev-compare-shot{
  margin:0;display:flex;flex-direction:column;min-height:100%}
.page-ev .ev-compare-shot picture{
  display:block;flex:1;overflow:hidden;border-radius:var(--radius);min-height:0}
.page-ev .ev-compare-shot img{
  display:block;width:100%;height:100%;object-fit:cover;
  border:1px solid rgba(159,212,240,.22);border-radius:var(--radius);
  transition:transform .6s var(--ease)}
.page-ev .ev-compare-shot picture:hover img{transform:scale(1.04)}
.page-ev .ev-compare-shot figcaption{
  position:relative;margin-top:var(--s-3);padding-top:.75rem;flex:0 0 auto;
  font-size:.86rem;line-height:1.5;color:var(--muted)}
.page-ev .ev-compare-shot figcaption::before{
  content:"";position:absolute;top:0;left:0;width:3rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* ---------- 7. section 04: cold typographic statement ---------- */
.page-ev .ev-statement{
  padding-block:clamp(3.5rem,8vw,5.5rem);position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(6,17,28,.94),rgba(9,24,38,.97));
  border-block:1px solid var(--hair)}
.page-ev .ev-statement::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 100% at 85% 0%,rgba(61,131,203,.16),transparent 70%)}
.page-ev .ev-statement .shell{position:relative;max-width:86ch}
/* beats the band's own 86ch measure, which was squeezing the photo column to
   a 240px slot against a 741px tall copy block */
.page-ev .ev-statement .shell.ev-statement-grid{
  max-width:var(--shell);display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.25rem);align-items:stretch}
.page-ev .ev-statement-copy{display:flex;flex-direction:column;justify-content:center}
.page-ev .ev-statement-shot{display:flex;min-height:100%}
.page-ev .ev-statement-shot picture{display:block;flex:1;overflow:hidden;border-radius:var(--radius);min-height:0}
.page-ev .ev-statement-shot img{
  display:block;width:100%;height:100%;object-fit:cover;
  border:1px solid rgba(159,212,240,.22);border-radius:var(--radius);
  transition:transform .6s var(--ease)}
.page-ev .ev-statement-shot picture:hover img{transform:scale(1.04)}
.page-ev .ev-statement h2{font-size:clamp(1.6rem,3vw,2.4rem);color:#fff;max-width:22ch;margin-bottom:var(--s-4)}
.page-ev .ev-statement p{
  font-size:clamp(1.05rem,1.45vw,1.2rem);line-height:1.74;color:#C7D9E9;margin:0;max-width:70ch}

/* ---------- 8. section 05: copy + install strip ---------- */
.page-ev .ev-triad{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.page-ev .ev-triad-copy h2{font-size:clamp(1.5rem,2.4vw,2.05rem);margin-bottom:var(--s-3);color:#fff}
.page-ev .ev-triad-copy p{font-size:1.05rem;line-height:1.78;color:var(--muted);margin:0}
.page-ev .ev-triad-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,1.8vw,1.25rem)}
.page-ev .ev-triad-strip figure{margin:0}
.page-ev .ev-triad-strip img{
  display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;
  border:1px solid rgba(159,212,240,.2);box-shadow:0 14px 32px rgba(0,0,0,.38)}
.page-ev .ev-triad-strip figure:nth-child(2){margin-top:1.1rem}

/* FAQ now lives in css/styles.css, one canonical accordion */

/* ---------- 10. other services ---------- */
.page-ev .ev-also{max-width:none}
.page-ev .ev-also h2{
  padding-left:0;padding-top:var(--s-4);border-top:1px solid var(--hair);
  font-size:clamp(1.45rem,2.2vw,1.9rem);margin-bottom:var(--s-4)}
.page-ev .ev-also h2::before{display:none}

/* contact panel + quote form now live in css/styles.css, one canonical block */

/* ---------- responsive ---------- */
@media(max-width:980px){
  /* These three carry the collapse. The declaration used to live on a fourth
     selector in this list, and removing that line took the whole block with
     it, leaving the grids two-column all the way down to 390px. */
  .page-ev .ev-credit-inner,
  .page-ev .ev-triad,
  .page-ev .ev-split{grid-template-columns:1fr}
  .page-ev .ev-split-shot{max-width:26rem}
  .page-ev .ev-triad-strip{max-width:34rem}
}
@media(max-width:900px){
  .page-ev .ev-spec-list{grid-template-columns:repeat(2,1fr);row-gap:var(--s-4)}
  .page-ev .ev-spec-list li:nth-child(odd){padding-left:0}
  .page-ev .ev-spec-list li:nth-child(odd)::before{display:none}
}
@media(max-width:760px){
  /* the stagger stops earning its keep once the pair stacks */
  .page-ev .ev-compare-shots{grid-template-columns:1fr;margin-block:var(--s-4) var(--s-5)}
  .page-ev .ev-compare-shots figure{margin-top:0}
  .page-ev .ev-triad-strip figure:nth-child(2){margin-top:0}
}
@media(max-width:560px){
  .page-ev .ev-spec-list{grid-template-columns:1fr;row-gap:0}
  .page-ev .ev-spec-list li{padding:var(--s-2) 0}
  .page-ev .ev-spec-list li + li::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .page-ev .ev-triad-strip{grid-template-columns:1fr;max-width:22rem}
}


/* ============ motion ============
   Reveals are opt-in from js/ev-charger.js: the hidden state only exists once
   that script puts .ev-anim on <html>, so no-JS and reduced-motion visitors
   never meet a blank section. Distances stay small and easing stays flat —
   this should read as the page settling, not as things flying in. */
html.ev-anim .ev-reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--evd,0ms)}
html.ev-anim .ev-reveal.is-in{opacity:1;transform:none}
/* the split arrives as one gesture, halves closing toward each other */
html.ev-anim .ev-split-shot.ev-reveal{transform:translate(-22px,14px)}
html.ev-anim .ev-split-copy.ev-reveal{transform:translate(18px,14px)}
html.ev-anim .ev-credit-note.ev-reveal{transform:translate(20px,16px)}
html.ev-anim .ev-compare-shots figure.ev-reveal{transform:translateY(26px)}

/* slow drift on the two photographic bands. Scroll-driven, so there is no
   scroll listener and nothing to jank; browsers without it just sit still. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .page-ev .ev-credit-bg,
    .page-ev .ev-feature img{
      animation:evDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes evDrift{
  from{transform:scale(1.14) translateY(-2.4%)}
  to{transform:scale(1.14) translateY(2.4%)}}

/* photography answers the cursor */
.page-ev .ev-compare-shots picture,
.page-ev .ev-triad-strip picture{display:block;overflow:hidden;border-radius:var(--radius)}
.page-ev .ev-triad-strip picture{border-radius:12px}
@media(prefers-reduced-motion:no-preference){
  .page-ev .ev-compare-shots img,
  .page-ev .ev-triad-strip img{transition:transform .65s var(--ease)}
  .page-ev .ev-compare-shots picture:hover img,
  .page-ev .ev-triad-strip picture:hover img{transform:scale(1.045)}
}

/* the field you are typing in says so */
.page-ev .ev-spec-list li b{transition:color .25s var(--ease)}

@media(max-width:900px){
  /* matches the specificity of the rule that beats the band's 86ch measure,
     otherwise that one wins inside the media query too */
  .page-ev .ev-compare,
  .page-ev .ev-statement .shell.ev-statement-grid{grid-template-columns:1fr}
  .page-ev .ev-statement-shot{order:2;max-width:28rem}
  .page-ev .ev-compare-shot,.page-ev .ev-statement-shot{min-height:0}
  .page-ev .ev-compare-shot img,.page-ev .ev-statement-shot img{height:clamp(13rem,42vw,20rem)}
}