body,html{margin:0;padding:0;height:100%;font-family:sans-serif;color:#f5f5f5}
.bg-video{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bg-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);z-index:-1}
.site-content{position:relative;z-index:1}
.hero-banner{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}
.banner-logo{max-width:220px;margin:0 auto 20px;display:block;filter:drop-shadow(0 0 25px rgba(255,255,255,.3))}
.hero-banner h1{font-size:3rem;margin:0;text-shadow:0 0 18px rgba(30,58,138,.7),0 0 28px rgba(220,38,38,.45)}
.fancy{font-family:'Cinzel Decorative','Great Vibes',cursive;font-size:1.6rem;background:linear-gradient(90deg,#f0f0f0,#d1d5db);-webkit-background-clip:text;color:transparent;text-shadow:0 0 14px rgba(30,58,138,.6),0 0 24px rgba(220,38,38,.4);margin:6px 0}
.motto{font-style:italic;color:#9ca3af;text-shadow:0 0 12px rgba(30,58,138,.45)}
.btn{background:#1e3a8a;color:#fff;padding:12px 24px;border-radius:999px;text-decoration:none;box-shadow:0 0 20px rgba(30,58,138,.6)}
.btn:hover{box-shadow:0 0 28px rgba(30,58,138,.9),0 0 36px rgba(220,38,38,.6)}
.pulse{animation:pulseGlow 2.8s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(30,58,138,.5),0 0 32px rgba(220,38,38,.35)}50%{box-shadow:0 0 28px rgba(30,58,138,.8),0 0 42px rgba(220,38,38,.5)}}

.section{padding:70px 0}
.section.alt{background:transparent}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.card{background:rgba(31,41,55,.85);border-radius:14px;padding:20px;margin:10px;box-shadow:0 0 20px rgba(107,114,128,.6)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.price{color:#ef4444;font-weight:700;text-shadow:0 0 10px rgba(220,38,38,.35)}
form{display:grid;gap:12px}
input,textarea{padding:10px;border:1px solid #333;border-radius:8px;background:#111;color:#f5f5f5}
button{background:#dc2626;color:#fff;padding:12px 16px;border:none;border-radius:8px;font-weight:700;cursor:pointer;box-shadow:0 0 16px rgba(220,38,38,.6)}
button:hover{box-shadow:0 0 24px rgba(220,38,38,.9),0 0 32px rgba(30,58,138,.6)}
footer{border-top:1px solid #333;text-align:center;padding:20px;background:transparent;color:#9ca3af}


/* ===== Mobile-first enhancements (v11) ===== */

/* Typographic scaling with clamp for hero */
.hero-banner h1{ font-size: clamp(1.8rem, 6.5vw, 3rem); }
.fancy{ font-size: clamp(1rem, 3.8vw, 1.6rem); }
.motto{ font-size: clamp(.9rem, 3.6vw, 1.05rem); max-width: 900px; margin-left: auto; margin-right: auto; }

/* Ensure the video always fits without creating scrollbars */
.bg-video{ object-fit: cover; max-width: 100%; height: 100%; }
.bg-overlay{ background: rgba(0,0,0,.72); } /* Darker than v10 for mobile readability */

/* Card readability over video */
.card{ background: rgba(17, 24, 39, .86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Larger tap targets */
a.btn, button{ min-height: 48px; padding: 14px 22px; border-radius: 14px; }

/* Inputs: bigger, friendlier on touch */
input, textarea{ padding: 14px; font-size: 16px; border-radius: 12px; }

/* Layout adjustments at tablet/phone sizes */
@media (max-width: 1024px){
  .container{ padding: 0 16px; }
  .tiers{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px){
  .section{ padding: 56px 0; }
  .tiers{ grid-template-columns: 1fr; gap: 16px; }
  .contact{ display: grid; grid-template-columns: 1fr; gap: 16px; }
  .banner-logo{ max-width: 160px; }
}

/* Safe-area inset for modern phones with notches (iOS/Android) */
.site-content{ padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
footer{ padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

/* Slightly stronger overlay specifically for very small devices */
@media (max-width: 420px){
  .bg-overlay{ background: rgba(0,0,0,.78); }
}

/* Respect reduced motion but still keep video (user requested always-on). We'll disable pulse animation only. */
@media (prefers-reduced-motion: reduce){
  .pulse{ animation: none; }
}

/* v12: Full-width semi-transparent banner in hero */
.top-banner-img{
  width: 100%;
  height: auto;
  display: block;
  opacity: .88; /* semi-transparent so video shows subtly */
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.55));
  mix-blend-mode: screen; /* lets highlights pop over dark video */
  margin: 0 auto 18px;
}
@media (max-width: 768px){
  .top-banner-img{ opacity: .92; } /* slightly stronger on mobile for clarity */
}

/* v13: Centered professional contact form */
.contact-center{max-width: 900px; margin: 0 auto; text-align: center}
.contact-head h2{margin-bottom: 6px}
.contact-head p{color:#bfc6d1; margin: 4px 0}
.contact-info a{color:#e5e7eb; text-decoration: none; border-bottom: 1px dotted rgba(229,231,235,.3)}
.form-card{max-width: 720px; margin: 18px auto 0; text-align: left; padding: 28px}
form .row{display: grid; grid-template-columns: 1fr 1fr; gap: 14px}
form label{font-size: 14px; color:#cbd5e1; display:block}
form input, form textarea{
  width:100%; padding: 12px 14px; margin-top:6px;
  background: rgba(10,12,16,.9); color:#f5f5f5;
  border: 1px solid #2f3340; border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
form input:focus, form textarea:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25), 0 0 18px rgba(30,58,138,.45);
}
.actions{display:flex; justify-content:center; margin-top: 12px}
.actions button{
  min-width: 220px;
  padding: 12px 18px; border:0; border-radius: 12px;
  font-weight: 800; color:#fff; background:#dc2626;
  box-shadow: 0 0 16px rgba(220,38,38,.55);
  cursor: pointer;
}
.actions button:hover{box-shadow: 0 0 24px rgba(220,38,38,.85), 0 0 28px rgba(30,58,138,.45)}
@media (max-width: 720px){
  form .row{grid-template-columns: 1fr}
  .form-card{padding: 22px}
  .actions button{width:100%}
}

/* v14: Fix form input/textarea overlapping */
form label{display:flex;flex-direction:column;align-items:flex-start}
form input, form textarea{width:100%;box-sizing:border-box}
form .row{display:flex;flex-wrap:wrap;gap:16px}
form .row label{flex:1;min-width:45%}

/* v18: Selected package badge styles */
.selected-badge{
  margin: 10px 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(59,130,246,.35);
  border-left-width: 6px;
  border-radius: 12px;
  background: rgba(15,23,42,.65);
  color: #e5e7eb;
  box-shadow: 0 6px 18px rgba(30,58,138,.35);
  text-align: left;
  font-weight: 700;
}
.selected-badge span{ color:#93c5fd; font-weight: 800 }

/* v19: Center About Our Team section */
#about .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
#about .content, #about .photo{
  max-width:800px;
  margin:12px auto;
}
#about ul.facts{list-style:none;padding:0;margin:12px auto}

/* v20: Smaller centered team photo */
#about .photo img{
  max-width: 60%;
  margin: 0 auto;
  display:block;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
@media(max-width:768px){
  #about .photo img{max-width:85%;}
}

/* v21: Mobile-optimized video background */
.bg-video{opacity:0; transition: opacity .6s ease; object-fit:cover; width:100%; height:100%; position:fixed; top:0; left:0; z-index:-2; will-change: opacity;}
.bg-video.ready{opacity:0.9;}
/* Slightly darker overlay for mobile readability */
@media (max-width: 768px){
  .bg-overlay{ background: rgba(0,0,0,.8); }
}
/* Very small devices: lighten GPU load by lowering opacity a touch */
@media (max-width: 420px){
  .bg-video.ready{ opacity: 0.8; }
}

/* v23: Full-width top banner with semi-transparent grey background */
.top-banner{position:relative;width:100%;margin-bottom:20px}
.top-banner img{width:100%;height:auto;display:block;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.top-banner .banner-bg{position:absolute;inset:0;background:rgba(128,128,128,0.5);z-index:1}
.top-banner img{position:relative;z-index:2}

/* v25: Transparent PNG banner with reduced vertical height and glow */
.top-banner img{
  width:100%;
  max-height: 200px; /* half the previous vertical size */
  object-fit: contain;
  display:block;
  margin:0 auto;
  filter: drop-shadow(0 0 20px rgba(30,58,138,0.7)) drop-shadow(0 0 28px rgba(220,38,38,0.4));
}
.top-banner .banner-bg{
  background:rgba(128,128,128,0.4); /* semi-transparent grey background */
}

/* v27: Revert to taller banner height and stretch more horizontally */
.top-banner img{
  width: 100%;
  max-height: 200px;  /* back to old height */
  object-fit: cover;  /* ensures it fills full width more aggressively */
}

/* v30: Show full natural height for top banner logo */
.top-banner img{
  width:auto;
  height:auto;
  max-width:100%;
  display:block;
  margin:0 auto;
  object-fit:contain;
}

/* v31: Fixed height top banner 300px, logo fits height, drop shadow under bar */
.top-banner{
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(128,128,128,0.4);
  box-shadow:0 6px 20px rgba(0,0,0,.7);
}
.top-banner img{
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  z-index:2;
}
.top-banner .banner-bg{display:none} /* disable extra overlay since bar has background */

/* v32: Grey background bar 500px wide, 300px tall, centered, rounded corners, drop shadow */
.top-banner{
  position:relative;
  width:500px;
  max-width:90%;
  height:300px;
  margin:0 auto 20px auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(128,128,128,0.4);
  border-radius:24px;
  box-shadow:0 6px 20px rgba(0,0,0,.7);
}
.top-banner img{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  display:block;
  z-index:2;
}

/* v34: Perfect centering on mobile, all text centered */
@media(max-width: 768px){
  body, .site-content, .section, .container, .contact-center, .form-card{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .tiers{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .tier.card{
    width:90%;
    margin:10px auto;
  }
  form .row{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  form label{
    width:100%;
    text-align:left;
  }
  .actions{justify-content:center}
}

/* v35: Force all elements centered on mobile */
@media(max-width: 768px){
  body, .site-content, .section, .container, .contact-center, .form-card, .tier.card, .hero-content, .about, #about .content, #about .photo, footer {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
    align-items:center;
  }
  .tiers{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
  }
  .tier.card{width:90%; margin:12px auto;}
  form{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
  form .row{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
  form label{width:90%; text-align:center}
  form input, form textarea{width:100%}
  .actions{justify-content:center; width:100%}
}

/* v36: Mobile-first centering & load optimizations */
*{box-sizing:border-box}
html,body{overflow-x:hidden}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

@media (max-width: 768px){
  /* Ensure true center at first paint */
  body, .site-content, .section, .container, .hero-content, .about, #about .content, #about .photo, footer{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  /* Neutralize any viewport-width transforms that can cause off-center flashes */
  .top-banner{
    left:auto !important;
    transform:none !important;
    width:min(500px, 92%) !important;
    margin:0 auto 20px auto !important;
  }
  /* Ensure cards & grids center with no initial lag */
  .tiers{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
  .tier.card{width:92%;margin:12px auto}
  .contact-center,.form-card{margin-left:auto;margin-right:auto}
  form, form .row{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
  form label{width:92%}
  .actions{justify-content:center;width:100%}
  /* Images never overflow */
  img{max-width:100%;height:auto}
}