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

@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/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; }

/* 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; }
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.apak-container { width: min(calc(100% - 200px), 1300px); margin-inline: auto; }
@media (min-width: 1201px) and (max-width: 1500px) {
  .apak-container { width: min(calc(100% - 200px), 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; }
}