/* --- About section: 2-col grid with big logo --- */
.about-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: center; }
.about-logo svg { width: 100%; max-width: 360px; height: auto; display: block; margin-inline: auto; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* Facebook button for About */
.btn-fb { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; border: 1px solid #fff; padding: .45rem .75rem; border-radius: 999px; font-weight: 700; background: #1877F2; color: #fff; border-color: transparent; }
.btn-fb:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24,119,242,.45); }

/* --- Center the Hours & contact section on desktop --- */
#contact .container { text-align: center; }
#contact .cards.two { display: inline-grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; justify-content: center; }
#contact .card { text-align: left; }
@media (max-width: 820px) { #contact .cards.two { grid-template-columns: 1fr; } }
/* keep the SVG a sane size */
.logo svg { width: 220px; height: auto; display: block; }

/* smooth transforms */
#head, #left-hand, #right-hand, #shadow {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}

/* define the pose once */
#head       { --t: translateY(8px);                        --o: 1; }
#shadow     { --t: scaleX(.8) scaleY(.6);                  --o: .7; }
#left-hand  { --t: translateX(10px) translateY(-4px) rotate(12deg);  --o: 0; }
#right-hand { --t: translateX(-10px) translateY(-4px) rotate(-12deg); --o: 0; }

/* use that pose for BOTH hover and the initial class */
.logo:hover #head,       .logo.hover-pose #head,       .logo.hover #head       { transform: var(--t); }
.logo:hover #shadow,     .logo.hover-pose #shadow,     .logo.hover #shadow     { transform: var(--t); opacity: var(--o); }
.logo:hover #left-hand,  .logo.hover-pose #left-hand,  .logo.hover #left-hand  { transform: var(--t); opacity: var(--o); }
.logo:hover #right-hand, .logo.hover-pose #right-hand, .logo.hover #right-hand { transform: var(--t); opacity: var(--o); }

/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #head, #left-hand, #right-hand, #shadow { transition: none; }
}
#logo:hover {
  cursor: default;
}
body {
  background-color: #245d7b;
  font-family: 'Figtree', Arial, Helvetica, sans-serif;
  color: #fff;
  margin: 1rem;
}
p {
  line-height: 1.5;
}

  /* Put SVG and text side-by-side */
  #logo { display: inline-flex; align-items: center; gap: .25rem; }

  /* Tame the SVG size a touch */
  #logo svg { width: 88px; height: auto; display: block; }

  /* Stack and size the brand text */
  .brand-text { display: flex; flex-direction: column; line-height: 1; }
  .brand-ask  { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.04em; text-align: left; }
  .brand-auto { font-size: 2rem;  font-weight: 500; opacity: 0.8; text-align: left; }

  /* Responsive tweak */
  @media (max-width: 480px) {
    #logo svg { width: 72px; }
    .brand-ask  { font-size: 1.75rem; }
    .brand-auto { font-size: 0.875rem; }
  }
.header-container {
display: inline-flex;
align-items: center;
gap: 3rem;
margin: auto;
}
header {
background-color: #143448;
border-radius: 1rem;
padding: 2rem;
text-align: center;
}
a {
color: #fff;
}
  /* push actions to the right if there's room */
  .header-container .actions { margin-left: auto; display: flex; align-items: center; gap: 2rem; }

  /* Primary booking button */
  .btn { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; border: 1px solid #fff; padding: .3rem .6rem; border-radius: 999px; font-weight: 700; }
  .btn-primary { background: #fff; color: #1a4359; border-color: #fff; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,255,255,.35); }

  /* Contact panel */
  .contact { display: inline-flex; flex-direction: column; gap: .15rem; text-decoration: none; color: #fff; }
  .contact small { opacity: .8; font-weight: 700; font-size: .7rem; text-align: left; margin-left: 1.7rem; }
  .contact .phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.125rem; }


  @media (max-width: 680px) {
    .header-container { flex-direction: column; align-items: center; gap: 2rem; }
    .header-container .actions { margin-left: 0; }
    #logo svg { width: 72px; }
    .brand-ask { font-size: 3.5rem; }
    .brand-auto { font-size: 2rem; }
  }


/* ------------------ Layout & sections ------------------ */
.section { padding: 4rem 2rem; }
.section-light { background: #1a4f6b; border-radius: 1rem;}
.container { max-width: 1000px; margin: 0 auto; flex: 1 1 33.333%;}
.hero-title { margin: 0 0 .5rem 0; font-size: 2rem; }
.hero-sub { margin: 0 0 1rem 0; opacity: .95; }
.hero-ctas { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* Cards / grids */
.cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1rem; margin-top: 1rem; }
.cards.two { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
.card { border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 1rem; background: rgb(26, 79, 107); }
.card h3 { margin-top: 0; margin-bottom: 0.25rem; }
.card .muted { margin-top: 0rem ;
}
.meta { font-family: monospace; opacity: .9; }
.price { font-weight: 700; }
.muted { opacity: .85; }
/* Bring services explainer closer to the title */
.services-explainer { margin-top: -.25rem; }

/* Lists */
.usp-list { display: grid; gap: .5rem; padding-left: 1.2rem; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }

/* Booking form */
.booking-form { display: grid; gap: 1rem;}
.booking-form label { display: grid; gap: .35rem; }
.booking-form input,
.booking-form select,
.booking-form textarea { border-radius: 6px; padding: .6rem .75rem; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.1); color: #fff; }
.booking-form input::placeholder,
.booking-form textarea::placeholder { color: rgba(255,255,255,.7); }
.booking-form button { display: block; padding: 0.6rem .8rem; font-size: 16px;}
.booking-form {background-color: #1a4f6b; padding: 2rem; border-radius: 1rem; flex: 1 1 50%;}
#book .container { flex: 1 1 50%; }
#book { align-items: unset; flex-direction: column; }

@media (min-width: 900px) {
  .hero-title { font-size: 2.4rem; }
}
.emoji {
  font-size: 2rem;
  margin: 0 0 1rem 0;
}
.section {
display: flex;
gap: 4rem;
align-items: center;
}
.banner-image {
flex: 1 1 66.666%;
}
.section img {
width: 100%;
border-radius: 1rem;
border: 1px solid rgba(255,255,255,.35);
box-shadow: 0px 6px 12px #0000003d;
}
main {
max-width: 1200px;
margin: auto;
}
/* --- Areas covered grid & map --- */
.areas-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items: start; }
.area-links { columns: 2; column-gap: 1.5rem; list-style: none; padding: 0; margin: .5rem 0 1rem; }
.area-links li { break-inside: avoid; margin: .15rem 0; }
.area-links a { text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.35); }
.area-links a:hover { border-bottom-style: solid; }
.map { background: rgba(0,0,0,.08); border: 1px solid rgba(255,255,255,.35); border-radius: .75rem; padding: .5rem; }
.map iframe { width: 100%; height: 280px; border: 0; border-radius: .5rem; display: block; }
.map .map-link { display: inline-block; margin-top: .5rem; font-size: .9rem; }

.map { position: relative; }
.map-hint { display: none; position: absolute; left: .8rem; right: .8rem; bottom: 2.5rem; padding: .45rem .6rem; border-radius: .5rem; font-size: .9rem; font-weight: 700; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); border: 1px solid rgba(255,255,255,.35); text-align: center; }

/* Desktop/tablet: map is interactive */
@media (min-width: 821px) {
  .map iframe { pointer-events: auto; }
}

/* Mobile: disable map interactions and show hint */
@media (max-width: 820px) {
  .map iframe { pointer-events: none; }
  .map-hint { display: block; }
}

@media (max-width: 820px) {
  .areas-grid { grid-template-columns: 1fr; }
  .area-links { columns: 1; }
  .section { flex-direction: column; gap: 1rem; padding: 1.5rem; }
  #why { flex-direction: column-reverse; }
  #book { padding: 1.5rem 0rem; }
}

/* --- Footer --- */
html { scroll-behavior: smooth; }
.site-footer { background: #0f2733; border-top: 1px solid rgba(255,255,255,.2); padding: 2rem 1rem; margin-top: 2rem; border-radius: 1rem; }
.footer-grid { display: flex; flex-direction: column; align-items: center; }
.footer-brand .brand-inline { font-weight: 800; letter-spacing: .04em; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.back-to-top { justify-self: end; }
.back-to-top a, .back-to-top a:hover { text-decoration: none; }
.back-to-top a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; border: 1px solid rgba(255,255,255,.35); padding: .4rem .7rem; border-radius: .5rem; }
.footer-grid p { margin: .5rem; text-align: center;}
@media (max-width: 450px) {
  .header-container .actions {
    flex-direction: column;
    gap: 1rem;
  }
}

#book iframe {
  border-radius: 1rem;
  padding: 1rem;
  background: #e7eef3;
  border: 1px solid rgba(255,255,255,.35);
  width: 100%;
  box-sizing: border-box;
}
h2 {
  margin-top: 0rem;
}
/* Normalize contact list icons and align links */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 0.6rem; }
.list .icon { width: 20px; height: 20px; flex: 0 0 20px;
              display: inline-flex; align-items: center; justify-content: center;
              font-size: 20px; line-height: 1; }
.list svg { width: 20px; height: 20px; flex: 0 0 20px; display: block; }
.list a { line-height: 1.2; }
.hidden {
  display: none;
}
.star-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.star-rating p {
  margin: 0px
}
label {
  display: inline-flex;
}
.required-asterisk {
  color: #ff4d4d;
}
.optional {
  opacity: 0.8;
}