/* Page-specific CSS retained from the original 1 page. */

:root {
            --pink: #ff85a2;
            --light-pink: #fff5f7;
            --success: #2ed573;
            --dark: #2d3436;
            --blue: #87CEEB;
            --stripe: repeating-linear-gradient(45deg, #ffffff, #ffffff 30px, #fcf3e4 30px, #fcf3e4 60px);
        }

body { 
            font-family: "Quicksand", sans-serif; 
            background: var(--stripe); 
            background-attachment: fixed;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

.hero {
            position: relative; padding: 120px 20px 100px; text-align: center;
            background: white; border-bottom: 8px solid var(--brand); overflow: hidden;
        }

.hero-content { position: relative; z-index: 100; max-width: 800px; margin: 0 auto; }

.hero h1 { 
            font-family: "Pacifico", cursive; font-size: 4.5rem; 
            color: var(--pink); margin: 0;
            text-shadow: 4px 4px 0px #fff, 8px 8px 0px rgba(0,0,0,0.02);
            line-height: 1.2;
        }

.hero p { font-size: 1.4rem; color: #636e72; font-weight: 600; margin-top: 15px; }

.balloon-perspective { position: absolute; display: flex; flex-direction: column; align-items: center; pointer-events: none; }

.balloon-body { width: 65px; height: 80px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; position: relative; box-shadow: inset -8px -10px 20px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.1); }

.balloon-body::before { content: ""; position: absolute; top: 12%; left: 20%; width: 30%; height: 25%; background: rgba(255, 255, 255, 0.4); border-radius: 50%; filter: blur(2px); transform: rotate(-15deg); }

.balloon-body::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 10px; height: 6px; background: inherit; clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }

.wavy-tail { width: 20px; height: 100px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: 0.5; animation: wiggle-tail infinite ease-in-out 3s; transform-origin: top center; }

.near { z-index: 150; opacity: 0.4; animation: float-near infinite ease-in-out; }

@keyframes float-near {
0%, 100% { transform: scale(1.8) translateY(0); filter: blur(3px); }

50% { transform: scale(1.8) translateY(-30px); filter: blur(3px); }
}

.mid { z-index: 50; opacity: 0.8; animation: float-mid infinite ease-in-out; }

@keyframes float-mid {
0%, 100% { transform: scale(1.1) translateY(0); filter: blur(0); }

50% { transform: scale(1.1) translateY(-45px); filter: blur(0); }
}

.far { z-index: 20; opacity: 0.5; animation: float-far infinite ease-in-out; }

@keyframes float-far {
0%, 100% { transform: scale(0.7) translateY(0); filter: blur(1px); }

50% { transform: scale(0.7) translateY(-25px); filter: blur(1px); }
}

.tiny { z-index: 10; opacity: 0.3; animation: float-tiny infinite ease-in-out; }

@keyframes float-tiny {
0%, 100% { transform: scale(0.4) translateY(0); filter: blur(2px); }

50% { transform: scale(0.4) translateY(-15px); filter: blur(2px); }
}

@keyframes wiggle-tail {
0%, 100% { transform: rotate(-4deg); }

50% { transform: rotate(4deg); }
}

.container { width: 90%; max-width: 1200px; margin: -60px auto 20px; position: relative; z-index: 200; flex: 1; }

.experience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.card {
            background: white; border-radius: 40px; padding: 0 0 30px 0;
            text-align: center; border: 6px solid var(--brand);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center;
            overflow: hidden;
        }

.card:hover { transform: translateY(-15px); border-color: var(--pink); }

.card-image { width: 100%; height: auto; border-bottom: 6px solid var(--brand); margin-bottom: 20px; }

.card h2 { font-family: "Pacifico", cursive; font-size: 2rem; color: var(--pink); margin: 10px 0; padding: 0 30px; }

.card p { padding: 0 30px; margin-bottom: 20px; }

.btn-action { margin-top: auto; background: var(--brand); color: white; padding: 12px 25px; border-radius: 15px; font-weight: 800; text-transform: uppercase; }

.main-feature {
            background: white; border-radius: 40px; border: 8px solid var(--brand);
            margin-top: 60px; display: flex; align-items: stretch; overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.08);
        }

.feature-img { width: 50%; min-height: 400px; object-fit: cover; }

.feature-text { width: 50%; padding: 60px; display: flex; flex-direction: column; justify-content: center; }

.trust-bar {
            background: white; padding: 32px 20px; display: flex;
            justify-content: center; gap: 42px; border-top: 5px solid var(--brand);
            border-bottom: 0;
            flex-wrap: wrap; margin-top: 0;
        }

.trust-item { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--dark); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }

.trust-item span { font-size: 1.4rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1)); }

.social-links { display: flex; justify-content: center; gap: 25px; margin-bottom: 15px; }

@media (max-width: 768px) {
  .hero h1 { font-size: 2.8rem; }

  .container{
    width:96%;
    margin:-42px auto 16px;
  }

  .experience-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .card{
    border-width:4px;
    border-radius:24px;
    padding-bottom:16px;
  }

  .card:nth-child(3){
    grid-column:1 / -1;
    width:50%;
    justify-self:center;
  }

  .card-image{
    margin-bottom:10px;
    border-bottom-width:4px;
  }

  .card h2{
    font-size:1.2rem;
    line-height:1.12;
    padding:0 10px;
    margin:7px 0;
  }

  .card p{
    font-size:.72rem;
    line-height:1.38;
    padding:0 10px;
    margin:0 0 12px;
  }

  .btn-action{
    padding:8px 10px;
    border-radius:11px;
    font-size:.62rem;
  }

  .main-feature{
    margin-top:22px;
    border-width:4px;
    border-radius:24px;
    flex-direction:row;
    min-height:220px;
  }

  .feature-img{
    width:44%;
    min-height:220px;
    height:auto;
    object-fit:cover;
  }

  .feature-text{
    width:56%;
    padding:18px 16px;
  }

  .feature-text h2{
    font-size:1.55rem !important;
    line-height:1.1;
    margin-bottom:8px !important;
  }

  .feature-text p{
    font-size:.74rem;
    line-height:1.45 !important;
    margin:0;
  }

  .feature-text div{
    font-size:.69rem;
    margin-top:12px !important;
  }

  .balloon-perspective.near{display:none}

  .trust-bar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
    padding:16px 18px;
    justify-items:start;
  }

  .trust-item{
    font-size:.68rem;
    line-height:1.2;
    gap:7px;
  }

  .trust-item span{
    font-size:1.1rem;
  }

  .trust-item:last-child{
    grid-column:1 / -1;
    justify-self:center;
  }
}

@media (max-width: 390px) {
  .card h2{font-size:1.08rem}
  .card p{font-size:.68rem}
  .btn-action{font-size:.58rem}

  .main-feature{min-height:205px}
  .feature-img{width:42%;min-height:205px}
  .feature-text{width:58%;padding:15px 12px}
  .feature-text h2{font-size:1.35rem !important}
  .feature-text p{font-size:.68rem}
  .feature-text div{font-size:.62rem}

  .trust-item{font-size:.62rem}
}

/* ==========================================================================
   MPB HOMEPAGE HEADER — CANONICAL TYPOGRAPHY
   Kept LAST so the mobile layout cannot remove/override it.
   ========================================================================== */
.hero h1{
  font-family:"Pacifico",cursive !important;
  color:#ff4f86 !important;
  font-weight:400 !important;
  text-shadow:
    3px 3px 0 #fff,
    -2px -2px 0 #fff,
    2px -2px 0 #fff,
    -2px 2px 0 #fff,
    7px 7px 0 rgba(0,0,0,.065) !important;
}

.hero p{
  font-family:"Quicksand",sans-serif !important;
  color:#56667b !important;
  font-weight:500 !important;
}



/* ==========================================================================
   TIE-FREE — homepage feature frame
   Matches the homepage card/main-feature frame language.
   ========================================================================== */
.tie-free-teaser{
  margin-top:60px;
  padding:34px 42px;
  background:#fff;
  border:8px solid var(--brand);
  border-radius:40px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  overflow:hidden;
}
.tie-free-copy{max-width:820px}
.tie-free-kicker{
  display:inline-block;
  margin-bottom:6px;
  color:var(--brand);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
}
.tie-free-teaser h2{
  margin:0 0 9px;
  font-family:'Quicksand',sans-serif;
  font-size:clamp(1.65rem,3vw,2.45rem);
  line-height:1.08;
  color:var(--dark);
}
.tie-free-teaser h2 strong{
  color:var(--pink);
  font-family:'Pacifico',cursive;
  font-weight:400;
}
.tie-free-teaser p{
  margin:0;
  color:#636e72;
  font-weight:600;
  line-height:1.5;
}
.tie-free-note{
  display:block;
  margin-top:9px;
  color:var(--brand-dark);
  font-size:.84rem;
  font-weight:800;
}
.tie-free-balloon{
  flex:0 0 auto;
  font-size:4.5rem;
  transform:rotate(8deg);
}

@media(max-width:768px){
  .tie-free-teaser{
    margin-top:22px;
    padding:18px 16px;
    border-width:4px;
    border-radius:24px;
    gap:12px;
  }
  .tie-free-kicker{font-size:.64rem}
  .tie-free-teaser h2{font-size:1.55rem}
  .tie-free-teaser p{font-size:.74rem;line-height:1.45}
  .tie-free-note{font-size:.69rem}
  .tie-free-balloon{font-size:3rem}
}

@media(max-width:390px){
  .tie-free-teaser{padding:15px 12px}
  .tie-free-teaser h2{font-size:1.35rem}
  .tie-free-teaser p{font-size:.68rem}
  .tie-free-note{font-size:.64rem}
  .tie-free-balloon{font-size:2.55rem}
}


/* Homepage reusable pink script heading */
.section-script-heading{
  margin:0 0 9px;
  font-family:"Pacifico",cursive !important;
  font-size:clamp(1.65rem,3vw,2.45rem) !important;
  line-height:1.08;
  color:var(--pink) !important;
  font-weight:400 !important;
}


/* Tie-Free feature: text + edge-to-edge artwork split */
.tie-free-teaser{
  padding:0 !important;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.95fr);
  align-items:stretch;
}

.tie-free-copy{
  padding:38px 42px;
  align-self:center;
}

.tie-free-media{
  min-width:0;
  align-self:stretch;
  border-left:6px solid var(--orange);
  overflow:hidden;
  background:#f9dce8;
}

.tie-free-balloon-image{
  display:block;
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  object-position:center;
  border-radius:0;
}

@media(max-width:768px){
  .tie-free-teaser{
    grid-template-columns:1fr;
  }

  .tie-free-copy{
    padding:25px 22px;
  }

  .tie-free-media{
    border-left:0;
    border-top:5px solid var(--orange);
    min-height:210px;
  }

  .tie-free-balloon-image{
    min-height:210px;
    max-height:300px;
  }
}

@media(max-width:390px){
  .tie-free-copy{
    padding:22px 18px;
  }

  .tie-free-media,
  .tie-free-balloon-image{
    min-height:185px;
  }
}


/* FINAL Tie-Free layout correction */
body .tie-free-teaser{
  padding:0 !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr) !important;
  align-items:stretch !important;
}

body .tie-free-teaser .tie-free-copy{
  padding:38px 42px !important;
  align-self:center !important;
}

body .tie-free-teaser .tie-free-media{
  position:relative !important;
  min-width:0 !important;
  align-self:stretch !important;
  overflow:hidden !important;
  background:#f9dce8 !important;
  border-left:6px solid var(--orange,#ff8a00) !important;
  border-top:0 !important;
  border-radius:0 !important;
}

body .tie-free-teaser .tie-free-balloon-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
}

/* On phones, make this feature the same compact card-like height as the cards above */
@media(max-width:768px){
  body .tie-free-teaser{
    grid-template-columns:1fr !important;
  }

  body .tie-free-teaser .tie-free-copy{
    padding:22px 20px !important;
  }

  body .tie-free-teaser .tie-free-media{
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
    border-left:0 !important;
    border-top:5px solid var(--orange,#ff8a00) !important;
  }

  body .tie-free-teaser .tie-free-balloon-image{
    width:100% !important;
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
    object-fit:cover !important;
    object-position:center 48% !important;
  }
}

@media(max-width:390px){
  body .tie-free-teaser .tie-free-copy{
    padding:19px 17px !important;
  }

  body .tie-free-teaser .tie-free-media,
  body .tie-free-teaser .tie-free-balloon-image{
    height:135px !important;
    min-height:135px !important;
    max-height:135px !important;
  }
}


/* MOBILE: keep Tie-Free horizontal like the Ready to Party feature */
@media(max-width:768px){
  body .tie-free-teaser{
    display:grid !important;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) !important;
    align-items:stretch !important;
    padding:0 !important;
  }

  body .tie-free-teaser .tie-free-copy{
    min-width:0 !important;
    padding:18px 16px !important;
    align-self:center !important;
  }

  body .tie-free-teaser .tie-free-media{
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:stretch !important;
    border-top:0 !important;
    border-left:5px solid var(--orange,#ff8a00) !important;
    overflow:hidden !important;
  }

  body .tie-free-teaser .tie-free-balloon-image{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  body .tie-free-teaser .eyebrow{
    font-size:.58rem !important;
    margin-bottom:5px !important;
  }

  body .tie-free-teaser h2{
    font-size:1.22rem !important;
    line-height:1.08 !important;
    margin-bottom:7px !important;
  }

  body .tie-free-teaser h2 strong{
    font-size:1.22rem !important;
  }

  body .tie-free-teaser .tie-free-copy p{
    font-size:.72rem !important;
    line-height:1.35 !important;
    margin-bottom:6px !important;
  }

  body .tie-free-teaser .tie-free-note{
    font-size:.64rem !important;
  }
}

@media(max-width:390px){
  body .tie-free-teaser{
    grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr) !important;
  }

  body .tie-free-teaser .tie-free-copy{
    padding:15px 13px !important;
  }

  body .tie-free-teaser h2,
  body .tie-free-teaser h2 strong{
    font-size:1.08rem !important;
  }

  body .tie-free-teaser .tie-free-copy p{
    font-size:.66rem !important;
  }
}
.hero h1 + p{margin-top:24px}
@media(max-width:600px) and (orientation:portrait){.hero h1 + p{margin-top:18px}}