/*
Theme Name: Grounded in Growth
Theme URI: https://groundedingrowth.ca
Author: Chris Hull
Description: A calm, editorial block theme for Crystal Van Den Bussche's psychotherapy practice, Grounded in Growth. Full Site Editing: every section is native Gutenberg blocks, and fonts, colours and spacing are controlled from the Site Editor > Styles panel.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grounded-in-growth
Tags: full-site-editing, block-patterns, blog, one-column, custom-colors, custom-menu, editor-style, wide-blocks
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
 1.0  Token aliases
 2.0  Base, motion & accessibility
 3.0  Section shells and rhythm
 4.0  Typographic utilities
 5.0  Buttons
 6.0  Header
 7.0  Hero
 8.0  About
 9.0  Finding the right fit
10.0  Services
11.0  Approach
12.0  EMDR timeline
13.0  FAQ
14.0  Certifications
15.0  Contact and crisis
16.0  Footer
17.0  Scroll reveal
18.0  Blog, archive and comments
19.0  Responsive
--------------------------------------------------------------*/


/*--------------------------------------------------------------
1.0 Token aliases

Every value resolves to a theme.json preset first, so Site Editor >
Styles stays the single source of truth. The hex fallbacks only apply
if a preset is renamed or removed.
--------------------------------------------------------------*/
:root {
	--gg-paper: var(--wp--preset--color--paper, #EFE8D8);
	--gg-paper-2: var(--wp--preset--color--paper-2, #E7DFCB);
	--gg-card: var(--wp--preset--color--card, #F5F0E4);
	--gg-ink: var(--wp--preset--color--ink, #2B2822);
	--gg-ink-soft: var(--wp--preset--color--ink-soft, #5A5647);
	--gg-pine: var(--wp--preset--color--pine, #23342A);
	--gg-pine-2: var(--wp--preset--color--pine-2, #2C4032);
	--gg-moss: var(--wp--preset--color--moss, #6E7C5C);
	--gg-sage: var(--wp--preset--color--sage, #97A17F);
	--gg-ochre: var(--wp--preset--color--ochre, #C0883A);
	--gg-ochre-deep: var(--wp--preset--color--ochre-deep, #A5722C);
	--gg-line: var(--wp--preset--color--line, #D8CEB5);
	--gg-line-soft: var(--wp--preset--color--line-soft, #E2DAC5);

	--gg-sans: var(--wp--preset--font-family--sans, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);
	--gg-serif: var(--wp--preset--font-family--serif, "Fraunces", Georgia, serif);

	--gg-r: var(--wp--custom--radius, 16px);
	--gg-pill: var(--wp--custom--radius-pill, 999px);
	--gg-shadow: var(--wp--preset--shadow--shadow, 0 1px 2px rgba(35, 52, 42, .05), 0 10px 30px rgba(35, 52, 42, .07));
	--gg-shadow-lift: var(--wp--preset--shadow--shadow-lift, 0 2px 6px rgba(35, 52, 42, .08), 0 18px 44px rgba(35, 52, 42, .12));

	--gg-gap: clamp(32px, 5vw, 64px);

	/*
	 * Strength of the scrim over the hero video. 0.82 keeps the hero lede at
	 * 4.6:1 even against a blown-out white frame; lower it for dark, low-key
	 * footage if you want more of the picture through.
	 */
	--gg-hero-scrim: .82;

	/*
	 * Dark-context literals. Deliberately kept out of the palette: they are
	 * only legible inside the pine sections and the crisis card, so exposing
	 * them in Styles would invite misuse on the paper field.
	 */
	--gg-on-dark-sage: #C7D2B6;
	--gg-on-dark-gold: #E4C58C;
	--gg-on-dark-lede: rgba(239, 232, 216, .78);
	--gg-on-dark-body: rgba(239, 232, 216, .75);
	--gg-on-dark-rule: rgba(239, 232, 216, .16);
	--gg-on-dark-border: rgba(239, 232, 216, .4);
	--gg-on-dark-wash: rgba(239, 232, 216, .12);
	--gg-crisis-bg: #3A2A22;
	--gg-crisis-accent: #E4B98C;
	--gg-btn-on-dark-hover: #d29a4d;
}


/*--------------------------------------------------------------
2.0 Base, motion & accessibility
--------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Anchor targets clear the sticky header. */
:target,
[id] {
	scroll-margin-top: 96px;
}

img {
	max-width: 100%;
	height: auto;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible,
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--gg-ochre);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal;
}

.skip-link:focus {
	background-color: var(--gg-card);
	clip-path: none;
	color: var(--gg-pine);
	font-size: 15px;
	font-weight: 600;
	height: auto;
	left: 8px;
	padding: 14px 22px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}


/*--------------------------------------------------------------
3.0 Section shells and rhythm

A section is a full-width flow Group carrying the background, wrapping a
constrained `.wrap` Group. WordPress supplies the 1160px measure and the
root gutter to `.wrap` via the constrained layout, so the colour bleeds
edge to edge while the copy stays on the grid.
--------------------------------------------------------------*/
.section {
	padding-block: var(--wp--preset--spacing--80, clamp(4rem, 9vw, 7rem));
}

.section--tight {
	padding-block: var(--wp--preset--spacing--60, clamp(3rem, 7vw, 5rem));
}

/*
 * Bespoke grids replace the flow layout's stacking margins with `gap`.
 * Patterns also set blockGap to 0; this is the belt-and-braces half.
 */
body :is(
	.about-grid,
	.approach-grid,
	.services-grid,
	.contact-grid,
	.interest,
	.support-cols,
	.timeline,
	.phase,
	.chips,
	.tagrow,
	.certs,
	.contact-list,
	.contact-item,
	.crisis-list,
	.footer-top,
	.footer-bottom,
	.band
) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Dark sections flip the whole ramp to paper. */
.bg-pine {
	color: var(--gg-paper);
}

.bg-pine :is(h1, h2, h3, h4, h5, h6),
.bg-pine strong {
	color: var(--gg-paper);
}

.bg-pine p,
.bg-pine li {
	color: var(--gg-on-dark-body);
}

.bg-pine .lede {
	color: var(--gg-on-dark-lede);
}

.bg-pine .eyebrow {
	color: var(--gg-on-dark-sage);
}

.bg-pine a:not(.wp-block-button__link) {
	color: var(--gg-paper);
}

.bg-pine a:not(.wp-block-button__link):hover,
.bg-pine a:not(.wp-block-button__link):focus-visible {
	color: var(--gg-on-dark-gold);
}


/*--------------------------------------------------------------
4.0 Typographic utilities
--------------------------------------------------------------*/
.eyebrow {
	align-items: center;
	color: var(--gg-moss);
	display: flex;
	font-family: var(--gg-sans);
	font-size: 12.5px;
	font-weight: 700;
	gap: 10px;
	letter-spacing: .18em;
	line-height: 1.4;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.eyebrow::before {
	background: var(--gg-ochre);
	border-radius: 2px;
	content: "";
	flex: 0 0 auto;
	height: 1.5px;
	width: 22px;
}

.eyebrow--center {
	display: flex;
	justify-content: center;
	margin-bottom: 26px;
}

.lede {
	color: var(--gg-ink-soft);
	font-size: clamp(17px, 1.9vw, 19px);
	max-width: 60ch;
}

.head-block {
	margin-bottom: clamp(32px, 5vw, 52px);
}

/*
 * The measure lives on the contents, not the group. A max-width on the group
 * itself would make constrained layout centre it in the column rather than
 * align it to the left edge.
 */
.head-block > * {
	max-width: 66ch;
}

.head-block h2 {
	margin-bottom: 16px;
}

.head-block--center {
	margin-inline: auto;
	max-width: 66ch;
	text-align: center;
}

.head-block--center > * {
	max-width: none;
}

/* Micro-label: contact rows, crisis card, footer column heads. */
.lb {
	color: var(--gg-moss);
	font-family: var(--gg-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	margin: 0 0 2px;
	text-transform: uppercase;
}

.pullquote {
	border-left: 3px solid var(--gg-ochre);
	color: var(--gg-pine);
	font-family: var(--gg-serif);
	font-size: clamp(21px, 3vw, 29px);
	font-style: italic;
	line-height: 1.4;
	margin: 8px 0;
	max-width: 44ch;
	padding: 6px 0 6px 26px;
}

.pullquote p {
	margin: 0;
}

.pullquote--lg {
	font-size: clamp(22px, 3.2vw, 30px);
}

.cite,
.pullquote cite {
	color: var(--gg-moss);
	display: block;
	font-family: var(--gg-sans);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .04em;
	margin-top: 12px;
}


/*--------------------------------------------------------------
5.0 Buttons

Four variants. `is-style-*` comes from register_block_style(); the
`btn--*` aliases let a pattern set the variant from the Advanced >
additional CSS class field instead.
--------------------------------------------------------------*/
.wp-block-button .wp-block-button__link {
	align-items: center;
	border: 1.5px solid transparent;
	display: inline-flex;
	gap: 9px;
	justify-content: center;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
	white-space: nowrap;
}

/* primary */
.wp-block-button.is-style-primary > .wp-block-button__link,
.wp-block-button.btn--primary > .wp-block-button__link {
	background-color: var(--gg-ochre);
	box-shadow: 0 6px 16px rgba(192, 136, 58, .28);
	color: var(--gg-pine);
}

.wp-block-button.is-style-primary > .wp-block-button__link:hover,
.wp-block-button.btn--primary > .wp-block-button__link:hover,
.wp-block-button.is-style-primary > .wp-block-button__link:focus-visible,
.wp-block-button.btn--primary > .wp-block-button__link:focus-visible {
	background-color: var(--gg-ochre-deep);
	box-shadow: 0 10px 22px rgba(165, 114, 44, .34);
	transform: translateY(-2px);
}

/* ghost */
.wp-block-button.is-style-ghost > .wp-block-button__link,
.wp-block-button.btn--ghost > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--gg-moss);
	color: var(--gg-pine);
}

.wp-block-button.is-style-ghost > .wp-block-button__link:hover,
.wp-block-button.btn--ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-ghost > .wp-block-button__link:focus-visible,
.wp-block-button.btn--ghost > .wp-block-button__link:focus-visible {
	background-color: var(--gg-moss);
	color: var(--gg-paper);
	transform: translateY(-2px);
}

/* onDark */
.wp-block-button.is-style-on-dark > .wp-block-button__link,
.wp-block-button.btn--onDark > .wp-block-button__link {
	background-color: var(--gg-ochre);
	color: var(--gg-pine);
}

.wp-block-button.is-style-on-dark > .wp-block-button__link:hover,
.wp-block-button.btn--onDark > .wp-block-button__link:hover,
.wp-block-button.is-style-on-dark > .wp-block-button__link:focus-visible,
.wp-block-button.btn--onDark > .wp-block-button__link:focus-visible {
	background-color: var(--gg-btn-on-dark-hover);
	transform: translateY(-2px);
}

/* ghostDark */
.wp-block-button.is-style-ghost-dark > .wp-block-button__link,
.wp-block-button.btn--ghostDark > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--gg-on-dark-border);
	color: var(--gg-paper);
}

.wp-block-button.is-style-ghost-dark > .wp-block-button__link:hover,
.wp-block-button.btn--ghostDark > .wp-block-button__link:hover,
.wp-block-button.is-style-ghost-dark > .wp-block-button__link:focus-visible,
.wp-block-button.btn--ghostDark > .wp-block-button__link:focus-visible {
	background-color: var(--gg-on-dark-wash);
	transform: translateY(-2px);
}


/*--------------------------------------------------------------
6.0 Header

Sticky lives on the template-part wrapper: a sticky child inside a
wrapper that is only as tall as itself has no room to travel.
`.is-stuck` is toggled from assets/js/theme.js past 8px.
--------------------------------------------------------------*/
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.site-header {
	background-color: rgba(239, 232, 216, .82);
	background-color: color-mix(in srgb, var(--gg-paper) 82%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-stuck {
	border-bottom-color: var(--gg-line);
	box-shadow: 0 6px 20px rgba(35, 52, 42, .06);
}

.nav {
	gap: 24px;
	min-height: 70px;
}

.brand {
	color: var(--gg-pine);
	font-family: var(--gg-serif);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.2;
	margin: 0;
	text-decoration: none;
	white-space: nowrap;
}

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

.brand .sm {
	color: var(--gg-moss);
	font-family: var(--gg-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.nav-links {
	font-size: 15px;
	font-weight: 500;
}

.nav-links .wp-block-navigation-item__content {
	color: var(--gg-ink);
	opacity: .82;
	padding: 6px 0;
	position: relative;
	text-decoration: none;
	transition: opacity .15s ease, color .15s ease;
}

.nav-links .wp-block-navigation-item__content:hover,
.nav-links .wp-block-navigation-item__content:focus-visible {
	color: var(--gg-pine);
	opacity: 1;
}

.nav-links .wp-block-navigation-item__content::after {
	background: var(--gg-ochre);
	bottom: 0;
	content: "";
	height: 1.5px;
	left: 0;
	position: absolute;
	transition: width .2s ease;
	width: 0;
}

.nav-links .wp-block-navigation-item__content:hover::after {
	width: 100%;
}

/* The core overlay is a panel, not an inline row: reset the underline. */
.nav-links .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--gg-paper);
	padding: clamp(28px, 6vw, 48px);
}

.nav-links .is-menu-open .wp-block-navigation-item__content {
	font-size: 18px;
	opacity: 1;
}

.nav-links .is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.nav-cta .wp-block-button__link {
	font-size: 14.5px;
	padding: 10px 20px;
}


/*--------------------------------------------------------------
7.0 Hero

Layer order, back to front:
    ::before gradient (0) -> video (1) -> ::after grain (2) -> content (3)

The gradient sits under the video and is never removed, so it acts as the
poster while the first frame loads and as the permanent fallback when the
video is absent, refused autoplay, or switched off for reduced motion or
small screens. The hero is complete without it.
--------------------------------------------------------------*/
.hero {
	background-color: var(--gg-pine);
	color: var(--gg-paper);
	overflow: hidden;
	position: relative;
}

.hero::before {
	background:
		radial-gradient(120% 90% at 82% 8%, rgba(110, 124, 92, .55), transparent 55%),
		radial-gradient(90% 80% at 10% 100%, rgba(44, 64, 50, .9), transparent 60%),
		linear-gradient(160deg, #283B2E 0%, #20302A 60%, #1B2924 100%);
	content: "";
	inset: 0;
	opacity: .9;
	position: absolute;
	z-index: 0;
}

/* Soft grain over the gradient. */
.hero::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	content: "";
	inset: 0;
	mix-blend-mode: overlay;
	opacity: .05;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.hero > .wrap {
	position: relative;
	z-index: 3;
}

/*
 * Background video. The source starts in data-src and is only promoted to a
 * real src by assets/js/theme.js once the viewport is wide enough and the
 * visitor has not asked for reduced motion, so narrow and reduced-motion
 * visitors download nothing at all.
 */
.hero-video {
	inset: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	transition: opacity .9s ease;
	z-index: 1;
}

/* Added on the `playing` event, so the video fades in instead of cutting. */
.hero-video.is-playing {
	opacity: 1;
}

.hero-video video {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Scrim, so hero copy stays legible whatever the footage is doing. */
.hero-video::after {
	background: linear-gradient(160deg,
		rgb(40 59 46 / var(--gg-hero-scrim)) 0%,
		rgb(32 48 42 / var(--gg-hero-scrim)) 60%,
		rgb(27 41 36 / var(--gg-hero-scrim)) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

/* Motion is decoration here: reduced motion gets the gradient, not a still. */
@media (prefers-reduced-motion: reduce) {

	.hero-video {
		display: none;
	}
}

/* Not worth the data on a phone; the gradient is the designed fallback. */
@media (max-width: 767px) {

	.hero-video {
		display: none;
	}
}

.hero-inner {
	padding: clamp(72px, 11vw, 120px) 0 clamp(64px, 9vw, 104px);
}

/*
 * Editor only. The front end renders `.hero-video` from render.php and never
 * sees these classes; they exist so the client can find and select the hero
 * video block in the Site Editor canvas.
 */
.gg-hero-video-editor {
	align-items: center;
	border: 1px dashed currentColor;
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	opacity: .8;
	padding: 10px 14px;
}

.gg-hero-video-editor__label {
	font-weight: 600;
}

.gg-hero-video-editor__file {
	opacity: .85;
}

.hero h1 {
	color: var(--gg-paper);
	font-size: clamp(34px, 6.4vw, 68px);
	font-weight: 500;
	letter-spacing: -.02em;
	margin: 0 0 22px;
	overflow-wrap: break-word;
}

.hero h1 em {
	color: var(--gg-on-dark-gold);
	font-style: italic;
	font-weight: 500;
}

.hero .lede {
	color: rgba(239, 232, 216, .8);
	font-size: clamp(16px, 1.9vw, 18.5px);
	margin-bottom: 32px;
	max-width: none;
}

.hero-actions {
	gap: 14px;
}

/*--------------------------------------------------------------
8.0 About
--------------------------------------------------------------*/
.about-grid {
	align-items: start;
	display: grid;
	gap: var(--gg-gap);
	grid-template-columns: .82fr 1.18fr;
}

.portrait-frame {
	position: relative;
}

.portrait-frame .wp-block-image,
.portrait-frame figure {
	margin: 0;
}

.portrait-frame .wp-block-image img {
	aspect-ratio: 4 / 5;
	border-radius: var(--gg-r);
	box-shadow: var(--gg-shadow-lift);
	display: block;
	object-fit: cover;
	width: 100%;
}

/* Offset sage frame, tucked behind the portrait. */
.portrait-frame::after {
	border: 1.5px solid var(--gg-sage);
	border-radius: var(--gg-r);
	content: "";
	inset: 14px -14px -14px 14px;
	position: absolute;
	z-index: -1;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 26px;
}

.chip {
	background: var(--gg-paper-2);
	border: 1px solid var(--gg-line);
	border-radius: var(--gg-pill);
	color: var(--gg-pine);
	font-size: 14px;
	font-weight: 600;
	padding: 7px 15px;
}

.chip--leaf::before {
	background: var(--gg-moss);
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 6px;
	margin-right: 8px;
	vertical-align: middle;
	width: 6px;
}


/*--------------------------------------------------------------
9.0 Finding the right fit
--------------------------------------------------------------*/
.approach-grid {
	align-items: center;
	display: grid;
	gap: clamp(32px, 5vw, 60px);
	grid-template-columns: 1fr 1fr;
}

.interest {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, 1fr);
}

.icard {
	background: var(--gg-card);
	border: 1px solid var(--gg-line-soft);
	border-radius: var(--gg-r);
	box-shadow: var(--gg-shadow);
	padding: 28px 24px;
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease;
}

.icard:hover {
	box-shadow: var(--gg-shadow-lift);
	transform: translateY(-4px);
}

.node {
	align-items: center;
	background: var(--gg-pine);
	border-radius: 50%;
	display: flex;
	height: 34px;
	justify-content: center;
	margin-bottom: 16px;
	width: 34px;
}

.node span {
	background: var(--gg-ochre);
	border-radius: 50%;
	height: 9px;
	width: 9px;
}

.icard h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.icard p {
	color: var(--gg-ink-soft);
	font-size: 15.5px;
	margin: 0;
}

.callout {
	background: var(--gg-card);
	border: 1px solid var(--gg-line);
	border-radius: var(--gg-r);
	box-shadow: var(--gg-shadow);
	padding: clamp(24px, 3vw, 34px);
}

.callout h3 {
	margin-bottom: 8px;
}

.callout .lede {
	font-size: 15.5px;
	max-width: none;
}

.refer-list {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.refer-list li {
	color: var(--gg-ink-soft);
	font-size: 15.5px;
	padding-left: 30px;
	position: relative;
}

.refer-list li::before {
	color: var(--gg-ochre);
	content: "\2192";
	font-weight: 700;
	left: 0;
	position: absolute;
	top: 0;
}


/*--------------------------------------------------------------
10.0 Services
--------------------------------------------------------------*/
.services-grid {
	align-items: start;
	display: grid;
	gap: clamp(32px, 5vw, 56px);
	grid-template-columns: 1.25fr .9fr;
}

/*
 * core/table renders <figure class="wp-block-table rates"><table>.
 * Columns are addressed positionally so the styling survives a round
 * trip through the editor, which strips classes from table cells.
 */
.wp-block-table.rates {
	margin: 0;
}

.wp-block-table.rates table {
	background: var(--gg-card);
	border: 1px solid var(--gg-line);
	border-collapse: separate;
	border-radius: var(--gg-r);
	border-spacing: 0;
	box-shadow: var(--gg-shadow);
	overflow: hidden;
	width: 100%;
}

.wp-block-table.rates :is(th, td) {
	border-bottom: 1px solid var(--gg-line-soft);
	border-left: 0;
	border-right: 0;
	border-top: 0;
	padding: 18px 22px;
	text-align: left;
}

.wp-block-table.rates thead th {
	background: var(--gg-paper-2);
	color: var(--gg-moss);
	font-family: var(--gg-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wp-block-table.rates tbody tr:last-child td {
	border-bottom: none;
}

/* Service */
.wp-block-table.rates td:nth-child(1) {
	color: var(--gg-pine);
	font-weight: 600;
}

/* Format */
.wp-block-table.rates td:nth-child(2) {
	color: var(--gg-ink-soft);
	font-size: 14.5px;
}

/* Rate */
.wp-block-table.rates :is(th, td):nth-child(3) {
	text-align: right;
}

.wp-block-table.rates td:nth-child(3) {
	color: var(--gg-pine);
	font-family: var(--gg-serif);
	font-size: 22px;
	white-space: nowrap;
}

/* The free consult row reads as a quiet accent, not a price. */
.wp-block-table.rates tbody tr:first-child td:nth-child(3),
.wp-block-table.rates td .free {
	color: var(--gg-moss);
}

.pay-note {
	color: var(--gg-ink-soft);
	font-size: 14px;
	margin-top: 14px;
}

.know-list {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.know-list li {
	color: var(--gg-ink-soft);
	font-size: 15.5px;
	padding-left: 30px;
	position: relative;
}

.know-list li::before {
	border: 2px solid var(--gg-sage);
	border-radius: 50%;
	content: "";
	height: 12px;
	left: 2px;
	position: absolute;
	top: 9px;
	width: 12px;
}

.band {
	align-items: center;
	background: var(--gg-pine);
	border-radius: 22px;
	box-shadow: var(--gg-shadow-lift);
	color: var(--gg-paper);
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: space-between;
	padding: clamp(30px, 4vw, 44px);
}

.band h3 {
	color: var(--gg-paper);
	font-size: clamp(22px, 2.6vw, 28px);
	margin-bottom: 8px;
}

.band p {
	color: rgba(239, 232, 216, .8);
	font-size: 15.5px;
	margin: 0;
	max-width: 46ch;
}


/*--------------------------------------------------------------
11.0 Approach
--------------------------------------------------------------*/
.tagrow {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 6px;
}

.tag {
	background: var(--gg-card);
	border: 1px solid var(--gg-line);
	border-radius: 10px;
	color: var(--gg-pine);
	font-size: 15px;
	font-weight: 600;
	padding: 9px 17px;
}

.tag--solid {
	background: var(--gg-moss);
	border-color: var(--gg-moss);
	color: var(--gg-paper);
}

.support-cols {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, 1fr);
}

.support-cols ul {
	display: grid;
	gap: 11px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.support-cols li {
	background: var(--gg-card);
	border: 1px solid var(--gg-line-soft);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(35, 52, 42, .04);
	color: var(--gg-pine);
	font-size: 15px;
	font-weight: 600;
	padding: 12px 16px;
}


/*--------------------------------------------------------------
12.0 EMDR timeline
--------------------------------------------------------------*/
.emdr-intro {
	margin-bottom: clamp(34px, 5vw, 54px);
}

.emdr-intro > * {
	max-width: 64ch;
}

.timeline {
	display: grid;
	gap: 6px;
	margin-left: 6px;
	position: relative;
}

.timeline::before {
	background: linear-gradient(var(--gg-sage), var(--gg-moss));
	bottom: 14px;
	content: "";
	left: 19px;
	position: absolute;
	top: 14px;
	width: 2px;
}

.phase {
	align-items: start;
	display: grid;
	gap: 22px;
	grid-template-columns: 40px 1fr;
	padding: 14px 0;
	position: relative;
}

.dot {
	align-items: center;
	background: var(--gg-pine);
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--gg-paper);
	color: var(--gg-paper);
	display: flex;
	font-family: var(--gg-serif);
	font-size: 17px;
	font-weight: 600;
	height: 40px;
	justify-content: center;
	margin: 0;
	position: relative;
	width: 40px;
	z-index: 2;
}

.phase h4 {
	font-family: var(--gg-serif);
	font-size: 19px;
	font-weight: 600;
	margin-bottom: 4px;
}

.phase p {
	color: var(--gg-ink-soft);
	font-size: 15px;
	margin: 0;
	max-width: 64ch;
}

/* On pine the dot inverts: ochre fill, pine numeral, pine halo. */
.bg-pine .timeline::before {
	background: linear-gradient(rgba(151, 161, 127, .6), rgba(110, 124, 92, .6));
}

.bg-pine .dot {
	background: var(--gg-ochre);
	box-shadow: 0 0 0 6px var(--gg-pine);
	color: var(--gg-pine);
}

.bg-pine .phase p {
	color: var(--gg-on-dark-body);
}


/*--------------------------------------------------------------
13.0 FAQ

Native core/details. The `+` marker rotates 45deg into an `x` on open.
--------------------------------------------------------------*/
.faq {
	border-top: 1px solid var(--gg-line);
	margin-inline: auto;
	max-width: 820px;
}

.faq .wp-block-details {
	border-bottom: 1px solid var(--gg-line);
	margin: 0;
}

.faq summary {
	color: var(--gg-pine);
	cursor: pointer;
	font-family: var(--gg-serif);
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 500;
	line-height: 1.35;
	list-style: none;
	padding: 22px 48px 22px 0;
	position: relative;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	color: var(--gg-ochre);
	content: "+";
	font-family: var(--gg-sans);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	position: absolute;
	right: 8px;
	top: 22px;
	transition: transform .25s ease;
}

.faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.faq .wp-block-details > :not(summary) {
	animation: gg-fade .3s ease;
	color: var(--gg-ink-soft);
	font-size: 15.5px;
	padding: 0 40px 24px 0;
}

@keyframes gg-fade {

	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}


/*--------------------------------------------------------------
14.0 Certifications
--------------------------------------------------------------*/
/*
 * Three equal columns across the full content width. auto-fit keeps them
 * three-up wherever there is room and drops to fewer as the viewport narrows,
 * without needing a breakpoint.
 */
.certs {
	align-items: center;
	display: grid;
	gap: clamp(28px, 5vw, 56px);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	justify-items: center;
}

.certs .wp-block-image,
.certs figure {
	margin: 0;
}

.certs .wp-block-image img {
	filter: saturate(.95);
	height: auto;
	opacity: .9;
	width: 100%;
}


/*--------------------------------------------------------------
15.0 Contact and crisis
--------------------------------------------------------------*/
.contact-grid {
	align-items: start;
	display: grid;
	gap: clamp(30px, 4vw, 48px);
	grid-template-columns: 1.15fr .85fr;
}

.contact-list {
	display: grid;
	gap: 20px;
	margin-top: 26px;
}

.contact-item {
	align-items: start;
	display: grid;
	gap: 16px;
	grid-template-columns: 44px 1fr;
}

.ic {
	align-items: center;
	background: var(--gg-paper-2);
	border: 1px solid var(--gg-line);
	border-radius: 12px;
	color: var(--gg-moss);
	display: flex;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.vl {
	color: var(--gg-pine);
	font-size: 16.5px;
	font-weight: 600;
	margin: 0;
	text-decoration: none;
}

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

.vl a:hover,
.vl a:focus-visible {
	color: var(--gg-ochre-deep);
}

.sub {
	color: var(--gg-ink-soft);
	font-size: 14px;
	margin: 3px 0 0;
}

.crisis {
	background: var(--gg-crisis-bg);
	border-radius: var(--gg-r);
	box-shadow: var(--gg-shadow-lift);
	color: var(--gg-paper);
	padding: clamp(24px, 3vw, 32px);
}

.crisis .eyebrow {
	color: var(--gg-crisis-accent);
}

.crisis .eyebrow::before {
	background: var(--gg-crisis-accent);
}

.crisis h3 {
	color: var(--gg-paper);
	font-size: 22px;
	margin-bottom: 6px;
}

.crisis p {
	color: rgba(239, 232, 216, .8);
	font-size: 14.5px;
}

.crisis-list {
	display: grid;
	gap: 14px;
	margin: 18px 0 0;
}

.crisis-item {
	border-top: 1px solid var(--gg-on-dark-rule);
	padding-top: 14px;
}

.crisis-item .lb {
	color: var(--gg-crisis-accent);
	font-size: 12px;
	letter-spacing: .1em;
}

.crisis-item .vl,
.crisis-item .vl a {
	color: var(--gg-paper);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.crisis-item .vl a:hover,
.crisis-item .vl a:focus-visible {
	color: var(--gg-crisis-accent);
}


/*--------------------------------------------------------------
16.0 Footer
--------------------------------------------------------------*/
.footer {
	background: var(--gg-pine);
	color: var(--gg-paper);
	padding: clamp(52px, 7vw, 72px) 0 34px;
}

.footer-top {
	border-bottom: 1px solid rgba(239, 232, 216, .14);
	display: grid;
	gap: 32px;
	grid-template-columns: 1.4fr 1fr 1fr;
	padding-bottom: 36px;
}

.footer .brand {
	color: var(--gg-paper);
}

.footer .brand a {
	color: inherit;
}

.footer-about {
	color: rgba(239, 232, 216, .72);
	font-size: 14.5px;
	margin-top: 14px;
	max-width: 40ch;
}

.footer-about strong {
	color: var(--gg-paper);
	font-weight: 600;
}

.footer h5 {
	color: var(--gg-on-dark-sage);
	font-family: var(--gg-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.footer-links {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links a {
	color: rgba(239, 232, 216, .82);
	font-size: 15px;
	text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--gg-ochre);
}

/* Sits under the practitioner line in the first footer column. */
.land {
	color: rgba(239, 232, 216, .6);
	font-size: 13.5px;
	font-style: italic;
	line-height: 1.7;
	margin: 18px 0 0;
	max-width: 40ch;
}

.footer-bottom {
	color: rgba(239, 232, 216, .55);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 16px;
	justify-content: space-between;
	margin-top: 24px;
}

.footer-bottom p {
	color: inherit;
	margin: 0;
}


/*--------------------------------------------------------------
17.0 Scroll reveal

Default state is visible. assets/js/theme.js adds `gg-js` to <html>
only when an IntersectionObserver is available and the visitor has not
asked for reduced motion, so nothing is ever hidden without a way back.
--------------------------------------------------------------*/
.gg-js .reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s ease;
}

.gg-js .reveal.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.gg-js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/*--------------------------------------------------------------
18.0 Blog, archive and comments
--------------------------------------------------------------*/
.entry-meta {
	color: var(--gg-ink-soft);
	font-size: 14.5px;
	letter-spacing: .02em;
}

.post-card {
	border-bottom: 1px solid var(--gg-line);
	padding-bottom: clamp(28px, 4vw, 40px);
}

.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	color: var(--gg-ochre-deep);
}

.wp-block-comments {
	border-top: 1px solid var(--gg-line);
	padding-top: clamp(32px, 5vw, 48px);
}

.wp-block-comment-template li {
	border-bottom: 1px solid var(--gg-line-soft);
	padding-bottom: 24px;
}

:is(.wp-block-search, .wp-block-comments) :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea) {
	background: var(--gg-card);
	border: 1px solid var(--gg-line);
	border-radius: 10px;
	color: var(--gg-ink);
	font-family: var(--gg-sans);
	font-size: 16px;
	padding: 12px 16px;
}

.wp-block-search__button {
	border: 1.5px solid transparent;
	border-radius: var(--gg-pill);
}


/*--------------------------------------------------------------
19.0 Responsive
--------------------------------------------------------------*/
@media (max-width: 960px) {

	.about-grid,
	.services-grid,
	.approach-grid,
	.contact-grid,
	.interest,
	.support-cols,
	.footer-top {
		grid-template-columns: 1fr;
	}

	.portrait-frame {
		max-width: 420px;
	}
}

@media (max-width: 760px) {

	.band {
		align-items: flex-start;
		flex-direction: column;
	}

	.interest {
		gap: 16px;
	}

	.nav {
		min-height: 64px;
	}
}

@media (max-width: 900px) {

	body .nav-links.wp-block-navigation {
		gap: 16px;
	}

	body .nav-cta .wp-block-button__link {
		padding: 9px 16px;
	}
}

/*
 * Below this the header cannot hold brand + nav + CTA without the button
 * overhanging the viewport, so the CTA steps aside. The hero's own
 * "Book a free 15-minute consult" is the mobile path to the same anchor.
 */
@media (max-width: 800px) {

	/* Two classes: core's flex layout rule for .wp-block-buttons is a single
	   class, and it is printed after this stylesheet. */
	.wp-block-buttons.nav-cta {
		display: none;
	}
}

@media (max-width: 520px) {

	.wp-block-table.rates thead {
		display: none;
	}

	.wp-block-table.rates :is(table, tbody, tr, td) {
		box-sizing: border-box;
		display: block;
		width: 100%;
	}

	.wp-block-table.rates tr {
		border-bottom: 1px solid var(--gg-line);
		padding: 6px 0;
	}

	.wp-block-table.rates tr:last-child {
		border-bottom: none;
	}

	.wp-block-table.rates td {
		border: none;
		padding: 6px 22px;
	}

	.wp-block-table.rates td:nth-child(3) {
		padding-top: 0;
		text-align: left;
	}
}