:root{
  --bg:#070509;
  --gold:#d7a24b;
  --gold2:#f2c86a;
  --ember:#f04b1e;
  --text:#f2e6d4;
  --muted:rgba(242,230,212,.80);
  --panel:rgba(0,0,0,.38);
  --stroke:rgba(215,162,75,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: Georgia, "Times New Roman", serif;
  background-color: var(--bg);
  background-image: var(--ht-bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
a{color:inherit}
img{max-width:100%;height:auto}

.ht-wrap{min-height:100vh; position:relative;}
.ht-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(240,75,30,.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.88));
  pointer-events:none;
  z-index:0;
}
.ht-wrap > *{position:relative; z-index:1;}

.ht-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px 28px 10px 28px;
}
.ht-brand{display:flex; align-items:center; gap:14px; min-width:220px}
.ht-logo{
  width:72px;height:72px;border-radius:999px;
  box-shadow: 0 0 0 2px rgba(215,162,75,.35), 0 16px 40px rgba(0,0,0,.55);
  overflow:hidden;
  background: rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
}
.ht-logo img{width:100%;height:100%;object-fit:cover;display:block}

/* WordPress custom logo outputs its own <a>. Avoid layout issues. */
.ht-logo--wp{ width:72px; height:72px; border-radius:999px; overflow:hidden; box-shadow: 0 0 0 2px rgba(215,162,75,.35), 0 16px 40px rgba(0,0,0,.55); background: rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; }
.ht-logo--wp .custom-logo-link{ display:block; width:100%; height:100%; }
.ht-logo--wp .custom-logo{ width:100% !important; height:100% !important; object-fit:cover; display:block; }


.ht-title{
  text-align:center;
  flex:1;
  font-weight:800;
  letter-spacing:2px;
  font-size: clamp(34px, 4vw, 62px);
  color: var(--gold2);
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 16px rgba(240,75,30,.25);
}
.ht-cta{min-width:220px; display:flex; justify-content:flex-end}
.ht-join{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:1px;
  color: #1b0f0a;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 2px rgba(240,75,30,.15) inset;
}

.ht-hero{padding: 10px 18px 0 18px}
.ht-hero-inner{max-width:980px; margin:0 auto; text-align:center}
.ht-hero-image{
  margin: 0 auto 10px auto;
  max-width: 920px;
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.60);
  background: rgba(0,0,0,.25);
}
.ht-subtitle{
  margin: 10px auto 0 auto;
  font-weight:800;
  letter-spacing:2px;
  font-size: clamp(24px, 3vw, 44px);
  color: var(--gold2);
  text-shadow: 0 2px 0 rgba(0,0,0,.65);
}

.ht-section{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 18px 0 18px;
  text-align:center;
}
.ht-h{
  margin: 18px 0 10px 0;
  font-size: clamp(22px, 2.3vw, 34px);
  letter-spacing:2px;
  color: var(--gold2);
  text-shadow: 0 2px 0 rgba(0,0,0,.65);
}
.ht-p{
  margin:0 auto;
  max-width: 760px;
  line-height:1.55;
  color: var(--muted);
  font-size: 18px;
}

.ht-services{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.ht-card{
  padding: 18px 14px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.40);
  border: 1px solid var(--stroke);
}
.ht-ico{width:46px;height:46px;margin:0 auto 8px auto;opacity:.95}
.ht-card h3{margin:10px 0 8px 0;color:var(--gold2);letter-spacing:1px}
.ht-card p{margin:0;color:var(--muted);line-height:1.5}

.ht-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.ht-block{
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.36);
  border: 1px solid rgba(215,162,75,.10);
}
.ht-block h3{margin:0 0 10px 0;color:var(--gold2);letter-spacing:1px}
.ht-block p{margin:0;color:var(--muted);line-height:1.55}

.ht-faq{
  margin-top: 18px;
  text-align:left;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ht-faq .q{
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(215,162,75,.10);
}
.ht-faq .q strong{display:block;color:var(--gold2);margin-bottom:6px}

.ht-footer-space{height:110px}
.y4h-powered{
  position:fixed;
  right: 18px;
  bottom: 14px;
  z-index: 9999;
}
.y4h-powered img{
  width: 170px;
  height:auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.65));
}

@media (max-width: 860px){
  .ht-services{grid-template-columns:1fr}
  .ht-two{grid-template-columns:1fr}
  .ht-faq{grid-template-columns:1fr}
  .ht-brand,.ht-cta{min-width:120px}
  .ht-logo{width:58px;height:58px}
}

.ht-custom-logo-img{width:100%!important;height:100%!important;object-fit:cover;display:block;}


/* ---------- Responsive improvements (mobile-first) ---------- */
@media (max-width: 520px){
  .ht-topbar{
    padding: 14px 14px 6px 14px;
    gap: 10px;
  }
  .ht-brand{min-width:auto}
  .ht-cta{min-width:auto}
  .ht-logo{width:54px;height:54px}
  .ht-title{
    font-size: 26px;
    letter-spacing: 1px;
    line-height: 1.1;
  }
  .ht-join{
    padding: 8px 12px;
    font-size: 12px;
    letter-spacing: .5px;
  }

  .ht-hero{padding: 8px 12px 0 12px}
  .ht-hero-inner{max-width: 100%;}
  .ht-hero-image{
    max-width: 100%;
    border-radius: 16px;
  }
  .ht-subtitle{
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 10px;
  }

  .ht-section{padding: 18px 12px 0 12px}
  .ht-h{font-size: 20px; letter-spacing: 1px;}
  .ht-p{font-size: 16px}

  .ht-card{padding: 14px 12px}
  .ht-card h3{font-size: 16px}
  .ht-card p{font-size: 14px}

  .ht-block{padding: 14px 12px}
  .ht-faq .q{padding: 14px 12px}

  .y4h-powered{
    right: 10px;
    bottom: 10px;
  }
  .y4h-powered img{width: 120px}
}

/* Tablet tweaks */
@media (min-width: 521px) and (max-width: 860px){
  .ht-topbar{padding: 18px 18px 8px 18px}
  .ht-logo{width:60px;height:60px}
  .ht-title{font-size: 40px}
  .ht-join{padding: 9px 14px}
  .ht-hero{padding: 10px 16px 0 16px}
  .ht-subtitle{font-size: 24px}
  .y4h-powered img{width: 145px}
}

/* Ensure fixed badge never overlaps important content on very short viewports */
@media (max-height: 700px){
  .y4h-powered img{width: 110px}
}


/* Allow header to wrap cleanly on small screens */
.ht-topbar{flex-wrap: wrap;}
.ht-title{order:2; width:100%;}
.ht-brand{order:1;}
.ht-cta{order:3;}
@media (min-width: 861px){
  .ht-topbar{flex-wrap: nowrap;}
  .ht-title{order:0; width:auto;}
  .ht-brand{order:0;}
  .ht-cta{order:0;}
}