* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; scroll-behavior: smooth; }

body { background-color: #030303; color: #EAEAEA; overflow-x: hidden; }

nav { position: fixed; top: 0; width: 100%; padding: 30px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 50; background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0)); transition: all 0.4s ease; }

.nav-logo-img { height: 35px; object-fit: contain; }
.footer-logo-img { height: 60px; object-fit: contain; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto;}

.logo { color: #D4AF37; font-size: 28px; font-weight: 300; letter-spacing: 5px; text-decoration: none; z-index: 51; }

.menu-toggle { display: none; color: #D4AF37; cursor: pointer; z-index: 51; }
.menu-toggle .material-icons-outlined { font-size: 32px; }

.nav-links { list-style: none; display: flex; gap: 40px; align-items: center; }
.nav-links li a { color: #FFFFFF; text-decoration: none; font-size: 12px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; transition: color 0.3s ease; }
.nav-links li a:hover { color: #D4AF37; }
.nav-book-btn { color: #D4AF37 !important; font-weight: 500 !important; border: 1px solid rgba(212, 175, 55, 0.5); padding: 10px 24px; border-radius: 2px; transition: all 0.3s ease; }
.nav-book-btn:hover { background-color: #D4AF37; color: #111 !important; box-shadow: 0px 0px 15px rgba(212, 175, 55, 0.3); }

.hero { height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-overlay { position: relative; z-index: 2; background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(3,3,3,0.9)); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 5%; }
.hero h1 { color: #FFFFFF; font-size: 58px; font-weight: 200; letter-spacing: 12px; margin-bottom: 20px; text-transform: uppercase; text-shadow: 0px 10px 30px rgba(0,0,0,0.8); }
.hero p { color: #CCC; font-size: 15px; font-weight: 300; margin-bottom: 50px; letter-spacing: 3px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.8; }
.hero-buttons { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.btn-gold { padding: 18px 45px; background-color: transparent; color: #D4AF37; border: 1px solid rgba(212, 175, 55, 0.6); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: all 0.4s ease; text-decoration: none; display: inline-block; }
.btn-gold:hover { background-color: #D4AF37; color: #111111; box-shadow: 0px 0px 20px rgba(212, 175, 55, 0.4); }
.filled-gold { background-color: #D4AF37; color: #111; border: 1px solid #D4AF37; }
.filled-gold:hover { background-color: transparent; color: #D4AF37; }

.mute-btn { position: absolute; bottom: 40px; right: 5%; background-color: rgba(20, 20, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); color: #FFFFFF; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); z-index: 10; }
.mute-btn:hover { border-color: #D4AF37; color: #D4AF37; background-color: rgba(20, 20, 20, 0.8); }

.split-section { position: relative; min-height: 100vh; background: radial-gradient(circle at center, #111 0%, #030303 100%); display: flex; align-items: center; justify-content: center; }
.about-overlay { width: 100%; padding: 0 5%; display: flex; justify-content: center; text-align: center; }
.split-text { max-width: 900px; display: flex; flex-direction: column; align-items: center; }
.split-text h2 { color: #FFF; font-size: 52px; font-weight: 200; margin-bottom: 30px; letter-spacing: 6px; line-height: 1.2; }
.gold-text { color: #D4AF37; font-style: italic; }
.split-text p { font-size: 16px; font-weight: 300; line-height: 2; margin-bottom: 40px; color: #AAA; max-width: 650px; text-align: center; }
.btn-dark { padding: 18px 45px; background-color: transparent; color: #FFFFFF; border: 1px solid #444; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: all 0.4s ease; text-decoration: none; display: inline-block; }
.btn-dark:hover { background-color: #FFF; color: #111; border-color: #FFF; }

.brand-pillars { padding: 150px 5%; background-color: #030303; }
.pillars-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; max-width: 1400px; margin: 0 auto; }
.pillar-card { background: rgba(15, 15, 15, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 60px 50px; border: 1px solid rgba(255, 255, 255, 0.03); border-top: 1px solid rgba(212, 175, 55, 0.7); box-shadow: 0px 20px 40px rgba(0,0,0,0.4); transition: all 0.4s ease; border-radius: 4px; }
.pillar-card:hover { transform: translateY(-10px); background: rgba(20, 20, 20, 0.8); box-shadow: 0px 30px 60px rgba(0,0,0,0.6); border-top: 1px solid #D4AF37; }
.pillar-card h4 { font-size: 20px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; color: #FFF; }
.gold-line-small { width: 40px; height: 1px; background-color: #D4AF37; margin-bottom: 25px; opacity: 0.7; }
.pillar-card p { font-size: 14px; font-weight: 300; color: #999; line-height: 2; }
.pillar-card .highlight { color: #D4AF37; font-weight: 400; }

.master-showcase { padding: 150px 5%; background: radial-gradient(circle at top left, #0A0A0A 0%, #030303 100%); min-height: 100vh; display: flex; align-items: center; }
.showcase-container { display: flex; max-width: 1400px; margin: 0 auto; gap: 80px; width: 100%; }
.showcase-left { flex: 3; }
.showcase-right { flex: 1; border-left: 1px solid rgba(255,255,255,0.05); padding-left: 60px; }
.showcase-tab { display: none; animation: fadeIn 0.6s ease; }
.showcase-tab.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.sub-nav { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.sub-nav button { padding: 12px 24px; background-color: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; color: #888; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; }
.sub-nav button:hover { border-color: rgba(212, 175, 55, 0.5); color: #FFF; }
.sub-nav button.active { background-color: transparent; color: #D4AF37; border: 1px solid #D4AF37; box-shadow: 0px 0px 15px rgba(212, 175, 55, 0.1); }

.showcase-player-wrapper { position: relative; padding-bottom: 56.25%; height: 0; background-color: #000; border-radius: 4px; overflow: hidden; box-shadow: 0px 30px 60px rgba(0,0,0,0.8); margin-bottom: 40px; border: 1px solid rgba(255,255,255,0.05); }
.showcase-player-wrapper iframe, .showcase-player-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.vertical-wrapper { padding-bottom: 0 !important; height: auto !important; aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto 40px auto; border-radius: 12px; box-shadow: 0px 30px 60px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.05); }
.vertical-wrapper video { object-fit: cover; border-radius: 12px; }

/* The Luxe Logo styling */
.luxe-logo { max-width: 200px; height: auto; display: block; }

.photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.gallery-item { cursor: pointer; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0px 10px 30px rgba(0,0,0,0.5); }
.gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.4s ease; filter: grayscale(15%) contrast(1.1); }
.gallery-item:hover .gallery-img { transform: scale(1.05); filter: grayscale(0%) contrast(1); }

.playlist-nav { display: flex; gap: 12px; margin-bottom: 25px; flex-wrap: wrap; }
.playlist-btn { padding: 10px 20px; background-color: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 2px; color: #777; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; }
.playlist-btn:hover { border-color: rgba(255,255,255,0.3); color: #FFF; }
.playlist-btn.active { background-color: transparent; color: #D4AF37; border: 1px solid #D4AF37; box-shadow: inset 0px 0px 10px rgba(212, 175, 55, 0.1); }

.info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 15px; }
.showcase-info h3 { font-size: 26px; font-weight: 300; color: #FFF; letter-spacing: 2px; }
.showcase-info p { font-size: 15px; font-weight: 300; color: #999; line-height: 1.8; max-width: 700px; }

.category-list { list-style: none; position: sticky; top: 120px; }
.category-list li { font-size: 14px; font-weight: 400; color: #555; padding: 25px 0; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); text-transform: uppercase; letter-spacing: 4px; transition: all 0.3s ease; }
.category-list li:hover { color: #D4AF37; padding-left: 10px; }
.category-list li.active { color: #D4AF37; font-weight: 500; border-bottom-color: rgba(212, 175, 55, 0.3); }
.showcase-header { font-size: 24px; font-weight: 200; letter-spacing: 4px; margin-bottom: 40px; text-transform: uppercase; color: #FFF; }

.team-section { background: radial-gradient(circle at bottom, #0A0A0A 0%, #030303 100%); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 150px 5%; border-top: 1px solid rgba(255,255,255,0.02); }
.team-overlay { width: 100%; text-align: center; }
.team-grid { display: flex; justify-content: center; gap: 60px; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; }

.team-card { flex: 1; min-width: 300px; max-width: 450px; background: rgba(10, 10, 10, 0.5); backdrop-filter: blur(10px); border-radius: 4px; padding: 50px 40px; transition: all 0.4s ease; box-shadow: 0px 20px 50px rgba(0,0,0,0.5); color: #FFF; border: 1px solid rgba(255,255,255,0.03); }
.team-card:hover { transform: translateY(-10px); border-color: rgba(212, 175, 55, 0.2); box-shadow: 0px 30px 60px rgba(0,0,0,0.7); }

.team-img-wrapper { width: 100%; height: 380px; border-radius: 4px; overflow: hidden; margin-bottom: 30px; background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 60%); display: flex; align-items: flex-end; justify-content: center; }
.team-img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.7s ease, filter 0.5s ease; filter: grayscale(30%) contrast(1.1) drop-shadow(0px 10px 15px rgba(0,0,0,0.5)); }
.team-card:hover .team-img-wrapper img { transform: scale(1.05); filter: grayscale(0%) contrast(1) drop-shadow(0px 15px 25px rgba(0,0,0,0.8)); }

.team-card h4 { font-size: 24px; font-weight: 300; letter-spacing: 3px; margin-bottom: 10px; }
.team-role { font-size: 11px; font-weight: 500; color: #D4AF37; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; opacity: 0.8; }
.team-bio { font-size: 14px; font-weight: 300; color: #888; line-height: 1.8; }

footer { background-color: #000; color: #FFFFFF; padding: 120px 5% 40px; text-align: center; border-top: 1px solid rgba(255,255,255,0.03); }
.footer-container { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 1400px; margin: 0 auto; }
.footer-tagline { color: #555; font-size: 14px; margin-bottom: 20px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase;}
.footer-location { color: #777; font-size: 13px; margin-bottom: 10px; letter-spacing: 1px;}

.footer-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.footer-link { color: #D4AF37; text-decoration: none; font-weight: 400; font-size: 15px; letter-spacing: 2px; transition: color 0.3s ease; opacity: 0.9; }
.footer-link:hover { color: #FFF; opacity: 1; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.03); margin-top: 80px; padding-top: 30px; color: #333; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;}

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 100; justify-content: center; align-items: center; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.modal-content { background: rgba(15, 15, 15, 0.9); border: 1px solid rgba(255,255,255,0.05); width: 95%; max-width: 750px; padding: 60px 50px; border-radius: 4px; position: relative; box-shadow: 0px 40px 100px rgba(0,0,0,0.8); max-height: 90vh; overflow-y: auto; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.close-btn { position: absolute; top: 20px; right: 25px; color: #555; font-size: 36px; cursor: pointer; font-weight: 200; transition: color 0.3s ease; line-height: 1; z-index: 10; }
.close-btn:hover { color: #FFF; }
.book-title { text-align: center; font-size: 28px; font-weight: 300; margin-bottom: 40px; color: #FFF; letter-spacing: 4px; text-transform: uppercase; }
.quote-form { display: flex; flex-direction: column; gap: 25px; }
.form-row { display: flex; gap: 25px; }
.input-group { display: flex; flex-direction: column; flex: 1; }
.input-group label { font-size: 10px; font-weight: 500; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; color: #777; }
.input-group input, .input-group select, .input-group textarea { padding: 16px; border: 1px solid rgba(255,255,255,0.05); border-radius: 2px; font-size: 14px; font-family: 'Montserrat', sans-serif; background-color: rgba(0,0,0,0.5); color: #FFF; transition: all 0.3s; outline: none; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: rgba(212, 175, 55, 0.5); background-color: rgba(20,20,20,0.8); }
.phone-group { display: flex; gap: 10px; }
.phone-group select { width: 120px; cursor: pointer; }
.date-group { display: flex; gap: 15px; }
.submit-btn { margin-top: 15px; width: 100%; padding: 20px; background-color: #EAEAEA; color: #111; border: none; border-radius: 2px; font-size: 12px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; }
.submit-btn:hover { background-color: #D4AF37; color: #111; box-shadow: 0px 0px 20px rgba(212, 175, 55, 0.3); }

.lightbox { display: none; position: fixed; z-index: 1000; padding-top: 0; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; }
.lightbox.show { display: flex; opacity: 1; }
.lightbox-content { margin: auto; display: block; max-width: 90%; max-height: 85vh; border-radius: 4px; box-shadow: 0px 30px 60px rgba(0,0,0,0.8); animation: zoomIn 0.4s ease; object-fit: contain; }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lightbox-close { position: absolute; top: 30px; right: 40px; color: #888; font-size: 40px; font-weight: 200; transition: 0.3s; cursor: pointer; z-index: 1001; }
.lightbox-close:hover, .lightbox-close:focus { color: #FFF; text-decoration: none; cursor: pointer; }

@media (max-width: 900px) {
    .menu-toggle { display: block; }
    .nav-links { position: absolute; top: 100%; left: 0; width: 100%; background-color: rgba(3, 3, 3, 0.98); flex-direction: column; padding: 40px 0; gap: 30px; display: none; border-bottom: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(10px); }
    .nav-links.show { display: flex; }
    .hero h1 { font-size: 36px; letter-spacing: 6px; }
    .hero p { font-size: 14px; padding: 0 10px; }
    .hero-buttons { flex-direction: column; width: 100%; padding: 0 20px; gap: 15px; }
    .btn-gold, .filled-gold { width: 100%; text-align: center; }
    .mute-btn { bottom: 20px; right: 20px; }
    .split-section { padding: 100px 0; }
    .about-overlay { padding: 0 8%; }
    .split-text h2 { font-size: 32px; }
    .split-text p { font-size: 14px; }
    .brand-pillars { padding: 80px 8%; }
    .pillars-container { gap: 40px; }
    .master-showcase { padding: 100px 5%; height: auto; }
    .showcase-container { flex-direction: column-reverse; gap: 40px; }
    .showcase-right { border-left: none; padding-left: 0; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .category-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; position: static; }
    .category-list li { width: 45%; text-align: center; border: 1px solid rgba(255,255,255,0.05); padding: 15px 0; font-size: 12px; border-radius: 2px; background: rgba(10,10,10,0.5); color: #888; }
    .category-list li.active { background: transparent; color: #D4AF37; border-color: #D4AF37; }
    .sub-nav { justify-content: center; }
    .info-header { flex-direction: column; align-items: flex-start; }
    .showcase-info h3 { font-size: 20px; text-align: center; width: 100%; }
    .showcase-info p { text-align: center; }
    .playlist-nav { justify-content: center; }
    .team-section { padding: 100px 5%; }
    .modal-content { padding: 40px 25px; width: 95%; }
    .form-row, .date-group { flex-direction: column; gap: 20px; }
    .phone-group select { width: 35%; }
    .phone-group input { width: 65%; }
    footer { padding: 80px 5% 40px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 28px; }
    .team-card { padding: 40px 25px; }
    .category-list li { width: 100%; } 
}

/* Container for the whole section */
.testimonial-section {
  display: flex;
  flex-direction: column;
  gap: 40px; 
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Flexbox setup for the row layout */
.testimonial-row {
  display: flex;
  align-items: center; 
  gap: 30px; 
}

/* Alternating Testimonial Layout (Desktop Only) */
@media (min-width: 769px) {
  .testimonial-row:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right; 
  }
}

/* Circular Headshot Styling */
.testimony-headshot {
  width: 160px;
  height: 160px;
  border-radius: 50%; 
  object-fit: cover; 
  flex-shrink: 0; 
  border: 3px solid rgba(212, 175, 55, 0.5); 
  box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
}

/* Content wrapper styling */
.testimony-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Typography */
.testimony-quote {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #ccc; 
  margin: 0;
  font-style: italic; 
}

.testimony-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.testimony-company {
  font-weight: 400;
  color: #D4AF37; 
}

/* Responsive Code for Mobile Phones */
@media (max-width: 768px) {
  .testimonial-row {
    flex-direction: column; 
    text-align: center; 
    gap: 20px;
  }
}