/* ============================================================
   THE ARNISTON COLLECTION — Design tokens
   ============================================================ */
:root{
  --paper:      #F7F5F0;
  --paper-warm: #F1EBE0;
  --stone:      #E9E2D3;
  --ink:        #1B1B17;
  --ink-soft:   #34322C;
  --graphite:   #6E6A61;
  --ocean:      #2F5C63;
  --ocean-deep: #1D3A40;
  --gold:       #B99B62;
  --gold-soft:  #D9C6A0;
  --white:      #FFFFFF;

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-hero: "Playfair Display", "Iowan Old Style", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --container-w: 1360px;
  --edge: clamp(20px, 5vw, 72px);
  --section-pad: clamp(36px, 5vw, 64px);

  --ease-out: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font-family: inherit; }

.container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--edge);
}

::selection{ background: var(--ocean); color: var(--paper); }

:focus-visible{
  outline: 2px solid var(--ocean);
  outline-offset: 3px;
}

/* film-grain overlay */
.grain{
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Typography helpers
   ============================================================ */
.eyebrow{
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ocean);
  margin: 0 0 1em;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

h2{
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 350;
  line-height: 1.08;
}

.text-link{
  display:inline-block;
  font-size: .92rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ocean);
  padding-bottom: 2px;
  transition: opacity .3s var(--ease-out), border-color .3s var(--ease-out);
}
.text-link:hover{ opacity:.65; }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(14px,2vw,20px) var(--edge);
  background: rgba(247,245,240,.72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(27,27,23,.06);
}

.wordmark{
  display:flex; flex-direction:column;
  font-family: var(--font-display);
  font-size: .95rem;
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--ink);
}
.wordmark span:first-child{ font-style: italic; font-weight: 500; }
.wordmark span:last-child{ font-size: .7rem; text-transform: uppercase; letter-spacing: .22em; color: var(--graphite); }

.main-nav{ display:flex; gap: clamp(20px,2.5vw,40px); }
.main-nav a{
  font-size: .84rem; font-weight: 500; letter-spacing: .02em;
  position: relative; padding-bottom: 3px;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--ocean); transition: right .35s var(--ease-out);
}
.main-nav a:hover::after{ right:0; }

.btn-pill{
  border:1px solid var(--ink); border-radius: 999px;
  padding: .62em 1.4em; font-size: .82rem; font-weight: 500;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.btn-pill:hover{ background: var(--ink); color: var(--paper); }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:32px; height:22px; padding:0; position:relative;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background:var(--ink);
}
.nav-toggle span:first-child{ top:2px; }
.nav-toggle span:last-child{ bottom:2px; }

.mobile-nav{
  display:none;
  position: fixed; inset: 0; z-index: 45;
  background: var(--paper-warm);
  flex-direction: column; align-items:flex-start; justify-content:center;
  gap: 1.4rem; padding: var(--edge);
  transform: translateY(-100%);
  transition: transform .5s var(--ease-out);
}
.mobile-nav.open{ transform: translateY(0); }
.mobile-nav a{ font-family: var(--font-display); font-size: 2.2rem; font-style: italic; }

/* ============================================================
   Hero
   ============================================================ */
.hero-frame{ position: relative; }
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  padding: 0 var(--edge);
  background:
    linear-gradient(180deg, rgba(6,14,16,.56) 0%, rgba(6,14,16,.4) 25%, rgba(6,12,14,.42) 55%, rgba(4,10,12,.6) 100%),
    radial-gradient(ellipse 68% 52% at 50% 42%, rgba(4,10,10,.42), transparent 72%),
    url("../images/hero-cave.jpg") center 48% / cover no-repeat;
}
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  mix-blend-mode: soft-light;
  opacity: .8;
}
.hero-inner{ position:relative; z-index:2; max-width: 900px; }
.hero .eyebrow{ color: var(--gold-soft); text-shadow: 0 2px 16px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); }
.hero-headline{ color: var(--paper); text-shadow: 0 4px 30px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35); }
.hero-headline em{ color: var(--gold-soft); font-weight: 500; }
.hero-sub{ color: rgba(247,245,240,.92); text-shadow: 0 2px 16px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); }
.scroll-cue-line{ background: rgba(247,245,240,.35); }
.scroll-cue-label{ color: rgba(247,245,240,.7); text-shadow: 0 1px 8px rgba(0,0,0,.35); }

.eyebrow.reveal-fade, .hero-sub.reveal-fade{
  opacity:0; transform: translateY(12px);
}

.hero-headline{
  font-family: var(--font-hero);
  font-size: clamp(2.4rem, 6.8vw, 5.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: .3em 0 .5em;
}
.hero-headline .line{ display:block; overflow:hidden; }
.hero-headline .line-inner{ display:block; transform: translateY(110%); }

.hero-sub{
  max-width: 46ch; margin: 0 auto;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.scroll-cue{
  position:absolute; left:50%; bottom: clamp(20px,3vw,40px); transform: translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue-line{ width:1px; height:42px; background: var(--graphite); position:relative; overflow:hidden; }
.scroll-cue-line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--ocean);
  animation: scrollDrip 2.2s ease-in-out infinite;
}
@keyframes scrollDrip{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}
.scroll-cue-label{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--graphite); }

/* ============================================================
   Booking bar
   ============================================================ */
.booking-bar{
  position:absolute; left: 50%; bottom:0; transform: translate(-50%, 50%);
  z-index: 3;
  display:flex; align-items:stretch;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(20,24,20,.22), 0 2px 8px rgba(20,24,20,.08);
  padding: .4rem .5rem;
  width: min(920px, calc(100% - var(--edge) * 2));
  opacity: 0;
}
.booking-field{
  flex: 1;
  display:flex; flex-direction:column; justify-content:center;
  padding: .55em 1.2em;
  min-width: 0;
  border-radius: 6px;
  transition: background .25s var(--ease-out);
}
.booking-field:hover{ background: var(--paper-warm); }
.booking-field:focus-within{ background: var(--paper-warm); box-shadow: inset 0 0 0 1.5px rgba(47,92,99,.3); }
.booking-field label{
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--graphite); margin-bottom:.3em;
}
.booking-value{ font-size:.92rem; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.booking-field input{
  border:none; background:transparent; padding:0; font-size:.92rem; color: var(--ink); width:100%; font-family: inherit;
}
.booking-field input:focus{ outline:none; }
.booking-field-guests{ flex: 0 0 130px; }
.booking-divider{ width:1px; background: var(--stone); margin: .5em 0; flex-shrink:0; }

.stepper{ display:flex; align-items:center; gap: .7em; }
.stepper-btn{
  width: 24px; height: 24px; flex-shrink:0; border-radius: 50%;
  border: 1px solid var(--stone); background: var(--white); color: var(--ink);
  font-size: .95rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: border-color .25s, background .25s, color .25s, opacity .25s;
}
.stepper-btn:hover:not(:disabled){ border-color: var(--ocean); color: var(--ocean); }
.stepper-btn:disabled{ opacity: .35; cursor:not-allowed; }
.stepper-value{ font-size:.92rem; color: var(--ink); min-width: 1.2em; text-align:center; }

.btn-reserve{
  flex-shrink:0; align-self:center; margin-left: .4em;
  background: var(--ocean); color: var(--paper); border:none; border-radius: 6px;
  padding: 0 1.8em; height: 46px; font-size:.85rem; font-weight:600; letter-spacing:.03em;
  cursor:pointer; transition: background .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  box-shadow: 0 8px 20px rgba(47,92,99,.22);
}
.btn-reserve:hover{ background: var(--ocean-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(29,58,64,.3); }
.btn-reserve:active{ transform: translateY(0); }

.form-flash{ animation: formFlash 1.4s ease-out; }
@keyframes formFlash{
  0%{ box-shadow: 0 0 0 3px rgba(47,92,99,.5); } 100%{ box-shadow: 0 0 0 0 rgba(47,92,99,0); }
}

@media (max-width: 780px){
  .booking-bar{
    flex-direction:column; box-shadow: 0 12px 30px rgba(20,24,20,.22);
    width: calc(100% - var(--edge) * 1.4);
    bottom: 0; transform: translate(-50%, 60%);
  }
  .booking-field{ padding: .8em 1em; }
  .booking-divider{ width:auto; height:1px; margin: 0 1em; }
  .btn-reserve{ margin: .6em .5em .3em; height: 48px; }
  .hero{ padding-bottom: 130px; }
}

/* ============================================================
   Reveal utility (GSAP-driven)
   ============================================================ */
.reveal{ opacity:0; transform: translateY(28px); }

/* ============================================================
   Intro / About
   ============================================================ */
.intro{ padding: clamp(20px,2.6vw,36px) 0; background: var(--paper); }
.intro-grid{
  display:grid; grid-template-columns: 0.7fr 1.5fr 1fr; gap: clamp(24px,5vw,64px); align-items:start;
}
.intro-image{ margin:0; }
.intro-image-inner{ aspect-ratio: 3/4; border-radius:2px; position:relative; overflow:hidden; }
.intro-image figcaption{ margin-top:.7em; font-size:.78rem; color: var(--graphite); letter-spacing:.02em; }
.intro-label{ position:relative; }
.intro-mark{
  display:block; font-family: var(--font-display); font-style: italic;
  font-size: 4rem; color: var(--gold); line-height:1; margin-top: .2em;
}
.intro-copy p{
  font-family: var(--font-display); font-weight: 350;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 1em;
}
.intro-copy p:last-child{ margin-bottom:0; }

/* ============================================================
   Things to do
   ============================================================ */
.todo-section{ padding: clamp(20px,2.6vw,36px) 0 clamp(36px,5vw,64px); background: var(--paper); }

.todo-grid{
  margin-top: clamp(28px,4vw,48px);
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--stone);
  border: 1px solid var(--stone);
}
.todo-card{
  background: var(--paper); padding: clamp(24px,3vw,34px) clamp(20px,2.6vw,28px);
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
  position: relative;
}
.todo-card:hover{ background: var(--paper-warm); transform: translateY(-3px); z-index: 1; box-shadow: 0 16px 34px rgba(20,24,20,.1); }
.todo-index{ display:block; font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1rem; margin-bottom: .6em; }
.todo-card h3{ font-size: 1.15rem; font-weight: 500; margin: 0 0 .5em; line-height: 1.3; }
.todo-card p{ font-size: .9rem; color: var(--graphite); line-height: 1.6; margin: 0; }
.todo-seasonal{
  display: inline-block; margin-left: .5em; vertical-align: middle;
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--ocean); border: 1px solid var(--ocean); border-radius: 999px; padding: .25em .6em;
}

/* ============================================================
   Map
   ============================================================ */
.map-section{ padding: clamp(36px,5vw,64px) 0 clamp(20px,2.6vw,36px); background: var(--paper-warm); }
.map-frame{
  position: relative; margin-top: clamp(28px,4vw,48px);
  border-radius: 4px; overflow: hidden; aspect-ratio: 2/1;
  box-shadow: 0 24px 60px rgba(20,24,20,.1);
}
.map-image{ width:100%; height:100%; object-fit: cover; object-position: 50% 0%; display:block; }

.map-pin{
  position: absolute; transform: translate(-50%, -100%);
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .4em;
}
.map-pin-dot{
  width: 14px; height: 14px; border-radius: 50%; background: var(--ocean);
  border: 2px solid var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,.3);
  position: relative;
}
.map-pin-dot::after{
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--ocean); opacity: .55;
  animation: mapPinPulse 2.6s ease-out infinite;
}
.map-pin-beach .map-pin-dot, .map-pin-beach .map-pin-dot::after{ background: var(--gold); border-color: var(--gold); }
.map-pin-beach .map-pin-dot{ background: var(--gold); }
.map-pin-food .map-pin-dot{ background: #A8542E; }
.map-pin-food .map-pin-dot::after{ border-color: #A8542E; }
.map-pin-shop .map-pin-dot{ background: var(--ink-soft); }
.map-pin-shop .map-pin-dot::after{ border-color: var(--ink-soft); }
@keyframes mapPinPulse{
  0%{ transform: scale(.8); opacity: .55; } 100%{ transform: scale(2.1); opacity: 0; }
}
.map-pin-label{
  font-size: .72rem; letter-spacing: .02em; color: var(--ink); white-space: nowrap;
  background: rgba(247,245,240,.94); padding: .35em .7em; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.map-pin:hover .map-pin-label, .map-pin:focus-visible .map-pin-label{ opacity: 1; transform: translateY(0); }
.map-note{ margin-top: 1.2em; font-size: .8rem; color: var(--graphite); text-align: center; }

@media (prefers-reduced-motion: reduce){
  .map-pin-dot::after{ animation: none; }
}

/* ============================================================
   Gallery
   ============================================================ */
.gallery-section{ padding: clamp(20px,2.6vw,36px) 0 clamp(36px,5vw,64px); background: var(--paper-warm); }
.section-head{ margin-bottom: clamp(32px,5vw,64px); max-width: 640px; }
.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap: 1.5em; max-width: none; flex-wrap: wrap; }

.gallery-view-all{
  background:none; border:none; padding:0; font-family: inherit; cursor:pointer; white-space: nowrap;
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 11vw;
  gap: clamp(10px,1.4vw,22px);
}
.gallery-tile{
  margin:0; position:relative; overflow:hidden; border-radius: 2px; clip-path: inset(0 0 0 0);
  border:none; padding:0; background:none; font-family: inherit; cursor:pointer; display:block; width:100%; height:100%;
}
.tile-a{ grid-column: 1 / 3; grid-row: 1 / 3; }
.tile-b{ grid-column: 3 / 4; grid-row: 1 / 4; }
.tile-c{ grid-column: 3 / 4; grid-row: 4 / 7; }
.tile-d{ grid-column: 1 / 2; grid-row: 3 / 5; }
.tile-e{ grid-column: 2 / 3; grid-row: 3 / 5; }
.tile-f{ grid-column: 1 / 3; grid-row: 5 / 7; }

.tile-media{
  position:absolute; inset: -6% -6%; /* overscan for parallax */
  background-size: cover;
  transition: opacity .5s var(--ease-out);
}
.gallery-tile-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1em 1.1em;
  font-size: .78rem; letter-spacing:.03em; color: var(--paper); text-align: left;
  background: linear-gradient(to top, rgba(20,22,18,.55), transparent);
  opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.gallery-tile:hover .gallery-tile-caption, .gallery-tile:focus-visible .gallery-tile-caption{ opacity:1; transform: translateY(0); }

/* photography */
.img-gallery-door{ background: #cbb98f url("../images/gallery-cottage-door.jpg") center / cover no-repeat; }
.img-gallery-pebbles{ background: #7d8a8c url("../images/gallery-pebble-beach.jpg") center / cover no-repeat; }
.img-gallery-waves{ background: #8fb3c2 url("../images/gallery-beach-waves.jpg") center / cover no-repeat; }
.img-gallery-sunset-burst{ background: #b5723a url("../images/gallery-sunset-burst.jpg") center / cover no-repeat; }
.img-gallery-thatch{ background: #a9c2cf url("../images/gallery-thatched-cottage.jpg") center / cover no-repeat; }
.img-gallery-boardwalk{ background: #c9d3c0 url("../images/gallery-boardwalk.jpg") center / cover no-repeat; }
.img-manitoka{ background: #a9c3d6 url("https://travelground.imgix.net/AAEAAQAAAAAAAAAAAAAA7275ac547087cdff562b730905011a908517f2381d381f3df5d152db31c30803ce0d7a2d1832f84ccaa6820ef4559104ad32?fit=crop&auto=enhance,format,compress&q=80&w=1400") center / cover no-repeat; }
.img-uiteindelik{ background: #cfd9c2 url("https://travelground.imgix.net/AAEAAQAAAAAAAAAAAAAA9c783446b432ca39a625564040d6a756c7e9ae6af2f0a971687c4e54fec569a84004fc90319ffee5d8f696bf9f92be13d8c7?fit=crop&auto=enhance,format,compress&q=80&w=1400") center / cover no-repeat; }
.img-britzies{ background: #7a8a6a url("https://travelground.imgix.net/AAEAAQAAAAAAAAAAAAAA33c448e5e3ceac0bf08dc8330a4c65511091ce9bd316261630d3dc6a378b029eab051356ec965e7434851bf9176117109798?fit=crop&auto=enhance,format,compress&q=80&w=1400") center / cover no-repeat; }
.img-cave{ background: #23262b url("https://images.unsplash.com/photo-1578583817574-8d4c55c02b06?w=1200&q=80&auto=format&fit=crop") center / cover no-repeat; }
.img-smidgen{ background: #3c2f22 url("https://travelground.imgix.net/AAEAAQAAAAAAAAAAAAAA600f8eb1bdecc93287710b5ae455c8e8b435414819ef8795a9ec2bb491fa0b28eb91ba75b4e61b5e6aac8ec53b6d897a3543?fit=crop&auto=enhance,format,compress&q=80&w=1400") center / cover no-repeat; }

/* ============================================================
   Houses
   ============================================================ */
.houses-section{ padding: clamp(48px,7vw,84px) 0 clamp(20px,2.6vw,36px); background: var(--paper); }

.houses-grid{
  margin-top: clamp(24px,4vw,44px);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px,2.6vw,32px);
}

.house-card{
  display:block; text-align:left; background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family: inherit; width:100%;
}
.house-card-media{
  aspect-ratio: 4/5; border-radius: 4px; overflow:hidden; position:relative;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.house-card:hover .house-card-media{ transform: translateY(-4px); box-shadow: 0 22px 40px rgba(20,24,20,.16); }

.house-card-body{ padding-top: .9em; }
.house-card-tag{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--graphite); margin: 0 0 .4em;
}
.house-card-name{
  font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 400; font-style: italic; color: var(--ocean);
  margin: 0 0 .35em;
}
.house-card-facts{ font-size:.85rem; color: var(--ink-soft); margin: 0 0 .45em; }
.house-card-price{ font-size:.95rem; color: var(--ink); margin:0; font-weight: 500; }
.house-card-price span{ font-weight: 400; color: var(--graphite); }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials{
  padding: clamp(32px,4.5vw,56px) 0; color: var(--paper); text-align:center; position:relative;
  background:
    linear-gradient(160deg, rgba(15,25,27,.88), rgba(29,58,64,.9)),
    url("https://images.unsplash.com/photo-1710509382655-36e77e97dd40?w=2000&q=75&auto=format&fit=crop") center / cover no-repeat;
  background-attachment: fixed;
}
.testimonials .eyebrow{ color: var(--gold-soft); }
.quote-stage{ position:relative; min-height: 170px; max-width: 780px; margin: 0 auto; }
.quote{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden; transition: opacity .7s var(--ease-out);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.4em;
}
.quote.active{ opacity:1; visibility:visible; }
.quote p{
  font-family: var(--font-display); font-style: italic; font-weight: 350;
  font-size: clamp(1.4rem, 2.8vw, 2.15rem); line-height:1.42; margin:0;
}
.quote cite{ font-style:normal; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-soft); }

.quote-dots{ display:flex; justify-content:center; gap: .6em; margin-top: 1.6em; }
.quote-dot{
  width:8px; height:8px; border-radius:50%; border: 1px solid var(--gold-soft);
  background: transparent; cursor:pointer; padding:0; transition: background .3s;
}
.quote-dot.active{ background: var(--gold-soft); }

/* ============================================================
   Inquire
   ============================================================ */
.inquire-section{ padding: clamp(36px,5vw,64px) 0; background: var(--paper-warm); }
.inquire-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,6vw,100px); }
.inquire-copy{ color: var(--graphite); max-width: 42ch; margin: 1.2em 0 2.2em; line-height:1.65; font-size: 1.08rem; }

.contact-block p{ margin:0 0 .7em; font-size:.95rem; }
.contact-block span{ display:inline-block; width: 92px; color: var(--graphite); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.contact-block a{ border-bottom: 1px solid transparent; transition: border-color .3s; }
.contact-block a:hover{ border-color: currentColor; }

.inquire-form{
  background: var(--white); padding: clamp(26px,4vw,46px); border-radius: 10px; position:relative;
  box-shadow: 0 24px 60px rgba(20,24,20,.08), 0 2px 10px rgba(20,24,20,.05);
  border: 1px solid rgba(27,27,23,.06);
}
.form-row{ margin-bottom: 1.3em; }
.form-row-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.form-row label{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--graphite); margin-bottom:.55em; }
.form-row label .req{ color: var(--gold); margin-left:.2em; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; border: 1px solid var(--stone); border-radius: 7px; background: var(--paper);
  padding: .85em 1em; font-size: .96rem; color: var(--ink); font-family: inherit;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
}
.form-row select{ cursor:pointer; }
.form-row textarea{ resize: vertical; min-height: 5.5em; }
.form-row input:hover, .form-row select:hover, .form-row textarea:hover{ border-color: #cfc6b0; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color: var(--ocean); outline:none; background: var(--white);
  box-shadow: 0 0 0 3px rgba(47,92,99,.14);
}

.btn-submit{
  margin-top: .8em; width:100%; background: var(--ink); color: var(--paper);
  border:none; border-radius: 999px; padding: 1.05em 1.4em; font-size: .9rem; font-weight:600;
  letter-spacing:.04em; cursor:pointer; transition: background .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  box-shadow: 0 10px 24px rgba(20,24,20,.16);
}
.btn-submit:hover{ background: var(--ocean); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(47,92,99,.28); }
.btn-submit:disabled{ opacity: .6; cursor: default; transform: none; box-shadow: 0 10px 24px rgba(20,24,20,.16); }
.btn-submit:active{ transform: translateY(0); }

.form-success{
  margin-top: 1em; font-size:.88rem; color: var(--ocean);
  opacity:0; height:0; overflow:hidden; transition: opacity .4s;
}
.form-success.visible{ opacity:1; height:auto; }

/* ============================================================
   Gallery lightbox
   ============================================================ */
.gallery-lightbox{
  position: fixed; inset:0; z-index: 110;
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.gallery-lightbox.open{
  visibility: visible; opacity: 1;
  transition: opacity .35s var(--ease-out);
}
.gallery-lightbox-overlay{
  position:absolute; inset:0; background: rgba(8,10,8,.92);
}
.gallery-lightbox-stage{
  position:absolute; inset: 0 0 76px 0;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(20px,6vw,80px);
}
.gallery-lightbox-img{
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  opacity: 0; transform: scale(.98);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.gallery-lightbox-img.loaded{ opacity: 1; transform: scale(1); }

.gallery-lightbox-close{
  position:absolute; top: 18px; right: 18px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border:none;
  background: rgba(255,255,255,.1); color: var(--paper);
  font-size: 1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .25s;
}
.gallery-lightbox-close:hover{ background: rgba(255,255,255,.2); }

.gallery-lightbox-arrow{
  position:absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border:none;
  background: rgba(255,255,255,.1); color: var(--paper);
  font-size: 1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .25s;
}
.gallery-lightbox-arrow:hover{ background: rgba(255,255,255,.2); }
.gallery-lightbox-prev{ left: clamp(10px, 3vw, 32px); }
.gallery-lightbox-next{ right: clamp(10px, 3vw, 32px); }

.gallery-lightbox-meta{
  position:absolute; left:0; right:0; bottom:0; height:76px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(20px,4vw,48px);
  color: rgba(247,245,240,.85);
}
.gallery-lightbox-caption{ font-size: .92rem; }
.gallery-lightbox-count{ font-size: .78rem; letter-spacing:.06em; color: rgba(247,245,240,.5); }

@media (max-width: 640px){
  .gallery-lightbox-arrow{ width: 40px; height: 40px; font-size: 1.1rem; }
  .gallery-lightbox-meta{ flex-direction: column; align-items:flex-start; justify-content:center; gap:.2em; height: 64px; }
  .gallery-lightbox-stage{ inset: 0 0 64px 0; }
}

/* ============================================================
   House detail modal
   ============================================================ */
.house-modal{
  position: fixed; inset:0; z-index: 100;
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.house-modal.open{
  visibility: visible; opacity: 1;
  transition: opacity .35s var(--ease-out);
}
.house-modal-overlay{
  position:absolute; inset:0; background: rgba(15,18,15,.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.house-modal-dialog{
  position:absolute; top: 4vh; left:50%; transform: translateX(-50%) translateY(14px);
  width: min(920px, calc(100% - 32px));
  max-height: 92vh; overflow-y: auto;
  background: var(--paper); border-radius: 8px;
  box-shadow: 0 30px 80px rgba(10,12,10,.4);
  transition: transform .4s var(--ease-out);
}
.house-modal.open .house-modal-dialog{ transform: translateX(-50%) translateY(0); }

.house-modal-close{
  position:absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border:none;
  background: rgba(247,245,240,.92); color: var(--ink);
  font-size: 1.4rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.house-modal-main{
  aspect-ratio: 16/9; background: var(--stone) center / cover no-repeat;
  border-radius: 8px 8px 0 0;
}
.house-modal-thumbs{
  display:flex; gap: 6px; padding: 8px; overflow-x:auto; background: var(--ink);
}
.house-modal-thumb{
  flex: 0 0 84px; height: 60px; border-radius: 3px; border: 2px solid transparent;
  background-size: cover; background-position:center; cursor:pointer; padding:0;
  opacity: .55; transition: opacity .25s, border-color .25s;
}
.house-modal-thumb:hover{ opacity: .85; }
.house-modal-thumb.active{ opacity: 1; border-color: var(--gold-soft); }

.house-modal-body{ padding: clamp(22px,4vw,40px); }
.house-modal-tag{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--graphite); margin: 0 0 .4em; }
.house-modal-name{ font-size: clamp(1.6rem,3vw,2.2rem); font-weight:400; font-style:italic; color: var(--ocean); margin: 0 0 .3em; }
.house-modal-facts{ font-size:.92rem; color: var(--ink-soft); margin: 0 0 .2em; }
.house-modal-price{ font-size:1rem; font-weight:500; color: var(--ink); margin: 0 0 .6em; }

.house-modal-rating{ margin: 0 0 1.3em; }
.house-modal-rating-score{ font-size:.92rem; color: var(--ink); font-weight:500; margin: 0 0 .5em; }
.house-modal-rating-score span{ color: var(--graphite); font-weight:400; }
.house-modal-rating-bars{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .35em 1.2em;
}
.house-modal-rating-bar{ display:flex; align-items:center; gap: .6em; font-size:.78rem; color: var(--graphite); }
.house-modal-rating-bar span:first-child{ flex: 0 0 92px; }
.house-modal-rating-bar-track{ flex:1; height:3px; background: var(--stone); border-radius:2px; overflow:hidden; }
.house-modal-rating-bar-fill{ height:100%; background: var(--ocean); }
.house-modal-rating-bar span:last-child{ flex: 0 0 26px; text-align:right; color: var(--ink-soft); }

.house-modal-desc p{ color: var(--ink-soft); line-height:1.7; margin: 0 0 1em; font-size:.98rem; }

.house-modal-subhead{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--graphite); margin: 1.6em 0 .8em; }
.house-modal-amenities{
  list-style:none; padding:0; margin: 0 0 2em;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .5em .8em;
}
.house-modal-amenities li{ font-size:.86rem; color: var(--ink-soft); padding-left: 1.1em; position:relative; }
.house-modal-amenities li::before{ content:"—"; position:absolute; left:0; color: var(--gold); }

.house-modal-reserve{ width:auto; padding: 0 2.2em; height: 50px; display:inline-flex; align-items:center; justify-content:center; border-radius: 999px; }

body.modal-open{ overflow:hidden; }

@media (max-width: 640px){
  .house-modal-dialog{ top: 0; max-height: 100vh; height:100%; border-radius:0; width:100%; }
  .house-modal-main{ border-radius:0; aspect-ratio: 4/3; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background: var(--ink); color: var(--paper); padding: clamp(40px,6vw,70px) 0 clamp(20px,3vw,30px); }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 2em; padding-bottom: 2.4em; border-bottom: 1px solid rgba(247,245,240,.15); }
.footer-wordmark span:first-child{ color: var(--paper); }
.footer-wordmark span:last-child{ color: rgba(247,245,240,.55); }
.footer-nav{ display:flex; gap: 1.8em; }
.footer-nav a{ font-size:.85rem; color: rgba(247,245,240,.75); transition: color .3s; }
.footer-nav a:hover{ color: var(--paper); }
.footer-meta{ text-align:right; font-size:.8rem; color: rgba(247,245,240,.5); }
.footer-meta p{ margin: 0 0 .3em; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px){
  .main-nav, .btn-pill{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-nav{ display:flex; }

  .intro-grid{ grid-template-columns: 1fr; gap: 24px; }
  .intro-mark{ display:none; }

  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 22vw; }

  .houses-grid{ grid-template-columns: 1fr 1fr; }
  .todo-grid{ grid-template-columns: 1fr 1fr; }

  .inquire-grid{ grid-template-columns: 1fr; }
  .footer-meta{ text-align:left; }
  .form-row-split{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 66vw; }
  .gallery-tile{ grid-column: 1/2 !important; grid-row: auto !important; }
  .houses-grid{ grid-template-columns: 1fr; }
  .todo-grid{ grid-template-columns: 1fr; }
}