/* The landing area at the top of the home page.
   A full-screen welcome over a slow crossfade of the portfolio's own
   photographs, which then hands off to the rental search directly below. */

:root { --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; }

/* Brand mark: three letters need a touch less size than two did. */
.brand .mark { font-size: 11.5px; letter-spacing: .04em; }

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100vh - 61px); min-height: calc(100svh - 61px);
  display: flex; align-items: center;
  color: #fff; background: #0c2340;
}
/* Arriving from a link that already carries a search (or coming back from
   a property page) skips the welcome and goes straight to the rentals. */
html.nohero .hero { display: none; }

/* The photographs. Each slide fades in and drifts very slightly larger, so
   the page feels alive without anything actually moving around. */
.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.8s ease, transform 9s ease-out;
}
.hero-slide.on { opacity: 1; transform: scale(1.11); }
/* Before any photograph has loaded: a deep harbour-blue wash. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 80% at 70% 20%, #1d4a78 0%, transparent 60%),
    linear-gradient(160deg, #0c2340 0%, #102d4e 55%, #0a1c33 100%);
}
/* Shade so the words read on any photograph. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 20, 36, .35) 0%, rgba(8, 20, 36, .15) 35%, rgba(8, 20, 36, .55) 75%, rgba(8, 20, 36, .8) 100%),
    linear-gradient(90deg, rgba(8, 20, 36, .45) 0%, transparent 65%);
}

.hero-inner { width: 100%; padding-block: 72px 140px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase; font-weight: 500;
  color: rgba(255, 255, 255, .85); margin: 0 0 22px;
}
.hero-eyebrow::before { content: ""; width: 36px; height: 1px; background: rgba(255, 255, 255, .7); }
.hero-title {
  font-family: var(--serif); font-weight: 500; margin: 0;
  font-size: clamp(44px, 7.2vw, 92px); line-height: 1.02; letter-spacing: -.01em;
  max-width: 20ch; text-wrap: balance;
}
.hero-title em { font-style: italic; font-weight: 500; color: #f3e6c8; }
.hero-lede {
  margin: 26px 0 0; max-width: 54ch;
  font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.75; font-weight: 300;
  color: rgba(255, 255, 255, .9);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .03em;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-btn.solid { background: #fff; color: var(--navy); border: 1px solid #fff; }
.hero-btn.solid:hover { background: #f3e6c8; border-color: #f3e6c8; transform: translateY(-1px); }
.hero-btn.ghost { background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(4px); }
.hero-btn.ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.hero-btn .arrow { display: inline-block; transition: transform .2s ease; }
.hero-btn.solid:hover .arrow { transform: translateY(2px); }

/* The three promises along the bottom of the photograph. */
.hero-points {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(0deg, rgba(8, 20, 36, .55), rgba(8, 20, 36, .15));
  backdrop-filter: blur(3px);
}
.hero-points .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-point { padding: 20px 22px 22px 0; }
.hero-point + .hero-point { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
.hero-point b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.15; }
.hero-point > span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .75); margin-top: 3px; }

.hero-cue {
  position: absolute; right: 28px; bottom: 112px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45); background: transparent; cursor: pointer;
  animation: cue 2.4s ease-in-out infinite;
}
.hero-cue::before {
  content: ""; position: absolute; left: 50%; top: 45%; width: 9px; height: 9px;
  border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Entrance: the words settle in one after another. */
.hero .rise { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero .rise.d1 { animation-delay: .1s; }
.hero .rise.d2 { animation-delay: .25s; }
.hero .rise.d3 { animation-delay: .4s; }
.hero .rise.d4 { animation-delay: .55s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* A quiet line between the welcome and the search. */
.intro-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.intro-strip .wrap { padding-block: 26px 22px; text-align: center; }
.intro-strip p { margin: 0 auto; max-width: 62ch; font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--ink); }
.intro-strip small { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }

/* The floating Map button has nothing to do while the guest is still on the
   welcome, so it waits until the rentals are in view. */
body.inhero .mfab { opacity: 0; pointer-events: none; }
.mfab { transition: opacity .25s ease; }

@media (max-width: 760px) {
  .hero-inner { padding-block: 56px 190px; }
  .hero-eyebrow { font-size: 10px; letter-spacing: .26em; margin-bottom: 18px; }
  .hero-eyebrow .eb2 { display: none; }
  .hero-lede { line-height: 1.65; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-btn { padding-block: 14px; }
  .hero-points .wrap { grid-template-columns: 1fr 1fr 1fr; padding-inline: 12px; }
  .hero-point, .hero-point + .hero-point { padding: 14px 8px 16px; }
  .hero-point b { font-size: 19px; }
  .hero-point > span { font-size: 11px; line-height: 1.35; }
  .hero-cue { display: none; }
  .intro-strip p { font-size: 19px; }
  /* The brand name and the phone share a narrow bar. */
  .brand .name { font-size: 11px; letter-spacing: .1em; }
  .brand .name em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.on { transform: none; transition: opacity .6s ease; }
  .hero .rise { opacity: 1; transform: none; animation: none; }
  .hero-cue { animation: none; }
}