:root{
  --bg:#ffffff; --fg:#0b0b0b; --accent:#000; --muted:#666;
  --max-width:1180px; --pad:16px; --radius:12px;
}

/* Apply Nosifer site-wide */
body, h1, h2, h3, h4, h5, h6, p, button, .btn,
input, select, textarea, a, ul {
  font-family: 'Montserrat', cursive !important;
}

/* Reset + base */
*{
	box-sizing:border-box;
	margin:0;
	padding:0
}

html,body{
	height:100%
}

body{
  	color:var(--fg); 
  	background:var(--bg); 
  	line-height:1.45;
  	-webkit-font-smoothing:antialiased;
}

/* Links */
a{
	color:inherit;
	transition:0.2s;
	text-decoration:none
}

/* Images */
img{
	max-width:100%;
	display:block;
	height:auto
}

/* Buttons */
button, .btn{
  	font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  	font-weight:700;
  	cursor:pointer;
}

/* Layout */
.wrap{
	max-width:var(--max-width);
	margin:0 auto;
	padding:0 var(--pad)
}

/* HEADER MATCHING HOMEPAGE */
header{
	position:sticky;
	top:0;z-index:1000;background:black;
	color:white;
	border-bottom:0px solid rgba(255,255,255,0.1)
}
.nav-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:12px 0
}
.logo img{
	height:90px;
	border-radius:10px;
	transition:.3s
}
.logo img:hover{
	transform:scale(1.05)
}
.nav-links{
	display:flex;
	gap:18px
}
.nav-links a{
	padding:8px 12px;
	font-weight:600;
	border-radius:8px
}
.nav-links a:hover{
	background:rgba(255,255,255,0.1)
}
.hamburger{
	display:none;
	background:transparent;
	color:white;
	font-size:28px;
	border:0
}
.mobile-menu{
	display:none;
	flex-direction:column;
	gap:12px;
  	display: none;
	padding:12px 0
}

.mobile-menu.open {
  display: flex;
}


/* Mobile menu */
.hamburger{
	display:none;
	background:transparent;
	border:0;
	color:white;
	font-size:22px
}

.add-ons-section {
  border: 2px solid #000;
  border-radius: 10px;
}


/* Hero */
.hero{
  min-height:48vh; 
	display:flex; 
	align-items:center; 
	justify-content:center;
  	color:#fff; 
	text-align:center; 
	position:relative;
  	background: linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.2)), url('dapperpictures/DDVan.png')
	center/cover no-repeat;
  	padding:48px 12px;
}
.hero-inner{
	max-width:960px;
	padding:16px;
	background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06));
	border-radius:14px
}
.hero h1{
	font-size:clamp(1.6rem,4.5vw,3.2rem);
	margin-bottom:8px
}
.hero .phone{
	font-weight:700;
	font-size:1.05rem;
	margin-bottom:10px
}
.hero p{
	font-family:'Roboto', sans-serif; 
	font-size:clamp(0.95rem,2.6vw,1.15rem);
	margin-bottom:18px;
	color:#f3f3f3
}
.hero .actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	justify-content:center
}

section{
	padding:48px 12px
}

h2{
	text-align:center;
	margin-bottom:28px;
	font-size:1.5rem
}

/* Grids */
.grid{

	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	display:grid;
	gap:18px
}
.features{
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr))
}
.feature,.service{
  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow:0 6px 18px rgba(11,11,11,0.06);
  font-family:'Roboto', sans-serif;
}

/* Services grid */
.services{
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr))
}

.service:hover{
	transform:translateY(-4px);
	box-shadow:0 10px 20px rgba(0,0,0,.01)
	}

.service.selected{
	border-color:var(--accent);
	background:#C7C2C1
	}

.service h2::after{
  	content: "";
  	width: 215px;
  	height: 3px;
  	background: black;
  	display:block;
  	margin-top: 8px;
	}

.pricing-banner {
  	background-image: url('dapperpictures/ddpricebackground.png');
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	padding: 60px 0;
  	text-align: center;
  	color: white;
	}

.addons-list label{
	display:block;
	margin:8px 0
	}


/* Gallery */
.gallery-wrap{
	max-width:var(--max-width);
	margin:0 auto;
	padding:8px
}
.gallery{
	display:flex; 
	gap:12px; 
	padding:12px; 
	overflow-x:auto;
	scroll-snap-type:x mandatory; 
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin; 
	scroll-behavior:smooth;
}
.gallery img{
	flex:0 0 auto; 
	width:260px; 
	height:180px; 
	object-fit:cover;
	border-radius:10px; 
	cursor:pointer; 
	scroll-snap-align:start;
	box-shadow:0 6px 18px rgba(11,11,11,0.06); 
	transition:transform .12s;
}
.gallery img:hover{
	transform:scale(1.03)
}

@media(min-width:900px){
.gallery{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	overflow:visible;
	padding:0
}
.gallery img{
	width:100%;
	height:220px
	}
}

/* Modal */
.modal{
	position:fixed;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,0.85);
	z-index:1400;
	padding:20px
}
.modal.open{
	display:flex
}
.modal-content{
	max-width:1100px;
	width:100%;
	max-height:90vh;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center
}
.modal-img{
	max-width:100%;
	max-height:90vh;
	border-radius:10px;
	object-fit:contain
}
.modal .close-btn{
	position:absolute;
	top:14px;
	right:18px;
	font-size:28px;
	color:#fff;
	background:transparent;
	border:0;
	cursor:pointer
}
.nav-btn{
	position:absolute;
	top:50%;
	transform:translateY(-50%);font-size:42px;
	color:#fff;
	background:rgba(0,0,0,0.25);
	border:0;width:56px;
	height:56px;
	border-radius:50%;cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center
}
.nav-btn.left{
	left:18px
}
.nav-btn.right{
	right:18px
}
.modal-caption{
	position:absolute;
	left:18px;
	bottom:20px;
	color:#fff;
	font-size:0.95rem
}

/* Forms */
.form-wrap{
	max-width:680px;
	margin:0 auto
}
form{
	display:grid;
	gap:12px
}
input,select,textarea{
	padding:12px;
	border-radius:8px;
	border:1px solid #ddd;
	font-size:1rem;
	font-family:'Roboto', sans-serif
}
textarea{
	min-height:120px;
	resize:vertical
}
.btn{
	background:var(--accent);
	color:#fff;
	border:0;
	padding:12px 16px;
	border-radius:8px;
	font-weight:700;
	cursor:pointer
}
.btn.ghost{
	background:transparent;
	color:var(--accent);
	border:1px solid #fff
}

/* FAQ */
.faq-item{
	max-width:900px;
	margin:10px auto;border-radius:10px;
	overflow:hidden
}

.faq-question{
	width:100%;
	text-align:left;
	border:0;
	padding:16px;
	background:#f8f8f8;
	display:flex;
	justify-content:space-between;
	align-items:center;
	cursor:pointer
}
.faq-answer{
	padding:14px;
	background:#fff;
	display:none}

/* Footer */
footer{
	background:black;
	color:#fff;
	padding:24px 12px;
	margin-top:0px
}
footer .foot-row{
	display:flex;
	flex-direction:column;
	gap:8px;
	max-width:var(--max-width);
	margin:0 auto
}
.socials{
	display:flex;
	gap:12px;
	align-items:center
}

.map-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin: 20px auto;
  max-width: 1200px;
}

footer h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 15px;
}


/* Mobile changes */
@media(max-width:599px){
  .nav-links{
	display:none
}
  .hamburger{
	display:inline-block
}
  .mobile-menu{
	display:flex
}
  header{
	padding:8px var(--pad)
}
  .logo img{
	height:50px
}
  .hero{
	padding:36px 12px
}


/* Focus outline */
:focus{
	outline:3px solid rgba(0,0,0,0.08);
	outline-offset:2px
}