/*
 * OrgTree — sections.css
 *
 * Page-section-level layout rules (hero, service grids, CoSuite panels,
 * etc.) are built by later, page-specific tasks. This file exists now so
 * inc/enqueue.php has a stable dependency chain and later tasks only need
 * to append rules here rather than wire up a new enqueue.
 */

.section {
	padding-block: var(--space-2xl);
}

.section + .section {
	border-top: 1px solid var(--grey-bg);
}

/* ------------------------------------------------------------------------ */
/* CTA band — orgtree_cta_band() / template-parts/section-cta.php           */
/* ------------------------------------------------------------------------ */

.cta-band {
	text-align: center;
	/* This band uses `.section--dark` but NOT `.section`, so it doesn't inherit
	   the standard section padding — give it generous vertical breathing room
	   of its own (the heading was jammed against the top edge / the header). */
	padding-block: clamp(var(--space-2xl), 4rem + 6vh, var(--space-3xl));
}

.cta-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.cta-band__heading {
	max-width: 40ch;
}

.cta-band__sub {
	max-width: 60ch;
	color: inherit;
	opacity: 0.85;
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

/* ------------------------------------------------------------------------ */
/* Shared centred section heading (difference / help-when / proven)         */
/* ------------------------------------------------------------------------ */

.section-heading {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.section-heading::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	background-color: var(--gold);
	margin: var(--space-sm) auto 0;
}

/* ------------------------------------------------------------------------ */
/* Shared eyebrow label (Services hero/cards eyebrow, service-detail hero,  */
/* any later section that wants a small caps label above a heading)        */
/* ------------------------------------------------------------------------ */

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--gold);
	margin-bottom: var(--space-sm);
}

.eyebrow a {
	color: inherit;
	text-decoration: none;
}

.eyebrow a:hover {
	color: var(--green);
}

/* ------------------------------------------------------------------------ */
/* Hero — v2 scroll-driven tree hero. Styles now live in assets/css/hero.css */
/* (template-parts/home/hero.php), enqueued only on the front page — see    */
/* inc/enqueue.php. Kept out of this shared bundle since the hero rig is    */
/* the heaviest, most front-page-specific piece of the design.              */
/* ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------ */
/* "The OrgTree difference" — 4 pillar cards (template-parts/home/difference)*/
/* ------------------------------------------------------------------------ */

.pillars {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	text-align: center;
}

.pillar .icon {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto var(--space-sm);
}

.pillar__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2xs);
}

.pillar__body {
	font-size: var(--text-sm);
	max-width: 26ch;
	margin-inline: auto;
}

@media (max-width: 61.99rem) {
	.pillars {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 30rem) {
	.pillars {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* "How culture grows" — seed/stub/maturing/mature strip                    */
/* (template-parts/home/growth-strip)                                       */
/* ------------------------------------------------------------------------ */

.growth-strip__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	counter-reset: none;
}

.growth-strip__item {
	position: relative;
	text-align: center;
}

.growth-strip__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1376 / 768;
	object-fit: cover;
	border-radius: var(--radius);
	margin-bottom: var(--space-sm);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.growth-strip__number {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--grad-ink);
	color: var(--text-on-dark);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
}

.growth-strip__label {
	font-weight: 600;
	color: var(--green-deep);
	font-size: var(--text-sm);
}

@media (max-width: 61.99rem) {
	.growth-strip__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 30rem) {
	.growth-strip__list {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* "We help organisations when…" — 5 triggers (template-parts/home/help-when)*/
/* ------------------------------------------------------------------------ */

.triggers {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-md);
	text-align: center;
}

/* Each trigger is a "this is me" card the visitor can self-select and act on. */
.trigger {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-lg) var(--space-md);
	border: 1px solid var(--grey-bg);
	border-radius: calc(var(--radius) * 2);
	background: var(--white);
	transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.trigger:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--green) 45%, transparent);
	box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.35);
}

.trigger .icon {
	width: 2.25rem;
	height: 2.25rem;
}

.trigger__body {
	font-size: var(--text-sm);
	margin: 0;
	color: var(--grey-text);
	flex-grow: 1;
}

.trigger__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--space-3xs);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--green-deep);
	text-decoration: none;
	/* Reset the <button> UA styles so it reads as the text-link CTA it replaced. */
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.trigger__cta:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius);
}

.trigger__cta span { transition: transform var(--transition-fast); }
.trigger:hover .trigger__cta span { transform: translateX(3px); }

/* The horizontal "I'd like to talk about this" CTA under all five triggers. */
.help-when__talk {
	margin-top: var(--space-xl);
	text-align: center;
}

.help-when__talk-btn {
	font-size: var(--text-base);
	padding: var(--space-sm) var(--space-xl);
}

@media (max-width: 61.99rem) {
	.triggers {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 30rem) {
	.triggers {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* CoSuite™ intro band — dark teaser (template-parts/home/cosuite-intro)    */
/* ------------------------------------------------------------------------ */

.cosuite-intro {
	text-align: center;
}

.cosuite-intro__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--gold);
	margin-bottom: var(--space-2xs);
}

.cosuite-intro__heading {
	color: var(--gold);
	margin-bottom: var(--space-sm);
}

.cosuite-intro__body {
	color: rgba(250, 247, 240, 0.85);
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: var(--space-sm);
}

.cosuite-intro__kicker {
	color: var(--gold);
	font-weight: 600;
	margin-bottom: var(--space-md);
}

.cosuite-intro__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--gold);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cosuite-intro__link:hover {
	color: var(--cream);
}

/* ------------------------------------------------------------------------ */
/* Proof stat band — count-up (template-parts/home/proof, main.js)          */
/* ------------------------------------------------------------------------ */

.proof-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	text-align: center;
}

.proof-stat .icon {
	width: 2rem;
	height: 2rem;
	margin: 0 auto var(--space-2xs);
}

.proof-stat__value {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	color: var(--green);
	line-height: 1;
	margin-bottom: var(--space-2xs);
}

.proof-stat__label {
	font-size: var(--text-sm);
	max-width: 24ch;
	margin-inline: auto;
}

@media (max-width: 61.99rem) {
	.proof-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 30rem) {
	.proof-stats {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* "Proven thinking. Practical results." — 5 cards (template-parts/home/proven) */
/* ------------------------------------------------------------------------ */

.proven-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-lg);
	text-align: center;
}

.proven-card .icon {
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 auto var(--space-sm);
}

.proven-card__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2xs);
}

.proven-card__body {
	font-size: var(--text-sm);
	max-width: 24ch;
	margin-inline: auto;
}

.proven-card__body em {
	font-style: italic;
	color: inherit;
}

@media (max-width: 61.99rem) {
	.proven-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 30rem) {
	.proven-cards {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* Services overview hero — dark, full-bleed exploded-tree render behind copy */
/* (template-parts/services/hero)                                            */
/* ------------------------------------------------------------------------ */

.services-hero.page-hero--media {
	background:
		linear-gradient(90deg, rgba(14, 15, 16, 0.94) 0%, rgba(14, 15, 16, 0.66) 50%, rgba(14, 15, 16, 0.34) 100%),
		url("../tree/exploded.jpg") center / cover no-repeat var(--ink-900);
}

/* Eyebrow / heading / sub come from the shared .page-hero__* rules (base.css)
   so this hero matches the homepage hero. Only the accent rule is local. */
.services-hero__rule {
	display: block;
	width: 3rem;
	height: 2px;
	background-color: var(--gold);
	margin-bottom: var(--space-md);
}

/* ------------------------------------------------------------------------ */
/* "Our core services" — 5 linked cards (template-parts/services/cards)      */
/* ------------------------------------------------------------------------ */

.services-cards__intro {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.services-cards__intro .eyebrow {
	text-align: center;
}

.services-cards__intro .section-heading {
	margin-bottom: var(--space-sm);
}

.services-cards__intro .section-heading::after {
	margin-bottom: 0;
}

.services-cards__sub {
	max-width: 48ch;
	margin-inline: auto;
	text-align: center;
}

.service-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-lg);
	text-align: center;
}

/* Each grid cell wraps the (linked) card and its "Get started" button so the
   button sits below the card and every button bottom-aligns across the row. */
.service-card-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.service-card {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform var(--transition-fast);
}

/* Grow the card so the button pins to the bottom of the cell regardless of
   how many lines the card body runs to. */
.service-card-wrap .service-card {
	flex: 1 1 auto;
}

.service-card__cta {
	margin-top: auto;
}

.service-card:hover {
	transform: translateY(-0.2rem);
}

.service-card:hover .service-card__title {
	color: var(--green);
}

.service-card .icon {
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 auto var(--space-sm);
}

.service-card__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2xs);
	transition: color var(--transition-fast);
}

.service-card__body {
	font-size: var(--text-sm);
	max-width: 24ch;
	margin-inline: auto;
}

@media (max-width: 61.99rem) {
	.service-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 30rem) {
	.service-cards {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* "Not like other consultancies." comparison table                        */
/* (template-parts/services/comparison)                                     */
/* ------------------------------------------------------------------------ */

.comparison__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.4fr;
	gap: var(--space-xl);
	align-items: start;
}

/* Grid items default to `min-width: auto`, which lets a child's intrinsic
   min-content width (the table below) push past its fr track and overflow
   the viewport. Allow both tracks to shrink below their content. */
.comparison__intro,
.comparison__table-wrap {
	min-width: 0;
}

.comparison__heading {
	margin-bottom: var(--space-sm);
}

.comparison__heading::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	background-color: var(--gold);
	margin: var(--space-sm) 0 var(--space-md);
}

.comparison-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background-color: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.comparison-table th,
.comparison-table td {
	text-align: left;
	padding: var(--space-sm) var(--space-md);
	font-size: var(--text-sm);
	vertical-align: top;
}

/* `table-layout: fixed` sizes columns from the first row's widths — give the
   row-label column a fixed width and let the two value columns share the
   rest equally. */
.comparison-table thead th:first-child,
.comparison-table tbody th:first-child {
	width: 9.5rem;
}

.comparison-table thead th {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--forest);
	border-bottom: 1px solid var(--grey-bg);
}

.comparison-table tbody th[scope="row"] {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-sm);
	color: var(--forest);
	white-space: nowrap;
}

.comparison-table tbody th[scope="row"] .icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}

.comparison-table tbody tr:not(:last-child) th,
.comparison-table tbody tr:not(:last-child) td {
	border-bottom: 1px solid var(--grey-bg);
}

.comparison-table__col--orgtree {
	background-color: var(--forest);
	color: var(--cream);
	font-weight: 600;
}

.comparison-table thead .comparison-table__col--orgtree {
	color: var(--cream);
}

/* Stack to labelled cards under tablet width — no horizontal scroll at any
   width. Header row is redundant once labels move onto each cell via
   `data-label`, so it's visually hidden (not display:none, to keep it
   available to any AT that still reads the DOM order). */
@media (max-width: 47.99rem) {
	.comparison__grid {
		grid-template-columns: 1fr;
	}

	.comparison-table,
	.comparison-table thead,
	.comparison-table tbody,
	.comparison-table tr,
	.comparison-table th,
	.comparison-table td {
		display: block;
		width: 100%;
	}

	.comparison-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
	}

	.comparison-table tbody tr {
		margin-bottom: var(--space-md);
		border: 1px solid var(--grey-bg);
		border-radius: var(--radius);
		overflow: hidden;
	}

	.comparison-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.comparison-table tbody th[scope="row"] {
		background-color: var(--cream);
		border-bottom: 1px solid var(--grey-bg);
	}

	.comparison-table tbody tr:not(:last-child) th,
	.comparison-table tbody tr:not(:last-child) td {
		border-bottom: 0;
	}

	.comparison-table td {
		border-bottom: 1px solid var(--grey-bg);
	}

	.comparison-table td:last-child {
		border-bottom: 0;
	}

	.comparison-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: var(--text-xs);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--grey-text);
		margin-bottom: var(--space-3xs);
	}

	.comparison-table__col--orgtree.comparison-table__col--orgtree td[data-label]::before,
	.comparison-table td.comparison-table__col--orgtree::before {
		color: color-mix(in srgb, var(--cream) 75%, transparent);
	}
}

/* ------------------------------------------------------------------------ */
/* "Experience. Insight. Proven outcomes." credibility band                 */
/* (template-parts/services/credibility)                                    */
/* ------------------------------------------------------------------------ */

.credibility__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.4fr;
	gap: var(--space-xl);
	align-items: center;
}

.credibility__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: var(--forest);
	color: var(--gold);
	margin-bottom: var(--space-md);
}

.credibility__badge svg {
	width: 1.6rem;
	height: 1.8rem;
}

.credibility__heading {
	margin-bottom: var(--space-sm);
}

.credibility-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	text-align: center;
}

.credibility-card .icon {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto var(--space-sm);
}

.credibility-card__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2xs);
}

.credibility-card__body {
	font-size: var(--text-sm);
	max-width: 22ch;
	margin-inline: auto;
}

@media (max-width: 61.99rem) {
	.credibility__grid {
		grid-template-columns: 1fr;
	}

	.credibility__badge {
		margin-inline: auto;
	}

	.credibility__intro {
		text-align: center;
		margin-bottom: var(--space-lg);
	}

	.credibility__intro .credibility__body {
		margin-inline: auto;
		max-width: 60ch;
	}
}

@media (max-width: 30rem) {
	.credibility-cards {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* Service detail hero (template-parts/page-service-detail)                  */
/* ------------------------------------------------------------------------ */

.service-detail-hero {
	text-align: center;
}

.service-detail-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-color: var(--grey-bg);
	margin-bottom: var(--space-md);
}

.service-detail-hero__icon .icon {
	width: 2rem;
	height: 2rem;
	color: var(--green);
}

.service-detail-hero__heading {
	margin-bottom: var(--space-sm);
}

.service-detail-hero__sub {
	max-width: 56ch;
	font-size: var(--text-lg);
	margin-inline: auto;
}

.service-detail-hero__actions {
	margin-top: var(--space-lg);
}

/* ------------------------------------------------------------------------ */
/* Service detail — Problem / Approach / Outcome (page-service-detail)       */
/* ------------------------------------------------------------------------ */

.service-stages__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.service-stage {
	background-color: var(--white);
	border-radius: var(--radius);
	padding: var(--space-lg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.service-stage__label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--gold);
	margin-bottom: var(--space-sm);
}

.service-stage__body {
	color: var(--forest);
	font-size: var(--text-base);
}

@media (max-width: 61.99rem) {
	.service-stages__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* Service detail — proof quote (page-service-detail)                        */
/* ------------------------------------------------------------------------ */

.service-proof {
	text-align: center;
}

.service-proof__quote p {
	font-size: var(--text-xl);
	max-width: none;
}

/* ------------------------------------------------------------------------ */
/* About / Andy — hero (template-parts/about/hero)                          */
/* ------------------------------------------------------------------------ */

.about-hero {
	text-align: center;
}

.about-hero__portrait {
	display: block;
	width: 8rem;
	height: 8rem;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto var(--space-md);
	border: 3px solid var(--gold);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.about-hero__heading {
	margin-bottom: var(--space-sm);
}

.about-hero__rule {
	display: block;
	width: 3rem;
	height: 2px;
	background-color: var(--gold);
	margin: 0 auto var(--space-md);
}

.about-hero__standfirst {
	max-width: 56ch;
	font-size: var(--text-lg);
	margin-inline: auto;
}

.about-hero__standfirst em {
	font-style: italic;
	color: inherit;
}

/* ------------------------------------------------------------------------ */
/* About / Andy — the story (template-parts/about/story)                    */
/* ------------------------------------------------------------------------ */

.about-story__body em {
	font-style: italic;
	color: inherit;
}

.about-story__body p + p {
	margin-top: var(--space-md);
}

.about-story__figure {
	margin: var(--space-xl) auto 0;
	max-width: 40rem;
	text-align: center;
}

.about-story__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1376 / 768;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
	margin-bottom: var(--space-sm);
}

.about-story__caption {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--grey-text);
	font-size: var(--text-sm);
}

/* ------------------------------------------------------------------------ */
/* About / Andy — "Proven where it matters most" (sensitive proof, presented */
/* as a quiet numbered list — never an animated counter — plus the CEO      */
/* dinner pull-quote) (template-parts/about/proven-outcomes)                */
/* ------------------------------------------------------------------------ */

.about-proven {
	text-align: center;
}

.about-proven__intro {
	max-width: 60ch;
	margin: 0 auto var(--space-lg);
}

.about-proven__list {
	max-width: 42rem;
	margin: 0 auto var(--space-lg);
	text-align: left;
	border-top: 1px solid var(--grey-bg);
}

.about-proven__item {
	display: flex;
	align-items: baseline;
	gap: var(--space-md);
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--grey-bg);
}

.about-proven__number {
	flex-shrink: 0;
	width: 2.25rem;
	font-family: var(--font-heading);
	color: var(--gold);
	font-size: var(--text-lg);
}

.about-proven__text {
	font-size: var(--text-base);
	color: var(--forest);
}

.about-proven__closing {
	max-width: 56ch;
	margin: 0 auto var(--space-lg);
	color: var(--grey-text);
}

.about-proven__quote {
	max-width: 42rem;
	margin-inline: auto;
}

.about-proven__quote p {
	font-size: var(--text-xl);
	max-width: none;
}

@media (max-width: 30rem) {
	.about-proven__item {
		gap: var(--space-sm);
	}
}

/* ------------------------------------------------------------------------ */
/* About / Andy — "Leadership as stewardship" philosophy + quotes           */
/* (template-parts/about/philosophy)                                        */
/* ------------------------------------------------------------------------ */

.about-philosophy {
	text-align: center;
}

.about-philosophy__body {
	max-width: 60ch;
	margin: 0 auto var(--space-xl);
}

.about-philosophy__quotes {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.about-philosophy__quote {
	margin-inline: auto;
	max-width: 42ch;
}

.about-philosophy__quote p {
	font-size: var(--text-lg);
	max-width: none;
}

/* ------------------------------------------------------------------------ */
/* About / Andy — "Author. Speaker. Practitioner." credibility band         */
/* (template-parts/about/author-speaker)                                    */
/* ------------------------------------------------------------------------ */

.about-author {
	text-align: center;
}

.about-author__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: var(--grey-bg);
	margin-bottom: var(--space-md);
}

.about-author__badge .icon {
	width: 1.6rem;
	height: 1.6rem;
	color: var(--green);
}

.about-author__body {
	max-width: 60ch;
	margin-inline: auto;
	font-size: var(--text-base);
}

.about-author__body em {
	font-style: italic;
	color: inherit;
}

/* ------------------------------------------------------------------------ */
/* Home — "What OrgTree means" film section (template-parts/home/film.php).  */
/* The seed->tree journey video, contain-fit in a 16:9 frame so it is never  */
/* stretched or cropped, on the LP charcoal ground (.section--dark).         */
/* ------------------------------------------------------------------------ */
.home-film__head {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: var(--space-xl);
	text-align: center;
}

.home-film__eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--gold);
	margin: 0 0 var(--space-sm);
}

.home-film__title {
	color: var(--text-on-dark);
	margin: 0 0 var(--space-md);
}

.home-film__lead {
	color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
	font-size: var(--text-lg);
	line-height: 1.6;
	margin: 0 auto;
	max-width: 44ch;
}

.home-film__frame {
	max-width: var(--container-lg);
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	background: var(--ink-900);
	border-radius: calc(var(--radius) * 2);
	overflow: hidden;
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}

.home-film__video {
	width: 100%;
	height: 100%;
	object-fit: contain; /* never stretch or crop the film */
	display: block;
	background: var(--ink-900);
}

/* ------------------------------------------------------------------------ */
/* Home — flagship case study (dark). template-parts/home/case-study.php     */
/* ------------------------------------------------------------------------ */
.case-study__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
	align-items: center;
}

.case-study__eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--green);
}

.case-study__title {
	color: var(--text-on-dark);
	margin: 0 0 var(--space-md);
}

.case-study__lead {
	color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
	font-size: var(--text-lg);
	line-height: 1.6;
	margin: 0 0 var(--space-md);
	max-width: 46ch;
}

.case-study__quote {
	margin: 0 0 var(--space-lg);
	padding-left: var(--space-md);
	border-left: 2px solid var(--green);
	color: var(--text-on-dark);
	font-size: var(--text-xl);
}

.case-study__results {
	padding: var(--space-lg);
	border: 1px solid color-mix(in srgb, var(--text-on-dark) 14%, transparent);
	border-radius: calc(var(--radius) * 2);
	background: color-mix(in srgb, var(--text-on-dark) 4%, transparent);
}

.case-study__results-label {
	margin: 0 0 var(--space-md);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--muted-on-dark);
}

.case-study__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.case-study__stats li {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid color-mix(in srgb, var(--text-on-dark) 10%, transparent);
}

.case-study__stats li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.case-study__stat-value {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	line-height: 1;
	color: var(--green-glow);
}

.case-study__stat-label {
	font-size: var(--text-sm);
	color: color-mix(in srgb, var(--text-on-dark) 78%, transparent);
}

.case-study__note {
	margin: var(--space-md) 0 0;
	font-size: var(--text-xs);
	color: var(--muted-on-dark);
	font-style: italic;
}

@media (max-width: 52rem) {
	.case-study__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------ */
/* Home — book section (light). template-parts/home/book.php                 */
/* ------------------------------------------------------------------------ */
.book__grid {
	display: grid;
	grid-template-columns: minmax(0, 15rem) 1fr;
	gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
	align-items: center;
}

/* Book-cover mock (until Andy supplies the real cover). */
.book__cover {
	aspect-ratio: 2 / 3;
	border-radius: calc(var(--radius) * 1.5);
	background: var(--grad-ink);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), inset 3px 0 0 color-mix(in srgb, var(--green) 60%, transparent);
	display: flex;
	overflow: hidden;
}

.book__cover-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-lg);
	width: 100%;
}

.book__cover-kicker {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--green-glow);
}

.book__cover-title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	line-height: 1.1;
	color: var(--text-on-dark);
	margin-top: auto;
}

.book__cover-rule {
	width: 2.5rem;
	height: 2px;
	background: var(--green);
}

.book__cover-sub {
	font-size: var(--text-sm);
	color: color-mix(in srgb, var(--text-on-dark) 75%, transparent);
}

.book__eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--green-deep);
}

.book__title {
	margin: 0 0 var(--space-md);
	color: var(--green-deep);
}

.book__lead {
	color: var(--grey-text);
	font-size: var(--text-lg);
	line-height: 1.6;
	max-width: 48ch;
	margin: 0 0 var(--space-lg);
}

.book__note {
	margin: var(--space-sm) 0 0;
	font-size: var(--text-xs);
	color: var(--grey-text);
	font-style: italic;
}

@media (max-width: 52rem) {
	.book__grid {
		grid-template-columns: 1fr;
		justify-items: start;
	}
	.book__cover {
		width: 12rem;
	}
}

/* ------------------------------------------------------------------------ */
/* Home — "Pull the tree apart": exploded tree + 7 value labels (dark).      */
/* template-parts/home/cosuite-tree.php                                      */
/* ------------------------------------------------------------------------ */
.cosuite-tree__head {
	max-width: 52rem;
	margin: 0 auto var(--space-xl);
	text-align: center;
}

.cosuite-tree__eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--green);
}

.cosuite-tree__title { color: var(--text-on-dark); margin: 0 0 var(--space-md); }

.cosuite-tree__lead {
	color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
	font-size: var(--text-lg);
	line-height: 1.6;
}

.cosuite-tree__figure {
	position: relative;
	max-width: var(--container-lg);
	margin: 0 auto;
}

.cosuite-tree__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: calc(var(--radius) * 2);
}

.cosuite-tree__chip {
	position: absolute;
	z-index: 2;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-on-dark);
	background: color-mix(in srgb, var(--ink-900) 72%, transparent);
	border: 1px solid var(--green);
	border-radius: 999px;
	padding: 0.35rem 0.7rem;
	white-space: nowrap;
	backdrop-filter: blur(3px);
}

/* Positions mapped to the exploded render's parts (branches top, trunk/sap
   middle, roots bottom). */
.cosuite-tree__chip--tl { top: 15%; left: 1%; }
.cosuite-tree__chip--tr { top: 15%; right: 1%; }
.cosuite-tree__chip--ml { top: 50%; left: 0; }
.cosuite-tree__chip--mr { top: 50%; right: 0; }
.cosuite-tree__chip--bl { bottom: 16%; left: 6%; }
.cosuite-tree__chip--br { bottom: 16%; right: 6%; }
.cosuite-tree__chip--bc { bottom: 2%; left: 50%; transform: translateX(-50%); }

/* Reference list — hidden on desktop (chips do the work), shown on mobile
   where the overlay chips would collide. */
.cosuite-tree__list { display: none; }

.cosuite-tree__cta { text-align: center; margin-top: var(--space-xl); }

.cosuite-tree__kicker {
	color: var(--green-glow);
	font-weight: 600;
	margin: 0 0 var(--space-xs);
}

.cosuite-tree__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--text-on-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cosuite-tree__link:hover { color: var(--green-glow); }

@media (max-width: 60rem) {
	.cosuite-tree__chip { display: none; }
	.cosuite-tree__list {
		display: grid;
		gap: var(--space-sm);
		list-style: none;
		margin: var(--space-lg) 0 0;
		padding: 0;
	}
	.cosuite-tree__list li { display: flex; flex-direction: column; gap: 2px; }
	.cosuite-tree__list-name { font-weight: 600; color: var(--green-glow); }
	.cosuite-tree__list-desc { font-size: var(--text-sm); color: color-mix(in srgb, var(--text-on-dark) 78%, transparent); }
}

/* ------------------------------------------------------------------------ */
/* Home — testimonials (light). template-parts/home/testimonials.php         */
/* ------------------------------------------------------------------------ */
.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
}

.testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg);
	border: 1px solid var(--grey-bg);
	border-radius: calc(var(--radius) * 2);
	background: var(--white);
}

.testimonial__quote {
	margin: 0;
	font-family: var(--font-accent);
	font-style: italic;
	font-size: var(--text-lg);
	line-height: 1.5;
	color: var(--ink-900);
}

.testimonial__cite { display: flex; flex-direction: column; gap: 2px; }
.testimonial__name { font-weight: 600; color: var(--green-deep); }
.testimonial__org { font-size: var(--text-sm); color: var(--grey-text); }

.testimonials__highlight {
	margin-top: var(--space-lg);
	padding: var(--space-lg);
	text-align: center;
	border: 1px solid var(--grey-bg);
	border-radius: calc(var(--radius) * 2);
	background: var(--grey-bg);
}
.testimonials__highlight-stat {
	margin: 0 0 var(--space-2xs);
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	color: var(--green-deep);
}
.testimonials__highlight-copy {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--grey-text);
	max-width: 46rem;
	margin-inline: auto;
}

@media (max-width: 60rem) {
	.testimonials__grid { grid-template-columns: 1fr; }
}

/* ======================================================================== */
/* Our Approach page (template-parts/page-our-approach.php)                  */
/* ======================================================================== */
.approach-hero__inner { max-width: 44rem; }
.approach-hero__title { margin: 0 0 var(--space-md); color: var(--green-deep); }
.approach-hero__lead { font-size: var(--text-lg); color: var(--grey-text); max-width: 40ch; margin: 0 0 var(--space-lg); }

.approach-stall__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
	align-items: center;
}
.approach-stall__lead { color: var(--grey-text); margin: 0 0 var(--space-md); }
.approach-stall__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.approach-stall__list li { position: relative; padding-left: 1.75rem; color: var(--grey-text); }
.approach-stall__list li::before { content: "\00d7"; position: absolute; left: 0; top: -0.1em; color: var(--green-deep); font-weight: 700; }
.approach-stall__callout {
	padding: var(--space-lg);
	border-radius: calc(var(--radius) * 2);
	background: var(--grad-ink);
	color: var(--text-on-dark);
}
.approach-stall__callout-title { color: var(--text-on-dark); margin: 0 0 var(--space-sm); }
.approach-stall__callout p { color: color-mix(in srgb, var(--text-on-dark) 82%, transparent); margin: 0; }

.approach-shift__table { max-width: var(--container-md); margin: 0 auto; border: 1px solid var(--grey-bg); border-radius: calc(var(--radius) * 2); overflow: hidden; }
.approach-shift__row { display: grid; grid-template-columns: 1fr 1fr; }
.approach-shift__row + .approach-shift__row { border-top: 1px solid var(--grey-bg); }
.approach-shift__row span { padding: var(--space-md) var(--space-lg); }
.approach-shift__row--head span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--grey-text); background: var(--paper); }
.approach-shift__row--head .approach-shift__org { background: var(--green-deep); color: var(--white); }
.approach-shift__from { color: var(--grey-text); display: flex; justify-content: space-between; gap: var(--space-sm); }
.approach-shift__arrow { color: var(--green-deep); }
.approach-shift__to { font-weight: 600; color: var(--green-deep); background: color-mix(in srgb, var(--green) 8%, transparent); }

.approach-how__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.approach-how__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green-deep); color: var(--white); font-family: var(--font-heading); margin-bottom: var(--space-sm); }
.approach-how__step-title { font-size: var(--text-lg); margin: 0 0 var(--space-2xs); color: var(--green-deep); }
.approach-how__step-body { font-size: var(--text-sm); color: var(--grey-text); margin: 0; }

.approach-practice__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.approach-practice__card { padding: var(--space-lg); border: 1px solid var(--grey-bg); border-radius: calc(var(--radius) * 2); background: var(--white); }
.approach-practice__card .icon { width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-sm); }
.approach-practice__card-title { font-size: var(--text-lg); margin: 0 0 var(--space-2xs); color: var(--green-deep); }
.approach-practice__card-body { font-size: var(--text-sm); color: var(--grey-text); margin: 0; }

@media (max-width: 61.99rem) {
	.approach-stall__grid { grid-template-columns: 1fr; }
	.approach-how__list { grid-template-columns: repeat(2, 1fr); }
	.approach-practice__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 34rem) {
	.approach-how__list { grid-template-columns: 1fr; }
	.approach-practice__grid { grid-template-columns: 1fr; }
	.approach-shift__row span { padding: var(--space-sm) var(--space-md); }
}

/* ======================================================================== */
/* Contact page (template-parts/page-contact.php)                            */
/* ======================================================================== */
.contact-hero__inner { max-width: 42rem; }
.contact-hero__title { margin: 0 0 var(--space-md); color: var(--green-deep); }
.contact-hero__lead { font-size: var(--text-lg); color: var(--grey-text); max-width: 44ch; margin: 0; }

.contact-main__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); }
.contact-info__list { list-style: none; margin: var(--space-md) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.contact-info__list li { display: flex; gap: var(--space-md); }
.contact-info__list .icon { width: 2rem; height: 2rem; flex-shrink: 0; }
.contact-info__label { display: block; font-weight: 600; color: var(--green-deep); }
.contact-info__list a { color: var(--green-deep); }
.contact-info__list p { margin: 0; color: var(--grey-text); font-size: var(--text-sm); }
.contact-info__note { color: var(--grey-text); font-size: var(--text-sm); border-top: 1px solid var(--grey-bg); padding-top: var(--space-md); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); }
.contact-form__field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.contact-form__field label { font-size: var(--text-sm); font-weight: 600; color: var(--green-deep); }
.contact-form input, .contact-form textarea {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--grey-bg);
	border-radius: var(--radius);
	background: var(--white);
	font-family: var(--font-body);
	color: var(--ink-900);
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button { align-self: flex-start; }
.contact-form__status { padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.contact-form__status--ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-deep); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.contact-form__status--error { background: color-mix(in srgb, #C0392B 12%, transparent); color: #A23225; border: 1px solid color-mix(in srgb, #C0392B 35%, transparent); }

.contact-book__inner, .contact-global__inner { max-width: 42rem; margin: 0 auto; text-align: center; }
.contact-book__inner .icon, .contact-global__inner .icon { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--space-sm); }
.contact-book__title { color: var(--text-on-dark); margin: 0 0 var(--space-sm); }
.contact-book__lead { color: color-mix(in srgb, var(--text-on-dark) 82%, transparent); margin: 0 0 var(--space-lg); }
.contact-book__embed { position: relative; width: 100%; min-height: 40rem; border-radius: calc(var(--radius) * 2); overflow: hidden; background: var(--white); }
.contact-book__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-global__title { color: var(--green-deep); margin: 0 0 var(--space-sm); }
.contact-global__lead { color: var(--grey-text); margin: 0; }

@media (max-width: 52rem) {
	.contact-main__grid { grid-template-columns: 1fr; }
}


/* ======================================================================== */
/* Home — CoSuite conditions pie/donut (template-parts/home/cosuite-pie.php)  */
/* ======================================================================== */
.cosuite-pie__head { max-width: 52rem; margin: 0 auto var(--space-lg); text-align: center; }
.cosuite-pie__eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--green);
}
.cosuite-pie__title { color: var(--text-on-dark); margin: 0 0 var(--space-md); }
.cosuite-pie__lead { color: color-mix(in srgb, var(--text-on-dark) 80%, transparent); font-size: var(--text-lg); line-height: 1.6; }

.cosuite-pie__stage {
	position: relative;
	width: min(100%, 36rem);
	aspect-ratio: 1 / 1;
	margin: 0 auto;
}

.cosuite-pie__chart {
	position: absolute; top: 50%; left: 50%;
	width: 50%; height: 50%;
	transform: translate(-50%, -50%);
	display: block;
}
.cosuite-pie__seg {
	stroke: var(--ink-900);
	stroke-width: 0.6;
	transition: opacity var(--transition-fast) ease;
}

.cosuite-pie__hub {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	text-align: center; pointer-events: none;
}
.cosuite-pie__hub-lg { font-family: var(--font-heading); color: var(--text-on-dark); font-size: var(--text-xl); }
.cosuite-pie__hub-sm { font-size: var(--text-xs); color: var(--muted-on-dark); text-transform: uppercase; letter-spacing: 0.12em; max-width: 9rem; line-height: 1.35; }

.cosuite-pie__labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.cosuite-pie__label {
	position: absolute; top: 50%; left: 50%;
	--r: clamp(9rem, 26vw, 12.75rem);
	transform: translate(-50%, -50%) rotate(var(--a)) translate(0, calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
}
.cosuite-pie__label-link {
	display: flex; flex-direction: column; align-items: center; gap: 1px;
	width: 6.75rem; padding: var(--space-2xs) var(--space-xs);
	border-radius: 999px;
	text-decoration: none; text-align: center;
	transition: transform var(--transition-fast) ease, background-color var(--transition-fast) ease;
}
.cosuite-pie__label-link:hover { transform: scale(1.06); background-color: color-mix(in srgb, var(--green) 14%, transparent); }
.cosuite-pie__el { font-weight: 600; color: var(--green-glow); font-size: var(--text-sm); }
.cosuite-pie__cond { font-size: var(--text-xs); color: var(--text-on-dark); }

.cosuite-pie__cta { margin-top: var(--space-xl); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.cosuite-pie__cta-link { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 0.2em; font-size: var(--text-sm); }
.cosuite-pie__cta-link:hover { color: var(--green-glow); }

/* Mobile: donut on top, conditions as a 2-col grid below (no ring). */
@media (max-width: 48rem) {
	.cosuite-pie__stage { aspect-ratio: auto; }
	.cosuite-pie__chart { position: relative; top: auto; left: auto; transform: none; width: 15rem; height: 15rem; margin: 0 auto var(--space-lg); }
	.cosuite-pie__hub { top: 7.5rem; }
	.cosuite-pie__labels { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
	.cosuite-pie__label { position: static; transform: none; }
	.cosuite-pie__label-link { width: auto; border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
}

/* ------------------------------------------------------------------------ */
/* Book-buyer resource page (template-parts/page-hidden-page)               */
/* ------------------------------------------------------------------------ */

.hidden-hero__actions {
	margin-top: var(--space-lg);
}

.hidden-inside__heading {
	margin-bottom: var(--space-md);
}

.hidden-inside__list {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
	display: grid;
	gap: var(--space-2xs);
}

.hidden-inside__list li {
	padding-left: 1.6rem;
	position: relative;
	color: var(--grey-text);
}

.hidden-inside__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--green);
}

.hidden-inside__note {
	color: var(--grey-text);
	max-width: 52ch;
	margin-bottom: var(--space-lg);
}

.hidden-legal__heading {
	font-size: var(--text-lg);
	margin-bottom: var(--space-sm);
}

.hidden-legal__body {
	color: color-mix(in srgb, var(--text-on-dark) 74%, transparent);
	font-size: var(--text-sm);
	line-height: 1.7;
	max-width: 70ch;
	margin-bottom: var(--space-sm);
}

/* Book-buyer hero: full-bleed mature-tree render behind the copy (matches the
   CoSuite/Snapshot media heroes). */
.hidden-hero.page-hero--media {
	background:
		linear-gradient(90deg, rgba(14, 15, 16, 0.94) 0%, rgba(14, 15, 16, 0.66) 50%, rgba(14, 15, 16, 0.34) 100%),
		url("../tree/mature.jpg") center / cover no-repeat var(--ink-900);
}