/* =========================================================================
   Lola Villa & Latitude House — King Island
   Hand-editable stylesheet. No build step. Edit freely.
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  --cream: #f6f5f2;
  --ink: #0d0e26;
  --indigo: #41425f;
  --slate: #56545f;
  --grey: #dcdad7;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", system-ui, -apple-system, sans-serif;

  --max: 1152px; /* content container width */
}

/* ---- Reset / base ----------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* no font inflation in landscape */
  -webkit-tap-highlight-color: transparent; /* kill the grey flash on tap */
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Controls: fire clicks instantly, don't select-on-long-press, no double-tap zoom */
.btn,
.nav-link,
.nav-overlay a,
.hamburger,
.see-more,
.carousel-btn {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* iOS zooms the page when a focused input's font is under 16px. Only an issue
   on touch, so keep the smaller desktop size and bump it up on coarse pointers. */
@media (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

h1,
h2,
h3 {
  font-family: var(--serif);
  line-height: 1.1;
  font-weight: 700;
}

::selection {
  background: var(--ink);
  color: var(--cream);
}

/* ---- Helpers ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: clamp(72px, 10vw, 128px);
}

.bg-cream { background: var(--cream); }
.bg-grey { background: var(--grey); }
.bg-slate { background: var(--slate); color: var(--cream); }

.btn {
  display: inline-block;
  padding: 18px 48px;
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: background-color 0.3s, color 0.3s, opacity 0.3s;
}
.btn-light {
  background: var(--cream);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(13, 14, 38, 0.15);
}
.btn-dark {
  background: var(--indigo);
  color: var(--cream);
}
/* Press feedback on every input type (hover is mouse-only, see block below) */
.btn:active { transform: scale(0.98); }

/* ---- Scroll reveal ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   Navigation
   ========================================================================= */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
}

/* Desktop: compact, centred cluster */
.nav-desktop {
  display: none;
  max-width: 860px;
  margin-inline: auto;
  padding: 28px 24px;
  align-items: center;
  justify-content: space-between;
}
.nav-link {
  position: relative;
  font-size: clamp(0.9rem, 1.25vw, 1.2rem);
  color: var(--ink);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform 0.3s;
}
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Mobile bar */
.nav-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}
.nav-brand {
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: 0.15em;
}
.hamburger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburger span {
  width: 28px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .hamburger span:nth-child(2) { opacity: 0; }
.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.nav-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}
.nav-overlay a {
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
}

/* =========================================================================
   Hero (shared: full-bleed video)
   ========================================================================= */
.hero {
  position: relative;
  height: 150svh; /* svh = stable, never cut off by the mobile URL bar */
  color: var(--cream);
  background: var(--ink);
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.hero-sticky video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), transparent 40%, rgba(0,0,0,0.15));
}
.hero-content {
  margin-top: -100svh;
  position: relative;
  z-index: 10;
}
.hero-block-a {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 0;
  text-align: center;
}
.hero-logo {
  height: 128px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.15));
}
.hero-wordmark-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-wordmark {
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}
.hero-wordmark span {
  display: block;
  font-size: clamp(2.6rem, 9vw, 8rem);
}
.hero-wordmark .amp { font-weight: 400; }
.hero-kingisland {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 2.75rem);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: rgba(246, 245, 242, 0.95);
}
.hero-tagline {
  margin-bottom: 40px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.3vw, 2.3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.hero-block-b {
  height: 50svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 24px;
  text-align: center;
}
.hero-intro {
  max-width: 42rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.35;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.hero-block-b .btn { margin-top: 40px; }

@media (min-width: 640px) { .hero-logo { height: 160px; } }
@media (min-width: 1024px) { .hero-logo { height: 184px; } }

/* =========================================================================
   Home — "Chasing the Wild Blue" (two column)
   ========================================================================= */
.split {
  display: grid;
  align-items: stretch;
}
.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 24px;
}
.split-text .inner { max-width: 36rem; margin-inline: auto; width: 100%; }
.split-img {
  position: relative;
  min-height: 60vh;
}
.split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
}
.split .body { margin-top: 32px; }
.split .body p { margin-top: 24px; font-size: clamp(1rem, 1.3vw, 1.32rem); }
.split .body p:first-child { margin-top: 0; }

@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-text { padding: 112px 40px; }
  .split-img { min-height: 100%; }
  .split-text.pad-lg { padding-inline: 80px; }
}

/* =========================================================================
   Carousel (home + property galleries) — auto-scroll
   ========================================================================= */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  position: relative;
  flex: 0 0 auto;
  width: 85%;
  aspect-ratio: 558 / 419;
}
.carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* portrait galleries on property pages */
.carousel.portrait .carousel-slide { aspect-ratio: 536 / 714; width: 70%; }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(246, 245, 242, 0.85);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
.carousel-btn:active { background: var(--cream); }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }

@media (min-width: 640px) {
  .carousel-slide { width: 48%; }
  .carousel.portrait .carousel-slide { width: 38%; }
  .carousel-prev { left: 24px; }
  .carousel-next { right: 24px; }
}
@media (min-width: 1024px) {
  .carousel-slide { width: 38%; }
  .carousel.portrait .carousel-slide { width: 27%; }
}

/* =========================================================================
   Centered section (front row / experience titles)
   ========================================================================= */
.centered { text-align: center; }
.centered h2 {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.1;
}
.centered .lead {
  margin: 32px auto 0;
  max-width: 48rem;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
}
.measure-5 { max-width: 64rem; margin-inline: auto; }

/* =========================================================================
   Inquiry form
   ========================================================================= */
.inquiry-head { text-align: center; margin-bottom: 32px; }
.inquiry-head .names {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
}
.inquiry-head .sub {
  margin-top: 8px;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(13, 14, 38, 0.6);
}
.form { max-width: 42rem; margin-inline: auto; }
.form .row { display: grid; gap: 20px; }
.form label {
  display: block;
  font-size: 0.8rem;
  color: rgba(13, 14, 38, 0.7);
  margin-bottom: 6px;
}
.form .req { color: rgba(13, 14, 38, 0.4); }
.form input,
.form textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: #ececef;
  border: 1px solid rgba(13, 14, 38, 0.15);
  outline: none;
  transition: border-color 0.2s;
}
.form input:focus,
.form textarea:focus { border-color: rgba(13, 14, 38, 0.4); }
.form textarea { resize: none; }
.form .field { margin-top: 20px; }
.form fieldset { border: 0; margin-top: 20px; }
.form .radio { display: flex; align-items: center; gap: 12px; margin-top: 12px; cursor: pointer; }
.form .radio input { width: auto; accent-color: var(--ink); }
.form .submit { width: 100%; margin-top: 20px; padding-block: 16px; }
.form-thanks {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ececef;
  border: 1px solid rgba(13, 14, 38, 0.1);
  padding: 32px;
}
.form-thanks h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.form-thanks p { margin-top: 12px; max-width: 24rem; color: rgba(13, 14, 38, 0.7); }
.hidden { display: none; }

@media (min-width: 640px) {
  .form .row { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Video banner (full-bleed)
   ========================================================================= */
.video-banner {
  position: relative;
  height: 85svh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--cream);
  text-align: center;
}
.video-banner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
.video-banner .inner { position: relative; z-index: 10; padding-inline: 24px; }
.video-banner h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.video-banner .btn { margin-top: 40px; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  background: var(--cream);
  text-align: center;
  padding: 80px 24px 64px;
}
.footer-logo { height: 140px; width: auto; margin-inline: auto; }
.footer-wordmark {
  margin-top: 40px;
  font-size: clamp(2.6rem, 9vw, 7rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
}
.footer-wordmark .amp { font-weight: 400; }
.footer-contact { margin-top: 48px; color: rgba(13, 14, 38, 0.9); }
.footer-contact p { margin-top: 16px; font-size: 1.05rem; }
.footer-legal { margin-top: 56px; font-size: 0.95rem; color: rgba(13, 14, 38, 0.7); }
@media (min-width: 640px) { .footer-logo { height: 176px; } }

/* =========================================================================
   Property pages
   ========================================================================= */
.prop-intro { text-align: center; }
.prop-intro h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.prop-intro .tagline { margin: 24px auto 0; max-width: 42rem; font-size: clamp(1.05rem, 1.4vw, 1.35rem); }
.prop-intro .lead { margin: 20px auto 0; max-width: 56rem; font-size: clamp(1rem, 1.3vw, 1.3rem); color: rgba(13, 14, 38, 0.9); }

.feature-grid {
  display: grid;
  gap: 56px 40px;
}
.feature img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.feature h3 { margin-top: 20px; font-size: 1.5rem; }
.feature p { margin-top: 12px; color: rgba(13, 14, 38, 0.9); }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.audiences h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; white-space: pre-line; }
.audiences .divider { width: 320px; max-width: 100%; height: 1px; background: rgba(13, 14, 38, 0.2); margin-top: 32px; }
.audience-grid { display: grid; gap: 56px 64px; margin-top: 48px; }
.audience h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.audience p { margin-top: 16px; max-width: 28rem; color: rgba(13, 14, 38, 0.9); }
@media (min-width: 640px) { .audience-grid { grid-template-columns: 1fr 1fr; } }

/* King Island treasures (dark) */
.treasures h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.1; }
.treasures .lead { margin-top: 32px; max-width: 56rem; }
.treasures .lead p { margin-top: 20px; color: rgba(246, 245, 242, 0.85); }
.treasures .lead p:first-child { margin-top: 0; }
.treasure-grid { display: grid; gap: 20px; margin-top: 48px; }
.treasure-card { background: var(--cream); color: var(--ink); padding: 24px; }
.treasure-card h3 { font-size: 1.125rem; }
.treasure-card h3 a { text-decoration: underline; text-decoration-color: rgba(13,14,38,0.4); text-underline-offset: 4px; }
.treasure-card p { margin-top: 12px; font-size: 0.875rem; color: rgba(13, 14, 38, 0.75); }
@media (min-width: 640px) { .treasure-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .treasure-grid { grid-template-columns: repeat(3, 1fr); } }

/* Specs */
.specs h2 { text-align: center; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.spec-list { margin-top: 56px; }
.spec-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(13, 14, 38, 0.15);
}
.spec-row dt { font-family: var(--serif); font-weight: 700; font-size: 1.125rem; }
.spec-row dd { color: rgba(13, 14, 38, 0.9); }
@media (min-width: 640px) {
  .spec-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }
}

.mid h2, .closing h2 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1.1; white-space: pre-line; }
.mid .body, .closing .body { margin-top: 32px; }
.mid .body p, .closing .body p { margin-top: 20px; color: rgba(13, 14, 38, 0.9); }
.mid .body p:first-child, .closing .body p:first-child { margin-top: 0; }
.mid .btn, .closing .btn { margin-top: 40px; }

/* =========================================================================
   Book page
   ========================================================================= */
.book-hero { position: relative; height: 70svh; min-height: 460px; overflow: hidden; }
.book-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book-title { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.05; }
.book-grid { display: grid; gap: 56px; margin-top: 64px; }
.property-block h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.property-block .blurb { margin-top: 20px; max-width: 36rem; color: rgba(13, 14, 38, 0.9); }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 32px; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.see-more {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 16px;
  text-align: center;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid rgba(13, 14, 38, 0.2);
  transition: background-color 0.3s, color 0.3s;
}
.book-banner { position: relative; height: 60vh; min-height: 380px; overflow: hidden; }
.book-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .book-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* =========================================================================
   Contact page
   ========================================================================= */
.contact-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2538 / 794;
  min-height: 300px;
  overflow: hidden;
}
.contact-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.get-in-touch { text-align: center; }
.get-in-touch h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.get-in-touch .details { margin-top: 40px; color: rgba(13, 14, 38, 0.9); }
.get-in-touch .details p { margin-top: 20px; font-size: 1.05rem; }
.get-in-touch .welcome { margin: 32px auto 0; max-width: 36rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); color: rgba(13, 14, 38, 0.8); }
.helicopter { display: grid; gap: 48px; align-items: center; }
.helicopter h2 { font-size: clamp(2rem, 4vw, 3rem); }
.helicopter .body { margin-top: 32px; }
.helicopter .body p { margin-top: 24px; color: rgba(246, 245, 242, 0.85); }
.helicopter .body p:first-child { margin-top: 0; }
.helicopter .body ul { margin-top: 12px; list-style: none; }
.helicopter .body ul li { margin-top: 8px; }
.helicopter .body .strong { font-weight: 600; color: var(--cream); }
.helicopter-img { position: relative; width: 100%; aspect-ratio: 1215 / 839; overflow: hidden; }
.helicopter-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .helicopter { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* order helper for alternating split sections */
.split.img-left .split-img { order: -1; }
@media (max-width: 767px) { .split.img-left .split-img { order: 0; } }

/* ---- Home inquiry (two column: details + form) ------------------------ */
.inquiry-split { display: grid; gap: 56px; max-width: var(--max); margin-inline: auto; }
.plan-escape { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }
.contact-block { margin-top: 48px; }
.contact-block h3 { font-size: 1.5rem; }
.contact-block .lines { margin-top: 24px; color: rgba(13, 14, 38, 0.9); }
.contact-block .lines p { margin-top: 20px; font-size: 1.05rem; line-height: 1.6; }
.contact-block .lines p:first-child { margin-top: 0; }
@media (min-width: 768px) { .inquiry-split { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* =========================================================================
   Mobile hardening
   ========================================================================= */

/* All :hover effects live here so they never stick after a tap on touch
   devices. Touch users get :active press feedback instead (above). */
@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { background: var(--ink); color: var(--cream); }
  .btn-dark:hover { opacity: 0.9; }
  .nav-link:hover::after { transform: scaleX(1); }
  .carousel-btn:hover { background: var(--cream); }
  .treasure-card h3 a:hover { text-decoration-color: var(--ink); }
  .see-more:hover { background: var(--ink); color: var(--cream); }
}

/* Keep the fixed mobile bar and menu clear of the notch / Dynamic Island.
   env() needs viewport-fit=cover in the page <meta> to be non-zero. */
.nav-mobile { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.nav-overlay { padding-top: env(safe-area-inset-top, 0px); }