/* ============================================================
   NICK TAKKENBERG | COMPONENTS & LAYOUT (desktop reference)
   Geometry mapped 1:1 from the approved reference frame (941px).
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "EB Garamond"; src: url("../assets/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../assets/fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../assets/fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../assets/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

::selection { background: rgba(198, 154, 53, 0.35); color: var(--c-ink); }

:focus-visible {
  outline: 1px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-gold); color: var(--c-gold-ink);
  padding: 0.5rem 1rem; font-size: 0.75rem; letter-spacing: 0.08em;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.container { padding-inline: var(--gutter); }

/* ---------- Shared text styles ---------- */
.k-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold-soft);
  line-height: 1.9;
}
.k-heading-caps {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #DAD5C7;
}
.k-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-label);
  color: var(--c-gold-soft);
}
.k-link .arr { transition: transform var(--t-fast) var(--ease-out); }
.k-link:hover .arr { transform: translateX(0.25rem); }
.k-link:hover { color: #D8AC49; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.125rem;
  padding-inline: 1.125rem;
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--c-gold); color: var(--c-gold-ink); }
.btn-gold:hover { background: #D3A83F; }
.btn-line { border: 1px solid rgba(242, 239, 230, 0.4); color: var(--c-ink); }
.btn-line:hover { border-color: rgba(242, 239, 230, 0.75); }
.btn-goldline { border: 1px solid var(--line-gold); color: var(--c-gold); }
.btn-goldline:hover { border-color: var(--c-gold); background: rgba(198, 154, 53, 0.08); }

/* Section chapter head | question (kicker) + answer (title) */
.section-head { margin-bottom: 2.8rem; }
.s-title {
  margin-top: 0.7rem;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 1.8125rem;
  line-height: 1.2;
  color: #EDE7D7;
  max-width: 34rem;
}
.s-sub {
  margin-top: 0.9rem;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--c-ink-dim);
  max-width: 30rem;
}

/* Hairlines */
.hairline-t { border-top: 1px solid var(--line-soft); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter) var(--gutter);
}
.brand {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.site-nav { display: flex; align-items: center; gap: 1.65rem; }
.site-nav a:not(.btn) {
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #D6D1C4;
  transition: color var(--t-fast) var(--ease-out);
  position: relative;
}
.site-nav a:not(.btn):hover { color: var(--c-ink); }
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -0.35rem;
  height: 1px; background: var(--c-gold);
  transition: right var(--t-med) var(--ease-out);
}
.site-nav a:not(.btn):hover::after { right: 0; }
.site-nav .btn { height: 1.75rem; padding-inline: 0.875rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: var(--hero-h);
  background: var(--c-bg-deep);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-photo {
  position: absolute; right: 0; top: var(--header-h); height: calc(100% - var(--header-h));
  width: 59.6%;
  object-fit: cover; object-position: right bottom;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
}
.hero-desk {
  position: absolute; left: 12.5%; bottom: 0;
  width: 17.6%; height: 24.5%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 38%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.hero-grain {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 8% 10%, rgba(58, 48, 32, 0.55), transparent 55%),
    radial-gradient(26% 34% at 92% 92%, rgba(7, 6, 4, 0.55), transparent 72%),
    linear-gradient(180deg, rgba(6, 5, 4, 0.25), transparent 30%, transparent 78%, rgba(6, 5, 4, 0.55));
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 5;
  padding-top: 6rem;
  max-width: 26.5rem;
}
.hero-eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1.1rem;
}
.hero-title {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1.17;
  letter-spacing: 0.002em;
  color: #EFE8D6;
}
.hero-title .line { display: block; }
.hero-sub {
  margin-top: 0.8rem;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: #B9B3A5;
  max-width: 20.5rem;
}
.hero-actions { margin-top: 0.8rem; display: flex; gap: 0.75rem; }
.hero-more {
  position: absolute; z-index: 5;
  left: var(--gutter); top: 23.9rem;
  display: block;
  font-size: var(--fs-label);
  color: var(--c-gold-soft);
}
.hero-more .chev {
  display: block; margin-top: 0.6rem; width: 0.85rem; height: 0.85rem;
  color: var(--c-gold-soft);
  transition: transform var(--t-fast) var(--ease-out);
}
.hero-more:hover .chev { transform: translateY(0.2rem); }

/* ============================================================
   THINKING MODEL  (Mijn manier van denken)
   ============================================================ */
.thinking {
  position: relative;
  background: #181411;
  padding-block: 4.4rem 4.8rem;
  overflow: hidden;
}
.thinking-texture {
  position: absolute; left: -2rem; bottom: -4rem; width: 16rem; height: 10rem;
  background: url("../assets/img/slime-wall.jpg") no-repeat left bottom / cover;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(80% 80% at 15% 90%, #000 20%, transparent 75%);
          mask-image: radial-gradient(80% 80% at 15% 90%, #000 20%, transparent 75%);
  pointer-events: none;
}
.thinking-head {
  display: grid;
  grid-template-columns: 8.3rem 1fr;
  column-gap: 2rem;
  padding-top: 1.5rem;
  position: relative;
}
.thinking-label { position: relative; }
.thinking-label::after {
  content: ""; position: absolute; top: 0.15rem; bottom: -4.4rem; right: -1rem;
  width: 1px; background: var(--line-soft);
}
.thinking-intro {
  font-size: 0.84375rem;
  line-height: 1.65;
  color: #E6E1D3;
  max-width: 28.5rem;
}
.model-flow {
  margin-top: 0.4rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  position: relative;
}
.model-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.9rem;
  width: 5.6rem;
}
.model-node {
  width: 3.4rem; height: 3.4rem;
  border: 1px solid rgba(198, 154, 53, 0.5);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-gold);
}
.model-node svg { width: 1.7rem; height: 1.7rem; }
.model-step .t {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: #CFC9BA;
  white-space: nowrap;
}
.model-arrow {
  align-self: flex-start;
  margin-top: 1.5rem;
  color: rgba(198, 154, 53, 0.75);
  flex: 0 0 auto;
}
.model-arrow svg { width: 1.1rem; height: 0.6rem; }

/* ============================================================
   FOCUS  (Waar ik op focus)
   ============================================================ */
.focus {
  position: relative;
  background: var(--c-bg);
  padding-block: 4.4rem 4.8rem;
  overflow: hidden;
}
.focus-texture {
  position: absolute; top: 0; bottom: 0; width: 13rem;
  background: url("../assets/img/slime-wall.jpg") no-repeat center / cover;
  opacity: 0.3;
  pointer-events: none;
}
.focus-texture.tl { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 95%); mask-image: linear-gradient(90deg, #000 30%, transparent 95%); }
.focus-texture.tr { right: 0; transform: scaleX(-1); -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 92%); mask-image: linear-gradient(90deg, #000 20%, transparent 92%); }
.focus-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.4rem;
}
.focus-label { padding-top: 0.1rem; }
.focus-card {
  background: var(--c-card);
  padding: 2rem 1.9rem 2.1rem;
  border: 1px solid rgba(242, 239, 230, 0.03);
  transition: border-color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
.focus-card:hover { border-color: var(--line-gold-soft); background: #1E1C18; }

.focus-card h3 {
  margin-top: 0;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 1.375rem;
  color: #EDE8DA;
  letter-spacing: 0.01em;
}
.focus-card p {
  margin-top: 0.65rem;
  font-size: 0.78125rem;
  line-height: 1.6;
  color: #A9A395;
}

/* ============================================================
   PRINCIPLES  (Werkprincipes)
   ============================================================ */
.principles { padding-block: 4.4rem 4.8rem; background: var(--c-bg); }
.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.5rem;
}
.principles-label .k-label { display: block; }
.principles-label .k-link { margin-top: 1.1rem; white-space: nowrap; }
.principles-col { display: flex; flex-direction: column; gap: 1.9rem; }
.principle { display: grid; grid-template-columns: 1.9rem 1fr; column-gap: 1.1rem; }
.principle .num {
  font-family: var(--f-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  padding-top: 0.05rem;
}
.principle h3 {
  font-family: var(--f-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ECE7DA;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.principle p {
  margin-top: 0.35rem;
  font-size: 0.78125rem;
  line-height: 1.55;
  color: #96917F;
}

/* ============================================================
   MEDIA ROW  (Filmpjes | Artikelen)
   ============================================================ */
.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--c-bg);
}
.media-panel { padding: 1.6rem var(--gutter) 1.8rem; }
.media-panel + .media-panel { border-left: 1px solid var(--line-soft); padding-left: 1.9rem; }
.media-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.05rem;
}
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }

.vcard .thumb { display: block; position: relative; overflow: hidden; background: var(--c-card); }
.vcard .thumb img {
  display: block;
  aspect-ratio: 124 / 112;
  width: 100%; height: auto; object-fit: cover;
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}
.vcard:hover .thumb img { transform: scale(1.045); }
.thumb .dur {
  position: absolute; left: 0.55rem; top: 0.55rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #EFE9D9;
  background: rgba(10, 8, 6, 0.78);
  border: 1px solid rgba(198, 154, 53, 0.45);
  padding: 0.3rem 0.55rem;
  border-radius: 1px;
  backdrop-filter: blur(2px);
}
.vcard h3, .acard h3 {
  margin-top: 0.55rem;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 0.90625rem;
  line-height: 1.25;
  color: #EDE8DA;
}
.vcard p, .acard p {
  margin-top: 0.3rem;
  font-size: 0.65625rem;
  line-height: 1.45;
  color: #A29D8F;
}

.acard { display: flex; flex-direction: column; }
.acard .thumb { display: block; position: relative; overflow: hidden; background: var(--c-card); }
.acard .thumb img {
  display: block;
  aspect-ratio: 130 / 81;
  width: 100%; height: auto; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.acard:hover .thumb img { transform: scale(1.05); }
.acard h3 { font-size: var(--fs-title-s); }
.acard .tag {
  margin-top: 0.55rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-gold-soft);
}

/* ============================================================
   CASES  (Built / Tested / Learned)
   ============================================================ */
.cases {
  position: relative;
  display: grid;
  grid-template-columns: 52% 1fr;
  background: #151110;
  min-height: 24rem;
}
.case-content { padding: 3.6rem var(--gutter) 3.2rem; position: relative; z-index: 2; }
.case-head { display: flex; align-items: baseline; gap: 2.2rem; }
.case-title {
  margin-top: 1rem;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 1.8125rem;
  color: #EFEADB;
}
.case-body {
  margin-top: 0.9rem;
  font-size: 0.84375rem;
  line-height: 1.65;
  color: #ABA697;
  max-width: 22.6rem;
}
.case-tags { margin-top: 0.65rem; display: flex; gap: 0.55rem; }
.case-tags .chip {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-gold-soft);
  border: 1px solid var(--line-gold-soft);
  padding: 0.32rem 0.62rem;
  border-radius: 1px;
}
.case-stats {
  margin-top: 1.8rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.8rem;
}
.case-stats .stat .n {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 2rem;
  color: var(--c-gold);
  line-height: 1;
}
.case-stats .stat .l {
  margin-top: 0.3rem;
  font-size: var(--fs-label);
  color: #B5AF9F;
  line-height: 1.25;
}
.case-media { position: relative; overflow: hidden; }
.case-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 55%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%);
}

/* ============================================================
   CTA  (Spreken of samenwerken)
   ============================================================ */
.cta {
  position: relative;
  background: var(--c-bg);
  display: grid;
  grid-template-columns: 1fr 19rem;
  column-gap: 3rem;
  min-height: 17rem;
}
.cta-content { padding: 3rem 0 2.8rem var(--gutter); }
.cta-content .k-label { line-height: 1.2; }
.cta-title {
  margin-top: 0.4rem;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 2.0625rem;
  line-height: 1.15;
  color: #EFE9D9;
}
.cta-body {
  margin-top: 0.7rem;
  font-size: 0.84375rem;
  line-height: 1.65;
  color: #ABA697;
  max-width: 24.5rem;
}
.cta-actions { margin-top: 1.2rem; display: flex; gap: 0.85rem; }
.cta-quote {
  align-self: center;
  margin-right: var(--gutter);
  background: #1D1813;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid rgba(242, 239, 230, 0.03);
}
.cta-quote .qmark {
  font-family: var(--f-serif);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--c-gold);
}
.cta-quote p {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #DDD8CA;
}
.cta-quote .sig {
  margin-top: 1rem;
  font-family: var(--f-sans);
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-gold-soft);
}
.cta-media { position: relative; overflow: hidden; }
.cta-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.42rem var(--gutter);
}
.site-footer .brand { font-size: 0.6875rem; letter-spacing: 0.2em; }
.foot-left { display: flex; align-items: baseline; gap: 1.4rem; }

/* Built by Beacy */
.built-by {
  display: inline-flex; align-items: center; gap: 0.55rem;
  opacity: 0.62;
  transition: opacity var(--t-fast) var(--ease-out);
}
.built-by:hover { opacity: 1; }
.bb-label {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.bb-logo {
  height: 0.875rem; width: auto;
  filter: brightness(0) invert(1);
}
.bb-word {
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-ink);
}
.site-footer .copy { font-size: var(--fs-micro); color: var(--c-ink-faint); }
.site-footer nav { display: flex; gap: 1.6rem; }
.site-footer nav a {
  font-size: 0.625rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #CFCABB;
  transition: color var(--t-fast) var(--ease-out);
}
.site-footer nav a:hover { color: var(--c-gold); }

html { overflow-x: clip; }


/* ============================================================
   INZICHTEN | one calm editorial row (80/20 reduction)
   ============================================================ */
.insights {
  padding-block: 4.4rem 4.8rem;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--c-bg);
}
.insights .section-head { margin-bottom: 2.4rem; }
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem; }
.insights .acard .thumb img { aspect-ratio: 16 / 10; }
.insights .acard h3 { font-size: 1.1875rem; margin-top: 0.95rem; }
.insights .acard .tag { margin-top: 0.45rem; }

/* ============================================================
   CONVERSION LAYER | mid-page gate + risk-reduction notes
   ============================================================ */
.cta-note {
  margin-top: 0.6rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--c-ink-faint);
}
.bridge-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 2.4rem var(--gutter);
  background: #121009;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.bridge-q {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: #EDE7D7;
}


/* ============================================================
   LIGHT CHAPTERS | "Oker op Ivoor": warmte en lucht tussen
   de donkere fotografie-hoofdstukken.
   ============================================================ */
.is-light { background: #F3EDE0; color: #26221A; }
.is-light .k-label { color: #7E652A; }
.is-light .s-title { color: #221E16; }
.is-light .s-sub { color: #6B6455; }
.is-light .k-link { color: #7E652A; }
.is-light .k-link:hover { color: #6F5A25; }

.focus.is-light .focus-texture { display: none; }
.is-light .focus-card {
  background: #FBF6EA;
  border: 1px solid rgba(34, 30, 22, 0.09);
  box-shadow: 0 1px 0 rgba(34, 30, 22, 0.04);
}
.is-light .focus-card:hover { border-color: rgba(143, 116, 48, 0.45); background: #FDF9EF; }
.is-light .focus-card h3 { color: #26221A; }
.is-light .focus-card p { color: #5F594A; }

.is-light .principle .num { color: #7E652A; }
.is-light .principle h3 { color: #26221A; }
.is-light .principle p { color: #6B6455; }

.insights.is-light { border-top: 1px solid rgba(34, 30, 22, 0.1); border-bottom: 1px solid rgba(34, 30, 22, 0.1); }
.is-light .acard h3 { color: #26221A; }
.is-light .acard .tag { color: #7E652A; }
.is-light .acard .thumb { background: #E4DCC8; }


/* ============================================================
   ABOUT | de mens achter de methode
   ============================================================ */
.about {
  background: var(--c-bg-deep);
  padding-block: 4.6rem 5rem;
  position: relative;
  overflow: hidden;
}
.about::after {
  content: ""; position: absolute; right: -3rem; top: -4rem;
  width: 18rem; height: 14rem;
  background: url("../assets/img/slime-wall.jpg") no-repeat center / cover;
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 70% at 70% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}
.about-grid {
  display: grid;
  grid-template-columns: 19rem 1fr;
  column-gap: 3.4rem;
  align-items: center;
  position: relative; z-index: 1;
}
.about-media img {
  width: 100%; height: auto;
  border-radius: 2px;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.about-content .section-head { margin-bottom: 1.6rem; }
.about-body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #B9B3A5;
  max-width: 30rem;
}
.about-body + .about-body { margin-top: 0.9rem; }
.about-body strong { color: #E6E0D0; font-weight: 600; }
.about-content .k-link { margin-top: 1.4rem; }


/* ============================================================
   BEDRIJVEN | de twee praktijken onder de personal brand
   ============================================================ */
.ventures { padding-block: 4.4rem 4.8rem; }
.ventures-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.venture {
  display: block;
  padding: 2rem 1.9rem 1.8rem;
  background: #FBF6EA;
  border: 1px solid rgba(34, 30, 22, 0.09);
  transition: border-color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
.venture:hover { border-color: rgba(143, 116, 48, 0.45); background: #FDF9EF; }
.venture h3 {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 1.375rem;
  color: #26221A;
}
.venture p {
  margin-top: 0.6rem;
  font-size: 0.78125rem;
  line-height: 1.6;
  color: #5F594A;
  max-width: 20rem;
}
.venture .k-link { margin-top: 1.1rem; color: #7E652A; }
.venture:hover .arr { transform: translateX(0.25rem); }

.inline-link {
  color: inherit;
  font-weight: 600;
  border-bottom: 1px solid var(--line-gold-soft);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.inline-link:hover { color: var(--c-gold); border-color: var(--c-gold); }


/* ============================================================
   THEORETISCH OF PRAKTISCH | de scherpste scheidslijn
   ============================================================ */
.fork {
  background: var(--c-bg-deep);
  padding-block: 4.4rem 4.8rem;
}
.fork-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.fork-col { padding: 1.9rem 2.2rem 2rem; }
.fork-them {
  border-left: 1px solid var(--line-soft);
  opacity: 0.55;
}
.fork-me {
  border-left: 1px solid var(--c-gold);
  background: rgba(198, 154, 53, 0.045);
}
.fork-tag {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-gold-soft);
  margin-bottom: 0.8rem;
}
.fork-me .fork-tag { color: var(--c-gold); }
.fork-body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--c-ink-dim);
  max-width: 24rem;
}
.fork-me .fork-body { color: #DFD9CA; }


/* ── MOBIELE TIKDOELEN (grill 2026-08-20) ────────────────────────────────────────
   Gemeten op 375 breed: losstaande tekstlinks kwamen op 16 tot 20px hoog, onder de
   24px die WCAG 2.2 AA (2.5.8) voor een tikdoel vraagt. Verticale padding op een
   INLINE element vergroot wel het klikvlak maar niet de regelhoogte, dus dit
   verschuift de opmaak niet. Inline links midden in een lopende zin vallen onder de
   uitzondering van 2.5.8 en blijven daarom ongemoeid. */
.site-footer nav a,
.site-footer .built-by,
.hero-actions .k-link,
a.k-link {
  padding-block: 6px;
}
/* Kaart zonder href is geen link: geen handje, geen hover-belofte. */
.acard.is-komt { cursor: default; }

.site-header .brand { padding-block: 4px; }