/* Kenwood host-site layer for the Quail Springs showcase (Alex, 2026-08-14).
   Additive on top of the packaged main.min.css — re-apply after any re-package.
   1) Drop-down Kenwood bar (dark, translucent, white logo) after the hero.
   2) Even section spacing where two same-background sections meet.
   3) A visible bouncing scroll cue on the hero. */

/* ---- 1. Kenwood bar ---- */
.kw-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  transform: translateY(-100%);
  transition: transform .35s ease;
  background: rgba(12, 12, 14, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 204, 209, 0.18);
  font-family: var(--sans);
}
.kw-bar.is-shown { transform: translateY(0); }
.kw-bar .kw-inner {
  max-width: 1200px; margin: 0 auto; padding: .55rem 1.2rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.kw-bar .kw-logo img { height: 34px; width: auto; display: block; }
.kw-bar .kw-back { color: var(--silver-bright); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.kw-bar .kw-back:hover { color: #fff; }
.kw-bar .kw-spacer { flex: 1; }
.kw-bar .kw-phone { color: #fff; font-weight: 500; font-size: 1rem; letter-spacing: .04em; white-space: nowrap; }
.kw-bar .kw-cta {
  color: #fff; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: .5rem 1.1rem; white-space: nowrap;
  transition: background .3s, border-color .3s;
}
.kw-bar .kw-cta:hover { background: rgba(192,133,82,.85); border-color: transparent; }
@media (max-width: 640px) {
  .kw-bar .kw-back { display: none; }
  .kw-bar .kw-cta { padding: .45rem .8rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) { .kw-bar { transition: none; } }

/* At-rest link in the hero corner so the way back is visible before any scroll */
.kw-hero-back {
  position: absolute; top: 1.4rem; left: 1.4rem; z-index: 3;
  color: var(--silver-bright); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .45rem .9rem; border: 1px solid rgba(201,204,209,.35); border-radius: 999px;
  background: rgba(12,12,14,.35); backdrop-filter: blur(6px);
}
.kw-hero-back:hover { color: #fff; border-color: rgba(255,255,255,.7); }

/* ---- 2. Section spacing ---- */
/* Where two same-background sections meet, the bottom padding of one plus the
   top padding of the next doubled the gap (views→mingus, craft→plan). Halve the
   meeting edge so every gap reads the same. */
.views { padding-bottom: clamp(1.75rem, 4vh, 3rem); }
.section:not(.dark) + .section:not(.dark) { padding-top: clamp(2rem, 4.5vh, 3.25rem); }
.section.dark + .section.dark { padding-top: clamp(2rem, 4.5vh, 3.25rem); }

/* ---- 3. Scroll cue ---- */
.scroll-cue {
  width: auto; height: auto; overflow: visible; bottom: 1.6rem;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  color: var(--silver-bright); text-decoration: none;
}
.scroll-cue span { position: static; width: auto; height: auto; background: none; animation: none; }
.scroll-cue .cue-label { font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; opacity: .85; }
.scroll-cue .cue-arrow {
  width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); animation: kw-bounce 1.6s ease-in-out infinite;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.8));
}
@keyframes kw-bounce { 0%,100% { transform: translateY(0) rotate(45deg); opacity: .55; } 50% { transform: translateY(8px) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .cue-arrow { animation: none; } }