/* =========================================================
   Sustainable NValue — Base Stylesheet
   Design tokens, reset and shared components
   (header/nav, footer, divider) used across all pages.
   ========================================================= */

  :root{
    --ink:#102637;
    --panel:#132A47;
    --steel:#3B6A94;
    --amber:#E07A3E;
    --amber-deep:#B0531C;
    --paper:#F6F7F9;
    --slate:#2B3440;
    --slate-soft:#5B6672;
    --line:#E1E4E8;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}

  h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    letter-spacing:-0.01em;
  }

  a{color:inherit; text-decoration:none;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
  .wrap{max-width:1180px; margin:0 auto; padding-left:24px; padding-right:24px;}

  /* NAV */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
    padding:22px 0;
  }
  header.scrolled{
    background:rgba(11,30,54,0.92);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 rgba(255,255,255,0.06);
    padding:14px 0;
  }
  nav{display:flex; align-items:center; justify-content:space-between;}
  .logo{display:flex; align-items:center; gap:10px; font-weight:700; color:#fff; font-size:1.05rem;}
  .logo-mark-img{height:42px; width:auto; display:block; transition:height .35s ease;}
  header.scrolled .logo-mark-img{height:32px;}
  .navlinks{display:flex; align-items:center; gap:36px;}
  .navlinks a{
    color:rgba(255,255,255,0.82); font-size:0.9rem; font-weight:500;
    position:relative; padding:4px 0; text-decoration:none;
  }
  .navlinks a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
    background:var(--amber); transition:width .3s ease;
  }
  .navlinks a.active{color:var(--amber);}
  .navlinks a:not(.active):hover{color:#fff;}
  .navlinks a:hover::after, .navlinks a.active::after{width:100%;}
  .navlinks a:focus-visible{outline:2px solid var(--amber); outline-offset:4px; border-radius:2px;}
  /* Hamburger toggle button — rounded, translucent, turns amber when active */
  .menu-toggle{
    display:none; flex-direction:column; justify-content:center; align-items:center;
    gap:5px; width:44px; height:44px; cursor:pointer;
    padding:0; -webkit-tap-highlight-color:transparent; position:relative; z-index:210;
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16); border-radius:12px;
    transition:background .3s ease, border-color .3s ease, transform .2s ease;
  }
  .menu-toggle:hover{background:rgba(255,255,255,0.18);}
  .menu-toggle:active{transform:scale(0.93);}
  .menu-toggle[aria-expanded="true"]{background:var(--amber); border-color:var(--amber);}
  .menu-toggle-bar{
    display:block; width:20px; height:2px; background:#fff; border-radius:2px;
  }

  /* Mobile menu overlay + slide-in panel */
  .mobile-menu-overlay{
    display:none; position:fixed; inset:0; background:rgba(6,14,26,0.6);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s;
    z-index:190;
  }
  .mobile-menu-overlay.open{
    opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s linear 0s;
  }
  .mobile-menu-panel{
    display:none; position:fixed; top:0; right:0; bottom:0; width:min(86vw, 380px);
    background:linear-gradient(165deg, #0C2035 0%, #132A47 48%, #0D2740 100%);
    box-shadow:-32px 0 80px -20px rgba(0,0,0,0.55);
    border-left:1px solid rgba(255,255,255,0.08);
    transform:translateX(100%); visibility:hidden;
    transition:transform .4s cubic-bezier(.4,0,.2,1), visibility 0s linear .4s;
    z-index:200; flex-direction:column;
  }
  .mobile-menu-panel.open{
    visibility:visible; transform:translateX(0);
    transition:transform .4s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }
  .mobile-menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 22px 20px; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .mobile-menu-header .logo-mark-img{height:34px; width:auto; display:block;}
  .mobile-menu-close{
    width:40px; height:40px; border-radius:12px; cursor:pointer;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
    color:#fff; font-size:1.25rem; line-height:1; display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, border-color .25s ease, transform .2s ease;
  }
  .mobile-menu-close:hover{background:rgba(255,255,255,0.16);}
  .mobile-menu-close:active{transform:scale(0.92);}
  .mobile-menu-links{display:flex; flex-direction:column; padding:6px 0;}
  .mobile-menu-links a{
    display:block; padding:18px 26px; font-size:1.05rem; font-weight:700;
    color:rgba(255,255,255,0.78); border-bottom:1px solid rgba(255,255,255,0.06);
    border-left:3px solid transparent;
    transition:color .25s ease, background .25s ease, border-left-color .25s ease, padding-left .25s ease;
  }
  .mobile-menu-links a:not(.active):hover{color:#fff; padding-left:32px; background:rgba(255,255,255,0.03);}
  .mobile-menu-links a.active{color:#fff; background:rgba(224,122,62,0.1); border-left-color:var(--amber);}
  .mobile-menu-links a:focus-visible{outline:2px solid var(--amber); outline-offset:-2px;}
  .mobile-menu-footer{margin-top:auto; padding:22px;}
  .mobile-menu-cta{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:17px 22px; border-radius:999px;
    background:var(--amber); color:#fff; font-weight:700; font-size:1rem;
    box-shadow:0 16px 32px -12px rgba(224,122,62,0.55);
    transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .mobile-menu-cta:hover{background:var(--amber-deep); transform:translateY(-2px);}
  .mobile-menu-cta:focus-visible{outline:2px solid #fff; outline-offset:2px;}

  @media (max-width:720px){
    .menu-toggle{display:flex;}
    .navlinks{display:none;}
    .mobile-menu-overlay{display:block;}
    .mobile-menu-panel{display:flex;}
  }

  .divider{
    width:64px; height:3px; background:var(--amber); border-radius:2px;
    margin:26px 0;
  }

  /* FOOTER */
  footer{background:#08182D; color:#8FA4BC; padding:56px 0 28px;}
  .footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-top .tag{color:#fff; font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:600; max-width:320px;}
  .footer-links{display:flex; gap:28px; font-size:0.88rem;}
  .footer-links a:hover{color:#fff;}