/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Indoor Experts — BLOG LAYER (Wave 6)
   Built 2026-08-18. Two page types: the /blog/ INDEX and the blog SINGLE.

   HOW THIS FILE RELATES TO THE OTHER TWO STYLESHEETS
     ie.css      the locked design system. Every page links it. Owns the tokens, the header,
                 the footer, `.sec` / `.sec-dark` / `.wrap` / `.eyebrow` / `.btn` / `.tlink`,
                 `.crumb`, `.close`, and the `.bcard` image card the homepage blog strip uses.
     ie-v16.css  the money-page layer. The blog links it for TWO things only: the `--ie-arc`
                 brand mark and the `.chap` chapter marker. Nothing else from v16 is used, and
                 nothing in v16 is modified.
     THIS FILE   everything a blog page needs that neither of those has.

   ⚠ EVERY NEW CLASS IS PREFIXED `iebl-`. This is not decoration. `.related` was tried on the
     Lexany blog and collided with an existing sub-service rule, which crushed the cards to
     slivers. ie.css is one stylesheet shared by every page type on this site and already owns
     short names like `.post`, `.posts`, `.head`, `.body`, `.meta`, `.d`, `.bd`, `.ph`, `.dek`.
     Grep before you add a class here, and keep the prefix.

   ⚠ REUSED ON PURPOSE, not re-implemented: `.bcard` (with its photo zoom, gold chip and hover
     lift) is the card device the owner approved on the homepage blog strip. The index grid uses
     it verbatim and only ADDS a `.dek` paragraph inside `.bd`. If the owner ever restyles
     `.bcard`, the whole blog follows for free. That is the point.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ───────── shared: the eyebrow-scale label used for dates and read times ─────────
   `.meta` already exists inside `.bcard` in ie.css. This is the standalone version for the
   feature block, the byline and the sidebar, so the small type reads identically everywhere. */
.iebl-meta{font-family:var(--disp);font-weight:600;font-size:11.8px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.iebl-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:none}
.sec-dark .iebl-meta,.iebl-phero .iebl-meta{color:#9fb0d0}
.sec-dark .iebl-meta .dot,.iebl-phero .iebl-meta .dot{background:rgba(255,255,255,.34)}

/* ═════ INDEX 1. HERO — v2 (owner pass, 2026-08-18) ═════
   v1 was rejected: "not good enough". What was wrong with it, so it does not get rebuilt the same
   way: the right column held a three-row STAT PANEL (26 articles / 4 topics / newest date), which
   is filler and not a control, and the five topic chips sat in a toolbar strip under everything,
   which read as a form rather than a masthead. The hero of an archive should do the archive's job.

   v2 is a masthead: copy and search on the left, and the right column is the actual TOPIC
   NAVIGATOR, five rows with counts. The rows are real `?t=` links, so they work with JS off and the
   filter script intercepts them, and the library size moved into one quiet meta line.

   WARNING: this section must NOT carry the `.hero` class. ie.css `.hero .wrap` is a two-column grid
   with 112px of bottom padding for the trust-strip overlap, which split the H1, the lede and the
   controls into different cells and left a 200px hole. This layer owns the whole hero, which is why
   the H1 colour and the `.u` underline are restated here instead of inherited.

   WARNING: `overflow:visible` is load-bearing. The featured card below overlaps INTO this section
   and `.sec-dark` sets `overflow:hidden`, which clipped it. The section glow therefore moves from a
   `::before` (which would spill out of a visible box) to a background layer, because backgrounds
   are clipped to the box regardless of `overflow`. */
.iebl-hero{overflow:visible;
  background-image:radial-gradient(620px 420px at 88% -12%,rgba(252,201,82,.11),transparent 70%),
    linear-gradient(152deg,#0a1c3f 0%,#143883 56%,#0f2a5e 100%)}
.iebl-hero::before{display:none}
.iebl-hero .wrap{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(30px,4vw,68px);
  align-items:start;padding-top:clamp(46px,5.4vw,82px);
  padding-bottom:190px;position:relative;z-index:1}
.iebl-hero h1{font-size:clamp(31px,4vw,54px);color:#fff;max-width:20ch;margin:18px 0 0;line-height:1.07}
.iebl-hero .lede{color:#bcc9e2;font-size:clamp(15.5px,1.25vw,17.4px);max-width:50ch;margin:18px 0 0}
/* the gold underline device, restated from ie.css `.hero h1 .u` with its numbers unchanged.
   WARNING: `z-index:0` on the span is load-bearing. Without it the ::after has no stacking context
   and paints BEHIND the hero gradient, a bug this site already shipped once. */
.iebl-hero h1 .u{position:relative;z-index:0;color:#fff;white-space:nowrap}
.iebl-hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
  background:var(--gold-2);border-radius:3px;z-index:-1;opacity:.92}

/* search sits under the lede at reading width, not in a full-width toolbar */
.iebl-search{position:relative;max-width:390px;margin-top:clamp(24px,2.6vw,34px)}
.iebl-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  color:#9fb0d0;pointer-events:none}
.iebl-search input{width:100%;font-family:var(--body);font-size:14.6px;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:11px;
  padding:13px 15px 13px 42px;transition:border-color .18s ease,background .18s ease}
.iebl-search input::placeholder{color:#93a3c4}
.iebl-search input:focus{outline:none;border-color:var(--gold-2);background:rgba(255,255,255,.1)}
html:not(.js) .iebl-search{display:none}

.iebl-hmeta{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--disp);
  font-weight:600;font-size:12.4px;letter-spacing:.12em;text-transform:uppercase;color:#8fa1c2}
.iebl-hmeta i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);flex:none}

/* the topic navigator. Real links, so it is the no-JS filter as well as the JS one */
.iebl-nav4{display:block}
.iebl-nav4 .lbl{display:flex;align-items:center;gap:9px;padding:0 0 14px;font-family:var(--disp);
  font-weight:700;font-size:11.4px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.iebl-nav4 .lbl::before{content:"";width:13px;height:13px;flex:none;
  background:var(--ie-arc-l) center/contain no-repeat}
.iebl-nav4 a{display:flex;align-items:center;gap:14px;padding:15px 2px;
  border-bottom:1px solid rgba(255,255,255,.13);color:#dbe3f2;position:relative;
  transition:color .18s ease,padding-left .18s ease}
.iebl-nav4 a:first-of-type{border-top:1px solid rgba(255,255,255,.13)}
.iebl-nav4 a b{font-family:var(--disp);font-weight:600;font-size:15.6px;letter-spacing:-.005em;flex:1}
.iebl-nav4 a .c{font-family:var(--disp);font-weight:700;font-size:12.4px;color:#8fa1c2;
  min-width:22px;text-align:right}
.iebl-nav4 a svg{width:16px;height:16px;color:var(--gold-2);opacity:0;transform:translateX(-6px);
  transition:opacity .18s ease,transform .18s ease}
.iebl-nav4 a:hover{color:#fff;padding-left:8px}
.iebl-nav4 a:hover svg{opacity:1;transform:none}
/* the active row: a gold edge, and the count goes gold with it */
.iebl-nav4 a[aria-current="true"]{color:#fff}
.iebl-nav4 a[aria-current="true"]::before{content:"";position:absolute;left:-14px;top:14px;bottom:14px;
  width:3px;border-radius:3px;background:var(--gold)}
.iebl-nav4 a[aria-current="true"] .c{color:var(--gold-2)}
.iebl-nav4 a[aria-current="true"] svg{opacity:1;transform:none}

/* ═════ INDEX 2. FEATURE — v2 (owner pass, 2026-08-18) ═════
   v1 was rejected with the hero. A 1.44fr / 1fr split put a big photo card beside a thin column of
   three text rows, so the right half read as leftovers. v2 is a magazine composition: ONE wide
   feature card that OVERLAPS the hero, photo left and copy right inside the card, with the three
   next-newest articles as an equal three-up row beneath it.

   The feature is the NEWEST article, which is a fact off the publish dates. Nothing here calls an
   article popular or best, because nothing on this site measures that. */
.iebl-featsec{padding-top:0}
.iebl-fcard{display:grid;grid-template-columns:1.06fr .94fr;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;position:relative;z-index:2;
  margin-top:-120px;box-shadow:0 26px 60px rgba(11,31,69,.16);
  transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease}
.iebl-fcard:hover{box-shadow:0 32px 70px rgba(11,31,69,.22);transform:translateY(-3px);
  border-color:var(--line-2)}
.iebl-fcard .ph{position:relative;overflow:hidden;background:var(--canvas-2);min-height:340px}
.iebl-fcard .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.iebl-fcard:hover .ph img{transform:scale(1.045)}
.iebl-fcard .chip{position:absolute;left:18px;top:18px;background:rgba(250,248,243,.95);
  backdrop-filter:blur(4px);font-family:var(--disp);font-weight:600;font-size:11.6px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);padding:7px 12px;border-radius:7px}
.iebl-fcard .bd{padding:clamp(26px,2.6vw,40px);display:flex;flex-direction:column;justify-content:center}
.iebl-fcard .kicker{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px}
.iebl-fcard .kicker::before{content:"";width:13px;height:13px;flex:none;
  background:var(--ie-arc) center/contain no-repeat}
.iebl-fcard h2{font-size:clamp(22px,2.2vw,31px);line-height:1.2;margin:0}
.iebl-fcard:hover h2{color:var(--navy)}
.iebl-fcard .dek{color:var(--muted);font-size:15.6px;margin:15px 0 0;max-width:52ch}
.iebl-fcard .iebl-meta{margin-top:20px}
.iebl-fcard .tlink{margin-top:20px}

/* the three next-newest as equal text rows. No photos: the feature owns the one image in the band */
.iebl-alsonew{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;
  border-top:1px solid var(--line-2)}
.iebl-arow{display:block;padding:24px 30px 24px 0;border-bottom:1px solid var(--line);position:relative}
.iebl-arow:not(:nth-child(3n)){border-right:1px solid var(--line)}
.iebl-arow:not(:nth-child(3n)) + .iebl-arow{padding-left:30px}
.iebl-arow .tag{font-family:var(--disp);font-weight:600;font-size:10.8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-ink)}
.iebl-arow h3{font-size:17px;line-height:1.32;margin:10px 0 0}
.iebl-arow:hover h3{color:var(--navy)}
.iebl-arow .iebl-meta{margin-top:12px}
/* a gold rule that draws in on hover, the live site card behaviour */
.iebl-arow::after{content:"";position:absolute;left:0;right:30px;bottom:-1px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.iebl-arow:hover::after{transform:scaleX(1)}

/* ═════════════════════════ INDEX 3. THE GRID ═════════════════════════ */
.iebl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
/* .bcard comes from ie.css. Only the dek is new, and the h3 tightens a little because the card
   now carries three text rows instead of two. */
.iebl-grid .bcard h3{font-size:17px;margin:9px 0 12px}
.iebl-grid .bcard .dek{color:var(--muted);font-size:14.1px;line-height:1.58;margin:0 0 16px}
.iebl-grid .bcard[hidden]{display:none}

.iebl-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:44px}
.iebl-pager a,.iebl-pager span{font-family:var(--disp);font-weight:600;font-size:14px;
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:10px;color:var(--navy);background:var(--surface);
  transition:.16s ease}
.iebl-pager a:hover{border-color:var(--navy)}
.iebl-pager [aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.iebl-pager .pnav svg{width:15px;height:15px}
/* ⚠ NOT `.nav`: ie.css owns a global `.nav{display:flex;height:78px}` for the header row, and an
   arrow button carrying that class inherits a 78px height. Named `.pnav` for that reason. */
.iebl-pager .off{opacity:.4;pointer-events:none}
/* no-JS shows all 26 cards, so a pager that cannot page would be a lie */
html:not(.js) .iebl-pager{display:none}

.iebl-empty{text-align:center;padding:56px 20px 10px}
.iebl-empty h3{font-size:21px}
.iebl-empty p{color:var(--muted);margin:12px 0 0}
.iebl-empty .btn{margin-top:22px}

.iebl-count{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}

/* ═════════════════════════ INDEX 4. START HERE ═════════════════════════
   Three service pillars. This exists because the sub-service audit found a real gap: money
   pages link out to articles, and the articles linked nothing back. Every card here points at
   a page that IS built, so the band cannot ship a broken link. */
.iebl-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.iebl-pillar{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.iebl-pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.iebl-pillar:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.iebl-pillar:hover::before{transform:scaleX(1)}
.iebl-pillar .n{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;
  color:var(--gold-ink);display:flex;align-items:center;gap:9px}
.iebl-pillar .n::before{content:"";width:13px;height:13px;flex:none;
  background:var(--ie-arc) center/contain no-repeat}
.iebl-pillar h3{font-size:19px;margin:14px 0 0;line-height:1.28}
.iebl-pillar p{color:var(--muted);font-size:14.4px;margin:11px 0 18px}
.iebl-pillar .tlink{margin-top:auto}

/* ═════════════════════════ SINGLE 1. READING PROGRESS ═════════════════════════
   Fixed under the header. `transform:scaleX()` on a full-width bar rather than animating
   `width`, so the browser can composite it instead of laying the page out on every scroll. */
.iebl-readbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:transparent;
  pointer-events:none}
.iebl-readbar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--gold-2))}
html:not(.js) .iebl-readbar{display:none}

/* ═════════════════════════ SINGLE 2. POST HERO ═════════════════════════
   Photo-backed dark hero, the same device as the money pages, so a reader arriving from a
   service page does not feel like they left the site. */
.iebl-phero{position:relative;overflow:hidden;background:var(--navy-ink);
  padding:clamp(52px,6vw,92px) 0 clamp(40px,4.6vw,62px)}
.iebl-phero .hbg{position:absolute;inset:0}
/* object-position pushes the subject RIGHT of the copy column. At 50% the technician sat directly
   behind the H1 and the scrim had to be heavy enough to bury him, so the photo read as a navy
   rectangle. Off to the right he is visible and the H1 still has a clean field to sit on. */
.iebl-phero .hbg img{width:100%;height:100%;object-fit:cover;object-position:66% 30%}
/* ⚠ load-bearing. The H1 sits over a sunlit brick wall and a technician in a light shirt.
   Do not thin this without re-checking the H1 and the byline against the photo. */
/* two layers, not one. The horizontal wash keeps the copy legible; the vertical one lifts the
   bottom so the meta bar reads without needing a third element. Lighter on the right than v1
   (.58 -> .30) so the photo is actually part of the design instead of texture under a navy field. */
.iebl-phero .hgrade{position:absolute;inset:0;background:
  linear-gradient(94deg,rgba(10,28,63,.955) 0%,rgba(10,28,63,.86) 42%,rgba(15,42,94,.30) 100%),
  linear-gradient(to top,rgba(10,28,63,.55),transparent 42%)}
.iebl-phero .wrap{position:relative}
.iebl-phero h1{font-size:clamp(29px,3.5vw,48px);color:#fff;max-width:24ch;margin:16px 0 0;
  line-height:1.1;letter-spacing:-.02em}
.iebl-phero .dek{color:#c9d5ea;font-size:clamp(15.6px,1.3vw,18px);max-width:54ch;margin:20px 0 0}
/* the topic, as a link back into the filtered index. Sits above the H1 with the chip. */
.iebl-phero .above{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.iebl-phero .above .topic{font-family:var(--disp);font-weight:600;font-size:12.2px;letter-spacing:.13em;
  text-transform:uppercase;color:#9fb0d0;transition:color .16s ease}
.iebl-phero .above .topic:hover{color:var(--gold-2)}
.iebl-phero .chip{display:inline-flex;align-items:center;font-family:var(--disp);font-weight:600;
  font-size:11.6px;letter-spacing:.11em;text-transform:uppercase;color:#1c1403;background:var(--gold-2);
  padding:7px 12px;border-radius:7px}

/* byline. A gold arc monogram, NOT a headshot: there is no studio portrait of Anderson in the
   asset set and the field photos crop badly to a 44px circle. The mark is the logo's own device. */
/* the meta bar. v1 put the date, the read time and the topic in one dot-separated string pushed to
   the right, which read as a caption. Labelled cells read as designed, and they reuse the same
   label-over-value pattern as the money pages trust strip. */
.iebl-byline{display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:clamp(28px,3vw,40px);padding-top:24px;
  border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap}
.iebl-mono{width:46px;height:46px;flex:none;border-radius:50%;border:1.5px solid rgba(252,201,82,.55);
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:14.6px;
  color:var(--gold-2);letter-spacing:.04em;background:rgba(252,201,82,.09)}
.iebl-byline .who{display:flex;flex-direction:column;gap:2px}
.iebl-byline .who b{font-family:var(--disp);font-size:15.4px;color:#fff}
.iebl-byline .who span{font-size:12.8px;color:#9fb0d0}
.iebl-byline .left{display:flex;align-items:center;gap:14px}
.iebl-bmeta{display:flex;align-items:stretch}
.iebl-bmeta .b{padding-right:26px;margin-right:26px;border-right:1px solid rgba(255,255,255,.18)}
.iebl-bmeta .b:last-child{border-right:0;padding-right:0;margin-right:0}
.iebl-bmeta .k{display:block;font-family:var(--disp);font-weight:700;font-size:10.4px;
  letter-spacing:.15em;text-transform:uppercase;color:#8fa1c2}
.iebl-bmeta .v{display:block;font-family:var(--disp);font-weight:600;font-size:14.6px;color:#fff;
  margin-top:5px;white-space:nowrap}

/* ═════════════════════════ SINGLE 3. ARTICLE + SIDEBAR ═════════════════════════ */
.iebl-post{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(34px,4vw,64px);
  align-items:start}
/* ⚠ `min-width:0` is load-bearing. Below 560px the tables get their own horizontal scroller via
   `.iebl-table{min-width:440px}`, and a grid track's default `min-width:auto` let that 440px
   table push this whole column to 442px inside a 390px viewport, which put the entire ARTICLE
   into horizontal overflow. The scroller only contains the table if the column refuses to grow. */
.iebl-body{max-width:72ch;font-size:16.6px;line-height:1.78;min-width:0}
.iebl-body>p{margin:0 0 1.15em;color:#2b3448}
/* the lead paragraph carries the answer-first opening, so it gets the weight */
.iebl-body .iebl-lead{font-size:19px;line-height:1.66;color:var(--ink);font-weight:500}
.iebl-body h2{font-size:clamp(23px,2.3vw,30px);margin:2.1em 0 .6em;line-height:1.2;scroll-margin-top:96px}
/* the gold rule above each H2 is the site's own section device, shrunk to article scale */
.iebl-body h2::before{content:"";display:block;width:34px;height:2px;background:var(--gold);
  border-radius:2px;margin-bottom:16px}
.iebl-body h3{font-size:18.4px;margin:1.9em 0 .5em;scroll-margin-top:96px}
/* ⚠ prose links are navy with a gold underline. `.tel` MUST be excluded: the in-article CTA card
   is a navy panel, and a navy underlined phone number on it rendered as an invisible line. This is
   the same class of bug as ie.css's "light cards inside dark sections" reset, inverted. */
.iebl-body a:not(.btn):not(.tlink):not(.tel){color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.iebl-body a:not(.btn):not(.tlink):not(.tel):hover{color:var(--gold-ink)}
.iebl-body ul.iebl-list{list-style:none;margin:0 0 1.3em;display:grid;gap:11px}
.iebl-body ul.iebl-list li{position:relative;padding-left:30px;color:#2b3448}
.iebl-body ul.iebl-list li svg{position:absolute;left:0;top:5px;width:17px;height:17px;color:var(--gold)}

/* pull quote */
.iebl-pull{margin:2em 0;padding:0 0 0 24px;border-left:3px solid var(--gold);
  font-family:var(--disp);font-weight:500;font-size:20.5px;line-height:1.44;color:var(--navy)}

/* ── the two data tables. Real <table> markup: this is tabular data, so scope= is load-bearing */
.iebl-tw{margin:1.7em 0 2em;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface)}
.iebl-tw .cap{display:flex;align-items:center;gap:10px;padding:15px 20px;background:var(--canvas-2);
  border-bottom:1px solid var(--line);font-family:var(--disp);font-weight:600;font-size:12.4px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--navy)}
.iebl-tw .cap::before{content:"";width:13px;height:13px;flex:none;
  background:var(--ie-arc) center/contain no-repeat}
.iebl-table{width:100%;border-collapse:collapse;font-size:15px}
.iebl-table th,.iebl-table td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);
  vertical-align:top}
.iebl-table thead th{font-family:var(--disp);font-weight:700;font-size:11.8px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);background:#fdfcf9}
.iebl-table tbody th{font-weight:600;color:var(--ink);width:42%}
.iebl-table tbody tr:last-child th,.iebl-table tbody tr:last-child td{border-bottom:0}
.iebl-table tbody tr:hover{background:#fdfbf6}
.iebl-table td{color:var(--muted)}

/* ── the cost-range chart. The ONE real graphic on this page, drawn from the article's own
   figures. Each bar is positioned by percentage of a shared $0-$5,000 scale, so a reader can
   see that a capacitor and a compressor are not the same order of problem. `--a` and `--b` are
   the low and high ends as percentages, set inline per row by the page markup. */
.iebl-ranges{margin:1.7em 0 2em;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);overflow:hidden}
.iebl-ranges .cap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:16px 20px;background:var(--canvas-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.iebl-ranges .cap b{font-family:var(--disp);font-weight:600;font-size:12.4px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy)}
.iebl-ranges .cap span{font-size:12.4px;color:var(--muted)}
/* the four gridlines are the scale made visible: without them a bar's END is readable but its
   POSITION is not, and the whole point of a shared axis is comparing positions. Drawn on the row
   container so they run behind every track and line up with the .iebl-scale labels below, which
   share the same 20px inset. */
.iebl-rows{padding:8px 20px 18px;position:relative}
.iebl-rows::before{content:"";position:absolute;left:20px;right:20px;top:0;bottom:0;
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 25%);
  opacity:.55;pointer-events:none}
.iebl-r{position:relative}
.iebl-r{display:grid;grid-template-columns:1fr;gap:6px;padding:13px 0;border-bottom:1px solid var(--line)}
.iebl-r:last-child{border-bottom:0}
.iebl-r .lb{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.iebl-r .lb b{font-family:var(--disp);font-weight:600;font-size:14.4px;color:var(--ink)}
.iebl-r .lb span{font-family:var(--disp);font-weight:700;font-size:13.6px;color:var(--gold-ink);
  white-space:nowrap}
.iebl-track{position:relative;height:9px;border-radius:99px;background:var(--canvas-2);overflow:hidden}
.iebl-track i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);
  border-radius:99px;background:linear-gradient(90deg,var(--gold-2),var(--gold));min-width:5px}
/* the open-ended repairs ($2,000+) fade at the right edge instead of stopping on a hard cap */
.iebl-r.open .iebl-track i{background:linear-gradient(90deg,var(--gold-2),var(--gold) 72%,rgba(225,165,12,.25))}
.iebl-scale{display:flex;justify-content:space-between;padding:10px 20px 16px;
  border-top:1px solid var(--line);font-family:var(--disp);font-size:11.4px;color:var(--muted);
  letter-spacing:.06em}
.iebl-rnote{padding:0 20px 18px;font-size:13.4px;color:var(--muted);margin:0}

/* ── the five symptom cards. Same device as the money pages' `.sg2`, on light instead of dark */
.iebl-signs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:1.6em 0 2em}
.iebl-sign{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;
  position:relative;overflow:hidden;transition:border-color .2s ease,transform .2s ease}
.iebl-sign::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.iebl-sign:hover{border-color:var(--line-2);transform:translateY(-2px)}
.iebl-sign:hover::before{transform:scaleX(1)}
.iebl-sign .n{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--gold);line-height:1}
/* ⚠ h3, not h4: the cards sit under an h2, and h2 -> h4 is a skipped heading level. The selector
   has to out-specify `.iebl-body h3` (which owns the 1.9em prose rhythm) or the card titles
   inherit article spacing inside a 20px card. */
.iebl-body .iebl-sign h3{font-size:15.6px;margin:10px 0 8px;line-height:1.3;scroll-margin-top:0}
.iebl-body .iebl-sign h3::before{display:none}
.iebl-sign p{font-size:14.2px;color:var(--muted);margin:0;line-height:1.6}

/* ── the one in-article conversion card */
/* ⚠ NO ARC WATERMARK HERE. A 190px arc bled off the top-right corner first and the crop ran
   through one of the ring's gaps, so it read as a stray grey shape. On this layer the arc is
   always a 13px mark on a LABEL (.iebl-nav4 .lbl, .iebl-pillar .n, .iebl-tw .cap, .iebl-scard.go
   h4). The eyebrow's gold dash is this card's device. */
.iebl-cta{margin:2.2em 0;border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,#0a1c3f 0%,#143883 62%,#0f2a5e 100%);padding:28px 30px}
.iebl-cta h3{color:#fff;font-size:21px;margin:12px 0 0;max-width:28ch;position:relative}
.iebl-cta p{color:#bcc9e2;font-size:14.8px;margin:11px 0 0;max-width:46ch;position:relative}
.iebl-cta .row{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:20px;position:relative}
.iebl-cta .tel{font-family:var(--disp);font-weight:700;font-size:16px;color:#fff;
  display:inline-flex;align-items:center;gap:9px}
.iebl-cta .tel svg{width:17px;height:17px;color:var(--gold-2)}

/* ── quick answers. <details name> makes them an exclusive group natively; the chrome script
      hand-wires the fallback for browsers without it. */
.iebl-faq{margin:2.2em 0 0;border-top:1px solid var(--line-2)}
.iebl-faq details{border-bottom:1px solid var(--line)}
.iebl-faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink)}
.iebl-faq summary::-webkit-details-marker{display:none}
.iebl-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s ease}
.iebl-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.iebl-faq details[open] summary{color:var(--navy)}
.iebl-faq .ans{padding:0 30px 20px 0;color:var(--muted);font-size:15.2px;margin:0}

/* ── SIDEBAR ────────────────────────────────────────────────────────
   A FLOWING STACK PLUS ONE PINNED CARD. Three layouts were tried and the reasons matter, because
   this is the part of the page most likely to get "improved" back into a broken state.

     v1  whole rail `position:sticky`, 3 cards. Fine until the owner asked for recent articles and
         the topic list, at which point the rail measured 1,794px against an 884px window and three
         of the five cards were only reachable through a nested scrollbar. A sticky rail can only
         ever show what fits: CSS pins one element and anything after it in flow slides behind it.
     v2  nothing sticky, 4 cards. No scroll-jail, every card reachable, but on a 11,000px article
         the rail ends after 1,200px and leaves roughly 9,000px of empty right gutter.
     v3  THIS. The cards flow inside `.iebl-stack`, and ONE card sits in `.iebl-pin`, which is the
         last grid row and is stretched, so that card pins at the top of the viewport and rides
         down the rest of the article. Rich rail, no nested scrollbar, no empty gutter.

   The mechanics, because they are not obvious: `position:sticky` can only travel inside its own
   containing block. In a grid whose rows are packed to their content, an item's containing block IS
   its own height, so sticky does nothing. That is why the rail is `grid-template-rows:auto 1fr` with
   `align-self:stretch` on the rail itself, giving `.iebl-pin` a row as tall as the article, and
   `align-self:start` inside it so the card sits at that row's top rather than being stretched.

   ⚠ The pinned card is the SERVICE-PAGE card, not the $99 one. The conversion card has to be
   visible when the reader arrives, so it stays high in the flowing stack, and the in-article CTA
   plus the closing CTA cover the rest of the page. A third pinned CTA in the gutter would be three
   asks on one screen. */
.iebl-side{display:grid;grid-template-rows:auto 1fr;gap:16px;align-self:stretch}
.iebl-stack{display:grid;gap:16px;align-content:start}
.iebl-pin{position:sticky;top:96px;align-self:start}
.iebl-scard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
/* ⚠ the card labels are `<span class="lbl">`, NOT headings. As <h4> after a run of <h2>s they
   put a skipped level into the document outline for three strings that are UI furniture, not
   article structure. The TOC card's nav carries an aria-label instead. */
.iebl-scard>.lbl{display:block;font-family:var(--disp);font-weight:700;font-size:11.6px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
/* table of contents */
.iebl-toc{display:grid;gap:2px;counter-reset:toc}
/* one line per row. The label comes from the heading's `data-toc`, and `text-overflow` is the
   guard for a heading that forgets one: a wrapped two-line row is what made this rail overflow. */
.iebl-toc a{display:flex;gap:10px;align-items:baseline;font-size:13.8px;color:var(--muted);
  padding:9px 0;border-top:1px solid var(--line);line-height:1.4;transition:color .16s ease;
  white-space:nowrap;overflow:hidden}
.iebl-toc a span{overflow:hidden;text-overflow:ellipsis}
.iebl-toc a:first-child{border-top:0}
.iebl-toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);
  font-family:var(--disp);font-weight:700;font-size:11px;color:var(--line-2);flex:none;
  transition:color .16s ease}
.iebl-toc a:hover{color:var(--navy)}
.iebl-toc a[aria-current="true"]{color:var(--navy);font-weight:500}
.iebl-toc a[aria-current="true"]::before{color:var(--gold)}
/* the sidebar conversion card */
.iebl-scard.go{background:linear-gradient(150deg,#0a1c3f 0%,#143883 68%);border-color:transparent;
  position:relative;overflow:hidden}
.iebl-scard.go>.lbl{color:var(--gold-2);display:flex;align-items:center;gap:9px}
.iebl-scard.go>.lbl::before{content:"";width:13px;height:13px;flex:none;
  background:var(--ie-arc-l) center/contain no-repeat}
.iebl-scard.go .big{font-family:var(--disp);font-weight:700;font-size:28px;color:#fff;
  line-height:1.1;position:relative}
.iebl-scard.go p{color:#bcc9e2;font-size:13.8px;margin:10px 0 0;position:relative}
.iebl-scard.go .btn{margin-top:16px;width:100%;justify-content:center;position:relative}
.iebl-scard.go .tel{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;
  font-family:var(--disp);font-weight:600;font-size:14.4px;color:#fff;position:relative}
.iebl-scard.go .tel svg{width:15px;height:15px;color:var(--gold-2)}
.iebl-scard.go .fine{color:#93a3c4;font-size:12.2px;margin-top:12px;text-align:center;position:relative}
/* recent articles. Owner asked for related or recent posts in the rail, so this is the newest four
   from the registry with the current article excluded. Text rows, no thumbnails: five cards deep in
   a rail, images turn it into a wall. */
.iebl-recent{display:grid}
.iebl-recent a{display:block;padding:13px 0;border-top:1px solid var(--line)}
.iebl-recent a:first-child{border-top:0;padding-top:0}
.iebl-recent a:last-child{padding-bottom:0}
.iebl-recent .tag{font-family:var(--disp);font-weight:600;font-size:10.4px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-ink)}
/* span, not a heading: a rail list of article titles is navigation, and as <h4> after a run of
   <h2>s it puts a skipped level into the outline. The gate catches this, which is how it was found. */
.iebl-recent .t{display:block;font-family:var(--disp);font-weight:600;font-size:14.4px;
  line-height:1.36;margin:6px 0 0;color:var(--ink)}
.iebl-recent a:hover .t{color:var(--navy)}
.iebl-recent .d{display:block;font-size:11.8px;color:var(--muted);margin-top:5px}

/* the related-service card, the link back into the money page */
.iebl-svc{display:flex;gap:14px;align-items:center}
.iebl-svc img{width:74px;height:74px;border-radius:12px;object-fit:cover;flex:none}
.iebl-svc b{display:block;font-family:var(--disp);font-size:15.4px;color:var(--ink);line-height:1.3}
.iebl-svc span{display:block;font-size:13.2px;color:var(--muted);margin-top:5px}
.iebl-svc:hover b{color:var(--navy)}
/* topic list */
/* a second label inside a card, for the topic list under the recent-articles rows */
.iebl-scard .sublbl{display:block;margin:20px 0 12px;padding-top:16px;
  border-top:1px solid var(--line);font-family:var(--disp);font-weight:700;font-size:11.6px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.iebl-topics{display:flex;flex-wrap:wrap;gap:8px}
.iebl-topics a{font-family:var(--disp);font-weight:600;font-size:12.4px;color:var(--navy);
  border:1px solid var(--line-2);border-radius:999px;padding:8px 13px;transition:.16s ease}
.iebl-topics a:hover{border-color:var(--navy);background:var(--canvas)}

/* ═════ SINGLE 4. AUTHOR — v2 (owner pass, 2026-08-18) ═════
   Owner: the written-by idea is right, it needs to be a proper section, and it must NOT mention the
   licence or the reviews. So the four credential cells are GONE (GA CN211042, 4.8 stars, the review
   count, the hours). What is left is the person: a framed portrait, the name, what he actually does,
   and a way through to more of his writing.

   WARNING: do not re-add a credential row here. The money-page trust strip owns the credential
   stack for the whole site, and this section was asked to stop repeating it. The facts kept in the
   copy (since 2014, Black-owned and locally owned, installs Trane and RunTru, services every major
   brand, Atlanta and Decatur, still runs calls) are the same confirmed facts the footer carries and
   none of them is a licence or a rating claim. */
.iebl-author{display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(32px,4.4vw,66px);align-items:center}

/* the portrait, in the site's own offset-keyline frame device */
.iebl-aframe{position:relative}
.iebl-aframe img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 36%;
  border-radius:18px;position:relative;z-index:1}
/* the gold keyline sits BEHIND and offset, which is the frame device from the homepage intro. It is
   drawn with a border rather than a filled box so the cream ground shows through the offset. */
.iebl-aframe::after{content:"";position:absolute;left:18px;top:18px;right:-18px;bottom:-18px;
  border:1.5px solid rgba(252,201,82,.5);border-radius:18px;z-index:0}

.iebl-abody .role{display:flex;align-items:center;gap:9px;margin-top:12px;font-family:var(--disp);
  font-weight:600;font-size:12.4px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}
.iebl-abody .role::before{content:"";width:13px;height:13px;flex:none;
  background:var(--ie-arc-l) center/contain no-repeat}
.iebl-author h2{font-size:clamp(26px,2.8vw,38px);margin:16px 0 0;letter-spacing:-.02em}
.iebl-author p{color:#c3cfe6;margin:18px 0 0;max-width:60ch;font-size:15.8px}
/* the signature: the tagline the footer already uses, set in the display face */
.iebl-asig{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.iebl-asig .tag{font-family:var(--disp);font-weight:500;font-style:italic;font-size:16px;
  color:var(--gold-2)}
.iebl-asig .tlink{color:var(--gold-2)}

/* ═════════════════════════ RESPONSIVE ═════════════════════════ */
@media(max-width:1080px){
  /* minmax(0,1fr), not 1fr: see the min-width note on .iebl-body */
  .iebl-post{grid-template-columns:minmax(0,1fr);gap:44px}
  /* below 1080 the rail is a full-width block under the article, so it goes two-up and nothing
     pins: a sticky card inside a short block would pin for a few hundred pixels and then stop,
     which reads as a bug. The contents card spans both columns because its rows are single-line. */
  .iebl-side{display:block;align-self:auto}
  .iebl-stack{grid-template-columns:repeat(2,1fr)}
  .iebl-stack .iebl-scard.toc{grid-column:1/-1}
  .iebl-pin{position:static;margin-top:16px}
  .iebl-body{max-width:none}
  .iebl-hero .wrap{grid-template-columns:1fr;gap:34px;padding-bottom:170px}
  .iebl-nav4{max-width:560px}
  .iebl-fcard{margin-top:-110px}
  .iebl-grid{grid-template-columns:repeat(2,1fr)}
  .iebl-pillars{grid-template-columns:1fr;gap:14px}
  .iebl-author{grid-template-columns:220px minmax(0,1fr);gap:32px}
}
@media(max-width:860px){
  /* the feature card stacks: photo on top, so the photo needs a ratio instead of a min-height */
  .iebl-fcard{grid-template-columns:1fr;margin-top:-96px}
  .iebl-fcard .ph{min-height:0;aspect-ratio:16/9}
  .iebl-hero .wrap{padding-bottom:150px}
  .iebl-alsonew{grid-template-columns:1fr}
  .iebl-arow{padding:20px 0;border-right:0!important}
  .iebl-arow:not(:nth-child(3n)) + .iebl-arow{padding-left:0}
  .iebl-arow::after{right:0}
  .iebl-author{grid-template-columns:1fr;gap:26px}
  .iebl-aframe{max-width:300px}
}
@media(max-width:760px){
  .iebl-grid{grid-template-columns:1fr}
  .iebl-side{grid-template-columns:1fr}
  .iebl-signs{grid-template-columns:1fr}
  .iebl-tw{border-radius:12px}
  .iebl-phero .iebl-byline{flex-direction:column;align-items:flex-start;gap:18px}
  .iebl-phero .iebl-bmeta{width:100%}
  /* the range chart keeps its label above the number on narrow screens */
  .iebl-r .lb{flex-direction:column;gap:3px;align-items:flex-start}
}
@media(max-width:560px){
  .iebl-body{font-size:16px}
  .iebl-body .iebl-lead{font-size:17.6px}
  .iebl-fcard .bd{padding:22px}
  .iebl-cta{padding:24px 22px}
  .iebl-hero .wrap{padding-bottom:126px}
  .iebl-fcard{margin-top:-70px;border-radius:16px}
  /* the three-part meta wrapped one cell per line at 390px, which read as a broken table. Tighter
     tracking was not enough: at 10.8px uppercase the three cells still need about 360px against 300
     of content. The topic cell is the one to drop, because the card already carries a category chip
     over the photo, and date plus read time fit comfortably. */
  .iebl-fcard .iebl-meta{letter-spacing:.05em;font-size:11px;gap:8px}
  .iebl-fcard .iebl-meta .t3{display:none}
  .iebl-bmeta{gap:0}
  .iebl-bmeta .b{padding-right:16px;margin-right:16px}
  /* the table gets its own scroller rather than squeezing two columns into 320px */
  .iebl-tw{overflow-x:auto}
  .iebl-table{min-width:440px}
}
@media(prefers-reduced-motion:reduce){
  .iebl-fcard:hover .ph img,.iebl-pillar:hover,.iebl-sign:hover,.iebl-fcard:hover{transform:none}
  .iebl-readbar i{transition:none}
}