:root{ --salmon:#ff8585; --green:#051c1d; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ font-family:"Roboto Slab", serif; background:var(--green); color:#fff; }

/* Hero */
.hero{position:relative; width:100%; height:52vh; min-height:420px; overflow:hidden;}
.hero__img{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) saturate(0.9);}
.hero__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px 18px; background:linear-gradient(to top, rgba(5,28,29,.7), rgba(5,28,29,0) 60%);}
.hero__title{margin:0; font-size:clamp(96px,9vw,48px); letter-spacing:.5px}
.hero__kicker{margin:6px 0 0; opacity:.9; font-size:clamp(24px,3.6vw,18px)}

/* Accordion */
.accordion{width:100%;}
details.acc{border:none; transition:background .3s ease;}
summary{list-style:none; cursor:pointer; padding:22px 18px; display:flex; align-items:center;}
summary::-webkit-details-marker{display:none;}
.acc--salmon{background:var(--salmon); color:var(--green);}
.acc--green{background:var(--green); color:var(--salmon); border-top:1px solid rgba(255,255,255,.08);}
.acc__summary{width:100%;}
.acc__title{margin:0 0 6px; font-size:clamp(32px,6vw,28px); line-height:1.1}
.acc__hook{margin:0; font-size:clamp(22px,4vw,18px); max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .35s ease;}
details[open] .acc__hook{max-height:999px; opacity:1;}
.acc__body{padding:0 18px 22px;}
.acc__desc{margin:6px 0 18px; font-size:clamp(16px,3.8vw,17px); line-height:1.45}
.acc__offerings{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; font-size:clamp(11px,3.6vw,16px)}
.acc__offerings ul{margin:0; padding-left:18px; display:grid; gap:6px;}
.acc__offerings li{line-height:1.25}

/* Slider */
.slider{position:relative; margin:8px 0 0; overflow:hidden; }
.slides{display:flex; gap:4px; align-items:stretch;}
.slide{min-width:80%; transition:transform .35s ease, opacity .35s ease; opacity:.6}
.slide.is-active{opacity:1; transform:scale(1.0)}
.mock{height:180px; background:linear-gradient(135deg, rgba(0,0,0,.15), rgba(255,255,255,.15)); border-radius:10px; border:1px dashed currentColor;}
.mock--alt{background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.18));}
.slide figcaption{font-size:12px; margin-top:8px}

/* Booking */
.booking{padding:28px 18px; background:var(--salmon); color:var(--green);}
.booking h2{margin:0 0 6px; font-size:clamp(22px,6vw,28px)}
.booking__sub{margin:0 0 16px; font-size:clamp(13px,3.6vw,16px)}

.gcal-embed{ border:1px solid var(--green); border-radius:12px; overflow:hidden; }
.gcal-embed iframe{ width:100%; height:700px; border:0; background:#fff; }

.booking__note{margin:10px 0 0; font-size:14px;}
.booking__note a{color:inherit; text-decoration:underline;}

/* Footer */
.footer{padding:22px 18px; background:var(--green); color:var(--salmon); text-align:center; font-size:13px; border-top:1px solid rgba(255,255,255,.08);}

@media(min-width:560px){ .slide{min-width:45%} }

/* Center and limit width for desktop browsers */
#content {
  max-width: 480px;   /* approx phone width */
  margin: 0 auto;     /* centers horizontally */
}

/* Optional: adjust text for desktop readability */
#content p,
#content li {
  line-height: 1.55;
  font-size: 1rem;
}

/* Auto reel tweaks */
.slider.autoscroll { padding: 10px; overflow: hidden; }
.slider.autoscroll .slides { gap: 8px; }
.slider.autoscroll .slide { opacity: 1; }
.slider.autoscroll .nav { display: none; }

/* Real-image reel: same height, variable widths */
.slider.autoscroll .slide {
  flex: 0 0 auto;        /* do not stretch */
  min-width: auto;       /* allow natural width */
  opacity: 1;            /* keep fully visible */
  border: 0;
  padding: 0;
  margin:7px;
}

.slider.autoscroll .slides {
  gap: 2px;              /* tight spacing */
}

.slider.autoscroll img {
  display: block;
  height: 180px;         /* <-- unify height; change to taste (e.g., 200px) */
  width: auto;           /* variable width */
  object-fit: cover;     /* crop if needed */
  border-radius: 10px;
  border: 1px solid currentColor; /* matches your style */
}

/* smoother touch handling; content is programmatically scrolled */
.slider.autoscroll { overflow: hidden; -webkit-overflow-scrolling: auto; }

/* Top buttons inside hero */
.hero__buttons {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
}

.hero-btn img,
.hero-btn .ig-icon {
  height: 40px;
  width: auto;
  display: block;
}

/* Optional: style Instagram icon with a dark circle */
.ig-icon {
  fill: var(--salmon);   /* matches your theme */
}