:root{
  --bg:#ffffff;
  --ink:#1a1a1a;
  --muted:#6b7280;
  --accent:#dc2626;
  --accent-hover:#b91c1c;
  --surface:#f8fafc;
  --border:#e2e8f0;
  --shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* NAVBAR - Consistent across all pages */
.nav{
  position:sticky;
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px, 4vw, 48px);
  background:rgba(255,255,255,0.98);
  backdrop-filter:saturate(140%) blur(12px);
  z-index:1000;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.brand img{ height:28px; width:auto; display:block; }
.menu{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.menu a{
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  font-size:15px;
  letter-spacing:0;
  padding:10px 18px;
  border-radius:6px;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
}
.menu a:hover{
  color:var(--accent);
}
.menu a:active{
  color:var(--accent);
}

@media (max-width: 768px) {
  .nav{
    padding:14px 20px;
  }
  .brand img{ height:24px; }
  .menu{ gap:4px; }
  .menu a{
    font-size:14px;
    padding:8px 12px;
  }
}

/* FULLSCREEN HERO */
.hero{
  position:relative;
  height:100svh;           /* safe full viewport on mobile */
  width:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  text-align:center;
  padding-top:0;            /* no extra padding needed for sticky nav */
}
.slides{ position:absolute; inset:0; }
.slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  animation:fade 18s infinite;
  transition:opacity .6s ease;
}
.s1{ animation-delay:0s; }
.s2{ animation-delay:6s; }
.s3{ animation-delay:12s; }
@keyframes fade{
  0%   {opacity:0}
  5%   {opacity:1}
  28%  {opacity:1}
  33%  {opacity:0}
  100% {opacity:0}
}

/* Dark overlay so white hero text pops */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,.18));
  pointer-events:none;
}

.hero-content{ position:relative; z-index:1; padding:0 24px; max-width:1100px; }
.hero h1{
  margin:0 0 20px;
  font-size:clamp(36px, 7vw, 80px);
  line-height:1.1;
  font-weight:900;
  color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.7);
  letter-spacing:-0.02em;
}
.hero p{
  margin:0 0 32px;
  font-size:clamp(18px, 2.2vw, 24px);
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
  font-weight:400;
  opacity:0.95;
}

/* CTA – sheen only on hover */
.cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  letter-spacing:-0.01em;
  overflow:hidden;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(220, 38, 38, 0.1);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  border:none;
  cursor:pointer;
}
.cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-xl), 0 0 0 1px rgba(220, 38, 38, 0.2);
  background:linear-gradient(135deg, var(--accent-hover) 0%, #991b1b 100%);
}
.cta:active{
  transform:translateY(-1px);
}
.cta.sheen::after{
  content:"";
  position:absolute;
  top:-20%; bottom:-20%;
  width:45%;
  right:110%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.35));
  opacity:0;
}
.cta.sheen:hover::after{
  animation:sweep 1.2s linear forwards;
  opacity:1;
}
@keyframes sweep{
  0%   { right:110%; }
  100% { right:-60%; }
}

/* Scroll hint */
.scroll-hint{
  position:absolute;
  bottom:20px; left:50%;
  width:28px; height:46px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:20px;
  transform:translateX(-50%);
  opacity:.9;
}
.scroll-hint::after{
  content:"";
  position:absolute; top:8px; left:50%;
  width:6px; height:6px;
  background:#fff;
  border-radius:50%;
  transform:translateX(-50%);
  animation:dot 1.8s ease-in-out infinite;
}
@keyframes dot{
  0% { transform:translate(-50%,0); opacity:1; }
  70%{ transform:translate(-50%,18px); opacity:.2; }
  100%{ transform:translate(-50%,0); opacity:1; }
}

/* Services Section */
.services{
  padding:80px 40px;
  background:#fff;
  text-align:center;
}
.services h2{
  font-size:clamp(28px, 4vw, 48px);
  margin:0 0 16px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.services .subtitle{
  margin:0 auto 60px;
  color:var(--muted);
  max-width:700px;
  font-size:18px;
  line-height:1.7;
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
  max-width:1200px;
  margin:0 auto;
}
.card{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  border:1px solid var(--border);
}
a.card{
  text-decoration:none;
  color:inherit;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-xl);
  border-color:rgba(220, 38, 38, 0.1);
}
.card img{
  width:100%;
  height:180px;
  object-fit:cover;
}
.card-body{
  padding:18px;
  text-align:left;
}
.card-body h3{
  margin:0 0 12px;
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.card-body p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

/* Our Network Section */
.network-section{
  text-align:center;
  padding:60px 20px;
  background:#f8f9fa;
}
.network-section h2{
  font-size:2rem;
  font-weight:700;
  margin-bottom:10px;
  color:#2c2c2c;
}
.network-section .subtitle{
  font-weight:600;
  color:#444;
  margin-bottom:10px;
}
.network-section .description{
  max-width:700px;
  margin:0 auto 40px;
  color:#666;
  line-height:1.6;
}

.map-card{
  max-width:1000px;
  margin:0 auto;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
  overflow:hidden;
  padding:15px;
}
.iframe-wrapper{
  position:relative;
  width:100%;
  height:700px;          /* increased iframe height */
  border-radius:10px;
  overflow:hidden;
}
.map-frame{
  width:100%;
  height:100%;
  border:none;
  display:block;
}
/* White strip overlay to hide external iframe header */
.iframe-cover{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:77px;           /* perfect height to cover black header */
  background:#fff;
  z-index:10;
  pointer-events:none;
}

/* Contact Section */
.contact-section{
  text-align:center;
  padding:80px 20px 100px;
  background:#fff;
}
.contact-section h2{
  font-size:clamp(28px, 4vw, 48px);
  margin:0 0 16px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.contact-section .subtitle{
  margin:0 auto 40px;
  color:#60646c;
  max-width:720px;
}

.contact-card{
  max-width:720px;
  margin:0 auto;
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow-xl);
  padding:40px;
  border:1px solid var(--border);
}
.contact-card-header{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-bottom:18px;
}
.contact-badge{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:999px;
  background:rgba(229,57,53,.12);
  font-size:22px;
}
.contact-card-header h3{ margin:0; font-size:22px; font-weight:800; }
.muted{ margin:0; color:#6b7280; }

.contact-form{
  display:flex; flex-direction:column; gap:14px;
  margin-top:12px;
  text-align:left;
}
.field-label{
  font-size:14px; font-weight:600; color:#374151;
}
.field input,
.field textarea{
  width:100%;
  border:2px solid var(--border);
  border-radius:12px;
  padding:16px 16px;
  font-size:15px;
  outline:none;
  background:#fff;
  font-family:inherit;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.field input:focus,
.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(220, 38, 38, 0.1);
  transform:translateY(-1px);
}
.contact-submit{
  width:100%;
  margin-top:12px;
  padding:16px 32px;
  border-radius:12px;
  font-size:16px;
}
.contact-status{
  margin-top:10px;
  font-size:14px;
  color:#374151;
}
.contact-status.success{ color:#0b8f4d; }
.contact-status.error{ color:#c62828; }

/* Footer */
.footer{
  padding:24px;
  color:#666;
  text-align:center;
  border-top:1px solid rgba(0,0,0,0.06);
  background:#fafafa;
}