/* ===== Pink About Us Banner ===== */
    .about-banner-pink {
      position: relative;
      background: #FB95A0;
      display: flex;              /* flexbox centering */
      justify-content: center;    /* horizontal center */
      align-items: center;        /* vertical center */
      text-align: center;
      color: #000;
      padding: 200px 20px;            /* only side padding */
      overflow: hidden;
    }

    .about-inner-pink {
      max-width: 900px;
      margin: 0 auto;
    }

    .about-banner-pink h1 {
      font-family: 'Alegreya', serif;
      font-size: 3rem;
      margin-bottom: 12px;
      color: #000;
    }

    .about-banner-pink p {
      font-size: 1.2rem;
      opacity: 0.95;
      color: #000;
    }

    /* curved bottom svg */
    .about-banner-pink .curve {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 120px;
    }

    /* responsive */
    @media (max-width: 768px) {
      .about-banner-pink {
        padding: 80px 20px 60px;
      }
      .about-banner-pink h1 {
        font-size: 2.2rem;
      }
      .about-banner-pink p {
        font-size: 1rem;
      }
    }
  
  :root {
  --accent: #FB95A0;
  --accent-dark: #d86b7b;
  --muted: #6b6b6b;
  --card-radius: 14px;
  --gap: 18px;
  }

  html, body {
    margin: 0;
    font-family: 'Alegreya', serif;
    background: #fffafc;
    color: #222;
  }

  .container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 18px;
  }

  /* ---------- Header ---------- */
  .hero {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
  }
  .hero-left h1 { font-size: 2.2rem; margin: 0 0 6px; }
  .hero-left p { margin: 0; color: var(--muted); font-size: 1rem; }

  .filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .chip {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    transition: all .18s ease;
    color: #222;
  }
  .chip[data-active="true"] {
    background: linear-gradient(180deg,var(--accent),var(--accent-dark));
    color: white;
    box-shadow: 0 8px 20px rgba(251,149,160,0.16);
    transform: translateY(-2px);
  }

  /* ---------- Gallery Grid ---------- */
  /* .gallery-grid {
    max-width: 1000px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--gap);
    align-items: start;
  }
  .item {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: #fff;
    box-shadow: 0 10px 30px rgba(14,18,24,0.06);
    transition: transform .28s ease, box-shadow .28s ease;
    cursor: zoom-in;
  }
  .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(14,18,24,0.12);
  }
  .thumb {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
  }
  .meta { padding: 12px 14px; }
  .title { font-weight: 700; margin: 0 0 6px; font-size: 1rem; }
  .desc { margin: 0; color: var(--muted); font-size: 0.9rem; } */

  /* .video-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 8px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
  } */

  /* ---------- Lightbox ---------- */
  /* .lb {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6,6,6,0.75);
    z-index: 1500;
    padding: 24px;
  }
  .lb.open { display: flex; }

  .lb-card {
    max-width: 900px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  }
  .lb-media {
    width: 100%;
    height: 65vh;
    max-height: 700px;
    background: #000;
  }
  .lb-caption {
    padding: 12px 16px;
    background: #fff;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .lb-close {
    position: absolute;
    right: 12px;
    top: 12px;
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
  } */
  .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.35);
    border: none;
    color: #fff;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 22px;
    border-radius: 8px;
    z-index: 1600;
  }
  .nav-btn.left { left: 8px; }
  .nav-btn.right { right: 8px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .container { max-width: 92%; }
    .gallery-grid { gap: 14px; }
    .lb-media { height: 58vh; }
    .lb-card { max-width: 760px; }
  }
  @media (max-width: 640px) {
    .gallery-grid {
      grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
      gap: 12px;
    }
    .lb-media { height: 52vh; }
    .lb-card { max-width: 92%; border-radius: 10px; }
  }



  /* Floating Cake Menu */
  .floating-cake {
    position: fixed;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Bigger Cake icon — no background */
  .cake-icon {
    font-size: 4rem;   /* increased size */
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .cake-icon:hover {
    transform: scale(1.2) rotate(-5deg);
  }

  /* Dropdown Menu */
  .cake-menu {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s ease;
  }

  /* Show menu on hover */
  .floating-cake:hover .cake-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .cake-menu li {
    border-bottom: 1px solid #f1f1f1;
  }
  .cake-menu li:last-child {
    border-bottom: none;
  }
  .cake-menu a {
    display: block;
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.2s ease;
  }
  .cake-menu a:hover {
    background: #FB95A0;
    color: #fff;
  }

  /* Floating Cake Menu */
  .floating-cake {
    position: fixed;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Bigger Cake icon — animated float */
  .cake-icon {
    font-size: 4rem;
    cursor: pointer;
    animation: floatCake 3s ease-in-out infinite; /* 👈 floating animation */
    transition: transform 0.3s ease;
  }

  /* On hover: pause float and do playful tilt */
  .cake-icon:hover {
    animation-play-state: paused;  /* stop floating while hovering */
    transform: scale(1.2) rotate(-5deg);
  }

  /* Keyframes for parachute-like up/down movement */
  @keyframes floatCake {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }

  /* Container */
  .floating-cake {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Clickable image button */
  .cake-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Cake image — no background/box */
  .cake-img {
    width: 140px;      /* adjust size */
    height: auto;
    display: block;
    border-radius: 0;  /* no rounding */
    box-shadow: none;  /* no shadow/box */
    transition: transform .35s cubic-bezier(.2,.9,.3,1);
    animation: floatCake 3.2s ease-in-out infinite;
  }

  /* Float animation */
  @keyframes floatCake {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
  }

  /* Pause float + hover effect */
  .floating-cake:hover .cake-img,
  .floating-cake.open .cake-img {
    animation-play-state: paused;
    transform: translateY(-6px) scale(1.06) rotate(-2deg);
  }

  /* Dropdown Menu */
  .cake-menu {
    margin-top: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: all .25s ease;
  }

  .floating-cake:hover .cake-menu,
  .floating-cake.open .cake-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .cake-menu ul { list-style: none; margin: 0; padding: 0; }
  .cake-menu li { border-bottom: 1px solid #eee; }
  .cake-menu li:last-child { border-bottom: none; }
  .cake-menu a {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
  }
  .cake-menu a:hover { background: #FB95A0; color: #fff; }

  /* Mobile adjustments */
  @media (max-width: 640px) {
    .cake-img { width: 110px; }
    .cake-menu { min-width: 180px; }
  }


  :root{
  --gap: 12px;
  --bg: #fffafc;
  --muted: #6b6b6b;
  --accent: #FB95A0;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Alegreya', serif;background:var(--bg);color:#222}
.masonry-container{max-width:1200px;margin:28px auto;padding:0 18px}
.masonry-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.masonry-header h1{font-size:1.9rem;margin:0}
.masonry-header .muted{color:var(--muted);margin:4px 0 0}

/* grid: use auto-rows technique for masonry measurement */
.masonry-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 8px;           /* small row height for fine-grained spanning */
  gap: var(--gap);
  align-items:start;
  margin-bottom:40px;
}

/* item */
.masonry-item{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 8px 30px rgba(14,18,24,0.06);
  cursor:zoom-in;
  transition: transform .22s ease, box-shadow .22s ease;
  margin: 0; padding: 0;
}
.masonry-item:focus, .masonry-item:hover{ transform: translateY(-6px); box-shadow: 0 22px 58px rgba(14,18,24,0.12); outline: none; }

/* special sizes */
.masonry-item.big{ grid-column: span 2; } /* on wide screens it becomes wide */
.masonry-item.tall .masonry-img{ height: 420px; object-fit:cover; }

.masonry-img{ width:100%; height: auto; object-fit: cover; transition: transform .45s ease; }



/* video badge */
.video-badge{
  position:absolute;left:12px;top:12px;background:rgba(0,0,0,0.6);color:#fff;padding:6px 8px;border-radius:8px;font-weight:700;font-size:0.9rem;
}

/* responsive tweaks */
@media (min-width: 1100px){
  .masonry-grid{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 8px; gap:16px; }
  .masonry-item.big{ grid-column: span 2; }  /* featured spans 2 columns on big screens */
  .masonry-img{ height: 360px; }
}
@media (max-width: 1100px){
  .masonry-grid{ grid-template-columns: repeat(3,1fr); }
  .masonry-img{ height: 260px; }
  .masonry-item.big{ grid-column: span 3; } /* featured full-width on medium screens */
}
@media (max-width: 700px){
  .masonry-grid{ grid-template-columns: repeat(2,1fr); }
  .masonry-img{ height: 220px; }
  .masonry-item.big{ grid-column: span 2; }
}
@media (max-width: 420px){
  .masonry-grid{ grid-template-columns: 1fr; }
  .masonry-img{ height: 220px; }
  .masonry-item.big{ grid-column: span 1; }
}

/* lightbox overlay */
.ms-lightbox{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.75);z-index:2000;padding:24px;
}
.ms-lightbox.open{display:flex}
.ms-stage{width:100%;max-width:1000px;height:78vh;background:#000;border-radius:10px;display:grid;place-items:center;overflow:hidden}
.ms-stage img, .ms-stage iframe{width:100%;height:100%;object-fit:contain}
.ms-close, .ms-prev, .ms-next{
  position: absolute; background: rgba(0,0,0,0.45); color:#fff; border:none; padding:10px 12px; font-size:22px; border-radius:8px; cursor:pointer;
}
.ms-close{right:18px;top:18px}
.ms-prev{left:18px;top:50%;transform:translateY(-50%)}
.ms-next{right:18px;top:50%;transform:translateY(-50%)}

/* small caption (optionally) */
.ms-caption{position:absolute;left:20px;bottom:18px;color:#fff;font-size:0.95rem}