.contact-page {
	padding: var(--panel-gutter);
}

.contact-panel {
	max-width: var(--container);
	margin-inline: auto;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-panel);
}

.contact-panel + .contact-panel {
	margin-block-start: var(--panel-gutter);
}

.contact-shell {
	padding: var(--section-y) var(--shell-pad);
}

.contact-hero {
	background: hsl(var(--background));
	color: hsl(var(--foreground));
}

.contact-hero__inner {
	padding-block: var(--space-10) var(--space-6);
}

.contact-hero h1,
.contact-main h2,
.contact-next h2,
.contact-main h3 {
	margin-block-start: 0;
	color: hsl(var(--foreground));
	font-weight: 600;
	text-wrap: balance;
}

.contact-hero h1 {
	max-width: var(--measure-headline);
	margin-block-end: var(--space-5);
	font-size: var(--text-h1);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.contact-hero .sib-breadcrumbs {
	margin-block-end: var(--space-6);
}

.contact-hero h1 {
	margin-block-end: var(--space-3);
}

.contact-hero__intro {
	max-width: var(--measure-lede);
	margin-block: 0;
	color: hsl(var(--muted-foreground));
	font-size: var(--text-lg);
	line-height: 1.4;
}

.contact-main__lede {
	max-width: var(--measure-lede);
	margin-block: 0 var(--space-5);
	font-size: var(--text-lg);
	line-height: 1.5;
}

.contact-main__reply {
	max-width: 60ch;
	margin-block: 0 var(--space-6);
	color: hsl(var(--muted-foreground));
	line-height: 1.5;
}

.contact-main__booking {
	margin-block: 0 var(--space-8);
}

.contact-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--head-gap);
}

.contact-main h2,
.contact-next h2 {
	margin-block-end: var(--space-8);
	font-size: var(--text-3xl);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.contact-main__nap {
	align-self: start;
	padding: var(--space-8);
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-card);
}

.contact-main__nap address {
	display: grid;
	gap: var(--space-2);
	font-style: normal;
}

.contact-main__nap address a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--target-min);
}

.contact-main__nap a[href^="mailto:"] {
	min-inline-size: 0;
	max-inline-size: 100%;
	/* Preferred break is the <wbr> after "@"; anywhere is only a last-resort fallback. */
	overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
	.contact-main__nap a[href^="mailto:"] {
		font-size: clamp(0.875rem, 3.6vw, 1rem);
	}
}

.contact-main__nap p {
	margin-block: var(--space-6) 0;
	color: hsl(var(--muted-foreground));
}

.contact-main__nap h3 {
	margin-block: var(--space-10) var(--space-3);
	font-size: var(--text-lg);
}

.contact-main__nap ul,
.contact-next ol {
	margin: 0;
}

.contact-main__nap ul {
	padding: 0;
	list-style: none;
}

.contact-main__nap li + li {
	margin-block-start: var(--space-2);
}

.contact-next {
	background: hsl(var(--background));
}

.contact-next ol {
	display: grid;
	gap: var(--space-4);
	padding-inline-start: var(--space-6);
	font-size: var(--text-lg);
}

.contact-page .home-remote {
	position: relative;
	inline-size: 100%;
	margin: 0;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background: hsl(var(--section-alt));
	color: hsl(var(--foreground));
}

.contact-page .home-remote__inner {
	display: grid;
	gap: var(--space-6);
	width: min(calc(100% - (2 * var(--shell-pad))), var(--container));
	margin-inline: auto;
}

.contact-page .home-remote h2 {
	max-width: var(--measure-headline);
	margin-block: 0;
	font-size: var(--text-3xl);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.contact-page .home-remote__intro {
	max-width: var(--measure-lede);
	margin-block: 0;
	font-size: var(--text-lg);
	line-height: 1.5;
}

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

.contact-page .home-remote__points li {
	min-inline-size: 0;
	padding-block-start: var(--space-4);
	border-block-start: 1px solid hsl(var(--border));
}

.contact-page .home-remote__example {
	min-inline-size: 0;
	padding: var(--space-5);
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-card);
}

.contact-page .home-remote__example h3 {
	margin-block: 0 var(--space-2);
	font-size: var(--text-xl);
}

.contact-page .home-remote__example p {
	margin-block: 0 var(--space-3);
	color: hsl(var(--muted-foreground));
}

.contact-page .home-remote__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-block: 0;
}

.contact-page .home-remote .home-inline-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	color: hsl(var(--accent-conversion));
	font-size: var(--text-sm);
	font-weight: 600;
}

@media (min-width: 768px) {
	.contact-page .home-remote__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.contact-main__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

@media (max-width: 767px) {
	.contact-page .home-remote__actions {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-page *,
	.contact-page *::before,
	.contact-page *::after {
		scroll-behavior: auto;
	}
}
/* v2 full-bleed conversion bands with inner rails. */
.contact-page{width:100%;padding:0}
.contact-panel{width:100vw;max-width:100%;margin-inline:0;border-radius:0;border-inline:0}
.contact-shell{width:min(calc(100% - (2 * var(--shell-pad))),var(--container));margin-inline:auto;padding-inline:0}

/* Typeform band: the form leads the page on the deep surface in FR and EN at
   every width. A fixed responsive height, because the form does not reliably
   post its height. The native form below is the no-JS form and the fallback. */
.contact-main__form {
	min-width: 0;
}

.contact-embed {
	width: min(calc(100% - (2 * var(--shell-pad))), var(--container));
	margin-inline: auto;
	padding-block-end: var(--space-12);
}

.contact-embed__slot {
	height: 78vh;
	height: clamp(560px, 78svh, 760px);
	overflow: hidden;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-tile);
}

.contact-embed__slot .tf-v1-widget,
.contact-embed__slot iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.contact-embed__fallback-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--target-min);
	margin-block-start: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: transparent;
	border: 1px solid hsl(var(--border-strong));
	border-radius: var(--radius-pill);
	color: hsl(var(--foreground));
	font: inherit;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
}

.contact-embed__fallback-toggle:hover,
.contact-embed__fallback-toggle:focus-visible {
	background: hsl(var(--foreground));
	border-color: hsl(var(--foreground));
	color: hsl(var(--background));
}

/* No JS, or embed.js failed to load: no Typeform can render, so the band keeps
   its heading and the native form below is shown instead. */
html:not(.sib-js) .contact-embed,
.contact-embed.is-failed {
	display: none;
}

.contact-hero:has(.contact-embed.is-failed) .contact-hero__inner,
html:not(.sib-js) .contact-hero__inner {
	padding-block-end: var(--space-10);
}

.contact-main__fallback {
	min-width: 0;
	scroll-margin-block-start: var(--space-24);
}

.sib-js .contact-main__fallback:not(.is-open) {
	display: none;
}

/* While the native form is closed, the left column holds only the heading,
   the reply line and the booking button. Do not reserve an empty 7fr column
   beside the tall NAP card: stack full width and lay the card out in columns.
   The 7fr/5fr grid returns as soon as the toggle adds .is-open. */
@media (min-width: 1024px) {
	.sib-js .contact-main__grid:has(.contact-main__fallback:not(.is-open)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.sib-js .contact-main__grid:has(.contact-main__fallback:not(.is-open)) .contact-main__nap {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		/* The last row takes the extra height of the spanning address, so the
		   hours heading stays right above its list. */
		grid-template-rows: auto auto 1fr;
		align-content: start;
		column-gap: var(--space-8);
	}

	.sib-js .contact-main__grid:has(.contact-main__fallback:not(.is-open)) .contact-main__nap > h2 {
		grid-column: 1 / -1;
	}

	.sib-js .contact-main__grid:has(.contact-main__fallback:not(.is-open)) .contact-main__nap > address,
	.sib-js .contact-main__grid:has(.contact-main__fallback:not(.is-open)) .contact-main__nap > p {
		grid-row: 2 / span 2;
		align-self: start;
		margin-block: 0;
	}

	.sib-js .contact-main__grid:has(.contact-main__fallback:not(.is-open)) .contact-main__nap > h3 {
		grid-column: 3;
		grid-row: 2;
		margin-block-start: 0;
	}

	.sib-js .contact-main__grid:has(.contact-main__fallback:not(.is-open)) .contact-main__nap > ul {
		grid-column: 3;
		grid-row: 3;
	}
}

@media (min-width: 768px) {
	.contact-hero__inner {
		padding-block: var(--space-12) var(--space-8);
	}

	.contact-embed {
		padding-block-end: var(--space-16);
	}
}

.contact-page .sib-gbp {
	padding-block: var(--section-y);
	border-block: 1px solid hsl(var(--border));
	background: hsl(var(--background));
	color: hsl(var(--foreground));
}

.contact-page .sib-gbp__shell {
	width: min(calc(100% - (2 * var(--shell-pad))), var(--container));
	margin-inline: auto;
}

.contact-page .sib-gbp h2,
.contact-page .sib-gbp h3 {
	max-width: var(--measure-headline);
	margin: 0;
	font-weight: 600;
	text-wrap: balance;
}

.contact-page .sib-gbp h2 {
	font-size: var(--text-section-title);
	line-height: var(--leading-section-title);
}

.contact-page .sib-gbp h3 {
	font-size: var(--text-card-title);
}

.contact-page .sib-gbp__lead {
	max-width: var(--measure-prose);
	margin: var(--space-4) 0 var(--space-8);
	font-size: var(--text-lead);
}

.contact-page .sib-gbp__map {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: hsl(var(--muted));
}

.contact-page .sib-gbp__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.contact-page .sib-gbp__map-button {
	min-height: var(--target-min);
	padding: var(--space-3) var(--space-5);
	border: 1px solid hsl(var(--accent-conversion));
	border-radius: var(--radius-control);
	background: hsl(var(--accent-conversion));
	color: hsl(var(--on-accent));
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.contact-page .sib-gbp__map-button:focus-visible,
.contact-page .sib-gbp a:focus-visible {
	outline: var(--focus-width) solid hsl(var(--accent-conversion));
	outline-offset: var(--focus-offset);
	box-shadow: 0 0 0 2px hsl(var(--background));
}

.contact-page .sib-gbp__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-block: var(--space-6);
}

.contact-page .sib-gbp a {
	display: inline-flex;
	min-height: var(--target-min);
	align-items: center;
	color: hsl(var(--accent-conversion));
	text-underline-offset: 0.2em;
}

.contact-page .sib-gbp__reviews {
	margin-top: var(--space-10);
}

.contact-page .sib-gbp__review-list {
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.contact-page .sib-gbp__review {
	min-width: 0;
	margin: 0;
	padding-top: var(--space-5);
	border-top: 1px solid hsl(var(--border));
}

.contact-page .sib-gbp__stars {
	margin: 0 0 var(--space-3);
	font-weight: 600;
}

.contact-page .sib-gbp blockquote {
	max-width: var(--measure-prose);
	margin: 0;
}

.contact-page .sib-gbp figcaption {
	margin-top: var(--space-3);
}

.contact-page .sib-gbp__summary {
	margin-top: var(--space-8);
	font-weight: 600;
}

@media (min-width: 768px) {
	.contact-page .sib-gbp__review-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}