@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --charcoal:#0A0A0A;
  --navy:#16224F;
  --blue:#3F48CC;
  --blue-dark:#2A3199;
  --blue-light:#8791E8;
  --blue-bright:#2F8FFF;
  --orange:#D0490C;
  --orange-dark:#C2410C;
  --grey-bg:#F3F4F7;
  --steel-light:#6A767F;
  --plate:#C9CDD1;
  --paper:#FFFFFF;
  --zinc:#8FA0AA;
  --line:rgba(28,32,35,0.14);
  --line-dark:rgba(255,255,255,0.16);
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 14px rgba(10,10,10,0.08);
  --shadow-lg:0 16px 28px rgba(10,10,10,0.18);
}

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

html{
  scroll-behavior:smooth;
  background:var(--navy);
  overscroll-behavior-y:none;
}

body{
  font-family:'Work Sans', sans-serif;
  color:var(--charcoal);
  background:var(--paper);
  line-height:1.6;
  animation:page-fade-in 0.4s ease;
}

@keyframes page-fade-in{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

body.page-leaving{
  opacity:0;
  transform:translateY(-10px);
  transition:opacity 0.22s ease, transform 0.22s ease;
}

@media (prefers-reduced-motion: reduce){
  body{animation:none;}
  body.page-leaving{transition:none; opacity:1; transform:none;}
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

h1,h2,h3,.eyebrow,nav a,.btn,.stat-num{
  font-family:'Oswald', sans-serif;
}

h1,h2,h3{
  font-weight:600;
  line-height:1.1;
  letter-spacing:0.2px;
}

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

img{max-width:100%; display:block;}

.wrap{
  max-width:1160px;
  margin:0 auto;
  padding:0 32px;
}

:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:3px;
}

header{
  position:sticky;
  top:0;
  z-index:50;
  background:#2B2B2B;
  border-bottom:3px solid var(--blue-light);
  transition:transform 0.3s ease;
}

header.header-hidden{
  transform:translateY(-100%);
}

header::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:calc((100vw - min(100vw, 1160px)) / 2 + 213px);
  background:#4A4A4A;
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 100%, 0 100%);
  z-index:0;
}

header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:66px;
  position:relative;
  z-index:1;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--paper);
  font-size:26px;
  font-weight:600;
  letter-spacing:0.3px;
  margin-left:-134px;
}

.logo .mark{
  height:42px;
  width:auto;
  flex-shrink:0;
  display:block;
}

nav{
  margin-right:-60px;
}

nav ul{
  list-style:none;
  display:flex;
  gap:34px;
}

nav a{
  color:var(--plate);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.4px;
  padding:4px 2px;
  border-bottom:2px solid transparent;
  transition:border-color 0.15s ease, color 0.15s ease;
}

nav a:hover, nav a:focus-visible{
  color:var(--paper);
  border-bottom-color:var(--blue-bright);
}

nav a[aria-current="page"]{
  color:var(--paper);
  border-bottom-color:var(--blue-bright);
}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line-dark);
  border-radius:var(--radius-sm);
  color:var(--paper);
  width:40px; height:40px;
  font-size:18px;
  transition:transform 0.2s ease, border-color 0.2s ease;
}

.nav-toggle:hover{
  transform:translateY(-3px);
  border-color:var(--blue-bright);
}

.lang-switch{
  display:flex;
  align-items:center;
  margin-left:4px;
  padding-left:18px;
  border-left:1px solid var(--line-dark);
}

.lang-dropdown{
  position:relative;
}

.lang-trigger{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--blue-bright);
  border:none;
  border-radius:var(--radius-sm);
  color:var(--charcoal);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.3px;
  padding:6px 10px;
  cursor:pointer;
  transition:filter 0.15s ease;
}

.lang-trigger:hover, .lang-trigger:focus-visible{
  filter:brightness(1.1);
}

.lang-caret{
  transition:transform 0.15s ease;
}

.lang-dropdown.open .lang-caret{
  transform:rotate(180deg);
}

.lang-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:120px;
  display:flex;
  flex-direction:column;
  background:var(--navy);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  z-index:50;
}

.lang-menu[hidden]{
  display:none;
}

.lang-option{
  background:none;
  border:none;
  color:var(--plate);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  text-align:left;
  padding:10px 14px;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}

.lang-option:hover, .lang-option:focus-visible{
  background:var(--blue-dark);
  color:var(--paper);
}

.lang-option.active{
  background:rgba(47,143,255,0.18);
  color:var(--paper);
  box-shadow:inset 3px 0 0 var(--blue-bright);
}

.logo{transition:transform 0.2s ease;}
.logo:hover{transform:translateY(-3px);}

.page-header{
  background:var(--navy);
  color:var(--paper);
  padding:64px 0;
}

.page-header .wrap{
  position:relative;
  left:max(-134px, calc(-1 * (max(0px, (100vw - 1160px) / 2) + 16px)));
}

.page-header .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:0.5px;
  color:var(--blue-light);
  border:1px solid var(--blue);
  border-radius:999px;
  padding:6px 12px;
  margin-bottom:18px;
}

.page-header .eyebrow::before{
  content:'';
  width:6px; height:6px;
  background:var(--blue-light);
  display:inline-block;
}

.page-header h1{
  font-size:clamp(30px, 4vw, 44px);
  max-width:20ch;
  margin-bottom:14px;
}

.page-header p{
  color:var(--plate);
  max-width:52ch;
  font-size:15.5px;
}

.btn{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.5px;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn:hover{transform:translateY(-3px);}
.btn:active{transform:translateY(-1px);}

.btn-primary{
  background:var(--orange);
  color:var(--paper);
  box-shadow:var(--shadow);
}
.btn-primary:hover{background:var(--orange-dark); box-shadow:var(--shadow-lg);}

.btn-ghost{
  border-color:var(--line-dark);
  color:var(--paper);
}
.btn-ghost:hover{border-color:var(--paper); box-shadow:var(--shadow);}

section{padding:96px 0;}
section + section{border-top:1px solid var(--line);}
main > section:first-child{border-top:none;}

.section-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:end;
  margin-bottom:56px;
}

.eyebrow-mini{
  font-size:13px;
  color:var(--blue-dark);
  letter-spacing:0.4px;
  font-weight:600;
  margin-bottom:10px;
  display:block;
}

.section-head h2{font-size:clamp(28px,3.4vw,38px);}

.section-head p{
  color:var(--steel-light);
  font-size:15.5px;
  max-width:46ch;
}

#about .wrap, .about-block .wrap{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:center;
}

.about-img{
  aspect-ratio:1/1;
  background:linear-gradient(160deg, var(--zinc), var(--blue));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  z-index:0;
}

.about-img::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--blue);
  border-radius:var(--radius);
  transform:translate(-24px, 0);
  z-index:-1;
}

.about-img::after{
  content:'';
  position:absolute;
  inset:16px;
  border:1px solid rgba(241,239,233,0.35);
  border-radius:var(--radius-sm);
}

.about-block h2{font-size:clamp(26px,3vw,34px); margin-bottom:18px; max-width:16ch;}

.about-block p{color:var(--steel-light); margin-bottom:16px; max-width:52ch;}

.services-band{background:var(--grey-bg); color:var(--charcoal);}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}

.service{
  padding:0 32px;
  transition:transform 0.25s ease;
}

.service:not(:first-child){
  border-left:1px solid var(--line);
}

.service:first-child{
  padding-left:0;
}

.service:last-child{
  padding-right:0;
}

.service:hover{
  transform:translateY(-6px);
}

.service .num{
  font-family:'Oswald';
  font-size:13px;
  color:var(--blue);
  letter-spacing:1px;
  margin-bottom:22px;
  display:block;
}
.service:nth-child(2) .num{color:var(--blue-dark);}

.service h3{font-size:19px; margin-bottom:10px; font-weight:500;}

.service p{color:var(--steel-light); font-size:14.5px;}

.contact-band{background:var(--grey-bg); color:var(--charcoal);}

.contact-band .wrap{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
}

.contact-band h2{font-size:clamp(26px,3vw,34px); margin-bottom:20px; max-width:14ch;}

.contact-band p.lead{color:var(--steel-light); margin-bottom:30px; max-width:40ch;}

.contact-row{
  display:flex;
  gap:14px;
  padding:16px 0;
  border-top:1px solid var(--line);
  font-size:14.5px;
}
.contact-row:last-of-type{border-bottom:1px solid var(--line);}

.contact-row .k{color:var(--steel-light); min-width:90px;}

.footer-cta{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.55)),
    url('img/gallery/MechGalResult1.jpeg') center/cover no-repeat;
  color:var(--paper);
  padding:28px 0;
  border-top:none;
  border-bottom:3px solid var(--blue-light);
}

.footer-cta::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:39%;
  background:var(--navy);
  clip-path:polygon(0 0, 100% 0, calc(100% - 130px) 100%, 0 100%);
  z-index:0;
}

.footer-cta-grid{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.footer-cta-text{
  padding:24px 28px 24px 0;
  margin-left:-115px;
}

.footer-cta .eyebrow-mini{color:var(--blue-light);}
.footer-cta h2{font-size:clamp(20px, 2.4vw, 27px); margin:6px 0 8px;}
.footer-cta p{color:var(--plate); font-size:15px;}

@media (max-width:640px){
  .footer-cta-grid{flex-direction:column; align-items:flex-start; text-align:left;}
}

footer{
  background:var(--navy);
  color:var(--zinc);
  padding:28px 0;
  font-size:13px;
}

footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:10px;
}

.footer-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.footer-address{
  max-width:300px;
  text-align:right;
}

.footer-privacy-link{
  color:var(--zinc);
  text-decoration:underline;
  text-underline-offset:2px;
}

.footer-privacy-link:hover{
  color:var(--paper);
}

.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:var(--blue);
  color:var(--paper);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
  z-index:60;
}

.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-to-top:hover{
  background:var(--blue-dark);
  transform:translateY(-4px);
}

@media (max-width:860px){
  footer .wrap{justify-content:center; text-align:center;}
  .footer-left{align-items:center;}
  .footer-address{text-align:center; max-width:340px;}

  .logo{margin-left:0; font-size:23px;}
  .page-header .wrap{left:0;}

  header::before{width:345px;}

  .nav-toggle{display:block;}

  nav{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-right:0;
    background:var(--navy);
    border-top:1px solid var(--line-dark);
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height 0.35s ease, opacity 0.25s ease;
  }

  nav.is-open{
    max-height:calc(100vh - 70px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    opacity:1;
  }

  nav ul{
    flex-direction:column;
    gap:0;
  }

  nav ul li a{
    display:block;
    padding:16px 32px;
    border-bottom:1px solid var(--line-dark);
    transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }

  nav ul li a:hover,
  nav ul li a:focus-visible,
  nav ul li a[aria-current="page"]{
    border-bottom-color:#4A4A4A;
    color:var(--paper);
  }

  .lang-switch{
    border-left:none;
    margin-left:0;
    padding:16px 32px;
    justify-content:center;
  }

  .lang-trigger{
    padding:10px 14px;
  }

  .lang-menu{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    min-width:140px;
  }

  .section-head{grid-template-columns:1fr;}

  #about .wrap, .about-block .wrap, .contact-band .wrap{grid-template-columns:1fr;}

  .service-grid{grid-template-columns:1fr; row-gap:32px;}
  .service{border-left:none; padding:0;}
  .service:not(:first-child){
    border-left:none;
    border-top:1px solid var(--line);
    padding-top:32px;
  }

  section{padding:64px 0;}
  .page-header{padding:48px 0;}
}