:root{
  --bg:#ffffff;
  --panel:#f6f8ff;
  --ink:#0a1a33;
  --muted:#5a6787;
  --neon:#2855ff;
  --neon2:#7a5cff;
  --gold:#cba135;
  --gridmax:1180px;
  --radius:18px;
  --h1:clamp(2.2rem,3.8vw,3.4rem);
  --h2:clamp(1.6rem,2.6vw,2.2rem);
  --h3:clamp(1.15rem,1.6vw,1.3rem);
  --body:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 var(--body)/1.7 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--gridmax); margin:0 auto; padding:0 22px}

.btn{display:inline-flex; align-items:center; gap:.6rem; padding:12px 16px; border-radius:14px; font-weight:700; letter-spacing:.2px}
.btn.primary{background:linear-gradient(90deg,var(--neon),var(--neon2)); color:#fff; box-shadow:0 10px 26px rgba(40,85,255,.18)}
.btn.ghost{border:1px solid #e6eaf0; background:#fff}
.muted{color:var(--muted)}
.small{font-size:.95rem}

/* Header */
header{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid #e6eaf0}
.nav{height:72px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px}
.wordmark{height:22px}
.menu{display:flex; align-items:center; gap:24px}
.menu a{color:var(--muted)} .menu a:hover{color:var(--ink)}
.hamb{display:none}

/* Mobile menu (checkbox hack) */
#navtoggle{ position:absolute; left:-9999px; } /* hidden but clickable via label */
#mobile{
  position:absolute; top:72px; left:0; right:0;
  background:#fff; border-top:1px solid #e6eaf0;
  z-index:1001; display:none;
}
#navtoggle:checked ~ #mobile{ display:block; }
.hamb{width:40px;height:40px;border-radius:12px;border:1px solid #e6eaf0;display:none; align-items:center; justify-content:center; cursor:pointer; position:relative; z-index:1002}
.hamb span{width:18px;height:2px;background:var(--ink);position:relative;display:block}
.hamb span:before,.hamb span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.hamb span:before{top:-6px} .hamb span:after{top:6px}

/* Hero */
.hero{padding:110px 0 70px; background: radial-gradient(1000px 450px at 80% -10%, #e6ecff, transparent 70%)}
.hero h1{font-size:var(--h1); line-height:1.08; margin:.5rem 0 1rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.statrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.stat{padding:10px 14px; border:1px solid #e6eaf0; border-radius:14px; background:#fff}

/* Sections */
section{padding:80px 0; border-top:1px solid #e6eaf0}
.grid{display:grid; gap:22px; grid-template-columns: repeat(12,1fr)}
.span-4{grid-column: span 4} .span-6{grid-column: span 6} .span-12{grid-column: span 12}
.card{padding:20px; border-radius:var(--radius); background:#fff; border:1px solid #e6eaf0; box-shadow:0 10px 22px rgba(10,26,51,.04)}
.card h3{margin:.2rem 0 .4rem}

/* Feature with image */
.feat{display:grid; gap:26px; grid-template-columns: 1.1fr 1fr; align-items:center}
.feat.rev{grid-template-columns: 1fr 1.1fr}
.feat img{border-radius:16px; border:1px solid #e6eaf0; box-shadow:0 20px 50px rgba(0,0,0,.08)}

/* Footer */
footer{padding:60px 0 90px; border-top:1px solid #e6eaf0; background:linear-gradient(180deg,#fff,#fafbff)}
.footgrid{display:grid; gap:22px; grid-template-columns: repeat(12,1fr)}
.footgrid > div{grid-column: span 3}

/* WhatsApp floating button (final) */
.whats-float{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff; padding:12px 14px; border-radius:999px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.whats-float img{width:22px; height:22px}
.whats-float span{font-weight:700}

/* Images: defaults */
.hero img, .feat img{ max-width:100%; height:auto; display:block; }

/* Responsive */
@media (max-width:980px){
  .span-4{grid-column:span 6} .span-6{grid-column:span 12}
  .feat, .feat.rev{grid-template-columns: 1fr}
  .footgrid > div{grid-column: span 6}
}
@media (max-width:760px){
  .menu{display:none} .hamb{display:flex}
  .footgrid > div{grid-column: span 12}
  .span-4{grid-column: span 12}
  .hero{padding-top:90px}
  .whats-float span{display:none} /* compact on mobile */
}


/* === Equal-height feature sections (desktop) === */
@media (min-width:980px){
  /* Let grid columns stretch to the tallest column */
  .feat, .feat.rev { align-items: stretch; }

  /* Make both columns flex containers so children can fill height */
  .feat > div, .feat.rev > div { display: flex; flex-direction: column; }

  /* Image fills column height, crops elegantly */
  .feat img, .feat.rev img {
    width: 100%;
    height: 100% !important;     /* override any previous fixed heights */
    object-fit: cover;
  }
}
@media (min-width:980px){
  /* Hero Image — Mobile First */
.hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Desktop — Taller Hero Image */
@media (min-width: 980px) {
  .hero img {
    height: 650px; /* Increase or decrease as needed */
    object-fit: cover;
    object-position: center;
  }
}
/* Hero: mobile small, desktop full + centered */
.hero { overflow: hidden; } /* avoids scrollbars if tall */
.hero img{
  width:100%;
  height:auto;
  object-fit:cover;
  object-position:center;
}

@media (min-width:980px){
  .hero img{
    height:75vh;   /* fills ~75% of screen height */
    max-height:820px; /* safety cap */
  }
}
<header>
  <input id="navtoggle" type="checkbox" />
  <div class="wrap nav">
    <div class="brand">
      <a href="/index.html" aria-label="Erenvue Home">
        <svg class="wordmark" viewBox="0 0 420 60" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#2855ff"/><stop offset="50%" stop-color="#7a5cff"/><stop offset="100%" stop-color="#cba135"/></linearGradient></defs>
          <text x="0" y="42" font-family="Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
                font-weight="800" font-size="40" fill="url(#g)" letter-spacing="1">Erenvue</text>
          <circle cx="408" cy="18" r="6" fill="url(#g)"/>
        </svg>
      </a>
    </div>

    <nav class="menu" aria-label="Main">
      <a href="/index.html">Home</a>
      <a href="/services.html">Services</a>
      <a href="/resources.html">Resources</a>
      <a href="/about.html">About</a>
      <a href="/blog.html">Blog</a>
      <a href="/contact.html" class="btn primary">Contact</a>
    </nav>

    <label class="hamb" for="navtoggle" aria-label="Open menu"><span></span></label>
  </div>

  <nav id="mobile">
    <a href="/index.html">Home</a>
    <a href="/services.html">Services</a>
    <a href="/resources.html">Resources</a>
    <a href="/about.html">About</a>
    <a href="/blog.html">Blog</a>
    <a href="/contact.html">Contact</a>
  </nav>
</header>
/* Make sure header is always above page content */
header { position: sticky; top:0; z-index: 2000; }
.nav, .menu { position: relative; z-index: 2001; }
.menu a { pointer-events: auto; }

/* Ensure hero/background sections never cover the header */
.hero, section { position: relative; z-index: 1; }

/* WhatsApp bubble stays below header */
.whats-float { z-index: 1500 !important; }
/* ---- Patch: mobile menu show/hide (safe) ---- */
#mobile { display: none; }                /* default: hidden */

@media (max-width:760px){
  .menu { display: none; }                /* hide desktop menu on mobile */
  .hamb { display: flex; cursor: pointer; }
  #mobile{
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e6eaf0;
    display: none;                        /* still hidden until toggled */
    z-index: 2001;
  }
  #navtoggle:checked ~ #mobile { display: block; }  /* show when toggled */
}

/* keep header above everything; WA below header */
header { position: sticky; top: 0; z-index: 2000; }
.whats-float { z-index: 1500 !important; }
/* Feature images: show full image (no awkward crop) */
@media (min-width:980px){
  /* First feature image (your "hero-looking" globe): a bit taller but not cropped */
  .feat:not(.rev) img{
    height:auto !important;
    max-height:620px;   /* adjust if you want taller/shorter */
    object-fit:contain; /* show whole image */
  }
  /* Second feature image: consistent height, no crop */
  .feat.rev img{
    height:auto !important;
    max-height:520px;
    object-fit:contain;
  }
}