:root{
  --bg:#0b0b0c;
  --bg2:#111113;
  --ink:#f3f1ee;
  --mut:#9a978f;
  --line:#26262a;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* header */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.solid{background:rgba(11,11,12,.86);backdrop-filter:blur(10px);border-bottom-color:var(--line);padding:16px 40px}
.brand{font-family:var(--sans);font-weight:300;letter-spacing:.42em;font-size:.92rem}
nav{display:flex;gap:30px}
nav a{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);transition:color .25s}
nav a:hover{color:var(--ink)}

/* hero */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center 30%;
  filter:grayscale(100%) contrast(1.04) brightness(.86);transform:scale(1.03)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 40%,rgba(11,11,12,.9))}
.hero-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 24px;
  background:radial-gradient(ellipse 70% 50% at center 48%, rgba(0,0,0,.55), transparent 70%)}
.hero-overlay h1{font-family:var(--sans);font-weight:200;letter-spacing:.5em;
  font-size:clamp(1.8rem,6vw,4.4rem);margin:0 0 .3em;text-indent:.5em;text-shadow:0 2px 30px rgba(0,0,0,.7)}
.hero-overlay .sub{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,3.2vw,2.1rem);color:#f3f0ea;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.8)}
.hero-overlay .tag{margin:1.1em 0 0;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#cbc8c1;text-shadow:0 1px 16px rgba(0,0,0,.9)}
.scroll{margin-top:2.6em;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line);padding:13px 26px;border-radius:40px;transition:.3s}
.scroll:hover{background:var(--ink);color:#000;border-color:var(--ink)}

/* section titles */
.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.04em;margin:0 0 .9em}

/* work */
.work{padding:96px 40px 60px;max-width:1320px;margin:0 auto}
.work .sec-title{text-align:center;margin-bottom:.3em}
.sec-lead{text-align:center;color:var(--mut);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 2em}
.filters{display:flex;gap:10px;justify-content:center;margin-bottom:2.4em;flex-wrap:wrap}
.f-btn{background:none;border:1px solid var(--line);color:var(--mut);cursor:pointer;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 22px;border-radius:40px;transition:.25s}
.f-btn:hover{color:var(--ink);border-color:#4a4a50}
.f-btn.active{background:var(--ink);color:#000;border-color:var(--ink)}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{margin:0;position:relative;cursor:pointer;overflow:hidden;background:var(--bg2)}
.gallery figure img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .8s ease, opacity .5s;opacity:.94}
.gallery figure:hover img{transform:scale(1.05);opacity:1}
.gallery figure.feat{grid-column:span 2;grid-row:span 2}
.gallery figure.feat img{aspect-ratio:auto;height:100%}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;
  padding:30px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.8));
  opacity:0;transform:translateY(6px);transition:.4s}
.gallery figure:hover figcaption{opacity:1;transform:none}
.fc-name{font-family:var(--serif);font-size:1.15rem;color:#fff;line-height:1.1}
.fc-meta{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#c9c6bf}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px}
.about-img img{height:100%;width:100%;object-fit:cover;filter:grayscale(100%) contrast(1.03) brightness(.9)}
.about-text{padding:clamp(40px,6vw,90px);display:flex;flex-direction:column;justify-content:center;max-width:640px}
.about-text p{color:#cdcac3;margin:0 0 1.1em;font-size:1.02rem}
.about-text p:last-child{color:var(--mut);font-size:.86rem;letter-spacing:.05em;margin:0}

/* booking */
.booking{text-align:center;padding:100px 24px}
.booking .sec-title{margin-bottom:.4em}
.booking-lead{color:var(--mut);margin:0 0 2em;letter-spacing:.03em}
.booking-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{border:1px solid var(--ink);padding:15px 30px;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;border-radius:40px;transition:.3s}
.btn:hover{background:var(--ink);color:#000}
.btn.ghost{border-color:var(--line);color:var(--mut)}
.btn.ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--line);padding:50px 40px;text-align:center}
.f-links{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.f-links a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);transition:.25s}
.f-links a:hover{color:var(--ink)}
.copy{font-size:.72rem;letter-spacing:.12em;color:#5d5b56;margin:0}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,6,7,.96);
  display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lb-img{max-width:88vw;max-height:84vh;filter:grayscale(100%);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-cap{position:absolute;bottom:30px;left:0;right:0;text-align:center;color:var(--mut);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.lb-close,.lb-prev,.lb-next{position:absolute;background:none;border:0;color:#cfccc6;
  cursor:pointer;font-size:2.4rem;line-height:1;padding:14px;transition:color .2s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{color:#fff}
.lb-close{top:18px;right:26px;font-size:2.1rem}
.lb-prev{left:2vw}.lb-next{right:2vw}

@media(max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .about-img{height:60vh}
  header,.work,footer{padding-left:22px;padding-right:22px}
  nav{gap:18px}
}
@media(max-width:560px){
  .gallery{grid-template-columns:repeat(2,1fr);gap:8px}
  .gallery figure.feat{grid-column:span 2;grid-row:auto}
  .gallery figure.feat img{aspect-ratio:4/5}
  nav a:not(:last-child){display:none}
  .brand{letter-spacing:.3em}
}

/* ---- planisfero hero ---- */
.hero-map{position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:96px 20px 56px;
  background:radial-gradient(ellipse at 50% 42%, #121317, #0b0b0c 72%)}
.hm-head{text-align:center;margin-bottom:6px;z-index:2}
.hm-head h1{font-family:var(--sans);font-weight:200;letter-spacing:.5em;
  font-size:clamp(1.5rem,5vw,3.2rem);margin:0 0 .25em;text-indent:.5em}
.hm-head .sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.6vw,1.7rem);color:#e9e6e0;margin:0}
.hm-head .tag{margin:.9em 0 0;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.hm-head .tag b{color:var(--ink);font-weight:400}
#worldmap{width:min(1120px,97vw);height:auto;display:block;margin:6px auto}
#worldmap .land path{fill:#1a1b1f;stroke:#2c2d33;stroke-width:.4}
#worldmap .pin{cursor:pointer}
#worldmap .pin .dot{fill:#f1efe9;transition:fill .25s, r .25s}
#worldmap .pin .halo{fill:#e3b341;opacity:.13}
#worldmap .pin:hover .dot{fill:#e3b341}
#worldmap .pin:hover .halo{opacity:.28}
#worldmap .pin text{fill:#d7d4cd;font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;text-anchor:middle;opacity:0;transition:opacity .25s;pointer-events:none}
#worldmap .pin:hover text{opacity:1}
.hero-map .scroll{margin-top:22px;z-index:2}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:48px;
  font-family:var(--serif);font-style:italic;font-size:1.15rem}
#count a{color:var(--mut);border-bottom:1px solid var(--line);margin-left:6px}
#count a:hover{color:var(--ink)}
@media(max-width:560px){ #worldmap .pin text{font-size:16px} }