/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Indoor Experts — HOMEPAGE layer (`ie-hm.css`), built 2026-08-20.

   WHY THIS FILE EXISTS.
   On 2026-08-17 the money pages moved to the v16 section language (`ie-v16.css`) after the owner
   called the previous money-page design "not good enough". That rollout reached 100 of 112 pages.
   The homepage was deliberately left on the older `ie.css` language so the rollout could not
   regress it, and it never got its own pass. The result is a page that reads new-top / old-middle:
   the hero and the reviews carousel were rebuilt on 2026-08-20, the four sections between them
   were not. This layer is that pass.

   IT IS NOT A NEW DESIGN DIRECTION. Every device here is the v16 vocabulary, which is already
   approved and shipping on 100 pages:
     · the IE ARC (the broken ring from the logo) as the section mark, never a diamond and never a
       star. The owner rejected a gold diamond on 2026-08-17 as "feels copy of alamo".
     · the gold cap / gold rule that the live site already puts on its feature cards
     · alternating rows against a hairline rail, cutout outside, copy inside
     · sections that DO something instead of paragraphs in a box
   `--ie-arc`, `--gold-ink`, `.chap`, `.factrow` and `.faq-2col` all come from `ie-v16.css`, so
   THE HOMEPAGE MUST LINK ie-v16.css BEFORE THIS FILE or the marks render as nothing and the
   uppercase gold links drop to a 2.1:1 contrast failure.

   ⚠ NO SHAPED SEAMS. `.seamtop`/`.seambot` were built, eight variations were shown at
   `_concepts/divider-variations.html`, and the owner's answer was to drop the device entirely.
   Sections meet on a flat edge and the cream / white / dark rhythm carries the transitions.
   Do not re-add one without an explicit ask.

   ⚠ COLLISION CHECK RUN BEFORE LINKING v16 HERE. Of 22 classes v16 declares that the homepage
   already uses, 21 are scoped under a v16-only parent (`.chap .d`, `.syi .u`, `.spask .ph`,
   `.own-media .frame`, `.ownr .wrap` ...) and cannot reach homepage markup. The one bare
   collision is `.bcard`, and its effect is the intended upgrade: v16 adds the gold underline
   sweep to the blog cards this page already has. Re-run that check before linking any further
   layer here — two IE pages were previously broken by exactly this class of surprise.

   ⚠ NOT ONE INVENTED FACT. Every heading, sentence, figure and link label below is carried over
   verbatim from the homepage as it stood, or from a page already in this build. The two content
   corrections are both DELETIONS of things we cannot stand behind, documented at each site.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ───────── 0. CHAPTER MARKER ON A LEFT-ALIGNED HEAD ─────────
   ⚠ REQUIRED, not cosmetic. v16's `.chap` is `display:flex; justify-content:center` because every
   page that uses it puts it inside `.head.center`. Three of the four markers on this page sit in
   an ordinary LEFT-aligned `.head`, where a full-width flex container centres the marker over
   copy that starts at the left margin — it reads as a mistake. Shrink-wrapping it to its content
   puts it back on the left edge without touching the centred case, which the FAQ still uses.
   Scoped to `:not(.center)` so the FAQ's centred marker is untouched, and it lives in this
   homepage-only file so no v16 page can be affected. */
.head:not(.center) > .chap{display:inline-flex;justify-content:flex-start}

/* ───────── 0b. INLINE PROSE LINK (`.ilink`) ─────────
   ⚠ REQUIRED. The reset is `a{color:inherit;text-decoration:none}`, so a bare anchor dropped into a
   paragraph is INVISIBLE — indistinguishable from the body text around it. Everywhere else on the
   site prose links are styled by their container (`.sgx-links a`, `.ans a`), and the homepage intro
   has no such container, so the one link added there needs its own hook. Navy with a gold underline
   is the same relationship those container rules use, inverted for a light background. */
.ilink{color:var(--navy);font-weight:600;
  border-bottom:1px solid rgba(225,165,12,.55);transition:border-color .18s ease,color .18s ease}
.ilink:hover{color:var(--navy-ink);border-bottom-color:var(--gold)}

/* ───────── 1. SERVICE FAMILIES — alternating chapter rows (`.hmsv`) ─────────
   Replaces three image-top cards in a row, which was the most templated device on the site and
   the main reason the page read as dated. It is NOT the v16 `.syrail`: that rail carries nine thin
   items (a name and two lines each), and these three carry a five-line paragraph plus a five-link
   list, so at rail width every list item would wrap and the section would read as a wall. Same
   vocabulary at the right scale: full-width alternating rows, the photo on the outside and the
   copy inside, one arc node on each seam.
   ⚠ The three photographs are the ones already on this section (F01 gauges / F04 burner / H03 IAQ
   hero). They are fact-checked and owner-approved. No new imagery is introduced here. */
.hmsv{margin-top:clamp(44px,4.6vw,72px);display:grid;row-gap:0}
.hmsv-i{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  column-gap:clamp(30px,4.2vw,68px);align-items:center;
  padding:clamp(34px,3.6vw,54px) 0}
/* the seam between rows: a hairline that fades at both ends so it reads as a join, not a border,
   with the arc node sitting on it. Only BETWEEN rows, never above the first or below the last. */
.hmsv-i + .hmsv-i::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,165,12,.42) 12%,
    rgba(225,165,12,.42) 88%,transparent)}
/* ⚠ the node carries a surface-coloured disc under the arc, same as the v16 rail node. The mark is
   a ring: without the disc the hairline runs straight through its middle and out through both
   gaps, which reads as a line crossed by a circle rather than a node on a line. This section sits
   on `.sec-white`, so the disc is --surface here, NOT --canvas. */
.hmsv-i + .hmsv-i::after{content:"";position:absolute;left:50%;top:0;width:20px;height:20px;
  transform:translate(-50%,-50%);z-index:2;border-radius:50%;
  background-color:var(--surface);background-image:var(--ie-arc);
  background-size:20px 20px;background-position:center;background-repeat:no-repeat}

/* the media column. A fixed aspect so the three rows keep the same rhythm whatever the copy does. */
.hmsv-ph{position:relative;border-radius:18px;overflow:hidden;background:var(--canvas-2)}
.hmsv-ph img{width:100%;aspect-ratio:16/11;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.hmsv-i:hover .hmsv-ph img{transform:scale(1.035)}
/* the family label sits ON the photo, which is where this section already put it.
   ⚠ FIXED after the first render: it was pinned to `left:0;bottom:0` with a corner radius of
   `0 12px 0 0`, so its two square corners stuck out past the photo's own 18px rounding and the
   frame looked broken at the bottom-left. This is now the geometry `.bcard .chip` already uses for
   the blog cards on this same page — inset from the corner, full pill, translucent warm ground —
   so the two photo captions on the page match instead of being two different devices. */
.hmsv-ph .n{position:absolute;left:14px;bottom:14px;
  background:rgba(250,248,243,.94);backdrop-filter:blur(4px);border-radius:999px;
  padding:6px 14px;
  font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-ink)}

/* ⚠ NO GHOST NUMERAL IN THIS SECTION, and that is a decision, not an omission. Two builds of one
   were rendered and both failed, for different reasons:
     v1  positioned against `.hmsv-i` on the outer edge, copying v16's `.syi .gn`. That works on a
         `.syi` because the media is a transparent PNG on a radial tint, so a numeral behind it is
         texture. Here the media is an OPAQUE photograph, and an absolutely-positioned element with
         `z-index:0` paints above a static sibling, so on the mirrored rows the numeral rendered as
         two pale blobs sitting on top of the furnace photo.
     v2  moved into the copy column behind the heading. Off the photo, but the free top half of the
         glyph stood in the empty gap under the seam with nothing to sit behind, which reads as a
         stray mark rather than as a watermark. Shrinking and re-tucking it moved the problem
         around without solving it.
   It was then cut, because it was never carrying anything: each row is ALREADY named by its pill
   ("Cooling" / "Heating" / "Air quality"), and the section head is already chapter `01 / WHAT WE
   DO`, so a second 01-02-03 inside chapter 01 is a numbering collision on top of a rendering
   problem. The v16 vocabulary in this section is the alternating rows, the arc node on the seam,
   the pill and the ruled link lists, which is plenty.
   ⚠ If a numeral is ever wanted back here, put it IN THE PILL ("01 · COOLING", which is what this
   section had before the rebuild) rather than floating it as a watermark. */
.hmsv-bd{min-width:0;position:relative;z-index:1}
.hmsv-bd h3{font-size:clamp(21px,2.1vw,27px);color:var(--navy);line-height:1.2;
  letter-spacing:-.018em}
.hmsv-bd > p{font-size:15.6px;line-height:1.66;color:var(--muted);margin:14px 0 0;max-width:52ch}
/* the link list: a ruled column, which is the device the live site already uses for its own
   in-card lists. The gold marker on hover is the same one v16 puts on `.bcard`. */
.hmsv-bd ul{list-style:none;margin:22px 0 0;padding:0;
  border-top:1px solid var(--line);display:grid}
.hmsv-bd li{border-bottom:1px solid var(--line)}
.hmsv-bd li a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 2px;font-family:var(--disp);font-weight:600;font-size:14.6px;color:var(--ink);
  position:relative;transition:color .18s ease,padding-left .18s ease}
.hmsv-bd li a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:center;transition:transform .22s ease}
.hmsv-bd li a:hover{color:var(--navy);padding-left:12px}
.hmsv-bd li a:hover::before{transform:scaleY(1)}
.hmsv-bd li svg{width:15px;height:15px;flex:none;color:var(--gold);transition:transform .2s ease}
.hmsv-bd li a:hover svg{transform:translateX(3px)}

/* mirror the even row. Grid ORDER, not `row-reverse`: the arrows on the link rows must keep
   pointing right. Reversed, they read as "go back". */
.hmsv-i:nth-child(even) .hmsv-ph{order:2}
.hmsv-i:nth-child(even) .hmsv-bd{order:1}

@media(max-width:900px){
  /* one column, so the mirroring and the centre node go: there is no centre line to hang the node
     on. The seam hairline stays, because the rows still need separating. */
  .hmsv-i{grid-template-columns:1fr;row-gap:24px;padding:34px 0}
  .hmsv-i + .hmsv-i::after{display:none}
  .hmsv-i:nth-child(even) .hmsv-ph{order:0}
  .hmsv-i:nth-child(even) .hmsv-bd{order:0}
  .hmsv-bd > p{max-width:none}
}

/* ───────── 2. THE SIX PROMISES — numbered cards (`.hmpl`) ─────────
   Replaces a 3x2 grid of bare text in hairline cells: the only section on the page with no graphic
   element of any kind, which the brand rules do not allow anyway. Same six items, same copy, now
   on the site's own card device — gold numeral, gold cap on hover — over a single arc watermark
   that gives the section its graphic without adding six icons. The owner has asked twice for FEWER
   icons, so the numerals carry the counting and nothing is illustrated. */
.hmpl-w{position:relative}
/* ⚠ THE CLIP GOES ON THE SECTION, NOT ON `.hmpl-w`. The watermark is bled past the right edge of
   the 1220px wrap, so something must clip it or it widens the document and the whole page gets a
   horizontal scrollbar. It cannot be `.hmpl-w` itself: the cards inside lift 2px and cast a 40px
   shadow on hover, and clipping at the wrap's own edge shears that off the outer column. At
   section level the cards sit well inside the clip and only the watermark is cut. */
.hmpl-sec{overflow:hidden}
/* the watermark: ONE arc, large, low-contrast, bled off the right edge.
   ⚠ It is behind the cards on z-index and pointer-events:none, or it eats the hover on the
   top-right card. */
.hmpl-w::before{content:"";position:absolute;right:-88px;top:-46px;width:376px;height:376px;
  background:var(--ie-arc) center/contain no-repeat;opacity:.05;z-index:0;pointer-events:none}
.hmpl{position:relative;z-index:1;margin-top:clamp(38px,4vw,58px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hmpl-c{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:28px 26px 26px;overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
/* the gold cap. The live site rules its feature cards in gold; this is that device, animated. */
.hmpl-c::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}
.hmpl-c:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.hmpl-c:hover::before{transform:scaleX(1)}
.hmpl-c .n{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.14em;
  color:var(--gold-ink);display:flex;align-items:center;gap:9px}
/* the arc, small, beside the numeral. One mark per card, which is the counting device. */
.hmpl-c .n::before{content:"";width:14px;height:14px;flex:none;
  background:var(--ie-arc) center/contain no-repeat}
.hmpl-c h3{font-size:18.6px;color:var(--navy);line-height:1.26;letter-spacing:-.014em;
  margin:16px 0 0}
.hmpl-c p{font-size:14.9px;line-height:1.64;color:var(--muted);margin:11px 0 0}
@media(max-width:980px){.hmpl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .hmpl{grid-template-columns:1fr;gap:12px}
  .hmpl-c{padding:24px 22px}
  .hmpl-c h3{font-size:17.4px}
  .hmpl-w::before{width:280px;height:280px;right:-110px;top:-40px}
}

/* ───────── 3. SERVICE AREA — the metro grid (`.hmar`) ─────────
   The section this replaces told the pre-2026-08-18 geo story: nine in-city neighbourhoods as
   PLAIN TEXT (no links at all) and a stat card asserting "Decatur / Our one city stop". The owner
   ruling of 2026-08-18 expanded scope to the full metro set and 27 `hvac-contractor-*` pages are
   now built, so that card contradicted 27 of the site's own pages.
   Now two honest groups: the in-city neighbourhoods stay plain text BECAUSE THEY HAVE NO PAGES,
   and the metro cities are links because they do. The distinction is real and it is visible.
   ⚠ The counts on this section are COMPUTED from the build, not typed from memory. If a city page
   is added or removed, they have to be recomputed. */
/* ⚠ THE CHIP FIELD SPANS BOTH COLUMNS. `.areagrid` is a 2-col `align-items:center` grid, and 34
   chips in the left cell made that column roughly 900px against a 560px photo, so the right cell
   ended with ~340px of dead space beside them and the section ran needlessly long. Full width
   below the row, the chips wrap into 3-4 per line instead of 2-3, the section gets shorter, and
   the photo keeps its own row with the copy where it was designed to sit.
   `grid-column:1/-1` is what does it; the margin re-establishes the gap the row no longer gives. */
/* ⚠ ROW-GAP MUST GO TO ZERO HERE. `.areagrid` sets `gap:clamp(34px,4.4vw,66px)`, which is a
   COLUMN gap by intent but applies to rows too. Once the chips and the CTA became full-width rows,
   that 63px landed on top of each element's own margin and opened ~90px holes above the chip field
   and above the button. Zeroing the row gap and letting the two margins below do the spacing gives
   one predictable rhythm instead of two that add up. The column gap is untouched. */
.areagrid{row-gap:0}
.areagrid > .hmar-groups{grid-column:1/-1;margin-top:clamp(26px,2.6vw,40px)}
.hmar-groups{display:grid;gap:24px}
/* the CTA follows the list it belongs to. It sat ABOVE the chips when they were still inside the
   left column, which read as "check your address, and here is a list" instead of the other way. */
.areagrid > .hmar-cta{grid-column:1/-1;margin-top:26px}
.hmar-g > .lb{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:11px}
.hmar-g > .lb::after{content:"";height:1px;flex:1;background:var(--line)}
/* the chip field. Plain-text areas and linked areas share one shape so the group reads as one
   list; only the linked ones take a hover and a gold dot, which is the whole distinction. */
.hmar-l{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hmar-l li{font-size:14.2px;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;background:var(--surface);line-height:1.5}
.hmar-l li.has{border-color:var(--line-2);transition:border-color .18s ease,transform .18s ease}
.hmar-l li.has a{color:var(--navy);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.hmar-l li.has:hover{border-color:var(--gold);transform:translateY(-1px)}
.hmar-l li.has a::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
  flex:none;opacity:0;transition:opacity .18s ease}
.hmar-l li.has:hover a::after{opacity:1}
@media(max-width:640px){.hmar-l li{font-size:13.5px;padding:5px 12px}}

/* ───────── 4. DARK-SECTION BACKDROPS — no CSS here, on purpose ─────────
   The two dark sections that had no backdrop (story, maintenance) were given one on 2026-08-20 using
   `ie.css`'s OWN `.secbg` + `.bgq` device. Nothing was added to this file for them and nothing
   should be: the grade, the object-position and the narrow-viewport floor are all tuned in `ie.css`
   v10/v24 with the contrast measurements that justify each alpha, and a homepage-local override
   would fork that tuning where nobody would look for it.

   🔑 THE ONE THING TO CARRY FORWARD IS A FRAME-SELECTION RULE, recorded here because it cost a
   rebuild: A BACKDROP FRAME MUST CARRY NO LEGIBLE TEXT. `V01_van_hero_golden` was the first pick for
   the story section and it has no people in it, which is the rule everyone already knows. It still
   failed — high-contrast LETTERING survives a .94 grade when faces and fine detail do not, so the
   van's "HVAC Contractors / Sales - Service - Installation / Lic# CN211042" read straight through
   the grade and put a second block of text under the real copy.
   That disqualifies every van and signage frame for backdrop use: V01, T01, B01, U01.
   ⚠ NO GATE CATCHES THIS. `bgcontrast.mjs` passed 10/10 on the bad version and `darkaudit.mjs` only
   asks whether a backdrop EXISTS. It is a screenshot-only check, the same class of defect as the
   back-of-head rule in `_shared/imagery-banlist.json`. */

/* ───────── 5. HERO BACKDROP (`.hero.has-bgw`) ─────────
   Added 2026-08-20 on owner instruction. darkaudit had the hero in category B and I argued it was a
   deliberate composition; the owner's call is that it gets a backdrop like every other dark section.

   ⚠ WHY THIS IS NOT JUST `class="hero secbg bgq"`. Two reasons, both load-bearing:
   1. `.secbg > .bgw::after` paints the DEFAULT radial grade, which opens to .62 at 86% 0% — the
      top-right — and that is precisely where `.hmedia`'s portrait sits. Photo over photo.
      `.bgq` fixes the grade but only as `.secbg.bgq`, so taking `.bgq` means taking `.secbg` too.
   2. `.hero` has already spent BOTH pseudo-elements on its own glows (ie.css:97 gold top-right,
      ie.css:412 white bottom-left). Nothing here may use `.hero::before/::after`, so the grade has
      to live on the wrapper's own `::after`, which is what `.secbg` does anyway.
   So: replicate the `.bgq` treatment on a hero-scoped class. The alphas below are COPIED from
   `.secbg.bgq` in ie.css, not re-invented — if that block is ever retuned, retune this with it.
   ⚠ `isolation:isolate` is the one thing `.secbg` contributes that is actually needed: without it
   the `z-index:-2` layer escapes `.hero` and paints behind the page background, so the backdrop
   disappears entirely. `.hero` already has position:relative and overflow:hidden. */
.hero.has-bgw{isolation:isolate}
.hero > .bgw{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* ⚠ `object-position` is 50% 50%, not the .bgq default of 50% 34%. The frame is pre-cropped to 16:9
   for this slot, so there is very little vertical crop left to bias — pushing it up just clips the
   truck bottoms. If the frame is ever swapped for an uncropped one, re-check this. */
.hero > .bgw img{width:100%;height:100%;object-fit:cover;opacity:.85;object-position:50% 50%}
.hero > .bgw::after{content:"";position:absolute;inset:0;background:linear-gradient(168deg,
  rgba(10,28,63,.94) 0%,rgba(12,34,76,.91) 50%,rgba(11,31,69,.95) 100%)}
/* Narrow viewports get the heavier floor, same reasoning as ie.css's own `.secbg` mobile override:
   once the hero stacks to one column there is no empty region for the photo to breathe into, and
   the H1 goes full-bleed over the middle of the frame. */
@media(max-width:700px){
  .hero > .bgw::after{background:linear-gradient(168deg,
    rgba(10,28,63,.96) 0%,rgba(12,34,76,.94) 50%,rgba(11,31,69,.97) 100%)}
}

/* ───────── 6. THE OWNER SECTION (`.hmown`) — homepage slot 5 ─────────
   Replaces the old `.story` layout on this section. The WHY is in the HTML comment on the section
   itself; the short version: slot 3 and slot 5 were the same section built twice, and this one now
   does the job both sibling homepages give it — the owner, in his own voice — while slot 3 does
   the company. To keep them from rhyming they must not share an anatomy, so slot 3 stays
   narrative-prose-led and this is QUOTE-LED: one large sourced quote is the whole payload.

   ⚠ THE `.story` CLASS WAS DROPPED FROM THE SECTION, so ie.css's `.story .wrap` grid,
   `.story .pic img` aspect and `.story .pic .yr` badge no longer reach it. The badge is restyled
   below. `.secbg` and `.bgq` STAY on the section — they are the backdrop machinery, not layout.
   ⚠ COLUMN ORDER IS INTENTIONALLY THE SAME AS THE OLD SECTION (photo left, copy right). The twin
   defect was shared ANATOMY, not shared mirroring — flipping this would only churn the page.
   ⚠ `.pull` is BARE in ie.css (line 211) and is deliberately NOT used here: it is the same gold
   left-bar device slot 3's `.introquote` uses, and reusing it is what made the two read as one
   section. The quote mark glyph replaces it as this section's accent. */
.hmown-sec .wrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(36px,4.6vw,74px);
  align-items:center}
/* the portrait. Slightly less tall than the old `.story .pic` 4/4.6 so the taller copy column
   (quote + attribution + closing line + button) does not leave the photo short. */
.hmown-pic{position:relative}
.hmown-pic img{width:100%;border-radius:20px;aspect-ratio:4/4.4;object-fit:cover;
  object-position:35% 40%;border:1px solid var(--line)}
/* the year badge, carried over from `.story .pic .yr` unchanged in look — it is the section's
   second graphic and the only datum in here. */
.hmown-pic .yr{position:absolute;right:-14px;bottom:-14px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);
  text-align:center}
.hmown-pic .yr b{display:block;font-family:var(--disp);font-weight:700;font-size:26px;
  color:var(--navy);line-height:1}
.hmown-pic .yr span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
/* the H2 is deliberately SMALLER than the page's other section headings (clamp 27-41px). It is a
   framing label — "In Anderson's own words" — and the quote under it is the thing that should be
   read first. Letting them compete is how the section ends up looking like slot 3 again. */
.hmown-bd h2{font-size:clamp(21px,2.1vw,27px);margin:14px 0 0;letter-spacing:-.01em}
/* THE QUOTE. This is the section. `blockquote` is only styled under `.rvcar .qcard` in ie.css, so
   margins have to be reset here. */
.hmown-q{margin:22px 0 0;padding:0;position:relative}
.hmown-q .qm{width:clamp(34px,3.8vw,46px);height:auto;color:var(--gold-2);opacity:.7;
  display:block;margin:0 0 2px;margin-left:-2px}
.hmown-q p{font-family:var(--disp);font-weight:600;font-size:clamp(21px,2.5vw,31px);
  line-height:1.34;letter-spacing:-.015em;color:#fff;max-width:30ch;margin:0}
/* attribution. Reads as a signature, so it is ruled off above rather than boxed. */
.hmown-at{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.hmown-at b{display:block;font-family:var(--disp);font-weight:700;font-size:15.5px;color:#fff;
  line-height:1.2}
.hmown-at span{font-size:13.2px;color:#a9b7d2}
/* the closing beat, quieter than the quote on purpose. `.sec-dark p` already sets #bcc9e2. */
.hmown-cl{font-size:16px;line-height:1.66;margin:30px 0 0;max-width:50ch}
@media(max-width:960px){
  .hmown-sec .wrap{grid-template-columns:1fr;gap:44px}
  .hmown-pic{max-width:440px}
  /* the badge hangs off the right edge; once the photo is capped and left-aligned that overhang
     can leave the viewport on the narrowest phones. */
  .hmown-pic .yr{right:0}
}

/* ───────── 7. THE COMPANY SECTION (`.hmco`) — homepage slot 3, composition Q ─────────
   Owner picked Q from `_concepts/company-variations.html` (round M–Q) on 2026-08-21: the photo
   bleeds off the LEFT edge of the viewport and the copy sits in a raised card overlapping it.
   Replaces the two-column `.intro` layout on this ONE section. Slot 5 (`.hmown`, block 6) is
   untouched and must stay quote-led — that contrast is what stops the two sections rhyming, which
   is the whole reason rounds A–L kept failing. See the section comment in homepage/index.html.

   🔴 THE BLEED IS A REAL FULL-BLEED AND HAD TO BE. In the concept page the stage was ~1312px wide,
   so cancelling the wrap's 28px padding LOOKED like a bleed. On the real page `--wrap` is 1220px,
   so at a 1440 viewport the wrap is centred with a 110px gutter and cancelling only the padding
   would leave a 110px gap on the left — which reads as a bug, not a bleed. So `.wrap` is overridden
   here to be full width and the grid is declared locally.
   ⚠ `.hmco .wrap` is (0,2,0), which is what beats ie.css's BARE `.wrap` at (0,1,0). Do not weaken
   it to a single class — that is the documented `.intro .wrap` trap in the other direction.
   🔑 NO `100vw` ANYWHERE, deliberately. On Windows `100vw` includes the scrollbar, and a
   `100vw`-based negative margin is the classic way to introduce the horizontal scroll this build
   gates against. The right padding below does the same job with percentages, which resolve against
   the SECTION width here (the wrap is the percentage's containing block) and exclude the scrollbar.
   ⚠ AND NO `overflow:hidden` ON THE SECTION, also deliberate. Nothing actually escapes — the photo
   starts at exactly x=0 and its rounded corner is on its own right edge. Adding the clip would buy
   nothing and would crop the card's 60px box-shadow on narrow viewports. */
.hmco{padding:clamp(52px,6.6vw,98px) 0}
/* padding-right keeps the card's right edge on the SAME vertical as every other section's content
   right edge: (section - wrap)/2 + the wrap's own 28px gutter. `max()` floors it at 28px so it
   never goes negative below 1220px.

   🔴 padding-LEFT CAPS THE BLEED, and it is not optional — an UNCAPPED bleed was the owner's
   rejection on 2026-08-21. Running the photo to the true viewport edge is fine at 1440, but on a
   wide monitor the photo detaches from the page's centred 1220px column and starts hundreds of px
   left of where every other section begins. The section stops looking related to the page.
   The cap makes the overhang CONSTANT instead of viewport-proportional. For any width W ≥ 1680:
     photo left        = (W - 1680)/2
     content left      = (W - 1220)/2 + 28
     overhang          = (1680-1220)/2 + 28 = 258px, independent of W
   Below 1680 the `max(0px, …)` floors it and you get a genuine viewport-edge bleed, with the
   overhang tapering naturally to 28px at 1220. It is continuous at W=1680 — no jump.
   ⚠ 1680 IS THE ONE NUMBER TO TUNE. Raising it lets the photo run further out on big screens;
   lowering it pulls the composition tighter to the text column. Do not instead cap the photo's
   own width — that leaves dead background between the photo and the card, which is worse. */
.hmco .wrap{max-width:none;margin:0;padding:0;
  padding-left:max(0px,calc((100% - 1680px) / 2));
  padding-right:max(28px,calc((100% - 1220px) / 2 + 28px));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
/* the photo, flush to the viewport's left edge. `border-left:0` because there is no left edge to
   draw — a hairline there would sit half off-screen and read as a rendering artefact. */
.hmco-ph{border-radius:0 20px 20px 0;overflow:hidden;border:1px solid var(--line);border-left:0}
.hmco-ph img{width:100%;aspect-ratio:4/4.2;object-fit:cover;object-position:46% 42%;display:block}
/* the card. The overlap is the whole idea, so it gets the raised shadow and sits above the photo. */
.hmco-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 28px 60px rgba(11,31,69,.16);padding:clamp(26px,3vw,44px);
  margin-left:clamp(-88px,-6vw,-40px);position:relative;z-index:2}
.hmco-card h2{font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 0;
  max-width:21ch}
/* the lede keeps `.intro`'s 19px promotion — this is the narrative and it should read first. */
.hmco-card .nar{font-size:19px;color:var(--ink);line-height:1.52;margin:18px 0 0}
.hmco-card .tr8{font-size:16.4px;color:#3d4757;line-height:1.62;margin:16px 0 0}
/* the turn line. Ruled and set as TYPE, NOT as a bordered pull-quote box and NOT with a quote
   mark: `.introquote`'s gold-bar box and slot 5's quote mark are both off-limits here, because
   sharing either device is exactly what made slot 3 and slot 5 read as one section. */
.hmco-turn{font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.55vw,20px);
  line-height:1.4;color:var(--navy);letter-spacing:-.01em;margin:20px 0 0;padding-top:18px;
  border-top:1px solid var(--line)}
.hmco-sig{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line)}
/* ⚠ NO `object-position` override. The source is a square crop of a square cutout and the slot is
   square, so `object-fit:cover` crops nothing — same reasoning as the old `.intro .sig`. */
.hmco-sig img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.hmco-sig b{font-family:var(--disp);font-size:15px;color:var(--navy);display:block;line-height:1.2}
.hmco-sig span{font-size:13px;color:var(--muted)}
/* Stacks at 1000px, NOT the usual 700px, because the card is wide: below ~1000 the overlap would
   squeeze the photo into a sliver. Stacked, the photo goes edge-to-edge (both sides, so it is not
   lopsided) and the card insets itself and rides up over the photo's bottom. */
@media(max-width:1000px){
  .hmco .wrap{grid-template-columns:1fr;padding-right:0}
  .hmco-ph{border-radius:0;border-left:0;border-right:0}
  .hmco-ph img{aspect-ratio:4/2.9}
  .hmco-bd{padding:0 clamp(16px,4vw,28px)}
  .hmco-card{margin-left:0;margin-top:-44px}
}

/* ───────── 8. HOW-IT-WORKS: KILL THE DEAD SPACE UNDER THE RIGHT COLUMN ─────────
   Owner, 2026-08-21: "on the right part there should not be the empty space". Measured before
   touching anything: the RIGHT column (`.procside`) ended **194px ABOVE** the left column, because
   `.procgrid` is `align-items:start` and the left column is a ~720px FieldEdge iframe that is taller
   than three steps. So the section rendered with a visible hole at the bottom-right.

   🔴 WHY NOT `justify-content:space-between` ON THE STEPS, the obvious fix: every `.vstep` carries a
   `border-bottom` and the first a `border-top` (ie.css:505-507), so they read as ONE continuous
   ruled list. Distributing the steps would push gaps BETWEEN the rules and leave them stranded in
   mid-air — worse than the hole it fixes.
   ✅ WHAT THIS DOES INSTEAD: stretch the row heights, not the gaps. `grid-auto-rows:1fr` makes every
   step row take an equal share of the available height; each `.vstep` keeps `align-items:start` so
   its text stays top-aligned while its bottom rule travels to the bottom of the taller row. The
   rules stay continuous AND the column fills. `1fr` on auto rows is `minmax(auto,1fr)`, so a row can
   never be squeezed below its own content.
   ⚠ `grid-auto-rows`, NOT `grid-template-rows:repeat(3,1fr)`. `.vsteps` declares no explicit rows, so
   every step is an implicit row — this keeps working if a 4th step is ever added. A hardcoded
   repeat(3) would drop the 4th into an unsized auto row.

   ⚠ SCOPING, and it matters: `.procgrid` is HOMEPAGE-ONLY (1 page) but **`.vsteps` is on 2 pages**,
   so the `.vsteps` rule is scoped under `.procgrid` to keep the other page byte-identical. And per
   the standing convention this lives in ie-hm.css — `ie.css` is NOT touched. */
.procgrid{align-items:stretch}
.procgrid .procside{display:flex;flex-direction:column}
.procgrid .vsteps{flex:1 1 auto;grid-auto-rows:1fr}
/* Stacked, there is no second column to match, so stretching would just inflate the steps against
   nothing. Hand it back to content height below the grid's own stacking breakpoint.
   ⚠ 960px, NOT 900 — that is where ie.css:623 actually collapses `.procgrid` to one column (and
   reorders `.procside` above `.qform`). A 900px guard here would leave the stretch active across the
   901–960 band, where there is no second column to match. Checked, not assumed. */
@media(max-width:960px){
  .procgrid .procside{display:block}
  .procgrid .vsteps{grid-auto-rows:auto}
}