:root{
  --ink:#101010;
  --muted:#747474;
  --orange:#f26a21;
  --grid:rgba(20,20,20,.12);
  --tilt:0deg;
  --wave-scale:1;
  --primary-shift:0px;
  --secondary-shift:0px;
  --marker-x:68%;
  --marker-y:0px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}
body{overscroll-behavior:none}
.stage{position:relative;width:100vw;height:100dvh;min-height:620px;overflow:hidden;background:#fff;isolation:isolate}
.payoff{position:absolute;top:38px;left:48px;z-index:40;display:flex;gap:10px;align-items:center;font-weight:700;font-size:1rem}
.orange{color:var(--orange)}
.motion-pill{position:absolute;top:76px;left:48px;z-index:50;display:none;align-items:center;gap:9px;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#303030;font:600 .68rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.motion-pill .dot{width:7px;height:7px;border-radius:50%;background:#aaa}
.motion-pill.active .dot{background:var(--orange);box-shadow:0 0 0 4px rgba(242,106,33,.12)}
.headline{position:absolute;left:48px;top:154px;z-index:3;margin:0;font-family:"Arial Black",Arial,sans-serif;font-weight:900;font-size:clamp(5rem,15vw,10rem);letter-spacing:-.09em;line-height:.75}
.headline span{display:block;font-size:.46em;letter-spacing:-.04em;margin:.18em 0 .12em .05em}
.data{position:absolute;right:48px;top:116px;z-index:45;width:270px;border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.data h3{margin:0;padding:12px;color:var(--muted);font-size:.58rem;letter-spacing:.15em;border-bottom:1px solid var(--grid)}
.row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;min-height:72px;border-bottom:1px solid var(--grid)}
.row:last-child{border-bottom:0}.row b{color:var(--orange);text-align:center}.row span{font-size:.62rem;color:var(--muted);letter-spacing:.1em}.row strong{font-size:.82rem;padding-right:12px}
.services{position:absolute;left:48px;right:48px;bottom:176px;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.service{padding:18px;min-height:112px;border-right:1px solid var(--grid)}.service:last-child{border-right:0}
.service small{color:var(--orange);font-family:ui-monospace,monospace}.service h4{margin:13px 0 7px;font-size:.92rem}.service p{margin:0;color:#666;font-size:.75rem;line-height:1.45}
.ticker{position:absolute;left:0;right:0;bottom:116px;z-index:4;overflow:hidden;border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);height:44px;background:rgba(255,255,255,.35)}
.track{width:max-content;white-space:nowrap;padding:11px 0;font:700 .76rem ui-monospace,monospace;letter-spacing:.04em;animation:ticker 42s linear infinite}
.contact{position:absolute;left:48px;bottom:26px;z-index:35;display:flex;gap:18px;align-items:center;padding:16px 19px;border:1px solid rgba(0,0,0,.07);border-radius:16px;background:rgba(247,247,245,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.contact small{font:600 .58rem ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact small:before{content:"+";color:var(--orange);margin-right:7px}.contact strong{font-size:.9rem}.contact a{color:inherit;text-decoration:none}
.water-system{--surface-y:24%;position:absolute;left:-18vw;right:-18vw;bottom:-12vh;height:68vh;z-index:10;transform-origin:50% 100%;transform:rotate(var(--tilt));pointer-events:none;will-change:transform}
.water-glass{position:absolute;top:var(--surface-y);inset-inline:0;bottom:0;background:rgba(151,175,193,.22);border-top:0;backdrop-filter:blur(14px) saturate(122%);-webkit-backdrop-filter:blur(14px) saturate(122%)}
.water-glass:before{content:"";position:absolute;top:0;left:0;right:0;height:32px;background:linear-gradient(to bottom,rgba(255,255,255,.58),rgba(199,216,228,.22) 36%,transparent)}
.wave-layer{position:absolute;top:calc(var(--surface-y) - 22px);left:0;width:100%;height:44px;overflow:hidden;transform:scaleY(var(--wave-scale));transform-origin:50% 50%;will-change:transform}
.wave-runner{display:flex;width:200%;height:100%;will-change:transform}
.wave-layer-primary .wave-runner{transform:translate3d(var(--primary-shift),0,0)}
.wave-layer-secondary{top:calc(var(--surface-y) - 18px);opacity:.34}
.wave-layer-secondary .wave-runner{transform:translate3d(var(--secondary-shift),0,0)}
.wave{display:block;flex:0 0 50%;width:50%;height:100%;overflow:visible}
.wave path{fill:rgba(151,175,193,.14);stroke:#718a9b;stroke-width:1.35;vector-effect:non-scaling-stroke}
.water-marker{position:absolute;left:var(--marker-x);top:calc(var(--surface-y) + var(--marker-y));width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(242,106,33,.12),0 2px 8px rgba(16,16,16,.14);transform:translate(-50%,-50%);z-index:30;will-change:left,top}
.water-marker:after{content:"";position:absolute;left:50%;top:50%;width:28px;height:1px;background:rgba(242,106,33,.4);transform:translate(-50%,-50%)}
@keyframes ticker{to{transform:translateX(-50%)}}

@media (hover:none) and (pointer:coarse){.motion-pill{display:inline-flex}}

@media (max-width:700px) and (orientation:portrait){
  .stage{min-height:100dvh}
  .payoff{left:22px;top:28px;font-size:.96rem}
  .motion-pill{left:22px;top:72px}
  .headline{left:22px;top:188px;font-size:clamp(4.4rem,24vw,6.7rem)}
  .data{right:14px;top:178px;width:186px}
  .data h3{padding:9px 10px}.row{min-height:52px;grid-template-columns:24px 1fr auto}
  .row span{font-size:.52rem}.row strong{font-size:.67rem;padding-right:8px}
  .services{left:22px;right:22px;bottom:160px;grid-template-columns:1fr 1fr 1fr}
  .service{min-height:74px;padding:10px 8px}.service h4{margin:8px 0 0;font-size:.72rem;line-height:1.15}.service p{display:none}
  .ticker{display:none}
  .contact{left:22px;bottom:24px;padding:14px 16px}
  .water-system{left:-42vw;right:-42vw;bottom:-15vh;height:58vh;--surface-y:15%}
}

@media (max-height:760px) and (orientation:portrait){
  .headline{top:170px;font-size:clamp(4rem,22vw,5.8rem)}
  .data{top:162px}
  .services{bottom:142px}
  .contact{bottom:18px}
}

@media (orientation:landscape) and (max-height:600px){
  .stage{height:100dvh;min-height:0}
  .payoff{left:26px;top:22px;font-size:.9rem}
  .motion-pill{left:26px;top:58px}
  .headline{left:26px;top:112px;font-size:clamp(3.4rem,12vw,6rem)}
  .data{right:24px;top:22px;width:250px}
  .data h3{padding:8px 10px}.row{min-height:44px}
  .services{display:none}
  .ticker{display:none}
  .contact{left:26px;bottom:18px;padding:12px 15px}
  .water-system{left:-20vw;right:-20vw;bottom:-24vh;height:64vh;--surface-y:12%}
}

/* v10 — rustige golf, marker exact op het water, beweging uitzetbaar */
.wave-layer{overflow:visible;transition:transform .3s ease-out}
.wave-runner{transform:none!important;width:100%!important}
.wave-runner .wave{flex:0 0 100%!important;width:100%!important}
.wave-runner .wave:nth-child(2){display:none}
.wave-layer-primary{opacity:.92}.wave-layer-secondary{opacity:.22}
.water-marker{left:var(--marker-x,70%);top:calc(var(--surface-y) + var(--marker-y,0px));transition:none}
.motion-pill.active .dot{background:var(--orange)}
.motion-pill.active{border-color:rgba(242,106,33,.28)}


/* v11 — levendiger middenniveau */
.wave-layer-primary { opacity: .98; }
.wave-layer-secondary { opacity: .30; }


/* v12 — live getij bij Holwert via Ameland Nes */
.water-system{--surface-y:24%;transition:none}
.water-glass{border-top:0!important;background:linear-gradient(to bottom,rgba(181,202,216,.22),rgba(151,175,193,.29) 20%,rgba(151,175,193,.25));}
.water-glass:before{top:-18px;height:54px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.22) 45%,rgba(199,216,228,.16) 70%,transparent);}
.wave-layer{overflow:visible;}
.wave-runner{transform:none!important;width:100%!important;}
.wave-runner .wave{flex:0 0 100%!important;width:100%!important;}
.wave-runner .wave:nth-child(2){display:none;}
.wave-layer-primary{opacity:.98;}
.wave-layer-secondary{opacity:.30;}


/* v13 — de gesloten SVG-vulling heeft geen contour; alleen de organische golfkam wordt getekend */
.wave path{vector-effect:non-scaling-stroke}
.wave .wave-fill{fill:rgba(151,175,193,.14);stroke:none!important}
.wave .wave-line{fill:none!important;stroke:#718a9b;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.water-glass,.water-glass:before{border:0!important;outline:0!important;box-shadow:none!important}


/* v14 — duidelijk zichtbare, maar gecontroleerde golfbeweging */
.wave-layer-primary{opacity:1}
.wave-layer-secondary{opacity:.34}
.wave-line{stroke-width:1.15}


/* v25 — waterlijn en golf gebruiken dezelfde viewport-coordinaten.
   De watermassa loopt ruim onder beeld door, zodat zij bij eb nooit verdwijnt. */
.water-system{
  top:0!important;
  bottom:-32vh!important;
  height:auto!important;
  min-height:132vh;
}


/* v26 — getijgegevens blijven altijd vóór de waterlaag. */
.data{z-index:45!important;}
.payoff{z-index:46!important;}

/* v27 — onderste content schaalt mee met de schermhoogte.
   De onderlinge afstand tussen services en ticker blijft vast,
   terwijl de complete onderzone op lagere schermen gecontroleerd zakt. */
:root{
  --contact-bottom:clamp(18px,3vh,26px);
  --ticker-bottom:clamp(88px,12vh,116px);
  --services-bottom:calc(var(--ticker-bottom) + 60px);
}

.services{
  bottom:var(--services-bottom);
}

.ticker{
  bottom:var(--ticker-bottom);
}

.contact{
  bottom:var(--contact-bottom);
}

/* v28 — ticker ook zichtbaar op mobiele schermen.
   Hij blijft tussen de dienstenblokken en het contactvlak staan
   en wordt vóór de waterlaag weergegeven. */
@media (max-width:700px) and (orientation:portrait){
  .ticker{
    display:block;
    z-index:34;
  }
}

/* v30 — gecorrigeerde horizontale golfbeweging.
   De vaste !important-transform is verwijderd, zodat de keyframes daadwerkelijk kunnen bewegen. */
.wave-runner{
  width:200%!important;
}

.wave-runner .wave{
  flex:0 0 50%!important;
  width:50%!important;
}

.wave-runner .wave:nth-child(2){
  display:block;
}

.wave-layer-primary .wave-runner{
  animation:wave-drift-primary 32s linear infinite;
}

.wave-layer-secondary .wave-runner{
  animation:wave-drift-secondary 44s linear infinite reverse;
}

@keyframes wave-drift-primary{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@keyframes wave-drift-secondary{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media (prefers-reduced-motion:reduce){
  .wave-layer-primary .wave-runner,
  .wave-layer-secondary .wave-runner{
    animation:none;
  }
}

/* v31 — echte golfslag: de golfvorm wordt per frame in JavaScript hertekend
   als lopende golf. De oude horizontale drift en de gedupliceerde SVG
   zijn daardoor overbodig. */
.wave-layer-primary .wave-runner,
.wave-layer-secondary .wave-runner{
  animation:none!important;
  width:100%!important;
}
.wave-runner .wave{
  flex:0 0 100%!important;
  width:100%!important;
}
.wave-runner .wave:nth-child(2){
  display:none;
}
.wave-layer{
  transition:none;
}

/* v32 — knop alleen tonen als automatische waterreactie niet mogelijk is.
   Het hidden-attribuut moet ook winnen van de mobiele display-regel. */
.motion-pill[hidden]{
  display:none!important;
}