/* ============================================================
   KUMAR MAKEUP KUWAIT — Global Stylesheet
   Palette: Cream #F7F0E8 | Warm Beige #E8D5C4 | Rose #C4856A |
            Terracotta #B5614A | Gold #C9A96E | Charcoal #3D2B1F
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* ── Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:       #F7F0E8;
  --warm-beige:  #E8D5C4;
  --blush:       #E0B8A8;
  --rose:        #C4856A;
  --terracotta:  #B5614A;
  --gold:        #C9A96E;
  --gold-light:  #E8D5A3;
  --charcoal:    #3D2B1F;
  --dark:        #1C1008;
  --text-body:   #5A3E32;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Jost', system-ui, sans-serif;
  --nav-h:       72px;
  --transition:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-sans); background: var(--cream); color: var(--charcoal); line-height: 1.7; overflow-x: hidden; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Typography */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); }

.eyebrow { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose); display: block; margin-bottom: 0.6rem; }
.italic-accent { font-style: italic; color: var(--rose); }

/* ── Layout */
.container { width: min(1200px, 92%); margin-inline: auto; }
.section { padding: 5rem 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ── Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; transition: var(--transition); text-decoration: none; }
.btn--primary { background: var(--charcoal); color: var(--cream); }
.btn--primary:hover { background: var(--terracotta); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); }
.btn--outline:hover { background: var(--charcoal); color: var(--cream); transform: translateY(-2px); }
.btn--rose { background: var(--rose); color: var(--cream); }
.btn--rose:hover { background: var(--terracotta); transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--dark); }
.btn--gold:hover { background: var(--charcoal); color: var(--cream); transform: translateY(-2px); }
.btn--whatsapp { background: #25D366; color: #fff; padding: 0.9rem 1.8rem; font-size: 0.85rem; }
.btn--whatsapp:hover { background: #128C7E; transform: translateY(-2px); }
.btn--call { background: var(--terracotta); color: var(--cream); padding: 0.9rem 1.8rem; font-size: 0.85rem; }
.btn--call:hover { background: var(--charcoal); transform: translateY(-2px); }

/* ── Navigation */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; transition: background var(--transition), box-shadow var(--transition); }
.nav.scrolled { background: rgba(247, 240, 232, 0.97); box-shadow: 0 1px 20px rgba(61, 43, 31, 0.1); backdrop-filter: blur(12px); }
.nav__inner { width: min(1200px, 92%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.nav__logo { display: flex; flex-direction: column; line-height: 1; }
.nav__logo-k { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; color: var(--charcoal); letter-spacing: -0.02em; }
.nav__logo-sub { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose); }
.nav.nav--light .nav__logo-k { color: #fff; }
.nav.nav--light .nav__logo-sub { color: var(--gold-light); }
.nav.nav--light .nav__link { color: rgba(255,255,255,0.85); }
.nav.nav--light .nav__hamburger span { background: #fff; }
.nav.scrolled .nav__logo-k { color: var(--charcoal); }
.nav.scrolled .nav__logo-sub { color: var(--rose); }
.nav.scrolled .nav__link { color: var(--charcoal); }
.nav.scrolled .nav__hamburger span { background: var(--charcoal); }
.nav__links { display: flex; gap: 2.5rem; align-items: center; }
.nav__link { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; position: relative; transition: color var(--transition); }
.nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--rose); transition: width var(--transition); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__cta { font-size: 0.7rem; padding: 0.6rem 1.4rem; }
.nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav__hamburger span { display: block; width: 24px; height: 1.5px; background: var(--charcoal); transition: var(--transition); }

/* Mobile Menu */
.mobile-menu { position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--cream); padding: 2rem; z-index: 999; transform: translateY(-110%); transition: transform var(--transition); box-shadow: 0 8px 30px rgba(61,43,31,0.12); }
.mobile-menu.open { transform: translateY(0); }
.mobile-menu ul { display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-menu a { font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--charcoal); }

/* ── Hero */
.hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; display: flex; align-items: flex-end; }
.hero__bg { position: absolute; inset: 0; background: var(--warm-beige); }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(28,16,8,0.58) 0%, rgba(28,16,8,0.15) 60%, transparent 100%); }
.hero__content { position: relative; z-index: 2; padding: 4rem 0; }
.hero__tag { font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1rem; display: block; }
.hero__title { color: #fff; font-weight: 300; max-width: 620px; margin-bottom: 1.5rem; }
.hero__subtitle { color: rgba(255,255,255,0.8); font-family: var(--font-sans); font-size: 0.95rem; max-width: 420px; margin-bottom: 2rem; line-height: 1.8; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__counter { position: absolute; bottom: 2.5rem; right: 4%; z-index: 2; display: flex; align-items: center; gap: 1.5rem; }
.hero__counter-num { font-family: var(--font-serif); font-size: 0.9rem; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; }
.hero__counter-line { width: 60px; height: 1px; background: rgba(255,255,255,0.4); }

/* Scroll Indicator */
.scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.scroll-indicator span { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.scroll-indicator__line { width: 1px; height: 40px; background: rgba(255,255,255,0.4); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.4; height: 40px; } 50% { opacity: 1; height: 60px; } }

/* ── Intro */
.intro { background: var(--cream); text-align: center; padding: 6rem 0; }
.intro__text { max-width: 640px; margin-inline: auto; font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-body); line-height: 1.9; margin-top: 1rem; }

/* ── Category Cards */
.categories { background: var(--cream); padding: 2rem 0 6rem; }
.category-card { position: relative; overflow: hidden; cursor: pointer; background: var(--warm-beige); aspect-ratio: 3/4; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.category-card:hover img { transform: scale(1.06); }
.category-card__label { position: absolute; top: 1.5rem; left: 1.5rem; font-family: var(--font-sans); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); background: rgba(61,43,31,0.5); padding: 0.4rem 0.9rem; backdrop-filter: blur(4px); }
.category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,16,8,0.7) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.category-card__title { color: #fff; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 300; margin-bottom: 0.3rem; }
.category-card__count { color: rgba(255,255,255,0.65); font-size: 0.72rem; letter-spacing: 0.1em; }

/* ── Product Cards */
.featured { background: var(--warm-beige); padding: 6rem 0; }
.section-header { margin-bottom: 3.5rem; }
.section-header--center { text-align: center; }
.product-card { background: var(--cream); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(61,43,31,0.12); }
.product-card__img { aspect-ratio: 4/3; overflow: hidden; }
.product-card__img img { transition: transform 0.6s ease; height: 100%; }
.product-card:hover .product-card__img img { transform: scale(1.05); }
.product-card__body { padding: 1.4rem 1.6rem 1.8rem; }
.product-card__tag { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose); margin-bottom: 0.5rem; }
.product-card__name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--charcoal); margin-bottom: 0.4rem; }
.product-card__desc { font-size: 0.82rem; color: var(--text-body); line-height: 1.7; margin-bottom: 1rem; }
.product-card__note { font-size: 0.7rem; color: var(--rose); font-style: italic; }
.product-card__footer { padding: 1rem 1.6rem; border-top: 1px solid var(--warm-beige); display: flex; align-items: center; justify-content: space-between; }
.product-card__enquire { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta); font-weight: 500; transition: color var(--transition); }
.product-card__enquire:hover { color: var(--charcoal); }

/* ── Floating Buttons */
.float-contacts { position: fixed; bottom: 2rem; right: 1.5rem; z-index: 900; display: flex; flex-direction: column; gap: 0.8rem; }
.float-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: transform var(--transition), box-shadow var(--transition); font-size: 1.3rem; cursor: pointer; border: none; text-decoration: none; }
.float-btn:hover { transform: scale(1.12); box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
.float-btn--wa { background: #25D366; }
.float-btn--call { background: var(--terracotta); }
.float-btn svg { width: 22px; height: 22px; fill: #fff; }
.float-btn svg path { fill: #fff; }

/* ── Divider */
.divider { width: 60px; height: 1px; background: var(--gold); margin: 1.2rem 0; }
.divider--center { margin-inline: auto; }

/* ── Stats */
.stats { background: var(--charcoal); padding: 3.5rem 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stats__item-num { font-family: var(--font-serif); font-size: 3rem; color: var(--gold-light); font-weight: 300; display: block; line-height: 1; }
.stats__item-label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 0.5rem; }

/* ── Testimonials */
.testimonials { background: var(--cream); padding: 6rem 0; }
.testimonial-card { background: var(--warm-beige); padding: 2.5rem; position: relative; }
.testimonial-card::before { content: '"'; font-family: var(--font-serif); font-size: 6rem; color: var(--blush); position: absolute; top: -1rem; left: 1.5rem; line-height: 1; opacity: 0.5; }
.testimonial-card__text { font-family: var(--font-serif); font-size: 1.1rem; font-style: italic; color: var(--charcoal); line-height: 1.8; margin-bottom: 1.5rem; }
.testimonial-card__author { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); font-weight: 500; }

/* ── Contact Band */
.contact-band { background: var(--warm-beige); padding: 5rem 0; }
.contact-band__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.contact-info__item { display: flex; align-items: flex-start; gap: 1.2rem; margin-bottom: 1.8rem; }
.contact-info__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--rose); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }
.contact-info__label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rose); font-weight: 500; margin-bottom: 0.25rem; }
.contact-info__value { font-family: var(--font-serif); font-size: 1.1rem; color: var(--charcoal); }
.contact-info__value a { color: var(--charcoal); transition: color var(--transition); }
.contact-info__value a:hover { color: var(--terracotta); }
.contact-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* ── Map */
.map-wrap { background: var(--blush); aspect-ratio: 4/3; overflow: hidden; }
.map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }

/* ── Footer */
.footer { background: var(--dark); color: rgba(255,255,255,0.7); padding: 4rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 2rem; }
.footer__logo-k { font-family: var(--font-serif); font-size: 2rem; color: #fff; line-height: 1; }
.footer__logo-sub { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); margin-top: 2px; }
.footer__tagline { font-size: 0.83rem; margin-top: 1.2rem; line-height: 1.8; max-width: 260px; }
.footer__heading { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.4rem; }
.footer__links li { margin-bottom: 0.75rem; }
.footer__links a { font-size: 0.83rem; color: rgba(255,255,255,0.6); transition: color var(--transition); }
.footer__links a:hover { color: var(--gold-light); }
.footer__contact-item { font-size: 0.83rem; margin-bottom: 0.9rem; line-height: 1.5; }
.footer__contact-item a { color: rgba(255,255,255,0.6); transition: color var(--transition); }
.footer__contact-item a:hover { color: var(--gold-light); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.72rem; color: rgba(255,255,255,0.35); }

/* ── Page Hero */
.page-hero { position: relative; height: 50vh; min-height: 340px; display: flex; align-items: flex-end; padding-top: var(--nav-h); overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,16,8,0.65) 0%, rgba(28,16,8,0.2) 100%); }
.page-hero__content { position: relative; z-index: 2; padding-bottom: 3.5rem; }
.page-hero__title { color: #fff; font-weight: 300; }

/* ── About */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; padding: 6rem 0; }
.about-intro__img-wrap { position: relative; }
.about-intro__img-main { aspect-ratio: 4/5; overflow: hidden; }
.about-intro__img-accent { position: absolute; bottom: -2rem; right: -2rem; width: 55%; aspect-ratio: 1; overflow: hidden; border: 6px solid var(--cream); }
.about-values { background: var(--warm-beige); padding: 6rem 0; }
.value-card { text-align: center; padding: 2.5rem 2rem; }
.value-card__icon { font-size: 2rem; margin-bottom: 1rem; }
.value-card__title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--charcoal); margin-bottom: 0.75rem; }
.value-card__text { font-size: 0.85rem; color: var(--text-body); line-height: 1.8; }

/* ── Products Filters */
.products-filters { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.filter-btn { padding: 0.6rem 1.4rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; border: 1.5px solid var(--warm-beige); background: transparent; color: var(--charcoal); cursor: pointer; transition: var(--transition); }
.filter-btn.active, .filter-btn:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

/* ── Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery-item { overflow: hidden; cursor: pointer; position: relative; }
.gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.6s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item--wide { grid-column: span 2; }
.gallery-item--wide img { aspect-ratio: 2/1; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item--tall img { aspect-ratio: 1/2; height: 100%; }

/* ── Contact Form */
.contact-form { background: var(--warm-beige); padding: 3rem; }
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-body); margin-bottom: 0.5rem; font-weight: 500; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 0.9rem 1rem; background: var(--cream); border: 1px solid var(--blush); color: var(--charcoal); font-family: var(--font-sans); font-size: 0.9rem; transition: border-color var(--transition); outline: none; appearance: none; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--rose); }
.form-textarea { resize: vertical; min-height: 120px; }

/* ── Animations */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }
  .hero { height: 95svh; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .about-intro { grid-template-columns: 1fr; gap: 2rem; }
  .about-intro__img-accent { right: -1rem; bottom: -1rem; }
  .contact-band__inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide { grid-column: span 1; }
  .gallery-item--wide img { aspect-ratio: 1; }
  .gallery-item--tall { grid-row: span 1; }
  .gallery-item--tall img { aspect-ratio: 1; height: auto; }
  .contact-form { padding: 1.8rem; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .map-wrap { aspect-ratio: 4/3; min-height: 280px; }
}

@media (max-width: 480px) {
  .section { padding: 3.5rem 0; }
  .gallery-grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
}