/* The beach walk on the Specialties page (approved 5-cabana version, 9/27).
   Native scroll drives a sticky stage that pins just under the sticky site header.
   Nothing listens to wheel or touch events, so the wheel is never trapped. */
.walk{position:relative;height:600vh;--walk-top:0px}
.walk-stage{position:sticky;top:var(--walk-top);height:calc(100vh - var(--walk-top));height:calc(100svh - var(--walk-top));overflow:hidden;background:#cfe3ee}
.walk-stage > video,.walk-stage .walk-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.walk-stage .walk-still{display:none}

.walk-prompt{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);text-align:center;color:var(--blue-deep);white-space:nowrap;
  background:rgba(255,252,246,.9);border:1px solid var(--gold);border-radius:4px;padding:14px 34px 12px;
  box-shadow:0 14px 36px rgba(27,58,92,.14);transition:opacity .5s ease;pointer-events:none}
.walk-prompt span{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(30px,4.2vw,58px);font-weight:600;letter-spacing:.02em;line-height:1.05}
.walk-prompt i{display:block;margin:8px auto 0;width:2px;height:34px;background:linear-gradient(var(--gold),rgba(209,170,63,0));animation:walk-drip 2.2s ease-in-out infinite}
@keyframes walk-drip{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* One card per cabana: his image, the name, his short line, the link. */
.walk-card{position:absolute;left:5vw;top:12vh;width:min(400px,34vw);background:rgba(255,252,246,.96);
  border:1px solid var(--gold);border-radius:4px;box-shadow:0 18px 40px rgba(27,58,92,.14);overflow:hidden;
  opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.walk-card.on{opacity:1;transform:none;pointer-events:auto}
.walk-card img,.walk-card video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.walk-card .walk-txt{padding:18px 24px 18px}
.walk-card small{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#8A6A14;font-weight:600;margin-bottom:4px}
.walk-card h3{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.1;font-size:clamp(32px,3vw,44px);color:var(--blue-deep)}
.walk-card p{margin:8px 0 10px;color:var(--muted,#4F5B66);font-size:17px;line-height:1.5}
.walk-card a{color:var(--blue,#2C5F8D);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px}

.walk-end{position:absolute;left:50%;bottom:10vh;transform:translateX(-50%);text-align:center;color:var(--blue-deep);opacity:0;transition:opacity .6s ease;
  background:rgba(255,252,246,.9);border:1px solid var(--gold);border-radius:4px;padding:14px 34px;width:max-content;max-width:calc(100% - 32px);
  box-shadow:0 14px 36px rgba(27,58,92,.14);pointer-events:none}
.walk-end.on{opacity:1}
.walk-end p{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.1;font-size:clamp(34px,4.4vw,62px)}

.walk-skip{position:absolute;right:16px;bottom:16px;background:rgba(27,58,92,.82);color:#fff;border:1px solid rgba(255,255,255,.6);
  border-radius:4px;padding:8px 14px;font:600 14px "Source Sans 3",sans-serif;text-decoration:none}
.walk-skip:hover{background:var(--blue-deep)}

.walk-list{display:none}

/* Phone: the card sits low and compact, image beside the words. */
@media (max-width:700px){
  .walk{height:520vh}
  .walk-card{left:16px;right:16px;width:auto;top:auto;bottom:70px;display:grid;grid-template-columns:38% 1fr}
  .walk-card img,.walk-card video{height:100%;aspect-ratio:auto}
  .walk-card .walk-txt{padding:12px 14px}
  .walk-card h3{font-size:28px}
  .walk-card p{font-size:15px;margin:4px 0 6px}
  .walk-prompt{bottom:14vh;padding:12px 22px 10px}
  .walk-end{bottom:14vh;padding:12px 18px}
}

/* Reduced motion: just the still. The five cards are already in "Specializing In" right below,
   so no second list here (it showed every card twice, 10/10). */
@media (prefers-reduced-motion: reduce){
  .walk{height:auto}
  .walk-stage{position:relative;top:0;height:62vh}
  .walk-stage video,.walk-prompt,.walk-card,.walk-end,.walk-skip{display:none}
  .walk-stage .walk-still{display:block}
}
#specializing-in{scroll-margin-top:96px}

/* Phone refused to play the video (9/30; Low Power Mode): same still as reduced motion, no list. */
.walk.walk--static{height:auto}
.walk--static .walk-stage{position:relative;top:0;height:62vh}
.walk--static .walk-stage video,.walk--static .walk-prompt,.walk--static .walk-card,.walk--static .walk-end,.walk--static .walk-skip{display:none}
.walk--static .walk-stage .walk-still{display:block}

/* Phones: show the whole beach picture uncropped so all five cabanas are in view. */
@media (max-width:700px){
  .walk--static .walk-stage{height:auto;aspect-ratio:1600/894}
}
@media (max-width:700px) and (prefers-reduced-motion: reduce){
  .walk-stage{height:auto;aspect-ratio:1600/894}
}