broke
the inline flow of Oxford's "Instant Bond" link.) */
.why-editorial-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: why-ed;
}
.why-editorial-list li {
counter-increment: why-ed;
position: relative;
padding: 22px 0 22px 60px;
border-top: 1px solid var(--line);
color: var(--text-2);
font-size: 17px;
line-height: 1.65;
}
.why-editorial-list li:last-child { border-bottom: 1px solid var(--line); }
.why-editorial-list li::before {
content: counter(why-ed, decimal-leading-zero);
position: absolute;
left: 0;
top: 24px;
font-family: 'Playfair Display', Georgia, serif;
color: var(--gold);
font-size: 20px;
font-weight: 600;
letter-spacing: 0.06em;
}
.why-editorial-list a {
color: var(--blue);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(30, 108, 153, 0.4);
text-underline-offset: 3px;
font-weight: 600;
}
.why-editorial-list a:hover { text-decoration-color: var(--blue); }
/* Prestige - extra-restrained variant: navy numerals + headline */
.why-editorial.is-premium .why-editorial-list li::before { color: var(--navy); font-weight: 700; }
@media (max-width: 900px) {
.why-editorial {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 32px;
}
.why-editorial-headline { position: static; }
.why-editorial-headline h2 { font-size: 34px; }
}
@media (max-width: 560px) {
.why-editorial { padding: 0 20px; gap: 24px; }
.why-editorial-headline h2 { font-size: 28px; }
.why-editorial-list li {
padding: 20px 0 20px 44px;
font-size: 16px;
}
.why-editorial-list li::before {
font-size: 17px;
top: 22px;
}
}
/* 2026-09-03 Editorial-split mobile collapse fix — the 1fr 1.4fr !important
rule above blocks the earlier @media 1fr override; this restores single-column
at ≤900px. */
@media (max-width: 900px) {
.container-narrow:has(.section-title.center):has(> .prose-wide > p),
section.section > .container-narrow:has(> h2 + .prose-wide > p) {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
}
/* 2026-09-03 Staff bio page grid (was inline style); collapses on mobile. */
.staff-bio-grid {
display: grid;
grid-template-columns: minmax(200px, 280px) 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 640px) {
.staff-bio-grid { grid-template-columns: 1fr; gap: 24px; }
.staff-bio-grid > div:first-child { max-width: 320px; margin: 0 auto; }
}
/* 2026-09-03/4 Text-led editorial blog pattern.
Applied portfolio-wide across the 6 newer Mythic agency sites. Adopts the
NC Coastal design PRINCIPLE — text-led, no per-article thumbnail — while
picking up each agency's own tokens (--ink, --text-2, --line, --gold,
--blue, --cream) so no colours are hard-coded here.
Surfaces styled:
• .editorial-blog — homepage "Latest from the Blog" section
• .editorial-index — /blog list page
Featured images render only when present. No gradient placeholders,
no card shadows, no oversized rounded rectangles. */
/* ── HOMEPAGE section ────────────────────────────────────────────────── */
.editorial-blog { padding: 72px 0; background: transparent; }
.editorial-blog .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.editorial-blog__head { max-width: 720px; margin: 0 0 40px; }
.editorial-blog__head h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 44px; line-height: 1.1; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
.editorial-blog__head .lede { font-size: 16.5px; line-height: 1.6; color: var(--text-2); margin: 0; text-wrap: pretty; }
.editorial-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 44px; align-items: start; }
.editorial-blog__grid > .editorial-item { min-width: 0; }
.editorial-item { position: relative; padding-top: 20px; }
.editorial-item::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--gold); border-radius: 2px; }
.editorial-item__link { display: block; text-decoration: none; color: inherit; }
.editorial-item__cat { display: inline-block; font-family: 'Inter', -apple-system, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0 0 12px; }
.editorial-item__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.28; color: var(--ink); margin: 0 0 12px; text-wrap: balance; transition: color .18s ease; }
.editorial-item__excerpt { font-family: 'Inter', -apple-system, sans-serif; font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 16px; text-wrap: pretty; }
.editorial-item__more { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: var(--blue); transition: gap .18s ease, color .18s ease; }
.editorial-item__more::after { content: '\2192'; transition: transform .18s ease; }
.editorial-item__link:hover .editorial-item__title { color: var(--blue); }
.editorial-item__link:hover .editorial-item__more { gap: 10px; }
.editorial-item__link:hover .editorial-item__more::after { transform: translateX(2px); }
.editorial-blog__cta { margin-top: 44px; }
@media (max-width: 960px) {
.editorial-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
.editorial-blog__head h2 { font-size: 36px; }
}
@media (max-width: 640px) {
.editorial-blog { padding: 52px 0; }
.editorial-blog__grid { grid-template-columns: 1fr; gap: 32px; }
.editorial-blog__head { margin-bottom: 28px; }
.editorial-blog__head h2 { font-size: 30px; }
.editorial-blog__head .lede { font-size: 15.5px; }
.editorial-item__title { font-size: 20px; }
.editorial-blog__cta { margin-top: 28px; text-align: left; }
}
/* ── BLOG INDEX list ─────────────────────────────────────────────────── */
.editorial-index { padding: 24px 0 96px; }
.editorial-index__list { list-style: none; padding: 0; margin: 0; }
.editorial-index__row { padding: 32px 0; border-top: 1px solid var(--line); }
.editorial-index__row:last-child { border-bottom: 1px solid var(--line); }
.editorial-index__row a { text-decoration: none; color: inherit; display: block; }
.editorial-index__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font-family: 'Inter', -apple-system, sans-serif; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin: 0 0 10px; }
.editorial-index__meta .dot { color: var(--line); font-weight: 400; letter-spacing: 0; }
.editorial-index__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.22; color: var(--ink); margin: 0 0 12px; text-wrap: balance; transition: color .18s ease; }
.editorial-index__excerpt { font-family: 'Inter', -apple-system, sans-serif; font-size: 16px; line-height: 1.65; color: var(--text-2); margin: 0 0 14px; text-wrap: pretty; max-width: 780px; }
.editorial-index__more { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: var(--blue); transition: gap .18s ease; }
.editorial-index__more::after { content: '\2192'; transition: transform .18s ease; }
.editorial-index__row a:hover .editorial-index__title { color: var(--blue); }
.editorial-index__row a:hover .editorial-index__more { gap: 10px; }
.editorial-index__row a:hover .editorial-index__more::after { transform: translateX(2px); }
.editorial-index__empty { padding: 60px 0; text-align: center; color: var(--text-2); }
.editorial-index__empty h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 26px; color: var(--ink); margin: 0 0 10px; }
@media (max-width: 640px) {
.editorial-index { padding: 16px 0 60px; }
.editorial-index__row { padding: 24px 0; }
.editorial-index__title { font-size: 22px; }
.editorial-index__excerpt { font-size: 15px; }
.editorial-index__meta { font-size: 11.5px; gap: 8px 12px; }
}
/* ── ARTICLE byline (used on article.php under the h1) ────────────── */
.editorial-byline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-family: 'Inter', -apple-system, sans-serif; font-size: 13.5px; color: var(--text-2); margin: 0 0 32px; }
.editorial-byline .dot { color: var(--line); }
.editorial-byline .cat { text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--gold); font-size: 12px; }
/* 2026-09-04/2 Staff/team portrait responsive crop fix.
The base `.team-photo { height: 320px }` combined with the shared mobile
rule that collapses `.team-grid` to 1fr on ≤1000px viewports made each
photo container wide-and-short at tablet widths (~700w × 320h), which
forced background-size/object-fit:cover to zoom past the face and clip
the top of the head. Two changes, both scoped to `.team-photo` /
`.team-grid`, no other selectors:
1. Keep the auto-fit grid on tablet so cards stay ~260–340 wide
instead of stretching to viewport width. Overrides only .team-grid
inside the existing @media, not the sibling grids in that rule.
2. Replace the fixed pixel height on .team-photo with an aspect-ratio
that matches how staff portraits are shot (4:5 portrait). Bias the
object-position toward the top so any residual cover-crop clips
below the collarbone, never above the eyes. */
@media (max-width: 1000px) {
.team-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)) !important; justify-content: center; }
}
.team-photo { aspect-ratio: 4 / 5; height: auto; background-position: center 15%; }
.team-photo > img { object-position: center 15%; }
/* =============================================================================
POWERED-BY-BAR component (Mythic Enterprises attribution).
Slim right-aligned parent-company mark rendered at the very top of
by includes/powered-by-bar.php. Every AGENCY clone renders this bar; the
Mythic Enterprises PARENT site does not (its header.php never requires
the partial). Emblem asset: assets/img/icon-96x96-white.png — the white
Mythic emblem selected specifically for this compact utility bar. Do NOT
swap for the full wordmark and do NOT recolor.
Contract:
.powered-by-bar — full-width black bar
.powered-by-bar__inner — right-aligned flex row inset to the site's
content width (mirrors .container padding)
.powered-by-bar__link — the anchor wrapping the whole group
.powered-by-bar__emblem — white emblem (small, ~16px tall)
.powered-by-bar__divider — thin vertical rule after emblem
.powered-by-bar__label — text stack, wraps "Powered by" + brand
.powered-by-bar__label-lead — "Powered by" (regular weight)
.powered-by-bar__label-brand — "Mythic Enterprises" (bold)
========================================================================== */
.powered-by-bar {
background: #1a1a1a; /* match .cta-footer's full-width dark background */
color: #fff;
padding: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
line-height: 1;
position: relative;
z-index: 100;
}
.powered-by-bar__inner {
/* Match the site's outer content width and horizontal gutter so the
group aligns to the same right edge as the nav-pill row below. */
max-width: 1360px;
margin: 0 auto;
padding: 6px 40px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.powered-by-bar__link {
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 2px 0;
white-space: nowrap;
transition: opacity .15s ease;
}
.powered-by-bar__link:hover { opacity: 0.85; text-decoration: none; }
.powered-by-bar__emblem {
display: inline-block;
height: 16px;
width: auto;
opacity: 0.95;
}
.powered-by-bar__divider {
display: inline-block;
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.35);
flex: 0 0 auto;
}
.powered-by-bar__label {
display: inline-flex;
align-items: baseline;
gap: 5px;
color: #fff;
font-size: 11px;
letter-spacing: 0.02em;
line-height: 1;
}
.powered-by-bar__label-lead {
font-weight: 400;
opacity: 0.9;
}
.powered-by-bar__label-brand {
font-weight: 700;
}
@media (max-width: 768px) {
.powered-by-bar__inner { padding: 6px 16px; }
}
@media (max-width: 480px) {
.powered-by-bar__inner { padding: 5px 12px; }
.powered-by-bar__emblem { height: 14px; }
.powered-by-bar__label { font-size: 10.5px; gap: 4px; }
.powered-by-bar__link { gap: 8px; }
}
/* =============================================================================
Powered-by-bar layout compensation (2026-09-12 rollback follow-up).
The .nav-pill's original design used `margin: 24px auto 0` (16px on mobile)
to float the pill below the top of the body with breathing room. With the
Powered-by bar now above it, that top margin becomes a visible white gap
between the black bar and the pill. Zero the top margin ONLY when the
powered-by bar precedes the nav-wrap so that agency sites without the bar
(or the Mythic parent site) keep their original floating layout intact.
Selector specificity (0,2,1) beats the media-query .nav-pill rules (0,1,0),
so this handles desktop and the ≤768px mobile override in one rule.
========================================================================== */
.powered-by-bar + .nav-wrap .nav-pill { margin-top: 10px; }
/* ---- LEFT COLUMN ------------------------------------------------------- */
/* Eyebrow + inline turquoise rule */
/* Headline — Playfair Display, sized for the two-column layout */
/* Body copy — Helvetica Neue */
/* Three principles row — clean columns with vertical turquoise dividers.
No cards. No boxes. Text-first grid. */
/* ---- RIGHT COLUMN — portrait editorial image ---------------------------- */
/* ---- TABLET (900-1100px): tighten gap, slightly reduce inner max-width -- */
/* ---- MOBILE: stack one column; order per spec:
eyebrow, headline, body, image, three principles ------------------- */
/* ---- SMALL MOBILE (≤560px): principles reflow to a single column, dividers
rotate to horizontal rules to avoid awkward vertical strips between
stacked rows ---------------------------------------------------- */
/* =============================================================================
COVERAGE INDEX — approved 2026-09-12 replacement for the prior six-card
"Coverage we design for private clients" grid on the Prestige homepage.
Editorial two-column layout: a left introduction and a right six-row index.
No cards, no icons, no photography, no gradients, no shadows on rows.
Scoped strictly to .coverage-index* selectors so no other page or section
can inherit these rules. Local palette:
--ci-bg #eef2f6 (pale editorial blue)
--ci-ink #0f1e2e (dark navy — headline + titles)
--ci-body #47576b (slate blue-gray — body / descriptors)
--ci-teal #2fa39a (Prestige turquoise — eyebrow, numbers, borders)
--ci-teal-soft rgba(47,163,154,0.35) (row divider tint)
--ci-rule rgba(15,30,46,0.10) (thin editorial divider)
--ci-hover rgba(47,163,154,0.05) (quiet row tint on hover)
========================================================================== */
.coverage-index {
--ci-bg: #eef2f6;
--ci-ink: #0f1e2e;
--ci-body: #47576b;
--ci-teal: #2fa39a;
--ci-teal-soft: rgba(47, 163, 154, 0.35);
--ci-rule: rgba(15, 30, 46, 0.10);
--ci-hover: rgba(47, 163, 154, 0.05);
background: var(--ci-bg);
padding: 96px 40px;
position: relative;
}
.coverage-index__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 33fr) minmax(0, 67fr);
column-gap: 88px;
align-items: start;
}
/* ---- LEFT INTRO -------------------------------------------------------- */
.coverage-index__intro {
max-width: 380px;
padding-top: 6px;
position: sticky;
top: 24px;
}
.coverage-index__eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 26px;
color: var(--ci-teal);
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
}
.coverage-index__eyebrow-text { flex: 0 0 auto; }
.coverage-index__eyebrow-rule {
flex: 1 1 auto;
height: 1px;
background: var(--ci-teal);
opacity: 0.55;
max-width: 140px;
}
.coverage-index__headline {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
font-size: 58px;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--ci-ink);
text-align: left;
margin: 0 0 26px;
}
.coverage-index__body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.65;
font-weight: 400;
color: var(--ci-body);
margin: 0 0 32px;
max-width: 360px;
}
/* Restrained secondary CTA: transparent bg, thin turquoise border,
navy text, right arrow. Not a hero pill; lighter and more editorial. */
.coverage-index__cta-row { margin: 0; }
.coverage-index__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 11px 22px;
border: 1px solid var(--ci-teal);
border-radius: 999px;
background: transparent;
color: var(--ci-ink);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.coverage-index__cta:hover {
background: var(--ci-teal);
color: #fff;
border-color: var(--ci-teal);
}
.coverage-index__cta-arrow { display: inline-flex; align-items: center; line-height: 0; }
.coverage-index__cta-arrow svg { display: block; }
/* ---- RIGHT LIST -------------------------------------------------------- */
.coverage-index__list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--ci-rule);
}
.coverage-index__row {
border-bottom: 1px solid var(--ci-rule);
margin: 0;
padding: 0;
}
.coverage-index__row-link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 32px;
padding: 28px 4px;
text-decoration: none;
color: inherit;
transition: background-color .18s ease;
}
.coverage-index__num {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: var(--ci-teal);
line-height: 1;
letter-spacing: 0;
min-width: 40px;
}
.coverage-index__text {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.coverage-index__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 40px;
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.005em;
color: var(--ci-ink);
transition: color .18s ease;
}
.coverage-index__desc {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15.5px;
line-height: 1.5;
color: var(--ci-body);
font-weight: 400;
letter-spacing: 0.005em;
}
.coverage-index__arrow {
color: var(--ci-ink);
display: inline-flex;
align-items: center;
justify-content: flex-end;
line-height: 0;
transition: color .18s ease, transform .18s ease;
}
.coverage-index__arrow svg { display: block; }
/* Sophisticated, quiet hover: subtle turquoise wash + title tint +
6px arrow nudge. No lift, no shadow. */
.coverage-index__row-link:hover {
background-color: var(--ci-hover);
}
.coverage-index__row-link:hover .coverage-index__title {
color: var(--ci-teal);
}
.coverage-index__row-link:hover .coverage-index__arrow {
color: var(--ci-teal);
transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
.coverage-index__row-link,
.coverage-index__arrow,
.coverage-index__title,
.coverage-index__cta { transition: none; }
.coverage-index__row-link:hover .coverage-index__arrow { transform: none; }
}
/* ---- TABLET (900-1100px): tighten column gap, ease headline size ------- */
@media (max-width: 1100px) {
.coverage-index { padding: 80px 32px; }
.coverage-index__inner { column-gap: 56px; }
.coverage-index__headline { font-size: 50px; }
.coverage-index__title { font-size: 34px; }
.coverage-index__row-link { padding: 24px 4px; column-gap: 24px; }
}
/* ---- STACK (≤820px): editorial intro on top, six rows below ------------ */
@media (max-width: 820px) {
.coverage-index { padding: 64px 24px; }
.coverage-index__inner {
grid-template-columns: 1fr;
row-gap: 40px;
}
.coverage-index__intro { position: static; max-width: 100%; }
.coverage-index__headline { font-size: 42px; }
.coverage-index__body { max-width: 100%; }
.coverage-index__num { font-size: 20px; min-width: 34px; }
.coverage-index__title { font-size: 28px; }
.coverage-index__desc { font-size: 15px; }
.coverage-index__row-link { column-gap: 20px; padding: 22px 4px; }
}
/* ---- SMALL MOBILE (≤560px) --------------------------------------------- */
@media (max-width: 560px) {
.coverage-index { padding: 56px 20px; }
.coverage-index__headline { font-size: 36px; line-height: 1.08; }
.coverage-index__title { font-size: 26px; }
.coverage-index__desc { font-size: 14.5px; }
.coverage-index__row-link {
column-gap: 16px;
padding: 20px 0;
grid-template-columns: auto 1fr auto;
}
.coverage-index__num { font-size: 18px; min-width: 28px; }
.coverage-index__arrow svg { width: 18px; height: 18px; }
}
/* ---- SECTION HEADER --------------------------------------------------- */
/* ---- 3 + 2 BENEFIT GRID ---------------------------------------------- */
/* Rows share a common grid renderer with vertical dividers between siblings. */
/* Horizontal rule between top row and bottom row — thin, editorial. */
/* Vertical dividers between siblings inside a row (top: 2 rules, bottom: 1). */
/* Each benefit — pure typography, no card treatment. */
/* ---- TABLET (900-1100): tighten padding + type ------------------------ */
/* ---- 2-COLUMN TABLET (820px): 2 above + 2 below + 1 orphan centered --- */
/* ---- MOBILE (≤640): stack all five vertically, order per spec --------- */
/* =============================================================================
INSIGHTS — approved 2026-09-13 replacement for the prior "From the blog"
homepage section. Typography-driven editorial two-column layout:
LEFT (26%) editorial column: OUR BLOG eyebrow + serif statement + CTA
RIGHT (74%) article index: 2-column grid, up to 6 real articles, no
thumbnails/cards/images, thin rules only.
Data source is the live v_live_blog_posts DB view via $latest_posts; the
grid renders however many rows come back (1..6). If the view is empty,
the .insights__empty message renders instead.
Scoped strictly to .insights* selectors so no other page can inherit.
Local palette:
--in-bg #faf9f5 (warm ivory, distinct from Prestige Approach's
#f6f1e7 and Why Prestige's #faf8f2 — three
ivory sections with subtly different tones)
--in-ink #0f1e2e (dark navy — headline + titles)
--in-body #47576b (slate — supporting copy + descriptors)
--in-teal #2fa39a (Prestige turquoise — eyebrows + accents)
--in-rule rgba(15,30,46,0.10) (thin editorial divider)
========================================================================== */
.insights {
--in-bg: #faf9f5;
--in-ink: #0f1e2e;
--in-body: #47576b;
--in-teal: #2fa39a;
--in-rule: rgba(15, 30, 46, 0.10);
background: var(--in-bg);
padding: 100px 40px;
position: relative;
}
.insights__inner {
max-width: 1280px;
margin: 0 auto;
}
/* ---- TOP INTRO --------------------------------------------------------- */
.insights__header {
text-align: center;
margin: 0 auto 68px;
max-width: 820px;
}
.insights__eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 0 0 22px;
color: var(--in-teal);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.insights__eyebrow-text { flex: 0 0 auto; }
.insights__eyebrow-rule {
display: inline-block;
width: 68px;
height: 1px;
background: var(--in-teal);
opacity: 0.55;
}
.insights__headline {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
font-size: 62px;
line-height: 1.08;
letter-spacing: -0.005em;
color: var(--in-ink);
margin: 0 0 18px;
text-align: center;
}
.insights__intro {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.55;
font-weight: 400;
color: var(--in-body);
margin: 0 auto;
max-width: 640px;
}
/* ---- MAIN BODY: LEFT EDITORIAL + RIGHT ARTICLE INDEX ------------------- */
.insights__body {
display: grid;
grid-template-columns: minmax(0, 26fr) minmax(0, 74fr);
column-gap: 72px;
align-items: start;
}
/* Left editorial column */
.insights__editorial {
padding-top: 4px;
}
.insights__editorial-eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 26px;
color: var(--in-teal);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
line-height: 1;
}
.insights__editorial-eyebrow-text { flex: 0 0 auto; }
.insights__editorial-eyebrow-rule {
flex: 0 0 auto;
width: 44px;
height: 1px;
background: var(--in-teal);
opacity: 0.55;
}
.insights__editorial-headline {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
font-size: 50px;
line-height: 1.08;
letter-spacing: -0.005em;
color: var(--in-ink);
margin: 0 0 22px;
}
.insights__editorial-body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.6;
color: var(--in-body);
font-weight: 400;
margin: 0 0 30px;
max-width: 300px;
}
.insights__editorial-cta-row { margin: 0; }
.insights__editorial-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 11px 22px;
border: 1px solid var(--in-teal);
border-radius: 999px;
background: transparent;
color: var(--in-ink);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.insights__editorial-cta:hover {
background: var(--in-teal);
color: #fff;
border-color: var(--in-teal);
}
.insights__editorial-cta-arrow { display: inline-flex; align-items: center; line-height: 0; }
.insights__editorial-cta-arrow svg { display: block; }
/* Right article index: 2-column typographic grid, no cards */
.insights__articles {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--in-rule);
}
.insights__article {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--in-rule);
}
.insights__article:nth-child(2n) {
border-left: 1px solid var(--in-rule);
}
.insights__article-link {
display: block;
padding: 34px 34px 30px;
text-decoration: none;
color: inherit;
transition: background-color .18s ease;
}
.insights__article-link:hover { background: rgba(47, 163, 154, 0.045); }
.insights__article-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.insights__article-cat {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--in-teal);
line-height: 1;
}
.insights__article-date {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--in-body);
line-height: 1;
text-transform: uppercase;
opacity: 0.85;
}
.insights__article-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 30px;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--in-ink);
margin: 0 0 14px;
transition: color .18s ease;
}
.insights__article-link:hover .insights__article-title { color: var(--in-teal); }
.insights__article-excerpt {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15.5px;
line-height: 1.6;
color: var(--in-body);
margin: 0 0 20px;
font-weight: 400;
max-width: 460px;
}
.insights__article-more {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14.5px;
font-weight: 600;
color: var(--in-ink);
letter-spacing: 0.01em;
line-height: 1;
transition: color .18s ease, transform .18s ease;
}
.insights__article-more-arrow { display: inline-flex; align-items: center; line-height: 0; }
.insights__article-more-arrow svg { display: block; }
.insights__article-link:hover .insights__article-more {
color: var(--in-teal);
transform: translateX(4px);
}
.insights__article-link:focus-visible {
outline: 2px solid var(--in-teal);
outline-offset: -6px;
background: rgba(47, 163, 154, 0.055);
}
/* Empty-state message (when DB returns 0 rows) */
.insights__empty {
padding: 60px 40px;
border-top: 1px solid var(--in-rule);
border-bottom: 1px solid var(--in-rule);
text-align: center;
}
.insights__empty h3 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 28px;
color: var(--in-ink);
margin: 0 0 10px;
}
.insights__empty p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
color: var(--in-body);
margin: 0;
line-height: 1.55;
}
.insights__empty-link {
color: var(--in-teal);
text-decoration: none;
border-bottom: 1px solid rgba(47,163,154,0.5);
}
.insights__empty-link:hover { color: var(--in-ink); border-bottom-color: var(--in-ink); }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.insights__article-link,
.insights__article-more,
.insights__article-title,
.insights__editorial-cta { transition: none; }
.insights__article-link:hover .insights__article-more { transform: none; }
}
/* ---- TABLET (900-1100): tighten ---------------------------------------- */
@media (max-width: 1100px) {
.insights { padding: 80px 32px; }
.insights__header { margin-bottom: 56px; }
.insights__headline { font-size: 52px; }
.insights__body { column-gap: 48px; }
.insights__editorial-headline { font-size: 42px; }
.insights__article-link { padding: 30px 26px 28px; }
.insights__article-title { font-size: 27px; }
}
/* ---- STACK (≤900): left column above the article grid ----------------- */
@media (max-width: 900px) {
.insights__body {
grid-template-columns: 1fr;
row-gap: 44px;
}
.insights__editorial { max-width: 100%; }
.insights__editorial-headline { font-size: 40px; }
.insights__editorial-body { max-width: 100%; }
}
/* ---- MOBILE: 1-column article stack ------------------------------------ */
@media (max-width: 640px) {
.insights { padding: 60px 20px; }
.insights__header { margin-bottom: 40px; }
.insights__eyebrow-rule { width: 42px; }
.insights__headline { font-size: 36px; }
.insights__intro { font-size: 16px; }
.insights__editorial-headline { font-size: 34px; line-height: 1.12; }
.insights__editorial-body { font-size: 16px; }
.insights__editorial-cta { padding: 10px 20px; font-size: 14px; }
.insights__articles {
grid-template-columns: 1fr;
}
.insights__article:nth-child(2n) { border-left: none; }
.insights__article-link { padding: 24px 4px 22px; }
.insights__article-title { font-size: 24px; }
.insights__article-excerpt { font-size: 15px; }
.insights__article-meta { flex-wrap: wrap; gap: 8px; }
.insights__article-date { font-size: 12px; }
.insights__empty { padding: 40px 20px; }
}
/* =============================================================================
FAQ (editorial 2-col Q&A grid — homepage only).
Scope: .faq-editorial (homepage ). This block
does NOT touch the legacy .faq-list/.faq-item/.faq-body accordion styles,
which remain in use on about-us.php and every coverage-*.php page.
Palette is defined locally on --faq-* variables so nothing leaks globally.
All 4 answers are ALWAYS VISIBLE — no accordion, no toggles, no cards.
Design contract:
.faq-editorial — outer section (warm ivory bg)
.faq-editorial__inner — max-width content column
.faq-editorial__header — centered eyebrow + title + intro
.faq-editorial__eyebrow-row — flex row: rule · eyebrow · rule
.faq-editorial__rule — hairline rule flanking the eyebrow
.faq-editorial__eyebrow — small turquoise category-style eyebrow
.faq-editorial__title — Playfair "Questions worth asking."
.faq-editorial__intro — centered supporting paragraph
.faq-editorial__grid — 2-column CSS grid of cells
.faq-editorial__cell — single Q&A cell (category + question + answer)
.faq-editorial__cat — small turquoise category label
.faq-editorial__q — serif question (Playfair 31-38px)
.faq-editorial__a — sans-serif answer (16-17px slate body)
Hairline dividers: vertical rule between the two columns and horizontal
rules between rows. On mobile the vertical rule collapses and rows keep
horizontal separators.
========================================================================== */
.faq-editorial {
--faq-bg: #f4ede1;
--faq-ink: #0f1e2e;
--faq-body: #47576b;
--faq-turquoise: #2fa39a;
--faq-rule: rgba(15, 30, 46, 0.10);
background: var(--faq-bg);
padding: 110px 40px 120px;
}
.faq-editorial__inner {
max-width: 1240px;
margin: 0 auto;
}
.faq-editorial__header {
text-align: center;
max-width: 780px;
margin: 0 auto 72px;
}
.faq-editorial__eyebrow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 22px;
}
.faq-editorial__rule {
display: inline-block;
height: 1px;
width: 56px;
background: var(--faq-turquoise);
opacity: 0.55;
}
.faq-editorial__eyebrow {
display: inline-block;
color: var(--faq-turquoise);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.faq-editorial__title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 60px;
line-height: 1.08;
letter-spacing: -0.005em;
color: var(--faq-ink);
margin: 0 0 22px;
}
.faq-editorial__intro {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.55;
color: var(--faq-body);
margin: 0;
}
.faq-editorial__grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 60px;
row-gap: 56px;
}
.faq-editorial__cell {
padding: 4px 0 0;
position: relative;
}
/* Vertical hairline between the two columns (right edge of every odd cell).
Confined to the cell itself so a last-row odd cell never paints an orphan
tick below the grid; row 2's odd cell paints its own continuation. */
.faq-editorial__cell:nth-child(odd)::after {
content: "";
position: absolute;
top: 4px;
bottom: 0;
right: -30px;
width: 1px;
background: var(--faq-rule);
}
/* Horizontal hairline BELOW every cell except the last row.
Grid has 2 columns; last-row cells are the final one and (if present) the
one before it if they are in the last row. Since we have 4 cells (2 rows),
only the first row gets a bottom rule — target :nth-last-child of 2 or
more from the end. */
.faq-editorial__cell {
padding-bottom: 56px;
border-bottom: 1px solid var(--faq-rule);
}
.faq-editorial__grid > .faq-editorial__cell:nth-last-child(-n+2) {
border-bottom: 0;
padding-bottom: 0;
}
/* Neutralize row-gap doubling next to border-bottom by moving the gap into
the cell's own padding-bottom instead. Reset explicit row-gap. */
.faq-editorial__grid {
row-gap: 0;
}
.faq-editorial__grid > .faq-editorial__cell:nth-last-child(-n+2) {
margin-top: 56px;
}
/* Undo the margin-top for the very first two cells (first row) */
.faq-editorial__grid > .faq-editorial__cell:nth-child(-n+2) {
margin-top: 0;
}
.faq-editorial__cat {
display: inline-block;
color: var(--faq-turquoise);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
margin-bottom: 18px;
}
.faq-editorial__q {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 33px;
line-height: 1.18;
letter-spacing: -0.003em;
color: var(--faq-ink);
margin: 0 0 20px;
}
.faq-editorial__a {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16.5px;
line-height: 1.65;
color: var(--faq-body);
margin: 0;
max-width: 52ch;
}
/* Tablet: soften spacing and shrink the serif question a touch */
@media (max-width: 1100px) {
.faq-editorial { padding: 90px 32px 100px; }
.faq-editorial__header { margin-bottom: 60px; }
.faq-editorial__title { font-size: 50px; }
.faq-editorial__grid { column-gap: 44px; }
.faq-editorial__cell:nth-child(odd)::after { right: -22px; }
.faq-editorial__q { font-size: 30px; }
}
@media (max-width: 820px) {
.faq-editorial__title { font-size: 44px; }
.faq-editorial__q { font-size: 28px; }
}
/* Mobile: single column. Drop the vertical rule; keep horizontal separators
between every cell except the last. All answers stay visible. */
@media (max-width: 640px) {
.faq-editorial { padding: 72px 22px 84px; }
.faq-editorial__header { margin-bottom: 48px; }
.faq-editorial__eyebrow-row { gap: 12px; }
.faq-editorial__rule { width: 40px; }
.faq-editorial__title { font-size: 36px; line-height: 1.12; }
.faq-editorial__intro { font-size: 16px; }
.faq-editorial__intro br { display: none; }
.faq-editorial__grid { grid-template-columns: 1fr; }
.faq-editorial__cell {
padding-bottom: 40px;
margin-top: 40px !important; /* uniform stacking regardless of nth-child */
border-bottom: 1px solid var(--faq-rule);
}
.faq-editorial__grid > .faq-editorial__cell:first-child { margin-top: 0 !important; }
.faq-editorial__grid > .faq-editorial__cell:last-child {
border-bottom: 0;
padding-bottom: 0;
}
/* Kill the odd-cell vertical rule pseudo-element on mobile */
.faq-editorial__cell:nth-child(odd)::after { display: none; }
.faq-editorial__cat { font-size: 10.5px; margin-bottom: 14px; }
.faq-editorial__q { font-size: 25px; margin-bottom: 16px; }
.faq-editorial__a { font-size: 16px; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
.faq-editorial * { transition: none !important; animation: none !important; }
}
/* =============================================================================
CLIENT PERSPECTIVES — homepage testimonial section (fade slideshow).
Scope: .client-perspectives (homepage ).
Deliberately does NOT touch the legacy .tc-carousel / .testimonial-card
rules, which are still used by testimonials.php. Colors/palette are
defined locally on --cp-* variables so nothing leaks globally.
Background: the navy base colour plus a restrained navy gradient. There is
no photograph. 2026-10-08: the inherited background-image carried a second
layer pointing at an assets/img/testimonials/ file that was never copied
into Oxford's tree from the site this stylesheet was ported from, so the
layer had always 404'd and this band has only ever rendered as the gradient
below. The dead layer was removed rather than substituted: the rendering is
unchanged, the failed request is gone, and choosing an Oxford photograph for
this band is a separate decision. To restore one, add the file and append it
as a second background-image layer after var(--cp-overlay), restoring the
paired repeat/position/size values at the same time.
========================================================================== */
.client-perspectives {
--cp-ink: #f4efe4;
--cp-muted: rgba(244,239,228,0.62);
--cp-turquoise: #2fa39a;
--cp-turquoise-soft: rgba(47,163,154,0.55);
--cp-navy: #0b1c2e;
--cp-overlay: linear-gradient(180deg, rgba(11,28,46,0.20) 0%, rgba(11,28,46,0.35) 100%);
position: relative;
background-color: var(--cp-navy);
background-image: var(--cp-overlay);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: var(--cp-ink);
padding: 88px 40px 80px;
overflow: hidden;
isolation: isolate;
}
.client-perspectives__inner {
max-width: 1140px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
}
.client-perspectives__header {
max-width: 820px;
margin: 0 auto 42px;
}
.client-perspectives__eyebrow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 22px;
}
.client-perspectives__rule {
display: inline-block;
height: 1px;
width: 56px;
background: var(--cp-turquoise);
opacity: 0.55;
}
.client-perspectives__eyebrow {
display: inline-block;
color: var(--cp-turquoise);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.client-perspectives__title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 62px;
line-height: 1.05;
letter-spacing: -0.005em;
color: var(--cp-ink);
margin: 0 0 30px;
}
.client-perspectives__ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 2px auto 0;
}
.client-perspectives__ornament-rule {
display: inline-block;
height: 1px;
width: 78px;
background: var(--cp-turquoise-soft);
}
.client-perspectives__ornament-glyph {
display: inline-block;
font-family: 'Playfair Display', Georgia, serif;
color: var(--cp-turquoise);
font-size: 48px;
line-height: 0.6;
transform: translateY(6px);
font-style: normal;
font-weight: 500;
}
/* --- Slide stage: absolute-position stacked slides for crossfade ---------- */
.client-perspectives__stage {
position: relative;
width: 100%;
max-width: 960px;
margin: 44px auto 40px;
min-height: 240px;
display: block;
}
.client-perspectives__slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
opacity: 0;
visibility: hidden;
transition: opacity 420ms ease, visibility 0s linear 420ms;
padding: 0 20px;
}
.client-perspectives__slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity 420ms ease, visibility 0s linear 0s;
position: relative;
}
.client-perspectives__stage .client-perspectives__slide:not(.is-active) {
position: absolute;
}
.client-perspectives__quote {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: 30px;
line-height: 1.5;
color: var(--cp-ink);
max-width: 960px;
margin: 0 auto;
quotes: none;
text-wrap: balance;
}
.client-perspectives__accent {
display: inline-block;
width: 42px;
height: 1px;
background: var(--cp-turquoise);
margin: 30px auto 18px;
opacity: 0.85;
}
.client-perspectives__attribution {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cp-ink);
line-height: 1;
}
/* --- Navigation ---------------------------------------------------------- */
.client-perspectives__nav {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 30px;
margin: 6px auto 0;
}
.client-perspectives__arrow {
background: transparent;
border: 0;
padding: 8px 6px;
color: var(--cp-ink);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: color .15s ease, transform .15s ease;
border-radius: 2px;
}
.client-perspectives__arrow:hover,
.client-perspectives__arrow:focus-visible {
color: var(--cp-turquoise);
outline: none;
}
.client-perspectives__arrow:focus-visible {
box-shadow: 0 0 0 1px var(--cp-turquoise-soft);
}
.client-perspectives__arrow:active { transform: translateY(1px); }
.client-perspectives__counter {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.24em;
color: var(--cp-muted);
display: inline-flex;
align-items: baseline;
gap: 8px;
line-height: 1;
min-width: 68px;
justify-content: center;
}
.client-perspectives__counter-current { color: var(--cp-turquoise); }
.client-perspectives__counter-sep { color: var(--cp-muted); }
.client-perspectives__counter-total { color: var(--cp-muted); }
/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1100px) {
.client-perspectives { padding: 78px 32px 72px; }
.client-perspectives__title { font-size: 52px; }
.client-perspectives__quote { font-size: 26px; }
.client-perspectives__stage { max-width: 780px; margin: 36px auto 34px; }
}
@media (max-width: 820px) {
.client-perspectives__title { font-size: 44px; }
.client-perspectives__quote { font-size: 24px; line-height: 1.5; }
.client-perspectives__ornament-rule { width: 60px; }
.client-perspectives__ornament-glyph { font-size: 42px; }
}
/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
.client-perspectives {
padding: 66px 22px 72px;
}
.client-perspectives__header { margin-bottom: 34px; }
.client-perspectives__eyebrow-row { gap: 12px; }
.client-perspectives__rule { width: 40px; }
.client-perspectives__eyebrow { font-size: 11.5px; }
.client-perspectives__title { font-size: 40px; line-height: 1.1; }
.client-perspectives__ornament { gap: 12px; }
.client-perspectives__ornament-rule { width: 40px; }
.client-perspectives__ornament-glyph { font-size: 36px; transform: translateY(4px); }
.client-perspectives__stage {
max-width: 100%;
margin: 28px auto 30px;
min-height: 300px;
}
.client-perspectives__quote { font-size: 22px; line-height: 1.5; }
.client-perspectives__accent { margin: 26px auto 14px; }
.client-perspectives__attribution { font-size: 12.5px; letter-spacing: 0.24em; }
.client-perspectives__nav { gap: 22px; }
.client-perspectives__arrow { font-size: 20px; }
.client-perspectives__counter { font-size: 12px; min-width: 62px; }
}
/* --- Reduced motion: disable crossfade + autoplay ------------------------ */
@media (prefers-reduced-motion: reduce) {
.client-perspectives__slide,
.client-perspectives__slide.is-active {
transition: none !important;
}
.client-perspectives * {
animation: none !important;
}
}
/* =============================================================================
Partners/carriers marquee — ported verbatim from the working Mythic
Enterprises parent-site implementation (2026-09-13). One continuous
horizontal track duplicated in markup for a seamless loop; edge fades
via mask-image; hover pauses the animation; reduced-motion wraps to a
static centered grid. Scope: .logo-marquee* only, does not touch the
pre-existing .carriers/.carriers-row/.carrier-slot rules (which no
longer render, but stay intact should any coverage page rely on them).
========================================================================== */
.logo-marquee {
margin-top: 32px;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee__track {
display: flex;
align-items: center;
gap: 56px;
width: max-content;
animation: logo-marquee-scroll 60s linear infinite;
will-change: transform;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item {
flex: 0 0 auto;
width: 220px;
height: 120px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-marquee__item img {
max-height: 96px;
max-width: 200px;
width: auto;
height: auto;
object-fit: contain;
filter: none;
opacity: 1;
transition: transform .2s ease;
}
.logo-marquee__item img:hover { transform: scale(1.03); }
@keyframes logo-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 900px) {
.logo-marquee__track { gap: 40px; animation-duration: 48s; }
.logo-marquee__item { width: 170px; height: 96px; }
.logo-marquee__item img { max-height: 76px; max-width: 150px; }
}
@media (max-width: 560px) {
.logo-marquee__track { gap: 28px; animation-duration: 40s; }
.logo-marquee__item { width: 130px; height: 78px; }
.logo-marquee__item img { max-height: 60px; max-width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
/* 2026-09-16 QA fix: the wrap below could never take effect because
.logo-marquee__track also carries width:max-content (see above), which
kept the track at its full unwrapped width (measured 4360px inside a
1280px container) and pushed most logos outside the clipped box. Only
the first 5 of 8 logos were ever visible, with no animation to bring
the rest in. width:auto lets the declared wrap work; the duplicate
aria-hidden copy exists only for the seamless scroll and is hidden
here so the static fallback shows each carrier once, which is the
"static centered grid" this block was written to produce. */
.logo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 8px; }
.logo-marquee__track > .logo-marquee__item[aria-hidden="true"] { display: none; }
.logo-marquee { -webkit-mask-image: none; mask-image: none; }
}
/* =============================================================================
COVERAGE-PAGE PILOT SYSTEM (introduced 2026-09-13 on coverage-private-client
as the pilot; DO NOT propagate to other coverage pages until approved).
Component scope: .cov-*
.cov-hero — cinematic internal hero (restrained; smaller than home)
.cov-fit — warm ivory copy/image editorial split
.cov-overview — white typographic statement + explanatory copy
.cov-what — deep navy list section
.cov-who — pale ivory typography-only section
.cov-faq — visible-answer FAQ (adaptive columns via count attr)
.cov-cta — deep navy final CTA
.cov-btn — internal-page button (reusable across coverage pages)
Uses local CSS custom properties so nothing leaks globally.
========================================================================== */
/* ----------------------------------------------------------------------------
Shared internal-page tokens (defined on :where() so specificity stays 0)
---------------------------------------------------------------------------- */
:where(.cov-hero, .cov-fit, .cov-overview, .cov-what, .cov-who, .cov-types, .cov-faq, .cov-cta, .cov-editorial, .pp-index, .pp-team, .pp-carriers, .pp-form-shell, .pp-simple, .pp-sitemap, .pp-doc, .pp-bio, .pp-pairs, .pp-actions, .pp-list, .pp-legal, .pp-404-index) {
--cov-ink: #0f1e2e;
--cov-body: #47576b;
--cov-turquoise: #2fa39a;
--cov-turquoise-soft: rgba(47,163,154,0.55);
--cov-rule: rgba(15, 30, 46, 0.10);
--cov-navy: #0b1c2e; /* homepage — Client Perspectives navy */
--cov-navy-deep: #0b1c2e; /* unified with homepage navy — no near-duplicate */
--cov-ivory: #f6f1e7; /* homepage — Prestige Approach warm ivory */
--cov-ivory-soft: #faf9f5; /* homepage — Insights warm ivory */
--cov-paleblue: #eef2f6; /* homepage — Coverage Index pale editorial blue */
--cov-white: #ffffff;
--cov-onDark: #f4efe4;
--cov-onDark-muted: rgba(244,239,228,0.68);
--cov-serif: 'Playfair Display', Georgia, serif;
--cov-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* ============================================================================
.cov-hero — internal cinematic hero. Deliberately smaller than the homepage.
============================================================================ */
.cov-hero {
position: relative;
background-color: var(--cov-navy);
background-repeat: no-repeat;
/* FOCAL POINT, 2026-10-08. 'center 30%' is still the default for every
page and is what a page gets when it says nothing. A page that needs a
different one sets it as data, not as CSS: $COVERAGE_PAGE['hero']['focal']
(or $CATEGORY_PAGE['hero']['focal']), which includes/coverage-page.php
emits as the --cov-hero-pos custom property on this element. No per-slug
selectors are added for it. */
background-position: var(--cov-hero-pos, center 30%);
background-size: cover;
color: var(--cov-onDark);
padding: 140px 40px 90px; /* internal hero: -20px vertical trim vs. homepage hero */
isolation: isolate;
overflow: hidden;
}
.cov-hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(8,22,39,0.35) 0%,
rgba(8,22,39,0.55) 55%,
rgba(8,22,39,0.72) 100%);
z-index: 1;
pointer-events: none;
}
.cov-hero__inner {
position: relative;
z-index: 2;
max-width: 1120px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
}
.cov-hero__breadcrumb {
font-family: var(--cov-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cov-onDark);
display: inline-flex;
align-items: center;
gap: 12px;
line-height: 1;
}
.cov-hero__breadcrumb a {
color: var(--cov-onDark-muted);
text-decoration: none;
transition: color .15s ease;
}
.cov-hero__breadcrumb a:hover { color: var(--cov-turquoise); }
.cov-hero__crumb-sep { color: var(--cov-turquoise); font-weight: 400; }
.cov-hero__crumb-current { color: var(--cov-onDark); }
.cov-hero__title {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 54px;
line-height: 1.08;
letter-spacing: -0.005em;
color: var(--cov-onDark);
margin: 4px 0 2px;
max-width: 900px;
}
.cov-hero__lede {
font-family: var(--cov-sans);
font-size: 17px;
font-weight: 400;
line-height: 1.55;
color: var(--cov-onDark-muted);
max-width: 640px;
margin: 0;
/* 2026-09-15 pass 6 — typography guard only. The hero lede is short enough
that a narrow viewport can strand its final word on a line of its own
(observed: /coverage-life at 390px stranding "plan."). `pretty` lets the
engine rebalance the last two lines. Verified: no change to font, size,
weight, measure, line-height, or page height on any coverage page at
1327px or 390px. */
text-wrap: pretty;
}
/* .cov-btn removed 2026-09-13 polish pass — the internal page now reuses the
homepage .pill-btn.blue and .pill-btn.outline-white global button system so the
Private Client CTA styling is byte-identical to every other Prestige CTA. */
/* ============================================================================
.cov-fit — warm ivory copy/image editorial split.
Desktop: LEFT copy ~43%, RIGHT image ~57%.
============================================================================ */
.cov-fit {
background: var(--cov-ivory);
padding: 110px 40px;
}
.cov-fit__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 43fr 57fr;
column-gap: 72px;
align-items: center;
}
.cov-fit__text {
max-width: 480px;
}
.cov-fit__eyebrow-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.cov-fit__rule {
display: inline-block;
height: 1px;
width: 40px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.cov-fit__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.cov-fit__headline {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 46px;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--cov-ink);
margin: 0 0 22px;
}
.cov-fit__body {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.6;
color: var(--cov-body);
margin: 0 0 32px;
}
.cov-fit__cta { margin-top: 4px; }
.cov-fit__figure {
position: relative;
margin: 0;
display: block;
}
.cov-fit__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 6px;
}
.cov-fit__accent {
position: absolute;
left: -14px;
top: 24px;
bottom: 24px;
width: 2px;
background: var(--cov-turquoise);
opacity: 0.7;
border-radius: 2px;
}
/* ============================================================================
.cov-overview — white typographic statement + explanatory copy.
Desktop asymmetric: statement 6-of-12, body 5-of-12 with a 1-col gutter.
============================================================================ */
.cov-overview {
background: var(--cov-white);
padding: 120px 40px;
}
.cov-overview__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 6fr 1fr 5fr;
align-items: start;
gap: 0;
}
.cov-overview__left { grid-column: 1 / 2; }
.cov-overview__right { grid-column: 3 / 4; padding-top: 12px; }
.cov-overview__eyebrow-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 26px;
}
.cov-overview__rule {
display: inline-block;
height: 1px;
width: 40px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.cov-overview__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.cov-overview__statement {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 44px;
line-height: 1.12;
letter-spacing: -0.005em;
color: var(--cov-ink);
margin: 0;
max-width: 560px;
text-wrap: balance;
}
.cov-overview__body {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.65;
color: var(--cov-body);
margin: 0;
}
/* ============================================================================
.cov-what — deep navy editorial list. LEFT ~36% aside, RIGHT ~64% list.
============================================================================ */
.cov-what {
background: var(--cov-navy-deep);
color: var(--cov-onDark);
padding: 118px 40px;
}
.cov-what__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 36fr 64fr;
column-gap: 80px;
align-items: start;
}
.cov-what__left { padding-right: 20px; }
.cov-what__eyebrow-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.cov-what__rule {
display: inline-block;
height: 1px;
width: 40px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.cov-what__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.cov-what__headline {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--cov-onDark);
margin: 0 0 18px;
}
.cov-what__sub {
font-family: var(--cov-sans);
font-size: 16px;
line-height: 1.6;
color: var(--cov-onDark-muted);
margin: 0;
max-width: 380px;
}
.cov-what__list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: none;
}
.cov-what__item {
display: grid;
grid-template-columns: 18px 1fr;
align-items: baseline;
column-gap: 20px;
padding: 24px 0 26px;
border-top: 1px solid rgba(244,239,228,0.16);
}
.cov-what__item:first-child { border-top: 0; padding-top: 4px; }
.cov-what__marker {
width: 8px;
height: 8px;
background: var(--cov-turquoise);
border-radius: 999px;
display: block;
align-self: center;
justify-self: start;
margin-top: 2px;
}
.cov-what__text {
font-family: var(--cov-sans);
font-size: 18px;
line-height: 1.55;
color: var(--cov-onDark);
text-wrap: pretty;
}
/* ============================================================================
.cov-who — pale ivory typography-only section, aside + body asymmetric.
============================================================================ */
.cov-who {
background: var(--cov-ivory-soft);
padding: 118px 40px;
}
.cov-who__inner {
max-width: 1160px;
margin: 0 auto;
display: grid;
grid-template-columns: 40fr 60fr;
column-gap: 90px;
align-items: start;
}
.cov-who__aside {
position: relative;
padding-top: 8px;
}
.cov-who__eyebrow-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.cov-who__rule {
display: inline-block;
height: 1px;
width: 40px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.cov-who__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.cov-who__headline {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 52px;
line-height: 1.05;
letter-spacing: -0.005em;
color: var(--cov-ink);
margin: 0;
}
.cov-who__body {
padding-top: 12px;
border-left: 1px solid var(--cov-rule);
padding-left: 40px;
}
.cov-who__lede {
font-family: var(--cov-serif);
font-style: italic;
font-weight: 400;
font-size: 24px;
line-height: 1.45;
color: var(--cov-ink);
margin: 0 0 22px;
text-wrap: balance;
}
.cov-who__body-copy {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.65;
color: var(--cov-body);
margin: 0;
}
/* ============================================================================
.pp-pairs — 2×2 editorial pair grid nested inside .cov-who__body.
Used on About Us "What you can expect from us" and future pages that need
a titled-pair block inside a soft-ivory Who-it-fits section. Inherits
.cov-who__body's border/padding, so this rule only defines the grid + type.
============================================================================ */
.pp-pairs { }
.pp-pairs__grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 44px;
row-gap: 40px;
}
.pp-pairs__item { }
.pp-pairs__title {
font-family: var(--cov-serif);
font-weight: 600;
font-size: 22px;
line-height: 1.25;
color: var(--cov-ink);
margin: 0 0 10px;
letter-spacing: -0.005em;
}
.pp-pairs__body {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.65;
color: var(--cov-body);
margin: 0;
}
.pp-actions {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.pp-list {
margin: 0 0 22px 20px;
padding: 0;
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.9;
color: var(--cov-body);
}
.pp-list li { margin: 0; }
.pp-legal {
margin: 22px 0 0;
font-family: var(--cov-sans);
font-size: 13.5px;
line-height: 1.55;
color: var(--cov-body);
opacity: 0.85;
}
/* ============================================================================
.pp-simple — soft-ivory centered composition for 404 and thank-you
pages. Eyebrow + Playfair title + lede + pill-btn row.
============================================================================ */
.pp-simple {
background: var(--cov-ivory-soft);
padding: 96px 40px 110px;
text-align: center;
}
.pp-simple__inner {
max-width: 720px;
margin: 0 auto;
}
.pp-simple__eyebrow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 18px;
}
.pp-simple__rule {
display: inline-block;
height: 1px;
width: 56px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.pp-simple__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.pp-simple__title {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 42px;
line-height: 1.15;
color: var(--cov-ink);
margin: 0 0 16px;
text-wrap: balance;
letter-spacing: -0.005em;
}
.pp-simple__lede {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.6;
color: var(--cov-body);
margin: 0 auto 28px;
max-width: 560px;
}
.pp-simple__buttons {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 0 auto;
}
.pp-simple__foot {
margin-top: 30px;
font-family: var(--cov-sans);
font-size: 13.5px;
color: var(--cov-body);
opacity: 0.75;
}
/* .pp-404-index — flat inline anchor row for 404's "Explore our coverage". */
.pp-404-index {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 24px;
margin-top: 8px;
}
.pp-404-index__item {
font-family: var(--cov-sans);
font-size: 15px;
color: var(--cov-onDark);
text-decoration: none;
border-bottom: 1px solid rgba(47, 163, 154, 0.55);
padding-bottom: 2px;
transition: border-color 0.2s ease;
}
.pp-404-index__item:hover {
border-bottom-color: var(--cov-turquoise);
}
/* ============================================================================
.pp-sitemap — soft-ivory 6-column link index for /sitemap.
============================================================================ */
.pp-sitemap {
background: var(--cov-ivory-soft);
padding: 90px 40px 110px;
}
.pp-sitemap__inner {
max-width: 1240px;
margin: 0 auto;
}
.pp-sitemap__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 44px 40px;
margin-top: 10px;
}
.pp-sitemap__col-title {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 20px;
color: var(--cov-ink);
margin: 0 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--cov-turquoise);
letter-spacing: -0.005em;
}
.pp-sitemap ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 2;
font-family: var(--cov-sans);
font-size: 15.5px;
}
.pp-sitemap ul a { color: var(--cov-ink); text-decoration: none; }
.pp-sitemap ul a:hover { color: var(--cov-turquoise); }
/* ============================================================================
.pp-doc — soft-ivory single-column reading gutter for /privacy-policy
and /terms-conditions. Preserves the existing .article-body typography.
============================================================================ */
.pp-doc {
background: var(--cov-ivory-soft);
padding: 90px 40px 110px;
}
.pp-doc__inner {
max-width: 820px;
margin: 0 auto;
}
.pp-doc__body {
background: transparent;
}
/* ============================================================================
.pp-bio — bio-body typography inside a .cov-fit__text on staff-detail
pages. Uses the same slate body treatment as .cov-fit__body/.pp-pairs.
============================================================================ */
.pp-bio__paragraph {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.75;
color: var(--cov-body);
margin: 0 0 18px;
/* 2026-09-15 pass 6 — typography guard only. In the two-column
.cov-fit layout the bio column settles at a 480px measure on desktop,
which stranded the last word of Rosie Pallares' first paragraph
("run.") at >=1024px, and Jeremy Keller's second paragraph
("family.") at 390px. Verified: no change to font, size, weight,
measure, line-height, or page height on any staff page at
1327 / 768 / 390px. */
text-wrap: pretty;
}
.pp-bio__paragraph:last-of-type { margin-bottom: 8px; }
.pp-bio__back {
margin: 24px 0 0;
font-family: var(--cov-sans);
font-size: 14.5px;
color: var(--cov-body);
}
.pp-bio__back-link {
color: var(--cov-turquoise);
text-decoration: none;
border-bottom: 1px solid rgba(47, 163, 154, 0.55);
padding-bottom: 2px;
transition: border-color 0.2s ease;
}
.pp-bio__back-link:hover {
border-bottom-color: var(--cov-turquoise);
}
/* ============================================================================
.pp-form-shell — editorial container for pages whose primary body is a
form include (contact-us, get-a-quote). Provides the cov-* soft-ivory
background, section padding, and inner max-width without touching the
form markup itself. --narrow shrinks the inner to single-form width.
============================================================================ */
.pp-form-shell {
background: var(--cov-ivory-soft);
padding: 96px 40px 110px;
}
.pp-form-shell__inner {
max-width: 1240px;
margin: 0 auto;
}
.pp-form-shell--narrow .pp-form-shell__inner {
max-width: 820px;
}
/* ============================================================================
.cov-cta__reach — labeled contact rows inside a .cov-cta section.
Used by Locations page "Reach us directly". Two-column: left label,
right value; centered within the cov-cta__inner max-width.
============================================================================ */
.cov-cta__reach {
list-style: none;
padding: 0;
margin: 0 auto 34px;
max-width: 560px;
text-align: left;
border-top: 1px solid rgba(244,239,228,0.14);
}
.cov-cta__reach-row {
display: grid;
grid-template-columns: 130px 1fr;
column-gap: 24px;
align-items: baseline;
padding: 16px 0;
border-bottom: 1px solid rgba(244,239,228,0.14);
}
.cov-cta__reach-lbl {
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cov-turquoise);
}
.cov-cta__reach-val {
font-family: var(--cov-sans);
font-size: 16px;
line-height: 1.55;
color: var(--cov-onDark);
}
.cov-cta__reach-val a {
color: var(--cov-onDark);
text-decoration: none;
border-bottom: 1px solid rgba(47,163,154,0.55);
transition: border-color 0.2s ease;
}
.cov-cta__reach-val a:hover {
border-bottom-color: var(--cov-turquoise);
}
/* ============================================================================
.cov-faq — visible-answer FAQ. Adaptive: 3 cells → 3 cols on wide desktop;
otherwise 2 cols; mobile 1 col. Nothing here is hidden.
============================================================================ */
.cov-faq {
background: var(--cov-paleblue);
padding: 118px 40px 130px;
}
.cov-faq__inner {
max-width: 1240px;
margin: 0 auto;
}
.cov-faq__header {
text-align: center;
max-width: 720px;
margin: 0 auto 72px;
}
.cov-faq__eyebrow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 22px;
}
.cov-faq__rule {
display: inline-block;
height: 1px;
width: 56px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.cov-faq__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.cov-faq__title {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 48px;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--cov-ink);
margin: 0;
}
.cov-faq__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 52px;
row-gap: 40px;
}
/* Adaptive: 1-item → single column; 2-item → two columns; 3+ → three columns */
.cov-faq__grid[data-cov-faq-count="1"] { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; }
.cov-faq__grid[data-cov-faq-count="2"] { grid-template-columns: repeat(2, 1fr); }
.cov-faq__grid[data-cov-faq-count="4"] { grid-template-columns: repeat(2, 1fr); }
/* 5-item, ADDED 2026-10-24. Five questions had no rule of their own, so they
fell to the default three columns and left a VISIBLY EMPTY third slot on the
second row. Measured on /general-liability-insurance and
/business-auto-insurance at 1440px before this rule: cols=3, rows=2,
last row 2 cells, 1 empty slot.
Fixed on a six-track grid so the rows divide evenly instead: three cells of
two tracks on the first row, two cells of three tracks on the second. Same
component, same gaps, same cell styling - only the column arithmetic
changes, and nothing above 720px is affected for any other count.
16 of the 52 coverage pages carry five questions, so this is the most common
FAQ layout on the site. */
.cov-faq__grid[data-cov-faq-count="5"] { grid-template-columns: repeat(6, 1fr); }
.cov-faq__grid[data-cov-faq-count="5"] > .cov-faq__cell { grid-column: span 2; }
.cov-faq__grid[data-cov-faq-count="5"] > .cov-faq__cell:nth-child(4),
.cov-faq__grid[data-cov-faq-count="5"] > .cov-faq__cell:nth-child(5) { grid-column: span 3; }
.cov-faq__cell {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 30px 0 0;
border-top: 1px solid var(--cov-rule);
}
.cov-faq__q {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 24px;
line-height: 1.22;
letter-spacing: -0.003em;
color: var(--cov-ink);
margin: 0 0 16px;
}
.cov-faq__a {
font-family: var(--cov-sans);
font-size: 16px;
line-height: 1.65;
color: var(--cov-body);
margin: 0;
max-width: 52ch;
}
/* ============================================================================
.pp-team — soft-ivory wrapper around the legacy .team-grid on /staff.
Provides the cov-* section chrome (header, eyebrow, background,
inner max-width). The .team-grid / .team-card markup inside is
preserved intact so DB-driven and initial-fallback rendering still
works exactly as before.
============================================================================ */
.pp-team {
background: var(--cov-ivory-soft);
padding: 96px 40px 110px;
}
.pp-team__inner {
max-width: 1240px;
margin: 0 auto;
}
.pp-team__header {
text-align: center;
margin-bottom: 48px;
}
.pp-team__eyebrow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 14px;
}
.pp-team__rule {
display: inline-block;
height: 1px;
width: 56px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.pp-team__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.pp-team__title {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 42px;
line-height: 1.12;
letter-spacing: -0.005em;
color: var(--cov-ink);
margin: 0 0 14px;
text-wrap: balance;
}
.pp-team__lede {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.6;
color: var(--cov-body);
margin: 0 auto;
max-width: 620px;
}
/* ============================================================================
.pp-carriers — 8-card logo grid for /carriers. Logo tile at top,
name (Playfair), one-line blurb, and Pay Now cue at bottom. Same
editorial card language as .pp-index but with a fixed logo slot.
============================================================================ */
.pp-carriers {
background: var(--cov-ivory-soft);
padding: 100px 40px;
}
.pp-carriers__inner {
max-width: 1240px;
margin: 0 auto;
}
.pp-carriers__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.pp-carriers__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--cov-rule);
border-radius: 4px;
padding: 30px 24px 26px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pp-carriers__card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 30, 46, 0.06);
border-color: rgba(47, 163, 154, 0.4);
}
.pp-carriers__logo {
height: 96px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.pp-carriers__logo img {
max-height: 76px;
max-width: 200px;
object-fit: contain;
}
.pp-carriers__name {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 22px;
line-height: 1.2;
color: var(--cov-ink);
margin: 0 0 10px;
}
.pp-carriers__blurb {
font-family: var(--cov-sans);
font-size: 14.5px;
line-height: 1.55;
color: var(--cov-body);
margin: 0 0 18px;
flex: 1;
}
.pp-carriers__pay {
display: inline-block;
font-family: var(--cov-sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cov-ink);
padding: 10px 20px;
border: 1.5px solid var(--cov-ink);
border-radius: 999px;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.pp-carriers__pay:hover {
background: var(--cov-ink);
color: var(--cov-onDark);
}
/* ============================================================================
.pp-index — grouped product/link index used on /products.
Header (eyebrow + Playfair title), then an anchor-based responsive grid.
The three modifiers (--ivory, --ivory-soft, --paleblue) rotate the
background across product groups so the three sections read as
distinct chapters. Cards are full-height anchors so the entire card
is clickable, with a subtle hover raise and turquoise underline
on the "Read more" cue.
============================================================================ */
.pp-index {
padding: 100px 40px;
}
.pp-index--ivory { background: var(--cov-ivory); }
.pp-index--ivory-soft { background: var(--cov-ivory-soft); }
.pp-index--paleblue { background: var(--cov-paleblue); }
.pp-index__inner {
max-width: 1240px;
margin: 0 auto;
}
.pp-index__header {
text-align: center;
margin-bottom: 56px;
}
.pp-index__eyebrow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 14px;
}
.pp-index__rule {
display: inline-block;
height: 1px;
width: 56px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.pp-index__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.pp-index__title {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 42px;
line-height: 1.12;
letter-spacing: -0.005em;
color: var(--cov-ink);
margin: 0;
text-wrap: balance;
}
.pp-index__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.pp-index__grid[data-count="2"] {
grid-template-columns: repeat(2, minmax(0, 480px));
justify-content: center;
}
.pp-index__card {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--cov-rule);
border-radius: 4px;
padding: 30px 28px 26px;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pp-index__card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 30, 46, 0.06);
border-color: rgba(47, 163, 154, 0.4);
}
.pp-index__card-title {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 26px;
line-height: 1.2;
color: var(--cov-ink);
margin: 0 0 12px;
letter-spacing: -0.005em;
}
.pp-index__card-body {
font-family: var(--cov-sans);
font-size: 15.5px;
line-height: 1.6;
color: var(--cov-body);
margin: 0 0 18px;
flex: 1;
}
.pp-index__card-more {
font-family: var(--cov-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.08em;
color: var(--cov-turquoise);
text-transform: uppercase;
}
/* ============================================================================
.cov-editorial — site-language wrapper around the .editorial-index
article list on /blog. Provides the soft-ivory reading gutter and
inner max-width that every other public page uses, so the article
list sits inside the same design system without altering the row
rendering (kept in .editorial-index__*).
============================================================================ */
.cov-editorial {
background: var(--cov-ivory-soft);
padding: 96px 40px 118px;
}
.cov-editorial__inner {
max-width: 900px;
margin: 0 auto;
}
.cov-editorial .editorial-index {
padding: 0;
}
.cov-editorial .editorial-index__row:first-of-type {
border-top: 1px solid var(--cov-rule);
}
.cov-editorial .editorial-index__row {
border-color: var(--cov-rule);
}
.cov-editorial .editorial-index__title {
font-family: var(--cov-serif);
}
.cov-editorial .editorial-index__empty {
padding: 60px 0;
text-align: center;
color: var(--cov-body);
}
.cov-editorial .editorial-index__empty h3 {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 32px;
color: var(--cov-ink);
margin: 0 0 12px;
}
/* ============================================================================
.cov-cta — deep navy final CTA. Centered composition.
============================================================================ */
.cov-cta {
background: var(--cov-navy-deep);
color: var(--cov-onDark);
padding: 118px 40px;
text-align: center;
}
.cov-cta__inner {
max-width: 820px;
margin: 0 auto;
}
.cov-cta__eyebrow-row {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 22px;
}
.cov-cta__rule {
display: inline-block;
height: 1px;
width: 56px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.cov-cta__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.cov-cta__title {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 44px;
line-height: 1.12;
letter-spacing: -0.005em;
color: var(--cov-onDark);
margin: 0 0 18px;
text-wrap: balance;
}
.cov-cta__sub {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.6;
color: var(--cov-onDark-muted);
margin: 0 0 34px;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.cov-cta__buttons {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
/* ============================================================================
RESPONSIVE — tablet & mobile
============================================================================ */
@media (max-width: 1100px) {
.cov-hero { padding: 118px 32px 92px; }
.cov-hero__title { font-size: 46px; }
.cov-fit { padding: 90px 32px; }
.cov-fit__inner { column-gap: 48px; }
.cov-fit__headline { font-size: 40px; }
.cov-overview { padding: 100px 32px; }
.cov-overview__statement { font-size: 38px; }
.cov-what { padding: 100px 32px; }
.cov-what__inner { column-gap: 56px; }
.cov-what__headline { font-size: 38px; }
.cov-what__text { font-size: 17px; }
.cov-who { padding: 100px 32px; }
.cov-who__inner { column-gap: 60px; }
.cov-who__headline { font-size: 44px; }
.cov-who__body { padding-left: 30px; }
.cov-faq { padding: 100px 32px 112px; }
.cov-faq__title { font-size: 42px; }
.cov-faq__grid { column-gap: 40px; row-gap: 36px; }
.pp-simple { padding: 70px 22px 84px; }
.pp-simple__title { font-size: 32px; }
.pp-simple__lede { font-size: 15.5px; }
.pp-sitemap { padding: 70px 22px 84px; }
.pp-sitemap__grid { gap: 32px; }
.pp-doc { padding: 70px 22px 84px; }
.pp-form-shell { padding: 72px 22px 90px; }
.pp-team { padding: 76px 26px 88px; }
.pp-team__title { font-size: 34px; }
.pp-team__header { margin-bottom: 36px; }
.pp-carriers { padding: 76px 22px; }
.pp-carriers__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pp-carriers__card { padding: 24px 20px 22px; }
.pp-index { padding: 80px 26px; }
.pp-index__title { font-size: 34px; }
.pp-index__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.pp-index__grid[data-count="2"] {
grid-template-columns: 1fr;
}
.pp-index__header { margin-bottom: 40px; }
.pp-index__card { padding: 24px 22px 22px; }
.pp-index__card-title { font-size: 22px; }
.cov-editorial { padding: 80px 26px 96px; }
.cov-cta { padding: 100px 32px; }
.cov-cta__title { font-size: 38px; }
}
@media (max-width: 900px) {
.cov-hero { padding: 96px 26px 76px; }
.cov-hero__title { font-size: 40px; }
.cov-hero__lede { font-size: 16px; }
.cov-fit__inner {
grid-template-columns: 1fr;
row-gap: 44px;
}
.cov-fit__text { order: 1; max-width: 100%; }
.cov-fit__figure { order: 2; }
.cov-fit__headline { font-size: 34px; }
.cov-fit__accent { display: none; }
.cov-overview__inner {
grid-template-columns: 1fr;
row-gap: 32px;
}
.cov-overview__left, .cov-overview__right { grid-column: auto; padding-top: 0; }
.cov-overview__statement { font-size: 32px; max-width: 100%; }
.cov-what__inner {
grid-template-columns: 1fr;
row-gap: 40px;
}
.cov-what__left { padding-right: 0; }
.cov-what__headline { font-size: 34px; }
.cov-who__inner {
grid-template-columns: 1fr;
row-gap: 28px;
}
.cov-who__body {
border-left: 0;
border-top: 1px solid var(--cov-rule);
padding-left: 0;
padding-top: 28px;
}
.cov-who__headline { font-size: 40px; }
.cov-who__lede { font-size: 22px; }
.pp-pairs__grid {
grid-template-columns: 1fr;
row-gap: 28px;
}
.pp-pairs__title { font-size: 20px; }
.pp-actions { margin-top: 32px; }
.cov-cta__reach-row {
grid-template-columns: 100px 1fr;
column-gap: 18px;
}
.cov-cta__reach-lbl { font-size: 11px; }
.cov-cta__reach-val { font-size: 15px; }
/* count="5" ADDED 2026-10-24 alongside the existing 2 and 4. The bare
.cov-faq__grid selector here is (0,1,0) and the five-item rule above is
(0,2,0), so without naming it explicitly the six-track desktop grid
would survive this breakpoint and render five questions six columns wide
on a phone. The span resets on the next line are needed for the same
reason. Verified by measurement at 390px after the change. */
.cov-faq__grid,
.cov-faq__grid[data-cov-faq-count="2"],
.cov-faq__grid[data-cov-faq-count="4"],
.cov-faq__grid[data-cov-faq-count="5"] {
grid-template-columns: 1fr;
row-gap: 0;
}
/* The span resets must repeat the nth-child selectors, not just the bare
cell selector. `…[count="5"] > .cov-faq__cell:nth-child(4)` is (0,2,2)
and a bare `…[count="5"] > .cov-faq__cell` reset is only (0,2,1), so the
bare form loses and cells 4 and 5 keep `span 3`. With one explicit
column that forces grid to invent implicit tracks, which is what pushed
7 pages 4-28px wide at 390px before this was corrected. */
.cov-faq__grid[data-cov-faq-count="5"] > .cov-faq__cell,
.cov-faq__grid[data-cov-faq-count="5"] > .cov-faq__cell:nth-child(4),
.cov-faq__grid[data-cov-faq-count="5"] > .cov-faq__cell:nth-child(5) {
grid-column: auto;
}
.cov-faq__cell { padding-top: 28px; padding-bottom: 4px; }
.cov-faq__title { font-size: 36px; }
.cov-cta__title { font-size: 32px; }
}
@media (max-width: 560px) {
/* Mobile focal point resolves in this order: an explicit mobile override
(hero['focal_sm']), else the page's desktop focal point, else the
long-standing center 40%. A page that sets neither is unchanged. */
.cov-hero { padding: 82px 20px 66px;
background-position: var(--cov-hero-pos-sm, var(--cov-hero-pos, center 40%)); }
.cov-hero__breadcrumb { font-size: 10.5px; gap: 10px; }
.cov-hero__title { font-size: 32px; line-height: 1.12; }
.cov-hero__title br { display: none; }
.cov-hero__lede { font-size: 15.5px; }
.cov-fit { padding: 68px 20px; }
.cov-fit__eyebrow-row { gap: 10px; }
.cov-fit__rule { width: 30px; }
.cov-fit__headline { font-size: 30px; }
.cov-fit__body { font-size: 16px; }
.cov-fit__image { aspect-ratio: 5 / 4; }
.cov-overview { padding: 66px 20px; }
.cov-overview__statement { font-size: 26px; }
.cov-overview__body { font-size: 16px; }
.cov-what { padding: 72px 20px; }
.cov-what__headline { font-size: 30px; }
.cov-what__text { font-size: 16px; }
.cov-what__item { padding: 20px 0 22px; column-gap: 16px; grid-template-columns: 14px 1fr; }
.cov-what__marker { width: 7px; height: 7px; }
.cov-who { padding: 72px 20px; }
.cov-who__headline { font-size: 34px; }
.cov-who__lede { font-size: 20px; }
.cov-who__body-copy { font-size: 16px; }
.cov-faq { padding: 72px 20px 84px; }
.cov-faq__header { margin-bottom: 42px; }
.cov-faq__title { font-size: 30px; }
.cov-faq__q { font-size: 22px; }
.cov-faq__a { font-size: 15.5px; }
.cov-cta { padding: 72px 20px; }
.cov-cta__title { font-size: 28px; }
.cov-cta__sub { font-size: 15.5px; }
.cov-btn { font-size: 12px; padding: 14px 22px; letter-spacing: 0.16em; }
}
/* ============================================================================
Reduced motion — no non-opacity motion in these components, but disable
any button transforms and transitions for defence in depth.
============================================================================ */
@media (prefers-reduced-motion: reduce) {
.cov-btn,
.cov-btn:active,
.cov-hero__breadcrumb a {
transition: none !important;
transform: none !important;
}
}
/* =============================================================================
Header-over-hero — Private Client pilot (2026-09-13).
The redesigned .cov-hero originally sat BELOW the floating white .nav-pill
in normal flow, so the pill floated on a white body area rather than on
the hero image. This mirrors the approved homepage .hero pattern by
pulling .cov-hero up under .nav-wrap with a negative top margin, and
compensating with an identical amount of extra top padding so the H1
stays in exactly the same on-screen position as before. Nothing else
about the hero — image, overlay, height, typography, breadcrumb, H1,
lede, z-index of the nav — changes. The .powered-by-bar → .nav-pill
~10 px gap now reveals the hero image behind, matching the homepage.
Values mirror .hero's own values: -110px desktop, -70px at tablet, and
zero on mobile (where the pill snaps flush against the powered-by bar
at the pre-existing site-wide 720 px breakpoint). Scope: .cov-hero only.
========================================================================== */
.cov-hero { margin-top: -110px; padding-top: 210px; } /* -40px visible top trim */
@media (max-width: 900px) {
.cov-hero { margin-top: -70px; padding-top: 140px; } /* tablet: matching -26px trim */
}
@media (max-width: 720px) {
.cov-hero { margin-top: 0; padding-top: 82px; }
}
/* =============================================================================
.cov-momentum — Prestige internal-page section that surrounds the Pattern-A
Momentum form. LEFT: editorial intro (eyebrow + Playfair H2 + body copy +
phone link). RIGHT: form (rendered by includes/forms/render.php inside its
own scoped #qf- stylesheet — nothing about the form's inner CSS is
duplicated here). Uses the approved Prestige palette via existing --cov-*
tokens on parent .cov-* sections; safe defaults are inlined so this block
also stands on its own if placed on a page that doesn't declare tokens.
========================================================================== */
.cov-momentum {
--cov-ink: #0f1e2e;
--cov-body: #47576b;
--cov-turquoise: #2fa39a;
--cov-navy: #0b1c2e;
--cov-rule: rgba(15, 30, 46, 0.10);
--cov-ivory-soft: #faf9f5;
--cov-serif: 'Playfair Display', Georgia, serif;
--cov-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: var(--cov-ivory-soft);
padding: 108px 40px 118px;
}
.cov-momentum__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 38fr 62fr;
column-gap: 80px;
align-items: start;
}
/* -- LEFT editorial column ----------------------------------------------- */
.cov-momentum__intro {
max-width: 460px;
padding-top: 8px;
}
.cov-momentum__eyebrow-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.cov-momentum__rule {
display: inline-block;
height: 1px;
width: 40px;
background: var(--cov-turquoise);
opacity: 0.55;
}
.cov-momentum__eyebrow {
color: var(--cov-turquoise);
font-family: var(--cov-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.cov-momentum__headline {
font-family: var(--cov-serif);
font-weight: 500;
font-size: 52px; /* short headline "Get a quote." — smaller than the prior long headline */
line-height: 1.05;
letter-spacing: -0.008em;
color: var(--cov-ink);
margin: 0 0 22px;
text-wrap: balance;
}
.cov-momentum__body {
font-family: var(--cov-sans);
font-size: 18px;
line-height: 1.6;
color: var(--cov-body);
margin: 0;
max-width: 40ch; /* keep the sentence from stretching toward the form */
}
/* -- RIGHT form column --------------------------------------------------- */
.cov-momentum__form {
/* The form widget owns its own max-width via render.php's scoped CSS.
Nothing here influences step logic, fields, or the form's visual
system — just the outer column position. */
min-width: 0; /* let the grid item shrink cleanly if the form is wider */
align-self: stretch;
}
/* -- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
.cov-momentum { padding: 88px 32px 100px; }
.cov-momentum__inner { column-gap: 52px; }
.cov-momentum__headline { font-size: 46px; }
}
@media (max-width: 900px) {
.cov-momentum { padding: 78px 26px 88px; }
.cov-momentum__inner {
grid-template-columns: 1fr;
row-gap: 36px;
}
/* Left column is intentionally short — top-align it against the form
(grid default is 'start'), keep max-width relaxed but not full-bleed. */
.cov-momentum__intro { max-width: 100%; }
.cov-momentum__headline { font-size: 42px; }
.cov-momentum__body { max-width: 60ch; font-size: 17.5px; }
}
@media (max-width: 560px) {
.cov-momentum { padding: 64px 20px 76px; }
.cov-momentum__eyebrow-row { gap: 10px; }
.cov-momentum__rule { width: 30px; }
.cov-momentum__headline { font-size: 36px; }
.cov-momentum__body { font-size: 16.5px; max-width: 100%; }
}
/* =============================================================================
Coverage-page shell — additional CSS variants (introduced 2026-09-14 for
Phase-1 site-wide propagation; single-column variant refined 2026-09-14
after Chrome QA vs. the approved Private Client page).
Design intent for .cov-overview--single: keep the SAME left-aligned
editorial rhythm the page's other .cov-* sections establish, so a page
without a promoted statement doesn't suddenly drop into a "generic
centered blog paragraph" feel. The eyebrow sits at the LEFT column
position (matching .cov-fit__text and .cov-what__left), followed by
a left-aligned body block constrained to an editorial text measure.
The .cov-overview base rules stay unchanged; these variants are additive.
========================================================================== */
.cov-overview.cov-overview--single .cov-overview__inner {
grid-template-columns: 6fr 1fr 5fr;
/* Same 6/1/5 grid the statement variant uses, so the body sits at
the SAME left-column x-coordinate as .cov-fit__text on the
section above and .cov-what__left on the section below. The
right column is intentionally left empty on single-variant pages,
which keeps the section's left-anchored editorial rhythm without
promoting a statement that the source page doesn't actually have. */
}
.cov-overview.cov-overview--single .cov-overview__right {
grid-column: 1 / 2; /* pull the body into the LEFT column */
padding-top: 0;
text-align: left;
}
.cov-overview.cov-overview--single .cov-overview__body {
text-align: left;
max-width: 62ch;
margin: 0;
font-size: 18px;
line-height: 1.65;
}
.cov-overview.cov-overview--single .cov-overview__body + .cov-overview__body {
margin-top: 18px;
}
.cov-overview__eyebrow-row--body {
/* Left-aligned by default (matches all other .cov-* eyebrows on the
page). The base .cov-overview__eyebrow-row already flexes to the
left; nothing to override here — kept as a named modifier for
future explicit alignment overrides. */
}
@media (max-width: 900px) {
.cov-overview.cov-overview--single .cov-overview__inner {
grid-template-columns: 1fr;
}
.cov-overview.cov-overview--single .cov-overview__body { font-size: 17px; }
}
/* =============================================================================
2026-09-15 Prestige correction pass
-----------------------------------------------------------------------------
Five additive blocks. Nothing below redefines an existing selector's
established values; every rule either adds a property to a component or
scopes itself behind a NEW modifier class, so the approved Private Client
page and every other approved component keep their current geometry.
========================================================================== */
/* -----------------------------------------------------------------------------
1. Orphan-word guard (sitewide typography QA rule).
A single word stranded on the last line of a heading, hero description,
editorial statement or prominent body paragraph is a defect. `text-wrap:
balance` evens short headings across their lines; `text-wrap: pretty` pulls a
word down from the previous line so the last line is never alone. Neither
changes an element's box, its max-width, or the number of lines it occupies
in the layouts checked below - verified in Chrome on coverage-private-client:
every section height and the page scrollHeight were byte-identical before and
after, while the page's orphan count went from 5 to 0.
-------------------------------------------------------------------------- */
.cov-hero__title,
.cov-fit__headline,
.cov-what__headline,
.cov-who__headline,
.cov-overview__statement,
.cov-faq__title,
.cov-faq__q,
.cov-cta__title,
.cov-momentum__headline,
.pp-team__title,
.pp-doc__body h2,
.pp-doc__body h3,
.cta-section h2,
/* 2026-10-26: the Client Perspectives heading was never in this list. Its
companion fix, the removal of a hardcoded in index.php, is what put the
sentence back on one line; balance only governs the 320px case, where it
breaks as "What our / clients say." rather than stranding "say.".
.hero h1 was in this list for a few hours and has been REMOVED again: see
the HOMEPAGE HERO block below for why balance was the wrong tool there. */
.client-perspectives__title {
text-wrap: balance;
}
/* -----------------------------------------------------------------------------
HOMEPAGE HERO measure (2026-10-26, replaces a text-wrap-only attempt).
WHAT WAS WRONG. At 82px Playfair the headline measures, word by word:
Insurance with your 758px
Insurance with your risks 962px
Insurance with your risks in 1057px
the whole sentence 1295px
against `max-width: 1100px`. So the first line greedily took everything up
to "in" (1057px fits) and "mind." alone was all that was left. The number
that produced the orphan was the max-width, and nothing else.
WHY text-wrap: balance DID NOT FIX IT. It is a progressive enhancement:
Chrome 114+, Safari 17.5+, Firefox 121+. Where it is not supported the
declaration is dropped and the greedy wrap above is exactly what renders,
which is why the companion fix to Client Perspectives took effect on
the beta and this one did not. A heading that must break in a particular
place cannot depend on a property the browser may ignore.
THE FIX. Constrain the measure so the greedy wrap itself lands in the right
place, which every browser then agrees on. Any max-width in [758, 962) puts
"your" at the end of line 1 and makes "risks" start line 2; 860px sits
almost exactly in the middle of that window, leaving ~100px of slack on
each side so a font-loading fallback cannot flip the break.
SCOPED TO >=1101px ON PURPOSE. Below that the headline drops to 60px, where
the whole sentence is ~948px and fits on one line at 1024, and wraps with
two or more words on the last line at every narrower width. A flat
max-width would have forced a second line at those sizes and re-created the
orphan there. Nothing at or below 1100px is touched.
`text-wrap: balance` is deliberately NOT applied here. With this measure it
would prefer "Insurance with / your risks in mind." (564/711) over
"Insurance with your / risks in mind." (758/518), because that is the more
even split. The second is the requested break, so the measure is left to
decide it alone and every browser renders the same two lines.
-------------------------------------------------------------------------- */
@media (min-width: 1101px) {
.hero h1 { max-width: 860px; }
}
/* -----------------------------------------------------------------------------
CLIENT PERSPECTIVES: the gap under the quotation ornament (2026-10-26).
.client-perspectives__inner is `display: flex`, so adjacent sibling margins
do NOT collapse the way they would in a block container. The 42px
margin-bottom on __header and the 44px margin-top on __stage therefore
ADDED, putting 86px of air between the ornament and the first line of the
testimonial (88px to the text's own top, measured in Chromium at 1440).
Two margins describing one gap is the defect; one of them is enough.
__stage keeps its margin-BOTTOM at every breakpoint, which is the space
below the testimonial and is unrelated. The header override is scoped to
>=641px so the existing 34px mobile value at <=640 still wins.
-------------------------------------------------------------------------- */
.client-perspectives__stage { margin-top: 0; }
@media (min-width: 641px) {
.client-perspectives__header { margin-bottom: 40px; }
}
.cov-fit__body,
.cov-what__sub,
.cov-what__text,
.cov-overview__body,
.cov-who__lede,
.cov-who__body-copy,
.cov-faq__a,
.cov-cta__sub,
.cov-momentum__body,
.pp-team__lede,
.pp-team__intro,
.pp-index__card-body,
.pp-carriers__blurb,
.pp-legal,
.pp-pairs__body,
.cov-cta__reach-row,
.pp-doc__body p,
.pp-doc__body li,
.cta-section p,
.team-info p {
text-wrap: pretty;
}
/* -----------------------------------------------------------------------------
2. Non-coverage internal hero - wider lede measure.
`.cov-hero__lede` keeps its approved 640px measure on the 16 coverage pages,
which render through includes/cov-page-shell.php. Pages that render through
includes/pp-hero.php now carry `.cov-hero--pp`, and only those get the wider
measure. 720px is roughly an 85-character line at 17px - a normal editorial
measure, not a stretched one. It is what lets the Team hero sentence
("Three names. Three phones. Every policy on your account has a person
attached to it.") wrap naturally on one line instead of stranding "it.",
and it also clears the stranded last words on /locations and
/terms-conditions.
-------------------------------------------------------------------------- */
.cov-hero--pp .cov-hero__lede {
max-width: 720px;
text-wrap: pretty;
}
/* -----------------------------------------------------------------------------
3. Team page - Leadership header now carries the paragraph that used to sit
in a standalone section above it. Same centred header rhythm, one measure
wider than .pp-team__lede so the two paragraphs read as lede + supporting
copy rather than two competing blocks.
-------------------------------------------------------------------------- */
.pp-team__intro {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.68;
color: var(--cov-body);
margin: 16px auto 0;
max-width: 720px;
}
@media (max-width: 760px) {
.pp-team__intro { font-size: 16px; max-width: 100%; }
}
/* -----------------------------------------------------------------------------
4. Final-CTA button row with a single action.
.cov-cta__buttons is already an inline-flex centred row, so one child centres
correctly on its own. This modifier exists to say that the single action is
deliberate and to give the lone button a little more presence so the row does
not read as a two-button layout with a missing slot.
-------------------------------------------------------------------------- */
.cov-cta__buttons--single {
justify-content: center;
}
.cov-cta__buttons--single .pill-btn {
min-width: 260px;
justify-content: center;
}
@media (max-width: 560px) {
/* .cov-cta__buttons is inline-flex, so it shrink-wraps its single child.
Drop the desktop min-width at phone sizes and let the button sit at its
natural size, centred - verified at 390px: 210px wide, 0px offset on
both sides. */
.cov-cta__buttons--single .pill-btn { min-width: 0; }
}
/* -----------------------------------------------------------------------------
5. Contact page.
The page reuses the approved .cov-momentum composition wholesale, so there is
no new form styling here. These rules only place the contact information
INSIDE that section's left editorial column, using the same turquoise
eyebrow language and hairline rules the rest of the design system uses, so
the form and the contact facts read as one composition. Scoped behind
.pp-contact so no coverage page is affected.
-------------------------------------------------------------------------- */
/* 2026-09-15 pass 4: /get-a-quote reuses the approved .cov-momentum composition
and the .pp-contact__details editorial block, so it shares this one scoped
rule. No new form styling was written for the quote page. */
.pp-contact .cov-momentum__intro,
.pp-quote .cov-momentum__intro {
max-width: 480px;
}
.pp-contact__details {
margin-top: 38px;
border-top: 1px solid var(--cov-rule);
padding-top: 30px;
display: grid;
gap: 24px;
}
.pp-contact__detail + .pp-contact__detail {
border-top: 1px solid var(--cov-rule);
padding-top: 24px;
}
.pp-contact__label {
font-family: var(--cov-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cov-turquoise);
line-height: 1;
margin-bottom: 10px;
}
.pp-contact__value {
font-family: var(--cov-sans);
font-size: 17px;
line-height: 1.6;
color: var(--cov-ink);
}
.pp-contact__phone {
font-family: var(--cov-serif);
font-size: 30px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--cov-ink);
text-decoration: none;
border-bottom: 1px solid var(--cov-turquoise);
padding-bottom: 2px;
transition: color .15s ease, border-color .15s ease;
}
.pp-contact__phone:hover,
.pp-contact__phone:focus-visible {
color: var(--cov-turquoise);
border-color: var(--cov-ink);
}
@media (max-width: 900px) {
.pp-contact .cov-momentum__intro,
.pp-quote .cov-momentum__intro { max-width: 100%; }
.pp-contact__details { margin-top: 30px; padding-top: 26px; }
.pp-contact__phone { font-size: 27px; }
}
/* =============================================================================
2026-09-15 (pass 2) Prestige editorial refinement
-----------------------------------------------------------------------------
Three additive blocks. Nothing here redefines an approved selector's
established geometry; the Overview change is a single font-style property and
everything else lives behind new class names.
========================================================================== */
/* -----------------------------------------------------------------------------
1. Overview - editorial italic on the LEFT display statement only.
This borrows the exact character of the approved .cov-who__lede treatment so
the two editorial statements on a coverage page read as one idea. ONLY the
left display statement changes: the right-hand body paragraph, the eyebrow,
the 6fr/1fr/5fr composition, the size, the colour and the max-width are all
untouched, so section heights do not move.
NOTE for Daniel: the site's Google Fonts request loads Playfair Display in
upright weights only (500/600/700/800) - no italic axis. So the italic on
.cov-who__lede that you approved is a browser-synthesised oblique, and this
new rule deliberately matches that same rendering rather than introducing a
different letterform. Loading the real Playfair italic would sharpen both,
but it WOULD visibly change the approved Private Client page, so it is not
done here - flagged for your decision instead.
-------------------------------------------------------------------------- */
.cov-overview__statement {
font-style: italic;
}
/* -----------------------------------------------------------------------------
3. .pp-directory - Resources index.
Replaces an eight-card bordered grid. Numbered rows, hairline separators,
editorial measure, action right-aligned on desktop and dropped underneath on
mobile. Nothing is boxed.
-------------------------------------------------------------------------- */
.pp-directory {
background: var(--cov-ivory-soft, #faf9f5);
padding: 96px 40px 104px;
}
.pp-directory__inner { max-width: 940px; margin: 0 auto; } /* keeps the Open action close to the editorial measure rather than stranded at the far right */
.pp-directory__list { list-style: none; margin: 0; padding: 0; }
.pp-directory__row { border-top: 1px solid var(--cov-rule, rgba(15,30,46,.10)); }
.pp-directory__row:last-child { border-bottom: 1px solid var(--cov-rule, rgba(15,30,46,.10)); }
.pp-directory__link {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: baseline;
column-gap: 28px;
padding: 30px 8px 30px 0;
text-decoration: none;
color: inherit;
transition: background .18s ease, padding-left .18s ease;
}
.pp-directory__link:hover { background: rgba(255,255,255,.7); padding-left: 10px; }
.pp-directory__num {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12px; font-weight: 600;
letter-spacing: .16em;
color: var(--cov-turquoise, #2fa39a);
}
.pp-directory__text { display: block; }
.pp-directory__title {
display: block;
font-family: var(--cov-serif, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 27px;
line-height: 1.2;
color: var(--cov-ink, #0f1e2e);
margin-bottom: 8px;
transition: color .18s ease;
}
.pp-directory__link:hover .pp-directory__title { color: var(--cov-turquoise, #2fa39a); }
.pp-directory__blurb {
display: block;
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 16.5px; line-height: 1.6;
color: var(--cov-body, #47576b);
max-width: 54ch; /* 2026-09-15 pass 3: 62ch stranded "perspective." on the Blog row; 54ch clears all eight blurbs and is still a comfortable measure */
text-wrap: pretty;
}
.pp-directory__more {
font-family: 'Inter', -apple-system, sans-serif;
font-weight: 600; font-size: 12px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--cov-body, #47576b);
white-space: nowrap;
transition: color .18s ease;
}
.pp-directory__more::after { content: ' \2192'; }
.pp-directory__link:hover .pp-directory__more { color: var(--cov-turquoise, #2fa39a); }
@media (max-width: 860px) {
.pp-directory { padding: 78px 26px 86px; }
.pp-directory__link { grid-template-columns: 40px 1fr; column-gap: 18px; padding: 24px 0; }
.pp-directory__title { font-size: 23px; }
.pp-directory__more { grid-column: 2; margin-top: 12px; }
}
@media (max-width: 560px) {
.pp-directory { padding: 62px 22px 70px; }
.pp-directory__blurb { font-size: 16px; }
}
/* 2026-09-15 (pass 2) - article "All insights" back-link.
Sits inside the existing .editorial-byline row and inherits its type scale,
so the row keeps its height and rhythm; only a turquoise leading arrow and a
hover colour are added. */
.editorial-byline__back {
font-weight: 600;
color: var(--cov-body, #47576b);
text-decoration: none;
transition: color .18s ease;
}
.editorial-byline__back::before {
content: '\2190\00a0';
color: var(--cov-turquoise, #2fa39a);
}
.editorial-byline__back:hover { color: var(--cov-turquoise, #2fa39a); }
/* =============================================================================
2026-09-15 (pass 3) .pp-journal - typography-first blog index
-----------------------------------------------------------------------------
PERMANENT REQUIREMENT: Prestige blog posts carry NO imagery. There is not a
single image rule in this block - no background-image, no aspect-ratio box,
no object-fit, no min-height reserving space for a picture. The composition
is scale contrast, hairline rules, a narrow meta rail and deliberate
asymmetric whitespace.
ONE ROW SYSTEM, TWO SCALES. The lead story and every archive row share the
same `rail | body` grid and the same left hairline on the body column, so the
page reads as one publication. The lead is simply larger and sits on white;
the archive sits on soft ivory. Because the archive is a single-column list,
it cannot strand an orphaned final card, and nothing here is tuned to a
particular post count - 3, 10 or 30 posts all compose correctly.
========================================================================== */
/* -- shared eyebrow + action ---------------------------------------------- */
.pp-journal__eyebrow-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.pp-journal__rule {
display: inline-block;
height: 1px; width: 40px;
background: var(--cov-turquoise, #2fa39a);
opacity: .55;
}
.pp-journal__eyebrow {
color: var(--cov-turquoise, #2fa39a);
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 12px; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase; line-height: 1;
}
.pp-journal__more {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Inter', -apple-system, sans-serif;
font-weight: 600; font-size: 13px;
letter-spacing: .12em; text-transform: uppercase;
color: var(--cov-ink, #0f1e2e);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid var(--cov-turquoise, #2fa39a);
transition: gap .18s ease, color .18s ease;
}
.pp-journal__more::after { content: '\2192'; }
.pp-journal__more:hover { gap: 12px; color: var(--cov-turquoise, #2fa39a); }
.pp-journal__more--sm { font-size: 12px; letter-spacing: .14em; }
/* -- LEAD STORY ------------------------------------------------------------ */
.pp-journal-lead {
background: #ffffff;
padding: 108px 40px 100px;
}
.pp-journal-lead__inner {
/* 2026-09-15 pass 4 - width polish. 1160px left ~260px of the page unused on a
1512px viewport; 1360px matches the footer .container, the site's widest
established track, so the journal now occupies the same page width as the
rest of the site. The reading measure is protected separately on the
excerpt below - the COMPOSITION widened, the text lines did not run away. */
max-width: 1360px;
margin: 0 auto;
display: grid;
grid-template-columns: 230px 1fr;
column-gap: 64px;
align-items: start;
}
.pp-journal-lead__inner--empty {
display: block;
max-width: 760px;
}
.pp-journal-lead__rail { padding-top: 10px; }
.pp-journal-lead__date {
font-family: var(--cov-serif, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 21px;
line-height: 1.25;
color: var(--cov-ink, #0f1e2e);
margin: 0 0 10px;
}
.pp-journal-lead__cat {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 11.5px; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: var(--cov-body, #47576b);
margin: 0;
}
.pp-journal-lead__body {
border-left: 1px solid var(--cov-rule, rgba(15, 30, 46, 0.10));
padding-left: 52px;
/* max-width removed 2026-09-15 pass 4: the 860px cap stopped the headline
~145px short of the container edge. The headline now fills its track
(3 lines instead of 4 at desktop); the excerpt keeps its own measure. */
}
.pp-journal-lead__title {
font-family: var(--cov-serif, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 56px;
line-height: 1.08;
letter-spacing: -.008em;
margin: 0 0 24px;
text-wrap: balance;
}
.pp-journal-lead__title a {
color: var(--cov-ink, #0f1e2e);
text-decoration: none;
transition: color .18s ease;
}
.pp-journal-lead__title a:hover { color: var(--cov-turquoise, #2fa39a); }
.pp-journal-lead__excerpt {
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 19px;
line-height: 1.62;
color: var(--cov-body, #47576b);
margin: 0 0 30px;
/* 2026-09-15 - measure cap REMOVED. 72ch held the excerpt to ~760px inside a
1013px body column, leaving ~250px of the widened composition unused -
the same 'only using part of the width' problem the pass-4 widening was
meant to solve, recreated one level further in. The excerpt now flows to
the body column the grid establishes. */
text-wrap: pretty;
}
/* -- ARCHIVE LIST ---------------------------------------------------------- */
.pp-journal {
background: var(--cov-ivory-soft, #faf9f5);
padding: 92px 40px 104px;
}
.pp-journal__inner { max-width: 1360px; margin: 0 auto; } /* pass 4: matches the lead + the footer container */
.pp-journal__header { margin-bottom: 14px; }
.pp-journal__list { list-style: none; margin: 0; padding: 0; }
.pp-journal__row {
display: grid;
grid-template-columns: 230px 1fr;
column-gap: 64px;
align-items: start;
border-top: 1px solid var(--cov-rule, rgba(15, 30, 46, 0.10));
padding: 40px 0 42px;
}
.pp-journal__row:last-child { border-bottom: 1px solid var(--cov-rule, rgba(15, 30, 46, 0.10)); }
.pp-journal__row-rail { padding-top: 6px; }
.pp-journal__row-date {
font-family: var(--cov-serif, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 17px;
line-height: 1.3;
color: var(--cov-ink, #0f1e2e);
margin: 0 0 8px;
}
.pp-journal__row-cat {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 11px; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: var(--cov-turquoise, #2fa39a);
margin: 0;
}
.pp-journal__row-body {
border-left: 1px solid var(--cov-rule, rgba(15, 30, 46, 0.10));
padding-left: 52px;
}
.pp-journal__row-title {
font-family: var(--cov-serif, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: 31px;
line-height: 1.18;
letter-spacing: -.004em;
margin: 0 0 14px;
text-wrap: balance;
}
.pp-journal__row-title a {
color: var(--cov-ink, #0f1e2e);
text-decoration: none;
transition: color .18s ease;
}
.pp-journal__row-title a:hover { color: var(--cov-turquoise, #2fa39a); }
.pp-journal__row-excerpt {
font-family: var(--cov-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 16.5px;
line-height: 1.65;
color: var(--cov-body, #47576b);
margin: 0 0 18px;
/* 2026-09-15 - measure cap REMOVED, same reason as the lead excerpt above:
80ch held this to ~734px inside the same 1013px body column. */
text-wrap: pretty;
}
/* -- responsive: the rail folds to a horizontal meta line ------------------ */
@media (max-width: 1100px) {
.pp-journal-lead { padding: 88px 32px 84px; }
.pp-journal-lead__inner { grid-template-columns: 200px 1fr; column-gap: 48px; }
.pp-journal-lead__body { padding-left: 40px; }
.pp-journal-lead__title { font-size: 46px; }
.pp-journal { padding: 78px 32px 88px; }
.pp-journal__row { grid-template-columns: 200px 1fr; column-gap: 48px; }
.pp-journal__row-body { padding-left: 40px; }
.pp-journal__row-title { font-size: 28px; }
}
@media (max-width: 860px) {
.pp-journal-lead__inner,
.pp-journal__row {
grid-template-columns: 1fr;
row-gap: 18px;
}
.pp-journal-lead__body,
.pp-journal__row-body {
border-left: 0;
padding-left: 0;
max-width: 100%;
}
/* meta becomes one horizontal line above the headline */
.pp-journal-lead__rail,
.pp-journal__row-rail {
padding-top: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 16px;
}
.pp-journal-lead__rail .pp-journal__eyebrow-row { flex-basis: 100%; margin-bottom: 8px; }
.pp-journal-lead__date, .pp-journal__row-date { margin: 0; font-size: 17px; }
.pp-journal-lead__cat, .pp-journal__row-cat { margin: 0; }
.pp-journal-lead__title { font-size: 38px; }
.pp-journal__row { padding: 32px 0 34px; }
.pp-journal__row-title { font-size: 26px; }
}
@media (max-width: 560px) {
.pp-journal-lead { padding: 62px 22px 60px; }
.pp-journal-lead__title { font-size: 32px; }
.pp-journal-lead__excerpt { font-size: 17px; }
.pp-journal { padding: 58px 22px 68px; }
.pp-journal__row-title { font-size: 24px; }
}
/* =============================================================================
2026-09-16 — ABOUT PAGE: heading/lead hierarchy in the One Agency section
-----------------------------------------------------------------------------
Daniel's correction: the LEFT display line reads as a normal Prestige section
heading, and the editorial italic moves to a lead statement on the RIGHT.
SCOPED TO THE ABOUT PAGE ONLY. `.cov-overview__statement` is shared by
includes/cov-page-shell.php, so all 16 coverage pages plus Private Client use
the same class and keep the approved italic treatment untouched. The modifier
class lives on the About section alone.
The statement also became a real
(the section previously had no heading).
`.cov-overview__statement` already sets font-family, weight, size, colour and
margin:0, and a class beats the global h1-h4 element rule, so the element
change moves nothing; only font-style does.
========================================================================== */
.cov-overview--about .cov-overview__statement {
font-style: normal;
}
/* The editorial italic lead that now opens the right column. Deliberately the
same character as the approved .cov-who__lede, one step down in size so the
column reads heading -> lead -> body rather than two competing displays. */
.cov-overview__lead {
font-family: var(--cov-serif);
font-style: italic;
font-weight: 400;
font-size: 22px;
line-height: 1.45;
color: var(--cov-ink);
margin: 0 0 20px;
text-wrap: balance;
}
/* Second body paragraph (the relocated boutique copy). .cov-overview__body is
margin:0, so the gap is added here rather than by changing the base rule. */
.cov-overview__body--second {
margin-top: 18px;
}
@media (max-width: 560px) {
/* At phone width the section heading steps down to 26px, so the lead steps
down with it and keeps a clear heading -> lead -> body hierarchy. */
.cov-overview__lead { font-size: 19px; margin-bottom: 18px; }
}
/* ---------------------------------------------------------------------------
refer-a-friend: lede sits INSIDE .cov-who__aside (directly after the H2)
rather than in the .cov-who__body column as on every other page, so it
inherits no top margin and collides with the headline (measured gap 0px).
Direct-child selector matches refer-a-friend.php only; coverage pages and
includes/cov-page-shell.php place the lede in .cov-who__body and are
unaffected.
--------------------------------------------------------------------------- */
.cov-who__aside > .cov-who__lede { margin-top: 20px; }
/* ---------------------------------------------------------------------------
2026-09-16 A11Y: footer column titles were
directly after the CTA
,
which skipped two heading levels on every page of the site. They are now
.
The old
styling came from several tag-based rules across the stylesheet
whose cascade resolved to 22px/1.6 - a tag swap alone therefore changed the
rendering. This class pins the EXACT previous computed values so the footer
is pixel-identical while the document outline becomes correct. No tag
selector is relied on.
--------------------------------------------------------------------------- */
.footer-panel .footer-col-title {
color: #ffffff;
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
line-height: 1.6;
font-weight: 500;
letter-spacing: normal; /* a global h2 rule applies -0.22px; the old h5 had none */
margin: 0 0 20px; /* every value measured from the previous
, not guessed */
}
/* 2026-09-16 A11Y: team member names were
under the "Leadership"
,
skipping a level. They are now
. The old
rendering resolved to
30px/600 through a tag-based rule that a later rule overrode for h3, so the
tag swap alone shrank the names to 22px/500. Every value below is measured
from the previous
rendering so the cards stay pixel-identical. */
.team-info .team-card__name {
font-family: 'Playfair Display', serif;
font-size: 30px;
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.3px;
margin: 0 0 6px;
color: var(--ink);
}
/* The eyebrow's turquoise is ~3.0:1 on white — under AA for 13px text. A single
darker step for the TEXT only; the inline rule and the icon fills keep the
original --pa-teal so the section's accent colour does not shift. */
/* ---- PRESTIGE: footer copyright — match Mythic Enterprises ------------------
Source of truth: Mythic's `.footer-bottom .footer-bottom-text .copy`
(10.5px / 1.6, rgba(255,255,255,.55); links rgba(255,255,255,.75), no
underline, #fff on hover). Prestige was inheriting 13px / .6 with underlined
links, so the two footers did not match.
-------------------------------------------------------------------------- */
.footer-bottom .footer-bottom-text .copy {
font-size: 10.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.55);
}
.footer-bottom .footer-bottom-text .copy a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
.footer-bottom .footer-bottom-text .copy a:hover { color: #ffffff; }
/* ---- PRESTIGE: footer legal row + disclaimer — match Mythic Enterprises ------
2026-09-16. Source of truth: the Mythic Enterprises footer, inspected in
Chrome rather than recalled. Mythic renders, inside .footer-bottom-text:
.footer-legal-row flex / wrap / align-items:center / gap 8px 14px /
margin 0 0 14px / 'Inter' / links rgba(255,255,255,.9),
NO underline, #fff on hover / .sep "|" rgba(255,255,255,.35)
.disclaimer rgba(255,255,255,.55), line-height 1.6, margin-bottom 10px,
bold DISCLAIMER: lead-in, links with no underline and
no border-bottom, #fff on hover
.copy rgba(255,255,255,.55), links rgba(255,255,255,.75)
Prestige now uses the same wrapper, the same pipe separators and the same
order. ONE deliberate divergence, per Daniel: every line in this block is
10.5px, where Mythic runs the legal row at 13.5px and the disclaimer at
11.5px. Everything else — family, weight, colour, line-height, gaps, opacity,
hover — is Mythic's.
The pre-existing `.footer-bottom .disclaimer a` rule drew a faux underline
(border-bottom: 1px solid rgba(255,255,255,.25)); it is zeroed here, the way
Mythic zeroes its own.
-------------------------------------------------------------------------- */
.footer-legal-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin: 0 0 14px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 10.5px;
line-height: 1.6;
}
.footer-legal-row a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
border-bottom: 0;
}
.footer-legal-row a:hover { color: #ffffff; }
.footer-legal-row .sep { color: rgba(255, 255, 255, 0.35); user-select: none; }
.footer-bottom .disclaimer { font-size: 10.5px; line-height: 1.6; }
.footer-bottom .footer-bottom-text .disclaimer a {
text-decoration: none;
border-bottom: 0;
}
.footer-bottom .footer-bottom-text .disclaimer a:hover {
color: #ffffff;
border-bottom-color: transparent;
}
/* ---- GLOBAL: TELEPHONE LINKS ARE NEVER UNDERLINED --------------------------
A phone number stays clickable and keeps its colour, but no line is ever
drawn beneath it, in any state, anywhere on the site.
WHY THIS IS SCOPED THE WAY IT IS
Measured before writing it: 15 tel links across the site. Four carried a
real underline. `.pp-contact__phone` drew a bottom-only 1px border. The
form widget's call bar, the `.link` class and a bare anchor in the terms
page each added `text-decoration: underline` on hover and focus, inherited
from generic anchor rules rather than set on the phone number itself.
The other eleven were `.pill-btn` call-to-action buttons. Their
border-bottom is one side of a pill-shaped button border: all four sides
are equal and the radius is 999px. That is a button outline, NOT an
underline, and removing it would break approved button styling. So the
border and background parts of this rule exclude button classes. The
text-decoration part does not need to, because a button should not carry
text-decoration either.
`!important` is deliberate and is confined to this one purpose. Several
competing rules are more specific than an attribute selector, for example
`.team-info .team-contact a:hover`, so without it a future component rule
would silently reintroduce an underline. This rule is the site's single
answer to "phone numbers are never underlined", so it needs to win.
The widget in includes/forms/render.php carries the same rule inside its
own scoped stylesheet, because that CSS is ID-scoped and a form may render
on a page that does not load this file.
WHAT THIS DOES NOT CATCH
A pseudo-element underline, meaning an `::after` with empty content sized
to a 1px bar. No tel link uses one today, and CSS cannot distinguish that
from an icon pseudo-element, so blanket-resetting `::after` would risk
removing icons. If a component ever adds one, it must not add it to a
phone number. */
a[href^="tel:"],
a[href^="TEL:"],
a[href^="tel:"]:link,
a[href^="tel:"]:visited,
a[href^="tel:"]:hover,
a[href^="tel:"]:focus,
a[href^="tel:"]:focus-visible,
a[href^="tel:"]:active,
a[href^="tel:"] *,
a[href^="tel:"]:hover *,
a[href^="tel:"]:focus * {
text-decoration: none !important;
text-decoration-line: none !important;
}
/* Bottom-only border used as an underline, and gradient-background
underlines. Button classes are excluded so a pill button keeps its
border and its fill. */
a[href^="tel:"]:not(.pill-btn):not(.btn):not(.button):not(.qf-btn):not(.cta-btn),
a[href^="tel:"]:not(.pill-btn):not(.btn):not(.button):not(.qf-btn):not(.cta-btn):hover,
a[href^="tel:"]:not(.pill-btn):not(.btn):not(.button):not(.qf-btn):not(.cta-btn):focus,
a[href^="tel:"]:not(.pill-btn):not(.btn):not(.button):not(.qf-btn):not(.cta-btn):focus-visible,
a[href^="tel:"]:not(.pill-btn):not(.btn):not(.button):not(.qf-btn):not(.cta-btn):active,
a[href^="tel:"]:not(.pill-btn):not(.btn):not(.button):not(.qf-btn):not(.cta-btn):visited {
border-bottom: 0 !important;
border-bottom-color: transparent !important;
background-image: none !important;
}