/*
 * Egnatia Construction — obsidian blueprint theme.
 *
 * Near-black canvas, chalk type, hairline graphite borders, compass-gold
 * accents, a single white pill for primary actions. Weight 400 carries the
 * hierarchy. Ported from the React/Tailwind reference build into plain CSS.
 */

:root {
	--eg-radius: 0.5rem;
	--eg-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--eg-font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--eg-font-serif: "Instrument Serif", ui-serif, Georgia, serif;
	--eg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

	--eg-background: #101010;
	--eg-foreground: #f3f3f3;
	--eg-card: #141414;
	--eg-secondary: #1a1a1a;
	--eg-muted: #1a1a1a;
	--eg-muted-foreground: #9c9c9c;
	--eg-primary: #ffffff;
	--eg-primary-foreground: #101010;
	--eg-accent: #6f6759;
	--eg-destructive: #d96b5a;
	--eg-border: #212121;
	--eg-input: #2a2a2a;
	--eg-ring: #6f6759;

	--eg-container: 1200px;
	--eg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--eg-background);
	color: var(--eg-foreground);
	font-family: var(--eg-font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

::selection { background: var(--eg-accent); color: var(--eg-foreground); }

:focus-visible {
	outline: 2px solid var(--eg-accent);
	outline-offset: 3px;
}

.eg-container {
	width: 100%;
	max-width: var(--eg-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}
@media (min-width: 640px) { .eg-container { padding-inline: 2rem; } }

.eg-main { display: block; }

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

.eg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--eg-primary);
	color: var(--eg-primary-foreground);
	padding: 0.6rem 1rem;
	border-radius: var(--eg-radius);
}
.eg-skip:focus { left: 1rem; top: 0.75rem; }

/* ---------- Typography helpers ---------- */
.eg-display {
	font-family: var(--eg-font-heading);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.02;
}
.eg-serif-italic {
	font-family: var(--eg-font-serif);
	font-style: italic;
	font-weight: 400;
}
.eg-accent { color: var(--eg-accent); }
.eg-muted { color: var(--eg-muted-foreground); }

.eg-meta {
	font-family: var(--eg-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.6875rem;
	color: var(--eg-muted-foreground);
}

.eg-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--eg-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.6875rem;
	color: var(--eg-muted-foreground);
}
.eg-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	background: var(--eg-accent);
}

.eg-h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.eg-h3 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.eg-h2 span, .eg-h3 span { display: block; }

.eg-lead {
	color: var(--eg-muted-foreground);
	font-size: 1rem;
	line-height: 1.7;
	max-width: 34rem;
}

/* ---------- Sections ---------- */
.eg-section {
	border-top: 1px solid var(--eg-border);
	padding-block: 6rem;
}
@media (min-width: 640px) { .eg-section { padding-block: 8rem; } }

.eg-section-head {
	display: grid;
	gap: 2rem;
	margin-bottom: 3.5rem;
}
@media (min-width: 1024px) {
	.eg-section-head { grid-template-columns: 1.3fr 1fr; align-items: end; }
	.eg-section-head .eg-lead { margin-left: auto; }
}

.eg-split { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) {
	.eg-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 5rem; }
	.eg-split-head { position: sticky; top: 7rem; align-self: start; }
}

/* ---------- Buttons ---------- */
.eg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 9999px;
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.eg-btn-primary {
	background: var(--eg-primary);
	color: var(--eg-primary-foreground);
}
.eg-btn-primary:hover { opacity: 0.9; }
.eg-btn-ghost {
	background: transparent;
	border-color: var(--eg-border);
	color: var(--eg-foreground);
}
.eg-btn-ghost:hover { border-color: rgba(243, 243, 243, 0.4); }
.eg-btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; }

/* ---------- Atmosphere ---------- */
.eg-blueprint-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	pointer-events: none;
}

/* ---------- Reveal on scroll ---------- */
.eg-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s var(--eg-ease), transform 0.9s var(--eg-ease);
}
.eg-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eg-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Header ---------- */
.eg-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--eg-border);
	background: rgba(16, 16, 16, 0.82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.eg-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 4rem;
}
.eg-brand { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.eg-brand-name { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.eg-brand-sub { display: none; }
@media (min-width: 640px) { .eg-brand-sub { display: inline; } }

.eg-nav { display: none; }
@media (min-width: 1024px) { .eg-nav { display: block; } }
.eg-nav-list { display: flex; align-items: center; gap: 1.75rem; }
.eg-nav-list a {
	font-family: var(--eg-font-mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--eg-muted-foreground);
	transition: color 0.2s ease;
}
.eg-nav-list a:hover { color: var(--eg-foreground); }

.eg-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.eg-header-phone { display: none; }
@media (min-width: 1280px) { .eg-header-phone { display: inline-flex; } }
.eg-header-cta { display: none; }
@media (min-width: 640px) { .eg-header-cta { display: inline-flex; } }

.eg-lang {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--eg-border);
	border-radius: 9999px;
	padding: 0.125rem;
}
.eg-lang-btn {
	border-radius: 9999px;
	padding: 0.25rem 0.625rem;
	font-family: var(--eg-font-mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--eg-muted-foreground);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.eg-lang-btn:hover { color: var(--eg-foreground); }
.eg-lang-btn.is-active { background: var(--eg-primary); color: var(--eg-primary-foreground); }

.eg-menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--eg-border);
	border-radius: 9999px;
	background: transparent;
	cursor: pointer;
}
@media (min-width: 1024px) { .eg-menu-toggle { display: none; } }
.eg-menu-bar { display: block; width: 1rem; height: 1px; margin-inline: auto; background: var(--eg-foreground); }

.eg-mobile-menu {
	border-top: 1px solid var(--eg-border);
	background: var(--eg-background);
	padding: 1rem 1.25rem 1.5rem;
}
@media (min-width: 1024px) { .eg-mobile-menu { display: none !important; } }
.eg-mobile-list { display: flex; flex-direction: column; }
.eg-mobile-list a {
	border-bottom: 1px solid var(--eg-border);
	padding: 0.875rem 0;
	font-family: var(--eg-font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--eg-muted-foreground);
}
.eg-mobile-menu .eg-btn { margin-top: 1rem; width: 100%; }
.eg-mobile-phone { display: block; margin-top: 0.75rem; text-align: center; }

/* ---------- Hero ---------- */
.eg-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 92vh;
	overflow: hidden;
}
.eg-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.eg-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, var(--eg-background) 0%, rgba(16, 16, 16, 0.7) 45%, rgba(16, 16, 16, 0.3) 100%);
}
.eg-hero .eg-blueprint-grid { z-index: -1; opacity: 0.6; }
.eg-hero-inner { padding-block: 8rem 4rem; }
@media (min-width: 640px) { .eg-hero-inner { padding-block: 8rem 5rem; } }

.eg-hero-title {
	margin-top: 1.5rem;
	max-width: 60rem;
	font-size: clamp(3rem, 9vw, 7rem);
}
.eg-hero-title span { display: block; }
.eg-hero-body {
	margin-top: 1.75rem;
	max-width: 36rem;
	font-size: 1rem;
	color: rgba(243, 243, 243, 0.8);
}
@media (min-width: 640px) { .eg-hero-body { font-size: 1.125rem; } }
.eg-hero-ctas { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.eg-hero-stats {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2.5rem;
	border-top: 1px solid var(--eg-border);
	padding-top: 2rem;
}
.eg-stat { display: flex; flex-direction: column; gap: 0.375rem; }
.eg-stat-value { font-size: 1.875rem; }
@media (min-width: 640px) { .eg-stat-value { font-size: 2.25rem; } }
.eg-hero-badge { display: inline-flex; align-items: center; gap: 0.75rem; }
.eg-hero-badge:hover { color: var(--eg-foreground); }
.eg-hero-scroll {
	position: absolute;
	bottom: 1.5rem;
	right: 2rem;
	display: none;
}
@media (min-width: 640px) { .eg-hero-scroll { display: block; } }

/* ---------- Stars ---------- */
.eg-stars { position: relative; display: inline-flex; line-height: 0; }
.eg-stars-outline { display: flex; color: rgba(156, 156, 156, 0.4); }
.eg-stars-fill {
	position: absolute;
	inset: 0;
	display: flex;
	overflow: hidden;
	color: var(--eg-accent);
}
.eg-stars-fill .eg-star { flex-shrink: 0; fill: currentColor; }

/* ---------- Manifesto ---------- */
.eg-manifesto-text {
	margin-top: 2.5rem;
	max-width: 22ch;
	font-size: clamp(2rem, 5.2vw, 4.5rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

/* ---------- Services ---------- */
.eg-services-list { border-top: 1px solid var(--eg-border); }
.eg-service-row {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	border-bottom: 1px solid var(--eg-border);
	padding-block: 1.75rem;
	transition: background-color 0.2s ease;
}
.eg-service-row:hover { background: rgba(26, 26, 26, 0.4); }
.eg-service-num { color: var(--eg-accent); padding-top: 0.25rem; }
.eg-service-copy { flex: 1; }
.eg-service-title { display: block; font-size: 1.125rem; font-weight: 500; }
@media (min-width: 640px) { .eg-service-title { font-size: 1.25rem; } }
.eg-service-body {
	display: block;
	margin-top: 0.5rem;
	max-width: 32rem;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--eg-muted-foreground);
}
.eg-service-img {
	display: none;
	width: 7rem;
	height: 5rem;
	flex-shrink: 0;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	object-fit: cover;
	opacity: 0.7;
	transition: opacity 0.3s ease;
}
.eg-service-row:hover .eg-service-img { opacity: 1; }
@media (min-width: 640px) { .eg-service-img { display: block; } }

/* ---------- Work ---------- */
.eg-work-grid {
	display: grid;
	gap: 1rem;
}
@media (min-width: 640px) { .eg-work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eg-work-grid { grid-template-columns: repeat(3, 1fr); } }
.eg-work-card {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	padding: 0;
	background: var(--eg-card);
	cursor: pointer;
	text-align: left;
}
.eg-work-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.7s var(--eg-ease);
}
.eg-work-card:hover img { transform: scale(1.04); }
.eg-work-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 16, 16, 0.9), rgba(16, 16, 16, 0.1) 55%, transparent);
}
.eg-work-caption { position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem; }
.eg-work-title { display: block; margin-top: 0.375rem; font-size: 1.125rem; font-weight: 500; }

.eg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(16, 16, 16, 0.95);
	backdrop-filter: blur(4px);
}
.eg-lightbox[hidden] { display: none; }
.eg-lightbox-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--eg-border);
	border-radius: 9999px;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.eg-lightbox-close:hover { background: var(--eg-secondary); }
.eg-lightbox-inner { width: 100%; max-width: 56rem; }
.eg-lightbox-img {
	width: 100%;
	max-height: 72vh;
	object-fit: contain;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
}
.eg-lightbox-meta {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}
.eg-lightbox-title { margin-top: 0.25rem; font-size: 1.25rem; font-weight: 500; }

/* ---------- Reviews ---------- */
.eg-reviews-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
	.eg-reviews-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; }
}
.eg-rating-card {
	margin-top: 2rem;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-card);
	padding: 1.5rem;
}
.eg-rating-top { display: flex; align-items: center; gap: 1rem; }
.eg-rating-value { font-size: 3rem; }
.eg-rating-source { margin-top: 1.25rem; }
.eg-rating-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.eg-reviews-list { display: grid; gap: 1rem; }
@media (min-width: 640px) { .eg-reviews-list { grid-template-columns: repeat(2, 1fr); } }
.eg-review-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-card);
	padding: 1.5rem;
}
.eg-review-text {
	margin-top: 1rem;
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--eg-muted-foreground);
}
.eg-review-author { margin-top: 1.25rem; border-top: 1px solid var(--eg-border); padding-top: 1rem; }
.eg-review-name { display: block; font-size: 0.875rem; font-weight: 500; }
.eg-review-author .eg-meta { display: block; margin-top: 0.25rem; }

/* ---------- Process ---------- */
.eg-process-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
	.eg-process-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem; }
	.eg-process-media { position: sticky; top: 7rem; align-self: start; }
}
.eg-process-media {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
}
.eg-process-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.eg-process-scroll { position: absolute; bottom: 1rem; left: 1rem; }
.eg-process-step { border-bottom: 1px solid var(--eg-border); padding-block: 2rem; }
.eg-process-step:first-child { padding-top: 0; }
.eg-process-title { margin-top: 0.75rem; font-size: 1.25rem; font-weight: 500; }
@media (min-width: 640px) { .eg-process-title { font-size: 1.5rem; } }
.eg-process-body { margin-top: 0.75rem; max-width: 32rem; font-size: 0.875rem; line-height: 1.7; color: var(--eg-muted-foreground); }

/* ---------- Estimator ---------- */
.eg-estimator { background: #0b0b0b; }
.eg-estimator-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
	.eg-estimator-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3.5rem; }
}
.eg-estimator-controls { display: flex; flex-direction: column; gap: 2.5rem; }
.eg-fieldset { border: 0; padding: 0; margin: 0; }
.eg-fieldset legend { margin-bottom: 1rem; }
.eg-optional { text-transform: none; letter-spacing: normal; }
.eg-option-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .eg-option-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .eg-option-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.eg-option {
	display: block;
	width: 100%;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: transparent;
	padding: 1rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.eg-option:hover { border-color: rgba(243, 243, 243, 0.3); }
.eg-option[aria-pressed="true"] { border-color: var(--eg-accent); background: var(--eg-secondary); }
.eg-option-label { display: block; font-size: 0.875rem; font-weight: 500; }
.eg-option-blurb { display: block; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.6; color: var(--eg-muted-foreground); }

.eg-size-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.eg-size-value { font-family: var(--eg-font-mono); font-size: 0.875rem; }
.eg-size-bounds { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.625rem; }

input[type="range"].eg-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	background: var(--eg-border);
	border-radius: 9999px;
	outline: none;
}
input[type="range"].eg-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	background: #ffffff;
	border: 4px solid #101010;
	box-shadow: 0 0 0 1px #ffffff;
	cursor: pointer;
}
input[type="range"].eg-range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	background: #ffffff;
	border: 4px solid #101010;
	box-shadow: 0 0 0 1px #ffffff;
	cursor: pointer;
}

.eg-addons { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.eg-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--eg-border);
	border-radius: 9999px;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	color: var(--eg-muted-foreground);
	background: transparent;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.eg-chip:hover { border-color: rgba(243, 243, 243, 0.3); }
.eg-chip[aria-pressed="true"] { border-color: var(--eg-accent); background: var(--eg-secondary); color: var(--eg-foreground); }
.eg-chip-mark { color: var(--eg-accent); transition: transform 0.2s ease; }
.eg-chip[aria-pressed="true"] .eg-chip-mark { transform: rotate(45deg); }

.eg-estimator-result {
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-card);
	padding: 1.5rem;
}
@media (min-width: 640px) { .eg-estimator-result { padding: 2rem; } }
@media (min-width: 1024px) { .eg-estimator-result { position: sticky; top: 7rem; align-self: start; } }
.eg-result-range { margin-top: 0.75rem; font-size: clamp(1.75rem, 5vw, 2.25rem); }
.eg-scale { margin-top: 2rem; }
.eg-scale-track { position: relative; height: 6px; border-radius: 9999px; background: var(--eg-border); }
.eg-scale-band { position: absolute; top: 0; height: 6px; border-radius: 9999px; background: var(--eg-accent); transition: left 0.3s var(--eg-ease), width 0.3s var(--eg-ease); }
.eg-scale-min { position: absolute; top: -4px; height: 14px; width: 1px; background: var(--eg-foreground); transition: left 0.3s var(--eg-ease); }
.eg-scale-label { display: block; margin-top: 0.75rem; }
.eg-result-rows { margin-top: 2rem; border-top: 1px solid var(--eg-border); padding-top: 1.5rem; font-size: 0.875rem; }
.eg-result-rows > div { display: flex; justify-content: space-between; padding-block: 0.375rem; }
.eg-result-rows dt { color: var(--eg-muted-foreground); }
.eg-result-rows dd { font-family: var(--eg-font-mono); }
.eg-status { margin-top: 1.5rem; border: 1px solid var(--eg-border); border-radius: var(--eg-radius); padding: 1rem; }
.eg-status.is-fit { border-color: rgba(111, 103, 89, 0.4); background: var(--eg-secondary); }
.eg-status.is-borderline { border-color: rgba(111, 103, 89, 0.4); background: var(--eg-secondary); }
.eg-status.is-below { border-color: rgba(217, 107, 90, 0.4); background: rgba(217, 107, 90, 0.05); }
.eg-status-title { font-size: 0.875rem; font-weight: 500; }
.eg-status-body { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.7; color: var(--eg-muted-foreground); }
.eg-result-send { margin-top: 1.5rem; width: 100%; }
.eg-result-adjust { margin-top: 1.5rem; width: 100%; }
.eg-disclaimer { margin-top: 1rem; font-size: 0.6875rem; line-height: 1.7; color: var(--eg-muted-foreground); }

/* ---------- About ---------- */
.eg-about-grid { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .eg-about-grid { grid-template-columns: repeat(2, 1fr); gap: 5rem; } }
.eg-about-badge {
	margin-top: 2rem;
	display: inline-flex;
	align-items: baseline;
	gap: 0.75rem;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-card);
	padding: 1rem 1.25rem;
}
.eg-about-badge-value { font-size: 2.25rem; }
.eg-about-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
}
.eg-values {
	margin-top: 4rem;
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-border);
}
@media (min-width: 640px) { .eg-values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eg-values { grid-template-columns: repeat(4, 1fr); } }
.eg-value { background: var(--eg-background); padding: 1.5rem; }
.eg-value-title { font-size: 0.875rem; font-weight: 500; }
.eg-value-body { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--eg-muted-foreground); }

/* ---------- FAQ ---------- */
.eg-faq-grid { margin-top: 6rem; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
	.eg-faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; }
	.eg-faq-head { position: sticky; top: 7rem; align-self: start; }
}
.eg-accordion { border-top: 1px solid var(--eg-border); }
.eg-accordion-item { border-bottom: 1px solid var(--eg-border); }
.eg-accordion-heading { margin: 0; }
.eg-accordion-trigger {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border: 0;
	background: transparent;
	padding: 1.25rem 0;
	text-align: left;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 500;
}
.eg-accordion-trigger:hover { color: var(--eg-accent); }
.eg-accordion-icon { flex-shrink: 0; color: var(--eg-accent); font-size: 1.25rem; transition: transform 0.25s var(--eg-ease); }
.eg-accordion-trigger[aria-expanded="true"] .eg-accordion-icon { transform: rotate(45deg); }
.eg-accordion-panel { padding-bottom: 1.25rem; }
.eg-accordion-panel p { max-width: 42rem; font-size: 0.875rem; line-height: 1.7; color: var(--eg-muted-foreground); }

/* ---------- Contact ---------- */
.eg-contact { background: #0b0b0b; }
.eg-contact-grid { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .eg-contact-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 5rem; } }
.eg-contact-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--eg-border); padding-top: 1.5rem; font-size: 0.875rem; }
.eg-contact-list a:hover { color: var(--eg-accent); }
.eg-contact-form-wrap {
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-card);
	padding: 1.5rem;
}
@media (min-width: 640px) { .eg-contact-form-wrap { padding: 2rem; } }
.eg-form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .eg-form-grid { grid-template-columns: repeat(2, 1fr); } }
.eg-col-2 { grid-column: 1 / -1; }
.eg-field { display: flex; flex-direction: column; gap: 0.5rem; }
.eg-field input, .eg-field select, .eg-field textarea {
	width: 100%;
	border: 1px solid var(--eg-border);
	border-radius: var(--eg-radius);
	background: var(--eg-background);
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: var(--eg-foreground);
	font-family: inherit;
}
.eg-field input::placeholder, .eg-field textarea::placeholder { color: rgba(156, 156, 156, 0.6); }
.eg-field input:focus, .eg-field select:focus, .eg-field textarea:focus {
	border-color: var(--eg-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--eg-accent);
}
.eg-field textarea { resize: vertical; }
.eg-form-submit { margin-top: 1.5rem; width: 100%; }
.eg-form-error { margin-bottom: 1rem; border: 1px solid rgba(217, 107, 90, 0.4); border-radius: var(--eg-radius); padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--eg-destructive); }
.eg-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eg-form-success { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 24rem; }
.eg-form-success-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	background: rgba(111, 103, 89, 0.2);
	color: var(--eg-accent);
	font-size: 1.25rem;
}
.eg-form-success-title { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 500; }
.eg-form-success p { margin-top: 0.75rem; max-width: 28rem; font-size: 0.875rem; line-height: 1.7; color: var(--eg-muted-foreground); }
.eg-form-success .eg-btn { margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.eg-footer { border-top: 1px solid var(--eg-border); padding-block: 4rem 7rem; }
@media (min-width: 1024px) { .eg-footer { padding-bottom: 2.5rem; } }
.eg-footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .eg-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eg-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.eg-footer-blurb { margin-top: 1rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.7; color: var(--eg-muted-foreground); }
.eg-footer-heading { margin-bottom: 1rem; }
.eg-footer-list { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; }
.eg-footer-list a { color: var(--eg-muted-foreground); transition: color 0.2s ease; }
.eg-footer-list a:hover { color: var(--eg-foreground); }
.eg-footer-watermark {
	margin-top: 4rem;
	overflow: hidden;
	text-align: center;
	font-family: var(--eg-font-heading);
	font-size: 18vw;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(243, 243, 243, 0.04);
	user-select: none;
}
.eg-footer-legal {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border-top: 1px solid var(--eg-border);
	padding-top: 1.5rem;
	font-size: 0.75rem;
	color: var(--eg-muted-foreground);
}
@media (min-width: 640px) { .eg-footer-legal { flex-direction: row; align-items: center; justify-content: space-between; } }
.eg-back-top:hover { color: var(--eg-foreground); }

/* ---------- Mobile CTA ---------- */
.eg-mobile-cta {
	position: fixed;
	inset-inline: 0.75rem;
	bottom: max(0.75rem, env(safe-area-inset-bottom));
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	border: 1px solid var(--eg-border);
	border-radius: 9999px;
	background: rgba(16, 16, 16, 0.95);
	padding: 0.375rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.eg-mobile-cta[hidden] { display: none; }
@media (min-width: 1024px) { .eg-mobile-cta { display: none !important; } }

/* ---------- Archive / single / 404 ---------- */
.eg-archive, .eg-single, .eg-404 { padding-block: 6rem; }
.eg-archive-head, .eg-single-head { margin-bottom: 2.5rem; }
.eg-archive-list { display: grid; gap: 2rem; }
.eg-archive-item { border-bottom: 1px solid var(--eg-border); padding-bottom: 1.5rem; }
.eg-archive-title { font-size: 1.5rem; font-weight: 500; }
.eg-archive-title a:hover { color: var(--eg-accent); }
.eg-archive-excerpt { margin-top: 0.75rem; color: var(--eg-muted-foreground); }
.eg-single-media { margin: 2rem 0; }
.eg-single-media img { border-radius: var(--eg-radius); }
.eg-prose { max-width: 44rem; line-height: 1.8; }
.eg-prose p { margin-bottom: 1.25rem; }
.eg-prose a { color: var(--eg-accent); text-decoration: underline; }
.eg-404 { text-align: center; }
.eg-404 .eg-h2 { margin-top: 1rem; }
.eg-404 .eg-lead { margin: 1.5rem auto 0; }
.eg-404-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ---------- Admin ---------- */
.eg-admin-grid { display: grid; gap: 0.5rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.eg-work-card img, .eg-scale-band, .eg-scale-min, .eg-accordion-icon { transition: none; }
}

/* ---------- Intro curtain (first visit per session) ---------- */
.eg-intro { display: none; }
html.eg-intro-active .eg-intro {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--eg-background);
	animation: eg-intro-out 0.7s var(--eg-ease) 1.1s forwards;
}
.eg-intro-inner { display: flex; align-items: center; gap: 1rem; }
.eg-intro-mark { color: var(--eg-accent); }
.eg-intro-word {
	font-family: var(--eg-font-heading);
	font-size: clamp(2rem, 6vw, 3rem);
	letter-spacing: 0.12em;
}
@keyframes eg-intro-out {
	to { clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	html.eg-intro-active .eg-intro { display: none; }
}