/* =================================================================
   alfredf4u.online — style.css
   Brand: cinematic dark, golden yellow accent, serif+sans pair.
   Tokens are CSS custom properties so future tweaks are one-line.
   ================================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:           #0a0a0f;
  --bg-elev:      #11111a;
  --bg-card:      #0f0f17;
  --line:         rgba(255,255,255,0.08);
  --line-strong:  rgba(255,255,255,0.16);
  --text:         #e8e8e8;
  --text-dim:     #a8a8b3;
  --text-mute:    #6f6f7a;
  --accent:       #facc15;        /* golden yellow (alfredf4u house-style) */
  --accent-hot:   #ffd84d;        /* lighter yellow for hovers/highlights */
  --accent-ink:   #0a0a0f;        /* text color on accent backgrounds (black for contrast on yellow) */
  --radius:       0px;           /* architectural, sharp */
  --radius-soft:  4px;           /* used sparingly on inputs */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw:         1180px;
  --pad-x:        24px;
  --gap:          24px;

  --t-fast:       140ms;
  --t-med:        240ms;
  --ease:         cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
ul{ padding:0; margin:0; list-style:none; }

/* ---------- Layout helpers ---------- */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad-x);
  max-width:var(--maxw);
  margin:0 auto;
  background:linear-gradient(to bottom, rgba(10,10,15,0.92), rgba(10,10,15,0.65) 80%, rgba(10,10,15,0));
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
}
.brand{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:20px;
  letter-spacing:-0.01em;
}
.brand-mark{ color:var(--text); }
.brand-mark.accent{ color:var(--accent); font-style:italic; }
.brand-dot{
  width:6px; height:6px; background:var(--accent); display:inline-block;
  margin-left:4px;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%   { opacity:0.4; transform:scale(0.7); }
}

.nav-links{
  display:flex; gap:24px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:lowercase;
}
.nav-links a{
  color:var(--text-dim);
  position:relative;
  padding:4px 2px;
  transition:color var(--t-fast) var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-med) var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* ---------- HERO ---------- */
.hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:80px var(--pad-x) 64px;
  position:relative;
}
.hero::before{
  /* subtle accent glow upper-left */
  content:"";
  position:absolute;
  top:-120px; left:-160px;
  width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(255,94,43,0.12), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.hero-bg{
  /* apeldoorn-supermoon-hero achtergrond + dim-overlay voor leesbaarheid */
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(180deg, rgba(10,10,15,0.85) 0%, rgba(10,10,15,0.55) 60%, rgba(10,10,15,0.85) 100%),
    url('assets/apeldoorn-supermoon-hero.jpg');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  pointer-events:none;
}
.hero > *:not(.hero-bg){
  position:relative;
  z-index:2;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin:0 0 28px;
}
.eyebrow .dot{
  width:8px; height:8px; background:var(--accent);
  display:inline-block;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(38px, 6.5vw, 80px);
  line-height:1.05;
  letter-spacing:-0.025em;
  margin:0 0 24px;
  max-width:18ch;
}
.hero-title em{
  font-style:italic;
  color:var(--accent);
  font-weight:400;
}
.hero-sub{
  max-width:58ch;
  font-size:clamp(16px, 1.6vw, 19px);
  color:var(--text-dim);
  margin:0 0 36px;
}
.hero-cta{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-bottom:24px;
}
.hero-foot{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--text-mute);
  margin:0;
}
.hero-foot .mono{ color:var(--accent); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.01em;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:transform var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
  text-decoration:none;
  user-select:none;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent);
  color:var(--accent-ink);
}
.btn-primary:hover{
  background:var(--accent-hot);
  transform:translateY(-1px);
}
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line-strong);
}
.btn-ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* ---------- Section heads ---------- */
.section-head{
  max-width:720px;
  margin:0 auto 56px;
  padding:0 var(--pad-x);
  text-align:left;
}
.section-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
}
.section-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.12;
  letter-spacing:-0.02em;
  margin:0 0 16px;
}
.section-lede{
  font-size:17px;
  color:var(--text-dim);
  margin:0;
  max-width:60ch;
}

/* ---------- SECTIE 1 — HERKENNING (pain grid) ---------- */
.pain{
  max-width:var(--maxw);
  margin:0 auto;
  padding:96px var(--pad-x);
  border-top:1px solid var(--line);
}
.pain-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.pain-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  display:flex; flex-direction:column;
  transition:transform var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease),
             background var(--t-med) var(--ease);
}
.pain-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,94,43,0.30);
  background:#12121b;
}
.pain-icon{
  font-size:28px;
  line-height:1;
  margin-bottom:18px;
  filter:saturate(1.1);
}
.pain-card h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:26px;
  line-height:1.2;
  margin:0 0 16px;
  letter-spacing:-0.015em;
}
.pain-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:18px;
  line-height:1.4;
  color:var(--text);
  margin:0 0 22px;
  padding:16px 18px;
  border-left:2px solid var(--accent);
  background:rgba(255,94,43,0.04);
}
.pain-fix{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.pain-fix-tag{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.pain-fix p{
  font-size:15px;
  line-height:1.55;
  color:var(--text-dim);
  margin:0;
}

/* ---------- SECTIE 2 — VOOR WIE ---------- */
.voor{
  max-width:var(--maxw);
  margin:0 auto;
  padding:96px var(--pad-x);
  border-top:1px solid var(--line);
}
.voor-body{
  max-width:760px;
  margin:0 auto;
  padding:0 var(--pad-x);
}
.voor-body p{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(20px, 2.4vw, 28px);
  line-height:1.45;
  letter-spacing:-0.01em;
  color:var(--text);
  margin:0;
}
.voor-body p::first-letter{
  font-family:var(--font-display);
  font-size:3.4em;
  float:left;
  line-height:0.9;
  padding:6px 14px 0 0;
  color:var(--accent);
  font-weight:500;
}

/* ---------- SECTIE 3 — AANBOD (cards) ---------- */
.aanbod{
  max-width:var(--maxw);
  margin:0 auto;
  padding:96px var(--pad-x);
  border-top:1px solid var(--line);
}
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  display:flex; flex-direction:column;
  transition:transform var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease),
             background var(--t-med) var(--ease);
  position:relative;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  background:#12121b;
}
.card-featured{
  border-color:rgba(255,94,43,0.40);
  background:linear-gradient(180deg, #14141d 0%, #100f17 100%);
}
.card-featured::before{
  /* small "populair" tag */
  content:"populair";
  position:absolute;
  top:-1px; right:20px;
  transform:translateY(-50%);
  background:var(--accent);
  color:var(--accent-ink);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:5px 10px;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.card-num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.10em;
  color:var(--text-mute);
}
.card-duration{
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--text-dim);
  padding:4px 8px;
  border:1px solid var(--line);
}
.card h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:26px;
  line-height:1.2;
  margin:0 0 12px;
  letter-spacing:-0.015em;
}
.card-price{
  font-family:var(--font-display);
  font-weight:500;
  font-size:48px;
  letter-spacing:-0.02em;
  margin:0 0 18px;
  color:var(--text);
}
.card-price .mono{
  color:var(--accent);
  font-size:26px;
  margin-right:4px;
}
.card-desc{
  font-size:15px;
  line-height:1.6;
  color:var(--text-dim);
  margin:0 0 24px;
}
.card-foot{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:lowercase;
  color:var(--text-mute);
}

/* ---------- SECTIE 4 — WAAROM IK (over) ---------- */
.over{
  max-width:var(--maxw);
  margin:0 auto;
  padding:96px var(--pad-x);
  border-top:1px solid var(--line);
}
.over-grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "portrait"
    "text";
  gap:32px;
}
.over-text{ grid-area:text; }
.over-figure{ grid-area:portrait; }
.over-lede{
  font-size:17px;
  line-height:1.7;
  color:var(--text-dim);
  margin:0 0 18px;
  max-width:60ch;
}
.over-text p:first-of-type::first-letter{
  font-family:var(--font-display);
  font-size:3.4em;
  float:left;
  line-height:0.9;
  padding:6px 14px 0 0;
  color:var(--accent);
  font-weight:500;
}
.over-figure{
  margin:0;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.over-figure img{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:2px;
  object-fit:cover;
  aspect-ratio:3/4;
}
.over-figure figcaption{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--text-mute);
  text-transform:lowercase;
  margin:0;
}
/* ---------- Skills tags (compact CV) ---------- */
.skills-label{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:24px 0 14px;
}
.skills-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.skill-tag{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:8px 14px;
  white-space:nowrap;
  transition:border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.skill-tag:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(255,94,43,0.06);
}

/* ---------- SECTIE 5 — CONTACT ---------- */
.contact{
  max-width:1080px;
  margin:0 auto;
  padding:96px var(--pad-x);
  border-top:1px solid var(--line);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.contact-form{
  display:flex; flex-direction:column; gap:20px;
  background:var(--bg-card);
  border:1px solid var(--line);
  padding:32px;
  border-radius:var(--radius);
}
.field{
  display:flex; flex-direction:column; gap:8px;
}
.field-row{
  display:grid; grid-template-columns:1fr; gap:20px;
}
.field label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.opt{
  text-transform:lowercase;
  color:var(--text-mute);
  margin-left:6px;
  letter-spacing:0.04em;
}
.field input,
.field select,
.field textarea{
  background:#0a0a14;
  border:1px solid var(--line);
  border-radius:var(--radius-soft);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  padding:12px 14px;
  width:100%;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea{
  resize:vertical;
  min-height:120px;
  font-family:var(--font-body);
  line-height:1.55;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:#0c0c18;
}
.field input::placeholder,
.field textarea::placeholder{
  color:var(--text-mute);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
}
.form-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px;
  padding-top:8px;
}
.form-note{
  font-size:11px;
  color:var(--text-mute);
  letter-spacing:0.06em;
  margin:0;
}

/* contact-aside (direct contact) */
.contact-aside{
  background:transparent;
  border:1px solid var(--line);
  padding:28px;
  border-radius:var(--radius);
  display:flex; flex-direction:column;
  gap:18px;
}
.aside-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:20px;
  letter-spacing:-0.01em;
  margin:0 0 4px;
  color:var(--text);
}
.aside-list{
  display:flex; flex-direction:column;
  gap:14px;
  font-size:15px;
}
.aside-list li{
  display:flex; flex-direction:column;
  gap:2px;
}
.aside-label{
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.aside-list a{
  color:var(--text);
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
  align-self:flex-start;
}
.aside-list a:hover{
  color:var(--accent);
  border-color:var(--accent);
}
.aside-foot{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:11px;
  color:var(--text-mute);
  letter-spacing:0.06em;
}

/* ---------- FOOTER ---------- */
.footer{
  margin-top:40px;
  border-top:1px solid var(--line);
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:32px var(--pad-x);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
}
.footer-brand{
  font-family:var(--font-display);
  font-size:16px;
  margin:0;
}
.footer-brand .mono{
  color:var(--text-mute);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  margin-left:2px;
}
.footer-meta{
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--text-mute);
  margin:0;
}
.footer-meta a{
  color:var(--accent);
  transition:color var(--t-fast) var(--ease);
}
.footer-meta a:hover{ color:var(--accent-hot); }

/* ---------- TABLET / DESKTOP ---------- */
@media (min-width: 768px){
  :root{
    --pad-x: 40px;
  }

  .hero{
    padding:120px var(--pad-x) 96px;
  }

  .section-head{
    margin-bottom:72px;
  }

  .pain-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .pain-card{ padding:36px 30px; }

  .cards{
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .card{ padding:32px 28px; }

  .over-grid{
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "text portrait";
    gap:48px;
  }

  .contact-grid{
    grid-template-columns: 1.6fr 1fr;
    gap:32px;
    align-items:start;
  }

  .field-row{
    grid-template-columns:1fr 1fr;
  }

  .contact-form{
    padding:40px;
  }
}

@media (min-width: 1024px){
  :root{ --pad-x: 56px; }
  .hero{ padding:140px var(--pad-x) 112px; }
  .hero::before{
    top:-160px; left:-200px;
    width:680px; height:680px;
  }
}

/* ---------- Over-ons pagina ---------- */
.page-hero{
  position:relative;
  padding:calc(72px + var(--gap)*2) 0 calc(var(--gap)*3);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #0a0a0f 0%, #11111a 100%);
  overflow:hidden;
}
.page-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(250,204,21,0.08) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(250,204,21,0.04) 0%, transparent 40%);
  pointer-events:none;
}
.page-hero > *:not(.page-hero-bg){ position:relative; z-index:1; }
.page-hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.4rem, 6vw, 4.5rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 var(--gap);
  max-width:18ch;
}
.page-hero-title em{ color:var(--accent); font-style:italic; }
.page-hero-sub{
  font-family:var(--font-mono);
  font-size:0.95rem;
  color:var(--text-dim);
  letter-spacing:0.04em;
  margin:0;
}

.company-info{ padding:var(--gap)*3 0; border-bottom:1px solid var(--line); }
.info-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:var(--gap)*1.5 0 var(--gap);
  border-top:1px solid var(--line);
}
.info-row{
  display:grid;
  grid-template-columns:minmax(160px, 200px) 1fr;
  gap:var(--gap);
  padding:var(--gap) 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.info-row dt{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-mute);
  font-weight:500;
  margin:0;
  padding-top:2px;
}
.info-row dd{
  margin:0;
  font-size:1rem;
  color:var(--text);
  line-height:1.5;
}
.info-row dd .muted{ color:var(--text-mute); font-size:0.9rem; }
.info-row dd a{ color:var(--accent); }
.info-row dd a:hover{ text-decoration:underline; }
.kvk-verify{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--text-mute);
  margin-top:var(--gap);
}
.kvk-verify a{ color:var(--accent); }
.kvk-verify a:hover{ text-decoration:underline; }

.story{ padding:var(--gap)*3 0; border-bottom:1px solid var(--line); }
.story-lede{ max-width:65ch; margin:var(--gap) 0 0; }
.story-text{
  font-size:1.15rem;
  line-height:1.7;
  color:var(--text);
  margin:0 0 var(--gap);
}
.story-text:first-of-type::first-letter{
  font-family:var(--font-display);
  font-size:4em;
  float:left;
  line-height:0.85;
  margin:0.05em 0.12em 0 0;
  color:var(--accent);
  font-weight:600;
}

.experience{ padding:var(--gap)*3 0; border-bottom:1px solid var(--line); }
.experience-list{
  list-style:none; margin:var(--gap)*1.5 0 0; padding:0;
  display:grid; gap:0;
}
.exp-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:var(--gap);
  padding:var(--gap) 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.exp-year{
  font-size:0.95rem;
  color:var(--accent);
  font-weight:500;
  letter-spacing:0.04em;
}
.exp-body h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:500;
  margin:0 0 0.4em;
  letter-spacing:-0.01em;
}
.exp-body p{
  margin:0;
  color:var(--text-dim);
  line-height:1.55;
}
.experience-note{
  margin-top:var(--gap)*1.5;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--text-mute);
}
.experience-note a{ color:var(--accent); }
.experience-note a:hover{ text-decoration:underline; }

.not-do{ padding:var(--gap)*3 0; border-bottom:1px solid var(--line); }
.not-do-list{
  list-style:none; margin:var(--gap)*1.5 0 0; padding:0;
  border-top:1px solid var(--line);
}
.not-do-list li{
  padding:var(--gap) 0;
  border-bottom:1px solid var(--line);
  color:var(--text-dim);
  line-height:1.55;
  position:relative;
  padding-left:1.5em;
}
.not-do-list li::before{
  content:"×";
  position:absolute;
  left:0;
  top:1.1em;
  color:var(--accent);
  font-weight:600;
  font-family:var(--font-mono);
}

.links{ padding:var(--gap)*3 0 var(--gap)*2; }
.links-list{
  list-style:none; margin:var(--gap) 0 0; padding:0;
  border-top:1px solid var(--line);
}
.links-list li{
  padding:var(--gap) 0;
  border-bottom:1px solid var(--line);
}
.links-list a{
  font-size:1.1rem;
  color:var(--text);
}
.links-list a:hover{ color:var(--accent); }

/* Reduce-motion & print krijgen de nieuwe classes ook */
@media (prefers-reduced-motion: reduce){
  .page-hero-title, .story-text{ animation:none; transition:none; }
}

/* ---------- Aanbods-CTA (knop onder elk pakket-card) ---------- */
.card-cta{
  display:inline-block;
  margin-top:var(--gap);
  padding:0.85em 1.4em;
  border:1px solid var(--accent);
  color:var(--accent);
  font-family:var(--font-body);
  font-weight:500;
  font-size:0.95rem;
  letter-spacing:0.02em;
  text-decoration:none;
  transition:background-color 0.15s ease, color 0.15s ease;
}
.card-cta:hover,
.card-cta:focus{
  background-color:var(--accent);
  color:var(--accent-ink);
}
.card-featured .card-cta{
  background-color:var(--accent);
  color:var(--accent-ink);
}
.card-featured .card-cta:hover,
.card-featured .card-cta:focus{
  background-color:transparent;
  color:var(--accent);
}

/* ---------- Footer links (over / privacy / voorwaarden) ---------- */
.footer-links{
  margin-top:var(--gap);
  font-size:0.85rem;
}
.footer-links a{
  color:var(--text-dim);
  text-decoration:none;
  margin:0 0.25em;
}
.footer-links a:hover{ color:var(--accent); }

/* ---------- Form-spree status / honeypot ---------- */
.contact-form[action*="formspree"] .form-note{
  color:var(--text-dim);
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  html{ scroll-behavior:auto; }
}

/* ---------- Print ---------- */
@media print{
  body{ background:#fff; color:#000; }
  .nav, .footer, .hero-cta, .contact-form, .footer-meta a[href^="http"]{ display:none; }
  .hero-title em, .section-tag, .pain-fix-tag, .skill-tag, .aside-label, .pain-quote, .over-text p:first-of-type::first-letter{ color:#c43d00; }
  .pain, .voor, .aanbod, .over, .contact{ border-color:#ccc; padding:24px 0; }
  .pain-card, .card, .contact-aside{ break-inside:avoid; border-color:#ccc; }
}