/*
Theme Name: Waypoint Health & Wellness
Theme URI: https://1waypoint.com/
Author: Waypoint Health & Wellness
Description: A classic WordPress theme for Waypoint Health & Wellness, a longevity and wellness practice in Jupiter, Florida. Warm coastal palette, Lora and Source Sans 3, a hero slideshow, scroll reveals, and count-up stats. No page builder required.
Version: 2.14.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waypoint-wellness
Tags: one-page, custom-logo, custom-menu, translation-ready, wellness
*/

:root {
	--color-atlantic-deep: #0E4A5A;
	--color-lighthouse-red: #A63A2B;
	--color-sunlit-sand: #F6EFE2;
	--color-inlet-ink: #14333C;
	--color-white: #FFFFFF;
	--color-leaf-renewal: #3F7D5C;
	--font-headline: "Lora", serif;
	--font-body: "Source Sans 3", sans-serif;
	--site-gutter: clamp(1.25rem, 5vw, 5rem);
	--section-space: clamp(48px, 6vw, 88px);
	--content-width: 90rem;
	--card-radius: 6px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-inlet-ink);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.admin-bar .site-header {
	top: 32px;
}

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

a {
	color: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
	font: inherit;
}

h1,
h2,
h3,
p,
blockquote,
figure,
ul {
	margin-top: 0;
}

h1,
h2,
h3 {
	color: var(--color-atlantic-deep);
	font-family: var(--font-headline);
	font-weight: 500;
	line-height: 1.12;
}

h1 {
	font-size: clamp(3.25rem, 7vw, 6.8rem);
	letter-spacing: -0.045em;
}

h2 {
	margin-bottom: 1.25rem;
	font-size: clamp(2.5rem, 5vw, 4.8rem);
	letter-spacing: -0.04em;
}

h3 {
	font-size: clamp(1.55rem, 2vw, 2rem);
	letter-spacing: -0.025em;
}

p,
li,
a,
figcaption,
blockquote,
span {
	line-height: 1.65;
}

p,
li,
figcaption {
	font-size: 1rem;
}

em {
	color: var(--color-lighthouse-red);
	font-weight: 400;
}

::selection {
	background: var(--color-lighthouse-red);
	color: var(--color-white);
}

.site-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 30;
	display: flex;
	min-height: 78px;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem var(--site-gutter);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--color-white);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
}

.brand-name {
	font-family: var(--font-headline);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.03em;
}

.brand-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-lighthouse-red);
}

/* Logo (white lighthouse wordmark, sits on the dark header + footer). */
.brand-logo,
.custom-logo {
	display: block;
	width: auto;
	height: 87px;
}

.brand--footer .brand-logo,
.site-footer .custom-logo {
	height: 104px;
}

@media (max-width: 760px) {
	.brand-logo,
	.custom-logo {
		height: 69px;
	}

	.brand--footer .brand-logo,
	.site-footer .custom-logo {
		height: 84px;
	}
}

.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}

.site-nav a {
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.site-nav a:not(.button) {
	color: var(--color-white);
}

.menu-toggle {
	display: none;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--color-white);
	border-radius: var(--card-radius);
	background: transparent;
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 600;
}

.button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.3rem;
	border: 1px solid var(--color-lighthouse-red);
	border-radius: var(--card-radius);
	background: var(--color-lighthouse-red);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 180ms ease-out;
}

.button:hover,
.button:focus-visible {
	transform: translateY(-2px);
}

.button--small {
	min-height: 44px;
	padding: 0.7rem 1rem;
}

/* Keep an inline arrow (→) inside a button from inheriting the global 1.65
   span line-height, which would make buttons with an arrow taller than those
   without one. */
.button span {
	line-height: inherit;
}

.button--outline {
	border-color: var(--color-atlantic-deep);
	background: transparent;
	color: var(--color-atlantic-deep);
}

/* Secondary button for dark hero / CTA backgrounds: white fill with Atlantic
   Deep (headline blue) text, to pair with the red primary button. Overrides
   only the colours, so it keeps .button's 1px border box and is therefore the
   exact same height as the primary "Start Your Journey" button. */
.button--ondark {
	border-color: var(--color-white);
	background: var(--color-white);
	color: var(--color-atlantic-deep);
}

.button--ondark:hover,
.button--ondark:focus-visible {
	background: var(--color-sunlit-sand);
	border-color: var(--color-sunlit-sand);
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--color-lighthouse-red);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

.text-link--light {
	color: var(--color-white);
}

.eyebrow {
	margin-bottom: 0.8rem;
	color: var(--color-lighthouse-red);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.eyebrow--light {
	color: var(--color-sunlit-sand);
}

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: min(760px, 88svh);
	align-items: center;
	overflow: hidden;
	background: var(--color-atlantic-deep);
	color: var(--color-white);
}

.hero-slides,
.hero-slide,
.photo-scrim {
	position: absolute;
	inset: 0;
}

.hero-slide {
	opacity: 0;
	background-position: center;
	background-size: cover;
	transition: opacity 900ms ease-out;
}

.hero-slide.is-active {
	opacity: 1;
}

.photo-scrim {
	z-index: 1;
	background: rgba(14, 74, 90, 0.92);
}

/* Hero background video: full-bleed, muted, looping. */
.hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero overlay reduced by 25% from the shared 0.92 scrim, so the video reads
   through more clearly while the Sunlit Sand headline stays legible. */
.hero-overlay {
	background: rgba(14, 74, 90, 0.69);
}

.hero-inner {
	position: relative;
	z-index: 4;
	width: min(780px, calc(100% - (2 * var(--site-gutter))));
	margin-left: var(--site-gutter);
	/* Viewport-relative padding so the whole hero (headline through the CTAs)
	   fits above the fold on short laptop screens without being cut off. Top
	   clears the fixed-height header; both shrink as the viewport gets shorter. */
	padding: clamp(5.5rem, 10vh, 7.5rem) 0 clamp(2rem, 4vh, 3rem);
}

.hero h1 {
	margin-bottom: 1.25rem;
	/* Slightly more compact than the base H1 so the hero fits the viewport. */
	font-size: clamp(2.5rem, 5.5vw, 5rem);
	color: var(--color-white);
	/* With the overlay reduced 25%, a soft ink halo keeps the headline legible
	   over brighter video frames without darkening the whole scrim again. */
	text-shadow: 0 1px 18px rgba(14, 74, 90, 0.5);
}

.hero h1 em {
	color: var(--color-sunlit-sand);
}

.hero-copy {
	max-width: 660px;
	margin-bottom: 2rem;
	color: var(--color-white);
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	text-shadow: 0 1px 14px rgba(14, 74, 90, 0.55);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.hero-dots {
	position: absolute;
	right: var(--site-gutter);
	bottom: 2rem;
	z-index: 5;
	display: flex;
	gap: 0.65rem;
}

.hero-dot {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.hero-dot::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	margin: auto;
	border: 2px solid var(--color-white);
	border-radius: 50%;
	background: transparent;
}

.hero-dot.is-active::before {
	background: var(--color-white);
}

.waypoint-beam {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	clip-path: inset(0 0 0 100%);
	transform: translate3d(var(--beam-drift, 0px), var(--beam-drift, 0px), 0);
	transition: clip-path 900ms ease-out;
}

.waypoint-beam.is-drawn {
	clip-path: inset(0 0 0 0);
}

.waypoint-beam--hero {
	top: -2px;
	right: -2px;
	width: min(62vw, 900px);
	height: min(72vh, 730px);
}

.waypoint-beam__shape {
	fill: var(--color-lighthouse-red);
	fill-opacity: 0.5;
}

.waypoint-beam__edge {
	stroke: var(--color-lighthouse-red);
	stroke-width: 2px;
}

.split-section,
.neighbors {
	display: grid;
	width: min(var(--content-width), calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(3rem, 7vw, 7rem);
	align-items: center;
}

.section-copy,
.neighbors > div {
	max-width: 660px;
}

.lead {
	font-size: 1.2rem;
	font-weight: 600;
}

.image-frame {
	margin: 0;
	border-radius: var(--card-radius);
	overflow: hidden;
	background: var(--color-sunlit-sand);
}

.image-frame video {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.image-frame img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.image-frame figcaption {
	padding: 1rem 1.25rem;
	color: var(--color-atlantic-deep);
}

/* Elegant feature caption — used under the home "The Plan, Not the Menu"
   video. Centered italic Lora with a short Lighthouse Red rule above. */
.image-frame figcaption.figcaption--feature {
	padding: 1.4rem 1.5rem 1.5rem;
	text-align: center;
	font-family: var(--font-headline);
	font-style: italic;
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	line-height: 1.4;
	letter-spacing: 0.004em;
	color: var(--color-atlantic-deep);
}

.image-frame figcaption.figcaption--feature::before {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	margin: 0 auto 0.9rem;
	background: var(--color-lighthouse-red);
}

.section-sand,
.who {
	background: var(--color-sunlit-sand);
}

.how,
.process-visual,
.services,
.who {
	padding: var(--section-space) var(--site-gutter);
}

.section-heading {
	max-width: 800px;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-heading--center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.steps,
.process-grid,
.service-grid,
.persona-grid {
	width: min(var(--content-width), 100%);
	margin: 0 auto;
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}

.step {
	overflow: hidden;
	background: var(--color-white);
	border-top: 3px solid var(--color-lighthouse-red);
	border-radius: var(--card-radius);
	box-shadow: 0 1px 2px rgba(14, 74, 90, 0.05), 0 16px 34px -18px rgba(14, 74, 90, 0.22);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.step-media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-sand);
}

.step-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.step-body {
	padding: 1.4rem 1.5rem 1.8rem;
}

@media (hover: hover) {
	.step:hover {
		transform: translateY(-6px);
		box-shadow: 0 1px 2px rgba(14, 74, 90, 0.05), 0 26px 48px -20px rgba(14, 74, 90, 0.34);
	}
	.step:hover .step-media img {
		transform: scale(1.06);
	}
}

.step-icon,
.process-number,
.service-index {
	color: var(--color-lighthouse-red);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.step h3 {
	margin: 0.75rem 0;
}

.process-visual {
	background: var(--color-white);
}

.process-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.process-card {
	display: flex;
	min-height: 610px;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid rgba(14, 74, 90, 0.22);
	border-radius: var(--card-radius);
	background: var(--color-sunlit-sand);
}

.process-card h3 {
	margin: 0.75rem 0;
}

.process-card > p:not(.process-footnote) {
	min-height: 3.3em;
}

.ui-panel {
	margin-top: 1.25rem;
	padding: 1.25rem;
	border: 1px solid rgba(14, 74, 90, 0.2);
	border-radius: var(--card-radius);
	background: var(--color-white);
}

.process-footnote {
	margin-top: auto;
	padding-top: 1.25rem;
	color: var(--color-atlantic-deep);
	font-weight: 600;
}

/* ==========================================================================
   INTERACTIVE PROCESS PANELS  ("Your plan, made clear.")
   Card 1 appointment picker, Card 2 review chart, Card 3 plan-in-motion.
   ========================================================================== */

.process-visual .process-card > p:not(.process-footnote) {
	color: rgba(20, 51, 60, 0.72);
}

.pv-panel {
	margin: 1.35rem 0 0;
	padding: 1.05rem;
	background: var(--color-white);
	border: 1px solid rgba(14, 74, 90, 0.12);
	border-radius: 12px;
	box-shadow: 0 14px 30px -22px rgba(14, 74, 90, 0.55);
}

/* ---- Card 1: appointment ---- */
.pv-appointment__label {
	margin: 0.15rem 0 0.85rem;
	text-align: center;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-atlantic-deep);
}

.pv-week {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
	margin-bottom: 0.7rem;
}

.pv-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-height: 58px;
	padding: 0.5rem 0.15rem;
	border: 1px solid rgba(14, 74, 90, 0.14);
	border-radius: 10px;
	background: var(--color-sunlit-sand);
	color: var(--color-inlet-ink);
	font: inherit;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pv-day__name {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgba(20, 51, 60, 0.6);
}

.pv-day__num {
	font-family: var(--font-headline);
	font-size: 1.2rem;
	font-weight: 600;
}

.pv-day:hover {
	transform: translateY(-2px);
	border-color: rgba(14, 74, 90, 0.32);
}

.pv-day.is-active {
	background: var(--color-lighthouse-red);
	border-color: var(--color-lighthouse-red);
	color: var(--color-white);
}

.pv-day.is-active .pv-day__name {
	color: rgba(255, 255, 255, 0.85);
}

.pv-times {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.pv-time {
	flex: 1 1 auto;
	min-width: 58px;
	padding: 0.55rem 0.5rem;
	border: 1px solid rgba(14, 74, 90, 0.14);
	border-radius: 8px;
	background: var(--color-sunlit-sand);
	color: var(--color-inlet-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pv-time:hover {
	transform: translateY(-2px);
	border-color: rgba(14, 74, 90, 0.32);
}

.pv-time.is-active {
	background: var(--color-lighthouse-red);
	border-color: var(--color-lighthouse-red);
	color: var(--color-white);
}

.pv-checks {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pv-check {
	padding: 0.7rem 0.85rem;
	border-left: 3px solid var(--color-leaf-renewal);
	border-radius: 6px;
	background: rgba(14, 74, 90, 0.04);
	color: var(--color-inlet-ink);
	font-weight: 600;
	font-size: 0.95rem;
}

/* ---- Card 2: chart ---- */
.pv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	margin-bottom: 0.5rem;
}

.pv-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: rgba(20, 51, 60, 0.7);
}

.pv-chip::before {
	content: "";
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: currentColor;
}

.pv-chip--review {
	color: var(--color-lighthouse-red);
}

.pv-chip--ontrack {
	color: var(--color-leaf-renewal);
}

.pv-chip--adjust {
	color: rgba(20, 51, 60, 0.45);
}

.pv-graph {
	display: block;
	width: 100%;
	height: auto;
}

.pv-graph__grid line {
	stroke: rgba(14, 74, 90, 0.1);
	stroke-width: 1;
}

.pv-graph__line {
	fill: none;
	stroke: var(--color-lighthouse-red);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pv-graph__dot {
	fill: var(--color-lighthouse-red);
	stroke: var(--color-white);
	stroke-width: 2;
}

.pv-graph__label {
	fill: rgba(20, 51, 60, 0.6);
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
}

/* ---- Card 3: services ---- */
.pv-services {
	display: grid;
	gap: 0.6rem;
}

.pv-service {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0.8rem;
	border: 1px solid rgba(14, 74, 90, 0.1);
	border-radius: 10px;
	background: rgba(246, 239, 226, 0.55);
}

.pv-service__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: rgba(166, 58, 43, 0.1);
	color: var(--color-lighthouse-red);
}

.pv-service__icon svg {
	width: 20px;
	height: 20px;
}

.pv-service__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pv-service__text strong {
	color: var(--color-atlantic-deep);
	font-size: 1rem;
	line-height: 1.2;
}

.pv-service__text span {
	color: rgba(20, 51, 60, 0.6);
	font-size: 0.85rem;
}

/* ---- Entrance animations (play once when the card scrolls into view) ---- */
.pv-day,
.pv-time,
.pv-chip,
.pv-check,
.pv-graph__dot,
.pv-graph__label,
.pv-service {
	opacity: 0;
}

.pv-check,
.pv-service {
	transform: translateX(10px);
}

.pv-graph__dot {
	transform: scale(0.5);
	transform-box: fill-box;
	transform-origin: center;
}

.pv-graph__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.process-card.in-view .pv-day {
	animation: pv-fade-up 0.4s ease forwards;
}
.process-card.in-view .pv-day:nth-child(1) { animation-delay: 0.15s; }
.process-card.in-view .pv-day:nth-child(2) { animation-delay: 0.21s; }
.process-card.in-view .pv-day:nth-child(3) { animation-delay: 0.27s; }
.process-card.in-view .pv-day:nth-child(4) { animation-delay: 0.33s; }
.process-card.in-view .pv-day:nth-child(5) { animation-delay: 0.39s; }

.process-card.in-view .pv-time {
	animation: pv-fade-up 0.4s ease forwards;
}
.process-card.in-view .pv-time:nth-child(1) { animation-delay: 0.5s; }
.process-card.in-view .pv-time:nth-child(2) { animation-delay: 0.57s; }
.process-card.in-view .pv-time:nth-child(3) { animation-delay: 0.64s; }
.process-card.in-view .pv-time:nth-child(4) { animation-delay: 0.71s; }

.process-card.in-view .pv-check {
	animation: pv-fade-x 0.42s ease forwards;
	animation-delay: calc(0.85s + var(--i, 0) * 0.12s);
}

.process-card.in-view .pv-chip {
	animation: pv-fade-up 0.4s ease forwards;
}
.process-card.in-view .pv-chip:nth-child(1) { animation-delay: 0.15s; }
.process-card.in-view .pv-chip:nth-child(2) { animation-delay: 0.24s; }
.process-card.in-view .pv-chip:nth-child(3) { animation-delay: 0.33s; }

.process-card.in-view .pv-graph__line {
	animation: pv-draw 1.15s ease 0.35s forwards;
}

.process-card.in-view .pv-graph__dot {
	animation: pv-pop 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
	animation-delay: calc(0.7s + var(--i, 0) * 0.18s);
}

.process-card.in-view .pv-graph__label {
	animation: pv-fade-up 0.4s ease forwards;
	animation-delay: 1.2s;
}

.process-card.in-view .pv-service {
	animation: pv-fade-x 0.42s ease forwards;
	animation-delay: calc(0.15s + var(--i, 0) * 0.12s);
}

@keyframes pv-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes pv-fade-x {
	from { opacity: 0; transform: translateX(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes pv-pop {
	from { opacity: 0; transform: scale(0.5); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes pv-draw {
	to { stroke-dashoffset: 0; }
}

.baseline-checklist,
.plan-document ul {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.baseline-checklist li,
.plan-document li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 56px;
	padding: 0.75rem;
	border: 1px solid rgba(14, 74, 90, 0.16);
	border-radius: var(--card-radius);
	background: var(--color-white);
	color: var(--color-inlet-ink);
	font-size: 1rem;
	font-weight: 600;
}

.checkmark {
	display: grid;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	place-items: center;
	border: 2px solid var(--color-leaf-renewal);
	border-radius: 50%;
	background: var(--color-white);
	transform: scale(0.65);
	opacity: 0;
}

.checkmark svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--color-leaf-renewal);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 30;
	stroke-dashoffset: 30;
}

.process-card.in-view .baseline-checklist li:nth-child(1) .checkmark {
	animation: check-in 320ms 120ms ease-out forwards;
}

.process-card.in-view .baseline-checklist li:nth-child(2) .checkmark {
	animation: check-in 320ms 300ms ease-out forwards;
}

.process-card.in-view .baseline-checklist li:nth-child(3) .checkmark {
	animation: check-in 320ms 480ms ease-out forwards;
}

.process-card.in-view .baseline-checklist li:nth-child(1) .checkmark path {
	animation: draw-check 300ms 220ms ease-out forwards;
}

.process-card.in-view .baseline-checklist li:nth-child(2) .checkmark path {
	animation: draw-check 300ms 400ms ease-out forwards;
}

.process-card.in-view .baseline-checklist li:nth-child(3) .checkmark path {
	animation: draw-check 300ms 580ms ease-out forwards;
}

.day-one-chip {
	width: fit-content;
	margin: 1.2rem auto 0;
	padding: 0.55rem 0.85rem;
	border-radius: var(--card-radius);
	background: var(--color-atlantic-deep);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0;
	transform: translateY(8px);
}

.process-card.in-view .day-one-chip {
	animation: rise-in 380ms 700ms ease-out forwards;
}

.plan-document {
	position: relative;
	padding-top: 2rem;
}

.document-topline {
	position: absolute;
	top: 1rem;
	left: 1.25rem;
	width: 38%;
	height: 3px;
	background: var(--color-lighthouse-red);
}

.document-bullet {
	width: 10px;
	height: 10px;
	flex: 0 0 10px;
	border-radius: 50%;
	background: var(--color-atlantic-deep);
}

.plan-document li {
	opacity: 0;
	transform: translateY(8px);
}

.process-card.in-view .plan-document li:nth-child(1) {
	animation: rise-in 360ms 120ms ease-out forwards;
}

.process-card.in-view .plan-document li:nth-child(2) {
	animation: rise-in 360ms 240ms ease-out forwards;
}

.process-card.in-view .plan-document li:nth-child(3) {
	animation: rise-in 360ms 360ms ease-out forwards;
}

.process-card.in-view .plan-document li:nth-child(4) {
	animation: rise-in 360ms 480ms ease-out forwards;
}

.footprints-panel {
	padding: 0.75rem;
}

.footprints-map {
	display: block;
	width: 100%;
	height: auto;
}

.footprints-route {
	fill: none;
	stroke: var(--color-atlantic-deep);
	stroke-width: 2;
	stroke-dasharray: 6 8;
	stroke-linecap: round;
	opacity: 0.4;
}

.footprint {
	fill: var(--color-leaf-renewal);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.process-card.in-view .footprint--one {
	animation: footprint-in 300ms 120ms ease-out forwards;
}

.process-card.in-view .footprint--two {
	animation: footprint-in 300ms 240ms ease-out forwards;
}

.process-card.in-view .footprint--three {
	animation: footprint-in 300ms 360ms ease-out forwards;
}

.process-card.in-view .footprint--four {
	animation: footprint-in 300ms 480ms ease-out forwards;
}

.process-card.in-view .footprint--five {
	animation: footprint-in 300ms 600ms ease-out forwards;
}

/* The route fades in, then its dashes gently march to suggest a path being
   traced. */
.footprints-route {
	opacity: 0;
}

.process-card.in-view .footprints-route {
	animation: route-fade 600ms 40ms ease-out forwards, dash-march 2.6s 640ms linear infinite;
}

/* Markers pop in after the footprints land. */
.waypoint-marker {
	opacity: 0;
	transform: scale(0.6);
	transform-box: fill-box;
	transform-origin: center;
}

.process-card.in-view .waypoint-marker--day-one {
	animation: marker-pop 360ms 720ms cubic-bezier(0.22, 1.2, 0.4, 1) forwards;
}

.process-card.in-view .waypoint-marker--milestone {
	animation: marker-pop 360ms 860ms cubic-bezier(0.22, 1.2, 0.4, 1) forwards;
}

.process-card.in-view .waypoint-marker--next {
	animation: marker-pop 360ms 1020ms cubic-bezier(0.22, 1.2, 0.4, 1) forwards;
}

/* The dashed "next waypoint" ring keeps a slow pulse to draw the eye onward. */
.process-card.in-view .waypoint-marker--next circle {
	animation: next-pulse 2.4s 1600ms ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.waypoint-marker circle {
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
}

.waypoint-marker--day-one circle,
.waypoint-marker--milestone circle {
	fill: var(--color-leaf-renewal);
	stroke: var(--color-leaf-renewal);
}

.waypoint-marker--next circle {
	fill: var(--color-white);
	stroke: var(--color-atlantic-deep);
	stroke-dasharray: 6 5;
}

.waypoint-marker text {
	fill: var(--color-inlet-ink);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

@keyframes check-in {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes draw-check {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes rise-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes footprint-in {
	from {
		opacity: 0;
		transform: scale(0.75);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes route-fade {
	to {
		opacity: 0.45;
	}
}

@keyframes dash-march {
	to {
		stroke-dashoffset: -28;
	}
}

@keyframes marker-pop {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes next-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.09);
	}
}

.services {
	background: var(--color-white);
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.service-card,
.persona-card,
.stat {
	border-radius: var(--card-radius);
}

.service-card {
	overflow: hidden;
	border: 1px solid rgba(14, 74, 90, 0.2);
	background: var(--color-white);
}

.service-card img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.service-card > div {
	padding: 1.5rem;
}

.service-card h3 {
	margin: 0.7rem 0;
}

.service-card a {
	color: var(--color-lighthouse-red);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

.measure-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	padding: clamp(60px, 7vw, 104px) var(--site-gutter);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: clamp(3rem, 6vw, 6rem);
	align-items: end;
	background: var(--color-atlantic-deep);
	color: var(--color-white);
}

/* Looping background video for the "Measured Against Your Own Day One" band. */
.measure-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Deep Atlantic scrim keeps the white copy and stat cards legible over the
   moving footage while still letting the motion read through. */
.measure-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(14, 74, 90, 0.84) 0%, rgba(14, 74, 90, 0.8) 100%);
}

/* Lift the copy and stats above the video + scrim. */
.measure-copy,
.measure-band .stats {
	position: relative;
	z-index: 2;
}

.measure-copy {
	max-width: 650px;
}

.measure-copy h2 {
	color: var(--color-white);
}

.measure-copy p:not(.eyebrow) {
	color: var(--color-white);
}

.stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
}

/* Premium stat card: a thin Lighthouse Red rule at the top, a large Lora
   figure, then the label pinned to the base above a hairline divider. */
.stat {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 260px;
	padding: 1.9rem 1.5rem 1.6rem;
	overflow: hidden;
	border: 1px solid rgba(246, 239, 226, 0.26);
	border-radius: var(--card-radius);
	background: rgba(246, 239, 226, 0.08);
}

.stat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.5rem;
	width: 34px;
	height: 3px;
	background: var(--color-lighthouse-red);
}

.stat-value {
	display: block;
	margin: 0.6rem 0 0;
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: clamp(2.9rem, 4.6vw, 4rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.01em;
}

/* Day One is a phrase, not a number: size it to sit on one line so it never
   collides with the next column. */
.stat-value--day-one {
	font-size: clamp(2rem, 2.7vw, 2.7rem);
	white-space: nowrap;
}

.stat span {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid rgba(246, 239, 226, 0.22);
	color: var(--color-sunlit-sand);
	font-size: 1rem;
	line-height: 1.5;
}

.persona-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.35rem;
}

.persona-card {
	overflow: hidden;
	background: var(--color-white);
}

.persona-card img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.persona-card > div {
	padding: 1.5rem;
}

.persona-card > div > span {
	color: var(--color-lighthouse-red);
	font-size: 1rem;
	font-weight: 700;
}

/* Ensure image-bearing figures clip the hover zoom. */
.neighbors figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--card-radius);
	background: var(--color-sunlit-sand);
}

/* --------------------------------------------------------------------------
   HOVER MOTION
   Every image lifts into a gentle zoom and every tile rises on hover. Limited
   to hover-capable pointers so touch never triggers a stuck state; disabled
   under prefers-reduced-motion (see the reduced-motion block).
   -------------------------------------------------------------------------- */
@media (hover: hover) {
	.service-card,
	.persona-card,
	.step,
	.process-card,
	.stat,
	.image-frame,
	.neighbors figure {
		transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
			box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.service-card img,
	.persona-card img,
	.image-frame img,
	.image-frame video,
	.neighbors figure img,
	.neighbors figure video {
		transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
		will-change: transform;
	}

	/* Hover zoom on cards and framed images. The "Plan, Not the Menu" video and
	   the "Care that feels local" image deliberately do NOT zoom (video + the
	   .neighbors figure are excluded). */
	.service-card:hover img,
	.persona-card:hover img,
	.image-frame:hover img {
		transform: scale(1.06);
	}

	.step:hover,
	.process-card:hover,
	.service-card:hover,
	.persona-card:hover,
	.stat:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px rgba(14, 74, 90, 0.16);
	}

	/* Stats sit on a dark field; give the hover shadow more presence there. */
	.stat:hover {
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
		border-color: rgba(255, 255, 255, 0.55);
	}
}

.persona-card h3 {
	margin: 0.65rem 0;
}

.neighbors figure {
	margin: 0;
	border-radius: var(--card-radius);
	overflow: hidden;
}

.neighbors figure img,
.neighbors figure video {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.neighbors .button {
	margin-top: 1rem;
}

.quote-section {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: 416px;
	place-items: center;
	overflow: hidden;
	background: var(--color-atlantic-deep);
}

.quote-section > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quote-scrim {
	z-index: 1;
	background: rgba(14, 74, 90, 0.92);
}

.quote-section blockquote {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin: 0;
	padding: 2.5rem;
	color: var(--color-sunlit-sand);
	font-family: var(--font-headline);
	font-size: clamp(1.8rem, 3.5vw, 3.6rem);
	font-weight: 500;
	line-height: 1.28;
	text-align: center;
}

.longevity {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: clamp(184px, 23vw, 324px);
	place-items: center;
	overflow: hidden;
	background: var(--color-atlantic-deep);
}

/* Water video behind the rallying line (same clip as the measure band). */
.longevity-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.longevity-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(14, 74, 90, 0.84) 0%, rgba(14, 74, 90, 0.8) 100%);
}

.longevity-line {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 2rem var(--site-gutter);
	color: var(--color-sunlit-sand);
	font-family: var(--font-headline);
	font-size: clamp(2.5rem, 6vw, 6rem);
	font-weight: 500;
	line-height: 1.15;
	text-align: center;
	text-shadow: 0 2px 22px rgba(14, 74, 90, 0.55);
}

.waypoint-beam--rally {
	top: -2px;
	right: -2px;
	width: 68%;
	height: 115%;
}

.cta {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: 544px;
	align-items: center;
	overflow: hidden;
	background: var(--color-atlantic-deep);
}

.cta > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cta-overlay {
	z-index: 1;
	background: rgba(14, 74, 90, 0.92);
}

/* Looping video behind the CTA. Lighter overlay than the static-image CTA so
   the motion reads through; text-shadow keeps the headline legible. */
.cta-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cta--video .cta-overlay {
	background: rgba(14, 74, 90, 0.66);
}

.cta--video .cta-content {
	text-shadow: 0 1px 16px rgba(14, 74, 90, 0.5);
}

.cta-content {
	position: relative;
	z-index: 2;
	width: min(720px, calc(100% - (2 * var(--site-gutter))));
	margin-left: var(--site-gutter);
	color: var(--color-white);
}

.cta-content h2 {
	color: var(--color-white);
}

.cta-content p:not(.eyebrow) {
	color: var(--color-white);
}

.site-footer {
	display: grid;
	padding: 4rem var(--site-gutter);
	grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr;
	gap: 3rem;
	background: var(--color-atlantic-deep);
	color: var(--color-white);
}

.site-footer h3 {
	color: var(--color-sunlit-sand);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer a,
.site-footer p,
.footer-note {
	color: var(--color-white);
	font-size: 1rem;
}

.site-footer a {
	display: block;
	margin: 0.35rem 0;
	text-decoration: none;
}

.brand--footer {
	display: inline-flex !important;
}

.footer-note {
	align-self: end;
}

.content-fallback {
	width: min(900px, calc(100% - (2 * var(--site-gutter))));
	min-height: 60vh;
	margin: 0 auto;
	padding: 9rem 0 var(--section-space);
}

/* --------------------------------------------------------------------------
   INTERIOR PAGES
   Compact Atlantic Deep header band, then the shared section components.
   -------------------------------------------------------------------------- */
.page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 9rem var(--site-gutter) 4.5rem;
	background: var(--color-atlantic-deep);
	color: var(--color-white);
}

.page-hero__inner {
	position: relative;
	z-index: 2;
	width: min(var(--content-width), 100%);
	max-width: 860px;
	margin: 0 auto;
}

.page-hero h1 {
	margin-bottom: 1.25rem;
	color: var(--color-white);
}

.page-hero h1 em {
	color: var(--color-sunlit-sand);
}

.page-hero__sub {
	max-width: 660px;
	color: var(--color-white);
	font-size: clamp(1.05rem, 1.8vw, 1.28rem);
}

.page-hero .waypoint-beam--hero {
	height: 118%;
}

/* Optional water-video background for a page hero (same clip as the home
   "Longevity, Planned." band). Video sits behind an Atlantic Deep scrim so the
   white headline and light eyebrow keep AA contrast. */
.page-hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(14, 74, 90, 0.84) 0%, rgba(14, 74, 90, 0.8) 100%);
}

/* Wrapper for the engagement "on your own vs with Waypoint" comparison band.
   White, to separate it from the Sunlit Sand timeline section above it. */
.compare-band {
	padding: var(--section-space) var(--site-gutter);
	background: var(--color-white);
}

/* Subtle photographic section background beneath a heavy white veil — gives a
   section a soft texture instead of flat white, without pulling focus from the
   text. Content children sit above the image + tint. */
.section-photo {
	position: relative;
	isolation: isolate;
}

.section-photo > .section-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-photo > .section-bg-tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255, 255, 255, 0.85);
}

.section-photo > *:not(.section-bg):not(.section-bg-tint) {
	position: relative;
	z-index: 2;
}

/* Reverse a split section so the media sits on the left. */
.split-section--reverse .section-copy {
	order: 2;
}

/* A centred intro paragraph above a grid. */
.page-lede {
	width: min(760px, calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0 0;
	text-align: center;
}

.page-lede h2 {
	margin-bottom: 1rem;
}

/* Contact details grid. */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
	width: min(var(--content-width), calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.contact-card {
	padding: 2rem 1.75rem;
	border: 1px solid rgba(14, 74, 90, 0.18);
	border-radius: var(--card-radius);
	background: var(--color-white);
}

.contact-card h3 {
	margin: 0 0 0.5rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-lighthouse-red);
}

.contact-card p,
.contact-card a {
	margin: 0.2rem 0;
	color: var(--color-inlet-ink);
	font-size: 1.05rem;
}

.contact-card a {
	color: var(--color-lighthouse-red);
	font-weight: 700;
	text-decoration: none;
}

/* A simple FAQ list used on interior pages. */
.faq-list {
	width: min(820px, calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.faq-item {
	padding: 1.75rem 0;
	border-bottom: 1px solid rgba(14, 74, 90, 0.16);
}

.faq-item:first-of-type {
	border-top: 1px solid rgba(14, 74, 90, 0.16);
}

.faq-item h3 {
	margin: 0 0 0.6rem;
	font-size: 1.35rem;
}

.faq-item p {
	margin: 0;
	max-width: 70ch;
}

.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 650ms ease-out, transform 650ms ease-out;
}

.reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

:focus-visible {
	outline: 3px solid var(--color-lighthouse-red);
	outline-offset: 4px;
}

@media (max-width: 1100px) {
	.site-nav {
		gap: 0.85rem;
	}

	.site-nav > a:not(.button) {
		display: none;
	}

	.steps,
	.process-grid,
	.persona-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.process-card:last-child,
	.persona-card:last-child {
		grid-column: 1 / -1;
	}

	.service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.measure-band {
		grid-template-columns: 1fr;
	}

	.site-footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 760px) {
	.site-header {
		min-height: 68px;
	}

	.menu-toggle {
		display: inline-flex;
		align-items: center;
	}

	.site-nav {
		position: absolute;
		top: 68px;
		right: 0;
		left: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 1.25rem var(--site-gutter);
		background: var(--color-atlantic-deep);
	}

	.site-nav.is-open {
		display: flex;
	}

	.site-nav > a:not(.button) {
		display: block;
	}

	.hero {
		min-height: 760px;
	}

	.hero-inner {
		width: calc(100% - (2 * var(--site-gutter)));
		margin: 0 auto;
		padding: 8rem 0 5rem;
	}

	.hero h1 {
		font-size: clamp(3rem, 15vw, 4.4rem);
	}

	.hero-dots {
		right: auto;
		left: var(--site-gutter);
	}

	/* The lighthouse beam sweeps subtly from the top-right on wider screens, but
	   on narrow screens it collapses into a hard red diagonal across the
	   headline — so hide it on mobile. */
	.waypoint-beam--hero {
		display: none;
	}

	.split-section,
	.neighbors {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.split-section .section-copy {
		order: 1;
	}

	.split-section .image-frame {
		order: 2;
	}

	.steps,
	.process-grid,
	.service-grid,
	.persona-grid,
	.stats {
		grid-template-columns: 1fr;
	}

	.process-card:last-child,
	.persona-card:last-child {
		grid-column: auto;
	}

	.process-card {
		min-height: auto;
	}

	.process-card > p:not(.process-footnote) {
		min-height: 0;
	}

	.section-heading--center {
		text-align: left;
	}

	.measure-band {
		gap: 2.5rem;
	}

	.stat {
		min-height: auto;
	}

	.quote-section {
		min-height: 368px;
	}

	.quote-section blockquote {
		padding: 1.5rem;
	}

	.longevity {
		min-height: 216px;
	}

	.waypoint-beam--rally {
		width: 105%;
		height: 125%;
	}

	.cta {
		min-height: 592px;
	}

	.cta-content {
		margin: 0 auto;
	}

	.site-footer {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.hero-slide {
		transition: none;
	}

	.reveal,
	.reveal.in-view {
		opacity: 1;
		transform: none;
	}

	.waypoint-beam,
	.waypoint-beam.is-drawn {
		clip-path: inset(0 0 0 0);
		transform: none;
	}

	.checkmark,
	.day-one-chip,
	.plan-document li,
	.footprint,
	.waypoint-marker,
	.footprints-route {
		opacity: 1;
		transform: none;
	}

	.footprints-route {
		opacity: 0.45;
	}

	.checkmark svg {
		stroke-dashoffset: 0;
	}

	/* Interactive process panels: show everything at rest, no draw. */
	.pv-day,
	.pv-time,
	.pv-chip,
	.pv-check,
	.pv-graph__dot,
	.pv-graph__label,
	.pv-service {
		opacity: 1;
		transform: none;
	}

	.pv-graph__line {
		stroke-dashoffset: 0;
	}

	/* No hover zoom/lift under reduced motion. */
	.service-card:hover img,
	.persona-card:hover img,
	.image-frame:hover img,
	.image-frame:hover video,
	.neighbors figure:hover img,
	.neighbors figure:hover video,
	.step:hover,
	.process-card:hover,
	.service-card:hover,
	.persona-card:hover,
	.stat:hover {
		transform: none;
	}
}

/* ==========================================================================
   Services & interior pages (v2.2.0)
   Distinct layout archetypes built on the existing tokens — no new colors or
   fonts. Uniqueness comes from section rhythm, not new styling primitives.
   ========================================================================== */

/* --- Labelled placeholder for not-yet-supplied media ---------------------- */
.wp-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 1.5rem;
	border: 1.5px dashed rgba(14, 74, 90, 0.45);
	border-radius: var(--card-radius);
	background: var(--color-sunlit-sand);
	color: var(--color-inlet-ink);
	text-align: center;
}

.wp-ph__mark {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-lighthouse-red);
}

.wp-ph__label {
	max-width: 32ch;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--color-atlantic-deep);
}

/* --- "Content pending" note (text copy awaiting the approved doc) ---------- */
.wp-note {
	border-left: 4px solid var(--color-leaf-renewal);
	border-radius: 0 var(--card-radius) var(--card-radius) 0;
	background: rgba(63, 125, 92, 0.08);
	padding: 1.25rem 1.5rem;
	color: var(--color-inlet-ink);
}

.wp-note p {
	margin: 0 0 0.5rem;
	max-width: 70ch;
}

.wp-note p:last-child {
	margin-bottom: 0;
}

.wp-note__tag {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-leaf-renewal);
}

/* ==========================================================================
   Services overview — split hero + sticky rail + editorial rows
   ========================================================================== */
.services-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	width: min(var(--content-width), 100%);
	margin: 0 auto;
}

.services-hero__copy h1 {
	margin-bottom: 1.25rem;
}

.services-hero__media .wp-ph {
	background: rgba(246, 239, 226, 0.1);
	border-color: rgba(246, 239, 226, 0.5);
}

.services-hero__media .wp-ph__label,
.services-hero__media .wp-ph__mark {
	color: var(--color-sunlit-sand);
}

.services-index {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	width: min(var(--content-width), calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.services-rail {
	position: sticky;
	top: 7rem;
	align-self: start;
}

.services-rail__label {
	margin-bottom: 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-lighthouse-red);
}

.services-rail ol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid rgba(14, 74, 90, 0.14);
}

.services-rail a {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-left: -2px;
	padding: 0.6rem 0 0.6rem 1rem;
	border-left: 2px solid transparent;
	color: var(--color-atlantic-deep);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease;
}

.services-rail a:hover,
.services-rail a:focus-visible {
	border-left-color: var(--color-lighthouse-red);
	color: var(--color-lighthouse-red);
}

.services-rail__num {
	font-family: var(--font-headline);
	font-size: 0.9rem;
	color: var(--color-lighthouse-red);
}

.svc-row {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	scroll-margin-top: 6rem;
}

.svc-row + .svc-row {
	border-top: 1px solid rgba(14, 74, 90, 0.14);
}

.svc-row--reverse .svc-row__media {
	order: 2;
}

.svc-row__media {
	margin: 0;
}

.svc-row__num {
	display: block;
	font-family: var(--font-headline);
	font-size: 1.1rem;
	color: var(--color-lighthouse-red);
	margin-bottom: 0.35rem;
}

.svc-row__copy h2 {
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	margin-bottom: 0.75rem;
}

.svc-row__summary {
	max-width: 52ch;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.svc-row__wont {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	max-width: 52ch;
	margin-bottom: 1.25rem;
	padding-left: 0.85rem;
	border-left: 3px solid var(--color-leaf-renewal);
	color: var(--color-inlet-ink);
}

.svc-row__wont-label {
	flex: none;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-leaf-renewal);
}

/* ==========================================================================
   Service detail — dark split hero + two-column long-form + sticky summary
   ========================================================================== */
.sd-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding: 9rem var(--site-gutter) clamp(3rem, 6vw, 5rem);
	background: var(--color-atlantic-deep);
	color: var(--color-white);
}

.sd-hero__media,
.sd-hero__copy {
	width: min(calc(var(--content-width) / 2), 100%);
}

.sd-hero__media {
	justify-self: end;
}

.sd-hero__copy {
	justify-self: start;
}

.sd-hero__copy h1 {
	color: var(--color-white);
	font-size: clamp(2.6rem, 5vw, 4rem);
	margin-bottom: 1.1rem;
}

.sd-hero .lead {
	color: var(--color-sunlit-sand);
	margin-bottom: 1.75rem;
}

.sd-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
	width: min(72rem, calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.sd-block {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sd-main h2 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	margin-bottom: 0.75rem;
}

.sd-main p {
	max-width: 68ch;
	font-size: 1.08rem;
	line-height: 1.72;
}

/* The honesty block — the brand differentiator, kept prominent. */
.sd-honesty {
	margin: clamp(2.5rem, 5vw, 3.5rem) 0;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-left: 5px solid var(--color-leaf-renewal);
	border-radius: 0 var(--card-radius) var(--card-radius) 0;
	background: var(--color-sunlit-sand);
}

.sd-honesty__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-leaf-renewal);
	margin-bottom: 0.4rem;
}

.sd-honesty > h2 {
	color: var(--color-atlantic-deep);
	margin-bottom: 1.5rem;
}

.sd-honesty__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.sd-honesty__col h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.sd-honesty__col--can h3 {
	color: var(--color-leaf-renewal);
}

.sd-honesty__col--cant h3 {
	color: var(--color-lighthouse-red);
}

.sd-honesty__col h3::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.9;
	-webkit-mask: no-repeat center / 12px;
	mask: no-repeat center / 12px;
}

.sd-honesty__col--can h3::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.sd-honesty__col--cant h3::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
}

.sd-honesty__col p {
	margin: 0;
	font-size: 1rem;
}

/* Detail-page FAQ (native accordion). */
.sd-faq__item {
	border-top: 1px solid rgba(14, 74, 90, 0.16);
	padding: 1rem 0;
}

.sd-faq__item:last-child {
	border-bottom: 1px solid rgba(14, 74, 90, 0.16);
}

.sd-faq__item summary {
	cursor: pointer;
	font-family: var(--font-headline);
	font-size: 1.2rem;
	color: var(--color-atlantic-deep);
	list-style: none;
}

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

.sd-faq__item summary::after {
	content: "+";
	float: right;
	color: var(--color-lighthouse-red);
	font-family: var(--font-body);
}

.sd-faq__item[open] summary::after {
	content: "\2212";
}

.sd-faq__item p {
	margin: 0.75rem 0 0;
	font-size: 1.02rem;
}

/* Sticky summary card. */
.sd-summary {
	position: sticky;
	top: 7rem;
	align-self: start;
}

.sd-summary__card {
	padding: 1.75rem;
	border: 1px solid rgba(14, 74, 90, 0.16);
	border-top: 3px solid var(--color-lighthouse-red);
	border-radius: var(--card-radius);
	background: var(--color-white);
	box-shadow: 0 1px 2px rgba(14, 74, 90, 0.05), 0 18px 40px -22px rgba(14, 74, 90, 0.35);
}

.sd-summary__def {
	font-family: var(--font-headline);
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--color-atlantic-deep);
	margin-bottom: 1.25rem;
}

.sd-summary__list {
	margin: 0 0 1.5rem;
}

.sd-summary__list > div {
	padding: 0.85rem 0;
	border-top: 1px solid rgba(14, 74, 90, 0.12);
}

.sd-summary__list dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-lighthouse-red);
	margin-bottom: 0.25rem;
}

.sd-summary__list dd {
	margin: 0;
	font-size: 0.98rem;
	color: var(--color-inlet-ink);
}

.sd-summary__cta {
	width: 100%;
}

.sd-summary__back {
	display: inline-flex;
	margin-top: 1rem;
}

/* ==========================================================================
   How It Works — vertical timeline spine
   ========================================================================== */
.tl {
	position: relative;
	width: min(58rem, 100%);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.tl::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: rgba(14, 74, 90, 0.16);
}

.tl__item {
	position: relative;
	width: 50%;
	padding: 0 3rem 3rem 0;
	text-align: right;
}

.tl__item:nth-child(even) {
	margin-left: 50%;
	padding: 0 0 3rem 3rem;
	text-align: left;
}

.tl__item:last-child {
	padding-bottom: 0;
}

.tl__marker {
	position: absolute;
	top: 0;
	right: -1.4rem;
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	background: var(--color-lighthouse-red);
	color: var(--color-white);
	font-family: var(--font-headline);
	font-size: 1rem;
	box-shadow: 0 0 0 6px var(--color-sunlit-sand);
	z-index: 1;
}

.tl__item:nth-child(even) .tl__marker {
	right: auto;
	left: -1.4rem;
}

.tl__panel {
	overflow: hidden;
	border-radius: var(--card-radius);
	background: var(--color-white);
	border-top: 3px solid var(--color-lighthouse-red);
	box-shadow: 0 1px 2px rgba(14, 74, 90, 0.05), 0 16px 34px -18px rgba(14, 74, 90, 0.22);
	text-align: left;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tl__panel:hover {
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(14, 74, 90, 0.06), 0 26px 48px -20px rgba(14, 74, 90, 0.3);
}

.tl__media {
	margin: 0;
	overflow: hidden;
}

.tl__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tl__panel:hover .tl__media img {
	transform: scale(1.04);
}

.tl__text {
	padding: 1.5rem 1.6rem 1.75rem;
}

.tl__text h3 {
	margin-bottom: 0.5rem;
}

.tl__text p {
	margin: 0;
}

/* ==========================================================================
   Who We Serve — tall persona panels
   ========================================================================== */
.personas {
	width: min(var(--content-width), calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.persona-panel {
	--accent: var(--color-lighthouse-red);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	border-radius: var(--card-radius);
	box-shadow: 0 1px 2px rgba(14, 74, 90, 0.05), 0 22px 50px -30px rgba(14, 74, 90, 0.3);
	background: var(--color-white);
}

.persona-panel + .persona-panel {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.persona-panel:nth-of-type(3n + 2) {
	--accent: var(--color-leaf-renewal);
}

.persona-panel:nth-of-type(3n + 3) {
	--accent: var(--color-atlantic-deep);
}

.persona-panel--reverse .persona-panel__media {
	order: 2;
}

.persona-panel__media {
	margin: 0;
	overflow: hidden;
	min-height: 340px;
}

.persona-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.persona-panel:hover .persona-panel__media img {
	transform: scale(1.03);
}

.persona-panel__body {
	padding: clamp(2rem, 4vw, 3.25rem);
	border-top: 4px solid var(--accent);
}

.persona-panel__num {
	font-family: var(--font-headline);
	font-size: 1.1rem;
	color: var(--accent);
}

.persona-panel__body h3 {
	margin: 0.25rem 0 1.5rem;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.persona-panel__parts {
	margin: 0;
}

.persona-panel__parts > div {
	padding: 1rem 0;
	border-top: 1px solid rgba(14, 74, 90, 0.12);
}

.persona-panel__parts dt {
	margin-bottom: 0.3rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
}

.persona-panel__parts dd {
	margin: 0;
	max-width: 46ch;
	color: var(--color-inlet-ink);
}

/* ==========================================================================
   Our Story — editorial narrative
   ========================================================================== */
.story {
	width: min(64rem, calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.story-open {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.story-portrait {
	margin: 0;
}

.story-open__copy h2 {
	margin: 0.5rem 0 1.5rem;
}

.story-quote {
	margin: clamp(3rem, 7vw, 6rem) 0;
	text-align: center;
}

.story-quote blockquote {
	margin: 0 auto;
	max-width: 40ch;
}

.story-quote p {
	font-family: var(--font-headline);
	font-style: italic;
	font-size: clamp(1.6rem, 3.5vw, 2.6rem);
	line-height: 1.3;
	color: var(--color-atlantic-deep);
}

.story-quote::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin: 0 auto 1.75rem;
	background: var(--color-lighthouse-red);
}

.story-name {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin: clamp(3rem, 6vw, 5rem) 0;
}

.story-name__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--card-radius);
}

.story-name__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.story-name__copy h2 {
	margin: 0.5rem 0 1rem;
}

.story-timeline {
	margin: clamp(3rem, 6vw, 5rem) 0;
}

.story-mini-tl {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.story-mini-tl li {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 1rem;
	padding: 0.85rem 0;
	border-top: 1px solid rgba(14, 74, 90, 0.14);
}

.story-mini-tl__year {
	font-family: var(--font-headline);
	font-weight: 500;
	color: var(--color-lighthouse-red);
}

.story-peptide {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding: clamp(2.25rem, 5vw, 3.5rem);
	border-radius: var(--card-radius);
	background: var(--color-sunlit-sand);
}

.story-peptide__inner {
	max-width: 60ch;
}

.story-peptide h2 {
	margin: 0.5rem 0 1rem;
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

/* ==========================================================================
   Contact — booking-first form + details
   ========================================================================== */
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	width: min(var(--content-width), calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.contact-form-wrap h2 {
	margin-bottom: 0.5rem;
}

.contact-form-wrap__lede {
	max-width: 52ch;
	margin-bottom: 2rem;
	color: var(--color-inlet-ink);
}

.form-row {
	margin: 0 0 1.25rem;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.form-row label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-atlantic-deep);
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(14, 74, 90, 0.28);
	border-radius: var(--card-radius);
	background: var(--color-white);
	color: var(--color-inlet-ink);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgba(20, 51, 60, 0.5);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
	outline: none;
	border-color: var(--color-lighthouse-red);
	box-shadow: 0 0 0 3px rgba(166, 58, 43, 0.18);
}

.contact-form textarea {
	resize: vertical;
	min-height: 7rem;
}

.contact-form .button {
	margin-top: 0.25rem;
}

.contact-form__note {
	margin: 1rem 0 0;
	font-size: 0.95rem;
	color: var(--color-inlet-ink);
}

.contact-form__note a {
	color: var(--color-lighthouse-red);
	font-weight: 700;
}

.contact-aside {
	padding: 1.75rem;
	border: 1px solid rgba(14, 74, 90, 0.16);
	border-radius: var(--card-radius);
	background: var(--color-sunlit-sand);
}

.contact-detail {
	padding: 1rem 0;
	border-top: 1px solid rgba(14, 74, 90, 0.14);
}

.contact-detail:first-child {
	padding-top: 0;
	border-top: 0;
}

.contact-detail h3 {
	margin: 0 0 0.4rem;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-lighthouse-red);
}

.contact-detail p {
	margin: 0.2rem 0;
	color: var(--color-inlet-ink);
}

.contact-detail a {
	color: var(--color-lighthouse-red);
	font-weight: 700;
	text-decoration: none;
}

.contact-map {
	margin: 1.5rem 0 0;
}

/* ==========================================================================
   FAQ — grouped native accordion
   ========================================================================== */
.faq-page {
	width: min(52rem, calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.faq-group + .faq-group {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.faq-group__title {
	margin-bottom: 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--color-lighthouse-red);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.faq-q {
	border-bottom: 1px solid rgba(14, 74, 90, 0.16);
}

.faq-q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-headline);
	font-size: 1.2rem;
	color: var(--color-atlantic-deep);
}

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

.faq-q__icon {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}

.faq-q__icon::before,
.faq-q__icon::after {
	content: "";
	position: absolute;
	background: var(--color-lighthouse-red);
	transition: transform 220ms ease, opacity 220ms ease;
}

.faq-q__icon::before {
	top: 8px;
	left: 0;
	width: 18px;
	height: 2px;
}

.faq-q__icon::after {
	top: 0;
	left: 8px;
	width: 2px;
	height: 18px;
}

.faq-q[open] .faq-q__icon::after {
	transform: rotate(90deg);
	opacity: 0;
}

.faq-q__answer {
	padding: 0 0 1.25rem;
}

.faq-q__answer p {
	margin: 0;
	max-width: 68ch;
	color: var(--color-inlet-ink);
}

.faq-q summary:focus-visible,
.services-rail a:focus-visible,
.sd-faq__item summary:focus-visible {
	outline: 2px solid var(--color-lighthouse-red);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ==========================================================================
   Responsive — interior archetypes
   ========================================================================== */
@media (max-width: 1000px) {
	.services-index {
		grid-template-columns: 1fr;
	}

	.services-rail {
		position: static;
		display: none;
	}

	.sd-body {
		grid-template-columns: 1fr;
	}

	.sd-summary {
		position: static;
		order: -1;
	}
}

@media (max-width: 820px) {
	.services-hero__inner,
	.sd-hero {
		grid-template-columns: 1fr;
	}

	.sd-hero {
		padding-top: 7.5rem;
		text-align: left;
	}

	.sd-hero__media {
		justify-self: stretch;
	}

	.svc-row,
	.svc-row--reverse {
		grid-template-columns: 1fr;
	}

	.svc-row__media,
	.svc-row--reverse .svc-row__media {
		order: -1;
	}

	.story-open,
	.story-name,
	.contact-layout {
		grid-template-columns: 1fr;
	}

	.persona-panel,
	.persona-panel--reverse {
		grid-template-columns: 1fr;
	}

	.persona-panel__media,
	.persona-panel--reverse .persona-panel__media {
		order: -1;
		min-height: 240px;
	}

	.sd-honesty__grid {
		grid-template-columns: 1fr;
	}

	.tl::before {
		left: 1.1rem;
	}

	.tl__item,
	.tl__item:nth-child(even) {
		width: 100%;
		margin-left: 0;
		padding: 0 0 2.5rem 3rem;
		text-align: left;
	}

	.tl__marker,
	.tl__item:nth-child(even) .tl__marker {
		left: -0.3rem;
		right: auto;
		width: 2.8rem;
		height: 2.8rem;
	}
}

@media (max-width: 560px) {
	.form-grid {
		grid-template-columns: 1fr;
	}

	.story-mini-tl li {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tl__panel,
	.tl__media img,
	.persona-panel__media img,
	.faq-q__icon::before,
	.faq-q__icon::after {
		transition: none;
	}

	.tl__panel:hover,
	.tl__panel:hover .tl__media img,
	.persona-panel:hover .persona-panel__media img {
		transform: none;
	}
}

/* ==========================================================================
   Services dropdown, Team cards, and the "Illustrative" tag (v2.8.0)
   ========================================================================== */

/* --- Services nav dropdown ------------------------------------------------ */
.nav-has-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.nav-top {
	display: inline-flex;
	align-items: center;
}

.nav-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.35rem;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.8;
	transition: transform 160ms ease;
}

.nav-has-menu:hover .nav-caret,
.nav-has-menu:focus-within .nav-caret {
	transform: rotate(180deg);
}

.nav-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0.5rem 0;
	min-width: 264px;
	list-style: none;
	background: var(--color-white);
	border-radius: var(--card-radius);
	box-shadow: 0 20px 46px -18px rgba(14, 74, 90, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
	z-index: 40;
}

.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav .nav-menu a {
	display: block;
	padding: 0.6rem 1.15rem;
	color: var(--color-atlantic-deep);
	font-size: 0.98rem;
	font-weight: 600;
	white-space: nowrap;
}

.site-nav .nav-menu a:hover,
.site-nav .nav-menu a:focus-visible {
	background: var(--color-sunlit-sand);
	color: var(--color-lighthouse-red);
}

.nav-menu__cta {
	margin-top: 0.4rem;
	padding-top: 0.35rem;
	border-top: 1px solid rgba(14, 74, 90, 0.14);
}

.site-nav .nav-menu__cta a {
	color: var(--color-lighthouse-red);
	font-weight: 700;
}

/* --- Team page cards ------------------------------------------------------ */
.team {
	width: min(var(--content-width), calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.team-card {
	overflow: hidden;
	background: var(--color-white);
	border-top: 3px solid var(--color-lighthouse-red);
	border-radius: var(--card-radius);
	box-shadow: 0 1px 2px rgba(14, 74, 90, 0.05), 0 18px 40px -22px rgba(14, 74, 90, 0.3);
}

.team-card__media {
	margin: 0;
}

.team-card__body {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.team-card__body h3 {
	margin: 0 0 0.2rem;
	font-size: 1.5rem;
}

.team-card__role {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-lighthouse-red);
}

/* --- "Illustrative" tag on the day-one / dates card ----------------------- */
.pv-appointment {
	position: relative;
}

.pv-illustrative {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	background: rgba(14, 74, 90, 0.07);
	color: var(--color-inlet-ink);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.8;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 820px) {
	.team-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
	}
}

@media (max-width: 760px) {
	/* In the dark mobile nav panel the dropdown becomes an indented list. */
	.nav-has-menu {
		display: block;
		width: 100%;
	}

	.nav-top {
		display: block;
	}

	.nav-caret {
		display: none;
	}

	.nav-menu {
		position: static;
		min-width: 0;
		padding: 0.25rem 0 0.5rem 1rem;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav .nav-menu a {
		color: var(--color-white);
		padding: 0.5rem 0;
		font-weight: 600;
	}

	.site-nav .nav-menu a:hover,
	.site-nav .nav-menu a:focus-visible {
		background: transparent;
		color: var(--color-sunlit-sand);
	}

	.site-nav .nav-menu__cta a {
		color: var(--color-sunlit-sand);
	}
}

/* ==========================================================================
   "How It Works" — full-width alternating rows (homepage .how section)
   Replaces the 4-up step grid. Uses the site's tokens (--color-*, --font-*)
   and the shared .reveal scroll-in utility (reduced-motion handled globally).
   ========================================================================== */
.wpj-rows {
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 8vw, 128px);
	max-width: 1720px;
	margin: 0 auto;
}

.wpj-row {
	display: flex;
	align-items: center;
	gap: clamp(32px, 6vw, 110px);
}

/* Alternate: even rows put the media on the right. */
.wpj-row:nth-child(even) {
	flex-direction: row-reverse;
}

.wpj-media {
	position: relative;
	flex: 0 0 52%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: clamp(24px, 3vw, 40px);
	background: #E7DCC8; /* placeholder sand — only visible if an image fails to load */
}

.wpj-media img,
.wpj-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%; /* bias the crop toward faces; tuned per image below */
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover: gentle zoom on the media (matches the theme's other image-hover motion). */
.wpj-media:hover img,
.wpj-media:hover video {
	transform: scale(1.06);
}

/* Per-image focal points so no heads are cut at 16/9 (rows in source order).
   Row 1 is a video, so it is targeted too. */
.wpj-row:nth-child(1) .wpj-media img,
.wpj-row:nth-child(1) .wpj-media video { object-position: center 30%; }
.wpj-row:nth-child(2) .wpj-media img { object-position: center 30%; }
.wpj-row:nth-child(3) .wpj-media img { object-position: center 35%; }
.wpj-row:nth-child(4) .wpj-media img { object-position: center 22%; }

@media (prefers-reduced-motion: reduce) {
	.wpj-media img,
	.wpj-media video { transition: none; }

	.wpj-media:hover img,
	.wpj-media:hover video { transform: none; }
}

.wpj-text {
	flex: 1 1 auto;
	min-width: 0;
}

.wpj-step {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(13px, 1vw, 15px);
	letter-spacing: 0.18em;
	color: var(--color-lighthouse-red);
}

.wpj-title {
	margin: 0 0 16px;
	font-family: var(--font-headline);
	font-weight: 500;
	font-size: clamp(28px, 3.2vw, 46px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--color-atlantic-deep);
	text-wrap: balance;
}

.wpj-copy {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.65;
	color: var(--color-inlet-ink);
}

/* Mobile: stack, media above text, same order for every step. */
@media (max-width: 860px) {
	.wpj-row,
	.wpj-row:nth-child(even) {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.wpj-media {
		flex-basis: auto;
		aspect-ratio: 16 / 9;
	}

	.wpj-copy {
		max-width: none;
	}
}

/* Free 3D Scan header CTA: sits beside Start Your Journey on desktop; on mobile
   it becomes the first item in the collapsed menu, above the nav links. */
@media (max-width: 760px) {
	.nav-scan-cta {
		order: -1;
		margin-bottom: 0.35rem;
	}
}

/* The full nav plus two header CTAs does not fit between ~760px and ~1200px, so
   collapse the nav into the hamburger menu across that range too (the hero and
   the rest of the page keep their desktop layout). Mirrors the <=760 behaviour;
   the "Book Your Free 3D Scan" CTA becomes the first item in the open menu. */
@media (min-width: 761px) and (max-width: 1200px) {
	.menu-toggle {
		display: inline-flex;
		align-items: center;
	}

	.site-nav {
		position: absolute;
		top: 78px;
		right: 0;
		left: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 1.25rem var(--site-gutter);
		background: var(--color-atlantic-deep);
	}

	.site-nav.is-open {
		display: flex;
	}

	.site-nav > a:not(.button) {
		display: block;
	}

	.nav-has-menu {
		display: block;
		width: 100%;
	}

	.nav-top {
		display: block;
	}

	.nav-caret {
		display: none;
	}

	.nav-menu {
		position: static;
		min-width: 0;
		padding: 0.25rem 0 0.5rem 1rem;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav .nav-menu a {
		color: var(--color-white);
		padding: 0.5rem 0;
		font-weight: 600;
	}

	.site-nav .nav-menu__cta a {
		color: var(--color-sunlit-sand);
	}

	.nav-scan-cta {
		order: -1;
		margin-bottom: 0.35rem;
	}
}

/* ==========================================================================
   Legal pages (Privacy Policy) — simple readable long-form column
   ========================================================================== */
.legal {
	width: min(48rem, calc(100% - (2 * var(--site-gutter))));
	margin: 0 auto;
	padding: var(--section-space) 0;
	color: var(--color-inlet-ink);
}

.legal__meta {
	margin: 0 0 2rem;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-lighthouse-red);
}

.legal h2 {
	margin: 2.5rem 0 0.85rem;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.legal p {
	margin: 0 0 1.1rem;
	max-width: 68ch;
	line-height: 1.7;
}

.legal ul {
	margin: 0 0 1.4rem;
	padding-left: 1.2rem;
	max-width: 68ch;
}

.legal li {
	margin: 0 0 0.75rem;
	line-height: 1.7;
}

.legal__contact a {
	color: var(--color-lighthouse-red);
	font-weight: 700;
}

/* Footer legal link (Privacy Policy), sits with the copyright note. */
.footer-legal-link {
	margin-left: 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
	text-decoration: underline;
}

/* Google Map embed on the Contact page (replaces the map placeholder). */
.contact-map__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--card-radius);
}

.contact-map figcaption {
	margin-top: 0.6rem;
	font-size: 0.95rem;
}

.contact-map figcaption a {
	color: var(--color-lighthouse-red);
	font-weight: 700;
	text-decoration: none;
}