/* ==========================================================================
   Marck & Aira Industrial — design tokens & component styles
   Converted from the original Tailwind v4 (@theme / @utility) source into
   plain CSS custom properties + classes. Grid/flex/spacing/typography
   utilities are handled by the Tailwind CDN build (see tailwind-config.js);
   this file covers everything that isn't a stock Tailwind utility.
   ========================================================================== */

:root {
	--radius: 0.5rem;

	--navy: #143B63;
	--navy-deep: #0F2D4C;
	--steel: #5B6670;
	--industrial: #1E88E5;
	--charcoal: #222831;
	--offwhite: #F7F8FA;
	--graphite: #2E2E2E;

	--background: #F7F8FA;
	--foreground: #22262B;
	--card: #FFFFFF;
	--border: #DBE0E6;
	--muted: #EEF0F3;
	--muted-foreground: #5B6670;

	--shadow-card: 0 2px 8px -2px rgba(20, 40, 70, 0.08), 0 8px 24px -8px rgba(20, 40, 70, 0.12);
	--shadow-card-hover: 0 8px 20px -4px rgba(20, 40, 70, 0.15), 0 20px 50px -10px rgba(20, 40, 70, 0.25);

	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
	--font-display: "Montserrat", "Inter", sans-serif;
}

html { scroll-behavior: smooth; }

body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--navy);
}

/* ---------------------------------------------------------------------- */
/* Layout utilities                                                       */
/* ---------------------------------------------------------------------- */

.container-x {
	padding-inline: 1.25rem;
	margin-inline: auto;
	max-width: 1400px;
	width: 100%;
}
@media (min-width: 768px)  { .container-x { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .container-x { padding-inline: 4rem; } }

.section { padding-block: 5rem; }
@media (min-width: 768px) { .section { padding-block: 7rem; } }

.eyebrow {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--industrial);
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

.btn-primary, .btn-ghost, .btn-outline-dark {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	border-radius: 2px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	border: 1px solid transparent;
}

.btn-primary {
	background: var(--industrial);
	color: #fff;
	border-color: var(--industrial);
}
.btn-primary:hover {
	background: var(--navy);
	border-color: var(--navy);
	transform: translateY(-2px);
	box-shadow: 0 10px 25px -8px rgba(20, 59, 99, 0.5);
}

.btn-ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.4);
}
.btn-ghost:hover {
	background: #fff;
	color: var(--navy);
	border-color: #fff;
}

.btn-outline-dark {
	background: transparent;
	color: var(--navy);
	border-color: var(--navy);
}
.btn-outline-dark:hover {
	background: var(--navy);
	color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Product cards                                                          */
/* ---------------------------------------------------------------------- */

.product-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--border);
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	display: block;
}
.product-card:hover {
	border-color: var(--industrial);
	transform: translateY(-6px);
	box-shadow: var(--shadow-card-hover);
}
.product-card:hover .product-image { transform: scale(1.08); }
.product-image { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------- */
/* Header                                                                 */
/* ---------------------------------------------------------------------- */

.maa-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	transition: all 0.5s ease;
	background: transparent;
}
.maa-header.is-solid {
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.maa-logo-mark {
	clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}
.maa-header .maa-nav-link { color: rgba(255,255,255,0.9); }
.maa-header.is-solid .maa-nav-link { color: var(--graphite); }
.maa-header .maa-nav-link:hover { color: #fff; }
.maa-header.is-solid .maa-nav-link:hover { color: var(--industrial); }
.maa-header .maa-nav-link.is-active { color: #fff; }
.maa-header.is-solid .maa-nav-link.is-active { color: var(--industrial); }
.maa-header .maa-brand-name { color: #fff; }
.maa-header.is-solid .maa-brand-name { color: var(--navy); }
.maa-header .maa-brand-sub { color: rgba(255,255,255,0.7); }
.maa-header.is-solid .maa-brand-sub { color: var(--steel); }
.maa-header .maa-menu-btn { color: #fff; }
.maa-header.is-solid .maa-menu-btn { color: var(--navy); }
.maa-header .maa-logo-mark { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); }
.maa-header.is-solid .maa-logo-mark { background: var(--navy); border-color: transparent; }

#maa-mobile-menu { display: none; }
#maa-mobile-menu.is-open { display: block; }

/* ---------------------------------------------------------------------- */
/* Animations                                                             */
/* ---------------------------------------------------------------------- */

@keyframes marck-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marck-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes marck-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes marck-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ken-burns { 0% { transform: scale(1.05) translate(0,0); } 100% { transform: scale(1.15) translate(-1%,-1%); } }

.animate-fade-up { animation: marck-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.animate-fade-in-slow { animation: marck-fade-in 1.2s ease-out both; }
.animate-scale-in { animation: marck-scale-in 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.animate-marquee { animation: marck-marquee 40s linear infinite; }
.animate-ken-burns { animation: ken-burns 20s ease-in-out infinite alternate; }

/* ---------------------------------------------------------------------- */
/* Misc                                                                   */
/* ---------------------------------------------------------------------- */

.maa-cat-filter.is-active {
	border-left-color: var(--industrial) !important;
	background: rgba(30,136,229,0.05);
	color: var(--industrial) !important;
}

.maa-map-embed { filter: grayscale(1); transition: filter 0.7s ease; }
.maa-map-embed:hover { filter: grayscale(0); }

/* Google-maps-style embed height */
.maa-map-wrap { width: 100%; height: 480px; position: relative; }
.maa-map-wrap iframe { width: 100%; height: 100%; border: 0; }