rows, one white card each, that open and close with
JS off. The +/- is drawn in CSS. The closing band keeps this page's own title and line. */
.fq-list { display: grid; gap: 12px; max-width: 840px; margin: 0 auto; }
.fq-item { border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(16, 27, 51, .04); }
.fq-item[open] { border-color: #CDD5E6; box-shadow: 0 14px 34px rgba(16, 27, 51, .08); }
.fq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 20px 14px 24px; border-radius: 16px; cursor: pointer; list-style: none; }
.fq-q::-webkit-details-marker { display: none; }
.fq-q::marker { content: ""; }
.fq-q-text { font-size: var(--t-l); line-height: 1.4; font-weight: 700; color: var(--navy); text-wrap: pretty; }
.fq-q:hover .fq-q-text { color: var(--blue-d); }
.fq-pm { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #E9EFFF; }
.fq-pm::before, .fq-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--blue-d); }
.fq-pm::after { transform: rotate(90deg); }
.fq-item[open] .fq-pm { background: var(--navy); }
.fq-item[open] .fq-pm::before, .fq-item[open] .fq-pm::after { background: #fff; }
.fq-item[open] .fq-pm::after { transform: rotate(0deg); } /* the plus becomes a minus */
.fq-a { max-width: 68ch; padding: 0 24px 24px; font-size: var(--t-b); line-height: 1.65; color: var(--slate); text-wrap: pretty; }
/* a link under an answer (the websites question to /services): the site's blue link, tucked under the answer */
.fq-more { margin-top: -16px; padding: 0 24px 12px; }
/* the phone number inside the closing band's line */
.fq-tel { color: #fff; font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
.fq-tel:hover { text-decoration-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
html.js.aa-m .fq-pm, html.js.aa-m .fq-pm::before, html.js.aa-m .fq-pm::after { transition: transform .2s ease, background-color .2s ease; }
}
@media (max-width: 599px) {
.fq-list { gap: 10px; }
.fq-q { gap: 14px; min-height: 60px; padding: 12px 14px 12px 18px; }
.fq-q-text { font-size: var(--t-b); }
.fq-pm { width: 28px; height: 28px; }
.fq-a { padding: 0 18px 20px; }
.fq-more { margin-top: -14px; padding: 0 18px 8px; }
}
/* Contact, booking and privacy: every rule is scoped to its page (, "au", "pv") and every class
carries the page's prefix. The shared pieces (page hero, .sec bands, .steps, the closing band, buttons, pill) are
site.css's; the few layout tweaks to them below stay under the page's own main class. Nothing here hides or
animates anything: JS off and reduced motion get the same page. */
/* ---------- 3. CONTACT (/contact, /fr/contact: main.ct, ct- classes) ---------- */
/* hero: the two fastest ways (call, email) under the lede, then the four facts on one quiet row */
.ct .ct-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 32px; }
.ct .ct-act .btn:hover .ic, .ct .ct-close .btn:hover .ic { transform: none; } /* a leading icon stays put */
.ct-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 32px; font-size: var(--t-s); line-height: 1.5; font-weight: 500; color: var(--navy); }
.ct-facts li { display: inline-flex; align-items: center; gap: 8px; }
.ct-facts .ic { width: 16px; height: 16px; color: var(--blue-d); stroke-width: 2.5; }
/* how to reach us: three white cards on the tint, each a navy icon tile, a mono label and the value */
.ct-ways { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; }
@media (min-width: 1100px) { .ct-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; } }
.ct-way {
display: flex; align-items: center; gap: 16px; height: 100%; min-height: 104px; padding: 24px;
border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16, 27, 51, .05);
color: var(--navy); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-way:hover { border-color: #CDD5E6; box-shadow: 0 16px 40px rgba(16, 27, 51, .1); }
.ct-way-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--navy); color: #fff; }
.ct-way-ic .ic { width: 22px; height: 22px; }
.ct-way-txt { display: grid; gap: 2px; min-width: 0; }
.ct-way-label { font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.ct-way-value { font-size: var(--t-l); line-height: 1.4; font-weight: 700; color: var(--blue-d); }
.ct-way-value .ic { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; transition: transform .2s ease; }
.ct-way:hover .ct-way-value { text-decoration: underline; text-underline-offset: 4px; }
.ct-way:hover .ct-way-value .ic { transform: translateX(3px); }
.ct-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; margin-top: 24px; }
@media (max-width: 599px) {
/* phone: the two buttons full width (the homepage hero's), the facts two by two, the cards a size down */
.ct .ct-act { align-self: stretch; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 28px; }
.ct-facts { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 8px 20px; margin-top: 28px; text-align: left; }
.ct-facts li { align-items: flex-start; }
.ct-facts .ic { margin-top: 3px; }
.ct-way { gap: 14px; min-height: 88px; padding: 18px 16px; border-radius: 16px; }
.ct-way-ic { width: 44px; height: 44px; border-radius: 12px; }
.ct-way-ic .ic { width: 20px; height: 20px; }
.ct-way-value { font-size: var(--t-b); }
}
@media (max-width: 379px) { .ct-facts { grid-template-columns: max-content; } }
@media (max-width: 459px) { .ct-facts:lang(fr) { grid-template-columns: max-content; } } /* the French items are wider */
/* ---------- 4. BOOKING (/audit, /fr/bilan: main.au, au- classes) ----------
The page exists to book. From 1180px one grid: the premise (the page hero, left-aligned here) and "How the call
goes" on the left, the calendar on the right on a tint stage that runs off the right page edge, so the calendar is
on the first screen. Below 1180px: one column in the source order (premise, calendar, steps), the premise centred
like every inner page hero, the calendar on a full-width tint band. The Google Calendar embed is untouched; only
its frame and height are set here: Google lays it out in two columns from 600px wide (a day's times fit in about
980px) and stacks it below that (the times then need about 1,900px, hence the phone's 2,150px, as before). */
.au-top { overflow: clip; border-bottom: 1px solid var(--line); } /* the A and the tint stage stop at the page edges */
.au-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "book" "steps"; }
.au .au-hero { grid-area: hero; overflow: visible; background: none; }
.au-book { grid-area: book; position: relative; isolation: isolate; scroll-margin-top: 80px; padding: 48px 0 40px; }
.au-book::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--tint); }
.au-steps { grid-area: steps; padding: 72px 0 80px; }
/* the premise */
.au-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 24px; font-size: var(--t-b); line-height: 1.5; font-weight: 500; color: var(--navy); }
.au-ticks li { display: inline-flex; align-items: flex-start; gap: 10px; }
.au-ticks .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--blue-d); stroke-width: 2.5; }
.au .au-cta { margin-top: 32px; }
.au .au-cta:hover .ic { transform: translateY(3px); } /* the arrow nudges the way it points */
/* the calendar */
.au-book-head, .au-cal, .au-after { max-width: 700px; margin-inline: auto; }
.au-book-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.au-book-head h2, .au-steps h2 { font-size: clamp(28px, 1.2vw + 20px, 36px); line-height: 1.1; }
.au-founder { display: flex; align-items: center; gap: 12px; font-size: var(--t-s); line-height: 1.45; color: var(--navy); }
.au-founder img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.au-cal {
margin-top: 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px;
box-shadow: 0 24px 60px rgba(16, 27, 51, .08);
}
.au-cal iframe { display: block; width: 100%; height: 980px; border: 0; }
.au-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: 12px; }
.au-hours { display: flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--mute); }
.au-dot { flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #15803D; }
.au-phone { font-size: var(--t-s); line-height: 1.5; color: var(--slate); }
.au-phone .link { font-size: var(--t-s); }
/* how the call goes: centred head and the homepage's steps (a row from 900px, down the rail below) */
.au-steps h2 { margin-bottom: 40px; text-align: center; }
.au .au-rec { margin-top: 8px; font-size: var(--t-s); color: var(--mute); }
.au-notes { display: grid; gap: 10px; max-width: 40em; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--t-b); line-height: 1.6; color: var(--navy); text-align: center; text-wrap: pretty; }
.au-notes strong { font-weight: 700; }
@media (max-width: 767px) {
.au-book { padding: 40px 0 32px; }
.au-steps { padding: 56px 0 64px; }
.au-steps h2 { margin-bottom: 32px; }
.au-notes { margin-top: 40px; text-align: left; }
}
@media (max-width: 599px) {
.au-ticks { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.au .au-cta { width: 100%; margin-top: 28px; }
.au-book-head { gap: 12px; }
.au-after { flex-direction: column; align-items: flex-start; margin-top: 8px; }
}
/* Google stacks the calendar under 600px wide: the times then run about 1,900px (the live page's 2,150px) */
@media (max-width: 660px) { .au-cal iframe { height: 2150px; } }
/* from 1180px: the two columns */
@media (min-width: 1180px) {
.au-grid {
grid-template-columns: minmax(0, 1fr) 620px; column-gap: 64px; grid-template-areas: "hero book" "steps book";
grid-template-rows: auto 1fr; align-items: start; padding-top: 40px; padding-bottom: 64px;
}
.au .au-hero { padding: 24px 0 0; text-align: left; }
.au .au-hero-in { align-items: flex-start; }
.au .au-hero h1 { max-width: none; font-size: 46px; line-height: 1.08; }
.au .au-hero .lede { max-width: none; }
.au-ticks { flex-direction: column; justify-content: flex-start; gap: 8px; }
.au .au-cta .ic { rotate: -90deg; } /* it points at the calendar beside it */
/* the faint A: behind the premise, feet under the button, its left foot off the page (the homepage hero's A) */
.au .au-a { width: 640px; left: -176px; right: auto; bottom: -48px; }
/* the frame keeps Google's two-column layout (it needs 600px), the stage reaches into the gap */
.au-book { padding: 40px 0 32px; }
.au-book::before { left: -32px; right: -100vw; border-radius: 28px 0 0 28px; }
.au-book-head, .au-cal, .au-after { max-width: none; }
.au-steps { padding: 72px 0 0; }
.au-steps h2 { margin-bottom: 32px; text-align: left; }
/* the steps down the column: the homepage's phone form of .steps, kept at this width */
.au .au-steps .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 88px; }
.au .au-steps .step { justify-items: start; text-align: left; }
.au .au-steps .step p { margin-inline: 0; }
.au .au-steps .step-n { position: absolute; left: -88px; top: -4px; }
.au .au-steps .step h3 { margin-top: 12px; }
.au .au-steps .step:not(:last-child)::after { left: -57px; top: 60px; width: 2px; height: calc(100% - 36px); }
.au-notes { margin: 40px 0 0; text-align: left; }
}
@media (min-width: 1320px) {
.au-grid { grid-template-columns: minmax(0, 1fr) 640px; column-gap: 72px; }
.au-book::before { left: -36px; }
}
/* FR: « Montrez-nous une tâche. » is about 11.8em against the EN line's 8.2em; beside the calendar it stays on one line */
@media (min-width: 1180px) { .au:lang(fr) .au-hero h1 { font-size: min(42px, calc((100vw - 780px) / 11.8)); } }
/* ---------- 5. PRIVACY (/privacy, /fr/confidentialite: main.pv, pv- classes) ----------
Legal prose: one white sheet on the tint, one readable column (about 70 characters a line), each part a heading and
its paragraph, hairlines between. No decoration in the way. */
.pv .pv-date { font-size: var(--t-b); }
.pv-body { padding-top: 64px; }
.pv-doc {
max-width: 800px; margin: 0 auto; padding: 16px 64px;
border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(16, 27, 51, .06);
}
.pv-part { padding: 36px 0; scroll-margin-top: 96px; }
.pv-part + .pv-part { border-top: 1px solid var(--line); }
.pv-part h2 { font-size: var(--t-h3); line-height: 1.3; font-weight: 800; letter-spacing: -.015em; color: var(--navy); }
.pv-part p { max-width: 68ch; margin-top: 12px; font-size: var(--t-l); line-height: 1.7; color: var(--ink); text-wrap: pretty; }
/* the email and phone links inside the text: the link blue with an underline you can see (the blue alone is too
close to the navy text to mark a link) */
.pv-part a {
color: var(--blue-d); font-weight: 600; text-decoration: underline;
text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(21, 67, 201, .4);
}
.pv-part a:hover { text-decoration-color: currentColor; }
.pv-part a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 767px) {
.pv-doc { padding: 8px 32px; border-radius: 20px; }
.pv-part { padding: 28px 0; }
}
@media (max-width: 599px) {
/* phone: the sheet takes most of the width (12px of tint each side), so the text keeps a readable line */
.pv-body { padding-top: 32px; }
.pv-doc { margin-inline: -8px; padding: 4px 20px; border-radius: 16px; }
.pv-part { padding: 24px 0; }
.pv-part h2 { font-size: 20px; }
.pv-part p { margin-top: 8px; font-size: var(--t-b); line-height: 1.65; }
}
/* ---------- 6. CASE STUDIES (/case-studies, /fr/realisations: main.cs-page, cs- classes) ----------
The page hero (site.css 11); one band per study, tint / white / tint, each a jump target from the homepage
(#plumbing, #wellness, #resitek): the centred head (the company as the pill, the title, the lead), the study's
maps from the homepage ideas in white cards like the homepage's idea card (each map named by an h3 in its tag),
then the study's list. The wellness study's four numbers sit as one quiet row under its lead. Then the closing
band (site.css 9). No motion of its own: the maps' running light is ideas.css (html.js.aa-m only). */
/* a jump from the homepage (/case-studies#wellness) lands with the pill clear of the sticky nav */
.cs-page .cs-study { scroll-margin-top: 16px; }
@media (max-width: 767px) { .cs-page .cs-study { scroll-margin-top: 32px; } }
/* the head: the lead never leaves one word alone on its last line; a long company name (the IT one, the French
ones) wraps inside its pill on a phone */
.cs-page .cs-study .sec-sub { text-wrap: balance; }
@media (max-width: 599px) {
.cs-page .cs-study .pill { max-width: 100%; letter-spacing: .12em; border-radius: 16px; text-wrap: balance; }
}
/* wellness: the four numbers as one quiet row under the lead (a 2 x 2 grid on phones) */
.cs-page .cs-stats { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 12px; margin-top: 12px; }
.cs-page .cs-stats li { display: grid; justify-items: center; align-content: start; padding: 2px 28px; text-align: center; }
.cs-page .cs-stats li + li { box-shadow: inset 1px 0 0 var(--line); }
.cs-page .cs-stats strong { font-size: var(--t-h3); line-height: 1.3; font-weight: 800; letter-spacing: -0.015em; color: var(--navy); }
.cs-page .cs-stats span { font-size: var(--t-s); line-height: 1.5; color: var(--slate); }
@media (max-width: 599px) {
.cs-page .cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; width: 100%; }
.cs-page .cs-stats li { padding: 0 8px; }
.cs-page .cs-stats li + li { box-shadow: none; }
.cs-page .cs-stats li:nth-child(even) { box-shadow: inset 1px 0 0 var(--line); }
}
/* the maps: the homepage's map panel (ideas.css .slot-line) inside a white card like the homepage's idea card.
Two side by side from 1200px (plumbing, Resitek); the one wellness map centred. The map's name is its tag. */
.cs-page .cs-maps { display: grid; gap: 24px; }
@media (min-width: 1200px) { .cs-page .cs-maps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-page .cs-maps-one { max-width: 720px; margin: 0 auto; }
@media (min-width: 1200px) { .cs-page .cs-maps-one { grid-template-columns: minmax(0, 1fr); } }
.cs-page .cs-map { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(16, 27, 51, .08); }
.cs-page .cs-map > .slot { flex: 1 1 auto; margin: 12px; border-radius: 20px; }
/* side by side, the two panels are the same height and their lines at the same level (the "Connects" line sits
at the bottom, one or two lines) */
.cs-page .cs-map .ln { margin: 0 0 auto; }
.cs-page .cs-map .slot-tag { letter-spacing: 0; } /* an h3 here: keep the plain tag's letter spacing */
/* two maps side by side: a little more room for the stations' words */
@media (min-width: 1200px) { .cs-page .cs-maps:not(.cs-maps-one) .lscene { padding-left: 20px; padding-right: 20px; } }
/* ...and the Connects line in the phone's comma style (ideas.css), so it fits on one line in the half-width card
instead of ending a line on a stray dot */
@media (min-width: 1200px) {
.cs-page .cs-maps:not(.cs-maps-one) .ln-con { gap: 2px 6px; }
.cs-page .cs-maps:not(.cs-maps-one) .ln-con i { display: none; }
.cs-page .cs-maps:not(.cs-maps-one) .ln-con span:not(.ln-con-h):not(:last-child)::after { content: ","; }
}
@media (max-width: 599px) {
.cs-page .cs-maps { gap: 16px; }
.cs-page .cs-map { border-radius: 20px; }
.cs-page .cs-map > .slot { margin: 8px; border-radius: 16px; }
}
/* the smallest phones: a long map name wraps in its tag (under 340px, EN and FR), so the stations start lower */
@media (max-width: 379px) { .cs-page .cs-map .slot-tag { right: 14px; width: fit-content; border-radius: 14px; } }
@media (max-width: 339px) { .cs-page .cs-map .lscene { padding-top: 88px; } }
/* the study's list, word for word: two columns from 900px, each line with a small check in a blue circle */
.cs-page .cs-list { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 900px) { .cs-page .cs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; } }
/* under two maps (plumbing, Resitek) the list is one centred column: two columns would sit under the two maps and
read as their captions, and the bullets do not split that way */
@media (min-width: 900px) { .cs-page .cs-maps:not(.cs-maps-one) + .cs-list { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; } }
.cs-page .cs-list li { position: relative; padding-left: 40px; font-size: var(--t-b); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.cs-page .cs-list .ic { position: absolute; left: 0; top: 0; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #E9EFFF; color: var(--blue-d); stroke-width: 3; }
@media (max-width: 767px) { .cs-page .cs-list { margin-top: 32px; } }
/* ---------- 7. SERVICES (/services, /fr/services: main.sv, sv- classes) ----------
Page hero (site.css 11: pill, H1, lede, no button), then the four kinds of things we build as white cards on the
tint (two by two from 860px; the section's h2 is visually hidden, so the first card is on the first screen) with
one line under them, then how it is paid (white) and the closing band. Each card: a navy icon tile, the name, one
line, the examples as small tags, the "Built for" line and, where one exists, the case study, pushed to the card's
foot so the links line up side by side. Nothing here is hidden or animated. */
.sv-what { padding-top: 64px; }
.sv-list { display: grid; gap: 16px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 860px) { .sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
/* the icon sits beside the name (as on About's two cards), so the name is the first thing read; the line, the tags
and the proof run under both. The last row takes the spare height, so the proof links still line up side by side. */
.sv-item {
display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 14px; align-items: center;
padding: 32px; scroll-margin-top: 96px;
border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16, 27, 51, .05);
}
.sv-ic { grid-row: 1; grid-column: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: #fff; }
.sv-ic .ic { width: 20px; height: 20px; }
.sv-item h3 { grid-row: 1; grid-column: 2; font-size: clamp(22px, .6vw + 18px, 26px); line-height: 1.3; letter-spacing: -.015em; color: var(--navy); }
.sv-line, .sv-tags, .sv-proof { grid-column: 1 / -1; }
.sv-line { margin-top: 14px; font-size: var(--t-l); line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.sv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sv-tags li { padding: 6px 12px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); font-size: var(--t-s); line-height: 1.5; font-weight: 600; color: var(--navy); }
.sv-proof { display: flex; flex-direction: column; align-items: flex-start; align-self: start; padding-top: 24px; } /* right under the tags: when one card in a row is taller, its spare room goes to the bottom, not into a gap above the proof */
/* the dot sits on the first line when the line wraps */
.sv-tag { display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--t-s); line-height: 1.5; font-weight: 600; color: var(--navy); text-wrap: pretty; }
.sv-tag::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--blue); }
.sv-proof .link { font-size: var(--t-s); }
.sv-proof .link .ic { width: 16px; height: 16px; }
/* the line under the cards: anything else they do on a computer */
/* AI training: a full-width card under the four, a blue top edge so it reads as the other way to work with us */
.sv-train { max-width: 1080px; margin: 24px auto 0; border-top: 4px solid var(--blue); }
.sv-train .sv-line strong { color: var(--navy); font-weight: 700; }
.sv-more { max-width: 36em; margin: 40px auto 0; font-size: var(--t-l); line-height: 1.5; color: var(--slate); text-align: center; text-wrap: balance; }
/* the next step, right where the answer lands: book the call, or call now. Text links, not a button: the closing
band keeps the only big one. Stacked on phones, side by side from 600px. */
.sv-next { display: flex; flex-direction: column; align-items: center; margin-top: 8px; text-align: center; }
.sv-next .link { font-size: var(--t-b); }
.sv-call { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-b); color: var(--slate); }
.sv-call .link { gap: 8px; font-weight: 600; }
.sv-call .fic { width: 16px; height: 16px; }
@media (min-width: 600px) { .sv-next { flex-direction: row; justify-content: center; gap: 28px; } }
/* how it is paid: two short columns, then one line under both */
.sv-know { display: grid; gap: 24px; max-width: 860px; margin: 0 auto; }
/* three columns side by side on a wide screen (automations, websites, AI training); each column spans two rows of a
subgrid so the three titles and the three texts line up even when one title wraps. Stacked below 960px. */
@media (min-width: 960px) {
.sv-know { max-width: 1080px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.sv-know-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; }
.sv-know-col p { margin-top: 0; }
.sv-know-all { grid-column: 1 / -1; }
}
.sv-know-col h3 { font-size: var(--t-l); line-height: 1.35; color: var(--navy); }
.sv-know-col p { margin-top: 6px; font-size: var(--t-b); line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.sv-know-all { margin-top: 24px; padding-top: 28px; border-top: 1px solid var(--line); font-size: var(--t-b); line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.sv .close-tag { max-width: 30em; text-wrap: balance; }
@media (max-width: 767px) { .sv-what { padding-top: 40px; } }
@media (max-width: 599px) {
.sv-item { padding: 24px 20px; }
.sv-ic { width: 36px; height: 36px; border-radius: 10px; }
.sv-ic .ic { width: 18px; height: 18px; }
.sv-item h3 { font-size: 20px; }
.sv-line { margin-top: 12px; font-size: var(--t-b); }
.sv-tags { margin-top: 16px; gap: 6px; }
.sv-proof { padding-top: 18px; }
.sv-more { margin-top: 32px; font-size: var(--t-b); }
}
/* ---------- 8. SERVICE PAGES (/reports-and-alerts, /connect-your-software, /ai-assistant + FR: main.sp, sp- classes)
One page per service, linked from the Services cards. Page hero with a byline, then four bands in the tint / white
rhythm: one example as numbered steps, the common versions as small cards, what stays with the team beside the real
project, and the questions (the FAQ's own rows, section 2). The proof tag and the next-step links reuse section 7. */
.sp-by { margin-top: 20px; font-size: var(--t-s); line-height: 1.5; color: var(--slate); }
.sp-by a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(16, 27, 51, .3); text-underline-offset: 3px; }
.sp-by a:hover { text-decoration-color: currentColor; }
.sp .sec-sub { max-width: 36em; text-wrap: pretty; }
/* the steps: white cards in a column, each with its number in a navy circle */
.sp-steps { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; counter-reset: none; }
.sp-step {
display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 20px 24px;
border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(16, 27, 51, .04);
}
.sp-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: var(--t-b); }
.sp-step p { align-self: center; font-size: var(--t-l); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
/* the common versions: small cards, two columns from 720px, three from 1080px */
.sp-uses { display: grid; gap: 16px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 720px) { .sp-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sp-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-use { padding: 24px; border-radius: 20px; background: var(--tint); border: 1px solid var(--line); }
.sp-use h3 { font-size: var(--t-l); line-height: 1.35; color: var(--navy); text-wrap: balance; }
.sp-use p { margin-top: 8px; font-size: var(--t-b); line-height: 1.6; color: var(--slate); text-wrap: pretty; }
/* what stays with the team, beside the real project (one column under 960px) */
.sp-split { display: grid; gap: 32px; max-width: 1080px; }
@media (min-width: 960px) { .sp-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.sp-team h2 { max-width: 16em; }
.sp-team p { max-width: 62ch; margin-top: 16px; font-size: var(--t-l); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.sp-proof {
display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px;
border-radius: 24px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); box-shadow: 0 24px 60px rgba(16, 27, 51, .06);
}
.sp-proof-h { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.015em; color: var(--navy); }
.sp-proof-list { display: grid; gap: 12px; }
.sp-proof-list li { position: relative; padding-left: 36px; font-size: var(--t-b); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.sp-proof-list .ic { position: absolute; left: 0; top: 1px; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: #E9EFFF; color: var(--blue-d); stroke-width: 3; }
/* under the questions: the area line, the next step (section 7's .sv-next), and the way back to all services */
.sp-area { max-width: 40em; margin: 40px auto 0; font-size: var(--t-b); line-height: 1.6; color: var(--slate); text-align: center; text-wrap: balance; }
.sp-all { display: flex; justify-content: center; margin-top: 4px; }
.sp-all .link { font-size: var(--t-s); }
.sp .close-tag { max-width: 30em; text-wrap: balance; }
@media (max-width: 599px) {
.sp-step { grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 18px; }
.sp-num { width: 32px; height: 32px; font-size: var(--t-s); }
.sp-step p { font-size: var(--t-b); }
.sp-use { padding: 20px; }
.sp-team p { font-size: var(--t-b); }
.sp-proof { padding: 22px 20px; border-radius: 20px; }
.sp-area { margin-top: 32px; }
}
/* the Services cards link their tags to these pages: same chip, a blue underline so it reads as a link */
.sv-tags li:has(> a) { padding: 0; }
.sv-tags li > a { display: block; padding: 6px 12px; border-radius: 999px; color: var(--blue-d); text-decoration: underline; text-decoration-color: rgba(21, 67, 201, .35); text-underline-offset: 3px; }
.sv-tags li > a:hover { text-decoration-color: currentColor; background: #E9EFFF; }