:root {
      --green:      #012f27;
      --green-mid:  #1a4a3f;
      --teal:       #2fcfae;
      --teal-dark:  #24a88c;
      --teal-pale:  #e6f9f4;
      --text:       #0c1c19;
      --muted:      #4a6860;
      --light:      #f2faf7;
      --border:     #d4e9e3;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { font-family: 'Inter', sans-serif; background: #fff; color: var(--text); overflow-x: hidden; width: 100%; max-width: 100%; position: relative; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    /* ── SCROLL ANIMATIONS ───────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.75s cubic-bezier(.22,1,.36,1), transform 0.75s cubic-bezier(.22,1,.36,1);
    }
    .reveal.from-left  { transform: translateX(-50px); }
    .reveal.from-right { transform: translateX(50px); }
    .reveal.visible {
      opacity: 1;
      transform: translate(0, 0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ── NAV ─────────────────────────────────────────────────────── */
    .site-nav {
      background: var(--green);
      border-bottom: 1px solid rgba(255,255,255,.06);
      padding: 14px 0;
      position: sticky; top: 0; z-index: 1000;
      transition: box-shadow .3s;
    }
    .site-nav.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.3); }
    .nav-brand {
      font-size: 1.15rem; font-weight: 800;
      color: #fff; letter-spacing: -.3px;
      transition: color .2s;
    }
    .nav-brand:hover { color: var(--teal); }
    .site-nav .nav-link {
      color: rgba(255,255,255,.65) !important;
      font-size: .8rem; font-weight: 500;
      padding: 8px 16px !important; letter-spacing: .02em;
      transition: color .2s; position: relative;
    }
    .site-nav .nav-link::after {
      content: ''; position: absolute;
      bottom: 2px; left: 16px; right: 16px;
      height: 2px; background: var(--teal); border-radius: 2px;
      transform: scaleX(0); transition: transform .25s;
    }
    .site-nav .nav-link:hover::after { transform: scaleX(1); }
    .site-nav .nav-link:hover { color: #fff !important; }
    /* Nav CTA — slide-fill animation */
    .btn-nav {
      background: linear-gradient(to right, var(--teal) 50%, transparent 50%);
      background-size: 200% 100%;
      background-position: right center;
      color: var(--teal) !important;
      border: 1.5px solid var(--teal);
      font-size: .74rem; font-weight: 700;
      padding: 9px 22px; border-radius: 4px;
      letter-spacing: .1em; text-transform: uppercase;
      transition: background-position .35s cubic-bezier(.22,1,.36,1),
                  color .3s, box-shadow .25s, transform .15s;
    }
    .btn-nav:hover {
      background-position: left center;
      color: var(--green) !important;
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(47,207,174,.4);
    }

    /* ── SHARED BUTTONS ──────────────────────────────────────────── */
    .btn-solid {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--green); color: var(--teal);
      font-weight: 700; font-size: .88rem;
      padding: 16px 38px; border: none; border-radius: 30px;
      cursor: pointer; letter-spacing: .02em;
      transition: background .2s, transform .15s, box-shadow .2s;
    }
    .btn-solid:hover { background: var(--green-mid); color: var(--teal); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(1,47,39,.3); }
    .btn-solid-teal {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--teal); color: var(--green);
      font-weight: 700; font-size: .88rem;
      padding: 16px 38px; border-radius: 30px;
      transition: background .2s, transform .15s, box-shadow .2s;
    }
    .btn-solid-teal:hover { background: var(--teal-dark); color: var(--green); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(50,221,187,.35); }
    .btn-outline {
      display: inline-flex; align-items: center; gap: 8px;
      background: transparent; color: var(--green);
      border: 2px solid var(--green);
      font-weight: 700; font-size: .88rem;
      padding: 14px 32px; border-radius: 30px;
      transition: all .2s;
    }
    .btn-outline:hover { background: var(--green); color: var(--teal); box-shadow: 0 8px 24px rgba(1,47,39,.25); transform: translateY(-2px); }

    /* ── BADGES + LABELS ─────────────────────────────────────────── */
    .sec-badge {
      display: inline-block;
      background: var(--teal);
      color: var(--green);
      font-size: .68rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: 2px;
      padding: 6px 18px; border-radius: 50px;
      margin-bottom: 16px;
    }
    .sec-badge-outline {
      background: transparent;
      border: 1.5px solid rgba(50,221,187,.5);
      color: var(--teal);
    }
    .sec-title {
      font-size: clamp(1.9rem,4vw,2.9rem);
      font-weight: 800; line-height: 1.1; margin-bottom: 14px;
    }
    .sec-grad { color: var(--green); }
    .teal-bar { width: 48px; height: 3px; background: linear-gradient(90deg, var(--green), var(--teal)); margin: 0 auto 24px; border-radius: 2px; }
    .sec-intro { color: var(--muted); max-width: 600px; margin: 0 auto; line-height: 1.8; font-size: .96rem; }

    /* ── CTA STRIP ───────────────────────────────────────────────── */
    .cta-strip {
      background: var(--teal);
      padding: 22px 0;
      text-align: center;
    }
    .cta-strip a {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--green); color: var(--teal);
      font-weight: 700; font-size: .88rem;
      padding: 13px 40px; border-radius: 30px;
      transition: background .2s, transform .15s, box-shadow .2s;
    }
    .cta-strip a:hover { background: var(--green-mid); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(1,47,39,.3); }

    /* ── HERO SECTION ────────────────────────────────────────────── */


    /* ── HERO INFO PANEL ─────────────────────────────────────────── */
    #hero {
      background: #fff;
      padding: 100px 0;
      position: relative; overflow: hidden;
    }
    #hero::before {
      content: '';
      position: absolute; top: 0; right: 0;
      width: 55%; height: 100%;
      background: linear-gradient(135deg, transparent 0%, var(--teal-pale) 100%);
    }
    .hero-inner { position: relative; z-index: 1; }
    .hero-title {
      font-size: clamp(2rem,4.5vw,3.1rem);
      font-weight: 900; line-height: 1.1; margin-bottom: 20px;
    }
    .hero-title .grad {
      background: linear-gradient(90deg, var(--green) 0%, var(--teal-dark) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-sub { color: var(--muted); font-size: .97rem; max-width: 540px; margin-bottom: 28px; line-height: 1.75; }
    .hero-chk { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; margin-bottom: 9px; }
    .hero-chk i { color: var(--teal-dark); }
    .hero-panel {
      background: var(--green);
      border-radius: 24px; padding: 36px;
      box-shadow: 0 30px 80px rgba(1,47,39,.22);
      position: relative; overflow: hidden;
    }
    .hero-panel::before {
      content: '';
      position: absolute; top: -60px; right: -60px;
      width: 200px; height: 200px; border-radius: 50%;
      background: rgba(50,221,187,.07);
    }
    .hero-feat { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; position: relative; z-index: 1; }
    .hero-feat-icon {
      width: 44px; height: 44px;
      background: rgba(50,221,187,.12);
      border: 1px solid rgba(50,221,187,.2);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      color: var(--teal); font-size: .95rem; flex-shrink: 0;
      transition: background .2s;
    }
    .hero-feat:hover .hero-feat-icon { background: rgba(50,221,187,.22); }
    .hero-feat h6 { font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
    .hero-feat p  { font-size: .79rem; color: rgba(255,255,255,.48); margin: 0; line-height: 1.5; }
    .hero-stats {
      display: flex; gap: 24px; flex-wrap: wrap;
      padding-top: 24px;
      border-top: 1px solid rgba(50,221,187,.15);
      position: relative; z-index: 1;
    }
    .hero-stat .num { font-size: 1.9rem; font-weight: 900; color: var(--teal); line-height: 1; }
    .hero-stat .lbl { font-size: .7rem; color: rgba(255,255,255,.42); margin-top: 4px; letter-spacing: .03em; }

    /* ── WHY CHOOSE US ───────────────────────────────────────────── */
    #why { background: var(--light); padding: 100px 0; }
    .why-card {
      background: #fff;
      border-left: 4px solid transparent;
      border-radius: 20px; padding: 36px 28px; height: 100%;
      box-shadow: 0 2px 16px rgba(1,47,39,.07), 0 0 0 1px rgba(1,47,39,.04);
      transition: box-shadow .3s, transform .3s, border-color .3s;
    }
    .why-card:hover { box-shadow: 0 16px 48px rgba(1,47,39,.13); transform: translateY(-5px); border-left-color: var(--teal); }
    .why-icon {
      width: 62px; height: 62px;
      background: linear-gradient(145deg, var(--teal) 0%, var(--green) 100%);
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.35rem; color: #fff; margin-bottom: 22px;
      box-shadow: 0 10px 28px rgba(47,207,174,.35);
      transition: transform .3s;
    }
    .why-card:hover .why-icon { transform: scale(1.1) rotate(-4deg); }
    .why-card h5 { font-size: 1.02rem; font-weight: 800; color: var(--green); margin-bottom: 10px; }
    .why-card p  { font-size: .86rem; color: var(--muted); line-height: 1.75; margin: 0; }

    /* ── PARALLAX OFFER ──────────────────────────────────────────── */
    #offer {
      background: var(--green);
      padding: 60px 0; text-align: center;
      position: relative; overflow: hidden;
    }
    .offer-bg {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 70% 50%, rgba(50,221,187,.12) 0%, transparent 65%),
                  radial-gradient(ellipse at 20% 80%, rgba(50,221,187,.06) 0%, transparent 55%);
    }
    .offer-ring {
      position: absolute; border-radius: 50%;
      border: 1px solid rgba(50,221,187,.1);
    }
    .offer-ring-1 { width: 500px; height: 500px; top: -150px; right: -100px; }
    .offer-ring-2 { width: 350px; height: 350px; bottom: -100px; left: -80px; }
    #offer .inner { position: relative; z-index: 1; }
    #offer h2 { font-size: clamp(1.7rem,4vw,2.7rem); font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.2; }
    #offer p  { color: rgba(255,255,255,.65); max-width: 620px; margin: 0 auto 36px; font-size: .97rem; line-height: 1.8; }

    /* ── SERVICES ────────────────────────────────────────────────── */
    #services { background: #fff; padding: 100px 0; }
    .svc-img-card {
      background: #fff;
      border: none;
      border-radius: 20px; overflow: hidden; height: 100%;
      box-shadow: 0 2px 16px rgba(1,47,39,.07), 0 0 0 1px rgba(1,47,39,.04);
      transition: box-shadow .3s, transform .3s;
    }
    .svc-img-card:hover { box-shadow: 0 24px 60px rgba(1,47,39,.15); transform: translateY(-5px); }
    .svc-placeholder {
      height: 230px;
      background: linear-gradient(135deg, var(--teal-pale) 0%, #c8ece6 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 4rem; color: var(--teal-dark);
      transition: transform .4s;
      overflow: hidden;
    }
    .svc-img-card:hover .svc-placeholder { transform: scale(1.04); }
    .svc-img-card .body { padding: 28px 26px; border-top: 3px solid var(--teal-pale); transition: border-color .3s; }
    .svc-img-card:hover .body { border-top-color: var(--teal); }
    .svc-img-card h5 { font-size: 1.02rem; font-weight: 800; color: var(--green); margin-bottom: 10px; }
    .svc-img-card p  { font-size: .86rem; color: var(--muted); line-height: 1.75; margin: 0; }
    .svc-icon-card {
      background: var(--light);
      border: none;
      border-radius: 18px; padding: 28px 24px; height: 100%;
      box-shadow: 0 2px 12px rgba(1,47,39,.06);
      transition: background .3s, transform .3s, box-shadow .3s;
    }
    .svc-icon-card:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 14px 40px rgba(1,47,39,.12); }
    .svc-icon {
      width: 54px; height: 54px;
      background: linear-gradient(145deg, var(--teal) 0%, var(--green) 100%);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1.1rem; margin-bottom: 18px;
      box-shadow: 0 8px 22px rgba(50,221,187,.3);
      transition: transform .3s;
    }
    .svc-icon-card:hover .svc-icon { transform: scale(1.1) rotate(-4deg); }
    .svc-icon-card h6 { font-size: .92rem; font-weight: 800; color: var(--green); margin-bottom: 8px; }
    .svc-icon-card p  { font-size: .83rem; color: var(--muted); line-height: 1.7; margin: 0; }

    /* ── ABOUT (parallax image) ──────────────────────────────────── */
    #about { background: #fff; padding: 100px 0; }
    .about-img-outer {
      border-radius: 24px; overflow: hidden;
      box-shadow: 0 30px 80px rgba(1,47,39,.15);
      position: relative;
    }
    .about-img-inner {
      min-height: 440px;
      background: linear-gradient(135deg, #d0ece8 0%, #a8d8d0 100%);
      display: flex; align-items: center; justify-content: center;
      will-change: transform;
      transition: transform .1s linear;
    }
    .about-img-inner img { width: 100%; height: 440px; object-fit: cover; display: block; }
    .about-fallback { font-size: 5rem; color: var(--teal-dark); }
    /* Overlay on hover */
    .about-img-outer::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(1,47,39,.25) 0%, transparent 60%);
      opacity: 0; transition: opacity .4s;
    }
    .about-img-outer:hover::after { opacity: 1; }
    #about h3 {
      font-size: clamp(1.6rem,3vw,2.1rem);
      font-weight: 800;
      color: var(--green);
      margin-bottom: 24px;
    }
    #about p { color: var(--muted); line-height: 1.85; font-size: .92rem; margin-bottom: 16px; }
    .about-lead { font-size: 1rem !important; color: var(--text) !important; font-weight: 500; border-left: 3px solid var(--teal); padding-left: 16px; }

    .enq-heading { font-size: clamp(1.7rem,4vw,2.7rem); font-weight: 800; color: var(--green); margin-bottom: 14px; line-height: 1.2; }
    .enq-para { color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.8; font-size: .95rem; }

    /* ── HOW IT WORKS ────────────────────────────────────────────── */
    #how { background: var(--light); padding: 100px 0; }
    .step-card {
      background: #fff;
      border: none;
      border-radius: 20px; padding: 40px 28px; text-align: center; height: 100%;
      box-shadow: 0 2px 16px rgba(1,47,39,.07), 0 0 0 1px rgba(1,47,39,.04);
      transition: box-shadow .3s, transform .3s;
      position: relative; overflow: hidden;
    }
    .step-card::before {
      content: attr(data-n);
      position: absolute; bottom: -20px; right: -10px;
      font-size: 8rem; font-weight: 900;
      color: rgba(47,207,174,.08); line-height: 1;
      pointer-events: none;
    }
    .step-card:hover { box-shadow: 0 20px 55px rgba(1,47,39,.14); transform: translateY(-6px); }
    .step-num {
      width: 68px; height: 68px;
      background: linear-gradient(145deg, var(--teal) 0%, var(--green) 100%);
      color: #fff; border-radius: 22px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; font-weight: 900; margin: 0 auto 24px;
      box-shadow: 0 14px 32px rgba(50,221,187,.38);
      transition: transform .3s;
    }
    .step-card:hover .step-num { transform: scale(1.1) rotate(-4deg); }
    .step-card h5 { font-size: 1.05rem; font-weight: 800; color: var(--green); margin-bottom: 12px; }
    .step-card p  { font-size: .87rem; color: var(--muted); line-height: 1.7; margin: 0; }

    /* ── STATS RIBBON ────────────────────────────────────────────── */
    .stats-ribbon { background: var(--green); padding: 48px 0; }
    .stat-item { text-align: center; }
    .stat-item .num {
      font-size: 2.6rem; font-weight: 900; color: var(--teal);
      line-height: 1; margin-bottom: 6px;
    }
    .stat-item .lbl { font-size: .8rem; color: rgba(255,255,255,.5); letter-spacing: .05em; font-weight: 500; }
    .stat-divider {
      width: 1px; height: 60px; background: rgba(255,255,255,.1);
      align-self: center;
    }

    /* ── FOOTER ──────────────────────────────────────────────────── */
    footer { background: var(--green); padding: 72px 0 0; }
    .foot-top { padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .foot-logo { font-size: 1.3rem; font-weight: 900; color: #fff; margin-bottom: 12px; }
    .foot-logo span { color: var(--teal); }
    .foot-tagline { font-size: .88rem; color: rgba(255,255,255,.55); line-height: 1.75; margin-bottom: 22px; max-width: 300px; }
    .foot-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: 50%;
      background: rgba(255,255,255,.08); color: rgba(255,255,255,.65);
      font-size: .95rem; margin-right: 8px;
      transition: background .2s, color .2s, transform .2s;
    }
    .foot-social a:hover { background: var(--teal); color: var(--green); transform: translateY(-2px); }
    .foot-col-title {
      font-size: .72rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: .12em; color: rgba(255,255,255,.35);
      margin-bottom: 18px;
    }
    .foot-links { list-style: none; padding: 0; margin: 0; }
    .foot-links li { margin-bottom: 10px; }
    .foot-links a { font-size: .86rem; color: rgba(255,255,255,.58); transition: color .2s, padding-left .2s; }
    .foot-links a:hover { color: var(--teal); padding-left: 4px; }
    .foot-cta-btn {
      display: inline-block;
      background: linear-gradient(to right, var(--teal) 50%, transparent 50%);
      background-size: 200% 100%; background-position: right center;
      color: var(--teal); border: 1.5px solid var(--teal);
      font-size: .78rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; padding: 10px 22px; border-radius: 4px;
      transition: background-position .35s cubic-bezier(.22,1,.36,1), color .3s;
    }
    .foot-cta-btn:hover { background-position: left center; color: var(--green); }
    .foot-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
    .foot-contact-item i { color: var(--teal); margin-top: 2px; font-size: .85rem; flex-shrink: 0; }
    .foot-contact-item span { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.5; }
    .foot-bottom {
      padding: 20px 0;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 10px;
      font-size: .78rem; color: rgba(255,255,255,.28);
    }
    .foot-legal { display: flex; gap: 20px; }
    .foot-legal a, .foot-bottom a { color: rgba(255,255,255,.35); transition: color .2s; }
    .foot-legal a:hover, .foot-bottom a:hover { color: var(--teal); }
    .foot-legal a { cursor: pointer; }
    .foot-contact-item a { color: rgba(255,255,255,.55); transition: color .2s; }
    .foot-contact-item a:hover { color: var(--teal); }

    /* ── PRIVACY MODAL ───────────────────────────────────────────── */
    .privacy-modal { border: none; border-radius: 18px; overflow: hidden; }
    .privacy-modal .modal-header {
      background: var(--green); color: #fff;
      padding: 24px 30px; align-items: flex-start; border: none;
    }
    .privacy-modal .modal-title { font-weight: 800; font-size: 1.4rem; color: #fff; }
    .privacy-sub { font-size: .82rem; color: var(--teal); margin: 4px 0 0; font-weight: 600; }
    .privacy-modal .btn-close {
      filter: invert(1) grayscale(1) brightness(1.6);
      opacity: .8; margin: 0;
    }
    .privacy-body { padding: 28px 30px; }
    .privacy-body h6 {
      font-weight: 800; font-size: .98rem; color: var(--green);
      margin: 24px 0 8px; padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .privacy-body h6:first-of-type { border-top: none; padding-top: 0; margin-top: 18px; }
    .privacy-body p { font-size: .88rem; color: var(--muted); line-height: 1.7; margin-bottom: 12px; }
    .privacy-body ul { margin: 0 0 12px; padding-left: 22px; }
    .privacy-body li { font-size: .88rem; color: var(--muted); line-height: 1.7; margin-bottom: 5px; }
    .privacy-body a { color: var(--teal-dark); font-weight: 600; text-decoration: underline; }
    .privacy-contact {
      background: var(--light); border-left: 3px solid var(--teal);
      padding: 14px 16px; border-radius: 0 8px 8px 0;
      font-size: .86rem !important; color: var(--text) !important;
    }
    .privacy-modal .modal-footer { border-top: 1px solid var(--border); padding: 18px 30px; }
    .privacy-modal .modal-footer .btn-solid { padding: 12px 32px; }

    /* ── SCROLL-TO-TOP ───────────────────────────────────────────── */
    #scrollBtn {
      position: fixed; bottom: 28px; right: 28px;
      width: 48px; height: 48px;
      background: var(--teal); color: var(--green);
      border: none; border-radius: 50%;
      font-size: 1rem; display: none;
      align-items: center; justify-content: center;
      cursor: pointer; z-index: 999;
      box-shadow: 0 6px 24px rgba(50,221,187,.45);
      transition: background .2s, transform .2s;
    }
    #scrollBtn.show { display: flex; }
    #scrollBtn:hover { background: var(--teal-dark); transform: scale(1.12); }

    /* ── ENQUIRY FORM SECTION ───────────────────────────────────── */
    #enquire {
      background: var(--light);
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }
    #enquire::before {
      content: '';
      position: absolute; top: -140px; right: -140px;
      width: 620px; height: 620px; border-radius: 50%;
      background: radial-gradient(circle, rgba(47,207,174,.06) 0%, transparent 65%);
      pointer-events: none;
    }
    #enquire::after {
      content: '';
      position: absolute; bottom: -80px; left: -80px;
      width: 400px; height: 400px; border-radius: 50%;
      background: radial-gradient(circle, rgba(47,207,174,.04) 0%, transparent 65%);
      pointer-events: none;
    }
    #enquire .enq-inner { position: relative; z-index: 1; }
    .enq-card {
      background: #fff;
      border-radius: 20px;
      padding: 40px 36px;
      box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
    }
    .enq-card-title { font-size: 1.25rem; font-weight: 800; color: var(--green); margin-bottom: 4px; }
    .enq-card-sub { font-size: .8rem; color: var(--muted); margin-bottom: 26px; }
    .enq-label {
      display: block;
      font-size: .72rem; font-weight: 700; color: #333;
      text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
    }
    .enq-input, .enq-select {
      width: 100%; margin-bottom: 18px;
      background: var(--light);
      border: 1.5px solid var(--border);
      color: var(--text); border-radius: 10px;
      padding: 13px 16px; font-size: .9rem;
      font-family: 'Inter', sans-serif;
      transition: border-color .2s, box-shadow .2s, background .2s;
      appearance: none; -webkit-appearance: none;
    }
    .enq-input:focus, .enq-select:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(50,221,187,.15);
      background: #fff; outline: none;
    }
    .enq-input::placeholder { color: #bbb; }
    .enq-consent { font-size: .73rem; color: #aaa; line-height: 1.65; margin-bottom: 20px; }
    .enq-privacy { font-size: .71rem; color: #aaa; text-align: center; margin-top: 12px; }
    .enq-privacy i { color: var(--teal); margin-right: 4px; }
    #enqSuccess { display:none; background:#f0fffe; border:1.5px solid var(--teal); color:var(--green); border-radius:10px; padding:14px; text-align:center; font-weight:700; font-size:.88rem; margin-bottom:18px; }
    #enqError   { display:none; background:#fff5f5; border:1.5px solid #e53e3e; color:#c53030; border-radius:10px; padding:14px; text-align:center; font-weight:700; font-size:.88rem; margin-bottom:18px; }
    @media(max-width:767px) {
      .enq-card { padding: 28px 20px; }
      #enquire { padding: 70px 0; }
    }

    /* ── STATS BAR ───────────────────────────────────────────────── */
    .stats-bar { background: var(--green); padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
    .stats-item { text-align: center; padding: 0 36px; }
    .stats-num { font-size: 2rem; font-weight: 900; color: var(--teal); line-height: 1; }
    .stats-lbl { font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; margin-top: 5px; }
    .stats-divider { width: 1px; height: 44px; background: rgba(255,255,255,.1); }
    @media(max-width:575px) { .stats-item { padding: 12px 20px; } }

    /* ── IMAGES ─────────────────────────────────────────────────── */
    .lead-img-bg {
      position: absolute; inset: 0;
      background: url('../images/24b8eaefbbf9eb3ecfac877604e424f339285460 (1).png') center/cover no-repeat;
      opacity: 0.25; z-index: 0;
    }
    .offer-bg {
      position: absolute; inset: 0;
      background: url('../images/IMG_9771.JPG') center/cover no-repeat;
      opacity: 0.38;
    }
    .hero-img-card {
      border-radius: 24px; overflow: hidden;
      box-shadow: 0 30px 80px rgba(1,47,39,.28);
    }
    .hero-img-card img {
      width: 100%; display: block;
      transition: transform .5s cubic-bezier(.22,1,.36,1);
    }
    .hero-img-card:hover img { transform: scale(1.04); }
    .svc-img {
      width: 100%; height: 230px; object-fit: cover; display: block;
      transition: transform .45s cubic-bezier(.22,1,.36,1);
    }
    .svc-img-card:hover .svc-img { transform: scale(1.05); }

    /* ── ANIMATED BURGER ─────────────────────────────────────────── */
    .nav-burger {
      border: none; padding: 0; width: 30px; height: 22px;
      position: relative; background: transparent;
    }
    .nav-burger:focus { box-shadow: none; outline: none; }
    .nav-burger span {
      display: block; position: absolute; left: 0;
      width: 100%; height: 2px; border-radius: 2px;
      background: #fff;
      transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s, top .35s;
    }
    .nav-burger span:nth-child(1) { top: 2px; }
    .nav-burger span:nth-child(2) { top: 10px; }
    .nav-burger span:nth-child(3) { top: 18px; }
    .nav-burger[aria-expanded="true"] span:nth-child(1) { top: 10px; transform: rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-burger[aria-expanded="true"] span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

    /* ── MOBILE DROPDOWN PANEL ───────────────────────────────────── */
    @media(max-width:991px) {
      #navMenu {
        margin: 14px -12px -14px;
        padding: 8px 24px 24px;
        background: var(--green-mid);
        border-top: 1px solid rgba(255,255,255,.08);
      }
      .site-nav .nav-link {
        padding: 15px 0 !important;
        font-size: .95rem; font-weight: 600;
        color: rgba(255,255,255,.85) !important;
        border-bottom: 1px solid rgba(255,255,255,.07);
      }
      .site-nav .nav-link::after { display: none; }
      .site-nav .nav-link:active { color: var(--teal) !important; }
      .navbar-nav .nav-item:last-child .nav-link,
      .navbar-nav .nav-item:nth-last-child(2) .nav-link { border-bottom: none; }
      .btn-nav {
        display: block; width: 100%; text-align: center;
        background: var(--teal); color: var(--green) !important;
        border-color: var(--teal); padding: 14px 22px;
        font-size: .82rem;
      }
    }

    @media(max-width:991px) {
      #lead { padding: 70px 0 60px; }
      .form-card { padding: 28px 22px; }
      #hero, #why, #services, #about, #how { padding: 70px 0; }
      #offer { padding: 40px 0; }

      /* hero is above the fold — show it on load, skip the scroll-reveal */
      #hero .reveal { opacity: 1 !important; transform: none !important; }

      /* hero image sits in the flow, between the heading and the paragraph */
      .hero-img-mobile {
        margin: 24px 0 28px;
        border-radius: 20px; overflow: hidden;
        box-shadow: 0 20px 50px rgba(1,47,39,.22);
      }
      .hero-img-mobile img { width: 100%; display: block; }
    }
    @media(max-width:767px) {
      #offer { padding: 36px 0; }
      #offer h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
    }