/* Canvas: Wattlewood Health */

@layer custom {
:root {
	--cnvs-body-font: 'Petrona', Georgia, serif;
	--cnvs-primary-font: 'Marcellus', Georgia, serif;
	--cnvs-secondary-font: 'Petrona', Georgia, serif;

	/* Brand colour */
	--cnvs-themecolor: #9C7A4B;
	--cnvs-themecolor-rgb: 156, 122, 75;

	/* Palette */
	--c-ground: #F5F2EA;
	--c-ground-2: #1E2A22;
	--c-ground-3: #2A382C;
	--c-ink: #1C201B;
	--c-ink-inverse: #F2EFE7;
	--c-muted: #5E6558;
	--c-muted-inverse: #B9C0B2;
	--c-accent: #9C7A4B;
	--c-accent-deep: #7A5C33;
	--c-accent-inverse: #C9A96A;
	--c-sage: #7C8A6B;
	--c-line: #DCD6C6;
	--c-line-dark: rgba(242, 239, 231, 0.14);

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 40px;
	--space-6: 64px;
	--space-7: 96px;
	--space-8: 140px;
	--band: 7.5rem;
	--band-compact: 4.5rem;
	--gutter: 2rem;

	/* Type */
	--font-display: var(--cnvs-primary-font);
	--font-text: var(--cnvs-body-font);
	--fs-display: clamp(2.9rem, 6.2vw, 5.4rem);
	--fs-h1: clamp(2.4rem, 4.4vw, 3.7rem);
	--fs-h2: clamp(2rem, 3.4vw, 2.9rem);
	--fs-h3: 1.5rem;
	--fs-lead: 1.1875rem;
	--fs-body: 1.0625rem;
	--fs-small: 0.9375rem;
	--fs-label: 0.75rem;

	/* Shape */
	--radius-s: 0;
	--radius-m: 0;

	/* Motion */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	background: var(--c-ground);
	color: var(--c-ink);
	font-family: var(--font-text);
	font-size: var(--fs-body);
	line-height: 1.72;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--c-ink);
	text-wrap: balance;
	letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.32; letter-spacing: 0; }

p { text-wrap: pretty; }

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: var(--c-ink-inverse); }

a { color: var(--c-accent-deep); text-underline-offset: 4px; }
a:hover { color: var(--c-ink); }
.dark a { color: var(--c-accent-inverse); }
.dark a:hover { color: var(--c-ink-inverse); }

::selection {
	background: rgba(var(--cnvs-themecolor-rgb), 0.25);
	color: var(--c-ink);
}

:focus-visible {
	outline: 2px solid var(--c-accent-deep);
	outline-offset: 3px;
}
.dark :focus-visible { outline-color: var(--c-accent-inverse); }

/* Section rhythm */
.section { padding: var(--band) 0; margin: 0; }
.content-wrap { overflow: visible; }

/* --------------------------------------------------------------------------
   Shared type helpers
   -------------------------------------------------------------------------- */

.ww-label {
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
	margin: 0 0 var(--space-3);
	line-height: 1.3;
}
.dark .ww-label { color: var(--c-accent-inverse); }

.ww-lead {
	font-size: var(--fs-lead);
	line-height: 1.68;
	color: var(--c-muted);
	max-width: 58ch;
	margin: 0 0 var(--space-5);
}
.dark .ww-lead { color: var(--c-muted-inverse); }

.ww-body {
	font-size: var(--fs-body);
	line-height: 1.72;
	color: var(--c-ink);
	max-width: 62ch;
	margin: 0 0 var(--space-4);
}
.dark .ww-body { color: var(--c-ink-inverse); }

.ww-note {
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-muted);
	max-width: 72ch;
	margin: var(--space-5) 0 0;
}
.dark .ww-note { color: var(--c-muted-inverse); }

.ww-hairline {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--c-accent);
	margin: var(--space-3) 0 var(--space-4);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button {
	font-family: var(--font-text);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 0;
	min-height: 48px;
	padding: 0.9rem 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out),
		border-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}

.button.button-3d {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #1C201B;
	box-shadow: none;
}
.button.button-3d:hover {
	background: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
	color: #F2EFE7;
}
.button:active { transform: scale(0.97); }

.ww-header-cta {
	background: transparent !important;
	border: 1px solid var(--c-accent) !important;
	color: var(--c-accent-inverse) !important;
	box-shadow: none !important;
	min-height: 42px;
	padding: 0.5rem 1.4rem;
}
.ww-header-cta:hover {
	background: var(--c-accent) !important;
	color: #1C201B !important;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

#header .header-row { align-items: center; }

@media (min-width: 992px) {
	#header .header-row { flex-wrap: nowrap; }
	.ww-nav { margin-left: auto; }
	.ww-nav .menu-container { gap: var(--space-5); }
	.ww-nav .cnvs-menu-link > div {
		font-family: var(--font-text);
		font-size: 0.8125rem;
		font-weight: 500;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}
	.header-misc { margin-left: var(--space-5); }
}

#header:not(.dark) .ww-nav .cnvs-menu-link > div { color: var(--c-ink); }
#header:not(.dark) .ww-nav .cnvs-menu-item > a:hover .cnvs-menu-link > div { color: var(--c-accent-deep); }
#header.dark .ww-nav .cnvs-menu-link > div { color: rgba(242, 239, 231, 0.88); }
#header.dark .ww-nav .cnvs-menu-item > a:hover .cnvs-menu-link > div { color: var(--c-accent-inverse); }

#header-wrap { border-bottom: 1px solid rgba(156, 122, 75, 0.4); }
#header.sticky-header #header-wrap,
#header.sticky-header #header-wrap .header-row { background: var(--c-ground); }
#header.sticky-header { border-bottom: 1px solid var(--c-line); }
#header.sticky-header #header-wrap { border-bottom: 0; }

@media (max-width: 991px) {
	#header-wrap { background: var(--c-ground-2); }
	.ww-header-cta { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ww-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--c-ground-2);
}

.ww-hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('images/wellness-retreat-01.webp');
	background-size: cover;
	background-position: center 42%;
	background-repeat: no-repeat;
	z-index: 0;
}
.ww-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(18, 26, 20, 0.88) 0%, rgba(18, 26, 20, 0.72) 38%, rgba(18, 26, 20, 0.22) 78%, rgba(18, 26, 20, 0.14) 100%),
		linear-gradient(to top, rgba(18, 26, 20, 0.55) 0%, rgba(18, 26, 20, 0) 45%);
}

.ww-hero .container { position: relative; z-index: 1; }

.ww-hero-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	width: 100%;
}

.ww-hero-copy {
	max-width: 720px;
	padding-top: var(--space-8);
	padding-bottom: var(--space-7);
}

.ww-hero .ww-eyebrow {
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-accent-inverse);
	margin: 0 0 var(--space-4);
}

.ww-hero h1 {
	color: var(--c-ink-inverse);
	margin: 0 0 var(--space-5);
	max-width: 14ch;
}

.ww-hero-lead {
	font-size: var(--fs-lead);
	line-height: 1.66;
	color: rgba(242, 239, 231, 0.88);
	max-width: 50ch;
	margin: 0 0 var(--space-5);
}

.ww-hero-cta {
	background: var(--c-accent);
	border: 1px solid var(--c-accent);
	color: #1C201B;
	box-shadow: none;
}
.ww-hero-cta:hover {
	background: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
	color: #F2EFE7;
}

.ww-hero-note {
	flex: 0 1 260px;
	max-width: 260px;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-muted-inverse);
	margin: 0;
	padding-bottom: var(--space-7);
	padding-left: var(--space-4);
	border-left: 1px solid rgba(156, 122, 75, 0.55);
}

.ww-rule {
	height: 1px;
	background: rgba(156, 122, 75, 0.55);
}

@media (min-width: 992px) {
	.is-expanded-menu .ww-hero-copy {
		padding-top: calc(var(--cnvs-header-height, 90px) + var(--space-7));
	}
	.is-expanded-menu .ww-hero-note { padding-bottom: var(--space-7); }
}

@media (max-width: 991px) {
	.ww-hero { min-height: 88vh; }
	.ww-hero-copy { padding-top: var(--space-7); padding-bottom: var(--space-6); }
	.ww-hero h1 { max-width: 12ch; }
}

@media (max-width: 767px) {
	.ww-hero { min-height: 78vh; }
	.ww-hero-note { display: none; }
	.ww-hero-inner { display: block; }
	.ww-hero-copy { padding-top: var(--space-7); padding-bottom: var(--space-6); }
	.ww-hero-lead { font-size: 1.0625rem; }
	.ww-hero-cta { width: 100%; }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.ww-about { background: var(--c-ground); }
.ww-about .row { align-items: flex-start; }

.ww-about-caption {
	position: sticky;
	top: calc(var(--cnvs-header-height, 90px) + var(--space-4));
}
.ww-about-caption p {
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-muted);
	margin: 0;
	max-width: 30ch;
}

.ww-about h2 { margin: 0 0 var(--space-5); }

.ww-pull {
	margin: var(--space-6) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-accent);
}
.ww-pull p {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: 1.36;
	color: var(--c-ink);
	margin: 0;
	max-width: 26ch;
}

.ww-about-figure { margin: 0; }
.ww-about-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 992px) {
	.ww-about .lg\:col-5 { padding-right: var(--gutter); border-right: 1px solid var(--c-line); }
	.ww-about .lg\:col-4 { padding-left: var(--gutter); }
}
@media (max-width: 991px) {
	.ww-about-caption { position: static; margin-bottom: var(--space-5); }
	.ww-about-figure { margin-top: var(--space-6); }
}

/* --------------------------------------------------------------------------
   Programmes
   -------------------------------------------------------------------------- */

.ww-programmes {
	background: var(--c-ground-2);
	position: relative;
}
.ww-programmes .container { position: relative; z-index: 1; }

.ww-band-head { text-align: center; margin-bottom: var(--space-7); }
.ww-band-head h2 { margin: 0; max-width: 22ch; margin-inline: auto; }

.ww-programmes-row { row-gap: var(--gutter); }

.ww-programme {
	height: 100%;
	border: 1px solid var(--c-line-dark);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
.ww-programme:hover {
	border-color: rgba(156, 122, 75, 0.6);
	background: rgba(255, 255, 255, 0.03);
}

.ww-programme-num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(3.4rem, 5.4vw, 4.4rem);
	line-height: 0.9;
	color: var(--c-accent);
	margin-bottom: var(--space-3);
}

.ww-programme-name {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-2);
	color: var(--c-ink-inverse);
}

.ww-programme-duration {
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted-inverse);
	margin: 0 0 var(--space-4);
}

.ww-programme-price {
	font-size: var(--fs-small);
	color: var(--c-muted-inverse);
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--c-line-dark);
}
.ww-price {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--c-accent-inverse);
	letter-spacing: 0;
	margin-right: var(--space-2);
}

.ww-programme-body {
	font-size: var(--fs-body);
	line-height: 1.68;
	color: var(--c-ink-inverse);
	margin: 0 0 var(--space-4);
}

.ww-programme-best {
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-muted-inverse);
	margin: auto 0 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--c-line-dark);
}
.ww-programme-best strong {
	color: var(--c-accent-inverse);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--fs-label);
	display: block;
	margin-bottom: var(--space-1);
}

.ww-inclusions-strip {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--c-line-dark);
}
.ww-strip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
}
.ww-strip-list li {
	font-size: var(--fs-small);
	color: var(--c-muted-inverse);
	padding-left: var(--space-4);
	position: relative;
}
.ww-strip-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 1px;
	background: var(--c-accent);
}

/* --------------------------------------------------------------------------
   Inclusions
   -------------------------------------------------------------------------- */

.ww-inclusions { background: var(--c-ground); }

.ww-inclusions-head h2 { margin: 0 0 var(--space-4); }
.ww-inclusions-head .ww-lead { margin-bottom: 0; }

.ww-checklist {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--space-5);
	border-left: 1px solid rgba(156, 122, 75, 0.45);
}
.ww-check-row {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--c-line);
}
.ww-check-row:first-child { padding-top: 0; }
.ww-check-row i {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(156, 122, 75, 0.16);
	color: var(--c-accent-deep);
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
.ww-check-row h3 {
	font-family: var(--font-display);
	font-size: 1.1875rem;
	margin: 0 0 var(--space-1);
	color: var(--c-ink);
}
.ww-check-row p {
	font-size: var(--fs-small);
	line-height: 1.62;
	color: var(--c-muted);
	margin: 0;
	max-width: 60ch;
}

.ww-table-wrap {
	margin-top: var(--space-7);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.ww-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: var(--fs-small);
}
.ww-table caption {
	text-align: left;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--c-ink);
	padding-bottom: var(--space-4);
}
.ww-table th,
.ww-table td {
	text-align: left;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--c-line);
	vertical-align: top;
}
.ww-table thead th {
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
	border-bottom: 1px solid var(--c-ink);
	padding-bottom: var(--space-3);
}
.ww-table tbody th {
	font-weight: 400;
	color: var(--c-ink);
}
.ww-table td { color: var(--c-muted); }
.ww-table-price td,
.ww-table-price th { border-bottom: 1px solid var(--c-ink); }
.ww-table-price td {
	font-family: var(--font-display);
	font-size: 1.375rem;
	color: var(--c-accent-deep);
}

@media (max-width: 991px) {
	.ww-checklist { padding-left: 0; border-left: 0; }
	.ww-check-row { border-top: 1px solid var(--c-line); }
	.ww-check-row:first-child { border-top: 0; padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.ww-team { background: var(--c-ground-2); }
.ww-team-head { margin-bottom: var(--space-7); max-width: 66ch; }
.ww-team-head h2 { margin: 0 0 var(--space-4); }
.ww-team-head .ww-lead { margin-bottom: 0; }

.ww-team-row { row-gap: var(--gutter); }

.ww-clinician { margin: 0; }
.ww-clinician img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid var(--c-line-dark);
}
.ww-clinician figcaption { padding-top: var(--space-4); }
.ww-clinician h3 {
	font-size: 1.3125rem;
	margin: 0 0 var(--space-1);
	color: var(--c-ink-inverse);
}
.ww-role {
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-accent-inverse);
	margin: 0 0 var(--space-3);
}
.ww-clinician figcaption p:last-child {
	font-size: var(--fs-small);
	line-height: 1.62;
	color: var(--c-muted-inverse);
	margin: 0;
	max-width: 42ch;
}

.ww-clinician-lead h3 { font-size: 1.5rem; }

.ww-team-subrow { row-gap: var(--gutter); }

.ww-governance {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-line-dark);
}
.ww-governance p {
	font-size: var(--fs-small);
	line-height: 1.65;
	color: var(--c-muted-inverse);
	margin: 0;
	max-width: 88ch;
}
.ww-governance-hint {
	color: var(--c-accent-inverse) !important;
	font-style: italic;
	margin-bottom: var(--space-4) !important;
}

.ww-clinician-btn {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	transition: opacity 200ms var(--ease-out);
}
.ww-clinician-btn:focus-visible { outline: 2px solid var(--c-accent-inverse); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
	.ww-clinician-btn:hover { opacity: 0.88; }
}
.ww-clinician-btn:active { opacity: 0.78; }

.ww-pops { display: contents; }
.ww-pops .ww-pop { display: none; }
.ww-pops .ww-pop:popover-open { display: block; }

.ww-pop {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(560px, calc(100vw - 2 * var(--space-4)));
	max-height: min(78vh, 720px);
	overflow-y: auto;
	padding: var(--space-7) var(--space-6) var(--space-6);
	background: var(--c-ground);
	border: 1px solid var(--c-accent);
	color: var(--c-ink);
	overscroll-behavior: contain;
}
.ww-pop:not(:popover-open) { display: none; }
.ww-pop::backdrop {
	background: rgba(18, 24, 20, 0.62);
	backdrop-filter: blur(2px);
}
.ww-pop h3 {
	font-size: var(--fs-h2);
	margin: 0 0 var(--space-2);
	color: var(--c-ink);
}
.ww-pop .ww-role { margin-bottom: var(--space-4); }
.ww-pop p {
	font-size: var(--fs-body);
	line-height: 1.68;
	color: var(--c-ink);
	margin: 0 0 var(--space-4);
	max-width: 56ch;
}
.ww-pop-close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: 1rem;
	cursor: pointer;
	transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.ww-pop-close:hover { border-color: var(--c-ink); color: var(--c-ink); }
.ww-pop-close:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }

.ww-pop-facts {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--c-line);
	display: grid;
	grid-template-columns: minmax(110px, 1fr) 2fr;
	gap: var(--space-3) var(--space-5);
}
.ww-pop-facts dt {
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin: 0;
}
.ww-pop-facts dd {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--c-ink);
	margin: 0;
}

@media (min-width: 992px) {
	.ww-team-row > .lg\:col-7 { padding-left: var(--gutter); border-left: 1px solid var(--c-line-dark); }
}

/* --------------------------------------------------------------------------
   Conditions
   -------------------------------------------------------------------------- */

.ww-conditions { background: var(--c-ground); }
.ww-conditions-head { margin-bottom: var(--space-6); }
.ww-conditions-row { row-gap: var(--space-5); }

.ww-glossary { margin: 0; }
.ww-term {
	padding: var(--space-5) 0;
	border-top: 1px solid var(--c-line);
}
.ww-term:first-child { padding-top: 0; border-top: 0; }
.ww-term dt {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--c-ink);
	margin: 0 0 var(--space-2);
}
.ww-term dd {
	font-size: var(--fs-body);
	line-height: 1.68;
	color: var(--c-ink);
	margin: 0 0 var(--space-3);
	max-width: 46ch;
}
.ww-protocol {
	font-size: var(--fs-small);
	line-height: 1.62;
	color: var(--c-muted);
	margin: 0;
	padding-left: var(--space-4);
	border-left: 1px solid var(--c-accent);
	max-width: 46ch;
}

.ww-quote {
	margin: var(--space-6) 0 0;
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--c-accent);
}
.ww-quote p {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: 1.4;
	color: var(--c-ink);
	margin: 0 0 var(--space-3);
	max-width: 28ch;
}
.ww-quote footer {
	font-size: var(--fs-small);
	color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

.ww-results { background: var(--c-ground); }
.ww-results-head { margin-bottom: var(--space-6); }
.ww-results-head h2 { margin: 0 0 var(--space-4); }
.ww-method {
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-muted);
	margin: 0;
	max-width: 76ch;
}

.ww-figures {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	margin-bottom: var(--space-7);
}
.ww-figure {
	flex: 1 1 0;
	min-width: 200px;
	padding: var(--space-6) var(--space-5) var(--space-6) 0;
}
.ww-figure + .ww-figure {
	border-left: 1px solid var(--c-line);
	padding-left: var(--space-5);
}
.ww-figure-num {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: 1;
	color: var(--c-accent-deep);
	margin-bottom: var(--space-3);
}
.ww-figure-label {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--c-muted);
	margin: 0;
	max-width: 24ch;
}

.ww-compare-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--c-line);
}
.ww-compare-controls .ww-label { margin: 0; }

.ww-toggle {
	display: inline-flex;
	border: 1px solid var(--c-line);
}
.ww-toggle-btn {
	font-family: var(--font-text);
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: transparent;
	border: 0;
	color: var(--c-muted);
	padding: 0.7rem 1.5rem;
	min-height: 44px;
	cursor: pointer;
	transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.ww-toggle-btn + .ww-toggle-btn { border-left: 1px solid var(--c-line); }
.ww-toggle-btn:hover { color: var(--c-ink); }
.ww-toggle-btn[data-ix-active],
.ww-toggle-btn.is-active {
	background: var(--c-accent);
	color: #1C201B;
}
.ww-toggle-btn:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }

.ww-compare-rows { display: flex; flex-direction: column; gap: var(--space-5); }

.ww-compare-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--c-line);
	--ww-scale-start: 0.8;
	--ww-scale-end: 0.4;
}
.ww-compare-row:last-child { padding-bottom: 0; border-bottom: 0; }
.ww-compare-row:nth-child(1) { --ww-scale-start: 0.72; --ww-scale-end: 0.26; }
.ww-compare-row:nth-child(2) { --ww-scale-start: 0.84; --ww-scale-end: 0.62; }
.ww-compare-row:nth-child(3) { --ww-scale-start: 0.88; --ww-scale-end: 0.79; }
.ww-compare-row:nth-child(4) { --ww-scale-start: 0.80; --ww-scale-end: 0.70; }

.ww-compare-label {
	font-size: var(--fs-small);
	color: var(--c-ink);
	margin: 0 0 var(--space-1);
}
.ww-compare-bar { display: flex; flex-direction: column; gap: var(--space-2); }

.ww-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 32px;
	width: 100%;
	max-width: 100%;
	padding-right: var(--space-3);
	position: relative;
	background: var(--c-sage);
	transform-origin: left center;
	transform: scaleX(var(--ww-scale-start));
	transition: transform 460ms var(--ease-out), background-color 260ms var(--ease-out);
}
.ww-compare[data-ix-current="end"] .ww-bar {
	transform: scaleX(var(--ww-scale-end));
	background: var(--c-accent-deep);
}
.ww-bar-val {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #1C201B;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.ww-compare[data-ix-current="end"] .ww-bar-val { color: #F2EFE7; }

.ww-compare-key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: var(--space-5) 0 0;
	font-size: var(--fs-small);
	color: var(--c-muted);
}
.ww-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.ww-key-swatch { width: 22px; height: 10px; display: inline-block; }
.ww-key-a { background: var(--c-sage); }
.ww-key-b { background: var(--c-accent-deep); }

@media (max-width: 767px) {
	.ww-figure { min-width: 50%; padding-right: var(--space-4); }
	.ww-figure + .ww-figure { padding-left: var(--space-4); }
	.ww-figure:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-line); }
	.ww-figure:nth-child(4) { border-top: 1px solid var(--c-line); }
	.ww-bar-val { font-size: 0.75rem; }
}

/* --------------------------------------------------------------------------
   The Place
   -------------------------------------------------------------------------- */

.ww-place { background: var(--c-ground); }
.ww-place-head { margin-bottom: var(--space-7); }
.ww-place-head h2 { margin: 0 0 var(--space-4); }
.ww-place-head .ww-lead { margin-bottom: 0; }

.ww-gallery-row { row-gap: var(--gutter); }

.ww-gallery-lead { margin: 0; }
.ww-gallery-lead a,
.ww-frame a { display: block; }
.ww-gallery-lead img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--c-line);
}
.ww-gallery-lead figcaption,
.ww-frame figcaption {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--c-muted);
	margin-top: var(--space-3);
}
.ww-gallery-lead a:focus-visible,
.ww-frame a:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
	.ww-gallery-lead a:hover img,
	.ww-frame a:hover img { opacity: 0.9; }
}
.ww-gallery-lead img,
.ww-frame img { transition: opacity 220ms var(--ease-out); }

.ww-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gutter);
	align-content: start;
}
.ww-frame { margin: 0; }
.ww-frame img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.ww-frame-tall img { aspect-ratio: 3 / 4; }
.ww-frame-wide img { aspect-ratio: 3 / 2; }
.ww-frame-square img { aspect-ratio: 1 / 1; }
.ww-frame-tall { grid-row: span 2; }

.ww-travel {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--c-line);
}
.ww-travel-item { flex: 1 1 260px; }
.ww-travel-item p:last-child {
	font-size: var(--fs-small);
	line-height: 1.62;
	color: var(--c-muted);
	margin: 0;
	max-width: 44ch;
}

@media (min-width: 992px) {
	.ww-place .lg\:col-7 { padding-right: var(--gutter); }
	.ww-place .lg\:col-5 { padding-left: var(--gutter); }
}
@media (max-width: 991px) {
	.ww-gallery-grid { margin-top: var(--gutter); }
}

/* --------------------------------------------------------------------------
   A Day Here
   -------------------------------------------------------------------------- */

.ww-day { background: var(--c-ground-2); }
.ww-day-head { margin-bottom: var(--space-7); max-width: 60ch; }
.ww-day-head h2 { margin: 0 0 var(--space-4); }
.ww-day-head .ww-lead { margin-bottom: 0; }

.ww-day-list { max-width: 900px; }

.ww-day-line {
	display: flex;
	align-items: baseline;
	gap: var(--space-5);
	padding: var(--space-5) 0;
	border-top: 1px solid var(--c-line-dark);
}
.ww-day-line:first-child { border-top: 0; padding-top: 0; }

.ww-day-time {
	flex: 0 0 84px;
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--c-accent-inverse);
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.ww-day-what {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 2.1vw, 1.5rem);
	line-height: 1.38;
	color: var(--c-ink-inverse);
	margin: 0;
	max-width: 42ch;
}
.ww-day-line:nth-child(2) .ww-day-what { margin-left: var(--space-5); }
.ww-day-line:nth-child(3) .ww-day-what { margin-left: var(--space-6); }
.ww-day-line:nth-child(4) .ww-day-what { margin-left: calc(var(--space-6) * 1.5); }
.ww-day-line:nth-child(5) .ww-day-what { margin-left: calc(var(--space-6) * 1.75); }
.ww-day-line:nth-child(6) .ww-day-what { margin-left: calc(var(--space-6) * 2); }
.ww-day-line:nth-child(7) .ww-day-what { margin-left: calc(var(--space-6) * 2.25); }

.ww-day-figure {
	margin: var(--space-7) 0 0;
	max-width: 280px;
}
.ww-day-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.ww-day-figure figcaption {
	font-size: var(--fs-small);
	color: var(--c-muted-inverse);
	margin-top: var(--space-3);
}

@media (max-width: 991px) {
	.ww-day-line { display: block; }
	.ww-day-what,
	.ww-day-line:nth-child(n) .ww-day-what { margin-left: 0; }
	.ww-day-time { margin-bottom: var(--space-2); }
}

/* --------------------------------------------------------------------------
   Application
   -------------------------------------------------------------------------- */

.ww-apply { background: var(--c-ground); }
.ww-apply-head h2 { margin: 0 0 var(--space-4); }

.ww-steps-note {
	list-style: none;
	margin: var(--space-5) 0 var(--space-5);
	padding: 0 0 0 var(--space-4);
	border-left: 1px solid var(--c-accent);
	counter-reset: wwstep;
}
.ww-steps-note li {
	counter-increment: wwstep;
	position: relative;
	font-size: var(--fs-body);
	line-height: 1.66;
	color: var(--c-ink);
	padding: 0 0 var(--space-4) var(--space-5);
}
.ww-steps-note li:last-child { padding-bottom: 0; }
.ww-steps-note li::before {
	content: counter(wwstep);
	position: absolute;
	left: -21px;
	top: 0;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	background: var(--c-ground);
	color: var(--c-accent-deep);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ww-steps-note strong { font-weight: 600; }

.ww-form-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--c-line);
}
.ww-form-step {
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-muted);
	padding-bottom: var(--space-1);
	border-bottom: 1px solid transparent;
	margin-bottom: calc(var(--space-4) * -1 - 1px);
}
.ww-form-step.is-current {
	color: var(--c-accent-deep);
	border-bottom-color: var(--c-accent);
}

.ww-form-panel[hidden] { display: none; }
.ww-form-panel { display: block; }

.ww-form-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-line);
}
.ww-form-status {
	font-family: var(--font-text);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin: 0 auto 0 0;
}
.ww-form-back {
	background: transparent;
	border: 1px solid var(--c-line);
	color: var(--c-muted);
}
.ww-form-back:hover { border-color: var(--c-ink); color: var(--c-ink); }
/* The engine owns step state: the Back button is only useful past step one. */
#template-contactform[data-ix-current="1"] .ww-form-back { visibility: hidden; }
.ww-form-submit { display: none; }
#template-contactform[data-ix-current="3"] .ww-form-next { display: none; }
#template-contactform[data-ix-current="3"] .ww-form-submit { display: inline-flex; }

.cnvs-form-group { margin-bottom: var(--space-4); }
.cnvs-form-group label {
	display: block;
	font-family: var(--font-text);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink);
	margin-bottom: var(--space-2);
}
.cnvs-form-group label small { color: var(--c-accent-deep); }

.form-control:where(:not(.form-select)) {
	width: 100%;
	height: 52px;
	padding: 0 var(--space-4);
	font-family: var(--font-text);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--c-ink);
	background: #FBF9F4;
	border: 1px solid var(--c-line);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
	-webkit-appearance: none;
	appearance: none;
}
textarea.form-control:where(:not(.form-select)) {
	height: auto;
	padding: var(--space-3) var(--space-4);
	line-height: 1.65;
	resize: vertical;
}
select.form-control:where(:not(.form-select)) {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235E6558' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	padding-right: var(--space-6);
}
.form-control:where(:not(.form-select)):focus {
	background: #FFFFFF;
	border-color: var(--c-accent-deep);
	box-shadow: 0 0 0 2px rgba(156, 122, 75, 0.22);
	outline: none;
}
.form-control:where(:not(.form-select))::placeholder { color: #8C9184; opacity: 1; }

:is(.form-check, .form-field).ww-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--c-line);
	background: #FBF9F4;
}
:is(.form-check, .form-field).ww-check :is(.form-check-input, .check) {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	border: 1px solid var(--c-line);
	border-radius: 0;
	background-color: #FFFFFF;
	box-shadow: none;
	cursor: pointer;
}
:is(.form-check, .form-field).ww-check :is(.form-check-input, .check):checked {
	background-color: var(--c-accent);
	border-color: var(--c-accent);
}
:is(.form-check, .form-field).ww-check :is(.form-check-label, label) {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-small);
	font-weight: 400;
	line-height: 1.55;
	color: var(--c-ink);
	text-transform: none;
}

@media (min-width: 992px) {
	.ww-apply .lg\:col-4 { padding-right: var(--gutter); }
	.ww-apply .lg\:col-8 { padding-left: var(--gutter); border-left: 1px solid var(--c-line); }
}
@media (max-width: 991px) {
	.ww-apply .lg\:col-8 { padding-top: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--c-line); }
}
@media (max-width: 575px) {
	.ww-form-nav .button { width: 100%; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.ww-faq { background: var(--c-ground); }
.ww-faq-head { margin-bottom: 0; }
.ww-faq-head h2 { margin: 0 0 var(--space-4); }
.ww-faq-head .ww-lead { margin-bottom: 0; }

.ww-faq-list {
	border-bottom: 1px solid var(--c-line);
	padding: var(--space-5) 0;
}
.ww-faq-list .toggle-header {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}
.ww-faq-list .toggle-icon { flex: 0 0 auto; margin-top: 2px; }
.ww-faq-list .toggle-icon i {
	font-size: 1.125rem;
	color: var(--c-accent-deep);
}
.ww-faq-list .toggle-title {
	font-family: var(--font-display);
	font-size: 1.1875rem;
	line-height: 1.4;
	color: var(--c-ink);
	flex: 1 1 auto;
}
.ww-faq-list .toggle-content {
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--c-muted);
	max-width: 68ch;
	padding-top: var(--space-3);
}
.ww-faq-list .toggle-content p { margin: 0 0 var(--space-3); }

@media (min-width: 992px) {
	.ww-faq .lg\:col-4 { padding-right: var(--gutter); }
	.ww-faq .lg\:col-8 { padding-left: var(--gutter); border-left: 1px solid var(--c-line); }
}
@media (max-width: 991px) {
	.ww-faq .lg\:col-8 { padding-top: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--c-line); }
}

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

#footer {
	--cnvs-footer-bg: var(--c-ground-2);
	background: var(--c-ground-2);
	padding-top: var(--space-7);
}
#footer .footer-widgets-wrap { padding: 0; }

.ww-footer-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gutter);
	margin-bottom: var(--space-7);
}
.ww-footer-frame { margin: 0; }
.ww-footer-frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	opacity: 0.82;
}

.ww-footer-mark { text-align: center; }
.ww-footer-wordmark {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: 1.1;
	color: var(--c-ink-inverse);
	margin: 0 0 var(--space-3);
	letter-spacing: 0.01em;
}
.ww-footer-rule {
	display: block;
	width: 64px;
	height: 1px;
	background: var(--c-accent);
	margin: 0 auto var(--space-3);
}
.ww-footer-mark .ww-label { margin-bottom: var(--space-3); }
.ww-footer-line {
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-muted-inverse);
	margin: 0;
}

.ww-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3) var(--space-6);
	margin: var(--space-6) 0 var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-line-dark);
}
#footer .footer-widgets-wrap .ww-footer-links a {
	font-family: var(--font-text);
	font-size: var(--fs-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-muted-inverse);
	text-decoration: none;
}
#footer .footer-widgets-wrap .ww-footer-links a:hover {
	color: var(--c-accent-inverse);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ww-footer-details {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3) var(--space-6);
	text-align: center;
	padding-bottom: var(--space-6);
}
.ww-footer-details p {
	font-size: var(--fs-small);
	color: var(--c-muted-inverse);
	margin: 0;
}
#footer .footer-widgets-wrap .ww-footer-details a { color: var(--c-muted-inverse); }
#footer .footer-widgets-wrap .ww-footer-details a:hover { color: var(--c-accent-inverse); }

#copyrights {
	background: var(--c-ground-2);
	border-top: 1px solid var(--c-line-dark);
}
#footer #copyrights { color: var(--c-muted-inverse); }
#footer #copyrights .container { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.ww-copyright-row p {
	font-size: 0.875rem;
	color: var(--c-muted-inverse);
	margin: 0;
	text-align: center;
}
#footer #copyrights a { color: var(--c-accent-inverse); }

@media (max-width: 767px) {
	.ww-footer-strip { grid-template-columns: repeat(2, 1fr); }
	.ww-footer-details { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── CanvasBuilder QA: contrast fixes (WCAG AA) ── */
html body #cta-hero:not(:hover):not(:focus-visible) { color: #131613; }
html body #results > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > button:nth-of-type(1):not(:hover):not(:focus-visible) { color: #131613; }
html body #results span.ww-bar-val { color: #191d18; }
html body #application-next:not(:hover):not(:focus-visible) { color: #131613; }
/* ── end QA contrast fixes ── */

/* ---- inline overrides ---- */
:where(img[width][height]){height:auto}

.content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

.section {
	margin-top: 0;
	margin-bottom: 0;
}

#copyrights a:not(.button) { text-decoration: underline !important; text-underline-offset: 0.2em; }
dd.ww-protocol { margin: 0; }
#header.dark:not(.sticky-header) .ww-header-cta { background: rgba(28, 32, 27, 0.88) !important; }
#header.dark:not(.sticky-header) .ww-header-cta:hover,
#header.dark:not(.sticky-header) .ww-header-cta:focus-visible { background: var(--c-accent-inverse) !important; border-color: var(--c-accent-inverse) !important; color: #1C201B !important; }
#header:not(.dark) .ww-header-cta { color: var(--c-accent-deep) !important; border-color: var(--c-accent-deep) !important; }
#header:not(.dark) .ww-header-cta:hover { background: var(--c-accent-deep) !important; color: #F2EFE7 !important; }
@media (max-width: 991px) {
	#header-wrap { background: var(--c-ground); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ww-nav .menu-container { gap: var(--space-3); }
	.header-misc { margin-left: var(--space-3); }
	.ww-header-cta { padding: 0.5rem 1rem; letter-spacing: 0.08em; }
}
.button.button-3d:hover { opacity: 1; background: #6E5230; border-color: #6E5230; }
#header:not(.dark) .ww-header-cta:hover { background: #6E5230 !important; border-color: #6E5230 !important; color: #F2EFE7 !important; }
.ww-toggle-btn[data-ix-active],
.ww-toggle-btn.is-active,
.ww-toggle-btn[data-ix-active]:hover,
.ww-toggle-btn.is-active:hover { color: #0E100E; }
@media (min-width: 992px) {
	#header.dark:not(.sticky-header) #header-wrap { background: linear-gradient(to bottom, rgba(20, 24, 20, 0.7), rgba(20, 24, 20, 0.3)); }
}
}