:root{
  --black:#1D1D1B;
  --panel:#252523;
  --line:rgba(245,244,242,0.12);
  --red:#E52421;
  --white:#F5F4F2;
  --ink-1:#B7B5B1;
  --container:1140px;
  --gutter:clamp(24px,5vw,64px);
  --dur:280ms;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; background:none; border:none; color:inherit; cursor:pointer;}
ul,ol{list-style:none; margin:0; padding:0;}
h1,h2,h3,p{margin:0;}
img{max-width:100%; display:block;}
::selection{background:var(--red); color:var(--white);}
:focus-visible{outline:2px solid var(--red); outline-offset:3px;}

.skip{
  position:absolute; left:-999px; top:0;
  background:var(--red); color:var(--white);
  padding:12px 20px; z-index:100;
}
.skip:focus{left:16px; top:16px;}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}

/* ---------- type helpers ---------- */
.eyebrow{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 18px;
}
.section__title{
  font-size:clamp(28px,4vw,44px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.01em;
  max-width:18ch;
  margin:0 0 20px;
}
.section__lede{
  font-size:clamp(15px,1.4vw,17px);
  color:var(--ink-1);
  max-width:52ch;
  margin:0 0 8px;
}
.mark{color:var(--red);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 30px;
  font-size:14.5px;
  font-weight:700;
  background:var(--red);
  color:var(--white);
  border:1px solid var(--red);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{background:transparent; color:var(--red);}
.btn--outline{background:transparent; color:var(--white); border-color:var(--line);}
.btn--outline:hover{border-color:var(--white);}
.btn--sm{padding:10px 20px; font-size:13.5px;}
.btn--block{width:100%;}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(29,29,27,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:18px var(--gutter);
  display:flex;
  align-items:center;
  gap:36px;
}
.logo{
  display:inline-flex; align-items:center;
  background:var(--white);
  padding:8px 14px;
  margin-right:auto;
  font-family:'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:800;
  font-size:17px;
  letter-spacing:0.01em;
  line-height:1;
}
.logo__belex{color:var(--black);}
.logo__ads{color:var(--red);}
.nav__links{display:flex; gap:30px; font-size:14.5px; color:var(--ink-1);}
.nav__links a:hover{color:var(--white);}

.burger{display:none; flex-direction:column; gap:5px; width:20px; padding:6px 0;}
.burger span{height:1.5px; width:100%; background:var(--white); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg);}

.mobile-nav{
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden;
  background:var(--black);
  border-top:1px solid var(--line);
  transition:max-height var(--dur) var(--ease);
}
.mobile-nav.is-open{max-height:340px;}
.mobile-nav a{padding:16px var(--gutter); border-bottom:1px solid var(--line); font-size:15.5px;}
.mobile-nav .btn{margin:18px var(--gutter);}

@media (max-width:840px){
  .nav__links, .nav__inner > .btn{display:none;}
  .burger{display:flex;}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(64px,10vw,120px);}
.hero__grid{
  display:grid;
  grid-template-columns:1.2fr 0.9fr;
  gap:clamp(32px,6vw,72px);
  align-items:center;
}
.hero__headline{
  font-size:clamp(36px,5.6vw,64px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0 0 26px;
}
.hero__lede{
  font-size:clamp(16px,1.6vw,18.5px);
  color:var(--ink-1);
  max-width:46ch;
  margin:0 0 36px;
}
.hero__ctas{display:flex; gap:16px; flex-wrap:wrap;}

.hero__panel{
  border:1px solid var(--line);
  background:var(--panel);
}
.hero__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  color:var(--ink-1);
}
.hero__row i{width:8px; height:8px; border:1px solid var(--ink-1); display:inline-block;}
.hero__row--end{border-bottom:none; color:var(--white); font-weight:700;}
.hero__row--end i{background:var(--red); border-color:var(--red);}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__panel{order:-1;}
}

/* ---------- sections ---------- */
.section{padding-block:clamp(72px,10vw,120px); border-top:1px solid var(--line);}
.section--alt{background:var(--panel);}

/* process */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:8px;
}
.process li{background:var(--panel); padding:32px 26px;}
.process__num{
  display:block;
  font-size:13px;
  color:var(--red);
  font-weight:700;
  margin-bottom:18px;
}
.process h3{font-size:18px; font-weight:700; margin:0 0 10px;}
.process p{font-size:14px; color:var(--ink-1);}
@media (max-width:820px){
  .process{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .process{grid-template-columns:1fr;}
}

/* results */
.results{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:8px;
}
.result{
  background:var(--black);
  padding:36px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.result--wide{grid-column:1 / -1;}
.result__num{
  font-size:clamp(30px,3.4vw,42px);
  font-weight:700;
  color:var(--red);
  line-height:1;
}
.result__metric{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;}
.result__client{font-size:13.5px; color:var(--ink-1);}
@media (max-width:820px){
  .results{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .results{grid-template-columns:1fr;}
  .result--wide{grid-column:auto;}
}

/* work */
.work__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  align-items:start;
}
.tags{display:flex; flex-wrap:wrap; gap:12px; padding-top:8px;}
.tags li{
  border:1px solid var(--line);
  padding:10px 18px;
  font-size:13.5px;
  color:var(--ink-1);
}
@media (max-width:820px){
  .work__grid{grid-template-columns:1fr;}
}

/* contact */
.contact__grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(32px,6vw,72px);
}
.contact__intro{position:sticky; top:110px; align-self:start;}
.mail{
  display:inline-block;
  margin-top:24px;
  font-size:15px;
  font-weight:700;
  color:var(--white);
  border-bottom:1px solid var(--line);
}
.mail:hover{color:var(--red); border-color:var(--red);}

.form{display:flex; flex-direction:column; gap:22px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
label{font-size:13px; color:var(--ink-1);}
input,select,textarea{
  background:var(--black);
  border:1px solid var(--line);
  color:var(--white);
  font-family:inherit;
  font-size:15px;
  padding:13px 15px;
  resize:vertical;
  transition:border-color var(--dur) var(--ease);
}
.section--alt input,
.section--alt select,
.section--alt textarea{background:var(--black);}
select{appearance:none; -webkit-appearance:none;}
select option{background:var(--black);}
input:focus,select:focus,textarea:focus{border-color:var(--red);}
.error{display:none; font-size:12.5px; color:var(--red);}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:var(--red);}
.field.has-error .error{display:block;}

.success{
  padding:44px 34px;
  border:1px solid var(--line);
  background:var(--black);
}
.success h3{font-size:22px; margin:0 0 10px; color:var(--red);}
.success p{color:var(--ink-1); margin:0;}

@media (max-width:820px){
  .contact__grid{grid-template-columns:1fr;}
  .contact__intro{position:static;}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr;}
}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);}
.footer__inner{
  display:flex; flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:32px;
}
.footer__links{display:flex; gap:26px; font-size:13.5px; color:var(--ink-1);}
.footer__links a:hover{color:var(--white);}
.footer__copy{font-size:13px; color:var(--ink-1);}