/* Unified GERMES direction: Orbit hero flowing into the light corporate site. */

:root {
  --hero-black: #080c0e;
  --hero-green-deep: #102b21;
  --hero-green: #244d3c;
  --hero-orange: #eb821c;
  --hero-gold: #eb821c;
}

/* The header belongs to the dark hero at the top and becomes the light navigation on scroll. */
.site-header {
  background: linear-gradient(180deg,rgba(3,8,10,.82),rgba(3,8,10,0));
  border: 0;
  color: #fff;
  min-height: 100px;
  padding: 24px var(--pad);
  position: absolute;
  transition: background .35s ease,border-color .35s ease,color .35s ease,
              min-height .25s ease,padding .25s ease,box-shadow .35s ease;
  width: 100%;
}

.site-header .brand-icon { height: 50px; width: 50px; }
.site-header .brand-name strong { font-size: 24px; font-weight: 500; letter-spacing: .2em; }
.site-header .brand-name small { font-size: 8px; letter-spacing: .08em; }
.site-header nav { font-size: 12px; gap: 22px; letter-spacing: .055em; text-transform: uppercase; }
.site-header nav a::after { background: #fff; height: 1px; }
.site-header .lang span { color: #727a80; }
.site-header .lang button { color: #aeb5bb; font-size: 12px; }
.site-header .lang button[aria-pressed="true"] { color: #fff; }
.site-header .menu-toggle span { background: #fff; }
.site-header .button-small { display: none; }

.site-header.compact {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 35px rgba(14,38,29,.08);
  color: var(--ink);
  min-height: 78px;
  padding: 9px var(--pad);
  position: fixed;
}

.site-header.compact .brand-icon { height: 54px; width: 54px; }
.site-header.compact .brand-name strong { font-size: 23px; letter-spacing: .14em; }
.site-header.compact .brand-name small { font-size: 9px; letter-spacing: .105em; }
.site-header.compact nav { font-size: 13px; letter-spacing: 0; text-transform: none; }
.site-header.compact nav a::after { background: var(--orange); height: 2px; }
.site-header.compact .lang span { color: var(--line); }
.site-header.compact .lang button { color: var(--muted); font-size: 13px; }
.site-header.compact .lang button[aria-pressed="true"] { color: var(--green); }
.site-header.compact .menu-toggle span { background: var(--ink); }

/* Orbit hero, isolated so every following section keeps the light design system. */
.hero {
  background:
    radial-gradient(circle at 82% 72%,rgba(42,101,72,.22),transparent 34%),
    linear-gradient(180deg,var(--hero-black) 0%,var(--hero-black) 68%,var(--hero-green-deep) 100%);
  color: #f2f3f3;
  display: grid;
  gap: 0 70px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(680px,88svh) auto auto auto;
  isolation: isolate;
  max-width: none;
  min-height: 0;
  padding: 0 var(--pad) 54px;
  position: relative;
}

.hero-copy { display: contents; }

.hero-media {
  background: #141c23;
  grid-area: 1 / 1 / 2 / -1;
  height: 100%;
  margin-left: calc(var(--pad) * -1);
  opacity: 1 !important;
  overflow: hidden;
  position: relative;
  transform: none !important;
  width: calc(100% + var(--pad) * 2);
  z-index: -1;
}

.hero-media > img {
  filter: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none !important;
  width: 100%;
}

.hero-media::before {
  background:
    linear-gradient(90deg,rgba(1,7,12,.56),rgba(1,7,12,.03) 78%),
    linear-gradient(0deg,var(--hero-black),transparent 18%,transparent 84%,rgba(4,8,10,.24));
  height: auto;
  inset: 0;
  width: auto;
  z-index: 1;
}

.hero-media::after { display: none; }

.hero-copy > .eyebrow {
  align-self: start;
  color: #d4dbdf;
  font-family: Roboto,Arial,sans-serif;
  font-size: 12px;
  grid-area: 1 / 1 / 2 / -1;
  letter-spacing: .17em;
  margin: 160px 0 0;
  z-index: 2;
}

.hero-copy > .eyebrow::before { background: var(--hero-orange); height: 2px; width: 30px; }

.hero-copy > h1 {
  align-self: center;
  font-family: Roboto,Arial,sans-serif;
  font-size: clamp(40px,4.65vw,72px);
  grid-area: 1 / 1 / 2 / -1;
  line-height: 1.04;
  margin: 0 0 80px;
  max-width: 800px;
  text-shadow: 0 2px 22px rgba(0,0,0,.34);
  z-index: 2;
}

.hero h1 .hero-title-primary,
.hero h1 .hero-title-secondary {
  color: #fff;
  font-family: Roboto,Arial,sans-serif;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.hero h1 .hero-title-primary { font-size: 1em; font-weight: 600; text-transform: uppercase; }
.hero h1 .hero-title-secondary { font-size: .7em; font-weight: 400; margin-top: .28em; }
.hero h1 .heading-underline { background: none !important; text-decoration: none !important; }
.hero-title-secondary::after { background: linear-gradient(var(--hero-gold),var(--hero-gold)) left center / calc(100% - 2px) 1px no-repeat; }
.hero-title-secondary::before { border-color: var(--hero-gold); }

.hero-actions {
  align-self: end;
  gap: 28px;
  grid-area: 1 / 1 / 2 / -1;
  margin: 0 0 110px;
  z-index: 2;
}

.hero-actions .button {
  background: transparent;
  border: 1px solid var(--hero-orange);
  box-shadow: inset 3px 0 var(--hero-orange);
  color: #fff;
  font-family: Roboto,Arial,sans-serif;
  font-size: 12px;
  letter-spacing: .075em;
  min-height: 56px;
  text-transform: uppercase;
}

.hero-actions .button::after { display: none; }
.hero-actions .button:hover,.hero-actions .button:focus-visible { background: var(--hero-orange); border-color: var(--hero-orange); color: #101518; transform: none; }
.hero-actions .text-link { border-color: #758088; color: #fff; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.hero-actions .text-link span { color: var(--hero-orange); }
.hero-actions .text-link:hover,.hero-actions .text-link:focus-visible { background: var(--hero-green); border-color: #59aa80; color: #fff; }

.hero-badge {
  background: transparent;
  border: 0;
  bottom: 100px;
  gap: 18px;
  left: auto;
  padding: 0;
  right: var(--pad);
  transform: none !important;
}

.hero-badge > b { font-family: Roboto,Arial,sans-serif; font-size: 52px; }
.hero-badge > b span { color: var(--hero-orange); }
.hero-badge > span { color: #d2dadd; font-size: 12px; }
.hero .ai-note { background: rgba(8,12,14,.7); color: #c7cdd0; font-size: 11px; letter-spacing: 0; padding: 4px 8px; right: 18px; }

.hero-copy > .lead {
  color: #eceff0;
  font-size: 23px;
  grid-area: 2 / 1 / 4 / 2;
  line-height: 1.6;
  margin: 0;
  max-width: 750px;
  padding-top: 70px;
}

.hero-copy > .hero-note {
  color: #a8adaf;
  font-size: 17px;
  grid-area: 2 / 2 / 3 / 3;
  margin: 0;
  max-width: 620px;
  padding-top: 74px;
}

.hero-copy > .product-descriptor {
  color: #b2c9bd;
  font-size: 12px;
  grid-area: 3 / 2 / 4 / 3;
  letter-spacing: .08em;
  margin: 24px 0 0;
}

.hero .proof-strip {
  border-color: rgba(156,185,170,.24);
  grid-area: 4 / 1 / 5 / -1;
  margin-top: 65px;
}

.hero .proof-strip > div { border-color: rgba(156,185,170,.24); justify-content: flex-start; padding: 32px 24px; }
.hero .proof-strip b { color: #92c8ac; font-family: Roboto,Arial,sans-serif; font-size: 32px; }
.hero .proof-strip > div:first-child b { color: #92c8ac; }
.hero .proof-strip > div:nth-child(2) b { color: #EB821C; }
.hero .proof-strip span { color: #a8adaf; font-size: 13px; }

/* A quiet tonal bridge between the dark hero and the light corporate sections. */
.theme-transition {
  background: var(--hero-green-deep);
  height: clamp(76px,7vw,110px);
  margin: 0;
  overflow: hidden;
  position: relative;
}

.theme-transition::before {
  background: var(--paper);
  bottom: -1px;
  clip-path: polygon(0 72%,100% 28%,100% 100%,0 100%);
  content: '';
  inset: 0;
  position: absolute;
}

/* Native cursor rendering follows the pointer without JS smoothing or lag. */
@media (hover: hover) and (pointer: fine) {
  html, body, body * {
    cursor: url('./assets/cursor-orange-v9.svg') 2 2, auto !important;
  }
  body input, body textarea, body [contenteditable="true"] { cursor: text !important; }
  body :disabled { cursor: not-allowed !important; }
}

.numbers { border-top: 0; }

@media (max-width:1250px) {
  .site-header nav { font-size: 11px; gap: 14px; }
  .hero-actions { margin-bottom: 120px; }
  .hero-badge { bottom: 28px; }
}

@media (max-width:1080px) {
  .site-header nav.open { background: rgba(8,15,19,.97); border-color: #394147; }
  .site-header.compact nav.open { background: #fff; border-color: var(--line); }
  .hero-copy > h1 { max-width: 820px; }
  .hero-copy > .eyebrow { margin-top: 145px; }
}

@media (max-width:760px) {
  .site-header,.site-header.compact { min-height: 82px; padding: 16px var(--pad); }
  .site-header .brand-icon { height: 40px; width: 40px; }
  .site-header .brand-name strong { font-size: 20px; }
  .site-header .brand-name small { font-size: 7px; }
  .site-header.compact .brand-icon { height: 44px; width: 44px; }
  .hero {
    gap: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(660px,88svh) auto auto auto auto;
    padding-bottom: 38px;
  }
  .hero-media { grid-area: 1 / 1 / 2 / 2; }
  .hero-media > img {
    content: url("./assets/orbit-logistics-mobile-v1.png");
    filter: brightness(1.23) saturate(1.04);
    object-position: 88% center;
  }
  .hero-media::before { background: linear-gradient(90deg,rgba(4,10,16,.66),rgba(4,10,16,.12)),linear-gradient(0deg,var(--hero-black),transparent 31%); }
  .hero-copy > .eyebrow { font-size: 10px; grid-area: 1 / 1 / 2 / 2; margin-top: 122px; max-width: 54vw; }
  .hero-copy > h1 { align-self: start; font-size: clamp(31px,8vw,42px); grid-area: 1 / 1 / 2 / 2; margin-top: 205px; max-width: 54vw; }
  .hero h1 .hero-title-secondary { font-size: .72em; margin-top: .3em; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; grid-area: 1 / 1 / 2 / 2; margin-bottom: 54px; }
  .hero-actions .button { font-size: 11px; max-width: 100%; padding: 16px 20px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-badge { display: flex; }
  .hero-copy > .lead { font-size: 20px; grid-area: 2 / 1 / 3 / 2; padding-top: 48px; }
  .hero-copy > .hero-note { font-size: 16px; grid-area: 3 / 1 / 4 / 2; padding-top: 25px; }
  .hero-copy > .product-descriptor { font-size: 11px; grid-area: 4 / 1 / 5 / 2; margin-top: 22px; }
  .hero .proof-strip { gap: 16px; grid-area: 5 / 1 / 6 / 2; margin-top: 38px; }
  .hero .proof-strip > div { padding: 25px 0; text-align: left; }
  .hero .proof-strip b { font-size: 24px; }
  .hero .proof-strip span { font-size: 11px; }
  .theme-transition { height: 64px; }
  .theme-transition::before { clip-path: polygon(0 68%,100% 38%,100% 100%,0 100%); }
}

@media (prefers-reduced-motion:reduce) {
  .site-header { transition: none; }
}