/* =================================================================
 * Engravyt — Industrial Spec-Sheet Theme
 * ================================================================= */

:root {
	--background: #0d0d0e;
	--surface: #0f0f11;
	--surface-2: #18181b;
	--foreground: #e5e7eb;
	--muted: #9ca3af;
	--accent: #fb923c;
	--accent-foreground: #0d0d0e;
	--border: rgba(255, 255, 255, 0.1);

	--font-display: "Bebas Neue", Impact, sans-serif;
	--font-body: "Inter", -apple-system, system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--content-w: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--background); }
body {
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-foreground); }

.font-mono { font-family: var(--font-mono); }
.t-right { text-align: right; }
.t-accent { color: var(--accent); }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; background: var(--accent); color: var(--accent-foreground);
	padding: .5rem 1rem; clip: auto; width: auto; height: auto; z-index: 9999;
}

/* ---------- Nav ---------- */
.site-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(13,13,14,.8);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}
.site-nav__inner {
	max-width: var(--content-w); margin: 0 auto;
	padding: 1rem 1.5rem;
	display: flex; align-items: center; justify-content: space-between;
}
.brand {
	font-family: var(--font-mono); font-weight: 700;
	font-size: 1.125rem; letter-spacing: -.02em;
	text-transform: uppercase; color: var(--foreground);
}
.brand-dot { color: var(--accent); }
.site-nav__links {
	display: flex; gap: 2rem;
	font-family: var(--font-mono); font-size: 11px;
	text-transform: uppercase; letter-spacing: .2em;
	color: var(--muted);
}
.site-nav__links a:hover { color: var(--foreground); }
.site-nav__links .link-accent, .menu-primary a { color: inherit; }
@media (max-width: 768px) { .site-nav__links { display: none; } }

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	padding: 1rem 2rem;
	font-family: var(--font-mono); font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .2em;
	border: 1px solid transparent; cursor: pointer; transition: all .2s;
}
.btn-solid { background: var(--foreground); color: var(--background); }
.btn-solid:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-ghost { background: transparent; color: var(--foreground); border-color: var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,.05); color: var(--foreground); }
.btn-accent { background: var(--accent); color: var(--accent-foreground); padding: .75rem 2rem; font-size: 10px; }
.btn-accent:hover { filter: brightness(1.1); color: var(--accent-foreground); }
.btn-block { width: 100%; padding: 1rem; letter-spacing: .3em; }

/* ---------- Hero ---------- */
.hero {
	position: relative; min-height: 90vh;
	padding: 6rem 1.5rem;
	display: flex; align-items: center;
	border-bottom: 1px solid var(--border);
	overflow: hidden;
}
@media (min-width: 768px) { .hero { padding: 6rem 6rem; } }
.hero::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at 70% 50%, rgba(251,146,60,.08), transparent 60%);
	pointer-events: none;
}
.hero__scan {
	position: absolute; left: 0; right: 0; height: 1px;
	background: rgba(251,146,60,.4);
	animation: scanline 4s var(--ease-out-expo) infinite;
}
@keyframes scanline {
	0% { transform: translateY(0); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateY(90vh); opacity: 0; }
}
.hero__inner { position: relative; max-width: 800px; }
.hero__eyebrow {
	font-family: var(--font-mono); color: var(--accent); font-size: 12px;
	letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.hero__title {
	font-family: var(--font-display);
	font-size: clamp(3rem, 10vw, 8rem);
	line-height: .85; letter-spacing: -.01em;
	text-transform: uppercase; margin: 0 0 2rem;
}
.hero__body {
	max-width: 32rem; color: var(--muted);
	margin: 0 0 2.5rem; line-height: 1.6;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__specs {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
	max-width: 36rem; margin: 4rem 0 0;
	font-family: var(--font-mono);
}
.hero__specs dt {
	font-size: 10px; text-transform: uppercase; letter-spacing: .2em;
	color: var(--muted); margin-bottom: .5rem;
}
.hero__specs dd {
	margin: 0; font-family: var(--font-display); font-size: 1rem;
	color: var(--foreground);
}

.stagger-reveal > * { opacity: 0; animation: reveal .8s var(--ease-out-expo) forwards; }
.stagger-reveal > *:nth-child(1) { animation-delay: 0ms; }
.stagger-reveal > *:nth-child(2) { animation-delay: 100ms; }
.stagger-reveal > *:nth-child(3) { animation-delay: 200ms; }
.stagger-reveal > *:nth-child(4) { animation-delay: 400ms; }
.stagger-reveal > *:nth-child(5) { animation-delay: 600ms; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Sections ---------- */
.section {
	padding: 6rem 1.5rem;
	border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) { .section { padding: 6rem; } }
.section--surface { background: var(--surface); }
.section__head {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: 1.5rem; margin-bottom: 4rem;
	max-width: var(--content-w); margin-left: auto; margin-right: auto;
}
.section__head--center { display: block; text-align: center; }
.section__head--center .eyebrow,
.section__head--center .section__title { display: block; }
.eyebrow {
	font-family: var(--font-mono); color: var(--accent);
	font-size: 12px; text-transform: uppercase; letter-spacing: .3em;
}
.section__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	text-transform: uppercase; letter-spacing: -.01em;
	margin: .75rem 0 0; line-height: 1;
}
.section__lede {
	max-width: 40rem; color: var(--muted); font-size: .95rem;
	margin: 1rem auto 0;
}
.section__meta {
	font-family: var(--font-mono); font-size: 10px; color: var(--muted);
	text-align: right; text-transform: uppercase; letter-spacing: .2em;
}

/* ---------- Services grid ---------- */
.services-grid {
	display: grid; grid-template-columns: 1fr; gap: 1px;
	background: var(--border); border: 1px solid var(--border);
	max-width: var(--content-w); margin: 0 auto;
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
	background: var(--background); padding: 2rem;
	display: flex; flex-direction: column;
	transition: background .3s;
}
.service-card:hover { background: rgba(251,146,60,.05); }
.service-card__head {
	display: flex; justify-content: space-between;
	font-family: var(--font-mono); font-size: 10px;
	color: var(--muted); text-transform: uppercase;
	letter-spacing: .2em; margin-bottom: 1.5rem;
}
.service-card__title {
	font-family: var(--font-display); font-size: 1.5rem;
	text-transform: uppercase; letter-spacing: .04em;
	margin: 0 0 1rem;
}
.service-card__body { color: var(--muted); font-size: .875rem; margin: 0 0 2rem; flex: 1; line-height: 1.6; }
.service-card__media { border: 1px solid var(--border); overflow: hidden; }
.service-card__media img {
	width: 100%; aspect-ratio: 4/3; object-fit: cover;
	transition: transform .7s var(--ease-out-expo);
}
.service-card:hover .service-card__media img { transform: scale(1.05); }

/* ---------- Capabilities strip ---------- */
.cap-strip {
	border-bottom: 1px solid var(--border);
	padding: 1.25rem 1.5rem; overflow-x: auto;
	display: flex; gap: 3rem;
	white-space: nowrap;
	font-family: var(--font-mono); font-size: 12px;
	text-transform: uppercase; letter-spacing: .3em;
	color: var(--muted);
}
.cap-strip .plus { color: var(--accent); margin-right: .5rem; }

/* ---------- Pricing ---------- */
.pricing-wrap { max-width: 1024px; margin: 0 auto; }
.price-table {
	font-family: var(--font-mono); font-size: 14px;
	border: 1px solid var(--border);
}
.price-table__head {
	display: grid; grid-template-columns: 5fr 3fr 2fr 2fr;
	background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border);
	padding: 1rem 1.5rem; font-size: 10px; font-weight: 700;
	color: var(--accent); text-transform: uppercase; letter-spacing: .2em;
}
.price-row {
	display: grid; grid-template-columns: 5fr 3fr 2fr 2fr;
	padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
	transition: background .2s; gap: .5rem;
}
.price-row:last-child { border-bottom: none; }
.price-row:hover { background: rgba(255,255,255,.02); }
.price-row__item { color: var(--foreground); }
.price-row__material, .price-row__setup { color: var(--muted); font-size: 13px; }
.price-row__price { color: var(--accent); }
@media (max-width: 768px) {
	.price-table__head { display: none; }
	.price-row { grid-template-columns: 1fr; padding: 1rem; }
}
.bulk-cta {
	margin-top: 2.5rem; padding: 2rem;
	border: 1px solid rgba(251,146,60,.3); background: rgba(251,146,60,.04);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem;
}
.bulk-cta__title {
	font-family: var(--font-mono); font-weight: 700; font-size: 14px;
	text-transform: uppercase; letter-spacing: .2em; color: var(--foreground);
}
.bulk-cta p { color: var(--muted); font-size: 12px; max-width: 28rem; margin: .25rem 0 0; }

/* ---------- Schedule ---------- */
.schedule {
	display: grid; grid-template-columns: 1fr; gap: 3rem;
	max-width: var(--content-w); margin: 0 auto;
}
@media (min-width: 1024px) { .schedule { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.schedule__facts {
	margin-top: 2.5rem; font-family: var(--font-mono); font-size: 12px;
	text-transform: uppercase; letter-spacing: .2em; color: var(--muted);
}
.schedule__facts > div {
	display: flex; justify-content: space-between;
	border-bottom: 1px solid var(--border); padding-bottom: .75rem; margin-bottom: .75rem;
}
.schedule__facts > div:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.schedule__facts dt, .schedule__facts dd { margin: 0; }
.schedule__facts dd { color: var(--foreground); }
.schedule__slots { border: 1px solid var(--border); }
.slot-head {
	display: grid; grid-template-columns: 4fr 5fr 3fr;
	background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border);
	padding: 1rem 1.5rem; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
	color: var(--accent); text-transform: uppercase; letter-spacing: .2em;
}
.slot-row {
	display: grid; grid-template-columns: 4fr 5fr 3fr; align-items: center;
	padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
	font-family: var(--font-mono); font-size: 14px;
	color: var(--foreground); transition: background .2s;
}
.slot-row:last-child { border-bottom: none; }
.slot-row:hover { background: rgba(255,255,255,.03); color: var(--foreground); }
.slot-window { color: var(--muted); }
.status-pill {
	display: inline-block; padding: 4px 10px;
	font-size: 10px; letter-spacing: .2em;
	border: 1px solid var(--border);
}
.st-open { color: var(--accent); border-color: rgba(251,146,60,.4); }
.st-limited { color: var(--foreground); border-color: rgba(229,231,235,.3); }
.st-booked { color: var(--muted); border-color: var(--border); }

/* ---------- Contact ---------- */
.contact {
	display: grid; grid-template-columns: 1fr; gap: 4rem;
	max-width: 1100px; margin: 0 auto;
}
@media (min-width: 768px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact__list { list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: 14px; }
.contact__list li { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.contact__list .tag { color: var(--accent); }

.booking-form label { display: block; margin-bottom: 1.25rem; }
.booking-form label > span {
	display: block; font-family: var(--font-mono); font-size: 10px;
	text-transform: uppercase; letter-spacing: .2em; color: var(--muted); margin-bottom: .5rem;
}
.booking-form input,
.booking-form select,
.booking-form textarea {
	width: 100%; background: transparent;
	border: 1px solid var(--border); padding: .75rem 1rem;
	font-family: var(--font-mono); font-size: 14px;
	color: var(--foreground); outline: none; transition: border-color .2s;
}
.booking-form select option { background: var(--background); }
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { border-color: var(--accent); }
.booking-form textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid > label { margin-bottom: 1.25rem; }
@media (max-width: 540px) { .form-grid { grid-template-columns: 1fr; } }
.form-note {
	padding: .85rem 1rem; margin-bottom: 1.25rem;
	font-family: var(--font-mono); font-size: 12px;
	border: 1px solid var(--border);
}
.form-note--ok { color: var(--accent); border-color: rgba(251,146,60,.4); background: rgba(251,146,60,.05); }
.form-note--err { color: #fca5a5; border-color: rgba(252,165,165,.3); background: rgba(252,165,165,.05); }

/* ---------- Single / page ---------- */
.single { max-width: 900px; margin: 0 auto; }
.single__head { margin-bottom: 2rem; }
.single__media { margin-bottom: 2rem; border: 1px solid var(--border); overflow: hidden; }
.single__body { color: var(--foreground); line-height: 1.7; }
.single__body h2, .single__body h3 { font-family: var(--font-display); text-transform: uppercase; }
.single__body a { color: var(--accent); text-decoration: underline; }

.post-list { max-width: 900px; margin: 0 auto; }
.post-item { padding: 2rem 0; border-bottom: 1px solid var(--border); }
.post-item h2 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 .5rem; }
.post-item .meta { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .2em; margin-bottom: 1rem; }
.post-item .excerpt { color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { padding: 3rem 1.5rem; background: var(--background); }
@media (min-width: 768px) { .site-footer { padding: 3rem 6rem; } }
.site-footer__inner {
	max-width: var(--content-w); margin: 0 auto;
	display: flex; flex-wrap: wrap; gap: 1.5rem;
	justify-content: space-between; align-items: flex-start;
	font-family: var(--font-mono); font-size: 10px;
	text-transform: uppercase; letter-spacing: .25em; color: var(--muted);
}
.site-footer__brand .brand { font-size: 18px; margin-bottom: .5rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer__links a:hover { color: var(--accent); }
.site-footer__widgets { max-width: var(--content-w); margin: 2rem auto 0; }