/* Home: the opener's height, the two quotations, and the one-section-per-screen system (see js/site.js).
   html.js = scripting is on (set in <head> before first paint).  seen-N / cur-N on .p-root are kept by js/site.js. */
.h-hero{min-height:clamp(560px,52vw,1200px)}
.h-pad{padding-top:clamp(96px,11.2vw,176px);padding-bottom:clamp(96px,11.2vw,176px)}
.p-rail,.p-cue{display:none}
@media (max-height:2000px){
html.js .p-root .p-in{opacity:0;transform:translateY(14px)}
.p-root.seen-1 .p-s1 .p-in,.p-root.seen-2 .p-s2 .p-in,.p-root.seen-3 .p-s3 .p-in{opacity:1;transform:none;transition:opacity 400ms cubic-bezier(.2,.8,.2,1),transform 400ms cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 60ms + 60ms)}
.p-root.seen-1 .p-s1,.p-root.seen-2 .p-s2,.p-root.seen-3 .p-s3{--off:initial}
html.js .p-root .h-pour{-webkit-mask-image:linear-gradient(180deg,#000 34%,transparent 50%);mask-image:linear-gradient(180deg,#000 34%,transparent 50%);-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 100%;mask-position:0 100%}
.p-root.seen-1 .p-s1 .h-pour,.p-root.seen-2 .p-s2 .h-pour,.p-root.seen-3 .p-s3 .h-pour{-webkit-mask-position:0 0;mask-position:0 0;transition:opacity 500ms cubic-bezier(.2,.8,.2,1),transform 700ms cubic-bezier(.2,.8,.2,1),-webkit-mask-position 1300ms cubic-bezier(.4,0,.2,1),mask-position 1300ms cubic-bezier(.4,0,.2,1)}
}
@media (min-width:1150px) and (min-height:620px) and (max-height:2000px), (min-width:900px) and (min-height:980px) and (max-height:2000px){
html{scroll-snap-type:y mandatory}
.p-slide{box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
.h-pad{padding-top:40px;padding-bottom:40px}
.p-s1,.p-last{justify-content:flex-start}
.p-last-main{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.p-rail{display:flex;flex-direction:column;position:fixed;z-index:5;right:clamp(8px,1.4vw,24px);top:50%;transform:translateY(-50%)}
.p-tick{display:flex;align-items:center;justify-content:flex-end;width:44px;height:24px}
.p-tick::after{content:"";display:block;width:12px;height:1px;background:#6e6e6e;transition:width 200ms cubic-bezier(.2,0,0,1),background-color 200ms cubic-bezier(.2,0,0,1)}
a.p-tick:hover{opacity:1}
.p-tick:hover::after{width:20px;background:#c9c9c9}
.p-root.cur-1 .p-t1::after,.p-root.cur-2 .p-t2::after,.p-root.cur-3 .p-t3::after{width:24px;height:2px;background:#ffffff}
.p-cue{display:flex;flex-direction:column;align-items:center;gap:2px;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 16px;color:#9a9a9a;text-decoration:none}
}
@media (min-width:1150px) and (min-height:620px) and (max-height:2000px) and (prefers-reduced-motion:no-preference), (min-width:900px) and (min-height:980px) and (max-height:2000px) and (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.p-root .p-in{opacity:1!important;transform:none!important;transition:none!important}}
@media print{.p-root .p-in{opacity:1!important;transform:none!important}.p-rail,.p-cue{display:none!important}}
@media (prefers-reduced-motion:reduce){.p-root .h-pour{-webkit-mask-image:none!important;mask-image:none!important}}
@media print{.p-root .h-pour{-webkit-mask-image:none!important;mask-image:none!important}}