/* ---------- base / reset ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  background:#080a0b;
  color:#eee9e2;
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- header ---------- */
.header{
  min-height:64px;
  padding:14px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 20px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:#080a0b;
  position:relative;
  z-index:3;
}
.logo{
  font-family:"Playfair Display",serif;
  font-size:clamp(20px,4.2vw,32px);
  letter-spacing:-1px;
  white-space:nowrap;
}
.logo span,h1 span{color:#c6a476}
.header-stats{
  display:flex;
  align-items:center;
  gap:clamp(12px,3vw,28px);
  color:#c6a476;
  flex-wrap:wrap;
}
.header-stats div{display:flex;gap:8px;align-items:center;white-space:nowrap}
.header-stats strong{font-weight:500;color:#e9e2d9;font-size:clamp(13px,2.2vw,16px)}
.header-stats small{font-size:11px;color:#8e8b87}
.header-stats i{height:26px;width:1px;background:#343638;flex:none}

/* ---------- hero ---------- */
.hero{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  background:#0a0c0d url("assets/hero-bg.jpg") center/cover no-repeat;
  padding:min(18vh,120px) 6% min(12vh,80px);
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,8,.18),rgba(5,7,8,.16) 48%,rgba(5,7,8,.58));
}
.hero-content{
  position:relative;
  z-index:1;
  max-width:760px;
  width:100%;
  margin:0 auto;
}
.eyebrow{
  font-size:clamp(10px,2vw,11px);
  letter-spacing:clamp(3px,1.2vw,6px);
  text-transform:uppercase;
  color:#aaa49c;
  margin:0 0 20px;
  word-spacing:4px;
}
.hero h1{
  font:600 clamp(42px,10vw,92px)/1.05 "Playfair Display",serif;
  margin:0 0 22px;
  letter-spacing:clamp(-1px,-0.5vw,-3px);
  word-break:keep-all;
}
.lead{
  font-size:clamp(14px,2.4vw,18px);
  line-height:1.65;
  color:#d0ccc7;
  margin:0 0 30px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.button{
  display:inline-flex;
  gap:clamp(14px,3vw,34px);
  align-items:center;
  justify-content:center;
  padding:16px clamp(20px,4vw,30px);
  background:#d5b78d;
  color:#121212;
  border-radius:3px;
  font-weight:600;
  font-size:clamp(14px,2.4vw,16px);
  transition:.25s;
  max-width:100%;
  white-space:nowrap;
}
.button:hover{transform:translateY(-2px);background:#ead0a8}

/* ---------- features ---------- */
.features{
  display:grid;
  grid-template-columns:1fr;
  padding:48px 7%;
  border-bottom:1px solid #25282a;
  background:#090b0c;
  max-width:1200px;
  margin:0 auto;
}
.features article{
  text-align:center;
  padding:28px 10px;
}
.features article+article{
  border-top:1px solid #292c2d;
}
.icon{
  color:#cba775;
  height:44px;
  width:44px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon svg{width:100%;height:100%}
.features h2{font-size:17px;font-weight:500;margin:12px 0}
.features p,.contact p:not(.eyebrow),.guarant p:not(.eyebrow){font-size:14px;line-height:1.7;color:#85827e;margin:0}

/* ---------- contact / guarant ---------- */
.contact,.guarant{
  max-width:900px;
  margin:0 auto;
  padding:40px 7%;
  display:flex;
  gap:22px;
  align-items:center;
  border-bottom:1px solid #25282a;
  text-align:left;
}
.contact-mark,.guarant-mark{
  width:48px;height:48px;
  border:1px solid #9d7c4f;
  border-radius:50%;
  display:grid;place-items:center;
  color:#d1a86f;
  flex:none;
}
.contact-mark svg,.guarant-mark svg{width:42%;height:42%}
.contact h2{font:500 clamp(20px,4vw,27px) "Playfair Display",serif;margin:0 0 14px}
.contact-button{
  display:inline-flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  padding:13px 22px;
  background:transparent;
  border:1px solid #a5824f;
  color:#eaddc6;
  border-radius:3px;
  font-weight:600;
  font-size:clamp(15px,3vw,17px);
  transition:.25s;
  max-width:100%;
  white-space:nowrap;
}
.contact-button span{color:#d1a86f;transition:.25s}
.contact-button:hover{
  background:#d5b78d;
  border-color:#d5b78d;
  color:#121212;
  transform:translateY(-2px);
}
.contact-button:hover span{color:#121212}
.contact .contact-button,.guarant .contact-button{margin-bottom:10px}
.guarant{border-bottom:0;padding-top:8px;padding-bottom:52px}
.guarant .eyebrow{
  letter-spacing:clamp(1.5px,0.5vw,3px);
  margin-bottom:20px;
}

/* ---------- footer ---------- */
footer{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 16px;
  padding:20px 5%;
  border-top:1px solid #25282a;
  color:#676560;
  font-size:12px;
}

/* ================= breakpoints ================= */

/* small phones */
@media(max-width:359px){
  .button{gap:10px;padding:14px 16px}
  .contact-mark,.guarant-mark{width:40px;height:40px}
}

/* small tablets and up */
@media(min-width:600px){
  .features{
    grid-template-columns:repeat(3,1fr);
    padding:70px 6%;
  }
  .features article{padding:0 20px}
  .features article+article{
    border-top:0;
    border-left:1px solid #292c2d;
  }
  .contact,.guarant{padding:48px 7%}
}

/* tablets / small laptops */
@media(min-width:860px){
  .header{padding:0 5%;height:78px}
  .hero{padding:0 6%;min-height:min(90vh,680px)}
  .features{padding:80px 6%}
  .features article{padding:0 40px}
  .contact,.guarant{padding:55px 7%}
}

/* desktop */
@media(min-width:1200px){
  .header{padding:0 7%}
  .hero{padding:0 7%}
  .features{padding:80px 8%}
  .contact,.guarant{padding:55px 0}
}

/* large / ultra-wide desktop */
@media(min-width:1600px){
  .header{max-width:1400px;margin:0 auto;padding:0}
  footer{max-width:1400px;margin:0 auto;padding:20px 0}
}

/* short / landscape phones — keep hero from towering over the fold */
@media(max-height:480px) and (orientation:landscape){
  .hero{padding:60px 6% 40px}
  .eyebrow{margin-bottom:10px}
  .hero h1{margin-bottom:14px}
  .lead{margin-bottom:20px}
}

/* respect users who disable animation */
@media (prefers-reduced-motion:reduce){
  .button{transition:none}
}