@font-face {
  font-family: "Conthrax";
  src: url("./fonts/conthrax-sb.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("./fonts/gotham-book.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Slider";
  src: url("./fonts/montserrat-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Gotham Book";
  src: url("./fonts/gotham-book.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Gotham Bold";
  src: url("./fonts/gotham-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("./fonts/gotham-medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("./fonts/gotham-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("./fonts/gotham-ultra.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Rostex Outline";
  src:
    url("./fonts/rostex-outline.otf") format("opentype"),
    url("./fonts/rostex-outline.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --zimer-blue: #00a7df;
  --zimer-deep: #061a37;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--zimer-deep);
  color: var(--white);
  font-family: "Gotham", Arial, Helvetica, sans-serif;
}

/* Scroll motion */
.motion-ready .reveal-up {
  opacity: 0;
  translate: 0 52px;
  filter: blur(3px);
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 850ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 850ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .reveal-up.is-visible {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal-up {
    opacity: 1;
    translate: none;
    filter: none;
    transition: none;
  }
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.hero {
  position: relative;
  min-height: clamp(720px, 49.22vw, 945px);
  overflow: hidden;
  isolation: isolate;
  background: #081528 url("./assets/slider.webp") center top / cover no-repeat;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 10, 17, 0.22) 0%, rgba(5, 13, 25, 0.01) 31%, rgba(5, 13, 25, 0.02) 58%, rgba(3, 9, 20, 0.42) 100%),
    linear-gradient(90deg, rgba(0, 9, 22, 0.22) 0%, transparent 45%, rgba(0, 5, 14, 0.04) 100%);
}

.site-header {
  width: 90.94vw;
  max-width: 1746px;
  height: min(8.75vw, 168px);
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 20;
}

.brand {
  position: absolute;
  top: min(2.8vw, 54px);
  left: 0;
  display: block;
  width: min(11.875vw, 228px);
  line-height: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.brand img {
  width: 100%;
  height: auto;
  display: block;
}

.desktop-nav {
  position: absolute;
  top: min(5.16vw, 99px);
  left: min(20.83vw, 400px);
  right: min(0.57vw, 11px);
  display: flex;
  align-items: center;
  gap: min(3.125vw, 60px);
  color: #fff;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(13px, 1.146vw, 22px);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
}

.desktop-nav > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

.desktop-nav > a:not(.catalog-link) {
  position: relative;
  padding: 18px 0;
}

.desktop-nav > a:not(.catalog-link)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 7px;
  height: 1px;
  background: var(--zimer-blue);
  transition: right 180ms ease;
}

.desktop-nav > a:hover::after,
.desktop-nav > a:focus-visible::after {
  right: 0;
}

.main-nav-group {
  position: relative;
  flex: 0 0 auto;
}

.main-nav-parent {
  position: relative;
  padding: 18px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.main-nav-parent span { margin-left: 0.25em; font-size: 0.62em; }
.main-nav-parent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 7px;
  height: 1px;
  background: var(--zimer-blue);
  transition: right 180ms ease;
}
.main-nav-group:hover .main-nav-parent::after,
.main-nav-group:focus-within .main-nav-parent::after,
.main-nav-group.is-open .main-nav-parent::after { right: 0; }

.main-nav-submenu {
  position: absolute;
  z-index: 30;
  top: calc(100% - 3px);
  left: -18px;
  min-width: 230px;
  padding: 10px 0;
  display: grid;
  border: 1px solid rgba(0, 183, 232, 0.3);
  border-radius: 8px;
  background: rgba(3, 18, 38, 0.96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.main-nav-group:hover .main-nav-submenu,
.main-nav-group:focus-within .main-nav-submenu,
.main-nav-group.is-open .main-nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav-submenu a { padding: 11px 18px; color: #fff; font-size: 15px; text-transform: none; }
.main-nav-submenu a:hover,
.main-nav-submenu a:focus-visible { background: rgba(0, 183, 232, 0.12); color: var(--zimer-blue); }
.main-nav-submenu a[aria-disabled="true"] { cursor: default; }

.catalog-link,
.primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  background: rgba(20, 30, 37, 0.72);
  transition: background 180ms ease, border-color 180ms ease;
}

.catalog-link {
  margin-left: auto;
  min-width: min(7.24vw, 139px);
  height: min(1.563vw, 30px);
  padding: 0 min(0.68vw, 13px) 0 min(0.885vw, 17px);
  border-radius: 3px;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(12px, 1.042vw, 20px);
  font-weight: 400;
  letter-spacing: 0;
  transform: translateY(3px);
}

.desktop-nav .catalog-link {
  align-self: center;
  width: auto;
  max-width: none;
  padding: 0 min(0.68vw, 13px) 0 min(0.885vw, 17px);
  transform: none;
}

.footer-contact-links {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: min(1.45vw, 28px);
}

.footer-nav .footer-catalog-link {
  width: max-content;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: min(0.12vw, 2px) min(0.28vw, 5px);
  transform: none;
  font-size: min(1.15vw, 22px);
  line-height: 1.05;
}

.footer-nav .footer-catalog-link svg {
  width: 1em;
  height: 1em;
}

.catalog-link:hover,
.catalog-link:focus-visible {
  background: var(--zimer-blue);
  border-color: var(--zimer-blue);
}

.catalog-link svg {
  width: min(1.094vw, 21px);
  height: min(1.094vw, 21px);
  color: #00b7e8;
  stroke-width: 2;
}

svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-wordmark {
  position: absolute;
  z-index: 1;
  left: clamp(28px, 3vw, 58px);
  top: clamp(145px, 10.4vw, 200px);
  width: auto;
  height: auto;
  line-height: 0.82;
  opacity: 1;
  mix-blend-mode: overlay;
  filter: brightness(1.55) contrast(1.12);
}

.hero-wordmark-desktop,
.hero-wordmark-mobile {
  display: block;
  color: #fff;
  font-family: "Montserrat Slider", "Montserrat", Arial, sans-serif;
  font-size: 330px;
  font-weight: 700;
  letter-spacing: -0.075em;
  white-space: nowrap;
}

.hero-wordmark-desktop {
  transform: scaleX(0.94);
  transform-origin: left center;
}

.hero-wordmark-mobile {
  display: none;
}

.hero-panels {
  position: absolute;
  z-index: 5;
  top: min(15.31vw, 294px);
  right: clamp(58px, 5.05vw, 97px);
  width: min(20.26vw, 389px);
  display: grid;
  gap: min(0.625vw, 12px);
}

.solution-pill {
  min-height: min(5.21vw, 100px);
  margin: 0;
  padding: min(0.52vw, 10px) min(1.354vw, 26px) min(0.52vw, 10px) min(0.938vw, 18px);
  display: flex;
  align-items: center;
  gap: min(0.677vw, 13px);
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
}

.solution-icon {
  width: min(2.917vw, 56px);
  height: min(2.708vw, 52px);
  flex: 0 0 min(2.917vw, 56px);
  display: grid;
  place-items: center;
}

.solution-icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(2.708vw, 52px);
  max-height: min(2.656vw, 51px);
}

.solution-pill p {
  margin: 0;
  color: #fff;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(13px, 1.042vw, 20px);
  line-height: 1.27;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.solution-pill strong {
  display: block;
  color: #fff;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.15;
  font-weight: 700;
}

.hero-copy {
  position: absolute;
  z-index: 5;
  left: clamp(45px, 4.27vw, 82px);
  bottom: clamp(52px, 3.55vw, 68px);
  width: min(65.1vw, 1250px);
}

.hero-copy h1 {
  margin: 0 0 18px;
  color: #fff;
  font-family: "Conthrax", "Audiowide", sans-serif;
  font-size: clamp(27px, 1.875vw, 36px);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0;
  transform: none;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.34);
}

.hero-copy p {
  max-width: min(39.58vw, 760px);
  margin: 0;
  color: #fff;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.45;
  font-weight: 400;
}

.primary-cta {
  position: absolute;
  left: min(43.85vw, 842px);
  bottom: 0;
  min-width: min(16.41vw, 315px);
  height: min(3.333vw, 64px);
  padding: 0 4px 0 min(1.25vw, 24px);
  justify-content: space-between;
  border-color: #fff;
  border-radius: min(1.77vw, 34px);
  background: #fff;
  color: #0b1829;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(13px, 1.042vw, 20px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

.primary-cta svg {
  width: min(2.917vw, 56px);
  height: min(2.917vw, 56px);
  padding: min(0.521vw, 10px);
  flex: 0 0 auto;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  stroke-width: 3;
}

.primary-cta:hover,
.primary-cta:focus-visible {
  border-color: var(--zimer-blue);
  background: var(--zimer-blue);
  color: #fff;
}

.cta-mobile-label {
  display: none;
}

.mobile-copy-break {
  display: none;
}

.hero-note {
  position: absolute;
  right: clamp(62px, 5.42vw, 104px);
  bottom: clamp(52px, 3.55vw, 68px);
  z-index: 5;
  margin: 0;
  color: #fff;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
}

.menu-button,
.mobile-drawer {
  display: none;
}

.beyond-section {
  position: relative;
  z-index: 2;
  min-height: 0;
  margin-top: -300px;
  padding-top: 300px;
  overflow: hidden;
  background: transparent;
  color: #fff;
}

.beyond-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #061329 url("./assets/beyond-background.webp") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 38px, rgba(0, 0, 0, 0.42) 88px, rgba(0, 0, 0, 0.76) 135px, #000 180px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 38px, rgba(0, 0, 0, 0.42) 88px, rgba(0, 0, 0, 0.76) 135px, #000 180px, #000 100%);
}

.beyond-inner {
  width: min(91.7vw, 1760px);
  min-height: 0;
  margin: 0 auto;
  padding-top: clamp(56px, 4.6vw, 88px);
}

.beyond-intro {
  display: grid;
  grid-template-columns: minmax(420px, 42%) minmax(480px, 42%);
  justify-content: space-between;
  align-items: start;
  padding: 0 5.4%;
}

.beyond-intro-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-eyebrow,
.approach-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(12px, 1.05vw, 20px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.beyond-intro h2 {
  margin: clamp(14px, 1.15vw, 22px) 0 clamp(12px, 1vw, 20px);
  color: #d7deeb;
  font-family: "Conthrax", sans-serif;
  font-size: clamp(30px, 2.188vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.beyond-description {
  max-width: 590px;
  margin: 0;
  color: #e1e6ef;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(13px, 1.042vw, 20px);
  line-height: 1.34;
  font-weight: 400;
}

.beyond-description-mobile {
  display: none;
}

.round-cta {
  height: clamp(44px, 3.5vw, 66px);
  padding: 0 5px 0 clamp(18px, 1.4vw, 27px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 999px;
  background: #fff;
  color: #0a101b;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(12px, 1.042vw, 20px);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.round-cta svg {
  width: clamp(36px, 2.95vw, 56px);
  height: clamp(36px, 2.95vw, 56px);
  padding: clamp(7px, 0.55vw, 10px);
  flex: 0 0 auto;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  stroke-width: 2.8;
}

.story-cta {
  min-width: clamp(194px, 15.8vw, 304px);
  margin-top: clamp(22px, 2vw, 38px);
}

.story-media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.story-play {
  position: relative;
  width: 100%;
  aspect-ratio: 1.86 / 1;
  overflow: hidden;
  border: 0;
  border-radius: clamp(16px, 1.45vw, 28px);
  background:
    linear-gradient(180deg, rgba(7, 35, 58, 0.18), rgba(4, 26, 42, 0.42)),
    linear-gradient(180deg, #2f6380 0%, #6f98aa 57%, #23485e 58%, #18394d 100%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.antenna-scene {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 42px;
  height: 61%;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.18));
}

.antenna-mast,
.antenna-arm {
  position: absolute;
  display: block;
  background: #152733;
}

.antenna-mast {
  left: 19px;
  bottom: 0;
  width: 4px;
  height: 100%;
}

.antenna-arm {
  left: 6px;
  width: 30px;
  height: 3px;
  transform: rotate(-8deg);
}

.antenna-arm::before,
.antenna-arm::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 3px;
  height: 18px;
  background: #172c39;
}

.antenna-arm::before { left: 2px; }
.antenna-arm::after { right: 2px; }
.antenna-arm-one { top: 22%; }
.antenna-arm-two { top: 42%; }
.antenna-arm-three { top: 62%; }

.play-symbol {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid #fff;
  transform: translate(-35%, -50%);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.video-progress {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 18px;
  height: 3px;
  background: rgba(255, 255, 255, 0.65);
}

.video-progress span {
  display: block;
  width: 2%;
  height: 100%;
  background: #ff1744;
}

.video-time {
  position: absolute;
  left: 15px;
  bottom: 25px;
  color: #fff;
  font: 500 10px/1 "Gotham", sans-serif;
}

.story-media > p {
  margin: clamp(12px, 1.1vw, 21px) 0 0;
  color: #fff;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(11px, 0.86vw, 16px);
  text-align: right;
  text-transform: uppercase;
}

.approach-block {
  position: relative;
  margin-top: clamp(40px, 4.2vw, 80px);
  padding: 0 0 18px;
}

.approach-copy {
  width: 67%;
}

.approach-label {
  color: #d6dfec;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(15px, 1.5vw, 28px);
  font-weight: 500;
}

.approach-copy h3 {
  margin: clamp(18px, 1.7vw, 32px) 0 clamp(10px, 1vw, 19px);
  color: #d3dae8;
  font-family: "Conthrax", sans-serif;
  font-size: clamp(30px, 2.188vw, 42px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.approach-copy > p:last-child {
  max-width: 920px;
  margin: 0;
  color: #dce4ef;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(12px, 1.042vw, 20px);
  line-height: 1.35;
}

.approach-cards {
  width: 69%;
  margin-top: clamp(18px, 1.7vw, 32px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1vw, 20px);
}

.approach-card {
  position: relative;
  aspect-ratio: 382 / 184;
  min-height: 0;
  padding: 0 clamp(11px, 1vw, 19px) clamp(10px, 0.9vw, 17px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.approach-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.approach-card h4 {
  position: relative;
  z-index: 1;
  margin: 0 0 2px;
  color: #f2f4fa;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(11px, 1.042vw, 20px);
  line-height: 1.18;
  font-weight: 700;
  text-transform: uppercase;
}

.approach-card h4 span {
  margin-right: 7px;
  color: #00b8e8;
}

.approach-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #dce5ef;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(9px, 0.834vw, 16px);
  line-height: 1.18;
}

.approach-visual {
  position: absolute;
  right: 7%;
  bottom: calc(2% + 12px);
  width: clamp(210px, 18.5vw, 355px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 38px);
}

.approach-visual > img,
.approach-visual > .approach-logo-video {
  width: clamp(145px, 13.2vw, 254px);
  height: auto;
  display: block;
  mix-blend-mode: screen;
}

.approach-logo-video {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: transparent;
  clip-path: inset(30%);
  transform: scale(2.5);
  transform-origin: center;
}

.project-cta {
  width: 100%;
  height: clamp(40px, 3.5vw, 64px);
  padding: 0 4px 0 clamp(14px, 1.4vw, 25px);
  font-size: clamp(11px, 1.042vw, 20px);
}

.project-cta svg {
  width: clamp(34px, 2.95vw, 56px);
  height: clamp(34px, 2.95vw, 56px);
  padding: clamp(6px, 0.55vw, 10px);
}

.mobile-approach-break {
  display: none;
}

.partner-section {
  position: relative;
  min-height: clamp(720px, 57.6vw, 1104px);
  overflow: hidden;
  background: #050b13 url("./assets/motorola-background.webp") center / cover no-repeat;
  color: #fff;
}

.partner-copy {
  position: absolute;
  top: clamp(104px, 8.8vw, 169px);
  left: 61.9%;
  width: min(32.3vw, 620px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.partner-copy h2 {
  margin: 0 0 clamp(18px, 1.45vw, 28px);
  color: #f3f5f7;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(30px, 2.188vw, 42px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.partner-logo {
  width: min(27vw, 518px);
  height: auto;
  display: block;
}

.partner-description {
  max-width: 620px;
  margin: clamp(17px, 1.3vw, 25px) 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.34;
  font-weight: 400;
}

.partner-gallery {
  width: 100%;
  margin-top: clamp(18px, 1.35vw, 26px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 0.625vw, 12px);
}

.partner-gallery img {
  width: 100%;
  aspect-ratio: 304 / 183;
  display: block;
  object-fit: cover;
  border-radius: clamp(7px, 0.625vw, 12px);
}

.partner-cta {
  width: min(16.15vw, 310px);
  min-width: 280px;
  margin-top: clamp(18px, 1.35vw, 26px);
  align-self: flex-end;
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 500;
}

.services-section {
  position: relative;
  z-index: 3;
  margin-top: -170px;
  padding: 230px 0 64px;
  overflow: hidden;
  background: transparent;
  color: #fff;
}

.services-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #102e64 url("./assets/services-background.webp") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.2) 52px,
    rgba(0, 0, 0, 0.72) 118px,
    #000 170px,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.2) 52px,
    rgba(0, 0, 0, 0.72) 118px,
    #000 170px,
    #000 100%
  );
}

.services-inner {
  width: min(91.7vw, 1760px);
  margin: 0 auto;
}

.services-header {
  display: grid;
  grid-template-columns: minmax(0, 620px) auto;
  justify-content: space-between;
  align-items: end;
  gap: 48px;
}

.services-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
}

.services-intro h2 {
  margin: clamp(13px, 0.95vw, 18px) 0 clamp(13px, 0.95vw, 18px);
  color: #fff;
  font-family: "Conthrax", sans-serif;
  font-size: clamp(30px, 2.188vw, 42px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.services-description {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.35;
  font-weight: 400;
}

.services-actions {
  min-width: min(29vw, 550px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.services-all-cta {
  width: min(21vw, 400px);
  height: 64px;
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 500;
}

.services-pagination {
  width: 100%;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.services-pagination button {
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: 400 25px/1 "Gotham", sans-serif;
  cursor: pointer;
}

.services-pagination button:disabled {
  opacity: 0.42;
  cursor: default;
}

.services-progress {
  width: min(17.7vw, 340px);
  height: 2px;
  margin-left: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
}

.services-progress span {
  display: block;
  height: 100%;
  background: #00b6e8;
  transition: width 180ms ease;
}

.services-count {
  min-width: 52px;
  margin-left: 4px;
  font: 400 16px/1 "Gotham", sans-serif;
  text-align: right;
}

.services-track {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.042vw, 20px);
}

.service-card {
  position: relative;
  aspect-ratio: 477 / 275;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: clamp(10px, 0.78vw, 15px);
  background: #071528;
  scroll-snap-align: start;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 32% 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, rgba(1, 8, 16, 0.9) 76%);
  pointer-events: none;
}

.service-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.service-card-copy {
  position: absolute;
  right: clamp(12px, 1vw, 19px);
  bottom: clamp(12px, 0.95vw, 18px);
  left: clamp(12px, 1vw, 19px);
  z-index: 2;
}

.service-card h3 {
  margin: 0 0 4px;
  color: #fff;
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.15;
  font-weight: 700;
  text-transform: uppercase;
}

.service-card h3 span {
  margin-right: 7px;
  color: #00bee9;
}

.service-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Gotham", Arial, sans-serif;
  font-size: clamp(11px, 0.834vw, 16px);
  line-height: 1.22;
  font-weight: 400;
}

.service-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.service-card:has(.service-card-link) {
  cursor: pointer;
}

.smart-mining-section {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1917 / 1136;
  overflow: hidden;
  border-top: 2px solid #174277;
  background: #e9eef5 url("./assets/smart-mining.webp") center / 100% 100% no-repeat;
  color: #0b0d10;
}

.smart-mining-heading {
  position: absolute;
  z-index: 3;
  top: 9.25%;
  left: 50%;
  width: 92%;
  transform: translateX(-50%);
  text-align: center;
}

.smart-mining-heading h2 {
  margin: 0;
  font-family: "Conthrax", sans-serif;
  font-size: min(2.083vw, 40px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.smart-mining-heading p {
  margin: min(1.05vw, 20px) 0 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.667vw, 32px);
  line-height: 1.16;
  font-weight: 400;
}

.smart-mining-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.smart-mining-card {
  position: absolute;
  width: 24.83%;
  aspect-ratio: 476 / 226;
  overflow: hidden;
  color: #111317;
}

.smart-mining-card.is-dark {
  color: #fff;
}

.smart-mining-card-01 {
  top: 27.2%;
  left: 6.75%;
}

.smart-mining-card-02 {
  top: 54.7%;
  left: 10.05%;
}

.smart-mining-card-03 {
  top: 27.2%;
  left: 66.55%;
}

.smart-mining-card-04 {
  top: 54.7%;
  left: 64.35%;
}

.smart-mining-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.smart-mining-card-copy {
  position: absolute;
  z-index: 1;
  top: 15.5%;
  right: 10%;
  left: 25.85%;
  font-family: "Gotham", Arial, sans-serif;
}

.smart-mining-card-copy > span,
.smart-mining-card-copy h3,
.smart-mining-card-copy p {
  font-size: min(1.042vw, 20px);
}

.smart-mining-card-copy > span {
  display: block;
  line-height: 1;
  font-weight: 400;
}

.smart-mining-card-copy h3 {
  max-width: 88%;
  margin: min(0.22vw, 4px) 0 0;
  line-height: 1.08;
  font-weight: 500;
  text-transform: uppercase;
}

.smart-mining-card-copy p {
  max-width: 95%;
  margin: min(1.28vw, 25px) 0 0;
  line-height: 1.18;
  font-weight: 400;
}

.smart-mining-card-02 .smart-mining-card-copy p {
  margin-top: min(0.73vw, 14px);
}

.smart-mining-cta {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 6.7%;
  width: min(18.78vw, 360px);
  height: min(3.65vw, 70px);
  padding: 0 min(0.32vw, 6px) 0 min(1.36vw, 26px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #fff;
  color: #090b0e;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.smart-mining-cta svg {
  width: min(3.02vw, 58px);
  height: min(3.02vw, 58px);
  padding: min(0.57vw, 11px);
  flex: 0 0 auto;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  stroke-width: 2.8;
}

.ports-section {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1917 / 1107;
  overflow: hidden;
  border-top: 2px solid #0a315e;
  background: #06366d url("./assets/ports-background.webp") center / 100% 100% no-repeat;
  color: #fff;
}

.ports-copy {
  position: absolute;
  top: 8.9%;
  left: 4.45%;
  width: 48%;
}

.ports-eyebrow {
  margin: 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
}

.ports-copy h2 {
  margin: min(1.22vw, 23px) 0 0;
  color: #0ab8e5;
  font-family: "Conthrax", sans-serif;
  font-size: min(2.188vw, 42px);
  line-height: 1.23;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ports-description {
  margin: min(1.35vw, 26px) 0 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.35;
  font-weight: 400;
}

.ports-features {
  width: min(43vw, 825px);
  margin-top: min(5.15vw, 99px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ports-feature {
  min-width: 0;
  padding: 0 min(1.96vw, 37px);
  text-align: center;
}

.ports-feature:first-child {
  padding-left: 0;
}

.ports-feature + .ports-feature {
  border-left: 2px solid #0ab8e5;
}

.ports-feature img {
  width: min(3.55vw, 68px);
  height: min(3.39vw, 65px);
  margin: 0 auto min(1.05vw, 20px);
  display: block;
  object-fit: contain;
}

.ports-feature h3,
.ports-feature p {
  margin: 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.303vw, 25px);
  line-height: 1.12;
}

.ports-feature h3 {
  font-weight: 500;
  white-space: nowrap;
}

.ports-feature p {
  margin-top: min(0.32vw, 6px);
  font-size: min(1.042vw, 20px);
  font-weight: 400;
  white-space: nowrap;
}

.ports-list {
  position: absolute;
  z-index: 2;
  top: 14.2%;
  right: 4.55%;
  width: 34.15%;
}

.ports-list h3 {
  margin: 0;
  padding-bottom: min(1.02vw, 19px);
  border-bottom: 1px solid rgba(174, 196, 225, 0.62);
  color: #0ab8e5;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.303vw, 25px);
  line-height: 1.15;
  font-weight: 500;
  text-transform: uppercase;
}

.ports-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ports-list li {
  min-height: min(4.21vw, 81px);
  display: grid;
  grid-template-columns: min(1.3vw, 25px) 1fr 1.05fr min(1.15vw, 22px);
  align-items: center;
  gap: min(1.2vw, 23px);
  border-bottom: 1px solid rgba(174, 196, 225, 0.62);
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.303vw, 25px);
  line-height: 1;
  font-weight: 400;
}

.ports-list li > svg:first-child {
  width: min(1.3vw, 25px);
  height: min(1.3vw, 25px);
  color: #0ab8e5;
  stroke-width: 1.8;
}

.ports-list li > span:nth-of-type(2) {
  color: #8a9fc5;
}

.port-destinations {
  display: grid;
  gap: min(0.42vw, 8px);
  line-height: 1.2;
  white-space: nowrap;
}

.ports-list li.port-row-multi {
  min-height: min(9.1vw, 175px);
  padding: min(1.05vw, 20px) 0;
  align-items: start;
}

.ports-list li.port-row-multi > svg,
.ports-list li.port-row-multi > span:first-of-type {
  margin-top: min(0.18vw, 3px);
}

.ports-list li > svg:last-child {
  width: min(1.15vw, 22px);
  height: min(1.15vw, 22px);
  color: #0ab8e5;
  stroke-width: 2.5;
}

.expertise-section {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1920 / 975;
  overflow: hidden;
  border-top: 2px solid #16345e;
  background: #d5ddeb;
  color: #243559;
}

.expertise-header {
  position: absolute;
  top: 6.8%;
  right: 4.55%;
  left: 4.55%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.expertise-heading-copy > p {
  margin: 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.15;
  font-weight: 500;
  text-transform: uppercase;
}

.expertise-heading-copy h2 {
  margin: min(1.35vw, 26px) 0 0;
  font-family: "Conthrax", sans-serif;
  font-size: min(2.188vw, 42px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.expertise-heading-copy h2 span {
  display: block;
}

.expertise-heading-copy h2 span:last-child {
  color: #0ab8e5;
}

.expertise-summary {
  width: min(34vw, 653px);
  padding-bottom: min(0.4vw, 8px);
  display: flex;
  align-items: flex-end;
  gap: min(2vw, 38px);
}

.expertise-summary > p {
  max-width: min(28vw, 538px);
  margin: 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.28;
  font-weight: 400;
}

.expertise-controls {
  display: flex;
  gap: min(0.55vw, 10px);
}

.expertise-controls span {
  width: min(2.08vw, 40px);
  height: min(2.08vw, 40px);
  display: grid;
  place-items: center;
  border: 1px solid #7e8ca3;
  border-radius: 50%;
  color: #43516a;
  font: 400 min(1.82vw, 35px)/1 "Gotham", sans-serif;
}

.expertise-cards {
  position: absolute;
  top: 25.15%;
  right: 4.45%;
  left: 4.45%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: min(1.46vw, 28px);
}

.expertise-card {
  position: relative;
  aspect-ratio: 417 / 575;
  overflow: hidden;
  border-radius: min(1.3vw, 25px);
  color: #fff;
}

.expertise-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.expertise-card-copy {
  position: absolute;
  z-index: 2;
  top: 7.4%;
  right: 7%;
  left: 7%;
}

.expertise-card-copy > span {
  display: block;
  color: #0ab8e5;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.82vw, 35px);
  line-height: 1;
  font-weight: 400;
}

.expertise-card-copy h3 {
  max-width: 85%;
  margin: min(1.05vw, 20px) 0 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.459vw, 28px);
  line-height: 1.14;
  font-weight: 700;
  text-transform: uppercase;
}

.expertise-card-arrow {
  position: absolute;
  z-index: 2;
  top: 7.1%;
  right: 6.5%;
  width: min(3.02vw, 58px);
  height: min(3.02vw, 58px);
}

.expertise-card > p {
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 7.4%;
  left: 7%;
  margin: 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.15;
  font-weight: 400;
}

.expertise-cta {
  position: absolute;
  right: 4.45%;
  bottom: 2.65%;
  width: min(18.25vw, 350px);
  height: min(3.55vw, 68px);
  padding: 0 min(0.32vw, 6px) 0 min(2.2vw, 42px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  background: #fff;
  color: #0a0d13;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.02;
  font-weight: 500;
  text-transform: uppercase;
}

.expertise-cta svg {
  width: min(3.02vw, 58px);
  height: min(3.02vw, 58px);
  padding: min(0.55vw, 10px);
  flex: 0 0 auto;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  stroke-width: 2.8;
}

.projects-section {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1920 / 594;
  overflow: hidden;
  border-top: 2px solid #122f57;
  background: #243559;
  color: #d5ddeb;
}

.projects-header {
  position: absolute;
  inset: 0;
}

.projects-header > div {
  position: absolute;
  top: 10.6%;
  left: 4.7%;
}

.projects-header > div > p {
  margin: 0;
  color: #0ab8e5;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.15;
  font-weight: 500;
  text-transform: uppercase;
}

.projects-header h2 {
  margin: min(1.15vw, 22px) 0 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(6.77vw, 130px);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.projects-summary {
  position: absolute;
  z-index: 2;
  top: 23.2%;
  left: 54.8%;
  margin: 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
}

.projects-gradient {
  position: absolute;
  top: 23.4%;
  right: 0;
  left: 73.35%;
  height: 7.7%;
  background: linear-gradient(90deg, rgba(10, 184, 229, 0), #0ab8e5);
}

.projects-grid {
  position: absolute;
  top: 44.5%;
  right: 4.7%;
  bottom: 7.2%;
  left: 4.7%;
  display: grid;
  grid-template-columns: 18.5% 30.5% 29% 22%;
}

.project-item {
  position: relative;
  padding: 0 6.2% 0;
}

.project-item:first-child {
  padding-left: 0;
}

.project-item + .project-item {
  padding-left: 20%;
  border-left: 2px solid #0ab8e5;
}

.project-item:nth-child(4) {
  padding-left: 30%;
}

.project-number {
  display: block;
  color: #0ab8e5;
  font-family: "Rostex Outline", sans-serif;
  font-size: min(7.292vw, 140px);
  line-height: 0.74;
  font-weight: 400;
}

.project-item h3 {
  position: relative;
  margin: min(2.2vw, 42px) 0 0;
  max-width: 82%;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1.25;
  font-weight: 400;
  text-transform: uppercase;
}

.project-item h3::before {
  content: "";
  position: absolute;
  top: min(-1.42vw, -27px);
  left: 0;
  width: min(1.5vw, 29px);
  height: 2px;
  background: #0ab8e5;
}

.project-item > a {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-bottom: min(0.45vw, 8px);
  border-bottom: 1px solid #0ab8e5;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(0.834vw, 16px);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
}

.project-item + .project-item > a {
  left: 20%;
}

.project-item:nth-child(4) > a {
  left: 30%;
}

.project-item > a span {
  margin-left: min(0.55vw, 10px);
  color: #0ab8e5;
  font-size: 1.35em;
}

@media (min-width: 901px) {
  .hero {
    z-index: 3;
    min-height: calc(clamp(720px, 49.22vw, 945px) + 80px);
    overflow: visible;
    background: transparent;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: url("./assets/slider.webp") center top / auto clamp(720px, 49.22vw, 945px) no-repeat;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(clamp(720px, 49.22vw, 945px) - 160px),
      rgba(0, 0, 0, 0.92) calc(clamp(720px, 49.22vw, 945px) - 125px),
      rgba(0, 0, 0, 0.68) calc(clamp(720px, 49.22vw, 945px) - 80px),
      rgba(0, 0, 0, 0.32) calc(clamp(720px, 49.22vw, 945px) - 35px),
      transparent clamp(720px, 49.22vw, 945px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(clamp(720px, 49.22vw, 945px) - 160px),
      rgba(0, 0, 0, 0.92) calc(clamp(720px, 49.22vw, 945px) - 125px),
      rgba(0, 0, 0, 0.68) calc(clamp(720px, 49.22vw, 945px) - 80px),
      rgba(0, 0, 0, 0.32) calc(clamp(720px, 49.22vw, 945px) - 35px),
      transparent clamp(720px, 49.22vw, 945px),
      transparent 100%
    );
  }

  .hero-shade {
    inset: 0;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(clamp(720px, 49.22vw, 945px) - 160px),
      rgba(0, 0, 0, 0.7) calc(clamp(720px, 49.22vw, 945px) - 80px),
      transparent clamp(720px, 49.22vw, 945px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(clamp(720px, 49.22vw, 945px) - 160px),
      rgba(0, 0, 0, 0.7) calc(clamp(720px, 49.22vw, 945px) - 80px),
      transparent clamp(720px, 49.22vw, 945px),
      transparent 100%
    );
  }

  .hero-copy {
    bottom: calc(clamp(52px, 3.55vw, 68px) + 80px);
  }

  .hero-note {
    bottom: calc(clamp(52px, 3.55vw, 68px) + 80px);
  }

  .beyond-section {
    padding-top: 220px;
  }

  .beyond-section::before {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 900px) {
  .hero {
    z-index: 3;
    min-height: max(860px, min(200vw, 900px));
    background-position: 66% top;
    background-size: auto clamp(740px, 172vw, 870px);
  }

  .hero-shade {
    background:
      linear-gradient(180deg, rgba(3, 8, 15, 0.25) 0%, rgba(3, 9, 18, 0.02) 24%, rgba(3, 9, 18, 0.32) 60%, rgba(3, 9, 18, 0.86) 100%),
      linear-gradient(90deg, rgba(0, 5, 15, 0.18), transparent 60%);
  }

  .site-header {
    width: 100%;
    height: 96px;
    margin: 0;
    display: block;
  }

  .brand {
    position: absolute;
    top: 22px;
    left: 17px;
    width: 128px;
  }

  .catalog-link {
    transform: none;
  }

  .desktop-nav {
    display: none;
  }

  .menu-button {
    position: absolute;
    top: 48px;
    right: 12px;
    width: 38px;
    height: 32px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #0b0b0b;
    cursor: pointer;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.2));
  }

  .menu-button span {
    width: 27px;
    height: 3px;
    margin: 0 auto;
    display: block;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

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

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

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

  .hero-wordmark {
    left: 0;
    right: 0;
    top: 240px;
    width: auto;
    height: auto;
    overflow: visible;
    opacity: 1;
    mix-blend-mode: overlay;
    filter: brightness(1.55) contrast(1.12);
    transform: none;
  }

  .hero-wordmark-desktop {
    display: none;
  }

  .hero-wordmark-mobile {
    display: block;
    width: calc(100% - 16px);
    margin-inline: auto;
    font-size: clamp(88px, 30.3vw, 210px);
    line-height: 0.82;
    letter-spacing: -0.075em;
    text-align: center;
  }

  .hero-copy {
    left: 27px;
    right: 25px;
    top: 469px;
    bottom: auto;
    width: auto;
  }

  .hero-copy h1 {
    max-width: 380px;
    margin-bottom: 12px;
    font-size: clamp(14.5px, 3.9vw, 18px);
    line-height: 1.16;
    letter-spacing: -0.015em;
    font-family: "Conthrax", "Audiowide", sans-serif;
    font-weight: 600;
    transform: none;
  }

  .hero-copy p {
    max-width: 365px;
    margin-bottom: 0;
    color: #fff;
    font-family: "Gotham Book", "Montserrat", sans-serif;
    font-size: clamp(10.8px, 2.85vw, 13px);
    line-height: 1.4;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: -0.025em;
  }

  .mobile-copy-break {
    display: inline;
  }

  .hero-panels {
    top: 598px;
    left: 50%;
    right: auto;
    width: min(264px, calc(100% - 96px));
    gap: 7px;
    transform: translateX(-50%);
  }

  .solution-pill {
    min-height: 64px;
    padding: 6px 14px 6px 12px;
    gap: 10px;
    border: 0;
    border-radius: 30px;
    background: rgba(2, 8, 15, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    -webkit-backdrop-filter: blur(2px) brightness(1.08);
    backdrop-filter: blur(2px) brightness(1.08);
  }

  .solution-pill:nth-child(2) {
    min-height: 76px;
  }

  .solution-icon {
    width: 48px;
    height: 46px;
    flex-basis: 48px;
  }

  .solution-icon img {
    width: auto;
    max-width: 47px;
    max-height: 45px;
  }

  .solution-pill:first-child .solution-icon img {
    max-width: 39px;
    max-height: 38px;
  }

  .solution-pill:nth-child(2) .solution-icon img {
    max-width: 48px;
    max-height: 45px;
  }

  .solution-pill p {
    color: #fff;
    font-family: "Gotham Book", "Montserrat", Arial, sans-serif;
    font-size: clamp(14px, 3.75vw, 15.5px);
    line-height: 1.18;
    font-weight: 400;
    letter-spacing: -0.015em;
  }

  .solution-pill strong {
    color: #fff;
    font-family: "Gotham Bold", "Montserrat", Arial, sans-serif;
    font-size: clamp(14.5px, 3.8vw, 15.5px);
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -0.015em;
  }

  .primary-cta {
    position: absolute;
    top: 292px;
    left: calc(50% - 2px);
    bottom: auto;
    width: min(264px, calc(100vw - 96px));
    min-width: 0;
    height: 52px;
    padding: 0 3px 0 22px;
    justify-content: space-between;
    gap: 10px;
    border-radius: 30px;
    font-family: "Gotham Bold", "Montserrat", sans-serif;
    font-size: clamp(14px, 3.8vw, 15.5px);
    font-weight: 400;
    letter-spacing: -0.015em;
    transform: translateX(-50%);
  }

  .cta-desktop-label {
    display: none;
  }

  .cta-mobile-label {
    display: inline;
  }

  .primary-cta svg {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 7px;
    border-radius: 50%;
    background: #050505;
    color: #fff;
    stroke-width: 3.2;
  }

  .hero-note {
    display: none;
  }

  .mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 15;
    padding: 116px 22px 36px;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: rgba(3, 18, 38, 0.98);
    transform: translateY(-12px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }

  .mobile-drawer.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-drawer nav {
    display: grid;
  }

  .mobile-drawer a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .mobile-nav-group { display: block; }
  .mobile-nav-parent {
    width: 100%;
    min-height: 58px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .mobile-nav-parent span { font-size: 0.66em; transition: transform 180ms ease; }
  .mobile-nav-group.is-open .mobile-nav-parent span { transform: rotate(180deg); }
  .mobile-nav-submenu { max-height: 0; display: grid; overflow: hidden; opacity: 0; transition: max-height 220ms ease, opacity 180ms ease; }
  .mobile-nav-group.is-open .mobile-nav-submenu { max-height: 240px; opacity: 1; }
  .mobile-drawer .mobile-nav-submenu a {
    min-height: 46px;
    padding-left: 18px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
  }

  .mobile-drawer .drawer-catalog {
    min-height: 52px;
    margin-top: 24px;
    padding: 0 18px;
    border: 1px solid var(--zimer-blue);
    border-radius: 26px;
    background: var(--zimer-blue);
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .beyond-section {
    min-height: 0;
    z-index: 1;
    margin-top: -80px;
    padding-top: 80px;
    background: transparent;
  }

  .beyond-section::before {
    background-position: 46% top;
    background-size: auto 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 34px, rgba(0, 0, 0, 0.62) 78px, #000 122px, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 34px, rgba(0, 0, 0, 0.62) 78px, #000 122px, #000 100%);
  }

  .beyond-inner {
    width: 100%;
    min-height: 0;
    padding: 14px 20px 25px;
  }

  .beyond-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .beyond-intro-copy {
    display: contents;
  }

  .beyond-intro h2 {
    order: 1;
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(25px, 7.3vw, 31px);
    line-height: 1.02;
    text-align: center;
  }

  .section-eyebrow {
    order: 2;
    margin: 0 0 21px;
    font-size: clamp(7.5px, 2.05vw, 9px);
    line-height: 1.2;
    text-align: center;
  }

  .beyond-description {
    order: 3;
    max-width: 360px;
    margin: 0 auto;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.38;
    text-align: center;
  }

  .beyond-description-desktop {
    display: none;
  }

  .beyond-description-mobile {
    display: block;
  }

  .story-media {
    order: 4;
    width: 100%;
    margin-top: 24px;
  }

  .story-play {
    border-radius: 9px;
  }

  .story-media > p {
    margin-top: 11px;
    font-size: 9px;
    text-align: center;
  }

  .story-cta {
    order: 5;
    min-width: 0;
    width: 158px;
    height: 34px;
    margin: 20px auto 0;
    padding-left: 17px;
    gap: 8px;
    font-size: 9px;
  }

  .story-cta svg {
    width: 28px;
    height: 28px;
    padding: 5px;
  }

  .approach-block {
    margin-top: 88px;
    padding: 0;
  }

  .approach-copy {
    width: 100%;
    text-align: center;
  }

  .approach-label {
    font-size: 11px;
  }

  .approach-copy h3 {
    width: 100%;
    margin: 14px 0 22px;
    color: #fff;
    font-size: clamp(22px, 6.25vw, 27px);
    line-height: 1.16;
    letter-spacing: 0.005em;
  }

  .mobile-approach-break {
    display: inline;
  }

  .approach-copy > p:last-child {
    max-width: 350px;
    margin: 0 auto;
    font-size: clamp(11px, 2.9vw, 12.5px);
    line-height: 1.48;
  }

  .approach-cards {
    width: calc(100% + 40px);
    margin-top: 34px;
    margin-right: -20px;
    margin-left: -20px;
    padding: 0 24px 8px;
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    touch-action: pan-y pinch-zoom;
  }

  .approach-cards::-webkit-scrollbar {
    display: none;
  }

  .approach-card {
    flex: 0 0 min(292px, calc(100vw - 96px));
    min-height: 0;
    padding: 0 15px 13px;
    scroll-snap-align: start;
    text-align: left;
  }

  .approach-cards.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
  }

  .approach-card img {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .approach-card h4 {
    margin-bottom: 5px;
    font-size: clamp(10.5px, 2.8vw, 12px);
    line-height: 1.2;
    text-align: left;
  }

  .approach-card p {
    max-width: none;
    margin: 0;
    font-size: clamp(8.8px, 2.35vw, 10.2px);
    line-height: 1.25;
    text-align: left;
  }

  .approach-visual {
    position: static;
    width: 100%;
    margin-top: 38px;
    gap: 28px;
  }

  .approach-visual > img,
  .approach-visual > .approach-logo-video {
    width: 190px;
  }

  .project-cta {
    width: min(260px, calc(100vw - 72px));
    height: 48px;
    padding-left: 18px;
    gap: 12px;
    font-size: 12px;
  }

  .project-cta svg {
    width: 42px;
    height: 42px;
    padding: 7px;
  }

  .partner-section {
    min-height: clamp(530px, 173.5vw, 660px);
    background-image:
      linear-gradient(
        180deg,
        rgba(1, 5, 10, 0.56) 0,
        rgba(1, 5, 10, 0.34) 180px,
        rgba(1, 5, 10, 0.08) 340px,
        transparent 430px
      ),
      url("./assets/motorola-background.webp");
    background-position: center, 42% calc(100% - 51px);
    background-size: cover, auto 86%;
  }

  .partner-copy {
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0 auto;
    padding: 30px 28px 0 0;
    align-items: flex-end;
    text-align: left;
  }

  .partner-copy h2 {
    width: min(220px, 67vw);
    margin-bottom: 12px;
    font-size: clamp(18px, 5.8vw, 20px);
    line-height: 1.08;
  }

  .partner-logo {
    width: min(220px, 67vw);
  }

  .partner-description {
    width: min(220px, 67vw);
    max-width: none;
    margin-top: 10px;
    font-size: 9px;
    line-height: 1.3;
  }

  .partner-gallery {
    width: min(220px, 67vw);
    margin-top: 13px;
    gap: 5px;
  }

  .partner-gallery img {
    border-radius: 8px;
  }

  .partner-cta {
    width: 145px;
    min-width: 145px;
    height: 31px;
    margin-top: 14px;
    padding: 0 2px 0 12px;
    gap: 2px;
    align-self: flex-end;
    font-size: 9px;
  }

  .partner-cta svg {
    width: 27px;
    height: 27px;
    padding: 4px;
  }

  .services-section {
    margin-top: -72px;
    padding: 116px 0 44px;
  }

  .services-section::before {
    background-position: center top;
    background-size: auto 100%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.28) 34px,
      rgba(0, 0, 0, 0.8) 72px,
      #000 104px,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.28) 34px,
      rgba(0, 0, 0, 0.8) 72px,
      #000 104px,
      #000 100%
    );
  }

  .services-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .services-header,
  .services-actions {
    display: contents;
  }

  .services-intro {
    order: 1;
    padding: 0 24px;
  }

  .services-eyebrow {
    font-size: 11px;
  }

  .services-intro h2 {
    margin: 14px 0 13px;
    font-size: clamp(25px, 7vw, 29px);
    line-height: 1.06;
  }

  .services-description {
    max-width: 315px;
    font-size: clamp(11px, 3vw, 12px);
    line-height: 1.4;
  }

  .services-track {
    order: 2;
    width: 100%;
    margin-top: 26px;
    padding: 0 24px 8px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-y pinch-zoom;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }

  .services-track::-webkit-scrollbar {
    display: none;
  }

  .service-card {
    flex: 0 0 min(274px, calc(100vw - 100px));
    border-radius: 12px;
  }

  .service-card-copy {
    right: 13px;
    bottom: 12px;
    left: 13px;
  }

  .service-card h3 {
    margin-bottom: 3px;
    font-size: 14px;
  }

  .service-card p {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .services-pagination {
    order: 3;
    width: auto;
    margin: 7px 24px 0;
    justify-content: flex-start;
    gap: 6px;
  }

  .services-pagination button {
    width: 25px;
    height: 25px;
    font-size: 20px;
  }

  .services-progress {
    width: auto;
    flex: 1 1 auto;
    margin-left: 4px;
  }

  .services-count {
    min-width: 42px;
    font-size: 12px;
  }

  .services-all-cta {
    order: 4;
    width: 208px;
    min-width: 208px;
    height: 44px;
    margin: 26px auto 0;
    padding: 0 3px 0 17px;
    font-size: 11px;
  }

  .services-all-cta svg {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
}

@media (max-width: 380px) {
  .hero {
    min-height: 860px;
    background-position: 66% top;
    background-size: auto 740px;
  }

  .hero-wordmark {
    left: 0;
    right: 0;
    top: 240px;
    width: auto;
  }

  .hero-copy {
    left: 24px;
    right: 20px;
    top: 469px;
  }

  .hero-copy h1 {
    font-size: 14px;
  }

  .hero-copy p {
    font-size: 10.5px;
  }

  .hero-panels {
    top: 598px;
  }

  .primary-cta {
    top: 292px;
  }
}

@media (max-width: 600px) {
  .smart-mining-section {
    height: 190.57vw;
    min-height: 0;
    aspect-ratio: auto;
    border-top-width: 1px;
    background-position: center 42vw;
    background-size: auto 90%;
    background-repeat: no-repeat;
  }

  .smart-mining-heading {
    top: 4.3%;
    width: 95%;
  }

  .smart-mining-heading h2 {
    width: 100%;
    font-size: 7.15vw;
    line-height: 1.08;
    letter-spacing: 0;
  }

  .smart-mining-heading h2 span {
    display: block;
    white-space: nowrap;
  }

  .smart-mining-heading p {
    margin-top: 0.8vw;
    font-size: 2.7vw;
    line-height: 1.18;
    white-space: nowrap;
  }

  .smart-mining-cards {
    top: 17.67%;
    right: 0;
    bottom: auto;
    left: 0;
    height: auto;
    padding: 0 15vw;
    display: flex;
    gap: 3vw;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-y pinch-zoom;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15vw;
    scrollbar-width: none;
  }

  .smart-mining-cards::-webkit-scrollbar {
    display: none;
  }

  .smart-mining-card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    flex: 0 0 70vw;
    scroll-snap-align: center;
  }

  .services-track.is-dragging,
  .smart-mining-cards.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
  }

  .smart-mining-card-copy {
    top: 15%;
    right: 9%;
    left: 25.85%;
  }

  .smart-mining-card-copy > span,
  .smart-mining-card-copy h3,
  .smart-mining-card-copy p {
    font-size: 2.72vw;
  }

  .smart-mining-card-copy h3 {
    margin-top: 0.35vw;
    line-height: 1.05;
  }

  .smart-mining-card-copy p,
  .smart-mining-card-02 .smart-mining-card-copy p {
    margin-top: 3.2vw;
    line-height: 1.16;
  }

  .smart-mining-card-02 .smart-mining-card-copy p {
    margin-top: 1.7vw;
  }

  .smart-mining-cta {
    bottom: 5.8%;
    width: 62vw;
    height: 11.1vw;
    padding: 0 1vw 0 4.8vw;
    font-size: 3vw;
  }

  .smart-mining-cta svg {
    width: 9.2vw;
    height: 9.2vw;
    padding: 1.5vw;
  }

  .ports-section {
    height: 251.52vw;
    min-height: 0;
    aspect-ratio: auto;
    border-top-width: 1px;
    background: #06366d;
  }

  .ports-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("./assets/ports-background.webp") center 39% / 120% auto no-repeat;
    opacity: 0.88;
    -webkit-mask-image: linear-gradient(to bottom, transparent 26%, rgba(0, 0, 0, 0.08) 29%, rgba(0, 0, 0, 0.42) 34%, rgba(0, 0, 0, 0.85) 38%, #000 41%, #000 47%, rgba(0, 0, 0, 0.72) 51%, transparent 57%);
    mask-image: linear-gradient(to bottom, transparent 26%, rgba(0, 0, 0, 0.08) 29%, rgba(0, 0, 0, 0.42) 34%, rgba(0, 0, 0, 0.85) 38%, #000 41%, #000 47%, rgba(0, 0, 0, 0.72) 51%, transparent 57%);
  }

  .ports-section::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(6, 54, 109, 0.3) 8%, rgba(6, 54, 109, 0.78) 16%, #06366d 27%);
  }

  .ports-copy {
    top: 4.15%;
    left: 6.6%;
    width: 86.8%;
  }

  .ports-eyebrow {
    font-size: 3.35vw;
    line-height: 1.15;
  }

  .ports-copy h2 {
    margin-top: 3.25vw;
    font-size: 7vw;
    line-height: 1.43;
    letter-spacing: 0;
  }

  .ports-description {
    max-width: 65vw;
    margin-top: 1.7vw;
    font-size: 3vw;
    line-height: 1.36;
  }

  .ports-desktop-break {
    display: none;
  }

  .ports-features {
    width: 100%;
    margin-top: 5.2vw;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ports-feature {
    min-height: 15.5vw;
    padding: 0 2vw;
    text-align: center;
  }

  .ports-feature:first-child {
    padding-left: 0;
  }

  .ports-feature:last-child {
    padding-right: 0;
  }

  .ports-feature + .ports-feature {
    border-left-width: 1px;
  }

  .ports-feature img {
    width: 7.1vw;
    height: 6.8vw;
    margin-bottom: 1.6vw;
  }

  .ports-feature h3 {
    font-size: 2.65vw;
    line-height: 1.05;
    white-space: normal;
  }

  .ports-feature p {
    margin-top: 0.6vw;
    font-size: 2.35vw;
    line-height: 1.05;
    white-space: normal;
  }

  .ports-list {
    top: 50.3%;
    right: auto;
    left: 7.55%;
    width: 84.9%;
  }

  .ports-list h3 {
    padding-bottom: 2.35vw;
    font-size: 4.25vw;
  }

  .ports-list li {
    min-height: 12.75vw;
    grid-template-columns: 4vw 1fr 1.12fr 3vw;
    gap: 2.2vw;
    font-size: 4.15vw;
  }

  .ports-list li > svg:first-child {
    width: 4vw;
    height: 4vw;
  }

  .ports-list li > svg:last-child {
    width: 3vw;
    height: 3vw;
  }

  .port-destinations {
    gap: 1.15vw;
    line-height: 1.12;
    font-size: 0.9em;
  }

  .ports-list li.port-row-multi {
    min-height: 31vw;
    padding: 3.1vw 0;
  }

  .expertise-section {
    height: 224.58vw;
    min-height: 0;
    aspect-ratio: auto;
    border-top-width: 1px;
  }

  .expertise-header {
    top: 4.55%;
    right: auto;
    left: 5.8%;
    width: 88.4%;
    display: block;
  }

  .expertise-heading-copy > p {
    font-size: 3.35vw;
    line-height: 1.15;
  }

  .expertise-heading-copy h2 {
    width: 80vw;
    margin-top: 4.1vw;
    font-size: 7.1vw;
    line-height: 1.42;
  }

  .expertise-heading-copy h2 span:first-child {
    max-width: 67vw;
  }

  .expertise-heading-copy h2 span:last-child {
    max-width: 80vw;
  }

  .expertise-summary {
    width: 100%;
    margin-top: 3.7vw;
    padding: 0;
    display: block;
  }

  .expertise-summary > p {
    max-width: 82vw;
    font-size: 3.45vw;
    line-height: 1.36;
  }

  .expertise-controls {
    display: none;
  }

  .expertise-cards {
    top: 42.55%;
    right: 0;
    left: 0;
    padding: 0 12.8vw;
    display: flex;
    gap: 4.7vw;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12.8vw;
    scrollbar-width: none;
  }

  .expertise-cards::-webkit-scrollbar {
    display: none;
  }

  .expertise-card {
    flex: 0 0 73.75vw;
    border-radius: 4.5vw;
    scroll-snap-align: start;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }

  .expertise-card-image {
    pointer-events: none;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }

  .expertise-card-copy {
    top: 7.4%;
    right: 7%;
    left: 7%;
  }

  .expertise-card-copy > span {
    font-size: 7.4vw;
  }

  .expertise-card-copy h3 {
    margin-top: 3.1vw;
    font-size: 5.05vw;
    line-height: 1.12;
  }

  .expertise-card-arrow {
    top: 6.9%;
    right: 6.3%;
    width: 10.1vw;
    height: 10.1vw;
  }

  .expertise-card > p {
    right: 7%;
    bottom: 7.4%;
    left: 7%;
    font-size: 3.8vw;
    line-height: 1.14;
  }

  .expertise-cta {
    right: auto;
    bottom: 3.55%;
    left: 50%;
    width: 55.9vw;
    height: 10.8vw;
    padding: 0 1vw 0 7vw;
    transform: translateX(-50%);
    font-size: 2.85vw;
  }

  .expertise-cta svg {
    width: 8.7vw;
    height: 8.7vw;
    padding: 1.5vw;
  }

  .projects-section {
    height: 164.7vw;
    min-height: 0;
    aspect-ratio: auto;
    border-top-width: 1px;
  }

  .projects-header > div {
    top: 6.75%;
    left: 6.55%;
  }

  .projects-header > div > p {
    font-size: 3.65vw;
    white-space: nowrap;
  }

  .projects-header h2 {
    margin-top: 5.7vw;
    font-size: 11.8vw;
    line-height: 0.9;
    letter-spacing: 0.18em;
  }

  .projects-summary {
    top: 21.8%;
    left: 6.55%;
    font-size: 3.8vw;
    line-height: 1.3;
  }

  .projects-gradient {
    top: 21.85%;
    left: 54%;
    height: 5.1%;
  }

  .projects-grid {
    top: 32.1%;
    right: 6.55%;
    bottom: 7.9%;
    left: 6.55%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    column-gap: 12.5vw;
    row-gap: 7.8vw;
  }

  .project-item,
  .project-item:first-child,
  .project-item + .project-item {
    min-width: 0;
    padding: 0;
    border-left: 0;
  }

  .project-number {
    font-size: 18.2vw;
    line-height: 0.74;
  }

  .project-item h3 {
    margin-top: 9vw;
    max-width: 100%;
    font-size: 3.75vw;
    line-height: 1.22;
  }

  .project-item h3::before {
    top: -4.5vw;
    width: 4vw;
    height: 1px;
  }

  .project-item > a,
  .project-item + .project-item > a {
    bottom: 0;
    left: 0;
    padding-bottom: 1.7vw;
    font-size: 2.65vw;
    white-space: nowrap;
  }

  .project-item > a span {
    margin-left: 1.5vw;
  }
}

.operations-section {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 1917 / 1635;
  overflow: hidden;
  border-top: 1px solid #0ab8e5;
  background: #062e61 url("./assets/operations-map_yeni.webp") center / cover no-repeat;
  background-image: url("./assets/operations-map_yeni.webp"), url("./assets/operations-map.webp");
  background-size: cover, cover;
  background-position: center, center;
  color: #d5ddeb;
}

.operations-stats {
  position: absolute;
  top: 4.65%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: min(1.3vw, 25px);
  width: max-content;
  margin: 0;
  transform: translateX(-50%);
  font-family: "Conthrax", sans-serif;
  font-size: min(2.4vw, 46px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.operations-stats i,
.operation-region p i {
  display: inline-block;
  border-radius: 50%;
  background: #0ab8e5;
}

.operations-stats i {
  width: min(0.62vw, 12px);
  height: min(0.62vw, 12px);
}

.operations-bottom {
  position: absolute;
  inset: 72.25% 4.85% 2.8%;
}

.operations-bottom > h2 {
  margin: 0;
  font-family: "Conthrax", sans-serif;
  font-size: min(1.67vw, 32px);
  line-height: 1;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}

.operations-regions {
  position: absolute;
  top: 14.2%;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: min(1.05vw, 20px);
  height: 53.2%;
}

.operation-region {
  display: flex;
  min-width: 0;
  padding: 0 7.7%;
  flex-direction: column;
  justify-content: center;
  border: min(0.105vw, 2px) solid #0ab8e5;
  border-radius: min(0.9vw, 17px);
  background: rgba(4, 43, 88, 0.2);
}

.operation-region-clone {
  display: none;
}

.operation-region h3 {
  margin: 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(2.345vw, 45px);
  line-height: 1.08;
  font-weight: 700;
  text-transform: uppercase;
}

.operation-region p {
  display: flex;
  align-items: center;
  gap: min(0.42vw, 8px);
  margin: min(0.72vw, 14px) 0 0;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(0.78vw, 15px);
  line-height: 1.1;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.operation-region p i {
  width: min(0.42vw, 8px);
  height: min(0.42vw, 8px);
  flex: 0 0 auto;
}

.operations-progress {
  display: none;
}

.operations-cta {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(23.1vw, 444px);
  height: min(4.12vw, 79px);
  padding: min(0.45vw, 9px) min(0.45vw, 9px) min(0.45vw, 9px) min(2vw, 38px);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #fff;
  color: #090909;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.operations-cta svg {
  width: min(3.2vw, 61px);
  height: min(3.2vw, 61px);
  padding: min(0.57vw, 11px);
  flex: 0 0 auto;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  stroke-width: 2.8;
}

@media (max-width: 600px) {
  .operations-section {
    height: 198.7vw;
    min-height: 0;
    aspect-ratio: auto;
    background-image: url("./assets/operations-map-v2-mobil.webp");
    background-position: center top;
    background-size: cover;
  }

  .operations-stats {
    top: 4.15%;
    gap: 2vw;
    font-size: 3.95vw;
  }

  .operations-stats i {
    width: 1.6vw;
    height: 1.6vw;
  }

  .operations-bottom {
    inset: 127vw 0 0;
  }

  .operations-bottom > h2 {
    font-size: 5.55vw;
    transform: none;
    white-space: nowrap;
  }

  .operations-regions {
    top: 12vw;
    left: -45vw;
    display: flex;
    gap: 3.5vw;
    width: max-content;
    height: 32.15vw;
  }

  .operation-region,
  .operation-region-clone {
    position: relative;
    display: flex;
    width: 61vw;
    overflow: hidden;
    padding: 0 5vw;
    flex: 0 0 61vw;
    border-width: 0.5vw;
    border-radius: 3.5vw;
  }

  .operation-region-clone,
  .operations-regions > .operation-region:nth-child(3) {
    opacity: 0.42;
  }

  .operation-region-clone {
    align-items: flex-end;
    text-align: right;
  }

  .operation-region-clone::before,
  .operation-region-clone::after {
    position: absolute;
    right: 10vw;
    color: #d5ddeb;
    font-family: "Gotham", Arial, sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .operation-region-clone::before {
    content: "&";
    top: 25%;
    font-size: 6.35vw;
    line-height: 1;
    font-weight: 700;
  }

  .operation-region-clone::after {
    content: "KELER";
    bottom: 19%;
    font-size: 2.75vw;
    line-height: 1;
    font-weight: 500;
  }

  .operation-region-clone h3,
  .operations-regions > .operation-region:nth-child(3) h3 {
    font-size: 6.35vw;
    line-height: 1.12;
  }

  .operation-region-clone h3 {
    display: none;
  }

  .operation-region-clone p,
  .operations-regions > .operation-region:nth-child(3) p {
    gap: 1.1vw;
    margin-top: 2.2vw;
    font-size: 2.75vw;
  }

  .operation-region-clone p {
    display: none;
  }

  .operation-region h3 {
    font-size: 7.6vw;
    line-height: 1.08;
  }

  .operation-region p {
    gap: 1.5vw;
    margin-top: 3vw;
    font-size: 3.55vw;
  }

  .operation-region p i {
    width: 1.45vw;
    height: 1.45vw;
  }

  .operations-progress {
    position: absolute;
    bottom: 25vw;
    left: 50%;
    display: block;
    width: 48vw;
    height: 0.55vw;
    transform: translateX(-50%);
    background: rgba(213, 221, 235, 0.72);
  }

  .operations-progress i {
    display: block;
    width: 16%;
    height: 100%;
    background: #fff;
  }

  .operations-cta {
    bottom: 7vw;
    width: 79vw;
    height: 11.7vw;
    padding: 1.25vw 1.25vw 1.25vw 7vw;
    font-size: 3.55vw;
  }

  .operations-cta svg {
    width: 9.2vw;
    height: 9.2vw;
    padding: 1.5vw;
  }
}

.contact-banner {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  aspect-ratio: 1920 / 316;
  padding: 0 19.7%;
  align-items: center;
  justify-content: space-between;
  background: #d5ddeb;
  color: #243559;
}

.contact-banner h2 {
  margin: 0;
  font-family: "Conthrax", sans-serif;
  font-size: min(2.19vw, 42px);
  line-height: 1.18;
  font-weight: 400;
  text-transform: uppercase;
}

.contact-banner > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(13.2vw, 254px);
  height: min(4.2vw, 80px);
  padding: min(0.48vw, 9px) min(0.48vw, 9px) min(0.48vw, 9px) min(2.1vw, 40px);
  border-radius: 999px;
  background: #243559;
  color: #d5ddeb;
  font-family: "Gotham", Arial, sans-serif;
  font-size: min(1.042vw, 20px);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
}

.contact-banner > a svg {
  width: min(3.25vw, 62px);
  height: min(3.25vw, 62px);
  padding: min(0.55vw, 10px);
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d5ddeb;
  color: #243559;
  stroke-width: 2.8;
}

.site-footer {
  position: relative;
  z-index: 3;
  background: #bac8df;
  color: #243559;
  font-family: "Gotham", Arial, sans-serif;
}

.footer-main {
  display: grid;
  width: 100%;
  min-height: min(26.7vw, 513px);
  padding: min(7.4vw, 142px) 4.7% min(5.6vw, 108px);
  grid-template-columns: 22.5% 29.5% 48%;
  align-items: center;
}

.footer-logo {
  display: block;
  width: min(12.2vw, 234px);
  height: auto;
}

.footer-socials {
  display: flex;
  gap: min(0.68vw, 13px);
  margin-top: min(3.75vw, 72px);
}

.footer-socials a,
.footer-socials img {
  display: block;
  width: min(2.55vw, 49px);
  height: min(2.55vw, 49px);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
  padding: min(0.4vw, 8px) 10% 0 0;
}

.footer-nav > div {
  display: flex;
  flex-direction: column;
  gap: min(1.45vw, 28px);
}

.footer-nav a,
.footer-contact {
  font-size: min(1.15vw, 22px);
  line-height: 1.2;
  font-weight: 400;
}

.catalog-link {
  display: inline-flex;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: min(0.12vw, 2px) min(0.28vw, 5px);
  align-items: center;
  gap: min(0.3vw, 6px);
  border-radius: 3px;
  background: rgba(24, 45, 63, 0.72);
  color: #bac8df;
}

.catalog-link svg {
  width: 1em;
  height: 1em;
  stroke-width: 2;
}

.footer-contact {
  display: flex;
  margin: 0;
  flex-direction: column;
  gap: min(1.25vw, 24px);
  font-style: normal;
}

.footer-contact p {
  display: flex;
  margin: 0;
  align-items: flex-start;
  gap: min(0.85vw, 16px);
}

.footer-contact svg {
  width: min(2.05vw, 39px);
  height: min(2.05vw, 39px);
  flex: 0 0 auto;
  color: #6782b1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.footer-contact strong {
  font-weight: 500;
}

.footer-copyright {
  display: flex;
  height: min(3.55vw, 68px);
  margin: 0;
  padding-left: 4.7%;
  align-items: center;
  background: #243559;
  color: #bac8df;
  font-size: min(1.15vw, 22px);
  line-height: 1;
}

.motion-ready .footer-copyright,
.motion-ready .footer-copyright.reveal-up {
  opacity: 1;
  translate: none;
  filter: none;
  transition: none;
}

@media (max-width: 600px) {
  .contact-banner {
    height: 62vw;
    aspect-ratio: auto;
    padding: 0 7.3vw;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }

  .contact-banner h2 {
    margin-top: 14vw;
    font-size: 5.6vw;
    line-height: 1.2;
  }

  .contact-banner > a {
    width: 35.5vw;
    height: 9.5vw;
    margin-top: 7.5vw;
    padding: 1vw 1vw 1vw 5.3vw;
    font-size: 2.8vw;
  }

  .contact-banner > a svg {
    width: 7.5vw;
    height: 7.5vw;
    padding: 1.25vw;
  }

  .footer-main {
    display: flex;
    min-height: 154vw;
    padding: 10vw 5.5vw 8vw;
    align-items: stretch;
    flex-direction: column;
  }

  .footer-brand {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .footer-logo {
    width: 35vw;
  }

  .footer-socials {
    gap: 2.4vw;
    margin-top: 8vw;
  }

  .footer-socials a,
  .footer-socials img {
    width: 8vw;
    height: 8vw;
  }

  .footer-nav {
    height: auto;
    min-height: 44vw;
    margin: 13.5vw 8vw 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-nav > div + div {
    padding-left: 6vw;
    border-left: 1px solid rgba(36, 53, 89, 0.55);
  }

  .footer-nav > div {
    gap: 6.1vw;
    justify-content: flex-start;
  }

  .footer-contact-links {
    gap: 6.1vw;
  }

  .footer-nav a,
  .footer-contact {
    font-size: 3.25vw;
  }

  .catalog-link {
    display: inline-flex;
    width: max-content;
    max-width: calc(100% - 1vw);
    padding: 0.3vw 0.8vw;
    white-space: nowrap;
  }


  .footer-nav .footer-catalog-link {
    width: max-content;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0.3vw 0.8vw;
    transform: none;
    font-size: 3.25vw;
    line-height: 1.05;
  }

  .footer-contact {
    gap: 4vw;
    margin-top: 13vw;
  }

  .footer-contact p {
    gap: 3vw;
  }

  .footer-contact svg {
    width: 5.5vw;
    height: 5.5vw;
  }

  .footer-copyright {
    height: 7.8vw;
    padding: 0;
    justify-content: center;
    font-size: 2.8vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* Operasyon bölgeleri mobil: kaydırmalı kartlar + ortalı istatistik satırı (2026-10-03) */
@media (max-width:600px){
.operations-stats{left:0!important;right:0!important;width:auto!important;justify-content:center;transform:none!important;font-size:2.7vw!important;gap:1.4vw!important}
.operations-regions{left:0!important;right:0!important;width:100%!important;box-sizing:border-box;padding:0 19.5vw;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.operations-regions::-webkit-scrollbar{display:none}
.operations-regions>.operation-region-clone{display:none!important}
.operations-regions>.operation-region{scroll-snap-align:center;scroll-snap-stop:always;opacity:.42;transition:opacity .25s}
.operations-regions>.operation-region.is-active,.operations-regions>.operation-region:nth-child(3).is-active{opacity:1}
.operations-progress i{transition:transform .15s linear}
}

/* Bölge kartı alt yazıları mobilde tek satıra sığsın (en uzun: Suudi Arabistan • Diğer Ülkeler) */
@media (max-width:600px){
.operations-regions>.operation-region p,.operations-regions>.operation-region:nth-child(3) p{font-size:2.55vw!important;gap:1.1vw!important}
}