/* ============================================================
   PRESTIGE ROOFING — V2 shared design system
   Dark cinematic premium, single steel accent.
   Used by index.html and every subpage. Page-specific rules
   live in a small <style> block at the top of each page.
   ============================================================ */
:root{
  --bg:#111317; --bg-2:#171a1f; --bg-3:#1e232b;
  --line:rgba(240,243,247,.10); --line-strong:rgba(240,243,247,.20);
  --ink:#F2F4F7; --muted:#C3CAD3; --faint:#8A93A0;
  --accent:#9DB1C6; --accent-2:#B9C7D6; --accent-deep:#3E72A8;
  --cta:#F2F4F7; --cta-ink:#14161a; --cta-hover:#ffffff; --accent-ink:#14161a;
  --gold:#FBBC04; --success:#2FB463;
  --r-card:14px; --r-media:18px; --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
/* overflow-x:clip guards against any incidental horizontal scroll on mobile without breaking
   position:sticky (unlike overflow:hidden). Fixes a phantom ~159px scroll on the reviews page. */
html{scroll-behavior:smooth;scroll-padding-top:92px;overflow-x:clip;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,.display{font-family:"Archivo",system-ui,sans-serif;font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:"Archivo";font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}

/* Accessibility: skip link + visible focus */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cta-ink);padding:12px 20px;border-radius:0 0 10px 0;font-family:"Archivo";font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Archivo";font-weight:700;font-size:15.5px;letter-spacing:.01em;padding:15px 26px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);white-space:nowrap;min-height:48px}
.btn-primary{background:var(--cta);color:var(--cta-ink)}
.btn-primary:hover{background:var(--cta-hover);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-phone-hero{font-weight:900;border-width:2px;border-color:var(--ink)}
.btn-phone-hero:hover{border-color:var(--accent)}
.btn-block{width:100%;justify-content:center}

/* NAV */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:border-color .3s var(--ease);border-bottom:1px solid transparent}
/* Nav glass lives on ::before and only its opacity animates (2026-10-15). Transitioning background +
   backdrop-filter on the header itself left a stale dark/blurred bar in Chrome (Mac) after scrolling back
   to the top, until a refresh. */
header.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(17,19,23,.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);opacity:0;transition:opacity .3s var(--ease)}
header.nav.scrolled::before,header.nav.solid::before{opacity:1}
header.nav.scrolled,header.nav.solid{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:"Archivo";font-weight:900;font-size:19px;letter-spacing:.04em;display:flex;align-items:center}
.brand img{height:54px;width:auto;display:block}
/* The nav logo lives in a .glimmer wrapper (overflow:hidden, needed to mask the shine sweep). A flex
   baseline strut makes the <img> render ~4px past its box, so overflow:hidden sheared the bottom of
   "ROOFING". Vertical padding enlarges the padding-box (where overflow clips) so the wordmark is never
   cut, at any width (client mobile report 2026-09-12). */
header.nav .brand{padding-block:6px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{font-size:14.5px;color:var(--ink);transition:color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--accent)}
.nav-links a.is-active{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-phone{font-family:"Archivo";font-weight:700;font-size:15.5px;letter-spacing:.01em}
.nav-phone:hover{color:var(--accent)}
.menu-btn{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;min-width:44px;min-height:44px}

/* ---- Desktop dropdown items (Our Process, Media) — sub-links reveal over a blurred glass panel, no
   bordered box (client Sep 14: bordered dropdown boxes look tacky). ---- */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop-t{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:"Manrope",system-ui,sans-serif;font-size:14.5px;color:var(--ink);transition:color .2s}
.navdrop-t:hover,.navdrop:focus-within .navdrop-t{color:var(--accent)}
.navdrop-t .nd-chev{transition:transform .3s var(--ease);opacity:.75}
.navdrop:hover .nd-chev,.navdrop:focus-within .nd-chev{transform:rotate(180deg)}
.navdrop-panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:206px;padding:12px;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(180deg,rgba(20,23,28,.58),rgba(15,17,21,.66));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border-radius:16px;box-shadow:0 26px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),transform .34s var(--ease),visibility .3s}
.navdrop:hover .navdrop-panel,.navdrop:focus-within .navdrop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* invisible bridge so the cursor can cross the gap from trigger to panel without the hover dropping */
.navdrop-panel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nd-link{position:relative;font-family:"Archivo",system-ui,sans-serif;font-weight:600;font-size:16.5px;letter-spacing:.01em;color:var(--muted);padding:9px 12px;border-radius:10px;transition:color .2s,background .2s;white-space:nowrap}
.nd-link:hover,.nd-link:focus-visible{color:var(--ink);background:rgba(255,255,255,.06)}
/* per-character blur-in stagger (chars wrapped by JS in span.nd-ch; transition-delay set inline) */
.nd-ch{display:inline-block;white-space:pre;opacity:0;filter:blur(5px);transform:translateY(5px) scale(.9);transition:opacity .36s var(--ease),filter .36s var(--ease),transform .36s var(--ease)}
.navdrop:hover .nd-ch,.navdrop:focus-within .nd-ch{opacity:1;filter:blur(0);transform:none}

/* ---- Mobile drilldown overlay — a list that drills into itself (framer feel, vanilla). ---- */
.mobile-menu{position:fixed;inset:0;z-index:120;display:none;background:rgba(11,13,16,.55);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);opacity:0;transition:opacity .32s var(--ease)}
.mobile-menu.open{display:block;opacity:1}
.mm-sheet{position:absolute;top:0;right:0;bottom:0;width:min(430px,88vw);padding:92px 32px 32px;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,rgba(21,24,29,.5),rgba(13,15,19,.66));box-shadow:-34px 0 90px rgba(0,0,0,.5);transform:translateX(46px);opacity:0;transition:transform .4s var(--ease),opacity .4s var(--ease)}
.mobile-menu.open .mm-sheet{transform:none;opacity:1}
.mm-stack{position:relative;flex:1 1 auto;font-size:27px;transition:height .36s var(--ease)}
.mm-row{position:absolute;left:0;top:0;display:flex;align-items:center;transition:top .44s var(--ease),left .44s var(--ease),opacity .3s var(--ease)}
.mm-row .mm-btn{display:inline-flex;align-items:center;gap:.12em;background:none;border:0;padding:.1em .06em;margin:0;cursor:pointer;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:1em;line-height:1.22;color:var(--ink);text-align:left;letter-spacing:-.01em;text-decoration:none}
.mm-row.is-trail .mm-btn{color:var(--faint);font-weight:600}
.mm-row .mm-back{width:0;overflow:hidden;opacity:0;display:inline-flex;align-items:center;color:var(--faint);transition:width .3s var(--ease),opacity .3s var(--ease),margin .3s var(--ease)}
.mm-row.is-trail .mm-back{width:.92em;opacity:1;margin-right:.16em}
.mm-row .mm-caret{margin-left:.26em;color:var(--accent);opacity:.72;display:inline-flex}
.mm-row.is-trail .mm-caret{display:none}
.mm-row.leaving{opacity:0;pointer-events:none}
.mm-ch{display:inline-block;white-space:pre;opacity:0;filter:blur(5px);transform:scale(.42);transition:opacity .3s var(--ease),filter .3s var(--ease),transform .3s var(--ease)}
.mm-row.in .mm-ch{opacity:1;filter:blur(0);transform:none}
.mm-cta{margin-top:20px;flex:none}
.mm-close{position:absolute;top:26px;right:28px;z-index:2;background:none;border:0;color:var(--muted);cursor:pointer;padding:8px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.mm-close:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .nd-ch,.mm-ch{transition:none!important;opacity:1!important;filter:none!important;transform:none!important}
  .mm-row{transition:opacity .2s ease}
}

/* HERO (homepage) */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;padding:120px 0 64px;overflow:hidden}
.hero-bg{position:absolute;inset:-8% 0 0 0;z-index:0;will-change:transform}
.hero-bg img,.hero-bg video{width:100%;height:118%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(17,19,23,.72) 0%,rgba(17,19,23,.30) 34%,rgba(17,19,23,.55) 72%,rgba(17,19,23,.96) 100%),linear-gradient(90deg,rgba(17,19,23,.86) 0%,rgba(17,19,23,.36) 52%,rgba(17,19,23,.12) 100%)}
.hero-in{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero-in > *{min-width:0}
.hero h1{font-size:clamp(33px,4.6vw,58px);font-weight:900;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--accent-deep)}
.hero-sub{margin-top:22px;font-size:19px;color:var(--ink);max-width:44ch;opacity:.92}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-rating{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(23,27,33,.55);backdrop-filter:blur(8px);transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s}
a.hero-rating:hover,a.hero-rating:focus-visible{transform:translateY(-2px);border-color:var(--accent);background:rgba(23,27,33,.75)}
.hero-rating .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.hero-rating .rtxt{font-family:"Archivo";font-weight:700;font-size:14px}
.hero-rating .rtxt b{color:var(--ink)}
.hero-rating .rtxt span{color:var(--muted);font-weight:600}

.lead-card{background:rgba(23,27,33,.72);backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--line-strong);border-radius:22px;padding:28px;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.lead-card h3{font-size:22px;font-weight:800}
.lead-card .lc-sub{font-size:14px;color:var(--muted);margin-top:4px}
.field{margin-top:14px}
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:#14171c;border:1px solid var(--line-strong);color:var(--ink);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:#aab4c2;opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(157,177,198,.28)}
.lc-note{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--bg-2);border-top:1px solid var(--line-strong);padding:18px 0}
.cookie-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cookie-in p{font-size:14px;color:var(--muted);max-width:64ch}
.cookie-in a{color:var(--accent);text-decoration:underline}
.cookie-in .btn{padding:11px 22px;font-size:14px;min-height:auto;flex:none}
@media (max-width:640px){.cookie-in{flex-direction:column;align-items:stretch;text-align:center}}
.field.err input,.field.err textarea{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.field-err{margin-top:6px;font-size:12.5px;color:#e5484d;min-height:15px}
.btn[disabled]{opacity:.7;cursor:not-allowed;transform:none!important}
.form-success{text-align:center;padding:6px 4px}
.form-success .fs-check{width:52px;height:52px;margin:0 auto 18px;color:var(--success);display:block}
.form-success h3{font-size:22px;font-weight:800}
.form-success p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.55}
.form-success .btn{margin-top:22px}
.form-success.align-left{text-align:left}
.form-success.align-left .fs-check{margin:0 0 18px}

/* TRUST STRIP */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.trust-in{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;padding:22px 0}
.trust-item{display:flex;align-items:center;gap:10px;font-family:"Archivo";font-weight:600;font-size:14.5px;letter-spacing:.02em;color:var(--muted)}
.trust-item svg{color:var(--accent);flex:none}

/* SECTION SHELL */
/* Vertical rhythm tightened per client (2026-09-11): ~half the old padding so sections flow without big empty gaps. */
section.block{padding:60px 0;position:relative}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(30px,4.2vw,50px);margin-top:14px}
.sec-head p{margin-top:16px;color:var(--muted);font-size:18px;max-width:52ch}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* Title left, body right — kills the dead space under a heading (client req, image #10). */
.sec-head.split{max-width:none;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.sec-head.split h2{margin-top:10px}
.sec-head.split p{margin-top:0;max-width:52ch}
/* align-items:end used to let a multi-line paragraph's top float above a single-line title (client
   2026-09-25: "subtitle cannot render above the title, anywhere"). Top-aligned now; these two sections'
   paragraphs get a small top offset so they land level with the h2, not the eyebrow above it. */
#social .sec-head.split p{margin-top:24px}
/* Section-header CTA: paragraph + button stacked in the right column (client 2026-09-11). */
.sh-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sh-side p{max-width:52ch}
.sh-side .btn{flex:none;white-space:nowrap}
/* Section-header CTA aligned to the right on laptop. */
.sec-head.split .sh-cta{justify-self:end}
@media(max-width:900px){.sec-head.split{grid-template-columns:1fr;gap:16px;align-items:start}.sh-side{gap:14px}
  /* On mobile the split collapses to one column; keep the CTA left-aligned under the heading instead of
     hanging off the right edge (was an inline justify-self:end that stayed put — client report 2026-09-12). */
  .sec-head.split .sh-cta{justify-self:start}}
.reveal{opacity:0;transform:translateY(26px)}
.is-in .reveal,.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* PAGE HERO (subpages) — compacted per client (2026-09-11): keep the title + mini description but shrink the
   header dramatically so the actual page content/resource is visible right away (no huge empty header). */
.page-hero{position:relative;padding:84px 0 14px;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero .ph-bg{position:absolute;inset:0;z-index:0}
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover}
.page-hero .ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,23,.55) 0%,rgba(17,19,23,.86) 100%)}
.page-hero.no-media{background:var(--bg-2)}
.page-hero-in{position:relative;z-index:1;max-width:64ch}
.page-hero-in.centered{margin-left:auto;margin-right:auto;text-align:center}
.page-hero-in.centered .breadcrumb{justify-content:center}
.page-hero-in.centered p{margin-left:auto;margin-right:auto}
.page-hero h1{font-size:clamp(22px,2.8vw,32px)}
.page-hero p{margin-top:7px;color:var(--muted);font-size:14.5px;max-width:60ch}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);margin-bottom:7px}
.breadcrumb a{color:var(--faint)}
.breadcrumb a:hover{color:var(--muted)}

/* Flush subpage header (client 2026-09-11): remove the gray band + breadcrumb; keep only a short 2-3 word
   title on the same background as the page so the actual content is visible right away. One small muted
   supporting line carries the SEO copy. */
.page-hero.flush{background:transparent;border-bottom:0;overflow:visible;padding:124px 0 0}
/* Title left, subtitle right next to it on a SINGLE line (laptop), vertically centered/level. Extra top
   space gives the header room to breathe (client 2026-09-11: "5 ticks down", one-line subtitle). */
.page-hero.flush .page-hero-in{max-width:var(--maxw);display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.page-hero.flush h1{font-size:clamp(30px,4vw,46px);margin:0;line-height:1.02;flex:0 0 auto}
.page-hero.flush .ph-sub{margin:0;color:var(--muted);font-size:15px;line-height:1.5;flex:1 1 auto;max-width:none}
.page-hero.flush .ph-sub b{color:var(--ink);font-weight:700}
@media(max-width:900px){.page-hero.flush{padding:96px 0 0}.page-hero.flush .page-hero-in{flex-direction:column;align-items:flex-start;gap:8px}.page-hero.flush .ph-sub{flex-basis:auto}}

/* SERVICES bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:16px;margin-top:44px}
.tile{position:relative;border-radius:var(--r-media);overflow:hidden;border:1px solid var(--line);background:var(--bg-3);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:transform .4s var(--ease),border-color .3s}
.tile:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.tall{grid-row:span 2}
.tile.wide{grid-column:1 / -1}
/* Restructured bento (client 2026-09-11): Roof Repair + Insurance Claims stacked in the left column,
   Gutters/Tile/Metal fills the right as a 2x2 block, height-matched to the two stacked cards. */
@media(min-width:1001px){
  .tile.svc-repair{grid-column:1;grid-row:3}
  .tile.svc-insurance{grid-column:1;grid-row:4}
  .tile.svc-gutters{grid-column:2 / 4;grid-row:3 / 5}
}
.tile.svc-gutters h3{font-size:27px}
/* Per-card photo rotation: first <img> is the always-painted base layer; JS appends the rest as
   overlays that cross-fade in/out on top (client "photos keep rotating related to the card"). */
.ph.ph-rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease,transform .6s var(--ease)}
.ph.ph-rot img:first-child,.ph.ph-rot img.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.ph.ph-rot img{transition:none}.ph.ph-rot img:not(:first-child){display:none}}
.tile .ph{position:absolute;inset:0;z-index:0}
.tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover .ph img{transform:scale(1.06)}
.tile .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,23,.10) 0%,rgba(17,19,23,.30) 45%,rgba(17,19,23,.92) 100%)}
.tile-body{position:relative;z-index:1}
.tile h3{font-size:22px;font-weight:800}
.tile.big h3{font-size:30px}
.tile p{margin-top:8px;font-size:14.5px;color:var(--muted);max-width:34ch}
.tile .kick{font-family:"Archivo";font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:auto}

/* 3-column services (client 2026-09-11): Roof Replacement (largest), Roof Repair, Specialty Materials.
   Reuses .tile styling; just a cleaner grid than the old 5-tile bento. */
.svc3{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px;margin-top:36px}
.svc3 .tile{min-height:388px}
.svc3 .svc-lg h3{font-size:30px}
@media(min-width:901px) and (max-width:1120px){.svc3{grid-template-columns:1fr 1fr}.svc3 .svc-lg{grid-column:1 / -1;min-height:320px}}
@media(max-width:900px){.svc3{grid-template-columns:1fr}.svc3 .tile{min-height:300px}}

/* ---- What We Do compacting + hover-reveal + gold "Most requested" (client Sep 14) ---- */
.whatwedo .svc3{margin-top:26px}
.whatwedo .svc3 .tile,.whatwedo .svc3 .svc-lg{min-height:300px}
@media(min-width:901px){.whatwedo .sec-head.split{align-items:center}}
/* Gold, larger "Most requested / Most popular" kick — reads like a popular pick, not neon.
   Uses .kick.kick-gold so it out-specifies ".tile .kick" (which is steel/accent). A slow gold shine
   sweeps across it, echoing the nav-logo glimmer (client Sep 18). */
.kick.kick-gold{color:var(--gold);font-size:13px;letter-spacing:.14em;position:relative;overflow:hidden;display:inline-block}
.svc-lg .kick.kick-gold{font-size:13.5px}
.kick.kick-gold::after{content:"";position:absolute;top:0;left:-160%;width:60%;height:100%;pointer-events:none;transform:skewX(-18deg);background:linear-gradient(100deg,transparent 0,rgba(255,245,205,0) 40%,rgba(255,244,200,.92) 50%,rgba(255,245,205,0) 60%,transparent 100%);animation:shineGold 5s linear infinite}
@keyframes shineGold{0%{left:-160%}18%{left:160%}100%{left:160%}}
@media(prefers-reduced-motion:reduce){.kick.kick-gold::after{display:none}}
/* Hover-reveal the tile paragraph on hover-capable devices; touch keeps it visible.
   The paragraph collapses to zero height when idle so the title sits flush at the BOTTOM of the tile
   (clean view of the photo); on hover it expands upward and lifts the title to make room (client Sep 18). */
@media(hover:hover){
  .svc3.hoverbody .tile p{max-height:0;margin-top:0;opacity:0;overflow:hidden;transform:translateY(6px);transition:max-height .45s var(--ease),margin-top .45s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)}
  .svc3.hoverbody .tile:hover p,.svc3.hoverbody .tile:focus-within p{max-height:9em;margin-top:8px;opacity:1;transform:none}
}

/* ---- SERVICES section — six animated icon tiles (client Sep 14) ---- */
.svc6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.svc-tile{position:relative;border:1px solid var(--line);border-radius:var(--r-media);background:var(--bg-2);padding:24px 24px 22px;min-height:188px;overflow:hidden;transition:transform .4s var(--ease),border-color .3s,background .3s}
.svc-tile:hover{transform:translateY(-5px);border-color:var(--line-strong);background:var(--bg-3)}
.svc-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:rgba(157,177,198,.09);border:1px solid var(--line);margin-bottom:15px}
.svc-ic svg{width:26px;height:26px}
.svc-tile h3{font-size:20px;font-weight:800}
.svc-tile p{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.5;max-width:34ch}
.svc-tile .kick-gold{position:absolute;top:20px;right:20px;margin:0;font-family:"Archivo";font-weight:700;text-transform:uppercase}
.tag-soon{position:absolute;top:20px;right:20px;font-family:"Archivo";font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px}
@media(hover:hover){
  .svc6.hoverbody .svc-tile p{opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .svc6.hoverbody .svc-tile:hover p,.svc6.hoverbody .svc-tile:focus-within p{opacity:1;transform:none}
}
/* Subtle staggered idle float on the icons (client "animated: subtle move/bounce"); off for reduced motion. */
@media(prefers-reduced-motion:no-preference){
  .svc-ic{animation:svcFloat 5s var(--ease) infinite}
  .svc-tile:nth-child(2) .svc-ic{animation-delay:.5s}
  .svc-tile:nth-child(3) .svc-ic{animation-delay:1s}
  .svc-tile:nth-child(4) .svc-ic{animation-delay:1.5s}
  .svc-tile:nth-child(5) .svc-ic{animation-delay:2s}
  .svc-tile:nth-child(6) .svc-ic{animation-delay:2.5s}
  @keyframes svcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
}
@media(max-width:900px){.svc6{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc6{grid-template-columns:1fr}}
/* City service-area pages list four services — a single balanced row on desktop. */
.svc6.svc4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.svc6.svc4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc6.svc4{grid-template-columns:1fr}}

/* Services as PHOTO tiles (client Sep 18): drop the icon tiles for real service photos with the
   same What-We-Do treatment — title anchored at the bottom, description hover-revealed beneath it.
   Reuses the proven .tile/.ph/.tile-body component; svc6-photo just resizes and re-scopes the reveal. */
.svc6-photo .tile{min-height:306px}
.svc6-photo .tile h3{font-size:23px}
.svc6-photo .tile .kick.kick-gold{margin-bottom:6px}
.svc6-photo .tag-soon{z-index:2;color:var(--ink);border-color:rgba(255,255,255,.34);background:rgba(17,19,23,.55);backdrop-filter:blur(6px)}
@media(hover:hover){
  .svc6-photo.hoverbody .tile p{max-height:0;margin-top:0;opacity:0;overflow:hidden;transform:translateY(6px);transition:max-height .45s var(--ease),margin-top .45s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)}
  .svc6-photo.hoverbody .tile:hover p,.svc6-photo.hoverbody .tile:focus-within p{max-height:9em;margin-top:8px;opacity:1;transform:none}
}
@media(max-width:900px){.svc6-photo .tile{min-height:260px}}

/* Services as 3D-render ICON tiles (client 2026-09-21, Erik's reference): dark card, centered render
   (not full-bleed photo), title always visible, description hover-revealed. Reuses .tile/.ph/.tile-body. */
.svc6-icon .tile{justify-content:flex-start;min-height:160px;padding:14px 16px 12px}
.svc6-icon .tile .ph{position:relative;inset:auto;flex:1;display:flex;align-items:center;justify-content:center;min-height:64px}
.svc6-icon .tile .ph::after{content:none}
.svc6-icon .tile .ph img{width:100%;max-width:104px;height:auto;object-fit:contain;filter:drop-shadow(0 14px 28px rgba(0,0,0,.5));transition:transform .5s var(--ease)}
.svc6-icon .tile:hover .ph img{transform:scale(1.06) translateY(-4px)}
.svc6-icon .tile-body{margin-top:6px}
.svc6-icon .tile h3{font-size:18px}
.svc6-icon .tile p{margin-top:4px;font-size:13px}
#services .svc6{margin-top:18px;gap:10px}
#services .spec-scroll{margin-top:10px}
#services .spec-card{width:290px;height:190px}
.svc6-icon .tag-pop{position:absolute;top:18px;right:18px;z-index:2;margin:0}
.svc6-icon .tag-soon{z-index:2}
@media(hover:hover){
  .svc6-icon.hoverbody .tile p{max-height:0;margin-top:0;opacity:0;overflow:hidden;transform:translateY(6px);transition:max-height .45s var(--ease),margin-top .45s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)}
  .svc6-icon.hoverbody .tile:hover p,.svc6-icon.hoverbody .tile:focus-within p{max-height:9em;margin-top:8px;opacity:1;transform:none}
}
@media(max-width:900px){.svc6-icon .tile{min-height:210px}}

/* "Where are you in the process?" picker — engaging CTA that routes to booking (client 2026-09-11). */
.proc-pick{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-2)}
.proc-pick .pp-q{font-family:"Archivo";font-weight:800;font-size:16px;margin-right:2px}
.proc-pick .chip{display:inline-flex;align-items:center;padding:9px 17px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;color:var(--ink);transition:border-color .2s,color .2s,transform .2s,background .2s}
.proc-pick .chip:hover,.proc-pick .chip:focus-visible{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.proc-pick .pp-call{background:var(--accent);border-color:var(--accent);color:#0b0d10;font-weight:700}
.proc-pick .pp-call:hover{filter:brightness(1.06);color:#0b0d10}
@media(max-width:640px){.proc-pick{flex-direction:column;align-items:stretch}.proc-pick .chip{justify-content:center}}

/* INSURANCE CLAIMS — dedicated section between How it works and The next steps (client 2026-09-11):
   why to work with Prestige on the claim, not just take a cash job. */
.ins-claims{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center;margin-top:8px}
.ic-copy h2{font-size:clamp(26px,3.4vw,40px);margin-top:12px}
.ic-copy p{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.6;max-width:48ch}
.ic-copy .btn{margin-top:22px}
.ic-points{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ic-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-2);padding:18px 18px 20px}
.ic-card .ic{color:var(--accent);display:inline-flex}
.ic-card h4{font-family:"Archivo";font-weight:800;font-size:16px;line-height:1.2;margin:11px 0 0}
.ic-card p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:none}
@media(max-width:900px){.ins-claims{grid-template-columns:1fr;gap:26px}}
@media(max-width:520px){.ic-points{grid-template-columns:1fr}}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:12px 8px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{font-family:"Archivo";font-weight:900;font-size:52px;line-height:1;color:var(--ink)}
.stat .n .u{color:var(--accent)}
.stat .l{margin-top:10px;font-size:13.5px;letter-spacing:.03em;color:var(--muted)}

/* PROCESS */
.proc{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:stretch}
/* Image is absolutely filled so its portrait aspect ratio no longer inflates the section height;
   the row height is driven by the (compact) copy column, and the image cover-crops to match — symmetry. */
.proc-media{position:relative;border-radius:var(--r-media);overflow:hidden;border:1px solid var(--line);min-height:0;height:100%}
.proc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proc-copy{display:flex;flex-direction:column;justify-content:flex-start}
/* Compact process section (client 2026-09-11): shorter heading/steps so the whole thing fits in one view
   and the image (which cover-crops to the copy height) stays symmetrical and ~60% of its old height. */
#process .sec-head h2{font-size:clamp(23px,2.5vw,31px)}
#process .sec-head p{margin-top:7px;font-size:14.5px;max-width:50ch}
#process .steps{gap:8px}
#process .step{padding:11px 20px;grid-template-columns:42px 1fr;gap:14px;align-items:center}
#process .step .idx{font-size:24px}
#process .step h3{font-size:17.5px}
#process .step p{margin-top:2px;font-size:13.5px;line-height:1.4}
.steps{display:flex;flex-direction:column;gap:10px}
.step{border:1px solid var(--line);border-radius:var(--r-card);padding:14px 22px;background:var(--bg-2);display:grid;grid-template-columns:50px 1fr;gap:18px;align-items:start;transition:border-color .3s,transform .3s}
.step:hover{border-color:var(--line-strong);transform:translateX(4px)}
.step .idx{font-family:"Archivo";font-weight:900;font-size:30px;color:var(--accent);line-height:1}
.step h3{font-size:20px;font-weight:800}
.step p{margin-top:5px;color:var(--muted);font-size:14.5px;line-height:1.5}

/* GALLERY */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px;margin-top:44px}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-media);border:1px solid var(--line)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.07)}
.gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(17,19,23,.55));opacity:0;transition:opacity .4s}
.gal figure:hover::after{opacity:1}
.gal figcaption{position:absolute;left:16px;bottom:14px;z-index:2;font-family:"Archivo";font-weight:600;font-size:13px;letter-spacing:.02em;opacity:0;transform:translateY(6px);transition:.4s var(--ease)}
.gal figure:hover figcaption{opacity:1;transform:none}
.g-wide{grid-column:span 2}
.g-tall{grid-row:span 2}

/* ============ GOOGLE REVIEWS ============ */
.rev-top{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:stretch;margin-top:44px}
.gcard{border:1px solid var(--line-strong);border-radius:var(--r-media);background:linear-gradient(150deg,#1e232b,#14171c);padding:36px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.gcard .glogo{display:flex;align-items:center;justify-content:center;gap:10px;font-family:"Archivo";font-weight:700;font-size:15px;color:var(--muted)}
.gcard .score{font-family:"Archivo";font-weight:900;font-size:74px;line-height:1;margin:14px 0 6px}
.gcard .stars{color:var(--gold);font-size:26px;letter-spacing:4px}
.gcard .count{margin-top:10px;color:var(--muted);font-size:15px}
.gcard .count b{color:var(--ink)}
.gcard .gbtns{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.rev-feature{position:relative;border-radius:var(--r-media);overflow:hidden;border:1px solid var(--line);padding:44px;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px}
.rev-feature .ph{position:absolute;inset:0;z-index:0}
.rev-feature .ph img{width:100%;height:100%;object-fit:cover}
.rev-feature .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,23,.45),rgba(17,19,23,.94))}
.rev-feature .body{position:relative;z-index:1}
.rev-feature .stars{color:var(--gold);font-size:16px;letter-spacing:3px}
.rev-feature q{display:block;quotes:none;font-family:"Archivo";font-weight:600;font-size:23px;line-height:1.34;margin:16px 0 18px;max-width:40ch}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.rev-card{transition:opacity .45s ease,transform .55s var(--ease)}
.rev-card.rc-out{opacity:0;transform:translateY(-14px)}
.rev-card.rc-pre{opacity:0;transform:translateY(18px);transition:none}
.rev-card{border:1px solid var(--line);border-radius:var(--r-card);padding:24px;background:var(--bg-2);display:flex;flex-direction:column}
.rev-card .rc-head{display:flex;align-items:center;gap:12px}
.rev-card .stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-top:14px}
.rev-card q{quotes:none;display:block;font-size:15px;line-height:1.55;margin:10px 0 0;color:var(--ink)}
.who{display:flex;align-items:center;gap:12px}
.who .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,#8b9bad,#39434f);display:flex;align-items:center;justify-content:center;font-family:"Archivo";font-weight:800;font-size:15px;color:#fff;flex:none}
.who .nm{font-family:"Archivo";font-weight:700;font-size:14.5px}
.who .rl{font-size:12.5px;color:var(--faint)}
.rc-g{margin-left:auto;flex:none}
/* ============ INSTALL PROCESS — sticky stage video + scrolling step stack (client 2026-09-21) ============
   Left column = a plain scrolling stack of step blocks (number + heading + paragraph). Right column = a
   sticky video panel that swaps to the matching real drone clip as each step scrolls to center, and keeps
   looping (muted) when the reader stops. Replaces the old SVG roof-build diagram + per-step thumbnails. */
.install-grid{display:grid;grid-template-columns:.92fr 1.18fr;grid-template-areas:"head viz" "steps viz";gap:8px 44px;align-items:start;margin-top:22px}
.install-head{grid-area:head;max-width:none}
.install-head p{max-width:36ch}
/* Gold highlight for a key word/phrase inside a heading (client 2026-09-25: make "layer by layer" pop). */
.gold-ink{color:var(--gold)}
/* Subtle "owned footage" credit under the sticky video, hidden-in-plain-sight per client (2026-09-25):
   "not standing out... just hidden right underneath it." */
.viz-credit{margin-top:10px;font-family:"Archivo";font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,244,247,.28);text-align:center}
.install-viz{grid-area:viz;position:sticky;top:160px}
.install-stages{grid-area:steps}
.viz-card{position:relative;border:1px solid var(--line-strong);border-radius:var(--r-media);background:radial-gradient(120% 120% at 24% 8%,#232c38 0%,#12151b 78%);padding:20px;overflow:hidden}
.viz-card::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 45% at 72% 16%,rgba(62,114,168,.20),transparent 70%);pointer-events:none}
.viz-card > *{position:relative;z-index:1}
.viz-card .viz-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.viz-card .viz-step{font-family:"Archivo";font-weight:900;font-size:15px;color:var(--accent)}
.viz-card .viz-count{font-size:12.5px;color:var(--faint)}
.viz-stage{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d0f13;border:1px solid var(--line)}
.viz-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease)}
.viz-vid.is-on{opacity:1}
.viz-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(13,15,19,.6));pointer-events:none}
.viz-tag{position:absolute;left:14px;bottom:12px;z-index:2;font-family:"Archivo";font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#f2f4f7;background:rgba(17,19,23,.6);border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;backdrop-filter:blur(6px)}
/* Stage steppers on the video edges — shown on every viewport (client 2026-09-28: arrows work on desktop
   too, not just mobile). .viz-stage is already position:relative, so these anchor to it. */
.viz-nav{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid var(--line-strong);background:rgba(17,19,23,.62);color:#f2f4f7;backdrop-filter:blur(6px);cursor:pointer;-webkit-tap-highlight-color:transparent}
.viz-nav:hover,.viz-nav:active{background:rgba(17,19,23,.88)}
.viz-prev{left:10px}
.viz-next{right:10px}
.viz-card .viz-title{font-size:19px;font-weight:800;margin-top:16px;min-height:1.4em}
.viz-bar{margin-top:14px;height:6px;border-radius:999px;background:var(--line-strong);overflow:hidden}
.viz-bar i{display:block;height:100%;width:16.6%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));transition:width .5s var(--ease)}
/* Step stack: inactive steps dim, the centered/active one lifts to full contrast.
   Client 2026-09-28: swap the visual weight — the "01 · Stage Name" kicker is now the large headline-size
   text, and the descriptive h3 becomes the small subheading (previously the reverse). Also tightened the
   per-step padding so consecutive steps don't leave a large dead gap. */
.install-stages{display:flex;flex-direction:column}
.install-stage{padding:2vh 0;opacity:.4;transition:opacity .45s var(--ease)}
.install-stage:first-child{padding-top:1vh}
.install-stage:last-child{padding-bottom:2vh}
.install-stage.active{opacity:1}
.install-stage .st-n{font-family:"Archivo";font-weight:900;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;line-height:1.15;color:#fff}
.install-stage h3{font-size:15px;font-weight:700;letter-spacing:.02em;margin-top:8px;line-height:1.4;color:var(--muted)}
.install-stage p{margin-top:8px;color:var(--muted);font-size:18px;line-height:1.65;max-width:46ch}
@media(prefers-reduced-motion:reduce){.install-stage{opacity:1}}
@media(max-width:900px){
  .install-grid{grid-template-columns:1fr;grid-template-areas:"head" "viz" "steps";gap:0}
  /* Mobile fix (client 2026-09-26): the video was position:sticky and overlapped the scrolling step
     text. On phones it now scrolls inline above the steps, and steps stay full-opacity (the dim-inactive
     effect is a desktop scroll affordance that just read as glitchy when the card overlapped the text). */
  .install-viz{position:static;margin-bottom:18px}
  .install-head p{max-width:none}
  .install-stage{padding:1.5vh 0;opacity:1}
  .install-stage:first-child{padding-top:2vh}
  /* Mobile stepper (client 2026-10-02): the arrows used to scroll the page down to the step text, pulling
     the video off screen. Now only the ACTIVE step's text shows, directly under the video, and the arrows
     swap video + text in place so the reader can keep tapping through the clips. */
  .install-stage{display:none;padding:4px 0 0}
  .install-stage.active{display:block}
  .viz-card .viz-title{display:none}
}

/* Reviews page — testimonial video tile + featured (client PDF p32) */
/* LEFT = tall vertical testimonial video; RIGHT = featured review + Google card stacked, height-matched. */
.rev-hero{display:grid;grid-template-columns:.82fr 1.18fr;gap:22px;margin-top:36px;align-items:stretch}
.rev-video{position:relative;border-radius:var(--r-media);overflow:hidden;border:1px solid var(--line-strong);min-height:560px;display:flex;align-items:flex-end;padding:28px;cursor:pointer}
.rev-video img,.rev-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rev-video .play{border:0}
.rev-video.playing .play,.rev-video.playing .rv-cap,.rev-video.playing .rv-badge,.rev-video.playing::after{opacity:0;pointer-events:none;transition:opacity .35s ease}
.rev-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,23,.28),rgba(17,19,23,.9))}
.rev-video .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:rgba(242,244,247,.94);color:#14161a;display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .25s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.rev-video:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.rev-video .rv-cap{position:relative;z-index:2}
.rev-video .rv-cap .k{font-family:"Archivo";font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.rev-video .rv-cap h3{font-size:22px;font-weight:800;margin-top:8px}
.rev-video .rv-badge{position:absolute;top:20px;left:20px;z-index:2;background:rgba(17,19,23,.7);border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;font-size:12px;color:var(--muted);backdrop-filter:blur(6px)}
/* Persistent speaker/mute toggle — stays visible even while playing (not faded by .playing) so sound is
   always one tap away. Starts muted (slashed-speaker icon); .unmuted swaps to the sound-waves icon. */
.rev-video .rv-mute{position:absolute;bottom:20px;right:20px;z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(17,19,23,.6);backdrop-filter:blur(6px);color:#f2f4f7;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.rev-video .rv-mute:hover{transform:scale(1.08);background:rgba(17,19,23,.82)}
.rev-video .rv-mute .ic-unmuted{display:none}
.rev-video.unmuted .rv-mute .ic-muted{display:none}
.rev-video.unmuted .rv-mute .ic-unmuted{display:block}
.rev-right{display:flex;flex-direction:column;gap:14px}
.rev-right .rev-feature{min-height:300px;flex:1}
/* Compact Google card (now stacked under the featured review on the right). */
.rev-right .gcard{padding:22px 24px;text-align:left;flex:none}
.rev-right .gcard .glogo{justify-content:flex-start}
.rev-right .gcard .gc-row{display:flex;align-items:center;gap:16px;margin:12px 0 4px}
.rev-right .gcard .score{font-size:46px;line-height:1;margin:0}
.rev-right .gcard .gc-rowtx{text-align:left}
.rev-right .gcard .gc-rowtx .stars{font-size:20px;letter-spacing:3px}
.rev-right .gcard .count{margin-top:4px}
.rev-right .gcard .gbtns{margin-top:16px;flex-direction:row;flex-wrap:wrap;gap:10px}
.rev-right .gcard .gbtns .btn{flex:1;min-width:150px;padding:12px 18px;font-size:14px;min-height:auto}
/* Featured review: fade the text out/in on each rotation (client "transparency effect"). */
.rev-feature .body{transition:opacity .55s ease}
.rev-feature.fading .body{opacity:0}
.rev-feature .fr-gicon{position:relative;z-index:1;display:inline-flex;margin-bottom:12px}
.rev-feat-label{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rev-feat-label > span:first-child{font-family:"Archivo";font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.rev-feat-live{font-size:11.5px;color:var(--faint);display:inline-flex;align-items:center;gap:7px}
.rev-feat-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(47,180,99,.6);animation:liveDot 2.4s ease-out infinite}
@keyframes liveDot{0%{box-shadow:0 0 0 0 rgba(47,180,99,.6)}70%,100%{box-shadow:0 0 0 7px rgba(47,180,99,0)}}
@media(prefers-reduced-motion:reduce){.rev-feat-live::before{animation:none}}
@media(max-width:900px){.rev-hero{grid-template-columns:1fr}.rev-video{min-height:340px}}

/* Landing-page reviews teaser only (client 2026-09-25): shrunk so the marquee signal-row below is reliably
   visible in one viewport. Scoped to #reviews so the standalone reviews.html page is untouched. Quote is
   line-clamped so a long review can no longer grow the card and push the marquee out of view. */
#reviews .rev-hero{margin-top:10px}
#reviews .rev-video{min-height:300px}
#reviews .rev-right{gap:8px}
#reviews .rev-right .rev-feature{min-height:190px;padding:18px}
#reviews .rev-feature .fr-gicon{margin-bottom:4px}
#reviews .rev-feature q{font-size:16px;line-height:1.4;margin:5px 0 7px;max-width:none;display:block;overflow:visible}
#reviews .rev-right .gcard{padding:10px 14px}
#reviews .rev-right .gcard .score{font-size:28px}
#reviews .rev-right .gcard .gc-row{margin:6px 0 2px}
#reviews .rev-right .gcard .gbtns{margin-top:6px}
#reviews .rev-right .gcard .gbtns .btn{padding:8px 16px}
#reviews .marquee{margin-top:16px;margin-bottom:16px}

.marquee{margin-top:26px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-row{display:flex;gap:14px;width:max-content;animation:scrollx 42s linear infinite}
.marquee:hover .marquee-row{animation-play-state:paused}
.chip{border:1px solid var(--line);border-radius:999px;padding:12px 20px;background:var(--bg-3);font-size:14px;color:var(--muted);white-space:nowrap}
.chip b{color:var(--gold)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ TEAM (full-bleed photo + click-to-open bio modal, client 2026-09-28) ============
   Reverted from the hover-drops-bio-inline design: cards now just "pop" on hover (same lift as the
   Services tiles) with name/role overlaid on the photo and a "click to read bio" hint; clicking opens
   a modal with the full bio + socials, instead of the bio staying stuck open in the card. */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
.team-card{position:relative;display:block;font-family:inherit;border:1px solid var(--line);border-radius:0;background:var(--bg-2);overflow:hidden;cursor:pointer;padding:0;text-align:left;transition:transform .4s var(--ease),border-color .3s,background .3s}
.team-card:hover,.team-card:focus-visible{transform:translateY(-5px);border-color:var(--accent);background:var(--bg-3)}
.team-card.is-static{cursor:default;line-height:normal}
.team-card.is-static:hover{transform:none;border-color:var(--line);background:var(--bg-2)}
.team-card.is-static .tc-hint{visibility:hidden}
.team-card .tc-photo{position:relative;width:100%;overflow:hidden;background:#0c0e11;line-height:0}
.team-card .tc-photo img{width:100%;height:auto;display:block}
.team-card .tc-overlay{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;background:linear-gradient(180deg,transparent,rgba(10,11,14,.92) 76%)}
.team-card h3{font-size:16px;font-weight:800;color:#fff}
.team-card .role{margin-top:2px;font-size:11.5px;color:var(--accent);font-family:"Archivo";font-weight:600;letter-spacing:.02em}
.team-card .tc-hint{display:block;margin-top:7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,244,247,.55);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.team-card:hover .tc-hint,.team-card:focus-visible .tc-hint{opacity:1;transform:none}
@media(hover:none){.team-card .tc-hint{opacity:1;transform:none}}
@media(max-width:1080px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.team-grid{grid-template-columns:1fr}}
/* Newer members under the certifications strip (client 2026-10-07): same 5/3/2/1-column grid as the row above,
   filled left to right (a lone card sits under Johnathan); a 6th member wraps to a new row below. */
.team-grid-more{margin-top:28px}

/* Bio modal (click a team card to open) */
.tc-modal-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,9,11,.72);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.tc-modal-backdrop.is-open{opacity:1;pointer-events:auto}
.tc-modal{position:relative;width:100%;max-width:560px;max-height:86vh;overflow-y:auto;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-media);transform:translateY(16px) scale(.98);transition:transform .3s var(--ease)}
.tc-modal-backdrop.is-open .tc-modal{transform:none}
@media(min-width:640px){.tc-modal{flex-direction:row}}
.tc-modal-photo{flex:none;width:100%;max-height:280px;overflow:hidden;line-height:0;background:#0c0e11}
@media(min-width:640px){.tc-modal-photo{width:42%;max-height:none}}
.tc-modal-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tc-modal-body{padding:26px 28px 28px;flex:1}
.tc-modal-body h3{font-size:22px;font-weight:800;color:#fff}
.tc-modal-body .role{margin-top:2px;font-size:13px;color:var(--accent);font-weight:600;font-family:"Archivo"}
.tc-modal-body p{margin-top:14px;font-size:14.5px;line-height:1.6;color:rgba(242,244,247,.82)}
.tc-modal-socials{margin-top:20px;display:flex;gap:10px}
.tc-modal-socials a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line-strong);color:#f2f4f7;transition:border-color .3s,color .3s}
.tc-modal-socials a:hover{border-color:var(--accent);color:var(--accent)}
.tc-modal-socials a[hidden]{display:none}
.tc-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line-strong);background:rgba(17,19,23,.7);color:#f2f4f7;cursor:pointer;z-index:1}
.tc-modal-close:hover{border-color:var(--accent);color:var(--accent)}

/* Team — Our Goal / Our Approach + richer member modal (client PDF p16-17) */
/* Client call 2026-10-09: centered blocks (title on one line, text below) over a dimmed up-close install clip,
   split by a short centered rule. */
.ethos-sec{background:var(--bg-2)}
.ethos-block{position:relative;overflow:hidden;isolation:isolate}
.ethos-bg{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:cover;z-index:-2;filter:blur(1.5px) saturate(.9)}
.ethos-block::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,19,23,.84),rgba(17,19,23,.74) 50%,rgba(17,19,23,.86))}
.ethos-block .ethos-in{padding-top:clamp(56px,9vh,84px);padding-bottom:clamp(56px,9vh,84px);text-align:center}
.ethos-in .eyebrow{margin-bottom:12px}
.ethos-in h2{font-size:clamp(22px,2.4vw,34px);text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.ethos-in .ebody{max-width:880px;margin:22px auto 0}
.ethos-in .ebody p{color:rgba(242,244,247,.92);font-size:16.5px;line-height:1.7;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.ethos-in .ebody p + p{margin-top:14px}
.ethos-rule{height:2px;width:min(520px,60%);margin:28px auto;background:linear-gradient(90deg,transparent,rgba(251,188,4,.9),transparent)}
@media(max-width:900px){.ethos-in .ebody p{font-size:15.5px}}
@media(prefers-reduced-motion:reduce){.ethos-bg{display:none}}
.tc-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tc-meta span{font-family:"Archivo";font-weight:600;font-size:12.5px;color:var(--muted);background:var(--bg-3);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.tc-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.tc-actions .btn{padding:11px 18px;font-size:14px;min-height:44px}

/* ============ FAQ ============ */
.faq-list{margin:44px auto 0;display:flex;flex-direction:column;gap:12px;max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-2);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;background:none;border:0;color:var(--ink);font-family:"Archivo";font-weight:700;font-size:16.5px;text-align:left;cursor:pointer}
.faq-q .icon{flex:none;color:var(--accent);transition:transform .3s var(--ease)}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a-in{padding:0 26px 24px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:70ch}
.faq-item.open .faq-a{max-height:400px}

/* ============ FINANCING ESTIMATOR ============ */
.finance-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:stretch;margin-top:44px}
.finance-form{border:1px solid var(--line-strong);border-radius:var(--r-media);background:var(--bg-2);padding:32px;display:flex;flex-direction:column}
.finance-note{margin-top:auto;padding-top:26px;font-size:12.5px;color:var(--faint);line-height:1.6}
.finance-form .field{margin-top:20px}
.finance-form .field:first-child{margin-top:0}
.range-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.range-row label{margin-bottom:0}
.range-row .rv{font-family:"Archivo";font-weight:800;color:var(--ink);font-size:15px}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:999px;background:var(--line-strong);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);cursor:pointer;border:3px solid var(--accent-deep)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);cursor:pointer;border:3px solid var(--accent-deep);border:0}
.term-toggle{display:flex;gap:8px;margin-top:8px}
.term-btn{flex:1;padding:11px 8px;border-radius:10px;border:1px solid var(--line-strong);background:#14171c;color:var(--muted);font-family:"Archivo";font-weight:700;font-size:14px;cursor:pointer;transition:.2s}
.term-btn.active{background:var(--ink);color:var(--cta-ink);border-color:var(--ink)}
.finance-result{border:1px solid var(--line-strong);border-radius:var(--r-media);background:linear-gradient(150deg,#1e232b,#14171c);padding:36px}
.fr-headline{text-align:center;padding-bottom:26px;border-bottom:1px solid var(--line)}
.fr-headline .k{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fr-headline .v{font-family:"Archivo";font-weight:900;font-size:56px;margin-top:8px}
.fr-headline .v .u{font-size:22px;color:var(--muted);font-weight:700}
.fr-rows{margin-top:26px;display:flex;flex-direction:column;gap:0}
.fr-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.fr-row:last-child{border-bottom:0}
.fr-row .k{color:var(--muted)}
.fr-row .v{font-family:"Archivo";font-weight:700}
.fr-disclaimer-outside{grid-column:1/-1;margin-top:4px;font-size:12.5px;color:var(--faint);line-height:1.6;text-align:center;max-width:70ch;margin-left:auto;margin-right:auto}

.fr-headline .v.is-green{color:var(--success)}
.lenders{margin-top:44px;text-align:center}
.lenders .eyebrow{display:block;margin-bottom:8px}
.lender-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:18px}
.lender-badge{border:1px dashed var(--line-strong);border-radius:12px;padding:18px 28px;color:var(--faint);font-family:"Archivo";font-weight:700;font-size:14px;background:var(--bg-2)}
.lender-badge--logo{border:1px solid var(--line-strong);background:#fff;padding:16px 26px;display:flex;align-items:center;justify-content:center}
.lender-badge--logo img{height:32px;width:auto;display:block}
.fin-cta{margin-top:44px;text-align:center}
.fin-cta .sub{margin-top:12px;color:var(--muted);font-size:14px}
.btn-success{background:var(--success);color:#08150d}
.btn-success:hover{background:#38c46f;transform:translateY(-2px)}
.btn-pulse{animation:btnPulse 2.4s ease-in-out infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 0 0 0 rgba(47,180,99,.5)}50%{box-shadow:0 0 0 15px rgba(47,180,99,0)}}
@media(prefers-reduced-motion:reduce){.btn-pulse{animation:none}}

/* ============ SOCIAL / BRAND BENTO (client PDF p25) ============ */
.sbento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;gap:10px;margin-top:12px}
/* Enlarged variant (client 2026-09-26): "Who we are" section has more vertical room after the
   title/paragraph were removed, so the same 4-col bento layout grows to fill it. */
.sbento-lg{grid-auto-rows:164px;gap:13px;margin-top:20px}
.sb{position:relative;border-radius:var(--r-media);overflow:hidden;border:1px solid var(--line);background:var(--bg-3);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;transition:transform .4s var(--ease),border-color .3s}
.sb:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.sb.tall{grid-row:span 2}
.sb.wide{grid-column:span 2}
.sb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sb:hover > img{transform:scale(1.06)}
.sb.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,23,.1) 40%,rgba(17,19,23,.88))}
.sb .sb-in{position:relative;z-index:2}
.sb .sb-in .k{font-family:"Archivo";font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sb .sb-in h4{font-family:"Archivo";font-weight:800;font-size:16px;margin-top:6px}
.sb .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(242,244,247,.92);color:#14161a;display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .25s var(--ease)}
.sb:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.sb-link{align-items:center;justify-content:center;text-align:center}
.sb-link .ic{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--ink);margin:0 auto 12px;transition:.25s}
.sb-link:hover .ic{border-color:var(--accent);color:var(--accent)}
.sb-link .lk{font-family:"Archivo";font-weight:800;font-size:15px}
.sb-link .h{font-size:12.5px;color:var(--muted);margin-top:3px}
.sb-brand{background:linear-gradient(150deg,#1e232b,#14171c);align-items:center;justify-content:center;text-align:center}
.sb-brand img{position:static;width:auto;height:40px;margin:0 auto 12px}
.sb-brand .slg{font-family:"Archivo";font-weight:700;font-size:13px;color:var(--muted);font-style:italic}
@media(max-width:900px){.sbento{grid-template-columns:repeat(2,1fr)}.sb.wide{grid-column:span 2}}
@media(max-width:560px){.sbento{grid-template-columns:1fr}.sb.wide,.sb.tall{grid-column:span 1;grid-row:span 1}}

/* ============ CAREERS (client PDF p35) ============ */
.file-field input[type=file]{padding:12px 14px;cursor:pointer}
.file-field input[type=file]::file-selector-button{margin-right:14px;padding:8px 16px;border-radius:8px;border:1px solid var(--line-strong);background:var(--bg-3);color:var(--ink);font-family:"Archivo";font-weight:700;font-size:13px;cursor:pointer}
.file-field .hint{margin-top:7px;font-size:12px;color:var(--faint)}
.careers-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin-top:44px}
.culture{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:232px;gap:14px}
.culture figure{margin:0;position:relative;border-radius:var(--r-media);overflow:hidden;border:1px solid var(--line)}
.culture figure.tall{grid-row:span 1}
.culture img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.culture figure:hover img{transform:scale(1.06)}
.culture figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(17,19,23,.86))}
.culture figcaption{position:absolute;left:16px;bottom:14px;z-index:2;font-family:"Archivo";font-weight:700;font-size:13.5px}
.culture .badge{position:absolute;top:12px;left:12px;z-index:2;background:rgba(17,19,23,.7);border:1px solid var(--line-strong);border-radius:999px;padding:4px 11px;font-size:11px;color:var(--muted);backdrop-filter:blur(6px)}
@media(max-width:900px){.careers-wrap{grid-template-columns:1fr;gap:36px}}

/* CONTACT */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.form-grid .field.full{grid-column:span 2}
.info{border-left:1px solid var(--line);padding-left:40px}
.info h3{font-family:"Archivo";font-weight:800;font-size:33px;margin-bottom:28px}
.info-row{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.info-row svg{width:24px;height:24px;color:var(--accent);flex:none;margin-top:3px}
.info-row .k{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.info-row .v{font-family:"Archivo";font-weight:600;font-size:19.3px;margin-top:3px}
.info-row .v a:hover{color:var(--accent)}

/* FOOTER */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:64px 0 34px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
/* 4-column footer (homepage + insurance/service-area pages) adds an "Areas we serve" link list for SEO. */
.foot-top.four{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media(max-width:1000px){.foot-top.four{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.foot-top.four{grid-template-columns:1fr}}
.foot-brand .brand{font-size:22px}
.foot-brand p{margin-top:14px;color:var(--muted);font-size:15px;max-width:34ch}
.socials{display:flex;gap:12px;margin-top:20px}
.socials a,.socials .soon{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.25s}
.socials a:hover,.socials .soon:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
/* FB + LinkedIn placeholders until Johnathan sends the real profile URLs (client 2026-09-11). */
.socials .soon{cursor:default}
.foot-col h4{font-family:"Archivo";font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 16px}
.foot-col a{display:block;color:var(--muted);font-size:15px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-areas{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.foot-areas h4{font-family:"Archivo";font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.fa-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.fa-links a{color:var(--muted);font-size:14px;transition:color .2s}
.fa-links a:hover{color:var(--accent)}
.foot-bot{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--faint);font-size:13.5px}

/* RESPONSIVE */
/* The new nav (homepage + insurance/service-area pages, marked .nav-v2) collapses to the hamburger +
   drilldown at <=1200 (nine top-level items + two dropdowns need room to breathe). Legacy subpages keep
   their original inline nav — see the header.nav:not(.nav-v2) rules in the <=640 block below. */
@media(max-width:1200px){
  .nav-v2 .nav-links{display:none}
  .nav-v2 .menu-btn{display:block}
}
@media(max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  .lead-card{max-width:460px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.big{grid-column:span 2}
  .proc{grid-template-columns:1fr;gap:32px}
  .proc-media{aspect-ratio:16/10;max-height:360px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .rev-top{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr;gap:36px}
  .info{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}
  .foot-top{grid-template-columns:1fr 1fr}
  .finance-wrap{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav-in{height:62px}
  .brand img{height:38px}
  .nav-phone{display:none}
  .nav-right > .btn{display:none}
  /* Legacy subpages (not .nav-v2) keep their original hamburger dropdown. */
  header.nav:not(.nav-v2) .menu-btn{display:block}
  header.nav:not(.nav-v2) .nav-links{position:fixed;top:62px;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;background:rgba(17,19,23,.97);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line);padding:6px 0;display:none}
  header.nav:not(.nav-v2) .nav-links.open{display:flex}
  header.nav:not(.nav-v2) .nav-links a{padding:15px 24px;font-size:16px;min-height:48px;display:flex;align-items:center}
  section.block{padding:48px 0}
  .page-hero{padding:92px 0 26px}
  .hero{padding:100px 0 56px}
  .hero-in{grid-template-columns:1fr}
  .hero h1{font-size:clamp(30px,8vw,42px);max-width:100%}
  .hero-sub{max-width:100%;font-size:16px}
  .lead-card{max-width:100%;padding:22px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;justify-content:center}
  .bento{grid-template-columns:1fr;grid-auto-rows:180px}
  .tile.big{grid-column:span 1;grid-row:span 2}
  .tile.big h3{font-size:25px}
  .tile.big .ph::after{background:linear-gradient(180deg,rgba(17,19,23,.10) 0%,rgba(17,19,23,.34) 30%,rgba(17,19,23,.74) 60%,rgba(17,19,23,.97) 100%)}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat{border-bottom:1px solid var(--line)}
  .stat .n{font-size:44px}
  .gal{grid-template-columns:1fr}
  .g-wide,.g-tall{grid-column:span 1;grid-row:span 1}
  .rev-grid{grid-template-columns:1fr}
  .gcard .score{font-size:60px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .field.full{grid-column:span 1}
  .foot-top{grid-template-columns:1fr}
  .fr-headline .v{font-size:44px}
}
/* Reviews go single-column below 760px, not 640: in the 641-760 band the 2-up grid made each card a
   narrow, tall, over-wrapped block that read as "stretched" (client mobile report 2026-09-12). Placed
   after the <=1000 (1fr 1fr) rule so it wins at these widths. */
@media(max-width:760px){.rev-grid{grid-template-columns:1fr}}
/* CTA band buttons: on small phones stack them full-width so the pair reads as an intentional block
   instead of two odd part-width pills floating left of the photo (client mobile report 2026-09-12). */
@media(max-width:560px){
  .cta-actions{flex-direction:column;align-items:stretch;width:100%}
  .cta-actions .btn{width:100%;justify-content:center}
}
/* ============ GLIMMER / SHINE SWEEP (logo + key CTAs) ============
   Client asked for a periodic glimmer on the Prestige logo (~1 min loop)
   and the Inspection buttons (~30s loop). A quick light sweep runs once
   per cycle, then rests. */
.glimmer{position:relative;overflow:hidden}
.glimmer::after{content:"";position:absolute;top:0;left:-160%;width:65%;height:100%;pointer-events:none;transform:skewX(-18deg)}
.glimmer-logo::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.0) 38%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%,transparent 100%);animation:shineLogo 60s linear infinite}
.glimmer-btn::after{background:linear-gradient(100deg,transparent 0%,rgba(62,114,168,0) 38%,rgba(62,114,168,.45) 50%,rgba(62,114,168,0) 62%,transparent 100%);animation:shineBtn 30s linear infinite}
@keyframes shineLogo{0%{left:-160%}2.2%{left:160%}100%{left:160%}}
@keyframes shineBtn{0%{left:-160%}4.5%{left:160%}100%{left:160%}}

/* ============ FLOATING SOCIAL RAIL (hero right edge) ============ */
/* Pulled up to sit level with the hero form box rather than pinned to the bottom. Icons are now the
   real brand-color marks (client 2026-09-21) — the SVG itself IS the badge, so the wrapper just adds
   lift/shadow instead of its own gray disc+border. */
.social-rail{position:fixed;right:34px;top:62%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:13px}
.social-bubble{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),filter .25s var(--ease)}
.social-bubble svg{width:100%;height:100%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.social-bubble img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.social-bubble:hover,.social-bubble:focus-visible{transform:translateY(-2px) scale(1.06)}
/* Subtle attention animation (client req: "a subtle animation to draw attention"): a soft, slow
   accent glow that ripples down the three bubbles in sequence, then rests. */
/* Client 2026-10-05: the old glow was a box-shadow ring that read as a grey/white border around the icons.
   Now the icon itself does a small, slow pulse in sequence, with no ring at all. */
.social-rail-anim .social-bubble img{animation:bubblePulse 6s ease-in-out infinite}
.social-rail-anim .social-bubble:nth-child(2) img{animation-delay:.5s}
.social-rail-anim .social-bubble:nth-child(3) img{animation-delay:1s}
@keyframes bubblePulse{0%,30%,100%{transform:scale(1)}12%{transform:scale(1.09)}}
/* Facebook/LinkedIn placeholders until real URLs land — slightly dimmed, "not-yet" cursor. */
.social-bubble[data-pending]{opacity:.82;cursor:default}
.social-bubble[data-pending]:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.social-rail-anim .social-bubble img{animation:none}}
@media(max-width:1100px){.social-rail{display:none}}

/* ============ CERTIFICATIONS STRIP ============ */
.certs{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.certs-in{padding:44px 0}
.certs-head{text-align:center;margin-bottom:26px}
.certs-head h2{font-size:clamp(22px,3vw,30px)}
.certs-head p{margin-top:10px;color:var(--muted);font-size:15px}
.cert-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.cert-badge{display:flex;align-items:center;gap:11px;padding:14px 20px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);font-family:"Archivo";font-weight:700;font-size:14px;color:var(--muted);transition:border-color .25s,color .25s,transform .25s}
.cert-badge:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-3px)}
.cert-badge .cb-ic{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.cert-badge .cb-ic svg{width:24px;height:24px}
.cert-badge b{color:var(--ink);font-weight:800}

/* ============ AREAS WE SERVE — static reference map (client 2026-09-21) ============
   Replaces the old hand-drawn interactive SVG (counties/lakes never rendered well, per Pablo).
   Now just a plain image in a framed panel; the ZIP checker alone covers "do you serve my area". */
.areas-wrap{display:grid;grid-template-columns:1.32fr .95fr;gap:44px;align-items:center;margin-top:8px}
/* No wrapper styling (client 2026-09-21): the reference photo already has its own rounded black frame
   baked in — an extra dark panel/border/padding here just doubled up the border. Plain image, full width. */
.map-panel{position:relative}
.map-static-img{display:block;width:100%;height:auto}
/* Real PR mark overlaid exactly on the pin baked into dfw-service-map.png (client 2026-09-25). Position/
   size measured from the source PNG (710x457): pin center at 483.5,95.5px, 31px diameter. */
.map-pin{position:absolute;left:64.3%;top:33.4%;width:4.6%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease);animation:mapPinGlow 2.8s ease-in-out infinite}
/* Stronger shimmer (client 2026-09-26): an expanding gold ring (::before, no longer clipped) PLUS a
   pulsing gold glow halo (box-shadow), styled like the social-media bubbles' pulse but in brand gold. */
.map-pin::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2.5px solid var(--gold);opacity:0;animation:pinRing 2.6s ease-out infinite;pointer-events:none}
.map-pin:hover{transform:translate(-50%,-50%) scale(1.14)}
@keyframes pinRing{0%{transform:scale(.68);opacity:.95}70%{opacity:0}100%{transform:scale(1.8);opacity:0}}
@keyframes mapPinGlow{0%,70%,100%{box-shadow:0 0 0 0 rgba(251,188,4,0)}16%{box-shadow:0 0 0 10px rgba(251,188,4,.30)}34%{box-shadow:0 0 0 0 rgba(251,188,4,0)}}
@media(prefers-reduced-motion:reduce){.map-pin{animation:none}.map-pin::before{animation:none;opacity:0}}
.map-pin img{width:58%;height:58%;object-fit:contain}
/* Flipped Areas layout — text left, map right (client Sep 14). */
.areas-flip{grid-template-columns:.84fr 1.16fr}
@media(max-width:900px){.areas-flip{grid-template-columns:1fr}}
/* Right-side text scaled up to balance the large map (client 2026-09-11). */
.areas-copy .eyebrow{margin-bottom:14px;font-size:13.5px}
.areas-copy h3{font-size:clamp(28px,2.5vw,36px);font-weight:800;line-height:1.08}
.areas-copy h3.areas-h{font-family:"Archivo",system-ui,sans-serif;font-weight:900;font-size:clamp(34px,3.4vw,50px);letter-spacing:-.01em}
.areas-copy p{margin-top:10px;color:var(--muted);font-size:16px;line-height:1.55}
.areas-copy p+p{margin-top:12px}
.areas-copy .area-note{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.areas-copy .area-note .an{display:flex;align-items:center;gap:12px;font-family:"Archivo";font-weight:600;font-size:16px;color:var(--ink)}
.areas-copy .area-note .an svg{width:34px;height:34px;padding:8px;border-radius:50%;background:rgba(157,177,198,.12);border:1px solid rgba(157,177,198,.28)}
.areas-copy .area-note .an svg{color:var(--accent);flex:none}
@media(max-width:900px){.areas-wrap{grid-template-columns:1fr;gap:24px}}

/* ZIP checker (client 2026-09-11): "enter your ZIP -> see if we serve your area". */
/* ZIP checker as its own panel (2026-10-07): the intro copy is gone, so this is the column's main element. */
.zip-check{margin-top:20px;padding:18px 22px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px}
.zc-label{display:block;font-family:"Archivo";font-weight:700;font-size:17px;color:var(--ink);margin-bottom:12px}
.zc-row{display:flex;gap:12px}
.zc-row input{flex:1;min-width:0;background:var(--bg-3);border:1px solid var(--line-strong);border-radius:14px;padding:15px 16px;color:var(--ink);font-size:17px;font-family:inherit;transition:border-color .2s}
.zc-row input:focus{outline:none;border-color:var(--accent)}
.zc-row .btn{white-space:nowrap;padding:15px 28px;font-size:16.5px}
.zc-out{margin-top:8px;font-size:15px;line-height:1.5;min-height:16px}
.zc-out.ok{color:#a9f0c4;font-size:15px;font-weight:700;white-space:nowrap}
.zc-out .zc-yes{font-family:"Archivo",system-ui,sans-serif;font-weight:800;letter-spacing:.01em}
.zc-out.no{color:var(--muted)}
.zc-out a{color:var(--accent);font-weight:800;white-space:nowrap}
.zc-out .zc-yes{display:block}
.zc-out a.zc-book{display:inline-flex;margin:12px 0 4px;padding:13px 24px;font-size:16px;color:var(--cta-ink);animation:zcBookGlow 2.6s ease-in-out infinite}
.zc-out a.zc-book:hover{animation-play-state:paused}
@keyframes zcBookGlow{0%,70%,100%{box-shadow:0 0 0 0 rgba(251,188,4,0)}16%{box-shadow:0 0 0 9px rgba(251,188,4,.32)}34%{box-shadow:0 0 0 0 rgba(251,188,4,0)}}
@media(prefers-reduced-motion:reduce){.zc-out a.zc-book{animation:none}}
@media(max-width:520px){.zip-check{padding:18px 16px 14px}.zc-row input{padding:15px 14px;font-size:17px}.zc-row .btn{padding:15px 20px}.areas-copy .area-note .an svg{width:32px;height:32px;padding:7px}}

/* Specialty Materials — horizontal auto-scroll strip (client annotation "Specialty Materials: Add Scrolling"). */
.spec-scroll{margin-top:22px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.spec-scroll-row{display:flex;gap:16px;width:max-content;animation:scrollx 48s linear infinite}
.spec-scroll:hover .spec-scroll-row{animation-play-state:paused}
/* JS steering (client call 2026-10-09, index.html): the script owns the transform, so the CSS loop is off. */
.spec-scroll.js-steer{touch-action:pan-y}
.spec-scroll.js-steer .spec-scroll-row{animation:none;will-change:transform}
.spec-card{position:relative;flex:none;width:340px;height:222px;border-radius:var(--r-media);overflow:hidden;border:1px solid var(--line);margin:0}
.spec-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.spec-card:hover img{transform:scale(1.05)}
.spec-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(17,19,23,.86))}
.spec-card figcaption{position:absolute;left:16px;bottom:14px;z-index:2;font-family:"Archivo";font-weight:700;font-size:14.5px}
.spec-card .sc-k{position:absolute;top:14px;left:16px;z-index:2;font-family:"Archivo";font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
@media(prefers-reduced-motion:reduce){.spec-scroll-row{animation:none}}

/* Services assurance row — Fully Insured / Warranty / Specialty (client PDF p12,p14) */
/* align-items:start so each card hugs its own content (no stretched empty space); head stays natural height. */
.assure{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;align-items:start}
.assure-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-2);padding:18px 24px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.assure-card .ac-head{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.assure-card .ic{color:var(--accent);display:inline-flex;flex:none}
.assure-card h4{font-family:"Archivo";font-weight:800;font-size:19px;line-height:1.15;margin:0}
.assure-card p{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.55}
/* Hover pop matching the financing page's "How Financing Works" tiles (client 2026-10-02). */
.assure-card{transition:transform .4s var(--ease),border-color .3s,background .3s}
.assure-card:hover{transform:translateY(-5px);border-color:var(--line-strong);background:var(--bg-3)}
@media(max-width:900px){.assure{grid-template-columns:1fr}}

/* ============ CERTIFICATIONS PAGE — image tiles (hidden page) ============ */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.cert-tile{border:1px solid var(--line-strong);border-radius:var(--r-media);background:#fff;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:30px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.cert-tile:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.cert-tile img{max-width:100%;max-height:100%;object-fit:contain}
.cert-tile.ph{background:linear-gradient(150deg,#1e232b,#14171c);flex-direction:column;gap:10px;text-align:center}
.cert-tile.ph .pl-mark{width:44px;height:44px;border-radius:12px;border:1.5px dashed var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--faint)}
.cert-tile.ph .pl-name{font-family:"Archivo";font-weight:800;font-size:16px;color:var(--ink)}
.cert-tile.ph .pl-note{font-size:11.5px;color:var(--faint)}
@media(max-width:800px){.cert-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cert-grid{grid-template-columns:1fr}}

/* ============ INSURANCE TIMELINE — "The Next Steps" (client PDF p19) ============ */
.timeline{margin-top:52px}
.tl-track{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;position:relative}
/* Line fills left-to-right as the steps light up (client: checks appear one after another). */
.tl-track::before{content:"";position:absolute;top:26px;left:9%;right:9%;height:2px;background:linear-gradient(90deg,var(--success),rgba(47,180,99,.5));z-index:0;transform:scaleX(0);transform-origin:left;transition:transform 2.9s linear}
.tl-track.play::before{transform:scaleX(1)}
.tl-step{position:relative;z-index:1;text-align:center}
/* Nodes start muted with the check hidden; JS adds .on to each in sequence to reveal the checks. */
.tl-node{width:54px;height:54px;border-radius:50%;margin:0 auto 18px;background:var(--bg-3);border:2px solid var(--line-strong);color:var(--faint);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--bg-2);transition:border-color .45s var(--ease),color .45s var(--ease)}
.tl-node svg{opacity:0;transform:scale(.3);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.tl-node.on{border-color:var(--success);color:var(--success)}
.tl-node.on svg{opacity:1;transform:scale(1)}
.tl-step .tl-k{font-family:"Archivo";font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--faint)}
.tl-step h3{font-size:16.5px;font-weight:800;margin-top:6px}
.tl-step p{margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:26ch;margin-left:auto;margin-right:auto}
.tl-time{display:inline-block;margin-top:13px;font-family:"Archivo";font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--accent);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 13px}
@media(max-width:900px){
  .tl-track{grid-template-columns:1fr;gap:0}
  .tl-track::before{top:12px;bottom:12px;left:26px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--success),rgba(47,180,99,.5));transform:scaleY(0);transform-origin:top}
  .tl-track.play::before{transform:scaleY(1)}
  /* Mobile: node pinned to col 1, ALL text (num/title/desc/time) stacks in col 2. Without the explicit
     column placement the 5 step children flowed into grid cells in source order — title landed in the
     54px node column and wrapped, the paragraph overlapped it, and the time-pill wrapped into a stray
     circle (client mobile report 2026-09-12). */
  .tl-step{display:grid;grid-template-columns:54px 1fr;column-gap:20px;row-gap:3px;text-align:left;padding:18px 0;align-items:start}
  .tl-node{margin:0;grid-column:1;grid-row:1}
  .tl-step .tl-k{grid-column:2;grid-row:1;align-self:center}
  .tl-step h3{grid-column:2;margin-top:2px}
  .tl-step p{grid-column:2;max-width:46ch;margin:4px 0 0}
  .tl-step .tl-time{grid-column:2;justify-self:start;margin:10px 0 0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-bg{transform:none!important}
  .marquee-row{animation:none!important}
  *{animation:none!important}
  .glimmer::after{animation:none!important;display:none}
}
.field input[type="date"],.field select{color-scheme:dark}

/* Team: certifications/brands strip under the members (client 2026-10-05). Reuses .marquee/.marquee-row
   (scrollx moves -50%, so the row holds the set twice; .badge-dup is the aria-hidden second copy). */
.badge-strip{margin-top:20px}
/* Team page (client 2026-10-06): title closer to the nav, stats strip removed. Badges sized off the viewport
   height; since the call of 2026-10-09 the strip sits below ALL members as a section break, a bit smaller. */
.page-hero.flush.team-hero{padding-top:96px}
.team-hero+section.block{padding-bottom:28px}
.team-hero+section.block .badge-strip{margin-top:clamp(28px,5vh,48px)}
.team-hero+section.block .badge-row img{height:clamp(48px,11.5vh,92px)}
.team-hero+section.block .badge-row img[src*="google-guaranteed"]{height:clamp(36px,8.5vh,68px)}
@media(max-width:700px){.team-hero+section.block .badge-row img{height:42px}.team-hero+section.block .badge-row img[src*="google-guaranteed"]{height:32px}}
.badge-row,.badge-dup{display:flex;align-items:center;gap:44px}
.badge-row{padding-right:44px;animation-duration:34s}
.badge-row img{height:52px;width:auto;flex:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.badge-row img[src*="google-guaranteed"]{height:40px}
@media(max-width:700px){.badge-row,.badge-dup{gap:30px}.badge-row{padding-right:30px}.badge-row img{height:44px}.badge-row img[src*="google-guaranteed"]{height:34px}}

/* Testimonial: click opens the Prestige Instagram profile (client 2026-10-05). The link covers the tile
   under the mute button; on hover a small pill fades in so the action is discoverable. */
.rev-video .rv-ig{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-start;justify-content:center;padding-top:22px;color:#f2f4f7}
.rv-ig-pill{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;background:rgba(17,19,23,.72);border:1px solid var(--line-strong);backdrop-filter:blur(6px);font-weight:700;font-size:14px;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.rev-video:hover .rv-ig-pill,.rev-video .rv-ig:focus-visible .rv-ig-pill{opacity:1;transform:none}
@media(hover:none){.rv-ig-pill{opacity:.92;transform:none;position:absolute;top:18px;right:18px;padding:8px 12px;font-size:12.5px}}

/* Careers "Why Prestige" video tiles (client 2026-10-06): same pattern as the landing testimonial, a click
   anywhere opens the Prestige Instagram profile, hover shows the pill, and a speaker button toggles sound. */
.wp-video .rv-ig{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-start;justify-content:center;padding-top:16px;color:#f2f4f7}
.wp-video:hover .rv-ig-pill,.wp-video .rv-ig:focus-visible .rv-ig-pill{opacity:1;transform:none}
.wp-video .rv-mute{position:absolute;bottom:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(17,19,23,.6);backdrop-filter:blur(6px);color:#f2f4f7;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.wp-video .rv-mute:hover{transform:scale(1.08);background:rgba(17,19,23,.82)}
.wp-video .rv-mute .ic-unmuted,.wp-video.unmuted .rv-mute .ic-muted{display:none}
.wp-video.unmuted .rv-mute .ic-unmuted{display:block}
@media(hover:none){.wp-video .rv-ig-pill{position:absolute;top:12px;right:12px;padding:7px 11px;font-size:12px}}