:root{
  /* Tropical palette inspired by the logo */
  --bg:#fff6ec;
  --ink:#04444a;        /* deep teal text */
  --ink-2:#066a70;      /* brighter teal */
  --accent:#f26b3a;     /* orange */
  --accent-2:#f4b544;   /* golden yellow */
  --muted:#5e7d82;
  --card:#ffffff;
  --shadow: 0 10px 25px rgba(4,68,74,.08), 0 2px 8px rgba(4,68,74,.06);
  --radius:18px;
  --maxw:1100px;
}

/* Reset-ish / global guards */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html,body{max-width:100%; overflow-x:hidden;}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
iframe{max-width:100%}
a{color:inherit; text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3{line-height:1.12; margin:0 0 .6rem}

.u{ text-decoration:underline; text-underline-offset:3px; }

/* Layout */
.container{max-width:var(--maxw); width:100%; margin-inline:auto; padding:0 20px}

/* =========================
   TOP NOTICE (ORANGE BAR)
   Keep it THIN
   ========================= */
.notice{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#092033;
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
}
.notice .container{
  padding:.45rem 20px;        /* thinner again */
}
.notice small{
  display:block;
  font-weight:750;
  margin-top:.25rem;
}
.notice a{color:#092033}

/* =========================
   HEADER / NAV
   ========================= */
header{
  position:sticky;
  top:0;
  z-index:50;

  /* solid background prevents “fade through” */
  background:var(--bg);
  border-bottom:1px solid #f4e0c4;
}

/* Grid areas prevent overlap */
.nav{
  position:relative; /* anchors mobile dropdown */
  display:grid;
  grid-template-columns: minmax(240px, 360px) 1fr auto;
  grid-template-areas: "brand menu cta";
  align-items:center;
  gap:14px;
  padding:10px 0;
}
.nav > *{min-width:0}

.brand{ grid-area:brand; display:flex; align-items:center; gap:12px; min-width:0; }
.brand img{
  width:46px;
  height:46px;
  border-radius:10px;
  object-fit:contain;
  background:#fff;
  padding:4px;
  box-shadow:var(--shadow);
}
.brand .name{
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:.2px;
  line-height:1.05;
  white-space:normal;     /* wrap instead of covering links */
  max-width:320px;
}
.brandlink{display:inline-flex}

/* Desktop menu */
.menu{
  grid-area:menu;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:nowrap;
  min-width:0;
}
.menu a{
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
  color:var(--ink-2);
  white-space:nowrap;
}
.menu a:hover{background:rgba(4,68,74,.08)}

/* CTA */
.cta{
  grid-area:cta;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
}
.cta .btn{white-space:nowrap}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.78rem 1.05rem;
  border-radius:14px;
  font-weight:900;
  border:2px solid transparent;
  box-shadow:var(--shadow);
}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{
  background:#fffaf3;
  color:var(--ink);
  border-color:#ffe0ba;
}
.btn-ghost:hover{background:#ffe7c6}

/* Burger (hidden on desktop) */
.burger{
  display:none;
  border:none;
  background:#fff;
  padding:.6rem .75rem;
  border-radius:10px;
  box-shadow:var(--shadow);
}

/* =========================
   FIX: “MID” DESKTOP WIDTHS
   Stack header into 2 rows so nothing overlaps
   ========================= */
@media (max-width: 1120px){
  .nav{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "menu  menu";
    row-gap:10px;
    padding:10px 0 12px;
  }

  .menu{
    justify-content:flex-start;
    flex-wrap:wrap;       /* KEY: allow wrap, prevents overlap */
    row-gap:8px;
  }
  .menu a{ padding:7px 10px; }

  /* slightly tighter CTAs */
  .cta .btn{
    padding:.65rem .85rem;
    border-radius:12px;
  }
}

/* =========================
   HERO
   ========================= */
.hero{
  padding: clamp(32px, 3.5vw + 12px, 72px) 0 36px;
  background:
    radial-gradient(circle at top left, rgba(242,107,58,.14), transparent 55%),
    radial-gradient(circle at bottom right, rgba(6,106,112,.16), transparent 55%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:34px;
  align-items:center;
}
.hero-grid > *{min-width:0}
.eyebrow{font-weight:900; color:var(--accent); text-transform:uppercase; letter-spacing:.12em}
.hero h1{font-size:clamp(1.8rem, 2.6vw + 1rem, 3rem)}
.hero p.lead{font-size:1.1rem; color:var(--muted)}
.hero-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  min-width:0;
}

.badge-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; min-width:0}
.badge{
  background:var(--ink-2);
  color:#fff;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:800;
}

.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.gallery .tile{
  background:#fff;
  border-radius:16px;
  aspect-ratio:4/3;
  box-shadow:var(--shadow);
  overflow:hidden
}
.gallery .tile img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit}

.logo-card{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:16px;
  padding:20px;
  box-shadow:var(--shadow)
}
.logo-card img{max-width:100%}

.hero-loc{
  margin-top:12px;
  font-weight:900;
  color:var(--ink-2);
}
.hero-loc a{ text-decoration:underline; text-underline-offset:3px; }
.hero-loc .muted{ color:var(--muted); font-weight:800; }

.hero-actions{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hero-note{
  margin-top:14px;
  padding:14px 16px;
  background:#fffaf3;
  border-radius:16px;
  border:1px solid #ffe0ba;
  color:var(--ink);
  font-weight:800;
}

.hero-card-cta{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Quick points */
.quick-points{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.quick-point{
  background:#fffaf3;
  border-radius:16px;
  border:1px solid #ffe0ba;
  padding:12px 14px;
}
.qp-title{font-weight:900; color:var(--ink-2); margin-bottom:2px}
.qp-sub{color:var(--muted); font-weight:750}

/* Sections */
section{padding: clamp(36px, 4vw + 20px, 80px) 0}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  margin-bottom:22px
}
.section-head h2{font-size:clamp(1.5rem, 1.6vw + 1.1rem, 2.2rem)}
.sub{color:var(--muted)}

/* Cards/grid */
.grid{display:grid; gap:18px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card h3{margin-bottom:.4rem}
.list{padding-left:1.1rem}
.list li{margin:.35rem 0}

/* Pricing tiers */
.price-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  padding:14px 14px;
  background:#fffaf3;
  border-radius:14px;
  border:1px solid #ffe0ba;
}
.tier{font-weight:900}
.tier-sub{color:var(--muted); font-size:.95rem; margin-top:2px}
.tier-price{font-weight:900; font-size:1.8rem; white-space:nowrap}

/* Callout note */
.note{margin-top:16px; background:var(--ink-2); color:#fff}

/* Steps */
.steps{counter-reset: step}
.step{position:relative; padding-left:62px}
.step::before{
  counter-increment: step;
  content: counter(step);
  position:absolute;
  left:0; top:0;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--accent);
  color:#05353b;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:var(--shadow);
}

/* Booking teaser */
.booking-teaser{padding-top:0}
.booking-banner{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  align-items:center;
  background:
    radial-gradient(circle at top left, rgba(242,107,58,.10), transparent 55%),
    radial-gradient(circle at bottom right, rgba(6,106,112,.12), transparent 55%),
    var(--card);
}
.booking-bullets{display:grid; gap:10px}
.bb-item{
  background:#fffaf3;
  border-radius:16px;
  border:1px solid #ffe0ba;
  padding:12px 14px;
  font-weight:800;
  color:var(--ink);
}

/* FAQ */
details{background:var(--card); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow)}
details+details{margin-top:12px}
summary{cursor:pointer; font-weight:900}

/* Contact */
.contact-card{display:grid; grid-template-columns:1.2fr .9fr; gap:18px}
.contact .map{border:0; width:100%; height:340px; border-radius:16px; box-shadow:var(--shadow)}
.contact .actions{display:flex; gap:12px; flex-wrap:wrap}
.contact-cta-row{display:flex; gap:12px; flex-wrap:wrap}
.mini-turn{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  background:#fffaf3;
  border:1px solid #ffe0ba;
  font-weight:900;
  color:var(--ink-2);
}

/* Booking page */
.booking-page{padding-top:44px}
.booking-widget{padding:14px; overflow:hidden}
.booking-bottom{margin-top:18px}

/* Footer */
footer{padding:28px 0 60px; color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:20px}
.legal{font-size:.9rem}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px){

  /* keep notice bar thin (no giant padding) */
  .notice .container{
    padding:.45rem 16px;
  }

  /* Thin header bar: centered brand + burger right */
  .nav{
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left brand burger";
    min-height:72px;  /* your requested minimum height */
    padding:10px 0;
  }
  .brand{ grid-area:brand; justify-content:center; text-align:center; }
  .burger{
    display:inline-flex;
    grid-area:burger;
    justify-self:end;
    align-items:center;
    justify-content:center;
  }

  /* hide desktop nav/cta */
  .cta{display:none}
  .menu{display:none}

  /* Mobile dropdown menu (class-based) */
  .menu.open{
    display:flex;
    flex-direction:column;
    position:absolute;
    right:16px;
    top:calc(100% + 10px);
    background:#fff;
    padding:12px;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(15,42,61,.18);
    z-index:100;
    width:min(280px, calc(100vw - 32px));
    gap:6px;
  }
  .menu.open a{ width:100%; }

  /* Layout */
  .hero-grid, .contact-card, .foot-grid, .booking-banner{grid-template-columns:1fr}
  .cols-3, .cols-2{grid-template-columns:1fr}

  /* Make any .scroller a horizontal, snap-scrolling carousel */
  .scroller{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:80%;
    overflow-x:auto;
    gap:12px;
    padding:4px 4px 12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .scroller > *{ scroll-snap-align:start; }

  /* Hero tweaks */
  .hero-card{margin-inline:auto; width:100%}
  .hero-card, .logo-card, .gallery{min-width:0}
  .hero-card .gallery .tile{ aspect-ratio:1/1; }

  /* Quick points stack */
  .quick-points{grid-template-columns:1fr}

  /* Center buttons on mobile */
  .hero-actions,
  .contact .actions,
  .contact-cta-row,
  .booking-banner .actions{
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  .hero-actions .btn,
  .contact .actions .btn,
  .contact-cta-row .btn,
  .booking-banner .actions .btn{
    flex:1 1 100%;
    max-width:420px;
  }

  #about .grid + .card{ margin-top:28px !important; }
}

/* Narrow phones (<=420px) */
@media (max-width: 420px){
  .container{ padding:0 14px; }
  .brand .name{ font-size:1rem; }
}

/* Desktop revert for scrollers */
@media (min-width: 901px){
  .scroller{
    grid-auto-flow:initial;
    grid-auto-columns:initial;
    overflow:visible;
  }
  .hero-card .gallery .tile{ aspect-ratio:4/3; }
  #about .grid + .card{ margin-top:44px !important; }
}

/* Remove/disable the old mobile call bar completely */
.callbar{display:none !important;}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
}

/* =========================================
   DESKTOP HEADER FIX (prevents overlap)
   - Applies only on mid-size desktops where the header gets cramped
   - Brand + CTA stay on row 1
   - Menu becomes a clean row 2 (no stacking/overlap)
   ========================================= */
@media (min-width: 901px) and (max-width: 20000px){

  .nav{
    display:flex;              /* override the grid */
    flex-wrap:wrap;
    align-items:center;
    gap:12px 16px;
    padding:10px 0;
  }

  /* Brand on the left */
  .brand{
    flex:0 1 auto;
    min-width:260px;           /* gives the logo/name room */
  }

  /* CTA pinned to the right */
  .cta{
    flex:0 0 auto;
    margin-left:auto;
  }

  /* Menu becomes a full-width second row (no overlap) */
  .menu{
    order:3;
    flex:1 1 100%;
    display:flex;
    flex-wrap:wrap;            /* allow wrapping instead of collisions */
    justify-content:flex-start;
    gap:10px;
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid #f4e0c4;  /* subtle divider so it looks intentional */
  }

  .menu a{
    padding:8px 10px;
  }

  /* Make sure nothing is being forced absolute on desktop */
  .menu{
    position:static !important;
  }
}


/* Keep the same soft gradient behind the WHOLE page (prevents “color shifting” on scroll) */
body{
  background:
    radial-gradient(circle at top left, rgba(242,107,58,.14), transparent 55%),
    radial-gradient(circle at bottom right, rgba(6,106,112,.16), transparent 55%),
    var(--bg);
}

/* Remove the hero-only gradient so the background doesn’t “change” after hero */
.hero{
  background: transparent !important;
}