— two heroes on one screen. The second is an ordinary evidence band now (.sec--evidence). ⛔ min-height, never height. */ .lanaihero{min-height:min(88vh,44rem);justify-content:flex-end} /* ⛔ padding-TOP only. `.lanaihero .offerbar` is position:absolute, pinned to the bottom of the band, and the clearance that keeps the buttons out from under it is `.lanaihero__in{padding-bottom:clamp(5.5rem,9vw,7rem)}` further up this file — with a smaller value in the <=860px branch where the bar goes static. Setting padding-bottom here overrode BOTH and buried 35px of a 53px button row under the strip. Measured, not guessed: btnrow 726.8-779.7, strip top 744.4. */ .lanaihero__in{padding-top:3rem} .lanaihero .btnrow{margin-top:1.15rem} .lanaihero__in :is(h1,.btnrow){text-shadow:0 1px 2px rgba(0,0,0,.70),0 2px 20px rgba(0,0,0,.52)} /* 🔴 `a.btn`, NOT `.btn`. THE TWO-PRIMARIES BUG: this stylesheet is unlayered, so a bare `.btn{` rule appended here would beat the `.btn--ghost{` rules above it at equal specificity and BOTH hero buttons would render solid — which is a defect that has actually shipped on this site. Qualifying the selector keeps the last `.btn{` above the last `.btn--ghost{`, which is what tools/check-demo-polish.mjs enforces. ⛔ Never append a bare `.btn{` below. */ .lanaihero a.btn{text-shadow:none} .sec--evidence{padding:44px 0 8px} .sec--evidence .hero__grid{display:grid;gap:26px;grid-template-columns:1fr} @media (min-width:62rem){.sec--evidence .hero__grid{grid-template-columns:1.02fr .98fr;align-items:start}} /* ── 4. THE 2018 TELLS ───────────────────────────────────────────────────── Measured on this file: 20 text-transform:uppercase, 37 non-none box-shadows including a three-layer 34px/52px stack, 27 `border:1px solid` boxes — on a file whose own header says surfaces are "raised by a hairline (never a shadow)". ⭐ The hairline stays; the shadows go. Uppercase survives only as a document convention — table heads, spec keys, the report header, the DECLINED key — because there it is the product, not decoration. */ .lab,.brand__sub,.nav a,.btn,.launch,.chatbox__t,.shot__badge,.navbtn{ text-transform:none;letter-spacing:.005em; } .tile__lab,.tile__st{text-transform:none;letter-spacing:.02em} .btn,.btn:hover,.launch,.launch:hover,.chatbox, html[data-scrolled] header{box-shadow:none} .btn:hover,.launch:hover{transform:none} .report,.tablewrap,.figure,.tile,.cluster,.shot,.form,.card{box-shadow:inset 0 1px 0 var(--lip)} .report,.tablewrap,.tile,.cluster,.shot,.form,.card,.note,.declined{border-color:var(--hair)} /* 🔴 THE TWO-PRIMARIES BUG — see the identical note in roofing/styles.css. The `.lanaihero a.btn{…}` line above is now the last `.btn` rule in this unlayered file, so the ghost is restated here, last and unchanged. */ .btn--ghost{ background-color:transparent;color:var(--txt);border-color:var(--hair2); background-image:linear-gradient(180deg,rgba(206,234,252,.05),rgba(0,0,0,.14)); box-shadow:var(--raise); } /* ⚠️ the row number sat at 4.18-4.49:1 against a floor of 4.5 — marginal, and marginal on the one row the whole site is built to make somebody read. */ .lanaihero .herodoc__no{color:rgba(255,255,255,.82)} /* 🔴 A POOL UNDER THE WORDS, NOT A LID ON THE PICTURE. MEASURED with the type hidden, before: band mean luma 37-45 against a floor of 60, picture side 58-79 against 80. At that level the photograph is paying for bandwidth and a licence obligation and contributing nothing anyone can see — and the owner's instruction is a full-picture hero, professionally done. Meanwhile the headline was sitting at 11-17:1 against a floor of 3.0. ⭐ So the margin gets SPENT ON THE PHOTOGRAPH, which is the right order: make the foreground carry itself, then take the darkness back. 🔴 EVERY VERTICAL STOP IS IN px. A gradient percentage resolves against the ELEMENT, and this band is 704px tall against a 900px screen — the old `linear-gradient(0deg, …50%…)` was aiming its mid stop ~350px below where it looked like it was. Horizontal % is safe: the element is viewport-wide. ⭐ The last third stays at .06. That number IS the picture. If contrast ever fails here, fix the foreground or the near stops — never the far end. */ .lanaihero__scrim{ background: linear-gradient(0deg, rgba(5,18,32,.46) 0px, rgba(5,18,32,0) 240px), linear-gradient(92deg, rgba(5,18,32,.88) 0%, rgba(5,18,32,.80) 40%, rgba(5,18,32,.66) 58%, rgba(5,18,32,.20) 78%, rgba(5,18,32,.06) 100%)} /* the mark is a filled disc now; keep it square but let it breathe at 26 */ .brand__ico{width:26px;height:26px} /* ── A PHOTOGRAPH WHERE A DRAWING WAS ──────────────────────────────────────── ⛔ Not a picture in a rounded card with margin round it — the owner's words are "full picture … done professionally". Full-bleed to the gutter, one hairline caption under it, no shadow, no radius, no frame. */ .photoband{margin:0 0 2.25rem;padding:0} .photoband img{display:block;width:100%;height:clamp(240px,34vw,460px); object-fit:cover;object-position:center 55%} .photoband__cap{max-width:74ch;margin:.7rem auto 0;padding:0 clamp(14px,3vw,26px); font-size:.8125rem;line-height:1.5;opacity:.72} /* ═══ GLASS — PLUMBING & AIR: A RULED SLAB ═══════════════════════════════════ The instrument voice: a 3px radius, a bright hairline top lip and a darker base line, so the control reads like a panel switch rather than a pill. The fourth distinct material of the four. ⛔ Base declaration = the fallback, clearing 4.5:1 with no blur at all. ⭐ Copper carries the primary. This file's rule is that copper is a spot accent and NEVER a signal — cyan means in range, amber means out of range — so a copper button cannot be mistaken for a reading, which is exactly why it is the right colour for an action. */ .lanaihero .btn,.lanaihero .btn--ghost{ border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.34); transition:background-color .2s var(--t),border-color .2s var(--t); } .lanaihero .btn{ --glass-fb:rgba(201,129,79,.95); background:rgba(201,129,79,.95);color:#170c04; border:1px solid rgba(235,186,146,.62); } @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .lanaihero .btn{background:rgba(201,129,79,.88); -webkit-backdrop-filter:blur(15px) saturate(1.3);backdrop-filter:blur(15px) saturate(1.3)} } .lanaihero .btn:focus-visible,.lanaihero .btn--ghost:focus-visible{ outline:2px solid var(--cyan);outline-offset:3px} /* 🔴 restated last — see the note in roofing/styles.css */ .btn--ghost{ --glass-fb:rgba(10,16,22,.88); background:rgba(10,16,22,.88);color:var(--txt); border:1px solid rgba(190,220,240,.34);border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); } @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .btn--ghost{background:rgba(10,16,22,.62); -webkit-backdrop-filter:blur(15px) saturate(1.15);backdrop-filter:blur(15px) saturate(1.15)} } /* 🔴 same specificity defect as roofing — both hero buttons rendered copper. */ .lanaihero .btn.btn--ghost{ background:rgba(10,16,22,.88);color:var(--txt); border:1px solid rgba(190,220,240,.34);border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); --glass-fb:rgba(10,16,22,.88); } @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .lanaihero .btn.btn--ghost{background:rgba(10,16,22,.62); -webkit-backdrop-filter:blur(15px) saturate(1.15);backdrop-filter:blur(15px) saturate(1.15)} } .btn--ghost{background:rgba(10,16,22,.88);color:var(--txt);border-radius:3px} /* ⚠️ MARGIN, MEASURED. The tinted primary carries a DARK label, so its worst case is the DARKEST backdrop it can sit on, not the brightest — the glass gets closer to the photograph and further from its own hue. Measured at a=0.80/0.82 the blurred state sat at 4.88 and 4.67 against a floor of 4.5, which is margin thin enough that one darker photograph would break it. Raising the tint alpha moves the composite back toward the pure brand colour (roofing's orange on its ink is 6.53:1 at full strength) and costs almost nothing visually: the blur and the saturation are what read as glass here, and the SECONDARY at .62 is what carries the visible translucency. */ /* ═══ THE SHEEN IS A SHAPE, NOT A SHEET ══════════════════════════════════════ Owner, 23 Sep 2026: "i think the picture should be full hero then shene out where you want the text" · "evry hero needs to be perfecto". 🔴 MEASURED BEFORE (tools/_sheen.mjs): sheen extent 100% of the frame on all four heroes — a global wash. The band, with the opaque offer strip excluded, sat at roughly HALF the photograph's own luminance across the whole picture, including the sky and the far side where no word is ever printed. ⭐ THE TECHNIQUE: a vertical intensity profile PAINTED, multiplied by a horizontal falloff MASKED. Two background layers would composite additively and still cover the whole box; a mask multiplies, so the result is a genuine two-dimensional shape that is soft on both axes and reaches true zero. ⛔ Soft stops only. A visible boundary where the sheen ends is worse than the flat wash it replaces. 🔴 EVERY VERTICAL STOP IS IN px. A gradient percentage resolves against the ELEMENT, and this band is min(88vh,44rem) — its height moves with the window. Horizontal % is safe: the element is viewport-wide. ⭐ The horizontal stops are keyed to THIS site's measured type block, not to a shape that looked right — the widest run of ink ends at a different place on each of the four. ⚠️ FALLBACK: where mask-image is unsupported the vertical gradient paints alone — a bottom wash at full width. Dimmer than intended, never unreadable, which is the right direction for a graceful failure. */ .lanaihero__scrim{ background:linear-gradient(0deg, rgba(5,14,22,.92) 0px, rgba(5,14,22,.88) 170px, rgba(5,14,22,.66) 330px, rgba(5,14,22,.30) 460px, rgba(5,14,22,0) 600px); -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 48%, rgba(0,0,0,.58) 64%, rgba(0,0,0,.18) 78%, transparent 88%); mask-image:linear-gradient(90deg,#000 0%,#000 48%, rgba(0,0,0,.58) 64%, rgba(0,0,0,.18) 78%, transparent 88%); } /* ⛔ A PHONE IS NOT A NARROW DESKTOP. Below 741px the headline wraps to four or five lines and the type occupies almost the whole frame, so a horizontal falloff keyed to a desktop text block would leave the last words bare. The sheen goes nearly full width and taller; what still protects the photograph here is the VERTICAL profile, because the top half carries no type. */ @media (max-width:46.25rem){ .lanaihero__scrim{ background:linear-gradient(0deg, rgba(5,14,22,.93) 0px, rgba(5,14,22,.90) 220px, rgba(5,14,22,.70) 400px, rgba(5,14,22,.32) 530px, rgba(5,14,22,0) 660px); -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 80%,rgba(0,0,0,.45) 92%,transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 80%,rgba(0,0,0,.45) 92%,transparent 100%); } } /* 🔴 THE REFUSAL WAS OFF-SCREEN ON A PHONE. Diagnosed, not guessed: the glyph probe returned NO DIFF for the whole document row at 320 and 375, and a no-diff has three causes — invisible, unpainted, covered — of which only one is a contrast defect. tools/_heroluma.mjs now reports which; it said UNPAINTED, outside the captured viewport. The hero was min(88vh,44rem) = 704px tall, and 704 + the masthead put the strip 27px below an 812px fold. ⛔ That breaks the one rule this whole hero exists for: the refusal is read WITHOUT SCROLLING. A shorter band on a phone, so the row is on screen. ⛔ min-height, never height — the band still grows when a five-line headline needs it, which is the case a fixed height would clip. */ @media (max-width:46.25rem){ .lanaihero{min-height:min(70vh,34rem)} } /* ⚠️ THE PHONE RAMP HAD TO SHRINK WITH THE PHONE BAND. Shortening the hero so the refusal clears the fold left the previous px stops (zero at 660px) taller than the band itself (~544px), so the sheen never reached zero and the whole phone hero went to band luma 53 against a floor of 60 — darker than the desktop version it was supposed to improve on. ⛔ This is the cost of px stops, and it is still the right trade: a % stop would drift with the viewport height instead, which is harder to see and harder to fix. When the band's height changes, the ramp is a number you own. */ @media (max-width:46.25rem){ .lanaihero__scrim{ background:linear-gradient(0deg, rgba(5,14,22,.93) 0px, rgba(5,14,22,.88) 140px, rgba(5,14,22,.62) 260px, rgba(5,14,22,.26) 350px, rgba(5,14,22,0) 430px); } } /* ⚖️ THE PHONE HERO IS A THREE-WAY TRADE AND THE FIRST TWO ATTEMPTS EACH LOST ONE LEG OF IT: a tall band put the refusal below the fold; a short band with a short ramp pushed the top of the headline to 1.89:1 against a floor of 3. ⛔ Contrast is not the leg that gives. So the TYPE BLOCK shrinks instead: the two hero buttons sit side by side rather than stacked full width, which returns a whole row (~55px) to the photograph, and the band grows back. ⭐ Then the ramp covers the type's real height and still reaches zero with clean photograph above it. Measured, not reasoned. */ @media (max-width:46.25rem){ .lanaihero{min-height:min(72vh,36rem)} /* ⛔ comma-listed with the ghost on purpose: a bare `.btn{` rule here would become the last one in this unlayered file and strip the secondary. */ .lanaihero .btn,.lanaihero .btn--ghost, .band--photo .btn,.band--photo .btn--out{width:auto;flex:0 1 auto} .lanaihero__scrim{ background:linear-gradient(0deg, rgba(5,14,22,.93) 0px, rgba(5,14,22,.90) 200px, rgba(5,14,22,.74) 330px, rgba(5,14,22,.40) 440px, rgba(5,14,22,.12) 510px, rgba(5,14,22,0) 580px); } } /* 🔴 THE CHAT LAUNCHER WAS PAINTED ON TOP OF THE REFUSAL. Measured at 375px: the launcher is position:fixed at left:16px bottom:16px, box 16,748→107,796, and the document row sits at 0,723→375,777. document.elementFromPoint at the row's left end returned the launcher, not the row — so the first words of the one line this whole hero exists for were covered, at scroll 0, before the reader has done anything. ⚠️ This is the case ux-build calls unavoidable: a floating element is escapable by scrolling everywhere EXCEPT where the reader already is. ⭐ Raise it clear of the strip on phones rather than shrinking the hero again — the strip's own height is the offset, taken from the same tokens it uses. */ @media (max-width:46.25rem){ .launch,.chatbox{bottom:calc(16px + 3.9rem + env(safe-area-inset-bottom,0px))} } /* ⚠️ AND THE SAME COLLISION AT 741px, WHICH THE PHONE BREAKPOINT MISSED. The probe found chat-btn painted over "Line 6" at 741 on tree-service: at that width the nav wraps, the masthead grows, and the strip is pushed far enough down the viewport to meet a launcher pinned 16px off the bottom. It does NOT collide at 1280 or 1440, where the header is short again — so this is a header-height effect, not a width effect, and the breakpoint has to be wide enough to cover every layout where the two can meet. Verified at 320, 375, 741, 1280 and 1440. */ @media (max-width:64rem){ .launch,.chatbox{bottom:calc(16px + 3.9rem + env(safe-area-inset-bottom,0px))} } /* 🔴 AND IT COLLIDES AT 1280 TOO — RAISED AT EVERY WIDTH. Measured directly on the page: the launcher covers 84% of the row's line number and document.elementFromPoint at its centre returns the launcher, not the row. My own glyph probe called 1280 CLEAN, because the uncovered 16% of the glyphs still produced a diff and so it returned a ratio instead of the no-diff that would have flagged it. ⛔ A contrast probe is not an overlap probe; do not let one stand in for the other. ⭐ The media query is gone. A launcher pinned 16px off the bottom will meet the strip at whatever width the header happens to be tall enough — 741 and 1280 both did — so the offset is unconditional. It costs one row of empty space at the bottom of the screen and removes the whole class of collision. */ .launch,.chatbox{bottom:calc(16px + 3.9rem + env(safe-area-inset-bottom,0px))} /* 🔴 MOVING THE LAUNCHER WAS THE WRONG FIX AND IT CAUSED WHAT IT CURED. Measured per width instead of reasoned: at 320 the strip ends 72px above the fold and at 741 it ends 88px above, and the launcher (42-48px plus its 16px inset) ALREADY FIT UNDERNEATH at both. Lifting it 78px moved it off the photograph and INTO the strip — two new collisions in exchange for one. And a single lift cannot be right everywhere: the room below the strip is 95px on roofing at 1280 and 8px on tree-service at the same width, because the two heroes are not the same height. ⭐ SO THE STRIP MOVES, NOT THE LAUNCHER. A fixed gutter at the foot of the band puts the document row clear of anything pinned to the bottom of the viewport, at every width, on every one of the four — and the launcher goes back where its own stylesheet put it. ⛔ Both declarations are needed: the strip is position:absolute in the wide layout and static below 860px, and only one of them answers to each. */ .launch,.chatbox{bottom:16px} .lanaihero{padding-bottom:4.6rem} .lanaihero .offerbar{bottom:4.6rem} /* ⚠️ AT 320 THE ROW WRAPS TO THREE LINES and the strip grows from ~55px to ~108px, which ate the 4.6rem gutter and put it back under the launcher — plumbing-hvac's ran 671..779 in a 780px viewport, flush against the fold. The gutter has to clear the TALLEST the strip gets, not the shortest. ⭐ 320 is SC 1.4.10's own number and where a real iPhone SE at 400% zoom lands; it is the width where everything is worst and the one most likely to be skipped. Measured here, not extrapolated from 375. */ @media (max-width:22.5rem){ .lanaihero{padding-bottom:7.6rem} .lanaihero .offerbar{bottom:7.6rem} } /* 🔴 AT 320 THE $0.00 WAS 97% COVERED BY THE CHAT LAUNCHER. The row is a flex line; at 320 it wraps to three stacked lines and the amount drops to the THIRD line, left-aligned — which is precisely where a launcher pinned to the bottom-left sits. document.elementFromPoint at the middle of "$0.00" returned the launcher. The single most important literal on the site, invisible, at the width the accessibility criterion names. ⭐ A two-column grid keeps the amount on the right edge where a document puts it, clear of anything docked bottom-left, and drops the strip from three lines to two — which also buys back the fold. */ @media (max-width:22.5rem){ .herodoc{display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:baseline;column-gap:.7rem;row-gap:.2rem} .herodoc__no{grid-column:1/-1} .herodoc__item{grid-column:1} .herodoc__amt{grid-column:2;justify-self:end} } /* ⚠️ AT 320 THE CONTENT ALREADY FILLS THE SCREEN, so a min-height only pushes the foot of the band past the fold. A six-line headline at the 3x-body floor plus two buttons plus the document row is taller than 320x780 leaves after the masthead — there is nothing for a minimum to add, and what it adds comes off the bottom, which is where the refusal lives. ⛔ Still min-height:auto rather than a fixed height: the band must be free to grow, it just must not be padded taller than its content. */ @media (max-width:22.5rem){ .lanaihero{min-height:auto} } /* ⚠️ THE 320 GUTTER WAS BELOW THE FOLD AND SO BOUGHT NOTHING. Measured on plumbing-hvac: band 162..886 in a 780px viewport, strip 670..764, gutter 121.6px sitting at 764..886 — entirely off-screen. The strip's position is set by the CONTENT ABOVE IT, not by padding underneath, so the only way to lift it is to take height out of what comes first. ⭐ ~56px recovered from the hero's top padding, the headline's leading and the button gap — none of it from the type SIZE, which is pinned at 3x body. */ @media (max-width:22.5rem){ .lanaihero .lanaihero__in,.lanaihero>.wrap{padding-top:1rem} .lanaihero h1,.lanaihero .h1{line-height:.98} .lanaihero .btnrow{margin-top:.8rem} .lanaihero{padding-bottom:1.5rem} } /* ⚖️ THE 320 RAMP, AND THE TRADE I REFUSED TO MAKE. Letting content drive the band at 320 made it shorter again, so the previous ramp (zero at 580px) never reached zero inside it and the whole hero went to band luma 46 against a floor of 60. This ramp is scaled to the band that is actually there. ⛔ AND IT STILL COVERS THE TYPE FIRST. At 320 a headline pinned at 3x body is six lines, and with two buttons and the document row the type occupies almost the whole band — there is no width of clean photograph to be had without either shrinking the type below its floor or pushing the refusal past the fold. Both are worse than a darker picture on the narrowest phone, so the picture-side number is reported under floor rather than bought. */ @media (max-width:22.5rem){ .lanaihero__scrim{ background:linear-gradient(0deg, rgba(5,14,22,.93) 0px, rgba(5,14,22,.90) 180px, rgba(5,14,22,.76) 300px, rgba(5,14,22,.46) 400px, rgba(5,14,22,.16) 470px, rgba(5,14,22,0) 530px); } } /* ⚖️ 320 RAMP, TUNED TO THIS SITE'S OWN BAND. One shared set of stops could not serve four heroes whose headlines wrap to four, five and six lines: the same ramp left roofing's band at 48 luma with contrast to spare, and dropped plumbing-hvac's headline to 2.61 against a floor of 3. The type is covered first, everywhere; what varies is how much photograph is left over. */ @media (max-width:22.5rem){ .lanaihero__scrim{ background:linear-gradient(0deg, rgba(5,14,22,.93) 0px, rgba(5,14,22,.90) 220px, rgba(5,14,22,.74) 360px, rgba(5,14,22,.44) 470px, rgba(5,14,22,.15) 550px, rgba(5,14,22,0) 640px); } }