/*
 * The booking and contact pages.
 *
 * Both put the form beside the copy rather than under it, so the thing you came
 * to do is on the first screen instead of below the fold. They reuse the
 * service story's dark hero — `service-story.css` owns that — and only the
 * two-column arrangement and the supporting lists are here.
 */

/* ============================================================
   Shared: copy beside form
   ============================================================ */

.gd-book__grid,
.gd-contact__grid {
	display: grid;
	align-items: start;
	gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 940px) {
	.gd-book__grid,
	.gd-contact__grid {
		grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
	}
}

.gd-book__hero,
.gd-contact__hero { min-height: auto; }

.gd-book__title,
.gd-contact__title {
	max-width: 18ch;
	margin: 0.6rem 0 0;
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.gd-book__lead,
.gd-contact__lead {
	max-width: 52ch;
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	color: var(--gd-text-2);
	font-size: clamp(0.98rem, 1.3vw, 1.12rem);
	line-height: 1.65;
}

/*
 * The form sits on its own surface so it reads as a thing to fill in rather
 * than more page. On the dark hero that means lifting it, not tinting it.
 */
.gd-book__form,
.gd-contact__form {
	padding: clamp(1.25rem, 2.6vw, 2rem);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--gd-radius-lg);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 50px 100px -60px rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* ============================================================
   Booking — what happens, in order
   ============================================================ */

.gd-book__steps {
	display: grid;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	padding: 0;
	gap: clamp(0.85rem, 1.6vw, 1.15rem);
	list-style: none;
}

.gd-book__steps > li {
	display: grid;
	align-items: start;
	column-gap: 0.9rem;
	grid-template-columns: 2rem minmax(0, 1fr);
}

.gd-book__step-n {
	color: var(--gd-brand-lift, #ef4b83);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.gd-book__step-body { display: grid; gap: 0.1rem; }
.gd-book__step-when { color: var(--gd-text); font-size: 0.95rem; font-weight: 700; }
.gd-book__step-what { color: var(--gd-text-3); font-size: 0.86rem; line-height: 1.55; }

/* The three reasons not to hesitate, next to the button that acts on them. */
.gd-book__assure {
	display: flex;
	flex-wrap: wrap;
	margin: clamp(1.5rem, 2.6vw, 2rem) 0 0;
	padding: 0;
	gap: 0.5rem 1.25rem;
	list-style: none;
}

.gd-book__assure li {
	position: relative;
	padding-left: 1.25rem;
	color: var(--gd-text-3);
	font-size: 0.83rem;
}

.gd-book__assure li::before {
	content: "";
	position: absolute;
	top: 0.52em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gd-cyan);
}

/* ============================================================
   Contact — the details, plainly
   ============================================================ */

.gd-contact__details {
	display: grid;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	padding: 0;
	gap: 0.85rem;
	list-style: none;
}

.gd-contact__details li {
	display: grid;
	align-items: baseline;
	column-gap: 1rem;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gd-contact__k {
	color: var(--gd-text-3);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gd-contact__v { color: var(--gd-text); font-size: 0.95rem; }
a.gd-contact__v:hover { color: var(--gd-brand-lift, #ef4b83); }

.gd-contact__nudge {
	margin: clamp(1.5rem, 2.6vw, 2rem) 0 0;
	color: var(--gd-text-3);
	font-size: 0.9rem;
}

.gd-contact__nudge a {
	color: var(--gd-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
   Narrow screens
   ============================================================ */

@media (max-width: 939px) {
	/* The form first on a phone: it is what the page is for. */
	.gd-book__grid,
	.gd-contact__grid { grid-template-columns: minmax(0, 1fr); }

	.gd-contact__details li { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
}

/*
 * One surface, not two.
 *
 * The plugin's form draws its own panel, and wrapping it in ours put a box
 * inside a box. The wrapper keeps the frame — it is the one positioned against
 * the hero — and the form inside it goes flat.
 */
.gd-book__form .gd-form,
.gd-contact__form .gd-form {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}