/* =========================================================
   SINGER PORTFOLIO
   Clean, modern, responsive single-page design
   ========================================================= */

:root{
  --bg:#0c0d10;
  --bg-2:#121419;
  --surface:#17191f;
  --text:#f7f5f0;
  --muted:#a9a9ad;
  --line:rgba(255,255,255,.11);
  --gold:#d7a84b;
  --gold-light:#f0cb76;
  --cream:#f5efe3;
  --dark-text:#17171a;
  --container:1160px;
  --shadow:0 25px 70px rgba(0,0,0,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 40px));margin:auto}

.site-header{
  position:fixed;inset:0 0 auto;z-index:1000;
  background:rgba(12,13,16,.78);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(14px);
  transition:.3s ease;
}
.site-header.scrolled{border-color:var(--line);background:rgba(12,13,16,.94)}
.nav-wrap{height:78px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:2px}
.brand-mark{
  width:36px;height:36px;border:1px solid var(--gold);
  color:var(--gold);display:grid;place-items:center;border-radius:50%;
}
.brand-dot{color:var(--gold)}
.main-nav{margin-left:auto;display:flex;gap:27px}
.main-nav a{color:#d6d6d8;font-size:14px;position:relative;padding:28px 0}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:19px;height:2px;background:var(--gold);transform:scaleX(0);transition:.25s}
.main-nav a:hover,.main-nav a.active{color:#fff}
.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
.nav-cta{
  border:1px solid var(--gold);padding:10px 17px;border-radius:30px;
  color:var(--gold-light);font-size:13px;font-weight:700;white-space:nowrap;
}
.nav-toggle{display:none;background:none;border:0;color:white;font-size:22px}

.hero{
  min-height:100vh;display:grid;place-items:center;position:relative;
  background:
    linear-gradient(90deg,rgba(8,9,12,.95) 0%,rgba(8,9,12,.72) 48%,rgba(8,9,12,.28) 100%),
    url("assets/thumbnail.jpg") center/cover no-repeat;
}
.hero:before{
  content:"";position:absolute;inset:auto 0 0;height:35%;
  background:linear-gradient(transparent,var(--bg));
}
.hero-content{position:relative;z-index:2;padding:120px 0 70px}
.eyebrow,.section-kicker{
  color:var(--gold-light);font-size:11px;font-weight:700;letter-spacing:3px;
}
.eyebrow span{display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin-right:9px}
.hero h1{
  font-family:"Playfair Display",serif;font-size:clamp(50px,7vw,92px);
  line-height:1.03;max-width:800px;margin:20px 0;
}
em{font-style:normal;color:var(--gold-light)}
.hero-copy{max-width:610px;color:#d4d4d6;font-size:17px}
.hero-actions{display:flex;gap:13px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 22px;border-radius:4px;font-size:14px;font-weight:700;
  transition:.25s ease;
}
.btn-primary{background:var(--gold);color:#111}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-outline{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-light)}
.hero-socials{display:flex;gap:18px;margin-top:38px}
.hero-socials a{color:#bdbdc1;transition:.2s}
.hero-socials a:hover{color:var(--gold)}
.scroll-down{
  position:absolute;bottom:27px;left:50%;transform:translateX(-50%);
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);z-index:2;
}

.section{padding:105px 0}
.section-soft{background:#111318}
.section-heading{text-align:center;max-width:720px;margin:0 auto 55px}
.section-heading h2{font:600 clamp(35px,4vw,52px)/1.15 "Playfair Display",serif;margin:9px 0 13px}
.section-heading p{color:var(--muted);font-size:14px}
.split-heading{display:flex;justify-content:space-between;align-items:end;text-align:left;max-width:none}
.split-heading .text-link{margin-bottom:12px}

.about-grid{display:grid;grid-template-columns:390px 1fr;gap:70px;align-items:center}
.about-photo{position:relative}
.about-photo:before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);z-index:0}
.about-photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.85)}
.photo-badge{
  position:absolute;right:-34px;bottom:25px;z-index:2;background:var(--gold);color:#111;
  padding:16px 20px;display:flex;align-items:center;gap:12px
}
.photo-badge strong{font-size:30px;line-height:1}
.photo-badge span{font-size:10px;line-height:1.35;font-weight:700;text-transform:uppercase}
.mini-title{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:2px}
.about-content h3{font:600 32px/1.25 "Playfair Display",serif;margin:12px 0 18px}
.about-content p{color:var(--muted);font-size:15px}
.artist-details{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.artist-details div{border-top:1px solid var(--line);padding-top:10px}
.artist-details span{display:block;color:#888;font-size:10px;text-transform:uppercase;letter-spacing:1.5px}
.artist-details strong{font-size:13px}
.text-link{display:inline-flex;gap:9px;align-items:center;color:var(--gold-light);font-size:13px;font-weight:700}
.text-link:hover i{transform:translateX(4px)}
.text-link i{transition:.2s}

.music-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.music-card{background:var(--surface);border:1px solid var(--line);padding:15px;display:flex;gap:16px;min-width:0}
.album-art{width:125px;min-width:125px;aspect-ratio:1;display:grid;place-items:center;position:relative;overflow:hidden}
.album-art:before{content:"";position:absolute;inset:15%;border:1px solid rgba(255,255,255,.25);border-radius:50%}
.album-1{background:linear-gradient(135deg,#5c3b2e,#c9954a)}
.album-2{background:linear-gradient(135deg,#263442,#a46e45)}
.album-3{background:linear-gradient(135deg,#1e2029,#655037)}
.album-art i{font-size:27px;position:relative}
.album-art span{position:absolute;top:8px;left:9px;font-size:9px;letter-spacing:2px}
.music-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
.track-type{font-size:9px;letter-spacing:2px;color:var(--gold)}
.music-info h3{font:600 21px "Playfair Display",serif;margin:4px 0}
.music-info p{font-size:11px;color:#888;margin-bottom:10px}
audio{width:100%;height:30px}

.video-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:20px}
.video-placeholder{position:relative;aspect-ratio:16/10;overflow:hidden;background:#222}
.video-placeholder img{width:100%;height:100%;object-fit:cover;filter:brightness(.72);transition:.4s}
.video-card:hover img{transform:scale(1.04);filter:brightness(.55)}
.play-btn{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  background:rgba(10,10,10,.5);color:#fff;display:grid;place-items:center;font-size:17px;
}
.video-label{position:absolute;top:14px;left:14px;background:var(--gold);color:#111;padding:5px 8px;font-size:9px;font-weight:800;letter-spacing:1px}
.video-card h3{font:600 20px "Playfair Display",serif;margin-top:13px}
.video-card p{font-size:12px;color:#888}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}
.gallery-item{padding:0;border:0;overflow:hidden;background:#222;position:relative}
.gallery-item:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:.25s}
.gallery-item:hover:after{background:rgba(215,168,75,.15)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item.tall{grid-row:span 2}
.gallery-item.wide{grid-column:span 2}

.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{border:1px solid var(--line);padding:30px 23px;background:var(--surface);transition:.25s}
.service-card:hover,.service-card.featured{border-color:rgba(215,168,75,.55);transform:translateY(-5px)}
.service-icon{width:50px;height:50px;border:1px solid rgba(215,168,75,.45);color:var(--gold);display:grid;place-items:center;border-radius:50%;margin-bottom:22px}
.service-card h3{font:600 21px "Playfair Display",serif;margin-bottom:10px}
.service-card p{color:#999;font-size:13px;min-height:85px}
.service-card a{color:var(--gold-light);font-size:11px;font-weight:700}

.booking-banner{background:var(--gold);color:#111;padding:55px 0}
.booking-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.booking-banner .section-kicker{color:#5d4517}
.booking-banner h2{font:600 clamp(28px,4vw,44px)/1.15 "Playfair Display",serif;margin-top:8px}
.booking-banner em{color:#111}
.booking-banner .btn-primary{background:#111;color:#fff}
.booking-banner .btn-primary:hover{background:#222}

.contact-section{background:#0d0e11}
.contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}
.contact-info{display:flex;flex-direction:column;gap:14px}
.contact-card{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-card>span{width:43px;height:43px;border:1px solid rgba(215,168,75,.5);color:var(--gold);display:grid;place-items:center;border-radius:50%}
.contact-card small{display:block;color:#777;letter-spacing:1.5px;font-size:9px}
.contact-card strong{font-size:13px}
.social-row{display:flex;gap:15px;margin-top:15px}
.social-row a{width:40px;height:40px;border:1px solid var(--gold);display:grid;place-items:center;color:#aaa;border-radius:50%}
.social-row a:hover{border-color:var(--gold);color:var(--gold)}
.contact-form{background:var(--surface);border:1px solid var(--line);padding:30px}
.contact-form label{display:block;color:#aaa;font-size:11px;margin-bottom:17px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
input,select,textarea{
  width:100%;margin-top:7px;background:#101116;border:1px solid var(--line);
  color:#fff;padding:12px 13px;outline:none;border-radius:2px
}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{resize:vertical}
select option{background:#101116}
.submit-btn{border:0;width:100%;margin-top:3px}
.form-note{color:#666;font-size:10px;margin-top:12px;text-align:center}

.footer{border-top:1px solid var(--line);padding:25px 0;background:#0a0b0d}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer p{color:#666;font-size:11px}
.back-top{width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold); opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.3s ease;
   position: fixed;
    bottom: 25px;
    right: 25px;}
.back-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.lightbox,.video-modal{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.94);
  display:none;place-items:center;padding:30px
}
.lightbox.show,.video-modal.show{display:grid}
.lightbox img{max-width:min(1000px,95vw);max-height:90vh;object-fit:contain}
.lightbox-close{
  position:absolute;right:25px;top:20px;width:42px;height:42px;border:1px solid var(--line);
  background:#111;color:#fff;border-radius:50%;z-index:2
}
.video-modal video{width:min(1000px,94vw);max-height:82vh}
body.modal-open{overflow:hidden}

@media(max-width:1050px){
  .main-nav{gap:17px}
  .nav-wrap{gap:18px}
  .music-grid{grid-template-columns:1fr}
  .music-card{max-width:600px;margin:auto;width:100%}
  .service-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  .main-nav,.nav-cta{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .nav-wrap{height:68px}
  .main-nav.open{
    display:flex;position:absolute;top:68px;left:0;right:0;background:#0d0e11;
    border-bottom:1px solid var(--line);flex-direction:column;padding:12px 20px;gap:0
  }
  .main-nav.open a{padding:11px 0}
  .main-nav.open a:after{display:none}
  .about-grid{grid-template-columns:1fr;gap:50px}
  .about-photo{width:min(390px,85%);margin:auto}
  .video-grid{grid-template-columns:1fr 1fr}
  .video-large{grid-column:span 2}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item.wide{grid-column:span 2}
  .contact-grid{grid-template-columns:1fr}
  .booking-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .container{width:min(100% - 28px,var(--container))}
  .section{padding:75px 0}
  .hero-content{padding-top:105px}
  .hero h1{font-size:48px}
  .hero-copy{font-size:14px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .section-heading{margin-bottom:38px}
  .artist-details,.form-row{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
  .video-large{grid-column:auto}
  .gallery-grid{grid-auto-rows:170px}
  .service-grid{grid-template-columns:1fr}
  .service-card p{min-height:auto}
  .footer-inner{flex-direction:column;gap:15px;text-align:center}
  .split-heading{display:block}
  .split-heading .text-link{margin-top:15px}
  .photo-badge{right:-10px}
}

@media (max-width: 576px) {
    .hero {
        background:
            linear-gradient(90deg, rgba(8,9,12,.95) 0%, rgba(8,9,12,.72) 48%, rgba(8,9,12,.28) 100%),
            url("assets/thumbnail - Copy.jpg") center/cover no-repeat;
    }
}


/* Dark background */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
}

/* Video box */
.video-container {
  position: relative;
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

/* Close button */
.close-video {
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.size{
  min-width:370px;
  max-width:370px;
}
#videoimage1  {
width: 100%;
  height: auto;
}
@media (max-width: 576px) {
    .size {
       min-width:auto;
  max-width:auto;
    }
    
}

/*spotify audio model*/

.spotify-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 99999;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.spotify-modal.active {
    display: flex;
}

.spotify-modal-box {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: #111;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.spotify-player iframe {
    width: 100%;
    height: 152px;
    border: 0;
    border-radius: 12px;
}

.spotify-close {
    position: absolute;
    right: -12px;
    top: -12px;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    background: #fff;
    color: #111;

    font-size: 25px;
    line-height: 30px;

    cursor: pointer;
    z-index: 10;
}

.spotify-close:hover {
    background: #e74c3c;
    color: #fff;
}