/*
	Headshot Fotózás
	https://headshotfotozas.hu
*/



/*
  ░██████                 ░██
 ░██   ░██                ░██
░██          ░███████  ░████████ ░██    ░██ ░████████
 ░████████  ░██    ░██    ░██    ░██    ░██ ░██    ░██
        ░██ ░█████████    ░██    ░██    ░██ ░██    ░██
 ░██   ░██  ░██           ░██    ░██   ░███ ░███   ░██
  ░██████    ░███████      ░████  ░█████░██ ░██░█████
                                            ░██
                                            ░██
SETUP
*/

/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }



/* Variables */

:root {
	--sans: 'Commissioner', sans-serif;

	/* Core palette */

	--navy-950: #07111F;
	--navy-900: #0B1728;
	--navy-850: #0F1F33;
	--navy-800: #142A44;
	--navy-700: #1E3A5F;

	--blue-700: #1457D9;
	--blue-600: #2563EB;
	--blue-500: #3B82F6;
	--blue-400: #60A5FA;
	--blue-300: #93C5FD;
	--blue-100: #DBEAFE;
	--blue-50: #EFF6FF;

	--sky-100: #E0F2FE;
	--sky-50: #F0F9FF;

	--cream-100: #FFF8EC;
	--cream-50: #FFFCF7;

	--gold-500: #F6B93B;
	--gold-400: #FBD38D;
	--gold-100: #FFF3D6;

	--green-600: #059669;
	--green-100: #DCFCE7;

	--red-500: #EF4444;
	--red-100: #FEE2E2;

	/* Semantic colors */

	--bg: #F7FAFF;
	--bg-soft: #EEF5FF;
	--bg-warm: #FFFCF7;
	--bg-dark: var(--navy-950);

	--surface: rgba(255, 255, 255, .78);
	--surface-soft: rgba(255, 255, 255, .56);
	--surface-toggle: rgba(255, 255, 255, .68);
	--surface-input: rgba(255, 255, 255, .82);
	--surface-faq-content: rgba(255, 255, 255, .42);

	--surface-strong: #FFFFFF;
	--surface-blue: rgba(239, 246, 255, .76);
	--surface-dark: rgba(7, 17, 31, .92);

	--surface-overlay-modal: rgba(0, 0, 0, .75);
	--surface-overlay-lightbox: rgba(0, 0, 0, .9);

	--text: #26344D;
	--text-dark: #0F172A;
	--text-light: #64748B;
	--text-muted: #8A97AA;
	--text-on-dark: #F8FAFC;
	--text-on-dark-muted: #CBD5E1;

	--primary: var(--blue-600);
	--primary-hover: var(--blue-700);
	--primary-soft: var(--blue-50);

	--accent: var(--gold-500);
	--accent-soft: var(--gold-100);

	--success: var(--green-600);
	--success-soft: var(--green-100);

	--danger: var(--red-500);
	--danger-soft: var(--red-100);

	/* Borders */

	--border: rgba(15, 23, 42, .10);
	--border-strong: rgba(15, 23, 42, .16);
	--border-light: rgba(255, 255, 255, .72);
	--border-blue: rgba(37, 99, 235, .18);
	--border-dark: rgba(255, 255, 255, .12);

	--border-link-soft: rgba(37, 99, 235, .24);
	--border-browser: rgba(15, 23, 42, .10);
	--border-browser-bar: rgba(15, 23, 42, .08);

	/* Gradients */

	--gradient-hero:
		radial-gradient(circle at 82% 18%, rgba(96, 165, 250, .28), transparent 32rem),
		radial-gradient(circle at 16% 6%, rgba(251, 211, 141, .18), transparent 28rem),
		linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,246,255,.72));

	--gradient-dark:
		radial-gradient(circle at 88% 12%, rgba(96, 165, 250, .22), transparent 32rem),
		radial-gradient(circle at 14% 92%, rgba(251, 185, 59, .14), transparent 28rem),
		linear-gradient(135deg, #07111F 0%, #0B1728 48%, #10243A 100%);

	--gradient-gold:
		linear-gradient(135deg, #FBD38D 0%, #F6B93B 100%);

	/* Surfaces */

	--surface-card-blue:
		radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .14), transparent 18rem),
		linear-gradient(135deg, rgba(255, 255, 255, .92) 0%, rgba(239, 246, 255, .68) 100%);

	--surface-card-blue-soft:
		radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .10), transparent 18rem),
		linear-gradient(135deg, rgba(255, 255, 255, .90) 0%, rgba(239, 246, 255, .58) 100%);

	--surface-card-clean:
		linear-gradient(135deg, rgba(255, 255, 255, .88) 0%, rgba(239, 246, 255, .54) 100%);

	--surface-card-strong:
		radial-gradient(circle at 12% 0%, rgba(96, 165, 250, .18), transparent 26rem),
		radial-gradient(circle at 100% 100%, rgba(251, 211, 141, .18), transparent 28rem),
		linear-gradient(135deg, rgba(255, 255, 255, .94) 0%, rgba(239, 246, 255, .72) 100%);

	--surface-card-warm:
		radial-gradient(circle at 100% 0%, rgba(251, 211, 141, .16), transparent 26rem),
		rgba(255, 255, 255, .38);

	--surface-button:
		radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .26), transparent 34%),
		linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);

	--surface-button-hover:
		radial-gradient(circle at 72% 12%, rgba(255, 255, 255, .28), transparent 30%),
		linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 46%, var(--blue-700) 100%);

	--surface-hero-image:
		radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .78), transparent 34%),
		linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(219, 234, 254, .72));

	--surface-hero-image-highlight:
		linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 16%),
		radial-gradient(circle at 82% 14%, rgba(255, 255, 255, .18), transparent 22%);

	--surface-about:
		radial-gradient(circle at 8% 0%, rgba(96, 165, 250, .14), transparent 22rem),
		linear-gradient(135deg, rgba(255, 255, 255, .86) 0%, rgba(239, 246, 255, .68) 100%);

	--surface-companies:
		radial-gradient(circle at 88% 18%, rgba(96, 165, 250, .14), transparent 34rem),
		linear-gradient(180deg, rgba(239, 246, 255, .56) 0%, rgba(255, 255, 255, 1) 100%);

	--surface-contact:
		radial-gradient(circle at 16% 16%, rgba(96, 165, 250, .14), transparent 34rem),
		radial-gradient(circle at 88% 82%, rgba(251, 211, 141, .14), transparent 34rem),
		linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 246, 255, .76) 100%);

	--surface-modal:
		radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .12), transparent 28rem),
		linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(239,246,255,.84) 100%);

	--surface-highlight:
		linear-gradient(180deg, rgba(255, 255, 255, .72), transparent 42%);

	--surface-badge-blue:
		radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .22), transparent 34%),
		linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);

	--surface-browser:
		linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(239, 246, 255, .72) 100%);

	--surface-browser-bar:
		linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(239, 246, 255, .86) 100%);

	/* Shadows */

	--shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
	--shadow-sm: 0 8px 24px rgba(15, 23, 42, .08);
	--shadow-md: 0 18px 50px rgba(15, 23, 42, .12);
	--shadow-lg: 0 28px 80px rgba(15, 23, 42, .16);

	--shadow-blue: 0 18px 42px rgba(37, 99, 235, .22);
	--shadow-blue-soft: 0 12px 24px rgba(37, 99, 235, .18);
	--shadow-blue-button: 0 16px 38px rgba(37, 99, 235, .22);
	--shadow-blue-button-hover: 0 18px 44px rgba(37, 99, 235, .26);
	--shadow-blue-tiny: 0 8px 18px rgba(37, 99, 235, .18);

	--shadow-gold: 0 18px 42px rgba(246, 185, 59, .24);

	--shadow-portrait: 0 12px 28px rgba(15, 23, 42, .16);
	--shadow-portrait-soft: 0 12px 28px rgba(15, 23, 42, .14);
	--shadow-image: 0 18px 42px rgba(15, 23, 42, .12);

	--shadow-hero-image: 0 28px 70px rgba(15, 23, 42, .16), var(--shadow-inner-light);

	--shadow-inner-light: inset 0 1px 0 rgba(255, 255, 255, .82);
	--shadow-inner-button: inset 0 1px 0 rgba(255, 255, 255, .34);
	--shadow-inner-button-hover: inset 0 1px 0 rgba(255, 255, 255, .40);
	--shadow-inner-frame:
		inset 0 1px 0 rgba(255, 255, 255, .42),
		inset 0 -1px 0 rgba(15, 23, 42, .08);

	--shadow-focus:
		0 0 0 4px rgba(37, 99, 235, .12),
		var(--shadow-xs);

	/* Radius */

	--radius-sm: .7rem;
	--radius-md: 1.2rem;
	--radius-lg: 1.8rem;
	--radius-xl: 2.4rem;
	--radius-pill: 99rem;

	/* Layout */

	--container: 140rem;
	--section-gap-mobile: 4rem;
	--section-gap-desktop: 8rem;
}



/* Webfonts */

@font-face {
	font-family: 'Commissioner';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/assets/webfonts/commissioner-v24-latin-ext-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Commissioner';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/webfonts/commissioner-v24-latin-ext-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Commissioner';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('/assets/webfonts/commissioner-v24-latin-ext-800.woff2') format('woff2');
}

@font-face {
	font-family: 'Font Awesome 7 Solid';
	font-display: swap;
	font-style: normal;
	font-weight: 900;
	src: url('/assets/webfonts/fa7-solid.woff2') format('woff2');
}



/* FontAwesome Icon Subset */

.fas {
	font-family: 'Font Awesome 7 Solid';
	font-weight: 900;
	line-height: 1;
}

.fa-caret-left::before { content: "\f0d9"; }
.fa-caret-right::before { content: "\f0da"; }
.fa-check-circle::before { content: "\f058"; }
.fa-info-circle::before { content: "\f05a"; }
.fa-star::before { content: "\f005"; }
.fa-xmark::before { content: "\f00d"; }



/*
░████████
░██    ░██
░██    ░██   ░██████    ░███████   ░███████
░████████         ░██  ░██        ░██    ░██
░██     ░██  ░███████   ░███████  ░█████████
░██     ░██ ░██   ░██         ░██ ░██
░█████████   ░█████░██  ░███████   ░███████
BASE
*/

/* Base */

html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: initial; }
}

::selection {
	color: var(--text-on-dark);
	background-color: var(--primary);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0 auto;
	font-family: var(--sans);
	font-weight: 300;
	color: var(--text);
	letter-spacing: -.0125rem;
	border-top: .8rem solid var(--accent);
}

@media only screen and (max-width: 575.98px) {
	body {
		font-size: 1.6rem;
		line-height: 1.5;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	body {
		font-size: 1.8rem;
		line-height: 1.625;
	}
}

@media only screen and (min-width: 768px) {
	body {
		font-size: 2rem;
		line-height: 1.75;
	}
}

img {
	max-width: 100%;
	height: auto;
}

.main {
	flex-grow: 1;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 575.98px) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	.container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.container {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}



/* Sections */

.section {
	position: relative;
}

@media only screen and (max-width: 767.98px) {
	.section {
		padding-top: var(--section-gap-mobile);
		padding-bottom: var(--section-gap-mobile);
	}
}

@media only screen and (min-width: 768px) {
	.section {
		padding-top: var(--section-gap-desktop);
		padding-bottom: var(--section-gap-desktop);
	}
}

.section__title {
	max-width: 92rem;
	margin-top: 0;
	color: var(--text-dark);
	text-wrap: balance;
}



/*
░██████████
    ░██
    ░██    ░██    ░██ ░████████   ░███████
    ░██    ░██    ░██ ░██    ░██ ░██    ░██
    ░██    ░██    ░██ ░██    ░██ ░██    ░██
    ░██    ░██   ░███ ░███   ░██ ░██    ░██
    ░██     ░█████░██ ░██░█████   ░███████
                  ░██ ░██
            ░███████  ░██
*/

/* Typography */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
	font-weight: 700;
	color: var(--text-dark);
}

h1, .h1 {
	line-height: 1.4;
}

@media only screen and (max-width: 575.98px) {
	h1, .h1 {
		margin-bottom: 3rem;
		font-size: 3rem;
		letter-spacing: -1.5px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	h1, .h1 {
		margin-bottom: 4rem;
		font-size: 4rem;
		letter-spacing: -2px;
	}
}

@media only screen and (min-width: 768px) {
	h1, .h1 {
		margin-bottom: 5rem;
		font-size: 5rem;
		letter-spacing: -2.5px;
	}
}

h2, .h2 {
	margin-bottom: 4rem;
	line-height: 1.4;
}

@media only screen and (max-width: 575.98px) {
	h2, .h2 {
		margin-top: 2.5rem;
		font-size: 2.5rem;
		letter-spacing: -1.25px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	h2, .h2 {
		margin-top: 3rem;
		font-size: 3rem;
		letter-spacing: -1.5px;
	}
}

@media only screen and (min-width: 768px) {
	h2, .h2 {
		margin-top: 4rem;
		font-size: 4rem;
		letter-spacing: -2px;
	}
}

h3, .h3 {
	margin-bottom: 3rem;
	line-height: 1.4;
}

@media only screen and (max-width: 575.98px) {
	h3, .h3 {
		margin-top: 1.5rem;
		font-size: 2rem;
		letter-spacing: -1px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	h3, .h3 {
		margin-top: 2rem;
		font-size: 2.5rem;
		letter-spacing: -1.25px;
	}
}

@media only screen and (min-width: 768px) {
	h3, .h3 {
		margin-top: 2.5rem;
		font-size: 3rem;
		letter-spacing: -1.5px;
	}
}

h4, .h4 {
	margin-bottom: 2rem;
	line-height: 1.4;
}

@media only screen and (max-width: 575.98px) {
	h4, .h4 {
		margin-top: 1rem;
		font-size: 1.8rem;
		letter-spacing: -.9px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	h4, .h4 {
		margin-top: 1.5rem;
		font-size: 2.25rem;
		letter-spacing: -1.125px;
	}
}

@media only screen and (min-width: 768px) {
	h4, .h4 {
		margin-top: 2rem;
		font-size: 2.5rem;
		letter-spacing: -1.25px;
	}
}

p,
ul,
ol {
	margin-bottom: 2rem;
}

li {
	margin-bottom: 1rem;
}

.list {
	margin-left: 2rem;
}

ul.list {
	list-style-type: disc;
}

ol.list {
	list-style-type: decimal;
}

a {
	cursor: pointer;
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px dashed rgba(37, 99, 235, .28);
	transition:
		.25s color,
		.25s border-color,
		.25s background-color;
}

a:hover,
a:focus {
	color: var(--primary-hover);
	border-bottom-color: rgba(20, 87, 217, .48);
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

small {
	font-size: 82.5%;
}

del {
	color: var(--text-dark);
}

ins {
	color: var(--accent);
}

hr {
	margin: 5rem 0;
	border: 0;
	border-bottom: 1px solid var(--bg-dark);
}

figcaption {
	font-style: italic;
	font-size: 1.6rem;
	color: var(--text);
	letter-spacing: 0;
	text-align: center;
}

.text-center { text-align: center; }

.text-dark { color: var(--text-dark); }
.text-light { color: var(--text-light); }
.text-red { color: var(--danger); }
.text-green { color: var(--success); }
.text-yellow { color: var(--accent); }

.uppercase { text-transform: uppercase; }



/*
  ░██████
 ░██   ░██
░██         ░███████  ░█████████████  ░████████
░██        ░██    ░██ ░██   ░██   ░██ ░██    ░██
░██        ░██    ░██ ░██   ░██   ░██ ░██    ░██
 ░██   ░██ ░██    ░██ ░██   ░██   ░██ ░███   ░██
  ░██████   ░███████  ░██   ░██   ░██ ░██░█████
                                      ░██
                                      ░██
COMPONENTS
*/

/* Buttons */

.btn-container {
	text-align: center;
}

@media only screen and (max-width: 767.98px) {
	.btn-container {
		margin-top: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.btn-container {
		margin-top: 5rem;
	}
}

.btn {
	cursor: pointer;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	padding: 1.5rem 3.5rem;
	font: inherit;
	font-weight: 700;
	color: var(--text-on-dark);
	letter-spacing: -.5px;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: var(--radius-pill);
	background: var(--surface-button);
	box-shadow:
		var(--shadow-inner-button),
		var(--shadow-blue-button);
	transition:
		color .25s ease,
		border-color .25s ease,
		box-shadow .35s ease,
		transform .25s ease;
}

.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: var(--surface-button-hover);
	transition: opacity .35s ease;
}

.btn:hover,
.btn:focus {
	color: var(--text-on-dark);
	border-color: rgba(255, 255, 255, .56);
	box-shadow:
		var(--shadow-inner-button-hover),
		var(--shadow-blue-button-hover);
	transform: translateY(-1px);
}

.btn:hover::before,
.btn:focus::before {
	opacity: 1;
}

.btn--full {
	width: 100%;
}

.btn--secondary {
	color: var(--text-dark);
	background: var(--gradient-gold);
	box-shadow:
		var(--shadow-gold),
		var(--shadow-inner-light);
}

.cta-note {
	display: block;
	margin-top: 1rem;
	font-size: 1.6rem;
	border-bottom: 0;
	color: var(--text-light);
}



/* Forms */

.form {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xl);
	background: var(--surface-card-blue);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(18px);
}

.form::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--surface-highlight);
}

.form__content {
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 767.98px) {
	.form {
		padding: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.form {
		padding: 3rem;
	}
}

.form__group {
	margin-bottom: 1.6rem;
}

.form__label {
	display: block;
	margin-bottom: .6rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-dark);
}

.form__asterisk {
	font-weight: 700;
	color: var(--danger);
}

.form__input {
	width: 100%;
	padding: 1.2rem 1.4rem;
	font: inherit;
	color: var(--text-dark);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-input);
	box-shadow: var(--shadow-xs);
	transition:
		.2s border-color,
		.2s box-shadow,
		.2s background-color;
}

.form__input:focus {
	outline: 0;
	border-color: rgba(37, 99, 235, .55);
	background-color: #FFFFFF;
	box-shadow: var(--shadow-focus);
}

.form__input::placeholder {
	color: var(--text-muted);
}

.form__disclaimer {
	margin-top: 2rem;
	line-height: 1.5;
	color: var(--text-light);
}

.form__button {
	margin-top: 1.5rem;
}



/* Cards */

.card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--surface-card-blue);
	box-shadow: var(--shadow-sm);
}

.card--soft {
	background: var(--surface-card-clean);
	box-shadow: var(--shadow-xs);
}

.card--strong {
	border-radius: var(--radius-xl);
	background: var(--surface-card-strong);
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(18px);
}

.card--blue-soft {
	background: var(--surface-card-blue-soft);
	box-shadow: var(--shadow-xs);
}



/*
  ░██████                            ░██    ░██
 ░██   ░██                           ░██
░██          ░███████   ░███████  ░████████ ░██ ░███████  ░████████   ░███████
 ░████████  ░██    ░██ ░██    ░██    ░██    ░██░██    ░██ ░██    ░██ ░██
        ░██ ░█████████ ░██           ░██    ░██░██    ░██ ░██    ░██  ░███████
 ░██   ░██  ░██        ░██    ░██    ░██    ░██░██    ░██ ░██    ░██        ░██
  ░██████    ░███████   ░███████      ░████ ░██ ░███████  ░██    ░██  ░███████
SECTIONS
*/

/* Hero */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--gradient-hero);
}

.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12rem;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, rgba(239, 246, 255, .82) 100%);
}

.hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: center;
	gap: 3rem;
}

.hero__content {
	display: grid;
	max-width: 72rem;
}

@media only screen and (max-width: 767.98px) {
	.hero__content {
		justify-items: center;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

@media only screen and (min-width: 768px) {
	.hero__content {
		justify-items: start;
		margin-left: 0;
		margin-right: 0;
		text-align: left;
	}
}

.hero__lead {
	max-width: 64rem;
	color: var(--text);
	text-wrap: balance;
}

.hero__visual {
	position: relative;
	margin: 0 auto;
	padding: 1rem;
}

@media only screen and (max-width: 767.98px) {
	.hero__visual {
		width: min(100%, 24rem);
	}
}

@media only screen and (min-width: 768px) {
	.hero__visual {
		width: min(100%, 34rem);
	}
}

.hero__visual::before,
.hero__visual::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	border-radius: 50%;
}

.hero__visual::before {
	inset: 7% -4% 10% 8%;
	background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 68%);
	filter: blur(.2rem);
}

.hero__visual::after {
	background: radial-gradient(circle, rgba(246, 185, 59, .22), transparent 68%);
}

@media only screen and (max-width: 767.98px) {
	.hero__visual::after {
		right: -4rem;
		bottom: 4rem;
		width: 20rem;
		height: 20rem;
	}
}

@media only screen and (min-width: 768px) {
	.hero__visual::after {
		right: -6rem;
		bottom: 5rem;
		width: 28rem;
		height: 28rem;
	}
}

.hero__image-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--border-light);
	border-radius: 38% 62% 44% 56% / 42% 38% 62% 58%;
	background: var(--surface-hero-image);
	box-shadow: var(--shadow-hero-image);
	transform: rotate(-1.5deg);
}

.hero__image-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--surface-hero-image-highlight);
}

.hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 10%;
}

.hero__lead-line {
	display: inline;
}

@media only screen and (min-width: 576px) {
	.hero__grid {
		gap: 4rem;
	}

	.hero__visual {
		width: min(82%, 42rem);
	}

	.hero__lead-line {
		display: block;
	}
}

@media only screen and (min-width: 768px) {
	.hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(28rem, .62fr);
		gap: 5rem;
	}

	.hero__visual {
		width: 100%;
		max-width: 44rem;
	}

	.hero__image-card {
		transform: rotate(1.5deg);
	}
}

@media only screen and (min-width: 992px) {
	.hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(34rem, .72fr);
		gap: 7rem;
	}

	.hero__visual {
		max-width: 48rem;
	}
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	margin-bottom: 2rem;
	padding: .8rem 1.4rem;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: .08em;
	border: 1px solid var(--border-blue);
	border-radius: var(--radius-sm);
	background: var(--surface-toggle);
	box-shadow: var(--shadow-xs);
	backdrop-filter: blur(14px);
}

.title {
	max-width: 96rem;
	line-height: 1.2;
}

@media only screen and (min-width: 768px) {
	.title {
		margin-top: 3rem;
	}
}

.title__strong {
	display: block;
	margin-bottom: 1.2rem;
	font-weight: 800;
	color: var(--text-dark);
	text-transform: uppercase;
	text-wrap: balance;
}

@media only screen and (min-width: 768px) {
	.title__strong {
		font-size: clamp(5.4rem, 7vw, 8.8rem);
		letter-spacing: -.055em;
	}
}

.title__span {
	display: block;
	font-weight: 700;
	font-size: 58%;
	line-height: 1.16;
	letter-spacing: -1px;
	color: var(--primary);
	text-wrap: balance;
}

@media only screen and (min-width: 768px) {
	.title__span {
		font-size: clamp(2.8rem, 3.1vw, 4rem);
	}
}



/* About */

.about {
	position: relative;
	margin-top: 5rem;
}

.about__grid {
	display: block;
	margin-top: 0;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xl);
	background: var(--surface-about);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(18px);
}

.about__summary {
	cursor: pointer;
	display: grid;
	align-items: center;
	list-style: none;
	position: relative;
}

@media only screen and (max-width: 575.98px) {
	.about__summary {
		grid-template-columns: 7.2rem 1fr;
		grid-gap: 0 1.6rem;
		padding: 1.6rem 6rem 1.6rem 1.6rem;
	}
}

@media only screen and (min-width: 576px) {
	.about__summary {
		grid-template-columns: 8.8rem 1fr;
		grid-gap: 0 2rem;
		padding: 2rem 7rem 2rem 2.4rem;
	}
}

@media only screen and (min-width: 992px) {
	.about__summary {
		padding: 2.4rem 7rem 2.4rem 3rem;
	}
}

.about__summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 2.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	font-weight: 800;
	color: var(--primary);
	border: 1px solid var(--border-blue);
	border-radius: var(--radius-pill);
	background: var(--surface-toggle);
	transform: translateY(-50%);
}

@media only screen and (max-width: 575.98px) {
	.about__summary::after {
		right: 1.6rem;
		width: 2.8rem;
		height: 2.8rem;
	}
}

.about__grid[open] .about__summary::after {
	content: "–";
}

.about__summary::-webkit-details-marker {
	display: none;
}

.about__summary::marker {
	content: "";
}

.about__image {
	grid-row: 1 / 3;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, .86);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-portrait);
}

.about__title {
	align-self: end;
	margin: 0 0 .35rem;
	color: var(--text-dark);
}

.about__text {
	align-self: start;
	margin-bottom: 0;
	color: var(--text);
}

@media only screen and (max-width: 575.98px) {
	.about__text {
		font-size: 1.4rem;
		line-height: 1.45;
	}
}

.about__content {
	display: grid;
	grid-gap: 2rem;
	border-top: 1px solid var(--border);
	border-left: 0;
	background: var(--surface-card-warm);
}

@media only screen and (max-width: 767.98px) {
	.about__content {
		padding: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.about__content {
		padding: 3rem;
	}
}

@media only screen and (min-width: 992px) {
	.about__content {
		grid-template-columns: 7fr 3fr;
		grid-gap: 5rem;
		align-items: center;
	}
}

.about__body {
	max-width: 78rem;
}

.about__content-image {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}



/* Examples */

.examples {
	display: grid;
}

@media only screen and (max-width: 767.98px) {
	.examples {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1.6rem;
		margin-top: 2.4rem;
		margin-bottom: 3.2rem;
	}
}

@media only screen and (min-width: 768px) {
	.examples {
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 2.4rem;
		margin-top: 4rem;
		margin-bottom: 5rem;
	}
}

.example {
	padding: .8rem;
}

.example::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background: var(--surface-highlight);
}

.example__picture,
.example__image,
.example__caption {
	position: relative;
	z-index: 1;
}

.example__image {
	display: block;
	width: 100%;
	border: 1px solid rgba(15, 23, 42, .08);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-xs);
}

.example__caption {
	margin-top: .9rem;
	padding: .7rem .8rem;
	font-style: normal;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--text-dark);
	text-align: center;
}



/* Process */

.process {
	counter-reset: process;
	display: grid;
	gap: 1.4rem;
	margin-left: 0;
}

.step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.8rem;
	align-items: start;
	margin-bottom: 0;
	padding: 2rem;
}

.step::before {
	counter-increment: process;
	content: counter(process);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 4rem;
	margin-top: .2rem;
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--text-on-dark);
	line-height: 1;
	border-radius: var(--radius-pill);
	background: var(--surface-badge-blue);
	box-shadow: var(--shadow-blue-soft);
}

.step__title,
.step__text {
	grid-column: 2;
}

.step__title {
	color: var(--text-dark);
}

@media only screen and (max-width: 767.98px) {
	.step__title {
		margin-top: .6rem;
	}
}

@media only screen and (min-width: 768px) {
	.step__title {
		margin-top: .4rem;
	}
}

.step__text {
	margin-bottom: 0;
	color: var(--text);
}

@media only screen and (max-width: 575.98px) {
	.step {
		grid-template-columns: 3.4rem 1fr;
		gap: 1.4rem;
		padding: 1.6rem;
	}

	.step::before {
		width: 3.4rem;
		height: 3.4rem;
		font-size: 1.5rem;
	}
}



/* Companies */

.companies {
	position: relative;
	overflow: hidden;
	background: var(--surface-companies);
}

.companies__grid {
	display: grid;
	align-items: center;
}

@media only screen and (max-width: 991.98px) {
	.companies__grid {
		grid-gap: 4rem;
	}
}

@media only screen and (min-width: 992px) {
	.companies__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
	.companies__grid {
		grid-gap: 6rem;
	}
}

@media only screen and (min-width: 1200px) {
	.companies__grid {
		grid-gap: 10rem;
	}
}

.companies__mockup {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding-top: 3.6rem;
	border: 1px solid var(--border-browser);
	border-radius: var(--radius-lg);
	background: var(--surface-browser);
	box-shadow: var(--shadow-lg);
}

.companies__mockup::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3.6rem;
	border-bottom: 1px solid var(--border-browser-bar);
	background: var(--surface-browser-bar);
}

.companies__mockup::after {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 1.4rem;
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background: #EF4444;
	box-shadow:
		1.6rem 0 0 #F6B93B,
		3.2rem 0 0 #22C55E;
}

.companies__image {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.clients {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1rem;
	padding: 1rem;
}

.clients__logo {
	padding: 1rem;
	border: 1px solid rgba(15, 23, 42, .06);
	border-radius: var(--radius-md);
	background-color: #FFFFFF;
	box-shadow: var(--shadow-xs);
}

.clients__caption {
	grid-column: 1 / -1;
	color: var(--text-light);
}



/* Gallery */

.gallery {
	display: grid;
}

@media only screen and (max-width: 575.98px) {
	.gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1rem;
	}
}

@media only screen and (min-width: 576px) and (max-width: 991.98px) {
	.gallery {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 1.25rem;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1399.98px) {
	.gallery {
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 1.5rem;
	}
}

@media only screen and (min-width: 1400px) {
	.gallery {
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 2rem;
	}
}

.gallery__image {
	cursor: pointer;
	display: block;
	width: 100%;
	border: 1px solid rgba(15, 23, 42, .06);
	border-radius: var(--radius-sm);
	box-shadow: none;
	transition:
		.25s box-shadow,
		.25s transform,
		.25s filter;
}

.gallery__image:hover {
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}



/* Testimonials */

.quotes {
	display: grid;
}

@media only screen and (max-width: 767.98px) {
	.quotes {
		grid-gap: 1.6rem;
		margin-bottom: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.quotes {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2.4rem;
		margin-bottom: 5rem;
	}
}

.quote {
	display: grid;
}

.quote::before {
	content: "“";
	position: absolute;
	top: -1.8rem;
	right: 2rem;
	z-index: 0;
	font-size: 12rem;
	font-weight: 800;
	line-height: 1;
	color: rgba(37, 99, 235, .08);
	pointer-events: none;
}

@media only screen and (max-width: 575.98px) {
	.quote {
		grid-template-columns: 8.8rem 1fr;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	.quote {
		grid-template-columns: 11rem 1fr;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1199.98px) {
	.quote {
		grid-template-columns: 1fr;
	}
}

@media only screen and (min-width: 1200px) {
	.quote {
		grid-template-columns: 14rem 1fr;
	}
}

.quote__photo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-right: 1px solid rgba(15, 23, 42, .08);
}

@media only screen and (max-width: 767.98px) {
	.quote__photo {
		min-height: 100%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1199.98px) {
	.quote__photo {
		width: 8.8rem;
		height: 8.8rem;
		margin: 2.4rem 2.4rem 0;
		border: 3px solid rgba(255, 255, 255, .88);
		border-radius: var(--radius-pill);
		box-shadow: var(--shadow-portrait-soft);
	}
}

.quote__content {
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 767.98px) {
	.quote__content {
		padding: 1.6rem;
	}
}

@media only screen and (min-width: 768px) {
	.quote__content {
		padding: 2.4rem;
	}
}

.quote__text {
	margin-bottom: 1.6rem;
	color: var(--text);
}

@media only screen and (min-width: 768px) {
	.quote__text {
		font-size: 1.7rem;
		line-height: 1.65;
	}
}

.quote__author {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-style: normal;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary);
}

.quote__author::before {
	content: "";
	display: inline-block;
	width: 1.6rem;
	height: 2px;
	border-radius: var(--radius-pill);
	background: currentColor;
}



/* Pricing */

.pricing {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 20%, rgba(96, 165, 250, .14), transparent 32rem),
		radial-gradient(circle at 88% 78%, rgba(251, 211, 141, .14), transparent 34rem),
		linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 246, 255, .78) 100%);
}

.price {
	font-weight: 800;
	line-height: 1;
	color: var(--primary);
	letter-spacing: -.055em;
}

@media only screen and (max-width: 767.98px) {
	.pricing__portrait {
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	.pricing__portrait {
		position: relative;
		isolation: isolate;
		margin: 0;
		padding: 1rem;
		border: 1px solid var(--border-light);
		border-radius: var(--radius-xl);
		background:
			radial-gradient(circle at 16% 8%, rgba(255, 255, 255, .88), transparent 36%),
			linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(239, 246, 255, .46) 100%);
		box-shadow: var(--shadow-lg);
		transform: rotate(1.25deg);
	}

	.pricing__portrait::before {
		content: "";
		position: absolute;
		inset: -2rem;
		z-index: -1;
		pointer-events: none;
		border-radius: inherit;
		background:
			radial-gradient(circle at 78% 18%, rgba(96, 165, 250, .12), transparent 28rem),
			radial-gradient(circle at 18% 82%, rgba(251, 211, 141, .08), transparent 24rem);
		filter: blur(4px);
	}

	.pricing__portrait::after {
		content: "";
		position: absolute;
		inset: 1rem;
		pointer-events: none;
		border-radius: calc(var(--radius-xl) - .7rem);
		box-shadow: var(--shadow-inner-frame);
	}

	.pricing__image {
		display: block;
		width: 100%;
		border: 1px solid rgba(15, 23, 42, .08);
		border-radius: calc(var(--radius-xl) - .7rem);
		box-shadow: var(--shadow-image);
		transform: rotate(-.35deg);
	}
}

@media only screen and (min-width: 768px) {
	.benefits {
		display: grid;
		grid-template-columns: minmax(0, 1.65fr) minmax(26rem, .85fr);
		grid-gap: 4rem;
		align-items: center;
	}
}

.benefits__content {
	position: relative;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.benefits__content::before {
	content: "";
	position: absolute;
	top: -4rem;
	left: -4rem;
	z-index: -1;
	width: 32rem;
	height: 32rem;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(96, 165, 250, .10), transparent 68%);
}

.benefits__list {
	margin-bottom: 0;
}

.benefits__item {
	margin-bottom: 2.4rem;
}

.benefits__item:last-child {
	margin-bottom: 0;
}

.benefits__title {
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--text-dark);
}

.benefits__sublist {
	list-style: none;
}

@media only screen and (max-width: 767.98px) {
	.benefits__sublist {
		margin-left: 0;
	}
}

.benefits__subitem {
	list-style: none;
	position: relative;
	margin-bottom: .8rem;
	padding-left: 2.8rem;
}

.benefits__subitem::before {
	content: "✓";
	position: absolute;
	top: .8rem;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--text-on-dark);
	border-radius: var(--radius-pill);
	background: var(--surface-badge-blue);
	box-shadow: var(--shadow-blue-tiny);
}

@media only screen and (max-width: 767.98px) {
	.pricing__card {
		margin-top: 4rem;
	}
}

@media only screen and (min-width: 768px) {
	.pricing__card {
		margin-top: 6rem;
	}
}

.pricing__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--surface-highlight);
}

.pricing__card-content {
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 767.98px) {
	.pricing__card {
		padding: 2.4rem;
	}
}

@media only screen and (min-width: 768px) {
	.pricing__card {
		padding: 4rem;
	}
}



/* FAQ */

.faq {
	margin-bottom: 1rem;
}

.faq__category {
	cursor: pointer;
	position: relative;
	padding: 2rem 5rem 2rem 2rem;
	font-weight: 700;
	color: var(--text-dark);
	list-style: none;
}

.faq__category::-webkit-details-marker {
	display: none;
}

.faq__category::marker {
	content: "";
}

.faq__category::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
	font-weight: 800;
	color: var(--primary);
	border: 1px solid var(--border-blue);
	border-radius: var(--radius-pill);
	background: var(--surface-toggle);
	transform: translateY(-50%);
}

.faq[open] .faq__category::after {
	content: "–";
}

.faq__content {
	padding: 2rem;
	border-top: 1px solid var(--border);
	background: var(--surface-faq-content);
}

.faq__topic {
	margin-bottom: 2.5rem;
}

@media only screen and (min-width: 768px) {
	.faq__topic {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-gap: 4rem;
	}
}

.faq__topic:last-of-type {
	margin-bottom: 0;
}

.faq__question {
	margin-bottom: 1rem;
	font-weight: 700;
	color: var(--text-dark);
}

@media only screen and (min-width: 768px) {
	.faq__question {
		text-align: right;
	}
}

.faq__answer:last-child {
	margin-bottom: 0;
}



/* Contact */

.contact {
	position: relative;
	overflow: hidden;
	background: var(--surface-contact);
}

.contact__grid {
	display: grid;
	grid-gap: 2rem;
}

@media only screen and (max-width: 767.98px) {
	.contact__grid {
		margin-top: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.contact__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
		grid-gap: 4rem;
		align-items: start;
		margin-top: 4rem;
	}
}

.contact__details {
	font-style: normal;
}

@media only screen and (max-width: 767.98px) {
	.contact__details {
		padding: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.contact__details {
		padding: 3rem;
	}
}

.contact__list {
	margin-bottom: 0;
}

.contact__item:last-child {
	margin-bottom: 0;
}

.contact__link {
	color: var(--primary);
	border-bottom-color: var(--border-link-soft);
}

.contact__link:hover,
.contact__link:focus {
	color: var(--primary-hover);
}



/*
░███     ░███ ░██
░████   ░████
░██░██ ░██░██ ░██ ░███████   ░███████
░██ ░████ ░██ ░██░██        ░██    ░██
░██  ░██  ░██ ░██ ░███████  ░██
░██       ░██ ░██       ░██ ░██    ░██
░██       ░██ ░██ ░███████   ░███████
MISC
*/

/* Footer */

.footer {
	margin-top: 0;
	padding-top: 3rem;
	padding-bottom: 3rem;
	color: var(--text-on-dark-muted);
	text-align: center;
	background: var(--gradient-dark);
}

.copyright {
	margin-bottom: 1rem;
}

.footer__link {
	padding: 1rem;
	color: var(--text-on-dark);
	border-bottom-color: rgba(255, 255, 255, .22);
}

.footer__link:hover,
.footer__link:focus {
	color: var(--accent);
	border-bottom-color: rgba(246, 185, 59, .42);
}



/* Modal */

body.modal-open {
	overflow: hidden;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 98;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	border: 0;
	background-color: var(--surface-overlay-modal);
	transition:
		opacity .3s ease,
		visibility .3s ease;
}

.modal--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.modal__content {
	overflow-y: auto;
	height: 100vh;
	max-width: 100rem;
	padding: 2rem;
	color: var(--text);
	border: 1px solid var(--border-light);
	background: var(--surface-modal);
	box-shadow: var(--shadow-lg);
}

@media only screen and (max-width: 767.98px) {
	.modal__content {
		padding: 2rem;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	.modal__content {
		padding: 3rem;
	}
}

@media only screen and (min-width: 992px) {
	.modal__content {
		height: 95vh;
		padding: 5rem;
	}
}

.modal__title {
	margin-top: 0;
}

.modal__close {
	cursor: pointer;
	position: fixed;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7rem;
	height: 7rem;
	font-size: 3rem;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--surface-strong);
	box-shadow: var(--shadow-sm);
}

.modal__close:hover,
.modal__close:focus {
	color: var(--danger);
}



/* Lightbox */

body.scroll-lock {
	overflow: hidden;
}

.lightbox__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	cursor: zoom-out;
}

.lightbox {
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	z-index: 99;
	opacity: 0;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--surface-overlay-lightbox);
	transition:
		opacity .3s ease,
		visibility .3s ease;
}

.lightbox--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.lightbox:not(.lightbox--active) {
	pointer-events: none;
}

.lightbox__container {
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 95vw;
	height: 95vh;
}

.lightbox__image {
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: opacity .4s ease;
	transform: translate(-50%, -50%);
}

.lightbox__image--prev,
.lightbox__image--next {
	z-index: 1;
}

.lightbox__image--current {
	opacity: 1;
	z-index: 2;
}

.lightbox__caption {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	text-align: center;
	color: var(--text-on-dark);
	z-index: 3;
}

.lightbox__arrow,
.lightbox__close {
	cursor: pointer;
	position: absolute;
	background: none;
	border: none;
	color: var(--text-on-dark);
	font-size: 4rem;
	z-index: 4;
	transition: color .25s;
}

.lightbox__arrow:hover,
.lightbox__arrow:focus {
	color: var(--accent);
}

.lightbox__close:hover,
.lightbox__close:focus {
	color: var(--danger);
}

.lightbox__arrow--prev,
.lightbox__arrow--next {
	top: 50%;
	transform: translateY(-50%);
}

@media only screen and (max-width: 479.98px) {
	.lightbox__arrow--prev { left: .5rem; }
	.lightbox__arrow--next { right: .5rem; }
}

@media only screen and (min-width: 480px) {
	.lightbox__arrow--prev { left: 1rem; }
	.lightbox__arrow--next { right: 1rem; }
}

.lightbox__close {
	top: 1rem;
	right: 1rem;
}



/* Utility Classes */

.hidden, [hidden] { display: none !important; }

.sr-only {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }