@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&family=Lato:wght@400;700&display=swap');

:root{

   --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
      
      --text: #4C89E1;
      --muted: #96989C;
      --muted2: #000080;
      --card: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.12);
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --shadow2: 0 12px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --radius2: 26px;
      --max: 1180px;

      --accent:#35C6FF;
      --accent2:#7C3AED;
      --glass: rgba(7,10,18,.40);
      --glass2: rgba(7,10,18,.72);

       --teal:   #00c8a0;
    --blue:   #2882ff;
    --gold:   rgb(31, 179, 36);
    --gold-light:   rgb(31, 179, 36);
    --deep:   #040d1a;
    --mid:    #071a2e;
    --steel:  #0a2540;
    --white: #ffffff;
    /* --text:   #e8f4ff; */
    /* --muted:  rgba(160,200,240,0.7); */
    --mono:   'Share Tech Mono', monospace;
    --serif:  'Playfair Display', Georgia, serif;
}

 *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 700px at 18% 0%, rgba(53,198,255,.18), transparent 55%),
        radial-gradient(900px 600px at 92% 18%, rgba(124,58,237,.20), transparent 55%),
        var(--bg);
      color: var(--text);
      overflow-x:hidden;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{max-width:var(--max); margin:0 auto; padding:0 10px}
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}


 .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 16px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background: rgb(31, 179, 36);
      color: #fff;
      font-family: var(--font-body);
      font-weight:800;
      cursor:pointer;
      transition: transform .18s ease, border-color .18s ease, filter .18s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.22)}
    .btn.primary{
      border: 1px solid rgba(219, 239, 119, 0.45);
      background: rgb(31, 179, 36);
      color: #fff;
    }

    /* ============ FOOTER ============ */
    .site-footer{
      position: relative;
      background: #f0f2ec;
      padding: 60px 0 0;
      margin-top: 0;
      color: #3a3a3a;
      overflow: hidden;
    }
    /* decorative arc SVG */
    .footer-arc{
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .footer-arc svg{
      width: 100%;
      height: 100%;
    }

    .footer-body {
      font-family: var(--font-body);
      display: flex;
      justify-content: space-between;  /* logo left, contact+btn right */
      align-items: flex-start;
      padding-bottom: 48px;
    }


    /* Left */
    .footer-left .brand{
      font-family: var(--font-heading);
      margin-bottom: 28px;
      color: #2a2a2a;
    }
    .footer-left .brand .logo{
      background-image: url('./images/logo.webp');
      border: none;
    }
    .footer-left .brand strong{ 
      color: #2a2a2a;
      font-family: var(--font-heading);

      
    }
    .footer-left .brand small{ color: #6b7a6b; }

    .footer-social-label{
      display: block;
      font-size: 13px;
      font-weight: 900;
      color: #5a6a5a;
      margin-bottom: 10px;
      letter-spacing: .3px;
    }
    .footer-social-icons{ display:flex; gap:8px; }
    .social-icon{
      display: grid;
      place-items: center;
      width: 36px; height: 36px;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(255,255,255,.60);
      color: #4a5a4a;
      transition: background .18s, color .18s, border-color .18s;
    }
    .social-icon:hover{
      background: #fff;
      color: #2a5a2a;
      border-color: rgba(0,0,0,.22);
    }

    /* Centre link columns */
    .footer-links{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 48px;
      padding-top: 6px;
    }
    .footer-col{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .footer-col a{
      color: #4a5a4a;
      font-weight: 700;
      font-size: 14.5px;
      transition: color .18s;
    }
    .footer-col a:hover{ color: #2a4a2a; }

    /* Right: View Brochure pill */
    .footer-right{
      padding-top: 6px;
    }
    .brochure-btn{
      font-family: var(--font-body);

      display: inline-flex;
      align-items: center;
      width: fit-content;
      gap: 9px;
      padding: 13px 24px;
      border-radius: 999px;
      background: var(--text);
      border: none;
      color: #fff;
      font-weight: 800;
      font-size: 14px;
      white-space: nowrap;
      transition: background .18s, transform .18s;
    }
    .brochure-btn:hover{
      background: var(--text);
      transform: translateY(-2px);
    }
    .brochure-dot{
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #fff;
      flex-shrink: 0;
    }

    /* Copyright bar */
    .footer-copy{
      font-family: var(--font-body);
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(0,0,0,.08);
      padding: 18px 0;
      text-align: right;
      font-size: 13px;
      font-weight: 700;
      color: #8a9a8a;
    }

    .footer-copy  a {
      text-decoration: none;
      color: var(--text);
    }

  

/* ============ RESPONSIVE ============ */

    /* Tablet — 1020px */
   

    /* Mobile — 780px */
   

          /* ============ CONTACT / CTA SECTION ============ */
    .cta-section {
      position: relative;
      min-height: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 80px 0 0;
      margin-top: 10px;
    }
    .cta-bg {
      position: absolute;
      inset: 0;
      background-image: url('../images/contactBg.webp');
      background-size: cover;
      background-position: center 40%;
      z-index: 0;
    }
    .cta-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(7,10,18,.72) 0%, rgba(7,10,18,.30) 60%, rgba(7,10,18,.10) 100%);
      z-index: 1;
    }
    .cta-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      padding-bottom: 100px;
    }
    .cta-text {
      font-family: var(--font-body);
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .cta-heading {
      font-family: var(--font-heading);
      font-size: clamp(2.5rem, 4vw, 4rem);

      margin: 0;
      font-size: 42px;
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -.5px;
      color: #fff;
    }
    .cta-sub {
      font-family: var(--font-body);
      margin: 0;
      color: rgba(255,255,255,.75);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.6;
    }

    /* Waves — filled with page bg so they cut INTO the section */
    .cta-waves {
      position: absolute;
      bottom: -1px; left: 0; right: 0;
      height: 140px;
      z-index: 3;
      pointer-events: none;
      overflow: hidden;
    }
    .cta-wave {
      position: absolute;
      bottom: 0; left: 0;
      width: 200%;
      height: 140px;
    }
    .cta-wave-1 {
      animation: waveMove 7s linear infinite;
    }
    .cta-wave-2 {
      animation: waveMove 11s linear infinite reverse;
    }
    .cta-wave-3 {
      animation: waveMove 15s linear infinite;
    }
    @keyframes waveMove {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

       /* ============ HEADER / MENU (OVERLAPS HERO) ============ */
    .header{
      position:absolute;
      top:0; left:0; right:0;
      z-index:50;
      padding: 0;
      pointer-events:none; /* allow hero clicks except inside nav */
    }
     .nav{
      pointer-events:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 16px;
      padding: 12px 20px;
      background: transparent;
    }
    .nav-right {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      justify-content: flex-end;
    }
    .header.is-sticky{
      position:fixed;
      padding: 0;
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    .header.is-sticky .nav{
      background: #619df1;
    }
    /* When sticky: flip text dark */
    .header.is-sticky .brand { color: #fff; }
    .header.is-sticky .brand small { color: #fff; }
    .header.is-sticky .menu > a,
    .header.is-sticky .menu > button { color: #fff; }
    
    .header.is-sticky .dd-btn { color: #fff; }
    .header.is-sticky .search {
      border-color: rgba(0,0,0,.15);
      background: rgba(0,0,0,.03);
    }
    .header.is-sticky .search input { color: #fff; }
    .header.is-sticky .search input::placeholder { color: #e9e7e7; }
    .header.is-sticky .search .kbd {
      border-color: rgba(0,0,0,.15);
      background: rgba(0,0,0,.04);
      color: #6b6b6b;
    }

    /* Logo — white when floating over hero, full colour when sticky */
    .header:not(.is-sticky) .nav .brand img {
      filter: brightness(0) invert(1);
      transition: filter .25s ease;
    }
    .header.is-sticky .nav .brand img {
      filter: none;
      transition: filter .25s ease;
    }

    /* Logo */
    .brand{
      font-family: var(--font-heading);
      font-size: 22px;
      display:flex; align-items:center; gap:10px;
      font-weight:1000;
      letter-spacing:.2px;
    }
    .logo{
      width:80px; height:80px; border-radius:14px;
      background-image: url('../images/logo.webp');
      /* box-shadow: 0 14px 40px rgba(53,198,255,.18); */
      border: 1px solid rgba(255,255,255,.18);
      flex: 0 0 auto;
    }
    .brand small{font-family: var(--font-heading); display:block; color: #fff; font-weight:800;font-size: 13px; margin-top:1px;}

    /* Search (middle) */
    .search{
      display:flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid var(--text);
      width: 280px;
      min-height: 44px;
    }
    .search input{
      width:100%;
      border:none;
      outline:none;
      background: transparent;
      color: var(--text);
      font-weight:800;
      font-size:14px;
    }
    .search .kbd{
      padding:4px 8px;
      border:1px solid rgba(255,255,255,.16);
      border-bottom-color: rgba(255,255,255,.08);
      border-radius: 10px;
      background: rgba(255,255,255,.06);
      color: #fff;
      font-weight: 600;
      font-size:12px;
      white-space:nowrap;
    }

    .search-icon-btn {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 30px; height: 30px;
      border-radius: 50%;
      border: none;
      background: var(--text);
      color: #fff;
      cursor: pointer;
      transition: background .18s;
    }
    .search-icon-btn:hover { background: #060136; }

    /* Menu (right) */
    .menu{
      display:flex;
      gap: 6px;
      align-items:center;
      justify-content:flex-end;
    }
    .menu > a,
    .menu > button{
      position: relative;
      border:none;
      background: transparent;
        color: #fff;

      
      padding: 10px 20px;
      border-radius: 12px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      font-size: 18px;
  font-weight:600;

      gap:8px;
      transition: background .18s ease, color .18s ease;
    }
    .menu > a::after,
.menu > button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.menu > a:hover::after,
.menu > button:hover::after,
.menu > a.active::after {
  width: 100%;
}

.menu > a.active {
  color: var(--gold);
}

.menu > a:hover,
.menu > button:hover {
  background: transparent;
  /* color: var(--text); */
}

     .contact-btn {
      padding: 8px 18px !important;
      border-radius: 10px !important;
      border: 1.5px solid rgba(255,255,255,.25) !important;
      background: var(--text) !important;
      color: #fff !important;
      font-weight: 600 !important;
      transition: background .3s ease, color .3s ease, border-color .3s ease !important;
    }
    .contact-btn:hover {
      opacity: .85;
    }
    /* Scrolled past hero → white bg, dark text */
    .header.is-sticky .contact-btn {
      background: #fff !important;
      color: #1a1a1a !important;
      border-color: rgba(0,0,0,.15) !important;
    }
    


.dd-btn {
  background: transparent;
  border: none;
  color: #fff;
  
  padding: 0px 20px;  /* match .menu > a / .menu > button */
  font-size: 20px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
}

.dd-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; 
  width: 0;
  /* height: 2px; */
  
  color: var(--muted);
  background-color: var(--text);
  transition: width 0.3s ease;
}

.dd-btn:hover::after {
  width: 100%;
}
    .caret{opacity:.8; transform: translateY(1px)}
    

    /* Dropdown */
    .dd{position:relative}
    .dropdown{
      position:absolute;
      right:0;
      top: calc(100% + 10px);
      min-width: 260px;
      padding: 10px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(7,10,18,.78);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      display:none;
    }
    .dropdown a{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding: 10px 10px;
      border-radius: 12px;
      color: rgba(255,255,255,.78);
      font-weight:850;
    }
    .dropdown a:hover{background: rgba(255,255,255,.06); color: var(--text)}
    .dropdown .hint{color: rgba(255,255,255,.50); font-weight:900; font-size:12px}
    .dd.open .dropdown{display:block}

    /* Mobile */
    .hamburger{display:none}
    .mobile-drawer{
      display:none;
      pointer-events: auto;
      margin-top: 0;
      padding: 10px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(7,10,18,.78);
      backdrop-filter: blur(14px);
    }
    .mobile-drawer a, .mobile-drawer button{
      width:100%;
      text-align:left;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding: 12px 12px;
      border-radius: 14px;
      border:none;
      background: transparent;
      color: rgba(255,255,255,.78);
      font-weight:900;
      cursor:pointer;
    }
    .mobile-drawer a:hover, .mobile-drawer button:hover{background: rgba(255,255,255,.06); color: var(--text)}
    .mobile-sub{
      display:none;
      padding: 0 6px 6px;
    }
    .mobile-sub a{padding-left: 18px; font-weight:850}
    .mobile-sub.open{display:block}


    
      
    
    /* ANIMATIONS */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero-left > * { animation: fadeUp 0.8s ease both; }
  .hero-left .hero-eyebrow { animation-delay: 0.1s; }
  .hero-left .hero-title   { animation-delay: 0.25s; }
  .hero-left .hero-tagline { animation-delay: 0.4s; }
  .hero-left .hero-stats   { animation-delay: 0.55s; }

   @media (max-width: 1020px) {
      /* Nav: hide search, compress to logo + hamburger */
      .nav { grid-template-columns: 1fr auto; }
      .search { display: none; }

      /* Hero: stack card below text */
      .hero-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
      .hero-card  { flex: 0 0 auto; width: 100%; }
      .hero h1    { font-size: 42px; }

      /* ESG: pill takes more width */
      .esg-title-pill { width: 45%; padding: 16px 28px; }
      .te-card { height: 360px; }
    }


   @media(max-width: 780px) {

    .search   { display: none; }          /* hide search bar entirely */
      .menu     { display: none; }          /* hide desktop menu links */
      .brand span { display: none;}
      .hamburger{ display: inline-flex; }   /* show burger */
      .mobile-drawer { display: block; }    /* always rendered, JS toggles visibility */

  .footer-body {
    flex-direction: column;  /* stack vertically */
    gap: 28px;
  }
  .footer-right {
    text-align: left;  /* un-right-align on mobile */
  }
  .footer-copy {
    text-align: center;
  }
}