/* ============================================================
   BREAKING POINT — FINAL MOBILE / UX / POLISH FIXES
   Keep this file last so these rules are authoritative.
   ============================================================ */

:root{
  --bp-final-red:#e51c2c;
  --bp-final-red-hover:#ff3041;
}

/* ---------- Universal interaction safety ---------- */
html{
  -webkit-tap-highlight-color:transparent;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
a,button,input,select,textarea,summary,[role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button,a{ -webkit-user-select:none; user-select:none; }

/* Never let decorative layers steal taps. */
.reveal::before,.reveal::after,
.hero-stage::before,.hero-stage::after,
.story-section::before,.story-section::after,
.package-room::before,.package-room::after,
.city-section::before,.city-section::after,
.last-call-poster::before,.last-call-poster::after{
  pointer-events:none;
}

/* ---------- Homepage: "This Is Your Go Time" ---------- */
.story-step{
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation!important;
  transition:background-color .18s ease!important;
}
.story-step .story-step-icon,
.story-step-active .story-step-icon,
.story-step:hover .story-step-icon,
.story-step:active .story-step-icon,
.story-step:focus .story-step-icon,
.story-step:focus-visible .story-step-icon{
  color:var(--bp-final-red)!important;
  opacity:1!important;
  filter:none!important;
}
.story-step:hover,
.story-step:active,
.story-step-active,
.story-step:focus,
.story-step:focus-visible{
  padding-left:4px!important;
  background:transparent!important;
  transform:none!important;
  filter:none!important;
}
.story-step:active{
  transform:none!important;
}
.story-step .story-step-arrow{
  transition:opacity .18s ease,transform .18s ease!important;
}

/* Do not create sticky hover states on touch devices. */
@media (hover:none){
  .story-step:hover{
    padding-left:4px!important;
    background:transparent!important;
  }
}

/* ---------- Gallery CTA: stronger, modern, still directly under gallery ---------- */
.gallery-page + .gallery-cta-wrap{margin-top:clamp(30px,5vw,58px)}
.gallery-cta-banner,
.cta-banner{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(22px,5vw,70px);
  min-height:210px;
  padding:clamp(28px,5vw,58px);
  background:
    radial-gradient(circle at 82% 25%,rgba(229,28,44,.22),transparent 35%),
    linear-gradient(135deg,#1a1d1b 0%,#101211 58%,#0b0d0c 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 55px rgba(0,0,0,.22);
}
.gallery-cta-banner::before,
.cta-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 0 56%,rgba(229,28,44,.09) 56.1%,transparent 72%);
}
.gallery-cta-banner::after,
.cta-banner::after{
  content:"";
  position:absolute;
  width:150px;height:150px;
  right:-45px;top:-55px;
  border:1px solid rgba(229,28,44,.45);
  transform:rotate(45deg);
  pointer-events:none;
}
.gallery-cta-banner > *,
.cta-banner > *{position:relative;z-index:1}
.gallery-cta-banner h2,
.cta-banner h2{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.045em;
  font-size:clamp(42px,6vw,78px);
}
.gallery-cta-banner p{
  margin:12px 0 0;
  max-width:520px;
  color:#bfc2b9;
  line-height:1.55;
  font-size:14px;
}
.gallery-cta-banner .btn,
.cta-banner .btn{
  flex:0 0 auto;
  min-height:54px;
  padding:0 24px;
  border-radius:999px;
  touch-action:manipulation;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .gallery-cta-banner .btn:hover,
  .cta-banner .btn:hover{transform:translateY(-2px)}
}
@media(max-width:700px){
  .gallery-cta-banner,
  .cta-banner{
    min-height:0;
    flex-direction:column;
    align-items:stretch;
    gap:24px;
    padding:30px 22px;
  }
  .gallery-cta-banner h2,
  .cta-banner h2{font-size:clamp(42px,14vw,62px)}
  .gallery-cta-banner .btn,
  .cta-banner .btn{width:100%;min-height:56px}
}

/* ---------- Alignment / typography ---------- */
main{overflow:clip}
.container{width:min(100% - 40px,1240px);margin-inline:auto}
p{max-width:75ch}
h1,h2,h3,h4,p{overflow-wrap:break-word}
@media(max-width:700px){
  .container{width:min(100% - 40px,1240px)}
  .display.lg{line-height:.88}
  .lead{line-height:1.55}
}

/* Footer alignment is consistent across all breakpoints. */
.bp-footer-inner{
  width:min(100% - 40px,1440px);
  margin-inline:auto;
}
.bp-footer-top{align-items:flex-start}
.bp-footer-grid{align-items:start}
.bp-footer-col{min-width:0}
.bp-footer-col a,.bp-footer-col span{
  overflow-wrap:anywhere;
}
.bp-footer-bottom{align-items:center}
@media(max-width:560px){
  .bp-footer-inner{width:min(100% - 32px,1440px)}
  .bp-footer-top{align-items:flex-start}
  .bp-footer-brand{width:100%}
  .bp-footer-top > .bp-cta{width:100%}
  .bp-footer-grid{gap:26px}
  .bp-footer-bottom{justify-content:center;text-align:center}
  .bp-footer-legal{justify-content:center!important;flex-wrap:wrap}
}

/* ---------- Lightweight motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}
@media(max-width:700px){
  /* Keep reveal animation, but reduce work on phones. */
  .js .reveal,.js .reveal-left,.js .reveal-right,.js .reveal-zoom{
    transition-duration:.38s!important;
  }
}

/* ---------- Fixed controls must always sit above page content ---------- */
.bp-header{z-index:1000!important}
.bp-menu{position:relative;z-index:1002!important}
.bp-mobile.is-open{z-index:1001!important}
.bp-wa{z-index:1100!important}
.bp-wa-btn,.bp-wa-menu a{touch-action:manipulation!important}

/* Avoid the old generic scale-on-press feeling for navigation/primary controls. */
@media(max-width:700px){
  .bp-cta:active,.bp-menu:active,.bp-wa-btn:active,
  .btn:active,.bp-mobile a:active{
    transform:none!important;
  }
}

/* ---------- Gallery grid stays stable on small screens ---------- */
@media(max-width:700px){
  .gallery-page.gallery-uniform{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  .gallery-uniform figure{aspect-ratio:3/4}
}

/* ---------- Prevent accidental horizontal overflow ---------- */
body{overflow-x:hidden}
img,svg,video,iframe{max-width:100%}