/* ─────────────────────────────────────────────────────────────
ESI · Design tokens
Editorial structure (typeui.sh) · ESI brand identity layer
───────────────────────────────────────────────────────────── */
:root {
/* Brand colors — from ESI Brand & Visual Style Guide */
--green-dark: #1b5630; /* Primary */
--green-medium: #4c8b40; /* Primary medium */
--teal-dark: #234b59; /* Primary dark teal */
--gold: #93863c; /* Primary gold accent */
--teal-medium: #287f89; /* Secondary medium */
--red-dark: #410000; /* Secondary deep red */
--gray-medium: #838f83; /* Secondary gray */
--gold-bright: #beac4d; /* Brighter gold from mapping palette — for accent on dark imagery */
/* Surfaces */
--paper: #f7f5f0; /* warm off-white, document feel */
--paper-deep: #efece4;
--surface: #ffffff;
--ink: #0f1a13; /* near-black with green tint */
--ink-muted: #4a544c;
--rule: #d8d3c5; /* warm hairline */
/* Type — anchored to ESI brand guide */
--serif: 'Merriweather', 'Iowan Old Style', Georgia, serif;
--sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
/* Type scale (8pt baseline rhythm) */
--t-display: clamp(48px, 6.4vw, 88px);
--t-h1: clamp(40px, 4.8vw, 64px);
--t-h2: clamp(28px, 3.2vw, 40px);
--t-h3: 22px;
--t-body: 18px;
--t-small: 15px;
--t-eyebrow: 12px;
/* Spacing — 8pt grid */
--s-1: 8px;
--s-2: 16px;
--s-3: 24px;
--s-4: 32px;
/* s-5 and s-10 were referenced in seven places before they existed. An undefined var() makes
the whole declaration invalid, so those paddings/gaps were silently dropping to 0. Defined
on the same 8px step as the rest of the scale (s-N = N x 8). */
--s-5: 40px;
--s-6: 48px;
--s-8: 64px;
--s-10: 80px;
--s-12: 96px;
--s-16: 128px;
--s-20: 160px;
/* Layout */
--container: 1280px;
--gutter: clamp(20px, 4vw, 56px);
}
/* ─────────────── Reset ─────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: var(--t-body);
line-height: 1.55;
font-feature-settings: "kern", "liga", "calt";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* ─────────────── Typography ─────────────── */
.serif { font-family: var(--serif); }
.eyebrow {
font-family: var(--sans);
font-size: var(--t-eyebrow);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--green-dark);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--inverse { color: rgba(255,255,255,0.75); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; line-height: 1.12; margin: 0; color: var(--ink); }
p { margin: 0 0 1em; }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-muted); max-width: 60ch; }
/* ─────────────── Container ─────────────── */
.wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* ─────────────── Navigation ─────────────── */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(247,245,240,0.86);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color .25s ease, background .25s ease;
}
.nav.is-scrolled { border-bottom-color: var(--rule); background: rgba(247,245,240,0.96); }
.nav__inner {
display: flex; align-items: center; justify-content: space-between;
height: 76px;
gap: var(--s-3);
}
.nav__logo img { height: 36px; width: auto; }
.nav__logo { flex-shrink: 0; }
.nav__links {
display: flex; align-items: center; gap: 36px;
font-family: var(--sans); font-size: 15px; font-weight: 500;
margin-left: auto;
}
.nav__links a {
color: var(--ink); position: relative; padding: 6px 0;
transition: color .2s ease;
}
.nav__links a::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
height: 1.5px; background: var(--green-dark);
transition: right .25s ease;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--green-dark); }
.nav__links a.is-active::after, .nav__links a:hover::after { right: 0; }
/* Practice Areas dropdown (links to the hub, reveals the areas on hover/focus) */
.nav__group { position: relative; display: inline-flex; align-items: center; }
.nav__caret { font-size: 9px; margin-left: 5px; line-height: 1; transition: transform .2s ease; }
.nav__group:hover .nav__caret, .nav__group:focus-within .nav__caret { transform: rotate(180deg); }
.nav__sub { position: absolute; top: 100%; left: 0; min-width: 250px; display: none; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 22px 44px -22px rgba(15,26,19,0.32); padding: 8px; z-index: 60; }
.nav__group:hover .nav__sub, .nav__group:focus-within .nav__sub { display: flex; }
.nav__sub a { padding: 9px 12px; border-radius: 3px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.nav__sub a::after { display: none; }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--paper); color: var(--green-dark); }
.nav__sub a.nav__sub-all { font-weight: 600; color: var(--green-dark); border-bottom: 1px solid var(--rule); border-radius: 0; margin-bottom: 4px; }
/* Section-head "view all" link */
.section-head__cta { margin: var(--s-3) 0 0; }
.section-head__cta a { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.03em; color: var(--green-dark); display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--green-dark); padding-bottom: 2px; transition: gap .2s ease; }
.section-head__cta a:hover { gap: 12px; }
.nav__cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--green-dark); color: #fff;
padding: 11px 20px; border-radius: 2px;
font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
transition: background .2s ease, transform .2s ease;
flex-shrink: 0;
}
.nav__cta:hover { background: var(--ink); transform: translateY(-1px); }
.nav__cta::after { display: none; }
.nav__cta__short { display: none; } /* compact label, shown only on narrowest viewports */
/* Hamburger button — hidden on desktop, shown on mobile */
.nav__hamburger {
display: none;
align-items: center; justify-content: center; gap: 8px;
padding: 8px 4px; min-width: 44px; min-height: 44px; /* ≥44×44 touch target */
flex-shrink: 0;
}
.nav__hamburger__lines {
display: inline-flex; flex-direction: column; gap: 4px;
width: 22px;
}
.nav__hamburger__lines span {
display: block; height: 2px; width: 100%;
background: var(--ink);
transition: transform .25s ease, opacity .25s ease;
}
.nav__hamburger__label {
font-family: var(--sans); font-size: 14px; font-weight: 600;
letter-spacing: 0.02em; color: var(--ink);
}
@media (max-width: 880px) {
.nav__links { display: none; }
.nav__hamburger { display: inline-flex; }
.nav__inner { gap: 12px; }
}
@media (max-width: 480px) {
/* Collapse CTA label to "Contact us" on narrowest screens */
.nav__cta { padding: 10px 14px; font-size: 13px; gap: 6px; }
.nav__cta__full { display: none; }
.nav__cta__short { display: inline; }
/* Hide "Menu" word, keep only the icon, to give the CTA breathing room */
.nav__hamburger__label { display: none; }
.nav__hamburger { padding: 8px; }
}
/* ─────────────── Mobile menu overlay ─────────────── */
.mobile-menu {
position: fixed; inset: 0; z-index: 100;
background: var(--paper);
display: flex; flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.mobile-menu[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner {
flex: 1;
padding: var(--s-4) var(--s-4) var(--s-6);
display: flex; flex-direction: column;
max-width: 720px; width: 100%; margin: 0 auto;
}
.mobile-menu__close {
align-self: flex-end;
width: 44px; height: 44px;
font-size: 28px; line-height: 1;
color: var(--ink);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--s-4);
}
.mobile-menu__nav {
display: flex; flex-direction: column;
flex: 1;
}
.mobile-menu__nav a {
font-family: var(--serif);
font-size: clamp(28px, 5vw, 36px);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
padding: var(--s-3) 0;
border-bottom: 1px solid var(--rule);
transition: color .2s ease, padding-left .25s ease;
display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu__nav a::after {
content: "→";
font-family: var(--sans); font-size: 18px; font-weight: 400;
color: var(--ink-muted);
transition: transform .25s ease, color .2s ease;
}
.mobile-menu__nav a:hover, .mobile-menu__nav a:active {
color: var(--green-dark);
padding-left: 8px;
}
.mobile-menu__nav a:hover::after, .mobile-menu__nav a:active::after {
color: var(--green-dark);
transform: translateX(4px);
}
.mobile-menu__foot {
margin-top: var(--s-6);
padding-top: var(--s-4);
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
gap: var(--s-4);
align-items: center;
}
@media (max-width: 480px) {
.mobile-menu__foot { grid-template-columns: 1fr; gap: var(--s-3); }
}
.mobile-menu__cta {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: var(--green-dark); color: #fff;
padding: 14px 24px; border-radius: 2px;
font-family: var(--sans);
font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
transition: background .2s ease;
white-space: nowrap;
align-self: stretch;
}
.mobile-menu__cta:hover, .mobile-menu__cta:active { background: var(--ink); }
.mobile-menu__contact { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mobile-menu__phone {
font-family: var(--serif);
font-size: 22px;
font-weight: 700;
color: var(--green-dark);
display: inline-block;
margin-bottom: 8px;
border-bottom: 1px solid var(--green-dark);
padding-bottom: 2px;
}
.mobile-menu__addr {
font-family: var(--sans);
font-size: 14px;
color: var(--ink-muted);
line-height: 1.55;
margin: 0;
}
/* Lock body scroll when menu open */
body.menu-open { overflow: hidden; }
/* ─────────────── Hero (full-bleed image) ─────────────── */
.hero {
position: relative;
min-height: 64vh; /* reduced ~20% from 80vh so the stats/trust band sits above the fold; still taller than the subpage hubhero (~56vh) */
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
background: var(--green-dark); /* fallback while image loads */
}
@media (max-width: 880px) { .hero { min-height: 58vh; } }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img,
.hero__bg video {
width: 100%; height: 100%; object-fit: cover;
}
.hero__bg img {
animation: kenBurns 26s ease-in-out infinite alternate;
}
.hero__overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg,
rgba(15,26,19,0.35) 0%,
rgba(15,26,19,0.55) 50%,
rgba(15,26,19,0.78) 100%);
}
.hero__content {
position: relative; z-index: 2; width: 100%;
padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.hero h1 {
color: #fff;
font-size: clamp(40px, 5.2vw, 72px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
max-width: 18ch;
text-shadow: 0 1px 24px rgba(0,0,0,0.35);
}
.hero h1 .accent { color: var(--gold-bright); font-style: italic; font-weight: 700; }
.hero__lede {
color: rgba(255,255,255,0.88);
margin-top: var(--s-4);
max-width: 56ch;
}
.hero__actions {
display: flex; gap: 16px; margin-top: var(--s-6); align-items: center;
}
.hero .btn--ghost { color: #fff; border-bottom-color: rgba(255,255,255,0.65); }
.hero .btn--ghost:hover { color: var(--gold); border-bottom-color: var(--gold); }
@keyframes kenBurns {
0% { transform: scale(1.0) translate(0%, 0%); }
100% { transform: scale(1.08) translate(-1.5%, -1%); }
}
/* General buttons */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px; border-radius: 2px;
font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
touch-action: manipulation; -webkit-tap-highlight-color: transparent;
transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; border-radius: 2px; }
.btn--primary { background: var(--green-dark); color: #fff; }
.btn--primary:hover { background: var(--ink); }
.btn--ghost { color: var(--ink); border-bottom: 1.5px solid var(--ink); padding: 10px 0; border-radius: 0; }
.btn--ghost:hover { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* ─────────────── Stats strip ─────────────── */
.stats {
background: var(--green-dark);
color: #fff;
padding: var(--s-12) 0;
position: relative;
overflow: hidden;
}
.stats::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%),
radial-gradient(900px 500px at 110% 120%, rgba(147,134,60,0.18), transparent 60%);
}
/* Column count follows the number of stats actually rendered, which an editor controls
(the band reads an editable list, and Gina dropped the funding figure on 2026-08-03).
Templates set --stat-cols from the item count; the fallback keeps the original 4-up. */
.stats__grid {
display: grid; grid-template-columns: repeat(var(--stat-cols, 4), 1fr);
gap: var(--s-6);
position: relative; z-index: 1;
}
@media (max-width: 880px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); } }
.stat {
display: flex; flex-direction: column;
}
.stat__label {
font-family: var(--sans); font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.18em;
color: rgba(255,255,255,0.65);
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.18);
margin-bottom: 16px;
}
.stat__num {
font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6vw, 84px);
line-height: 1; letter-spacing: -0.025em; color: #fff;
}
.stat__num .suffix { color: var(--gold); font-size: 0.35em; vertical-align: 0.45em; margin-left: 0.08em; letter-spacing: 0; font-weight: 500; }
/* ─────────────── Section heading shared ─────────────── */
section.band { padding: var(--s-12) 0; }
/* When .wrap and .band sit on the SAME element (Contact form, Search results), section.band's
shorthand (higher specificity than the bare .wrap class) zeroes .wrap's horizontal gutter, so
content goes flush to the screen edges on mobile. Restore the gutter for that combination. */
.wrap.band { padding-left: var(--gutter); padding-right: var(--gutter); }
.section-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.6fr); gap: var(--s-8); margin-bottom: var(--s-8); align-items: start; }
@media (max-width: 880px) { .section-head { grid-template-columns: 1fr; gap: var(--s-3); } }
.section-head h2 { font-size: var(--t-h2); font-weight: 400; max-width: 22ch; }
.section-head h2 em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.section-head__meta { color: var(--ink-muted); }
/* ─────────────── Approach (between stats and case studies) ─────────────── */
.approach { background: var(--paper); padding: var(--s-16) 0; }
.approach__inner {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
gap: var(--s-12);
align-items: start;
}
@media (max-width: 980px) { .approach__inner { grid-template-columns: 1fr; gap: var(--s-6); } }
.approach__intro { display: flex; flex-direction: column; gap: var(--s-3); }
.approach__label {
font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--gold);
display: inline-flex; align-items: center; gap: 12px;
}
.approach__label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.approach__visual {
margin: 0;
aspect-ratio: 4 / 5;
width: 100%;
overflow: hidden;
background: var(--paper-deep);
}
.approach__visual img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1.2s ease;
}
.approach__visual:hover img { transform: scale(1.03); }
.approach__copy h2 {
font-size: clamp(32px, 3.6vw, 48px);
font-weight: 400; line-height: 1.18; max-width: 22ch;
}
.approach__copy h2 em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.approach__copy p {
margin-top: var(--s-4); font-size: 19px; line-height: 1.6; color: var(--ink-muted); max-width: 60ch;
}
.approach__pillars {
margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule);
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
}
@media (max-width: 880px) { .approach__pillars { grid-template-columns: 1fr; gap: var(--s-3); } }
.pillar h4 { font-family: var(--serif); font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--green-dark); }
.pillar p { color: var(--ink-muted); font-size: 15px; margin: 0; line-height: 1.5; }
/* ─────────────── Case studies (Our work) ───────────────
Image-led editorial cards, 3-up. Same card DNA as .pa-card: the photograph
supplies the figure/ground contrast, so cards read against the paper-deep band
instead of blending into it (the old flat gold-on-beige tiles did not). Anatomy
is lean — practice-area eyebrow, title, client, one clamped teaser, single
whole-card CTA — so nothing collides or wraps. */
.cases { background: var(--paper-deep); padding: var(--s-16) 0; }
.cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 980px) { .cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cases__grid { grid-template-columns: 1fr; } }
.case {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.case:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -26px rgba(15,26,19,0.42); border-color: var(--green-medium); }
.case:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }
.case__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-deep); }
.case__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.case:hover .case__media img { transform: scale(1.04); }
.case__body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); flex: 1 1 auto; }
.case--noimg .case__body { min-height: 260px; }
.case__tag {
font-family: var(--sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.case__title {
font-family: var(--serif); font-weight: 700;
font-size: clamp(20px, 1.6vw, 24px);
line-height: 1.2; letter-spacing: -0.01em;
color: var(--ink);
text-wrap: balance;
}
.case__client {
font-family: var(--sans); font-size: 13px;
color: var(--ink-muted);
}
.case__teaser {
font-size: 15px; color: var(--ink-muted); line-height: 1.55;
margin-top: 4px; text-wrap: pretty;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.case__cta {
margin-top: auto;
font-family: var(--sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
color: var(--green-dark); display: inline-flex; align-items: center; gap: 8px;
transition: gap .2s ease;
}
.case:hover .case__cta { gap: 12px; }
.cases__after {
margin-top: var(--s-6);
padding-top: var(--s-3);
border-top: 1px solid var(--rule);
max-width: 70ch;
font-size: 16px;
color: var(--ink-muted);
line-height: 1.55;
}
.cases__after p { margin: 0; }
.cases__after a {
color: var(--green-dark);
border-bottom: 1px solid var(--green-dark);
font-weight: 500;
white-space: nowrap;
transition: color .2s ease, border-color .2s ease;
}
.cases__after a:hover { color: var(--ink); border-color: var(--ink); }
/* ─────────────── Core services (image-overlay cards) ─────────────── */
.services { background: var(--paper-deep); padding: var(--s-12) 0; }
.services__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-3);
}
@media (max-width: 980px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services__grid { grid-template-columns: 1fr; } }
.service {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--ink);
isolation: isolate;
color: #fff;
}
.service__bg { position: absolute; inset: 0; z-index: 0; }
.service__bg img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s ease;
}
.service:hover .service__bg img { transform: scale(1.06); }
/* The scrim has to carry white text over WHATEVER photo a service happens to have, and the
photos vary from near-black to a bright sky. Measured 2026-08-04: at the previous strength
the Policy Assessment title sat at 2.09:1 against its pale ceiling and Benefit-Cost at
3.22:1, so the 19-22px bold titles were under the 3:1 large-text minimum on light images
and the 14px descriptions were well under 4.5:1. Raising the floor and the mid stop fixes
every card at once and keeps the next photo legible without anyone having to check. */
.service__overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg,
rgba(15,26,19,0.24) 0%,
rgba(15,26,19,0.70) 45%,
rgba(15,26,19,0.95) 100%);
transition: opacity .3s ease;
}
.service__content {
position: relative; z-index: 2;
padding: var(--s-4);
}
.service__title {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(19px, 1.5vw, 22px);
line-height: 1.2; letter-spacing: -0.01em;
color: #fff;
margin: 0 0 10px;
min-height: 2.4em;
text-shadow: 0 1px 14px rgba(0,0,0,0.4);
}
.service__desc {
font-size: 14px;
color: rgba(255,255,255,0.88);
line-height: 1.5;
margin: 0 0 var(--s-3);
min-height: 4.5em;
text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.service__cta {
font-family: var(--sans);
font-size: 12px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold-bright);
display: inline-flex; align-items: center; gap: 6px;
transition: gap .2s ease, color .2s ease;
}
.service:hover .service__cta { gap: 10px; color: #fff; }
/* ─────────────── Practice areas ─────────────── */
.practice { padding: var(--s-16) 0; }
.practice__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: var(--rule);
border: 1px solid var(--rule);
}
@media (max-width: 980px) { .practice__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .practice__grid { grid-template-columns: 1fr; } }
.area {
background: var(--paper);
padding: var(--s-6);
display: flex; flex-direction: column; gap: var(--s-2);
min-height: 200px;
position: relative;
transition: background .25s ease;
}
.area:hover { background: var(--surface); }
.area__num {
font-family: var(--serif); font-style: italic; font-size: 14px;
color: var(--gold); font-weight: 400;
}
.area__title {
font-family: var(--serif); font-weight: 700; font-size: 22px;
letter-spacing: -0.01em; line-height: 1.2;
color: var(--ink);
}
.area__desc { font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin: 0; }
.area__cta {
margin-top: auto;
font-family: var(--sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--green-dark); display: inline-flex; align-items: center; gap: 8px;
transition: gap .2s ease;
}
.area:hover .area__cta { gap: 12px; }
/* ─────────────── Clients band ─────────────── */
/* section.clients (not .clients) so this padding beats section.band's var(--s-12). */
section.clients { background: var(--teal-dark); color: #fff; padding: 80px 0; position: relative; }
.clients::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(800px 400px at 100% 0%, rgba(147,134,60,0.18), transparent 60%);
}
.clients__inner { position: relative; }
.clients__top {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
gap: var(--s-8); align-items: end; margin-bottom: var(--s-8);
}
@media (max-width: 880px) { .clients__top { grid-template-columns: 1fr; gap: var(--s-3); } }
.clients h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 400; max-width: 22ch; }
.clients h2 em { font-style: italic; color: var(--gold); font-weight: 700; }
.clients__copy { color: rgba(255,255,255,0.78); max-width: 50ch; }
/* Client roster: a horizontally-scrollable text carousel (no logos, no auto-scroll) steered by
the hover/click edge arrows or native swipe. Names are ruled cells on the teal band. */
/* ─────────────── Carousel arrows (shared component) ─────────────── */
/* One treatment for every horizontal carousel: the homepage "Trusted by" client roster, and
"Our clients" + "Featured projects" on Our Work. The arrows sit in a reserved gutter OUTSIDE
the scrolling track, so they never sit on top of a client name, a logo, or card artwork.
Usage: .carousel on the viewport (reserves the gutter) + .carousel-arrow--prev/--next on the
buttons. Add .carousel-arrow--on-dark on dark bands, where the white glyph carries itself and
a heavy disc would be noise. Opacity lives in the background colour, never on the element, so
the glyph stays fully opaque and legible on both light and dark grounds. */
.carousel { position: relative; padding-left: 60px; padding-right: 60px; }
.carousel-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 44px; height: 44px; border-radius: 50%; border: none;
background: rgba(15,26,19,0.5); color: #fff;
font-family: var(--sans); font-size: 24px; line-height: 1;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background-color .2s ease;
}
.carousel-arrow:hover { background: rgba(15,26,19,0.78); }
.carousel-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.carousel-arrow--prev { left: 6px; }
.carousel-arrow--next { right: 6px; }
.carousel-arrow[hidden] { display: none; }
/* Dark/teal bands: keep the disc light-touch (the white arrow already reads clearly). */
.carousel-arrow--on-dark { background: rgba(15,26,19,0.26); }
.carousel-arrow--on-dark:hover { background: rgba(15,26,19,0.5); }
/* Touch: no arrows (native swipe), so hand the reserved gutter back to the track. */
@media (hover: none) {
.carousel { padding-left: 0; padding-right: 0; }
.carousel-arrow { display: none; }
}
.clients__carousel { position: relative; }
.clients__track {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 1px;
background: rgba(255,255,255,0.14);
border-top: 1px solid rgba(255,255,255,0.14);
border-bottom: 1px solid rgba(255,255,255,0.14);
overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.clients__track::-webkit-scrollbar { display: none; }
.clients__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.clients__name {
flex: 0 0 auto;
background: var(--teal-dark);
padding: 28px 32px;
font-family: var(--serif); font-size: 17px; font-weight: 400;
letter-spacing: -0.005em; color: #fff; white-space: nowrap;
display: flex; align-items: center; min-height: 84px;
transition: background .25s ease;
}
.clients__name:hover { background: rgba(255,255,255,0.04); }
/* Arrows: shared .carousel-arrow component above (--on-dark, this band is teal). */
/* ─────────────── Insights ─────────────── */
.insights { padding: var(--s-16) 0; background: var(--paper); }
.insights__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
}
@media (max-width: 880px) { .insights__grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.insight {
display: flex; flex-direction: column; gap: var(--s-2);
padding-top: var(--s-4); border-top: 1px solid var(--ink);
}
.insight__meta {
font-family: var(--sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
display: flex; gap: 14px; align-items: center;
}
.insight__meta .dot { width: 3px; height: 3px; background: var(--gold); border-radius: 50%; }
.insight__title {
font-family: var(--serif); font-weight: 700; font-size: 22px;
line-height: 1.25; letter-spacing: -0.01em; color: var(--ink);
transition: color .2s ease;
}
.insight:hover .insight__title { color: var(--green-dark); }
.insight__teaser { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
/* ─────────────── CTA band ─────────────── */
.cta-band {
background: var(--ink); color: #fff; padding: var(--s-12) 0;
position: relative; overflow: hidden;
}
.cta-band::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(900px 500px at 0% 100%, rgba(27,86,48,0.45), transparent 60%);
}
.cta-band__inner {
display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
gap: var(--s-8); align-items: center;
position: relative;
}
@media (max-width: 880px) { .cta-band__inner { grid-template-columns: 1fr; gap: var(--s-6); } }
.cta-band h2 {
color: #fff; font-size: clamp(36px, 4.4vw, 60px); font-weight: 400;
line-height: 1.1; max-width: 18ch;
}
.cta-band h2 em { font-style: italic; color: var(--gold-bright); font-weight: 700; }
.cta-band p { color: rgba(255,255,255,0.78); margin-top: var(--s-3); max-width: 48ch; }
/* Anchored to the RIGHT edge, not the left of its column. Left-aligned it landed in the
middle of the page with dead space beside it, reading as a mistake rather than a
layout: the heading holds the left, so the CTA should hold the right. */
.cta-band__action { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-end; text-align: right; }
@media (max-width: 880px) { .cta-band__action { align-items: flex-start; text-align: left; } }
.cta-band .btn--primary { background: var(--gold-bright); color: var(--ink); }
.cta-band .btn--primary:hover { background: #fff; }
.cta-band__detail {
font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,0.65);
letter-spacing: 0.02em;
}
.cta-band__detail a {
color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4);
transition: border-color .2s ease;
}
.cta-band__detail a:hover { border-bottom-color: var(--gold-bright); }
/* ─────────────── Contact modal ─────────────── */
.modal {
border: 0;
background: var(--paper);
color: var(--ink);
padding: 0;
max-width: min(640px, 92vw);
width: 100%;
max-height: 92vh;
border-radius: 4px;
box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.modal::backdrop {
background: rgba(15,26,19,0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes backdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal[open] { animation: modalIn .25s ease-out; }
.modal[open]::backdrop { animation: backdropIn .25s ease-out; }
.modal__inner { padding: var(--s-6); overflow-y: auto; max-height: 92vh; }
.modal__close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--paper);
border: 1px solid var(--rule);
color: var(--ink);
font-size: 20px; line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
z-index: 2;
}
.modal__close:hover { background: var(--paper-deep); border-color: var(--ink); color: var(--green-dark); }
.modal__head { margin-bottom: var(--s-4); padding-right: 40px; }
.modal__head .eyebrow { display: block; margin-bottom: 12px; }
.modal__head h2 {
font-family: var(--serif);
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.modal__head h2 em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.modal__head p {
color: var(--ink-muted);
font-size: 16px;
line-height: 1.5;
margin: 0;
}
/* Modal form (light theme) */
.modal-form { display: flex; flex-direction: column; gap: var(--s-3); }
.modal-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 540px) { .modal-form__row { grid-template-columns: 1fr; } }
.modal-form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modal-form__label {
font-family: var(--sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-muted);
}
.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form input[type="tel"],
.modal-form select,
.modal-form textarea {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 2px;
padding: 11px 14px;
font-family: var(--sans); font-size: 16px; /* >=16px so iOS does not auto-zoom the field on focus */
color: var(--ink);
width: 100%;
transition: border-color .2s ease;
}
.modal-form input::placeholder,
.modal-form textarea::placeholder { color: rgba(74,84,76,0.5); }
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
outline: none;
border-color: var(--green-dark);
}
.modal-form input:focus-visible,
.modal-form select:focus-visible,
.modal-form textarea:focus-visible {
box-shadow: 0 0 0 3px rgba(27,86,48,0.25);
}
.modal-form select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.modal-form textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.modal-form__radio {
border: 0; padding: 0; margin: 0;
display: flex; flex-direction: row; gap: var(--s-3); flex-wrap: wrap;
}
.modal-form__radio legend {
padding: 0; margin-bottom: 8px;
font-family: var(--sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-muted);
width: 100%;
}
.modal-form__radio > label {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--sans); font-size: 14px;
color: var(--ink); cursor: pointer;
}
.modal-form__radio input[type="radio"] {
appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--rule);
border-radius: 50%;
position: relative;
cursor: pointer; background: var(--surface);
transition: border-color .2s ease;
flex-shrink: 0;
}
.modal-form__radio input[type="radio"]:checked { border-color: var(--green-dark); }
.modal-form__radio input[type="radio"]:checked::after {
content: ""; position: absolute; inset: 3px;
background: var(--green-dark); border-radius: 50%;
}
.modal-form__radio input[type="radio"]:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.modal-form__consent {
display: flex; align-items: flex-start; gap: 10px;
font-family: var(--sans); font-size: 14px;
color: var(--ink-muted); line-height: 1.45;
cursor: pointer;
margin-top: 4px;
}
.modal-form__consent input[type="checkbox"] {
appearance: none;
width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
border: 1.5px solid var(--rule);
border-radius: 2px;
background: var(--surface);
cursor: pointer; position: relative;
transition: background .2s ease, border-color .2s ease;
}
.modal-form__consent input[type="checkbox"]:checked {
background: var(--green-dark); border-color: var(--green-dark);
}
.modal-form__consent input[type="checkbox"]:checked::after {
content: ""; position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.modal-form__consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.modal-form__submit {
align-self: flex-start;
margin-top: var(--s-2);
background: var(--green-dark); color: #fff;
}
.modal-form__submit:hover { background: var(--ink); }
/* ─────────────── Footer (dark green, branded close under the ink CTA band) ─────────────── */
footer.foot { background: var(--green-dark); color: rgba(247,245,240,0.82); padding: var(--s-12) 0 var(--s-6); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--s-8); }
@media (max-width: 880px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.foot__brand img { height: 40px; margin-bottom: var(--s-3); width: auto; }
.foot__brand p { font-size: 14px; color: rgba(247,245,240,0.72); max-width: 40ch; line-height: 1.6; margin: 0; }
.foot__socials { display: flex; gap: 4px; margin-top: var(--s-3); margin-left: -10px; }
/* Monochrome glyphs (no chips) on the dark footer — override the contact-page circle treatment.
Each anchor is a ≥44×44 touch target with the 20px glyph centered (tight visual gap, big tap area). */
.foot__socials a.esi-social { width: 44px; height: 44px; min-width: 44px; border: none; background: none; border-radius: 0; color: rgba(247,245,240,0.66); transition: color .2s ease; display: inline-flex; align-items: center; justify-content: center; }
.foot__socials a.esi-social:hover { color: #fff; background: none; border-color: transparent; transform: none; }
.foot__socials .esi-social svg { width: 20px; height: 20px; }
.foot__col h5 {
font-family: var(--sans); font-size: 12px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold-bright); margin: 0 0 14px;
}
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.foot__col a { font-size: 15px; color: rgba(247,245,240,0.82); transition: color .2s ease; }
.foot__col a:hover { color: #fff; }
.foot__addr { font-style: normal; font-size: 14px; line-height: 1.55; color: rgba(247,245,240,0.72); margin: 0 0 12px; }
.foot__bottom {
margin-top: var(--s-8); padding-top: var(--s-3); border-top: 1px solid rgba(247,245,240,0.14);
display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
font-family: var(--sans); font-size: 13px; color: rgba(247,245,240,0.6);
}
/* RD Systems credit. Dimmer than both neighbours (legal links sit at .72, the copyright at .6)
so it reads as a credit rather than a footer link, with the same hover treatment as the rest of
the footer so it still feels native. */
.foot__credit a { color: rgba(247,245,240,0.45); text-decoration: none; }
.foot__credit a:hover { color: rgba(247,245,240,0.8); text-decoration: underline; text-underline-offset: 2px; }
.foot__legal { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.foot__legal a { color: rgba(247,245,240,0.72); text-decoration: none; }
.foot__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .foot__bottom { flex-direction: column; align-items: flex-start; } }
/* ─────────────── Reveal animation ─────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; }
* { animation: none !important; transition: none !important; }
}
.hero h1 { animation: fadeUp .9s ease both; }
.hero__lede { animation: fadeUp .9s ease .15s both; }
.hero__actions { animation: fadeUp .9s ease .3s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* SVG hero chart strokes — removed; hero is now image-based */
/* ════════════════ Single post (RD Systems) ════════════════ */
.post-hero{position:relative;min-height:clamp(360px,46vh,520px);display:flex;align-items:center;justify-content:center;text-align:center;background-size:cover;background-position:center;color:#fff;}
.post-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,26,19,.45),rgba(15,26,19,.66));}
.post-hero__inner{position:relative;z-index:1;max-width:900px;padding:var(--s-8) var(--gutter);}
.post-hero h1{color:#fff;font-family:var(--serif);font-weight:700;font-size:var(--t-h1);line-height:1.12;letter-spacing:-.01em;margin:0 0 var(--s-3);}
.post-hero__date{color:rgba(255,255,255,.85);font-family:var(--sans);font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;margin:0;}
.post-hero--plain{background:var(--ink);}
/* Report single (single.php): article + sticky right rail carrying the cover and the PDF
download. Mirrors the live site's sidebar, which is the layout ESI's readers already know,
and keeps the download in view for the whole read instead of only at the top or bottom. */
.report-layout {
max-width: 1120px; margin: 0 auto; padding: var(--s-12) var(--gutter);
--rail-w: 300px;
display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--s-8); align-items: start;
}
/* The rail is first in the DOM (so it stacks above the article on mobile); place it right here. */
.report-layout > .report-rail { grid-column: 2; grid-row: 1; position: sticky; top: 96px; }
.report-layout > .report-layout__main { grid-column: 1; grid-row: 1; }
/* Neutralise .post-body's own centring/padding inside the grid — the layout owns those now. */
.post-body.report-layout__main { max-width: none; margin: 0; padding: 0; }
@media (max-width: 900px) {
.report-layout { grid-template-columns: 1fr; gap: var(--s-6); padding-top: var(--s-8); }
.report-layout > .report-rail,
.report-layout > .report-layout__main { grid-column: 1; grid-row: auto; position: static; }
}
.report-rail { background: var(--paper-deep); border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: var(--s-4); }
.report-rail__cover img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--surface); box-shadow: 0 10px 28px -18px rgba(15,26,19,0.5); }
.report-rail__cover { margin-bottom: var(--s-3); }
@media (max-width: 900px) { .report-rail__cover { max-width: 220px; } }
.report-rail__title { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--ink); margin: 0 0 var(--s-2); }
.report-rail__title em { font-style: italic; font-weight: 700; color: var(--green-dark); }
.report-rail__note { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 var(--s-3); }
.report-rail__note p:last-child { margin-bottom: 0; }
.report-rail__cta { display: inline-flex; }
.report-rail__meta { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: var(--s-2) 0 0; }
.post-body{max-width:760px;margin:0 auto;padding:var(--s-12) var(--gutter);}
.post-body > *{margin-bottom:1.55em;}
.post-body p{line-height:1.85;font-size:var(--t-body);margin:0 0 1.55em;}
.post-body h2{font-family:var(--serif);font-size:var(--t-h3);margin:1.9em 0 .55em;}
.post-body h3{font-family:var(--serif);margin:1.6em 0 .5em;}
.post-body ul,.post-body ol{margin:0 0 1.55em;padding-left:1.4em;line-height:1.8;}
.post-body li{margin:0 0 .5em;}
.post-body img{max-width:100%;height:auto;margin:1.6em 0;}
.post-body a{color:var(--green-dark);text-underline-offset:3px;}
/* WordPress content alignment (floated images wrap text, matching the live site) */
.post-body .alignleft{float:left;margin:.3em 1.6em 1em 0;max-width:48%;height:auto;}
.post-body .alignright{float:right;margin:.3em 0 1em 1.6em;max-width:48%;height:auto;}
.post-body .aligncenter{display:block;margin-left:auto;margin-right:auto;}
.post-body .alignnone{margin:1.6em 0;}
.post-body .wp-caption{max-width:100%;}
.post-body .wp-caption.alignleft{float:left;margin:.3em 1.6em 1em 0;}
.post-body .wp-caption.alignright{float:right;margin:.3em 0 1em 1.6em;}
.post-body .wp-caption-text{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-muted);margin-top:.4em;}
.post-body::after{content:"";display:table;clear:both;} /* contain floats so the footer doesn't ride up */
@media (max-width:600px){
.post-body .alignleft,.post-body .alignright{float:none;display:block;max-width:100%;margin:1.6em 0;}
}
/* ═══════════════════ Case Study single (single-case_studies.php) ═══════════════════ */
/* Breadcrumb + practice-area eyebrow sit on the dark .post-hero image. */
.cs-hero .crumb{margin-bottom:var(--s-2);color:rgba(255,255,255,.75);}
.cs-hero .crumb a{color:rgba(255,255,255,.75);}
.cs-hero .crumb a:hover{color:#fff;border-bottom-color:#fff;}
.cs-hero .crumb .sep{color:rgba(255,255,255,.4);}
.cs-hero .crumb .here{color:#fff;font-weight:600;}
.cs-hero__eyebrow{font-family:var(--sans);font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--s-2);}
/* Body + supplementary sidebar (the `sidebar` ACF field: client logo, PDF, images). */
.cs-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-8);align-items:start;}
.cs-layout--full{display:block;max-width:820px;margin-inline:auto;}
.cs-layout .cs-body{max-width:none;margin:0;padding:0;}
.cs-aside{padding:0;position:sticky;top:var(--s-8);}
.cs-aside > *{margin:0 0 var(--s-4);}
.cs-aside img{max-width:100%;height:auto;border:1px solid var(--rule);border-radius:4px;}
.cs-aside a{color:var(--green-dark);font-family:var(--sans);font-size:var(--t-small);font-weight:600;}
@media (max-width:900px){
.cs-layout{grid-template-columns:minmax(0,1fr);}
.cs-aside{position:static;border-top:1px solid var(--rule);padding-top:var(--s-6);}
}
/* ═══════════════════ Practice Areas hub (page-practice-areas.php) ═══════════════════ */
/* Breadcrumb (the single-practice template ships its own copy in page-solutions.css;
the hub loads main.css, so it needs its own here). */
.crumb { font-family: var(--sans); font-size: var(--t-small); color: var(--ink-muted); margin-bottom: var(--s-3); }
.crumb a { color: var(--ink-muted); border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.crumb .sep { margin: 0 8px; color: var(--rule); }
.crumb .here { color: var(--green-dark); font-weight: 600; }
/* Skip link — visually hidden until keyboard focus (a11y). */
.skip-link { position: absolute; left: 8px; top: -56px; z-index: 200; background: var(--green-dark); color: #fff; padding: 10px 16px; border-radius: 2px; font-family: var(--sans); font-size: 14px; font-weight: 600; transition: top .2s ease; }
.skip-link:focus { top: 8px; }
/* Hero: mission-first copy beside a human-scale image (no skyline). */
.pa-hero { background: var(--paper); padding: var(--s-6) 0 var(--s-8); border-bottom: 1px solid var(--rule); }
.pa-hero__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .pa-hero__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.pa-hero__title { font-size: var(--t-h1); font-weight: 700; line-height: 1.08; color: var(--ink); }
.pa-hero__title em { font-style: italic; font-weight: 700; color: var(--green-dark); }
@media (max-width: 600px) { .pa-hero__title { font-size: 34px; } }
.pa-hero__lede { margin-top: var(--s-3); }
.pa-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.pa-hero__media { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 24px 60px -28px rgba(15,26,19,0.45); }
.pa-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .pa-hero__media { aspect-ratio: 16 / 9; } }
/* ── Shared hub hero (Practice Areas + Core Services) ──────────────────────
Mirror of the single-page split hero: teal/green text panel on the LEFT, large
image on the RIGHT, panel colour blended into the image at the seam. Rendered by
esi_render_hub_hero(). Full-bleed (sits outside .wrap; the panel pads to --gutter). */
.hubhero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: clamp(440px, 56vh, 600px); background: var(--green-dark); overflow: hidden; }
@media (max-width: 880px) { .hubhero { grid-template-columns: 1fr; min-height: 0; } }
.hubhero__panel { background: linear-gradient(180deg, var(--teal-dark) 0%, var(--green-dark) 78%); display: flex; align-items: center; }
.hubhero__panel-inner { display: flex; flex-direction: column; gap: var(--s-4); max-width: 620px; margin-left: auto; padding: var(--s-8) var(--s-8) var(--s-8) var(--gutter); }
@media (max-width: 880px) { .hubhero__panel-inner { max-width: none; margin-left: 0; padding: var(--s-6) var(--gutter); } }
.hubhero .crumb { padding: 0; }
.hubhero .crumb a { color: rgba(255,255,255,0.72); }
.hubhero .crumb a:hover { color: #fff; }
.hubhero .crumb .sep { color: rgba(255,255,255,0.4); }
.hubhero .crumb .here { color: #fff; font-weight: 700; }
.hubhero__title { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: 0; }
.hubhero__title em { font-style: italic; font-weight: 700; color: var(--gold); }
.hubhero__lede { color: rgba(255,255,255,0.82); margin: 0; max-width: 46ch; }
.hubhero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: var(--s-2); }
.hubhero .btn--ghost { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.hubhero .btn--ghost:hover { color: var(--gold); border-bottom-color: var(--gold); }
.hubhero__media { position: relative; background: var(--green-dark); overflow: hidden; }
.hubhero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .hubhero__media { min-height: 300px; } }
/* Seam: fade the panel green into the image's left edge so the two read as one hero. */
/* The seam carries the SAME vertical panel gradient (so its colour matches the panel
edge at every height), then masks it to fade horizontally into the image. */
.hubhero__seam { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--teal-dark) 0%, var(--green-dark) 78%); -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.55) 8%, transparent 26%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.55) 8%, transparent 26%); }
/* Stacked layout: panel sits above the image, whose bottom is green-dark, so fade that
colour down from the image's top edge. */
@media (max-width: 880px) { .hubhero__seam { background: var(--green-dark); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 8%, transparent 28%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 8%, transparent 28%); } }
/* Core Services hub cards are photo-free by design (abstract methods, and the
imported entries' old thumbnails are off-brand). Styled like the practice-area
"What we deliver" cards: light, bordered, with a green accent title and a gold
top rule — lighter than the image-led Practice Areas hub, but not heavy. */
.cs-hub .pa-card--noimg { background: linear-gradient(180deg, #ffffff 0%, #f6faf5 100%); border: 1px solid var(--rule); border-top: 3px solid var(--gold); }
.cs-hub .pa-card--noimg .pa-card__body { min-height: 200px; gap: var(--s-2); }
.cs-hub .pa-card--noimg .pa-card__title { color: var(--green-dark); }
.cs-hub .pa-card--noimg .pa-card__desc { color: var(--ink-muted); }
.cs-hub .pa-card--noimg .pa-card__cta { color: var(--green-dark); }
.cs-hub .pa-card--noimg:hover { transform: translateY(-4px); border-color: var(--green-dark); border-top-color: var(--gold); background: linear-gradient(180deg, #ffffff 0%, #ecf5eb 100%); box-shadow: 0 16px 34px -20px rgba(15,26,19,0.34); }
/* Oversized ordinal watermark in each card BODY (echoes "Six core services"); fades
downward via a mask so it blends into the card. Lives in the white body area so it
shows on image cards (below the photo) and text cards alike, behind the text. */
.cs-hub .pa-card__body { position: relative; overflow: hidden; }
.cs-hub .pa-card__title, .cs-hub .pa-card__desc, .cs-hub .pa-card__cta { position: relative; z-index: 1; }
.cs-card-num { position: absolute; top: -14px; right: 8px; z-index: 0; font-family: var(--serif); font-weight: 700; font-style: italic; font-size: clamp(88px, 10vw, 140px); line-height: 1; color: var(--green-dark); opacity: 0.09; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 86%); mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 86%); }
.cs-hub .pa-card:hover .cs-card-num { opacity: 0.13; color: var(--gold); transition: opacity .25s ease, color .25s ease; }
/* Card grid: image-led, scannable. Distinct from the homepage text-only .area grid. */
.pa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 980px) { .pa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pa-grid { grid-template-columns: 1fr; } }
.pa-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pa-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -26px rgba(15,26,19,0.42); border-color: var(--green-medium); }
.pa-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-deep); }
.pa-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.pa-card:hover .pa-card__media img { transform: scale(1.04); }
.pa-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); flex: 1 1 auto; }
.pa-card--noimg .pa-card__body { min-height: 200px; }
.pa-card__title { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.pa-card__desc { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.pa-card__cta { margin-top: auto; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); display: inline-flex; align-items: center; gap: 8px; transition: gap .2s ease; }
.pa-card:hover .pa-card__cta { gap: 12px; }
/* National proof band: metrics as support, below the grid (not a hero). */
.pa-proof { background: var(--teal-dark); color: #fff; padding: var(--s-12) 0; position: relative; }
.pa-proof::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px 400px at 0% 0%, rgba(147,134,60,0.18), transparent 60%); }
.pa-proof__inner { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .pa-proof__inner { grid-template-columns: 1fr; gap: var(--s-6); } }
.pa-proof__title { color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 400; max-width: 16ch; }
.pa-proof__title em { font-style: italic; color: var(--gold); font-weight: 700; }
.pa-proof__copy { color: rgba(255,255,255,0.78); max-width: 46ch; margin-top: var(--s-3); }
/* Same count-driven column rule as .stats__grid above; fallback keeps the original 3-up. */
.pa-proof__stats { display: grid; grid-template-columns: repeat(var(--stat-cols, 3), 1fr); gap: var(--s-4); }
@media (max-width: 520px) { .pa-proof__stats { grid-template-columns: 1fr; gap: var(--s-3); } }
.pa-stat { border-left: 2px solid rgba(255,255,255,0.18); padding-left: var(--s-3); }
.pa-stat__num { font-family: var(--serif); font-weight: 700; font-size: clamp(32px, 4vw, 48px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pa-stat__suffix { color: var(--gold); }
.pa-stat__label { font-family: var(--sans); font-size: var(--t-small); color: rgba(255,255,255,0.7); margin-top: var(--s-1); }
/* Keyboard focus + touch target hygiene (WIG + ui-ux-pro-max: visible focus rings,
never rely on hover alone, no 300ms tap delay). CSS motion already respects
prefers-reduced-motion via the global reduce block above. */
.crumb a:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; border-radius: 2px; }
.pa-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pa-card:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }
.pa-card__title { text-wrap: balance; }
.pa-card__desc { text-wrap: pretty; }
/* ═══════════════════════ OUR WORK HUB ═══════════════════════
Filterable Case Studies + Reports grid (page-our-work.php). Reuses .hubhero,
.pa-proof (impact strip), .pa-grid, and .pa-card; the rules below add the impact
4-up, the filter controls, the type eyebrow + meta on cards, numbered pagination,
and the no-results state. Loaded via main.css (the hub is a plain Page). */
/* Impact strip: three cells (the states story moved to the national-footprint map below). */
.ow-impact__stats { grid-template-columns: repeat(var(--stat-cols, 3), 1fr); }
@media (max-width: 640px) { .ow-impact__stats { grid-template-columns: 1fr; gap: var(--s-4); } }
/* National-footprint map: an inline US SVG shading the worked-in states. Light band so the
green reads; state names surface via native tooltips on hover. */
.ow-map { background: var(--paper); }
.ow-map__inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .ow-map__inner { grid-template-columns: 1fr; gap: var(--s-5); } }
.ow-map__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--ink); margin: var(--s-2) 0 0; }
.ow-map__title em { font-style: italic; font-weight: 700; color: var(--green-dark); }
.ow-map__copy { color: var(--ink-muted); margin: var(--s-3) 0 0; max-width: 42ch; }
.ow-map__copy strong { color: var(--green-dark); font-weight: 700; }
.ow-map__svg { width: 100%; height: auto; display: block; }
.ow-map__state { fill: #e5e1d7; stroke: var(--paper); stroke-width: 1.1; transition: fill .2s ease; }
.ow-map__state.is-on { fill: var(--green-medium); }
.ow-map__state.is-on:hover { fill: var(--green-dark); }
/* AJAX swap region: filtering fetches the same URL and replaces this block's contents;
dim it while the request is in flight so the change reads as deliberate, not a flash. */
.ow-results { transition: opacity .18s ease; }
.ow-results.is-loading { opacity: 0.5; pointer-events: none; }
/* Toolbar: a small Type toggle (All / Case studies / Reports) sitting top-right above the
primary Practice-area TAB bar. The tabs never wrap — they scroll horizontally. No result
count and no "clear" — the toggle and tabs simply reflect the current view. */
.ow-toolbar { margin-bottom: var(--s-5); }
.ow-toolbar__top { display: flex; justify-content: flex-end; margin-bottom: var(--s-3); }
.ow-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
.ow-tabs::-webkit-scrollbar { display: none; }
.ow-tab { position: relative; white-space: nowrap; padding: 12px 18px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .18s ease, border-color .18s ease; }
.ow-tab:first-child { padding-left: 2px; }
.ow-tab:hover { color: var(--green-dark); }
.ow-tab.is-active { color: var(--green-dark); border-bottom-color: var(--green-dark); }
.ow-tab:focus-visible { outline: 2px solid var(--green-dark); outline-offset: -3px; border-radius: 2px; }
/* Type: a segmented toggle (All / Case studies / Reports). */
.ow-segment { display: inline-flex; background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 999px; padding: 4px; gap: 2px; }
.ow-segment__opt { font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink-muted); padding: 10px 18px; border-radius: 999px; white-space: nowrap; transition: color .18s ease, background-color .18s ease; }
.ow-segment__opt:hover { color: var(--green-dark); }
.ow-segment__opt.is-active { background: var(--green-dark); color: #fff; }
.ow-segment__opt:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
/* Type: a small segmented toggle tucked to the side, secondary to the practice-area tabs. */
.ow-segment--sm .ow-segment__opt { padding: 7px 13px; font-size: 13px; }
/* Cards: shared .pa-card, plus a type eyebrow and a meta line. */
.ow-card__eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.pa-card__meta,
.ow-card__meta { font-family: var(--sans); font-size: 14px; color: var(--ink-muted); margin-top: -4px; }
.ow-card .pa-card__title { font-size: 20px; }
/* No-image card: a branded gradient media block filling the same 3:2 slot with the reversed
ESI logo centred, so the card keeps its structure and the empty state reads as intentional.
Used for grid cards and the client-side broken-image swap (theme.js). */
.ow-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--green-dark) 0%, var(--teal-dark) 100%); padding: 0 var(--s-5); }
/* Higher specificity than `.pa-card__media img` (the cover rule), which would otherwise stretch
the logo to fill the tile. Keep it a modest, centred mark. */
.ow-ph .ow-ph__logo { width: 58%; max-width: 158px; height: auto; object-fit: contain; opacity: 0.95; }
/* Entrance stagger, capped so a full page never feels slow; motion-safe. */
.ow-grid .ow-card { animation: fadeUp .5s ease both; animation-delay: calc(min(var(--i, 0), 8) * 40ms); }
@media (prefers-reduced-motion: reduce) { .ow-grid .ow-card { animation: none; } }
/* Numbered pagination. */
.ow-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--s-8); }
.ow-pagination .page-numbers { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink-muted); min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--rule); border-radius: 4px; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.ow-pagination a.page-numbers:hover { color: var(--green-dark); border-color: var(--green-medium); }
.ow-pagination .page-numbers.current { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.ow-pagination .page-numbers.dots { border-color: transparent; }
.ow-pagination a.page-numbers:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
/* No results. */
.ow-empty { text-align: center; padding: var(--s-10) var(--gutter); border: 1px dashed var(--rule); border-radius: 6px; background: var(--paper); }
.ow-empty__title { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); margin: 0 0 var(--s-2); }
.ow-empty__copy { color: var(--ink-muted); max-width: 48ch; margin: 0 auto var(--s-4); }
/* Mobile: let the tab bar scroll; keep the Type toggle compact. */
@media (max-width: 600px) {
.ow-segment--sm .ow-segment__opt { padding: 7px 10px; font-size: 12px; }
.ow-tab { padding: 11px 13px; font-size: 13px; }
}
/* Featured projects — a curated, image-forward carousel above the catalog. Cards are taller
and image-dominant, with the title overlaid on the image (hero-style: scrim + text-shadow
for contrast) and the practice area anchored as a pill on the image. Auto-scrolls, pausing
and steering on hover (theme.js); native swipe on touch. */
.ow-featured { background: var(--surface); }
.ow-featured__head { margin-bottom: var(--s-6); max-width: 640px; }
.ow-featured__title { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.ow-featured__title em { font-style: italic; color: var(--green-dark); }
.ow-featured__sub { color: var(--ink-muted); margin: var(--s-2) 0 0; max-width: 54ch; }
.ow-featured__track { display: flex; gap: var(--s-4); list-style: none; margin: 0; padding: 4px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ow-featured__track::-webkit-scrollbar { display: none; }
.ow-featured__track:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 4px; border-radius: 4px; }
/* Steering arrows overlaid on the carousel's left/right edges (semi-transparent). Hovering an
arrow scrolls that way (theme.js); clicking steps one card. */
/* Arrows: shared .carousel-arrow component (light band, so the default disc weight). */
.ow-fcard-wrap { flex: 0 0 clamp(260px, 26vw, 320px); }
.ow-fcard { position: relative; display: block; height: 100%; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--green-dark); box-shadow: 0 12px 30px -20px rgba(15,26,19,0.5); transition: transform .3s ease, box-shadow .3s ease; }
.ow-fcard:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -28px rgba(15,26,19,0.55); }
.ow-fcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ow-fcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ow-fcard:hover .ow-fcard__img { transform: scale(1.05); }
.ow-fcard--noimg { background: linear-gradient(150deg, var(--green-dark) 0%, var(--teal-dark) 100%); }
.ow-fcard__logo { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 66%; max-width: 190px; opacity: 0.9; }
.ow-fcard__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,26,19,0.9) 0%, rgba(15,26,19,0.5) 32%, rgba(15,26,19,0) 58%, rgba(15,26,19,0) 80%, rgba(15,26,19,0.42) 100%); }
/* Practice area, anchored on the image: light gold uppercase with a gold rule (no filled pill).
A lighter gold than the brand token so it reads on varied photos, backed by a strong shadow. */
.ow-fcard__tag { position: absolute; top: 16px; left: 18px; padding-left: 12px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #e6d488; text-shadow: 0 1px 3px rgba(15,26,19,0.95), 0 1px 10px rgba(15,26,19,0.85); }
.ow-fcard__tag::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: #e6d488; box-shadow: 0 0 6px rgba(15,26,19,0.5); }
.ow-fcard__content { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: var(--s-6) var(--s-4) var(--s-4); }
.ow-fcard__title { font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.18; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 2px rgba(15,26,19,0.55), 0 2px 20px rgba(15,26,19,0.5); text-wrap: balance; }
@media (max-width: 600px) {
.ow-fcard-wrap { flex-basis: 72vw; }
}
/* ═══════════════════ TEAM HUB (page-our-people.php) ═══════════════════
The `people` CPT rendered as a directory, grouped by employee_level tier
(Principals lead). Same card DNA as .pa-card, in a portrait (4:5) variant so
the 30 headshots read as one firm. Photo-free brand-panel hero (no stock
cityscape, per the national repositioning). */
/* Hero — reuses the .hubhero split (panel + skyline image), same family as the other
hubs. The image is the Team page Featured Image (wp-admin override) or the bundled
Philadelphia skyline; its built-in green tint blends into the panel at the seam. */
/* Tier sections */
.team-tier { margin-bottom: var(--s-12); }
.team-tier:last-child { margin-bottom: 0; }
.team-tier__title { font-family: var(--serif); font-weight: 700; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.01em; color: var(--green-dark); margin: 0 0 var(--s-6); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }
/* Roster grid: 4-up across all tiers */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
/* Card — same DNA as .pa-card, portrait media */
.team-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -26px rgba(15,26,19,0.42); border-color: var(--green-medium); }
.team-card:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }
.team-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; transition: transform .5s ease; }
.team-card:hover .team-card__media img { transform: scale(1.04); }
.team-card__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(160deg, var(--paper-deep) 0%, #e7e2d6 100%); }
.team-card__ph img { width: 52%; max-width: 150px; height: auto; opacity: 0.5; }
.team-card__body { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3); flex: 1 1 auto; }
.team-card__name { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.team-card__role { font-family: var(--sans); font-size: var(--t-small); line-height: 1.35; color: var(--ink-muted); }
/* Principals: subtle role emphasis (same card size as the other tiers) */
.team-tier--lead .team-card__role { color: var(--green-dark); font-weight: 600; }
/* Careers cross-link */
.team-join { background: var(--paper-deep); border-top: 1px solid var(--rule); padding: var(--s-8) 0; }
.team-join__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.team-join__title { font-family: var(--serif); font-weight: 700; font-size: var(--t-h3); color: var(--green-dark); margin: 0 0 6px; }
.team-join__title em { font-style: italic; color: var(--gold); }
.team-join__copy { font-family: var(--sans); font-size: var(--t-body); color: var(--ink-muted); margin: 0; max-width: 52ch; }
/* ═══════════════════ ABOUT (page-about.php) ═══════════════════
Mission-first firm narrative. Reuses .hubhero (hero), .pa-proof (credibility
strip), and the .team-grid/.team-card leadership components; the rules below
style the thesis statement and the history closer. */
/* Thesis — a two-column statement: the claim (left) sits beside the supporting
copy (right), collapsing to one column on narrow screens. */
.about-thesis__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .about-thesis__inner { grid-template-columns: 1fr; gap: var(--s-4); } }
.about-thesis__statement { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); margin: var(--s-2) 0 0; text-wrap: balance; }
.about-thesis__statement em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.about-thesis__body p { color: var(--ink-muted); margin: 0 0 var(--s-3); max-width: 62ch; }
.about-thesis__body p:last-child { margin-bottom: 0; }
.about-thesis__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4); font-family: var(--sans); font-weight: 600; color: var(--green-dark); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.about-thesis__link:hover { border-bottom-color: var(--green-dark); }
.about-thesis__link span { transition: transform .2s ease; }
.about-thesis__link:hover span { transform: translateX(3px); }
/* Leadership — the Principals strip that cross-links into the Team hub. */
.about-leaders__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.about-leaders__intro { max-width: 640px; }
.about-leaders__title { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: var(--s-1) 0 0; }
.about-leaders__title em { font-style: italic; color: var(--green-dark); }
.about-leaders__copy { color: var(--ink-muted); margin: var(--s-2) 0 0; max-width: 56ch; }
.about-leaders__more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; color: var(--green-dark); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; white-space: nowrap; }
.about-leaders__more:hover { border-bottom-color: var(--green-dark); }
.about-leaders__more span { transition: transform .2s ease; }
.about-leaders__more:hover span { transform: translateX(3px); }
/* Principal role emphasis, matching the Team hub's lead tier. */
.about-leaders__grid .team-card__role { color: var(--green-dark); font-weight: 600; }
/* History — a restrained legacy closer on the deeper paper ground. */
.about-history { background: var(--paper-deep); border-top: 1px solid var(--rule); }
.about-history__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .about-history__inner { grid-template-columns: 1fr; gap: var(--s-4); } }
.about-history__title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; letter-spacing: -0.01em; color: var(--ink); margin: var(--s-1) 0 0; text-wrap: balance; }
.about-history__body p { color: var(--ink-muted); margin: 0 0 var(--s-3); max-width: 62ch; }
.about-history__body p:last-child { margin-bottom: 0; }
/* ═══════════════════ STRATEGIC AFFILIATES (page-affiliates.php) ═══════════════════
A small, curated network: a gradient hero, a full-bleed auto-advancing hero carousel
for the affiliate firms, a photo-led senior-advisor section, and an independence note. */
/* Gradient hero (no photo — deliberately distinct from the shared hub-hero image). */
.affil-hero { position: relative; overflow: hidden; background: linear-gradient(158deg, var(--teal-dark) 0%, var(--green-dark) 72%); color: var(--paper); padding: var(--s-16) 0 var(--s-12); }
.affil-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 380px at 90% 2%, rgba(190,172,77,0.20), transparent 62%); }
.affil-hero__inner { position: relative; }
.affil-hero .crumb, .affil-hero .crumb a { color: rgba(247,245,240,0.72); }
.affil-hero .crumb a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.affil-hero .crumb .sep { color: rgba(247,245,240,0.34); }
.affil-hero .crumb .here { color: var(--gold-bright); }
.affil-hero__title { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 5vw, 58px); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: var(--s-3) 0 0; max-width: 15ch; text-wrap: balance; }
.affil-hero__title em { font-style: italic; color: var(--gold-bright); }
.affil-hero__lede { color: rgba(247,245,240,0.82); margin: var(--s-3) 0 0; max-width: 60ch; }
.affil-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.btn--ghost-inverse { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--ghost-inverse:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
/* Firms section header (on paper), then the full-bleed carousel. */
.affil-firms { padding: var(--s-12) 0 var(--s-16); }
.affil__head { margin-bottom: var(--s-6); max-width: 640px; }
.affil__head .eyebrow { display: block; }
.affil__title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: var(--s-1) 0 0; }
.affil__title em { font-style: italic; color: var(--green-dark); }
.affil-carousel { position: relative; }
.affil-carousel__viewport { overflow: hidden; }
.affil-carousel__track { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.affil-slide { position: relative; flex: 0 0 100%; min-height: 480px; display: flex; align-items: center; background-size: cover; background-position: center; background-color: var(--green-dark); }
.affil-slide__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,26,19,0.9) 0%, rgba(11,26,19,0.62) 46%, rgba(11,26,19,0.25) 100%); }
.affil-slide__inner { position: relative; color: var(--paper); }
.affil-slide__name { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0; max-width: 18ch; text-wrap: balance; }
.affil-slide__desc { color: rgba(247,245,240,0.88); margin: var(--s-3) 0 0; max-width: 50ch; }
.affil-slide__desc p { margin: 0; }
.affil-slide__link { margin-top: var(--s-4); display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; color: var(--gold-bright); text-decoration: none; }
.affil-slide__link span { transition: transform .2s ease; }
.affil-slide__link:hover { color: #fff; }
.affil-slide__link:hover span { transform: translate(2px, -2px); }
.affil-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(11,26,19,0.5); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .2s ease; }
.affil-carousel__nav:hover { background: rgba(11,26,19,0.82); }
.affil-carousel__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.affil-carousel__nav--prev { left: 16px; }
.affil-carousel__nav--next { right: 16px; }
.affil-carousel__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 2; }
.affil-carousel__dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.42); cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease; }
.affil-carousel__dot.is-active { background: #fff; transform: scale(1.25); }
.affil-carousel__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
.affil-slide { min-height: 440px; }
.affil-slide__scrim { background: linear-gradient(180deg, rgba(11,26,19,0.5) 0%, rgba(11,26,19,0.86) 100%); }
.affil-carousel__nav { display: none; }
}
/* Senior advisor: a photo-led card over a scrimmed background asset. */
.affil-advisor { position: relative; overflow: hidden; background-size: cover; background-position: center; background-color: var(--green-dark); color: var(--paper); padding: var(--s-12) 0; }
.affil-advisor__scrim { position: absolute; inset: 0; background: linear-gradient(158deg, rgba(11,42,31,0.93) 0%, rgba(27,86,48,0.85) 100%); }
.affil-advisor__inner { position: relative; }
.affil-advisor__head { margin-bottom: var(--s-6); max-width: 640px; }
.affil-advisor__head .eyebrow { display: block; }
.affil-advisor__title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.12; color: #fff; margin: var(--s-1) 0 0; }
.affil-advisor__title em { font-style: italic; color: var(--gold-bright); }
.affil-advisor__card { display: grid; grid-template-columns: 300px 1fr; background: var(--surface); border-radius: 8px; overflow: hidden; box-shadow: 0 34px 74px -40px rgba(0,0,0,0.6); max-width: 900px; }
@media (max-width: 760px) { .affil-advisor__card { grid-template-columns: 1fr; } }
.affil-advisor__photo { background: var(--paper-deep); }
.affil-advisor__photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: 50% 28%; display: block; }
@media (max-width: 760px) { .affil-advisor__photo img { min-height: 0; aspect-ratio: 16 / 10; } }
.affil-advisor__body { padding: var(--s-6); }
.affil-advisor__name { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--ink); margin: 0; }
.affil-advisor__role { font-family: var(--sans); font-weight: 600; font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin: 5px 0 var(--s-2); }
.affil-advisor__bio { color: var(--ink-muted); }
.affil-advisor__bio p { margin: 0 0 var(--s-2); }
.affil-advisor__bio p:last-child { margin-bottom: 0; }
.affil-note { background: var(--paper-deep); border-top: 1px solid var(--rule); padding: var(--s-6) 0; }
.affil-note p { color: var(--ink-muted); font-size: var(--t-small); max-width: 68ch; margin: 0; }
@media (prefers-reduced-motion: reduce) {
.affil-carousel__track { transition: none; }
}
/* ═══════════════════ CAREERS (page-careers.php) ═══════════════════
Culture-first: hero, who we are, values (with proof), benefits, two apply tracks,
equal-opportunity + a fallback CTA. Reuses hub-hero and pa-proof. */
.careers-sec__head { margin-bottom: var(--s-6); max-width: 640px; }
.careers-sec__head .eyebrow { display: block; }
.careers-sec__title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: var(--s-1) 0 0; }
.careers-sec__title em { font-style: italic; color: var(--green-dark); }
.careers-intro__inner .eyebrow { display: block; margin-bottom: var(--s-2); }
.careers-intro__lead { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0; max-width: 34ch; text-wrap: balance; }
.careers-intro__body { color: var(--ink-muted); margin: var(--s-3) 0 0; max-width: 60ch; }
/* Careers band rhythm. Open Positions moved directly under "Who we are" on 2026-08-03, and
both sat on the page background, so the two ran together as one washed-out block. Open
Positions takes the deeper paper and "Why join ESI" gives it up, which keeps the page
alternating all the way down: page / deep / page / green / deep. */
.careers-positions { background: var(--paper-deep); }
.careers-values-band { background: transparent; }
.careers-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 720px) { .careers-values { grid-template-columns: 1fr; } }
.careers-value { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s-4); }
.careers-value__title { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--green-dark); margin: 0 0 var(--s-1); }
.careers-value__copy { color: var(--ink-muted); margin: 0; }
/* Benefits — reuses .pa-proof (teal ground, inverse text). */
.careers-benefits__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .careers-benefits__inner { grid-template-columns: 1fr; gap: var(--s-4); } }
.careers-benefits__lead .eyebrow { display: block; margin-bottom: var(--s-2); }
.careers-benefits__title { color: #fff; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; margin: 0; max-width: 18ch; }
.careers-benefits__title em { font-style: italic; color: var(--gold); font-weight: 700; }
.careers-benefits__copy { color: rgba(255,255,255,0.78); margin: var(--s-3) 0 0; max-width: 46ch; }
.careers-benefits__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2) var(--s-4); }
@media (max-width: 520px) { .careers-benefits__list { grid-template-columns: 1fr; } }
.careers-benefits__list li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,0.9); font-family: var(--sans); }
.careers-benefits__tick { color: var(--gold); font-weight: 700; }
/* Open-positions list: one ruled row per open job, linking to /careers/{slug}/. Expired
postings are filtered out in esi_open_jobs(); the empty state shows the introduce-yourself note. */
.careers-jobs { list-style: none; margin: 0 0 var(--s-6); padding: 0; border-top: 1px solid var(--rule); }
.careers-job { border-bottom: 1px solid var(--rule); }
.careers-job__link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; text-decoration: none; transition: padding-left .2s ease; }
.careers-job__link:hover { padding-left: 8px; }
.careers-job__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.careers-job__title { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; color: var(--ink); }
.careers-job__link:hover .careers-job__title { color: var(--green-dark); }
.careers-job__meta { font-family: var(--sans); font-size: 14px; color: var(--ink-muted); }
.careers-job__cta { flex: 0 0 auto; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--green-dark); display: inline-flex; align-items: center; gap: 8px; }
.careers-job__cta span { transition: transform .2s ease; }
.careers-job__link:hover .careers-job__cta span { transform: translateX(4px); }
.careers-positions__note, .careers-positions__empty { color: var(--ink-muted); margin: 0 0 var(--s-6); max-width: 60ch; }
.careers-positions__empty { font-size: 17px; }
.careers-positions__note a, .careers-positions__empty a { color: var(--green-dark); border-bottom: 1px solid var(--green-dark); }
.careers-tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 720px) { .careers-tracks { grid-template-columns: 1fr; } }
/* Single-card variant (Internships is the only track left, now that Open Positions is a real
list). MUST come after .careers-tracks: same specificity, so source order decides. Sitting
above it, this modifier lost the column count and the lone card was squeezed into a 2-column
grid capped at 520px, i.e. a ~250px sliver with six-line wrapping. */
.careers-tracks--intern { grid-template-columns: 1fr; max-width: 600px; }
.careers-track { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.careers-track__title { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink); margin: 0; }
.careers-track__copy { color: var(--ink-muted); margin: 0; }
.careers-track__cta { margin-top: auto; padding-top: var(--s-1); display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; color: var(--green-dark); text-decoration: none; word-break: break-word; }
.careers-track__cta:hover { color: var(--gold); }
.careers-close { background: var(--paper-deep); border-top: 1px solid var(--rule); padding: var(--s-12) 0; }
.careers-close__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 780px) { .careers-close__inner { grid-template-columns: 1fr; gap: var(--s-6); } }
.careers-close__title { font-family: var(--serif); font-weight: 700; font-size: var(--t-h3); color: var(--ink); margin: 0 0 var(--s-2); }
.careers-close__eeo p, .careers-close__fallback p { color: var(--ink-muted); margin: 0 0 var(--s-2); max-width: 52ch; }
.careers-close__lead { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--green-dark) !important; margin: 0 0 var(--s-1) !important; }
.careers-close__fallback .btn { margin-top: var(--s-2); }
/* ═══════════════════ TEAM SINGLE (single-people.php) ═══════════════════
A profile, not a blog article: split hero (portrait + identity), then the bio
("Background & Experience"), then a curated "Selected work" strip. */
/* Profile hero */
.person-hero { background: linear-gradient(158deg, var(--teal-dark) 0%, var(--green-dark) 72%); color: var(--paper); position: relative; overflow: hidden; }
.person-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(720px 360px at 88% 6%, rgba(190,172,77,0.20), transparent 62%); }
.person-hero > .wrap { position: relative; }
.person-hero .crumb, .person-hero .crumb a { color: rgba(247,245,240,0.72); }
.person-hero .crumb a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.person-hero .crumb .sep { color: rgba(247,245,240,0.34); }
.person-hero .crumb .here { color: var(--gold-bright); }
.person-hero__grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 820px) { .person-hero__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.person-hero__portrait { aspect-ratio: 4 / 5; max-width: 360px; width: 100%; overflow: hidden; border-radius: 6px; background: var(--paper-deep); border: 3px solid rgba(247,245,240,0.14); box-shadow: 0 34px 74px -30px rgba(0,0,0,0.62); }
@media (max-width: 820px) { .person-hero__portrait { max-width: 260px; } }
.person-hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.person-hero__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(160deg, var(--paper-deep) 0%, #e7e2d6 100%); }
.person-hero__ph img { width: 55%; max-width: 160px; height: auto; opacity: 0.5; }
.person-hero__id { padding-top: var(--s-2); }
.person-hero__name { font-family: var(--serif); font-weight: 700; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0 0 6px; text-wrap: balance; }
.person-hero__role { font-family: var(--sans); font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; color: var(--gold-bright); margin: 0 0 var(--s-4); }
.person-hero__contact { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-6); }
.person-contact { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: var(--t-small); color: var(--paper); border-bottom: 1.5px solid rgba(247,245,240,0.32); padding-bottom: 3px; }
.person-contact:hover { color: #fff; border-bottom-color: var(--gold-bright); }
.person-contact__icon { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 4px; background: rgba(247,245,240,0.16); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; }
/* Breadcrumb sits top-left of the page, above the portrait + identity (like the other pages). */
.person-hero__crumb { margin-bottom: var(--s-6); }
/* Shared section title for the profile body */
.person-section__title { font-family: var(--serif); font-weight: 700; font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--s-6); }
.person-section__title em { font-style: italic; color: var(--green-dark); }
/* Background & Experience (bio) */
/* Body: bio narrative + a credentials rail (expertise, affiliations) */
.person-body { padding: var(--s-12) 0; background: var(--surface); }
.person-body__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-8) var(--s-12); align-items: start; }
.person-body__grid--solo { grid-template-columns: minmax(0, 760px); }
@media (max-width: 900px) { .person-body__grid, .person-body__grid--solo { grid-template-columns: 1fr; gap: var(--s-8); } }
.person-body__main { min-width: 0; }
.person-bio__body { font-family: var(--sans); font-size: var(--t-body); line-height: 1.75; color: var(--ink); max-width: 68ch; }
.person-bio__body p { margin: 0 0 1.1em; }
.person-bio__body a { color: var(--green-dark); border-bottom: 1px solid var(--green-medium); }
.person-bio__body a:hover { color: var(--ink); }
.person-bio__body h2, .person-bio__body h3 { font-family: var(--serif); color: var(--ink); margin: 1.4em 0 .5em; }
/* Credentials rail — elegant, editorial: a gold-ruled label over a hairline-divided
list. No pills, no bullets. On desktop it stays with the reader as they scroll. */
.person-rail { display: flex; flex-direction: column; gap: var(--s-8); }
@media (min-width: 901px) { .person-rail { position: sticky; top: 104px; } }
.person-cred__label { font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 var(--s-2); padding-bottom: 10px; border-bottom: 2px solid var(--gold); }
.person-cred__list { list-style: none; margin: 0; padding: 0; }
.person-cred__item { font-family: var(--sans); font-size: 16px; line-height: 1.4; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--rule); }
.person-cred__item:last-child { border-bottom: none; }
.person-cred__item a { color: var(--green-dark); font-weight: 600; border-bottom: 1px solid var(--green-medium); padding-bottom: 1px; }
.person-cred__item a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.person-cred__item a[target="_blank"]::after { content: " \2197"; font-size: 0.85em; color: var(--gold); }
/* Selected work */
/* Selected work reuses the image-led .pa-card.ow-card (with the .ow-ph logo fallback). */
.person-work { padding: var(--s-12) 0; background: var(--paper-deep); }
.person-work .pa-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .person-work .pa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .person-work .pa-grid { grid-template-columns: 1fr; } }
/* Back link */
.person-back { padding: var(--s-8) 0; background: var(--paper-deep); border-top: 1px solid var(--rule); }
.person-back__link { font-family: var(--sans); font-size: var(--t-small); font-weight: 600; color: var(--green-dark); display: inline-flex; align-items: center; gap: 8px; }
.person-back__link:hover { color: var(--ink); }
/* ═══════════════════ CLIENT LOGOS (Our Work) ═══════════════════
A monochrome logo wall between Featured and All projects (breaks up the image-card
monotony). Logos sit on white chips so their mixed backgrounds normalize; grayscale
by default, full colour on hover (linked logos only). Driven by the `client` CPT. */
section.ow-clients { background: var(--paper-deep); padding: var(--s-8) 0; overflow: hidden; }
.ow-clients__head { margin-bottom: var(--s-6); max-width: 640px; }
.ow-clients__head .eyebrow { display: block; }
.ow-clients__title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: var(--s-1) 0 0; }
.ow-clients__title em { font-style: italic; color: var(--green-dark); }
/* Manual logo carousel: a single horizontally-scrollable track steered by the hover/click edge
arrows (desktop) or native swipe (touch). No auto-scroll (Gina's team asked to stop the drift).
Mirrors the .ow-featured carousel mechanic (theme.js). */
/* Arrows: shared .carousel-arrow component (light band, so the default disc weight). */
.ow-clients__track { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: var(--s-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.ow-clients__track::-webkit-scrollbar { display: none; }
.ow-clients__track:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 4px; border-radius: 4px; }
.ow-clients__item { display: flex; flex: 0 0 auto; }
.ow-clients__logo { display: flex; align-items: center; justify-content: center; width: 188px; height: 92px; padding: var(--s-3); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
.ow-clients__logo img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; transition: transform .25s ease; }
.ow-clients__logo:hover { border-color: var(--green-medium); }
/* The names treatment no longer lives here: Our Work renders the homepage band verbatim
(template-parts/clients-band.php, styles under .clients above). .ow-clients is now the
LOGOS treatment only. */
a.ow-clients__logo:hover img { transform: scale(1.04); }
a.ow-clients__logo:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }
/* Edge arrows — same treatment as the Featured projects carousel. */
/* ═══════════════════════════ News & Insights hub (page-news.php) ═══════════════════════════ */
/* Compact framing on paper; the green featured band sits below it (Ryan, 2026-07-21). */
/* padding-block, NOT `padding: x 0 y`. Every section on this page sits on a `.wrap`, which
supplies the horizontal gutter; the shorthand was resetting that side to 0, so the whole hub
ran edge to edge on any viewport at or below --container (1280px). Above that it looked fine
only because .wrap's auto margins happened to leave space. Reported by Gina on a laptop. */
.nh-hero { padding-block: var(--s-6) var(--s-2); }
.nh-hero .eyebrow { color: var(--gold); }
.nh-hero__title { font-size: clamp(23px, 2.7vw, 32px); line-height: 1.1; max-width: 22ch; margin: var(--s-1) 0 0; color: var(--ink); }
.nh-hero__lede { max-width: 66ch; color: var(--ink-muted); margin: var(--s-1) 0 0; font-size: var(--t-small); }
.nh-hero__title em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.nh-lead__title em { font-style: italic; color: var(--green-dark); font-weight: 700; }
/* Featured band: a full-bleed brand-green anchor (the page's color moment); the lead is
the focus, the Latest rail is scannable and quiet. */
.nh-featureband { background: var(--green-dark); padding: var(--s-8) 0; }
.nh-feature { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--s-6); padding-block: 0; }
.nh-featureband .nh-meta { color: rgba(255,255,255,0.72); }
.nh-featureband .nh-meta .nh-type { color: var(--gold-bright); }
.nh-featureband .nh-lead__title { color: #fff; }
.nh-featureband .nh-lead__dek { color: rgba(255,255,255,0.82); }
.nh-featureband .nh-byline { color: rgba(255,255,255,0.72); }
.nh-featureband .nh-byline b { color: #fff; }
.nh-featureband .nh-lead:hover .nh-lead__title { color: var(--gold-bright); }
.nh-featureband .nh-latest__hd { color: #fff; border-bottom-color: var(--gold-bright); }
.nh-featureband .nh-latest__list li { border-bottom-color: rgba(255,255,255,0.16); }
.nh-featureband .nh-t { color: var(--gold-bright); }
.nh-featureband .nh-t .nh-d { color: rgba(255,255,255,0.6); }
.nh-featureband .nh-latest__list h3 { color: #fff; }
.nh-featureband .nh-latest__list a:hover h3 { color: var(--gold-bright); }
.nh-lead { display: block; }
.nh-lead__img { display: block; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--paper-deep) center / cover no-repeat; }
.nh-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--green-dark) 0%, var(--teal-dark) 100%) !important; padding: 0 var(--s-4); }
.nh-ph__logo { width: 54%; max-width: 150px; height: auto; object-fit: contain; opacity: 0.95; }
.nh-lead__body { display: block; padding-top: var(--s-2); }
.nh-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); }
.nh-meta .nh-type { color: var(--gold); font-weight: 700; }
.nh-lead__title { font-size: clamp(27px, 3.5vw, 40px); line-height: 1.12; margin: var(--s-2) 0 0; }
.nh-lead__dek { display: block; color: var(--ink-muted); margin: var(--s-2) 0 0; max-width: 52ch; font-size: var(--t-body); }
.nh-byline { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-muted); }
.nh-byline b { color: var(--ink); font-weight: 600; }
.nh-lead:hover .nh-lead__title { color: var(--green-dark); }
.nh-latest__hd { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink); padding-bottom: 10px; border-bottom: 2px solid var(--green-dark); }
.nh-latest__list { list-style: none; margin: var(--s-1) 0 0; padding: 0; }
.nh-latest__list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.nh-t { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.nh-t .nh-d { color: var(--ink-muted); font-weight: 600; margin-left: 8px; }
.nh-latest__list h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.35; margin: 6px 0 0; color: var(--ink); }
.nh-latest__list a:hover h3 { color: var(--green-dark); }
/* Controls: underline type-tabs (never pills) + topic select, sticky under the 76px header. */
.nh-controls { position: sticky; top: 76px; z-index: 6; background: var(--paper); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding-block: var(--s-2); border-bottom: 1px solid var(--rule); }
.nh-tabs { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.nh-tabs::-webkit-scrollbar { display: none; }
.nh-tab { white-space: nowrap; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink-muted); padding: 10px 8px; position: relative; }
.nh-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--s-2)); height: 2px; background: transparent; }
.nh-tab.is-on { color: var(--ink); }
.nh-tab.is-on::after { background: var(--green-dark); }
.nh-tab:hover { color: var(--ink); }
.nh-topic { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 14px; }
.nh-topic select { font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; padding: 8px 12px; }
/* Body: essays (left) + firm news/press (right); collapses to one column when filtered. */
.nh-body { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-8); padding-block: var(--s-6) 0; }
.nh-body--full { grid-template-columns: 1fr; }
.nh-stream { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); }
.nh-stream--3 { grid-template-columns: repeat(3, 1fr); }
/* Flex column + equal-height grid cells so the byline pins to the card bottom and lines up
across a row regardless of title/dek length. */
.nh-card { display: flex; flex-direction: column; height: 100%; }
.nh-card__img { display: block; aspect-ratio: 3 / 2; border-radius: 4px; margin-bottom: var(--s-2); background: var(--paper-deep) center / cover no-repeat; }
.nh-card__title { font-size: var(--t-h3); line-height: 1.2; margin: 10px 0 0; }
.nh-card__dek { color: var(--ink-muted); font-size: var(--t-small); margin: 8px 0 0; }
.nh-card .nh-byline { margin-top: auto; padding-top: 10px; font-size: 13px; }
/* Byline author link (to the team page) + the news-hero back links + the team "More from" link. */
.nh-author { color: inherit; border-bottom: 1px solid currentColor; }
.nh-author:hover { color: var(--green-dark); }
.nh-featureband .nh-author:hover { color: var(--gold-bright); }
.nh-hero__back { color: var(--green-dark); font-weight: 600; }
.nh-hero__back:hover { color: var(--gold); }
.person-insights { margin: var(--s-4) 0 0; }
.person-insights__link { font-family: var(--sans); font-weight: 600; color: var(--green-dark); border-bottom: 1px solid var(--green-dark); padding-bottom: 2px; }
.person-insights__link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.nh-card:hover .nh-card__title { color: var(--green-dark); }
.nh-more { display: inline-block; margin-top: var(--s-6); font-weight: 600; color: var(--green-dark); }
.nh-more:hover { color: var(--gold); }
.nh-aside__hd { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding-bottom: 10px; border-bottom: 2px solid var(--gold); }
.nh-feed { list-style: none; margin: 0; padding: 0; }
.nh-feed li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.nh-feed h4 { font-family: var(--sans); font-size: 15.5px; font-weight: 600; line-height: 1.4; margin: 6px 0 0; color: var(--ink); }
.nh-feed a:hover h4 { color: var(--green-dark); }
.nh-aside__all { display: inline-block; margin-top: var(--s-2); font-size: 14px; font-weight: 600; color: var(--green-dark); }
.nh-pager { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-8); font-weight: 600; }
.nh-pager__link { color: var(--green-dark); }
.nh-pager__link:hover { color: var(--gold); }
.nh-pager__count { color: var(--ink-muted); font-weight: 400; font-size: var(--t-small); }
.nh-empty { color: var(--ink-muted); padding: var(--s-6) 0; }
.nh-empty a { color: var(--green-dark); }
/* Newsletter: a first-class brand-green moment (serving subscribers is this page's job). */
/* Teal-dark (a brand primary) — deliberately NOT green, so it does not blur into the green footer. */
.nh-signup { background: var(--teal-dark); color: #f2f6f7; margin-top: var(--s-12); }
/* minmax(0, …) NOT plain fr. An `fr` track has an `auto` minimum, so a grid item that cannot
shrink — Constant Contact's form sets its own widths — pushes the track wider than the
container instead of wrapping. That is what sent the whole band off the right of the screen
on mobile: the gutter was there, the grid was simply wider than the page. */
.nh-signup__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-block: var(--s-6); }
.nh-signup .eyebrow { color: #bcd6de; }
.nh-signup__title { color: #fff; font-size: var(--t-h2); line-height: 1.15; margin: 10px 0 0; max-width: 18ch; }
.nh-signup__lead p { color: #d4e4e9; margin: var(--s-2) 0 0; max-width: 46ch; }
.nh-form { display: flex; gap: 10px; flex-wrap: wrap; }
.nh-form:not(.nh-form--inline) input { flex: 1; min-width: 220px; font-family: var(--sans); font-size: 16px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); color: #fff; border-radius: 2px; }
.nh-form:not(.nh-form--inline) input::placeholder { color: #b3ccd3; }
/* Match the site's primary CTA on dark (see .cta-band .btn--primary): gold-bright + ink. */
.nh-signup .btn--primary { background: var(--gold-bright); color: var(--ink); }
.nh-signup .btn--primary:hover { background: #fff; }
.nh-form__fine { color: #b3ccd3; font-size: 13px; margin-top: var(--s-2); max-width: 46ch; }
/* Constant Contact inline sign-up form, embedded in the band.
.nh-form is a flex row built for the old single button; the embed is a block of its own. */
.nh-form--inline { display: block; }
/* The host div is empty until the widget script renders into it. Reserving a box does two
jobs: it stops the form shoving the page down when it appears (CLS), and it gives the
IntersectionObserver that lazy-loads the script something to observe — a 0x0 target is
never reported as intersecting, so without this the script never loaded at all. */
.nh-form--inline .ctct-inline-form { display: block; width: 100%; min-height: 253px; }
/* Constant Contact renders its own markup into that div. It ships styled for a LIGHT page —
near-black labels, near-black consent text, a red asterisk — none of which survives on the
teal band. These rules bring it onto the brand palette. Class names are CC's; they are stable
across their widget but scoped under .nh-signup so nothing here leaks if the form moves.
The button and field fills Ryan set in the CC designer already match, and are pinned here so
the two cannot drift. */
/* CC injects its stylesheet WHEN THE WIDGET LOADS, i.e. after main.css, so at equal
specificity their colours win the cascade. Hence !important on colour only — the
properties they actually contest. Everything else lands normally. */
.nh-signup .ctct-form-defaults { background: transparent !important; }
.nh-signup .ctct-form-label,
.nh-signup .ctct-form-defaults label { color: #d4e4e9 !important; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
/* The required marker is a red ::before by default, which is the one alarm colour on a band
that is otherwise entirely calm. Gold reads as emphasis rather than error. */
.nh-signup .ctct-form-required::before { color: var(--gold-bright) !important; }
.nh-signup .ctct-form-element {
font-family: var(--sans); font-size: 16px; padding: 14px 16px;
border: 1px solid rgba(255,255,255,0.35); border-radius: 2px;
background: #fff; color: var(--ink);
}
.nh-signup .ctct-form-element:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.nh-signup .ctct-form-button {
font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
padding: 14px 22px; border-radius: 2px;
background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink);
transition: background .2s ease;
}
.nh-signup .ctct-form-button:hover { background: #fff; border-color: #fff; }
/* The consent paragraph is compliance text: keep it, quiet it, and make it legible. */
/* Two different paragraphs, easy to confuse: .ctct-gdpr-text is the CONSENT line under the
fields, .ctct-form-text is the message shown after a successful submit. Both need lifting off
near-black, and styling only the latter leaves the visible one black — which is exactly the
trap this comment exists to stop the next person falling into.
The narrow wrap was never CC's doing either: `.nh-signup p { max-width: 46ch }` above was
catching these as well as the lead copy, so that rule is now scoped to .nh-signup__lead. */
.nh-signup .ctct-gdpr-text,
.nh-signup .ctct-gdpr-text *,
.nh-signup .ctct-form-text { color: #d4e4e9 !important; font-size: 12px !important; line-height: 1.55 !important; }
.nh-signup .ctct-gdpr-text { margin-top: 8px; }
.nh-signup .ctct-gdpr-text a { text-decoration: underline; }
/* CC insets its whole form 24px inside the container. That pushed the first field label 17px
below the eyebrow beside it, and held the fields off both edges of their column. Zeroing it
lets the form start level with the copy and fill the column. */
.nh-signup .ctct-form-defaults { padding: 0 !important; }
/* Hard containment. The widget sets its own widths, and on a narrow viewport that pushed the
fields, the button and the consent line past the right edge of the screen. Nothing it renders
is allowed to be wider than the column it sits in. */
.nh-signup .ctct-inline-form,
.nh-signup .ctct-form-container,
.nh-signup .ctct-form-defaults,
.nh-signup .ctct-form-custom,
.nh-signup .ctct-form-field,
.nh-signup .ctct-form-element,
.nh-signup .ctct-gdpr-text,
.nh-signup .ctct-form-button {
max-width: 100% !important; width: 100% !important; box-sizing: border-box !important;
}
.nh-signup .ctct-form-text a { color: #d4e4e9 !important; text-decoration: underline; }
/* Success and error states, which only appear after a submit and would otherwise be
near-black-on-teal at the one moment the reader most needs to read them. */
.nh-signup .ctct-form-success { color: #d4e4e9 !important; }
.nh-signup .ctct-form-header { color: #fff !important; font-family: var(--serif); font-size: var(--t-h2); line-height: 1.15; }
.nh-signup .ctct-form-errorMessage { color: #ffd9d4 !important; font-size: 13px; }
@media (max-width: 900px) {
.nh-feature { grid-template-columns: 1fr; gap: var(--s-4); }
.nh-body { grid-template-columns: 1fr; gap: var(--s-6); }
.nh-stream--3 { grid-template-columns: 1fr 1fr; }
/* padding-block, NOT the `padding: x 0` shorthand this used to use: that set the horizontal
padding to 0 and wiped out the gutter `.wrap` provides, so the whole band ran edge to edge
and off the right of the screen on mobile. Same failure as the .wrap.band bug found in the
July mobile audit — a shorthand quietly resetting a side it was not meant to touch. */
.nh-signup__in { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-6); }
}
@media (max-width: 600px) {
.nh-stream, .nh-stream--3 { grid-template-columns: 1fr; }
}
/* ═══════════════════ Present Value single (template-parts/single-present-value.php) ═══════════════════ */
.pv-head { max-width: 760px; margin: 0 auto; padding: var(--s-8) var(--gutter) 0; }
.pv-head__meta { display: flex; align-items: center; gap: 12px; }
.pv-head__topic { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); }
.pv-head__title { font-size: clamp(30px, 4vw, 46px); line-height: 1.14; margin: var(--s-2) 0 0; }
.pv-head__byline { margin-top: var(--s-3); color: var(--ink-muted); font-size: var(--t-small); }
.pv-head__byline b { color: var(--ink); font-weight: 600; }
.pv-hero { margin: var(--s-6) auto 0; }
.pv-hero img { width: 100%; height: auto; max-height: 540px; object-fit: cover; border-radius: 4px; display: block; }
.pv-single .post-body { padding-top: var(--s-6); }
.pv-related { border-top: 1px solid var(--rule); padding-block: var(--s-8); }
.pv-related__hd { font-size: var(--t-h2); margin: 0 0 var(--s-4); }
.pv-related__hd em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.pv-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-4); }
@media (max-width: 720px) { .pv-related__grid { grid-template-columns: 1fr; } }
/* ═══════════════════ Contact page (page-contact-us.php) + shared form ═══════════════════ */
/* Honeypot: kept in the DOM (bots fill it) but out of sight + out of the a11y tree. */
.esi-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Contact hero uses the shared split hub-hero (.hubhero: accent copy panel + image). */
/* Aside office block + a compact embedded map in the right rail. */
.contact-office { margin-bottom: var(--s-6); }
.contact-office__addr { font-style: normal; color: var(--ink-muted); line-height: 1.55; font-size: var(--t-small); }
.contact-office__dir { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--green-dark); border-bottom: 1px solid var(--green-dark); padding-bottom: 2px; }
.contact-office__dir:hover { color: var(--gold); border-bottom-color: var(--gold); }
.contact-map { margin-top: var(--s-3); aspect-ratio: 3 / 2; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--paper-deep); }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Social icons: brand-colored glyph in a ring; the ring fills with the brand color on hover. */
.contact-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.esi-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.esi-social svg { width: 18px; height: 18px; display: block; }
.esi-social:hover { transform: translateY(-2px); color: #fff; }
.esi-social.is-linkedin { color: #0A66C2; } .esi-social.is-linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.esi-social.is-x { color: #0f0f0f; } .esi-social.is-x:hover { background: #0f0f0f; border-color: #0f0f0f; }
.esi-social.is-instagram { color: #E4405F; } .esi-social.is-instagram:hover { background: #E4405F; border-color: #E4405F; }
.esi-social.is-facebook { color: #1877F2; } .esi-social.is-facebook:hover { background: #1877F2; border-color: #1877F2; }
.esi-social.is-youtube { color: #FF0000; } .esi-social.is-youtube:hover { background: #FF0000; border-color: #FF0000; }
/* Required-field markers on the shared form. */
.req { color: var(--red-dark); font-weight: 700; }
.modal-form__reqnote { font-size: 12px; color: var(--ink-muted); margin: calc(-1 * var(--s-1)) 0 0; }
.modal-form__reqnote .req { margin-right: 3px; }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-8); align-items: start; padding-top: var(--s-6); padding-bottom: var(--s-12); }
.contact-grid__title, .contact-aside__title { font-size: var(--t-h3); margin: 0 0 var(--s-3); }
.contact-grid__main { min-width: 0; }
.contact-aside { min-width: 0; }
.contact-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.contact-aside__list li { display: flex; flex-direction: column; gap: 3px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.contact-aside__list li:last-child { border-bottom: 0; }
.contact-aside__label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.contact-aside__list a { color: var(--green-dark); }
.contact-aside__list a:hover { color: var(--gold); }
/* Status banners (no-JS redirect) + inline JS feedback. */
.contact-note { padding: 14px 18px; border-radius: 4px; margin: 0 0 var(--s-4); font-size: var(--t-small); }
.contact-note--ok { background: #eef6ef; border: 1px solid var(--green-medium); color: var(--green-dark); }
.contact-note--err { background: #fbeeee; border: 1px solid var(--red-dark); color: var(--red-dark); }
.contact-note--err a { color: inherit; text-decoration: underline; }
.esi-contact-thanks { font-size: var(--t-body); line-height: 1.6; color: var(--green-dark); background: #eef6ef; border: 1px solid var(--green-medium); border-radius: 4px; padding: 18px 20px; }
.esi-contact-err { font-size: var(--t-small); color: var(--red-dark); background: #fbeeee; border: 1px solid var(--red-dark); border-radius: 4px; padding: 12px 16px; margin: 0 0 var(--s-2); }
@media (max-width: 820px) {
.contact-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
/* Contact aside: office card (grid-ready for the national expansion) + purpose-split routes. */
.contact-offices { margin-bottom: var(--s-6); }
.office-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
.office-card { border: 1px solid var(--rule); border-top: 3px solid var(--green-dark); border-radius: 4px; padding: var(--s-3) var(--s-3) var(--s-4); background: var(--surface); }
.office-card__city { font-family: var(--serif); font-size: 20px; margin: 0 0 8px; color: var(--ink); }
.office-card__addr { font-style: normal; color: var(--ink-muted); line-height: 1.5; font-size: var(--t-small); }
.office-card__phone { display: block; margin-top: 8px; color: var(--green-dark); font-weight: 600; }
.office-card__phone:hover { color: var(--gold); }
.office-card__dir { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--green-dark); border-bottom: 1px solid var(--green-dark); padding-bottom: 2px; }
.office-card__dir:hover { color: var(--gold); border-bottom-color: var(--gold); }
.contact-routes__list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.contact-routes__list li { display: flex; flex-direction: column; gap: 3px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.contact-routes__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-routes__list a { color: var(--green-dark); }
.contact-routes__list a:hover { color: var(--gold); }
.contact-routes__cross { font-size: var(--t-small); color: var(--ink-muted); display: flex; gap: 10px; align-items: center; }
.contact-routes__cross a { color: var(--green-dark); font-weight: 600; }
.contact-routes__cross a:hover { color: var(--gold); }
/* ═══════════════════════════ Site search + 404 ═══════════════════════════ */
/* Screen-reader-only utility (labels for the search inputs). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Header search toggle (magnifier icon), between the nav and the CTA. */
.nav__search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 50%; margin-left: var(--s-2); transition: background .18s ease, color .18s ease; }
.nav__search-toggle:hover { color: var(--green-dark); background: var(--paper-deep); }
.nav__search-toggle:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
@media (max-width: 880px) { .nav__search-toggle { display: none; } }
/* Drop-down search panel under the nav row. */
.nav__search-panel { border-top: 1px solid var(--rule); background: var(--paper); opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.nav__search-panel.is-open { opacity: 1; transform: none; }
.site-search-form { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--gutter); }
.site-search-form__icon { display: inline-flex; color: var(--ink-muted); }
.site-search-input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 18px; color: var(--ink); background: transparent; border: 0; padding: 10px 0; }
.site-search-input:focus { outline: none; }
.site-search-input::placeholder { color: var(--ink-muted); }
.site-search-submit { flex: 0 0 auto; }
/* Mobile-menu search (top of the hamburger overlay). */
.mobile-menu__search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule); border-radius: 4px; padding: 4px 4px 4px 14px; background: var(--surface); margin-bottom: var(--s-4); }
.mobile-menu__search-input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 16px; border: 0; background: transparent; padding: 10px 0; color: var(--ink); }
.mobile-menu__search-input:focus { outline: none; }
.mobile-menu__search-submit { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: var(--green-dark); color: #fff; border-radius: 3px; cursor: pointer; }
/* Search results page. */
.search-hero,
.arch-head { padding: var(--s-8) var(--gutter) var(--s-4); }
.search-hero__title,
.arch-head__title { font-size: var(--t-h1); line-height: 1.08; margin: var(--s-2) 0 0; }
.search-hero__title em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.search-hero__count,
.arch-head__count { color: var(--ink-muted); margin: var(--s-2) 0 0; font-size: var(--t-small); }
/* Term descriptions are editor-authored and often absent; this only styles the case where
ESI has written one. Reading measure, so a long one does not run the full container. */
.arch-head__desc { margin: var(--s-3) 0 0; max-width: 36rem; color: var(--ink-muted); }
.search-hero__form { display: flex; gap: 10px; margin-top: var(--s-4); max-width: 620px; }
.search-hero__form input[type="search"] { flex: 1; min-width: 0; font-family: var(--sans); font-size: 16px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); color: var(--ink); }
.search-hero__form input[type="search"]:focus { outline: none; border-color: var(--green-dark); }
.search-tabs { display: flex; gap: var(--s-3); flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 0; }
.search-tab { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink-muted); padding: 10px 2px; position: relative; }
.search-tab.is-on { color: var(--ink); }
.search-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green-dark); }
.search-tab:hover { color: var(--ink); }
.search-tab__n { font-size: 12px; color: var(--ink-muted); font-weight: 700; margin-left: 2px; }
.search-results { padding-top: var(--s-6); padding-bottom: var(--s-12); }
.search-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-4); }
.search-card { display: flex; flex-direction: column; height: 100%; }
.search-card__media { display: block; aspect-ratio: 3 / 2; border-radius: 4px; margin-bottom: var(--s-2); background: var(--paper-deep) center / cover no-repeat; }
.search-card__media--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--green-dark), var(--teal-dark)); }
.search-card__ph { width: 52%; max-width: 140px; opacity: 0.95; }
.search-card__type { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.search-card__title { font-size: var(--t-h3); line-height: 1.2; margin: 6px 0 0; }
.search-card__excerpt { color: var(--ink-muted); font-size: var(--t-small); margin: 8px 0 0; }
.search-card:hover .search-card__title { color: var(--green-dark); }
.search-pager { margin-top: var(--s-8); }
/* Search empty state + 404 (shared centered treatment). */
.search-empty { max-width: 640px; padding: var(--s-6) 0 var(--s-8); }
.search-empty__title { font-size: var(--t-h2); margin: 0; }
.search-empty__copy { color: var(--ink-muted); margin: var(--s-2) 0 var(--s-4); }
.search-empty__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.search-empty__links a { color: var(--green-dark); font-weight: 600; }
.search-empty__links a:hover { color: var(--gold); }
.error-404 { max-width: 720px; padding: var(--s-12) var(--gutter); }
.error-404__title { font-size: var(--t-display); line-height: 1.05; margin: var(--s-2) 0 0; }
.error-404__title em { font-style: italic; color: var(--green-dark); font-weight: 700; }
.error-404__lede { margin: var(--s-3) 0 var(--s-6); }
.error-404__search { display: flex; gap: 10px; max-width: 560px; }
.error-404__search input[type="search"] { flex: 1; min-width: 0; font-family: var(--sans); font-size: 16px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); color: var(--ink); }
.error-404__search input[type="search"]:focus { outline: none; border-color: var(--green-dark); }
.error-404__actions { margin-top: var(--s-4); }
.error-404__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.error-404__links a { color: var(--green-dark); font-weight: 600; }
.error-404__links a:hover { color: var(--gold); }
@media (max-width: 900px) { .search-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .search-grid { grid-template-columns: 1fr; } }
/* Live search typeahead dropdown (attached under any [data-suggest] search form). */
.has-suggest { position: relative; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--rule); border-radius: 0 0 6px 6px; box-shadow: 0 14px 34px rgba(15,26,19,0.14); max-height: 70vh; overflow-y: auto; }
.suggest__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.suggest__item:hover, .suggest__item.is-active { background: var(--paper-deep); }
.suggest__type { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.suggest__title { font-size: 15px; color: var(--ink); line-height: 1.3; }
.suggest__item:hover .suggest__title, .suggest__item.is-active .suggest__title { color: var(--green-dark); }
.suggest__all { display: block; padding: 12px 16px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--green-dark); background: var(--paper); }
.suggest__all:hover, .suggest__all.is-active { background: var(--green-dark); color: #fff; }
/* On the header panel, align the dropdown with the input (skip the icon/submit padding). */
.mobile-menu__search .suggest { border-radius: 6px; margin-top: 4px; }
/* ═══════════════════ LEGAL PAGES (Privacy, Terms) — page-legal.php ═══════════════════ */
/* Block-direction only. This element also carries .wrap, and the shorthand was overriding
.wrap's horizontal gutter to 0 — the same failure just fixed on the newsletter band. */
/* ── Generic page template (page.php) ─────────────────────────────────────────────
For one-off pages built in the block editor: a single report landing page, a page carrying an
interactive embed. Body copy sits in a readable measure; blocks marked wide or full width in
the editor break out of it, which is what a Tableau or video embed needs. */
.page-body { padding: var(--s-8) 0 var(--s-16); }
/* The reading measure lives on the CHILDREN, not the container. Capping .page-prose itself means
a wide block can never exceed it: min(1100px, 100%) resolves to 100% of an already-narrow
parent, so alignwide silently does nothing. Measured 2026-08-25 with a Tableau embed that came
out exactly as wide as the body text. */
.page-prose { max-width: none; }
/* A FIXED unit, not ch. `ch` is relative to each element's own font size, so with the measure on
the children a 20px heading got a visibly wider column than a 17px paragraph and the left edge
looked ragged. 36rem matches the 68ch the body copy was already using.
Centred, matching the current site: the TEXT stays left-aligned, the COLUMN sits in the middle.
Left-aligning a narrow column inside a wide container leaves it stranded against one edge. */
.page-prose > * { max-width: 36rem; margin-inline: auto; }
.page-prose > * + * { margin-top: var(--s-3); }
.page-prose h2 { font-size: clamp(22px, 2.4vw, 28px); color: var(--green-dark); margin-top: var(--s-8); }
.page-prose h2:first-child { margin-top: 0; }
.page-prose h3 { font-size: 20px; margin-top: var(--s-6); }
.page-prose p, .page-prose li { color: var(--ink); line-height: 1.7; font-size: 17px; }
.page-prose ul, .page-prose ol { padding-left: var(--s-3); display: flex; flex-direction: column; gap: 8px; }
.page-prose a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.page-prose a:hover { color: var(--green-medium); }
.page-prose blockquote { border-left: 3px solid var(--gold); padding-left: var(--s-3); font-style: italic; color: var(--ink-muted); }
.page-prose img, .page-prose figure { max-width: 100%; height: auto; }
.page-prose figcaption { font-size: 14px; color: var(--ink-muted); margin-top: var(--s-1); }
.page-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.page-prose th, .page-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--paper-deep); vertical-align: top; }
/* Wide and full-width blocks escape the reading measure. An interactive embed at 68ch is
unusable, and this is the mechanism the block editor already gives editors for it. */
.page-prose > .alignwide { max-width: min(1100px, 100%); width: 100%; }
/* Full width means edge to edge, which requires escaping the centred .wrap container, not just
removing the reading measure. calc(50% - 50vw) pulls each side out to the viewport. */
.page-prose > .alignfull {
max-width: 100vw; width: 100vw;
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* 100vw counts the scrollbar; the visible area does not. On a long page that is a permanent
~15px of horizontal scroll, and "no horizontal scroll anywhere" is a standard this site already
holds (docs/mobile-audit.md). `clip` rather than `hidden`: hidden makes body a scroll container
and breaks the sticky header, clip does not. Scoped to pages using the generic template, so
nothing else on the site changes. */
body.page:has(.page-prose > .alignfull) { overflow-x: clip; }
/* Downloads rail on a flexible page (page.php). Reuses .report-rail wholesale — same panel, same
gold top rule — and only adds what a LIST of files needs that a single report PDF did not. */
.page-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
/* A row per file: cover, label, arrow. Not the solid green button .report-rail__cta uses — that one
is a single CTA with nothing to compare itself against, and three of them stacked would be a wall
of green competing with the page. Here the covers carry the recognition and the row stays quiet. */
.page-rail__file {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2);
padding: 10px; min-height: 44px;
background: var(--surface); border: 1px solid var(--rule);
color: var(--ink); text-decoration: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.page-rail__file:hover { border-color: var(--green-dark); box-shadow: 0 6px 18px -12px rgba(15,26,19,0.55); }
.page-rail__file:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
/* `contain`, not `cover`. These three are not a uniform set: two are portrait document covers at
902x1192 and the third is a landscape slide from the deck at 1920x1050. Cropping them all to one
portrait tile would cut the slide down to whatever happened to be in its middle. Contain keeps
each recognisable and lets the tile do the aligning instead. */
.page-rail__thumb {
width: 52px; height: 68px; object-fit: contain; display: block;
background: #fff; border: 1px solid var(--rule);
}
.page-rail__label { font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.3; }
.page-rail__file .arrow { color: var(--green-dark); }
@media (prefers-reduced-motion: reduce) { .page-rail__file { transition: none; } }
/* Inside the grid the prose is already in a column, so it owns the whole of it: the 36rem measure
would narrow it a second time and strand it. */
.report-layout__main.page-prose > * { max-width: none; margin-inline: 0; }
/* Wide blocks reclaim the rail's column: the full container, and no further. */
.report-layout__main.page-prose > .alignwide {
max-width: none; width: auto; margin-left: 0;
margin-right: calc(-1 * (var(--rail-w) + var(--s-8)));
}
/* Full width still means edge to edge, rail or not. `calc(50% - 50vw)` centres a 100vw box on its
CONTAINER's centre, which reaches the viewport edges only when that container is itself centred.
With a rail beside it the main column is not: its centre sits left of the viewport's by half the
rail column plus half the gap. Adding that back re-centres the box, and the rest of the formula
is the site's existing one, so this behaves identically to a full-width block on any other page.
This is about content, not appearance. The Tableau visualisation on the New Hampshire page is
drawn at 1300px and CLIPS its data table at anything narrower: confined to the 644px column it
lost the entire value side of Town Characteristics. */
.report-layout__main.page-prose > .alignfull {
width: 100vw; max-width: 100vw;
margin-left: calc(50% - 50vw + (var(--rail-w) + var(--s-8)) / 2);
margin-right: 0;
}
/* Static, not sticky. A report post's rail follows a long read so the PDF stays reachable; here it
is a short block of files beside the opening, and a sticky one would travel down the page and sit
on top of a full-width embed further along. */
.report-layout > .page-rail { position: static; }
@media (max-width: 900px) {
/* One column: there is no rail column to reclaim, and no offset to correct for either, so both
revert to the plain behaviour. Leaving the correction in would push full-width blocks right by
half a rail that is no longer beside them. */
.report-layout__main.page-prose > .alignwide { margin-right: 0; }
.report-layout__main.page-prose > .alignfull { margin-left: calc(50% - 50vw); }
}
/* Embeds: never let one push the page sideways, and give iframes a sane default height so a
Tableau viz pasted without one is still usable rather than 150px tall. */
.page-prose iframe { max-width: 100%; border: 0; }
.page-prose .wp-block-embed iframe,
.page-prose .wp-block-embed__wrapper iframe { width: 100%; }
.page-prose .wp-block-embed { overflow-x: auto; }
/* Sized to the visualisation's OWN dimensions so it renders whole, with no scrollbars inside the
embed and no dead space beside it.
Measured 2026-08-25 by loading the viz directly: its tab-dashboard element is 1300 x 2300, plus
roughly 50px of Tableau toolbar. NOT 1703 x 2740 — that was the old site's CONTAINER, which was
wider than the chart, which is exactly why the chart sat left-aligned there with empty space to
its right. Sizing the frame to the container reproduced that fault. */
.page-prose iframe[src*="tableau"] { width: 100%; aspect-ratio: 1300 / 2350; }
/* Centre it. The wrapper is full-bleed, but the visualisation has a natural width of 1703px and
does not stretch beyond it: on a wider viewport it renders left-aligned with dead space to the
right, which reads as broken rather than as full width. Capping at the natural width and
centring keeps it whole and deliberate. */
.page-prose > .alignfull iframe[src*="tableau"] {
display: block; max-width: 1300px; margin-inline: auto;
}
/* Below the viz's own width it cannot render at full size, so give it a tall fixed frame and let
Tableau handle the fit rather than squeezing it to the ratio. */
@media (max-width: 900px) {
.page-prose iframe[src*="tableau"] { aspect-ratio: auto; height: 900px; }
}
/* The hero gradient for pages with no featured image. Uses the same brand gradient as the Our
Work placeholders. Lighter scrim than .post-hero, which is darkening a photograph. */
.post-hero--gradient { background: linear-gradient(150deg, var(--green-dark) 0%, var(--teal-dark) 100%); }
.post-hero--gradient::before { background: linear-gradient(180deg, rgba(15,26,19,.10), rgba(15,26,19,.28)); }
.legal-hero { padding-block: var(--s-12) var(--s-6); border-bottom: 1px solid var(--paper-deep); }
.legal-hero__title { font-size: clamp(32px, 4vw, 48px); margin-top: var(--s-2); max-width: 20ch; }
.legal-hero__updated { margin-top: var(--s-2); color: var(--ink-muted); font-size: 15px; }
.legal-body { padding: var(--s-8) 0 var(--s-16); }
.legal-body--toc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.legal-toc { position: sticky; top: 96px; font-size: 14px; }
.legal-toc__title { font-family: var(--sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: var(--s-2); }
.legal-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--paper-deep); }
.legal-toc a { color: var(--ink-muted); text-decoration: none; display: block; padding-left: var(--s-2); margin-left: -2px; border-left: 2px solid transparent; line-height: 1.35; }
.legal-toc a:hover { color: var(--green-dark); border-left-color: var(--green-dark); }
.legal-prose { max-width: 68ch; }
/* An embedded policy renders in its own iframe with its own internal layout and wide tables,
so the 68ch prose measure squeezes it into half the page and leaves the rest empty. The
readability constraint is right for prose we control and wrong for content we do not. */
.legal-prose--embed { max-width: none; }
.legal-prose--embed iframe { width: 100%; border: 0; display: block; }
/* An embedded policy renders no hero at all, so the body carries the space that would
otherwise sit under one. */
.legal-body--embed { padding-top: var(--s-12); }
.legal-body--toc .legal-prose { max-width: 72ch; }
.legal-prose > * + * { margin-top: var(--s-3); }
.legal-prose h2 { font-size: clamp(22px, 2.4vw, 28px); color: var(--green-dark); margin-top: var(--s-8); scroll-margin-top: 96px; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 { font-size: 20px; margin-top: var(--s-6); }
.legal-prose p, .legal-prose li { color: var(--ink); line-height: 1.7; font-size: 17px; }
.legal-prose ul, .legal-prose ol { padding-left: var(--s-3); display: flex; flex-direction: column; gap: 8px; }
.legal-prose a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { color: var(--green-medium); }
.legal-prose strong { font-weight: 700; }
.legal-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-prose th, .legal-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--paper-deep); vertical-align: top; }
@media (max-width: 860px) {
.legal-body--toc { grid-template-columns: 1fr; gap: var(--s-4); }
.legal-toc { position: static; border: 1px solid var(--paper-deep); border-radius: 8px; padding: var(--s-3); background: #fff; }
.legal-toc ul { border-left: none; }
.legal-toc a { padding-left: 0; border-left: none; }
}