@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-regular.woff2") format("woff2");
}

/* Mobile narrative copy remains readable without changing compact UI or metadata. */
@media (max-width: 767px) {
  :is(
    .apak-intro__body,
    .apak-craft__body,
    .apak-craft__callout,
    .apak-expertise__body,
    .apak-expertise__closing,
    .apak-expertise__detail-body,
    .apak-about__body,
    .apak-company-opening__body,
    .apak-company-team__body,
    .apak-company-chapter__body,
    .apak-profile__body,
    .apak-projects-opening__body,
    .apak-metal-opening__body,
    .apak-metal-service__body,
    .apak-metal-closing__body,
    .apak-contact-opening__body,
    .apak-contact-details,
    .apak-contact-details__address,
    .apak-contact-details__group,
    .apak-contact-details__subtitle
  ) {
    font-size: 16px !important;
  }
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/zain-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/lato-light.woff2") format("woff2");
}

@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/zain-extrabold-latin.woff2") format("woff2");
}

:root {
  --apak-ink: #1d1d1b;
  --apak-lime: #edf44e;
  --apak-orange: #ef4718;
  --apak-white: #fff;
  --apak-footer: #f6f6f6;
  --apak-font-body: "Lato", sans-serif;
  --apak-font-ui: "Zain", sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--apak-ink);
  background: var(--apak-white);
  font-family: var(--apak-font-body);
  font-weight: 300;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.apak-container {
  width: min(calc(100% - 160px), 1300px);
  margin-inline: auto;
}

@media (min-width: 1201px) and (max-width: 1500px) {
  .apak-container {
    width: min(calc(100% - 160px), 1300px);
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .apak-container {
    width: min(calc(100% - 120px), 1300px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .apak-container {
    width: min(calc(100% - 80px), 1300px);
  }
}

@media (max-width: 767px) {
  .apak-container {
    width: min(calc(100% - 40px), 1300px);
  }
}

.apak-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.apak-col {
  min-width: 0;
  grid-column: span 12;
}

.apak-section {
  position: relative;
}

.apak-section--custom-background {
  background: var(--apak-section-background) !important;
}

.apak-section--custom-background .apak-projects-gallery__row--transition::before,
.apak-section--custom-background .apak-contact-content__details-column {
  background: var(--apak-section-background) !important;
}

/* Shared row tracks let the photo cover the header and hero while the main
   landmark contains the five built sections. All tracks grow with their content. */
.apak-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto auto auto;
  position: relative;
  isolation: isolate;
}

.apak-main {
  grid-column: 1;
  grid-row: 2 / 7;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--apak-lime);
  outline-offset: 5px;
}

.apak-skip-link {
  position: absolute;
  z-index: 10;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 12px 18px;
  color: var(--apak-ink);
  background: var(--apak-lime);
  font-family: var(--apak-font-ui);
  font-weight: 800;
  transform: translateY(-160%);
}

.apak-skip-link:focus {
  transform: none;
}

#apak-main:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}