@font-face {
  font-family: "Become";
  src: url("../fonts/Become.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.ff-become,
.ff-hero-title,
.ff-hero-kicker,
.ff-section-title,
.ff-brand-lockup {
  font-family: "Become", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: .9;
}

.ff-brand-lockup { font-size: clamp(1.4rem, 2vw, 2.4rem); }
.ff-brand-lockup small { display:block; font-size:.33em; letter-spacing:.14em; }

.ff-hero-shell {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.ff-hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(37,142,166,.18), transparent 34%),
    radial-gradient(circle at 85% 68%, rgba(226,181,36,.16), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events: none;
}
.ff-hero-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .22;
  pointer-events: none;
}
.ff-hero-shell > * { position: relative; z-index: 2; }

.ff-hero-kicker { font-size: clamp(1.25rem, 3vw, 3.25rem); }
.ff-hero-title { font-size: clamp(4rem, 12vw, 11rem); }
.ff-hero-studio { font-size: clamp(2rem, 6vw, 5rem); }

.ff-bottom-pill {
  width: min(1140px, calc(100vw - 40px));
  border-radius: 999px;
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
}
.ff-home-pill a, .ff-home-pill span {
  display: inline-block;
  padding: .42rem .85rem;
  border-radius: 999px;
  background: #258ea6;
  color: #fff !important;
}

.ff-project-card {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.ff-project-media {
  min-height: 280px;
  background: linear-gradient(135deg, #258ea6, #e28665);
}

.ff-dark-section {
  background: #333138;
  color: #f7f5ef;
}
.ff-light-section {
  background: #e9e4d6;
  color: #17161a;
}
.ff-section-title {
  font-size: clamp(2rem, 5vw, 4.5rem);
}