*{box-sizing:border-box}
:root{
  --navy:#031522;
  --navy2:#061d2d;
  --gold:#e0a52d;
  --white:#f7f8f8;
  --soft:#c8d3db;
  --line:rgba(213,225,232,.45);
}
html,body{margin:0;min-width:320px;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#061726;color:var(--black)}
body{min-height:100vh}
.page{
  min-height:100vh;
  display:grid;
  grid-template-rows:104px minmax(650px,1fr) 58px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(1,18,30,.12) 0%,rgba(2,18,29,.02) 56%,rgba(0,10,17,.18) 100%),
    url("assets/x7_L.jpg") center center/cover no-repeat;
}
.page:before{
  content:"";
  position:absolute;
  inset:104px 0 58px 0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(138,178,201,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,178,201,.12) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.65) 34%,transparent 67%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.65) 34%,transparent 67%);
}
.header{
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.35%;
  background:rgba(2,18,29,.91);
  border-bottom:1px solid var(--line);
}
.brand{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:24px;
  text-decoration:none;
  color:var(--white);
  line-height:1;
}
.brand:before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:2px;height:58px;
  background:var(--gold);
}
.brand-name{font-size:30px;font-weight:700;letter-spacing:7px}
.brand-sub{margin-top:8px;font-size:15px;letter-spacing:9px;color:#708698}
.nav{height:100%;display:flex;align-items:center;gap:46px;font-size:14px;letter-spacing:4px;white-space:nowrap}
.nav a{height:58px;display:flex;align-items:center;padding-left:42px;border-left:2px solid var(--gold);color:#fff;text-decoration:none}
.nav a:hover,.contact-card a:hover{color:#f2b848}
.hero{
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 315px;
  align-items:center;
  gap:5vw;
  padding:4.5vh 4.9% 4vh;
}
.hero-copy{align-self:center;max-width:1040px}
.eyebrow{display:flex;align-items:center;gap:24px;color:var(--gold);font-size:15px;font-weight:700;letter-spacing:5px;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.rule{height:1px;width:260px;background:var(--gold)}
h1{margin:28px 0 25px;line-height:.82;letter-spacing:-4px}
h1 span{display:block}
.bethlehem{font-size:clamp(78px,7.7vw,130px);font-weight:900;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.18)}
.software{
  font-size:clamp(82px,8.2vw,138px);
  font-weight:900;
  color:rgba(4,27,43,.20);
  -webkit-text-stroke:2px #dce6ec;
  paint-order:stroke fill;
  text-shadow:0 2px 10px rgba(0,0,0,.10);
}
.short-rule{display:block;width:100px;height:2px;background:var(--gold);margin-bottom:25px}
.tagline p{margin:0;font-size:22px;letter-spacing:4px;color:#eef4f7;text-shadow:0 2px 9px rgba(0,0,0,.45)}
.contact-card{
  align-self:center;
  width:100%;
  padding:31px 25px 33px;
  background:rgba(2,20,31,.80);
  border:1px solid rgba(218,230,236,.52);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  backdrop-filter:blur(5px);
}
.card-rule{display:block;width:74px;height:1px;background:var(--gold);margin-bottom:25px}
.contact-card h2{margin:0 0 20px;color:#e8ad34;font-size:13px;letter-spacing:3px}
.contact-card address{font-style:normal;font-size:14px;line-height:1.65;color:#f3f6f7}
.card-rule.lower{margin:23px 0}
.contact-card a{color:#f3f6f7;text-decoration:none;font-size:13px;overflow-wrap:anywhere}
.footer{
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.35%;
  background:rgba(2,18,29,.91);
  border-top:1px solid var(--line);
  color:#c6d1d8;
  font-size:9px;
  letter-spacing:2px;
}
@media(max-width:1050px){
  .page{grid-template-rows:92px auto auto;background-position:58% center}
  .header{padding:0 5%}
  .brand-name{font-size:24px}.brand-sub{font-size:12px}.brand:before{height:50px}
  .nav{font-size:12px;gap:24px}.nav span{display:none}
  .hero{grid-template-columns:1fr;padding:65px 6% 45px;gap:35px}
  .contact-card{max-width:430px}
  .footer{padding:18px 5%;gap:18px}
}
@media(max-width:650px){
  .page{background-position:62% center}
  .brand-name{font-size:19px;letter-spacing:4px}.brand-sub{font-size:10px;letter-spacing:5px}
  .nav a{padding-left:18px;letter-spacing:2px}
  .eyebrow{font-size:10px;letter-spacing:2.5px;gap:12px}.rule{width:55px}
  h1{letter-spacing:-2px;margin-top:23px}
  .bethlehem{font-size:clamp(48px,15vw,78px)}
  .software{font-size:clamp(51px,16vw,82px);-webkit-text-stroke:1px #dce6ec}
  .tagline p{font-size:16px;letter-spacing:2px}
  .footer{flex-direction:column;align-items:flex-start;font-size:8px}
}