/* Service list cards — /services and /es/services.
Loaded after offer.css on those two pages only; it overrides .of-card /
.of-svc bits by cascade order, so the must stay second.
Why this exists: the seven cards used to be a mono price kicker, a heading
and two paragraphs of equal weight, so nothing led the eye and you could
not tell security from SEO without reading. The order is now
1. identity strip — the scene's coloured tile + icon, and the service name
2. heading — the visitor's problem, the loudest thing on the card
3. one line — what it changes for them
4. foot — price and destination together, quiet, in one row.
The tile colour arrives per card as --svl-c (see the astro files; the values
are copied from the hero scene's legend). Tangerine stays the CTA colour:
only the arrow in the foot and the hover offset use it. */
/* ---- section rhythm -------------------------------------------------- */
/* The section used to sit at padding-top:0 under the ink hero, so the h2
started on the exact pixel the dark band ended. Give the cream band its
own top gutter and widen the head-to-grid gap so the head reads as a head. */
.svl-list {
border-top: 0;
padding-top: clamp(2.5rem, 4.5vw, 3.75rem);
}
.svl-head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.svl-grid { gap: clamp(1rem, 1.6vw, 1.25rem); }
/* ---- the card -------------------------------------------------------- */
.svl-card {
--svl-pad: clamp(1.35rem, 2.2vw, 1.75rem);
padding: var(--svl-pad);
}
/* Identity strip: full bleed to the card's 2px ink border, closed by a 2px
rule in the service's own colour. No fill tint — the tile carries the
colour, and a tinted strip would make the tangerine card read as a CTA. */
.svl-id {
display: flex;
align-items: center;
gap: 0.65rem;
margin: calc(var(--svl-pad) * -1) calc(var(--svl-pad) * -1) calc(var(--svl-pad) * 0.85);
padding: calc(var(--svl-pad) * 0.6) var(--svl-pad);
border-bottom: 2px solid var(--svl-c, var(--ny-ink));
}
.svl-tile {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--svl-c, var(--ny-ink));
color: #FFF8F0;
transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.svl-tile svg { width: 21px; height: 21px; display: block; }
.svl-name {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 0.76rem; /* 12.2px — the old kicker sat at 11.5px */
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
line-height: 1.2;
color: var(--ny-ink);
}
/* Body column so the foot can sit on the baseline of the tallest card. */
.svl-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.svl-card .svl-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.15rem, 1.5vw, 1.35rem);
line-height: 1.16;
letter-spacing: -0.022em;
margin: 0 0 0.65rem;
color: var(--ny-ink);
text-wrap: balance;
}
.svl-line {
display: block;
color: var(--ny-ink-soft);
font-size: 1rem;
line-height: 1.5;
margin: 0 0 1.15rem;
}
.svl-foot {
margin-top: auto;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.4rem 1rem;
padding-top: 0.8rem;
border-top: 1px solid color-mix(in srgb, var(--ny-ink) 16%, transparent);
}
.svl-price,
.svl-go {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 0.76rem;
letter-spacing: 0.055em;
text-transform: uppercase;
line-height: 1.4;
}
.svl-price { color: var(--ny-ink-soft); }
.svl-go {
color: var(--ny-ink);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.svl-arrow {
color: var(--ny-tangerine-text);
transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---- hover / focus --------------------------------------------------- */
/* a.of-svc's invert only recolours