/* Home — hero, stats, gallery, steps, directions. */

.hero{position:relative;background:var(--secondary-dark);overflow:hidden;
  & .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  & .hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 36 32/.78) 0%,rgb(11 36 32/.28) 45%,rgb(11 36 32/.82) 100%)}
  & .hero__inner{position:relative;box-sizing:content-box;padding:130px 24px 0;min-height:var(--hero-min-tall);display:flex;flex-direction:column;justify-content:center}
  & .hero__meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
  & .hero__coords{font:500 12px var(--font-mono);letter-spacing:.1em;color:rgb(255 255 255/.65)}
  & h1{margin:18px 0 0;font:800 clamp(42px,5.5vw,68px)/1.05 var(--font-display);color:var(--white);letter-spacing:-.02em;max-width:820px;text-wrap:balance}
  & > .wrap > p{margin:22px 0 0;max-width:600px;font:400 19px/1.75 var(--font-body);color:var(--on-dark-2)}
  & .hero__btns{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;
    & .btn{padding:16px 26px}
  }
}
.statband{position:relative;border-top:1px solid rgb(255 255 255/.22);background:rgb(11 36 32/.55);backdrop-filter:blur(6px);margin-top:70px}
.stats{padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);
  & div{padding:22px 24px 24px;border-right:1px solid rgb(255 255 255/.14);
    &:first-child{padding-left:0}
    &:last-child{border-right:0;padding-right:0}
  }
  & b{display:block;font:700 30px var(--font-display);color:var(--white)}
  & span{display:block;margin-top:4px;font:500 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-4)}
}

/* The circuit from orbit: Sentinel-2 photograph with an SVG marker overlay.
   preserveAspectRatio="none" on the SVG makes the pin coordinates track the
   image exactly as it scales, so markers never drift off the lakes. */
.routemap{margin:44px auto 0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:26px 26px 20px;
  & .routemap__head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:18px}
  & .routemap__title{font:600 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--primary-deep)}
  & .routemap__scale{font:500 12px var(--font-mono);letter-spacing:.08em;color:var(--caption)}
  & .routemap__frame{position:relative;line-height:0;border-radius:var(--radius);overflow:hidden;background:var(--secondary-dark)}
  & .routemap__img{width:100%;height:auto;display:block}
  /* The overlay sits over the photo, so it must not eat clicks; only the
     pin links do. */
  & .routemap__pins{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  & .m-link{pointer-events:auto;cursor:pointer;
    & .m-hit{fill:transparent}
    &:hover .m-pin,&:focus-visible .m-pin{fill:var(--primary-light);r:12}
    &:hover .m-start-pin,&:focus-visible .m-start-pin{fill:var(--primary-light)}
    &:hover .m-lake,&:focus-visible .m-lake{fill:var(--primary-light)}
    &:focus{outline:none}
    &:focus-visible .m-hit{fill:rgb(127 208 238/.18);stroke:var(--primary-light);stroke-width:3}
  }
  & .m-route{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:2 22;opacity:.9}
  & .m-pin{fill:var(--primary);stroke:#fff;stroke-width:3.5;transition:fill .15s,r .15s}
  & .m-start-pin{fill:#fff;stroke:var(--secondary);stroke-width:4}
  & .m-lake{transition:fill .15s;font:700 28px var(--font-mono);letter-spacing:.1em;fill:#fff;paint-order:stroke;stroke:rgb(7 29 25/.9);stroke-width:7px;stroke-linejoin:round}
  & .m-start{font:700 22px var(--font-mono);letter-spacing:.1em;fill:var(--primary-light);paint-order:stroke;stroke:rgb(7 29 25/.9);stroke-width:7px;stroke-linejoin:round}
  & .routemap__cap{margin-top:12px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font:500 12px var(--font-mono);letter-spacing:.06em;color:var(--caption)}
  & .routemap__credit{color:var(--caption-soft);
    & a{color:inherit;text-decoration:underline}
  }
}
@media (max-width:760px){
  .routemap{padding:18px 16px 14px;
    & .m-lake{font-size:34px}
    & .m-start{font-size:26px}
  }
}

/* Photo strip: a 3-column mosaic on desktop, a swipeable strip on phones. */
.gallery{max-width:1248px;margin:36px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 24px;
  & figure{min-width:0;margin:0}
  & figure.-wide{grid-column:span 2}
  & img{width:100%;height:280px;object-fit:cover;display:block;border-radius:var(--radius)}
  & figcaption{margin-top:8px;font:500 11px var(--font-mono);letter-spacing:.08em;color:var(--on-dark-4)}
}
@media (max-width:960px){
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    & figure{flex:0 0 84%;scroll-snap-align:center}
  }
}

/* Book a rental. */
.bookhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  & .bookhead__by{font:500 12px var(--font-mono);letter-spacing:.08em;color:var(--caption)}
}
.fh-embed{margin-top:36px;min-height:320px}

/* How it works. */
.steps{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  & article{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:34px 30px 36px}
  & .steps__n{font:600 13px var(--font-mono);letter-spacing:.12em;color:var(--primary)}
  & h3{margin:12px 0 0;font:700 22px var(--font-display);color:var(--heading)}
  & p{margin:14px 0 0;font:400 17px/1.8 var(--font-body)}
  & ul{margin:12px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font:500 15px/1.55 var(--font-body);color:var(--heading)}
  & li{border-left:2px solid var(--primary);padding-left:10px}
}

@media (max-width:960px){
  /* The design keeps the hero padding and the 30px stat numerals at every
     width — only the stat grid halves. Matched deliberately. */
  .hero .hero__coords{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .steps ul{grid-template-columns:1fr}
  .gallery figure{flex:0 0 88%}
}