/* =========================================================
   SIVE INFRASTRUCTURE
   CORPORATE WEBSITE
   DARK NAVY BRAND SYSTEM
   ========================================================= */

:root {

  --navy: #071A3D;
  --navy-deep: #04132E;
  --navy-mid: #0A2452;
  --navy-soft: #102D5F;

  --gold: #B99043;
  --gold-light: #C9A45A;

  --silver: #D9DDE3;
  --graphite: #555C66;
  --ink: #101820;
  --paper: #F8F7F3;
  --white: #FFFFFF;
  --line: #E5E7EB;

  --max: 1180px;

}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  color: var(--ink);

  background: var(--white);

  line-height: 1.65;

}

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

img {

  display: block;

  max-width: 100%;

}

.shell {

  width:
    min(
      var(--max),
      calc(100% - 48px)
    );

  margin-inline: auto;

}

/* NAVIGATION */

.nav-wrap {

  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid
    rgba(
      7,
      26,
      61,
      0.1
    );

}

.nav {

  min-height: 122px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}

.brand {

  display: flex;

  align-items: center;

  flex-shrink: 0;

}

.brand-panel {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 190px;

  height: 105px;

  padding:
    9px
    14px;

  background: var(--navy);

  overflow: hidden;

}

.brand-logo {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

}

.nav-links {

  display: flex;

  align-items: center;

  gap: 30px;

  font-size: 13px;

  font-weight: 600;

}

.nav-links a {

  position: relative;

}

.nav-links a:not(.nav-cta)::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -7px;

  height: 1px;

  background: var(--gold);

  transition:
    right 0.3s ease;

}

.nav-links a:not(.nav-cta):hover::after {

  right: 0;

}

.nav-cta {

  padding:
    14px
    19px;

  border:
    1px solid
    var(--navy);

  transition:
    background 0.25s ease,
    color 0.25s ease;

}

.nav-cta:hover {

  background: var(--navy);

  color: var(--white);

}

.menu-btn {

  display: none;

  padding:
    10px
    14px;

  background: none;

  border:
    1px solid
    var(--navy);

  color: var(--navy);

  font: inherit;

  cursor: pointer;

}

/* HERO */

.hero {

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 77% 39%,
      rgba(185, 144, 67, 0.08),
      transparent 34%
    ),

    linear-gradient(
      135deg,
      #04132E 0%,
      #071A3D 58%,
      #061735 100%
    );

  color: var(--white);

}

.hero-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(370px, 0.92fr);

  align-items: center;

  gap: 72px;

  min-height: 790px;

  padding:
    90px
    0;

}

.hero-copy {

  position: relative;

  z-index: 3;

}

.eyebrow {

  margin: 0;

  color: var(--gold);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.24em;

  text-transform: uppercase;

}

.eyebrow.dark {

  color: var(--gold);

}

.hero h1 {

  margin:
    28px
    0
    35px;

  max-width: 760px;

  color:
    rgba(
      255,
      255,
      255,
      0.92
    );

  font-size:
    clamp(
      58px,
      6.5vw,
      96px
    );

  font-weight: 400;

  line-height: 0.96;

  letter-spacing: -0.055em;

}

.hero h1 strong {

  color: var(--white);

  font-weight: 700;

}

.hero-lead {

  margin:
    0
    0
    20px;

  max-width: 720px;

  color: var(--gold-light);

  font-size: 20px;

  font-weight: 700;

}

.hero-text {

  max-width: 680px;

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.84
    );

  font-size: 17px;

}

.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 15px;

  margin-top: 38px;

}

.hero-mark {

  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-width: 0;

  padding:
    30px
    20px;

}

.hero-svg {

  display: block;

  width:
    min(
      100%,
      530px
    );

  max-width: 100%;

  height: auto;

  margin-inline: auto;

  object-fit: contain;

}

.hero-tagline {

  margin:
    18px
    0
    0;

  color:
    rgba(
      201,
      164,
      90,
      0.94
    );

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.31em;

  text-align: center;

  text-transform: uppercase;

}

.hero::before {

  content: "";

  position: absolute;

  width: 520px;

  height: 520px;

  right: -260px;

  top: -170px;

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

  transform:
    rotate(45deg);

}

.hero::after {

  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

  left: 64%;

  bottom: -210px;

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

  transform:
    rotate(45deg);

}

.hero-rule {

  position: relative;

  z-index: 3;

  height: 3px;

  background:

    linear-gradient(
      90deg,
      transparent 0%,
      var(--gold) 30%,
      var(--silver) 70%,
      transparent 100%
    );

}

/* BUTTONS */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    15px
    20px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;

}

.btn-gold {

  background: var(--gold);

  color: var(--navy-deep);

}

.btn-gold:hover {

  background: var(--gold-light);

  transform:
    translateY(-2px);

}

.btn-ghost {

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

  color: var(--white);

}

.btn-ghost:hover {

  border-color: var(--white);

}

.full {
  width: 100%;
}

/* GENERIC SECTIONS */

.section {

  padding:
    110px
    0;

}

.statement {

  background: var(--paper);

}

.statement-grid,
.split,
.contact-grid {

  display: grid;

  grid-template-columns:
    0.7fr
    1.3fr;

  gap: 90px;

}

.statement h2,
.section-head h2,
.split h2,
.contact h2 {

  margin:
    12px
    0
    24px;

  color: var(--navy);

  font-size:
    clamp(
      38px,
      5vw,
      62px
    );

  line-height: 1.08;

  letter-spacing: -0.04em;

}

.statement p,
.split p,
.network p {

  color: #4B5563;

  font-size: 16px;

}

.section-head {

  max-width: 820px;

  margin-bottom: 58px;

}

/* DELIVERY PLATFORMS */

.platform-section {

  background: var(--white);

}

.platform-grid {

  display: grid;

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

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

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

}

.platform-card {

  position: relative;

  min-height: 300px;

  padding: 38px;

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

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

  transition:
    background 0.3s ease;

}

.platform-card:hover {

  background: #FBFAF7;

}

.platform-card.wide {

  grid-column:
    span 2;

  min-height: 240px;

}

.card-no {

  color: var(--gold);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.16em;

}

.platform-card h3 {

  margin:
    36px
    0
    2px;

  color: var(--navy);

  font-size: 28px;

}

.platform-card .sub {

  color: var(--gold);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.13em;

  text-transform: uppercase;

}

.platform-card p:last-child {

  max-width: 540px;

  color: #5E6673;

}

.foundation-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding:
    24px
    30px;

  background: var(--navy);

  color: var(--white);

}

.foundation-bar strong {

  font-size: 13px;

  letter-spacing: 0.28em;

}

.foundation-bar span {

  color: var(--gold-light);

  font-size: 11px;

  letter-spacing: 0.2em;

}

/* PROCUREMENT */

.procurement {

  background:
    linear-gradient(
      135deg,
      #04132E 0%,
      #061735 100%
    );

  color: var(--white);

}

.procurement h2 {

  color: var(--white);

}

.procurement p {

  color: #D1D8E4;

}

.text-link {

  display: inline-block;

  margin-top: 18px;

  color: var(--gold-light);

  font-size: 13px;

  font-weight: 700;

}

.cycle {

  display: grid;

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

  gap: 1px;

  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

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

}

.cycle-item {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 25px;

  background:
    rgba(
      7,
      26,
      61,
      0.72
    );

}

.cycle-item b {

  color: var(--gold);

  font-size: 12px;

}

.cycle-item span {

  font-weight: 600;

}

/* HOW WE WORK */

.how {

  background: var(--paper);

}

.steps {

  display: grid;

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

  border-top:
    1px solid
    #CFD3D8;

  border-bottom:
    1px solid
    #CFD3D8;

}

.step {

  min-height: 230px;

  padding:
    34px
    22px;

  border-right:
    1px solid
    #CFD3D8;

}

.step:last-child {

  border-right: 0;

}

.step span {

  color: var(--gold);

  font-size: 11px;

  font-weight: 700;

}

.step h3 {

  margin:
    38px
    0
    8px;

  color: var(--navy);

  font-size: 25px;

}

.step p {

  color: #5E6673;

  font-size: 13px;

}

/* DELIVERY NETWORK */

.network {

  background: var(--white);

}

.network-grid {

  display: grid;

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

  gap: 14px;

  margin-top: 30px;

}

.network-grid span {

  padding:
    13px
    0;

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

  color: var(--navy);

  font-size: 13px;

  font-weight: 600;

}

/* WHY SIVE */

.why {

  background: #FCFCFB;

}

.why-grid {

  display: grid;

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

  gap: 18px;

}

.why-grid article {

  padding:
    28px
    4px
    10px;

  border-top:
    2px solid
    var(--navy);

}

.why-grid b {

  color: var(--gold);

}

.why-grid h3 {

  margin:
    22px
    0
    10px;

  color: var(--navy);

  font-size: 17px;

}

.why-grid p {

  color: #626A75;

  font-size: 13px;

}

/* MARKETS */

.markets {

  background:
    linear-gradient(
      135deg,
      #04132E,
      #071A3D
    );

  color: var(--white);

}

.markets h2 {

  color: var(--white);

}

.market-cloud {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}

.market-cloud span {

  padding:
    15px
    19px;

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

  color: #EDF1F7;

  font-size: 13px;

}

.market-cloud span:nth-child(3n) {

  border-color:
    rgba(
      185,
      144,
      67,
      0.65
    );

  color: #F0D7A1;

}

/* CONTACT */

.contact {

  background: var(--paper);

}

.contact-card {

  padding: 38px;

  background: var(--white);

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

}

.contact-card p {

  display: grid;

  grid-template-columns:
    110px
    1fr;

  margin: 0;

  padding:
    14px
    0;

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

  font-size: 14px;

}

.contact-card p span {

  color: #818793;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}

.contact-card p a {

  transition:
    color 0.2s ease;

}

.contact-card p a:hover {

  color: var(--gold);

}

.contact-card .btn {

  margin-top: 26px;

}

/* FOOTER */

footer {

  padding:
    65px
    0
    24px;

  background: var(--navy-deep);

  color: #CBD2DC;

}

.footer-grid {

  display: flex;

  justify-content: space-between;

  gap: 40px;

}

.footer-grid strong {

  color: var(--white);

  font-size: 13px;

  letter-spacing: 0.1em;

}

.footer-grid p {

  margin:
    8px
    0;

  font-size: 12px;

}

.legal {

  margin-top: 40px;

  padding-top: 20px;

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

  color: #8390A8;

  font-size: 10px;

}

/* TABLET */

@media (max-width: 1000px) {

  .hero-grid {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.8fr);

    gap: 35px;

    min-height: 700px;

  }

  .hero-svg {

    width:
      min(
        100%,
        430px
      );

  }

  .why-grid {

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

  }

}

/* MOBILE NAV */

@media (max-width: 900px) {

  .nav {

    min-height: 92px;

  }

  .brand-panel {

    width: 145px;

    height: 78px;

    padding:
      6px
      10px;

  }

  .menu-btn {

    display: block;

  }

  .nav-links {

    position: absolute;

    top: 92px;

    left: 0;

    right: 0;

    display: none;

    flex-direction: column;

    align-items: flex-start;

    gap: 22px;

    padding: 26px;

    background: var(--white);

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

  }

  .nav-links.open {

    display: flex;

  }

  .nav-cta {

    width: 100%;

    text-align: center;

  }

  .statement-grid,
  .split,
  .contact-grid {

    grid-template-columns: 1fr;

    gap: 48px;

  }

  .steps {

    grid-template-columns: 1fr;

  }

  .step {

    border-right: 0;

    border-bottom:
      1px solid
      #CFD3D8;

  }

  .step:last-child {

    border-bottom: 0;

  }

}

/* MOBILE */

@media (max-width: 760px) {

  .shell {

    width:
      min(
        calc(100% - 30px),
        var(--max)
      );

  }

  .section {

    padding:
      78px
      0;

  }

  .hero-grid {

    grid-template-columns: 1fr;

    gap: 45px;

    min-height: auto;

    padding:
      78px
      0
      70px;

  }

  .hero h1 {

    font-size:
      clamp(
        48px,
        14vw,
        70px
      );

  }

  .hero-lead {

    font-size: 17px;

  }

  .hero-text {

    font-size: 15px;

  }

  .hero-mark {

    padding:
      10px
      20px
      0;

  }

  .hero-svg {

    width:
      min(
        100%,
        380px
      );

  }

  .hero-tagline {

    font-size: 9px;

    letter-spacing: 0.22em;

  }

  .platform-grid {

    grid-template-columns: 1fr;

  }

  .platform-card.wide {

    grid-column: auto;

  }

  .foundation-bar {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

  }

  .cycle {

    grid-template-columns: 1fr;

  }

  .network-grid {

    grid-template-columns: 1fr;

  }

  .why-grid {

    grid-template-columns: 1fr;

  }

  .footer-grid {

    flex-direction: column;

  }

  .contact-card p {

    grid-template-columns: 1fr;

    gap: 5px;

  }

}