/* Personal Courage: design system
Tokens, base, layout, components, header/footer, home page.
Page-area stylesheets live in /assets/css/pages/ and build on these tokens.
Contrast ratios (WCAG 2.2) for every text/background pair, light and dark:
python tools/check-contrast.py (README.md has the light table). */
/* ======================================================================
1. Tokens
====================================================================== */
:root {
/* Brand */
--navy-900: #00274C;
--navy-700: #1E4470;
--navy-100: #E6EEF6;
--paper: #F7F6F2;
--white: #FFFFFF;
--sky-100: #E6F3FB;
--amber-400: #F2B544;
--amber-600: #B97A0E; /* non-text accents only (3.3:1 on paper) */
--amber-100: #FDF3DF;
--sage-300: #A9C5B6; /* decorative only */
--sage-100: #EDF4F0;
--ink: #13233A;
--muted: #49677B; /* soft slate blue (Tim, 2026-09-24); 5.5:1 on paper, >= 4.9:1 on every tint */
/* UI */
--line: #DCE1E7; /* decorative dividers */
--line-strong: #6B7A8F; /* form control borders (4.0:1 on paper, 4.4:1 on white) */
--error: #B42318;
--error-bg: #FDF1F0;
--success: #1C6B46;
--success-bg: #EEF6F1;
--warn-bg: #FEF6E7;
--footer-text: #C9D6E4;
/* Roles (light/dark, 2026-09-24). Components use these role tokens, not the brand colours
above, so the dark theme (just below this block) only redefines roles. Every light value
here is exactly the colour the site used before dark mode existed. Contrast for both themes:
python tools/check-contrast.py */
color-scheme: light;
/* Surfaces */
--color-page: var(--paper); /* page background */
--color-surface: var(--white); /* cards, white sections, form fields */
--color-tint: var(--sky-100); /* soft sky sections, icon discs, info notices */
--color-tint-strong: var(--navy-100); /* featured card, current submenu item, ghost-button hover */
--color-tint-sage: var(--sage-100); /* legacy careers teaser */
--color-tint-amber: var(--amber-100); /* crisis notice, legal callout */
--color-tint-amber-border: rgba(185, 122, 14, 0.35);
--color-header: rgba(247, 246, 242, 0.92); /* sticky header, over the page */
--color-mobile-bar: rgba(255, 255, 255, 0.97);
/* Text */
--color-text: var(--ink);
--color-heading: var(--navy-900); /* headings, strong labels, hover states */
--color-muted: var(--muted);
--color-link: var(--navy-700);
--color-label: var(--navy-700); /* eyebrows, small uppercase titles, line icons */
--color-underline-muted: rgba(74, 90, 112, 0.45);
--logo-ink: var(--navy-900); /* the logo drawings: header wordmark, home hero mark */
--bridge-blue: #2C5FCE; /* the Blue Bridge in the home logo; the SAME in both themes */
/* Lines and accents */
--color-border: var(--line); /* decorative dividers */
--color-border-strong: var(--line-strong); /* form control borders (>= 3:1) */
--color-accent-rule: var(--navy-900); /* thick accent edge: the legal card (the crisis-type cards use --color-callout-edge) */
--color-accent: var(--amber-600); /* amber icons and rules on light surfaces (non-text) */
--color-callout-icon: var(--color-heading); /* the icon on the crisis card and legal callout: navy here, gold in dark */
--color-callout-edge: var(--color-heading); /* and their left edge, paired with the icon (Tim 09-27: a blue edge in light) */
--color-footer-callout: #0F3457; /* the crisis card in the footer: the navy band + 6% white, written solid so the contrast check can test it */
--edge-rgb: 0, 39, 76; /* hairline card edges: rgba(var(--edge-rgb), alpha) */
--focus: var(--navy-700);
/* Notices and forms */
--color-notice-border: rgba(30, 68, 112, 0.25);
--color-tint-border: rgba(30, 68, 112, 0.14);
--color-warn-bg: var(--warn-bg);
--color-warn-border: rgba(185, 122, 14, 0.45);
--color-success: var(--success);
--color-success-bg: var(--success-bg);
--color-success-border: rgba(28, 107, 70, 0.35);
--color-error: var(--error);
--color-error-bg: var(--error-bg);
--color-error-border: rgba(180, 35, 24, 0.4);
--color-on-error: var(--white);
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300274C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--photo-filter: none; /* headshots */
/* Dark panels. The CTA band and the footer are dark in BOTH themes, and the band keeps the
brand navy in both; primary buttons are navy text on amber in both (8.2:1). */
--color-band: var(--navy-900);
--color-footer: var(--navy-900);
--footer-edge: none;
--color-on-dark: var(--white);
--color-on-dark-muted: var(--footer-text);
--on-dark-rgb: 255, 255, 255;
/* Type */
/* Headings: Spectral (Tim, 2026-09-24, replacing Fraunces, whose curled 'f' read as odd). */
--font-display: 'Spectral', Georgia, 'Times New Roman', serif;
/* Native body font (Tim, 2026-09-24): Segoe UI on Windows, San Francisco on Apple, Roboto on Android.
Nothing to download; Segoe UI cannot be served as a web font under Microsoft's license. */
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
--step-0: clamp(1.0625rem, 1.035rem + 0.13vw, 1.125rem);
--step-1: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);
--step-2: clamp(1.4375rem, 1.3rem + 0.6vw, 1.8125rem);
--step-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);
--step-4: clamp(2.125rem, 1.75rem + 1.7vw, 3.125rem);
--step-5: clamp(2.375rem, 1.85rem + 2.45vw, 3.875rem);
/* Space */
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2rem;
--space-xl: 3rem;
--space-2xl: 4.5rem;
/* Calm standard: generous, consistent section rhythm. */
--section-y: clamp(4rem, 3rem + 4.5vw, 7rem);
--gutter: clamp(16px, 4vw, 32px);
/* Shape */
--radius-xs: 8px;
--radius-sm: 12px;
--radius: 16px;
--radius-lg: 28px;
--radius-pill: 999px;
/* Calm standard: soft, low shadows; borders do most of the separating. */
--shadow-sm: 0 1px 2px rgba(0, 39, 76, 0.04);
--shadow: 0 1px 2px rgba(0, 39, 76, 0.04), 0 6px 18px rgba(0, 39, 76, 0.06);
--shadow-lg: 0 2px 6px rgba(0, 39, 76, 0.05), 0 14px 36px rgba(0, 39, 76, 0.09);
/* Layout */
--container: 1200px;
--measure: 68ch;
--header-h: 64px;
--mobile-bar-h: 72px; /* the fixed Call / Inquire bar below 768px: its padding, its 50px buttons and its border */
/* Motion */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--dur: 180ms;
}
@media (min-width: 1120px) {
:root { --header-h: 76px; }
}
/* ----------------------------------------------------------------------
Dark theme (Tim, 2026-09-24: bright white can feel institutional and is hard to look at after
a brain injury, with light sensitivity). It follows the visitor's device setting; the header
toggle (theme.js) overrides it and is remembered on the device as data-theme on .
The two blocks below must stay identical: one for "device is dark and no light choice was
made", one for "dark was chosen". tools/check-contrast.py checks that they match. Both are
screen-only, so printing always uses the light colours.
Page #0F1B2A is a deep, desaturated brand navy (never pure black); body text is a soft
off-white (never pure #FFF). Every text pair is >= 6.4:1.
---------------------------------------------------------------------- */
@media screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-page: #0F1B2A;
--color-surface: #16263A;
--color-tint: #1D3149;
--color-tint-strong: #1D3149;
--color-tint-sage: #1D3149;
--color-tint-amber: #1D3149; /* navy, not dark amber (it read brown; Tim 09-27): the gold edge and icon carry the signal */
--color-tint-amber-border: rgba(242, 181, 68, 0.35);
--color-header: rgba(15, 27, 42, 0.92);
--color-mobile-bar: rgba(22, 38, 58, 0.97);
--color-text: #E6E2DA;
--color-heading: #F0ECE4;
--color-muted: #A8B6C7;
--color-link: #9DCBEF;
--color-label: #9DCBEF;
--color-underline-muted: rgba(168, 182, 199, 0.45);
--logo-ink: #F0ECE4;
--color-border: #2A3D55;
--color-border-strong: #7488A1;
--color-accent-rule: #9DCBEF;
--color-accent: var(--amber-400);
--color-callout-icon: var(--amber-400);
--color-callout-edge: var(--amber-400);
--color-footer-callout: #1D3149;
--edge-rgb: 230, 226, 218;
--focus: #9DCBEF;
--color-notice-border: rgba(157, 203, 239, 0.3);
--color-tint-border: rgba(157, 203, 239, 0.18);
--color-warn-bg: #1D3149;
--color-warn-border: rgba(242, 181, 68, 0.45);
--color-success: #7FD3A6;
--color-success-bg: #153327;
--color-success-border: rgba(127, 211, 166, 0.35);
--color-error: #FF9E94;
--color-error-bg: #3A1D22;
--color-error-border: rgba(255, 158, 148, 0.45);
--color-on-error: #0F1B2A;
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6E2DA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--photo-filter: brightness(0.92);
--color-footer: #0A1420;
--footer-edge: inset 0 1px 0 rgba(240, 236, 228, 0.1);
--color-on-dark: #F0ECE4;
--on-dark-rgb: 240, 236, 228;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 18px rgba(0, 0, 0, 0.22);
--shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.28), 0 14px 36px rgba(0, 0, 0, 0.34);
}
}
@media screen {
:root[data-theme="dark"] {
color-scheme: dark;
--color-page: #0F1B2A;
--color-surface: #16263A;
--color-tint: #1D3149;
--color-tint-strong: #1D3149;
--color-tint-sage: #1D3149;
--color-tint-amber: #1D3149; /* navy, not dark amber (it read brown; Tim 09-27): the gold edge and icon carry the signal */
--color-tint-amber-border: rgba(242, 181, 68, 0.35);
--color-header: rgba(15, 27, 42, 0.92);
--color-mobile-bar: rgba(22, 38, 58, 0.97);
--color-text: #E6E2DA;
--color-heading: #F0ECE4;
--color-muted: #A8B6C7;
--color-link: #9DCBEF;
--color-label: #9DCBEF;
--color-underline-muted: rgba(168, 182, 199, 0.45);
--logo-ink: #F0ECE4;
--color-border: #2A3D55;
--color-border-strong: #7488A1;
--color-accent-rule: #9DCBEF;
--color-accent: var(--amber-400);
--color-callout-icon: var(--amber-400);
--color-callout-edge: var(--amber-400);
--color-footer-callout: #1D3149;
--edge-rgb: 230, 226, 218;
--focus: #9DCBEF;
--color-notice-border: rgba(157, 203, 239, 0.3);
--color-tint-border: rgba(157, 203, 239, 0.18);
--color-warn-bg: #1D3149;
--color-warn-border: rgba(242, 181, 68, 0.45);
--color-success: #7FD3A6;
--color-success-bg: #153327;
--color-success-border: rgba(127, 211, 166, 0.35);
--color-error: #FF9E94;
--color-error-bg: #3A1D22;
--color-error-border: rgba(255, 158, 148, 0.45);
--color-on-error: #0F1B2A;
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6E2DA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--photo-filter: brightness(0.92);
--color-footer: #0A1420;
--footer-edge: inset 0 1px 0 rgba(240, 236, 228, 0.1);
--color-on-dark: #F0ECE4;
--on-dark-rgb: 240, 236, 228;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 18px rgba(0, 0, 0, 0.22);
--shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.28), 0 14px 36px rgba(0, 0, 0, 0.34);
}
}
/* Theme-specific art: the header logo and the page emblems have a light and a dark drawing.
The hidden one is display:none, so it is also out of the accessibility tree. Print = light. */
@media not screen and (prefers-color-scheme: dark) {
:root:not([data-theme="dark"]) .theme-dark-only { display: none !important; }
}
:root[data-theme="light"] .theme-dark-only { display: none !important; }
@media print {
.theme-dark-only { display: none !important; }
}
@media screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-light-only { display: none !important; }
}
@media screen {
:root[data-theme="dark"] .theme-light-only { display: none !important; }
}
/* ======================================================================
2. Base
====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--color-page);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
.icon { flex: none; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
color: var(--color-heading);
line-height: 1.18;
letter-spacing: -0.005em;
margin: 0 0 0.5em;
text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 1.1; letter-spacing: -0.01em; }
/* Calm standard: section headings one step smaller, so the H1 leads and H2s don't shout. */
h2 { font-size: var(--step-3); line-height: 1.15; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, ul, ol, dl, blockquote, figure { margin: 0 0 1em; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: 0.35em; }
[role='list'] { list-style: none; padding: 0; margin: 0; }
[role='list'] > li + li { margin-top: 0; }
strong { font-weight: 650; }
a {
color: var(--color-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--color-heading); text-decoration-thickness: 2px; }
/* Long unbreakable strings (the email address, full URLs) may wrap, so nothing forces sideways
scrolling at 320px (WCAG 2.2 reflow). */
a[href^="mailto:"], .prose a { overflow-wrap: anywhere; }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
.on-dark { --focus: var(--amber-400); }
/* Scroll clearance for everything the browser scrolls into view, a fragment target or a focused element (Astra's
product review, 2026-10-07: keyboard focus could land under the sticky header, or under the fixed Call / Inquire
bar on phones): the header's height plus 1rem at the top, and below 768px, where the bar is fixed, the bar's height
plus 1rem at the bottom. On the root element, scroll-padding applies to the viewport. It replaces the [id]
scroll-margin-top rule, which gave fragment targets this same top clearance and focused elements none.
No scroll-behavior: smooth on the root (Tim, 2026-10-13, #83: the glide to the Good Faith Estimate "feels really
disruptive"): a link to a section lands on it in one jump, with this clearance; the reduced-motion block needs no
scroll-behavior of its own. Proof: docs/reviews/instant-anchors-2026-10-13/local-after.txt. */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (max-width: 767.98px) {
html { scroll-padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 1rem); }
}
[hidden] { display: none !important; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-xl) 0; }
::selection { background: var(--amber-400); color: var(--navy-900); } /* same in both themes */
main:focus { outline: none; }
/* ======================================================================
3. Utilities
====================================================================== */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 16px;
top: -100px;
z-index: 100;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
background: var(--color-band);
color: var(--color-on-dark);
font-weight: 650;
text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--color-on-dark); --focus: var(--amber-400); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.9rem;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-label);
}
.eyebrow::before {
content: '';
width: 1.75rem;
height: 3px;
border-radius: 3px;
background: var(--amber-400);
}
.eyebrow--light, .on-dark .eyebrow { color: var(--amber-400); }
.lead {
font-size: var(--step-1);
line-height: 1.55;
color: var(--color-muted);
max-width: 60ch;
}
.on-dark .lead { color: var(--color-on-dark-muted); }
.muted { color: var(--color-muted); }
.small { font-size: var(--step--1); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.measure { max-width: var(--measure); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
/* Hand-drawn amber underline for a highlighted phrase. */
.hl {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M4 11.5C48 5.5 104 3.5 196 7' stroke='%23F2B544' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0 96%;
background-size: 100% 0.32em;
padding-bottom: 0.04em;
/* The phrase may wrap ("Anywhere in Michigan" is wider than a 390 px screen at hero size, and wider than
its column on wide screens with the fallback font or a larger text size; the hero clips overflow:
Astra's review 09-27, measured); each line keeps its own stroke. */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ======================================================================
4. Layout
====================================================================== */
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.container--wide { max-width: calc(1320px + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--white { background: var(--color-surface); }
.section--sky { background: var(--color-tint); }
.section--sage { background: var(--color-tint-sage); }
.section--navy { background: var(--color-band); color: var(--color-on-dark); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--color-on-dark); }
.section--navy p { color: var(--color-on-dark-muted); }
.section--navy a:not(.btn) { color: var(--color-on-dark); }
.stack > * + * { margin-top: var(--stack-space, var(--space-m)); }
.stack--s { --stack-space: var(--space-s); }
.stack--l { --stack-space: var(--space-xl); }
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, 0.75rem);
}
.grid { display: grid; gap: var(--grid-gap, clamp(1rem, 0.6rem + 1.5vw, 1.75rem)); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.split {
display: grid;
gap: var(--space-xl);
align-items: start;
}
@media (min-width: 900px) {
.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.split--wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.split--center { align-items: center; }
}
/* Prose (long-form content, blog posts, legal pages) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose h2 { font-size: var(--step-3); margin-top: 2em; margin-bottom: 0.4em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.6em; margin-bottom: 0.3em; }
.prose h2 + *, .prose h3 + * { margin-top: 0; }
.prose blockquote {
margin: 1.75em 0;
padding: 0.25em 0 0.25em 1.25em;
border-left: 4px solid var(--amber-400);
font-family: var(--font-display);
font-size: var(--step-1);
font-style: italic;
color: var(--color-heading);
}
.prose hr { margin: 2.5em 0; }
/* Section header */
.section-head { margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
.section-title { margin-bottom: 0.35em; }
.section-head .lead { margin-bottom: 0; }
/* ======================================================================
5. Motifs
====================================================================== */
.motif { pointer-events: none; }
/* ======================================================================
6. Buttons and links
====================================================================== */
.btn {
--btn-bg: var(--amber-400);
--btn-fg: var(--navy-900); /* primary: navy on amber in both themes (8.2:1) */
--btn-border: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 48px;
padding: 0.7rem 1.35rem;
border: 2px solid var(--btn-border);
border-radius: var(--radius-pill);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 650;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { color: var(--btn-fg); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(2px); }
.btn--primary { box-shadow: 0 1px 0 rgba(0, 39, 76, 0.12); }
.btn--primary:hover { --btn-bg: #F6C466; box-shadow: 0 1px 0 rgba(0, 39, 76, 0.12), 0 4px 12px rgba(242, 181, 68, 0.3); }
.btn--secondary { --btn-bg: var(--color-band); --btn-fg: var(--color-on-dark); }
.btn--secondary:hover { --btn-bg: var(--navy-700); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-heading); --btn-border: var(--color-heading); }
.btn--ghost:hover { --btn-bg: var(--color-tint-strong); }
.btn--light { --btn-bg: transparent; --btn-fg: var(--color-on-dark); --btn-border: rgba(var(--on-dark-rgb), 0.85); }
.btn--light:hover { --btn-bg: rgba(var(--on-dark-rgb), 0.1); --btn-border: var(--color-on-dark); }
.btn--sm { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.9375rem; }
.btn--lg { min-height: 54px; padding: 0.8rem 1.6rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.6; cursor: not-allowed; transform: none; }
.actions { --cluster-gap: 0.75rem; }
@media (max-width: 479.98px) {
.actions > .btn { width: 100%; }
.btn--lg { padding-inline: 1.1rem; font-size: 1rem; }
.cta-band { padding: 1.75rem 1.25rem; }
}
.arrow-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
font-weight: 650;
color: var(--color-heading);
text-decoration: none;
}
.arrow-link span { text-decoration: underline; text-decoration-color: var(--amber-400); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.arrow-link:hover span { text-decoration-color: var(--color-heading); }
.arrow-link .icon { transition: transform var(--dur) var(--ease); }
.arrow-link:hover .icon { transform: translateX(3px); }
.on-dark .arrow-link { color: var(--color-on-dark); }
.on-dark .arrow-link:hover span { text-decoration-color: var(--color-on-dark); }
/* ======================================================================
7. Cards
====================================================================== */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
background: var(--color-surface);
border: 1px solid rgba(var(--edge-rgb), 0.07);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card__title { font-size: var(--step-1); margin: 0; line-height: 1.25; }
.card__body { color: var(--color-muted); }
.card__body > :last-child { margin-bottom: 0; }
.card__icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--color-tint);
color: var(--color-heading);
margin-bottom: 0.35rem;
}
/* A service's own emblem on its card (2026-09-27): the same symbol its page opens with. */
.card__emblem { display: block; margin-bottom: 0.35rem; line-height: 0; }
.card__emblem .page-emblem { width: 64px; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.card__link:focus-visible { outline: none; }
.card--link:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(var(--edge-rgb), 0.14); }
.card__more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: auto;
padding-top: 0.35rem;
font-weight: 650;
font-size: 0.9375rem;
color: var(--color-link);
}
.card--link:hover .card__more .icon { transform: translateX(3px); }
.card__more .icon { transition: transform var(--dur) var(--ease); }
/* Featured cards (the two featured specialties until 2026-10-14; since then the six "What We Help With" cards, #87): a quiet
tint instead of a dark block, so they don't compete. */
.service-card--featured { background: var(--color-tint-strong); border-color: rgba(var(--edge-rgb), 0.12); }
.service-card--featured .card__title { color: var(--color-heading); }
.service-card--featured .card__body { color: var(--color-muted); }
.service-card--featured .card__icon { background: var(--amber-400); color: var(--navy-900); } /* both themes */
/* Phones: icon beside the text, so six cards don't become a very long scroll. */
@media (max-width: 639.98px) {
.service-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; row-gap: 0.3rem; align-items: start; padding: 1.15rem 1.15rem 1rem; }
.service-card > .card__icon { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; }
.service-card > .card__icon .icon { width: 22px; height: 22px; }
.service-card > .card__emblem { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.service-card > .card__emblem .page-emblem { width: 56px; }
.service-card { grid-template-columns: 56px minmax(0, 1fr); }
.service-card > :not(.card__icon):not(.card__emblem) { grid-column: 2; }
.service-card .card__more { padding-top: 0.15rem; }
/* The "What We Help With" cards (Tim, 2026-10-14, #87): no icon, so the text takes the card's full width. Written after
the rule above, with one class more, so it outranks it. */
.service-card.card-noicon { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.service-card.card-noicon > :not(.card__icon):not(.card__emblem) { grid-column: 1; }
}
/* Two featured cards side by side (home and services hub: brain injury, trauma and PTSD). */
@media (min-width: 640px) {
.service-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
}
/* "What we help with" (2026-09-25): the specialties as a quiet two-column list, name + one line.
Same treatment as the service pages' approach list: hairlines, amber-underlined names, no icons. */
.specialty-list { display: grid; gap: 0 clamp(2rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; max-width: 1040px; }
@media (min-width: 768px) {
.specialty-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.specialty { padding-block: 1rem 1.1rem; border-top: 1px solid var(--color-border); }
.specialty__name { margin: 0 0 0.25rem; font-size: var(--step-1); line-height: 1.3; }
/* The item names and the links inside a line ("adults", "children and teens") share ONE rule, so the two can never
drift (Tim, 2026-10-04: "I think the links should add the gold line underneath to keep the styling consistent";
this list only; sentence links elsewhere keep the quieter in-line style of `a` above). */
.specialty__name a, .specialty__line a { color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--amber-400); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.specialty__name a:hover, .specialty__line a:hover { text-decoration-color: var(--color-heading); }
.specialty__line { margin: 0; color: var(--color-muted); }
/* Team */
.team-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team-card {
position: relative;
display: grid;
grid-template-columns: 96px 1fr;
align-items: center;
gap: 1.1rem;
padding: 1.1rem 1.25rem;
background: var(--color-surface);
border: 1px solid rgba(var(--edge-rgb), 0.07);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (min-width: 560px) {
.team-card { grid-template-columns: 1fr; align-items: start; align-content: start; text-align: center; padding: 1.75rem 1.25rem 1.5rem; gap: 1.25rem; }
}
.team-card__name { font-size: var(--step-1); margin: 0 0 0.2rem; line-height: 1.25; }
.team-card__title { margin: 0; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.45; }
.team-card__summary { margin: 0.6rem 0 0; color: var(--color-muted); font-size: 0.9375rem; }
.headshot { position: relative; width: 100%; max-width: 156px; aspect-ratio: 1; margin-inline: auto; }
.headshot img {
width: 100%;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: 50% 50%; /* headshots are pre-cropped square and face-centred */
border-radius: 50%;
background: var(--color-tint);
filter: var(--photo-filter); /* dark theme: 8% dimmer, so faces don't glare on the dark page */
}
.headshot__ring {
position: absolute;
inset: -7%;
width: 114%;
height: 114%;
max-width: none;
color: var(--amber-400);
transform: rotate(-12deg);
}
/* The amber ring around each headshot stays on (Tim, 2026-09-24: "I like the head shot rings").
It frames a photo, so it doesn't count against the calm standard's one-floating-motif rule. */
/* Initials monogram for a clinician whose photo hasn't arrived yet (brief v3, 2026-09-25): the
emblem colours (a sky disc with navy lettering; in the dark theme a raised-navy disc with warm
off-white lettering) inside the same amber ring. The letters scale with the disc (cqi units). */
.headshot--monogram { container-type: inline-size; }
.headshot__monogram {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--color-tint);
box-shadow: inset 0 0 0 1px rgba(var(--edge-rgb), 0.1);
color: var(--color-heading);
font-family: var(--font-display);
font-weight: 600;
font-size: 1.75rem;
font-size: 34cqi;
letter-spacing: 0.03em;
line-height: 1;
user-select: none;
}
@media (forced-colors: active) {
.headshot__monogram { border: 1px solid CanvasText; }
}
/* ======================================================================
8. Chips, checklists, steps
====================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 40px;
padding: 0.4rem 0.95rem;
border-radius: var(--radius-pill);
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
}
.chip .icon { color: var(--color-accent); }
/* Trust chips (calm standard): a quiet row of checked phrases, not a cluster of pills. */
.chips--trust { gap: 0.35rem 1.5rem; }
.chips--trust .chip {
min-height: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
color: var(--color-muted);
font-weight: 600;
}
.chips--trust .chip .icon { width: 18px; height: 18px; }
.on-dark .chips--trust .chip { color: var(--color-on-dark-muted); }
/* Availability badge (Tim, 2026-09-28: "the same methodology as psychology today"; components.availabilityBadge):
one small pill under the name and role line on the team page and, since 2026-10-04, on the service pages'
"Who You Might Work With" cards (the same markup from the same source, so the two never disagree). In the chip
family (the pill shape, the icon before the words), smaller than a chip so it ranks below the name. The tint
follows the status (the success tint for accepting; the amber tint of the crisis card and legal callout for a
waitlist, beside the amber headshot ring; the sky tint for not accepting), and the words always show, so colour
is never the only signal. Role tokens only. Text >= 4.5:1, border and icon >= 3:1, both themes
(tools/check-contrast.py). Moved here from pages/about.css on 2026-10-04. */
.profile__status { margin: 0.55rem 0 0; }
.profile__status .chip--status {
min-height: 0;
gap: 0.35rem;
padding: 0.2rem 0.75rem 0.2rem 0.55rem;
font-size: 0.875rem;
font-weight: 650;
line-height: 1.35;
}
.chip--status .icon { flex: none; }
/* The narrowest phones (under 360px) wrap the words onto two lines: a rounded rectangle then (a pill looks
stretched when text wraps). */
@media (max-width: 359.98px) {
.profile__status .chip--status { border-radius: var(--radius-sm); }
}
.chip--accepting { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.chip--accepting .icon { color: var(--color-success); }
.chip--waitlist { background: var(--color-tint-amber); border-color: var(--color-accent); color: var(--color-heading); }
.chip--waitlist .icon { color: var(--color-accent); }
.chip--not-accepting { background: var(--color-tint); border-color: var(--color-border-strong); color: var(--color-muted); }
.chip--not-accepting .icon { color: var(--color-muted); }
.insurance__note { margin: 1rem 0 0; color: var(--color-muted); }
/* Insurance partners (Tim chose this layout from a mockup, 2026-10-08; components.insuranceList): a plain list, a gold
check before each name (the same token as the chips' check) and a hairline between the rows; from 640px, two columns
filled top to bottom. CSS columns keep the markup one list in config order (a screen reader hears the plans in order);
the component marks the item that starts the second column (the first half, rounded up, on the left) and the break is
forced there, so the split never depends on how the names wrap. No line above a column's first row or under its last.
No pills, boxes or payer logos. Role tokens only: the names and the check on the panel surface, the hairline, and a
pending plan's muted clock and status line are all in tools/check-contrast.py. */
.insurance-list { margin: 0; padding: 0; list-style: none; }
.insurance-list__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.6rem;
align-items: start;
padding: 0.6rem 0;
border-top: 1px solid var(--color-border);
break-inside: avoid;
font-weight: 600;
line-height: 1.4;
}
.insurance-list__item:first-child { border-top: 0; padding-top: 0; }
.insurance-list__item .icon { margin-top: 0.1em; color: var(--color-accent); }
.insurance-list__name { overflow-wrap: anywhere; }
.insurance-list abbr { text-decoration: none; }
.insurance-list__item--pending .icon { color: var(--color-muted); }
.insurance-list__status { grid-column: 2; font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: var(--color-muted); }
@media (min-width: 640px) {
.insurance-list { column-count: 2; column-gap: 2.5rem; }
.insurance-list__item--column-start { break-before: column; border-top: 0; padding-top: 0; }
}
.checklist li { display: flex; gap: 0.7rem; align-items: flex-start; }
.checklist li + li { margin-top: 0.7rem; }
.checklist .icon { margin-top: 0.2em; color: var(--color-accent); }
.on-dark .checklist .icon { color: var(--amber-400); }
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 900px) {
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}
.step { position: relative; display: flex; gap: 1rem; align-items: flex-start; }
@media (min-width: 900px) {
.step { flex-direction: column; gap: 1.1rem; }
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 28px;
left: 72px;
right: -1rem;
height: 2px;
background: var(--color-border);
}
}
.step__num {
flex: none;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-surface);
border: 2px solid var(--amber-400);
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
color: var(--color-heading);
}
.step__title { font-size: var(--step-1); margin: 0.35rem 0 0.35rem; }
.step__num svg { display: block; }
/* One under another at every width (inside a card), and smaller rings for a side box. */
@media (min-width: 900px) {
.steps.steps--stack { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.steps--stack .step { flex-direction: row; gap: 1rem; }
.steps--stack .step::after { content: none; }
}
.steps--compact { gap: 1rem; }
.steps--compact .step { gap: 0.8rem; }
.steps--compact .step__num { width: 40px; height: 40px; font-size: 1.15rem; }
.steps--compact .step__num svg { width: 20px; height: 20px; }
.steps--compact .step__title { font-size: var(--step-0); margin: 0.45rem 0 0.2rem; }
.steps--compact .step__body p { margin: 0; }
/* A step with a name and no sentence: the name centred on its ring. */
.steps--stack .step--solo { align-items: center; }
.steps--stack .step--solo .step__title { margin: 0; }
.step__body p { margin: 0; color: var(--color-muted); }
/* ======================================================================
9. Breadcrumbs
====================================================================== */
.breadcrumbs-wrap { padding-top: 1.1rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.breadcrumbs li { display: inline-flex; align-items: center; margin: 0; }
.breadcrumbs li + li::before {
content: '';
width: 6px;
height: 6px;
margin: 0 0.7rem 0 0.55rem;
border-top: 1.5px solid var(--color-muted);
border-right: 1.5px solid var(--color-muted);
transform: rotate(45deg);
}
.breadcrumbs a { color: var(--color-muted); text-decoration: underline; text-decoration-color: var(--color-underline-muted); display: inline-block; padding-block: 0.6rem; }
.breadcrumbs a:hover { color: var(--color-heading); text-decoration-color: currentColor; }
.breadcrumbs [aria-current='page'] { color: var(--color-text); font-weight: 600; }
/* ======================================================================
10. Page hero (inner pages)
====================================================================== */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-xl); }
.page-hero__text { max-width: 760px; }
.page-hero .page-title { font-size: var(--step-5); margin-bottom: 0.4em; }
.page-hero .lead { margin-bottom: 1.5rem; }
.page-hero .lead:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
.page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
}
/* Page emblem: the header's one motif (Tim approved the "framed emblems", 2026-09-24). A navy
symbol from the logo on a sky disc, framed by the headshot ring (same arcs, same -12deg turn),
so the ring always holds something. Large in the right-hand column on wide screens; small
beside the eyebrow on phones and on split heroes, whose right-hand column holds a card. The
![]()
width/height attributes reserve the space, so nothing shifts as it loads. */
.page-emblem { flex: none; aspect-ratio: 1; }
.page-emblem--small { width: 76px; }
.page-emblem--large { display: none; }
.hero-badge { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.hero-badge .eyebrow { margin: 0; }
.hero-badge .eyebrow::before { display: none; } /* the emblem replaces the amber dash */
@media (min-width: 900px) {
.page-hero--emblem:not(.page-hero--split) .page-hero__inner {
grid-template-columns: minmax(0, 760px) auto; justify-content: space-between; align-items: center; }
.page-hero--emblem:not(.page-hero--split) .page-emblem--large {
display: block; width: clamp(216px, 20vw, 264px); margin-right: clamp(0px, 3vw, 48px); }
/* The large emblem takes over: the small one goes, and the eyebrow gets its dash back. */
.page-hero--emblem:not(.page-hero--split) .hero-badge .page-emblem--small,
.page-hero--emblem:not(.page-hero--split) .hero-badge--solo { display: none; }
.page-hero--emblem:not(.page-hero--split) .hero-badge { margin-bottom: 0.9rem; }
.page-hero--emblem:not(.page-hero--split) .hero-badge .eyebrow::before { display: block; }
}
/* Form-first pages (the waitlist): below the large-emblem width the small badge steps aside,
so the form starts higher on phones (Tim, 2026-09-24). Desktop keeps the large emblem. */
@media (max-width: 899.98px) {
.page-hero--form-first .hero-badge { display: none; }
}
/* ======================================================================
11. FAQ
====================================================================== */
.faq { display: grid; gap: 0.75rem; max-width: 860px; }
.faq__item {
background: var(--color-surface);
border: 1px solid rgba(var(--edge-rgb), 0.1);
border-radius: var(--radius);
}
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 60px;
padding: 1rem 1.25rem;
cursor: pointer;
list-style: none;
font-weight: 650;
font-size: var(--step-0);
color: var(--color-heading);
border-radius: var(--radius);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__marker {
position: relative;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-tint);
}
.faq__marker::before, .faq__marker::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 2px;
margin: -1px 0 0 -6px;
border-radius: 2px;
background: var(--color-heading);
transition: transform var(--dur) var(--ease);
}
.faq__marker::after { transform: rotate(90deg); }
.faq__item[open] .faq__marker::after { transform: rotate(0deg); }
.faq__item[open] .faq__q { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.faq__a { padding: 0 1.25rem 1.25rem; color: var(--color-muted); }
.faq__a > :last-child { margin-bottom: 0; }
/* ----------------------------------------------------------------------
Progressive disclosure ("read more"), calm standard principle 3.
Markup: …
…
![]()
above
is the light drawing; only one of the two is shown). Same box as the ![]()
: its true 880:229
proportions, never stretched to the tagline's width (fixed 2026-09-24; it had been ~1.43x wide).
The link's accessible name is visually hidden text, the same in both themes. */
.wordmark__ink {
display: block;
height: 40px; /* 20% larger (Tim, 2026-09-25: 'Can we increase the size slightly') */
aspect-ratio: 880 / 229;
align-self: flex-start;
background: var(--logo-ink);
-webkit-mask: url('/assets/brand/logo-wordmark-white.png') center / 100% 100% no-repeat;
mask: url('/assets/brand/logo-wordmark-white.png') center / 100% 100% no-repeat;
}
@media (min-width: 1120px) {
.wordmark__ink { height: 48px; }
}
.footer-logo { display: inline-block; margin-bottom: 1.25rem; border-radius: 50%; }
.footer-logo img { display: block; width: 136px; height: auto; }
@media (min-width: 1120px) {
.wordmark__name { font-size: 1.6rem; }
.wordmark__tag { font-size: 0.6875rem; }
}
.header-cta { display: none; }
@media (min-width: 560px) and (max-width: 1119.98px) {
.header-cta { display: inline-flex; }
}
.menu-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
min-width: 44px;
padding: 0.5rem 0.8rem;
border: 1.5px solid rgba(var(--edge-rgb), 0.2);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-heading);
font: inherit;
font-weight: 650;
font-size: 0.9375rem;
cursor: pointer;
}
.menu-toggle:hover { border-color: var(--color-heading); }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded='true'] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded='true'] .menu-toggle__close { display: inline; }
.menu-toggle .icon { display: block; }
/* Light/dark toggle. theme.js removes [hidden] (so without JavaScript there is no toggle and the
site follows the device setting). Two copies, one visible at a time: a round icon button in the
header bar on desktop, placed in the free space left of the nav so nothing else moves; and a
row with a switch in the menu panel on phones and tablets. aria-pressed = dark mode is on. */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
padding: 0;
border: 1.5px solid rgba(var(--edge-rgb), 0.2);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-heading);
font: inherit;
cursor: pointer;
}
.theme-toggle:hover { border-color: var(--color-heading); }
.theme-toggle .icon { display: block; }
/* Bar button: the icon shows what a press does, a moon while the page is light and a sun while
it is dark. (The panel row keeps its moon; its switch shows the state.) */
.theme-toggle--bar .theme-toggle__sun,
.theme-toggle--bar[aria-pressed='true'] .theme-toggle__moon { display: none; }
.theme-toggle--bar[aria-pressed='true'] .theme-toggle__sun { display: block; }
.theme-toggle--panel { display: none; }
.theme-toggle__switch {
position: relative;
flex: none;
width: 48px;
height: 28px;
margin-left: auto;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-pill);
background: var(--color-surface);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle__switch::after {
content: '';
position: absolute;
top: 3.5px;
left: 3.5px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-muted);
transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.theme-toggle[aria-pressed='true'] .theme-toggle__switch { background: var(--color-label); border-color: var(--color-label); }
.theme-toggle[aria-pressed='true'] .theme-toggle__switch::after { transform: translateX(20px); background: var(--color-page); }
@media (max-width: 1119.98px) {
.theme-toggle--bar { display: none; }
.theme-toggle--panel {
display: flex;
justify-content: flex-start;
gap: 0.6rem;
width: 100%;
height: auto;
min-height: 52px;
padding: 0.65rem 0.25rem;
border: 0;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
background: none;
font-weight: 650;
font-size: 1.125rem;
text-align: left;
}
.theme-toggle--panel .icon { color: var(--color-label); }
}
@media (forced-colors: active) {
.theme-toggle__switch { border-color: ButtonText; }
.theme-toggle__switch::after { background: ButtonText; }
.theme-toggle[aria-pressed='true'] .theme-toggle__switch { background: Highlight; border-color: Highlight; }
.theme-toggle[aria-pressed='true'] .theme-toggle__switch::after { background: HighlightText; }
/* The wordmark draws in the system's text colour through its mask. The home logo's spans (.hero__mark,
.hero__bridge) have their own forced-colours block in section 19, after their normal background rules: a rule
here would lose to those by source order (review 2026-10-03, Astra on #30). */
.wordmark__ink { forced-color-adjust: none; background: CanvasText; }
}
.nav-list { display: flex; flex-direction: column; }
.nav-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
width: 100%;
min-height: 52px;
padding: 0.65rem 0.25rem;
border: 0;
background: none;
color: var(--color-text);
font: inherit;
font-weight: 650;
font-size: 1.125rem;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.nav-link:hover { color: var(--color-heading); }
.nav-link[aria-current='page'], .nav-item.is-active > .nav-link { color: var(--color-heading); }
.nav-toggle__chevron { transition: transform var(--dur) var(--ease); }
.nav-toggle[aria-expanded='true'] .nav-toggle__chevron { transform: rotate(180deg); }
.nav-sub { display: none; }
.nav-toggle[aria-expanded='true'] + .nav-sub { display: block; }
.nav-sub__list li + li { margin: 0; }
.nav-sub__link {
display: flex;
align-items: center;
min-height: 46px;
padding: 0.55rem 0.85rem;
border-radius: var(--radius-xs);
color: var(--color-text);
font-weight: 550;
text-decoration: none;
}
.nav-sub__link:hover { background: var(--color-tint); color: var(--color-heading); }
.nav-sub__link[aria-current='page'] { background: var(--color-tint-strong); color: var(--color-heading); font-weight: 650; }
.nav-sub__footer {
display: flex;
align-items: center;
gap: 0.4rem;
min-height: 46px;
margin-top: 0.35rem;
padding: 0.55rem 0.85rem;
border-top: 1px solid var(--color-border);
color: var(--color-link);
font-weight: 650;
font-size: 0.9375rem;
text-decoration: none;
}
.nav-sub__footer:hover { color: var(--color-heading); }
/* A small label over a second group in a menu ("What we help with" in Services). */
.nav-sub__label {
margin: 0.35rem 0 0;
padding: 0.75rem 0.85rem 0.25rem;
border-top: 1px solid var(--color-border);
color: var(--color-label);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.nav-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.nav-phone {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 44px;
color: var(--color-heading);
font-weight: 650;
text-decoration: none;
white-space: nowrap;
}
.nav-phone:hover { color: var(--color-link); text-decoration: underline; }
.nav-phone .icon { color: var(--color-label); }
/* Mobile / tablet: full-height panel */
@media (max-width: 1119.98px) {
.site-nav {
display: none;
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.75rem var(--gutter) 2rem;
background: var(--color-page);
border-top: 1px solid var(--color-border);
}
.site-header.is-open .site-nav { display: flex; flex-direction: column; gap: 1.25rem; }
.nav-item { border-bottom: 1px solid var(--color-border); }
.nav-sub { padding: 0 0 0.75rem; }
.nav-sub__link { font-size: 1.0625rem; }
.nav-actions { padding-top: 0.5rem; }
.nav-actions .btn { width: 100%; min-height: 52px; font-size: 1.0625rem; }
.nav-phone { font-size: 1.0625rem; }
html.nav-open { overflow: hidden; }
}
/* Desktop: inline nav with dropdown panels */
@media (min-width: 1120px) {
.menu-toggle { display: none; }
.site-nav { display: flex; align-items: center; gap: 1.1rem; }
.nav-list { flex-direction: row; align-items: center; gap: 0.1rem; }
.nav-item { position: relative; }
.nav-link {
width: auto;
min-height: 44px;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-pill);
font-size: 0.98rem;
}
.nav-link:hover, .nav-toggle[aria-expanded='true'] { background: rgba(var(--edge-rgb), 0.06); }
.nav-link[aria-current='page'], .nav-item.is-active > .nav-link { box-shadow: inset 0 -2px 0 var(--amber-400); border-radius: var(--radius-pill) var(--radius-pill) 4px 4px; }
.nav-sub {
position: absolute;
top: calc(100% + 10px);
left: -0.5rem;
min-width: 300px;
padding: 0.5rem;
background: var(--color-surface);
border: 1px solid rgba(var(--edge-rgb), 0.08);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.nav-toggle[aria-expanded='true'] + .nav-sub { animation: nav-in var(--dur) var(--ease); }
.nav-actions { flex-direction: row; align-items: center; gap: 1rem; }
/* Inquire Online stays on one line (card #97): with six items in the row it wrapped onto two from 1120 to 1180px; the
row is made to fit instead (the two bands below). */
.nav-actions .btn { white-space: nowrap; }
.nav-phone__label { color: var(--color-muted); font-weight: 600; }
}
/* 1120-1279px (card #97, 2026-10-23): the row holds six items since Team and Approach joined it, so its spacing tightens
here and here only: the links' side padding, and the gaps either side of the phone number. From 1280px nothing
changes. Measured at every width in docs/reviews/header-links-2026-10-23/built/measurements.txt. */
@media (min-width: 1120px) and (max-width: 1279.98px) {
.nav-link { padding-inline: 0.5rem; }
.site-nav { gap: 0.75rem; }
.nav-actions { gap: 0.75rem; }
}
@media (min-width: 1120px) and (max-width: 1239.98px) {
.nav-phone__label { display: none; }
}
/* 1120-1159px only: the tightest band. The header row's own gap and the links' side padding narrow a little more, which
leaves about 19px free at 1120 with nothing wrapping, overlapping or touching. Wider screens keep the band above. */
@media (min-width: 1120px) and (max-width: 1159.98px) {
.site-header__inner { gap: 0.5rem; }
.nav-link { padding-inline: 0.35rem; }
}
@keyframes nav-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* Without JavaScript: dropdowns open on focus/hover; the mobile nav is shown in-flow. */
@media (scripting: none) {
.nav-item--has-sub:hover > .nav-sub,
.nav-item--has-sub:focus-within > .nav-sub { display: block; }
.menu-toggle { display: none; }
@media (max-width: 1119.98px) {
.site-header { position: static; }
.site-header__inner { flex-wrap: wrap; height: auto; padding-block: 0.5rem; }
.site-nav { display: block; position: static; width: 100%; padding: 0; border: 0; background: none; }
.nav-sub { display: block; }
}
}
/* Mobile action bar */
.mobile-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
padding: 0.6rem 16px calc(0.6rem + env(safe-area-inset-bottom, 0px));
background: var(--color-mobile-bar);
border-top: 1px solid var(--color-border);
box-shadow: 0 -8px 24px rgba(0, 39, 76, 0.08);
}
.mobile-bar__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 50px;
border-radius: var(--radius-pill);
font-weight: 700;
text-decoration: none;
}
.mobile-bar__btn--call { border: 2px solid var(--color-heading); color: var(--color-heading); background: var(--color-surface); }
.mobile-bar__btn--join { background: var(--amber-400); color: var(--navy-900); } /* both themes */
.mobile-bar__btn--call:hover { color: var(--color-heading); }
.mobile-bar__btn--join:hover { color: var(--navy-900); } /* navy on amber in both themes */
/* Screens narrower than 340px (the 320px phones; Tim, 2026-10-08, "yes to both"): a little less gap and side padding on the
bar, so "Inquire Online" stays on one line (at 320px each button was 139px wide and the label needs 141; now 144), and
the inquiry column never narrower than its label (Astra, 2026-10-08: a 320px desktop window with a classic scrollbar
has about 305px, where equal columns gave the button 136.9px and it wrapped); the Call column takes what is left. A
container-only rule: the buttons' own rules above are unchanged. */
@media (max-width: 339.98px) {
.mobile-bar { gap: 0.45rem; padding-inline: 12px; grid-template-columns: 1fr minmax(max-content, 1fr); }
}
@media (max-width: 767.98px) {
body { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
.mobile-bar { display: none; }
}
/* ======================================================================
17. Footer
====================================================================== */
.site-footer {
position: relative;
padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
background: var(--color-footer);
box-shadow: var(--footer-edge); /* dark theme: a top hairline keeps it apart from the page */
color: var(--color-on-dark-muted);
font-size: 0.975rem;
}
.site-footer a { color: var(--color-on-dark); text-decoration-color: rgba(var(--on-dark-rgb), 0.45); }
.site-footer a:hover { color: var(--color-on-dark); text-decoration-color: var(--color-on-dark); }
.footer-grid { display: grid; gap: 2.25rem; }
/* Two columns from 640px: the brand column may grow to its minimum (the orchestrator, 2026-10-08, option A), so the email, its
one unbreakable string, stays whole in the band just above 640px where a 0-minimum track had broken it; the second column
keeps its 0 minimum. From 768px both tracks exceed that minimum, so nothing changes there or in the four columns from 1024. */
@media (min-width: 640px) { .footer-grid { grid-template-columns: minmax(auto, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; } }
.footer-brand .wordmark { margin-bottom: 1rem; }
.footer-mission { max-width: 34ch; margin-bottom: 1.25rem; }
.nap--footer { margin-bottom: 1rem; }
.nap--footer .nap__line:first-child { color: var(--color-on-dark); }
.nap--footer .nap__directions { gap: 1rem; color: var(--color-on-dark); }
.footer-contact li { display: flex; gap: 1rem; align-items: flex-start; }
.footer-contact li + li { margin-top: 0.5rem; }
.footer-contact .icon { margin-top: 0.2em; color: var(--amber-400); }
/* One icon slot for every footer contact row (the orchestrator, 2026-10-08): 24px wide with the icon centred, and the same
1rem gap on the directions link above, so the words of every row (Get directions, Call, Fax, the email, LinkedIn) start
at the same place whatever the icon's own width. The gap is 1rem (16px) for the LinkedIn logo's clear space (below). The 18px line icons keep their size: an SVG's viewBox centres the drawing
in the wider box. The LinkedIn logo keeps its 22px height and its own proportion: object-fit: contain places it in the
slot without stretching it. */
.footer-contact li > .icon, .nap--footer .nap__directions > .icon, .footer-contact .linkedin-logo { flex: none; width: 24px; }
/* LinkedIn's official logo (2026-10-08; components.linkedInLogo): 22px tall at the file's own proportion, never stretched.
Clear space of at least the logo's cap height on every side (LinkedIn's rule; Astra, 2026-10-08: about 16px at this size):
the row's 1rem gap on the right, the page gutter (16px or more) on the left, and 0.5rem of its own above and below, which
with the 0.5rem row spacing is 16px to the row above; measured as rendered by docs/reviews/insurance-linkedin-2026-10-08/
fit-check.mjs. The footer is dark in both themes, so it is always the white bug. */
.footer-contact .linkedin-logo { height: 22px; object-fit: contain; margin: 0.5rem 0; }
/* The LinkedIn row (Tim, 2026-10-13, #84: "move the follow us down to align with the bottom of the linked in emblem"): the
logo and its words align on their baselines. A replaced element's baseline is its border box's bottom edge, so the words'
baseline, the line the letters sit on, meets the logo's bottom edge; the logo, the item with the greater distance from
the row's top to its baseline (its 0.5rem margin plus 22px), stays at the top with its margins, so its size and clear
space are unchanged. Reached through the logo's own class, so the markup and the other rows (align-items: flex-start)
are untouched. Measured at 390, 768 and 1280px by docs/reviews/instant-anchors-2026-10-13/linkedin-check.mjs. */
.footer-contact .linkedin-logo, .footer-contact .linkedin-logo + span { align-self: baseline; }
.footer-title {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--amber-400);
margin: 0 0 1rem;
}
.footer-title--spaced { margin-top: 2rem; }
.footer-links li + li { margin-top: 0.15rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-small { margin: 0.9rem 0 0; font-size: var(--step--1); }
.hours--footer .hours__list > div { flex-direction: column; gap: 0; border-color: rgba(var(--on-dark-rgb), 0.16); }
.hours--footer .hours__list dd { text-align: left; }
.hours--footer .hours__list dt { color: var(--color-on-dark); }
.hours--footer .hours__note { color: var(--color-on-dark-muted); }
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 2rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(var(--on-dark-rgb), 0.14);
font-size: var(--step--1);
}
.footer-bottom p { margin: 0; }
/* ======================================================================
18. Blog post basics (post template; the blog area may extend this)
====================================================================== */
.post-header { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.post-header h1 { font-size: var(--step-4); }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; color: var(--color-muted); font-size: 0.9375rem; }
.post-body { padding-bottom: var(--section-y); }
.post-body .prose { font-size: var(--step-0); }
/* ======================================================================
19. Home page (calm standard: hero, services, why, team, getting started)
====================================================================== */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
@media (min-width: 960px) {
.hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.hero__title { font-size: var(--step-5); max-width: 13em; margin-bottom: 0.5em; }
/* One H1, two visible lines (Tim, 2026-09-24, version B): the large line, then a smaller
descriptive line directly beneath it. */
.hero__title-main { display: block; }
.hero__title-sub {
display: block;
margin-top: 0.5em;
max-width: 24em;
font-size: 0.5em;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0;
}
.hero__lead { font-size: var(--step-1); line-height: 1.6; color: var(--color-muted); max-width: 52ch; margin-bottom: 2rem; }
.hero .actions { margin-bottom: 1.75rem; }
/* The honest capacity line, right under the actions (brief v3: the practice is currently full). */
.hero__capacity { margin: -0.5rem 0 1.5rem; max-width: 52ch; color: var(--color-muted); font-size: 0.9375rem; }
/* The page's one decorative motif: the Personal Courage logo (brush circle, bird and the script
name; the tagline is dropped because the H1 beside it says the same) with the Grand Rapids
skyline drawn into the gap (website artwork, brand-src/skyline/) in navy. From 960 px it fills the hero's second
column; under 960 px it sits beside the headline (the phone layout, below; until 2026-10-08 it was hidden there).
Colour: the logo stays in its own ink (plus the Blue Bridge). Tim compared a gold brush circle on
2026-09-26, dark and light, and kept the original: gold stays the page's accent, not the logo's. */
.hero__visual { position: relative; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 1; }
.hero__mark, .hero__bridge { position: absolute; inset: 0; }
.hero__mark {
background: var(--logo-ink);
-webkit-mask: url('/assets/brand/logo-circle-skyline-nobridge-white.png') center / contain no-repeat;
mask: url('/assets/brand/logo-circle-skyline-nobridge-white.png') center / contain no-repeat;
}
/* The Blue Bridge in its own colour (Tim, 2026-09-25): Grand Valley's Laker Blue lightened just enough
to read on the dark background. ONE value in both themes, like the amber accent: accents stay
constant, only ink adapts (see docs/SCOPE-ANSWERS.md). */
.hero__bridge {
background: var(--bridge-blue);
-webkit-mask: url('/assets/brand/logo-skyline-bridge-white.png') center / contain no-repeat;
mask: url('/assets/brand/logo-skyline-bridge-white.png') center / contain no-repeat;
}
/* The phoenix's first frame (2026-10-03, issue #15; brief docs/briefs/phoenix-first-frame-2026-10-03.md).
hero-phoenix.js (below) hides this logo for its arrival, but it is deferred, so the page could paint the finished
logo for about a frame before the script ran. theme.js runs before the first paint and, when the arrival is
likely to play (its rules are the script's: motion allowed, the first home view this visit or a reload; at every
width since 2026-10-08), puts .phoenix-pending on . Under it the home hero's logo alone starts hidden: the one element with
the points' address, which only the home page has. The script takes the class off as it takes the logo over
(under its own hide) or when the arrival will not play. The safety net needs no script: the one animation holds
the logo hidden for the loading grace (1.5 s, the script's GRACE; `both` applies the first keyframe during the
delay) and then fades it in over the logo fade (1.2 s, its LOGO_FADE), whole by 2.7 s, even if the script never
runs, fails or is blocked; a visitor is never left with a blank hero. Without JavaScript and with reduced motion
there is no class, so nothing here applies. (Section 21 shortens every animation under reduced
motion; on the rare load that set the class and then turned reduced motion on before the script took it off,
that makes the fade a step, after the same grace: still a visible logo.) tests/hero-phoenix.test.cjs pins the
selector and the timings to the script's. */
.phoenix-pending .hero__visual[data-phoenix-points] { animation: phoenix-pending-reveal 1.2s ease-in-out 1.5s both; }
@keyframes phoenix-pending-reveal { from { opacity: 0; } to { opacity: 1; } }
/* Forced colours (Windows high contrast): both logo spans draw in the system's text colour through their masks, at
every width. This block must come AFTER the two background rules above: the header's rule in section 13 used to
cover the logo too and lost to them by source order, leaving the author's navy on a black forced background
(review 2026-10-03, Astra on #30, LOW 1). Nothing here applies outside forced colours. */
@media (forced-colors: active) {
.hero__mark, .hero__bridge { forced-color-adjust: none; background: CanvasText; }
}
/* The phone layout (Tim, 2026-10-08, option A; brief docs/briefs/hero-phone-phoenix-2026-10-08.md). From his own
phone's screenshot: "I think we could shrink down the Where Courage Meets Healing enough to fit the animated logo
on at least larger phone screens"; shown the mockup: "yes, go with A". It replaces the still phone logo of
2026-10-03 (issue #26, "B at 140"), which on his phone sat behind the fixed Call / Inquire Online bar. Under 960 px
the animated logo, the same element as on desktop, sits to the right of the H1, each centred on the other (the
grid's align-items), and everything else in the hero runs full width below, in today's order.
- The copy's box dissolves into the grid (display: contents; on a plain div this changes nothing for assistive
technology), so the H1 and the logo can share the first row while the source stays copy first, logo last: a
screen reader meets the headline, the text and the two buttons before the logo's replay button.
- The logo is 34% of the content width (the mockup's rule, measured at 430, 393 and 360 px; phones up to 430 px
get 98 to 135 px) and never over 180 px, from about 575 px up: the brief allowed up to 240, and 180 is the
largest cap at which the hero's "Inquire Online" button sits no lower than before at 768 and 959 px (measured:
+7 and 0 px; at 240, +67 and +50). At 600 px it sits 28 px lower whatever the cap, because the sub-line wraps
beside any logo wider than about 130 px (docs/reviews/hero-phone-phoenix-2026-10-08/RESULTS.md). 12 px
(--space-xs) from the headline's column.
- The headline's size is the largest that lets its widest unbreakable line, "Where Courage", fit the column with
4 px to spare: the column is the content width less the logo and the gap, and that line is 6.93 times the font
size in Spectral (measured 6.922 in Chrome; the constant rounds up, so the spare is never under 4 px); never
larger than today's --step-5. The grid is the size container the cqi units measure (its content box, inside the
gutters). The line before it is the same arithmetic from the viewport, for a browser without container query
units; the two differ only by a classic scrollbar, which the viewport counts.
- The fallback font: Georgia Bold's "Where Courage" is 7.886 times the font size (measured), 14% wider than
Spectral's, so sized for Spectral it ran 8 to 18 px into the logo's box at 320 to 430 px while the web font
loads, or for good where it never comes. The local face below scales Georgia to Spectral's width (size-adjust
87.7%: the same advance widths, so the lines fit and the swap to Spectral moves nothing); where that face cannot
resolve (no Georgia: Android) or size-adjust is unknown, the two headline lines may wrap rather than overlap the
logo (the wrap guard, the last block below, phones under 600 px only; in Spectral they fit by construction, so
they never wrap). The guard stops at 600 px because it is safe only where the column cannot hold "Where Courage
Meets" on one line: while the headline is column-driven the column is 6.93 x font + 4 px and that never fits, but
from about 505 px the headline is capped at --step-5 and the column grows, reaching the room for it near 740 px,
where a browser without text-wrap: balance (Safari before 17.5, Firefox before 121) would break the lines "Where
Courage Meets / Healing" (the orchestrator's check, 2026-10-08; measured with balance off at 600, 768 and 959 px).
- The rows keep today's spacing: the desktop gap goes (row-gap: 0), and the copy's own margins, which never
adjoined in block flow either, space the rows as before.
Without JavaScript, with reduced motion, and under .phoenix-pending's first-frame hide (an opacity, so the box
stays) the still logo sits in this same place. From 960 px nothing here applies: the desktop hero is unchanged. */
@font-face { font-family: 'Spectral Fallback'; src: local('Georgia'); font-weight: 400; size-adjust: 87.7%; }
@font-face { font-family: 'Spectral Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 700; size-adjust: 87.7%; }
@media (max-width: 959.98px) {
.hero__grid { container-type: inline-size; grid-template-columns: minmax(0, 1fr) min(34%, 180px); column-gap: var(--space-xs); row-gap: 0; }
.hero__copy { display: contents; }
.hero__copy > * { grid-column: 1 / -1; }
.hero__copy > .hero__title {
grid-column: 1;
grid-row: 1;
font-family: 'Spectral', 'Spectral Fallback', Georgia, 'Times New Roman', serif;
font-size: min(var(--step-5), calc((0.66 * (100vw - 2 * var(--gutter)) - 16px) / 6.93));
font-size: min(var(--step-5), calc((100cqi - min(34cqi, 180px) - 16px) / 6.93));
}
.hero__visual { grid-column: 2; grid-row: 1; }
}
/* The wrap guard (see the fallback font above): phones only. */
@media (max-width: 599.98px) {
.hero__copy > .hero__title .nowrap { white-space: normal; }
}
/* Enlarged text (Astra's review of 924ab92, 2026-10-08: W3C failure F94 under WCAG 1.4.4, Resize Text). The phone
headline above is sized by the width (cqi, or vw in its fallback line), so a visitor who raises the browser's default
font size got the same headline and sub-line: --step-5 grows with the default (its rem parts), the width term does
not. A rem floor cannot mend it: the floor may be at most 1.57rem (the 320 px size, or the default rendering changes),
and at 32 px a 50 px "Courage" is wider than the 178 px column, so it would touch the logo. When text is enlarged the
hero therefore stacks: one column, the headline at --step-5 (capped only so its longest word fits the width: "Courage"
is about 3.7 times the font size, and 76 px of it would clip at 320 px), its lines free to wrap, the logo below it at
its phone size. "Enlarged" is read from em-based media queries (em there is the user's default font size, never the
page's) paired with px floors, in range syntax with strict ceilings (Astra's recheck, 2026-10-08: a plain max-width is
inclusive, and 25em at 16 px is exactly 400 px; the old 19.99em and 24.99em also left 399.8 to 400 and 499.8 to 500 px
uncovered at 20 px, widths that page zoom can produce). So nothing here applies at the default 16 px from 320 px up:
(width < 20em) is under 320 px at 16 px, below the site's narrowest width, and under 640 px at 32; (400px <= width <
25em) is empty at 16 px (400 <= v < 400) and 400 to 799.99 px at 32; (500px <= width < 31.25em) likewise. Each rung
is also (width < 960px), so the desktop is never touched. At 20 px or more the rungs cover 320 to 959.99 px without a
gap (at 20 px: under 400, 400 to 499.99, 500 to 624.99), which is where the two columns cannot hold --step-5 at the
user's size (they can from about 600 px at 20 px and 800 px at 32); between 16 and 20 px they leave gaps, where the
two columns stay with their width-fitted headline (at least about 1.6 times the user's size). A browser without
range syntax (Chrome before 104, Safari before 16.4, Firefox before 63) takes each rung as "not all": the rule does
not apply, and the default-size rendering is today's. Page zoom halves the CSS viewport and leaves the default font
alone: a 390 px phone at 200% (195 CSS px) takes the first rung and the headline doubles in device pixels; a tablet
at 200% reflows as the phone half its width. Measured in the review's check.mjs ("textsize" and "bounds"). */
@media (width < 20em) and (width < 960px), (400px <= width < 25em) and (width < 960px), (500px <= width < 31.25em) and (width < 960px) {
.hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero__copy > .hero__title {
font-size: var(--step-5);
font-size: min(var(--step-5), calc(100cqi / 3.95));
}
.hero__copy > .hero__title .nowrap { white-space: normal; }
.hero__visual { grid-column: 1; grid-row: 2; width: min(34%, 180px); margin: 0 0 var(--space-m); }
}
/* The phoenix arrival on the hero logo (hero-phoenix.js; Tim, 2026-09-29: "I think A is ready to be place on
the site"). Everything below .hero__visual's tokens is added by the script, and only for visitors who will
see it move: without JavaScript and with reduced motion the hero is exactly as above, at every width.
Colours, scoped to the hero and following the site's theme rules (light here, dark in the two guarded blocks
below, which must match): --phoenix-ember is a moving ember, --phoenix-ember-soft the gold it passes through
as it cools to --phoenix-rest (the logo's own ink) on landing, --phoenix-glow the warm light, and
--phoenix-blend how the dots add up (dark: added light; light: painted). --phoenix-canvas-blend: on the light
theme the canvas multiplies onto the page, so the warm light tints the cream page gold while the navy logo
under it stays navy (plain alpha would wash it toward olive). */
.hero__visual {
--phoenix-ember: var(--amber-600);
--phoenix-ember-soft: #D9A441;
--phoenix-rest: var(--logo-ink);
--phoenix-glow: rgba(185, 122, 14, 0.12);
--phoenix-blend: source-over;
--phoenix-canvas-blend: multiply;
}
@media screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hero__visual {
--phoenix-ember: var(--amber-400);
--phoenix-ember-soft: #F7D9A0;
--phoenix-glow: rgba(242, 181, 68, 0.16);
--phoenix-blend: lighter;
--phoenix-canvas-blend: normal;
}
}
@media screen {
:root[data-theme="dark"] .hero__visual {
--phoenix-ember: var(--amber-400);
--phoenix-ember-soft: #F7D9A0;
--phoenix-glow: rgba(242, 181, 68, 0.16);
--phoenix-blend: lighter;
--phoenix-canvas-blend: normal;
}
}
/* The script's wrapper around .hero__mark and .hero__bridge: the light's reveal is a mask on it. */
.hero__logo { position: absolute; inset: 0; }
/* The canvas is larger than the logo so the glow around the mark is never clipped: the approved mockup drew
the mark at 0.43 of its canvas, which makes the logo's 832 px frame 0.8673 of it, so the canvas reaches
7.65% past the logo on every side (the script measures the logo itself, so the points always land on it).
No z-index here, on purpose: a stacking context would cut the canvas off from the logo it multiplies onto. */
.hero__stage { position: absolute; inset: -7.65%; }
.hero__phoenix {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; mix-blend-mode: var(--phoenix-canvas-blend);
}
/* The bridge lights' own layer, never multiplied: on the light theme a multiplied warm point over the Blue
Bridge turns dark, not lit. */
.hero__phoenix--lights { mix-blend-mode: normal; }
/* The logo is its own control (Tim, 2026-09-29: "if a user clicks on the emblem it will run the animation
again"): a real button over the drawing, a circle just outside the ring, so its focus ring circles the logo. No
visible words, and not .btn. While the arrival plays (under 5 s, so no Pause: WCAG 2.2.2 does not apply)
pressing it skips the arrival; at rest it replays it. */
.hero__replay {
position: absolute; inset: 3%; margin: 0; padding: 0;
border: 0; border-radius: 50%; background: transparent; cursor: pointer;
-webkit-tap-highlight-color: transparent; touch-action: pan-y;
}
.hero__replay:focus-visible { border-radius: 50%; }
/* Services */
.home-note { margin: 2rem 0 0; color: var(--color-muted); }
/* Why Personal Courage: four short points in two columns, separated by a hairline (no icons, no cards). */
.why-list { display: grid; gap: 2rem; }
@media (min-width: 900px) {
.why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
}
.why-point { padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.why-point__title { font-size: var(--step-1); margin: 0 0 0.4rem; line-height: 1.25; }
.why-point p { margin: 0; color: var(--color-muted); max-width: 38ch; }
/* Team: faces with a name and title, no cards or rings. */
.home-team .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
@media (min-width: 640px) { .home-team .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
@media (min-width: 1024px) { .home-team .team-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.home-team .team-card {
grid-template-columns: 1fr;
align-content: start;
gap: 0.85rem;
padding: 0;
text-align: center;
background: none;
border: 0;
box-shadow: none;
}
.home-team .headshot { max-width: 112px; }
.home-team .team-card__name { font-size: 1.0625rem; }
.home-team .team-card__title { font-size: 0.875rem; }
.home-team__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; margin-top: 2.5rem; }
/* A quiet text link (no arrow, no accent), for secondary paths such as careers. */
.quiet-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); font-size: 0.9375rem; text-decoration-color: var(--color-underline-muted); }
.quiet-link:hover { color: var(--color-heading); text-decoration-color: currentColor; }
/* Getting started: steps, one insurance line, the call to action. */
.home-start__note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; margin: 2.5rem 0 0; color: var(--color-muted); }
.home-start__actions { margin-top: 1.25rem; }
/* ----------------------------------------------------------------------
Legacy home classes, kept so older markup keeps working (the calm home no
longer uses them): hero cards and chips, brain injury band, pillars, visit card,
insurance split, careers teaser (also used on the team page), stats, quote.
---------------------------------------------------------------------- */
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__sweep { position: absolute; left: 45%; right: 0; bottom: 0; width: 55%; height: 60%; color: rgba(var(--edge-rgb), 0.08); }
@media (max-width: 1023.98px) { .hero__sweep { display: none; } }
.hero__dot { position: absolute; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--sage-300); opacity: 0.55; right: 2%; bottom: 14%; }
.hero-card {
position: absolute;
left: 50%;
top: 50%;
width: min(80%, 340px);
transform: translate(-50%, -54%);
padding: 1.35rem 1.4rem 1.25rem;
background: var(--color-surface);
border-radius: 22px;
box-shadow: var(--shadow-lg);
}
.hero-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--color-heading); margin: 0 0 0.85rem; line-height: 1.2; }
.hero-card__list li { display: flex; align-items: center; gap: 0.65rem; padding-block: 0.42rem; border-top: 1px solid var(--color-border); font-weight: 600; font-size: 0.95rem; color: var(--color-text); }
.hero-card__list li:first-child { border-top: 0; }
.hero-card__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-tint); color: var(--color-heading); flex: none; }
.hero-team {
position: absolute;
left: 50%;
bottom: 3%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem 0.5rem 0.55rem;
background: var(--color-surface);
border-radius: var(--radius-pill);
box-shadow: var(--shadow);
text-decoration: none;
color: var(--color-heading);
font-weight: 650;
font-size: 0.9375rem;
white-space: nowrap;
min-height: 52px;
}
.hero-team:hover { color: var(--color-heading); box-shadow: var(--shadow-lg); }
.hero-team__faces { display: flex; flex: none; }
.hero-team__faces img { flex: none; max-width: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 50%; border: 2px solid var(--color-surface); background: var(--color-tint); }
.hero-team__faces img + img { margin-left: -12px; }
.hero-team .icon { color: var(--color-label); transition: transform var(--dur) var(--ease); }
.hero-team:hover .icon { transform: translateX(3px); }
.hero-float {
position: absolute;
left: -2%;
top: 9%;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 0.9rem;
background: var(--color-band);
color: var(--color-on-dark);
border-radius: var(--radius-pill);
box-shadow: var(--shadow);
font-size: 0.875rem;
font-weight: 650;
}
.hero-float .icon { color: var(--amber-400); }
@media (max-width: 479.98px) {
.hero-card { position: relative; left: auto; top: auto; transform: none; width: 100%; }
.hero-team { position: relative; left: auto; bottom: auto; transform: none; margin-bottom: 1.25rem; }
.hero-float { left: 0; top: 0; }
}
/* Services on home (legacy footer row) */
.home-services__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.home-services__foot p { margin: 0; color: var(--color-muted); }
/* Brain injury band */
.bi-band { overflow: hidden; }
.bi-band__ring { position: absolute; width: 520px; left: -300px; bottom: -330px; color: var(--color-label); opacity: 0.9; }
.bi-band__sweep { position: absolute; inset: 0 0 auto auto; width: 60%; height: 60%; color: rgba(var(--on-dark-rgb), 0.07); }
.bi-band .container { position: relative; z-index: 1; }
.bi-band h2 { font-size: var(--step-4); }
.bi-band__lead { font-size: var(--step-1); max-width: 56ch; }
.bi-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 2rem; max-width: 520px; }
.bi-stat { padding: 1rem 1.1rem; border-radius: var(--radius); background: rgba(var(--on-dark-rgb), 0.06); border: 1px solid rgba(var(--on-dark-rgb), 0.14); }
.bi-stat__num { display: block; font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--amber-400); font-weight: 600; }
.bi-stat__label { display: block; margin-top: 0.4rem; color: var(--color-on-dark-muted); font-size: 0.9375rem; line-height: 1.4; }
.bi-disciplines { display: grid; gap: 0.9rem; }
@media (min-width: 560px) { .bi-disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bi-discipline {
padding: 1.25rem;
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.bi-discipline h3 { font-size: var(--step-1); color: var(--color-heading); margin: 0.75rem 0 0.35rem; }
.section--navy .bi-discipline p { color: var(--color-muted); margin: 0; font-size: 0.9375rem; }
.bi-discipline .card__icon { width: 46px; height: 46px; margin: 0; }
.bi-discipline:nth-child(even) { transform: translateY(1.25rem); }
@media (max-width: 559.98px) { .bi-discipline:nth-child(even) { transform: none; } }
/* Shared home bits */
.section-foot { margin: 1.75rem 0 0; }
.steps-cta { display: flex; justify-content: center; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.steps-cta .actions { justify-content: center; }
.visit-card__note { margin: 1rem 0 0; color: var(--color-muted); font-size: 0.9375rem; }
.cta-band__quote { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 3px solid var(--amber-400); }
.cta-band__quote blockquote { margin: 0; }
.cta-band__quote p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--color-on-dark); }
.cta-band__quote figcaption { margin-top: 0.3rem; font-size: 0.9375rem; color: var(--color-on-dark-muted); }
.cta-band__quote figcaption::before { content: '\2014\00a0'; }
/* Approach */
.approach__quote { position: relative; }
.approach__title { font-size: var(--step-4); font-style: italic; font-weight: 500; line-height: 1.08; max-width: 14ch; }
.pillars { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pillar { padding: 1.35rem; border-radius: var(--radius); background: var(--color-surface); border: 1px solid rgba(var(--edge-rgb), 0.07); box-shadow: var(--shadow-sm); }
.pillar h3 { font-size: var(--step-1); margin: 0.8rem 0 0.35rem; }
.pillar p { margin: 0; color: var(--color-muted); font-size: 0.975rem; }
.pillar .card__icon { width: 46px; height: 46px; margin: 0; background: var(--color-tint-amber); }
/* Insurance + how it works */
.home-insurance { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .home-insurance { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 4rem; } }
/* Visit */
.visit-card {
position: relative;
overflow: hidden;
display: grid;
gap: 2rem;
padding: clamp(1.5rem, 1rem + 3vw, 3rem);
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid rgba(var(--edge-rgb), 0.07);
box-shadow: var(--shadow);
}
@media (min-width: 900px) { .visit-card { grid-template-columns: 1fr 0.95fr 1.2fr; gap: 3rem; } }
@media (max-width: 899.98px) { .visit-card { grid-template-columns: minmax(0, 1fr); } }
.visit-card h2 { font-size: var(--step-3); }
.visit-card h3 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-label); margin: 0 0 0.9rem; }
.visit-card .nap { margin-bottom: 1.25rem; }
.visit-card > *:not(.motif) { position: relative; }
/* Careers teaser */
.careers-teaser {
display: grid;
gap: 1.5rem;
align-items: center;
padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
border-radius: var(--radius-lg);
background: var(--color-tint-sage);
border: 1px solid rgba(var(--edge-rgb), 0.06);
}
@media (min-width: 900px) { .careers-teaser { grid-template-columns: auto 1fr auto; gap: 2rem; } }
.careers-teaser .btn { justify-self: start; }
.careers-teaser__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-surface); color: var(--color-heading); box-shadow: var(--shadow-sm); }
.careers-teaser h2 { font-size: var(--step-3); margin-bottom: 0.25em; }
.careers-teaser p { margin: 0; color: var(--color-muted); max-width: 60ch; }
/* ======================================================================
20. 404
====================================================================== */
.not-found__links { margin-top: 2rem; }
/* ======================================================================
21. Reduced motion
====================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.btn:hover, .card--link:hover, .team-card:hover { transform: none; }
}
/* ======================================================================
22. Print
====================================================================== */
@media print {
.site-header, .mobile-bar, .skip-link, .hero__bg, .motif, .page-emblem { display: none !important; }
body { background: #fff; padding: 0; }
.site-footer { background: #fff; color: #000; }
}