/* ============================================
   IronCraft Doors — Kadhavu Template Replica
   Light warm theme · Premium door company
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --color-bg:          #ffffff;
    --color-bg-alt:      #f8f5f0;
    --color-bg-card:     #ffffff;
    --color-bg-elevated: #f5f0ea;
    --color-surface:     #efe8de;
    --color-border:      #e5ddd0;
    --color-border-light:#ede6d9;
    --color-accent:      #c4813d;
    --color-accent-light:#d9a066;
    --color-accent-dark: #a06928;
    --color-accent-glow: rgba(196, 129, 61, 0.08);
    --color-gold:        #c4813d;
    --color-gold-light:  #d9a066;
    --color-gold-dark:   #a06928;
    --color-gold-glow:   rgba(196, 129, 61, 0.08);
    --color-dark:        #1a1a2e;
    --color-dark-soft:   #2d2d3f;
    --color-text:        #444444;
    --color-text-muted:  #888888;
    --color-text-dim:    #aaaaaa;
    --color-white:       #ffffff;
    --color-black:       #000000;
    --color-topbar:      #1a1a1a;
    --color-success:     #22c55e;
    --color-error:       #ef4444;
    --color-warning:     #f59e0b;
    --color-info:        #3b82f6;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs:   0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
    --text-xl:   1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.75rem;
    --text-5xl:  3.5rem; --text-6xl: 4.5rem;
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
    --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
    --container-max: 1320px; --container-narrow: 900px;
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
    --radius-2xl: 24px; --radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.1); --shadow-xl: 0 16px 50px rgba(0,0,0,0.12);
    --shadow-accent: 0 4px 20px rgba(196, 129, 61, 0.15);
    --shadow-card: 0 2px 12px rgba(0,0,0,0.05);
    --transition-fast: 150ms ease; --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-overlay: 400; --z-toast: 500;
}

/* ── Reset ────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
    font-family: var(--font-body); font-size: var(--text-base); line-height:1.6;
    color: var(--color-text); background: var(--color-bg);
    -webkit-font-smoothing: antialiased; overflow-x:hidden;
}
img, video { max-width:100%; height:auto; display:block; }
a { color: var(--color-accent); text-decoration:none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-dark); }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:700; line-height:1.2; color:var(--color-dark); }
.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 var(--space-4); }

/* ── Top Bar ──────────────────────────────── */
.topbar {
    background: var(--color-topbar); color: rgba(255,255,255,0.7);
    font-size: var(--text-xs); padding: var(--space-2) 0; letter-spacing:0.3px;
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); }
.topbar-left { display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.topbar-left a, .topbar-left span { color:rgba(255,255,255,0.7); display:inline-flex; align-items:center; gap:var(--space-1); }
.topbar-left a:hover { color:var(--color-accent-light); }
.topbar-right { display:flex; align-items:center; gap:var(--space-4); }
.topbar-hours { display:none; }
.topbar-social { display:flex; align-items:center; gap:var(--space-3); }
.topbar-social a { color:rgba(255,255,255,0.6); font-size:var(--text-sm); transition:color var(--transition-fast); }
.topbar-social a:hover { color:var(--color-accent-light); }

/* ── Navbar ───────────────────────────────── */
.navbar {
    position:sticky; top:0; z-index:var(--z-sticky);
    background:var(--color-white); border-bottom:1px solid var(--color-border);
    transition: box-shadow var(--transition-base);
}
.navbar.scrolled { box-shadow:var(--shadow-md); }
.navbar-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.navbar-brand {
    display:flex; align-items:center; gap:var(--space-2);
    font-family:var(--font-display); font-size:var(--text-lg); font-weight:700;
    color:var(--color-dark); letter-spacing:0.5px;
    white-space: nowrap;
}
@media (min-width: 480px) {
    .navbar-brand { font-size:var(--text-xl); gap:var(--space-3); }
}
.navbar-brand .brand-icon {
    width:38px; height:38px; background:var(--color-accent); border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center; font-size:var(--text-lg); color:white;
}
.navbar-brand span { color:var(--color-dark); white-space: nowrap; }
.nav-links { display:none; list-style:none; gap:var(--space-1); }
.nav-links a {
    display:block; padding:var(--space-2) var(--space-4); color:var(--color-text);
    font-size:var(--text-sm); font-weight:500; text-transform:uppercase; letter-spacing:1px;
    border-radius:var(--radius-md); transition:all var(--transition-fast);
}
.nav-links a:hover, .nav-links a.active { color:var(--color-accent); }
.nav-cta { display:none; align-items:center; gap:var(--space-4); }
.nav-toggle {
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:var(--space-2);
}
.nav-toggle span { display:block; width:24px; height:2px; background:var(--color-dark); border-radius:2px; transition:all var(--transition-base); }
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
.mobile-menu {
    position:fixed; inset:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(20px);
    z-index:var(--z-overlay); display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:var(--space-4); opacity:0; visibility:hidden; transition:all var(--transition-base);
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a { font-family:var(--font-display); font-size:var(--text-2xl); color:var(--color-dark); padding:var(--space-3) var(--space-6); }
.mobile-menu a:hover, .mobile-menu a.active { color:var(--color-accent); }
.mobile-menu-close {
    position:absolute; top:var(--space-6); right:var(--space-6); background:none; border:none;
    font-size:var(--text-2xl); color:var(--color-dark); cursor:pointer; padding:var(--space-2);
    display:flex; align-items:center; justify-content:center;
    transition: transform var(--transition-fast), color var(--transition-fast);
}
.mobile-menu-close:hover { color:var(--color-accent); transform:rotate(90deg); }

/* ── Hero — Kadhavu Style ─────────────────── */
.hero { position:relative; background:var(--color-bg-alt); overflow:hidden; }
.hero-split { display:grid; grid-template-columns:1fr; min-height:500px; }
.hero-image-col { position:relative; min-height:400px; overflow:hidden; }
.hero-image-col img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-image-col img.hero-slider-img { transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; z-index: 1; }
.hero-image-col img.hero-slider-img.active { opacity: 1; z-index: 2; }
.hero-text-col { padding:var(--space-10) var(--space-6); display:flex; flex-direction:column; justify-content:center; }
.hero-badge {
    display:inline-flex; align-items:center; gap:var(--space-2); color:var(--color-accent);
    font-size:var(--text-xs); font-weight:600; letter-spacing:2px; text-transform:uppercase; margin-bottom:var(--space-4);
}
.hero h1 { font-size:var(--text-3xl); font-weight:800; color:var(--color-dark); margin-bottom:var(--space-4); line-height:1.1; }
.hero h1 .highlight { color:var(--color-accent); }
.hero h1 .inline-img {
    display:inline-block; width:50px; height:32px; border-radius:var(--radius-lg); overflow:hidden;
    vertical-align:middle; margin:0 4px; position:relative; top:-2px;
}
.hero h1 .inline-img img { width:100%; height:100%; object-fit:cover; }
.hero-desc { font-size:var(--text-base); color:var(--color-text-muted); max-width:500px; margin-bottom:var(--space-8); line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-4); }

/* Hero thumbnails */
.hero-thumbs { display:flex; gap:var(--space-3); margin-top:var(--space-8); }
.hero-thumb {
    width:90px; height:68px; border-radius:var(--radius-lg); overflow:hidden;
    border:2px solid var(--color-border); cursor:pointer; transition:border-color var(--transition-fast); flex-shrink:0;
    position:relative;
}
.hero-thumb:hover, .hero-thumb.active { border-color:var(--color-accent); }
.hero-thumb img { width:100%; height:100%; object-fit:cover; }
.hero-thumb-number {
    position:absolute; bottom:4px; left:8px; font-family:var(--font-display);
    font-size:var(--text-lg); font-weight:700; color:white; text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.hero-play-btn {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:40px; height:40px; background:rgba(255,255,255,0.9); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:var(--text-sm);
    box-shadow:var(--shadow-md); cursor:pointer;
}

/* Hide old hero parts */
.hero-bg, .hero-overlay, .hero-content, .scroll-indicator { display:none; }

/* ── Buttons ──────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
    padding:14px 28px; font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
    letter-spacing:0.5px; border:2px solid transparent; border-radius:var(--radius-md);
    cursor:pointer; transition:all var(--transition-base); text-decoration:none; white-space:nowrap;
}
.btn-primary { background:var(--color-accent); color:white; border-color:var(--color-accent); }
.btn-primary:hover { background:var(--color-accent-dark); border-color:var(--color-accent-dark); box-shadow:var(--shadow-accent); transform:translateY(-2px); color:white; }
.btn-outline { background:transparent; color:var(--color-accent); border-color:var(--color-accent); }
.btn-outline:hover { background:var(--color-accent); color:white; transform:translateY(-2px); }
.btn-dark { background:var(--color-dark); color:white; border-color:var(--color-dark); }
.btn-dark:hover { background:#2d2d4a; transform:translateY(-2px); color:white; }
.btn-ghost { background:transparent; color:var(--color-text-muted); border-color:var(--color-border); }
.btn-ghost:hover { color:var(--color-dark); border-color:var(--color-text-muted); }
.btn-danger { background:transparent; color:var(--color-error); border-color:var(--color-error); }
.btn-danger:hover { background:rgba(239,68,68,0.05); }
.btn-lg { padding:16px 36px; font-size:var(--text-base); }
.btn-sm { padding:var(--space-2) var(--space-4); font-size:var(--text-xs); }
.btn-icon { width:40px; height:40px; padding:0; border-radius:var(--radius-md); }

/* ── Section ──────────────────────────────── */
.section { padding:var(--space-20) 0; }
.section-alt { background:var(--color-bg-alt); }
.section-dark { background:var(--color-topbar); color:rgba(255,255,255,0.8); }
.section-dark h2,.section-dark h3 { color:var(--color-white); }
.section-header { text-align:center; margin-bottom:var(--space-12); }
.section-label {
    display:inline-block; font-size:var(--text-xs); font-weight:600; letter-spacing:2px;
    text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-3);
}
.section-title { font-size:var(--text-3xl); margin-bottom:var(--space-4); }
.section-title .highlight { color:var(--color-accent); font-style:italic; }
.section-desc { color:var(--color-text-muted); max-width:600px; margin:0 auto; font-size:var(--text-lg); }
.divider-gold { width:60px; height:3px; background:var(--color-accent); border-radius:2px; margin:var(--space-4) auto; }

/* ── About Section — Kadhavu Style ────────── */
.about-section { padding:var(--space-20) 0; }
.about-grid {
    display:grid; grid-template-columns:1fr; gap:var(--space-12); align-items:center;
}
.about-images { position:relative; min-height:400px; }
.about-images .img-main {
    width:65%; border-radius:var(--radius-2xl); overflow:hidden; position:relative; z-index:1;
    box-shadow:var(--shadow-lg);
}
.about-images .img-main img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.about-images .img-secondary {
    position:absolute; right:0; bottom:-20px; width:50%; border-radius:var(--radius-2xl);
    overflow:hidden; z-index:2; box-shadow:var(--shadow-xl); border:4px solid white;
}
.about-images .img-secondary img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.about-images .decor-text {
    position:absolute; left:-10px; top:50%; transform:rotate(-90deg) translateX(-50%);
    font-family:var(--font-display); font-size:5rem; font-weight:800; color:rgba(196,129,61,0.08);
    white-space:nowrap; z-index:0; transform-origin:left center;
}
.about-text-col .about-label { font-size:var(--text-xs); font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-3); }
.about-text-col h2 { font-size:var(--text-4xl); margin-bottom:var(--space-4); line-height:1.15; }
.about-text-col h2 .highlight { color:var(--color-accent); font-style:italic; }
.about-text-col .about-desc { color:var(--color-text-muted); line-height:1.7; margin-bottom:var(--space-8); }

/* Progress bars */
.skill-bars { margin-bottom:var(--space-8); }
.skill-bar { margin-bottom:var(--space-5); }
.skill-bar-header { display:flex; justify-content:space-between; margin-bottom:var(--space-2); font-size:var(--text-sm); font-weight:500; }
.skill-bar-header span:last-child { color:var(--color-accent); font-weight:700; }
.skill-bar-track { height:6px; background:var(--color-border); border-radius:3px; overflow:hidden; }
.skill-bar-fill { height:100%; background:var(--color-accent); border-radius:3px; transition:width 1s ease; }

/* Founder */
.founder-sig { display:flex; align-items:center; gap:var(--space-4); }
.founder-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; border:2px solid var(--color-accent); }
.founder-avatar img { width:100%; height:100%; object-fit:cover; }
.founder-name { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; color:var(--color-dark); }
.founder-title { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ── Trusted / Partners ───────────────────── */
.trusted-section { padding:var(--space-8) 0; border-top:1px solid var(--color-border-light); border-bottom:1px solid var(--color-border-light); }
.trusted-inner { display:flex; align-items:center; gap:var(--space-10); flex-wrap:wrap; justify-content:center; }
.trusted-label { font-size:var(--text-sm); color:var(--color-text-muted); }
.trusted-label strong { color:var(--color-accent); }
.trusted-logos { display:flex; align-items:center; gap:var(--space-8); flex-wrap:wrap; }
.trusted-logos span {
    font-family:var(--font-display); font-size:var(--text-base); font-weight:700;
    color:rgba(0,0,0,0.25); letter-spacing:1px; display:flex; align-items:center; gap:var(--space-2);
}
.trusted-logos span .logo-icon { font-size:1.5rem; display:flex; align-items:center; }
.trusted-logos span .logo-icon svg { display:inline-block; vertical-align:middle; stroke: rgba(0,0,0,0.25); }

/* ── Collection Cards — Kadhavu Style ─────── */
.collection-grid { display:grid; grid-template-columns:1fr; gap:var(--space-6); position:relative; }
.collection-card {
    position:relative; border-radius:var(--radius-2xl); overflow:hidden; height:420px;
    cursor:pointer; transition:all var(--transition-base); text-decoration:none; display:block;
}
.collection-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.collection-card img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow); }
.collection-card:hover img { transform:scale(1.05); }
.collection-card-content {
    position:absolute; bottom:0; left:0; right:0; padding:var(--space-8) var(--space-6);
    background:linear-gradient(transparent, rgba(0,0,0,0.75)); color:white;
}
.collection-card-content h3 { font-size:var(--text-xl); color:white; margin-bottom:var(--space-2); }
.collection-card-content p { font-size:var(--text-sm); opacity:0.85; line-height:1.5; margin-bottom:var(--space-3); }
.collection-card-content .card-link {
    display:inline-flex; align-items:center; gap:var(--space-2); color:var(--color-accent-light);
    font-size:var(--text-sm); font-weight:600; text-transform:uppercase; letter-spacing:0.5px;
}
/* Carousel arrows */
.carousel-arrows { display:flex; justify-content:center; gap:var(--space-3); margin-top:var(--space-6); }
.carousel-arrow {
    width:48px; height:48px; border-radius:50%; border:1px solid var(--color-border);
    background:white; display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; cursor:pointer; transition:all var(--transition-fast); color:var(--color-dark);
}
.carousel-arrow:hover { background:var(--color-accent); color:white; border-color:var(--color-accent); }

/* ── Services Grid ────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-4); }
.service-card {
    text-align:center; padding:var(--space-6); border:1px solid var(--color-border-light);
    border-radius:var(--radius-xl); transition:all var(--transition-base); cursor:pointer;
}
.service-card:hover { border-color:var(--color-accent); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.service-card.active { border-color:var(--color-accent); background:var(--color-accent); color:white; }
.service-card.active .service-icon { color:white; }
.service-card.active h4 { color:white; }
.service-icon { font-size:2rem; margin-bottom:var(--space-3); color:var(--color-accent); display:block; }
.service-icon svg { width:48px; height:48px; margin:0 auto; display:block; transition: stroke var(--transition-base); }
.service-card.active .service-icon svg { stroke: white; }
.service-card h4 { font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; color:var(--color-dark); }

/* ── CTA Banner — Kadhavu Style ───────────── */
.cta-section { padding:var(--space-20) 0; }
.cta-grid { display:grid; grid-template-columns:1fr; gap:var(--space-10); align-items:center; }
.cta-text-col .cta-badge {
    display:inline-block; background:var(--color-accent-glow); color:var(--color-accent);
    padding:var(--space-2) var(--space-4); border-radius:var(--radius-full);
    font-size:var(--text-xs); font-weight:600; letter-spacing:1px; text-transform:uppercase;
    margin-bottom:var(--space-4);
}
.cta-text-col h2 { font-size:var(--text-4xl); line-height:1.15; margin-bottom:var(--space-4); }
.cta-text-col h2 .highlight { color:var(--color-accent); font-style:italic; }
.cta-text-col p { color:var(--color-text-muted); line-height:1.7; margin-bottom:var(--space-8); max-width:500px; }
.cta-image-col { border-radius:var(--radius-2xl); overflow:hidden; }
.cta-image-col img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

/* ── Gallery Grid & Cards ─────────────────── */
.gallery-grid { display:grid; grid-template-columns:1fr; gap:var(--space-6); }
.gallery-card {
    position:relative; border-radius:var(--radius-xl); overflow:hidden; background:white;
    box-shadow:var(--shadow-card); transition:all var(--transition-base); border:1px solid var(--color-border-light);
}
.gallery-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.gallery-card-image { position:relative; aspect-ratio:4/3; overflow:hidden; }
.gallery-card-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow); }
.gallery-card:hover .gallery-card-image img { transform:scale(1.05); }
.gallery-card-overlay {
    position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
    opacity:0; transition:opacity var(--transition-base); display:flex; align-items:flex-end; justify-content:center; padding:var(--space-6);
}
.gallery-card:hover .gallery-card-overlay { opacity:1; }
.gallery-card-body { padding:var(--space-5); }
.gallery-card-category { font-size:var(--text-xs); font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-2); }
.gallery-card-title { font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-dark); margin-bottom:var(--space-2); }
.gallery-card-desc { font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gallery-card .featured-badge {
    position:absolute; top:var(--space-3); right:var(--space-3); background:var(--color-accent);
    color:white; padding:var(--space-1) var(--space-3); border-radius:var(--radius-full);
    font-size:var(--text-xs); font-weight:700; text-transform:uppercase; z-index:2;
}

/* Filter tabs */
.filter-tabs { display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; margin-bottom:var(--space-10); }
.filter-tab {
    padding:var(--space-2) var(--space-5); font-size:var(--text-sm); font-weight:500;
    color:var(--color-text-muted); background:white; border:1px solid var(--color-border);
    border-radius:var(--radius-full); cursor:pointer; transition:all var(--transition-fast); text-decoration:none;
}
.filter-tab:hover, .filter-tab.active { color:white; background:var(--color-accent); border-color:var(--color-accent); }

/* ── Portfolio Detail ─────────────────────── */
.portfolio-detail { padding-top:40px; }
.portfolio-detail-header { text-align:center; margin-bottom:var(--space-10); }
.portfolio-detail-gallery { display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-bottom:var(--space-10); }
.portfolio-detail-gallery .main-image { border-radius:var(--radius-xl); overflow:hidden; cursor:pointer; }
.portfolio-detail-gallery .main-image img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.portfolio-detail-thumbs { display:flex; gap:var(--space-3); overflow-x:auto; padding-bottom:var(--space-2); }
.portfolio-detail-thumbs .thumb { flex-shrink:0; width:90px; height:68px; border-radius:var(--radius-md); overflow:hidden; border:2px solid var(--color-border); cursor:pointer; }
.portfolio-detail-thumbs .thumb.active, .portfolio-detail-thumbs .thumb:hover { border-color:var(--color-accent); }
.portfolio-detail-thumbs .thumb img { width:100%; height:100%; object-fit:cover; }

/* Product info card */
.product-info { background:var(--color-bg-alt); border-radius:var(--radius-2xl); padding:var(--space-8); }
.product-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); margin-top:var(--space-6); }
.product-meta-item { padding:var(--space-4); background:white; border-radius:var(--radius-lg); text-align:center; }
.product-meta-item .meta-icon { font-size:1.5rem; margin-bottom:var(--space-2); color:var(--color-accent); }
.product-meta-item .meta-icon svg { width:24px; height:24px; margin:0 auto; display:block; }
.product-meta-item .meta-label { font-size:var(--text-xs); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:1px; }
.product-meta-item .meta-value { font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; color:var(--color-dark); }

/* ── Contact ──────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr; gap:var(--space-10); }
.contact-info-card { background:var(--color-bg-alt); border-radius:var(--radius-xl); padding:var(--space-8); }
.contact-info-item { display:flex; align-items:flex-start; gap:var(--space-4); margin-bottom:var(--space-6); }
.contact-info-item:last-child { margin-bottom:0; }
.contact-info-icon {
    width:50px; height:50px; background:var(--color-accent); color:white; border-radius:var(--radius-lg);
    display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
}
.contact-info-icon svg { width:24px; height:24px; stroke:white; }
.contact-info-text h4 { font-family:var(--font-body); font-weight:600; font-size:var(--text-base); margin-bottom:var(--space-1); color:var(--color-dark); }
.contact-info-text p, .contact-info-text a { color:var(--color-text-muted); font-size:var(--text-sm); }

/* ── Forms ────────────────────────────────── */
.form-group { margin-bottom:var(--space-5); }
.form-label { display:block; font-size:var(--text-sm); font-weight:600; color:var(--color-dark); margin-bottom:var(--space-2); }
.form-input, .form-select, .form-textarea {
    width:100%; padding:14px var(--space-4); font-family:var(--font-body); font-size:var(--text-base);
    color:var(--color-text); background:var(--color-white); border:1px solid var(--color-border);
    border-radius:var(--radius-md); transition:all var(--transition-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(196,129,61,0.1); }
.form-textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr; gap:var(--space-4); }

/* ── Stats ────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); }
.stat-card {
    text-align:center; padding:var(--space-8); background:white; border:1px solid var(--color-border-light);
    border-radius:var(--radius-xl); transition:all var(--transition-base);
}
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat-card .stat-number { font-family:var(--font-display); font-size:var(--text-4xl); font-weight:800; color:var(--color-accent); display:block; margin-bottom:var(--space-2); }
.stat-card .stat-label { font-size:var(--text-sm); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:1px; }

/* ── Footer — Kadhavu Style ───────────────── */
.footer { background:var(--color-topbar); color:rgba(255,255,255,0.7); padding:var(--space-16) 0 var(--space-8); }
.footer-social-row { display:flex; justify-content:center; gap:var(--space-3); margin-bottom:var(--space-12); padding-bottom:var(--space-12); border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-social-circle {
    width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.6);
    font-size:1.1rem; transition:all var(--transition-fast);
}
.footer-social-circle:hover { background:var(--color-accent); border-color:var(--color-accent); color:white; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:var(--space-8); margin-bottom:var(--space-10); }
.footer-brand { font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; color:white; display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.footer h4 { color:white; font-family:var(--font-body); font-size:var(--text-base); font-weight:600; margin-bottom:var(--space-4); }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:var(--space-3); }
.footer-links a { color:rgba(255,255,255,0.6); font-size:var(--text-sm); transition:color var(--transition-fast); }
.footer-links a:hover { color:var(--color-accent-light); }
.footer-newsletter { }
.footer-newsletter-input {
    display:flex; gap:0; margin-top:var(--space-3);
}
.footer-newsletter-input input {
    flex:1; padding:12px 16px; border:1px solid rgba(255,255,255,0.2); background:transparent;
    color:white; border-radius:var(--radius-md) 0 0 var(--radius-md); font-size:var(--text-sm); outline:none;
}
.footer-newsletter-input input::placeholder { color:rgba(255,255,255,0.4); }
.footer-newsletter-input button {
    padding:12px 20px; background:var(--color-accent); color:white; border:none;
    border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:var(--text-sm); font-weight:600;
    cursor:pointer; transition:background var(--transition-fast);
}
.footer-newsletter-input button:hover { background:var(--color-accent-dark); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:var(--space-6); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-4); font-size:var(--text-sm); }
.footer-bottom-social { display:flex; gap:var(--space-3); }
.footer-bottom-social a { width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5); font-size:0.8rem; transition:all var(--transition-fast); }
.footer-bottom-social a:hover { background:var(--color-accent); border-color:var(--color-accent); color:white; }

/* ── Flash Messages ───────────────────────── */
.flash-container { position:fixed; top:80px; left:50%; transform:translateX(-50%); z-index:var(--z-toast); width:90%; max-width:500px; }
.flash { padding:var(--space-3) var(--space-5); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:500; margin-bottom:var(--space-2); box-shadow:var(--shadow-md); }
.flash-success { background:#dcfce7; color:#166534; border-left:4px solid var(--color-success); }
.flash-error { background:#fef2f2; color:#991b1b; border-left:4px solid var(--color-error); }
.flash-warning { background:#fffbeb; color:#92400e; border-left:4px solid var(--color-warning); }
.flash-info { background:#eff6ff; color:#1e40af; border-left:4px solid var(--color-info); }

/* ── Lightbox ─────────────────────────────── */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all var(--transition-base); }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox-content { max-width:90vw; max-height:90vh; }
.lightbox-content img { max-width:90vw; max-height:85vh; object-fit:contain; border-radius:var(--radius-md); }
.lightbox-close { position:absolute; top:var(--space-4); right:var(--space-4); width:44px; height:44px; background:rgba(255,255,255,0.15); border:none; border-radius:50%; color:white; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox-close:hover { background:rgba(255,255,255,0.3); }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; background:rgba(255,255,255,0.15); border:none; border-radius:50%; color:white; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox-nav:hover { background:rgba(255,255,255,0.3); }
.lightbox-prev { left:var(--space-4); }
.lightbox-next { right:var(--space-4); }

/* ── Pagination ───────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:center; gap:var(--space-2); margin-top:var(--space-10); }
.pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 var(--space-3); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:500; color:var(--color-text-muted); border:1px solid var(--color-border); transition:all var(--transition-fast); }
.pagination a:hover, .pagination .active { background:var(--color-accent); color:white; border-color:var(--color-accent); }

/* ── Glass card ───────────────────────────── */
.glass-card { background:white; border:1px solid var(--color-border-light); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-card); }

/* ── Reveal animation ─────────────────────── */
.reveal { opacity:0; transform:translateY(30px); transition:all 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
.spinner { border:2px solid var(--color-border); border-top-color:var(--color-accent); border-radius:50%; animation:spin 0.6s linear infinite; }

/* ── Toggle ───────────────────────────────── */
.toggle { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.toggle input { display:none; }
.toggle-slider { position:absolute; inset:0; background:var(--color-border); border-radius:24px; transition:background var(--transition-fast); }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:transform var(--transition-fast); }
.toggle input:checked + .toggle-slider { background:var(--color-accent); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ── Status badges ────────────────────────── */
.status-badge { display:inline-flex; align-items:center; padding:var(--space-1) var(--space-3); font-size:var(--text-xs); font-weight:600; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:0.5px; }
.status-published,.status-active { background:#dcfce7; color:#166534; }
.status-draft { background:#f3f4f6; color:#6b7280; }
.status-archived,.status-paused { background:#fef3c7; color:#92400e; }
.status-completed { background:#dbeafe; color:#1e40af; }
.status-failed { background:#fef2f2; color:#991b1b; }

/* ── Utility ──────────────────────────────── */
.text-accent { color:var(--color-accent); }
.text-muted { color:var(--color-text-muted); }
.text-center { text-align:center; }

/* ── Responsive ───────────────────────────── */
@media (min-width:640px) {
    .gallery-grid { grid-template-columns:repeat(2,1fr); }
    .collection-grid { grid-template-columns:repeat(2,1fr); }
    .form-row { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:repeat(2,1fr); }
    .stats-row { grid-template-columns:repeat(4,1fr); }
    .services-grid { grid-template-columns:repeat(4,1fr); }
}

@media (min-width:768px) {
    .hero h1 { font-size:var(--text-4xl); }
    .section-title { font-size:var(--text-4xl); }
    .hero-split { grid-template-columns:1fr 1fr; min-height:620px; }
    .hero-image-col { min-height:auto; }
    .contact-grid { grid-template-columns:1fr 1fr; }
    .about-grid { grid-template-columns:1fr 1fr; }
    .cta-grid { grid-template-columns:1fr 1fr; }
    .topbar-hours { display:flex; align-items:center; gap:var(--space-1); }
}

@media (min-width:1024px) {
    .nav-links { display:flex; }
    .nav-cta { display:flex; }
    .nav-toggle { display:none; }
    .gallery-grid { grid-template-columns:repeat(3,1fr); }
    .collection-grid { grid-template-columns:repeat(3,1fr); }
    .footer-grid { grid-template-columns:2fr 1fr 1fr 1.2fr; }
    .hero h1 { font-size:var(--text-5xl); }
    .hero-split { min-height:680px; }
    .hero h1 .inline-img { width:70px; height:44px; }
}

@media (min-width:1280px) {
    .gallery-grid { grid-template-columns:repeat(4,1fr); }
}

@media (max-width: 767px) {
    .hero-image-col { min-height: 300px; }
    .hero-text-col { padding: var(--space-6) var(--space-4); }
    .hero-thumbs { margin-top: var(--space-6); justify-content: center; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: var(--text-2xl); }
    .hero h1 .inline-img { width: 42px; height: 26px; }
    .hero-desc { font-size: var(--text-sm); margin-bottom: var(--space-5); }
    .hero-thumbs { gap: var(--space-2); margin-top: var(--space-4); }
    .hero-thumb { width: 72px; height: 54px; }
    .hero-thumb-number { font-size: var(--text-sm); bottom: 2px; left: 6px; }
}