:root {
      --brand: #00aab5;
      --brand-dark: #007f88;
      --ink: #172428;
      --muted: #66777b;
      --line: #e5eeee;
      --white: #ffffff;
    }

    * {
      box-sizing: border-box;
    }
	
	html,
	body {
		width: 100%;
		overflow-x: hidden;
	}

    body {
      margin: 0;
      color: var(--ink);
      background: var(--white);
      font-family: "Manrope", Arial, sans-serif;
    }

    /* Desktop header: fixed 200px high. */
    .site-header {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      height: 200px;
      min-height: 200px;
      overflow: hidden;
	  position: relative;
	  z-index: 2;
	  background: linear-gradient(
		180deg,
		rgba(237, 250, 250, 0.72) 0%,
		rgba(248, 253, 253, 0.50) 45%,
		rgba(255, 255, 255, 0.30) 100%
	  );
    }

    /* The logo blends into the header; no vertical separating border. */
    .logo-box {
      display: grid;
      width: 100%;
      height: 150px;
      place-items: center;
      padding: 0px;
      background: transparent;
    }

    .logo-box img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 150px;
      object-fit: contain;
    }

    /* The two desktop menus together equal 200px. */
    .navigation-area {
      display: grid;
      height: 200px;
      min-width: 0;
      grid-template-rows: 60px 55px;
      background: transparent;
    }

    .top-menu,
    .main-menu {
      display: flex;
      align-items: center;
      padding-inline: clamp(24px, 5vw, 35px);
    }

    .top-menu {
		 display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0; /* Let the separator provide spacing */
    }

	/* Separator */
	.top-menu a:not(:last-child)::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		width: 1px;
		height: 12px;
		background: #000;
		transform: translateY(-50%);
	}
    .main-menu {
      justify-content: flex-end;
      gap: clamp(22px, 3vw, 35px);
      background: transparent;
    }

    .top-menu a,
    .main-menu a {
      position: relative;
      color:#000;
      text-decoration: none;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    .top-menu a {
      color: #222222;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.07em;
	  position: relative;
		padding: 0 15px;
    }

    .main-menu a {
      font-size: 14px;
      font-weight: 600;
    }

    .main-menu a::after {
      position: absolute;
      right: 0;
      bottom: -10px;
      left: 0;
      height: 2px;
      content: "";
      background: var(--brand);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.2s ease;
    }

    .top-menu a:hover,
    .main-menu a:hover,
    .main-menu a.active {
      color: var(--brand-dark);
    }

    .main-menu a:hover::after,
    .main-menu a.active::after {
      transform: scaleX(1);
    }

    .contact-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 22px;
      color: var(--white) !important;
      border-radius: 6px;
      background: var(--brand);
      box-shadow: 0 8px 18px rgba(0, 170, 181, 0.2);
      transition: background 0.2s ease, transform 0.2s ease !important;
    }

    .contact-button:hover {
      background: var(--brand-dark);
      transform: translateY(-2px);
    }

    .contact-button::after {
      display: none;
    }

    /* Mobile-only controls are not shown on desktop. */
    .mobile-menu-controls,
    .menu-toggle {
      display: none;
    }

    @media (max-width: 900px) {
      .site-header {
        grid-template-columns: 220px minmax(0, 1fr);
      }

      .top-menu,
      .main-menu {
        padding-inline: 28px;
      }

      .top-menu {
        gap: 18px;
      }

      .main-menu {
        gap: 22px;
      }
    }

    @media (max-width: 680px) {
      .site-header {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      .logo-box {
        height: auto;
        padding: 16px 30px 8px;
      }

      .logo-box img {
        width: min(240px, 100%);
        max-height: none;
      }

      .navigation-area {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
      }

      /* Quick Links stays left; primary Menu stays right. */
      .mobile-menu-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        padding: 10px 18px;
        background: transparent;
      }

      .menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        color: var(--ink);
        border: 0;
        background: transparent;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
      }

      .menu-toggle:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 4px;
        border-radius: 2px;
      }

      .hamburger {
        display: grid;
        width: 22px;
        gap: 4px;
      }

      .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--brand-dark);
        transition: transform 0.2s ease, opacity 0.2s ease;
      }

      .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }

      .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
        opacity: 0;
      }

      .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      /* Each navigation group is its own mobile dropdown. */
      .top-menu,
      .main-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 8px 20px 20px;
        gap: 0;
        background: transparent;
      }

      .top-menu.is-open,
      .main-menu.is-open {
        display: flex;
      }

      .top-menu a,
      .main-menu a {
        display: block;
        width: 100%;
        padding: 14px 4px;
        border-bottom: 1px solid rgba(0, 127, 136, 0.12);
        text-align: left;
      }

      .top-menu a:last-child,
      .main-menu a:last-child {
        border-bottom: 0;
      }

      .main-menu a::after {
        display: none;
      }

      .main-menu .contact-button {
        display: flex;
        width: 100%;
        margin-top: 10px;
        border-bottom: 0;
        text-align: center;
      }
    }
	.hero-world-map {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  height: 600px;
	  overflow: hidden;
	  background: #f7fcfc url("../img/world-map-background.jpg") center center / cover no-repeat;
	}
	
		/* Compact hero for interior pages (About, Services, Contact, etc.) */
	.hero-world-map.is-inner{
		height:550px;   /* adjust this one number to taste for ALL interior pages */
	}

	.hero-world-map.is-inner .map-stage{
		display:flex;
		align-items:center;
		justify-content:center;
	}

	@media (max-width:680px){
		.hero-world-map.is-inner{
			height:auto;
			min-height:0;
		}
		.hero-world-map.is-inner .map-stage{
			flex:none;
			height:auto;
			min-height:0;
			padding:40px 0 30px;
		}
	}

	.hero-world-map::before {
		content: "";
		position: absolute;
		inset: 0;
		width: 45%;
		z-index: 1;
		pointer-events: none;

		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(255,255,255,0.05) 35%,
			rgba(255,255,255,0.65) 50%,
			rgba(255,255,255,0.05) 65%,
			transparent 100%
		);

		filter: blur(10px);
		opacity: 1;

		animation: glossySweep 3s ease-in-out infinite;
	}

	.site-header,
	.map-stage{
	  position: relative;
	  z-index:2;
	}

	@keyframes glossySweep {
		from {
			transform: translateX(-150%);
		}
		to {
			transform: translateX(350%);
		}
	}


	/* The map remains visible from the top header through the hero */
	.map-stage {
	  flex: 1;
	  min-height: 0;
	}

	/* Mobile: menus expand normally; map always stays below them */
	@media (max-width: 680px) {
	  .hero-world-map {
		height: auto;
		min-height: 0;
		overflow: visible;
	  }

	  .map-stage {
		flex: none;        /* was: flex: 0 0 240px */
		height: auto;       /* was implicitly fixed by flex-basis */
		min-height: 0;      /* was: min-height: 240px */
		padding-bottom: 30px
	  }
	}
	
	.hero-copy{
		width:100%;
		max-width:1100px;
		margin:0 auto;
		padding:0 20px;
		text-align:center;
		box-sizing:border-box;
	}

	.hero-copy h1{
		font-size:clamp(2.4rem, 9vw, 4.5rem);
		line-height:0.95;
		letter-spacing:-0.04em;
		word-break:normal;
		overflow-wrap:break-word;
		padding-bottom:10px;
	}
	.hero-copy .eyebrow{
		font-size:clamp(0.85rem, 2.8vw, 1rem);
		letter-spacing:.08em;
	}
	.hero-copy .subcopy{
		font-size:clamp(0.9rem, 3vw, 12px) !important;
		line-height:1.6;
		max-width:600px;
		margin:8px auto 0;
		font-weight:500;
	}
	h1 { font-family:Manrope,sans-serif; text-wrap:balance; margin:5px 0 0; font-size:70px; letter-spacing:-.065em;font-weight:800;background: linear-gradient(
		90deg,
		#0b4653 0%,
		#006d79 35%,
		#0099a5 70%,
		#18c7d0 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent; text-shadow:0 0 44px rgba(117,245,241,.12); }

	.chart { position:absolute; bottom:0; left:0; width:100%; height:280px; overflow:visible; }
	.chart-grid { stroke:rgba(146,240,237,.11); stroke-width:1; }
	.chart-fill { fill:url(#fill); opacity:.48; }
	.chart-track { fill:none; stroke:rgba(132,239,234,.25); stroke-width:2; }
	.chart-progress { fill:none; stroke:url(#line); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1 1000; stroke-dashoffset:1;filter:drop-shadow(0 0 7px rgba(52,249,241,.8)); }
	.chart-dot { fill:#ecffff; filter:drop-shadow(0 0 6px #3ff8ef) drop-shadow(0 0 14px #1bd9d5); }
	@keyframes draw { 0% { stroke-dasharray:0 1000; } 70%,100% { stroke-dasharray:1000 0; } }
	@keyframes dot { 0%,4% { offset-distance:0%; opacity:0; } 7% { opacity:1; } 70%,100% { offset-distance:100%; opacity:0; } }
	.metric { position:absolute; right:7%; top:35%; z-index:2; padding:12px 16px; border:1px solid rgba(127,242,236,.22); background:rgba(4,25,35,.56); backdrop-filter:blur(8px); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:#aac4cb; }
	.metric b { display:block; margin-top:5px; color:#b9fffb; font-size:20px; letter-spacing:0; }
	@media (max-width:620px) { header { height:132px; align-items:flex-end; padding-bottom:16px; } .brand { position:absolute; left:24px; top:13px; } .brand img { width:108px; height:55px; } .utility { top:17px; font-size:8px; } nav { width:100%; gap:15px; justify-content:flex-start; } nav a { font-size:10px; } main { min-height:calc(100svh - 132px); padding-top:48px; } .map-wrap { width:142vw; transform:translateX(-21vw); margin-top:45px; } .metric { display:none; } .chart { height:auto; width:100%; } }
	@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }
	
	.milestone .star{
		fill:#ffffff;
		stroke:#74fff6;
		stroke-width:1.4;

		filter:
			drop-shadow(0 0 6px #6afaf3)
			drop-shadow(0 0 16px #24e7e2);

		animation:starPulse 2s ease-in-out infinite;
	}

	.milestone-label{
		display:flex;
		align-items:center;
		justify-content:center;

		height:60px;
		padding:0 14px;

		border-radius:999px;

		background:rgba(255,255,255,.90);
		backdrop-filter:blur(12px);

		border:1px solid rgba(0,170,181,.25);

		color:#005f69;
		font:600 12px/1 Manrope,sans-serif;

		white-space:nowrap;

		box-shadow:
			0 10px 30px rgba(0,170,181,.10);
	}

	@keyframes starPulse{
		0%,100%{
			transform:scale(1);
			opacity:1;
		}

		50%{
			transform:scale(1.35);
			opacity:.75;
		}
	}
	
	/* ================= TRUSTED BY ================= */
	#trusted{
		padding-block:20px;
		border-top:1px solid #e7efef;
		border-bottom:1px solid #e7efef;
	}
	.trusted-label{
		font-size:24px;
		letter-spacing:0em; 
		text-transform:uppercase;
		color:#076471;
		text-align:center;
		margin-bottom:10px;
		font-weight:600;
		}
	.logo-marquee{
		display:flex;
		gap:56px; 
		overflow:hidden;
		-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
	.logo-track{
		display:flex; 
		gap:56px;
		animation:scroll-x 22s linear infinite;
		flex-shrink:0;
	}
	
	
	
	.logo-track1{
		display:flex; 
		gap:56px;
		animation:scroll-x 120s linear infinite;
		flex-shrink:0;
	}
	@keyframes scroll-x{from{transform:translateX(0);} to{transform:translateX(-100%);}}
	
	
	.logo-track span{
	  font-family:var(--font-display); 
	  font-weight:600; 
	  font-size:1.15rem;
	  color:#000000;
	  white-space:nowrap;
	}
	.logo-track1 span{
	  font-family:var(--font-display); 
	  font-weight:600; 
	  font-size:1.15rem;
	  color:#000000;
	  white-space:nowrap;
	}
	
	.logo-track2{
		display:flex; 
		gap:56px;
		animation:scroll-y 120s linear infinite;
		flex-shrink:0;
	}
	.logo-track2 span{
	  font-family:var(--font-display); 
	  font-weight:600; 
	  font-size:1.15rem;
	  color:#000000;
	  white-space:nowrap;
	}
	@keyframes scroll-y{from{transform:translateX(-100%);} to{transform:translateX(0);}}
	
	#why{
		padding:60px 0;
	}

	.why-grid{
		display:grid;
		grid-template-columns:repeat(4,1fr);
		gap:22px;
		padding:0 20px;
		margin-top:50px;
	}

	.why-card{
		 text-align:center;
		padding:34px 30px;
		border:1px solid #e8ecef;
		border-radius:18px;
		background:#fff;
		transition:
			border-color .25s ease,
			transform .25s ease;
	}

	.why-card:hover{
		transform:translateY(-3px);
		border-color:#00aab5;
	}

	.glyph{
		width:52px;
		height:52px;
		display:flex;
		align-items:center;
		justify-content:center;
		margin:0 auto 20px;
	}

	.glyph svg{
		width:50px;
		height:50px;
		font-weight:500;
	}

	.why-card h3{
		margin:0 0 12px;
		font-size:20px;
		font-weight:700;
		color:#1b252b;
	}

	.why-card p{
		margin:0;
		color:#3f4040;
		font-weight:500;
		line-height:1.7;
		font-size:15px;
	}

	@media(max-width:900px){
		.why-grid{
			grid-template-columns:repeat(2,1fr);
		}
	}

	@media(max-width:600px){
		.why-grid{
			grid-template-columns:1fr;
		}
	}
	.section-head{
		max-width:760px;
		margin:0 auto 60px;
		text-align:center;
	}

	.section-tag{
		display:inline-flex;
		align-items:center;
		gap:10px;
		font-size:.82rem;
		font-weight:700;
		letter-spacing:.24em;
		text-transform:uppercase;
		color:#04939d;
	}

	.section-tag::before{
		content:"";
		width:18px;
		height:1px;
		background:#00aab5;
	}

	.section-title{
		margin:14px 0 14px;
		font-size:clamp(2rem,4vw,40px);
		line-height:1.08;
		font-weight:700;
		letter-spacing:-0.04em;
		color:#172428;
	}

	.section-subtitle{
		max-width:900px;
		margin:0 auto;
		font-size:1rem;
		line-height:1.8;
		color:#000;
		font-weight:500;
	}
	
	#process{
		padding:20px 0;
	}

	.process-timeline{
		position:relative;
		display:grid;
		grid-template-columns:repeat(3,1fr);
		gap:60px;
		margin-top:70px;
	}

	.timeline-line{
		position:absolute;
		left:10%;
		right:10%;
		top:36px;
		height:1px;
		background:#d8e8eb;
	}

	.timeline-step{
		position:relative;
		text-align:center;
		z-index:2;
	}

	.step-circle{
		width:72px;
		height:72px;
		margin:0 auto 32px;
		border-radius:50%;
		border:1px solid #00aab5;
		background:#fff;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:15px;
		font-weight:700;
		letter-spacing:.08em;
		color:#00aab5;
		transition:.3s;
	}

	.timeline-step:hover .step-circle{
		background:#00aab5;
		color:#fff;
	}

	.timeline-step h3{
		margin-bottom:14px;
		font-size:1.35rem;
		font-weight:700;
		color:#172428;
	}

	.timeline-step p{
		max-width:270px;
		margin:auto;
		color:#66777b;
		line-height:1.8;
		font-size:15px;
	}
	@media(max-width:900px){
		.process-timeline{
			grid-template-columns:1fr;
			gap:70px;
			padding:0 20px;
		}

		.timeline-line{
			left:36px;
			top:0;
			bottom:0;
			width:1px;
			height:auto;
			right:auto;
		}

		.timeline-step{
			text-align:left;
			padding-left:90px;
		}

		.step-circle{
			position:absolute;
			left:0;
			margin:0;
		}

		.timeline-step p{
			max-width:100%;
		}
	}

	.cta-editorial {
		position:relative;
		animation:float 4s ease-in-out infinite;
		overflow:hidden;
		padding: 70px 20px;
		padding-bottom:0px;
		border-top: 1px solid #edf2f3;
		border-bottom: 1px solid #edf2f3;
	}
	
	.cta-editorial::before{
		content:"";
		position:absolute;
		width:700px;
		height:700px;
		border-radius:50%;
		background:radial-gradient(circle, rgba(0,170,181,.12), transparent 70%);
		top:-300px;
		left:50%;
		transform:translateX(-50%);
		animation:aurora 8s ease-in-out infinite alternate;
	}

	@keyframes aurora{
		from{
			transform:translateX(-55%) translateY(-20px);
		}
		to{
			transform:translateX(-45%) translateY(30px);
		}
	}

	.cta-inner {
		max-width: 760px;
		margin: auto;
		text-align: center;
	}
	
	.cta-inner>*{
		opacity:0;
		transform:translateY(30px);
		animation:reveal .8s forwards;
	}

	@keyframes reveal{
		to{
			opacity:1;
			transform:none;
		}
	}

	.cta-tag {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-size: .8rem;
		font-weight: 700;
		letter-spacing: .28em;
		text-transform: uppercase;
		color: #00aab5;
	}

	.cta-tag::before {
		content: "";
		width: 18px;
		height: 1px;
		background: #00aab5;
	}

	.cta-inner h2 {
		margin: 18px 0;
		font-size: clamp(2.8rem, 5vw, 40px);
		line-height: 1.05;
		letter-spacing: -0.05em;
		font-weight: 700;
		color: #172428;
	}

	.cta-inner p {
		max-width: 900px;
		margin: 0 auto;
		font-size: 1rem;
		line-height: 1.8;
		color: #000;
		animation-delay:.15s;
	}

	.cta-actions {
		display: flex;
		justify-content: center;
		gap: 18px;
		margin: 50px 0 35px;
		flex-wrap: wrap;
		animation-delay:.3s;
	}

	.btn-primary,
	.btn-secondary {
		padding: 16px 34px;
		border-radius: 999px;
		text-decoration: none;
		font-weight: 600;
		transition: .25s ease;
		animation:float 4s ease-in-out infinite;
	}

	.btn-primary {
		background: #172428;
		color: #fff;
	}
	

	@keyframes float{
		0%,100%{
			transform:translateY(0);
		}
		50%{
			transform:translateY(-4px);
		}
	}
	.btn-primary:hover {
		background: #00aab5;
	}

	.btn-secondary {
		border: 1px solid #dfe8ea;
		color: #172428;
	}

	.btn-secondary:hover {
		border-color: #00aab5;
		color: #00aab5;
	}

	.cta-contact {
		display: flex;
		justify-content: center;
		gap: 40px;
		flex-wrap: wrap;
		font-size: .95rem;
		color: #66777b;
	}

	@media (max-width:768px) {
		.cta-editorial {
			padding: 80px 20px;
		}

		.cta-inner h2 {
			font-size: 2.5rem;
		}

		.cta-actions {
			flex-direction: column;
			align-items: center;
		}

		.btn-primary,
		.btn-secondary {
			width: 100%;
			max-width: 320px;
		}

		.cta-contact {
			flex-direction: column;
			gap: 10px;
		}
	}
	.site-footer{
		padding:50px 0 20px;
		background:#fff;
	}

	.footer-top{
		max-width:1200px;
		margin:auto;
		padding:0 20px;
		display:grid;
		grid-template-columns:1.4fr 2fr;
		gap:80px;
	}

	.footer-brand img{
		width:230px;
	}

	.footer-brand p{
		max-width:420px;
		color:#464444;
		line-height:1.8;
		margin-top:0px;
		font-size: 14px;
		font-weight: 500;
		text-align:justify;
	}

	.footer-grid{
		display:grid;
		grid-template-columns:repeat(3,1fr);
		gap:50px;
	}

	.footer-grid h4{
		margin-bottom:22px;
		font-size:.9rem;
		text-transform:uppercase;
		letter-spacing:.15em;
		color:#172428;
	}

	.footer-grid a,
	.footer-grid span{
		display:block;
		margin-bottom:14px;
		text-decoration:none;
		font-size:14px;
		transition:.25s;
		font-weight:500;
		color:#464444 !important;
	}

	.footer-grid a:hover{
		color:#00aab5;
	}

	.footer-bottom{
		max-width:1200px;
		margin:20px auto 0;
		padding:20px 10px 0;
		border-top:1px solid #edf2f3;
		display:flex;
		justify-content:space-between;
		align-items:center;
		flex-wrap:wrap;
		gap:20px;
	}

	.footer-bottom p{
		color: #464444;
		font-weight: 500;
		font-size: 14px;
		margin:0px;
		text-align:center !important;
		width:100%
	}

	.footer-social{
		display:flex;
		gap:24px;
	}

	.footer-social a{
		text-decoration:none;
		color:#66777b;
		transition:.25s;
	}

	.footer-social a:hover{
		color:#00aab5;
	}

	@media(max-width:900px){

	.footer-top{
		grid-template-columns:1fr;
		gap:50px;
	}

	.footer-grid{
		grid-template-columns:1fr;
		gap:40px;
	}

	.footer-bottom{
		flex-direction:column;
		text-align:center;
	}

	}
	
	
	/* All Pages Style */