:root{
      --bg1:#e4ecd2;
      --bg2:#ffffff;
      --card:#ffffff;
      --card2:#eaf2d8;
      --white:#1b3d2f;
      --muted:rgba(27,61,47,.72);
      --border:rgba(0,0,0,.08);
      --shadow: 0 16px 40px rgba(0,0,0,.35);
      --radius:18px;
      --green:#2f8f4e;
      --green2:#56c26a;
      --blue:#2f8f4e;
      --max:1180px;
      --pad:22px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--white);
      background: #e4ecd2;
    }
    a{color:inherit; text-decoration:none}
    .container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
    .topbar{position:sticky; top:0; z-index:50; background:#2f8f4e !important; border-bottom:1px solid rgba(0,0,0,.12) !important; box-shadow:0 6px 14px rgba(0,0,0,.10) !important;}
    .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0 !important;}
    .brand{display:flex; align-items:center; gap:12px; min-width:260px}
    .brand img{width:44px; height:44px; border-radius:12px; box-shadow: var(--shadow)}
    .brand .txt{line-height:1.2}
    .brand .txt b{display:block; font-size:16px}
    .brand .txt span{display:block; font-size:12px; color:var(--muted); margin-top:3px}

    nav{display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end}
    nav a{
      font-size:14px;
      color:rgba(244,248,255,.82);
      padding:8px 10px;
      border-radius:12px;
    }
    nav a:hover{background: rgba(255,255,255,.06)}

    /* HERO */
    .hero{
      padding:26px 0 14px;
      position:relative;
    }
    .hero-banner{
      border-radius: 22px;
      overflow:hidden;
      box-shadow: var(--shadow);
      border:1px solid rgba(47,143,78,.18);
      background: #dfe8c7;
      min-height: 330px;
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:0;
    }
    .hero-left{padding:34px}
    .hero-title{
      margin:0;
      font-size:40px;
      letter-spacing:-.6px;
      line-height:1.08;
    }
    .hero-sub{
      margin:12px 0 18px;
      color:var(--muted);
      max-width: 54ch;
      font-size:14px;
    }
    .cta{display:flex; gap:12px; flex-wrap:wrap}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:11px 14px;
      border-radius: 14px;
      font-weight:700;
      font-size:13.5px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: var(--white);
      cursor:pointer;
      user-select:none;
      transition: transform .12s ease;
    }
    .btn:hover{transform: translateY(-1px)}
    .btn.green{
      border:0;
      color:#05121f;
      background: #e4ecd2; /* removed dark gradient */(180deg, var(--green), var(--green2));
      box-shadow: 0 14px 24px rgba(40,210,124,.18);
    }
    .btn.blue{
      border:0;
      background: #e4ecd2; /* removed dark gradient */(180deg, rgba(47,123,255,.95), rgba(47,123,255,.75));
      box-shadow: 0 14px 24px rgba(47,123,255,.18);
    }
    .hero-right{display:flex; align-items:flex-end; justify-content:flex-end; padding:18px}
    .hero-right .glass{
      width:min(360px, 100%);
      padding:14px 14px;
      border-radius: 16px;
      background: rgba(7,26,52,.55);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter:none;
    }
    .glass b{display:block; font-size:13px; margin-bottom:4px}
    .glass span{display:block; font-size:12px; color:var(--muted)}

    /* Section container like screenshot */
    .panel{
      background: rgba(255,247,230,.94);
      color:#1b3d2f;
      border-radius: 18px;
      padding:18px;
      box-shadow: 0 16px 40px rgba(0,0,0,.18);
      border:1px solid rgba(0,0,0,.06);
    }
    .section{
      margin-top:18px;
      padding:14px 0 4px;
      border-top:1px solid rgba(255,255,255,.12);
    }
    .h2{
      margin:0 0 14px;
      font-size:26px;
      color:#56c26a;
      letter-spacing:-.3px;
    }

    /* Vision cards */
    .vision-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    .vcard{
      border-radius: 14px;
      background: #dfe8c7;
      color: #1b3d2f;
      border:1px solid rgba(47,143,78,.20);
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      padding:14px;
      min-height: 150px;
    }
    .vcard h3{margin:0 0 8px; font-size:15px}
    .vcard ul{margin:10px 0 0; padding-left:18px; color:rgba(27,61,47,.78); font-size:13px}
    .vcard li{margin:6px 0}

    /* Gallery */
    .gallery-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:12px;
    }
    .gcard{cursor:pointer;
      background: #ffffff;
      border:1px solid rgba(47,143,78,.16);
      border-radius: 14px;
      overflow:hidden;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }
    .gcard img{width:100%; height:145px; object-fit:cover; display:block}
    .gcap{
      padding:10px 12px;
      font-weight:900;
      font-size:13px;
      color: rgba(27,61,47,.92);
      text-align:center;
    }

    /* Catalogue */
    .catalogue-grid{
      display:grid;
      grid-template-columns: repeat(6, 1fr);
      gap:12px;
      margin-top:6px;
    }
    .pcard{cursor:pointer;
      background: #ffffff;
      border:1px solid rgba(47,143,78,.16);
      border-radius: 14px;
      overflow:hidden;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      display:flex;
      flex-direction:column;
      min-height: 230px;
    }
    .pcard img{width:100%; height:140px; object-fit:cover; background:#05203a}
    .pbody{padding:10px 10px 12px; display:flex; flex-direction:column; gap:6px; flex:1}
    .pname{font-weight:800; font-size:12.5px; line-height:1.2}
    .pmeta{display:flex; justify-content:space-between; align-items:flex-end; gap:6px; margin-top:auto}
    .pprice{font-weight:900; color:#2f8f4e; font-size:13px}
    .pmoq{font-size:11px; color:rgba(27,61,47,.70)}

    /* Enquiry form */
    .form-wrap{margin-top:10px}
    .form{
      background:#dfe8c7;
      border:1px solid rgba(47,143,78,.18);
      border-radius: 14px;
      padding:14px;
      box-shadow: 0 16px 30px rgba(0,0,0,.12);
    }
    .row{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-bottom:12px;
    }
    .row2{grid-template-columns: repeat(3, 1fr);}
    label{display:block; font-size:12px; color:#183a5f; font-weight:700}
    input, select, textarea{
      width:100%;
      margin-top:6px;
      padding:12px 12px;
      border-radius: 10px;
      border:1px solid rgba(0,0,0,.18);
      outline:none;
      font-size:13px;
    }
    textarea{min-height: 96px; resize: vertical}
    .actions{
      display:flex; justify-content:flex-end; gap:10px; align-items:center;
    }
    .send{
      padding:12px 18px;
      border-radius: 12px;
      border:0;
      cursor:pointer;
      font-weight:900;
      color:#061120;
      background: #e4ecd2; /* removed dark gradient */(180deg, var(--green), var(--green2));
      box-shadow: 0 14px 24px rgba(40,210,124,.20);
    }
    .contact-strip{
      display:flex; gap:18px; flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      color:#1b8f4f;
      font-weight:700;
      margin-top:10px;
      font-size:13px;
    }
    .contact-strip span{opacity:.9}

    footer{
      margin:24px 0 46px;
      color:rgba(244,248,255,.72);
      border-top:1px solid rgba(255,255,255,.12);
      padding-top:16px;
      font-size:13px;
      display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
    }

    /* Responsive */
    @media (max-width: 1020px){
      .hero-banner{grid-template-columns: 1fr}
      .hero-title{font-size:34px}
      .vision-grid{grid-template-columns: 1fr}
      .gallery-grid{grid-template-columns: repeat(2, 1fr)}
      .catalogue-grid{grid-template-columns: repeat(2, 1fr)}
      .row{grid-template-columns: 1fr}
      .actions{justify-content:stretch}
      .send{width:100%}
    }
  
    /* Modal */
    .modal-backdrop{
      position:fixed; inset:0; display:none; place-items:center;
      background: rgba(0,0,0,.62);
      z-index:999;
      padding: 18px;
    }
    .modal-backdrop.open{display:grid}
    .modal{
      width:min(980px, 100%);
      border-radius: 18px;
      overflow:hidden;
      background: #ffffff;
      color: #0a1b30;
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.18);
    }
    .modal-header{
      display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
      padding:16px 16px 12px;
      background: #e4ecd2; /* removed dark gradient */(180deg, rgba(207,227,255,.55), rgba(255,255,255,1));
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    .modal-header h3{margin:0; font-size:18px; letter-spacing:-.2px; color:#0f6b3a}
    .modal-header p{margin:6px 0 0; font-size:13px; color:#1b8f4f}
    .icon-btn{
      border:1px solid rgba(0,0,0,.12);
      background:#fff;
      border-radius: 12px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:900;
    }
    .modal-body{
      padding: 14px 16px 16px;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 14px;
    }
    .modal-gallery{
      display:grid; grid-template-columns: repeat(3, 1fr);
      gap:10px;
      align-content:start;
    }
    .modal-gallery img{
      width:100%; height:110px; object-fit:cover;
      border-radius: 12px;
      border:1px solid rgba(0,0,0,.10);
    }
    .modal-content{
      background: rgba(15,44,78,.04);
      border:1px solid rgba(47,143,78,.18);
      border-radius: 14px;
      padding:12px;
    }
    .modal-content ul{margin:10px 0 0; padding-left:18px; color:#214a74; font-size:13px}
    .modal-content li{margin:6px 0}
    .modal-table{
      width:100%;
      margin-top:12px;
      border-collapse: collapse;
      font-size:13px;
      overflow:hidden;
      border-radius: 12px;
      border:1px solid rgba(0,0,0,.10);
    }
    .modal-table th, .modal-table td{
      padding:10px 10px;
      border-bottom:1px solid rgba(0,0,0,.08);
      vertical-align:top;
    }
    .modal-table th{
      background: rgba(17,59,98,.08);
      color:#0f6b3a;
      text-align:left;
      font-weight:900;
    }
    .modal-table tr:last-child td{border-bottom:none}
    .hint{
      margin-top:10px;
      font-size:12px;
      color:#4a6b8c;
    }
    @media (max-width: 1020px){
      .modal-body{grid-template-columns:1fr}
      .modal-gallery{grid-template-columns: repeat(2, 1fr)}
    }
/* Light header */
    .topbar{position:sticky; top:0; z-index:50; background:#2f8f4e !important; border-bottom:1px solid rgba(0,0,0,.12) !important; box-shadow:0 6px 14px rgba(0,0,0,.10) !important;}
    .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0 !important;}
    .brand-link{display:flex; align-items:center; gap:12px; text-decoration:none;}
    .brand-logo{width:180px !important; height:180px !important; border-radius:50%; background:#ffffff; border:1px solid rgba(0,0,0,.10); padding:12px; box-shadow:0 10px 22px rgba(0,0,0,.14);}
    .brand-name{font-weight:900; color:#ffffff; font-size:18px; letter-spacing:-.2px;}
    .brand-tagline{font-weight:800; color:rgba(255,255,255,.86); font-size:12.5px; margin-top:3px;}
    .menu{display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end;}
    .menu a{font-weight:900; font-size:14.5px; color:rgba(255,255,255,.92); padding:10px 12px; border-radius:12px;}
    .menu a:hover{background: rgba(255,255,255,.14);}
    @media (max-width: 900px){ .brand-logo{width:180px !important; height:180px !important; border-radius:50%; background:#ffffff; border:1px solid rgba(0,0,0,.10); padding:12px; box-shadow:0 10px 22px rgba(0,0,0,.14);} .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0 !important;} .brand-tagline{display:none} } .brand-tagline{display:none} .brand-logo{width:180px !important; height:180px !important; border-radius:50%; background:#ffffff; border:1px solid rgba(0,0,0,.10); padding:12px; box-shadow:0 10px 22px rgba(0,0,0,.14);} } .brand-tagline{font-weight:800; color:rgba(255,255,255,.86); font-size:12.5px; margin-top:3px;} }

  

    /* Hero media */
    .hero-banner{
      background: #dfe8c7;
      border:1px solid rgba(47,143,78,.18);
      grid-template-columns: 1.12fr .88fr;
      align-items:stretch;
    }
    .hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
    .hero-badges span{
      display:inline-flex; align-items:center; justify-content:center;
      padding:8px 10px; border-radius:999px;
      border:1px solid rgba(47,143,78,.18);
      background: rgba(47,143,78,.06);
      color: rgba(27,61,47,.82);
      font-weight:800; font-size:12px;
    }
    .hero-media{padding:18px; display:flex; flex-direction:column; gap:10px; align-items:stretch; justify-content:center;}
    .hero-img{width:100%; height:360px; object-fit:contain; object-position:center; border-radius:18px; border:1px solid rgba(0,0,0,.10); box-shadow:0 10px 22px rgba(0,0,0,.08); background:#ffffff;}
    .hero-media-caption{font-size:12px; font-weight:800; color: rgba(27,61,47,.70); text-align:center;}
    @media (max-width: 1020px){
      .hero-banner{grid-template-columns:1fr}
      .hero-img{width:100%; height:360px; object-fit:contain; object-position:center; border-radius:18px; border:1px solid rgba(0,0,0,.10); box-shadow:0 10px 22px rgba(0,0,0,.08); background:#ffffff;}
    }
    .vcard[data-key]{cursor:pointer}
    .vcard[data-key]:hover{transform: translateY(-1px); box-shadow: 0 14px 26px rgba(0,0,0,.08);}

@media (max-width: 900px){ .brand-logo{width:180px !important; height:180px !important; border-radius:50%; background:#ffffff; border:1px solid rgba(0,0,0,.10); padding:12px; box-shadow:0 10px 22px rgba(0,0,0,.14);} .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0 !important;} .brand-tagline{display:none} } .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0 !important;} }
@media (max-width: 520px){ .brand-name{font-size:16px;} .menu a{padding:8px 10px;} }


    .topbar{position:sticky; top:0; z-index:50; background:#2f8f4e !important; border-bottom:1px solid rgba(0,0,0,.12) !important; box-shadow:0 6px 14px rgba(0,0,0,.10) !important;}
    .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0 !important;} /* 75% height */
    .brand-logo{width:180px !important; height:180px !important; border-radius:50%; background:#ffffff; border:1px solid rgba(0,0,0,.10); padding:12px; box-shadow:0 10px 22px rgba(0,0,0,.14);}
    .brand-name{font-weight:900; color:#fff !important; font-size:22px !important; letter-spacing:-.2px;}
    .brand-tagline{font-weight:800; color:rgba(255,255,255,.88) !important; font-size:14px !important; margin-top:4px;}
    .menu a{font-weight:900; font-size:15px; color:rgba(255,255,255,.92) !important; padding:10px 12px; border-radius:12px;}
    .menu a:hover{background:rgba(255,255,255,.14);}
    @media (max-width:900px){ .brand-logo{width:180px !important; height:180px !important; border-radius:50%; background:#ffffff; border:1px solid rgba(0,0,0,.10); padding:12px; box-shadow:0 10px 22px rgba(0,0,0,.14);} .brand-tagline{display:none;} .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0 !important;} }


    /* Force Catalogue readability */
    #catalogue{background:#dfe8c7;}
    #catalogue .panel{background:#ffffff !important; color:#1b3d2f !important;}
    #catalogue .panel *{color:inherit;}

@media (max-width: 900px){ .brand-logo{width:130px !important; height:130px !important;} }