/* Vertical Flight: site styles. Colours and fonts are variables, edit here. */
:root{
  --bg:#f3f3f5; --ink:#0d0d0f; --muted:#6b6b72; --card:#fff;
  --gold:#c49a5c; --gold-deep:#a8773a; --night:#07080a;
  --f-head:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --f-serif:"Cormorant Garamond",Georgia,serif;
  --radius:28px; --wrap:1380px; --gap:clamp(14px,2.2vw,32px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-head);font-weight:300;line-height:1.55;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
.wrap{width:min(100% - 2*clamp(16px,4vw,56px),var(--wrap));margin-inline:auto}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,56px);background:rgba(243,243,245,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:clamp(16px,3vw,40px)}
.nav a{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;font-weight:400;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}

/* hero */
.hero{padding:clamp(130px,20vh,210px) 0 clamp(40px,7vw,90px);text-align:center}
.eyebrow{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.hero h1{font-weight:500;font-size:clamp(2.1rem,6.2vw,4.9rem);line-height:1.12;max-width:17em;margin:clamp(24px,4vw,56px) auto;letter-spacing:-.005em;text-wrap:balance}
.hero h1 .bar{font-weight:300}
.lead{max-width:40em;margin:0 auto;font-size:clamp(1rem,1.7vw,1.3rem);color:#2a2a2e}
.hero-cta{margin-top:clamp(26px,4vw,44px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 30px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;border:1px solid var(--ink);transition:background .3s,color .3s,transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px);background:var(--gold-deep);border-color:var(--gold-deep)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{color:#fff}

/* marquee */
.marquee{overflow:hidden;padding:clamp(18px,3vw,34px) 0;margin-bottom:clamp(30px,5vw,70px);border-block:1px solid rgba(0,0,0,.08)}
.marquee__track{display:flex;width:max-content;align-items:center;gap:clamp(22px,3vw,48px);animation:slide 38s linear infinite;padding-left:clamp(22px,3vw,48px)}
.marquee span{font-size:clamp(1.1rem,2.4vw,1.9rem);letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;font-weight:300;color:#3b3b40}
.marquee i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* grid + cards */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:var(--gap);align-items:stretch}
.stack{display:grid;gap:var(--gap);align-content:start}
.card{border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:0 10px 40px rgba(20,20,30,.07);position:relative;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(20,20,30,.12)}
.card--img img{width:100%;height:100%;object-fit:cover;aspect-ratio:1032/941}
.card--text{padding:clamp(26px,4.5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vw,40px)}
.display{font-weight:300;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1.15rem,2.55vw,2.15rem);line-height:1.5;color:#3b3b40;text-wrap:balance}
.display--light{font-size:clamp(1.3rem,3vw,2.5rem);line-height:1.7;color:#4a4a50}
.display--gold,.card--gold .display{color:var(--gold)}
.slogans{font-size:clamp(1rem,1.9vw,1.55rem);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);line-height:1.6}
.muted{color:var(--muted)}

/* boat + phone (video overlays the phone drawn inside the picture) */
.card--boat{background:#031a1c;aspect-ratio:4/5}
.card--boat>img{width:100%;height:100%;object-fit:cover}
.boat-video{position:absolute;left:43%;top:11.8%;width:41.2%;height:75.8%;border-radius:3.2% / 2.6%;overflow:hidden;background:#000}
.boat-video .player{height:100%}

/* cinema */
.cinema{position:relative;border-radius:var(--radius);overflow:hidden;background:
  radial-gradient(ellipse 60% 55% at 50% 42%,rgba(255,170,50,.20),transparent 70%),
  radial-gradient(circle at 5% 45%,rgba(255,170,60,.30),transparent 9%),
  radial-gradient(circle at 95% 45%,rgba(255,170,60,.30),transparent 9%),
  linear-gradient(#120d07,#050403);
  padding:clamp(26px,6vw,86px) clamp(16px,13vw,200px) 0;margin-bottom:12px;box-shadow:0 10px 40px rgba(20,20,30,.12)}
.cinema__screen{position:relative;z-index:2;border:2px solid #f0b84a;box-shadow:0 0 0 clamp(6px,1.2vw,16px) rgba(255,190,80,.07),0 0 60px 6px rgba(255,170,40,.42),0 0 140px rgba(255,150,30,.22);background:#000;border-radius:3px}
.cinema__seats{height:clamp(70px,13vw,190px);margin-top:clamp(14px,3vw,40px);
  background:
   radial-gradient(circle at 50% 28%,#1b120a 0 16%,transparent 17%) 0 0/clamp(60px,9vw,130px) 100% repeat-x,
   radial-gradient(ellipse at 50% 100%,#0a0705 0 52%,transparent 53%) clamp(30px,4.5vw,65px) 60%/clamp(60px,9vw,130px) 80% repeat-x,
   linear-gradient(transparent,#000);opacity:.95}

/* video player */
.player{position:relative;background:#000;overflow:hidden}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player__play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:#fff;transition:opacity .3s}
.player__play::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.35))}
.player__play span{position:relative;width:clamp(52px,6vw,76px);aspect-ratio:1;border-radius:50%;background:rgba(7,8,10,.5);border:1px solid var(--gold);display:grid;place-items:center;backdrop-filter:blur(4px);transition:transform .35s var(--ease),background .3s}
.player__play span::after{content:"";margin-left:5%;border-left:clamp(14px,1.7vw,22px) solid var(--gold);border-block:clamp(9px,1.1vw,14px) solid transparent}
.player__play:hover span{transform:scale(1.1);background:rgba(7,8,10,.75)}
.player.is-playing .player__play{opacity:0;pointer-events:none}
.player__play:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}

/* video cards */
.card--video{background:#000}
.card--video .vcap{padding:18px 24px 22px;background:var(--card)}
.vcap h3,.cap b{font-weight:500;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase}
.vcap p,.cap span{font-size:.95rem;color:var(--muted);margin-top:4px}
.vcap small,.cap small{display:inline-block;margin-top:8px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.cap{font-size:.95rem}
.cap--center{text-align:center;margin:0 auto 28px;max-width:44em}
.cap b,.cap span,.cap small{display:block}

.grid2--block{align-items:center}

/* phone frame */
.phone{width:min(100%,360px);margin-inline:auto;padding:8px;border-radius:44px;background:#000;border:2px solid transparent;
  background:linear-gradient(#000,#000) padding-box,linear-gradient(145deg,#f1d9a8,#b98a4e 45%,#f1d9a8) border-box;
  box-shadow:0 18px 50px rgba(20,20,30,.18)}
.phone .player{border-radius:34px}
.phones{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start;padding-top:0}
.phones figure{margin:0}
.phones .vcap{text-align:center;padding:16px 4px 0}

/* lobster */
.card--lobster{background:#000;display:grid;place-items:center;min-height:100%}
.card--lobster img{width:100%;height:100%;object-fit:cover}
.lobster__text{position:absolute;left:0;right:0;bottom:7%;text-align:center;color:#f1e6d4;font-size:clamp(1.3rem,2.6vw,2.2rem);letter-spacing:.2em;line-height:1.55}

/* festival */
.festival{position:relative;border-radius:var(--radius);overflow:hidden;padding:clamp(26px,5vw,70px) 0;display:grid;place-items:center;
  background:radial-gradient(ellipse 35% 80% at 20% 50%,rgba(220,30,50,.35),transparent 70%),radial-gradient(ellipse 35% 80% at 80% 50%,rgba(40,90,255,.35),transparent 70%),#050507}
.festival__phone{width:min(70vw,340px);border-radius:34px;border:2px solid transparent;padding:6px;
  background:#000 padding-box,linear-gradient(90deg,#ff3045,#7b4bff,#2d7bff) border-box;box-shadow:0 0 40px rgba(255,48,69,.4),0 0 40px rgba(45,123,255,.4)}
.festival__phone .player{border-radius:26px}
.laurel{position:absolute;left:clamp(14px,5vw,80px);bottom:clamp(14px,5vw,60px);width:clamp(80px,11vw,150px);border-radius:50%;overflow:hidden;opacity:.95}

/* extra */
.extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);margin-bottom:var(--gap)}

/* contacts */
.contacts{text-align:center;padding:clamp(70px,11vw,150px) 0 clamp(60px,9vw,120px)}
.contacts h2{font-family:var(--f-head);font-weight:500;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:.02em}
.contacts__lead{margin:clamp(18px,3vw,32px) auto;max-width:28em;font-size:clamp(1.1rem,2vw,1.5rem)}
address{font-style:normal;line-height:2;font-size:1.02rem;margin-block:clamp(20px,3vw,40px)}
address b{font-weight:500}
address a{text-decoration:none;border-bottom:1px solid rgba(196,154,92,.6);transition:color .3s,border-color .3s}
address a:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.contacts__team{max-width:36em;margin:0 auto;color:#3b3b40}

.site-footer{border-top:1px solid rgba(0,0,0,.08);padding:34px clamp(16px,4vw,56px);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.site-footer img{height:28px;width:auto}

/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* tablet */
@media (max-width:980px){
  .grid2{grid-template-columns:1fr}
  .grid2--formats .phones{max-width:640px;margin-inline:auto;width:100%}
  .card--lobster{aspect-ratio:4/5;max-height:70vh}
  .card--lobster img{position:absolute;inset:0}
  .cinema{padding-inline:clamp(14px,6vw,60px)}
  .card--boat{aspect-ratio:4/5;max-width:560px;margin-inline:auto;width:100%}
}
/* phone */
@media (max-width:600px){
  .nav a:nth-child(2){display:none}
  .brand img{height:28px}
  .phones{grid-template-columns:1fr;gap:28px}
  .phone{width:min(86%,340px)}
  .card--text{padding:28px 22px}
  .display{letter-spacing:.1em}
  .site-footer{flex-direction:column;text-align:center}
  .cinema{padding-top:24px}
  .laurel{width:74px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}