:root{
  --brand:#f0b23c; /* warm accent to match sample logo */
  --ink:#222;
  --muted:#6b7280;
  --bg:#ffffff;
  --gray:#f3f4f6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%;display:block;height:auto}
.container{width:min(1100px,92%);margin:auto}
.center{text-align:center}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem 1rem;z-index:9999}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:1000}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.3px}
.brand img{width:44px;height:44px;object-fit:contain;transform-origin:center;will-change:transform,opacity}
.brand-text{font-family:Outfit,Inter,sans-serif}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.site-nav a{display:block;padding:.6rem .8rem;border-radius:.5rem;text-decoration:none;color:var(--ink)}
.site-nav a:hover{background:var(--gray)}
.nav-toggle{display:none;font-size:1.5rem;background:none;border:none}

.hero{min-height:70vh;background-size:cover;background-position:center;display:grid;place-items:center;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35));}
.hero-inner{position:relative;z-index:1;color:#fff;text-align:center}
.hero h1{font-family:Outfit,Inter,sans-serif;font-size:clamp(1.8rem,3.5vw,3rem);margin:.2rem 0}
.hero p{color:#e5e7eb;margin:0 0 1rem}
.hero .btn{margin:.2rem .3rem}

.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:.6rem;background:#e5e7eb;color:#111;text-decoration:none;font-weight:600;border:1px solid #d1d5db}
.btn.primary{background:var(--brand);border-color:#d79c2d}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;padding:2.2rem 0}
.feature{background:var(--gray);border-radius:1rem;padding:1.2rem}

.parallax{min-height:320px;background-size:cover;background-attachment:fixed;display:grid;place-items:center;margin:2rem 0}
.parallax-overlay{background:rgba(0,0,0,.45);padding:2rem 1rem;border-radius:1rem;color:#fff;text-align:center}
.parallax h2{margin:0;font-family:Outfit,Inter,sans-serif}

.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;padding:2rem 0;align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:#fff;border:1px solid #eee;border-radius:1rem;overflow:hidden}
.card h3{margin:.8rem 1rem}
.card p{margin:0 1rem 1rem}

.page-hero{min-height:260px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.page-hero .container{padding:3rem 0}
.page-hero h1{margin:0;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.6);font-family:Outfit,Inter,sans-serif}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:2rem 0}
.project-grid figure{margin:0;border:1px solid #eee;border-radius:1rem;overflow:hidden;background:#fff}
.project-grid figcaption{padding:.8rem;font-weight:600}

.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;padding:2rem 0}
.service-list article{background:var(--gray);border-radius:1rem;padding:1rem}

.contact-grid form{background:#fff;border:1px solid #eee;border-radius:1rem;padding:1rem}
.contact-form label{display:block;margin:.6rem 0 .2rem}
.contact-form input,.contact-form textarea{width:100%;padding:.7rem;border:1px solid #d1d5db;border-radius:.5rem}
.form-note{font-size:.9rem;color:var(--muted)}

.legal{padding:2rem 0;max-width:800px}
.notfound{padding:4rem 0}

.cta-band{background:#111;color:#fff}
.cta-flex{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 0}
.cta-band .btn{background:#fff}

.site-footer{background:#0f172a;color:#cbd5e1;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding:2rem 0}
.site-footer a{color:#e5e7eb}
.footer-brand img{width:56px;margin-bottom:.6rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:1rem 0;color:#94a3b8}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease, transform .8s ease}
.reveal.show{opacity:1;transform:none}
.reveal.delay{transition-delay:.2s}

.logo-intro{animation:logoPop 1s cubic-bezier(.16,.84,.44,1) both}
@keyframes logoPop{
  0%{opacity:0;transform:scale(.8)}
  100%{opacity:1;transform:scale(1)}
}

@media (max-width: 980px){
  .features{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr;gap:1rem}
  .cards{grid-template-columns:1fr 1fr}
  .project-grid{grid-template-columns:1fr 1fr}
  .service-list{grid-template-columns:1fr}
  .cta-flex{flex-direction:column;gap:1rem}
  .site-nav{display:none;position:absolute;right:0;top:64px;background:#fff;border:1px solid #eee;border-radius:.8rem;padding:.6rem;margin:.4rem}
  .site-nav ul{flex-direction:column;gap:.2rem}
  .nav-toggle{display:block}
}
@media (max-width: 560px){
  .cards,.project-grid{grid-template-columns:1fr}
}


/* Dropdown menu for Projects */
.site-nav .dropdown {
  position: relative;
  display: inline-block;
}
.site-nav .dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1000;
}
.site-nav .dropdown-content li {
  display: block;
}
.site-nav .dropdown-content li a {
  color: #333;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
}
.site-nav .dropdown-content li a:hover {
  background-color: #f1f1f1;
}
.site-nav .dropdown:hover .dropdown-content {
  display: block;
}

/* Phone number in nav */
.site-nav .phone a{font-weight:600}
@media (max-width: 720px){.site-nav ul{flex-wrap:wrap}.site-nav .phone{order:99}}


/* Enlarge header logo and adjust brand in nav */
.brand-li .brand img {
    width: 60px;
    height: 60px;
}
.brand-li {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}
.brand-li .brand-text {
    font-size: 1.1rem;
    font-weight: 700;
}


/* Header brand alignment to left corner in a straight line */
.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.brand img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}
.brand-text {
    font-size: 1.2rem;
    font-weight: 700;
}

/* Added uniform image ratio */
.uniform-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio */
  overflow: hidden;
}
.uniform-img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Map Section Styling */
.map-section {
  background: #0b0d1a; /* matches footer background */
  padding: 2.5rem 0 3rem;
  position: relative;
}

.map-divider {
  height: 4px;
  width: 120px;
  background-color: #d4af37; /* gold accent */
  margin: 0 auto 2rem;
  border-radius: 2px;
  opacity: 0.9;
}

.map-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.map-box {
  flex: 1 1 450px;
  max-width: 480px;
  text-align: center;
}

.map-box h4 {
  color: #f5f5f5;
  margin-bottom: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1.1rem;
}

/* Gold glow effect on hover */
.map-box iframe {
  border-radius: 10px;
  border: 2px solid transparent;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.map-box iframe:hover {
  border-color: #d4af37; /* gold border */
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.45);
  transform: scale(1.02);
}

/* Responsive */
@media (max-width: 768px) {
  .map-divider {
    width: 80px;
  }
  .map-box h4 {
    font-size: 1rem;
  }
}
/* Waving hand SVG link */
.wave-link {
  position: absolute;
  top: 25px;
  right: 45px;
  z-index: 1000;
  animation: waveMotion 2s infinite ease-in-out;
  transform-origin: 70% 70%;
}

.wave-link a {
  display: inline-block;
  text-decoration: none;
}

.wave-icon {
  width: 35px;
  height: 35px;
  fill: #d4af37; /* Gold color */
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.4));
}

.wave-link a:hover .wave-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.7));
}

/* Keyframes for waving effect */
@keyframes waveMotion {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60%, 100% { transform: rotate(0deg); }
}

/* Video styling */
.video-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.about-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.video-text {
  position: absolute;
  bottom: 15px;
  left: 20px;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 14px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

/* When revealed (if using scroll animation) */
.reveal.active .about-video,
.reveal.active .video-text {
  opacity: 1;
  transform: translateY(0);
}

/* === ABOUT SECTION (FINAL VERSION) === */
.about-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  max-width: 1400px;
  margin: 100px auto;
  padding: 40px 80px;
  flex-wrap: wrap;
}

/* Left text */
.about-text {
  flex: 0 0 45%;
  text-align: left;
  line-height: 1.7;
}

/* Right horizontal media group */
.media-row {
  flex: 0 0 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

/* Each image/video item */
.media-item {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  aspect-ratio: 3 / 4;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Center video slightly larger */
.media-item.video {
  flex: 1.2;
  aspect-ratio: 3 / 3.5;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.25);
  animation: glowPulse 4s ease-in-out infinite;
}

/* Glow animation */
@keyframes glowPulse {
  0% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.25); }
  50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.35); }
  100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.25); }
}

/* Hover effects */
.media-item:hover {
  transform: scale(1.03);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.media-item:hover img,
.media-item:hover video {
  transform: scale(1.05);
  transition: transform 0.4s ease;
}

/* Video label */
.video-text {
  position: absolute;
  bottom: 10px;
  left: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
}

.media-item.video:hover .video-text {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .about-section {
    flex-direction: column;
    text-align: center;
  }

  .about-text {
    flex: 1 1 100%;
  }

  .media-row {
    flex: 1 1 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .media-item {
    max-width: 250px;
  }
}
/* === MOBILE PARALLAX FIX === */
@supports (-webkit-overflow-scrolling: touch) {
  .parallax {
    background-attachment: scroll !important;
    background-position: center !important;
    background-size: cover !important;
    transform: translateZ(0);
  }
}