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

:root{--red:#ef1717;--black:#050505;--white:#fff;--gray:#777;--line:#ddd}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--black);background:#fff}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* HEADER */
.site-header{position:absolute;top:0;left:0;width:100%;z-index:20}
.nav{height:88px;padding:0 3.5vw;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand-seven{font:900 65px/.7 'Barlow Condensed';font-style:italic;color:var(--red)}
.brand-name{font-size:18px;line-height:.9;font-weight:800;letter-spacing:1.5px}
.talk-button{border:1px solid var(--red);color:#fff;padding:14px 20px;font-size:12px;font-weight:800;text-transform:uppercase}
.talk-button span{color:var(--red);font-size:20px;margin-left:17px}

/* HERO */
.hero{min-height:650px;position:relative;overflow:hidden;background:#050505;color:#fff;display:flex;align-items:center}
.hero:before{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 77% 45%,rgba(239,23,23,.2),transparent 25%),
linear-gradient(90deg,#050505 0%,#090909 50%,rgba(5,5,5,.5) 100%)}
.hero:after{content:"";position:absolute;inset:0;background:
linear-gradient(115deg,transparent 0 72%,rgba(239,23,23,.13) 72.2%,transparent 73%),
repeating-linear-gradient(90deg,transparent 0 110px,rgba(255,255,255,.018) 111px 112px)}
.hero-glow{position:absolute;width:500px;height:500px;right:8%;top:80px;background:radial-gradient(circle,rgba(239,23,23,.18),transparent 65%);filter:blur(10px)}
.hero-seven{position:absolute;z-index:1;right:6vw;bottom:-145px;color:transparent;-webkit-text-stroke:4px var(--red);font:900 730px/.72 'Barlow Condensed';font-style:italic;text-shadow:0 0 25px rgba(239,23,23,.45)}
.hero-content{position:relative;z-index:3;margin-left:4.2vw;padding-top:50px}
.eyebrow{color:var(--red);font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}
.hero h1{font:900 clamp(58px,7vw,108px)/.84 'Barlow Condensed';letter-spacing:-2px;margin-top:14px}
.hero h1 span{color:var(--red)}
.subhead{font-size:17px;margin-top:32px}
.copy{font-size:15px;color:#aaa;margin-top:8px}
.scroll{position:absolute;z-index:5;bottom:25px;left:50%;width:36px;height:50px;border:1px solid #fff;border-radius:20px;display:grid;place-items:center;color:#fff;font-size:23px;transform:translateX(-50%)}

/* EXPERTISE */
.expertise{padding:65px 3vw;display:grid;grid-template-columns:270px 1fr;background:#fff}
.expertise-intro{padding-right:35px}
.expertise h2,.featured h2,.clients h2{font:900 40px/.9 'Barlow Condensed';margin-top:12px}
.red-line{width:38px;height:3px;background:var(--red);margin:22px 0}
.expertise-intro>p:last-child{font-size:12px;line-height:1.7;color:#555}
.services{display:grid;grid-template-columns:repeat(7,1fr)}
.services article{border-left:1px solid var(--line);padding:0 16px;min-height:240px}
.services b{font:800 52px/.8 'Barlow Condensed';color:#d5d5d5}
.services span{display:block;color:var(--red);font-size:29px;margin:28px 0 17px}
.services h3{font-size:12px;margin-bottom:13px}
.services p{font-size:10px;line-height:1.65;color:#666}

/* FEATURED */
.featured{display:grid;grid-template-columns:220px repeat(3,1fr);gap:12px;padding:60px 3vw;background:#050505;color:#fff}
.featured h2{font-size:40px}
.featured h2 span{color:var(--red)}
.featured-heading>p:last-child{font-size:12px;line-height:1.6;color:#aaa}
.project{background:#111;border:1px solid #222}
.project img{width:100%;height:235px;object-fit:cover}
.project>div{padding:15px 16px 19px}
.project h3{font-size:13px}
.project p{font-size:9px;color:#aaa;letter-spacing:.4px;margin-top:7px}

/* CLIENTS */
.clients{padding:55px 3vw 60px;background:#fff;display:grid;grid-template-columns:270px 1fr;align-items:center}
.clients h2 span{color:var(--red)}
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:18px;border-left:1px solid var(--line);padding-left:35px}
.logo-grid img{width:100%;height:60px;object-fit:contain;filter:grayscale(10%);mix-blend-mode:multiply}
.logo-grid .tsm{grid-column:span 1;height:48px}

/* FOOTER */
footer{height:72px;background:#050505;color:#aaa;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;font-size:11px}
footer a{color:#fff;font-weight:800}
footer a:hover{color:var(--red)}

@media(max-width:1100px){
.expertise{grid-template-columns:1fr}
.expertise-intro{padding-right:0;margin-bottom:35px}
.services{grid-template-columns:repeat(4,1fr)}
.services article:nth-child(5){border-left:0}
.featured{grid-template-columns:1fr 1fr}
.featured-heading{grid-column:1/-1}
.clients{grid-template-columns:1fr;gap:30px}
.logo-grid{border-left:0;padding-left:0}
}
@media(max-width:700px){
.nav{height:76px;padding:0 20px}
.brand-seven{font-size:54px}.brand-name{font-size:15px}
.talk-button{padding:11px 13px;font-size:10px}
.hero{min-height:650px}
.hero-content{margin-left:20px;padding-right:20px}
.hero h1{font-size:60px}
.hero-seven{right:-120px;bottom:-80px;font-size:500px}
.expertise{padding:50px 20px}
.services{grid-template-columns:repeat(2,1fr)}
.services article{border-top:1px solid var(--line);border-left:0;padding:25px 12px;min-height:190px}
.featured{grid-template-columns:1fr;padding:50px 20px}
.clients{padding:50px 20px}
.logo-grid{grid-template-columns:repeat(2,1fr)}
footer{padding:20px;height:auto;gap:20px}
}
@media(max-width:430px){
.hero h1{font-size:52px}
.services{grid-template-columns:1fr}
.logo-grid{grid-template-columns:1fr 1fr}
}
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{--red:#f01919;--black:#050505;--border:#d8d8d8}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:#050505;background:#fff}
a{text-decoration:none;color:inherit}

.hero{min-height:420px;position:relative;overflow:hidden;color:#fff;background:linear-gradient(90deg,#050505 0%,#050505 35%,#151515 100%)}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 40%,rgba(240,25,25,.2),transparent 25%),linear-gradient(0deg,rgba(0,0,0,.75),transparent 65%)}
.topbar{height:88px;padding:0 3.2vw;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.logo{display:flex;align-items:center;gap:10px;color:#fff}
.logo b{font:900 65px/.7 'Barlow Condensed';font-style:italic;color:var(--red)}
.logo span{font-size:18px;line-height:.9;font-weight:800;letter-spacing:1.5px}
.talk{border:1px solid var(--red);padding:14px 20px;color:#fff;font-size:12px;font-weight:800}
.talk i,.form button i{color:var(--red);font-style:normal;font-size:20px;margin-left:18px}
.hero-content{position:relative;z-index:3;padding:45px 3.2vw 70px}
.hero h1{font:900 clamp(55px,6vw,92px)/.88 'Barlow Condensed';letter-spacing:-1px}
.hero h1 span{color:var(--red)}
.line{width:38px;height:3px;background:var(--red);margin:24px 0}
.hero p{font-size:17px;line-height:1.55;color:#eee}
.hero-seven{position:absolute;right:8%;bottom:-125px;color:transparent;-webkit-text-stroke:3px var(--red);font:900 600px/.75 'Barlow Condensed';font-style:italic;opacity:.9}

.contact{display:grid;grid-template-columns:35% 65%;min-height:535px;padding:65px 3.2vw;background:#fff}
.intro{padding:5px 65px 20px 0;border-right:1px solid var(--border)}
.intro small{color:var(--red);font-size:13px;font-weight:800}
.intro h2{font:900 54px/.9 'Barlow Condensed';margin-top:16px}
.intro p{max-width:420px;font-size:16px;line-height:1.65;color:#222}
.form{padding-left:60px}
form{width:100%;max-width:900px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;margin-bottom:18px;font-size:11px;font-weight:800}
label em{color:var(--red);font-style:normal}
input,textarea{display:block;width:100%;margin-top:8px;padding:14px;border:1px solid var(--border);font:14px Inter;background:#fff;outline:0}
input:focus,textarea:focus{border-color:var(--red)}
textarea{min-height:120px;resize:vertical}
.form button{border:0;background:var(--black);color:#fff;padding:16px 24px;font:800 12px Inter;cursor:pointer}
.form button:hover{background:var(--red)}
.form button:hover i{color:#fff}
footer{height:70px;display:flex;align-items:center;padding:0 3.2vw;background:#050505;color:#fff;font-size:11px}