@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --black:#050505;
  --black2:#0d0d0f;
  --white:#f6f6f6;
  --muted:#a7a7aa;
  --line:#252528;
  --red:#ed1724;
  --red-dark:#b90f19;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--black); color:var(--white); font-family:Inter,Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.container { width:min(1180px, calc(100% - 48px)); margin:auto; }

.site-header { position:fixed; top:0; width:100%; z-index:20; background:rgba(5,5,5,.88); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.07); }
.nav { height:84px; display:flex; align-items:center; justify-content:space-between; }
.brand img { width:112px; height:112px; object-fit:contain; mix-blend-mode:screen; }
nav { display:flex; align-items:center; gap:30px; font-size:13px; text-transform:uppercase; letter-spacing:1.3px; font-weight:600; }
nav a { color:#ddd; transition:.2s; }
nav a:hover { color:#fff; }
.nav-cta { border:1px solid var(--red); padding:11px 17px; }
.nav-cta:hover { background:var(--red); }
.menu-toggle { display:none; background:none; color:#fff; border:0; font-size:28px; }

.hero { min-height:850px; display:flex; align-items:center; position:relative; overflow:hidden; background:
  radial-gradient(circle at 75% 50%, rgba(237,23,36,.14), transparent 28%),
  linear-gradient(120deg,#050505 0%,#080809 55%,#111113 100%); }
.hero:after { content:"XPM"; position:absolute; right:-50px; bottom:-110px; font:800 360px/1 'Barlow Condensed'; color:rgba(255,255,255,.025); pointer-events:none; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 70%); }
.hero-content { position:relative; z-index:2; padding-top:90px; max-width:900px; }
.eyebrow,.section-label { color:var(--red); font-size:12px; letter-spacing:3px; font-weight:700; text-transform:uppercase; }
.hero h1,.section h2,.intro h2,.cta h2 { font:700 clamp(55px,7vw,92px)/.93 'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:-1px; margin:20px 0 25px; }
.hero h1 span,.section h2 em,.intro h2 em { color:#fff; font-style:normal; }
.hero p { max-width:610px; color:#bdbdc0; font-size:18px; }
.hero-actions { display:flex; gap:14px; margin-top:35px; }
.btn { display:inline-flex; justify-content:center; align-items:center; min-height:50px; padding:0 25px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; border:1px solid transparent; cursor:pointer; }
.btn-primary { background:var(--red); }
.btn-primary:hover { background:#ff2632; }
.btn-outline { border-color:#555; }
.btn-outline:hover { border-color:#fff; background:#fff; color:#000; }
.hero-line { position:absolute; left:0; bottom:0; height:4px; width:31%; background:var(--red); }

.intro { padding:110px 0; border-bottom:1px solid var(--line); }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:end; }
.intro h2 { font-size:clamp(50px,5vw,74px); margin-bottom:0; }
.intro p { color:#aaa; font-size:17px; max-width:520px; }

.section { padding:120px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:55px; }
.section-heading h2 { font-size:clamp(50px,5vw,70px); margin:15px 0 0; }
.section-heading > p { max-width:390px; color:#999; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card { min-height:270px; background:var(--black); padding:35px; position:relative; transition:.25s; }
.service-card:hover { background:#101012; transform:translateY(-3px); }
.service-card-accent { background:linear-gradient(145deg,#121214,#080808); }
.service-number { color:var(--red); font:600 14px 'Barlow Condensed'; letter-spacing:2px; }
.service-card h3 { font:600 31px/1 'Barlow Condensed'; text-transform:uppercase; margin:45px 0 15px; }
.service-card p { color:#909095; font-size:14px; }

.about { background:#0b0b0d; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.about-panel { min-height:500px; display:flex; align-items:center; justify-content:center; border:1px solid #27272a; background:radial-gradient(circle,rgba(237,23,36,.08),transparent 55%); }
.about-panel img { width:70%; max-width:370px; mix-blend-mode:screen; }
.about h2 { margin:15px 0 25px; font-size:clamp(55px,5vw,74px); }
.about p { color:#999; margin-bottom:18px; max-width:560px; }
.text-link { display:inline-flex; gap:12px; margin-top:18px; text-transform:uppercase; font-size:12px; letter-spacing:2px; font-weight:700; border-bottom:1px solid var(--red); padding-bottom:7px; }
.text-link span { color:var(--red); }

.centered { display:block; text-align:center; }
.centered h2 { margin-bottom:0; }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.value { padding:40px 28px; border-right:1px solid var(--line); }
.value:last-child { border-right:0; }
.value span { color:var(--red); font:600 14px 'Barlow Condensed'; }
.value h3 { font:600 28px 'Barlow Condensed'; text-transform:uppercase; margin:35px 0 10px; }
.value p { color:#8d8d91; font-size:13px; }

.cta { padding:75px 0; background:var(--red); }
.cta .section-label { color:#160000; }
.cta h2 { font-size:clamp(45px,5vw,70px); margin:12px 0 0; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cta .btn-primary { background:#050505; }
.cta .btn-primary:hover { background:#fff; color:#000; }

.contact { background:#080809; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.contact h2 { font-size:clamp(55px,5vw,74px); }
.contact > .container > div > p { color:#999; max-width:490px; }
.contact-details { display:grid; gap:17px; margin-top:35px; }
.contact-details a,.contact-details div { display:grid; grid-template-columns:80px auto; gap:15px; font-size:15px; }
.contact-details span { color:var(--red); font-size:10px; letter-spacing:2px; font-weight:700; padding-top:4px; }
.contact-form { display:grid; gap:18px; }
.contact-form label { color:#aaa; font-size:11px; text-transform:uppercase; letter-spacing:1.5px; }
.contact-form input,.contact-form textarea { display:block; width:100%; margin-top:8px; border:1px solid #303034; background:#111113; color:#fff; padding:14px; font:14px Inter; outline:none; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--red); }
.contact-form textarea { resize:vertical; }
.contact-form small { color:#666; font-size:10px; }

footer { border-top:1px solid var(--line); padding:30px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; color:#68686d; font-size:11px; }
.footer-inner img { width:90px; height:70px; object-fit:contain; mix-blend-mode:screen; }
.footer-inner a { color:#aaa; }

@media(max-width:850px) {
  nav { display:none; position:absolute; top:84px; left:0; right:0; background:#080808; padding:25px; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--line); }
  nav.open { display:flex; }
  .menu-toggle { display:block; }
  .hero { min-height:760px; }
  .intro-grid,.about-grid,.contact-grid { grid-template-columns:1fr; gap:45px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .value:nth-child(2) { border-right:0; }
  .value:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .section-heading { display:block; }
  .section-heading > p { margin-top:25px; }
  .cta-inner { display:block; }
  .cta .btn { margin-top:25px; }
}
@media(max-width:560px) {
  .container { width:min(100% - 30px,1180px); }
  .hero h1 { font-size:54px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .service-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr; }
  .value { border-right:0; border-bottom:1px solid var(--line); }
  .value:last-child { border-bottom:0; }
  .footer-inner { flex-direction:column; text-align:center; }
}