/* Profitick — compiled stylesheet. DO NOT EDIT DIRECTLY.
   Edit assets/css/parts/*.css and run ./build-css.sh  */

/* ─── 01-tokens.css ─── */
/* == 01 tokens ==========================================================
   Warm Advisory design tokens (design-reference/DESIGN-SPEC.md §1).
   --azure-text and --ink-3 are AA-verified additions (SPEC §5).
   @font-face is emitted inline from functions.php (profitick_font_css) so
   font files can resolve from the theme OR an asset-shard plugin.
   ===================================================================== */

:root {
	/* surfaces */
	--cream: #F6F1E8;
	--cream-2: #EFE7D8;
	--sand: #E9DDC8;
	--card: #FFFFFF;
	/* ink */
	--ink: #2A2620;
	--ink-2: #6E6559;
	--ink-3: #57503F;
	--line: rgba(42, 38, 32, .12);
	/* accent */
	--azure: #0D99FF;
	--azure-deep: #0A73C9;
	--azure-text: #0866B3;
	--clay: #C06A43;
	/* type */
	--serif: 'Newsreader', Georgia, serif;
	--sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
	/* motion */
	--ease: cubic-bezier(.22, 1, .36, 1);
	/* shadows (warm, brown-tinted) */
	--sh-card: 0 24px 50px -22px rgba(42, 38, 32, .4);
	--sh-hero: 0 40px 80px -40px rgba(42, 38, 32, .45);
	--sh-bar: 0 10px 40px -20px rgba(42, 38, 32, .3);
	--sh-hover: 0 30px 60px -34px rgba(42, 38, 32, .4);
}

/* ─── 02-base.css ─── */
/* == 02 base / reset / typography ==================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.02;
	color: var(--ink);
	text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--azure); color: #fff; }

:focus-visible {
	outline: 2px solid var(--azure-deep);
	outline-offset: 3px;
	border-radius: 6px;
}

.wrap {
	width: 100%;
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* accessibility utilities */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	left: 16px; top: -60px;
	z-index: 200;
	background: var(--ink);
	color: var(--cream);
	padding: 12px 22px;
	border-radius: 100px;
	transition: top .2s var(--ease);
}
.skip-link:focus {
	position: fixed !important;
	top: 16px;
	width: auto; height: auto;
	margin: 0;
	clip-path: none;
	white-space: normal;
}

/* type helpers */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--azure-text);
	text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--azure); }
.serif-i { font-family: var(--serif); font-style: italic; }

/* section rhythm + heads */
section { padding-block: clamp(4.5rem, 8vw, 8rem); }
.head { max-width: 680px; margin-bottom: 56px; }
.head.center { margin-inline: auto; text-align: center; }
.head.center .eyebrow { justify-content: center; }
.head h2 {
	font-size: clamp(2.2rem, 4.6vw, 3.7rem);
	line-height: 1.02;
	margin-top: 18px;
	letter-spacing: -.015em;
}
.head h2 .serif-i { color: var(--azure-deep); }
.head p { font-size: 18px; color: var(--ink-2); margin-top: 20px; line-height: 1.6; }

/* reveal-on-scroll */
.rv { opacity: 0; transform: translateY(30px); transition: .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* table scroll safety (core/table wrapper from functions.php) */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
	.rv { opacity: 1; transform: none; }
}

/* ─── 03-chrome.css ─── */
/* == 03 chrome: buttons, pill nav, footer ============================= */

/* ---- buttons (SPEC §5: arrow circle + solid-blue use azure-deep) ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 14px 26px;
	border-radius: 100px;
	font-weight: 600;
	font-size: 16px;
	background: var(--ink);
	color: var(--cream);
	transition: .25s var(--ease);
}
.btn .a {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--azure-deep);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform .25s var(--ease);
}
.btn:hover { background: #000; transform: translateY(-2px); }
.btn:hover .a { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: var(--cream-2); border-color: var(--ink); }
.btn.light { background: var(--card); color: var(--ink); box-shadow: 0 8px 26px -12px rgba(42, 38, 32, .3); }
.btn.blue { background: var(--azure-deep); color: #fff; }
.btn.blue .a { background: #fff; color: var(--azure-deep); }
.btn.blue:hover { background: #085f9e; }
.btn:not(:has(.a)) { padding: 14px 26px; }

/* ---- pill nav bar ---- */
.site-head { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; }
.bar {
	display: flex;
	align-items: center;
	gap: 24px;
	background: rgba(246, 241, 232, .7);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--line);
	border-radius: 100px;
	padding: 10px 12px 10px 24px;
	box-shadow: var(--sh-bar);
	position: relative;
}
.bar .logo img { height: 24px; width: auto; }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.bar .btn { padding: 11px 14px 11px 22px; font-size: 15px; }
.bar .btn .a { width: 28px; height: 28px; }

.site-nav { display: flex; margin-left: 16px; }
.nav-menu { display: flex; gap: 4px; list-style: none; }
.nav-menu li { position: relative; }
.nav-menu a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 15px;
	color: var(--ink-2);
	padding: 9px 15px;
	border-radius: 100px;
	transition: .15s;
	white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a { color: var(--ink); background: var(--cream-2); }

/* dropdown (Services) — cream card in the bar's language */
.nav-menu .menu-item-has-children > a::after {
	content: "";
	width: 13px; height: 13px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6559' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s var(--ease);
}
.nav-menu .menu-item-has-children:hover > a::after,
.nav-menu .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }
.nav-menu .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 250px;
	background: rgba(246, 241, 232, .97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--line);
	border-radius: 22px;
	box-shadow: var(--sh-card);
	padding: 10px;
	list-style: none;
	display: none;
	z-index: 120;
}
.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu { display: block; }
.nav-menu .sub-menu a {
	display: block;
	padding: 10px 16px;
	border-radius: 14px;
	white-space: normal;
}

.nav-cta-mobile { display: none; }

/* burger — hidden on desktop */
.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: var(--ink);
}
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: flex; }

@media (max-width: 960px) {
	.nav-toggle { display: flex; }
	.site-nav {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		left: 0; right: 0;
		margin-left: 0;
	}
	.site-nav.open {
		display: block;
		background: rgba(246, 241, 232, .97);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 1px solid var(--line);
		border-radius: 26px;
		box-shadow: var(--sh-card);
		padding: 14px;
	}
	.nav-menu { flex-direction: column; gap: 2px; }
	.nav-menu a { display: flex; padding: 13px 16px; font-size: 16px; min-height: 44px; }
	.nav-menu .sub-menu {
		position: static;
		transform: none;
		display: block;
		border: none;
		box-shadow: none;
		background: var(--cream-2);
		border-radius: 16px;
		margin: 4px 8px 8px;
		padding: 6px;
	}
	.nav-menu .menu-item-has-children > a::after { display: none; }
	.bar .right .btn { display: none; }
	.site-nav .nav-cta-mobile { display: block; margin: 12px 14px 4px; }
	.site-nav .nav-cta-mobile .btn { width: 100%; justify-content: space-between; }
}

/* ---- footer ---- */
.site-foot { padding: 70px 0 40px; }
.foot-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--line);
}
.foot-grid .fb img { height: 24px; width: auto; margin-bottom: 18px; }
.foot-grid .fb p { color: var(--ink-2); font-size: 15px; max-width: 300px; line-height: 1.6; }
.foot-col h3, .foot-col h4 { font-family: var(--serif); font-size: 18px; font-weight: 400; margin: 0 0 16px; }
.foot-col a { display: block; padding: 8px 0; color: var(--ink-2); font-size: 15.5px; transition: .15s; }
.foot-col a:hover { color: var(--azure-text); }
.foot-menu { list-style: none; }
.foot-bot {
	padding-top: 26px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 14px;
	color: var(--ink-2);
}
.foot-bot a { color: inherit; }
.foot-bot a:hover { color: var(--azure-text); }
.site-foot--minimal { padding-top: 30px; }
.site-foot--minimal .foot-bot { border-top: 1px solid var(--line); }

@media (max-width: 960px) {
	.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.foot-grid { grid-template-columns: 1fr; }
	.foot-col a { padding: 10px 0; }
}

/* ─── 04-shared.css ─── */
/* == 04 shared components (canonical: homepage concept) ===============
   svc cards · testimonial · CTA band · float cards · trust strip ·
   breadcrumbs · stars. Blog/post/service agents append their shared
   groups (news, post cards, article layout, faq, price) in later layers.
   ===================================================================== */

/* ---- hero base (modifiers .hero--home / .hero--service own the rest) ---- */
.hero { position: relative; padding: 150px 0 70px; }

/* ---- service cards ---- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
	background: var(--card);
	border-radius: 26px;
	padding: 34px 30px;
	transition: .3s var(--ease);
	border: 1px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); }
.svc-card .ic {
	width: 56px; height: 56px;
	border-radius: 18px;
	background: var(--sand);
	color: var(--azure-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}
.svc-card h3 { font-size: 24px; margin-bottom: 12px; }
.svc-card p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin-bottom: 20px; }
.svc-card .more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 15px;
	color: var(--azure-text);
	transition: gap .2s;
	margin-top: auto;
	min-height: 44px;
	align-content: center;
}
.svc-card:hover .more { gap: 12px; }
.svc-card.accent { background: var(--ink); color: var(--cream); }
.svc-card.accent h3 { color: var(--cream); }
.svc-card.accent p { color: rgba(246, 241, 232, .7); }
.svc-card.accent .ic { background: rgba(255, 255, 255, .1); color: var(--azure); }
.svc-card.accent .more { color: var(--azure); }

/* ---- testimonial (base = homepage split panel) ---- */
.testi {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 50px;
	align-items: center;
	background: var(--sand);
	border-radius: 40px;
	padding: clamp(2rem, 4vw, 3.5rem);
}
.testi-photo { border-radius: 26px; overflow: hidden; aspect-ratio: 1 / 1.1; }
.testi-photo img { width: 100%; height: 100%; object-fit: cover; }
.testi .stars { display: flex; gap: 4px; color: var(--clay); margin-bottom: 22px; }
.testi .stars svg { width: 22px; height: 22px; fill: currentColor; }
.testi q {
	quotes: none;
	font-family: var(--serif);
	font-size: clamp(1.5rem, 2.8vw, 2.3rem);
	line-height: 1.25;
	display: block;
	margin-bottom: 30px;
}
.testi q .serif-i { color: var(--azure-deep); }
.testi .who b { font-size: 18px; display: block; }
.testi .who span { color: var(--ink-3); font-size: 15px; }

/* ---- CTA band (dark) ---- */
.cta {
	background: var(--ink);
	border-radius: 44px;
	padding: clamp(3rem, 6vw, 5.5rem);
	text-align: center;
	color: var(--cream);
	position: relative;
	overflow: hidden;
}
.cta::before {
	content: "";
	position: absolute;
	top: -40%; left: 50%;
	transform: translateX(-50%);
	width: 80%; height: 80%;
	background: radial-gradient(circle, rgba(13, 153, 255, .35), transparent 62%);
	pointer-events: none;
}
.cta h2 { color: var(--cream); font-size: clamp(2.4rem, 5vw, 4rem); position: relative; }
.cta h2 .serif-i { color: var(--azure); }
.cta p {
	color: rgba(246, 241, 232, .72);
	font-size: 19px;
	margin: 22px auto 34px;
	max-width: 480px;
	position: relative;
}
.cta .btn { background: var(--azure-deep); color: #fff; position: relative; }
.cta .btn .a { background: #fff; color: var(--azure-deep); }
.cta .btn:hover { background: #085f9e; }

/* ---- floating proof cards ---- */
.float-card {
	position: absolute;
	background: var(--card);
	border-radius: 20px;
	padding: 16px 20px;
	box-shadow: var(--sh-card);
	display: flex;
	align-items: center;
	gap: 14px;
	animation: float 5s var(--ease) infinite;
}
.float-card.fc1 { left: -30px; top: 20%; }
.float-card.fc2 { right: -24px; bottom: 16%; animation-delay: -2.5s; }
.float-card .ring {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--sand);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--azure-deep);
	flex-shrink: 0;
}
.float-card b { font-family: var(--serif); font-size: 22px; display: block; line-height: 1; }
.float-card span { font-size: 13.5px; color: var(--ink-3); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---- trust strip ---- */
.strip { border-block: 1px solid var(--line); padding: 26px 0; }
.strip-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}
.strip-in .lbl { font-size: 14px; color: var(--ink-2); }
.strip-in .names {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	font-family: var(--serif);
	font-size: 22px;
	color: var(--ink);
	opacity: .72;
}

/* ---- breadcrumbs ---- */
.crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
	color: var(--ink-2);
	margin-bottom: 22px;
}
.crumbs a { color: inherit; padding-block: 8px; }
.crumbs a:hover { color: var(--azure-text); }
.crumbs .dot { color: var(--ink-2); }
.crumbs span[aria-current] { color: var(--ink); }

/* responsive (homepage-canonical parts) */
@media (max-width: 960px) {
	.svc-grid { grid-template-columns: 1fr 1fr; }
	.testi { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.svc-grid { grid-template-columns: 1fr; }
	.float-card.fc1 { left: 0; }
	.float-card.fc2 { right: 0; }
}

/* ─── 05-front-page.css ─── */
/* == 05 front-page ====================================================
   Homepage-only layout: hero--home, sticky story band, front content.
   Shared pieces (svc cards, testi, cta, float cards, strip) live in 04.
   SPEC §5 substitutions applied: .n labels use --azure-text.
   ===================================================================== */

/* ---- hero (home) ---- */
.hero--home .hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
}
.hero--home h1 {
	font-size: clamp(3rem, 6.6vw, 6rem);
	line-height: .98;
	letter-spacing: -.02em;
	margin: 24px 0 0;
}
.hero--home h1 .serif-i { color: var(--azure-deep); }
.hero--home .hero-sub {
	font-size: 20px;
	color: var(--ink-2);
	line-height: 1.55;
	max-width: 460px;
	margin: 28px 0 34px;
}
.hero--home .hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.hero--home .hero-trust {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 44px;
	color: var(--ink-2);
	font-size: 15px;
}
.hero--home .hero-trust .stack { display: flex; }
.hero--home .hero-trust .stack img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2.5px solid var(--cream);
	margin-left: -12px;
}
.hero--home .hero-trust .stack img:first-child { margin-left: 0; }
.hero--home .hero-trust b { color: var(--ink); font-weight: 700; }

/* hero media */
.hero--home .hero-media { position: relative; }
.hero--home .hero-photo {
	border-radius: 32px 32px 120px 32px;
	overflow: hidden;
	aspect-ratio: 1 / 1.12;
	box-shadow: var(--sh-hero);
}
.hero--home .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero--home .hero-blob {
	position: absolute;
	inset: -6% -8% -6% 2%;
	background: radial-gradient(circle at 70% 30%, rgba(13, 153, 255, .16), transparent 60%);
	z-index: -1;
	filter: blur(10px);
}
@media (max-width: 960px) {
	/* single-column hero: keep the decorative glow inside the viewport */
	.hero--home .hero-blob { inset: -4% 0; }
}

/* ---- story / sticky (homepage owns .story per SPEC §3) ---- */
.story-section { padding-inline: clamp(1rem, 3vw, 2rem); }
.story {
	background: var(--cream-2);
	border-radius: 44px;
	margin: 0 auto;
	position: relative;
}
.story .wrap { padding-block: clamp(3rem, 6vw, 6rem); }
.story-grid {
	display: grid;
	grid-template-columns: 1fr 1.02fr;
	gap: 60px;
	align-items: start;
}
.story-text { display: flex; flex-direction: column; }
.story-step {
	min-height: 78vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.story-step .n {
	font-family: var(--serif);
	font-size: 15px;
	color: var(--azure-text);
	letter-spacing: .04em;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.story-step .n::before { content: ""; width: 34px; height: 1.5px; background: var(--azure); }
.story-step h3 {
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.02;
	margin-bottom: 20px;
}
.story-step p {
	font-size: 18px;
	color: var(--ink-2);
	line-height: 1.65;
	max-width: 430px;
	transition: opacity .4s;
}
.story-step.dim { opacity: .4; transition: opacity .4s; }
.story-media {
	position: sticky;
	top: 14vh;
	height: 72vh;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 40px 80px -44px rgba(42, 38, 32, .5);
}
.story-stage { position: relative; width: 100%; height: 100%; background: var(--sand); }
.story-stage figure {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .8s var(--ease), transform 1.2s var(--ease);
}
.story-stage figure.on { opacity: 1; transform: scale(1); }
.story-stage figure img { width: 100%; height: 100%; object-fit: cover; }
.story-stage .badge {
	position: absolute;
	left: 20px;
	bottom: 20px;
	background: rgba(246, 241, 232, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 16px;
	padding: 12px 18px;
	font-family: var(--serif);
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.story-stage .badge i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--azure);
	flex-shrink: 0;
}

/* no-JS fallback: server marks steps 2-4 .dim and only figure 1 .on */
.no-js .story-step.dim { opacity: 1; }
.no-js .story-stage figure { position: relative; opacity: 1; transform: none; }
.no-js .story-media { position: relative; top: 0; height: auto; }

/* ---- editor-authored front-page content (optional prose slot) ---- */
.front-content { padding-top: 0; }
.front-content .prose { max-width: 760px; }
.front-content .prose > * + * { margin-top: 1.2em; }
.front-content .prose h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 1.6em; }
.front-content .prose h3 { font-size: 1.5rem; margin-top: 1.4em; }
.front-content .prose h2:first-child,
.front-content .prose h3:first-child { margin-top: 0; }
.front-content .prose a { color: var(--azure-text); text-decoration: underline; text-underline-offset: 3px; }
.front-content .prose ul,
.front-content .prose ol { padding-left: 1.3em; }
.front-content .prose li + li { margin-top: .4em; }

/* ---- responsive ---- */
@media (max-width: 960px) {
	.hero--home .hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.story-grid { grid-template-columns: 1fr; gap: 0; }
	.story-media { position: relative; top: 0; height: 60vh; margin-bottom: 30px; order: -1; }
	.story-step { min-height: auto; padding-block: 34px; }
	.story-step.dim { opacity: 1; }
}

/* ─── 06-service.css ─── */
/* == 06 service template ================================================
   Canonical owner of: .hero--service (+ .hero-assure), .svc-included /
   .svc-content / .svc-how-section / .svc-testi-section / .svc-faq-section
   section wrappers, .how (steps scoped as .how .step per SPEC §3),
   .price split panel, .testi--compact modifier, and the FAQ accordion
   (.faq-list / .faq-item / .faq-chev / .faq-ans — defined ONLY here).
   Extends layers 01–04; never redefines their classes.
   A11y deviations from concept per SPEC §5:
   - .how .step .n + .dur use --azure-text (small azure on light);
   - open .faq-chev bg uses --azure-deep (white glyph on solid blue);
   - .price eyebrow uses ink, body text on sand uses --ink-3.
   ===================================================================== */

/* ---- hero (service modifier over 04's .hero base) ---- */
.hero--service { padding-bottom: 60px; }
.hero--service .hero-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 56px;
	align-items: center;
}
.hero--service .crumbs { margin-bottom: 20px; }
.hero--service h1 {
	font-size: clamp(2.7rem, 5.6vw, 4.9rem);
	line-height: 1;
	letter-spacing: -.02em;
}
.hero--service h1 .serif-i { color: var(--azure-deep); }
.hero--service .hero-sub {
	font-size: 19px;
	color: var(--ink-2);
	line-height: 1.6;
	max-width: 480px;
	margin: 24px 0 32px;
}
.hero--service .hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.hero--service .hero-media { position: relative; }
.hero--service .hero-photo {
	border-radius: 120px 32px 32px 32px;
	overflow: hidden;
	aspect-ratio: 1 / 1.08;
	box-shadow: var(--sh-hero);
}
.hero--service .hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* assure check bullets (canonical here; hub/pricing may reuse) */
.hero-assure { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 36px; }
.hero-assure span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: var(--ink-2);
}
.hero-assure svg { width: 16px; height: 16px; color: var(--azure-deep); flex-shrink: 0; }

/* ---- section wrappers (replace concept's sanctioned inline paddings) ---- */
.svc-included { padding-top: clamp(2rem, 4vw, 3rem); }
.svc-content { padding-top: 0; }
.svc-how-section { padding-inline: clamp(1rem, 3vw, 2rem); }
.svc-testi-section,
.svc-faq-section { padding-top: 0; }
.page-template-page-service .cta-section { padding-top: 0; }

/* ---- editor prose slot (02-base zeroes p/list margins — restore) ---- */
.svc-content-inner { max-width: 760px; }
.svc-content-inner > * + * { margin-top: 1.15em; }
.svc-content-inner h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 1.6em; }
.svc-content-inner h3 { font-size: 1.4rem; margin-top: 1.5em; }
.svc-content-inner ul,
.svc-content-inner ol { padding-left: 1.35em; }
.svc-content-inner li { margin-top: .45em; }
.svc-content-inner li::marker { color: var(--azure-deep); }
.svc-content-inner a { color: var(--azure-text); text-decoration: underline; text-underline-offset: 2px; }
.svc-content-inner blockquote {
	margin: 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--azure);
	font-family: var(--serif);
	font-size: 1.2em;
}

/* ---- how it works ---- */
.how { background: var(--cream-2); border-radius: 44px; }
.how > .wrap { padding-block: clamp(3rem, 6vw, 5.5rem); }
.how-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
}
.how-photo {
	position: sticky;
	top: 110px;
	border-radius: 28px;
	overflow: hidden;
	aspect-ratio: 1 / 1.15;
	box-shadow: 0 36px 70px -40px rgba(42, 38, 32, .5);
}
.how-photo img { width: 100%; height: 100%; object-fit: cover; }
.how-photo .tag {
	position: absolute;
	left: 18px;
	bottom: 18px;
	background: rgba(246, 241, 232, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 14px;
	padding: 10px 16px;
	font-family: var(--serif);
	font-size: 16px;
}
.how .steps { display: flex; flex-direction: column; }
.how .step {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 22px;
	padding: 30px 0;
	position: relative;
}
.how .step + .step { border-top: 1px solid var(--line); }
.how .step .n {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--card);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: 22px;
	color: var(--azure-text);
	box-shadow: 0 10px 24px -14px rgba(42, 38, 32, .35);
}
.how .step h3 { font-size: 24px; margin-bottom: 10px; }
.how .step p { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 46ch; }
.how .step .dur {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--azure-text);
	background: rgba(13, 153, 255, .09);
	border-radius: 100px;
	padding: 6px 14px;
}
.how .step .dur svg { width: 13px; height: 13px; }

/* ---- pricing split panel ---- */
.price {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: var(--sand);
	border-radius: 40px;
	overflow: hidden;
}
.price-l { padding: clamp(2.2rem, 4.5vw, 3.6rem); }
.price-l .eyebrow { margin-bottom: 16px; color: var(--ink); } /* a11y: azure text fails on sand */
.price-l h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.04; }
.price-l h2 .serif-i { color: var(--azure-deep); } /* large text — passes on sand */
.price-l > p { color: var(--ink-3); font-size: 17px; margin-top: 18px; max-width: 40ch; }
.price-l .amount { display: flex; align-items: baseline; gap: 10px; margin-top: 34px; }
.price-l .amount .n { font-family: var(--serif); font-size: clamp(3.4rem, 6vw, 5rem); line-height: .9; }
.price-l .amount .per { color: var(--ink-3); font-size: 16px; }
.price-l .btn { margin-top: 30px; }
.price-r {
	background: rgba(255, 255, 255, .55);
	padding: clamp(2.2rem, 4.5vw, 3.6rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.price-r h3, .price-r h4 { margin: 0 0 20px; font-size: 20px; }
.price-r ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.price-r li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--ink); }
.price-r li svg { width: 20px; height: 20px; color: var(--azure-deep); flex-shrink: 0; margin-top: 2px; }
.price-r .note { margin-top: 24px; font-size: 14px; color: var(--ink-3); }

/* ---- compact testimonial (modifier over 04's split-panel .testi) ---- */
.testi.testi--compact {
	grid-template-columns: auto 1fr;
	gap: 30px;
	background: var(--card);
	border-radius: 32px;
	padding: clamp(1.8rem, 3.5vw, 2.8rem);
	box-shadow: 0 26px 60px -40px rgba(42, 38, 32, .4);
}
.testi--compact .testi-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}
.testi--compact q {
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	line-height: 1.3;
	margin-bottom: 14px;
}
.testi--compact .who { font-size: 15px; color: var(--ink-2); }
.testi--compact .who b { display: inline; font-size: inherit; color: var(--ink); }

/* ---- FAQ accordion (canonical definition — SPEC §2) ---- */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 860px;
	margin-inline: auto;
}
.faq-item {
	background: var(--card);
	border-radius: 20px;
	overflow: hidden;
	transition: .25s var(--ease);
}
.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 26px;
	cursor: pointer;
	list-style: none;
	font-family: var(--serif);
	font-size: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sand);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: .3s var(--ease);
}
.faq-item[open] { background: var(--cream-2); }
.faq-item[open] .faq-chev {
	background: var(--azure-deep); /* a11y: concept azure fails white-on-azure */
	color: #fff;
	transform: rotate(180deg);
}
.faq-ans {
	padding: 0 26px 24px;
	color: var(--ink-2);
	font-size: 16px;
	line-height: 1.65;
	max-width: 64ch;
}
.faq-ans b,
.faq-ans strong { color: var(--ink); font-weight: 600; }

/* ---- responsive ---- */
@media (max-width: 960px) {
	.hero--service .hero-grid { grid-template-columns: 1fr; gap: 44px; }
	.how-grid { grid-template-columns: 1fr; }
	.how-photo { position: relative; top: 0; max-width: 480px; }
	.price { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.testi.testi--compact { grid-template-columns: 1fr; gap: 20px; }
	.faq-item summary { padding: 18px 20px; font-size: 18px; }
	.faq-ans { padding: 0 20px 20px; }
}

/* ─── 07-blog.css ─── */
/* == 07 blog / archive (home.php, category.php, search.php) ============
   Canonical definitions in this layer: .bhero · form.search · .filters
   chips · .feat featured card · .pill · .meta-row · .grid-head · .posts
   grid + .post card (scoped .posts .post) · .empty · .more-row pagination
   · .news newsletter panel (reused by single.php).
   A11y deviations from concept (SPEC §5): pill text azure-text, sand-panel
   body text ink-3, newsletter submit azure-deep (never white-on-azure),
   chips/pagination ≥44px tap targets.
   ===================================================================== */

/* ---- blog hero ---- */
.bhero { padding: 160px 0 46px; }
.bhero .eyebrow { margin-bottom: 22px; }
.bhero h1 {
	font-size: clamp(2.8rem, 6vw, 5.2rem);
	letter-spacing: -.02em;
	line-height: .98;
	max-width: 760px;
}
.bhero h1 .serif-i { color: var(--azure-deep); }
.bhero-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 34px;
	flex-wrap: wrap;
	margin-top: 26px;
}
.bhero-row p {
	font-size: 19px;
	color: var(--ink-2);
	max-width: 480px;
	line-height: 1.55;
}

/* ---- search pill (searchform.php) --------------------------------------
   Element-qualified: WP puts a `search` class on <body> for search results. */
form.search { position: relative; flex: 0 1 340px; min-width: 260px; }
.bhero-row form.search { margin-left: auto; }
form.search input {
	width: 100%;
	border: 1.5px solid var(--line);
	background: var(--card);
	border-radius: 100px;
	padding: 15px 20px 15px 52px;
	font: 500 16px var(--sans);
	color: var(--ink);
	outline: none;
	transition: .2s;
	-webkit-appearance: none;
	appearance: none;
}
form.search input::placeholder { color: var(--ink-2); }
form.search input:focus {
	border-color: var(--azure);
	box-shadow: 0 0 0 4px rgba(13, 153, 255, .12);
}
form.search .search-go {
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--ink-2);
	transition: color .15s;
}
form.search .search-go:hover { color: var(--ink); }

/* ---- sticky category chips (real archive links) ---- */
.filters {
	position: sticky;
	top: 0;
	z-index: 60;
	background: linear-gradient(var(--cream) 78%, transparent);
	padding: 14px 0 18px;
}
.filters-in { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
	position: relative;
	border: 1.5px solid var(--line);
	background: transparent;
	color: var(--ink-2);
	border-radius: 100px;
	padding: 9px 18px;
	font: 600 14.5px/1.4 var(--sans);
	transition: .2s var(--ease);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* invisible tap-target extension → ≥44px hit area without visual change */
.chip::after { content: ""; position: absolute; inset: -4px 0; border-radius: 100px; }
.chip small {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--cream-2);
	border-radius: 100px;
	padding: 1px 8px;
	transition: .2s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip.on small { background: rgba(255, 255, 255, .16); color: var(--cream); }

/* ---- featured card (home page 1) ---- */
.featured { padding: 0; margin: 26px 0 54px; }
.feat {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	background: var(--sand);
	border-radius: 36px;
	overflow: hidden;
	transition: .3s var(--ease);
	position: relative;
}
.feat:hover {
	box-shadow: 0 40px 80px -44px rgba(42, 38, 32, .5);
	transform: translateY(-4px);
}
.feat-img { position: relative; min-height: 380px; overflow: hidden; }
.feat-img a { position: absolute; inset: 0; display: block; }
.feat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	transition: transform 1.2s var(--ease);
}
.feat:hover .feat-img img { transform: scale(1.045); }
.feat-body {
	padding: clamp(1.8rem, 3.4vw, 3.2rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.feat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.feat-body h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.05; }
.feat-body h2 a:hover { color: var(--ink); }
.feat-body > p {
	color: var(--ink-3); /* SPEC §5: body text on sand */
	font-size: 17px;
	line-height: 1.6;
	max-width: 460px;
}
.feat-body .btn { margin-top: 6px; }

/* ---- category pill (azure-text for AA at 13px — SPEC §5) ---- */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .75);
	color: var(--azure-text);
	font: 600 13px/1 var(--sans);
	letter-spacing: .03em;
	text-transform: uppercase;
	border-radius: 100px;
	padding: 8px 14px;
}
/* concept .pill.star → renamed; clay kept on the decorative glyph only */
.pill--star { color: var(--ink); }
.pill--star .glyph { color: var(--clay); }

/* ---- meta rows ---- */
.meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 14.5px;
	color: var(--ink-3); /* on sand */
	margin-top: auto;
}
.meta-row .dot,
.post-meta .dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* ---- grid ---- */
.blog-grid { padding-block: 0; }
.grid-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 26px;
}
.grid-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.grid-head span { color: var(--ink-2); font-size: 15px; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---- post card — scoped under .posts so single.php's post_class()
        article never inherits card chrome (related grids reuse .posts) ---- */
.posts .post {
	background: var(--card);
	border-radius: 26px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: .3s var(--ease);
	border: 1px solid transparent;
}
.posts .post:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); }
.post-img {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cream-2);
}
.post-img a { display: block; height: 100%; }
.post-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}
.posts .post:hover .post-img img { transform: scale(1.05); }
.post-img .pill {
	position: absolute;
	left: 14px;
	top: 14px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.post-body {
	padding: 24px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.post-body h3 { font-size: 22px; line-height: 1.12; }
.post-body h3 a { transition: .15s; }
.post-body h3 a:hover { color: var(--azure-text); }
.post-body p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13.5px;
	color: var(--ink-2);
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

/* ---- empty state (concept box, rendered only when needed) ---- */
.empty {
	text-align: center;
	padding: 70px 20px;
	background: var(--cream-2);
	border-radius: 26px;
}
.empty h3 { font-size: 26px; margin-bottom: 10px; }
.empty h3 .serif-i { color: var(--azure-deep); }
.empty p { color: var(--ink-2); }

/* ---- pagination (.more-row wraps the_posts_pagination) ---- */
.more-row { display: flex; justify-content: center; margin-top: 44px; }
.more-row .navigation { width: 100%; }
.more-row .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.more-row .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 44px;
	min-height: 44px;
	padding: 9px 16px;
	border: 1.5px solid var(--line);
	border-radius: 100px;
	font: 600 14.5px/1.4 var(--sans);
	color: var(--ink-2);
	transition: .2s var(--ease);
}
.more-row a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.more-row .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}
.more-row .page-numbers.dots { border-color: transparent; min-width: 0; padding-inline: 4px; }
.more-row .prev,
.more-row .next { padding: 11px 22px; color: var(--ink); }
.more-row .pg-flip { display: inline-flex; transform: rotate(180deg); }

/* ---- newsletter panel (canonical .news — dark, azure glow) ---- */
.news-section { padding-block: 0; }
.news {
	background: var(--ink);
	border-radius: 44px;
	padding: clamp(2.6rem, 5vw, 4.5rem);
	color: var(--cream);
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 40px;
	align-items: center;
	margin-block: clamp(4rem, 7vw, 6.5rem);
}
.news::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -10%;
	width: 60%;
	height: 160%;
	background: radial-gradient(circle, rgba(13, 153, 255, .3), transparent 62%);
	pointer-events: none;
}
.news h2 {
	color: var(--cream);
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	position: relative;
}
.news h2 .serif-i { color: var(--azure); }
.news-copy p {
	color: rgba(246, 241, 232, .72);
	font-size: 17px;
	margin-top: 16px;
	max-width: 440px;
	position: relative;
}
.news-side { position: relative; }
.news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.news-form input {
	flex: 1;
	min-width: 220px;
	background: rgba(255, 255, 255, .08);
	border: 1.5px solid rgba(246, 241, 232, .2);
	border-radius: 100px;
	padding: 15px 22px;
	font: 500 16px var(--sans);
	color: var(--cream);
	outline: none;
	transition: .2s;
}
.news-form input::placeholder { color: rgba(246, 241, 232, .6); }
.news-form input:focus { border-color: var(--azure); background: rgba(255, 255, 255, .12); }
/* SPEC §5: solid button on dark = azure-deep behind white, never azure */
.news-form .btn { background: var(--azure-deep); color: #fff; padding: 15px 28px; }
.news-form .btn:hover { background: #085f9e; }
/* ghost CTA variant while no ESP endpoint is configured */
.news .btn.ghost { color: var(--cream); border-color: rgba(246, 241, 232, .35); }
.news .btn.ghost:hover {
	background: rgba(255, 255, 255, .08);
	border-color: var(--cream);
	color: var(--cream);
}
.news-note {
	font-size: 13.5px;
	color: rgba(246, 241, 232, .6); /* concept .5 → .6 for contrast on ink */
	margin-top: 14px;
	position: relative;
}

/* ---- responsive ---- */
@media (max-width: 960px) {
	.feat { grid-template-columns: 1fr; }
	.feat-img { min-height: 260px; aspect-ratio: 16 / 9; }
	.posts { grid-template-columns: 1fr 1fr; }
	.news { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.posts { grid-template-columns: 1fr; }
}

/* ─── 08-post.css ─── */
/* == 08 single post (single.php) =======================================
   1:1 from 03-warm-advisory-post.html. Canonical definitions in this
   layer (reused by legal/about layers): .playout · .sidebar · .toc ·
   .side-cta · .article prose · .pull · .takeaways · .callout · .tbl.
   A11y deviations from concept (SPEC §5): small azure text → azure-text;
   pill on sand + tag hover → ink/azure-text; sand/cream-2 body text →
   ink-3; share buttons + TOC links + tags ≥44px tap targets.
   (.tbl-scroll wrapper lives in 02-base; .posts/.post/.pill/.news in 07.)
   ===================================================================== */

/* ---- reading progress bar (main.js drives the span width) ---- */
.progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 200;
	pointer-events: none;
}
.progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--azure);
	transition: width .1s linear;
}

/* ---- post hero ---- */
.phero { padding: 150px 0 40px; }
.phero .crumbs { font-size: 14.5px; margin-bottom: 26px; }
/* SPEC §5: azure text fails on sand — pill on the cream hero flips to sand bg + ink text */
.phero .pill { background: var(--sand); color: var(--ink); }
.phero h1 {
	font-size: clamp(2.4rem, 5.2vw, 4.4rem);
	letter-spacing: -.02em;
	line-height: 1;
	max-width: 900px;
	margin: 22px 0 0;
}
.phero h1 .serif-i { color: var(--azure-deep); }
.dek {
	font-size: 20px;
	color: var(--ink-2);
	line-height: 1.55;
	max-width: 640px;
	margin-top: 24px;
}

/* ---- byline row ---- */
.byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}
.byline-who { display: flex; align-items: center; gap: 14px; }
.byline-who img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 4px 14px -6px rgba(42, 38, 32, .4);
	flex-shrink: 0;
}
.byline-who b { display: block; font-size: 16px; line-height: 1.3; }
.byline-who span { font-size: 14px; color: var(--ink-2); }
.byline-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	color: var(--ink-2);
	flex-wrap: wrap;
}
.byline-meta .dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--ink-2);
	flex-shrink: 0;
}

/* ---- share (44px targets; concept 42 — SPEC §5) ---- */
.share { display: flex; gap: 8px; }
.share button,
.share a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: transparent;
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: .2s var(--ease);
}
.share button:hover,
.share a:hover {
	background: var(--ink);
	color: var(--cream);
	border-color: var(--ink);
	transform: translateY(-2px);
}
/* "Copied!" tooltip — text i18n'd via data-tip; main.js toggles .copied */
.share [data-copy] { position: relative; }
.share [data-copy]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) scale(.9);
	background: var(--ink);
	color: var(--cream);
	font: 600 12px var(--sans);
	padding: 5px 10px;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	transition: .2s var(--ease);
	white-space: nowrap;
}
.share [data-copy].copied::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---- cover image ---- */
.pcover { margin: 14px 0 0; }
.pcover figure { margin: 0; }
.pcover .pcover-media {
	border-radius: 32px;
	overflow: hidden;
	box-shadow: 0 40px 80px -44px rgba(42, 38, 32, .5);
	aspect-ratio: 21 / 9;
	background: var(--cream-2);
}
.pcover .pcover-media img { width: 100%; height: 100%; object-fit: cover; }
.pcover figcaption {
	font-size: 14px;
	color: var(--ink-2);
	margin-top: 12px;
	padding-left: 4px;
}

/* ---- layout: article + sticky sidebar ---- */
.playout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(2rem, 3.5vw, 3.25rem);
	padding-block: 56px 30px;
	align-items: start;
}
.sidebar {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* table of contents (main.js builds the list from article h2s) */
.toc { background: var(--card); border-radius: 22px; padding: 24px 24px 18px; }
.toc h4 {
	margin: 0 0 12px;
	font: 600 13px var(--sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
	display: flex;
	align-items: center;
	min-height: 44px; /* concept 7px pad → 44px targets (SPEC §5) */
	padding: 3px 0 3px 16px;
	font-size: 14.5px;
	color: var(--ink-2);
	border-left: 2px solid var(--line);
	transition: .2s;
	line-height: 1.4;
}
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--azure-text); border-left-color: var(--azure); font-weight: 600; }

/* sand CTA card */
.side-cta { background: var(--sand); border-radius: 22px; padding: 26px; }
.side-cta h4 { font-size: 21px; margin: 0 0 8px; line-height: 1.15; }
.side-cta p { font-size: 14.5px; color: var(--ink-3); margin-bottom: 16px; }
.side-cta .btn { padding: 11px 14px 11px 20px; font-size: 14.5px; }
.side-cta .btn .a { width: 26px; height: 26px; }

/* ---- article prose (the_content — all core blocks) ---- */
.article { max-width: 760px; }
.article > p {
	font-size: 18px;
	line-height: 1.75;
	color: #3d382f; /* concept prose ink (13:1 on cream) */
	margin-bottom: 26px;
}
.article > p:first-of-type::first-letter {
	font-family: var(--serif);
	font-size: 64px;
	line-height: .8;
	float: left;
	padding: 8px 12px 0 0;
	color: var(--azure-deep);
}
.article h2 {
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	margin: 54px 0 20px;
	scroll-margin-top: 110px;
	line-height: 1.08;
}
.article h3 { font-size: 22px; margin: 36px 0 14px; font-weight: 500; }
.article h4 { font-size: 19px; margin: 30px 0 12px; }
.article ul,
.article ol {
	margin: 0 0 26px;
	padding-left: 24px;
	font-size: 17.5px;
	line-height: 1.7;
	color: #3d382f;
}
.article li { margin-bottom: 10px; padding-left: 6px; }
.article li::marker { color: var(--azure-text); font-weight: 600; }
.article strong { color: var(--ink); }
/* prose links only — endcap chrome (.tag/.pn/.author) lives inside <article> too */
.article p a,
.article li a,
.article td a,
.article figcaption a {
	color: var(--azure-text);
	text-decoration: underline;
	text-decoration-color: rgba(13, 153, 255, .35);
	text-underline-offset: 3px;
}
.article p a:hover,
.article li a:hover,
.article td a:hover,
.article figcaption a:hover { color: var(--azure-text); text-decoration-color: var(--azure-text); }

/* inline figures & images (core image/gallery) */
.article figure { margin: 36px 0; }
.article figure .fr {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 30px 60px -36px rgba(42, 38, 32, .45);
}
.article figure .fr img { width: 100%; height: auto; }
.article .wp-block-image img,
.article .wp-block-gallery img { border-radius: 18px; }
.article figcaption {
	font-size: 14px;
	color: var(--ink-2);
	margin-top: 12px;
	padding-left: 4px;
	text-align: left;
}

/* separator / code / preformatted */
.article hr,
.article .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 44px 0;
	width: 100%;
}
.article code {
	background: var(--cream-2);
	border-radius: 6px;
	padding: 2px 7px;
	font-size: .9em;
}
.article pre {
	background: var(--ink);
	color: var(--cream);
	border-radius: 18px;
	padding: 22px 26px;
	overflow-x: auto;
	margin: 0 0 26px;
	font-size: 14.5px;
	line-height: 1.6;
}
.article pre code { background: none; padding: 0; color: inherit; }

/* paginated posts (wp_link_pages) */
.page-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 34px 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink-2);
}
.page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1.5px solid var(--line);
	border-radius: 100px;
	color: var(--ink-2);
	transition: .2s var(--ease);
}
.page-links a.post-page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.page-links .post-page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

/* ---- key takeaways box (block pattern profitick/takeaways) ---- */
.takeaways {
	background: var(--card);
	border-radius: 24px;
	padding: 30px 32px;
	margin: 0 0 40px;
}
.takeaways h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font: 600 14px var(--sans);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--azure-text);
}
.takeaways ul { margin: 0; padding: 0; list-style: none; font-size: 16.5px; }
.takeaways li {
	display: flex;
	gap: 12px;
	padding: 9px 0;
	margin: 0;
	border-bottom: 1px solid var(--line);
	line-height: 1.5;
	color: #3d382f;
}
.takeaways li:last-child { border-bottom: 0; }
.takeaways li svg { flex-shrink: 0; color: var(--azure); margin-top: 4px; }

/* ---- pull quote (canonical .pull; core quote/pullquote match it) ---- */
.pull,
.article blockquote {
	margin: 44px 0;
	padding: 8px 0 8px 30px;
	border-left: 3px solid var(--azure);
}
.pull q,
.article blockquote p {
	quotes: none;
	font-family: var(--serif);
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.3;
	display: block;
	color: var(--ink);
	margin: 0;
}
.pull q .serif-i,
.article blockquote p .serif-i { color: var(--azure-deep); }
.pull cite,
.article blockquote cite {
	display: block;
	margin-top: 14px;
	font: 600 14px var(--sans);
	font-style: normal;
	color: var(--ink-2);
}
/* core pullquote wraps its blockquote in a padded, centered figure — neutralize */
.article .wp-block-pullquote { padding: 0; margin: 44px 0; text-align: left; border: 0; }
.article .wp-block-pullquote blockquote { margin: 0; }

/* ---- callout tip (block pattern profitick/callout-tip) ---- */
.callout {
	display: flex;
	gap: 16px;
	background: var(--cream-2);
	border-radius: 20px;
	padding: 24px 26px;
	margin: 0 0 26px;
}
.callout .ic {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--sand);
	color: var(--azure-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.callout b { display: block; margin-bottom: 4px; }
.callout p { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; margin: 0; }
.callout.warn .ic { color: var(--clay); }

/* ---- table (.tbl canonical here; core table block matches) ---- */
.tbl,
.article .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 26px;
	font-size: 16px;
	background: var(--card);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 0 var(--line);
}
.tbl th,
.article .wp-block-table th {
	font: 600 13.5px var(--sans);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-3); /* concept ink-2 → ink-3 on cream-2 (SPEC §5) */
	text-align: left;
	padding: 16px 20px;
	background: var(--cream-2);
	border: 0;
}
.tbl td,
.article .wp-block-table td {
	padding: 15px 20px;
	border: 0;
	border-top: 1px solid var(--line);
	vertical-align: top;
	color: #3d382f;
	line-height: 1.5;
}
.tbl td:first-child,
.article .wp-block-table td:first-child {
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap; /* safe: 02-base .tbl-scroll wraps every core table */
}
.article .wp-block-table { margin: 0 0 26px; }
.article .wp-block-table table { margin: 0; }
.article .tbl-scroll { margin: 0 0 26px; }
.article .tbl-scroll .wp-block-table { margin: 0; }

/* ---- tags row ---- */
.tags-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 46px 0 0;
	padding-top: 30px;
	border-top: 1px solid var(--line);
}
.tags-row .tag {
	position: relative;
	border: 1.5px solid var(--line);
	border-radius: 100px;
	padding: 8px 16px;
	font: 600 13.5px/1.4 var(--sans);
	color: var(--ink-2);
	transition: .2s;
}
/* invisible tap-target extension → ≥44px hit area (SPEC §5) */
.tags-row .tag::after { content: ""; position: absolute; inset: -5px 0; border-radius: 100px; }
.tags-row .tag:hover { border-color: var(--azure); color: var(--azure-text); }

/* ---- author card ---- */
.author {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 24px;
	align-items: center;
	background: var(--card);
	border-radius: 26px;
	padding: 30px 32px;
	margin-top: 34px;
}
.author > img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
}
.author h4 { font-size: 23px; margin: 0 0 6px; }
.author p { font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 520px; margin: 0; }
.author .role {
	font: 600 13px var(--sans);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--azure-text);
	display: block;
	margin-bottom: 4px;
}
.author .btn { white-space: nowrap; }

/* ---- prev / next ---- */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.pn a {
	background: var(--cream-2);
	border-radius: 22px;
	padding: 24px 26px;
	transition: .25s var(--ease);
	display: block;
}
.pn a:hover { background: var(--sand); transform: translateY(-3px); color: inherit; }
.pn .lbl {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 13px var(--sans);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin-bottom: 10px;
}
.pn .flip { display: inline-flex; transform: rotate(180deg); }
.pn .ttl { font-family: var(--serif); font-size: 20px; line-height: 1.15; display: block; }
.pn a.next { text-align: right; }
.pn a.next .lbl { justify-content: flex-end; }
.pn a.next:only-child { grid-column: 2; }

/* ---- related posts (grid + cards come from 07's .posts) ---- */
.related { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.rel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
}
.rel-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.rel-head a {
	font-weight: 600;
	font-size: 15.5px;
	color: var(--azure-text);
	padding-block: 11px; /* 44px target */
}

/* ---- responsive ---- */
@media (max-width: 1020px) {
	.playout { grid-template-columns: 1fr; }
	.sidebar { position: relative; top: 0; order: -1; }
	.side-cta { display: none; }
}
@media (max-width: 960px) {
	.author { grid-template-columns: auto 1fr; }
	.author .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
	.pn { grid-template-columns: 1fr; }
	.pn a.next:only-child { grid-column: auto; }
	.pcover .pcover-media { aspect-ratio: 16 / 10; }
	.author { grid-template-columns: 1fr; }
	.author .btn { grid-column: auto; }
}

/* ─── 09-about.css ─── */
/* == 09 about page (concept: 03-warm-advisory-about.html) ============= */

.ahero { padding: 160px 0 40px; }
.ahero .eyebrow { margin-bottom: 22px; }
.ahero h1 {
	font-size: clamp(2.8rem, 6vw, 5.2rem);
	letter-spacing: -.02em;
	line-height: .98;
	max-width: 820px;
}
.ahero h1 .serif-i { color: var(--azure-deep); }
.ahero > .wrap > p {
	font-size: 19px;
	color: var(--ink-2);
	max-width: 560px;
	line-height: 1.55;
	margin-top: 26px;
}

.acover { position: relative; margin-top: 44px; }
.acover figure {
	margin: 0;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: 0 40px 80px -44px rgba(42, 38, 32, .5);
	aspect-ratio: 21 / 9;
}
.acover img { width: 100%; height: 100%; object-fit: cover; }
.fpill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(246, 241, 232, .9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 100px;
	padding: 11px 18px;
	font: 600 14px var(--sans);
	box-shadow: 0 14px 30px -14px rgba(42, 38, 32, .45);
}
.fpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--azure); }
.fpill.p1 { top: 24px; left: 24px; }
.fpill.p2 { bottom: 24px; right: 24px; }

/* stats row */
.stats-section { padding-block: 0; }
.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.stat { border-top: 1.5px solid var(--line); padding-top: 20px; }
.stat b {
	display: block;
	font: 400 clamp(2.2rem, 4vw, 3.2rem)/1 var(--serif);
	letter-spacing: -.02em;
}
.stat b em { font-style: italic; color: var(--azure-deep); }
.stat span { display: block; margin-top: 8px; font-size: 15px; color: var(--ink-2); }

/* story (SPEC §3 rename: about .story → .astory) */
.astory-section { padding-block: 0; }
.astory {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	padding: clamp(1rem, 3vw, 2rem) 0 clamp(3.5rem, 6vw, 5.5rem);
	align-items: start;
}
.astory h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.05;
	position: sticky;
	top: 110px;
}
.astory h2 .serif-i { color: var(--azure-deep); }
.astory .eyebrow { margin-bottom: 18px; }
.astory-body p {
	font-size: 18px;
	line-height: 1.75;
	color: #3d382f;
	margin-bottom: 24px;
}
.astory-body p:last-child { margin-bottom: 0; }
.astory-body .pull {
	margin: 34px 0;
	padding: 8px 0 8px 28px;
	border-left: 3px solid var(--azure);
}
.astory-body .pull q {
	quotes: none;
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	line-height: 1.3;
	display: block;
}
.astory-body .pull q .serif-i { color: var(--azure-deep); }
.astory-body .pull cite {
	display: block;
	margin-top: 12px;
	font: 600 14px var(--sans);
	font-style: normal;
	color: var(--ink-2);
}

.about-content { padding-block: 0 clamp(2rem, 4vw, 3rem); }

/* values */
.vals { padding-top: 0; padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.vals .eyebrow { margin-bottom: 18px; }
.vals > .wrap > h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 560px; }
.vals > .wrap > h2 .serif-i { color: var(--azure-deep); }
.vals-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 40px;
}
.val {
	background: var(--card);
	border-radius: 24px;
	padding: 28px 26px;
	transition: .3s var(--ease);
}
.val:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -32px rgba(42, 38, 32, .4); }
.val .ic {
	width: 46px; height: 46px;
	border-radius: 14px;
	background: var(--sand);
	color: var(--azure-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.val h3 { font-size: 21px; margin-bottom: 10px; line-height: 1.1; }
.val p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }

/* team band */
.team-section { padding-block: 0; }
.team {
	background: var(--cream-2);
	border-radius: 44px;
	padding: clamp(2.6rem, 5vw, 4.5rem) 0;
	margin: 0 clamp(.6rem, 1.5vw, 1.25rem);
}
.team .eyebrow { margin-bottom: 18px; }
.team-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.team-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 480px; }
.team-head h2 .serif-i { color: var(--azure-deep); }
.team-head p { color: var(--ink-2); max-width: 380px; font-size: 16px; }
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 38px;
}
.member {
	background: var(--card);
	border-radius: 24px;
	overflow: hidden;
	transition: .3s var(--ease);
}
.member:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -32px rgba(42, 38, 32, .4); }
.member .ph { aspect-ratio: 4 / 4.6; overflow: hidden; }
.member .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.member:hover .ph img { transform: scale(1.04); }
.member .nm { padding: 18px 20px 20px; }
.member .nm b { display: block; font: 400 20px var(--serif); }
.member .nm span {
	display: block;
	margin-top: 4px;
	font: 600 12.5px var(--sans);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--azure-text);
}
.member .nm p { margin-top: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* row CTA variant (about page) */
.about-cta { padding-block: 0; }
.cta.cta--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	flex-wrap: wrap;
	text-align: left;
	padding: clamp(2.6rem, 5vw, 4.5rem);
	margin-block: clamp(4rem, 7vw, 6.5rem);
}
.cta.cta--row::before {
	top: -50%; right: -10%; left: auto;
	transform: none;
	width: 60%; height: 160%;
	background: radial-gradient(circle, rgba(13, 153, 255, .3), transparent 62%);
}
.cta.cta--row h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 520px; }
.cta.cta--row p {
	margin: 14px 0 0;
	max-width: 440px;
	font-size: 17px;
}

@media (max-width: 960px) {
	.stats { grid-template-columns: 1fr 1fr; }
	.astory { grid-template-columns: 1fr; }
	.astory h2 { position: static; }
	.vals-grid, .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.vals-grid, .team-grid, .stats { grid-template-columns: 1fr; }
	.acover figure { aspect-ratio: 16 / 11; }
	.fpill.p2 { display: none; }
}

/* ─── 10-contact.css ─── */
/* == 10 contact ========================================================
   Contact hero + form layout (concepts/03-warm-advisory-contact.html).
   .field / .frow / .sel / .consent are the CANONICAL form styles — the
   landing template reuses them. Fluent Forms overrides are scoped under
   .form-card so any form plugin dropped into the card inherits the look.
   A11y deviations per DESIGN-SPEC §5: focus border azure→azure-deep
   (non-text contrast), .n and step body text on sand use ink/ink-3,
   links use --azure-text.
   ===================================================================== */

/* ---- contact hero ---- */
.chero { padding: 160px 0 46px; }
.chero .eyebrow { margin-bottom: 22px; }
.chero h1 {
	font-size: clamp(2.8rem, 6vw, 5.2rem);
	letter-spacing: -.02em;
	line-height: .98;
	max-width: 760px;
}
.chero h1 .serif-i { color: var(--azure-deep); }
.chero p {
	font-size: 19px;
	color: var(--ink-2);
	max-width: 520px;
	line-height: 1.55;
	margin-top: 24px;
}

/* ---- two-column layout ---- */
.clayout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
	gap: clamp(2rem, 3.5vw, 3.25rem);
	padding-block: 10px 30px;
	align-items: start;
}

/* ---- form card ---- */
.form-card {
	background: var(--card);
	border-radius: 32px;
	padding: clamp(1.8rem, 3.4vw, 2.8rem);
}
.form-card h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.form-card .form-intro { color: var(--ink-2); font-size: 15.5px; margin-bottom: 28px; }

/* ---- fields (canonical — landing page reuses) ---- */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font: 600 14px var(--sans); color: var(--ink); }
.field label em { font-style: normal; color: var(--ink-2); font-weight: 500; }
.field input,
.field select,
.field textarea {
	width: 100%;
	border: 1.5px solid var(--line);
	background: var(--cream);
	border-radius: 16px;
	padding: 14px 18px;
	font: 500 16px var(--sans);
	color: var(--ink);
	outline: none;
	transition: .2s;
	appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-2); opacity: .7; }
.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--azure-deep); /* concept: --azure; deepened for 3:1 non-text contrast */
	box-shadow: 0 0 0 4px rgba(13, 153, 255, .12);
	background: #fff;
}
/* border + ring is the visible focus indicator — suppress doubled global outline */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }

/* ---- select wrapper chevron ---- */
.field .sel { position: relative; display: block; }
.field .sel::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--ink-2);
	border-bottom: 2px solid var(--ink-2);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* ---- consent line ---- */
.consent { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 22px; line-height: 1.5; }
.consent a {
	color: var(--azure-text);
	text-decoration: underline;
	text-decoration-color: rgba(13, 153, 255, .35);
	text-underline-offset: 3px;
}
.consent a:hover { color: var(--azure-deep); }

/* ---- success box (post-submit redirect state ?sent=1) ---- */
.form-ok { display: none; text-align: center; padding: 40px 20px; }
.form-ok--show { display: block; }
.form-ok .tick {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--sand);
	color: var(--azure-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}
.form-ok h2,
.form-ok h3 { font-size: 28px; margin-bottom: 10px; }
.form-ok p { color: var(--ink-2); font-size: 16px; max-width: 380px; margin-inline: auto; }

/* ---- sticky aside ---- */
.clayout .aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 100px;
}

/* ---- "What happens next" card (SPEC §3: concept .steps → .next-steps) ---- */
.next-steps { background: var(--sand); border-radius: 28px; padding: 30px 30px 26px; }
.next-steps h3 { font-size: 22px; margin-bottom: 20px; }
.next-steps .step {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid rgba(42, 38, 32, .14);
}
.next-steps .step .n {
	font: 500 15px var(--serif);
	font-style: italic;
	color: var(--ink); /* concept: azure-deep — fails AA on sand (SPEC §5) */
	width: 28px;
	flex-shrink: 0;
	padding-top: 2px;
}
.next-steps .step b { display: block; font-size: 16px; margin-bottom: 3px; }
.next-steps .step p { font-size: 14px; color: var(--ink-3); line-height: 1.55; }

/* ---- "Prefer direct?" card ---- */
.info { background: var(--card); border-radius: 28px; padding: 30px; }
.info h3 { font-size: 22px; margin-bottom: 18px; }
.irow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 0;
	border-top: 1px solid var(--line);
	font-size: 15.5px;
}
.irow .ic {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--cream-2);
	color: var(--azure-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.irow .txt { display: block; min-width: 0; }
.irow b { display: block; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.irow .sub { display: block; font-size: 13.5px; color: var(--ink-2); }
a.irow { transition: .15s; }
a.irow:hover b { color: var(--azure-text); }

/* ---- editor prose slot under the layout ---- */
.contact-content { max-width: 760px; padding-block: 10px 50px; }
.contact-content h2,
.contact-content h3 { margin: 1.6em 0 .5em; }
.contact-content p { margin-bottom: 1em; }
.contact-content a { color: var(--azure-text); text-decoration: underline; text-underline-offset: 3px; }
.contact-content ul,
.contact-content ol { padding-left: 1.2em; margin-bottom: 1em; }

/* ---- Fluent Forms overrides — mirror .field exactly ---- */
.form-card .fluentform .ff-el-group { margin-bottom: 18px; }
.form-card .fluentform .ff-el-input--label { margin-bottom: 8px; padding: 0; }
.form-card .fluentform .ff-el-input--label label {
	font: 600 14px var(--sans);
	color: var(--ink);
	margin: 0;
}
.form-card .fluentform .ff-el-input--content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-card .fluentform .ff-el-input--content textarea,
.form-card .fluentform .ff-el-input--content select {
	width: 100%;
	height: auto;
	border: 1.5px solid var(--line);
	background-color: var(--cream);
	border-radius: 16px;
	padding: 14px 18px;
	font: 500 16px var(--sans);
	color: var(--ink);
	outline: none;
	box-shadow: none;
	transition: .2s;
	appearance: none;
}
.form-card .fluentform .ff-el-input--content textarea { min-height: 130px; line-height: 1.55; }
.form-card .fluentform .ff-el-input--content select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6559' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 13px;
	padding-right: 44px;
}
.form-card .fluentform .ff-el-input--content input::placeholder,
.form-card .fluentform .ff-el-input--content textarea::placeholder { color: var(--ink-2); opacity: .7; }
.form-card .fluentform .ff-el-input--content input:focus,
.form-card .fluentform .ff-el-input--content textarea:focus,
.form-card .fluentform .ff-el-input--content select:focus {
	border-color: var(--azure-deep);
	box-shadow: 0 0 0 4px rgba(13, 153, 255, .12);
	background-color: #fff;
	outline: none;
}
.form-card .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--clay); }
.form-card .fluentform .error,
.form-card .fluentform .text-danger { color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.form-card .fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 26px;
	border-radius: 100px;
	border: 0;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 16px;
	background-color: var(--ink);
	color: var(--cream);
	cursor: pointer;
	transition: .25s var(--ease);
}
.form-card .fluentform .ff-btn-submit:hover {
	background-color: #000;
	color: var(--cream);
	transform: translateY(-2px);
}
.form-card .fluentform .ff-message-success {
	background: var(--cream-2);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 18px 22px;
	color: var(--ink);
	box-shadow: none;
}

/* ---- responsive ---- */
@media (max-width: 960px) {
	.clayout { grid-template-columns: 1fr; }
	.clayout .aside { position: static; }
}
@media (max-width: 560px) {
	.frow { grid-template-columns: 1fr; }
}

/* ─── 11-legal.css ─── */
/* == 11 legal + generic page ============================================
   1:1 from 03-warm-advisory-privacy/terms.html (shared shell) — templates
   page-legal.php + page.php. Canonical .playout / .sidebar / .toc /
   .side-cta / .article prose live in layer 08 (reused, never redefined);
   this layer adds only the legal-specific pieces: .lhero head · .lmeta ·
   .playout--legal metric tweaks (280px rail, tighter prose, no drop cap)
   · .short summary card (block pattern profitick/short-version) ·
   page.php's narrow-prose containers (.page-body / .prose-page — the
   about template's editor slot reuses .prose-page too). ≤1020px
   sidebar-above-article + hidden side-cta come free from layer 08's
   .playout rules. A11y (SPEC §5): .short h4 small azure text →
   azure-text; .short check glyphs stay --azure (decorative — adjacent
   text carries meaning); .lmeta ink-2 on cream 5.09 AA ✓.
   ===================================================================== */

/* ---- legal hero (fixed pill header clearance: 150px per concept) ---- */
.lhero { padding: 150px 0 20px; }
.lhero .crumbs { font-size: 14.5px; margin-bottom: 26px; }
.lhero h1 {
	font-size: clamp(2.4rem, 5vw, 4rem);
	letter-spacing: -.02em;
	max-width: 800px;
	margin-top: 20px; /* concept's inline style, moved into CSS */
}
.lhero .crumbs + h1 { margin-top: 0; } /* page.php: no eyebrow between crumbs and h1 */
.lhero h1 .serif-i { color: var(--azure-deep); }

/* ---- meta row: "Last updated … · Applies to …" ---- */
.lmeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14.5px;
	color: var(--ink-2);
	margin-top: 22px;
}
.lmeta .dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--ink-2);
	flex-shrink: 0;
}

/* ---- legal layout: 280px rail + tighter rhythm than the post's ---- */
.playout--legal {
	grid-template-columns: minmax(0, 1fr) 280px;
	padding-block: 44px 30px;
}
.playout--legal .article > p { font-size: 17.5px; margin-bottom: 24px; }
/* no drop cap on legal prose (post-only flourish from layer 08) */
.playout--legal .article > p:first-of-type::first-letter {
	float: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
}
.playout--legal .article h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin: 48px 0 18px;
	line-height: 1.1;
}
.playout--legal .article h2:first-of-type { margin-top: 0; }
/* child selectors: content lists only — keeps the .short card's list untouched */
.playout--legal .article > ul,
.playout--legal .article > ol { font-size: 17px; }
.playout--legal .article > ul li,
.playout--legal .article > ol li { margin-bottom: 9px; }

/* ---- "short version" summary card (pattern profitick/short-version) ---- */
.short {
	background: var(--card);
	border-radius: 24px;
	padding: 28px 30px;
	margin: 0 0 40px;
}
.short h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font: 600 14px var(--sans);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--azure-text); /* concept azure-deep → azure-text (SPEC §5) */
}
.short h4 svg { flex-shrink: 0; }
.short ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}
.short li {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	margin: 0;
	border-bottom: 1px solid var(--line);
	line-height: 1.5;
	color: #3d382f; /* concept prose ink (13:1 on white) */
}
.short li:last-child { border-bottom: 0; }
.short li svg { flex-shrink: 0; color: var(--azure); margin-top: 4px; }

/* ---- page.php: narrow centered prose, no sidebar ---- */
.page-body { padding-block: 34px 72px; }
.prose-page { max-width: 760px; margin-inline: auto; }

/* ─── 12-derived.css ─── */
/* == 12 derived templates: pricing / hub / 404 ==========================
   Owner: derived-templates agent (page-pricing.php, page-hub.php, 404.php).
   NEW classes only — .dhero intro, .price-grid + .price-tier cards,
   .price-note band, hub grid tweaks (.svc-card--link / --todo), and
   .error-hero. Extends layers 01–06; never redefines their classes
   (.price split panel, .faq-*, .svc-card, .hero remain untouched).
   A11y per SPEC §5: body text on sand uses --ink-3; small azure text uses
   --azure-text; white text only ever sits on --azure-deep or --ink;
   serif-i azure-deep appears only at large sizes.
   Landing/thank-you derived styles are NOT here — separate layer/owner.
   ===================================================================== */

/* ---- .dhero — lhero-style intro for derived pages (pricing, hubs) ---- */
.dhero { padding: 150px 0 20px; }
.dhero h1 {
	margin-top: 20px;
	font-size: clamp(2.4rem, 5vw, 4rem);
	letter-spacing: -.02em;
	max-width: 800px;
}
.dhero h1 .serif-i { color: var(--azure-deep); }
.dhero .dek {
	font-size: 19px;
	color: var(--ink-2);
	line-height: 1.6;
	max-width: 600px;
	margin-top: 22px;
}
.dhero .hero-assure { margin-top: 32px; }

/* ---- pricing: section rhythm ---- */
.tiers-section { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 5vw, 4.5rem); }
.price-note-section { padding-block: 0; }
.pricing-content { padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.page-template-page-pricing .cta-section { padding-top: 0; }

/* ---- pricing: 3-tier grid (from the service .price panel language) ---- */
.price-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
}
.price-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border-radius: 28px;
	padding: 34px 30px 30px;
	transition: .3s var(--ease);
}
.price-tier:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); }
.price-tier h2 { font-size: 26px; letter-spacing: -.01em; }
.price-tier .for {
	color: var(--ink-2);
	font-size: 15.5px;
	line-height: 1.55;
	margin-top: 8px;
	max-width: 30ch;
}
.price-tier .tag {
	position: absolute;
	top: 26px;
	right: 26px;
	background: var(--azure-deep); /* a11y: white text never sits on --azure */
	color: #fff;
	font: 600 12.5px var(--sans);
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 100px;
}
.price-tier .amount {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 26px 0 6px;
}
.price-tier .amount .n {
	font-family: var(--serif);
	font-size: clamp(2.6rem, 4vw, 3.4rem);
	line-height: .9;
}
.price-tier .amount .per { color: var(--ink-2); font-size: 15px; }
.price-tier ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0 30px;
}
.price-tier li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15.5px;
	line-height: 1.45;
}
.price-tier li svg {
	width: 18px;
	height: 18px;
	color: var(--azure-deep);
	flex-shrink: 0;
	margin-top: 2px;
}
.price-tier .btn {
	margin-top: auto;
	width: 100%;
	justify-content: space-between;
}

/* accent tier — ink panel, echoes .svc-card.accent / .cta */
.price-tier--accent { background: var(--ink); color: var(--cream); box-shadow: var(--sh-hover); }
.price-tier--accent h2 { color: var(--cream); }
.price-tier--accent .for { color: rgba(246, 241, 232, .7); }
.price-tier--accent .amount .n { color: var(--cream); }
.price-tier--accent .amount .per { color: rgba(246, 241, 232, .72); }
.price-tier--accent li { color: rgba(246, 241, 232, .85); }
.price-tier--accent li svg { color: var(--azure); } /* azure on ink 5.02 ✓ */

/* ---- pricing: transparent-pricing note band (sand) ---- */
.price-note {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	background: var(--sand);
	border-radius: 40px;
	padding: clamp(2rem, 4vw, 3rem);
}
.price-note .ic {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: var(--card);
	color: var(--azure-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.price-note h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1; }
.price-note h2 .serif-i { color: var(--azure-deep); } /* large text — passes on sand */
.price-note p {
	color: var(--ink-3); /* a11y: ink-2 fails on sand */
	font-size: 16.5px;
	line-height: 1.65;
	margin-top: 12px;
	max-width: 70ch;
}

/* ---- hub: section rhythm + card tweaks ---- */
.hub-content { padding-block: clamp(2rem, 3.5vw, 2.75rem) 0; }
.hub-grid-section { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4.5rem, 8vw, 8rem); }
.page-template-page-hub .cta-section { padding-top: 0; }

/* whole-card link variant of 04's .svc-card (hub + 404 destinations) */
.svc-card--link { color: var(--ink); }
.svc-card--link h2 { font-size: 24px; margin-bottom: 12px; } /* mirrors .svc-card h3 */

/* placeholder card shown when no destination pages exist yet */
.svc-card--todo { background: var(--cream-2); border: 1.5px dashed var(--line); }
.svc-card--todo:hover { transform: none; box-shadow: none; }
.svc-card--todo p { color: var(--ink-3); }
.svc-card--todo .more { color: var(--ink); } /* a11y: azure-text is borderline on cream-2 */

/* ---- 404 ---- */
.error-hero { padding: 170px 0 10px; text-align: center; }
.error-hero h1 {
	margin-top: 18px;
	font-size: clamp(3rem, 8vw, 5.6rem);
	letter-spacing: -.02em;
}
.error-hero h1 .serif-i { color: var(--azure-deep); }
.error-hero .dek {
	color: var(--ink-2);
	font-size: 18px;
	line-height: 1.6;
	max-width: 480px;
	margin: 20px auto 0;
}
/* search pill: visuals come from 07-blog's global form.search (same
   concatenated stylesheet) — this layer only places/centers it */
.error-hero form.search {
	display: block;
	max-width: 420px;
	margin: 34px auto 0;
}
.error-actions { margin-top: 22px; display: flex; justify-content: center; }
.error-cards { padding-top: clamp(3rem, 6vw, 4.5rem); }

/* ---- responsive ---- */
@media (max-width: 960px) {
	.price-grid {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-inline: auto;
	}
}
@media (max-width: 560px) {
	.price-note { flex-direction: column; }
	.price-tier { padding: 28px 24px 24px; }
	.price-tier .tag { top: 22px; right: 22px; }
}

/* ─── 13-landing.css ─── */
/* == 13 landing + thank-you =============================================
   Derived templates (DESIGN-SPEC §4) — no concept file; built from the
   contact page's language. Form/card/aside styles all come from layer 10
   (.clayout, .form-card, .field, .next-steps, .form-ok, .contact-content);
   this layer adds only the landing hero, check bullets, trust line, and
   the thank-you card. Hero is .adhero (ads hero) — NOT .lhero, which the
   legal concept owns (SPEC §4) and layer 11 will define; .dhero (layer 12)
   set the rename precedent. A11y per SPEC §5: check-bullet text ink-2 on
   cream (AA ✓), check glyphs azure-deep decorative, trust-line bold ink.
   ===================================================================== */

/* ---- landing hero (fixed pill header clearance: 150px) ---- */
.adhero { padding: 150px 0 36px; }
.adhero .eyebrow { margin-bottom: 20px; }
.adhero h1 {
	font-size: clamp(2.6rem, 5.5vw, 4.6rem);
	letter-spacing: -.02em;
	line-height: .98;
	max-width: 820px;
}
.adhero h1 .serif-i { color: var(--azure-deep); }
.adhero .adhero-sub {
	font-size: 19px;
	color: var(--ink-2);
	max-width: 560px;
	line-height: 1.55;
	margin-top: 22px;
}

/* ---- value-prop check bullets ---- */
.adhero-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 28px;
	list-style: none;
}
.adhero-checks li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-2);
}
.adhero-checks li svg { color: var(--azure-deep); flex-shrink: 0; }

/* ---- landing 2-col: reuse .clayout; more room before the minimal footer ---- */
.clayout--landing { padding-block: 6px 60px; }

/* ---- trust line (aside card: avatar stack + count) ---- */
.trust-line {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--card);
	border-radius: 28px;
	padding: 22px 26px;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.45;
}
.trust-line .stack { display: flex; flex-shrink: 0; }
.trust-line .stack img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2.5px solid var(--card);
	margin-left: -12px;
}
.trust-line .stack img:first-child { margin-left: 0; }
.trust-line b { color: var(--ink); font-weight: 700; }

/* ---- thank-you card ---- */
.thanks { padding: 170px 0 70px; }
.thanks-card {
	max-width: 640px;
	margin-inline: auto;
	background: var(--card);
	border-radius: 32px;
	padding: clamp(2.2rem, 5vw, 3.5rem);
	text-align: center;
}
.thanks-card .tick {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--sand);
	color: var(--azure-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 26px;
}
.thanks-card h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); letter-spacing: -.015em; }
.thanks-card h1 .serif-i { color: var(--azure-deep); }
.thanks-card .thanks-sub {
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.55;
	max-width: 420px;
	margin: 16px auto 0;
}
.thanks-card .next-steps { text-align: left; margin-top: 32px; }
.thanks-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}
.thanks .contact-content { margin-inline: auto; padding-block: 40px 0; }

/* ---- responsive ---- */
@media (max-width: 560px) {
	.adhero-checks { flex-direction: column; align-items: flex-start; gap: 12px; }
	.thanks { padding: 150px 0 50px; }
	.thanks-actions .btn { width: 100%; justify-content: center; }
}