/* Filename: styles.css */
:root{
  --base-font: Georgia, 'Times New Roman', serif;
  --text-size: 16px;
  --accent: #c92a2a; /* red */
  --muted: #6b6b6b;
  --bg: #ffffff;
  --footer-bg: #0f0f10;
  --card-shadow: 0 10px 20px rgba(16,16,16,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--base-font);font-size:var(--text-size);margin:0;background:var(--bg);color:#111}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter:blur(6px);background:rgba(255,255,255,0.6);border-bottom:1px solid rgba(0,0,0,0.04);z-index:50}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.logo{display:flex;align-items:center;gap:10px;color:var(--accent);font-weight:700;
text-decoration: none;}
.logo:hover {
  opacity: 0.8;
}
.logo-mark{width:42px;height:42px;transform-origin:center;animation:logo-pulse 4s ease-in-out infinite}
.logo-text{font-size:18px}
@keyframes logo-pulse{0%{transform:rotate(0)}50%{transform:rotate(6deg)}100%{transform:rotate(0)}}

.main-nav{position:relative}
.nav-toggle{display:none;background:none;border:0;font:inherit;cursor:pointer}
.nav-list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-list a{color:inherit;text-decoration:none}
.nav-list a:hover {
  color: #c92a2a;
}
.has-dropdown{position:relative}
.dropdown{position:absolute;right:0;top:28px;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--card-shadow);display:none}
.has-dropdown:hover .dropdown{display:block}

/* Hero */
.hero{display:flex;align-items:center;gap:30px;padding:48px 20px;max-width:1200px;margin:0 auto}
.hero-content{flex:1;transform:translateX(0);transition:transform .6s ease}
.hero h1{font-size:36px;margin:0 0 12px}
.hero .lead{color:var(--muted);margin:0 0 20px}
.hero-image{width:48%;overflow:hidden;border-radius:12px}
.hero-image img{width:100%;height:100%;object-fit:cover;display:block}

/* CTA */
.cta-buttons{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:999px;text-decoration:none;font-weight:600;border:0;cursor:pointer;background:var(--accent);color:#fff;transform-origin:center;transition:transform .35s ease}
.btn:hover{transform:rotate(6deg) scale(1.02)}
.btn-outline{background:transparent;color:var(--accent);border:1px solid rgba(201,42,42,0.12)}

.page-hero {
  background: linear-gradient(#0000007d,#000000db),url(assets/branding.webp) no-repeat center center/cover;
  padding: 5em 30px;
  color: #fff;
}


.page-hero.about-page {
  background: linear-gradient(#0000007d,#000000db),url(assets/sample1.png) no-repeat center center/cover;}

/* Grid */
.service-list{max-width:1200px;margin:36px auto;padding:0 20px;
display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.service-list h2{margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.service-card{background:#c92a2a;
  color: #fff; border-radius:12px;overflow:hidden;box-shadow:var(--card-shadow);
  width:100%;object-fit:cover;display:block ;padding:12px;
transition: all 0.25s linear;}
.service-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px #bdbdbd;
}

/* Media */
.media-block{max-width:1200px;margin:36px auto;padding:0 20px}
.media-row{display:flex;gap:16px}
.media-row img{width:100%;height:240px;border-radius:10px;box-shadow:var(--card-shadow);
max-width: 48%;}
img {
  object-fit: cover;
}

/* Reviews */
.reviews{max-width:1200px;margin:36px auto;padding:0 20px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{background:#fff;padding:12px;border-radius:12px;box-shadow:var(--card-shadow)}
.review-video img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.client-logo{height:28px;margin-top:8px}

/* FAQ */
.faq{max-width:900px;margin:36px auto;padding:0 20px}
.faq-list{list-style:none;padding:0;margin:0;
display: flex;
flex-direction: column;
gap: 15px;}
 
.faq .q{display:block;width:100%;text-align:left;padding:12px;border-radius:12px;background:#c92a2a;color: #fff; border:0;cursor:pointer;
transition: all 0.25s linear;}
.faq .q:hover {
  transform: translateY(-5px);
}
.faq .a{display:none;padding:12px;margin-top:8px;background:#fafafa;border-radius:12px}

/* Map */
.container {
  max-width: 1200px;
  padding: 0 30px;
margin: 0 auto 30px;
}
.map-wrap{border:1px solid #e6e6e6;border-radius:8px;overflow:hidden}
.map-wrap iframe{width:100%;height:300px;border:0}

/* Footer */
a {
  transition: all 0.2s linear;
}
.site-footer{background:var(--footer-bg);color:#fff;padding:28px 20px}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.footer-left{display:flex;align-items:center;gap:12px}
.footer-nav a{color:#ddd;text-decoration:none;margin-right:8px}
.footer-nav a:hover {
  text-decoration: underline;
}
.social a{color:#ddd;text-decoration:none;margin-left:8px}
.social a:hover {
  color: #bdbdbd;
}
.copyright{max-width:1200px;margin:14px auto 0;color:#bdbdbd;text-align:left;padding:0 20px}
.team h2 {
  text-align: center;
}
/* Team */
.team-grid{display:flex;gap:12px;
 justify-content: center;}
.person{background:#fff;padding:12px;border-radius:8px;text-align:center;box-shadow:var(--card-shadow)}
.person img{width:120px;height:120px;border-radius:999px;object-fit:cover}
.philosophy {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}


.artist {
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease;
}


.artist:hover {
transform: translateY(-10px);
}


.artist img {
width: 100%;
height: 250px;
object-fit: cover;
}


.artist h3 {
margin: 15px;
}


.artist p {
color: #666;
padding: 0 15px 20px;
}


.timeline {
background: #fff8f8;
padding: 100px 40px;
border-left: 5px solid #b30000;
margin: 60px auto;
max-width: 900px;
width: 90%;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}


.timeline h2 {
text-align: center;
font-size: 2em;
margin-bottom: 40px;
}


.timeline-event {
margin: 40px 0;
position: relative;
padding-left: 40px;
}


.timeline-event::before {
content: "";
position: absolute;
left: -17px;
top: 5px;
width: 20px;
height: 20px;
background: #b30000;
border-radius: 50%;
}


.timeline-event h3 {
margin-bottom: 10px;
}

.artist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}
.timeline-event p {
color: #444;
line-height: 1.6;
}
/* Responsive breakpoints */
@media (max-width:1440px){ .hero h1{font-size:32px} }
@media (max-width:768px){
  .grid,
  .artist-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .hero{flex-direction:column}
  .hero-image{width:100%}
  .nav-toggle{display:inline-block}
  .nav-list{flex-direction:column;gap:8px;
  padding: 8px;}
  .nav-list[hidden]{display:none}
  .team-grid {
    flex-wrap: wrap;
  }
}
@media (max-width:375px){
  body{font-size:15px}
  .grid,
  .reviews-grid,
  .service-list,
  .testimonials{grid-template-columns:1fr!important}
  .media-row{flex-direction:column}
  .media-row img {
    max-width: none;
  }
  .hero h1{font-size:22px}
  .artist-grid {
    grid-template-columns: 1fr;
  }
}

/* Small helper styles for accessibility */
a:focus{outline:3px solid rgba(201,42,42,0.2);outline-offset:3px}

/* subtle card shadows for asymmetric visual style */
.reviews-grid .review:nth-child(odd){transform:translateY(8px)}

 
 

@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
} 
.cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px;
}
/* --- Immersive Visual Storytelling --- */
.highlight-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffeaea 100%);
  padding: 80px 60px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 90%;

}

.highlight-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.highlight-content {
  flex: 1;
  max-width: 600px;
}

.highlight-content h2 {
  font-size: 2em;
  color: #b30000;
  margin-bottom: 20px;
}

.highlight-content p {
  line-height: 1.7;
  color: #333;
}

.highlight-block img {
   max-width: 45%;
  border-radius: 15px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease;
}

.highlight-block img:hover {
  transform: scale(1.05);
}

/* Responsive layout */
@media (max-width: 768px) {
  .highlight-block {
    flex-direction: column-reverse;
    text-align: center;
    padding: 60px 20px;
  }

  .highlight-block img {
    max-width: 100%;
  }
}
.testimonials blockquote {
  box-shadow: 0 0 15px #6b6b6b;
  padding: 30px;
  border-radius: 15px;
  margin: 0;
}

/* --- Studio Experience Packages (Parallax Section) --- */
.parallax-section {
  position: relative;
  background-image: url("assets/consulting.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  overflow: hidden;
  margin: 80px auto;
  padding: 0;
  width: 90%;
}

.parallax-section .overlay {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
  padding: 120px 40px;
 
}

.parallax-section h2 {
  font-size: 2.2em;
  margin-bottom: 20px;
  color: #ffdddd;
}

.parallax-section p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1em;
  line-height: 1.6;
}

/* Add a smooth fade/slide effect */
.parallax-section .overlay {
  animation: fadeInUp 1.2s ease forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .parallax-section .overlay {
    padding: 80px 20px;
  }
}


/* Service Page New Sections */

/* 1. Immersive Visual Storytelling */
.storytelling {
  background: linear-gradient(to right, #ffe6e6, #fff);
  padding: 80px 40px;
  text-align: center;
  border-radius: 20px;
  margin: 60px auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.storytelling h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.storytelling p {
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.storytelling img {
  width: 80%;
  border-radius: 15px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

/* 2. Studio Experience Packages */
.packages {
  background-attachment: fixed;
  background-image: url('assets/sample2.png');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 120px 40px;
  border-radius: 15px;
}

.packages h2 {
  font-size: 2.2em;
  margin-bottom: 30px;
}

.packages .package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.packages .package {
  background: rgba(0,0,0,0.6);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.3s;
}

.packages .package:hover {
  transform: translateY(-10px);
}

/* 3. Client Testimonials */
.testimonials {
  padding: 80px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.testimonial {
  background: #fafafa;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.testimonial video {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.testimonial p {
  font-style: italic;
  margin-bottom: 10px;
}

.testimonial .logo {
  width: 60px;
  height: auto;
  margin-top: 10px;
}

/* 4. Our Creative Process */
.process {
  background: #fff5f5;
  padding: 80px 40px;
  text-align: center;
  border-radius: 20px;
}

.process h2 {
  font-size: 2em;
  margin-bottom: 30px;
}

.process-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.step {
  flex: 1 1 250px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 30px;
  transition: transform 0.3s ease;
}

.step:hover {
  transform: scale(1.05);
}

.step h3 {
  color: #b30000;
  margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero, .cta {
    flex-direction: column;
    text-align: center;
  }
  .packages .package-grid {
    grid-template-columns: 1fr;
  }
  .process-steps {
    flex-direction: column;
  }
} 


.privacy-hero {
  padding: 150px 40px 80px;
  text-align: center;
  background: linear-gradient(135deg, #fff0f0, #ffeaea);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.privacy-hero h1 {
  font-size: 2.5em;
  color: #b30000;
  margin-bottom: 15px;
}

.privacy-hero p {
  font-size: 1.1em;
  color: #444;
}

.privacy-content {
  padding: 80px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.lg-block {
  background: #fff;
  border-left: 6px solid #b30000;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
  transition: transform 0.3s ease;
}

.lg-block:hover {
  transform: translateY(-5px);
}

.lg-block h2 {
  color: #b30000;
  margin-bottom: 15px;
}

.lg-block ul {
  padding-left: 20px;
  list-style-type: disc;
  color: #444;
  line-height: 1.6;
}

.lg-block a {
  color: #b30000;
  text-decoration: underline;
}

.lg-block a:hover {
  text-decoration: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .privacy-hero {
    padding: 120px 20px 60px;
  }
  .lg-block {
    padding: 20px;
  }
  .privacy-hero h1 {
    font-size: 2em;
  }
}

.terms-hero {
  padding: 150px 40px 80px;
  text-align: center;
  background: linear-gradient(135deg, #fff4f4, #ffecec);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.terms-hero h1 {
  font-size: 2.5em;
  color: #b30000;
  margin-bottom: 15px;
}

.terms-hero p {
  font-size: 1.1em;
  color: #444;
}

.terms-content {
  padding: 80px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.terms-block {
  background: #fff;
  border-left: 6px solid #b30000;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
  transition: transform 0.3s ease;
}

.terms-block:hover {
  transform: translateY(-5px);
}

.terms-block h2 {
  color: #b30000;
  margin-bottom: 15px;
}

.terms-block p, .terms-block ul {
  color: #444;
  line-height: 1.6;
}

.terms-block ul {
  padding-left: 20px;
  list-style-type: disc;
}

.terms-block a {
  color: #b30000;
  text-decoration: underline;
}

.terms-block a:hover {
  text-decoration: none;
}

.services-grid{max-width:1200px;margin:36px auto;padding:0 20px}
.services-grid h2{margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--card-shadow)}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card-body{padding:12px}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .terms-hero {
    padding: 120px 20px 60px;
  }
  .terms-block {
    padding: 20px;
  }
  .terms-hero h1 {
    font-size: 2em;
  }

  .footer-inner,
  .footer-left {
    gap: 15px;
    flex-direction: column;
  }
  .copyright {
    text-align: center;
  }
}