/*
Theme Name: The Artistic Mafia
Theme URI: https://theartisticmafia.com
Author: The Artistic Mafia
Description: Custom cinematic production house theme for The Artistic Mafia.
Version: 1.0
Text Domain: artistic-mafia
*/

:root{
  --black:#080808;
  --black-2:#0f0f0f;
  --black-3:#151515;
  --gold:#c9a96e;
  --gold-dim:#8a7550;
  --off:#f0ece4;
  --off-dim:#a7a297;
  --line:rgba(240,236,228,0.1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--off);
  font-family:'Inter',sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:0.01em;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
.container{max-width:1240px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.container{padding:0 20px;}}

/* ===== NAV ===== */
header.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;
  background:linear-gradient(to bottom, rgba(8,8,8,0.9), transparent);
  transition:background .4s ease, padding .4s ease;
}
header.site-header.scrolled{
  background:rgba(8,8,8,0.92);
  backdrop-filter:blur(10px);
  padding:14px 40px;
  border-bottom:1px solid var(--line);
}
.nav-left{display:flex;gap:32px;align-items:center;}
.nav-left a{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--off-dim);transition:color .25s;}
.nav-left a:hover{color:var(--gold);}
.logo{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;
  letter-spacing:0.12em;
  color:var(--off);
  display:flex;align-items:center;gap:10px;
}
.logo img{width:34px;height:34px;border-radius:50%;}
.nav-right{display:flex;align-items:center;gap:20px;}
.icon-btn{width:18px;height:18px;color:var(--off-dim);transition:color .25s,transform .25s;}
.icon-btn:hover{color:var(--gold);transform:translateY(-2px);}
.cta-pill{
  border:1px solid var(--gold);
  color:var(--gold);
  padding:9px 22px;
  font-size:0.74rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-radius:100px;
  transition:background .25s,color .25s;
  white-space:nowrap;
}
.cta-pill:hover{background:var(--gold);color:var(--black);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1200;background:none;border:none;}
.hamburger span{width:24px;height:1px;background:var(--off);transition:.3s;}

@media(max-width:960px){
  .nav-left{display:none;}
  .nav-right .icon-btn,.nav-right .cta-pill,.nav-right .nav-link-pill{display:none;}
  header.site-header{padding:20px 22px;}
  .hamburger{display:flex;}
}

.mobile-menu{
  position:fixed;inset:0;background:var(--black);z-index:1100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.77,0,.18,1);
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--off);}
.mobile-menu .social-row{display:flex;gap:24px;margin-top:20px;}
.mobile-menu .social-row .icon-btn{width:22px;height:22px;}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;position:relative;
  padding:140px 24px 80px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.09), transparent 60%),
    var(--black);
}
.hero-tag{margin-bottom:26px;}
.hero h1{
  font-size:clamp(3rem,9vw,7.5rem);
  line-height:0.98;
  color:var(--off);
  letter-spacing:0.01em;
}
.hero h1 .accent{color:var(--gold);font-style:italic;}
.hero p.sub{
  margin-top:28px;
  max-width:560px;
  color:var(--off-dim);
  font-size:1.02rem;
  line-height:1.7;
}
.hero-actions{margin-top:44px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.btn-solid{
  background:var(--gold);color:var(--black);
  padding:15px 34px;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;
  border-radius:100px;font-weight:500;transition:transform .25s, box-shadow .25s;
  display:inline-block;border:none;cursor:pointer;font-family:'Inter',sans-serif;
}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(201,169,110,0.25);}
.btn-outline{
  border:1px solid var(--line);color:var(--off);
  padding:15px 34px;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;
  border-radius:100px;transition:border-color .25s, color .25s;
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.scroll-cue{
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
  font-size:0.68rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--off-dim);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-cue::after{
  content:'';width:1px;height:38px;background:linear-gradient(var(--gold),transparent);
  animation:scrollpulse 1.8s ease-in-out infinite;
}
@keyframes scrollpulse{0%,100%{opacity:.3;}50%{opacity:1;}}

.marquee-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;overflow:hidden;white-space:nowrap;background:var(--black-2);
}
.marquee{display:inline-flex;gap:28px;align-items:center;animation:marquee 44s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.client-chip{
  display:inline-flex;align-items:center;justify-content:center;
  height:60px;padding:6px 16px;background:#fff;border-radius:8px;flex-shrink:0;
}
.client-chip img{max-height:44px;max-width:130px;object-fit:contain;display:block;}
.client-chip-text{
  background:transparent;border:1px solid var(--line);color:var(--off-dim);
  font-family:'Cormorant Garamond',serif;font-size:1.05rem;letter-spacing:0.04em;
  white-space:nowrap;height:auto;padding:10px 22px;border-radius:100px;
}

section{padding:120px 0;}
@media(max-width:640px){section{padding:80px 0;}}
.sec-head{max-width:680px;margin-bottom:56px;}
.sec-head h2{font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--off);margin-top:14px;line-height:1.08;}
.sec-head p{color:var(--off-dim);margin-top:18px;font-size:1rem;line-height:1.7;max-width:520px;}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px;}
.filter-btn{
  border:1px solid var(--line);background:transparent;color:var(--off-dim);
  padding:10px 20px;border-radius:100px;font-size:0.74rem;letter-spacing:0.1em;
  text-transform:uppercase;cursor:pointer;transition:all .25s;font-family:'Inter',sans-serif;
}
.filter-btn:hover{color:var(--off);border-color:var(--gold-dim);}
.filter-btn.active{background:var(--gold);color:var(--black);border-color:var(--gold);}

.work-grid{columns:3 300px;column-gap:26px;}
@media(max-width:960px){.work-grid{columns:2 260px;}}
@media(max-width:640px){.work-grid{columns:1;}}

.work-card{
  position:relative;border-radius:4px;overflow:hidden;
  aspect-ratio:4/3;background:var(--black-3);cursor:pointer;
  border:1px solid var(--line);display:block;
  break-inside:avoid;margin-bottom:26px;width:100%;
}
.work-card.is-video{aspect-ratio:16/9;}
.work-card.is-reel{aspect-ratio:9/16;}
.work-card.is-photo{aspect-ratio:4/3;}
.work-card.hidden{display:none;}
.work-card img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(45%) brightness(0.75);
  transition:transform .6s ease, filter .6s ease;
}
.work-card:hover img{transform:scale(1.07);filter:grayscale(0%) brightness(0.9);}
.work-card .noimg-bg{
  width:100%;height:100%;
  background:linear-gradient(160deg, #1c1a16, #0c0c0c 70%);
  display:flex;align-items:center;justify-content:center;
}
.work-card .noimg-bg svg{width:44px;height:44px;color:var(--gold-dim);opacity:.7;}
.work-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.05) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
}
.work-cat{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.work-title{font-family:'Cormorant Garamond',serif;font-size:1.28rem;line-height:1.25;color:var(--off);}
.play-badge{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(240,236,228,0.35);display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,8,0.4);backdrop-filter:blur(4px);
}
.play-badge svg{width:13px;height:13px;color:var(--off);margin-left:2px;}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:40px;}}
.about-copy p{color:var(--off-dim);line-height:1.85;margin-bottom:20px;font-size:1.02rem;}
.stat-row{display:flex;gap:48px;margin-top:36px;flex-wrap:wrap;}
.stat h3{font-size:2.6rem;color:var(--gold);}
.stat span{display:block;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--off-dim);margin-top:6px;}

.service-list{display:flex;flex-direction:column;}
.service-item{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;align-items:baseline;gap:20px;}
.service-item:last-child{border-bottom:1px solid var(--line);}
.service-item h4{font-size:1.35rem;color:var(--off);}
.service-item p{color:var(--off-dim);font-size:0.88rem;max-width:260px;text-align:right;}
@media(max-width:640px){.service-item{flex-direction:column;gap:8px;}.service-item p{text-align:left;}}

.contact-section{background:var(--black-2);border-top:1px solid var(--line);}
.contact-inner{text-align:center;max-width:720px;margin:0 auto;}
.contact-inner h2{font-size:clamp(2.4rem,6vw,4.2rem);color:var(--off);margin-top:16px;line-height:1.05;}
.contact-inner p{color:var(--off-dim);margin-top:22px;font-size:1.05rem;}
.contact-methods{margin-top:52px;display:flex;justify-content:center;gap:56px;flex-wrap:wrap;}
.contact-method{text-align:center;}
.contact-method .icon-btn{width:24px;height:24px;margin:0 auto 14px;color:var(--gold);}
.contact-method a,.contact-method div{font-size:0.95rem;color:var(--off);}
.contact-method span{display:block;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--off-dim);margin-bottom:10px;}
.hire-banner{
  margin-top:60px;border:1px solid var(--gold-dim);border-radius:100px;
  display:inline-flex;align-items:center;gap:18px;padding:10px 10px 10px 26px;
}
.hire-banner span{font-size:0.85rem;color:var(--off);}

/* contact form */
.contact-form-wrap{max-width:560px;margin:60px auto 0;text-align:left;}
.contact-form-wrap .eyebrow{text-align:center;display:block;margin-bottom:10px;}
.form-msg{padding:14px 18px;border-radius:6px;margin-bottom:20px;font-size:0.9rem;text-align:center;}
.form-msg.success{background:rgba(46,160,90,0.12);border:1px solid rgba(46,160,90,0.4);color:#8fe0ab;}
.form-msg.error{background:rgba(200,60,60,0.12);border:1px solid rgba(200,60,60,0.4);color:#f0a5a5;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.tam-form input, .tam-form textarea{
  width:100%;background:var(--black-3);border:1px solid var(--line);color:var(--off);
  padding:14px 16px;border-radius:6px;font-family:'Inter',sans-serif;font-size:0.92rem;
}
.tam-form textarea{min-height:120px;resize:vertical;margin-bottom:20px;}
.tam-form input:focus, .tam-form textarea:focus{outline:none;border-color:var(--gold-dim);}
.tam-form button{width:100%;}
.tam-form .hp-field{position:absolute;left:-9999px;}

footer.site-footer{padding:50px 0 36px;border-top:1px solid var(--line);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.footer-inner .logo{font-size:1.2rem;}
.footer-inner .logo img{width:28px;height:28px;border-radius:50%;}
.footer-links{display:flex;gap:26px;flex-wrap:wrap;}
.footer-links a{font-size:0.78rem;color:var(--off-dim);letter-spacing:0.05em;transition:color .25s;}
.footer-links a:hover{color:var(--gold);}
.footer-social{display:flex;gap:18px;}
.footer-bottom{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:0.72rem;color:var(--off-dim);letter-spacing:0.03em;}

.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:900;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);transition:transform .25s;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px;height:28px;color:#fff;}

/* ===== TAB SYSTEM ===== */
.tab-panel{display:none;padding:0;}
.tab-panel.active{display:block;animation:tamFadeIn .5s ease;}
@keyframes tamFadeIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

.tab-banner{
  padding:200px 0 90px;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
}
.tab-banner-inner{max-width:680px;margin:0 auto;text-align:center;padding:0 24px;}
.tab-banner-inner h2{font-size:clamp(2.6rem,6vw,4.4rem);color:var(--off);margin-top:14px;}
.tab-banner-inner p{color:var(--off-dim);margin-top:18px;font-size:1.02rem;line-height:1.7;}

/* ===== ORBIT DIAGRAM ===== */
.orbit-section{padding:40px 0 100px;}
.orbit-wrap{
  position:relative;width:520px;height:520px;margin:60px auto 0;
  max-width:92vw;
}
.orbit-ring{position:absolute;inset:0;}
.orbit-node{
  position:absolute;top:50%;left:50%;width:78px;height:78px;margin:-39px 0 0 -39px;
  border-radius:50%;background:var(--black-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;cursor:pointer;
  transition:transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
  transform:rotate(calc(360deg / var(--n) * var(--i))) translate(210px) rotate(calc(-360deg / var(--n) * var(--i)));
}
.orbit-node span{transform:none;display:block;}
.orbit-node:hover, .orbit-node.is-active{
  background:var(--gold);border-color:var(--gold);box-shadow:0 10px 30px rgba(201,169,110,0.35);
  transform:rotate(calc(360deg / var(--n) * var(--i))) translate(210px) rotate(calc(-360deg / var(--n) * var(--i))) scale(1.12);
}
.orbit-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:270px;height:270px;border-radius:50%;background:radial-gradient(circle at 50% 30%, var(--black-3), var(--black));
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:26px;
}
.orbit-center img{width:44px;height:44px;border-radius:50%;margin-bottom:14px;}
.orbit-copy h4{font-size:1.2rem;color:var(--off);margin-bottom:8px;}
.orbit-copy p{font-size:0.85rem;color:var(--off-dim);line-height:1.5;}
.orbit-list-mobile{display:none;}

@media(max-width:760px){
  .orbit-wrap{display:none;}
  .orbit-list-mobile{
    display:flex;flex-direction:column;gap:14px;margin-top:40px;max-width:520px;margin-left:auto;margin-right:auto;
  }
  .orbit-list-item{
    display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--black-2);
  }
  .orbit-list-icon{font-size:1.6rem;flex-shrink:0;}
  .orbit-list-item h4{color:var(--off);font-size:1.1rem;margin-bottom:6px;}
  .orbit-list-item p{color:var(--off-dim);font-size:0.85rem;line-height:1.5;}
}

/* ===== FEATURE STRIP (home) ===== */
.feature-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media(max-width:960px){.feature-strip{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.feature-strip{grid-template-columns:repeat(2,1fr);}}
.feature-card{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;display:block;border:1px solid var(--line);}
.feature-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(35%) brightness(.8);transition:transform .5s ease, filter .5s ease;}
.feature-card:hover img{transform:scale(1.08);filter:grayscale(0%) brightness(.95);}
.feature-card span{
  position:absolute;left:0;right:0;bottom:0;padding:12px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.9), transparent);
  font-family:'Cormorant Garamond',serif;color:var(--off);font-size:0.95rem;text-align:center;
}

/* ===== CREATIVE SPACES ===== */
.space-feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-bottom:100px;}
@media(max-width:860px){.space-feature{grid-template-columns:1fr;gap:34px;}}
.space-feature img{width:100%;border-radius:6px;aspect-ratio:4/3;object-fit:cover;}
.space-feature-copy h3{font-size:2.2rem;color:var(--off);margin:14px 0 20px;}
.space-feature-copy p{color:var(--off-dim);line-height:1.85;margin-bottom:18px;}

/* ===== COURSES ===== */
.course-list{max-width:820px;margin:0 auto;}
.course-item{display:flex;gap:28px;padding:30px 0;border-top:1px solid var(--line);}
.course-item:last-child{border-bottom:1px solid var(--line);}
.course-num{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--gold-dim);flex-shrink:0;width:50px;}
.course-item h4{font-size:1.5rem;color:var(--off);margin-bottom:8px;}
.course-item p{color:var(--off-dim);line-height:1.7;max-width:560px;}

/* ===== NAV UTILITY LINKS (Login / Find Your Photos) ===== */
.nav-link-pill{
  border:1px solid var(--line);color:var(--off-dim);
  padding:9px 18px;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  border-radius:100px;transition:border-color .25s, color .25s;white-space:nowrap;
}
.nav-link-pill:hover{border-color:var(--gold-dim);color:var(--gold);}
.mobile-utility-row{display:flex;gap:14px;margin-top:-6px;}
.mobile-utility-row a{
  font-family:'Inter',sans-serif;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold-dim);border:1px solid var(--line);padding:8px 16px;border-radius:100px;
}

/* ===== LIGHTBOX (inline video/reel playback) ===== */
.tam-lightbox{
  position:fixed;inset:0;background:rgba(5,5,5,0.95);z-index:2000;
  display:none;align-items:center;justify-content:center;padding:60px 20px;
}
.tam-lightbox.open{display:flex;}
.lightbox-inner{max-width:900px;width:100%;max-height:100%;overflow:auto;}
.lightbox-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.lightbox-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lightbox-inner iframe.instagram-media,
.lightbox-inner blockquote.instagram-media{margin:0 auto !important;}
.lightbox-close{
  position:fixed;top:22px;right:26px;font-size:2.2rem;line-height:1;color:#fff;
  background:none;border:none;cursor:pointer;z-index:2001;opacity:.8;transition:opacity .2s;
}
.lightbox-close:hover{opacity:1;}