:root{
  --navy-950:#020f1f;
  --navy-900:#042e5a;
  --navy-800:#0a3d70;
  --navy-700:#155188;
  --navy-400:#5a86b3;
  --gray-200:#dfe4ea;
  --gray-300:#c3cad3;
  --gray-500:#8a95a3;
  --gray-700:#4a5561;
  --white:#ffffff;

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{height:100%;}

body{
  background:
    radial-gradient(ellipse 120% 80% at 15% 0%, rgba(21,81,136,0.35), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, #031f3d 100%);
  color:var(--white);
  font-family:var(--font-body);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* Blueprint grid backdrop — nods to the technical drawings of a maintenance operation */
.grid-overlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 85%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 85%);
}

.page{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0 6vw 28px;
}

/* ---------- Top bar ---------- */
/* Full-bleed white band — the logo is navy-on-white, so it needs a real
   white ground rather than a boxed plate floating on the dark hero. */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  background:var(--white);
  margin:0 -6vw;
  padding:18px 6vw;
  box-shadow:0 4px 24px rgba(2,15,31,0.18);
  position:relative;
  z-index:2;
}

.logo{
  display:flex;
  align-items:center;
  gap:16px;
}

.logo-plate{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}

.logo-mark{
  display:block;
  height:38px;
  width:auto;
}

.logo-sub{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.14em;
  color:var(--gray-700);
  border-left:1px solid var(--gray-200);
  padding-left:16px;
  display:none;
}

@media (min-width:520px){
  .logo-sub{display:inline;}
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
}

.lang-divider{color:var(--gray-300);}

.lang-btn{
  background:none;
  border:none;
  color:var(--gray-500);
  cursor:pointer;
  padding:6px 4px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  transition:color .2s ease;
}
.lang-btn:hover{color:var(--navy-800);}
.lang-btn.is-active{color:var(--navy-900);font-weight:600;}
.lang-btn:focus-visible,
.contact-item:focus-visible{
  outline:2px solid var(--navy-400);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Hero ---------- */
.hero{
  max-width:780px;
  margin:8vh auto 6vh;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.24em;
  color:var(--navy-400);
  margin-bottom:22px;
}

.headline{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.4rem, 6.4vw, 4.6rem);
  line-height:1.06;
  letter-spacing:-0.01em;
  color:var(--white);
}

.lede{
  margin-top:22px;
  max-width:560px;
  color:var(--gray-300);
  font-size:1.02rem;
  line-height:1.65;
}

/* ---------- Rail track signature element ---------- */
.track{
  position:relative;
  width:min(520px, 78vw);
  height:34px;
  margin-top:52px;
}

.track-line{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:2px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(
    90deg,
    var(--navy-700) 0px,
    var(--navy-700) 3px,
    transparent 3px,
    transparent 14px
  );
}
.track-line::before,
.track-line::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1px;
  background:rgba(255,255,255,0.14);
}
.track-line::before{top:-9px;}
.track-line::after{top:9px;}

.track-runner{
  position:absolute;
  top:50%;
  left:0;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 0 0 5px rgba(255,255,255,0.08), 0 0 14px rgba(255,255,255,0.5);
  transform:translate(-50%,-50%);
  animation:runner 3.6s ease-in-out infinite;
}

@keyframes runner{
  0%{left:0%;}
  50%{left:100%;}
  100%{left:0%;}
}

.track-label{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.18em;
  color:var(--gray-500);
}

/* ---------- Group companies ---------- */
.group{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:26px;
  margin-bottom:6vh;
}

.group-title{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  color:var(--navy-400);
  text-align:center;
  margin-bottom:20px;
}

.group-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  max-width:980px;
  margin:0 auto;
}

.group-item{
  padding:16px 18px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  background:rgba(255,255,255,0.02);
  color:inherit;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.group-item:hover{
  border-color:var(--navy-400);
  background:rgba(255,255,255,0.045);
  transform:translateY(-2px);
}

.group-name{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  font-size:0.95rem;
  color:var(--white);
}

.group-arrow{
  color:var(--navy-400);
  flex-shrink:0;
}

.group-desc{
  font-size:0.8rem;
  color:var(--gray-300);
  line-height:1.4;
}

/* ---------- Contact / footer ---------- */
.contact{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:26px;
}

.contact-title{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  color:var(--navy-400);
  text-align:center;
  margin-bottom:20px;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  max-width:980px;
  margin:0 auto;
}

.contact-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  background:rgba(255,255,255,0.02);
  color:inherit;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.contact-item:hover{
  border-color:var(--navy-400);
  background:rgba(255,255,255,0.045);
  transform:translateY(-2px);
}

.contact-icon{
  color:var(--navy-400);
  flex-shrink:0;
  margin-top:2px;
}

.contact-text{display:flex;flex-direction:column;gap:4px;min-width:0;}

.contact-label{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.14em;
  color:var(--gray-500);
  text-transform:uppercase;
}

.contact-value{
  font-size:0.9rem;
  color:var(--gray-200);
  line-height:1.4;
  word-break:break-word;
}

.copyright{
  margin-top:26px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  color:var(--gray-700);
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .contact-grid, .group-grid{grid-template-columns:1fr;}
  .page{padding:0 6vw 22px;}
  .topbar{padding:14px 6vw;}
  .hero{margin:8vh auto 5vh;}
}

@media (prefers-reduced-motion: reduce){
  .track-runner{animation:none; left:50%;}
}