/* CLUB ESOX V5 — portrait film. Same WILD PREDATOR visual identity.
   In V4, landscape footage was boxed inside a 16:9 mobile frame. V5 is full bleed. */
.wild-video-frame{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:#06140e}
.wild-video-frame .wild-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;pointer-events:none}
.wild-video.is-unavailable{opacity:0!important}
.video-frame-label{display:none!important}
.motion-activate[hidden]{display:none!important}
.motion-activate{position:absolute;z-index:34;left:50%;bottom:calc(103px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 36px);min-height:46px;background:#d9f047;color:#071411;border:1px solid #d9f047;border-radius:0;padding:10px 14px;cursor:pointer;box-shadow:0 8px 34px rgba(0,0,0,.32)}
.motion-activate span{font-size:16px;line-height:1}.motion-activate strong{font:800 13px/1.2 'Barlow Condensed',Impact,sans-serif;letter-spacing:.08em;text-align:center}
@media(max-width:700px){
  .story-track{height:505svh;height:505dvh}
  .story-sticky{height:100svh;height:100dvh;min-height:0;overflow:hidden;background:#06140e}
  /* Fullscreen film, deliberately composed for portrait. No box, no hard horizontal edges. */
  .wild-video-frame{inset:0;z-index:1;background:#06140e;box-shadow:none;border:0;transform:none;aspect-ratio:auto}
  .wild-video-frame::before,.wild-video-frame::after{display:none!important}
  .wild-video-frame .wild-video{
    top:22%;left:0;right:0;bottom:auto;width:100%;height:84%;
    object-fit:cover;object-position:50% 50%;
    filter:brightness(.98) contrast(1.08) saturate(.96);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 11%,#000 24%,#000 85%,rgba(0,0,0,.85) 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 11%,#000 24%,#000 85%,rgba(0,0,0,.85) 100%);
  }
  .scene__photo--water{background-image:url('../img/brochet-mobile-poster.webp');background-position:center;background-size:cover;filter:brightness(.25) blur(8px)}
  .scene--water::after{z-index:4;background:linear-gradient(180deg,rgba(2,13,10,.80) 0%,rgba(2,13,10,.67) 22%,rgba(2,13,10,.26) 41%,rgba(2,13,10,.03) 57%,rgba(2,13,10,.10) 73%,rgba(2,13,10,.82) 100%)}
  .wild-video-grade{background:linear-gradient(180deg,rgba(3,14,10,.5),transparent 48%);mix-blend-mode:normal}
  .scene-vignette{background:radial-gradient(ellipse at 52% 53%,transparent 34%,rgba(2,9,7,.33) 78%,rgba(2,9,7,.69) 100%)}
  .underwater-rays{opacity:.23}.water-haze{opacity:.18}
  .story-beat,.story-beat--impact,.story-beat--end{
    left:20px;right:20px;width:auto;top:clamp(135px,17svh,167px);
    transform:translate3d(0,20px,0);text-align:left;pointer-events:none;
  }
  .story-beat.is-active,.story-beat--impact.is-active,.story-beat--end.is-active{transform:translate3d(0,0,0)}
  .story-beat h1,.story-beat h2{font:900 clamp(48px,13vw,73px)/.78 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.008em;text-wrap:initial}
  .story-beat h2{font-size:clamp(47px,12.4vw,70px)}
  .story-beat--impact h2{font-size:clamp(46px,11.65vw,65px)}
  .story-beat--end h2{font-size:clamp(45px,11.55vw,67px)}
  .story-beat p{font:500 12px/1.48 'Barlow',sans-serif;max-width:min(84vw,305px);margin-top:16px;background:none;text-shadow:0 2px 12px #051008}
  .kicker{font:800 9px/1.2 'Barlow',sans-serif;padding:7px 9px;margin-bottom:17px;letter-spacing:.1em}
  .hero-discover{min-height:41px;margin-top:15px;padding:11px 13px;gap:16px;font-size:10px;max-width:100%}
  .hero-discover span{font-size:19px}
  .story-beat--end .btn{min-height:43px;padding:12px 15px;font-size:10px;gap:12px;margin-top:8px}
  .story-skip{right:20px;top:96px;font-size:9px;z-index:32}
  .hero-coordinate{left:20px;bottom:calc(93px + env(safe-area-inset-bottom,0px));font-size:7px;opacity:.72;max-width:calc(100% - 40px)}
  .scroll-invite{left:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));gap:10px;font-size:8px;line-height:1.25;letter-spacing:.12em}
  .story-counter{right:20px;bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .story-counter strong{font-size:27px}
  .motion-activate{bottom:calc(114px + env(safe-area-inset-bottom,0px))}
  /* Keep navigation visible over the cinematic background. */
  .site-header{height:79px;padding-inline:19px;align-items:center}
  .site-header.scrolled{height:72px}
  .menu-toggle{display:flex;flex:0 0 42px;visibility:visible;opacity:1;border:1px solid rgba(234,245,219,.7);border-radius:0}
  .mobile-menu{z-index:78}
  .menu-toggle{z-index:95}
}
@media(max-width:700px) and (max-height:700px){
  .story-beat,.story-beat--impact,.story-beat--end{top:clamp(112px,17svh,135px)}
  .story-beat h1{font-size:clamp(44px,11.8vw,61px)}
  .story-beat h2{font-size:clamp(42px,11.5vw,59px)}
  .story-beat p{font-size:11px;max-width:300px;margin-top:10px}
  .hero-discover{margin-top:9px}
  .wild-video-frame .wild-video{top:21%;height:87%}
}
@media(prefers-reduced-motion:reduce){
  html:not(.motion-opt-in) .motion-activate{display:flex}
  html:not(.motion-opt-in) .story-beat[data-beat="0"]{top:clamp(135px,17svh,167px);transform:none!important}
}
/* V5: correct intrinsic widths of bold condensed headings and grid children. */
@media(max-width:700px){
  .section-shell,.intro-copy,.intro-copy>* ,.intro-right,.journey-grid,.journey-card,.journey-card__content,
  .section-head,.territory-grid,.territory-visual,.territory-content,.benefits-head,.booking-inner{
    min-width:0;max-width:100%;
  }
  .territory-grid{grid-template-columns:minmax(0,1fr)}
  .intro-copy{grid-template-columns:minmax(0,1fr)}
  .intro-copy h2,.section-head h2,.territory-content h2,.benefits-head h2,.booking h2{
    font-size:clamp(46px,11.9vw,75px);
    max-width:100%;
  }
  .journey-card__content h3{font-size:clamp(50px,11.9vw,74px)}
  .territory-visual{width:100%;height:450px}
  .territory-content .lead{font-size:clamp(19px,5.5vw,26px)}
  .territory-tags{flex-wrap:wrap}
  .quote-content blockquote{font-size:clamp(38px,10vw,64px)}
  .footer-brand>span{font-size:clamp(46px,13vw,65px)}
  .journey-card,.territory-visual,.intro-photo{overflow:hidden}
}