/* ==========================================================================
   Visuals by Cédric — basic site
   Kenmar-style layout on a dark cinematic ground: near-black, white type,
   heavy uppercase Archivo headings each sat on a short accent rule.

   The whole palette is the few variables below. Change --accent in one
   place to re-tint every rule, hover and highlight on the site.
   ========================================================================== */

:root {
  --bg: #0b0b0c;
  --bg-2: #131315;
  --panel: rgba(255, 255, 255, 0.035);
  --fg: #f6f6f5;
  --muted: #8c8c92;
  --dim: #d2d2d0;
  --line: rgba(255, 255, 255, 0.1);
  --accent: #e0a12f;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max: 78rem;
  --nav-h: 4.25rem;
}

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

html { scroll-behavior: smooth; color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.02; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* An author `display` beats the browser's own [hidden] rule, so anything a
   script hides needs this. */
[hidden] { display: none !important; }

/* ---- Section shell & heading ------------------------------------------ */
.section {
  padding: clamp(4.5rem, 11vw, 9rem) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.section + .section { border-top: 1px solid var(--line); }

.section__head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section__head h2 {
  font-size: clamp(2.25rem, 6.5vw, 4.25rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
/* The short accent bar under every section title — the Kenmar signature. */
.rule {
  display: block;
  width: 3.25rem;
  height: 3px;
  background: var(--accent);
  margin-top: 1.1rem;
}
.section__head--center { text-align: center; }
.section__head--center .rule { margin-left: auto; margin-right: auto; }
.section__intro { margin-top: 1.35rem; color: var(--muted); max-width: 38rem; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 2rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--solid { background: var(--fg); color: #0b0b0c; border-color: var(--fg); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }

/* ---- Eyebrow ----------------------------------------------------------
   The small wide-tracked label above a heading, from the React site. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Nav --------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}
/* Transparent over the hero, as on the React site, so the footage runs to the
   top edge; solid once you scroll past it — script.js adds .is-stuck. */
.nav.is-stuck {
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

.nav__logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.nav__links { display: flex; gap: 2.25rem; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.nav__links a { position: relative; opacity: 0.72; transition: opacity 0.2s; }
.nav__links a:hover { opacity: 1; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -0.45rem;
  height: 2px; background: var(--accent); transition: right 0.25s;
}
.nav__links a:hover::after { right: 0; }

.nav__right { display: flex; align-items: center; gap: 1.15rem; }
.nav__ig { opacity: 0.72; transition: opacity 0.2s, color 0.2s; }
.nav__ig:hover { opacity: 1; color: var(--accent); }

.burger { display: none; width: 26px; height: 18px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 2px; background: var(--fg); transition: transform 0.25s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 820px) {
  .burger { display: flex; }
  .nav__logo span { display: none; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.25rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .nav__links a { padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
  .nav__links a::after { display: none; }
  body.menu-open .nav__links { opacity: 1; transform: none; pointer-events: auto; }
  body.menu-open .nav { background: var(--bg); }
}

/* ---- Hero -------------------------------------------------------------- */
/* The React site's opening frame: the clip in full colour — no desaturating
   filter — under a neutral black scrim that is darker at the top (for the
   nav) and darkest at the bottom (into the page), plus a soft vignette and
   film grain. The mark sits centred on top. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 6rem;
  padding-inline: var(--gutter);
  overflow: hidden;
  text-align: center;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 72% 62% at 50% 46%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.85) 100%);
}
.hero__mark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.hero__mark img { width: auto; height: 4rem; }
.hero__wordmark {
  font-size: 10vw;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero__tag {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 246, 245, 0.75);
}
@media (min-width: 768px) {
  .hero__mark { gap: 2rem; }
  .hero__mark img { height: 6rem; }
  .hero__wordmark { font-size: 6.5vw; line-height: 0.9; }
  .hero__tag { font-size: 0.75rem; }
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  color: var(--fg); opacity: 0.6;
  transition: opacity 0.5s;
  animation: nudge 2.4s ease-in-out infinite;
}
.hero__scroll:hover { opacity: 1; }
@media (min-width: 768px) { .hero__scroll { bottom: 2.5rem; } }
@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* ---- Film grain -------------------------------------------------------- */
/* A faint static noise over the footage, as on the React site. */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---- About -------------------------------------------------------------
   Round portrait beside the copy. On a wide screen the block pins itself:
   the paragraph dissolves word by word as you scroll through it and the
   marked words fly down into the closing line. Narrow screens and reduced
   motion get the paragraph as written with the line underneath it. */
.about { border-top: 1px solid var(--line); }
.about + .section { border-top: 1px solid var(--line); }

.about__pin { position: relative; }
.about__sticky { padding: clamp(4.5rem, 11vw, 9rem) 0; }
.about__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 821px) {
  .about__inner { grid-template-columns: 5fr 7fr; align-items: start; }
}

.about__portrait { margin: 0; max-width: 24rem; }
.about__parallax { will-change: transform; }
.about__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}

.about__head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.about__title {
  margin-top: 1.1rem;
  font-size: clamp(2.75rem, 11vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .about__sticky {
    position: sticky;
    top: 0;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(5rem, 12vh, 8rem) 0;
  }
}

/* ---- The dissolving paragraph -----------------------------------------
   .slogan__source is the copy as typed; script.js rebuilds it into spans it
   can move and hides the source. With JavaScript off the source is what you
   read, bold words and all. */
.slogan { position: relative; color: var(--dim); }
.slogan p { max-width: 46ch; }
.slogan p + p { margin-top: 1.25rem; }
.slogan.is-built .slogan__source { display: none; }
.slogan__source b,
.slogan__slot {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--fg);
}
.slogan__word,
.slogan__hold { display: inline-block; }
.slogan__word { will-change: opacity, transform; }
/* inline-block + line-height 1 so the measured box is the glyph box rather
   than the taller line box: lining the tops up then means lining the
   baselines up. */
.slogan__slot { display: inline-block; line-height: 1; }
.slogan__line {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--fg);
}
.slogan__key {
  display: inline-block;
  line-height: 1;
  transform-origin: 0 0;
  will-change: transform;
}
.slogan__punct { margin-inline-end: 0.25em; }

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* Out of flow, so it lands under the heading on the paragraph's first
     line rather than below the whole block. */
  .slogan__line { position: absolute; left: 0; right: 0; top: 0; margin-top: 0; }
}

/* Cijfers — the markup is commented out in index.html until the numbers are real. */
.about__stats {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 9vw, 7rem);
}
.about__stats dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}
.about__stats dt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.02em;
}
.about__stats dd {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 18ch;
}

/* ---- Testimonials ------------------------------------------------------ */
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Capped and centred so two cards keep a readable line length; still
     wide enough for three columns when the third quote comes back. */
  max-width: 62rem;
  margin-inline: auto;
}
.quote {
  margin: 0;
  padding: 2rem 1.85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.quote blockquote { margin: 0; color: var(--dim); font-size: 1.05rem; line-height: 1.65; flex: 1; }
.quote figcaption { display: grid; gap: 0.15rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.quote__name { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; }
.quote__role { color: var(--muted); font-size: 0.82rem; }
/* Visible reminder while a quote is still a placeholder. Remove the
   data-placeholder attribute in index.html and this marker disappears. */
.quote[data-placeholder] { border-style: dashed; }
.quote[data-placeholder]::before { content: "NOG IN TE VULLEN"; }
/* Client name in gold above the quote; the placeholder marker reuses it. */
.quote__client,
.quote[data-placeholder]::before {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Portfolio groups -------------------------------------------------- */
/* One labelled block per category (Sport / Events / Music). The subhead sits
   a level below the section title: smaller, with a hairline running out to
   the right edge so the groups read as chapters rather than new sections. */
.workgroup + .workgroup { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.subhead {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem);
}
.subhead::before {
  content: "";
  width: 1.4rem; height: 2px;
  background: var(--accent);
  flex: none;
}
.subhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* Groups where every card sits behind "Meer werk" are hidden by script.js. */

/* ---- Work grid --------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.85rem, 2vw, 1.5rem);
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .grid { grid-template-columns: 1fr; } }

.card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 0.4rem;
  background: var(--bg-2);
}
.card__media img,
.card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media img { transition: transform 0.5s ease, opacity 0.35s; }
.card__media video { opacity: 0; transition: opacity 0.35s; }
.card__media.is-playing video { opacity: 1; }
.card__media.is-playing img { transform: scale(1.04); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.card__play {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
}
.card__media:hover .card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card__media:hover .card__play { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }

.card__body { padding: 1.1rem 0.15rem 0; }
.card h3 { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 0.35rem; }
.card__meta { font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.work__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* ---- Services & Process ----------------------------------------------- */
.services, .steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
.services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.services li, .steps li {
  padding: 1.9rem 1.7rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  transition: border-color 0.25s, background 0.25s;
}
.services li:hover, .steps li:hover { border-color: rgba(224, 161, 47, 0.5); background: rgba(255, 255, 255, 0.055); }
.services h3, .steps h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 0.55rem; }
.services p, .steps p { color: var(--muted); font-size: 0.93rem; }
.steps__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

/* ---- Contact ----------------------------------------------------------- */
.contact { text-align: center; }
.contact__body { max-width: 38rem; margin: 0 auto 2.25rem; color: var(--dim); }
.contact__list {
  list-style: none; margin: 0 auto 2.5rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem;
}
.contact__list a { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--dim); transition: color 0.2s; }
.contact__list a:hover { color: var(--accent); }

/* ---- Footer ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line);
  padding: 2.25rem var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem;
  color: var(--muted); font-size: 0.82rem;
}
.footer__top {
  margin-left: auto;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: color 0.2s;
}
.footer__top:hover { color: var(--accent); }
@media (max-width: 560px) { .footer__top { margin-left: 0; width: 100%; text-align: center; } }

/* ---- Lightbox ---------------------------------------------------------- */
.lightbox {
  border: 0; padding: 0; margin: auto;
  width: min(96vw, 1200px);
  max-height: 96vh;
  background: transparent; color: var(--fg);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.93); }
.lightbox__frame { position: relative; width: 100%; background: #000; border-radius: 0.4rem; overflow: hidden; }
.lightbox__frame video { width: 100%; max-height: 84vh; margin: 0 auto; object-fit: contain; }
.lightbox__frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.lightbox__title {
  margin-top: 0.85rem;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.lightbox__close {
  position: absolute; top: -2.5rem; right: 0;
  font-size: 2rem; line-height: 1; color: var(--fg); opacity: 0.7;
}
.lightbox__close:hover { opacity: 1; }

/* ---- Scroll-in reveal (added by script.js) ----------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}