/* ==========================================================
   Akiya Pilot — theme.css
   Ported from reference/static-site/styles.css.
   All values come from theme.json; the aliases below just keep
   the selectors readable. Don't add raw colours or sizes here —
   add a token to theme.json instead.
   ========================================================== */
:root {
	/* Colour */
	--cream: var(--wp--preset--color--cream);
	--green: var(--wp--preset--color--green);
	--green-deep: var(--wp--preset--color--green-deep);
	--orange: var(--wp--preset--color--orange);
	--peach: var(--wp--preset--color--peach);
	--peach-light: var(--wp--preset--color--peach-light);
	--peach-deep: var(--wp--preset--color--peach-deep);
	--teal-soft: var(--wp--preset--color--teal-soft);
	--white: var(--wp--preset--color--white);
	--line: var(--wp--preset--color--line);

	/* Font */
	--font-display: var(--wp--preset--font-family--display);
	--font-text: var(--wp--preset--font-family--text);
	--display-hero: var(--wp--preset--font-size--display-hero);
	--display-h1: var(--wp--preset--font-size--display-h-1); /* WP converts the slug "display-h1" to "display-h-1" */
	--display-h2: var(--wp--preset--font-size--display-h-2); /* WP converts the slug "display-h2" to "display-h-2" */
	--display-h3: var(--wp--preset--font-size--display-h-3); /* WP converts the slug "display-h3" to "display-h-3" */
	--text-lead: var(--wp--preset--font-size--lead);
	--text-base: var(--wp--preset--font-size--base);
	--text-sm: var(--wp--preset--font-size--small);
	--lh-heading: var(--wp--custom--line-height--heading);
	--lh-tight: var(--wp--custom--line-height--tight);
	--lh-lead: var(--wp--custom--line-height--lead);
	--measure: var(--wp--custom--measure);

	/* Space */
	--space-1: var(--wp--preset--spacing--1);
	--space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-6: var(--wp--preset--spacing--6);
	--space-8: var(--wp--preset--spacing--8);
	--space-12: var(--wp--preset--spacing--12);
	--space-16: var(--wp--preset--spacing--16);
	--space-24: var(--wp--preset--spacing--24);
	--section-y: var(--wp--custom--section-y);
	--wave-h: var(--wp--custom--wave-h);
	--gutter: var(--wp--custom--gutter);
	--header-h: var(--wp--custom--header-h);

	/* Layout */
	--container: var(--wp--style--global--wide-size, 1400px);
	--container-narrow: var(--wp--style--global--content-size, 760px);

	/* Shape */
	--card-border: 1px solid var(--line);
	--card-radius: var(--wp--custom--radius--photo);
	--card-shape: var(--wp--custom--radius--card);
	--card-shape-hover: var(--wp--custom--radius--card-hover);
	--field-radius: var(--wp--custom--radius--field);
	--card-bg: var(--peach-light);

	/* Decorations (SVG masks, painted with the colour tokens) */
	--deco-divider-wave: url("../images/deco/divider-wave.svg");
	--deco-hero-curve: url("../images/deco/hero-curve.svg");
	--deco-akiya-ribbon: url("../images/deco/akiya-ribbon.svg?v=2");
	--deco-intro-wave: url("../images/deco/intro-wave.svg");
	--deco-water-wave: url("../images/deco/water-wave.svg");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; }
img { height: auto; }
html { scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}

.skip-link.screen-reader-text:focus { background: var(--white); color: var(--green); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tinted box until real images land (theme images only, not the media library) */
.wp-block-image img { background: var(--peach); display: block; }
.wp-block-image.is-transparent img,
.akiya__illust img,
.coverage__map img,
.card--boat__flag img { background: none; }

/* ---------- Buttons & links ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.wp-block-button__link { display: inline-block; border-radius: 0; text-decoration: none; cursor: pointer; }
.wp-block-button.is-style-secondary .wp-block-button__link { background: var(--white); color: var(--green); }
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: var(--space-3) var(--space-8);
	border: 0;
	background: transparent;
	color: var(--green);
	box-shadow: inset 0 0 0 1px var(--green);
}
.link a, a.link { font-weight: 600; text-underline-offset: 0.2em; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 5; background: var(--cream); }
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-6); padding-block: var(--space-4); min-height: var(--header-h);
}
.site-header .wp-block-site-logo { line-height: 0; }
.site-header .wp-block-site-logo img,
.logo img { height: 48px; width: auto; background: none; }
.logo { text-decoration: none; }
.logo__text { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 48px; white-space: nowrap; }

.site-header .wp-block-navigation { --nav-gap: var(--space-8); }
.site-header .wp-block-navigation__container { gap: var(--nav-gap); align-items: center; }
.site-header .wp-block-navigation-item__content {
	font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.65;
	color: var(--green); text-decoration: none;
}
.site-header .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px;
}
.site-header .wp-block-navigation-item.nav__cta > .wp-block-navigation-item__content {
	padding: var(--space-2) var(--space-4);
	background: var(--orange); color: var(--white);
}
.site-header .wp-block-navigation-item.nav__cta > .wp-block-navigation-item__content[aria-current="page"] { text-decoration: none; }

/* Menu buttons: three wavy lines → × */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	align-items: center; justify-content: center;
	background: none; color: var(--green); cursor: pointer;
}
.nav-toggle__icon { display: block; overflow: visible; }
.nav-toggle__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.wp-block-navigation__responsive-container-open:hover .nav-toggle__line--2 { animation: ripple 1.2s ease-in-out infinite; }
@keyframes ripple { 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container-open:hover .nav-toggle__line--2 { animation: none; }
}

/* Mobile menu (≤1024px): a panel that drops down under the header, straight bottom edge */
@media (max-width: 1024px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed; inset: 0 0 auto 0; height: auto; max-height: 100vh; overflow-y: auto;
		padding: 0;
		/* transparent over the header so the logo stays visible */
		background: linear-gradient(to bottom, transparent var(--header-h), var(--cream) var(--header-h)) !important;
		color: var(--green) !important;
		animation: none;
	}
	.admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 0); }
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: none; }
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: relative; margin: 0; }
	/* The × takes the place of the wavy-lines button */
	.site-header .wp-block-navigation__responsive-container-close {
		display: flex; position: fixed; top: calc((var(--header-h) - 48px) / 2); right: var(--gutter);
		background: var(--cream);
	}
	.admin-bar .site-header .wp-block-navigation__responsive-container-close { top: calc(var(--wp-admin--admin-bar--height, 0px) + (var(--header-h) - 48px) / 2); }
	.site-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		margin-top: var(--header-h);
		padding: var(--space-6) var(--gutter);
		border-bottom: 1px solid var(--line);
		align-items: flex-start;
	}
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: var(--space-4); align-items: flex-start;
	}
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start; }
}
@media (max-width: 640px) {
	.site-header .wp-block-site-logo img, .logo img { height: 40px; }
	.logo__text { font-size: 1.75rem; line-height: 40px; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section-y); }
.is-style-section-peach, .is-style-section-peach-wave { background: var(--peach); --card-bg: var(--cream); }

/* Wavy top edge (the logo's wave). The wave overlaps the section above. */
.is-style-section-peach-wave {
	z-index: 1;
	padding-top: calc(var(--section-y) + var(--wave-h));
	background: linear-gradient(to bottom, transparent calc(var(--wave-h) - 1px), var(--peach) calc(var(--wave-h) - 1px));
}
.is-style-section-peach-wave::before {
	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--wave-h);
	background: var(--peach);
	-webkit-mask: var(--deco-divider-wave) no-repeat 0 0 / 100% 100%;
	mask: var(--deco-divider-wave) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* Accent section (Why us) — same green as the footer */
.is-style-section-accent { background: var(--green); color: var(--cream); }
.is-style-section-accent :focus-visible { outline-color: var(--cream); }

.section-head { max-width: var(--measure); margin-bottom: var(--space-12); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--display-h2); line-height: var(--lh-heading); }
.section-head p { margin-top: var(--space-4); font-size: var(--text-lead); line-height: var(--lh-lead); }
.section-foot { margin-top: var(--space-12); }
.section-foot--center { text-align: center; justify-content: center; }
.section-foot a:not(.wp-block-button__link) { font-weight: 600; text-underline-offset: 0.2em; }

/* ---------- Grid & cards ---------- */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.card, .is-style-card {
	background: var(--card-bg);
	border-radius: var(--card-shape);
	padding: var(--space-6);
}
:is(.card, .is-style-card) h3 { font-size: var(--display-h3); line-height: var(--lh-heading); }
:is(.card, .is-style-card) p { margin-top: var(--space-3); }
:is(.card, .is-style-card) > :first-child { margin-top: 0; }
.card--flush { padding: 0; overflow: hidden; }
a.card { transition: border-radius .35s ease; }
a.card:hover { border-radius: var(--card-shape-hover); }

/* Numbered cards: 01–05 are generated, so reordering or adding cards keeps the count right */
.grid--numbered { counter-reset: card; }
.grid--numbered > * { counter-increment: card; }
.grid--numbered > *::before {
	content: counter(card, decimal-leading-zero);
	display: block; margin-bottom: var(--space-3);
	font-family: var(--font-display); font-style: italic; font-weight: 500;
	font-size: 1.75rem; line-height: 1; color: var(--orange);
}

/* Boat cards ("Who this is for") — hull + illustration, bobbing on the wave */
.fleet { gap: var(--space-8); row-gap: calc(var(--space-8) + 88px); padding-top: 88px; }
.is-style-boat {
	--hull-stripe: var(--peach-deep);
	position: relative;
	padding: var(--space-6) var(--space-8) var(--space-12);
	border-radius: 6px 6px 50% 50% / 6px 6px 26% 26%;
	background:
		linear-gradient(to bottom, transparent calc(100% - 22px), var(--hull-stripe) calc(100% - 22px) calc(100% - 16px), transparent calc(100% - 16px)),
		var(--card-bg);
	animation: bob 5s ease-in-out infinite;
}
.is-style-boat h3 { font-size: var(--display-h3); line-height: var(--lh-heading); }
.is-style-boat p { margin-top: var(--space-3); }
.fleet > .is-style-boat:nth-child(2) { animation-delay: -1.2s; }
.fleet > .is-style-boat:nth-child(3) { animation-delay: -2.6s; }
.fleet > .is-style-boat:nth-child(4) { animation-delay: -3.8s; }
.card--boat__flag { /* illustration riding on top of the boat, in place of the sail */
	position: absolute; left: var(--space-6); bottom: calc(100% - 12px);
	width: 100px; height: 100px; margin: 0; pointer-events: none;
}
.card--boat__flag img { width: 100px; height: 100px; }
@keyframes bob {
	0%, 100% { transform: translateY(0) rotate(-0.8deg); }
	50%      { transform: translateY(-6px) rotate(0.8deg); }
}
@media (prefers-reduced-motion: reduce) { .is-style-boat { animation: none; } }

/* ---------- Page intro (sub pages) ---------- */
.page-intro { position: relative; overflow: hidden; padding-block: var(--section-y) calc(var(--section-y) + var(--space-8)); }
.page-intro h1 { font-size: var(--display-h1); line-height: var(--lh-tight); }
.page-intro .page-intro__lead { margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--display-h3); font-weight: 500; line-height: 1.25; }
.page-intro .page-intro__body { margin-top: var(--space-6); max-width: var(--measure); font-size: var(--text-lead); line-height: var(--lh-lead); }
.page-intro .page-intro__body > * + * { margin-top: var(--space-3); }
.page-intro .page-intro__signoff { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--display-h3); }
.page-intro .page-intro__text { margin-top: var(--space-6); max-width: var(--measure); font-size: var(--text-lead); line-height: var(--lh-lead); }
.page-intro::after { /* teal wave line under the intro */
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1440 / 120;
	background: var(--teal-soft);
	-webkit-mask: var(--deco-intro-wave) no-repeat 0 0 / 100% 100%;
	mask: var(--deco-intro-wave) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* ---------- Home: hero ---------- */
.wp-block-cover.hero {
	position: relative; overflow: hidden;
	min-height: min(800px, 90vh); display: flex; align-items: center;
	padding: var(--space-24) 0;
	background-color: var(--wp--custom--hero-fallback);
	color: var(--white);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(0 0 0 / .5), rgb(0 0 0 / .1) 75%); pointer-events: none; }
.hero > .wp-block-cover__background { display: none; }
.hero > .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; color: var(--white); }
.hero h1 { font-size: var(--display-hero); font-weight: 500; line-height: var(--lh-tight); max-width: 20ch; }
.hero p { margin-top: var(--space-12); max-width: 58ch; font-size: var(--text-lead); line-height: var(--lh-lead); }
.hero .wp-block-buttons { margin-top: var(--space-8); }
.hero::after { /* cream ribbon, bottom right; continues into "What's an Akiya?" */
	content: ""; position: absolute; right: 0; bottom: 0; z-index: 2;
	width: min(45%, 560px); aspect-ratio: 560 / 330;
	background: var(--cream);
	-webkit-mask: var(--deco-hero-curve) no-repeat 0 0 / 100% 100%;
	mask: var(--deco-hero-curve) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* ---------- Home: what's an akiya ---------- */
.akiya { padding-top: clamp(2rem, 1rem + 3vw, 4rem); }
.akiya__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.akiya h2 { font-size: var(--display-h2); line-height: var(--lh-heading); }
.akiya__lead { margin-top: var(--space-6); max-width: var(--measure); font-size: var(--text-lead); line-height: var(--lh-lead); }
.akiya__illust { justify-self: center; margin: 0; }
.akiya__illust img { width: 500px; height: 500px; object-fit: contain; }
.akiya::before { /* the hero's ribbon turns teal here and runs on under the next section */
	content: ""; position: absolute; top: 0; right: 0;
	/* Same scale as the hero curve (560 units = min(45%, 560px)); the SVG reaches 60 units further
	   left because the stroke bulges past x=0, which the static site shows via overflow: visible. */
	width: calc(min(45%, 560px) * 620 / 560); aspect-ratio: 620 / 680;
	background: var(--teal-soft);
	-webkit-mask: var(--deco-akiya-ribbon) no-repeat 0 0 / 100% 100%;
	mask: var(--deco-akiya-ribbon) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}
.section--water { overflow: hidden; }
.section--water > .container { position: relative; }
.section--water::before { /* teal wave across the bottom of the section (Home: What we do) */
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1440 / 300;
	background: var(--teal-soft);
	-webkit-mask: var(--deco-water-wave) no-repeat 0 0 / 100% 100%;
	mask: var(--deco-water-wave) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* ---------- Why is finding an akiya so difficult? (synced pattern) ----------
   The outer group sets the background; add "problems--plain" to drop the
   illustrations and the bobbing (Services). */
.problems { overflow: hidden; z-index: 1; }
.problems > .container { position: relative; }
.fleet > .is-style-boat::before { margin-bottom: var(--space-2); }
.problems--plain .fleet { padding-top: 0; row-gap: var(--space-8); }
.problems--plain .is-style-boat { animation: none; }
.problems--plain .card--boat__flag { display: none; }
.problems__answer { margin-top: var(--space-16); text-align: center; }
.problems__cause { max-width: 52ch; margin-inline: auto; font-size: var(--text-lead); line-height: var(--lh-lead); }
.problems__turn {
	margin: var(--space-6) auto 0;
	font-family: var(--font-display); font-weight: 600; font-size: var(--display-h2); line-height: var(--lh-heading); text-wrap: balance;
}
@media (min-width: 900px) { .problems__turn { white-space: nowrap; } }

/* ---------- Steps (numbered with a counter) ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.steps > * {
	counter-increment: step; position: relative;
	display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6);
}
.steps > *::before, .process > *::before {
	content: counter(step);
	display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	background: var(--green); color: var(--cream);
	font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1;
}
.steps > *::before { grid-row: span 2; }
.steps > * > * { grid-column: 2; }
.steps h3 { margin-top: var(--space-2); font-size: var(--display-h3); line-height: var(--lh-heading); }
.steps p { margin-top: var(--space-2); }
.steps > :not(:last-child)::after { /* line between the numbers */
	content: ""; position: absolute;
	top: calc(3rem + var(--space-2)); bottom: calc(var(--space-6) * -1 + var(--space-2));
	left: calc(1.5rem - 0.5px); width: 1px; background: var(--line);
}

/* Home: How It Works — photo + vertical steps */
.how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); align-items: center; }
.how__photo { margin: 0; }
.how__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 78%; border-radius: var(--card-shape); }

/* ---------- Process (How It Works page) ---------- */
.process { counter-reset: step; display: grid; gap: var(--space-6); }
.process > * { counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); align-items: start; }
.process > * > * { grid-column: 2; }
.process > *::before { grid-row: span 3; }
.process h3 { font-size: var(--display-h3); line-height: var(--lh-heading); }
.process > * > p { margin-top: var(--space-3); }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin-top: var(--space-4); font-size: var(--text-sm); }
.meta p, :is(.card, .is-style-card) .meta p { margin-top: 0; }
.meta strong { font-weight: 600; }

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.split h2 { font-size: var(--display-h2); line-height: var(--lh-heading); }
.split p { margin-top: var(--space-4); }
.coverage__map { width: 100%; max-width: 500px; justify-self: center; margin: 0; }
.coverage__map img { width: 100%; }
.split__strong { font-family: var(--font-display); font-size: var(--display-h3); font-weight: 600; line-height: var(--lh-heading); }

/* ---------- Why us ---------- */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-12) var(--space-8); }
.why > * { padding-top: var(--space-6); border-top: 1px solid rgb(251 244 227 / .35); }
.why h3 { font-size: var(--display-h3); line-height: var(--lh-heading); }
.why p { margin-top: var(--space-2); }

/* ---------- Stories (core/quote) ---------- */
.stories { display: grid; gap: var(--space-6); }
.wp-block-quote.story { margin: 0; border: 0; padding: var(--space-6); }
.wp-block-quote.story::before {
	content: "“"; display: block; height: 0.55em; margin-bottom: var(--space-2);
	font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--orange);
}
.wp-block-quote.story p { margin-top: 0; }
.wp-block-quote.story--featured p { font-family: var(--font-display); font-size: var(--display-h3); font-weight: 500; line-height: 1.3; }
.wp-block-quote.story cite { display: block; margin-top: var(--space-4); font-size: var(--text-sm); font-style: normal; }
.wp-block-quote.story cite strong { display: block; font-size: var(--text-base); }
.wp-block-quote.story--single { max-width: 52rem; margin-inline: auto; padding: var(--space-12); }

/* ---------- FAQ (core/details on Home, Yoast FAQ on the FAQ page) ---------- */
.faq-group + .faq-group { margin-top: var(--space-12); }
.faq-group h2 { font-size: var(--display-h3); line-height: var(--lh-heading); margin-bottom: var(--space-4); }

.faq .wp-block-details { border-bottom: 1px solid var(--line); }
.faq .wp-block-details:first-child { border-top: 1px solid var(--line); }
.faq .wp-block-details summary,
.schema-faq-question {
	display: flex; justify-content: space-between; gap: var(--space-4);
	padding-block: var(--space-4); cursor: pointer; list-style: none;
	font-weight: 600; font-size: var(--text-lead); line-height: 1.4;
}
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after,
.has-faq-accordion .schema-faq-toggle::after { content: "+"; flex: none; font-family: var(--font-display); font-size: 1.75rem; line-height: 1; font-weight: 500; }
.faq .wp-block-details[open] summary::after,
.has-faq-accordion .schema-faq-toggle[aria-expanded="true"]::after { content: "−"; }
.faq .wp-block-details > :not(summary) { padding-bottom: var(--space-6); max-width: var(--measure); }

.schema-faq .schema-faq-section { border-bottom: 1px solid var(--line); }
.schema-faq .schema-faq-section:first-child { border-top: 1px solid var(--line); }
.schema-faq-question { display: block; cursor: auto; }
.schema-faq-answer { margin: 0; padding-bottom: var(--space-6); max-width: var(--measure); }
.schema-faq-answer[hidden] { display: none; }
.has-faq-accordion .schema-faq-question { padding: 0; }
.schema-faq-toggle {
	display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4);
	width: 100%; padding: var(--space-4) 0; border: 0; background: none; color: inherit;
	font: inherit; text-align: left; cursor: pointer;
}

/* ---------- Contact form (.ap-form wraps whichever form plugin is used) ---------- */
.form-card { display: grid; gap: var(--space-6); }
.form-card > h2 { font-size: var(--display-h2); line-height: var(--lh-heading); }
.ap-form form { display: grid; gap: var(--space-6); }
.ap-form label, .ap-form legend { font-weight: 600; font-size: var(--text-sm); }
.ap-form input[type="text"], .ap-form input[type="email"], .ap-form input[type="url"],
.ap-form input[type="tel"], .ap-form textarea, .ap-form select {
	width: 100%; padding: var(--space-3) var(--space-4);
	border: var(--card-border); border-radius: var(--field-radius);
	background: var(--white); color: var(--green); font: inherit; line-height: 1.65;
	box-shadow: none;
}
.ap-form textarea { min-height: 8rem; resize: vertical; }
.ap-form input:focus-visible, .ap-form textarea:focus-visible, .ap-form select:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ap-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ap-form button, .ap-form input[type="submit"] {
	display: inline-block; padding: var(--space-3) var(--space-8); border: 0; border-radius: 0;
	background: var(--orange); color: var(--white);
	font-family: var(--font-text); font-weight: 600; font-size: var(--text-lead); line-height: 1.4; cursor: pointer;
}
.ap-form button[data-action="back"] { background: var(--white); color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
/* Pill radios */
.ap-form input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ap-form input[type="radio"] + * ,
.ap-form label:has(> input[type="radio"]) > span {
	display: inline-block; padding: var(--space-2) var(--space-4);
	border: var(--card-border); border-radius: 999px; background: var(--white);
	font-weight: 400; font-size: var(--text-base); cursor: pointer;
}
.ap-form input[type="radio"]:checked + * ,
.ap-form label:has(> input[type="radio"]:checked) > span { background: var(--green); border-color: var(--green); color: var(--white); }
.ap-form input[type="radio"]:focus-visible + * ,
.ap-form label:has(> input[type="radio"]:focus-visible) > span { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Short fields sit two to a row (matched by the form field names) */
@media (min-width: 641px) {
	.ap-form .smf-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ap-form .smf-form > * { grid-column: 1 / -1; }
	.ap-form .smf-form > :has([name="your-name"], [name="your-email"], [name="timing"], [name="based"]) { grid-column: auto; }
}

/* Snow Monkey Forms: only layout glue here; looks come from the .ap-form rules above */
.ap-form .smf-form { display: grid; gap: var(--space-6); }
.ap-form .smf-form--two-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-6); }
.ap-form .smf-item, .ap-form .smf-item__col { display: block; margin: 0; padding: 0; width: auto; max-width: none; flex: none; }
.ap-form .smf-item__label { margin-bottom: var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.ap-form .smf-item__description, .ap-form .smf-control-description { margin-top: var(--space-2); font-size: var(--text-sm); }
.ap-form .smf-text-control, .ap-form .smf-textarea-control { display: block; width: 100%; }
.ap-form .smf-radio-buttons-control__control { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ap-form .smf-label { position: relative; margin: 0; }
.ap-form .smf-label > label { display: inline-flex; margin: 0; }
.ap-form .smf-radio-button-control { display: inline-flex; margin: 0; }
.ap-form .smf-radio-button-control__control { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ap-form .smf-radio-button-control__label {
	display: inline-block; padding: var(--space-2) var(--space-4); margin: 0;
	border: var(--card-border); border-radius: 999px; background: var(--white);
	font-weight: 600; font-size: var(--text-sm); cursor: pointer;
}
.ap-form .smf-radio-button-control__control:checked + .smf-radio-button-control__label { background: var(--green); border-color: var(--green); color: var(--white); }
.ap-form .smf-radio-button-control__control:focus-visible + .smf-radio-button-control__label { outline: 2px solid var(--orange); outline-offset: 2px; }
.ap-form .smf-action { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; }
.ap-form .smf-action .smf-button-control__control { padding: var(--space-3) var(--space-8); border: 0; border-radius: 0; background: var(--orange); color: var(--white); font-weight: 600; font-size: var(--text-lead); line-height: 1.4; box-shadow: none; }
.ap-form .smf-action .smf-button-control__control[data-action="back"] { background: var(--white); color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.ap-form .smf-error-messages { margin-top: var(--space-2); color: var(--wp--custom--error); font-size: var(--text-sm); font-weight: 600; }
.ap-form .smf-system-error-content, .ap-form .smf-complete-content { display: grid; gap: var(--space-4); }
.form__note, .form-note { font-size: var(--text-sm); }
.ap-form .recaptcha-note { margin-top: var(--space-4); }
.recaptcha-note a { text-underline-offset: 0.2em; }

/* ---------- Services page ---------- */
.features { counter-reset: feature; border-top: 1px solid var(--line); }
.feature {
	counter-increment: feature;
	display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-8); align-items: baseline;
	padding-block: var(--space-12); border-bottom: 1px solid var(--line);
}
.feature::before {
	content: counter(feature, decimal-leading-zero);
	font-family: var(--font-display); font-style: italic; font-weight: 500;
	font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: 1; color: var(--orange);
}
.feature > * { max-width: var(--measure); }
.feature h3 { font-size: var(--display-h2); line-height: var(--lh-heading); }
.feature p { margin-top: var(--space-4); }
.feature p.tag { display: inline-block; padding: var(--space-1) var(--space-4); border: var(--card-border); border-radius: 999px; font-size: var(--text-sm); }

.report { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.report__photos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: var(--space-4); }
.report__photos > .wp-block-image { margin: 0; display: flex; flex-direction: column; }
.report__photos > :first-child { grid-row: span 2; }
.report__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--card-radius); aspect-ratio: 4 / 3; }
.report__photos > :first-child img { aspect-ratio: auto; flex: 1; }
.report__photos figcaption { margin: var(--space-2) 0 0; font-size: var(--text-sm); text-align: left; }

.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.checklist li { display: flex; gap: var(--space-3); }
.checklist li::before { content: "✓"; font-weight: 600; }
.checklist--no li::before { content: "✕"; }
.checklist li em { display: block; font-style: normal; font-size: var(--text-sm); }
.checklist li:has(em) { flex-wrap: wrap; column-gap: var(--space-3); }
.checklist li:has(em) em { flex-basis: 100%; padding-left: calc(1ch + var(--space-3) + 0.15em); margin-top: calc(var(--space-3) * -1); }

.price-table { overflow-x: auto; margin: 0; border-radius: var(--card-radius); background: var(--card-bg); }
.price-table table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.price-table :is(th, td) { padding: var(--space-4) var(--space-6); text-align: left; border: 0; border-bottom: 1px solid var(--line); }
.price-table thead { border: 0; }
.price-table tr:last-child :is(th, td) { border-bottom: 0; }
.price-table thead th { font-size: var(--text-sm); }
.price-table tbody th { font-family: var(--font-display); font-size: var(--display-h3); font-weight: 600; line-height: var(--lh-heading); }
.price-table tbody td:last-child { white-space: nowrap; font-weight: 600; }

/* Pricing: one package */
.plan { max-width: 40rem; margin-inline: auto; padding: var(--space-12) var(--space-8); }
.plan h3 { font-size: var(--display-h2); }
.plan .plan__tagline { margin-top: var(--space-2); }
.plan .plan__price { margin-top: var(--space-6); padding-block: var(--space-4); border-block: 1px solid var(--line); }
.plan__amount { font-family: var(--font-display); font-weight: 600; font-size: var(--display-hero); line-height: 1; }
.plan__unit { font-weight: 600; }
.plan .plan__label { margin-top: var(--space-6); font-family: var(--font-text); font-size: var(--text-base); font-weight: 600; line-height: var(--wp--custom--line-height--body); }
.plan .plan__note { margin-top: var(--space-6); font-size: var(--text-sm); }
.plan .plan__cta { margin-top: var(--space-6); }
.plan .plan__cta .wp-block-button { flex: 1; }
.plan .plan__cta .wp-block-button__link { display: block; width: 100%; text-align: center; }

/* ---------- About page ---------- */
.profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-12); align-items: center; }
.profile__photo { margin: 0; }
.profile__photo img { aspect-ratio: 1; width: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
.profile h3 { font-size: var(--display-h3); line-height: var(--lh-heading); }
.profile p { margin-top: var(--space-4); }
.profile .profile__role { margin-top: var(--space-1); font-weight: 600; }
.timeline { display: grid; gap: var(--space-8); border-left: 1px solid var(--line); padding-left: var(--space-8); }
.timeline h3 { font-size: var(--display-h3); line-height: var(--lh-heading); }
.timeline p { margin-top: var(--space-2); }
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-6); }
.logos > .wp-block-image { margin: 0; }
.logos img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: var(--field-radius); }

/* Key/value lists. About "official stuff" uses core/table; Legal disclosure uses
   rows of groups (.info-list__row) so each answer can hold paragraphs and lists. */
.info-list { margin: 0; border-radius: var(--card-shape); background: var(--card-bg); overflow: hidden; }
.info-list table { width: 100%; border-collapse: collapse; }
.info-list :is(th, td) { padding: var(--space-4) var(--space-6); text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.info-list th { width: 1%; white-space: nowrap; font-weight: 600; }
.info-list tr:last-child :is(th, td) { border-bottom: 0; }
.info-list__row { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.info-list__row:last-child { border-bottom: 0; }
.info-list__term, .info-list__desc { padding: var(--space-4) var(--space-6); }
.info-list__term { font-weight: 600; }
.info-list__desc > * + * { margin-top: var(--space-2); }
.info-list__desc ul { margin-top: var(--space-3); padding-left: 1.25em; }
.legal-table { margin-top: var(--space-6); }
@media (max-width: 640px) {
	.info-list :is(table, tbody, tr, th, td) { display: block; width: auto; }
	.info-list th { padding-bottom: 0; border-bottom: 0; white-space: normal; }
	.info-list td { padding-top: var(--space-1); }
	.info-list__row { grid-template-columns: minmax(0, 1fr); }
	.info-list__term { padding-bottom: 0; }
	.info-list__desc { padding-top: var(--space-1); }
}

/* ---------- Media (rendered by the akiya/media-list block) ---------- */
.post { display: flex; flex-direction: column; text-decoration: none; }
.post img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: var(--peach); }
.post__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post__cat { font-size: var(--text-sm); font-weight: 600; }
.post h3 { font-size: var(--display-h3); line-height: var(--lh-heading); }
.post p { margin-top: 0; }
.post__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: var(--text-sm); }
.post__link { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; font-weight: 600; }
.ext-icon { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; background: none; transition: transform .2s ease; }
.post:hover .ext-icon, .post:focus-visible .ext-icon { transform: translate(2px, -2px); }
.post--featured { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-bottom: var(--space-16); }
.post--featured img {
	height: 100%; aspect-ratio: auto; min-height: 20rem;
	/* The text sets the card's height; the image just fills it. Without this, WordPress's
	   placeholder size for lazy images (sizes="auto": 3000×1500) stretches the card. */
	contain: size; contain-intrinsic-size: 0 20rem;
}
.post--featured .post__body { padding: var(--space-12); justify-content: center; }
.post--featured h3 { font-size: var(--display-h2); }
.post__quote { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--orange); font-style: italic; }
.post--featured .post__quote { font-size: var(--text-lead); line-height: var(--lh-lead); }
.post--text .post__body { padding: var(--space-8) var(--space-6); min-height: 15rem; }
.post--text .post__meta { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.post:hover h3 { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.contact-alt { display: grid; gap: var(--space-4); }
.contact-alt > h2 { font-size: var(--display-h3); line-height: var(--lh-heading); }
.contact-alt h3 { font-size: 1.5rem; }

/* ---------- Legal pages ---------- */
.draft-note { margin-bottom: var(--space-12); padding: var(--space-4) var(--space-6); border-left: 4px solid var(--orange); border-radius: 0 var(--card-radius) var(--card-radius) 0; background: var(--peach-light); font-size: var(--text-sm); }
mark.todo, .todo { background: var(--wp--custom--highlight); color: inherit; padding: 0 .2em; border-radius: 3px; }
.legal-doc { max-width: 68ch; }
.legal-doc__updated { font-size: var(--text-sm); }
.legal-doc h2 { margin-top: var(--space-12); font-size: var(--display-h3); line-height: var(--lh-heading); }
.legal-doc h3 { margin-top: var(--space-6); font-family: var(--font-text); font-size: var(--text-lead); line-height: 1.4; }
.legal-doc > p, .legal-doc > ul, .legal-doc > ol { margin-top: var(--space-4); }
.legal-doc > :first-child { margin-top: 0; }
.legal-doc ul, .legal-doc ol { padding-left: 1.25em; }
.legal-doc li + li { margin-top: var(--space-2); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: var(--display-h2); line-height: var(--lh-heading); max-width: 24ch; margin-inline: auto; }
.cta-band p { margin: var(--space-4) auto 0; max-width: 52ch; }
.cta-band .wp-block-buttons { margin-top: var(--space-8); justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--green); color: var(--cream); padding-block: var(--space-16) var(--space-8); }
.site-footer > .container { position: relative; }
.site-footer::before { /* the hero's ribbon, mirrored, bottom left */
	content: ""; position: absolute; left: 0; bottom: 0;
	width: min(40%, 480px); aspect-ratio: 560 / 330; transform: scaleX(-1);
	background: var(--cream); opacity: .14;
	-webkit-mask: var(--deco-hero-curve) no-repeat 0 0 / 100% 100%;
	mask: var(--deco-hero-curve) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}
.site-footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-8); }
.site-footer h2 { font-family: var(--font-text); font-size: var(--text-sm); font-weight: 600; line-height: 1.65; margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--cream); }
.site-footer__brand p { margin-top: var(--space-4); max-width: 30ch; }
.site-footer__brand img { height: 48px; width: auto; background: none; }
.site-footer__copy { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgb(251 244 227 / .3); font-size: var(--text-sm); }

/* Let grid tracks shrink below image intrinsic widths */
.akiya__grid > *, .split > *, .feature > *, .report > *, .profile > *, .contact-grid > *,
.post--featured > *, .report__photos > *, .how > * { min-width: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.akiya__grid, .split, .report, .profile, .contact-grid, .post--featured { grid-template-columns: minmax(0, 1fr); }
	.akiya__illust img { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; margin-inline: auto; }
	.how { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
	.how__photo img { aspect-ratio: 3 / 2; object-position: 50% 82%; }
	.profile__photo img { max-width: 240px; }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.wp-block-cover.hero { min-height: 600px; }
	.process > * { grid-template-columns: minmax(0, 1fr); }
	.process > *::before { grid-row: auto; }
	.process > * > * { grid-column: 1; }
	.feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-8); }
	.post--featured .post__body { padding: var(--space-6); }
}

/* ---------- Editor only ---------- */
.editor-styles-wrapper .is-style-boat { animation: none; }
.editor-styles-wrapper .wp-block-cover.hero { min-height: 600px; }