:root{
  color-scheme:dark;
  --bg:#020202;
  --panel:#070707;
  --panel-2:#111;
  --text:#f7f7f7;
  --muted:#c6c6c6;
  --line:rgba(255,255,255,.18);
  --line-strong:rgba(255,255,255,.34);
  --steel:#f2f2f2;
  --steel-dark:#8f8f8f;
  --signal:#e10d08;
  --max:1180px;
  --pad:clamp(18px,4vw,48px);
}

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

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  min-height:100vh;
  font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.045), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(225,13,8,.08), transparent 26%),
    linear-gradient(180deg, #070707, #010101 72%);
  line-height:1.55;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.014) 1px, transparent 1px),
    repeating-radial-gradient(circle at 18% 20%, rgba(255,255,255,.028) 0 1px, transparent 1px 4px);
  background-size:78px 78px,78px 78px,8px 8px;
  opacity:.36;
  pointer-events:none;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(0,0,0,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
}

.navbar{
  width:min(100%, var(--max));
  min-height:66px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:22px;
  padding:9px var(--pad);
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  margin-right:auto;
  font-family:"Barlow Condensed","Montserrat",sans-serif;
  color:#fff;
  font-size:clamp(22px,2.35vw,30px);
  font-weight:900;
  font-style:italic;
  line-height:1;
  letter-spacing:.02em;
  text-shadow:0 3px 10px rgba(0,0,0,.72);
}

.brand-mark{
  width:42px;
  height:40px;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.52));
}

.nav-links{
  display:flex;
  align-items:center;
  gap:24px;
  color:#efefef;
  font-family:"Barlow Condensed","Montserrat",sans-serif;
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.nav-links a:hover{color:#fff}

.nav-cta{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  color:#fff;
  font-family:"Barlow Condensed","Montserrat",sans-serif;
  font-size:20px;
  font-weight:800;
  letter-spacing:.055em;
  background:
    linear-gradient(90deg, var(--signal) 0 4px, transparent 4px),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.4);
}

.hero{
  position:relative;
  min-height:0;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.68) 55%, rgba(0,0,0,.96)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.032) 0 1px, transparent 1px 42px),
    linear-gradient(135deg, #111, #050505 48%, #000);
}

.hero-bg::before{
  content:"";
  position:absolute;
  left:-70px;
  top:0;
  width:34vw;
  min-width:280px;
  height:100%;
  background:
    linear-gradient(110deg, rgba(225,13,8,.28), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.11), transparent 42%),
    repeating-linear-gradient(90deg, #252525 0 24px, #111 24px 48px);
  clip-path:polygon(0 0, 72% 0, 42% 100%, 0 100%);
  opacity:.78;
}

.hero-inner{
  position:relative;
  width:min(100%, var(--max));
  min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 760px);
  align-items:center;
  justify-content:start;
  padding:52px var(--pad) 58px;
}

.hero-copy{
  max-width:780px;
}

.hero-subbrand{
  width:min(100%, 650px);
  margin:0 0 26px;
  padding-top:0;
  color:#f0f0f0;
  font-family:"Barlow Condensed","Montserrat",sans-serif;
  font-size:clamp(21px,2.1vw,28px);
  font-weight:700;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
  text-shadow:0 5px 14px rgba(0,0,0,.62);
}

.hero-subbrand::before{
  content:"";
  display:block;
  width:min(260px, 54vw);
  height:3px;
  margin-bottom:18px;
  background:linear-gradient(90deg, var(--signal), rgba(255,255,255,.78), transparent);
}

.hero h1{
  max-width:650px;
  font-family:"Barlow Condensed","Montserrat",sans-serif;
  font-size:clamp(42px,5vw,68px);
  line-height:.96;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
  text-shadow:0 6px 18px rgba(0,0,0,.68);
}

.hero h1::after{
  content:"";
  display:block;
  width:min(260px,44vw);
  height:4px;
  margin:22px 0 0;
  background:linear-gradient(90deg, var(--signal), rgba(255,255,255,.76), transparent);
}

.hero p{
  max-width:680px;
  margin-top:18px;
  color:#ededed;
  font-size:clamp(18px,1.7vw,23px);
  font-weight:600;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}

.btn{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  font-weight:800;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.035);
}

.btn.primary{
  color:#fff;
  background:
    linear-gradient(180deg, #ef130e, #9f0704);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 12px 24px rgba(225,13,8,.18);
}

.btn.secondary{
  color:#f4f5f4;
  background:rgba(0,0,0,.24);
}

.section{
  width:min(100%, var(--max));
  margin:0 auto;
  padding:84px var(--pad);
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-bottom:36px;
}

.section-head.left{
  justify-content:flex-start;
}

.section-head span{
  width:86px;
  height:3px;
  background:linear-gradient(90deg, var(--signal), rgba(255,255,255,.82));
}

.section-head h2{
  font-family:"Barlow Condensed","Montserrat",sans-serif;
  color:#fff;
  font-size:clamp(38px,5vw,64px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
  line-height:1;
  text-shadow:0 5px 16px rgba(0,0,0,.6);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.22);
}

.service-card{
  min-height:270px;
  padding:30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    var(--panel);
}

.service-card i{
  color:#fff;
  font-size:58px;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.12));
}

.service-card h3{
  margin-top:22px;
  color:#fff;
  font-family:"Barlow Condensed","Montserrat",sans-serif;
  font-size:31px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
}

.service-card p{
  margin-top:16px;
  color:#d4d4d4;
  font-size:16px;
  font-weight:600;
}

.contact-card p{
  max-width:620px;
  color:#e4e4e4;
  font-size:20px;
  font-weight:600;
}

.contact-card{
  display:grid;
  grid-template-columns:minmax(0,.92fr) 1.08fr;
  gap:34px;
  padding:34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    #050505;
  border:1px solid var(--line-strong);
}

.contact-card > *{
  min-width:0;
}

.contact-list{
  display:grid;
  gap:12px;
  margin-top:28px;
}

.contact-list a{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:52px;
  color:#f4f4f4;
  font-weight:700;
}

.contact-list i{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(225,13,8,.22);
  border:1px solid rgba(225,13,8,.42);
}

.contact-list span{
  min-width:0;
  overflow-wrap:anywhere;
}

.contact-card iframe{
  width:100%;
  min-height:360px;
  border:0;
  filter:saturate(.35) contrast(1.12) grayscale(.25);
}

.site-footer{
  width:min(100%, var(--max));
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:28px var(--pad) 40px;
  color:#c8c8c8;
  border-top:1px solid var(--line);
  font-weight:700;
}

@media (max-width:980px){
  .nav-links{display:none}

  .hero-inner{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:54px;
    padding-bottom:54px;
  }

  .hero{min-height:0}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .contact-card{grid-template-columns:1fr}
}

@media (max-width:620px){
  .navbar{
    min-height:60px;
    gap:10px;
  }

  .brand span{font-size:22px}
  .brand-mark{width:36px;height:34px}

  .nav-cta{
    width:42px;
    height:42px;
    padding:0;
    justify-content:center;
    font-size:22px;
  }

  .nav-cta span{display:none}

  .hero-inner{
    padding:38px var(--pad) 48px;
  }

  .hero-subbrand{
    margin:0 0 24px;
    font-size:17px;
    letter-spacing:.09em;
  }

  .hero h1{
    font-size:48px;
  }

  .hero p{
    font-size:19px;
  }

  .section{
    padding-top:58px;
    padding-bottom:58px;
  }

  .section-head{
    justify-content:flex-start;
    gap:14px;
  }

  .section-head span{width:44px}
  .section-head h2{font-size:38px;letter-spacing:.08em}

  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:0;padding:26px}

  .contact-card{padding:22px}
  .contact-card iframe{min-height:300px}

  .site-footer{
    flex-direction:column;
  }
}