/* ==========================================================================
   Armonia - design layer on top of theme.json
   Palette: cream #FDF9F4 / sand #F5EFE6 / taupe #D9CDC0 / moss #E9EDC9
            sage #5B6B5C / forest #2C3E2D / amber #BC6C25 / amber-deep #AD5F1E
   Type:    Syne (headings) / Onest (body)
   ========================================================================== */

:root {
	--armonia-radius: 6px;
	--armonia-radius-lg: 14px;
	--armonia-ring: 0 0 0 3px #FDF9F4, 0 0 0 6px #AD5F1E;
	--armonia-transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
	--armonia-header-h: 76px;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

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

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}


::selection {
	background: #E9EDC9;
	color: #2C3E2D;
}

/* --------------------------------------------------------------------------
   2. Focus. Visible on every interactive element, never removed.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid #AD5F1E;
	outline-offset: 3px;
	border-radius: 3px;
}

.wp-block-button__link:focus-visible,
.armonia-actionbar__btn:focus-visible {
	outline: 2px solid #2C3E2D;
	outline-offset: 3px;
}

/* Skip link, keyboard only. */
.skip-link.screen-reader-text:focus {
	background: #2C3E2D;
	color: #FDF9F4;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--armonia-radius) 0;
	z-index: 1000;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.armonia-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(253, 249, 244, 0.9);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid rgba(217, 205, 192, 0.6);
}

@supports not (backdrop-filter: blur(10px)) {
	.armonia-header { background: #FDF9F4; }
}

.armonia-header .wp-block-site-logo img {
	height: 34px;
	width: auto;
	border-radius: 0;
}

.armonia-header .wp-block-navigation {
	gap: clamp(1rem, 2vw, 2rem);
}

.armonia-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	/* theme.json underlines every link. The nav has its own amber bar, so the
	   browser underline would draw a second line under each item. */
	text-decoration: none;
}

.armonia-header .wp-block-navigation-item__content:hover,
.armonia-header .wp-block-navigation-item__content:focus {
	text-decoration: none;
}

/* Underline that grows from the left. Cheap, transform only, 60fps. */
.armonia-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #BC6C25;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--armonia-transition);
}

.armonia-header .wp-block-navigation-item__content:hover::after,
.armonia-header .wp-block-navigation-item__content:focus-visible::after,
.armonia-header .wp-block-navigation-item__content[aria-current="page"]::after,
.armonia-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.armonia-header .wp-block-navigation-item__content::after { transition: none; }
}

/* Mobile menu overlay readability. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #FDF9F4;
	padding-top: 4.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: Syne, "Trebuchet MS", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

/* Split hero. Wix used a flat cream band with a Syne headline; this keeps that
   colour and type and puts the studio photo alongside, which gives the page a
   subject above the fold without darkening any text. */
.armonia-herosplit {
	background: #FDF9F4;
	padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
}

.armonia-herosplit h1 {
	text-wrap: balance;
	max-width: 15ch;
	margin-block: 0.5rem 1.25rem;
}

.armonia-herosplit__lead {
	max-width: 44ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	color: #5B6B5C;
}

/* The studio photos are 2:3 portraits and the subject fills the frame, so
   nothing is cropped anywhere on the site. Height is controlled by narrowing
   the column instead. */
.armonia-herosplit__media img {
	border-radius: var(--armonia-radius-lg);
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.armonia-herosplit__media {
		max-width: 380px;
		margin-inline: auto;
	}
}

/* Reassurance row under the hero CTAs. Three short facts, no icons to load. */
.armonia-trust {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: #5B6B5C;
}

.armonia-trust li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.armonia-trust li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #BC6C25;
	flex: none;
}

.armonia-hero {
	position: relative;
	min-height: min(88svh, 780px);
}

.armonia-hero .wp-block-cover__image-background {
	object-position: center 28%;
}

.armonia-hero h1 {
	text-wrap: balance;
	max-width: 16ch;
}

.armonia-hero .armonia-hero__lead {
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}

/* The Wix hero put light text on a bright photo. Keep the look, fix the
   contrast with a gradient scrim instead of dimming the whole picture. */
.armonia-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(44, 62, 45, 0.15) 0%,
		rgba(44, 62, 45, 0.35) 40%,
		rgba(44, 62, 45, 0.78) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.armonia-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   5. Section rhythm
   -------------------------------------------------------------------------- */

.armonia-section {
	padding-block: var(--wp--preset--spacing--60);
}

.armonia-section--tight {
	padding-block: var(--wp--preset--spacing--50);
}

.armonia-eyebrow,
.is-style-armonia-eyebrow {
	font-family: Onest, sans-serif !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: #5B6B5C !important;
	margin-bottom: 0.75rem;
}

.is-style-armonia-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: #5B6B5C;
	max-width: 54ch;
}

/* --------------------------------------------------------------------------
   6. Service cards
   -------------------------------------------------------------------------- */

/* Core grid layout drives the columns; this only tunes the gap and
   guarantees equal-height cards when a card has less copy than its neighbour. */
.armonia-services {
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}

.armonia-services > .armonia-service-card {
	margin-block: 0;
}

.is-style-armonia-service-card,
.armonia-service-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: #FDF9F4;
	border: 1px solid #D9CDC0;
	border-radius: var(--armonia-radius-lg);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
	height: 100%;
	transition: transform var(--armonia-transition), box-shadow var(--armonia-transition), border-color var(--armonia-transition);
}

.is-style-armonia-service-card:hover,
.armonia-service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(44, 62, 45, 0.06), 0 18px 40px rgba(44, 62, 45, 0.12);
	border-color: #BC6C25;
}

@media (prefers-reduced-motion: reduce) {
	.is-style-armonia-service-card,
	.armonia-service-card {
		transition: none;
	}
	.is-style-armonia-service-card:hover,
	.armonia-service-card:hover {
		transform: none;
	}
}

.armonia-service-card h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
	text-wrap: balance;
}

.armonia-service-card h3 a {
	text-decoration: none;
	color: inherit;
}

/* Whole card is the click target, the heading link keeps the accessible name. */
.armonia-service-card {
	position: relative;
}

.armonia-service-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.armonia-service-card .wp-block-buttons {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: 0.5rem;
}

.armonia-service-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.85rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: #5B6B5C;
}

.armonia-service-card__duration {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.armonia-price,
.is-style-armonia-price {
	font-family: Syne, sans-serif;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: #2C3E2D;
	letter-spacing: -0.01em;
}

.armonia-price__was {
	font-family: Onest, sans-serif;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: #5B6B5C;
	text-decoration: line-through;
	margin-right: 0.4rem;
}

.armonia-badge {
	display: inline-block;
	background: #E9EDC9;
	color: #2C3E2D;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.3;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	align-self: flex-start;
}

.armonia-service-card__desc {
	margin: 0;
	color: #5B6B5C;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color var(--armonia-transition), border-color var(--armonia-transition), transform var(--armonia-transition);
	min-height: 48px; /* touch target */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link { transition: none; }
	.wp-block-button__link:active { transform: none; }
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
	border-color: currentColor;
}

/* Outline button sitting on the dark hero. */
.armonia-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #FDF9F4;
	border-color: rgba(253, 249, 244, 0.7);
	background: transparent;
}

.armonia-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.armonia-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: #FDF9F4;
	color: #2C3E2D;
	border-color: #FDF9F4;
}

.is-style-armonia-whatsapp > .wp-block-button__link {
	background: #FDF9F4;
	color: #2C3E2D;
	border-color: #D9CDC0;
}

.is-style-armonia-whatsapp > .wp-block-button__link:hover {
	background: #E9EDC9;
	color: #2C3E2D;
	border-color: #2C3E2D;
}

/* --------------------------------------------------------------------------
   8. Cards, media/text
   -------------------------------------------------------------------------- */

.is-style-armonia-card {
	background: #F5EFE6;
	border-radius: var(--armonia-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.wp-block-media-text {
	gap: clamp(1.5rem, 4vw, 4rem);
}

.wp-block-media-text .wp-block-media-text__media img {
	border-radius: var(--armonia-radius-lg);
}

.wp-block-media-text__content {
	padding-inline: 0 !important;
}

@media (max-width: 781px) {
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		padding-top: var(--wp--preset--spacing--30);
	}
}

/* --------------------------------------------------------------------------
   9. Marquee strip
   -------------------------------------------------------------------------- */

.armonia-marquee,
.is-style-armonia-marquee {
	background: #2C3E2D;
	color: #FDF9F4;
	overflow: hidden;
	padding-block: 1rem;
	position: relative;
}

.armonia-marquee__track {
	display: flex;
	width: max-content;
	gap: 2.5rem;
	white-space: nowrap;
	animation: armonia-marquee 34s linear infinite;
	font-family: Syne, sans-serif;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.armonia-marquee__track > span {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
}

.armonia-marquee__track > span::after {
	content: "\2022";
	color: #BC6C25;
}

@keyframes armonia-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Motion off: hold it still and let it wrap. A scrolling strip is a
   vestibular trigger and it carries no information the user needs. */
@media (prefers-reduced-motion: reduce) {
	.armonia-marquee__track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		white-space: normal;
		justify-content: center;
		row-gap: 0.5rem;
	}
}

/* --------------------------------------------------------------------------
   10. Contact block
   -------------------------------------------------------------------------- */

.armonia-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.armonia-contact__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1rem;
}

.armonia-contact__list li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	line-height: 1.5;
}

.armonia-contact__label {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #5B6B5C;
	font-weight: 600;
	margin-bottom: 0.15rem;
}

.armonia-contact__list a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   11. Forms (Fluent Forms + core)
   -------------------------------------------------------------------------- */

.fluentform .ff-el-input--label label,
.armonia-form label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5B6B5C;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform textarea,
.fluentform select,
.armonia-form input,
.armonia-form textarea {
	width: 100%;
	background: #FDF9F4;
	border: 1px solid #D9CDC0;
	border-radius: var(--armonia-radius);
	padding: 0.85rem 1rem;
	font-family: Onest, sans-serif;
	font-size: 1rem; /* 16px stops iOS zooming the page on focus */
	color: #2C3E2D;
	min-height: 48px;
	transition: border-color var(--armonia-transition), box-shadow var(--armonia-transition);
}

.fluentform input:focus,
.fluentform textarea:focus,
.armonia-form input:focus,
.armonia-form textarea:focus {
	border-color: #2C3E2D;
	box-shadow: 0 0 0 3px rgba(188, 108, 37, 0.18);
	outline: none;
}

.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea {
	border-color: #AD5F1E;
}

.fluentform .error,
.fluentform .text-danger {
	color: #AD5F1E;
	font-size: var(--wp--preset--font-size--x-small);
}

.fluentform .ff-btn-submit {
	background: #2C3E2D !important;
	color: #FDF9F4 !important;
	border: 1px solid #2C3E2D !important;
	border-radius: 999px !important;
	padding: 0.95rem 2rem !important;
	font-family: Onest, sans-serif !important;
	font-weight: 600 !important;
	min-height: 48px;
	transition: background-color var(--armonia-transition);
}

.fluentform .ff-btn-submit:hover {
	background: #AD5F1E !important;
	border-color: #AD5F1E !important;
}

.ff-el-group {
	margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   12. Booking block shell
   -------------------------------------------------------------------------- */

.armonia-booking {
	background: #FDF9F4;
	border: 1px solid #D9CDC0;
	border-radius: var(--armonia-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.armonia-footer {
	background: #2C3E2D;
	color: #FDF9F4;
}

.armonia-footer :where(h1, h2, h3, h4, h5, h6) {
	color: #FDF9F4;
}

.armonia-footer a {
	color: #FDF9F4;
	text-decoration-color: rgba(253, 249, 244, 0.45);
	text-underline-offset: 3px;
}

.armonia-footer a:hover {
	color: #E9EDC9;
	text-decoration-color: currentColor;
}

.armonia-footer a:focus-visible {
	outline-color: #E9EDC9;
}

.armonia-footer .wp-block-social-links .wp-social-link {
	background: rgba(253, 249, 244, 0.1);
	transition: background-color var(--armonia-transition);
}

.armonia-footer .wp-block-social-links .wp-social-link:hover {
	background: rgba(253, 249, 244, 0.24);
}

.armonia-footer__legal {
	border-top: 1px solid rgba(253, 249, 244, 0.16);
	padding-top: 1.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: rgba(253, 249, 244, 0.75);
}

/* --------------------------------------------------------------------------
   14. Sticky mobile action bar
   -------------------------------------------------------------------------- */

.armonia-actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
	background: rgba(253, 249, 244, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid #D9CDC0;
}

@media (max-width: 781px) {
	.armonia-actionbar { display: flex; }
	body { padding-bottom: 4.75rem; }
}

@media print {
	.armonia-actionbar { display: none !important; }
}

.armonia-actionbar__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 48px;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	font-family: Onest, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
}

.armonia-actionbar__btn--primary {
	background: #2C3E2D;
	color: #FDF9F4;
}

.armonia-actionbar__btn--wa {
	background: #FDF9F4;
	color: #2C3E2D;
	border-color: #2C3E2D;
}

.armonia-actionbar__ico {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   15. Gallery
   -------------------------------------------------------------------------- */

/* Core's gallery crops every tile to a common height. These are studio
   photographs in three different orientations, so the grid is rebuilt as CSS
   columns: each photo keeps its own shape and is shown whole. */
.wp-block-gallery.has-nested-images {
	display: block;
	column-count: 2;
	column-gap: var(--wp--preset--spacing--30);
}

@media (min-width: 900px) {
	.wp-block-gallery.has-nested-images.columns-3 {
		column-count: 3;
	}
}

@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images {
		column-count: 1;
	}
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	break-inside: avoid;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto !important;
	object-fit: fill;
	border-radius: var(--armonia-radius-lg);
	display: block;
}

/* --------------------------------------------------------------------------
   16. Breadcrumb
   -------------------------------------------------------------------------- */

.armonia-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	color: #5B6B5C;
	margin-bottom: 1rem;
}

.armonia-breadcrumb a {
	color: #5B6B5C;
	text-decoration: none;
}

.armonia-breadcrumb a:hover {
	color: #AD5F1E;
	text-decoration: underline;
}

.armonia-breadcrumb span[aria-hidden="true"] {
	padding-inline: 0.4rem;
	color: #D9CDC0;
}

/* --------------------------------------------------------------------------
   17. Booking block states
   -------------------------------------------------------------------------- */

.armonia-booking--manual {
	min-height: 0;
	background: #FEFAE0;
	border-color: #D9CDC0;
	text-align: left;
}

.armonia-booking--manual h3 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--large);
}

.armonia-booking--manual .wp-block-buttons {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.armonia-booking__note {
	margin-top: 1rem;
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
	color: #5B6B5C;
}

/* --------------------------------------------------------------------------
   18. Service page header
   -------------------------------------------------------------------------- */

.armonia-servicehead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 1rem 0 1.25rem;
	border-top: 1px solid #D9CDC0;
	border-bottom: 1px solid #D9CDC0;
	margin-block: 1.5rem 2rem;
}

.armonia-servicehead__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.armonia-servicehead__k {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: #5B6B5C;
}

.armonia-servicehead__v {
	font-family: Syne, sans-serif;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: #2C3E2D;
	line-height: 1.1;
}

.armonia-servicehead__v s {
	font-family: Onest, sans-serif;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	color: #5B6B5C;
	margin-right: 0.4rem;
}

/* Numbered "what happens" steps. */
.armonia-steps {
	list-style: none;
	counter-reset: armonia-step;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.25rem;
}

.armonia-steps li {
	counter-increment: armonia-step;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: 1rem;
	align-items: start;
}

.armonia-steps li::before {
	content: counter(armonia-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #E9EDC9;
	color: #2C3E2D;
	font-family: Syne, sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
}

/* Closing call to action band. */
.armonia-cta {
	background: #2C3E2D;
	color: #FDF9F4;
	border-radius: var(--armonia-radius-lg);
	padding: clamp(1.75rem, 1rem + 3vw, 3rem);
	text-align: center;
}

.armonia-cta :where(h2, h3) {
	color: #FDF9F4;
	margin-top: 0;
}

.armonia-cta p {
	color: rgba(253, 249, 244, 0.82);
	max-width: 52ch;
	margin-inline: auto;
}

.armonia-cta .wp-block-buttons {
	justify-content: center;
	margin-top: 1.5rem;
}

.armonia-cta .wp-block-button.is-style-armonia-whatsapp > .wp-block-button__link {
	background: transparent;
	color: #FDF9F4;
	border-color: rgba(253, 249, 244, 0.7);
}

.armonia-cta .wp-block-button.is-style-armonia-whatsapp > .wp-block-button__link:hover {
	background: #FDF9F4;
	color: #2C3E2D;
	border-color: #FDF9F4;
}

/* Screen reader only text used inside repeated buttons. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* --------------------------------------------------------------------------
   19. Fixes found in review
   -------------------------------------------------------------------------- */

/* Long email addresses and URLs were pushing the page 14px wider than the
   viewport on phones. Break them instead of scrolling the whole document. */
:where(p, li, dd, dt, td, h1, h2, h3, h4) {
	overflow-wrap: break-word;
}

.entry-content a,
.armonia-contact__list a {
	overflow-wrap: anywhere;
}

/* Belt and braces: nothing horizontal escapes the page. clip, not hidden,
   so position:sticky on the header keeps working. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Header: between the tablet breakpoint and roughly a laptop the five nav
   items plus the CTA crowd each other and the button wraps to two lines.
   Collapse to the overlay menu earlier and stop the CTA wrapping. */
.armonia-header__cta .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 1080px) {
	.armonia-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.armonia-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Below the tablet breakpoint the sticky action bar already carries the CTA. */
@media (max-width: 600px) {
	.armonia-header__cta {
		display: none;
	}
}

/* Fluent Forms submit matches the site primary button. */
.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit.ff_btn_style {
	background: #AD5F1E !important;
	border-color: #AD5F1E !important;
	color: #FDF9F4 !important;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
	background: #2C3E2D !important;
	border-color: #2C3E2D !important;
}

/* The marquee track is wider than the screen by design. Make sure the clip
   holds even if a plugin resets overflow on group blocks. */
.armonia-marquee {
	overflow-x: clip;
}

/* Service card headings should not sit on two lines while the card next to
   them sits on one; balance keeps the grid tidy. */
.armonia-service-card h3 {
	text-wrap: balance;
}

/* "Good if" list reuses the numbered step layout but should read as bullets. */
.armonia-steps li:not(:has(strong))::before {
	content: "";
	background: #BC6C25;
	width: 8px;
	height: 8px;
	margin-top: 0.55rem;
	margin-left: 0.7rem;
}

ul.armonia-steps li {
	grid-template-columns: 1.5rem 1fr;
	gap: 0.5rem;
}

ul.armonia-steps li::before {
	width: 8px;
	height: 8px;
	background: #BC6C25;
	content: "";
	margin-top: 0.6rem;
	margin-left: 0.4rem;
}

/* --------------------------------------------------------------------------
   20. Media-text sizing
   -------------------------------------------------------------------------- */

/* The studio photos are 2:3 portraits. At full height they leave a column of
   dead space beside short copy and stretch the page, so crop them to a
   consistent 4:5 and cap the height. */
.armonia-section .wp-block-media-text__media img,
.entry-content .wp-block-media-text__media img {
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.armonia-section .wp-block-media-text__media,
	.entry-content .wp-block-media-text__media {
		max-width: 340px;
		margin-inline: auto;
	}
}

/* Page head. Breadcrumb or eyebrow, title, one line of intent. The band ends
   where the content starts, so there is no empty strip between them. */
.armonia-pagehead h1 {
	margin: 0;
	text-wrap: balance;
}

.armonia-pagehead > .armonia-breadcrumb,
.armonia-pagehead > .armonia-eyebrow {
	margin: 0 0 0.85rem;
}

.armonia-pagehead > .armonia-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
}

.armonia-pagehead__lead {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: #5B6B5C;
	max-width: var(--armonia-measure-tight);
}



/* Service page photo. Full frame, no crop; it sits beside the opening copy so
   a 2:3 portrait fills the row instead of leaving the rail half empty. */
.armonia-servicefig .wp-block-media-text__media img {
	width: 100%;
	height: auto;
	border-radius: var(--armonia-radius-lg);
}

@media (max-width: 781px) {
	.armonia-servicefig .wp-block-media-text__media {
		max-width: 320px;
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
   21. Accessibility polish
   -------------------------------------------------------------------------- */

/* Footer link rows sit close together; give each a taller hit area so a
   thumb does not have to be precise. WCAG 2.2 target size. */
.armonia-footer .wp-block-list li {
	padding-block: 0.2rem;
}

.armonia-footer .wp-block-list a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* Visually hidden section heading used to keep the heading order intact. */
.armonia-sr-heading {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   22. Mobile header and CTA tidy-up
   -------------------------------------------------------------------------- */

/* Core prints its layout styles after this file, so the header CTA needs the
   extra weight to stay hidden on phones where the sticky bar already has it. */
@media (max-width: 600px) {
	.armonia-header .wp-block-buttons.armonia-header__cta,
	.armonia-header .armonia-header__cta {
		display: none !important;
	}
}

/* Full width hero buttons on phones: one tap target per row, equal size. */
@media (max-width: 600px) {
	.armonia-herosplit .wp-block-buttons {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}
	.armonia-herosplit .wp-block-button,
	.armonia-herosplit .wp-block-button__link {
		width: 100%;
	}
	.armonia-cta .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.armonia-cta .wp-block-button,
	.armonia-cta .wp-block-button__link {
		width: 100%;
	}
}

/* Tighten the gap the hero photo leaves under the trust row on phones. */
@media (max-width: 781px) {
	.armonia-herosplit .wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}
	.armonia-trust {
		margin-top: 1.25rem;
	}
}

/* Fluent Forms help tooltip icon ships bright blue; bring it into the palette. */
.fluentform .ff-el-tooltip,
.fluentform .ff-el-tooltip svg,
.fluentform .ff-el-tooltip i {
	color: #5B6B5C !important;
	fill: #5B6B5C !important;
}

.fluentform .ff-el-tooltip svg circle,
.fluentform .ff-el-tooltip svg path {
	fill: #5B6B5C !important;
}

/* Keep the header contents clear of the screen edge on small phones. */
@media (max-width: 480px) {
	.armonia-header > .wp-block-group {
		padding-inline: 0.25rem;
	}
}


/* --------------------------------------------------------------------------
   23. One content rail
   --------------------------------------------------------------------------
   Everything on the page now shares a single left edge: the logo, the nav,
   page titles, section headings and body copy all start at the same x. The
   rail is 1240px inside the root padding, so it matches the service card grid
   that was already alignwide.

   Because the rail is wide, the *measure* is capped per element instead of by
   narrowing the container. Long lines are the most common readability failure
   on a site like this, and centring a narrow column inside a wide page is what
   produced the mismatched left edges in the first place.
   -------------------------------------------------------------------------- */

:root {
	--armonia-rail: 1240px;
	--armonia-gutter: clamp(1.25rem, 5vw, 3rem);
	--armonia-measure: 66ch;
	--armonia-measure-tight: 54ch;
	--armonia-measure-heading: 22ch;
}

/* The rail itself. A section is full bleed for its background but its content
   is inset to whichever is larger: the page gutter, or half the space left over
   after the 1240px rail. That single rule makes the logo, the page title, the
   section headings, the card grid and the footer all start on the same x at
   every width, without a separate breakpoint for each. */
.armonia-section,
.armonia-section--tight,
.armonia-pagehead,
.armonia-header,
.entry-content,
.armonia-herosplit,
.armonia-footer {
	padding-inline: max(var(--armonia-gutter), (100% - var(--armonia-rail)) / 2) !important;
}

/* The page template wraps post-content in its own group. That group carries
   the vertical rhythm only; the rail inset comes from .entry-content inside it,
   otherwise the two nest and the gutter doubles. */
/* The head band now carries the intro, so the body starts on a normal beat
   rather than after a screenful of nothing. */
.armonia-pagebody {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
	padding-inline: 0;
}

/* Inside a rail-inset container the row is already on the rail, so alignwide
   must not add its own centring on top. */
.armonia-header > .wp-block-group,
.armonia-header > .wp-block-group.alignwide,
.armonia-footer > .wp-block-columns.alignwide,
.armonia-footer > .wp-block-group.alignwide {
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0 !important;
}

/* WordPress's constrained layout ships
     .is-layout-constrained > :where(...) { margin-left: auto !important; margin-right: auto !important; }
   so the moment an element gets a max-width it centres itself. That is exactly
   what put the headings and body copy on a different left edge from the logo
   and the card grid. These selectors carry one more class than core's, so the
   start edge is pinned and the measure cap still works. */
.armonia-section > p,
.armonia-section > ul,
.armonia-section > ol,
.armonia-section > h1,
.armonia-section > h2,
.armonia-section > h3,
.armonia-section > h4,
.armonia-section > h5,
.armonia-section > h6,
.armonia-section > blockquote,
.armonia-section > figure,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > blockquote,
.entry-content > figure,
.armonia-pagehead > h1,
.armonia-pagehead > .armonia-breadcrumb,
.armonia-pagehead > .armonia-eyebrow,
.armonia-pagehead > .armonia-pagehead__lead {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Body copy sitting directly on the rail. Anything inside a card, column or
   media-text is laid out by its own container and is left alone. */
.armonia-section > p,
.armonia-section > ul,
.armonia-section > ol,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > .wp-block-list {
	max-width: var(--armonia-measure);
}

/* Headings on the rail. Balanced wrapping stops a lone trailing word. */
.armonia-section > h2,
.armonia-section > h3,
.armonia-section > h4,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.armonia-pagehead > h1 {
	max-width: var(--armonia-measure-heading);
	text-wrap: balance;
}

.armonia-section > .is-style-armonia-lead,
.entry-content > .is-style-armonia-lead {
	max-width: var(--armonia-measure-tight);
}

/* The eyebrow is a label, not a line of prose; it never needs a cap. */
.armonia-eyebrow {
	max-width: none;
}

/* Blocks that are meant to span the rail must not inherit a measure. The
   service photo is not one of them: it keeps its own width cap. */
.armonia-services,
.armonia-cta,
.wp-block-media-text,
.wp-block-columns,
.wp-block-gallery,
.entry-content > .wp-block-buttons {
	max-width: none;
}



/* Buttons and the booking card sit on the rail's left edge, not centred. */
.armonia-section > .wp-block-buttons,
.entry-content > .wp-block-buttons,
.entry-content > .armonia-booking,
.armonia-section > .armonia-booking {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Inside the dark call to action the text is deliberately centred, so the
   rail pin is reversed for its children. */
.armonia-cta > h2,
.armonia-cta > h3,
.armonia-cta > p,
.armonia-cta > .wp-block-buttons {
	margin-left: auto !important;
	margin-right: auto !important;
}

.armonia-cta > h2,
.armonia-cta > h3 {
	max-width: 24ch;
}

/* --------------------------------------------------------------------------
   24. Header alignment
   -------------------------------------------------------------------------- */

/* The header row is alignwide, so it lands on the same 1240px rail as the
   page content. Do not cap it further here or the rail breaks. */

.armonia-header .armonia-logo {
	margin: 0;
	padding: 0;
	flex: none;
	line-height: 0;
}

.armonia-header .armonia-logo img {
	display: block;
	/* The block editor writes an inline width on a resized image, so this needs
	   the weight to win. Keeps the wordmark legible without crowding the menu
	   button on a narrow phone. */
	width: clamp(136px, 34vw, 188px) !important;
	height: auto;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   25. Setmore booking widget
   -------------------------------------------------------------------------- */

.armonia-booking--widget {
	background: #FEFAE0;
	border: 1px solid #D9CDC0;
	border-radius: var(--armonia-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	min-height: 0;
	max-width: 640px;
}

.armonia-booking--widget h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--large);
	max-width: 20ch;
}

.armonia-booking--widget > p {
	max-width: 48ch;
	margin-top: 0;
}

/* Setmore ships the button with black inline styles. Override them so the
   widget matches every other primary button on the site. */
.armonia-booknow,
button#Anywhere_button_iframe.anywhere-book-now-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.5rem;
	min-height: 52px;
	padding: 0.95rem 2.25rem !important;
	background-color: #AD5F1E !important;
	color: #FDF9F4 !important;
	border: 1px solid #AD5F1E !important;
	border-radius: 999px !important;
	font-family: Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--armonia-transition), border-color var(--armonia-transition);
}

.armonia-booknow:hover,
button#Anywhere_button_iframe.anywhere-book-now-button:hover {
	background-color: #2C3E2D !important;
	border-color: #2C3E2D !important;
}

.armonia-booknow:focus-visible,
button#Anywhere_button_iframe.anywhere-book-now-button:focus-visible {
	outline: 2px solid #2C3E2D;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.armonia-booknow { transition: none; }
}

@media (max-width: 600px) {
	.armonia-booknow,
	button#Anywhere_button_iframe.anywhere-book-now-button {
		width: 100%;
	}
}


/* --------------------------------------------------------------------------
   26. Booking dialog, step one
   --------------------------------------------------------------------------
   Native <dialog>, so the focus trap, the inert background, Escape to close
   and the top layer all come from the platform. Only the look is set here.
   -------------------------------------------------------------------------- */

/* The theme reset does not reach these custom elements, and a content-box
   button with width:100% overflows its panel by exactly its own padding. */
.armonia-modal,
.armonia-modal *,
.armonia-btn-secondary {
	box-sizing: border-box;
}

.armonia-modal {
	width: min(560px, calc(100vw - 2rem));
	max-width: none;
	max-height: min(88svh, 780px);
	padding: 0;
	border: 0;
	border-radius: var(--armonia-radius-lg);
	background: #FDF9F4;
	color: #2C3E2D;
	box-shadow: 0 4px 12px rgba(44, 62, 45, 0.12), 0 32px 64px rgba(44, 62, 45, 0.24);
	overflow: visible;
}

.armonia-modal::backdrop {
	background: rgba(44, 62, 45, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.armonia-modal[open] {
	animation: armonia-modal-in 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

.armonia-modal[open]::backdrop {
	animation: armonia-fade-in 220ms ease-out;
}

@keyframes armonia-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@keyframes armonia-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.armonia-modal[open],
	.armonia-modal[open]::backdrop {
		animation: none;
	}
}

.armonia-modal__panel {
	position: relative;
	outline: none;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
	border-radius: inherit;
}

.armonia-modal h2 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	max-width: 18ch;
}

.armonia-modal .armonia-eyebrow {
	margin: 0 0 0.35rem;
}

.armonia-modal__lead {
	margin: 0;
	color: #5B6B5C;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	max-width: 46ch;
}

/* Close control. 44px box so it is a comfortable target without looking heavy. */
.armonia-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: #5B6B5C;
	cursor: pointer;
	transition: background-color var(--armonia-transition), color var(--armonia-transition);
}

.armonia-modal__close:hover {
	background: #F5EFE6;
	color: #2C3E2D;
}

.armonia-modal__close:focus-visible {
	outline: 2px solid #AD5F1E;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.armonia-modal__close { transition: none; }
}

/* --- Primary action --- */

.armonia-modal__cta {
	margin-top: 1.5rem;
}

.armonia-modal__primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 1rem 2rem;
	border: 1px solid #AD5F1E;
	border-radius: 999px;
	background: #AD5F1E;
	color: #FDF9F4;
	font-family: Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--armonia-transition), border-color var(--armonia-transition);
}

.armonia-modal__primary:hover {
	background: #2C3E2D;
	border-color: #2C3E2D;
	color: #FDF9F4;
}

/* Focus adds a ring, it does not restyle the button. A pressed-looking primary
   the moment the dialog opens reads as "already done". */
.armonia-modal__primary:focus-visible {
	outline: 2px solid #2C3E2D;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.armonia-modal__primary { transition: none; }
}

/* --- Secondary row --- */

/* Label on its own line, the two secondary actions beneath it. Keeping the
   sentence inline pushed the phone button onto a second row on its own, which
   read as a mistake rather than a choice. */
.armonia-modal__altlabel {
	margin: 1.25rem 0 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	color: #5B6B5C;
}

.armonia-modal__alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.65rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: #5B6B5C;
}

.armonia-modal__alt .armonia-btn-secondary {
	flex: 1 1 auto;
}

.armonia-modal__or {
	color: #5B6B5C;
}

.armonia-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	border: 1px solid #D9CDC0;
	border-radius: 999px;
	background: #FDF9F4;
	color: #2C3E2D;
	font-family: Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--armonia-transition), border-color var(--armonia-transition);
}

.armonia-btn-secondary:hover {
	background: #E9EDC9;
	border-color: #2C3E2D;
	color: #2C3E2D;
	text-decoration: none;
}

.armonia-btn-secondary:focus-visible {
	outline: 2px solid #AD5F1E;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.armonia-btn-secondary { transition: none; }
}

/* --- Before you book --- */

.armonia-modal__notes {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid #D9CDC0;
}

.armonia-modal__notes h3 {
	margin: 0 0 0.85rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-family: Onest, sans-serif;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5B6B5C;
}

.armonia-modal__notes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.armonia-modal__notes li {
	display: grid;
	grid-template-columns: 1rem 1fr;
	gap: 0.65rem;
	align-items: start;
}

.armonia-modal__notes li::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: 0.55rem;
	margin-left: 0.15rem;
	border-radius: 50%;
	background: #BC6C25;
}

.armonia-modal__talk {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: #5B6B5C;
}

.armonia-modal__talk a {
	color: #2C3E2D;
	text-underline-offset: 3px;
}

.armonia-modal__talk a:hover {
	color: #AD5F1E;
}

/* The Setmore trigger is script plumbing, never seen or tabbed to. */
.armonia-setmore-trigger {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	pointer-events: none;
}

/* Inline booking card, for the shortcode if it is ever placed on a page. */
.armonia-booking--inline {
	background: #FEFAE0;
	max-width: 640px;
}

.armonia-booking--inline h3 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--large);
}

.armonia-booking--inline .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

@media (max-width: 480px) {
	.armonia-modal {
		width: 100%;
		max-width: 100%;
		max-height: 92svh;
		margin: auto auto 0;
		border-radius: var(--armonia-radius-lg) var(--armonia-radius-lg) 0 0;
	}
	.armonia-modal__alt {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.armonia-btn-secondary {
		width: 100%;
	}
}

/* ==========================================================================
   27. Motion
   --------------------------------------------------------------------------
   The whole layer is opt-in. Reveal styles only apply under .armonia-motion,
   which the script adds to <html> after it has checked the reduced-motion
   preference. If the script never runs, or the visitor asks for less motion,
   the page is simply there: no hidden content, nothing to teleport.

   Only opacity and transform are animated, so every reveal stays on the
   compositor and off the main thread.
   ========================================================================== */

:root {
	--armonia-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--armonia-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--armonia-reveal-time: 640ms;
	--armonia-step: 70ms;
}

/* --- Scroll reveals --- */

.armonia-motion .armonia-reveal {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition:
		opacity var(--armonia-reveal-time) var(--armonia-ease-out),
		transform var(--armonia-reveal-time) var(--armonia-ease-out);
	transition-delay: calc(var(--armonia-i, 0) * var(--armonia-step));
}

.armonia-motion .armonia-reveal--left {
	transform: translate3d(-24px, 0, 0);
}

.armonia-motion .armonia-reveal--right {
	transform: translate3d(24px, 0, 0);
}

.armonia-motion .armonia-reveal--scale {
	transform: scale(1.03);
	transition-duration: 900ms;
}

.armonia-motion .armonia-reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* Photo sections stack on phones, so the sideways entrance becomes a rise. */
@media (max-width: 781px) {
	.armonia-motion .armonia-reveal--left,
	.armonia-motion .armonia-reveal--right {
		transform: translate3d(0, 20px, 0);
	}
}

/* --- Hero, on load rather than on scroll --- */

.armonia-motion .armonia-herosplit .armonia-eyebrow,
.armonia-motion .armonia-herosplit h1,
.armonia-motion .armonia-herosplit__lead,
.armonia-motion .armonia-herosplit .wp-block-buttons,
.armonia-motion .armonia-herosplit .armonia-trust,
.armonia-motion .armonia-herosplit__media {
	animation: armonia-rise 800ms var(--armonia-ease-out) both;
}

.armonia-motion .armonia-herosplit .armonia-eyebrow { animation-delay: 60ms; }
.armonia-motion .armonia-herosplit h1 { animation-delay: 120ms; }
.armonia-motion .armonia-herosplit__lead { animation-delay: 200ms; }
.armonia-motion .armonia-herosplit .wp-block-buttons { animation-delay: 280ms; }
.armonia-motion .armonia-herosplit .armonia-trust { animation-delay: 350ms; }

.armonia-motion .armonia-herosplit__media {
	animation-name: armonia-hero-media;
	animation-duration: 1100ms;
	animation-delay: 100ms;
}

@keyframes armonia-rise {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes armonia-hero-media {
	from { opacity: 0; transform: translate3d(0, 24px, 0) scale(1.02); }
	to   { opacity: 1; transform: none; }
}

/* --- Page transitions --- */

/* Cross-document view transitions. Chrome and Edge run this natively; every
   other browser ignores the rule and navigates as normal, which is a perfectly
   good fallback rather than a broken one. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	/* The sticky header keeps its own name so it is treated as one continuous
	   element across the navigation instead of being cross-faded with the page. */
	.armonia-header {
		view-transition-name: armonia-header;
	}

	.armonia-actionbar {
		view-transition-name: armonia-actionbar;
	}

	::view-transition-old(root) {
		animation: armonia-vt-out 180ms var(--armonia-ease) both;
	}

	::view-transition-new(root) {
		animation: armonia-vt-in 420ms var(--armonia-ease-out) both;
	}

	@keyframes armonia-vt-out {
		to { opacity: 0; transform: translate3d(0, -6px, 0); }
	}

	@keyframes armonia-vt-in {
		from { opacity: 0; transform: translate3d(0, 12px, 0); }
	}
}

/* --- Header, once it has left the top --- */

.armonia-header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.armonia-header {
	transition:
		padding var(--armonia-transition),
		box-shadow var(--armonia-transition),
		border-color var(--armonia-transition);
}

.armonia-header.is-stuck {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	border-bottom-color: rgba(217, 205, 192, 0.9);
	box-shadow: 0 1px 2px rgba(44, 62, 45, 0.04), 0 10px 30px rgba(44, 62, 45, 0.07);
}

.armonia-header .armonia-logo img {
	transition: width var(--armonia-transition);
}

.armonia-header.is-stuck .armonia-logo img {
	width: clamp(120px, 30vw, 156px) !important;
}

@media (prefers-reduced-motion: reduce) {
	.armonia-header,
	.armonia-header .armonia-logo img {
		transition: none;
	}
}

/* --- Accent details --- */

/* The eyebrow gains a short amber rule that draws itself in. Small, but it is
   the thing that makes each section feel deliberately opened. */
.armonia-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.armonia-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	flex: none;
	background: #BC6C25;
	transform-origin: left;
}

.armonia-motion .armonia-eyebrow.armonia-reveal::before {
	transform: scaleX(0);
	transition: transform 700ms var(--armonia-ease-out) 180ms;
}

.armonia-motion .armonia-eyebrow.armonia-reveal.is-inview::before {
	transform: scaleX(1);
}

/* Service card: the price lifts a hair and the border warms on hover. The card
   already rises; this gives the eye a second, smaller thing to land on. */
.armonia-service-card .armonia-price {
	display: inline-block;
	transition: transform var(--armonia-transition);
}

.armonia-service-card:hover .armonia-price {
	transform: translateY(-2px);
}

/* Numbered steps pop in with a touch of overshoot, one after another. */
.armonia-motion .armonia-steps > li.armonia-reveal::before {
	transform: scale(0.4);
	opacity: 0;
	transition:
		transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--armonia-i, 0) * var(--armonia-step) + 120ms),
		opacity 320ms ease calc(var(--armonia-i, 0) * var(--armonia-step) + 120ms);
}

.armonia-motion .armonia-steps > li.armonia-reveal.is-inview::before {
	transform: scale(1);
	opacity: 1;
}

/* Gallery: a slow settle rather than a jump, and a gentle lift on hover. */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	transition: transform 600ms var(--armonia-ease-out);
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	overflow: hidden;
	border-radius: var(--armonia-radius-lg);
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.has-nested-images figure.wp-block-image img { transition: none; }
	.wp-block-gallery.has-nested-images figure.wp-block-image:hover img { transform: none; }
	.armonia-service-card:hover .armonia-price { transform: none; }
}

/* Buttons get a slight press. Cheap, and it makes a tap feel answered. */
.wp-block-button__link,
.armonia-modal__primary,
.armonia-btn-secondary,
.armonia-actionbar__btn {
	transition:
		background-color var(--armonia-transition),
		border-color var(--armonia-transition),
		color var(--armonia-transition),
		transform 120ms var(--armonia-ease);
}

.wp-block-button__link:active,
.armonia-modal__primary:active,
.armonia-btn-secondary:active,
.armonia-actionbar__btn:active {
	transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:active,
	.armonia-modal__primary:active,
	.armonia-btn-secondary:active,
	.armonia-actionbar__btn:active {
		transform: none;
	}
}

/* --- Marquee controls --- */

/* WCAG 2.2.2: motion that starts on its own and runs past five seconds needs a
   way to stop it. Hover and focus pause it, and the button is the real control. */
.armonia-marquee {
	position: relative;
}

.armonia-marquee:hover .armonia-marquee__track,
.armonia-marquee:focus-within .armonia-marquee__track,
.armonia-marquee.is-paused .armonia-marquee__track {
	animation-play-state: paused;
}

.armonia-marquee__toggle {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0.3rem 0.85rem;
	border: 1px solid rgba(253, 249, 244, 0.35);
	border-radius: 999px;
	background: rgba(253, 249, 244, 0.08);
	color: #FDF9F4;
	font-family: Onest, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	/* Always present, quietly. Hiding it until hover would put it out of reach on
	   a touch screen, which is exactly where a pause control matters most. */
	opacity: 0.6;
	transition: opacity var(--armonia-transition), background-color var(--armonia-transition);
}

.armonia-marquee:hover .armonia-marquee__toggle,
.armonia-marquee:focus-within .armonia-marquee__toggle,
.armonia-marquee.is-paused .armonia-marquee__toggle {
	opacity: 1;
}

.armonia-marquee__toggle:focus-visible {
	opacity: 1;
	outline: 2px solid #E9EDC9;
	outline-offset: 2px;
}

.armonia-marquee__toggle:hover {
	background: rgba(253, 249, 244, 0.2);
}

/* With motion reduced the strip is already static, so the control is noise. */
@media (prefers-reduced-motion: reduce) {
	.armonia-marquee__toggle {
		display: none;
	}
}

@media (max-width: 600px) {
	.armonia-marquee__toggle {
		right: 0.5rem;
		font-size: 0.7rem;
		padding: 0.25rem 0.6rem;
	}
}