/* ============================================================
   JAWADI GOLD AND DIAMONDS — Global Stylesheet (style.css)
   ============================================================
   Architecture : Single flat stylesheet — no preprocessor.
   Fonts        : Google Fonts (Cormorant Garamond, Playfair
                  Display, Montserrat) — loaded via @import below.
   Cache-busting: Referenced in HTML as style.css?v=N — bump N
                  in all HTML files whenever this file changes.

   BRAND PALETTE
     --maroon      #6B1B2E   Primary brand colour (deep ruby)
     --maroon-dark #4A0F1E   Darker variant for gradients / hover
     --gold        #C9A84C   Accent — buttons, highlights, icons
     --gold-light  #E2C97A   Lighter gold for subtle accents
     --gold-pale   #F0E4BE   Very pale gold — section tints
     --cream       #F5F0E8   Background for light sections
     --deep        #1A0A0F   Near-black — body text, hero BG
     --white       #FFFFFF   Pure white
     --gray        #8A8A8A   Secondary text / captions
     --gray-light  #D4D0C8   Dividers and borders

   TYPOGRAPHY SCALE
     Display  — Cormorant Garamond (serif, editorial, lightweight)
     Heading  — Playfair Display (serif, classic luxury)
     Body     — Montserrat (sans-serif, modern, highly legible)

   BREAKPOINTS
     ≤480px   Compact mobile
     ≤768px   Standard mobile / small tablet (primary mobile target)
     ≤900px   Tablet / landscape mobile
     ≤1100px  Small desktop / large tablet
     ≥1100px  Wide desktop overrides
     ≥1200px  Large desktop overrides

   FILE SECTIONS (Ctrl+F the section name)
     RESET & BASE · SCROLLBAR · TYPOGRAPHY · UTILITY · BUTTONS
     SECTION LABELS · DIVIDER · TOP BAR · NAV · HERO · MARQUEE
     SECTION PADDING · SECTION HEADERS · WHY JAWADI · COLLECTIONS
     DIAMOND EDUCATION · PROCESS STEPS · DEALER · FORMS
     TESTIMONIALS · STATS · CONTACT · FOOTER · FLOATING WHATSAPP
     TOAST · MAP · PAGE TRANSITIONS · MODAL · RESPONSIVE
     MOBILE ENHANCEMENTS · COLLECTIONS PAGE · MOBILE FIXES
   ============================================================ */

/* Google Fonts loaded via <link> in HTML head for parallel loading performance */

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

/* CSS custom properties — used everywhere for consistency.
   To change the brand colour site-wide, update --maroon here only. */
:root {
  --maroon:       #6B1B2E;
  --maroon-dark:  #4A0F1E;
  --maroon-light: #8B2442;
  --gold:         #C9A84C;
  --gold-light:  #E2C97A;
  --gold-pale:   #F0E4BE;
  --cream:       #F5F0E8;
  --deep:        #1A0A0F;
  --white:       #FFFFFF;
  --gray:        #8A8A8A;
  --gray-light:  #D4D0C8;
  --border:      rgba(201,168,76,0.25);
  --shadow:      0 4px 32px rgba(107,27,46,0.12);
  --shadow-lg:   0 16px 64px rgba(26,10,15,0.2);

  --font-display: 'Cormorant Garamond', serif;
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Montserrat', sans-serif;

  --whatsapp:    var(--whatsapp);
  --nav-h: 86px;
  --section-pad: 100px;
  --max-w: 1320px;
  --radius: 20px;
  --radius-sm: 12px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--deep);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4,h5 { font-family: var(--font-heading); font-weight: 500; line-height: 1.2; }
.display { font-family: var(--font-display); font-weight: 300; }

/* ============ UTILITY ============ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.container-sm { max-width: 860px; margin: 0 auto; padding: 0 40px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26,10,15,0.12);
  transition: var(--transition), box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.btn:hover::after { transform: translateX(0); }

.btn-gold {
  background: var(--gold);
  color: var(--deep);
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.4); }

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-outline:hover { background: var(--gold); color: var(--deep); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.35); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.6);
}
.btn-outline-white:hover { background: var(--white); color: var(--maroon); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

.btn-maroon {
  background: var(--maroon);
  color: var(--white);
}
.btn-maroon:hover { background: var(--maroon-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(107,27,46,0.4); }

/* ============ SECTION LABELS ============ */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  display: block;
  height: 1px;
  width: 40px;
  background: var(--gold);
  opacity: 0.6;
}
.section-eyebrow.left::before { display: none; }

/* ============ DIVIDER ============ */
.divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 28px auto;
}
.divider.left { margin: 28px 0; }

/* ============ TOP BAR ============ */
.top-bar {
  background: var(--maroon);
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  letter-spacing: 1.2px;
  padding: 9px 0;
  font-family: var(--font-body);
}
.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar a { color: var(--gold-light); text-decoration: none; }
.top-bar a:hover { color: var(--white); }
.top-bar-links { display: flex; gap: 28px; align-items: center; }
.top-bar-links a { display: flex; align-items: center; gap: 7px; transition: color 0.2s; }

/* ============ NAV ============ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  height: var(--nav-h);
  transition: background 0.3s, box-shadow 0.3s;
}
.navbar.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(26,10,15,0.1);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}
.nav-logo img { height: 60px; width: auto; max-width: none; }
.nav-logo .logo-text {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--maroon);
  font-weight: 600;
  letter-spacing: 2px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo .logo-sub {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gray);
  text-transform: uppercase;
  display: block;
  margin-top: -4px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-links a {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--deep);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.25s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--maroon); }
.nav-links a.active::after { width: 100%; background: var(--maroon); }

.nav-cta { display: flex; align-items: center; gap: 20px; }
.nav-cta .btn { padding: 11px 24px; font-size: 10px; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--maroon);
  border-radius: 2px;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 50%, var(--maroon-light) 100%);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 70% 50%, rgba(201,168,76,0.08) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.04'%3E%3Cpath d='M40 40 L0 0 L80 0 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.6;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero-text { color: var(--white); }
.hero-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-eyebrow::after {
  content: '';
  display: block;
  height: 1px;
  width: 60px;
  background: var(--gold);
  opacity: 0.7;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 6vw, 90px);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 12px;
  letter-spacing: -1px;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
  display: block;
}
.hero-tagline {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 32px;
  margin-top: 8px;
}
.hero p {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,0.82);
  max-width: 480px;
  margin-bottom: 44px;
}
.hero-actions { display: flex; gap: 20px; flex-wrap: wrap; }

.hero-trust {
  display: flex;
  gap: 32px;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(201,168,76,0.25);
}
.trust-item { text-align: center; }
.trust-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--gold);
  display: block;
  line-height: 1;
}
.trust-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
  display: block;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ============ MARQUEE ============ */
.marquee-wrap {
  background: var(--gold);
  overflow: hidden;
  padding: 14px 0;
}
.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
}
.marquee-item {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--deep);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.marquee-dot { width: 4px; height: 4px; background: var(--maroon); border-radius: 50%; opacity: 0.6; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ SECTION PADDING ============ */
section { padding: var(--section-pad) 0; }
.section-cream { background: var(--cream); }
.section-dark { background: var(--deep); color: var(--white); }
.section-maroon { background: var(--maroon); color: var(--white); }

/* ============ SECTION HEADERS ============ */
.section-header { margin-bottom: 64px; }
.section-header.center { text-align: center; }
.section-header.center .section-eyebrow { justify-content: center; }
.section-header.center .divider { margin: 28px auto; }
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--deep);
  margin-bottom: 20px;
}
.section-title.light { color: var(--white); }
.section-title span { color: var(--gold); font-style: italic; }
.section-subtitle {
  font-size: 15px;
  color: var(--gray);
  max-width: 600px;
  line-height: 1.85;
}
.section-subtitle.light { color: rgba(255,255,255,0.7); }

/* ============ WHY JAWADI ============ */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pillar-item {
  background: var(--white);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  border-radius: 0;
}
.pillar-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--maroon), var(--gold));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.pillar-item:hover { box-shadow: var(--shadow); z-index: 1; }
.pillar-item:hover::before { transform: scaleX(1); }
.pillar-item h4 {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--maroon);
  margin-bottom: 12px;
}
.pillar-item p { font-size: 14px; color: var(--gray); line-height: 1.8; }

/* ============ DIAMOND EDUCATION ============ */
.edu-content {
  background: var(--deep);
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.luxury-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.12);
  transition: transform 1.6s cubic-bezier(0.16,1,0.3,1);
}
.c4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.c-item {
  padding: 24px 20px;
  border: 1px solid rgba(201,168,76,0.2);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.c-item::before {
  content: attr(data-c);
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  color: rgba(201,168,76,0.06);
  line-height: 1;
}
.c-item h5 {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.c-item p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.7; }

/* ============ PROCESS STEPS ============ */
.process-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; }
.process-steps-4 { grid-template-columns: repeat(4,1fr); }
.process-steps::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
}
.process-step { text-align: center; padding: 0 20px; position: relative; }
.step-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  font-size: 32px;
  position: relative;
  z-index: 2;
  transition: var(--transition);
  box-shadow: var(--shadow);
}
.process-step:hover .step-circle {
  background: var(--maroon);
  border-color: var(--maroon);
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(107,27,46,0.25);
}
.process-step h4 {
  font-size: 15px;
  color: var(--maroon);
  margin-bottom: 10px;
}
.process-step p { font-size: 13px; color: var(--gray); line-height: 1.7; }

/* ============ DEALER SECTION ============ */
.dealer-section {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  position: relative;
  overflow: hidden;
}
.dealer-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,168,76,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.dealer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.dealer-benefits { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.benefit-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,168,76,0.15);
  border-left: 3px solid var(--gold);
  transition: var(--transition);
}
.benefit-row:hover { background: rgba(255,255,255,0.1); transform: translateX(4px); }
.benefit-svg-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.benefit-svg-icon svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
.benefit-row h5 { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--gold); margin-bottom: 6px; text-transform: uppercase; font-family: var(--font-body); }
.benefit-row p { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.7; }

.dealer-form-wrap {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(201,168,76,0.2);
  padding: 48px 44px;
  backdrop-filter: blur(8px);
}
.dealer-form-wrap h3 {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--white);
  margin-bottom: 8px;
}
.dealer-form-wrap p { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 32px; }

/* ============ FORMS ============ */
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}
.form-group label.dark { color: var(--deep); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--white);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.25s, background 0.25s;
  -webkit-appearance: none;
}
.form-group input.light,
.form-group select.light,
.form-group textarea.light {
  background: var(--white);
  border-color: rgba(107,27,46,0.2);
  color: var(--deep);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.35); }
.form-group input.light::placeholder,
.form-group textarea.light::placeholder { color: var(--gray-light); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); background: rgba(255,255,255,0.12); }
.form-group input.light:focus,
.form-group select.light:focus,
.form-group textarea.light:focus { border-color: var(--maroon); background: var(--white); }
.form-group select option { background: var(--deep); color: var(--white); }
.form-group select.light option { background: var(--white); color: var(--deep); }
.form-group textarea { resize: vertical; min-height: 110px; }

/* ============ TESTIMONIALS ============ */
.testimonials-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 40px; max-width: 980px; margin: 0 auto; }
/* ============ CONTACT ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
.contact-info-item {
  display: flex;
  gap: 20px;
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.contact-info-item:last-child { border-bottom: none; }
.contact-icon {
  width: 52px;
  height: 52px;
  background: var(--maroon);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  color: var(--white);
}
.contact-icon svg { width: 22px; height: 22px; }

/* ---- Quick Contact Cards ---- */
.quick-contact-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  transform: translateY(-40px);
}
.quick-contact-card {
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition), box-shadow 0.3s ease, transform 0.3s ease;
}
.quick-contact-card:hover {
  background: var(--maroon);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(107,27,46,0.25);
}
.quick-contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid rgba(201,168,76,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--maroon);
  transition: var(--transition);
}
.quick-contact-icon svg { width: 22px; height: 22px; }
.quick-contact-card:hover .quick-contact-icon {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  color: var(--gold);
}
.quick-contact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.quick-contact-value {
  font-size: 14px;
  color: var(--deep);
  font-weight: 500;
  transition: color 0.3s;
}
.quick-contact-sub {
  font-size: 11px;
  color: var(--gray);
  margin-top: 4px;
  transition: color 0.3s;
}
.quick-contact-card:hover .quick-contact-value,
.quick-contact-card:hover .quick-contact-sub { color: var(--white); }
@media (max-width: 900px) {
  .quick-contact-grid { grid-template-columns: repeat(2,1fr); }
}
.contact-info-item h5 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.contact-info-item a,
.contact-info-item p {
  font-size: 14px;
  color: var(--deep);
  text-decoration: none;
  line-height: 1.7;
  transition: color 0.2s;
}
.contact-info-item a:hover { color: var(--maroon); }

/* ============ FOOTER ============ */
footer {
  background: var(--deep);
  color: var(--white);
  padding: 80px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo-text {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--white);
  font-weight: 600;
  letter-spacing: 2px;
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}
.footer-brand .logo-sub {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.9; margin-bottom: 28px; }
.footer-social { display: flex; gap: 12px; }
.social-link {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 15px;
  transition: var(--transition);
}
.social-link:hover { background: var(--gold); border-color: var(--gold); color: var(--deep); transform: translateY(-3px); }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.25s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links a::before { content: '—'; color: var(--gold); opacity: 0.5; font-size: 10px; }
.footer-links a:hover { color: var(--gold); }

.footer-bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom p { font-size: 11px; color: rgba(255,255,255,0.35); }
.footer-pp-link { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }
.footer-pp-link:hover { color: rgba(201,168,76,0.8); }
.footer-cert {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cert-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 6px 14px;
}

/* ============ FLOATING WHATSAPP ============ */
.whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  width: 60px;
  height: 60px;
  background: var(--whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,0.4);
  text-decoration: none;
  transition: var(--transition);
}
.whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 10px 32px rgba(37,211,102,0.6); }
.whatsapp-float svg { width: 30px; height: 30px; fill: var(--white); }

/* ============ TOAST NOTIFICATION ============ */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--maroon);
  color: var(--white);
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 32px rgba(107,27,46,0.4);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ MAP EMBED ============ */

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

.fade-in {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.fade-in.visible { opacity: 1; }

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,10,15,0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--white);
  max-width: 560px;
  width: 90%;
  padding: 56px 52px;
  border-radius: var(--radius);
  position: relative;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.modal-overlay.open .modal-box { transform: scale(1) translateY(0); }
.modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--gray);
  cursor: pointer;
  transition: color 0.2s;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { color: var(--maroon); }
.modal-box h3 { font-family: var(--font-heading); font-size: 28px; color: var(--maroon); margin-bottom: 8px; }
.modal-box p { font-size: 14px; color: var(--gray); margin-bottom: 28px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --section-pad: 70px; }
  .hero-content { grid-template-columns: 1fr; gap: 50px; }
  .hero-visual { display: none; }
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; gap: 1px; }
  .edu-visual { min-height: 300px; }
  .process-steps { grid-template-columns: repeat(2,1fr); gap: 32px; }
  .process-steps::before { display: none; }
  .dealer-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .collections-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}

@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .container, .container-sm { padding: 0 20px; }
  .hero h1 { font-size: 42px; }
  .hero-trust { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .c4-grid { grid-template-columns: 1fr; }
  .top-bar { display: none; }
  .quick-contact-grid { grid-template-columns: repeat(2,1fr); }
  .split-grid { grid-template-columns: 1fr !important; min-height: auto !important; }
  .split-quote { left: 24px !important; right: 24px !important; bottom: 28px !important; }
  .split-quote p:first-child { font-size: 17px !important; }
}

@media (max-width: 480px) {
  .quick-contact-grid { grid-template-columns: 1fr; }
}

/* Mobile nav expanded — slide-in drawer from the right */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: min(82%, 360px);
  background: var(--white);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  padding: calc(var(--nav-h) + 24px) 28px 32px;
  transform: translateX(100%);
  opacity: 1;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), visibility 0.4s;
  overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); opacity: 1; visibility: visible; }
.mobile-nav a {
  display: block;
  padding: 16px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, padding-left 0.2s;
}
.mobile-nav a:hover { color: var(--maroon); padding-left: 8px; }
/* SPECIFICITY OVERRIDE — critical fix:
   .mobile-nav a { display:block } (specificity 0,1,1) beats
   .btn { display:inline-flex } (specificity 0,1,0).
   The ENQUIRE NOW button is an <a class="btn"> inside .mobile-nav,
   so it was rendered as block — text aligned left, padding stripped,
   and border-bottom from the nav link style showing through.
   This rule restores all button properties at equal-or-higher specificity. */
.mobile-nav .btn {
  margin-top: 20px;
  width: 100%;
  display: flex;            /* overrides display:block from .mobile-nav a */
  justify-content: center;
  text-align: center;       /* fallback for non-flex contexts */
  padding: 14px 32px;       /* overrides padding:16px 0 from .mobile-nav a */
  border-bottom: none;      /* removes the nav-link divider line */
}
/* Prevent the .mobile-nav a:hover { padding-left:8px } rule from
   sliding the button text on hover — pin it to the button's own padding. */
.mobile-nav .btn:hover { padding-left: 32px; }

/* Overlay behind the mobile nav drawer */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,10,15,0.55);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* ======= SITE-WIDE CURSOR GLOW & SCROLL PROGRESS ======= */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--maroon), var(--gold));
  z-index: 1001;
  transition: width 0.1s linear;
}
.cursor-glow {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
  border-radius: 50%;
  position: fixed;
  left: -300px; top: -300px;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%,-50%);
  transition: left 0.08s ease, top 0.08s ease;
}
@media (max-width: 768px) {
  .cursor-glow { display: none; }
}

/* ======= PAGE-LOAD FADE-IN ======= */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body {
  animation: pageFadeIn 0.7s ease;
}

/* ======= GOLD UNDERLINE DRAW-IN ======= */
.section-title span {
  background-image: linear-gradient(90deg, var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 1.1s cubic-bezier(0.4,0,0.2,1) 0.2s;
  padding-bottom: 4px;
}
.fade-up.visible .section-title span,
.fade-in.visible .section-title span,
.section-title.visible span {
  background-size: 100% 2px;
}

/* ======= IMAGE SCROLL-REVEAL ZOOM ======= */
.fade-up.visible .luxury-photo,
.fade-in.visible .luxury-photo {
  transform: scale(1);
}

/* Natural-size variant — shows full portrait images without cropping */
.img-natural {
  width: 100%; height: auto; display: block;
  transform: scale(1.06);
  transition: transform 1.6s cubic-bezier(0.16,1,0.3,1);
}
.fade-up.visible .img-natural,
.fade-in.visible .img-natural {
  transform: scale(1);
}

/* ======= MAGNETIC BUTTONS ======= */
.btn-magnetic { transition: transform 0.25s cubic-bezier(0.33,1,0.68,1), box-shadow 0.3s ease; }
@media (max-width: 768px) {
  /* Magnetic pull is a hover-only desktop effect; never offset buttons on touch */
  .btn-magnetic { transform: none !important; }
}

/* ======================================================
   MOBILE INTERACTIVE ENHANCEMENTS (touch / <=768px only)
   ====================================================== */
@media (max-width: 768px) {

  /* 1. Hero touch ripple glow */
  .hero { position: relative; }
  .hero-touch-ripple {
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,0.45) 0%, transparent 70%);
    transform: translate(-50%,-50%) scale(0);
    pointer-events: none;
    z-index: 2;
  }

  /* 2. Navbar frosted blur on scroll (mobile) */
  .navbar.scrolled {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 4px 24px rgba(26,10,15,0.12);
  }

  /* 5. Hero glass card — visible on mobile, sized safely within viewport */
  .hero-visual {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 32px;
    touch-action: pan-y;
  }
  .hero-visual .glass-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .hero-visual.dismissed {
    display: none;
  }

  /* 6. Process steps — horizontal scroll-snap */
  .process-steps,
  .process-steps-4 {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 20px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .process-steps::-webkit-scrollbar,
  .process-steps-4::-webkit-scrollbar { display: none; }
  .process-steps::before { display: none; }
  .process-step {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
  .process-scroll-hint {
    text-align: center;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.7;
    margin-top: 4px;
  }

  /* 7. Benefit row stagger reveal */
  .benefit-stagger {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .benefit-stagger.visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* 8. WhatsApp pulse ring */
  .whatsapp-float { overflow: visible; }
  .whatsapp-float::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 50%;
    border: 2px solid var(--whatsapp);
    animation: whatsappPulse 2.2s ease-out infinite;
  }
}

/* 3. Pillar tap-pulse */
@keyframes pillarTapPulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.pillar-item.tap-pulse {
  animation: pillarTapPulse 0.35s ease;
}

/* 8. WhatsApp pulse ring keyframes */
@keyframes whatsappPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 1. Hero touch ripple keyframes */
@keyframes heroTouchRipple {
  to { transform: translate(-50%,-50%) scale(8); opacity: 0; }
}
.hero-touch-ripple.animate {
  animation: heroTouchRipple 0.8s ease-out forwards;
}

/* 9. Marquee pause on touch */
.marquee-track.paused {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
  /* 4. More dramatic fade-up on mobile */
  .fade-up {
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-touch-ripple.animate,
  .pillar-item.tap-pulse,
  .whatsapp-float::after {
    animation: none !important;
  }
  .benefit-stagger {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ MOBILE FIXES ============ */

/* iOS auto-zoom prevention — inputs below 16px trigger browser zoom on tap */
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; }
}

/* Modal — mobile full reflow
   Root cause: align-items:center clips the top of a tall form above the fold.
   Fix: overlay scrolls top-to-bottom; close button is position:fixed so it's
   always reachable regardless of scroll position. */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 40px;
  }
  .modal-box {
    padding: 56px 20px 32px;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    margin: 0 auto;
    border-radius: 16px;
  }
  /* Fixed close button — always visible even when form is scrolled */
  .modal-close {
    position: fixed;
    top: 28px;
    right: 20px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    z-index: 10002;
    color: var(--maroon);
  }
  .modal-box h3 { font-size: 21px; margin-top: 4px; }
  .modal-box > p { font-size: 13px; margin-bottom: 20px; }
}

/* Hero heading — tighten on very small screens */
@media (max-width: 380px) {
  .hero h1 { font-size: 36px; }
}

/* WhatsApp float — bring inward on mobile and reduce size to minimise content overlap */
@media (max-width: 768px) {
  .whatsapp-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* Section padding — tighter on phones */
@media (max-width: 480px) {
  :root { --section-pad: 55px; }
  .container, .container-sm { padding: 0 16px; }
}

/* Long email — prevent overflow in footer on very narrow viewports */
.footer-links a, .footer-col a {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Footer contact-item links */
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 13px; color: rgba(255,255,255,0.55); }
.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); opacity: 0.7; }
.footer-contact-item a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; word-break: break-word; overflow-wrap: break-word; }
.footer-contact-item a:hover { color: var(--gold); }
.footer-contact-item span { color: rgba(255,255,255,0.55); line-height: 1.7; }

/* Footer social icons — apply .social-link styles to plain <a> tags too */
.footer-social a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: var(--transition);
  flex-shrink: 0;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--deep); transform: translateY(-3px); }

/* ============================================================
   COMPREHENSIVE MOBILE + DESKTOP ALIGNMENT FIXES
   ============================================================ */

/* --- Hero: iOS Safari 100vh bug fix ---
   100vh on iOS Safari includes the collapsible browser chrome
   (address bar + tab bar), so the hero is taller than the
   visible area — content clips at the bottom.
   100svh (Small Viewport Height) explicitly excludes the chrome.
   Older browsers that don't support svh fall back to the existing
   min-height:100vh rule already set on .hero. ---
   Safari on iOS calculates 100vh including the URL bar height, so the hero
   clips at the bottom. 100svh (small viewport height) excludes browser chrome.
   Older browsers that don't support svh just keep the 100vh fallback above. */
.hero { min-height: 100svh; }

/* --- Hero: content padding on mobile ---
   hero-content uses its own padding (not .container), so it needs a mobile
   override separately from the 768px container fix. */
@media (max-width: 768px) {
  .hero-content {
    padding: 48px 20px 40px;
    gap: 40px;
  }
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .hero p { margin-bottom: 32px; font-size: 14px; }
}

/* --- Navbar: tighten inner padding on mobile ---
   nav-inner has its own 40px horizontal padding that doesn't inherit from
   the container override, leaving logo and hamburger too close to the edge. */
@media (max-width: 768px) {
  .nav-inner { padding: 0 20px; }
  .nav-logo img { height: 48px; }
}

/* --- Section headers: tighter bottom margin on mobile --- */
@media (max-width: 768px) {
  .section-header { margin-bottom: 40px; }
  .section-subtitle { font-size: 14px; }
}

/* --- Collection cards (homepage preview): move info away from edges --- */
@media (max-width: 768px) {
  .collection-info { left: 20px; right: 20px; bottom: 20px; }
  .collection-info h3 { font-size: 20px; }
}

/* --- Pillar section: tighter padding on mobile --- */
@media (max-width: 768px) {
  .pillar-item { padding: 32px 20px; }
}

/* --- Testimonial cards: consistent spacing on mobile --- */
@media (max-width: 768px) {
  .testimonial-placeholder { padding: 32px 24px; }
}

/* --- Process steps: each card shouldn't be wider than viewport --- */
@media (max-width: 480px) {
  .process-step { flex: 0 0 88%; }
}

/* --- Desktop: constrain section subtitles to readable width --- */
@media (min-width: 1100px) {
  .section-subtitle { max-width: 680px; }
  .section-header.center .section-subtitle { margin: 0 auto; }
}