/**
 * Treats Tea Room — core stylesheet.
 *
 * 1.  Design tokens
 * 2.  Reset & base
 * 3.  Typography
 * 4.  Layout primitives
 * 5.  Utilities & accessibility
 * 6.  Motion
 * 7.  Buttons & links
 * 8.  Header & navigation
 * 9.  Hero
 * 10. Sections & components
 * 11. Cards & media
 * 12. Reviews
 * 13. Gallery & Instagram
 * 14. Visit / map / hours
 * 15. Editorial content
 * 16. Comments & pagination
 * 17. Footer
 * 18. Blocks & widgets
 */

/* =========================================================================
   1. Design tokens
   ====================================================================== */

:root {
	/* Sage ground — the textured plaster the glass sits on */
	--sage-50: #f4f7f4;
	--sage-100: #e8efe8;
	--sage-200: #d3e0d4;
	--sage-300: #b4cbb6;
	--sage-400: #a9b6a4;
	--sage-500: #9daa98;
	--sage-600: #8b9886;
	--sage-700: #6f7c6b;
	--sage-800: #4c554a;
	--sage-900: #2b302a;

	/* Gold — icons, rules, button outlines. Two tones: one safe for text,
	   one brighter for decoration where contrast rules do not apply. */
	/* Two golds: --gold is used for text and must clear 4.5:1 on glass;
	   --gold-mid and --gold-bright are decorative only (icons, rules,
	   borders) where contrast minimums do not apply. Both flip with the
	   colour scheme, so never hard-code either in a component. */
	--gold: #443410;
	--gold-mid: #a8873c;
	--gold-bright: #c8ab6c;
	--gold-pale: #e2d3ac;

	/* Semantic colour — light */
	--c-bg: #a3b09e;
	--c-bg-alt: #9aa795;
	--c-surface: rgba(255, 255, 255, 0.24);
	--c-surface-2: rgba(255, 255, 255, 0.38);
	--c-ink: #1e221e;
	--c-ink-soft: #343930;
	--c-ink-mute: #363c34;
	--c-line: rgba(255, 255, 255, 0.42);
	--c-line-strong: rgba(138, 109, 44, 0.55);
	--c-accent: #443410;
	--c-accent-strong: #372a0c;
	--c-accent-soft: rgba(226, 211, 172, 0.4);
	--c-accent-ink: #372a0c;
	--c-brass: #443410;
	--c-on-accent: #ffffff;
	--c-scrim: rgba(30, 36, 29, 0.55);
	--c-header-bg: transparent;

	/* Glass */
	/* Clear glass floating over the sage ground. The body of a panel carries
	   no fill of its own — it is exactly the colour of the background behind
	   it, only smoothed, the way a clean pane smooths what you see through
	   it. Everything that says "glass" happens at the edges: a lit rim, a
	   bevel for thickness, a refracted band just inside the border, and one
	   sharp specular streak. Everything that says "floating" is the shadow:
	   a tight contact darkening, a mid drop, and a long soft cast. */
	--glass-bg: transparent;
	--glass-bg-strong: rgba(255, 255, 255, 0.09);
	--glass-bg-fallback: rgba(255, 255, 255, 0.24);
	/* Controls are sunk into the pane rather than laid on top of it: a
	   whisper of fill and a shadow falling inwards from the top edge. */
	--glass-recess: rgba(255, 255, 255, 0.18);
	--glass-recess-shadow: inset 0 1px 2px rgba(46, 56, 43, 0.16);
	/* Panels have no drawn outline at all — a hairline is the one thing real
	   glass never has. Their edge is feathered instead, in the "frosted edge"
	   section below. This token is for controls, which do still need a
	   visible boundary. */
	--glass-border: rgba(255, 255, 255, 0.72);
	--glass-blur: 2px;
	/* No brightness, no saturation shift — the pane must not tint the ground. */
	--glass-filter: blur(var(--glass-blur));
	/* The feathered edge. Four values: how far the milk carries in from a lit
	   edge and from an unlit one, how bright it is on each, and where the
	   whole band has faded to nothing. No hard number anywhere in it — every
	   one of these is the far end of a gradient, not a boundary. */
	--frost-depth: 22px;
	--frost-depth-dim: 20px;
	--frost-fade: 24px;
	--frost-top: 0.5;
	--frost-side: 0.42;
	--frost-dim: 0.3;
	--glass-divider: linear-gradient(
		to bottom,
		transparent 0%,
		color-mix(in srgb, var(--gold-mid) 45%, transparent) 22%,
		color-mix(in srgb, var(--gold-mid) 45%, transparent) 78%,
		transparent 100%
	);
	/* Reflections only: a narrow specular streak and a hairline catch along
	   the top and bottom edges. Nothing that washes across the body. */
	--glass-sheen:
		linear-gradient(114deg, transparent 35%, rgba(255, 255, 255, 0.17) 40%, rgba(255, 255, 255, 0.04) 43.5%, transparent 47%),
		linear-gradient(114deg, transparent 61%, rgba(255, 255, 255, 0.06) 64.5%, transparent 68%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.05) 100%);
	/* Three drops and nothing else: a tight contact darkening, a mid drop and
	   a long soft cast. No inset anything — an inset highlight is a rim, and
	   the rim here is the feather, not a shadow. */
	--glass-shadow:
		0 2px 3px rgba(46, 56, 43, 0.14),
		0 10px 22px -12px rgba(46, 56, 43, 0.3),
		0 34px 60px -30px rgba(46, 56, 43, 0.5);

	--shadow-xs: 0 1px 2px rgba(35, 45, 33, 0.06);
	--shadow-sm: 0 4px 14px -8px rgba(35, 45, 33, 0.25);
	--shadow-md: 0 14px 40px -18px rgba(35, 45, 33, 0.35);
	--shadow-lg: 0 24px 60px -26px rgba(35, 45, 33, 0.42);
	--shadow-xl: 0 40px 90px -40px rgba(35, 45, 33, 0.5);

	/* Typography */
	--font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;

	--fs-2xs: 0.75rem;
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1rem;
	--fs-md: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
	--fs-lg: clamp(1.2rem, 0.7vw + 1.05rem, 1.5rem);
	--fs-xl: clamp(1.5rem, 1.4vw + 1.2rem, 2.1rem);
	--fs-2xl: clamp(1.9rem, 2.4vw + 1.35rem, 3rem);
	--fs-3xl: clamp(2.4rem, 4vw + 1.4rem, 4.25rem);

	--lh-tight: 1.1;
	--lh-snug: 1.25;
	--lh-base: 1.75;
	--tracking-wide: 0.16em;
	--tracking-caps: 0.1em;

	/* Space */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;

	--section-y: clamp(2.5rem, 4.5vw, 4.5rem);
	--section-y-sm: clamp(2rem, 3vw, 3rem);

	/* Layout */
	--w-page: 1240px;
	--w-wide: 1180px;
	--w-content: 760px;
	--w-narrow: 620px;
	--gutter: clamp(1rem, 3vw, 2rem);
	/* Grows at the first breakpoint: the logotype is a full lockup — script,
	   swash and the TEA ROOMS | CAFE line — and it needs the room. */
	--t-header-h: 88px;

	/* Radii — soft, generous, matching the glass panels */
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 26px;
	--r-xl: 32px;
	--r-pill: 999px;

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 160ms;
	--dur: 300ms;
	--dur-slow: 700ms;

	color-scheme: light;
}

/* The header bar has room to breathe once there is a viewport to spare, and
   the logo follows it — see `.site-logo__img`. */
@media (min-width: 640px) {
	:root {
		--t-header-h: 100px;
	}
}

/* Dark mode keeps the same glass language over a deep sage night ground. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-bg: #232a22;
		--c-bg-alt: #1d221c;
		--c-surface: rgba(255, 255, 255, 0.07);
		--c-surface-2: rgba(255, 255, 255, 0.11);
		--c-ink: #eef1ec;
		--c-ink-soft: #d2d8cf;
		--c-ink-mute: #b3bbb0;
		--c-line: rgba(255, 255, 255, 0.16);
		--c-line-strong: rgba(226, 211, 172, 0.5);
		--gold: #e6cf9d;
		--gold-mid: #dcc188;
		--gold-bright: #eddcb4;
		--c-accent: #dcc188;
		--c-accent-strong: #e6cf9d;
		--c-accent-soft: rgba(220, 193, 136, 0.16);
		--c-accent-ink: #eddcb4;
		--c-brass: #dcc188;
		--c-on-accent: #232a22;
		--c-scrim: rgba(8, 11, 8, 0.7);

		--glass-bg: transparent;
		--glass-bg-strong: rgba(255, 255, 255, 0.08);
		--glass-bg-fallback: rgba(20, 25, 19, 0.3);
		--glass-recess: rgba(255, 255, 255, 0.07);
		--glass-recess-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
		--glass-border: rgba(255, 255, 255, 0.3);
		--glass-filter: blur(var(--glass-blur));
		--frost-depth: 22px;
		--frost-depth-dim: 20px;
		--frost-fade: 24px;
		--frost-top: 0.22;
		--frost-side: 0.18;
		--frost-dim: 0.12;
		--glass-sheen:
			linear-gradient(114deg, transparent 35%, rgba(255, 255, 255, 0.09) 40%, rgba(255, 255, 255, 0.02) 43.5%, transparent 47%),
			linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.04) 100%);
		--glass-shadow:
			0 2px 3px rgba(0, 0, 0, 0.4),
			0 10px 22px -12px rgba(0, 0, 0, 0.55),
			0 34px 60px -30px rgba(0, 0, 0, 0.78);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--c-bg: #232a22;
	--c-bg-alt: #1d221c;
	--c-surface: rgba(255, 255, 255, 0.07);
	--c-surface-2: rgba(255, 255, 255, 0.11);
	--c-ink: #eef1ec;
	--c-ink-soft: #d2d8cf;
	--c-ink-mute: #b3bbb0;
	--c-line: rgba(255, 255, 255, 0.16);
	--c-line-strong: rgba(226, 211, 172, 0.5);
	--gold: #e6cf9d;
	--gold-mid: #dcc188;
	--gold-bright: #eddcb4;
	--c-accent: #dcc188;
	--c-accent-strong: #e6cf9d;
	--c-accent-soft: rgba(220, 193, 136, 0.16);
	--c-accent-ink: #eddcb4;
	--c-brass: #dcc188;
	--c-on-accent: #232a22;
	--c-scrim: rgba(8, 11, 8, 0.7);

	--glass-bg: transparent;
	--glass-bg-strong: rgba(255, 255, 255, 0.08);
	--glass-bg-fallback: rgba(20, 25, 19, 0.3);
	--glass-recess: rgba(255, 255, 255, 0.07);
	--glass-recess-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
	--glass-border: rgba(255, 255, 255, 0.3);
	--glass-filter: blur(var(--glass-blur));
	--frost-depth: 22px;
	--frost-depth-dim: 20px;
	--frost-fade: 24px;
	--frost-top: 0.22;
	--frost-side: 0.18;
	--frost-dim: 0.12;
	--glass-sheen:
		linear-gradient(114deg, transparent 35%, rgba(255, 255, 255, 0.09) 40%, rgba(255, 255, 255, 0.02) 43.5%, transparent 47%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.04) 100%);
	--glass-shadow:
		0 2px 3px rgba(0, 0, 0, 0.4),
		0 10px 22px -12px rgba(0, 0, 0, 0.55),
		0 34px 60px -30px rgba(0, 0, 0, 0.78);

	color-scheme: dark;
}

/* =========================================================================
   2. Reset & base
   ====================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--t-header-h) + 1.5rem);
	tab-size: 4;
}

body {
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	/* The page background is deliberately NOT transitioned. Animating it means
	   every backdrop-filtered panel on the page re-samples its backdrop on
	   every frame of the fade, which is the most expensive thing this theme
	   could possibly animate — measured, it could stall the scheme flip for
	   longer than the fade itself. Switching schemes is instant. */
}

body.is-locked {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

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

button {
	background: none;
	border: 0;
	cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote,
dl,
dd {
	overflow-wrap: break-word;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--c-line);
	margin: var(--sp-7) 0;
}

/* Components set `display` on themselves, which would otherwise beat the
   user-agent rule for the `hidden` attribute. */
[hidden] {
	display: none !important;
}

::selection {
	background: var(--c-accent-soft);
	color: var(--c-accent-ink);
}

:target {
	scroll-margin-top: calc(var(--t-header-h) + 2rem);
}

/* =========================================================================
   3. Typography
   ====================================================================== */

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: -0.005em;
	color: var(--c-ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-3xl);
	line-height: var(--lh-tight);
	letter-spacing: -0.018em;
}

h2 {
	font-size: var(--fs-2xl);
	letter-spacing: -0.012em;
}

h3 {
	font-size: var(--fs-xl);
}

h4 {
	font-size: var(--fs-lg);
}

h5,
h6 {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
	color: var(--c-accent-strong);
	text-decoration-color: currentColor;
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: var(--fs-sm);
}

blockquote {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: 1.4;
	border-left: 2px solid var(--c-accent);
	padding-left: var(--sp-5);
	color: var(--c-ink-soft);
	font-style: italic;
}

code,
pre,
kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
}

code {
	background: var(--c-surface-2);
	padding: 0.15em 0.4em;
	border-radius: var(--r-sm);
}

pre {
	background: var(--c-surface-2);
	padding: var(--sp-5);
	border-radius: var(--r-md);
	overflow-x: auto;
	border: 1px solid var(--c-line);
}

/* Shared display treatments */

.eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-2xs);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-accent-strong);
	margin-bottom: var(--sp-4);
}

.lede {
	font-size: var(--fs-md);
	line-height: 1.6;
	color: var(--c-ink-soft);
}

.display {
	font-family: var(--font-display);
	font-weight: 300;
}

.text-mute {
	color: var(--c-ink-mute);
}

/* =========================================================================
   4. Layout primitives
   ====================================================================== */

.container {
	width: 100%;
	max-width: var(--w-page);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--wide {
	max-width: var(--w-wide);
}

.container--content {
	max-width: var(--w-content);
}

.container--narrow {
	max-width: var(--w-narrow);
}

.section {
	padding-block: var(--section-y);
	position: relative;
}

.section--sm {
	padding-block: var(--section-y-sm);
}

.section--tint {
	background: var(--c-bg-alt);
}

.section--surface {
	background: var(--c-surface);
}

.section--cream {
	background: var(--c-surface-2);
}

.section--deep {
	background: var(--sage-900);
	color: #eef2ee;
}

.section--deep h1,
.section--deep h2,
.section--deep h3 {
	color: #fbfdfb;
}

.section--deep .eyebrow {
	color: var(--sage-300);
}

.section--deep .lede,
.section--deep p {
	color: rgba(238, 242, 238, 0.78);
}

.stack > * + * {
	margin-top: var(--sp-4);
}

.stack-lg > * + * {
	margin-top: var(--sp-6);
}

.grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem);
}

.grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.split {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.split {
		grid-template-columns: 1fr 1fr;
	}

	.split--wide-left {
		grid-template-columns: 1.15fr 1fr;
	}

	.split--wide-right {
		grid-template-columns: 1fr 1.15fr;
	}

	.split--reverse > :first-child {
		order: 2;
	}
}

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

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

.section-heading--left {
	margin-inline: 0;
}

.section-heading__title {
	margin-bottom: var(--sp-4);
}

.section-heading__intro {
	font-size: var(--fs-md);
	color: var(--c-ink-soft);
	max-width: 40rem;
}

.section-heading--center .section-heading__intro {
	margin-inline: auto;
}

.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	color: var(--c-accent);
	margin-block: var(--sp-6);
}

.divider__line {
	height: 1px;
	width: min(80px, 12vw);
	background: linear-gradient(90deg, transparent, var(--c-line-strong));
}

.divider__line:last-child {
	background: linear-gradient(270deg, transparent, var(--c-line-strong));
}

/* =========================================================================
   5. Utilities & accessibility
   ====================================================================== */

.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -120%);
	z-index: 200;
	background: var(--c-accent-strong);
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 0 0 var(--r-md) var(--r-md);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus {
	transform: translate(-50%, 0);
	color: #fff;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--c-accent-strong);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

.text-center {
	text-align: center;
}

.hide {
	display: none !important;
}

@media (max-width: 767px) {
	.hide-sm {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.hide-lg {
		display: none !important;
	}
}

.flow-gap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
}

.actions--center {
	justify-content: center;
}

/* =========================================================================
   6. Motion
   ====================================================================== */

[data-reveal] {
	opacity: 0;
	transition:
		opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
		transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-reveal="up"] {
	transform: translate3d(0, 28px, 0);
}

[data-reveal="scale"] {
	transform: scale(0.965);
}

[data-reveal="fade"] {
	transform: none;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Without JavaScript nothing would ever reveal, so show everything. */
.no-js [data-reveal] {
	opacity: 1;
	transform: none;
}

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

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

	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   7. Buttons & links
   ====================================================================== */

.btn {
	--btn-bg: var(--c-accent-strong);
	--btn-ink: var(--c-on-accent);
	--btn-border: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95rem 1.75rem;
	background: var(--btn-bg);
	color: var(--btn-ink);
	border: 1px solid var(--btn-border);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.btn:hover {
	color: var(--btn-ink);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn:active {
	transform: translateY(0);
	box-shadow: var(--shadow-xs);
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

/* In dark mode the accent is a light sage, so the label must be dark ink —
   white on light sage fails contrast badly. --c-on-accent flips for us. */
.btn--primary {
	--btn-bg: var(--c-accent-strong);
	--btn-ink: var(--c-on-accent);
}

.btn--secondary {
	--btn-bg: transparent;
	--btn-ink: var(--c-ink);
	--btn-border: var(--c-line-strong);
}

.btn--secondary:hover {
	--btn-bg: var(--c-accent-soft);
	--btn-ink: var(--c-accent-ink);
	--btn-border: transparent;
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-ink: var(--c-ink);
	--btn-border: transparent;
	padding-inline: 0.75rem;
}

.btn--ghost:hover {
	--btn-ink: var(--c-accent-strong);
	box-shadow: none;
}

.btn--light {
	--btn-bg: rgba(255, 255, 255, 0.95);
	--btn-ink: var(--sage-900);
}

.btn--outline-light {
	--btn-bg: transparent;
	--btn-ink: #fff;
	--btn-border: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(6px);
}

.btn--outline-light:hover {
	--btn-bg: rgba(255, 255, 255, 0.14);
	--btn-border: rgba(255, 255, 255, 0.85);
}

.btn--sm {
	padding: 0.7rem 1.25rem;
	font-size: var(--fs-xs);
}

.btn--lg {
	padding: 1.1rem 2.25rem;
	font-size: var(--fs-base);
}

.btn--block {
	width: 100%;
}

.btn .icon {
	transition: transform var(--dur) var(--ease-out);
}

.btn:hover .icon--arrow-right {
	transform: translateX(3px);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-accent-strong);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--c-accent-strong) 30%, transparent);
	padding-bottom: 2px;
}

.link-arrow:hover {
	border-bottom-color: currentColor;
}

.link-arrow .icon {
	transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover .icon {
	transform: translateX(4px);
}

/* Pills & badges */

.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.85em;
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent-ink);
	font-size: var(--fs-2xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pill--brass {
	background: color-mix(in srgb, var(--c-brass) 16%, transparent);
	color: var(--c-brass);
}

.pill--outline {
	background: transparent;
	border: 1px solid var(--c-line-strong);
	color: var(--c-ink-mute);
}

/* =========================================================================
   8. Header & navigation
   ====================================================================== */

.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	height: var(--t-header-h);
	display: flex;
	align-items: center;
	transition:
		background-color var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out),
		height var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out);
	border-bottom: 1px solid transparent;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	width: 100%;
}

/* Transparent while sitting over the hero */
.site-header--over {
	background: transparent;
	color: #fff;
}

.site-header--over .site-logo,
.site-header--over .nav__link,
.site-header--over .header-action {
	color: #fff;
}

.site-header--over .site-logo__tag {
	color: rgba(255, 255, 255, 0.72);
}

.site-header--over .nav__link::after {
	background: #fff;
}

.site-header--over .btn--secondary {
	--btn-ink: #fff;
	--btn-border: rgba(255, 255, 255, 0.45);
}

/* Solid once scrolled */
.site-header.is-stuck {
	background: var(--c-header-bg);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: var(--c-line);
	box-shadow: var(--shadow-sm);
	color: var(--c-ink);
}

.site-header.is-stuck .site-logo,
.site-header.is-stuck .nav__link,
.site-header.is-stuck .header-action {
	color: var(--c-ink);
}

.site-header.is-stuck .site-logo__tag {
	color: var(--c-ink-mute);
}

.site-header.is-stuck .btn--secondary {
	--btn-ink: var(--c-ink);
	--btn-border: var(--c-line-strong);
}

/* While the mobile drawer is open the header sits on the drawer's light
   background, so the transparent-over-hero treatment must be dropped. */
.site-header.is-nav-open,
.site-header.is-nav-open.site-header--over {
	background: var(--c-bg);
	color: var(--c-ink);
	border-bottom-color: var(--c-line);
}

.site-header.is-nav-open .site-logo,
.site-header.is-nav-open .nav__link,
.site-header.is-nav-open .header-action,
.site-header.is-nav-open .nav-toggle {
	color: var(--c-ink);
}

.site-header.is-nav-open .site-logo__mark {
	color: var(--c-accent);
}

.site-header.is-nav-open .site-logo__tag {
	color: var(--c-ink-mute);
}

/* Hide on scroll down, reveal on scroll up */
.site-header.is-hidden {
	transform: translateY(-100%);
	transition: transform var(--dur) var(--ease-in-out);
}

.site-header:not(.is-hidden) {
	transform: translateY(0);
}

/* Logo */

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--c-ink);
	flex-shrink: 0;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.site-logo:hover {
	opacity: 0.75;
	color: inherit;
}

.site-logo__mark {
	color: var(--c-accent);
	flex-shrink: 0;
}

.site-header--over .site-logo__mark {
	color: rgba(255, 255, 255, 0.9);
}

.site-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.site-logo__name {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.005em;
}

.site-logo__tag {
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	font-weight: 500;
}

.site-logo__img {
	/* A definite height, not `max-height` on an auto-sized box. The logo is a
	   flex item inside a flex item that is itself sized from its content, and
	   in that position a percentage `max-width` — which every image inherits
	   from the reset — has nothing definite to resolve against and collapses
	   the image to zero. A fixed height and a viewport-relative cap break the
	   circularity. */
	height: calc(var(--t-header-h) - 32px);
	width: auto;
	max-width: min(240px, 46vw);
	object-fit: contain;
}

/* Desktop navigation */

.primary-nav {
	display: none;
}

@media (min-width: 1080px) {
	.primary-nav {
		display: block;
		margin-inline: auto;
	}
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 1.4vw, 1.1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__item {
	position: relative;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem 0.55rem;
	font-size: var(--fs-sm);
	font-weight: 450;
	color: var(--c-ink);
	text-decoration: none;
	position: relative;
	white-space: nowrap;
}

.nav__link::after {
	content: "";
	position: absolute;
	left: 0.55rem;
	right: 0.55rem;
	bottom: 0.15rem;
	height: 1px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover::after,
.nav__item.is-current > .nav__link::after {
	transform: scaleX(1);
}

.nav__link.btn::after {
	display: none;
}

.nav__toggle {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

@media (min-width: 1080px) {
	.has-dropdown > .nav__link {
		padding-right: 1.35rem;
	}

	.has-dropdown > .nav__link::before {
		content: "";
		position: absolute;
		right: 0.5rem;
		top: 50%;
		width: 6px;
		height: 6px;
		border-right: 1.2px solid currentColor;
		border-bottom: 1.2px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		opacity: 0.55;
		transition: transform var(--dur) var(--ease-out);
	}

	.has-dropdown:hover > .nav__link::before,
	.has-dropdown.is-open > .nav__link::before {
		transform: translateY(-30%) rotate(225deg);
	}

	.sub-menu {
		position: absolute;
		top: calc(100% + 0.6rem);
		left: 50%;
		transform: translateX(-50%) translateY(-6px);
		min-width: 250px;
		padding: 0.5rem;
		margin: 0;
		list-style: none;
		background: var(--c-surface);
		border: 1px solid var(--c-line);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--dur) var(--ease-out),
			transform var(--dur) var(--ease-out),
			visibility var(--dur);
	}

	.sub-menu::before {
		content: "";
		position: absolute;
		inset: -0.6rem 0 auto;
		height: 0.6rem;
	}

	.has-dropdown:hover > .sub-menu,
	.has-dropdown:focus-within > .sub-menu,
	.has-dropdown.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}

	.sub-menu .nav__link {
		display: block;
		width: 100%;
		padding: 0.7rem 0.9rem;
		border-radius: var(--r-md);
		color: var(--c-ink);
		transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
	}

	.sub-menu .nav__link::after {
		display: none;
	}

	.sub-menu .nav__link:hover {
		background: var(--c-accent-soft);
		color: var(--c-accent-ink);
	}
}

/* Header actions */

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-shrink: 0;
}

.header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--r-pill);
	color: var(--c-ink);
	background: transparent;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.header-action:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
}

.header-action--cta {
	display: none;
}

@media (min-width: 700px) {
	.header-action--cta {
		display: inline-flex;
	}
}

.theme-toggle__icon--moon {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle__icon--sun {
		display: none;
	}

	:root:not([data-theme="light"]) .theme-toggle__icon--moon {
		display: block;
	}
}

/* Mobile menu button */

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--r-pill);
	color: inherit;
}

@media (min-width: 1080px) {
	.nav-toggle {
		display: none;
	}
}

.nav-toggle__bars {
	position: relative;
	width: 20px;
	height: 12px;
}

.nav-toggle__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bar:nth-child(1) {
	top: 0;
}

.nav-toggle__bar:nth-child(2) {
	top: 5px;
}

.nav-toggle__bar:nth-child(3) {
	top: 10px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* Mobile drawer */

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--c-bg);
	padding: calc(var(--t-header-h) + var(--sp-6)) var(--gutter) var(--sp-7);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out),
		visibility var(--dur);
}

.mobile-nav.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (min-width: 1080px) {
	.mobile-nav {
		display: none;
	}
}

.mobile-nav .nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.mobile-nav .nav__item {
	border-bottom: 1px solid var(--c-line);
}

.mobile-nav .nav__link {
	font-family: var(--font-display);
	font-size: 1.65rem;
	font-weight: 400;
	padding: 1rem 0;
	width: 100%;
	justify-content: space-between;
}

.mobile-nav .nav__link::after {
	display: none;
}

.mobile-nav .nav__link.btn {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	justify-content: center;
	margin-block: var(--sp-4);
	padding: 0.95rem 1.75rem;
}

/* .nav__link is declared after .btn, so items promoted to buttons need the
   button's own ink colour restated. */
.nav__link.btn {
	color: var(--btn-ink);
}

/* A promoted CTA is visually self-contained — no divider under it. */
.mobile-nav .nav__item.is-cta,
.mobile-nav .nav__item:last-child {
	border-bottom: 0;
}

.mobile-nav .has-dropdown {
	position: relative;
}

.mobile-nav .nav__toggle {
	position: absolute;
	top: 0;
	right: 0;
	inset-inline-start: auto;
	width: 56px;
	height: 60px;
	opacity: 1;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-ink-mute);
}

.mobile-nav .nav__toggle .icon {
	transition: transform var(--dur) var(--ease-out);
}

.mobile-nav .nav__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.mobile-nav .sub-menu {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--dur) var(--ease-out);
}

.mobile-nav .sub-menu .nav__item {
	border-bottom: 0;
}

.mobile-nav .sub-menu .nav__link {
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	color: var(--c-ink-soft);
	padding: 0.6rem 0 0.6rem 1rem;
	border-left: 1px solid var(--c-line);
}

.mobile-nav__meta {
	margin-top: var(--sp-7);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
	display: grid;
	gap: var(--sp-4);
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
}

.mobile-nav__meta a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}

/* =========================================================================
   9. Hero
   ====================================================================== */

.hero {
	position: relative;
	min-height: min(92svh, 900px);
	display: flex;
	align-items: flex-end;
	padding-top: calc(var(--t-header-h) + var(--sp-8));
	padding-bottom: clamp(3rem, 8vh, 6.5rem);
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(155deg, var(--sage-700) 0%, var(--sage-800) 45%, var(--sage-900) 100%);
}

.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	animation: hero-drift 24s var(--ease-in-out) infinite alternate;
}

@keyframes hero-drift {
	from {
		transform: scale(1.02);
	}

	to {
		transform: scale(1.09);
	}
}

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

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(16, 22, 17, 0.5) 0%, rgba(16, 22, 17, 0.06) 32%, rgba(16, 22, 17, 0.62) 78%, rgba(16, 22, 17, 0.82) 100%);
}

.hero__inner {
	position: relative;
	width: 100%;
	max-width: 44rem;
}

.hero__eyebrow {
	color: rgba(255, 255, 255, 0.86);
	margin-bottom: var(--sp-5);
}

.hero__title {
	color: #fff;
	font-weight: 300;
	margin-bottom: var(--sp-5);
	text-shadow: 0 2px 30px rgba(10, 16, 11, 0.35);
}

.hero__intro {
	font-size: var(--fs-md);
	color: rgba(255, 255, 255, 0.88);
	max-width: 34rem;
	margin-bottom: var(--sp-6);
	text-shadow: 0 1px 20px rgba(10, 16, 11, 0.3);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.hero__status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: var(--sp-6);
	padding: 0.5rem 1rem 0.5rem 0.75rem;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.95);
}

.hero__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7ed08b;
	box-shadow: 0 0 0 4px rgba(126, 208, 139, 0.25);
	flex-shrink: 0;
}

.hero__status--closed .hero__status-dot {
	background: #e0a15c;
	box-shadow: 0 0 0 4px rgba(224, 161, 92, 0.22);
}

.hero__scroll {
	position: absolute;
	bottom: clamp(1rem, 3vh, 2rem);
	left: 50%;
	transform: translateX(-50%);
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
}

@media (min-width: 900px) {
	.hero__scroll {
		display: flex;
	}
}

.hero__scroll-line {
	width: 1px;
	height: 44px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
	position: relative;
	overflow: hidden;
}

.hero__scroll-line::after {
	content: "";
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.95);
	animation: scroll-hint 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-hint {
	0% {
		transform: translateY(0);
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	100% {
		transform: translateY(200%);
		opacity: 0;
	}
}

/* Interior page hero */

.page-hero {
	position: relative;
	padding-top: calc(var(--t-header-h) + clamp(2.5rem, 6vw, 4.5rem));
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
	background: transparent;
	overflow: hidden;
	isolation: isolate;
}

.page-hero--image {
	background: var(--sage-800);
	color: #fff;
}

.page-hero--image::after {
	display: none;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.page-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 22, 17, 0.55) 0%, rgba(16, 22, 17, 0.35) 50%, rgba(16, 22, 17, 0.72) 100%);
}

.page-hero--image .page-hero__title,
.page-hero--image .breadcrumbs {
	color: #fff;
}

.page-hero--image .page-hero__eyebrow {
	color: rgba(255, 255, 255, 0.82);
}

.page-hero--image .page-hero__intro {
	color: rgba(255, 255, 255, 0.88);
}

.page-hero--image .breadcrumbs a {
	color: rgba(255, 255, 255, 0.8);
}

.page-hero__inner {
	position: relative;
	max-width: 46rem;
	padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
	background-color: var(--glass-bg);
	background-image: var(--glass-sheen);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}

.page-hero--center .page-hero__inner {
	max-width: 52rem;
}

.page-hero--center .page-hero__inner {
	margin-inline: auto;
	text-align: center;
}

.page-hero__title {
	font-weight: 300;
	margin-bottom: var(--sp-4);
}

.page-hero__intro {
	font-size: var(--fs-md);
	color: var(--c-ink-soft);
	max-width: 38rem;
}

.page-hero--center .page-hero__intro {
	margin-inline: auto;
}

.page-hero__actions {
	margin-top: var(--sp-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.page-hero--compact {
	padding-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* Breadcrumbs */

.breadcrumbs {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-xs);
	color: var(--c-ink-mute);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

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

.breadcrumbs a:hover {
	color: var(--c-accent-strong);
}

.breadcrumbs__sep {
	opacity: 0.5;
	display: inline-flex;
}

/* =========================================================================
   10. Sections & components
   ====================================================================== */

/* Feature strip — the small trust row under the hero */

.feature-strip {
	border-bottom: 1px solid var(--c-line);
	background: var(--c-surface);
}

.feature-strip__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: var(--sp-6) 0;
	list-style: none;
}

.feature-strip__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.feature-strip__item .icon {
	color: var(--c-accent);
	flex-shrink: 0;
	margin-top: 0.15rem;
}

.feature-strip__item strong {
	display: block;
	color: var(--c-ink);
	font-weight: 550;
	margin-bottom: 0.1rem;
}

/* Stat row */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: var(--sp-6);
	text-align: center;
}

/* Three across in a narrow column, left aligned — used beside body copy. */
.stats--inline {
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: clamp(1.5rem, 4vw, 3rem);
	text-align: left;
}

@media (max-width: 480px) {
	.stats--inline {
		grid-template-columns: repeat(2, auto);
	}
}

.stat__value {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	line-height: 1;
	color: var(--c-accent-strong);
	margin-bottom: var(--sp-2);
}

.section--deep .stat__value {
	color: var(--sage-300);
}

.stat__label {
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}

.section--deep .stat__label {
	color: rgba(238, 242, 238, 0.78);
}

/* CTA banner */

.cta-banner {
	position: relative;
	overflow: hidden;
	background: linear-gradient(140deg, var(--sage-700), var(--sage-900));
	color: #fff;
	border-radius: var(--r-xl);
	padding: clamp(2.5rem, 6vw, 5rem);
	text-align: center;
	isolation: isolate;
}

.cta-banner::before,
.cta-banner::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
}

.cta-banner::before {
	width: 420px;
	height: 420px;
	top: -180px;
	right: -120px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 68%);
}

.cta-banner::after {
	width: 340px;
	height: 340px;
	bottom: -160px;
	left: -100px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.09), transparent 68%);
}

.cta-banner h2 {
	color: #fff;
	font-weight: 300;
	max-width: 22ch;
	margin-inline: auto;
	margin-bottom: var(--sp-4);
}

.cta-banner p {
	color: rgba(255, 255, 255, 0.82);
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--sp-6);
	font-size: var(--fs-md);
}

.cta-banner .eyebrow {
	color: var(--sage-300);
}

/* Accordion */

.accordion {
	border-top: 1px solid var(--c-line);
}

.accordion__item {
	border-bottom: 1px solid var(--c-line);
}

.accordion__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-5);
	width: 100%;
	padding: var(--sp-5) 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: 1.3;
	color: var(--c-ink);
	transition: color var(--dur-fast) var(--ease-out);
}

.accordion__trigger:hover {
	color: var(--c-accent-strong);
}

.accordion__icon {
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 0.35rem;
	border-radius: 50%;
	border: 1px solid var(--c-line-strong);
	transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.accordion__icon::before {
	width: 9px;
	height: 1.3px;
}

.accordion__icon::after {
	width: 1.3px;
	height: 9px;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
	background: var(--c-accent-soft);
	border-color: transparent;
	color: var(--c-accent-ink);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur) var(--ease-out);
}

.accordion__panel > div {
	overflow: hidden;
}

.accordion__item.is-open .accordion__panel {
	grid-template-rows: 1fr;
}

.accordion__content {
	padding-bottom: var(--sp-5);
	max-width: 62ch;
	color: var(--c-ink-soft);
}

.accordion__content > * + * {
	margin-top: var(--sp-4);
}

/* Tabs (used for FAQ topics and menu filters) */

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-6);
}

.tab {
	padding: 0.6rem 1.15rem;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line);
	background: transparent;
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	transition:
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.tab:hover {
	border-color: var(--c-line-strong);
	color: var(--c-ink);
}

.tab[aria-pressed="true"],
.tab.is-active {
	background: var(--c-accent-strong);
	border-color: transparent;
	color: var(--c-on-accent);
}

/* =========================================================================
   11. Cards & media
   ====================================================================== */

.media {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--c-bg-alt);
}

.media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.media--placeholder {
	display: grid;
	place-items: center;
	color: var(--sage-300);
	background:
		radial-gradient(circle at 30% 25%, var(--c-accent-soft), transparent 60%),
		linear-gradient(140deg, var(--c-bg-alt), var(--c-surface-2));
}

.media--round {
	border-radius: var(--r-xl);
}

.media--soft {
	box-shadow: var(--shadow-lg);
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition:
		transform var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.card:hover .media__img {
	transform: scale(1.045);
}

.card__body {
	padding: clamp(1.25rem, 2.5vw, 1.85rem);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	flex: 1;
}

.card__title {
	font-size: var(--fs-lg);
	line-height: 1.25;
}

.card__title a {
	text-decoration: none;
}

.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card__text {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	flex: 1;
}

.card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: auto;
	padding-top: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-accent-strong);
}

.card--flat {
	background: transparent;
	border: 0;
}

.card--flat:hover {
	box-shadow: none;
	transform: none;
}

.card--flat .card__body {
	padding-inline: 0;
	padding-bottom: 0;
}

.card__badge {
	position: absolute;
	top: var(--sp-4);
	left: var(--sp-4);
	z-index: 2;
	background: rgba(255, 255, 255, 0.94);
	color: var(--sage-800);
	backdrop-filter: blur(6px);
}

/* Menu highlight card — a category teaser on the home page */

.menu-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-lg);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
	min-height: 320px;
	background: var(--sage-700);
}

.menu-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: 0;
}

.menu-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(16, 22, 17, 0.12) 0%, rgba(16, 22, 17, 0.35) 45%, rgba(16, 22, 17, 0.82) 100%);
	transition: opacity var(--dur) var(--ease-out);
}

.menu-card:hover::after {
	opacity: 0.86;
}

.menu-card:hover .media__img {
	transform: scale(1.06);
}

.menu-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 320px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	gap: 0.4rem;
}

.menu-card__title {
	color: #fff;
	font-size: var(--fs-xl);
	font-weight: 400;
}

.menu-card__text {
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-sm);
	max-width: 32ch;
}

.menu-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: #fff;
}

.menu-card__link .icon {
	transition: transform var(--dur) var(--ease-out);
}

.menu-card:hover .menu-card__link .icon {
	transform: translateX(4px);
}

.menu-card--tall {
	min-height: 460px;
}

.menu-card--tall .menu-card__body {
	min-height: 460px;
}

@media (min-width: 900px) {
	.menu-grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: clamp(1rem, 2vw, 1.5rem);
	}

	.menu-grid > :nth-child(1) {
		grid-column: span 3;
	}

	.menu-grid > :nth-child(2) {
		grid-column: span 3;
	}

	.menu-grid > :nth-child(3),
	.menu-grid > :nth-child(4),
	.menu-grid > :nth-child(5) {
		grid-column: span 2;
	}
}

/* Featured dish list on the home page */

.dish-list {
	display: grid;
	gap: var(--sp-5);
}

@media (min-width: 700px) {
	.dish-list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-5) clamp(2rem, 5vw, 4.5rem);
	}
}

.dish {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line);
}

.dish__media {
	width: 84px;
	flex-shrink: 0;
	border-radius: var(--r-md);
}

.dish__body {
	flex: 1;
	min-width: 0;
}

.dish__head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: 0.25rem;
}

.dish__title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: 1.25;
	flex: 1;
}

.dish__price {
	font-size: var(--fs-sm);
	font-weight: 550;
	color: var(--c-accent-strong);
	white-space: nowrap;
}

.dish__text {
	font-size: var(--fs-sm);
	color: var(--c-ink-mute);
}

/* =========================================================================
   12. Reviews
   ====================================================================== */

.reviews {
	position: relative;
}

.reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(88vw, 400px);
	gap: var(--sp-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--sp-5);
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1024px) {
	.reviews__track {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

.review {
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	height: 100%;
}

.review__quote {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: 1.5;
	color: var(--c-ink);
	flex: 1;
}

.review__quote::before {
	content: "\201C";
	font-size: 2.5em;
	line-height: 0;
	vertical-align: -0.35em;
	color: var(--c-accent);
	margin-right: 0.08em;
}

.review__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
}

.review__author {
	font-weight: 550;
}

.review__source {
	color: var(--c-ink-mute);
	font-size: var(--fs-xs);
}

.stars {
	display: inline-flex;
	gap: 1px;
	color: var(--c-line-strong);
}

.stars__star.is-filled {
	color: var(--c-brass);
}

.stars__star.is-filled .icon {
	fill: currentColor;
}

.reviews__controls {
	display: flex;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

@media (min-width: 1024px) {
	.reviews__controls {
		display: none;
	}
}

.reviews__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--c-line-strong);
	color: var(--c-ink);
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.reviews__btn:hover {
	background: var(--c-accent-strong);
	border-color: transparent;
	color: var(--c-on-accent);
}

.reviews__btn .icon--chevron-right {
	transform: none;
}

.reviews__btn--prev .icon {
	transform: rotate(180deg);
}

.rating-summary {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0.6rem 1.1rem;
	border-radius: var(--r-pill);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	box-shadow: var(--shadow-xs);
}

/* =========================================================================
   13. Gallery & Instagram
   ====================================================================== */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: clamp(0.5rem, 1.2vw, 1rem);
}

.gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-bg-alt);
	aspect-ratio: 1;
	cursor: zoom-in;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.gallery-item:hover img {
	transform: scale(1.06);
}

.gallery-item--wide {
	grid-column: span 2;
	aspect-ratio: 2 / 1;
}

@media (max-width: 600px) {
	.gallery-item--wide {
		grid-column: span 1;
		aspect-ratio: 1;
	}
}

/* Lightbox */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: var(--gutter);
	background: rgba(10, 14, 11, 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox__img {
	max-width: min(100%, 1200px);
	max-height: 82vh;
	object-fit: contain;
	border-radius: var(--r-md);
	box-shadow: var(--shadow-xl);
}

.lightbox__caption {
	margin-top: var(--sp-4);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--fs-sm);
	text-align: center;
	max-width: 60ch;
}

.lightbox__close,
.lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: background-color var(--dur-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.lightbox__close {
	top: var(--gutter);
	right: var(--gutter);
}

.lightbox__nav--prev {
	left: var(--gutter);
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__nav--next {
	right: var(--gutter);
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__nav--prev .icon {
	transform: rotate(180deg);
}

/* Instagram */

.instagram-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(45%, 180px), 1fr));
	gap: clamp(0.4rem, 1vw, 0.75rem);
}

.instagram-item {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-bg-alt);
}

.instagram-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease-out);
}

.instagram-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 30, 22, 0.35);
	opacity: 0;
	transition: opacity var(--dur) var(--ease-out);
}

.instagram-item:hover::after {
	opacity: 1;
}

.instagram-item:hover img {
	transform: scale(1.07);
}

.instagram-item__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.85);
	z-index: 1;
	color: #fff;
	opacity: 0;
	transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.instagram-item:hover .instagram-item__icon {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.instagram-handle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-sm);
	text-decoration: none;
	color: var(--c-ink-soft);
}

/* =========================================================================
   14. Visit / map / hours
   ====================================================================== */

.hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.hours-table th,
.hours-table td {
	padding: 0.65rem 0;
	text-align: left;
	border-bottom: 1px solid var(--c-line);
	font-weight: 400;
}

.hours-table td {
	text-align: right;
	color: var(--c-ink-soft);
	font-variant-numeric: tabular-nums;
}

.hours-table tr:last-child th,
.hours-table tr:last-child td {
	border-bottom: 0;
}

.hours-table tr.is-today th,
.hours-table tr.is-today td {
	color: var(--c-accent-strong);
	font-weight: 550;
}

.section--deep .hours-table th,
.section--deep .hours-table td {
	border-color: rgba(255, 255, 255, 0.14);
	color: rgba(238, 242, 238, 0.82);
}

.section--deep .hours-table tr.is-today th,
.section--deep .hours-table tr.is-today td {
	color: #fff;
}

.contact-list {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-list__item {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.contact-list__item .icon {
	color: var(--c-accent);
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.section--deep .contact-list__item .icon {
	color: var(--sage-300);
}

.contact-list__label {
	display: block;
	font-size: var(--fs-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin-bottom: 0.15rem;
}

.section--deep .contact-list__label {
	color: rgba(238, 242, 238, 0.75);
}

.contact-list a {
	text-decoration: none;
}

.contact-list a:hover {
	text-decoration: underline;
}

/* Map — loaded only when the visitor asks for it */

.map {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-bg-alt);
	aspect-ratio: 16 / 10;
	border: 1px solid var(--c-line);
}

.map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.map__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	gap: var(--sp-4);
	padding: var(--sp-6);
	text-align: center;
	background:
		radial-gradient(circle at 50% 40%, var(--c-accent-soft), transparent 65%),
		var(--c-bg-alt);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease-out);
}

.map__placeholder-inner {
	display: grid;
	gap: var(--sp-3);
	justify-items: center;
}

.map__placeholder .icon {
	color: var(--c-accent);
}

.map__note {
	font-size: var(--fs-xs);
	color: var(--c-ink-mute);
	max-width: 34ch;
}

@media (min-width: 900px) {
	.map--tall {
		aspect-ratio: auto;
		height: 100%;
		min-height: 420px;
	}

	/* A full-width map wants a letterbox, not a 16:10 slab of empty space. */
	.map--wide {
		aspect-ratio: 21 / 9;
	}
}

/* =========================================================================
   15. Editorial content
   ====================================================================== */

.entry-content {
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--c-ink-soft);
}

.entry-content > * + * {
	margin-top: var(--sp-5);
}

.entry-content > h2 {
	margin-top: var(--sp-8);
	color: var(--c-ink);
}

.entry-content > h3 {
	margin-top: var(--sp-7);
	color: var(--c-ink);
}

.entry-content > h2 + *,
.entry-content > h3 + * {
	margin-top: var(--sp-4);
}

.entry-content a {
	color: var(--c-accent-strong);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.35rem;
}

.entry-content li + li {
	margin-top: var(--sp-2);
}

.entry-content ul {
	list-style: none;
	padding-left: 0;
}

.entry-content ul li {
	position: relative;
	padding-left: 1.5rem;
}

.entry-content ul li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.72em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-accent);
}

.entry-content img,
.entry-content figure {
	border-radius: var(--r-lg);
	overflow: hidden;
}

.entry-content figcaption,
.wp-caption-text {
	margin-top: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-ink-mute);
	text-align: center;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.entry-content th,
.entry-content td {
	padding: 0.75rem;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
}

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

.entry-title {
	margin-bottom: var(--sp-4);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-xs);
	color: var(--c-ink-mute);
	letter-spacing: 0.02em;
}

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

.entry-meta a:hover {
	color: var(--c-accent-strong);
}

.entry-thumb {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border-radius: var(--r-xl);
	overflow: hidden;
}

.entry-footer {
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-sm);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.tag-list a {
	text-decoration: none;
}

/* Search results & archives */

.results-header {
	margin-bottom: var(--sp-7);
}

.no-results {
	max-width: 44ch;
}

.post-list {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* Search form */

.search-form {
	display: flex;
	gap: var(--sp-2);
	max-width: 28rem;
}

.search-form__field {
	position: relative;
	flex: 1;
}

.search-form input[type="search"] {
	width: 100%;
	padding: 0.85rem 1.1rem 0.85rem 2.75rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background: var(--c-surface);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.search-form__icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-ink-mute);
	pointer-events: none;
}

/* =========================================================================
   16. Comments & pagination
   ====================================================================== */

.comments-area {
	margin-top: var(--sp-8);
	padding-top: var(--sp-7);
	border-top: 1px solid var(--c-line);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: var(--sp-6) 0;
	display: grid;
	gap: var(--sp-5);
}

.comment-list ol {
	list-style: none;
	padding-left: clamp(1rem, 4vw, 2.5rem);
	margin-top: var(--sp-5);
	display: grid;
	gap: var(--sp-5);
}

.comment-body {
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-ink-mute);
}

.comment-author img {
	border-radius: 50%;
}

.comment-content {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

.pagination {
	display: flex;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-8);
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75rem;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.pagination .page-numbers:hover {
	border-color: var(--c-line-strong);
}

.pagination .page-numbers.current {
	background: var(--c-accent-strong);
	border-color: transparent;
	color: var(--c-on-accent);
}

.post-navigation {
	display: grid;
	gap: var(--sp-4);
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

@media (min-width: 700px) {
	.post-navigation {
		grid-template-columns: 1fr 1fr;
	}
}

.post-navigation a {
	text-decoration: none;
	display: block;
}

.post-navigation__label {
	display: block;
	font-size: var(--fs-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin-bottom: 0.35rem;
}

.post-navigation__title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
}

.post-navigation .nav-next {
	text-align: right;
}

/* =========================================================================
   17. Footer
   ====================================================================== */

.site-footer {
	background: var(--sage-900);
	color: rgba(238, 242, 238, 0.75);
	padding-top: var(--section-y-sm);
	font-size: var(--fs-sm);
}

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

.site-footer a:hover {
	color: #fff;
}

.site-footer__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: var(--sp-8);
}

@media (min-width: 700px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	}
}

.site-footer__title {
	font-family: var(--font-sans);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: rgba(238, 242, 238, 0.72);
	margin-bottom: var(--sp-4);
}

.site-footer .site-logo {
	color: #fff;
	margin-bottom: var(--sp-4);
}

.site-footer .site-logo__mark {
	color: var(--sage-300);
}

.site-footer .site-logo__tag {
	color: rgba(238, 242, 238, 0.72);
}

.site-footer__blurb {
	max-width: 34ch;
	color: rgba(238, 242, 238, 0.68);
	margin-bottom: var(--sp-5);
}

.footer-menu {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links {
	display: flex;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(238, 242, 238, 0.2);
	transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.social-links a:hover {
	background: rgba(238, 242, 238, 0.12);
	border-color: rgba(238, 242, 238, 0.4);
	transform: translateY(-2px);
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: space-between;
	align-items: center;
	padding-block: var(--sp-5);
	border-top: 1px solid rgba(238, 242, 238, 0.12);
	font-size: var(--fs-xs);
	color: rgba(238, 242, 238, 0.75);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Back to top */

.to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-ink);
	border: 1px solid var(--c-line);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out),
		visibility var(--dur),
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.to-top:hover {
	background: var(--c-accent-strong);
	color: var(--c-on-accent);
	border-color: transparent;
}

/* =========================================================================
   18. Blocks & widgets
   ====================================================================== */

.alignwide {
	width: min(100%, var(--w-wide));
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.alignleft {
	float: left;
	margin: 0 var(--sp-5) var(--sp-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--sp-4) var(--sp-5);
}

.aligncenter {
	margin-inline: auto;
	text-align: center;
}

.has-sage-color {
	color: var(--sage-500);
}

.has-sage-background-color {
	background-color: var(--sage-500);
}

.has-sage-deep-color {
	color: var(--sage-800);
}

.has-sage-deep-background-color {
	background-color: var(--sage-800);
}

.has-sage-mist-background-color {
	background-color: var(--sage-100);
}

.has-cream-background-color {
	background-color: #f7f4ef;
}

.has-brass-color {
	color: var(--c-brass);
}

.has-ink-color {
	color: var(--c-ink);
}

.has-white-color {
	color: #fff;
}

.widget {
	margin-bottom: var(--sp-7);
}

.widget__title {
	font-family: var(--font-sans);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin-bottom: var(--sp-4);
}

.widget ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: var(--fs-sm);
}

.widget a {
	text-decoration: none;
}

.widget a:hover {
	color: var(--c-accent-strong);
}

.with-sidebar {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 1024px) {
	.with-sidebar {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

/* Screen-reader friendly loading state */

.is-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
	vertical-align: -3px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* =========================================================================
   19. Glass surface system

   The site sits on a textured sage ground; every panel is frosted glass with
   a gold hairline, gold line icons and serif small-caps headings. This
   section defines that language and adapts the components above to it.
   ====================================================================== */

/* --- The ground ------------------------------------------------------- */

/* Suede read across a room is mostly smooth: a whisper of nap, a soft
   unevenness in the pile, and a broad beam of light falling across it. Two
   seamless greyscale tiles carry the first two, blended with `soft-light` so
   they add light and shade rather than colour; the beam and the pooling sit
   on a viewport-fixed layer so they belong to the room rather than scrolling
   with the page.

   Both tiles are pre-rendered — the same effect built from live SVG filters
   cost roughly 200ms of extra paint time on every view. */
body {
	background-color: var(--c-bg);
	background-image:
		url("../images/texture-suede.png"),
		url("../images/texture-suede-cloud.png");
	background-blend-mode: soft-light, soft-light;
	background-size: 320px 320px, 760px 760px;
	background-repeat: repeat;
	background-attachment: scroll;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		/* the broad beam falling across the upper right */
		linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, 0.4) 47%, rgba(255, 255, 255, 0.14) 58%, transparent 70%),
		/* soft pooling of light and shade in the pile */
		radial-gradient(70% 55% at 12% 6%, rgba(255, 255, 255, 0.26), transparent 72%),
		radial-gradient(55% 45% at 88% 22%, rgba(255, 255, 255, 0.2), transparent 72%),
		radial-gradient(60% 50% at 30% 80%, rgba(255, 255, 255, 0.12), transparent 72%),
		radial-gradient(70% 55% at 22% 92%, rgba(104, 118, 100, 0.14), transparent 74%),
		radial-gradient(60% 50% at 94% 88%, rgba(104, 118, 100, 0.12), transparent 74%);
}

/* --- The panel -------------------------------------------------------- */

.glass {
	position: relative;
	background-color: var(--glass-bg);
	background-image: var(--glass-sheen);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}

/* Browsers without backdrop-filter get a faint fill instead — enough to
   separate the panel from the nap, in a direction that helps the text
   rather than fighting it. */
@supports not (backdrop-filter: blur(1px)) {
	.glass,
	.card,
	.info-card,
	.form-card,
	.review,
	.voucher-card,
	.map,
	.site-header__inner,
	.site-footer__grid,
	.icon-badge {
		background-color: var(--glass-bg-fallback);
	}
}

.glass--strong {
	background: var(--glass-bg-strong);
}

.glass--pad {
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* A round frosted badge holding a gold line icon. */
.icon-badge {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-inline: auto;
	border-radius: 50%;
	background-color: var(--glass-bg-strong);
	background-image: var(--glass-sheen);
	border: 1px solid transparent;
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
	color: var(--gold-mid);
	transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.icon-badge--sm {
	width: 54px;
	height: 54px;
}

.icon-badge .icon {
	stroke-width: 1.15;
}

/* --- Headings in this language ---------------------------------------- */

.glass-title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 500;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--c-ink);
	line-height: 1.2;
}

/* The short gold rule that sits under a heading. */
.gold-rule {
	display: block;
	width: 46px;
	height: 1px;
	margin: var(--sp-4) auto;
	background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
	border: 0;
}

.gold-rule--left {
	margin-inline: 0;
}

/* The leaf ornament between rules, used above a section. */
.ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	color: var(--gold-mid);
	margin-bottom: var(--sp-6);
}

.ornament::before,
.ornament::after {
	content: "";
	height: 1px;
	width: min(140px, 22vw);
	background: linear-gradient(90deg, transparent, var(--gold-mid));
}

.ornament::after {
	background: linear-gradient(90deg, var(--gold-mid), transparent);
}

/* --- Buttons in this language ----------------------------------------- */

.btn {
	border-radius: var(--r-md);
	font-family: var(--font-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--fs-2xs);
	font-weight: 500;
}

.btn--primary {
	--btn-bg: var(--glass-bg-strong);
	--btn-ink: var(--c-accent);
	--btn-border: var(--c-line-strong);
	background-image: var(--glass-sheen);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
	box-shadow: var(--glass-shadow);
}

.btn--primary:hover {
	--btn-bg: rgba(255, 255, 255, 0.5);
	--btn-ink: var(--c-accent-strong);
	--btn-border: var(--gold-mid);
	box-shadow: var(--shadow-lg);
}

:root[data-theme="dark"] .btn--primary:hover {
	--btn-bg: rgba(255, 255, 255, 0.16);
}

.btn--secondary {
	--btn-bg: transparent;
	--btn-ink: var(--c-accent);
	--btn-border: var(--c-line-strong);
}

.btn--secondary:hover {
	--btn-bg: var(--glass-bg-strong);
	--btn-ink: var(--c-accent-strong);
	--btn-border: var(--gold-mid);
}

/* The wide bordered call to action from the reference. */
.btn--feature {
	padding: 1.35rem 3rem;
	font-size: var(--fs-sm);
	letter-spacing: 0.14em;
	border-radius: var(--r-lg);
}

/* --- Header as a floating glass bar ----------------------------------- */

.site-header {
	height: auto;
	padding-block: clamp(0.65rem, 1.6vw, 1.1rem);
	border-bottom: 0;
	background: transparent;
}

.site-header .container {
	max-width: calc(var(--w-page) + 2 * var(--gutter));
}

.site-header__inner {
	padding: 0.6rem 0.75rem 0.6rem 1.35rem;
	background-color: var(--glass-bg);
	background-image: var(--glass-sheen);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
	transition: background-color var(--dur) var(--ease-out);
}

.site-header.is-stuck {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	border-bottom-color: transparent;
}

.site-header.is-stuck .site-header__inner {
	background: var(--glass-bg-strong);
}

/* The header never sits over a hero image in this design, so it keeps its
   ink colours throughout. */
.site-header--over .site-logo,
.site-header--over .nav__link,
.site-header--over .header-action {
	color: var(--c-ink);
}

.site-header--over .site-logo__tag {
	color: var(--c-ink-mute);
}

.site-header--over .btn--secondary {
	--btn-ink: var(--c-accent);
	--btn-border: var(--c-line-strong);
}

/* --- The wordmark ----------------------------------------------------- */

.site-logo__mark {
	display: none;
}

.site-logo__name {
	font-family: var(--font-script);
	font-size: clamp(1.9rem, 2.6vw, 2.5rem);
	font-weight: 400;
	line-height: 0.95;
	color: var(--gold);
	letter-spacing: 0;
}

.site-logo__text {
	align-items: center;
	gap: 0.15rem;
}

.site-logo__tag {
	font-size: 0.5625rem;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: var(--gold);
	font-weight: 500;
}

.site-logo:hover {
	opacity: 0.8;
}

/* --- Navigation ------------------------------------------------------- */

.nav__link {
	font-size: var(--fs-2xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.5rem 0.7rem;
}

.nav__link::after {
	background: var(--gold-mid);
	height: 1.5px;
	bottom: 0;
}

.nav__item.is-current > .nav__link {
	color: var(--c-accent);
}

.header-action {
	color: var(--c-ink);
}

.header-action--cta {
	border-radius: var(--r-md);
}

@media (min-width: 1080px) {
	.sub-menu {
		background-color: var(--glass-bg-strong);
		background-image: var(--glass-sheen);
		border-color: var(--glass-border);
		border-radius: var(--r-md);
		backdrop-filter: var(--glass-filter);
		-webkit-backdrop-filter: var(--glass-filter);
	}

	:root[data-theme="dark"] .sub-menu {
		background-color: rgba(30, 36, 29, 0.9);
	}

	.sub-menu .nav__link {
		border-radius: var(--r-sm);
	}

	.sub-menu .nav__link:hover {
		background: var(--glass-bg-strong);
		color: var(--c-accent-strong);
	}
}

.mobile-nav {
	background: var(--c-bg);
	background-image: inherit;
}

/* --- Sections --------------------------------------------------------- */

.section--tint,
.section--surface,
.section--cream {
	background: transparent;
}

.section--deep {
	background: transparent;
	color: var(--c-ink);
}

.section--deep h1,
.section--deep h2,
.section--deep h3 {
	color: var(--c-ink);
}

.section--deep .eyebrow {
	color: var(--c-accent);
}

.section--deep .lede,
.section--deep p {
	color: var(--c-ink-soft);
}

.section--deep .stat__value {
	color: var(--c-accent);
}

.section--deep .stat__label,
.section--deep .contact-list__label {
	color: var(--c-ink-mute);
}

.section--deep .contact-list__item .icon {
	color: var(--gold-mid);
}

.section--deep .hours-table th,
.section--deep .hours-table td {
	border-color: var(--c-line);
	color: var(--c-ink-soft);
}

.section--deep .hours-table tr.is-today th,
.section--deep .hours-table tr.is-today td {
	color: var(--c-accent-strong);
}

/* Section headings: serif small caps, centred, with a gold rule. */
.section-heading__title {
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--fs-2xl);
}

.eyebrow {
	color: var(--c-accent);
	font-weight: 500;
}

.divider {
	color: var(--gold-mid);
}

.divider__line {
	background: linear-gradient(90deg, transparent, var(--gold-mid));
}

.divider__line:last-child {
	background: linear-gradient(270deg, transparent, var(--gold-mid));
}

/* --- Cards ------------------------------------------------------------ */

.card {
	background-color: var(--glass-bg);
	background-image: var(--glass-sheen);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}

.card:hover {
	transform: translateY(-3px);
	border-color: var(--c-line-strong);
	box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card__title {
	font-weight: 500;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-size: var(--fs-md);
}

.card--flat {
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.media {
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.16);
}

.media--placeholder {
	background-color: var(--glass-bg);
	background-image: var(--glass-sheen);
	color: var(--gold-mid);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}

.media--round {
	border-radius: var(--r-lg);
}

.menu-card {
	border-radius: var(--r-lg);
}

/* --- Info panels, forms, tables --------------------------------------- */

.info-card,
.form-card,
.review,
.voucher-card,
.map,
.rating-summary {
	background-color: var(--glass-bg);
	background-image: var(--glass-sheen);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}

.info-card__title,
.widget__title,
.site-footer__title {
	letter-spacing: var(--tracking-wide);
	color: var(--c-accent);
	font-weight: 600;
}

.input,
.form select,
.form textarea,
.form input,
.search-form input[type="search"],
.menu-search input {
	background: var(--glass-recess);
	border-color: var(--glass-border);
	border-radius: var(--r-md);
	box-shadow: var(--glass-recess-shadow);
	color: var(--c-ink);
}

.input:focus,
.form input:focus,
.form select:focus,
.form textarea:focus {
	border-color: var(--gold-mid);
	box-shadow: var(--glass-recess-shadow), 0 0 0 3px var(--c-accent-soft);
}

.choice__label {
	background: var(--glass-recess);
	border-color: var(--glass-border);
	border-radius: var(--r-md);
	box-shadow: var(--glass-recess-shadow);
}

.choice input:checked + .choice__label {
	background: var(--c-accent);
	color: var(--c-on-accent);
	border-color: transparent;
}

.tab {
	border-radius: var(--r-pill);
	border-color: var(--glass-border);
	background: var(--glass-recess);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--fs-2xs);
}

.tab[aria-pressed="true"],
.tab.is-active {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

.hours-table th,
.hours-table td {
	border-color: var(--c-line);
}

.contact-list__item .icon {
	color: var(--gold-mid);
}

.feature-strip {
	background: transparent;
	border-bottom: 0;
}

.accordion,
.accordion__item {
	border-color: var(--c-line);
}

.accordion__trigger {
	font-weight: 500;
	letter-spacing: 0.03em;
}

.accordion__icon {
	border-color: var(--c-line-strong);
	color: var(--c-accent);
}

.stars__star.is-filled {
	color: var(--gold-mid);
}

/* --- Footer ----------------------------------------------------------- */

.site-footer {
	background: transparent;
	color: var(--c-ink-soft);
	margin-top: var(--section-y);
}

.site-footer__grid {
	padding: clamp(1.75rem, 3vw, 2.75rem);
	background-color: var(--glass-bg);
	background-image: var(--glass-sheen);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}

.site-footer a:hover {
	color: var(--c-accent-strong);
}

.site-footer .site-logo__name,
.site-footer .site-logo__tag {
	color: var(--gold);
}

.site-footer__blurb {
	color: var(--c-ink-soft);
}

.site-footer__bar {
	border-top-color: var(--c-line);
	color: var(--c-ink-mute);
}

.social-links a {
	border-color: var(--glass-border);
	background: var(--glass-recess);
	color: var(--c-accent);
}

.social-links a:hover {
	background: var(--glass-bg-strong);
	color: var(--c-accent-strong);
}

.to-top {
	background-color: var(--glass-bg-strong);
	background-image: var(--glass-sheen);
	border-color: var(--glass-border);
	color: var(--c-accent);
	border-radius: 50%;
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}

.to-top:hover {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

/* --- Home page: hero, value bar, action cards, info bar --------------- */

.hero-glass {
	padding-top: clamp(4rem, 12vh, 8rem);
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

.hero-glass__title {
	font-size: var(--fs-2xl);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--sp-4);
}

.hero-glass__intro {
	max-width: 46ch;
	margin: 0 auto var(--sp-6);
	font-size: var(--fs-md);
	color: var(--c-ink-soft);
}

.hero-glass__cta {
	margin-top: var(--sp-6);
}

.value-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	margin: 0;
	padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.5rem);
	list-style: none;
}

.value-bar__item {
	padding: var(--sp-4) clamp(1rem, 2vw, 1.75rem);
	text-align: center;
}

/* Gold dividers between columns, as in the reference — but drawn as a rule
   that fades out at both ends rather than a border that stops dead. Inside a
   slab of glass an internal line looks etched, not ruled. */
@media (min-width: 620px) {
	.value-bar__item + .value-bar__item {
		background-image: var(--glass-divider);
		background-size: 1px 100%;
		background-repeat: no-repeat;
		background-position: left center;
	}
}

.value-bar__icon {
	display: block;
	color: var(--gold-mid);
	margin-bottom: var(--sp-4);
}

.value-bar__icon .icon {
	margin-inline: auto;
	stroke-width: 1.1;
}

.value-bar__title {
	font-size: var(--fs-md);
}

.value-bar__text {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	max-width: 26ch;
	margin-inline: auto;
	line-height: 1.7;
}

.action-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(1rem, 1.8vw, 1.5rem);
	margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
	padding: 0;
	list-style: none;
}

.action-grid--wide {
	max-width: 820px;
	margin-inline: auto;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	margin-bottom: 0;
}

.action-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
	text-align: center;
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.action-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--gold-mid) 55%, transparent);
	box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.action-card:hover .icon-badge {
	transform: scale(1.06);
	color: var(--c-accent-strong);
}

.action-card__title {
	margin-top: var(--sp-2);
}

.action-card .gold-rule {
	margin-block: 0.35rem;
}

.action-card__text {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	line-height: 1.75;
	flex: 1;
	max-width: 28ch;
}

.action-card__link {
	margin-top: var(--sp-4);
}

/* The two wider tiles lay their icon out beside the copy. */
.action-card--row {
	flex-direction: row;
	align-items: center;
	gap: var(--sp-5);
	text-align: left;
}

.action-card--row .icon-badge {
	margin-inline: 0;
	flex-shrink: 0;
}

.action-card--row .action-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
}

.action-card--row .action-card__text {
	max-width: 34ch;
}

@media (max-width: 560px) {
	.action-card--row {
		flex-direction: column;
		text-align: center;
	}

	.action-card--row .icon-badge {
		margin-inline: auto;
	}

	.action-card--row .action-card__body {
		align-items: center;
	}
}

.info-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin: 0;
	padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
	list-style: none;
}

.info-bar__item {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3) clamp(1rem, 2vw, 1.75rem);
}

@media (min-width: 780px) {
	.info-bar__item + .info-bar__item {
		background-image: var(--glass-divider);
		background-size: 1px 100%;
		background-repeat: no-repeat;
		background-position: left center;
	}
}

.info-bar__title {
	font-family: var(--font-sans);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--c-ink);
	margin-bottom: 0.35rem;
}

.info-bar__text {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	line-height: 1.7;
}

.info-bar__text a {
	text-decoration: none;
}

.info-bar__text a:hover {
	text-decoration: underline;
}

/* --- Footer on glass -------------------------------------------------- */

/* The footer used to sit on a solid dark panel; on the sage ground it is
   glass like everything else, so those inverted overrides are undone. */
.site-footer .newsletter__row .input {
	background: var(--glass-recess);
	border-color: var(--glass-border);
	box-shadow: var(--glass-recess-shadow);
	color: var(--c-ink);
}

.site-footer .newsletter__row .input::placeholder {
	color: var(--c-ink-mute);
}

.site-footer .newsletter__row .input:focus {
	border-color: var(--gold-mid);
	box-shadow: var(--glass-recess-shadow), 0 0 0 3px var(--c-accent-soft);
}

.site-footer .newsletter__small,
.site-footer .check {
	color: var(--c-ink-soft);
}

.site-footer .newsletter .btn--primary {
	--btn-bg: var(--glass-bg-strong);
	--btn-ink: var(--c-accent);
	--btn-border: var(--c-line-strong);
}

.site-footer .check input[type="checkbox"] {
	background: var(--glass-recess);
	border-color: var(--glass-border);
}

.site-footer .form-response--success {
	background: var(--c-accent-soft);
	border-color: var(--c-line-strong);
	color: var(--c-accent-ink);
}

/* --- Wordmark refinements -------------------------------------------- */

.site-logo {
	gap: 0;
}

.site-logo__name {
	font-size: clamp(2.1rem, 2.8vw, 2.75rem);
	line-height: 1;
	padding-bottom: 0.1em;
}

/* --- Fit the card titles on one line where the reference does ---------- */

.action-card__title {
	font-size: var(--fs-base);
	letter-spacing: 0.12em;
}

.action-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
}

.ornament .icon {
	stroke-width: 1.1;
}

/* --- The wordmark ----------------------------------------------------- */

/* A stand-in for the real logotype, arranged the same way: the script word,
   "Est 1984" tucked at its upper right, and a swash sweeping beneath. It is
   live text, so it stays crisp at any size and is readable to search engines.
   Uploading the artwork under Customize → Site Identity replaces the whole
   lockup with the real thing. */
.site-logo__lockup {
	position: relative;
	display: inline-block;
	padding-right: 0.6em;
}

.site-logo__est {
	position: absolute;
	top: 0.15em;
	right: -0.5em;
	font-family: var(--font-display);
	font-size: 0.3em;
	font-weight: 600;
	letter-spacing: 0.1em;
	white-space: nowrap;
	color: var(--gold);
}

.site-logo__swash {
	display: block;
	width: 100%;
	height: 0.22em;
	margin-top: -0.16em;
	color: var(--gold);
	opacity: 0.92;
}


/* The colour-scheme toggle sits in the footer bar: the reference header
   carries only the wordmark, the links and the booking button. */
.site-footer__bar .theme-toggle {
	width: 38px;
	height: 38px;
	margin-left: auto;
	color: var(--c-accent);
	border: 1px solid var(--glass-border);
	border-radius: 50%;
	background-color: var(--glass-bg-strong);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
}

.site-footer__bar .theme-toggle:hover {
	background-color: var(--glass-bg-strong);
	color: var(--c-accent-strong);
}

/* The booking button leads with its icon, as in the reference. */
.header-action--cta .icon {
	margin-right: 0.1rem;
}

/* --- Call-to-action banner ------------------------------------------- */

/* This was a dark gradient block in the previous design and clashed badly
   with the glass language. It is a glass panel like everything else. */
.cta-banner {
	background: var(--glass-bg);
	background-image: var(--glass-sheen);
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--glass-shadow);
	backdrop-filter: var(--glass-filter);
	-webkit-backdrop-filter: var(--glass-filter);
	color: var(--c-ink);
}

.cta-banner::before,
.cta-banner::after {
	display: none;
}

.cta-banner h2 {
	color: var(--c-ink);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cta-banner p {
	color: var(--c-ink-soft);
}

.cta-banner .eyebrow {
	color: var(--c-accent);
	justify-content: center;
}

/* On glass the light-on-dark button variants have nothing to sit against. */
.cta-banner .btn--light {
	--btn-bg: var(--glass-bg-strong);
	--btn-ink: var(--c-accent);
	--btn-border: var(--c-line-strong);
}

.cta-banner .btn--light:hover,
.cta-banner .btn--outline-light:hover {
	--btn-bg: rgba(255, 255, 255, 0.7);
	--btn-ink: var(--c-accent-strong);
	--btn-border: var(--gold-mid);
}

:root[data-theme="dark"] .cta-banner .btn--light:hover,
:root[data-theme="dark"] .cta-banner .btn--outline-light:hover {
	--btn-bg: rgba(255, 255, 255, 0.18);
}

.cta-banner .btn--outline-light {
	--btn-bg: transparent;
	--btn-ink: var(--c-accent);
	--btn-border: var(--c-line-strong);
}

/* The afternoon-tea feature and the stats band were dark too. */
.section--deep .btn--light {
	--btn-bg: var(--glass-bg-strong);
	--btn-ink: var(--c-accent);
	--btn-border: var(--c-line-strong);
}

.section--deep .btn--outline-light {
	--btn-bg: transparent;
	--btn-ink: var(--c-accent);
	--btn-border: var(--c-line-strong);
}

/* --- The feathered edge ------------------------------------------------ */

/* This is where a panel earns the word "glass".

   A real pane has no outline. What you see at its edge is thickness: light
   entering the side of the slab, scattering through the rim and coming back
   out milky. Draw that as a 1px white stroke and the panel instantly reads
   as a rectangle someone outlined — crisp, flat, and obviously not glass.

   So the outline is gone entirely, and in its place sits a band with no hard
   number in it anywhere. Its milk starts hard against the edge and is gone
   by --frost-depth. Its own blur diffuses the ground behind the rim more
   than the pane does. And a mask fades the whole thing to nothing by
   --frost-fade, before it reaches the panel proper. Every boundary in the
   construction is the far end of a gradient.

   The light comes from up and to the left, so the top and left edges carry
   noticeably more milk than the bottom and right. That asymmetry is what
   stops the band reading as a border: a uniformly bright edge is a drawn
   outline, an unevenly bright one is an object.

   Browsers without masks skip the band entirely and the panel falls back to
   blur and shadow, which is still a perfectly respectable piece of glass. */

.glass::before,
.card::before,
.action-card::before,
.value-bar::before,
.menu-controls__inner::before,
.info-bar::before,
.info-card::before,
.form-card::before,
.voucher-card::before,
.icon-badge::before,
.site-header__inner::before,
.site-footer__grid::before,
.page-hero__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;

	/* The rim scatters more than the pane does. */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	background-image:
		linear-gradient(to bottom, rgba(255, 255, 255, var(--frost-top)), transparent var(--frost-depth)),
		linear-gradient(to right, rgba(255, 255, 255, var(--frost-side)), transparent var(--frost-depth)),
		linear-gradient(to top, rgba(255, 255, 255, var(--frost-dim)), transparent var(--frost-depth-dim)),
		linear-gradient(to left, rgba(255, 255, 255, var(--frost-dim)), transparent var(--frost-depth-dim));

	/* Four edge ramps, added together — the corners overlap and come out a
	   little heavier, which is exactly what a thick corner looks like. */
	-webkit-mask-image:
		linear-gradient(to bottom, #000, transparent var(--frost-fade)),
		linear-gradient(to top, #000, transparent var(--frost-fade)),
		linear-gradient(to right, #000, transparent var(--frost-fade)),
		linear-gradient(to left, #000, transparent var(--frost-fade));
	mask-image:
		linear-gradient(to bottom, #000, transparent var(--frost-fade)),
		linear-gradient(to top, #000, transparent var(--frost-fade)),
		linear-gradient(to right, #000, transparent var(--frost-fade)),
		linear-gradient(to left, #000, transparent var(--frost-fade));
}

/* Content sits above the band. */
.glass > *,
.card > *,
.action-card > *,
.value-bar > *,
.menu-controls__inner > *,
.info-bar > *,
.info-card > *,
.form-card > *,
.voucher-card > *,
.icon-badge > *,
.site-header__inner > *,
.site-footer__grid > *,
.page-hero__inner > * {
	position: relative;
	z-index: 2;
}