/* a11y utilities */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: fixed;
	top: 0;
	left: 0;
	background: var(--color-8-deep-green);
	color: var(--color-7-white);
	padding: 0.6em 1.2em;
	text-decoration: none;
	z-index: 1000;
	transform: translateY(-150%);
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-link:focus {
	transform: translateY(0);
	outline: 2px solid var(--color-5-light-green);
	outline-offset: 2px;
}

/* two-column layout */
.container {
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: start;
}

.left-column {
	flex: 1;
	width: 50%;
}

.right-column {
	flex: 1;
}

@media (max-width: 900px) {
	.container {
		flex-direction: column;
	}
}

/* hero section */
#hero {
	width: 100%;
	max-height: var(--max-section-height);
	overflow: hidden;
	padding-top: 4em;
	padding-bottom: 3em;
}

img.hero {
	display: block;
	width: 100%;
	object-fit: contain;
}

#hero .hero__blurb-cont {
	align-self: center;

	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-12-dark-green);
}

.hero__title {
	color: var(--color-3-grey);
	font-size: clamp(2.4rem, 7vw, var(--font-size-biggest));
	margin-bottom: 0.3em;
	line-height: 1.05;
}

.hero__tagline {
	max-width: 32em;
	margin: 0.4em 0 1.1em;
	font-size: var(--font-size-larger);
	line-height: 1.4;
	color: var(--color-12-dark-green);
	font-weight: 300;
}

/* ────────────────────────────────────────────────────────
   HERO ENTRANCE — a single welcoming moment on page load
   ────────────────────────────────────────────────────────
   Pure CSS, no scroll trigger, no library. Title and tagline
   fade up briefly when the page first loads — the reader's
   first impression is "the page arrives, then settles."
   Below the fold: nothing animates. Just content.
   `animation-fill-mode: both` keeps the from-state applied
   during the delay so there's no flash of final state. */
@keyframes heroEnter {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
.hero__title {
	animation: heroEnter 1200ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}
.hero__tagline {
	animation: heroEnter 1200ms cubic-bezier(0.16, 1, 0.3, 1) 560ms both;
}
.hero__subtitle-cont {
	animation: heroEnter 1200ms cubic-bezier(0.16, 1, 0.3, 1) 920ms both;
}

.hero__blurb {
	width: 75%;
}

.hero__subtitle-cont {
	display: flex;
	flex-direction: row;
}

.hero__line {
	font-size: var(--font-size-biggest);
	width: 1em;
	height: 2px;
	margin-top: 0.25em;
	border-top: 2px solid var(--color-4-dark-green);
	opacity: 0.8;
}

.hero__cert {
	font-size: var(--font-size-small);
	padding-left: 12px;
}

.hero__cert_link {
	color: #333;
  text-underline-offset: 3px;
}

.hero__welcome-msg {
	margin-top: 32px;
}
.hero__welcome-msg ul,
.hero__welcome-msg p {
	margin-bottom: 1em;
}

@media (max-width: 900px) {
	#hero {
		max-height: none;
	}
	#hero .hero__blurb-cont {
		margin-top: var(--margin-bottom-short);
		margin-bottom: var(--margin-bottom-short);
	}
	.hero__blurb {
		margin-top: 2em;
	}
	.left-column,
	.right-column {
		width: 100%;
	}
}

/*  common section layout */
.section-title-cont {
	margin-top: var(--margin-top);
	margin-left: var(--margin-left);
}
.section-title {
	color: var(--color-3-grey);
	font-size: var(--font-size-title);
}
.section-line {
	width: 5em;
	height: 2px;
	margin: 1em 0;
	border-top: 1px solid var(--color-4-dark-green);
}
.section-body-cont {
	display: flex;
	align-items: center;
	justify-content: center;
}
.section-body {
	width: 60%;
	margin-top: var(--margin-top);
	margin-bottom: var(--margin-top);
}
.section-body ul,
.section-body p {
	margin-bottom: 1em;
}

/*  "is it a sin" section */
#is-it-a-sin {
	background: var(--color-14-lighter-green);
	color: var(--color-12-dark-green);
}

/*  "how works" section */
#how-works {
	background: var(--color-5-light-green);
	color: var(--color-12-dark-green);
}

/*  "my approach" section */
#my-approach {
	background: var(--color-5-light-green);
	color: var(--color-12-dark-green);
}

/* section-aside: image or pull-quote that fills the left column */
.section-aside {
	margin: 3em var(--margin-left) 0;
	max-width: 460px;
	padding: 0;
}
.section-aside figure,
.section-aside {
	border: 0;
}
.section-aside img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--card2-border-radius);
	box-shadow: 0 8px 32px rgba(20, 30, 28, 0.18);
}

.section-aside--quote {
	margin-top: 4em;
}
.section-quote {
	margin: 0;
	padding: 0;
	border: 0;
}
.section-quote__text {
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.18;
	font-weight: 300;
	color: var(--color-13-dark-green);
	margin: 0;
	letter-spacing: -0.005em;
}
.section-quote__attr {
	display: block;
	margin-top: 1.6em;
	font-size: var(--font-size-tiny);
	font-style: normal;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-4-dark-green);
	font-weight: 500;
}

@media (max-width: 900px) {
	.section-aside {
		margin: 2.5em 1em 0;
		max-width: 90%;
	}
	.section-aside--quote {
		margin-top: 2.5em;
	}
	.section-quote__text {
		font-size: clamp(24px, 6vw, 32px);
	}
}

/*  "programs" section */
.program__title-cont {
	padding-top: var(--margin-top);
	margin-left: var(--margin-left);
}
.program__title {
	color: var(--color-3-grey);
	font-size: var(--font-size-title);
}
.program__line {
	width: 5em;
	height: 2px;
	margin: 1em 0;
	border-top: 1px solid var(--color-4-dark-green);
}
.program__body {
	margin-top: var(--margin-top-cards);
	margin-bottom: var(--margin-top);
}
.program__body {
	display: flex;
	flex-direction: column;
}
.program__row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

@media (max-width: 900px) {
	.program__row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}

/*  program cards. The whole card is the link — readers were trying to click anywhere on it, not just the Learn More button. The card is now an <a> wrapping the image, title, blurb, and a span styled as the button. */
#programs .card {
	width: var(--card1-size);
	margin: 64px;
	border-radius: var(--card1-border-radius);
	box-shadow: var(--card1-shadow);
	background: var(--color-7-white);
	font-size: var(--font-size-normal);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
#programs a.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(18, 46, 40, 0.12),
		0 2px 8px rgba(18, 46, 40, 0.08);
}
#programs a.card:hover .card-cta {
	background: var(--color-8-deep-green-hl);
}
#programs a.card:hover .card-img img {
	transform: scale(1.02);
}
#programs .card-img {
	overflow: hidden;
}
#programs .card-img img {
	transition: transform 600ms ease;
}
#programs .card-img img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: var(--card1-img-height);
}
#programs .card-title {
	text-align: center;
	font-size: var(--font-size-title);
	padding: 1.2em 1em 0.4em;
	color: var(--color-12-dark-green);
}
#programs .card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
#programs .card-blurb {
	padding: 0.4em 2em 0;
	color: var(--color-3-grey);
	line-height: 1.6;
	flex: 1;
}
#programs .card-cta-cont {
	text-align: center;
	margin: 1.6em auto 2em;
}
#programs .card-cta-cont a {
	text-decoration: none;
}
#programs .card-cta {
	display: inline-block;
	padding: 0.7em 2.4em;
	cursor: pointer;
	background: var(--color-8-deep-green);
	color: var(--color-7-white);
	border-radius: 4px;
	font-weight: 500;
	transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#programs .card-cta:hover {
	background: var(--color-8-deep-green-hl);
}

/*  "packages" section */
#packages {
	background: var(--color-3-grey);
	padding-top: var(--margin-top);
	padding-bottom: var(--margin-bottom-short);
	color: var(--color-5-light-green);
}
.packages__title-cont {
	margin-left: var(--margin-left);
}
.packages__title {
	font-size: var(--font-size-title);
}
.packages__line {
	width: 5em;
	height: 2px;
	margin: 1em 0;
	border-top: 1px solid var(--color-5-light-green);
}
.packages__intro {
	max-width: 720px;
	margin: 1.5em var(--margin-left) 0;
	color: var(--color-7-white);
}
.packages__intro-h3 {
	font-size: var(--font-size-larger);
	margin: 1.6em 0 0.4em;
	font-weight: 600;
	color: var(--color-7-white);
	line-height: 1.3;
}
.packages__intro-h3:first-child {
	margin-top: 0;
}
.packages__intro p {
	font-size: 1.05em;
	line-height: 1.6;
	margin: 0 0 0.8em;
	opacity: 0.92;
}
.packages__intro-cta {
	margin-top: 1.4em !important;
}
.packages__intro a {
	color: var(--color-7-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "Start Here" banner card — single-session entry point */
.start-here {
	max-width: 1000px;
	margin: 4em auto 3em;
	padding: 2em 2.4em;
	background: var(--color-14-lighter-green);
	color: var(--color-12-dark-green);
	border-radius: var(--card2-border-radius);
	box-shadow: var(--card2-shadow);
	position: relative;
}
.start-here__label {
	display: inline-block;
	font-size: var(--font-size-tiny);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--color-8-deep-green-hl);
	margin-bottom: 0.6em;
}
.start-here__main {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2em;
}
.start-here__copy {
	flex: 1;
}
.start-here__title {
	font-size: var(--font-size-larger);
	margin: 0 0 0.5em;
	color: var(--color-13-dark-green);
}
.start-here__blurb {
	margin: 0;
	line-height: 1.55;
	font-size: 1em;
}
.start-here__cta-cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	flex-shrink: 0;
}
.start-here__price {
	font-size: var(--font-size-title);
	font-weight: bold;
	color: var(--color-13-dark-green);
	line-height: 1;
}
.start-here__cta {
	display: inline-block;
	padding: 0.65em 1.6em;
	background: var(--color-8-deep-green);
	color: var(--color-7-white);
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.4s;
	white-space: nowrap;
}
.start-here__cta:hover {
	background: var(--color-8-deep-green-hl);
}

.packages__body {
	margin-top: var(--margin-top-cards);
	margin-bottom: var(--margin-top);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
}

.packages__note {
	text-align: center;
	max-width: 640px;
	margin: 2em auto 0;
	padding: 0 1em;
	color: var(--color-7-white);
	font-size: 0.95em;
	line-height: 1.6;
}
.packages__note p {
	margin: 0.8em 0;
}
.packages__note a {
	color: var(--color-7-white);
	text-decoration: underline;
  text-underline-offset: 3px;
}
.packages__continuing {
	font-size: 0.9em;
	opacity: 0.85;
}
.packages__payment {
	font-size: 0.9em;
	opacity: 0.85;
}
.packages__sliding-scale {
	font-size: 0.85em;
	opacity: 0.75;
	font-style: italic;
	margin-top: 1em !important;
}

/* package cards */
#packages .card {
	width: var(--card2-size);
	margin: 0 32px;
	text-align: center;
	border-radius: var(--card2-border-radius);
	background: var(--color-7-white);
	color: var(--color-3-grey);
	display: flex;
	flex-direction: column;
	position: relative;
}
#packages .card img {
	object-fit: cover;
	display: block;
	width: 100%;
	height: var(--card2-img-height);
	border-radius: var(--card2-border-radius) var(--card2-border-radius) 0 0;
}
#packages .card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#packages .card-title {
	text-align: center;
	font-size: var(--font-size-title);
	padding: 12px;
}
#packages .card-cta-cont {
	text-align: center;
	margin: 0.4em auto 1em;
}
#packages .card-cta-cont a {
	text-decoration: none;
}
#packages .card-desc {
	padding: 0 1.4em;
	margin: 0.4em 0 1em;
	font-size: 0.92em;
	line-height: 1.5;
	font-style: italic;
	color: var(--color-2-grey);
}
#packages .card-blurb {
	min-height: 8em;
	padding: 0 1em;
}
#packages .card-blurb li {
	padding: 0.18em 0;
	font-size: 0.95em;
}
#packages .card-cta {
	display: inline-block;
	padding: 0.5em 3.2em;
	cursor: pointer;
	background: var(--color-4-dark-green);
	color: var(--color-6-white);
	transition: 0.5s;
}
#packages .card-cta:hover {
	background: var(--color-8-deep-green-hl);
}
#packages .card-price {
	margin-top: auto;
	padding-top: 1em;
	padding-bottom: 2em;
}
#packages .card-total {
	font-weight: bold;
	font-size: var(--font-size-larger);
	color: var(--color-12-dark-green);
	line-height: 1.2;
}
#packages .card-savings {
	font-size: var(--font-size-tiny);
	color: var(--color-16-another-green);
	font-weight: bold;
	letter-spacing: 0.04em;
	margin-top: 0.3em;
}

/* Most Popular card variant */
#packages .card--popular {
	box-shadow: 0 0 0 3px var(--color-16-another-green), var(--card2-shadow);
	transform: translateY(-12px);
}
#packages .card-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-16-another-green);
	color: var(--color-7-white);
	padding: 0.35em 1.1em;
	font-size: var(--font-size-tiny);
	font-weight: bold;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
	z-index: 1;
}

/* Legacy classes — kept for backwards compatibility, no longer used in HTML */
#packages .act-amt {
	font-weight: bold;
	font-size: var(--font-size-larger);
	color: var(--color-12-dark-green);
}
#packages .disc {
	font-size: var(--font-size-tiny);
	font-style: italic;
}

@media (max-width: 900px) {
	.packages__intro {
		margin-left: 1em;
		margin-right: 1em;
	}
	.start-here {
		margin: 3em 1em 2.5em;
		padding: 1.6em 1.4em;
	}
	.start-here__main {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2em;
	}
	.start-here__cta-cont {
		align-self: stretch;
		flex-direction: row;
		justify-content: space-between;
	}
	.packages__body {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#packages .card {
		margin-top: 64px;
		width: 360px;
	}
	#packages .card--popular {
		transform: none;
	}
}

/* "contact me" section */
#contact-me {
	background: url(/img/contact-me.jpg);
	color: var(--color-12-dark-green);
	background-size: cover;
	background-position: left;
	padding-top: var(--margin-top);
	padding-bottom: var(--margin-top);
}
.contact__title {
	font-size: var(--font-size-title);
}
.contact__line {
	width: 5em;
	height: 2px;
	margin: 1em 0;
	border-top: 1px solid var(--color-5-light-green);
}
.contact__body {
	width: 80%;
}
.contact__blurb {
	margin: 2em 0;
}
.control-row {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1em;
}
.control-row input {
	flex: 1;
	padding: 0.5em;
	border: 1px solid var(--color-8-deep-green-hl);
	width: 45%;
}
.contact__body .alt {
	text-align: center;
	background: linear-gradient(45deg, #3e7c00, transparent);
	border-radius: 4px;
	padding: 12px;
}
.contact__body .alt a {
	display: inline-block;
	padding: 0 8px;
	text-decoration: none;
	border: 1px solid;
	color: #424746;
	border-radius: 4px;
	background: linear-gradient(180deg, white, #d5e1df);
}
#email {
	margin-right: 9%;
}
#msg {
	padding: 0.5em;
	width: 100%;
	height: 10em;
}
#times {
	padding: 0.5em;
	width: 100%;
	height: 4em;
}
.contact__cta {
	background: var(--color-8-deep-green-hl);
	color: var(--color-6-white);
	text-align: center;
	width: 100%;
	cursor: pointer;
	padding: 0.5em;
	transition: 0.5s;
}
.contact__cta:hover {
	background: var(--color-8-deep-green);
}

@media (max-width: 900px) {
	#contact-me {
		background-image: linear-gradient(
				0,
				rgba(255, 255, 255, 0.5),
				rgba(255, 255, 255, 0.5)
			),
			url(/img/contact-me.jpg);
	}

	#contact-me .container {
		width: 80%;
		margin: 0 auto;
		align-items: center;
		justify-content: center;
	}
	.contact__body {
		width: 100%;
	}
}

/* footer */
#footer {
	background: var(--color-1-black);
	color: var(--color-9-grey);
	text-align: center;
	font-size: var(--font-size-small);
	padding: 2em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.map {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.loc {
	display: block;
	text-align: left;
	margin-left: 1em;
}
.social-media a {
	display: flex;
	flex-direction: row;
	color: var(--color-8-grey);
	align-items: center;
	line-height: 1em;
	font-size: 1em;
	text-decoration: none;
}
.social-media img {
	width: 23px;
	display: inline-block;
	margin-right: 4px;
}

/* header */
#hero {
	padding-top: calc(var(--header-height) + 2px);
}
#header {
	position: fixed;
	height: var(--header-height);
	width: 100%;
	background: rgba(255, 255, 255);
	box-shadow:
		0 1px 0 0 #eee,
		0 0 1px 0 #eee;
	color: var(--color-9-grey);
}
#header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
}
.header__icon-cont {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#logo-icon {
	display: inline-block;
	height: 32px;
	margin-left: 1em;
	margin-right: 0.5em;
}
#header a {
	color: var(--color-9-grey);
	cursor: pointer;
	text-decoration: none;
}
#header a:hover {
	color: var(--color-11-red);
}
.header__nav {
	padding-right: 1em;
}
.header__nav a {
	display: inline-block;
	margin-right: 1em;
}
.header__nav img {
	height: 0.7em;
	position: relative;
	top: -4px;
	left: -1px;
	opacity: 0.5;
}
#header a:hover img {
	opacity: 0.8;
}
.header__nav img.star1-1 {
	height: 0.6em;
	top: +4px;
	left: -2px;
}

/* click to copy */
#ctc {
	position: relative;
	text-decoration: underline;
	color: var(--color-4-dark-green);
	color: var(--color-11-red);
	cursor: pointer;
}
#ctc:before {
	content: "Copied!";
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: var(--color-6-white);
	background: var(--color-10-red-op);
	color: var(--color-8-deep-green);
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: top 0.2s ease-out;
	pointer-events: none;
	opacity: 0;
}
#ctc.copied:before {
	top: -30px;
	opacity: 1;
}
#contact-me p {
	margin-bottom: 0.5em;
}

@media (max-width: 900px) {
	#hero .hero__blurb-cont {
		color: var(--color-13-dark-green);
	}
	#how-works {
		color: var(--color-13-dark-green);
	}
	#my-approach {
		color: var(--color-13-dark-green);
	}
	#contact-me {
		color: var(--color-13-dark-green);
	}
}

.action-section {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.action-more a {
	font-size: 0.9em;
	font-style: italic;
	text-decoration: none;
	border-bottom: 1px dotted;
}
/* ────────────────────────────────────────────────────────
   PRIMARY CTA — "The Editorial Plate"
   ────────────────────────────────────────────────────────
   Rejects the SaaS pill convention. Draws DNA from the
   .pull-quote pattern in helper/base.css: hairline rules
   bracketing letter-spaced uppercase Futura PT — the
   typography of a museum label, a brass door plate, or the
   slug at the bottom of a 1930s clinical advertisement.
   Rules + type carry the weight. No fill. No pill.
   On hover, letter-spacing opens up and the chevron slides:
   small, dignified motion that signals forward without
   theatrics. */
a.bookInBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: 100%;
	margin: 36px auto 0;
	padding: 16px 6px 14px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--font-family-main);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	color: var(--color-8-deep-green);
	background: transparent;
	border: 0;
	border-top: 1px solid var(--color-8-deep-green);
	border-bottom: 1px solid var(--color-8-deep-green);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		letter-spacing 320ms cubic-bezier(0.22, 1, 0.36, 1),
		color 200ms ease,
		border-color 200ms ease;
}
a.bookInBtn::after {
	content: "→";
	display: inline-block;
	margin-left: 0.7em;
	font-weight: 400;
	letter-spacing: 0;
	transform: translateX(0);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.bookInBtn:hover {
	color: var(--color-8-deep-green-hl);
	border-top-color: var(--color-8-deep-green-hl);
	border-bottom-color: var(--color-8-deep-green-hl);
	letter-spacing: 0.22em;
}
a.bookInBtn:hover::after {
	transform: translateX(5px);
}
a.bookInBtn:focus-visible {
	outline: 2px solid var(--color-8-deep-green-hl);
	outline-offset: 6px;
}
@media (min-width: 900px) {
	a.bookInBtn {
		font-size: 12px;
		letter-spacing: 0.22em;
		padding: 18px 6px 16px;
	}
	a.bookInBtn:hover {
		letter-spacing: 0.26em;
	}
}
@media (min-width: 1200px) {
	a.bookInBtn {
		font-size: 13px;
		letter-spacing: 0.24em;
		padding: 20px 6px 18px;
	}
	a.bookInBtn:hover {
		letter-spacing: 0.28em;
	}
}

/* ────────────────────────────────────────────────────────
   HEADER CTA — closed plate (fully framed), fills on hover
   ────────────────────────────────────────────────────────
   Same typographic DNA as the body plate but contained on all
   four sides — like a refined business card or vintage matchbox.
   The body CTA is an OPEN plate (the major statement); this is
   a CLOSED plate (the persistent badge). Fills on hover, the way
   the cookie banner buttons fill — brand-consistent interaction. */
.header__nav a.header__cta {
	display: inline-block;
	padding: 8px 14px 7px;
	margin-right: 0;
	font-family: var(--font-family-main);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--color-8-deep-green);
	background: transparent;
	border: 1px solid var(--color-8-deep-green);
	border-radius: 0;
	transition:
		letter-spacing 280ms cubic-bezier(0.22, 1, 0.36, 1),
		color 200ms ease,
		border-color 200ms ease,
		background 200ms ease;
	white-space: nowrap;
}
.header__nav a.header__cta:hover,
#header .header__nav a.header__cta:hover {
	color: var(--color-7-white);
	background: var(--color-8-deep-green);
	border-color: var(--color-8-deep-green);
	letter-spacing: 0.22em;
}
.header__nav a.header__cta:focus-visible {
	outline: 2px solid var(--color-8-deep-green-hl);
	outline-offset: 4px;
}

/* ────────────────────────────────────────────────────────
   MOBILE DRAWER — refined hamburger pattern
   ────────────────────────────────────────────────────────
   At ≤ 960px, the seven-item inline nav can't fit beside the
   brand mark on one row — it wraps into multi-line chaos. A
   "MENU" toggle (itself an editorial plate) replaces the inline
   nav, and tapping it slides down a drawer with the items as
   stacked serif links separated by hairlines — the same
   vocabulary as the testimonial-card captions. The CTA sits at
   the bottom of the drawer as a filled deep-green plate:
   contained, prominent, primary. */

/* Toggle is hidden on desktop */
.header__toggle {
	display: none;
}

@media (max-width: 960px) {
	#header {
		flex-wrap: wrap;
		position: relative;
		padding: 0.5em 0;
	}
	.header__icon-cont {
		flex: 1;
		align-items: center;
	}
	#logo-icon {
		height: 28px;
	}

	/* The MENU toggle — its own small editorial plate */
	.header__toggle {
		display: inline-flex;
		align-items: center;
		background: transparent;
		border: 0;
		border-top: 1px solid var(--color-8-deep-green);
		border-bottom: 1px solid var(--color-8-deep-green);
		padding: 8px 4px 7px;
		margin-right: 1em;
		cursor: pointer;
		font-family: var(--font-family-main);
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.20em;
		text-transform: uppercase;
		color: var(--color-8-deep-green);
		white-space: nowrap;
		transition:
			letter-spacing 280ms cubic-bezier(0.22, 1, 0.36, 1),
			color 200ms ease,
			border-color 200ms ease;
	}
	.header__toggle:hover,
	#header .header__toggle:hover {
		color: var(--color-8-deep-green-hl);
		border-top-color: var(--color-8-deep-green-hl);
		border-bottom-color: var(--color-8-deep-green-hl);
	}
	.header__toggle:focus-visible {
		outline: 2px solid var(--color-8-deep-green-hl);
		outline-offset: 4px;
	}

	/* Drawer — collapsed by default */
	.header__nav {
		order: 3;
		width: 100%;
		margin: 0;
		padding: 0 1.5em;
		background: var(--color-7-white);
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			max-height 380ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 240ms ease,
			padding 240ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.header__nav.is-open {
		max-height: 600px;
		opacity: 1;
		padding: 0.4em 1.5em 1.4em;
		border-top: 1px solid rgba(18, 46, 40, 0.12);
		border-bottom: 1px solid var(--color-8-deep-green);
	}

	/* Drawer items — stacked serif links with hairlines */
	.header__nav a:not(.header__cta) {
		display: block;
		margin: 0;
		padding: 16px 0 14px;
		font-family: var(--font-family-serif);
		font-size: 18px;
		font-weight: 400;
		letter-spacing: 0.01em;
		color: var(--color-12-dark-green);
		text-align: left;
		border-bottom: 1px solid rgba(18, 46, 40, 0.10);
		transition: color 200ms ease;
	}
	#header .header__nav a:not(.header__cta):hover {
		color: var(--color-8-deep-green);
	}

	/* CTA at the bottom of the drawer — filled, primary */
	.header__nav a.header__cta {
		display: block;
		text-align: center;
		margin: 22px auto 4px;
		padding: 15px 28px 13px;
		font-size: 11px;
		letter-spacing: 0.22em;
		color: var(--color-7-white);
		background: var(--color-8-deep-green);
		border: 1px solid var(--color-8-deep-green);
	}
	#header .header__nav a.header__cta:hover {
		color: var(--color-7-white);
		background: var(--color-8-deep-green-hl);
		border-color: var(--color-8-deep-green-hl);
	}
}

/* ────────────────────────────────────────────────────────
   REDUCED MOTION — honour user preference
   ────────────────────────────────────────────────────────
   Any user who has set "reduce motion" at the OS level gets
   no AOS animations and minimal transition timing. Subtle
   scroll-fades become instant; hover micro-motion is kept
   but compressed. */
@media (prefers-reduced-motion: reduce) {
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.hero__title,
	.hero__tagline,
	.hero__subtitle-cont {
		animation: none !important;
	}
	a.bookInBtn,
	a.bookInBtn::after,
	.header__nav a.header__cta,
	.header__toggle,
	.header__nav {
		transition-duration: 0ms !important;
	}
}

/* ────────────────────────────────────────────────────────
   MOBILE RESPONSIVE — overflow & layout fixes (≤ 600px)
   ────────────────────────────────────────────────────────
   The desktop layout assumes generous horizontal room: 5em
   section margins, 420px program cards, a single-row footer.
   On phones (≤ 600px) those become horizontal overflow. This
   block clamps the page to viewport width and converts the
   wide-format pieces to mobile-appropriate flow. */
@media (max-width: 600px) {
	/* Safety net — kill horizontal scroll regardless of source */
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* Section heads — collapse the 5em ornamental left margin */
	.section-title-cont,
	.program__title-cont,
	.packages__title-cont {
		margin-left: 1em;
		margin-right: 1em;
	}
	.section-aside {
		margin: 2em 1em 0;
	}
	.section-body {
		width: auto;
		padding: 0 1em;
	}

	/* Programs cards — fluid width within the viewport */
	#programs .card {
		width: auto;
		max-width: calc(100vw - 2em);
		margin: 32px auto;
	}
	#programs .card-img,
	#programs .card-img img {
		width: 100%;
		max-width: 100%;
	}

	/* Packages cards — same treatment */
	#packages .card {
		width: auto;
		max-width: calc(100vw - 2em);
		margin: 32px auto;
	}
	.start-here {
		margin: 3em 1em 2.5em;
		width: auto;
		max-width: calc(100vw - 2em);
	}

	/* Hero blurb — let copy use the column width */
	.hero__blurb {
		width: auto;
		padding: 0 1em;
	}
	.hero__subtitle-cont {
		flex-wrap: wrap;
	}

	/* Contact form — clamp to column */
	#contact-me .container {
		width: auto;
		padding: 0 1em;
	}
	#email {
		margin-right: 0;
	}

	/* Footer — stack the row that was overflowing the viewport */
	#footer {
		flex-direction: column;
		gap: 1.5em;
		padding: 2em 1em;
		text-align: center;
	}
	#footer .map {
		flex-direction: column;
		align-items: center;
		gap: 1em;
		max-width: 100%;
	}
	#footer .map iframe {
		width: 100%;
		max-width: calc(100vw - 2em);
		height: auto;
		aspect-ratio: 4 / 3;
	}
	#footer .loc {
		margin-left: 0;
		text-align: center;
	}
}
s {
	text-decoration: line-through;
}

/* testimonials section */
#testimonials {
	padding: var(--margin-top) 1em;
	background: var(--color-14-lighter-green);
	color: var(--color-12-dark-green);
}
.testimonials__title-cont {
	max-width: 1200px;
	margin: 0 auto 2.5em;
	text-align: center;
}
.testimonials__title {
	color: var(--color-3-grey);
	font-size: var(--font-size-title);
	margin-bottom: 0.4em;
}
.testimonials__line {
	width: 80px;
	height: 2px;
	background: var(--color-4-dark-green);
	margin: 0.6em auto 1.2em;
}

.testimonials__body {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.6em;
	max-width: 1200px;
	margin: 0 auto;
}

.testimonial-card {
	background: var(--color-7-white);
	border-radius: 12px;
	padding: 1.8em 1.6em 1.4em;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba(18, 46, 40, 0.06);
	transition: box-shadow 0.3s ease;
}
.testimonial-card:hover {
	box-shadow: 0 4px 16px rgba(18, 46, 40, 0.12);
}
.testimonial-card__stars {
	color: #f5b942;
	font-size: 1.05em;
	letter-spacing: 0.06em;
	margin-bottom: 0.8em;
}
.testimonial-card__quote {
	flex: 1;
	margin: 0 0 1.2em;
	color: var(--color-12-dark-green);
	font-size: 0.98em;
	line-height: 1.55;
}
.testimonial-card__quote p {
	margin: 0 0 0.7em;
}
.testimonial-card__quote p:last-child {
	margin-bottom: 0;
}
/* Curly quotes wrap the whole review, not each paragraph. Open on the first p, close on the last. */
.testimonial-card__quote p:first-of-type::before {
	content: "“";
	font-size: 1.4em;
	color: var(--color-4-dark-green);
	line-height: 0;
	vertical-align: -0.1em;
	margin-right: 0.05em;
}
.testimonial-card__quote p:last-of-type::after {
	content: "”";
	font-size: 1.4em;
	color: var(--color-4-dark-green);
	line-height: 0;
	vertical-align: -0.1em;
	margin-left: 0.05em;
}
.testimonial-card__attribution {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding-top: 0.8em;
	border-top: 1px solid var(--color-15-lighter-green);
}
.testimonial-card__name {
	font-weight: 700;
	font-style: normal;
	color: var(--color-3-grey);
	font-size: 1em;
}
.testimonial-card__context {
	font-size: 0.86em;
	color: var(--color-2-grey);
	font-style: italic;
}
.testimonial-card__date {
	font-size: 0.78em;
	color: var(--color-9-grey);
	margin-top: 0.2em;
}

.testimonials__footer {
	max-width: 1200px;
	margin: 2.5em auto 0;
	text-align: center;
}
.testimonials__google-note {
	font-size: 0.88em;
	color: var(--color-2-grey);
	font-style: italic;
	margin-bottom: 0.6em;
}
.testimonials__google-link {
	display: inline-block;
	color: var(--color-8-deep-green);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--color-4-dark-green);
	padding-bottom: 2px;
	transition: color 0.2s, border-color 0.2s;
}
.testimonials__google-link:hover {
	color: var(--color-8-deep-green-hl);
	border-bottom-color: var(--color-16-another-green);
}

@media (max-width: 1100px) {
	.testimonials__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	.testimonials__body {
		grid-template-columns: 1fr;
		gap: 1.2em;
	}
	.testimonial-card {
		padding: 1.4em 1.2em 1.1em;
	}
}