/* 7.9.31 service window "Glasinsel": a floating glass panel over the blurred page.
 * Photo on the left with the service name, details on the right; the packages
 * switch with a segmented control and a detail card (service-glass.js builds
 * both from the regular package buttons, which stay the source of the choice).
 * Phones keep the bottom sheet of service-sheet.css in the same dark glass look.
 * Everything is scoped to #serviceOverlay.sw-glass, set by service-glass.js. */

@font-face { font-family: "Space Mono"; font-weight: 400; font-display: swap; src: url("../fonts/space-mono/space-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 700; font-display: swap; src: url("../fonts/space-mono/space-mono-700.woff2") format("woff2"); }

html body #serviceOverlay.sw-glass {
	--glass-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--glass-mono: "Space Mono", ui-monospace, monospace;
	--sheet-bg: #141416;
	--sheet-media-bg: #000;
	--sheet-strong: #fff;
	--sheet-text: #f4f2ee;
	--sheet-muted: rgba(244, 242, 238, .66);
	--sheet-faint: rgba(244, 242, 238, .46);
	--sheet-surface: rgba(255, 255, 255, .05);
	--sheet-surface-hover: rgba(255, 255, 255, .09);
	--sheet-line: rgba(255, 255, 255, .09);
	--sheet-line-strong: rgba(255, 255, 255, .2);
	--sheet-control: rgba(255, 255, 255, .08);
	--sheet-close-bg: rgba(255, 255, 255, .1);
	--sheet-close-ink: #fff;
	--sheet-accent-soft: rgba(226, 8, 22, .1);
	--sheet-accent-line: rgba(226, 8, 22, .75);
	color-scheme: dark;
}

/* Backdrop: the page stays visible, softly blurred. */
html body #serviceOverlay.sw-glass .sw-sheet__backdrop {
	background: rgba(6, 6, 8, .45);
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition: opacity 320ms ease, backdrop-filter 420ms ease, -webkit-backdrop-filter 420ms ease;
}
html body #serviceOverlay.sw-glass.open .sw-sheet__backdrop {
	-webkit-backdrop-filter: blur(18px) saturate(120%);
	backdrop-filter: blur(18px) saturate(120%);
}

/* Desktop panel */
@media (min-width: 861px) {
	html body #serviceOverlay.sw-glass .sw-sheet__panel {
		inset: auto;
		left: 50%;
		top: 50%;
		width: min(1240px, calc(100vw - 48px));
		height: min(800px, calc(100svh - 48px));
		grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
		gap: 10px;
		padding: 10px;
		border-radius: 34px;
		background: rgba(24, 24, 27, .74);
		-webkit-backdrop-filter: blur(40px) saturate(170%);
		backdrop-filter: blur(40px) saturate(170%);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 50px 120px -20px rgba(0, 0, 0, .7);
		opacity: 0;
		transform: translate3d(-50%, -48%, 0) scale(.96);
		transition: transform 260ms var(--glass-ease), opacity 200ms ease;
	}
	html body #serviceOverlay.sw-glass.open .sw-sheet__panel {
		opacity: 1;
		transform: translate3d(-50%, -50%, 0) scale(1);
		transition: transform 520ms var(--glass-ease), opacity 280ms ease;
	}
	html body #serviceOverlay.sw-glass .sw-sheet__main { position: relative; grid-template-rows: minmax(0, 1fr) auto auto; padding: 30px 26px 16px 22px; }
	html body #serviceOverlay.sw-glass .modalbody { grid-row: 1; }
	html body #serviceOverlay.sw-glass .web-showcase { grid-row: 2; }
	html body #serviceOverlay.sw-glass .service-modal-footer { grid-row: 3; }
	html body #serviceOverlay.sw-glass .sw-sheet__top { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 0; }
	html body #serviceOverlay.sw-glass .sw-sheet__position { display: none; }
	html body #serviceOverlay.sw-glass .modalbody { padding: 0 6px 18px 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
	html body #serviceOverlay.sw-glass .modalbody > * { max-width: none; }
	html body #serviceOverlay.sw-glass .modalintro { margin-right: 150px; }
	/* 7.9.55 at rest no fade at the top, so the first line of the intro stays fully white; only the end fades */
	html body #serviceOverlay.sw-glass .modalbody { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); }
	/* Scrolled: content fades out under the round buttons instead of running behind them. */
	html body #serviceOverlay.sw-glass .modalbody.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 52px); mask-image: linear-gradient(180deg, transparent 0, #000 52px); }
}

/* Photo with chip and the service name */
html body #serviceOverlay.sw-glass .sw-sheet__media { border-radius: 26px; overflow: hidden; background: #000; padding: 0; }
html body #serviceOverlay.sw-glass .sw-sheet__image {
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	-webkit-mask-image: none;
	mask-image: none;
	filter: saturate(.92) contrast(1.04);
}
html body #serviceOverlay.sw-glass .sw-sheet__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 30%, transparent 52%, rgba(0, 0, 0, .74));
	pointer-events: none;
}
.sw-glass__chip {
	position: absolute;
	left: 18px;
	top: 18px;
	z-index: 2;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .36);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font: 400 11px/1 var(--glass-mono, monospace);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sw-glass__title {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 22px;
	z-index: 2;
	color: #fff;
	font-size: clamp(54px, 6vw, 92px);
	font-weight: 800;
	line-height: .86;
	letter-spacing: -.03em; /* 7.9.56 a little more air between the letters */
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* Controls: round glass buttons */
html body #serviceOverlay.sw-glass :is(.sw-sheet__step, .sw-sheet__close) {
	border: 0;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
@media (hover: hover) and (pointer: fine) {
	html body #serviceOverlay.sw-glass :is(.sw-sheet__step, .sw-sheet__close):hover { background: rgba(255, 255, 255, .16); opacity: 1; }
}

/* Text column */
html body #serviceOverlay.sw-glass #modalTitle {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html body #serviceOverlay.sw-glass .modalintro {
	margin-top: 0;
	max-width: none;
	color: rgba(244, 242, 238, .88);
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -.012em;
}
html body #serviceOverlay.sw-glass .sw-sheet__block + .sw-sheet__block { margin-top: 22px; }
html body #serviceOverlay.sw-glass .sw-sheet__section-head { margin-bottom: 10px; }
html body #serviceOverlay.sw-glass .sw-sheet__section-head h3 {
	margin: 0;
	color: var(--sheet-faint);
	font: 400 11px/1.3 var(--glass-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
}
html body #serviceOverlay.sw-glass .sw-sheet__section-head p { display: none; }
html body #serviceOverlay.sw-glass .service-output-section .sw-sheet__section-head { display: none; }
html body #serviceOverlay.sw-glass.has-seg #modalScopes { display: none; }

/* Segmented control */
.sw-glass__seg {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
	padding: 4px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.sw-glass__seg[hidden], .sw-glass__detail[hidden] { display: none; }
.sw-glass__seg > i {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc((100% - 8px) / var(--n, 3));
	border-radius: 10px;
	background: rgba(255, 255, 255, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 14px rgba(0, 0, 0, .25);
	transform: translateX(calc(var(--i, 0) * 100%));
	transition: transform 380ms var(--glass-ease, ease);
	pointer-events: none;
}
.sw-glass__seg button {
	position: relative;
	z-index: 1;
	min-width: 0;
	padding: 11px 6px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: rgba(244, 242, 238, .62);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: color 200ms ease;
	overflow-wrap: anywhere;
}
.sw-glass__seg button[aria-checked="true"] { color: #fff; }
.sw-glass__seg button:focus-visible { outline: 2px solid var(--red, #e20816); outline-offset: 2px; }

.sw-glass__detail {
	margin-top: 12px;
	padding: 22px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .045);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.sw-glass__detail > div { transition: opacity 200ms ease, transform 300ms var(--glass-ease, ease), filter 200ms ease; }
.sw-glass__detail > div.is-swapping { opacity: 0; transform: translate3d(0, 6px, 0); filter: blur(3px); }
.sw-glass__detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sw-glass__detail-head b { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.sw-glass__detail-head span { flex: none; color: var(--red, #e20816); font: 700 12px var(--glass-mono, monospace); font-variant-numeric: tabular-nums; }
.sw-glass__detail p { margin: 8px 0 0; color: rgba(244, 242, 238, .76); font-size: 15px; line-height: 1.5; }

/* Included items as small tags */
html body #serviceOverlay.sw-glass .chips { display: flex; flex-wrap: wrap; gap: 6px; }
html body #serviceOverlay.sw-glass .chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 0;
	padding: 7px 11px 7px 9px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	color: rgba(244, 242, 238, .84);
	font-size: 14px;
	font-weight: 500;
}
/* 7.9.55 ticks instead of dots */
html body #serviceOverlay.sw-glass .chip::before { content: ""; position: static; flex: none; width: 14px; height: 14px; border-radius: 0; background: var(--red, #e20816); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: none; }
/* the chosen package: its lines one below the other, like a checklist */
html body #serviceOverlay.sw-glass .service-output-section.has-package .sw-sheet__section-head { display: block; }
html body #serviceOverlay.sw-glass .chips-all { margin: 0 0 10px; color: var(--sheet-muted); font-size: 15px; line-height: 1.5; }
html body #serviceOverlay.sw-glass .chips-all[hidden] { display: none; }
/* 7.9.59 two flowing columns instead of a grid: every point keeps the same gap, a long point no longer stretches its row */
html body #serviceOverlay.sw-glass .chips.is-package { display: block; columns: 2; column-gap: 28px; padding: 18px 20px 4px; border-radius: 20px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html body #serviceOverlay.sw-glass .chips.is-package .chip { display: flex; width: 100%; margin: 0 0 14px; break-inside: avoid; -webkit-column-break-inside: avoid; align-items: flex-start; gap: 10px; padding: 0; border-radius: 0; background: none; color: var(--sheet-text); font-size: 15px; font-weight: 400; line-height: 1.45; }
html body #serviceOverlay.sw-glass .chips.is-package .chip::before { margin-top: 3px; }
html body #serviceOverlay.sw-glass .combo { margin-top: 14px; color: var(--sheet-faint); font-size: 13px; line-height: 1.5; }
html body #serviceOverlay.sw-glass .service-related-link { font-size: 14px; }
html body #serviceOverlay.sw-glass .service-related .scope-title { color: var(--sheet-faint); font: 400 11px var(--glass-mono); letter-spacing: .08em; text-transform: uppercase; }
html body #serviceOverlay.sw-glass .service-related .scope-title::first-letter { text-transform: uppercase; }
html body #serviceOverlay.sw-glass .service-related-link { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); }

/* Action row */
html body #serviceOverlay.sw-glass .service-modal-footer {
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	padding: 14px 0 0;
	border: 0;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html body #serviceOverlay.sw-glass .service-modal-footer > div:not(.sw-modal-actions) { flex: 0 1 12em; min-width: 0; }
html body #serviceOverlay.sw-glass .service-modal-footer strong { display: none; }
html body #serviceOverlay.sw-glass .service-modal-footer .offerline { margin: 0; color: var(--sheet-faint); font-size: 13px; line-height: 1.4; }
html body #serviceOverlay.sw-glass .service-modal-footer > .sw-modal-actions { display: flex; flex: 1 1 auto; width: auto; }
html body #serviceOverlay.sw-glass .sw-modal-actions .btn { flex: 1 1 auto; width: 100%; min-height: 54px; border-radius: 999px; white-space: nowrap !important; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

/* Phones: bottom sheet from service-sheet.css, glass colours, rounded photo with the name */
@media (max-width: 860px) {
	html body #serviceOverlay.sw-glass .sw-sheet__panel { background: #141416; border-radius: 28px 28px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
	.sw-motion-v591 #serviceOverlay.sw-glass .sw-sheet__top { border-bottom: 0 !important; background: rgba(20, 20, 22, .9) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
	.sw-motion-v591 #serviceOverlay.sw-glass :is(.sw-sheet__step, .sw-sheet__close) { background: rgba(255, 255, 255, .08) !important; border: 0 !important; color: #fff !important; }
	.sw-motion-v591 #serviceOverlay.sw-glass .sw-sheet__media { height: min(46vh, 360px); margin: 0 10px !important; border-radius: 22px; }
	.sw-motion-v591 #serviceOverlay.sw-glass .modalbody { padding: 22px 18px 24px !important; }
	.sw-glass__title { left: 20px; bottom: 18px; font-size: clamp(48px, 15vw, 68px); }
	html body #serviceOverlay.sw-glass .modalintro { font-size: 17px; }
	html body #serviceOverlay.sw-glass .chips.is-package { columns: 1; padding: 16px 16px 2px; }
	.sw-glass__seg button { padding: 10px 4px; font-size: 13px; }
	.sw-glass__detail { padding: 18px; }
	.sw-glass__detail-head b { font-size: 22px; }
	.sw-motion-v591 #serviceOverlay.sw-glass .service-modal-footer { padding: 12px 18px max(12px, env(safe-area-inset-bottom)) !important; background: rgba(20, 20, 22, .92) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
	html body #serviceOverlay.sw-glass .service-modal-footer > div:not(.sw-modal-actions) { display: none; }
	.sw-motion-v591 #serviceOverlay.sw-glass #sheetCount b { display: none; } /* the name is already on the photo */
}

@media (prefers-reduced-motion: reduce) {
	html body #serviceOverlay.sw-glass .sw-sheet__panel { transform: translate3d(-50%, -50%, 0); }
	.sw-glass__seg > i, .sw-glass__detail > div { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
	html body #serviceOverlay.sw-glass .sw-sheet__panel { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
	html body #serviceOverlay.sw-glass .sw-sheet__panel { background: #18181b; -webkit-backdrop-filter: none; backdrop-filter: none; }
	html body #serviceOverlay.sw-glass.open .sw-sheet__backdrop { background: rgba(6, 6, 8, .8); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 7.9.64 service video in the sheet: fills the photo area like the picture */
#serviceOverlay .sw-sheet__video { object-fit: cover; background: #000; }
#serviceOverlay .sw-sheet__image[hidden] { display: none !important; }

/* 7.9.64 what and where, above the intro (the H1 of a service URL) */
html body #serviceOverlay.sw-glass .sw-sheet__seo { margin: 0 150px 10px 0; color: var(--red, #e20816); font: 700 11px/1.4 var(--glass-mono); letter-spacing: .1em; text-transform: uppercase; }
html body #serviceOverlay.sw-glass .sw-sheet__seo:empty { display: none; }
@media (max-width: 860px) { html body #serviceOverlay.sw-glass .sw-sheet__seo { margin-right: 0; } }

/* 7.9.65 the service's own text: label like the other sections, body in the reading size */
html body #serviceOverlay.sw-glass .service-about[hidden] { display: none; }
html body #serviceOverlay.sw-glass .service-about__title { margin: 0 0 10px; color: var(--sheet-faint); font: 400 11px/1.3 var(--glass-mono); letter-spacing: .08em; text-transform: uppercase; }
html body #serviceOverlay.sw-glass .service-about__text p { margin: 0; color: var(--sheet-muted); font-size: 15px; line-height: 1.6; max-width: 40em; }
html body #serviceOverlay.sw-glass .service-about__text p + p { margin-top: 10px; }