/* ========================================================================== GOOGLE ADS — VISUAL MASTER v1 -------------------------------------------------------------------------- The art-direction layer for google-ads.html. Built and approved as /google-ads-visual-master-v1.html, then APPLIED to the live page on 2026-09-02 16:50. Both pages load this file, so they render identically and there is one source of truth; the preview is kept as the before/after reference (its shots are in gads-vm-v1/shots/). The backup of the page as it was before the apply is google-ads.html.backup-before-vm-v1-20260902-165022. No shared file was edited to make any of this work — not site/ds.css, not gads-hero/, gads-services/, gads-clients/, gads-wcu/ or gads-system-clarity-w8/. This file is LAST in the head, so it settles the cascade at matching specificity and never needs !important except where the file it answers used one. What it changes, and why: 0 · one type ladder three sections opened at three different sizes (69px / 69px / 45px). One scale now, a step below the hero, so the hero is the loudest thing on the page and nothing else competes. 1 · one section header left, editorial, eyebrow on an accent rule. Cost per header falls from ~330px to ~165px. 2 · one ground ladder white · band · white · band · white · footer. Every boundary is now a change of ground. 3 · hero the totals become a ruled trust rail; the lede is a block, not a banner. 4 · proof band Success Stories stops being a 16px footnote: a real block heading, ten equal cards on one grid instead of a clipped rail, a card that reads name-first, and a panel that shows the before/after as the number it is. 5 · services picture 1:1 -> 5:4, a controlled card, and the closing banner becomes a brand-tinted band. 6 · system the plate on a band; no height jump between tabs (vm.js measures once). 7 · why choose us the summary row becomes a four-cell ledger. 8 · phones one gutter, one heading scale, controlled section height, no oversized type. ========================================================================== */ :root{ /* the one heading ladder for the three section heads */ --vm-h2: clamp(27px, 3.05vw, 44px); --vm-h2-lh: 1.02; --vm-h2-ls: -.042em; --vm-sub: clamp(14.8px, 1.03vw, 16.5px); /* the two grounds the page alternates between */ --vm-paper: #FFFFFF; --vm-band: #F1F5FC; --vm-band-edge: #DEE7F5; /* the section rhythm — one pair of values for every section */ --vm-pt: clamp(46px, 4.6vw, 82px); --vm-pb: clamp(48px, 4.8vw, 86px); } /* ========================================================================== 1 · THE SECTION HEADER — one composition, three sections -------------------------------------------------------------------------- Eyebrow on its own line behind a short accent rule, the headline left and held to a readable measure, and the standing paragraph pushed to the right and set on the headline's last baseline. Where a section has no paragraph (Why Choose Us) the headline simply keeps the row to itself, so the two shapes are obviously the same object. ========================================================================== */ #gads-services .sv-head, #w8-system .w8-head, #wcu-ga .wcx-head{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px clamp(28px, 3.4vw, 64px); max-width: none; margin-inline: 0; text-align: left; } #gads-services .sv-head .k-eyebrow, #w8-system .w8-head .w8-eye, #wcu-ga .wcx-head .k-eyebrow{ flex: 1 0 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(12px, 1.2vw, 18px); color: var(--ink-2); } #gads-services .sv-head .k-eyebrow::before, #w8-system .w8-head .w8-eye::before, #wcu-ga .wcx-head .k-eyebrow::before{ content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; } #gads-services .sv-head .k-h2, #w8-system .w8-head .w8-h2, #wcu-ga .wcx-head .k-h2{ flex: 1 1 auto; min-width: 0; max-width: 21ch; margin: 0; margin-inline: 0; font-size: var(--vm-h2); line-height: var(--vm-h2-lh); letter-spacing: var(--vm-h2-ls); font-weight: 800; text-wrap: balance; } #gads-services .sv-head .k-sub, #w8-system .w8-head .w8-sub{ flex: 0 1 42ch; min-width: 0; margin: 0 0 .3em auto; max-width: 42ch; font-size: var(--vm-sub); line-height: 1.56; color: var(--ink-2); } /* ========================================================================== 2 · THE GROUND LADDER white · band · white · band · white · footer band ========================================================================== */ #hx{ background: var(--vm-paper); } #q7.cc{ background: var(--vm-band); border-top: 1px solid var(--vm-band-edge); border-bottom: 1px solid var(--vm-band-edge); } #gads-services.sv{ background: var(--vm-paper); } #w8-system.w8{ background: var(--vm-band); border-top: 1px solid var(--vm-band-edge); border-bottom: 1px solid var(--vm-band-edge); } #wcu-ga.wcx{ background: var(--vm-paper); border-top: 0; } #gads-services.sv{ padding: var(--vm-pt) 0 var(--vm-pb); } #w8-system.w8{ padding: var(--vm-pt) 0 var(--vm-pb); } #wcu-ga.wcx{ padding: var(--vm-pt) 0 clamp(44px, 4.2vw, 74px); } /* ========================================================================== 3 · HERO — typography-led -------------------------------------------------------------------------- The words were already the strongest thing on the page; what was missing was a floor. The three totals stop being a grey sentence and become a ruled rail of three cells, which gives the centred column something to stand on and stops the second line it used to take on a phone. ========================================================================== */ /* -------------------------------------------------------------------------- THE FOLD The hero already lent the bottom of the first screen to #q7. It lent 183px, which showed the heading, one row and half of another — a proof band cut through the middle. The proof band is now 254px on a 1440x900 screen and 230px on a phone, so the hero lends exactly that: the first screen ends on a WHOLE section, heading, both rows and the ground it sits on. -------------------------------------------------------------------------- */ #hx.h3{ position: relative; --h3-show: 254px; --h3-show-m: 230px; } #hx .h3-tex{ background-image: linear-gradient(to right, var(--gridline) 1px, transparent 1px), linear-gradient(to bottom, var(--gridline) 1px, transparent 1px), radial-gradient(90% 62% at 50% -6%, #F2F7FF 0%, rgba(255,255,255,0) 72%); background-size: 64px 64px, 64px 64px, 100% 100%; -webkit-mask-image: none; mask-image: none; } /* the grid itself still fades; the wash behind it does not */ #hx .h3-tex::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(115% 70% at 50% 22%, rgba(255,255,255,0) 34%, #fff 84%); } #hx .h3-say{ padding-block: clamp(20px, 3.4vh, 46px) clamp(26px, 4.4vh, 60px); } #hx .h3-lede{ max-width: 62ch; } #hx .h3-cta{ margin-top: clamp(22px, 3.2vh, 32px); } /* the totals are set in section 8, where the inline markup is explained */ /* ========================================================================== 4 · THE PROOF BAND — Success Stories -------------------------------------------------------------------------- PROBLEM The page's only real proof was a 183px strip with a 16px heading and ten pills whose middles were empty, the tenth cut in half by the lane's edge. It read as a formality between two large sections, which is the opposite of what it is. FIX A block heading in the page's second type step; ten equal cards on one five-column grid, so nothing is clipped and every client is visible at once; a card that leads with the name; and a panel that gives the before/after the scale of a result. ========================================================================== */ #q7.cc{ padding: clamp(26px, 3.6vh, 46px) var(--pad) clamp(28px, 3.8vh, 50px); } #q7 .mp{ width: min(1400px, 100%); } #q7 .mp-head{ display: flex; align-items: baseline; gap: 14px; } #q7 .mp-t{ font-size: clamp(19px, 1.85vw, 26px); font-weight: 800; letter-spacing: -.042em; line-height: 1.05; color: var(--ink); } #q7 .mp-head::after{ content: ""; flex: 1; height: 1px; background: var(--vm-band-edge); align-self: center; } /* ---- the eighteen, as a two-row rail ------------------------------------ The row keeps the approved D5 shape — two rows that travel together — and gains the one thing it was missing: every column is the same width, so the rail stops at a whole card and the peek is a deliberate slice of the next one rather than a name cut in half by the lane. The section's own rail language now matches the services rail below it. */ @media (min-width: 861px){ #q7 .mp-wrap{ position: relative; } #q7.cc.d5 .mp-row{ --q7-gap: 10px; --q7-peek: 74px; --q7-cols: 5; grid-auto-columns: calc((100% - (var(--q7-cols) - 1) * var(--q7-gap) - var(--q7-peek)) / var(--q7-cols)); gap: var(--q7-gap); margin-top: clamp(15px, 1.5vw, 20px); scroll-padding-inline: 0; } /* the ends: no fade. 54px of the band's own colour used to be washed over the first and last client card; removed 2026-09-09 with every other edge fade on the site. The peek and the rail's own controls carry the "there is more" signal, and a card now stops on a clean edge. */ } /* `min-width:auto` is a grid item's default, and this item's min-content is a business name set `white-space:nowrap`. Without this the card refuses to fit its own track, the tracks stay at the width they were calculated at, and every card overlaps the one after it — visible as the action arrow vanishing under its neighbour, and as a rail with no gaps in it. Same failure as grid-1fr-overflows-on-phones, one level up. */ @media (min-width: 861px){ #q7.cc.d5 .mp-row > .mp-i{ width: auto; min-width: 0; } #q7 .mp-w{ min-width: 0; } } @media (min-width: 861px) and (max-width: 1339px){ #q7.cc.d5 .mp-row{ --q7-cols: 4; --q7-peek: 66px; } } @media (min-width: 861px) and (max-width: 1139px){ #q7.cc.d5 .mp-row{ --q7-cols: 3; --q7-peek: 58px; } } /* ---- the card ----------------------------------------------------------- */ #q7 .mp-i{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 13px 11px 11px; border-radius: 13px; border: 1px solid #E1E8F3; background: #fff; box-shadow: 0 1px 2px rgba(15,27,61,.04); transition: border-color .18s ease, background .18s ease, box-shadow .22s ease, transform .18s ease; } #q7 .mp-i:hover{ background: #fff; border-color: #BFD6F7; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,27,61,.05), 0 12px 24px -14px rgba(15,27,61,.45); } #q7 .mp-m{ width: 38px; height: 38px; border-radius: 11px; font-size: 12.4px; letter-spacing: .01em; } #q7 .mp-w{ display: block; } #q7 .mp-i b{ display: block; font-size: 13.6px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; color: var(--ink); } #q7 .mp-i .mp-s{ margin-top: 3px; font-size: 11.2px; font-weight: 500; letter-spacing: -.005em; line-height: 1.2; color: var(--ink-3); } /* ---- the way in ---------------------------------------------------------- Eighteen cards, each ending in the words "See Results", made the wall read as eighteen buttons rather than eighteen businesses — and the 93px those words cost was exactly what was truncating "Happy Pettings" and "Elite Flavours". On a desktop the words step back into a round arrow and give their width to the name; the words stay in the markup, off-screen but still read out, so the button is still announced as "Dr. Pearl's, Dental Clinic, See Results". The phone rail, which has the room and was approved with the words visible, keeps them. -------------------------------------------------------------------------- */ #q7 .mp-i .cc-cue{ display: inline-flex; align-items: center; gap: 6px; font-size: 11.6px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-4); white-space: nowrap; transition: color .18s ease; } #q7 .mp-i .cc-cue svg{ width: 13px; height: 13px; flex: none; transition: transform .2s ease; } #q7 .mp-i:hover .cc-cue{ color: var(--accent); } #q7 .mp-i:hover .cc-cue svg{ transform: translateX(3px); } @media (min-width: 861px){ #q7 .mp-i .cc-cue{ display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F1F5FB; color: var(--ink-4); transition: background .18s ease, color .18s ease; } #q7 .mp-i .cc-cue .cc-tx{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } #q7 .mp-i .cc-cue svg{ width: 14px; height: 14px; } #q7 .mp-i:hover .cc-cue{ background: var(--accent); color: #fff; } #q7 .mp-i:hover .cc-cue svg{ transform: none; } #q7 .mp-i.is-sel .cc-cue{ background: var(--accent); color: #fff; } } /* selected: the card is the panel's parent, so it takes the panel's edge */ #q7 .mp-i.is-sel, #q7 .mp-i.is-sel:hover{ background: #F3F8FF; border-color: #A9C9F7; transform: none; box-shadow: 0 0 0 1px #A9C9F7, 0 10px 22px -14px rgba(26,115,232,.55); } #q7 .mp-i.is-sel .cc-cue{ color: var(--accent); } /* on a desktop the cue is a filled chip, and the selected card fills it — declared after the phone rule above, because a media query adds no specificity and source order is all that separates the two */ @media (min-width: 861px){ #q7 .mp-i.is-sel .cc-cue, #q7 .mp-i.is-sel:hover .cc-cue{ background: var(--accent); color: #fff; } } /* ---- the panel ---------------------------------------------------------- */ #q7 .mp-in{ padding-top: clamp(14px, 1.5vw, 20px); } #q7 .mp-card{ border-radius: 18px; border: 1px solid #D8E4F5; background: #fff; box-shadow: 0 2px 6px rgba(15,27,61,.05), 0 24px 52px -30px rgba(15,27,61,.34); } #q7 .mp-crumb{ padding: 11px 20px; background: #F7FAFE; border-bottom: 1px solid var(--line-2); } #q7 .mp-body{ padding: clamp(18px, 2vw, 26px) clamp(18px, 2.1vw, 28px) clamp(18px, 2vw, 24px); gap: clamp(20px, 2.4vw, 36px); align-items: start; } #q7 .mp-strip{ margin-top: clamp(15px, 1.6vw, 20px); border: 1px solid var(--line-b); border-radius: 14px; overflow: hidden; background: var(--line-b); } #q7 .mp-strip .mp-s{ padding: 13px 16px 14px; } #q7 .mp-strip .mp-s em{ font-family: var(--mono); font-size: 9.6px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); } #q7 .mp-strip .mp-s b{ margin-top: 7px; font-size: 27px; line-height: 1; color: var(--ink); } #q7 .mp-strip .mp-s.is-now{ background: #F3FAF5; } #q7 .mp-strip .mp-s.is-now b{ color: var(--g-green); } #q7 .mp-strip .mp-s.is-txt b{ font-size: 14px; line-height: 1.35; margin-top: 8px; } #q7 .mp-strip .mp-s i{ margin-top: 5px; font-size: 10.6px; color: var(--ink-3); } #q7 .mp-foot{ margin-top: clamp(16px, 1.7vw, 21px); } /* ========================================================================== 5 · OUR GOOGLE ADS SERVICES — card-led -------------------------------------------------------------------------- PROBLEM A 69px two-line headline over 230px of empty band, then a rail whose picture was a full square — the tallest, loudest thing in the section was a drawing, and the card's words came second. The closing banner was a white card on a nearly white ground. FIX The header is now the page's standard one. The picture drops to 5:4, which is 75px off every card and puts the service name back on top. The rail keeps its snap, its peek and its fades — the fades are simply repainted for a white ground. The banner becomes a brand-tinted band, so the section ends on the one surface that is not white. ========================================================================== */ #gads-services .sv-group.is-bare{ margin-top: clamp(24px, 2.6vw, 38px); padding-bottom: 0; border-bottom: 1px solid var(--line); } #gads-services .y5{ margin-top: clamp(18px, 1.9vw, 26px); } /* the picture: a landscape well, not a square */ #gads-services #gsvc-six .sc-pic .cv-well{ aspect-ratio: 5/4; } #gads-services #gsvc-six .sc-pic{ border-bottom-color: var(--he); } #gads-services #gsvc-six .sc{ border-radius: 20px; border-color: #E2E8F2; box-shadow: 0 1px 2px rgba(15,27,61,.04), 0 18px 38px -22px rgba(15,27,61,.30); } #gads-services #gsvc-six .sc-txt{ padding: 18px 20px 19px; } #gads-services #gsvc-six .sc-name{ font-size: clamp(19px, 1.55vw, 22px); letter-spacing: -.044em; } #gads-services #gsvc-six .sc-line{ margin-top: 9px; font-size: 14.2px; line-height: 1.5; color: var(--ink-2); } #gads-services #gsvc-six .gsa{ margin-top: 14px; } #gads-services #gsvc-six .gsa-h{ padding: 11px 0; font-size: 13.2px; } /* the ends of the rail carry no wash at all any more. Widening the fade was an attempt to stop it reading as a printing fault; removing it (2026-09-09) is the answer that actually works — the card ends where its border ends. */ /* ---- the section's ending ------------------------------------------------ */ #gads-services .sv-next{ margin-top: clamp(30px, 3.2vw, 46px); padding: clamp(24px, 2.5vw, 34px) clamp(24px, 2.8vw, 40px); border-radius: 22px; background: linear-gradient(180deg, #F4F8FF 0%, #EDF3FE 100%); border: 1px solid var(--ds-edge); box-shadow: 0 1px 2px rgba(15,27,61,.03), 0 22px 46px -34px rgba(15,27,61,.30); align-items: center; } #gads-services .sv-next-t b{ font-size: clamp(19px, 1.55vw, 24px); letter-spacing: -.04em; line-height: 1.16; } #gads-services .sv-next-t p{ margin-top: 9px; max-width: 52ch; font-size: 14.6px; color: var(--ink-2); } #gads-services .sv-next-a{ align-items: flex-end; gap: 11px; } #gads-services .sv-next-acts{ display: flex; align-items: center; gap: 12px; } #gads-services .sv-btn{ height: 50px; border-radius: 12px; } #gads-services .sv-btn.is-ghost{ background: #fff; color: var(--ink); border: 1px solid var(--ds-edge); box-shadow: 0 1px 2px rgba(15,27,61,.05); } #gads-services .sv-btn.is-ghost:hover{ background: #F7FAFF; border-color: #B9D2F8; filter: none; } #gads-services .sv-time{ text-align: right; font-size: 12.4px; } /* ========================================================================== 6 · OUR GOOGLE ADS SYSTEM — process-led -------------------------------------------------------------------------- PROBLEM The section opened at 45px while the two around it opened at 69px, so the three headers did not read as one family. The plate was near-white on white, so it had no edge. And the canvas changed height between a three-step stage and a five-step one, which moved everything under it. FIX The header joins the ladder. The plate now sits on the band, so its three surfaces — recessed rail, sheet, white box — separate properly. vm.js measures the three panels once and pins the canvas to the tallest, so a tab change swaps content and moves nothing. ========================================================================== */ #w8-system .w8-area{ margin-top: clamp(26px, 2.8vw, 42px); } /* four surfaces now, not three: the band the section sits on, the recessed rail the closed tabs sit in, the sheet the open tab opens onto, and the white box a step is printed on. Each one is a step lighter than the last, which is what lets a plate read as raised without a heavy shadow. */ #w8-system.w8{ --w8-sheet: #F7FAFF; --w8-rail: #E6EDF8; --w8-edge: #D9E4F4; } #w8-system .w8-area{ box-shadow: inset 0 0 0 1px var(--w8-edge), 0 1px 3px rgba(15,27,61,.05), 0 26px 54px -34px rgba(15,27,61,.34); } #w8-system .w8-step{ background: #FFFFFF; box-shadow: inset 0 0 0 1px #E4EBF7, 0 1px 2px rgba(15,27,61,.04), 0 14px 30px -24px rgba(15,27,61,.42); } #w8-system .w8-num b{ font-size: clamp(24px, 2vw, 31px); } #w8-system .w8-sn{ font-size: clamp(18px, 1.42vw, 22px); } #w8-system .w8-li{ gap: clamp(8px, .7vw, 10px); } #w8-system .w8-li li{ font-size: clamp(14.4px, 1vw, 15px); font-weight: 600; } #w8-system .w8-canvas{ transition: none; } #w8-system .w8-close{ margin-top: clamp(22px, 2.4vw, 34px); } #w8-system .w8-close p{ font-size: 14.6px; } /* ========================================================================== 7 · WHY CHOOSE US — trust-led -------------------------------------------------------------------------- PROBLEM The four summary points were loose chips wrapping under the tab they belong to, and the section ended on 120px of empty white. FIX The four become a ledger: one row of equal cells divided by hairlines, sitting directly under the selected tab, which is what makes the panel read as that tab's content. The tail is closed. ========================================================================== */ /* the plate had no visible edge: its recessed rail was #F6F8FC on a white section, so the closed tabs, the frame and the page were one tone and the open tab had nothing to be open against. The rail steps down; the board the reader is actually reading stays white. */ #wcu-ga .wcx{ --wcx-mist: #EBF1FA; --wcx-line: #DCE5F2; } #wcu-ga .wcx-shell{ margin-top: clamp(26px, 2.8vw, 40px); background: #EBF1FA; border-color: #DCE5F2; box-shadow: 0 1px 2px rgba(15,27,61,.03), 0 24px 52px -34px rgba(15,27,61,.30); } #wcu-ga .wcx-tab{ padding: 13px 22px 15px; } #wcu-ga .wcx-tab[aria-selected="true"]{ background: #fff; } #wcu-ga .wcx-board{ padding-bottom: clamp(16px, 1.6vw, 22px); } /* the ends of the rail. These two were 0px wide and had never painted: their width was `calc(var(--wcx-edge) + 16px)`, and `--wcx-edge` is declared on `.wcx-rail`, which is the board's CHILD — so the board could never see it, the calc was invalid. The whole treatment is gone as of 2026-09-09: the site carries no edge fades, and `.wcx-board` markup was already retired by wcusys.js, so these rules painted nothing either way. */ #wcu-ga .wcx-tab b{ font-size: 15px; letter-spacing: -.03em; } #wcu-ga .wcx-tab[aria-selected="true"]{ box-shadow: inset 0 3px 0 var(--wcx-a); } #wcu-ga .wcx-sum{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(18px, 1.9vw, 24px); padding: 0 clamp(20px, 2.4vw, 32px) clamp(17px, 1.8vw, 23px); } #wcu-ga .wcx-sum li{ gap: 9px; padding-right: clamp(14px, 1.6vw, 22px); border-right: 1px solid var(--wcx-line-2); font-size: 13.2px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; color: var(--ink); } #wcu-ga .wcx-sum li:last-child{ border-right: 0; padding-right: 0; } #wcu-ga .wcx-sum li + li{ padding-left: clamp(14px, 1.6vw, 22px); } #wcu-ga .wcx-tick{ width: 16px; height: 16px; stroke-width: 2; } #wcu-ga .wcx-card{ border-radius: 17px; border-color: #E1E8F3; box-shadow: 0 1px 2px rgba(15,27,61,.04), 0 16px 34px -22px rgba(15,27,61,.34); } #wcu-ga .wcx-t{ margin-top: 13px; font-size: 19px; letter-spacing: -.038em; } #wcu-ga .wcx-d{ margin-top: 9px; font-size: 14.3px; } /* ========================================================================== 8 · THE HERO'S TOTALS — an inline rail, not a sentence -------------------------------------------------------------------------- `.h3-micro` is one run of inline markup: three s, three text nodes and two separators. A flex container would turn each text node into an anonymous item that no selector can reach (flex-container-splits-inline- markup), so the rail is built inline: the separator keeps its box and draws a hairline through it. ========================================================================== */ #hx .h3-micro{ display: inline-block; margin-top: clamp(20px, 3.2vh, 34px); padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line-b); background: rgba(255,255,255,.8); box-shadow: 0 1px 2px rgba(15,27,61,.035); font-size: 13.4px; line-height: 1.5; color: var(--ink-3); } #hx .h3-micro b{ color: var(--ink); font-weight: 800; letter-spacing: -.03em; font-size: 14.4px; } #hx .h3-micro i{ position: relative; padding: 0 1.05em; color: transparent; } #hx .h3-micro i::before{ content: ""; position: absolute; left: 50%; top: .06em; bottom: .06em; width: 1px; background: var(--line-b); } /* ========================================================================== 9 · THE PHONE — 390 and 360 -------------------------------------------------------------------------- The desktop composition is not shrunk here; every section is re-decided. Three things drove the pass: type that was 43px on a 390px screen, section heads that cost a whole screen before any content, and a hero that ended in 120px of nothing. ========================================================================== */ @media (max-width: 860px){ :root{ --vm-h2: clamp(25px, 7.1vw, 32px); --vm-sub: 15px; --vm-pt: 40px; --vm-pb: 44px; } /* ---- the header, stacked, still left ---------------------------------- */ #gads-services .sv-head, #w8-system .w8-head, #wcu-ga .wcx-head{ display: block; } #gads-services .sv-head .k-eyebrow, #w8-system .w8-head .w8-eye, #wcu-ga .wcx-head .k-eyebrow{ display: flex; margin-bottom: 11px; } #gads-services .sv-head .k-h2, #w8-system .w8-head .w8-h2, #wcu-ga .wcx-head .k-h2{ max-width: none; } #gads-services .sv-head .k-sub, #w8-system .w8-head .w8-sub{ margin: 13px 0 0; max-width: none; font-size: 15px; line-height: 1.55; } /* ---- hero ------------------------------------------------------------- */ #hx .h3-say{ padding-block: 16px 14px; } #hx .h3-lede{ max-width: none; font-size: 15px; } #hx .h3-cta{ margin-top: 20px; gap: 12px; } #hx .h3 .h3-cta .btn{ height: 50px; } /* the pill is held to a width that breaks the three totals after "industries" instead of orphaning "years running Google Ads" — a balance the browser will not find on its own, because the longest line is the one it is trying to shorten */ #hx .h3-micro{ display: block; width: -moz-fit-content; width: fit-content; max-width: 282px; margin: 18px auto 0; padding: 10px 16px; border-radius: 15px; text-align: center; font-size: 11.6px; line-height: 1.6; text-wrap: wrap; } #hx .h3-micro b{ font-size: 12.4px; } #hx .h3-micro i{ padding: 0 .6em; color: var(--ink-4); } #hx .h3-micro i::before{ display: none; } /* the break is placed, not left to `balance`, which shortens the longest line and so orphans "years running Google Ads". A block box inside a run of inline text breaks the line either side of it; at zero height it costs nothing and takes the second dot with it. */ #hx .h3-micro i:nth-of-type(2){ display: block; height: 0; padding: 0; overflow: hidden; } /* ---- proof band -------------------------------------------------------- */ #q7.cc{ padding: 18px var(--gut) 22px; } #q7 .mp-t{ font-size: 18px; } #q7 .mp-head::after{ display: none; } /* The phone card's width is measured, not chosen, and the measurement is "Kinam Heat Exchange" — the longest real client name, printed in full on the phone rail because that is where there is room for it. It needs 134px at this type size, beside a 34px mark, a 74px worded action, three gaps and 22px of padding: 288px, and the card is 292 so nothing sits on the ellipsis. Narrowing this card is how the first apply silently truncated three names that the approved rail had always shown whole. */ #q7.cc.rz6 .mp-row{ margin-top: 12px; gap: 9px; } #q7.cc.rz6 .mp-i{ --rz-cw: 292px; flex-basis: 292px; width: 292px; } #q7 .mp-i{ padding: 10px 12px 10px 10px; border-radius: 12px; gap: 10px; } #q7 .mp-m{ width: 34px; height: 34px; border-radius: 10px; font-size: 11.4px; } #q7 .mp-i b{ font-size: 13px; } #q7 .mp-i .mp-s{ font-size: 10.8px; } #q7 .mp-i .cc-cue{ font-size: 10.8px; gap: 5px; } #q7 .mp-i .cc-cue svg{ width: 12px; height: 12px; } #q7 .mp-strip{ margin-top: 14px; } #q7 .mp-strip .mp-s b{ font-size: 23px; } #q7 .mp-crumb{ padding: 10px 15px; } /* ---- services ---------------------------------------------------------- */ #gads-services.sv{ padding: var(--vm-pt) 0 var(--vm-pb); } #gads-services .sv-group.is-bare{ margin-top: 22px; } #gads-services .y5{ margin-top: 16px; } #gads-services #gsvc-six .sc-pic .cv-well{ aspect-ratio: 4/3; } #gads-services #gsvc-six .sc-txt{ padding: 16px 16px 17px; } #gads-services #gsvc-six .sc-name{ font-size: 19.5px; } #gads-services #gsvc-six .sc-line{ font-size: 14px; } #gads-services .sv-next{ margin-top: 26px; padding: 20px 18px 22px; border-radius: 18px; } #gads-services .sv-next-t b{ font-size: 19px; } #gads-services .sv-next-t p{ font-size: 14.2px; } #gads-services .sv-next-a{ align-items: stretch; } #gads-services .sv-next-acts{ flex-direction: column; align-items: stretch; gap: 10px; } #gads-services .sv-time{ text-align: center; } /* ---- the system -------------------------------------------------------- */ #w8-system.w8{ padding: var(--vm-pt) 0 var(--vm-pb); } #w8-system .w8-area{ margin-top: 20px; } #w8-system .w8-pname{ font-size: 18px; letter-spacing: -.036em; } #w8-system .w8-sn{ font-size: 20px; } #w8-system .w8-li li{ font-size: 15px; } /* ---- why choose us ------------------------------------------------------ */ #wcu-ga.wcx{ padding: var(--vm-pt) 0 var(--vm-pb); } #wcu-ga .wcx-shell{ margin-top: 20px; } #wcu-ga .wcx-sum{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; margin-bottom: 15px; padding: 0 15px 14px; } #wcu-ga .wcx-sum li{ font-size: 12.4px; padding-right: 12px; } #wcu-ga .wcx-sum li:nth-child(2n){ border-right: 0; padding-right: 0; } #wcu-ga .wcx-sum li + li{ padding-left: 0; } #wcu-ga .wcx-sum li:nth-child(2n){ padding-left: 12px; } #wcu-ga .wcx-tick{ width: 15px; height: 15px; } #wcu-ga .wcx-t{ font-size: 18px; } /* three category names, one of them five words long, in a third of a 390px screen. They are set to wrap on their own words at a size that keeps all three tabs the same height, and the number sits above the name so the wrap has the full column to use. */ #wcu-ga .wcx-dock{ gap: 2px; padding: 3px 0 0; align-items: stretch; } #wcu-ga .wcx-tab{ padding: 8px 6px 10px; border-radius: 11px 11px 0 0; align-content: start; justify-items: center; text-align: center; } #wcu-ga .wcx-tab i{ font-size: 9.5px; letter-spacing: .12em; } #wcu-ga .wcx-tab b{ font-size: 11.4px; line-height: 1.2; letter-spacing: -.022em; overflow-wrap: break-word; hyphens: none; } } @media (max-width: 400px){ /* the card does NOT narrow below 400px. 288 truncated "Kinam Heat Exchange" by 4px; the rail is full-bleed and scrolls, so the card keeps its measured width here and the peek gets smaller instead. */ #hx .h3-micro{ font-size: 11.1px; padding: 8px 13px; } }