/* =========================================================================
   UniQwork — landing styles. Trimmed copy of uniqtalent.nl's design system:
   near-black panels, brass-gold display type (Bungee) in uppercase, Roboto
   for body copy, the gold "bar" motif as eyebrow markers and list bullets.
   The audience gate, hero photo-slideshow and diaindicators are dropped —
   this page has one audience and one static hero.
   ========================================================================= */

:root {
  --ink: #0a0a0b;
  --ink-2: #141416;
  --gold: #bf9633;
  --gold-deep: #8d6e26;
  --gold-bright: #d9ae4a;
  --paper: #ffffff;
  --paper-2: #f6f4ef;
  --text: #1c1b19;
  --text-soft: #57534c;
  --on-dark: #f2efe8;
  --on-dark-soft: #b6b1a6;
  --line: rgba(28, 27, 25, 0.14);
  --radius: 10px;
  --edge: clamp(20px, 5vw, 60px);
  --shell: 1320px;
  --wrap: 1140px;
  --font-display: "Bungee", "Arial Black", Impact, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 18px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* -------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--edge); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--edge); }

.section { padding-block: clamp(56px, 8vw, 112px); }
.section-tight { padding-block: clamp(40px, 5vw, 72px); }
.section-paper2 { background: var(--paper-2); }

/* -------------------------------------------------------------------------
   Type
   ------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.14;
  letter-spacing: 0.005em;
  margin: 0;
  overflow-wrap: break-word;
}

.d-hero { font-size: clamp(30px, 5.2vw, 62px); line-height: 1.08; }
.d-1 { font-size: clamp(24px, 3.4vw, 42px); }
.d-2 { font-size: clamp(20px, 2.4vw, 30px); }
.d-3 { font-size: clamp(17px, 1.7vw, 21px); }

.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.72; }
.prose p { margin: 0 0 20px; max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--gold-deep); text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }
.soft { color: var(--text-soft); }
.center { text-align: center; }
.center .prose p { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 6px;
  background: var(--gold);
  flex: none;
}
.eyebrow-on-dark { color: var(--on-dark); }
.center .eyebrow { justify-content: center; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-bright); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(242, 239, 232, 0.55); }
.btn-ghost:hover { background: rgba(242, 239, 232, 0.12); color: var(--on-dark); }
.btn-ink { background: var(--ink); color: var(--on-dark); }
.btn-ink:hover { background: var(--ink-2); color: var(--on-dark); }
.btn-deep { background: var(--gold-deep); color: #fff; width: 100%; }
.btn-deep:hover { background: #7a5f20; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* -------------------------------------------------------------------------
   Wordmark — "UniQ" in white, "work" in gold, gold bars filling the rest
   of the line. The bars are the brand's structural motif.
   ------------------------------------------------------------------------- */

.mark {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.06;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.mark-a { color: #fff; letter-spacing: 0.08em; }
.mark-b { color: var(--gold); }
.mark-bars {
  display: grid;
  gap: 3px;
  min-width: 26px;
}
.mark-bars i { display: block; height: 4px; background: var(--gold); }
.mark-bars i:nth-child(2) { width: 72%; }
.mark-on-light .mark-a { color: var(--ink); }

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(191, 150, 51, 0.28);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  padding-block: 12px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
}
.nav-links a {
  color: #e8e4dc;
  text-decoration: none;
  padding-block: 6px;
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a.btn-gold { color: var(--ink); }
.nav-links a.btn-gold:hover { color: var(--ink); }
.nav-cta-long { display: inline; }
.nav-cta-short { display: none; }
@media (max-width: 900px) {
  .nav-links a.nav-hide { display: none; }
}
@media (max-width: 620px) {
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
}

/* -------------------------------------------------------------------------
   Hero — one full-bleed dark panel. A gold constellation drifts behind the
   headline; there is no photo layer (see spec: Imagery — no fabricated
   photos of "specialists"), so the panel leans on the net animation, a
   radial glow and the block-reveal text treatment.
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100vh - var(--nav-h, 64px));
  min-height: calc(100svh - var(--nav-h, 64px));
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}
.hero-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Blok-reveal op de hero-tekst: per regel schuift een gouden (of donkere)
   balk van buiten het scherm naar de plek waar de tekst komt, blijft even
   staan en gaat dan als een schuifje open. site.js zet wipe-go zodra de
   pagina geladen is en geeft elk element zijn eigen vertraging via --wd.
   Zonder JS is er geen data-js-attribuut en blijft alle tekst gewoon staan. */
html[data-js="on"] .wipe { visibility: hidden; }
.wipe { position: relative; }
.wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100vw);
  transform-origin: right center;
  pointer-events: none;
}
.wipe-dark::after {
  background: var(--ink);
  border-left: 2px solid var(--gold);
}
.wipe-go .wipe {
  animation: wipe-text 1.3s both;
  animation-delay: var(--wd, 0s);
}
.wipe-go .wipe::after {
  animation: wipe-box 1.3s both;
  animation-delay: var(--wd, 0s);
}
@keyframes wipe-text {
  0%, 49% { visibility: hidden; }
  50%, 100% { visibility: visible; }
}
@keyframes wipe-box {
  0% {
    transform: translateX(-100vw) scaleX(1);
    animation-timing-function: cubic-bezier(0.3, 0.4, 0.15, 1);
  }
  44% { transform: translateX(0) scaleX(1); }
  58% {
    transform: translateX(0) scaleX(1);
    animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
  }
  100% { transform: translateX(0) scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-js="on"] .wipe { visibility: visible; }
  .wipe-go .wipe,
  .wipe-go .wipe::after { animation: none; }
}

.hero::after {
  /* A warm pool of light behind the type, so the panel is not flat black. */
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(1100px, 130%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(191, 150, 51, 0.16), transparent 62%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 13vw, 168px);
}
.hero h1 { max-width: 17ch; }
.hero .lead {
  max-width: 56ch;
  margin: clamp(24px, 3vw, 34px) 0 0;
  color: var(--on-dark);
}
.hero .btn-row { margin-top: clamp(30px, 4vw, 44px); }

/* -------------------------------------------------------------------------
   Intro — heading and copy on the left, the founder card on the right.
   ------------------------------------------------------------------------- */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }

/* Founder card: dark portrait-style card. No real photo yet (spec:
   Imagery) — .founder-avatar renders an abstract gold-monogram tile
   instead of a <img>, in the exact same slot so a real photo can drop in
   later without any markup change beyond swapping the element. */
.founders {
  display: grid;
  gap: 22px;
}
.founder {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 1 / 1;
}
.founder-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(191, 150, 51, 0.22), transparent 60%),
    var(--ink);
}
.founder-avatar span {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 80px);
  color: var(--gold);
  letter-spacing: 0.05em;
}
.founder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 42%, rgba(10, 10, 11, 0.55) 68%, rgba(10, 10, 11, 0.96) 100%);
}
.founder-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 22px 24px 20px;
}
.founder-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--gold);
  margin: 0 0 4px;
}
.founder-body p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.founder-body a {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
}
.founder-body a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------------------
   Dark panel — inset from the page edge. Holds the centred statement and,
   at its foot, the two engagement-model cards.
   ------------------------------------------------------------------------- */

.panel {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(48px, 7vw, 92px) clamp(22px, 4vw, 64px) clamp(40px, 5vw, 64px);
}
.panel .display { max-width: 24ch; margin-inline: auto; }
.panel .lead { color: var(--on-dark); max-width: 66ch; margin-inline: auto; }
.panel a:not(.btn) { color: var(--gold-bright); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(40px, 6vw, 72px);
  text-align: left;
}
.card {
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 42px);
  display: flex;
  flex-direction: column;
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.16;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
}
.card p { margin: 0; font-size: 16px; line-height: 1.7; }
.checks { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 13px; }
.checks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.55;
}
.checks li::before {
  content: "";
  margin-top: 7px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
}
.card .btn { margin-top: auto; }

/* -------------------------------------------------------------------------
   Disciplines
   ------------------------------------------------------------------------- */

.disciplines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(30px, 4vw, 52px);
  margin-top: clamp(36px, 5vw, 60px);
}
.discipline h3 { margin: 16px 0 10px; }
.discipline p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-soft); }
.bar { display: block; width: 40px; height: 6px; background: var(--gold); }

/* -------------------------------------------------------------------------
   Quote
   ------------------------------------------------------------------------- */

.quote { margin: 0; text-align: center; }
.quote-mark {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--gold);
}
.quote blockquote {
  margin: 20px auto 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2.5vw, 31px);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
}
.quote figcaption {
  margin-top: 24px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-lines { display: grid; gap: 4px; margin-top: 28px; font-size: 16px; }
.contact-lines a { color: var(--gold-deep); text-underline-offset: 3px; }
.contact-lines a:hover { color: var(--gold); }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.field input,
.field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { margin: 0; font-size: 14px; color: var(--text-soft); min-height: 1.4em; }
.form-note-error { color: #a3301f; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.foot {
  background: var(--ink);
  color: var(--on-dark-soft);
  font-size: 14.5px;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: center;
  padding-block: 40px;
}
.foot a { color: var(--on-dark-soft); text-decoration: none; }
.foot a:hover { color: var(--gold-bright); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* -------------------------------------------------------------------------
   Motion — one shared reveal, kept subtle.
   ------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .reveal-in { transition: none; }
}