/* Final cache-safe overrides loaded after every project stylesheet. */

/* Decorative scenes must never widen the document beyond the viewport. */
html,body{max-width:100%;overflow-x:clip}

/* A mouse must stop exactly where its kinetic motion ends. Re-enabling snap
   after inertia caused the visible desktop jump reported during testing. */
@media (hover:hover) and (pointer:fine){
  .portfolio .album-rail{scroll-snap-type:none!important}
}

/* About: collapsed by default on phone, tablet and desktop. */
.approach-story__about .about-toggle {
  display:inline-flex!important;align-items:center!important;gap:12px!important;
  margin-top:22px!important;padding:13px 18px!important;border:1px solid #18b8ee!important;
  border-radius:8px!important;background:#18b8ee!important;color:#041019!important;
  box-shadow:0 12px 34px rgba(24,184,238,.22)!important;font-size:10px!important;
  font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase!important;
}
.approach-story__about .about-toggle i{position:relative!important;display:block!important;width:18px!important;height:18px!important;border:1px solid rgba(4,16,25,.42)!important;border-radius:50%!important}
.approach-story__about .about-toggle i::before,.approach-story__about .about-toggle i::after{position:absolute!important;top:50%!important;left:50%!important;width:8px!important;height:1px!important;background:#041019!important;content:""!important;transform:translate(-50%,-50%)!important}
.approach-story__about .about-toggle i::after{transform:translate(-50%,-50%) rotate(90deg)!important}
.approach-story__about .about-toggle[aria-expanded="true"] i::after{opacity:0!important;transform:translate(-50%,-50%) rotate(0)!important}
.approach-story__about .about-more{display:block!important;max-height:0!important;overflow:hidden!important;opacity:0!important;visibility:hidden!important;transform:translateY(-8px)!important;transition:max-height 650ms cubic-bezier(.2,.7,.2,1),opacity 260ms ease,transform 420ms ease,visibility 0s linear 650ms!important}
.approach-story__about .about-more.is-expanded{max-height:1800px!important;opacity:1!important;visibility:visible!important;transform:none!important;transition:max-height 750ms cubic-bezier(.2,.7,.2,1),opacity 320ms ease 80ms,transform 480ms ease,visibility 0s!important}
.approach-story__about .about-more .about__copy{margin-top:25px!important}

/* Portfolio: identical circular controls on the side edges on every screen. */
.portfolio .album-rail-stage{position:relative!important}
.portfolio .rail-arrows{position:static!important;display:block!important;pointer-events:none!important}
.portfolio .rail-arrows .rail-arrow{position:absolute!important;top:40%!important;z-index:30!important;display:grid!important;width:50px!important;height:50px!important;place-items:center!important;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.64)!important;border-radius:50%!important;background:rgba(5,11,15,.9)!important;box-shadow:0 12px 36px rgba(0,0,0,.52)!important;color:#fff!important;font-size:22px!important;line-height:1!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(-50%)!important;backdrop-filter:blur(12px)!important}
.portfolio .rail-arrows .rail-arrow--prev{left:16px!important;right:auto!important}
.portfolio .rail-arrows .rail-arrow--next{right:16px!important;left:auto!important}
.portfolio .rail-arrows .rail-arrow:disabled{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.portfolio .rail-arrows .rail-arrow:hover:not(:disabled),.portfolio .rail-arrows .rail-arrow:focus-visible{border-color:#18b8ee!important;background:#18b8ee!important;color:#041019!important;outline:none!important;transform:translateY(-50%) scale(1.06)!important}

/* Album logo is a real close control. */
.album-modal__logo{display:grid!important;width:86px!important;place-items:center!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;cursor:pointer!important}
.album-modal__logo img{display:block!important;width:86px!important;max-width:100%!important}

@media(max-width:700px){
  .portfolio .rail-arrows .rail-arrow{top:39%!important;width:48px!important;height:48px!important;font-size:21px!important}
  .portfolio .rail-arrows .rail-arrow--prev{left:8px!important}
  .portfolio .rail-arrows .rail-arrow--next{right:8px!important}
  .approach-story__about .about-toggle{width:auto!important;min-height:44px!important}
  .album-modal__logo,.album-modal__logo img{width:76px!important}
  .portfolio-filters button,.cookie-banner button,.cookie-settings button{min-height:44px!important}
  .footer__social a,.footer__bottom a,.footer__bottom button{display:inline-flex!important;min-height:44px!important;align-items:center!important}
}

@media(prefers-reduced-motion:reduce){.approach-story__about .about-more{transition:none!important}}
