<!DOCTYPE html>

<head>

<title>The Circle – Mike Bekos</title>

<style>

*{margin:0;padding:0;box-sizing:border-box}

:root{

--black:#080808;--off:#0f0f0f;--gold:#c9a84c;--gold2:#a8893d;

--text:#ece9e2;--muted:#6b6960;--border:rgba(201,168,76,0.12);

--font:'Georgia',serif;--sans:'Helvetica Neue',Arial,sans-serif;

}

html{scroll-behavior:smooth}

body{background:var(--black);color:var(--text);font-family:var(--sans);overflow-x:hidden}

/* NAV */

nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.75rem 5rem;display:flex;justify-content:space-between;align-items:center}

nav::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,8,.9),transparent);pointer-events:none}

.nav-logo{font-family:var(--font);font-size:1rem;letter-spacing:.2em;color:var(--gold);text-decoration:none;text-transform:uppercase;position:relative}

.nav-links{display:flex;gap:3rem;list-style:none;position:relative}

.nav-links a{color:var(--muted);text-decoration:none;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;transition:color .4s}

.nav-links a:hover{color:var(--text)}

/* HERO — full bleed split */

.hero{height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}

.hero-left{display:flex;flex-direction:column;justify-content:flex-end;padding:5rem 4rem 5rem 5rem;position:relative;z-index:2}

.hero-right{position:relative;overflow:hidden}

.hero-portrait{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(15%) brightness(.8);transition:transform 8s ease}

.hero:hover .hero-portrait{transform:scale(1.03)}

.hero-right::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(8,8,8,.6) 0%,transparent 40%)}

.hero-eyebrow{font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}

.hero-eyebrow::before{content:'';display:block;width:32px;height:.5px;background:var(--gold)}

.hero-title{font-family:var(--font);font-size:clamp(3.5rem,5.5vw,6rem);line-height:.9;font-weight:400;letter-spacing:-.03em;margin-bottom:2rem}

.hero-title em{font-style:italic;color:var(--gold);display:block}

.hero-desc{color:var(--muted);font-size:.85rem;line-height:1.8;max-width:400px;margin-bottom:3rem}

.hero-actions{display:flex;gap:1.5rem;align-items:center}

.btn-outline{padding:.8rem 2.25rem;border:.5px solid rgba(201,168,76,.5);color:var(--gold);text-decoration:none;font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;transition:all .35s}

.btn-outline:hover{border-color:var(--gold);background:var(--gold);color:var(--black)}

.btn-text{color:var(--muted);text-decoration:none;font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;transition:color .3s;display:flex;align-items:center;gap:.6rem}

.btn-text span{transition:transform .3s}

.btn-text:hover{color:var(--text)}

.btn-text:hover span{transform:translateX(4px)}

.hero-name{position:absolute;bottom:5rem;right:3rem;text-align:right;z-index:3}

.hero-name .name{font-family:var(--font);font-size:1rem;color:var(--text);letter-spacing:.05em}

.hero-name .role{font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-top:.3rem}

.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;z-index:3}

.hero-scroll span{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

.hero-scroll::after{content:'';display:block;width:.5px;height:40px;background:linear-gradient(to bottom,var(--muted),transparent)}

/* STRIP */

.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:.5px solid var(--border);border-bottom:.5px solid var(--border)}

.strip-item{padding:2.25rem 3rem;border-right:.5px solid var(--border);display:flex;flex-direction:column;gap:.5rem}

.strip-item:last-child{border-right:none}

.strip-label{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

.strip-val{font-size:.9rem;color:var(--text);letter-spacing:.02em}

/* WORK */

.work-section{padding:8rem 5rem}

.work-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4rem}

.work-header-left{}

.section-eye{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem;display:flex;align-items:center;gap:.75rem}

.section-eye::before{content:'';display:block;width:28px;height:.5px;background:var(--gold)}

.section-title{font-family:var(--font);font-size:2.5rem;font-weight:400;line-height:1}

.work-count{font-size:.7rem;letter-spacing:.2em;color:var(--muted)}

/* GRID */

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}

.wi{position:relative;overflow:hidden;cursor:pointer;background:#0a0a0a}

.wi.span2{grid-column:span 2}

.wi.tall{grid-row:span 2}

.wi img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.7);transition:filter .6s ease,transform .8s ease;aspect-ratio:unset;min-height:280px}

.wi.span2 img{min-height:320px}

.wi.tall img{min-height:600px}

.wi:hover img{filter:brightness(.95);transform:scale(1.04)}

.wi-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.1) 55%,transparent 100%);transition:opacity .4s}

.wi-client{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;transform:translateY(4px);transition:transform .4s}

.wi-title{font-family:var(--font);font-size:1.1rem;color:#fff;transform:translateY(4px);transition:transform .4s .04s}

.wi-play{width:48px;height:48px;border-radius:50%;border:.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;margin-top:1rem;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}

.wi-play svg{width:13px;height:13px;fill:#fff;margin-left:3px}

.wi:hover .wi-client,

.wi:hover .wi-title{transform:translateY(0)}

.wi:hover .wi-play{opacity:1;transform:translateY(0)}

.wi-tag{position:absolute;top:1.25rem;right:1.25rem;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;padding:.3rem .65rem;border:.5px solid rgba(201,168,76,.35);color:var(--gold);background:rgba(8,8,8,.75)}

/* LIGHTBOX */

.lb{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}

.lb.on{opacity:1;pointer-events:all}

.lb-box{position:relative;width:88vw;max-width:1200px;aspect-ratio:16/9}

.lb-box iframe{width:100%;height:100%;border:none}

.lb-close{position:absolute;top:-3.5rem;right:0;background:none;border:none;color:var(--muted);font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:color .3s;font-family:var(--sans)}

.lb-close:hover{color:#fff}

.lb-label{position:absolute;bottom:-2.5rem;left:0;font-family:var(--font);font-size:.9rem;color:var(--muted);font-style:italic}

/* STATS */

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:.5px solid var(--border);border-bottom:.5px solid var(--border)}

.stat{padding:3.5rem;text-align:center;border-right:.5px solid var(--border)}

.stat:last-child{border-right:none}

.stat-n{font-family:var(--font);font-size:3.5rem;color:var(--gold);line-height:1;letter-spacing:-.02em}

.stat-l{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}

/* HYBRID */

.hybrid{background:var(--off);padding:9rem 5rem}

.hybrid-inner{display:grid;grid-template-columns:5fr 4fr;gap:8rem;align-items:center}

.hybrid-label{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem}

.hybrid-label::before{content:'';display:block;width:28px;height:.5px;background:var(--gold)}

.hybrid-h{font-family:var(--font);font-size:clamp(2.2rem,3.5vw,3.5rem);line-height:1.05;font-weight:400;margin-bottom:1.75rem}

.hybrid-h em{font-style:italic;color:var(--gold)}

.hybrid-p{color:var(--muted);font-size:.88rem;line-height:1.85;margin-bottom:2.5rem}

.hybrid-list{list-style:none;display:flex;flex-direction:column;gap:1.1rem}

.hybrid-list li{font-size:.82rem;color:var(--muted);line-height:1.65;display:flex;gap:1rem;align-items:flex-start}

.hybrid-list li::before{content:'';display:block;width:18px;height:.5px;background:var(--gold);margin-top:.55rem;flex-shrink:0}

.hybrid-visual{position:relative}

.hybrid-img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;filter:brightness(.8)}

.hybrid-pill{position:absolute;bottom:2rem;left:-2rem;background:var(--gold);color:var(--black);padding:1.25rem 1.75rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;line-height:1.7}

/* CLIENTS */

.clients-section{padding:8rem 5rem}

.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);border:.5px solid var(--border)}

.ci{padding:2rem;border:.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);transition:color .4s,background .4s;text-align:center}

.ci:hover{color:var(--gold);background:rgba(201,168,76,.03)}

/* CONTACT */

.contact{background:var(--off);padding:9rem 5rem}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:end}

.contact-h{font-family:var(--font);font-size:clamp(3rem,5vw,5rem);line-height:.92;font-weight:400;letter-spacing:-.02em}

.contact-h em{font-style:italic;color:var(--gold)}

.contact-right{}

.contact-p{color:var(--muted);font-size:.88rem;line-height:1.8;margin-bottom:2.5rem}

.contact-email{font-family:var(--font);font-size:1.3rem;color:var(--gold);text-decoration:none;display:block;border-bottom:.5px solid rgba(201,168,76,.3);padding-bottom:.75rem;margin-bottom:2rem;transition:color .3s}

.contact-email:hover{color:#fff}

.contact-tagline{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* FOOTER */

footer{padding:2.5rem 5rem;display:flex;justify-content:space-between;align-items:center;border-top:.5px solid var(--border)}

.f-logo{font-family:var(--font);font-size:.85rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}

.f-links{display:flex;gap:2.5rem}

.f-links a{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .3s}

.f-links a:hover{color:var(--gold)}

.f-copy{font-size:.6rem;color:var(--muted);letter-spacing:.1em}

/* FADE */

.f{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}

.f.v{opacity:1;transform:none}

@media(max-width:900px){

nav{padding:1.25rem 1.5rem}

.nav-links{display:none}

.hero{grid-template-columns:1fr;height:auto}

.hero-right{height:60vw}

.hero-left{padding:7rem 1.5rem 3rem}

.strip{grid-template-columns:repeat(2,1fr)}

.strip-item{border-bottom:.5px solid var(--border)}

.work-section,.hybrid,.clients-section,.contact{padding:5rem 1.5rem}

.work-grid{grid-template-columns:1fr;gap:2px}

.wi.span2,.wi.tall{grid-column:span 1;grid-row:span 1}

.stats{grid-template-columns:repeat(2,1fr)}

.hybrid-inner,.contact-grid{grid-template-columns:1fr;gap:3rem}

.clients-grid{grid-template-columns:repeat(2,1fr)}

footer{flex-direction:column;gap:1.25rem;text-align:center;padding:2rem 1.5rem}

}

</style>

</head>

<body>

<button class="lb-close" onclick="lbClose()">✕   Close</button>

</div>

<nav>

<a href="#" class="nav-logo">The Circle</a>

<li><a href="#hybrid">Hybrid Cinema</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<div class="hero-eyebrow">Director · DOP · Editor · Colorist</div>

Cinematic<br>stories for<br><em>luxury</em> brands

</h1>

<p class="hero-desc">High-end video production for luxury hotels, boutique resorts, tourist boards, and premium travel brands. Every frame is story.</p>

<a href="#contact" class="btn-text">Start a project <span>→</span></a>

</div>

<img class="hero-portrait"

src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?w=900&q=80"

alt="Mike Bekos – Director">

<div class="name">Mike Bekos</div>

<div class="role">Director & Founder</div>

</div>

<div class="hero-scroll"><span>Scroll</span></div>

</div>

<div class="strip-item"><span class="strip-label">Based in</span><span class="strip-val">Athens, Greece</span></div>

<div class="strip-item"><span class="strip-label">Speciality</span><span class="strip-val">Luxury Hospitality</span></div>

<div class="strip-item"><span class="strip-label">Approach</span><span class="strip-val">Story-first Cinema</span></div>

<div class="strip-item"><span class="strip-label">New frontier</span><span class="strip-val">AI Hybrid Production</span></div>

</div>

<div class="section-eye">Selected Work</div>

</div>

<div class="work-count">09 Projects</div>

</div>

<div class="wi-client">Angsana</div>

<div class="wi-title">Angsana Corfu</div>

</div>

<div class="wi-client">Canaves</div>

<div class="wi-title">Canaves Oia</div>

</div>

<div class="wi-client">Myconian</div>

<div class="wi-title">Myconian Ambassador</div>

</div>

<div class="wi-client">EOT / Visit Greece</div>

<div class="wi-title">Visit Greece — Sun</div>

</div>

<div class="wi-tag">Tourism Board</div>

</div>

<div class="wi-client">Amara</div>

<div class="wi-title">Amara Cyprus</div>

</div>

<div class="wi-client">Four Seasons</div>

<div class="wi-title">Four Seasons Cyprus</div>

</div>

<div class="wi-title">7★ Lodges, South Africa</div>

</div>

<div class="wi-tag">International</div>

</div>

</section>

<div class="stat"><div class="stat-n">20+</div><div class="stat-l">Luxury properties</div></div>

<div class="stat"><div class="stat-n">12</div><div class="stat-l">Countries</div></div>

<div class="stat"><div class="stat-n">15+</div><div class="stat-l">Years directing</div></div>

<div class="stat"><div class="stat-n">AI</div><div class="stat-l">Hybrid production</div></div>

</div>

<div class="hybrid-label">Hybrid Cinema</div>

<h2 class="hybrid-h">Where real cinema<br>meets <em>AI production</em></h2>

<p class="hybrid-p">The Circle operates at the intersection of traditional cinematic craft and next-generation AI video production. Seedance 2.0, generative storytelling, and hybrid workflows — delivering content that was previously impossible, at a fraction of the time and budget.</p>

<li>Full cinematic direction — story design, visual language, shot sequencing</li>

<li>AI-generated sequences integrated seamlessly with live footage</li>

<li>Consistent character and brand identity across every frame</li>

<li>Tarantino-grade color grading and editorial precision</li>

<li>Scalable production for campaigns, reels, and social content</li>

</ul>

</div>

<div class="hybrid-pill">New Era<br>in Hotel<br>Video</div>

</div>

</section>

<div class="section-eye f" style="margin-bottom:3rem">Trusted By</div>

<div class="ci">Canaves Oia</div>

<div class="ci">Four Seasons</div>

<div class="ci">Myconian Collection</div>

<div class="ci">Angsana Corfu</div>

<div class="ci">Amara Cyprus</div>

<div class="ci">Branco Mykonos</div>

<div class="ci">Mitsis Hotels</div>

<div class="ci">Oase 7★ Lodges</div>

<div class="ci">Visit Greece / EOT</div>

<div class="ci">Esperia Hotels</div>

<div class="ci">Nespresso Brasil</div>

<div class="ci">Ducato Di Oia</div>

</div>

</section>

<h2 class="contact-h">Let's build<br>something<br><em>remarkable</em></h2>

</div>

<p class="contact-p">Cinematic content for luxury hotels, boutique resorts, tourist boards, wellness destinations, and premium travel brands. From story design to final grade — every detail, considered.</p>

<a href="mailto:mike@thetravelsynergy.com" class="contact-email">mike@thetravelsynergy.com</a>

<div class="contact-tagline">Athens · Greece · Available Worldwide</div>

</div>

</section>

<div class="f-logo">The Circle · Mike Bekos</div>

<a href="https://www.thetravelsynergy.com/generativecinema">Hybrid Cinema</a>

<a href="https://www.hotelieracademy.org/new-era-in-hotel-video-making/">Press</a>

<a href="#contact">Contact</a>

</div>

</footer>

function lbOpen(url,title){

if(!url){alert('Vimeo link coming soon — στείλε μου το link!');return}

document.getElementById('lb-frame').src=url;

document.getElementById('lb-label').textContent=title;

document.getElementById('lb').classList.add('on');

document.body.style.overflow='hidden';

}

function lbClose(){

document.getElementById('lb-frame').src='';

document.getElementById('lb').classList.remove('on');

document.body.style.overflow='';

}

document.getElementById('lb').addEventListener('click',function(e){if(e.target===this)lbClose()});

document.addEventListener('keydown',e=>{if(e.key==='Escape')lbClose()});

const io=new IntersectionObserver(entries=>{

entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('v');io.unobserve(e.target)}})

},{threshold:0.08});

document.querySelectorAll('.f').forEach(el=>{

if(el.getBoundingClientRect().top<window.innerHeight)el.classList.add('v');

else io.observe(el);

});

</script>

</body>

</html>