.Link-animation {
  animation: fkw-page-in 0.4s ease forwards;
}

.Link-animation.fkw-page-out {
  animation: fkw-page-out 0.35s ease forwards;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

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

@keyframes fkw-page-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

body.fkw-page-out {
  animation: fkw-page-out 0.35s ease forwards;
}

@keyframes fkw-page-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-24px);
  }
}

/* ===== NAV ===== */
.fa-topnav {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 6vw, 64px);
  background: rgba(255, 255, 255, 0.788);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e6e6;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.fa-topnav * {
  box-sizing: border-box;
}

.fa-topnav a {
  position: relative;
  text-decoration: none;
  color: #111111;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 6px 2px;
  transition: color 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Active-streg: lille sort streg med rundede hjørner */
.fa-topnav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0%;
  height: 3px;
  background: #111111;
  border-radius: 4px;
  transform: translateX(-50%);
  transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.fa-topnav a:hover {
  color: #555;
}

.fa-topnav a.fa-nav-active::after,
.fa-topnav a:hover::after {
  width: 60%;
}

.fa-topnav-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  width: 60px;
  height: 60px;
}

.fa-topnav-logo::after {
  display: none !important;
}

.fa-topnav-logo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 60px;
  max-height: 60px;
  width: auto;
  height: auto;
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.fa-topnav-logo-img--default {
  opacity: 1;
}

.fa-topnav-logo-img--hover {
  opacity: 0;
}

.fa-topnav-logo:hover .fa-topnav-logo-img--default {
  opacity: 0;
}

.fa-topnav-logo:hover .fa-topnav-logo-img--hover {
  opacity: 1;
}

.fa-topnav-logo-text {
  display: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
/* ===== BURGER (skjult på desktop) ===== */
.fa-nav-burger {
  box-sizing: border-box;
  display: none;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
  padding: 0;
}

.fa-nav-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #111111;
  border-radius: 4px;
  transition:
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.25s cubic-bezier(0.65, 0, 0.35, 1),
    top 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.fa-nav-burger span:nth-child(1) {
  top: 0;
}
.fa-nav-burger span:nth-child(2) {
  top: 11px;
}
.fa-nav-burger span:nth-child(3) {
  top: 22px;
}

.fa-nav-burger.fa-nav-open span:nth-child(1) {
  top: 11px;
  transform: rotate(45deg);
}
.fa-nav-burger.fa-nav-open span:nth-child(2) {
  opacity: 0;
}
.fa-nav-burger.fa-nav-open span:nth-child(3) {
  top: 11px;
  transform: rotate(-45deg);
}

/* ===== MOBILE MENU OVERLAY ===== */
.fa-nav-mobile-menu {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  height: 110vh;

  width: min(75vw, 320px);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  padding: 32px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.06);
  z-index: 105;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.fa-nav-mobile-menu.fa-nav-open {
  transform: translateX(0%);
}

.fa-nav-mobile-menu a {
  font-size: 22px;
  text-decoration: none;
  color: #111111;
  position: relative;
  padding-bottom: 4px;
}

.fa-nav-mobile-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 3px;
  background: #111111;
  border-radius: 4px;
  transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.fa-nav-mobile-menu a.fa-nav-active::after {
  width: 40%;
}

.fa-nav-overlay-bg {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 104;
}

.fa-nav-overlay-bg.fa-nav-open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .fa-topnav {
    padding: 18px 24px;
  }

  .fa-topnav-logo {
    width: auto;
    height: auto;
  }

  .fa-topnav > a:not(.fa-topnav-logo) {
    display: none;
  }

  .fa-topnav-logo-img {
    display: none;
  }

  .fa-topnav-logo-text {
    display: inline-block;
    font-size: 17px;
  }

  .fa-nav-burger {
    display: block;
  }
}

/* Bare til demo af indhold under navigationen (kan fjernes) */
.fa-nav-demo-content {
  box-sizing: border-box;
  padding: 60px 32px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  color: #444;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ________________________________case gallary ________________________________ */

/* ==========================================================================
   FKW Case Wall
   All tokens + classes are namespaced under .fkw-casewall so nothing here
   leaks into, or clashes with, the rest of your site's CSS.
   ========================================================================== */

.fkw-casewall {
  --fkw-gap: 2px;
  --fkw-bg: #ffffff;
  --fkw-placeholder: #dcdcdc;
  --fkw-placeholder-hover: #d2d2d2;
  --fkw-ink: #141414;
  --fkw-ink-soft: #9a9a9a;
  --fkw-overlay-dark: rgba(10, 10, 10, 0.6);
  --fkw-mobile-display-ratio: 5 / 4;
  --fkw-mobile-gallery-ratio: 1 / 1;
  --fkw-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --fkw-speed-fast: 0.28s;
  --fkw-speed-med: 0.45s;
  --fkw-speed-slow: 0.6s;

  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  background: var(--fkw-bg);
  color: var(--fkw-ink);
  width: 100%;
  padding: 48px 32px 96px;
  box-sizing: border-box;
}

.fkw-casewall *,
.fkw-casewall *::before,
.fkw-casewall *::after {
  box-sizing: inherit;
}

/* --------------------------------------------------------------------
   Toggle (Display mode / Gallery mode) — mobile only
   -------------------------------------------------------------------- */

.fkw-toggle {
  display: none; /* shown only under the mobile breakpoint, see below */
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid #ececec;
}

.fkw-toggle__btn {
  position: relative;
  appearance: none;
  border: none;
  background: none;
  padding: 6px 2px 12px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fkw-ink-soft);
  cursor: pointer;
  transition: color var(--fkw-speed-fast) var(--fkw-ease);
}

.fkw-toggle__btn:first-child::after {
  transform-origin: left center;
}

.fkw-toggle__btn:last-child::after {
  transform-origin: right center;
}

.fkw-toggle__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--fkw-ink);
  transform: scaleX(0);
  transition: transform var(--fkw-speed-med) var(--fkw-ease);
}

.fkw-toggle__btn.is-active {
  color: var(--fkw-ink);
}

.fkw-toggle__btn.is-active::after {
  transform: scaleX(1);
}

.fkw-toggle__btn:focus-visible {
  outline: 2px solid var(--fkw-ink);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------
   Grid + cards — shared base
   -------------------------------------------------------------------- */

.fkw-grid {
  display: grid;
  gap: var(--fkw-gap);
}

.fkw-card {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--fkw-placeholder);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: #fff;
  transition:
    opacity var(--fkw-speed-med) var(--fkw-ease),
    transform var(--fkw-speed-med) var(--fkw-ease);
}

.fkw-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--fkw-speed-slow) var(--fkw-ease);
}

/* Video cards: same positioning/zoom behavior as image cards,
   but needs explicit sizing + object-fit since <video> is a
   replaced element and won't stretch via inset alone. */
.fkw-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.fkw-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--fkw-overlay-dark);
  opacity: 0;
  transition: opacity var(--fkw-speed-med) var(--fkw-ease);
}

.fkw-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--fkw-speed-med) var(--fkw-ease),
    transform var(--fkw-speed-med) var(--fkw-ease);
}

.fkw-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.fkw-card__title {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.01em;
}

.fkw-card__meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Empty placeholder cards (no image supplied) never show text or scrim */
.fkw-card--empty .fkw-card__overlay,
.fkw-card--empty .fkw-card__scrim {
  display: none;
}

/* --------------------------------------------------------------------
   Desktop layout  (>= 600px)
   Square cards throughout · first case is featured and spans 2 columns
   at 1 row's height · hover reveal on real pointer devices.

     600px  – 1439.98px  →  3 columns  (laptop)
     1440px and up       →  4 columns  (large desktop)
   -------------------------------------------------------------------- */

@media (min-width: 600px) {
  .fkw-toggle {
    display: none !important;
  }

  .fkw-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }

  .fkw-card {
    aspect-ratio: 1 / 1;
  }

  .fkw-grid .fkw-card:first-child {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }

  @media (hover: hover) and (pointer: fine) {
    .fkw-card:hover .fkw-card__image {
      transform: scale(1.06);
    }

    .fkw-card:hover .fkw-card__scrim {
      opacity: 1;
    }

    .fkw-card:hover .fkw-card__overlay {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (min-width: 1440px) {
  .fkw-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------
   Mobile layout  (< 600px)
   Toggle visible · text overlay always shown (no hover on touch)
   -------------------------------------------------------------------- */

@media (max-width: 599.98px) {
  .fkw-casewall {
    padding: 28px 20px 64px;
  }

  .fkw-toggle {
    display: flex;
  }

  /* Text is always legible on touch — permanent soft scrim + static text */
  .fkw-card__scrim {
    opacity: 1;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.55) 100%
    );
  }

  .fkw-card__overlay {
    opacity: 1;
    transform: none;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: 16px;
  }

  .fkw-card__title {
    font-size: 16px;
  }

  /* Grid mode switch: fade/scale cards briefly while the layout changes */
  .fkw-grid--switching .fkw-card {
    opacity: 0;
    transform: scale(0.97);
  }

  /* ---- Display mode: single column, large stacked cards ---- */
  .fkw-grid[data-mode="display"] {
    grid-template-columns: 1fr;
  }

  .fkw-grid[data-mode="display"] .fkw-card {
    aspect-ratio: var(--fkw-mobile-display-ratio);
  }

  /* ---- Gallery mode: compact 2-column browsing grid ---- */
  .fkw-grid[data-mode="gallery"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .fkw-grid[data-mode="gallery"] .fkw-card {
    aspect-ratio: var(--fkw-mobile-gallery-ratio);
  }

  /* Gallery mode is for fast browsing: drop the secondary meta line
     and shrink the title so more of the image reads through */
  .fkw-grid[data-mode="gallery"] .fkw-card__meta {
    display: none;
  }

  .fkw-grid[data-mode="gallery"] .fkw-card__title {
    font-size: 13px;
  }

  .fkw-grid[data-mode="gallery"] .fkw-card__overlay {
    padding: 10px;
  }
}

/* --------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------- */

.fkw-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 4px var(--fkw-ink);
}

@media (prefers-reduced-motion: reduce) {
  .fkw-casewall * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   FKXP — Experience / CV page
   Fully independent component. All tokens + classes are namespaced under
   fkxp- and scoped to .fkxp-page, so nothing here touches the rest of
   your site or the earlier case-wall component.
   ========================================================================== */

.fkxp-page {
  --fkxp-bg: #ffffff;
  --fkxp-surface: #fafafa;
  --fkxp-ink: #141414;
  --fkxp-ink-soft: #8f8f8f;
  --fkxp-ink-faint: #c7c7c7;
  --fkxp-line: #e7e7e7;
  --fkxp-chip-bg: #f2f2f2;
  --fkxp-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --fkxp-speed-fast: 0.25s;
  --fkxp-speed-med: 0.4s;
  --fkxp-sidebar-w: 320px;

  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  background: var(--fkxp-bg);
  color: var(--fkxp-ink);
  display: flex;
  flex-direction: column;
}

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

.fkxp-page a {
  color: inherit;
}

/* --------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------- */

.fkxp-sidebar {
  border-bottom: 1px solid var(--fkxp-line);
  background: var(--fkxp-surface);
}

.fkxp-sidebar__inner {
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.fkxp-identity__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fkxp-ink-soft);
}

.fkxp-identity__name {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fkxp-identity__title {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--fkxp-ink-soft);
}

.fkxp-identity__bio {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4d4d4d;
  max-width: 42ch;
}

.fkxp-page a.fkxp-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  padding: 12px 20px;
  background: var(--fkxp-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition:
    transform var(--fkxp-speed-fast) var(--fkxp-ease),
    background var(--fkxp-speed-fast) var(--fkxp-ease);
}

.fkxp-download:hover {
  background: #2c2c2c;
  transform: translateY(-1px);
}

.fkxp-download__icon {
  transition: transform var(--fkxp-speed-fast) var(--fkxp-ease);
}

.fkxp-download:hover .fkxp-download__icon {
  transform: translateY(2px);
}

.fkxp-contact {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--fkxp-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--fkxp-ink-soft);
}

.fkxp-contact a {
  text-decoration: none;
  transition: color var(--fkxp-speed-fast) var(--fkxp-ease);
}

.fkxp-contact a:hover {
  color: var(--fkxp-ink);
}

/* Nav */

.fkxp-nav {
  position: relative;
  padding-top: 8px;
  border-top: 1px solid var(--fkxp-line);
}

.fkxp-nav__list {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fkxp-nav__link {
  display: block;
  padding: 8px 0 8px 16px;
  font-size: 13px;
  color: var(--fkxp-ink-soft);
  text-decoration: none;
  transition: color var(--fkxp-speed-fast) var(--fkxp-ease);
}

.fkxp-nav__link.is-active {
  color: var(--fkxp-ink);
  font-weight: 600;
}

.fkxp-nav__indicator {
  position: absolute;
  left: 0;
  width: 2px;
  background: var(--fkxp-ink);
  border-radius: 2px;
  transition:
    transform var(--fkxp-speed-med) var(--fkxp-ease),
    height var(--fkxp-speed-med) var(--fkxp-ease),
    width var(--fkxp-speed-med) var(--fkxp-ease);
}

/* --------------------------------------------------------------------
   Main content
   -------------------------------------------------------------------- */

.fkxp-main {
  padding: 8px 28px 80px;
}

.fkxp-section {
  padding-top: 56px;
  scroll-margin-top: 24px;
}

.fkxp-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
}

.fkxp-section__num {
  font-size: 12px;
  color: var(--fkxp-ink-faint);
  font-variant-numeric: tabular-nums;
}

.fkxp-section__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Timeline */

.fkxp-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.fkxp-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 1px;
  background: var(--fkxp-line);
}

.fkxp-timeline__item {
  position: relative;
  padding: 0 0 32px 32px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--fkxp-speed-med) var(--fkxp-ease),
    transform var(--fkxp-speed-med) var(--fkxp-ease);
}

.fkxp-timeline__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fkxp-timeline__item:last-child {
  padding-bottom: 0;
}

.fkxp-timeline__marker {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--fkxp-bg);
  border: 2px solid var(--fkxp-ink);
}

.fkxp-timeline__period {
  display: block;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--fkxp-ink-soft);
  margin-bottom: 6px;
}

.fkxp-timeline__role {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
}

.fkxp-timeline__org {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--fkxp-ink-soft);
}

.fkxp-timeline__points {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3a3a3a;
}

.fkxp-timeline--compact .fkxp-timeline__item {
  padding-bottom: 22px;
}

/* Skills */

.fkxp-skillgroups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.fkxp-skillgroup__label {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fkxp-ink-soft);
}

.fkxp-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fkxp-chip {
  padding: 7px 14px;
  background: var(--fkxp-chip-bg);
  border-radius: 999px;
  font-size: 12.5px;
  color: #2b2b2b;
  transition:
    background var(--fkxp-speed-fast) var(--fkxp-ease),
    transform var(--fkxp-speed-fast) var(--fkxp-ease);
}

.fkxp-chip:hover {
  background: #e6e6e6;
  transform: translateY(-1px);
}

/* Tools */

.fkxp-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
}

.fkxp-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  border-radius: 12px;
  font-size: 12px;
  background-color: #f5f5f5;
  color: var(--fkxp-ink-soft);
  text-align: center;
  transition:
    transform var(--fkxp-speed-fast) var(--fkxp-ease),
    border-color var(--fkxp-speed-fast) var(--fkxp-ease),
    box-shadow var(--fkxp-speed-fast) var(--fkxp-ease);
}

.fkxp-tool:hover {
  transform: translateY(-3px);
  border-color: var(--fkxp-ink-faint);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.fkxp-tool__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--fkxp-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* Certifications */

#fkxp-certifications {
  visibility: hidden;
}

.fkxp-certs {
  visibility: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fkxp-cert {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fkxp-line);
  font-size: 13.5px;
}

.fkxp-cert__name {
  font-weight: 600;
}

.fkxp-cert__meta {
  color: var(--fkxp-ink-soft);
  font-size: 12.5px;
  white-space: nowrap;
}

.fkxp-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--fkxp-ink-faint);
  font-style: italic;
}

/* --------------------------------------------------------------------
   Desktop  (>= 1024px) — sticky sidebar, two columns
   -------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .fkxp-page {
    flex-direction: row;
    align-items: flex-start;
  }

  .fkxp-sidebar {
    width: var(--fkxp-sidebar-w);
    flex: 0 0 var(--fkxp-sidebar-w);
    border-bottom: none;
    border-right: 1px solid var(--fkxp-line);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  .fkxp-sidebar__inner {
    padding: 56px 36px;
  }

  .fkxp-main {
    flex: 1 1 auto;
    max-width: 760px;
    padding: 64px 56px 120px;
  }

  .fkxp-nav__indicator {
    top: 0;
  }
}

/* --------------------------------------------------------------------
   Tablet  (640px – 1023.98px) — sidebar becomes a top block,
   nav becomes a horizontal scroll strip
   -------------------------------------------------------------------- */

@media (min-width: 640px) and (max-width: 1023.98px) {
  .fkxp-sidebar__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
  }

  .fkxp-identity {
    flex: 1 1 260px;
  }

  .fkxp-identity__bio {
    max-width: 52ch;
  }

  .fkxp-contact {
    border-top: none;
    padding-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .fkxp-nav {
    width: 100%;
    border-top: 1px solid var(--fkxp-line);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fkxp-nav::-webkit-scrollbar {
    display: none;
  }

  .fkxp-nav__list {
    flex-direction: row;
    gap: 4px;
    padding: 14px 0 0;
    width: max-content;
  }

  .fkxp-nav__link {
    padding: 6px 14px;
    white-space: nowrap;
  }

  .fkxp-nav__indicator {
    top: auto;
    bottom: 0;
    height: 2px;
  }

  .fkxp-main {
    padding: 40px 32px 96px;
  }

  .fkxp-skillgroups {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------
   Mobile  (< 640px) — fully stacked, compact timeline,
   snap-scrolling nav strip
   -------------------------------------------------------------------- */

@media (max-width: 639.98px) {
  .fkxp-sidebar__inner {
    padding: 32px 20px 20px;
    gap: 20px;
  }

  .fkxp-identity__name {
    font-size: 24px;
  }

  .fkxp-download {
    width: 100%;
  }

  .fkxp-contact {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
  }

  .fkxp-nav {
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid var(--fkxp-line);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .fkxp-nav::-webkit-scrollbar {
    display: none;
  }

  .fkxp-nav__list {
    flex-direction: row;
    gap: 2px;
    padding: 12px 0;
    width: max-content;
  }

  .fkxp-nav__link {
    padding: 6px 12px;
    font-size: 12.5px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .fkxp-nav__indicator {
    top: auto;
    bottom: 0;
    height: 2px;
  }

  .fkxp-main {
    padding: 8px 20px 72px;
  }

  .fkxp-section {
    padding-top: 40px;
  }

  .fkxp-section__title {
    font-size: 17px;
  }

  .fkxp-timeline::before {
    left: 4px;
  }

  .fkxp-timeline__item {
    padding-left: 22px;
    padding-bottom: 26px;
  }

  .fkxp-timeline__marker {
    width: 9px;
    height: 9px;
  }

  .fkxp-timeline__role {
    font-size: 15px;
  }

  .fkxp-skillgroups {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .fkxp-tools {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }

  .fkxp-cert {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* --------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------- */

.fkxp-nav__link:focus-visible,
.fkxp-download:focus-visible,
.fkxp-chip:focus-visible,
.fkxp-tool:focus-visible {
  outline: 2px solid var(--fkxp-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fkxp-page * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }

  .fkxp-timeline__item {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   FLND — Landing page (hero + case carousel)
   Fully independent component. All tokens + classes are namespaced under
   flnd- and scoped under the flnd- prefix, so nothing here touches the
   case-wall, the experience page, or the rest of your site.
   ========================================================================== */

:root {
  /* Scoped with the flnd- prefix even at :root so a stray global read
     doesn't clash with tokens from other components. */
  --flnd-pad: 32px;
  --flnd-gap: 4px;
}

.flnd-hero,
.flnd-cases {
  --flnd-bg: #ffffff;
  --flnd-panel-bg: #f1f1f1;
  --flnd-ink: #141414;
  --flnd-ink-soft: #7c7c7c;
  --flnd-placeholder: #dcdcdc;
  --flnd-overlay-dark: rgba(10, 10, 10, 0.6);
  --flnd-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --flnd-speed-fast: 0.3s;
  --flnd-speed-med: 0.5s;
  --flnd-speed-slow: 0.9s;

  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  color: var(--flnd-ink);
  background: var(--flnd-bg);
}

.flnd-hero *,
.flnd-hero *::before,
.flnd-hero *::after,
.flnd-cases *,
.flnd-cases *::before,
.flnd-cases *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */

.flnd-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.flnd-hero__panel {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  background: var(--flnd-panel-bg);
  padding: 0 7vw;
}

.flnd-hero__eyebrow,
.flnd-hero__sub {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--flnd-ink-soft);
}

.flnd-hero__headline {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.flnd-hero__panel [data-flnd-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--flnd-speed-med) var(--flnd-ease),
    transform var(--flnd-speed-med) var(--flnd-ease);
}

.flnd-hero__panel [data-flnd-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.flnd-hero__media {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
}

.flnd-hero__image {
  position: absolute;
  inset: -6% -6%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* --------------------------------------------------------------------
   Cases — section head
   -------------------------------------------------------------------- */

.flnd-cases {
  padding: 88px 0 56px;
}

.flnd-cases__head {
  padding: 0 var(--flnd-pad);
  margin-bottom: 28px;
}

.flnd-cases__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------
   Carousel
   -------------------------------------------------------------------- */

.flnd-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0 var(--flnd-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.flnd-carousel::-webkit-scrollbar {
  display: none;
}

.flnd-carousel__track {
  list-style: none;
  margin: 0;
  padding: 0 var(--flnd-pad);
  display: flex;
  gap: var(--flnd-gap);
}

.flnd-card {
  display: block;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--flnd-placeholder);
  scroll-snap-align: start;
  text-decoration: none;
  color: #fff;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--flnd-speed-med) var(--flnd-ease),
    transform var(--flnd-speed-med) var(--flnd-ease);

  /* Mobile default: ~1 card visible with a peek of the next one */
  width: calc(100vw - (var(--flnd-pad) * 2) - 48px);
}

.flnd-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.flnd-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--flnd-speed-slow) var(--flnd-ease);
}

.flnd-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--flnd-overlay-dark);
  opacity: 0;
  transition: opacity var(--flnd-speed-fast) var(--flnd-ease);
}

.flnd-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--flnd-speed-fast) var(--flnd-ease),
    transform var(--flnd-speed-fast) var(--flnd-ease);
}

.flnd-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.flnd-card__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* --------------------------------------------------------------------
   Scroll progress bar
   -------------------------------------------------------------------- */

.flnd-scrollbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 0 var(--flnd-pad);
}

.flnd-scrollbar__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flnd-ink-soft);
}

.flnd-scrollbar__track {
  position: relative;
  width: min(280px, 60%);
  height: 3px;
  background: #ececec;
  border-radius: 999px;
  overflow: hidden;
}

.flnd-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: var(--flnd-ink-soft);
  border-radius: 999px;
  transform: translateX(0);
  transition: transform 0.05s linear;
}

/* --------------------------------------------------------------------
   Desktop / laptop — hero split, hover reveal, fractional card counts
   -------------------------------------------------------------------- */

@media (min-width: 600px) {
  .flnd-card {
    /* ~2.5 cards visible */
    width: calc((100vw - (var(--flnd-pad) * 2) - (var(--flnd-gap) * 3)) / 3.5);
  }

  @media (hover: hover) and (pointer: fine) {
    .flnd-card:hover .flnd-card__image {
      transform: scale(1.06);
    }

    .flnd-card:hover .flnd-card__scrim {
      opacity: 1;
    }

    .flnd-card:hover .flnd-card__overlay {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (min-width: 1440px) {
  .flnd-card {
    /* ~3.5 cards visible */
    width: calc((100vw - (var(--flnd-pad) * 2) - (var(--flnd-gap) * 3)) / 3.5);
  }

  .flnd-cases {
    padding: 120px 0 78px;
  }
}

/* --------------------------------------------------------------------
   Mobile  (< 600px)
   No gray panel — text sits directly on the image with a readability
   scrim. Cards always show their caption (no hover on touch).
   -------------------------------------------------------------------- */

@media (max-width: 599.98px) {
  .flnd-hero {
    flex-direction: column;
  }

  .flnd-hero__panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    align-items: center;
    text-align: center;
    padding: 0 28px;
  }

  .flnd-hero__eyebrow,
  .flnd-hero__sub {
    color: rgba(255, 255, 255, 0.85);
  }

  .flnd-hero__headline {
    color: #fff;
  }

  .flnd-hero__media {
    position: absolute;
    inset: 0;
    flex-basis: auto;
    z-index: 1;
  }

  .flnd-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.15) 35%,
      rgba(0, 0, 0, 0.55) 100%
    );
  }

  .flnd-scrollbar__label {
    display: none;
  }

  .flnd-cases {
    padding: 64px 0 48px;
  }

  .flnd-card__scrim {
    opacity: 1;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.55) 100%
    );
  }

  .flnd-card__overlay {
    opacity: 1;
    transform: none;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: 16px;
  }

  .flnd-card__title {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------- */

.flnd-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 4px var(--flnd-ink);
}

@media (prefers-reduced-motion: reduce) {
  .flnd-hero *,
  .flnd-cases * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }

  .flnd-hero__panel [data-flnd-reveal],
  .flnd-card {
    opacity: 1 !important;
    transform: none !important;
  }
}