/* =========================================================================
   Tommy Taylor — design system
   Carries over the live site's tokens (light/dark, diagonal-line pattern,
   rounded cards, pill tags) and layers on Fraunces serif for H1s plus a
   site-wide accent for CTAs and links.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */

:root {
	--bg: #fafafa;
	--fg: #0b0c10;
	--muted: #555555;
	--card: #ffffff;
	--pill: #f0f2f7;
	--accent: #1f3a8a;
	--accent-ink: #ffffff;
	--warm: #fff9cd;
	--shadow: 0 8px 24px rgba(0, 0, 0, .08);
	--shadow-lift: 0 14px 32px rgba(0, 0, 0, .12);
	--maxw: 980px;
	--prose: 660px;
	--radius: 16px;
	--radius-sm: 10px;
	--radius-pill: 999px;
	--pattern-stroke: 999999;
	--pattern-opacity: 0.35;
	--ease: cubic-bezier(.2, .8, .2, 1);
}

/* WordPress emits `:root { --wp--preset--color--bg: #fafafa; }` after our
 * stylesheet, so plain `:root` and `[data-theme-mode="dark"]` selectors lose
 * to it (same specificity, source order wins). We need >= (0,0,2,0).
 *
 *   :root:root                       → 0,0,2,0
 *   :root[data-theme-mode="dark"]    → 0,0,2,0
 *
 * Both beat WP's :root (0,0,1,0). */

@media (prefers-color-scheme: dark) {
	:root:root {
		--bg: #0b0c10;
		--fg: #ffffff;
		--muted: #c9c9cf;
		--card: #111219;
		--pill: #171823;
		--accent: #7da7ff;
		--accent-ink: #0b0c10;
		--shadow: 0 10px 30px rgba(0, 0, 0, .25);
		--shadow-lift: 0 18px 38px rgba(0, 0, 0, .35);
		--pattern-stroke: 333333;
		--wp--preset--color--bg: #0b0c10;
		--wp--preset--color--fg: #ffffff;
		--wp--preset--color--muted: #c9c9cf;
		--wp--preset--color--card: #111219;
		--wp--preset--color--pill: #171823;
		--wp--preset--color--accent: #7da7ff;
	}
}

:root[data-theme-mode="light"] {
	color-scheme: light;
	--bg: #fafafa;
	--fg: #0b0c10;
	--muted: #555555;
	--card: #ffffff;
	--pill: #f0f2f7;
	--accent: #1f3a8a;
	--accent-ink: #ffffff;
	--shadow: 0 8px 24px rgba(0, 0, 0, .08);
	--shadow-lift: 0 14px 32px rgba(0, 0, 0, .12);
	--pattern-stroke: 999999;
	--wp--preset--color--bg: #fafafa;
	--wp--preset--color--fg: #0b0c10;
	--wp--preset--color--muted: #555555;
	--wp--preset--color--card: #ffffff;
	--wp--preset--color--pill: #f0f2f7;
	--wp--preset--color--accent: #1f3a8a;
}

:root[data-theme-mode="dark"] {
	color-scheme: dark;
	--bg: #0b0c10;
	--fg: #ffffff;
	--muted: #c9c9cf;
	--card: #111219;
	--pill: #171823;
	--accent: #7da7ff;
	--accent-ink: #0b0c10;
	--shadow: 0 10px 30px rgba(0, 0, 0, .25);
	--shadow-lift: 0 18px 38px rgba(0, 0, 0, .35);
	--pattern-stroke: 333333;
	--wp--preset--color--bg: #0b0c10;
	--wp--preset--color--fg: #ffffff;
	--wp--preset--color--muted: #c9c9cf;
	--wp--preset--color--card: #111219;
	--wp--preset--color--pill: #171823;
	--wp--preset--color--accent: #7da7ff;
}

/* ---------- 2. Fonts ---------- */
/* Fraunces variable, self-hosted. Roman (wght 100-900) only — no italic, kept lean. */
@font-face {
	font-family: "Fraunces";
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/Fraunces.woff2") format("woff2-variations"),
	     url("../fonts/Fraunces.woff2") format("woff2");
}

/* ---------- 3. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { padding: 0; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; margin: 0; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--warm); color: #000; text-shadow: none; }

/* ---------- 4. Base typography ---------- */

body {
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--fg);
	background-color: var(--bg);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 80 L80 0 M-20 60 L20 100 M60 -20 L100 20' stroke='%23999999' stroke-width='0.6' fill='none' opacity='0.35'/></svg>");
	background-repeat: repeat;
	background-size: 80px 80px;
	font-size: 1rem;
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

@media (prefers-color-scheme: dark) {
	body {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 80 L80 0 M-20 60 L20 100 M60 -20 L100 20' stroke='%23333333' stroke-width='0.6' fill='none' opacity='0.35'/></svg>");
	}
}

[data-theme-mode="light"] body {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 80 L80 0 M-20 60 L20 100 M60 -20 L100 20' stroke='%23999999' stroke-width='0.6' fill='none' opacity='0.35'/></svg>");
}
[data-theme-mode="dark"] body {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 80 L80 0 M-20 60 L20 100 M60 -20 L100 20' stroke='%23333333' stroke-width='0.6' fill='none' opacity='0.35'/></svg>");
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.005em;
}
h1 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
}
h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: opacity .15s var(--ease);
}
a:hover { opacity: .8; }

strong { font-weight: 700; color: var(--fg); }

hr {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 15%, transparent), transparent);
	margin: clamp(20px, 3vw, 36px) 0;
}

/* ---------- 5. Layout helpers ---------- */

.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 clamp(20px, 3vw, 32px);
}

.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul li, .prose ol li { margin: .35em 0; }
.prose blockquote {
	margin: 1.5em 0;
	padding: .8em 1.1em;
	border-left: 3px solid var(--accent);
	color: var(--muted);
	font-style: italic;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--fg);
	color: var(--bg);
	padding: 8px 14px;
	border-radius: 0 0 var(--radius-sm) 0;
	z-index: 100;
}
.skip-link:focus { left: 0; outline: none; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	color: var(--muted);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.eyebrow-dot {
	width: 6px; height: 6px;
	background: var(--accent);
	border-radius: 50%;
	display: inline-block;
}

/* ---------- 6. Site header ---------- */

.site-header {
	padding: clamp(20px, 2.5vw, 28px) 0;
	position: sticky;
	top: 0;
	background: color-mix(in oklab, var(--bg) 88%, transparent);
	backdrop-filter: saturate(120%) blur(8px);
	-webkit-backdrop-filter: saturate(120%) blur(8px);
	z-index: 50;
	border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
}
.site-header > .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.site-mark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--fg);
	line-height: 1.1;
}
/* Recurring TT monogram. Variants change size + colour for context. */
.tt-mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent);
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--fg);
	background: color-mix(in oklab, var(--card) 70%, var(--bg) 30%);
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
	text-decoration: none;
}
a.tt-mono:hover {
	background: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
	opacity: 1;
}
.tt-mono--default { width: 36px; height: 36px; font-size: .92rem; }
.tt-mono--cta {
	width: 56px;
	height: 56px;
	font-size: 1.3rem;
	margin: 0 auto 18px;
}
.tt-mono--on-dark {
	width: 36px;
	height: 36px;
	font-size: .92rem;
	background: color-mix(in oklab, var(--bg) 8%, transparent);
	border-color: color-mix(in oklab, var(--bg) 22%, transparent);
	color: var(--bg);
}
.tt-mono--small { width: 28px; height: 28px; font-size: .76rem; }

/* Old class kept as alias for the header instance */
.site-mark-monogram {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent);
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: .92rem;
	letter-spacing: .02em;
	color: var(--fg);
	background: color-mix(in oklab, var(--card) 70%, var(--bg) 30%);
	transition: background .2s var(--ease), border-color .2s var(--ease);
}
.site-mark:hover .site-mark-monogram {
	background: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
}
.site-mark-text { display: inline-flex; flex-direction: column; gap: 1px; }
.site-mark-name {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.18rem;
	letter-spacing: -0.015em;
}
.site-mark-role {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
	font-weight: 400;
	color: var(--muted);
	font-size: .82rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.site-mark-rule {
	display: inline-block;
	width: 16px;
	height: 1px;
	background: var(--accent);
}

.site-nav-list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 26px);
	list-style: none;
}
.site-nav-list a {
	color: var(--fg);
	text-decoration: none;
	font-size: .94rem;
	font-weight: 500;
}
.site-nav-list a:hover { color: var(--accent); opacity: 1; }
.site-nav-list .menu-item-book a,
.site-nav-list .site-nav-cta > a,
.site-nav-list a[href$="/book/"] {
	background: var(--fg);
	color: var(--bg);
	padding: 8px 16px;
	border-radius: var(--radius-pill);
}
.site-nav-list .site-nav-cta > a:hover { color: var(--bg); background: color-mix(in oklab, var(--fg) 88%, var(--accent) 12%); }

/* Hover-revealed pillar submenu under Services.
 *
 * The hover-bridge problem: when the cursor moves from the trigger down into
 * the submenu it must stay over a descendant of .site-nav-has-children, or the
 * :hover state is lost and the submenu disappears mid-traverse. We solve it
 * two ways belt-and-braces:
 *   1. The trigger gets `padding-bottom` so its hover area extends downward.
 *   2. The submenu has an invisible ::before bridge that covers the visual gap.
 * The triangle "tail" pointing up at the submenu is now ::after instead of
 * ::before so the bridge can take over ::before. */
.site-nav-has-children { position: relative; }
.site-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding-bottom: 14px;
	margin-bottom: -14px; /* don't visibly grow */
}
.site-nav-caret {
	font-size: .7em;
	transition: transform .2s var(--ease);
	display: inline-block;
}
.site-nav-has-children:hover .site-nav-caret,
.site-nav-has-children:focus-within .site-nav-caret { transform: translateY(1px) rotate(180deg); }

.site-nav-sub {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--card);
	border-radius: 14px;
	border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s var(--ease), transform .2s var(--ease), visibility 0s linear .15s;
	z-index: 60;
}
/* Invisible hover-bridge: extends the submenu's hover surface upward to meet
 * the trigger so the cursor never crosses an empty zone. */
.site-nav-sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}
/* Decorative arrow tail pointing up at the trigger. */
.site-nav-sub::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: var(--card);
	border-left: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
	border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
}
.site-nav-has-children:hover > .site-nav-sub,
.site-nav-has-children:focus-within > .site-nav-sub {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition-delay: 0s, 0s, 0s;
}
.site-nav-sub li a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: .92rem;
	color: var(--fg);
	transition: background .15s var(--ease), color .15s var(--ease);
}
.site-nav-sub li a:hover {
	background: var(--pill);
	color: var(--accent);
}

.theme-toggle {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--fg);
	background: var(--pill);
	transition: background .15s var(--ease), transform .15s var(--ease);
}
.theme-toggle:hover { background: color-mix(in oklab, var(--pill) 60%, var(--fg) 8%); }
/* Show the icon of what the click WILL switch you to.
 * Default (light or auto+system-light) → moon (click to go dark).
 * Dark or auto+system-dark → sun (click to go light). */
.theme-toggle-icon-sun  { display: none; }
.theme-toggle-icon-moon { display: inline; }

@media (prefers-color-scheme: dark) {
	[data-theme-mode="auto"] .theme-toggle-icon-sun  { display: inline; }
	[data-theme-mode="auto"] .theme-toggle-icon-moon { display: none; }
}
[data-theme-mode="dark"] .theme-toggle-icon-sun  { display: inline; }
[data-theme-mode="dark"] .theme-toggle-icon-moon { display: none; }
[data-theme-mode="light"] .theme-toggle-icon-sun  { display: none; }
[data-theme-mode="light"] .theme-toggle-icon-moon { display: inline; }

/* ---------- Header actions wrapper ---------- */
.site-header-actions { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Hamburger button ---------- */
.site-menu-toggle {
	display: none;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pill);
	color: var(--fg);
	transition: background .15s var(--ease);
}
.site-menu-toggle:hover { background: color-mix(in oklab, var(--pill) 60%, var(--fg) 8%); }
.site-menu-toggle-bars {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 16px;
}
.site-menu-toggle-bars > span {
	display: block;
	height: 1.6px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform .25s var(--ease), opacity .2s var(--ease);
	transform-origin: center;
}
/* Hamburger → X when menu is open */
[data-tt-menu-toggle][aria-expanded="true"] .site-menu-toggle-bars > span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
[data-tt-menu-toggle][aria-expanded="true"] .site-menu-toggle-bars > span:nth-child(2) {
	opacity: 0;
}
[data-tt-menu-toggle][aria-expanded="true"] .site-menu-toggle-bars > span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}
.screen-reader-text {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Mobile drawer ---------- */
.site-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}
.site-mobile-menu[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}
.site-mobile-menu-backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in oklab, var(--fg) 65%, transparent);
	opacity: 0;
	transition: opacity .25s var(--ease);
}
.site-mobile-menu[aria-hidden="false"] .site-mobile-menu-backdrop { opacity: 1; }

.site-mobile-menu-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 88vw);
	background: var(--card);
	border-left: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
	box-shadow: -10px 0 40px rgba(0, 0, 0, .25);
	transform: translateX(100%);
	transition: transform .3s var(--ease);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.site-mobile-menu[aria-hidden="false"] .site-mobile-menu-panel { transform: translateX(0); }

.site-mobile-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: clamp(18px, 3vw, 24px);
	border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
}
.site-mobile-menu-head .site-mark-name { font-size: 1.05rem; }
.site-mobile-menu-head .site-mark-role { font-size: .8rem; }
.site-menu-close {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--fg);
	transition: background .15s var(--ease);
}
.site-menu-close:hover { background: var(--pill); }

.site-mobile-nav { padding: clamp(20px, 3vw, 28px); flex: 1; }
.site-mobile-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 12px;
}
.site-mobile-nav ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.site-mobile-nav ul:last-child { margin-bottom: 0; }
.site-mobile-nav a {
	display: block;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--fg);
	text-decoration: none;
	transition: background .15s var(--ease), color .15s var(--ease);
}
.site-mobile-nav a:hover,
.site-mobile-nav a:focus-visible {
	background: var(--pill);
	color: var(--accent);
}

.site-mobile-foot {
	padding: clamp(18px, 3vw, 24px);
	border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.site-mobile-cta { justify-content: center; }
.site-mobile-theme {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--pill);
	color: var(--fg);
	font-size: .94rem;
	font-weight: 500;
	transition: background .15s var(--ease);
	width: 100%;
	justify-content: center;
}
.site-mobile-theme:hover { background: color-mix(in oklab, var(--pill) 60%, var(--fg) 8%); }

/* Body scroll lock when drawer open */
html[data-tt-menu-open="true"], html[data-tt-menu-open="true"] body { overflow: hidden; }

@media (max-width: 720px) {
	.site-nav { display: none; }
	.site-menu-toggle { display: inline-flex; }
}
@media (min-width: 721px) {
	.site-mobile-menu { display: none; }
}

/* ---------- 7. Site main + footer ---------- */

/* Templates own their own vertical rhythm (the home page hero, .page-shell,
 * .home-cta etc. all have their own padding/margins). The outer .site-main
 * stays unpadded so the closing CTA section can butt directly against the
 * footer with no cream-coloured gap showing through. */
.site-main { flex: 1; padding: 0; }

/* Inverted dark footer with the same blue spotlight gradient as the brands
 * section, so the footer feels like the closing chord rather than a list of
 * links. */
.site-footer {
	margin-top: 0;
	background: var(--fg);
	color: var(--bg);
	position: relative;
	overflow: hidden;
}
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 60% 50% at 8% 20%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 55%),
		radial-gradient(ellipse 60% 50% at 92% 90%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%);
	pointer-events: none;
}
.site-footer-inner { position: relative; z-index: 1; padding: clamp(40px, 5vw, 64px) 0 clamp(18px, 2.2vw, 28px); }

/* 4-column desktop: brand · cta · services · more — single row, no wraps */
.site-footer-wrap {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(20px, 2.5vw, 36px);
	align-items: start;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}
@media (max-width: 880px) {
	.site-footer-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
	.site-footer-wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* Brand block — compact */
.site-footer-mark {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--bg);
	transition: opacity .2s var(--ease);
}
.site-footer-mark:hover { opacity: 1; }
.site-footer-mark-text { display: inline-flex; flex-direction: column; gap: 2px; }
.site-footer-name {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--bg);
}
.site-footer-role {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: .85rem;
	color: color-mix(in oklab, var(--bg) 70%, var(--fg) 30%);
	line-height: 1.2;
}

/* Talk-to-me */
.site-footer-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.site-footer-cta-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: var(--bg);
	color: var(--fg);
	text-decoration: none;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: .92rem;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.site-footer-cta-button:hover { transform: translateY(-1px); opacity: 1; box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.site-footer-cta-email {
	color: color-mix(in oklab, var(--bg) 65%, var(--fg) 35%);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	font-style: italic;
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-size: .85rem;
	line-height: 1.4;
}
.site-footer-cta-email:hover { color: var(--bg); opacity: 1; }

/* Link columns */
.site-footer-col-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--bg) 55%, var(--fg) 45%);
	margin: 0 0 12px;
}
.site-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.site-footer-col a {
	color: color-mix(in oklab, var(--bg) 88%, var(--fg) 12%);
	text-decoration: none;
	font-size: .92rem;
	transition: color .15s var(--ease), padding-left .2s var(--ease);
}
.site-footer-col a:hover { color: var(--bg); opacity: 1; padding-left: 4px; }

.site-footer-base {
	padding-top: 22px;
	border-top: 1px solid color-mix(in oklab, var(--bg) 12%, transparent);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}
.site-footer-meta {
	color: color-mix(in oklab, var(--bg) 60%, var(--fg) 40%);
	font-size: .85rem;
	margin: 0;
}
.site-footer-sign {
	color: color-mix(in oklab, var(--bg) 65%, var(--fg) 35%);
	font-size: .85rem;
	font-style: italic;
	font-family: "Fraunces", ui-serif, Georgia, serif;
	margin: 0;
}
.site-footer-sign span { color: color-mix(in oklab, var(--accent) 70%, var(--bg) 30%); margin-right: 6px; }

/* ---------- 8. Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
	cursor: pointer;
	border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); opacity: 1; }
.btn-primary {
	background: var(--fg);
	color: var(--bg);
	border-color: color-mix(in oklab, var(--fg) 80%, transparent);
}
.btn-primary:hover {
	background: color-mix(in oklab, var(--fg) 88%, var(--accent) 12%);
	box-shadow: var(--shadow);
}
.btn-secondary {
	background: var(--card);
	color: var(--fg);
	border-color: color-mix(in oklab, var(--fg) 12%, transparent);
}
.btn-ghost {
	background: transparent;
	color: var(--fg);
	border-color: color-mix(in oklab, var(--fg) 20%, transparent);
}

.link-quiet {
	color: var(--muted);
	text-decoration: none;
	font-weight: 500;
	font-size: .98rem;
	border-bottom: 1px dotted currentColor;
	transition: color .15s var(--ease);
}
.link-quiet:hover { color: var(--fg); }

/* ---------- 9. Page shell ---------- */

.page-shell-head {
	max-width: var(--prose);
	margin: 0 auto clamp(28px, 4vw, 48px);
	text-align: left;
}
.page-shell-head .eyebrow { margin-bottom: 14px; }
.page-title { margin: 0 0 .25em; }
.page-subtitle {
	color: var(--muted);
	font-size: clamp(1rem, 2vw, 1.2rem);
	margin: 8px 0 0;
}
.page-content { margin: 0 auto; }

.pillar-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: var(--pill);
	border-radius: var(--radius-pill);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 18px;
}
.pillar-tag-dot {
	width: 6px; height: 6px;
	background: var(--accent);
	border-radius: 50%;
	display: inline-block;
}

/* ---------- 10. Home: hero — vertically centred, retro-modern ---------- */

.home-hero {
	display: flex;
	align-items: center;
	min-height: clamp(500px, 76vh, 720px);
	padding: clamp(32px, 5vw, 64px) 0;
	position: relative;
	overflow: hidden;
}
.home-hero-wrap { max-width: 760px; width: 100%; }
.home-hero .eyebrow { margin-bottom: clamp(12px, 1.6vw, 18px); }

/* Circular profile image. Source is square-cropped (tt-thumb 400×400);
 * front-end gives it the circle and a soft card-coloured border. */
.home-hero-portrait {
	width: clamp(64px, 7.5vw, 88px);
	height: clamp(64px, 7.5vw, 88px);
	margin: 0 0 clamp(10px, 1.4vw, 16px);
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--card);
	border: 3px solid var(--card);
	box-shadow: var(--shadow);
	position: relative;
}
.home-hero-portrait::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
	pointer-events: none;
}
.home-hero-portrait-img,
.home-hero-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.home-hero-title {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 .35em;
}
.home-hero-name {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-size: clamp(2.4rem, 7vw, 4.6rem);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.home-hero-role {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
	font-size: clamp(1rem, 1.9vw, 1.3rem);
	font-weight: 400;
	color: var(--muted);
	letter-spacing: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
}
.home-hero-role::before {
	content: "";
	display: inline-block;
	width: clamp(40px, 6vw, 80px);
	height: 1px;
	background: var(--accent);
	transform: translateY(-.35em);
}
.home-hero-subhead {
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(.88rem, 1.4vw, 1rem);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fg);
	margin: clamp(16px, 2vw, 22px) 0 0;
	display: inline-block;
	border-bottom: 1px solid var(--accent);
	padding-bottom: 5px;
}
.home-hero-lede {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	color: var(--muted);
	max-width: 58ch;
	margin: clamp(20px, 2.4vw, 28px) 0 clamp(22px, 2.8vw, 32px);
	line-height: 1.55;
}
.home-hero-lede strong {
	color: var(--fg);
	font-style: italic;
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	letter-spacing: -.005em;
}
.home-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---------- 10b. Page shell (pillar / about / how-i-work / etc) ---------- */

.page-shell {
	padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 64px);
}
.page-shell-head {
	max-width: var(--prose);
	margin: 0 auto clamp(32px, 5vw, 56px);
	text-align: left;
}
.page-shell-head .eyebrow,
.page-shell-head .pillar-tag { margin-bottom: clamp(20px, 3vw, 32px); }
.page-shell-head .page-title {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	font-weight: 400;
	letter-spacing: -.025em;
	line-height: 1.05;
	margin: 0 0 .35em;
}
.page-subtitle {
	color: var(--muted);
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
	font-weight: 400;
	margin: 14px 0 0;
	max-width: 56ch;
	line-height: 1.4;
}

/* Lede paragraph — slightly larger than body, sets the tone for the page */
.page-lede {
	max-width: var(--prose);
	margin: 0 auto clamp(32px, 4vw, 56px);
	font-size: clamp(1.08rem, 1.8vw, 1.2rem);
	color: var(--fg);
	line-height: 1.6;
}
.page-lede p:first-child { margin-top: 0; }

/* Drop cap — for opening paragraphs on About etc */
.has-dropcap > p:first-child::first-letter,
.has-dropcap p:first-of-type::first-letter {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 4.2em;
	float: left;
	line-height: .9;
	margin: .08em .12em 0 -.04em;
	color: var(--accent);
	font-feature-settings: "ss01" on;
}

/* Pillar two-column lists ("Who this is for" / "What's covered") */
.pillar-twocol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 2.4vw, 28px);
	margin: clamp(28px, 4vw, 56px) auto;
	max-width: 980px;
}
@media (max-width: 720px) { .pillar-twocol { grid-template-columns: 1fr; } }

.pillar-list-card {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	padding: clamp(22px, 2.8vw, 32px);
	position: relative;
	overflow: hidden;
}
.pillar-list-card::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--accent);
	opacity: .8;
}
.pillar-list-card h2 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.45rem);
	letter-spacing: -.01em;
	margin: 0 0 16px;
	line-height: 1.2;
}
.pillar-list-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.pillar-list-card li {
	padding: 10px 0 10px 22px;
	border-top: 1px dashed color-mix(in oklab, var(--fg) 12%, transparent);
	color: var(--muted);
	position: relative;
	font-size: .98rem;
	line-height: 1.5;
}
.pillar-list-card li:first-child { border-top: 0; }
.pillar-list-card li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}

/* Prose body — generous, retro-leaning */
.prose.page-content {
	max-width: var(--prose);
	margin: clamp(28px, 4vw, 48px) auto;
}
.prose h2 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.8vw, 1.95rem);
	letter-spacing: -.015em;
	line-height: 1.15;
	margin: 1.8em 0 .55em;
}
.prose h2 + p { margin-top: 0; }
.prose h3 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.15rem, 2vw, 1.35rem);
	margin: 1.5em 0 .4em;
}
.prose ul, .prose ol {
	padding-left: 0;
	list-style: none;
}
.prose ul li, .prose ol li {
	padding: 4px 0 4px 22px;
	position: relative;
	margin: .35em 0;
}
.prose ul li::before {
	content: "·";
	position: absolute;
	left: 4px;
	top: -2px;
	color: var(--accent);
	font-size: 1.6em;
	line-height: 1;
}
.prose ol { counter-reset: ol; }
.prose ol li { counter-increment: ol; }
.prose ol li::before {
	content: counter(ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	color: var(--accent);
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-feature-settings: "lnum";
	font-weight: 500;
	font-size: .9em;
}
.prose blockquote {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
	font-size: 1.2em;
	border-left: 0;
	border-top: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
	border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
	padding: 1em 0;
	margin: 1.8em 0;
	color: var(--fg);
	position: relative;
}
.prose blockquote::before {
	content: "“";
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-size: 3em;
	line-height: 0;
	color: var(--accent);
	display: block;
	margin: .5em 0 .2em;
}

/* Section head used inside route templates */
.page-shell-tiers { margin-top: clamp(40px, 6vw, 72px); }
.page-shell-tiers .section-head {
	margin-top: 0;
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* ---------- 10c. Pillar grid variant on /services/ ---------- */
.pillar-grid--inline { margin: 0 auto clamp(40px, 5vw, 56px); }

/* ---------- 10d. Contact card ---------- */
.contact-card {
	max-width: 540px;
	margin: clamp(32px, 4vw, 48px) auto 0;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	padding: clamp(28px, 3.5vw, 44px);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.contact-card::before {
	content: "✱";
	position: absolute;
	top: 14px;
	right: 18px;
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-size: 1.4rem;
	color: var(--accent);
	opacity: .35;
}
.contact-card-label {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
}
.contact-card-value {
	margin: 0 0 16px;
	font-size: 1.1rem;
}
.contact-card .email-link {
	display: inline-flex;
	align-items: center;
	gap: .6ch;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	background: var(--fg);
	color: var(--bg);
	font-weight: 600;
	text-decoration: none;
	font-size: 1rem;
	transition: transform .15s var(--ease);
}
.contact-card .email-link:hover { transform: translateY(-1px); opacity: 1; }
.contact-card-meta {
	color: var(--muted);
	font-size: .92rem;
	margin: 0;
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
}

/* ---------- 10e. Booking widget (hardcoded into route-book.php) ---------- */
.tt-booking {
	margin: clamp(28px, 4vw, 48px) auto 0;
	max-width: 720px;
	background: var(--card);
	border-radius: var(--radius);
	border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	box-shadow: var(--shadow);
	padding: clamp(24px, 4vw, 40px);
}
.tt-booking-steps {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	font-size: .85rem;
	font-weight: 700;
	color: var(--muted);
	flex-wrap: wrap;
	letter-spacing: .04em;
}
.tt-booking-steps li {
	padding: 8px 14px;
	background: var(--pill);
	border-radius: var(--radius-pill);
	transition: background .2s ease, color .2s ease;
}
.tt-booking-steps li.is-active {
	background: var(--fg);
	color: var(--bg);
}
.tt-booking-stage { min-height: 200px; }
.tt-booking-loading { color: var(--muted); margin: 0; text-align: center; padding: 40px 0; font-family: "Fraunces", ui-serif, Georgia, serif; font-style: italic; }
.tt-booking-noscript {
	background: var(--pill);
	padding: 14px 18px;
	border-radius: 12px;
	font-size: .95rem;
}

.booking-disabled {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	padding: clamp(28px, 4vw, 48px);
	text-align: center;
	max-width: 720px;
	margin: clamp(28px, 4vw, 48px) auto 0;
	position: relative;
}
.booking-disabled::before {
	content: "Paused";
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent);
	color: var(--accent-ink);
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
}

/* ---------- 11. Pillar grid (cards) — 2x2 on desktop, stacked on mobile ---------- */

/* Sits inside a tinted full-bleed band so it feels like its own zone */
.home-pillars {
	margin: clamp(40px, 6vw, 80px) 0;
	padding: clamp(40px, 6vw, 80px) 0;
	background:
		radial-gradient(ellipse 80% 50% at 18% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
		radial-gradient(ellipse 60% 40% at 90% 100%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 60%),
		var(--bg);
	border-block: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	position: relative;
	overflow: hidden;
}
.home-pillars::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 80 L80 0 M-20 60 L20 100 M60 -20 L100 20' stroke='%23999999' stroke-width='0.6' fill='none' opacity='0.18'/></svg>");
	background-size: 80px 80px;
	pointer-events: none;
	z-index: 0;
}
@media (prefers-color-scheme: dark) {
	:root:root .home-pillars::before {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 80 L80 0 M-20 60 L20 100 M60 -20 L100 20' stroke='%23333333' stroke-width='0.6' fill='none' opacity='0.4'/></svg>");
	}
}
:root[data-theme-mode="dark"] .home-pillars::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M0 80 L80 0 M-20 60 L20 100 M60 -20 L100 20' stroke='%23333333' stroke-width='0.6' fill='none' opacity='0.4'/></svg>");
}
.home-pillars .wrap { position: relative; z-index: 1; }

.pillar-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 720px) { .pillar-grid { grid-template-columns: 1fr; } }

.pillar-card {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.8vw, 32px);
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	text-decoration: none;
	color: var(--fg);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
	position: relative;
	overflow: hidden;
	min-height: 260px;
}
.pillar-card::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 50%, transparent));
	transform: scaleX(.06);
	transform-origin: left;
	transition: transform .35s var(--ease);
}
.pillar-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: color-mix(in oklab, var(--accent) 30%, transparent);
	opacity: 1;
}
.pillar-card:hover::after { transform: scaleX(1); }

.pillar-card-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	color: var(--muted);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.pillar-card-tag::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--accent);
	display: inline-block;
}
.pillar-card-title {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.35rem, 2.2vw, 1.6rem);
	letter-spacing: -.01em;
	margin: 0 0 14px;
	line-height: 1.15;
}
.pillar-card-summary {
	color: var(--muted);
	font-size: .98rem;
	line-height: 1.6;
	margin: 0 0 24px;
	flex: 1;
}
.pillar-card-link {
	color: var(--accent);
	font-weight: 700;
	font-size: .94rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap .2s var(--ease);
}
.pillar-card:hover .pillar-card-link { gap: 12px; }

/* ---------- 12. Section heads ---------- */

.section-head {
	max-width: var(--prose);
	margin: 0 auto clamp(28px, 4vw, 48px);
}
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0 0 .4em;
}
.section-lede { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.1rem); margin: 0; max-width: 56ch; line-height: 1.55; }

/* ---------- 13. Brand strip — inverted full-bleed dark stripe ---------- */

.home-brands {
	margin: clamp(40px, 6vw, 80px) 0;
	padding: clamp(48px, 6vw, 80px) 0;
	background: var(--fg);
	color: var(--bg);
	position: relative;
	overflow: hidden;
}
.home-brands::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 12% 20%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 40%),
		radial-gradient(circle at 88% 80%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 40%);
	pointer-events: none;
}
.home-brands .wrap { position: relative; z-index: 1; }
.home-brands .section-head h2 { color: var(--bg); }
.home-brands .section-lede { color: color-mix(in oklab, var(--bg) 70%, var(--fg) 30%); }

.brand-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: flex-start;
}
.brand-strip li {
	background: color-mix(in oklab, var(--bg) 8%, transparent);
	border: 1px solid color-mix(in oklab, var(--bg) 18%, transparent);
	color: var(--bg);
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	font-size: .94rem;
	line-height: 1;
	white-space: nowrap;
	font-weight: 500;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.brand-strip li:hover {
	background: color-mix(in oklab, var(--bg) 18%, transparent);
	transform: translateY(-1px);
}

/* Eyebrow on dark backgrounds — flips colours so it stays legible */
.eyebrow-on-dark { color: color-mix(in oklab, var(--bg) 70%, var(--fg) 30%); }

/* Positions list — role on top with right-aligned status badge, brand+URL
 * stacked beneath. Active engagements pulse; complete ones are muted with a ✓.
 * Always stacked layout regardless of brand-name length, so a long brand never
 * forces an awkward wrap onto the years/url row. */
.positions-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.6vw, 18px);
	margin: 0;
	padding: 0;
}
.positions-list .position {
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: start;
	gap: clamp(14px, 2vw, 20px);
	padding: clamp(18px, 2vw, 22px) clamp(20px, 2.4vw, 28px);
	border-radius: var(--radius);
	background: color-mix(in oklab, var(--bg) 6%, transparent);
	border: 1px solid color-mix(in oklab, var(--bg) 14%, transparent);
	color: var(--bg);
	transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.positions-list .position:hover {
	background: color-mix(in oklab, var(--bg) 12%, transparent);
	border-color: color-mix(in oklab, var(--accent) 50%, transparent);
	transform: translateY(-2px);
}
.position-icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: color-mix(in oklab, var(--bg) 10%, transparent);
	border: 1px solid color-mix(in oklab, var(--bg) 18%, transparent);
	color: color-mix(in oklab, var(--bg) 90%, var(--accent) 10%);
	flex-shrink: 0;
	margin-top: 2px;
}
.position-icon svg { width: 20px; height: 20px; }

.position-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.position-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: clamp(12px, 2vw, 24px);
	flex-wrap: wrap;
}
.position-role {
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(.98rem, 1.4vw, 1.05rem);
	letter-spacing: -.005em;
	line-height: 1.3;
	margin: 0;
	color: var(--bg);
}

/* Status badge — sits to the right of the role */
.position-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .82rem;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: color-mix(in oklab, var(--bg) 80%, var(--fg) 20%);
	flex-shrink: 0;
}
.position-status-mark {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.position-status-text {
	font-weight: 600;
}
.position-status-tag {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: .85em;
	color: color-mix(in oklab, var(--bg) 55%, var(--fg) 45%);
	padding-left: 8px;
	margin-left: 4px;
	border-left: 1px solid color-mix(in oklab, var(--bg) 25%, transparent);
}

/* Active state — pulsing accent dot */
.position--active .position-status-mark {
	background: var(--accent);
	box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent);
	animation: tt-pulse 2.4s ease-out infinite;
}
.position--active .position-status-text {
	color: color-mix(in oklab, var(--accent) 70%, var(--bg) 30%);
}
@keyframes tt-pulse {
	0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--accent) 65%, transparent); }
	70%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 0%,  transparent); }
	100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--accent) 0%,  transparent); }
}
@media (prefers-reduced-motion: reduce) {
	.position--active .position-status-mark { animation: none; box-shadow: none; }
}

/* Complete state — muted dot becomes a ✓ */
.position--complete .position-status { color: color-mix(in oklab, var(--bg) 50%, var(--fg) 50%); }
.position--complete .position-status-mark {
	background: transparent;
	border-radius: 0;
	width: 12px;
	height: 12px;
	position: relative;
}
.position--complete .position-status-mark::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6 L5 9 L10 3' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6 L5 9 L10 3' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.position--complete .position-status-text {
	color: color-mix(in oklab, var(--bg) 55%, var(--fg) 45%);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in oklab, var(--bg) 22%, transparent);
}
.position--complete .position-icon {
	opacity: .55;
}

/* Stacked brand + URL line below the role */
.position-meta {
	margin: 0;
	color: color-mix(in oklab, var(--bg) 75%, var(--fg) 25%);
	font-size: .92rem;
	line-height: 1.4;
}
.position-meta .position-brand { font-weight: 600; color: color-mix(in oklab, var(--bg) 90%, var(--fg) 10%); }
.position-meta .position-sep { margin: 0 .35em; opacity: .55; }
.position-meta .position-link {
	color: color-mix(in oklab, var(--accent) 65%, var(--bg) 35%);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	transition: color .2s var(--ease);
}
.position-meta .position-link:hover { color: var(--bg); opacity: 1; }

/* ---------- 14. Process / tier ladder — vertical timeline ---------- */

.home-process {
	margin: clamp(40px, 6vw, 80px) 0;
	padding: 0 0 clamp(20px, 3vw, 40px);
}

.process-ladder {
	list-style: none;
	margin: 0 auto;
	max-width: 760px;
	padding: 0;
	position: relative;
	counter-reset: ladder;
}
/* Vertical accent line behind the steps */
.process-ladder::before {
	content: "";
	position: absolute;
	left: 38px;
	top: 30px;
	bottom: 30px;
	width: 2px;
	background: linear-gradient(180deg,
		color-mix(in oklab, var(--accent) 60%, transparent),
		color-mix(in oklab, var(--accent) 15%, transparent));
	border-radius: 2px;
}
@media (max-width: 600px) { .process-ladder::before { left: 26px; } }

.process-ladder > li {
	position: relative;
	padding: clamp(18px, 2vw, 24px) clamp(20px, 2.5vw, 28px) clamp(18px, 2vw, 24px) clamp(80px, 10vw, 100px);
	margin-bottom: clamp(14px, 2vw, 22px);
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.process-ladder > li:last-child { margin-bottom: 0; }
.process-ladder > li:hover {
	transform: translateX(2px);
	box-shadow: var(--shadow-lift);
	border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}
@media (max-width: 600px) {
	.process-ladder > li { padding-left: clamp(60px, 14vw, 80px); }
}

/* Number badge */
.process-step {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.15rem;
	color: var(--bg);
	background: var(--fg);
	border-radius: 50%;
	letter-spacing: -.02em;
	box-shadow: 0 0 0 6px var(--bg);
	z-index: 1;
}
@media (max-width: 600px) {
	.process-step { left: 0; width: 40px; height: 40px; font-size: 1rem; box-shadow: 0 0 0 4px var(--bg); }
}

.process-ladder > li h3 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.25rem;
	margin: 0 0 4px;
	line-height: 1.2;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}
.process-ladder > li .process-price {
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--accent);
	background: color-mix(in oklab, var(--accent) 12%, transparent);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
.process-ladder > li p { color: var(--muted); margin: 6px 0 0; font-size: .98rem; line-height: 1.55; }

/* ---------- 15. Closing CTA — accent block, full bleed ---------- */

.home-cta {
	margin: clamp(40px, 6vw, 80px) 0 0;
	padding: clamp(48px, 7vw, 96px) 0;
	background:
		radial-gradient(ellipse at 30% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
		radial-gradient(ellipse at 80% 100%, color-mix(in oklab, var(--warm) 30%, transparent), transparent 60%),
		var(--card);
	border-block: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
}
.home-cta .wrap {
	max-width: 720px;
	text-align: center;
}
.home-cta h2 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	letter-spacing: -.02em;
	margin: 0 0 .4em;
	line-height: 1.1;
}
.home-cta h2 mark {
	background: color-mix(in oklab, var(--warm) 80%, transparent);
	color: inherit;
	padding: 0 .15em;
	border-radius: 4px;
}
.home-cta p {
	color: var(--muted);
	margin: 0 0 26px;
	font-size: clamp(1rem, 1.6vw, 1.1rem);
}
.home-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- 16. Pillar filter (work archive) ---------- */

.pillar-filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 clamp(20px, 3vw, 32px);
}
.pillar-filter-chip {
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--pill);
	color: var(--fg);
	text-decoration: none;
	font-size: .94rem;
	font-weight: 500;
	border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	transition: background .2s var(--ease);
}
.pillar-filter-chip:hover { background: color-mix(in oklab, var(--pill) 60%, var(--fg) 10%); }
.pillar-filter-chip.is-active {
	background: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
}

.case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(16px, 2.5vw, 28px);
}
.case-card {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.case-card-thumb img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}
.case-card-body { padding: 20px 22px 24px; }
.case-card-title {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.25rem;
	margin: 0 0 6px;
}
.case-card-title a { color: var(--fg); text-decoration: none; }
.case-card-title a:hover { color: var(--accent); }
.case-card-meta { color: var(--muted); font-size: .88rem; margin: 0 0 10px; letter-spacing: .01em; }
.case-card-summary { color: var(--muted); margin: 0; font-size: .94rem; line-height: 1.55; }

/* ---------- 17. Reveal animation ---------- */

[data-tt-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
	will-change: opacity, transform;
}
[data-tt-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-tt-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- 18. Misc ---------- */

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}