/* ui-r4t — applied: gads-services, gads-packages, legal-docs, contact-office, home-services, footer */ /* ====================================================================== ui-r4t part: guards · always emitted while anything else is on ====================================================================== */ /* ========================================================================== 4 · GUARDS ========================================================================== A layer loading after everything must not un-hide what the page hides. #about5's panels are switched with [hidden] at (1,2,0); any rule of equal weight arriving later shows all four at once. */ [hidden]{ display: none !important; } /* ====================================================================== ui-r4t part: gads-services · the campaign rail, 4-up with a clean peek Independently applicable. Applied and reverted from http://localhost/doctor/ui-r4t/ — see ui-r4t/apply.php ====================================================================== */ /* ========================================================================== 1 · GOOGLE ADS SERVICES — six campaign types on a rail ========================================================================== Measured: lane 1325px, six cards of 373px, 1013px of them past the right edge. Three stand whole; the fourth shows 147px — enough to cut its title mid-word, which is the strongest "this is broken" signal a layout has. Two things are wrong and they are different things. a) THE RAIL DID NOT SAY IT WAS A RAIL. Carried by the position track in scale.css / preview.js, site-wide. b) THE PEEK IS MEASURED FOR A CARD THAT NO LONGER EXISTS. gads-index-column/idx.css set 146px and says why: "the thing peeking is the NEXT INDEX AND NAME — the list visibly continues, which is the whole point of numbering it." The numbering is gone — measured on the live page, `.sc-name::before` computes to content:"" on all six cards, because gads-svc-live-b/plate.css replaced that design. What is left is 146px of card with no index in it. And the names cannot fit a peek in any case. Measured at 1440: Google Search Ads 212px Display Ads 131px Shopping Ads 157px YouTube Ads 146px Google Remarketing Ads 277px Performance Max 198px plus 22px of padding. "Google Remarketing Ads" would need a 300px peek. So the peek stops trying to show a name and becomes what a peek is: a strip of the next card's own tinted edge, 20px — narrower than the card's own 22px inset, so it cannot cut a letter — which says "another one starts here" and needs no word to say it. c) AND THE CARD IS WIDER THAN IT NEEDS TO BE. Paying the peek back as width puts FOUR campaign types on screen instead of three, and brings the card's picture — 280px of a 642px card — down with it. before 373 wide · 642 tall · 3.4 of 6 in view · section 1149 after 302 wide · ~565 tall · 4.2 of 6 in view · section ~1010 The mock-ups scale with their well (gsvc-rail.css sizes them from min(4.4cqw, 4.4cqh) for exactly this reason), so nothing is redrawn. Every rule is written at #gads-services #gsvc-six, because idx.css owns this rail at that weight and a #gsvc-six rule loses to it silently. */ @media (min-width: 1201px){ #gads-services #gsvc-six{ --y5-gap: 18px; --y5-peek: 20px; } #gads-services #gsvc-six .sc{ flex: 0 0 calc((100% - 4 * var(--y5-gap) - var(--y5-peek)) / 4); } #gads-services #gsvc-six .sc-name{ padding: 16px var(--ix-pad) 13px; font-size: clamp(19px, 1.5vw, 22px); min-height: calc(1.04em + 44px); } #gads-services #gsvc-six .sc-line{ padding: 13px var(--ix-pad) 13px; font-size: 13.6px; } } /* idx.css steps this rail 3-up / 2-up / 1-up at 1200 and 700, each step at #gads-services #gsvc-six — the same weight as the rules above. A rule without a query would win at EVERY width on source order and leave 80px cards on a phone, so each step is restated with its own clean peek. */ @media (max-width: 1200px){ #gads-services #gsvc-six{ --y5-gap: 18px; --y5-peek: 20px; } #gads-services #gsvc-six .sc{ flex: 0 0 calc((100% - 3 * var(--y5-gap) - var(--y5-peek)) / 3); } } @media (max-width: 940px){ #gads-services #gsvc-six{ --y5-gap: 16px; --y5-peek: 20px; } #gads-services #gsvc-six .sc{ flex: 0 0 calc((100% - 2 * var(--y5-gap) - var(--y5-peek)) / 2); } } @media (max-width: 700px){ #gads-services #gsvc-six{ --y5-gap: 12px; --y5-peek: 22px; } #gads-services #gsvc-six .sc{ flex: 0 0 calc(100% - var(--y5-gap) - var(--y5-peek)); } /* one card is in view, so idx.css drops the two-line name reserve — kept */ #gads-services #gsvc-six .sc-name{ min-height: 0; padding: 14px var(--ix-pad); } } /* the "not sure which campaign" bar closes the section; it now follows a position track rather than a bare card edge */ #gads-services .sv-next{ margin-top: clamp(22px, 2.4vw, 32px); } /* the phone step, from this file's own part 5 */ @media (max-width: 700px){ #gsvc-six .sc-pic .cv-well{ aspect-ratio: 4 / 3; } #gsvc-six .sc-txt{ padding: 14px 15px 15px; } #gsvc-six .sc-name{ font-size: 19px; } } /* ====================================================================== ui-r4t part: gads-packages · the head joins the site system, the crown closes up Independently applicable. Applied and reverted from http://localhost/doctor/ui-r4t/ — see ui-r4t/apply.php ====================================================================== */ /* ========================================================================== 3 · GOOGLE ADS PACKAGES ========================================================================== THE HEAD. Every other section on this page opens the same way: a mono kicker, a big centred title carrying the brand's full stop, one centred line under it (site/heads.css, the .hd-intro system). This section opens with a 33px left-set h2 and a left-set paragraph and no full stop. Four settled openings and one that is not — and it is the one in front of the prices. It joins the system here. THE CARD. The crown — tint, 62x78 glyph, name, qualifier, rule, price block, rule, commitment — is 400px of a 990px phone card before a single thing the buyer is deciding between. The glyph repeats identically in all four cards and carries no information that the name does not. It is brought down to a mark rather than an illustration, and the price block is closed up, so the card opens on WHAT IT IS and WHAT IT COSTS. The tints, the four hues and the content are the approved design from 2026-09-20 and are untouched. */ #gads-packages .gp-t{ text-align: center; font-size: var(--hd-title, clamp(26px, calc(19.6px + 1.55vw), 46px)); line-height: var(--hd-title-lh, 1.08); letter-spacing: var(--hd-title-ls, -.045em); color: var(--hd-ink, #0B0D12); } #gads-packages .gp-t::after{ content: "."; color: var(--accent, #1A73E8); } #gads-packages .gp-s{ margin: var(--hd-gap-2, 12px) auto var(--hd-lede, 38px); max-width: 58ch; text-align: center; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.55; } /* the crown */ #gads-packages .gp-face{ padding: 16px 16px 17px; } #gads-packages .gp-glyph{ width: 40px; height: 50px; margin: 0 auto 9px; } #gads-packages .gp-name{ margin: 0 0 6px; font-size: 23px; } #gads-packages .gp-qual{ margin: 0 0 12px; } #gads-packages .gp-price{ margin: 0 0 9px; padding-top: 11px; } #gads-packages .gp-from{ margin: 0 0 3px; } #gads-packages .gp-was{ margin: 0 0 2px; font-size: 13.5px; } #gads-packages .gp-now b{ font-size: 28px; } #gads-packages .gp-offer{ padding: 6px 12px; } #gads-packages .gp-save{ margin: 8px 0 0; } #gads-packages .gp-pay{ margin: 11px 0 0; padding-top: 10px; } /* the body */ #gads-packages .gp-body{ padding: 15px 16px 0; } #gads-packages .gp-promise{ margin: 0 0 12px; padding: 0 0 12px; } #gads-packages .gp-gets{ gap: 8px; } #gads-packages .gp-acts{ padding: 0 16px 14px; gap: 7px; } #gads-packages .gp-b1{ height: 43px; } #gads-packages .gp-b2{ height: 40px; } #gads-packages .gp-row{ gap: 18px; } @media (max-width: 700px){ #gads-packages .gp-row{ gap: 16px; } #gads-packages .gp-face{ padding: 14px 15px 15px; } #gads-packages .gp-glyph{ width: 34px; height: 42px; margin-bottom: 7px; } #gads-packages .gp-name{ font-size: 21px; } #gads-packages .gp-now b{ font-size: 26px; } #gads-packages .gp-body{ padding: 14px 15px 0; } #gads-packages .gp-gets{ gap: 7px; } #gads-packages .gp-acts{ padding: 0 15px 13px; } } /* ====================================================================== ui-r4t part: legal-docs · the seven records, one surface each Independently applicable. Applied and reverted from http://localhost/doctor/ui-r4t/ — see ui-r4t/apply.php ====================================================================== */ /* ========================================================================== LEGAL DOCUMENTS — the seven records preview ui-r4t ========================================================================== Measured live: #docs 4838px on a desktop, 8354px on a phone — one section carrying 62% of a 7846px page, and 66% of the phone page. WHAT IS WRONG, IN THE ORDER A READER MEETS IT 1 A BOX INSIDE A BOX. Every record is a tinted card (--hue-pale, 1px --hue-edge, --r-lg) holding a white card (--paper, 1px --line-b, --r-md) 30px inside it. Two grounds, two edges, two radii and two paddings for one object. The reader is asked to parse a frame that carries no information. 2 A HOLE THE SIZE OF THE PICTURE. legal/_doc.css says it plainly in its own comment: a record showing its certificate has a summary column ~400px taller than the detail column beside it, so the white panel is stretched to match and the buttons are pinned to its foot. What sits between the last fact and those buttons is 270px of nothing. On the Certificate of Incorporation the third column ("Issuing authority", two lines) is followed by 600px of white. 3 SEVEN RECORDS, TWO SHAPES. Three carry a scan and stand ~690px tall. Four carry none and stand ~430px. Inside one section, that is the audit's "different sections appear to use a different zoom". 4 A RAIL THAT LOOKS LIKE A FILTER. Seven category tabs sit under the heading; all seven records are rendered underneath regardless. The tabs are :target jumps, which is right — nothing should be hidden on a page whose job is to be checked — but at 4838px the jump is the only way anyone reaches record six. THE COMPOSITION THIS REPLACES IT WITH One card per record, on white, bounded by the record's own hue. Three zones on one surface, divided by hairlines rather than by nested boxes: IDENTITY 250px THE FACTS THE DOCUMENT 210px icon · category what it verifies the scan, as a proof title why you need it token, at a size that one line what we mask was never readable as status pill issuing authority type anyway the reference ───────────── view · download The scan stops driving the row height: it is a column of its own, capped, and the row is as tall as its tallest real content. The actions move under the scan, where a reader looking at the document is already looking — so `margin-top:auto` has no hole left to fill. Measured after: #docs 4838 → ~2340px desktop, 8354 → ~4260px phone. Nothing is hidden, removed, reworded or collapsed behind a click. ========================================================================== */ /* ========================================================================== 1 · ONE SURFACE PER RECORD ========================================================================== */ /* the record card — white ground, the hue on the edge only */ .w3 .w3-row{ --rp: clamp(18px, 1.9vw, 26px); grid-template-columns: minmax(214px, 250px) minmax(0, 1fr); gap: 0; padding: 0; background: var(--paper); border: 1px solid var(--hue-edge); border-radius: var(--r-lg); overflow: hidden; } /* the identity zone keeps the hue, as a wash rather than as a frame */ .w3 .w3-info{ padding: var(--rp); background: var(--hue-pale); border-right: 1px solid var(--hue-edge); } /* ---- the three records that carry a scan ------------------------------ The certificate is a child of the identity column, so stacking it under the title builds a 470px tower against a 300px column of facts — the hole of the live page, moved to the other side. It is set BESIDE the identity words instead, in the same zone, and that zone is widened to hold both. The row is then as tall as its tallest real content and nothing stretches. :has() is the whole mechanism: the four records with no scan must not carry a 150px empty track. Where it is unsupported the rule simply does not apply and the scan sits under the title, as it does today. */ .w3 .w3-row:has(.w3-pv){ grid-template-columns: minmax(0, 440px) minmax(0, 1fr); } .w3 .w3-row:has(.w3-pv) .w3-info{ display: grid; grid-template-columns: minmax(0, 1fr) 146px; grid-auto-rows: max-content; column-gap: 18px; align-items: start; } .w3 .w3-row:has(.w3-pv) .w3-info > *{ grid-column: 1; } .w3 .w3-row:has(.w3-pv) .w3-info > .w3-pv{ grid-column: 2; grid-row: 1 / span 12; margin-top: 4px; max-width: 150px; } /* the facts: no second card, no second radius, no second padding scale */ .w3 .w3-detail{ padding: var(--rp); background: transparent; border: 0; border-radius: 0; } /* the gap between records: enough to read as separate objects, not as separate sections. Was clamp(20,2.2vw,30). */ .w3 .w3-rows{ margin-top: clamp(22px, 2.6vw, 34px); gap: clamp(16px, 1.6vw, 22px); } /* ========================================================================== 2 · THE FACTS — a two-column reading grid, not a three-column ribbon ========================================================================== auto-fit at 250px produced three columns at 1440, which set 14px type in a 240px measure (~34 characters) and left the third column two lines long against a 600px column. Two columns give a 44-character measure and let the four pairs settle in a 2x2 that ends where its words end. */ .w3 .w3-g{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; align-content: start; } /* the reference chip sits under the pairs, full width, as a found object */ .w3 .ld-ref{ margin-top: 18px; align-self: start; } /* ========================================================================== 3 · THE DOCUMENT COLUMN — the scan as a proof token, and the actions ========================================================================== The certificate was 300px wide and ~440px tall, which is 64% of the record's height for an image whose body type is illegible at any size the page can give it. It is a token that says "this exists, here it is" and carries a FULL SIZE affordance; 190px says that as clearly as 300px did, and hands 250px of height back to every record that has one. The four records with no scan get the same column, holding the actions alone — so all seven records share one shape and one rhythm. */ .w3 .w3-row > .w3-detail{ min-width: 0; } .w3 .w3-info .w3-pv{ margin-top: 16px; width: 100%; max-width: 190px; } .w3 .w3-pv-c{ margin-top: 7px; font-size: 9.5px; letter-spacing: .08em; } .w3 .w3-pv-z{ right: 6px; bottom: 6px; padding: 4px 8px 4px 6px; font-size: 9px; } /* the actions leave the facts column and stand in their own, under the record's status — a reader deciding to open a PDF is not reading prose */ .w3 .w3-detail .ld-act{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2, #EFF1F4); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; } .w3 .w3-detail .ld-act-n{ font-size: 11.5px; } /* the identity column's own type comes down one step with the box */ .w3 .w3-info h3{ margin-top: 8px; font-size: clamp(19px, 1.7vw, 23px); } .w3 .w3-cat-l{ margin-top: 14px; } .w3 .w3-short{ margin-top: 9px; font-size: 14px; } .w3 .w3-info .ld-pill{ margin-top: 14px; } .w3 .w3-note{ margin-top: 9px; font-size: 12px; } .w3 .w3-info .hp-tile{ background: var(--paper); } /* ========================================================================== 4 · THE CATEGORY RAIL — a jump list that says so ========================================================================== Seven tabs on a tinted track, centred, reading as a segmented control that filters. They do not filter; they jump, and every record stays on the page. The track loses its filled ground and becomes a row of quiet chips, which is what a jump list looks like, and the section head's lede no longer has a second heavy object under it. */ #docs .w3-rail{ background: transparent; border: 0; gap: 6px; padding: 0; } .w3 .w3-cat{ border: 1px solid var(--line, #E3E6EB); background: var(--paper); border-radius: 999px; } /* the wrap painted a full-bleed white band across a tinted section — a stripe between the head and the records that belonged to neither. The -4px nudge it carried was tuned against the rail while that rail was sticky and sat tight under the header. It is not sticky any more (see the note in legal/_doc.css): it rests under the section head, so it is given the aisle a centred jump list needs on both sides instead. */ .w3 .w3-railwrap{ padding-block: 0; margin-top: clamp(18px, 2.2vw, 28px); background: transparent; border: 0; } /* ========================================================================== 5 · THE REGISTRATION PANEL (#reg) and VERIFICATION (#verify) ========================================================================== #reg is settled — one panel, one grid, its height is its content's. It is left alone but for the hairline it shares with the rail below it. #verify was 327px for a kicker, a title, a line, an address and a button, 128px of it shelf padding. Tightening the shelf treated the symptom; it was never a section. It has since been moved into #docs as a compact CTA strip under the notes, which is the hierarchy it always had. */ /* #verify is no longer a section and no longer takes shelf padding: it is a strip at the foot of #docs (legal/_doc.css, .ld-cta). The rule that trimmed its shelf is left here as the record of why it went. */ /* ========================================================================== 6 · PHONES — 320 to 480 ========================================================================== Below 940 the record is one column and legal/_doc.css already has a working layout for that: .w3-info becomes a wrapping flex row, the scan claims its own line and is capped at 340px. Nothing here replaces it. Two things have to be undone, and one thing tuned. UNDONE, because :has() raises the desktop rules to (0,3,0) and (0,4,0) and they would otherwise beat anything written inside a media block on weight, whatever the source order: the 440px identity column (which leaves the facts a 32px column and one record 2,921px tall) and the grid that parks the scan in a 146px track beside the title. TUNED: the scan. 340px of a 354px card is the picture BEING the record again, the desktop fault in portrait. 180px keeps it a proof token, the same thing it is on a desktop, and hands ~150px back on each of the three records that carry one. */ @media (max-width: 940px){ .w3 .w3-row, .w3 .w3-row:has(.w3-pv){ grid-template-columns: minmax(0, 1fr); } .w3 .w3-row:has(.w3-pv) .w3-info{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 0; } .w3 .w3-row:has(.w3-pv) .w3-info > *{ grid-column: auto; grid-row: auto; } .w3 .w3-info{ border-right: 0; border-bottom: 1px solid var(--hue-edge); } .w3 .w3-info .w3-pv, .w3 .w3-row:has(.w3-pv) .w3-info > .w3-pv{ flex: 1 1 100%; max-width: 180px; margin-top: 14px; } .w3 .w3-g{ gap: 16px 24px; } } @media (max-width: 620px){ .w3 .w3-g{ grid-template-columns: minmax(0, 1fr); gap: 15px; } .w3 .w3-row{ --rp: 16px; border-radius: 16px; } .w3 .w3-info .w3-pv, .w3 .w3-row:has(.w3-pv) .w3-info > .w3-pv{ max-width: 150px; } .w3 .w3-detail .ld-act{ margin-top: 15px; padding-top: 13px; gap: 8px 10px; } /* `flex: 1 1 auto` sent the two buttons to a line each and the note to a third — 127px for two 44px controls. They share one row instead. */ .w3 .w3-detail .ld-act .ld-act-b{ flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 10px; } .w3 .w3-detail .ld-act-n{ flex: 1 1 100%; margin: 0; } .w3 .w3-rows{ gap: 14px; } /* the jump list scrolls; it is seven chips and it is allowed to */ #docs .w3-rail{ justify-content: flex-start; } } /* ====================================================================== ui-r4t part: contact-office · the offices panel rebalanced Independently applicable. Applied and reverted from http://localhost/doctor/ui-r4t/ — see ui-r4t/apply.php ====================================================================== */ /* ========================================================================== CONTACT US preview ui-r4t ========================================================================== The hero is the inner-page hero taken from the approved Google Ads one and is not touched. Six sections follow it, and five of them are settled: the channels, the enquiry form, the next steps, the teams and the close all size to their content and open on a head that is connected to it. One is not. #office is 1820px on a desktop and 3099px on a phone — 25% of the page for one office, and the tallest section on the site after the legal records. Parts: 1 the offices panel · 2 the head above it · 3 phones ========================================================================== */ /* ========================================================================== 1 · OUR OFFICES — the panel ========================================================================== Measured at 1440: .lx the panel 1280 x 884 .lx-rail six places 525 x 884 ← 41% of the panel .lx-r one place row 525 x 104 ← six of them = 624px .lx-pw the office 755 x 884 .lx-visit map + details 1280 x 466 Three separate faults compound into one slab. a) THE LIST IS WIDER THAN THE OFFICE. Six place names — "Delhi NCR", "Punjab", "Dubai", "Uttarakhand" — and a quiet building name beside each. That is a 300px job. It is given 525px, 41% of the panel, while the office being described gets 755px and sets its three paragraphs in a 686px measure. b) THE ROWS ARE AT THEIR CEILING. contact/_loc.css gives .lx-r `min-height:66px; max-height:104px; flex:1 1 auto`, and six rows in an 884px panel all land on the 104px ceiling. 104px for one name and one grey label is a row with a name floating in it — the exact failure the file's own comment says it was written to avoid. c) SO THE FILLER HAS 260px TO CARRY. `.lx-rail::after{flex:1 1 auto}` is deliberate and correct: it keeps the rail as the panel's left edge whether six rows fill it or not. But it is carrying the selection band colour — #C6D9F4, pinned site-wide by site/align.css on 2026-09-20 — across 525 x 260px of nothing. At that size a selection band stops reading as a band and becomes a blue wall, and the page has a rule against blue walls. The colour is right and stays. Only the geometry moves: a 300px list, a 72px row, and the office taking the width it was always the point of. rail 525 -> 300 list 41% of the panel -> 24% row 104 -> 96 but now carrying two lines, not one office 755 -> 980 a 900px measure instead of 686 filler 260 -> ~200 on a column 43% as wide, so ~1/3 the area */ @media (min-width: 1041px){ #office .lx{ grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); } #office .lx-r{ min-height: 66px; max-height: 96px; padding: 14px 16px; /* the place name and the building name stop competing for one line: at 300px the building name goes under the place it belongs to, which is what contact/_loc.css already does for itself below 1040 */ grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "i n" ". k"; align-items: center; gap: 0 12px; } #office .lx-i{ grid-area: i; } #office .lx-n{ grid-area: n; } #office .lx-k{ grid-area: k; text-align: left; margin-top: 2px; } } /* the office itself, in the room it just got */ #office .lx-p{ max-width: none; } /* ========================================================================== 2 · THE HEAD ABOVE IT ========================================================================== Two paragraphs set in a 704px measure run to 163px, and with the kicker and the title that is 253px of section before the first office. The two say the same thing twice — "operations are managed through a combination of in-office and remote collaboration" and "operates through a multi-location work presence model" — but that is the client's copy and it stays. heads.css exposes --hd-desc-w exactly so a section can be given its own measure. 704px was 78 characters, which is a fine measure and a tall block; the lane's full 1180px would be 105 characters, which is a short block and an unreadable line. 48rem sits at ~85 and takes each paragraph to three lines. */ #office{ --hd-desc-w: 48rem; } #office .lx-subs{ gap: 10px; } /* ========================================================================== 3 · PHONES — 320 to 480 ========================================================================== Nothing here. contact/_loc.css already carries a real phone design for this panel, not a stacked desktop one: below 760 the rail and the panels both become `display:contents` and interleave, so the open place is the lid of its own office and every other place is a flat line under it. That is exactly what the audit asks a phone composition to be, and the rules above are bounded at 1041 so they cannot reach down and break it. The section's phone height comes down anyway, because the head's two paragraphs and the section block padding are set in parts 1 and 2 above and in scale.css, both of which apply at every width. ========================================================================== */ /* ====================================================================== ui-r4t part: home-services · the Our Services rail stops cutting a title Independently applicable. Applied and reverted from http://localhost/doctor/ui-r4t/ — see ui-r4t/apply.php ====================================================================== */ /* ========================================================================== HOME preview ui-r4t ========================================================================== The homepage is the site's benchmark and is treated as one. The hero and the All Work band are approved and are not touched by anything here or in scale.css — measured against the live page, the first 863px of this preview is pixel-identical apart from a 2px nav shift that comes from the preview's own filenames (proved with a control copy carrying no CSS at all) and will not exist when the layer is applied to index.html. Three things are corrected on this page and nothing else: 1 the seven rails now carry a position track scale.css / preview.js 2 the phone block padding, 64px -> 56px scale.css 3 the Our Services rail's peek here Everything else — the eleven Why Choose Us standards, the ten FAQ questions, Industries, Client Proof, Success Stories, About Us, the 100px desktop block padding and every colour — is left exactly as it is. ========================================================================== */ /* ========================================================================== OUR SERVICES — the five panels' card rails ========================================================================== index.html sizes these cards `calc((100% - 3*gap) / 3.3)` under its own comment, "desktop: three complete cards plus ~30% of the fourth" — the same deliberate peek the Google Ads rail uses, and the same trouble with it. Measured at 1440 the track is 930px, the cards 268px, and 30% of 268 is 81px: the fourth card's left edge, the start of its picture, and "Display A" where its name should be. A sliced word is read as breakage. The position track now says the rail scrolls. The sliced name is a second fault and takes the second fix: 288px cards put the cut at 22px, inside the card's own 14-18px inset, so the peek is edge and picture and carries no type. before 268 wide · 3 whole + 81px including a cut heading after 288 wide · 3 whole + a 22px card edge A 20px card is the whole change; no panel loses a card, nothing reflows onto another line, and the section's height does not move. The three breakpoints keep the page's own 3-up / 2-up / 1-up steps and its own --gap, so only the fraction changes. The other two homepage rails are NOT changed. #ssRail and .c7-rail are full-bleed and their cards are a fixed 244px and 278px, so where their cut lands is a function of the viewport rather than of a ratio anyone chose. Giving them the position track is the correct fix and it is the only one they get. */ #svc3 .s3-card{ flex: 0 0 calc((100% - (3 * var(--gap)) - 22px) / 3); } @media (max-width: 1180px){ #svc3 .s3-card{ flex-basis: calc((100% - (2 * var(--gap)) - 22px) / 2); } } /* one card and a slice of the next: 84% of a 354px card leaves 57px, which is the next card's picture, not its words — that one was already right */ @media (max-width: 760px){ #svc3 .s3-card{ flex-basis: 84%; } } /* ====================================================================== ui-r4t part: footer · phone proportions for the site footer Independently applicable. Applied and reverted from http://localhost/doctor/ui-r4t/ — see ui-r4t/apply.php ====================================================================== */ /* ========================================================================== 3 · THE FOOTER — the same block on all six pages, and 2136px of a phone ========================================================================== Measured at 390: 2136px, which is 2.5 screens of footer, and 52% of the whole Management Team page. Desktop is 1178px and settled; the phone version is the desktop one stacked, which is the audit's "desktop components simply stacking on mobile" in its purest form. Measured at 390, block by block: .mx-stage 746 24 pad + map 254 + 12 + the REACH US card 456 .mx-deck 1389 56 pad + facts 199 + the three columns 910 + 80 -------------------------------------------- 2136 Nothing is removed and no target shrinks below 48px. The four blocks are given phone proportions instead of desktop ones: map 240 → 190 a map still reads a street at 190px deck pad-top 56 → 36 it opens a block, it does not need 56 the facts 199 → ~150 an even 2x2, and 24px of rule clearance the nine rows 64 → 52 48px min-height is still a full target column gaps 32 → 24 The REACH US card (456px) is left alone: a phone number, two actions, two addressed mailboxes and the office address, all of it load-bearing. ========================================================================== */ @media (max-width: 760px){ /* the map */ .mx-map{ height: 190px !important; } /* the deck's opening */ .mx-settled .mx-deck, .mx-deck{ padding-top: 36px !important; } /* the fact strip: an even 2x2, not 2 + 1 + 1 */ .mx-facts{ row-gap: 18px !important; padding-bottom: 24px !important; margin-bottom: 24px !important; } .mx-fact:nth-child(1), .mx-fact:nth-child(3){ grid-column: 1 / 7 !important; } .mx-fact:nth-child(2), .mx-fact:nth-child(4){ grid-column: 7 / 13 !important; } /* the nine link rows */ .mx-row{ min-height: 48px !important; padding-block: 6px !important; } .mx-colh{ margin-bottom: 12px !important; } /* the gaps between the footer's own blocks */ .mx-cols{ row-gap: 24px !important; } .mx-stage{ padding-top: 18px !important; } } /* 320–380: the two actions already stack; the fact strip has to follow, or "India, UK, USA, Australia, Canada" sets four lines in a 130px measure. */ @media (max-width: 380px){ .mx-fact:nth-child(n){ grid-column: 1 / -1 !important; } .mx-facts{ row-gap: 14px !important; } }