/* Eye.be: aanvullingen op het design voor Mendeleev 7 */

/* titels: Owners Wide (iets smaller dan de XXWide uit het design) en iets groter.
   Staat die breedte niet in de Adobe Fonts-kit gwk1noa, dan valt hij terug op XXWide. */
/* De kit gwk1noa heeft nu enkel owners-xxwide. Voeg Owners XWide of Owners Wide (gewicht 700) toe in Adobe Fonts,
   dan nemen de titels die vanzelf over. */
:root { --eye-heading: "owners-xwide", "owners-wide", "owners-xxwide", sans-serif; }
/* titels nooit midden in een woord afbreken (het design zet word-break op de body) */
h1, h2, h3, h4, .ew-h, .ew-hl-t, .ew-vf-title, .ew-to-title, .mf-done-h, .ew-fl-bot b { word-break: normal; overflow-wrap: normal; hyphens: manual; }
h1, h2, h3, h4, .h1, .h2, .ff-heading { font-family: var(--eye-heading); }
h1 { font-size: clamp(2.3rem, 0.9rem + 6.7vw, 9rem); }

/* breedte: tekst, rasters, menubalk en footer stoppen op 1600 px; foto's en video's van rand tot rand blijven schermbreed */
:root { --eye-max: 100rem; }
.container-fluid, .container-fluid.mw-max { max-width: var(--eye-max) !important; }
h2 { font-size: clamp(1.65rem, 0.8rem + 6vw, 5.5rem); }

/* klantlogo's: elk formaat netjes in het vierkante vak (in het design waren het kleine svg's) */
.about-client-logo { aspect-ratio: 1; }
/* het design zette tot 30 px wit rond elk logo: nu 10 px (een vaste waarde, want een % rekent met de breedte van de hele rij) */
span.about-client-logo.about-client-logo { padding: 10px !important; }
.about-client-logo img { width: 100%; height: 100%; object-fit: contain; }

/* pagina's buiten de startpagina: de widgets van Mendeleev in de stijl van het design */
.eye-page { color: #fff; counter-reset: ew; --ew-pad: 1.25rem; }
@media (min-width: 768px) { .eye-page { --ew-pad: 2.5rem; } }
.eye-page-hero { padding-top: calc(var(--site-nav-height, 80px) + 64px); padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.2); }
.eye-page-hero h1 { font-size: clamp(52px, 10vw, 156px); }
.eye-page-intro { max-width: 760px; font-size: clamp(18px, 2vw, 24px); }
.eye-page-body { padding-bottom: clamp(64px, 10vw, 140px); }

/* elke widget: ruimte en een dunne lijn erboven, zoals onder de menubalk */
.ew { position: relative; padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(24px, 3vw, 40px); }
.ew + .ew::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.12); }
.ew-hl + .ew::before, .ew + .ew-hl::before, .ew-img + .ew::before, .ew + .ew-img::before { display: none; }
.ew-h { font-weight: 700; line-height: .95; margin: 0 0 24px; letter-spacing: -.01em; font-size: clamp(1.6rem, 0.8rem + 3.6vw, 4.2rem); }
.ew-idx { display: block; font-size: 14px; letter-spacing: .12em; opacity: .55; margin-bottom: 18px; }
.ew-idx::before { counter-increment: ew; content: "[ " counter(ew, decimal-leading-zero) " ]"; }
.ew-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 14px; margin: 0 0 18px; opacity: .7; }
.ew-eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-right: 10px; vertical-align: 1px; }
.ew-rich { font-weight: 300; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; }
.ew-rich-lg { font-size: clamp(20px, 2vw, 30px); line-height: 1.35; }
.ew-rich a { color: #fff; }
.ew-rich h3 { font-family: var(--eye-heading); font-weight: 700; font-size: 22px; margin: 32px 0 12px; }
.ew-cap { margin-top: 14px; font-size: 14px; letter-spacing: .04em; opacity: .7; }
.ew-cap::before { content: "\21B3"; margin-right: 8px; }
.ew-btn { display: inline-flex; align-items: center; gap: 12px; }
.ew-btn svg { transition: transform .3s; }
.ew-btn:hover svg { transform: translateX(4px); }

/* een foto als het beeld van een drone: kadertjes in de hoeken */
.ew-frame { position: relative; overflow: hidden; border-radius: 8px; background: #111; }
.ew-frame img, .ew-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ew-frame::after { content: ""; position: absolute; inset: 14px; pointer-events: none; opacity: .85;
  background:
    linear-gradient(#fff, #fff) left top / 22px 1px, linear-gradient(#fff, #fff) left top / 1px 22px,
    linear-gradient(#fff, #fff) right top / 22px 1px, linear-gradient(#fff, #fff) right top / 1px 22px,
    linear-gradient(#fff, #fff) left bottom / 22px 1px, linear-gradient(#fff, #fff) left bottom / 1px 22px,
    linear-gradient(#fff, #fff) right bottom / 22px 1px, linear-gradient(#fff, #fff) right bottom / 1px 22px;
  background-repeat: no-repeat; }
.ew-par img { transform: scale(1.14); will-change: transform; }

/* tekst met foto */
.ew-it .ew-frame { aspect-ratio: 4 / 5; }
@media (min-width: 992px) { .wg-it-rev .ew-it-media { order: 2; } .ew-it:not(.wg-it-rev) .ew-it-txt { margin-left: 8.333%; } .wg-it-rev .ew-it-txt { margin-right: 8.333%; } }

/* grote foto: van rand tot rand */
.ew-img .ew-frame { border-radius: 0; height: clamp(320px, 78vh, 900px); }
.ew-img.wg-img-narrow .ew-img-fig { max-width: 1100px; margin: 0 auto; padding: 0 var(--ew-pad); }
.ew-img.wg-img-narrow .ew-frame { border-radius: 8px; height: auto; aspect-ratio: 16 / 9; }
.ew-img.wg-img-narrow .ew-cap { padding: 0; }

/* twee foto's: de tweede iets lager */
.ew-gal2-grid { display: grid; gap: 24px; }
.ew-gal2-grid .ew-frame { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .ew-gal2-grid { grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); } .ew-gal2-grid figure:nth-child(2) { margin-top: clamp(60px, 12vw, 200px); } }

/* drie foto's: de middelste groter, op gsm schuiven */
.ew-gal3-row { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ew-pad); scrollbar-width: none; }
.ew-gal3-row::-webkit-scrollbar { display: none; }
.ew-gal3-row figure { scroll-snap-align: start; }
.ew-gal3-row .ew-frame { aspect-ratio: 3 / 4; }
@media (min-width: 992px) { .ew-gal3-row { grid-auto-flow: row; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: clamp(24px, 3vw, 48px); overflow: visible; } .ew-gal3-row figure:nth-child(2) .ew-frame { aspect-ratio: 4 / 5; } }

/* gecentreerde titel, met het logo erachter zoals in de hero */
.ew-hl { padding-bottom: clamp(40px, 6vw, 80px); text-align: center; overflow: hidden; }
.ew-hl-logo { position: absolute; left: 50%; top: 55%; width: min(900px, 110vw); transform: translate(-50%, -50%); opacity: .22; pointer-events: none; }
.ew-hl-in { position: relative; max-width: 1200px; margin: 0 auto; }
.ew-hl .ew-eyebrow::before { display: none; }
.ew-hl-t { font-weight: 700; line-height: .95; font-size: clamp(2.6rem, 1.1rem + 6.6vw, 7.8rem); margin: 0; text-wrap: balance; }
.ew-outline { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.ew-hl-s { max-width: 46ch; margin: 28px auto 0; font-weight: 300; font-size: clamp(17px, 1.4vw, 22px); }

/* oproep */
.ew-cta-box { position: relative; display: flex; flex-direction: column; gap: 32px; padding: clamp(32px, 5vw, 72px); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%), #050505; }
.ew-cta-txt { max-width: 760px; }
.ew-cta-txt p { font-size: clamp(17px, 1.4vw, 22px); }
.ew-cta-btn { align-self: flex-start; font-size: clamp(18px, 1.4vw, 22px); }
@media (min-width: 992px) { .ew-cta-box { flex-direction: row; align-items: flex-end; justify-content: space-between; } .ew-cta-btn { align-self: flex-end; } }

/* foto's met verhaal: een filmstrook die meeschuift */
.ew-story { overflow: hidden; }
.ew-strip { margin-top: clamp(40px, 6vw, 80px); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ew-pad); }
.ew-strip::-webkit-scrollbar { display: none; }
.ew-strip-row { display: flex; gap: 16px; padding: 0 max(var(--ew-pad), calc((100vw - var(--eye-max)) / 2 + var(--ew-pad))); width: max-content; will-change: transform; }
.ew-strip-ph { width: 78vw; scroll-snap-align: start; }
.ew-strip-ph .ew-frame { aspect-ratio: 4 / 3; }
.ew-strip-ph .ew-cap::before { content: ""; }
@media (min-width: 992px) { .ew-strip.is-pinned { overflow: visible; } .ew-strip-ph { width: 34vw; } .ew-strip-row { gap: 24px; } }

/* video: zoals de hero, met de afspeelknop rechtsonder */
.ew-video-frame { aspect-ratio: 16 / 9; }
.ew-video.wg-img-narrow figure { max-width: 1100px; margin: 0 auto; }
.ew-play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.ew-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.ew-play:hover img { transform: scale(1.03); filter: brightness(.85); }
.ew-play-ic { position: absolute; right: 44px; bottom: 44px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; }
.ew-play-lbl { position: absolute; left: 46px; bottom: 58px; color: #fff; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.ew-hud { position: absolute; z-index: 2; top: 40px; color: #fff; font-size: 13px; letter-spacing: .14em; pointer-events: none; }
.ew-hud-rec { left: 46px; display: flex; align-items: center; gap: 8px; }
.ew-hud-rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: ew-blink 1.4s steps(2, start) infinite; }
.ew-hud-res { right: 46px; }
@media (max-width: 767.98px) { .ew-frame::after { inset: 10px; } .ew-hud { top: 22px; font-size: 11px; } .ew-hud-rec { left: 28px; } .ew-hud-res { right: 28px; } .ew-play-lbl { display: none; } .ew-play-ic { right: 24px; bottom: 24px; width: 40px; height: 40px; } }
@keyframes ew-blink { to { visibility: hidden; } }
.ew-video-frame > video { position: absolute; inset: 0; }

/* binnenkomen bij het scrollen (enkel met javascript) */
.ew-js .ew-rv { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.ew-js .ew-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ew-js .ew-rv { opacity: 1; transform: none; transition: none; } .ew-par img { transform: none; } .ew-hud-rec i { animation: none; } }

/* talen in de menubalk */
.eye-langs { display: flex; gap: 4px; }
.eye-langs a { color: rgba(255,255,255,.55); text-decoration: none; text-transform: uppercase; font-size: 16px; letter-spacing: .08em; padding: 4px 6px; }
.eye-langs a:hover, .eye-langs a[aria-current] { color: #fff; }
.eye-langs a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }

/* team: altijd vierkant, het focuspunt uit de mediabibliotheek bepaalt wat zichtbaar blijft */
.about-team-ph { aspect-ratio: 1; }
.about-team-ph img { position: absolute; inset: 0; }

/* ---------- het logo in drie delen: linkerboog, de drone (X) en rechterboog ---------- */
.eye-logo { position: relative; display: block; }
.eye-logo img { position: absolute; display: block; max-width: none; height: auto; }
.eye-logo-big { aspect-ratio: 2655 / 1134; }
.eye-logo-big .el-l { left: 2.147%; top: 15.785%; width: 31.224%; }
.eye-logo-big .el-x { left: 34.275%; top: 23.721%; width: 33.71%; }
.eye-logo-big .el-r { left: 66.139%; top: 15.785%; width: 31.186%; }
.eye-logo-sm { aspect-ratio: 500 / 214; width: clamp(80px, 10vw + 1rem, 125px); }
.eye-logo-sm img.el-l, .site-nav .logo .eye-logo-sm img.el-l { left: 1.6%; top: 14.486%; width: 32.2%; }
.eye-logo-sm img.el-x, .site-nav .logo .eye-logo-sm img.el-x { left: 33.8%; top: 22.43%; width: 34.6%; }
.eye-logo-sm img.el-r, .site-nav .logo .eye-logo-sm img.el-r { left: 65.6%; top: 14.486%; width: 32.2%; }
/* in de menubalk: de drone draait een kwartslag, het oog knippert even open */
.site-nav .eye-logo-sm img { transition: transform .7s cubic-bezier(.3,1.4,.4,1); }
.site-nav .navbar-brand:hover .eye-logo-sm img.el-x, .site-nav .navbar-brand:focus-visible .eye-logo-sm img.el-x { transform: rotate(90deg); }
.site-nav .navbar-brand:hover .eye-logo-sm img.el-l, .site-nav .navbar-brand:focus-visible .eye-logo-sm img.el-l { transform: translateX(-10%); }
.site-nav .navbar-brand:hover .eye-logo-sm img.el-r, .site-nav .navbar-brand:focus-visible .eye-logo-sm img.el-r { transform: translateX(10%); }
.site-nav .eye-logo-sm.is-landed img.el-x { animation: eye-land 1s cubic-bezier(.2,.8,.2,1); }
@keyframes eye-land { 0% { transform: translateY(-260%) scale(.5) rotate(-180deg); } 70% { transform: translateY(6%) rotate(8deg); } 100% { transform: none; } }

/* ---------- intro: het oog opent, de drone draait op en vliegt naar de menubalk (één keer per bezoek) ---------- */
.eye-intro { display: none; }
.eye-intro-on .eye-intro { position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: #000; cursor: pointer; animation: eye-intro-out .5s ease 1.9s forwards; }
.eye-intro .eye-logo-big { width: min(78vw, 820px); }
.eye-intro .el-l { animation: eye-arc-l 1.1s cubic-bezier(.2,.8,.2,1) both; }
.eye-intro .el-r { animation: eye-arc-r 1.1s cubic-bezier(.2,.8,.2,1) both; }
.eye-intro .el-x { animation: eye-spin 1.1s cubic-bezier(.3,.7,.2,1) .15s both, eye-lift .7s cubic-bezier(.6,0,.8,.4) 1.3s forwards; }
.eye-intro-alt { color: #fff; font-size: 14px; letter-spacing: .2em; opacity: 0; animation: eye-fade .4s ease .5s forwards; }
.eye-intro.is-done { animation: eye-intro-out .35s ease forwards !important; }
@keyframes eye-arc-l { from { opacity: 0; transform: translateX(40%) scaleY(.15); } to { opacity: 1; transform: none; } }
@keyframes eye-arc-r { from { opacity: 0; transform: translateX(-40%) scaleY(.15); } to { opacity: 1; transform: none; } }
@keyframes eye-spin { 0% { opacity: 0; transform: scale(.4) rotate(-540deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes eye-lift { 0% { transform: none; } 25% { transform: translateY(6%); } 100% { transform: translateY(-140vh) scale(.35); opacity: .6; } }
@keyframes eye-fade { to { opacity: .7; } }
@keyframes eye-intro-out { to { opacity: 0; visibility: hidden; } }

/* ---------- hoogtemeter: een drone vliegt mee aan de rand ---------- */
.eye-alt { display: none; }
@media (min-width: 992px) {
  .eye-alt { position: fixed; z-index: 20; right: 10px; top: calc(50% - 22vh + 40px); height: 44vh; width: 22px; display: block; pointer-events: none; opacity: 0; transition: opacity .5s; }
  .eye-alt.is-on { opacity: 1; }
  /* wit op zwart, zwart op wit: de meter keert vanzelf om boven een witte sectie */
  .eye-alt { mix-blend-mode: difference; }
  .eye-alt-scale { background: repeating-linear-gradient(to top, #fff 0 1px, transparent 1px 10%); border-left-color: #fff; opacity: .8; }
  .eye-alt-scale { position: absolute; inset: 0 10px; background: repeating-linear-gradient(to top, rgba(255,255,255,.5) 0 1px, transparent 1px 10%); border-left: 1px solid rgba(255,255,255,.35); }
  .eye-alt-drone { position: absolute; left: -6px; width: 34px; bottom: 0; transform: translateY(50%); }
  .eye-alt-drone img { display: block; width: 100%; height: auto; animation: eye-hover 2.4s ease-in-out infinite; }
  .eye-alt-val { position: absolute; left: 50%; top: calc(100% + 26px); transform: translateX(-50%); color: #fff; font-size: 10px; line-height: 1.3; letter-spacing: .08em; text-align: center; white-space: nowrap; mix-blend-mode: difference; }
  .eye-alt::before { content: "ALT"; position: absolute; left: 50%; bottom: calc(100% + 28px); transform: translateX(-50%); color: #fff; font-size: 10px; letter-spacing: .08em; white-space: nowrap; opacity: .7; mix-blend-mode: difference; }
}
@keyframes eye-hover { 50% { transform: translateY(-3px) rotate(3deg); } }

/* ---------- video: zoeker ---------- */
.ew-vf { padding-top: 0; height: 170vh; }
.ew-vf::before { display: none; }
.ew-vf-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; color: #fff; background: #000; }
.ew-vf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ew-vf-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%), linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 45%); }
.ew-vf-hud { position: absolute; inset: calc(var(--site-nav-height, 80px) + 16px) clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px); font-size: 13px; letter-spacing: .14em; }
.ew-vf-c { position: absolute; width: 34px; height: 34px; border: 0 solid #fff; }
.ew-vf-c.tl { left: 0; top: 0; border-width: 1px 0 0 1px; } .ew-vf-c.tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.ew-vf-c.bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .ew-vf-c.br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.ew-vf-rec { position: absolute; left: 24px; top: 20px; display: flex; align-items: center; gap: 8px; }
.ew-vf-rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: ew-blink 1.4s steps(2, start) infinite; }
.ew-vf-rec b, .ew-vf-bat b, .ew-vf-alt b, .ew-vf-spd b { font-weight: 400; font-variant-numeric: tabular-nums; }
.ew-vf-bat { position: absolute; right: 24px; top: 20px; display: flex; align-items: center; gap: 8px; }
.ew-vf-cross { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.ew-vf-cross::before, .ew-vf-cross::after { content: ""; position: absolute; background: #fff; }
.ew-vf-cross::before { left: 50%; top: -14px; bottom: -14px; width: 1px; background: linear-gradient(#fff 0 14px, transparent 14px calc(100% - 14px), #fff calc(100% - 14px)); }
.ew-vf-cross::after { top: 50%; left: -14px; right: -14px; height: 1px; background: linear-gradient(90deg, #fff 0 14px, transparent 14px calc(100% - 14px), #fff calc(100% - 14px)); }
.ew-vf-alt, .ew-vf-spd { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; background: rgba(0,0,0,.25); }
.ew-vf-alt { left: 24px; } .ew-vf-spd { right: 24px; }
.ew-vf-alt b, .ew-vf-spd b { font-size: 22px; letter-spacing: .04em; }
.ew-vf-alt small, .ew-vf-spd small { font-size: 10px; opacity: .75; }
.ew-vf-compass { position: absolute; left: 50%; top: 18px; width: min(340px, 50%); transform: translateX(-50%); overflow: hidden; white-space: nowrap; font-size: 11px; opacity: .85; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.ew-vf-compass::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 6px; background: #fff; }
.ew-vf-compass-track { display: inline-block; padding-bottom: 8px; will-change: transform; }
.ew-vf-txt { position: absolute; left: clamp(40px, 6vw, 96px); right: clamp(40px, 6vw, 96px); bottom: clamp(48px, 7vw, 96px); max-width: 900px; }
.ew-vf-title { font-weight: 700; line-height: .95; font-size: clamp(2.4rem, 1.1rem + 5.5vw, 6.6rem); margin: 0 0 16px; }
.ew-vf-title .ch { opacity: 0; } .ew-vf-title .ch.on { opacity: 1; }
.ew-vf-title.typing::after { content: ""; display: inline-block; width: .5em; height: .08em; margin-left: .05em; background: #fff; animation: ew-blink 1s steps(2, start) infinite; }
.ew-vf-p { max-width: 46ch; font-weight: 300; font-size: clamp(16px, 1.3vw, 20px); margin: 0 0 16px; }
.ew-vf-loc { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin: 0; }
@media (max-width: 767.98px) {
  .ew-vf-alt, .ew-vf-spd { top: 38%; padding: 6px; } .ew-vf-alt b, .ew-vf-spd b { font-size: 16px; } .ew-vf-alt { left: 12px; } .ew-vf-spd { right: 12px; }
  .ew-vf-cross { width: 44px; height: 44px; margin: -22px 0 0 -22px; top: 38%; }
  .ew-vf-compass { display: none; } .ew-vf-rec { left: 14px; top: 14px; } .ew-vf-bat { right: 14px; top: 14px; }
  .ew-vf-txt { left: 28px; right: 28px; bottom: 52px; }
}

/* ---------- video: opstijgen ---------- */
.ew-to { --p: 0; padding-top: 0; height: 260vh; }
.ew-to::before { display: none; }
.ew-to-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ew-to-media { position: absolute; inset: 0; clip-path: ellipse(calc(17% + var(--p) * 64%) calc(11% + var(--p) * 80%) at 50% 50%); }
.ew-to-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.35 - var(--p) * .35)); }
.ew-to-arc { position: absolute; top: 50%; height: calc(30% + var(--p) * 60%); width: auto; opacity: calc(1 - var(--p) * 1.6); pointer-events: none; }
.ew-to-arc-l { right: calc(50% + 16% + var(--p) * 40%); transform: translateY(-50%); }
.ew-to-arc-r { left: calc(50% + 16% + var(--p) * 40%); transform: translateY(-50%); }
.ew-to-title { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .3em; max-width: 92vw; margin: 0; font-weight: 700; line-height: 1; font-size: clamp(1.8rem, 0.6rem + 3.4vw, 4.6rem); text-transform: uppercase; text-align: center; color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.35); }
.ew-to-title span { white-space: nowrap; }
.ew-to-l { transform: translateX(calc(var(--p) * -12vw)); }
.ew-to-r { transform: translateX(calc(var(--p) * 12vw)); }
.ew-to-text { position: absolute; z-index: 2; left: 50%; bottom: clamp(48px, 8vh, 96px); width: min(560px, 86vw); transform: translateX(-50%); margin: 0; text-align: center; font-weight: 300; font-size: clamp(16px, 1.4vw, 22px); color: #fff; opacity: calc((var(--p) - .7) * 4); text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.ew-to-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fff; opacity: calc(.7 - var(--p) * 3); }
@media (max-width: 767.98px) { .ew-to-title { flex-direction: column; align-items: center; } .ew-to-l { transform: translateY(calc(var(--p) * -6vh)); } .ew-to-r { transform: translateY(calc(var(--p) * 6vh)); } .ew-to-media { clip-path: ellipse(calc(30% + var(--p) * 60%) calc(9% + var(--p) * 80%) at 50% 50%); } .ew-to-arc-l { right: calc(50% + 28% + var(--p) * 40%); } .ew-to-arc-r { left: calc(50% + 28% + var(--p) * 40%); } .ew-to-arc { height: calc(22% + var(--p) * 40%); } }

/* ---------- video: vlieglog ---------- */
.ew-fl-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ew-fl-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .ew-fl-item:first-child { grid-column: 1 / -1; } }
@media (min-width: 992px) {
  .ew-fl-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(160px, 15vw, 260px); gap: 16px; }
  .ew-fl-item:first-child { grid-column: span 2; grid-row: span 2; }
  .ew-fl-grid[data-count="3"] .ew-fl-item:nth-child(n+2) { grid-column: span 2; }
  .ew-fl-grid[data-count="4"] .ew-fl-item:nth-child(4) { grid-column: span 2; }
  .ew-fl-grid[data-count="6"] .ew-fl-item:nth-child(6) { grid-column: 1 / -1; }
  .ew-fl-grid[data-count="2"] .ew-fl-item:nth-child(2) { grid-column: span 2; grid-row: span 2; }
  .ew-fl-item { aspect-ratio: auto !important; }
}
.ew-fl-item { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #111; color: #fff; text-align: left; cursor: pointer; }
.ew-fl-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .4s; filter: grayscale(.6) brightness(.8); }
.ew-fl-item:hover video, .ew-fl-item.is-playing video { transform: scale(1.04); filter: none; }
.ew-fl-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 50%); pointer-events: none; }
.ew-fl-top, .ew-fl-dur, .ew-fl-bot, .ew-fl-play { position: absolute; z-index: 1; }
.ew-fl-top { left: 16px; top: 14px; display: flex; gap: 14px; font-size: 12px; letter-spacing: .14em; }
.ew-fl-top span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #fff; vertical-align: 1px; }
.ew-fl-item.is-playing .ew-fl-top span:first-child::before { background: #ff3b30; animation: ew-blink 1.4s steps(2, start) infinite; }
.ew-fl-dur { right: 16px; top: 12px; padding: 2px 8px; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; font-size: 12px; letter-spacing: .08em; }
.ew-fl-bot { left: 16px; right: 70px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.ew-fl-bot b { font-family: var(--eye-heading); font-size: clamp(16px, 1.3vw, 22px); line-height: 1.1; }
.ew-fl-item:first-child .ew-fl-bot b { font-size: clamp(20px, 2vw, 34px); }
.ew-fl-bot small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ew-fl-play { right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background: #fff; transition: transform .3s; }
.ew-fl-item:hover .ew-fl-play { transform: scale(1.1); }
.ew-fl-dlg { width: min(1280px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 0; background: transparent; color: #fff; }
.ew-fl-dlg::backdrop { background: rgba(0,0,0,.92); }
.ew-fl-dlg-bar, .ew-fl-dlg-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 13px; letter-spacing: .12em; }
.ew-fl-dlg video { display: block; width: 100%; max-height: 74vh; background: #000; border-radius: 8px; }
.ew-fl-dlg button { padding: 6px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; background: none; color: #fff; }
.ew-fl-dlg-nav b { font-family: var(--eye-heading); font-weight: 700; font-size: 18px; letter-spacing: 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .eye-intro { display: none !important; }
  .eye-alt-drone img, .navbar-brand .eye-logo-sm img { animation: none !important; transition: none !important; }
  .ew-vf, .ew-to { height: auto; }
  .ew-vf-stage, .ew-to-stage { position: relative; }
  .ew-to { --p: 1 !important; }
}

/* ---------- formulier: velden als regels op zwart, labels in mono, de glazen knop ---------- */
.ew-form-intro { font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; margin: 0 0 20px; }
.ew-form-hud { display: flex; align-items: center; gap: 10px; margin: 32px 0 0; font-size: 12px; letter-spacing: .2em; opacity: .7; }
.ew-form-hud i { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 4px rgba(52,199,89,.18); animation: ew-blink 1.6s steps(2, start) infinite; }
.ew-form-box { position: relative; padding: clamp(24px, 3vw, 44px); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 50%), #050505; }
.ew-form-box::before, .ew-form-box::after { content: ""; position: absolute; width: 22px; height: 22px; border: 0 solid #fff; pointer-events: none; }
.ew-form-box::before { left: 10px; top: 10px; border-width: 1px 0 0 1px; }
.ew-form-box::after { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; }
.mf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.mf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mf-full { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .mf-grid { grid-template-columns: 1fr; } }
.mf-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.mf-req { color: #fff; margin-left: 2px; }
.mf-help { margin: 0; font-size: 13px; opacity: .6; }
.ew-form-box input:not([type=checkbox]):not([type=radio]), .ew-form-box select, .ew-form-box textarea {
  width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); border-radius: 0; background: transparent; color: #fff;
  font: inherit; font-size: 18px; font-weight: 300; outline: none; transition: border-color .3s; -webkit-appearance: none; appearance: none; color-scheme: dark; }
.ew-form-box textarea { min-height: 130px; resize: vertical; }
.ew-form-box select { background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.ew-form-box select option { background: #111; color: #fff; }
.ew-form-box input:focus, .ew-form-box select:focus, .ew-form-box textarea:focus { border-bottom-color: #fff; }
.mf-field:focus-within .mf-label { color: #fff; }
.mf-choices { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.mf-choice { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 300; cursor: pointer; }
.mf-choice input { width: 18px; height: 18px; margin-top: 3px; accent-color: #fff; flex: none; }
.mf-consent a { color: #fff; }
.mf-err { margin: 0; font-size: 13px; color: #ff6b5f; }
.mf-field.is-err input, .mf-field.is-err select, .mf-field.is-err textarea { border-bottom-color: #ff6b5f; }
.mf-note { margin: 20px 0 0; padding: 10px 14px; border: 1px solid #ff6b5f; border-radius: 6px; color: #ff6b5f; font-size: 14px; }
.mf-actions { margin-top: 30px; }
.mf-submit { display: inline-flex; align-items: center; gap: 12px; padding: 10px 26px; border-radius: var(--bs-border-radius, 6px); color: #fff; font: inherit; font-size: 18px; cursor: pointer;
  background: rgba(255,255,255,.12); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,.45); border-right-color: rgba(255,255,255,.2); border-bottom-color: rgba(255,255,255,.2);
  box-shadow: inset 0 10px 10px rgba(255,255,255,.2), inset 0 -5px 10px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.2);
  background-image: linear-gradient(135deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.1) 100%); transition: opacity .2s; }
.mf-submit::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.mf-submit:hover { opacity: .9; }
.mf-submit:disabled { opacity: .6; cursor: progress; }
.mf-done { outline: none; }
.mf-done-h { font-family: var(--eye-heading); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; margin: 0 0 14px; }
.mf-done-h::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 14px; border: 1px solid #fff; border-radius: 50%; font-size: 18px; vertical-align: 6px; }
.mf-done-body { font-weight: 300; font-size: 18px; }

/* menubalk: de links en de knop iets kleiner, de naam naast het logo iets groter (meer evenwicht) */
@media (min-width: 992px) {
  .site-nav .navbar-nav .nav-link { font-size: 17px !important; letter-spacing: .02em; }
  .site-nav .btn-glass { font-size: 17px; }
}
.site-nav .logo .ff-heading { font-size: clamp(20px, 1.2rem + .6vw, 30px); line-height: 1; }
.eye-langs a { font-size: 14px; }

/* footer: iets kleinere tekst, in lijn met de menubalk */
.site-footer { font-size: 16px; }
.site-footer p, .site-footer a, .site-footer .nav a { font-size: 16px; }
.site-footer .meta p, .site-footer .meta a { font-size: 14px; }
.site-footer .nav-social .btn { font-size: 14px; }

/* ---------- hero: het oog leeft. De bogen zijn de oogleden, de drone is de pupil ---------- */
#hero .eye-live { display: block; }
.eye-live .el-x { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .9s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.eye-live .el-l, .eye-live .el-r { transition: transform .11s cubic-bezier(.5,0,.75,0); transform-origin: 50% 50%; }
.eye-live.is-blink .el-l, .eye-live.is-blink .el-r { transform: scaleY(.04); }
.eye-live.is-blink .el-x { transform: translate(var(--lx, 0px), var(--ly, 0px)) scaleY(.15); transition-duration: .11s; }
#hero h1.is-refocus { animation: eye-refocus .75s cubic-bezier(.3,.6,.3,1); }
@keyframes eye-refocus { 0% { filter: blur(0); } 25% { filter: blur(3px); } 100% { filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .eye-live .el-x, .eye-live .el-l, .eye-live .el-r { transition: none; } #hero h1.is-refocus { animation: none; } }