.mobile-nav{
	display:flex;
	flex-direction:column;
	gap:1rem;
}
.mobile-nav a{ color:inherit; font-weight:600; text-decoration:none; }
/* ---------- Critical small overrides & polished UI (extracted from index.html) ---------- */
:root{
	/* Palette: high-end off-white for light, deep charcoal for dark */
	--ivory: #f6f3ee;               /* warm off-white */
	--paper: #fbf9f7;               /* subtle paper tone */
	--text: #111111;                /* primary text (dark) */
	--muted: #7f7f7f;
	--accent: #d3cfc5;              /* brand beige */
	--accent-2: #b8b2a6;            /* secondary warm */
	--dark-1: #0f0f0f;
	--dark-2: #121212;
	--surface-dark: #0a0a0a;
	--brand: #d3cfc5;
	--hero-text: #111111;
	--hero-overlay-light: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.04));
	--hero-overlay-dark: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.45));

	/* Header sizing tokens */
	--header-h: 64px;
	--header-control-h: 28px;


	/* Button system: theme-aware values used by all buttons/controls */
	--btn-bg: rgba(255,255,255,0.92);
	--btn-color: #111111;
	--btn-border: rgba(0,0,0,0.06);
	--btn-glow: rgba(17,17,17,0.06);
	--btn-glow-intense: rgba(17,17,17,0.14);
	--btn-elev: rgba(0,0,0,0.08);

	/* accessible focus ring (tuned per theme below) */
	--focus-ring: rgba(17,17,17,0.18);

	--dot-active-light: #111;
	--dot-active-dark: #fff;
	--control-bg-light: rgba(255,255,255,0.92);
	--control-color-light: #111;
	--control-bg-dark: rgba(255,255,255,0.06);
	--control-color-dark: #fff;
}

/* Screen reader utility: hide visually while keeping for assistive tech */
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

/* --------------------------------------------------
	 Final authoritative overrides (prevent conflicts)
	 - Ensures header controls are exactly aligned on the same baseline
	 - Forces hero video/panel/overlay to use expected stacking and colors
	 -------------------------------------------------- */


/* Reduce specificity issues on small screens while preserving layout */
@media(max-width:900px){
	.nav{ display:none !important; }
	.theme-btn{ margin-left:8px !important; }
	.hero-inner.hero-panel{ width:94% !important; margin:0 auto; }
}

/* Mobile: make hamburger compact and professional-looking */
.menu-toggle{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	gap:0.5rem;
	padding:0.5rem 1.1rem !important;
	border-radius:999px !important;
	font-weight:600;
	letter-spacing:0.08em;
	text-transform:uppercase;
	font-size:0.82rem;
	line-height:1;
}
.menu-toggle::before{
	content:'';
	display:inline-block;
	width:16px;
	height:10px;
	background:repeating-linear-gradient(to bottom, currentColor, currentColor 2px, transparent 2px, transparent 4px);
	border-radius:2px;
}
.menu-toggle:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:4px; }
.menu-toggle:hover{ filter:brightness(1.08); }
@media(min-width:901px){ .menu-toggle{ display:none !important; } }

@media(max-width:767px){
	/* Avoid vertical transforms on the hero panel on small screens to prevent layout/zoom issues */
	.hero .hero-inner{ transform: none !important; }
	.hero{ min-height:100vh; }
	.hero .hero-video,
	.hero .bg,
	.hero .hero-poster{
		top:0 !important;
		transform:none !important;
		height:100% !important;
		min-height:100vh;
	}
}

/* -----------------------------
	Authoritative hero overrides (kept for legacy compatibility)
	----------------------------- */
.hero-video, .hero video.hero-video, .hero .bg, .hero video.bg {
	position:absolute !important;
	top:50% !important;
	left:0 !important;
	transform:translateY(-50%) !important;
	width:100% !important;
	height:clamp(420px, 60vh, 720px) !important;
	object-fit:cover !important;
	z-index:-1 !important;
	pointer-events:none !important;
}
.hero-poster, .hero .hero-poster {
	position: absolute !important;
	top:50% !important;
	left:0 !important;
	transform:translateY(-50%) !important;
	width:100% !important;
	height:clamp(420px, 60vh, 720px) !important;
	background-size: cover !important;
	background-position: center !important;
	filter: blur(16px) saturate(1.05) !important;
	transition: opacity .72s ease, transform .72s ease !important;
	z-index: 0 !important;
}
.hero.video-ready .hero-poster, .hero.video-ready .hero .hero-poster{ opacity:0 !important; transform:scale(1.02) !important; pointer-events:none !important; }
.hero-overlay, .hero .overlay, .hero .hero-overlay { position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important; }
.hero .content { position:relative !important; z-index:2 !important; }
.hero-inner.hero-panel{ background: rgba(255,255,255,0.96) !important; color: var(--text) !important; box-shadow: 0 18px 48px rgba(0,0,0,0.10) !important; border:1px solid rgba(0,0,0,0.04) !important; }

/* force readable hero text in both themes */
.hero .hero-inner,
.hero .content,
.hero h1,
.hero h2,
.hero p,
.hero .hero-sub,
.hero .hero-title-line {
	color:#ffffff !important;
}

html.light .hero .hero-inner,
html.light .hero .content {
	color:#ffffff !important;
}

.hero .hero-inner a,
.hero .hero-inner .pill-button,
.hero .hero-inner .rounded-cta,
.hero .hero-inner .nav-pill {
	background:rgba(255,255,255,0.92) !important;
	color:#0a0a0a !important;
	border:1px solid rgba(255,255,255,0.12) !important;
}

@media(max-width:640px){
	.nav{ display:none !important; }
	.theme-btn{ margin-left:8px !important; }
	.brand{ font-size:1rem !important; }
}

.site-header .max-w-7xl{ padding-top:0; padding-bottom:0; }
.site-header .max-w-7xl[class*="py-"]{ padding-top:0; padding-bottom:0; }

@media(min-width:1024px){
	.hero{ position:relative; }
	/* On large screens, push the hero panel slightly left and lift it visually for an editorial layout */
	.hero .content{ padding-right:0 !important; }
	.hero .hero-inner{ position:relative; width:min(720px, 46%); max-width:820px; max-height:none; overflow:visible; text-align:left; padding:40px 56px 36px 64px; z-index:4; transform: translateY(-8px); }
	/* Make heading and paragraph align left for a more refined composition */
	.hero .hero-inner h1{ text-align:left; }
	.hero .hero-inner p, .hero .hero-inner ul{ text-align:left; margin-left:0; }
}
/* Ensure default light theme if no class is present on html */
html:not(.dark) body, html.light body{ background:var(--ivory); color:var(--text); /* light theme button tweaks: stronger for media contrast */ --btn-bg: rgba(255,255,255,0.96); --btn-color: var(--text); --btn-border: rgba(0,0,0,0.06); --btn-glow: rgba(17,17,17,0.06); --btn-glow-intense: rgba(17,17,17,0.16); --btn-elev: rgba(0,0,0,0.06); --focus-ring: rgba(17,17,17,0.30); }
/* Dark theme when html.dark is present */
html.dark body{ background:linear-gradient(180deg,var(--dark-1),var(--dark-2)); color:#f7f7f5;
	/* dark theme button tweaks: tuned for better contrast */
	--btn-bg: rgba(255,255,255,0.04);
	--btn-color: #f7f7f5;
	--btn-border: rgba(255,255,255,0.08);
	--btn-glow: rgba(255,255,255,0.04);
	--btn-glow-intense: rgba(255,255,255,0.12);
	--btn-elev: rgba(0,0,0,0.48);
	--focus-ring: rgba(255,255,255,0.30);
	--hero-text: #f7f7f5;
}

/* Dark-mode fallbacks for Tailwind utility classes used in HTML files
   Some templates use Tailwind neutral-600 / neutral-900 without dark: variants.
   Provide conservative fallbacks so text remains readable in html.dark. */
html.dark .text-neutral-600 { color: rgba(247,247,245,0.78) !important; }
html.dark .text-neutral-400 { color: rgba(247,247,245,0.62) !important; }
html.dark .text-neutral-800, html.dark .text-neutral-900, html.dark .text-neutral-700 { color: rgba(247,247,245,0.96) !important; }
html.dark .text-neutral-300, html.dark .text-neutral-100 { color: rgba(247,247,245,0.92) !important; }

/* Convert obvious white section backgrounds to low-contrast dark tints in html.dark */
html.dark .bg-white { background-color: rgba(255,255,255,0.03) !important; }
html.dark .bg-white\/60 { background-color: rgba(255,255,255,0.03) !important; }

/* Ensure card / panel text inherits a light color when a dark bg is present */
html.dark .about-card, html.dark .contact-panel, html.dark .hero-inner.hero-panel { color: inherit !important; }

/* Additional fallbacks for fractional bg utilities and common components */
html.dark .bg-white\/85 { background-color: rgba(255,255,255,0.04) !important; }
html.dark .bg-white\/90 { background-color: rgba(255,255,255,0.04) !important; }
html.dark .bg-white\/94 { background-color: rgba(255,255,255,0.05) !important; }

/* About timeline point: ensure visibility in dark mode when color is hardcoded */
html.dark .about-timeline .point { background: rgba(247,247,245,0.92) !important; box-shadow: 0 0 0 6px rgba(247,247,245,0.06) !important; }

/* Contact form inputs: ensure label and input colors remain legible */
html.dark .contact-input { color: rgba(247,247,245,0.95) !important; }
html.dark .contact-label { color: rgba(247,247,245,0.76) !important; }

/* Service cards and other white panels fallback */
html.dark .service-card, html.dark .gallery-track, html.dark .showcase-caption { background-color: rgba(255,255,255,0.03) !important; color: inherit !important; }

#blaze-production{
	display:block;
	width:100%;
	height:auto;
	overflow:visible;
	position:relative;
	z-index:10;
}

body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* header */
header.app-header{ position:fixed; top:0; left:0; width:100%; z-index:90; backdrop-filter: blur(8px); transition: background .25s ease, color .25s ease, border-color .25s ease; height:64px; }
html.light header.app-header { background: rgba(250,247,242,0.95); color:var(--text); border-bottom:1px solid rgba(0,0,0,0.04); }
html.dark header.app-header  { background: rgba(10,10,10,0.72); color:#f7f7f5; border-bottom:1px solid rgba(255,255,255,0.04); }

/* Make header sit above the hero panel */
header.app-header{ z-index:1200; }

/* Ensure mobile nav overlay and panel sit above all page chrome (authoritative) */
.site-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 9999 !important; }
.site-nav-overlay.open { opacity: 1; pointer-events: auto; }
.site-nav-panel { position: fixed; left: 0; top: 0; height: 100%; width: 320px; background: rgba(6,6,6,0.92); color: #fff; padding: 2.25rem 1.5rem; transform: translateX(-16px); opacity: 0; transition: transform .25s ease, opacity .25s ease; display:flex; flex-direction:column; gap:0.75rem; z-index: 10000 !important; }
.site-nav-overlay.open .site-nav-panel { transform: none; opacity: 1; }
.site-nav-panel .nav-pill{ width:100%; text-align:left; }

/* ensure body content isn't hidden under fixed header */
main{ padding-top:72px; }
@media(max-width:640px){ main{ padding-top:60px; } }
.header-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav-pill{ display:inline-block; }

/* Unified pill-button system */
:where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control) {
	--pill-height: 3rem;
	--pill-py: .75rem;
	--pill-px: 2.5rem;
	--pill-bg-light: var(--btn-bg);
	--pill-color-light: var(--btn-color);
	--pill-border-light: var(--btn-border);
	--pill-shadow-light: 0 12px 36px var(--btn-elev);
	--pill-bg-dark: transparent;
	--pill-color-dark: var(--accent);
	--pill-border-dark: var(--accent);
	--pill-shadow-dark: none;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: .45rem;
	padding: var(--pill-py) var(--pill-px) !important;
	min-height: var(--pill-height) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	text-transform: none !important;
	text-decoration: none !important;
	line-height: 1 !important;
	position: relative;
	transition: transform .28s cubic-bezier(.22,.9,.28,1), box-shadow .36s cubic-bezier(.22,.9,.28,1), background-color .18s ease, color .18s ease, border-color .18s ease;
	transform-origin: center center;
	will-change: transform, box-shadow;
	backface-visibility: hidden;
}

html:not(.dark) :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control) {
	background: var(--pill-bg-light) !important;
	color: var(--pill-color-light) !important;
	border: 1px solid var(--pill-border-light) !important;
	box-shadow: var(--pill-shadow-light) !important;
}

html:not(.dark) :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control):hover,
html:not(.dark) :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control):focus-visible {
	transform: translateY(-6px) scale(1.06);
	box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 40px var(--btn-glow-intense);
}

html:not(.dark) :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control):focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 6px;
}

html.dark :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control) {
	background: var(--pill-bg-dark) !important;
	color: var(--pill-color-dark) !important;
	border: 1px solid var(--pill-border-dark) !important;
	box-shadow: var(--pill-shadow-dark) !important;
}

html.dark :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control):hover,
html.dark :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control):focus-visible {
	background: var(--accent);
	color: #0a0a0a;
	transform: translateY(-4px) scale(1.04);
	box-shadow: 0 24px 60px rgba(211,207,197,0.28);
}

html.dark :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control):focus-visible {
	outline: 3px solid rgba(211,207,197,0.36);
	outline-offset: 6px;
}

:where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control):active {
	transform: translateY(-1px) scale(1.01);
	box-shadow: var(--pill-shadow-light);
}

html.dark :where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control):active {
	box-shadow: var(--pill-shadow-dark);
}

:where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control)[disabled],
:where(.pill-button, .kolasi-button, .header-control, .nav-pill, .menu-toggle, .theme-btn, .rounded-cta, .btn-primary, #visitBlaze, #visitKolasi, button, button[type="button"], button[type="submit"], button.quote-submit, input[type="button"], input[type="submit"], a.btn-on-media, a[role="button"], .action-group a, .ss-control).is-disabled {
	opacity: 0.58;
	transform: none !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	filter: saturate(0.82);
}

.site-header :where(.header-control, .nav-pill, .theme-btn) {
	--pill-height: var(--header-control-h);
	--pill-py: .45rem;
	--pill-px: 1.25rem;
	font-size: 0.95rem;
}

.site-header :where(.header-control, .nav-pill, .theme-btn):disabled {
	opacity: 0.58;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}


.header-divider{ width:1px; height:28px; background: rgba(0,0,0,0.06); margin:0 8px; border-radius:2px; }

.theme-btn{ cursor:pointer; }


/* Site loader: full-viewport overlay used during initial load and by Barba */
#site-loader{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0.68), rgba(0,0,0,0.82)); color:#fff; z-index:2000; transition:opacity .6s cubic-bezier(.2,.9,.2,1), visibility .6s ease; }
#site-loader[data-hidden='1']{ opacity:0; visibility:hidden; pointer-events:none; }
#site-loader .loader-inner{ text-align:center; font-family:Inter, system-ui, sans-serif; display:flex; flex-direction:column; gap:.6rem; align-items:center; width:min(620px,92%); padding:18px; }
#site-loader .loader-brand{ font-family:'Playfair Display', serif; font-size:28px; letter-spacing:0.04em; opacity:0.98; }
#site-loader .loader-pro{ font-size:0.95rem; margin-top:4px; max-width:560px; text-align:center; }
.progress-wrap{ width:100%; height:10px; background:rgba(255,255,255,0.07); border-radius:999px; overflow:hidden; margin-top:12px; }
.progress-bar{ height:100%; background:linear-gradient(90deg,#fff,#d3cfc5); width:0%; transition:width .28s cubic-bezier(.2,.9,.2,1); }
#site-loader .loader-meta{ display:flex; gap:12px; align-items:center; margin-top:10px; }
#loaderPercent{ font-weight:700; min-width:48px; text-align:right; }
#loaderText{ opacity:0.9; font-size:0.95rem; color:rgba(255,255,255,0.9); }
@media(prefers-reduced-motion:reduce){ .progress-bar{ transition:none; } }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
/* Hide page content until loader completes to avoid flash */
#site-content { opacity:1; transform:none; pointer-events:auto; transition: opacity .5s cubic-bezier(.2,.9,.2,1), transform .5s cubic-bezier(.2,.9,.2,1); will-change: opacity, transform; }
#site-content[data-loading='1']{ opacity:0; transform:translateY(6px); pointer-events:none; }


/* Cinematic modal styling: hidden by default, visible when .open is present */
#cinematicModal.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.72); visibility:hidden; opacity:0; pointer-events:none; transition:opacity .28s ease, visibility .28s; z-index:1200; }
#cinematicModal.modal.open{ display:flex; visibility:visible; opacity:1; pointer-events:auto; }
#cinematicModal .modal-close{ position:absolute; top:18px; right:18px; font-size:28px; color:#fff; background:transparent; border:none; cursor:pointer; }
#cinematicModal video{ max-width:92vw; max-height:86vh; border-radius:8px; box-shadow:0 24px 80px rgba(0,0,0,0.6); transform-origin:center center; transition: transform .42s cubic-bezier(.22,.9,.28,1), opacity .42s cubic-bezier(.22,.9,.28,1); }

/* Modal animation helper states (fallback if GSAP not present) */
#cinematicModal.modal-animating video{ transform: scale(.98); opacity:0; }
#cinematicModal.open video{ transform: scale(1); opacity:1; }

/* Prevent body scroll when modal open */
.no-scroll{ overflow:hidden; height:100%; }


.ss-control {
	background: var(--btn-bg);
	color: var(--btn-color);
	border: 1px solid var(--btn-border);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	font-size: 28px;
	cursor: pointer;
	transition: transform .28s cubic-bezier(.22,.9,.28,1), box-shadow .36s cubic-bezier(.22,.9,.28,1), background-color .18s ease, color .18s ease, border-color .18s ease;
	box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.ss-control:hover,
.ss-control:focus-visible {
	transform: translateY(-6px) scale(1.06);
	box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 40px var(--btn-glow-intense);
}

.ss-control:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 4px;
}

/* Helper for buttons that sit directly on media (hero, cards) to ensure contrast */
.btn-on-media{ background: color-mix(in srgb, var(--btn-bg) 86%, rgba(0,0,0,0.06)); border-color: color-mix(in srgb, var(--btn-border) 86%, rgba(0,0,0,0.06)); padding: 10px 18px; }
html.dark .btn-on-media{ background: color-mix(in srgb, var(--btn-bg) 86%, rgba(255,255,255,0.02)); border-color: color-mix(in srgb, var(--btn-border) 86%, rgba(255,255,255,0.02)); }

/* Action group: responsive ~ stacked on narrow screens, side-by-side on wide screens */
.action-group{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
@media(min-width:768px){ .action-group{ flex-direction:row; } }
.action-group .rounded-cta{ height:44px; padding:0 20px; font-size:1rem; }

/* Ensure header container items are centered and baseline aligned */
.site-header{ position:relative; z-index:9998; }
.site-header .max-w-7xl{ display:flex; align-items:center; gap:12px; height:100%; }
.site-header .brand{ display:flex; align-items:center; height:100%; flex:0 0 auto; }
.header-right{ align-items:center; display:flex; gap:12px; flex:0 0 auto; margin-left:auto; }
/* unified header-control sizing */
.root, :root{ --header-control-h:28px; }
.site-header .brand, .nav-pill, .theme-btn, .header-divider{ height:var(--header-control-h); display:inline-flex; align-items:center; }
.nav-pill{ min-width:84px; padding:0 10px; box-sizing:border-box; line-height:1; }
.theme-btn{ height:var(--header-control-h); padding:0 10px; min-width:72px; box-sizing:border-box; }
.header-divider{ width:1px; margin:0 8px; align-self:center; height:56%; background: rgba(0,0,0,0.06); }

@media(max-width:767px){
	.site-header{
		position:relative;
		z-index:9998;
		min-height:56px;
	}
	.site-header,
	.app-header{
		padding:0 1rem;
	}
	.site-header .max-w-7xl{
		display:flex;
		align-items:center;
		justify-content:center;
		position:relative;
		min-height:56px;
		height:56px !important;
		padding:0 !important;
	}
	.site-header .brand{
		flex:0 1 auto;
		min-width:0;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		text-align:center;
		max-width:100%;
	}
	.header-right{
		margin-left:0;
		gap:8px;
		position:absolute;
		right:0;
		top:50%;
		transform:translateY(-50%);
	}
	.site-header .menu-toggle,
	.site-header .theme-btn,
	.site-header .theme-toggle,
	.site-header [data-theme-toggle]{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		height:38px !important;
		min-height:38px !important;
		min-width:78px;
		padding:0 1rem !important;
		border-radius:9999px !important;
		font-size:0.8rem;
		line-height:1;
	}
	.site-header .theme-btn{
		margin-left:0 !important;
	}
	.site-header .menu-toggle{
		position:absolute;
		left:0;
		top:50%;
		transform:translateY(-50%);
	}
	.header-divider{ display:none; }
}

@media(max-width:900px){
	.header-divider{ display:none; }
}

/* Keep nav flexible but avoid fixed min-widths that cause reflow */
.nav { display:flex; align-items:center; gap:8px; }

/* Keep the hero panel and everything inside it visually identical to light mode
   even when html.dark is present. This forces the panel background, border,
   text color and button fills/icons to use the light-mode tokens. */
html.dark .hero-inner.hero-panel {
	background: rgba(12,12,12,0.78) !important;
	color: #f7f7f5 !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	box-shadow: 0 24px 70px rgba(0,0,0,0.55) !important;
	backdrop-filter: blur(8px) !important;
}

html.dark .hero-inner.hero-panel p { color: rgba(247,247,245,0.82) !important; }
html.dark .hero-inner.hero-panel h1 { color: inherit !important; }
/* Ensure icons and SVGs inside the hero panel inherit the correct color */
html.dark .hero-inner.hero-panel svg,
html.dark .hero-inner.hero-panel svg * { fill: currentColor !important; color: inherit !important; }

/* === BLAZE HERO FIX === */
/* match index hero colors for blaze hero */
.blaze-page .blaze-surface,
.blaze-page .blaze-surface .hero-content,
.blaze-page .blaze-surface h1,
.blaze-page .blaze-surface h2,
.blaze-page .blaze-surface h3,
.blaze-page .blaze-surface p,
.blaze-page .blaze-surface .subheading,
.blaze-page .blaze-surface .eyebrow {
	color: #ffffff;
}


html.light body.blaze-page .blaze-surface,
html.light body.blaze-page .blaze-surface h1,
html.light body.blaze-page .blaze-surface h2,
html.light body.blaze-page .blaze-surface p,
html.light body.blaze-page .blaze-surface .subheading,
html.light body.blaze-page .blaze-surface .eyebrow {
	color: #ffffff !important;
}

html.light body.blaze-page .blaze-surface .blaze-muted {
	color: rgba(255,255,255,0.86) !important;
}

body.blaze-page #heroContent .rounded-cta,
body.blaze-page #heroContent .pill-button,
body.blaze-page #heroContent .hero-cta {
	background: rgba(255,255,255,0.92);
	color: #0a0a0a;
	border: 1px solid rgba(255,255,255,0.15);
}

/* Make showcase arrows and dots higher contrast and match button pop */
.ss-control, .showcase-arrow{ background: var(--btn-bg); color: var(--btn-color); border:1px solid var(--btn-border); box-shadow:0 12px 34px var(--btn-elev); }
.ss-control:hover, .showcase-arrow:hover{ transform: translateY(-6px) scale(1.06); box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 40px var(--btn-glow-intense); }
.ss-dot{ background: rgba(255,255,255,0.6); border:1px solid rgba(0,0,0,0.06); }
.ss-dot.active{ box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

/* Animated reveal for Visit pills */
.visit-reveal{ animation: visitIn .36s cubic-bezier(.2,.9,.2,1) both; }
@keyframes visitIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }


/* HERO ~ centered panel for strong legibility over video */
.hero { position:relative; min-height:calc(100vh - var(--header-h,72px)); display:flex; align-items:center; justify-content:center; overflow:hidden; padding: calc(var(--header-h,72px) + 28px) clamp(1.5rem, 4vw, 3rem) clamp(64px, 11vh, 112px); text-align:center; }

/* Prefer dynamic viewport units where supported to avoid mobile address-bar shrink issues */
@supports (height: 100dvh) {
	.hero { min-height: calc(100dvh - var(--header-h,72px)); }
	.no-scroll { height: 100dvh; }
}
.hero-poster, .hero-video, .hero .bg, .hero video.bg {
	position:absolute !important;
	top:50% !important;
	left:0 !important;
	transform:translateY(-50%) !important;
	width:100% !important;
	height:clamp(420px, 60vh, 720px) !important;
	object-fit:cover !important;
	z-index:0 !important;
	filter: saturate(.96) contrast(.98) !important;
}
.hero-overlay, .hero .overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12)); }
html.light .hero-overlay, html.light .hero .overlay { background: linear-gradient(180deg, rgba(255,255,245,0.06), rgba(255,255,245,0.02)); }
html.dark .hero-overlay, html.dark .hero .overlay { background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.22)); }
.hero .content { position:relative; z-index:2; width:100%; max-width:1100px; color: var(--hero-text); display:flex; justify-content:center; align-items:center; padding:0 1rem; }
.hero .hero-inner{ position:relative; z-index:2; width:min(760px, 86%); max-width:960px; margin:0 auto; background: color-mix(in srgb, var(--btn-bg) 88%, #fff 12%); border-radius:12px; padding:28px 32px; box-shadow:0 30px 90px rgba(0,0,0,0.14); border:1px solid rgba(0,0,0,0.04); backdrop-filter: blur(6px); opacity:1; visibility:visible; }
.hero-panel{ display:block; width:100%; }
.hero .hero-inner h1{ margin:0 0 .45rem; font-size:clamp(1.9rem, 4.2vw, 3rem); line-height:1.03; text-align:center; }
.hero .hero-inner p{ margin:0 0 1rem; color: rgba(0,0,0,0.64); font-size:1.02rem; text-align:center; }

/* Hero title lines & ampersand styling (moved from inline in index.html) */
.hero-title-line{ display:block; text-align:center; }
/* Small improvement: ensure hero titles stack and have consistent spacing on small screens */
@media (max-width:767px){ .hero-title-line{ display:block; margin-bottom:0.25rem; } }
.hero-amp{ display:block; text-align:center; margin:0.25rem 0; font-weight:600; font-size:1.1em; line-height:1; }
.hero-sub{ text-align:center; max-width:54ch; margin:0.75rem auto 0; }
/* Hero bullet list: horizontal on wide screens, stacked on small screens */
.hero .hero-inner ul{
	list-style: none; /* hide default bullets visually but keep semantics */
	padding: 0;
	margin: 0 0 1rem;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.hero .hero-inner ul li{
	position: relative;
	padding-left: 18px;
	color: rgba(0,0,0,0.64);
	font-size: 0.98rem;
	line-height: 1.4;
}
/* Decorative dot to the left of each item (keeps screen-reader semantics intact) */
.hero .hero-inner ul li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width:6px;
	height:6px;
	background: rgba(0,0,0,0.5);
	border-radius:999px;
}
@media(min-width:1024px){
	.hero .hero-inner p, .hero .hero-inner ul{ text-align:left; }
	/* Force the hero list into a single row on desktop */
	.hero .hero-inner ul{ flex-wrap: nowrap; }
	.hero .hero-inner ul li{ flex: 0 0 calc((100% - 36px) / 3); /* three columns with gap accounted */ }
}

/* Blaze highlight points (single row on desktop) */
.blaze-points{ list-style:none; padding:0; margin:0 0 1rem; display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.blaze-points li{ position:relative; padding-left:18px; color: rgba(0,0,0,0.64); font-size:0.98rem; line-height:1.4; }
.blaze-points li::before{ content:''; position:absolute; left:0; top:8px; width:6px; height:6px; background: rgba(0,0,0,0.5); border-radius:999px; }
@media(min-width:1024px){
	.blaze-points{ flex-wrap: nowrap; }
	.blaze-points li{ flex: 0 0 calc((100% - 36px) / 3); }
}
@media(min-width:1024px){
	.hero{ min-height:calc(100vh - var(--header-h,72px)); padding: calc(var(--header-h,72px) + 48px) clamp(2rem, 6vw, 4rem) clamp(72px, 12vh, 128px); }
	.hero .hero-inner{ width:min(760px, 58%); padding:32px 40px; }
}
@media(max-width:900px){
	.hero{ text-align:center; min-height:72vh; padding: calc(var(--header-h,72px) + 20px) 1.25rem 72px; }
	.hero .content{ padding:0; }
	.hero .hero-inner{ width:94%; margin-left:auto; margin-right:auto; max-width:720px; padding:22px; }
	.nav a, .nav-pill{ display:none; }
	.header-right{ gap:6px; }
}

/* Kolasi-specific light hero variant (use <section class="hero kolasi"> on Kolasi landing) */
.hero.kolasi .overlay { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86)); }
.hero.kolasi .content { color: #111111; text-shadow: 0 8px 22px rgba(255,255,255,0.7); }
.hero h1 { font-family:'Playfair Display', serif; font-size: clamp(2rem, 5vw, 4.25rem); line-height:1.02; margin:0 0 .6rem; }
.hero p { font-size: clamp(1rem, 2.2vw, 1.125rem); margin:0 0 1rem; color: var(--muted); }

/* custom cursor element */
#cursor{position:fixed; left:0; top:0; width:20px; height:20px; border-radius:50%; pointer-events:none; z-index:99999; transform:translate(-50%,-50%); transition: transform .12s linear, width .18s ease, height .18s ease, border .18s ease; mix-blend-mode:difference; border:1.6px solid rgba(255,255,255,0.95); background:transparent; }
#cursor.grow, .cursor--grow{ width:40px; height:40px; background: rgba(255,255,255,0.06); border-width:1.8px; }


/* Showcase minimal, elegant styling (extracted) */
.showcase-track{ padding:18px; }
.showcase-caption-wrap{ display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.showcase-caption{ padding:8px 18px; border-radius:999px; background: color-mix(in srgb, var(--btn-bg) 88%, #fff 12%); color:var(--text); box-shadow: 0 12px 36px rgba(0,0,0,0.06); max-width:900px; width: min(88%, 900px); text-align:center; }
.showcase-caption .showcap-title{ font-weight:700; font-size:1.05rem; }
.showcase-caption .showcap-desc{ margin-top:4px; color:var(--muted); font-size:0.95rem; }

/* Dark-mode: make the showcase caption pill darker and the text light for contrast */
html.dark .showcase-caption{
	background: rgba(0,0,0,0.36) !important;
	color: var(--ivory) !important;
	box-shadow: 0 12px 36px rgba(0,0,0,0.48) !important;
}
html.dark .showcase-caption .showcap-title{ color: var(--ivory) !important; }
html.dark .showcase-caption .showcap-desc{ color: rgba(247,247,245,0.85) !important; }
.showcase-slides{ position:relative; height:60vh; max-height:560px; }
.showcase-slide{ position:absolute; inset:0; display:flex; align-items:end; justify-content:center; padding:28px; opacity:0; transition:opacity .7s ease; pointer-events:none; }
.showcase-slide.active{ opacity:1; z-index:2; pointer-events:auto; }
.showcase-slide video{ width:100%; height:100%; object-fit:cover; border-radius:8px; box-shadow:0 28px 80px rgba(0,0,0,0.16); pointer-events:auto; }
.showcap{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:28px;
	z-index:40;
	color:var(--ivory);
	background: rgba(0,0,0,0.42);
	padding:12px 18px;
	border-radius:10px;
	font-size:.95rem;
	backdrop-filter: blur(6px);
	box-shadow: 0 18px 48px rgba(0,0,0,0.12);
	max-width: min(86%, 860px);
	width: auto;
}
.showcap-title{ font-weight:700; font-size:1.05rem; margin-bottom:6px; }
.showcap-desc{ font-size:0.95rem; opacity:0.95; }
.ss-control{ position:absolute; top:50%; transform:translateY(-50%); background: var(--control-bg-light); color: var(--control-color-light); border:0; width:48px; height:48px; border-radius:9999px; font-size:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:90; pointer-events:auto; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.ss-prev{ left:12px; } .ss-next{ right:12px; }
.ss-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px; z-index:60; }
.ss-dot{ width:10px; height:10px; border-radius:9999px; background:rgba(255,255,255,0.6); border:0; cursor:pointer; }
.ss-dot.active{ background:var(--dot-active-light); }
@media(max-width:900px){ .showcase-slides{ height:44vh; } .showcase-slide{ padding:12px; } }


/* Use explicit theme classes on <html> for predictable colors */
html.light .showcap{ background: color-mix(in srgb, var(--btn-bg) 88%, #fff 12%); color:var(--text); box-shadow: 0 18px 48px rgba(0,0,0,0.06); }
html.light .ss-control{ background:var(--control-bg-light); color:var(--control-color-light); }
html.dark .showcap{ background: rgba(0,0,0,0.42); color:var(--ivory); }
html.dark .ss-control{ background:var(--control-bg-dark); color:var(--control-color-dark); }
html.dark .ss-dot.active{ background:var(--dot-active-dark); }

/* Hide in-slide captions now that we show the caption above the track */
.showcase-track .showcap{ display:none !important; }


/* Blaze gallery grid and helpers */
.gallery-grid{ display:grid; grid-template-columns:repeat(1,1fr); gap:1.5rem; }
@media(min-width:640px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:768px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
.gallery-item{ display:block; width:100%; height:100%; object-fit:cover; }

/* Aspect helper: 3:2 crop container and slight max-width to make gallery feel smaller */
.aspect-3-2{ position:relative; width:100%; padding-bottom:66.6666%; overflow:hidden; border-radius:0.375rem; }
.aspect-3-2 img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; transition: transform .36s cubic-bezier(.22,.9,.28,1), box-shadow .36s cubic-bezier(.22,.9,.28,1); will-change: transform, box-shadow; transform-origin:center center; }
.aspect-3-2 img.blaze-fill{ object-fit:cover; }

/* Ensure the actual img corners are clipped and match container rounding */
.aspect-3-2 img, .gallery-grid figure img { border-radius: inherit; }

/* Showcase arrows: directional 'pop' ~ slide slightly outwards + pop */
.ss-prev:hover, .ss-prev:focus-visible { transform: translateX(-8px) translateY(-6px) scale(1.06); box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 40px var(--btn-glow-intense); }
.ss-next:hover, .ss-next:focus-visible { transform: translateX(8px) translateY(-6px) scale(1.06); box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 40px var(--btn-glow-intense); }

/* Hover pop for images and videos ~ refined scale + soft shadow for a AAA feel */
.aspect-3-2:hover img, .gallery-grid figure:hover img, .service-card:hover img, .service-card:hover video{ transform: translateZ(0) scale(1.035); box-shadow: 0 20px 50px rgba(0,0,0,0.14); }
/* Disable hover pop for videos inside the showcase slides (we keep arrows interactive) */
.showcase-slide video:hover, .showcase-slide video:focus { transform: none !important; box-shadow: none !important; }
/* Kolasi images: lighter hover (GPU only) to avoid repaint and jank */
	.kolasi-gallery img{
		will-change: transform, opacity;
		transition: transform .45s cubic-bezier(.22,.9,.28,1), box-shadow .45s cubic-bezier(.22,.9,.28,1), opacity .36s ease;
	}
	/* Reduce costly shadow on hover; prefer subtle transform + fade for smoothness */
	.kolasi-gallery img:hover{ transform: translateZ(0) scale(1.02); box-shadow: 0 6px 12px rgba(0,0,0,0.06); }
.showcase-slide video:hover, .service-card video:hover{ transform: translateZ(0) scale(1.03); box-shadow: 0 22px 60px rgba(0,0,0,0.16); }

/* Keyboard accessibility: apply the same pop on focus-visible */
.aspect-3-2 img:focus-visible, .gallery-grid figure:focus-visible img, .kolasi-gallery img:focus-visible, .service-card:focus-visible img{ outline: none; transform: translateZ(0) scale(1.035); box-shadow: 0 20px 50px rgba(0,0,0,0.14); }

/* Content-aware layout tweaks for Blaze images */
.gallery-grid figure.landscape{ padding-bottom:60%; }
.gallery-grid figure.portrait{ padding-bottom:120%; }
.gallery-grid figure.square{ padding-bottom:100%; }
.gallery-grid figure.landscape img{ object-fit:cover; }
.gallery-grid figure.portrait img{ object-fit:contain; }
.gallery-grid figure.square img{ object-fit:cover; }

.blaze-grid img,
.blaze-photo{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.blaze-photo--portrait{
	object-position: center top;
}

/* Tweak: larger Blaze gallery variant (applies when wrapper has .blaze-grid--large)
	 - keeps 3x3 on md+ but makes images visually larger by reducing gutters and increasing container scale
	 - preserved rounded corners and hover behavior
*/
.blaze-grid--large { gap: 1rem; }
@media(min-width:768px){
	/* Taller, subtler gallery for md+ screens */
	.blaze-grid--large { gap: 0.9rem; }
	/* Increase container height (taller crop) so images fit more naturally */
	.blaze-grid--large .aspect-3-2{ padding-bottom:78%; border-radius:0.5rem; }
	/* center images and prefer a subtler hover */
	.blaze-grid--large .aspect-3-2 img{ transform-origin:center center; object-position:center center; will-change: transform; }
}
@media(min-width:1024px){
	.blaze-grid--large { grid-auto-rows: 1fr; }
	/* slightly reduced gutter at large screens */
	.blaze-grid--large { gap: 0.85rem; }
	/* keep a subtle hover scale to avoid cropping illusions */
	.blaze-grid--large .img-zoom:hover{ transform: scale(1.025); }
}

/* Conflict-resolver: ensure transforms do not compound (figure + img)
	 - existing global rules scale the <img> and some rules scale the figure.
	 - inside .blaze-grid--large we prefer a single image transform.
*/
.blaze-grid--large .img-zoom{ /* neutralize any transform applied to the wrapper */
	transform: none !important;
}
/* When the modifier sits on the same element as the grid, target figures directly */
.blaze-grid--large .aspect-3-2:hover img,
.blaze-grid--large figure:hover img,
.blaze-grid--large .service-card:hover img {
	transform: translateZ(0) scale(1.025) !important;
	box-shadow: 0 20px 50px rgba(0,0,0,0.14) !important;
}

/* Ensure direct child figures use the taller crop and no background so image fills edge-to-edge */
.blaze-grid--large > figure, .blaze-grid--large > .aspect-3-2 { background: transparent; }
.blaze-grid--large > figure { display:block; }

/* Robust final overrides for Blaze galleries to avoid layout gaps */
.blaze-grid--large {
	/* ensure grid children do not inherit unexpected margins */
	margin: 0;
}
.blaze-grid--large > figure {
	margin: 0; /* reset browser default figure margin */
	padding: 0;
	background: transparent !important;
	overflow: hidden; /* ensure rounded corners clip content */
}
.blaze-grid--large .aspect-3-2,
.blaze-grid--large .aspect-3-2 img,
.blaze-grid--large .aspect-3-2 img.blaze-fill {
	position: relative !important;
}
.blaze-grid--large .aspect-3-2 img,
.blaze-grid--large .aspect-3-2 img.blaze-fill {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: inherit !important;
}
.blaze-grid--large .aspect-3-2::before,
.blaze-grid--large .aspect-3-2::after,
.blaze-grid--large > figure::before,
.blaze-grid--large > figure::after { display: none !important; }

/* Editorial-specific fit: show entire image when possible, increase height for editorial & brand images */
.blaze-editorial--fit { gap: 0.95rem; }
.blaze-editorial--fit .aspect-3-2 { padding-bottom: 86%; }
.blaze-editorial--fit img { object-fit: contain !important; object-position: center center !important; background: rgba(255,255,255,0.02); }
.blaze-editorial--fit .aspect-3-2 img { border-radius: inherit !important; }

/* High-specificity safeguard: ensure editorial images are never cropped by other rules.
	 We prefer contain; if the image is smaller than the container, allow it to scale up slightly
	 while retaining aspect ratio. This override uses attribute and class combination to win
	 against earlier rules that set object-fit:cover for the global blaze grid.
*/
div.blaze-grid--large.blaze-editorial--fit > figure.aspect-3-2 img[loading],
div.blaze-grid--large.blaze-editorial--fit > figure.aspect-3-2 img {
	object-fit: contain !important;
	object-position: center center !important;
	width: auto !important;
	height: 100% !important;
	max-width: 100% !important;
	display: block !important;
	background: transparent !important;
}

/* If letterboxing occurs and you prefer a full-bleed look, toggle this variable to `cover` */
:root { --blaze-editorial-fit-mode: contain; }
div.blaze-grid--large.blaze-editorial--fit > figure.aspect-3-2 img {
	object-fit: var(--blaze-editorial-fit-mode) !important;
}

/* Ensure non-editorial Blaze grids (Weddings / Speakeasy) fill their containers
	 and override any portrait/contain rules that may have been applied elsewhere. */
.blaze-grid--large:not(.blaze-editorial--fit) .aspect-3-2 img,
.blaze-grid--large:not(.blaze-editorial--fit) .aspect-3-2 img.blaze-fill,
.blaze-grid--large:not(.blaze-editorial--fit) > figure img {
	/* Allow images to size naturally while still filling width; cap height responsively
	   so galleries remain visually compact and consistent across breakpoints. */
	object-fit: cover !important;
	object-position: center center !important;
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	height: auto !important;
	display: block !important;
	max-height: 12rem !important; /* mobile default cap (~192px) */
}

@media(min-width:768px){
	.blaze-grid--large:not(.blaze-editorial--fit) > figure img {
		max-height: 16rem !important; /* md+ cap (~256px) ~ matches h-64 */
	}
}

/* Override portrait-specific contain rule inside Blaze large grids */
.blaze-grid--large:not(.blaze-editorial--fit) figure.portrait img {
	object-fit: cover !important;
}

/* Blaze lightbox styles */
.blaze-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.82); z-index:1400; }
.blaze-lightbox[aria-hidden="false"]{ display:flex; }
.blaze-lightbox .lb-stage{ max-width:92vw; max-height:86vh; display:flex; align-items:center; justify-content:center; }
.blaze-lightbox img{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 40px 120px rgba(0,0,0,0.6); object-fit:contain; }
.blaze-lightbox .lb-close, .blaze-lightbox .lb-prev, .blaze-lightbox .lb-next{ position:fixed; background:var(--btn-bg); color:var(--btn-color); border:1px solid var(--btn-border); height:44px; width:44px; border-radius:9999px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1450; }
.blaze-lightbox .lb-close{ right:20px; top:20px; }
.blaze-lightbox .lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.blaze-lightbox .lb-next{ right:18px; top:50%; transform:translateY(-50%); }
.blaze-lightbox .lb-prev:hover, .blaze-lightbox .lb-next:hover, .blaze-lightbox .lb-close:hover{ transform: translateY(-6px) scale(1.04); box-shadow: 0 24px 60px rgba(0,0,0,0.28), 0 0 28px var(--btn-glow-intense); }


/* Button styles unified above ~ rounded-cta specifics removed to avoid duplication */

/* Ensure ALL semantic buttons and CTA anchors use the same subtle pop as Blaze images */
button, input[type="button"], input[type="submit"], a[role="button"],
.rounded-cta, .btn-primary, .theme-btn, .nav-pill, .header-control, a.btn-on-media, .action-group a, .ss-control {
	transition: transform .28s cubic-bezier(.22,.9,.28,1), box-shadow .36s cubic-bezier(.22,.9,.28,1), background-color .18s ease, color .18s ease;
	transform-origin: center center;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, a[role="button"]:hover,
.rounded-cta:hover, .btn-primary:hover, .theme-btn:hover, .nav-pill:hover, .header-control:hover, a.btn-on-media:hover, .action-group a:hover, .ss-control:hover,
button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, a[role="button"]:focus-visible,
.rounded-cta:focus-visible, .btn-primary:focus-visible, .theme-btn:focus-visible, .nav-pill:focus-visible, .header-control:focus-visible, a.btn-on-media:focus-visible, .action-group a:focus-visible, .ss-control:focus-visible {
	transform: translateY(-6px) translateZ(0) scale(1.06);
	box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 40px var(--btn-glow-intense);
}

/* Explicit fallback with extra specificity for pages that may still have legacy overrides */
.rounded-cta:hover, .rounded-cta:focus-visible, .kolasi-button:hover, .kolasi-button:focus-visible {
    transform: translateY(-6px) translateZ(0) scale(1.06) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 0 40px var(--btn-glow-intense) !important;
}

/* Keep motion-reduced UX friendly */
@media (prefers-reduced-motion: reduce){
	.aspect-3-2 img, .showcase-slide video, .rounded-cta, .gallery-grid figure, .service-card{ transition: none !important; transform: none !important; box-shadow: none !important; }
}
.more-item.hidden{ display:none; }

/* Kolasi extras hidden helper */
.more-kolasi.hidden{ display:none; }

/* Kolasi section: ensure videos fit within the section and do not overflow the viewport */
.kolasi-section{ background: transparent; color: inherit; }
.kolasi-section .grid{ align-items:start; }
.kolasi-section video{ max-height: min(52vh, 480px); width:100%; height:auto; object-fit:cover; display:block; border-radius:8px; will-change: transform, opacity; }
.kolasi-section .rounded-lg{ overflow:hidden; }

/* If kolasi-section needs a dark look on kolasi landing, use .kolasi-dark modifier */
.kolasi-section.kolasi-dark{ background:var(--surface-dark); color:var(--ivory); }


/* Small utilities retained from inline styles */
.card-pop{ cursor:pointer; }

/* reduced motion preference */
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }

/* Smooth scroll reveal utility */
[data-reveal]{
	opacity:0;
	transform:translateY(28px);
	transition:opacity .8s cubic-bezier(.22,.9,.28,1), transform .8s cubic-bezier(.22,.9,.28,1), filter .8s ease;
	filter:blur(6px);
	will-change:transform, opacity;
}
[data-reveal].is-visible{
	opacity:1;
	transform:none;
	filter:blur(0);
}

@media (max-width: 767px){
	[data-reveal].is-visible{
		opacity:1 !important;
		transform:none !important;
		filter:none !important;
	}
	.force-visible-mobile,
	.force-visible-mobile[data-reveal],
	.force-visible-mobile [data-reveal]{
		opacity:1 !important;
		transform:none !important;
		filter:none !important;
	}
}

@media (max-width: 767px){
	.contact-page .form-wrapper,
	.contact-page form{
		width:100%;
		max-width:100%;
		display:block;
		padding:1rem 1.25rem 2.5rem;
		gap:1rem;
	}
	.contact-page .form-row{ display:block; }
	.contact-page input,
	.contact-page textarea,
	.contact-page select{
		width:100%;
	}
}

/* Simple Blaze carousel ~ 3-up desktop, responsive stack on small screens */
.blaze-carousel{
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	--carousel-gap:1rem;
	--carousel-visible:3;
}
.blaze-carousel .carousel-viewport{ overflow:hidden; width:100%; }
.blaze-carousel .carousel-track{
	display:flex;
	gap:var(--carousel-gap);
	transition:transform .42s cubic-bezier(.22,.9,.28,1);
	will-change:transform;
}
.blaze-carousel .carousel-item{
	--carousel-width: calc((100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible));
	flex: 0 0 min(var(--carousel-width), 340px);
	max-width: min(var(--carousel-width), 340px);
	box-sizing:border-box;
	border-radius:12px;
	overflow:hidden;
	background:var(--btn-bg);
	box-shadow:0 18px 46px rgba(0,0,0,0.06);
	display:flex;
	justify-content:center;
	align-items:center;
	aspect-ratio: 3 / 2;
}
.blaze-carousel .carousel-item img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	box-sizing:border-box;
}
/* Orientation helpers so each card can match its source aspect ratio */
.blaze-carousel .carousel-item.is-portrait{ aspect-ratio: 2 / 3; }
.blaze-carousel .carousel-item.is-square{ aspect-ratio: 1 / 1; }
.blaze-carousel .carousel-item.is-landscape{ aspect-ratio: 3 / 2; }
.blaze-carousel .carousel-item.is-portrait img,
.blaze-carousel .carousel-item.is-square img{ object-fit:cover; }
.blaze-carousel .carousel-prev, .blaze-carousel .carousel-next{ background: var(--btn-bg); border:1px solid var(--btn-border); color:var(--btn-color); height:56px; width:56px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 12px 34px rgba(0,0,0,0.06); font-size:28px; }
.blaze-carousel .carousel-prev{ margin-right:8px; }
.blaze-carousel .carousel-next{ margin-left:8px; }
@media(max-width:767px){
	.blaze-carousel{ gap:0.75rem; align-items:stretch; }
	.blaze-carousel .carousel-prev,
	.blaze-carousel .carousel-next{ display:none; }
	.blaze-carousel .carousel-viewport{
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
		-webkit-overflow-scrolling:touch;
		padding-bottom:2px;
	}
	.blaze-carousel .carousel-viewport::-webkit-scrollbar{ display:none; }
	.blaze-carousel .carousel-track{
		gap:0.75rem;
		flex-wrap:nowrap;
		min-width:max(100%, 280px);
		transform:none !important;
	}
	.blaze-carousel .carousel-item{
		--carousel-mobile-width: min(62vw, 210px);
		flex:0 0 var(--carousel-mobile-width);
		max-width:var(--carousel-mobile-width);
		scroll-snap-align:center;
		min-width:var(--carousel-mobile-width);
		aspect-ratio: 16 / 9;
	}
	.blaze-carousel .carousel-item.is-portrait{ aspect-ratio: 10 / 13; }
	.blaze-carousel .carousel-item.is-square{ aspect-ratio: 1 / 1; }
	.blaze-carousel .carousel-item.is-landscape{ aspect-ratio: 16 / 9; }
	.blaze-carousel .carousel-item img{
		height:auto;
		width:100%;
		max-height:85vh;
	}
	.blaze-gallery{
		display:flex;
		gap:1rem;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		padding-bottom:0.5rem;
		scroll-behavior:smooth;
		-webkit-overflow-scrolling:touch;
	}
	.blaze-gallery > *{
		scroll-snap-align:center;
		flex:0 0 80%;
	}
}

/* Editorial modifier: reuse base card styling so visuals match the weddings carousel */
.blaze-carousel[data-editorial="true"] .carousel-item img{ object-fit:cover; }