/* Palette */
:root{
  --teal: #0f3d3e;
  --gold: #d4af37;
  --cream-1: #f7f2ea;
  --cream-2: #f2e9df;
  --muted: #3f4b47;
}

/* Base */
html,body { height:100%; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  background: linear-gradient(120deg, var(--cream-1) 0%, var(--cream-2) 100%);
  color: var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, .font-serif {
  font-family: 'Playfair Display', serif;
}

:focus { outline: none; }

/* IMPORTANT: SMOOTH SCROLL & OFFSET */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* === GLASS NAVBAR (Transparent & Refined) === */
.header-pill {
  /* This creates the transparent glass effect */
  background: rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  border-radius: 999px; /* Pill shape */
  padding: 0.6rem 1.25rem;
  z-index: 60;
  transition: all 0.3s ease;
}

/* Mobile menu overlay */
.mobile-nav-overlay {
    position: fixed;
    top: calc(100% + 6px);
    right: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(15,61,62,0.05);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    z-index: 9999;
    width: calc(100% - 2rem);
    max-height: 78vh;
    overflow-y: auto;
    transform-origin: top center;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.mobile-nav-overlay.hidden {
  opacity: 0;
  transform: translateY(-6px) scale(.995);
  pointer-events: none;
}
.mobile-nav-overlay:not(.hidden) {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#mobileToggle svg { display: inline-block; vertical-align: middle; }
#menuIcon.hidden, #closeIcon.hidden { display: none !important; }

/* HERO (Exact Look Restored) */
.hero-wrap {
  min-height: 80vh;
  padding-bottom: 2rem;
  position: relative;
}
.hero-left h1 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: white; /* Force white text over video */
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: 44px;
}
.hero-sub { color: #e5e7eb; max-width: 90%; }
.hero-wrap video { object-fit: cover; top: 0; left: 0; height: 100%; width: 100%; position: absolute; }
.blob { position: absolute; border-radius: 999px; filter: blur(36px); opacity: 0.42; pointer-events: none; mix-blend-mode: screen; }

/* Feature Cards (Hero) */
.feature-card {
  background: rgba(255,255,255,0.9);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(15,61,62,0.05);
  border: 1px solid rgba(0,0,0,0.03);
}

/* Product Cards */
.product-card {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(15,61,62,0.05);
  border: 1px solid rgba(15,61,62,0.04);
  transition: transform 0.3s ease;
  cursor: pointer;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.product-media { height: 180px; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product-card:hover img { transform: scale(1.05); }

/* Modal */
.modal-backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.modal-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); max-width: 94%; margin: 1rem; width: 1100px; display: flex; flex-direction: row; overflow: hidden; max-height: 90vh; }
.modal-gallery-container { flex: 1; position: relative; background: #f3f3f3; }
.modal-gallery { width: 100%; height: 100%; }
.modal-gallery img { width: 100%; height: 100%; object-fit: contain; display: none; }
.modal-gallery img.active { display: block; }
.modal-prev, .modal-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: #fff; border-radius: 50%; cursor: pointer; z-index: 10; border: 1px solid #ddd; display: grid; place-items: center; }
.modal-prev { left: 10px; } .modal-next { right: 10px; }

/* BRAND SECTION */
#brand-creative { padding: 3.2rem 0; background: linear-gradient(180deg,#fbf3e9 0%, #f6ede2 100%); opacity:0; transform: translateY(10px); transition: 520ms; }
#brand-creative.in-view { opacity:1; transform: translateY(0); }
.brand-grid { display: grid; grid-template-columns: 42% 42%; gap: 2.5rem; justify-content: center; align-items: center; }
.collage-stage { width: 92%; height: 420px; position: relative; margin: 0 auto; }
.collage-img { position: absolute; width: 62%; height: 72%; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 48px rgba(15,61,62,0.12); border: 8px solid rgba(255,255,255,0.98); }
.layer-1 { left: 0%; top: 10%; transform: rotate(-6deg); z-index: 6; }
.layer-2 { left: 22%; top: 0%; transform: rotate(4deg); z-index: 8; }
.layer-3 { left: 46%; top: 14%; transform: rotate(-3deg); z-index: 7; }
.brand-title { font-size: 2rem; color: var(--teal); text-align: center; margin-bottom: 1rem; }
.mission-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; justify-content: center; }
.mission-card { background: #fff; padding: 0.9rem; border-radius: 10px; box-shadow: 0 14px 36px rgba(15,61,62,0.06); }
.btn-primary { display: inline-block; padding: 0.55rem 1.05rem; border-radius: 30px; background: linear-gradient(180deg,var(--gold), #f5d992); color:#083231; font-weight:700; text-decoration:none; }
.brand-cta-row { display: flex; justify-content: center; margin-top: 1.5rem; }

/* FEATURES BUBBLES */
.features-section { padding: 3.2rem 0 6rem; position: relative; }
.features-grid { display: grid; grid-template-columns: 360px 1fr; gap: 2.5rem; }
.features-composition { width: 100%; height: 420px; position: relative; }
.features-circle { width: 360px; height: 360px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; border: 8px solid rgba(255,255,255,0.9); z-index: 2; box-shadow: 0 18px 40px rgba(15,61,62,0.06); }
.features-circle img { width: 100%; height: 100%; object-fit: cover; }
.feature-bubble { position: absolute; width: 150px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 10px 22px rgba(15,61,62,0.06); text-align: center; z-index: 6; display: flex; flex-direction: column; align-items: center; }
.bubble-icon { width: 36px; height: 36px; margin-bottom: 5px; }
.feature-bubble h4 { margin: 0; font-size: 0.9rem; color: var(--teal); font-weight: 700; }
.feature-bubble p { margin: 0; font-size: 0.8rem; color: var(--muted); }
.features-info-box { margin-top: 1.25rem; background: #fff; border-radius: 14px; padding: 1.25rem; box-shadow: 0 18px 36px rgba(15,61,62,0.06); }
.fib-list { padding-left: 1rem; color:#52615f; line-height:1.6; }

/* CORE VALUES */
.core-card { transition: transform 0.2s; }
.core-card:hover { transform: translateY(-5px); }

/* BENTO GRID (Responsive) */
.bento-grid-custom {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) { .bento-grid-custom { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .bento-grid-custom {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto; 
    gap: 1.5rem;
  }
  .tile-big { grid-column: 1 / 2; grid-row: 1 / 3; }
  .tile-a { grid-column: 2 / 3; grid-row: 1 / 2; }
  .tile-b { grid-column: 3 / 4; grid-row: 1 / 3; }
  .tile-c { grid-column: 2 / 3; grid-row: 2 / 3; }
  .tile-d { grid-column: 1 / 2; grid-row: 3 / 4; }
  .tile-e { grid-column: 2 / 3; grid-row: 3 / 4; }
  .tile-f { grid-column: 3 / 4; grid-row: 3 / 4; }
  .tile-big .product-media, .tile-b .product-media { height: 380px; }
  .tile-a .product-media, .tile-c .product-media, .tile-d .product-media, .tile-e .product-media, .tile-f .product-media { height: 200px; }
}
.tile-title { padding: 1rem; font-weight: 600; color: var(--teal); text-align: center; margin: 0; }

/* HOME CAROUSEL */
#home-collections { padding-top: 4rem; padding-bottom: 4rem; }
.home-collections-layout { display: grid; grid-template-columns: 3fr 1.3fr; gap: 2.5rem; align-items: stretch; margin-top: 0.75rem; }
.carousel-wrapper { background: #fff; border-radius: 18px; padding: 1.8rem 1.6rem; position: relative; box-shadow: 0 14px 38px rgba(15,61,62,0.10); z-index: 40; }
.carousel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; }
.carousel-slide { width: 100%; max-width: 720px; height: 360px; border-radius: 14px; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.6s; display: none; }
.carousel-slide.active { opacity: 1; display: block; z-index: 5; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.home-explore-pill { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--gold), #f3d78f); color: var(--teal); font-weight: 700; border-radius: 999px; text-decoration: none; box-shadow: 0 14px 40px rgba(15,61,62,0.12); height: 100%; max-height: 360px; }

/* BABY PRODUCT */
.baby-single-wrapper { display: flex; justify-content: center; margin: 2rem auto; }
.baby-single-card { width: 100%; max-width: 400px; }
.baby-single-card .product-media { height: 220px; }

/* CONTACT */
input, textarea { outline: none; transition: border-color 0.2s; }
input:focus, textarea:focus { border-color: var(--gold); }

/* ================= MOBILE FIXES (Crucial) ================= */
@media (max-width: 768px) {
  .hero-left h1 { font-size: 36px; }
  .mobile-nav-overlay { top: 75px !important; }
  
  /* Brand Grid Stack */
  .brand-grid { grid-template-columns: 1fr; text-align: center; }
  .mission-cards { grid-template-columns: 1fr; }
  
  /* Features Bubble Reset */
  .features-grid { grid-template-columns: 1fr; }
  .features-composition { height: auto !important; display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
  .features-circle, .features-svg { display: none !important; }
  .feature-bubble { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; max-width: 320px; flex-direction: row; gap: 1rem; text-align: left; }
  
  /* Bento Grid Stack */
  .bento-grid-custom { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; }
  .bento-grid-custom .product-card { width: 100% !important; height: auto !important; }
  .bento-grid-custom .product-media { height: 200px !important; }

  /* Modal Mobile */
  .modal-card { flex-direction: column !important; overflow-y: auto; padding: 1rem; max-width: 90%; }
  .modal-gallery-container { height: 250px; flex: none; }
  .modal-gallery img { object-fit: cover; }
  
  /* Home Carousel Mobile */
  .home-collections-layout { grid-template-columns: 1fr; }
  .carousel { min-height: 220px; }
  .carousel-slide { position: relative !important; left: 0 !important; transform: none !important; display: none !important; }
  .carousel-slide.active { display: block !important; }
}
/* Core Values improvements */
#core-values {
  background: var(--cream-2); /* or keep white depending on your design */
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.core-card {
  background: rgba(255,255,255,0.98);
  padding: 1.25rem;            /* consistent inner spacing */
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(15,61,62,0.04);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.75rem;
}

.core-card .icon-wrap {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(212,175,55,0.06);
}

/* make heading darker and larger */
.core-card h4 {
  color: var(--teal);
  font-weight: 600;
  margin: 0;
}

/* make body copy legible (not too faint) */
.core-card p {
  color: rgba(63,75,71,0.8); /* slightly stronger than /80 very-faint */
  margin: 0;
  font-size: 0.9rem;
}

/* grid spacing adjust */
#core-values .grid {
  gap: 1.25rem;
}

/* responsive: stack nicely on small screens */
@media (max-width: 640px) {
  .features-composition { height: 420px; } /* keep composition reasonable */
  .feature-bubble { width: 44%; transform: none !important; left: 50% !important; margin-left: -22%; }
}
/* ... (Keep all your existing CSS) ... */

/* ================= MOBILE FIXES ================= */
@media (max-width: 768px) {
  /* Fix Hero Text Size */
  .hero-left h1 { font-size: 36px; }
  
  /* Fix Navigation Position */
  .mobile-nav-overlay { top: 75px !important; }
  
  /* Brand Grid Stack */
  .brand-grid { grid-template-columns: 1fr; text-align: center; }
  .mission-cards { grid-template-columns: 1fr; }
  
  /* CRITICAL FIX: FEATURES BUBBLES ON MOBILE */
  /* This overrides the inline HTML styles that push bubbles away */
  .features-composition { 
      height: auto !important; 
      display: flex; 
      flex-direction: column; 
      gap: 1rem; 
      margin-top: 2rem; 
      align-items: center; /* Center align items */
  }
  .features-circle, .features-svg { display: none !important; }
  
  .feature-bubble { 
      position: relative !important; 
      top: auto !important; 
      left: auto !important; 
      /* This is the key fix: remove the desktop translation */
      transform: none !important; 
      width: 100% !important; 
      max-width: 320px; 
      margin: 0 !important;
  }
}
/* styles.css */

/* Find this rule around line 275 */
.features-circle { 
  /* REMOVE these two lines */
  /* width: 360px; */
  /* height: 360px; */

  /* Keep the rest */
  border-radius: 50%; 
  background: #fff; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  overflow: hidden; 
  border: 8px solid rgba(255,255,255,0.9); 
  z-index: 2; 
  box-shadow: 0 18px 40px rgba(15,61,62,0.06); 
}
/* ================= MOBILE FIXES ================= */
@media (max-width: 768px) {
  /* ... existing fixes ... */

  /* Modal Mobile Fixes */
  .modal-card {
    flex-direction: column !important; /* Force vertical stack */
    width: 95% !important; /* Use almost full screen width */
    max-width: 95% !important;
    max-height: 85vh !important; /* Prevent it from being too tall */
    margin: auto;
    overflow: hidden; /* Hide outer scroll, scroll text inside instead */
  }

  .modal-gallery-container {
    height: 250px !important; /* Fixed height for image area */
    width: 100% !important;
  }

  .modal-gallery img {
    object-fit: contain !important; /* Ensure image fits nicely */
  }
}