/* Nadivelle Homestay – style.css */ :root {
  --forest:#243D32;
  --ivory:#F8F5EF;
  --sage:#879783;
  --sand:#D8C8AD;
  --char:#292D29;
--gold:#B79B6A}

html {
scroll-behavior:smooth}

body {
  font-family:Lato,sans-serif;
  color:var(--char);
  background:var(--ivory);
  line-height:1.75;
overflow-x:hidden}

h1,h2,h3,.navbar-brand,.f-brand {
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
line-height:1.15}

h2 {
  font-size:clamp(2rem,4vw,3rem);
color:var(--forest)}

h3 {
color:var(--forest)}

a {
color:var(--forest)}

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

.eyebrow {
  display:block;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.75rem;
  color:var(--sage);
  font-weight:700;
margin-bottom:.6rem}

.eyebrow.light {
color:var(--sand)}

.btn {
  border-radius:0;
  padding:.7rem 1.6rem;
  letter-spacing:.06em;
  font-size:.85rem;
  text-transform:uppercase;
transition:.3s}

.btn-forest {
  background:var(--forest);
  color:#fff;
border:1px solid var(--forest)}

.btn-forest:hover {
  background:transparent;
color:var(--forest)}

.btn-gold {
  background:var(--gold);
  color:#fff;
border:1px solid var(--gold)}

.btn-gold:hover {
  background:transparent;
  color:var(--gold);
background:#fff}

.btn-outline-light:hover {
color:var(--forest)}

/* Header */ .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1030;
  background:var(--ivory);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
transition:.35s}

.navbar-brand {
  font-size:1.5rem;
  letter-spacing:.12em;
color:var(--forest)}

.navbar-brand img{
  width:200px;
}

.navbar-brand small {
  font-family:Lato;
  font-size:.6rem;
  letter-spacing:.3em;
  display:block;
  margin-left:2.2rem;
margin-top:-.4rem}

.nav-link {
  color:var(--char);
  text-transform:uppercase;
  font-size:.8rem;
letter-spacing:.1em}

.nav-link:hover,.nav-link.active {
color:var(--gold)}

.navbar-toggler {
  border:0;
  font-size:1.8rem;
color:var(--forest)}

.dropdown-menu {
  border-radius:0;
  border:0;
  border-top:2px solid var(--gold);
  background:var(--ivory);
min-width:18rem}

.dropdown-item:hover {
  background:var(--sand);
color:var(--forest)}

@media(min-width:992px) {
  .dropdown-menu {
    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.3s;
  margin-top:0}

  .dropdown:hover>.dropdown-menu,.dropdown-menu.show {
    opacity:1;
    visibility:visible;
  transform:none}

}

.site-header.is-home:not(.scrolled) {
  background:transparent;
box-shadow:none}

.site-header.is-home:not(.scrolled) .navbar-brand,.site-header.is-home:not(.scrolled) .nav-link,.site-header.is-home:not(.scrolled) .navbar-toggler {
color:#fff}

@media(max-width:991px) {
  .site-header.is-home:not(.scrolled) .navbar-collapse {
    background:var(--ivory);
  padding:1rem}

  .site-header.is-home:not(.scrolled) .navbar-collapse .nav-link {
  color:var(--char)}

  .dropdown-menu {
    min-width:0;
    border:0;
  padding-left:1rem}

}

main {
min-height:60vh}

body.inner main {
padding-top:0}

/* Images */ .ph {
  position:relative;
  margin:0;
  overflow:hidden;
background:linear-gradient(135deg,var(--forest),var(--sage))}

.ph img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
transition:transform .8s}

.ph figcaption {
  position:absolute;
  left:1rem;
  bottom:1rem;
  right:1rem;
  color:rgba(255,255,255,.55);
font-size:.75rem}

.r-43 {
aspect-ratio:4/3}

.r-34 {
aspect-ratio:3/4}

.r-45 {
aspect-ratio:4/5}

.r-50 {
aspect-ratio:5/5}

.r-1 {
aspect-ratio:1}

.fill {
  position:absolute;
  inset:0;
  width:100%;
height:100%}

a:hover .ph img,.room-img:hover img {
transform:scale(1.05)}

/* Sections */ .sec {
padding:clamp(4rem,9vw,7rem) 0}

.sec-dark {
  background:var(--forest);
color:#fff}

.sec-dark h2,.sec-dark h3 {
color:#fff}

.sec-sand {
background:#EFE8DA}

.sec-head {
  text-align:center;
  max-width:42rem;
margin:0 auto 3.5rem}

.narrow {
  max-width:44rem;
margin-inline:auto}

.note {
  font-size:.9rem;
  color:#555;
  border-left:3px solid var(--gold);
  padding-left:1rem;
margin:1.5rem 0}

.price {
  font-family:'Cormorant Garamond',serif;
  font-size:1.7rem;
color:var(--gold)}

.tick {
  list-style:none;
padding:0}

.tick li {
  padding-left:1.7rem;
  position:relative;
margin:.4rem 0}

.tick li:before {
  content:"\2713";
  position:absolute;
  left:0;
color:var(--gold)}

/* Hero */ .hero {
  position:relative;
  height:100vh;
  min-height:560px;
  color:#fff;
  overflow:hidden;
background:var(--forest)}

.slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s;
  display:flex;
align-items:center}

.slide.active {
  opacity:1;
z-index:1}

.slide:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(20,35,28,.75),rgba(20,35,28,.25));
z-index:1}

.slide-in {
  position:relative;
  z-index:2;
  max-width:760px;
margin-left:max(1rem,calc((100vw - 1320px)/2))}

.slide h1 {
font-size:clamp(2.6rem,7vw,5.2rem)}

.slide p {
  font-size:1.15rem;
  max-width:34rem;
margin:1rem 0 2rem}

.arr {
  position:absolute;
  top:50%;
  z-index:3;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  width:48px;
height:48px}

.arr.prev {
left:1rem}

.arr.next {
right:1rem}

.arr:hover {
background:var(--gold)}

.dots {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
gap:.6rem}

.dots button {
  width:34px;
  height:3px;
  border:0;
background:rgba(255,255,255,.5)}

.dots button.on {
background:var(--gold)}

@media(max-width:575px) {
  .arr {
  display:none}

  .slide p {
  font-size:1rem}

}

.inner-hero {
  position:relative;
  height:50vh;
  min-height:320px;
  color:#fff;
  display:flex;
  align-items:flex-end;
padding-bottom:3rem}

.inner-hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(20,35,28,.55);
z-index:1}

.inner-hero .container {
  position:relative;
z-index:2}

.inner-hero h1 {
font-size:clamp(2.2rem,5vw,4rem)}

.breadcrumb {
margin:0}

.breadcrumb a {
color:var(--sand)}

.breadcrumb-item.active,.breadcrumb-item+.breadcrumb-item:before {
color:#fff}

/* Components */ .why {
  text-align:center;
padding:1rem}

.why i {
  font-size:1.8rem;
color:var(--gold)}

.why h3 {
  font-size:1.3rem;
margin:.6rem 0 .2rem}

.why p {
  font-size:.9rem;
opacity:.8}

.room-row {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center;
margin-bottom:5rem}

.room-row.flip .room-img {
order:2}

.room-img {
overflow:hidden}

.am-list {
  columns:2;
  font-size:.9rem;
padding-left:1.1rem}

@media(max-width:900px) {
  .room-row {
    grid-template-columns:1fr;
  gap:1.5rem}

  .room-row.flip .room-img {
  order:0}

}

.att {
  text-decoration:none;
  color:inherit;
display:block}

.att h3 {
  font-size:1.4rem;
margin-top:1rem}

.att p {
font-size:.9rem}

.g-prev {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
gap:.8rem}

.g-item {
  position:relative;
  display:block;
overflow:hidden}

.g0 {
  grid-column:span 2;
grid-row:span 2}

.g3 {
grid-row:span 2}

.g5 {
grid-column:span 2}

@media(max-width:700px) {
  .g-prev {
  grid-template-columns:repeat(2,1fr)}

  .g0,.g5 {
  grid-column:span 2}

}

.g-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
gap:.8rem}

@media(max-width:700px) {
  .g-strip {
  grid-template-columns:repeat(2,1fr)}

}

.masonry {
  columns:3 260px;
column-gap:1rem}

.m-item {
  display:block;
  position:relative;
  margin-bottom:1rem;
  break-inside:avoid;
overflow:hidden}

.m-item span {
  position:absolute;
  left:0;
  bottom:0;
  background:rgba(36,61,50,.85);
  color:#fff;
  font-size:.75rem;
  padding:.3rem .8rem;
  opacity:0;
  transition:.3s;
z-index:2}

.m-item:hover span {
opacity:1}

.video-box {
  position:relative;
overflow:hidden}

.v-over {
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(20,35,28,.45);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
color:#fff}

.play {
  width:84px;
  height:84px;
  border-radius:50%;
  border:2px solid #fff;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:2.4rem;
cursor:not-allowed}

.video-box.ready .play {
cursor:pointer}

.video-box video,.video-box iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
z-index:3}

.cta {
  position:relative;
  padding:7rem 0;
color:#fff}

.cta:before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(20,35,28,.7);
z-index:1}

.cta .container {
  position:relative;
z-index:2}

.cta h2 {
color:#fff}

.map-card {
  background:var(--sand);
  padding:2rem 2rem;
  text-align:center;
height:100%}

.map-card i {
  font-size:2.5rem;
color:var(--forest)}

.thumbs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.6rem;
margin-top:.6rem}

.thumb {
  border:2px solid transparent;
  padding:0;
background:none}

.thumb.on {
border-color:var(--gold)}

/* Footer & floating */ .site-footer {
  background:var(--forest);
  color:#d9e0d8;
padding:5rem 0 1.5rem}

.site-footer a {
  color:#fff;
text-decoration:none}

.site-footer a:hover {
color:var(--sand)}

.site-footer h3 {
  color:var(--sand);
  font-family:Lato;
  font-size:.8rem;
  letter-spacing:.2em;
text-transform:uppercase}

.f-brand {
  color:#fff;
font-size:1.6rem}

.site-footer ul {
  list-style:none;
padding:0}

.site-footer address {
font-style:normal}

.social a {
  margin-right:.8rem;
font-size:1.2rem}

.copy {
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:3rem;
  padding-top:1.5rem;
font-size:.85rem}

.fab {
  position:fixed;
  right:1rem;
  z-index:1040;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff!important;
  font-size:1.5rem;
box-shadow:0 3px 10px rgba(0,0,0,.3)}

.fab-wa {
  bottom:1rem;
background:#25D366}

.fab-call {
  bottom:4.8rem;
background:var(--forest)}

@media(min-width:992px) {
  .fab-call {
  display:none}

}

/* Lightbox */ .lb {
  position:fixed;
  inset:0;
  background:rgba(10,18,14,.95);
  z-index:2000;
  display:none;
  align-items:center;
justify-content:center}

.lb.open {
display:flex}

.lb img {
  max-width:90vw;
max-height:82vh}

.lb p {
  position:absolute;
  bottom:1.2rem;
  color:#fff;
margin:0}

.lb button {
  position:absolute;
  background:none;
  border:0;
  color:#fff;
  font-size:2.2rem;
padding:1rem}

.lb .x {
  top:0;
right:0}

.lb .p {
left:0}

.lb .n {
right:0}

.reveal {
  opacity:0;
  transform:translateY(24px);
transition:.8s}

.reveal.in {
  opacity:1;
transform:none}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
  scroll-behavior:auto!important}

  .reveal {
    opacity:1;
  transform:none}

}

/* Hero video background + gallery videos */ .hero-video,.hero-poster {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
z-index:0}

.hero-poster {
  background:url(../images/hero-1.jpg) center/cover;
z-index:-1}

.vid {
background:var(--forest)}

.vid video {
  width:100%;
  height:100%;
object-fit:cover}

.vcap {
  font-size:.9rem;
margin-top:.6rem}

.slide-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
background:var(--forest)}