:root{
  --bg:#4d4a37;        /* olive/taupe */
  --text:#ffffff;
  --accent:#cdbb91;    /* gold */
  --muted:#dcd7c6;
  --max:1200px;
}

/* ===== BASE ===== */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Playfair Display",serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{opacity:.8;}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;
  top:0;width:100%;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  z-index:999;
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 2rem;
  position:relative;
}
.logo{height:42px;}
nav{
  display:flex;
  align-items:center;
  gap:1.2rem;
}
nav a{
  font-family:"DM Sans",sans-serif;
  color:var(--text);
  font-size:0.9rem;
  letter-spacing:0.03em;
  transition:opacity .25s ease;
}
nav a:hover{opacity:.7;}

#langSelect{
  background:transparent;
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  font-family:"DM Sans",sans-serif;
  font-size:0.85rem;
  padding:0.35rem 0.6rem;
  border-radius:999px;
  margin-left:1rem;
  outline:none;
  cursor:pointer;
}
#langSelect option{color:#222;}
.lang-block{transition:opacity .4s ease;}

/* ===== HERO ===== */
.hero{background:var(--bg);margin-top:68px;}
.video-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}
.video-wrapper video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);}

/* ===== SOUND TOGGLE ===== */
#soundToggle{
  position:absolute;bottom:1rem;right:1rem;z-index:20;
  width:38px;height:38px;background:rgba(0,0,0,.45);
  border:none;border-radius:999px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s ease;
}
#soundToggle:hover{background:rgba(0,0,0,.75);}
.hidden{display:none;}

/* ===== HERO LOWER ===== */
.hero-lower{
  max-width:1200px;margin:0 auto;
  padding:3rem 1.5rem 3.5rem;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center;
}
.hero-logo{
  height:115px;           /* desktop/tablet */
  object-fit:contain;
  margin-top:-25px;
}
.hero-buttons{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;}

/* ===== BUTTONS ===== */
.btn,.btn-outline{
  display:inline-block;padding:.9rem 1.8rem;border-radius:999px;
  font-family:"DM Sans",sans-serif;font-size:1rem;transition:.2s ease;
}
.btn{background:var(--accent);color:#222;}
.btn:hover{background:var(--muted);}
.btn-outline{color:var(--accent);border:1px solid var(--accent);}
.btn-outline:hover{background:var(--accent);color:#222;}

/* ===== SECTIONS ===== */
.section{padding:6rem 1.5rem 4rem;}
.section .content{max-width:800px;margin:0 auto;}
.section h2{
  font-family:"Playfair Display",serif;font-weight:400;font-size:2.2rem;
  color:var(--accent);letter-spacing:0.04em;margin-bottom:1.5rem;
}
.section p{
  font-family:"DM Sans",sans-serif;font-size:0.96rem;line-height:1.8;
  color:rgba(255,255,255,0.92);margin-bottom:1.1rem;
}
.section p + p{margin-top:0.4rem;}
.section p:nth-of-type(3),.section p:nth-of-type(6){margin-bottom:1.7rem;}
.section h3,.section h4{font-family:"Playfair Display",serif;font-weight:400;color:var(--accent);}
.section h3{margin-top:2.5rem;margin-bottom:1rem;}
.section h4{margin-top:1.3rem;margin-bottom:0.5rem;}

ul{list-style:none;padding-left:0;margin:0 0 1.3rem 0;}
ul li{margin-bottom:0.6rem;font-family:"DM Sans",sans-serif;line-height:1.7;}

.photo-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;margin-top:2.5rem;
}
.photo-grid img{width:100%;border-radius:10px;object-fit:cover;}

footer{text-align:center;padding:2rem 0 3rem;color:var(--muted);font-size:.9rem;}

/* =========================
   RESPONSIVE
   ========================= */

/* tablets */
@media (max-width:1024px){
  .nav-inner{padding:0.8rem 1.2rem;}
}

/* phones */
@media (max-width:600px){

  /* NAVBAR */
  .nav-inner{
    padding:0.6rem 1rem;
    display:block;
    text-align:center;
  }
  .logo{
    height:40px;
    display:block;
    margin:0 auto;
  }
  #langSelect{
    position:absolute;
    top:0.55rem;
    right:1rem;
    margin:0;
  }
  nav{
    margin-top:0.6rem;
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  nav a{white-space:nowrap;font-size:0.95rem;}

  /* HERO SPACING */
  .hero{margin-top:118px;}

  /* ===== VIDEO FULL EDGE ===== */
  .video-wrapper{
    aspect-ratio:auto;
    height:55vh;
    overflow:hidden;
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
  }
  .video-wrapper video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }

  .hero-logo{
    height:85px;          /* smaller for mobile */
    margin-top:-25px;     /* moved lower so it’s fully visible */
  }
  .hero-buttons{flex-direction:column;align-items:center;gap:0.9rem;}
  .btn,.btn-outline{
    font-size:0.9rem;padding:0.75rem 1.4rem;width:80%;max-width:280px;
  }

  .section{padding:4rem 1rem 3rem;}
  .section .content{padding:0 0.5rem;}
  .section h2{font-size:1.7rem;}
  .section p{font-size:0.9rem;}
  .photo-grid{grid-template-columns:1fr;}
}

/* tiny phones */
@media (max-width:400px){
  .btn,.btn-outline{font-size:0.85rem;padding:0.7rem 1.2rem;}
  .hero-logo{
    height:80px;
    margin-top:-25px;   /* <-- was -45px, now same as mobile so it doesn’t override */
  }
  .section h2{font-size:1.5rem;}
}