/* style.css — mobile-first */

/* Color palette (safari) */
:root{
  --safari-brown: #8B4513;
  --safari-gold: #DAA520;
  --safari-green: #228B22;
  --safari-tan: #D2B48C;
  --text-dark: #222;
  --muted: #6b6b6b;
  --container-width: 1100px;
  --radius: 10px;
  --glass: rgba(255,255,255,0.9);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text-dark);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background: #fff;
}

/* Utility container */
.container{
  width:92%;
  max-width: var(--container-width);
  margin:0 auto;
}

/* Header */
.site-header{
  background: var(--safari-green);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
}
.logo{height:44px; width:auto; border-radius:6px; object-fit:cover}
.brand-text{font-weight:700; font-size:1.05rem}

/* Nav */
.nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  color:#fff;
  width:46px;
  height:46px;
  cursor:pointer;
}
.hamburger, .hamburger::before, .hamburger::after{
  display:block;
  width:22px;
  height:3px;
  background:#fff;
  border-radius:3px;
  transition:all .25s ease;
  position:relative;
}
.hamburger::before, .hamburger::after{
  content:'';
  position:absolute;
  left:0;
}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}

/* Desktop nav hidden on mobile until opened */
.site-nav{
  position: absolute;
  right: 10px;
  top: 68px;
  background: rgba(255,255,255,0.98);
  width: calc(100% - 36px);
  max-width: 300px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transform-origin: top right;
  transform: scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: all .22s ease;
}
.site-nav.open{
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.site-nav ul{list-style:none; margin:0; padding:12px}
.site-nav a{
  display:block;
  padding:10px 12px;
  color:var(--text-dark);
  text-decoration:none;
  border-radius:6px;
}
.site-nav a:hover{background: #f6f6f6}

/* When hamburger open, animate into X */
.nav-toggle.open .hamburger{background: transparent}
.nav-toggle.open .hamburger::before{transform: rotate(45deg); top: 0}
.nav-toggle.open .hamburger::after{transform: rotate(-45deg); top: 0}

/* HERO */
.hero{
  min-height: 52vh;
  display:flex;
  align-items:center;
  color:#fff;
  background-size:cover;
  background-position:center;
  position:relative;
}
.hero .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
}
.hero-inner{position:relative; padding:48px 0; z-index:2; text-align:center}
.hero h1{margin:0; font-family:'Montserrat', sans-serif; font-weight:700; font-size:1.6rem}
.lead{color:#f4f4f4; margin-top:10px; font-size:1rem}
.hero-ctas{margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  padding:10px 16px;
  border-radius:8px;
  font-weight:700;
  font-size:0.95rem;
}
.btn.primary{background:var(--safari-gold); color:var(--safari-brown)}
.btn.ghost{background:transparent; border:2px solid rgba(255,255,255,0.3); color:#fff}

/* Section defaults */
.section{padding:40px 0}
.section h2{font-family:'Montserrat', sans-serif; font-size:1.2rem; margin:0 0 8px}
.section-sub{color:var(--muted); margin-bottom:18px}

/* About */
.about-grid{display:grid; gap:18px}
.about-image img{width:100%; height:auto; border-radius:8px}
.about-text p{margin-top:8px}
.about-features{margin-top:12px; padding-left:18px; color:var(--muted)}

/* Services layout */
.services-grid{display:grid; gap:12px}
.service-card{background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.service-card img{width:100%; height:160px; object-fit:cover}
.service-card h3{margin:12px; font-size:1rem}
.service-card p{margin:0 12px 18px; color:var(--muted); font-size:0.95rem}

/* Numbers */
.numbers{background:linear-gradient(180deg,var(--safari-tan), #fff)}
.numbers-grid{display:grid; gap:12px; text-align:center; padding:20px 0}
.number strong{display:block; font-size:1.4rem; color:var(--safari-brown)}
.number span{color:var(--muted); font-size:0.9rem}

/* Tingwa gallery */
.tingwa .gallery-grid{display:grid; gap:8px; margin-top:14px}
.tingwa .gallery-grid figure{overflow:hidden; border-radius:8px}
.tingwa .gallery-grid img{width:100%; height:160px; object-fit:cover}

/* Why choose us */
.why-grid{display:grid; gap:12px}
.why-card{background:#fff; padding:16px; border-radius:8px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.why-card .icon{font-size:28px; color:var(--safari-green); margin-bottom:8px}

/* Contact */
.contact{color:#fff; position:relative; background-size:cover; background-position:center}
.contact .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.6))}
.contact-inner{position:relative; padding:50px 0; z-index:2}
.contact-card{background: rgba(255,255,255,0.95); padding:18px; border-radius:10px; color:var(--text-dark)}
.contact-grid{display:grid; gap:10px; margin-top:12px}
.contact-item{display:flex; gap:12px; align-items:center}
.contact-item i{font-size:20px; color:var(--safari-brown)}
.contact-small{color:var(--muted); margin-top:10px}

/* Footer */
.site-footer{background:var(--safari-brown); color:#fff; padding:28px 0 12px}
.footer-grid{display:grid; gap:18px; padding-bottom:12px}
.footer-logo{height:48px; border-radius:6px}
.footer-links ul{list-style:none; margin:0; padding:0}
.footer-links a{color:#fff; text-decoration:none}
.socials a{display:inline-block; margin-right:8px; color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08); padding-top:12px; text-align:center; font-size:0.9rem}

/* WhatsApp floating button */
.whatsapp-floating{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index:60;
  background: var(--safari-green);
  color:#fff;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  text-decoration:none;
  font-size:22px;
}

/* Responsive layout adjustments */
@media(min-width: 700px){
  .site-nav{
    position:static;
    transform:none;
    opacity:1;
    pointer-events:auto;
    background:transparent;
    box-shadow:none;
    max-width:none;
    width:auto;
  }
  .site-nav ul{display:flex; gap:12px; align-items:center; padding:0}
  .site-nav a{color:#fff; padding:8px 10px}
  .nav-toggle{display:none}
  .hero h1{font-size:2.4rem}
  .hero .lead{font-size:1.1rem}
  .about-grid{grid-template-columns: 1fr 1fr; align-items:center}
  .services-grid{grid-template-columns: repeat(3, 1fr)}
  .numbers-grid{grid-template-columns: repeat(4, 1fr); padding:36px 0}
  .tingwa .gallery-grid{grid-template-columns: repeat(4, 1fr)}
  .why-grid{grid-template-columns: repeat(4, 1fr)}
  .contact-grid{grid-template-columns: repeat(3, 1fr)}
  .footer-grid{grid-template-columns: 1fr 1fr 1fr; align-items:start}
}

@media(min-width:1100px){
  .hero{min-height:65vh}
  .container{width:94%; max-width: var(--container-width)}
}