@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* ---------------- SOLSTICE tokens (scoped) ---------------- */
.rsg-inm-sv{

  --void:#011736; --navy-deep:#062755; --navy-card:#072856;
  --gold:var(--acc); --gold-bright:var(--acc-ink); --gold-ink:var(--acc-ink); --line:rgba(26,28,27,.14);
  --ink:#1A1C1B; --muted:#5E5548; --band-dark:#072857;
  --fs-h1:52px; --fs-h2:39px; --fs-eyebrow:13px; --fs-btn:16.5px; --sec-pad:100px;

  font-family:var(--font-body); font-size:17px; line-height:1.65;
  color:var(--ink); background:var(--paper); overflow-x:clip}

/* ---------------- shared ---------------- */

.rsg-inm-sv .rsg-sec{padding:var(--sec-pad) 0;position:relative}
.rsg-inm-sv .rsg-sec--dark{background:var(--band-grad);color:#E7EEF3}
/* CONTRAST GUARD: at 322deg the bright --azure stop lands in the bottom-right corner,
   where ice / gold-bright / muted-dark text would only reach ~2.6-3.2:1. This scrim
   deepens that corner to roughly --royal level (keeping the blue energy of the band)
   so every light-on-dark pair clears AA wherever it happens to sit. */
.rsg-inm-sv .rsg-sec--dark::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(322deg,rgba(8,25,42,.46) 0%,rgba(8,25,42,.16) 42%,transparent 72%)}
.rsg-inm-sv .rsg-sec--dark>.rsg-wrap{position:relative;z-index:1}
.rsg-inm-sv .rsg-sec--light{background:var(--paper);color:var(--ink)}
.rsg-inm-sv .rsg-sec--cream{background:var(--cream);color:var(--ink)}

.rsg-inm-sv h1,.rsg-inm-sv h2,.rsg-inm-sv h3,.rsg-inm-sv h4{
  font-family:var(--font-display);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
.rsg-inm-sv h3,.rsg-inm-sv h4{letter-spacing:-.006em}
.rsg-inm-sv p{margin:0;text-wrap:pretty}
.rsg-inm-sv a{color:inherit}
.rsg-inm-sv .rsg-eyebrow{display:flex;width:fit-content;max-width:100%;align-items:center;gap:10px;margin:0 0 15px;
  font-family:var(--font-heading);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}

.rsg-inm-sv .rsg-eyebrow::before{content:"";width:32px;height:3px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--red),#2E81C1)}
/* dark bands: red measures 1.92:1 on the band, so the red half of the dash
   would vanish. Use the two approved dark-band accents instead (4.77 / 8.84). */
.rsg-inm-sv .rsg-sec--dark .rsg-eyebrow::before{background:linear-gradient(90deg,var(--eyebrow-dark),var(--accent-dark))}
.rsg-inm-sv .rsg-rv .rsg-eyebrow::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) .35s}

.rsg-inm-sv .rsg-h2{font-size:var(--fs-h2);font-weight:800}
.rsg-inm-sv h1,.rsg-inm-sv .rsg-h2{text-transform:uppercase}
.rsg-inm-sv h1{letter-spacing:.004em}
.rsg-inm-sv .rsg-h2{letter-spacing:.014em;line-height:1.12}
.rsg-inm-sv .rsg-sub{margin-top:15px;font-size:18px;color:var(--muted);max-width:62ch}
.rsg-inm-sv .rsg-sec--dark .rsg-sub{color:var(--muted-dark)}
.rsg-inm-sv .rsg-sec--light .rsg-h2 span,.rsg-inm-sv .rsg-sec--cream .rsg-h2 span{font-style:normal;color:var(--red)}
.rsg-inm-sv .rsg-sec--dark .rsg-h2 span{font-style:normal;color:var(--accent-dark)}
.rsg-inm-sv .rsg-num{font-variant-numeric:tabular-nums lining-nums}

/* reveal */
.rsg-inm-sv .rsg-rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rsg-inm-sv .rsg-rv.rsg-rv--l{transform:translateX(-36px)}
.rsg-inm-sv .rsg-rv.rsg-rv--r{transform:translateX(36px)}
.rsg-inm-sv .rsg-rv.is-in{opacity:1;transform:none}

/* dark-band dividers */
.rsg-inm-sv .rsg-div-top{position:absolute;top:-1px;left:0;right:0;height:60px;pointer-events:none;z-index:3}
.rsg-inm-sv .rsg-div-top>svg{width:100%;height:100%;display:block}
.rsg-inm-sv .rsg-div-line{stroke-dasharray:760;stroke-dashoffset:760;transition:stroke-dashoffset 1.8s var(--ease) .2s}
.rsg-inm-sv .rsg-div-top.is-in .rsg-div-line{stroke-dashoffset:0}
.rsg-inm-sv .rsg-div-btm{position:absolute;bottom:-1px;left:0;right:0;height:34px;pointer-events:none;z-index:3}
.rsg-inm-sv .rsg-div-btm>svg{width:100%;height:100%;display:block}
@keyframes rsgsv-spin{to{transform:rotate(360deg)}}

/* buttons */
.rsg-inm-sv .rsg-btn,.rsg-inm-sv .rsg-btn2{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border:0;border-radius:var(--r-btn);font-family:var(--font-body);font-size:var(--fs-btn);font-weight:600;letter-spacing:.075em;text-transform:uppercase;line-height:1.15;
  text-decoration:none;cursor:pointer;color:var(--btn-text);transform-origin:center;transition:transform .28s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 1px 2px rgba(26,28,27,.10),0 10px 26px rgba(128,18,33,.22)}
.rsg-inm-sv .rsg-btn{background:var(--red)}
.rsg-inm-sv .rsg-btn2{background:var(--royal);box-shadow:0 1px 2px rgba(26,28,27,.10),0 10px 26px rgba(6,54,118,.22)}
.rsg-inm-sv .rsg-btn:hover,.rsg-inm-sv .rsg-btn2:hover{transform:scale(1.05)}
.rsg-inm-sv .rsg-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;
  border:1.6px solid rgba(187,210,238,.55);border-radius:var(--r-btn);background:rgba(13,29,50,.42);
  font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:.02em;text-decoration:none;color:#fff;cursor:pointer;
  transform-origin:center;transition:transform .28s var(--ease),border-color .25s,background .25s}
.rsg-inm-sv .rsg-ghost:hover{transform:scale(1.05);border-color:var(--gold-bright);background:rgba(13,29,50,.62)}
.rsg-inm-sv .rsg-sec--light .rsg-ghost,.rsg-inm-sv .rsg-sec--cream .rsg-ghost{color:var(--ink);border-color:var(--line);background:var(--card)}
.rsg-inm-sv .rsg-sec--light .rsg-ghost:hover,.rsg-inm-sv .rsg-sec--cream .rsg-ghost:hover{border-color:var(--gold)}
.rsg-inm-sv .rsg-btn svg,.rsg-inm-sv .rsg-btn2 svg,.rsg-inm-sv .rsg-ghost svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.rsg-inm-sv a:focus-visible,.rsg-inm-sv button:focus-visible,.rsg-inm-sv input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.rsg-inm-sv .rsg-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.rsg-inm-sv .rsg-ic{width:50px;height:50px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center}
.rsg-inm-sv .rsg-sec--dark .rsg-ic{background:var(--navy-card);border:1px solid var(--navy-line)}
.rsg-inm-sv .rsg-sec--dark .rsg-ic svg{stroke:var(--gold-bright)}
.rsg-inm-sv .rsg-sec--light .rsg-ic,.rsg-inm-sv .rsg-sec--cream .rsg-ic{background:linear-gradient(135deg,var(--royal),var(--royal-2))}
.rsg-inm-sv .rsg-sec--light .rsg-ic svg,.rsg-inm-sv .rsg-sec--cream .rsg-ic svg{stroke:#fff}
.rsg-inm-sv .rsg-ic svg{width:25px;height:25px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rsg-inm-sv .rsg-tick{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--gold-bright);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- embedded header / footer slots ---------- */

/* persistent Call Now (the approved alternative to online booking) */
.rsg-inm-sv .rsg-callnow{position:fixed;right:18px;bottom:18px;z-index:20;display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;
  background:var(--red);color:#fff;font-family:var(--font-body);font-size:16px;font-weight:700;text-decoration:none;
  box-shadow:0 6px 16px rgba(170,24,44,.38),0 2px 5px rgba(0,0,0,.2);transform:translateY(130%);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.rsg-inm-sv .rsg-callnow.is-on{transform:translateY(0);opacity:1}
.rsg-inm-sv .rsg-callnow svg{width:17px;height:17px;fill:#fff;flex:0 0 auto;animation:rsgsv-buzz 5s var(--ease) infinite}
@keyframes rsgsv-buzz{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-12deg)}93%{transform:rotate(10deg)}96%{transform:rotate(-6deg)}}
.rsg-inm-sv .rsg-callnow:hover{transform:translateY(0) scale(1.05)}

/* =======================================================================
   S1 · HERO (dark) — copy left · numbered service index right
======================================================================= */
.rsg-inm-sv .rsg-hero{position:relative;overflow:hidden;padding:92px 0 46px;background-color:var(--void);
  background-image:linear-gradient(322deg, rgba(8,25,42,.88) 0%, rgba(14,36,62,.91) 48%, rgba(8,20,35,.97) 100%), url('https://ikur82m4ir.wpdns.site/wp-content/uploads/2026/08/van-street-scene-2026.webp');
  background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:cover,cover}
/* faint measuring grid — the "spec document" cue, masked away from the copy */
.rsg-inm-sv .rsg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(169,211,240,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(169,211,240,.10) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask:radial-gradient(115% 85% at 78% 26%,#000 0,transparent 72%);mask:radial-gradient(115% 85% at 78% 26%,#000 0,transparent 72%)}
.rsg-inm-sv .rsg-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.rsg-inm-sv .rsg-hero-copy .rsg-eyebrow{margin-bottom:10px}
.rsg-inm-sv .rsg-hero-loc{display:flex;width:fit-content;max-width:100%;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:.06em;color:var(--ice);margin-bottom:16px}
.rsg-inm-sv .rsg-hero-loc svg{width:15px;height:15px;flex:0 0 auto;fill:var(--ice)}
.rsg-inm-sv .rsg-hero h1{font-family:var(--font-heading);font-size:var(--fs-h1);font-weight:800;letter-spacing:-.012em;color:#fff;max-width:17ch;margin:0}
/* hero accent word = TAN (client, 2026-08-03); was ice --accent-dark. --gold-bright is
   pinned to #E2C6A3 inside .rsg-hero. Token --accent-dark left alone (eyebrow dashes use it). */
.rsg-inm-sv .rsg-hero h1 span{font-style:normal;color:var(--gold-bright);position:relative;white-space:nowrap}
.rsg-inm-sv .rsg-hero h1 span::after{content:"";position:absolute;left:1%;right:1%;bottom:-6px;height:4px;border-radius:2px;background:var(--red)}
.rsg-inm-sv .rsg-hero-intro{margin:24px 0 26px;max-width:54ch;font-size:17.5px;color:var(--muted-dark)}
.rsg-inm-sv .rsg-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.rsg-inm-sv .rsg-hero-call{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border-radius:var(--r-btn);
  background:var(--red);color:#fff;text-decoration:none;box-shadow:0 2px 6px rgba(5,18,32,.24),0 12px 28px rgba(170,24,44,.26);
  transform-origin:center;transition:transform .28s var(--ease)}
.rsg-inm-sv .rsg-hero-call:hover{transform:scale(1.05)}
.rsg-inm-sv .rsg-hero-call svg{width:19px;height:19px;fill:#fff;flex:0 0 auto}
.rsg-inm-sv .rsg-hero-call span{display:flex;flex-direction:column;line-height:1.15}
.rsg-inm-sv .rsg-hero-call small{font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.86}
.rsg-inm-sv .rsg-hero-call b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums lining-nums}

/* hero service index — doubles as in-page navigation */
.rsg-inm-sv .rsg-idx{position:relative;border-radius:var(--r-card);padding:8px;
  background:linear-gradient(180deg,rgba(7,40,86,.86),rgba(6,39,85,.9));
  border:1px solid var(--navy-line);box-shadow:var(--shadow-2);backdrop-filter:none}
.rsg-inm-sv .rsg-idx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 12px}
.rsg-inm-sv .rsg-idx-head span{font-family:var(--font-heading);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.rsg-inm-sv .rsg-idx-head i{display:block;height:3px;flex:1;border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--gold) 50%,var(--azure))}
.rsg-inm-sv .rsg-idx-list{list-style:none;margin:0;padding:0}
.rsg-inm-sv .rsg-idx-list li+li{border-top:1px solid rgba(187,210,238,.14)}
.rsg-inm-sv .rsg-idx-list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px;
  text-decoration:none;color:#fff;transition:background .3s var(--ease)}
.rsg-inm-sv .rsg-idx-list a:hover{background:rgba(169,211,240,.07)}
.rsg-inm-sv .rsg-idx-n{font-family:var(--font-heading);font-size:13px;font-weight:700;color:var(--gold-bright);
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.06em}
.rsg-inm-sv .rsg-idx-t{font-family:var(--font-heading);font-size:19px;font-weight:700;letter-spacing:.01em}
.rsg-inm-sv .rsg-idx-t small{display:block;font-family:var(--font-body);font-size:13px;font-weight:400;color:var(--muted-dark);letter-spacing:0;margin-top:2px}
.rsg-inm-sv .rsg-idx-list a svg{width:16px;height:16px;fill:none;stroke:var(--ice);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease)}
.rsg-inm-sv .rsg-idx-list a:hover svg{transform:translateX(4px)}

/* =======================================================================
   HERO TRUST STRIP — the 4 value props, now inside the dark hero
   (was a standalone cream band; matches ac-repair-extreme.html)
   NOTE: must stay AFTER the .rsg-sec--dark .rsg-ic rules above — equal
   specificity (0,3,0), so source order is what strips the icon well here.
======================================================================= */
.rsg-inm-sv .rsg-hero-strip{position:relative;z-index:2;margin-top:52px;border-top:1px solid var(--navy-line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--navy-line)}
.rsg-inm-sv .rsg-hero-strip>div{background:linear-gradient(322deg,rgba(var(--acc-rgb),.06),transparent);
  padding:24px 22px;display:flex;align-items:center;gap:14px;min-width:0}
.rsg-inm-sv .rsg-hero-strip b{display:block;font-family:var(--font-heading);font-size:22px;font-weight:800;
  color:#fff;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.rsg-inm-sv .rsg-hero-strip span{font-size:12.5px;color:var(--muted-dark);font-weight:600}
.rsg-inm-sv .rsg-hero-strip .rsg-ic{width:auto;height:auto;background:none;border:0;border-radius:0}
.rsg-inm-sv .rsg-hero-strip .rsg-ic svg{width:26px;height:26px;stroke:var(--gold-bright)}

/* JUMP TARGETS -- the hero Service Index still links to these. A little breathing room
   so a jumped-to heading doesn't sit flush against the top edge. */
.rsg-inm-sv #rsg-sv-cooling,.rsg-inm-sv #rsg-sv-heating,.rsg-inm-sv #rsg-sv-air,
.rsg-inm-sv #rsg-sv-specialty,.rsg-inm-sv #rsg-sv-spec,.rsg-inm-sv #rsg-sv-faq{scroll-margin-top:24px}
.rsg-inm-sv{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ .rsg-inm-sv{scroll-behavior:auto} }

/* =======================================================================
   S3 · THE FULL LIST + TRACK RECORD (light) -- one section.
   Was three: the 3-up category cards (removed -- the hero Service Index and
   the four category splits already cover that ground), the cream trust-stat
   band, and the services intro. Intro copy now runs left, the four track-
   record numbers stack in a panel on the right.
======================================================================= */
/* even split: the 2-up card grid needs the width, or each card drops below
   ~220px and the notes shred into 6-line columns.
   align-items:center vertically centres the shorter card block against the
   taller copy column. */
.rsg-inm-sv .rsg-intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.rsg-inm-sv .rsg-intro-copy .rsg-sub{max-width:58ch}
.rsg-inm-sv .rsg-intro-quote{margin:28px 0 0;max-width:56ch;padding:22px 26px;border-radius:var(--r-card);
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--red);box-shadow:var(--shadow-1);text-align:left}
.rsg-inm-sv .rsg-intro-quote p{font-family:var(--font-display);font-size:19px;font-weight:500;line-height:1.45;color:var(--ink)}
.rsg-inm-sv .rsg-intro-quote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--font-heading);
  font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
/* TRACK RECORD -- 4 cards, 2 up, no header. Each card reads label -> figure
   -> note; no icons, so the label carries the meaning and the figure stays
   pure type. The block is centred against the copy column (see .rsg-intro). */
.rsg-inm-sv .rsg-tr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rsg-inm-sv .rsg-tr-card{position:relative;padding:24px 22px 22px;border-radius:var(--r-card);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.rsg-inm-sv .rsg-tr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--gold)}
/* same top-left accent bar as the Specialty Systems cards (.rsg-sp::before) --
   left offset tracks the card's own horizontal padding so it lines up with the
   label beneath it */
.rsg-inm-sv .rsg-tr-card::before{content:"";position:absolute;left:22px;top:0;width:34px;height:3px;
  border-radius:0 0 2px 2px;background:linear-gradient(90deg,var(--red),var(--gold))}
/* label and note are both spans -- these must out-specify any bare span rule */
.rsg-inm-sv .rsg-tr-card .rsg-tr-k{display:block;font-family:var(--font-heading);font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.rsg-inm-sv .rsg-tr-card b{display:block;margin-top:10px;font-family:var(--font-display);font-size:36px;
  font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums lining-nums}
.rsg-inm-sv .rsg-tr-card b em{font-style:normal;font-size:17px;font-weight:700;color:var(--muted);letter-spacing:0}
/* 2026-08-15: the Google card's <b> holds five stars instead of a 36px numeral. Five
   glyphs at 36px overflow the card, so this variant sizes itself. ⚠ it must be written
   as `.rsg-tr-card b.rsg-tr-stars` (0,3,1) - a bare `.rsg-tr-stars` (0,2,0) LOSES to the
   `.rsg-tr-card b` rule above it and to the 32px mobile override, and the stars would
   render at full numeral size. Same reason the mobile rule below is written that way. */
.rsg-inm-sv .rsg-tr-card b.rsg-tr-stars{font-size:23px;letter-spacing:3px;line-height:1.565}
.rsg-inm-sv .rsg-tr-card .rsg-tr-d{display:block;margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5}
/* ONE featured card (the review score -- the strongest proof of the four).
   Same motif as the homepage brand marquee's featured Trane tile: royal fill
   among plain white siblings. Rules below rely on source order, not weight --
   they tie with the base .rsg-tr-card rules, so they must stay after them. */
.rsg-inm-sv .rsg-tr-card--feat{background:var(--royal);border-color:var(--royal)}
/* this card's 1px border is the SAME royal as its fill, so it reads as card, not
   as edge -- which left a blue sliver above the accent bar that the white cards
   don't show (their warm --line border merges with the bar). Start the bar at
   the border-box top instead of the padding-box top so it sits flush. */
.rsg-inm-sv .rsg-tr-card--feat::before{top:-1px}
.rsg-inm-sv .rsg-tr-card--feat .rsg-tr-k{color:var(--ice)}
.rsg-inm-sv .rsg-tr-card--feat b{color:#fff}
.rsg-inm-sv .rsg-tr-card--feat b.rsg-tr-stars{color:var(--gold-bright)} /* stars stay gold on the royal fill, not the card's white <b> ink */
.rsg-inm-sv .rsg-tr-card--feat b em{color:var(--ice)}
.rsg-inm-sv .rsg-tr-card--feat .rsg-tr-d{color:var(--muted-dark)}
.rsg-inm-sv .rsg-tr-card--feat:hover{border-color:var(--gold-bright)}

/* =======================================================================
   S6 / S7 / S8 &middot; CATEGORY SPLITS &mdash; photo + numbered cut list
======================================================================= */
.rsg-inm-sv .rsg-cs{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.rsg-inm-sv .rsg-cs--rev .rsg-cs-media{order:2}
/* measured-drawing photo frame: thin corner ticks + wipe reveal */
.rsg-inm-sv .rsg-cs-media{position:relative;padding:14px}
.rsg-inm-sv .rsg-cs-frame{position:relative;border-radius:var(--r-photo);overflow:hidden;box-shadow:var(--shadow-3);background:var(--cream)}
.rsg-inm-sv .rsg-cs-frame img{width:100%;aspect-ratio:5/4;object-fit:cover;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--ease) .1s,transform 1.4s var(--ease)}
.rsg-inm-sv .rsg-cs-media.is-in .rsg-cs-frame img{clip-path:inset(0 0 0 0)}
/* registration brackets: 8px outside the frame (media padding is 14px) so they read as
   drafting marks hugging the photo rather than ticks floating in the whitespace */
.rsg-inm-sv .rsg-cs-tick{position:absolute;width:30px;height:30px;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease) .55s}
.rsg-inm-sv .rsg-cs-media.is-in .rsg-cs-tick{opacity:1}
.rsg-inm-sv .rsg-cs-tick--tl{top:6px;left:6px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.rsg-inm-sv .rsg-cs-tick--br{bottom:6px;right:6px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}
.rsg-inm-sv .rsg-cs-cap{position:absolute;bottom:24px;left:24px;right:24px;z-index:2;display:flex;align-items:center;gap:10px;
  font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 6px rgba(8,25,42,.85)}
.rsg-inm-sv .rsg-cs-cap i{display:block;width:22px;height:3px;border-radius:2px;flex:0 0 auto;background:var(--gold-bright)}
.rsg-inm-sv .rsg-cs-body h3{font-size:var(--fs-h2);font-weight:800}
/* these h2s don't carry .rsg-h2, so the accent-word rule has to be repeated here --
   without it the <em> falls back to browser italic and misses the red accent colour */
.rsg-inm-sv .rsg-cs-body h3 span{font-style:normal;color:var(--red)}
.rsg-inm-sv .rsg-cs-lede{margin-top:16px;font-size:17px;color:var(--muted);max-width:52ch}

/* the cut list */
.rsg-inm-sv .rsg-cut{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.rsg-inm-sv .rsg-cut li{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:16px;
  padding:13px 2px;border-bottom:1px solid var(--line)}
.rsg-inm-sv .rsg-cut li>span:first-child{font-family:var(--font-heading);font-size:12px;font-weight:700;color:var(--gold-ink);
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.08em;transition:color .3s var(--ease)}
.rsg-inm-sv .rsg-cut li>span:last-child{font-size:16.5px;font-weight:600;color:var(--ink)}
.rsg-inm-sv .rsg-cut li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.rsg-inm-sv .rsg-cut li:hover::after{transform:scaleX(1)}
.rsg-inm-sv .rsg-cut li:hover>span:first-child{color:var(--red)}
.rsg-inm-sv .rsg-cs-note{margin-top:18px;font-size:14.5px;color:var(--muted)}
.rsg-inm-sv .rsg-cs-note b{color:var(--ink)}
/* the keyframe is the no-JS fallback only -- the script sets animation:none and
   drives the same pace itself so the rail can also be dragged */
@keyframes rsgsv-mq{to{transform:translateX(-50%)}}

/* =======================================================================
   S15 &middot; FINAL CTA (dark, last)
======================================================================= */
.rsg-inm-sv .rsg-cta{position:relative;overflow:hidden;overflow:clip visible}
/* CLIENT 2026-08-05: CTA background unified across all seven pages -- ported VERBATIM
   from homepageextreme.html's .rsg-cta-rays. Was a 880px conic disc apexed at 50% 50%
   inside a 520px-tall box; now the homepage's full-band fan apexed at 50% 0 with the
   fade carried entirely by the mask. Ice (#A9D3F0) only, static, no glow -- same rules
   as the homepage band. The fixed bottom-right Call Now button is untouched. */
.rsg-inm-sv .rsg-cta-rays{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.rsg-inm-sv .rsg-cta-rays::before{
  content:"";position:absolute;left:50%;top:32px;
  width:230%;max-width:2600px;height:210%;transform:translateX(-50%);
  background:repeating-conic-gradient(from 90deg at 50% 0,
    rgba(169,211,240,.115) 0deg .5deg,
    rgba(169,211,240,0) .5deg 5.6deg);
  -webkit-mask:radial-gradient(50% 78% at 50% 0,#000 0%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.16) 54%,transparent 74%);
          mask:radial-gradient(50% 78% at 50% 0,#000 0%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.16) 54%,transparent 74%)}
@media (max-width:900px){ .rsg-inm-sv .rsg-cta-rays::before{top:22px;width:280%} }
.rsg-inm-sv .rsg-cta-inner{position:relative;z-index:1;max-width:800px;margin:0 auto;text-align:center}
.rsg-inm-sv .rsg-cta-inner .rsg-eyebrow{margin-left:auto;margin-right:auto}
.rsg-inm-sv .rsg-cta-title{font-family:var(--font-display);font-weight:800;line-height:1.04;font-size:clamp(34px,5vw,52px);color:#fff;letter-spacing:-.015em}
.rsg-inm-sv .rsg-cta-title span{position:relative;font-style:normal;color:var(--accent-dark)}
.rsg-inm-sv .rsg-cta-title span::after{content:"";position:absolute;left:2%;right:2%;bottom:-4px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.rsg-inm-sv .rsg-cta-sub{margin:22px auto 0;max-width:56ch;font-size:18px;line-height:1.62;color:var(--muted-dark)}
.rsg-inm-sv .rsg-cta-bullets{list-style:none;margin:30px auto 0;padding:0;display:grid;grid-template-columns:repeat(2,auto);
  gap:12px 34px;justify-content:center;text-align:left}
.rsg-inm-sv .rsg-cta-bullets li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;color:#E1E9EF}
.rsg-inm-sv .rsg-cta-actions{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.rsg-inm-sv .rsg-cta-call{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:var(--r-btn);
  border:1.6px solid rgba(187,210,238,.55);background:rgba(13,29,50,.42);color:#fff;font-size:var(--fs-btn);font-weight:700;
  text-decoration:none;transform-origin:center;transition:transform .28s var(--ease),border-color .25s,background .25s}
.rsg-inm-sv .rsg-cta-call:hover{transform:scale(1.05);border-color:var(--gold-bright);background:rgba(13,29,50,.62)}
.rsg-inm-sv .rsg-cta-call svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.rsg-inm-sv .rsg-cta-trust{margin-top:40px;padding-top:26px;border-top:1px solid var(--navy-line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;font-size:14.5px;color:var(--muted-dark)}
.rsg-inm-sv .rsg-cta-trust b{color:#fff}
.rsg-inm-sv .rsg-cta-trust i{display:block;width:1px;height:15px;background:var(--navy-line)}

/* =======================================================================
   REDUCED MOTION
======================================================================= */
@media (prefers-reduced-motion: reduce){
  .rsg-inm-sv *,.rsg-inm-sv *::before,.rsg-inm-sv *::after{transition:none!important;animation:none!important}
  .rsg-inm-sv .rsg-rv{opacity:1;transform:none}
  .rsg-inm-sv .rsg-rv .rsg-eyebrow::before{transform:scaleX(1)}
  .rsg-inm-sv .rsg-div-line{stroke-dashoffset:0}
  .rsg-inm-sv .rsg-cs-frame img{clip-path:inset(0 0 0 0)}
  .rsg-inm-sv .rsg-cs-tick{opacity:1}
  .rsg-inm-sv .rsg-callnow{transform:none;opacity:1}
}
/* ---------- no-JS / no-reveal static fallback --------------------------------
   Generated from the prefers-reduced-motion block above, so it mirrors the same
   static state. The reveal system parks content at opacity:0 and relies on JS
   adding .is-in; the WordPress block editor never runs post scripts and a hard JS
   error has the same effect, leaving the page as empty bands of background.
   .rsg-rv-js is added by the gate script at the top of this wrapper ONLY when the
   reveal can actually run, so :not(.rsg-rv-js) is the fallback. Purely additive:
   with JS the class is present and none of these rules apply. */
  .rsg-inm-sv:not(.rsg-rv-js) .rsg-rv{opacity:1;transform:none}
  .rsg-inm-sv:not(.rsg-rv-js) .rsg-rv .rsg-eyebrow::before{transform:scaleX(1)}
  .rsg-inm-sv:not(.rsg-rv-js) .rsg-div-line{stroke-dashoffset:0}
  .rsg-inm-sv:not(.rsg-rv-js) .rsg-cs-frame img{clip-path:inset(0 0 0 0)}
  .rsg-inm-sv:not(.rsg-rv-js) .rsg-cs-tick{opacity:1}
  .rsg-inm-sv:not(.rsg-rv-js) .rsg-callnow{transform:none;opacity:1}

/* =======================================================================
   RESPONSIVE
======================================================================= */
@media (max-width:1024px){
  .rsg-inm-sv{--fs-h1:42px;--fs-h2:33px;--sec-pad:82px}
  .rsg-inm-sv .rsg-hero{padding:60px 0 44px}
  .rsg-inm-sv .rsg-hero-grid{grid-template-columns:1fr;gap:40px}
  .rsg-inm-sv .rsg-hero h1{max-width:22ch}
  .rsg-inm-sv .rsg-hero-strip{grid-template-columns:repeat(2,1fr);margin-top:40px}
  /* intro + track record stack; the panel keeps its own internal rhythm */
  .rsg-inm-sv .rsg-intro{grid-template-columns:1fr;gap:38px}
  /* STACKED CATEGORY SPLITS: the photo illustrates the heading, so once the two
     columns collapse it drops in AFTER the H2 rather than leading the block.
     .rsg-cs-body goes display:contents so its children become grid items of
     .rsg-cs and can be ordered around the media. row-gap must be 0 -- with every
     child now a grid item a row-gap would fire between all of them; the internal
     rhythm is already carried by the child margins. */
  .rsg-inm-sv .rsg-cs{grid-template-columns:1fr;column-gap:36px;row-gap:0}
  .rsg-inm-sv .rsg-cs-body{display:contents}
  /* a display:contents box paints nothing, so the .rsg-rv opacity:0 can't apply --
     but never leave copy one spec-quirk away from invisible */
  .rsg-inm-sv .rsg-cs-body.rsg-rv{opacity:1;transform:none}
  /* ...and the reveal observer can't mark a box-less element either, so .is-in never
     lands and the eyebrow's accent rule would sit at scaleX(0) forever. Only the
     reduced-motion fallback was hiding this. Force it for every display:contents body. */
  .rsg-inm-sv .rsg-cs-body .rsg-eyebrow::before,
  .rsg-inm-sv .rsg-own-body .rsg-eyebrow::before,
  .rsg-inm-sv .rsg-ar-body .rsg-eyebrow::before{transform:scaleX(1)}
  .rsg-inm-sv .rsg-cs-body .rsg-eyebrow{order:1}
  .rsg-inm-sv .rsg-cs-body h3{order:2}
  /* order only on the --rev selector: putting padding here too would out-rank the
     (0,2,0) padding:10px in the 767 block and leave reversed splits at 12px */
  .rsg-inm-sv .rsg-cs-media{order:3;padding:12px;max-width:620px;margin:16px 0 0}
  .rsg-inm-sv .rsg-cs--rev .rsg-cs-media{order:3}
  .rsg-inm-sv .rsg-cs-body .rsg-cs-lede{order:4}
  .rsg-inm-sv .rsg-cs-body .rsg-cut{order:5}
  .rsg-inm-sv .rsg-cs-body .rsg-cs-note{order:6}
  .rsg-inm-sv .rsg-cs-body .rsg-actions{order:7}
}
@media (max-width:767px){
  .rsg-inm-sv{--fs-h1:32px;--fs-h2:26px;--sec-pad:60px;font-size:16px}
  .rsg-inm-sv .rsg-wrap{padding:0 20px}
  .rsg-inm-sv .rsg-div-line{display:none} /* hide the spectrum streak on mobile */
  .rsg-inm-sv .rsg-div-top{height:38px}
  .rsg-inm-sv .rsg-div-btm{height:24px}
  /* hero: hide the duplicated location line (the header bar already states it) */
  .rsg-inm-sv .rsg-hero-loc{display:none}
  .rsg-inm-sv .rsg-hero-copy .rsg-eyebrow{margin-bottom:15px}
  .rsg-inm-sv .rsg-hero-ctas{flex-direction:column;align-items:stretch}
  .rsg-inm-sv .rsg-hero-call{justify-content:center}
  .rsg-inm-sv .rsg-hero-ctas .rsg-ghost{justify-content:center}
  /* stacked: read it as a rounded card, not a full-bleed band. The border shorthand
     replaces the desktop border-top, and overflow:hidden clips the square cell
     corners (the 1px grid gap) to the radius. */
  .rsg-inm-sv .rsg-hero-strip{grid-template-columns:1fr;margin-top:34px;
    border:1px solid var(--navy-line);border-radius:var(--r-btn);overflow:hidden}
  .rsg-inm-sv .rsg-hero-strip>div{padding:16px 20px}
  .rsg-inm-sv .rsg-hero-strip b{font-size:19px}
  /* one column: 2-up would leave ~140px cards at 360 */
  .rsg-inm-sv .rsg-tr-grid{grid-template-columns:1fr;gap:14px}
  .rsg-inm-sv .rsg-tr-card{padding:20px 20px 18px}
  .rsg-inm-sv .rsg-tr-card::before{left:20px}
  .rsg-inm-sv .rsg-tr-card b{font-size:32px}
  .rsg-inm-sv .rsg-tr-card b.rsg-tr-stars{font-size:21px}
  .rsg-inm-sv .rsg-cs-media{padding:10px}
  .rsg-inm-sv .rsg-cs-tick{width:26px;height:26px}
  .rsg-inm-sv .rsg-cs-cap{bottom:16px;left:16px;right:16px;font-size:11px}
  .rsg-inm-sv .rsg-cta-bullets{grid-template-columns:1fr}
  .rsg-inm-sv .rsg-cta-actions{flex-direction:column;align-items:stretch}
  .rsg-inm-sv .rsg-cta-actions .rsg-btn,.rsg-inm-sv .rsg-cta-call{justify-content:center;width:100%}
  .rsg-inm-sv .rsg-cta-trust i{display:none}
  .rsg-inm-sv .rsg-callnow{padding:13px 20px;font-size:15px}
}
@media (max-width:430px){
  .rsg-inm-sv .rsg-idx-list a{gap:12px;padding:14px}
  .rsg-inm-sv .rsg-idx-t{font-size:17px}
}
@keyframes rsgsv-ring{0%{transform:scale(.62);opacity:0}30%{opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes rsgsv-emergepulse{0%{transform:scale(.55);opacity:.9}75%,100%{transform:scale(1.55);opacity:0}}
@media (max-width:1024px){
}
@media (max-width:767px){
}

/* ============ SITEWIDE ACCENT UNIFICATION - 2026-08-03 (client, 4 asks) ============
   1. Eyebrow: ONE dash gradient + ONE text colour for every LIGHT section and ONE of
      each for every DARK section, on every page. Heroes are left exactly as they are.
      NOTE: heroes on services/blog/contact/service-areas DO contain an eyebrow, and
      they currently render via the dark rules. A `:not(.rsg-hero)` guard was therefore
      deliberately NOT added - it would drop those hero eyebrows back to the light
      treatment, and light eyebrow ink (--gold-ink var(--acc-ink)) on the dark band is far
      below AA. Heroes keep the dark treatment; only body sections were normalised.
   2. DARK sections (heroes excluded): heading accent <em>/<span> = GOLD.
      !! This REVERSES the 2026-08-01 change that moved dark heading accents from gold
      to --accent-dark (ice) after the client disliked the tan. Client asked for gold
      again on 2026-08-03. Gold is AA-safe here: --gold-bright on the band = 8.85:1.
      The accent UNDERLINE bars on the dark CTAs were already gold, so this makes the
      accent word and its underline agree instead of clash.
   3. LIGHT + CREAM sections (heroes, header and footer excluded): accent = RED.
      --red on paper = 6.61:1 and on cream = 5.71:1, both AA.
   4. The hero's gauge dial is reused bottom-RIGHT on every dark section at opacity .07
      (the hero itself is .20). Implemented as an extra BACKGROUND-IMAGE layer on the
      section rather than a pseudo-element, because ::after is already taken on
      services' dark sections and ::before on ac-repair's .rsg-sgx-c5 - a background
      layer collides with nothing and needs no position/overflow changes.
   Only <em> is ever used as a heading accent sitewide (the single heading <span> is in
   the homepage H1, i.e. a hero), so targeting both em and span is safe.
*/
/* 2. dark sections: accent word GOLD */

/* 3. light + cream sections: accent word RED */
.rsg-inm-sv .rsg-sec--light:not(.rsg-hero) h2 span,
.rsg-inm-sv .rsg-sec--light:not(.rsg-hero) .rsg-h2 span,
.rsg-inm-sv .rsg-sec--cream:not(.rsg-hero) h2 span,
.rsg-inm-sv .rsg-sec--cream:not(.rsg-hero) .rsg-h2 span{color:var(--red)}
/* 4. gauge dial, bottom-right, opacity .07 (baked into the SVG group) */
.rsg-inm-sv .rsg-sec--dark:not(.rsg-hero){ background-image:var(--band-grad); background-repeat:no-repeat; background-position:center; background-size:cover}

/* ---- eyebrow colour LOCK (2026-08-03) --------------------------------------------
   The eyebrow is a <p>, so any section rule shaped like `.wrapper p{color:...}` beats
   `.root .rsg-eyebrow{color:...}` on specificity (0,2,1) vs (0,2,0) and silently
   recoloured it. That is exactly what had happened to three eyebrows sitewide:
     about  .rsg-diff-lead p  and  .rsg-area-copy p   -> --muted
     blog   .rsg-auth>div>p                           -> --muted
   Doubling the root class gives (0,3,0) / (0,4,0), which wins without !important and
   without touching those body-copy rules. Heroes are intentionally included: every
   hero that has an eyebrow is a dark band, so it keeps the dark colour it already had.
*/
.rsg-inm-sv.rsg-inm-sv .rsg-eyebrow{color:var(--gold-ink)}
.rsg-inm-sv.rsg-inm-sv .rsg-sec--dark .rsg-eyebrow{color:var(--eyebrow-dark)}

/* ================= WARM REBALANCE - 2026-08-03 (client: "too much tan") =============
   Client ask: dark sections -> shades of RED; light sections -> shades of BLUE with
   minimal red; KEEP the h2 accent and the eyebrow exactly as they are; DO NOT touch
   heroes. He also said: if a given swap looks bad, use my own judgement.

   WHY A BAND-AWARE TOKEN LAYER AND NOT A RE-HUE: --gold/--gold-bright/--gold-ink each
   serve BOTH bands, and no single warm value can be replaced by one colour, because
   --red on the dark band measures 1.9:1. Custom properties inherit, so re-declaring
   them on .rsg-sec--dark resolves every descendant - including ::before/::after and
   SVG fill=/stroke= presentation attributes - with no per-component edits.

   THE ONE JUDGEMENT CALL, using the latitude given: on DARK bands red is used for
   DECORATION (discs, nodes, seals, icon wells, rules, hairlines) but NOT for text-like
   marks, because red on that band fails AA at 1.9:1 and every AA-passing lighter red
   reads pink - which has been rejected three times before. Text-like marks on dark go
   to ICE #A9D3F0 (8.84:1), which is non-warm, on-brand and already the dark-band accent
   family. That satisfies "no more tan" without shipping unreadable or pink text.

   STAR RATINGS keep a true amber (#F3B11B) rather than becoming red or khaki: red stars
   read as a warning, and amber is the universal rating convention. This actually REMOVES
   tan feel, because washed khaki read as tan whereas amber reads as a rating. */
.rsg-inm-sv {
  /* LIGHT-band defaults: blue */
  --acc:#2E81C1;          /* azure - decorative fills, discs, rings, tags, seals */
  --acc-ink:#063676;      /* navy  - text-like marks (11.72 on white, 9.14 on cream) */
  --acc-rgb:46,129,193;
  --acc-ink-rgb:6,54,118;
}
/* DARK bands: red for decoration, ice for anything text-like */
.rsg-inm-sv .rsg-sec--dark,
.rsg-sgx-c5, .rsg-clmx-c2 {
  --acc:#AA182C;
  --acc-ink:#A9D3F0;
  --acc-rgb:170,24,44;
  --acc-ink-rgb:169,211,240;
}
/* ---- DARK-GROUND TEXT REPAIR (client-reported, 2026-08-03) -------------------------
   --gold-bright/--gold-ink are declared at the ROOT as var(--acc-ink); a custom property's
   var() is substituted where it is DECLARED, so both froze to the LIGHT-band navy #063676
   and inherited that into every dark band - the rule above never reached them. Measured
   with a headless probe: on this page it left "Runs Chad's own home" at 1.15:1, the
   comparison rail's numbers at 1.20:1, "What we spec" at 1.05:1 and the featured brand
   tile's "Install Partner" at 1.00:1 (navy on navy - invisible).
   Pinned to TAN per the client's 2026-08-03 instruction (12.7:1 on the dark ground); it is
   also the pre-rebalance value. Decorative --gold untouched, so nothing else shifts.
   Second group = dark cards inside LIGHT sections, which .rsg-sec--dark cannot reach.
   Full rationale is documented in homepageextreme.html. */
.rsg-inm-sv .rsg-sec--dark,
.rsg-sgx-c5, .rsg-clmx-c2,
.rsg-inm-sv .rsg-brand-tile.is-featured {
  --gold-bright:#E2C6A3;
  --gold-ink:#E2C6A3;
}
/* HEROES ARE PINNED to the original warm values - client: don't change heroes. This
   re-declares the tokens locally so the swap below cannot reach inside any hero. */
.rsg-inm-sv .rsg-hero {
  --acc:#D5AD7B; --acc-ink:#E2C6A3;
  --acc-rgb:213,173,123; --acc-ink-rgb:226,198,163;
  --gold:#D5AD7B; --gold-bright:#E2C6A3; --gold-ink:#805928;
  --tan:#E1C7A4; --tan-deep:#C9A87C;
}
/* the swap itself: the three gold tokens + tan now resolve through the band-aware pair */
.rsg-inm-sv {
  --gold:var(--acc);
  --gold-bright:var(--acc-ink);
  --gold-ink:var(--acc-ink);
  --tan:var(--acc);
  --tan-deep:var(--acc);
  --warm-band:var(--acc);
}
/* ---- the three KEEPS, repointed to pinned tokens so the swap can't move them ---- */
.rsg-inm-sv.rsg-inm-sv .rsg-eyebrow{color:var(--eyebrow-warm)}
.rsg-inm-sv.rsg-inm-sv .rsg-sec--dark .rsg-eyebrow{color:var(--eyebrow-dark)}
.rsg-inm-sv .rsg-sec--dark:not(.rsg-hero) h2 span,
.rsg-inm-sv .rsg-sec--dark:not(.rsg-hero) .rsg-h2 span{color:var(--h2-gold)}
/* ---- star ratings stay a rating colour everywhere ---- */
.rsg-inm-sv .rsg-stars,
.rsg-inm-sv .rsg-tk-stars,
.rsg-inm-sv .rsg-hp-stars,
.rsg-inm-sv .rsg-star,
.rsg-inm-sv .acm3-star,
.rsg-inm-sv .rsg-rev-stars,
.rsg-inm-sv .rsg-xr-stars,
.rsg-inm-sv .rsg-c2-gcard-rate{color:var(--star)}
.rsg-inm-sv .rsg-stars svg,
.rsg-inm-sv .rsg-tk-stars svg,
.rsg-inm-sv .rsg-hp-stars svg,
.rsg-inm-sv .rsg-star svg,
.rsg-inm-sv .acm3-star svg,
.rsg-inm-sv .rsg-rev-stars svg,
.rsg-inm-sv .rsg-xr-stars svg,
.rsg-inm-sv .rsg-c2-gcard-rate svg{fill:var(--star)}

/* italic crutch removed 2026-08-20: heading accent words are span elements now; the accent colour and decoration selectors were re-pointed from em to span in the same round. */
  .rsg-inm-sv h2.rsg-eyebrow{line-height:inherit;text-wrap:pretty}.rsg-inm-sv .rsg-cs-body h3{letter-spacing:-.015em}

/* ===== CLOSING-BAND MASCOT ON THE TOP DIVIDER (client, 2026-08-22) =====
   The homepage closing band's figure, ported and re-scoped - the same port the AC-repair
   page took on 2026-08-19, at the homepage's own values for both of its breakpoints. It
   REPLACES the small sun glyph that used to sit in the middle of this wave, exactly as it
   does on the homepage and the AC-repair page, so the two decorations never compete for
   the centre of the divider.
   TWO things travel with the figure and are not optional:
   1. the band needs the second overflow declaration - clip on X, visible on Y - or the
      section box cuts off the top ~39px of the figure. The plain hidden stays first as the
      fallback for older engines. That pair is why the homepage band carries it too.
   2. the band's content wrapper takes a little top padding so the headline clears the
      figure: --sec-pad is 100px here and the figure reaches 136px into the band.
   The figure is decorative - aria-hidden, empty alt, and pointer-events:none - so it is in
   neither the reading order nor the tab order, and it carries no visible copy. */
.rsg-inm-sv .rsg-cta-figure{display:none}
.rsg-inm-sv .rsg-cta-figure img{display:block;height:100%;width:auto}
@media (min-width:1240px){
  .rsg-inm-sv .rsg-cta-figure{display:block;position:absolute;top:-38px;left:50%;transform:translateX(-50%);
    height:174px;z-index:3;pointer-events:none;
    filter:drop-shadow(0 0 1px rgba(143,204,242,.9)) drop-shadow(0 0 2px rgba(143,204,242,.5)) drop-shadow(0 10px 14px rgba(3,12,24,.45))}
  .rsg-inm-sv .rsg-cta .rsg-wrap{padding-top:48px}
}
@media (max-width:1239px){
  .rsg-inm-sv .rsg-cta-figure{display:block;position:absolute;top:-30px;left:50%;transform:translateX(-50%);
    height:96px;z-index:3;pointer-events:none;
    filter:drop-shadow(0 0 1px rgba(143,204,242,.9)) drop-shadow(0 0 2px rgba(143,204,242,.5)) drop-shadow(0 10px 14px rgba(3,12,24,.45))}
  .rsg-inm-sv .rsg-cta .rsg-wrap{padding-top:38px}
}
@media (max-width:1180px){
}
@media (max-width:1024px){
}
@media (max-width:767px){
}

/* GBP link on the Google-reviews lockup - added 2026-09-08. Bare anchors are unstyled
   on these pages (UA blue + underline), so inherit colour and add an explicit hover. */
.rsg-inm-sv .rsg-gbp-link{color:inherit;text-decoration:none}
.rsg-inm-sv .rsg-gbp-link:hover{text-decoration:underline}
.rsg-inm-sv .rsg-gbp-link:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}

/* ==================== BOOK NOW POPUP (client-directed 2026-08-03) ====================
   All three content templates (homepage / about / service) specify a hero CTA
   "Book Now (this would lead to a pop up form)".

   !! CONTEXT.md RED LINE #4 forbids online BOOKING: "No online booking, no live chat,
   no online/phone estimates - ever. Every project gets a site visit." The conflict was
   raised with the client on 2026-08-03 and he directed us to add the popup as specified.
   Logged here as HIS decision, not the content team's.

   Implemented exactly as the template words it: a pop-up REQUEST FORM, not a scheduling
   calendar. It collects a call-back request; no time slots are offered and no price is
   quoted, so the site-visit rule still holds. Fields are the template's own
   (Name / Phone / City / How can we help?).

   Documented Elementor-rule exceptions, both intrinsic to a modal: position:fixed and a
   z-index above 20. Scoped to the page root; nothing leaks to the parent WP page.
*/
.rsg-inm-sv .rsg-bk{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:24px}
.rsg-inm-sv .rsg-bk.is-open{display:flex}
.rsg-inm-sv .rsg-bk-scrim{position:absolute;inset:0;background:rgba(7,24,40,.62)}
.rsg-inm-sv .rsg-bk-panel{position:relative;z-index:1;width:100%;max-width:520px;
  max-height:calc(100vh - 48px);overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:30px 30px 26px;
  box-shadow:0 24px 60px rgba(7,24,40,.30),0 4px 14px rgba(7,24,40,.16)}
.rsg-inm-sv .rsg-bk-eye{display:block;font-family:var(--font-heading);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px}
.rsg-inm-sv .rsg-bk-title{font-family:var(--font-heading);font-size:26px;font-weight:800;
  line-height:1.18;color:var(--ink);margin:0;text-wrap:balance}
.rsg-inm-sv .rsg-bk-sub{margin:10px 0 20px;font-size:14.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.rsg-inm-sv .rsg-bk-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(6,54,118,.24);background:rgba(6,54,118,.06);color:var(--navy);
  font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .25s ease,border-color .25s ease}
.rsg-inm-sv .rsg-bk-close:hover{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.rsg-inm-sv .rsg-bk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rsg-inm-sv .rsg-bk-field{display:block;margin-bottom:14px}
.rsg-inm-sv .rsg-bk-field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.rsg-inm-sv .rsg-bk-field input,.rsg-inm-sv .rsg-bk-field select,.rsg-inm-sv .rsg-bk-field textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:11px 13px;line-height:1.45}
.rsg-inm-sv .rsg-bk-field textarea{min-height:84px;resize:vertical}
.rsg-inm-sv .rsg-bk-field input:focus-visible,.rsg-inm-sv .rsg-bk-field select:focus-visible,
.rsg-inm-sv .rsg-bk-field textarea:focus-visible,.rsg-inm-sv .rsg-bk-close:focus-visible,
.rsg-inm-sv .rsg-bk-submit:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.rsg-inm-sv .rsg-bk-consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;
  font-size:12px;line-height:1.5;color:var(--muted)}
.rsg-inm-sv .rsg-bk-consent input{margin-top:2px;flex:0 0 auto}
.rsg-inm-sv .rsg-bk-submit{width:100%;padding:14px 22px;border:0;border-radius:9px;cursor:pointer;
  background:var(--red);color:#FFFFFF;font-family:var(--font-heading);font-size:15.5px;
  font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  transform-origin:center;transition:transform .2s ease,filter .2s ease}
.rsg-inm-sv .rsg-bk-submit:hover{transform:scale(1.02);filter:brightness(1.06)}
.rsg-inm-sv .rsg-bk-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center}
.rsg-inm-sv .rsg-bk-note a{color:var(--navy);font-weight:600}
@media (max-width:520px){
  .rsg-inm-sv .rsg-bk{padding:14px}
  .rsg-inm-sv .rsg-bk-panel{padding:26px 20px 22px}
  .rsg-inm-sv .rsg-bk-row{grid-template-columns:1fr;gap:0}
  .rsg-inm-sv .rsg-bk-title{font-size:22px}
}