:root{
      --bg: #ffffff;
      --text: #0f172a;          /* slate-900 */
      --muted: #475569;         /* slate-600 */
      --border: #e2e8f0;        /* slate-200 */
      --green: #1f7a68;         /* brand green */
      --green-2:#80B8AB;        /* button */
      --beige: #eae4db;         /* cta band */
      --container: 1100px;
      --radius: 16px;
      --gap: 24px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:Inter,system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--text);background:var(--bg);line-height:1.6}

    /* Layout helpers */
    .container{width:min(100% - 2rem, var(--container)); margin-inline:auto}
    .section{padding: 2.5rem 0 0 0}
    .section--xl{padding: 4rem 0}

    /* Header */
    .header{position:sticky;top:0;background:rgba(255,255,255,1);backdrop-filter: blur(8px);border-bottom:1px solid var(--border);z-index:10}
    .header__inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
    .brand{display:flex;align-items:center; gap:.6rem; text-decoration:none}
    .brand__logo{width:32px;height:32px;border-radius:8px;background:var(--green);display:grid;place-items:center;color:#fff;font-weight:800}
    .brand__text{font-weight:700;color:var(--green);}

    .nav{display:flex;align-items:center;gap:48px}
    .nav a{color:var(--text);text-decoration:none}
    .nav__links {
      position: relative;
      display: flex;
      gap: 2rem; /* example spacing */
    }

    .disabled-link {
      pointer-events: none;  /* stops clicks */
      /* text-decoration: none; */
      /* cursor: default; */
    }

    /* base link styles */
    .nav__link {
      position: relative;
      text-decoration: none;
    }

    /* default underline for all links, initially hidden */
    .nav__link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      height: 6px;
      width: 100%;
      background: #6dc2b3;
      border-radius: 2px;
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* show underline on hover */
    .nav__link:hover::after {
      opacity: 1;
      transform: scaleX(1);
    }

    /* active link underline always visible */
    .nav_link_active::after {
      opacity: 1;
      transform: scaleX(1);
    }

    /* hide active underline only when some other link is hovered */
    .nav__links:hover .nav_link_active:not(:hover)::after {
      opacity: 0;
      transform: scaleX(0);
    }
    .nav__links{display:flex;align-items:center;gap:48px;font-weight:500}
    .btn{text-decoration: none; display:inline-flex; align-items:center; justify-content:center; padding:.625rem .95rem; border-radius:12px; font-weight:600; border:1px solid transparent; background:var(--green-2); color:color:var(--text);}
    .contact_us_button{text-decoration: none;  display:inline-flex;align-items:center;justify-content:center;padding:.625rem .95rem;border-radius:12px;font-weight:600;border:1px solid transparent;background:var(--green-2);color:#fff}
    .btn:hover{filter:brightness(.95)}

    /* Hero */
    .eyebrow{font-weight:600;color:var(--green);letter-spacing:.02em}
    h1{font-size: clamp(2rem, 2.4vw + 1.2rem, 3.25rem);line-height:1.15;margin:.25rem 0 1rem}
    p.lead{color:var(--muted);font-size:1.05rem;}
    .hero__image{margin-top:1.5rem;border-radius:20px;overflow:hidden;border:1px solid var(--border)}
    .hero__image img{width:100%;height:auto;display:block}

    /* Section headings */
    h2{font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem); line-height:1.2; margin:0 0 .25rem}
	h3{font-size: clamp(0.75rem, 1.2vw + 1rem, 1.5rem); line-height:1.2; margin:1rem 0 .25rem}
    .text-muted{color:var(--muted)}

    /* Lists */
    ul{padding-left:1.2rem}
    ul li{margin:.25rem 0}
    ol{padding-left:1.2rem}

    /* Members logos */
    .logos{display:grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0,1fr)); align-items:center}
    .logo-card{border-radius:12px;display:grid;place-items:center;min-height:96px}
    .logo-card_img{height:auto;width:100%;}
    .wwf_card_logo{display:flex;flex-grow:1}
    .wwf_card_logo img{flex-grow:1}
    .brand_logo {height:auto; width:180px;scale:1.2;}
    .support{display:flex; align-items:center; gap:1rem; margin-top:1.5rem}
    .support small{color:var(--muted)}

    /* CTA band */
    .cta{background:var(--beige); border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:3.5rem ; padding-bottom:2.5rem;}
    .cta__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
    .cta h3{font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem); color: var(--green); margin:0}

    /* Footer */
    .footer{padding:1.75rem 0}
    .hr{height:1px;background:var(--border);margin:1.5rem 0}
    .footgrid{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
    .tiny{font-size:.95rem;color:var(--muted)}


    .contact_us_wrapper {
      display: flex;
    }

    /* Responsive */
    @media (max-width: 900px){
      .logos{grid-template-columns: repeat(2,1fr)}
    }
    @media (max-width: 900px){
      .cta__inner{flex-direction:column;}
      .footgrid {flex-direction: column; text-align: center;}
    }
    @media (max-width: 768px){
      .header__inner{flex-direction:column; gap:1rem;align-items:center}
      .nav{flex-direction:row;justify-content:space-between;align-items:center;}
      .nav__links{justify-content:flex-start;gap:1.5rem}
      .logos{grid-template-columns: 1fr}
    }
    @media (max-width: 430px){
      .nav__links{flex-wrap: wrap;justify-content:center;}
    }