
:root{
  --navy:#11324d;
  --blue:#1f6aa5;
  --sky:#63c7ff;
  --gold:#ffd166;
  --coral:#ff7f6a;
  --mint:#76e3c1;
  --white:#ffffff;
  --text:#17324a;
  --muted:#5f7385;
  --bg:#f6fbff;
  --card:#ffffff;
  --shadow:0 18px 40px rgba(17,50,77,.12);
  --radius:22px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(255,209,102,.28), transparent 26%),
    radial-gradient(circle at 10% 20%, rgba(99,199,255,.2), transparent 25%),
    linear-gradient(180deg, #fbfeff 0%, #f4fbff 100%);
  line-height:1.6;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.container{width:min(calc(100% - 2rem), var(--max)); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(17,50,77,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:74px; gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.85rem;
  font-weight:800; font-size:1.1rem; color:var(--navy);
}
.brand-title{
  color:var(--navy);
}
.brand-mark{
  width:46px; height:46px; border-radius:14px;
  background:#fff;
  border:1px solid rgba(17,50,77,.08);
  box-shadow:0 10px 24px rgba(31,106,165,.16);
  display:grid; place-items:center; overflow:hidden;
  flex:0 0 auto;
}
.brand-mark img{
  width:100%; height:100%; object-fit:contain; padding:3px;
}
.nav-links{display:flex; gap:1rem; flex-wrap:wrap; align-items:center}
.nav-links a{
  padding:.65rem .85rem; border-radius:999px; color:var(--navy); font-weight:600;
}
.nav-links a:hover{background:#eef8ff; text-decoration:none}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.2rem; border-radius:999px; font-weight:800; letter-spacing:.01em;
  border:none; cursor:pointer; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn-primary{
  background:linear-gradient(135deg,var(--coral),#ff9f7f);
  color:#fff; box-shadow:0 14px 28px rgba(255,127,106,.25);
}
.btn-secondary{
  background:linear-gradient(135deg,var(--blue),var(--sky));
  color:#fff; box-shadow:0 14px 28px rgba(31,106,165,.25);
}
.btn-facebook{
  background:#1877f2;
  color:#fff; box-shadow:0 14px 28px rgba(24,119,242,.24);
}
.btn-instagram{
  background:#e84f5f;
  color:#fff; box-shadow:0 14px 28px rgba(232,79,95,.24);
}
.btn-ghost{
  background:#fff; color:var(--navy); border:1px solid rgba(17,50,77,.12);
}
.hero{padding:4.5rem 0 3.2rem}
.hero-grid{
  display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(340px, .92fr); gap:2rem; align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff7df; color:#835f00; border:1px solid rgba(255,209,102,.55);
  padding:.45rem .8rem; border-radius:999px; font-weight:800; font-size:.9rem;
}
h1,h2,h3{line-height:1.08; margin:0 0 1rem}
h1{font-size:3.35rem; letter-spacing:0; color:var(--navy)}
h2{font-size:2.55rem; letter-spacing:0; color:var(--navy)}
h3{font-size:1.25rem; color:var(--navy)}
.destination-link{
  color:inherit;
  text-decoration:none;
}
.destination-link:hover{
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:.18em;
}
.lead{font-size:1.12rem; color:var(--muted); max-width:60ch}
.hero .lead{max-width:72ch}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem}
.hero-points{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1.4rem;
}
.point{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(17,50,77,.08);
  border-radius:18px; padding:1rem; box-shadow:var(--shadow);
}
.visual-card{
  background:linear-gradient(180deg,#ffffff,#f3fbff);
  border:1px solid rgba(17,50,77,.08); border-radius:30px; padding:1.1rem;
  box-shadow:var(--shadow);
}
.photo-stack{display:grid; gap:1rem}
.photo{
  border-radius:24px; min-height:210px; aspect-ratio:4/3; position:relative; overflow:hidden;
  margin:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.7), transparent 20%),
    linear-gradient(135deg, rgba(99,199,255,.92), rgba(31,106,165,.88)),
    linear-gradient(180deg, rgba(255,209,102,.55), rgba(255,127,106,.5));
}
.photo img{
  width:100%; height:100%; object-fit:cover;
}
.photo::before{
  content:attr(data-label);
  position:absolute; inset:auto 18px 18px 18px;
  background:rgba(255,255,255,.88); color:var(--navy);
  padding:.8rem 1rem; border-radius:16px; font-weight:800;
}
.photo:not([data-label])::before{content:none}
.photo.small{min-height:140px}
.about-photo{
  aspect-ratio:3/4;
}
.photo-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;
}
.photo-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.gallery-photo{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:3/2;
  min-height:220px;
  background:#fff;
  border:1px solid rgba(17,50,77,.08);
  box-shadow:var(--shadow);
}
.gallery-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.gallery-photo-pixar img{
  object-position:78% 12%;
}
.hero-moments{
  background:linear-gradient(180deg,#ffffff,#f3fbff);
  border:1px solid rgba(17,50,77,.08);
  border-radius:30px;
  padding:1.1rem;
  box-shadow:var(--shadow);
}
.hero-moments h2{
  font-size:2rem;
}
.hero-moments p{
  margin:1rem 0 0;
}
.moment-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin-top:1.25rem;
}
.moment-photo{
  border-radius:var(--radius);
  overflow:hidden;
  margin:0;
  min-height:210px;
  aspect-ratio:3/2;
  box-shadow:var(--shadow);
  border:1px solid rgba(17,50,77,.08);
  background:#fff;
}
.moment-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.section{padding:4rem 0}
.grid-3,.grid-2,.grid-4{
  display:grid; gap:1rem;
}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  background:var(--card);
  border:1px solid rgba(17,50,77,.08);
  border-radius:var(--radius);
  padding:1.3rem;
  box-shadow:var(--shadow);
}
.card p:last-child{margin-bottom:0}
.icon{
  width:52px; height:52px; border-radius:16px;
  display:grid; place-items:center; font-size:1.4rem;
  background:linear-gradient(135deg, rgba(99,199,255,.18), rgba(255,209,102,.28));
  margin-bottom:1rem;
}
.badges{display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem}
.badge{
  padding:.55rem .8rem; border-radius:999px; font-weight:700; font-size:.92rem;
  background:#eef8ff; color:var(--blue); border:1px solid rgba(31,106,165,.12);
}
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start;
}
.quote-box{
  background:linear-gradient(135deg,#fff9ec,#eef9ff);
  border:1px solid rgba(17,50,77,.08);
  border-radius:28px; padding:1.5rem; box-shadow:var(--shadow);
}
.cta-strip{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff; border-radius:32px; padding:2rem; box-shadow:var(--shadow);
}
.cta-strip h2, .cta-strip p{color:#fff}
.testimonial{
  border-left:4px solid var(--gold);
}
.placeholder-note{
  margin-top:.75rem; font-size:.95rem; color:var(--muted);
}
.socials{display:flex; gap:.8rem; flex-wrap:wrap}
.social{
  padding:.85rem 1rem; border-radius:16px; background:#fff;
  border:1px solid rgba(17,50,77,.08); box-shadow:var(--shadow);
  font-weight:700;
}
.footer{
  padding:2.5rem 0 4rem; color:var(--muted);
}
.footer-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:start;
}
.small{font-size:.95rem; color:var(--muted)}
.eyebrow{
  color:var(--blue); text-transform:uppercase; letter-spacing:.12em;
  font-size:.82rem; font-weight:900; margin-bottom:.85rem;
}
.list-check{padding:0; margin:0; list-style:none}
.list-check li{padding-left:1.75rem; position:relative; margin:.6rem 0}
.list-check li::before{
  content:"✓"; position:absolute; left:.2rem; color:var(--mint); font-weight:900;
}
.page-hero{
  padding:3.4rem 0 2rem;
}
.callout{
  background:#fff; border-left:5px solid var(--coral); padding:1rem 1.1rem;
  border-radius:16px; box-shadow:var(--shadow)
}
.table-ish{
  display:grid; gap:.8rem;
}
.table-row{
  display:grid; grid-template-columns:1fr 1.8fr; gap:1rem;
  padding:1rem; background:#fff; border:1px solid rgba(17,50,77,.08);
  border-radius:18px; box-shadow:var(--shadow)
}
.blog-layout{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem; align-items:start;
}
.facebook-feed{
  background:#fff;
  border:1px solid rgba(17,50,77,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
  overflow:hidden;
}
.facebook-feed iframe{
  display:block;
  width:500px;
  max-width:500px;
  margin-inline:auto;
  transform:scale(1.08);
  transform-origin:top center;
  margin-bottom:72px;
}
.facebook-feed h2{
  font-size:1.6rem;
  text-align:center;
  margin-bottom:1rem;
}
.notice{
  background:#fff4e8; color:#7c4b00; border:1px solid rgba(255,127,106,.22);
  padding:1rem; border-radius:18px;
}
.reviews-section{
  padding-top:2.5rem;
}
.reviews-layout{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:1rem;
  align-items:start;
  margin-top:1.25rem;
}
.review-form{
  display:grid;
  gap:.85rem;
}
.field-label{
  font-weight:800;
  color:var(--navy);
}
.text-field{
  width:100%;
  border:1px solid rgba(17,50,77,.16);
  border-radius:16px;
  padding:.9rem 1rem;
  font:inherit;
  color:var(--text);
  background:#fff;
}
.text-field:focus{
  outline:3px solid rgba(99,199,255,.35);
  border-color:var(--blue);
}
.textarea-field{
  min-height:150px;
  resize:vertical;
}
.rating-field{
  border:0;
  padding:0;
  margin:.15rem 0;
}
.rating-field legend{
  font-weight:800;
  color:var(--navy);
  margin-bottom:.3rem;
}
.star-picker{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:.2rem;
}
.star-picker label{
  cursor:pointer;
  line-height:1;
}
.star-picker input{
  position:absolute;
  opacity:0;
}
.star-picker span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  color:#c8d4df;
  font-size:2rem;
  transition:color .15s ease, transform .15s ease;
}
.star-picker label:hover span,
.star-picker label:hover ~ label span,
.star-picker input:checked ~ span,
.star-picker label:has(input:checked) span,
.star-picker label:has(input:checked) ~ label span{
  color:#d99a16;
}
.star-picker label:hover span{
  transform:translateY(-1px);
}
.hidden-field{
  position:absolute;
  left:-9999px;
}
.review-status{
  min-height:1.4rem;
  margin:0;
}
.review-list{
  display:grid;
  gap:.85rem;
}
.review-item{
  border:1px solid rgba(17,50,77,.08);
  border-radius:18px;
  padding:1rem;
  background:#f8fcff;
}
.review-item p{
  margin:.45rem 0 0;
}
.review-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  justify-content:space-between;
}
.review-stars{
  color:#d99a16;
  letter-spacing:.08em;
  font-weight:900;
}
.review-date{
  color:var(--muted);
  font-size:.9rem;
}
@media (max-width: 980px){
  .hero-grid,.split,.footer-grid,.grid-4,.grid-3,.grid-2,.table-row,.blog-layout,.reviews-layout{grid-template-columns:1fr}
  .moment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-grid,.photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facebook-feed iframe{
    width:100%;
    transform:none;
    margin-bottom:0;
  }
  .nav{align-items:flex-start; padding:.8rem 0}
  .nav-links{justify-content:flex-start}
  .hero-points{grid-template-columns:1fr}
}
@media (max-width: 560px){
  h1{font-size:2.35rem}
  h2{font-size:2rem}
  .moment-grid{grid-template-columns:1fr}
  .photo-grid,.photo-gallery{grid-template-columns:1fr}
}
