/* ============================================================
   FijnThuis — interieurstudio Antwerpen
   Design system: één bestand, alle custom componenten met fth- prefix.
   Bootstrap doet het grid, wij doen de sfeer.
   TODO: contrast check op kleine teksten zodra echte foto's binnenkomen
   ============================================================ */

:root {
  /* palet — warm papier, diep mos, gebakken klei, messing */
  --fth-paper: #f4efe6;
  --fth-paper-2: #ece4d5;
  --fth-cream: #faf7f0;
  --fth-ink: #23302b;
  --fth-ink-2: #2f3f38;
  --fth-ink-soft: #5c6a63;
  --fth-clay: #b45a2d;
  --fth-clay-2: #9a4a24;
  --fth-brass: #a98a56;
  --fth-line: rgba(35, 48, 43, 0.14);
  --fth-line-light: rgba(244, 239, 230, 0.16);

  --fth-font-display: "Fraunces", Georgia, serif;
  --fth-font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --fth-font-mono: "SFMono-Regular", "Consolas", monospace;

  --fth-radius: 18px;
  --fth-radius-sm: 10px;
  --fth-shadow: 0 24px 60px -28px rgba(35, 48, 43, 0.35);
  --fth-shadow-sm: 0 12px 32px -18px rgba(35, 48, 43, 0.3);
  --fth-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- basis ---------- */

html {
  scroll-behavior: smooth;
}

body,html {
  font-family: var(--fth-font-body);
  background: var(--fth-paper);
  color: var(--fth-ink);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
}

::selection {
  background: var(--fth-clay);
  color: var(--fth-cream);
}

h1, h2, h3, .fth-display {
  font-family: var(--fth-font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fth-ink);
}

h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
}

p {
  color: var(--fth-ink-soft);
}

a {
  color: var(--fth-clay);
  text-decoration: none;
  transition: color 0.25s var(--fth-ease);
}

a:hover {
  color: var(--fth-clay-2);
}

img {
  max-width: 100%;
  height: auto;
}

/* sectie-ritme: standaard ruime padding, compacte variant bestaat ook */
.fth-section {
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  position: relative;
}

.fth-section--tight {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.fth-section--paper {
  background: var(--fth-paper);
}

.fth-section--cream {
  background: var(--fth-cream);
}

.fth-section--alt {
  background: var(--fth-paper-2);
}

.fth-section--ink {
  background: var(--fth-ink);
  color: var(--fth-paper);
}

.fth-section--ink h1, .fth-section--ink h2, .fth-section--ink h3 {
  color: var(--fth-paper);
}

.fth-section--ink p {
  color: rgba(244, 239, 230, 0.72);
}

/* foto-secties: inline background-image met overlay, wij zorgen voor cover */
.fth-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fth-photo h1, .fth-photo h2, .fth-photo h3 {
  color: var(--fth-cream);
}

.fth-photo p {
  color: rgba(250, 247, 240, 0.82);
}

/* ---------- typografie helpers ---------- */

/* mono kicker boven koppen — onze "label" stijl */
.fth-kicker {
  font-family: var(--fth-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fth-clay);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.fth-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--fth-clay);
}

.fth-section--ink .fth-kicker, .fth-photo .fth-kicker {
  color: var(--fth-brass);
}

.fth-section--ink .fth-kicker::before, .fth-photo .fth-kicker::before {
  background: var(--fth-brass);
}

.fth-lead {
  font-size: clamp(1.06rem, 1.6vw, 1.25rem);
  line-height: 1.6;
}

.fth-mono {
  font-family: var(--fth-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fth-outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 239, 230, 0.4);
}

.fth-section--paper .fth-outline-text,
.fth-section--cream .fth-outline-text {
  -webkit-text-stroke: 1.5px rgba(35, 48, 43, 0.25);
}

/* drop cap voor editorial paragrafen */
.fth-dropcap::first-letter {
  font-family: var(--fth-font-display);
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--fth-clay);
  font-weight: 500;
}

/* verticale tekst voor decoratieve labels */
.fth-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--fth-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fth-ink-soft);
}

/* ---------- knoppen ---------- */

.btn-fth {
  --bs-btn-font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform 0.3s var(--fth-ease), box-shadow 0.3s var(--fth-ease), background 0.3s var(--fth-ease), color 0.3s var(--fth-ease);
}

.btn-fth i {
  transition: transform 0.3s var(--fth-ease);
}

.btn-fth:hover i {
  transform: translateX(4px);
}

.btn-fth--solid {
  background: var(--fth-clay);
  color: var(--fth-cream);
}

.btn-fth--solid:hover {
  background: var(--fth-clay-2);
  color: var(--fth-cream);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(180, 90, 45, 0.7);
}

.btn-fth--ink {
  background: var(--fth-ink);
  color: var(--fth-paper);
}

.btn-fth--ink:hover {
  background: var(--fth-ink-2);
  color: var(--fth-cream);
  transform: translateY(-2px);
  box-shadow: var(--fth-shadow-sm);
}

.btn-fth--ghost {
  border-color: var(--fth-ink);
  color: var(--fth-ink);
  background: transparent;
}

.btn-fth--ghost:hover {
  background: var(--fth-ink);
  color: var(--fth-paper);
  transform: translateY(-2px);
}

.btn-fth--light {
  border-color: rgba(244, 239, 230, 0.5);
  color: var(--fth-cream);
  background: transparent;
}

.btn-fth--light:hover {
  background: var(--fth-cream);
  color: var(--fth-ink);
  transform: translateY(-2px);
}

/* grote ronde pijlknop voor CTA's */
.fth-arrow-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--fth-line-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--fth-cream);
  transition: all 0.35s var(--fth-ease);
}

.fth-arrow-btn:hover {
  background: var(--fth-clay);
  border-color: var(--fth-clay);
  transform: rotate(-45deg);
  color: var(--fth-cream);
}

/* ---------- topbar ---------- */

.fth-topbar {
  background: var(--fth-ink);
  color: var(--fth-paper);
  font-size: 0.8rem;
  padding: 0.5rem 0;
}

.fth-topbar a {
  color: var(--fth-paper);
}

.fth-topbar a:hover {
  color: var(--fth-brass);
}

.fth-topbar i {
  color: var(--fth-brass);
  margin-right: 0.35rem;
}

.fth-topbar__item {
  display: inline-flex;
  align-items: center;
  margin-right: 1.4rem;
  white-space: nowrap;
}

.fth-topbar__social a {
  margin-left: 0.9rem;
  font-size: 0.85rem;
}

/* ---------- navbar ---------- */

.fth-navbar {
  background: rgba(244, 239, 230, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fth-line);
  padding: 0.9rem 0;
  transition: box-shadow 0.3s var(--fth-ease), padding 0.3s var(--fth-ease);
}

.fth-navbar.is-scrolled {
  box-shadow: 0 10px 40px -20px rgba(35, 48, 43, 0.4);
  padding: 0.6rem 0;
}

.fth-navbar .navbar-brand img {
  height: 44px;
  width: auto;
}

.fth-navbar .nav-link {
  color: var(--fth-ink);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.5rem 0.85rem;
  position: relative;
}

.fth-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--fth-clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--fth-ease);
}

.fth-navbar .nav-link:hover::after,
.fth-navbar .nav-link.active::after {
  transform: scaleX(1);
}

.fth-navbar .navbar-toggler {
  border: none;
  font-size: 1.3rem;
  color: var(--fth-ink);
}

.fth-navbar .navbar-toggler:focus {
  box-shadow: none;
}

/* ---------- hero ---------- */

.fth-hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 9rem 0 0;
}

.fth-hero--inner {
  min-height: 62vh;
  padding-bottom: 4rem;
}

.fth-hero__title {
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 1.02;
}

.fth-hero__title em {
  font-style: italic;
  color: var(--fth-brass);
}

/* statusbalk onderaan hero — locatie, tijd, beschikbaarheid */
.fth-statusbar {
  border-top: 1px solid var(--fth-line-light);
  margin-top: 3rem;
  padding: 1.1rem 0;
  font-family: var(--fth-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.75);
}

.fth-statusbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 2rem;
}

/* pulserende punt = "we nemen projecten aan" */
.fth-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #67c27c;
  display: inline-block;
  position: relative;
}

.fth-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #67c27c;
  animation: fth-pulse 1.8s ease-out infinite;
}

@keyframes fth-pulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* media-frame met filmplayer-look */
.fth-frame {
  border-radius: var(--fth-radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--fth-shadow);
}

.fth-frame--offset::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--fth-brass);
  border-radius: var(--fth-radius);
  z-index: 0;
  pointer-events: none;
}

.fth-frame__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.fth-frame__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fth-frame__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fth-frame__play span {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(250, 247, 240, 0.16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(250, 247, 240, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fth-cream);
  font-size: 1.4rem;
  transition: all 0.3s var(--fth-ease);
}

.fth-frame__play:hover span {
  background: var(--fth-clay);
  border-color: var(--fth-clay);
  transform: scale(1.08);
}

.fth-frame__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fth-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(250, 247, 240, 0.85);
  background: linear-gradient(transparent, rgba(18, 24, 21, 0.75));
}

/* draaiende stempel-badge */
.fth-stamp {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px dashed var(--fth-brass);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--fth-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fth-brass);
  padding: 1rem;
  line-height: 1.5;
  animation: fth-spin 22s linear infinite;
}

@keyframes fth-spin {
  to { transform: rotate(360deg); }
}

/* kleine pill/badge */
.fth-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--fth-line);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  font-family: var(--fth-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fth-ink-soft);
  background: var(--fth-cream);
}

.fth-badge--light {
  border-color: var(--fth-line-light);
  background: rgba(250, 247, 240, 0.08);
  color: rgba(250, 247, 240, 0.85);
}

.fth-badge i {
  color: var(--fth-brass);
}

/* ---------- kaarten ---------- */

.fth-card {
  background: var(--fth-cream);
  border: 1px solid var(--fth-line);
  border-radius: var(--fth-radius);
  padding: 1.8rem;
  /* geen vaste hoogte: grids gebruiken expliciet h-100, losse kaarten sluiten aan op inhoud */
  transition: transform 0.35s var(--fth-ease), box-shadow 0.35s var(--fth-ease);
}

.fth-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fth-shadow-sm);
}

.fth-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--fth-paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--fth-clay);
  margin-bottom: 1.2rem;
}

.fth-card--ink {
  background: var(--fth-ink-2);
  border-color: var(--fth-line-light);
}

.fth-card--ink h3, .fth-card--ink h4 {
  color: var(--fth-paper);
}

.fth-card--ink p, .fth-card--ink li {
  color: rgba(244, 239, 230, 0.7);
}

.fth-card--ink .fth-card__icon {
  background: rgba(244, 239, 230, 0.08);
  color: var(--fth-brass);
}

/* project-kaart met genummerde editorial look */
.fth-case {
  position: relative;
  border-radius: var(--fth-radius);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem;
  color: var(--fth-cream);
  background-size: cover;
  background-position: center;
  transition: transform 0.35s var(--fth-ease);
}

.fth-case:hover {
  transform: translateY(-6px);
}

.fth-case__nr {
  font-family: var(--fth-font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 247, 240, 0.5);
  position: absolute;
  top: 1.2rem;
  left: 1.4rem;
}

.fth-case__body {
  position: relative;
  z-index: 1;
}

.fth-case__meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.fth-case h3 {
  color: var(--fth-cream);
  margin-bottom: 0.3rem;
}

.fth-case p {
  color: rgba(250, 247, 240, 0.8);
  margin: 0;
  font-size: 0.9rem;
}

/* ---------- horizontale rail ---------- */

.fth-rail {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  padding: 0.5rem 0.4rem 1.6rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.fth-rail::-webkit-scrollbar {
  height: 5px;
}

.fth-rail::-webkit-scrollbar-track {
  background: var(--fth-line);
  border-radius: 4px;
}

.fth-rail::-webkit-scrollbar-thumb {
  background: var(--fth-brass);
  border-radius: 4px;
}

.fth-rail > * {
  scroll-snap-align: start;
  flex: 0 0 min(78vw, 420px);
}

/* ---------- bento grid ---------- */

.fth-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.3rem;
}

.fth-bento__cell {
  border-radius: var(--fth-radius);
  padding: 1.9rem;
  border: 1px solid var(--fth-line);
  background: var(--fth-cream);
  grid-column: span 4;
  position: relative;
  overflow: hidden;
  /* lichte cel in een donkere sectie: tekst expliciet ink, anders erft hij de crèmekleur */
  color: var(--fth-ink);
}

.fth-bento__cell h3, .fth-bento__cell p, .fth-bento__cell a,
.fth-section--ink .fth-bento__cell h3,
.fth-section--ink .fth-bento__cell p,
.fth-section--ink .fth-bento__cell a {
  color: var(--fth-ink);
}

.fth-bento__cell .fth-index-nr {
  color: var(--fth-clay);
}

.fth-bento__cell--wide { grid-column: span 8; }
.fth-bento__cell--half { grid-column: span 6; }
.fth-bento__cell--tall { grid-row: span 2; }

.fth-bento__cell--photo {
  border: none;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
}

.fth-bento__cell--photo h3, .fth-bento__cell--photo p {
  color: var(--fth-cream);
}

.fth-bento__cell--ink {
  background: var(--fth-ink);
  border-color: var(--fth-line-light);
}

.fth-bento__cell--ink h3, .fth-bento__cell--ink p, .fth-bento__cell--ink li {
  color: var(--fth-paper);
}

@media (max-width: 991px) {
  .fth-bento__cell,
  .fth-bento__cell--wide,
  .fth-bento__cell--half {
    grid-column: span 12;
  }
  .fth-bento__cell--tall { grid-row: auto; }
}

/* ---------- KPI counters ---------- */

.fth-kpi__num {
  font-family: var(--fth-font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--fth-cream);
}

.fth-kpi__num sup {
  font-size: 0.4em;
  color: var(--fth-brass);
}

.fth-kpi__label {
  font-family: var(--fth-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.6);
  margin-top: 0.6rem;
}

.fth-kpi__delta {
  color: #8fd39a;
  font-size: 0.78rem;
  font-family: var(--fth-font-mono);
}

/* lichte variant op papier */
.fth-section--paper .fth-kpi__num,
.fth-section--cream .fth-kpi__num,
.fth-section--alt .fth-kpi__num {
  color: var(--fth-ink);
}

.fth-section--paper .fth-kpi__label,
.fth-section--cream .fth-kpi__label,
.fth-section--alt .fth-kpi__label {
  color: var(--fth-ink-soft);
}

/* ---------- timeline / proces ---------- */

.fth-steps {
  counter-reset: fth-step;
  position: relative;
}

.fth-step {
  position: relative;
  padding: 0 0 2.4rem 4.5rem;
  border-left: 1px solid var(--fth-line);
  counter-increment: fth-step;
}

.fth-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.fth-step::before {
  content: counter(fth-step, decimal-leading-zero);
  position: absolute;
  left: -1.4rem;
  top: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--fth-paper);
  border: 1px solid var(--fth-brass);
  color: var(--fth-clay);
  font-family: var(--fth-font-mono);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fth-step h3 {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}

.fth-step p {
  margin-bottom: 0.4rem;
}

.fth-step__meta {
  font-family: var(--fth-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fth-brass);
}

/* ---------- voor/na split ---------- */

.fth-splitba {
  border-radius: var(--fth-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fth-splitba__half {
  padding: 2.4rem;
  min-height: 340px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.fth-splitba__half--before {
  background: var(--fth-ink-2);
  filter: saturate(0.4);
}

.fth-splitba__tag {
  font-family: var(--fth-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fth-brass);
  margin-bottom: 0.5rem;
}

.fth-splitba__half h3, .fth-splitba__half p, .fth-splitba__half li {
  color: var(--fth-cream);
}

.fth-splitba__half ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fth-splitba__half li {
  padding: 0.35rem 0;
  border-top: 1px solid var(--fth-line-light);
  font-size: 0.9rem;
}

@media (max-width: 767px) {
  .fth-splitba { grid-template-columns: 1fr; }
}

/* ---------- lookbook / masonry ---------- */

.fth-lookbook {
  columns: 3;
  column-gap: 1.3rem;
}

@media (max-width: 991px) { .fth-lookbook { columns: 2; } }
@media (max-width: 575px) { .fth-lookbook { columns: 1; } }

.fth-look {
  break-inside: avoid;
  margin-bottom: 1.3rem;
  border-radius: var(--fth-radius);
  overflow: hidden;
  position: relative;
}

.fth-look img {
  width: 100%;
  display: block;
  transition: transform 0.5s var(--fth-ease);
}

.fth-look:hover img {
  transform: scale(1.04);
}

.fth-look__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(35, 48, 43, 0.75);
  backdrop-filter: blur(6px);
  color: var(--fth-cream);
  font-family: var(--fth-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}

/* ---------- dossier / team ---------- */

.fth-dossier {
  background: var(--fth-cream);
  border: 1px solid var(--fth-line);
  border-radius: var(--fth-radius);
  overflow: hidden;
  height: 100%;
  transition: transform 0.35s var(--fth-ease), box-shadow 0.35s var(--fth-ease);
}

.fth-dossier:hover {
  transform: translateY(-6px);
  box-shadow: var(--fth-shadow-sm);
}

.fth-dossier__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.fth-dossier__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: filter 0.4s var(--fth-ease), transform 0.5s var(--fth-ease);
}

.fth-dossier:hover .fth-dossier__photo img {
  filter: saturate(1);
  transform: scale(1.03);
}

.fth-dossier__body {
  padding: 1.3rem 1.4rem 1.5rem;
}

.fth-dossier__role {
  font-family: var(--fth-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fth-clay);
}

/* ---------- quote / reviews ---------- */

.fth-quote {
  font-family: var(--fth-font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: var(--fth-cream);
  font-weight: 400;
}

.fth-quote::before {
  content: "\201C";
  display: block;
  font-size: 3.2em;
  line-height: 0.5;
  color: var(--fth-brass);
  margin-bottom: 1.2rem;
}

.fth-quote__author {
  font-family: var(--fth-font-body);
  font-size: 0.9rem;
  color: rgba(250, 247, 240, 0.75);
}

.fth-quote__author strong {
  color: var(--fth-cream);
  display: block;
}

/* ronde nav-knoppen voor carousels */
.fth-carousel-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--fth-line-light);
  background: transparent;
  color: var(--fth-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--fth-ease);
}

.fth-carousel-btn:hover {
  background: var(--fth-clay);
  border-color: var(--fth-clay);
}

.fth-carousel-btn--dark {
  border-color: var(--fth-line);
  color: var(--fth-ink);
}

.fth-carousel-btn--dark:hover {
  background: var(--fth-ink);
  border-color: var(--fth-ink);
  color: var(--fth-cream);
}

/* ---------- marquee ---------- */

.fth-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--fth-line-light);
  border-bottom: 1px solid var(--fth-line-light);
  padding: 1.3rem 0;
}

.fth-marquee--paper {
  border-color: var(--fth-line);
}

.fth-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  animation: fth-scroll 30s linear infinite;
}

.fth-marquee--slow .fth-marquee__track {
  animation-duration: 48s;
}

.fth-marquee--reverse .fth-marquee__track {
  animation-direction: reverse;
}

.fth-marquee__item {
  font-family: var(--fth-font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--fth-cream);
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}

.fth-marquee--paper .fth-marquee__item {
  color: var(--fth-ink);
}

.fth-marquee__item i {
  font-size: 0.8rem;
  color: var(--fth-clay);
}

.fth-marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 247, 240, 0.45);
}

@keyframes fth-scroll {
  to { transform: translateX(-50%); }
}

/* ---------- sticky split (filosofie e.d.) ---------- */

.fth-sticky {
  position: sticky;
  top: 110px;
}

@media (max-width: 991px) {
  .fth-sticky { position: static; }
}

.fth-index-nr {
  font-family: var(--fth-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--fth-brass);
}

/* ---------- accordion (FAQ) ---------- */

.fth-faq .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fth-line);
  border-radius: 0;
}

.fth-faq .accordion-button {
  background: transparent;
  box-shadow: none;
  font-family: var(--fth-font-display);
  font-size: 1.15rem;
  color: var(--fth-ink);
  padding: 1.3rem 0;
}

.fth-faq .accordion-button:not(.collapsed) {
  color: var(--fth-clay);
}

.fth-faq .accordion-button::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f067";
  background: none;
  font-size: 0.9rem;
  color: var(--fth-clay);
  transition: transform 0.3s var(--fth-ease);
}

.fth-faq .accordion-button:not(.collapsed)::after {
  content: "\f068";
  transform: none;
}

.fth-faq .accordion-body {
  padding: 0 0 1.4rem;
  color: var(--fth-ink-soft);
}

.fth-faq--light .accordion-item {
  border-color: var(--fth-line-light);
}

.fth-faq--light .accordion-button {
  color: var(--fth-paper);
}

.fth-faq--light .accordion-button:not(.collapsed) {
  color: var(--fth-brass);
}

.fth-faq--light .accordion-body {
  color: rgba(244, 239, 230, 0.72);
}

/* ---------- formulieren ---------- */

.fth-field {
  margin-bottom: 1.1rem;
}

.fth-field label {
  font-family: var(--fth-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fth-ink-soft);
  margin-bottom: 0.4rem;
}

.fth-field .form-control,
.fth-field .form-select {
  border: 1px solid var(--fth-line);
  background: var(--fth-cream);
  border-radius: var(--fth-radius-sm);
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: var(--fth-ink);
}

.fth-field .form-control:focus,
.fth-field .form-select:focus {
  border-color: var(--fth-clay);
  box-shadow: 0 0 0 3px rgba(180, 90, 45, 0.15);
  background: #fff;
}

.fth-field .form-control::placeholder {
  color: rgba(92, 106, 99, 0.6);
}

/* form op donkere ondergrond */
.fth-form--light .fth-field label {
  color: rgba(244, 239, 230, 0.6);
}

.fth-form--light .fth-field .form-control,
.fth-form--light .fth-field .form-select {
  background: rgba(250, 247, 240, 0.07);
  border-color: var(--fth-line-light);
  color: var(--fth-cream);
}

.fth-form--light .fth-field .form-control:focus {
  background: rgba(250, 247, 240, 0.12);
  color: var(--fth-cream);
}

/* ---------- toast notificatie ---------- */

.fth-toast {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 1090;
  background: var(--fth-ink);
  color: var(--fth-paper);
  border-radius: var(--fth-radius-sm);
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: var(--fth-shadow);
  transform: translateY(140%);
  transition: transform 0.45s var(--fth-ease);
  max-width: 340px;
}

.fth-toast.is-visible {
  transform: translateY(0);
}

.fth-toast i {
  color: #8fd39a;
  font-size: 1.2rem;
}

/* ---------- cookie banner (alleen home) ---------- */

.fth-cookie {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 1080;
  max-width: 400px;
  background: var(--fth-cream);
  border: 1px solid var(--fth-line);
  border-radius: var(--fth-radius);
  box-shadow: var(--fth-shadow);
  padding: 1.4rem;
  transform: translateY(140%);
  transition: transform 0.5s var(--fth-ease);
}

.fth-cookie.is-visible {
  transform: translateY(0);
}

.fth-cookie p {
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
}

/* ---------- tabellen ---------- */

.fth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.fth-table th {
  font-family: var(--fth-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fth-brass);
  font-weight: 500;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--fth-line-light);
  text-align: left;
}

.fth-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--fth-line-light);
  color: rgba(244, 239, 230, 0.8);
  vertical-align: top;
}

.fth-table tr:hover td {
  background: rgba(250, 247, 240, 0.04);
}

.fth-table .fa-check { color: #8fd39a; }
.fth-table .fa-xmark { color: rgba(244, 239, 230, 0.35); }

.fth-table--paper td {
  border-color: var(--fth-line);
  color: var(--fth-ink-soft);
}

.fth-table--paper th {
  color: var(--fth-clay);
  border-color: var(--fth-line);
}

.fth-table--paper tr:hover td {
  background: rgba(35, 48, 43, 0.03);
}

.fth-table--paper .fa-xmark { color: rgba(35, 48, 43, 0.3); }

/* ---------- prijskaarten ---------- */

.fth-price {
  border: 1px solid var(--fth-line);
  border-radius: var(--fth-radius);
  padding: 2rem;
  background: var(--fth-cream);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.35s var(--fth-ease), box-shadow 0.35s var(--fth-ease);
}

.fth-price:hover {
  transform: translateY(-6px);
  box-shadow: var(--fth-shadow-sm);
}

.fth-price--featured {
  background: var(--fth-ink);
  border-color: var(--fth-ink);
}

.fth-price--featured h3, .fth-price--featured p, .fth-price--featured li {
  color: var(--fth-paper);
}

.fth-price__amount {
  font-family: var(--fth-font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--fth-ink);
  margin: 0.8rem 0 0.2rem;
}

.fth-price--featured .fth-price__amount {
  color: var(--fth-cream);
}

.fth-price__per {
  font-family: var(--fth-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fth-brass);
}

.fth-price ul {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  flex-grow: 1;
}

.fth-price li {
  padding: 0.5rem 0 0.5rem 1.7rem;
  position: relative;
  border-top: 1px solid var(--fth-line);
  font-size: 0.92rem;
  color: var(--fth-ink-soft);
}

.fth-price--featured li {
  border-color: var(--fth-line-light);
  color: rgba(244, 239, 230, 0.75);
}

.fth-price li i {
  position: absolute;
  left: 0;
  top: 0.75rem;
  color: var(--fth-clay);
  font-size: 0.8rem;
}

.fth-price--featured li i {
  color: var(--fth-brass);
}

/* ---------- artikel / blog content ---------- */

.fth-article p {
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 1.4rem;
}

.fth-article h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 2.6rem 0 1rem;
}

.fth-article h3 {
  font-size: 1.3rem;
  margin: 2rem 0 0.8rem;
}

.fth-article ul {
  color: var(--fth-ink-soft);
  padding-left: 1.2rem;
  margin-bottom: 1.4rem;
}

.fth-article li {
  margin-bottom: 0.4rem;
}

.fth-article blockquote {
  border-left: 3px solid var(--fth-clay);
  padding: 0.4rem 0 0.4rem 1.4rem;
  margin: 2rem 0;
  font-family: var(--fth-font-display);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--fth-ink);
}

/* meta-rij boven artikelen */
.fth-meta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- footer ---------- */

.fth-footer {
  background: var(--fth-ink);
  color: var(--fth-paper);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
}

.fth-footer h4 {
  font-family: var(--fth-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fth-brass);
  margin-bottom: 1.2rem;
  font-weight: 500;
}

.fth-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fth-footer li {
  margin-bottom: 0.55rem;
}

.fth-footer a {
  color: rgba(244, 239, 230, 0.7);
  font-size: 0.92rem;
}

.fth-footer a:hover {
  color: var(--fth-brass);
}

.fth-footer__brand img {
  height: 52px;
  margin-bottom: 1rem;
}

.fth-footer__contact p {
  color: rgba(244, 239, 230, 0.7);
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}

.fth-footer__contact i {
  color: var(--fth-brass);
  width: 1.2rem;
}

.fth-footer__social a {
  width: 42px;
  height: 42px;
  border: 1px solid var(--fth-line-light);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.6rem;
  font-size: 0.95rem;
}

.fth-footer__social a:hover {
  background: var(--fth-clay);
  border-color: var(--fth-clay);
  color: var(--fth-cream);
}

.fth-footer__legal {
  border-top: 1px solid var(--fth-line-light);
  margin-top: 3rem;
  padding: 1.4rem 0;
  font-size: 0.82rem;
  color: rgba(244, 239, 230, 0.55);
}

.fth-footer__legal p {
  color: rgba(244, 239, 230, 0.55);
  font-size: 0.82rem;
  margin: 0;
}

/* ---------- modal ---------- */

.fth-modal .modal-content {
  background: var(--fth-paper);
  border-radius: var(--fth-radius);
  border: none;
}

.fth-modal .modal-header {
  border-bottom: 1px solid var(--fth-line);
}

.fth-modal .btn-close {
  filter: none;
}

/* ---------- misc ---------- */

/* dunne scheidingslijn met label */
.fth-hr-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
}

.fth-hr-label::before, .fth-hr-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fth-line);
}

.fth-hr-label span {
  font-family: var(--fth-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fth-ink-soft);
}

/* decoratieve cirkel in hoeken van secties */
.fth-ring {
  position: absolute;
  border: 1px solid var(--fth-brass);
  border-radius: 50%;
  opacity: 0.35;
  pointer-events: none;
}

/* kaart-iframe in kader */
.fth-map {
  border-radius: var(--fth-radius);
  overflow: hidden;
  border: 1px solid var(--fth-line);
  box-shadow: var(--fth-shadow-sm);
}

.fth-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  filter: saturate(0.7) sepia(0.08);
}

/* kleine avatar-rij */
.fth-avatars {
  display: flex;
}

.fth-avatars img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--fth-paper);
  object-fit: cover;
  margin-left: -10px;
}

.fth-avatars img:first-child {
  margin-left: 0;
}

/* checklist */
.fth-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fth-checklist li {
  padding: 0.55rem 0 0.55rem 1.9rem;
  position: relative;
  color: var(--fth-ink-soft);
  border-bottom: 1px dashed var(--fth-line);
}

.fth-checklist li:last-child {
  border-bottom: none;
}

.fth-checklist li i {
  position: absolute;
  left: 0;
  top: 0.8rem;
  color: var(--fth-clay);
}

.fth-checklist--light li {
  color: rgba(244, 239, 230, 0.75);
  border-color: var(--fth-line-light);
}

.fth-checklist--light li i {
  color: var(--fth-brass);
}

/* grote CTA-tekst onderaan pagina's */
.fth-cta-big {
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  line-height: 1.05;
}

.fth-cta-big a {
  color: var(--fth-cream);
}

.fth-cta-big a:hover {
  color: var(--fth-brass);
}

/* disclaimer/grijs blokje */
.fth-note {
  background: var(--fth-paper-2);
  border-left: 3px solid var(--fth-brass);
  border-radius: 0 var(--fth-radius-sm) var(--fth-radius-sm) 0;
  padding: 1.2rem 1.4rem;
  font-size: 0.88rem;
  color: var(--fth-ink-soft);
}

/* responsive fixes */
@media (max-width: 767px) {
  .fth-hero {
    min-height: auto;
    padding-top: 7.5rem;
  }
  .fth-statusbar__item {
    margin-right: 1rem;
    margin-bottom: 0.3rem;
  }
  .fth-frame__media {
    aspect-ratio: 4 / 3;
  }
  .fth-quote {
    font-size: 1.35rem;
  }
}