/* Guide pages */
.ghero{position:relative;padding:3.2rem 16px 3.6rem;overflow:hidden}
.ghero::after{content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;max-width:620px;max-height:620px;border-radius:50%;background:rgba(255,255,255,.14)}
.ghero-in{max-width:1000px;margin:0 auto;position:relative;z-index:1}
.ghero h1{margin:.2rem 0 .6rem;color:#fff;text-shadow:3px 3px 0 rgba(16,26,53,.35)}
.ghero .lead{color:#fff;font-weight:600}
.ghero .kicker{color:var(--navy);background:var(--sun);display:inline-block;padding:.2rem .8rem;border-radius:999px;margin-bottom:1rem}
.crumb{font-size:.85rem;font-weight:600;margin:0 0 1rem;color:#fff}
.crumb a{color:#fff}
.g-pink{background:linear-gradient(135deg,var(--pink),#9C3BFF)}
.g-sun{background:linear-gradient(135deg,#FF9A1F,var(--pink))}
.g-aqua{background:linear-gradient(135deg,#00B8D4,#2A5BFF 90%)}
.g-orange{background:linear-gradient(135deg,var(--orange),var(--pink))}

.sec .prose{max-width:46rem;margin:0 auto 1.6rem;font-size:1.1rem}
.sec .prose p{margin:0 0 1.1rem;color:#E6EAFF}
.note{max-width:46rem;margin:1.4rem auto 0;background:rgba(255,229,43,.12);border:2px dashed var(--sun);border-radius:18px;padding:.9rem 1.2rem;color:var(--sun);font-weight:600}
.callout{background:var(--grad);border-radius:30px;padding:2.2rem;text-align:center;max-width:820px;margin:0 auto}
.callout p{max-width:34rem;margin:.4rem auto 1.4rem;font-weight:600}
.callout .btn-live{background:var(--navy);box-shadow:none}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 2rem}
.stats div{background:var(--navy2);border:2px solid rgba(255,255,255,.1);border-radius:24px;padding:1.2rem .8rem;text-align:center}
.stats div:nth-child(1){border-color:var(--sun)}.stats div:nth-child(2){border-color:var(--aqua)}.stats div:nth-child(3){border-color:var(--pink)}.stats div:nth-child(4){border-color:var(--orange)}
.stats b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.1}
.stats span{color:var(--muted);font-weight:600;font-size:.9rem}

/* cards on guide pages */
.gcard{border-radius:26px;padding:1.6rem;color:var(--navy)}
.gcard h3{margin:.3rem 0 .5rem}
.gcard p{margin:.4rem 0;font-weight:600}
.gcard .emo{font-size:2.4rem}
.gc1{background:var(--sun)}.gc2{background:var(--aqua)}.gc3{background:#FF9A5C}.gc4{background:#7FD7FF}.gc5{background:var(--pink)}.gc6{background:var(--sun)}
.gcard .fine{color:rgba(16,26,53,.75)}

/* tiles (beach services) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem}
.tiles div{background:var(--navy2);border-radius:22px;padding:1rem;text-align:center;font-size:.92rem;color:var(--muted);font-weight:600;display:grid;gap:.2rem;font-size:1.6rem}
.tiles div b{font-family:var(--head);font-weight:400;font-size:1.6rem;color:#fff}
.tiles div{font-size:.9rem}

/* family time slots */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.slot{border-radius:28px;padding:1.4rem;color:var(--navy)}
.slot h3{font-family:var(--head);font-size:2rem;margin:0 0 1rem;line-height:1}
.slot h3 span{font-size:1rem;display:block;font-family:var(--body);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.s9{background:var(--sun)}.s10{background:var(--aqua)}.s11{background:var(--pink);color:#fff}
.s11 .venue{background:rgba(16,26,53,.35);color:#fff}
.vgrid{display:grid;gap:.5rem}
.vgrid.wide{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.venue{display:flex;align-items:center;gap:.5rem;justify-content:space-between;background:rgba(255,255,255,.55);color:var(--navy);text-decoration:none;padding:.55rem .9rem;border-radius:14px;font-weight:600;transition:transform .12s}
.venue:hover{transform:translateX(4px)}
.venue b{font-weight:800}
.venue small{opacity:.8;margin-left:.3rem}
.venue i{font-style:normal;margin-left:auto}
.vgrid.wide .venue{background:var(--navy2);color:#fff;border:2px solid rgba(255,255,255,.1)}
.vgrid.wide .venue:hover{border-color:var(--sun)}

.gmore-grid{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem}
.gmore-grid a{background:var(--navy2);border:2px solid rgba(255,255,255,.12);padding:.7rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:800}
.gmore-grid a:hover{border-color:var(--sun);color:var(--sun)}
.gmore .center{text-align:left}

@media(max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .slots{grid-template-columns:1fr}
  .nav a:not(.btn):not(:first-child){display:none}
  .top .nav{gap:.6rem}
}