:root {
   --ink: #0a2234;
   --navy: #092b42;
   --blue: #0878c9;
   --cyan: #17b6d7;
   --green: #3baa35;
   --lime: #8cc63e;
   --orange: #ff7b16;
   --paper: #f7faf9;
   --muted: #637281;
   --line: #dce8e7;
   --shadow: 0 20px 60px rgba(4, 24, 37, .18);
   --radius: 24px
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   color: var(--ink);
   background: var(--paper);
   line-height: 1.55
}

a {
   color: inherit;
   text-decoration: none
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 20;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 16px clamp(20px, 5vw, 72px);
   background: rgba(247, 250, 249, .88);
   backdrop-filter: blur(14px);
   border-bottom: 1px solid rgba(10, 34, 52, .08)
}

.brand img {
   height: 60px;
   width: auto;
   display: block
}

.site-header nav {
   display: flex;
   align-items: center;
   gap: 24px;
   font-weight: 700;
   font-size: .93rem
}

.site-header nav a {
   color: #24394a
}

.nav-cta {
   background: var(--navy);
   color: white !important;
   padding: 11px 18px;
   border-radius: 999px
}

.hero {
   position: relative;
   min-height: 720px;
   display: grid;
   grid-template-columns: 1fr minmax(260px, 380px);
   align-items: end;
   gap: 32px;
   padding: 110px clamp(24px, 6vw, 88px) 72px;
   overflow: hidden;
   color: white;
   background: linear-gradient(135deg, #061d2e, #0a4160)
}

.hero-bg {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 75% 20%, rgba(23, 182, 215, .35), transparent 28%), radial-gradient(circle at 12% 70%, rgba(255, 123, 22, .25), transparent 26%), linear-gradient(120deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><path d="M0 610 C150 540 260 560 390 490 C530 410 660 450 770 360 C900 250 1010 290 1200 190 L1200 800 L0 800Z" fill="%231a7d45" opacity=".55"/><path d="M0 690 C170 640 320 690 520 590 C720 500 860 570 1200 390 L1200 800 L0 800Z" fill="%230b3145" opacity=".7"/><g stroke="%23ffffff" opacity=".14" stroke-width="2"><path d="M160 680H1020"/><path d="M210 640H1120"/><path d="M790 350l190-100"/><path d="M850 330l150-80"/></g></svg>') center/cover no-repeat
}

.hero-content,
.hero-card {
   position: relative
}

.eyebrow,
.section-kicker {
   text-transform: uppercase;
   letter-spacing: .18em;
   font-weight: 900;
   color: var(--lime);
   font-size: .82rem
}

.hero h1 {
   font-size: clamp(3rem, 7vw, 6.5rem);
   line-height: .95;
   margin: 14px 0 24px;
   letter-spacing: -.06em;
   max-width: 980px
}

.lead {
   font-size: clamp(1.1rem, 2vw, 1.45rem);
   max-width: 820px;
   color: #dceff2
}

.hero-actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   margin-top: 34px
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 14px 22px;
   border-radius: 999px;
   font-weight: 900
}

.primary {
   background: linear-gradient(135deg, var(--orange), #ff9f35);
   color: white
}

.secondary {
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .28);
   color: white
}

.hero-card {
   align-self: end;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .25);
   border-radius: var(--radius);
   padding: 28px;
   box-shadow: var(--shadow);
   backdrop-filter: blur(12px)
}

.hero-card span {
   display: block;
   color: #bfe8ef;
   text-transform: uppercase;
   letter-spacing: .15em;
   font-weight: 800
}

.hero-card strong {
   display: block;
   font-size: 3.4rem;
   line-height: 1;
   margin: 10px 0
}

.hero-card small {
   color: #dceff2
}

.section {
   padding: 86px clamp(24px, 6vw, 88px)
}

.intro {
   max-width: 1180px;
   margin: auto
}

.intro h2,
.section h2 {
   font-size: clamp(2rem, 4vw, 4rem);
   line-height: 1.02;
   letter-spacing: -.045em;
   margin: .2em 0 .4em
}

.intro p,
.split p,
.contact p {
   font-size: 1.15rem;
   color: #526371;
   max-width: 900px
}

.metrics {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   margin-top: 36px
}

.metrics div,
.cards article,
.process-card,
.contact-form {
   background: white;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 24px;
   box-shadow: 0 10px 28px rgba(10, 34, 52, .06)
}

.metrics strong {
   display: block;
   font-size: 1.8rem;
   color: var(--navy)
}

.metrics span {
   color: var(--muted)
}

.split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   align-items: center;
   background: #fff
}

.process-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 14px
}

.process-list li {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   padding: 18px;
   border-radius: 18px;
   background: #f7fbfb;
   border: 1px solid var(--line)
}

.process-list span {
   flex: 0 0 34px;
   height: 34px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: white;
   background: linear-gradient(135deg, var(--blue), var(--green));
   font-weight: 900
}

.process-list small {
   display: block;
   color: var(--muted);
   margin-top: 4px
}

.process-flow {
    display: flex;
    justify-content: center;
}

.project {
   background: linear-gradient(180deg, #f7faf9, #eaf4f1)
}

.cards {
   display: grid;
   gap: 18px;
   margin-top: 30px
}

.three {
   grid-template-columns: repeat(3, 1fr)
}

.four {
   grid-template-columns: repeat(4, 1fr)
}

.cards h3 {
   margin: 0 0 10px;
   font-size: 1.25rem
}

.cards p {
   margin: 0;
   color: var(--muted)
}

.locations {
   background: white
}

.location-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: center
}

.map-panel {
   min-height: 430px;
   border-radius: 32px;
   background: linear-gradient(135deg, #e5f4e9, #d7eef8);
   position: relative;
   overflow: hidden;
   border: 1px solid var(--line);
   box-shadow: var(--shadow)
}

.map-panel:before {
   content: "";
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(110deg, transparent 0 26px, rgba(10, 34, 52, .05) 27px 29px), radial-gradient(circle at 30% 55%, rgba(59, 170, 53, .28), transparent 25%), radial-gradient(circle at 70% 30%, rgba(8, 120, 201, .24), transparent 28%)
}

.dot {
   position: absolute;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: var(--orange);
   box-shadow: 0 0 0 8px rgba(255, 123, 22, .16)
}

.dot span {
   position: absolute;
   left: 28px;
   top: -8px;
   white-space: nowrap;
   background: white;
   padding: 6px 10px;
   border-radius: 999px;
   font-weight: 800;
   font-size: .85rem;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .08)
}

.hunter {
   left: 42%;
   top: 45%
}

.port {
   left: 62%;
   top: 52%;
   background: var(--blue);
   box-shadow: 0 0 0 8px rgba(8, 120, 201, .16)
}

.airport {
   left: 50%;
   top: 26%;
   background: var(--green);
   box-shadow: 0 0 0 8px rgba(59, 170, 53, .16)
}

.line {
   position: absolute;
   height: 6px;
   border-radius: 999px;
   opacity: .75
}

.road {
   left: 20%;
   right: 8%;
   top: 62%;
   background: var(--orange);
   transform: rotate(-8deg)
}

.rail {
   left: 12%;
   right: 18%;
   top: 38%;
   background: var(--navy);
   transform: rotate(12deg)
}

.ticks {
   list-style: none;
   margin: 20px 0 0;
   padding: 0;
   display: grid;
   gap: 10px
}

.ticks li:before {
   content: "✓";
   color: var(--green);
   font-weight: 900;
   margin-right: 10px
}

.investors {
   background: #062438;
   color: white
}

.investors .section-kicker {
   color: var(--lime)
}

.investors h2 {
   color: white
}

.investors .cards article {
   background: rgba(255, 255, 255, .07);
   border-color: rgba(255, 255, 255, .12)
}

.investors .cards p {
   color: #c7d9df
}

.contact {
   display: grid;
   grid-template-columns: 1fr minmax(320px, 520px);
   gap: 42px;
   align-items: start
}

.contact-form {
   display: grid;
   gap: 14px
}

.contact-form label {
   font-weight: 800;
   color: #20384a
}

.contact-form input,
.contact-form textarea {
   width: 100%;
   margin-top: 7px;
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 13px 14px;
   font: inherit
}

.contact-form button {
   border: 0;
   border-radius: 999px;
   padding: 15px 20px;
   font-weight: 900;
   background: var(--green);
   color: white;
   cursor: pointer
}

.contact-form small {
   color: var(--muted)
}

footer {
   display: flex;
   justify-content: space-between;
   gap: 34px;
   padding: 36px clamp(24px, 6vw, 88px);
   background: #031a29;
   color: #d9e7eb
}

footer img {
   height: 54px;
   background: white;
   border-radius: 12px;
   padding: 4px
}

footer a {
   color: #fff
}

.fineprint {
   max-width: 680px;
   color: #99aab3;
   font-size: .9rem
}

@media(max-width:900px) {
   .site-header {
      position: relative;
      align-items: flex-start
   }

   .site-header nav {
      display: none
   }

   .hero,
   .split,
   .location-grid,
   .contact {
      grid-template-columns: 1fr
   }

   .hero {
      min-height: auto;
      padding-top: 70px
   }

   .metrics,
   .three,
   .four {
      grid-template-columns: 1fr
   }

   .hero-card strong {
      font-size: 2.6rem
   }

   footer {
      display: block
   }

   .brand img {
      height: 48px
   }
   
   .process-flow img {
       width: 50%;      /* resize to of the container width */
       height: auto;
   }
}