/* ============================================================
   HillTop Houses — Kefalos, Kos
   Palette:  Aegean ink / chalk white / sea teal / sun gold
   Type:     Fraunces (display)  +  Jost (body & UI)
   Signature: topographic hilltop line-mark
   ============================================================ */

:root{
  --ink:      #122B3A;
  --ink-2:    #0C1F2B;
  --chalk:    #F6F3EC;
  --chalk-2:  #FBFAF6;
  --sea:      #21708C;
  --sea-deep: #195B73;
  --gold:     #E2A14A;
  --gold-soft:#E8B66E;
  --stone:    #5E7180;
  --text:     #1B2A33;
  --text-soft:#4A5C66;
  --line:     rgba(18,43,58,.13);

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --radius: 4px;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Jost", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.4,.05,.1,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--text);
  background:var(--chalk);
  font-size:clamp(1rem,.97rem + .2vw,1.075rem);
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.06; letter-spacing:-.01em; margin:0; }
h2{ font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem); }
h3{ font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem); font-weight:500; }
p{ margin:0 0 1.1em; }

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sea);
  margin:0 0 1.1rem;
}
.eyebrow--light{ color:var(--gold-soft); }

.btn{
  --pad:1rem 1.9rem;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:500; font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:var(--pad); border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-soft); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }
.btn--full{ width:100%; }

/* topo divider */
.rule{ display:flex; justify-content:center; padding:clamp(2.5rem,6vw,5rem) 0; }
.rule svg{ width:140px; height:auto; }
.rule path{ fill:none; stroke:var(--line); stroke-width:1.5; }

/* ============================================================ NAV */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:1.35rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; }
.brand__mark{ width:34px; height:34px; flex:none; }
.brand__mark path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.brand__mark .brand__peak{ fill:var(--gold); stroke:none; }
.brand__name{ font-family:var(--serif); font-size:1.32rem; font-weight:600; letter-spacing:-.01em; }
.brand__name em{ font-style:italic; font-weight:400; color:var(--gold-soft); margin-left:.12em; }

.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{
  text-decoration:none; color:#fff; font-size:.82rem; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; opacity:.9;
  transition:opacity .2s, color .2s;
}
.nav__links a:hover{ opacity:1; }
.nav__cta{
  border:1px solid rgba(255,255,255,.5); padding:.6rem 1.15rem; border-radius:var(--radius);
  transition:background .25s var(--ease), color .25s var(--ease)!important;
}
.nav__cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink)!important; }

/* scrolled state (added via JS) */
.nav.is-solid{ background:var(--chalk); box-shadow:0 1px 0 var(--line); }
.nav.is-solid .brand{ color:var(--ink); }
.nav.is-solid .brand__name em{ color:var(--sea); }
.nav.is-solid .nav__links a{ color:var(--text); }
.nav.is-solid .nav__cta{ border-color:var(--line); }
.nav.is-solid .nav__cta:hover{ color:var(--ink)!important; }
.nav.is-solid .nav__toggle span{ background:var(--ink); }

.nav__toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0;
  padding:.4rem; cursor:pointer;
}
.nav__toggle span{ width:24px; height:2px; background:#fff; transition:.3s var(--ease); }

/* ============================================================ HERO */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:0 var(--gutter) clamp(3.5rem,8vh,7rem);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.06); animation:slowzoom 18s var(--ease) forwards;
}
@keyframes slowzoom{ to{ transform:scale(1); } }
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,31,43,.45) 0%, rgba(12,31,43,.15) 35%, rgba(12,31,43,.78) 100%);
}
.hero__content{ position:relative; max-width:760px; color:#fff; }
.hero__title{
  font-size:clamp(2.9rem,1.8rem + 6vw,6.2rem);
  font-weight:500; letter-spacing:-.02em; margin:0 0 1.4rem;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hero__sub{
  font-size:clamp(1.05rem,1rem + .5vw,1.3rem); max-width:48ch;
  color:rgba(255,255,255,.92); margin-bottom:2rem; font-weight:300;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__scroll{
  position:absolute; bottom:1.8rem; right:var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.8); text-decoration:none;
  font-size:.68rem; letter-spacing:.25em; text-transform:uppercase;
}
.hero__scroll svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; animation:bob 2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* ============================================================ HOUSE */
.house{ max-width:var(--maxw); margin:0 auto; padding:clamp(4.5rem,10vh,8rem) var(--gutter) 0; }
.house__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.house__copy h2{ margin-bottom:1.6rem; max-width:14ch; }
.lede{ font-size:1.12rem; color:var(--text); }
.house__copy p{ color:var(--text-soft); }
.facts{
  list-style:none; padding:0; margin:2rem 0 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  border-top:1px solid var(--line); padding-top:1.6rem;
}
.facts li{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); line-height:1.3; }
.facts__n{ display:block; font-family:var(--serif); font-size:2rem; font-weight:500; color:var(--ink); letter-spacing:-.02em; text-transform:none; }
.facts__n small{ font-size:.9rem; color:var(--stone); }
.house__photo{ margin:0; position:relative; }
.house__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
.house__photo figcaption{
  position:absolute; left:1.1rem; bottom:1.1rem;
  background:var(--chalk); color:var(--text); font-size:.78rem;
  padding:.45rem .85rem; border-radius:var(--radius); letter-spacing:.02em;
  box-shadow:0 6px 22px rgba(12,31,43,.16);
}

/* ============================================================ SPACES */
.spaces{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) clamp(4rem,9vh,7rem); }
.spaces__head{ text-align:center; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.space{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem);
  align-items:center; margin-bottom:clamp(3rem,7vw,6rem);
}
.space:last-child{ margin-bottom:0; }
.space--flip .space__img{ order:2; }
.space__img{ margin:0; overflow:hidden; border-radius:var(--radius); }
.space__img img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .8s var(--ease); }
.space__img:hover img{ transform:scale(1.04); }
.space__no{
  font-family:var(--serif); font-size:1rem; color:var(--gold);
  letter-spacing:.1em; margin:0 0 .6rem;
}
.space__no::before{ content:""; display:inline-block; width:28px; height:1px; background:var(--gold); vertical-align:middle; margin-right:.7rem; }
.space__text h3{ margin-bottom:.9rem; }
.space__text p{ color:var(--text-soft); margin:0; max-width:40ch; }

/* ============================================================ GALLERY */
.gallery{ background:var(--chalk-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gallery__head{ max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,8vh,6rem) var(--gutter) clamp(2rem,4vw,3rem); text-align:center; }
.gallery__grid{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) clamp(4rem,9vh,7rem);
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:.9rem;
  grid-auto-flow:dense;
}
.gal{ padding:0; border:0; cursor:pointer; overflow:hidden; border-radius:var(--radius); background:#ddd; position:relative; }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .3s; }
.gal::after{
  content:""; position:absolute; inset:0; background:rgba(18,43,58,0);
  transition:background .3s var(--ease);
}
.gal:hover img{ transform:scale(1.06); }
.gal:hover::after{ background:rgba(18,43,58,.12); }
.gal:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.gal--wide{ grid-column:span 2; }
.gal--tall{ grid-row:span 2; }

/* ============================================================ LOCATION */
.loc{ background:var(--ink); color:#fff; }
.loc__grid{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,9vh,7rem) var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center;
}
.loc__copy h2{ color:#fff; margin-bottom:1.5rem; max-width:13ch; }
.loc__copy p{ color:rgba(255,255,255,.78); }
.loc__list{ list-style:none; padding:0; margin:1.8rem 0; display:grid; gap:.1rem; }
.loc__list li{ padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:.98rem; color:rgba(255,255,255,.85); }
.loc__list strong{ color:var(--gold-soft); font-weight:500; margin-right:.5rem; }
.loc__note{ font-size:.85rem; color:rgba(255,255,255,.55)!important; font-style:italic; margin:0; }
.loc__map{ border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.loc__map iframe{ display:block; width:100%; height:420px; border:0; filter:grayscale(.2) contrast(1.05); }

/* ============================================================ BOOK */
.book{ background:var(--chalk); }
.book__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,9vh,7rem) var(--gutter);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:start;
}
.book__intro h2{ margin-bottom:1.4rem; max-width:11ch; }
.book__intro p{ color:var(--text-soft); }
.book__assure{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.7rem; }
.book__assure li{ position:relative; padding-left:1.7rem; font-size:.95rem; color:var(--text); }
.book__assure li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  background:var(--gold); border-radius:50%;
}
.book__form{
  background:var(--chalk-2); border:1px solid var(--line); border-radius:8px;
  padding:clamp(1.6rem,3vw,2.6rem);
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem;
  box-shadow:0 24px 60px rgba(18,43,58,.07);
}
.field{ display:flex; flex-direction:column; grid-column:1/-1; }
.field--half{ grid-column:span 1; }
.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-bottom:.5rem; font-weight:500; }
.field .opt{ text-transform:none; letter-spacing:0; font-size:.72rem; color:var(--stone); opacity:.7; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem .9rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--sea); box-shadow:0 0 0 3px rgba(33,112,140,.15);
}
.field textarea{ resize:vertical; min-height:90px; }
.nights{
  grid-column:1/-1; margin:-.3rem 0 0; font-size:.85rem; color:var(--sea);
  letter-spacing:.04em;
}
.hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }
#submitBtn{ grid-column:1/-1; margin-top:.4rem; }
.book__status{ grid-column:1/-1; margin:0; font-size:.92rem; min-height:1.2em; }
.book__status.is-ok{ color:var(--sea-deep); }
.book__status.is-err{ color:#b3402f; }

/* ============================================================ FOOTER */
.foot{ background:var(--ink-2); color:#fff; text-align:center; }
.foot__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,6vw,4.5rem) var(--gutter); }
.brand--light{ justify-content:center; color:#fff; }
.foot__tag{ color:rgba(255,255,255,.7); margin:1.1rem 0 .4rem; font-size:.95rem; }
.foot__contact a{ color:var(--gold-soft); text-decoration:none; font-size:1.05rem; letter-spacing:.02em; }
.foot__contact a:hover{ text-decoration:underline; }
.foot__legal{ color:rgba(255,255,255,.4); font-size:.78rem; letter-spacing:.04em; margin:1.6rem 0 0; }

/* ============================================================ LIGHTBOX */
.lightbox{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(8,18,25,.94); padding:clamp(1rem,5vw,4rem);
  opacity:0; transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox__img{ max-width:100%; max-height:88vh; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox__close{
  position:absolute; top:1.2rem; right:1.5rem; background:none; border:0; color:#fff;
  font-size:2.4rem; line-height:1; cursor:pointer; opacity:.85; transition:opacity .2s;
}
.lightbox__close:hover{ opacity:1; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.1); border:0; color:#fff; font-size:2rem;
  width:52px; height:52px; border-radius:50%; cursor:pointer; transition:background .2s;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.25); }
.lightbox__prev{ left:clamp(.8rem,3vw,2rem); }
.lightbox__next{ right:clamp(.8rem,3vw,2rem); }

/* ============================================================ REVEAL */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================ RESPONSIVE */
@media (max-width:900px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
    background:var(--ink); padding:2rem var(--gutter);
    transform:translateX(100%); transition:transform .4s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.3);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ color:#fff!important; font-size:1rem; }
  .nav__toggle{ display:flex; z-index:60; }
  .nav.is-solid .nav__toggle span{ background:var(--ink); }
  .nav__toggle.is-open span{ background:#fff!important; }
  .nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2){ opacity:0; }
  .nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .house__grid{ grid-template-columns:1fr; }
  .house__photo img{ aspect-ratio:4/3; }
  .space, .space--flip{ grid-template-columns:1fr; gap:1.3rem; }
  .space--flip .space__img{ order:0; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .gal--wide{ grid-column:span 2; }
  .gal--tall{ grid-row:span 1; }
  .loc__grid{ grid-template-columns:1fr; }
  .loc__map iframe{ height:320px; }
  .book__inner{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .facts{ grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem; }
  .book__form{ grid-template-columns:1fr; }
  .field--half{ grid-column:1/-1; }
  .hero__actions .btn{ flex:1; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__bg{ transform:none; }
}

/* Keep the closed lightbox out of the page's click layer. */
.lightbox[hidden] {
  display: none !important;
}
.lightbox:not(.is-open) {
  pointer-events: none;
}
.lightbox.is-open {
  pointer-events: auto;
}

/* Fixed navigation should not cover anchored section headings. */
section[id] {
  scroll-margin-top: 88px;
}


/* Direct contact actions */
.contact-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.foot__actions{display:flex;justify-content:center;gap:1rem;margin:.75rem 0 1rem}
.foot__actions a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:.2rem}
@media (max-width:520px){.hero__actions{align-items:stretch}.hero__actions .btn,.contact-actions .btn{width:100%;text-align:center}.contact-actions{display:grid;grid-template-columns:1fr 1fr}.foot__actions{gap:1.5rem}}