:root{
  --pink:#ffd7eb;--blue:#e5f4ff;--text:#5a3342;--accent:#c44c73;--card:#ffffff;--soft:#fff6fa
}
*{box-sizing:border-box}
body{margin:0;font-family:Nunito,system-ui,sans-serif;background:linear-gradient(180deg,#ffe9f4 0%,#e5f4ff 100%);color:var(--text)}
h1,h2,h3,h4,h5{font-family:'Baloo 2',cursive;color:#7a2d3e;margin:0 0 .6rem}
a{color:#7a2d3e}
nav{display:flex;justify-content:center;gap:1.5rem;padding:1rem;background:var(--soft);flex-wrap:wrap;position:sticky;top:0;z-index:10}
nav a{text-decoration:none;color:#7a2d3e;font-weight:600}
nav a.active{color:var(--accent)}
.btn{display:inline-block;background:var(--pink);border:none;border-radius:14px;padding:.95rem 1.6rem;color:#7a2d3e;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 6px #f3b2c9}
.btn:hover{transform:translateY(-2px)}
.btn.big{font-size:1.1rem;padding:1rem 1.9rem}
.btn.outline{background:#fff;border:2px solid var(--pink)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;position:relative;padding:3rem 2rem;gap:1rem;overflow:hidden}
.hero.full{min-height:100vh}
.title.xl{font-size:clamp(2.4rem,6vw,4rem);line-height:1.02}
.sub{font-size:clamp(1.2rem,3.2vw,1.8rem);opacity:.95}
.tagline.big{font-size:clamp(1.1rem,2.2vw,1.35rem);margin:.6rem 0 1.1rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap}
.bullets{margin:1.1rem 0 0;padding-left:1.1rem;font-weight:600}
.hero-visual{position:relative;min-height:420px}
.logo-wrap{position:relative;z-index:2;background:rgba(255,255,255,.85);padding:14px;border-radius:22px;box-shadow:0 14px 36px rgba(196,76,115,.18)}
.logo-wrap.snug{display:inline-block}
.logo-wrap img{width:min(360px,34vw);max-width:100%;display:block}
#floaty{position:absolute;inset:0;z-index:1;pointer-events:none}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px 18px 32px}
.bigstrip .photo{min-height:180px}
.card{background:#ffffffcc;border:2px dashed #f3b2c9;border-radius:18px;display:flex;align-items:center;justify-content:center;padding:24px;font-weight:900;color:#a05a73}
.page{padding:2rem;max-width:1100px;margin:auto}
.center{text-align:center;padding:3rem}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem;align-items:start}
.about-grid.one-photo{grid-template-columns:1.1fr .9fr}
.about-photo-big{background:#fff;border:2px dashed #f3b2c9;border-radius:20px;display:flex;align-items:center;justify-content:center;min-height: 520px;color:#a05a73;font-weight:900}
.candy-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:12px 18px 24px}
.candy-strip .puff{height:70px;border-radius:18px;background:linear-gradient(135deg,#f7c7da,#e5f4ff)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{box-shadow:0 10px 24px rgba(0,0,0,.06)}
.mt{margin-top:1.3rem}
.flavor-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcard{background:#fff;border-radius:18px;padding:14px;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.svgwrap{height:120px;display:flex;align-items:center;justify-content:center;border-radius:16px;margin-bottom:8px}
.svgwrap svg{width:90px;height:90px;fill:currentColor}
.svgwrap.pink{color:#f7a3c1;background:#ffe4ef}
.svgwrap.blue{color:#85c5ec;background:#e6f5ff}
.svgwrap.green{color:#9bd59f;background:#e9faee}
.svgwrap.red{color:#ff8aa1;background:#ffe8ee}
.svgwrap.purple{color:#a992ff;background:#efe9ff}
.svgwrap.melon{color:#ffa1a1;background:#fff0f0}
.fcard h4{margin:.3rem 0 .2rem}
.addons-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:.6rem}
.addon{background:#fff;border-radius:18px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.addon .price{font-weight:900;margin:.2rem 0}
.addon .desc{opacity:.9}
.cta-center{text-align:center;margin-top:1rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery.decorated{position:relative}
.gallery.decorated:before{content:'';position:absolute;inset:-10px;pointer-events:none;background:repeating-linear-gradient(45deg,#ffe1f0 0 12px,#e9f6ff 12px 24px);opacity:.25;border-radius:20px;z-index:-1}
.gallery .g{background:#ffffff;border:2px dashed #f3b2c9;border-radius:16px;display:flex;align-items:center;justify-content:center;min-height:160px;color:#a05a73;font-weight:900}
.softnote{opacity:.9}
.book-form fieldset{border:2px solid #f7c7da;border-radius:14px;margin:12px 0;padding:12px}
.book-form legend{font-weight:900;color:#7a2d3e}
.flavor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
label{display:block;margin:.6rem 0;font-weight:700}
input,textarea{width:100%;padding:.7rem;border-radius:10px;border:2px solid #f7c7da;background:#fff}
.hidden{display:none}
.small{font-size:.95rem}
.hint{font-size:.9rem;color:#7a2d3e;opacity:.85}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
footer{text-align:center;padding:1.5rem;font-size:.95rem;background:var(--soft)}
footer .icon{width:20px;vertical-align:middle;margin-right:6px}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .logo-wrap{margin-top:18px}
  .flavor-cards{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
}

/* v4.1 Thank-You enhancements */
.thank-hero{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:3rem 1.5rem;
  overflow:hidden;
}
.big-title{
  font-size:clamp(2.2rem,6.5vw,4.2rem);
  line-height:1.05;
  margin-bottom:1rem;
  text-align:center;
}
.thank-wrap{
  position:relative;
  z-index:2;
  max-width:820px;
  width:100%;
  text-align:center;
  background:rgba(255,255,255,0.85);
  border-radius:24px;
  padding:1.5rem;
  box-shadow:0 12px 36px rgba(196,76,115,.16);
  border:2px dashed #f3b2c9;
}
#floaty.thank{position:absolute;inset:0;z-index:1;pointer-events:none}
.centered-form{
  max-width:720px;
  margin:1rem auto 2rem auto;
}
.centered-form .btn{
  display:inline-block;
  margin:0.8rem auto 0 auto;
}
.candy-confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.candy-confetti .c{
  position:absolute;
  opacity:.85;
  animation: drift 10s linear infinite;
}
@keyframes drift{
  0%{ transform: translateY(0) rotate(0deg); }
  100%{ transform: translateY(-60px) rotate(8deg); }
}
/* simple size helpers */
.c.small svg{ width:48px; height:48px; }
.c.med svg{ width:64px; height:64px; }
.c.big svg{ width:84px; height:84px; }
.c svg{ fill:#f7a3c1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)); }
.c.blue svg{ fill:#85c5ec; }
.c.green svg{ fill:#9bd59f; }
.c.purple svg{ fill:#a992ff; }

/* Step progress */
.progress {
  max-width: 900px; margin: 1rem auto 0.5rem auto; padding: 0 1rem;
}
.steps {display:flex; justify-content:space-between; align-items:center; gap:10px; counter-reset: step;}
.step {flex:1; position:relative; text-align:center; font-weight:600; color:#7a2d3e; font-family:'Baloo 2', cursive;}
.step:before {
  counter-increment: step; content: counter(step);
  display:inline-grid; place-items:center;
  width:42px; height:42px; margin-bottom:6px;
  background:#fff; color:#7a2d3e; border:3px solid #ffd7eb; border-radius:50%;
  box-shadow:0 5px 14px rgba(0,0,0,.06);
}
.step.active:before { background:#ffd7eb; border-color:#c44c73; color:#7a2d3e; }
.step span {display:block; font-size:0.95rem}
.connector {
  position:absolute; height:4px; background:#ffd7eb; left:50%; right:-50%; top:20px; z-index:-1;
}
.step:last-child .connector {display:none}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

/* layout */
.hero.hero-split {
  display:flex;
  align-items:center;
  gap:2.25rem;
  max-width:1180px;
  margin:0 auto;
  padding:4rem 1.25rem 3.25rem;
}
.hero-left {
  flex:0 0 420px;
  display:flex;
  justify-content:flex-end;
}
.hero-left .hero-photo {
  width:520px;
  max-width:100%;
  border-radius:1.6rem;
}
.hero-right {
  flex:1;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:0.85rem;
}
.hero-right .hero-lines {
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}
.hero-right .hero-line {
  font-family:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:1rem;
  line-height:1.28;
  color:var(--text);
}
.hero-right .cta-row {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.hero-photos {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.hero-photos .photo.card {
  flex:0 0 150px;
  min-height:120px;
}
.hero-right .impact {
  max-width:100%;
  margin-top:0.25rem;
}

@media (max-width: 980px) {
  .hero.hero-split {
    flex-direction:column;
    align-items:flex-start;
    padding-top:5.1rem;
  }
  .hero-left {
    justify-content:flex-start;
  }
  .hero-right {
    max-width:100%;
  }
  .hero-photos {
    justify-content:flex-start;
  }
}

/* cute floating cotton-candy-ish bubbles in background */
body::before,
body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-repeat:no-repeat;
  z-index:-1;
}
body::before {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,210,235,0.65) 0, rgba(255,210,235,0) 45%),
    radial-gradient(circle at 90% 10%, rgba(229,244,255,0.55) 0, rgba(229,244,255,0) 45%),
    radial-gradient(circle at 30% 80%, rgba(255,241,217,0.55) 0, rgba(255,241,217,0) 45%);
  animation:floaty 19s ease-in-out infinite alternate;
  filter:drop-shadow(0 16px 30px rgba(255,170,200,0.35));
}
body::after {
  background-image:
    radial-gradient(circle at 70% 75%, rgba(255,172,196,0.5) 0, rgba(255,172,196,0) 35%),
    radial-gradient(circle at 20% 60%, rgba(198,232,255,0.5) 0, rgba(198,232,255,0) 40%);
  animation:floaty2 23s ease-in-out infinite alternate;
}
@keyframes floaty {
  0% { transform:translateY(0px); }
  100% { transform:translateY(-26px); }
}
@keyframes floaty2 {
  0% { transform:translateY(18px); }
  100% { transform:translateY(-18px); }
}


/* Hero list styling */
.hero-list {
  margin: 0.25rem 0 0.5rem 1.25rem;
  padding: 0;
}
.hero-list li { 
  margin: 0.15rem 0;
}


/* ===== Mobile-first improvements without changing desktop ===== */
@media (max-width: 600px) {
  html { font-size: 17px; }              /* slightly larger text on phones */
  .page { padding: 18px 16px; }

  /* Keep look/feel but give breathing room */
  p { line-height: 1.7; }
  h1, h2, h3 { line-height: 1.2; }

  /* About section: single column, big photo like desktop feel */
  .about-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .about-photo-big { 
    min-height: 520px;                   /* match desktop visual heft */
    background-size: cover;
    background-position: center;
    margin-top: 6px;
  }

  /* Cards: one per row, comfortable spacing */
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card, .addon { padding: 16px; }

  /* Buttons full-width for easy tapping */
  .btn.big { width: 100%; text-align: center; }

  /* Navigation spacing so links don’t feel cramped */
  nav { gap: 1rem; padding: .8rem; }
}
@media (min-width: 601px) and (max-width: 900px) {
  html { font-size: 16px; }
  .page { padding: 20px; }
  .about-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .btn.big { width: auto; }
}


/* ===== Extra mobile-specific fixes (do not affect desktop) ===== */
@media (max-width: 600px) {
  /* Home: make both hero buttons same size and stacked */
  .hero .cta-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero .cta-row .btn { width: 100%; padding: 1rem 1.2rem; }

  /* Packages: make price cards layout vertical like desktop look */
  .cards .card { 
    display: block !important; 
    text-align: left; 
    padding: 18px !important;
  }
  .cards .card h3 { margin: 0 0 .35rem 0; }
  .cards .card p { margin: 0; font-weight: 400; }

  /* Booking: keep the fancy heading font/size like desktop */
  .now-head h1 { 
    font-family: 'Baloo 2', cursive !important; 
    font-size: 2.1rem !important; 
    line-height: 1.15 !important;
  }
}


/* === Mobile-only fixes requested === */
@media (max-width: 600px) {
  /* Home hero buttons: same size, stacked */
  .cta-row { display: grid; gap: 0.6rem; }
  .cta-row .btn { width: 100% !important; display: block; }

  /* Packages cards: ensure title + desc stack consistently */
  .cards .card h3 { display:block; margin:0 0 .35rem 0; white-space: normal; }
  .cards .card p { margin:0; }
}


/* Mobile: center button text perfectly */
@media (max-width: 600px) {
  .cta-row .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.1 !important;
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
  }
}