:root{
  --sky:#5DC8FF;
  --navy:#002B5B;
  --muted:#f4f8fb;
  --white:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue';color:var(--navy);background:var(--muted);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
header{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;z-index:120;background:transparent;transition:all .28s}
header.scrolled{background:var(--white);box-shadow:0 6px 20px rgba(2,22,48,0.06)}
.brand{display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px}
.logo .mark{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--sky),#0099cc);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
nav a{margin:0 12px;font-weight:600}
.cta{background:var(--sky);padding:9px 14px;border-radius:22px;color:#032;box-shadow:0 6px 18px rgba(93,200,255,0.18);font-weight:700}

.hero{height:88vh;min-height:420px;display:flex;align-items:center;justify-content:center;padding:0 20px;position:relative;background-image:url('images/hero.jpg');background-size:cover;background-position:center;color:#fff;text-align:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(93,200,255,0.45),rgba(0,43,91,0.18))}
.hero-inner{position:relative;z-index:2;max-width:1000px;margin:auto}
.container{max-width:1100px;margin:0 auto;padding:24px}

.section{padding:64px 20px}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.about-grid img{width:100%;border-radius:12px;box-shadow:0 8px 26px rgba(2,22,48,0.06)}

.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--white);padding:18px;border-radius:12px;box-shadow:0 8px 22px rgba(2,22,48,0.06)}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.gallery-grid img{width:100%;height:140px;object-fit:cover;border-radius:10px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,0.06)}

.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:18px}

footer{padding:18px 24px;text-align:center;color:#fff;background:#07243a;margin-top:20px}

/* Snowmen visuals */
.snowman{position:fixed;z-index:50;opacity:0.95;transition:transform .8s ease}
.snowman.small{width:80px;height:auto}
.snowman.medium{width:110px}
.snowman.bottom-left{left:18px;bottom:18px}
.snowman.top-right{right:24px;top:84px}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(3,11,20,0.7);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.lightbox.show{opacity:1;pointer-events:auto}
.lightbox img{max-width:95%;max-height:85%;border-radius:8px}

@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  header{padding:10px 12px}
  .hero-inner h1{font-size:1.6rem}
}

/* MOBILE NAVIGATION FIX */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--navy);
}

#nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

@media(max-width: 900px) {
  nav a.cta {
    margin-top: 10px;
  }

  .menu-toggle {
    display: block;
    margin-left: auto;
  }

  #nav-links {
    position: absolute;
    top: 70px;
    right: 20px;
    background: rgba(0, 43, 91, 0.95);
    backdrop-filter: blur(4px);
    padding: 20px;
    border-radius: 12px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    z-index: 200;
  }

  #nav-links.open {
    display: flex;
  }

  #nav-links a {
    color: white;
    font-size: 18px;
    font-weight: 600;
  }
}
/* --- CONTACT PAGE MOBILE FIXES --- */

@media(max-width: 900px) {

  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .contact-grid form {
    width: 100%;
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  }

  .contact-grid form input,
  .contact-grid form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #d4dce4;
    font-size: 16px;
    margin-bottom: 12px;
  }

  .contact-grid form label {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: #003060;
  }

  /* Buttons on mobile */
  .contact-grid form button.cta,
  .contact-grid form a.cta {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    padding: 12px !important;
    border-radius: 10px;
  }

  /* WhatsApp button adjust */
  .contact-grid form a.cta {
    background: #25D366 !important;
    color: #fff !important;
  }

  /* Contact card */
  .contact-grid .card {
    width: 100%;
    padding: 18px !important;
  }
  
  /* Fix top spacing due to fixed header */
  body {
    padding-top: 80px;
  }
}
.footer {
  text-align: center;
  padding: 30px 0;
  margin-top: 40px;
  color: #406b86;
}

.footer .social-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 10px;
}

.footer .social-links img {
  width: 32px;
  height: 32px;
  filter: brightness(0.2);
  transition: 0.2s ease;
}

.footer .social-links img:hover {
  filter: brightness(0.5);
}