:root{--dark:#282828;--teal:#60bbb2;--white:#f5f5f7;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--dark);color:var(--dark);font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}
.logo{display:block;width:min(68%,660px);height:auto;margin:0 auto}
header{background:var(--dark);padding:clamp(40px,7vw,90px) 0 clamp(40px,9vw,120px)}
.gallery{background:linear-gradient(to bottom,var(--dark) 73.8%,var(--teal) 73.8%);padding:0 3.6%}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:4.6%;max-width:960px;margin:0 auto}
.grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.story{background:var(--teal);padding:clamp(48px,8vw,110px) 7% clamp(48px,7vw,90px);text-align:center}
h1,h2{color:var(--white);font-family:Archivo,Impact,"Arial Narrow",sans-serif;font-weight:900;text-transform:uppercase;text-wrap:balance}
h1{margin:0 auto clamp(40px,6vw,80px);max-width:12em;font-size:clamp(2.3rem,9vw,5.4rem);line-height:.98;letter-spacing:-.01em;font-stretch:88%}
h2{margin:clamp(32px,5vw,56px) auto clamp(18px,3vw,28px);max-width:22em;font-size:clamp(1.05rem,3.4vw,1.8rem);line-height:1.15;font-stretch:72%;letter-spacing:.01em}
h1+h2{margin-top:0}
.story p{margin:0 auto 1.6em;max-width:36em;font-size:clamp(.88rem,2vw,1.15rem);line-height:1.6;text-wrap:pretty}
.story p:last-child{margin-bottom:0}
.story p.lead{margin-top:clamp(32px,5vw,56px);font-weight:700}
footer{background:var(--dark);color:var(--white);text-align:center;padding:clamp(28px,4vw,48px) 6% clamp(36px,5vw,64px)}
footer .logo{width:min(42%,280px);margin-bottom:clamp(36px,7vw,80px)}
.contact{display:flex;flex-direction:column;gap:32px;align-items:center;font-size:.85rem;font-weight:700}
.contact a{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--teal);text-decoration:none;text-transform:uppercase}
.contact svg{color:var(--white)}
.contact a:hover span,.contact a:focus-visible span{text-decoration:underline}
@media(min-width:640px){.contact{flex-direction:row;justify-content:space-between;align-items:flex-start;max-width:1000px;margin:0 auto;font-size:clamp(.8rem,1.6vw,1.05rem)}.contact a{flex:1}}
@media(min-width:1024px){
.gallery{background:linear-gradient(to bottom,var(--dark) 55%,var(--teal) 55%)}
.grid{grid-template-columns:repeat(4,1fr);gap:2.4%;max-width:1240px}
.story{padding-top:clamp(80px,9vw,130px)}}
.ph{overflow:hidden;line-height:0}
.ph img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease,clip-path 1.1s cubic-bezier(.77,0,.18,1) var(--d,0ms);will-change:transform}
@media(hover:hover) and (min-width:1024px){.ph.in:hover img{transform:scale(1.05);filter:saturate(1.1) contrast(1.03)}}
@media(prefers-reduced-motion:no-preference){
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .9s ease var(--d,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .logo.reveal{transform:scale(.94)}
.js h1.reveal{transform:translateY(48px)}
.js .ph.reveal{opacity:1;transform:none;transition:none}
.js .ph.reveal:not(.in) img{clip-path:inset(0 100% 0 0)}
.js .ph.reveal.in img{clip-path:inset(0)}
.js .ph.reveal:not(.in) img{transform:scale(1.18)}
}