html {
  scroll-behavior: smooth;
}

.mesh {
  background:
    radial-gradient(circle at 75% 28%, rgba(240, 75, 63, 0.42), transparent 25%),
    radial-gradient(circle at 55% 70%, rgba(106, 36, 27, 0.42), transparent 34%),
    radial-gradient(circle at 20% 20%, #21314b, transparent 28%),
    #0f172a;
  transition: background-position 0.25s ease;
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f04b3f;
}

.filter {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.filter.active,
.filter:hover {
  border-color: #f04b3f;
  background: #f04b3f;
  color: #fff;
}

.work-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: 1rem;
  background: #182133;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.work-card:hover {
  border-color: rgba(240, 75, 63, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.work-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.35s;
}

.work-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.65);
}

.work-card div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 1.5rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), transparent 58%);
}

.work-card p {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff9189;
}

.work-card h3 {
  margin-top: 0.35rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.work-card.hidden {
  display: none;
}

.capability {
  min-height: 240px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.capability-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.capability:hover,
.capability-link:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 75, 63, 0.8);
  background: rgba(240, 75, 63, 0.09);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.capability > span {
  font-size: 1.6rem;
  color: #f04b3f;
}

.capability h3 {
  margin-top: 3rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.capability p {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

#stats strong {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.07em;
  color: #f04b3f;
}

#stats span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

#contact label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

#contact input,
#contact textarea,
#contact select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.6rem;
  background: #0f172a;
  padding: 0.8rem;
  color: #fff;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}

#contact input:focus,
#contact textarea:focus,
#contact select:focus {
  border-color: #f04b3f;
  box-shadow: 0 0 0 3px rgba(240, 75, 63, 0.15);
}

.contact-link {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem 0;
  transition: color 0.2s;
}

.contact-link:hover {
  color: #f04b3f;
}

@media (max-width: 640px) {
  .work-card {
    min-height: 270px;
  }
}

/* Calm, human-scale typography and centred page rhythm. */
body{font-family:Manrope,Arial,sans-serif;font-size:15px}#home .mx-auto{display:flex;flex-direction:column;align-items:center;text-align:center}#home .max-w-xl{margin-left:auto;margin-right:auto;text-align:center}#home .mt-9{justify-content:center}#home h1{font-size:clamp(2.8rem,5.4vw,5.3rem)!important;letter-spacing:-.05em!important}.page-hero{text-align:center}.page-hero>span{margin-left:auto;margin-right:auto}.site-footer-rich,.footer-inner{max-width:1200px;margin-left:auto;margin-right:auto}.site-brand img{width:4rem;height:4rem;flex:0 0 auto;object-fit:contain;margin:-1rem;transform:scale(1.45)}.footer-brand .site-brand img{width:4.6rem;height:4.6rem;margin:-1.15rem;transform:scale(1.45)}