/* ================================================================
   Breaking Point v15 — touch, mobile, performance + final polish
   This layer intentionally keeps the existing visual design intact.
   ================================================================ */

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

/* ---------- Reliable touch / click behaviour ---------- */
a,button,summary,[role="button"],input,select,textarea{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button,.level-point,.package-arrows button,.story-step,.faq-trigger,.bp-menu,.menu-button{
  -webkit-user-select:none;
  user-select:none;
}
/* The old enlarged pseudo hit-boxes could overlap neighbouring controls on phones. */
@media(pointer:coarse){
  .package-arrows button::after,
  .roll-arrows button::after,
  .lightbox-arrow::after,
  .lightbox-close::after,
  .copy-btn::after,
  .level-point::after,
  .bp-menu::after,
  .cal-close::after{content:none!important;display:none!important}
}

/* Package selectors must always sit above the decorative line/card and keep a real
   positioned hit area on mobile. */
.package-room .level-line{position:relative;z-index:5}
.package-room .level-point{position:relative!important;z-index:6;pointer-events:auto!important;cursor:pointer}
.package-room .package-arrows{z-index:7;pointer-events:auto}
.package-room .package-arrows button{position:relative!important;z-index:8;pointer-events:auto;cursor:pointer}

/* Larger, cleaner package arrow controls. */
.package-arrows{align-items:center;gap:12px!important}
.package-arrows button{
  width:46px!important;height:46px!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(229,28,44,.85)!important;
  border-radius:50%!important;
  background:#141614!important;color:#f5f3eb!important;
  line-height:0!important;
  box-shadow:0 5px 18px rgba(0,0,0,.18);
  transition:background-color .2s ease,border-color .2s ease,transform .16s ease,color .2s ease!important;
}
.package-arrows button svg{width:19px!important;height:19px!important;stroke-width:2.25!important}
@media(hover:hover) and (pointer:fine){
  .package-arrows button:hover{background:var(--bp-red)!important;border-color:var(--bp-red)!important;color:#fff!important;transform:translateY(-1px)}
}
.package-arrows button:active{transform:scale(.94)!important;background:var(--bp-red)!important;color:#fff!important}
.package-count{min-width:52px!important;font-variant-numeric:tabular-nums}

/* ---------- The three "Go Time" story icons stay red — no hover grey state. ---------- */
.story-step-icon,.story-step-active .story-step-icon,
.story-step:hover .story-step-icon,.story-step:focus-visible .story-step-icon{
  color:var(--bp-red)!important;
}
.story-step-icon svg{stroke:currentColor!important;color:currentColor!important}
@media(hover:hover) and (pointer:fine){
  .story-step:hover{background:rgba(23,25,21,.045)!important;padding-left:12px!important}
}

/* ---------- Mobile menu: exact requested order, no separator lines. ---------- */
.bp-mobile a,.mobile-nav a,.interior-menu a{
  border-bottom:0!important;
  text-decoration:none!important;
}
.bp-mobile a[aria-current="page"],
.mobile-nav a[aria-current="page"],
.interior-menu a[aria-current="page"],
.bp-nav a[aria-current="page"],
.main-nav a[aria-current="page"]{
  font-weight:800!important;
}
@media(max-width:1260px){
  .bp-mobile a{min-height:52px}
  .bp-mobile{padding-top:10px!important;padding-bottom:18px!important}
}
@media(max-width:760px){
  .mobile-nav,.interior-menu{gap:2px!important}
  .mobile-nav a,.interior-menu a{min-height:52px!important}
  .mobile-nav a[aria-current="page"],.interior-menu a[aria-current="page"]{font-weight:800!important}
}

/* ---------- Footer alignment: consistent left edges and readable mobile columns. ---------- */
.bp-footer-col{align-items:flex-start!important;text-align:left!important}
.bp-footer-col h4{width:100%}
.bp-footer-col a,.bp-footer-col span{max-width:34ch}
.bp-footer-bottom{align-items:center}
@media(max-width:560px){
  .bp-footer-inner{padding-top:48px!important}
  .bp-footer-top{align-items:flex-start!important}
  .bp-footer-grid{gap:26px!important}
  .bp-footer-col{gap:8px!important}
  .bp-footer-bottom{align-items:flex-start!important}
}

/* ---------- Gallery: turn the final "Your turn" area into a proper CTA card and
   keep it close to the photo row rather than leaving a large empty gap. ---------- */
.photo-roll-end{
  width:230px!important;
  min-width:230px!important;
  align-self:center!important;
  justify-items:start!important;
  gap:13px!important;
  padding:22px!important;
  border:1px solid rgba(23,25,21,.18);
  border-left:3px solid var(--bp-red);
  background:rgba(255,255,255,.34);
  border-radius:14px;
}
.photo-roll-end>span{font-size:clamp(42px,4.4vw,60px)!important;line-height:.84!important}
.photo-roll-end svg{color:var(--bp-red)!important}
.photo-roll-end a{
  width:100%;min-height:46px;padding:0 14px;
  justify-content:space-between;
  border-radius:999px;
  background:var(--bp-red);color:#fff!important;
}
.photo-roll-end a svg{color:#fff!important}
@media(max-width:800px){
  .photo-roll-end{width:205px!important;min-width:205px!important;padding:18px!important;gap:12px!important}
  .photo-roll-end>span{font-size:45px!important}
  .photo-roll-end a{min-height:44px;font-size:12px}
}

/* ---------- Performance: keep animations on the compositor and avoid permanent GPU layers. ---------- */
.mx,.reveal,.photo-tile img,.gallery-wall-item img{will-change:auto!important}
@media(max-width:800px){
  .story-photo-stack img,.photo-tile img{filter:saturate(.82)}
}

/* Prevent decorative layers from ever becoming touch targets. */
.story-section:after,.package-room:before,.photo-roll:before,.hero-stage:before,.hero-stage:after,
.package-room .selected-package:after{pointer-events:none!important}

/* Better keyboard/focus visibility without adding visual clutter. */
a:focus-visible,button:focus-visible{outline:2px solid var(--bp-red)!important;outline-offset:3px}

/* Keep the mobile WhatsApp bubble above every page element. */
.bp-wa{z-index:200!important}