:root {
  /* Core brand colors */
  --orange: #ff7d15;
  --orange-d: #e66500;

  /* Light theme defaults (orange + grey) */
  --bg: #f3f4f6;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;

  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.16);
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg: #020617;
  --bg-alt: #020617;
  --surface: #020617;
  --ink: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* Global basics */
html {
  scroll-behavior: smooth; /* smooth scroll */
}

body {
  background: var(--bg);
  color: var(--ink);
}
/* ================================
   GLOBAL ENHANCEMENTS + EFFECTS
   ================================ */

/* Smooth scrolling everywhere */
html {
  scroll-behavior: smooth;
}

/* Fade-in Animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp .9s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-in delayed options */
.fade-in.delay-1 { animation-delay: .2s; }
.fade-in.delay-2 { animation-delay: .4s; }
.fade-in.delay-3 { animation-delay: .6s; }

/* Sticky nav (your nav already transitions; this adds shadow & shrink) */
.nav.sticky {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* Enhanced image zoom */
.tile img {
  transition: transform .6s ease, filter .4s ease;
}
.tile:hover img {
  transform: scale(1.12);
  filter: brightness(.9);
}

/* Rotating testimonial container */
.testimonials {
  display: flex;
  overflow: hidden;
  position: relative;
  height: 200px;
  max-width: 900px;
  margin: 0 auto 24px;  /* centers it & adds space below */
}

.testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: rotateTestimonial 18s infinite;
}
.testimonial:nth-child(1) { animation-delay: 0s; }
.testimonial:nth-child(2) { animation-delay: 6s; }
.testimonial:nth-child(3) { animation-delay: 12s; }

@keyframes rotateTestimonial {
  0% { opacity: 0; }
  5% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}


/* ================================
   DARK MODE (Orange + Gray Theme)
   ================================ */
body.dark {
  --bg:#1b1b1b;
  --surface:#2b2b2b;
  --ink:#e5e5e5;
  --muted:#9ca3af;
  background:var(--bg);
  color:var(--ink);
}

.dark .nav {
  background: rgba(24,24,24,.85);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.dark .card {
  background: var(--surface);
  border-color: #444;
}

.dark .tile .overlay {
  background: linear-gradient(0deg,rgba(0,0,0,.8),transparent);
}

 body{margin:0;font:16px/1.6 system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--ink);}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.25rem;border-radius:.8rem;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--orange);color:#fff}.btn-primary:hover{background:var(--orange-d)}
.btn-outline{background:transparent;color:#fff;border-color:#fff}.btn-outline:hover{background:#fff;color:#111}
.btn-light{background:#fff;color:var(--orange)} .btn-light:hover{background:#f3f4f6}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;border-radius:999px;font-weight:600}
.card{background:var(--surface);border:1px solid #eee;border-radius:1rem;box-shadow:0 10px 20px rgba(0,0,0,.05)}
.card.pad{padding:2rem}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.section{padding:80px 0}
.h1{font-size:clamp(32px,6vw,64px);line-height:1.1;margin:0 0 12px}
.h2{font-size:clamp(28px,5vw,44px);margin:0 0 10px}
.lead{color:var(--muted);font-size:1.125rem}
.center{text-align:center}
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .mask{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,24,39,.85),rgba(17,24,39,.6),transparent)}
.hero .inner{position:relative;z-index:1}
.scroll-ind{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);animation:bounce 1.2s infinite}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.25s}
.nav-inner{height:80px;display:flex;align-items:center;justify-content:space-between}
.nav.scrolled{backdrop-filter:blur(10px);background:rgba(255,255,255,.9);box-shadow:0 10px 20px rgba(0,0,0,.06)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--orange),var(--orange-d));display:grid;place-items:center;color:#fff;font-weight:900}
.nav-links{display:flex;gap:8px} .nav-links a{padding:.6rem .9rem;border-radius:.6rem;font-weight:600;color:#374151}
.nav-links a.active,.nav-links a:hover{background:#f3f4f6}
.mobile-btn{display:none}
@media (max-width:900px){.nav-links{display:none}.mobile-btn{display:inline-grid;place-items:center}}
.mobile-menu{display:none}
.mobile-menu.open{display:block;background:#fff;border-top:1px solid #eee;box-shadow:0 10px 20px rgba(0,0,0,.06)}
.footer{background:var(--sage);color:#fff;padding:48px 0}
.footer p{color:#d1d5db}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
.tile{position:relative;overflow:hidden;border-radius:16px;cursor:pointer;aspect-ratio:1}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.08)}
.tile .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,24,39,.8),transparent);opacity:0;transition:.3s}
.tile:hover .overlay{opacity:1}
.tile .meta{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal.open{display:flex}
.modal img{max-height:80vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid #eee;padding:.6rem;text-align:left}
/* Mobile Menu Hidden by Default */
.mobile-menu {
  display: none;
}

/* When menu is open */
.mobile-menu.open {
  display: block;
}
/* Extra breathing room so testimonials aren't under the sticky nav */
.testimonials-section {
  padding-top: 220px;  /* adjust as needed */
}
/* Contact form stacked layout */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.contact-form label {
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  font: inherit;
}


