/* Green Habitat — shared styles.
   Layout lives inline in each page; this file carries the things inline styles
   cannot do: hovers, keyframes, focus rings and the image-slot placeholders. */

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Archivo, system-ui, sans-serif; }
a { text-decoration: none; }
:focus-visible { outline: 2px solid #5E8A2E; outline-offset: 2px; }

/* ---- Image slots -------------------------------------------------------
   Every photograph is a <figure class="slot">. Paste a path or URL into the
   <img src="…"> and the placeholder label disappears automatically. */
.slot {
  position: relative; margin: 0; width: 100%; height: 100%;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 12px 14px; box-sizing: border-box; overflow: hidden;
  background: #E6E3D6;
}
.slot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.slot img[src]:not([src=""]) { display: block; }
.slot:has(img[src]:not([src=""])) { background: none; }
.slot:has(img[src]:not([src=""])) figcaption { display: none; }
.slot figcaption {
  position: relative; z-index: 1; text-align: left;
  color: #7A776A; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4;
}
.slot.circle, .strip .slot { align-items: center; justify-content: center; padding: 8px; }
.slot.circle figcaption, .strip .slot figcaption, .slot.contain figcaption { text-align: center; }
.slot.contain img { object-fit: contain; }
.slot.contain { align-items: center; justify-content: center; padding: 8px; }
.slot.circle { border-radius: 50%; }

/* ---- Navigation --------------------------------------------------------- */
.nav-light { color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.nav-light:hover { color: #C9E29A; }
.nav-green { color: #7CA544; font-size: clamp(13px, 1.35vw, 19px); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.nav-green:hover { color: #4F7327; }

/* ---- Section bands ----------------------------------------------------- */
.band-word {
  position: absolute; left: clamp(24px, 5vw, 88px); top: 50%; transform: translateY(-50%);
  color: #ffffff; font-size: clamp(44px, 8vw, 116px); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1;
}
.band-word:hover { color: #C9E29A; }

/* ---- Buttons ----------------------------------------------------------- */
.btn-foryou {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 16px 12px 26px; border-radius: 999px; background: #8FB84E;
  color: #ffffff; font-size: clamp(13px, 1.3vw, 17px); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.btn-foryou:hover { background: #6E9B3B; }
.btn-aboutus {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(16px, 2vw, 26px) clamp(18px, 2.4vw, 30px);
  border-radius: clamp(14px, 1.6vw, 22px); background: #9CC061; color: #ffffff;
  font-size: clamp(20px, 2.6vw, 36px); font-weight: 800; line-height: 1;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.btn-aboutus:hover { background: #7FA940; }
.arrow-btn {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: clamp(38px, 3.4vw, 48px); height: clamp(38px, 3.4vw, 48px);
  border: 0; border-radius: 50%; background: #9CC061; color: #ffffff; cursor: pointer;
}
.arrow-btn:hover { background: #88AF4C; }
.submit-btn {
  margin-top: clamp(4px, 0.8vw, 10px); border: 0; border-radius: 999px;
  background: #5E8A2E; color: #ffffff; padding: clamp(13px, 1.5vw, 18px);
  font-family: Archivo, sans-serif; font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700; cursor: pointer;
}
.submit-btn:hover { background: #4F7327; }

/* ---- Footers ----------------------------------------------------------- */
.foot-light { color: #ffffff; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-light:hover { color: #FBF6D9; }
.foot-dark { color: #1C1C1A; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.foot-dark:hover { color: #5E8A2E; }

/* ---- Contact fields ---------------------------------------------------- */
.gv-in {
  width: 100%; box-sizing: border-box; border: 0; background: #FDFAE6;
  color: #3F3D33; font-family: Archivo, sans-serif;
  font-size: clamp(15px, 1.3vw, 18px); font-weight: 400;
}
.gv-in::placeholder { color: #A9A79A; }
.gv-in.round { border-radius: 999px; padding: clamp(13px, 1.4vw, 18px) clamp(18px, 2.2vw, 28px); }
.gv-in.area {
  border-radius: clamp(16px, 1.8vw, 24px);
  padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2.2vw, 28px);
  height: clamp(140px, 17vw, 220px); resize: vertical;
}

/* ---- Testimonial strip (sizes come from position, not markup) ----------- */
.strip { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.2vw, 18px); }
.strip .slot { border-radius: 18px; transition: width .35s ease, height .35s ease, opacity .35s ease; }
.strip .slot:nth-child(1), .strip .slot:nth-child(5) { width: clamp(70px, 10vw, 150px); height: clamp(96px, 13vw, 180px); opacity: 0.45; }
.strip .slot:nth-child(2), .strip .slot:nth-child(4) { width: clamp(80px, 11vw, 170px); height: clamp(110px, 15vw, 200px); opacity: 0.7; }
.strip .slot:nth-child(3) { width: clamp(100px, 13vw, 200px); height: clamp(130px, 17vw, 232px); opacity: 1; }

/* ---- Motion ------------------------------------------------------------ */
@keyframes gv-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes gv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
.marquee { display: flex; overflow: hidden; background: #6E9B3B; padding: 14px 0; }
.marquee-track { flex: 0 0 auto; display: flex; align-items: center; gap: 52px; padding-right: 52px; animation: gv-marquee 26s linear infinite; will-change: transform; }
.scroll-cue { animation: gv-bob 2.4s ease-in-out infinite; }
.scroll-cue:hover { color: #C9E29A; }

/* Scroll reveal — only armed once JS is running, so content stays visible
   for crawlers and if scripts fail. */
body.reveal-armed [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
body.reveal-armed [data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue { animation: none; }
  .marquee-track { animation-duration: 60s; }
  body.reveal-armed [data-reveal] { opacity: 1; transform: none; transition: none; }
}