/* =============================================================================
   Ampliso Cards — main stylesheet
   Plain CSS port of the React/Tailwind design system.
   ========================================================================== */

:root {
	--radius: 0.25rem;
	--background: oklch(0.16 0.005 60);
	--foreground: oklch(0.96 0.01 80);
	--card: oklch(0.20 0.006 60);
	--muted: oklch(0.22 0.006 60);
	--muted-foreground: oklch(0.68 0.015 75);
	--secondary: oklch(0.24 0.008 60);
	--border: oklch(0.28 0.008 60);
	--input: oklch(0.24 0.008 60);
	--primary: oklch(0.78 0.13 78);
	--primary-foreground: oklch(0.16 0.005 60);
	--gold: oklch(0.78 0.13 78);
	--gold-soft: oklch(0.86 0.09 85);
	--copper: oklch(0.62 0.13 50);
	--gradient-gold: linear-gradient(135deg, oklch(0.86 0.09 85), oklch(0.62 0.13 50));
	--shadow-glow: 0 0 60px -10px oklch(0.78 0.13 78 / 0.35);
	--container: 1200px;
	--font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-sans);
	background: var(--background);
	color: var(--foreground);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1.05;
}

/* ---- Utilities ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--muted-foreground); }
.muted.small, .small { font-size: .85rem; }
.lead { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.7; max-width: 38rem; }
.italic { font-style: italic; }
.eyebrow {
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: 0.72rem;
	color: var(--muted-foreground);
	margin: 0 0 .5rem;
	display: inline-block;
}
.text-gold {
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.display { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); }
.h-xl { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); }
.h-lg { font-size: clamp(2rem, 3vw + 1rem, 3rem); }
.h-md { font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem); }
.arrow { display: inline-block; transition: transform .2s ease; }

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.75rem;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	border-radius: var(--radius);
	border: 1px solid transparent;
	transition: all .25s ease;
	cursor: pointer;
}
.btn--primary {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
.btn--primary:hover { box-shadow: var(--shadow-glow); }
.btn--ghost {
	background: transparent;
	color: var(--primary);
	border-color: color-mix(in oklab, var(--primary) 60%, transparent);
}
.btn--ghost:hover { background: var(--primary); color: var(--primary-foreground); }
.btn--link {
	background: transparent;
	color: var(--foreground);
	border-bottom: 1px solid var(--border);
	padding: 1rem .25rem;
	border-radius: 0;
}
.btn--link:hover { border-color: var(--primary); }
.btn:hover .arrow { transform: translateX(4px); }

.link-arrow {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--primary);
	border-bottom: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
	padding-bottom: 2px;
	transition: border-color .2s ease;
}
.link-arrow:hover { border-color: var(--primary); }

.cta-row { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---- Header ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
	background: color-mix(in oklab, var(--background) 80%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.site-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	gap: 1.5rem;
}
.brand-mark {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--foreground);
}
.brand-mark--lg { font-size: 1.875rem; }
.brand-mark__dot {
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.site-header__brand { display: inline-flex; align-items: baseline; gap: .5rem; }
.brand-tag { display: none; }
@media (min-width: 640px) { .brand-tag { display: inline-block; } }

.site-nav { display: none; }
.site-header__cta { display: none; }
.site-header__toggle {
	background: transparent;
	border: 0;
	color: var(--foreground);
	padding: .5rem;
	display: inline-flex;
}
.hamburger { display: inline-block; width: 24px; height: 18px; position: relative; }
.hamburger span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .25s ease, opacity .25s ease, top .25s ease; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }
.is-open .hamburger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.is-open .hamburger span:nth-child(2) { opacity: 0; }
.is-open .hamburger span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

@media (min-width: 900px) {
	.site-nav { display: block; }
	.site-header__cta { display: inline-flex; }
	.site-header__toggle { display: none; }
}
.nav__list { display: flex; gap: 2.5rem; align-items: center; }
.nav__list a {
	font-size: .875rem;
	color: var(--muted-foreground);
	letter-spacing: .02em;
}
.nav__list a:hover, .nav__list .current-menu-item a { color: var(--foreground); }

.mobile-nav {
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
	padding: 1rem 1.5rem 1.5rem;
}
.mobile-nav__list { display: flex; flex-direction: column; gap: 0; }
.mobile-nav__list a { display: block; padding: .85rem 0; color: var(--muted-foreground); font-size: .9rem; letter-spacing: .02em; }
.mobile-nav__list a:hover { color: var(--foreground); }
.mobile-nav__cta { margin-top: 1rem; }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

.site-main { display: block; }

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero__bg-overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, color-mix(in oklab, var(--background) 60%, transparent), color-mix(in oklab, var(--background) 40%, transparent), var(--background)),
		linear-gradient(90deg, var(--background), color-mix(in oklab, var(--background) 60%, transparent), transparent);
}
.hero__inner {
	max-width: var(--container);
	margin: 0 auto;
	min-height: 88vh;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
	padding: 6rem 1.5rem;
}
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1fr 1fr; } }
.hero__visual { display: none; position: relative; }
@media (min-width: 900px) { .hero__visual { display: block; } }
.hero__glow {
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(circle at center, color-mix(in oklab, var(--primary) 15%, transparent), transparent 70%);
	filter: blur(60px);
}
.hero__card-image {
	width: 100%;
	max-width: 36rem;
	margin: 0 auto;
	filter: drop-shadow(0 40px 60px rgba(0,0,0,.6));
	animation: float 6s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-16px) rotate(-1deg); }
}

/* ---- Pillars ---- */
.pillars { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: var(--card); }
.pillars__grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: color-mix(in oklab, var(--border) 60%, transparent);
}
@media (min-width: 800px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--card); padding: 2.5rem; }
.pillar__icon { color: var(--primary); font-size: 1.5rem; margin-bottom: 1.5rem; }
.pillar h3 { font-size: 1.5rem; margin-bottom: .75rem; color: var(--foreground); }
.pillar p { color: var(--muted-foreground); font-size: .9rem; line-height: 1.6; margin: 0; }

/* ---- Section heads ---- */
.collection-teaser { padding: 7rem 1.5rem; }
.section-head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
@media (min-width: 800px) {
	.section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.section-head h2 { max-width: 36rem; color: var(--foreground); }

/* ---- Card grid (collection teaser) ---- */
.card-grid {
	margin-top: 4rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 800px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card { display: block; }
.product-card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--secondary);
}
.product-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .7s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__meta {
	margin-top: 1.25rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.product-card__meta h3 { font-size: 1.25rem; color: var(--foreground); }

/* ---- Materials banner ---- */
.materials-banner {
	position: relative;
	isolate: isolation;
	overflow: hidden;
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
	border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.materials-banner__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.materials-banner__overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, var(--background), color-mix(in oklab, var(--background) 70%, transparent), transparent);
}
.materials-banner__inner { padding: 8rem 1.5rem; }
.materials-banner__copy { max-width: 36rem; }
.materials-banner__copy h2 { color: var(--foreground); }
.materials-banner__copy p { margin: 1.5rem 0 2.5rem; line-height: 1.7; }

/* ---- Final CTA ---- */
.final-cta { padding: 8rem 1.5rem; max-width: 56rem; margin: 0 auto; text-align: center; }
.final-cta h2 { color: var(--foreground); margin-bottom: 1.5rem; }
.final-cta .muted { max-width: 36rem; margin: 0 auto 2.5rem; }

/* ---- Page hero ---- */
.page-hero { border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.page-hero .container { padding-top: 6rem; padding-bottom: 6rem; }
.page-hero h1 { color: var(--foreground); max-width: 50rem; }
.page-hero .lead { margin-top: 1.5rem; }
.page-hero--image { position: relative; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; z-index: -1; }
.page-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, color-mix(in oklab, var(--background) 40%, transparent), var(--background));
}
.page-hero--image .container { padding-top: 8rem; padding-bottom: 8rem; }

/* ---- Editions (collection page) ---- */
.edition {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
	padding: 6rem 0;
	border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
@media (min-width: 800px) {
	.edition { grid-template-columns: 1fr 1fr; gap: 5rem; }
	.edition--reverse .edition__media { order: 2; }
}
.edition__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--secondary); }
.edition__media img { width: 100%; height: 100%; object-fit: cover; }
.edition__copy h2 { color: var(--foreground); }
.edition__copy .muted { margin: 1.5rem 0; line-height: 1.7; }
.spec-list {
	margin: 2rem 0;
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
	padding-top: 1.5rem;
	display: flex; flex-direction: column; gap: .75rem;
}
.spec-list li { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.spec-list__dash { display: inline-block; width: 24px; height: 1px; background: var(--primary); }
.edition__copy .btn { margin-top: 2rem; }

/* ---- Process ---- */
.process-section { max-width: 64rem; padding: 6rem 1.5rem; }
.process-list {
	display: flex; flex-direction: column;
	gap: 1px;
	background: color-mix(in oklab, var(--border) 60%, transparent);
}
.process-list__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2rem;
	background: var(--background);
	padding: 2rem;
}
@media (min-width: 800px) {
	.process-list__item { grid-template-columns: 120px 1fr; padding: 3rem; }
}
.process-list__num { font-family: var(--font-serif); font-size: 2rem; color: var(--primary); }
@media (min-width: 800px) { .process-list__num { font-size: 3rem; } }
.process-list__item h3 { color: var(--foreground); margin-bottom: .75rem; }
.lead-time {
	margin-top: 5rem;
	border: 1px solid var(--border);
	background: var(--card);
	padding: 3rem;
	text-align: center;
	border-radius: var(--radius);
}
.lead-time .lead { color: var(--foreground); margin: .25rem auto; }
.lead-time .btn { margin-top: 2rem; }

/* ---- About ---- */
.about-grid {
	display: grid; grid-template-columns: 1fr; gap: 4rem;
	padding: 6rem 1.5rem;
}
@media (min-width: 800px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.about-grid__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--secondary); }
.about-grid__media img { width: 100%; height: 100%; object-fit: cover; }
.about-grid__copy h2 { color: var(--foreground); margin-bottom: 2rem; }
.about-grid__copy p { color: var(--muted-foreground); line-height: 1.7; margin: 0 0 1.25rem; }

.stats { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: var(--card); }
.stats__grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: color-mix(in oklab, var(--border) 60%, transparent);
}
@media (min-width: 700px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--card); padding: 3rem; text-align: center; }
.stat__num {
	font-family: var(--font-serif);
	font-size: clamp(3rem, 5vw, 4rem);
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0 0 1rem;
}

/* ---- Contact / quote form ---- */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	padding: 5rem 1.5rem;
}
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 320px; } }

.quote-form { display: grid; gap: 1.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: block; }
.field--full { grid-column: 1 / -1; }
.field .eyebrow { display: block; margin-bottom: .5rem; }
.field input, .field select, .field textarea {
	width: 100%;
	border: 1px solid var(--border);
	background: color-mix(in oklab, var(--input) 40%, transparent);
	color: var(--foreground);
	padding: .85rem 1rem;
	font: inherit;
	font-size: .9rem;
	border-radius: var(--radius);
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent);
}
.field textarea { resize: vertical; }

.banner {
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	font-size: .9rem;
	border: 1px solid;
}
.banner--success {
	border-color: color-mix(in oklab, var(--primary) 40%, transparent);
	background: color-mix(in oklab, var(--primary) 10%, transparent);
	color: var(--foreground);
}
.banner--error {
	border-color: color-mix(in oklab, oklch(0.6 0.22 27) 60%, transparent);
	background: color-mix(in oklab, oklch(0.6 0.22 27) 12%, transparent);
	color: var(--foreground);
}

.contact-aside {
	display: flex; flex-direction: column; gap: 2rem;
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
	padding-top: 2.5rem;
}
@media (min-width: 1000px) {
	.contact-aside { border-top: 0; border-left: 1px solid color-mix(in oklab, var(--border) 60%, transparent); padding: 0 0 0 3rem; }
}
.callout {
	border: 1px solid var(--border);
	background: var(--card);
	padding: 1.5rem;
	border-radius: var(--radius);
}

/* ---- Footer ---- */
.site-footer { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: var(--card); }
.site-footer__grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	gap: 3rem;
	padding: 4rem 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 800px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__brand .muted { margin-top: 1rem; max-width: 24rem; font-size: .9rem; line-height: 1.7; }
.link-list { display: flex; flex-direction: column; gap: .75rem; font-size: .9rem; }
.link-list a:hover { color: var(--foreground); }
.site-footer__bottom {
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.site-footer__bottom > * { display: none; }
.site-footer__bottom {
	display: flex; flex-direction: column;
	max-width: var(--container);
	margin: 0 auto;
	padding: 1.5rem;
	gap: .5rem;
	font-size: .75rem;
	color: var(--muted-foreground);
	align-items: center;
	justify-content: space-between;
}
@media (min-width: 700px) { .site-footer__bottom { flex-direction: row; } }
.site-footer__bottom p { margin: 0; }

/* Generic page */
.generic-page { padding: 6rem 1.5rem; }
.generic-page .display { color: var(--foreground); margin-bottom: 2rem; }
.prose p, .prose li { color: var(--muted-foreground); line-height: 1.7; }
.prose a { color: var(--primary); text-decoration: underline; }
.post-list { display: flex; flex-direction: column; gap: 3rem; }
/* ---- Quote page polish (v2) ---- */
.form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: .5rem;
}
.form-actions .btn { display: inline-flex; align-items: center; gap: .6rem; }
.form-actions .btn .arrow { transition: transform .25s ease; display: inline-block; }
.form-actions .btn:hover .arrow { transform: translateX(4px); }
.form-actions__note { font-size: .8rem; max-width: 38ch; margin: 0; }

.callout h4 {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	margin: 0 0 .75rem;
	color: var(--foreground);
	letter-spacing: -0.01em;
}
.callout-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .65rem;
}
.callout-list li {
	position: relative;
	padding-left: 1.25rem;
	color: var(--muted-foreground);
	font-size: .92rem;
	line-height: 1.5;
}
.callout-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--gradient-gold, var(--primary));
}
.callout-list li strong { color: var(--foreground); font-weight: 500; }

.quote-form .field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 1.15rem, calc(100% - .75rem) 1.15rem;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
	color: var(--foreground);
}

.quote-form .field textarea { min-height: 160px; line-height: 1.55; }