/* ============================================================
   NKORA — clean rebuild
   Colors / fonts / sizes / breakpoints extracted 1:1 from the
   original export (kept as backup in the site folder).
   ============================================================ */

/* ---- Fonts (local woff2 from ../fonts) ---- */
@font-face {
  font-family: "NKORA V4 Regular";
  src: url("fonts/LYEnwWfscxIcai42LTJp2GRLEM.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 400;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 400;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/DXD0Q7LSl7HEvDzucnyLnGBHM.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 700;
}

/* ---- Design tokens (exact values from source) ---- */
:root {
  --espresso: rgb(36, 32, 26);   /* #24201a */
  --cream:    rgb(254, 245, 179);/* #fef5b3 */
  --olive:    rgb(111, 117, 49); /* #6f7531 */
  --terracotta: #a25028;

  /* root font-size scaling — matches the original media rules */
  font-size: 100%;
}
@media (min-width: 1440px) and (max-width: 1679.98px) { :root { font-size: 125%; } }
@media (min-width: 1680px) { :root { font-size: 150%; } }
@media (max-width: 809.98px) { :root { font-size: 75%; } }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--espresso);
  color: var(--cream);
  font-family: "NKORA V4 Regular", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; }

a { color: inherit; text-decoration: none; }

/* Shared section label preset (q3oMR9KhV / 1yp36b5): NKORA, 2rem, lh 1.2em, uppercase */
.section-label {
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: calc(1rem * 2);
  line-height: 1.2em;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 400;
}

/* Shared link CTA (a9ot9g): NKORA, 15px, uppercase, underline-on-hover */
.link-cta {
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: 15px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.link-cta:hover { border-bottom-color: currentColor; }

/* ============================================================
   Header / Nav
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  pointer-events: none;
}
.nav a { pointer-events: auto; }
.nav__logo { display: block; width: 109px; height: 30px; }
.nav__logo svg { width: 100%; height: 100%; display: block; }
.nav__links {
  display: flex;
  gap: 28px;
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  text-transform: uppercase;
  color: var(--cream);
}
.nav__links a { border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.nav__links a:hover { border-bottom-color: currentColor; }

@media (max-width: 809.98px) {
  .nav { padding: 18px 20px; }
  .nav__links { gap: 16px; font-size: 14px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 101svh;
  height: 101svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(36, 32, 26, .25);
  z-index: 1;
}
.hero__title {
  position: relative;
  z-index: 2;
  width: 75%;
  max-width: 890px;
  text-align: center;
  color: var(--cream);
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: calc(1rem * 4);
  line-height: 1em;
  font-weight: 400;
  letter-spacing: 0;
}
.hero__cta {
  position: relative;
  z-index: 2;
  color: var(--cream);
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: 15px;
  line-height: 16px;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.hero__cta:hover { border-bottom-color: currentColor; }

/* ============================================================
   Framer appear animations (reproduced 1:1)
   - Logo + nav links start translateY(-150px) (slide down into place)
   - Hero title + CTA start translateY(150px) (rise up into place)
   - opacity .001 -> 1, duration 1.4s, spring bounce:0 (no overshoot)
   - per-element delay set inline via --appear-delay (see app.js)
   The spring(bounce:0) is approximated with a strong, overshoot-free
   ease-out curve that tracks a critically-damped spring's position.
   ============================================================ */
.js-appear            { opacity: .001; }
.js-appear--down      { transform: translateY(-150px); }
.js-appear--up        { transform: translateY(150px); }

.js-appear.is-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   1.4s cubic-bezier(.22, 1, .36, 1) var(--appear-delay, 0s),
    transform 1.4s cubic-bezier(.22, 1, .36, 1) var(--appear-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js-appear { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   About Us  (olive bg, text + image, 100vh)
   ============================================================ */
.about {
  background: var(--olive);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 6;
}
.about__text {
  flex: 1 0 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 30px;
}
.about__text p {
  width: 85%;
  color: var(--cream);
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: calc(1rem * 2.81);
  line-height: 1.1em;
  text-transform: uppercase;
  font-weight: 400;
}
.about__media { flex: 1 0 0; height: 100%; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 809.98px) {
  .about { flex-direction: column; height: auto; }
  .about__text { padding: 100px 20px 30px; }
  .about__text p { width: 100%; }
  .about__media { width: 100%; height: 60vh; }
}

/* ============================================================
   Locations  (cream bg; slideshow top 75%, details bottom)
   ============================================================ */
.locations {
  background: var(--cream);
  color: var(--espresso);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
  z-index: 6;
}
.locations__slideshow {
  position: relative;
  width: 100%;
  height: 75%;
  background: var(--espresso);
  overflow: hidden;
}
.slides { position: relative; width: 100%; height: 100%; }
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

.slides__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.slides__nav img { width: 24px; height: 24px; }
.slides__nav--prev { left: 18px; }
.slides__nav--next { right: 18px; }

.slides__dots {
  position: absolute;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 3;
}
.slides__dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: var(--cream); opacity: .5; cursor: pointer; padding: 0;
}
.slides__dots button.is-active { opacity: 1; }

.locations__details {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 30px;
}
.locations__details .section-label { color: var(--espresso); flex: none; }
.locations__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.locations__list a {
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: calc(1rem * .94);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--espresso);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.locations__list a:hover,
.locations__list a.is-active { border-bottom-color: var(--espresso); }

@media (max-width: 809.98px) {
  .locations { height: auto; }
  .locations__slideshow { height: 50vh; }
  .locations__details { flex-direction: column; }
}

/* ============================================================
   Human / Independent / Crafted  (terracotta bg, image + text)
   ============================================================ */
.human {
  background: var(--terracotta);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 6;
}
.human__media { flex: 1 0 0; height: 100%; }
.human__media img { width: 100%; height: 100%; object-fit: cover; }
.human__text {
  flex: 1 0 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 30px 54px 30px 0;
}
.human__word {
  width: 100%;
  text-align: right;
  color: var(--cream);
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: calc(1rem * 4.6);
  line-height: .9em;
  letter-spacing: .02em;
  font-weight: 400;
}
.human__note { color: var(--cream); margin-top: 24px; }
.human .link-cta { color: var(--cream); align-self: flex-end; }

@media (max-width: 809.98px) {
  .human { flex-direction: column-reverse; height: auto; }
  .human__media { width: 100%; height: 50vh; }
  .human__text { padding: 30px 20px; align-items: flex-start; }
  .human__word { text-align: left; }
  .human .link-cta { align-self: flex-start; }
}

/* ============================================================
   Jobs  (espresso bg, illustrations + copy + cta, centered)
   ============================================================ */
.jobs {
  background: var(--espresso);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  overflow: hidden;
  position: relative;
  z-index: 6;
}
.jobs__illustrations {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.jobs__illustrations img { height: 120px; width: auto; }
.jobs__copy {
  color: var(--cream);
  text-align: center;
  max-width: 60%;
}
.jobs .link-cta { color: var(--cream); }

@media (max-width: 809.98px) {
  .jobs { gap: 40px; padding: 80px 20px; height: auto; }
  .jobs__illustrations img { height: 70px; }
  .jobs__copy { max-width: 100%; }
}

/* ============================================================
   Footer  (olive bg)
   ============================================================ */
.footer {
  background: var(--olive);
  color: var(--cream);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 120px 30px;
  text-align: center;
}
.footer__head {
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: calc(1rem * 2.81);
  line-height: 1.1em;
  text-transform: uppercase;
  color: var(--cream);
}
.footer__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  text-transform: uppercase;
}
.footer__links a { border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.footer__links a:hover { border-bottom-color: currentColor; }
.footer__copy {
  font-family: "NKORA V4 Regular", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  opacity: .9;
}

@media (max-width: 809.98px) {
  .footer { padding: 80px 20px; gap: 28px; }
}