/* Approved Depth direction. The document remains visible before JavaScript. */
:root{--depth-fast:160ms;--depth-reveal:640ms;--depth-crisp:420ms;--depth-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:auto!important}
.hero{isolation:isolate;overflow:clip}
.hero-media{transform-origin:center;transition:none}
.hero-in{position:relative;z-index:1;transition:none}
.hero h1{font-size:clamp(44px,7.4vw,106px);letter-spacing:-.035em;line-height:1.04}
.hero h1 .ln{padding-bottom:.09em;margin-bottom:-.02em}
.hero h1 .depth-accent{color:var(--lime)}
.hero .lede{max-width:45ch;margin-left:auto;margin-right:auto}
.hero .hero-in{padding-top:64px;padding-bottom:64px}
.hero .proof{margin-top:var(--s3)}
.hero .proof>p{font-size:12px;font-weight:400;letter-spacing:.025em;line-height:1.6;text-wrap:balance}
.review-sources{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s3);margin-top:0;font-size:10px;letter-spacing:.02em}
.review-sources a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.review-sources a:hover{color:var(--lime)}
#shop{position:relative;isolation:isolate;padding-top:128px;padding-bottom:128px;background:var(--ink)}
#shop>.in{max-width:1344px}
#shop .mid{max-width:720px;margin:auto}
#shop h2{font-size:clamp(30px,4.6vw,64px);line-height:1.12;margin:24px 0}
#shop .mid>p:not(.eyebrow){max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.65}
#shop .eyebrow{color:var(--lime)}
.cut-gallery{max-width:1152px;margin:64px auto 0;scroll-margin-top:calc(var(--barh) + var(--s2))}

/* Keep the old reveal gate inert even if another script adds .js. Only the
   short, one-shot animations in depth.js own these entrances now. */
html.js [data-r],html.js [data-stagger]>*{opacity:1;transform:none;transition:none}
html.js [data-r="mask"] .ln>span,
html.js [data-r="wipe"] img,
html.js [data-r="lightstudy"] .art-frame img{opacity:1;transform:none;clip-path:none;transition:none}
html.js [data-r="rule"]::before{transform:none;transition:none}

/* Quiet feedback shares the same timing; booking never waits for an exit. */
.btn{transition:color var(--depth-fast) var(--depth-ease),transform var(--depth-fast) var(--depth-ease),background-color var(--depth-fast) var(--depth-ease),border-color var(--depth-fast) var(--depth-ease)}
.btn::before,.btn:hover::before,.btn:focus-visible::before{transition:transform var(--depth-fast) var(--depth-ease)}
.btn:active{transform:scale(.97)}
.nav a,.bar{transition:color var(--depth-fast) var(--depth-ease),border-color var(--depth-fast) var(--depth-ease)}
.nav a::after{transition:transform var(--depth-fast) var(--depth-ease)}
.nav a:focus-visible::after{transform:scaleX(1)}
.svc-action,.booking-choice,.premium-close,.shop-film-tools button{transition:background-color var(--depth-fast) var(--depth-ease),color var(--depth-fast) var(--depth-ease),border-color var(--depth-fast) var(--depth-ease)}
.svc-action::after{transition:transform 240ms var(--depth-ease)}
.svc-arrow,.plate-expand{transition:opacity var(--depth-fast) var(--depth-ease),transform var(--depth-fast) var(--depth-ease)}
.booking-choice-name>span{transition:transform var(--depth-fast) var(--depth-ease)}
.booking-choice:focus-visible .booking-choice-name>span{transform:translate(2px,-2px)}
.svc-action:active::after{transform:scaleX(1)}
.plate img{transition:transform var(--depth-crisp) var(--depth-ease)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:scale(.97)}
  .booking-choice:hover .booking-choice-name>span{transform:translate(2px,-2px)}
}
@media(prefers-reduced-motion:no-preference){
  .premium-dialog[open]{animation:depth-dialog-in 220ms var(--depth-ease)}
  .premium-dialog[open]::backdrop{animation:depth-backdrop-in 160ms var(--depth-ease)}
}
@keyframes depth-dialog-in{from{opacity:.65;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes depth-backdrop-in{from{opacity:0}to{opacity:1}}

@media(max-width:900px){
  .hero h1{font-size:clamp(32px,9.4vw,66px);line-height:1.08;letter-spacing:-.025em}
  .hero .hero-in{padding-top:32px;padding-bottom:32px}
  .hero .lede{font-size:16px;max-width:34ch;line-height:1.6}
  .hero .proof{margin-top:0}
  .hero .proof>p{font-size:11px}
  #shop{padding:80px 0}
  #shop>.in{padding-left:20px;padding-right:20px}
  #shop h2{font-size:clamp(27px,7.6vw,52px);line-height:1.16;margin:24px 0}
  #shop .mid>p:not(.eyebrow){font-size:16px;line-height:1.65}
  .cut-gallery{margin-top:48px}
}
@media(prefers-reduced-motion:reduce){
  .hero-media,.hero-in,.bandp,.btn,.svc-arrow,.plate-expand,.booking-choice-name>span{transform:none!important}
  .hero-media video{display:none!important}
  [data-r],[data-r] .ln>span,[data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
  .btn,.btn::before,.nav a::after,.svc-action::after,.booking-choice-name>span,.plate img,.premium-dialog,.premium-dialog::backdrop{animation:none!important;transition:none!important}
}