@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* ============================================================================
 * TYPE SHEET: SERVICE PAGES
 *
 * Loaded for any page whose `_inm_page_type` post meta is `service`. It began as
 * the AC-repair page's own stylesheet; that page is simply the first page of this
 * type. A SECOND service page now costs 0 KB of CSS instead of 170 KB.
 *
 * THE WRAPPER CONTRACT - this is the one thing you must get right. Every rule here
 * is scoped to `.rsg-inm-ac`, so a new service page's root element must carry:
 *
 *     <div class="rsg-inm-ac rsg-site">
 *
 * `rsg-inm-ac` is a historical name (this type's first page was AC repair), not a
 * statement that the page is about air conditioning. It was deliberately NOT renamed:
 * it appears 828 times in this file, and a rename buys legibility at the cost of
 * rewriting every selector in a 170 KB sheet for no rendering benefit.
 *
 * If one service page needs to differ, do NOT edit this file. Add
 * assets/inm-page-<that-slug>.css - it loads AFTER this sheet, so its rules win.
 * ============================================================================ */



/* ---------------- SOLSTICE tokens (scoped) ---------------- */
.rsg-inm-ac{

  --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:54px; --fs-h2:40px; --fs-eyebrow:13px; --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-ac .rsg-sec{padding:var(--sec-pad) 0;position:relative}
.rsg-inm-ac .rsg-sec--dark{
  background:var(--band-grad);color:#E7EEF3}
.rsg-inm-ac .rsg-sec--dark>.rsg-wrap{position:relative;z-index:1}
.rsg-inm-ac .rsg-sec--light{background:var(--paper);color:var(--ink)}
.rsg-inm-ac .rsg-sec--cream{background:var(--cream);color:var(--ink)}

.rsg-inm-ac h1,.rsg-inm-ac h2,.rsg-inm-ac h3,.rsg-inm-ac h4{
  font-family:var(--font-display);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
.rsg-inm-ac h3,.rsg-inm-ac h4{letter-spacing:-.006em}
.rsg-inm-ac p{margin:0;text-wrap:pretty}
.rsg-inm-ac .rsg-eyebrow{
  display:inline-flex;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-ac .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-ac .rsg-sec--dark .rsg-eyebrow::before{background:linear-gradient(90deg,var(--eyebrow-dark),var(--accent-dark))}
.rsg-inm-ac .rsg-rv .rsg-eyebrow::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) .35s}

.rsg-inm-ac .rsg-h2{font-size:var(--fs-h2);font-weight:800}
.rsg-inm-ac h1,.rsg-inm-ac .rsg-h2{text-transform:uppercase}
.rsg-inm-ac h1{letter-spacing:.004em}
.rsg-inm-ac .rsg-h2{letter-spacing:.014em;line-height:1.12}
.rsg-inm-ac .rsg-sub{margin-top:15px;font-size:18px;color:var(--muted);max-width:60ch}
.rsg-inm-ac .rsg-sec--dark .rsg-sub{color:var(--muted-dark)}

.rsg-inm-ac .rsg-center .rsg-eyebrow{justify-content:center}
/* ===== TWO-HEADING BLOCKS (client, 2026-08-19) =====
   Where the source copy carries two consecutive headings, the FIRST one plays the
   eyebrow and keeps an h2 tag, and the SECOND is the section headline on an h3 tag.
   Our own invented eyebrow label is deleted in those blocks - it was never in the doc.
   These rules re-state GEOMETRY ONLY and never colour: eyebrow ink comes from the
   doubled-root rules at higher specificity, so each band keeps its correct colour. */
/* NOT inline-flex, unlike the p eyebrows: a flex row turns the accent em into its own
   flex item, and the eyebrow's gap:10px then opens a hole in the middle of the phrase.
   Block layout keeps the words as normal inline text; the dash becomes inline-block. */
.rsg-inm-ac h2.rsg-eyebrow:not(:has(span)){line-height:1.65;text-wrap:wrap}.rsg-sgx-c5 h2.sgx5-eyebrow{line-height:1.65;text-wrap:wrap}.rsg-acm-c3 h2.acm3-eyebrow{line-height:1.65;text-wrap:wrap}.rsg-inm-ac h2.rsg-eyebrow:has(span){
  display:block;margin:0 0 15px;
  font-family:var(--font-heading);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.16em;line-height:1.45;text-transform:uppercase;text-wrap:balance}
.rsg-inm-ac h2.rsg-eyebrow:has(span)::before{
  display:inline-block;vertical-align:middle;margin:-2px 12px 1px 0}
/* one colour across the whole label - an accent word inside a small eyebrow reads as a slip */
.rsg-inm-ac.rsg-inm-ac h2.rsg-eyebrow.rsg-eyebrow span{font-style:normal;color:inherit}
.rsg-inm-ac h3.rsg-h2{margin:0}
.rsg-inm-ac .rsg-center h2.rsg-h2,.rsg-inm-ac .rsg-center h3.rsg-h2{margin-left:auto;margin-right:auto}
.rsg-inm-ac .rsg-center .rsg-sub{margin-left:auto;margin-right:auto}
.rsg-inm-ac .rsg-sechead{max-width:760px;margin-bottom:52px}
.rsg-inm-ac .rsg-sechead.rsg-center{margin-left:auto;margin-right:auto}

/* reveal */
.rsg-inm-ac .rsg-rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rsg-inm-ac .rsg-rv.rsg-rv--l{transform:translateX(-36px)}
.rsg-inm-ac .rsg-rv.rsg-rv--r{transform:translateX(36px)}
.rsg-inm-ac .rsg-rv.rsg-rv--pop{transform:translateY(20px) scale(.96)}
.rsg-inm-ac .rsg-rv.is-in{opacity:1;transform:none}
.rsg-inm-ac .rsg-d1{transition-delay:.06s}.rsg-inm-ac .rsg-d2{transition-delay:.12s}
.rsg-inm-ac .rsg-d3{transition-delay:.18s}.rsg-inm-ac .rsg-d4{transition-delay:.24s}
.rsg-inm-ac .rsg-d5{transition-delay:.30s}.rsg-inm-ac .rsg-d6{transition-delay:.36s}

/* dark-band dividers (homepageextreme style): paper wave + spectrum line + gold sun / paper arc */
.rsg-inm-ac .rsg-div-top{position:absolute;top:-1px;left:0;right:0;height:60px;pointer-events:none;z-index:3}
.rsg-inm-ac .rsg-div-top>svg{width:100%;height:100%;display:block}
.rsg-inm-ac .rsg-div-line{stroke-dasharray:760;stroke-dashoffset:760;transition:stroke-dashoffset 1.8s var(--ease) .2s}
.rsg-inm-ac .rsg-div-top.is-in .rsg-div-line{stroke-dashoffset:0}
.rsg-inm-ac .rsg-div-btm{position:absolute;bottom:-1px;left:0;right:0;height:34px;pointer-events:none;z-index:3}
.rsg-inm-ac .rsg-div-btm>svg{width:100%;height:100%;display:block}
.rsg-inm-ac .rsg-div-sun{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;
  background:var(--red);
  box-shadow:0 2px 8px rgba(26,28,27,.20);display:flex;align-items:center;justify-content:center}
.rsg-inm-ac .rsg-div-sun svg{width:22px;height:22px}

/* buttons (band-aware + shine) */
.rsg-inm-ac .rsg-btn,.rsg-inm-ac .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:16.5px;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-ac .rsg-btn{background:var(--red)}
.rsg-inm-ac .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-ac .rsg-btn:hover,.rsg-inm-ac .rsg-btn2:hover{transform:scale(1.05)}
.rsg-inm-ac .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:.04em;text-transform:uppercase;
  text-decoration:none;color:#fff;cursor:pointer;transform-origin:center;
  transition:transform .28s var(--ease),border-color .25s,background .25s}
.rsg-inm-ac .rsg-ghost:hover{transform:scale(1.05);border-color:var(--gold-bright);background:rgba(13,29,50,.62)}
.rsg-inm-ac .rsg-sec--light .rsg-ghost,.rsg-inm-ac .rsg-sec--cream .rsg-ghost{color:var(--ink);border-color:var(--line);background:var(--card)}
.rsg-inm-ac .rsg-sec--light .rsg-ghost:hover,.rsg-inm-ac .rsg-sec--cream .rsg-ghost:hover{border-color:var(--gold)}
.rsg-inm-ac .rsg-btn svg,.rsg-inm-ac .rsg-btn2 svg,.rsg-inm-ac .rsg-ghost svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.rsg-inm-ac a:focus-visible,.rsg-inm-ac button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* stars */
.rsg-inm-ac .rsg-stars{display:inline-flex;gap:2px}
.rsg-inm-ac .rsg-stars svg{width:15px;height:15px;fill:var(--gold-bright)}

/* chips */
.rsg-inm-ac .rsg-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;font-size:14px;font-weight:600}
.rsg-inm-ac .rsg-sec--dark .rsg-chip{background:var(--navy-card);border:1px solid var(--navy-line);color:#fff;
  box-shadow:0 2px 8px rgba(5,18,32,.28),inset 0 1px 0 rgba(255,255,255,.05)}
.rsg-inm-ac .rsg-chip::before{content:"";width:9px;height:9px;background:var(--gold-bright);transform:rotate(45deg);flex:0 0 auto}

/* small icon well used across sections */
.rsg-inm-ac .rsg-ic{width:50px;height:50px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center}
.rsg-inm-ac .rsg-sec--dark .rsg-ic{background:var(--navy-card);border:1px solid var(--navy-line)}
.rsg-inm-ac .rsg-sec--dark .rsg-ic svg{stroke:var(--gold-bright)}
.rsg-inm-ac .rsg-sec--light .rsg-ic,.rsg-inm-ac .rsg-sec--cream .rsg-ic{background:linear-gradient(135deg,var(--royal),var(--royal-2))}
.rsg-inm-ac .rsg-sec--light .rsg-ic svg,.rsg-inm-ac .rsg-sec--cream .rsg-ic svg{stroke:#fff}
.rsg-inm-ac .rsg-ic svg{width:25px;height:25px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* =======================================================================
   S1 · HERO (dark) — content left · rich call card right · trust strip
======================================================================= */
.rsg-inm-ac .rsg-hero{position:relative;overflow:hidden;padding:100px 0 40px;
  background-color:var(--void);
  /* v3 (2026-07-23): "too much blue" fix -- kept C8's 102deg dark left-scrim but swapped the
     bright-azure 322deg wash for a DEEP CHARCOAL-NAVY (void/near-black, no bright blue) so the
     hero reads dark+premium (not a blue field) and the blue call-card becomes the focal pop;
     the ground is the worker-crew frame as of 2026-08-22, which already wears the current uniform */
  background-image:
    linear-gradient(102deg, rgba(8,25,42,.92) 0%, rgba(8,25,42,.72) 30%, rgba(8,25,42,.30) 52%, rgba(8,25,42,0) 74%),
    linear-gradient(322deg, rgba(8,25,42,.74) 0%, rgba(14,36,62,.90) 48%, rgba(8,20,35,.98) 100%),
    url('https://ikur82m4ir.wpdns.site/wp-content/uploads/2026/08/svc-cooling-2026-crew.webp');
  background-size:cover;background-position:center 28%;background-repeat:no-repeat}
.rsg-inm-ac .rsg-hero::before{content:"";position:absolute;left:-8%;bottom:-10%;width:52%;height:78%;
  background:radial-gradient(circle at 30% 70%, rgba(5,16,30,.55), transparent 62%);pointer-events:none;filter:blur(6px)}
.rsg-inm-ac .rsg-hero-rays{position:absolute;top:-160px;right:-120px;width:540px;height:540px;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 90deg at 50% 50%, rgba(169,211,240,.10) 0 1deg, transparent 1deg 6.6deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,transparent 66%);mask:radial-gradient(circle at 50% 50%,#000 0,transparent 66%)}
@keyframes rsgac-spin{to{transform:rotate(360deg)}}
.rsg-inm-ac .rsg-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;padding-bottom:70px}
.rsg-inm-ac .rsg-hero-loc{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ice);margin-bottom:16px}
.rsg-inm-ac .rsg-hero-loc svg{width:15px;height:15px;fill:var(--ice)}
.rsg-inm-ac .rsg-hero h1{font-family:var(--font-heading);font-size:var(--fs-h1);font-weight:800;letter-spacing:-.012em;color:#fff;max-width:15ch;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-ac .rsg-hero h1 span{font-style:normal;color:var(--gold-bright);position:relative;white-space:nowrap}
.rsg-inm-ac .rsg-hero h1 span::after{content:"";position:absolute;left:1%;right:1%;bottom:-6px;height:4px;border-radius:2px;background:var(--red)}
.rsg-inm-ac .rsg-hero-intro{margin:22px 0 24px;max-width:52ch;font-size:17.5px;color:var(--muted-dark)}
.rsg-inm-ac .rsg-hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.rsg-inm-ac .rsg-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
/* hero call card (replaces the refs' booking FORM — red-line-safe) */
.rsg-inm-ac .rsg-hero-card{position:relative;isolation:isolate;overflow:hidden;
  width:100%;max-width:460px;margin-left:auto;padding:30px 30px 28px;border-radius:20px;
  background:var(--band-dark);
  border:1px solid var(--ice-line);
  box-shadow:0 30px 60px -18px rgba(5,18,38,.72),0 12px 26px -12px rgba(5,18,38,.55),inset 0 1px 0 rgba(179,211,238,.22)}
/* bottom-right deepening scrim keeps text AA over the lighter azure corner */
.rsg-inm-ac .rsg-hero-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(205deg,rgba(11,27,50,0) 34%,rgba(11,27,50,.52) 100%)}
/* slow diagonal shine sweep -- signature motion (killed by the global reduced-motion rule) */
.rsg-inm-ac .rsg-hero-card::after{content:"";position:absolute;top:-25%;left:0;z-index:1;width:46%;height:150%;
  background:linear-gradient(90deg,transparent 0%,rgba(226,240,251,.14) 46%,rgba(226,240,251,.14) 54%,transparent 100%);
  transform:translateX(-170%) skewX(-16deg);
  animation:rsgac-cardshine 7.5s var(--ease) 1.4s infinite;pointer-events:none}
.rsg-inm-ac .rsg-hero-card>*{position:relative;z-index:2}
/* 3 parallel light-grey waves, centered + edge-faded, gently scrolling (client ask) */
.rsg-inm-ac .rsg-hero-card>.rsg-hc-waves{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:132px;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent)}
.rsg-inm-ac .rsg-hc-waves svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rsg-inm-ac .rsg-hc-waves g{opacity:.16}
.rsg-inm-ac .rsg-hc-wave-move{animation:rsgac-wavescroll 6s linear infinite}
@keyframes rsgac-wavescroll{to{transform:translateX(-120px)}}
@keyframes rsgac-cardshine{0%{transform:translateX(-170%) skewX(-16deg)}50%{transform:translateX(370%) skewX(-16deg)}100%{transform:translateX(370%) skewX(-16deg)}}
/* gold sun medallion, corner */
.rsg-inm-ac .rsg-hc-medallion{position:absolute;top:18px;right:18px;z-index:4;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--gold-bright) 0%,var(--gold) 54%,var(--gold-ink) 100%);
  box-shadow:0 0 0 1px rgba(var(--acc-ink-rgb),.55),0 6px 16px rgba(5,18,38,.45),inset 0 1px 2px rgba(255,255,255,.5)}
.rsg-inm-ac .rsg-hc-medallion::before{content:"";position:absolute;inset:-9px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(var(--acc-ink-rgb),.6) 0deg 5deg,transparent 5deg 18deg);
  -webkit-mask:radial-gradient(circle,transparent 57%,#000 60%,#000 72%,transparent 75%);
          mask:radial-gradient(circle,transparent 57%,#000 60%,#000 72%,transparent 75%);opacity:.72}
.rsg-inm-ac .rsg-hc-medallion::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55)}
.rsg-inm-ac .rsg-hero-card h2{margin:0 60px 8px 0;font-family:var(--font-display);font-weight:800;font-size:23px;line-height:1.12;letter-spacing:-.01em;color:#fff}
.rsg-inm-ac .rsg-hero-card .rsg-hc-sub{margin:0 0 18px;font-size:14.5px;line-height:1.5;color:#D7E5F1}
/* service visual (client ask): bespoke AC-condenser emblem -- slow-spinning fan + drifting cool air, tonal ice + gold hub; CSS-animated so the page's reduced-motion catch-all disables it */
.rsg-inm-ac .rsg-hc-visual{margin:10px 0 22px;display:flex;justify-content:center}
.rsg-inm-ac .rsg-hc-visual svg{width:100%;max-width:296px;height:auto;display:block;overflow:visible}
/* AC-condenser emblem is STATIC per client (no fan spin / no air drift); the light-grey waves keep their scroll animation */
.rsg-inm-ac .rsg-hc-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;
  padding:13px 18px;border-radius:13px;text-decoration:none;
  background:linear-gradient(135deg,rgba(8,25,42,.66),rgba(6,39,85,.5));
  border:1px solid var(--ice-line);box-shadow:inset 0 1px 0 rgba(179,211,238,.16);
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.rsg-inm-ac .rsg-hc-cta-label{font-family:var(--font-heading);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ice)}
.rsg-inm-ac .rsg-hc-cta-num{font-family:var(--font-heading);font-weight:800;font-size:20px;letter-spacing:.005em;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.rsg-inm-ac .rsg-hc-cta:hover{transform:translateY(-2px);border-color:var(--gold-bright);box-shadow:0 10px 22px -8px rgba(5,18,38,.6),inset 0 1px 0 rgba(179,211,238,.24)}
.rsg-inm-ac .rsg-hero-card .rsg-hc-note{margin:15px 0 0;padding-top:14px;border-top:1px solid var(--navy-line);font-size:12px;line-height:1.4;color:var(--muted-dark);font-variant-numeric:tabular-nums}
/* hero trust strip */
.rsg-inm-ac .rsg-hero-strip{position:relative;z-index:2;border-top:1px solid var(--navy-line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--navy-line)}
.rsg-inm-ac .rsg-hero-strip>div{background:linear-gradient(322deg,rgba(var(--acc-rgb),.06),transparent);padding:24px 22px;display:flex;align-items:center;gap:14px}
.rsg-inm-ac .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}
.rsg-inm-ac .rsg-hero-strip span{font-size:12.5px;color:var(--muted-dark);font-weight:600}
.rsg-inm-ac .rsg-hero-strip .rsg-ic{width:auto;height:auto;background:none;border:0;border-radius:0}
.rsg-inm-ac .rsg-hero-strip .rsg-ic svg{width:26px;height:26px;stroke:var(--gold-bright)}

/* =======================================================================
   S2 · MARIETTA SUMMERS + FIGURES (light) — text+ministats left · photo right
======================================================================= */
.rsg-inm-ac .rsg-works-top{display:grid;grid-template-columns:1.06fr .94fr;gap:54px;align-items:center}
.rsg-inm-ac .rsg-works-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
/* process promises — a 2x2 gold-dot marker list inside the copy column (fills the left column; no big numbers/tiles) */
.rsg-inm-ac .rsg-flow{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:24px 30px}
.rsg-inm-ac .rsg-flow-step{position:relative;padding-left:24px}
.rsg-inm-ac .rsg-flow-node{position:absolute;top:6px;left:0;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E12A43,var(--red) 72%);
  box-shadow:0 0 0 4px rgba(170,24,44,.12);transition:transform .3s var(--ease)}
.rsg-inm-ac .rsg-flow-step:hover .rsg-flow-node{transform:scale(1.18)}
.rsg-inm-ac .rsg-flow-step b{display:block;font-family:var(--font-heading);font-size:16.5px;font-weight:700;letter-spacing:-.006em;color:var(--ink);margin-bottom:5px}
.rsg-inm-ac .rsg-flow-step span{display:block;font-size:14px;color:var(--muted);line-height:1.55}
.rsg-inm-ac .rsg-works-media{position:relative;padding:24px 24px 0 0}
.rsg-inm-ac .rsg-works-frame{position:absolute;inset:0 0 24px 24px;border:1.5px solid rgba(6,54,118,.28);border-radius:var(--r-photo);transform:translate(20px,20px);z-index:1}
.rsg-inm-ac .rsg-works-photo{position:relative;z-index:2;border-radius:var(--r-photo);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-2)}
.rsg-inm-ac .rsg-works-photo img{width:100%;height:440px;object-fit:cover}
.rsg-inm-ac .rsg-works-badge{position:absolute;left:16px;bottom:16px;background:var(--navy);color:#fff;border-radius:11px;padding:12px 16px;box-shadow:var(--shadow-2);border-top:3px solid var(--red)}
.rsg-inm-ac .rsg-works-badge b{display:block;font-family:var(--font-heading);font-size:24px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.rsg-inm-ac .rsg-works-badge span{font-size:12px;color:var(--muted-dark);font-weight:600}

/* =======================================================================
   S3 · SIGNS (dark) — severity card grid
======================================================================= */
/* Warning Signs (S3) is now the self-contained .rsg-sgx-c5 index concept; old severity-board CSS removed 2026-07-23 */

/* =======================================================================
   S4 · PRICING (light) — 3 cards + repair/replace TABLE + note
======================================================================= */
.rsg-inm-ac .rsg-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rsg-inm-ac .rsg-price{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 26px 28px 30px;box-shadow:var(--shadow-1);overflow:hidden;transition:box-shadow .3s var(--ease),border-color .3s}
.rsg-inm-ac .rsg-price:hover{box-shadow:var(--shadow-2);border-color:rgba(6,54,118,.24)}
.rsg-inm-ac .rsg-price::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--azure),var(--royal))}
.rsg-inm-ac .rsg-price.is-feat{border-color:rgba(170,24,44,.28)}
.rsg-inm-ac .rsg-price.is-feat::before{background:linear-gradient(180deg,var(--red),var(--gold))}
.rsg-inm-ac .rsg-price h3{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--ink)}
.rsg-inm-ac .rsg-price .rsg-price-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:7px}
.rsg-inm-ac .rsg-price p{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.55}
.rsg-inm-ac .rsg-rvr{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1);overflow:hidden}
.rsg-inm-ac .rsg-rvr-hd{display:grid;grid-template-columns:1.2fr 1fr 1fr}
.rsg-inm-ac .rsg-rvr-hd>div{padding:18px 22px;font-family:var(--font-heading);font-weight:700;font-size:15px;letter-spacing:.02em}
.rsg-inm-ac .rsg-rvr-hd .rsg-rvr-h0{color:var(--muted);text-transform:uppercase;font-size:12px;letter-spacing:.12em;display:flex;align-items:center}
.rsg-inm-ac .rsg-rvr-hd .rsg-rvr-h1{background:rgba(46,129,193,.08);color:var(--royal);display:flex;align-items:center;gap:9px}
.rsg-inm-ac .rsg-rvr-hd .rsg-rvr-h2{background:rgba(var(--acc-rgb),.12);color:var(--gold-ink);display:flex;align-items:center;gap:9px}
.rsg-inm-ac .rsg-rvr-hd .rsg-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.rsg-inm-ac .rsg-rvr-hd .rsg-rvr-h1 .rsg-dot{background:var(--azure)}
.rsg-inm-ac .rsg-rvr-hd .rsg-rvr-h2 .rsg-dot{background:var(--gold)}
.rsg-inm-ac .rsg-rvr-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;border-top:1px solid var(--line)}
.rsg-inm-ac .rsg-rvr-row>div{padding:16px 22px;font-size:14.5px;color:var(--ink);line-height:1.45}
.rsg-inm-ac .rsg-rvr-row>div:first-child{font-weight:700;color:var(--muted);background:rgba(19,37,61,.02)}
.rsg-inm-ac .rsg-rvr-row>div:nth-child(2){background:rgba(46,129,193,.04)}
.rsg-inm-ac .rsg-rvr-row>div:nth-child(3){background:rgba(var(--acc-rgb),.05)}
.rsg-inm-ac .rsg-price-note{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card-dark);border-left:4px solid var(--red);border-radius:13px;padding:18px 22px;color:#E7EEF3;font-size:15px;font-weight:600}
.rsg-inm-ac .rsg-price-note b{color:var(--gold-bright)}

/* =======================================================================
   S5 · EVERY TYPE OF AC (dark) — equipment grid (6)
======================================================================= */
.rsg-inm-ac .rsg-types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rsg-inm-ac .rsg-type{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  border:1px solid var(--navy-line);border-radius:var(--r-card);padding:26px 24px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.rsg-inm-ac .rsg-type:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(5,18,32,.42);border-color:var(--ice-line)}
.rsg-inm-ac .rsg-type .rsg-ic{width:54px;height:54px;border-radius:13px;position:relative;margin-bottom:18px}
.rsg-inm-ac .rsg-type .rsg-ic::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--ice);opacity:.5}
.rsg-inm-ac .rsg-type .rsg-ic svg{width:27px;height:27px}
.rsg-inm-ac .rsg-type h3{font-family:var(--font-heading);font-size:19px;font-weight:700;color:#fff}
.rsg-inm-ac .rsg-type p{margin-top:9px;font-size:14px;color:var(--muted-dark);line-height:1.55}
.rsg-inm-ac .rsg-types-foot{margin-top:36px;text-align:center}

/* =======================================================================
   S6 · MEET THE OWNER (light) — photo left · text right
======================================================================= */
.rsg-inm-ac .rsg-owner-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.rsg-inm-ac .rsg-owner-media{position:relative;padding:34px 0 22px 34px}
/* decorative gold ring mostly HIDDEN BEHIND the photo; only a top-left crescent peeks (photo z-index wins) */
.rsg-inm-ac .rsg-owner-arc{position:absolute;left:8px;top:-16px;width:206px;height:206px;border-radius:50%;border:1.5px solid rgba(var(--acc-rgb),.5);z-index:0;pointer-events:none}
.rsg-inm-ac .rsg-owner-arc::after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(var(--acc-rgb),.22)}
.rsg-inm-ac .rsg-owner-photo{position:relative;z-index:2;border-radius:var(--r-photo);overflow:hidden;border:1px solid var(--ice-line);box-shadow:var(--shadow-2);background:var(--card-dark)}
.rsg-inm-ac .rsg-owner-photo img{width:100%;height:470px;object-fit:cover;display:block}
/* white name plate (light theme) on the photo */
.rsg-inm-ac .rsg-owner-tag{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.96);border-radius:11px;padding:10px 16px;box-shadow:0 10px 26px rgba(5,18,32,.32)}
.rsg-inm-ac .rsg-owner-tag b{font-family:var(--font-heading);font-size:15.5px;font-weight:800;letter-spacing:-.005em;color:var(--ink);line-height:1.1}
.rsg-inm-ac .rsg-owner-tag span{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rsg-inm-ac .rsg-owner ul{margin:24px 0 28px;padding:0;list-style:none;display:grid;gap:15px}
.rsg-inm-ac .rsg-owner li{display:flex;gap:13px;font-size:16px;color:#E7EEF3;line-height:1.55}
.rsg-inm-ac .rsg-owner li svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px;fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* =======================================================================
   S7 · HOW TO CHOOSE A CONTRACTOR (dark) — checklist card + note
======================================================================= */
.rsg-inm-ac .rsg-choose-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:58px;align-items:start}
.rsg-inm-ac .rsg-choose-cred{margin-top:26px;display:flex;gap:15px;align-items:center;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1)}
.rsg-inm-ac .rsg-choose-cred svg{width:30px;height:30px;flex:0 0 auto;fill:none;stroke:var(--royal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rsg-inm-ac .rsg-choose-cred b{display:block;font-family:var(--font-heading);font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.004em}
.rsg-inm-ac .rsg-choose-cred span{font-size:13px;color:var(--muted);line-height:1.45}
.rsg-inm-ac .rsg-choose-cta{margin-top:24px}
/* open editorial checklist with gold check-seals (no boxy card) */
.rsg-inm-ac .rsg-checklist{display:flex;flex-direction:column}
.rsg-inm-ac .rsg-check-item{position:relative;display:flex;gap:20px;align-items:flex-start;padding:22px 18px;border-top:1px solid var(--line);transition:background .3s var(--ease)}
.rsg-inm-ac .rsg-check-item:first-child{border-top:0}
.rsg-inm-ac .rsg-check-item::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:3px;background:var(--gold);transform:scaleY(0);transform-origin:50% 50%;transition:transform .3s var(--ease)}
.rsg-inm-ac .rsg-check-item:hover{background:rgba(var(--acc-rgb),.06)}
.rsg-inm-ac .rsg-check-item:hover::before{transform:scaleY(1)}
.rsg-inm-ac .rsg-check-seal{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--acc-rgb),.1);border:1.5px solid var(--gold);transition:background .3s var(--ease),border-color .3s}
.rsg-inm-ac .rsg-check-seal svg{width:22px;height:22px;fill:none;stroke:var(--gold-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.rsg-inm-ac .rsg-check-item:hover .rsg-check-seal{background:var(--gold);border-color:var(--gold)}
.rsg-inm-ac .rsg-check-item:hover .rsg-check-seal svg{stroke:#fff}
.rsg-inm-ac .rsg-check-tx{padding-top:3px}
.rsg-inm-ac .rsg-check-tx b{display:block;font-family:var(--font-heading);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.006em;margin-bottom:5px}
.rsg-inm-ac .rsg-check-tx span{display:block;font-size:14.5px;color:var(--muted);line-height:1.55}

/* =======================================================================
   S8 · STEP BY STEP — see the .rsg-hiw-* block in the alignment stylesheet
======================================================================= */
/* 2026-08-18: the old dark .rsg-clmx-c2 concept that lived here (own scoped
   style/script, merged from climate-concepts.html). The old .rsg-clim-*
   focal-stat CSS was pruned here on merge. */

/* =======================================================================
   S9 · WHY CHOOSE US (dark) — 1 feature + 3 cards
======================================================================= */
/* statement-dominant: one big red manifesto + two quiet tenets */
.rsg-inm-ac .rsg-why-statement{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--red),var(--red-deep));border-radius:var(--r-card);padding:46px 50px;box-shadow:0 18px 44px rgba(170,24,44,.26)}
.rsg-inm-ac .rsg-why-statement::after{content:"";position:absolute;right:-80px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.rsg-inm-ac .rsg-why-statement .rsg-why-k{position:relative;display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.rsg-inm-ac .rsg-why-statement h4{position:relative;margin-top:14px;font-family:var(--font-display);font-size:clamp(27px,3.2vw,36px);font-weight:800;color:#fff;letter-spacing:-.018em;line-height:1.08;max-width:20ch}
.rsg-inm-ac .rsg-why-statement p{position:relative;margin-top:16px;font-size:16px;color:rgba(255,255,255,.94);line-height:1.65;max-width:64ch}
.rsg-inm-ac .rsg-why-tenets{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rsg-inm-ac .rsg-why-tenet{position:relative;overflow:hidden;padding:26px 28px 26px 32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1);transition:box-shadow .3s var(--ease),border-color .3s}
.rsg-inm-ac .rsg-why-tenet::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:4px;border-radius:3px;background:var(--red)}
.rsg-inm-ac .rsg-why-tenet:hover{box-shadow:var(--shadow-2);border-color:rgba(170,24,44,.24)}
.rsg-inm-ac .rsg-why-tenet .rsg-why-k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.rsg-inm-ac .rsg-why-tenet h4,.rsg-inm-ac .rsg-why-tenet h3{margin-top:8px;font-family:var(--font-heading);font-size:19.5px;font-weight:700;color:var(--ink);letter-spacing:-.006em}
.rsg-inm-ac .rsg-why-tenet p{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.6}

/* =======================================================================
   S10 · CONTACT / call-path (light) — id=ac-contact (NO form; red-line-safe)
======================================================================= */
.rsg-inm-ac .rsg-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch}
.rsg-inm-ac .rsg-contact-card{background:var(--card-dark);border:1px solid var(--ice-line);
  border-radius:var(--r-card);padding:34px 32px;box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.rsg-inm-ac .rsg-contact-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--gold) 50%,var(--azure))}
.rsg-inm-ac .rsg-contact-card .rsg-eyebrow{color:var(--eyebrow-dark)}
.rsg-inm-ac .rsg-contact-card h2{font-family:var(--font-display);font-size:28px;font-weight:800;color:#fff;letter-spacing:-.01em}
.rsg-inm-ac .rsg-steps{margin:22px 0;padding:0;list-style:none;display:grid;gap:2px}
.rsg-inm-ac .rsg-step-row{display:flex;gap:16px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--navy-line)}
.rsg-inm-ac .rsg-step-row:last-child{border-bottom:0}
.rsg-inm-ac .rsg-step-node{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(169,211,240,.1);border:1px solid var(--ice-line)}
.rsg-inm-ac .rsg-step-node span{width:8px;height:8px;border-radius:50%;background:var(--gold-bright)}
.rsg-inm-ac .rsg-step-row b{display:block;font-family:var(--font-heading);font-size:16px;color:#fff;font-weight:700}
.rsg-inm-ac .rsg-step-row p{font-size:14px;color:var(--muted-dark);line-height:1.5}
.rsg-inm-ac .rsg-contact-phone{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  padding:18px;border-radius:var(--r-btn);background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--font-heading);font-size:24px;font-weight:800;box-shadow:0 12px 30px rgba(170,24,44,.34);transition:transform .25s var(--ease)}
.rsg-inm-ac .rsg-contact-phone:hover{transform:scale(1.03)}
.rsg-inm-ac .rsg-contact-phone svg{width:24px;height:24px;fill:currentColor}
.rsg-inm-ac .rsg-contact-info{display:flex;flex-direction:column;justify-content:center}
.rsg-inm-ac .rsg-contact-info .rsg-info-row{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}
.rsg-inm-ac .rsg-contact-info .rsg-info-row:last-child{border-bottom:0}
.rsg-inm-ac .rsg-contact-info .rsg-ic{width:46px;height:46px}
.rsg-inm-ac .rsg-contact-info .rsg-ic svg{width:22px;height:22px}
.rsg-inm-ac .rsg-contact-info b{display:block;font-family:var(--font-heading);font-size:16px;color:var(--ink);font-weight:700}
.rsg-inm-ac .rsg-contact-info span{font-size:14.5px;color:var(--muted);line-height:1.5}
.rsg-inm-ac .rsg-contact-info a{color:var(--royal);font-weight:700;text-decoration:none}

/* =======================================================================
   S11 · AREAS + MAP (light) — merged concept .rsg-acm-c3 "Corridor Transit"
======================================================================= */
/* S11 is now the self-contained concept .rsg-acm-c3 (own scoped style/script,
   merged from map-concepts.html). The old .rsg-area-* / .rsg-map-* / .rsg-cities
   CSS + the old map-swap JS were pruned on merge. */

/* =======================================================================
   S12 · REVIEWS (light) — rating lockup + marquee rail
======================================================================= */
.rsg-inm-ac .rsg-rev-head{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:end;margin-bottom:36px}
.rsg-inm-ac .rsg-rev-lock{display:flex;align-items:center;gap:16px;margin-top:18px}
/* 2026-08-15: .rsg-rev-score now holds the Google mark, not a 58px numeral (client: no
   rating numbers on the site). Being multicolour art it needs no light/dark ink override. */
.rsg-inm-ac .rsg-rev-score{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto}
.rsg-inm-ac .rsg-rev-score svg{width:48px;height:48px}
.rsg-inm-ac .rsg-rev-meta{font-size:14px;color:var(--muted)}
.rsg-inm-ac .rsg-rev-meta .rsg-stars svg{width:16px;height:16px}
.rsg-inm-ac .rsg-gpill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1);font-size:13px;font-weight:700;color:var(--ink)}
.rsg-inm-ac .rsg-g{width:20px;height:20px}
.rsg-inm-ac .rsg-rev-rail{display:flex;gap:20px;overflow-x:auto;padding:6px 2px 14px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;min-width:0}
.rsg-inm-ac .rsg-rev-rail::-webkit-scrollbar{width:0;height:0;display:none}
/* Review cards converted to the DARK-BAND CARD GROUND (client, 2026-08-03). This section
   is .rsg-sec--dark, but these cards were still on the light --card (white) with a dark
   hairline and a warm shadow - the only dark-band cards on the site not using the shared
   ground. Now identical to the homepage's dark review cards: the --card-dark gradient
   (logo-blue black -> neutral black), a faint LIGHT hairline instead of a dark one, and NO
   shadow - a warm shadow cannot read on navy, which is why the shop-floor reskin dropped it
   from every dark-band card. Geometry (360/430px basis, 10px radius, 24px padding) is
   unchanged; only the skin moved.
   The inner text HAD to flip with it - ink #1A1C1B on this ground is ~1.2:1. Values are the
   homepage's: #D6E2ED quote (~14:1), --muted-dark byline (~12:1), white name. The star row
   stays pinned amber, which is the reason that pin exists - amber reads on dark. */
.rsg-inm-ac .rsg-rev-card{flex:0 0 360px;min-width:0;background:var(--card-dark);
  border:1px solid rgba(169,211,240,.16);border-radius:var(--r-card);padding:24px;box-shadow:none}
.rsg-inm-ac .rsg-rev-card.is-wide{flex-basis:430px}
.rsg-inm-ac .rsg-rev-card .rsg-stars svg{width:14px;height:14px}
.rsg-inm-ac .rsg-rev-card blockquote{margin:13px 0 0;font-size:14.5px;color:#D6E2ED;line-height:1.6}
.rsg-inm-ac .rsg-rev-card footer{margin-top:15px;display:flex;flex-direction:column;gap:1px;font-size:12.5px;color:var(--muted-dark)}
.rsg-inm-ac .rsg-rev-card footer b{color:#FFFFFF;font-size:14px}
.rsg-inm-ac .rsg-rev-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.rsg-inm-ac .rsg-rev-nav button{width:46px;height:46px;border-radius:50%;cursor:pointer;background:var(--card);border:1.5px solid var(--line);color:var(--ink);font-size:18px;line-height:1;transition:border-color .25s,transform .25s var(--ease)}
.rsg-inm-ac .rsg-rev-nav button:hover{border-color:var(--gold);transform:scale(1.06)}

/* =======================================================================
   S13 · FAQ (cream) — split: title+CTA left · accordion right
======================================================================= */
.rsg-inm-ac .rsg-faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:start}
.rsg-inm-ac .rsg-faq-aside .rsg-faq-call{margin-top:22px}
.rsg-inm-ac .rsg-faq-list{display:flex;flex-direction:column;gap:14px}
  /* ---- FAQ as ONE column, full boxed width (client, 2026-08-19) ----
     Order is eyebrow, heading, text, FAQs, then the CTA last. The head block is no
     longer a side column, so it is no longer an aside element and the horizontal
     slide-in reveals were dropped for plain fade-ups. The sub's measure cap is
     released because the request is explicitly full width. */
  .rsg-inm-ac .rsg-faq-grid{grid-template-columns:1fr;gap:26px;align-items:stretch}
  .rsg-inm-ac .rsg-faq-aside .rsg-sub{max-width:none}
  .rsg-inm-ac .rsg-faq-grid > .rsg-faq-call{margin-top:4px}
.rsg-inm-ac .rsg-faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.rsg-inm-ac .rsg-faq-item.is-open{border-color:rgba(26,28,27,.24);box-shadow:inset 3px 0 0 var(--red),var(--shadow-1)}
.rsg-inm-ac .rsg-faq-q{position:relative;display:block;width:100%;text-align:left;cursor:pointer;background:transparent;border:0;
  padding:20px 60px 20px 22px;font-family:var(--font-heading);font-size:17px;font-weight:700;color:var(--ink);line-height:1.35}
.rsg-inm-ac .rsg-faq-q::before{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(6,54,118,.06);border:1px solid rgba(6,54,118,.24);transition:background .3s,border-color .3s}
/* chevron centring -- see homepageextreme.html for the full rationale. Ink centre of a 9px
   border-box with 2.4px right/bottom borders is 5.9px. Token centre = right 16+15 = 31px. */
.rsg-inm-ac .rsg-faq-q::after{content:"";position:absolute;right:27.9px;top:50%;margin-top:-5.9px;width:9px;height:9px;border-right:2.4px solid var(--navy);border-bottom:2.4px solid var(--navy);transform-origin:5.9px 5.9px;transform:rotate(45deg);transition:transform .3s var(--ease),border-color .3s}
.rsg-inm-ac .rsg-faq-item:hover .rsg-faq-q::before{border-color:rgba(6,54,118,.48)}
.rsg-inm-ac .rsg-faq-item.is-open .rsg-faq-q::before{background:var(--navy);border-color:var(--navy)}
.rsg-inm-ac .rsg-faq-item.is-open .rsg-faq-q::after{transform:rotate(-135deg);border-color:var(--paper)}
.rsg-inm-ac .rsg-faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.rsg-inm-ac .rsg-faq-a p{padding:0 22px 22px;font-size:15px;color:var(--muted);line-height:1.62}

/* =======================================================================
   S14 · CLOSING (dark) — "you get a person, not a call center"
======================================================================= */
.rsg-inm-ac .rsg-close{position:relative;overflow:hidden;overflow:clip visible;text-align:center}
/* ===== CLOSING-BAND MASCOT ON THE TOP DIVIDER (client, 2026-08-19) =====
   The homepage closing band's figure, ported and re-scoped. It replaces the small sun
   glyph that used to sit in the middle of this wave. TWO things travel with it:
   1. the band needs the second overflow declaration above - clip on X, visible on Y -
      or the section box cuts off the top ~39px of the figure. That is exactly why the
      homepage band carries the same pair of declarations, so this is a port, not a
      new idea. The plain hidden stays first as the fallback for older engines.
   2. the content wrapper takes a little top padding so the headline clears the figure.
   Heights and offsets are the homepage's own values at both of its breakpoints. */
.rsg-inm-ac .rsg-cta-figure{display:none}
.rsg-inm-ac .rsg-cta-figure img{display:block;height:100%;width:auto}
@media (min-width:1240px){
  .rsg-inm-ac .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-ac .rsg-close .rsg-wrap{padding-top:48px}
}
@media (max-width:1239px){
  .rsg-inm-ac .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-ac .rsg-close .rsg-wrap{padding-top:38px}
}
/* CLIENT 2026-08-05: CTA background unified across all seven pages -- geometry ported
   VERBATIM from homepageextreme.html's .rsg-cta-rays. This page paints the fan on the
   section's own ::before rather than a separate rays div, so only the values changed and
   no markup was touched. Was a 760x520 disc apexed at 50% 0 at opacity .5; now the
   homepage's full-band fan, with the fade carried by the mask and the alpha in the
   gradient (so the opacity multiplier is gone).
   The azure ::after glow blob that sat at bottom-centre is REMOVED: the homepage band has
   no glow layer, so it had to go for these to actually match. One rule to restore if the
   client wants it back.
   The fixed bottom-right Call Now button is untouched. */
.rsg-inm-ac .rsg-close::before{
  content:"";position:absolute;left:50%;top:32px;
  width:230%;max-width:2600px;height:210%;transform:translateX(-50%);
  pointer-events:none;
  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-ac .rsg-close::before{top:22px;width:280%} }
.rsg-inm-ac .rsg-close .rsg-wrap{position:relative;z-index:1}
.rsg-inm-ac .rsg-close h2{font-family:var(--font-display);font-size:clamp(34px,4.6vw,52px);font-weight:800;color:#fff;letter-spacing:-.015em;max-width:17ch;margin:0 auto}
.rsg-inm-ac .rsg-close h2 span{font-style:normal;color:var(--accent-dark);position:relative}
.rsg-inm-ac .rsg-close h2 span::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rsg-inm-ac .rsg-close-sub{margin:20px auto 30px;max-width:52ch;font-size:18px;color:var(--muted-dark)}
.rsg-inm-ac .rsg-close-ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 16px}
.rsg-inm-ac .rsg-close-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(169,211,240,.2);font-size:13.5px;font-weight:600;color:var(--muted-dark)}
.rsg-inm-ac .rsg-close-trust span{display:inline-flex;align-items:center;gap:10px}
.rsg-inm-ac .rsg-close-trust span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-bright);opacity:.7}
.rsg-inm-ac .rsg-close-trust span:last-child::after{display:none}

/* persistent Call Now FAB */
.rsg-inm-ac .rsg-fab{position:fixed;right:18px;bottom:18px;z-index:18;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:var(--red);color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  box-shadow:0 10px 30px rgba(170,24,44,.4),0 2px 8px rgba(5,18,32,.3);opacity:0;visibility:hidden;transform:translateY(18px) scale(.9);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rsg-inm-ac .rsg-fab.is-on{opacity:1;visibility:visible;transform:none}
.rsg-inm-ac .rsg-fab:hover{transform:scale(1.05)}
.rsg-inm-ac .rsg-fab svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}

/* ============ ENHANCEMENTS: contact form · map console ============ */
/* contact form (copied from homepage form, scoped) */
.rsg-inm-ac .rsg-ac-form .rsg-eyebrow{color:var(--gold-ink)} /* gold-bright is 1.54:1 on
   this WHITE form card -- the card sits inside a dark section, so the dark-band eyebrow
   rule was winning. gold-ink is 6.4:1 here. */
.rsg-inm-ac .rsg-ac-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 30px;box-shadow:var(--shadow-2)}
.rsg-inm-ac .rsg-ac-ftitle{font-family:var(--font-display);font-size:25px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.rsg-inm-ac .rsg-ac-fsub{margin:8px 0 22px;font-size:14.5px;color:var(--muted)}
.rsg-inm-ac .rsg-ac-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rsg-inm-ac .rsg-ac-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.rsg-inm-ac .rsg-ac-field label{font-family:var(--font-heading);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.rsg-inm-ac .rsg-ac-field input,.rsg-inm-ac .rsg-ac-field select,.rsg-inm-ac .rsg-ac-field textarea{font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;transition:border-color .2s,box-shadow .2s}
.rsg-inm-ac .rsg-ac-field textarea{min-height:96px;resize:vertical}
.rsg-inm-ac .rsg-ac-field input:focus,.rsg-inm-ac .rsg-ac-field select:focus,.rsg-inm-ac .rsg-ac-field textarea:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 3px rgba(6,54,118,.14)}
.rsg-inm-ac .rsg-ac-consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px}
.rsg-inm-ac .rsg-ac-consent input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--red)}
.rsg-inm-ac .rsg-ac-consent span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.rsg-inm-ac .rsg-ac-form .rsg-btn{width:100%}
.rsg-inm-ac .rsg-ac-fnote{margin-top:13px;text-align:center;font-size:13.5px;color:var(--muted)}
.rsg-inm-ac .rsg-ac-fnote a{color:var(--red);font-weight:700;text-decoration:none}
.rsg-inm-ac .rsg-ac-ok{display:none;text-align:center;padding:22px 6px}
.rsg-inm-ac .rsg-ac-ok.is-show{display:block}
.rsg-inm-ac .rsg-ac-ok>svg{width:52px;height:52px;margin:0 auto 12px;display:block;fill:none;stroke:var(--royal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rsg-inm-ac .rsg-ac-ok b{display:block;font-family:var(--font-display);font-size:22px;color:var(--ink)}
.rsg-inm-ac .rsg-ac-ok p{margin:8px auto 0;font-size:14.5px;color:var(--muted);max-width:38ch}
/* contact call card mini info */
.rsg-inm-ac .rsg-contact-mini{margin-top:22px;padding-top:20px;border-top:1px solid var(--navy-line);display:grid;gap:14px}
.rsg-inm-ac .rsg-contact-mini>div{display:flex;gap:12px;align-items:flex-start}
.rsg-inm-ac .rsg-contact-mini svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--gold-bright);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rsg-inm-ac .rsg-contact-mini b{display:block;color:#fff;font-family:var(--font-heading);font-size:15px;font-weight:700}
.rsg-inm-ac .rsg-contact-mini span{font-size:13px;color:var(--muted-dark);line-height:1.4}

@media (max-width:640px){.rsg-inm-ac .rsg-ac-row{grid-template-columns:1fr}}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .rsg-inm-ac{--sec-pad:76px;--fs-h1:42px;--fs-h2:34px}
  .rsg-inm-ac .rsg-hero-grid{grid-template-columns:1fr;gap:40px;padding-bottom:56px}
  .rsg-inm-ac .rsg-hero-card{max-width:520px}
  .rsg-inm-ac .rsg-works-top,.rsg-inm-ac .rsg-owner-grid,.rsg-inm-ac .rsg-choose-grid,
  .rsg-inm-ac .rsg-contact-grid{grid-template-columns:1fr;gap:40px}
  .rsg-inm-ac .rsg-owner-media,.rsg-inm-ac .rsg-works-media{max-width:540px;margin:20px auto 4px;order:3}
  /* STACKED SPLITS: the photo drops in right after the H2 instead of trailing the block
     (works) or leading it above the heading (owner). Copy column -> display:contents so its
     children become grid items that order around the media; row-gap must be 0 because every
     child is a grid item now (only these two grids, not the 4-grid rule above). */
  .rsg-inm-ac .rsg-works-top,.rsg-inm-ac .rsg-owner-grid{row-gap:0}
  .rsg-inm-ac .rsg-works-copy,.rsg-inm-ac .rsg-owner-body{display:contents}
  /* display:contents paints no box, so .rsg-rv opacity:0 can't apply and .is-in never lands
     (the observer has nothing to observe) -- force the copy visible and the eyebrow's accent
     rule out of scaleX(0). */
  .rsg-inm-ac .rsg-works-copy.rsg-rv,.rsg-inm-ac .rsg-owner-body.rsg-rv{opacity:1;transform:none}
  .rsg-inm-ac .rsg-works-copy .rsg-eyebrow::before,
  .rsg-inm-ac .rsg-owner-body .rsg-eyebrow::before{transform:scaleX(1)}
  .rsg-inm-ac .rsg-works-copy .rsg-eyebrow,.rsg-inm-ac .rsg-owner-body .rsg-eyebrow{order:1}
  .rsg-inm-ac .rsg-works-copy .rsg-h2,.rsg-inm-ac .rsg-owner-body .rsg-h2{order:2}
  .rsg-inm-ac .rsg-works-copy .rsg-sub,.rsg-inm-ac .rsg-owner-body .rsg-sub{order:4}
  .rsg-inm-ac .rsg-works-copy .rsg-flow{order:5}
  .rsg-inm-ac .rsg-works-copy .rsg-works-cta{order:6}
  .rsg-inm-ac .rsg-owner-body ul{order:5}
  .rsg-inm-ac .rsg-owner-body .rsg-btn{order:6}
  .rsg-inm-ac .rsg-works-media{max-width:660px;width:100%} /* widen the works photo (27-yrs / Chad-in-the-trade badge) on tablet/mobile per client; width:100% overrides the shrink-to-fit from margin:auto */
  .rsg-inm-ac .rsg-owner-photo{margin:0} /* widen the Chad portrait: reset the browser-default <figure> 40px side margins (-80px). Keeps .rsg-owner-media's 34px left pad so the gold arc still peeks. */
  .rsg-inm-ac .rsg-flow{grid-template-columns:1fr 1fr;gap:30px 44px}
  .rsg-inm-ac .rsg-flow::before{display:none}
  .rsg-inm-ac .rsg-signs-grid,.rsg-inm-ac .rsg-price-grid,.rsg-inm-ac .rsg-types-grid{grid-template-columns:1fr 1fr}
  .rsg-inm-ac .rsg-faq-grid{grid-template-columns:1fr;gap:30px}
  .rsg-inm-ac .rsg-hero-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .rsg-inm-ac{--sec-pad:58px;--fs-h1:34px;--fs-h2:28px}
  .rsg-inm-ac .rsg-wrap{padding:0 20px}
  .rsg-inm-ac .rsg-hero{padding-top:76px}
  .rsg-inm-ac .rsg-hero-ctas .rsg-btn,.rsg-inm-ac .rsg-hero-ctas .rsg-ghost{width:100%;justify-content:center}
  .rsg-inm-ac .rsg-works-photo img{height:340px}.rsg-inm-ac .rsg-owner-photo img{height:400px}
  .rsg-inm-ac .rsg-works-media{padding-right:0} /* reclaim the frame-reserve padding on mobile */
  .rsg-inm-ac .rsg-works-photo{margin:0} /* reset the browser-default <figure> 40px side margins that were shrinking the photo ~80px on mobile */
  .rsg-inm-ac .rsg-signs-grid,.rsg-inm-ac .rsg-price-grid,.rsg-inm-ac .rsg-types-grid,
  .rsg-inm-ac .rsg-flow,.rsg-inm-ac .rsg-choose-grid,.rsg-inm-ac .rsg-why-tenets{grid-template-columns:1fr}
  .rsg-inm-ac .rsg-signs-top,.rsg-inm-ac .rsg-rev-head{grid-template-columns:1fr}
  .rsg-inm-ac .rsg-rvr-hd,.rsg-inm-ac .rsg-rvr-row{grid-template-columns:1fr}
  .rsg-inm-ac .rsg-rvr-hd .rsg-rvr-h0{display:none}
  .rsg-inm-ac .rsg-rvr-row>div:first-child{font-size:12px;text-transform:uppercase;letter-spacing:.08em}
  /* MOBILE CARD (same treatment as services-extreme): stacked to one column the desktop
     border-top alone leaves the panel frameless over the hero photo, so it becomes a proper
     rounded card -- a full 1px border replaces the lone top border, and overflow:hidden clips
     the square cell corners left by the 1px grid gap. Padding tightens now that rows stack. */
  .rsg-inm-ac .rsg-hero-strip{grid-template-columns:1fr;
    border:1px solid var(--navy-line);border-radius:var(--r-btn);overflow:hidden}
  .rsg-inm-ac .rsg-hero-strip>div{padding:16px 20px}
  .rsg-inm-ac .rsg-hero-strip b{font-size:19px}
  .rsg-inm-ac .rsg-close-ctas .rsg-btn,.rsg-inm-ac .rsg-close-ctas .rsg-ghost{width:100%;justify-content:center}
  .rsg-inm-ac .rsg-fab span{display:none}.rsg-inm-ac .rsg-fab{padding:15px}
  .rsg-inm-ac .rsg-div-top{height:30px;top:-2px} /* shorter wave + 1px extra overlap kills the high-DPR hairline */
  .rsg-inm-ac .rsg-div-line{display:none} /* hide the spectrum streak on mobile */
  .rsg-inm-ac .rsg-div-btm{height:24px}
  .rsg-inm-ac .rsg-div-sun{width:32px;height:32px;top:8px}
  .rsg-inm-ac .rsg-div-sun svg{width:19px;height:19px}
}
@media (max-width:480px){
  .rsg-inm-ac .rsg-rev-card,.rsg-inm-ac .rsg-rev-card.is-wide{flex-basis:82vw}
}
@media (prefers-reduced-motion:reduce){
  .rsg-inm-ac *,.rsg-inm-ac *::before,.rsg-inm-ac *::after{animation:none!important;transition:none!important}
  .rsg-inm-ac .rsg-rv{opacity:1!important;transform:none!important}
  .rsg-inm-ac .rsg-sev-bars i{transform:scaleX(1)!important}
}
/* ---------- 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-ac:not(.rsg-rv-js) .rsg-rv{opacity:1!important;transform:none!important}
  .rsg-inm-ac:not(.rsg-rv-js) .rsg-sev-bars i{transform:scaleX(1)!important}


/* ===== THEME-FLIP (2026-07-21): alternate dark/light from Meet-the-Owner; per-section content re-tuned for its new theme ===== */
/* S6 OWNER -> dark (colors baked into the base .rsg-owner rules above; old .rsg-sec--dark .rsg-owner li override was a same-element .a .b mismatch that never applied) */
/* S12 REVIEWS -> dark (white cards stay & pop; lighten the on-band rating lockup) */
/* (the dark-band ink overrides for .rsg-rev-score were dropped 2026-08-15 - it holds the
   multicolour Google mark now, not a numeral, so there is nothing to re-ink.) */
.rsg-inm-ac .rsg-sec--dark .rsg-rev-meta{color:var(--muted-dark)}

/* 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. */
  

/* =====================================================================
   2026-08-18 - NOTION ALIGNMENT (AC Repair)
   Support styles for the sections rebuilt against the Notion copy doc.
   Additive only: every rule below either restyles an element whose
   siblings were removed, or styles a newly introduced element.
   ===================================================================== */

/* --- HERO: one centred column now that the aside card is gone --------- */
.rsg-inm-ac .rsg-hero-grid.is-solo{grid-template-columns:1fr;justify-items:center;text-align:center;padding-bottom:64px}
.rsg-inm-ac .rsg-hero-grid.is-solo .rsg-hero-content{max-width:74ch}
.rsg-inm-ac .rsg-hero-grid.is-solo h1{max-width:22ch;margin:0 auto}
.rsg-inm-ac .rsg-hero-grid.is-solo .rsg-hero-intro{margin:22px auto 24px;max-width:62ch}
.rsg-inm-ac .rsg-hero-grid.is-solo .rsg-hero-chips{justify-content:center;margin-bottom:24px}
.rsg-inm-ac .rsg-hero-grid.is-solo .rsg-hero-ctas{justify-content:center}
/* Notion's rating line, carried as stars + a GBP link (no score, no count) */
.rsg-inm-ac .rsg-hero-rating{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;
  font-size:14.5px;font-weight:600;color:var(--muted-dark);text-decoration:none;
  transition:color .25s var(--ease)}
.rsg-inm-ac .rsg-hero-rating:hover{color:#fff}
.rsg-inm-ac .rsg-hero-rating span:last-child{text-decoration:underline;text-underline-offset:3px}

/* --- WARNING SIGNS: severity pills removed, callout links added ------- */
.rsg-sgx-c5 .sgx5-h2 span{font-style:normal;color:var(--gold-bright)}
.rsg-sgx-c5 .sgx5-foot{justify-content:flex-start}
.rsg-sgx-c5 .sgx5-foot-line{max-width:92ch}
.rsg-sgx-c5 .sgx5-foot-link{color:var(--gold-bright);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;transition:color .25s var(--ease)}
.rsg-sgx-c5 .sgx5-foot-link:hover{color:#fff}

/* =====================================================================
   PRICING PHILOSOPHY LAYOUT  (.rsg-fin-*)  -- 2026-08-18, round 9
   The homepage's pricing band, rebuilt for a LIGHT ground. Geometry is
   the homepage's; the colours that only worked over navy are re-picked:
   the stage outline was ice, the photo border was --navy-line, and the
   accent bars used var(--gold) -- which on this page resolves to AZURE,
   not tan (it is frozen from the root --acc), so tan is written literally
   as #E2C6A3 here rather than through a token.
   The pull-quote panel deliberately STAYS dark: on a paper band it is the
   contrast block that carries the owner's voice, which is the same role
   it plays in the homepage original.
   ===================================================================== */
.rsg-inm-ac .rsg-fin-grid{display:grid;grid-template-columns:.715fr 1.285fr;gap:0;align-items:center}
.rsg-inm-ac .rsg-fin-stage{position:relative}
/* offset outline frame - royal hairline, since the original ice is invisible on paper */
.rsg-inm-ac .rsg-fin-stage::before{content:"";position:absolute;inset:-16px 16px 16px -16px;
  border:1.5px solid rgba(6,54,118,.28);border-radius:20px;pointer-events:none}
.rsg-inm-ac .rsg-fin-photo figure{margin:0;border-radius:20px;overflow:hidden;position:relative;
  border:1px solid var(--line);box-shadow:var(--shadow-3)}
.rsg-inm-ac .rsg-fin-photo img{height:515px;width:100%;object-fit:cover;display:block}
.rsg-inm-ac .rsg-fin-photo figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(8,25,42,.52))}
.rsg-inm-ac .rsg-fin-body{padding-left:80px}
.rsg-inm-ac .rsg-fin-panel{position:relative;margin:26px 0 0;padding:24px 28px 22px 32px;
  border-radius:14px;background:var(--card-dark);border:1px solid rgba(255,186,0,.14)}
.rsg-inm-ac .rsg-fin-panel::before{content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:3px;border-radius:2px;background:linear-gradient(180deg,var(--red),#E2C6A3)}
.rsg-inm-ac .rsg-fin-panel--quote{min-height:152px}
.rsg-inm-ac .rsg-fin-quote{margin:0;padding-right:124px;font-size:18px;font-style:italic;
  line-height:1.5;color:#fff;text-wrap:pretty}
.rsg-inm-ac .rsg-fin-quote small{display:block;margin-top:10px;font-style:normal;
  font-family:var(--font-heading);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#E2C6A3}
/* mascot sits ON the dark panel, so it keeps a cool rim-light rather than the flat
   shadow used by the cream step band's mascot */
.rsg-inm-ac .rsg-msc--quote{right:-15px;bottom:-12px;height:160px;
  filter:drop-shadow(0 0 2px rgba(143,204,242,.55)) drop-shadow(0 10px 14px rgba(3,12,24,.5))}

/* ---- round 17 (client): the dark pull-quote panel was replaced by a single CTA.
   The panel / quote / mascot rules above are kept as dead CSS so a restore is
   markup-only. Top margin keeps the panel's old 26px rhythm with a little more air,
   since a button needs less separation from the paragraph than a boxed panel did. ---- */
.rsg-inm-ac .rsg-fin-cta{margin:30px 0 0}
@media (max-width:1239px){
  .rsg-inm-ac .rsg-fin-panel{padding-bottom:100px}
}
@media (max-width:1024px){
  .rsg-inm-ac .rsg-fin-grid{grid-template-columns:.86fr 1.14fr}
  .rsg-inm-ac .rsg-fin-body{padding-left:46px}
  .rsg-inm-ac .rsg-fin-panel{padding:20px 20px 18px 26px;padding-bottom:100px}
  .rsg-inm-ac .rsg-fin-photo img{height:350px}
}
@media (max-width:767px){
  .rsg-inm-ac .rsg-fin-grid{grid-template-columns:1fr;column-gap:34px;row-gap:0}
  .rsg-inm-ac .rsg-fin-body{padding-left:0;display:contents}
  .rsg-inm-ac .rsg-fin-body.rsg-rv{opacity:1;transform:none}
  .rsg-inm-ac .rsg-fin-body .rsg-eyebrow{order:1}
  .rsg-inm-ac .rsg-fin-body .rsg-eyebrow::before{transform:scaleX(1)}
  .rsg-inm-ac .rsg-fin-body .rsg-h2{order:2}
  .rsg-inm-ac .rsg-fin-stage{order:3;margin:20px 0 4px}
  .rsg-inm-ac .rsg-fin-body .rsg-sub{order:4}
  .rsg-inm-ac .rsg-fin-body .rsg-fin-panel{order:5}
  .rsg-inm-ac .rsg-fin-body .rsg-fin-cta{order:5;margin-top:24px}
  .rsg-inm-ac .rsg-fin-photo img{height:340px}
}
@media (max-width:480px){
  .rsg-inm-ac .rsg-fin-photo img{height:300px}
}

/* =====================================================================
   STEP BY STEP  (.rsg-hiw-*)  -- 2026-08-18, round 7
   The homepage's how-it-works pattern, rebuilt for a LIGHT (cream) band.
   Structure and geometry are the homepage's; every colour is re-picked,
   because the original is tuned for navy and four of its choices are
   invisible on cream: the disc was --paper on a dark ground, the arrow
   connector was ice, the kicker was --accent-dark (ice) and the foot
   hairline was tan-on-navy. Contrast on paper #F9F3E8 (was measured on cream): kicker
   --gold-ink 4.86:1, title --ink 13.6:1, body --muted 5.9:1.
   ===================================================================== */
.rsg-inm-ac .rsg-hiw-head{max-width:660px;margin:0 auto}
.rsg-inm-ac .rsg-hiw-row{--hiw-disc:60px;
  list-style:none;margin:clamp(56px,6vw,78px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hiw-gap)}
.rsg-inm-ac .rsg-hiw-step{position:relative;display:flex;flex-direction:column;
  align-items:center;text-align:center}
/* white disc + hairline reads as a badge on cream, where the homepage's paper disc would vanish */
.rsg-inm-ac .rsg-hiw-disc{width:var(--hiw-disc);height:var(--hiw-disc);border-radius:50%;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.rsg-inm-ac .rsg-hiw-disc svg{width:25px;height:25px;fill:var(--red)}
.rsg-inm-ac .rsg-hiw-step:nth-child(2n) .rsg-hiw-disc svg{fill:var(--royal)}
.rsg-inm-ac .rsg-hiw-step:not(:last-child)::after{content:"";position:absolute;pointer-events:none;
  top:calc(var(--hiw-disc)/2 - 4.5px);
  left:calc(50% + var(--hiw-disc)/2 + var(--hiw-air));
  width:calc(100% + var(--hiw-gap) - var(--hiw-disc) - var(--hiw-air)*2);height:9px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%209'%3E%3Cpath%20d='M1.4%201.4L5.6%204.5%201.4%207.6'%20fill='none'%20stroke='%232E81C1'%20stroke-opacity='.8'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(90deg,rgba(46,129,193,.10),rgba(46,129,193,.46) 34%,rgba(46,129,193,.38));
  background-repeat:no-repeat,no-repeat;
  background-position:right center,left center;
  background-size:9px 9px,calc(100% - 12px) 1px}
/* Literal #805928, not var(--gold-ink): on a LIGHT band that token still holds the frozen
   root value and measured #063676 (navy) in a render probe - the 2026-08-03 repair re-pins
   it only inside .rsg-sec--dark. #805928 is the documented light/cream label ink and matches
   the eyebrow above it. 4.86:1 on cream. */
.rsg-inm-ac .rsg-hiw-kicker{display:block;margin-top:26px;font-family:var(--font-heading);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-indent:.16em;color:#805928;
  font-variant-numeric:tabular-nums lining-nums}
.rsg-inm-ac .rsg-hiw-t{margin-top:9px;font-family:var(--font-display);font-size:17.5px;
  font-weight:700;line-height:1.3;color:var(--ink);min-height:45.5px}
.rsg-inm-ac .rsg-hiw-b{margin:10px auto 0;font-size:15px;line-height:1.6;color:var(--muted);
  max-width:46ch;text-wrap:pretty}
.rsg-inm-ac .rsg-hiw-foot{margin-top:clamp(34px,4vw,52px);text-align:center}
.rsg-inm-ac .rsg-hiw-foot::before{content:"";display:block;width:72px;height:1px;
  margin:0 auto clamp(30px,3.4vw,44px);
  background:linear-gradient(90deg,rgba(26,28,27,0),rgba(26,28,27,.22),rgba(26,28,27,0))}
/* mascot - this page's first; brand asset reused from the homepage band, with the
   homepage's ice glow dropped because it only makes sense over navy */
.rsg-inm-ac .rsg-msc{position:absolute;z-index:3;display:block;pointer-events:none;
  -webkit-user-select:none;user-select:none}
.rsg-inm-ac .rsg-msc img{display:block;width:auto;height:100%}
.rsg-inm-ac .rsg-msc--answer{right:calc(50% + 585px);bottom:40px;height:190px;
  filter:drop-shadow(0 10px 16px rgba(26,28,27,.20))}
@media (max-width:1439px){
  .rsg-inm-ac .rsg-hiw{padding-bottom:170px}
  .rsg-inm-ac .rsg-msc--answer{right:auto;left:10px;bottom:38px;height:124px}
}
@media (max-width:1024px){
  .rsg-inm-ac .rsg-hiw-row{grid-template-columns:repeat(2,1fr);gap:48px var(--hiw-gap);
    margin-top:clamp(48px,5.5vw,66px)}
  .rsg-inm-ac .rsg-hiw-t{min-height:0}
  .rsg-inm-ac .rsg-hiw-step:not(:last-child)::after{display:none}
}
@media (max-width:767px){
  .rsg-inm-ac .rsg-hiw-row{grid-template-columns:1fr;gap:38px;margin-top:40px;--hiw-disc:52px}
  .rsg-inm-ac .rsg-hiw-disc svg{width:22px;height:22px}
  .rsg-inm-ac .rsg-hiw{padding-bottom:150px}
  .rsg-inm-ac .rsg-msc--answer{height:104px;bottom:32px}
}

/* ---- mascots 2 and 3 (client, 2026-08-19): carry the homepage's mascot language onto this
   page. Every value below is front-page's own value for the SAME band role, so nothing here
   is invented - the reviews band takes front-page's reviews mascot with the flat dark shadow
   it wears over navy, and the pricing band takes front-page's quote mascot at its 160px /
   124px pair. The quote figure straddles the framed photo's dark scrim and the paper gutter,
   which is front-page's .rsg-msc--call situation rather than its .rsg-msc--quote one, so it
   takes the paper rim-light plus navy shadow, not the ice rim that only reads over navy.
   Reviews sizing is MEASURED, not copied blind: this head is a 2-col grid whose right cell
   holds the Google pill at the BOTTOM (align-items:end), which leaves only 153px of clear
   height between the divider wave and that pill from 1240 up. Front-page's 168px desktop
   figure does not fit in that gap, so this band runs front-page's own smaller 122px step at
   every width instead - measured clear of the wave by 10px and of the pill by 21px. Below
   767px the head collapses to one column and the pill drops under the headline, so the
   headline reserves 74px on its right the way front-page's .rsg-rev-headtitle does
   (measured: 19px between the longest headline line and the figure).
   Both figures are decorative - aria-hidden, empty alt, and pointer-events none inherited
   from .rsg-msc - so neither is in the reading order or the tab order. ---- */
.rsg-inm-ac .rsg-rev-head{position:relative}
.rsg-inm-ac .rsg-msc--rev{right:0;top:-31px;height:122px;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.rsg-inm-ac .rsg-msc--price{right:-56px;bottom:-6px;height:160px;
  filter:drop-shadow(0 0 1px var(--paper)) drop-shadow(0 0 2.5px var(--paper))
         drop-shadow(0 8px 12px rgba(4,38,84,.22))}
@media (max-width:1239px){
  .rsg-inm-ac .rsg-msc--price{right:6px;bottom:-6px;height:124px}
}
@media (max-width:767px){
  .rsg-inm-ac .rsg-msc--rev{height:100px;top:-26px}
  .rsg-inm-ac .rsg-rev-head h2{padding-right:74px}
}

/* ---- mascot 5 (client, 2026-08-19): the statement card's empty right side, which he
   circled. Asset is mascot-trust-w260 - the only unused standing figure with NO coloured
   prop, which matters here because the ground is deep crimson: mascot-cooling's ice
   snowflakes and lavender air-swirls would fight it, and mascot-work / mascot-quote both
   carry a clipboard, which the pricing band's figure two bands up already uses.
   Rim-light is the paper pair rather than the ice trio - the figure stands ON the crimson
   panel, and ice reads as a cold halo against red - and the cast shadow is tinted from the
   card's own deep red instead of front-page's navy, the same re-picking the round-7 and
   round-8 ports did when a component moved off navy.
   2026-08-19 (client): the figure read as too small and was facing AWAY from the copy.
   Height 186px -> 240px, measured to leave 52px of air above its head in the 293px card
   while still clearing the paragraph by 243px, and scaleX(-1) mirrors it so it looks INTO
   the card toward the copy on the left rather than off the right edge. The mirror is safe
   alongside the filter: the rim is a zero-offset spread and the cast shadow is offset only
   vertically, so a horizontal flip leaves both unchanged. The stacked strip grew with it,
   132px -> 150px carrying a 130px figure.
   NOTE the card is overflow:hidden and MUST stay that way - its decorative 300px
   ::after circle is positioned at right:-80px/bottom:-90px and relies on that clip - so
   the figure sits fully inside the card rather than overhanging its edge.
   Below 1025 the 64ch paragraph no longer leaves a right gutter wide enough for the figure
   (measured: it collides by 65px at a 790px viewport), so the figure moves into a bottom
   strip of the card's own padding - exactly the fix front-page uses for its quote mascot
   via .rsg-fin-panel padding-bottom. That regime is also immune to webfont-timing line
   rewrap, because the figure then sits below the copy rather than beside it. ---- */
.rsg-inm-ac .rsg-msc--why{right:56px;bottom:0;height:240px;transform:scaleX(-1);
  filter:drop-shadow(0 0 1px var(--paper)) drop-shadow(0 0 2.5px var(--paper))
         drop-shadow(0 10px 14px rgba(60,6,16,.38))}
@media (max-width:1024px){
  .rsg-inm-ac .rsg-why-statement{padding-bottom:150px}
  .rsg-inm-ac .rsg-msc--why{right:24px;height:130px}
}

/* =====================================================================
   TALK-TO-US + REQUEST FORM  (.rsg-tk-*)  -- 2026-08-18, round 5
   Ported verbatim from the services page's contact block and re-scoped to
   this page's root, so the two pages stay one component rather than two
   look-alikes. Only --shadow-3 was missing from this page's token set.
   ===================================================================== */
.rsg-inm-ac{}

.rsg-inm-ac .rsg-tk-heroband{position:relative}
.rsg-inm-ac .rsg-tk-hero{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--navy-line);box-shadow:var(--shadow-2)}
.rsg-inm-ac .rsg-tk-hero img{height:350px;width:100%;object-fit:cover;display:block}
.rsg-inm-ac .rsg-tk-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(8,25,42,.72) 0%,rgba(8,25,42,.4) 52%,rgba(8,25,42,.12) 100%),
             linear-gradient(180deg,transparent 46%,rgba(8,25,42,.68) 100%)}
.rsg-inm-ac .rsg-tk-rings{position:absolute;left:-110px;bottom:-110px;width:320px;height:320px;
  pointer-events:none;z-index:1}
.rsg-inm-ac .rsg-tk-rings circle{fill:none;stroke:rgba(var(--acc-rgb),.45);stroke-width:1.5;
  transform-origin:50% 50%;animation:rsgac-ring 5s var(--ease) infinite}
.rsg-inm-ac .rsg-tk-rings circle:nth-child(2){animation-delay:1.2s}
.rsg-inm-ac .rsg-tk-rings circle:nth-child(3){animation-delay:2.4s}
@keyframes rsgac-ring{0%{transform:scale(.62);opacity:0}30%{opacity:1}100%{transform:scale(1.15);opacity:0}}
.rsg-inm-ac .rsg-tk-onphoto{position:absolute;left:30px;bottom:20px;z-index:1;max-width:62%}
.rsg-inm-ac .rsg-tk-onphoto .rsg-h2{font-size:34px;color:#fff;margin:0}
.rsg-inm-ac .rsg-tk-pill{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  padding:8px 16px;border-radius:999px;background:rgba(8,25,42,.55);border:1px solid var(--navy-line);
  font-family:var(--font-heading);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff}
.rsg-inm-ac .rsg-tk-pd{width:13px;height:13px;flex:0 0 auto}
.rsg-inm-ac .rsg-tk-pdring{transform-origin:50% 50%;animation:rsgac-pulse 2.2s ease-out infinite}
@keyframes rsgac-pulse{0%{transform:scale(.55);opacity:.9}75%,100%{transform:scale(1.55);opacity:0}}

.rsg-inm-ac .rsg-tk-below{display:grid;grid-template-columns:1fr 460px;gap:64px;
  align-items:start;padding:0 30px}
.rsg-inm-ac .rsg-tk-left{padding-top:44px;display:grid;gap:26px;align-content:start;justify-items:start}
.rsg-inm-ac .rsg-tk-points{display:grid;gap:26px}
.rsg-inm-ac .rsg-tk-pt{position:relative;display:flex;gap:16px;align-items:flex-start}
.rsg-inm-ac .rsg-tk-pt:not(:last-child)::after{content:"";position:absolute;left:19px;top:20px;
  bottom:-46px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--red),var(--gold) 55%,#2E81C1)}
.rsg-inm-ac .rsg-tk-pt-ic{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#C7E2F5,#8FCCF2 78%);box-shadow:0 2px 8px rgba(8,25,42,.3)}
.rsg-inm-ac .rsg-tk-pt-ic svg{width:17px;height:17px;fill:var(--navy-deep)}
.rsg-inm-ac .rsg-tk-pt b{display:block;font-family:var(--font-heading);font-size:17.5px;
  line-height:1.3;color:#fff}
.rsg-inm-ac .rsg-tk-pt p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--muted-dark);
  max-width:52ch;text-wrap:pretty}
.rsg-inm-ac .rsg-tk-callbtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  gap:10px;margin-top:4px;padding:15px 30px;border:0;border-radius:12px;background:var(--red);
  font-family:var(--font-body);font-size:16px;font-weight:700;color:#fff;text-decoration:none;
  cursor:pointer;transform-origin:center;transition:transform .28s var(--ease);
  box-shadow:0 2px 6px rgba(5,18,32,.2),0 10px 26px rgba(170,24,44,.22);
  font-variant-numeric:tabular-nums}
.rsg-inm-ac .rsg-tk-callbtn:hover{transform:scale(1.05)}
.rsg-inm-ac .rsg-tk-callbtn svg{fill:currentColor;flex:0 0 auto}

/* the white card overlaps up into the photo band, as on the services page */
.rsg-inm-ac .rsg-tk-form{margin-top:-210px;position:relative;z-index:2;
  background:linear-gradient(178deg,#FFFFFF,#F6F2EB);border-radius:18px;padding:36px 36px 32px;
  box-shadow:var(--shadow-3)}
.rsg-inm-ac .rsg-tk-title{margin:0;font-family:var(--font-display);font-size:24px;font-weight:800;
  line-height:1.2;color:var(--ink)}
.rsg-inm-ac .rsg-tk-titlesub{margin:6px 0 22px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.rsg-inm-ac .rsg-tk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rsg-inm-ac .rsg-tk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.rsg-inm-ac .rsg-tk-field label{font-family:var(--font-heading);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.rsg-inm-ac .rsg-tk-field input,
.rsg-inm-ac .rsg-tk-field select,
.rsg-inm-ac .rsg-tk-field textarea{font-family:var(--font-body);font-size:16px;color:var(--ink);
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.rsg-inm-ac .rsg-tk-field textarea{min-height:96px;resize:vertical}
.rsg-inm-ac .rsg-tk-field input:focus,
.rsg-inm-ac .rsg-tk-field select:focus,
.rsg-inm-ac .rsg-tk-field textarea:focus{outline:2px solid var(--azure);outline-offset:0;
  border-color:var(--azure);box-shadow:0 0 0 4px rgba(46,129,193,.12)}
.rsg-inm-ac .rsg-tk-consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px}
.rsg-inm-ac .rsg-tk-consent input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--red)}
.rsg-inm-ac .rsg-tk-consent span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.rsg-inm-ac .rsg-tk-form .rsg-btn{width:100%;justify-content:center}
.rsg-inm-ac .rsg-tk-note{margin-top:13px;text-align:center;font-size:13.5px;color:var(--muted)}
.rsg-inm-ac .rsg-tk-note a{color:var(--red);font-weight:700;text-decoration:none;
  font-variant-numeric:tabular-nums}

/* =====================================================================
   CLOSING CTA -- the homepage's .rsg-cta pattern, dropped into the
   existing .rsg-close band (which already supplies the dark ground, the
   ray decoration and the top wave). Selectors carry .rsg-close so they
   out-specify the band's own `.rsg-close h2` rules without !important.
   ===================================================================== */
.rsg-inm-ac .rsg-close .rsg-cta-title{font-family:var(--font-display);font-weight:800;
  line-height:1.08;letter-spacing:.008em;text-transform:uppercase;
  font-size:clamp(30px,3.8vw,46px);color:#fff;margin:0 auto;max-width:none;text-wrap:balance}
.rsg-inm-ac .rsg-close .rsg-cta-title span{font-style:normal;color:var(--accent-dark)}
.rsg-inm-ac .rsg-close .rsg-cta-title span::after{display:none}
.rsg-inm-ac .rsg-close .rsg-cta-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;
  justify-content:center}
.rsg-inm-ac .rsg-close .rsg-cta-call{position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:var(--r-btn);background:transparent;
  border:1px solid rgba(169,211,240,.42);color:#fff;font-family:var(--font-body);font-size:16.5px;
  font-weight:600;letter-spacing:.075em;text-transform:uppercase;text-decoration:none;
  transform-origin:center;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.rsg-inm-ac .rsg-close .rsg-cta-call svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.rsg-inm-ac .rsg-close .rsg-cta-call:hover{transform:scale(1.05);background:rgba(255,255,255,.08);
  border-color:var(--gold-bright)}
.rsg-inm-ac .rsg-close .rsg-cta-call:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

@media (max-width:1024px){
  .rsg-inm-ac .rsg-tk-hero img{height:340px}
  .rsg-inm-ac .rsg-tk-onphoto .rsg-h2{font-size:28px}
  .rsg-inm-ac .rsg-tk-below{grid-template-columns:1fr 420px;gap:40px}
  .rsg-inm-ac .rsg-tk-form{margin-top:-150px}
}
@media (max-width:767px){
  .rsg-inm-ac .rsg-tk-hero img{height:380px}
  .rsg-inm-ac .rsg-tk-onphoto{left:20px;right:20px;bottom:18px;max-width:none}
  .rsg-inm-ac .rsg-tk-onphoto .rsg-h2{font-size:26px}
  .rsg-inm-ac .rsg-tk-below{grid-template-columns:1fr;gap:0;padding:0}
  .rsg-inm-ac .rsg-tk-left{padding-top:30px;order:2}
  .rsg-inm-ac .rsg-tk-form{margin-top:14px;order:1;padding:26px 20px 24px}
  .rsg-inm-ac .rsg-tk-row{grid-template-columns:1fr}
  .rsg-inm-ac .rsg-tk-callbtn{width:100%;justify-content:center}
  .rsg-inm-ac .rsg-close .rsg-cta-actions{flex-direction:column;align-items:stretch}
  .rsg-inm-ac .rsg-close .rsg-cta-call{justify-content:center}
}

  /* ---- FORM BAND, client asks (2026-08-19) ------------------------------------------
     1. The left column's CTA is a CALL button, because the band already carries the form
        and a second request CTA was the same action offered twice. The label and the phone
        glyph are reused verbatim from the closing band's own .rsg-cta-call, so no new copy
        enters the page. This reverses the round-18 conversion for THIS button only; every
        other popup trigger on the page is untouched.
     2. The lead paragraph moved out of the left column up into the block that holds the
        heading. The whole block - eyebrow, heading, paragraph - sits at the photo's BOTTOM
        as PLAIN TEXT: no panel, no background, no border.
        REVISION NOTE, and the measurement that matters: this first shipped as a tinted
        panel at the photo's TOP, because bare text measured only 3.46:1 worst case there.
        The client asked for plain text at the bottom, and he was right - at the BOTTOM the
        photo's own approved scrim is already doing the work, so the same bare text measures
        6.39:1. The 3.46 was an artifact of the top position, where the vertical scrim is
        transparent. Panel removed.
        What did NOT pass at the bottom was the EYEBROW: 13px azure crossing the van's white
        body measured 1.09:1. Two changes fix it, both measured on the render by sampling the
        background with the text hidden:
          - a soft bottom-left corner gradient added to the photo (a scrim, not a box - no
            edge, no border), which is the approved treatment for this photo, just aimed at
            the corner the copy occupies
          - the on-photo eyebrow re-inked to --ice, band-scoped only, the same re-picking
            rounds 7 and 8 did whenever a component moved onto a different ground. It needs
            (0,5,0) to land, because the sitewide doubled-root eyebrow rule is (0,4,0).
        Final measured worst cases: eyebrow 4.73:1, heading 8.63:1 (large text, needs 3),
        paragraph 11.84:1. A text-shadow on the block is belt-and-braces on top of that.
     THE FORM CARD is pulled up 160px over the photo's bottom, so the paragraph is capped to
     stay clear of it - 52ch here, 40ch below 1025 where the card's left edge comes in.
     THE 768-900 RANGE stacks: there the two-column grid leaves the left column only about
     195px, which wrapped the call label onto two lines. Stacking it mobile-style also
     removes the form/text overlap in that range entirely.
     PLACEMENT: this block must stay AFTER the band's max-width:767px block, which sets
     bottom:18px on this element - an earlier block would lose the tie. ---- */
  .rsg-inm-ac .rsg-tk-onphoto{bottom:26px;
    text-shadow:0 1px 2px rgba(4,14,26,.85),0 2px 14px rgba(4,14,26,.7)}
  .rsg-inm-ac.rsg-inm-ac .rsg-sec--dark .rsg-tk-onphoto .rsg-eyebrow{color:#A9D3F0}
  .rsg-inm-ac .rsg-tk-hero::after{
    background:linear-gradient(to top right,rgba(8,25,42,.93) 0%,rgba(8,25,42,.74) 32%,rgba(8,25,42,.34) 56%,transparent 76%),
               linear-gradient(102deg,rgba(8,25,42,.72) 0%,rgba(8,25,42,.4) 52%,rgba(8,25,42,.12) 100%),
               linear-gradient(180deg,transparent 46%,rgba(8,25,42,.68) 100%)}
  .rsg-inm-ac .rsg-tk-hero img{height:280px}
  .rsg-inm-ac .rsg-tk-onphoto .rsg-tk-lead{
    margin:14px 0 0;max-width:52ch;font-size:16px;line-height:1.6;color:#EAF2F9}
  @media (max-width:1024px){
    .rsg-inm-ac .rsg-tk-onphoto .rsg-tk-lead{max-width:40ch}
  }
  @media (max-width:900px) and (min-width:768px){
    .rsg-inm-ac .rsg-tk-below{grid-template-columns:1fr;gap:0;padding:0}
    .rsg-inm-ac .rsg-tk-left{padding-top:30px;order:2}
    .rsg-inm-ac .rsg-tk-form{margin-top:14px;order:1}
  }
  @media (max-width:767px){
    .rsg-inm-ac .rsg-tk-hero img{height:430px}
    .rsg-inm-ac .rsg-tk-onphoto{bottom:20px}
    .rsg-inm-ac .rsg-tk-onphoto .rsg-tk-lead{max-width:none;font-size:15px}
  }

/* --- SECOND BAND: the doc's four figures ride the existing flow grid ----
       They read as statistics, not step labels, so the <b> takes the display
       face at stat scale with lining tabular figures. --------------------- */
.rsg-inm-ac .rsg-flow--figs{margin-top:30px}
.rsg-inm-ac .rsg-flow--figs .rsg-flow-step b{
  margin-bottom:7px;font-family:var(--font-display);font-size:26px;font-weight:800;
  line-height:1;letter-spacing:-.015em;color:var(--royal);
  font-variant-numeric:tabular-nums lining-nums}
.rsg-inm-ac .rsg-flow--figs .rsg-flow-node{top:9px}
/* the doc gives this band two body paragraphs - give them real separation */
.rsg-inm-ac .rsg-works-copy .rsg-sub + .rsg-sub{margin-top:16px}

/* (round 1's .rsg-pricing padding-bottom hack was removed in round 9 - it only existed
   because the band was a lone centred heading with a void beneath it. It now carries a
   full two-column layout and takes the standard --sec-pad on both edges.) */

/* --- REPAIR OR REPLACE: the doc's table is two equal columns ---------
   DESKTOP ONLY, gated 2026-08-19. This rule is (0,3,1) and was silently beating the
   stacked-view width:auto at (0,2,1), so below 768px every stacked cell was locked to
   half the table width and each statement wrapped to 5-7 lines. Equal columns only
   mean anything while the cells are still table-cells, so the rule is now gated. */
@media (min-width:768px){
  .rsg-inm-ac .rsg-cmp.is-2col th,.rsg-inm-ac .rsg-cmp.is-2col td{width:50%}
}

/* =====================================================================
   WHY HOMEOWNERS PICK US on a DARK band -- 2026-08-18, round 8
   Layout untouched; palette only. The band has THREE stacked surfaces
   (navy ground -> crimson statement -> two supporting cards), so each
   step has to stay clearly separated or the whole thing flattens.
     ground      navy --band-grad
     statement   deeper crimson than the light-band version (#9E1728 ->
                 #6E0F1D). The original #AA182C on navy vibrates; dropping
                 the value and warming the shadow settles it and reads
                 richer. A tan hairline lifts the card off the ground.
     supporting  --navy-card, NOT white. White cards here would compete
                 with the statement for focus; recessed cards keep one
                 focal point, which is the premium read.
   Measured: statement copy 16.2:1 on #6E0F1D - tenet h3 #fff 14.9:1 and
   body --muted-dark 9.6:1 on --navy-card #072856. Red stays decorative
   only (the left bar), per the dark-band rule that text-like marks are
   ice or gold.
   ===================================================================== */
.rsg-inm-ac .rsg-sec--dark .rsg-why-statement{
  background:linear-gradient(150deg,#9E1728,#6E0F1D 78%);
  border:1px solid rgba(226,198,163,.20);
  box-shadow:0 2px 8px rgba(3,12,24,.42),0 26px 60px rgba(3,12,24,.46)}
.rsg-inm-ac .rsg-sec--dark .rsg-why-statement::after{background:rgba(226,198,163,.07)}
.rsg-inm-ac .rsg-sec--dark .rsg-why-statement p{color:rgba(255,255,255,.9)}
.rsg-inm-ac .rsg-sec--dark .rsg-why-tenet{
  background:var(--navy-card);border-color:var(--navy-line);
  box-shadow:0 2px 8px rgba(3,12,24,.34)}
/* Accent bar red -> tan. NOTE var(--gold) is NOT tan here: --gold is declared at the root
   as var(--acc) and a custom property's var() resolves where it is DECLARED, so it froze to
   the root --acc (azure #2E81C1) and ignores the dark-band override. --gold-bright IS pinned
   to #E2C6A3 on .rsg-sec--dark by the 2026-08-03 repair, so it is the reliable tan. */
.rsg-inm-ac .rsg-sec--dark .rsg-why-tenet::before{
  background:linear-gradient(180deg,var(--red),var(--gold-bright))}
.rsg-inm-ac .rsg-sec--dark .rsg-why-tenet:hover{
  border-color:rgba(226,198,163,.34);
  box-shadow:0 4px 12px rgba(3,12,24,.40),0 18px 40px rgba(3,12,24,.40)}
.rsg-inm-ac .rsg-sec--dark .rsg-why-tenet h4,.rsg-inm-ac .rsg-sec--dark .rsg-why-tenet h3{color:#fff}
.rsg-inm-ac .rsg-sec--dark .rsg-why-tenet p{color:var(--muted-dark)}
/* the doc's H3 line under the H2 - the light-band rule below inks it --ink */
.rsg-inm-ac .rsg-why.rsg-sec--dark .rsg-sechead .rsg-sub{color:#fff}

/* --- WHY: kicker labels removed; H3 line added under the H2 ---------- */
.rsg-inm-ac .rsg-why .rsg-sechead .rsg-sub{margin-top:14px;font-family:var(--font-heading);
  font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.006em}
.rsg-inm-ac .rsg-why-statement h4{margin-top:0;max-width:26ch}
.rsg-inm-ac .rsg-why-tenet h4,.rsg-inm-ac .rsg-why-tenet h3{margin-top:0}

/* (round 1's .rsg-close-h3/-pair/-block rules were deleted in round 5 - the closing band
   is a CTA now and that markup no longer exists on the page.) */

@media (max-width:767px){
  .rsg-inm-ac .rsg-why .rsg-sechead .rsg-sub{font-size:19px}
}


  /* ============ S1 HERO - TWO COLUMN + REQUEST CARD (client, 2026-08-18) ============
     Left column: the whole existing content block, now left-aligned. Nothing was
     restyled to get there - dropping .is-solo from the grid lets the ORIGINAL
     two-column base rule (1.08fr / .92fr) apply again, and that rule was tuned for
     exactly this layout before the aside card was removed. The rating line simply moved
     to the top of the column.
     Right column: the revived hero call card as a request card. Only the FIELD colours
     are new here - the contact band's field rules are tuned for a white surface (ink
     text, white fills, grey hairlines) and would be unreadable on this navy card.
     Measured targets on the card ground: labels use ice (about 9.3:1), field text is
     white on a recessed near-navy fill, consent and note use muted-dark. The phone link
     uses gold-bright to match the card's own number treatment - red is decoration only
     on dark bands here, since it measures about 1.9:1 as text on this navy.
     The diamond before the card title and the short red rule under it echo the chip
     glyph and the H1 underline, so the card reads as part of the hero rather than a
     bolted-on widget. No extra markup for either - both are pseudo elements. */
  .rsg-inm-ac .rsg-hero-rating{margin:0 0 20px}
  .rsg-inm-ac .rsg-hero-card--form{padding:28px 28px 26px}
  .rsg-inm-ac .rsg-hero-card--form h2::before{content:"";display:inline-block;width:10px;height:10px;
    background:var(--gold-bright);transform:rotate(45deg);margin-right:11px;vertical-align:middle}
  .rsg-inm-ac .rsg-hero-card--form h2::after{content:"";display:block;width:56px;height:3px;
    border-radius:2px;background:var(--red);margin:13px 0 18px}
  .rsg-inm-ac .rsg-hf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .rsg-inm-ac .rsg-hf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
  .rsg-inm-ac .rsg-hf-field label{font-family:var(--font-heading);font-size:11px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
  .rsg-inm-ac .rsg-hf-field input,
  .rsg-inm-ac .rsg-hf-field select,
  .rsg-inm-ac .rsg-hf-field textarea{font-family:var(--font-body);font-size:16px;color:#fff;
    width:100%;padding:11px 13px;border:1px solid rgba(169,211,240,.28);border-radius:10px;
    background:#04142F;color-scheme:dark;
    transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
  .rsg-inm-ac .rsg-hf-field textarea{min-height:78px;resize:vertical}
  .rsg-inm-ac .rsg-hf-field input:focus,
  .rsg-inm-ac .rsg-hf-field select:focus,
  .rsg-inm-ac .rsg-hf-field textarea:focus{outline:2px solid var(--ice);outline-offset:0;
    border-color:var(--ice);box-shadow:0 0 0 4px rgba(169,211,240,.16)}
  .rsg-inm-ac .rsg-hf-consent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 14px}
  .rsg-inm-ac .rsg-hf-consent input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--red)}
  .rsg-inm-ac .rsg-hf-consent span{font-size:12px;line-height:1.5;color:var(--muted-dark)}
  .rsg-inm-ac .rsg-hero-card .rsg-btn{width:100%;justify-content:center}
  /* MOBILE: the request card is hidden below 768px, at the client's request. At 360px
     it rendered as an 816px-tall form between the hero copy and the rest of the page.
     On a phone the hero's Call and popup CTAs are the faster path, and the same request
     form is still one tap away from every CTA further down. */
  @media (max-width:767px){
    .rsg-inm-ac .rsg-hero-card--form{display:none}
  }
  .rsg-inm-ac .rsg-hf-note{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--navy-line);
    text-align:center;font-size:12.5px;line-height:1.45;color:var(--muted-dark)}
  .rsg-inm-ac .rsg-hf-note a{color:var(--gold-bright);font-weight:700;text-decoration:none;
    font-variant-numeric:tabular-nums}
  .rsg-inm-ac .rsg-hf-note a:hover{text-decoration:underline}
  /* Stacked: the card loses its right-hand pull so it lines up with the left column. */
  @media (max-width:1024px){
    .rsg-inm-ac .rsg-hero-card{margin-left:0;max-width:560px}
  }
  @media (max-width:520px){
    .rsg-inm-ac .rsg-hf-row{grid-template-columns:1fr}
    .rsg-inm-ac .rsg-hero-card--form{padding:24px 20px 22px}
  }
  

  /* ============ S2 SUMMERS - FIGURES MOVED UNDER THE PHOTO (client, 2026-08-18) ========
     The four figures moved out of the left copy column and into the media column, in a
     card that sits under the photo and rides up over it. Width is 88% of the photo so the
     photo edge still reads on both sides, and the card pulls up 50px so the two overlap.
     Card ground is a near-white gradient (the band is paper, so white separates without a
     heavy outline), a hairline, and the RED top edge carried over from the badge that used
     to sit on the photo - that accent stays in the section instead of disappearing with it.
     Numerals drop 26px -> 19px because the column is narrower than the copy column they
     came from.
     Media padding zeroed: the 24px top/right inset only existed to make room for the
     offset outline and the ring. The outline is gone; the ring returned 2026-08-19 on negative offsets, so it reserves nothing. Without this padding the photo sits off-centre
     in its column.
     Stacked (<=1024) the copy column is display:contents, so its children are ordered
     against the media as siblings. The figures used to be order 5, after both body
     paragraphs; now they travel inside the media, so the media moves to order 5 too. That
     keeps the reading order eyebrow -> H2 -> body copy -> photo + figures, rather than
     letting the figures cut in ahead of the copy. */
  .rsg-inm-ac .rsg-works-media{padding:0}
  .rsg-inm-ac .rsg-works-figbox{position:relative;z-index:3;width:94%;margin:-75px auto 0;
    padding:20px 18px 18px;border-radius:16px;
    background:linear-gradient(178deg,#FFFFFF,#FBF7F0);
    border:1px solid var(--line);border-top:3px solid var(--ink);
    box-shadow:var(--shadow-3)}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow{margin-top:0;grid-template-columns:1fr;gap:12px}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow--figs .rsg-flow-step b{font-size:15px;line-height:1.15;margin-bottom:0}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow-step{padding-left:18px;display:grid;grid-template-columns:75px 1fr;column-gap:14px;align-items:baseline}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow--figs .rsg-flow-node{top:4px;width:7px;height:7px;box-shadow:0 0 0 3px rgba(170,24,44,.12)}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow-step span{line-height:1.3}
  /* ---- 2026-08-19 (client) ----
     1. The copy column reads heavier than the rest of the page. Measured, it was already
        18px like the pricing / step / FAQ intros - it only LOOKS bigger because this
        column is the narrowest long-form measure on the page (567px). Dropped to the
        page's own --fs-sub value so it is a genuine token, not an ad-hoc size.
     2. The figures card was cramped: the 2x2 grid gave each caption about 209px, so
        every one wrapped to 3-4 lines. Content is unchanged - instead each figure now
        runs as ONE row with the numeral beside its caption, which roughly doubles the
        caption measure and drops most of them to 1-2 lines. Numeral eased 19px to 17px
        per the same note. Below 520px the pair stacks again, because a fixed label
        column would squeeze the caption to about 22 characters on a phone. */
  .rsg-inm-ac .rsg-works-copy .rsg-sub{font-size:var(--fs-sub)}
  /* ---- SUMMERS BAND, three client asks (2026-08-19) --------------------------------
     1. CTA after the copy. Markup only - .rsg-works-cta already existed as dead CSS from
        the original build, INCLUDING its stacked order:6, so the reading order stays
        H2 -> copy -> photo+figures -> button with nothing new to write. The action text
        and target are lifted verbatim from the contact band's own button, so no new copy
        enters the page and the request popup already binds to it by delegation.
     2. Figures card, premium pass. Copy untouched, material only:
        - radius 16px -> var(--r-photo) so the card and the photo it overlaps share ONE
          radius instead of two near-miss values
        - the numerals get tabular lining figures, so 1-year / 30 days / 24/7 / 2010-era
          align down the column the way the removed .rsg-works-badge already did
        - rows are divided by a hairline instead of a bare gap, which reads as a spec
          plate. It is drawn as a pseudo-element floating in the gap rather than as a
          border plus padding, because the row's dot is absolutely positioned against the
          row box and any padding change would slide the dot off its numeral. The hairline
          is .08 alpha, not var(--line) .14, since premium hairlines sit .06-.10
        - red top edge 3px -> 2px plus an inset white highlight, so the accent reads as a
          drawn edge rather than a painted band clipped by the corner radius
        - captions get text-wrap:pretty to kill widowed last words
     3. Ring on the photo's top-right, border only, about a quarter of it behind the photo.
        This REVIVES .rsg-works-ring, which shipped in the original build and was removed
        when the figures card landed; the old rule was deleted so there is exactly one
        definition. Two changes from it: the border is a literal azure rgba rather than
        var(--gold) - that token is frozen to the root --acc and resolves AZURE on this
        page anyway, so the literal states the real colour and can carry alpha - and the
        offsets are negative now, so the ring needs no reserved padding on the column.
        Every number below is MEASURED by sampling the disc against the photo rect:
          1025 and up   116px, hidden 25.3%, 13px inside the wrap, 20px below the band top
          768-1024      116px, hidden 24.7% at both ends of the range (checked 771, 971)
          below 768     64px,  hidden 24.4%
        Three regimes because the constraints differ: the ring may not cross the wrap's
        padding edge (that would add horizontal scroll) and may not touch the copy above
        it once the band stacks. Below 768 the photo spans the full content width, so a
        116px ring cannot clear both at once - hence the smaller one. Widening the media
        column's padding to make room was rejected: the client asked for the wide mobile
        photo, and that is exactly what the padding would eat.
     PLACEMENT: this block sits after the ORIGINAL figbox rules on purpose. They are
     equal specificity, so an earlier block would lose every shared property; and it sits
     before the max-width:520px override so mobile keeps its own tighter padding. ---- */
  .rsg-inm-ac .rsg-works-ring{position:absolute;top:-70px;right:-70px;width:175px;height:175px;
    border-radius:50%;border:2px solid var(--cream);z-index:0;pointer-events:none}
  .rsg-inm-ac .rsg-works-figbox{
    border-radius:var(--r-photo);border-top-width:2px;padding:22px 20px 18px;
    background:linear-gradient(178deg,#FFFFFF,#FCFAF6);
    box-shadow:var(--shadow-3),inset 0 1px 0 rgba(255,255,255,.9)}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow{gap:16px}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow-step + .rsg-flow-step::after{
    content:"";position:absolute;left:0;right:0;top:-8px;height:1px;
    background:rgba(26,28,27,.08)}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow--figs .rsg-flow-step b{
    font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
  .rsg-inm-ac .rsg-works-figbox .rsg-flow-step span{text-wrap:pretty}
  @media (max-width:1024px){
    .rsg-inm-ac .rsg-works-ring{top:-76px;right:-32px}
  }
  @media (max-width:767px){
    .rsg-inm-ac .rsg-works-ring{top:-44px;right:-12px;width:64px;height:64px}
  }
  @media (max-width:520px){
    .rsg-inm-ac .rsg-works-figbox .rsg-flow-step{grid-template-columns:1fr;row-gap:2px}
    .rsg-inm-ac .rsg-works-figbox .rsg-flow--figs .rsg-flow-step b{margin-bottom:3px}
  }
  @media (max-width:1024px){
    .rsg-inm-ac .rsg-works-media{order:5}
  }
  @media (max-width:520px){
    .rsg-inm-ac .rsg-works-figbox{width:96%;margin-top:-40px;padding:18px 18px 16px}
  }
  

    

    .rsg-sgx-c5{
      --navy-deep:#062755; --navy-card:#072856; --gold:var(--acc); --gold-bright:var(--acc-ink);
      position:relative; overflow:hidden;
      font-family:var(--font-body);
      color:#E7EEF3;
      padding:clamp(54px,8vw,86px) 0;
      background:var(--band-dark);
    }
    .rsg-sgx-c5 *{ box-sizing:border-box; }

    /* faint tonal-ice depth wash, top-right (brand tone, not a glow badge) */
    .rsg-sgx-c5::before{
      content:""; position:absolute; top:-16%; right:-6%; width:48%; height:66%;
      background:radial-gradient(closest-side,rgba(169,211,240,.11),transparent 72%);
      pointer-events:none; z-index:0;
    }

    .rsg-sgx-c5 .sgx5-inner{
      max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,28px);
      position:relative; z-index:1;
    }

    /* ---- Header ---- */
    .rsg-sgx-c5 .sgx5-head{ max-width:760px; margin:0 0 clamp(32px,4vw,46px); }
    .rsg-sgx-c5 .sgx5-eyebrow{
      display:flex; align-items:center; gap:14px;
      margin:0 0 17px;
      font-family:var(--font-heading);
      font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
      color:var(--eyebrow-dark);
    }
    /* gold whisper signature: the editorial kicker rule */
    .rsg-sgx-c5 .sgx5-kicker{
      display:inline-block; width:28px; height:2px; flex:0 0 auto; border-radius:2px;
      background:linear-gradient(90deg,var(--gold),var(--gold-bright));
    }
    .rsg-sgx-c5 .sgx5-h2{text-transform:uppercase;letter-spacing:.012em;
      margin:0 0 15px;
      font-family:var(--font-display);
      font-weight:800; letter-spacing:-.021em; line-height:1.02;
      font-size:clamp(31px,4.8vw,47px);
      color:#EEF5FB;
      text-wrap:balance;
    }
    .rsg-sgx-c5 .sgx5-sub{
      margin:0; max-width:60ch;
      font-size:clamp(15px,1.5vw,17px); line-height:1.55;
      color:var(--muted-dark); text-wrap:pretty;
    }

    /* ---- Index grid (box-free, hairline-divided) ---- */
    .rsg-sgx-c5 .sgx5-grid{
      list-style:none; margin:0; padding:0;
      display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    }
    .rsg-sgx-c5 .sgx5-cell{
      position:relative;
      display:flex; flex-direction:column;
      padding:26px 28px;
      transition:background .4s var(--ease);
    }
    .rsg-sgx-c5 .sgx5-cell.is-now{ --sev:#E33950; }
    .rsg-sgx-c5 .sgx5-cell.is-soon{ --sev:var(--gold-bright); }
    .rsg-sgx-c5 .sgx5-cell.is-notice{ --sev:var(--ice); }

    /* per-cell severity-tinted hover wash (each entry lights in its own color) */
    .rsg-sgx-c5 .sgx5-cell:hover{
      background:linear-gradient(163deg, color-mix(in srgb, var(--sev) 13%, transparent), transparent 68%);
    }

    .rsg-sgx-c5 .sgx5-sev{
      display:inline-flex; align-items:center; gap:9px;
      margin:0 0 13px;
      font-family:var(--font-heading);
      font-size:11.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
      color:var(--sev);
    }
    .rsg-sgx-c5 .sgx5-dot{
      width:8px; height:8px; border-radius:50%; flex:none;
      background:var(--sev);
      box-shadow:0 0 0 4px color-mix(in srgb, var(--sev) 20%, transparent);
    }
    .rsg-sgx-c5 .sgx5-title{
      position:relative; margin:0; padding-bottom:15px;
      font-family:var(--font-display);
      font-weight:700; letter-spacing:-.012em; line-height:1.12;
      font-size:clamp(19px,2vw,23px);
      color:#E7EEF3;
      transition:color .3s var(--ease);
      text-wrap:balance;
    }
    /* growing severity underline = signature + micro-interaction */
    .rsg-sgx-c5 .sgx5-title::after{
      content:""; position:absolute; left:0; bottom:0; height:2px; width:32px; border-radius:2px;
      background:var(--sev);
      transition:width .45s var(--ease);
    }
    .rsg-sgx-c5 .sgx5-verdict{
      margin:15px 0 0; max-width:36ch;
      font-size:clamp(14px,1.35vw,15px); line-height:1.52;
      color:var(--muted-dark);
      transition:color .3s var(--ease);
      text-wrap:pretty;
    }

    .rsg-sgx-c5 .sgx5-cell:hover .sgx5-title{ color:#FFFFFF; }
    .rsg-sgx-c5 .sgx5-cell:hover .sgx5-title::after{ width:66px; }
    .rsg-sgx-c5 .sgx5-cell:hover .sgx5-verdict{ color:#E2EBF3; }

    /* ---- Foot (one row on desktop) ---- */
    .rsg-sgx-c5 .sgx5-foot{
      display:flex; align-items:center; justify-content:space-between;
      flex-wrap:wrap; gap:18px 26px;
      margin-top:clamp(30px,4vw,44px);
      padding-top:25px;
      border-top:1px solid var(--navy-line);
    }
    .rsg-sgx-c5 .sgx5-foot-line{
      margin:0; font-size:clamp(15px,1.5vw,16px); line-height:1.5;
      color:var(--muted-dark);
    }
    .rsg-sgx-c5 .sgx5-foot-line b{ color:#E7EEF3; font-weight:700; }
    /* CTA = the page's dark-band RED action button (solid red + scale + shine sweep), self-contained */
    .rsg-sgx-c5 .sgx5-cta{
      position:relative; overflow:hidden; flex:0 0 auto;
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      background:var(--red); border:0; color:#FFFFFF; text-decoration:none;
      border-radius:12px; padding:16px 30px;
      font-family:var(--font-body); font-size:16.5px; font-weight:700; line-height:1.15; letter-spacing:.01em;
      cursor:pointer; transform-origin:center;
      box-shadow:0 2px 6px rgba(5,18,32,.2),0 12px 28px rgba(170,24,44,.30);
      transition:transform .28s var(--ease), box-shadow .28s var(--ease);
    }
    .rsg-sgx-c5 .sgx5-cta::after{
      content:""; position:absolute; top:0; bottom:0; left:-80%; width:55%; pointer-events:none;
      background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);
      transform:skewX(-18deg); transition:left .6s var(--ease);
    }
    .rsg-sgx-c5 .sgx5-cta:hover{
      transform:scale(1.05);
      box-shadow:0 4px 12px rgba(5,18,32,.26),0 18px 36px rgba(170,24,44,.36);
    }
    .rsg-sgx-c5 .sgx5-cta:hover::after{ left:125%; }
    .rsg-sgx-c5 .sgx5-cta:focus-visible{
      outline:3px solid var(--gold); outline-offset:2px;
    }

    /* ---- Divider logic per breakpoint (non-overlapping ranges) ---- */
    /* Desktop: 3 columns x 2 rows */
    @media (min-width:1025px){
      .rsg-sgx-c5 .sgx5-grid{ grid-template-columns:repeat(3,1fr); }
      .rsg-sgx-c5 .sgx5-cell{ border-top:1px solid var(--navy-line); border-left:1px solid var(--navy-line); }
      .rsg-sgx-c5 .sgx5-cell:nth-child(-n+3){ border-top:0; }
      .rsg-sgx-c5 .sgx5-cell:nth-child(3n+1){ border-left:0; }
    }
    /* Tablet: 2 columns x 3 rows */
    @media (min-width:561px) and (max-width:1024px){
      .rsg-sgx-c5 .sgx5-grid{ grid-template-columns:1fr 1fr; }
      .rsg-sgx-c5 .sgx5-cell{ border-top:1px solid var(--navy-line); border-left:1px solid var(--navy-line); padding:24px 24px; }
      .rsg-sgx-c5 .sgx5-cell:nth-child(-n+2){ border-top:0; }
      .rsg-sgx-c5 .sgx5-cell:nth-child(odd){ border-left:0; }
    }
    /* Mobile: 1 column, hairline between each entry */
    @media (max-width:560px){
      .rsg-sgx-c5 .sgx5-grid{ grid-template-columns:1fr; }
      .rsg-sgx-c5 .sgx5-cell{ border-top:1px solid var(--navy-line); border-left:0; padding:22px 0; }
      .rsg-sgx-c5 .sgx5-cell:first-child{ border-top:0; padding-top:0; }
      .rsg-sgx-c5 .sgx5-foot{ flex-direction:column; align-items:flex-start; }
      .rsg-sgx-c5 .sgx5-cta{ width:100%; text-align:center; }
    }

    @media (prefers-reduced-motion:reduce){
      .rsg-sgx-c5 .sgx5-cell,
      .rsg-sgx-c5 .sgx5-title,
      .rsg-sgx-c5 .sgx5-title::after,
      .rsg-sgx-c5 .sgx5-verdict,
      .rsg-sgx-c5 .sgx5-cta,
      .rsg-sgx-c5 .sgx5-cta::after{ transition:none; }
    }
  

  /* ====== S3 SIGNS - CENTRED, WITH A FULL-WIDTH FIRST AND LAST ROW (client, 2026-08-18) ======
     CSS only - no markup and no copy touched in this round.
     Placed straight after the band's own style block so these win on source order at equal
     specificity, rather than by inflating selectors.
     Why each row was short of the box in the first place:
       row 1  .sgx5-head was capped at 760px with margin-left 0, and .sgx5-sub capped again at
              60ch, so the header sat in the left two thirds of a 1124px content box.
       row 6  .sgx5-foot is a space-between flex that used to hold copy PLUS a red CTA. The CTA
              markup came out in the Notion round, leaving one flex child, which sizes to its
              own content instead of filling the row. Hence flex:1 1 100%, not a width bump.
     Centring needs more than text-align because three parts of this band are flex or absolute:
     the eyebrow is a flex row, each cell is a flex column, and the severity underline is
     absolutely positioned at left:0 - so it is re-anchored to the centre.
     NOTE the measure: at full width the intro runs past the 60-75 character line length the
     type rules ask for. That is the explicit request (cover the whole boxed area); capping it
     around 80ch is a one-line change if it reads too wide. */
  .rsg-sgx-c5 .sgx5-inner{ text-align:center; }

  /* ---- row 1: fill the box ---- */
  .rsg-sgx-c5 .sgx5-head{ max-width:none; margin-left:auto; margin-right:auto; }
  .rsg-sgx-c5 .sgx5-eyebrow{ justify-content:center; }
  .rsg-sgx-c5 .sgx5-sub{ max-width:none; }

  /* ---- cells: centre the flex column, the capped paragraph and the underline ---- */
  .rsg-sgx-c5 .sgx5-cell{ align-items:center; }
  .rsg-sgx-c5 .sgx5-verdict{ margin-left:auto; margin-right:auto; }
  .rsg-sgx-c5 .sgx5-title::after{ left:50%; transform:translateX(-50%); }

  /* ---- last row: fill the box ---- */
  .rsg-sgx-c5 .sgx5-foot{ justify-content:center; }
  .rsg-sgx-c5 .sgx5-foot-line{ flex:1 1 100%; }

  @media (max-width:560px){
    .rsg-sgx-c5 .sgx5-foot{ align-items:center; }
  }
  

  /* ====== S5 REPAIR-OR-REPLACE - CREAM GROUND, FULL-WIDTH HEAD, PREMIUM TABLE (client) ======
     Every selector is prefixed with the band class, so these are (0,3,x) and beat the main
     block's (0,2,x) rules regardless of where this block sits.
     THE TRAP THAT COMES WITH THAT: raising specificity also beats the main block's
     max-width:767px table rules, so the stacked-table overrides (padding, no border-bottom,
     no vertical rule) are RE-STATED in the query at the bottom. Without that, winning the
     desktop cascade silently breaks the mobile card view.
     Band ground moves off --paper to the requested #EEE2CD (the band's cream tone). Two
     knock-ons: the header row can no longer be --cream #EFE2CD, because it would read as a
     hole in the table rather than a header - it becomes navy; and .rsg-why below has a
     paper-filled top wave that must be re-filled to match this band (done in markup).
     Table treatment, all against premium-polish-rules: one elevation from the shared
     --shadow-2 rather than a new shadow, hairlines dropped from .14 to .075-.10 alpha,
     roomier 17/22 cells, crisper --ink data instead of --muted, tabular lining numerals so
     the ages and refrigerant numbers align down the column, a faint warm zebra for
     scanability, a hover row, one vertical rule to separate repair from replace, and a
     navy header whose underline is azure on the repair side and red on the replace side -
     the only decoration, and it carries meaning. */

  /* ---- band ground ---- */
  .rsg-inm-ac .rsg-cmp-sec.rsg-sec--light{ background:#EEE2CD; }

  /* ---- heading block fills the boxed area (was capped at 66ch) ---- */
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp-lead{ max-width:none; }

  /* ---- table shell ---- */
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp-wrap{ margin-top:42px; }
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp{
    border-radius:14px;
    border:1px solid rgba(26,28,27,.10);
    box-shadow:var(--shadow-2);
  }

  /* ---- header row ---- */
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp thead th{
    background:#072857; color:#FFFFFF;
    padding:16px 22px;
    font-size:12px; letter-spacing:.13em;
    border-bottom:3px solid rgba(255,255,255,.16);
  }
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp thead th:first-child{ border-bottom-color:var(--azure); }
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp thead th:last-child{ border-bottom-color:var(--red); }

  /* ---- body ---- */
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp td{
    padding:17px 22px;
    font-size:15.5px; line-height:1.5;
    color:var(--ink); font-weight:500;
    border-bottom:1px solid rgba(26,28,27,.075);
    font-variant-numeric:tabular-nums lining-nums;
  }
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody tr{ transition:background .25s var(--ease); }
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody tr:nth-child(even){ background:#FBF8F3; }
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody tr:hover{ background:rgba(6,54,118,.05); }
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp thead th:first-child,
  .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody td:first-child{ border-right:1px solid rgba(26,28,27,.08); }

  /* ---- stacked view: re-state what the raised specificity would otherwise override ---- */
  @media (max-width:767px){
    .rsg-inm-ac .rsg-cmp-sec .rsg-cmp td{
      padding:6px 18px; font-size:15px;
      border-bottom:0; border-right:0;
    }
    .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody tr:nth-child(even){ background:transparent; }
    .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody tr:hover{ background:transparent; }
    /* the desktop vertical rule is (0,4,2) via tbody td:first-child, so it beat the
       border-right:0 above and left a stray hairline inside the stacked cards */
    .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody td:first-child{ border-right:0; }
    /* the two sides of a row ran together as one block - give the second one air */
    .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody td + td{ padding-top:14px; }
  }

  @media (prefers-reduced-motion:reduce){
    .rsg-inm-ac .rsg-cmp-sec .rsg-cmp tbody tr{ transition:none; }
  }
  



.rsg-acm-c3{
  --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;
  --font-head:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --fs-sub:17px; --fs-eyebrow:13px; --fs-chip:12px; --fs-slabel:14px;
  --fs-nowname:23px; --fs-nowmeta:14px; --fs-note:14px; --fs-mapname:15px; --fs-mapmeta:12.5px;
  --i75:#55A4D7; --i575:#99CAEC; --eastcobb:#C0D9F1; --ga400:#74B5E1;
  overflow-x:clip;
}
.rsg-acm-c3 *{ box-sizing:border-box; }

.rsg-acm-c3 .acm3-band{
  background:var(--paper);
  padding:74px 0 78px;
  border-top:1px solid rgba(22,39,57,.06);
  border-bottom:1px solid rgba(22,39,57,.06);
  position:relative;
}
.rsg-acm-c3 .acm3-wrap{
  max-width:1180px; margin:0 auto; padding:0 28px;
  font-family:var(--font-body); color:var(--ink);
}

/* ---------- header ---------- */
/* Centred section header (client, 2026-08-04). margin auto centres the capped block across
   the full band; cap raised 720 -> 860 so the two-line title can breathe now that it is
   centred. The sub below keeps its own 62ch measure and is centred separately. */
.rsg-acm-c3 .acm3-head{ max-width:860px; margin:0 auto 34px; text-align:center; }
.rsg-acm-c3 .acm3-head .acm3-sub{ margin-left:auto; margin-right:auto; }
.rsg-acm-c3 .acm3-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-eyebrow);
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 14px;
}
.rsg-acm-c3 .acm3-eyebrow::before{
  content:""; width:30px; height:2px; background:var(--gold); border-radius:2px; display:inline-block;
}
.rsg-acm-c3 .acm3-title{text-transform:uppercase;letter-spacing:.012em;
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2);
  line-height:1.08; letter-spacing:-.015em; color:var(--ink); margin:0 0 14px;
  text-wrap:balance;
}
.rsg-acm-c3 .acm3-sub{
  font-size:var(--fs-sub); line-height:1.6; color:var(--muted); margin:0; max-width:62ch;
  text-wrap:pretty;
}

/* ---------- main grid ---------- */
.rsg-acm-c3 .acm3-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  gap:26px; align-items:start;
}

/* ---------- transit console (signature) ---------- */
.rsg-acm-c3 .acm3-console{
  background:var(--card-dark);
  border:1px solid var(--navy-line);
  border-radius:18px; padding:24px 24px 22px;
  box-shadow:0 26px 60px rgba(8,25,42,.30), inset 0 1px 0 rgba(255,255,255,.05);
}
.rsg-acm-c3 .acm3-console-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--navy-line);
}
.rsg-acm-c3 .acm3-net-label{
  font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:#E4EEF6;
}
.rsg-acm-c3 .acm3-net-sub{
  font-size:12.5px; color:var(--muted-dark); letter-spacing:.01em;
}

/* full territory master control */
.rsg-acm-c3 .acm3-master{
  width:100%; display:flex; align-items:center; gap:14px;
  background:rgba(169,211,240,.05); border:1px solid var(--navy-line);
  border-radius:13px; padding:13px 15px; margin-bottom:20px;
  cursor:pointer; text-align:left; font-family:inherit; color:inherit;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.rsg-acm-c3 .acm3-master:hover{ border-color:rgba(169,211,240,.42); background:rgba(169,211,240,.08); }
.rsg-acm-c3 .acm3-master[aria-pressed="true"]{
  border-color:rgba(var(--acc-ink-rgb),.55);
  background:linear-gradient(120deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.05));
  box-shadow:inset 3px 0 0 var(--gold-bright);
}
.rsg-acm-c3 .acm3-master-glyph{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; background:rgba(8,25,42,.45); border:1px solid var(--navy-line);
  color:var(--ice);
}
.rsg-acm-c3 .acm3-master[aria-pressed="true"] .acm3-master-glyph{ color:var(--gold-bright); border-color:rgba(var(--acc-ink-rgb),.4); }
.rsg-acm-c3 .acm3-master-glyph svg{ width:21px; height:21px; display:block; }
.rsg-acm-c3 .acm3-master-txt{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.rsg-acm-c3 .acm3-master-name{
  font-family:var(--font-head); font-weight:800; font-size:16px; letter-spacing:.01em; color:#ECF4FB;
  text-transform:uppercase;
}
.rsg-acm-c3 .acm3-master-note{ font-size:12.5px; color:var(--muted-dark); }
.rsg-acm-c3 .acm3-master-mark{
  flex:none; font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-ink); background:rgba(var(--acc-ink-rgb),.16);
  padding:5px 9px; border-radius:20px; opacity:0; transition:opacity .3s var(--ease);
}
.rsg-acm-c3 .acm3-master[aria-pressed="true"] .acm3-master-mark{ opacity:1; color:var(--gold-bright); }

/* corridor lines */
.rsg-acm-c3 .acm3-lines{ display:grid; grid-template-columns:1fr 1fr; gap:8px 26px; }
.rsg-acm-c3 .acm3-lcol{ display:flex; flex-direction:column; gap:20px; }

.rsg-acm-c3 .acm3-line{ --line-color:var(--ice); }
.rsg-acm-c3 .acm3-line--cobb{ --line-color:var(--i75); }
.rsg-acm-c3 .acm3-line--cherokee{ --line-color:var(--i575); }
.rsg-acm-c3 .acm3-line--northfulton{ --line-color:var(--ga400); }
.rsg-acm-c3 .acm3-line--paulding{ --line-color:var(--eastcobb); }
.rsg-acm-c3 .acm3-line--bartow{ --line-color:#8ABFE4; }
.rsg-acm-c3 .acm3-line--dekalb{ --line-color:#B3D4EE; }

.rsg-acm-c3 .acm3-chip{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:6px;
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-chip);
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted-dark);
  transition:color .3s var(--ease);
}
.rsg-acm-c3 .acm3-chip-dot{
  width:11px; height:11px; border-radius:3px; background:var(--line-color);
  box-shadow:0 0 0 3px rgba(8,25,42,.4);
  transition:background .3s var(--ease);
}

.rsg-acm-c3 .acm3-stations{ position:relative; padding-left:1px; }
/* the corridor stroke */
.rsg-acm-c3 .acm3-stations::before{
  content:""; position:absolute; left:8px; top:18px; bottom:18px; width:2px;
  background:var(--line-color); border-radius:2px; opacity:.55;
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
/* gold sweep overlay on active line */
.rsg-acm-c3 .acm3-stations::after{
  content:""; position:absolute; left:7.5px; top:18px; bottom:18px; width:3px;
  background:var(--gold-bright); border-radius:2px; transform:scaleY(0); transform-origin:top;
  opacity:0; pointer-events:none;
  box-shadow:0 0 10px rgba(var(--acc-ink-rgb),.5);
}
.rsg-acm-c3 .acm3-line.is-active .acm3-stations::before{ opacity:0; }
.rsg-acm-c3 .acm3-line.is-active .acm3-stations::after{ opacity:1; animation:acm3-sweep .5s var(--ease) both; }

.rsg-acm-c3 .acm3-station{
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:16px 1fr; align-items:center; gap:13px;
  min-height:36px; padding:2px 4px 2px 0; margin:0;
  background:none; border:none; cursor:pointer; text-align:left; font-family:inherit;
}
.rsg-acm-c3 .acm3-dot{
  width:16px; height:16px; border-radius:50%; box-sizing:border-box;
  border:2px solid var(--line-color); background:var(--void); position:relative;
  transition:transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}
.rsg-acm-c3 .acm3-slabel{
  font-family:var(--font-head); font-weight:600; font-size:var(--fs-slabel);
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted-dark); line-height:1.2;
  transition:color .28s var(--ease);
}
.rsg-acm-c3 .acm3-station.is-hub .acm3-dot{
  width:18px; height:18px; box-shadow:0 0 0 3px rgba(85,164,215,.22);
}
.rsg-acm-c3 .acm3-station.is-hub .acm3-slabel::after{
  content:"Base"; font-size:9px; font-weight:700; letter-spacing:.08em; color:var(--muted);
  background:rgba(169,211,240,.14); padding:2px 6px; border-radius:10px; margin-left:8px;
  vertical-align:middle;
}

/* hover */
.rsg-acm-c3 .acm3-station:hover .acm3-dot{ transform:scale(1.2); border-color:var(--ice); }
.rsg-acm-c3 .acm3-station:hover .acm3-slabel{ color:#ECF4FB; }

/* active line + selected station */
.rsg-acm-c3 .acm3-line.is-active .acm3-chip{ color:var(--gold-bright); }
.rsg-acm-c3 .acm3-line.is-active .acm3-chip-dot{ background:var(--gold-bright); }
.rsg-acm-c3 .acm3-line.is-active .acm3-dot{ border-color:var(--gold); }
.rsg-acm-c3 .acm3-line.is-active .acm3-slabel{ color:var(--gold); }
.rsg-acm-c3 .acm3-station.is-selected .acm3-slabel{ color:var(--gold-bright); font-weight:800; }
.rsg-acm-c3 .acm3-station.is-selected .acm3-dot{
  background:var(--gold-bright); border-color:var(--gold-bright);
  box-shadow:0 0 0 4px rgba(var(--acc-ink-rgb),.18), 0 0 14px rgba(var(--acc-ink-rgb),.45);
}
.rsg-acm-c3 .acm3-station.is-selected .acm3-dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--gold-bright); opacity:0;
  animation:acm3-pulse 2.2s var(--ease) infinite;
}

/* focus */
.rsg-acm-c3 .acm3-station:focus-visible,
.rsg-acm-c3 .acm3-master:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; border-radius:9px; }

/* ---------- map card ---------- */
.rsg-acm-c3 .acm3-mapcard{
  background:var(--card); border:1px solid rgba(22,39,57,.08);
  border-radius:18px; padding:10px; box-shadow:0 26px 60px rgba(6,39,85,.14);
}
.rsg-acm-c3 .acm3-mapframe{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  background:#DAE1E6; isolation:isolate;
}
.rsg-acm-c3 .acm3-mapframe iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  transition:opacity .32s var(--ease);
}
.rsg-acm-c3 #acm3-frame.acm3-fading{ opacity:.32; }
.rsg-acm-c3 .acm3-mapchip{
  position:absolute; top:13px; left:13px; z-index:2; pointer-events:none;
  background:var(--card); border:1px solid rgba(22,39,57,.09);
  border-radius:11px; padding:9px 13px; box-shadow:0 8px 22px rgba(6,39,85,.16);
  display:flex; flex-direction:column; gap:2px; max-width:calc(100% - 26px);
}
.rsg-acm-c3 .acm3-mapchip-name{
  font-family:var(--font-head); font-weight:800; font-size:var(--fs-mapname);
  letter-spacing:.01em; color:var(--ink); line-height:1.1;
}
.rsg-acm-c3 .acm3-mapchip-meta{
  font-size:var(--fs-mapmeta); color:var(--muted); font-variant-numeric:tabular-nums lining-nums;
}
.rsg-acm-c3 .acm3-star{ color:var(--gold-ink); font-weight:700; }

/* ---------- now viewing + reassurance ---------- */
.rsg-acm-c3 .acm3-footrow{
  margin-top:26px; display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 26px; box-shadow:0 12px 34px rgba(6,39,85,.06);
}
.rsg-acm-c3 .acm3-now{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.rsg-acm-c3 .acm3-now-label{
  font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.rsg-acm-c3 .acm3-now-name{
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-nowname);
  letter-spacing:-.01em; color:var(--ink); line-height:1.1;
}
.rsg-acm-c3 .acm3-now-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; }
.rsg-acm-c3 .acm3-now-corr{
  display:inline-flex; align-items:center; font-family:var(--font-head); font-weight:700;
  font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-ink);
  background:rgba(var(--acc-rgb),.14); border:1px solid rgba(var(--acc-rgb),.28);
  padding:4px 11px; border-radius:20px; white-space:nowrap;
}
.rsg-acm-c3 .acm3-now-zips{
  font-size:var(--fs-nowmeta); color:var(--muted); line-height:1.5;
  font-variant-numeric:tabular-nums lining-nums;
}
.rsg-acm-c3 .acm3-note{
  margin:0; font-size:var(--fs-note); line-height:1.55; color:var(--muted); font-style:italic;
  border-left:2px solid var(--gold); padding-left:16px;
}

/* ---------- entrance motion (JS-gated so content is never stuck) ---------- */
.rsg-acm-c3.acm3-anim .acm3-head,
.rsg-acm-c3.acm3-anim .acm3-console,
.rsg-acm-c3.acm3-anim .acm3-mapcard,
.rsg-acm-c3.acm3-anim .acm3-footrow{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.rsg-acm-c3.acm3-anim.is-in .acm3-head{ opacity:1; transform:none; }
.rsg-acm-c3.acm3-anim.is-in .acm3-console{ opacity:1; transform:none; transition-delay:.08s; }
.rsg-acm-c3.acm3-anim.is-in .acm3-mapcard{ opacity:1; transform:none; transition-delay:.16s; }
.rsg-acm-c3.acm3-anim.is-in .acm3-footrow{ opacity:1; transform:none; transition-delay:.24s; }

@keyframes acm3-sweep{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes acm3-pulse{ 0%{ transform:scale(.75); opacity:.9; } 70%{ transform:scale(1.6); opacity:0; } 100%{ transform:scale(1.6); opacity:0; } }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .rsg-acm-c3{ --fs-nowname:21px; }
  .rsg-acm-c3 .acm3-band{ padding:60px 0 64px; }
  .rsg-acm-c3 .acm3-grid{ gap:22px; }
  .rsg-acm-c3 .acm3-lines{ gap:8px 18px; }
}
@media (max-width:860px){
  .rsg-acm-c3 .acm3-grid{ grid-template-columns:1fr; }
  .rsg-acm-c3 .acm3-mapframe{ aspect-ratio:16/11; }
}
@media (max-width:767px){
  .rsg-acm-c3{ --fs-sub:16px; --fs-nowname:20px; }
  .rsg-acm-c3 .acm3-wrap{ padding:0 20px; }
  .rsg-acm-c3 .acm3-band{ padding:52px 0 56px; }
  .rsg-acm-c3 .acm3-footrow{ grid-template-columns:1fr; gap:18px; padding:20px; }
}
@media (max-width:600px){
  .rsg-acm-c3 .acm3-lines{ grid-template-columns:1fr; gap:20px; }
  .rsg-acm-c3 .acm3-lcol{ gap:20px; }
}
@media (max-width:480px){
  .rsg-acm-c3{ }
  .rsg-acm-c3 .acm3-console{ padding:20px 18px 18px; }
  .rsg-acm-c3 .acm3-mapframe{ aspect-ratio:5/4; }
  .rsg-acm-c3 .acm3-master{ gap:11px; padding:12px; }
  .rsg-acm-c3 .acm3-master-mark{ display:none; }
  .rsg-acm-c3 .acm3-mapchip{ top:10px; left:10px; padding:8px 11px; }
}

@media (prefers-reduced-motion: reduce){
  .rsg-acm-c3 *{ animation:none !important; transition:none !important; }
  .rsg-acm-c3 .acm3-head,
  .rsg-acm-c3 .acm3-console,
  .rsg-acm-c3 .acm3-mapcard,
  .rsg-acm-c3 .acm3-footrow{ opacity:1 !important; transform:none !important; }
  .rsg-acm-c3 .acm3-station.is-selected .acm3-dot::after{ display:none; }
  .rsg-acm-c3 .acm3-line.is-active .acm3-stations::after{ opacity:1; transform:scaleY(1); }
}

/* ==================== TEMPLATE SECTIONS ADDED 2026-08-03 ==========================
   The service-page content template requires four sections this page did not have:
   Stats (4 number-first cards), Comparison Table, Gallery, Blogs. All four are added
   without reordering or restyling anything that already existed.

   BAND PLACEMENT was derived from the divider system, not guessed. Every dark section
   here carries a div-top wave whose fill must equal the band ABOVE it and a div-btm arc
   whose fill must equal the band BELOW it; all 12 were verified consistent first. The
   two inserts that land next to a dark band therefore each need one fill flipped:
     - comparison (paper) goes above rsg-owner  -> owner div-top #EFE2CD -> #F9F3E8
     - stats (cream) goes below rsg-clmx-c2     -> clmx  div-btm #F9F3E8 -> #EFE2CD
   Gallery + Blog sit between rsg-reviews and rsg-faq and need NO divider change
   (reviews' arc is already paper, and gallery is paper), which is also exactly the
   template's own order: Reviews -> Gallery -> Blogs -> FAQs.

   NO INVENTED DATA: every stat figure below is CONTEXT.md-verified. Internal-only
   numbers (avg ticket, avg replacement, peak backlog) are deliberately NOT published.
*/
/* ---- Stats: 4 number-first cards ---- */
.rsg-inm-ac .rsg-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.rsg-inm-ac .rsg-stat-card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:26px 22px;box-shadow:var(--shadow-1)}
.rsg-inm-ac .rsg-stat-fig{display:block;font-family:var(--font-heading);font-size:38px;
  font-weight:800;line-height:1.05;color:var(--royal);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums lining-nums}
.rsg-inm-ac .rsg-stat-fig sup{font-size:.5em;font-weight:700;vertical-align:super;margin-left:2px}
/* 2026-08-15: the review stat card no longer carries a score (client: no rating numbers
   on the site) - it shows the five stars instead. Five glyphs at the 38px figure size
   would run past the card, so this variant sets its own size and gold star colour while
   keeping the card's baseline height. */
.rsg-inm-ac .rsg-stat-fig--stars{font-size:24px;letter-spacing:2px;color:var(--gold-ink);line-height:1.66}
.rsg-inm-ac .rsg-stat-txt{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.rsg-inm-ac .rsg-stat-card::after{content:"";display:block;width:34px;height:2px;
  margin-top:16px;background:var(--red)}
/* ---- Gallery "The Work": product-card anatomy, rebuilt 2026-08-03 to the client's
        reference image. Structure copied from the reference: white rounded card, photo
        INSET with its own smaller radius (white margin all round), then bold title,
        muted subtitle, an icon meta row split by a hairline divider, and an action row
        of one wide pill + one circular icon button.
        Two deliberate substitutions, not copies:
          - the reference's pill is near-black; ours is brand NAVY, which is both the
            dark pill the reference wants AND this site's light-band button colour.
          - the reference's circular button is a heart (favourite). A wishlist on an HVAC
            job gallery would be fake functionality, so the circle is a real click-to-call
            instead - same shape, same red glyph, actually useful. ---- */
.rsg-inm-ac .rsg-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.rsg-inm-ac .rsg-gal-item{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:22px;padding:13px 13px 16px;
  box-shadow:0 1px 2px rgba(26,28,27,.05),0 14px 34px rgba(26,28,27,.08);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.rsg-inm-ac .rsg-gal-item:hover{transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(26,28,27,.07),0 22px 46px rgba(26,28,27,.13)}
.rsg-inm-ac .rsg-gal-media{position:relative;overflow:hidden;border-radius:16px;
  aspect-ratio:4/3;background:var(--cream)}
.rsg-inm-ac .rsg-gal-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.rsg-inm-ac .rsg-gal-item:hover .rsg-gal-media img{transform:scale(1.045)}
.rsg-inm-ac .rsg-gal-body{padding:18px 9px 0;display:flex;flex-direction:column;flex:1}
.rsg-inm-ac .rsg-gal-title{margin:0;font-family:var(--font-heading);font-size:22px;
  font-weight:800;line-height:1.2;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.rsg-inm-ac .rsg-gal-sub{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
/* meta row: icon + label pairs, hairline divider between them */
.rsg-inm-ac .rsg-gal-meta{display:flex;align-items:center;gap:13px;margin-top:15px}
.rsg-inm-ac .rsg-gal-meta span{display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--muted);white-space:nowrap}
.rsg-inm-ac .rsg-gal-meta b{color:var(--ink);font-weight:700}
.rsg-inm-ac .rsg-gal-meta svg{width:15px;height:15px;flex:0 0 auto;fill:none;
  stroke:var(--royal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rsg-inm-ac .rsg-gal-sep{width:1px;height:15px;flex:0 0 auto;background:var(--line)}
/* action row: wide navy pill + circular call button */
.rsg-inm-ac .rsg-gal-act{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:18px}
.rsg-inm-ac .rsg-gal-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;
  padding:14px 18px;border-radius:999px;background:var(--royal);color:#FFFFFF;
  font-family:var(--font-heading);font-size:14px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;transform-origin:center;
  transition:transform .2s var(--ease),filter .2s var(--ease)}
.rsg-inm-ac .rsg-gal-btn:hover{transform:scale(1.03);filter:brightness(1.1)}
.rsg-inm-ac .rsg-gal-call{width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);background:var(--card);
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.rsg-inm-ac .rsg-gal-call svg{width:17px;height:17px;fill:var(--red)}
.rsg-inm-ac .rsg-gal-call:hover{background:rgba(170,24,44,.07);border-color:rgba(170,24,44,.35)}
.rsg-inm-ac .rsg-gal-btn:focus-visible,.rsg-inm-ac .rsg-gal-call:focus-visible{
  outline:2px solid var(--royal);outline-offset:2px}
.rsg-inm-ac .rsg-gal-note{margin:26px 0 0;font-size:13.5px;color:var(--muted)}
/* ---- Blog "From the Shop": FULL-BLEED IMAGE CARDS, rebuilt 2026-08-03 to the client's
        reference image, which is this site's own homepage services card (.rsg-p10) - so
        the anatomy is lifted from it rather than invented: the photo fills the whole card,
        a translucent NAVY pill sits pinned at the photo's top-left with a service-coloured
        dot, and the title + excerpt are overlaid at the bottom over a scrim that keeps the
        photo natural up top (client: overlays must not go dark all over). Same component
        family as the homepage blog cards (.rsg-post), so both pages read as one site.
        TOKEN NOTE (the custom-property trap, MEASURED with a computed-style probe on
        2026-08-03): this band is CREAM, i.e. a LIGHT band, so --acc/--gold* resolve to
        NAVY here - and a navy read cue on a dark scrim is ~1.7:1, i.e. invisible. The card
        re-declares the dark-band pair locally, the same technique .rsg-hero uses. It must
        pin the --gold* LITERALS too, not just --acc: --gold/--gold-bright are declared at
        the root AS var(--acc)/var(--acc-ink), and a custom property's var() is substituted
        where it is DECLARED, so they compute once at .rsg-inm-ac, freeze to the light-band
        pair and inherit that everywhere - re-declaring --acc alone does nothing to them.
        Pinned here, every text-like mark inside resolves to ice #A9D3F0 (8.84:1 on the
        scrim) with red kept for decoration only.
        Category dots stay non-warm (azure / ice) so this card adds no tan back.
        Radius reuses the gallery card's 22px - the two photo-card sections are adjacent,
        so they share one radius logic rather than introducing a fourth value. ---- */
/* CLIENT 2026-08-05: read as the site's BLOGS SECTION, not a flat 3-up photo grid.
   Adopted from the homepage/about blog band: a tall FEATURED card beside two stacked
   smaller ones, a solid RED category pill, a GOLD read cue, and a "Read the blog" CTA.
   Deliberately NOT copied from the homepage:
     - the CREAM band stays. This section sits between the PAPER gallery above and the
       PAPER FAQ below (see the section comment); paper here would merge three bands into
       one flat run. The homepage's band is paper because its neighbours are dark + cream.
     - the 22px radius stays, because it is shared on purpose with the adjacent gallery
       card so the two photo-card sections read as one pair.
     - the card COUNT stays at 3 (1 real post + 2 visible {{NEEDS_SOURCE}} placeholders).
       The homepage's geometry wants 5; only one post actually exists, so the featured slot
       goes to the real one rather than fabricating four teasers. */
.rsg-inm-ac .rsg-blog-grid{display:grid;grid-template-columns:1.34fr 1fr;grid-auto-rows:268px;
  gap:22px;margin-top:44px}
.rsg-inm-ac .rsg-blog-card{
  --acc:#AA182C; --acc-rgb:170,24,44; --acc-ink-rgb:169,211,240;
  /* --acc-ink stays ICE for the focus ring; the GOLD trio now pins to tan so the read cue
     matches the homepage's. Both are safe on this scrim: ice #A9D3F0 is 8.84:1, tan
     #E2C6A3 is ~12.7:1. The pins are still required -- see the TOKEN NOTE above. */
  --acc-ink:#A9D3F0;
  --gold:#AA182C; --gold-bright:#E2C6A3; --gold-ink:#E2C6A3;
  position:relative;isolation:isolate;overflow:hidden;min-height:0;
  border-radius:22px;border:1px solid var(--line);background:var(--band-dark);
  box-shadow:0 1px 2px rgba(26,28,27,.05),0 14px 34px rgba(26,28,27,.08);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* featured = the one REAL post; spans both rows of the left column */
.rsg-inm-ac .rsg-blog-card.is-featured{grid-column:1;grid-row:1 / span 2}
.rsg-inm-ac .rsg-blog-card:hover{transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(26,28,27,.07),0 22px 46px rgba(26,28,27,.13)}
.rsg-inm-ac .rsg-blog-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.rsg-inm-ac .rsg-blog-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.01);transition:transform 1s var(--ease)}
.rsg-inm-ac .rsg-blog-card:hover .rsg-blog-media img{transform:scale(1.05)}
.rsg-inm-ac .rsg-blog-media::after{ /* text zone darkens; top of the photo stays natural */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,26,42,.95) 0%,rgba(11,26,42,.88) 26%,
    rgba(11,26,42,.62) 50%,rgba(11,26,42,.24) 72%,rgba(11,26,42,.03) 90%,rgba(11,26,42,0) 100%)}
/* CLIENT 2026-08-05: solid RED pill, as on the homepage/about blog cards. Was a translucent
   navy pill whose dot carried a per-category colour; the red pill is the site's blog marker,
   so the dot and its --svc hook are gone (the category name still carries the meaning). */
.rsg-inm-ac .rsg-blog-cat{
  position:absolute;top:18px;left:20px;z-index:2;
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;
  background:var(--red);
  font-family:var(--font-heading);font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  box-shadow:0 4px 14px rgba(170,24,44,.4)}
.rsg-inm-ac .rsg-blog-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 22px 22px}
.rsg-inm-ac .rsg-blog-card h3{margin:0;font-family:var(--font-display);font-size:19px;
  font-weight:800;line-height:1.16;letter-spacing:-.012em;color:#FFFFFF;text-wrap:balance;
  text-shadow:0 1px 2px rgba(8,20,35,.55),0 2px 16px rgba(8,20,35,.5)}
/* the featured card is ~2x tall, so it carries the bigger heading and a longer excerpt */
.rsg-inm-ac .rsg-blog-card.is-featured h3{font-size:26px;line-height:1.12}
.rsg-inm-ac .rsg-blog-card p{margin:8px 0 0;font-size:14px;line-height:1.55;
  color:rgba(255,255,255,.86);text-wrap:pretty;text-shadow:0 1px 10px rgba(8,20,35,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rsg-inm-ac .rsg-blog-card.is-featured p{-webkit-line-clamp:3;max-width:44ch}
/* read cue: left position:static ON PURPOSE so its stretched-hit-area ::after resolves
   against the CARD, not the link. The underline is therefore drawn with a background
   image instead of a pseudo-element. */
.rsg-inm-ac .rsg-blog-more{display:inline-block;margin-top:15px;padding-bottom:3px;
  font-family:var(--font-heading);font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-bright);text-decoration:none;
  background-image:linear-gradient(var(--gold-bright),var(--gold-bright));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size .45s var(--ease)}
.rsg-inm-ac .rsg-blog-card:hover .rsg-blog-more,
.rsg-inm-ac .rsg-blog-more:focus-visible{background-size:100% 2px}
.rsg-inm-ac .rsg-blog-more:focus-visible{outline:2px solid var(--acc-ink);outline-offset:3px}
/* the whole card becomes the hit area, but ONLY where a real post URL exists - the two
   {{NEEDS_SOURCE}} placeholders keep an ordinary inert link */
.rsg-inm-ac .rsg-blog-more[href^="http"]::after{content:"";position:absolute;inset:0;z-index:3}
/* CLIENT 2026-08-05: the blog band's own CTA, as specified for the homepage blogs section
   ("Read the blog") and present on the homepage/about bands. */
.rsg-inm-ac .rsg-blog-cta{margin-top:40px;text-align:center}
@media (max-width:1024px){
  .rsg-inm-ac .rsg-gal-grid{grid-template-columns:repeat(2,1fr)}
  /* blog keeps the featured split at tablet, just tighter rows -- it is no longer an equal
     grid, so it must NOT inherit the gallery's repeat(2,1fr) any more. */
  .rsg-inm-ac .rsg-blog-grid{grid-template-columns:1fr 1fr;grid-auto-rows:236px}
  .rsg-inm-ac .rsg-blog-card.is-featured h3{font-size:23px}
}
@media (max-width:640px){
  .rsg-inm-ac .rsg-gal-grid{grid-template-columns:1fr;gap:14px;margin-top:32px}
  /* single column: the featured card stops spanning and every card gets its own height */
  .rsg-inm-ac .rsg-blog-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px;margin-top:32px}
  .rsg-inm-ac .rsg-blog-card.is-featured{grid-column:auto;grid-row:auto}
  .rsg-inm-ac .rsg-blog-card{min-height:340px}
  .rsg-inm-ac .rsg-blog-card h3,
  .rsg-inm-ac .rsg-blog-card.is-featured h3{font-size:20px}
  .rsg-inm-ac .rsg-blog-card p,
  .rsg-inm-ac .rsg-blog-card.is-featured p{-webkit-line-clamp:3}
}
/* ---- Comparison table: repair vs replace ---- */
.rsg-inm-ac .rsg-cmp-h3{margin:14px 0 0;font-family:var(--font-heading);font-size:21px;
  font-weight:700;line-height:1.3;color:var(--red);text-wrap:balance}
.rsg-inm-ac .rsg-cmp-lead{margin:14px 0 0;font-size:16.5px;line-height:1.68;color:var(--muted);
  max-width:66ch;text-wrap:pretty}
.rsg-inm-ac .rsg-cmp-wrap{margin-top:38px;overflow-x:auto}
.rsg-inm-ac .rsg-cmp{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.rsg-inm-ac .rsg-cmp th,.rsg-inm-ac .rsg-cmp td{padding:15px 18px;text-align:left;
  font-size:14.5px;line-height:1.55;border-bottom:1px solid var(--line);vertical-align:top}
.rsg-inm-ac .rsg-cmp thead th{font-family:var(--font-heading);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--cream)}
.rsg-inm-ac .rsg-cmp tbody th{font-weight:700;color:var(--ink);width:22%}
.rsg-inm-ac .rsg-cmp td{color:var(--muted)}
.rsg-inm-ac .rsg-cmp tbody tr:last-child th,.rsg-inm-ac .rsg-cmp tbody tr:last-child td{border-bottom:0}
.rsg-inm-ac .rsg-cmp-note{margin:20px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink);font-weight:600}
@media (max-width:1024px){
  .rsg-inm-ac .rsg-stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .rsg-inm-ac .rsg-stats-grid{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .rsg-inm-ac .rsg-stat-fig{font-size:32px}
  .rsg-inm-ac .rsg-stat-fig--stars{font-size:21px} /* must follow the rule above - same specificity, so order decides */
  .rsg-inm-ac .rsg-cmp-h3{font-size:19px}
  /* stacked table: hide the head, label each cell from data-label */
  .rsg-inm-ac .rsg-cmp thead{display:none}
  .rsg-inm-ac .rsg-cmp,.rsg-inm-ac .rsg-cmp tbody,.rsg-inm-ac .rsg-cmp tr,
  .rsg-inm-ac .rsg-cmp th,.rsg-inm-ac .rsg-cmp td{display:block;width:auto}
  .rsg-inm-ac .rsg-cmp tr{border-bottom:1px solid var(--line);padding:6px 0 12px}
  .rsg-inm-ac .rsg-cmp tr:last-child{border-bottom:0}
  .rsg-inm-ac .rsg-cmp tbody th{width:auto;padding:14px 16px 6px;font-size:15.5px}
  .rsg-inm-ac .rsg-cmp td{border-bottom:0;padding:6px 16px}
  .rsg-inm-ac .rsg-cmp td::before{content:attr(data-label);display:block;
    font-family:var(--font-heading);font-size:11.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px}
}

/* ==================== 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-ac .rsg-bk{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:24px}
.rsg-inm-ac .rsg-bk.is-open{display:flex}
.rsg-inm-ac .rsg-bk-scrim{position:absolute;inset:0;background:rgba(7,24,40,.62)}
.rsg-inm-ac .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-ac .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-ac .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-ac .rsg-bk-sub{margin:10px 0 20px;font-size:14.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.rsg-inm-ac .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-ac .rsg-bk-close:hover{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.rsg-inm-ac .rsg-bk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rsg-inm-ac .rsg-bk-field{display:block;margin-bottom:14px}
.rsg-inm-ac .rsg-bk-field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.rsg-inm-ac .rsg-bk-field input,.rsg-inm-ac .rsg-bk-field select,.rsg-inm-ac .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-ac .rsg-bk-field textarea{min-height:84px;resize:vertical}
.rsg-inm-ac .rsg-bk-field input:focus-visible,.rsg-inm-ac .rsg-bk-field select:focus-visible,
.rsg-inm-ac .rsg-bk-field textarea:focus-visible,.rsg-inm-ac .rsg-bk-close:focus-visible,
.rsg-inm-ac .rsg-bk-submit:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.rsg-inm-ac .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-ac .rsg-bk-consent input{margin-top:2px;flex:0 0 auto}
.rsg-inm-ac .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-ac .rsg-bk-submit:hover{transform:scale(1.02);filter:brightness(1.06)}
.rsg-inm-ac .rsg-bk-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center}
.rsg-inm-ac .rsg-bk-note a{color:var(--navy);font-weight:600}
@media (max-width:520px){
  .rsg-inm-ac .rsg-bk{padding:14px}
  .rsg-inm-ac .rsg-bk-panel{padding:26px 20px 22px}
  .rsg-inm-ac .rsg-bk-row{grid-template-columns:1fr;gap:0}
  .rsg-inm-ac .rsg-bk-title{font-size:22px}
}

/* ============ 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-ac .rsg-sec--light:not(.rsg-hero) h2 span,
.rsg-inm-ac .rsg-sec--light:not(.rsg-hero) .rsg-h2 span,
.rsg-inm-ac .rsg-sec--cream:not(.rsg-hero) h2 span,
.rsg-inm-ac .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-ac .rsg-sec--dark:not(.rsg-hero){
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20520%20520'%3E%3Cg%20fill='none'%20stroke='%23A9D3F0'%20stroke-linecap='round'%20opacity='.07'%3E%3Ccircle%20cx='260'%20cy='260'%20r='196'%20stroke-width='3'/%3E%3Ccircle%20cx='260'%20cy='260'%20r='168'%20stroke-width='1.5'/%3E%3Cg%20stroke-width='3'%3E%3Cpath%20d='M260%2092v30M366%20121l-15%2026M444%20199l-26%2015M444%20321l-26-15M366%20399l-15-26M154%20399l15-26M76%20321l26-15M76%20199l26%2015M154%20121l15%2026'/%3E%3C/g%3E%3Cg%20stroke-width='1.5'%20opacity='.7'%3E%3Cpath%20d='M313%2099l-8%2029M405%20155l-21%2021M461%20260h-30M405%20365l-21-21M155%20365l21-21M59%20260h30M115%20155l21%2021M207%2099l8%2029'/%3E%3C/g%3E%3Cpath%20d='M260%20300L338%20176'%20stroke-width='9'/%3E%3Ccircle%20cx='260'%20cy='300'%20r='20'%20fill='%23A9D3F0'%20stroke='none'/%3E%3Ccircle%20cx='260'%20cy='300'%20r='34'%20stroke-width='3'/%3E%3C/g%3E%3C/svg%3E"),var(--band-grad);
  background-repeat:no-repeat,no-repeat;
  background-position:right -130px bottom -150px,center;
  background-size:520px 520px,cover}
/* these two are dark via their own subsystem rules, not .rsg-sec--dark, so they
   need the gauge separately. --band-dark is a COLOUR, so it goes on
   background-color; (the sibling clmx band that also needed this was removed 2026-08-18.) */
.rsg-inm-ac .rsg-sgx-c5{background-color:var(--band-dark);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20520%20520'%3E%3Cg%20fill='none'%20stroke='%23A9D3F0'%20stroke-linecap='round'%20opacity='.07'%3E%3Ccircle%20cx='260'%20cy='260'%20r='196'%20stroke-width='3'/%3E%3Ccircle%20cx='260'%20cy='260'%20r='168'%20stroke-width='1.5'/%3E%3Cg%20stroke-width='3'%3E%3Cpath%20d='M260%2092v30M366%20121l-15%2026M444%20199l-26%2015M444%20321l-26-15M366%20399l-15-26M154%20399l15-26M76%20321l26-15M76%20199l26%2015M154%20121l15%2026'/%3E%3C/g%3E%3Cg%20stroke-width='1.5'%20opacity='.7'%3E%3Cpath%20d='M313%2099l-8%2029M405%20155l-21%2021M461%20260h-30M405%20365l-21-21M155%20365l21-21M59%20260h30M115%20155l21%2021M207%2099l8%2029'/%3E%3C/g%3E%3Cpath%20d='M260%20300L338%20176'%20stroke-width='9'/%3E%3Ccircle%20cx='260'%20cy='300'%20r='20'%20fill='%23A9D3F0'%20stroke='none'/%3E%3Ccircle%20cx='260'%20cy='300'%20r='34'%20stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right -130px bottom -150px;background-size:520px 520px}

/* ---- 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-ac.rsg-inm-ac .rsg-eyebrow{color:var(--gold-ink)}
.rsg-inm-ac.rsg-inm-ac .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-ac {
  /* 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-ac .rsg-sec--dark,
.rsg-sgx-c5 {
  --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) -------------------------
   This is the page the client screenshotted twice. --gold-bright/--gold-ink are declared
   at the ROOT as var(--acc-ink), and 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 ground. The rule above never reached them. Measured with a headless probe, on this
   page that produced: the contact card's step dots and pin/clock/mail icons in navy on
   near-black (his second screenshot - they read as dim blue), "Explore Central Air" and
   its Cooling label at 1.24:1 (his first screenshot), the flat-rate note's phone number at
   1.63:1, and the map console's "Viewing" mark at 1.55:1.
   Pinned to TAN, which is exactly what he asked for on those SVG marks, and what
   --gold-bright was before the 2026-08-03 rebalance repointed it. 12.7:1 on the dark card.
   Decorative --gold untouched - no disc, ring or bar changes colour.
   NOTE this page has FOUR nested token systems (.rsg-sgx-c5 / .rsg-actx-c3 / .rsg-acm-c3 /
   .rsg-clmx-c2) that each RE-freeze the gold tokens on their own subtree root. The second
   group below therefore targets containers NESTED INSIDE those systems, because custom
   properties resolve to the nearest declaring ancestor - a rule on the subsystem root
   would tie, but a deeper one always wins. Full rationale in homepageextreme.html. */
.rsg-inm-ac .rsg-sec--dark,
.rsg-sgx-c5,
.rsg-inm-ac .rsg-price-note,
.rsg-actx-c3 .atc3-feat,
.acm3-console {
  --gold-bright:#E2C6A3;
  --gold-ink:#E2C6A3;
}
/* ---- three remaining measured contrast repairs on this page (2026-08-03) -------------
   1. The WHITE form card's eyebrow was rendering azure #539DD6 on white = 2.93:1. The card
      already had a rule intending the light-band ink (.rsg-ac-form .rsg-eyebrow), but the
      doubled-root dark-band eyebrow rule out-specifies it (0,3,1 beats 0,2,1), so it never
      applied. Repeated here at doubled-root depth so it wins, and the dash gets the
      light-band gradient - the dark-band dash ends in ice, which vanishes on white.
   2. The map chip's rating was amber #F3B11B on a WHITE chip = 1.89:1, unreadable. (It
      read "4.9*" then; since 2026-08-15 it is five stars + "Google Reviews" and the same
      repair applies to the glyphs.) Amber stars are a client-pinned decision,
      but that pin exists for the DARK bands where amber passes; this is the only instance
      sitting on white, so it takes the bronze eyebrow ink (6.17:1) and still reads warm.
   3. The light service rows' category label was --ac-ink azure on near-white = 4.27:1,
      just under AA at 12px. Navy takes it to ~10:1 with no change in meaning. The dark
      featured card keeps its own (now tan) treatment - .atc3-row and .atc3-feat are
      different elements, so this cannot bleed into it. */
.rsg-inm-ac.rsg-inm-ac .rsg-sec--dark .rsg-ac-form .rsg-eyebrow{color:var(--eyebrow-warm)}
.rsg-inm-ac .rsg-sec--dark .rsg-ac-form .rsg-eyebrow::before{
  background:linear-gradient(90deg,var(--red),#2E81C1)}
.rsg-inm-ac .acm3-mapchip .acm3-star{color:var(--eyebrow-warm)}
.rsg-actx-c3 .atc3-row .atc3-cat{color:var(--acc-ink)}
/* 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-ac .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-ac {
  --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-ac.rsg-inm-ac .rsg-eyebrow{color:var(--eyebrow-warm)}
.rsg-inm-ac.rsg-inm-ac .rsg-sec--dark .rsg-eyebrow{color:var(--eyebrow-dark)}
.rsg-inm-ac .rsg-sec--dark:not(.rsg-hero) h2 span,
.rsg-inm-ac .rsg-sec--dark:not(.rsg-hero) .rsg-h2 span{color:var(--h2-gold)}
/* ---- star ratings stay a rating colour everywhere ---- */
.rsg-inm-ac .rsg-stars,
.rsg-inm-ac .rsg-tk-stars,
.rsg-inm-ac .rsg-hp-stars,
.rsg-inm-ac .rsg-star,
.rsg-inm-ac .acm3-star,
.rsg-inm-ac .rsg-rev-stars,
.rsg-inm-ac .rsg-xr-stars,
.rsg-inm-ac .rsg-c2-gcard-rate{color:var(--star)}
.rsg-inm-ac .rsg-stars svg,
.rsg-inm-ac .rsg-tk-stars svg,
.rsg-inm-ac .rsg-hp-stars svg,
.rsg-inm-ac .rsg-star svg,
.rsg-inm-ac .acm3-star svg,
.rsg-inm-ac .rsg-rev-stars svg,
.rsg-inm-ac .rsg-xr-stars svg,
.rsg-inm-ac .rsg-c2-gcard-rate svg{fill:var(--star)}

/* ---- warm-rebalance repairs (measured, 2026-08-03) --------------------------------
   The 31 hardcoded #805928 bronze literals bypassed the token layer entirely (they sit
   in inline SVG fill= attributes and a few component rules), so they stayed tan after
   the swap. They now resolve through --acc-ink: navy on light bands, ice on dark,
   warm inside heroes (which re-declare it).
   Two pairings genuinely broke and are fixed here rather than left:
     - a check seal that FILLS with the accent on hover kept a navy glyph: navy on azure
       is 2.80:1, so the glyph goes paper (white on azure = 4.18:1).
     - contact's .rsg-safety drew a #E75367 pink stroke that now sits on the red accent
       at 2.03:1; it goes paper. */
.rsg-inm-ac .rsg-check-item:hover .rsg-check-seal svg,
.rsg-inm-ac .rsg-check-seal[style] svg{stroke:var(--paper)}
.rsg-inm-ac .rsg-safety svg{stroke:var(--paper)}


  /* ====== S11 MAP BAND - CTA REPLACES THE FOOT PANEL, FULL-WIDTH INTRO (client) ======
     Heading size: this band declared its its OWN local h2 size token (34px) in its token block, which shadowed
     the page's 40px and is why its H2 read smaller than every other H2. That local token has
     been DELETED rather than overridden with a number, so the band now inherits the page
     scale (40 / 34 / 28 across the breakpoints) automatically and there is one type scale
     again. Only .acm3-title consumed it, so nothing else moves.
     Intro: .acm3-head was capped at 860px and .acm3-sub again at 62ch; both released so the
     header fills the boxed area. Centring is unchanged - this band was always centred.
     Foot panel removed and a CTA put in its place. The panel's three live-updating nodes
     (#acm3-now-name / -corr / -zips) are gone, which is SAFE because the selector script
     null-guards all three; the map still reloads, the station still takes .is-selected and
     aria-pressed still carries the state, so the control keeps its feedback. The script and
     its MDATA zip strings were left untouched, so restoring the panel is markup-only. */
  .rsg-acm-c3 .acm3-head{ max-width:none; }
  .rsg-acm-c3 .acm3-sub{ max-width:none; }
  .rsg-acm-c3 .acm3-cta{ margin-top:32px; display:flex; justify-content:center; }
  @media (max-width:767px){
    .rsg-acm-c3 .acm3-cta .rsg-btn{ width:100%; justify-content:center; }
  }
  /* FAQ (client 2026-08-19): centre the section header + CTA, keep the accordion boxes left-read, and hold the box column to ~72% centred. */.rsg-inm-ac .rsg-faq-aside{text-align:center}.rsg-inm-ac .rsg-faq-aside .rsg-sub{max-width:60ch;margin-left:auto;margin-right:auto}.rsg-inm-ac .rsg-faq-grid>.rsg-faq-call{text-align:center}.rsg-inm-ac .rsg-faq-list{width:74%;margin-left:auto;margin-right:auto}.rsg-inm-ac .rsg-faq-item{text-align:left}@media (max-width:1024px){.rsg-inm-ac .rsg-faq-list{width:88%}}@media (max-width:767px){.rsg-inm-ac .rsg-faq-list{width:100%}}.rsg-inm-ac .rsg-tk-onphoto h2.rsg-eyebrow{margin:0 0 11px;text-shadow:0 1px 10px rgba(8,25,42,.85)}.rsg-inm-ac .rsg-tk-lead{margin:0 0 26px;font-size:16px;line-height:1.66;color:var(--muted-dark);max-width:60ch;text-wrap:pretty}@media (max-width:767px){.rsg-inm-ac .rsg-tk-lead{font-size:15px;margin-bottom:22px}}
/* AC INSTALLATION AND REPLACEMENT (2026-08-24): micro-label heading for the figure card
   in the narrative band. Type, weight and tracking are the comparison table's own
   data-label treatment, so no new type enters the system. Inert on every other page
   using this sheet - no other markup carries this class. */
.rsg-inm-ac .rsg-figbox-h{margin:0 0 12px;font-family:var(--font-heading);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#805928;text-wrap:balance}

/* AC SIGNS BAND (2026-08-24, client)): two asks - the cell headings read a step too large, and the
   section needed a red touch. Appended at EOF so it wins on SOURCE ORDER at equal
   specificity, which is this sheet's convention - no selector inflation.
   1. TITLE SIZE. 23px against the 15px verdict copy is a 1.533 step; in a 375px
      cell that reads as a headline competing with the band's own 47px h2. 20px is
      a 1.333 major third off the verdict - the balanced step the type rules name.
      padding-bottom follows it down 15px -> 13px so the severity dash keeps its
      proportion to the smaller heading.
   2. RED. On this navy ground red is 1.9:1 as TEXT (see the note in inm-tokens.css)
      so nothing text-like is recoloured here - red enters as DECORATION only, which
      is what this sheet's own dark-band rule already allows. Two marks, deliberately
      quiet: a red editorial rule between the header and the grid (the band declares
      a .sgx5-kicker bar of exactly this kind, which no markup ever used), and a faint
      brand-red ground wash bottom-left, built as the mirror of the ice wash the band
      already carries top-right at .11. Both are pure decoration behind .sgx5-inner
      (z-index 1) and neither changes a text colour.
      The third red - the severity dashes - is MARKUP, not CSS: the install page's
      clone graded all six cells is-soon so all six dashes came out tan. Re-graded in
      post_content to 2 now / 2 soon / 2 notice, firing the red the band already had.
   BOTH service pages using this band get 1 and 2 (283 + 54 /ac-repair/); the sheet is
   shared and the band must not read differently on the two pages. */
.rsg-sgx-c5 .sgx5-title{font-size:clamp(17px,1.62vw,20px);padding-bottom:13px}
.rsg-sgx-c5 .sgx5-head::after{content:"";display:block;width:56px;height:3px;border-radius:2px;margin:26px auto 0;background:linear-gradient(90deg,var(--red),#E33950)}
.rsg-sgx-c5::after{content:"";position:absolute;left:-7%;bottom:-15%;width:46%;height:62%;background:radial-gradient(closest-side,rgba(170,24,44,.20),transparent 72%);pointer-events:none;z-index:0}
@media (max-width:560px){.rsg-sgx-c5 .sgx5-head::after{width:48px;margin-top:22px}}

/* SECTION 2 FIGURE CARDS (2026-08-24, client)): "remove the image from right side and make cards of points
   that currently we have in bottom of image", against a reference screenshot from a
   DIFFERENT client whose pattern is copy-left / 2x2 stat-cards-right. The PATTERN is
   borrowed; every value below is an INM token - no colour, face or radius comes from
   the reference.
   SCOPING: /ac-repair/ renders this same .rsg-works band from this same sheet and its
   photo is staying, so all of this hangs off the .rsg-works--figcards modifier, which
   only page 283 carries. 0 elements match on any other page.
   WHY THE FIGBOX IS DE-CARDED: it was itself a white plate (border, shadow, 3px ink
   top rule) pulled up -75px to overlap the photo's bottom edge - that overlap is the
   only reason the points read as sitting 'in the bottom of the image'. With the photo
   gone and the points becoming cards, leaving the plate would nest cards inside a card.
   So the figbox goes transparent and the four .rsg-flow-step children take the card
   treatment, in the 2-up grid the reference uses.
   The step's 75px stat column also goes, which retires the desktop label-wrap noted
   after the build round - a card gives the figure its own line.
   ONE MOTIF PER ELEMENT: the little red .rsg-flow-node dot is hidden here, because
   each card carries one accent mark of its own. Two accents on one card is clutter. */
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox{width:100%;margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.rsg-inm-ac .rsg-works--figcards .rsg-figbox-h{margin:0 0 16px}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow{margin-top:0;grid-template-columns:1fr 1fr;gap:20px}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step{position:relative;display:block;grid-template-columns:none;overflow:hidden;padding:26px 24px 24px 26px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-2);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step + .rsg-flow-step::after{content:none}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-node{display:none}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow--figs .rsg-flow-step b{font-family:var(--font-display);font-size:27px;font-weight:800;line-height:1.05;letter-spacing:-.015em;color:var(--royal);margin:0 0 18px;font-variant-numeric:tabular-nums lining-nums}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step span{font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
@media (max-width:560px){.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow{grid-template-columns:1fr;gap:14px}}
@media (prefers-reduced-motion:reduce){.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step{transition:none}.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step:hover{transform:none}}

/* FIGURE CARDS enhancement (2026-08-24)): client - "remove the heading and the card heading color not look
   good then overall enhance the cards".
   The label h3 came out of the markup. Its .rsg-figbox-h rule is DELIBERATELY LEFT in
   this sheet: the build round created it for exactly this slot and deleted components
   get asked for again. It now matches 0 elements sitewide.
   The stat goes back to --royal, which is the colour this sheet already uses for
   .rsg-flow--figs figures elsewhere; red as the number read heavy on a cream ground and
   spent the accent on the loudest element instead of reserving it. Red now appears once
   per card, as a short rule under the number - the same dash motif the signs band on
   this page uses, so the two bands read as one system. It replaces the left two-tone
   bar rather than joining it: one accent mark per card.
   Anchored on the body span, not on b. It widens on hover, like the signs dash. */
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step b + span::before{content:"";display:block;width:28px;height:2px;border-radius:2px;background:var(--red);margin:0 0 13px;transition:width .35s var(--ease)}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step:hover b + span::before{width:44px}
@media (prefers-reduced-motion:reduce){.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step b + span::before{transition:none}.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step:hover b + span::before{width:28px}}

/* FIGURE CARDS spacing (2026-08-24)): client - "the third card space between heading and red line after
   that is perfect but not in other cards". The previous round reserved two lines for
   the stat (min-height:2.1em, >=1025px) so every card's rule and body copy would share
   a line. Card 3's stat wraps to two lines, so it FILLED that reserve and its rule sat
   tight under the heading - the other three are one-line stats, so the same reserve
   opened a gap before the rule. He wants card 3's spacing on all four, so the reserve
   is removed rather than overridden and every card now reads heading -> 11px -> rule
   -> 13px -> copy, from .rsg-flow-step b's own margin and the rule's own margin.
   KNOWN CONSEQUENCE, reported: in a row containing a wrapping stat, that card's rule
   and copy sit one line lower than its neighbour's. Restoring cross-card alignment
   without the gap would need the stat small enough that nothing wraps (~23px at the
   242px desktop card) - a type change he has not asked for. */

/* FIGURE CARDS restyle (2026-08-24)): client sent the same other-client reference again - "use image make
   our card design same like this to make it attractive". Four things read off that card:
     1. the gradient mark: a SHORT VERTICAL bar on the card LEFT EDGE, 3x44px, red ->
        royal downward. 2026-08-28, client: "move the gradient line that is currently
        above the section move that to card left top". Its TOP offset is the card own
        padding-top, so the bar starts on the same horizontal line as the stat, exactly
        as the offset it replaced was the card own padding-left. Flush at left:0 with the
        radius on the inner side only, and padding-top >= the card radius so the clip on
        the card cannot eat it on the corner curve. History: full-height left rail ->
        44x3 across the top-left -> this;
     2. NO divider under the heading - so the round-2/3 dash retires. It is switched off
        with content:none rather than deleted, because he has already changed his mind
        once on this exact element (round 3 called its spacing "perfect"), and restoring
        it is then a one-line delete instead of a rebuild;
     3. the stat colour ALTERNATES on the diagonal - 1st and 4th --ink, 2nd and 3rd
        navy. The reference alternated accent/navy and that is why the all-red version
        read heavy; he then asked for the red ones black, so the accent left the number
        entirely and red now lives only in the edge bar;
     4. roomier padding and a 16px radius (in the card rule above).
   PATTERN only: the rail is --red -> --azure and the accent is --red. Nothing here is
   the reference's orange or cyan, and no colour literal appears in this block. */
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step::before{content:"";position:absolute;left:0;top:26px;width:3px;height:44px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--red),var(--royal))}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow-step b + span::before{content:none}
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow--figs .rsg-flow-step:nth-child(1) b,
.rsg-inm-ac .rsg-works--figcards .rsg-works-figbox .rsg-flow--figs .rsg-flow-step:nth-child(4) b{color:var(--ink)}

/* =====================================================================
 * AC CONTRACTOR (page 289) - BAND 3 AS AN ALTERNATING IMAGE/COPY STACK
 * 2026-08-25, client: "use this page structure in our cluster page of ac
 * where we have services in the third section ... in dark theme".
 *
 * Everything here is scoped behind .rsg-sgx-c5--stack, a modifier that only
 * page 289 carries. The SAME .rsg-sgx-c5 band on the PUBLISHED /air-
 * conditioning-repair-marietta-ga/ and on draft 283 therefore cannot match a
 * single selector below, and the 54 existing sgx5 rules are untouched. That is
 * the modifier-scoping pattern this sheet already uses for a shared band.
 *
 * The band SHELL is deliberately reused rather than rebuilt: the section keeps
 * .rsg-sgx-c5, so the dark ground, the gauge-dial background, the ice wash
 * (::before), the red wash (::after) and the padding all still come from the
 * band rules. The header, the red head rule, the foot row and the red CTA are
 * reused BY CLASS (.sgx5-head / .sgx5-h2 / .sgx5-sub / .sgx5-foot /
 * .sgx5-foot-line / .sgx5-cta), which is why this block is small: only the card
 * stack is new.
 *
 * COLOUR. One client-pinned token carries every card, so no new hex enters the
 * palette: --card-dark, the "logo vibe" plate he picked for every box that sits
 * on a dark band. The featured card first used --band-grad, but a headless probe
 * measured that at relative luminance .0255 against the band's own .0225 - a
 * 1.03:1 plate that simply was not there, while the five --card-dark rows read
 * strongly. So all six share the one plate and the lead card earns its rank on
 * SCALE instead: a 300px image column against 238px, a 204px png against 156px,
 * a 29px heading against 20px, more padding, a 44x3 severity bar against 32x2,
 * and the red-to-tan rule across its top edge.
 *
 * MEASURE. The row copy column is 735px wide, which at 15px ran ~98 characters
 * per line - the typography rules require 60-75. Capped at 62ch, and right-
 * anchored on the image-right cards so the text still meets the column edge it
 * is aligned to. 62 and not 74: in Poppins the ch unit is the advance of "0"
 * (9.42px at 15px) but the average glyph advance is 8.30px, so ch over-counts a
 * line by ~13%. A headless probe measured 74ch as 84 real characters; 62ch lands
 * at ~70. The featured card measured 64 at 56ch and was left alone. Red stays DECORATION ONLY on this navy - it measures 1.9:1 as
 * text here - so it appears in exactly two structural marks: the featured
 * card top rule and the head rule the band already had. Text is white, tan
 * (--gold-bright, pinned #E2C6A3 on this band) and --muted-dark, all well
 * clear of AA on #072857.
 *
 * The title underline reads --sev, so the is-now / is-soon / is-notice grades
 * already in the markup keep working exactly as they did in the six-cell grid.
 * ===================================================================== */
.rsg-sgx-c5--stack .acx3-stack{display:flex;flex-direction:column;gap:20px;text-align:left}
.rsg-sgx-c5--stack .acx3-feat,
.rsg-sgx-c5--stack .acx3-row{position:relative;overflow:hidden;border-radius:var(--r-card);display:grid;align-items:stretch;
  box-shadow:0 1px 2px rgba(3,10,20,.30),0 18px 44px -22px rgba(3,10,20,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
/* severity accent - markup-driven, same three grades the grid used */
.rsg-sgx-c5--stack .is-now{--sev:#E33950}
.rsg-sgx-c5--stack .is-soon{--sev:var(--gold-bright)}
.rsg-sgx-c5--stack .is-notice{--sev:var(--ice)}
/* media - staged product spotlight */
.rsg-sgx-c5--stack .acx3-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:186px;padding:6px 0}
.rsg-sgx-c5--stack .acx3-media::before{content:"";position:absolute;inset:6% 4%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 47%,rgba(169,211,240,.20),rgba(169,211,240,0) 74%);
  transition:transform .4s var(--ease)}
.rsg-sgx-c5--stack .acx3-media img{position:relative;z-index:1;max-width:100%;width:auto;height:auto;max-height:156px;
  object-fit:contain;filter:drop-shadow(0 16px 22px rgba(3,10,20,.55));transition:transform .45s var(--ease)}
/* the hairline between the png and the copy */
.rsg-sgx-c5--stack .acx3-vline{align-self:stretch;justify-self:center;width:2px;margin:20px 0;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--ice-line) 12%,var(--gold-bright) 50%,var(--ice-line) 88%,transparent)}
/* copy */
.rsg-sgx-c5--stack .acx3-body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.rsg-sgx-c5--stack .acx3-name{position:relative;margin:0 0 15px;padding-bottom:13px;font-family:var(--font-display);
  font-weight:700;letter-spacing:-.014em;line-height:1.1;font-size:clamp(17px,1.62vw,20px);color:#EEF5FB;text-wrap:balance}
.rsg-sgx-c5--stack .acx3-name::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;border-radius:2px;
  background:var(--sev);transition:width .45s var(--ease)}
.rsg-sgx-c5--stack .acx3-desc{margin:0;max-width:62ch;font-size:clamp(14px,1.35vw,15px);line-height:1.52;color:var(--muted-dark);text-wrap:pretty}
/* FEATURED (card 1) - png left, copy right, one step up in scale */
.rsg-sgx-c5--stack .acx3-feat{background:var(--card-dark);border:1px solid var(--navy-line);
  grid-template-columns:300px auto minmax(0,1fr);column-gap:clamp(24px,3vw,44px);padding:clamp(26px,3vw,40px)}
.rsg-sgx-c5--stack .acx3-feat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--red),var(--gold-bright))}
.rsg-sgx-c5--stack .acx3-feat .acx3-media{min-height:212px}
.rsg-sgx-c5--stack .acx3-feat .acx3-media img{max-height:204px}
.rsg-sgx-c5--stack .acx3-feat .acx3-name{font-size:clamp(22px,2.5vw,29px);font-weight:800;color:#FFFFFF;padding-bottom:15px}
.rsg-sgx-c5--stack .acx3-feat .acx3-name::after{width:44px;height:3px}
.rsg-sgx-c5--stack .acx3-feat .acx3-desc{font-size:clamp(15px,1.5vw,16px);line-height:1.55;max-width:56ch}
/* ROWS (cards 2-6) - the sitewide dark-band card plate, image side alternating */
.rsg-sgx-c5--stack .acx3-row{background:var(--card-dark);border:1px solid var(--navy-line);
  column-gap:clamp(22px,2.8vw,40px);padding:22px clamp(22px,2.6vw,34px)}
.rsg-sgx-c5--stack .acx3-row.is-imgL{grid-template-columns:238px auto minmax(0,1fr)}
.rsg-sgx-c5--stack .acx3-row.is-imgR{grid-template-columns:minmax(0,1fr) auto 238px}
.rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-body{order:0;text-align:right}
.rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-name::after{left:auto;right:0}
.rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-desc{margin-left:auto}
.rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-vline{order:1}
.rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-media{order:2}
/* the per-card Explore link (client 2026-08-25). Card 1 goes to the PUBLISHED
   /air-conditioning-repair-marietta-ga/; the other five open the request popup
   (data-rsg-bk) until their own pages exist, then only the href changes. None of
   them is a dead href="#", which is what his 2026-08-18 ruling on this band ruled
   out. Tan on the --card-dark plate measures 12.0:1, so it is AA-safe at 12px. */
.rsg-sgx-c5--stack .acx3-link{align-self:flex-start;margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-heading);font-weight:700;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-bright);text-decoration:none;border-radius:4px;transition:color .25s var(--ease)}
.rsg-sgx-c5--stack .acx3-link span{font-family:var(--font-body);font-weight:400;letter-spacing:0;transition:transform .3s var(--ease)}
.rsg-sgx-c5--stack .acx3-link:hover,
.rsg-sgx-c5--stack .acx3-link:focus-visible{color:#FFFFFF}
.rsg-sgx-c5--stack .acx3-link:hover span,
.rsg-sgx-c5--stack .acx3-link:focus-visible span{transform:translateX(5px)}
.rsg-sgx-c5--stack .acx3-link:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.rsg-sgx-c5--stack .acx3-feat .acx3-link{font-size:.8rem;margin-top:18px}
.rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-link{align-self:flex-end}
@media (hover:hover){
  .rsg-sgx-c5--stack .acx3-feat:hover,
  .rsg-sgx-c5--stack .acx3-row:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--sev) 40%,transparent);
    box-shadow:0 3px 8px rgba(3,10,20,.34),0 30px 60px -26px rgba(3,10,20,.62)}
  .rsg-sgx-c5--stack .acx3-feat:hover .acx3-name::after,
  .rsg-sgx-c5--stack .acx3-row:hover .acx3-name::after{width:66px}
  .rsg-sgx-c5--stack .acx3-feat:hover .acx3-media::before,
  .rsg-sgx-c5--stack .acx3-row:hover .acx3-media::before{transform:scale(1.12)}
  .rsg-sgx-c5--stack .acx3-feat:hover .acx3-media img,
  .rsg-sgx-c5--stack .acx3-row:hover .acx3-media img{transform:scale(1.05)}
}
/* the foot is the sgx5 foot: centred line, then the red CTA under it */
.rsg-sgx-c5--stack .sgx5-foot{flex-direction:column;gap:20px}
/* tablet + mobile: png stacks over the copy, hairline out, everything left */
@media (max-width:860px){
  .rsg-sgx-c5--stack .acx3-feat,
  .rsg-sgx-c5--stack .acx3-row.is-imgL,
  .rsg-sgx-c5--stack .acx3-row.is-imgR{grid-template-columns:1fr;row-gap:14px}
  .rsg-sgx-c5--stack .acx3-vline{display:none}
  .rsg-sgx-c5--stack .acx3-body,
  .rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-body{order:2;text-align:left}
  .rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-name::after{left:0;right:auto}
  .rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-link{align-self:flex-start}
  .rsg-sgx-c5--stack .acx3-media,
  .rsg-sgx-c5--stack .acx3-row.is-imgR .acx3-media{order:1;justify-content:flex-start;min-height:0}
  .rsg-sgx-c5--stack .acx3-feat .acx3-media{min-height:0;justify-content:flex-start}
  .rsg-sgx-c5--stack .acx3-media::before{inset:0 42% 0 0}
  .rsg-sgx-c5--stack .acx3-media img,
  .rsg-sgx-c5--stack .acx3-feat .acx3-media img{max-height:140px}
}
@media (prefers-reduced-motion:reduce){
  .rsg-sgx-c5--stack .acx3-feat,
  .rsg-sgx-c5--stack .acx3-row,
  .rsg-sgx-c5--stack .acx3-media img,
  .rsg-sgx-c5--stack .acx3-media::before,
  .rsg-sgx-c5--stack .acx3-name::after,
  .rsg-sgx-c5--stack .acx3-link,
  .rsg-sgx-c5--stack .acx3-link span{transition:none}
}

/* =====================================================================
 * THE THREE NOTION PAGES ADDED 2026-08-25 (FAQ Hub, Trane dealer, Offers)
 *
 * These pages are built almost entirely from components this sheet already
 * carries - .rsg-hero, .rsg-sec/--light/--cream/--dark, .rsg-faq-*, .rsg-tk-form,
 * .rsg-hiw-*, .rsg-cmp-*, .rsg-why-* - so what follows is only PLACEMENT, not new
 * components. Every selector is scoped to a per-page wrapper modifier, so the
 * seven live pages and the two service drafts cannot match any of it.
 *
 * The .rsg-faq grid resolves to a SINGLE column at every width on these pages, so
 * the aside stacks above the list and a third child lands below it. That is why the
 * doc's "section close" line can sit after the questions, which is where a line the
 * doc calls a close belongs. .rsg-sub carries its own max-width, so centring a block
 * of it needs auto side margins rather than text-align.
 * ===================================================================== */
.rsg-inm-faqh .rsg-faqh-close{text-align:center}
.rsg-inm-faqh .rsg-faqh-close .rsg-sub{margin-left:auto;margin-right:auto}
.rsg-inm-faqh .rsg-faqh-methbody .rsg-sub{margin-left:auto;margin-right:auto}

/* =====================================================================
 * CARD / CALLOUT / ROW PRIMITIVES for the Trane dealer and Offers pages
 * (2026-08-25). Both docs are prose + card lists, and this sheet had no LIGHT-band
 * card: .rsg-why-tenet is a dark-band plate and .rsg-faq-item is an accordion. So
 * these four small primitives were added rather than bending a dark component onto a
 * paper band. Everything else on both pages is an existing component (.rsg-hero,
 * .rsg-sechead, .rsg-sub, .rsg-chip, .rsg-cmp-* table, .rsg-why-* dark cards,
 * .rsg-faq-* accordion, .rsg-btn), so this block is deliberately short.
 * Scoped to the two page wrappers - no existing page carries either class.
 * ===================================================================== */
.rsg-inm-trane .np-cards,
.rsg-inm-offers .np-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(28px,3.5vw,44px)}
.rsg-inm-trane .np-cards--2,
.rsg-inm-offers .np-cards--2{grid-template-columns:repeat(2,1fr)}
.rsg-inm-trane .np-cards--4,
.rsg-inm-offers .np-cards--4{grid-template-columns:repeat(4,1fr)}
.rsg-inm-trane .np-card,
.rsg-inm-offers .np-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow-1);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
@media (hover:hover){.rsg-inm-trane .np-card:hover,
.rsg-inm-offers .np-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}}
.rsg-inm-trane .np-card h3,
.rsg-inm-offers .np-card h3{margin:0 0 12px;font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;
  line-height:1.15;font-size:clamp(18px,1.8vw,21px);color:var(--ink);text-wrap:balance}
.rsg-inm-trane .np-card h4,
.rsg-inm-offers .np-card h4{margin:0 0 12px;font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;
  line-height:1.15;font-size:clamp(17px,1.7vw,20px);color:var(--ink);text-wrap:balance}
.rsg-inm-trane .np-card p,
.rsg-inm-offers .np-card p{margin:0;font-size:clamp(14px,1.35vw,15px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.rsg-inm-trane .np-card p + p,
.rsg-inm-offers .np-card p + p{margin-top:12px}
.rsg-inm-trane .np-kicker,
.rsg-inm-offers .np-kicker{display:block;margin:0 0 10px;font-family:var(--font-heading);font-weight:700;
  font-size:12px;letter-spacing:.18em;color:var(--eyebrow-warm)}
.rsg-inm-trane .np-rows,
.rsg-inm-offers .np-rows{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.rsg-inm-trane .np-rows li,
.rsg-inm-offers .np-rows li{font-size:clamp(14px,1.35vw,15px);line-height:1.55;color:var(--muted)}
.rsg-inm-trane .np-rows b,
.rsg-inm-offers .np-rows b{color:var(--ink);font-weight:700}
.rsg-inm-trane .np-card ul.np-list,
.rsg-inm-offers .np-card ul.np-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px 14px}
.rsg-inm-trane .np-card ul.np-list li,
.rsg-inm-offers .np-card ul.np-list li{position:relative;padding-left:13px;font-size:clamp(13.5px,1.3vw,14.5px);line-height:1.5;color:var(--muted)}
.rsg-inm-trane .np-card ul.np-list li::before,
.rsg-inm-offers .np-card ul.np-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--red)}
.rsg-inm-trane .np-fine,
.rsg-inm-offers .np-fine{display:block;margin-top:7px;font-size:13px;line-height:1.5;color:var(--muted);font-style:italic}
.rsg-inm-trane .np-callout,
.rsg-inm-offers .np-callout{margin-top:clamp(28px,3.5vw,44px);background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:var(--r-card);padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow-1)}
.rsg-inm-trane .np-callout p,
.rsg-inm-offers .np-callout p{margin:0;font-size:clamp(15px,1.45vw,16px);line-height:1.65;color:var(--ink);text-wrap:pretty}
.rsg-inm-trane .np-card .rsg-btn2,
.rsg-inm-offers .np-card .rsg-btn2{align-self:flex-start;margin-top:auto}
.rsg-inm-trane .np-card .np-rows,
.rsg-inm-offers .np-card .np-rows{margin-bottom:20px}
@media (max-width:1024px){
  .rsg-inm-trane .np-cards,.rsg-inm-offers .np-cards{grid-template-columns:repeat(2,1fr)}
  .rsg-inm-trane .np-cards--4,.rsg-inm-offers .np-cards--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .rsg-inm-trane .np-cards,.rsg-inm-trane .np-cards--2,.rsg-inm-trane .np-cards--4,
  .rsg-inm-offers .np-cards,.rsg-inm-offers .np-cards--2,.rsg-inm-offers .np-cards--4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .rsg-inm-trane .np-card,.rsg-inm-offers .np-card{transition:none}
}




/* ============================================================================
   FAQ HUB - /faqs/ (page 294) - added 2026-08-25, restyled r3 2026-08-25
   Implements the RSG "FAQ Page" template (Notion 3bd56215fb26805fa556c2138c89c132,
   locked 15 August 2026).
   SCOPING CONTRACT: every selector in this block begins .rsg-inm-faqh, a wrapper
   class only page 294 carries. The shared accordion component (used by pages
   52 / 54 / 283 / 289 / 296 / 297) is deliberately left in place and untouched -
   this page simply stops using it.
   WHY NO ACCORDION HERE: the template forbids collapsing answers, because LLM
   crawlers mostly do not run JS, so a click-to-load answer is invisible to them.
   Every answer is in the DOM and visible on load. The template also forbids a card
   per QUESTION - so questions are separated by a hairline, and the card here is per
   SECTION, which is allowed and is what makes the ten sections read as units.
   COLOURS: ink is var(--ink) = rgb(26,28,27), so every muted grey below is that same
   ink at reduced alpha rather than a new grey. Red is the small structural mark only
   (section rule, active rail bar). Do NOT reach for var(--acc) for a red mark here:
   it is AZURE on a light band and only becomes red on dark bands.
   MEASURE: the grid fills the 1124px container exactly (250 rail + 110 gap + 764
   column), and the section card pads 40px each side, so the text column runs about
   684px, which probes at roughly 72 characters in Poppins. Measure it with a hidden
   alphabet span, never with the ch unit, which over-counts Poppins by about 13 pc.
   SECTION H2 is 30px, not the 40px --fs-h2 band-headline step, because here it is a
   section head inside a reading card rather than a band title.
   ========================================================================== */
.rsg-inm-faqh .faqh-shell{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:110px;
  align-items:start;
}
.rsg-inm-faqh .faqh-col{min-width:0}

/* ---- the rail: a sticky card. Mandatory on a one-page hub, orientation only,
        and every link works with JS off. ---- */
.rsg-inm-faqh .faqh-rail{
  position:sticky;top:28px;min-width:0;padding:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
}
.rsg-inm-faqh .faqh-rail-list{list-style:none;margin:0;padding:0}
.rsg-inm-faqh .faqh-rail-list li{margin:0}
.rsg-inm-faqh .faqh-rail-link{
  display:block;position:relative;
  padding:10px 12px 10px 17px;border-radius:7px;
  font-size:13.5px;line-height:1.45;letter-spacing:.005em;
  color:rgba(26,28,27,.66);text-decoration:none;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.rsg-inm-faqh .faqh-rail-link::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:0 2px 2px 0;background:var(--red);
  transition:height .25s var(--ease);
}
.rsg-inm-faqh .faqh-rail-link:hover{color:var(--ink);background:rgba(26,28,27,.04)}
.rsg-inm-faqh .faqh-rail-link.is-on{color:var(--ink);font-weight:600;background:rgba(46,129,193,.08)}
.rsg-inm-faqh .faqh-rail-link.is-on::before{height:calc(100% - 16px)}
.rsg-inm-faqh .faqh-rail-link:focus-visible{outline:2px solid var(--azure);outline-offset:2px}

/* ---- one section = one card ---- */
.rsg-inm-faqh .faqh-sec{
  scroll-margin-top:24px;padding:36px 40px 0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
}
.rsg-inm-faqh .faqh-sec+.faqh-sec{margin-top:26px}
.rsg-inm-faqh .faqh-sec>.rsg-h2{margin:0;font-size:30px;line-height:1.16}
.rsg-inm-faqh .faqh-sec>.rsg-h2::after{
  content:"";display:block;width:56px;height:3px;border-radius:2px;margin:16px 0 0;
  background:linear-gradient(90deg,var(--red),#E33950);
}
.rsg-inm-faqh .faqh-lede{
  margin:20px 0 0;max-width:62ch;
  font-size:14.5px;line-height:1.6;color:rgba(26,28,27,.64);
}

/* ---- one question. Hairline between, never a box around. ---- */
.rsg-inm-faqh .faqh-qa{padding:24px 0;border-top:1px solid var(--line)}
.rsg-inm-faqh .faqh-sec>.faqh-qa:first-of-type{border-top:0;padding-top:28px}
.rsg-inm-faqh .faqh-sec>.faqh-qa:last-child{padding-bottom:36px}
.rsg-inm-faqh .faqh-q{
  margin:0 0 9px;max-width:34em;
  font-size:19px;line-height:1.32;font-weight:600;letter-spacing:-.005em;
  color:var(--ink);text-wrap:balance;
}
.rsg-inm-faqh .faqh-a{
  margin:0;max-width:62ch;
  font-size:17px;line-height:1.68;color:rgba(26,28,27,.86);
  text-wrap:pretty;
}

/* ---- the one line pointing at the service page: the card's footer strip ---- */
.rsg-inm-faqh .faqh-close{
  margin:6px -40px 0;padding:20px 40px;
  border-top:1px solid var(--line);
  background:rgba(239,226,205,.34);
  border-radius:0 0 var(--r-card) var(--r-card);
  font-size:15px;line-height:1.6;color:rgba(26,28,27,.72);
}
.rsg-inm-faqh .faqh-close a{
  color:var(--ink);font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--azure);padding-bottom:1px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.rsg-inm-faqh .faqh-close a:hover{color:var(--azure)}
.rsg-inm-faqh .faqh-close a:focus-visible{outline:2px solid var(--azure);outline-offset:3px}

/* ---- breadcrumb, on the dark hero ---- */
.rsg-inm-faqh .faqh-crumb{
  margin:0 0 18px;font-size:13px;line-height:1.4;letter-spacing:.02em;
  color:rgba(233,242,250,.74);
}
.rsg-inm-faqh .faqh-crumb a{
  color:rgba(233,242,250,.74);text-decoration:none;
  border-bottom:1px solid rgba(233,242,250,.32);
}
.rsg-inm-faqh .faqh-crumb a:hover{color:#FFFFFF;border-bottom-color:rgba(255,255,255,.7)}
.rsg-inm-faqh .faqh-crumb a:focus-visible{outline:2px solid rgba(233,242,250,.8);outline-offset:3px}
.rsg-inm-faqh .faqh-crumb-sep{margin:0 7px;color:rgba(233,242,250,.45)}

/* ---- FORM BAND CONTAINMENT FIX ----
   .rsg-inm-ac .rsg-tk-form carries margin-top:-210px (and -150px at <=1239) so that
   on the ac-repair layout the card rises over the .rsg-tk-hero photo above it. This
   page has no such photo, so that pull dragged the card 110px above its own band and
   left 100px of empty band beneath it. Reset the pull and give the card a readable
   width. Scoped to this page, so ac-repair / contact keep their overlap. */
.rsg-inm-faqh .rsg-faqh-form .rsg-tk-form{margin:0 auto;max-width:764px}
.rsg-inm-faqh .rsg-faqh-form .rsg-tk-title{text-align:center}
.rsg-inm-faqh .rsg-faqh-form .rsg-tk-titlesub{
  text-align:center;margin-left:auto;margin-right:auto;max-width:56ch;
}

/* ---- the Method block, as a colophon card. Four provenance lines separated by
        hairlines, then the byline as the card's foot. ---- */
.rsg-inm-faqh .rsg-faqh-meth .rsg-h2::after{
  content:"";display:block;width:56px;height:3px;border-radius:2px;margin:18px auto 0;
  background:linear-gradient(90deg,var(--red),#E33950);
}
.rsg-inm-faqh .rsg-faqh-methbody{
  max-width:764px;margin:36px auto 0;padding:0 38px;text-align:left;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-1);
}
.rsg-inm-faqh .rsg-faqh-methbody .rsg-sub{
  max-width:none;margin:0;padding:20px 0;
  font-size:15.5px;line-height:1.66;
  border-top:1px solid var(--line);
}
.rsg-inm-faqh .rsg-faqh-methbody .rsg-sub:first-child{border-top:0}
.rsg-inm-faqh .rsg-faqh-methbody .rsg-sub:last-child{
  margin:0 -38px;padding:18px 38px;
  border-radius:0 0 var(--r-card) var(--r-card);
  background:rgba(239,226,205,.34);
  font-size:13.5px;letter-spacing:.015em;color:rgba(26,28,27,.72);
}

/* ---- tablet / mobile: the rail becomes a sticky bar across the top ---- */
@media (max-width:1000px){
  .rsg-inm-faqh .faqh-shell{grid-template-columns:minmax(0,1fr);gap:0}
  .rsg-inm-faqh .faqh-col{max-width:none}
  .rsg-inm-faqh .faqh-rail{
    top:0;z-index:6;margin:0 0 30px;padding:0;
    border:0;border-radius:0;border-bottom:1px solid var(--line);
    box-shadow:0 6px 14px rgba(26,28,27,.05);
    background:var(--paper);
  }
  .rsg-inm-faqh .faqh-rail-list{
    display:flex;padding:0;overflow-x:auto;min-width:0;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .rsg-inm-faqh .faqh-rail-list::-webkit-scrollbar{display:none}
  .rsg-inm-faqh .faqh-rail-list li{flex:0 0 auto}
  .rsg-inm-faqh .faqh-rail-link{padding:13px 14px;white-space:nowrap;border-radius:0}
  .rsg-inm-faqh .faqh-rail-link:hover{background:transparent}
  .rsg-inm-faqh .faqh-rail-link.is-on{background:transparent}
  .rsg-inm-faqh .faqh-rail-link::before{
    left:14px;right:14px;top:auto;bottom:0;transform:none;
    width:auto;height:0;border-radius:2px 2px 0 0;
  }
  .rsg-inm-faqh .faqh-rail-link.is-on::before{height:2px}
  .rsg-inm-faqh .faqh-sec{scroll-margin-top:66px;padding:26px 22px 0}
  .rsg-inm-faqh .faqh-sec+.faqh-sec{margin-top:18px}
  .rsg-inm-faqh .faqh-sec>.rsg-h2{font-size:25px}
  .rsg-inm-faqh .faqh-sec>.faqh-qa:last-child{padding-bottom:26px}
  .rsg-inm-faqh .faqh-close{margin:6px -22px 0;padding:18px 22px}
  .rsg-inm-faqh .faqh-q{font-size:18px}
  .rsg-inm-faqh .faqh-a{font-size:16px}
  .rsg-inm-faqh .rsg-faqh-form .rsg-tk-form{max-width:none}
  .rsg-inm-faqh .rsg-faqh-methbody{padding:0 22px}
  .rsg-inm-faqh .rsg-faqh-methbody .rsg-sub:last-child{margin:0 -22px;padding:18px 22px}
}
@media (prefers-reduced-motion:reduce){
  .rsg-inm-faqh .faqh-rail-link,
  .rsg-inm-faqh .faqh-rail-link::before,
  .rsg-inm-faqh .faqh-close a{transition:none}
}


/* ============================================================================
   OFFERS - /offers/ (page 297) - aligned to the RSG "Offers Page" template
   (Notion 3b956215fb26808eb072d2b9f2c1382a), 2026-08-25.
   SCOPING CONTRACT: every selector below begins .rsg-inm-offers. The np-* card
   primitives are SHARED with page 296 (the Trane page) and are authored as a
   two-selector list, so the overrides here win for this page only by loading later
   at equal specificity. No rule below names the other page's wrapper.
   ON THE TEMPLATE MOCKUP: the two PNGs in the Notion doc are a generic wireframe,
   so they are pattern only and none of their colours or fonts are used. What IS
   taken from them: the value-led offer card with a full-width claim action, and a
   connected numbered step row for the claim process. Their generic stock line icons
   are deliberately not reproduced - the client has flagged an icon on every item as
   reading AI-generated.
   Red stays a small structural mark: the step numeral and the Value label, nothing
   more. var(--acc) is azure on a light band, so var(--red) is the correct token.
   ========================================================================== */

/* ---- hero: the template names a distinct TRUST LINE of three or four labels.
        It was rendering as a second paragraph of body copy. ---- */
.rsg-inm-offers .of-trust{
  margin:20px 0 0;padding-top:16px;max-width:62ch;
  border-top:1px solid rgba(233,242,250,.20);
  font-family:var(--font-heading);
  font-size:12.5px;font-weight:600;line-height:1.75;letter-spacing:.06em;
  text-transform:uppercase;color:#A9D3F0;
}

/* ---- offer cards: the value is the one fact a visitor is scanning for ---- */
.rsg-inm-offers .np-rows li.of-val{color:var(--ink)}
.rsg-inm-offers .np-rows li.of-val b{color:var(--red)}
.rsg-inm-offers .np-card .rsg-btn2{align-self:stretch;justify-content:center}

/* ---- the service links the template asks each card to carry ---- */
.rsg-inm-offers .np-rows a,
.rsg-inm-offers .rsg-sechead .rsg-sub a{
  color:var(--ink);font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--azure);padding-bottom:1px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.rsg-inm-offers .np-rows a:hover,
.rsg-inm-offers .rsg-sechead .rsg-sub a:hover{color:var(--azure)}
.rsg-inm-offers .np-rows a:focus-visible,
.rsg-inm-offers .rsg-sechead .rsg-sub a:focus-visible{outline:2px solid var(--azure);outline-offset:3px}

/* ---- how the offers are claimed: a connected numbered row ---- */
.rsg-inm-offers .of-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px;margin-top:clamp(34px,4vw,50px);
}
.rsg-inm-offers .of-step{position:relative;text-align:center}
.rsg-inm-offers .of-step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1);
  font-family:var(--font-display);font-size:18px;font-weight:800;
  letter-spacing:-.01em;color:var(--red);
}
.rsg-inm-offers .of-step:not(:last-child)::after{
  content:"";position:absolute;top:27px;height:1px;pointer-events:none;
  left:calc(50% + 40px);right:calc(-50% + 40px);
  background:linear-gradient(90deg,rgba(26,28,27,.20),rgba(26,28,27,.05));
}
.rsg-inm-offers .of-step h3{
  margin:20px 0 0;font-family:var(--font-display);
  font-size:17.5px;font-weight:700;line-height:1.3;color:var(--ink);
}
.rsg-inm-offers .of-step p{
  margin:10px auto 0;max-width:34ch;
  font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty;
}

/* ---- the map the template asks for on the service-area section. The source doc
        says "Map embed goes here", and the embed is the one already published on
        /about/, not a new one. ---- */
.rsg-inm-offers .of-map{
  margin-top:clamp(28px,3.4vw,42px);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-1);line-height:0;
}
.rsg-inm-offers .of-map iframe{
  display:block;width:100%;height:420px;border:0;filter:saturate(.95);
}

@media (max-width:900px){
  .rsg-inm-offers .of-steps{grid-template-columns:minmax(0,1fr);gap:30px}
  .rsg-inm-offers .of-step:not(:last-child)::after{display:none}
  .rsg-inm-offers .of-map iframe{height:320px}
  .rsg-inm-offers .of-trust{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .rsg-inm-offers .np-rows a,
  .rsg-inm-offers .rsg-sechead .rsg-sub a{transition:none}
}


/* ============================================================================
   OFFERS HERO - centred content plus a gap above the CTA row
   Client screenshot of the offers hero, 2026-08-25: centre all the hero content
   and put air above the two buttons.
   MEASURED BEFORE (preview render at innerWidth 1376): the h1, the intro and the
   button row all sit at centre-x 688, but the trust strip sat at 548.1 - it is
   500.65px wide (a 62ch cap) with side margins of zero, so it hung off the left
   of a centred 780px column. is-solo centres the h1, the intro and the button row
   and nothing ever centred the strip. The measured distance from the bottom of
   the strip to the top of the button row was 0.
   Both rules are scoped to .rsg-inm-offers AND to the solo hero, so no other page
   that loads this shared sheet can match either one.
============================================================================ */
.rsg-inm-offers .rsg-hero-grid.is-solo .of-trust{margin-left:auto;margin-right:auto}
.rsg-inm-offers .rsg-hero-grid.is-solo .rsg-hero-ctas{margin-top:32px}
@media (max-width:767px){
  .rsg-inm-offers .rsg-hero-grid.is-solo .rsg-hero-ctas{margin-top:26px}
}


/* ============================================================================
   OFFERS MAP BAND - the acm3 territory console on a cream ground
   The offers page reuses the map console verbatim by class, so it inherits the
   console, the framed map, the sweep animation and the swap script with no new
   component. Two page-scoped rules are all it needs.
   1. GROUND. The band rule paints itself paper, which would put paper next to the
      paper FAQ band above it and force the closing band divider fill to change.
      Pinning it to cream keeps the light-cream-light-cream alternation this page
      already runs and leaves every divider fill on the page untouched.
   2. The Bartow and DeKalb row is not a town list, so it is a note under the
      console rather than a line with stations. Type and ink match the master note
      directly above it; the hairline matches the console top rule.
============================================================================ */
.rsg-inm-offers .acm3-band{background:var(--cream)}
.rsg-inm-offers .acm3-console .of-conf{margin:18px 0 0;padding-top:15px;border-top:1px solid var(--navy-line);font-size:12.5px;line-height:1.55;color:var(--muted-dark)}


/* ============================================================================
   OFFERS DESIGN PASS - section rules, offer cards, tenets, steps, map balance, closing band
   Client, 2026-08-25: enhance every section so the page reads professional and
   designed. Everything here is scoped to .rsg-inm-offers except the tenet-heading
   selector extension above, which is additive.
   Measured problems this fixes, all from a render of the draft at innerWidth 1376:
     - no section head carried the house red rule, so six heads read as bare text
     - the fine-print line inside the dark warranty cards computed rgb(94,85,72),
       a light-band brown on navy, about 1.98 to 1, so it was effectively invisible
     - the three warranty cards sat in a two-column grid, leaving one orphan
     - the offer-card bullet list had no separators, so four labelled rows read as
       loose prose rather than a spec sheet
     - the map console measured 699.2 tall against a 444.2 map card, leaving 255px
       of dead space beside the lower half of the console
     - the closing band put a solid white plate on the navy ground, against the
       house rule that a card on a dark band goes darker than the band
============================================================================ */
/* 1. The house section rule under every section head. Red is a 3px decorative bar
      here, never text, which is what the dark band allows. */
.rsg-inm-offers .rsg-sechead .rsg-h2::after,
.rsg-inm-offers .rsg-faq-aside .rsg-h2::after,
.rsg-inm-offers .acm3-head .acm3-title::after{content:"";display:block;width:56px;height:3px;border-radius:2px;margin:18px auto 0;background:linear-gradient(90deg,var(--red),#E33950)}

/* 2. Fine print on a dark band takes the dark-band muted ink, not the light one. */
.rsg-inm-offers .rsg-sec--dark .np-fine{color:var(--muted-dark)}

/* 3. Three warranties, three columns. One column below 1024 rather than two, so the
      set never leaves an orphan at any width. */
.rsg-inm-offers .rsg-why-tenets{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){
  .rsg-inm-offers .rsg-why-tenets{grid-template-columns:minmax(0,1fr)}
}

/* 4. Offer cards read as a spec sheet: a hairline under the title, ruled rows, and
      the value row promoted to a full-bleed tinted strip with engineered numerals.
      The negative margin equals the card padding exactly, so the strip runs edge to
      edge instead of sitting 12px proud of the rules above it. */
.rsg-inm-offers .np-card h3{margin:0 0 15px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.rsg-inm-offers .np-rows{gap:0;margin-top:18px}
.rsg-inm-offers .np-rows li{padding:10px 0;border-top:1px solid var(--line)}
.rsg-inm-offers .np-rows li.of-val{margin:0 calc(-1 * clamp(22px,2.4vw,30px));padding:10px clamp(22px,2.4vw,30px);background:rgba(170,24,44,.05);font-weight:600;font-variant-numeric:tabular-nums lining-nums}

/* 5. Claim steps: a soft brand ring on each disc and a red-tinted connector, so the
      row reads as one process instead of three separate discs. */
.rsg-inm-offers .of-step-n{box-shadow:var(--shadow-1),0 0 0 7px rgba(170,24,44,.05)}
.rsg-inm-offers .of-step:not(:last-child)::after{background:linear-gradient(90deg,rgba(170,24,44,.30),rgba(170,24,44,.08))}

/* 6. Map card fills the console height. The console carries 17 towns here against
      ac-repair's 10, so the fixed 4:3 card left a quarter of the band empty. Below
      860 the grid stacks and the card goes back to a landscape ratio. */
.rsg-inm-offers .acm3-mapcard{align-self:stretch;display:flex;flex-direction:column}
.rsg-inm-offers .acm3-mapframe{aspect-ratio:auto;flex:1 1 auto;min-height:470px}
@media (max-width:860px){
  .rsg-inm-offers .acm3-mapcard{align-self:auto;display:block}
  .rsg-inm-offers .acm3-mapframe{aspect-ratio:16/11;flex:0 0 auto;min-height:0}
}

/* 7. The alternatives band was a heading over a bare paragraph. The paragraph now
      sits in the callout plate this page already uses, so the band has a subject. */
.rsg-inm-offers .of-alt .rsg-sechead{margin-bottom:0}
.rsg-inm-offers .of-alt .rsg-sub{max-width:820px;margin:28px auto 0;padding:26px 30px;text-align:left;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
@media (max-width:600px){
  .rsg-inm-offers .of-alt .rsg-sub{padding:22px 20px}
}

/* 8. Closing band: the doc's single closing sentence pair becomes a headline and a
      sub, which is how every other closing band on this site is built, and the white
      plate goes away. Sentence case on purpose - it is a sentence, not a label, and
      uppercasing it across two lines reads as shouting. */
.rsg-inm-offers .rsg-close h2.of-close-h2{margin:0 auto;max-width:44ch;font-size:clamp(26px,2.9vw,36px);font-weight:800;line-height:1.18;letter-spacing:-.012em;color:#fff;text-wrap:balance}
.rsg-inm-offers .of-close-sub{margin:16px auto 0;max-width:62ch;font-size:17px;line-height:1.62;color:var(--muted-dark);text-wrap:pretty}


/* ============================================================================
   OFFERS ROUND 5 - dark FAQ band, and the gauge dial off the bands that should not carry it
   Client, 2026-08-25: put the FAQ section in the dark theme; add the divider centre
   glyph to every dark top divider; put the closing-band mascot on its divider; and
   take the meter graphic off the closing band background.
   The sun glyph and the closing figure needed NO css - both components already exist
   in this sheet and were only missing from this page's markup.
   What did need css: there is no dark treatment for the accordion anywhere on the
   site (a selector search for sec--dark plus faq returned zero rules), so the whole
   dark skin below is new. Cards go DARKER than the band per the house rule, never
   lighter, and the open-state red inset bar is kept because red is legal as a 3px
   mark on this ground even though it is not legal as text.
============================================================================ */
/* 1. Accordion, dark skin. Scoped to this page AND to a dark band, so the light
      accordion on ac-repair, 283 and 289 cannot match any of it. */
.rsg-inm-offers .rsg-sec--dark .rsg-faq-item{background:var(--card-dark);border-color:var(--navy-line);box-shadow:0 2px 8px rgba(3,12,24,.34)}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-item:hover{border-color:rgba(226,198,163,.34)}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-item.is-open{border-color:rgba(226,198,163,.34);box-shadow:inset 3px 0 0 var(--red),0 4px 12px rgba(3,12,24,.40)}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-q{color:#fff}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-q::before{background:rgba(169,211,240,.07);border-color:rgba(169,211,240,.34)}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-q::after{border-right-color:var(--ice);border-bottom-color:var(--ice)}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-item:hover .rsg-faq-q::before{border-color:rgba(169,211,240,.58)}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-item.is-open .rsg-faq-q::before{background:var(--ice);border-color:var(--ice)}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-item.is-open .rsg-faq-q::after{border-right-color:var(--void);border-bottom-color:var(--void)}
.rsg-inm-offers .rsg-sec--dark .rsg-faq-a p{color:var(--muted-dark)}

/* 2. The meter graphic is the first of two background layers on every dark non-hero
      band in this sheet. He asked for it off the closing band. It is also taken off
      the FAQ band, because that band only became dark in this round and would
      otherwise GAIN the very graphic he just asked to remove. The warranty band in
      between keeps it and is unchanged. */
.rsg-inm-offers .rsg-close.rsg-sec--dark,
.rsg-inm-offers .rsg-faq.rsg-sec--dark{background-image:var(--band-grad);background-repeat:no-repeat;background-position:center;background-size:cover}


/* ============================================================================
   BRANDS-TEMPLATE ROUND  ·  2026-08-25  ·  page 296 /trane-dealer/  ·  DRAFT
   Content-team template: Notion "Brands We Serve Hub Page" 3bc56215fb26805c9286cac2bd5a0b2f.
   Every selector below is scoped .rsg-inm-trane, so 54 / 283 / 289 / 294 / 297
   cannot match one of them.
   THE GRID COMES FREE: .rsg-inm-trane .np-cards is already repeat(3,1fr), then
   2-up at 1024 and 1-up at 767 - which is exactly the template's "six blocks,
   three across, two rows" and both of its three-card rows. No grid CSS added.
   DELIBERATE DEVIATION, recorded rather than silently dropped: the template asks
   for "a large ghosted brand initial" on each block. Giant ghost / outline
   watermark display text is one of this client's named AI tells and was stripped
   page-wide once before, so the per-block accent bar carries the distinction
   instead. His design ruling outranks a mockup note.
   COLOUR CARRIES MEANING HERE: the accent bar is red on the line we supply and
   fit, royal on the lines we service and repair. The block's own sentence still
   states the supply position in words, per the template.
   ============================================================================ */

.rsg-inm-trane .rsg-sechead .rsg-h2::after,
.rsg-inm-trane .rsg-faq-aside .rsg-h2::after{content:"";display:block;width:56px;height:3px;border-radius:2px;margin:18px auto 0;background:linear-gradient(90deg,var(--red),#E33950)}

.rsg-inm-trane .np-callout .tr-answer{margin:0 0 14px;font-family:var(--font-display);font-weight:800;font-size:clamp(19px,2vw,23px);line-height:1.2;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}

.rsg-inm-trane .tr-brand{position:relative;overflow:hidden}
.rsg-inm-trane .tr-brand::before{content:"";position:absolute;left:clamp(22px,2.4vw,30px);top:0;width:44px;height:3px;border-radius:0 0 3px 3px;background:var(--royal)}
.rsg-inm-trane .tr-brand.is-supplied::before{background:linear-gradient(90deg,var(--red),#E33950)}

.rsg-inm-trane .tr-more{margin-top:clamp(28px,3.5vw,44px);padding:clamp(22px,2.4vw,30px);background:rgba(6,54,118,.045);border:1px solid var(--line);border-radius:var(--r-card)}
.rsg-inm-trane .tr-more-label{display:block;margin:0 0 14px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#805928}
.rsg-inm-trane .tr-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rsg-inm-trane .tr-chips .rsg-chip{background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-1)}
.rsg-inm-trane .tr-more p{margin:16px 0 0;font-size:clamp(15px,1.45vw,16px);line-height:1.65;color:var(--ink);text-wrap:pretty}

.rsg-inm-trane .tr-verified{margin-top:clamp(20px,2.4vw,28px);text-align:center}
.rsg-inm-trane .tr-verified .np-fine{margin:0}

/* ============================================================================
   TRANE DEALER (page 296) - DESIGN PASS 2026-08-25
   Client: "use alternate theme for sections ... use dividers for dark sections
   like we have in whole website and enhance every section make sections
   professional, attractive and give a premium look."

   BAND RHYTHM. Four bands move cream to dark in the body round so the page
   alternates from a dark hero to a dark close. The np- card kit was authored
   for light grounds only, so section 1 below is its dark twin. House rule:
   a card on a dark band goes DARKER than the band, never lighter.

   SCOPING. Every rule here is scoped .rsg-inm-trane, which lives on page 296
   only. The np- rules are shared with .rsg-inm-offers through comma lists, so
   nothing above is edited in place - these are deeper overrides instead, and
   /offers/ is provably untouched.

   SPECIFICITY. .rsg-inm-trane .rsg-sec--dark .x is (0,3,0) and beats the
   shared (0,2,0) rule regardless of source order. Where a modifier rule was
   already (0,3,1) - the supplied brand bar - the dark twin is restated one
   class deeper so a generic dark rule cannot overtake it on source order.

   PER-SECTION HOOKS. Sections are addressed by their existing aria-labelledby
   value rather than by a new class, so the design pass needs no extra markup.
   Those ids are the accessibility wiring and move only if the copy changes.

   RESPONSIVE. Any rule here that sets grid-template-columns out-specifies the
   shared 1024 and 767 collapses, so each one restates its own breakpoints.
   ============================================================================ */

/* 1. DARK-BAND CARD KIT ---------------------------------------------------- */
.rsg-inm-trane .rsg-sec--dark .np-card{background:var(--card-dark);border-color:var(--navy-line);box-shadow:0 2px 8px rgba(3,12,24,.34)}
.rsg-inm-trane .rsg-sec--dark .np-card h3,
.rsg-inm-trane .rsg-sec--dark .np-card h4{color:#fff}
.rsg-inm-trane .rsg-sec--dark .np-card p{color:var(--muted-dark)}
.rsg-inm-trane .rsg-sec--dark .np-kicker{color:var(--eyebrow-dark)}
.rsg-inm-trane .rsg-sec--dark .np-fine{color:var(--muted-dark)}
.rsg-inm-trane .rsg-sec--dark .np-rows li{color:var(--muted-dark)}
.rsg-inm-trane .rsg-sec--dark .np-rows b{color:#fff}
.rsg-inm-trane .rsg-sec--dark .np-card ul.np-list li{color:var(--muted-dark)}
.rsg-inm-trane .rsg-sec--dark .np-card ul.np-list li::before{background:var(--accent-dark)}
.rsg-inm-trane .rsg-sec--dark .np-callout{background:var(--card-dark);border-top-color:var(--navy-line);border-right-color:var(--navy-line);border-bottom-color:var(--navy-line);box-shadow:0 2px 8px rgba(3,12,24,.34)}
.rsg-inm-trane .rsg-sec--dark .np-callout p{color:#E7EEF3}
@media (hover:hover){
  .rsg-inm-trane .rsg-sec--dark .np-card:hover{border-color:rgba(226,198,163,.34);box-shadow:0 4px 12px rgba(3,12,24,.40),0 18px 40px rgba(3,12,24,.34)}
}

/* 2. SECTION 3, THE BRAND ROUTER, ON DARK ---------------------------------- */
/* The accent bar carries the supply position. Red is decoration-only on this
   band at 1.9:1 as text, but a 3px bar is legal and it is the one mark that
   separates the line we supply from the lines we only service. The serviced
   bars move off royal navy, which is invisible against the band, onto ice. */
.rsg-inm-trane .rsg-sec--dark .tr-brand::before{background:var(--accent-dark)}
.rsg-inm-trane .rsg-sec--dark .tr-brand.is-supplied::before{background:linear-gradient(90deg,var(--red),#E33950)}
.rsg-inm-trane .rsg-sec--dark .tr-brand.is-supplied{border-color:rgba(226,198,163,.30);box-shadow:0 4px 14px rgba(3,12,24,.42),0 22px 48px rgba(3,12,24,.34)}
.rsg-inm-trane .rsg-sec--dark .tr-more{background:rgba(169,211,240,.05);border-color:var(--navy-line)}
.rsg-inm-trane .rsg-sec--dark .tr-more-label{color:var(--accent-dark)}
.rsg-inm-trane .rsg-sec--dark .tr-more p{color:var(--muted-dark)}
.rsg-inm-trane .rsg-sec--dark .tr-chips .rsg-chip{background:var(--navy-card);border-color:var(--navy-line);color:#fff;box-shadow:0 2px 8px rgba(5,18,32,.28),inset 0 1px 0 rgba(255,255,255,.05)}

/* 3. MEASURE AND HAIRLINE ------------------------------------------------- */
/* The callout paragraph had no cap and ran the full 1124px container, about
   110 characters per line against the 60-75 the type rules ask for. The lead
   line inside it is a short display sentence and keeps the full width.
   Hairlines drop from .14 to .09, the premium band, on this page only. */
.rsg-inm-trane .np-callout p{max-width:74ch}
.rsg-inm-trane .np-callout .tr-answer{max-width:none}
.rsg-inm-trane .np-card{border-color:rgba(26,28,27,.09)}
.rsg-inm-trane .tr-more{border-color:rgba(26,28,27,.09)}
.rsg-inm-trane .np-callout{border-top-color:rgba(26,28,27,.09);border-right-color:rgba(26,28,27,.09);border-bottom-color:rgba(26,28,27,.09)}

/* 4. SECTION 4 - EDITORIAL STANDFIRST ------------------------------------- */
/* 4+5. THE OPENING BRIEF - COPY LEFT, THE FOUR FIGURES TWO-BY-TWO RIGHT --- */
/* CLIENT 2026-08-25: the "what being a dealer means" copy band and the four-
   figure band beneath it are now ONE split band - copy in the left column,
   figures two-by-two on the right - asked for against a screenshot of the pair.
   This REPLACES two earlier blocks of mine wholesale rather than overriding
   them: the two-column standfirst that used to divide the two paragraphs,
   which cannot survive a narrow left column, and the four-across stat rail,
   whose hook matched the only figures band with no aria-labelledby and so
   matches nothing now that the merged section carries one. The rail's display
   face and tabular lining figures are carried across here, so the numerals
   keep their weight; only the four-across geometry is gone.
   The band is --cream, not --light. Merging two bands leaves an EVEN band
   count that both starts and ends dark, so exactly one light-family pair must
   sit adjacent; cream above the paper band below it is a real tonal step, and
   it costs a single divider re-ink on the hero.
   The tenets selector here is (0,3,0) and out-specifies the shared 767px
   collapse, so BOTH breakpoints are restated. */
.rsg-inm-trane [aria-labelledby="tr-s2"] .tr-brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(30px,3.6vw,54px);align-items:center}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-sechead{max-width:none;margin:0;text-align:left}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-sechead .rsg-h2{margin:0 0 20px}
/* the shared heading rule is centred (margin:18px auto 0); this column is left-
   aligned now, so the rule under the heading has to be too. (0,4,0) beats the
   (0,3,0) it overrides, no !important needed. */
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-sechead .rsg-h2::after{margin:18px 0 0}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-sechead .rsg-sub{max-width:54ch;margin:0 0 16px;text-align:left}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-sechead .rsg-sub:last-child{margin-bottom:0}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenets{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet{padding:24px 22px 24px 26px}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet h3{font-family:var(--font-display);font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.014em;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet p{margin-top:11px}
@media (max-width:1024px){
  .rsg-inm-trane [aria-labelledby="tr-s2"] .tr-brief{grid-template-columns:minmax(0,1fr);gap:34px}
  .rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-sechead .rsg-sub{max-width:none}
}
@media (max-width:767px){
  .rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenets{grid-template-columns:minmax(0,1fr)}
}

/* 6. SECTION 8 - THE THREE THINGS TO ASK FOR, AS A SPEC SHEET -------------- */
/* A rule under each heading, which is the offers-card device, not the top
   accent bar - that motif belongs to the brand router and is kept to one job. */
.rsg-inm-trane [aria-labelledby="tr-ask"] .np-card h4{margin:0 0 15px;padding-bottom:14px;border-bottom:1px solid rgba(26,28,27,.09)}

/* 7. SECTION 11 - THE REBATE CAVEAT AS A CARD FOOTER STRIP ----------------- */
/* Each rebate card ends with the basis for the figure. As a floating italic
   line it read as an afterthought; as a tinted foot strip it reads as the
   card's own terms, which is the colophon device from the FAQ hub. */
.rsg-inm-trane [aria-labelledby="tr-reb"] .np-card{padding-bottom:0;overflow:hidden}
.rsg-inm-trane [aria-labelledby="tr-reb"] .np-card .np-fine{margin:auto calc(-1 * clamp(22px,2.4vw,30px)) 0;padding:14px clamp(22px,2.4vw,30px);border-top:1px solid rgba(26,28,27,.09);background:rgba(239,226,205,.42);font-style:normal;font-size:12.5px;line-height:1.45}

/* 8. SECTION 12 - THE FOUR STEPS, INDEXED ---------------------------------- */
/* The step number is already a small kicker rather than a display numeral,
   which is deliberate. A rule under it turns it into an index without adding
   the big-numbering device. */
.rsg-inm-trane [aria-labelledby="tr-s9"] .np-kicker{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--navy-line);font-size:13px;letter-spacing:.22em;font-variant-numeric:tabular-nums lining-nums}

/* 9. SECTION 13 - TWO CARDS READ AS A PAIR, NOT AS TWO HALVES -------------- */
@media (min-width:1025px){
  .rsg-inm-trane [aria-labelledby="tr-s10"] .np-cards--2{max-width:860px;margin-left:auto;margin-right:auto}
}

/* 10. SECTION 14 - FIVE COUNTIES WITH NO ORPHAN ROW ------------------------ */
/* Five cards in a three-column grid leave a gap in row two. Cobb spans two
   columns, which fills both rows exactly and makes the home county the focal
   card - it also carries eight towns against the others' one or two. */
.rsg-inm-trane [aria-labelledby="tr-s11"] .np-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.rsg-inm-trane [aria-labelledby="tr-s11"] .np-card:first-child{grid-column:span 2}
@media (max-width:1024px){
  .rsg-inm-trane [aria-labelledby="tr-s11"] .np-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rsg-inm-trane [aria-labelledby="tr-s11"] .np-card:first-child{grid-column:span 2}
}
@media (max-width:767px){
  .rsg-inm-trane [aria-labelledby="tr-s11"] .np-cards{grid-template-columns:minmax(0,1fr)}
  .rsg-inm-trane [aria-labelledby="tr-s11"] .np-card:first-child{grid-column:auto}
}
/* =====================================================================
   CLIENT 2026-08-25: /trane-dealer/ swapped its "Where We Serve" county
   cards for the sitewide territory console. Every console rule is already
   scoped to the .rsg-acm-c3 wrapper and is therefore page-agnostic, so this
   is the ONLY new rule the port needs: the doc's confirm line sitting under
   the Bartow/DeKalb chip. It is a trane-scoped TWIN of the offers rule, not
   an edit to it, so nothing can reach /offers/ from here.
   ===================================================================== */
.rsg-inm-trane .acm3-console .acm3-line .tr-conf{
  margin:10px 0 0 1px;font-size:12.5px;line-height:1.55;color:var(--muted-dark)}

/* =====================================================================
   CLIENT 2026-08-25: the /trane-dealer/ console carries EIGHTEEN towns
   against ac-repair's ten, so the shared 4:3 map card left roughly a
   quarter of the band empty beside it -- the same imbalance /offers/ hit
   and fixed. This is the trane-scoped TWIN of that rule, never an edit to
   it, so /offers/ cannot be reached from here.
   Both of these are (0,2,0), exactly like the shared .rsg-acm-c3 rules
   they override, so the 860px collapse MUST be restated: without it the
   stretch would survive the stack and the map would grow unbounded.
   ===================================================================== */
.rsg-inm-trane .acm3-mapcard{align-self:stretch;display:flex;flex-direction:column}
.rsg-inm-trane .acm3-mapframe{aspect-ratio:auto;flex:1 1 auto;min-height:470px}
@media (max-width:860px){
  .rsg-inm-trane .acm3-mapcard{align-self:auto;display:block}
  .rsg-inm-trane .acm3-mapframe{aspect-ratio:16/11;flex:0 0 auto;min-height:0}
}

/* =====================================================================
   CLIENT 2026-08-25: "why is there too much gap, and 04's heading is not
   aligned with the others" on the step rail.
   The shared rule reserves min-height:45.5px on the step title, which is
   EXACTLY two lines (17.5px x 1.3 x 2). That reservation exists so a title
   that wraps keeps all four bodies on one baseline. It earns its keep on
   /ac-repair/ and on this page only while the columns are narrow.
   MEASURED on this page with the display font loaded, the four titles need
   220 / 209 / 238 / 49px on one line. The column is (container - 3*34)/4 and
   the container tops out at 1124px, so from 1180px up the column is a fixed
   255.5px -- comfortably clear of the longest title at 238px, which means no
   title can EVER wrap there and the whole 22.75px reservation is dead space
   under every heading. That is the gap the client circled, and it is also
   why the shortest title read as sitting oddly against its neighbours.
   So: no reservation by default, and the reservation restored only between
   1025 and 1180 where the columns really do shrink and a title really does
   wrap (verified: at innerWidth 1025 titles 1 and 3 both go to two lines).
   1180 is not a guess -- it is the width at which the container stops
   shrinking, so the boundary cannot drift with a copy edit or with webfont
   timing.
   Scoped to .rsg-inm-trane: this is (0,2,0), the same as the shared rule it
   overrides, so it wins on SOURCE ORDER by sitting at the end of the file.
   /ac-repair/, /services/ and the two other drafts keep the reservation.
   ===================================================================== */
.rsg-inm-trane .rsg-hiw-t{min-height:0}
@media (min-width:1025px) and (max-width:1180px){
  .rsg-inm-trane .rsg-hiw-t{min-height:45.5px}
}

/* =====================================================================
   S02 "WHAT BEING A TRANE DEALER MEANS" -- GROUND + THE FOUR FIGURE CARDS
   (client, 2026-08-27: paper ground, and make the four boxes interesting)

   The band ground moves to paper by swapping the section theme class in
   the page body, so the value comes from the existing token rather than a
   new background declaration, and the two neighbour waves are re-inked in
   the same deploy.

   The cards are the SHARED why-tenet component, also used by the published
   air-conditioning-repair page and three other drafts, so nothing here
   edits a shared rule: every selector goes through this section own
   aria-labelledby hook, which is one class deeper than the shared rules and
   therefore wins without depending on source order. The two dark-band cards
   elsewhere on this page are outside the hook and keep their treatment.

   Card grammar follows what this client converged on over five rounds on
   the installation page: the accent is a short bar across the top left,
   not a full-height rail, its offset taken from the card own padding so it
   shares a vertical line with the figure; and the figure ink alternates on
   the diagonal so a four-up grid does not read flat. Red is reserved to the
   bar and is never the numeral.
   ===================================================================== */
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet{
  padding:26px 22px 24px 26px;
  box-shadow:0 1px 2px rgba(26,28,27,.05),0 10px 26px -14px rgba(26,28,27,.30);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet::before{
  left:26px;top:0;bottom:auto;width:44px;height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--red),var(--royal));
}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet:hover{
  transform:translateY(-3px);
  border-color:rgba(26,28,27,.22);
  box-shadow:0 2px 4px rgba(26,28,27,.06),0 18px 38px -16px rgba(26,28,27,.38);
}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet:nth-child(2) h3,
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet:nth-child(3) h3{color:var(--royal)}
.rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet p{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){
  .rsg-inm-trane [aria-labelledby="tr-s2"] .rsg-why-tenet:hover{transform:none}
}

/* ===========================================================================
   2026-08-28 (client) · /trane-dealer/ S04 "What A Trane Quote Includes"
   Was one centred copy block in an otherwise empty band. Now a two-column
   split, photo LEFT and copy RIGHT.
   The photo shell is NOT new: it is the published /ac-repair/ financing-band
   grammar reused by class - .rsg-fin-stage's offset royal bracket over
   .rsg-fin-photo's hairline figure - so this page gains no new photo language.
   Everything below is scoped to the section's own aria hook, which is (0,3,x)
   against the shared (0,2,x) and therefore wins WITHOUT depending on source
   order; no other page carries tr-ask, so the shared component on 52/54/283/
   289 provably cannot be reached.
   Geometry notes:
     - the source file is 520x520, so the box is held square (aspect-ratio 1/1)
       and capped at 430 / 520 - never cropped, never upscaled past its pixels;
     - elevation drops shadow-3 -> shadow-2 and radius 20px -> --r-photo,
       because this photo is 430px, not the 900px one the fin band was cut for;
     - the foot scrim is eased back (.52 -> .34) since nothing sits on it here;
     - the shared 1024/767 rules park .rsg-fin-stage at order:3, which would
       drop the photo BELOW the copy on a stack, so order is restated.
   =========================================================================== */
.rsg-inm-trane [aria-labelledby="tr-ask"] .tr-qgrid{
  display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:66px;align-items:center;
}
.rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-photo figure{
  border-radius:var(--r-photo);box-shadow:var(--shadow-2);
}
.rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-stage::before{
  border-radius:16px;
}
.rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-photo figure::after{
  background:linear-gradient(180deg,transparent 62%,rgba(8,25,42,.34));
}
.rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-photo img{
  height:auto;aspect-ratio:1/1;display:block;
  transition:transform .6s var(--ease);
}
.rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-sechead{
  max-width:none;margin:0;text-align:left;
}
.rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-sechead .rsg-h2{margin:0}
.rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-sechead .rsg-h2::after{margin:18px 0 0}
.rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-sechead .rsg-sub{
  max-width:62ch;margin:26px 0 0;text-align:left;text-wrap:pretty;
}
@media (hover:hover){
  .rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-stage:hover .rsg-fin-photo img{transform:scale(1.04)}
}
@media (max-width:1024px){
  .rsg-inm-trane [aria-labelledby="tr-ask"] .tr-qgrid{grid-template-columns:1fr;gap:34px}
  .rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-stage{order:0;margin:0 auto;max-width:520px;width:100%}
}
@media (max-width:767px){
  .rsg-inm-trane [aria-labelledby="tr-ask"] .tr-qgrid{gap:26px}
  .rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-stage::before{inset:-10px 10px 10px -10px}
  .rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-sechead .rsg-sub{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-photo img{transition:none}
  .rsg-inm-trane [aria-labelledby="tr-ask"] .rsg-fin-stage:hover .rsg-fin-photo img{transform:none}
}
/* ===========================================================================
   2026-08-28 · /air-conditioning-maintenance-marietta-ga/ (page 314, draft)
   ONE measured fix, page-scoped to .rsg-inm-mt.

   THE STEP-TITLE RESERVATION. .rsg-hiw-t reserves min-height:45.5px, which is
   exactly two lines at 17.5px/1.3, so a wrapping title still leaves all four
   bodies on one baseline. Measured here: all four titles are ONE line at 1376,
   so the reservation is 22.75px of dead space under every heading - the gap the
   client circled on /trane-dealer/. Same two-rule fix accepted there: no
   reservation by default, restored only across the 1025-1180 range where the
   columns are narrow enough for a title to wrap.

   (The two figure-column rules that used to sit here were removed when band 2
   moved to the .rsg-works--figcards modifier: that modifier already lays each
   figure out as a card with display:block, at a higher specificity, so the
   overrides had become dead weight.)
   =========================================================================== */
.rsg-inm-mt .rsg-hiw-t{min-height:0}
@media (min-width:1025px) and (max-width:1180px){
  .rsg-inm-mt .rsg-hiw-t{min-height:45.5px}
}

/* =====================================================================
 * TK PHOTO BAND: FIXED-HEIGHT BOX, TOP-ANCHORED COPY, FORM ALIGNED TO THE HEADLINE
 * (2026-09-01, supersedes this morning's content-sized version)
 * The client asked for the form card's top edge to line up with the section headline,
 * on every service page.
 * MEASURED CAUSE: the headline sits a CONSTANT 87px below the box top (56px padding +
 * a 19px eyebrow + its 11px margin + 1px border), but .rsg-tk-form is pulled up a FIXED
 * -210px from the box BOTTOM. Once the box height varied per page (this morning), the
 * form landed in a different place on each one: 39px too LOW on 289, 25px too HIGH on
 * 54, 14px too low on 328.
 * WHY NOT A PER-PAGE MARGIN: no pure-CSS selector lets a sibling read the box's height,
 * so alignment would need one hardcoded value per page (5 distinct ones), plus a wrapper
 * class on 54/283/289 which have none, and it would drift the moment any copy is edited.
 * THE FIX: make the height CONSTANT again, but keep the copy TOP-anchored so the 57px of
 * air above the eyebrow that the earlier round was about is preserved on every page.
 * A constant height means ONE form margin aligns all seven pages, forever.
 *   base  >=1025: box 370, tallest copy 274 (314) needs 360 -> margin -(370-87) = -283
 *   <=1024        box 385, tallest copy 286 (314) needs 372 -> margin -(385-87) = -298
 *                 (the margin only matters >=901px; below that the form stacks)
 * The spare height on a short-copy page reads as more photograph, not as emptiness -
 * checked on 54, the shortest.
 * RESTATED ON PURPOSE: this block sits at the end of the sheet, so its base rules would
 * otherwise out-specify the shared <=1024 margin (-150px), the <=900/-767 stacked margin
 * (14px) and the <=767 max-width:none. All four are restated below. Removing any one of
 * them silently breaks a breakpoint.
 * VERIFY AFTER ANY COPY EDIT: formTop - headlineTop must be 0 at 1376 and at 976 on all
 * seven pages. If a page's copy grows past the height above, its box grows and the form
 * drifts down by exactly that overflow.
 * ===================================================================== */
.rsg-inm-ac .rsg-tk-hero{display:flex;align-items:flex-start;min-height:370px;padding:56px 30px 30px}
.rsg-inm-ac .rsg-tk-hero img{position:absolute;inset:0;width:100%;height:100%}
.rsg-inm-ac .rsg-tk-onphoto{position:relative;left:auto;right:auto;bottom:auto;max-width:62%}
.rsg-inm-ac .rsg-tk-form{margin-top:-283px}
@media (max-width:1024px){
  .rsg-inm-ac .rsg-tk-hero{min-height:385px}
}
@media (min-width:901px) and (max-width:1024px){
  .rsg-inm-ac .rsg-tk-form{margin-top:-298px}
}
@media (max-width:900px){
  .rsg-inm-ac .rsg-tk-form{margin-top:14px}
}
@media (max-width:767px){
  .rsg-inm-ac .rsg-tk-hero{min-height:430px;padding:40px 20px 26px}
  .rsg-inm-ac .rsg-tk-onphoto{max-width:none}
}