/* m-and-g-pools-global.css — Phase 6A canonical stylesheet (generated 2026-10-06) ============================================================================ This file IS the client-approved stylesheet. Operator decision 2026-10-06: skill 5 did not hand over a design direction here, it handed over a finished, contrast-verified sheet the client signed off at mandg-pools.netlify.app. Generating a fresh R1-R56 baseline would not reproduce that, so none was. Byte-identical to _SKILL5_design/_working/styles.css (sha256 ad3701080c225f32) below this header. Do not edit here - edit the approved sheet and re-run 6A. Post-launch tweaks belong in client_custom.css, loaded after this file. ========================================================================= */ /* ============================================================================ M & G POOLS — DESIGN PREVIEW — DIRECTION: "DEEP WATER" (round 3b) Skill 5 v10 / plugin 10.9.3 / 2026-09-18 NEW brand board applied 2026-09-18: Primary Blue #4B4DED · Aqua #2891F3 · Dark Navy #1E1E3A · Montserrat headings + Open Sans body. Direction is LAYOUT. ========================================================================= */ :root{ /* ---- BRAND GUIDE v12 (2026-09-25), used verbatim -------------------------- #4B4DED Brand Violet · #7666F8 Violet Glow · #2891F3 Sky Blue #FFCB4B Sunshine · #1E1E3A Deep Indigo · #FFFFFF White Dark board adds · #1E1E3A Dark Navy · #5BA9F6 Light Blue · #FFFFFF */ --primary:#4B4DED; /* Primary Blue — CTA fill, headings/links on light. 6.85:1 on #fff */ --primary-hover:#7666F8; --sky:#2891F3; /* Brand Guide Sky Blue, verbatim. Links/icons/active states. 3.26:1 on white and 4.28/3.65 on the lifted dark grounds: clears the 3:1 graphic floor everywhere, the 4.5 text floor nowhere. So it is kept for the gradient and for graphics. */ --aqua:var(--sky); /* Sky Blue verbatim: 4.94:1 on Deep Indigo, which is now the only dark ground */ the band roles already guarantee. 6.49:1 on Deep Indigo, 4.80:1 on the lightest lift. 232 inline color:var(--txt-accent) spans across 98 pages inherit the fix from this one line. */ --aqua-hover:var(--sky); /* board Black and Gray retired: neither is a Brand Guide colour, --gray had no consumers, and the guide assigns Deep Indigo to text and headings. */ --ink-navy:#1E1E3A; /* board Dark Navy — deepest ground, label on aqua fills */ --light-blue-d:var(--sky); --wash:#FFFFFF; /* Brand Guide White — backgrounds, cards, clean space. The old #EEF0FE tint was a derivation, not a guide colour. */ --bg:#FFFFFF; /* Brand Guide White */ --white:#fff; --tint:rgba(75,77,237,.06); /* Brand Violet at 6% — the hover/surface tint that used to be an off-white. A brand colour, not a grey. */ --sunshine:#FFCB4B; /* Brand Guide v12 — secondary accents, callouts. 1.51:1 on white, so it is a FILL that carries dark text, never text. */ --grad:linear-gradient(90deg,var(--primary-hover) 0%,var(--sky) 100%); /* signature gradient */ /* ---- ground derivatives: NON-TEXT surfaces only (L-045) ------------------- Depth banding stepped off the board Dark Navy. No TEXT colour is derived. */ --navy-deep:#1E1E3A; --navy:var(--navy-deep); /* Brand Guide has ONE dark: Deep Indigo */ --navy-lift:var(--navy-deep); /* ---- rendered text roles — every pair measured, see gate_results ---------- */ --ink:var(--navy-deep); /* Deep Indigo on white 16.1:1 */ --ink-strong:var(--primary); /* headings on light 6.85:1 */ --ink-muted:rgba(30,30,58,.72); /* Deep Indigo at alpha on white 6.43:1 */ --link-on-light:var(--primary); /* 6.85 on #fff · 6.49 on --bg · 6.00 on --wash */ --on-dark:var(--white); /* body on dark 17.39:1 */ --on-dark-muted:rgba(255,255,255,.80); /* Sky Blue verbatim is 4.94:1 on Deep Indigo but only 4.28 / 3.65 on the two lifted dark grounds, and 3.26 on white - it clears the 3:1 graphic floor everywhere, not the 4.5 text floor. So the GUIDE colour stays for icons, actives and the gradient, and dark-band accent TEXT uses this lighter sky tint: 6.49 on Deep Indigo, 4.80 on the lightest lift. Same split the previous board used (--light-blue-d). */ --accent-on-dark:var(--aqua); --hair:rgba(255,255,255,.17); --hair-dark:rgba(0,0,0,.14); --ff:'Open Sans',system-ui,-apple-system,Segoe UI,sans-serif; /* board BODY font */ --ff-display:'Montserrat','Open Sans',system-ui,sans-serif; /* board HEADINGS font */ --container:1280px; --gutter:24px; --space-section:104px; --space-section-sm:64px; --r:5px; /* reference-measured dominant radius */ --r-sig:30px 0 0 0; /* reference-measured signature corner */ --eyebrow-gap:12px; /* locked sitewide */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--ff);font-size:16px;line-height:1.65; color:var(--on-dark);background:var(--navy); overflow-x:hidden; } /* height:auto is REQUIRED alongside the width/height attributes we set for CLS — with both attributes specified the box has a used height, and `aspect-ratio` is then ignored. Every fixed-height image below sets its height explicitly. */ img{max-width:100%;display:block;height:auto} a{color:inherit} /* ---------- type: board pairing — Montserrat headings, Open Sans body ---------- Display face lives on h1/h2 ONLY. Nav, buttons, card titles, table labels, eyebrows and footer headings stay Open Sans. Montserrat's max weight here is 700 (the board lists Bold | SemiBold | Regular), so h1/h2 are 700, not 800. */ h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;text-wrap:balance} h1,h2{font-family:var(--ff-display)} h1{font-size:clamp(2.05rem,1.35rem + 2.6vw,3.375rem);line-height:1.06;font-weight:700;letter-spacing:-.02em} h2{font-size:clamp(1.55rem,1.24rem + 1.15vw,2.125rem);line-height:1.18;font-weight:700;letter-spacing:-.018em} h3{font-size:1.6875rem;line-height:1.25} h4{font-size:1.375rem;line-height:1.3} p{margin:0 0 1.15em} p:last-child{margin-bottom:0} strong{font-weight:700} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--space-section);position:relative} .section--tight{padding-block:calc(var(--space-section) * .68)} /* ---------- ground bands ---------- */ .band-navy{background:var(--navy)} .band-lift{background:var(--navy-lift)} .band-deep{background:var(--navy-deep)} .band-light{background:var(--wash);color:var(--ink)} /* Brand Guide White #FFFFFF */ .band-light--bg{background:var(--bg)} /* band-light and band-light--bg were told apart by a tint; both are White now, so on the 7 pages where two light sections sit adjacent the join needs a rule instead. */ .band-light + .band-light,.band-light + .band-white,.band-white + .band-light{ --seamline:var(--hair-dark)} /* The three dark grounds used to be three derived tones; the Brand Guide has ONE dark, so they are all Deep Indigo now and 64 adjacent pairs across 14 pages had merged into flat blocks. Same answer as the light bands: a hairline, drawn in white-at-alpha so no colour outside the guide is introduced. */ .band-navy + .band-navy,.band-navy + .band-lift,.band-navy + .band-deep, .band-lift + .band-navy,.band-lift + .band-lift,.band-lift + .band-deep, .band-deep + .band-navy,.band-deep + .band-lift,.band-deep + .band-deep{ --seamline:var(--hair)} .band-light h1,.band-light h2,.band-light h3,.band-light h4{color:var(--ink-strong)} .band-light a{color:var(--link-on-light)} .band-white{background:var(--white);color:var(--ink)} .band-white h2,.band-white h3,.band-white h4{color:var(--ink-strong)} /* caustic light ripple — the pool-theme texture, dark bands only */ .band-navy::before,.band-lift::before,.band-deep::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.03' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.9 0 0 0 0 1 0 0 0 -1.4 0.72'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23c)'/%3E%3C/svg%3E"); } .section > .container{position:relative;z-index:1} /* ---------- the band seam ---------------------------------------------- Operator 2026-09-25: the separator must line up with the section content, not run the full bleed. A border-top cannot do that - it always spans the border box - so the line is a pseudo-element sized to the container's CONTENT box: min(--container,100%) less the two gutters, which is exactly what .container{max-width:var(--container);padding-inline:var(--gutter)} resolves to. Drawn on every section but transparent by default; the adjacency rules just set --seamline. That leaves their long selector lists alone and puts the geometry in one place. .section > .container is already z-index:1 so this paints under the content, and .cta-band generates ::after last, so the line sits over its photo rather than beneath it. */ .section::after,.cta-band::after{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); height:1px;pointer-events:none; width:calc(min(var(--container),100%) - var(--gutter) * 2); background:var(--seamline,transparent)} /* ---------- M7 #1 + #2 : the ONE universal section marker ---------- */ .sechead{margin-bottom:44px;max-width:62ch} /* 62ch is 567px and the contact page's "None of this is paperwork..." lead-in measures 588px on one line, so it dropped "van." onto a second line as a widow. 66ch gives 604px - 16px of slack for font rendering - without touching the other 103 pages. Same specificity as .sechead (0,1,0), so it has to sit AFTER it to win. */ .sechead--wide{max-width:66ch} .sechead--center{margin-inline:auto;text-align:center} .eyebrow{ display:block;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-on-dark);margin:0 0 var(--eyebrow-gap) } /* Eyebrow text is BODY-SIZE (13px/600) so it takes the 4.5:1 floor, not 3:1. --aqua is 2.77:1 on --wash and 3.29:1 on white: it fails as text on BOTH. On light grounds the eyebrow takes navy (11.49:1 on wash, 13.63:1 on white). */ .band-light .eyebrow,.band-white .eyebrow{color:var(--ink-strong)} .wavemark{display:block;width:34px;height:auto;margin-bottom:14px;color:var(--txt-accent)} .band-light .wavemark,.band-white .wavemark{color:var(--primary)} /* same 3:1 graphic reason */ .sechead--center .wavemark{margin-inline:auto} .sechead p{margin-top:18px;color:var(--on-dark-muted);font-size:1.0625rem} .band-light .sechead p,.band-white .sechead p{color:var(--ink)} /* ======================= SERVICE TABS (operator reference 2026-09-23) ================== The reference drives its tabs with React buttons that do nothing when JS is off. This build is progressive-enhancement first (same reason the slider is scroll-snap and the reveal is gated on .js), so the switch is RADIO INPUTS + :checked. No JS at all, arrow-key navigation works natively because they are radios, and the panel is real markup a crawler can read. The inputs are visually hidden but NOT display:none, or they would stop being focusable. */ .svctabs{position:relative} .svctabs__in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .svctabs__bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:30px} .svctabs__tab{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px; border-radius:999px;border:1px solid var(--edge);background:var(--surface); color:var(--txt-strong);font-weight:700;font-size:.9375rem;line-height:1.2;cursor:pointer; transition:background-color .18s,border-color .18s,color .18s} .svctabs__tab:hover{border-color:var(--txt-accent)} /* Icons on the pills, as the reference puts a Lucide mark on its format cards. The droplet is the build's own; the sun and the snowflake are NEW - nothing resembling either existed at any viewBox, and I checked all 30 before drawing. Both follow the 16x16 / 1.5 stroke / round-cap convention the rest of the set uses. currentColor is deliberate: the mark is accent-coloured on a resting pill and turns white with the label on the active one, with no second rule. */ .svctabs__tab{gap:9px} .svctabs__ic{flex:none;width:17px;height:17px;color:var(--txt-accent)} /* align-items:stretch + a flex-filling image: the media column matches whichever side is taller, so the photo never leaves dead space under itself. Measured on the three tabs the gap was 145 / -9 / 32px - Pool Opening has the longest checklist. Tab 2's image is already the taller side, so it is unaffected; the rule is not scoped to one panel because the same gap appears on any tab whose list outgrows a 4:3 frame. */ .svcpanel{display:none;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,46px);align-items:stretch} /* The image must FILL the column, not size it. flex:1 with aspect-ratio:auto let the photo fall back to its intrinsic 900x1200 portrait and drive every panel to 792px - taller than the content, which is the opposite of the fix. Absolute inset:0 gives the img no intrinsic contribution, so the grid row is set by the body column and the photo fills whatever that is. */ .svcpanel__media{position:relative;min-height:300px; border-radius:var(--r);overflow:hidden;border:1px solid var(--edge)} .svcpanel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .svcpanel__price{position:absolute;left:18px;bottom:18px;display:flex;flex-direction:column; gap:2px;padding:12px 18px;border-radius:var(--r);background:var(--white); border-top:3px solid var(--primary)} .svcpanel__price b{font-size:1.625rem;font-weight:800;line-height:1;color:var(--primary); font-variant-numeric:tabular-nums} .svcpanel__price span{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(0,0,0,.66)} .svcpanel__body h3{font-size:1.5rem;color:var(--txt-strong);margin-bottom:18px} .svcpanel__note{margin-top:18px;font-size:.875rem;line-height:1.6;color:var(--txt)} .svcpanel__body .btn{margin-top:22px} .svclist{list-style:none;margin:0;padding:0} .svclist li{display:flex;gap:11px;align-items:flex-start;padding:9px 0; border-bottom:1px solid var(--rule);color:var(--txt);font-size:.9688rem;line-height:1.55} .svclist li:last-child{border-bottom:0} .svclist__ic{flex:none;width:17px;height:17px;margin-top:2px;color:var(--txt-accent)} .svcmini{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px} .svcmini__item{display:flex;align-items:center;gap:15px;padding:14px 18px 14px 14px; text-decoration:none;border:1px solid var(--edge);border-radius:var(--r); background:var(--surface);transition:background-color .18s,border-color .18s} .svcmini__item:hover{border-color:var(--txt-accent)} .svcmini__item img{flex:none;width:74px;height:56px;object-fit:cover;border-radius:calc(var(--r) - 6px)} .svcmini__txt{min-width:0} .svcmini__txt b{display:block;color:var(--txt-strong);font-size:.9688rem;line-height:1.3} .svcmini__txt i{display:block;font-style:normal;font-size:.8125rem;color:var(--txt);margin-top:3px} .svcmini__txt em{font-style:normal;opacity:.8} .svcmini__item .btn__arrow{flex:none;margin-left:auto;color:var(--txt-accent)} /* the :checked wiring - panel, active pill, and hiding the mini for whichever tab is open */ #svct1:checked ~ .svctabs__stage .svcpanel:nth-child(1), #svct2:checked ~ .svctabs__stage .svcpanel:nth-child(2), #svct3:checked ~ .svctabs__stage .svcpanel:nth-child(3){display:grid} #svct1:checked ~ .svctabs__bar .svctabs__tab:nth-child(1), #svct2:checked ~ .svctabs__bar .svctabs__tab:nth-child(2), #svct3:checked ~ .svctabs__bar .svctabs__tab:nth-child(3){ background:var(--primary);border-color:var(--primary);color:var(--white)} #svct1:checked ~ .svctabs__bar .svctabs__tab:nth-child(1) .svctabs__ic, #svct2:checked ~ .svctabs__bar .svctabs__tab:nth-child(2) .svctabs__ic, #svct3:checked ~ .svctabs__bar .svctabs__tab:nth-child(3) .svctabs__ic{color:inherit} #svct1:checked ~ .svcmini .svcmini__item:nth-child(1), #svct2:checked ~ .svcmini .svcmini__item:nth-child(2), #svct3:checked ~ .svcmini .svcmini__item:nth-child(3){display:none} /* the radio is off-screen, so focus has to show on the label it drives */ #svct1:focus-visible ~ .svctabs__bar .svctabs__tab:nth-child(1), #svct2:focus-visible ~ .svctabs__bar .svctabs__tab:nth-child(2), #svct3:focus-visible ~ .svctabs__bar .svctabs__tab:nth-child(3){ outline:3px solid var(--txt-accent);outline-offset:2px} @media (max-width:900px){ /* single column - nothing to match, so the photo goes back to a fixed ratio */ .svcpanel{grid-template-columns:1fr;gap:26px} .svcpanel__media{aspect-ratio:4/3;min-height:0} .svcmini{grid-template-columns:1fr} .svctabs__tab{padding:12px 18px;font-size:.875rem} } /* Footnote panel, matching the reference's "Certified Material" note: a rounded, tinted, 1px-bordered panel rather than a heavy 4px left bar, with the mark the operator's mock showed. The icon is the build's own info glyph - checked the full 30-icon set first. */ .svcnote{display:flex;align-items:center;gap:18px;margin-top:30px;padding:20px 24px; background:var(--surface);border:1px solid var(--edge);border-radius:var(--r)} /* Circular badge, matching the .scard__ic device already on the site rather than inventing a second one - same tint, same ring, just smaller. Keeps one icon-badge treatment sitewide. */ .svcnote__badge{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center; background:rgba(40,145,243,.16);border:1px solid rgba(40,145,243,.42)} .svcnote__badge svg{color:var(--txt-accent)} .svcnote .btn svg:first-child{flex:none;opacity:.9} .svcnote p{margin:0;color:var(--txt);line-height:1.65} @media (max-width:560px){.svcnote{padding:18px 18px;gap:12px}} /* "What We Do Not Do" as a card grid (operator reference 2026-09-23). flex rather than grid so the incomplete last row CENTRES, which is the build's standard for card grids. The mark is the build's own X - one uniform badge across all eight, which suits a list of exclusions and adds nothing to the icon set. Hover matches .call / .scard / .statcard / .step. */ .donotgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;list-style:none;margin:0;padding:0} .donotgrid li{flex:0 1 calc((100% - 36px) / 3);min-width:250px; display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px; padding:30px 26px;border:1px solid var(--edge);border-top:3px solid var(--txt-accent); border-radius:var(--r);background:var(--surface); transition:background-color .18s,border-top-color .18s} .donotgrid li:hover{background:rgba(40,145,243,.10);border-top-color:var(--bar-hover)} .donotgrid__ic{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center; background:rgba(40,145,243,.16);border:1px solid rgba(40,145,243,.42);color:var(--txt-accent)} .donotgrid__ic svg{width:22px;height:22px} .donotgrid b{color:var(--txt-strong);font-size:1.0625rem;line-height:1.35} .donotgrid p{color:var(--txt);font-size:.9375rem;line-height:1.6;margin:0} @media (max-width:900px){.donotgrid li{flex:0 1 calc((100% - 18px) / 2)}} @media (max-width:560px){.donotgrid li{flex:0 1 100%}} /* --rail: the reference's timeline treatment - circled number badges sitting ON a continuous connector, everything centred. A MODIFIER, not a change to .steps--media, because that component is also on /services/safety-cover-installation/ and must keep its own look. The rail spans badge-centre to badge-centre: with 4 equal columns those sit at 12.5% and 87.5%, so the line stops under the outer badges instead of running off the ends. It is dropped below 900px, where the grid is no longer a single row and a horizontal rail would connect nothing. */ .steps--rail{position:relative} /* MARGIN, not padding: the rail's connecting line is an absolutely positioned ::before at top:24px inside this container, so padding would push the circles down and leave the line stranded above them. Margins move the whole box and the line with it. Sibling margins collapse to the larger value, which is why these are the FINAL gaps rather than an addition - .sechead already contributes 44px above and the following

28px below, so anything smaller would have changed nothing. Scoped to /twinsburg-oh/pool-safety-covers/; the other three .steps--rail pages keep the tighter default. */ .steps--pad{margin-top:72px;margin-bottom:56px} @media (max-width:900px){ .steps--pad{margin-top:52px;margin-bottom:44px} } /* .steps--media.steps--rail, not .steps--rail alone: the two tie at (0,2,0) and .steps--media sits ~1300 lines LATER, so it was winning. The badge kept the strip's 13px / display:flex / .1em tracking, which left the number small and flex-aligned instead of centred in the circle. (0,3,0) settles it regardless of order. */ .steps--media.steps--rail .steps__item{align-items:center;text-align:center;gap:13px} .steps--media.steps--rail .steps__n{position:relative;z-index:2; width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--navy-deep);border:2px solid var(--txt-accent);color:var(--txt-accent); font-size:.9375rem;font-weight:800;letter-spacing:.02em;line-height:1} /* The badge fill is OPAQUE on purpose - it punches a hole in the dotted connector that runs behind it - but --navy-deep is a hardcoded dark, so on a light band the accent number sat on near-black at 2.54:1. The ground has to follow the band like every other portable component; --surface is white on a light band, which puts #4B4DED on white. */ .band-light .steps--media.steps--rail .steps__n, .band-white .steps--media.steps--rail .steps__n{background:var(--surface)} .steps--media.steps--rail .steps__n::after{content:none} /* NOT 12.5%. .steps--media carries gap:20px, so a column is (100% - 3*20px)/4, not 100%/4, and a percentage inset lands 7.5px short of the outer badge centres at four across (6.7px at three). The calc puts the dotted line exactly centre-to-centre. */ .steps--media.steps--rail::before{content:"";position:absolute;top:24px; left:calc((100% - 60px) / 8);right:calc((100% - 60px) / 8); border-top:2px dotted var(--rule);z-index:1;pointer-events:none} .steps--media.steps--rail.steps--3::before{left:calc((100% - 40px) / 6);right:calc((100% - 40px) / 6)} @media (max-width:900px){.steps--media.steps--rail::before{content:none}} /* ---------- buttons (M7 #3) ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; min-height:48px;padding:13px 26px;border-radius:8px;border:2px solid transparent; /* Measured off Brand Guide v12 s.4: cap height 10px on a 44px button = ~14px, and a stem/cap of 0.200 = Bold. Scaled to this site's 48px buttons that is 15px/700, which is also what the header already used - so every button is now one value. */ font-family:var(--ff);font-size:.9375rem;font-weight:700;line-height:1;text-decoration:none; text-transform:uppercase;letter-spacing:.04em; cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,transform .18s,filter .18s,box-shadow .18s } .btn__arrow{transition:transform .2s;flex:none} .btn:hover .btn__arrow{transform:translateX(4px)} /* Brand Guide v12, section 4. Three button styles: primary = signature gradient, white label (the guide's "GET A FREE ESTIMATE") sunshine = #FFCB4B fill, Deep Indigo label (the guide's "OUR SERVICES") outline = white fill, violet border+label (the guide's "CONTACT US", see .btn--outline) .btn--secondary IS this site's primary CTA - 337 uses, every "Request a Quote". 2026-09-25 (operator): it no longer carries the Signature Gradient. White on the gradient measured 3.26:1 at the violet end and 4.18:1 at the blue end, and the label is 15px/700 - below the 18.66px-bold large-text threshold - so it needed 4.5:1 and got neither. Flat Brand Violet is 5.86:1 and is constant across the whole fill, so the CTA passes at every point of the button instead of at none of them. --grad stays defined: it is a guide element, just not a text ground. */ .btn--primary{background:var(--primary);color:var(--white);border-color:var(--primary)} /* 5.86:1 */ /* The fill must NOT move on hover: Violet Glow under white is 4.18:1, the exact number this change removes. The state reads as a Violet Glow ring instead. */ .btn--primary:hover,.btn--secondary:hover{background:var(--primary);border-color:var(--primary-hover);box-shadow:0 0 0 3px rgba(118,102,248,.45)} .btn--secondary{background:var(--primary);color:var(--white);border-color:var(--primary)} /* 5.86:1 */ .btn--sunshine{background:var(--sunshine);color:var(--ink-navy);border-color:var(--sunshine)} /* 10.7:1 */ .btn--sunshine:hover{filter:brightness(1.06)} .btn--inverted{background:var(--white);color:var(--primary);border-color:var(--white)} /* 6.85:1 */ .btn--inverted:hover{background:var(--aqua);border-color:var(--aqua);color:var(--ink-navy)} /* The guide's SECOND button is the Sunshine fill ("OUR SERVICES"). On this site the second action in every CTA row is .btn--ghost-dark - 143 uses - so that is where it belongs. Deep Indigo on #FFCB4B is 10.7:1, which holds at any size on any ground, so it works in the hero, the CTA bands and the light sections alike. */ .btn--ghost-dark{background:var(--sunshine);color:var(--ink-navy);border-color:var(--sunshine)} .btn--ghost-dark:hover{filter:brightness(1.06)} /* Secondary navigational CTA (operator instruction 2026-09-22: "change to buttons"). Outlined, so it never competes with the section's own primary action - the locked "one primary action per section" rule (Hick). BAND-AWARE because these rows sit on both grounds: a white label on --wash is unreadable. Dark bands take white (15.8:1 on --navy); light bands take --primary (4.17:1 on --wash, 4.94:1 on white), which also clears the 3:1 floor for the border as a non-text graphic. */ .btn--outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)} .btn--outline:hover{background:var(--white);color:var(--primary);border-color:var(--white)} .band-light .btn--outline,.band-white .btn--outline{color:var(--primary);border-color:var(--primary)} .band-light .btn--outline:hover,.band-white .btn--outline:hover{background:var(--primary);color:var(--white);border-color:var(--primary)} .btn-row{display:flex;flex-wrap:wrap;gap:14px} /* arrow text link, no chrome */ .tlink{ display:inline-flex;align-items:center;gap:.5em;font-weight:700;text-decoration:none; color:var(--accent-on-dark);border-bottom:2px solid transparent;transition:border-color .18s } .tlink:hover{border-bottom-color:currentColor} .tlink svg{transition:transform .2s} .tlink:hover svg{transform:translateX(4px)} .band-light .tlink,.band-white .tlink{color:var(--link-on-light)} /* ============================ PREVIEW CHROME (L-058) ===================== */ .pvbar{ background:var(--navy-deep);color:var(--txt);font-size:.6875rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;padding:7px var(--gutter);text-align:center;position:relative;z-index:80 } .pvbar b{color:var(--txt-accent)} /* ============================ HEADER ==================================== */ .header{position:absolute;top:35px;left:0;right:0;z-index:70;transition:background-color .25s,box-shadow .25s} .header-inner{ position:relative; /* L-110: mega anchors to the CONTAINER */ display:flex;align-items:center;gap:32px;padding-block:18px } .brand{flex:none;display:block;line-height:0} .brand img{height:66px;width:auto} /* ---- SCROLLED STATE: white header + the BLUE logo ------------------------- Client request 2026-09-18. Everything in the bar has to switch together — the nav links are white on the transparent state and would render 1:1 on a white bar. The aqua underline is 2.03:1 on white and fails even the 3:1 graphic floor, so it becomes Primary Blue here. */ .brand__blue{display:none} .header.is-stuck{ position:fixed;top:0;background:var(--white); /* Sunshine rule under the stuck header (2026-09-29, operator), the pattern on eb-stc-preview.netlify.app - there it is `nav.sticky-nav{border-bottom:1.6px solid }` on a white nav. This replaces the old .08 black hairline rather than sitting next to it. 2px, set by the operator in DevTools against the live page. I had put 3px to match the card top rules, on the reasoning that Sunshine is only 1.51:1 on white and a thinner line would not register - but that contrast is against the header ABOVE it, and the edge the line actually marks is the dark hero BELOW, where it is 10.67:1. 2px is plenty there. */ box-shadow:0 2px 18px rgba(30,30,58,.13);border-bottom:2px solid var(--sunshine) } .header.is-stuck .header-inner{padding-block:10px} .header.is-stuck .brand img{height:54px} .header.is-stuck .brand__white{display:none} .header.is-stuck .brand__blue{display:block} /* CHILD COMBINATORS ARE LOAD-BEARING HERE. The mega panel lives INSIDE `.nav`, so a descendant selector (`.header.is-stuck .nav a`) also repaints all 104 mega links — which rendered --ink-navy on the --navy-deep panel at exactly 1.00:1, invisible. That is L-109's signature on this very site, in reverse. These rules must only ever reach the TOP-LEVEL nav links. */ .header.is-stuck .nav > ul > li > a{color:var(--ink-navy)} /* 17.39:1 on white */ .header.is-stuck .nav > ul > li > a:hover{color:var(--primary)} /* 6.85:1 on white */ .header.is-stuck .nav > ul > li > a::after{background:var(--primary)} /* aqua would be 2.03:1 */ .header.is-stuck .burger{color:var(--ink-navy);border-color:rgba(0,0,0,.22)} /* The mega is a dark panel in BOTH states, so it needs NO colour override here. An earlier `.header.is-stuck .mega a{color:...}` rule was (0,3,1) and silently beat `.mega a:hover` (0,2,1), killing the hover colour change in the scrolled state only. Same family as L-047. Do not re-add it. */ /* Flush the panel to the white bar when scrolled. `.header-inner`'s box ends 7px above the header's painted bottom edge (padding + border), so `top:100%` alone leaves a strip through which the page shows. Invisible while the bar is transparent; obvious once it is white. Asserted in the gate so it cannot drift. */ .header.is-stuck .mega{margin-top:1px} /* exactly the bar-s 1px border-bottom */ .nav{margin-left:auto;display:flex;align-items:center;gap:30px} .nav ul{list-style:none;display:flex;align-items:center;gap:30px;margin:0;padding:0} .nav li{position:static} /* L-110: so the mega can use the container box */ .nav a{ position:relative;display:inline-flex;align-items:center;gap:.35em; color:var(--white);text-decoration:none;font-size:.9375rem;font-weight:600;padding-block:10px } .nav a::after{ /* M7 #4 */ content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px; background:var(--aqua);transition:right .25s } .nav a:hover::after,.nav a:focus-visible::after{right:0} .nav .chev{width:10px;height:10px;flex:none;transition:transform .2s} .nav li:hover .chev{transform:rotate(180deg)} /* two-class scoping so .nav a cannot repaint the button (L-047) */ /* `.nav a` is (0,1,1) and outruns `.btn`, so nav buttons restate size and weight. */ .nav a.btn,.mobilebar a.btn{font-size:.9375rem;font-weight:700} .nav .btn,.header .nav .btn--secondary{color:var(--white)} .nav .btn::after{display:none} /* ---- mega (M7 #7), anchored to the header container's RIGHT edge (L-110) ---- */ .has-mega > a::before{ /* hover bridge, spans link bottom -> container bottom */ content:"";position:absolute;left:-14px;right:-14px;top:100%;height:34px } /* FLUSH TO THE BAR. `top:100%` lands on `.header-inner`'s bottom, which IS the header's content edge — so margin 0 is flush, not 22px. In the scrolled state the bar adds `border-bottom:1px`, so the panel clears exactly that 1px below. Neither number is arbitrary: 0 = no border, 1 = the border width. Asserted in the gate, because measuring this before `document.fonts.ready` returns a header height that is still settling and gives a false reading. */ .mega{ position:absolute;top:100%;right:0;margin-top:0;width:min(1080px,calc(100vw - 48px)); background:var(--navy-deep);border:1px solid var(--hair); border-top:3px solid var(--aqua); /* seals the join to the bar */ border-radius:0 0 var(--r) var(--r); box-shadow:0 24px 64px rgba(0,0,0,.42); padding:30px;display:grid;gap:26px;grid-template-columns:repeat(4,1fr); opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s; z-index:75 } .has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none} .mega__col .mega__label{display:block;margin-top:0; font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--txt-accent);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--hair) } .mega__col ul{display:block;margin:0;padding:0;list-style:none} .mega__col li{margin-bottom:3px} .mega a{ display:block;padding:8px 10px;border-radius:var(--r);font-weight:400;font-size:.875rem; color:var(--txt);line-height:1.35 } .mega a::after{display:none} .mega a:hover{background:rgba(40,145,243,.14);color:var(--white)} .mega a b{display:block;font-weight:700;font-size:.9375rem;color:var(--white);margin-bottom:1px} .mega a span{display:block;font-size:.78125rem;color:var(--txt);line-height:1.4} .mega__all{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:18px;margin-top:2px} /* Areas mega: a flat list of places rather than a town-by-town tree. The list spans the whole panel and sets its own columns, because .mega's 4-col grid would otherwise put all 17 towns in a single column. The pin is the same glyph the coverage list uses. */ .mega--areas .mega__places{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr); gap:2px 20px;list-style:none;margin:0;padding:0} .mega--areas .mega__places a{display:flex;align-items:center;gap:10px} .mega--areas .mega__places svg{flex:none;width:15px;height:15px;color:var(--txt-accent)} @media (max-width:1100px){.mega--areas .mega__places{grid-template-columns:repeat(3,1fr)}} @media (max-width:900px){.mega--areas .mega__places{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.mega--areas .mega__places{grid-template-columns:1fr}} .mega__col .mega__label a{color:inherit;text-decoration:none} .mega__col .mega__label a:hover{color:var(--white)} .mega__col .mega__label + ul{margin-bottom:18px} .mega__col > .mega__label:not(:first-child){margin-top:4px} /* Cap EVERY mega to the viewport, not just the tall one. The Services panel is 654px at 4 columns but 1076px once the grid collapses to 3 below 1100px, so a rule scoped to one panel leaves the other running off the bottom of the screen. */ .mega{max-height:min(72vh,660px);overflow-y:auto;overscroll-behavior:contain} .drawer .drawer__sub{padding-left:18px;opacity:.86;font-size:.875rem} .drawer details li b{font-weight:700;color:var(--white)} .burger{ display:none;margin-left:auto;background:none;border:1px solid var(--hair);border-radius:var(--r); width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;color:var(--white) } /* ============================ HERO ====================================== */ /* The bottom padding has to TRACK the wave divider, not sit at a fixed value. .wavediv is an SVG pinned to the hero's bottom edge with height:auto, so it is a constant share of the viewport width - measured at 8.06% across 430px to 1600px (35px -> 129px). A flat 128/104px stops clearing it once the viewport passes ~1300px, and the hero trust row slid under the white wave and vanished. 8.1vw plus 26px of clearance holds at any width; max() keeps the old value wherever it is already the larger of the two, so nothing below ~1250px moves. */ .hero{ position:relative;padding-top:168px;padding-bottom:max(128px,calc(8.1vw + 26px)); overflow:hidden; /* L-002: keep hero padding tight */ /* The mid stop is a 55/45 mix of Brand Violet and Deep Indigo, not Brand Violet neat. The guide assigns Brand Violet to "buttons, accents" and Deep Indigo to "dark elements"; a whole hero field of #4B4DED is the former doing the latter's job, and it read as electric purple. The radial glow drops from .46 to .30 for the same reason - that alpha was tuned for the old, far less saturated #4554A5. */ background: radial-gradient(120% 92% at 82% 12%, rgba(75,77,237,.30) 0%, rgba(75,77,237,0) 58%), linear-gradient(196deg, rgba(75,77,237,.24) 0%, rgba(75,77,237,.30) 34%, rgba(75,77,237,.04) 72%, rgba(75,77,237,0) 100%), var(--navy-deep); } .hero::before{ /* caustics over the hero ground */ content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:screen;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.026' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.88 0 0 0 0 1 0 0 0 -1.3 0.7'/%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23h)'/%3E%3C/svg%3E") } /* Montserrat sets wider than Open Sans, so the copy column carries more of the grid than it did under the old pairing — otherwise the H1 breaks inside "In-Ground" at its real hyphen. */ .hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:52px;align-items:center} .hero__eyebrow{ display:inline-flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--txt-accent);margin-bottom:20px } .hero__eyebrow::before{content:"";width:34px;height:3px;background:var(--aqua);border-radius:2px} .hero h1{color:var(--white);margin-bottom:22px} .hero__sub{font-size:1.0625rem;color:var(--txt);margin-bottom:30px} /* 11.0:1 — no 88ch re-cap (L-091·3) */ .hero__cta{margin-bottom:34px} /* media column over the full-bleed ground (the treatment L-064 permits) */ .hero__media{position:relative} .hero__media img{ width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sig); border:1px solid rgba(255,255,255,.22) } /* Hero trust row (operator reference 2026-09-23). The eligibility notice used to be its own band below the hero; it now reads as one of four credentials inside the hero, with the full exclusion sentence as fine print beneath. All four marks are icons ALREADY in this build - the pin, the two-person family mark, the shield-check that was the notice's own icon, and the star glyph the review card uses. Nothing new was drawn. */ /* The rule spans the HERO TEXT COLUMN only, not the container. Measured off the reference: it runs 62->464 in an 818px-wide frame whose content box is 62->756, i.e. 0.579 of the width, while the photo starts at 490. The hero grid is 1.2fr/.8fr with a 52px gap, so the text column is (100% - 52px) * .6 = 0.575 - the same line. Full width once the grid collapses to one column at 900px. */ .herotrust{position:relative;z-index:2;margin-top:-8px;padding-top:22px} .herotrust::before{content:"";position:absolute;top:0;left:0;height:1px; width:calc((100% - 52px) * .6);background:var(--hair)} /* Inner heroes lost their media column when the statcard moved out to the stat strip, so there is nothing for the rule to stop before - clipping it to 57.5% there just looks like a truncated line. Full width on those; only the homepage, which still has the photo, keeps the short rule. */ .hero--inner .herotrust::before{width:100%} @media (max-width:900px){.herotrust::before{width:100%}} /* Packed LEFT at content width with dividers between - not four equal columns. In the reference the four credentials sit together under the copy rather than stretching the full container. */ .herotrust__row{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0} .herotrust__row li{display:flex;align-items:center;gap:9px;padding:2px 24px; border-right:1px solid var(--hair);min-width:0} .herotrust__row li:first-child{padding-left:0} .herotrust__row li:last-child{border-right:0;padding-right:0} .herotrust__row svg{flex:none;width:20px;height:20px;color:var(--txt-accent)} .herotrust__row b{font-size:.875rem;font-weight:700;color:var(--white);line-height:1.35} /* One uniform line, as in the reference - the sub-label is NOT a faded tail on a bold label. Same size and weight as the label, only marginally softer in colour. */ .herotrust__row i{font-style:normal;font-size:.875rem;font-weight:700; color:var(--txt);white-space:nowrap} .herotrust__note{margin:15px 0 0;font-size:.8125rem;line-height:1.5;color:var(--txt);max-width:96ch} /* Stats rendered in the trust-row style: one compact line, small bold value, caption in the same size a shade softer, hairline dividers between. The base rule pins `i` to nowrap because its tails are two words; these captions are sentences, so they must be allowed to wrap or a single item drags the row past the container. */ .herotrust__row--stats i{white-space:normal;font-weight:400;color:var(--txt)} /* the base rule sizes the trust-row glyph at 20px; the stat row carries 24x24 icons alongside 16x16 ones, and the shared box keeps them optically equal. */ .herotrust__row--stats svg{flex:none;width:18px;height:18px;color:var(--txt-accent)} /* Separation is TRAILING only - padding-right + the divider, no left inset. With a left inset the base rule only zeroes it on :first-child, so the moment the row wraps the item that starts line two sits 24px in while line one starts flush. */ /* One row of four, each cell stacked: icon + value on line one, caption beneath it and aligned to the value rather than the icon. A 2x2 grid does that with no extra wrapper element - the svg spans both rows in column one, b and i take column two. min-width:0 is what lets a flex item shrink below its content width at all. */ /* top-aligned, not centred: with equal-width cells the captions wrap to different line counts, and centring each cell independently staggers the values down the row. */ .herotrust__row--stats{flex-wrap:nowrap;align-items:flex-start} .herotrust__row--stats li{display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:1px; padding:6px 18px 6px 0;margin-right:18px;min-width:0;border-right:1px solid var(--hair)} .herotrust__row--stats svg{grid-column:1;grid-row:1;margin-top:1px} .herotrust__row--stats b{grid-column:2;grid-row:1;font-size:1rem} .herotrust__row--stats i{grid-column:2;grid-row:2} .herotrust__row--stats li:last-child{border-right:0;margin-right:0;padding-right:0} @media (max-width:1100px){.herotrust__row li{padding:2px 18px}} @media (max-width:900px){ .herotrust__row{row-gap:14px} .herotrust__row li{flex:0 0 50%;padding-left:0;padding-right:18px} .herotrust__row li:nth-child(2n){border-right:0} } @media (max-width:560px){ .herotrust__row{row-gap:12px} .herotrust__row li{flex:0 0 100%;border-right:0;padding-right:0} } /* MUST sit after the base .herotrust__row breakpoints. Both are (0,2,1) and a media query adds no specificity, so the base `li{flex:0 0 50%}` at max-width:900 was winning on source order and the stat row went 2-up instead of stacking. */ /* Also undoes the base `li{flex:0 0 50%}` from the 900px breakpoint: with nowrap that put 4 x 50% = 200% of content in the row. 1 1 0 lets the four share the width and shrink. */ .herotrust__row--stats li{flex:1 1 0} @media (max-width:760px){ .herotrust__row--stats{flex-wrap:wrap} .herotrust__row--stats li{flex:1 1 100%;border-right:0;margin-right:0;padding-left:0;padding-right:0} } .hero__badge{ position:absolute;left:-26px;bottom:38px;background:var(--white);color:var(--primary); border-radius:var(--r);padding:18px 22px;min-width:186px; box-shadow:0 18px 44px rgba(0,0,0,.34) } .hero__badge b{display:block;font-size:2.125rem;font-weight:800;line-height:1;letter-spacing:-.02em} .hero__badge span{display:block;font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(0,0,0,.66);margin-top:6px} /* water-surface divider */ /* the divider paints in currentColor so it can match whatever ground follows it */ .wavediv{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0; pointer-events:none;color:var(--navy-deep)} .wavediv svg{width:100%;height:auto;display:block} /* ============================ ELIGIBILITY BAND ========================== */ .elig{background:var(--navy-deep);padding-block:34px} .elig__in{display:flex;gap:18px;align-items:flex-start; border-left:4px solid var(--aqua);padding-left:22px} .elig svg{flex:none;color:var(--txt-accent);margin-top:3px} .elig p{font-size:1.0625rem;color:var(--txt);margin:0} .elig strong{color:var(--white)} /* ============================ TRUST STRIP =============================== */ /* Stat strip - operator instruction 2026-09-22: the hero's 2x2 statcard moves OUT of the hero and becomes a full-width 4-up band directly under it. Its own class, not a .statcard modifier, because .statcard is a 2-col grid whose nth-child border rules would fight a 4-col layout (the L-047 family: a container repainting a nested component). Collapses 4 -> 2 -> 1 so the captions never crush. */ .statstrip{background:var(--navy-deep);border-bottom:1px solid var(--hair)} .statstrip__row{display:grid;grid-template-columns:repeat(4,1fr)} .statstrip__row > div{padding:22px 26px;border-right:1px solid var(--hair);min-width:0} .statstrip__row > div:last-child{border-right:0} .statstrip__row b{display:block;font-size:1.5rem;font-weight:800;line-height:1.05;color:var(--txt-accent);letter-spacing:-.02em} .statstrip__row span{display:block;font-size:.8125rem;color:var(--txt);margin-top:5px;line-height:1.4} @media (max-width:900px){ .statstrip__row{grid-template-columns:repeat(2,1fr)} .statstrip__row > div:nth-child(2n){border-right:0} .statstrip__row > div:nth-child(-n+2){border-bottom:1px solid var(--hair)} } @media (max-width:560px){ .statstrip__row{grid-template-columns:1fr} .statstrip__row > div{border-right:0;border-bottom:1px solid var(--hair)} .statstrip__row > div:last-child{border-bottom:0} } /* the hero keeps its 2-col grid ONLY where a second column still exists (the homepage photo). Every other hero lost its statcard and goes single-column. */ .hero__grid--solo{grid-template-columns:1fr} /* Trust slot - operator instruction 2026-09-22: the second statcard is replaced by an image, with a COMPACT one-line stat row beneath it carrying only the credentials the hero strip does not already show. Both library photos here are PORTRAIT (3:4); cropping them 4:3 from the centre beheads people, so object-position is set per image. */ /* Alignment (operator screenshot 2026-09-22): the columns matched in TOTAL height, but the stat row hung BELOW the photo, so the image bottom landed ~13px above the review card's. The photo now flexes to the full column height and the stats sit ON its lower edge over a scrim, so image-bottom == revcard-bottom by construction at any quote length. */ .trustmedia{position:relative;min-width:0;display:flex;flex-direction:column; border-radius:var(--r);overflow:hidden;border:1px solid var(--edge)} /* The trust image stretches to whatever the quote + review column comes to -- 516px on every page that carries this block. This caps it and stops it stretching, so the photo is a panel beside the reviews rather than the tallest thing in the row. Scoped: the other four pages using this block are untouched. */ .trustmedia--short{align-self:start;max-height:420px;min-height:0} /* Fixed 4:3, the size the operator approved - NOT flex:1. The alignment comes from the stat row being an overlay: the left column is then the image and nothing else, so the right column stretches to exactly the image height and the review card ends level. */ .trustmedia img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} /* A soft gradient measured 1.80:1 for the caption and 1.13:1 for the values where it faded out over the van's white lettering - both far under AA. Text over a photo needs a band that is opaque BEHIND THE TEXT, not a fade that happens to be dark in the average case; the fade is pushed above the text as a separate strip. */ .trustline{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap; gap:8px 26px;margin:0;padding:15px 20px;background:rgba(30,30,58,.94)} .trustline::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:56px; background:linear-gradient(to top,rgba(30,30,58,.94),rgba(30,30,58,0));pointer-events:none} .trustline > span{display:flex;align-items:baseline;gap:.45em;font-size:.8125rem; color:var(--txt);line-height:1.4} .trustline b{font-size:1.125rem;font-weight:800;color:var(--txt-accent);letter-spacing:-.01em; font-variant-numeric:tabular-nums;white-space:nowrap} .trustline:empty{display:none} @media (max-width:560px){.trustline{gap:8px 18px}} /* The image column runs ~2x the quote's height, leaving the right column blank below the testimonial (operator screenshot 2026-09-22). Filled with the review score, which belongs beside the review anyway. flex:1 makes the card absorb exactly the leftover height, so the gap cannot come back when a quote is shorter or longer. Real figures only - 4.4 across 106 reviews, linking to the same GBP listing the About page already links to. */ .trust__col{display:flex;flex-direction:column;gap:30px;min-width:0} /* 18 -> 30, operator 2026-09-25 */ /* .quote sets align-self:start, which in a GRID parent pins it vertically (what it was for) but in this COLUMN flex container is the inline axis, so the card shrank to its text and sat ~72px narrower than the .revcard beneath it. Stretch only inside this column; every other .quote keeps the original behaviour. */ .trust__col > .quote{align-self:stretch} .revcard{display:flex;flex-direction:column;justify-content:center;flex:1; background:var(--navy-lift);border:1px solid var(--hair);border-radius:var(--r); padding:22px 26px;text-decoration:none;transition:border-color .18s} .revcard:hover{border-color:var(--aqua)} .revcard__score{display:flex;align-items:baseline;gap:.55em;flex-wrap:wrap} .revcard__score b{font-size:2.25rem;font-weight:800;line-height:1;color:var(--txt-accent); letter-spacing:-.02em;font-variant-numeric:tabular-nums} .revcard__stars{color:var(--txt-accent);font-size:1.0625rem;letter-spacing:.08em} .revcard__meta{font-size:.875rem;color:var(--txt);margin-top:9px;line-height:1.45} /* Rendered as a button (operator 2026-09-23). It stays a : the whole .revcard is already an , and a nested or