:root {
  color: #21353a;
  background: #fff;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: none;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
}
* { box-sizing: border-box; }
body, p, h1, h2 { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #d84900; outline-offset: 5px; }
a:hover { color: #d84900; }
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1440px;
  margin: auto;
  padding: 60px 80px;
}
.logo { display: block; }
.coming-soon {
  position: absolute;
  right: 11.67%;
  display: grid;
  place-content: center;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background: #eee;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
}
main { padding: 0 20px; text-align: center; }
.hero { margin: 0 auto 80px; }
.visual { position: relative; max-width: 1150px; margin: auto; }
.photo { position: relative; height: 550px; overflow: hidden; border-radius: 20px; }
.house {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}
.parallax-active .house {
  transform: translateY(calc(-50% + var(--parallax-offset, 0px)));
}
.accent { position: absolute; left: 28px; top: 505px; width: 335px; height: 174px; }
.accent img { position: absolute; left: 62px; top: 0; }
.accent span {
  position: absolute;
  top: 62px;
  left: 0;
  color: #b8887f;
  font-family: "Caveat", cursive;
  font-size: 48px;
  line-height: 1.25;
  white-space: nowrap;
  transform: rotate(5deg);
}
.intro { max-width: 840px; margin: 120px auto 0; }
.eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.welcome { color: #abbcc4; }
h1 {
  margin: 23px 0;
  font-family: "Fraunces", serif;
  font-size: 72px;
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: 1.2;
}
.booking { max-width: 640px; margin: 0 auto 80px; padding: 40px 20px; border-radius: 20px; background: #dae6ed; }
.booking h2 { margin-bottom: 20px; }
.booking a, .outlook strong { font-weight: 700; }
.booking a { text-underline-offset: 3px; }
.outlook { max-width: 680px; margin: auto; padding-bottom: 120px; }
.outlook p + p { margin-top: 20px; }
@media (min-width: 701px) and (max-width: 1250px) {
  .visual { margin-inline: 4%; }
  .photo { height: auto; aspect-ratio: 23 / 11; }
  .accent { top: calc(100% - 45px); }
  .coming-soon { right: 6%; width: 110px; height: 110px; }
}
@media (max-width: 700px) {
  :root { font-size: 18px; line-height: 27px; }
  .header { justify-content: space-between; padding: 28px 20px; height: 136px; }
  .logo { width: 210px; height: auto; }
  .coming-soon { position: static; flex-shrink: 0; width: 64px; height: 64px; font-size: 10px; line-height: 14px; }
  .hero { margin-bottom: 40px; }
  .photo { height: auto; aspect-ratio: 23 / 11; }
  .accent { left: 15px; top: calc(100% - 32px); width: 240px; height: 125px; }
  .accent img { left: 44.42px; transform: scale(.71648); transform-origin: top left; }
  .accent span { top: 44px; font-size: 34.391px; }
  .intro { margin-top: 130px; }
  .eyebrow { font-size: 12px; line-height: 18px; }
  .welcome { font-size: 11px; line-height: 16px; }
  h1 { margin: 20px 0; font-size: clamp(28px, 8.72vw, 46px); line-height: 1.20588; }
  .booking { margin-bottom: 40px; padding: 28px 16px; }
  .booking h2 { margin-bottom: 16px; }
  .booking p { line-height: 26px; }
  .outlook { padding-bottom: 48px; }
  .outlook p + p { max-width: 250px; margin-inline: auto; }
}
@media (max-width: 359px) {
  .logo { width: 190px; }
  .booking { padding-inline: 10px; font-size: 16px; }
}