/* DRAFT-SITE S1 MOBILE PASS (Devon, Nov 2): loaded last on every page; phones only (<=767px).
   --cta-h  = live height of the fixed Call Now bar incl. safe-area (cta-pad.js)
   --hdr-h  = live height of the fixed header (cta-pad.js)
   --cta-res = the bottom reserve every pinned text block / card / panel sits above */
@media (max-width:767px){
  :root{--m-side:20px;--m-inset:16px;--m-gap:16px;--cta-res:calc(var(--cta-h,72px) + var(--m-gap));--m-top:calc(var(--hdr-h,68px) + 10px);
        --m-h2:clamp(30px,8.7vw,36px);--m-sub:15px;--m-card-h:26px}

  /* 1. frosted glass header (on a pseudo layer so the menu dropdown keeps its own backdrop blur) */
  .nav{background:none;padding:12px var(--m-inset);border-bottom:1px solid rgba(63,230,240,.16)}
  .nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 46%,rgba(63,230,240,.035)),rgba(7,10,12,.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
    box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 10px 28px rgba(0,0,0,.32)}

  /* 2. bottom reserve above the Call Now bar */
  .copy{left:var(--m-side)!important;right:var(--m-side)!important;bottom:var(--cta-res)!important}
  #tesla-ppf .tp-copy{left:var(--m-side)!important;right:var(--m-side);bottom:var(--cta-res)!important}
  #residential .rs-copy{left:var(--m-side);right:var(--m-side);bottom:var(--cta-res)}
  .s1-card,.s1-host>.s1-card,.r3-card{bottom:var(--cta-res)!important;width:calc(100vw - 2*var(--m-inset))!important}
  #commercial .cm-copy,#commercial .cm-c0,#commercial .cm-c1{left:var(--m-inset);right:var(--m-inset);bottom:var(--cta-res)}
  /* step rails / progress chip would sit under the bar: hidden on phones */
  #residential .rs-steps,#commercial .cm-steps,#commercial .cm-chip{display:none!important}
  /* reviews + footer: end clear of the bar */
  #reviews{padding-bottom:calc(var(--cta-h,72px) + 24px)}

  /* 3. info boxes: below the header, never wider than the screen; Tesla box restacks to one column */
  .ibox{left:var(--m-inset);top:var(--m-top)}
  #tesla-ppf .tp-ibox{left:var(--m-inset);top:var(--m-top);box-sizing:border-box;width:calc((100vw - 2*var(--m-inset)) / .78);
    flex-wrap:wrap;align-items:center;row-gap:10px;padding:11px 16px 13px 11px}
  #tesla-ppf .tp-ibox>.tp-vdiv{display:none}
  #tesla-ppf .tp-ibox .tp-tiers{flex:1 0 100%;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
  .tp-tiers ul{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:6px 18px;margin-top:7px}
  .tp-tiers li{font-size:14px}
  #tesla-ppf .tp-ibox.s4 .tp-c3{flex:0 1 auto}

  /* 6. one type scale + one side padding for the four animation sections */
  .copy h1,.copy h2,#tesla-ppf .tp-copy h2,#residential .rs-copy h2,#commercial h2{font-size:var(--m-h2);line-height:1;letter-spacing:-.04em}
  .copy .sub,#tesla-ppf .tp-copy .sub,#residential .rs-sub,#commercial .cm-sub{font-size:var(--m-sub);line-height:1.45;margin-top:12px}
  .copy .eyebrow,#tesla-ppf .tp-copy .eyebrow,#residential .rs-eyebrow,#commercial .cm-eyebrow{font-size:10.5px;letter-spacing:.18em;margin-bottom:12px}
  .s1-h,.r3-h,.s1-card-com .s1-h,#commercial .s1-card .s1-h{font-size:var(--m-card-h);line-height:1.04;margin-bottom:14px}
  .tp-call{margin-top:18px}
  #commercial .cm-cta-row{margin-top:22px}
  .cm-bul li{font-size:15px}
  #residential .rs-hud{inset:calc(var(--hdr-h,68px) - 2px) 12px 12px 12px}
}
@media (max-width:380px){
  :root{--m-side:18px;--m-inset:14px;--m-card-h:24px}
  .s1-amt{font-size:36px}
  .tp-tiers li{font-size:13px}
}
/* reviews: the section clears the glass header at its anchor and both card rows end above the Call Now bar.
   Cards stay content-fit (reviews-marquee.js fit() grows them so no text is clipped); wider cards = fewer lines. */
@media (max-width:720px){
  .rvm{padding-top:calc(var(--hdr-h,68px) + 16px);--rvm-card-w:min(318px,calc(100vw - 52px));--rvm-card-h:176px;--rvm-row-gap:0px}
  .rvm-head{margin-bottom:18px;gap:12px}
  .rvm-quote{font-size:14.5px;line-height:1.44}
}
/* v11: height-dependent rules keyed to the load-time viewport height class (cv-h820, freescroll.js), not a live max-height query:
   a URL-bar height change can no longer re-lay-out this block (document height stays constant) */
@media (max-width:720px){
  :where(.cv-h820) .rvm-head{margin-bottom:14px;gap:10px}
  :where(.cv-h820) .rvm-title{font-size:28px}
  :where(.cv-h820) .rvm{--rvm-card-w:calc(100vw - 40px)}
  :where(.cv-h820) .rvm-card{padding:16px 18px 12px}
  :where(.cv-h820) .rvm-top{margin-bottom:10px}
  :where(.cv-h820) .rvm-quote{font-size:14px;line-height:1.4}
  :where(.cv-h820) .rvm-foot{margin-top:10px;padding-top:10px}
}

/* ===================== MOBILE POLISH PASS (Devon plan step 3, Nov 2 PM) =====================
   Phones only (<=767px) plus a short-landscape block; nothing here applies at desktop widths.
   Rules: type >=13px (legal / staging notice / logo lockup excepted), taps >=44px, balanced headings,
   safe-area insets, one spacing rhythm, lighter effects. "html" prefixes out-rank the inner-page sheets
   (pv2.css + page css load after this file there). */
@media (max-width:767px){
  :root{--m-rhythm:clamp(64px,18vw,76px)}
  /* -- header: safe-area aware, 44px menu button, readable phone link with a 44px hit area -- */
  .nav{padding:calc(10px + env(safe-area-inset-top,0px)) calc(var(--m-inset) + env(safe-area-inset-right,0px)) 10px calc(var(--m-inset) + env(safe-area-inset-left,0px))}
  .brand{min-height:44px}
  .nav-links{font-size:13px}
  html .nav-links .nav-call{font-size:13px;letter-spacing:.02em;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;white-space:nowrap}
  html .nav-menu{width:44px;height:44px;margin-left:10px;flex:none}
  .ds-draft-tag{white-space:nowrap}
  /* -- menu: safe-area, fits short screens, 48px rows, readable group labels -- */
  html .nav-drop{right:calc(var(--m-inset) + env(safe-area-inset-right,0px));width:min(340px,calc(100vw - 2*var(--m-inset)));max-height:calc(100svh - var(--hdr-h,68px) - var(--cta-h,72px) - 8px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box}
  html .nav-drop-k{font-size:13px;letter-spacing:.1em}
  html .nav-drop-g a{padding:13px 2px;min-height:48px;box-sizing:border-box;display:flex;align-items:center}
  html .nav-drop-call{min-height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
  /* -- Call Now bar: safe-area sides; the 8.5px kicker is dropped, the label is readable -- */
  html .cta{padding-left:calc(14px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px))}
  html .cta-txt small{display:none}
  html .cta-txt b{font-size:15px;margin-top:0;white-space:nowrap}
  html .cta-btn{min-height:48px;box-sizing:border-box}
  /* -- footer: readable links with 44px rows -- */
  html .ds-foot-nav{font-size:13px;letter-spacing:.1em;gap:0 6px;margin-bottom:10px}
  html .ds-foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 9px}
  html .ds-footer p:not(.ds-draft){font-size:15px;line-height:1.6}
  html .ds-draft{text-wrap:balance}
  .ds-footer a[href^="tel:"],.ds-footer a[href*="maps"]{padding:6px 0}
  /* -- headings / eyebrows never end on a lone word -- */
  h1,h2,h3,.pv-k,.eyebrow,.ds-eyebrow,.s1-eyebrow,.r3-eyebrow,.rs-eyebrow,.cm-eyebrow,.rvm-eyebrow,.rvm-title,figcaption,.pv-card-v,.pv-note-h,.pv-dep,.cv-dep,.f-qt{text-wrap:balance}
  p,li,dd{text-wrap:pretty}

  /* ---------- homepage ---------- */
  .copy .eyebrow,#tesla-ppf .tp-copy .eyebrow,#residential .rs-eyebrow,#commercial .cm-eyebrow{font-size:13px;letter-spacing:.1em}
  .ibox small{font-size:16.7px;letter-spacing:.06em}          /* box is scaled .78 on phones -> 13px on screen */
  .ibox .col:first-of-type{width:auto;min-width:118px}
  #tesla-ppf .tp-ibox small{font-size:16.7px;letter-spacing:.06em}
  #tesla-ppf .tp-tiers li{font-size:16.7px}
  .s1-eyebrow,.r3-eyebrow{font-size:13px;letter-spacing:.1em;margin-bottom:8px}
  .s1-k,.r3-k{font-size:13px;letter-spacing:.08em;margin-bottom:8px}
  .s1-from{font-size:13px}
  .s1-cap,.r3-cap,.r3-list{font-size:13px;letter-spacing:0;line-height:1.4}
  .r3-list{line-height:1.5}
  .s1-vary{font-size:13px}
  .s1-chip,.r3-chip{font-size:13px;letter-spacing:.06em;padding:6px 10px}
  .s1-more-list em{font-size:13px;letter-spacing:.04em}
  .s1-foot .cv-dep,.r3-foot .cv-dep{font-size:13px}
  .r3-ben-k{font-size:13px;letter-spacing:.12em}
  #residential .rs-hud{font-size:13px;letter-spacing:.1em}
  .rs-legend{font-size:13px}
  #residential .rs-hint,#commercial .cm-hint,#tesla-ppf .tp-hint{font-size:13px;letter-spacing:.16em}
  .rvm-eyebrow{font-size:13px;letter-spacing:.14em}
  .rvm-verified{font-size:13px;letter-spacing:.02em;padding:3px 8px}
  .rvm-src{font-size:13px}
  .ds-book-k,.ds-book-k span{font-size:13px;letter-spacing:.12em}
  .ds-endcta-tel{display:inline-flex;align-items:center;min-height:44px}
  html .cv-dep-book{font-size:14px}

  /* ---------- inner pages (pv2) ---------- */
  html .pv-k{font-size:13px;letter-spacing:.12em}
  html .pv-idx a{padding:12px 2px;min-height:44px;box-sizing:border-box;grid-template-columns:30px 1fr auto}
  html .pv-idx a span{font-size:13px;letter-spacing:.04em}
  html .pv-idx a em{font-size:13px;letter-spacing:.06em}
  html .pv-ph figcaption{font-size:13px;letter-spacing:.06em;left:14px;right:14px;bottom:14px}
  html .pv-inset figcaption{font-size:13px;letter-spacing:.02em;left:8px;right:8px;bottom:8px;line-height:1.2}
  html .pv-num{font-size:13px;letter-spacing:.12em}
  html .pv-meta dt{font-size:13px;letter-spacing:.06em}
  html .pv-tag,html .pv-duo .pv-tag{font-size:13px;letter-spacing:.08em}
  html .pv-step-n{font-size:13px;letter-spacing:0;width:36px;height:36px}
  html .pv-note-a{font-size:13px;letter-spacing:.1em;display:inline-flex;align-items:center;min-height:44px;white-space:normal}
  html .pv-dep{font-size:13px;letter-spacing:0;line-height:1.4}
  html .pv-addr{font-size:15px}
  html .pv-strip-card figcaption span{font-size:13px;letter-spacing:.06em}
  html .pv-strip-card figcaption b{font-size:16px}
  /* one rhythm: every inner section breathes the same on phones */
  html .pv-sec{padding:var(--m-rhythm) 0}
  html .pv-chap{padding:calc(var(--m-rhythm) * .6) 0}
  html .pv-strip{padding:var(--m-rhythm) 0 calc(var(--m-rhythm) * .75)}
  html .pv-book{padding:var(--m-rhythm) 0}
  html .pv-sec-head{margin-bottom:calc(var(--m-rhythm) * .55)}
  /* lighter glass + gentler reveals on phones */
  html .pv-glass{-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}
  html.pv-js [data-pv-in]{transform:translateY(16px)}
  html.pv-js .pv-ph{clip-path:inset(8% 6% 8% 6% round var(--pv-r))}
  /* portrait crops: chapter photos a touch shorter so the term + card stay close */
  html .pv-ph{aspect-ratio:4/4.6}

  /* gallery */
  html .g-item figcaption span,html .g-clip figcaption span{font-size:13px;letter-spacing:.04em}
  html .g-item figcaption b{font-size:14px;line-height:1.2}
  html .g-chip{min-height:44px}
  html .g-chip sup{font-size:13px;letter-spacing:0}
  html .g-shown{font-size:13px;letter-spacing:.1em}
  html .g-lb-count{font-size:13px}
  html .g-lb-cap span{font-size:13px;letter-spacing:.1em}
  html .g-lb-cap p{font-size:14px}
  /* faq */
  html .f-count{font-size:13px;letter-spacing:.1em}
  html .f-nav a{padding-top:12px;padding-bottom:12px;min-height:44px;box-sizing:border-box}
  html .f-nav a span,html .f-nav a em{font-size:13px;letter-spacing:.04em}
  html .f-gn{font-size:13px;letter-spacing:.1em}
  html .f-gc{font-size:13px;letter-spacing:.06em}
  html .f-qn{font-size:13px;letter-spacing:0}
  /* contact */
  html .c-clock{font-size:13px;letter-spacing:.1em}
  html .c-hours dt{font-size:13px;letter-spacing:.08em}
  html .c-link{font-size:13px;letter-spacing:.1em;display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;box-sizing:border-box}
  html .c-map-l{font-size:13px;letter-spacing:.1em}
  html .c-map-x{font-size:13px;letter-spacing:.06em}
  html .c-card-go{font-size:13px;letter-spacing:.1em}
  /* page transition label */
  .pt-mark small{font-size:13px;letter-spacing:.14em}
}
@media (max-width:380px){
  html .nav-links .nav-call{font-size:13px;letter-spacing:0;padding:0 2px}
  html .nav-menu{margin-left:6px}
  .brand-text b{font-size:16px}
}
/* phones in landscape (short + wide, e.g. 844x390): menu scrolls inside the screen, notch sides respected */
@media (orientation:landscape) and (max-height:500px){
  .nav{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .nav-drop{max-height:calc(100svh - var(--hdr-h,64px) - 12px);overflow:auto;overscroll-behavior:contain}
  .cta{margin-left:env(safe-area-inset-left,0px)}
}
/* menu open/close motion (nav-menu.js adds .is-closing before hiding); off under reduced motion */
.nav-drop{transform-origin:calc(100% - 22px) 0}
@keyframes navdrop-in{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes navdrop-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes navdrop-row{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1180px){
  html .nav-drop{animation:navdrop-in .28s cubic-bezier(.16,1,.3,1) both}
  html .nav-drop.is-closing{animation:navdrop-out .18s ease-in both;pointer-events:none}
  html .nav-drop:not(.is-closing) .nav-drop-g a,html .nav-drop:not(.is-closing) .nav-drop-call{animation:navdrop-row .34s cubic-bezier(.16,1,.3,1) both}
  html .nav-drop .nav-drop-g a:nth-child(2){animation-delay:.03s}
  html .nav-drop .nav-drop-g a:nth-child(3){animation-delay:.06s}
  html .nav-drop .nav-drop-g a:nth-child(4){animation-delay:.09s}
  html .nav-drop .nav-drop-g a:nth-child(5){animation-delay:.12s}
  html .nav-drop .nav-drop-call{animation-delay:.14s}
}
@media (prefers-reduced-motion:reduce){
  html .nav-drop,html .nav-drop.is-closing,html .nav-drop .nav-drop-g a,html .nav-drop .nav-drop-call{animation:none!important}
}
/* short phones (SE-class 667, 360x780): the hero + its index panel fit above the Call Now bar */
/* v11: height-dependent rules keyed to the load-time viewport height class (cv-h820, freescroll.js), not a live max-height query:
   a URL-bar height change can no longer re-lay-out this block (document height stays constant) */
@media (max-width:767px){
  html:where(.cv-h820) .pv-hero-in{padding-top:calc(var(--hdr-h,64px) + 4svh);gap:16px}
  html:where(.cv-h820) .pv-h1{margin-bottom:12px}
  html:where(.cv-h820) .pv-hero-panel{padding:14px 16px 6px}
  html:where(.cv-h820) .pv-hero-panel .pv-k{margin-bottom:6px}
}
/* v11: height-dependent rules keyed to the load-time viewport height class (cv-h700, freescroll.js), not a live max-height query:
   a URL-bar height change can no longer re-lay-out this block (document height stays constant) */
@media (max-width:767px){
  html:where(.cv-h700) .pv-hero-in{padding-top:calc(var(--hdr-h,64px) + 10px);padding-bottom:calc(var(--cta-h,68px) + 26px);gap:12px}
  html:where(.cv-h700) .pv-hero-in .pv-k{margin-bottom:10px}
  html:where(.cv-h700) .pv-h1{font-size:clamp(40px,11.4vw,48px);margin-bottom:10px}
  html:where(.cv-h700) .pv-hero .pv-lede{font-size:15px;line-height:1.45}
  html:where(.cv-h700) .pv-idx a{padding:11px 2px;min-height:44px}
}
/* phones in landscape: hero type scales to the short screen so the headline + lede sit above the bar */
@media (orientation:landscape) and (max-height:500px){
  html .pv-hero-in{padding-top:calc(var(--hdr-h,64px) + 8px)}
  html .pv-h1{font-size:clamp(36px,12.5vh,56px);margin-bottom:10px}
  html .pv-hero .pv-lede{font-size:15px;line-height:1.45}
  html .pv-hero-in .pv-k{margin-bottom:8px}
}
/* polish pass, round 2: margins over the 13px floor where cards scale in, last tap targets, wrap fixes */
@media (max-width:767px){
  html .pv-tag,html .pv-duo .pv-tag{font-size:13.5px}
  html .pv-inset figcaption{font-size:13.5px}
  html .c-status{font-size:14px}
  .s1-foot .cv-dep,.r3-foot .cv-dep{font-size:13.5px}
  .rvm-src{font-size:13.5px}
  html .pv-tel{display:inline-flex;align-items:center;min-height:48px}
  html .c-map-btn{min-height:44px}
  html main p a:not([class]),html main li a:not([class]),html main dd a:not([class]){padding:14px 0;margin:-14px 0}
  html .pv-strip-card figcaption span{white-space:nowrap;letter-spacing:.02em}
  html .f-ghead{flex-wrap:wrap;row-gap:6px}
  html .f-gt{white-space:nowrap}
}
/* phones in landscape (844x390 class): same menu/tap/type fixes as portrait for the header + menu + footer */
@media (orientation:landscape) and (max-height:500px){
  html .nav-menu{width:44px;height:44px}
  html .nav-drop-k{font-size:13px;letter-spacing:.1em}
  html .nav-drop-g a{padding:13px 2px;min-height:48px;box-sizing:border-box;display:flex;align-items:center}
  html .nav-links .nav-call{font-size:13px;display:inline-flex;align-items:center;min-height:44px}
  html .ds-foot-nav{font-size:13px}
  html .ds-foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 9px}
  html .cta-txt small{display:none}
  html .cta-txt b{font-size:15px}
}
/* draft badge (staging only): never wraps, never squeezed by the header flex row, at any width */
.ds-draft-tag{white-space:nowrap;flex-shrink:0}
@media (max-width:767px){html .ds-draft{text-wrap:balance;max-width:34ch;margin-left:auto;margin-right:auto}}
/* phones in landscape: the same 13px floor + 44px taps (layout stays the tablet layout) */
@media (orientation:landscape) and (max-height:500px){
  html .pv-k,.copy .eyebrow,#tesla-ppf .tp-copy .eyebrow,#residential .rs-eyebrow,#commercial .cm-eyebrow,.s1-eyebrow,.r3-eyebrow,.rvm-eyebrow,.r3-ben-k{font-size:13px;letter-spacing:.1em}
  .ibox small,#tesla-ppf .tp-ibox small{font-size:13.5px;letter-spacing:.06em}
  .s1-k,.r3-k,.s1-from,.s1-cap,.r3-cap,.r3-list,.s1-vary,.s1-more-list em,.rs-legend,.ds-book-k,.ds-book-k span{font-size:13px;letter-spacing:.06em}
  .s1-chip,.r3-chip{font-size:13px;letter-spacing:.06em}
  .s1-foot .cv-dep,.r3-foot .cv-dep,.rvm-src,html .pv-dep{font-size:13.5px;letter-spacing:0}
  .rvm-verified{font-size:13px;letter-spacing:.02em}
  .ds-endcta-tel,html .pv-tel{display:inline-flex;align-items:center;min-height:48px}
  html .cta-btn{min-height:48px;box-sizing:border-box}
  html .pv-idx a span,html .pv-idx a em,html .pv-num,html .pv-meta dt,html .pv-step-n,html .pv-strip-card figcaption span{font-size:13px;letter-spacing:.04em}
  html .pv-ph figcaption,html .pv-inset figcaption,html .pv-tag,html .pv-duo .pv-tag{font-size:13.5px;letter-spacing:.04em}
  html .pv-note-a{font-size:13px;display:inline-flex;align-items:center;min-height:44px}
  html .g-item figcaption span,html .g-clip figcaption span,html .g-chip sup,html .g-shown,html .g-lb-count,html .g-lb-cap span,html .f-count,html .f-nav a span,html .f-nav a em,html .f-gn,html .f-gc,html .f-qn,html .c-clock,html .c-hours dt,html .c-link,html .c-map-l,html .c-map-x,html .c-card-go{font-size:13px;letter-spacing:.06em}
  html .g-chip,html .c-map-btn,html .c-link{min-height:44px}
  html .f-nav a{min-height:44px;box-sizing:border-box}
  html main p a:not([class]),html main li a:not([class]),html main dd a:not([class]){padding:14px 0;margin:-14px 0}
  h1,h2,h3,.pv-k,figcaption{text-wrap:balance}
}
/* round 3: last margins (cards scale in from .94, so list text sits a hair above the floor), landscape step titles */
@media (max-width:767px),(orientation:landscape) and (max-height:500px){
  .r3-list{font-size:13.5px}
  html .c-status{font-size:14px}
  html .pv-step h3{white-space:nowrap;font-size:clamp(22px,6.4vw,28px)}
}
@media (orientation:landscape) and (max-height:500px){.brand{min-height:44px}}
@media (max-width:767px){html .g-item figcaption span,html .g-clip figcaption span{white-space:nowrap;letter-spacing:.1em}}