/* Libba Studio site layer on top of the design system + kit.css */
/* Work rows: copied from the DS WorkCard styles (only injected when NS.WorkCard renders) */
.lb-work {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--line);
}
.lb-work:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 720px) { .lb-work { grid-template-columns: 1fr; gap: 1.5rem; } }
.lb-work__frame {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-04);
  display: grid;
  place-items: center;
}
.lb-work__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-work__empty { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--paper-dim); }
.lb-work__brand { font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--paper); letter-spacing: var(--tracking-tight); }
.lb-work__meta { font-size: var(--text-label); color: var(--paper-dim); margin-top: 0.5rem; letter-spacing: 0.02em; }
.lb-work__context { font-size: var(--text-body); color: var(--paper); line-height: var(--leading-body); margin-top: 1.25rem; max-width: 40ch; }
.lb-work__result { font-size: var(--text-sm); color: var(--paper-dim); line-height: 1.5; margin-top: 0.75rem; max-width: 40ch; }
a{color:inherit}a:hover{color:var(--hover,#E6DFD2)}
/* Failsafe: content always resolves to visible even if the JS reveal misses.
   The JS .is-in path still does the nicer staggered reveal earlier. */
@keyframes lkFailsafeReveal { to { opacity: 1; transform: none; } }
.reveal { animation: lkFailsafeReveal 0.3s var(--ease, ease) 1.8s forwards; }
.reveal.is-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .reveal { animation-delay: 0s; } }

/* Language switch: hairline pill-free NL / EN toggle, hover per brand. */
.lk-lang { display: inline-flex; align-items: center; gap: 6px; }
.lk-lang__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 28px; text-decoration: none; background: none; border: none; padding: 0 2px; cursor: pointer; color: var(--paper-dim, #8A8782); font: inherit; font-size: 14px; letter-spacing: 0.08em; transition: color 150ms; }
.lk-lang__btn:hover, .lk-lang__btn:focus-visible { color: var(--hover, #E6DFD2); }
.lk-lang__btn.is-active { color: var(--paper, #F2F0EB); }
.lk-lang__sep { color: var(--line, #3D3B38); font-size: 13px; }
.lk-nav .lk-lang { margin-left: 1.25rem; }
:focus-visible { outline: 1px solid var(--hover, #E6DFD2); outline-offset: 3px; }

/* Libba Studio wordmark image — white on the dark chrome. */
.lk-logo { display: inline-flex; align-items: center; }
.lk-logo img { display: block; width: auto; }
.lk-logo--md img { height: 22px; }
.lk-logo--sm img { height: 16px; }

/* Client logo carousel: slow continuous drift, logos larger than the old
   static strip, faded edges. The light "panorama" dip is set per-item by JS. */
.lk-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.lk-marquee__track { display: flex; align-items: center; gap: clamp(3rem, 7vw, 6.5rem); width: max-content; }
.lk-marquee__item { flex: 0 0 auto; }
.lk-marquee__item img { display: block; height: 44px; width: auto; }

/* Hero identity row: small round b/w portrait + name. Top padding keeps
   hero content clear of the fixed header on short viewports. */
.lk-hero__inner { padding-top: clamp(96px, 14vh, 150px); }
.lk-hero__id { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.lk-hero__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.04); border: 1px solid var(--line, #3D3B38); }
.lk-hero__idtext { color: var(--paper-dim, #8A8782); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Name bottom-left inside the portrait frame. */
.lk-about__frame { position: relative; }
.lk-about__name { position: absolute; left: 14px; bottom: 12px; z-index: 120; color: #F2F0EB; font-size: 14px; letter-spacing: 0.06em; }

/* Portrait fills its 4:5 frame. Black and white per the brand spec. */
.lk-about__frame { overflow: hidden; }
.lk-about__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.04); display: block; }

/* Work tile that holds a video (Ypsilon Park) — same frame styling as image tiles. */
.lb-work__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hero v2: flat ground, centered column, video as a separate rounded block. */
.lk-hero{min-height:0;display:block;background:#0B0B0B;overflow:visible;padding-bottom:clamp(4rem,8vw,7rem)}
.lk-hero .lk-hero__inner,html[data-space] .lk-hero__inner{max-width:900px;margin:0 auto;text-align:center;padding:clamp(120px,14vh,150px) var(--gutter) 0}
.lk-hero .lk-hero__h1{line-height:1;letter-spacing:-0.03em;text-wrap:balance}
.lk-hero .lk-hero__sub{max-width:560px;margin-left:auto;margin-right:auto;text-wrap:pretty}
.lk-hero .lk-hero__cta{display:flex;justify-content:center;margin-top:0}
.lk-hero .lk-hero__media{position:relative;inset:auto;width:85vw;max-width:1200px;margin:64px auto 0;aspect-ratio:16/9;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(242,240,235,.06);background:#0B0B0B}
.lk-hero .lk-hero__video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){.lk-hero .lk-hero__media{width:calc(100% - 32px);border-radius:16px}}
.lk-hero .lk-hero__media{transform-origin:top center;will-change:transform;overflow:hidden;border-radius:24px;isolation:isolate;width:min(85vw,1200px);max-width:1200px;margin-top:64px}
.lk-hero .lk-hero__video{border-radius:inherit}
@media (max-width:700px){.lk-hero .lk-hero__media{width:calc(100% - 32px);border-radius:16px}}
.lk-hero__video{filter:saturate(1.06) contrast(1.03)}
.lk-skip{position:absolute;left:var(--gutter);top:-200px;z-index:100;background:var(--paper);color:var(--ink);padding:.75rem 1rem;border-radius:4px;font-size:14px;text-decoration:none}
.lk-skip:focus{top:12px;color:var(--ink)}
main:focus{outline:none}
.lk-contact__note{margin:0;max-width:62ch;color:var(--paper-dim);text-wrap:pretty}
.lk-contact__links{flex-wrap:wrap;gap:1.25rem 2.5rem}
.lk-contact__linkedin{text-decoration:none;transition:color 150ms}
.lk-contact__linkedin:hover,.lk-contact__linkedin:focus-visible{color:var(--hover)}
.lk-footer__meta{flex-direction:column;gap:.5rem}
.lk-footer__line{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
.lk-footer__meta a{text-decoration:none;transition:color 150ms}
.lk-footer__meta a:hover,.lk-footer__meta a:focus-visible{color:var(--hover)}
.lk-nav{align-items:center}
.lk-logo{flex-shrink:0}
/* Larger hit areas without changing the visual layout */
.lk-nav a,.lk-logo,.lk-footer__meta a,.lk-contact__links a{padding-block:10px;margin-block:-10px}
.lk-footer__meta a{padding-block:12px;margin-block:-12px}
@media (max-width:560px){.lk-nav>a{display:none}.lk-nav .lk-lang{margin-left:0}}