/* ==========================================================================
   Bioenergija Lenac

   The palette grows out of the logo colour (#88C2C6, "base"): sand for the
   page, mist for bands and tints, two darker teals for text, buttons and dark
   bands, and one apricot reserved for the action a visitor should take.
   Titles and text are set in Source Sans 3; Source Serif 4 (serif, italic) is kept for
   quotes. Photographs sit in plain frames. Colours and fonts are declared in
   theme.json; the variables below only give them short names.
   ========================================================================== */

/* Fonts (self-hosted, variable) ------------------------------------------- */

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/source-serif-4-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/source-serif-4-lat.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/source-serif-4-italic-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/source-serif-4-italic-lat.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/source-sans-3-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/source-sans-3-lat.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens ------------------------------------------------------------------ */

:root {
	--sand: var(--wp--preset--color--sand, #F7F2EA);
	--mist: var(--wp--preset--color--mist, #D6ECEC);
	--base: var(--wp--preset--color--base, #88C2C6);
	--teal: var(--wp--preset--color--teal, #3A7175);
	--deep: var(--wp--preset--color--deep, #1F3D40);
	--apricot: var(--wp--preset--color--apricot, #E3A57F);
	--apricot-dark: #D9936A;
	--apricot-text: #4A2A17; /* white fails on apricot */
	--white: #FFFFFF;
	--line: rgba(31, 61, 64, 0.16);
	--line-dark: rgba(136, 194, 198, 0.24);

	--display: var(--wp--preset--font-family--display, "Source Serif 4", Georgia, serif); /* quotes and italic accents */
	--heading: var(--sans);
	--sans: var(--wp--preset--font-family--sans, "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif);

	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--gap: clamp(2rem, 5vw, 4rem);
	--section: clamp(4rem, 8vw, 6.5rem);
	--header: 76px;
	--radius: 6px;
	--radius-sm: 4px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header);
	-webkit-text-size-adjust: 100%;
}

html.nav-open {
	overflow: hidden;
}

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

body {
	position: relative;
	margin: 0;
	font-family: var(--sans);
	font-size: 1.2rem; /* Source Sans runs small */
	line-height: 1.6;
	color: var(--deep);
	background: var(--sand);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--heading);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}

p {
	max-width: 62ch;
}

a {
	color: inherit;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
	border-radius: 4px;
}

[hidden] {
	display: none !important;
}

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

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	border-radius: 0 0 8px 8px;
	background: var(--deep);
	color: var(--mist);
	font-weight: 600;
}

.skip-link:focus {
	top: 0;
}

.icon {
	flex: none;
}

.wrap {
	width: min(1200px, 100% - 2 * var(--gutter));
	margin-inline: auto;
}

/* Header and footer run edge to edge, only the page gutter is kept. */
.wrap--full {
	width: auto;
	margin-inline: var(--gutter);
}

/* The small label above titles: "Bioenergetičar · Rijeka", a date, a section number. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.2rem;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
}

.eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.9rem 1.45rem;
	border: 1px solid transparent;
	/* A <button> would otherwise keep the grey fill browsers give it. */
	background: transparent;
	border-radius: var(--radius-sm);
	font: 600 1.05rem/1.2 var(--sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--apricot);
	color: var(--apricot-text);
}

.btn--primary:hover {
	background: var(--apricot-dark);
}

.btn--ghost {
	border-color: rgba(58, 113, 117, 0.45);
	color: var(--deep);
}

.btn--ghost:hover {
	background: var(--deep);
	border-color: var(--deep);
	color: var(--mist);
}

.btn--light {
	border-color: var(--line-dark);
	color: var(--mist);
}

.btn--light:hover {
	background: var(--mist);
	border-color: var(--mist);
	color: var(--deep);
}

.cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	max-width: none;
	margin-top: 2.2rem;
}

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

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	color: var(--deep);
	transition: background-color 0.3s, box-shadow 0.3s;
}

.site-header.is-scrolled {
	background: rgba(247, 242, 234, 0.9);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 1px 0 var(--line);
}

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

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

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	height: var(--header);
}

.brand,
.site-footer__brand {
	display: flex;
	align-items: center;
	flex: none;
	min-width: 0;
	font-family: var(--heading);
	font-size: 1.3rem;
	text-decoration: none;
	white-space: nowrap;
}

.brand {
	position: relative;
	z-index: 2;
	margin-right: auto;
}

.brand img,
.site-footer__brand img {
	width: auto;
	height: 26px;
}

/* Wordmark in the colour of the surrounding text, the mark always in the logo's own colour. */
.logo {
	display: block;
	width: auto;
	height: 22px;
}

.logo__mark {
	fill: var(--base);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.menu,
.lang-switch,
.footer-menu,
.legal-menu,
.social {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu {
	gap: 1.1rem;
}

.menu a,
.lang-switch a {
	position: relative;
	font-size: 1.08rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	color: var(--deep);
	opacity: 0.8;
	transition: opacity 0.2s;
}

.menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1.5px;
	background: var(--teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}

.menu a:hover::after,
.menu .current-menu-item > a::after {
	transform: scaleX(1);
}

.menu a:hover,
.menu .current-menu-item > a,
.lang-switch a:hover,
.lang-switch [aria-current] {
	opacity: 1;
}

.lang-switch {
	gap: 0.6rem;
	font-weight: 600;
}

.lang-switch a {
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
}

.lang-switch [aria-current] {
	background: var(--mist);
}

.site-header__tel {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--teal);
	color: var(--white);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.site-header__tel:hover {
	background: var(--deep);
}

.nav-toggle {
	position: relative;
	z-index: 2;
	display: none;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 1.5px;
	margin-inline: auto;
	background: currentColor;
	transition: transform 0.3s var(--ease), background-color 0.2s;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before {
	top: -7px;
}

.nav-toggle__bars::after {
	top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* The full menu (eight items in English), language switch and phone number need about 1250px. */
@media (max-width: 1250px) {
	.site-header__inner {
		gap: 0.8rem;
	}

	.js .nav-toggle {
		display: block;
	}

	/* The header row stays put as a solid bar; the panel below it scrolls on its own. */
	.nav-open .site-header {
		color: var(--mist);
		background: var(--deep);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
	}

	.nav-open .site-header__tel {
		background: var(--mist);
		color: var(--deep);
	}

	/* The open menu is a full-screen panel in the deep water colour. */
	.site-nav {
		position: fixed;
		inset: var(--header) 0 0;
		z-index: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
		padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
		background: var(--deep);
		color: var(--mist);
		overflow: auto;
		overscroll-behavior: contain;
	}

	/* Centred while it fits; on a short screen it starts at the top, so the first item can always be reached.
	   (Centring with justify-content would push the overflow above the top, out of scrolling range.) */
	.site-nav > nav {
		margin-top: auto;
	}

	.site-nav > .lang-switch {
		margin-bottom: auto;
	}

	.admin-bar .site-nav {
		top: calc(32px + var(--header));
	}

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

	/* Short screens (small phones, landscape): tighter rows so more of the menu shows at once. */
	@media (max-height: 700px) {
		.site-nav {
			gap: 1.25rem;
		}

		.site-nav .menu a {
			padding: 0.6rem 0;
			font-size: 1.3rem;
		}
	}

	.js .site-nav:not(.is-open) {
		display: none;
	}

	.site-nav.is-open {
		animation: panel 0.4s var(--ease);
	}

	@keyframes panel {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}
	}

	/* Without JavaScript the menu simply sits below the header row. */
	html:not(.js) .site-nav {
		position: static;
		padding: 1rem 0 1.5rem;
	}

	html:not(.js) .site-header {
		position: static;
		background: var(--deep);
		color: var(--mist);
	}

	html:not(.js) .site-header__inner {
		flex-wrap: wrap;
		height: auto;
		padding-block: 1rem;
	}

	/* The menu sits in its own <nav>, which has to span the panel for the rules to reach its edge. */
	.site-nav > nav {
		width: 100%;
	}

	.menu {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.menu a {
		display: block;
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--line-dark);
		font-family: var(--heading);
		font-size: clamp(1.5rem, 6vw, 2.2rem);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--mist);
		opacity: 1;
	}

	.menu a::after {
		display: none;
	}

	.lang-switch a {
		color: var(--mist);
		font-size: 1.1rem;
	}

	.lang-switch [aria-current] {
		background: rgba(136, 194, 198, 0.2);
	}
}

/* On phones the number itself is in the bar at the bottom; the header keeps the icon. */
@media (max-width: 560px) {
	.brand {
		font-size: 1.15rem;
	}

	.site-header .logo {
		height: 18px;
	}

	.site-header__tel {
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
	}

	.site-header__tel span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

@media (max-width: 350px) {
	.site-header .logo {
		height: 15px;
	}
}

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

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

.bg-card {
	background: var(--white);
}

/* The value is still called "sand" in the saved sections; it is the tinted band. */
.bg-sand {
	background: var(--mist);
}

/* Teal text on mist is a hair under 4.5:1, so on mist the teal is a shade darker. */
.bg-sand,
.page-head,
.aside-card--call,
.avatar,
.plan__badge {
	--teal: #33676B;
}

.bg-dark,
.section--course {
	background: var(--deep);
	color: var(--mist);
}

.section__title {
	max-width: 22ch;
	font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}

.section__lead {
	margin-top: 1.2rem;
	font-size: 1.25rem;
	color: var(--teal);
}

.bg-dark .section__lead,
.section--course .section__lead {
	color: var(--mist);
}

.section__head + * {
	margin-top: 2.8rem;
}

.split {
	display: grid;
	gap: var(--gap);
	align-items: start;
}

.split > .section__head + * {
	margin-top: 0;
}

@media (min-width: 901px) {
	.split--faq,
	.split--timeline,
	.split--form {
		grid-template-columns: 0.85fr 1.15fr;
	}

	/* The head stays in view while the long column scrolls. */
	.split--faq > .section__head,
	.split--timeline > .section__head,
	.split--form > .section__head {
		position: sticky;
		top: calc(var(--header) + 2rem);
	}

	.split--facts:has(.round) {
		grid-template-columns: 1.1fr 0.9fr;
		align-items: center;
	}

	/* Without a photograph the facts run in one row across the page. */
	.split--facts:not(:has(.round)) .facts {
		grid-template-columns: repeat(4, 1fr);
	}

	.split--media {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: center;
	}

	.section--media-right .portrait {
		order: 2;
	}

	.split--course {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.split--contact {
		grid-template-columns: 1fr 1.15fr;
		align-items: stretch;
	}
}

.prose > * + * {
	margin-top: 1rem;
}

.prose--muted {
	margin-top: 1.2rem;
	color: var(--teal);
}

.bg-dark .prose--muted {
	color: var(--mist);
}

.prose a,
.content > p a,
.content > ul a,
.content > ol a {
	color: var(--teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.statement {
	max-width: 26ch;
	margin-top: 1.6rem;
	font-family: var(--display);
	padding-left: 1.2rem;
	border-left: 2px solid var(--apricot);
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
}

.disclaimer {
	max-width: none;
	margin-top: 2rem;
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--apricot);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--white);
	font-size: 1.05rem;
}

.bg-card .disclaimer {
	background: var(--mist);
}

/* Motion ------------------------------------------------------------------
   Reveal on scroll (only when main.js confirms IntersectionObserver), the entrance
   of the hero and two scroll-linked touches. All of it is switched off by
   prefers-reduced-motion and by "Animacije" in Postavke teme → Izgled (.no-reveal). */

/* :where() keeps the hiding rules weak, so .is-visible always wins. */
.has-reveal :where(.section:not(.section--hero) > .wrap > *, .path, .quote, .step, .post-card, .timeline__item, .plan, .short, .facts > div) {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.8s var(--ease), transform 0.9s var(--ease), clip-path 1.1s var(--ease);
}

/* Cards grow into place a little. */
.has-reveal :where(.quote, .step, .post-card, .plan, .short) {
	transform: translateY(26px) scale(0.96);
}

/* Photographs are uncovered from the top, like a blind going up. */
.has-reveal :where(.portrait, .round, .map, .video) {
	clip-path: inset(0 0 100% 0);
	transform: none;
}

@media (min-width: 901px) {
	/* The two halves of a split section come in from their own sides. */
	.has-reveal :where(.split > :first-child:not(.portrait, .round)) {
		transform: translateX(-32px);
	}

	.has-reveal :where(.split > :last-child:not(.portrait, .round, .map)) {
		transform: translateX(32px);
	}
}

.has-reveal .is-visible {
	opacity: 1;
	transform: none;
}

/* Only the photographs are clipped; on anything else a clip would cut off focus rings. */
.has-reveal .is-visible:where(.portrait, .round, .map, .video) {
	clip-path: inset(0);
}

/* The hero is on screen from the start, so it plays once on load: the text rises line
   by line, the photograph is uncovered and its sand-coloured mount slides out from under it. */
@media (prefers-reduced-motion: no-preference) {
	.js body:not(.no-reveal) .hero__text > *,
	.js body:not(.no-reveal) .page-head .wrap > * {
		animation: rise 0.9s var(--ease) both;
	}

	.js body:not(.no-reveal) .hero__text > :nth-child(2),
	.js body:not(.no-reveal) .page-head .wrap > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.js body:not(.no-reveal) .hero__text > :nth-child(3) {
		animation-delay: 0.16s;
	}

	.js body:not(.no-reveal) .hero__text > :nth-child(4) {
		animation-delay: 0.24s;
	}

	.js body:not(.no-reveal) .hero__text > :nth-child(n+5) {
		animation-delay: 0.32s;
	}

	.js body:not(.no-reveal) .hero__photo {
		animation: uncover 1.1s var(--ease) 0.1s both;
	}

	.js body:not(.no-reveal) .hero__photo img {
		animation: settle 1.8s var(--ease) both;
	}

	.js body:not(.no-reveal) .hero__visual::before {
		animation: mount 0.9s var(--ease) 0.6s both;
	}
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

@keyframes uncover {
	from {
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0);
	}
}

@keyframes settle {
	from {
		transform: scale(1.1);
	}
}

@keyframes mount {
	from {
		opacity: 0;
		transform: translate(-1.25rem, -1.25rem);
	}
}

/* Where the browser can tie an animation to scrolling: a thin line under the header
   that fills as the page is read, and photographs that drift a little inside their frames. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		body:not(.no-reveal) .site-header::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -2px;
			height: 2px;
			background: var(--apricot);
			transform: scaleX(0);
			transform-origin: left;
			animation: progress linear both;
			animation-timeline: scroll(root);
		}

		body:not(.no-reveal) .portrait img,
		body:not(.no-reveal) .round img {
			animation: drift linear both;
			animation-timeline: view();
		}
	}
}

@keyframes progress {
	to {
		transform: scaleX(1);
	}
}

@keyframes drift {
	from {
		transform: scale(1.06) translateY(-2.5%);
	}

	to {
		transform: scale(1.06) translateY(2.5%);
	}
}

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

.section--hero {
	overflow: hidden;
	padding: calc(var(--header) + clamp(2.5rem, 7vw, 5.5rem)) 0 clamp(3rem, 6vw, 5rem);
	background: var(--sand);
}

.hero__grid {
	display: grid;
	gap: var(--gap);
	align-items: center;
}

@media (min-width: 901px) {
	.hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}

.hero__title {
	max-width: 15ch;
	font-size: clamp(2.5rem, 5.2vw, 4.4rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.hero__sub {
	max-width: 44ch;
	margin-top: 1.6rem;
	font-size: clamp(1.2rem, 1.6vw, 1.35rem);
	color: var(--teal);
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	max-width: none;
	margin-top: 2.2rem;
}

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin-top: 2.6rem;
	padding: 1.6rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.stats li {
	display: grid;
	gap: 0.15rem;
}

.stats strong {
	font-family: var(--heading);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--teal);
}

.stats span {
	font-size: 0.95rem;
	color: var(--teal);
}

.hero__visual {
	position: relative;
	justify-self: center;
	width: min(100% - 1.25rem, 500px);
	aspect-ratio: 4 / 5;
	color: var(--teal);
}

/* A plain frame, with a block of the brand colour set off behind it like a mount. */
.hero__visual::before {
	content: "";
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	border-radius: var(--radius);
	background: var(--base);
}

.hero__photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--mist);
}

.hero__photo img,
.hero__photo svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.hero__visual {
		justify-self: start;
		width: min(100% - 1.25rem, 420px);
		aspect-ratio: 1;
		margin-top: 1rem;
	}

	.hero__title {
		max-width: 12ch;
	}
}

/* Without a photograph: one column of text. */
.section--hero-plain {
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.section--hero-plain .hero__grid {
	grid-template-columns: minmax(0, 1fr);
}

.section--hero-plain .hero__title {
	max-width: 18ch;
	font-size: clamp(2.4rem, 5vw, 4.2rem);
}

/* Entry paths: three doors, chosen by what brought the visitor here. */
.paths {
	display: grid;
	margin-top: clamp(3.5rem, 7vw, 6rem);
	border-top: 1px solid var(--line);
}

.path {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.8rem 1.6rem 1.8rem 0;
	color: var(--deep);
	text-decoration: none;
	transition: color 0.2s;
}

.path::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 2px;
	background: var(--apricot);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease);
}

.path:hover::before {
	transform: scaleX(1);
}

.path__kicker {
	color: var(--teal);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.path__title {
	font-family: var(--heading);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
	font-size: 1.45rem;
	transition: color 0.2s;
}

.path:hover .path__title {
	color: var(--teal);
}

.path__text {
	flex: 1;
	color: var(--teal);
	font-size: 1.08rem;
}

.path__more,
.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
	color: var(--teal);
	font-size: 1rem;
	font-weight: 600;
}

.path__more .icon,
.post-card__more .icon {
	width: 16px;
	height: 16px;
	transition: transform 0.3s var(--ease);
}

.path:hover .icon,
.post-card:hover .icon {
	transform: translateX(4px);
}

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

	.paths--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.path + .path {
		padding-left: 1.8rem;
		border-left: 1px solid var(--line);
	}
}

@media (max-width: 900px) {
	.path {
		padding-right: 0;
		border-bottom: 1px solid var(--line);
	}
}

/* Title band of pages without a hero --------------------------------------- */

.page-head {
	position: relative;
	overflow: hidden;
	padding: calc(var(--header) + clamp(3rem, 7vw, 5rem)) 0 clamp(2.5rem, 6vw, 4rem);
	border-bottom: 1px solid var(--line);
	background: var(--mist);
}

.page-head__title {
	max-width: 18ch;
	font-size: clamp(2.2rem, 4.6vw, 3.8rem);
	font-weight: 600;
	letter-spacing: -0.03em;
}

/* Page content: sections run full width, everything else is a text column. -- */

.content > :not(.section) {
	width: min(720px, 100% - 2 * var(--gutter));
	max-width: none;
	margin-inline: max(var(--gutter), (100% - 1200px) / 2) auto;
}

.content > :not(.section) + :not(.section) {
	margin-top: 1.1rem;
}

.content > :not(.section):first-child,
.content > .section + :not(.section) {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

.content > :not(.section):last-child {
	margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.content > h2 {
	font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.content > h3 {
	font-size: 1.45rem;
}

.content > h4 {
	font-size: 1.2rem;
}

.content > :not(.section) + h2,
.content > :not(.section) + h3 {
	margin-top: 2.6rem;
}

.content > ul,
.content > ol {
	padding-left: 1.3rem;
}

.content > ul li + li,
.content > ol li + li {
	margin-top: 0.35rem;
}

.content > ul li::marker {
	color: var(--teal);
}

.content > blockquote,
.content > .wp-block-quote {
	padding-left: 1.4rem;
	border-left: 2px solid var(--apricot);
	font-family: var(--display);
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1.35;
}

.content img {
	border-radius: var(--radius-sm);
}

.content .alignleft {
	float: left;
	margin: 0.3rem 1.5rem 1rem 0;
}

.content .alignright {
	float: right;
	margin: 0.3rem 0 1rem 1.5rem;
}

.content .aligncenter,
.content p[style*="center"] img {
	margin-inline: auto;
}

.content > hr,
.content > .wp-block-separator {
	height: 1px;
	border: 0;
	background: var(--line);
}

.content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.05rem;
}

.content th,
.content td {
	padding: 0.7rem 0.8rem 0.7rem 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.content iframe {
	max-width: 100%;
}

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

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

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

.faq summary {
	position: relative;
	padding: 1.3rem 3rem 1.3rem 0;
	list-style: none;
	cursor: pointer;
}

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

.faq summary h3 {
	font-size: 1.2rem;
	transition: color 0.2s;
}

.faq summary:hover h3 {
	color: var(--teal);
}

/* Plus that turns into a minus. */
.faq summary::before,
.faq summary::after {
	content: "";
	position: absolute;
	right: 0.6rem;
	top: 50%;
	width: 16px;
	height: 1.5px;
	background: var(--teal);
	transition: transform 0.35s var(--ease);
}

.faq summary::after {
	transform: rotate(90deg);
}

.faq__item[open] summary::after {
	transform: rotate(0);
}

.faq__answer {
	padding-bottom: 1.4rem;
	color: var(--teal);
	font-size: 1.1rem;
}

.faq__answer p {
	max-width: 56ch;
}

/* Browsers that can animate details content do; others open instantly. */
@supports (interpolate-size: allow-keywords) {
	.faq__item::details-content {
		height: 0;
		overflow: hidden;
		transition: height 0.4s var(--ease), content-visibility 0.4s allow-discrete;
	}

	.faq__item[open]::details-content {
		height: auto;
		interpolate-size: allow-keywords;
	}
}

/* Facts ------------------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.8rem 2rem;
	margin-top: 2.2rem;
}

.facts > div {
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.facts dt {
	color: var(--teal);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}

.facts dd {
	margin-top: 0.3rem;
	font-family: var(--heading);
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.round {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--mist);
}

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

@media (max-width: 900px) {
	.round {
		justify-self: start;
		max-width: 300px;
	}
}

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

/* Without a photograph the facts stand as cards and the note is only as wide as its sentence. */
.split--facts:not(:has(.round)) .facts {
	gap: 1rem;
}

.split--facts:not(:has(.round)) .facts > div {
	padding: 1.3rem 1.4rem 1.4rem;
	border-top: 0;
	border-radius: var(--radius-sm);
	background: var(--white);
}

.bg-card .split--facts:not(:has(.round)) .facts > div {
	background: var(--mist);
}

.split--facts:not(:has(.round)) .disclaimer {
	width: fit-content;
	margin-top: 1.4rem;
	padding-block: 0.2rem;
	background: none;
}

/* Text and image ---------------------------------------------------------- */

.portrait {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--mist);
}

.portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.section--media .prose {
	font-size: 1.15rem;
}

@media (max-width: 900px) {
	.portrait {
		max-width: 340px;
	}

	.portrait--empty {
		display: none;
	}
}

/* Steps ------------------------------------------------------------------- */

.steps {
	display: grid;
	gap: 2.5rem 2rem;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	position: relative;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
	counter-increment: step;
}

.step::after {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 2.5rem;
	height: 2px;
	background: var(--apricot);
}

.step::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	font-family: var(--heading);
	font-size: 2.4rem;
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--teal);
}

.step__kicker {
	margin-top: 1rem;
	color: var(--teal);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.step__title {
	margin-top: 1rem;
	font-size: 1.35rem;
}

.step__kicker + .step__title {
	margin-top: 0.3rem;
}

.step p:not(.step__kicker),
.step__list {
	margin-top: 0.7rem;
	color: var(--teal);
	font-size: 1.08rem;
}

.step__list {
	padding: 0;
	list-style: none;
}

.step__list li {
	position: relative;
	padding-left: 1.1rem;
}

.step__list li + li {
	margin-top: 0.35rem;
}

.step__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--base);
}

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

@media (min-width: 1024px) {
	.steps--3,
	.steps--6 {
		grid-template-columns: repeat(3, 1fr);
	}

	.steps--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.steps--5 {
		grid-template-columns: repeat(5, 1fr);
		gap: 2.5rem 1.5rem;
	}
}

@media (min-width: 701px) and (max-width: 1023px) {
	/* An odd last step spans the row instead of standing alone in a corner. */
	.steps--3 .step:last-child,
	.steps--5 .step:last-child {
		grid-column: 1 / -1;
	}
}

/* Long text ------------------------------------------------------------- */

.wrap--narrow {
	width: min(760px, 100% - 2 * var(--gutter));
}

.section--text .section__title + .prose {
	margin-top: 2rem;
}

.video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-top: 2rem;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--deep);
}

.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Text beside the player: the player is the larger half and stands on a block of the logo colour. */
.split--video .video {
	margin: 0 12px 12px 0;
	overflow: visible;
	background: none;
}

.split--video .video::before {
	content: "";
	position: absolute;
	inset: 12px -12px -12px 12px;
	border-radius: var(--radius);
	background: var(--base);
}

/* The reveal uncovers the player by its clip; once shown, the clip has to let the block behind it out. */
.has-reveal .split--video .video.is-visible {
	clip-path: inset(0 -12px -12px 0);
}

.split--video .video iframe {
	border-radius: var(--radius);
	background: var(--deep);
}

@media (min-width: 901px) {
	.split--video {
		grid-template-columns: 0.75fr 1.25fr;
		align-items: center;
	}
}

.prose--long h2,
.prose--long h3 {
	margin-top: 2.4rem;
}

.prose--long h2 {
	font-size: 1.6rem;
}

.prose--long h3 {
	font-size: 1.25rem;
}

.prose--long ul,
.prose--long ol {
	padding-left: 1.3rem;
}

.prose--long li + li {
	margin-top: 0.35rem;
}

.prose--long li::marker {
	color: var(--teal);
}

/* A list of short points with a tick each, in two columns where there is room. */
.prose--long .ticks {
	display: grid;
	gap: 0.7rem 2rem;
	padding-left: 0;
	list-style: none;
}

@media (min-width: 601px) {
	.prose--long .ticks:not(.ticks--one) {
		grid-template-columns: 1fr 1fr;
	}
}

.prose--long .ticks li {
	position: relative;
	margin-top: 0;
	padding-left: 1.9rem;
}

.prose--long .ticks li::before {
	content: "";
	position: absolute;
	top: 0.42em;
	left: 0.15rem;
	width: 0.95rem;
	height: 0.5rem;
	border-bottom: 2px solid var(--teal);
	border-left: 2px solid var(--teal);
	transform: rotate(-45deg);
}

.prose--long img {
	border-radius: var(--radius-sm);
}

/* Price list --------------------------------------------------------------
   Anchoring: the first card carries the highest price, the featured card is
   the one most people need, and inside a group the rows run from the most
   expensive down. A comparison price is shown crossed out, with its label
   and the saving worked out from the two numbers. */

.price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
}

.price__now {
	font-family: var(--heading);
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.price__anchor {
	color: var(--teal);
	font-size: 1rem;
	white-space: nowrap;
}

.price__anchor s {
	text-decoration-thickness: 1.5px;
	text-decoration-color: var(--apricot);
}

.price__saving {
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-sm);
	background: var(--apricot);
	color: var(--apricot-text);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

.plans {
	display: grid;
	gap: 1.25rem;
	margin: 3.5rem 0 0;
	padding: 0;
	list-style: none;
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2rem 1.8rem;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--white);
}

.bg-card .plan {
	background: var(--sand);
}

.plan--featured {
	border-color: var(--deep);
	background: var(--deep);
	color: var(--mist);
}

.bg-card .plan--featured {
	background: var(--deep);
}

.plan__badge {
	align-self: flex-start;
	margin-bottom: 1rem;
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-sm);
	background: var(--mist);
	color: var(--teal);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.plan--featured .plan__badge {
	background: var(--base);
	color: var(--deep);
}

.plan__title {
	font-size: 1.3rem;
}

.plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.7rem;
	max-width: none;
	margin-top: 1.4rem;
}

.plan__price .price__now {
	font-size: clamp(2.4rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

.plan__price .price__anchor {
	flex-basis: 100%;
	font-size: 1.05rem;
}

.plan__unit,
.plan__reframe,
.plan__lowest {
	color: var(--teal);
	font-size: 1rem;
}

.plan__reframe {
	margin-top: 0.5rem;
	font-weight: 500;
}

.plan__lowest {
	margin-top: 0.3rem;
	font-size: 0.9rem;
}

.plan--featured .price__anchor,
.plan--featured .plan__unit,
.plan--featured .plan__reframe,
.plan--featured .plan__lowest {
	color: var(--mist);
}

.plan--featured .price__saving {
	background: var(--base);
	color: var(--deep);
}

.plan__features {
	flex: 1;
	margin-top: 1.5rem;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: 1.08rem;
}

.plan--featured .plan__features {
	border-top-color: var(--line-dark);
}

.plan__features li {
	position: relative;
	padding-left: 1.6rem;
}

.plan__features li + li {
	margin-top: 0.55rem;
}

.plan__features li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.45em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 1.5px solid var(--teal);
	border-bottom: 1.5px solid var(--teal);
	transform: rotate(-45deg);
}

.plan--featured .plan__features li::before {
	border-color: var(--base);
}

.plan__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.2rem;
	max-width: none;
	margin-top: 1.8rem;
}

.plan__cta .btn {
	flex: 1 1 auto;
}

.plan--featured .btn--ghost {
	border-color: var(--line-dark);
	color: var(--mist);
}

.plan__link {
	color: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-underline-offset: 0.25em;
}

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

	.plans--3 {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
	}

	/* The featured card stands a little taller than its neighbours. */
	.plans--3 .plan--featured {
		margin-block: -1rem;
		padding-block: 3rem;
	}
}

.price-groups {
	display: grid;
	gap: 2.5rem var(--gap);
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 901px) {
	.price-groups {
		grid-template-columns: repeat(2, 1fr);
	}
}

.price-group__title {
	margin-bottom: 0.9rem;
	color: var(--teal);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

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

.prices__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
}

.prices dt {
	display: grid;
	flex: 1 1 38%;
	gap: 0.15rem;
	font-weight: 500;
}

.prices dt small {
	color: var(--teal);
	font-size: 0.95rem;
	font-weight: 400;
}

/* With an anchor and a saving the price may need two lines on a phone. */
.prices dd {
	flex: 0 1 auto;
	max-width: 62%;
	text-align: right;
}

.prices .price {
	justify-content: flex-end;
}

.prices .price__now {
	font-size: 1.25rem;
}

.prices__note {
	max-width: none;
	margin-top: 2rem;
	color: var(--teal);
	font-size: 0.98rem;
}

.prices__digital {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	max-width: none;
	margin-top: 0.8rem;
	color: var(--teal);
	font-size: 0.98rem;
}

.prices__digital a {
	color: var(--deep);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

/* Testimonials ------------------------------------------------------------ */

.avatar {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--mist);
	color: var(--teal);
	font: 600 0.95rem/1 var(--sans);
	letter-spacing: 0.04em;
}

.quote-featured {
	position: relative;
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	background: var(--deep);
	color: var(--mist);
	text-align: center;
}

.quote-featured::before {
	content: "\201C";
	display: block;
	margin-bottom: -0.75rem;
	font-family: var(--display);
	font-size: 3.25rem;
	line-height: 1;
	color: var(--base);
}

.quote-featured blockquote p {
	max-width: 58ch;
	margin-inline: auto;
	font-family: var(--display);
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
	font-style: italic;
	line-height: 1.5;
	text-wrap: balance;
}

.quote-featured figcaption {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: 1.2rem;
	font-size: 1rem;
	color: var(--mist);
	text-align: left;
}

.quote-featured .avatar {
	background: var(--base);
	color: var(--deep);
}

.quote-featured strong {
	display: block;
	color: var(--white);
	font-weight: 600;
}

.quotes {
	display: grid;
	gap: 1.25rem;
	padding: 0;
	list-style: none;
}

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

@media (min-width: 1024px) {
	.quotes {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Wall: cards of their own height packed into columns, for a page of full testimonials. */
.quotes--wall {
	display: block;
	column-gap: 1.25rem;
}

.quotes--wall .quote {
	break-inside: avoid;
	margin-bottom: 1.25rem;
}

@media (min-width: 701px) {
	.quotes--wall {
		columns: 2;
	}
}

@media (min-width: 1024px) {
	.quotes--wall {
		columns: 3;
	}
}

/* Carousel (testimonials, articles): one row that scrolls sideways and snaps to the cards.
   .posts is declared further down, so its carousel variant needs the extra weight. */
.quotes--carousel,
.posts.posts--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.quotes--carousel::-webkit-scrollbar,
.posts--carousel::-webkit-scrollbar {
	display: none;
}

.quotes--carousel > *,
.posts--carousel > * {
	flex: 0 0 86%;
	scroll-snap-align: start;
}

/* Cards outside the visible part of the row would otherwise wait for their reveal. */
.quotes--carousel .quote,
.posts--carousel .post-card {
	opacity: 1;
	transform: none;
}

@media (min-width: 701px) {
	.quotes--carousel > * {
		flex-basis: calc((100% - 1.25rem) / 2);
	}

	.posts--carousel > * {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}

@media (min-width: 1024px) {
	.quotes--carousel > * {
		flex-basis: calc((100% - 2.5rem) / 3);
	}

	.posts--carousel > * {
		flex-basis: calc((100% - 3rem) / 3);
	}
}

.carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	max-width: none;
	margin-top: 1.25rem;
}

.carousel__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(58, 113, 117, 0.45);
	border-radius: var(--radius-sm);
	background: none;
	color: var(--deep);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.carousel__btn:hover:not(:disabled) {
	border-color: var(--deep);
	background: var(--deep);
	color: var(--mist);
}

.carousel__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

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

.quote {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.4rem 1.8rem 1.6rem;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--white);
}

.bg-card .quote {
	background: var(--sand);
}

.quote::before {
	content: "\201C";
	position: absolute;
	left: 1.5rem;
	top: 0.3rem;
	font-family: var(--display);
	font-size: 4rem;
	line-height: 1;
	color: var(--base);
}

.quote blockquote {
	flex: 1;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--deep);
}

.quote blockquote p + p {
	margin-top: 0.8rem;
}

/* Folded: about eight lines, fading out at the bottom. */
.quote blockquote.is-folded {
	position: relative;
	max-height: 13.5em;
	overflow: hidden;
}

.quote blockquote.is-folded::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4em;
	background: linear-gradient(to bottom, transparent, var(--white));
}

.bg-card .quote blockquote.is-folded::after {
	background: linear-gradient(to bottom, transparent, var(--sand));
}

.quote__more {
	align-self: flex-start;
	margin-top: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--teal);
	font: 600 1rem var(--sans);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.quote__by {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	max-width: none;
	margin-top: 1.3rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
	color: var(--teal);
	font-size: 0.95rem;
}

.quote__by strong {
	display: block;
	color: var(--deep);
	font-weight: 600;
}

.cta--center {
	justify-content: center;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Course ------------------------------------------------------------------ */

.section--course {
	overflow: hidden;
}

.section--course > .wrap {
	position: relative;
}

.section--course .section__title {
	color: var(--white);
}

.course__quote {
	margin-top: 2rem;
	padding-left: 1.4rem;
	border-left: 1px solid var(--base);
}

.course__quote blockquote {
	max-width: 32ch;
	font-family: var(--display);
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1.35;
}

.course__quote figcaption {
	margin-top: 0.6rem;
	font-size: 0.95rem;
	color: var(--base);
}

.terms {
	display: grid;
	gap: 1rem;
}

.term {
	position: relative;
	width: min(100%, 420px);
	padding: 2rem;
	border-radius: var(--radius);
	background: var(--white);
	color: var(--deep);
}

.term__date {
	font-family: var(--heading);
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.term__note {
	margin-top: 0.4rem;
	color: var(--teal);
	font-size: 1.05rem;
}

.term__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.55rem 1.2rem;
	margin-top: 1.4rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--line);
	font-size: 1.08rem;
}

.term__facts dt {
	color: var(--teal);
}

.term__facts dd {
	font-weight: 600;
}

.term .btn {
	width: 100%;
	margin-top: 1.5rem;
}

.term--full .term__date {
	color: var(--teal);
}

.term--none p {
	color: var(--teal);
	margin-bottom: 1.2rem;
}

@media (min-width: 901px) {
	.term {
		width: 420px;
	}
}

/* Timeline ---------------------------------------------------------------- */

.timeline {
	padding: 0;
	list-style: none;
}

.timeline__item {
	position: relative;
	display: flex;
	gap: 1.4rem;
	padding: 0 0 2.4rem 2.2rem;
	border-left: 1px solid var(--line);
}

.timeline__item:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}

.timeline__item::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 0.4rem;
	width: 11px;
	height: 11px;
	border: 2px solid var(--teal);
	border-radius: 50%;
	background: var(--sand);
}

.timeline__item:last-child::before {
	background: var(--teal);
}

.timeline__image {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.timeline__kicker {
	color: var(--teal);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.timeline__title {
	margin-top: 0.3rem;
	font-size: 1.45rem;
}

.timeline__item p:not(.timeline__kicker) {
	margin-top: 0.6rem;
	color: var(--teal);
	font-size: 1.08rem;
}

/* Contact ----------------------------------------------------------------- */

.contact {
	display: grid;
	margin-top: 1.8rem;
	border-top: 1px solid var(--line);
	font-style: normal;
}

.contact > * {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 1.25rem;
}

/* The icon sits on a small tile of mist. */
.contact .icon {
	box-sizing: content-box;
	padding: 0.7rem;
	border-radius: var(--radius-sm);
	background: var(--mist);
	color: var(--teal);
}

.bg-sand .contact .icon {
	background: var(--white);
}

.contact a {
	color: var(--deep);
	font-weight: 600;
	text-decoration: none;
}

.contact a:hover span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.contact__hours {
	margin-top: 1.3rem;
	color: var(--teal);
	font-size: 1.05rem;
}

.contact__apps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.8rem;
	padding: 0;
	list-style: none;
}

.map {
	position: relative;
	min-height: 100%;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--white);
}

.map__panel {
	position: relative;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.7rem;
	height: 100%;
	padding: 1.5rem;
	text-align: center;
}

.map__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 45%, var(--mist) 0, transparent 38%),
		repeating-linear-gradient(0deg, transparent 0 31px, var(--mist) 31px 32px),
		repeating-linear-gradient(90deg, transparent 0 31px, var(--mist) 31px 32px);
	pointer-events: none;
}

.map__panel > * {
	position: relative;
}

.map__panel > .icon {
	width: 32px;
	height: 32px;
	color: var(--teal);
}

.map__place {
	font-family: var(--heading);
	font-size: 1.3rem;
	font-weight: 600;
}

.map__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 1.2rem;
}

.map__link {
	color: var(--teal);
	font-size: 1.05rem;
	font-weight: 600;
}

.map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 900px) {
	.map {
		aspect-ratio: 4 / 3;
	}
}

/* Forms (Contact Form 7) --------------------------------------------------- */

.form {
	padding: clamp(1.5rem, 3vw, 2.4rem);
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--white);
}

.bg-card .form {
	background: var(--sand);
}

.form p {
	max-width: none;
}

.form p + p {
	margin-top: 1.1rem;
}

.form label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
}

.form input:not([type="submit"], [type="checkbox"], [type="radio"]),
.form select,
.form textarea {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--deep);
	font: inherit;
	font-weight: 400;
	transition: border-color 0.2s, box-shadow 0.2s;
}

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

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
	outline: 0;
	border-color: var(--teal);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 4px var(--mist);
}

.form .wpcf7-acceptance label {
	display: flex;
	gap: 0.6rem;
	font-weight: 400;
}

.form .wpcf7-list-item {
	margin: 0;
}

.form input[type="checkbox"] {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	accent-color: var(--teal);
}

.form input[type="submit"] {
	width: 100%;
	padding: 1rem 1.45rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--apricot);
	color: var(--apricot-text);
	font: 600 1.1rem/1.2 var(--sans);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.25s var(--ease);
}

.form input[type="submit"]:hover {
	background: var(--apricot-dark);
	transform: translateY(-1px);
}

.form input[type="submit"]:disabled {
	opacity: 0.55;
	cursor: default;
}

.form .wpcf7-spinner {
	display: none;
}

.form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.3rem;
	color: var(--apricot-text);
	font-size: 0.95rem;
	font-weight: 400;
}

.form .wpcf7-response-output {
	margin: 1.1rem 0 0;
	padding: 0.9rem 1.1rem;
	border: 0;
	border-left: 3px solid var(--apricot);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--white);
	font-size: 1.05rem;
}

.bg-card .disclaimer {
	background: var(--mist);
}

/* CF7 keeps its hidden inputs in a fieldset, which browsers draw with a border. */
.form .hidden-fields-container {
	display: none;
}

.form .wpcf7-response-output:empty,
.form .screen-reader-response,
.form .hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.form .sent .wpcf7-response-output {
	border-left-color: var(--teal);
	background: var(--mist);
}

.form__note {
	color: var(--teal);
	font-size: 0.98rem;
}

.form__preview {
	color: var(--teal);
}

/* Shorts ------------------------------------------------------------------ */

.shorts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 701px) {
	.shorts {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.shorts {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* In one row: about two and a half cards on a phone, five on a wide screen. */
.shorts.shorts--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.shorts--carousel::-webkit-scrollbar {
	display: none;
}

.shorts--carousel > * {
	flex: 0 0 42%;
	scroll-snap-align: start;
}

@media (min-width: 701px) {
	.shorts--carousel > * {
		flex-basis: calc((100% - 3.75rem) / 4);
	}
}

@media (min-width: 1024px) {
	.shorts--carousel > * {
		flex-basis: calc((100% - 5rem) / 5);
	}
}

.short {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--deep);
}

.short__play {
	display: block;
	height: 100%;
	color: var(--white);
	text-decoration: none;
}

.short__play img,
.short iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.short__play img {
	transition: transform 0.6s var(--ease);
}

.short__play:hover img {
	transform: scale(1.03);
}

/* The title sits on a shade of the deep colour so it reads on any cover. */
.short__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3rem 1rem 1rem;
	background: linear-gradient(to bottom, rgba(31, 61, 64, 0), rgba(31, 61, 64, 0.9));
	font-weight: 600;
	line-height: 1.3;
}

.short__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--apricot);
	color: var(--apricot-text);
	translate: -50% -50%;
	transition: transform 0.3s var(--ease);
}

.short__play:hover .short__icon {
	transform: scale(1.08);
}

.short__icon .icon {
	margin-left: 2px;
	fill: currentColor;
}

/* Articles ---------------------------------------------------------------- */

.posts {
	display: grid;
	gap: 1.5rem;
	padding: 0;
	list-style: none;
}

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

@media (min-width: 1024px) {
	.posts {
		grid-template-columns: repeat(3, 1fr);
	}
}

.post-card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	height: 100%;
	padding: 1.6rem;
	border-radius: var(--radius);
	background: var(--white);
	border: 1px solid var(--line);
	text-decoration: none;
	transition: border-color 0.25s;
}

.post-card:hover {
	border-color: var(--teal);
}

.post-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.post-card__title {
	font-size: 1.3rem;
}

.post-card__text {
	flex: 1;
	color: var(--teal);
	font-size: 1.05rem;
}

/* One article: a reading column and an aside that stays in view. */
.article {
	display: grid;
	gap: var(--gap);
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem);
}

/* The row of other articles is a band of its own, closer than a full section. */
.article + .section--posts {
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 1024px) {
	.article {
		grid-template-columns: minmax(0, 1fr) 340px;
		align-items: start;
	}

	.article__aside {
		position: sticky;
		top: calc(var(--header) + 1.5rem);
	}
}

/* Inside the grid the text column is the grid's, not the page's. */
.article .article__body > * {
	width: auto;
	max-width: 720px;
	margin-inline: 0;
}

.article .article__body > :first-child {
	margin-top: 0;
}

.article .article__body > :last-child {
	margin-bottom: 0;
}

.article__body {
	font-size: 1.2rem;
	line-height: 1.7;
}

.article__body > p {
	max-width: 720px;
}

.article .article__body > .article__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 2.2rem;
	border-radius: var(--radius);
	object-fit: cover;
}

.article__body > .article__image + p,
.article__body > p:first-child {
	font-size: 1.35rem;
	line-height: 1.6;
}

.aside-card {
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}

.aside-card + .aside-card {
	margin-top: 1rem;
}

.aside-card--call {
	border-color: transparent;
	background: var(--mist);
}

.aside-card__title {
	font-size: 1.2rem;
}

.aside-card__text {
	margin-top: 0.5rem;
	color: var(--teal);
	font-size: 1.05rem;
}

.aside-card .btn {
	width: 100%;
}

.aside-card--call > .btn {
	margin-top: 1.1rem;
}

.aside-card__apps {
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.aside-card__apps .btn {
	padding-inline: 0.6rem;
}

.aside-card__place {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-size: 1.05rem;
}

.aside-card__place .icon {
	color: var(--teal);
}

/* The term card brings its own frame; here the aside card is the frame. */
.aside-card--course .term {
	width: auto;
	margin-top: 0.8rem;
	padding: 0;
}

.aside-card--course .term__date {
	font-size: 1.35rem;
}

.aside-posts {
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
}

.aside-posts li {
	border-top: 1px solid var(--line);
}

.aside-posts a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 0;
	color: var(--deep);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}

/* A small cover beside the title of an article; an article without one keeps the place. */
.aside-posts img,
.aside-posts__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	background: var(--mist);
	object-fit: cover;
}

.aside-posts li:last-child a {
	padding-bottom: 0;
}

.aside-posts a:hover {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pagination {
	margin-top: 3rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
}

.pagination .current {
	border-color: var(--deep);
	background: var(--deep);
	color: var(--mist);
}

.pagination .dots {
	border: 0;
}

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

.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.2rem;
	background: var(--deep);
	color: var(--mist);
	font-size: 1rem;
}

/* Two soft lights behind the footer – the warmth between the palms in the illustrations –
   drifting and breathing slowly. */
.site-footer::before,
.site-footer::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.site-footer::before {
	top: -32vmax;
	left: -14vmax;
	width: 62vmax;
	height: 62vmax;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--base) 26%, transparent), transparent);
}

.site-footer::after {
	right: -12vmax;
	bottom: -30vmax;
	width: 52vmax;
	height: 52vmax;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--apricot) 20%, transparent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
	body:not(.no-reveal) .site-footer::before {
		animation: glow 26s ease-in-out infinite alternate;
	}

	body:not(.no-reveal) .site-footer::after {
		animation: glow 34s ease-in-out -8s infinite alternate-reverse;
	}
}

@keyframes glow {
	from {
		opacity: 0.55;
		transform: translate3d(0, 0, 0) scale(0.9);
	}

	to {
		opacity: 1;
		transform: translate3d(14vmax, 5vmax, 0) scale(1.15);
	}
}

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

.site-footer a:hover {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer__top {
	display: grid;
	gap: 2.5rem var(--gap);
}

.site-footer__brand {
	color: var(--white);
}

.site-footer__disclaimer {
	max-width: none;
	margin-top: 3rem;
	color: var(--base);
}

.site-footer__disclaimer + .site-footer__bottom {
	margin-top: 1rem;
}

.site-footer__contact {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	font-style: normal;
}

.site-footer__contact a {
	color: var(--white);
	font-weight: 500;
}

.site-footer__title {
	margin-bottom: 1rem;
	font: 600 0.88rem/1.2 var(--sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--base);
}

.footer-menu {
	flex-direction: column;
	gap: 0.4rem;
}

.social {
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	margin-top: 1.4rem;
}

.footer-menu a,
.social a {
	color: var(--white);
	font-weight: 500;
}

.social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.social .icon {
	color: var(--base);
}

.legal-menu {
	flex-wrap: wrap;
	gap: 0 1.5rem;
}

/* Rows a finger can hit: the gap between the links is part of the links themselves. */
.footer-menu {
	gap: 0;
}

.footer-menu a,
.legal-menu a,
.site-footer__credit a {
	display: inline-block;
	padding-block: 0.35rem;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 2rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-dark);
	font-size: 0.92rem;
	color: var(--base);
}

.site-footer__bottom p {
	max-width: none;
}

.site-footer__credit {
	margin-left: auto;
}

@media (min-width: 561px) {
	.site-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

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

/* Sticky contact bar on phones -------------------------------------------- */

.callbar {
	display: none;
}

@media (max-width: 900px) {
	.callbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		gap: 0.5rem;
		padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
		background: rgba(247, 242, 234, 0.92);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		box-shadow: 0 -1px 0 var(--line);
	}

	.nav-open .callbar {
		display: none;
	}

	.callbar .btn {
		padding: 0.8rem 0.5rem;
		white-space: nowrap;
	}

	.callbar--3 .btn {
		gap: 0.35rem;
		font-size: 0.9rem;
	}

	.site-footer {
		padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
	}

	.site-footer__credit {
		margin-left: 0;
	}
}

/* Cookie notice -------------------------------------------------------- */

.cookie {
	position: fixed;
	right: 1.25rem;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	z-index: 70;
	width: min(24rem, calc(100vw - 2.5rem));
	padding: 1.25rem 1.35rem 1.35rem;
	border-radius: var(--radius-sm);
	background: var(--deep);
	color: var(--mist);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}

.cookie__text {
	font-size: 0.95rem;
	line-height: 1.5;
}

.cookie__text a {
	color: var(--base);
	text-underline-offset: 0.2em;
}

.cookie__title {
	margin-bottom: 0.3rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--white);
}

/* Two buttons of the same size, so declining is as easy as accepting. */
.cookie__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-top: 1rem;
}

.cookie__actions .btn {
	padding: 0.7rem 0.8rem;
	font-size: 0.98rem;
}

.cookie .btn--ghost {
	border-color: rgba(214, 236, 236, 0.45);
	color: var(--mist);
}

.cookie .btn--ghost:hover {
	background: var(--mist);
	border-color: var(--mist);
	color: var(--deep);
}

@media (max-width: 900px) {
	/* Above the call bar, never under it. */
	.cookie {
		bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 560px) {
	.cookie {
		right: 0.75rem;
		width: calc(100vw - 1.5rem);
		padding: 1rem 1.1rem 1.1rem;
	}
}

.site-footer__cookies {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.site-footer__cookies:hover {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* WPML's own footer language switcher: the theme has its switcher in the header. */
.wpml-ls-statics-footer {
	display: none;
}

@media print {
	.site-header,
	.callbar,
	.map {
		display: none;
	}
}