/* ===================================================================
   Bad Pup Ash — brand palette pulled from existing gear:
   pup-hood yellow/gold + harness red, on near-black leather.
=================================================================== */
:root{
	--bg:        #0c0c0e;
	--bg-2:      #151519;
	--bg-3:      #1d1d23;
	--border:    #2c2c34;
	--text:      #f2efe9;
	--text-mute: #a7a3ac;
	--gold:      #f2c14e;
	--gold-dim:  #c99a2e;
	--red:       #d7263d;
	--red-dim:   #a81c2f;
	--font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
	--font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
.fadeImg{transition:opacity 2.5s ease;}
.fadeImg.fadeOut{opacity:0;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

h1,h2,h3{font-family:var(--font-display); letter-spacing:0.5px; margin:0 0 16px;}

/* ---------- Buttons ---------- */
.btn{
	display:inline-block;
	font-family:var(--font-display);
	font-size:1.05rem;
	letter-spacing:1px;
	padding:14px 28px;
	border-radius:6px;
	border:2px solid transparent;
	cursor:pointer;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
	text-align:center;
}
.btn:hover{transform:translateY(-2px);}
.btnGold{background:var(--gold); color:#1a1204;}
.btnGold:hover{box-shadow:0 6px 24px rgba(242,193,78,0.35);}
.btnRed{background:var(--red); color:#fff;}
.btnRed:hover{box-shadow:0 6px 24px rgba(215,38,61,0.4);}
.btnGhost{background:transparent; border-color:var(--border); color:var(--text-mute);}
.btnGhost:hover{border-color:var(--text-mute); color:var(--text);}
.btnLg{padding:18px 34px; font-size:1.25rem;}

/* ---------- Age Gate ---------- */
.ageGate{
	position:fixed; inset:0; z-index:999;
	background:radial-gradient(ellipse at center, #1a1a1f 0%, #050506 100%);
	display:flex; align-items:center; justify-content:center;
	padding:24px;
}
.ageGate.hidden{display:none;}
.ageGateInner{max-width:480px; text-align:center;}
.ageGateLogo{width:120px; margin:0 auto 24px;}
.ageGateInner h1{font-size:2rem; color:var(--gold);}
.ageGateInner p{color:var(--text-mute); margin-bottom:28px;}
.ageGateButtons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
body.gateActive{overflow:hidden;}

/* ---------- Header ---------- */
.siteHeader{
	position:sticky; top:0; z-index:100;
	background:rgba(12,12,14,0.85);
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--border);
}
.headerInner{display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.3rem; letter-spacing:1px;}
.brand img{width:36px; height:36px; object-fit:contain;}
.mainNav{display:flex; align-items:center; gap:28px; font-size:0.95rem;}
.mainNav a{color:var(--text-mute); transition:color .15s ease;}
.mainNav a:hover{color:var(--gold);}
.navCta{background:var(--gold); color:#1a1204 !important; padding:8px 16px; border-radius:5px; font-weight:600;}
.navCta:hover{color:#1a1204 !important;}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden;}
.heroImage{
	position:absolute; inset:0;
	background-size:cover; background-position:center 20%;
	filter:saturate(1.05) contrast(1.05);
}
.heroFade{
	position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.55) 30%, rgba(8,8,10,0.92) 100%),
	           linear-gradient(90deg, rgba(8,8,10,0.85) 0%, rgba(8,8,10,0.35) 55%, rgba(8,8,10,0.75) 100%);
}
.heroContent{position:relative; z-index:2; padding-top:90px; padding-bottom:70px;}
.kicker{color:var(--gold); font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:0.85rem; margin-bottom:14px;}
.heroTitle{font-size:clamp(2.6rem, 7vw, 5rem); line-height:0.98; margin-bottom:20px; max-width:820px;}
.heroTitle span{color:var(--red);}
.heroWanting{font-size:1.4rem; font-weight:600; letter-spacing:0.5px; margin-bottom:24px;}
.heroSub{max-width:560px; color:var(--text-mute); font-size:1.1rem; margin-bottom:34px;}
.heroButtons{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- About ---------- */
.about{padding:100px 0; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.aboutInner{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
.aboutImg{display:flex; flex-direction:column; gap:20px;}
.aboutImg img{border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,0.5); width:100%; height:400px; object-fit:cover;}
.imgReveal{
	display:grid; grid-template-rows:0fr; opacity:0;
	transition:grid-template-rows .5s ease, opacity .4s ease;
}
.imgReveal.isOpen{grid-template-rows:1fr; opacity:1;}
.imgRevealInner{overflow:hidden; min-height:0;}
.eyebrow{color:var(--gold); text-transform:uppercase; letter-spacing:2px; font-size:0.85rem; font-weight:600; margin-bottom:10px;}
.eyebrow.center, .sectionTitle.center{text-align:center;}
.aboutText h2{font-size:2.2rem; line-height:1.15;}
.aboutText p{color:var(--text-mute);}
.aboutText strong{color:var(--text);}
.textLink{display:inline-block; margin-top:12px; color:var(--gold); font-weight:600; border-bottom:1px solid var(--gold-dim);}
.textLink:hover{color:#fff;}
.whatMeanToggle{background:none; font-family:inherit; font-size:inherit; margin-top:0; cursor:pointer;}

.sampleScenes{
	display:grid; grid-template-rows:0fr;
	margin-top:0; padding-top:0; border-top:1px solid transparent;
	transition:grid-template-rows .5s ease, margin-top .5s ease, padding-top .5s ease, border-color .5s ease;
}
.sampleScenes.isOpen{
	grid-template-rows:1fr;
	margin-top:24px; padding-top:24px; border-top-color:var(--border);
}
.sampleScenesInner{overflow:hidden; min-height:0;}
.sectionDivider{margin-top:24px; padding-top:24px; border-top:1px solid var(--border);}
.sampleScenesGrid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:14px;
	margin-top:18px;
}
.sceneThumb{
	position:relative; display:block; overflow:hidden; border-radius:8px;
	aspect-ratio:16/9; background:var(--bg-3); border:none; padding:0; cursor:pointer;
}
.sceneThumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease, filter .4s ease;}
.sceneThumb:hover img{transform:scale(1.06); filter:brightness(0.7);}
.sceneThumb .playIcon{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	color:#fff; font-size:1.6rem; text-shadow:0 2px 10px rgba(0,0,0,0.7); pointer-events:none;
}

/* ---------- Video Lightbox ---------- */
.videoLightbox{
	position:fixed; inset:0; z-index:1000; background:rgba(8,8,10,0.95);
	display:flex; align-items:center; justify-content:center; padding:40px;
}
.videoLightbox[hidden]{display:none;}
.videoLightboxPlayer{max-width:90vw; max-height:85vh; border-radius:8px; background:#000;}
.videoLightboxClose{
	position:absolute; top:20px; right:28px; background:none; border:none;
	color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; padding:8px;
}
.videoLightboxClose:hover{color:var(--gold);}

/* ---------- Gallery ---------- */
.gallery{padding:100px 0;}
.sectionTitle{font-size:2.4rem; margin-bottom:48px;}
.galleryGrid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:14px;
}
.galleryItem{
	position:relative; display:block; overflow:hidden; border-radius:8px;
	aspect-ratio:4/5; background:var(--bg-3);
}
.galleryItem img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease, filter .4s ease, opacity 2.5s ease;}
.galleryItem:hover img{transform:scale(1.06);}
.galleryItemLocked img{filter:blur(6px) brightness(0.55);}
.lockOverlay{
	position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:10px; color:#fff; font-family:var(--font-display); font-size:1.1rem; text-align:center; padding:20px;
	background:linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.55));
}
.lockIcon{font-size:2rem;}

/* ---------- Platforms ---------- */
.platforms{padding:100px 0; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.platformGrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.platformCard{
	background:var(--bg-3); border:1px solid var(--border); border-radius:10px;
	padding:28px 22px; transition:transform .15s ease, border-color .15s ease;
}
.platformCard:hover{transform:translateY(-4px); border-color:var(--text-mute);}
.platformCard h3{font-size:1.5rem; margin-bottom:8px;}
.platformCard p{color:var(--text-mute); font-size:0.92rem; min-height:44px;}
.platformCta{font-weight:600; font-size:0.9rem;}
.platformCardGold{border-color:var(--gold-dim);}
.platformCardGold:hover{border-color:var(--gold);}
.platformCardGold .platformCta{color:var(--gold);}
.platformCardRed{border-color:var(--red-dim);}
.platformCardRed:hover{border-color:var(--red);}
.platformCardRed .platformCta{color:var(--red);}
.platformCard:not(.platformCardGold):not(.platformCardRed) .platformCta{color:var(--text-mute);}

/* ---------- Social ---------- */
.social{padding:100px 0;}
.socialGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.socialItem{
	display:flex; flex-direction:column; gap:4px;
	background:var(--bg-3); border:1px solid var(--border); border-radius:8px;
	padding:18px 20px; transition:border-color .15s ease, transform .15s ease;
}
.socialItem:hover{border-color:var(--gold-dim); transform:translateY(-2px);}
.socialLabel{font-size:0.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-mute);}
.socialHandle{font-weight:600;}

/* ---------- Contact ---------- */
.contact{padding:100px 0; background:var(--bg-2); border-top:1px solid var(--border);}
.contactForm{
	max-width:640px; margin:0 auto;
	display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.formRow{display:flex; flex-direction:column; gap:6px;}
.formRowFull{grid-column:1 / -1;}
.formRow label{font-size:0.85rem; font-weight:600; color:var(--text-mute);}
.formRow .req{color:var(--red);}
.formRow .optional{font-weight:400; text-transform:none; letter-spacing:0; opacity:0.7;}
.contactForm input,
.contactForm select,
.contactForm textarea{
	background:var(--bg-3); border:1px solid var(--border); border-radius:6px;
	padding:12px 14px; color:var(--text); font-family:var(--font-body); font-size:1rem;
	transition:border-color .15s ease;
}
.contactForm input:focus,
.contactForm select:focus,
.contactForm textarea:focus{outline:none; border-color:var(--gold-dim);}
.contactForm textarea{resize:vertical; min-height:120px;}
.contactForm button[type="submit"]{width:100%;}
.contactFormError{
	display:block; color:var(--red); background:rgba(215,38,61,0.1);
	border:1px solid var(--red-dim); border-radius:6px; padding:10px 14px; margin-bottom:14px;
}
.contactThankYou{max-width:640px; margin:0 auto; text-align:center; padding:40px 20px;}
.contactThankYou h3{font-size:2rem; color:var(--gold);}

/* ---------- Footer ---------- */
.siteFooter{padding:50px 0 40px; border-top:1px solid var(--border);}
.footerInner{text-align:center; color:var(--text-mute);}
.footerLogo{width:40px; margin:0 auto 16px;}
.footerInner a{color:var(--gold); font-weight:600;}
.footerInner a:hover{color:#fff;}
.fine{font-size:0.8rem; opacity:0.7; margin-top:10px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
	.aboutInner{grid-template-columns:1fr; gap:32px;}
	.galleryGrid{grid-template-columns:repeat(2, 1fr);}
	.platformGrid{grid-template-columns:repeat(2, 1fr);}
	.socialGrid{grid-template-columns:repeat(2, 1fr);}
	.mainNav{gap:16px; font-size:0.85rem;}
}
@media (max-width:560px){
	.galleryGrid{grid-template-columns:repeat(2, 1fr);}
	.sampleScenesGrid{grid-template-columns:repeat(2, 1fr);}
	.platformGrid{grid-template-columns:1fr;}
	.socialGrid{grid-template-columns:1fr;}
	.contactForm{grid-template-columns:1fr;}
	.mainNav a:not(.navCta){display:none;}
	.heroButtons{flex-direction:column;}
	.btn{width:100%;}
}