/* Connected Differently Media — shared design system
Static HTML/CSS, no build step, no framework. Ported patterns proven
on Irresistible Events & Services (irresistible-events-website),
adapted to this brand's tokens; new patterns per ARCHITECTURE.md §31.
See DESIGN-SYSTEM.md (repo root) for the header/footer HTML block and
page-template definitions this file assumes. */
/* Same Google Fonts faces, served locally to remove the external CSS
request from first paint. Original unmodified WOFF2 Latin subsets;
sources/licenses are documented in DESIGN-SYSTEM.md and assets/fonts. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/plex-sans-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plex-mono-400-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plex-mono-500-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plex-mono-600-latin.woff2') format('woff2');}
/* ---------- Tokens ---------- */
/* White website, set 2026-09-23 — Brad's direct simplification: "just
have a white website, maybe with an offwhite header/footer section."
Later composition work restored one restrained dark section and the
footer, using the scoped dark tokens documented below.
Main content is pure white; --surface-2 becomes a single subtle
off-white reserved for the header, footer, and CTA band (the page's
"frame," not its content); interior sections no longer alternate
background color at all; sections are separated by spacing alone now
(the border-top section-rhythm lines were tried, then removed
2026-09-23 — Brad: unnecessary). Accent (muted slate-blue) and neutrals otherwise unchanged
from the previous pass. No @media (prefers-color-scheme) block. */
:root{
--bg:#FFFFFF; /* white — dominant background, all content sections */
--surface:#FFFFFF; /* white — cards (defined by their border, not a color difference) */
--surface-2:#F7F6F3; /* subtle off-white — header, footer, CTA band only */
--ink:#23282A; /* soft charcoal-black — primary text */
--ink-soft:#5C6360; /* secondary text */
--line:#DDD7CC; /* borders/dividers */
--accent:#4C6B85; /* muted mid-slate-blue — 5.6:1 contrast with white button text, real AA margin */
--accent-hover:#3D5670; /* slightly deeper — hover/active; 7.6:1 with white */
--accent-ink:#3D5670; /* emphasis text/links — same as accent-hover */
--ph-bg:#FFF3B8; --ph-ink:#5A4700; /* light-background success state, unchanged */
/* Dark grounding, restored 2026-09-23 for exactly one section (the
founder/difference block) plus the footer, per Brad's explicit
homepage-composition brief — "alternate warm white, subtle warm
neutral, and one restrained dark section." Same values as the
lighter/muted pass two rounds ago, not reinvented. */
--dark-bg:#2A3846;
--dark-ink:#F5F3EE;
--dark-ink-soft:#A8AFB5;
--radius:6px; /* modest, consistent corner radius sitewide — not highly rounded */
--mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
--serif:'Fraunces',Georgia,serif;
--sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-padding-top:80px;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; overflow-x:hidden;}
a{color:inherit;}
/* Never let an image push a track wider than the viewport; `height:auto`
keeps the intrinsic width/height attributes (added to every ![]()
2026-09-30 for layout stability) from distorting an image the CSS
scales. Components that set their own height — .lockup img — still win
on specificity. */
img{max-width:100%; height:auto;}
/* Headings set their own line-height (2026-09-30). Body's 1.6 is a
reading measure tuned for 16px paragraphs; inherited by a
clamp(30px,4.6vw,48px) h1 it opened the lines far enough apart that a
two-line headline stopped reading as one phrase. Tightened
proportionally to size — the faces, weights and type scale are
unchanged. */
h1,h2,h3{font-family:var(--serif); text-wrap:balance; margin:0; line-height:1.2;}
h1{line-height:1.14;}
h3{line-height:1.32;}
.wrap{max-width:1040px; margin:0 auto; padding-inline:24px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding-inline:24px;} /* article/prose reading measure */
/* IBM Plex Mono is reserved for actual measurements/technical data
only (a PageSpeed score, a price) — not section labels generally,
tightened 2026-09-23. .mono-label sits directly above a real number
(the Evidence Card's result), so it stays mono; generic section
"eyebrow" kickers below do not. */
.mono-label{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink);}
/* accessibility: visible focus, reduced motion (§19) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
outline:3px solid var(--accent); outline-offset:2px;
}
/* --accent (#4C6B85) against --dark-bg (#2A3846) is roughly 1.6:1 — a
focus ring nobody can see. The two dark regions (footer, .section-dark)
get the light ink token instead (2026-09-30). */
footer.site a:focus-visible, .section-dark a:focus-visible, .section-dark button:focus-visible{
outline-color:var(--dark-ink);
}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--ink); padding:10px 16px; z-index:100; border-radius:0 0 var(--radius) 0;}
.skip-link:focus{left:0;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }
/* ---------- Header / nav ---------- */
/* Sticky header, separate blurred background layer (not blur on the
header itself — avoids breaking position:fixed descendants, a real
bug documented on Irresistible Events). */
header.site{position:sticky; top:0; z-index:10;}
header.site::before{content:"";position:absolute; inset:0; background:var(--surface-2); border-bottom:1px solid var(--line); backdrop-filter:blur(6px); z-index:-1;}
header.site .bar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; position:relative;}
.lockup{display:flex; align-items:center; gap:12px; text-decoration:none;}
.lockup.active .word{color:var(--accent-ink);} /* visual-only tint on the homepage logo; the Home nav link carries aria-current="page", so the logo doesn't repeat it */
.lockup img{height:38px; width:auto; display:block;}
.lockup .word{font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); line-height:1.05;}
.lockup .word small{display:block; font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-top:2px;}
/* Primary nav: Home (first, added 2026-10-01), Services, Website Check,
Resources, About + a visually
distinct Contact/Request CTA — the fixed allocation in
ARCHITECTURE.md §31. FAQ intentionally not here — reachable from
Home/Services/Resources internal links. Resources was removed from
nav 2026-09-24 (external review caught it 404ing — Resources content
was always a Phase 2 gate, §29/§30, and the nav shipped ahead of it
by mistake in Phase 1); restored 2026-09-30 now that /resources and
its four articles actually exist. */
nav.main{display:flex; align-items:center; gap:26px;}
nav.main a{font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink-soft);}
nav.main a:hover, nav.main a.active{color:var(--accent-ink);}
.btn{display:inline-block; font-family:var(--sans); font-weight:600; font-size:14.5px; text-decoration:none; padding:10px 18px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer;}
.btn.primary{background:var(--accent); color:#fff;}
.btn.primary:hover{background:var(--accent-hover);}
.btn.ghost{border-color:var(--line); color:var(--ink); background:none;}
/* Collapse before the expanded menu labels wrap. The hero retains its
primary CTA; the menu itself includes the same action when opened.
Keep this 900px breakpoint aligned with script.js. */
.nav-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer;}
.nav-toggle svg{display:block; width:22px; height:22px; color:var(--ink);}
@media (max-width:960px){ /* header nav collapse; raised from 900px when Home was added, so the desktop row never wraps */
header.site .bar{padding-inline:16px; gap:12px;}
header.site .lockup{gap:10px;}
header.site .lockup .word{font-size:16px;}
.nav-toggle{display:block;}
nav.main{position:fixed; inset:66px 0 0 0; background:var(--bg); flex-direction:column; align-items:flex-start; padding:24px; gap:4px; display:none; overflow-y:auto;}
nav.main.open{display:flex;}
nav.main a:not(.btn){width:100%; padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px;}
nav.main a.btn{margin-top:12px;}
}
/* ---------- Page-level templates (§31) ---------- */
/* Commercial template: hero -> service/proof -> pricing/process -> CTA.
Diagnostic template: problem -> what's measured -> sample evidence -> request.
Resource-article template: title/dek -> body (.wrap-narrow) -> related service -> CTA.
Trust template: founder/business facts -> working principles -> direct contact.
These share the primitives below; each page composes them in that order. */
.hero{padding-block:64px 56px;}
/* Base label style for every .eyebrow (home review 2026-10-21, Brad-approved):
three home sections sit outside .hero/.section-head and rendered as body text. */
.eyebrow{font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
.hero .eyebrow{font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;}
.hero h1{font-size:clamp(30px,4.6vw,48px); font-weight:600; color:var(--ink); max-width:16ch;}
.hero p.lede{font-size:18px; color:var(--ink-soft); max-width:60ch; margin-top:18px; line-height:1.65;}
.hero .cta-row{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
section{padding-block:56px;} /* Brad: the border-top section-rhythm lines felt unnecessary — removed 2026-09-23. Spacing alone separates sections now. */
.section-head{margin-bottom:32px;}
.section-head .eyebrow{font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
.section-head h2{font-size:clamp(24px,3vw,34px); font-weight:600;}
.section-head p{color:var(--ink-soft); max-width:56ch; margin-top:10px;}
/* Editorial (non-card) layout for Resource/Trust templates — avoids a
card-grid monoculture (§31). */
.prose{max-width:68ch; margin:0 auto;}
/* Inside .wrap-narrow the prose block must not centre itself as well —
.wrap-narrow is already the narrow measure, so auto margins pushed the
body text ~30px right of the h1 sitting directly in the same wrapper
and the article read as two mismatched columns (caught in a real
screenshot, 2026-09-30). Left-align instead; the 68ch reading measure
is unchanged. */
.wrap-narrow .prose{margin-inline:0;}
.prose p{font-size:17px; line-height:1.75; color:var(--ink); margin:0 0 20px;}
.prose h2{font-size:24px; margin:36px 0 14px;}
.prose h3{font-size:19px; margin:28px 0 10px;}
/* Added 2026-09-30 with the first real Resources articles and the
rebuilt About page — the prose block had paragraph and heading rules
only, so a list, a link or an emphasized run inside .prose fell back
to browser defaults and read as a different document. Restrained on
purpose: same faces, same accent, no new visual language. */
.prose > :first-child{margin-top:0;}
.prose a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;}
.prose a:hover{text-decoration-thickness:2px;}
.prose strong{font-weight:600; color:var(--ink);}
.prose ul, .prose ol{margin:0 0 20px; padding-left:1.15em;}
.prose li{font-size:17px; line-height:1.7; color:var(--ink); margin-bottom:10px;}
.prose li::marker{color:var(--accent);}
.prose li > ul, .prose li > ol{margin-top:10px;}
.prose blockquote{margin:24px 0; padding-left:18px; border-left:3px solid var(--accent); color:var(--ink-soft); font-size:16.5px;}
.prose hr{border:0; border-top:1px solid var(--line); margin:32px 0;}
/* Where an article states where a number came from. Small, quiet, and
never mono — it's a citation, not a measurement (§31 typography rule). */
.prose .source-note{font-size:14px; line-height:1.65; color:var(--ink-soft); background:var(--surface-2); border-left:3px solid var(--line); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin:0 0 24px;}
/* ---------- Resource article furniture (2026-09-30) ---------- */
/* Breadcrumbs: visible trail mirroring each article's BreadcrumbList
JSON-LD exactly. Wraps rather than scrolls — a narrow phone must not
gain a horizontal scrollbar from the trail alone. */
.breadcrumbs{font-size:13px; color:var(--ink-soft); margin-bottom:16px;}
.breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0;}
.breadcrumbs li{display:flex; align-items:center; gap:6px;}
/* Separator trails its item, so a wrapped trail never starts a line with "/". */
.breadcrumbs li:not(:last-child)::after{content:"/"; color:var(--line);}
.breadcrumbs a{color:var(--ink-soft); text-decoration:none;}
.breadcrumbs a:hover{color:var(--accent-ink); text-decoration:underline;}
.breadcrumbs [aria-current="page"]{color:var(--ink);}
/* Article head — title, dek, and a real publish date. The date is
visible because the Article JSON-LD claims one; a machine-readable
date with nothing on the page to match it is the kind of mismatch
§13's anti-fabrication standard exists to prevent. */
.article-head{padding-block:48px 8px;}
.article-head h1{font-size:clamp(28px,4vw,40px); font-weight:600; color:var(--ink); max-width:22ch;}
.article-head .dek{font-size:18px; line-height:1.65; color:var(--ink-soft); max-width:60ch; margin:16px 0 0;}
.article-meta{font-size:13px; color:var(--ink-soft); margin-top:20px; padding-top:16px; border-top:1px solid var(--line);}
/* Related-service callout closing each article, before the shared CTA
band — the §31 Resource template's "related service" step. */
.related-callout{border-top:2px solid var(--accent); padding-top:18px; margin-top:40px;}
.related-callout h2{font-size:19px; margin:0 0 8px;}
.related-callout p{font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px;}
/* Resources index listing — a plain editorial list, not a card grid
(§31 again: Resources is explicitly an editorial template). */
.resource-list{list-style:none; margin:0; padding:0;}
.resource-list > li{border-top:1px solid var(--line); padding-block:26px; position:relative;}
/* Stretched link: the whole guide entry is tappable, without a second link
that screen readers would announce twice. */
.resource-list h2 a::after{content:""; position:absolute; inset:0;}
.resource-list > li:last-child{border-bottom:1px solid var(--line);}
.resource-list h2{font-family:var(--serif); font-size:21px; font-weight:600; margin:0 0 8px;}
.resource-list h2 a{color:var(--ink); text-decoration:none;}
.resource-list h2 a:hover{color:var(--accent-ink); text-decoration:underline;}
.resource-list p{font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin:0;}
.resource-list .meta{font-size:12.5px; color:var(--ink-soft); margin-top:10px;}
/* Home "Areas We Serve" links (2026-10-21): a wrapping row of the existing
ghost buttons, so the five area links need no new visual language. */
.area-links{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
/* ---------- Behind the Brand (2026-09-30) ---------- */
/* One page, one story, no sales furniture — the editorial discipline
§31 already applies to About and Resources, with the extra constraint
that nothing here may read as a pitch. It uses .wrap (not
.wrap-narrow) so the photograph has somewhere to sit beside the
opening paragraphs; .prose keeps its own 68ch reading measure, so the
extra container width becomes whitespace rather than longer lines.
The prose must not auto-centre inside that wider wrap or it would sit
right of the h1 above it — the same misalignment already fixed for
.wrap-narrow .prose. */
.story .prose{margin-inline:0;}
.story-head{padding-block:56px 20px;}
.story-head h1{max-width:26ch;}
.story{padding-top:8px;}
.story-lead{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:48px; align-items:start;}
.story-body{margin-top:12px;}
.story-figure{margin:0;}
.story-figure img{width:100%; border-radius:var(--radius); display:block;}
.story-figure figcaption{font-size:13px; color:var(--ink-soft); margin-top:12px;}
.story .signoff{font-family:var(--serif); font-size:17px; color:var(--ink-soft); margin-top:28px;}
@media (max-width:760px){
.story-lead{grid-template-columns:1fr; gap:28px;}
.story-figure{max-width:380px;} /* a 3:4 portrait at full phone width would push the rest of the story off-screen */
.story-body{margin-top:40px;} /* clear gap so the photo caption doesn't read as part of the next heading */
.hero.story-head{padding-bottom:20px;} /* outranks the later phone .hero rule, keeping the page's own 20px */
}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media (max-width:760px){ .grid-3,.grid-2{grid-template-columns:1fr;} }
/* Two-column layout — text paired with a visual (an Evidence Card, a
quote, a tag-list), the dominant Irresistible Events pattern for
breaking up a page instead of repeating uniform card grids down the
whole thing. */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.two-col > *{min-width:0;} /* same grid-blowout fix as .hero-grid — a wide intrinsic image (e.g. .project-shot) can otherwise force the track past the viewport */
.two-col.align-center{align-items:center;}
@media (max-width:760px){ .two-col{grid-template-columns:1fr;} }
/* ---------- Composition components, added 2026-09-23 ---------- */
/* Homepage redesign per Brad's brief: real imagery, alternating
compositions, visible proof, human presence — Irresistible Events'
structural rhythm, not its wedding aesthetic/colors. */
/* Hero: 55/45 split (not an even two-col) — copy leads, a real
layered screenshot composition follows. */
.hero-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:center;}
.hero-grid > *{min-width:0;} /* grid items default to min-width:auto, which lets the image's intrinsic pixel size blow out the track and overflow the viewport — this lets width:100% on the image actually cap at the track's available width */
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
/* Layered real-screenshot composition — two actual, unedited
screenshots (desktop + mobile), positioned via CSS only, never
composited/doctored into one fake image. */
.hero-visual{position:relative; padding-bottom:36px;}
.hero-visual .shot-desktop{width:100%; border-radius:var(--radius); border:1px solid var(--line); box-shadow:0 12px 32px -16px rgba(35,40,42,.22); display:block;}
.hero-visual .shot-mobile{position:absolute; right:-18px; bottom:0; width:34%; border-radius:8px; border:1px solid var(--line); box-shadow:0 10px 24px -12px rgba(35,40,42,.28); background:var(--surface);}
@media (max-width:600px){ .hero-visual .shot-mobile{right:4px; width:32%;} }
.hero-visual .caption{font-size:12px; color:var(--ink-soft); margin-top:14px; text-align:left; max-width:60%;} /* left-aligned + width-capped so it clears the layered mobile shot at bottom-right */
/* Proof strip — a band, not cards. Thin vertical rules between items
on desktop; stacks with horizontal rules on mobile. */
.proof-strip{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.proof-strip > div{padding:24px 22px; border-left:1px solid var(--line);}
.proof-strip > div:first-child{border-left:0;}
.proof-strip h3{font-family:var(--serif); font-size:17px; font-weight:600; margin-bottom:6px; color:var(--ink);}
.proof-strip p{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.5;}
@media (max-width:760px){
.proof-strip{grid-template-columns:1fr;}
.proof-strip > div{border-left:0; border-top:1px solid var(--line); padding:18px 0;}
.proof-strip > div:first-child{border-top:0;}
}
/* One restrained dark section (the founder/difference block) and the
footer — see --dark-bg/--dark-ink/-soft tokens. Added a subtle real
photo texture behind the solid color (2026-09-24, Brad: site felt
"stale and bland") — a heavy rgba(--dark-bg) overlay keeps it close
enough to the flat color that text contrast is unaffected; it just
adds quiet depth instead of a flat fill. Licensed, real photograph
(Unsplash License, free commercial use) — see IMAGE-CREDITS.md at the
REPO ROOT (corrected 2026-09-30: this comment pointed at
public/assets/IMAGE-CREDITS.md, which has never existed — and must
not, since public/ is the publicly fetchable deploy root). */
.section-dark{
background:
linear-gradient(rgba(42,56,70,.90), rgba(42,56,70,.94)),
url('/assets/texture-navy-abstract.jpg') center/cover no-repeat,
var(--dark-bg);
color:var(--dark-ink);
}
.section-dark h2, .section-dark h3{color:var(--dark-ink);}
.section-dark p{color:var(--dark-ink-soft);}
.section-dark .eyebrow{color:var(--accent-hover); filter:brightness(1.6);} /* lift the muted accent enough to read on dark */
.section-dark .founder-photo{width:100%; max-width:240px; border-radius:var(--radius); display:block;}
.section-dark .trust-points{list-style:none; margin:18px 0 0; padding:0;}
.section-dark .trust-points li{padding:10px 0; border-top:1px solid rgba(255,255,255,.14); font-size:14.5px; color:var(--dark-ink);}
.section-dark .btn.ghost{border-color:rgba(255,255,255,.4); color:var(--dark-ink);}
/* Featured project — a real screenshot with a caption row (project
name, meta) sitting under it inside the same two-col layout. */
.project-shot{width:100%; border-radius:var(--radius); border:1px solid var(--line); box-shadow:0 12px 32px -18px rgba(35,40,42,.2); display:block;}
.project-meta{margin-top:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft);}
/* Cards are now reserved for content that genuinely groups related
data (pricing tiers, the Evidence Card) — tightened 2026-09-23.
A single statement no longer gets a bordered box; see .stat-line
below for that case instead. */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;}
.card h3, .card .contact-method{font-size:18px; font-weight:600; margin-bottom:8px;}
.card .contact-method{line-height:1.32;} /* same visual size, correct H2 hierarchy */
.card p{color:var(--ink-soft); font-size:14.5px; margin:0;}
/* Homepage "What We Do": one decorative supporting photo + a shorter service
list (Brad-approved version B, 2026-10-01, from reviews/services-comparison/).
.card/.grid-2 above stay; other pages still use them. */
.svc{display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:center;}
.svc > *{min-width:0;}
.svc-photo{margin:0;}
/* One landscape file cropped by CSS: square on desktop (notebook and mug;
all but a blurred sliver of the newspaper cropped out), a short 16:9 band
on phones. */
.svc-photo img{display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; object-position:30% 62%; border-radius:var(--radius);}
.svc-list{list-style:none; margin:0; padding:0;}
.svc-list li{padding-block:18px; border-top:1px solid var(--line);}
.svc-list li:first-child{padding-top:16px; border-top:2px solid var(--accent);} /* lead service, echoing the current lead card's accent rule */
.svc-list h3{font-size:19px; font-weight:600; margin:0 0 6px;}
.svc-list li:first-child h3{font-size:22px;}
.svc-list p{margin:0; color:var(--ink-soft); font-size:15px; line-height:1.6;}
.svc-cta{margin:22px 0 0;}
@media (max-width:760px){
.svc{grid-template-columns:1fr; gap:24px;}
.svc-photo img{aspect-ratio:16 / 9; object-position:35% 66%;}
}
/* A single statement that doesn't need a card — whitespace and a thin
rule instead of a bordered box (2026-09-23, replaces .card.featured). */
.stat-line{border-top:2px solid var(--accent); padding-top:16px; max-width:44ch;}
.stat-line h3{font-size:22px; font-weight:600; margin-bottom:10px; color:var(--ink);}
.stat-line p{font-size:16.5px; line-height:1.65; color:var(--ink-soft); margin:0;}
/* Plain checkmark list — replaces pill-shaped tags (2026-09-23): tags
read as a software UI, not an editorial site. */
.check-list{list-style:none; margin:0; padding:0;}
.check-list li{position:relative; padding-left:26px; margin-bottom:12px; font-size:15px; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:12px;}
.check-list li:last-child{border-bottom:0;}
.check-list li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:600;}
/* Pull-quote / callout — a single strong statement given real visual
weight of its own, not folded into a virtue-card grid. */
.quote-card{background:var(--surface); border-left:3px solid var(--accent); border-radius:var(--radius); padding:26px 28px; font-family:var(--serif); font-size:20px; line-height:1.5; color:var(--ink);}
.quote-card cite{display:block; margin-top:16px; font-family:var(--sans); font-style:normal; font-size:13px; color:var(--ink-soft);}
/* pricing tiers — content sourced from rate_card.py, never re-derived by hand */
.tname{font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink);}
.tprice{font-family:var(--mono); font-size:24px; font-weight:600; margin:4px 0 10px; font-variant-numeric:tabular-nums;}
/* The qualifier starts with a real space (inside , so it takes this
12.5px font) so assistive tech reads "$2,500 up to 5 pages", not
"$2,500up to 5 pages". The margin is trimmed to keep the old ~6px gap. */
.tprice small{font-family:var(--sans); font-size:12.5px; font-weight:400; color:var(--ink-soft); margin-left:3px;}
/* "Starts at" sits inside the price so it can't be read without it: every
build figure is a starting point, never a fixed package price. */
.tprice .tfrom{font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-soft);}
.tfit{font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 12px;}
.card ul{margin:0; padding-left:1.1em; font-size:14px; color:var(--ink);}
.card li{margin-bottom:5px;}
.note{font-size:13.5px; color:var(--ink-soft); margin-top:14px;}
/* Coverage disclosure inside a pricing card — native , so the toggle
works with no JavaScript and with the keyboard by default. The label swap is
CSS-only for the same reason. `summary` isn't in the global focus-visible
selector list above, so it gets the same ring here rather than widening that
rule sitewide. */
.coverage{margin-top:14px; border-top:1px solid var(--line); padding-top:10px;}
.coverage>summary{cursor:pointer; list-style:none; font-size:13px; font-weight:600; color:var(--accent-ink);}
.coverage>summary::-webkit-details-marker{display:none;}
.coverage>summary::after{content:" ▾"; font-weight:400;}
.coverage[open]>summary::after{content:" ▴";}
.coverage>summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.coverage .coverage-less{display:none;}
.coverage[open] .coverage-more{display:none;}
.coverage[open] .coverage-less{display:inline;}
.coverage-body{margin-top:9px;}
.coverage-body p{font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 8px;}
.coverage-body p:last-child{margin-bottom:0;}
/* Services & Pricing page components (Brad-approved consolidated update,
2026-10-01). Every selector is page-specific, so the shared .tprice,
.card, .grid-2 and .note rules other pages use are untouched. */
/* In-page shortcuts under the hero CTAs: quiet text links, not buttons.
html{scroll-padding-top} already clears the sticky header on arrival. */
.page-jump{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 20px; margin-top:22px; font-size:14.5px;}
.page-jump-label{color:var(--ink-soft);}
.page-jump a{color:var(--accent-ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; padding-block:4px;}
.page-jump a:hover{text-decoration-color:currentColor;}
/* Build cards: the page allowance drops to its own line under the price.
It keeps its leading space, so the read-out stays "$2,500 up to 5 pages". */
.build-tiers .tprice small{display:block; margin:2px 0 0; font-size:13px;}
/* The three short labeled groups under the build cards. */
.build-terms{display:grid; grid-template-columns:repeat(3,1fr); gap:20px 28px; margin-top:32px;}
.build-terms > *{min-width:0; border-top:1px solid var(--line); padding-top:14px;}
.build-terms h3{font-size:17px; font-weight:600; margin:0 0 8px;}
.build-terms ul{margin:0; padding-left:1.1em; font-size:14.5px; line-height:1.55; color:var(--ink-soft);}
.build-terms li{margin-bottom:6px;}
/* Add-ons: one readable price list plus the Content Updates note. */
.addon-head{font-size:17px; font-weight:600; margin:0 0 10px;}
.addon-list{list-style:none; margin:0; padding:0; max-width:760px; border-bottom:1px solid var(--line);}
.addon-list li{display:grid; grid-template-columns:1fr auto; column-gap:24px; row-gap:2px; padding-block:12px; border-top:1px solid var(--line);}
.addon-name{font-weight:600; font-size:15px; color:var(--ink);}
.addon-price{font-weight:600; font-size:15px; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums;}
.addon-note{grid-column:1; font-size:13.5px; line-height:1.5; color:var(--ink-soft);}
.addon-upgrade{max-width:760px; margin:20px 0 0; padding-left:14px; border-left:2px solid var(--accent); font-size:14.5px; color:var(--ink-soft);}
.addon-upgrade strong{font-weight:600; color:var(--ink);}
/* Policies: five labeled groups in place of seven separate boxes. */
.policy-list{margin:0; max-width:860px; border-bottom:1px solid var(--line);}
.policy-list > div{display:grid; grid-template-columns:200px 1fr; gap:4px 28px; padding-block:14px; border-top:1px solid var(--line);}
.policy-list dt{font-weight:600; font-size:15px; color:var(--ink);}
.policy-list dd{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft);}
@media (max-width:760px){
.build-terms{grid-template-columns:1fr; gap:22px;}
.addon-list li, .policy-list > div{grid-template-columns:1fr;}
.addon-price{text-align:left;}
}
/* Monthly intro with one decorative photo — REVIEW DRAFT for Brad
(2026-10-01; photo and crop not yet approved). Desktop: photo beside the
intro, both monthly cards still together below at full width. Phones: the
photo leads the section as a shallow 2:1 band, never between the cards.
The file is already a 4:3 crop; the phone band is cut from it in CSS. */
.support-intro{display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:center; margin-bottom:32px;}
.support-intro > *{min-width:0;}
.support-intro .section-head{margin-bottom:0;}
.support-photo{margin:0;}
.support-photo img{display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius);}
@media (max-width:760px){
.support-intro{grid-template-columns:1fr; gap:20px;}
.support-photo{order:-1;}
.support-photo img{aspect-ratio:2 / 1; object-position:50% 30%;}
}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step{border-top:2px solid var(--accent); padding-top:14px;}
.step b{display:block; font-size:16px; margin-bottom:4px; font-family:var(--serif);}
.step p{color:var(--ink-soft); font-size:14.5px; margin:0;}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }
/* Evidence Card (§31): {measured result, source, plain-language
explanation, why it matters, recommended next action}. The visible
operationalization of "evidence over opinion" — not just copy. */
.evidence-card{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); padding:22px 24px;}
.evidence-card .result{font-family:var(--mono); font-size:28px; font-weight:600; color:var(--accent-ink); font-variant-numeric:tabular-nums;}
.evidence-card .source{font-family:var(--sans); font-size:12px; color:var(--ink-soft); margin-top:4px;}
.evidence-card .explain{font-size:15px; color:var(--ink); margin-top:14px; line-height:1.6;}
.evidence-card .why{font-size:14px; color:var(--ink-soft); margin-top:10px; line-height:1.6;}
/* An Evidence Card can cite its own explainer; `a{color:inherit}` would
otherwise make that link indistinguishable from the text (2026-09-30). */
.evidence-card a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;}
.evidence-card .next-action{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; font-weight:600; color:var(--accent-ink);}
/* Homepage Site Check: "What we'll look at" panel (Brad-approved version B,
2026-10-01, from reviews/site-check-comparison/). Matches the site's cards:
surface, 1px line, site radius, no accent bar. The evidence-card rules above
stay — /website-check still uses them. */
.look-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;}
.look-panel h3{font-family:var(--serif); font-size:19.5px; font-weight:600; color:var(--ink); margin:0 0 4px;}
.look-list{list-style:none; margin:0; padding:0;}
.look-list li{padding-block:12px; border-top:1px solid var(--line);}
.look-list li:first-child{border-top:0;}
.look-title{display:block; font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.4; color:var(--ink);}
.look-desc{display:block; font-size:14px; line-height:1.55; color:var(--ink-soft); margin-top:2px;}
.look-next{margin-top:4px; padding-top:14px; border-top:1px solid var(--line);}
.look-next p{margin:0 0 14px; font-size:14.5px; line-height:1.6; color:var(--ink);}
/* Same problem in the CTA band's supporting line, which now carries a
"no website yet" route on several pages. */
.cta-band p a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;}
/* FAQ accordion — grid-template-rows 0fr->1fr technique (Irresistible Events) */
.faq-item{border-bottom:1px solid var(--line); padding-block:18px;}
.faq-q{font-weight:600; font-size:16.5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; background:none; border:0; width:100%; text-align:left; padding:0; color:var(--ink); font-family:var(--sans);}
.faq-a-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease;}
.faq-item.open .faq-a-wrap{grid-template-rows:1fr;}
.faq-q::after{content:"+"; content:"+" / ""; flex:none; font-weight:400; font-size:22px; line-height:1; color:var(--accent);}
.faq-item.open .faq-q::after{content:"\2212"; content:"\2212" / "";}
.faq-a-inner{overflow:hidden;}
.faq-a{color:var(--ink-soft); font-size:15px; margin-top:10px; max-width:64ch; padding-bottom:2px;}
/* /faq page: native , so answers show without JavaScript. The
question stays an for screen-reader navigation but keeps the
accordion's look; the +/− marker is decorative (empty alt text). */
.faq-entry{border-bottom:1px solid var(--line); padding-block:18px;}
.faq-entry>summary{list-style:none;}
.faq-entry>summary::-webkit-details-marker{display:none;}
.faq-entry>summary h2{font:inherit; color:inherit; margin:0;}
.faq-entry>summary::after{content:"+"; content:"+" / ""; flex:none; font-size:20px; line-height:1; font-weight:400; color:var(--accent-ink);}
.faq-entry[open]>summary::after{content:"−"; content:"−" / "";}
.faq-entry>summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
/* CTA band — warm-neutral section, dark heading, teal button
(2026-09-23: replaces the solid-teal band — rule against large
bright-teal background bands; teal now appears only on the button). */
.cta-band{background:var(--bg); padding-block:56px; text-align:center;} /* white, matching main content — Brad: only header/footer get the offwhite tone, not the CTA band */
.cta-band h2{color:var(--ink); font-size:clamp(22px,3vw,30px);}
.cta-band p{color:var(--ink-soft); margin-top:10px;}
.cta-band .btn.primary{margin-top:22px;}
.cta-band .btn.ghost{margin-top:22px; margin-left:10px;}
/* Footer — deep navy-charcoal again, 2026-09-23 (reverses the offwhite
footer from the previous pass — Brad's explicit new instruction:
"a clean closing CTA followed by a deep navy-charcoal footer,"
structured like Irresistible's but scaled down. Flagged to Brad:
this directly reverses "footer should be offwhite" from two messages
ago — implementing as written since it's the most recent, specific
instruction, matching "one restrained dark section" plus the footer
from the same brief's visual rules.) */
footer.site{
background:
linear-gradient(rgba(42,56,70,.92), rgba(42,56,70,.95)),
url('/assets/texture-navy-abstract.jpg') center/cover no-repeat,
var(--dark-bg);
color:var(--dark-ink); padding-block:40px;
} /* same texture as .section-dark (2026-09-24) — ties the page's two dark
moments together instead of introducing a third distinct treatment */
footer.site .cols{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px;}
footer.site .lockup .word{font-size:15px; color:var(--dark-ink);}
footer.site .lockup .word small{color:var(--dark-ink-soft);}
footer.site nav{display:flex; flex-direction:column; gap:8px; font-size:14px;}
footer.site nav a{text-decoration:none; color:var(--dark-ink-soft);}
footer.site .contact{font-size:13.5px; color:var(--dark-ink-soft); margin-top:16px;}
/* Phone and email in the footer are real tel:/mailto: links on every
page (2026-09-30) — they used to be plain text, which is the exact
failure the market scan found on other agencies' own homepages. They
need a visible affordance against the dark ground, since `a{color:
inherit}` would otherwise render them identical to the text around
them. */
footer.site .contact a{color:var(--dark-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.4);}
footer.site .contact a:hover{text-decoration-color:var(--dark-ink);}
/* The separator travels with the email, so a narrow screen never leaves a
dangling "·" at the end of the phone line. */
footer.site .contact-email{white-space:nowrap;}
footer.site nav a:hover, footer.site .legal a:hover{color:var(--dark-ink); text-decoration:underline;}
footer.site nav a[aria-current="page"]{color:var(--dark-ink);}
footer.site .legal{display:flex; gap:16px; flex-wrap:wrap; margin-top:22px; font-size:12.5px; color:var(--dark-ink-soft); border-top:1px solid rgba(255,255,255,.12); padding-top:18px;}
footer.site .legal a{text-decoration:none; color:var(--dark-ink-soft);}
/* Deliberate mobile stack, per Brad's explicit instruction not to
compress legal links into three narrow columns on small screens. */
@media (max-width:600px){
footer.site .cols{flex-direction:column; gap:22px;}
footer.site .legal{flex-direction:column; gap:8px;}
}
/* ---------- Form states (§31): validation, submission, success,
failure, spam-rejection, focus. Pages using the intake form include
these classes; script.js toggles them. ---------- */
.field{margin-bottom:18px;}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); font-family:var(--sans); font-size:15px;}
.field .error{display:none; color:#B3261E; font-size:13px; margin-top:6px;}
.field .field-hint{font-size:13px; line-height:1.5; color:var(--ink-soft); margin:6px 0 0;}
.field .field-hint a{color:var(--accent-ink);}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:#B3261E;}
.field.invalid .error{display:block;}
.form-status{display:none; padding:16px 18px; border-radius:var(--radius); font-size:14.5px; margin-top:18px;}
.form-status.show{display:block;}
.form-status.submitting{background:var(--surface-2); color:var(--ink-soft);}
.form-status.success{background:var(--ph-bg); color:var(--ph-ink); border:1px solid var(--accent);}
.form-status.error{background:#FDECEA; color:#611A15;}
/* honeypot field — never visible, never focusable */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
/* ---------- Responsive ---------- */
@media (max-width:760px){
.grid-3,.grid-2,.steps{grid-template-columns:1fr;}
section{padding-block:40px;}
.hero{padding-block:44px 36px;}
.article-head{padding-block:32px 4px;}
.prose p, .prose li{font-size:16.5px;}
}