:root {
    /* houdt formuliervelden, scrollbars en autofill licht */
    color-scheme: light;
    /* Google Labs tokens */
    --primary: #5E9BFF;
    --bg-light: #F3EFEA;
    --bg-dark: #1A1A1A;
    --fg-light: #323232;
    --fg-dark: #D1D1D1;
    --card-light: #FFFFFF;
    --border-low: #E8DFD5;
    --border-mid: #DDD3C7;
    --text-secondary: rgba(50, 50, 50, .8);
    --shape-green: #48F08B;
    --shape-blue: #5E9BFF;
    --shape-pink: #FFBDF9;
    --shape-yellow: #FCC934;
    --shape-orange: #FF864A;
    --gl-radius-card: 2.4rem;
    --shadow-flyout: 0 12px 32px -8px rgba(50, 50, 50, 0.16), 0 2px 8px rgba(50, 50, 50, 0.06);
  }

  html {
    scroll-behavior: smooth;
  }
  html, body {
    background: var(--bg-light);
    color: var(--fg-light);
    font-family: 'Google Sans Flex', 'Google Sans', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* Onepager-navigatie: laat sectie-ankers niet achter de sticky header verdwijnen */
  #diensten, #werkwijze, #cases, #contact {
    scroll-margin-top: 84px;
  }

  .font-gothic { font-family: 'Google Sans Flex', 'Google Sans', Helvetica, Arial, sans-serif; }
  .font-mono-token { font-family: 'JetBrains Mono', ui-monospace, monospace; }

  .text-secondary { color: var(--text-secondary); }
  .border-low { border-color: var(--border-low); }
  .border-mid { border-color: var(--border-mid); }

  .transition-spring { transition: all .2s ease; }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }

  a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .btn-primary {
    background: var(--bg-dark);
    color: #fff;
    border-radius: 999rem;
    padding: 1em 2em;
    font-weight: 500;
  }
  .btn-primary:hover { background: #000; }


  .btn-ghost {
    background: transparent;
    color: var(--fg-light);
    border: .2rem solid var(--border-mid);
    border-radius: 999rem;
    padding: calc(1em - .2rem) calc(2em - .2rem);
    font-weight: 500;
  }
  .btn-ghost:hover { background: rgba(50,50,50,0.05); }

  .link-arrow { color: var(--primary); }
  .link-arrow svg { transition: transform .2s ease; }
  .link-arrow:hover svg { transform: translateX(3px); }

  .card {
    background: var(--card-light);
    border: 1px solid var(--border-low);
    border-radius: var(--gl-radius-card);
  }
  .card-hover:hover { background: #fbfaf8; }

  .landscape-art {
    background:
      radial-gradient(circle at 15% 25%, rgba(94,155,255,0.18), transparent 45%),
      radial-gradient(circle at 80% 15%, rgba(255,189,249,0.22), transparent 50%),
      radial-gradient(circle at 60% 75%, rgba(72,240,139,0.16), transparent 55%),
      linear-gradient(160deg, #EDE7DD 0%, #E8DFD5 45%, #EDE7DD 100%);
  }
  .glow-cta {
    background: var(--bg-dark);
  }

  .macos-dot { width: 10px; height: 10px; border-radius: 50%; }

  .nav-submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-item:hover .nav-submenu,
  .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .avatar-initial {
    width: 40px; height: 40px; border-radius: 999rem;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Google Sans Flex', sans-serif; font-weight: 500; font-size: 0.85rem; color: #1A1A1A;
  }

  ::selection { background: var(--primary); color: #fff; }

  /* ---- Header: licht, frosted, progressive blur + gradient opacity ---- */
  .gl-header-blur span {
    position: absolute; inset: 0;
  }
  .gl-header-blur span:nth-child(1) {
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    background: rgba(243,239,234,.28);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  }
  .gl-header-blur span:nth-child(2) {
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    background: rgba(243,239,234,.45);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 45%); mask-image: linear-gradient(to bottom, #000 0%, transparent 45%);
  }
  .gl-header-blur span:nth-child(3) {
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    background: rgba(243,239,234,.7);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 25%); mask-image: linear-gradient(to bottom, #000 0%, transparent 25%);
  }

  .header__links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-light);
    transition: color .2s ease;
  }
  .header__links a:hover, .header__links a:focus-visible { color: rgba(50,50,50,.55); }

  /* ---- Floating decorative shapes ---- */
  .gl-shape { position: absolute; opacity: .85; will-change: transform; }
  .gl-shape svg { display: block; width: 100%; height: 100%; }

  /* Hero-smileys: op mobiel 2x zo groot, altijd zichtbaar en zwevend. Nooit negatieve
     top/left/right, want de hero-sectie zelf heeft geen eigen padding, dus een negatieve
     waarde duikt direct onder de sticky header en wordt daar afgesneden. */
  @media (max-width: 767px) {
    .gl-shape-1 { width: 128px !important; height: 128px !important; top: 6px !important; left: 4px !important; }
    .gl-shape-2 { width: 96px !important; height: 96px !important; top: 10px !important; right: 4px !important; }
    .gl-shape-3 { width: 68px !important; height: 68px !important; top: 72px !important; right: 22% !important; }
    .gl-shape-4 { width: 44px !important; height: 44px !important; top: 92px !important; left: 28% !important; }
  }

  @keyframes gl-float-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(10px, -12px) rotate(4deg); }
    75%      { transform: translate(-8px, 8px) rotate(-3deg); }
  }
  @keyframes gl-float-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(-12px, 10px) rotate(-5deg); }
    75%      { transform: translate(9px, -6px) rotate(3deg); }
  }
  @keyframes gl-float-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(8px, 9px) rotate(3deg); }
    75%      { transform: translate(-9px, -7px) rotate(-4deg); }
  }
  .gl-float-1 { animation: gl-float-1 9s ease-in-out infinite; }
  .gl-float-2 { animation: gl-float-2 11s ease-in-out infinite; }
  .gl-float-3 { animation: gl-float-3 7.5s ease-in-out infinite; }

  /* ---- Achtergrond-smiley: drijvende afbeelding (zelfde beweging als labs.google) ---- */
  .section-blob-wrap {
    position: absolute;
    width: 210px;
    height: 210px;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    animation: case-blob-drift 14s ease-in-out infinite;
  }
  .section-blob { display: block; width: 100%; height: 100%; object-fit: contain; }

  @keyframes case-blob-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(18px, 22px) scale(1.08); }
  }

  /* ---- USP-marquee: twee rijen, beide traag en soepel naar rechts, infinite loop ---- */
  .marquee-row { display: flex; width: max-content; will-change: transform; }
  .marquee-track { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
  @keyframes marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0%); }
  }
  @keyframes marquee-left {
    from { transform: translateX(0%); }
    to   { transform: translateX(-50%); }
  }
  /* Tegengestelde richtingen: dat leest rustiger dan twee rijen die dezelfde kant op schuiven. */
  .marquee-row-1 { animation: marquee-right 52s linear infinite; }
  .marquee-row-2 { animation: marquee-left  60s linear infinite; }
  .marquee-row-3 { animation: marquee-right 80s linear infinite; }
  .marquee-row-4 { animation: marquee-right 150s linear infinite; }

  /* ---- Reviewkaart in de hero-slider: alleen tekst, geen portret. De kaarten
     rekken mee met de langste quote (flex stretch), zodat de rij één hoogte
     houdt zonder tekst af te kappen. ---- */
  .review-card {
    flex-shrink: 0;
    width: 340px;
    margin-right: 20px;
    overflow: hidden;
    border-radius: var(--gl-radius-card);
    border: 1px solid var(--border-low);
    background: var(--card-light, #FFFFFF);
    display: flex;
    flex-direction: column;
    min-height: 230px;
  }
  .review-inhoud { padding: 24px; }
  .review-sterren { display: flex; align-items: center; gap: 3px; margin-bottom: 12px; color: var(--primary); }
  /* Halve ster: een lege ster met daarover een tot de helft afgeknipte volle.
     De binnenste ster houdt zijn eigen breedte, de wikkel knipt hem af, anders
     zou hij uitgerekt worden in plaats van gehalveerd. */
  .review-ster-half { position: relative; display: inline-flex; width: 13px; height: 13px; }
  .review-ster-half > .ico { color: var(--border-mid, #DDD3C7); }
  .review-ster-vulling { position: absolute; inset: 0; width: 50%; overflow: hidden; display: flex; }
  .review-ster-vulling .ico { flex-shrink: 0; }
  /* Avatar met initialen, zoals Google die toont zonder profielfoto. De kleuren
     komen uit de eigen palet-tinten en zijn licht, dus de letters staan er in de
     donkere tekstkleur op in plaats van in wit. */
  .review-persoon { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
  .review-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--fg-light);
  }
  .review-persoon .review-naam,
  .review-persoon .review-rol { margin-bottom: 0; }
  /* De set levert een ster als contour; gevuld leest hij beter als waardering. */
  .review-sterren .ico { fill: currentColor; stroke: none; }
  .review-naam  { color: var(--fg-light); font-weight: 500; font-size: 16px; line-height: 1.25; margin-bottom: 6px; }
  .review-rol   { color: var(--text-secondary); font-size: 12px; line-height: 1.3; margin-bottom: 10px; }
  .review-card blockquote { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; }
  @media (max-width: 767px) {
    .review-card { width: 265px; margin-right: 14px; border-radius: 1.6rem; min-height: 210px; }
    .review-inhoud { padding: 20px; }
    /* Smallere kaarten = kortere rij, dus korter draaien om dezelfde ~20px/s te houden. */
    .marquee-row-4 { animation-duration: 116s; }
  }
  /* Tussenruimte staat als margin-right ÓP het item, niet als flex-gap op de rij.
     Bij een gap telt de rij 2N items + (2N-1) gaps, waardoor translateX(-50%) een halve
     gap naast de naad landt en de lus zichtbaar verspringt. Met margin-right is de
     halve breedte exact één set inclusief zijn eigen tussenruimte: naadloos. */
  .marquee-pill {
    display: inline-flex; align-items: center; gap: 10px;
    margin-right: 16px;
    white-space: nowrap;
    background: var(--card-light);
    border: 1px solid var(--border-mid);
    border-radius: 999rem;
    padding: 12px 22px;
    font-size: 14px; font-weight: 500;
    color: var(--fg-light);
  }
  .marquee-pill svg { flex-shrink: 0; color: var(--primary); }

  /* ---- Klantlogo's: uniforme optische grootte ondanks sterk verschillende verhoudingen ----
     Hoogte begrenzen alleen is niet genoeg: een breed logo (Urban Arrow) zou dan veel
     zwaarder wegen dan een compact logo (Clarify). Daarom ook een max-breedte. */
  .logo-strip img {
    height: 26px; width: auto;
    max-width: 140px; object-fit: contain;
    filter: grayscale(1); opacity: .6;
  }
  .logo-strip .logo-fallback {
    font-family: 'Google Sans Flex', sans-serif; font-weight: 500;
    font-size: 17px; color: var(--fg-light); opacity: .55;
  }
  /* Koffiebazen heeft een rond beeldmerk en oogt op 26px kleiner dan de brede woordmerken;
     iets hoger zetten (het bestand is strak bijgesneden, dus dit is nu echte beeldhoogte). */
  .logo-strip img[src*="koffiebazen"] { height: 42px; }
  @media (max-width: 767px) {
    .logo-strip img { height: 20px; max-width: 110px; }
    .logo-strip .logo-fallback { font-size: 15px; }
  }

  /* ---- Werk-slider: zelfde infinite marquee, maar met projectmockups ---- */
  .work-card {
    flex-shrink: 0;
    width: 300px;
    margin-right: 20px;
    border-radius: 1.6rem;
    overflow: hidden;
    border: 1px solid var(--border-low);
    background: var(--card-light);
    /* Geen schaduw: de overflow-clip van de marquee snijdt die boven en onder af,
       wat een rommelige rand geeft. Vlak, met rand, net als de reviewkaarten. */
  }
  .work-card img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
  @media (max-width: 767px) {
    .work-card { width: 220px; margin-right: 14px; border-radius: 1.2rem; }
    /* Smallere kaarten = kortere rij, dus met dezelfde duur zou de strook trager ogen.
       59s houdt de snelheid op ~20px/s, gelijk aan de USP-pillen hierboven. */
    .marquee-row-3 { animation-duration: 59s; }
  }

  /* ---- Iconenset (outline, 24x24 grid). De set heeft stroke="#212121" hardcoded;
     hier via currentColor, zodat een icoon de kleur van zijn tekst overneemt en
     dus ook op donkere vlakken en in de primaire kleur werkt. ---- */
  .ico { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-miterlimit: 10; stroke-linecap: square; }

  /* ---- Telefoon-mockup: trilt bij inscrollen alsof je gebeld wordt ----
     Eén trilling met een rustpauze aan het eind (70-100%), twee keer afgespeeld
     via iteration-count: 2. Zo krijg je twee losse rinkels in plaats van één
     lange wiebel. De rotatie zit op een eigen wrapper, zodat de md:rotate van
     het handschrift ernaast er niet mee in de knoop komt. */
  @keyframes telefoon-trilling {
    0%       { transform: rotate(0deg); }
    8%       { transform: rotate(-5deg); }
    16%      { transform: rotate(5deg); }
    24%      { transform: rotate(-4deg); }
    32%      { transform: rotate(4deg); }
    40%      { transform: rotate(-2.5deg); }
    48%      { transform: rotate(2.5deg); }
    56%      { transform: rotate(-1deg); }
    64%      { transform: rotate(0deg); }
    100%     { transform: rotate(0deg); }
  }
  .telefoon-belt { animation: telefoon-trilling .95s ease-in-out 2 both; }

  /* De telefoon loopt verder door dan de snijlijn van de kaart. Bij het trillen
     draait hij om zijn midden en komt een onderhoek een stuk omhoog; zonder die
     overlengte zie je daar de sectie onder de telefoon doorschijnen. */
  .telefoon-uitloop { margin-bottom: -96px; }
  @media (min-width: 768px) { .telefoon-uitloop { margin-bottom: -120px; } }
  @media (prefers-reduced-motion: reduce) {
    .telefoon-belt { animation: none; }
  }

  /* ---- Handgeschreven accent ---- */
  .font-hand { font-family: 'Caveat', cursive; }

  /* ---- Spring-in tekst-animatie: woord-voor-woord bij inscrollen ----
     Nabouw van Framer's physics-spring (stiffness 400, damping 75, mass 1,
     overdamped, dus geen overshoot/bounce) via cubic-bezier + per-woord delay. */
  .reveal-word {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(10px);
    transition: opacity .65s cubic-bezier(.16,1,.3,1), filter .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, .05s);
    will-change: opacity, filter, transform;
  }
  .reveal-word.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal-word { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  }

  /* ---- Hero page-load: één georkestreerde binnenkomst ----
     Zelfde spring-curve als de scroll-reveal, puur CSS via gestapelde animation-delay (--d).
     De h1 doet zijn woord-voor-woord reveal (0,05s + 0,1s per woord); de rest volgt daar
     overlappend op, zodat het één beweging is en geen reeks losse effecten. */
  @keyframes hero-rise {
    from { opacity: 0; filter: blur(10px); transform: translateY(12px); }
    to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
  }
  @keyframes hero-pop {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
  }
  .hero-in     { animation: hero-rise .7s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0s); }
  /* Op de <img> binnen .gl-shape, niet op de wrapper: die heeft al een oneindige
     float-animatie op transform en die mag niet overschreven worden. */
  .hero-pop-in { animation: hero-pop .6s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0s); }
  @media (prefers-reduced-motion: reduce) {
    .hero-in, .hero-pop-in { animation: none; }
  }

  /* Positie per sectie: aan de randen, weg van de gecentreerde koppen/subtekst, zodat het gezicht zichtbaar blijft */
  .blob-fit       { top: 6px; right: 2%; }
  .blob-projects  { top: 6px; left: 2%; }
  .blob-usp       { top: 8px; right: 3%; }
  .blob-phases    { top: 8px; left: 3%; }
  .blob-image     { top: 50%; left: 50%; margin: -85px 0 0 -85px; width: 170px; height: 170px; }
  .blob-invite    { top: 16px; right: 4%; width: 150px; height: 150px; opacity: .9; }

  @media (max-width: 767px) {
    .section-blob-wrap { width: 110px; height: 110px; opacity: 1; }
    .blob-fit       { top: 100px; right: 0 !important; left: auto !important; }
    .blob-projects  { top: 210px; left: 0 !important; right: auto !important; }
    .blob-usp       { top: 270px; right: 0 !important; left: auto !important; }
    .blob-phases    { top: 200px; left: 0 !important; right: auto !important; }
    /* op mobiel stapelt de sectie: het exacte midden valt achter de mockup, dus
       hier in de lege strook tussen de tekst en de mockup, wat kleiner */
    .blob-image     { top: 42%; left: 50% !important; right: auto !important; margin: -40px 0 0 -40px; width: 80px; height: 80px; }
    /* Verplaatst weg van de koptekst naar de lege ruimte tussen intro-tekst en telefoon-mockup */
    .blob-invite    { top: 388px; right: 26px !important; left: auto !important; width: 80px; height: 80px; opacity: .9; }
    .blob-faq       { top: 300px; right: 30px !important; left: auto !important; width: 80px; height: 80px; }
  }

  /* ---- FAQ ---- */
  .blob-faq { top: 8px; right: 7%; }

  .faq-watermark {
    position: absolute;
    top: -34px;
    right: 0;
    font-family: 'Google Sans Flex', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 9vw, 7rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(50, 50, 50, .045);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
  }
  @media (max-width: 767px) { .faq-watermark { display: none; } }

  .faq-item { transition: background .2s ease; }
  .faq-question {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; text-align: left;
    padding: 22px 24px;
    background: none; border: none; font-family: inherit; cursor: pointer;
    color: var(--fg-light);
  }
  .faq-icon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 999rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(50,50,50,.06); color: var(--fg-light);
    transition: transform .25s ease, background .2s ease, color .2s ease;
  }
  .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--primary); color: #fff; }
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .faq-answer p { padding: 0 24px 22px; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.65; max-width: 34rem; }

  /* ---- 4-fasenplan carousel ---- */
  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    z-index: 0;
    pointer-events: none;
  }

  .phase-track {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .phase-track::-webkit-scrollbar { display: none; }

  .phase-card {
    transition: transform .3s ease;
  }
  .phase-card:hover, .phase-card:focus-within {
    transform: rotate(0deg) translateY(-6px) !important;
  }

  .carousel-arrow {
    width: 44px; height: 44px;
    border-radius: 999rem;
    border: 1px solid var(--border-mid);
    background: var(--card-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-light);
    transition: background .2s ease, transform .2s ease;
  }
  .carousel-arrow:hover { background: #fbfaf8; }
  .carousel-arrow:active { transform: scale(.94); }
  .carousel-arrow:disabled { opacity: .3; cursor: default; }
  .carousel-arrow:disabled:hover { background: var(--card-light); }

  .social-circle {
    width: 44px; height: 44px;
    border-radius: 999rem;
    border: 1px solid var(--border-mid);
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-light);
    transition: background .2s ease, transform .2s ease;
  }
  .social-circle:hover { background: rgba(50,50,50,.05); }

  /* ---- Footer: smileys met zwaartekracht ----
     De smileys vallen naar binnen zodra de footer in beeld komt en zijn met de
     muis op te pakken. touch-action houdt verticaal scrollen op mobiel intact,
     want de fysica pakt daar alleen horizontale gebaren af. */
  /* De ruimte houdt de plek in de layout vrij waar de stapel komt te liggen.
     Het speelveld zelf ligt daar absoluut overheen en loopt naar boven door tot
     onder de kop, zodat een smiley die je omhoog gooit achter de tekst en de
     knop langs kan. Geen z-index: de rest van de footer staat op z-10 en komt
     er dus vanzelf overheen. */
  .smiley-fysica-ruimte {
    position: relative;
    /* Voorlopige hoogte; het script stelt hem bij op de echte stapel. */
    height: clamp(240px, 28vw, 480px);
  }
  .smiley-fysica {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    touch-action: pan-y;
  }
  .smiley-fysica-item {
    position: absolute;
    top: 0; left: 0;
    visibility: hidden;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
  }
  .smiley-fysica:not(.is-statisch) .smiley-fysica-item { cursor: grab; }
  .smiley-fysica:not(.is-statisch) .smiley-fysica-item:active { cursor: grabbing; }

  /* Vangnet: zonder JS, zonder matter.js of bij 'reduce' gewoon een rij smileys,
     zodat er nooit een leeg gat onder in de footer valt. */
  .smiley-fysica.is-statisch {
    position: static;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(6px, 1.6vw, 24px);
    height: auto;
    overflow: visible;
  }
  .smiley-fysica.is-statisch .smiley-fysica-item {
    position: static;
    visibility: visible;
    width: clamp(64px, 11vw, 140px);
    height: auto;
  }

  /* ---- Schermvullend menu ----
     Zelfde opzet als het voorbeeld: hamburger links, logo in het midden, en bij
     openen een vlak dat het hele scherm vult met de hoofdlinks groot en de
     bijzaken klein ernaast. Kleuren gewoon die van de site. */
  .menu-knop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    padding: 6px 0;
    font: inherit;
    font-size: 14px;
    color: var(--fg-light);
    cursor: pointer;
  }
  .menu-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    color: var(--fg-light);
  }
  .menu-label { line-height: 1; }

  .menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--bg-light);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: menu-vlak .4s cubic-bezier(.16, 1, .3, 1) both;
  }
  .menu-overlay[hidden] { display: none; }
  @keyframes menu-vlak { from { opacity: 0; } to { opacity: 1; } }

  /* Onder elkaar op tablet en mobiel, naast elkaar op desktop. Alle maten
     schalen mee met de schermhoogte (dvh, zodat de adresbalk van een telefoon
     meetelt) zodat het menu in beeld past en je niet hoeft te scrollen. */
  .menu-inhoud {
    display: grid;
    gap: clamp(10px, 3.2vh, 48px);
    padding: clamp(8px, 2vh, 40px) 0 clamp(10px, 3vh, 64px);
    min-height: calc(100dvh - 4rem);
    align-content: center;
  }
  @media (min-width: 900px) {
    .menu-inhoud {
      grid-template-columns: 1fr 1.6fr;
      align-items: start;
      gap: 64px;
      padding: 40px 0 64px;
    }
    /* De kleine links links, de grote rechts, net als in het voorbeeld. */
    .menu-groot { order: 2; }
    .menu-klein { order: 1; }
  }

  /* Een telefoon in liggende stand is te laag voor zes regels boven elkaar plus
     het linkblok. Daar zetten we het naast elkaar, anders moet je toch scrollen. */
  @media (max-height: 520px) and (min-width: 500px) {
    .menu-inhoud {
      grid-template-columns: 1fr 1.6fr;
      align-items: start;
      gap: 24px;
    }
    .menu-groot { order: 2; }
    .menu-klein { order: 1; }
  }

  .menu-groot { display: flex; flex-direction: column; }
  .menu-groot a {
    display: block;
    overflow: hidden;
    padding: .06em 0;
    font-family: 'Google Sans Flex', 'Google Sans', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: clamp(2.4rem, 7.5vw, 5.5rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--fg-light);
    text-decoration: none;
    transition: color .2s ease;
    animation: menu-regel .5s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i) * .05s + .05s);
  }
  /* de regel die je aanwijst blijft vol, de rest dooft */
  .menu-groot:hover a { color: rgba(50, 50, 50, .26); }
  .menu-groot a:hover { color: var(--fg-light); }

  /* tekstrol: het woord schuift omhoog terwijl een kopie van onderen binnenkomt */
  .menu-groot .rol { display: block; position: relative; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
  .menu-groot .rol > span { display: block; white-space: pre; }
  .menu-groot .rol > span + span { position: absolute; top: 100%; left: 0; width: 100%; }
  .menu-groot a:hover .rol { transform: translateY(-100%); }

  /* beeld dat achter de cursor aan komt */
  .menu-beeld {
    position: absolute;
    top: 0; left: 0;
    width: 360px; height: 260px;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    transition: opacity .35s cubic-bezier(.16, 1, .3, 1);
    box-shadow: var(--shadow-flyout);
  }
  .menu-beeld-laag {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  }
  .menu-beeld-laag img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* de uitsnede van Jesse is bijna vierkant: vanaf de bovenkant bijsnijden,
     zo blijft het hoofd heel en valt alleen de onderkant van het overhemd weg */
  .menu-beeld-laag--portret { background: var(--bg-light); }
  .menu-beeld-laag--portret img { object-position: 50% 0%; }
  /* op smalle schermen en zonder muis heeft het beeld geen functie */
  @media (max-width: 899px), (hover: none) { .menu-beeld { display: none; } }
  @keyframes menu-regel {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .menu-klein { animation: menu-regel .5s cubic-bezier(.16, 1, .3, 1) .3s both; }
  .menu-kopje {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
    margin: 0 0 10px;
  }
  .menu-klein ul { list-style: none; padding: 0; margin: 0 0 28px; }
  .menu-klein li { margin-bottom: 6px; }
  .menu-klein a {
    color: var(--fg-light);
    font-size: 15px;
    text-decoration: none;
    transition: color .2s ease;
  }
  .menu-klein a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
  .menu-klein a.btn-primary,
  .menu-klein a.btn-primary:hover { color: #fff; text-decoration: none; }

  /* op tablet en mobiel alles binnen het scherm houden */
  @media (max-width: 899px) {
    .menu-groot a {
      padding: 0;
      line-height: 1.1;
      /* hier telt de schermhoogte mee, zodat het menu in beeld past */
      font-size: clamp(1.5rem, min(7.5vw, 6.2vh), 5.5rem);
    }
    .menu-kopje { font-size: 10px; margin-bottom: clamp(2px, .9vh, 10px); }
    .menu-klein a { font-size: clamp(12px, 1.9vh, 15px); line-height: 1.35; }
    .menu-klein ul { margin-bottom: clamp(8px, 2.4vh, 28px); }
    .menu-klein li { margin-bottom: clamp(0px, .6vh, 6px); }
    .menu-klein a.btn-primary { font-size: 13px; padding: .8em 1.6em; line-height: 1.2; }
  }

  /* Een laag bureaubladvenster: laat de regels meekrimpen met de hoogte. */
  @media (min-width: 900px) and (max-height: 780px) {
    .menu-groot a { font-size: min(7.5vw, 10vh, 5.5rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-overlay, .menu-groot a, .menu-klein { animation: none; }
    .menu-groot a:hover { transform: none; }
    .menu-streepjes span { transition: none; }
  }

  .phase-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    border: 1px solid var(--border-mid);
    border-radius: 999rem;
    padding: 2px 10px;
  }

  /* ---- USP carousel (light) ---- */
  .usp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-light);
    background: rgba(50,50,50,.06);
    border-radius: 999rem;
    padding: 6px 14px;
  }

  /* Case-screenshot vult de hele kaart-header; de gradient eronder blijft als fallback zichtbaar
     wanneer een afbeelding ontbreekt (zie img.onerror-handler onderaan het script). */
  .case-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Witte variant van .usp-tag: leesbaar bovenop een foto i.p.v. op een egale achtergrond. */
  .usp-tag-light { background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(50,50,50,.12); }

  .usp-card {
    width: 280px;
    min-height: 460px;
    border-radius: var(--gl-radius-card);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--fg-light);
    border: 1px solid var(--border-low);
  }

  /* ---- Services: drie kaarten in de stijl van de usp-kaarten ----
     Desktop: waaier (zijkaarten gedraaid, midden recht en iets groter).
     Mobiel: snap-slider die opent met focus op de middelste kaart, met
     de buren nog net zichtbaar aan weerszijden. */
  .service-card {
    border-radius: var(--gl-radius-card);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--fg-light);
    border: 1px solid var(--border-low);
    padding: 28px;
    transition: transform .45s cubic-bezier(.16,1,.3,1);
  }
  @media (min-width: 768px) {
    .service-links  { transform: rotate(-5deg); }
    .service-rechts { transform: rotate(5deg); }
    .service-midden { transform: translateY(-18px) scale(1.04); z-index: 1; }
    .service-links:hover, .service-rechts:hover { transform: rotate(0) translateY(0); }
  }
  @media (max-width: 767px) {
    .services-rij {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 12px;
      /* Randpadding zó dat een gecentreerde kaart links en rechts ~15% van de buren toont. */
      padding: 4px 15vw 8px;
      scrollbar-width: none;
    }
    .services-rij::-webkit-scrollbar { display: none; }
    .service-card {
      flex-shrink: 0;
      width: 66vw;
      scroll-snap-align: center;
      padding: 22px;
    }
    /* Zelfde waaier als op desktop; extra verticale ruimte zodat de gedraaide
       hoeken niet tegen de rand van de scrollstrook aanlopen. */
    .services-rij { padding-top: 18px; padding-bottom: 22px; }
    .service-links  { transform: rotate(-5deg); }
    .service-rechts { transform: rotate(5deg); }
    .service-midden { transform: translateY(-12px); }
  }