/*
 * The widgets, at the original's measurements.
 *
 * Tailwind spacing is quarter-rem: gap-3 is 0.75rem, px-6 is 1.5rem, py-2.5 is 0.625rem.
 * Where a value below looks arbitrary it is because the source wrote it arbitrarily —
 * w-[24px], h-[38px], top-[150%] — and those are reproduced rather than rounded.
 *
 * Colours come from the token ladder so a buyer recolouring the kit recolours these too;
 * the hex beside each var() is the value the source used, kept as the fallback.
 */

/* ── Section label ───────────────────────────────────────────────────────────
 * Source: inline-flex items-center gap-3, rules w-8 h-[1px], uppercase, tracked.
 */

.hedera-label {
	align-items: center;
	color: var(--hedera-sage-200, #aee2c2);
	display: flex;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 500;
	gap: 0.75rem;
	letter-spacing: var(--hedera-tracking-label, 0.3em);
	line-height: 1.3333;
	text-transform: uppercase;
}

.hedera-label__rule {
	background: currentColor;
	flex: 0 0 auto;
	height: 1px;
	opacity: 0.6;
	width: 32px;
}

/*
 * The hero hides its rules on a phone so a long line does not push them off the screen.
 * Tailwind's sm breakpoint is 640px.
 */
@media (max-width: 639px) {
	.hedera-label--rules-desktop .hedera-label__rule {
		display: none;
	}
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
 * Seven styles, none interchangeable. See class-hedera-button.php for why they all live
 * in one widget. Every measurement is the source's: px-10 is 2.5rem, py-5 is 1.25rem,
 * tracking-[0.2em] is what it says.
 */

.hedera-button-wrap {
	align-items: center;
	display: flex;
	gap: 1rem; /* gap-4, the space between the manifesto pill and its arrow disc */
}

.hedera-button {
	align-items: center;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--hedera-font-body);
	justify-content: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The rolling label: two copies in a window one line tall. */
.hedera-button__roll {
	display: block;
	font-weight: 700;
	letter-spacing: 0.2em;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
}

.hedera-button__roll-a,
.hedera-button__roll-b {
	display: block;
	transition: transform 500ms var(--hedera-ease-expo, cubic-bezier(0.19, 1, 0.22, 1)),
		top 500ms var(--hedera-ease-expo, cubic-bezier(0.19, 1, 0.22, 1));
}

.hedera-button__roll-b {
	left: 0;
	position: absolute;
	top: 150%;
}

.hedera-button:hover .hedera-button__roll-a {
	transform: translateY(-150%);
}

.hedera-button:hover .hedera-button__roll-b {
	top: 0;
}

.hedera-button__arrow {
	flex: 0 0 auto;
	height: 1rem;
	transition: transform 300ms ease;
	width: 1rem;
}

/* White pill — the closing invitation.
 * bg-white text-[#04170f] px-10 py-5 (sm: px-12 py-6) rounded-full
 * shadow-[0_30px_60px_rgba(0,0,0,0.5)], hover bg sage, 500ms; label h-5 (sm: h-6),
 * text-xs (sm: text-sm). With an arrow: gap-4, arrow translate-x-1 on hover.
 */
.hedera-button--rolling {
	background: var(--hedera-white, #fff);
	border-radius: 9999px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
	color: var(--hedera-forest-950, #04170f);
	gap: 1rem;
	padding: 1.25rem 2.5rem;
	transition: background-color 500ms ease;
}

.hedera-button--rolling .hedera-button__roll {
	font-size: var(--hedera-text-xs, 0.75rem);
	height: 1.25rem;
	line-height: 1.25rem;
}

@media (min-width: 640px) {
	.hedera-button--rolling {
		padding: 1.5rem 3rem;
	}

	.hedera-button--rolling .hedera-button__roll {
		font-size: var(--hedera-text-sm, 0.875rem);
		height: 1.5rem;
		line-height: 1.5rem;
	}
}

.hedera-button--rolling:hover {
	background: var(--hedera-sage-200, #aee2c2);
}

.hedera-button--rolling:hover .hedera-button__arrow,
.hedera-button--outline:hover .hedera-button__arrow {
	transform: translateX(0.25rem);
}

/* Forest pill with a sage dot — the services page.
 * bg-[#0a3e2c] text-white px-10 py-5 rounded-full shadow-2xl gap-6 hover:bg-black 500ms;
 * label h-4 text-[10px]; dot w-2 h-2 pulsing on hover.
 */
.hedera-button--solid {
	background: var(--hedera-forest-800, #0a3e2c);
	border-radius: 9999px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	color: var(--hedera-white, #fff);
	gap: 1.5rem;
	padding: 1.25rem 2.5rem;
	transition: background-color 500ms ease;
}

.hedera-button--solid:hover {
	background: #000;
}

.hedera-button--solid .hedera-button__roll,
.hedera-button--outline .hedera-button__roll {
	font-size: var(--hedera-text-label, 0.625rem);
	height: 1rem;
	line-height: 1rem;
}

.hedera-button__dot {
	background: var(--hedera-sage-200, #aee2c2);
	border-radius: 9999px;
	display: block;
	height: 0.5rem;
	width: 0.5rem;
}

.hedera-button--solid:hover .hedera-button__dot {
	animation: hedera-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes hedera-pulse {
	50% {
		opacity: 0.5;
	}
}

/* Outlined pill with rolling text and an arrow — the story page.
 * border-white/30 px-10 py-5 rounded-full text-white gap-6, hover white on forest-950, 500ms.
 * On a light background the same shape draws in forest.
 */
.hedera-button--outline {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 20%, transparent);
	border-radius: 9999px;
	color: var(--hedera-forest-800, #0a3e2c);
	gap: 1.5rem;
	padding: 1.25rem 2.5rem;
	transition: background-color 500ms ease, color 500ms ease, border-color 500ms ease;
}

.hedera-button--outline:hover {
	background: var(--hedera-forest-800, #0a3e2c);
	color: var(--hedera-white, #fff);
}

.hedera-button--outline.hedera-button--dark {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--hedera-white, #fff);
}

.hedera-button--outline.hedera-button--dark:hover {
	background: var(--hedera-white, #fff);
	color: var(--hedera-forest-950, #04170f);
}

/* Underlined with a sliding arrow — beside a service.
 * gap-4 border-b border-[#0a3e2c]/30 pb-2, text-[10px] font-bold tracking-[0.2em],
 * arrow translate-x-2, 300ms
 */
.hedera-button--line {
	border-bottom: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 30%, transparent);
	color: var(--hedera-forest-800, #0a3e2c);
	font-size: var(--hedera-text-label, 0.625rem);
	font-weight: 700;
	gap: 1rem;
	letter-spacing: 0.2em;
	padding: 0 0 0.5rem;
	transition: border-color 300ms ease;
}

.hedera-button--line:hover {
	border-bottom-color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-button--line:hover .hedera-button__arrow {
	transform: translateX(0.5rem);
}

.hedera-button--line.hedera-button--dark {
	border-bottom-color: rgba(255, 255, 255, 0.3);
	color: var(--hedera-white, #fff);
}

.hedera-button--line.hedera-button--dark:hover {
	border-bottom-color: var(--hedera-white, #fff);
}

/* Outlined pill with an arrow disc — under the manifesto.
 * px-6 py-3 border border-[#0a3e2c]/20 rounded-full text-xs font-bold tracking-[0.2em]
 * disc: w-10 h-10 border-[#0a3e2c]/10, both fill on the same hover, 500ms
 */
.hedera-button--disc {
	background: transparent;
	color: var(--hedera-forest-800, #0a3e2c);
	gap: 1rem;
	padding: 0;
}

.hedera-button--disc .hedera-button__text {
	border: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 20%, transparent);
	border-radius: 9999px;
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.2em;
	padding: 0.75rem 1.5rem;
	transition: all 500ms ease;
}

.hedera-button__disc {
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 10%, transparent);
	border-radius: 9999px;
	display: inline-flex;
	flex: 0 0 auto;
	height: 2.5rem;
	justify-content: center;
	transition: all 500ms ease;
	width: 2.5rem;
}

.hedera-button--disc:hover .hedera-button__text,
.hedera-button--disc:hover .hedera-button__disc {
	background: var(--hedera-forest-800, #0a3e2c);
	color: var(--hedera-white, #fff);
}

.hedera-button--disc:hover .hedera-button__arrow {
	transform: translateX(0.25rem);
}

.hedera-button--disc.hedera-button--dark {
	color: var(--hedera-white, #fff);
}

.hedera-button--disc.hedera-button--dark .hedera-button__text,
.hedera-button--disc.hedera-button--dark .hedera-button__disc {
	border-color: rgba(255, 255, 255, 0.2);
}

/* Small sage pill — directions.
 * bg-[#aee2c2] text-[#04170f] px-6 py-3 rounded-full text-xs font-bold tracking-widest
 * gap-3 hover:bg-white; arrow w-3.5 h-3.5
 */
.hedera-button--sage {
	background: var(--hedera-sage-200, #aee2c2);
	border-radius: 9999px;
	color: var(--hedera-forest-950, #04170f);
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 700;
	gap: 0.75rem;
	letter-spacing: 0.1em;
	padding: 0.75rem 1.5rem;
	transition: background-color 300ms ease;
}

.hedera-button--sage:hover {
	background: var(--hedera-white, #fff);
}

.hedera-button--sage .hedera-button__arrow {
	height: 0.875rem;
	width: 0.875rem;
}

/* Outlined pill that fills from below — load more.
 * px-12 py-5 rounded-full border-[#0a3e2c]/20 hover:border-[#04170f] 500ms;
 * a forest-950 sheet slides up behind text-xs font-bold tracking-[0.3em].
 */
.hedera-button--reveal {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 20%, transparent);
	border-radius: 9999px;
	color: var(--hedera-forest-800, #0a3e2c);
	isolation: isolate;
	overflow: hidden;
	padding: 1.25rem 3rem;
	position: relative;
	transition: border-color 500ms ease, color 500ms ease;
}

.hedera-button--reveal::before {
	background: var(--hedera-forest-950, #04170f);
	content: '';
	inset: 0;
	position: absolute;
	transform: translateY(100%);
	transition: transform 700ms cubic-bezier(0.25, 1, 0.5, 1);
	z-index: -1;
}

.hedera-button--reveal:hover {
	border-color: var(--hedera-forest-950, #04170f);
	color: var(--hedera-white, #fff);
}

.hedera-button--reveal:hover::before {
	transform: translateY(0);
}

.hedera-button--reveal .hedera-button__roll {
	font-size: var(--hedera-text-xs, 0.75rem);
	height: 1rem;
	letter-spacing: 0.3em;
	line-height: 1rem;
}

.hedera-button--reveal.hedera-button--dark {
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--hedera-white, #fff);
}

.hedera-button--reveal[disabled] {
	cursor: default;
	opacity: 0.5;
}

/* ── Scroll cue ──────────────────────────────────────────────────────────────
 * Source: mouse w-[24px] h-[38px] border-white/30 pt-2.5 bg-black/10 backdrop-blur-sm,
 * wheel w-[3px] h-[6px] bg-white/80 animate-bounce, label text-[9px] tracking-[0.3em].
 */

.hedera-cue {
	--hedera-cue-colour: #fff;
	align-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0;
}

.hedera-cue__mouse {
	align-items: flex-start;
	backdrop-filter: blur(4px);
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid color-mix(in srgb, var(--hedera-cue-colour) 30%, transparent);
	border-radius: 9999px;
	display: flex;
	height: 38px;
	justify-content: center;
	padding-top: 0.625rem;
	transition: border-color 300ms ease;
	width: 24px;
}

.hedera-cue:hover .hedera-cue__mouse {
	border-color: color-mix(in srgb, var(--hedera-cue-colour) 60%, transparent);
}

.hedera-cue__wheel {
	animation: hedera-bounce 1s infinite;
	background: color-mix(in srgb, var(--hedera-cue-colour) 80%, transparent);
	border-radius: 9999px;
	display: block;
	height: 6px;
	width: 3px;
}

.hedera-cue__text {
	color: color-mix(in srgb, var(--hedera-cue-colour) 50%, transparent);
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-micro, 0.5625rem);
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	transition: color 300ms ease;
}

.hedera-cue:hover .hedera-cue__text {
	color: color-mix(in srgb, var(--hedera-cue-colour) 80%, transparent);
}

/* Tailwind's own bounce, which is what the source's animate-bounce resolves to. */
@keyframes hedera-bounce {
	0%,
	100% {
		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
		transform: translateY(-25%);
	}

	50% {
		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
		transform: none;
	}
}

/* ── Language switcher ───────────────────────────────────────────────────────
 * Source: text-[12px], the current language solid and bold, the rest at 60%.
 */

.hedera-langs {
	--hedera-lang-colour: currentColor;
	--hedera-lang-dim: 0.6;
	align-items: center;
	display: inline-flex;
	font-family: var(--hedera-font-body);
	font-size: 12px;
	gap: 0.5rem;
}

.hedera-langs__item {
	color: var(--hedera-lang-colour);
	opacity: var(--hedera-lang-dim);
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 300ms ease;
}

.hedera-langs__item:hover,
.hedera-langs__item.is-current {
	opacity: 1;
}

.hedera-langs__item.is-current {
	font-weight: 700;
}

.hedera-langs__sep {
	opacity: calc(var(--hedera-lang-dim) * 0.6);
}

/* ── Two-tone heading ────────────────────────────────────────────────────────
 * Source sizes, largest breakpoint first. Tailwind's steps: text-3xl 30px, 4xl 36px,
 * 5xl 48px, 6xl 60px, 7xl 72px, 8xl 96px, and the invitation's own text-[5rem].
 * tracking-tight is -0.025em. Weight 300 is what the source asks for and, in Georgia,
 * what 400 answers with — see design/tokens.json.
 */

.hedera-heading {
	--hedera-accent: var(--hedera-sage-200, #aee2c2);
	font-family: var(--hedera-font-heading);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0;
}

/* The invitation: text-4xl sm:text-6xl lg:text-[5rem] leading-[1.1] */
.hedera-heading--display {
	font-size: 5rem;
	line-height: 1.1;
}

/* A project's title: text-4xl md:text-8xl */
.hedera-heading--giant {
	font-size: 6rem;
	line-height: 1.05;
}

/* A page header: text-4xl md:text-7xl */
.hedera-heading--page {
	font-size: 4.5rem;
	line-height: 1.1;
}

/* The home hero: clamp(2.25rem, 5vw + 1rem, 4.5rem), leading 1.15 → 1.1 from md */
.hedera-heading--hero {
	font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem);
	line-height: 1.1;
}

/* A section: text-3xl sm:text-4xl lg:text-5xl leading-[1.2] */
.hedera-heading--section {
	font-size: 3rem;
	line-height: 1.2;
}

/* Under a section: text-2xl sm:text-4xl leading-tight, and the source sets these at 400 */
.hedera-heading--sub {
	font-size: 2.25rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.25;
}

.hedera-heading--small {
	font-size: 1.875rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
}

@media (max-width: 1023px) {
	.hedera-heading--display {
		font-size: 3.75rem;
	}

	.hedera-heading--giant,
	.hedera-heading--page {
		font-size: 3.75rem;
	}

	.hedera-heading--section {
		font-size: 2.25rem;
	}
}

@media (max-width: 639px) {
	.hedera-heading--display,
	.hedera-heading--giant,
	.hedera-heading--page {
		font-size: 2.25rem;
	}

	.hedera-heading--hero {
		line-height: 1.15;
	}

	.hedera-heading--section {
		font-size: 1.875rem;
	}

	.hedera-heading--sub {
		font-size: 1.5rem;
	}

	.hedera-heading--small {
		font-size: 1.5rem;
	}
}

/* drop-shadow-lg as the live site renders it: 0 4px 4px at 15% */
.hedera-heading--shadow {
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}

/* The accent, five ways */

.hedera-heading--accent-colour .hedera-heading__accent {
	color: var(--hedera-accent);
}

.hedera-heading--accent-italic .hedera-heading__accent {
	font-style: italic;
	font-weight: 400;
}

.hedera-heading--accent-italic-colour .hedera-heading__accent {
	color: var(--hedera-accent);
	font-style: italic;
	font-weight: 400;
}

.hedera-heading--accent-bold-italic .hedera-heading__accent {
	font-style: italic;
	font-weight: 600;
}

/*
 * The hero's phrase: text-transparent bg-clip-text bg-gradient-to-r from-[#aee2c2]
 * via-white to-[#68c99b], with a 3px line of light beneath it that grows from nothing to
 * 110% of the phrase's width over a second, seven tenths of a second after the page opens.
 */
.hedera-heading--accent-gradient .hedera-heading__accent {
	background-image: linear-gradient(to right, var(--hedera-accent) 0%, #fff 50%, var(--hedera-sage-400, #68c99b) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	position: relative;
}

.hedera-heading--accent-gradient .hedera-heading__accent::after {
	animation: hedera-underline 1s var(--hedera-ease-expo, cubic-bezier(0.19, 1, 0.22, 1)) 700ms both;
	background: linear-gradient(to right, transparent, var(--hedera-accent), transparent);
	border-radius: 9999px;
	bottom: -0.5rem;
	content: '';
	height: 3px;
	left: 50%;
	max-width: 100%;
	position: absolute;
	transform: translateX(-50%);
	width: 110%;
}

@media (max-width: 639px) {
	.hedera-heading--accent-gradient .hedera-heading__accent::after {
		bottom: -0.25rem;
		height: 2px;
	}
}

@keyframes hedera-underline {
	from {
		width: 0;
	}

	to {
		width: 110%;
	}
}

/* The film's second line: lg:text-5xl against a first line at lg:text-4xl */
.hedera-heading--accent-larger .hedera-heading__accent {
	display: inline-block;
	font-size: 1.3333em;
	line-height: 1.25;
	margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.hedera-cue__wheel,
	.hedera-heading--accent-gradient .hedera-heading__accent::after {
		animation: none;
	}
}

/*
 * A note on the selectors below.
 *
 * Every rule that sizes an image is written against its parent as well as itself —
 * `.hedera-project__media .hedera-project__image` rather than the class alone. Elementor's
 * frontend stylesheet carries `.elementor img { height: auto }`, which outranks a single
 * class and silently undid every `height: 100%` here. It showed up as cards whose photograph
 * overflowed its own box on the home page while the same widget was correct on the archive,
 * where it renders outside Elementor's wrapper.
 */

/* ── Project grid ────────────────────────────────────────────────────────────
 * Source: md:grid-cols-2 gap-x-8 lg:gap-x-12, gap-y-12 lg:gap-y-16 on the home page and
 * gap-y-16 lg:gap-y-24 on the portfolio; every second card md:mt-16 lg:mt-24. The card:
 * aspect-video rounded-2xl over #04170f with a hairline of neutral-100, image at opacity
 * 90 rising to 100 and scaling 1.05 over three full seconds, a veil at forest-950/10
 * clearing over 700ms, an italic serif number, a hairline, the work-type pill on sage/20,
 * the title in Rubik light, the location tracked and small, and an arrow that leaves
 * diagonally on hover.
 */

.hedera-projects-wrap {
	width: 100%;
}

.hedera-projects {
	column-gap: 3rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 4rem;
}

.hedera-projects--full {
	row-gap: 6rem;
}

@media (max-width: 1023px) {
	.hedera-projects {
		column-gap: 2rem;
		row-gap: 3rem;
	}

	.hedera-projects--full {
		row-gap: 4rem;
	}
}

@media (max-width: 767px) {
	.hedera-projects {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Staggering a single column would just add a gap, so it starts at the first breakpoint
   where there is a second column to stagger against. */
@media (min-width: 768px) {
	.hedera-projects--staggered .hedera-project:nth-child(even) {
		margin-top: 4rem;
	}
}

@media (min-width: 1024px) {
	.hedera-projects--staggered .hedera-project:nth-child(even) {
		margin-top: 6rem;
	}
}

.hedera-project {
	--hedera-project-meta: var(--hedera-forest-800, #0a3e2c);
	color: inherit;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

/*
 * The entrance is gated behind a class the script adds, and that is not a detail.
 * The animation starts the card at opacity 0; if it never runs — a stylesheet that failed
 * to load, an animation the browser refused, a bug of ours — the whole portfolio would be
 * permanently invisible with nothing on screen to explain why. Gating it means the worst
 * case is a grid that appears without ceremony.
 */
.hedera-projects.is-ready .hedera-project {
	animation: hedera-fade-in-up 0.8s ease-out both;
	animation-delay: var(--hedera-card-delay, 0ms);
}

@keyframes hedera-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hedera-project__media {
	aspect-ratio: 16 / 9;
	background: var(--hedera-forest-950, #04170f);
	border: 1px solid #f5f5f5;
	border-radius: 1rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	display: block;
	overflow: hidden;
	position: relative;
}

@media (max-width: 639px) {
	.hedera-project__media {
		aspect-ratio: 4 / 3;
	}
}

.hedera-project__media .hedera-project__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0.9;
	position: absolute;
	transition: transform 3s ease-out, opacity 3s ease-out;
	width: 100%;
}

.hedera-project:hover .hedera-project__image {
	opacity: 1;
	transform: scale(1.05);
}

.hedera-project__veil {
	background: color-mix(in srgb, var(--hedera-forest-950, #04170f) 10%, transparent);
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: background-color 700ms ease;
}

.hedera-project:hover .hedera-project__veil {
	background: transparent;
}

.hedera-project__body {
	display: block;
	margin-top: 1.5rem;
}

.hedera-project__rule {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.hedera-projects--full .hedera-project__rule {
	margin-bottom: 1rem;
}

.hedera-project__no {
	color: var(--hedera-project-meta);
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-xl, 1.25rem);
	font-style: italic;
	line-height: 1;
}

.hedera-project__hair {
	background: color-mix(in srgb, var(--hedera-project-meta) 10%, transparent);
	flex: 1;
	height: 1px;
}

.hedera-project__type {
	background: color-mix(in srgb, var(--hedera-sage-200, #aee2c2) 20%, transparent);
	border-radius: 0.125rem;
	color: color-mix(in srgb, var(--hedera-project-meta) 60%, transparent);
	font-size: var(--hedera-text-label, 0.625rem);
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	text-transform: uppercase;
}

.hedera-projects--full .hedera-project__type {
	border-radius: 9999px;
	font-weight: 700;
	padding: 0.375rem 0.75rem;
}

.hedera-project__foot {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.hedera-project__text {
	display: block;
	transition: transform 500ms ease;
}

.hedera-project:hover .hedera-project__text {
	transform: translateX(0.25rem);
}

.hedera-project__title {
	color: var(--hedera-forest-950, #04170f);
	display: block;
	font-size: var(--hedera-text-2xl, 1.5rem);
	font-weight: 300;
	letter-spacing: -0.025em;
	margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
	.hedera-project__title {
		font-size: var(--hedera-text-3xl, 1.875rem);
	}
}

.hedera-projects--full .hedera-project__title {
	margin-bottom: 0.5rem;
}

.hedera-project__where {
	color: color-mix(in srgb, var(--hedera-project-meta) 60%, transparent);
	display: block;
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hedera-project__arrow {
	color: color-mix(in srgb, var(--hedera-project-meta) 30%, transparent);
	flex: 0 0 auto;
	transition: color 500ms ease;
}

.hedera-project__arrow svg {
	height: 1.5rem;
	transition: transform 500ms ease;
	width: 1.5rem;
}

.hedera-projects--full .hedera-project__arrow svg {
	height: 2rem;
	width: 2rem;
}

.hedera-project:hover .hedera-project__arrow {
	color: var(--hedera-project-meta);
}

.hedera-project:hover .hedera-project__arrow svg {
	transform: translate(0.5rem, -0.5rem);
}

.hedera-project.is-hidden,
.hedera-project[hidden] {
	display: none;
}

.hedera-projects__more {
	display: flex;
	justify-content: center;
	margin-top: 8rem;
}

/* ── Filter bar ──────────────────────────────────────────────────────────────
 * Source: sticky top-[70px] md:top-[80px] bg-white/95 backdrop-blur-xl border-b
 * forest/10 py-4 md:py-6; chips px-6 py-2.5 rounded-full text-[10px] font-bold
 * tracking-[0.2em] uppercase, the active one forest with a shadow and scale-105, the
 * rest white with a neutral-200 border at forest/60. The strip scrolls sideways on a phone.
 *
 * It is the same bar on the portfolio and on the journal, so it is not a project class.
 */

.hedera-filter {
	backdrop-filter: blur(24px);
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 10%, transparent);
	margin: 0 calc(50% - 50vw) 3rem;
	padding: 1.5rem 0;
	position: sticky;
	top: 80px;
	z-index: 100;
}

@media (max-width: 767px) {
	.hedera-filter {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		padding: 1rem 0;
		top: 70px;
	}
}

.hedera-filter__inner {
	display: flex;
	gap: 0.75rem;
	margin: 0 auto;
	max-width: 80rem;
	overflow-x: auto;
	padding: 0.5rem 2.5rem;
	scrollbar-width: none;
}

.hedera-filter__inner::-webkit-scrollbar {
	display: none;
}

.hedera-filter__chip {
	background: var(--hedera-white, #fff);
	border: 1px solid #e5e5e5;
	border-radius: 9999px;
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 60%, transparent);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-label, 0.625rem);
	font-weight: 700;
	letter-spacing: 0.2em;
	padding: 0.625rem 1.5rem;
	text-transform: uppercase;
	transition: all 500ms ease;
	white-space: nowrap;
}

.hedera-filter__chip:hover {
	border-color: var(--hedera-forest-800, #0a3e2c);
	color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-filter__chip.is-active {
	background: var(--hedera-forest-800, #0a3e2c);
	border-color: var(--hedera-forest-800, #0a3e2c);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	color: var(--hedera-white, #fff);
	transform: scale(1.05);
}

/* ── Services ────────────────────────────────────────────────────────────────
 * Two skins of one loop.
 *
 * Home (rows): grid lg:grid-cols-2 gap-12 lg:gap-20 items-center, rows gap-24 sm:gap-32.
 * Image aspect-[4/3] rounded-2xl sm:rounded-3xl shadow-2xl, scaling 1.1 over 1.5s under a
 * wash rising from forest-950/80 at 60%; ghost number text-[4rem] sm:text-[6rem] font-light
 * at forest-800/5; h3 text-2xl sm:text-4xl serif 400; p base font-light forest-800.
 *
 * Services page (editorial): flex lg:flex-row / row-reverse, items-stretch, gap-16
 * lg:gap-32, rows mb-32 md:mb-48. Image column 55%: aspect-[4/3] md:aspect-[16/10]
 * rounded-2xl md:rounded-[3rem] shadow-2xl, scaling 1.05 over 1s under a forest-800/5
 * tint that clears; a white disc w-20 md:w-32 with the number in serif text-3xl md:text-5xl
 * pinned to the top outer corner. Text column 45%: "Discipline 01" label, h2 text-3xl
 * md:text-5xl serif 400, p base md:text-lg font-light forest-800/80, underlined link.
 */

.hedera-services {
	display: flex;
	flex-direction: column;
	gap: 8rem;
}

@media (max-width: 639px) {
	.hedera-services {
		gap: 6rem;
	}
}

.hedera-services--editorial {
	gap: 12rem;
}

@media (max-width: 767px) {
	.hedera-services--editorial {
		gap: 8rem;
	}
}

.hedera-service {
	align-items: center;
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.hedera-service {
		gap: 5rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hedera-services--editorial .hedera-service {
		gap: 8rem;
		grid-template-columns: 55fr 45fr;
	}

	.hedera-services--rows .hedera-service__text {
		padding-left: 2.5rem;
	}

	.hedera-service--reversed .hedera-service__media {
		order: 2;
	}

	.hedera-service--reversed .hedera-service__text {
		order: 1;
	}

	.hedera-services--rows .hedera-service--reversed .hedera-service__text {
		padding-left: 0;
		padding-right: 2.5rem;
	}
}

.hedera-service__media {
	position: relative;
	width: 100%;
}

.hedera-service__frame {
	aspect-ratio: 4 / 3;
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

@media (min-width: 640px) {
	.hedera-services--rows .hedera-service__frame {
		border-radius: 1.5rem;
	}
}

@media (min-width: 768px) {
	.hedera-services--editorial .hedera-service__frame {
		aspect-ratio: 16 / 10;
		border-radius: 3rem;
	}
}

.hedera-service__frame .hedera-service__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 1.5s ease-out;
	width: 100%;
}

.hedera-service__media:hover .hedera-service__image {
	transform: scale(1.1);
}

.hedera-services--editorial .hedera-service__frame .hedera-service__image {
	transition-duration: 1s;
}

.hedera-services--editorial .hedera-service__media:hover .hedera-service__image {
	transform: scale(1.05);
}

.hedera-service__wash {
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--hedera-forest-950, #04170f) 80%, transparent) 0%,
		transparent 50%,
		transparent 100%
	);
	inset: 0;
	opacity: 0.6;
	pointer-events: none;
	position: absolute;
}

.hedera-services--editorial .hedera-service__wash {
	background: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 5%, transparent);
	opacity: 1;
	transition: opacity 500ms ease;
}

.hedera-services--editorial .hedera-service__media:hover .hedera-service__wash {
	opacity: 0;
}

/* The disc on the photograph's outer corner. */
.hedera-service__badge {
	align-items: center;
	background: var(--hedera-white, #fff);
	border: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 5%, transparent);
	border-radius: 9999px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	color: var(--hedera-forest-800, #0a3e2c);
	display: flex;
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-3xl, 1.875rem);
	height: 5rem;
	justify-content: center;
	position: absolute;
	right: -1.5rem;
	top: -1.5rem;
	width: 5rem;
	z-index: 1;
}

@media (min-width: 768px) {
	.hedera-service__badge {
		font-size: var(--hedera-text-5xl, 3rem);
		height: 8rem;
		left: -2.5rem;
		right: auto;
		top: -2.5rem;
		width: 8rem;
	}

	.hedera-service--reversed .hedera-service__badge {
		left: auto;
		right: -2.5rem;
	}
}

.hedera-service__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hedera-service__ghost {
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 5%, transparent);
	display: block;
	font-family: var(--hedera-font-body);
	font-size: 4rem;
	font-weight: 300;
	line-height: 1;
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.hedera-service__ghost {
		font-size: 6rem;
	}
}

.hedera-service__eyebrow {
	align-items: center;
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 60%, transparent);
	display: flex;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 600;
	gap: 1rem;
	letter-spacing: 0.3em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

.hedera-service__eyebrow-rule {
	background: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 20%, transparent);
	display: block;
	height: 1px;
	width: 3rem;
}

.hedera-service__title {
	color: var(--hedera-forest-900, #06261b);
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-2xl, 1.5rem);
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 1.5rem;
}

@media (min-width: 640px) {
	.hedera-service__title {
		font-size: var(--hedera-text-4xl, 2.25rem);
	}
}

.hedera-services--editorial .hedera-service__title {
	color: var(--hedera-forest-800, #0a3e2c);
	font-size: var(--hedera-text-3xl, 1.875rem);
	margin-bottom: 2rem;
}

@media (min-width: 768px) {
	.hedera-services--editorial .hedera-service__title {
		font-size: var(--hedera-text-5xl, 3rem);
	}
}

.hedera-service__body {
	color: var(--hedera-forest-800, #0a3e2c);
	font-size: var(--hedera-text-base, 1rem);
	font-weight: 300;
	line-height: 1.625;
	margin: 0 0 2.5rem;
}

.hedera-services--editorial .hedera-service__body {
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 80%, transparent);
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.hedera-services--editorial .hedera-service__body {
		font-size: var(--hedera-text-lg, 1.125rem);
	}
}

/* The last thing in the column carries no bottom margin — it is what the source's mb-10
   on the paragraph was making room for. */
.hedera-service__text > :last-child {
	margin-bottom: 0;
}

/* Shown only in the editor, where an empty loop needs explaining. */
.hedera-empty {
	border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 0.5rem;
	font-size: var(--hedera-text-sm, 0.875rem);
	opacity: 0.7;
	padding: 1.5rem;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.hedera-project {
		animation: none;
	}
}

/* ── Exhibit frame ───────────────────────────────────────────────────────────
 * Source: h-[500px] md:h-[650px] rounded-2xl shadow-[0_30px_60px_rgba(10,62,44,0.15)],
 * transition-transform duration-700 ease-out. The media sits at scale-[1.05] so the tilt
 * never uncovers an edge. The glare is 200% square at -50%,-50%, a white gradient at 40%
 * through the middle, blended overlay, fading in over 500ms to 0.3.
 */

.hedera-exhibit {
	border-radius: 1rem;
	box-shadow: 0 30px 60px rgba(10, 62, 44, 0.15);
	height: 650px;
	margin-inline: auto;
	overflow: hidden;
	position: relative;
	transition: transform 700ms ease-out;
	width: 100%;
	will-change: transform;
}

@media (max-width: 767px) {
	.hedera-exhibit {
		height: 500px;
		max-width: 24rem; /* max-w-sm */
	}
}

.hedera-exhibit .hedera-exhibit__media {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transform: scale(1.05);
	width: 100%;
}

.hedera-exhibit__glare {
	background: linear-gradient(
		to top right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	height: 200%;
	left: -50%;
	mix-blend-mode: overlay;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: -50%;
	transition: opacity 500ms ease;
	width: 200%;
}

/* ── Floating contacts ───────────────────────────────────────────────────────
 * Source: fixed bottom-6 right-6 (md: 10), discs w-12 h-12 (md: 14) with
 * shadow-[0_10px_30px_rgba(0,0,0,0.3)], hover scale-110, active scale-95, 300ms.
 * Back to top mirrors it on the left and fades in past 400px of scroll.
 */

.hedera-float {
	align-items: flex-end;
	bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: fixed;
	right: 1.5rem;
	z-index: 9999;
}

.hedera-float__top {
	align-items: center;
	background: var(--hedera-white, #fff);
	border: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 10%, transparent);
	border-radius: 9999px;
	bottom: 1.5rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	color: var(--hedera-forest-800, #0a3e2c);
	cursor: pointer;
	display: flex;
	height: 3rem;
	justify-content: center;
	left: 1.5rem;
	opacity: 0;
	position: fixed;
	transform: scale(0.5);
	transition: opacity 300ms ease, transform 300ms ease, background-color 300ms ease;
	visibility: hidden;
	width: 3rem;
	z-index: 9999;
}

.hedera-float__top.is-shown {
	opacity: 1;
	transform: scale(1);
	visibility: visible;
}

.hedera-float__top:hover {
	background: var(--hedera-mist-100, #f4f7f5);
}

@media (min-width: 768px) {
	.hedera-float {
		bottom: 2.5rem;
		gap: 1rem;
		right: 2.5rem;
	}

	.hedera-float__top {
		bottom: 2.5rem;
		height: 3.5rem;
		left: 2.5rem;
		width: 3.5rem;
	}
}

.hedera-float__item {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	text-decoration: none;
}

.hedera-float__label {
	backdrop-filter: blur(4px);
	background: rgba(255, 255, 255, 0.9);
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	color: var(--hedera-forest-800, #0a3e2c);
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-label, 0.625rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0;
	padding: 0.375rem 0.75rem;
	text-transform: uppercase;
	transition: opacity 300ms ease;
	white-space: nowrap;
}

/* The label is a hover affordance for a pointer. On a phone it would sit there
   permanently, covering the content it floats over. */
@media (max-width: 767px) {
	.hedera-float__label {
		display: none;
	}
}

.hedera-float__item:hover .hedera-float__label,
.hedera-float__item:focus-visible .hedera-float__label {
	opacity: 1;
}

.hedera-float__disc {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 9999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	height: 3rem;
	justify-content: center;
	position: relative;
	transition: transform 300ms ease;
	width: 3rem;
}

@media (min-width: 768px) {
	.hedera-float__disc {
		height: 3.5rem;
		width: 3.5rem;
	}
}

.hedera-float__item:hover .hedera-float__disc {
	transform: scale(1.1);
}

.hedera-float__item:active .hedera-float__disc {
	transform: scale(0.95);
}

.hedera-float__pulse {
	animation: hedera-ripple 3s linear infinite;
	background: inherit;
	border-radius: 9999px;
	inset: 0;
	opacity: 0.3;
	pointer-events: none;
	position: absolute;
}

/* Source: globals.css — scale(1) to scale(2.2), opacity 0.6 to 0. */
@keyframes hedera-ripple {
	0% {
		opacity: 0.6;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(2.2);
	}
}

.hedera-float .hedera-icon,
.hedera-float__top .hedera-icon {
	height: 1.25rem;
	width: 1.25rem;
}

@media (min-width: 768px) {
	.hedera-float .hedera-icon,
	.hedera-float__top .hedera-icon {
		height: 1.5rem;
		width: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hedera-float__pulse {
		animation: none;
	}

	.hedera-exhibit {
		transform: none !important;
	}
}

/* ── Journal ─────────────────────────────────────────────────────────────────
 * Source: aspect-[4/3] rounded-[2rem] shadow-lg, image scaling 1.1 over a full second,
 * a veil arriving at forest-800/10, the category floating on white/90 with a blur, a
 * dotted meta line, a serif headline turning sage on hover, and a read-more rule whose
 * gap opens from 0.5rem to 1rem.
 */

.hedera-journal {
	display: grid;
	gap: 4rem 2rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 1024px) {
	.hedera-journal {
		row-gap: 6rem;
	}
}

@media (max-width: 1023px) {
	.hedera-journal {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.hedera-journal {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hedera-post {
	color: inherit;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.hedera-post__media {
	aspect-ratio: 4 / 3;
	background: #f5f5f5;
	border-radius: 2rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	display: block;
	margin-bottom: 2rem;
	overflow: hidden;
	position: relative;
}

.hedera-post__media .hedera-post__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 1s ease;
	width: 100%;
}

.hedera-post:hover .hedera-post__image {
	transform: scale(1.1);
}

.hedera-post__veil {
	background: transparent;
	inset: 0;
	position: absolute;
	transition: background-color 500ms ease;
}

.hedera-post:hover .hedera-post__veil {
	background: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 10%, transparent);
}

.hedera-post__badge {
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.9);
	border-radius: 9999px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	color: var(--hedera-forest-800, #0a3e2c);
	font-size: var(--hedera-text-micro, 0.5625rem);
	font-weight: 700;
	left: 1.5rem;
	letter-spacing: 0.2em;
	padding: 0.375rem 1rem;
	position: absolute;
	text-transform: uppercase;
	top: 1.5rem;
}

.hedera-post__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-left: 0.5rem;
}

.hedera-post__meta {
	align-items: center;
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 40%, transparent);
	display: flex;
	font-size: var(--hedera-text-micro, 0.5625rem);
	font-weight: 700;
	gap: 0.75rem;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.hedera-post__dot {
	background: var(--hedera-sage-200, #aee2c2);
	border-radius: 9999px;
	height: 4px;
	width: 4px;
}

.hedera-post__title {
	color: var(--hedera-forest-800, #0a3e2c);
	display: -webkit-box;
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-xl, 1.25rem);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.25;
	margin-bottom: 1rem;
	overflow: hidden;
	transition: color 300ms ease;
}

@media (min-width: 768px) {
	.hedera-post__title {
		font-size: var(--hedera-text-2xl, 1.5rem);
	}
}

.hedera-post__excerpt {
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 70%, transparent);
	display: -webkit-box;
	flex: 1;
	font-size: var(--hedera-text-sm, 0.875rem);
	font-weight: 300;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 1.625;
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.hedera-post__more {
	align-items: center;
	border-top: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 10%, transparent);
	color: var(--hedera-forest-800, #0a3e2c);
	display: inline-flex;
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 700;
	gap: 0.5rem;
	letter-spacing: 0.2em;
	margin-top: auto;
	padding-top: 1rem;
	text-transform: uppercase;
	transition: gap 300ms ease;
}

.hedera-post:hover .hedera-post__more {
	gap: 1rem;
}

.hedera-post__more svg {
	height: 0.875rem;
	width: 0.875rem;
}

/* ── Project gallery ─────────────────────────────────────────────────────────
 * Source: a stage at three quarters width with rounded-[2rem] and a heavy shadow, the
 * image scaling 1.05 over four seconds, a black/5 tint, a blurred "fullscreen" pill in
 * the corner, and a strip of thumbnails down the remaining quarter.
 */

.hedera-gallery {
	display: flex;
	gap: 1rem;
	height: 70vh;
	width: 100%;
}

.hedera-gallery--below {
	flex-direction: column;
}

@media (max-width: 767px) {
	.hedera-gallery {
		flex-direction: column;
		height: auto;
	}
}

.hedera-gallery__stage {
	background: #f5f5f5;
	border: 0;
	border-radius: 2rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	cursor: zoom-in;
	flex: 1;
	overflow: hidden;
	padding: 0;
	position: relative;
}

@media (max-width: 767px) {
	.hedera-gallery__stage {
		height: 50vh;
	}
}

.hedera-gallery--side .hedera-gallery__stage {
	flex: 0 0 75%;
}

.hedera-gallery__slide {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 400ms ease;
	visibility: hidden;
}

.hedera-gallery__slide.is-current {
	opacity: 1;
	visibility: visible;
}

.hedera-gallery .hedera-gallery__slide img,
.hedera-gallery .hedera-gallery__slide video {
	height: 100%;
	object-fit: cover;
	transition: transform 4s ease;
	width: 100%;
}

.hedera-gallery__stage:hover .hedera-gallery__slide.is-current img {
	transform: scale(1.05);
}

.hedera-gallery__tint {
	background: rgba(0, 0, 0, 0.05);
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.hedera-gallery__hint {
	backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	color: #fff;
	font-size: var(--hedera-text-label, 0.625rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.5rem 1.5rem;
	position: absolute;
	right: 1.5rem;
	text-transform: uppercase;
	top: 1.5rem;
}

@media (min-width: 768px) {
	.hedera-gallery__hint {
		right: 2rem;
		top: 2rem;
	}
}

.hedera-gallery__strip {
	display: flex;
	gap: 0.5rem;
	overflow: auto;
	scrollbar-width: none;
}

.hedera-gallery__strip::-webkit-scrollbar {
	display: none;
}

.hedera-gallery--side .hedera-gallery__strip {
	flex: 0 0 calc(25% - 1rem);
	flex-direction: column;
}

@media (max-width: 767px) {
	.hedera-gallery--side .hedera-gallery__strip {
		flex: 0 0 120px;
		flex-direction: row;
	}
}

.hedera-gallery--below .hedera-gallery__strip {
	flex: 0 0 120px;
}

.hedera-gallery__thumb {
	background: none;
	border: 0;
	border-radius: 1rem;
	cursor: pointer;
	flex: 0 0 auto;
	height: 120px;
	opacity: 0.5;
	overflow: hidden;
	padding: 0;
	transition: opacity 300ms ease, outline-color 300ms ease;
	width: 160px;
}

.hedera-gallery--side .hedera-gallery__thumb {
	height: 120px;
	width: 100%;
}

.hedera-gallery .hedera-gallery__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.hedera-gallery__thumb:hover,
.hedera-gallery__thumb.is-current {
	opacity: 1;
}

.hedera-gallery__thumb.is-current {
	outline: 2px solid var(--hedera-sage-200, #aee2c2);
	outline-offset: -2px;
}

/* ── Fullscreen view ─────────────────────────────────────────────────────────
 * Built by the script when the stage is opened, so the markup does not sit in every page
 * waiting to be used.
 */

.hedera-lightbox {
	align-items: center;
	background: rgba(4, 23, 15, 0.97);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 100000;
}

.hedera-lightbox__media {
	max-height: 92vh;
	max-width: 92vw;
	object-fit: contain;
}

.hedera-lightbox button {
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 3rem;
	justify-content: center;
	position: absolute;
	transition: background-color 300ms ease;
	width: 3rem;
}

.hedera-lightbox button:hover {
	background: rgba(255, 255, 255, 0.25);
}

.hedera-lightbox__close {
	right: 1.5rem;
	top: 1.5rem;
}

.hedera-lightbox__prev {
	left: 1.5rem;
}

.hedera-lightbox__next {
	right: 1.5rem;
}

.hedera-lightbox__count {
	bottom: 1.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-label, 0.625rem);
	letter-spacing: 0.2em;
	position: absolute;
	text-transform: uppercase;
}

/* The page behind must not scroll while this is open. */
body.hedera-locked {
	overflow: hidden;
}

/* ── Enquiry form ────────────────────────────────────────────────────────────
 * Source: fields on mist-100 at half strength with transparent borders and a 1rem radius,
 * rising to white with a 4px sage ring on focus; labels at 10px, tracked and uppercase,
 * indented past the field's own padding; a full-width forest button at 1.25rem.
 */

.hedera-form {
	--hedera-field-bg: color-mix(in srgb, var(--hedera-mist-100, #f4f7f5) 50%, transparent);
	--hedera-field-focus: var(--hedera-sage-200, #aee2c2);
}

.hedera-form__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

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

@media (max-width: 639px) {
	.hedera-form__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hedera-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.hedera-form__label {
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 40%, transparent);
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-label, 0.625rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	padding-left: 1rem;
	text-transform: uppercase;
	transition: color 300ms ease;
}

.hedera-form__field:focus-within .hedera-form__label {
	color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-form__input {
	background: var(--hedera-field-bg);
	border: 1px solid transparent;
	border-radius: 1rem;
	color: var(--hedera-forest-800, #0a3e2c);
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-base, 1rem);
	padding: 0.875rem 1.5rem;
	transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
	width: 100%;
}

.hedera-form__input:hover {
	background: var(--hedera-mist-100, #f4f7f5);
}

/*
 * A visible focus state, and deliberately not `outline: none`. The original removes the
 * outline globally, which leaves a keyboard user with no idea where they are; the ring
 * below is the design's own focus treatment doing the job the outline was doing.
 */
.hedera-form__input:focus {
	background: var(--hedera-white, #fff);
	border-color: var(--hedera-field-focus);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hedera-field-focus) 30%, transparent);
	outline: none;
}

textarea.hedera-form__input {
	line-height: 1.6;
	min-height: 8rem;
	resize: vertical;
}

.hedera-form__consent {
	align-items: flex-start;
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 60%, transparent);
	display: flex;
	font-size: var(--hedera-text-sm, 0.875rem);
	gap: 0.75rem;
	line-height: 1.6;
	margin: 0;
}

.hedera-form__consent input {
	accent-color: var(--hedera-forest-800, #0a3e2c);
	flex: 0 0 auto;
	height: 1.125rem;
	margin-top: 0.15rem;
	width: 1.125rem;
}

.hedera-form__submit {
	background: var(--hedera-forest-800, #0a3e2c);
	border: 0;
	border-radius: 1rem;
	color: var(--hedera-white, #fff);
	cursor: pointer;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.2em;
	padding: 1.25rem;
	text-transform: uppercase;
	transition: all 300ms ease;
	width: 100%;
}

.hedera-form__submit:hover {
	background: var(--hedera-forest-700, #125840);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.hedera-form__submit:active {
	transform: scale(0.98);
}

.hedera-form__notice {
	border-radius: 1rem;
	font-size: var(--hedera-text-sm, 0.875rem);
	line-height: 1.6;
	margin: 0 0 1.5rem;
	padding: 1rem 1.5rem;
}

.hedera-form__notice--ok {
	background: color-mix(in srgb, var(--hedera-sage-200, #aee2c2) 30%, transparent);
	color: var(--hedera-forest-900, #06261b);
}

.hedera-form__notice--bad {
	background: rgba(185, 28, 28, 0.08);
	color: #991b1b;
}

/*
 * The honeypot. Moved out of view rather than hidden with display:none — a field that is
 * display:none is one a script knows to skip, and one that is merely off-screen is not.
 */
.hedera-form__pot {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* ── Brand film ──────────────────────────────────────────────────────────────
 * Source: aspect-[4/3] sm:aspect-video rounded-[2rem] sm:rounded-[3rem] with
 * shadow-[0_20px_100px_rgba(0,0,0,0.8)]; the still at brightness-[0.85] scaling 1.1 over
 * four seconds; a forest-900/30 multiply tint that clears on hover; a w-16 sm:w-20 disc of
 * white/10 with a blur and a white/20 ring, scaling 1.25 and turning white on hover. The
 * trigger beside it: a w-14 disc ringed at white/20, and text-xs tracking-[0.3em] at white/80.
 */

.hedera-film__poster {
	aspect-ratio: 4 / 3;
	background: var(--hedera-forest-950, #04170f);
	border: 0;
	border-radius: 2rem;
	box-shadow: 0 20px 100px rgba(0, 0, 0, 0.8);
	cursor: pointer;
	display: block;
	isolation: isolate;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

@media (min-width: 640px) {
	.hedera-film__poster {
		aspect-ratio: 16 / 9;
		border-radius: 3rem;
	}
}

.hedera-film__poster .hedera-film__still {
	filter: brightness(0.85);
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 4s ease-out;
	width: 100%;
}

.hedera-film__poster:hover .hedera-film__still {
	transform: scale(1.1);
}

.hedera-film__tint {
	background: color-mix(in srgb, var(--hedera-forest-900, #06261b) 30%, transparent);
	inset: 0;
	mix-blend-mode: multiply;
	position: absolute;
	transition: opacity 700ms ease;
}

.hedera-film__poster:hover .hedera-film__tint {
	opacity: 0;
}

.hedera-film__disc {
	align-items: center;
	backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	color: #fff;
	display: flex;
	height: 4rem;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 500ms ease, background-color 500ms ease, border-color 500ms ease, color 500ms ease;
	width: 4rem;
}

@media (min-width: 640px) {
	.hedera-film__disc {
		height: 5rem;
		width: 5rem;
	}
}

.hedera-film__disc .hedera-icon {
	height: 1.5rem;
	transform: translateX(2px);
	width: 1.5rem;
}

@media (min-width: 640px) {
	.hedera-film__disc .hedera-icon {
		height: 2rem;
		width: 2rem;
	}
}

.hedera-film__poster:hover .hedera-film__disc {
	background: #fff;
	border-color: #fff;
	color: var(--hedera-forest-800, #0a3e2c);
	transform: translate(-50%, -50%) scale(1.25);
}

.hedera-film__trigger {
	align-items: center;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 500;
	gap: 1.5rem;
	letter-spacing: 0.3em;
	padding: 0;
	text-transform: uppercase;
	transition: color 300ms ease;
}

.hedera-film__trigger:hover {
	color: #fff;
}

.hedera-film__trigger-disc {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	height: 3.5rem;
	justify-content: center;
	transition: border-color 500ms ease, color 300ms ease;
	width: 3.5rem;
}

.hedera-film__trigger:hover .hedera-film__trigger-disc {
	border-color: #fff;
	color: var(--hedera-sage-200, #aee2c2);
}

.hedera-film__trigger-disc .hedera-icon {
	height: 1.25rem;
	transform: translateX(2px);
	width: 1.25rem;
}

/* The viewer: black/95 with a heavy blur; the film in a rounded frame ringed at white/10,
   max-w-[400px] portrait or 16:9 landscape; the close at the top right at white/50. */
.hedera-film-viewer {
	align-items: center;
	backdrop-filter: blur(40px);
	background: rgba(0, 0, 0, 0.95);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 1rem;
	position: fixed;
	z-index: 100000;
}

@media (min-width: 640px) {
	.hedera-film-viewer {
		padding: 2.5rem;
	}
}

.hedera-film-viewer__close {
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	padding: 0.5rem;
	position: absolute;
	right: 1.5rem;
	top: 1.5rem;
	transition: color 300ms ease;
	z-index: 1;
}

.hedera-film-viewer__close:hover {
	color: #fff;
}

.hedera-film-viewer__close svg {
	height: 2.5rem;
	width: 2.5rem;
}

@media (min-width: 640px) {
	.hedera-film-viewer__close {
		right: 2.5rem;
		top: 2.5rem;
	}

	.hedera-film-viewer__close svg {
		height: 3rem;
		width: 3rem;
	}
}

.hedera-film-viewer__frame {
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.8);
	overflow: hidden;
	position: relative;
	width: 100%;
}

@media (min-width: 640px) {
	.hedera-film-viewer__frame {
		border-radius: 2rem;
	}
}

.hedera-film-viewer__frame--portrait {
	aspect-ratio: 9 / 16;
	max-height: 92vh;
	max-width: 400px;
}

.hedera-film-viewer__frame--landscape {
	aspect-ratio: 16 / 9;
	max-height: 92vh;
	max-width: 80rem;
}

.hedera-film-viewer__frame video,
.hedera-film-viewer__frame iframe {
	border: 0;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

/* ── Stamped image ───────────────────────────────────────────────────────────
 * Source: aspect-[3/4] max-w-md, rounded-[2rem] sm:rounded-[4rem] with the top-right
 * corner square, shadow-[0_20px_60px_rgba(10,62,44,0.08)], the image scaling 1.05 over a
 * second under a forest/5 multiply wash that clears; the stamp w-32 sm:w-40 at -bottom-8
 * -right-4 sm:-bottom-10 sm:-right-8, white with a forest/10 ring and shadow-xl, SINCE in
 * text-xs sm:text-sm tracking-[0.2em] over the year at text-2xl sm:text-3xl.
 */

.hedera-portrait {
	margin: 0 auto;
	max-width: 28rem;
	position: relative;
	width: 100%;
}

@media (min-width: 1024px) {
	.hedera-portrait {
		margin: 0;
	}
}

.hedera-portrait__frame {
	aspect-ratio: 3 / 4;
	box-shadow: 0 20px 60px rgba(10, 62, 44, 0.08);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.hedera-portrait--editorial .hedera-portrait__frame {
	border-radius: 2rem 0 2rem 2rem;
}

.hedera-portrait--round .hedera-portrait__frame {
	border-radius: 2rem;
}

@media (min-width: 640px) {
	.hedera-portrait--editorial .hedera-portrait__frame {
		border-radius: 4rem 0 4rem 4rem;
	}

	.hedera-portrait--round .hedera-portrait__frame {
		border-radius: 4rem;
	}
}

.hedera-portrait__frame .hedera-portrait__image {
	object-fit: cover;
	transition: transform 1s ease;
}

.hedera-portrait:hover .hedera-portrait__image {
	transform: scale(1.05);
}

.hedera-portrait__wash {
	background: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 5%, transparent);
	inset: 0;
	mix-blend-mode: multiply;
	position: absolute;
	transition: opacity 700ms ease;
}

.hedera-portrait:hover .hedera-portrait__wash {
	opacity: 0;
}

.hedera-portrait__stamp {
	align-items: center;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 10%, transparent);
	border-radius: 9999px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	color: var(--hedera-forest-800, #0a3e2c);
	display: flex;
	flex-direction: column;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 300;
	height: 8rem;
	justify-content: center;
	letter-spacing: 0.2em;
	line-height: 1.2;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	width: 8rem;
	z-index: 2;
}

@media (min-width: 640px) {
	.hedera-portrait__stamp {
		font-size: var(--hedera-text-sm, 0.875rem);
		height: 10rem;
		width: 10rem;
	}
}

.hedera-portrait__stamp--bottom-right {
	bottom: -2rem;
	right: -1rem;
}

.hedera-portrait__stamp--bottom-left {
	bottom: -2rem;
	left: -1rem;
}

.hedera-portrait__stamp--top-right {
	right: -1rem;
	top: -2rem;
}

.hedera-portrait__stamp--top-left {
	left: -1rem;
	top: -2rem;
}

@media (min-width: 640px) {
	.hedera-portrait__stamp--bottom-right {
		bottom: -2.5rem;
		right: -2rem;
	}

	.hedera-portrait__stamp--bottom-left {
		bottom: -2.5rem;
		left: -2rem;
	}

	.hedera-portrait__stamp--top-right {
		right: -2rem;
		top: -2.5rem;
	}

	.hedera-portrait__stamp--top-left {
		left: -2rem;
		top: -2.5rem;
	}
}

.hedera-portrait__stamp-large {
	display: block;
	font-size: var(--hedera-text-2xl, 1.5rem);
	font-weight: 400;
	margin-top: 0.25rem;
}

@media (min-width: 640px) {
	.hedera-portrait__stamp-large {
		font-size: var(--hedera-text-3xl, 1.875rem);
	}
}

/* ── Process steps ───────────────────────────────────────────────────────────
 * Source: h2 text-3xl serif uppercase tracking-wide underlined in sage/30 at offset 8,
 * mb-16; three columns gap-12 over a hairline at white/20 through the discs; disc w-11 on
 * forest-800 ringed sage/50 with the number at text-xs font-bold, filling sage on hover;
 * h3 text-xl serif uppercase tracking-wider; p base font-light.
 */

.hedera-steps {
	color: #fff;
	font-family: var(--hedera-font-body);
}

.hedera-steps__title {
	color: inherit;
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-3xl, 1.875rem);
	font-weight: 400;
	letter-spacing: 0.025em;
	margin: 0 0 4rem;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--hedera-sage-200, #aee2c2) 30%, transparent);
	text-transform: uppercase;
	text-underline-offset: 8px;
}

.hedera-steps__list {
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

@media (min-width: 768px) {
	.hedera-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hedera-steps__list::before {
		background: rgba(255, 255, 255, 0.2);
		content: '';
		height: 1px;
		left: 0;
		position: absolute;
		right: 0;
		top: 22px;
	}
}

.hedera-steps__item {
	align-items: center;
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: center;
	z-index: 1;
}

@media (min-width: 640px) {
	.hedera-steps__item {
		align-items: flex-start;
		text-align: left;
	}
}

.hedera-steps__no {
	align-items: center;
	background: var(--hedera-forest-800, #0a3e2c);
	border: 1px solid color-mix(in srgb, var(--hedera-sage-200, #aee2c2) 50%, transparent);
	border-radius: 9999px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	color: var(--hedera-sage-200, #aee2c2);
	display: flex;
	font-size: var(--hedera-text-xs, 0.75rem);
	font-weight: 700;
	height: 2.75rem;
	justify-content: center;
	margin-bottom: 1.5rem;
	transition: background-color 500ms ease, color 500ms ease;
	width: 2.75rem;
}

.hedera-steps__item:hover .hedera-steps__no {
	background: var(--hedera-sage-200, #aee2c2);
	color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-steps__heading {
	color: inherit;
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-xl, 1.25rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.hedera-steps__text {
	font-size: var(--hedera-text-base, 1rem);
	font-weight: 300;
	line-height: 1.625;
	margin: 0;
}

.hedera-steps--light {
	color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-steps--light .hedera-steps__list::before {
	background: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 15%, transparent);
}

/* ── Questions ───────────────────────────────────────────────────────────────
 * Source: h2 text-2xl Rubik uppercase tracking-widest, border-b white/10 pb-4 mb-12;
 * rows border-b white/10, the question py-6 text-lg font-medium tracking-wide turning sage
 * when open; a w-6 h-6 ring at white/20 holding a plus that becomes a minus, the ring
 * turning half a circle and tinting sage/10; the answer base font-light, max-w-3xl.
 */

.hedera-faq {
	color: #fff;
	font-family: var(--hedera-font-body);
	max-width: 56rem;
}

.hedera-faq__title {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: inherit;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-2xl, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: 0 0 3rem;
	padding-bottom: 1rem;
	text-transform: uppercase;
}

.hedera-faq__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hedera-faq__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hedera-faq__question {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--hedera-text-lg, 1.125rem);
	font-weight: 500;
	gap: 1.5rem;
	justify-content: space-between;
	letter-spacing: 0.025em;
	list-style: none;
	padding: 1.5rem 0;
	transition: color 300ms ease;
}

.hedera-faq__question::-webkit-details-marker {
	display: none;
}

.hedera-faq__question:hover {
	color: rgba(255, 255, 255, 0.8);
}

.hedera-faq__item[open] .hedera-faq__question {
	color: var(--hedera-sage-200, #aee2c2);
}

.hedera-faq__mark {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	display: flex;
	flex: 0 0 auto;
	height: 1.5rem;
	justify-content: center;
	position: relative;
	transition: transform 500ms ease, background-color 500ms ease;
	width: 1.5rem;
}

.hedera-faq__item[open] .hedera-faq__mark {
	background: color-mix(in srgb, var(--hedera-sage-200, #aee2c2) 10%, transparent);
	transform: rotate(180deg);
}

.hedera-faq__mark .hedera-icon {
	height: 0.75rem;
	position: absolute;
	transition: opacity 300ms ease;
	width: 0.75rem;
}

.hedera-faq__plus {
	color: #fff;
}

.hedera-faq__minus {
	color: var(--hedera-sage-200, #aee2c2);
	opacity: 0;
}

.hedera-faq__item[open] .hedera-faq__plus {
	opacity: 0;
}

.hedera-faq__item[open] .hedera-faq__minus {
	opacity: 1;
}

.hedera-faq__answer {
	padding: 0 0.25rem 2rem;
}

.hedera-faq__answer p {
	font-size: var(--hedera-text-base, 1rem);
	font-weight: 300;
	line-height: 1.625;
	margin: 0;
	max-width: 48rem;
}

.hedera-faq--light {
	color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-faq--light .hedera-faq__title,
.hedera-faq--light .hedera-faq__item {
	border-color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 10%, transparent);
}

.hedera-faq--light .hedera-faq__mark {
	border-color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 20%, transparent);
}

.hedera-faq--light .hedera-faq__plus,
.hedera-faq--light .hedera-faq__question:hover {
	color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-faq--light .hedera-faq__item[open] .hedera-faq__question,
.hedera-faq--light .hedera-faq__minus {
	color: var(--hedera-sage-400, #68c99b);
}

/* ── Map ─────────────────────────────────────────────────────────────────────
 * Source: name text-2xl uppercase tracking-wider font-medium, address base font-light,
 * md:flex-row items-end justify-between mb-6; the frame h-[400px] md:h-[500px]
 * rounded-[2rem] shadow-2xl border white/10, the map at grayscale(0.5) contrast(1.1).
 */

.hedera-map {
	color: #fff;
	font-family: var(--hedera-font-body);
	width: 100%;
}

.hedera-map__head {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.hedera-map__head {
		align-items: flex-end;
		flex-direction: row;
	}
}

.hedera-map__title {
	color: inherit;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-2xl, 1.5rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	margin: 0;
	text-transform: uppercase;
}

.hedera-map__address {
	font-size: var(--hedera-text-base, 1rem);
	font-weight: 300;
	margin: 0;
}

.hedera-map__frame {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	height: 500px;
	overflow: hidden;
}

.hedera-map__frame iframe {
	border: 0;
	display: block;
	filter: grayscale(0.5) contrast(1.1);
	height: 100%;
	width: 100%;
}

.hedera-map--light {
	color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-map--light .hedera-map__frame {
	border-color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 10%, transparent);
}

/* ── Contact details ─────────────────────────────────────────────────────────
 * Source: space-y-10 border-l white/20 pl-8; three dots down the line — the first w-2.5
 * in sage with a sage glow, the others w-1.5 at white/30; h4 text-sm uppercase
 * tracking-widest sage font-medium mb-2; the address text-lg tracking-wide; the telephone
 * text-2xl font-medium; the email text-lg at white/90; social circles mt-8.
 */

.hedera-details {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	display: flex;
	flex-direction: column;
	font-family: var(--hedera-font-body);
	gap: 2.5rem;
	padding-left: 2rem;
	position: relative;
}

.hedera-details__line {
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	left: -5px;
	padding: 0.25rem 0;
	position: absolute;
	top: 0;
	width: 10px;
}

.hedera-details__line span {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 9999px;
	height: 6px;
	margin: 0 auto;
	width: 6px;
}

.hedera-details__line span:first-child {
	background: var(--hedera-sage-200, #aee2c2);
	box-shadow: 0 0 10px var(--hedera-sage-200, #aee2c2);
	height: 10px;
	width: 10px;
}

.hedera-details__label {
	color: var(--hedera-sage-200, #aee2c2);
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-sm, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.hedera-details__address {
	font-size: var(--hedera-text-lg, 1.125rem);
	letter-spacing: 0.025em;
	line-height: 1.625;
	margin: 0;
}

.hedera-details__phone,
.hedera-details__email {
	color: inherit;
	display: block;
	text-decoration: none;
	transition: color 300ms ease;
}

.hedera-details__phone {
	font-size: var(--hedera-text-2xl, 1.5rem);
	font-weight: 500;
}

.hedera-details__phone:hover {
	color: var(--hedera-sage-200, #aee2c2);
}

.hedera-details__email {
	font-size: var(--hedera-text-lg, 1.125rem);
	margin-top: 0.5rem;
	opacity: 0.9;
}

.hedera-details__email:hover {
	opacity: 1;
}

.hedera-details .hedera-social {
	margin-top: 2rem;
}

.hedera-details--light {
	border-color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 20%, transparent);
	color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-details--light .hedera-details__line span {
	background: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 30%, transparent);
}

.hedera-details--light .hedera-details__line span:first-child {
	background: var(--hedera-sage-400, #68c99b);
	box-shadow: 0 0 10px var(--hedera-sage-400, #68c99b);
}

.hedera-details--light .hedera-details__label {
	color: var(--hedera-sage-400, #68c99b);
}

/* ── Lists ───────────────────────────────────────────────────────────────────
 * Pills: text-[10px] heading tracking-[0.2em] forest/50 over a hairline; items in a row
 * gap-x-8 gap-y-4, a w-1.5 sage dot then text-lg font-medium italic forest at 80%.
 * Marks: text-sm font-medium, gap-3, a w-6 icon in sage, rows space-y-3.
 * Numbered: rows space-y-8, a w-10 ring at white/20 filling sage on hover, h3 text-lg
 * font-medium tracking-wide, p base font-light.
 */

.hedera-list {
	color: var(--hedera-forest-800, #0a3e2c);
	font-family: var(--hedera-font-body);
}

.hedera-list--dark {
	color: #fff;
}

.hedera-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hedera-list__heading {
	color: color-mix(in srgb, currentColor 50%, transparent);
	display: block;
	font-size: var(--hedera-text-label, 0.625rem);
	font-weight: 700;
	letter-spacing: 0.2em;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.hedera-list--pills {
	border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
	padding-top: 2rem;
}

.hedera-list--pills .hedera-list__items {
	column-gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	row-gap: 1rem;
}

.hedera-list--pills .hedera-list__item {
	align-items: center;
	display: flex;
	font-size: var(--hedera-text-lg, 1.125rem);
	font-style: italic;
	font-weight: 500;
	gap: 0.75rem;
	opacity: 0.8;
	transition: opacity 300ms ease;
}

.hedera-list--pills .hedera-list__item:hover {
	opacity: 1;
}

.hedera-list__dot {
	background: var(--hedera-sage-200, #aee2c2);
	border-radius: 9999px;
	display: block;
	flex: 0 0 auto;
	height: 6px;
	width: 6px;
}

.hedera-list--marks .hedera-list__items {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	opacity: 0.9;
}

.hedera-list--marks .hedera-list__item {
	align-items: center;
	display: flex;
	font-size: var(--hedera-text-sm, 0.875rem);
	font-weight: 500;
	gap: 0.75rem;
}

.hedera-list__icon {
	color: var(--hedera-sage-200, #aee2c2);
	flex: 0 0 auto;
	height: 1.5rem;
	width: 1.5rem;
}

.hedera-list--numbered .hedera-list__items {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.hedera-list--numbered .hedera-list__item {
	align-items: flex-start;
	display: flex;
	gap: 1.25rem;
}

.hedera-list__ring {
	align-items: center;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 9999px;
	display: flex;
	flex: 0 0 auto;
	font-weight: 700;
	height: 2.5rem;
	justify-content: center;
	margin-top: 0.25rem;
	transition: background-color 500ms ease, color 500ms ease, border-color 500ms ease;
	width: 2.5rem;
}

.hedera-list--numbered .hedera-list__item:hover .hedera-list__ring {
	background: var(--hedera-sage-200, #aee2c2);
	border-color: var(--hedera-sage-200, #aee2c2);
	color: var(--hedera-forest-950, #04170f);
}

.hedera-list__title {
	color: inherit;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-lg, 1.125rem);
	font-weight: 500;
	letter-spacing: 0.025em;
	margin: 0 0 0.5rem;
	transition: color 300ms ease;
}

.hedera-list--numbered .hedera-list__item:hover .hedera-list__title {
	color: var(--hedera-sage-200, #aee2c2);
}

.hedera-list__body {
	font-size: var(--hedera-text-base, 1rem);
	font-weight: 300;
	line-height: 1.625;
	margin: 0;
}

/* ── Cinematic line ──────────────────────────────────────────────────────────
 * Source: a 100vh section on mist-100 with a hairline top and bottom, a forest blur behind,
 * and the sentence at text-4xl md:text-5xl lg:text-6xl uppercase tracking-tighter,
 * leading-tight, centred. The blur, opacity and scale are set by the script from how far
 * the section is through the screen; without it the line simply shows.
 */

.hedera-quote {
	--hedera-quote-blur: 0px;
	--hedera-quote-opacity: 1;
	--hedera-quote-scale: 1;
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
	padding: 0 1.5rem;
	position: relative;
	width: 100%;
}

.hedera-quote::before {
	background: var(--hedera-forest-800, #0a3e2c);
	content: '';
	filter: blur(100px);
	inset: 0;
	opacity: 0.03;
	pointer-events: none;
	position: absolute;
}

.hedera-quote__text {
	color: var(--hedera-forest-800, #0a3e2c);
	filter: blur(var(--hedera-quote-blur));
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-4xl, 2.25rem);
	font-weight: 400;
	letter-spacing: -0.05em;
	line-height: 1.25;
	margin: 0;
	max-width: 64rem;
	opacity: var(--hedera-quote-opacity);
	position: relative;
	text-align: center;
	transform: scale(var(--hedera-quote-scale));
	user-select: none;
	will-change: transform, filter, opacity;
}

.hedera-quote__text--caps {
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.hedera-quote__text {
		font-size: var(--hedera-text-5xl, 3rem);
	}
}

@media (min-width: 1024px) {
	.hedera-quote__text {
		font-size: var(--hedera-text-6xl, 3.75rem);
	}
}

/* ── The gallery frame ───────────────────────────────────────────────────────
 * Source: p-6 md:p-8 bg-[#fdfaf5] rounded-xl shadow-[0_50px_100px_rgba(0,0,0,0.6)]
 * border-[12px] border-[#1a1a1a], a hairline bevel at -6px, the picture aspect-[9/16] with
 * an inset shadow, a glaze from white/10, a caption text-[10px] serif tracking-[0.2em]
 * uppercase italic at #1a1a1a/40, and a blurred pool of shadow under it all.
 */

.hedera-exhibit-mount {
	margin: 0 auto;
	max-width: 24rem;
	position: relative;
}

.hedera-exhibit-mount__frame {
	background: #fdfaf5;
	border: 12px solid #1a1a1a;
	border-radius: 0.75rem;
	box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
	padding: 1.5rem;
	position: relative;
	transition: transform 700ms ease;
}

@media (min-width: 768px) {
	.hedera-exhibit-mount__frame {
		padding: 2rem;
	}
}

.hedera-exhibit-mount:hover .hedera-exhibit-mount__frame {
	transform: scale(1.01);
}

.hedera-exhibit-mount__frame::before {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	content: '';
	inset: -6px;
	pointer-events: none;
	position: absolute;
}

.hedera-exhibit--gallery {
	aspect-ratio: 9 / 16;
	border-radius: 0.125rem;
	box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
	height: auto;
	transition: none;
	will-change: auto;
}

.hedera-exhibit--gallery .hedera-exhibit__media {
	transform: none;
}

.hedera-exhibit--gallery .hedera-exhibit__glare {
	background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent 50%, transparent),
		linear-gradient(to bottom, transparent, transparent 60%, rgba(0, 0, 0, 0.2));
	height: 100%;
	left: 0;
	mix-blend-mode: normal;
	opacity: 1;
	top: 0;
	width: 100%;
}

.hedera-exhibit-mount__caption {
	color: rgba(26, 26, 26, 0.4);
	display: block;
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-label, 0.625rem);
	font-style: italic;
	letter-spacing: 0.2em;
	margin-top: 1rem;
	text-align: center;
	text-transform: uppercase;
}

.hedera-exhibit-mount__shadow {
	background: rgba(0, 0, 0, 0.4);
	border-radius: 9999px;
	bottom: -2.5rem;
	filter: blur(50px);
	height: 3rem;
	left: 50%;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	width: 80%;
	z-index: -1;
}

/*
 * Instagram's mark, as the source draws it.
 *
 * The gradient is drawn on a layer of its own rather than on the disc, because Elementor
 * suppresses `background-image` with `!important` on everything inside a container it has
 * not lazy-loaded yet — and this widget is fixed to the corner, visible from the first
 * paint, while its container sits at the foot of the page and is loaded much later. A
 * pseudo-element is not matched by that rule. The flat colour underneath is the gradient's
 * middle stop, so the disc is right even where the layer cannot be drawn.
 */
.hedera-float__disc--instagram {
	background-color: var(--hedera-instagram-2, #dc2743);
	isolation: isolate;
	overflow: hidden;
}

.hedera-float__disc--instagram::before {
	background: linear-gradient(to top right, var(--hedera-instagram-1, #f09433), var(--hedera-instagram-2, #dc2743), var(--hedera-instagram-3, #bc1888));
	border-radius: inherit;
	content: '';
	inset: 0;
	position: absolute;
	z-index: -1;
}

/* ── The enquiry form's card and its details ─────────────────────────────────
 * Source: bg-white/80 backdrop-blur-2xl p-8 md:p-10 rounded-[2.5rem]
 * shadow-[0_40px_80px_rgba(10,62,44,0.1)] border-white; h2 text-3xl md:text-4xl serif
 * tracking-tight mb-2, subtitle text-sm font-light; fields px-6 py-3.5 rounded-2xl on
 * mist/50; the country code beside the number with a hairline; a select with a chevron at
 * 40%; a w-5 h-5 rounded-md checkbox ringed forest/20 filling forest; the button rounded-2xl
 * py-5 text-[10px] tracking-[0.2em] with rolling text.
 */

.hedera-form--card {
	backdrop-filter: blur(40px);
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid #fff;
	border-radius: 2.5rem;
	box-shadow: 0 40px 80px rgba(10, 62, 44, 0.1);
	padding: 2rem;
}

@media (min-width: 768px) {
	.hedera-form--card {
		padding: 2.5rem;
	}
}

.hedera-form__head {
	margin-bottom: 2.5rem;
	text-align: center;
}

@media (min-width: 768px) {
	.hedera-form__head {
		text-align: left;
	}
}

.hedera-form__title {
	color: var(--hedera-forest-800, #0a3e2c);
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-3xl, 1.875rem);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 0.5rem;
}

@media (min-width: 768px) {
	.hedera-form__title {
		font-size: var(--hedera-text-4xl, 2.25rem);
	}
}

.hedera-form__subtitle {
	color: var(--hedera-forest-800, #0a3e2c);
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-sm, 0.875rem);
	font-weight: 300;
	margin: 0;
}

.hedera-form__input {
	border-radius: 1rem;
	padding: 0.875rem 1.5rem;
}

.hedera-form__input::placeholder {
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 40%, transparent);
	opacity: 1;
}

.hedera-form__phone {
	align-items: stretch;
	background: var(--hedera-field-bg);
	border: 1px solid transparent;
	border-radius: 1rem;
	display: flex;
	transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.hedera-form__phone:hover {
	background: var(--hedera-mist-100, #f4f7f5);
}

.hedera-form__phone:focus-within {
	background: #fff;
	border-color: var(--hedera-field-focus);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hedera-field-focus) 30%, transparent);
}

.hedera-form__phone .hedera-form__input {
	background: transparent;
	border: 0;
	box-shadow: none;
	flex: 1;
	min-width: 0;
	padding-left: 0.75rem;
}

.hedera-form__phone .hedera-form__input:focus {
	box-shadow: none;
}

.hedera-form__code {
	appearance: none;
	background: transparent;
	border: 0;
	border-right: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 5%, transparent);
	color: var(--hedera-forest-800, #0a3e2c);
	cursor: pointer;
	font-family: var(--hedera-font-body);
	font-size: 15px;
	max-width: 7.5rem;
	padding: 0.875rem 0.625rem 0.875rem 1rem;
}

.hedera-form__code:focus {
	outline: none;
}

.hedera-form__select {
	display: block;
	position: relative;
}

.hedera-form__select .hedera-form__input {
	appearance: none;
	cursor: pointer;
	padding-right: 3rem;
}

.hedera-form__chevron {
	color: var(--hedera-forest-800, #0a3e2c);
	height: 1rem;
	opacity: 0.4;
	pointer-events: none;
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
}

textarea.hedera-form__input {
	min-height: 7.5rem;
	resize: none;
}

.hedera-form__consent {
	align-items: flex-start;
	display: flex;
	margin: 0;
}

.hedera-form__consent input {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.hedera-form__consent label {
	align-items: flex-start;
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 60%, transparent);
	cursor: pointer;
	display: flex;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-sm, 0.875rem);
	gap: 0.75rem;
	line-height: 1.625;
	transition: color 300ms ease;
}

.hedera-form__consent label:hover {
	color: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 80%, transparent);
}

.hedera-form__consent a {
	color: var(--hedera-forest-800, #0a3e2c);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hedera-form__box {
	align-items: center;
	border: 2px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 20%, transparent);
	border-radius: 0.375rem;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	height: 1.25rem;
	justify-content: center;
	margin-top: 0.125rem;
	transition: all 300ms ease;
	width: 1.25rem;
}

.hedera-form__box .hedera-icon {
	height: 0.75rem;
	opacity: 0;
	stroke-width: 3;
	width: 0.75rem;
}

.hedera-form__consent input:checked + label .hedera-form__box {
	background: var(--hedera-forest-800, #0a3e2c);
	border-color: var(--hedera-forest-800, #0a3e2c);
}

.hedera-form__consent input:checked + label .hedera-form__box .hedera-icon {
	opacity: 1;
}

.hedera-form__consent input:focus-visible + label .hedera-form__box {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hedera-field-focus) 30%, transparent);
}

.hedera-form__required {
	color: #f87171;
}

.hedera-form__turnstile {
	display: flex;
	justify-content: center;
	padding: 0.5rem 0;
}

.hedera-form__submit {
	margin-top: 0.5rem;
	padding: 1.25rem;
}

.hedera-form__submit .hedera-button__roll {
	font-size: var(--hedera-text-label, 0.625rem);
	height: 1rem;
	line-height: 1rem;
}

.hedera-form__notice {
	background: #fef2f2;
	border: 1px solid #fee2e2;
	border-radius: 0.75rem;
	color: #b91c1c;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-xs, 0.75rem);
	margin: 0 0 1.25rem;
	padding: 1rem;
	text-align: center;
}

/* The thank-you: bg-white/90 p-12 rounded-[2.5rem] centred, min-h-[500px], a w-20 disc of
   sage/20 with a tick, h2 text-3xl serif, a link underlined at forest/20. */
.hedera-form__done {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 500px;
	padding: 3rem 1rem;
	text-align: center;
}

.hedera-form__done-icon {
	align-items: center;
	background: color-mix(in srgb, var(--hedera-sage-200, #aee2c2) 20%, transparent);
	border-radius: 9999px;
	color: var(--hedera-forest-800, #0a3e2c);
	display: flex;
	height: 5rem;
	justify-content: center;
	margin-bottom: 1.5rem;
	width: 5rem;
}

.hedera-form__done-icon .hedera-icon {
	height: 2.5rem;
	stroke-width: 3;
	width: 2.5rem;
}

.hedera-form__done-title {
	color: var(--hedera-forest-800, #0a3e2c);
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-3xl, 1.875rem);
	font-weight: 400;
	margin: 0 0 1rem;
}

.hedera-form__done-text {
	color: var(--hedera-forest-800, #0a3e2c);
	font-family: var(--hedera-font-body);
	line-height: 1.625;
	margin: 0 auto;
	max-width: 24rem;
}

.hedera-form__again {
	border-bottom: 1px solid color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 20%, transparent);
	color: var(--hedera-forest-800, #0a3e2c);
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-top: 2rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 300ms ease;
}

.hedera-form__again:hover {
	border-bottom-color: var(--hedera-forest-800, #0a3e2c);
}

@media (prefers-reduced-motion: reduce) {
	.hedera-quote__text {
		filter: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* The services page's cue: a 1px line 3rem tall fading from sage/50, the label under it. */
.hedera-cue__line {
	background: linear-gradient(to bottom, color-mix(in srgb, var(--hedera-sage-200, #aee2c2) 50%, transparent), transparent);
	display: block;
	height: 3rem;
	transition: background 300ms ease;
	width: 1px;
}

.hedera-cue--line:hover .hedera-cue__line {
	background: linear-gradient(to bottom, var(--hedera-sage-200, #aee2c2), transparent);
}

.hedera-cue--line .hedera-cue__text {
	color: color-mix(in srgb, var(--hedera-sage-200, #aee2c2) 50%, transparent);
	font-weight: 400;
}

.hedera-cue--line:hover .hedera-cue__text {
	color: var(--hedera-sage-200, #aee2c2);
}

/* Source: absolute -left-6 top-2 bottom-2 w-1 bg-sage rounded-full, from md. */
.hedera-heading--bar {
	position: relative;
}

@media (min-width: 768px) {
	.hedera-heading--bar::before {
		background: var(--hedera-sage-200, #aee2c2);
		border-radius: 9999px;
		bottom: 0.5rem;
		content: '';
		left: -1.5rem;
		position: absolute;
		top: 0.5rem;
		width: 4px;
	}
}

/* Source: absolute -inset-4 md:-inset-6 bg-forest/5 rounded-3xl rotate-3, rotate-6 on hover. */
.hedera-exhibit-wrap {
	position: relative;
}

.hedera-exhibit-wrap__slab {
	background: color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 5%, transparent);
	border-radius: 1.5rem;
	inset: -1rem;
	position: absolute;
	transform: rotate(3deg);
	transition: transform 700ms ease;
}

@media (min-width: 768px) {
	.hedera-exhibit-wrap__slab {
		inset: -1.5rem;
	}
}

.hedera-exhibit-wrap:hover .hedera-exhibit-wrap__slab {
	transform: rotate(6deg);
}

.hedera-exhibit-wrap .hedera-exhibit {
	position: relative;
}

/* ── Google reviews ──────────────────────────────────────────────────────────
 * Source: GoogleReviews.tsx. The section itself — white, py-24 sm:py-32, a hairline on top —
 * is the container the widget sits in; this is everything inside max-w-7xl.
 */

.hedera-reviews__empty {
	color: var(--hedera-forest-800);
	font-size: var(--hedera-text-sm);
	opacity: 0.7;
	text-align: center;
}

/* flex-col lg:flex-row items-start lg:items-end justify-between gap-10 mb-16 */
.hedera-reviews__head {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	justify-content: space-between;
	margin-bottom: 4rem;
}

@media (min-width: 1024px) {
	.hedera-reviews__head {
		align-items: flex-end;
		flex-direction: row;
	}
}

.hedera-reviews__intro {
	max-width: 42rem; /* max-w-2xl */
}

/* w-12 h-px bg-[#0a3e2c]/30; text-[10px] sm:text-xs font-semibold tracking-[0.4em] uppercase text-[#0a3e2c]/70 */
.hedera-reviews__label {
	align-items: center;
	color: rgba(10, 62, 44, 0.7);
	display: flex;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-label);
	font-weight: 600;
	gap: 1rem;
	letter-spacing: 0.4em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

@media (min-width: 640px) {
	.hedera-reviews__label {
		font-size: var(--hedera-text-xs);
	}
}

.hedera-reviews__rule {
	background: rgba(10, 62, 44, 0.3);
	display: block;
	flex: 0 0 auto;
	height: 1px;
	width: 3rem;
}

/* text-3xl sm:text-5xl font-serif font-light leading-[1.2] tracking-tight text-[#04170f] */
.hedera-reviews__heading {
	color: var(--hedera-forest-950);
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-3xl);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0;
}

@media (min-width: 640px) {
	.hedera-reviews__heading {
		font-size: var(--hedera-text-5xl);
	}
}

.hedera-reviews__accent {
	font-style: italic;
	font-weight: 400;
}

/* flex-col items-start lg:items-end gap-3 */
.hedera-reviews__summary {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 1024px) {
	.hedera-reviews__summary {
		align-items: flex-end;
	}
}

.hedera-reviews__score {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.hedera-reviews__score strong {
	color: var(--hedera-forest-950);
	font-size: var(--hedera-text-xl);
	font-weight: 700;
}

/* text-yellow-400 lit, text-gray-300 not */
.hedera-reviews__stars {
	display: inline-flex;
	gap: 0.25rem;
}

.hedera-reviews__stars .hedera-icon {
	color: #d1d5db;
	height: 14px;
	width: 14px;
}

.hedera-reviews__stars .hedera-icon.is-lit {
	color: #facc15;
}

.hedera-reviews__stars--large {
	gap: 0;
}

.hedera-reviews__stars--large .hedera-icon {
	height: 20px;
	width: 20px;
}

/* text-[#0a3e2c]/60 text-sm tracking-wide uppercase */
.hedera-reviews__count {
	color: rgba(10, 62, 44, 0.6);
	font-size: var(--hedera-text-sm);
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

/* relative mb-16 */
.hedera-reviews__carousel {
	margin-bottom: 4rem;
	position: relative;
}

.hedera-reviews__viewport {
	overflow: hidden;
}

/* flex gap-6; the spring is stiffness 300, damping 30 — half a second, no overshoot */
.hedera-reviews__track {
	cursor: grab;
	display: flex;
	gap: 1.5rem;
	touch-action: pan-y;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	user-select: none;
	width: 100%;
}

.hedera-reviews__track.is-dragging {
	cursor: grabbing;
	transition: none;
}

/* w-full md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] flex-shrink-0 */
.hedera-reviews__item {
	flex: 0 0 auto;
	width: 100%;
}

@media (min-width: 768px) {
	.hedera-reviews__item {
		width: calc(50% - 12px);
	}
}

@media (min-width: 1024px) {
	.hedera-reviews__item {
		width: calc(33.333% - 16px);
	}
}

/* bg-[#f8f9f8] p-8 rounded-[2rem] border border-neutral-100 flex flex-col h-full min-h-[280px] */
.hedera-reviews__card {
	background: var(--hedera-mist-50);
	border: 1px solid #f5f5f5;
	border-radius: 2rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 280px;
	padding: 2rem;
}

/* flex items-center justify-between mb-6 */
.hedera-reviews__meta {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.hedera-reviews__who {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	min-width: 0;
}

/* w-12 h-12 rounded-full overflow-hidden border border-white shadow-sm */
.hedera-reviews__avatar {
	background: var(--hedera-forest-800);
	border: 1px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	flex: 0 0 auto;
	height: 3rem;
	overflow: hidden;
	width: 3rem;
}

.hedera-reviews__avatar {
	position: relative;
}

.hedera-reviews__avatar img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.hedera-reviews__initial {
	align-items: center;
	color: #fff;
	display: flex;
	font-family: var(--hedera-font-heading);
	font-size: var(--hedera-text-lg);
	height: 100%;
	justify-content: center;
}

.hedera-reviews__name {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* text-[#04170f] font-semibold text-sm line-clamp-1; text-[#0a3e2c]/40 text-[10px] */
.hedera-reviews__name strong {
	color: var(--hedera-forest-950);
	font-size: var(--hedera-text-sm);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hedera-reviews__name small {
	color: rgba(10, 62, 44, 0.4);
	font-size: var(--hedera-text-label);
}

/* w-6 h-6 opacity-40 */
.hedera-icon--google {
	flex: 0 0 auto;
	height: 1.5rem;
	opacity: 0.4;
	width: 1.5rem;
}

.hedera-reviews__card > .hedera-reviews__stars {
	margin-bottom: 1rem;
}

/* text-[#0a3e2c] text-sm font-light leading-relaxed italic flex-grow line-clamp-6 */
.hedera-reviews__text {
	-webkit-box-orient: vertical;
	color: var(--hedera-forest-800);
	display: -webkit-box;
	flex-grow: 1;
	font-size: var(--hedera-text-sm);
	font-style: italic;
	font-weight: 300;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	line-height: 1.625;
	margin: 0 0 1rem;
	overflow: hidden;
}

/* flex justify-center gap-2 mt-10; w-2 h-2 rounded-full, the current one w-6 bg-[#04170f], the rest neutral-200 */
.hedera-reviews__dots {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 2.5rem;
}

.hedera-reviews__dots:empty {
	display: none;
}

.hedera-reviews__dot {
	background: #e5e5e5;
	border: 0;
	border-radius: 9999px;
	cursor: pointer;
	height: 0.5rem;
	padding: 0;
	transition: width 0.3s, background-color 0.3s;
	width: 0.5rem;
}

.hedera-reviews__dot.is-current {
	background: var(--hedera-forest-950);
	width: 1.5rem;
}

/* hidden lg:flex absolute top-1/2 -left-6 w-12 h-12 rounded-full bg-white shadow-lg border border-neutral-100 */
.hedera-reviews__arrow {
	align-items: center;
	background: #fff;
	border: 1px solid #f5f5f5;
	border-radius: 50%;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	color: var(--hedera-forest-950);
	cursor: pointer;
	display: none;
	height: 3rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: calc(50% - 2rem);
	transform: translateY(-50%);
	transition: background-color 0.3s, color 0.3s;
	width: 3rem;
	z-index: 20;
}

.hedera-reviews__arrow .hedera-icon {
	height: 1.5rem;
	stroke-width: 1.5;
	width: 1.5rem;
}

.hedera-reviews__arrow:hover,
.hedera-reviews__arrow:focus-visible {
	background: var(--hedera-forest-950);
	color: #fff;
}

.hedera-reviews__arrow--prev {
	left: -1.5rem;
}

.hedera-reviews__arrow--next {
	right: -1.5rem;
}

@media (min-width: 1024px) {
	.hedera-reviews__carousel.has-more .hedera-reviews__arrow {
		display: flex;
	}
}

/* flex flex-wrap items-center justify-center gap-6 */
.hedera-reviews__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}

/* px-10 py-5 rounded-full text-xs font-bold tracking-[0.2em] uppercase, gap-3 */
.hedera-reviews__pill {
	align-items: center;
	border-radius: 9999px;
	display: inline-flex;
	font-family: var(--hedera-font-body);
	font-size: var(--hedera-text-xs);
	font-weight: 700;
	gap: 0.75rem;
	letter-spacing: 0.2em;
	line-height: 1;
	padding: 1.25rem 2.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.5s, color 0.5s;
}

.hedera-reviews__pill .hedera-icon {
	height: 1rem;
	width: 1rem;
}

.hedera-reviews__pill--solid {
	background: var(--hedera-forest-950);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	color: #fff;
}

.hedera-reviews__pill--solid:hover {
	background: var(--hedera-forest-800);
	color: #fff;
}

.hedera-reviews__pill--outline {
	border: 1px solid rgba(4, 23, 15, 0.2);
	color: var(--hedera-forest-950);
}

.hedera-reviews__pill--outline:hover {
	background: #fafafa;
	color: var(--hedera-forest-950);
}

@media (prefers-reduced-motion: reduce) {
	.hedera-reviews__track,
	.hedera-reviews__dot {
		transition: none;
	}
}

/* ── Cropped media, wherever it appears ──────────────────────────────────────
 * Every framed picture in the theme is a box with a ratio and a photograph cropped to it.
 * The photograph used to be laid over the box, which reads correctly on a wide screen and
 * fails on a narrow one: a box whose only content is out of the flow has no height of its
 * own, and a ratio on such a box contributes nothing to the height of a column of flex
 * items — so the box collapses and the picture prints over whatever follows it. Chrome
 * shows this on the manifesto portrait, the service rows, the brand film, the project and
 * journal cards and the framed exhibit, all on a phone.
 *
 * In the flow the photograph carries the frame's own ratio, which gives it a real height
 * and gives the frame one. The crop is unchanged: object-fit still does that work.
 */

.hedera-portrait__frame .hedera-portrait__image,
.hedera-project__media .hedera-project__image,
.hedera-service__frame .hedera-service__image,
.hedera-post__media .hedera-post__image,
.hedera-film__poster .hedera-film__still,
.hedera-exhibit--gallery .hedera-exhibit__media {
	aspect-ratio: inherit;
	display: block;
	height: auto;
	inset: auto;
	position: relative;
	width: 100%;
}