@property --results-count {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

@property --results-decimal {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

@property --fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@layer components {
	.band {
		padding-block: var(--space-xl);
	}

	.band h1,
	.band h2,
	.band h3,
	.statement h2,
	.social-band h2 {
		margin: 0;
	}

	.listing-card__image,
	.post-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.listings__grid,
	.posts-band__grid,
	.reviews__grid {
		display: grid;
		gap: var(--space-m);
	}

	.btn {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.85rem 1.35rem;
		border: 1px solid var(--color-ink);
		border-radius: 999px;
		background: var(--color-ink);
		color: var(--color-surface);
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
	}

	.btn:hover {
		background: #002a5e;
		border-color: #002a5e;
		color: var(--color-surface);
	}

	.btn--ghost {
		background: transparent;
		color: var(--color-ink);
	}

	.btn--ghost:hover {
		background: var(--color-ink);
		color: var(--color-surface);
	}

	.action-card {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: var(--space-2xs) var(--space-s);
		overflow: hidden;
		padding: var(--space-m);
		border: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
		border-radius: 1.5rem;
		background: var(--color-surface);
		text-decoration: none;
		transition: transform 300ms var(--ease-out), border-color 300ms var(--ease-out);
	}

	.action-card::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		height: 3px;
		background: var(--color-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 400ms var(--ease-out);
	}

	.action-card:hover {
		border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
		transform: translateY(-4px);
	}

	.action-card:hover::after,
	.action-card:focus-visible::after {
		transform: scaleX(1);
	}

	.action-card__title {
		font-size: var(--text-l);
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: var(--leading-heading);
	}

	.action-card__text {
		grid-column: 1;
		color: var(--color-muted);
	}

	.action-card__icon {
		grid-column: 2;
		grid-row: 1 / span 2;
		display: grid;
		place-items: center;
		width: 2.75rem;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-base);
		color: var(--color-ink);
		font-weight: 700;
		line-height: 1;
		transition: transform 300ms var(--ease-out), background-color 300ms var(--ease-out), color 300ms var(--ease-out);
	}

	.action-card:hover .action-card__icon {
		background: var(--color-ink);
		color: var(--color-surface);
		transform: rotate(-45deg);
	}

	.results {
		background: var(--color-surface);
	}

	.results__list {
		display: grid;
		gap: var(--space-l);
		margin: var(--space-l) 0 0;
		padding: 0;
		list-style: none;
	}

	.results__value {
		margin: 0;
		font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem);
		font-weight: 700;
		letter-spacing: -0.04em;
		line-height: 1;
	}

	.results__num {
		position: relative;
		display: inline-block;
		font-variant-numeric: tabular-nums;
	}

	.results__stars {
		width: fit-content;
		margin: var(--space-2xs) 0 0;
		color: var(--color-accent);
		font-size: 1.15rem;
		letter-spacing: 0.12em;
		line-height: 1;
	}

	.results__label,
	.results__note,
	.section-head__lead {
		margin: var(--space-2xs) 0 0;
		color: var(--color-muted);
	}

	.results__label {
		font-weight: 600;
		color: var(--color-ink);
	}

	@media (prefers-reduced-motion: no-preference) {
		.results.is-counting .results__list > li {
			opacity: 0;
			translate: 0 1.5rem;
		}

		.results.is-counting .results__list > li:nth-child(2) {
			--results-delay: 150ms;
		}

		.results.is-counting .results__list > li:nth-child(3) {
			--results-delay: 300ms;
		}

		.results.is-counting .results__list > li.is-visible {
			animation: results-rise 700ms var(--ease-out) var(--results-delay, 0ms) both;
		}

		.results.is-counting .results__num {
			color: transparent;
		}

		.results.is-counting .results__num::after {
			content: counter(results-count);
			content: counter(results-count) / "";
			position: absolute;
			inset-block-start: 0;
			inset-inline-end: 0;
			color: var(--color-ink);
			counter-reset: results-count var(--results-count);
		}

		.results.is-counting .results__num--decimal::after {
			content: counter(results-count) "," counter(results-decimal);
			content: counter(results-count) "," counter(results-decimal) / "";
			counter-reset: results-count var(--results-count) results-decimal var(--results-decimal);
		}

		.results.is-counting .is-visible .results__num::after {
			animation: results-count 1800ms var(--ease-out) calc(var(--results-delay, 0ms) + 150ms) both;
		}

		.results.is-counting .results__stars {
			clip-path: inset(0 100% 0 0);
		}

		.results.is-counting .is-visible .results__stars {
			animation: results-stars 1200ms var(--ease-out) calc(var(--results-delay, 0ms) + 600ms) both;
		}
	}

	@keyframes results-rise {
		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	@keyframes results-count {
		to {
			--results-count: var(--to);
			--results-decimal: var(--to-decimal, 0);
		}
	}

	@keyframes results-stars {
		to {
			clip-path: inset(0);
		}
	}

	.text-marker {
		--marker-color: color-mix(in srgb, var(--color-accent) 32%, transparent);

		background: linear-gradient(var(--marker-color), var(--marker-color)) no-repeat 0 92% / 100% 0.28em;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	@keyframes text-marker-draw {
		from {
			background-size: 0% 0.28em;
		}
	}

	.statement {
		padding-block: var(--space-xl);
		background: var(--color-ink);
		color: var(--color-surface);
	}

	.statement .wrap,
	.social-band .wrap {
		container-type: inline-size;
	}

	.statement__title {
		margin: 0;
		font-size: var(--text-display);
		font-weight: 700;
		letter-spacing: -0.035em;
		line-height: 1.05;
	}

	.statement__line {
		display: block;
		margin-block-end: 0.15em;
		font-size: 0.72em;
		font-style: italic;
		font-weight: 500;
		letter-spacing: -0.02em;
		white-space: nowrap;
	}

	.statement__accent {
		--marker-color: var(--color-accent);

		display: block;
		width: max-content;
		max-width: 100%;
		font-size: min(1em, 8cqi);
		white-space: nowrap;
	}

	.section-head {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-m);
		margin-block-end: var(--space-l);
	}

	.section-head h2 {
		font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
	}

	.listing-card,
	.post-card {
		min-width: 0;
	}

	.listing-card__link,
	.post-card__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		border-radius: 1.25rem;
		background: var(--color-surface);
		color: var(--color-ink);
		text-decoration: none;
	}

	.listing-card__image,
	.post-card__image {
		aspect-ratio: 4 / 3;
		transition: transform 500ms var(--ease-out);
	}

	.listing-card__media {
		position: relative;
		display: block;
		overflow: hidden;
	}

	.listing-card__link:hover .listing-card__image,
	.post-card__link:hover .post-card__image {
		transform: scale(1.03);
	}

	.listing-card__body,
	.post-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		padding: var(--space-m);
	}

	.listing-card__price {
		color: var(--color-accent);
		font-weight: 700;
	}

	.listing-card__price--badge {
		position: absolute;
		inset-block-start: var(--space-s);
		inset-inline-start: var(--space-s);
		padding: 0.4rem 0.85rem;
		border-radius: 999px;
		background: var(--color-ink);
		color: var(--color-surface);
		font-size: var(--text-s);
		line-height: 1.2;
	}

	.listing-card__title,
	.post-card__title {
		font-size: var(--text-m);
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: var(--leading-heading);
	}

	.listing-card__place,
	.post-card__date {
		color: var(--color-muted);
		font-size: var(--text-s);
	}

	.post-card__body {
		flex: 1;
	}

	.post-card__excerpt {
		margin: var(--space-2xs) 0 0;
		color: var(--color-muted);
		font-size: var(--text-s);
	}

	.post-card__more {
		margin-top: auto;
		padding-top: var(--space-s);
		color: var(--color-accent);
		font-size: var(--text-s);
		font-weight: 600;
	}

	.listing-card__status {
		align-self: flex-start;
		padding: 0.25rem 0.65rem;
		border-radius: 999px;
		background: var(--color-ink);
		color: var(--color-surface);
		font-size: var(--text-s);
		font-weight: 700;
		line-height: 1.3;
	}

	.listing-card__status--rezervovano {
		background: var(--color-accent-text);
	}

	.listing-card__status--v-nabidce {
		background: color-mix(in srgb, var(--color-ink) 8%, var(--color-surface));
		color: var(--color-ink);
	}

	.listing-card__link:hover .listing-card__title,
	.post-card__link:hover .post-card__title {
		text-decoration: underline;
		text-underline-offset: 0.18em;
	}

	.social-band {
		--social-line: color-mix(in srgb, var(--color-surface) 7%, transparent);

		position: relative;
		isolation: isolate;
		overflow: clip;
		padding-block: var(--space-xl);
		background:
			radial-gradient(36rem 26rem at 100% 50%, color-mix(in srgb, var(--color-surface) 8%, transparent), transparent 70%),
			var(--color-ink);
		color: var(--color-surface);
	}

	.social-band::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image:
			linear-gradient(var(--social-line) 1px, transparent 1px),
			linear-gradient(90deg, var(--social-line) 1px, transparent 1px);
		background-size: 4rem 4rem;
		background-position: center top;
		mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000 15%, transparent 70%);
	}

	.social-band__inner {
		display: grid;
		align-items: center;
		gap: var(--space-l);
	}

	.social-tiles {
		display: grid;
		gap: var(--space-xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.social-tile {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-s);
		padding: var(--space-s);
		border: 1px solid color-mix(in srgb, var(--color-surface) 22%, transparent);
		border-radius: 1.25rem;
		background: color-mix(in srgb, var(--color-surface) 6%, transparent);
		color: var(--color-surface);
		font-weight: 700;
		text-decoration: none;
		transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
	}

	.social-tile:hover {
		border-color: var(--color-accent);
		background: color-mix(in srgb, var(--color-surface) 12%, transparent);
		color: var(--color-surface);
		text-decoration: none;
		transform: translateY(-4px);
	}

	.social-tile:focus-visible {
		outline-color: var(--color-surface);
	}

	.social-tile__icon {
		display: grid;
		place-items: center;
		width: 2.75rem;
		aspect-ratio: 1;
		border-radius: 50%;
		background: color-mix(in srgb, var(--color-surface) 12%, transparent);
		transition: background-color 300ms var(--ease-out);
	}

	.social-tile:hover .social-tile__icon {
		background: var(--color-accent);
	}

	.social-tile__icon .social-list__icon {
		width: 1.25rem;
		height: 1.25rem;
	}

	.social-tile__label {
		font-size: var(--text-m);
	}

	.social-tile__arrow {
		color: var(--color-accent);
		font-size: 1.2rem;
		line-height: 1;
		transition: transform 300ms var(--ease-out);
	}

	.social-tile:hover .social-tile__arrow {
		transform: translate(3px, -3px);
	}

	.reviews {
		overflow-x: clip;
	}

	.reviews__controls {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-s);
	}

	.reviews__arrows {
		display: flex;
		gap: 0.5rem;
	}

	.reviews__arrow {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--color-ink);
		color: var(--color-surface);
		cursor: pointer;
	}

	.reviews__arrow svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.reviews__arrow:hover {
		background: #002a5e;
	}

	.reviews__arrow:disabled {
		opacity: 0.4;
		cursor: default;
	}

	.reviews__arrow[hidden] {
		display: none;
	}

	.reviews__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(85%, 26rem);
		gap: var(--space-m);
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		padding-block: 0.25rem 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
	}

	.reviews__cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s) var(--space-l);
		margin-block-start: var(--space-l);
	}

	.reviews__cta-text {
		max-width: 32rem;
		margin: 0;
		font-size: var(--text-l);
		font-weight: 600;
		line-height: var(--leading-heading);
	}

	.reviews__cta-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s);
	}

	.review-card {
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
		margin: 0;
		padding: var(--space-m);
		border-radius: 1.25rem;
		background: var(--color-surface);
		scroll-snap-align: start;
	}

	.review-card::before {
		content: "\201C";
		content: "\201C" / "";
		display: block;
		height: 0.45em;
		margin-block-end: calc(var(--space-s) * -1);
		color: var(--color-accent);
		font-family: Georgia, "Times New Roman", serif;
		font-size: 4.5rem;
		font-weight: 700;
		line-height: 1;
	}

	.reviews__grid .review-card {
		scroll-snap-align: none;
	}

	.review-card__text {
		margin: 0;
	}

	.review-card__meta {
		margin-block-start: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-xs);
	}

	.review-card__name {
		font-style: normal;
		font-weight: 700;
	}

	.review-card__source {
		color: var(--color-accent);
		font-size: var(--text-s);
		font-weight: 600;
	}

	.review-card__source:has(.review-card__logo) {
		line-height: 0;
	}

	.review-card__logo {
		display: block;
		width: auto;
		height: 1.35rem;
	}

	.review-card__logo--remax {
		height: 1.85rem;
	}

	.site-main:has(.about),
	.site-main:has(.services),
	.site-main:has(.contact),
	.site-main:has(.catalog),
	.site-main:has(.blog-index),
	.site-main:has(.reference-index) {
		padding-block: 0;
	}

	.catalog,
	.blog-index,
	.reference-index {
		padding-block: var(--space-xl) var(--space-l);
	}

	.page-intro {
		margin-block-end: var(--space-xl);
	}

	.page-intro__kicker {
		margin: 0 0 var(--space-s);
		color: var(--color-accent-text);
		font-size: var(--text-s);
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.page-intro__title {
		margin: 0;
		font-size: var(--text-display);
		font-weight: 700;
		letter-spacing: -0.035em;
		line-height: 1.05;
		text-wrap: balance;
	}

	.page-intro__lead {
		max-width: 40rem;
		margin: var(--space-m) 0 0;
		color: var(--color-muted);
		font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
		text-wrap: pretty;
	}

	/* Pages whose first block is a call to action sit closer to the intro. */
	.services .page-intro,
	.contact .page-intro {
		margin-block-end: var(--space-l);
	}

	.about .page-intro {
		margin-block-end: var(--space-m);
	}

	.blog-index__empty {
		margin: var(--space-l) 0 0;
		color: var(--color-muted);
	}

	.catalog__group {
		margin-block-start: var(--space-xl);
	}

	.catalog__group h2 {
		margin: 0 0 var(--space-l);
		font-size: var(--text-xl);
		letter-spacing: -0.03em;
		line-height: var(--leading-heading);
	}

	.catalog .pagination .page-numbers,
	.blog-index .pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.5rem;
		min-height: 2.5rem;
		padding-inline: 0.75rem;
		border-radius: 999px;
		color: var(--color-ink);
		font-weight: 600;
		text-decoration: none;
	}

	.catalog .pagination .page-numbers.current,
	.blog-index .pagination .page-numbers.current {
		background: var(--color-ink);
		color: var(--color-surface);
	}

	.catalog .pagination a.page-numbers:hover,
	.blog-index .pagination a.page-numbers:hover {
		background: color-mix(in srgb, var(--color-ink) 8%, transparent);
		color: var(--color-ink);
	}

	.services {
		padding-block: var(--space-xl) var(--space-l);
	}

	.services__cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-s) var(--space-m);
		margin-block-start: var(--space-l);
	}

	.services__hours {
		margin: 0;
		color: var(--color-muted);
	}

	.services__grid {
		display: grid;
		gap: var(--space-m);
		margin-block-start: var(--space-xl);
	}

	.about {
		padding-block: var(--space-xl) 0;
	}

	.about__grid {
		display: flex;
		flex-direction: column;
	}

	.about__copy {
		container-type: inline-size;
	}

	.about__statement {
		margin: var(--space-m) 0 0;
		font-size: var(--text-display);
		font-weight: 700;
		letter-spacing: -0.035em;
		line-height: 1.05;
	}

	.about__statement-line {
		display: block;
		margin-block-end: 0.15em;
		font-size: min(0.72em, 8.6cqi);
		font-style: italic;
		font-weight: 500;
		letter-spacing: -0.02em;
		white-space: nowrap;
	}

	.about__statement .text-marker {
		--marker-color: var(--color-accent);

		width: max-content;
		max-width: 100%;
		margin-block-end: 0;
		font-size: min(1em, 8.4cqi);
		font-style: normal;
		font-weight: 700;
		letter-spacing: -0.035em;
		white-space: nowrap;
	}

	.about__text {
		display: grid;
		gap: var(--space-m);
		max-width: 40rem;
		margin-block-start: var(--space-l);
		color: var(--color-muted);
	}

	.about__text p {
		margin: 0;
		text-wrap: pretty;
	}

	.about__photo {
		position: relative;
		isolation: isolate;
		order: 2;
		align-self: center;
		margin: var(--space-xl) 0 0;
		padding-inline: var(--space-m);
		line-height: 0;
	}

	.about__photo::before,
	.about__photo::after {
		content: "";
		position: absolute;
		inset: 16% 0 0;
		z-index: -1;
		border-radius: 999px 999px 0 0;
	}

	.about__photo::before {
		background:
			radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--color-surface) 22%, transparent), transparent 55%),
			linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 88%, var(--color-surface)), var(--color-ink) 60%);
	}

	.about__photo::after {
		border: 1.5px solid var(--color-accent);
		border-block-end: 0;
		translate: -1.25rem -1.25rem;
	}

	.about__photo picture {
		display: contents;
	}

	.about__image {
		width: min(70vw, 19rem);
		height: auto;
	}

	.posts-band {
		background: var(--color-surface);
	}

	.shorts__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-s);
		margin: var(--space-xl) 0 0;
		padding: 0;
		list-style: none;
	}

	.shorts__facade {
		position: relative;
		display: block;
		aspect-ratio: 9 / 16;
		overflow: hidden;
		border: 1px solid color-mix(in srgb, var(--color-surface) 14%, transparent);
		border-radius: 1rem;
		background: color-mix(in srgb, var(--color-surface) 6%, var(--color-ink));
		color: var(--color-surface);
		text-decoration: none;
	}

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

	.shorts__facade::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 55%);
	}

	.shorts__play {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		z-index: 1;
		display: grid;
		place-items: center;
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 999px;
		background: var(--color-surface);
		color: var(--color-ink);
		transform: translate(-50%, -50%);
		transition: transform var(--duration) var(--ease-out);
	}

	.shorts__play svg {
		width: 1.75rem;
		height: 1.75rem;
	}

	.shorts__facade:hover .shorts__play {
		transform: translate(-50%, -50%) scale(1.08);
	}

	.shorts__title {
		position: absolute;
		inset: auto var(--space-s) var(--space-s);
		z-index: 1;
		font-size: var(--text-s);
		font-weight: 600;
		line-height: 1.3;
	}

	.shorts__frame {
		display: block;
		width: 100%;
		aspect-ratio: 9 / 16;
		border: 1px solid color-mix(in srgb, var(--color-surface) 14%, transparent);
		border-radius: 1rem;
		background: color-mix(in srgb, var(--color-surface) 6%, var(--color-ink));
	}

	@media (min-width: 48rem) {
		.social-tiles {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.social-tile {
			grid-template-columns: auto auto;
			grid-template-rows: auto auto;
			justify-content: space-between;
			row-gap: var(--space-l);
			padding: var(--space-m);
		}

		.social-tile__label {
			grid-column: 1 / -1;
			grid-row: 2;
		}

		.social-tile__arrow {
			grid-column: 2;
			grid-row: 1;
			align-self: start;
		}

		.catalog .listings__grid,
		.posts-band__grid {
			grid-template-columns: 1fr 1fr;
		}

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

	@media (min-width: 64rem) {
		.social-band__inner {
			grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
			column-gap: var(--space-xl);
		}

		.social-band__inner > .statement__title {
			container-type: inline-size;
		}

		.listings__grid,
		.catalog .listings__grid,
		.posts-band__grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

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

		.reviews__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

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

		.contact-form__grid {
			grid-template-columns: 1fr 1fr;
		}

		.contact-form__field--wide {
			grid-column: 1 / -1;
		}

		.about__grid {
			display: grid;
			grid-template-columns: minmax(0, 1.15fr) auto;
			align-items: end;
			column-gap: var(--space-xl);
		}

		.about__copy {
			align-self: start;
			padding-block-end: var(--space-xl);
		}

		.about__photo {
			order: 0;
			align-self: end;
			margin: 0;
			padding-inline: var(--space-l) 0;
		}

		.about__photo::before,
		.about__photo::after {
			inset-inline-start: var(--space-l);
		}

		.about__image {
			width: auto;
			height: min(40rem, 78vh);
		}
	}

	.contact {
		padding-block: var(--space-xl) var(--space-l);
	}

	.contact-form__title {
		margin: 0;
		font-size: var(--text-display);
		font-weight: 700;
		letter-spacing: -0.035em;
		line-height: 1.05;
	}

	.contact__address {
		margin: var(--space-m) 0 0;
		font-weight: 600;
	}

	.contact__channels {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s) var(--space-l);
		margin: var(--space-s) 0 0;
		padding: 0;
		list-style: none;
	}

	.contact__link {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		color: var(--color-ink);
		font-weight: 600;
		text-decoration: none;
	}

	.contact__link:hover {
		color: var(--color-accent-text);
	}

	.contact__icon {
		flex: none;
		width: 1.25rem;
		height: 1.25rem;
	}

	.contact__cta {
		margin: var(--space-l) 0 0;
	}

	.contact-form {
		scroll-margin-top: 7rem;
		padding-block: var(--space-xl);
		background: var(--color-surface);
	}

	.contact-form__wrap {
		width: min(100% - (var(--gutter) * 2), 48rem);
	}

	.contact-form__title {
		font-size: var(--text-xl);
	}

	.site-main:has(> .contact-form:last-child) {
		padding-block-end: 0;
	}

	.contact-form__lead {
		margin: var(--space-xs) 0 0;
		color: var(--color-muted);
	}

	.contact-form__status {
		margin: var(--space-m) 0 0;
		padding: var(--space-s) var(--space-m);
		border-radius: 0.75rem;
		background: var(--color-base);
	}

	.contact-form__status--sent {
		background: var(--color-ink);
		color: var(--color-base);
	}

	.contact-form__form {
		margin-block-start: var(--space-l);
	}

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

	.contact-form__grid {
		display: grid;
		gap: var(--space-s);
	}

	.contact-form__field {
		display: grid;
		gap: 0.35rem;
		margin: 0;
	}

	.contact-form__field label {
		font-weight: 600;
	}

	.contact-form__req {
		color: var(--color-accent-text);
	}

	.contact-form__field input,
	.contact-form__field select,
	.contact-form__field textarea {
		width: 100%;
		padding: 0.85rem 1rem;
		border: 1px solid var(--color-line);
		border-radius: 0.75rem;
		background: var(--color-surface);
		color: var(--color-ink);
	}

	.contact-form__field textarea {
		resize: vertical;
		min-height: 8rem;
	}

	.contact-form__field input:focus-visible,
	.contact-form__field select:focus-visible,
	.contact-form__field textarea:focus-visible {
		border-color: var(--color-ink);
	}

	.contact-form__field input[aria-invalid="true"],
	.contact-form__field select[aria-invalid="true"],
	.contact-form__field textarea[aria-invalid="true"] {
		border-color: #8f2d2d;
	}

	.contact-form__error {
		color: #8f2d2d;
		font-size: var(--text-s);
	}

	.contact-form__consent {
		margin: var(--space-m) 0;
		color: var(--color-muted);
		font-size: var(--text-s);
	}

	.contact-form .btn {
		cursor: pointer;
	}

	.contact-map__frame {
		display: block;
		width: 100%;
		height: min(36rem, 70vh);
		border: 0;
	}

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.section-head,
			.results h2,
			.statement__title,
			.social-band__inner,
			.listing-card,
			.post-card,
			.shorts__grid li {
				animation: section-reveal linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 45%;
			}

			.listing-card:nth-child(2),
			.post-card:nth-child(2),
			.shorts__grid li:nth-child(2) {
				animation-range: entry 10% entry 55%;
			}

			.listing-card:nth-child(3),
			.post-card:nth-child(3),
			.shorts__grid li:nth-child(3) {
				animation-range: entry 20% entry 65%;
			}

			.shorts__grid li:nth-child(4) {
				animation-range: entry 30% entry 75%;
			}

			.statement__accent {
				animation: text-marker-draw linear both;
				animation-timeline: view();
				animation-range: entry 70% cover 45%;
			}

			/* Fades whichever edge still has cards hidden behind it. Inactive when the strip does not overflow. */
			.reviews__track {
				mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
				animation: reviews-fade linear both;
				animation-timeline: scroll(self inline);
			}
		}
	}

	@keyframes section-reveal {
		from {
			opacity: 0;
			translate: 0 1.5rem;
		}
	}

	@keyframes reviews-fade {
		0% {
			--fade-start: 0px;
			--fade-end: 4rem;
		}

		8%,
		92% {
			--fade-start: 4rem;
			--fade-end: 4rem;
		}

		100% {
			--fade-start: 4rem;
			--fade-end: 0px;
		}
	}
}