:root{
  --orange:#ff6700;
  --green:#1f9b5f;
  --yellow:#faac03;
  --ink:#231a12;
  --cream:#fbf4e9;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',sans-serif;
  color:var(--cream);
  min-height:100%;
  position:relative;
  overflow-x:hidden;
}

/* Background photo slideshow */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:#1a120b;
}
.bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation:bgfade 21s infinite;
}
.bg-img:nth-child(1){animation-delay:0s}
.bg-img:nth-child(2){animation-delay:7s}
.bg-img:nth-child(3){animation-delay:14s}
@keyframes bgfade{
  0%{opacity:0}
  5%{opacity:1}
  33%{opacity:1}
  38%{opacity:0}
  100%{opacity:0}
}
.bg-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(20,14,8,.72) 0%, rgba(20,14,8,.55) 45%, rgba(20,14,8,.82) 100%);
}

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:720px;
  min-height:100vh;
  margin:0 auto;
  padding:48px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.mark{
  width:58px;height:58px;margin:0 auto 30px;
  opacity:.92;
}
.mark svg{width:100%;height:100%}

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(251,244,233,.72);
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:34px;height:1px;background:var(--yellow);opacity:.85;
}

h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(52px,11vw,96px);
  line-height:.98;
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.4);
}
h1 span{color:var(--orange)}

.tagline{
  margin-top:14px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:clamp(14px,1.8vw,16px);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--yellow);
}

.sub{
  margin-top:26px;
  font-size:clamp(16.5px,2.2vw,19px);
  font-weight:400;
  line-height:1.65;
  color:rgba(251,244,233,.86);
  max-width:480px;
}

.quote{
  margin-top:22px;
  font-family:'Space Grotesk',sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:15px;
  line-height:1.6;
  color:var(--yellow);
  max-width:440px;
  border-left:2px solid var(--orange);
  padding-left:16px;
  text-align:left;
}

.rule{
  width:64px;height:2px;
  margin:38px auto 0;
  background:linear-gradient(90deg,var(--orange),var(--yellow));
  border-radius:2px;
}

.badge{
  margin-top:38px;
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  padding:11px 24px;
  border-radius:100px;
  backdrop-filter:blur(6px);
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(31,155,95,.22);
}

.contact{
  margin-top:44px;
  font-size:14px;
  line-height:1.6;
  color:rgba(251,244,233,.6);
}
.contact a{
  display:inline-block;
  margin-top:6px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:16px;
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid rgba(251,244,233,.4);
  transition:border-color .2s, color .2s;
}
.contact a:hover{
  color:var(--yellow);
  border-color:var(--yellow);
}

footer{
  margin-top:54px;
  padding-top:22px;
  border-top:1px solid rgba(251,244,233,.14);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(251,244,233,.42);
}
@media (max-width:480px){
  .wrap{padding:32px 18px}
}