{"id":14,"date":"2026-07-08T18:39:59","date_gmt":"2026-07-08T18:39:59","guid":{"rendered":"https:\/\/yokie.be\/?page_id=14"},"modified":"2026-07-09T17:08:16","modified_gmt":"2026-07-09T17:08:16","slug":"home","status":"publish","type":"page","link":"https:\/\/yokie.be\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n:root{\n    --bg: #FAF6ED;\n    --surface: #F1EAD8;\n    --surface-2: #E8DFC7;\n    --text: #241D14;\n    --muted: #756C5C;\n    --amber: #D9A122;\n    --teal: #A2381C; \/* rust\/terracotta, from logo *\/\n    --green: #2F6E45; \/* from logo *\/\n    --line: rgba(36,29,20,0.12);\n    --radius: 2px;\n  }\n\n  *{ margin:0; padding:0; box-sizing:border-box; }\n\n  html{ scroll-behavior:smooth; }\n\n  body{\n    background:var(--bg);\n    color:var(--text);\n    font-family:'Space Grotesk', sans-serif;\n    line-height:1.5;\n    overflow-x:hidden;\n  }\n\n  h1,h2,h3, .display{\n    font-family:'Fraunces', serif;\n    font-weight:500;\n    letter-spacing:-0.01em;\n  }\n\n  a{ color:inherit; text-decoration:none; }\n\n  img, svg{ display:block; max-width:100%; }\n\n  .wrap{\n    max-width:1180px;\n    margin:0 auto;\n    padding:0 32px;\n  }\n\n  @media (max-width:640px){\n    .wrap{ padding:0 20px; }\n  }\n\n  \/* ---------- utility: aperture mark ---------- *\/\n  .aperture{\n    width:1em; height:1em;\n    display:inline-block;\n    vertical-align:-0.12em;\n  }\n\n  \/* ---------- header ---------- *\/\n  header{\n    position:fixed; top:0; left:0; right:0;\n    z-index:100;\n    background:rgba(250,246,237,0.82);\n    backdrop-filter:blur(10px);\n    border-bottom:1px solid var(--line);\n  }\n  .nav{\n    display:flex; align-items:center; justify-content:space-between;\n    padding:20px 32px;\n    max-width:1180px; margin:0 auto;\n  }\n  .logo{\n    font-family:'Fraunces', serif;\n    font-size:1.35rem;\n    font-weight:600;\n    display:flex; align-items:center; gap:10px;\n  }\n  .logo .aperture{ width:22px; height:22px; }\n  .navlinks{\n    display:flex; gap:36px;\n    font-size:0.95rem;\n    color:var(--muted);\n  }\n  .navlinks a{ transition:color .2s ease; }\n  .navlinks a:hover, .navlinks a:focus-visible{ color:var(--text); }\n  .nav-cta{\n    font-size:0.9rem;\n    padding:10px 20px;\n    border:1px solid var(--amber);\n    color:var(--amber);\n    border-radius:var(--radius);\n    transition:background .2s ease, color .2s ease;\n  }\n  .nav-cta:hover, .nav-cta:focus-visible{ background:var(--amber); color:#14151A; }\n\n  .navlinks, .nav-cta{ display:flex; }\n  .menu-btn{\n    display:none;\n    background:none;\n    border:none;\n    color:var(--text);\n    font-size:1.4rem;\n    line-height:1;\n    padding:6px;\n    cursor:pointer;\n  }\n\n  @media (max-width: 820px){\n    .navlinks{\n      display:none;\n      position:fixed;\n      top:64px; left:0; right:0;\n      flex-direction:column;\n      gap:0;\n      background:var(--bg);\n      border-bottom:1px solid var(--line);\n      box-shadow:0 12px 24px -8px rgba(36,29,20,0.15);\n      padding:8px 0;\n      z-index:99;\n    }\n    .navlinks a{\n      padding:14px 32px;\n      border-bottom:1px solid var(--line);\n    }\n    .nav-cta{ display:none; }\n    .menu-btn{ display:block; }\n    header.nav-open .navlinks{ display:flex; }\n  }\n\n  \/* ---------- hero ---------- *\/\n  .hero{\n    position:relative;\n    min-height:100vh;\n    display:flex;\n    align-items:center;\n    padding-top:120px;\n    overflow:hidden;\n  }\n  .hero-veil{\n    position:absolute; inset:0;\n    z-index:0;\n    pointer-events:none;\n    background-image:\n      radial-gradient(circle 3px at 20px 24px, var(--amber) 99%, transparent 100%),\n      radial-gradient(circle 3px at 62px 64px, var(--teal) 99%, transparent 100%),\n      radial-gradient(circle 3px at 96px 18px, var(--green) 99%, transparent 100%),\n      radial-gradient(circle 2.5px at 44px 92px, var(--amber) 99%, transparent 100%);\n    background-size:120px 120px;\n    -webkit-mask-image: radial-gradient(circle 160px at var(--mx,-200px) var(--my,-200px), black 0%, black 55%, transparent 100%);\n    mask-image: radial-gradient(circle 160px at var(--mx,-200px) var(--my,-200px), black 0%, black 55%, transparent 100%);\n    transition: -webkit-mask-image .05s linear;\n  }\n  .hero-hint{\n    position:absolute;\n    bottom:28px; left:32px;\n    z-index:0;\n    font-size:0.78rem;\n    color:var(--muted);\n    letter-spacing:0.08em;\n    text-transform:uppercase;\n    opacity:0.7;\n    display:flex; align-items:center; gap:8px;\n  }\n  .hero-hint .aperture{ width:13px; height:13px; }\n  @media (max-width:820px){ .hero-hint{ display:none; } }\n  .hero-grid{\n    position:relative;\n    z-index:2;\n    display:flex;\n    justify-content:center;\n    width:100%;\n  }\n  .hero-grid > div{\n    max-width:640px;\n  }\n  .eyebrow{\n    display:flex; align-items:center; gap:10px;\n    color:var(--green);\n    font-size:0.85rem;\n    letter-spacing:0.12em;\n    text-transform:uppercase;\n    margin-bottom:24px;\n  }\n  .eyebrow .aperture{ width:16px; height:16px; }\n  h1.hero-title{\n    font-size:clamp(2.6rem, 6vw, 4.6rem);\n    line-height:1.03;\n    max-width:14ch;\n  }\n  .hero-title-solo{\n    font-size:clamp(2.2rem, 8vw, 6.4rem) !important;\n    max-width:none;\n    text-align:center;\n  }\n  .hero-content-solo{\n    max-width:none;\n    width:100%;\n  }\n  .hero-link{\n    display:block;\n    text-decoration:none;\n    color:inherit;\n    transition:opacity .3s ease, transform .3s ease;\n  }\n  .hero-link:hover, .hero-link:focus-visible{\n    opacity:0.82;\n    transform:translateY(-2px);\n  }\n  h1.hero-title em{\n    font-style:italic;\n    color:var(--amber);\n  }\n  .rotator{\n    display:inline-block;\n    color:var(--teal);\n    transition:opacity .3s ease, filter .3s ease;\n  }\n  .hero-sub{\n    margin-top:28px;\n    color:var(--muted);\n    font-size:1.1rem;\n    max-width:46ch;\n  }\n  .hero-actions{\n    margin-top:40px;\n    display:flex; gap:16px; flex-wrap:wrap;\n  }\n  .btn{\n    padding:14px 28px;\n    border-radius:var(--radius);\n    font-size:0.95rem;\n    font-weight:600;\n    transition:transform .2s ease, background .2s ease, color .2s ease;\n    display:inline-block;\n  }\n  .btn-primary{ background:var(--amber); color:#14151A; }\n  .btn-primary:hover, .btn-primary:focus-visible{ transform:translateY(-2px); }\n  .btn-ghost{ border:1px solid var(--line); color:var(--text); }\n  .btn-ghost:hover, .btn-ghost:focus-visible{ border-color:var(--teal); color:var(--teal); }\n\n  \/* ---------- aperture visual (signature element) ---------- *\/\n  .aperture-stage{\n    position:relative;\n    aspect-ratio:1\/1;\n    max-width:420px;\n    margin:0 auto;\n    display:flex; align-items:center; justify-content:center;\n  }\n  .logo-glow{\n    position:absolute; inset:6%;\n    border-radius:50%;\n    background:\n      radial-gradient(circle at 32% 28%, rgba(217,161,34,0.35), transparent 55%),\n      radial-gradient(circle at 72% 34%, rgba(47,110,69,0.28), transparent 55%),\n      radial-gradient(circle at 50% 78%, rgba(162,56,28,0.25), transparent 55%);\n    filter:blur(6px);\n    opacity:0;\n    transition:opacity 1.2s ease;\n  }\n  .aperture-stage.open .logo-glow{ opacity:1; }\n  .ring-svg{\n    position:absolute; inset:0; width:100%; height:100%;\n  }\n  .ring{\n    stroke:var(--line);\n    stroke-dasharray:1182;\n    stroke-dashoffset:1182;\n    transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);\n  }\n  .aperture-stage.open .ring{ stroke-dashoffset:0; }\n  .hero-logo{\n    position:relative;\n    width:72%;\n    height:auto;\n    opacity:0;\n    transform:translateY(14px) scale(0.96);\n    transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1);\n  }\n  .aperture-stage.open .hero-logo{\n    opacity:1; transform:translateY(0) scale(1);\n  }\n\n  \/* ---------- section shell ---------- *\/\n  section{ padding:120px 0; position:relative; }\n  .section-head{\n    display:flex; align-items:baseline; gap:14px;\n    margin-bottom:56px;\n  }\n  .section-head .aperture{ width:20px; height:20px; color:var(--amber); }\n  .section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); }\n  .services-title{ font-size:clamp(2.4rem, 5vw, 3.8rem) !important; }\n  .section-kicker{\n    color:var(--teal);\n    font-size:0.82rem;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    margin-bottom:14px;\n    display:block;\n  }\n\n  \/* ---------- diensten (services) ---------- *\/\n  .services{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }\n  .service-grid{\n    display:grid;\n    grid-template-columns:repeat(3, 1fr);\n    gap:1px;\n    background:var(--line);\n    border:1px solid var(--line);\n  }\n  @media (max-width:900px){\n    .service-grid{ grid-template-columns:repeat(2,1fr); }\n  }\n  @media (max-width:560px){\n    .service-grid{ grid-template-columns:1fr; }\n  }\n  .service-card{\n    position:relative;\n    background:var(--surface);\n    padding:36px 28px;\n    cursor:pointer;\n    transition:background .25s ease;\n  }\n  .service-card:hover, .service-card.active{ background:var(--surface-2); }\n  .service-hint{\n    position:absolute;\n    top:36px; right:28px;\n    font-size:0.68rem;\n    letter-spacing:0.06em;\n    text-transform:uppercase;\n    color:var(--muted);\n    opacity:0.55;\n    transition:opacity .3s ease;\n  }\n  .service-card.active .service-hint{ opacity:0; }\n  .service-blade{\n    width:34px; height:34px;\n    margin-bottom:22px;\n    color:var(--amber);\n  }\n  .service-card h3{\n    font-size:1.2rem;\n    font-weight:500;\n    margin-bottom:12px;\n  }\n  .service-card p{\n    color:var(--muted);\n    font-size:0.94rem;\n    max-height:0;\n    opacity:0;\n    overflow:hidden;\n    transition:max-height .35s ease, opacity .35s ease, margin-top .35s ease;\n  }\n  .service-card.active p{\n    max-height:200px; opacity:1; margin-top:0;\n  }\n  .service-index{\n    font-family:'Fraunces', serif;\n    font-size:0.85rem;\n    color:var(--muted);\n    margin-bottom:18px;\n    display:block;\n  }\n\n  \/* ---------- werkwijze ---------- *\/\n  .footpath{\n    display:flex;\n    justify-content:center;\n    margin:8px 0 56px;\n    padding:32px 24px;\n    border:1px solid var(--line);\n    border-radius:6px;\n    background:var(--surface);\n  }\n  .footpath-steps{\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:28px;\n    max-width:440px;\n    width:100%;\n  }\n  .footstep{\n    display:flex;\n    align-items:flex-start;\n    gap:16px;\n    width:100%;\n    text-align:left;\n  }\n  .footprint-wrap{\n    position:relative;\n    display:inline-flex;\n    flex-shrink:0;\n  }\n  .footstep-number{\n    position:absolute;\n    top:-4px; right:-4px;\n    width:18px; height:18px;\n    background:var(--text);\n    color:var(--bg);\n    border-radius:50%;\n    font-size:0.65rem;\n    font-weight:700;\n    display:flex; align-items:center; justify-content:center;\n    z-index:2;\n  }\n  .footprint{\n    width:clamp(28px, 5vw, 40px);\n    height:clamp(28px, 5vw, 40px);\n    background:var(--bg);\n    border-radius:50%;\n    padding:7px;\n    border:1px solid var(--line);\n    flex-shrink:0;\n  }\n  .footstep-text{\n    display:flex;\n    flex-direction:column;\n    gap:4px;\n    padding-top:4px;\n  }\n  .route-tag{\n    font-size:0.68rem;\n    letter-spacing:0.1em;\n    text-transform:uppercase;\n    color:var(--muted);\n  }\n  .route-start{ color:var(--amber); font-weight:700; align-self:flex-start; }\n  .route-finish{ color:var(--green); font-weight:700; align-self:flex-start; }\n  .footstep-label{\n    font-size:0.85rem;\n    letter-spacing:0.06em;\n    text-transform:uppercase;\n    color:var(--text);\n    font-weight:600;\n  }\n  .footstep-desc{\n    font-size:0.85rem;\n    color:var(--muted);\n    line-height:1.5;\n    max-width:44ch;\n  }\n\n  .process-list{\n    display:grid;\n    gap:0;\n  }\n  .process-item{\n    display:grid;\n    grid-template-columns: 90px 1fr;\n    gap:28px;\n    padding:32px 0;\n    border-top:1px solid var(--line);\n  }\n  .process-item:last-child{ border-bottom:1px solid var(--line); }\n  .process-item .stage{\n    font-family:'Fraunces', serif;\n    color:var(--green);\n    font-size:1.1rem;\n  }\n  .process-item h3{ font-size:1.15rem; margin-bottom:8px; font-weight:500; }\n  .process-item p{ color:var(--muted); max-width:60ch; }\n  .werkwijze-cta{\n    margin-top:56px;\n    padding-top:40px;\n    border-top:1px dashed var(--line);\n    text-align:center;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:20px;\n  }\n  .werkwijze-cta p{\n    font-family:'Fraunces', serif;\n    font-size:clamp(1.3rem, 2.6vw, 1.7rem);\n    max-width:26ch;\n  }\n\n  \/* ---------- over ons ---------- *\/\n  .about{\n    display:grid;\n    grid-template-columns: 0.9fr 1.1fr;\n    gap:64px;\n    align-items:center;\n  }\n  @media (max-width:860px){\n    .about{ grid-template-columns:1fr; }\n  }\n  .about-visual{\n    aspect-ratio: 4\/5;\n    border:1px solid var(--line);\n    background:\n      radial-gradient(circle at 30% 20%, rgba(62,198,190,0.14), transparent 55%),\n      radial-gradient(circle at 75% 80%, rgba(255,178,56,0.14), transparent 55%),\n      var(--surface);\n    display:flex; align-items:center; justify-content:center;\n  }\n  .about-visual .aperture{ width:38%; height:38%; color:var(--line); filter:blur(2px); transition:color .5s ease, filter .5s ease, transform .5s ease; }\n  .about-visual:hover .aperture{ color:var(--teal); filter:blur(0); transform:rotate(12deg) scale(1.04); }\n  .about p{ color:var(--muted); margin-bottom:20px; max-width:56ch; }\n  .about-stats{\n    display:flex; gap:40px; margin-top:36px;\n  }\n  .stat .n{ font-family:'Fraunces', serif; font-size:2.1rem; color:var(--teal); }\n  .stat .l{ color:var(--muted); font-size:0.85rem; margin-top:4px; }\n\n  \/* ---------- contact ---------- *\/\n  .contact{\n    background:var(--surface);\n    border-top:1px solid var(--line);\n    min-height:100vh;\n    display:flex;\n    align-items:center;\n  }\n  .contact .wrap{ width:100%; }\n  .postcard{\n    position:relative;\n    border:1px solid var(--line);\n    border-radius:4px;\n    padding:56px 48px;\n    background:var(--bg);\n    max-width:900px;\n    margin:0 auto;\n    box-shadow:\n      0 2px 4px rgba(36,29,20,0.06),\n      0 20px 45px -18px rgba(36,29,20,0.35);\n    transform:rotate(-0.7deg);\n  }\n  @media (max-width:640px){\n    .postcard{ padding:40px 24px; transform:none; }\n  }\n  .postcard-heading{\n    font-family:'Caveat', cursive;\n    font-weight:700;\n    font-size:clamp(1.5rem, 2.6vw, 2rem);\n    line-height:1.15;\n    color:var(--muted);\n    transform:rotate(-1.5deg);\n    display:inline-block;\n    margin-bottom:4px;\n  }\n  textarea#bericht{\n    background-image: repeating-linear-gradient(var(--surface-2), var(--surface-2) 27px, var(--line) 28px);\n    line-height:28px;\n    padding-top:10px;\n  }\n  .contact-grid{\n    display:grid;\n    grid-template-columns:1fr;\n    gap:36px;\n  }\n  .contact h2{ font-size:clamp(2rem,4vw,3rem); max-width:12ch; }\n  .contact-lead{ color:var(--muted); margin-top:20px; max-width:46ch; }\n  .contact-details{ margin-top:36px; display:grid; gap:14px; }\n  .envelope-label{\n    display:block;\n    font-size:0.72rem;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:var(--muted);\n    margin-bottom:10px;\n  }\n  .contact-details-bottom{\n    margin-top:40px;\n    padding-top:28px;\n    border-top:1px dashed var(--line);\n    justify-items:center;\n    text-align:center;\n  }\n  .contact-details a{ color:var(--text); border-bottom:1px solid var(--line); padding-bottom:2px; }\n  .contact-details a:hover{ border-color:var(--amber); color:var(--amber); }\n  .typewriter{\n    font-family:'Space Grotesk', monospace;\n    letter-spacing:0.02em;\n    color:var(--text);\n    display:inline-block;\n  }\n  .typewriter-big{\n    font-size:clamp(2rem, 6.5vw, 5rem);\n    font-weight:700;\n    color:var(--teal);\n    margin-bottom:8px;\n  }\n  .typewriter::after{\n    content:'';\n    display:inline-block;\n    width:2px;\n    height:1em;\n    background:var(--teal);\n    margin-left:3px;\n    vertical-align:-0.15em;\n    animation:blink 0.9s steps(1) infinite;\n  }\n  @keyframes blink{\n    0%, 49%{ opacity:1; }\n    50%, 100%{ opacity:0; }\n  }\n  @media (prefers-reduced-motion: reduce){\n    .typewriter::after{ animation:none; opacity:1; }\n  }\n\n  form{ display:grid; gap:18px; }\n  .field{ display:grid; gap:8px; }\n  label{ font-size:0.82rem; color:var(--muted); letter-spacing:0.04em; }\n  input, textarea, select{\n    background:var(--surface-2);\n    border:1px solid var(--line);\n    color:var(--text);\n    padding:14px 16px;\n    border-radius:var(--radius);\n    font-family:inherit;\n    font-size:0.95rem;\n  }\n  input:focus, textarea:focus, select:focus{\n    outline:none; border-color:var(--teal);\n  }\n  textarea{ resize:vertical; min-height:110px; }\n  .submit-btn{\n    justify-self:start;\n    background:var(--amber);\n    color:#14151A;\n    border:none;\n    padding:14px 30px;\n    border-radius:var(--radius);\n    font-weight:600;\n    font-family:inherit;\n    font-size:0.95rem;\n    cursor:pointer;\n    transition:transform .2s ease;\n  }\n  .submit-btn:hover{ transform:translateY(-2px); }\n  .form-note{ font-size:0.8rem; color:var(--muted); }\n  @media (max-width:640px){\n    .submit-btn{ justify-self:stretch; text-align:center; }\n  }\n\n  \/* ---------- envelope ---------- *\/\n  .envelope{\n    position:relative;\n    perspective:1200px;\n    border-width:clamp(4px, 1.2vw, 7px);\n    border-style:solid;\n    border-image:repeating-linear-gradient(-45deg,\n      var(--amber) 0 12px,\n      var(--bg) 12px 16px,\n      var(--teal) 16px 28px,\n      var(--bg) 28px 32px,\n      var(--green) 32px 44px,\n      var(--bg) 44px 48px) 7;\n    border-radius:2px;\n    background:transparent;\n    padding:clamp(36px, 9vw, 56px) clamp(14px, 4vw, 24px) clamp(16px, 4vw, 24px);\n    overflow-x:hidden;\n  }\n  .envelope-flap{\n    position:absolute;\n    top:0; left:0; right:0;\n    height:clamp(70px, 20vw, 140px);\n    clip-path:polygon(0 0, 100% 0, 50% 100%);\n    background:linear-gradient(120deg, var(--amber), var(--teal) 55%, var(--green));\n    border-bottom:1px solid var(--line);\n    transform-origin:top center;\n    transform-style:preserve-3d;\n    transition:transform .8s cubic-bezier(.65,0,.35,1);\n    z-index:3;\n    display:flex; align-items:flex-start; justify-content:center;\n    padding-top:clamp(6px, 1.5vw, 10px);\n    animation:flapSway 3.4s ease-in-out infinite;\n  }\n  @keyframes flapSway{\n    0%, 100%{ transform:rotateX(30deg); }\n    50%{ transform:rotateX(42deg); }\n  }\n  .envelope.sealed .envelope-flap{\n    animation:none;\n    transform:rotateX(0deg);\n  }\n  @media (prefers-reduced-motion: reduce){\n    .envelope-flap{ animation:none; transform:rotateX(36deg); }\n  }\n  .envelope-seal{\n    width:clamp(22px, 5vw, 30px);\n    height:clamp(22px, 5vw, 30px);\n    border-radius:50%;\n    background:var(--bg);\n    display:flex; align-items:center; justify-content:center;\n    opacity:0;\n    transform:scale(0.4);\n    transition:opacity .3s ease .6s, transform .3s cubic-bezier(.34,1.56,.64,1) .6s;\n  }\n  .envelope-seal .aperture{ width:clamp(12px, 3vw, 16px); height:clamp(12px, 3vw, 16px); color:var(--teal); }\n  .envelope.sealed .envelope-seal{\n    opacity:1;\n    transform:scale(1);\n  }\n  .envelope form{\n    position:relative;\n    z-index:1;\n    transition:opacity .5s ease, transform .5s ease;\n  }\n  .envelope.sealed form{\n    opacity:0.25;\n    transform:scale(0.98);\n    pointer-events:none;\n  }\n\n  \/* ---------- footer ---------- *\/\n  footer{\n    padding:40px 0;\n    border-top:1px solid var(--line);\n    display:flex; align-items:center; justify-content:space-between;\n    color:var(--muted);\n    font-size:0.85rem;\n    flex-wrap:wrap;\n    gap:16px;\n  }\n  footer .logo{ font-size:1rem; }\n  footer .logo .aperture{ width:16px; height:16px; }\n  footer a:not(.logo):hover{ color:var(--amber); border-color:var(--amber); }\n\n  \/* reveal on scroll \u2014 comes into focus, like a lens *\/\n  .reveal{\n    opacity:0;\n    filter:blur(9px);\n    transform:translateY(18px);\n    transition:opacity .9s ease, filter 1s ease, transform .9s ease;\n  }\n  .reveal.in{ opacity:1; filter:blur(0); transform:translateY(0); }\n\n  @media (prefers-reduced-motion: reduce){\n    .reveal, .blade{ transition:none !important; }\n    .reveal{ opacity:1; filter:none; transform:none; }\n  }\n\n  :focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }\n<\/style>\n\n<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Yokie | Not your typical agency<\/title>\n<meta name=\"description\" content=\"Yokie: social media, content, fotografie, projectmanagement en IT-consultancy onder \u00e9\u00e9n dak.\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400&#038;family=Space+Grotesk:wght@400;500;600;700&#038;family=Caveat:wght@500;700&#038;display=swap\" rel=\"stylesheet\">\n<style>\n  :root{\n    --bg: #FAF6ED;\n    --surface: #F1EAD8;\n    --surface-2: #E8DFC7;\n    --text: #241D14;\n    --muted: #756C5C;\n    --amber: #D9A122;\n    --teal: #A2381C; \/* rust\/terracotta, from logo *\/\n    --green: #2F6E45; \/* from logo *\/\n    --line: rgba(36,29,20,0.12);\n    --radius: 2px;\n  }\n\n  *{ margin:0; padding:0; box-sizing:border-box; }\n\n  html{ scroll-behavior:smooth; }\n\n  body{\n    background:var(--bg);\n    color:var(--text);\n    font-family:'Space Grotesk', sans-serif;\n    line-height:1.5;\n    overflow-x:hidden;\n  }\n\n  h1,h2,h3, .display{\n    font-family:'Fraunces', serif;\n    font-weight:500;\n    letter-spacing:-0.01em;\n  }\n\n  a{ color:inherit; text-decoration:none; }\n\n  img, svg{ display:block; max-width:100%; }\n\n  .wrap{\n    max-width:1180px;\n    margin:0 auto;\n    padding:0 32px;\n  }\n\n  @media (max-width:640px){\n    .wrap{ padding:0 20px; }\n  }\n\n  \/* ---------- utility: aperture mark ---------- *\/\n  .aperture{\n    width:1em; height:1em;\n    display:inline-block;\n    vertical-align:-0.12em;\n  }\n\n  \/* ---------- header ---------- *\/\n  header{\n    position:fixed; top:0; left:0; right:0;\n    z-index:100;\n    background:rgba(250,246,237,0.82);\n    backdrop-filter:blur(10px);\n    border-bottom:1px solid var(--line);\n  }\n  .nav{\n    display:flex; align-items:center; justify-content:space-between;\n    padding:20px 32px;\n    max-width:1180px; margin:0 auto;\n  }\n  .logo{\n    font-family:'Fraunces', serif;\n    font-size:1.35rem;\n    font-weight:600;\n    display:flex; align-items:center; gap:10px;\n  }\n  .logo .aperture{ width:22px; height:22px; }\n  .navlinks{\n    display:flex; gap:36px;\n    font-size:0.95rem;\n    color:var(--muted);\n  }\n  .navlinks a{ transition:color .2s ease; }\n  .navlinks a:hover, .navlinks a:focus-visible{ color:var(--text); }\n  .nav-cta{\n    font-size:0.9rem;\n    padding:10px 20px;\n    border:1px solid var(--amber);\n    color:var(--amber);\n    border-radius:var(--radius);\n    transition:background .2s ease, color .2s ease;\n  }\n  .nav-cta:hover, .nav-cta:focus-visible{ background:var(--amber); color:#14151A; }\n\n  .navlinks, .nav-cta{ display:flex; }\n  .menu-btn{\n    display:none;\n    background:none;\n    border:none;\n    color:var(--text);\n    font-size:1.4rem;\n    line-height:1;\n    padding:6px;\n    cursor:pointer;\n  }\n\n  @media (max-width: 820px){\n    .navlinks{\n      display:none;\n      position:fixed;\n      top:64px; left:0; right:0;\n      flex-direction:column;\n      gap:0;\n      background:var(--bg);\n      border-bottom:1px solid var(--line);\n      box-shadow:0 12px 24px -8px rgba(36,29,20,0.15);\n      padding:8px 0;\n      z-index:99;\n    }\n    .navlinks a{\n      padding:14px 32px;\n      border-bottom:1px solid var(--line);\n    }\n    .nav-cta{ display:none; }\n    .menu-btn{ display:block; }\n    header.nav-open .navlinks{ display:flex; }\n  }\n\n  \/* ---------- hero ---------- *\/\n  .hero{\n    position:relative;\n    min-height:100vh;\n    display:flex;\n    align-items:center;\n    padding-top:120px;\n    overflow:hidden;\n  }\n  .hero-veil{\n    position:absolute; inset:0;\n    z-index:0;\n    pointer-events:none;\n    background-image:\n      radial-gradient(circle 3px at 20px 24px, var(--amber) 99%, transparent 100%),\n      radial-gradient(circle 3px at 62px 64px, var(--teal) 99%, transparent 100%),\n      radial-gradient(circle 3px at 96px 18px, var(--green) 99%, transparent 100%),\n      radial-gradient(circle 2.5px at 44px 92px, var(--amber) 99%, transparent 100%);\n    background-size:120px 120px;\n    -webkit-mask-image: radial-gradient(circle 160px at var(--mx,-200px) var(--my,-200px), black 0%, black 55%, transparent 100%);\n    mask-image: radial-gradient(circle 160px at var(--mx,-200px) var(--my,-200px), black 0%, black 55%, transparent 100%);\n    transition: -webkit-mask-image .05s linear;\n  }\n  .hero-hint{\n    position:absolute;\n    bottom:28px; left:32px;\n    z-index:0;\n    font-size:0.78rem;\n    color:var(--muted);\n    letter-spacing:0.08em;\n    text-transform:uppercase;\n    opacity:0.7;\n    display:flex; align-items:center; gap:8px;\n  }\n  .hero-hint .aperture{ width:13px; height:13px; }\n  @media (max-width:820px){ .hero-hint{ display:none; } }\n  .hero-grid{\n    position:relative;\n    z-index:2;\n    display:flex;\n    justify-content:center;\n    width:100%;\n  }\n  .hero-grid > div{\n    max-width:640px;\n  }\n  .eyebrow{\n    display:flex; align-items:center; gap:10px;\n    color:var(--green);\n    font-size:0.85rem;\n    letter-spacing:0.12em;\n    text-transform:uppercase;\n    margin-bottom:24px;\n  }\n  .eyebrow .aperture{ width:16px; height:16px; }\n  h1.hero-title{\n    font-size:clamp(2.6rem, 6vw, 4.6rem);\n    line-height:1.03;\n    max-width:14ch;\n  }\n  .hero-title-solo{\n    font-size:clamp(2.2rem, 8vw, 6.4rem) !important;\n    max-width:none;\n    text-align:center;\n  }\n  .hero-content-solo{\n    max-width:none;\n    width:100%;\n  }\n  .hero-link{\n    display:block;\n    text-decoration:none;\n    color:inherit;\n    transition:opacity .3s ease, transform .3s ease;\n  }\n  .hero-link:hover, .hero-link:focus-visible{\n    opacity:0.82;\n    transform:translateY(-2px);\n  }\n  h1.hero-title em{\n    font-style:italic;\n    color:var(--amber);\n  }\n  .rotator{\n    display:inline-block;\n    color:var(--teal);\n    transition:opacity .3s ease, filter .3s ease;\n  }\n  .hero-sub{\n    margin-top:28px;\n    color:var(--muted);\n    font-size:1.1rem;\n    max-width:46ch;\n  }\n  .hero-actions{\n    margin-top:40px;\n    display:flex; gap:16px; flex-wrap:wrap;\n  }\n  .btn{\n    padding:14px 28px;\n    border-radius:var(--radius);\n    font-size:0.95rem;\n    font-weight:600;\n    transition:transform .2s ease, background .2s ease, color .2s ease;\n    display:inline-block;\n  }\n  .btn-primary{ background:var(--amber); color:#14151A; }\n  .btn-primary:hover, .btn-primary:focus-visible{ transform:translateY(-2px); }\n  .btn-ghost{ border:1px solid var(--line); color:var(--text); }\n  .btn-ghost:hover, .btn-ghost:focus-visible{ border-color:var(--teal); color:var(--teal); }\n\n  \/* ---------- aperture visual (signature element) ---------- *\/\n  .aperture-stage{\n    position:relative;\n    aspect-ratio:1\/1;\n    max-width:420px;\n    margin:0 auto;\n    display:flex; align-items:center; justify-content:center;\n  }\n  .logo-glow{\n    position:absolute; inset:6%;\n    border-radius:50%;\n    background:\n      radial-gradient(circle at 32% 28%, rgba(217,161,34,0.35), transparent 55%),\n      radial-gradient(circle at 72% 34%, rgba(47,110,69,0.28), transparent 55%),\n      radial-gradient(circle at 50% 78%, rgba(162,56,28,0.25), transparent 55%);\n    filter:blur(6px);\n    opacity:0;\n    transition:opacity 1.2s ease;\n  }\n  .aperture-stage.open .logo-glow{ opacity:1; }\n  .ring-svg{\n    position:absolute; inset:0; width:100%; height:100%;\n  }\n  .ring{\n    stroke:var(--line);\n    stroke-dasharray:1182;\n    stroke-dashoffset:1182;\n    transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);\n  }\n  .aperture-stage.open .ring{ stroke-dashoffset:0; }\n  .hero-logo{\n    position:relative;\n    width:72%;\n    height:auto;\n    opacity:0;\n    transform:translateY(14px) scale(0.96);\n    transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1);\n  }\n  .aperture-stage.open .hero-logo{\n    opacity:1; transform:translateY(0) scale(1);\n  }\n\n  \/* ---------- section shell ---------- *\/\n  section{ padding:120px 0; position:relative; }\n  .section-head{\n    display:flex; align-items:baseline; gap:14px;\n    margin-bottom:56px;\n  }\n  .section-head .aperture{ width:20px; height:20px; color:var(--amber); }\n  .section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); }\n  .services-title{ font-size:clamp(2.4rem, 5vw, 3.8rem) !important; }\n  .section-kicker{\n    color:var(--teal);\n    font-size:0.82rem;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    margin-bottom:14px;\n    display:block;\n  }\n\n  \/* ---------- diensten (services) ---------- *\/\n  .services{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }\n  .service-grid{\n    display:grid;\n    grid-template-columns:repeat(3, 1fr);\n    gap:1px;\n    background:var(--line);\n    border:1px solid var(--line);\n  }\n  @media (max-width:900px){\n    .service-grid{ grid-template-columns:repeat(2,1fr); }\n  }\n  @media (max-width:560px){\n    .service-grid{ grid-template-columns:1fr; }\n  }\n  .service-card{\n    position:relative;\n    background:var(--surface);\n    padding:36px 28px;\n    cursor:pointer;\n    transition:background .25s ease;\n  }\n  .service-card:hover, .service-card.active{ background:var(--surface-2); }\n  .service-hint{\n    position:absolute;\n    top:36px; right:28px;\n    font-size:0.68rem;\n    letter-spacing:0.06em;\n    text-transform:uppercase;\n    color:var(--muted);\n    opacity:0.55;\n    transition:opacity .3s ease;\n  }\n  .service-card.active .service-hint{ opacity:0; }\n  .service-blade{\n    width:34px; height:34px;\n    margin-bottom:22px;\n    color:var(--amber);\n  }\n  .service-card h3{\n    font-size:1.2rem;\n    font-weight:500;\n    margin-bottom:12px;\n  }\n  .service-card p{\n    color:var(--muted);\n    font-size:0.94rem;\n    max-height:0;\n    opacity:0;\n    overflow:hidden;\n    transition:max-height .35s ease, opacity .35s ease, margin-top .35s ease;\n  }\n  .service-card.active p{\n    max-height:200px; opacity:1; margin-top:0;\n  }\n  .service-index{\n    font-family:'Fraunces', serif;\n    font-size:0.85rem;\n    color:var(--muted);\n    margin-bottom:18px;\n    display:block;\n  }\n\n  \/* ---------- werkwijze ---------- *\/\n  .footpath{\n    display:flex;\n    justify-content:center;\n    margin:8px 0 56px;\n    padding:32px 24px;\n    border:1px solid var(--line);\n    border-radius:6px;\n    background:var(--surface);\n  }\n  .footpath-steps{\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:28px;\n    max-width:440px;\n    width:100%;\n  }\n  .footstep{\n    display:flex;\n    align-items:flex-start;\n    gap:16px;\n    width:100%;\n    text-align:left;\n  }\n  .footprint-wrap{\n    position:relative;\n    display:inline-flex;\n    flex-shrink:0;\n  }\n  .footstep-number{\n    position:absolute;\n    top:-4px; right:-4px;\n    width:18px; height:18px;\n    background:var(--text);\n    color:var(--bg);\n    border-radius:50%;\n    font-size:0.65rem;\n    font-weight:700;\n    display:flex; align-items:center; justify-content:center;\n    z-index:2;\n  }\n  .footprint{\n    width:clamp(28px, 5vw, 40px);\n    height:clamp(28px, 5vw, 40px);\n    background:var(--bg);\n    border-radius:50%;\n    padding:7px;\n    border:1px solid var(--line);\n    flex-shrink:0;\n  }\n  .footstep-text{\n    display:flex;\n    flex-direction:column;\n    gap:4px;\n    padding-top:4px;\n  }\n  .route-tag{\n    font-size:0.68rem;\n    letter-spacing:0.1em;\n    text-transform:uppercase;\n    color:var(--muted);\n  }\n  .route-start{ color:var(--amber); font-weight:700; align-self:flex-start; }\n  .route-finish{ color:var(--green); font-weight:700; align-self:flex-start; }\n  .footstep-label{\n    font-size:0.85rem;\n    letter-spacing:0.06em;\n    text-transform:uppercase;\n    color:var(--text);\n    font-weight:600;\n  }\n  .footstep-desc{\n    font-size:0.85rem;\n    color:var(--muted);\n    line-height:1.5;\n    max-width:44ch;\n  }\n\n  .process-list{\n    display:grid;\n    gap:0;\n  }\n  .process-item{\n    display:grid;\n    grid-template-columns: 90px 1fr;\n    gap:28px;\n    padding:32px 0;\n    border-top:1px solid var(--line);\n  }\n  .process-item:last-child{ border-bottom:1px solid var(--line); }\n  .process-item .stage{\n    font-family:'Fraunces', serif;\n    color:var(--green);\n    font-size:1.1rem;\n  }\n  .process-item h3{ font-size:1.15rem; margin-bottom:8px; font-weight:500; }\n  .process-item p{ color:var(--muted); max-width:60ch; }\n  .werkwijze-cta{\n    margin-top:56px;\n    padding-top:40px;\n    border-top:1px dashed var(--line);\n    text-align:center;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:20px;\n  }\n  .werkwijze-cta p{\n    font-family:'Fraunces', serif;\n    font-size:clamp(1.3rem, 2.6vw, 1.7rem);\n    max-width:26ch;\n  }\n\n  \/* ---------- over ons ---------- *\/\n  .about{\n    display:grid;\n    grid-template-columns: 0.9fr 1.1fr;\n    gap:64px;\n    align-items:center;\n  }\n  @media (max-width:860px){\n    .about{ grid-template-columns:1fr; }\n  }\n  .about-visual{\n    aspect-ratio: 4\/5;\n    border:1px solid var(--line);\n    background:\n      radial-gradient(circle at 30% 20%, rgba(62,198,190,0.14), transparent 55%),\n      radial-gradient(circle at 75% 80%, rgba(255,178,56,0.14), transparent 55%),\n      var(--surface);\n    display:flex; align-items:center; justify-content:center;\n  }\n  .about-visual .aperture{ width:38%; height:38%; color:var(--line); filter:blur(2px); transition:color .5s ease, filter .5s ease, transform .5s ease; }\n  .about-visual:hover .aperture{ color:var(--teal); filter:blur(0); transform:rotate(12deg) scale(1.04); }\n  .about p{ color:var(--muted); margin-bottom:20px; max-width:56ch; }\n  .about-stats{\n    display:flex; gap:40px; margin-top:36px;\n  }\n  .stat .n{ font-family:'Fraunces', serif; font-size:2.1rem; color:var(--teal); }\n  .stat .l{ color:var(--muted); font-size:0.85rem; margin-top:4px; }\n\n  \/* ---------- contact ---------- *\/\n  .contact{\n    background:var(--surface);\n    border-top:1px solid var(--line);\n    min-height:100vh;\n    display:flex;\n    align-items:center;\n  }\n  .contact .wrap{ width:100%; }\n  .postcard{\n    position:relative;\n    border:1px solid var(--line);\n    border-radius:4px;\n    padding:56px 48px;\n    background:var(--bg);\n    max-width:900px;\n    margin:0 auto;\n    box-shadow:\n      0 2px 4px rgba(36,29,20,0.06),\n      0 20px 45px -18px rgba(36,29,20,0.35);\n    transform:rotate(-0.7deg);\n  }\n  @media (max-width:640px){\n    .postcard{ padding:40px 24px; transform:none; }\n  }\n  .postcard-heading{\n    font-family:'Caveat', cursive;\n    font-weight:700;\n    font-size:clamp(1.5rem, 2.6vw, 2rem);\n    line-height:1.15;\n    color:var(--muted);\n    transform:rotate(-1.5deg);\n    display:inline-block;\n    margin-bottom:4px;\n  }\n  textarea#bericht{\n    background-image: repeating-linear-gradient(var(--surface-2), var(--surface-2) 27px, var(--line) 28px);\n    line-height:28px;\n    padding-top:10px;\n  }\n  .contact-grid{\n    display:grid;\n    grid-template-columns:1fr;\n    gap:36px;\n  }\n  .contact h2{ font-size:clamp(2rem,4vw,3rem); max-width:12ch; }\n  .contact-lead{ color:var(--muted); margin-top:20px; max-width:46ch; }\n  .contact-details{ margin-top:36px; display:grid; gap:14px; }\n  .envelope-label{\n    display:block;\n    font-size:0.72rem;\n    letter-spacing:0.14em;\n    text-transform:uppercase;\n    color:var(--muted);\n    margin-bottom:10px;\n  }\n  .contact-details-bottom{\n    margin-top:40px;\n    padding-top:28px;\n    border-top:1px dashed var(--line);\n    justify-items:center;\n    text-align:center;\n  }\n  .contact-details a{ color:var(--text); border-bottom:1px solid var(--line); padding-bottom:2px; }\n  .contact-details a:hover{ border-color:var(--amber); color:var(--amber); }\n  .typewriter{\n    font-family:'Space Grotesk', monospace;\n    letter-spacing:0.02em;\n    color:var(--text);\n    display:inline-block;\n  }\n  .typewriter-big{\n    font-size:clamp(2rem, 6.5vw, 5rem);\n    font-weight:700;\n    color:var(--teal);\n    margin-bottom:8px;\n  }\n  .typewriter::after{\n    content:'';\n    display:inline-block;\n    width:2px;\n    height:1em;\n    background:var(--teal);\n    margin-left:3px;\n    vertical-align:-0.15em;\n    animation:blink 0.9s steps(1) infinite;\n  }\n  @keyframes blink{\n    0%, 49%{ opacity:1; }\n    50%, 100%{ opacity:0; }\n  }\n  @media (prefers-reduced-motion: reduce){\n    .typewriter::after{ animation:none; opacity:1; }\n  }\n\n  form{ display:grid; gap:18px; }\n  .field{ display:grid; gap:8px; }\n  label{ font-size:0.82rem; color:var(--muted); letter-spacing:0.04em; }\n  input, textarea, select{\n    background:var(--surface-2);\n    border:1px solid var(--line);\n    color:var(--text);\n    padding:14px 16px;\n    border-radius:var(--radius);\n    font-family:inherit;\n    font-size:0.95rem;\n  }\n  input:focus, textarea:focus, select:focus{\n    outline:none; border-color:var(--teal);\n  }\n  textarea{ resize:vertical; min-height:110px; }\n  .submit-btn{\n    justify-self:start;\n    background:var(--amber);\n    color:#14151A;\n    border:none;\n    padding:14px 30px;\n    border-radius:var(--radius);\n    font-weight:600;\n    font-family:inherit;\n    font-size:0.95rem;\n    cursor:pointer;\n    transition:transform .2s ease;\n  }\n  .submit-btn:hover{ transform:translateY(-2px); }\n  .form-note{ font-size:0.8rem; color:var(--muted); }\n  @media (max-width:640px){\n    .submit-btn{ justify-self:stretch; text-align:center; }\n  }\n\n  \/* ---------- envelope ---------- *\/\n  .envelope{\n    position:relative;\n    perspective:1200px;\n    border-width:clamp(4px, 1.2vw, 7px);\n    border-style:solid;\n    border-image:repeating-linear-gradient(-45deg,\n      var(--amber) 0 12px,\n      var(--bg) 12px 16px,\n      var(--teal) 16px 28px,\n      var(--bg) 28px 32px,\n      var(--green) 32px 44px,\n      var(--bg) 44px 48px) 7;\n    border-radius:2px;\n    background:transparent;\n    padding:clamp(36px, 9vw, 56px) clamp(14px, 4vw, 24px) clamp(16px, 4vw, 24px);\n    overflow-x:hidden;\n  }\n  .envelope-flap{\n    position:absolute;\n    top:0; left:0; right:0;\n    height:clamp(70px, 20vw, 140px);\n    clip-path:polygon(0 0, 100% 0, 50% 100%);\n    background:linear-gradient(120deg, var(--amber), var(--teal) 55%, var(--green));\n    border-bottom:1px solid var(--line);\n    transform-origin:top center;\n    transform-style:preserve-3d;\n    transition:transform .8s cubic-bezier(.65,0,.35,1);\n    z-index:3;\n    display:flex; align-items:flex-start; justify-content:center;\n    padding-top:clamp(6px, 1.5vw, 10px);\n    animation:flapSway 3.4s ease-in-out infinite;\n  }\n  @keyframes flapSway{\n    0%, 100%{ transform:rotateX(30deg); }\n    50%{ transform:rotateX(42deg); }\n  }\n  .envelope.sealed .envelope-flap{\n    animation:none;\n    transform:rotateX(0deg);\n  }\n  @media (prefers-reduced-motion: reduce){\n    .envelope-flap{ animation:none; transform:rotateX(36deg); }\n  }\n  .envelope-seal{\n    width:clamp(22px, 5vw, 30px);\n    height:clamp(22px, 5vw, 30px);\n    border-radius:50%;\n    background:var(--bg);\n    display:flex; align-items:center; justify-content:center;\n    opacity:0;\n    transform:scale(0.4);\n    transition:opacity .3s ease .6s, transform .3s cubic-bezier(.34,1.56,.64,1) .6s;\n  }\n  .envelope-seal .aperture{ width:clamp(12px, 3vw, 16px); height:clamp(12px, 3vw, 16px); color:var(--teal); }\n  .envelope.sealed .envelope-seal{\n    opacity:1;\n    transform:scale(1);\n  }\n  .envelope form{\n    position:relative;\n    z-index:1;\n    transition:opacity .5s ease, transform .5s ease;\n  }\n  .envelope.sealed form{\n    opacity:0.25;\n    transform:scale(0.98);\n    pointer-events:none;\n  }\n\n  \/* ---------- footer ---------- *\/\n  footer{\n    padding:40px 0;\n    border-top:1px solid var(--line);\n    display:flex; align-items:center; justify-content:space-between;\n    color:var(--muted);\n    font-size:0.85rem;\n    flex-wrap:wrap;\n    gap:16px;\n  }\n  footer .logo{ font-size:1rem; }\n  footer .logo .aperture{ width:16px; height:16px; }\n  footer a:not(.logo):hover{ color:var(--amber); border-color:var(--amber); }\n\n  \/* reveal on scroll \u2014 comes into focus, like a lens *\/\n  .reveal{\n    opacity:0;\n    filter:blur(9px);\n    transform:translateY(18px);\n    transition:opacity .9s ease, filter 1s ease, transform .9s ease;\n  }\n  .reveal.in{ opacity:1; filter:blur(0); transform:translateY(0); }\n\n  @media (prefers-reduced-motion: reduce){\n    .reveal, .blade{ transition:none !important; }\n    .reveal{ opacity:1; filter:none; transform:none; }\n  }\n\n  :focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }\n\n<\/style>\n<\/head>\n<body>\n\n<!-- reusable aperture svg as inline symbol -->\n<svg width=\"0\" height=\"0\" style=\"position:absolute\">\n  <symbol id=\"ap-icon\" viewBox=\"0 0 100 100\">\n    <path fill=\"currentColor\" d=\"M50 6 L64 40 L34 40 Z\" transform=\"rotate(0 50 50)\"\/>\n    <path fill=\"currentColor\" d=\"M50 6 L64 40 L34 40 Z\" transform=\"rotate(60 50 50)\"\/>\n    <path fill=\"currentColor\" d=\"M50 6 L64 40 L34 40 Z\" transform=\"rotate(120 50 50)\"\/>\n    <path fill=\"currentColor\" d=\"M50 6 L64 40 L34 40 Z\" transform=\"rotate(180 50 50)\"\/>\n    <path fill=\"currentColor\" d=\"M50 6 L64 40 L34 40 Z\" transform=\"rotate(240 50 50)\"\/>\n    <path fill=\"currentColor\" d=\"M50 6 L64 40 L34 40 Z\" transform=\"rotate(300 50 50)\"\/>\n  <\/symbol>\n<\/svg>\n\n<main id=\"top\">\n\n  <!-- HERO -->\n  <section class=\"hero\" id=\"heroSection\" style=\"padding-top:0;\">\n    <div class=\"hero-veil\" id=\"heroVeil\"><\/div>\n    <span class=\"hero-hint\">Beweeg je muis, er schuilt meer<\/span>\n    <div class=\"wrap hero-grid\">\n      <div class=\"hero-content-solo\">\n        <a href=\"diensten.html\" class=\"hero-link\">\n          <h1 class=\"hero-title hero-title-solo\">Not your typical<br><em class=\"rotator\" id=\"rotator\">content creator<\/em>.<\/h1>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/main>\n\n<footer class=\"wrap\">\n  <a href=\"mailto:hallo@yokie.be\" style=\"color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:1px;\">hallo@yokie.be<\/a>\n  <span>\u00a9 2026 Yokie. Alle rechten voorbehouden.<\/span>\n<\/footer>\n\n<script>\n  \/\/ mobile menu toggle\n  const menuBtn = document.querySelector('.menu-btn');\n  const headerEl = document.querySelector('header');\n  if(menuBtn && headerEl){\n    menuBtn.addEventListener('click', () => {\n      const isOpen = headerEl.classList.toggle('nav-open');\n      menuBtn.textContent = isOpen ? '\u2715' : '\u2630';\n      menuBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n    });\n    headerEl.querySelectorAll('.navlinks a').forEach(link => {\n      link.addEventListener('click', () => {\n        headerEl.classList.remove('nav-open');\n        menuBtn.textContent = '\u2630';\n        menuBtn.setAttribute('aria-expanded', 'false');\n      });\n    });\n  }\n\n  \/\/ open aperture on load (legacy hook, safe no-op if element absent)\n  window.addEventListener('load', () => {\n    requestAnimationFrame(() => {\n      const stage = document.getElementById('apertureStage');\n      if(stage) stage.classList.add('open');\n    });\n  });\n\n  \/\/ rotating \"not your typical ...\" word\n  const rotatorEls = document.querySelectorAll('.rotator');\n  if(rotatorEls.length){\n    const words = ['content creator', 'social media manager', 'fotograaf', 'projectmanager', 'IT-consulent', 'projectplanner'];\n    const colors = ['var(--amber)', 'var(--green)', 'var(--teal)', 'var(--amber)', 'var(--green)', 'var(--teal)'];\n    let idx = 0;\n    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    setInterval(() => {\n      rotatorEls.forEach(el => {\n        el.style.opacity = 0;\n        el.style.filter = prefersReduced ? 'none' : 'blur(6px)';\n      });\n      setTimeout(() => {\n        idx = (idx + 1) % words.length;\n        rotatorEls.forEach(el => {\n          el.textContent = words[idx];\n          el.style.color = colors[idx];\n          el.style.opacity = 1;\n          el.style.filter = 'blur(0)';\n        });\n      }, 300);\n    }, 2400);\n  }\n\n  \/\/ hidden veil revealed by cursor \/ touch\n  const heroSection = document.getElementById('heroSection');\n  const heroVeil = document.getElementById('heroVeil');\n  if(heroSection && heroVeil){\n    const setSpot = (x, y) => {\n      const rect = heroSection.getBoundingClientRect();\n      heroVeil.style.setProperty('--mx', (x - rect.left) + 'px');\n      heroVeil.style.setProperty('--my', (y - rect.top) + 'px');\n    };\n    heroSection.addEventListener('mousemove', e => setSpot(e.clientX, e.clientY));\n    heroSection.addEventListener('touchmove', e => {\n      if(e.touches[0]) setSpot(e.touches[0].clientX, e.touches[0].clientY);\n    }, { passive:true });\n  }\n\n  \/\/ service cards toggle\n  document.querySelectorAll('.service-card').forEach(card => {\n    const toggle = () => card.classList.toggle('active');\n    card.addEventListener('click', toggle);\n    card.addEventListener('keypress', e => { if(e.key === 'Enter') toggle(); });\n  });\n\n  \/\/ typewriter effect for every .typewriter element (address, Samenwerken?, ...)\n  const prefersReducedTw = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  document.querySelectorAll('.typewriter').forEach(twEl => {\n    const fullText = twEl.getAttribute('data-text') || '';\n    let typed = false;\n    const typeIt = () => {\n      if(typed) return;\n      typed = true;\n      if(prefersReducedTw){ twEl.textContent = fullText; return; }\n      let i = 0;\n      const step = () => {\n        twEl.textContent = fullText.slice(0, i);\n        i++;\n        if(i <= fullText.length) setTimeout(step, 45);\n      };\n      step();\n    };\n    const twObserver = new IntersectionObserver(entries => {\n      entries.forEach(e => { if(e.isIntersecting) typeIt(); });\n    }, { threshold: 0.5 });\n    twObserver.observe(twEl);\n  });\n\n  \/\/ envelope seals shut before the real submit fires (mailto opens the mail app)\n  const envelope = document.getElementById('envelope');\n  const contactForm = document.getElementById('contactForm');\n  if(envelope && contactForm){\n    contactForm.addEventListener('submit', e => {\n      if(envelope.classList.contains('sealed')) return; \/\/ already sealing, let it go through\n      e.preventDefault();\n      envelope.classList.add('sealed');\n      const note = contactForm.querySelector('.form-note');\n      setTimeout(() => {\n        contactForm.submit();\n        if(note) note.textContent = 'Je mail-app opent nu met het bericht klaar om te versturen.';\n      }, 850);\n    });\n  }\n\n  \/\/ scroll reveal\n  const io = new IntersectionObserver(entries => {\n    entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('in'); });\n  }, { threshold: 0.15 });\n  document.querySelectorAll('.reveal').forEach(el => io.observe(el));\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Yokie | Not your typical agency Beweeg je muis, er schuilt meer Not your typicalcontent creator. hallo@yokie.be \u00a9 2026 Yokie. Alle rechten voorbehouden.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yokie.be\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yokie.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yokie.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yokie.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yokie.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":5,"href":"https:\/\/yokie.be\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/yokie.be\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/yokie.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}