
:root{
  --bg:#081108; --panel:#0c1810; --card:#0e1c12;
  --text:#eef7ef; --muted:#b9cdbb;
  --accent:#2dd465; --accent2:#15a14c;
  --border:#18301f; --glass:rgba(8,17,8,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none}
.container{width:min(1200px,92%);margin:0 auto}

/* --- GLOBAL ALWAYS-VISIBLE BACKGROUND --- */
html, body { min-height: 100%; }
body{ background: var(--bg); }
body::before{
  content:"";
  position:fixed; inset:0;
  background:url('../img/grass.jpg') center/cover no-repeat fixed; /* path from CSS file */
  z-index:-2; pointer-events:none;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:rgba(6,12,7,.55);
  z-index:-1; pointer-events:none;
}

/* progress bar */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
  z-index:60}

/* NAV */
.nav{position:sticky;top:0;z-index:50; backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(8,17,8,.85), rgba(8,17,8,.55));
  border-bottom:1px solid var(--border); transition:all .25s ease}
.nav--scrolled{background:rgba(8,17,8,.9)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{height:40px;width:auto;border-radius:6px;object-fit:cover}
.menu{display:flex;align-items:center;gap:18px}
.menu__link{position:relative;padding:8px 6px}
.menu__link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent2));transition:transform .25s}
.menu__link:hover::after,.menu__link.is-active::after{transform:scaleX(1)}
.menu__dropdown{position:relative}
.menu__btn{all:unset;cursor:pointer;padding:8px 6px}
.mega{position:absolute;left:50%;transform:translateX(-50%) translateY(10px);
  display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:18px;
  background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--border);
  padding:16px;border-radius:16px;min-width:640px;opacity:0;pointer-events:none;transition:.2s}
.mega__col h4{margin:0 0 8px}
.mega__link{display:block;padding:6px 0;color:#dff2e3}
.mega__media img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.menu__dropdown:hover .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}

.nav__ctas{display:flex;align-items:center;gap:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--border);font-weight:800}
.btn--primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#041006;border-color:transparent}
.btn--ghost{background:transparent}
.btn--block{display:block;width:100%}
.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:20px;height:2px;background:#d9eddc;margin:5px 0}

/* header social icon */
.social-link .icon{width:22px;height:22px;color:#d9eddc;transition:transform .2s ease}
.social-link:hover .icon{transform:scale(1.15);color:#7de38f}

/* Drawer */
.drawer{position:fixed;inset:0;display:grid;grid-template-columns:1fr 280px;visibility:hidden;z-index:55}
.drawer[aria-hidden="false"]{visibility:visible}
.drawer__backdrop{grid-column:1/2;background:rgba(0,0,0,.4);border:0}
.drawer__inner{grid-column:2/3;background:#0b1710;border-left:1px solid var(--border);padding:16px;transform:translateX(100%);transition:.25s}
.drawer[aria-hidden="false"] .drawer__inner{transform:translateX(0)}
.drawer__link,.drawer__sublink{display:block;padding:10px 0;border-bottom:1px solid var(--border)}
.drawer details summary{cursor:pointer;padding:10px 0;font-weight:700}
.drawer__cta{margin-top:12px}

@media (max-width:960px){
  .menu{display:none}
  .hamburger{display:block}
}

/* HERO */
.hero{position:relative;min-height:88vh;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--border)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero__veil{position:absolute;inset:0;background:
  radial-gradient(1200px 500px at 15% 0%, #0e2917 0%, transparent 60%),
  linear-gradient(to top, rgba(8,17,8,.75), rgba(8,17,8,.25) 40%, rgba(8,17,8,.6))}
.hero__content{position:relative;text-align:center;padding:90px 0}
.hero-title{
  font-size:clamp(30px,5.2vw,52px);line-height:1.05;margin:0 0 10px;font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 8px 40px rgba(0,0,0,.45)
}
.hero .sub{margin:0 0 18px;color:#d7ead8}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Sections
.section{padding:66px 0}
.section.alt{background:#0a160e;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section__title{margin:0 0 16px;font-size:28px} */

/* Parallax sits over global bg */
.parallax{background:transparent}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cards .card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.cards .card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--border)}
.cards .card h3{margin:12px 12px 6px}
.cards .card p{margin:0 12px 14px;color:var(--muted)}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} }

/* about split */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.about__image img{border-radius:16px;border:1px solid var(--border)}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{margin:6px 0;padding-left:22px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent)}

/* marquee reviews */
.marquee{
  overflow:hidden;
  position:relative;
  --gap:24px;
}
.marquee__track{
  display:flex;
  gap:var(--gap);
  will-change:transform;
  animation: marquee var(--marquee-duration, 28s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:active .marquee__track{ animation-play-state: paused; } /* pause on hover/press */

.marquee blockquote{
  white-space:nowrap;
  background:#0f1b12;
  border:1px solid var(--border);
  padding:12px 16px;
  border-radius:12px;
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--loop-width, 50%))); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}
/* form */
.form{background:var(--panel);border:1px solid var(--border);padding:16px;border-radius:16px}
.form label{display:block;margin-bottom:12px}
.form input,.form select,.form textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#0e170f;color:var(--text)
}
select:disabled, option[disabled]{opacity:.6}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.grid{grid-template-columns:1fr}}
.form__actions{display:flex;gap:12px;flex-wrap:wrap}
.status{margin-top:8px;color:#cfe5cf}

/* map */
.map iframe{width:100%;height:320px;border:1px solid var(--border);border-radius:12px}

/* footer */
.footer{border-top:1px solid var(--border);background:#0a160e}
.footer__inner{display:flex;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.footnav a{margin-left:12px;color:#cfe5cf}

/* reveals */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}.hero__veil{position:absolute;inset:0;background:
  radial-gradient(1200px 500px at 15% 0%, #0e2917 0%, transparent 60%),
  linear-gradient(to top, rgba(8,17,8,.75), rgba(8,17,8,.25) 40%, rgba(8,17,8,.6))}
.hero__content{position:relative;text-align:center;padding:90px 0}
.hero-title{
  font-size:clamp(30px,5.2vw,52px);line-height:1.05;margin:0 0 10px;font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 8px 40px rgba(0,0,0,.45)
}
.hero .sub{margin:0 0 18px;color:#d7ead8}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Sections */
.section{padding:66px 0}
.section.alt{background:#0a160e;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section__title{margin:0 0 16px;font-size:28px}

/* Parallax sits over global bg */
.parallax{background:transparent}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cards .card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.cards .card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--border)}
.cards .card h3{margin:12px 12px 6px}
.cards .card p{margin:0 12px 14px;color:var(--muted)}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} }

/* about split */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.about__image img{border-radius:16px;border:1px solid var(--border)}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{margin:6px 0;padding-left:22px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent)}

/* marquee reviews */
.marquee{
  overflow:hidden;
  position:relative;
  --gap:24px;
}
.marquee__track{
  display:flex;
  gap:var(--gap);
  will-change:transform;
  animation: marquee var(--marquee-duration, 28s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:active .marquee__track{ animation-play-state: paused; } /* pause on hover/press */

.marquee blockquote{
  white-space:nowrap;
  background:#0f1b12;
  border:1px solid var(--border);
  padding:12px 16px;
  border-radius:12px;
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--loop-width, 50%))); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}
/* form */
.form{background:var(--panel);border:1px solid var(--border);padding:16px;border-radius:16px}
.form label{display:block;margin-bottom:12px}
.form input,.form select,.form textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#0e170f;color:var(--text)
}
select:disabled, option[disabled]{opacity:.6}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.grid{grid-template-columns:1fr}}
.form__actions{display:flex;gap:12px;flex-wrap:wrap}
.status{margin-top:8px;color:#cfe5cf}

/* map */
.map iframe{width:100%;height:320px;border:1px solid var(--border);border-radius:12px}

/* footer */
.footer{border-top:1px solid var(--border);background:#0a160e}
.footer__inner{display:flex;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.footnav a{margin-left:12px;color:#cfe5cf}

/* reveals */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* Add haze only behind hero text */
.hero__content.haze {
  background: rgba(0, 0, 0, 0.45); /* dark semi-transparent backdrop */
  padding: 24px;
  border-radius: 16px;
  display: inline-block; /* only wrap around text area */
  max-width: 700px;      /* keep it from stretching too wide */
  margin: 0 auto;        /* center horizontally */
}
.hero__content.haze h1,
.hero__content.haze p,
.hero__content.haze .btn {
  position: relative;
  z-index: 2;
}
