:root{
  --brand:#1f2937;       /* charcoal */
  --accent:#10B981;      /* emerald green */
  --accent-2:#34D399;    /* lighter green */
  --ink:#111827;
  --bg:#f9fafb;
}
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top: 112px; }

body{ color:var(--ink); background:var(--bg); }
.brand-name{ font-weight:800; letter-spacing:.2px; font-size:clamp(18px,2.2vw,24px); }
.logo-img{ height:48px; width:auto; }
.accent-bar{ height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }

/* Menu */
.nav-menu .nav-link{ color:var(--brand); opacity:.9 }
.nav-menu .nav-link:hover{ color:var(--accent); opacity:1 }
.nav-menu .nav-link.text-success{ color:#059669 !important }

/* Hero keeps 2048:1148 ratio */
.hero{ width:100%; aspect-ratio:2048/1148; background:#000; }
.swiper{ width:100%; height:100%; }
.swiper-slide{ position:relative; }
.swiper-slide img{ object-fit:cover; }
.caption{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  text-align:center;
  max-width:min(900px, 92%);
  color:#111;
  font-size: clamp(20px, 3.8vw, 40px);
  line-height: 1.15;
  pointer-events: none;
  opacity: 0; /* becomes visible via .enter */
  text-shadow: 0 2px 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.2);
}
.swiper-button-next, .swiper-button-prev{
  color:#fff; width:44px; height:44px; border-radius:50%;
  background:rgba(17,24,39,.45);
}
.swiper-button-next:hover, .swiper-button-prev:hover{ background:rgba(17,24,39,.65) }
.swiper-pagination-bullet{ background:rgba(17,24,39,.35) }
.swiper-pagination-bullet-active{ background:var(--ink) }

.section-title{ color:var(--brand); border-bottom:2px solid #e9e9e9; padding-bottom:.35rem; margin-bottom:1rem; }

/* Image animations */
.reveal{ opacity:0; transform:translateY(16px) scale(.98); transition:transform .8s cubic-bezier(.2,.6,.2,1), opacity .8s ease; }
.reveal.in-view{ opacity:1; transform:none; }
.tilt{ transition: transform .3s ease, box-shadow .3s ease; transform-style:preserve-3d; }
.tilt:hover{ transform:perspective(900px) rotateX(2deg) rotateY(-2deg) scale(1.02); box-shadow:0 16px 40px -20px rgba(0,0,0,.35)!important; }
.reveal-img{ display:block; width:100%; height:auto; }
@keyframes floaty { 0%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } 100%{ transform:translateY(0) } }
.reveal.in-view .tilt{ animation: floaty 6s ease-in-out infinite; }

/* Utilities */
.object-cover{ object-fit:cover; width:100%; height:100%; border-radius:.5rem; }
.ratio-16x9{ aspect-ratio:16/9; }


/* Floating CTA */
.floating-cta{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1050;
  display: flex;
  gap: 10px;
}
.cta-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.35);
  color: #fff; text-decoration: none;
}
.cta-btn:hover{ text-decoration:none; filter: brightness(1.05); }
.cta-wa{ background: linear-gradient(135deg, #10B981, #34D399); }
.cta-call{ background: linear-gradient(135deg, #0ea5e9, #38bdf8); }

.caption .char{
  display:inline-block;
  opacity:0;
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0)) scale(.9);
  filter: blur(4px);
  will-change: transform, opacity, filter;
  animation: fly .45s cubic-bezier(.18,.8,.22,1) forwards;
  animation-delay: calc(var(--i) * 16ms);
}

.caption.enter{
  animation: caption-block-in .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes caption-block-in{
  from{
    opacity:0;
    transform: translate(calc(-50% + var(--x0, 0)), calc(-50% + var(--y0, 0))) rotate(var(--r0, 0deg));
    filter: blur(6px);
  }
  to{
    opacity:1;
    transform: translate(-50%, -50%) rotate(0);
    filter: blur(0);
  }
}

@keyframes fly {
  to { opacity:1; transform:none; filter:blur(0) }
}


/* ===== Layout spacing tweaks ===== */
.hero{
  margin-bottom: clamp(40px, 6vw, 120px); /* extra space below slides */
}
#contact{
  margin-top: clamp(56px, 8vw, 144px);    /* push Contact/Map further down */
}



/* ===== Accessibility: reduce motion ===== */
@media (prefers-reduced-motion: reduce){
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}