:root{
  --orange: #ff7a00;
  --dark: #111827;
  --muted: #6b7280;
  --light: #f7f7f8;
  --container: 1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:var(--dark); background:white; line-height:1.5;}
.container{max-width:var(--container); margin:0 auto; padding:24px;}
.hero{background:linear-gradient(90deg, #FFA500 0%, rgba(255,122,0,0.12) 50%, #E09C00 100%); color:#4C4C4C; padding:48px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;}
.hero h1{font-size:34px; margin:0 0 8px;}
.hero p{margin:0 0 16px; color:rgba(255,255,255,0.9);}
.hero-cta .btn{margin-right:12px;}
.btn{display:inline-block; padding:10px 18px; border-radius:28px; text-decoration:none; font-weight:600; border:2px solid transparent;}
.btn-primary{background:var(--orange); color:white;}
.btn-outline{background:transparent; color:var(--orange); border-color:var(--orange);}
.features{margin-top:18px; list-style:none; padding:0; color:rgba(255,255,255,0.9);}
.media-box{width:100%; height:auto; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.4); display:block; background:#000;}
.section{padding:40px 0;}
.bg-light{background:var(--light);}
.grid{display:grid; gap:18px;}
.services-grid{grid-template-columns:repeat(4,1fr);}
.card{padding:18px; background:white; border-radius:12px; box-shadow:0 6px 18px rgba(16,24,40,0.06);}
.portfolio-grid{grid-template-columns:repeat(4,1fr); align-items:start;}
.thumb{position:relative; cursor:pointer; border-radius:10px; overflow:hidden; background:white; padding:8px; text-align:center;}
.thumb img{width:100%; height:160px; object-fit:cover; display:block;}
.thumb .play{position:absolute; left:12px; top:12px; background:rgba(0,0,0,0.5); color:white; padding:8px 10px; border-radius:8px; font-weight:700;}
.thumb .t{padding:8px 6px; font-size:14px; color:var(--muted);}
.about-grid{display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:center;}
.about-img{width:100%; height:260px; object-fit:cover; border-radius:12px;}
.testimonials-grid{grid-template-columns:repeat(3,1fr);}
.quote{background:white; padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(16,24,40,0.06); margin:0;}
.quote cite{display:block; margin-top:12px; font-weight:600;}
.contact-grid{display:grid; grid-template-columns:1fr 420px; gap:24px; align-items:start;}
.contact-list{list-style:none; padding:0; margin:0; color:var(--muted);}
.contact-list a{color:var(--dark); text-decoration:none;}
.contact-form input,.contact-form textarea{width:100%; padding:12px; margin-bottom:8px; border:1px solid #e6e6e9; border-radius:8px;}
.footer{background:#0b1220; color:rgba(255,255,255,0.9); padding:18px 0;}
.footer-grid{display:flex; justify-content:space-between; align-items:center; max-width:var(--container); margin:0 auto; padding:0 24px;}
/* Modal styles */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:opacity .18s ease;}
.modal.open{opacity:1; pointer-events:auto;}
.modal-inner{background:black; padding:8px; border-radius:12px; max-width:900px; width:calc(100% - 40px);}
.modal-video{width:100%; height:auto; display:block; border-radius:8px;}
.modal-close{background:transparent; border:none; color:white; font-size:20px; float:right; cursor:pointer; margin-bottom:6px;}
/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr; gap:18px;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{flex-direction:column; gap:8px; text-align:center;}
}
@media (max-width:600px){
  .services-grid{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr;}
}


/* top centered logo */
.top-logo{position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:60;}
.top-logo img{
	height: 90px;
	width: auto;
	display: block;
}
@media (max-width:600px){ .top-logo img{height:40px;} }

/* ensure header positioning */
.choose-hero{position:relative;}