/* The coming soon page (views/coming-soon.php). Built on css/styles.css for the faces, colours,
   buttons and the hero's entrance keyframes, so it reads as the same site. */
body.coming-soon{padding:0;margin:0}
.soon{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:40px;padding:34px var(--gutter) 28px;color:white;background:var(--sea);overflow:hidden}
.soon__image{position:absolute;inset:0;z-index:-2;overflow:hidden}
.soon__image picture{display:contents}
.soon__image img{width:100%;height:100%;object-fit:cover;object-position:55% 62%}
.soon:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,25,22,.55) 0,rgba(8,25,22,0) 26%,rgba(8,25,22,.2) 48%,rgba(8,25,22,.86) 100%)}
.soon__brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:24px;line-height:1}
.soon__brand img{width:38px;height:38px}
.soon__content{align-self:end;width:min(100%,1320px);margin-inline:auto;display:grid;justify-items:start}
.soon__kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 20px}
.soon h1{font-size:clamp(3.2rem,5.6vw,5rem);line-height:1.08;max-width:11em;text-wrap:balance;margin:0;text-shadow:0 2px 28px rgba(0,0,0,.14)}
.soon h1 em{display:inline-block;line-height:1.16}
.soon__lede{max-width:34em;font-size:17px;line-height:1.6;margin:26px 0 0}
.soon__actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:32px}
.soon__actions p{margin:0;font-size:13px;color:var(--haze)}
.soon__foot{width:min(100%,1320px);margin-inline:auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding-top:20px;border-top:1px solid rgba(246,247,243,.22);font-size:12px;color:var(--haze)}
.soon__foot a{color:inherit}
.soon a:focus-visible{outline:2px solid var(--salt);outline-offset:3px}
@media(min-width:1100px){.soon__image img{width:114%;max-width:none;object-position:50% 88%}}
@media(max-width:700px){
.soon{gap:28px;padding-top:24px}
.soon__brand{font-size:19px}.soon__brand img{width:30px;height:30px}
.soon__image img{object-position:50% 100%}
/* The phone photograph has sky above the villa: the words sit in the sky, the villa shows below. */
.soon:after{background:linear-gradient(180deg,rgba(8,25,22,.78) 0,rgba(8,25,22,.55) 50%,rgba(8,25,22,0) 72%,rgba(8,25,22,.72) 100%)}
.soon__content{align-self:start}
.soon__kicker{margin-bottom:14px}
.soon h1{font-size:clamp(2.5rem,10vw,3.3rem)}
.soon__lede{font-size:15px;margin-top:18px}
.soon__actions{margin-top:22px}
.soon__actions p{display:none}
}
/* The homepage hero's entrance: the photograph settles, the shade fades in, the words rise in turn. */
@media(prefers-reduced-motion:no-preference){
.soon__image img{animation:hero-settle 9s cubic-bezier(.22,1,.36,1) both}
.soon:after{animation:hero-shade 1.4s cubic-bezier(.22,1,.36,1) both}
.soon__kicker,.soon h1,.soon h1 em,.soon__lede,.soon__actions{animation:hero-rise .9s cubic-bezier(.22,1,.36,1) both}
.soon__kicker{animation-delay:.2s}.soon h1{animation-delay:.35s}.soon h1 em{animation-delay:.55s}.soon__lede{animation-delay:.7s}.soon__actions{animation-delay:.85s}
}