/* Aceogen — services page only. Loaded by services.html and by nothing else. No colour is introduced here: every value resolves through a design-system token, so each rule re-colours itself on the white, sky, off-blue and navy bands the page runs through. No new classes — these are the site.css blocks, tuned for the one page that repeats the same seven-part template seven times. */ /* The services page is the only page with in-page anchors (#platform-audit … #training), and the site header is sticky. Without scroll padding an anchored section lands underneath the header. */ html{scroll-padding-top:calc(var(--header-h) + var(--sp-5))} /* ── The seven template parts, made skimmable ──────────────────────────────── Six of the seven parts are .spec rows; the seventh ("What we do NOT do") is the .callout below. A hairline above each row turns one dense definition grid into six labelled bands a reader can run an eye down, and the label takes the band's own accent role instead of the muted one. --text-accent is already bound per band by site.css, so the ratios are the ones it computed: deep-orange #cd4900 on white 4.62:1, navy #1e3d59 on sky 9.52:1 and on off-blue 9.41:1, amber #fa9819 on navy 5.13:1 — all clear of AA at the 12px this label is set in. --hairline is bound per band the same way, so the rules go light on navy without a second declaration. */ .spec-label{color:var(--text-accent)} .spec>.spec-label,.spec>.spec-body{border-top:var(--hairline)} /* The +3px is the optical nudge site.css gives .spec-label so its cap-height lines up with the first line of the body beside it; adding padding has to preserve it. */ .spec>.spec-label{padding-top:calc(var(--sp-6) + 3px)} .spec>.spec-body{padding-top:var(--sp-6)} .spec>.spec-label:first-of-type{border-top:0;padding-top:3px} .spec>.spec-body:first-of-type{border-top:0;padding-top:0} /* The
is a grid column, so it takes the column's full width — ~90 characters at 1440px and worse on a wider screen, against the 62ch the rest of the site holds to. The measure goes on the children, not the
: the
keeps filling its column so the hairline above it still spans the full band. */ .spec-body>*{max-width:var(--measure)} /* ── "What we do NOT do" — quieter than the six parts above it, never hidden ── The block keeps .callout's own tinted surface (off-blue on a white band, white on a tinted one, translucent white on navy), so it stays an unmissable box; what drops is the voice of its title. It moves from the 15px near-black .mini-title register into the same 12px micro-label register as the six .spec labels above it — but in the muted role, not the accent one, so it reads as the seventh part of the same template rather than a louder aside. It stays an

. The muted role at 12px, computed on each of the three surfaces the callout actually takes here (sRGB relative luminance, WCAG 2.1): grey-700 #575757 on the off-blue callout over a white band ......... 6.04:1 ✔ grey-700 on the white callout over a sky or off-blue band .......... 7.23:1 ✔ white-65% on the 8% white callout over navy (#304c66, so #b7c0c9) .. 4.85:1 ✔ The third is the one number not already in CSS-CONTRACT §2: its table states 5.11:1 for a .card on navy, whose fill is capped at 4% white; .callout uses --surface-muted at 8%, a lighter ground, so the ratio lands lower. It still clears AA at any size, which is what this label needs. The body text in the same box is white: 8.93:1. */ .callout-title{ font-family:var(--font-label);font-size:var(--fs-label);font-weight:var(--fw-semibold); letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted); } /* ── The seven jump links, on a phone ──────────────────────────────────────── site.css gives .btn-row>.btn full width at 560px, which is right for the one- and two-button rows the rest of the site uses. This row holds seven, and stacked they put ~350px of button column between the page title and the first line of content, pushing the banner figure and Line 01 a screen down. This is the only nav on the site built out of .btn, so restoring intrinsic width here lets the seven pills wrap two- and three-up the way they already do above 560px. No new class: the element is a