/* Garden Lounge homepage — natural botanical composition and responsive polish */
.kaif-lower{
  overflow:hidden;
}

.kaif-lower > section,
.kaif-lower > .kl-lightbox{
  position:relative;
  z-index:2;
}

.kl-intro,
.kl-story-row,
.kl-cinema,
.kl-gallery,
.kl-contact{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* Botanical layers. Each section receives a different silhouette and scale,
   so the decoration feels grown into the layout rather than repeated. */
.kl-intro::before,
.kl-intro::after,
.kl-story-row:nth-of-type(1)::after,
.kl-story-row:nth-of-type(2)::before,
.kl-story-row:nth-of-type(2)::after,
.kl-story-row:nth-of-type(3)::before,
.kl-story-row:nth-of-type(3)::after,
.kl-cinema::before,
.kl-gallery::before,
.kl-gallery::after,
.kl-contact::before,
.kl-contact::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 20px 35px rgba(0,0,0,.32));
}

/* Opening section: one hanging vine and one low branch frame the title. */
.kl-intro::after{
  width:clamp(185px,18vw,305px);
  height:clamp(620px,68vw,1010px);
  right:clamp(-112px,-4.8vw,-46px);
  top:-42px;
  opacity:.24;
  background-image:url('vine-natural-hanging.svg');
  transform:rotate(-3deg);
}
.kl-intro::before{
  width:clamp(260px,28vw,470px);
  height:clamp(135px,15vw,250px);
  left:clamp(-112px,-5vw,-42px);
  bottom:1.5%;
  opacity:.13;
  background-image:url('vine-natural-branch.svg');
  transform:scaleX(-1) rotate(-5deg);
}

/* Story I: a long side growth enters from the image edge. */
.kl-story-row:nth-of-type(1)::after{
  width:clamp(150px,15vw,245px);
  height:clamp(570px,62vw,900px);
  left:clamp(-96px,-4.5vw,-38px);
  top:5%;
  opacity:.16;
  background-image:url('vine-natural-long.svg');
  transform:scaleX(-1) rotate(4deg);
}

/* Story II: two lighter branches create a continuous rhythm. */
.kl-story-row:nth-of-type(2)::before{
  width:clamp(155px,15vw,245px);
  height:clamp(545px,60vw,880px);
  right:clamp(-102px,-4.7vw,-40px);
  top:3%;
  opacity:.16;
  background-image:url('vine-natural-long.svg');
  transform:rotate(-5deg);
}
.kl-story-row:nth-of-type(2)::after{
  width:clamp(250px,27vw,455px);
  height:clamp(130px,14vw,235px);
  left:clamp(-105px,-4.5vw,-38px);
  bottom:1%;
  opacity:.10;
  background-image:url('vine-natural-branch.svg');
  transform:rotate(7deg);
}

/* Story III: a hanging vine is balanced by a quiet low sprig. */
.kl-story-row:nth-of-type(3)::before{
  width:clamp(145px,14vw,230px);
  height:clamp(500px,57vw,840px);
  left:clamp(-92px,-4.2vw,-34px);
  top:-8%;
  opacity:.13;
  background-image:url('vine-natural-hanging.svg');
  transform:scaleX(-1) rotate(5deg);
}
.kl-story-row:nth-of-type(3)::after{
  width:clamp(245px,26vw,440px);
  height:clamp(128px,14vw,230px);
  right:clamp(-96px,-4vw,-34px);
  bottom:3%;
  opacity:.17;
  background-image:url('vine-natural-branch.svg');
  transform:rotate(-10deg);
}

/* Cinema: keep the centre clean and let one branch cross the dark corner. */
.kl-cinema::before{
  z-index:2;
  width:clamp(275px,31vw,520px);
  height:clamp(145px,17vw,270px);
  left:clamp(-112px,-4.4vw,-38px);
  bottom:5%;
  opacity:.18;
  background-image:url('vine-natural-branch.svg');
  transform:scaleX(-1) rotate(7deg);
}

/* Gallery: foliage on opposite edges, away from the photo grid centre. */
.kl-gallery::before{
  width:clamp(145px,14vw,235px);
  height:clamp(520px,60vw,880px);
  left:clamp(-96px,-4.5vw,-38px);
  top:3%;
  opacity:.12;
  background-image:url('vine-natural-hanging.svg');
  transform:scaleX(-1) rotate(3deg);
}
.kl-gallery::after{
  width:clamp(170px,17vw,285px);
  height:clamp(610px,68vw,990px);
  right:clamp(-112px,-5vw,-42px);
  top:25%;
  opacity:.14;
  background-image:url('vine-natural-long.svg');
  transform:rotate(5deg);
}

/* Contact: a final arch closes the composition without extending the page. */
.kl-contact::before{
  width:clamp(280px,31vw,520px);
  height:clamp(145px,17vw,275px);
  left:clamp(-116px,-5vw,-40px);
  bottom:4px;
  opacity:.18;
  background-image:url('vine-natural-branch.svg');
  transform:rotate(5deg);
}
.kl-contact::after{
  width:clamp(145px,14vw,230px);
  height:clamp(470px,52vw,780px);
  right:clamp(-92px,-4vw,-34px);
  top:-8%;
  opacity:.14;
  background-image:url('vine-natural-hanging.svg');
  transform:rotate(-5deg);
}

/* Content must always remain above foliage. */
.kl-intro > *,
.kl-story-row > *,
.kl-cinema > *,
.kl-gallery > *,
.kl-contact > *{
  position:relative;
  z-index:1;
}
.kl-cinema .kl-cinema-text{;z-index:3}

/* The page now ends directly after the compact footer line. */
.kl-contact{
  padding-bottom:max(18px,env(safe-area-inset-bottom))!important;
  margin-bottom:0!important;
}
.kl-contact .kl-shell{padding-bottom:0}
.kl-footerline{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
.kaif-lower + *{margin-top:0!important}

@media (max-width:700px){
  .page{min-height:100svh}
  .center{padding:54px 13px 18px}
  .top-title{margin-bottom:14px}
  .top-title .brand{font-size:clamp(16px,5vw,22px);letter-spacing:.15em}
  .buttons{width:100%;gap:clamp(12px,5vw,24px)}
  .btn-wrap{width:min(43vw,170px)}
  .side-logo{width:min(34vw,135px);margin-bottom:9px}
  .btn{width:100%;min-height:43px;padding:10px 4px;font-size:10.5px}
  .home-lang-switch{top:max(8px,env(safe-area-inset-top));right:8px;padding:3px}
  .home-lang-btn{min-width:29px;padding:6px 4px}

  /* Four restrained mobile accents: visible, but never over the text. */
  .kl-intro::before,
  .kl-story-row:nth-of-type(2)::after,
  .kl-story-row:nth-of-type(3)::before,
  .kl-cinema::before,
  .kl-gallery::before{
    display:none;
  }
  .kl-intro::after{
    width:132px;height:520px;right:-67px;top:4%;opacity:.13;
  }
  .kl-story-row:nth-of-type(1)::after{
    width:112px;height:520px;left:-62px;top:18%;opacity:.10;
  }
  .kl-story-row:nth-of-type(2)::before{
    width:108px;height:500px;right:-62px;top:22%;opacity:.09;
  }
  .kl-story-row:nth-of-type(3)::after{
    width:245px;height:126px;right:-112px;bottom:1%;opacity:.11;
  }
  .kl-gallery::after{
    width:115px;height:560px;right:-66px;top:32%;opacity:.10;
  }
  .kl-contact::before{
    width:255px;height:132px;left:-124px;bottom:0;opacity:.13;
  }
  .kl-contact::after{
    width:108px;height:480px;right:-64px;top:0;opacity:.10;
  }
}

@media (max-width:380px){
  .top-title .by{font-size:8px}
  .buttons{gap:10px}
  .btn-wrap{width:44vw}
  .btn{font-size:9.5px;letter-spacing:.08em}
}

@media (prefers-reduced-motion:reduce){
  .page *,
  .kaif-lower *{scroll-behavior:auto!important}
}

/* =========================================================
   COMPACT BAR + EVENING SECTION
   The third editorial image and the following full-width image are
   intentionally shorter, with a calm black breathing space between them.
   ========================================================= */

/* The 03 / BAR block was visually too tall on wide screens. */
.kl-story .kl-story-row:nth-child(3){
  min-height:clamp(500px,52vw,700px);
}

/* Make the full-width evening image more compact and separate it clearly
   from the image above. */
.kl-cinema{
  min-height:clamp(430px,50vw,690px)!important;
  margin-top:clamp(42px,4.5vw,76px);
}

/* Keep the important part of the photograph visible after reducing height. */
.kl-cinema img{
  object-position:center 46%;
}

@media (max-width:1120px){
  .kl-story .kl-story-row:nth-child(3){
    min-height:0;
  }

  .kl-story .kl-story-row:nth-child(3) .kl-story-media{
    min-height:clamp(360px,54vw,540px);
  }

  .kl-story .kl-story-row:nth-child(3) .kl-story-copy{
    padding-top:clamp(52px,7vw,78px);
    padding-bottom:clamp(52px,7vw,78px);
  }

  .kl-cinema{
    min-height:clamp(430px,60vw,620px)!important;
    margin-top:clamp(34px,5vw,58px);
  }
}

@media (max-width:680px){
  .kl-story .kl-story-row:nth-child(3) .kl-story-media{
    min-height:72vw;
    max-height:420px;
  }

  .kl-story .kl-story-row:nth-child(3) .kl-story-copy{
    padding-top:48px;
    padding-bottom:48px;
  }

  .kl-story .kl-story-row:nth-child(3) .kl-number{
    margin-bottom:34px;
  }

  .kl-cinema{
    min-height:500px!important;
    margin-top:28px;
  }

  .kl-cinema-text{
    bottom:44px;
  }
}

/* =========================================================
   FINAL VISUAL FIX — cinema caption, botanical field, footer end
   ========================================================= */

/* Decorative field starts only after the Menu/Bar hero. */
.kaif-lower{
  position:relative;
  overflow-x:clip!important;
  overflow-y:visible!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
}

.kl-vine-field{
  position:absolute;
  inset:0;
  z-index:20;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}

.kl-vine{
  position:absolute;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.20;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.48));
  transform-origin:center;
}

/* Many different silhouettes, intentionally kept close to the page edges. */
.vine-01{top:.5%;left:-92px;width:390px;height:720px;background-image:url('vine-cascade-v2.svg');transform:rotate(5deg)}
.vine-02{top:4.5%;right:-115px;width:430px;height:310px;background-image:url('vine-arc-v2.svg');transform:rotate(-12deg)}
.vine-03{top:12%;right:-76px;width:270px;height:700px;background-image:url('vine-natural-hanging.svg');transform:rotate(-4deg);opacity:.17}
.vine-04{top:18%;left:-128px;width:520px;height:280px;background-image:url('vine-natural-branch.svg');transform:scaleX(-1) rotate(9deg);opacity:.16}
.vine-05{top:26%;right:-118px;width:430px;height:430px;background-image:url('vine-coil-v2.svg');transform:rotate(13deg);opacity:.17}
.vine-06{top:33%;left:-88px;width:260px;height:760px;background-image:url('vine-natural-long.svg');transform:scaleX(-1) rotate(2deg);opacity:.16}
.vine-07{top:41%;right:-122px;width:470px;height:290px;background-image:url('vine-corner-v2.svg');transform:rotate(-8deg);opacity:.19}
.vine-08{top:48%;left:-105px;width:410px;height:310px;background-image:url('vine-sprig-v2.svg');transform:rotate(8deg);opacity:.18}
.vine-09{top:55%;right:-82px;width:300px;height:760px;background-image:url('vine-cascade-v2.svg');transform:scaleX(-1) rotate(-4deg);opacity:.16}
.vine-10{top:64%;left:-130px;width:530px;height:310px;background-image:url('vine-arc-v2.svg');transform:scaleX(-1) rotate(10deg);opacity:.18}
.vine-11{top:72%;right:-116px;width:430px;height:330px;background-image:url('vine-natural-branch.svg');transform:rotate(-11deg);opacity:.16}
.vine-12{top:80%;left:-80px;width:250px;height:700px;background-image:url('vine-natural-hanging.svg');transform:scaleX(-1) rotate(4deg);opacity:.17}
.vine-13{top:89%;right:-112px;width:470px;height:340px;background-image:url('vine-coil-v2.svg');transform:rotate(9deg);opacity:.18}
.vine-14{top:95%;left:-120px;width:500px;height:270px;background-image:url('vine-corner-v2.svg');transform:scaleX(-1) rotate(-5deg);opacity:.18}

/* The foliage overlays photographs and black backgrounds, while important
   wording and controls stay cleanly above it. */
.kaif-lower > section{
  position:relative;
  z-index:auto!important;
}
.kl-intro-grid,
.kl-stats,
.kl-story-copy > *,
.kl-image-index,
.kl-cinema-text,
.kl-gallery-head,
.kl-shot span,
.kl-contact .kl-shell{
  position:relative;
  z-index:30!important;
}
.kl-story-media img,
.kl-cinema > img,
.kl-shot img{
  position:relative;
  z-index:1;
}

/* Vines remain visible at the edges and never intercept clicks. */
.kl-vine-field + .kl-intro,
.kl-story,
.kl-cinema,
.kl-gallery,
.kl-contact{
  isolation:auto!important;
}

/* Cinema wording: bottom-aligned, black and readable on a light translucent panel. */
.kl-cinema::after{
  background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.04) 62%,rgba(244,240,231,.24) 76%,rgba(244,240,231,.76) 100%)!important;
}

.kl-cinema-text{
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%;
  padding:clamp(22px,3.2vw,48px) var(--kl-pad-x) clamp(24px,3.5vw,52px)!important;
  align-items:flex-end!important;
  background:linear-gradient(90deg,rgba(246,242,232,.94) 0%,rgba(246,242,232,.88) 58%,rgba(246,242,232,.76) 100%);
  border-top:1px solid rgba(0,0,0,.16);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.kl-cinema-text h3{
  color:#080808!important;
  text-shadow:none!important;
  font-size:clamp(48px,7vw,112px)!important;
  line-height:.78!important;
}

.kl-cinema-text p{
  color:#101010!important;
  text-shadow:none!important;
  font-weight:600;
  font-size:clamp(10px,.85vw,12px)!important;
  line-height:1.75!important;
}

/* Definite end of the document: the closed lightbox is removed from layout. */
.kaif-lower > .kl-lightbox{
  position:fixed!important;
  inset:0!important;
  display:none!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:30px!important;
}
.kaif-lower > .kl-lightbox.is-open{
  display:grid!important;
}

.kl-contact{
  min-height:0!important;
  height:auto!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}
.kl-contact .kl-shell{
  min-height:0!important;
  height:auto!important;
  padding-bottom:max(20px,env(safe-area-inset-bottom))!important;
}
.kl-footerline{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
.kaif-lower + *{
  margin-top:0!important;
}
html,body{
  margin-bottom:0!important;
  padding-bottom:0!important;
}

@media (max-width:860px){
  .kl-cinema-text{
    display:grid!important;
    grid-template-columns:1fr;
    gap:18px!important;
  }
  .kl-cinema-text h3,
  .kl-cinema-text p{
    width:100%!important;
    max-width:760px!important;
    margin:0!important;
  }
}

@media (max-width:700px){
  .kl-vine{opacity:.105;filter:drop-shadow(0 12px 20px rgba(0,0,0,.38))}
  .vine-02,.vine-04,.vine-05,.vine-07,.vine-10,.vine-13{display:none}
  .vine-01{left:-118px;width:285px;height:570px}
  .vine-03{right:-92px;width:205px;height:600px}
  .vine-06{left:-95px;width:190px;height:610px}
  .vine-08{left:-130px;width:300px;height:230px}
  .vine-09{right:-100px;width:210px;height:610px}
  .vine-11{right:-150px;width:330px;height:250px}
  .vine-12{left:-94px;width:190px;height:580px}
  .vine-14{left:-150px;width:340px;height:220px}

  .kl-cinema{
    min-height:clamp(480px,118vw,620px)!important;
  }
  .kl-cinema-text{
    padding:22px 22px 26px!important;
    background:rgba(246,242,232,.92);
  }
  .kl-cinema-text h3{
    font-size:clamp(44px,14.5vw,72px)!important;
  }
  .kl-cinema-text p{
    font-size:10px!important;
    max-width:360px!important;
  }
}