/* ==========================================================================
site/svc-fit.css · "BEFORE YOU DECIDE" — the supporting-content section
Written 2026-09-28. Linked last in the of the four service pages that
carry it: meta-ads, social-media,
website-development and landing-page.
UNDO: delete that line and the block (whole
pages backed up in scratchpad/backup-svc-intro-20260928/).
---------------------------------------------------------------------------
WHY IT EXISTS
---------------------------------------------------------------------------
The SEO copy from Step 12 (2026-09-24), plus Step 10's Website -> Landing
Page line, sat inside #gads-services' heading unit: 165-182 words between
the services title and the service cards. Measured at 1440 it put the first
card 406-483px under the title (Google Ads, which never had it: 127px), and
463-580px on a 390px phone.
The owner asked for the cards to follow the heading and its one line, and
for the copy to move lower, not to be lost. It moved here WORD FOR WORD —
same paragraphs, same links, same meaning — and the services head is back to
kicker + title + one line on all five pages.
---------------------------------------------------------------------------
WHAT THIS FILE OWNS — and what it does not
---------------------------------------------------------------------------
surface, edges, aisle, padding site/shelf.css .sh-editorial .sh-aisle-lit
(one argument, not merchandise: white
floor, its own lit aisle above it)
vertical rhythm site/rhythm-09.css through --sh-pt/-pb
the heading unit site/heads.css .hd-intro .hd-kicker
.hd-title — the four-class unit, which
"joins with no CSS of its own"
THIS FILE the lane and the two cards. Nothing else.
Every selector starts at #svc-fit, so nothing here can reach another
section.
---------------------------------------------------------------------------
THE CARDS
---------------------------------------------------------------------------
Two, side by side on the homepage's left/right lines (--site-lane). The
narrower card says what the service is, or where it ends; the wider one
says who it suits and who it does not. That second paragraph is the longer
one on every page, so the track is 5fr / 7fr: at 1:1 the short card was
half empty. One column from 900px down.
Surface --sh-shelf (#F4F7FC) on the white floor, edged by the Why Choose Us
card's own hairline (#D6E3F4). Card title in the FAQ question's brand blue
and size (18px @1440, 16.5px @390). The paragraph keeps exactly the size
and ink it had as a supporting line (--hd-desc, --hd-desc-ink), left-set,
because a centred paragraph of a hundred words is hard to read.
Links carry a quiet underline: in the old position they were the same grey
as the text with no underline, so nobody could see them.
========================================================================== */
#svc-fit .svf-in{
width: var(--site-lane);
margin-inline: auto;
}
#svc-fit .svf-grid{
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--sh-aisle);
}
#svc-fit .svf-card{
margin: 0;
padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.6vw, 38px);
background: var(--sh-shelf, #F4F7FC);
border-radius: 14px;
box-shadow: inset 0 0 0 1px #D6E3F4;
}
#svc-fit .svf-h{
margin: 0 0 10px;
padding: 0;
font-family: var(--hd-sans);
font-size: clamp(16.5px, calc(15.6px + .17vw), 18px);
font-weight: 800;
line-height: 1.3;
letter-spacing: -.022em;
color: #004594;
text-wrap: balance;
}
#svc-fit .svf-card p{
margin: 0;
max-width: none;
font-family: var(--hd-sans);
font-size: var(--hd-desc);
font-weight: 400;
line-height: 1.62;
color: var(--hd-desc-ink);
text-align: left;
text-wrap: pretty;
}
#svc-fit .svf-card p a{
color: inherit;
text-decoration: underline;
text-decoration-color: #9DB8E0;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .2s ease, text-decoration-color .2s ease;
}
#svc-fit .svf-card p a:hover{
color: #004594;
text-decoration-color: currentColor;
}
@media (max-width: 900px){
#svc-fit .svf-grid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px){
#svc-fit .svf-card{ border-radius: 12px; }
#svc-fit .svf-h{ margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce){
#svc-fit .svf-card p a{ transition: none; }
}