/**
 * Booking modal — centred Calendly embed, desktop only.
 *
 * Sized against the viewport (not a fixed height) so the whole scheduler fits
 * without the page or the dialog scrolling. Only ever rendered above 981px;
 * the media query below is a belt-and-braces guard in case the markup is left
 * in the DOM when the viewport shrinks.
 */
.skgh-book {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.skgh-book[hidden] {
	display: none;
}

.skgh-book__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 13, 18, 0.55);
	-webkit-backdrop-filter: blur(6px) saturate(120%);
	backdrop-filter: blur(6px) saturate(120%);
	opacity: 0;
	transition: opacity 0.22s ease;
}
.skgh-book.is-open .skgh-book__backdrop {
	opacity: 1;
}

.skgh-book__dialog {
	/* Sized to the point where Calendly's embed is already snug on its own.
	   Its card grows to a 680px cap and then centres, so a wide dialog buys
	   nothing but white gutter — but at exactly 680 the card is 644 with an even
	   18px either side, which reads as padding rather than a gap. That is why
	   there is deliberately NO horizontal crop here, unlike the Booking CTA
	   section: cropping the sides means predicting Calendly's gutter, and the
	   moment that prediction is off by a few pixels the whole widget sits
	   visibly off-centre. Vertical is cropped, where nothing can drift sideways. */
	--skgh-book-w: 680px;
	--skgh-book-trim-top: 47px;
	--skgh-book-trim-bottom: 47px;
	position: relative;
	width: min(var(--skgh-book-w), 100%);
	border-radius: 22px;
	background: #ffffff;
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.35),
		0 2px 8px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition:
		opacity 0.24s ease,
		transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.skgh-book.is-open .skgh-book__dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Top-LEFT, not right: Calendly's "powered by" ribbon lives in its card's
   top-right corner, which this would otherwise sit on top of. */
.skgh-book__close {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
	color: #14161d;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}
.skgh-book__close:hover {
	background: #ffffff;
	transform: scale(1.06);
}
.skgh-book__close:focus-visible {
	outline: 2px solid var(--skgh-cta, #6647ff);
	outline-offset: 2px;
}

/* The clipping window. Its height starts as a sensible guess and is replaced
   with Calendly's own reported height (less the trims) as soon as it reports
   one, so the widget never scrolls inside a cropped frame. Capped to the
   viewport, and scrollable if the content ever outgrows it — the negative `top`
   sits above the scroll origin, so the cropped strip stays cropped either way.
   The iframe is full-width here, so a scrollbar appearing just reflows Calendly
   a little rather than shifting it sideways. */
.skgh-book__crop {
	position: relative;
	height: min(620px, calc(100vh - 48px));
	max-height: calc(100vh - 48px);
	overflow: hidden auto;
	overscroll-behavior: contain;
}
.skgh-book__frame {
	position: absolute;
	top: calc(var(--skgh-book-trim-top) * -1);
	left: 0;
	display: block;
	width: 100%;
	height: calc(100% + var(--skgh-book-trim-top) + var(--skgh-book-trim-bottom));
	border: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.skgh-book.is-loaded .skgh-book__frame {
	opacity: 1;
}

/* Shown until Calendly reports in, so the dialog is never a blank white box. */
.skgh-book__loading {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: #ffffff;
	transition: opacity 0.3s ease;
}
.skgh-book__loading-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #7d8398;
}
.skgh-book__loading-bar {
	position: relative;
	display: block;
	width: min(180px, 50%);
	height: 3px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(102, 71, 255, 0.14);
}
.skgh-book__loading-bar > span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	border-radius: inherit;
	background: var(--skgh-cta, #6647ff);
	animation: skgh-book-load 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes skgh-book-load {
	0% {
		left: -40%;
	}
	100% {
		left: 100%;
	}
}
.skgh-book.is-loaded .skgh-book__loading {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.skgh-book__backdrop,
	.skgh-book__dialog,
	.skgh-book__frame,
	.skgh-book__loading {
		transition: none;
	}
	.skgh-book__dialog {
		transform: none;
	}
	.skgh-book__loading-bar > span {
		animation: none;
		width: 50%;
	}
}

/* Mobile never opens the modal (JS bails below 981px); hide it outright so a
   resize mid-session can't leave a cramped embed on screen. */
@media (max-width: 980px) {
	.skgh-book {
		display: none;
	}
}