/*
Theme Name: LaViem Flowers Block Theme
Theme URI: https://laviem.flowers
Author: LaViem
Author URI: https://laviem.flowers
Description: A luxury flower atelier block theme with FSE support. Burgundy & cream palette, Playfair Display + Great Vibes typography.
Version: 1.8.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laviem-block
Tags: full-site-editing, block-patterns, custom-colors, custom-logo
*/

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
	--burgundy: #6B2737;
	--burgundy-deep: #4A1824;
	--burgundy-soft: #8B3D4F;
	--champagne: #E8D5B7;
	--cream: #FAF6F0;
	--cream-warm: #F5EDE0;
	--gold: #C9A96E;
	--gold-light: #E2C99A;
	--text-dark: #2C1810;
	--text-mid: #5C4033;
	--text-light: #9B8577;
	/* Extended palette */
	--espresso: #2C1810;
	--ivory: #FAF6F0;
	--section-h: 100vh;
	--nav-h: 80px;
	/* Hero nav actual height: logo(140px) + padding-top(0.8rem) + row-gap(0.6rem) + menu-row(~27px) + menu-padding-bottom(0.8rem) + border(1px) ≈ 203px; use 220px for safety */
	--hero-nav-h: 220px;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: var(--cream);
}

img { max-width: 100%; height: auto; }

/* ===== TYPOGRAPHY ===== */
h1 em, h2 em, h3 em {
	font-family: 'Great Vibes', cursive;
	font-style: normal;
	font-weight: 400;
	font-size: 1.15em;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

/* ===== WP BLOCK RESET ===== */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .is-layout-flow > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
body .wp-block-group,
body .wp-site-blocks,
body .wp-block-template-part {
	padding: 0 !important;
	margin: 0 !important;
}
body .wp-site-blocks > *,
body .wp-block-group > *,
body .wp-block-template-part > *,
body .is-layout-flow > *,
body .is-layout-constrained > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.laviem-hero, .laviem-about, .laviem-styles, .laviem-process,
.laviem-instagram, .laviem-final-cta, .laviem-phone-banner,
.laviem-testimonials, .laviem-footer, .laviem-nav {
	max-width: 100% !important;
	width: 100%;
}

/* ===== FULLSCREEN SCROLL SECTIONS ===== */
.laviem-section {
	min-height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
	display: block;
	overflow: visible;
}

/* ════════════════════════════════════════════════════
   HERO NAV — transparent, TWO-ROW layout
   Row 1: [phone] ———— [LOGO] ———— [CTA]
   Row 2: [centered nav links]
   ════════════════════════════════════════════════════ */
.laviem-nav-hero {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 200;
	transition: opacity 0.4s ease, transform 0.4s ease;
	background: linear-gradient(to bottom, rgba(30,8,14,0.75) 0%, rgba(30,8,14,0.3) 70%, transparent 100%);
	padding: 0.8rem 5vw 0;
	/* macOS Safari full-screen: push content below system menu bar */
	padding-top: max(0.8rem, calc(0.8rem + env(safe-area-inset-top, 0px)));
}
.laviem-nav-hero.hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-20px);
}

/* Top row: phone | logo | CTA */
.nav-hero-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

/* Left: phone */
.nav-hero-phone {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: 'Manrope', sans-serif;
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(232,213,183,0.7);
	text-decoration: none;
	transition: color 0.3s;
	flex-shrink: 0;
}
.nav-hero-phone svg { opacity: 0.7; flex-shrink: 0; }
.nav-hero-phone:hover { color: var(--gold); }
.nav-hero-phone:hover svg { opacity: 1; }

/* Center: Logo */
.nav-hero-logo {
	text-align: center;
	flex: 1;
}
.nav-hero-logo a {
	display: inline-block;
	text-decoration: none;
}
.nav-hero-logo img {
	height: 140px;
	width: auto;
	display: block;
	margin: 0 auto;
}
.nav-logo-text {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.2rem, 1.8vw, 1.7rem);
	font-weight: 300;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--cream);
	white-space: nowrap;
}

/* Right: CTA button */
.nav-cta-btn {
	display: inline-block;
	padding: 0.72rem 1.8rem;
	border: 1px solid rgba(201,169,110,0.55);
	font-family: 'Manrope', sans-serif;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-light);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.35s ease, border-color 0.35s ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.nav-cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #fff;
	transform: translateX(-101%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
.nav-cta-btn:hover::before { transform: translateX(0); }
.nav-cta-btn:hover {
	color: var(--burgundy-deep);
	border-color: #fff;
}

/* Bottom row: nav links centered */
.nav-hero-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.8rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid rgba(201,169,110,0.12);
}
.nav-hero-menu a {
	font-family: 'Manrope', sans-serif;
	font-size: 0.7rem;
	font-weight: 300;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(232,213,183,0.72);
	text-decoration: none;
	transition: color 0.3s;
	padding: 0.3rem 0;
}
.nav-hero-menu a:hover { color: var(--gold); }

/* ════════════════════════════════════════════════════
   COMPACT SCROLLED NAV
   ════════════════════════════════════════════════════ */
.laviem-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	top: env(safe-area-inset-top, 0px); /* macOS Safari full-screen */
	z-index: 200;
	height: var(--nav-h);
	padding: 0 5vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(250,246,240,0.97);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid rgba(201,169,110,0.18);
	transform: translateY(-100%);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.45s ease;
}
.laviem-nav.visible {
	transform: translateY(0);
	opacity: 1;
}

.laviem-nav .nav-logo {
	font-family: 'Playfair Display', serif;
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--burgundy);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.laviem-nav .nav-logo .logo-orn {
	display: inline-block;
	width: 5px; height: 5px;
	border: 1px solid var(--gold);
	transform: rotate(45deg);
	opacity: 0.7;
}
/* Compact nav logo image — burgundy version */
.nav-compact-logo-img {
	height: 32px;
	width: auto;
	display: block;
}
/* Nút Đặt Hoa mobile — chỉ hiện trên mobile */
.nav-order-btn-mobile {
	display: none;
}

.laviem-nav .nav-links {
	display: flex;
	gap: 2rem;
	list-style: none;
	align-items: center;
	margin: 0; padding: 0;
}
.laviem-nav .nav-links a {
	font-family: 'Manrope', sans-serif;
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-mid);
	text-decoration: none;
	transition: color 0.3s;
}
.laviem-nav .nav-links a:hover { color: var(--burgundy); }

/* Compact nav CTA — square fill effect */
.nav-order-btn {
	display: inline-block;
	padding: 0.7rem 1.8rem;
	border: 1px solid var(--burgundy);
	font-family: 'Manrope', sans-serif;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--burgundy) !important;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.35s ease;
}
.nav-order-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--burgundy-deep);
	transform: translateX(-101%);
	transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
	z-index: -1;
}
.nav-order-btn:hover::before { transform: translateX(0); }
.nav-order-btn:hover { color: var(--champagne) !important; border-color: var(--burgundy-deep); }

/* ════════════════════════════════════════════════════
   SOCIAL FLOAT WIDGET — vertical stack, bottom-right
   ════════════════════════════════════════════════════ */
.social-float {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	align-items: center;
}
.social-float-btn {
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	text-decoration: none;
	background: none;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.social-float-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.social-float-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Phone — pulse animation */
.social-float-phone {
	animation: phonePulse 2.5s ease-in-out infinite;
}

@keyframes phonePulse {
	0%,100%{ box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 0 0 0 rgba(201,169,110,0.5); }
	50%{ box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 0 0 10px rgba(201,169,110,0); }
}

/* ════════════════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════════════════ */
.laviem-hero {
	min-height: 100vh;
	background-color: var(--burgundy-deep);
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden; /* fallback for Safari < 16 */
	overflow: clip;   /* modern browsers: no scroll container side-effect */
}
.hero-bg {
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 65% 50%, rgba(107,39,55,0.55) 0%, rgba(44,24,16,0.97) 70%);
	z-index: 0;
}
.hero-grain {
	position: absolute; inset: 0; z-index: 0; opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px;
}
.hero-deco-line {
	position: absolute; width: 1px;
	background: linear-gradient(to bottom,transparent,rgba(201,169,110,0.25),transparent);
	z-index: 1; opacity: 0;
	animation: fadeIn 2s ease 1.2s forwards;
}
.hero-deco-line--left { left: 4%; top: 15%; height: 35vh; }
.hero-deco-line--right { right: 3%; top: 28%; height: 45vh; animation-delay: 1.4s; }

.hero-content {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	width: 100%;
	padding: 0 8vw;
	/* Use --hero-nav-h instead of --nav-h so gallery always clears the tall hero nav.
	   Also add env(safe-area-inset-top) so content clears the macOS menu bar in full-screen Safari/Brave. */
	padding-top: calc(var(--hero-nav-h) + 1rem + env(safe-area-inset-top, 0px));
	min-height: 100vh;
	gap: 4vw;
}
.hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero-eyebrow {
	font-family: 'Manrope', sans-serif;
	font-size: 0.7rem; font-weight: 400;
	letter-spacing: 0.45em; text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.8rem;
	opacity: 0; animation: fadeUp 1s ease 0.3s forwards;
	display: flex; align-items: center; gap: 1rem;
}
.hero-eyebrow::before {
	content: '';
	display: block;
	width: 30px; height: 1px;
	background: var(--gold); opacity: 0.6;
	flex-shrink: 0;
}
.hero-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(3rem, 5.8vw, 6.5rem);
	font-weight: 300;
	line-height: 1.05;
	color: var(--cream);
	letter-spacing: -0.01em;
	opacity: 0; animation: fadeUp 1.2s ease 0.5s forwards;
	margin: 0;
}
.hero-headline em { font-style: italic; color: var(--champagne); }
.hero-headline .script-line {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 1.0em;
	font-weight: 400;
	color: var(--gold);
	letter-spacing: 0.02em;
	line-height: 1.2;
}
.hero-tagline {
	margin-top: 1.8rem;
	font-family: 'Manrope', sans-serif;
	font-size: clamp(0.92rem, 1.15vw, 1.05rem);
	font-weight: 400; line-height: 2;
	color: rgba(232,213,183,0.82);
	max-width: 400px;
	opacity: 0; animation: fadeUp 1.2s ease 0.8s forwards;
}
.hero-cta-group {
	display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
	margin-top: 2.5rem;
	opacity: 0; animation: fadeUp 1.2s ease 1s forwards;
}

/* ── Hero CTA buttons: large, square, white-fill hover ── */
.hero-cta {
	display: inline-block;
	padding: 1.1rem 2.8rem;
	border: 1px solid rgba(201,169,110,0.55);
	font-family: 'Manrope', sans-serif;
	font-size: 0.7rem; font-weight: 500;
	letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--gold-light);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.35s ease, border-color 0.35s ease;
}
.hero-cta::before {
	content: '';
	position: absolute; inset: 0;
	background: #fff;
	transform: translateX(-101%);
	transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
	z-index: -1;
}
.hero-cta:hover::before { transform: translateX(0); }
.hero-cta:hover {
	color: var(--burgundy-deep);
	border-color: #fff;
}

.hero-cta-phone {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: 'Playfair Display', serif;
	font-size: 0.95rem; font-weight: 400; font-style: italic;
	color: rgba(232,213,183,0.6);
	text-decoration: none; transition: color 0.3s;
}
.hero-cta-phone:hover { color: var(--gold); }

/* ── Hero Gallery: main arch + 3 small arches ── */
.hero-gallery {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	justify-content: center;
	opacity: 0;
	animation: fadeIn 1.5s ease 0.6s forwards;
}

.hero-gallery-main {
	flex-shrink: 0;
}

/* Main arch frame (existing styles) */
.arch-frame-outer {
	position: relative;
	padding: 14px;
}
.arch-frame-outer::before {
	content: '';
	position: absolute; inset: 0;
	border-radius: 50% 50% 0 0 / 38% 38% 0 0;
	border: 1px solid rgba(201,169,110,0.35);
	pointer-events: none;
}
.arch-frame-outer::after {
	content: '';
	position: absolute; inset: 6px;
	border-radius: 50% 50% 0 0 / 39% 39% 0 0;
	border: 1px solid rgba(201,169,110,0.18);
	pointer-events: none;
}

.arch-frame {
	position: relative;
	width: min(300px, 32vw);
	height: min(440px, 46vw);
	border-radius: 50% 50% 0 0 / 40% 40% 0 0;
	overflow: hidden;
	border: 2px solid rgba(201,169,110,0.45);
	box-shadow: 0 0 80px rgba(107,39,55,0.45), 0 40px 80px rgba(0,0,0,0.4), inset 0 0 30px rgba(201,169,110,0.08);
}
.arch-frame img {
	width: 100%; height: 100%; object-fit: cover; object-position: center center;
	animation: heroBreath 14s ease-in-out infinite;
	will-change: transform;
}
.arch-frame:hover img {
	animation-play-state: paused;
	transform: scale(1.06);
	transition: transform 0.8s ease;
}
/* Zoom nhẹ + rung qua lại — luôn scale > 1 nên không bị crop bên nào */
@keyframes heroBreath {
	0%   { transform: scale(1.04) translateX(0); }
	20%  { transform: scale(1.06) translateX(4px); }
	40%  { transform: scale(1.05) translateX(-2px); }
	60%  { transform: scale(1.07) translateX(-4px); }
	80%  { transform: scale(1.05) translateX(2px); }
	100% { transform: scale(1.04) translateX(0); }
}
.arch-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(74,24,36,0.32) 0%, transparent 50%);
}

.arch-corner {
	position: absolute; width: 50px; height: 50px;
	z-index: 5; pointer-events: none; opacity: 0.6;
}
.arch-corner svg { width: 100%; height: 100%; }
.arch-corner--bl { bottom: -8px; left: -8px; }
.arch-corner--br { bottom: -8px; right: -8px; transform: scaleX(-1); }

.arch-deco-petal { position: absolute; z-index: 3; pointer-events: none; opacity: 0; animation: fadeIn 2s ease 1.6s forwards; }
.arch-deco-petal--left { top: 30%; left: -36px; width: 24px; height: 24px; border: 1px solid rgba(201,169,110,0.3); border-radius: 0 50% 50% 50%; transform: rotate(-45deg); }
.arch-deco-petal--right { top: 18%; right: -32px; width: 18px; height: 18px; border: 1px solid rgba(201,169,110,0.22); border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.arch-deco-petal--top { top: -18px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: rgba(201,169,110,0.35); border-radius: 50%; }
.arch-deco-line-side { position: absolute; width: 1px; height: 90px; z-index: 3; pointer-events: none; opacity: 0; animation: fadeIn 2s ease 1.8s forwards; }
.arch-deco-line-side--left { bottom: 20%; left: -24px; background: linear-gradient(to bottom,transparent,rgba(201,169,110,0.3),transparent); }
.arch-deco-line-side--right { bottom: 30%; right: -24px; background: linear-gradient(to bottom,transparent,rgba(201,169,110,0.25),transparent); }

/* Small arch frames (3 stacked on right side) */
.hero-gallery-side {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.arch-frame-sm {
	position: relative;
}
.arch-frame-sm-inner {
	position: relative;
	width: min(130px, 14vw);
	height: min(175px, 19vw);
	border-radius: 50% 50% 0 0 / 42% 42% 0 0;
	overflow: hidden;
	border: 1px solid rgba(201,169,110,0.4);
	box-shadow: 0 0 40px rgba(107,39,55,0.3), 0 16px 40px rgba(0,0,0,0.25);
}
.arch-frame-sm-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 6s ease;
	filter: brightness(0.88) saturate(0.85);
}
.arch-frame-sm:hover .arch-frame-sm-inner img {
	transform: scale(1.08);
	filter: brightness(0.95) saturate(1);
}
.arch-frame-sm-inner .arch-overlay {
	background: linear-gradient(to top, rgba(74,24,36,0.35) 0%, transparent 60%);
}

/* Stagger animation for small frames */
.arch-frame-sm:nth-child(1) { animation: fadeIn 1.2s ease 0.8s both; }
.arch-frame-sm:nth-child(2) { animation: fadeIn 1.2s ease 1.0s both; transform: translateX(12px); }
.arch-frame-sm:nth-child(3) { animation: fadeIn 1.2s ease 1.2s both; }

.scroll-indicator {
	position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
	z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
	opacity: 0; animation: fadeIn 1s ease 1.5s forwards;
}
.scroll-indicator span {
	font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 400;
	letter-spacing: 0.4em; text-transform: uppercase; color: rgba(232,213,183,0.4);
}
.scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom,rgba(201,169,110,0.5),transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{transform:scaleY(1);opacity:0.5;} 50%{transform:scaleY(0.5);opacity:1;} }

/* ===== GOLD DIVIDER ===== */
.gold-divider {
	display: flex; align-items: center; justify-content: center;
	gap: 1.5rem; padding: 2rem 0 1rem;
}
.gold-divider span { display: block; width: 60px; height: 1px; }
.gold-divider span:first-child { background: linear-gradient(to right,transparent,var(--gold)); }
.gold-divider span:last-child { background: linear-gradient(to left,transparent,var(--gold)); }
.gold-divider .orn { width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); }

/* ════════════════════════════════════════════════════
   ABOUT / STORY
   ════════════════════════════════════════════════════ */
.laviem-about {
	padding: 5vw 8vw;
	background: var(--cream);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.about-inner {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 7vw;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
}
.sec-label {
	font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 400;
	letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
	margin-bottom: 1.5rem;
	display: flex; align-items: center; gap: 1rem;
}
.sec-label::before {
	content: '';
	display: inline-block;
	width: 24px; height: 1px;
	background: var(--gold); opacity: 0.7;
	flex-shrink: 0;
}
.about-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2.8rem, 4.5vw, 5.5rem);
	font-weight: 300; line-height: 1.05;
	color: var(--burgundy-deep); letter-spacing: -0.01em;
	margin-bottom: 2.2rem;
}
.about-headline em { font-style: italic; color: var(--burgundy-soft); }
.about-headline .script {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 0.95em; font-weight: 400;
	color: var(--burgundy); letter-spacing: 0.02em;
}
.about-body {
	font-family: 'Manrope', sans-serif; font-size: 1.04rem; font-weight: 400;
	line-height: 2.1; color: var(--text-mid); max-width: 490px;
}
.about-body p + p { margin-top: 1.4rem; }
.about-signature {
	margin-top: 2.2rem; font-family: 'Great Vibes', cursive;
	font-size: 2.6rem; font-weight: 400; color: var(--burgundy); letter-spacing: 0.02em;
}

/* About image */
.about-image-wrap {
	position: relative;
	max-width: 520px;
	margin: 0 auto;
	padding-right: 2rem; /* space for quote tag that extends right */
}
.about-image-main {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	display: block;
}

.about-image-frame {
	position: absolute; inset: -8px;
	pointer-events: none; z-index: 2;
}
.about-image-frame::before {
	content: '';
	position: absolute; inset: 0;
	border: 1px solid rgba(201,169,110,0.28);
}
.about-frame-corner {
	position: absolute; width: 38px; height: 38px; z-index: 3;
}
.about-frame-corner svg { width: 100%; height: 100%; }
.about-frame-corner--tl { top: 0; left: 0; }
.about-frame-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.about-frame-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.about-frame-corner--br { bottom: 0; right: 0; transform: scale(-1); }

.about-image-accent {
	position: absolute; bottom: -1.8rem; left: -1.8rem;
	width: 42%; aspect-ratio: 1; object-fit: cover;
	border: 4px solid var(--cream);
	box-shadow: 0 20px 60px rgba(0,0,0,0.15); z-index: 3;
}

/* Quote tag — góc phải ảnh chính (burgundy style) */
.about-quote-tag {
	position: absolute;
	top: 1.8rem; right: -2.5rem;
	width: 240px;
	background: var(--burgundy-deep);
	padding: 2rem 1.8rem 1.6rem;
	z-index: 4;
	box-shadow: 8px 8px 40px rgba(44,24,16,0.25);
}
.about-quote-mark {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 4rem;
	color: var(--gold);
	line-height: 0.6;
	margin-bottom: 0.8rem;
	font-weight: 400;
}
.about-quote-text {
	font-family: 'Playfair Display', serif;
	font-size: 1rem;
	font-style: italic;
	font-weight: 400;
	color: var(--champagne);
	line-height: 1.75;
	margin: 0 0 0.8rem;
}
.about-quote-dash {
	display: block;
	font-family: 'Manrope', sans-serif;
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.about-pull-quote {
	position: absolute; top: 2rem; right: -1.5rem;
	width: 160px; padding: 1.5rem;
	background: var(--burgundy-deep); color: var(--champagne);
	font-family: 'Playfair Display', serif;
	font-size: 1rem; font-style: italic; font-weight: 400;
	line-height: 1.65; text-align: center; z-index: 4;
}
.about-pull-quote::before {
	content: '\201C'; display: block; font-size: 2.8rem; line-height: 1;
	color: var(--gold); margin-bottom: 0.4rem;
}

/* ════════════════════════════════════════════════════
   STYLES / COLLECTIONS — FIXED: no aspect-ratio overflow
   ════════════════════════════════════════════════════ */
.laviem-styles {
	padding: 5vw 8vw;
	background: var(--cream-warm);
	display: block;
	overflow: visible;
}
.styles-header { text-align: center; margin-bottom: 4rem; }
.styles-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2.5rem, 4vw, 4.5rem);
	font-weight: 300; color: var(--burgundy-deep);
	line-height: 1.1;
}
.styles-headline .script {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 1.1em; font-weight: 400;
	color: var(--burgundy); letter-spacing: 0.02em;
}
.styles-subline {
	margin-top: 0.8rem;
	font-family: 'Manrope', sans-serif; font-size: 1.04rem; font-weight: 400;
	letter-spacing: 0.04em; color: var(--text-mid);
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.9;
}
.styles-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	margin-top: 1.8rem;
}
.styles-ornament span {
	display: block;
	width: 40px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--gold));
}
.styles-ornament span:last-child {
	background: linear-gradient(to left, transparent, var(--gold));
}
.styles-orn-dot {
	width: 5px !important;
	height: 5px !important;
	border: 1px solid var(--gold) !important;
	transform: rotate(45deg);
	background: transparent !important;
}

.styles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	max-width: 1400px; margin: 0 auto;
}
.styles-grid--6 {
	grid-template-columns: repeat(3, 1fr);
}

/* FIXED: Use min-height instead of aspect-ratio to prevent overflow */
.style-card {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	min-height: 480px;
	border-radius: 2px;
}
/* Style cards — luôn hiển thị, không animation */
.style-card-anim {
	opacity: 1;
}
.style-card-img-wrap {
	position: absolute; inset: 0; overflow: hidden;
}
.style-card-img-wrap img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.style-card:hover .style-card-img-wrap img { transform: scale(1.07); }

.style-card-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(44,24,16,0.85) 0%, rgba(44,24,16,0.2) 45%, transparent 100%);
	pointer-events: none;
}

.style-card-frame {
	position: absolute; inset: -6px;
	pointer-events: none; z-index: 5;
	opacity: 0; transition: opacity 0.4s ease;
}
.style-card:hover .style-card-frame { opacity: 1; }
.style-card-frame::before,
.style-card-frame::after {
	content: ''; position: absolute;
	border: 1px solid rgba(201,169,110,0.55);
}
.style-card-frame::before { inset: 0; }
.style-card-frame::after { inset: 5px; border-color: rgba(201,169,110,0.25); }

.style-card-corner {
	position: absolute; z-index: 6; pointer-events: none;
	width: 28px; height: 28px;
	opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease;
}
.style-card-corner svg { width: 100%; height: 100%; }
.style-card-corner--tl { top: -6px; left: -6px; }
.style-card-corner--tr { top: -6px; right: -6px; transform: scaleX(-1); }
.style-card-corner--bl { bottom: -6px; left: -6px; transform: scaleY(-1); }
.style-card-corner--br { bottom: -6px; right: -6px; transform: scale(-1,-1); }
.style-card:hover .style-card-corner { opacity: 1; }
.style-card:hover .style-card-corner--tl { transform: translate(-2px,-2px); }
.style-card:hover .style-card-corner--tr { transform: scaleX(-1) translate(-2px,-2px); }
.style-card:hover .style-card-corner--bl { transform: scaleY(-1) translate(-2px,-2px); }
.style-card:hover .style-card-corner--br { transform: scale(-1,-1) translate(-2px,-2px); }

.style-card-info {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 2rem 1.5rem; z-index: 4;
}
.style-card-name {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.2rem, 1.6vw, 1.7rem);
	font-weight: 300; color: var(--cream); line-height: 1.15;
	margin-bottom: 0.3rem;
}
.style-card-name-script {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 0.85em; font-weight: 400;
	color: var(--gold-light); letter-spacing: 0.02em;
	margin-bottom: 0.15rem;
}
.style-card-desc {
	font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 400;
	letter-spacing: 0.04em; color: rgba(232,213,183,0.88);
	display: block; margin-bottom: 0.8rem;
	line-height: 1.6;
}
.style-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.9rem;
}
.style-card-tag {
	font-family: 'Manrope', sans-serif;
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(232,213,183,0.7);
	border: 1px solid rgba(201,169,110,0.3);
	padding: 0.2rem 0.55rem;
	border-radius: 20px;
}

.style-card-link {
	font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 400;
	letter-spacing: 0.12em; color: var(--gold-light);
	text-decoration: none;
	border-bottom: 1px solid rgba(201,169,110,0.35);
	padding-bottom: 2px;
	display: inline-block;
	opacity: 0; transform: translateY(6px);
	transition: opacity 0.3s, transform 0.3s, color 0.3s;
	text-transform: uppercase;
}
.style-card:hover .style-card-link { opacity: 1; transform: translateY(0); }
.style-card-link:hover { color: var(--gold); border-color: var(--gold); }

.style-card-petal {
	position: absolute;
	top: 1.2rem; right: 1.2rem;
	z-index: 5; pointer-events: none;
	opacity: 0; transition: opacity 0.4s;
}
.style-card:hover .style-card-petal { opacity: 1; }
.style-card-petal svg { width: 32px; height: 32px; }

/* ===== PHONE BANNER ===== */
.laviem-phone-banner {
	background: var(--burgundy);
	padding: 2rem 8vw;
	display: flex; align-items: center; justify-content: center;
	gap: 3rem; flex-wrap: wrap;
}
.phone-banner-text {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.1rem,1.8vw,1.5rem);
	font-weight: 400; font-style: italic;
	color: var(--champagne); text-align: center; margin: 0;
}
.phone-banner-number {
	display: flex; align-items: center; gap: 0.8rem;
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.3rem,2vw,1.9rem); font-weight: 400;
	color: var(--gold-light); text-decoration: none; transition: color 0.3s;
}
.phone-banner-number:hover { color: var(--gold); }
.phone-banner-divider { width: 1px; height: 40px; background: rgba(201,169,110,0.3); }

/* ════════════════════════════════════════════════════
   PROCESS SECTION — ARCH-SHAPED image frames
   ════════════════════════════════════════════════════ */
.laviem-process {
	padding: 5vw 8vw;
	background: var(--burgundy-deep);
	position: relative; overflow: hidden;
	min-height: 100vh;
	display: flex; flex-direction: column; justify-content: center;
}
.process-deco { position: absolute; border-radius: 50%; border: 1px solid rgba(201,169,110,0.07); }
.process-deco--1 { top: -10%; right: -5%; width: 45vw; height: 45vw; }
.process-deco--2 { bottom: -15%; left: -8%; width: 30vw; height: 30vw; border-color: rgba(201,169,110,0.05); }
.process-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
.process-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2.5rem,4vw,5rem);
	font-weight: 300; line-height: 1.1; color: var(--cream);
	letter-spacing: -0.01em; margin-bottom: 3.5rem; max-width: 680px;
}
.process-headline em { font-style: italic; color: var(--champagne); }
.process-headline .script {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 0.85em; font-weight: 400;
	color: var(--gold); letter-spacing: 0.02em;
}
.process-steps {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 2rem;
}

/* Process step card */
.process-step {
	display: flex;
	flex-direction: column;
}

/* Step image — ARCH SHAPE like a window */
.process-step-img {
	position: relative;
	aspect-ratio: 3/4;
	overflow: hidden;
	margin-bottom: 1.6rem;
	border-radius: 50% 50% 0 0 / 35% 35% 0 0;
	border: 1px solid rgba(201,169,110,0.35);
}
.process-step-img img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
	filter: brightness(0.85) saturate(0.8);
}
.process-step:hover .process-step-img img {
	transform: scale(1.05);
	filter: brightness(0.9) saturate(0.95);
}
.process-step-img-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(44,24,16,0.6) 0%, rgba(44,24,16,0.08) 55%, transparent 100%);
	pointer-events: none;
}
/* Gold inset border on hover — also arch-shaped */
.process-step-img::before {
	content: '';
	position: absolute; inset: 6px;
	border: 1px solid rgba(201,169,110,0.22);
	border-radius: 50% 50% 0 0 / 38% 38% 0 0;
	z-index: 2; pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s;
}
.process-step:hover .process-step-img::before { opacity: 1; }

/* Step content */
.process-step-content {
	border-top: 1px solid rgba(201,169,110,0.2);
	padding-top: 1.6rem;
}
.step-number {
	font-family: 'Great Vibes', cursive;
	font-size: 3.2rem; font-weight: 400;
	color: rgba(201,169,110,0.35); line-height: 1;
	margin-bottom: 1rem;
}
.step-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.25rem; font-weight: 400;
	color: var(--champagne); margin-bottom: 0.8rem;
}
.step-body {
	font-family: 'Manrope', sans-serif;
	font-size: 1.04rem; font-weight: 400;
	line-height: 1.9; color: rgba(232,213,183,0.72);
	letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════
   INSTAGRAM SECTION
   ════════════════════════════════════════════════════ */
.laviem-instagram {
	padding: 5vw 6vw;
	background: var(--cream-warm);
	min-height: 100vh;
	display: flex; flex-direction: column; justify-content: center;
	position: relative;
}
/* Subtle horizontal rule decorating the section */
.laviem-instagram::before {
	content: '';
	position: absolute;
	top: 0; left: 8%; right: 8%;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(201,169,110,0.3), transparent);
}
.instagram-header {
	text-align: center; margin-bottom: 2.8rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	max-width: 1300px;
	margin-left: auto; margin-right: auto;
}
.instagram-header-text { grid-column: 2; }
.instagram-header-deco {
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(201,169,110,0.35));
}
.instagram-header-deco:last-child {
	background: linear-gradient(to left, transparent, rgba(201,169,110,0.35));
}
.instagram-label {
	font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 400;
	letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold);
	margin-bottom: 0.8rem;
	display: block;
}
.instagram-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2rem,3.4vw,4rem); font-weight: 300; color: var(--burgundy-deep);
	margin: 0 0 0.6rem;
}
.instagram-headline .script {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 1.0em; font-weight: 400;
	color: var(--burgundy); letter-spacing: 0.02em;
}
.instagram-sub {
	font-family: 'Manrope', sans-serif; font-size: 1.04rem; font-weight: 400;
	color: var(--text-mid); margin-top: 0.5rem; letter-spacing: 0.02em;
	line-height: 1.75;
}

/* ── Instagram Grid — Magazine Mosaic Layout ── */
.instagram-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr;
	grid-template-rows: 280px 280px 220px;
	gap: 0.55rem;
	max-width: 1300px;
	margin: 0 auto 2.5rem;
}
/* Tile 1: tall portrait spanning 2 rows on left */
.insta-tile:nth-child(1) { grid-row: 1 / 3; }
/* Tile 6: wide landscape spanning all 3 columns on row 3 */
.insta-tile:nth-child(6) { grid-column: 1 / 4; }

a.insta-tile, div.insta-tile, .insta-tile {
	aspect-ratio: unset;
	overflow: hidden; position: relative;
	cursor: pointer; display: block; text-decoration: none;
}
.insta-tile img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
	filter: saturate(0.78) brightness(0.97);
}
.insta-tile:hover img {
	transform: scale(1.06);
	filter: saturate(1.05) brightness(1.02);
}
/* Elegant gradient overlay from bottom */
.insta-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(
		to top,
		rgba(44,24,16,0.72) 0%,
		rgba(74,24,36,0.18) 38%,
		transparent 65%
	);
	opacity: 0;
	display: flex; align-items: flex-end; justify-content: space-between;
	padding: 1.2rem 1.1rem;
	transition: opacity 0.45s ease;
}
.insta-tile:hover .insta-overlay { opacity: 1; }
/* Inner golden frame on hover */
.insta-tile::before {
	content: '';
	position: absolute; inset: 9px;
	border: 1px solid rgba(201,169,110,0);
	transition: border-color 0.45s ease;
	z-index: 3; pointer-events: none;
}
.insta-tile:hover::before { border-color: rgba(201,169,110,0.45); }
/* Corner accents — top-left */
.insta-tile::after {
	content: '';
	position: absolute;
	top: 9px; left: 9px;
	width: 16px; height: 16px;
	border-top: 1px solid rgba(201,169,110,0);
	border-left: 1px solid rgba(201,169,110,0);
	transition: border-color 0.45s ease, width 0.35s ease, height 0.35s ease;
	z-index: 4; pointer-events: none;
}
.insta-tile:hover::after {
	border-color: rgba(201,169,110,0.7);
	width: 22px; height: 22px;
}
.insta-icon {
	color: rgba(232,213,183,0.92);
	opacity: 0;
	transition: opacity 0.3s ease 0.08s, transform 0.35s ease;
	transform: translateY(6px);
	font-family: 'Manrope', sans-serif;
	font-size: 0.58rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.insta-tile:hover .insta-icon {
	opacity: 1;
	transform: translateY(0);
}
/* Number badge on each tile */
.insta-num {
	font-family: 'Playfair Display', serif;
	font-size: 0.72rem; font-style: italic;
	color: rgba(232,213,183,0.55);
	opacity: 0;
	transition: opacity 0.3s ease 0.08s;
}
.insta-tile:hover .insta-num { opacity: 1; }

.instagram-cta-wrap {
	text-align: center;
	display: flex; align-items: center; justify-content: center; gap: 1.4rem;
}
.instagram-cta-wrap::before, .instagram-cta-wrap::after {
	content: '';
	display: block;
	width: 50px; height: 1px;
	background: rgba(201,169,110,0.4);
}
.instagram-handle {
	font-family: 'Great Vibes', cursive; font-size: 2.4rem; font-weight: 400;
	color: var(--burgundy); display: inline-block;
	transition: color 0.3s;
}
.instagram-handle:hover { color: var(--burgundy-soft); }
.instagram-visit {
	font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 400;
	color: var(--text-light); letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════
   FINAL CTA
   ════════════════════════════════════════════════════ */
.laviem-final-cta {
	padding: 6vw 8vw;
	background: var(--cream-warm);
	text-align: center; position: relative; overflow: hidden;
	min-height: 100vh;
	display: flex; flex-direction: column; justify-content: center;
}
.final-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(107,39,55,0.05) 0%, transparent 70%); }
.final-cta-inner { position: relative; z-index: 1; }
.final-cta-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(3rem,5.8vw,7.5rem);
	font-weight: 300; line-height: 1.0;
	color: var(--burgundy-deep); letter-spacing: -0.01em; margin-bottom: 1.2rem;
}
.final-cta-headline em { font-style: italic; color: var(--burgundy-soft); }
.final-cta-headline .script {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 0.9em; font-weight: 400;
	color: var(--burgundy);
}
.final-cta-sub {
	font-family: 'Manrope', sans-serif; font-size: 1.04rem; font-weight: 400;
	line-height: 2; color: var(--text-mid); max-width: 480px; margin: 0 auto 3rem;
}

/* Final CTA buttons — large, square, white-fill hover */
.final-cta-buttons {
	display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.btn-primary {
	display: inline-block;
	padding: 1.1rem 3rem;
	background: var(--burgundy-deep);
	font-family: 'Manrope', sans-serif;
	font-size: 0.8rem; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--champagne); text-decoration: none;
	position: relative; overflow: hidden; isolation: isolate;
	transition: color 0.35s ease;
	border: 1px solid var(--burgundy-deep);
}
.btn-primary::before {
	content: '';
	position: absolute; inset: 0;
	background: #fff;
	transform: translateX(-101%);
	transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
	z-index: -1;
}
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary:hover { color: var(--burgundy-deep); }

.btn-secondary {
	display: inline-block;
	padding: 1.1rem 3rem;
	border: 1px solid var(--burgundy-soft);
	font-family: 'Manrope', sans-serif;
	font-size: 0.8rem; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--burgundy); text-decoration: none;
	position: relative; overflow: hidden; isolation: isolate;
	transition: color 0.35s ease, border-color 0.35s ease;
}
.btn-secondary::before {
	content: '';
	position: absolute; inset: 0;
	background: #fff;
	transform: translateX(-101%);
	transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
	z-index: -1;
}
.btn-secondary:hover::before { transform: translateX(0); }
.btn-secondary:hover { color: var(--burgundy-deep); }

.final-phone-label {
	font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 300;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.4rem;
}
.final-phone-display {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.5rem,3vw,2.5rem); font-weight: 300; font-style: italic; color: var(--burgundy);
}
.final-phone-display a { color: inherit; text-decoration: none; transition: color 0.3s; }
.final-phone-display a:hover { color: var(--burgundy-soft); }

.final-cta-deco {
	display: flex; align-items: center; justify-content: center; gap: 1.2rem;
	margin-bottom: 2.5rem; opacity: 0.5;
}
.final-cta-deco span { display: block; width: 50px; height: 1px; background: linear-gradient(to right,transparent,var(--gold)); }
.final-cta-deco span:last-child { background: linear-gradient(to left,transparent,var(--gold)); }
.final-cta-deco .orn { width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); }

/* ===== FOOTER ===== */
.laviem-footer {
	padding: 2.5rem 8vw;
	background: var(--burgundy-deep);
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 1rem;
}
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--champagne); }
.footer-copy { font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.08em; color: rgba(232,213,183,0.38); }
.laviem-footer .footer-links { display: flex; gap: 1.8rem; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; }
.laviem-footer .footer-links a { font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,213,183,0.48); text-decoration: none; transition: color 0.3s; }
.laviem-footer .footer-links a:hover { color: var(--gold); }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;}to{opacity:1;} }

.reveal {
	opacity: 0; transform: translateY(36px);
	transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.5s; }
.reveal-delay-5 { transition-delay: 0.65s; }

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
	.arch-frame {
		width: min(260px, 28vw);
		height: min(380px, 40vw);
	}
	.arch-frame-sm-inner {
		width: min(110px, 12vw);
		height: min(150px, 16vw);
	}
	.style-card { min-height: 420px; }
}

@media (max-width: 1024px) {
	.styles-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.style-card { min-height: 380px; }
	.process-steps { grid-template-columns: 1fr 1fr; gap: 2rem; }
	/* Instagram: reset mosaic, uniform 3-col at tablet */
	.instagram-grid {
		grid-template-columns: repeat(3,1fr);
		grid-template-rows: repeat(2, 240px);
	}
	.insta-tile:nth-child(1) { grid-row: auto; }
	.insta-tile:nth-child(6) { grid-column: auto; aspect-ratio: 1; }
	.hero-content { padding-top: calc(var(--hero-nav-h) + 0.5rem + env(safe-area-inset-top, 0px)); }
	.hero-gallery-side { display: none; }
	.arch-frame {
		width: min(320px, 40vw);
		height: min(470px, 55vw);
	}
}

@media (max-width: 768px) {
	/* Compact nav — ẩn links, giữ logo + nút Đặt Hoa */
	.laviem-nav { padding: 0 1.5rem; justify-content: space-between; }
	.laviem-nav .nav-links { display: none; }
	/* Hiện nút Đặt Hoa mobile trên compact nav */
	.nav-order-btn-mobile {
		display: inline-block;
		padding: 0.55rem 1.2rem;
		border: 1px solid var(--burgundy);
		font-family: 'Manrope', sans-serif;
		font-size: 0.6rem; font-weight: 500;
		letter-spacing: 0.14em; text-transform: uppercase;
		color: var(--burgundy);
		text-decoration: none;
		position: relative; overflow: hidden; isolation: isolate;
		transition: color 0.35s ease;
	}
	.nav-order-btn-mobile::before {
		content: '';
		position: absolute; inset: 0;
		background: var(--burgundy-deep);
		transform: translateX(-101%);
		transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
		z-index: -1;
	}
	.nav-order-btn-mobile:hover::before { transform: translateX(0); }
	.nav-order-btn-mobile:hover { color: var(--champagne); }
	.nav-hero-menu { display: none; }
	.laviem-nav-hero { padding: 1.5rem 5vw 0.5rem; }
	.nav-hero-top {
		margin-bottom: 0;
		gap: 0.5rem;
	}
	/* Thu nhỏ số điện thoại trên mobile */
	.nav-hero-phone {
		font-size: 0.62rem;
		letter-spacing: 0.06em;
		gap: 0.3rem;
	}
	.nav-hero-phone svg { width: 12px; height: 12px; }
	/* Logo mobile — căn giữa tuyệt đối, bớt sát viền */
	.nav-hero-top { position: relative; min-height: 50px; }
	.nav-hero-logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		flex: none;
	}
	.nav-hero-logo img { height: 80px; }
	.nav-logo-text { font-size: 0.85rem; letter-spacing: 0.18em; }
	/* CTA button nhỏ hơn */
	.nav-cta-btn {
		padding: 0.5rem 1rem;
		font-size: 0.58rem;
		letter-spacing: 0.12em;
	}
	.hero-content { grid-template-columns: 1fr; padding: 0 6vw; padding-top: calc(var(--nav-h) + 2rem); text-align: center; }
	.hero-text { padding-right: 0; }
	.hero-tagline { margin: 1.3rem auto; }
	.hero-cta-group { justify-content: center; }
	.hero-gallery { margin-top: 2.5rem; }
	.hero-gallery-side { display: none; }
	.arch-frame { width: min(260px,68vw); height: min(390px,95vw); }
	.arch-frame-outer { padding: 8px; }
	.arch-deco-petal, .arch-deco-line-side { display: none; }
	.arch-corner { width: 30px; height: 30px; }
	.about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.about-image-wrap { max-width: 400px; }
	.about-pull-quote { display: none; }
	/* Quote tag mobile — thu gọn */
	.about-quote-tag { right: -0.5rem; top: 1rem; width: 180px; padding: 1.2rem 1.2rem 1rem; }
	.about-quote-mark { font-size: 2.8rem; }
	.about-quote-text { font-size: 0.85rem; }
	.styles-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
	.style-card { min-height: 340px; }
	.process-steps { grid-template-columns: 1fr 1fr; }
	.instagram-grid { grid-template-columns: repeat(3,1fr); grid-template-rows: auto; }
	.insta-tile:nth-child(1) { grid-row: auto; }
	.insta-tile:nth-child(6) { grid-column: auto; aspect-ratio: 1; }
	.laviem-footer { flex-direction: column; text-align: center; gap: 1.2rem; }
	.laviem-phone-banner { flex-direction: column; gap: 1rem; text-align: center; }
	.phone-banner-divider { display: none; }
	.laviem-section { min-height: auto; }
	.social-float { bottom: 1.2rem; right: 1.2rem; }
	.social-float-btn { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
	.styles-grid { grid-template-columns: 1fr; }
	.style-card { min-height: 400px; }
	.process-steps { grid-template-columns: 1fr; }
	.instagram-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: auto; }
	.insta-tile:nth-child(1) { grid-row: auto; }
	.insta-tile:nth-child(6) { grid-column: auto; aspect-ratio: 1; }
	.final-cta-buttons { flex-direction: column; align-items: center; }
	.social-float { bottom: 1rem; right: 1rem; gap: 0.5rem; }
	.social-float-btn { width: 38px; height: 38px; }
	.social-float-btn img { width: 100%; height: 100%; }
	/* Nav hero mobile nhỏ hơn nữa */
	.nav-cta-btn { display: none; }
	.nav-hero-phone { font-size: 0.58rem; letter-spacing: 0.04em; }
	.nav-logo-text { font-size: 0.9rem; letter-spacing: 0.16em; }
	/* Compact nav links — thu nhỏ gap để không wrap */
	.laviem-nav .nav-links { gap: 1rem; }
	.laviem-nav .nav-links a { font-size: 0.62rem; letter-spacing: 0.06em; }
	.nav-order-btn { padding: 0.55rem 1rem; font-size: 0.58rem; letter-spacing: 0.08em; }
}

/* ===== DOT NAVIGATION ===== */
.lv-dot-nav {
	position: fixed;
	right: 1.5rem; top: 50%;
	transform: translateY(-50%);
	z-index: 150;
	display: flex; flex-direction: column; gap: 0.7rem;
}
.lv-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: rgba(201,169,110,0.3);
	border: 1px solid rgba(201,169,110,0.5);
	padding: 0; cursor: pointer;
	transition: all 0.3s;
}
.lv-dot.active { background: var(--gold); transform: scale(1.4); border-color: var(--gold); }
.lv-dot:hover { background: rgba(201,169,110,0.7); }

@media (max-width: 768px) { .lv-dot-nav { display: none; } }

/* ════════════════════════════════════════════════════
   SECTION FLORA — hoa chìm nghệ thuật
   ════════════════════════════════════════════════════ */
.section-flora {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

/* Đảm bảo các section có position:relative để flora có tham chiếu */
.laviem-hero,
.laviem-about,
.laviem-styles,
.laviem-process,
.laviem-instagram,
.laviem-final-cta,
.laviem-testimonials,
.laviem-footer-full {
	position: relative;
}

/* Vị trí từng flora theo section */
.flora--hero {
	width: clamp(160px, 18vw, 260px);
	bottom: 2%;
	right: 1%;
	opacity: 0.40;
}

/* ══ Hero Rose Illustrations — CSS background-image ══ */
.laviem-hero::before,
.laviem-hero::after {
	content: '';
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}

/*
  VỊ TRÍ: dựa theo vùng trống người dùng khoanh
  1. ::before  → vùng TRUNG TÂM trống (giữa chữ & arch frame)
  2. ::after   → bên PHẢI sát ảnh nhỏ (right edge)
  3. hero-bg::before → DƯỚI arch frame (bottom-center)
  4. hero-bg::after  → accent nhỏ góc trái
*/

/* 1. Rose — góc trên phải, ngang tầm small frames, tạo frame trên */
.laviem-hero::before {
	width: clamp(130px, 13vw, 200px);
	height: clamp(141px, 14.1vw, 217px);
	top: 10%;
	right: 1%;
	transform: rotate(155deg);
	z-index: 1;
	opacity: 0.30;
	background-image: url('assets/images/peony-bloom.svg');
	background-position: center center;
	background-size: contain;
	animation: floraSwayRight 22s ease-in-out infinite;
}

/* 2. Rose — góc dưới trái, tạo frame dưới, đối xứng chéo với ::before */
.laviem-hero::after {
	width: clamp(110px, 11vw, 165px);
	height: clamp(120px, 12vw, 179px);
	bottom: 10%;
	left: 3%;
	z-index: 1;
	opacity: 0.28;
	background-image: url('assets/images/peony-bloom.svg');
	background-position: center center;
	background-size: contain;
	transform: rotate(-18deg);
	animation: floraSwayLeft 20s ease-in-out infinite;
}

/* 3. Rose accent nhỏ — vùng trống giữa text và arch, lệch xuống dưới */
.hero-bg::before {
	content: '';
	position: absolute;
	pointer-events: none;
	width: clamp(80px, 8vw, 115px);
	height: clamp(87px, 8.7vw, 125px);
	top: 62%;
	left: 46%;
	transform: translate(-50%, -50%) rotate(22deg);
	z-index: 1;
	opacity: 0.18;
	background: url('assets/images/peony-bloom.svg') no-repeat center / contain;
}

/* 4. Cánh hoa petal — sát cạnh trái giữa màn, nhỏ và tinh tế */
.hero-bg::after {
	content: '';
	position: absolute;
	pointer-events: none;
	background: url('assets/images/petal.svg') no-repeat center / contain;
	width: 30px; height: 40px;
	top: 38%; left: 6%;
	z-index: 1;
	opacity: 0.20;
	transform: rotate(15deg);
	animation: petalFloat 20s ease-in-out 3s infinite;
}

@keyframes floraSwayLeft {
	0%, 100% { transform: translate(-50%, -50%) rotate(-10deg) translateX(0); }
	40%  { transform: translate(-50%, -50%) rotate(-8deg) translateX(5px); }
	70%  { transform: translate(-50%, -50%) rotate(-12deg) translateX(-4px); }
}
@keyframes floraSwayRight {
	0%, 100% { transform: rotate(175deg) translateX(0) translateY(0); }
	40%  { transform: rotate(173deg) translateX(-4px) translateY(3px); }
	70%  { transform: rotate(177deg) translateX(3px) translateY(-3px); }
}
@keyframes petalFloat {
	0%, 100% { transform: translateY(0); }
	50%  { transform: translateY(-8px); }
}

/* Rose mobile — layout 1 cột, 2 góc trên */
@media (max-width: 768px) {
	.laviem-hero::before {
		width: 100px; height: 109px;
		top: 4%; right: 2%;
		left: auto;
		transform: rotate(160deg);
		opacity: 0.22;
		animation: none;
	}
	.laviem-hero::after {
		width: 80px; height: 87px;
		bottom: 5%; left: 2%;
		top: auto;
		transform: rotate(-15deg);
		opacity: 0.18;
		animation: none;
	}
	.hero-bg::before {
		display: none;
	}
	.hero-bg::after { display: none; }
}
/* ══════════════════════════════════════════════════════
   PEONY-BLOOM ROSES — All sections (same technique as hero)
   ══════════════════════════════════════════════════════ */

/* Shared base for all section pseudo-roses */
.laviem-about::before,    .laviem-about::after,
.laviem-styles::before,   .laviem-styles::after,
.laviem-process::before,  .laviem-process::after,
.laviem-instagram::after {
	content: '';
	position: absolute;
	background-image: url('assets/images/peony-bloom.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	z-index: 0;
}

/* ── About — diagonal top-right / bottom-left ── */
.laviem-about::before {
	width: clamp(120px, 13vw, 200px);
	height: clamp(130px, 14.1vw, 217px);
	top: 5%; right: 1%;
	transform: rotate(140deg);
	opacity: 0.22;
}
.laviem-about::after {
	width: clamp(100px, 11vw, 170px);
	height: clamp(109px, 11.9vw, 185px);
	bottom: 6%; left: 1%;
	transform: rotate(-15deg);
	opacity: 0.18;
}

/* ── Styles / Collections — corner accents, low opacity (cards on top) ── */
.laviem-styles::before {
	width: clamp(110px, 11vw, 175px);
	height: clamp(120px, 11.9vw, 190px);
	top: 3%; left: 1%;
	transform: rotate(170deg);
	opacity: 0.13;
}
.laviem-styles::after {
	width: clamp(90px, 9vw, 145px);
	height: clamp(98px, 9.8vw, 157px);
	bottom: 2%; right: 0%;
	transform: rotate(25deg);
	opacity: 0.11;
}

/* ── Process — opposite corners for visual flow ── */
.laviem-process::before {
	width: clamp(115px, 12vw, 190px);
	height: clamp(125px, 13vw, 206px);
	top: 4%; right: 2%;
	transform: rotate(145deg);
	opacity: 0.20;
}
.laviem-process::after {
	width: clamp(95px, 10vw, 155px);
	height: clamp(103px, 10.9vw, 168px);
	bottom: 5%; left: 1%;
	transform: rotate(-22deg);
	opacity: 0.16;
}

/* ── Instagram — ::before is taken (gold divider line), use ::after only ── */
.laviem-instagram::after {
	width: clamp(100px, 10vw, 160px);
	height: clamp(109px, 10.9vw, 174px);
	bottom: 2%; right: 1%;
	transform: rotate(30deg);
	opacity: 0.13;
}

/* Mobile — reduce all section roses */
@media (max-width: 768px) {
	.laviem-about::before    { width: 80px; height: 87px; opacity: 0.16; }
	.laviem-about::after     { width: 70px; height: 76px; opacity: 0.13; }
	.laviem-styles::before   { width: 70px; height: 76px; opacity: 0.09; }
	.laviem-styles::after    { width: 60px; height: 65px; opacity: 0.08; }
	.laviem-process::before  { width: 75px; height: 82px; opacity: 0.14; }
	.laviem-process::after   { width: 65px; height: 71px; opacity: 0.11; }
	.laviem-instagram::after { width: 65px; height: 71px; opacity: 0.09; }
}

/* ─────────────────────────────────────────── */
.flora--about-1 {
	width: clamp(160px, 20vw, 280px);
	top: 5%;
	left: -2%;
	opacity: 0.6;
}
.flora--styles {
	width: clamp(100px, 14vw, 200px);
	top: 0;
	right: 2%;
	opacity: 0.7;
}
.flora--process {
	width: clamp(140px, 18vw, 240px);
	bottom: 0;
	left: -1%;
	opacity: 0.6;
}
.flora--insta {
	width: clamp(120px, 16vw, 210px);
	top: 0;
	right: 0;
	opacity: 0.55;
}
.flora--cta {
	width: clamp(180px, 22vw, 320px);
	bottom: -5%;
	left: -2%;
	opacity: 0.5;
}
.flora--footer {
	width: clamp(140px, 18vw, 240px);
	top: 0;
	right: 2%;
	opacity: 0.4;
}

/* ════════════════════════════════════════════════════
   HERO — khoảng cách với section bên dưới
   ════════════════════════════════════════════════════ */
.laviem-hero {
	padding-bottom: clamp(3rem, 6vw, 7rem);
}

/* ════════════════════════════════════════════════════
   STYLE CARD — đảm bảo hiển thị (không opacity:0)
   ════════════════════════════════════════════════════ */
.style-card {
	opacity: 1 !important;
	transform: none !important;
}
.style-card-anim {
	opacity: 1;
	transform: none;
}

/* ════════════════════════════════════════════════════
   FOOTER FULL — footer mới 3 cột
   ════════════════════════════════════════════════════ */
.laviem-footer-full {
	background: var(--burgundy-deep);
	padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 8vw, 7rem) 0;
	overflow: hidden;
}

.footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 3rem;
	padding-bottom: 3rem;
}

/* Cột brand */
.footer-col--brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.footer-logo {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1rem, 1.6vw, 1.35rem);
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--champagne);
	text-decoration: none;
}
/* Footer logo — dùng hình ảnh thay chữ */
.footer-logo-link {
	display: inline-block;
	text-decoration: none;
	line-height: 0;
}
.footer-logo-img {
	height: clamp(52px, 6vw, 72px);
	width: auto;
	display: block;
	object-fit: contain;
	/* logo.png là bản trắng — nền footer tối nên dùng thẳng */
	filter: brightness(1);
	opacity: 0.92;
	transition: opacity 0.3s ease;
}
.footer-logo-link:hover .footer-logo-img {
	opacity: 1;
}
.footer-tagline {
	font-family: 'Manrope', sans-serif;
	font-size: 0.8rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(232,213,183,0.52);
	letter-spacing: 0.02em;
	margin: 0;
	max-width: 260px;
}
.footer-socials {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.footer-social-icon {
	display: block;
	width: 34px;
	height: 34px;
	opacity: 0.75;
	transition: opacity 0.3s, transform 0.3s;
}
.footer-social-icon:hover {
	opacity: 1;
	transform: translateY(-2px);
}
.footer-social-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cột nav */
.footer-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.footer-col-title {
	font-family: 'Manrope', sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 0.25rem;
}
.footer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.footer-nav-list a {
	font-family: 'Manrope', sans-serif;
	font-size: 0.78rem;
	font-weight: 300;
	letter-spacing: 0.07em;
	color: rgba(232,213,183,0.55);
	text-decoration: none;
	transition: color 0.3s;
}
.footer-nav-list a:hover {
	color: var(--champagne);
}

/* Cột contact */
.footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.footer-contact-list li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.footer-contact-label {
	font-family: 'Manrope', sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	opacity: 0.75;
}
.footer-contact-list a,
.footer-contact-list span:not(.footer-contact-label) {
	font-family: 'Manrope', sans-serif;
	font-size: 0.8rem;
	font-weight: 300;
	color: rgba(232,213,183,0.65);
	text-decoration: none;
	letter-spacing: 0.03em;
	transition: color 0.3s;
}
.footer-contact-list a:hover {
	color: var(--champagne);
}

/* Divider gold */
.footer-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0;
	opacity: 0.25;
}
.footer-divider span {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--gold));
}
.footer-divider span:last-child {
	background: linear-gradient(to left, transparent, var(--gold));
}
.footer-divider-orn {
	width: 6px;
	height: 6px;
	border: 1px solid var(--gold);
	transform: rotate(45deg);
	flex-shrink: 0;
}

/* Bottom bar */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.2rem 0 1.5rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.footer-copy {
	font-family: 'Manrope', sans-serif;
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.07em;
	color: rgba(232,213,183,0.28);
}
.footer-credit {
	font-family: 'Manrope', sans-serif;
	font-size: 0.7rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	color: rgba(232,213,183,0.22);
	font-style: italic;
}

/* Footer responsive */
@media (max-width: 900px) {
	.footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	.footer-col--brand {
		grid-column: 1 / -1;
	}
	.footer-tagline { max-width: 100%; }
}

@media (max-width: 600px) {
	.footer-top {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}
	.footer-col--brand { grid-column: auto; }
	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}
}

/* ===== WP EDITOR ADJUSTMENTS ===== */
.editor-styles-wrapper .laviem-hero,
.editor-styles-wrapper .laviem-about,
.editor-styles-wrapper .laviem-styles,
.editor-styles-wrapper .laviem-process,
.editor-styles-wrapper .laviem-instagram,
.editor-styles-wrapper .laviem-final-cta {
	max-width: 100%;
}

/* ══════════════════════════════════════════════════════
   REEL PLAY HINT — overlay icon on card thumbnail
   ══════════════════════════════════════════════════════ */
.reel-play-hint {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	z-index: 3; pointer-events: none;
	opacity: 0; transition: opacity 0.35s ease;
}
.reel-play-hint svg { width: 52px; height: 52px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.has-reel:hover .reel-play-hint { opacity: 1; }
.has-reel { cursor: pointer; }

.reel-trigger-btn {
	background: none; border: none; padding: 0; margin: 0;
	font: inherit; color: inherit; cursor: pointer;
	text-decoration: none;
}
.reel-trigger-btn:hover { color: var(--gold-light); }

/* ══════════════════════════════════════════════════════
   VIDEO REEL MODAL — Instagram Story/Reel style
   ══════════════════════════════════════════════════════ */
.lv-reel-modal {
	position: fixed; inset: 0;
	z-index: 99999;
	display: flex; align-items: center; justify-content: center;
}
.lv-reel-modal[hidden] { display: none; }

.lv-reel-backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.92);
}

.lv-reel-container {
	position: relative;
	width: min(420px, 96vw);
	height: min(746px, 96vh);
	max-height: 96svh;
	border-radius: 16px; overflow: hidden;
	background: #000;
	box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}

/* Progress bars */
.lv-reel-progress {
	position: absolute; top: 0; left: 0; right: 0;
	display: flex; gap: 4px; padding: 10px 10px 0;
	z-index: 10;
}
.lv-reel-bar-wrap {
	flex: 1; height: 3px; background: rgba(255,255,255,0.3);
	border-radius: 2px; overflow: hidden;
}
.lv-reel-bar-fill {
	height: 100%; width: 0%;
	background: #fff; border-radius: 2px;
	transition: width 0.1s linear;
}
.lv-reel-bar-fill.done { width: 100%; transition: none; }

/* Header */
.lv-reel-header {
	position: absolute; top: 20px; left: 0; right: 0;
	padding: 0 14px;
	display: flex; align-items: center; justify-content: space-between;
	z-index: 10;
}
.lv-reel-title {
	font-family: 'Playfair Display', serif;
	font-size: 1rem; color: #fff;
	text-shadow: 0 1px 6px rgba(0,0,0,0.6);
	letter-spacing: 0.03em;
}
.lv-reel-close {
	background: rgba(0,0,0,0.4); border: none;
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0;
	transition: background 0.2s;
}
.lv-reel-close:hover { background: rgba(0,0,0,0.65); }
.lv-reel-close svg { width: 18px; height: 18px; }

/* Video */
.lv-reel-video {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	background: #000;
}

/* Tap zones */
.lv-reel-tap {
	position: absolute; top: 0; bottom: 0;
	width: 40%; background: transparent; border: none;
	cursor: pointer; z-index: 8;
}
.lv-reel-tap--prev { left: 0; }
.lv-reel-tap--next { right: 0; }

/* Mute toggle */
.lv-reel-mute {
	position: absolute; bottom: 20px; right: 16px; z-index: 10;
	background: rgba(0,0,0,0.4); border: none;
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0; transition: background 0.2s;
}
.lv-reel-mute:hover { background: rgba(0,0,0,0.65); }
.lv-reel-mute svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════
   TESTIMONIALS SECTION — v2
   ══════════════════════════════════════════════════════ */
.laviem-testimonials {
	padding: 5rem 6vw 4.5rem;
	background: linear-gradient(160deg, var(--ivory) 0%, #f7ede5 55%, var(--cream-warm) 100%);
	position: relative;
	overflow: hidden;
	/* Override laviem-section full-height */
	min-height: auto !important;
	scroll-snap-align: none !important;
}

/* ── Giant background quote mark ── */
.test-bg-quote {
	position: absolute;
	top: -1.5rem; left: 50%;
	transform: translateX(-50%);
	font-family: 'Playfair Display', serif;
	font-size: clamp(10rem, 18vw, 20rem);
	line-height: 1;
	color: var(--gold);
	opacity: 0.045;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* ── Floral img decorations (legacy — kept for compatibility) ── */
.test-flora { position: absolute; pointer-events: none; z-index: 0; }
.test-flora--left { bottom: -1.5rem; left: -1rem; width: clamp(110px, 11vw, 190px); opacity: 0.28; }
.test-flora--right { top: -1rem; right: -1.5rem; width: clamp(90px, 9vw, 150px); opacity: 0.20; }

/* ── Peony-bloom roses on standalone testimonials section ── */
.laviem-testimonials::before {
	content: '';
	position: absolute;
	top: 2%; right: -1%;
	width: clamp(130px, 14vw, 210px);
	height: clamp(141px, 15.2vw, 228px);
	background-image: url('assets/images/peony-bloom.svg');
	background-size: contain; background-repeat: no-repeat;
	transform: rotate(148deg);
	opacity: 0.30; pointer-events: none; z-index: 0;
}
.laviem-testimonials::after {
	content: '';
	position: absolute;
	bottom: 2%; left: -1%;
	width: clamp(110px, 12vw, 180px);
	height: clamp(120px, 13vw, 195px);
	background-image: url('assets/images/peony-bloom.svg');
	background-size: contain; background-repeat: no-repeat;
	transform: rotate(-22deg);
	opacity: 0.22; pointer-events: none; z-index: 0;
}

/* ── Inner container — sits above bg elements ── */
.testimonials-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
}

/* ── Header ── */
.testimonials-header {
	text-align: center;
	margin-bottom: 2.8rem;
}
.testimonials-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.8rem, 3vw, 2.7rem);
	color: var(--espresso);
	line-height: 1.25; margin: 0.5rem 0 0;
}
.testimonials-headline .script {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 1.4em; color: var(--gold);
	line-height: 1; margin-top: 0.05em;
}

/* ── Track wrapper: NO overflow:hidden — arrows live here ── */
.testimonials-track-wrap {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 0 62px; /* space for arrows on each side */
}

/* ── Slider: HAS overflow:hidden — clips the sliding cards ── */
.testimonials-slider {
	overflow: hidden;
	border-radius: 20px;
}

/* ── Track ── */
.testimonials-track {
	display: flex;
	transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
	will-change: transform;
}

/* ── Card ── */
.testimonial-card {
	flex: 0 0 100%;
	padding: 2.6rem 2.8rem 2.2rem;
	background: #fff;
	border-radius: 20px;
	border: 1px solid rgba(201,169,110,0.22);
	box-shadow: 0 8px 40px rgba(44,24,16,0.08), 0 2px 10px rgba(44,24,16,0.04);
	position: relative;
	overflow: hidden;
}
/* Petal corner decoration on card */
.testimonial-card::before {
	content: '';
	position: absolute;
	top: -18px; right: -18px;
	width: 100px; height: 130px;
	background: url('assets/images/petal.svg') center/contain no-repeat;
	opacity: 0.07;
	pointer-events: none;
	transform: rotate(20deg);
}
/* Inline quote mark as CSS pseudo */
.testimonial-card::after {
	content: '\201C';
	position: absolute;
	top: 0.8rem; left: 1.8rem;
	font-family: 'Playfair Display', serif;
	font-size: 5.5rem;
	line-height: 1;
	color: var(--gold);
	opacity: 0.10;
	pointer-events: none;
}

/* Stars */
.testimonial-stars {
	font-size: 0.88rem;
	color: #e8a830;
	letter-spacing: 0.15em;
	margin-bottom: 1rem;
}

/* Quote text */
.testimonial-text {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(0.9rem, 1.1vw, 1.02rem);
	line-height: 1.9;
	color: #4a2e22;
	margin: 0 0 1.8rem;
	font-style: italic;
	position: relative; z-index: 1;
}

/* Author row */
.testimonial-author {
	display: flex; align-items: center; gap: 0.9rem;
	position: relative; z-index: 1;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(201,169,110,0.18);
}
.testimonial-avatar {
	width: 46px; height: 46px; border-radius: 50%;
	background: linear-gradient(135deg, var(--gold) 0%, #d4a84b 100%);
	color: #fff;
	font-family: 'Playfair Display', serif;
	font-size: 1.15rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 3px 10px rgba(201,169,110,0.38);
}
.testimonial-author-info { display: flex; flex-direction: column; }
.testimonial-name {
	font-family: 'Playfair Display', serif;
	font-size: 0.96rem; color: var(--espresso); font-weight: 600;
}
.testimonial-location {
	font-family: 'Manrope', sans-serif;
	font-size: 0.7rem; color: var(--gold);
	letter-spacing: 0.07em; margin-top: 0.18rem;
}

/* ── Nav arrows (outside .testimonials-slider → no clip) ── */
.testimonial-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border-radius: 50%;
	background: #fff; border: 1.5px solid rgba(201,169,110,0.40);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; z-index: 4;
	color: var(--espresso);
	transition: all 0.25s ease;
	box-shadow: 0 4px 18px rgba(44,24,16,0.12);
}
.testimonial-nav:hover {
	background: var(--gold); border-color: var(--gold); color: #fff;
	box-shadow: 0 6px 22px rgba(201,169,110,0.40);
	transform: translateY(-50%) scale(1.06);
}
.testimonial-nav svg { width: 20px; height: 20px; }
.testimonial-nav--prev { left: 0; }
.testimonial-nav--next { right: 0; }

/* ── Dot indicators ── */
.testimonials-dots {
	display: flex; justify-content: center; align-items: center; gap: 7px;
	margin-top: 1.8rem;
}
.testimonial-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: rgba(44,24,16,0.18); border: none; cursor: pointer;
	padding: 0; transition: all 0.3s ease;
}
.testimonial-dot.active {
	background: var(--gold);
	width: 22px; border-radius: 4px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.laviem-testimonials { padding: 4rem 5vw; }
	.testimonials-track-wrap { padding: 0 50px; }
	.testimonial-card { padding: 2rem 1.8rem 1.8rem; }
	.test-flora--left { width: 90px; bottom: -1rem; left: -0.5rem; }
	.test-flora--right { width: 72px; top: -0.5rem; right: -0.5rem; }
	.lv-reel-container { border-radius: 0; width: 100vw; height: 100svh; max-height: 100svh; }
	.styles-grid--6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.testimonials-track-wrap { padding: 0 44px; }
	.testimonial-card { padding: 1.6rem 1.4rem 1.5rem; }
	.testimonial-nav { width: 38px; height: 38px; }
	.styles-grid--6 { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
}

/* ══════════════════════════════════════════════════════
   COMBINED: TESTIMONIALS + CTA — Split-screen
   ══════════════════════════════════════════════════════ */
.laviem-combo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	position: relative;
}

/* ── Left: Testimonials (light) ── */
.combo-left {
	background: linear-gradient(150deg, #fdf7f0 0%, #f7ede5 55%, var(--cream-warm) 100%);
	position: relative;
	overflow: hidden;
	display: flex; align-items: center;
	padding: 5rem 4rem 5rem 6vw;
}
/* Peony-bloom rose — top-right (like hero) */
.combo-left::before {
	content: '';
	position: absolute;
	top: 4%; right: -2%;
	width: clamp(150px, 16vw, 240px);
	height: clamp(163px, 17.4vw, 260px);
	background-image: url('assets/images/peony-bloom.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(150deg);
	opacity: 0.32;
	pointer-events: none;
	z-index: 0;
}
/* Peony-bloom rose — bottom-left */
.combo-left::after {
	content: '';
	position: absolute;
	bottom: 3%; left: -1%;
	width: clamp(120px, 13vw, 195px);
	height: clamp(130px, 14.1vw, 212px);
	background-image: url('assets/images/peony-bloom.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(-20deg);
	opacity: 0.26;
	pointer-events: none;
	z-index: 0;
}
.combo-left-inner {
	width: 100%;
	position: relative; z-index: 1;
}
/* Testimonials header alignment inside combo */
.combo-left .testimonials-header {
	text-align: left;
	margin-bottom: 2rem;
}
.combo-left .testimonials-track-wrap {
	max-width: 100%;
	padding: 0 56px;
}
.combo-left .testimonials-dots {
	justify-content: flex-start;
	margin-top: 1.4rem;
}

/* ── Right: CTA (dark burgundy) ── */
.combo-right {
	background: linear-gradient(145deg, #3a1220 0%, var(--burgundy-deep) 40%, #2C1810 100%);
	position: relative;
	overflow: hidden;
	display: flex; align-items: center;
	padding: 5rem 6vw 5rem 4rem;
}
.combo-right-inner {
	position: relative; z-index: 1;
	width: 100%;
}

/* Peony-bloom on dark bg — bottom-right */
.combo-right::before {
	content: '';
	position: absolute;
	bottom: -3%; right: -3%;
	width: clamp(160px, 18vw, 280px);
	height: clamp(174px, 19.6vw, 304px);
	background-image: url('assets/images/peony-bloom.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(40deg);
	opacity: 0.12;
	pointer-events: none;
	z-index: 0;
}
/* Subtle top-left accent */
.combo-right::after {
	content: '';
	position: absolute;
	top: -2%; left: -2%;
	width: clamp(90px, 10vw, 150px);
	height: clamp(98px, 10.9vw, 163px);
	background-image: url('assets/images/peony-bloom.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(200deg);
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}

/* Floating SVG flora on dark bg (inline SVG kept as fallback/accent) */
.combo-right-flora {
	position: absolute;
	pointer-events: none;
}
.combo-right-flora:first-of-type {
	bottom: -20px; right: -20px;
	width: clamp(130px, 14vw, 220px);
	opacity: 0.20;
}
.combo-right-flora--tr {
	top: -10px; left: -10px;
	width: clamp(80px, 8vw, 130px);
	opacity: 0.14;
	transform: rotate(180deg);
}

/* Right-side headline */
.combo-cta-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2rem, 3.2vw, 4rem);
	color: var(--ivory);
	line-height: 1.2;
	margin: 1rem 0 1.2rem;
	letter-spacing: -0.01em;
}
.combo-cta-headline .script {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 1.3em;
	color: var(--gold);
	line-height: 1.05;
}
.combo-cta-sub {
	font-family: 'Manrope', sans-serif;
	font-size: 0.95rem; font-weight: 400;
	line-height: 1.9;
	color: rgba(232,213,183,0.78);
	max-width: 380px;
	margin: 0 0 2rem;
}

/* Buttons */
.combo-cta-buttons {
	display: flex; gap: 1rem; flex-wrap: wrap;
	margin-bottom: 2.2rem;
}
.combo-btn-primary {
	font-family: 'Manrope', sans-serif;
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	text-decoration: none;
	padding: 0.85rem 2rem;
	background: var(--gold);
	color: var(--espresso);
	border: 1.5px solid var(--gold);
	border-radius: 2px;
	transition: background 0.3s, color 0.3s, transform 0.2s;
}
.combo-btn-primary:hover {
	background: transparent;
	color: var(--gold);
	transform: translateY(-1px);
}
.combo-btn-secondary {
	font-family: 'Manrope', sans-serif;
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	text-decoration: none;
	padding: 0.85rem 1.8rem;
	background: transparent;
	color: var(--ivory);
	border: 1.5px solid rgba(232,213,183,0.45);
	border-radius: 2px;
	transition: border-color 0.3s, color 0.3s, transform 0.2s;
}
.combo-btn-secondary:hover {
	border-color: var(--ivory);
	color: #fff;
	transform: translateY(-1px);
}

/* Phone + address */
.combo-contact-info { margin-top: 0.5rem; }
.combo-phone {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.5rem, 2.2vw, 2.2rem);
	color: var(--gold);
	text-decoration: none;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
	transition: color 0.25s;
}
.combo-phone:hover { color: #e8d5a3; }
.combo-address {
	font-family: 'Manrope', sans-serif;
	font-size: 0.78rem;
	color: rgba(232,213,183,0.58);
	letter-spacing: 0.05em;
	margin: 0;
	line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.laviem-combo { grid-template-columns: 1fr 1fr; }
	.combo-left { padding: 4rem 2.5rem 4rem 4vw; }
	.combo-right { padding: 4rem 4vw 4rem 2.5rem; }
}
@media (max-width: 768px) {
	.laviem-combo {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.combo-left {
		padding: 4rem 5vw 3rem;
		order: 2; /* CTA above testimonials on mobile */
	}
	.combo-right {
		padding: 4rem 5vw 3rem;
		order: 1;
	}
	.combo-left .testimonials-track-wrap { padding: 0 50px; }
	.combo-left .testimonials-header { text-align: center; }
	.combo-left .testimonials-dots { justify-content: center; }
	.combo-cta-headline { font-size: clamp(1.8rem, 7vw, 3rem); }
	.combo-cta-sub { max-width: 100%; }
}
@media (max-width: 480px) {
	.combo-left .testimonials-track-wrap { padding: 0 44px; }
	.combo-cta-buttons { flex-direction: column; }
	.combo-btn-primary, .combo-btn-secondary { text-align: center; }
}