/*
Lamy LP — Header Slim + Hero Section
Phase 2 (initial). Phase 19 (2026-06-21): hierarchy tightening.
  - Logo reduced to 32px both breakpoints.
  - Eyebrow line added above H1 (.lp-hero__eyebrow).
  - H1 is now single-line; max-width constraint removed; margin tightened.
  - Desktop subhead removed; dead CSS (.lp-hero__brand-label,
    .lp-hero__brand-sentence, .lp-hero__subhead) purged.
  - Secondary CTA converted from ghost button to text-link.
  - Vertical spacing reduced ~30%.
Mobile-first, RTL.
CSS variables from style.css :root.
Purple glow behind 3D L: Purple Accent System location A.
*/

/* ============================================================
   Local layout tokens
   ============================================================ */
.lp-hero {
	--header-h: 60px;
	--hero-offset-top: clamp(4px, 1vw, 12px);
}

@media (min-width: 769px) {
	.lp-hero { --header-h: 88px; }
}

/* ============================================================
   Skip-to-content link
   ============================================================ */
.skip-link {
	position: absolute;
	top: -100px;
	right: 8px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--gold-primary);
	color: #100C00;
	font-weight: 700;
	border-radius: 6px;
	text-decoration: none;
	transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
	top: 8px;
	color: #100C00;
	outline: 2px solid var(--gold-highlight);
	outline-offset: 2px;
}

/* ============================================================
   Header — fixed, transparent over Hero, dark glass on scroll
   ============================================================ */
.lp-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.lp-header__inner {
	max-width: var(--max-content);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.lp-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
}

/* Phase 19: reduced to 32px — lighter presence, content takes priority. */
.lp-header__mark {
	max-height: 32px;
	width: auto;
	height: auto;
	display: block;
	filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.18));
}

.lp-header__wordmark {
	font-family: 'Heebo', sans-serif;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.01em;
	background: linear-gradient(135deg, var(--gold-highlight), var(--gold-primary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	line-height: 1;
}

.lp-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 18px);
	flex-shrink: 0;
}

.lp-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gold-primary);
	font-family: 'Heebo', sans-serif;
	font-weight: 700;
	font-size: clamp(13px, 1.4vw, 16px);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.lp-header__phone:hover,
.lp-header__phone:focus-visible {
	color: var(--gold-highlight);
}

.lp-header__phone svg { flex-shrink: 0; }

@media (min-width: 769px) {
	.lp-header__inner    { height: 88px; }
	.lp-header__mark     { max-height: 32px; }
	.lp-header__wordmark { font-size: 22px; }
}

.lp-header--scrolled {
	background: rgba(5, 5, 5, 0.85);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom-color: rgba(212, 175, 55, 0.18);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Hero section
   ============================================================ */
.lp-hero {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--header-h) + var(--hero-offset-top));
	padding-bottom: clamp(14px, 2vw, 28px);
	padding-inline: clamp(20px, 4vw, 48px);
	background: var(--bg-primary);
}

@media (min-width: 769px) {
	.lp-hero {
		min-height: clamp(440px, 70vh, 640px);
		display: flex;
		align-items: center;
	}
}

/* Atmospheric purple wash behind everything */
.lp-hero__bg-glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 80% 30%, rgba(26, 15, 46, 0.5) 0%, transparent 55%),
		radial-gradient(ellipse at 20% 80%, rgba(138, 79, 255, 0.06) 0%, transparent 50%);
	opacity: 0.4;
}

.lp-hero .lp-container {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* ============================================================
   Hero grid: stacked mobile, 62% / 38% desktop (RTL natural)
   ============================================================ */
.lp-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 6vw, 48px);
	align-items: center;
}

@media (min-width: 769px) {
	.lp-hero__grid {
		grid-template-columns: 62fr 38fr;
		gap: 56px;
	}
}

.lp-hero__content {
	order: 1;
	text-align: right;
}

@media (min-width: 769px) {
	.lp-hero__content { order: initial; padding-inline-end: 32px; }
}

/* ============================================================
   Headline
   ============================================================ */
.lp-hero__h1 {
	font-family: 'Rubik', 'Heebo', sans-serif;
	font-weight: 800;
	font-size: clamp(34px, 5vw, 64px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text-heading);
	margin: 0 0 12px 0;
	text-wrap: balance;
}

@media (min-width: 769px) {
	.lp-hero__h1 { margin-bottom: 16px; }
}

.lp-hero__h1-accent {
	color: var(--gold-primary);
}

/* ============================================================
   Bullets
   ============================================================ */
.lp-hero__bullets {
	list-style: none;
	margin: 0 0 clamp(16px, 2.5vw, 22px);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lp-hero__bullets li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Heebo', sans-serif;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.5;
	color: var(--text-body);
}

.lp-hero__bullets li svg {
	flex-shrink: 0;
	filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
}

/* ============================================================
   CTAs — primary gold button + secondary text-link
   ============================================================ */
.lp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-bottom: 10px;
}

.lp-hero__ctas .btn-cta-primary--lg {
	padding: 16px 36px;
	font-size: 17px;
	border-radius: 12px;
	font-weight: 600;
}

@media (min-width: 769px) {
	.lp-hero__ctas .btn-cta-primary--lg {
		padding: 18px 40px;
		font-size: 18px;
	}
}

/* Secondary CTA — plain text-link (replaces ghost button) */
.lp-hero__cta-text-link {
	display: block;
	text-align: center;
	color: var(--text-meta);
	font-family: 'Heebo', sans-serif;
	font-size: 15px;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(160, 160, 160, 0.4);
	letter-spacing: 0.01em;
	margin-bottom: 10px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.lp-hero__cta-text-link:hover,
.lp-hero__cta-text-link:focus-visible {
	color: var(--gold-primary);
	text-decoration-color: rgba(212, 175, 55, 0.5);
}

.lp-hero__cta-microcopy {
	color: var(--text-meta);
	font-size: 13px;
	letter-spacing: 0.01em;
	margin: 0;
	line-height: 1.55;
}

@media (max-width: 480px) {
	.lp-hero__ctas { gap: 12px; }
	.lp-hero__ctas .btn-cta-primary--lg {
		width: 100%;
		text-align: center;
	}
}

/* ============================================================
   Visual column — 3D L + Purple Accent A
   ============================================================ */
.lp-hero__visual {
	position: relative;
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
}

@media (min-width: 769px) {
	.lp-hero__visual { order: initial; min-height: 420px; }
}

/* Purple Accent System — location A.
   Sits behind the 3D L at z-index 0; the image is z-index 1. */
.lp-hero__purple-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140%;
	aspect-ratio: 1 / 1;
	max-width: 560px;
	z-index: 0;
	background: radial-gradient(circle, var(--purple-atmosphere) 0%, transparent 70%);
	opacity: 0.5;
	filter: blur(20px);
	pointer-events: none;
}

@media (min-width: 769px) {
	.lp-hero__purple-glow {
		opacity: 0.7;
		filter: blur(40px);
		width: 130%;
		max-width: 680px;
	}
}

.lp-hero__l-mark {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 280px;
	height: auto;
	display: block;
	filter:
		drop-shadow(0 0 40px rgba(212, 175, 55, 0.28))
		drop-shadow(0 0 60px rgba(166, 108, 255, 0.18));
}

@media (min-width: 769px) {
	.lp-hero__l-mark { max-width: 480px; }
}

/* Mobile: visual column hidden; <picture> media query prevents download. */
@media (max-width: 768px) {
	.lp-hero__visual { display: none; }
}