/* ==========================================================================
POST OFFICE WEBSITE TEMPLATE — MASTER STYLESHEET
--------------------------------------------------------------------------
HOW TO USE THIS FILE
1. Everything you would normally want to change lives in [01] TOKENS below.
Change a colour or font there once and the whole site follows.
2. Sections below are numbered and match the comments in the HTML files.
3. Do NOT edit inside a section unless you need a real layout change.
========================================================================== */
/* ==========================================================================
[01] DESIGN TOKENS — EDIT THESE FIRST
========================================================================== */
:root {
/* --- Brand colours -----------------------------------------------------
--brand : main red, used for buttons, links, accents
--brand-dark : hover state / dark red bands
Change these two to re-skin the entire site. */
--brand: #C8102E;
--brand-dark: #97001F;
--brand-tint: #FDEEF0; /* very light red, used for icon chips */
/* --- Neutrals --------------------------------------------------------- */
--ink: #14181F; /* headings, dark sections */
--body: #3D4653; /* body copy */
--muted: #6B7583; /* captions, meta */
--rule: #E4E0DA; /* borders and dividers */
--paper: #FBF9F6; /* page background */
--white: #FFFFFF;
/* --- Typography -------------------------------------------------------
--font-display : headlines
--font-body : everything else
Swap the family names here AND the in each HTML . */
--font-display: "Bricolage Grotesque", Georgia, serif;
--font-body: "Public Sans", system-ui, -apple-system, sans-serif;
/* --- Type scale (fluid: shrinks on mobile automatically) -------------- */
--t-hero: clamp(2.4rem, 5.4vw, 4rem);
--t-h2: clamp(1.75rem, 3.2vw, 2.5rem);
--t-h3: clamp(1.15rem, 1.6vw, 1.35rem);
--t-body: 1.0313rem;
--t-small: 0.875rem;
--t-tiny: 0.75rem;
/* --- Layout ----------------------------------------------------------- */
--container: 1180px; /* max content width */
--gutter: 24px; /* left/right page padding on mobile */
--section-y: clamp(56px, 8vw, 104px); /* vertical space between sections */
--radius: 14px;
--radius-sm: 10px;
/* --- Effects ---------------------------------------------------------- */
--shadow: 0 2px 4px rgba(20,24,31,.04), 0 12px 28px rgba(20,24,31,.07);
--shadow-sm: 0 1px 2px rgba(20,24,31,.05), 0 4px 12px rgba(20,24,31,.05);
--ease: cubic-bezier(.22,.61,.36,1);
}
/* ==========================================================================
[02] RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Stops #anchor links landing underneath the sticky bar */
:target { scroll-margin-top: 140px; }
.svc-group, .faq details { scroll-margin-top: 140px; }
body {
margin: 0;
background: var(--paper);
color: var(--body);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--ink);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 .5em;
font-weight: 600;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }
/* Keyboard focus ring — do not remove (accessibility requirement) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 2px;
border-radius: 4px;
}
/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}
/* ==========================================================================
[03] LAYOUT HELPERS
========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--ink { background: var(--ink); color: #C9CFDA; }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--alt { background: var(--white); }
/* Standard section intro block */
.section-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; }
/* Small uppercase label that sits above a heading */
.eyebrow {
display: inline-block;
font-size: var(--t-tiny);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 14px;
}
.section--ink .eyebrow { color: #FF8A9B; }
/* Generic responsive grids */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* ==========================================================================
[04] BUTTONS
========================================================================== */
.btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 14px 26px;
border: 1px solid transparent;
border-radius: 999px;
font-family: var(--font-body);
font-size: .95rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--brand-dark); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--light { background: var(--white); color: var(--brand); }
.btn--light:hover { color: var(--brand-dark); }
.btn--sm { padding: 10px 18px; font-size: .85rem; }
/* ==========================================================================
[05] HEADER / NAVIGATION
--------------------------------------------------------------------------
Mobile menu is pure CSS (checkbox hack) — no JavaScript anywhere on site.
========================================================================== */
/* Sticky wrapper — holds the topbar AND the header so BOTH stay pinned
to the top of the screen while the page scrolls. To make the bars scroll
away again, delete the three lines inside .sticky-top. */
.sticky-top {
position: sticky;
top: 0;
z-index: 60;
}
/* Thin dark strip above the header holding address, hours + phone */
.topbar {
background: var(--ink);
color: #B9C0CC;
font-size: var(--t-small);
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; }
/* On narrow screens the address wraps onto its own line and makes the pinned
bar too tall, so hide it there — the full address is in the footer and on
the contact page. Delete this block to show it on mobile too. */
@media (max-width: 700px) {
.topbar__inner > span:first-child { display: none; }
.topbar__inner { justify-content: center; }
}
.topbar a { color: var(--white); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: #FF8A9B; }
.site-header {
/* Positioning is handled by .sticky-top above — do not add position:sticky here */
background: var(--white);
border-bottom: 1px solid var(--rule);
box-shadow: 0 1px 0 rgba(20,24,31,.04), 0 6px 18px rgba(20,24,31,.05);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
/* Logo lockup — swap the ![]()
in the HTML, keep the height cap */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { height: 46px; width: auto; }
.logo__text { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.05; color: var(--ink); letter-spacing: -.01em; }
.logo__text span { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600;
padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--brand); }
/* --- The "Call the branch" button ---------------------------------------
.nav a is more specific than .btn, so without these rules the nav link
styles would strip the button's padding and turn its text red on hover.
These restore proper button behaviour inside the nav. */
.nav a.btn {
padding: 11px 22px;
font-size: .9rem;
font-weight: 700;
border-bottom: 1px solid transparent;
line-height: 1.2;
margin-left: 6px;
}
.nav a.btn--primary,
.nav a.btn--primary[aria-current="page"] {
color: var(--white);
background: var(--brand);
border-color: var(--brand);
}
.nav a.btn--primary:hover {
background: var(--brand-dark);
border-color: var(--brand-dark);
color: var(--white);
transform: translateY(-2px);
}
/* Hamburger — hidden on desktop */
.nav-toggle { display: none; }
.nav-toggle__label { display: none; }
@media (max-width: 900px) {
.nav-toggle__label {
display: flex; flex-direction: column; gap: 5px; cursor: pointer;
padding: 12px; margin-right: -12px;
}
.nav-toggle__label span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav {
position: absolute; left: 0; right: 0; top: 100%;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--white); border-bottom: 1px solid var(--rule);
max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
}
.nav a { padding: 15px var(--gutter); border-bottom: 1px solid var(--rule); }
.nav a.btn { margin: 16px var(--gutter); justify-content: center; padding: 14px 22px; }
.nav-toggle:checked ~ .nav { max-height: 520px; }
}
/* ==========================================================================
[06] HERO
--------------------------------------------------------------------------
SIGNATURE ELEMENT: the photo sits in a "postage stamp" frame with real
perforated edges, drawn entirely in CSS (no image needed).
IMAGE: 640 × 512 displayed → export at 1280 × 1024 (5:4)
========================================================================== */
.hero { padding-block: clamp(48px, 6vw, 84px); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__title { margin-bottom: 20px; }
.hero__title em { font-style: normal; color: var(--brand); }
.hero__lede { font-size: 1.1rem; color: var(--body); max-width: 52ch; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* --- The stamp frame --- */
.stamp {
position: relative;
background: var(--white);
padding: 14px;
filter: drop-shadow(0 14px 30px rgba(20,24,31,.14));
/* Perforations: white circles punched out of all four edges */
--perf: 11px;
-webkit-mask:
radial-gradient(circle at 50% 0, transparent var(--perf), #000 calc(var(--perf) + .5px)) 50% 0 / 26px 100% repeat-x,
radial-gradient(circle at 50% 100%, transparent var(--perf), #000 calc(var(--perf) + .5px)) 50% 100% / 26px 100% repeat-x,
radial-gradient(circle at 0 50%, transparent var(--perf), #000 calc(var(--perf) + .5px)) 0 50% / 100% 26px repeat-y,
radial-gradient(circle at 100% 50%, transparent var(--perf), #000 calc(var(--perf) + .5px)) 100% 50% / 100% 26px repeat-y;
-webkit-mask-composite: source-in;
mask:
radial-gradient(circle at 50% 0, transparent var(--perf), #000 calc(var(--perf) + .5px)) 50% 0 / 26px 100% repeat-x,
radial-gradient(circle at 50% 100%, transparent var(--perf), #000 calc(var(--perf) + .5px)) 50% 100% / 26px 100% repeat-x,
radial-gradient(circle at 0 50%, transparent var(--perf), #000 calc(var(--perf) + .5px)) 0 50% / 100% 26px repeat-y,
radial-gradient(circle at 100% 50%, transparent var(--perf), #000 calc(var(--perf) + .5px)) 100% 50% / 100% 26px repeat-y;
mask-composite: intersect;
}
.stamp img { aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
/* Wrapper so the postmark can overlap the stamp without being clipped by
the stamp's perforation mask. */
.stamp-wrap { position: relative; display: inline-block; padding: 0 18px 18px 0; }
.stamp-wrap .stamp { display: block; }
/* Small "postmark" badge that overlaps the stamp */
.postmark {
position: absolute; right: 0; bottom: 0; z-index: 2;
width: 108px; height: 108px; border-radius: 50%;
display: grid; place-content: center; text-align: center;
background: var(--brand); color: var(--white);
border: 3px double rgba(255,255,255,.6);
font-family: var(--font-body); font-size: .62rem; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
transform: rotate(-8deg);
}
.postmark strong { display: block; font-size: 1.05rem; letter-spacing: .02em; }
@media (max-width: 860px) {
.hero__inner { grid-template-columns: 1fr; }
.hero__media { order: -1; max-width: 460px; }
.postmark { width: 88px; height: 88px; }
}
/* ==========================================================================
[07] TRUST BAR (row of short reassurance points)
========================================================================== */
.trustbar { background: var(--white); border-block: 1px solid var(--rule); }
.trustbar ul {
list-style: none; margin: 0; padding: 20px 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 24px;
}
.trustbar li {
display: flex; align-items: center; gap: 10px;
font-size: var(--t-small); font-weight: 600; color: var(--ink);
}
.trustbar svg { flex: none; width: 18px; height: 18px; color: var(--brand); }
/* ==========================================================================
[08] STATS BAND
--------------------------------------------------------------------------
⚠ ONLY use numbers you can evidence. Unverifiable claims are an ASA /
CAP Code risk in the UK and hurt trust signals. Delete rows you can't back.
========================================================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; }
.stat { padding: 26px 22px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; color: var(--brand); line-height: 1; }
.stat__label { font-size: var(--t-small); color: var(--muted); margin-top: 8px; display: block; }
/* ==========================================================================
[09] CARDS (service tiles, feature tiles, story tiles)
========================================================================== */
.card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 26px 24px 24px;
display: flex; flex-direction: column;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #D6D0C8; }
.card h3 { margin-bottom: .4em; }
.card p { font-size: .95rem; color: var(--muted); flex: 1; }
/* Red icon chip at the top of a card */
.card__icon {
width: 46px; height: 46px; border-radius: 12px;
background: var(--brand-tint); color: var(--brand);
display: grid; place-content: center; margin-bottom: 16px;
}
.card__icon svg { width: 22px; height: 22px; }
.card__link {
margin-top: 14px; font-size: .9rem; font-weight: 700; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
}
.card__link:hover { gap: 10px; }
/* Dark variant used on ink sections */
.section--ink .card { background: #1D222B; border-color: #2C333F; }
.section--ink .card p { color: #98A1AF; }
.section--ink .card__icon { background: rgba(200,16,46,.18); color: #FF7C90; }
/* ==========================================================================
[10] SPLIT CONTENT (image beside text — About page story blocks)
--------------------------------------------------------------------------
IMAGE: 560 × 420 displayed → export at 1120 × 840 (4:3)
========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: var(--shadow); }
@media (max-width: 800px) {
.split { grid-template-columns: 1fr; }
.split--reverse .split__media { order: 0; }
}
/* ==========================================================================
[11] SERVICE DETAIL LIST (services.html)
========================================================================== */
.svc-group { border-top: 2px solid var(--ink); padding-top: 28px; margin-top: clamp(44px, 6vw, 72px); }
.svc-group:first-of-type { margin-top: 0; }
.svc-group__title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.svc-group__count { font-size: var(--t-small); font-weight: 700; color: var(--muted); }
.svc-item { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.svc-item h3 { margin-bottom: .35em; }
.svc-item p { margin: 0; color: var(--body); font-size: .97rem; max-width: 74ch; }
/* Sticky in-page jump menu */
.jumpnav { position: sticky; top: 132px; align-self: start; } /* clears topbar + header */
.jumpnav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.jumpnav a { display: block; padding: 9px 16px; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--body); border-left: 2px solid transparent; margin-left: -2px; }
.jumpnav a:hover { color: var(--brand); border-left-color: var(--brand); }
.svc-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) { .svc-layout { grid-template-columns: 1fr; } .jumpnav { display: none; } }
/* ==========================================================================
[12] FAQ ACCORDION (native — no JavaScript)
========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
background: var(--white); border: 1px solid var(--rule);
border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden;
}
.faq details[open] { border-color: var(--brand); }
.faq summary {
cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative;
font-family: var(--font-display); font-weight: 600; font-size: 1.03rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; position: absolute; right: 20px; top: 50%;
width: 10px; height: 10px; margin-top: -6px;
border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq__body { padding: 0 20px 20px; color: var(--body); font-size: .97rem; }
.faq .faq__body p:last-child { margin-bottom: 0; }
/* ==========================================================================
[13] CONTACT PAGE (details column + form column)
========================================================================== */
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr; } }
.info-list { list-style: none; margin: 0 0 28px; padding: 0; }
.info-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.info-list svg { flex: none; width: 20px; height: 20px; color: var(--brand); margin-top: 3px; }
.info-list strong { display: block; color: var(--ink); font-size: .9rem; }
.info-list a { text-decoration: none; }
/* Opening hours table */
.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th { text-align: left; font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-bottom: 8px; font-weight: 700; }
.hours td { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.hours .is-closed td:last-child { color: var(--muted); font-weight: 500; }
/* Form */
.form-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem; color: var(--ink);
background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); background: var(--white); }
.form-note { font-size: var(--t-tiny); color: var(--muted); margin-top: 14px; }
/* Google Map embed wrapper — keeps a fixed ratio */
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); aspect-ratio: 16 / 7; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ==========================================================================
[14] CTA BAND (full-width red call to action)
========================================================================== */
.cta {
background: var(--brand);
color: rgba(255,255,255,.9);
border-radius: var(--radius);
padding: clamp(36px, 5vw, 64px);
text-align: center;
}
.cta h2 { color: var(--white); max-width: 18ch; margin-inline: auto; }
.cta p { max-width: 56ch; margin-inline: auto; margin-bottom: 26px; }
.cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.5); }
.cta .btn--ghost:hover { border-color: var(--white); color: var(--white); }
/* ==========================================================================
[15] FOOTER
========================================================================== */
.site-footer { background: var(--ink); color: #99A2B0; font-size: .93rem; padding-block: clamp(44px, 5vw, 68px) 0; }
.site-footer h4 { color: var(--white); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-body); font-weight: 700; margin-bottom: 16px; }
.site-footer a { color: #99A2B0; text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 9px; }
/* Social icon row */
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a {
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid #2C333F; display: grid; place-content: center;
transition: background .18s var(--ease), border-color .18s var(--ease);
}
.socials a:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.socials svg { width: 17px; height: 17px; }
.footer-bottom {
margin-top: 44px; border-top: 1px solid #262C36; padding-block: 20px;
display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
font-size: var(--t-small); color: #6E7787;
}
/* --- LEGAL DISCLAIMER BAND ------------------------------------------------
Full-bleed strip across the very bottom of the page. Deliberately plain
and formal: no rounded corners, justified measure, generous line height.
Keep this while the branch is independently operated. */
.legal {
background: #0D1117;
border-top: 1px solid #262C36;
padding-block: 26px;
}
.legal p {
margin: 0;
max-width: none; /* runs the full width of the container */
font-size: var(--t-small);
line-height: 1.75;
color: #8892A0;
text-align: left;
letter-spacing: .005em;
}
.legal strong { color: #B6BEC9; font-weight: 600; }
.legal a { color: #B6BEC9; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--white); }
/* Small utility used in place of inline style attributes (keeps the
Content-Security-Policy strict — see the meta tag in each ) */
.note { color: var(--muted); font-size: .95rem; }
.mb-22 { margin-bottom: 22px; }
/* ==========================================================================
[16] PAGE HEADER (inner pages)
========================================================================== */
.page-head { background: var(--white); border-bottom: 1px solid var(--rule); padding-block: clamp(40px, 5vw, 72px); }
.page-head p { max-width: 60ch; color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }
.crumbs { font-size: var(--t-small); color: var(--muted); margin-bottom: 14px; }
.crumbs a { text-decoration: none; }
/* ==========================================================================
[17] UTILITIES
========================================================================== */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-32 { margin-top: 32px; }
.lede { font-size: 1.1rem; color: var(--body); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Skip link for screen-reader / keyboard users */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 10px 16px; border-radius: 8px; }