.internal-page {
  background: #fff;
}

.internal-page h1,
.internal-page h2,
.internal-page h3 {
  font-family: var(--font-primary);
}

.internal-page h2 { margin-bottom: 28px; }

.internal-page h2 em,
.internal-page h1 em {
  color: var(--blue2);
  font-style: normal;
}

.internal-hero {
  position: relative;
  min-height: 780px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #03131e;
}

.internal-hero-media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 14, 23, 0.97) 0%, rgba(2, 14, 23, 0.82) 38%, rgba(2, 14, 23, 0.18) 74%),
    linear-gradient(0deg, rgba(2, 14, 23, 0.7), transparent 50%),
    url("images/experience-building.jpg") center / cover no-repeat;
  transform: scale(1.01);
}

.internal-hero-media::after,
.company-grid-lines {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(57, 184, 236, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 184, 236, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
}

.internal-hero-content {
  position: relative;
  z-index: 1;
  padding: 230px 0 105px;
}

.breadcrumb {
  display: flex;
  gap: 12px;
  margin-bottom: 62px;
  color: #91a6b1;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breadcrumb a:hover {
  color: var(--blue2);
}

.internal-hero h1 {
  max-width: 840px;
  margin: 0 0 30px;
}

.internal-hero-content > p:last-child {
  max-width: 640px;
  margin: 0;
  color: #bdcbd2;
  font-size: 17px;
}

.hero-scroll {
  position: absolute;
  right: max(32px, calc((100vw - 1280px) / 2));
  bottom: 50px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #c5d1d7;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-scroll b {
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(57, 184, 236, 0.6);
  border-radius: 50%;
  color: var(--blue2);
}

.company-story {
  position: relative;
  min-height: 960px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(2, 16, 26, 0.16) 0%, rgba(2, 16, 26, 0.42) 41%, rgba(2, 16, 26, 0.94) 62%, #02101a 100%),
    linear-gradient(0deg, #02101a 0%, rgba(2, 16, 26, 0.08) 48%),
    url("images/experience-building.jpg") left center / cover no-repeat;
}

.company-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(57, 184, 236, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 184, 236, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.story-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  gap: 45px 125px;
  align-items: start;
}

.story-intro h2 {
  max-width: 570px;
  margin: 0;
  color: #fff;
  font-size: clamp(58px, 5.5vw, 84px);
  line-height: 1.02;
}

.story-copy {
  padding-top: 22px;
  color: #aebdc5;
  font-size: 14px;
}

.story-copy .story-lead {
  position: relative;
  margin-bottom: 60px;
  padding-bottom: 34px;
  color: #fff;
  font-size: 22px;
  line-height: 1.52;
}

.story-copy .story-lead::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--blue2);
}

.story-stat {
  grid-column: 1 / -1;
  min-height: 205px;
  display: grid;
  grid-template-columns: 0.95fr 1.75fr;
  margin-top: 25px;
  color: #fff;
  background: rgba(2, 18, 29, 0.9);
  border: 1px solid rgba(57, 184, 236, 0.42);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.story-year {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  padding: 30px 46px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.story-year strong {
  padding-right: 35px;
  color: var(--blue2);
  font-size: clamp(76px, 8vw, 120px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.07em;
}

.story-year span {
  padding-left: 35px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  color: #b8c7ce;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.story-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  padding: 30px 15px;
}

.story-metrics > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.story-metrics > div:last-child {
  border: 0;
}

.story-metrics strong {
  margin: 10px 0 4px;
  color: var(--blue2);
  font-size: 17px;
  font-weight: 500;
}

.story-metrics span {
  color: #c1cdd2;
  font-size: 11px;
  line-height: 1.45;
}

.story-icon {
  width: 42px;
  height: 42px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-experience {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339b8ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 58V19h20v39M22 26h4m5 0h2M22 34h4m5 0h2M22 42h4m5 0h2M37 32h12v26M42 39h3m-3 8h3M10 58h46'/%3E%3C/svg%3E");
}

.icon-engineering {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339b8ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='15' r='6'/%3E%3Cpath d='M30 21 18 56m16-35 12 35M23 40h18M20 48h24M32 21v17M28 15h8'/%3E%3C/svg%3E");
}

.icon-delivery {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339b8ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='10'/%3E%3Cpath d='m32 7 4 7 8 1 1 8 7 4-3 8 3 7-7 5-1 8-8 1-4 7-7-4-8 1-2-8-7-4 3-8-3-7 7-5 1-8 8-1z'/%3E%3C/svg%3E");
}

.icon-quality {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339b8ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 6c8 6 15 7 21 8v17c0 13-8 22-21 28C19 53 11 44 11 31V14c6-1 13-2 21-8Z'/%3E%3Cpath d='m23 32 6 6 13-14'/%3E%3C/svg%3E");
}

.company-principles,
.company-capabilities {
  position: relative;
  overflow: hidden;
  background: #03131e;
}

.company-principles .wrap,
.company-capabilities .wrap {
  position: relative;
}

.principles-head {
  max-width: 820px;
  margin-bottom: 62px;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(130, 176, 197, 0.28);
  border-bottom: 1px solid rgba(130, 176, 197, 0.28);
}

.principle-card {
  position: relative;
  min-height: 500px;
  padding: 60px 42px 45px;
  border-right: 1px solid rgba(130, 176, 197, 0.28);
}

.principle-card:last-child {
  border-right: 0;
}

.principle-card::after {
  content: "";
  position: absolute;
  inset: auto 42px 0;
  height: 2px;
  background: var(--blue2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.principle-card:hover::after {
  transform: scaleX(1);
}

.principle-number {
  position: absolute;
  top: 28px;
  right: 30px;
  color: #517181;
  font-size: 11px;
}

.line-icon {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 52px;
  border: 1px solid var(--blue2);
  border-radius: 50%;
}

.line-icon::before,
.line-icon::after {
  content: "";
  position: absolute;
  border: 1px solid var(--blue2);
}

.icon-vision::before {
  inset: 18px 10px;
  border-radius: 50% / 70%;
}

.icon-vision::after {
  width: 8px;
  height: 8px;
  top: 24px;
  left: 24px;
  border-radius: 50%;
  background: var(--blue2);
}

.icon-mission::before {
  inset: 12px;
  border-radius: 50%;
}

.icon-mission::after {
  inset: 21px;
  border-radius: 50%;
  background: var(--blue2);
}

.icon-values::before {
  width: 24px;
  height: 31px;
  left: 16px;
  top: 11px;
  border-radius: 14px 14px 18px 18px;
}

.icon-values::after {
  width: 13px;
  height: 7px;
  left: 21px;
  top: 22px;
  border-width: 0 0 1px 1px;
  transform: rotate(-45deg);
}

.principle-card h3 {
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.principle-card > p:last-child {
  color: #94a7b0;
  font-size: 13px;
}

.company-strength {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 42%, rgba(13, 78, 108, 0.18), transparent 35%),
    #03131e;
}

.company-strength::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(57, 184, 236, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 184, 236, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.strength-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.98fr 1.02fr;
  gap: clamp(55px, 6vw, 95px);
  align-items: center;
}

.strength-image {
  min-height: 780px;
  display: grid;
  grid-template-rows: minmax(430px, 1fr) 140px 145px;
  overflow: hidden;
  border: 1px solid rgba(57, 184, 236, 0.42);
  background: rgba(2, 18, 29, 0.76);
}

.strength-photo {
  position: relative;
  overflow: hidden;
}

.strength-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(2, 17, 27, 0.5), transparent 45%);
}

.strength-photo img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.strength-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 24px 20px;
  border-bottom: 1px solid rgba(133, 176, 196, 0.32);
}

.strength-process > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.strength-process > div:last-child {
  border: 0;
}

.strength-process i {
  width: 42px;
  height: 42px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.process-design {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339b8ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 53V14h18M10 45h9v8m-3-28h9m-9 7h6M30 48l3-11 18-18 7 7-18 18zM51 19l-4-4 4-4 4 4zM30 48l10-4'/%3E%3C/svg%3E");
}

.process-fabricate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339b8ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 50h40M20 50c1-10 5-15 12-15s11 5 12 15M32 8v14m-9-10 5 11m13-11-5 11M15 21l10 7m24-7-10 7'/%3E%3Cpath d='m28 28 4 5 4-5'/%3E%3C/svg%3E");
}

.icon-factory {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339b8ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 56h48V28L42 36V27l-14 9V17H14v39M18 17V8h12v9M17 44h6m7 0h6m7 0h6M17 51h6m7 0h6m7 0h6'/%3E%3C/svg%3E");
}

.icon-hardhat {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%2339b8ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 43v-4a20 20 0 0 1 40 0v4M8 43h48v7H8zM22 39V20m20 19V20M28 51v5h8v-5'/%3E%3C/svg%3E");
}

.strength-year {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  padding: 25px 42px;
  background:
    repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
    rgba(5, 28, 42, 0.88);
}

.strength-year strong {
  padding-right: 35px;
  color: var(--blue2);
  font-size: clamp(70px, 7vw, 108px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.07em;
}

.strength-year span {
  padding-left: 35px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.strength-year em {
  color: var(--blue2);
  font-style: normal;
}

.strength-copy > p {
  color: #aab9c0;
  font-size: 14px;
}

.strength-list {
  margin-top: 38px;
  border: 1px solid rgba(133, 176, 196, 0.34);
}

.strength-list > div {
  display: grid;
  grid-template-columns: 76px 0.92fr 1.08fr;
  gap: 22px;
  align-items: center;
  min-height: 102px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(133, 176, 196, 0.34);
}

.strength-list > div:last-child {
  border: 0;
}

.strength-list-icon {
  width: 58px;
  height: 58px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 34px;
  border: 1px solid rgba(57, 184, 236, 0.72);
  border-radius: 50%;
}

.strength-list strong {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.strength-list span {
  padding-left: 25px;
  border-left: 1px solid rgba(255, 255, 255, 0.23);
  color: #a9b8bf;
  font-size: 12px;
  line-height: 1.6;
}

.capabilities-head {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 60px;
}

.capabilities-head h2 {
  margin-bottom: 0;
}

.capabilities-head > p {
  color: #98aab3;
  font-size: 14px;
}

.capability-list {
  border-top: 1px solid rgba(133, 176, 196, 0.32);
}

.capability-list a {
  min-height: 112px;
  display: grid;
  grid-template-columns: 70px 1fr 1fr 50px;
  gap: 30px;
  align-items: center;
  border-bottom: 1px solid rgba(133, 176, 196, 0.32);
  transition: background 0.25s ease, padding 0.25s ease;
}

.capability-list a:hover {
  padding-inline: 22px;
  background: rgba(19, 139, 191, 0.1);
}

.capability-list span {
  color: var(--blue2);
  font-size: 11px;
}

.capability-list strong {
  font-size: 26px;
  font-weight: 500;
}

.capability-list small {
  color: #94a6af;
  font-size: 12px;
}

.capability-list b {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  justify-self: end;
  border: 1px solid rgba(57, 184, 236, 0.55);
  border-radius: 50%;
  color: var(--blue2);
  font-weight: 400;
}

.company-profile-band {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #03131e;
}

.profile-band-image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 16, 25, 0.97) 0%, rgba(2, 16, 25, 0.82) 42%, rgba(2, 16, 25, 0.12) 75%),
    url("images/4thsection4.jpeg") center / cover no-repeat;
}

.profile-band-inner {
  position: relative;
}

.profile-band-inner h2 {
  max-width: 720px;
  margin-bottom: 38px;
}

.profile-band-inner .button {
  min-height: 58px;
  padding-inline: 30px;
  border-color: var(--blue2);
}

@media (max-width: 980px) {
  .internal-hero {
    min-height: 700px;
  }

  .story-grid,
  .strength-grid,
  .capabilities-head {
    gap: 55px;
  }

  .story-stat {
    grid-template-columns: 1fr;
  }

  .story-year {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .principle-card {
    min-height: 530px;
    padding-inline: 28px;
  }
}

@media (max-width: 768px) {
  .internal-hero {
    min-height: 660px;
    align-items: flex-end;
  }

  .internal-hero-media {
    background:
      linear-gradient(180deg, rgba(2, 14, 23, 0.42) 0%, rgba(2, 14, 23, 0.9) 68%, #02101a 100%),
      url("images/experience-building.jpg") 67% center / cover no-repeat;
  }

  .internal-hero-content {
    padding: 155px 0 84px;
  }

  .breadcrumb {
    margin-bottom: 48px;
  }

  .internal-hero-content > p:last-child {
    font-size: 14px;
  }

  .hero-scroll {
    display: none;
  }

  .story-grid,
  .strength-grid,
  .capabilities-head {
    grid-template-columns: 1fr;
  }

  .story-copy {
    padding-top: 0;
  }

  .story-copy .story-lead {
    font-size: 18px;
  }

  .story-stat {
    min-height: 0;
    margin-top: 0;
  }

  .story-year {
    grid-template-columns: auto 1fr;
    padding: 25px;
  }

  .story-year strong {
    padding-right: 24px;
    font-size: 64px;
  }

  .story-year span {
    padding-left: 24px;
    font-size: 10px;
  }

  .story-metrics {
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }

  .story-metrics > div {
    min-height: 155px;
    padding: 22px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .story-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .story-metrics > div:nth-child(3),
  .story-metrics > div:nth-child(4) {
    border-bottom: 0;
  }

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

  .principle-card {
    min-height: auto;
    padding: 55px 28px;
    border-right: 0;
    border-bottom: 1px solid rgba(130, 176, 197, 0.28);
  }

  .principle-card:last-child {
    border-bottom: 0;
  }

  .line-icon {
    margin-bottom: 38px;
  }

  .strength-image {
    min-height: 680px;
    grid-template-rows: minmax(330px, 1fr) 130px 125px;
  }

  .strength-copy {
    order: -1;
  }

  .strength-list > div {
    grid-template-columns: 64px 1fr;
    gap: 12px 18px;
    padding: 20px;
  }

  .strength-list span {
    grid-column: 2;
    padding: 10px 0 0;
    border: 0;
  }

  .strength-year {
    padding-inline: 24px;
  }

  .strength-year strong {
    padding-right: 20px;
    font-size: 66px;
  }

  .strength-year span {
    padding-left: 20px;
  }

  .strength-process {
    padding-inline: 8px;
  }

  .capabilities-head {
    margin-bottom: 42px;
  }

  .capability-list a {
    min-height: 126px;
    grid-template-columns: 38px 1fr 44px;
    gap: 15px;
  }

  .capability-list small {
    grid-column: 2 / 4;
    margin-top: -28px;
  }

  .capability-list strong {
    font-size: 21px;
  }

  .company-profile-band {
    min-height: 550px;
  }

  .profile-band-image {
    background:
      linear-gradient(180deg, rgba(2, 16, 25, 0.62), rgba(2, 16, 25, 0.96) 75%),
      url("images/4thsection4.jpeg") 65% center / cover no-repeat;
  }

  .profile-band-inner .button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .story-year strong {
    font-size: 54px;
  }

  .story-year span {
    padding-left: 18px;
  }

  .strength-image {
    min-height: 630px;
  }

  .strength-process span {
    font-size: 8px;
  }

  .strength-year strong {
    font-size: 56px;
  }
}