/* ═══════════════════════════════════════════════════════════════════════════════════════════ Indoor Experts — v16 layer: SERVICE-PAGE REDESIGN (AC Repair is the canonical page) Built 2026-08-17 after the owner called the money-page design "not good enough" and pointed at the Alamo Comfort AC-repair page as the quality bar. WHAT THIS IS AND IS NOT. It is NOT a reskin of Alamo. That page's language is Texan — star medallions, red/navy, a star watermark — and this owner has rejected a clone THREE times already (flat navy/gold, Skyline-clone, old-site clone) with the instruction "build our OWN UI". What carries over is the *structure* that makes that page work, executed entirely in IE's locked "Warm Editorial Professional" system: · numbered chapter markers so a 12k-px page reads as chapters, not a scroll · a real shaped seam between sections instead of a hard colour switch · sections that DO something (expand, compare, step) instead of paragraphs in a box · a graphic element in every section, which the brand rules require anyway IE's motif is the ARC from its own logo (the swoosh around the IE mark), not a star. Everything here is opt-in and additive. `ie.css` is untouched, so the other six pages render exactly as before. Promote by linking this file from a page — nothing else. ⚠ NOT ONE WORD OF COPY CHANGED. Every heading, sentence, figure and caption in the rebuilt page is carried over verbatim from the previous version (which came from the Notion "AC Repair" draft). Cause labels on the signs cards are lifted from each card's own prose. If a fact is not already on this page, it is not here. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ───────── 0. PAGE-LOCAL TOKENS ───────── 🔑 THE NODE MARK IS THE IE ARC, NOT A DIAMOND. Owner, 2026-08-17, on the gold diamond: *"don't use this icon it feels copy of alamo, make it different"* — and they were right. A gold square rotated 45deg is exactly Alamo's rail node, and it sits next to that page's star language. IE's own device is the BROKEN RING from its logo (the arcs around the IE mark), so the mark is now two opposed arcs with the gaps on the top-right / bottom-left diagonal, which is the logo's own orientation. Drawn ONCE here as a data URI so the chapter markers, the systems-rail nodes and the signs rule all carry the same mark and there is one place to change it. ⚠ Why a `background-image` and not an inline ``: two of the three uses are CSS pseudo-elements (`.syi::after`), which cannot hold markup. Keeping all three on the same mechanism means the mark cannot drift between them. ⚠ The `-l` variant exists because a dark section needs the lighter gold. Any rule that used to recolour a diamond with `background:var(--gold-2)` MUST switch to this image, or it repaints a flat gold square over the arc. ⚠ THE GEOMETRY IS MEASURED, DO NOT NUDGE IT BY EYE. Six weights were rendered at the three sizes this mark is actually used at (13/14/20px) plus a 104px blow-up, and checked on the rail: r8 sw3.4 the first build. At 13px the hole almost closes and it reads as a gold blob. r8.5 sw2.4 CHOSEN. Hole stays open at 13px, still has weight at 20px on the rail. r8.6 sw1.9 too light: on the rail it reads as a faint hairline circle. r8.2 sw2.6 round caps the caps bleed into the gaps, so it reads as a closed ring. two opposed quarter arcs most logo-faithful large, but at 13px it is two ambiguous ticks. single arc over a dot reads as a letter G. Circumference for r8.5 is 53.41, a 38deg gap is 5.64, so each arc is 21.07. Change `r` and the dasharray has to be recomputed or the gaps drift off the diagonal. */ :root{ /* DOUBLED 2026-08-18 (owner). Outer gold ring + inner navy ring = the logo symbol, not one arc of it. Geometry and the five rejected builds are documented in ie-sa.css section 0, which is the one place this is explained. */ --ie-arc:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20transform%3D'rotate(-25%2012%2012)'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9.2'%20fill%3D'none'%20stroke%3D'%23E1A50C'%20stroke-width%3D'2.6'%20stroke-dasharray%3D'22.80%206.10'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'4.4'%20fill%3D'none'%20stroke%3D'%23143883'%20stroke-width%3D'2.4'%20stroke-dasharray%3D'10.90%202.92'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --ie-arc-l:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20transform%3D'rotate(-25%2012%2012)'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9.2'%20fill%3D'none'%20stroke%3D'%23FCC952'%20stroke-width%3D'2.6'%20stroke-dasharray%3D'22.80%206.10'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'4.4'%20fill%3D'none'%20stroke%3D'%237f9bdd'%20stroke-width%3D'2.4'%20stroke-dasharray%3D'10.90%202.92'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* brand gold #E1A50C on cream is 2.1:1 and fails at the 11px uppercase link size the systems rail uses. This is 4.6:1. The brand gold is still the fill for rails, marks and buttons. */ --gold-ink:#8A6A08; } /* ───────── 1. DIVIDER — REMOVED 2026-08-17 (owner) ───────── There is no shape divider on this page, deliberately, after three passes: v1 a shallow chevron cut with a gold hairline and an IE arc medallion on the point v2 the live site's thick gold angled band, once the DOM showed the reference is actually a stack of three Elementor shapes layering into navy > gold > a second navy wedge > white v3 eight variations built at `_concepts/divider-variations.html` (A single band · B the live site faithfully · C layered-tightened · D kinked · E steep · F slim · G stepped · H corner wedge) — and the owner's answer was to drop the device entirely. Sections now meet on a flat edge, the same as the other six pages in this build. The cream / dark / white rhythm carries the transitions on its own. ⚠ DO NOT RE-ADD ONE WITHOUT AN EXPLICIT ASK. This has been decided against once already, and the variations page still renders (it carries its own local CSS) if the question reopens. ⚠ Deleted with it: `.seamtop` / `.seambot` / `.has-seamtop` / `.has-seambot` / `.med` and the `.sec-dark > .wrap` z-index lift, which only existed to keep section content above the overlay. */ /* ───────── 2. CHAPTER MARKER ───────── `◆ 01 / WARNING SIGNS`. Only the four load-bearing sections get one (signs, pricing, repair or replace, questions), so the numbering means "chapter", not "every heading". Sections that are not chapters keep the ordinary left-aligned `.eyebrow`. */ .chap{display:flex;align-items:center;justify-content:center;gap:12px; font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--muted)} /* the arc mark needs more room than the solid diamond did to read as a broken ring: 14px, not 9px */ .chap .d{width:17px;height:17px;flex:none; background:var(--ie-arc) center/contain no-repeat} .chap .n{color:var(--gold);font-weight:700} .chap .sl{color:var(--line-2)} .sec-dark .chap,.sec-navy .chap{color:#8d9dbd} .sec-dark .chap .n,.sec-navy .chap .n{color:var(--gold-2)} /* ⚠ the lighter ARC, not a flat colour. `background:var(--gold-2)` here would paint a gold square straight over the mark, which is the bug this comment exists to prevent. */ .sec-dark .chap .d,.sec-navy .chap .d{background:var(--ie-arc-l) center/contain no-repeat} .sec-dark .chap .sl,.sec-navy .chap .sl{color:rgba(255,255,255,.28)} /* a centred head that starts with a chapter marker */ .head.center .chap{margin-bottom:18px} /* ───────── 3. SIGNS — six cards, text visible ───────── ⚠ v2 (owner call). v1 made each card a
with a "What's behind it" / "Close" toggle. Owner: the section is fine, but it should NOT have the toggle, it should just have the text. So the cause paragraph is always visible and there is nothing to click. That also removes the `align-self:start` ragged-row problem an open card used to create. Kept from v1: gold numerals instead of icon glyphs (this owner has rejected icon tiles twice as "icons feel AI"), and the cause chip that names the likely part. ⚠ Every chip is a phrase lifted from that card's own paragraph. "Refrigerant or compressor" is in the warm-air copy, "capacitor or contactor" is in the hum copy, and so on. No new claims. */ .sgx{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:46px} /* odd card count: the last one spans instead of sitting orphaned in the left column (same device the location stylesheet already ships at ie-loc.css .s5sec .sgx) */ .sgx > :last-child:nth-child(odd){grid-column:1/-1} .sg2{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px; padding:26px 26px 24px;position:relative;overflow:hidden; transition:background .22s ease,border-color .22s ease,transform .22s ease} /* the gold cap is the site's own card device (the live site rules its feature cards in gold) */ .sg2::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} .sg2:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.3);transform:translateY(-2px)} .sg2:hover::before{transform:scaleX(1)} .sg2 .top{display:flex;align-items:center;justify-content:space-between;gap:14px} .sg2 .n{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.02em; color:var(--gold-2);line-height:1} .sg2 .cause{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.15em; text-transform:uppercase;color:#9fb0d0;text-align:right;line-height:1.4} /* the one urgent card. Earned by its own copy: "Shut it down and call ... an urgent safety concern rather than something to monitor." It is the only card whose prose says that, so it is the only card that gets a flag. Do NOT give the other five a severity treatment: that invents a claim. */ .sg2 .cause.urgent{color:#1c1403;background:var(--gold-2);border-radius:5px;padding:4px 9px;letter-spacing:.1em} .sg2 h3{font-size:19.5px;color:#fff;margin:14px 0 0;letter-spacing:-.012em;line-height:1.28} .sg2 p{font-size:14.9px;line-height:1.64;color:#b6c4de;margin:12px 0 0} @media(max-width:860px){.sgx{grid-template-columns:1fr;gap:12px}} @media(max-width:640px){ .sg2{padding:22px 20px} .sg2 h3{font-size:17.5px} .sg2 .cause{font-size:9.5px;max-width:42%} } /* the closing line under the grid */ .sgx-foot{margin-top:40px;text-align:center} .sgx-foot p{font-size:16.4px;color:#c9d5ea;max-width:68ch;margin:0 auto} .sgx-foot p b{color:#fff;font-weight:600} /* a single hairline with the gold diamond on it. ⚠ Built first as two flanking gradients with a gap between them, which read as a broken divider rather than one rule. */ .sgx-foot .rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px} .sgx-foot .rule::before,.sgx-foot .rule::after{content:"";height:1px;width:min(210px,22vw)} .sgx-foot .rule::before{background:linear-gradient(90deg,transparent,rgba(252,201,82,.6))} .sgx-foot .rule::after{background:linear-gradient(90deg,rgba(252,201,82,.6),transparent)} .sgx-foot .rule .d{width:17px;height:17px;flex:none; background:var(--ie-arc-l) center/contain no-repeat} .sgx-links{margin-top:30px;text-align:center;font-size:15.2px;color:#b6c4de} .sgx-links a{color:var(--gold-2);border-bottom:1px solid rgba(252,201,82,.4)} .sgx-links a:hover{border-bottom-color:var(--gold-2)} /* ───────── 4. PRICING LEDGER ───────── The old section was two prose boxes with the four price facts in a 13px strip at the bottom. On a pricing section that is backwards: those four numbers are the most-scanned thing on the page and they were the least prominent thing in it. Now a navy ledger panel anchors it — $99 set large because it is the only fixed number in AC repair — with the two prose blocks beside it as the explanation, and the four facts promoted into a proof row that reads as a row of numbers, not a footnote. ⚠ Same four figures, same captions, verbatim: $99 flat / Free in-home estimates on a new system / $0 financing fees through Service Finance. (Comfort Club figure removed 2026-08-20, client escalation.) */ /* align-items:center, not start: the ledger panel is taller than the two notes beside it, and top-aligning left a block of dead cream under the notes the height of a whole section. */ .pledge{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,58px);align-items:center;margin-top:46px} .pl-card{background:linear-gradient(152deg,#0a1c3f 0%,#143883 62%,#0f2a5e 100%); border-radius:22px;padding:34px 32px 30px;color:#fff;position:relative;overflow:hidden; box-shadow:0 30px 60px rgba(11,31,69,.24)} .pl-card::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px; border-radius:50%;background:radial-gradient(circle,rgba(252,201,82,.16),transparent 68%)} .pl-card .lb{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.17em; text-transform:uppercase;color:var(--gold-2)} .pl-card .fig{font-family:var(--disp);font-weight:700;font-size:clamp(52px,6vw,74px); letter-spacing:-.035em;line-height:1;margin:12px 0 0;color:#fff} .pl-card .fig sup{font-size:.42em;top:-.62em;position:relative;letter-spacing:0} .pl-card .fc{font-size:14.6px;color:#bcc9e2;margin:12px 0 0;max-width:34ch} .pl-card ul{list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.18)} .pl-card li{display:grid;grid-template-columns:17px 1fr;gap:12px;padding:9px 0; font-size:14.4px;color:#dbe4f5;align-items:start} .pl-card li svg{width:17px;height:17px;color:var(--gold-2);margin-top:3px;flex:none} /* the two explanation blocks, numbered in the same gold-numeral language as the signs cards */ .pl-note{position:relative;padding-left:52px} .pl-note + .pl-note{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)} .pl-note .n{position:absolute;left:0;top:2px;font-family:var(--disp);font-weight:700; font-size:15px;color:var(--gold);letter-spacing:.06em} /* h3 since 2026-08-24: the section had H2 -> H4 with no H3, a heading-level skip the content brief bans. h4 stays in the selector because 15 sibling pages still ship H4 here and only get the H3 when they are regenerated from the canonical. */ .pl-note h3,.pl-note h4{font-size:19.5px;color:var(--navy);letter-spacing:-.012em} .pl-note p{font-size:15.2px;line-height:1.68;color:var(--muted);margin:11px 0 0} @media(max-width:900px){ .pledge{grid-template-columns:1fr;gap:34px} .pl-note + .pl-note{margin-top:24px;padding-top:24px} } @media(max-width:640px){.pl-card{padding:28px 24px 24px}.pl-note{padding-left:0} .pl-note .n{position:static;display:block;margin-bottom:6px}} /* ───────── 5. REPAIR OR REPLACE — the comparison table ───────── ⚠ v6, and the SIXTH build. Owner: "it should be table of comparison." Direct instruction, so this is a real table. History kept so nobody re-treads it: v1 flat 2-column hairline table → argued nothing, columns looked identical v2 two colour-headed cards, subgrid → rows UNLABELLED, reader does the work v3 labelled axis, navy rail, verdict → "feels so much complicated" v4 two quiet cards, labels inline → "still needs improvement" (no graphic element) v4b six directions on a concepts page → "none of these" v5 Alamo-style tab panel → owner asked for a table instead ⚠ I had written "never propose another side-by-side" into the handoff after v5. The owner has now asked for one explicitly, which settles it — that note is withdrawn, not overridden. What makes this different from v1, which was also a table: v1 had **no row labels**, so the reader had to work out which axis each pair was comparing. This is a real `
` with a row header column naming the factor, a proper ``, `scope` on every header, and zebra rows. It is also NOT decorated: white surface, hairlines, two coloured header cells, nothing else. v3 died of decoration and that lesson still holds even though the device came back. ⚠ Semantic `
` on purpose, not a div grid. This IS tabular data — two options measured on four axes — so a table is the correct element, reads correctly to a screen reader, and gives Google a real comparison structure. `scope="col"` / `scope="row"` are load-bearing for that. ⚠ NO NEW WORDS. Row labels are the four already on the page; all eight answers verbatim. */ .rrtab-w{margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden; box-shadow:0 20px 44px rgba(20,56,131,.08);background:var(--surface)} .rrtab{width:100%;border-collapse:collapse;font-size:15.2px} .rrtab th,.rrtab td{text-align:left;vertical-align:top;padding:18px 24px} /* head: the two options, colour-coded. The first cell names the column of row labels so the header row is not a dangling empty box. */ .rrtab thead th{font-family:var(--disp);font-weight:700;letter-spacing:.01em;font-size:16.5px; padding:17px 24px} .rrtab thead .c0{background:var(--canvas-2);color:var(--muted);font-size:11px;letter-spacing:.14em; text-transform:uppercase;font-weight:700;width:210px} .rrtab thead .c-fix{background:var(--navy);color:#fff} .rrtab thead .c-new{background:var(--gold);color:#1c1403} /* body: row-label column, then the two answers. Zebra so a row can be tracked across. */ .rrtab tbody th{font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--navy);background:var(--canvas); border-right:1px solid var(--line);white-space:nowrap} .rrtab tbody td{line-height:1.55;color:var(--ink);border-right:1px solid var(--line)} .rrtab tbody td:last-child{border-right:0} .rrtab tbody tr + tr th,.rrtab tbody tr + tr td{border-top:1px solid var(--line)} .rrtab tbody tr:nth-child(even) td{background:#FCFBF8} /* the answer cells carry a quiet marker so the two sides read as two answers, not as prose */ .rrtab tbody td{padding-left:44px;position:relative} .rrtab tbody td::before{content:"";position:absolute;left:24px;top:25px;width:9px;height:9px;border-radius:50%} .rrtab tbody td.f::before{background:var(--navy)} .rrtab tbody td.n::before{background:var(--gold)} /* foot: the one closing fact, spanning the table */ .rrtab tfoot td{background:var(--navy-ink);color:#c9d5ea;font-size:14.6px; border-top:1px solid var(--line);text-align:center;padding:16px 24px} .rrtab tfoot b{color:var(--gold-2);font-weight:600} .rrtab-cta{margin-top:26px;display:flex;justify-content:center} /* ⚠ MOBILE: a 3-column comparison is unreadable at 390px, so the table collapses to one block per factor — the row label becomes a heading bar and each answer cell prints its own column name from `data-l` via ::before. Same pattern the AC hub used for its v13 table. ⚠ `display:block` on table parts drops the implicit row/cell boxes, so every border has to be restated here; do not assume the desktop borders survive the collapse. */ @media(max-width:820px){ .rrtab,.rrtab thead,.rrtab tbody,.rrtab tfoot,.rrtab tr,.rrtab th,.rrtab td{display:block;width:auto} .rrtab thead{display:none} .rrtab tbody tr{border-top:1px solid var(--line)} .rrtab tbody tr:first-child{border-top:0} .rrtab tbody th{white-space:normal;border-right:0;border-top:0; background:var(--canvas);padding:13px 20px;font-size:12.5px} .rrtab tbody td{border-right:0;border-top:0;padding:14px 20px 14px 20px;background:#fff !important} .rrtab tbody td::before{content:attr(data-l);position:static;display:block;width:auto;height:auto; border-radius:0;font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.13em; text-transform:uppercase;margin-bottom:5px} .rrtab tbody td.f::before{color:var(--navy);background:none} .rrtab tbody td.n::before{color:#9a7a12;background:none} .rrtab tbody td.f{padding-bottom:6px} .rrtab tfoot td{text-align:left;padding:16px 20px} } /* ───────── 6. MEET ANDERSON — dark owner section ───────── Replaces "The crew, the focus, the track record" as three text columns. Same three points, same words, but they now sit beside the person they are about. This client's whole differentiator is that the founder still runs cooling calls, and the old version never showed him. A photo, a floating credential card, and the three points as a numbered rail. ⚠ Only the AND01-AND10 series is Anderson's real face. Do not swap in a stock frame here. */ .ownr{position:relative;isolation:isolate;overflow:hidden} .ownr .obg{position:absolute;inset:0;z-index:-2;overflow:hidden} .ownr .obg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.16} .ownr .ograde{position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg, rgba(10,28,63,.95) 0%,rgba(20,56,131,.9) 55%,rgba(11,31,69,.96) 100%)} .ownr .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,4.4vw,64px);align-items:center} .own-pts{margin-top:36px} .own-pt{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:0 0 24px;position:relative} .own-pt:last-child{padding-bottom:0} /* the rail runs between the numerals, not past the last one */ .own-pt:not(:last-child)::before{content:"";position:absolute;left:22px;top:48px;bottom:6px; width:1px;background:rgba(252,201,82,.32)} .own-pt .n{width:46px;height:46px;border-radius:50%;border:1.4px solid rgba(252,201,82,.55); display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:14px; color:var(--gold-2);background:rgba(252,201,82,.08)} .own-pt h3{font-size:19px;color:#fff;letter-spacing:-.012em} .own-pt p{font-size:14.8px;line-height:1.64;color:#b6c4de;margin:9px 0 0} /* right: photo + the credential card that overlaps it */ .own-media{position:relative} .own-media .frame{border-radius:22px;overflow:hidden;aspect-ratio:4/4.2; box-shadow:0 34px 66px rgba(6,18,44,.42);border:1px solid rgba(255,255,255,.16)} .own-media .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 28%} /* ⚠ top-left, not bottom-right: the credential card is anchored bottom-left and overlapped a bottom-right tag badly enough that the founder's name was half-hidden behind it. */ .own-media .tag{position:absolute;left:18px;top:18px;background:rgba(11,31,69,.9); backdrop-filter:blur(6px);border:1px solid rgba(252,201,82,.4);border-radius:30px; padding:8px 15px;font-family:var(--disp);font-weight:600;font-size:11.5px;letter-spacing:.09em; text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:8px} .own-media .tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-2);flex:none} .own-cred{position:absolute;left:-34px;bottom:-26px;background:var(--surface);border-radius:16px; padding:20px 22px;box-shadow:0 26px 54px rgba(6,18,44,.34);max-width:330px} .own-cred .lb{font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);display:block} .own-cred .g{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:14px} .own-cred b{display:block;font-family:var(--disp);font-weight:700;font-size:14.5px;color:var(--navy);line-height:1.2} .own-cred span span{display:block;font-size:11px;color:var(--muted);letter-spacing:.05em; text-transform:uppercase;margin-top:3px} @media(max-width:960px){ .ownr .wrap{grid-template-columns:1fr;gap:44px} .own-media{max-width:520px} .own-cred{position:static;max-width:none;margin-top:18px} } @media(max-width:640px){ .own-pt{grid-template-columns:38px 1fr;gap:14px} .own-pt .n{width:38px;height:38px;font-size:12.5px} .own-pt:not(:last-child)::before{left:18px;top:42px} } /* ───────── 7. PROCESS TIMELINE — SECTION REMOVED 2026-08-17 (owner) ───────── "How a repair visit unfolds" (call > diagnose > approve > fix) is gone from the page. The `.ptl` / `.ptl-steps` / `.ptl-step` / `.ptl-media` rules went with it — nothing references them. ⚠ WHAT WENT WITH IT, so the loss is on the record and not discovered at launch: · The four-step narrative now exists NOWHERE on this page. · SURVIVING elsewhere: "you approve a written figure before work begins" is in the FAQ and in the pricing notes; the flat $99 appears 15 times across hero, trust strip, pricing panel, comparison-table foot, systems lede, FAQ and CTA. No fact was orphaned. · LOST OUTRIGHT: the proof step — "we run the system and read the temperature at the vents" — is not stated anywhere else. It was the only line on the page describing how a repair is verified before the technician leaves. Flag before launch if the owner expects it back. ⚠ Rhythm side effect, already handled: without PROCESS (cream) between them, the comparison table (WHITE) met the systems rail (WHITE). The systems rail was flipped to CREAM. Verified after the change: zero adjacent DARK sections and no adjacent WHITE pair. */ /* ───────── 8. SERVICE AREA — PHOTO-AND-PILLS OVERRIDES, DELETED 2026-08-17 ───────── 🔴 THIS BLOCK IS GONE AND IT MUST NOT COME BACK WHILE THE BAND CARRIES THE MAP. What it was: this section deliberately had NO map, because the owner had cut a stylised one from the homepage ("it didn't make sense"). So it was built as van photo + pill grid, and this block supplied `.areax .wrap{grid-template-columns:1fr 1.06fr}`, `.hoodgrid`, `.areax-media` and `.areax-card`, including two hard-won stacking fixes (the dot motif needed `z-index:0` on a wrapper rather than `-1`, and the overlap card needed an explicit `z-index:2` or the van photo covered it). Why it had to go: the owner asked for the AC hub's exact map composition on 2026-08-17, and `ie.css` sets **`.areax .wrap{grid-template-columns:1.28fr .72fr}`** for that layout, with `.axm` spanning both columns. This block's 2-column override would have fought it. 🔑 THIS IS THE SECOND TIME A PAGE-SCOPED OVERRIDE OF A SHARED COMPONENT BECAME A LANDMINE on this page in one day. Block 14 did it to the reach band and cost a debugging round; this one was caught BEFORE building, by grepping v16 for the component's classes first. **Do that check every time a shared band is adopted.** ⚠ If the photo-and-pills version is ever wanted back, restore this block AND swap the markup back to `.copy` / `.hoodgrid` / `.areax-media` / `.areax-card` in the same commit, never one alone. The two stacking notes above are the part worth re-reading if so. */ /* ───────── 9. REVIEWS on dark ───────── Moved onto the dark field so the score reads as a panel rather than a card floating on cream, and so the rhythm alternates through the back half of the page. ⚠ The two review slots stay VISIBLE `{{NEEDS_SOURCE}}` placeholders. Verbatim named reviews are client-blocked (quotes + written permission), and the rule is that a missing fact shows as a gap, never as a guess. Do not fill these with invented testimonials. */ /* ⚠ LIGHT CARD INSIDE A DARK SECTION — the v2c trap, hit again. `.sec-dark` cascades white text into any white card inside it, and the "Read the Google reviews" button rendered white-on-white and looked like the card just had a block of empty space at the bottom. Any NEW light card dropped into a dark section has to be added here as well as to ie.css's v2c list. */ .sec-dark .rvx-score .btn-line{color:var(--navy);border-color:var(--line-2)} .sec-dark .rvx-score .btn-line:hover{border-color:var(--navy);background:var(--canvas)} /* align-items:center, not start: the score panel is roughly twice the height of the two review slots, so top-aligning left the right half of the section hanging in mid-air. */ .revx .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,4.2vw,58px);align-items:center} .rvx-score{background:var(--surface);border-radius:20px;padding:30px 28px 26px;text-align:center; box-shadow:0 26px 54px rgba(6,18,44,.32);margin-top:30px} .rvx-score .n{font-family:var(--disp);font-weight:700;font-size:66px;line-height:1; color:var(--navy);letter-spacing:-.04em;display:block} .rvx-score .st{color:var(--gold);letter-spacing:3px;font-size:16px;margin-top:10px} .rvx-score .sm{font-size:13.6px;color:var(--muted);margin-top:8px} .rvx-score .gl{margin-top:16px;padding-top:16px;border-top:1px solid var(--line); font-size:13.2px;color:var(--muted)} /* one column, not two. Side by side, the pair sat ~180px tall against a ~440px left column and left a block of empty dark under them. Stacked, the two columns finally balance. */ .rvx-cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px} .rvx-slot{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.3); border-radius:16px;padding:24px 24px 22px} .rvx-slot .st{color:var(--gold-2);letter-spacing:2px;font-size:13px} .rvx-slot .ns{display:inline-block;margin-top:12px;font-family:var(--disp);font-weight:600; font-size:11px;letter-spacing:.05em;color:var(--gold-2);background:rgba(252,201,82,.12); border:1px dashed rgba(252,201,82,.5);border-radius:6px;padding:5px 10px} .rvx-slot p{font-size:14.5px;line-height:1.6;color:#b6c4de;margin:14px 0 0} .rvx-slot .who{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16); font-size:12.6px;color:#8d9dbd} @media(max-width:960px){ .revx .wrap{grid-template-columns:1fr} .rvx-score{margin-top:24px} .rvx-cards{margin-top:20px} } /* ───────── 10. GALLERY slots ───────── Unchanged in substance: all three are still {{NEEDS_SOURCE}}, because Anderson supplies and approves every photo. Only the empty-state styling improved so a pending slot reads as a reserved frame rather than a broken card. */ .galx{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} .galx .gs{aspect-ratio:4/2.6;border:1px dashed var(--line-2);border-radius:16px;background: linear-gradient(135deg,var(--canvas-2) 0%,var(--canvas) 100%);display:grid;place-items:center; padding:26px;text-align:center} .galx .gs .ns{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.05em; color:#9a7a12;background:var(--gold-soft);border:1px dashed var(--gold);border-radius:6px;padding:5px 10px} .galx .gs p{font-size:13.4px;color:var(--muted);margin:14px 0 0;line-height:1.55} @media(max-width:860px){.galx{grid-template-columns:1fr}} /* ───────── 11. SMALL SHARED BITS ───────── */ /* the micro-fact row under the intro copy: three labelled facts on one rule */ .factrow{display:flex;gap:0;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap} .factrow .f{padding-right:26px} .factrow .f + .f{padding-left:26px;border-left:1px solid var(--line)} .factrow b{display:block;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--navy); letter-spacing:.03em;text-transform:uppercase;line-height:1.2} .factrow span{display:block;font-size:11.6px;color:var(--muted);letter-spacing:.06em; text-transform:uppercase;margin-top:5px} @media(max-width:640px){ .factrow .f{padding:0 0 14px;width:100%} .factrow .f + .f{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:14px} } /* a centred CTA with hairlines running out of both sides (used under signs + compare) */ .railcta{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:30px;flex-wrap:wrap} .railcta::before,.railcta::after{content:"";height:1px;width:min(160px,16vw);background:rgba(225,165,12,.5)} .sec-dark .railcta::before,.sec-dark .railcta::after{background:rgba(252,201,82,.5)} @media(max-width:640px){.railcta::before,.railcta::after{display:none}} /* ───────── 12. LEGACY CARD DEVICES — applied to the sections that were still generic ───────── Owner: "some sections still are very basic and they need to be designed in a better way, going on to follow the legacy of the design rather than just designing sections randomly." So these are not new inventions. Every device below is lifted off the LIVE indoorexperts.com, where the feature cards carry a gold rule, a corner index number and a gold eyebrow, and the featured card in a grid is navy while its siblings are light. Reused here so the FAQ, the gallery and the blog strip belong to the same family as the rest of the page instead of being three different generic patterns. */ /* --- the axis gets a side tint so the two halves read as two answers, not one table --- */ .ax-l{background:linear-gradient(90deg,rgba(20,56,131,.05),rgba(20,56,131,.015))} .ax-r{background:linear-gradient(270deg,rgba(225,165,12,.07),rgba(225,165,12,.02))} .ax-h-repair{padding-right:34px} .ax-h-replace{padding-left:34px} @media(max-width:900px){.ax-l,.ax-r{background:none}} /* --- FAQ: numbered, with the gold rule the live site puts on its cards --- */ /* ⚠ the base rule is `justify-content:space-between` with two children. Adding the index made three children, so "space-between" pushed the QUESTION into the middle of the bar and it read as centred by accident. The text has to claim the free space itself and the +/- icon has to be pushed right explicitly. */ .faq-2col .faqlist summary{display:flex;align-items:center;justify-content:flex-start;gap:14px} .faq-2col .faqlist summary .qt{flex:1} .faq-2col .faqlist summary .ic{margin-left:auto} .faq-2col .qn{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.1em; color:var(--gold-2);flex:none;min-width:22px} .sec-dark.faq-2col .faqlist details{position:relative;overflow:hidden} /* the gold rule slides in on the open card, the same "one focus at a time" behaviour the signs cards use on hover. Consistency is the point: two different accent treatments on one page is what made these sections read as unrelated. */ .sec-dark.faq-2col .faqlist details::before{content:"";position:absolute;left:0;top:0;bottom:0; width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .28s ease} .sec-dark.faq-2col .faqlist details[open]::before{transform:scaleY(1)} /* --- gallery: reserved frames that look designed, not broken --- */ .galx .gs{position:relative;align-content:center} .galx .gs .idx{position:absolute;left:18px;top:14px;font-family:var(--disp);font-weight:700; font-size:13px;letter-spacing:.1em;color:var(--line-2)} .galx .gs::after{content:"";position:absolute;left:18px;right:18px;bottom:16px;height:2px; background:linear-gradient(90deg,var(--gold),rgba(225,165,12,0))} /* --- blog cards: the gold underline the live site rules its cards with --- */ .bcard{position:relative;overflow:hidden} .bcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .3s ease} .bcard:hover::after{transform:scaleX(1)} /* ───────── 13. EVERY SYSTEM WE REPAIR — v4, ALTERNATING CENTRE RAIL (`.syrail`) ───────── ⚠ FOURTH build. Sequence, so nobody re-opens this by accident: v1 Alamo's alternating centre rail → sent back v2 a 3-up card grid → "its not the good design change it" v3 the live site's offset bands, cutout straddling the band's top corner → "This section is not good" pass 3 six DEVICES built at `_concepts/systems-variations.html` for a letter, because six styling variations on one device had already failed for repair-or-replace v4 the owner then sent a screenshot of the Alamo `/ac-repair/` rail with **"make it something like this, font copy exact, just take some inspiration"** → built as asked. 🔑 THAT REVERSES THE v1 REJECTION, and the owner's explicit ask settles it. Same thing happened with repair-or-replace, where a "never propose another side-by-side" note was WITHDRAWN once the owner asked for a table directly. Do not re-argue it from the v1 rejection. ⚠ It is the reference's STRUCTURE in IE's own system, not a reskin: two columns either side of a gold hairline rail, one gold diamond per row on the rail, a pale ghost numeral on the outer edge, the product cutout on the outer edge and the copy against the rail, sides alternating. The reference is Alamo red on white; this is IE navy/gold on cream, Montserrat + Poppins. ⚠ ZERO copy changes. All nine names and descriptions are still verbatim from the live IE page, and the closing line and phone number are the ones already in this section. ⚠ NO `overflow:hidden` on `.syrail`. The ghost numerals sit above the row box on purpose. ⚠ ONE DEVIATION FROM THE REFERENCE, deliberate: the reference floats its cutouts on bare white. Three of these nine units are white-bodied (ductless, inverter, the smart thermostat) and vanish on cream, so each sits on a soft radial tint with no hard edge. It grounds the white units without adding the boxed look a plate would. ⚠ The cutouts are ~100px tall here, which is also the only treatment that stops the Carrier / GE / Rheem badges on seven of the nine images being legible. Still an open owner decision. */ .syrail{--sygap:clamp(40px,6vw,96px);position:relative;margin-top:64px;display:grid; grid-template-columns:1fr 1fr;column-gap:var(--sygap);row-gap:clamp(30px,3.4vw,52px)} /* the rail: one hairline down the centre, fading out at both ends so it does not butt into the heading above or the closing line below */ .syrail::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px; transform:translateX(-.5px);background:linear-gradient(180deg,transparent, rgba(225,165,12,.55) 7%,rgba(225,165,12,.55) 93%,transparent)} /* ⚠ align-items:flex-start, NOT center. These descriptions run four and five lines where the reference's run two, so centring dropped every cutout to the middle of its paragraph and it read as floating loose of the heading it belongs to. Top-aligned, the cutout sits against the heading the way the reference does. The diamond still lands on the row centre because it is positioned against the odd item, which the grid stretches to the full row height. */ .syi{position:relative;display:flex;align-items:flex-start;gap:clamp(16px,1.8vw,28px);padding:10px 0} /* the ghost numeral, outer edge, tucked behind the top of the cutout. Pale enough to be texture, not a label. It is aria-hidden: it is decoration, and the order is already in the DOM. */ .syi .gn{position:absolute;top:-16px;z-index:0;font-family:var(--disp);font-weight:700; font-size:clamp(42px,4.4vw,64px);line-height:1;letter-spacing:-.03em;color:rgba(20,56,131,.075)} /* ⚠ absolute px max-height, NOT a percentage. The media box is a flex item, so its height is not a definite containing block for a percentage on the child and the tall cutouts (central, heat pump, packaged) render full size straight over the copy. */ .syi .u{flex:none;width:clamp(100px,10vw,138px);height:106px;display:grid;place-items:center; position:relative;z-index:1; background:radial-gradient(closest-side,rgba(20,56,131,.075),rgba(20,56,131,0) 76%)} .syi .u img{max-height:98px;max-width:100%;width:auto;object-fit:contain} .syi .bd{min-width:0;position:relative;z-index:1} .syi h3{font-size:clamp(17px,1.5vw,20.5px);color:var(--navy);line-height:1.24;letter-spacing:-.014em} .syi p{font-size:14.4px;line-height:1.58;color:var(--muted);margin:9px 0 0} .syi .go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-family:var(--disp); font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)} .syi .go svg{width:14px;height:14px;transition:transform .2s ease} .syi .go:hover{color:var(--navy)} .syi .go:hover svg{transform:translateX(3px)} /* ── left column: cutout outside, copy against the rail ── */ .syi:nth-child(odd) .gn{left:-4px} /* ── right column: the same row mirrored. row-reverse only flips the item's OWN children, so the link keeps its arrow AFTER the text and pointing right. Reversed it read as "go back" (v3). ── */ .syi:nth-child(even){flex-direction:row-reverse;text-align:right} .syi:nth-child(even) .gn{right:-4px} /* ONE node per row, not one per item: the odd item stretches to the full row height, so 50% of it is the row's centre line. Sitting it in the middle of the column gap puts it on the rail. ⚠ The node carries a CANVAS-COLOURED DISC under the arc. The mark is a ring, so without the disc the hairline rail 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. The disc interrupts the rail cleanly. ⚠ `right` offsets by half the node's own width, so the two numbers move together: 20px wide, 10px back. Change one and the node slides off the rail. */ .syi:nth-child(odd)::after{content:"";position:absolute;top:50%;right:calc((var(--sygap) / -2) - 10px); width:20px;height:20px;z-index:2;border-radius:50%;transform:translateY(-50%); background-color:var(--canvas);background-image:var(--ie-arc); background-size:20px 20px;background-position:center;background-repeat:no-repeat} .sysfoot{margin-top:56px;text-align:center} .sysfoot p{font-size:15.6px;color:var(--muted);margin:0} .sysfoot p b{color:var(--navy);font-weight:600} .sysfoot .row{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap} .sysfoot .row::before,.sysfoot .row::after{content:"";height:1px;width:min(150px,15vw);background:rgba(225,165,12,.5)} .sysfoot .btn svg{width:16px;height:16px;flex:none} @media(max-width:900px){ /* one column, so the rail, the diamonds and the mirroring all go: there is no centre line to hang them on and right-aligned copy beside a left-hand cutout reads as a mistake. Rows keep a hairline between them so the list still has structure. */ .syrail{grid-template-columns:1fr;row-gap:0;margin-top:38px} .syrail::before{display:none} .syi{padding:22px 0;border-top:1px solid var(--line)} .syi:first-child{border-top:0} .syi:nth-child(even){flex-direction:row;text-align:left} .syi:nth-child(odd)::after{display:none} /* numerals move to the right on BOTH sides at this width, clear of the cutout */ .syi:nth-child(odd) .gn,.syi:nth-child(even) .gn{left:auto;right:0;top:-6px;font-size:40px} .sysfoot{margin-top:36px} .sysfoot .row::before,.sysfoot .row::after{display:none} } @media(max-width:460px){ /* below this the cutout and a readable measure will not share a line */ .syi,.syi:nth-child(even){flex-direction:column;align-items:flex-start;gap:12px} .syi .u{width:118px;height:92px} .syi .u img{max-height:86px} .syi .gn{font-size:34px;top:-2px} } /* ───────── 14. REACH — v14 CALL-PANEL OVERRIDES, DELETED 2026-08-17 ───────── 🔴 THIS BLOCK IS GONE AND IT MUST NOT COME BACK WHILE THE BAND CARRIES A FORM. What it was: this page used the v14 CALL-PANEL variant of `.reachsec`, because the spine allowed exactly one form and it lived in the hero. `ie.css` had meanwhile gained a LATER `.reachsec` layer for the AC hub's FORM-carrying version (`.rch-head` / `.rch-lower` / `.rch-form`), which sets `.rch-body{display:contents}` and a `1fr 460px` two-row grid. To keep the call-panel variant alive this block renamed the container to `.rch-col` and re-declared the wrap grid as `.82fr 1.18fr`. Why it had to go: the owner asked for the hub's exact section on 2026-08-17, so this page now uses the hub markup, and `.reachsec .wrap{grid-template-columns:.82fr 1.18fr}` was **fighting the hub layer's own geometry**. Measured before deletion: the form panel covered the header card's headline by 122px at 1440, 126px at 1280 and 179px at 1100, while the SAME markup on the hub was clear at 1440 and 1280. Identical HTML, identical ie.css, and the only difference was this override, which is exactly what made it findable: **compare the same component on a page that does not link v16.** 🔑 The lesson worth keeping: a page-scoped layer that re-declares a SHARED component's grid becomes a landmine the moment that page adopts the shared version. If the call panel is ever wanted back, restore this block AND swap the markup back to `.rch-col` in the same commit, never one without the other. */ /* ───────── 15. OTHER AC SERVICES — v2, INDEX + STICKY PROMPT PANEL (`.sply`) ───────── Owner 2026-08-17: *"this section need to be designed in a different way"*, then picked **option B** from the eight devices at `_concepts/other-services-variations.html`. 🔑 WHAT WAS WRONG WITH THE OLD `.svcgrid` VERSION, measured rather than felt: 1. It was the SAME DEVICE as the section directly below it. Services and blog were both a photo with a chip on it, then a heading, a paragraph and an arrow link, and the page already carries five card grids. 2. `AND03_new_install` appeared TWICE, once here and once in the blog grid, about one screen apart in adjacent sections. Four of the five service photos were also the same technician in near-identical framing. 3. At 1,362px it was the second-tallest section on the page, and it is the second-to-last content block, so the page ended heavy on its least important content. 4. It sat in 2,221px of unbroken cream with the reviews section above it. 🔑 AND THE REFRAME THAT ACTUALLY FIXED IT: this block is NAVIGATION, five links out plus one prompt, and it was built like content. It is now built like navigation. The device: five services as a clean index on the left, name and category on one line with the description under it, and the "Not sure which one you need?" prompt promoted out of its sixth grid cell into a real navy panel on the right that STICKS while the list scrolls past it. Measured 792px against the old grid's 970px, and four of the five repeated photographs are gone, so the AND03 clash with the blog section no longer exists. ⚠ PAGE-SCOPED ON PURPOSE. `.svcgrid` / `.svc` stay in `ie.css` and still render on the other six pages, because the owner asked on 2026-08-13 for the same services grid across the money pages. THIS PAGE NOW DIVERGES FROM THAT until the owner says roll it out. Same open question as the reviews section. Rolling out = linking v16 and swapping the markup, per page. ⚠ The panel's photo is `AND04_minisplit_filters`, an INTERACTION frame (a technician showing a filter to a homeowner) because the prompt is about telling us what the system is doing and getting a straight answer. `F14_homeowner_explain` was the first pick and is ALREADY on this page in the intro, so it would have created exactly the duplicate this rebuild removes. `F10_refrigerant_charge` is the alternative if a mini-split frame reads too ductless-specific for a general prompt. 🔴 `P01_door_greeting` WAS CONTACT-SHEETED FOR THIS PANEL AND IT IS A BACK-OF-HEAD FRAME. Ban list is now A01 / A06 / A07 / P01 / P03 / W03 / W04 / W05 / H01. */ /* ⚠ THE PANEL IS SHORTER THAN THE LIST BY DESIGN, and the proportions are the ones the owner approved on the concept page. Do not "fix" the gap by widening the panel column: tried 1.22fr/.78fr, and a narrower list column simply made the rows taller, so a 290px shortfall became a 268px one for no gain. The shortfall is what gives the sticky panel something to travel against, and it is what the approved rendering looked like. If the owner ever asks for the gap closed, the two real answers are `align-items:stretch` with the body centred in a full-height navy column, or `align-items:center` so the slack splits evenly above and below. Both change the device from the one that was picked, so both need an ask. ⚠ Do NOT crop the photograph squarer to gain height either: AND04 has a person at each edge and a 1:1 crop cuts one of them out of the frame. */ .sply{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(30px,3.6vw,56px);margin-top:46px; align-items:start} .splist{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden} .splist a{display:block;padding:22px 26px;border-top:1px solid var(--line);position:relative; transition:background .18s ease} .splist a:first-child{border-top:0} /* the gold rule down the row is the live site's own card device, the same one the systems rail uses */ .splist a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold); transform:scaleY(0);transform-origin:top;transition:transform .25s ease} .splist a:hover{background:#fdfcf9} .splist a:hover::before{transform:scaleY(1)} .splist .rowtop{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .splist h3{font-size:18px;color:var(--navy);line-height:1.24;letter-spacing:-.014em} .splist p{font-size:14.4px;line-height:1.58;color:var(--muted);margin:9px 0 0;max-width:70ch} .splist .tag{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--gold-ink);white-space:nowrap} .splist .go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-family:var(--disp); font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)} .splist .go svg{width:14px;height:14px;transition:transform .2s ease} .splist a:hover .go{color:var(--navy)} .splist a:hover .go svg{transform:translateX(3px)} /* the prompt panel. It is the only dark element in this section, which is what breaks the cream run */ .spask{position:sticky;top:24px;border-radius:16px;overflow:hidden; background:linear-gradient(158deg,var(--navy-ink),var(--navy) 92%);color:#fff; box-shadow:0 18px 40px rgba(11,31,69,.18)} /* ⚠ display:block on BOTH of these is LOAD-BEARING. They are s inside an , and `.spask` is a grid item so it gets blockified, but its children are not, so they stay inline. Padding on an inline box does not constrain block children, and the panel's copy ran straight past its own 26px padding into the rounded corner. */ .spask .ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden} .spask .ph img{width:100%;height:100%;object-fit:cover} .spask .ph::after{content:"";position:absolute;inset:0; background:linear-gradient(transparent 34%,rgba(11,31,69,.92))} .spask .bd{display:block;padding:24px 26px 30px;position:relative;overflow:hidden} /* ⚠ NO ARC WATERMARK HERE, tried twice. Over the photograph at the seam it read as a stray glyph on someone's hip; in the navy body's corner it collided with the call-to-action arrow. The panel already carries a photograph, a navy ground and a gold link. */ .spask h3{font-size:20px;color:#fff;line-height:1.26} .spask p{font-size:14.6px;line-height:1.62;color:#c6d2ea;margin:11px 0 0} .spask .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700; font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-top:16px} .spask .go svg{width:14px;height:14px;transition:transform .2s ease} .spask:hover .go svg{transform:translateX(3px)} @media(max-width:940px){ .sply{grid-template-columns:1fr;margin-top:34px} .spask{position:static} .spask .ph{aspect-ratio:16/7} } /* ⚠ at phone width the name and the category cannot share a line: the tag holds its own column, so "Emergency AC Repair" wrapped to two lines beside a one-word tag. column-reverse lifts the tag ABOVE the name without reordering the DOM, so the heading stays first for a screen reader. */ @media(max-width:560px){ .splist a{padding:20px} .splist .rowtop{flex-direction:column-reverse;align-items:flex-start;gap:6px} /* "Tell us what your AC is doing" is 29 uppercase characters at .14em tracking and set to nowrap, so it needs ~272px on one line. Trim the panel padding or it sits on the edge at 390px. */ .spask .bd{padding:22px 20px 26px} } /* ───────── 16. REACH — the 1000-1160px headline collision ───────── 🔴 A REAL DEFECT IN THE SHARED `.reachsec` LAYER, and it is on the AC hub too, unfixed. The band's grid is `1fr 460px`. The form panel keeps its 460px while the left column shrinks, and the header card is deliberately wider than its column so the panel overlaps it. `.rch-lower` is protected from that overlap by a max-width. **`.rch-head` is not**, so below ~1160px the panel sits on top of the lede. ⚠ MEASURE THE TEXT, NOT THE BOX. The card's element box is SUPPOSED to run under the panel, so a bounding-box comparison reports a false 122px "overlap" at 1440px where nothing is actually covered. The real test walks the text nodes with a Range and compares each line's client rects to the panel. Measured that way on the HUB, which still carries the defect: 1160px and up clear · 1120px 22px of the lede covered · 1080px 61px · 1040px 99px · 1000px 138px · 990px 148px · below 980px clear again, the wrap goes single-column. This page measures 0px covered at every width from 1440 down to 990 with the inset below. 🔑 How it was found: the same markup was clear on the hub at 1440 and broken here at every width, which pointed at the only difference between the two pages, a v16 override of the shared grid (see block 14). Removing that override left BOTH pages with this narrower, older collision. Lesson: when a component misbehaves on one page, render the same component on a page that does not link the page-scoped layer. The delta is the bug. ⚠ THIS FIX INSETS TEXT ONLY. It does not re-declare the grid, the columns or the card, because that is exactly what block 14 did and what made this section a landmine. The inset tracks the measured incursion and reaches 0 at 1160px, so nothing changes at desktop width. ⚠ The hub carries the same defect and is NOT fixed here: it does not link this file. Fixing it for the fleet means touching `.rch-head` in `ie.css`, which lands on all seven pages, so it needs the owner's word. Flagged rather than done. */ @media(min-width:981px) and (max-width:1160px){ .rch-head h2,.rch-head .lede{padding-right:calc((1160px - 100vw) * .98)} } /* ───────────────────────────────────────────────────────────────────────────── THREEFOLD HERO H1 · brief task 4c, built 2026-08-24 on the owner's ruling One

carrying three stacked lines: service name, page tagline, service area. ⚠ The h1's OWN font-size is left to `.hero h1` / `.hero-photo h1` in ie.css, so the tagline keeps inheriting the existing clamps and the responsive override at 1080px keeps working. Only the two subordinate lines set a size of their own. ⚠ `.eyebrow` already declares 12.5px, which is why it can sit inside a 62px h1 without a reset. If that declaration ever moves, this hero grows a 62px uppercase eyebrow. ───────────────────────────────────────────────────────────────────────────── */ /* The three lines are laid out by .hhead, not by the h1, because the H2 tagline has to render BETWEEN the h1's two lines. display:contents promotes the h1's children into this grid so order can interleave them. The h1 stays a real h1 in the DOM and in the a11y tree, and crawlers read the DOM, so the heading text is unaffected by any of this. DOM order is deliberately the reading order: service + area (h1), then the tagline (h2). */ .hhead{display:grid;justify-items:start;gap:.26em} .h3l{display:contents} .hhead > .eyebrow,.h3l > .eyebrow{order:1} .hhead > .h1t{order:2} .hhead > .h1a,.h3l > .h1a{order:3} .hhead .eyebrow{line-height:1.2;letter-spacing:.16em} /* line-height and the padding below it are BOTH clearance for `.u::after`, the gold underline. At 1.03 with no padding the underline sat hard against the service-area line on mobile. */ .hhead .h1t{display:block;line-height:1.06;padding-bottom:.12em} /* The service-area line has to out-rank the lede that follows it, or a line INSIDE the h1 reads as subordinate to the paragraph after it. It was 17px/500/#b9c7e0 against a lede of 18.5px in the same colour, which inverted the hierarchy. Bigger, heavier and brighter than the lede now. */ .hhead .h1a{display:block;font-family:var(--body);font-size:19px;font-weight:600; letter-spacing:-.004em;line-height:1.4;color:#dbe4f2} .hhead + .sub{margin-top:24px} @media(max-width:900px){.hhead .h1a{font-size:17.5px}} @media(max-width:640px){.hhead{gap:.3em}.hhead .h1a{font-size:16.5px;line-height:1.36}} /* ───────────────────────────────────────────────────────────────────────────── TWO RENDER FIXES FOUND BY MEASURING THE LIVE TEMPLATE PAGE, 2026-08-24 Both were pre-existing and both are visible. Neither is a content change. ───────────────────────────────────────────────────────────────────────────── */ /* 1. `.own-cred span span` was written for the CAPTION under each credential ("Licensed", "Comfort Specialist"). The GBP value spans are also `span span` inside that card, so `4.9 stars` rendered the rating as an 11px UPPERCASE BLOCK on its own line ABOVE the word "stars", i.e. the number was the smallest text in its own cell. Same for `100+ reviews`. A `[data-gbp-*]` span is a VALUE, never a caption. Attribute + class outranks class + two types, so this wins wherever the caption rule is declared. */ .own-cred [data-gbp-rating],.own-cred [data-gbp-count]{display:inline;font-size:inherit; color:inherit;letter-spacing:inherit;text-transform:none;margin-top:0} /* 2. `.pl-note .n` is absolutely positioned at top:2px, which lines the 01 up with its heading. The SECOND note adds padding-top:30px for its divider rule, and the number stayed at 2px, so 02 floated 28px above the heading it belongs to. Measured, not guessed: note 1 number 3682 / heading 3680, note 2 number 3848 / heading 3876. */ .pl-note + .pl-note .n{top:32px} @media(max-width:900px){.pl-note + .pl-note .n{top:26px}} @media(max-width:640px){.pl-note + .pl-note .n{top:auto}}