:root {
  --navy: #0b2a44;
  --blue: #1e73be;
  --green: #7ed321;
  --lime: #a2f23a;
  --ink: #0a1726;
  --bg: #f6fafc;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(10, 23, 38, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }

.topbar {
  display:flex; gap:18px; justify-content:center; align-items:center;
  padding:8px 16px; background:linear-gradient(90deg, var(--navy), var(--blue)); color:#fff;
  font-size:.95rem;
}
.topbar a{color:#fff; text-decoration:none; font-weight:600;}

.header { display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px clamp(16px,4vw,40px); background:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:12; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid #e9eef5; }
.brand h1 { font-size:1.25rem; margin:0; font-weight:800; }
.nav a { margin:0 10px; text-decoration:none; color:var(--ink); font-weight:700; }
.nav a:hover { color: var(--blue); }
.cta {
  display:flex; gap:10px;
}
.btn { display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; border:0; }
.btn-primary { background:linear-gradient(90deg, var(--green), var(--lime)); color:#0b2a12; }
.btn-outline { background:#fff; color:var(--blue); border:2px solid var(--blue); }

.hero {
  display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:center;
  padding: clamp(20px, 5vw, 60px) clamp(16px, 4vw, 40px);
  background: radial-gradient(1200px 400px at 10% -10%, rgba(30,115,190,.12), transparent 60%),
              radial-gradient(1000px 400px at 90% -10%, rgba(126,211,33,.16), transparent 60%);
}
.hero h2 { font-size:clamp(28px, 5vw, 48px); margin:0 0 12px; line-height:1.1; }
.hero p { font-size:1.1rem; opacity:.9; }
.hero img { width:100%; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #e6eef6; }

.bookingbar {
  background:#fff; margin:10px 0 0; border-radius:var(--radius); box-shadow:var(--shadow); padding:12px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.bookingbar input, .bookingbar select {
  padding:12px 14px; border-radius:10px; border:1px solid #d7e3ef; min-width:220px; flex:1;
}

.section { width:min(1200px, 95%); margin:32px auto; }
.kicker { color:var(--blue); text-transform:uppercase; letter-spacing:.15em; font-weight:800; font-size:.9rem; }
.title { font-size: clamp(22px, 3.5vw, 36px); margin:6px 0 10px; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.card { background:#fff; border-radius:14px; padding:18px; border:1px solid #e8eef5; box-shadow:var(--shadow); }
.card h3 { margin:8px 0; }
.card img.icon { width:72px; height:72px; object-fit:cover; border-radius:12px; border:1px solid #e6eef6; }

.process { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.step { background:#fff; border:1px solid #e6eef6; border-radius:14px; padding:18px; box-shadow:var(--shadow); }
.step .num { width:34px; height:34px; display:grid; place-items:center; font-weight:900; background:var(--blue); color:#fff; border-radius:50%; }

.faq details { background:#fff; border-radius:12px; border:1px solid #e6eef6; padding:14px 18px; margin:10px 0; }
.faq summary { font-weight:800; cursor:pointer; }

.footer { background:linear-gradient(90deg, var(--navy), var(--blue)); color:#fff; padding:36px 24px; }
.footer a { color:#fff; }
.footercols { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }

.workiz { background:#fff; border:2px dashed #a8f0d1; border-radius:14px; padding:18px; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:linear-gradient(90deg, var(--green), var(--lime)); color:#0b2a12; font-weight:900; }

/* Workiz widget container styling */
.workiz-embed {
  position: relative;
  background-color: #f5f8fa;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Spinner loader style */
.workiz-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.workiz-embed::before {
  content: 'Loading...';
  font-size: 1.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--blue);
  font-weight: bold;
  display: block;
}

@media (max-width: 768px) {
  .workiz-embed {
    width: 100%;
    padding: 10px;
  }

  .workiz-embed iframe {
    min-height: 400px;
  }
}


/* Parallax section */
.parallax {
  position: relative;
  min-height: 58vh;
  background-image: url('van.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 26px;
  padding: clamp(20px, 5vw, 60px) clamp(16px, 4vw, 40px);
}
.parallax::after {
  /* subtle overlay to keep text readable */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,42,68,.46), rgba(11,42,68,.2));
}
.parallax .content { position: relative; z-index: 2; color: #fff; }
.parallax .content .badge { background: rgba(162,242,58,.95); color:#0b2a12; }
.parallax .bookingbar { background: rgba(255,255,255,.96); }
@media (max-width: 980px){ .parallax{ grid-template-columns: 1fr; } }


/* Smooth scroll for anchors */
html { scroll-behavior: smooth; }

/* Roaming van animation in hero */
.parallax { position: relative; overflow: hidden; }
.van-floater {
  position: absolute;
  right: -120px; bottom: -40px;
  width: 560px; max-width: 48vw;
  opacity: .18;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.25));
  animation: vanRoam 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes vanRoam {
  0%   { transform: translate(0, 0) rotate(-1deg); }
  25%  { transform: translate(-30px, -12px) rotate(0deg); }
  50%  { transform: translate(-60px, -4px) rotate(1deg); }
  75%  { transform: translate(-30px, 12px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(-1deg); }
}

/* For mobile, tuck the van floater smaller */
@media (max-width: 980px){
  .van-floater { width: 360px; right: -80px; bottom: -30px; opacity: .22; }
}


/* Astronaut floater (home) */
.astro-floater {
  position: absolute;
  right: -80px; bottom: -20px;
  width: 500px; max-width: 44vw;
  opacity: .26;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.28));
  animation: astroDrift 30s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes astroDrift {
  0%   { transform: translate(0, 0) rotate(-2deg) scale(1); }
  25%  { transform: translate(-40px, -20px) rotate(0deg) scale(1.02); }
  50%  { transform: translate(-90px, -10px) rotate(2deg) scale(1); }
  75%  { transform: translate(-50px, 10px) rotate(0deg) scale(1.01); }
  100% { transform: translate(0, 0) rotate(-2deg) scale(1); }
}
@media (max-width: 980px){
  .astro-floater { width: 340px; right: -60px; bottom: -20px; opacity: .28; }
}


/* Contact parallax with astronaut background */
.contact-parallax {
  position: relative;
  min-height: 46vh;
  background-image: url('https://static.wixstatic.com/media/38148a_95936ed49c284cd6bb64');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 26px;
  padding: clamp(20px, 5vw, 60px) clamp(16px, 4vw, 40px);
}
.contact-parallax::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,42,68,.46), rgba(11,42,68,.2));
}
.contact-parallax .content { position: relative; z-index: 2; color: #fff; }
.pose-floater {
  position: absolute;
  right: -120px; bottom: -40px;
  width: 600px; max-width: 50vw;
  opacity: .9;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  animation: poseDrift 36s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes poseDrift {
  0%   { transform: translate(0, 0) rotate(-2deg) scale(1); }
  20%  { transform: translate(-60px, -30px) rotate(0deg) scale(1.03); }
  50%  { transform: translate(-140px, -10px) rotate(2deg) scale(1.02); }
  80%  { transform: translate(-70px, 20px) rotate(0deg) scale(1.04); }
  100% { transform: translate(0, 0) rotate(-2deg) scale(1); }
}
@media (max-width: 980px){
  .contact-parallax { grid-template-columns: 1fr; min-height: 52vh; }
  .pose-floater { width: 420px; right: -80px; bottom: -30px; opacity: .95; }
}


/* Ensure the van background fits entirely within the hero */
.parallax {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-color: #0b2a44; /* fallback fill behind the van */
  min-height: 62vh !important;
}

/* Center content for a cleaner, model-inspired layout */
.parallax .content {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 980px){
  .parallax {
    min-height: 56vh !important;
    background-position: center center !important;
  }
  .parallax .content {
    max-width: 720px;
  }
}


/* Reveal-on-scroll animations */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: transform, opacity;
}
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Ensure GPU acceleration helps */
.reveal, .reveal-left, .reveal-right { backface-visibility: hidden; perspective: 1000px; }


/* Dramatic reveal-on-scroll animations (slower, more distance) */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.65,.2,1);
  will-change: transform, opacity;
}
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Staggered delays via data-index, applied by JS */
.reveal[data-idx], .reveal-left[data-idx], .reveal-right[data-idx] {
  transition-delay: calc(var(--reveal-stagger, 120ms) * attr(data-idx number));
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Back-to-top button */
.back-to-top{
  position: fixed; right: 16px; bottom: 80px; z-index: 9999;
  padding: 10px 12px; border-radius: 12px; border: 0;
  font-weight: 800; cursor: pointer;
  background: linear-gradient(90deg, var(--green), var(--lime));
  color:#0b2a12; box-shadow: 0 10px 25px rgba(0,0,0,.15);
  opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s;
}
.back-to-top.show{ opacity: 1; transform: translateY(0); }
@media (max-width: 520px){ .back-to-top{ bottom: 76px; } }