/* YDROGEO cinematic homepage overrides
   Customize the feel by changing:
   --reveal-scale-start, --reveal-rotation-start, --reveal-duration.
   The background uses local WEBP files and remains fully static. */
:root {
  --green: #82ba42;
  --green-dark: #4b8c2b;
  --reveal-scale-start: 1.33;
  --reveal-rotation-start: -3.25deg;
  --reveal-duration: 7.8s;
}
.brand-icon svg { width: 100%; height: 100%; }
.brand-name { font-size: 26px; font-weight: 500; letter-spacing: -.065em; }
.brand-name span { font-weight: 700; }
.brand-name small { font-size: 8px; letter-spacing: .16em; }
/* The homepage's first photograph goes BEHIND the navigation and fills the viewport. */
.home-page .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  border: 0;
  background: linear-gradient(to bottom,rgba(9,24,22,.55),rgba(9,24,22,0));
}
.home-page .nav-bar { height: 94px; }
.home-page .brand-name { color: #fff; }
.home-page .brand-name small { color: rgba(255,255,255,.79); }
.home-page .brand-icon { color: #b8e487; }
.home-page .main-nav a { color: rgba(255,255,255,.94); text-shadow: 0 1px 7px #17291d33; }
.home-page .main-nav a:hover, .home-page .main-nav a.is-current { color: #c6f6a1; }
.hero.hero-immersive {
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  background: #182b23;
  isolation: isolate;
}
.hero-immersive .hero-slide {
  transform: none;
  background: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}
.hero-immersive .hero-slide.active {
  transform: none;
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
.hero-immersive .hero-photo-frame {
  position: absolute;
  inset: -5%;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(0,var(--image-scroll-lift,0px),0);
  will-change: transform;
}
.hero-immersive .hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  max-width: none;
  transform-origin: 50% 50%;
  transform: scale(1.06) rotate(0);
  backface-visibility: hidden;
}
/* On every slide change: the photo rotates and zooms OUT into place. */
.hero-immersive .hero-slide.active .hero-photo {
  animation: ydrogeo-cinematic-reveal var(--reveal-duration) cubic-bezier(.18,.45,.25,1) both;
}
@keyframes ydrogeo-cinematic-reveal {
  from { transform: scale(var(--reveal-scale-start)) rotate(var(--reveal-rotation-start)); }
  to { transform: scale(1.06) rotate(0deg); }
}
.hero-immersive .hero-overlay {
  background:
    linear-gradient(90deg,rgba(5,26,22,.69) 0%,rgba(9,28,21,.38) 48%,rgba(5,24,17,.14) 100%),
    linear-gradient(0deg,rgba(10,28,24,.42),transparent 42%);
}
.hero-immersive .hero-content {
  padding-top: 75px;
  padding-bottom: 20px;
  align-items: flex-start;
  justify-content: center;
  transform: translate3d(0,var(--content-scroll-lift,0px),0);
}
.hero-immersive .hero-content > * { opacity: 0; }
.hero-immersive .hero-slide.active .hero-content > * { animation: ydrogeo-reveal-text .9s ease-out both; }
.hero-immersive .hero-slide.active .hero-content > :nth-child(1) { animation-delay: .2s; }
.hero-immersive .hero-slide.active .hero-content > :nth-child(2) { animation-delay: .34s; }
.hero-immersive .hero-slide.active .hero-content > :nth-child(3) { animation-delay: .48s; }
.hero-immersive .hero-slide.active .hero-content > :nth-child(4) { animation-delay: .64s; }
@keyframes ydrogeo-reveal-text { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero-immersive .hero-strap { color: #d7f7d8; font-size: 12px; letter-spacing: .35em; }
.hero-immersive h1, .hero-immersive h2 { font-size: clamp(70px,10vw,160px); font-weight: 300; letter-spacing: -.052em; line-height: 1.08; margin-bottom: 8px; }
.hero-immersive .hero-subtitle { font-size: clamp(19px,2vw,29px); font-weight: 300; max-width: 720px; line-height: 1.42; margin: 0 0 39px; }
.hero-immersive .button-green { padding: 15px 27px; }
.hero-immersive .slide-arrow { z-index: 6; width: 55px; height: 76px; background:rgba(3,20,17,.12); }
.hero-immersive .slider-bottom { z-index: 7; bottom: 44px; }
.hero-immersive .scroll-cue { position: absolute; z-index: 7; right: max(32px,calc((100% - var(--container))/2)); bottom: 36px; display: flex; align-items: center; gap: 13px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.scroll-cue-line { display: block; width: 1px; height: 36px; background: #fff9; position: relative; overflow: hidden; }
.scroll-cue-line::after { content: ""; position: absolute; width: 1px; height: 13px; background: #b5e282; top: 0; left: 0; animation: scroll-cue-line 2s ease-in-out infinite; }
@keyframes scroll-cue-line { to { transform: translateY(39px); } }
.footer-contact-button { margin-top: 6px; }
@media (max-width: 960px) {
  .hero.hero-immersive { height: 100svh; min-height: 560px; }
  .home-page .nav-bar { height: 78px; }
  .hero-immersive .hero-content { padding-left: 42px; }
  .hero-immersive .scroll-cue { right: 35px; }
}
@media (max-width: 690px) {
  .home-page .nav-bar { height: 72px; }
  .home-page .menu-toggle span { background: #fff; }
  .home-page .main-nav { background: #fff; }
  .home-page .main-nav a { color: #42564c; text-shadow: none; }
  .home-page .main-nav a:hover, .home-page .main-nav a.is-current { color: var(--green-dark); }
  .hero.hero-immersive { height: 100svh; min-height: 540px; }
  .hero-immersive .hero-content { text-align: center; align-items: center; padding-left: 30px; padding-right: 30px; padding-top: 65px; }
  .hero-immersive h1, .hero-immersive h2 { font-size: clamp(55px,14vw,90px); }
  .hero-immersive .hero-subtitle { font-size: 18px; margin-bottom: 29px; }
  .hero-immersive .hero-strap { font-size: 10px; letter-spacing: .21em; }
  .hero-immersive .hero-overlay { background: linear-gradient(0deg,rgba(10,29,26,.78),rgba(9,25,21,.37) 65%,rgba(9,29,24,.50)); }
  .hero-immersive .hero-photo-frame { inset: -9%; }
  .hero-immersive .slide-arrow { top: 58%; width: 36px; }
  .hero-immersive .slider-bottom { bottom: 42px; }
  .hero-immersive .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-immersive .hero-slide.active .hero-photo,
  .hero-immersive .hero-slide.active .hero-content > *,
  .scroll-cue-line::after { animation: none !important; }
  .hero-immersive .hero-photo { transform: scale(1.06) rotate(0deg) !important; }
  .hero-immersive .hero-content > * { opacity: 1 !important; transform: none !important; }
}