:root {
	--bg: #f5f5f5;
	--panel: #ffffff;
	--ink: #111111;
	--muted: #5c5c5c;
	--line: #d8d8d8;
	--accent: #2b2b2b;
	--radius: 18px;
	--shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	color: var(--ink);
	background:
		radial-gradient(circle at 12% 8%, #ffffff 0%, transparent 50%),
		radial-gradient(circle at 88% 18%, #e2e2e2 0%, transparent 40%),
		linear-gradient(180deg, #eeeeee 0%, var(--bg) 65%);
	line-height: 1.55;
}

body.js-preload .card,
body.js-preload footer {
	opacity: 0;
	transform: translateY(6px);
}

body.js-ready .card,
body.js-ready footer {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 420ms ease, transform 420ms ease;
}

.wrap {
	width: min(1000px, 92vw);
	margin: 0 auto;
	padding: 40px 0 52px;
}

.card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.top {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	align-items: center;
	padding: 26px;
	border-bottom: 1px solid var(--line);
	background: #fcfcfc;
}

.logo {
	width: 68px;
	height: 68px;
	border-radius: 16px;
	border: 1px solid #c9c9c9;
	display: grid;
	place-items: center;
	background: linear-gradient(145deg, #fdfdfd, #e8e8e8);
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #222;
	user-select: none;
}

.brand h1 {
	font-size: clamp(1.8rem, 4vw, 2.7rem);
	letter-spacing: 0.03em;
	line-height: 1.05;
}

.brand p {
	margin-top: 6px;
	color: var(--muted);
	font-size: 0.98rem;
}

.main {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 0;
}

.section {
	padding: 30px 26px;
}

.section h2 {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 14px;
	color: var(--accent);
}

.lead {
	font-size: 1.14rem;
	max-width: 40ch;
	margin-bottom: 20px;
}

.meta {
	display: grid;
	gap: 8px;
	color: var(--muted);
	font-size: 0.96rem;
}

.services {
	margin-top: 20px;
	display: grid;
	gap: 10px;
	list-style: none;
}

.services li {
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fafafa;
	font-size: 0.95rem;
}

.inquiry {
	border-left: 1px solid var(--line);
	background: linear-gradient(180deg, #fafafa 0%, #f1f1f1 100%);
	display: grid;
	align-content: center;
	gap: 16px;
}

.inquiry p {
	color: var(--muted);
	max-width: 30ch;
}

.email {
	display: inline-block;
	width: fit-content;
	text-decoration: none;
	color: #fff;
	background: #1b1b1b;
	border: 1px solid #111;
	padding: 10px 14px;
	border-radius: 999px;
	font-weight: 600;
	transition: transform 0.16s ease, background-color 0.16s ease;
}

.contact-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

/* From Uiverse.io by Galahhad */
.copy-email {
	--button-bg: #1b1b1b;
	--button-hover-bg: #2d2d2d;
	--button-text-color: #cccccc;
	--button-hover-text-color: #ffffff;
	--button-outline-width: 1px;
	--button-outline-color: #6f6f6f;
	--tooltip-bg: #f4f3f3;
	--tooltip-font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	--tooltip-font-size: 12px;
	--tooltip-text-color: #303030;
	--tooltip-padding-x: 8px;
	--tooltip-padding-y: 6px;
	--tooltip-offset: 8px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--button-text-color);
	background: var(--button-bg);
	border: 1px solid #111;
	height: 42px;
	width: 42px;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	outline: none;
	transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.icon-wrap {
	position: relative;
	width: 20px;
	height: 20px;
}

.copy-email svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.checkmark {
	display: none;
}

.tooltip {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	white-space: nowrap;
	font-family: var(--tooltip-font-family);
	font-size: var(--tooltip-font-size);
	color: var(--tooltip-text-color);
	background: var(--tooltip-bg);
	padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
	border-radius: 6px;
	pointer-events: none;
	transition: top 180ms ease, opacity 180ms ease, visibility 180ms ease;
}

.tooltip::before {
	content: attr(data-text-initial);
}

.tooltip::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 8px;
	height: 8px;
	background: inherit;
	transform: translateX(-50%) rotate(45deg);
}

.copy-email:hover .tooltip,
.copy-email:focus-visible .tooltip,
.copy-email.copied .tooltip {
	opacity: 1;
	visibility: visible;
	top: calc((100% + var(--tooltip-offset)) * -1);
}

.copy-email.copied .tooltip::before {
	content: attr(data-text-end);
}

.email:hover,
.email:focus-visible,
.copy-email:hover,
.copy-email:focus-visible {
	background: var(--button-hover-bg);
	color: var(--button-hover-text-color);
	transform: translateY(-1px);
}

.copy-email:active {
	outline: var(--button-outline-width) solid var(--button-outline-color);
}

.copy-email.copied {
	background: #3a3a3a;
	color: #ffffff;
}

.copy-email.copied .clipboard {
	display: none;
}

.copy-email.copied .checkmark {
	display: block;
}

.note {
	font-size: 0.84rem;
	color: #747474;
}

footer {
	text-align: center;
	margin-top: 18px;
	color: #6a6a6a;
	font-size: 0.84rem;
}

@media (max-width: 780px) {
	.top {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.main {
		grid-template-columns: 1fr;
	}

	.inquiry {
		border-left: 0;
		border-top: 1px solid var(--line);
	}

	.lead,
	.inquiry p {
		max-width: none;
	}

	.contact-actions {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.js-preload .card,
	body.js-preload footer,
	body.js-ready .card,
	body.js-ready footer {
		opacity: 1;
		transform: none;
		transition: none;
	}
}