:root {
  --bg: #07110d;
  --bg-soft: #0b1812;
  --panel: #102019;

  --green: #15804e;
  --green-light: #39b979;
  --green-dark: #0d5935;

  --gold: #d9aa45;
  --gold-light: #efc66a;

  --cream: #f4f1e9;
  --paper: #fbfaf7;

  --ink: #102019;
  --muted: #657169;

  --white: #ffffff;

  --line: #dfe5df;
  --dark-line: rgba(255,255,255,.11);

  --radius: 18px;

  --shadow:
    0 24px 70px rgba(5, 20, 12, .15);

  --container: 1220px;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.65;
}


img {
  display: block;

  width: 100%;

  object-fit: cover;
}


a {
  color: inherit;

  text-decoration: none;
}


button,
input,
select,
textarea {
  font: inherit;
}


button {
  cursor: pointer;
}


.container {
  width:
    min(
      var(--container),
      calc(100% - 40px)
    );

  margin-inline: auto;
}


.skip-link {
  position: fixed;

  left: 10px;

  top: -80px;

  z-index: 999;

  padding: 10px 15px;

  background: white;
}


.skip-link:focus {
  top: 10px;
}



/* ============================================================
   TOP TRADE BAR
============================================================ */

.trade-bar {
  background: #04100b;

  color: #cfddd5;

  border-bottom:
    1px solid rgba(255,255,255,.08);

  font-size: .76rem;
}


.trade-inner {
  min-height: 38px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.trade-main {
  display: flex;

  align-items: center;

  gap: 10px;

  letter-spacing: .03em;
}


.trade-dot {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--green-light);

  box-shadow:
    0 0 0 5px rgba(57,185,121,.11);
}


.trade-divider {
  width: 1px;

  height: 13px;

  background: rgba(255,255,255,.2);
}


.trade-links {
  display: flex;

  gap: 22px;
}


.trade-links a:hover {
  color: var(--gold-light);
}



/* ============================================================
   HEADER
============================================================ */

.site-header {
  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(251,250,247,.95);

  backdrop-filter: blur(15px);

  border-bottom:
    1px solid rgba(19,41,28,.09);
}


.nav-wrap {
  min-height: 82px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}


.brand {
  display: inline-flex;

  align-items: center;

  gap: 13px;
}


.brand-mark {
  width: 49px;

  height: 49px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      var(--green),
      var(--green-dark)
    );

  color: white;

  font-size: 1.3rem;

  font-weight: 900;

  box-shadow:
    0 9px 22px rgba(19,111,68,.18);
}


.brand-copy strong,
.brand-copy small {
  display: block;
}


.brand-copy strong {
  color: var(--ink);

  font-size: 1rem;

  font-weight: 900;

  letter-spacing: .12em;
}


.brand-copy small {
  margin-top: 2px;

  color: var(--muted);

  font-size: .66rem;

  letter-spacing: .025em;
}


.main-nav {
  display: flex;

  align-items: center;

  gap: 28px;

  color: #38473e;

  font-size: .88rem;

  font-weight: 700;
}


.main-nav > a:hover {
  color: var(--green);
}


.nav-cta {
  padding: 11px 18px;

  border-radius: 9px;

  background: var(--green);

  color: white !important;
}


.nav-cta:hover {
  background: var(--green-dark);
}


.menu-toggle {
  display: none;

  padding: 8px;

  background: transparent;

  border: 0;
}


.menu-toggle span {
  display: block;

  width: 26px;

  height: 2px;

  margin: 5px;

  background: var(--ink);
}



/* ============================================================
   HERO
============================================================ */

.hero {
  position: relative;

  min-height: 720px;

  display: grid;

  align-items: center;

  overflow: hidden;

  background:
    url("assets/images/warehouse-hero-v2.webp")
    center / cover
    no-repeat;

  color: white;
}


.hero-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3,14,9,.97) 0%,
      rgba(3,19,11,.90) 48%,
      rgba(5,20,12,.54) 100%
    );
}


.hero-grid {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, .65fr);

  align-items: end;

  gap: 80px;

  padding-block: 115px;
}


.hero-tag {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 22px;

  color: #dfb955;

  font-size: .76rem;

  font-weight: 900;

  letter-spacing: .15em;

  text-transform: uppercase;
}


.hero-tag span {
  width: 26px;

  height: 2px;

  background: var(--gold);
}


.hero h1 {
  max-width: 850px;

  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.4rem,
      6.6vw,
      6.7rem
    );

  font-weight: 500;

  line-height: .93;

  letter-spacing: -.055em;
}


.hero h1 span {
  color: #55c98a;
}


.hero-text {
  max-width: 720px;

  margin:
    30px
    0
    35px;

  color: #d9e5dd;

  font-size: 1.13rem;
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}


.btn {
  min-height: 51px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0
    23px;

  border:
    1px solid transparent;

  border-radius: 10px;

  font-weight: 850;

  transition:
    .2s ease;
}


.btn:hover {
  transform:
    translateY(-2px);
}


.btn-primary {
  background: var(--gold);

  color: #101b14;
}


.btn-primary:hover {
  background: var(--gold-light);
}


.btn-outline-light {
  border-color:
    rgba(255,255,255,.55);

  color: white;
}


.btn-outline-light:hover {
  background: white;

  color: var(--ink);
}


.btn-dark {
  background: var(--ink);

  color: white;
}


.btn-light {
  background: white;

  color: var(--green-dark);
}


.btn-full {
  width: 100%;

  border: 0;
}


.hero-proof {
  display: flex;

  flex-wrap: wrap;

  gap: 40px;

  margin-top: 48px;

  padding-top: 30px;

  border-top:
    1px solid rgba(255,255,255,.15);
}


.hero-proof strong,
.hero-proof span {
  display: block;
}


.hero-proof strong {
  color: white;

  font-family:
    Georgia,
    serif;

  font-size: 1.55rem;
}


.hero-proof span {
  margin-top: 2px;

  color: #aebeb4;

  font-size: .76rem;
}


.hero-card {
  padding: 34px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: var(--radius);

  background:
    rgba(8,29,18,.86);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 26px 70px rgba(0,0,0,.28);
}


.card-kicker {
  margin:
    0
    0
    10px;

  color: var(--gold-light);

  font-size: .7rem;

  font-weight: 900;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.hero-card h2 {
  margin:
    0
    0
    15px;

  font-family:
    Georgia,
    serif;

  font-size: 2rem;

  line-height: 1.13;
}


.hero-card > p {
  color: #b9c8bf;

  font-size: .91rem;
}


.hero-card-list {
  display: grid;

  gap: 10px;

  margin:
    25px
    0;

  color: #dde7e0;

  font-size: .84rem;
}


.hero-card > a {
  color: var(--gold-light);

  font-weight: 850;
}



/* ============================================================
   MARKET STRIP
============================================================ */

.market-strip {
  background: var(--green-dark);

  color: white;
}


.market-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);
}


.market-grid > div {
  padding: 27px;

  border-right:
    1px solid rgba(255,255,255,.12);
}


.market-grid > div:first-child {
  padding-left: 0;
}


.market-grid small,
.market-grid strong {
  display: block;
}


.market-grid small {
  color: #9fc9b1;

  font-size: .63rem;

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.market-grid strong {
  margin-top: 4px;

  font-family: Georgia,serif;

  font-size: 1.22rem;
}



/* ============================================================
   COMMON
============================================================ */

.section {
  padding:
    110px
    0;
}


.eyebrow {
  margin:
    0
    0
    15px;

  color: var(--green);

  font-size: .72rem;

  font-weight: 900;

  letter-spacing: .18em;

  text-transform: uppercase;
}


.eyebrow.light {
  color: var(--gold-light);
}


.section-heading {
  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 60px;

  margin-bottom: 50px;
}


.section-heading h2,
.company-copy h2,
.manufacturing-heading h2,
.africa-copy h2,
.rfq-copy h2,
.contact-heading h2 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.5rem,
      4.5vw,
      4.4rem
    );

  line-height: 1.03;

  letter-spacing: -.035em;
}


.section-heading h2 {
  max-width: 760px;
}


.section-heading > p {
  max-width: 410px;

  margin: 0;

  color: var(--muted);
}



/* ============================================================
   COMPANY
============================================================ */

.company {
  background: var(--paper);
}


.company-grid {
  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  align-items: center;

  gap: 90px;
}


.company-image {
  position: relative;
}


.company-image img {
  height: 610px;

  border-radius: var(--radius);
}


.china-badge {
  position: absolute;

  right: -30px;

  bottom: 35px;

  width: 250px;

  padding: 25px;

  border-radius: 14px;

  background: var(--gold);

  box-shadow: var(--shadow);
}


.china-badge small,
.china-badge strong,
.china-badge span {
  display: block;
}


.china-badge small {
  font-size: .65rem;

  font-weight: 850;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.china-badge strong {
  margin:
    3px
    0;

  font-family: Georgia,serif;

  font-size: 2rem;
}


.china-badge span {
  font-size: .79rem;
}


.company-copy > p {
  color: var(--muted);
}


.company-points {
  margin-top: 35px;
}


.company-points > div {
  display: grid;

  grid-template-columns:
    45px
    1fr;

  gap: 15px;

  padding:
    18px
    0;

  border-top:
    1px solid var(--line);
}


.company-points > div > span {
  color: var(--gold);

  font-size: .72rem;

  font-weight: 900;
}


.company-points strong {
  font-size: 1rem;
}


.company-points p {
  margin:
    3px
    0
    0;

  color: var(--muted);

  font-size: .87rem;
}



/* ============================================================
   PRODUCTS
============================================================ */

.products {
  background: var(--cream);
}


.product-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 24px;
}


.product-card {
  overflow: hidden;

  border-radius: 15px;

  background: white;

  box-shadow:
    0 10px 35px rgba(21,37,27,.06);

  transition: .25s ease;
}


.product-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow);
}


.product-image {
  position: relative;
}


.product-image img {
  height: 245px;
}


.product-image > span {
  position: absolute;

  top: 17px;

  left: 17px;

  width: 38px;

  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(5,22,13,.86);

  color: var(--gold-light);

  font-size: .68rem;

  font-weight: 900;
}


.product-body {
  padding: 27px;
}


.product-body small {
  color: var(--green);

  font-size: .62rem;

  font-weight: 900;

  letter-spacing: .12em;
}


.product-body h3 {
  margin:
    7px
    0
    10px;

  font-family: Georgia,serif;

  font-size: 1.45rem;

  line-height: 1.2;
}


.product-body p {
  min-height: 80px;

  color: var(--muted);

  font-size: .88rem;
}


.product-enquire {
  padding: 0;

  border: 0;

  background: transparent;

  color: var(--green);

  font-weight: 850;

  text-align: left;
}



/* ============================================================
   MANUFACTURING
============================================================ */

.manufacturing {
  background: var(--bg);

  color: white;
}


.manufacturing-heading {
  max-width: 850px;

  margin-bottom: 55px;
}


.manufacturing-heading > p:last-child {
  max-width: 680px;

  color: #aebeb4;
}


.capability-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 18px;
}


.capability {
  min-height: 260px;

  padding: 30px;

  border:
    1px solid var(--dark-line);

  border-radius: 15px;

  background:
    rgba(255,255,255,.025);
}


.capability > span {
  color: var(--gold);

  font-weight: 900;
}


.capability h3 {
  margin:
    45px
    0
    12px;

  font-family: Georgia,serif;

  font-size: 1.45rem;
}


.capability p {
  color: #aebeb4;

  font-size: .88rem;
}



/* ============================================================
   AFRICA
============================================================ */

.africa {
  overflow: hidden;

  background: white;
}


.africa-grid {
  display: grid;

  grid-template-columns:
    .9fr
    1.1fr;

  align-items: center;

  gap: 90px;
}


.africa-copy > p {
  color: var(--muted);
}


.africa-stat {
  display: flex;

  align-items: center;

  gap: 20px;

  margin:
    35px
    0;
}


.africa-stat strong {
  color: var(--green);

  font-family: Georgia,serif;

  font-size: 5rem;

  line-height: 1;
}


.africa-stat span {
  max-width: 200px;

  font-weight: 700;
}


.network-card {
  padding: 50px;

  border-radius: 22px;

  background: var(--bg);

  box-shadow:
    0 30px 80px rgba(5,19,11,.16);
}


.network-globe {
  position: relative;

  width:
    min(
      440px,
      100%
    );

  aspect-ratio: 1;

  margin: auto;

  display: grid;

  place-items: center;

  border:
    1px solid rgba(255,255,255,.1);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #17412b 0%,
      #0a2115 45%,
      #05140d 72%
    );
}


.globe-ring {
  position: absolute;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 50%;
}


.ring-one {
  width: 70%;

  height: 70%;
}


.ring-two {
  width: 42%;

  height: 42%;
}


.network-center {
  width: 130px;

  height: 130px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--green);

  color: white;

  font-weight: 900;

  letter-spacing: .14em;

  box-shadow:
    0 0 50px rgba(46,182,111,.25);
}


.network-node {
  position: absolute;

  width: 12px;

  height: 12px;

  border:
    3px solid var(--gold);

  border-radius: 50%;

  background: white;

  box-shadow:
    0 0 18px rgba(217,170,69,.55);
}


.n1 { top: 15%; left: 47%; }
.n2 { top: 30%; right: 12%; }
.n3 { bottom: 22%; right: 20%; }
.n4 { bottom: 12%; left: 38%; }
.n5 { top: 40%; left: 11%; }
.n6 { top: 20%; left: 23%; }


.network-footer {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 30px;

  color: #8ca096;

  font-size: .75rem;
}


.network-footer strong {
  display: block;

  color: white;

  font-family: Georgia,serif;

  font-size: 1.2rem;
}



/* ============================================================
   RFQ
============================================================ */

.rfq {
  background: var(--green-dark);

  color: white;
}


.rfq-grid {
  display: grid;

  grid-template-columns:
    .8fr
    1.2fr;

  align-items: start;

  gap: 80px;
}


.rfq-copy > p {
  color: #c0d6c8;
}


.rfq-guide {
  display: grid;

  gap: 12px;

  margin-top: 35px;
}


.rfq-guide div {
  display: flex;

  align-items: center;

  gap: 13px;

  font-size: .88rem;
}


.rfq-guide span {
  width: 31px;

  height: 31px;

  display: grid;

  place-items: center;

  border:
    1px solid rgba(255,255,255,.2);

  border-radius: 50%;

  color: var(--gold-light);

  font-size: .64rem;
}


.rfq-form {
  padding: 35px;

  border-radius: var(--radius);

  background: white;

  color: var(--ink);

  box-shadow: var(--shadow);
}


.form-row {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 17px;
}


.rfq-form label {
  display: block;

  margin-bottom: 17px;

  font-size: .8rem;

  font-weight: 750;
}


.rfq-form input,
.rfq-form select,
.rfq-form textarea {
  width: 100%;

  margin-top: 7px;

  padding:
    13px
    14px;

  border:
    1px solid #ccd4ce;

  border-radius: 9px;

  background: #fafcfa;

  color: var(--ink);

  outline: none;
}


.rfq-form input:focus,
.rfq-form select:focus,
.rfq-form textarea:focus {
  border-color: var(--green);

  box-shadow:
    0 0 0 3px rgba(21,128,78,.10);
}


.form-note {
  margin:
    10px
    0
    0;

  color: var(--muted);

  font-size: .72rem;

  text-align: center;
}



/* ============================================================
   CONTACT
============================================================ */

.contact {
  background: var(--paper);
}


.contact-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 90px;
}


.contact-details > div {
  padding:
    21px
    0;

  border-bottom:
    1px solid var(--line);
}


.contact-details small,
.contact-details strong,
.contact-details span {
  display: block;
}


.contact-details small {
  color: var(--green);

  font-size: .64rem;

  font-weight: 900;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.contact-details strong {
  margin-top: 5px;

  font-size: 1.05rem;
}


.contact-details span {
  margin-top: 2px;

  color: var(--muted);

  font-size: .83rem;
}



/* ============================================================
   CTA + FOOTER
============================================================ */

.cta-band {
  padding:
    55px
    0;

  background: var(--gold);
}


.cta-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}


.cta-inner p {
  margin: 0;

  font-weight: 800;
}


.cta-inner h2 {
  margin:
    4px
    0
    0;

  font-family: Georgia,serif;

  font-size:
    clamp(
      2rem,
      3.5vw,
      3rem
    );
}


.site-footer {
  padding:
    80px
    0
    25px;

  background: #040d08;

  color: #adbbb2;
}


.footer-grid {
  display: grid;

  grid-template-columns:
    1.5fr
    .8fr
    .9fr
    1fr;

  gap: 50px;
}


.footer-brand .brand-copy strong {
  color: white;
}


.footer-company > p {
  max-width: 320px;

  font-size: .85rem;
}


.footer-grid h3 {
  color: white;

  font-family: Georgia,serif;
}


.footer-grid a {
  display: block;

  margin:
    8px
    0;

  font-size: .84rem;
}


.footer-grid a:hover {
  color: var(--gold-light);
}


.footer-grid p {
  font-size: .84rem;
}


.footer-bottom {
  display: flex;

  justify-content: space-between;

  margin-top: 55px;

  padding-top: 22px;

  border-top:
    1px solid rgba(255,255,255,.1);

  font-size: .73rem;
}


.whatsapp-float {
  position: fixed;

  right: 22px;

  bottom: 22px;

  z-index: 90;

  width: 58px;

  height: 58px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #25d366;

  color: white;

  font-weight: 900;

  box-shadow:
    0 12px 32px rgba(0,0,0,.25);
}



/* ============================================================
   REVEAL
============================================================ */

.reveal {
  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .65s ease,
    transform .65s ease;
}


.reveal.visible {
  opacity: 1;

  transform: none;
}



/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

  .menu-toggle {
    display: block;
  }


  .main-nav {
    display: none;

    position: absolute;

    top: 82px;

    left: 0;

    right: 0;

    padding: 22px;

    background: var(--paper);

    border-bottom:
      1px solid var(--line);

    flex-direction: column;

    align-items: stretch;
  }


  .main-nav.open {
    display: flex;
  }


  .hero-grid,
  .company-grid,
  .africa-grid,
  .rfq-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }


  .hero-grid {
    gap: 40px;

    padding-block: 90px;
  }


  .hero-card {
    max-width: 560px;
  }


  .market-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .product-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .capability-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .company-grid,
  .africa-grid,
  .rfq-grid,
  .contact-grid {
    gap: 55px;
  }


  .company-image img {
    height: 500px;
  }


  .china-badge {
    right: 20px;
  }


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

}



/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {

  .container {
    width:
      min(
        100% - 28px,
        var(--container)
      );
  }


  .trade-main span:last-child,
  .trade-links a:first-child {
    display: none;
  }


  .trade-inner {
    justify-content: space-between;
  }


  .brand-copy small {
    max-width: 200px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
  }


  .hero {
    min-height: auto;
  }


  .hero-grid {
    padding-block: 65px;
  }


  .hero h1 {
    font-size: 3.35rem;
  }


  .hero-text {
    font-size: 1rem;
  }


  .hero-actions {
    display: grid;
  }


  .hero-actions .btn {
    width: 100%;
  }


  .hero-proof {
    display: grid;

    grid-template-columns:
      1fr
      1fr;

    gap: 22px;
  }


  .hero-card {
    padding: 26px;
  }


  .market-grid,
  .product-grid,
  .capability-grid,
  .form-row,
  .footer-grid {
    grid-template-columns: 1fr;
  }


  .market-grid > div,
  .market-grid > div:first-child {
    padding:
      18px
      0;

    border-right: 0;

    border-bottom:
      1px solid rgba(255,255,255,.12);
  }


  .section {
    padding:
      78px
      0;
  }


  .section-heading {
    display: block;
  }


  .section-heading > p {
    margin-top: 18px;
  }


  .company-image img {
    height: 400px;
  }


  .china-badge {
    position: relative;

    right: auto;

    bottom: auto;

    width:
      calc(100% - 28px);

    margin:
      -45px
      auto
      0;
  }


  .product-body p {
    min-height: auto;
  }


  .network-card {
    padding: 25px;
  }


  .network-center {
    width: 105px;

    height: 105px;

    font-size: .8rem;
  }


  .rfq-form {
    padding: 23px;
  }


  .cta-inner,
  .footer-bottom {
    flex-direction: column;

    align-items: stretch;
  }


  .footer-bottom {
    gap: 4px;
  }

}