/* reveal animations */
.reveal{ opacity:0; transform: translateY(12px); transition: .6s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

.grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, 1fr);
}
.grid--img .tile{ padding:0; position:relative; overflow:hidden; height:240px; border-radius: var(--radius); border:1px solid var(--border); }
.tile--img img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.tile--img:hover img{ transform: scale(1.04); }
.tile--img span{
  position:absolute; left:14px; bottom:14px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius: 999px;
  color: var(--text);
  backdrop-filter: blur(10px);
}

@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

/* Split intro */
.split{
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap:18px;
  align-items:start;
}
.mini-card{
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding:18px;
}
.list{ margin:10px 0 0; padding-left:18px; color: var(--muted); }
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; }
}

/* Before/After slider */
.ba{
  position:relative;
  border-radius: var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
  height: 420px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ba__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ba__after{
  clip-path: inset(0 0 0 55%); /* JS updates this */
}
.ba__range{
  position:absolute;
  inset:auto 0 16px 0;
  width: calc(100% - 32px);
  margin: 0 16px;
}
.ba__handle{
  position:absolute;
  top:0;
  bottom:0;
  left:55%;
  width:2px;
  background: color-mix(in srgb, var(--text) 65%, transparent);
}
.ba__label{
  position:absolute;
  top:14px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--text);
  backdrop-filter: blur(10px);
  font-size: 0.95rem;
}
.ba__label--left{ left:14px; }
.ba__label--right{ right:14px; }

/* Booking */
.booking{
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding:18px;
  max-width: 820px;
}
.booking__grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px){
  .booking__grid{ grid-template-columns:1fr; }
}
.field{ display:grid; gap:8px; }
.field__label{ color: var(--muted); font-size:0.95rem; }
.booking__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px; }

/* Footer */
.footer{ padding:26px 0; border-top:1px solid var(--border); }
.footer__inner{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.footer__links{ display:flex; gap:14px; }