@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Montserrat:wght@300;400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0a0a0a;color:#e8e4dc;font-family:'Montserrat',system-ui,sans-serif;font-weight:300;line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── HEADER ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(10,10,10,.96);backdrop-filter:blur(10px)}
.nav{max-width:1360px;margin:0 auto;padding:0 48px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:28px;letter-spacing:.22em;text-transform:uppercase;color:#c9a84c;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#e8e4dc;font-weight:400;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#c9a84c}
.nav-email{color:#e8e4dc;font-size:18px;transition:color .2s;line-height:1;display:flex;align-items:center}
.nav-email:hover{color:#c9a84c}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.18);color:#e8e4dc;padding:8px 14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;font-family:'Montserrat',sans-serif}

/* ── HERO ANIMATION ── */
@keyframes heroWordIn{
  from{opacity:0;transform:translateY(32px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.hero h1 .word{
  display:inline-block;
  animation:heroWordIn 1.1s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-sub{
  animation:heroWordIn 0.9s cubic-bezier(0.22,1,0.36,1) 1.1s both;
}
.scroll-down{
  animation:heroWordIn 0.8s cubic-bezier(0.22,1,0.36,1) 1.6s both;
}

/* ── HERO (homepage) ── */
.hero{height:100vh;min-height:640px;position:relative;display:flex;align-items:flex-end;padding-bottom:88px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.74) 100%)}
.hero-content{position:relative;z-index:1;width:100%;text-align:center;padding:0 48px}
.hero h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(44px,6.5vw,90px);line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.hero-sub{font-size:24px;letter-spacing:.2em;color:#e8e4dc;margin-bottom:34px}
.scroll-down{display:inline-flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#e8e4dc;cursor:pointer;background:none;border:none;font-family:'Montserrat',sans-serif}
.scroll-down::after{content:'';width:1px;height:26px;background:rgba(255,255,255,.55)}

/* ── PAGE HERO (bio) ── */
.page-hero{height:100vh;min-height:640px;position:relative;display:flex;align-items:flex-end;padding-bottom:88px;overflow:hidden;scroll-margin-top:68px}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.8) 100%)}
.page-hero-content{position:relative;z-index:1;width:100%;text-align:center;padding:0 48px}
.page-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(52px,7.5vw,96px);letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:1;margin-bottom:16px}
.page-title .word{display:inline-block;animation:heroWordIn 1.1s cubic-bezier(0.22,1,0.36,1) both}
.page-sub{font-size:12px;letter-spacing:.18em;color:#e8e4dc;margin-bottom:34px;animation:heroWordIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.66s both}
.page-hero-content .scroll-down{animation-delay:1.2s}

/* ── INNER PAGE BANNER (video / audio / photos / contact) ── */
.inner-banner{padding:calc(68px + 20px) 48px 36px;background:#0a0a0a;text-align:center}
.inner-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(34px,5.5vw,70px);letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1}
.inner-sub{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:300;color:rgba(255,255,255,.5);letter-spacing:.04em;max-width:640px;margin:18px auto 0;line-height:1.7}

/* ── HOME CONTENT ── */
.section{background:#383838;padding:92px 48px}
.section-inner{max-width:1200px;margin:0 auto}
.home-split{display:grid;grid-template-columns:1fr 1.5fr;gap:72px;align-items:start}
.home-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#c9a84c;margin-bottom:48px;display:block}
.home-heading{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(32px,3.5vw,52px);line-height:1.06;text-transform:uppercase;letter-spacing:.025em;color:#fff}
.home-body{font-size:14px;line-height:1.88;color:#b5b0a7;margin-bottom:1.4em}.home-body:last-child{margin-bottom:0}.home-body a{color:#c9a84c;text-decoration:none}.home-body a:hover{text-decoration:underline}

/* ── BIO ── */
.bio-section{background:#383838;padding:92px 48px}
.bio-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:200px 1fr;gap:72px}
.bio-sidebar-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#c9a84c;margin-bottom:24px;display:block}
.bio-sidebar-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;line-height:1.65;color:#c9a84c;border-left:2px solid rgba(201,168,76,.3);padding-left:16px}
.bio-sidebar-photo{display:block;width:100%;margin-top:28px}
.bio-mobile-photo{display:none}
.bio-main-heading{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2vw,25px);font-weight:300;line-height:1.35;text-transform:uppercase;letter-spacing:.04em;color:#fff;margin-bottom:38px;max-width:680px}
.bio-main p{font-size:14px;line-height:1.92;color:#b5b0a7;margin-bottom:22px}
.bio-main p:last-child{margin-bottom:0}

/* ── TEAM ROSTER (Meet the Artists section on the-team.html) ── */
.team-roster{background:#0e0d0c;padding:92px 48px}
.team-roster-inner{max-width:1100px;margin:0 auto;text-align:center}
.team-roster-eyebrow{display:block;font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#c9a84c;margin-bottom:16px}
.team-roster-heading{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(28px,4vw,52px);color:#fff;letter-spacing:.06em;margin-bottom:56px}
.team-roster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.team-roster-card{display:flex;flex-direction:column;gap:8px;padding:40px 32px;border:1px solid rgba(255,255,255,.08);text-decoration:none;transition:border-color .25s,background .25s}
.team-roster-card:hover{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.04)}
.team-roster-name{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.5vw,28px);font-weight:300;color:#fff;letter-spacing:.04em}
.team-roster-role{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:300;color:rgba(255,255,255,.45);letter-spacing:.08em;line-height:1.5}
.team-roster-cta{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.12em;color:#c9a84c;margin-top:12px;transition:letter-spacing .2s}
.team-roster-card:hover .team-roster-cta{letter-spacing:.18em}
@media(max-width:768px){.team-roster-grid{grid-template-columns:1fr}.team-roster{padding:64px 24px}}

/* ── TEAM MEMBER SECTIONS (Gary / Eric / Ricardo on the-team.html) ── */
.team-member-header{min-height:52vh;display:flex;align-items:flex-end;padding:68px 48px 72px;background:linear-gradient(160deg,#1a1208 0%,#0e0d0c 55%,#0a0a0a 100%);text-align:center;position:relative;scroll-margin-top:68px}
.team-member-header::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:48px;height:1px;background:rgba(201,168,76,.35)}
.team-member-header-inner{width:100%}
.team-member-eyebrow{font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#c9a84c;margin-bottom:20px;display:block;opacity:0;transform:translateY(16px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1)}
.team-member-name{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(48px,6.5vw,88px);letter-spacing:.06em;color:#fff;line-height:1;margin-bottom:16px}
.team-member-name .word{display:inline-block;opacity:0;transform:translateY(32px);filter:blur(4px);transition:opacity 1.1s cubic-bezier(0.22,1,0.36,1),transform 1.1s cubic-bezier(0.22,1,0.36,1),filter 1.1s cubic-bezier(0.22,1,0.36,1)}
.team-member-role{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#b3b3b3;opacity:0;transform:translateY(16px);transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1),transform 0.9s cubic-bezier(0.22,1,0.36,1)}
.team-member-header.visible .team-member-eyebrow{opacity:1;transform:translateY(0)}
.team-member-header.visible .team-member-name .word{opacity:1;transform:translateY(0);filter:blur(0)}
.team-member-header.visible .team-member-role{opacity:1;transform:translateY(0)}
.team-member-body{background:#0a0a0a;padding:80px 48px 120px;text-align:center}
.team-member-msg{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(18px,2.2vw,24px);color:rgba(255,255,255,.28);letter-spacing:.04em;line-height:1.6}

/* ── VIDEO ── */
.video-section{background:#2d2d2d;padding:0 48px 92px}
.video-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.video-item{cursor:pointer}
.video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .3s;display:block}
.video-item:hover .video-thumb img{transform:scale(1.04);opacity:.72}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.22);transition:background .2s}
.video-play::after{content:'';width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:22px solid rgba(255,255,255,.88)}
.video-item:hover .video-play{background:rgba(0,0,0,.06)}
.video-caption{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#ccc;padding:10px 0;text-align:center;line-height:1.5}
.video-item iframe{width:100%;aspect-ratio:16/9;border:none;display:block}

/* ── AUDIO ── */
.audio-section{background:#2d2d2d;padding:0 48px 92px;min-height:calc(100vh - 68px)}
.audio-inner{max-width:640px;margin:0 auto}
#waveform{width:100%;margin-bottom:16px;cursor:pointer}
.audio-controls{display:flex;align-items:center;gap:20px;margin-bottom:6px}
.ctrl-btn{background:none;border:none;color:#e8e4dc;cursor:pointer;padding:4px;display:flex;align-items:center;line-height:1;transition:color .2s}
.ctrl-btn:hover{color:#c9a84c}
.track-info{flex:1;font-size:12px;letter-spacing:.07em;color:#e8e4dc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vol-wrap{display:flex;align-items:center;gap:8px}
.vol-wrap input[type=range]{width:56px;accent-color:#c9a84c;cursor:pointer}
.track-list{margin-top:36px;border-top:1px solid rgba(255,255,255,.1)}
.track-item{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;font-size:12px;letter-spacing:.07em;color:#888;transition:color .2s}
.track-item:hover{color:#e8e4dc}
.track-item.is-active{color:#c9a84c}
.track-num{width:20px;text-align:right;font-size:11px;color:#555;flex-shrink:0}
.track-item.is-active .track-num{color:#c9a84c}

/* ── PHOTOS ── */
.photos-section{background:#2d2d2d;padding:0 48px 92px}
.masonry{max-width:1280px;margin:0 auto;columns:4;column-gap:10px}
.masonry-item{break-inside:avoid;margin-bottom:10px;overflow:hidden}
.masonry-item img{width:100%;display:block;transition:transform .4s,filter .3s;filter:brightness(.88)}
.masonry-item:hover img{transform:scale(1.04);filter:brightness(1)}

/* ── CONTACT ── */
.contact-section{background:#2d2d2d;padding:0 48px 92px}
.contact-inner{max-width:500px;margin:0 auto;padding-top:32px}
.contact-heading{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.2vw,40px);font-weight:300;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:center;margin-bottom:8px}
.contact-sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#c9a84c;text-align:center;margin-bottom:28px}
.contact-note{font-size:13px;line-height:1.75;color:#b5b0a7;text-align:center;margin-bottom:28px}
.req-note{font-size:11px;color:#666;margin-bottom:20px}
.req-note span{color:#c44}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:18px}
.field label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#ccc;margin-bottom:7px}
.field label .r{color:#c44;margin-left:2px}
.field input,.field textarea{width:100%;background:#fff;color:#111;border:none;padding:12px 14px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:300;outline:none}
.field input:focus,.field textarea:focus{outline:2px solid #c9a84c;outline-offset:-2px}
.field textarea{min-height:160px;resize:vertical}
.char-hint{font-size:11px;color:#555;margin-top:4px}
.submit-btn{background:none;border:1px solid #e8e4dc;color:#e8e4dc;padding:14px 40px;font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .2s;width:100%;margin-top:8px}
.submit-btn:hover{background:#e8e4dc;color:#111}

/* ── FOOTER ── */
.site-footer{background:#0a0a0a;border-top:1px solid rgba(255,255,255,.07);padding:36px 48px}
.footer-inner{max-width:1360px;margin:0 auto}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px;flex-wrap:wrap}
.footer-brand{font-family:'Cormorant Garamond',serif;font-size:17px;letter-spacing:.22em;text-transform:uppercase;color:#c9a84c}
.footer-links{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.footer-links a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#777;transition:color .2s}
.footer-links a:hover{color:#e8e4dc}
.footer-email{color:#777;font-size:17px;transition:color .2s;display:flex;align-items:center}
.footer-email:hover{color:#c9a84c}
.footer-copy{font-size:11px;letter-spacing:.1em;color:#444;text-align:center}

/* ── VIDEO LIGHTBOX ── */
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes overlayOut{from{opacity:1}to{opacity:0}}
.video-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.96);
  display:flex;align-items:center;justify-content:center;
  animation:overlayIn .18s ease forwards;
}
.video-overlay.video-overlay-out{animation:overlayOut .18s ease forwards}
.video-overlay-close{
  position:fixed;top:20px;right:24px;
  background:none;border:none;color:#fff;
  font-size:36px;line-height:1;cursor:pointer;
  opacity:.55;transition:opacity .2s;z-index:501;padding:8px 12px;
}
.video-overlay-close:hover{opacity:1}
.video-overlay-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.video-overlay-inner{
  width:min(92vw,calc(82vh * 16 / 9));
  aspect-ratio:16/9;
}
.video-overlay-inner iframe{width:100%;height:100%;border:none;display:block}
@keyframes btnBlink{0%,100%{opacity:.75}50%{opacity:.2}}
.video-fullscreen-btn{background:none;border:none;color:#e8e4dc;font-family:'Montserrat',sans-serif;font-size:13px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;padding:4px 0;animation:btnBlink 2.2s ease-in-out infinite}
.video-fullscreen-btn:hover{animation:none;opacity:1}

/* ── NAV DROPDOWN ── */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-dropdown-toggle::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
  transition: transform .2s;
}
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown.open .nav-dropdown-toggle::after { transform: rotate(180deg); }

.nav-dropdown-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(10,10,10,.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 10px solid transparent;
  background-clip: padding-box;
  padding: 6px 0;
  list-style: none;
  min-width: 172px;
  z-index: 300;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-dropdown:hover .nav-dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.nav-dropdown-menu li a {
  display: block;
  padding: 10px 22px;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #b3b3b3;
  white-space: nowrap;
  font-weight: 400;
  transition: color .15s, background .15s;
}
.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li a.active { color: #c9a84c; background: rgba(255,255,255,.04); }

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .nav{padding:0 16px}
  .brand{font-size:20px;letter-spacing:.14em}
  .nav-email{display:none}
  .video-fullscreen-btn{display:none}
  .hero{height:65vh}
  .hero-bg{background-position:50% top}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:68px;left:0;right:0;background:#0a0a0a;padding:28px 24px;gap:22px;border-bottom:1px solid rgba(255,255,255,.08);z-index:199}
  .menu-btn{display:block}
  .nav-dropdown-menu{position:static;visibility:visible;opacity:1;pointer-events:auto;transform:none;background:none;backdrop-filter:none;border:none;padding:4px 0 4px 14px;min-width:0;display:none;transition:none}
  .nav-dropdown.open .nav-dropdown-menu{display:block}
  .nav-dropdown-menu li a{padding:7px 0;font-size:11px;color:#888;letter-spacing:.14em}
  .nav-dropdown-menu li a:hover,.nav-dropdown-menu li a.active{background:none}
  .home-split{grid-template-columns:1fr}
  .bio-inner{grid-template-columns:1fr}
  .bio-sidebar{display:none}
  .bio-mobile-photo{display:block;width:100%;margin-bottom:28px}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2}
  .section,.bio-section,.video-section,.audio-section,.photos-section,.contact-section{padding-left:24px;padding-right:24px}
  .footer-row{gap:20px}
}
@media(max-width:600px){
  .video-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .inner-title{font-size:clamp(28px,8vw,50px)}
  .hero-bg{background-image:image-set(url('../images/mobile/hero-home.webp') type('image/webp'),url('../images/mobile/hero-home.jpg') type('image/jpeg')) !important}
  #james .page-hero-bg{background-image:image-set(url('../images/mobile/hero-bio.webp') type('image/webp'),url('../images/mobile/hero-bio.jpg') type('image/jpeg')) !important}
  #gary .page-hero-bg{background-image:image-set(url('../images/mobile/garylevinson.webp') type('image/webp'),url('../images/mobile/garylevinson.jpg') type('image/jpeg')) !important}
  #eric .page-hero-bg{background-image:image-set(url('../images/mobile/ericsilberger.webp') type('image/webp'),url('../images/mobile/ericsilberger.jpg') type('image/jpeg')) !important}
  #ricardo .page-hero-bg{background-image:image-set(url('../images/ricardo-mobile.webp') type('image/webp'),url('../images/ricardo-mobile.jpg') type('image/jpeg')) !important}
}