/* EV set piece: "Plug in tonight, full by morning" (a night over the photo, a charge ring and a timeline) */
.evn { position: relative; isolation: isolate; overflow: clip; color: #fff; }
.evn__pin { position: relative; padding-block: clamp(56px, 6vw, 88px); }
.evn.tex-contour::after { z-index: -2; }   /* the contour lines sit behind the photo, showing above and around it */
.evn__scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #050b14; }
.evn__photo { position: absolute; inset: -4%; will-change: transform; container-type: size; transform-origin: 88% 58%; }
/* the charger's own status light in the photo (at 91.1% across, 57.2% down the picture), in step with the ring */
.evn__plug { position: absolute; z-index: 1; right: calc(15.9cqh - 15px); top: calc(57.2cqh - 15px); width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(220,255,200,.95) 0 18%, rgba(122,188,99,.75) 30%, rgba(122,188,99,0) 70%); animation: evn-plug 2.4s ease-in-out infinite; pointer-events: none; }
.evn__plug.is-wait { background: radial-gradient(circle, rgba(225,240,255,.95) 0 18%, rgba(156,200,255,.7) 30%, rgba(156,200,255,0) 70%); }
.evn__plug.is-charging { animation-duration: 1s; }
.evn__plug.is-full { animation: none; transform: scale(1.3); }
@keyframes evn-plug { 50% { transform: scale(1.7); opacity: .55; } }
/* the photo's left quarter is flat black sky, so the picture is fitted to the height and pinned right; the scrim
   below is solid ink over the part where that flat edge could show */
.evn__photo img { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; }
.evn__tint { position: absolute; inset: 0; pointer-events: none; }
.evn__tint--dusk { background: linear-gradient(180deg, rgba(240,130,86,.72) 0%, rgba(150,70,140,.45) 40%, rgba(20,20,60,0) 72%); mix-blend-mode: screen; }
.evn__tint--dawn { background: radial-gradient(120% 90% at 85% 100%, rgba(255,186,120,.55), rgba(255,186,120,0) 60%), linear-gradient(180deg, rgba(120,160,220,.35), rgba(120,160,220,0) 60%); mix-blend-mode: screen; }
.evn__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(4,10,18,.85) 0%, rgba(4,10,18,0) 34%), linear-gradient(90deg, #05090d 0%, #05090d max(0px, calc(104% - 141svh + 40px)), rgba(4,10,18,.62) max(34%, calc(104% - 141svh + 300px)), rgba(4,10,18,.1) max(62%, calc(104% - 141svh + 560px)), rgba(4,10,18,.3) 100%); }

.evn__grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.evn__copy { display: grid; gap: 16px; align-content: start; }
.evn h2 em { font-style: normal; color: var(--green); display: block; }
.evn .lede { color: rgba(255,255,255,.84); }
.evn__now { display: grid; gap: 6px; }
.evn__clock span { display: block; min-width: 5ch; font-family: var(--display); font-weight: 800; font-size: clamp(56px, 6vw, 104px); line-height: .95; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(0,0,0,.4); }
.evn__status { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.5vw, 24px); }
.evn__led { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: #9cc8ff; box-shadow: 0 0 0 0 rgba(156,200,255,.6); animation: evn-led 2.4s ease-in-out infinite; }
.evn__led.is-charging { background: var(--green); animation-duration: 1.1s; }
.evn__led.is-full { background: var(--green); animation: none; box-shadow: 0 0 14px 2px rgba(122,188,99,.7); }
@keyframes evn-led { 0% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(122,188,99,.55); } 70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(122,188,99,0); } 100% { transform: scale(.85); } }

.evn__quote { margin: 8px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--green); max-width: 52ch; }
.evn__quote p { font-size: var(--small); line-height: 1.5; color: rgba(255,255,255,.88); }
.evn__quote footer { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--green); }

/* the charge ring and the range counter, on glass */
.evn__hud { display: grid; justify-items: center; gap: 14px; padding: clamp(18px, 2vw, 28px); border-radius: var(--radius); background: rgba(6,16,26,.5); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border: 1px solid rgba(255,255,255,.14); }
.evn__ring { position: relative; width: clamp(180px, 15vw, 248px); aspect-ratio: 1; }
.evn__ring svg { width: 100%; height: 100%; overflow: visible; }
.evn__segs line { stroke: rgba(255,255,255,.22); stroke-width: 3; stroke-linecap: round; }
.evn__segs { transform-box: view-box; transform-origin: 120px 120px; animation: evn-spin 40s linear infinite; }
@keyframes evn-spin { to { transform: rotate(360deg); } }
.evn__track { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 14; }
.evn__fill { fill: none; stroke: var(--green); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100 100; filter: drop-shadow(0 0 8px rgba(122,188,99,.55)); }
.evn__spark { fill: #e9ffd9; filter: drop-shadow(0 0 6px #b6f59a); opacity: 0; }
.evn__spark.is-on { opacity: 1; animation: evn-spark 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes evn-spark { 50% { transform: scale(1.5); opacity: .6; } }
.evn__pct { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.evn__pct b { display: block; min-width: 3.3em; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 3.6vw, 60px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.evn__pct small { font-size: 16px; color: rgba(255,255,255,.75); }
.evn__range { display: grid; justify-items: center; text-align: center; gap: 2px; }
.evn__range small { font-size: 16px; color: rgba(255,255,255,.75); }
.evn__range b > span { display: inline-block; min-width: 6.2em; }
.evn__range b { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.2vw, 36px); line-height: 1.1; letter-spacing: -.02em; color: var(--green); font-variant-numeric: tabular-nums; }
.evn__rate { font-size: 15px; color: rgba(255,255,255,.7); }

/* the timeline: 18:00 to 07:00 with the cheap window and the playhead */
.evn__line { display: grid; gap: 8px; }
.evn__track-wrap { position: relative; padding-top: 34px; }
.evn__bar { position: relative; height: 14px; border-radius: 14px; background: rgba(255,255,255,.14); overflow: hidden; }
.evn__cheap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(122,188,99,.45) 0 6px, rgba(122,188,99,.25) 6px 12px); background-size: 34px 34px; animation: evn-stripes 1.6s linear infinite; }
.evn__cheap em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.evn__cheap.is-live { background-color: rgba(122,188,99,.35); box-shadow: inset 0 0 12px rgba(201,236,185,.6); }
@keyframes evn-stripes { to { background-position: 34px 0; } }
.evn__done { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(156,200,255,.55), var(--green)); transform-origin: left; mix-blend-mode: screen; }
.evn__headwrap { position: absolute; left: 0; right: 0; bottom: 7px; height: 0; pointer-events: none; }
.evn__head { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.2), 0 0 24px rgba(201,236,185,.9); }
.evn__mark { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.55); transition: color .35s; }
.evn__mark.is-first { transform: none; }
.evn__mark.is-last { transform: translateX(-100%); }
.evn__mark.is-past { color: #fff; }
.evn__hours { position: relative; height: 22px; }
.evn__hours li { position: absolute; top: 0; transform: translateX(-50%); font-size: 15px; font-weight: 600; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
.evn__hours li:first-child { transform: none; }
.evn__hours li:last-child { transform: translateX(-100%); }
.evn__note { font-size: var(--small); color: rgba(255,255,255,.66); margin-top: 6px; }

@media (min-width: 1000px) {
  /* the photo starts under the fixed header, so everything in the pinned scene sits below it */
  .evn__scene { top: var(--header-h); }
  .evn__pin { min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 28px); padding-bottom: 28px; }
  .evn__pin > .wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
  .evn__grid { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: center; }
  .evn__copy { align-self: center; }
  .evn__hud { align-self: start; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: 22px; padding-right: 30px; }
  .evn__range { justify-items: start; text-align: left; }
  .evn__line { grid-column: 1 / -1; }
}
@media (max-width: 999px) {
  /* phones: heading and lede, the photo as a full-width band with the ring over its foot, then the clock and the timeline */
  .evn__copy { display: contents; }
  .evn__copy > h2 { order: 1; } .evn__copy > .lede { order: 2; }
  .evn__scene { order: 3; position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); }
  .evn__scrim { background: linear-gradient(0deg, rgba(4,10,18,.95) 0%, rgba(4,10,18,0) 55%); }
  .evn__hud { order: 4; margin-top: -64px; position: relative; z-index: 1; grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 16px; }
  .evn__now { order: 5; }
  .evn__status { min-height: 2.7em; align-items: flex-start; }
  .evn__status .evn__led { margin-top: .35em; }
  .evn__line { order: 6; }
  .evn__quote { order: 7; }
  .evn__grid { gap: 20px; }
  .evn__range { justify-items: start; text-align: left; }
  .evn__ring { width: 120px; }
  .evn__pct b { font-size: 25px; }
  .evn__pct small { font-size: 14px; }
  .evn__clock span { font-size: 52px; }
  .evn__hours li.is-odd { display: none; }
  .evn__mark { font-size: 14px; }
  .evn__mark[data-evn-mark="29.5"] { display: none; }  /* "Full" is shown by the ring on small screens */
}
@media (prefers-reduced-motion: reduce) {
  .evn__led, .evn__segs, .evn__cheap, .evn__spark.is-on, .evn__plug { animation: none; }
}

/* Opener touch on the EV page: a charge ring on the photo (waits, fills on the night rate, rests full) */
.touch-ring { position: absolute; z-index: 2; right: clamp(16px, 2.4vw, 32px); top: clamp(16px, 2.4vw, 32px); display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 16px; background: rgba(6,14,24,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; max-width: min(300px, 70%); }
.touch-ring svg { flex: 0 0 64px; width: 64px; height: 64px; transform: rotate(-90deg); }
.touch-ring__track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 7; }
.touch-ring__fill { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 66; transition: stroke .4s; }
.touch-ring[data-state="wait"] .touch-ring__fill { stroke: #9cc8ff; }
.touch-ring__txt { display: grid; gap: 2px; }
.touch-ring__txt b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--green); font-variant-numeric: tabular-nums; }
.touch-ring__txt small { font-size: 15px; line-height: 1.25; color: rgba(255,255,255,.82); }

/* this page's two-part headings: the coloured phrase always takes its own line, so the break never falls inside it */
.page-ev .svc-get h2 em, .page-ev .svc-fund h2 em { display: block; }
@media (max-width: 999px) {
  /* phones: the opener's ring keeps its figure and drops its words, clear of the tag on the photo's foot */
  .touch-ring { top: 12px; right: 12px; padding: 8px 14px 8px 8px; gap: 10px; border-radius: 12px; }
  .touch-ring svg { flex-basis: 44px; width: 44px; height: 44px; }
  .touch-ring__txt b { font-size: 20px; }
  .touch-ring__txt small { display: none; }
}