/* ===== font-face (self-hosted, gwfh.mranftl.com) ===== */
@font-face {
  font-family: 'Archivo Black';
  src: url('/fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/chakra-petch-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/chakra-petch-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/chakra-petch-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== reset ===== */
body { margin: 0; }
* { box-sizing: border-box; }

/* ===== responsive: tablet & mobile =====
   Desktop tetap miring −5° (efek "miringin kepala").
   Di layar kecil: tilt dimatiin, spine microtext disembunyiin,
   section di-stack biar tetap kebaca. */
@media (max-width: 880px) {
  .flem-stage      { padding: 16px 10px !important; overflow: visible !important; }
  .flem-card       { width: 100% !important; transform: none !important;
                     box-shadow: 7px 7px 0 #161614 !important; }
  .flem-spine      { display: none !important; }
  .flem-content    { padding-left: 0 !important; padding-right: 0 !important; }

  .flem-hero       { flex-direction: column !important; }
  .flem-hero-rail,
  .flem-hero-gauges{ display: none !important; }
  .hero-type > div { font-size: 14.5vw !important; }

  .flem-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .flem-works-grid    { grid-template-columns: 1fr !important; }
  .flem-process       { flex-wrap: wrap !important; }
  .flem-process > div { flex: 1 0 50% !important; min-height: 130px !important; }
  .flem-manifesto     { font-size: 30px !important; }
}

@media (max-width: 480px) {
  .flem-services-grid { grid-template-columns: 1fr !important; }
  .flem-process > div { flex: 1 0 100% !important; }
  .hero-type > div    { font-size: 17vw !important; }
}

/* hover states (production polish) */
.flem-btn-solid:hover  { background: #e5482f !important; box-shadow: 5px 5px 0 #161614 !important; }
.flem-btn-ghost:hover  { background: #161614 !important; color: #f4f3ee !important; }
.flem-work:hover img   { filter: grayscale(1) contrast(1.25) brightness(1.05) !important; }
a { text-decoration: none; color: inherit; }