*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;background:#000;color:#fff}
.hero{
  width:100vw;
  height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  padding:48px;
  background-image:url("assets/hero.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.58) 38%,rgba(0,0,0,.16) 100%);
}
.content{position:relative;z-index:2;max-width:690px}
.tag{color:#d6b46d;text-transform:uppercase;letter-spacing:.22em;font-size:.95rem;margin:0 0 14px}
h1{margin:0;font-size:clamp(3.2rem,7vw,6.1rem);line-height:.95;text-transform:uppercase;letter-spacing:.04em}
.intro{margin:24px 0 30px;max-width:660px;font-size:clamp(1rem,1.8vw,1.28rem);line-height:1.5}
.buttons{display:flex;flex-wrap:wrap;gap:14px}
.buttons a{color:#fff;text-decoration:none;border:1px solid rgba(214,180,109,.85);border-radius:999px;padding:12px 18px;font-weight:700;background:rgba(0,0,0,.28)}
@media(max-width:700px){
  .hero{padding:30px 24px;background-position:62% center;align-items:center}
  .overlay{background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.68) 62%,rgba(0,0,0,.24) 100%)}
  h1{font-size:3.4rem}
  .intro{font-size:1.05rem}
  .buttons a{width:100%;text-align:center}
}

.bio-page{
  margin:0;
  min-height:100vh;
  background:#050505;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  overflow:auto;
}
.bio-wrap{
  max-width:900px;
  margin:0 auto;
  padding:55px 28px 80px;
}
.bio-wrap h1{
  margin:20px 0 30px;
  font-size:clamp(2.8rem,7vw,5rem);
  text-transform:uppercase;
}
.bio-wrap p{
  font-size:1.15rem;
  line-height:1.75;
  color:#e8e8e8;
}
.back-link{
  color:#d6b46d;
  text-decoration:none;
  font-weight:700;
}


/* Biography snake layout */
.bio-page{
  margin:0;
  min-height:100vh;
  background:#000;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  overflow:auto;
}
.bio-layout{
  max-width:1320px;
  margin:0 auto;
  padding:42px 48px 85px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.72fr);
  gap:60px 70px;
  align-items:start;
}
.back-link{
  color:#d6b46d;
  text-decoration:none;
  font-weight:700;
}
.bio-text h1{
  margin:28px 0 18px;
  font-size:clamp(3rem,7vw,5rem);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.gold-line{
  width:190px;
  height:2px;
  background:linear-gradient(90deg,#d6b46d 0 42%,rgba(214,180,109,.25) 42% 100%);
  margin:0 0 34px;
}
.bio-text p,.bio-final p{
  font-size:1.08rem;
  line-height:1.68;
  color:#e8e8e8;
  margin:0 0 24px;
}
.bio-side{
  padding-top:150px;
}
.bio-portrait,.bio-dog img{
  width:100%;
  display:block;
  border-radius:22px;
  border:1px solid rgba(214,180,109,.75);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.bio-side blockquote{
  margin:28px 0 0;
  color:#eee;
  font-size:1.25rem;
  line-height:1.55;
  font-style:italic;
  border-left:4px solid #d6b46d;
  padding-left:22px;
}
.bio-dog{
  grid-column:1;
}
.bio-final{
  grid-column:2;
  padding-top:8px;
}
@media(max-width:900px){
  .bio-layout{display:block;padding:34px 24px 70px}
  .bio-side{padding-top:24px}
  .bio-dog{margin-top:34px}
  .bio-final{padding-top:28px}
}


/* Contact page */
.contact-page{
  margin:0;
  min-height:100vh;
  background:#000;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  overflow:auto;
}
.contact-wrap{
  max-width:900px;
  margin:0 auto;
  padding:55px 28px 80px;
}
.contact-wrap h1{
  margin:28px 0 18px;
  font-size:clamp(3rem,7vw,5rem);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.contact-intro{
  font-size:1.25rem;
  line-height:1.6;
  color:#e8e8e8;
  margin:0 0 34px;
}
.contact-list{
  display:grid;
  gap:16px;
}
.contact-list a{
  display:block;
  padding:20px 22px;
  border:1px solid rgba(214,180,109,.55);
  border-radius:18px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.035);
}
.contact-list a span{
  display:block;
  color:#d6b46d;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
  margin-bottom:7px;
}
.contact-list a:hover{
  border-color:#d6b46d;
}
@media(max-width:700px){
  .contact-wrap{padding:34px 24px 70px}
}


/* Reels & Demos page */
.demos-page{
  margin:0;
  min-height:100vh;
  background:#000;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  overflow:auto;
}
.demos-wrap{
  max-width:1050px;
  margin:0 auto;
  padding:55px 28px 90px;
}
.demos-wrap h1{
  margin:28px 0 18px;
  font-size:clamp(2.7rem,7vw,5rem);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.demos-intro{
  color:#e8e8e8;
  font-size:1.18rem;
  line-height:1.6;
  margin:0 0 32px;
}
.demo-section{
  border:1px solid rgba(214,180,109,.55);
  border-radius:20px;
  margin:18px 0;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}
.demo-section summary{
  cursor:pointer;
  padding:22px 24px;
  color:#fff;
  font-size:1.35rem;
  font-weight:700;
  list-style:none;
}
.demo-section summary::-webkit-details-marker{display:none}
.demo-section summary span{
  color:#d6b46d;
  font-size:.95rem;
  font-weight:700;
  margin-left:10px;
}
.demo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  padding:0 22px 24px;
}
.demo-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:18px;
  background:rgba(0,0,0,.35);
}
.demo-card h3{
  margin:0 0 14px;
  font-size:1rem;
  line-height:1.35;
  color:#fff;
}
.demo-card audio{
  width:100%;
}
.coming-soon{
  color:#ccc;
}
@media(max-width:700px){
  .demos-wrap{padding:34px 22px 70px}
  .demo-grid{grid-template-columns:1fr}
  .demo-section summary{font-size:1.15rem}
}