/* Kahani Header — front end.
   Every colour, size and font arrives as a CSS variable printed by PHP.

   Selectors are kept specific on purpose: theme kits style every <button> and
   <a> on the page, and a bare class loses to `.elementor-kit-7 button`. */

:root{
  --kh-pad-x: clamp(20px, 4vw, 56px);
  --kh-ease: cubic-bezier(.16,.84,.36,1);
  --kh-ease-soft: cubic-bezier(.19,1,.22,1);
}

body.kh-nav-open{overflow:hidden}

/* ---------- grain ---------- */
.kh-grain{
  position:fixed; inset:-120%; z-index:99998; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:kh-grain 6s steps(6) infinite;
}
@keyframes kh-grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)}
  40%{transform:translate(4%,-6%)} 60%{transform:translate(-4%,-4%)}
  80%{transform:translate(6%,5%)}
}

/* ==================================================================
   BAR
   ================================================================== */
.kahani-header{
  position:fixed; top:0; left:0; right:0; z-index:99990;
  padding:0 var(--kh-pad-x);
  transition:transform .55s var(--kh-ease-soft), padding .6s var(--kh-ease-soft);
}
.admin-bar .kahani-header{top:32px}
@media screen and (max-width:782px){ .admin-bar .kahani-header{top:46px} }

.kahani-header .kh-bar__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:100%; max-width:none; margin:0 auto; padding:0;
  height:var(--kh-h);
  background:transparent; border:1px solid transparent; border-radius:0;
  transition:height .6s var(--kh-ease-soft), padding .6s var(--kh-ease-soft),
             max-width .6s var(--kh-ease-soft), background .6s var(--kh-ease-soft),
             border-color .6s var(--kh-ease-soft), backdrop-filter .6s var(--kh-ease-soft);
}

/* the hairline under the bar */
.kahani-header .kh-bar__rule{
  position:absolute; left:var(--kh-pad-x); right:var(--kh-pad-x); bottom:0; height:1px;
  background:var(--kh-hairline);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--kh-ease-soft);
}
.kahani-header.is-scrolled .kh-bar__rule{transform:scaleX(1)}

/* --- once the page moves, the bar draws in and lifts off the edges --- */
.kahani-header.is-scrolled{padding-top:14px}
.kahani-header.is-scrolled .kh-bar__inner{
  height:var(--kh-pill-h,64px);
  max-width:var(--kh-pill-w,1180px);
  padding:0 10px 0 20px;
  background:var(--kh-scroll-bg);
  border-color:var(--kh-hairline);
  -webkit-backdrop-filter:blur(var(--kh-scroll-blur)) saturate(130%);
          backdrop-filter:blur(var(--kh-scroll-blur)) saturate(130%);
  clip-path:polygon(var(--kh-cham,14px) 0,calc(100% - var(--kh-cham,14px)) 0,100% var(--kh-cham,14px),100% calc(100% - var(--kh-cham,14px)),calc(100% - var(--kh-cham,14px)) 100%,var(--kh-cham,14px) 100%,0 calc(100% - var(--kh-cham,14px)),0 var(--kh-cham,14px));
}
.kahani-header.is-scrolled .kh-bar__rule{transform:scaleX(0)}
.kahani-header.is-hidden{transform:translateY(-140%)}
.kahani-header.nav-is-open{transform:none !important; padding-top:0}
.kahani-header.nav-is-open .kh-bar__inner{
  background:transparent; border-color:transparent; backdrop-filter:none;
  clip-path:none; max-width:none; padding:0; height:var(--kh-h);
}
.kahani-header.nav-is-open .kh-bar__rule{transform:scaleX(0)}

/* ---------- logo ---------- */
.kahani-header .kh-logo{
  flex:none; display:flex; align-items:center; gap:12px;
  font-family:var(--kh-display); font-weight:300;
  font-size:var(--kh-logo-size); letter-spacing:var(--kh-logo-spacing);
  color:var(--kh-logo-color); line-height:1; text-decoration:none;
  transition:color .4s var(--kh-ease), font-size .6s var(--kh-ease-soft);
}
.kahani-header .kh-logo:hover,
.kahani-header .kh-logo:focus{color:var(--kh-logo-hover)}
.kahani-header.is-scrolled .kh-logo{font-size:calc(var(--kh-logo-size) * .86)}
.kh-stem{position:relative}
.kh-stem::after{
  content:""; position:absolute; left:.30em; top:-.55em; bottom:-.30em;
  width:1px; background:currentColor; opacity:.85;
}
.kahani-header .kh-logo-img{padding-left:0}
.kahani-header .kh-logo-img img{display:block; height:var(--kh-logo-h); width:auto}

/* the peacock beside the wordmark */
.kahani-header .kh-logo-mark{
  display:block; width:26px; aspect-ratio:420/490; flex:none;
  background:var(--kh-gold);
  -webkit-mask:var(--kh-mark) center/contain no-repeat;
          mask:var(--kh-mark) center/contain no-repeat;
  transition:width .6s var(--kh-ease-soft);
}
.kahani-header.is-scrolled .kh-logo-mark{width:22px}

/* ---------- inline nav ---------- */
.kahani-header .kh-bar-nav{margin:0 auto}
.kahani-header .kh-bar-list{
  display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;
}
.kahani-header .kh-bar-list li{margin:0; padding:0; position:relative}
.kahani-header .kh-bar-list li::before{content:none}
.kahani-header .kh-bar-list a{
  position:relative; display:block; padding:10px 15px;
  font-family:var(--kh-ui); font-size:12px; font-weight:500;
  letter-spacing:2.2px; text-transform:uppercase;
  color:var(--kh-cream-soft); text-decoration:none; white-space:nowrap;
  transition:color .35s var(--kh-ease);
}
.kahani-header .kh-bar-list a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:1px;
  background:var(--kh-gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--kh-ease-soft);
}
.kahani-header .kh-bar-list a:hover{color:var(--kh-cream)}
.kahani-header .kh-bar-list a:hover::after{transform:scaleX(1); transform-origin:left}
.kahani-header .kh-bar-list .current-menu-item > a{color:var(--kh-cream)}
.kahani-header .kh-bar-list .current-menu-item > a::after{transform:scaleX(1)}
/* the bar only ever shows the top level */
.kahani-header .kh-bar-list .sub-menu{display:none}

/* ---------- right cluster ---------- */
.kahani-header .kh-bar__right{display:flex; align-items:center; gap:16px; flex:none}
.kahani-header .kh-bar__phone{
  font-family:var(--kh-ui); font-size:13px; letter-spacing:.5px;
  color:var(--kh-cream-faint); text-decoration:none;
  transition:color .35s var(--kh-ease);
}
.kahani-header .kh-bar__phone:hover{color:var(--kh-gold)}

/* ---------- burger ---------- */
/* the !important run is deliberate: themes style every <button> on the page */
.kahani-header .kh-burger{
  position:relative; z-index:99995;
  display:flex !important; align-items:center; gap:14px;
  width:auto !important; min-width:0 !important; height:auto !important;
  padding:10px 0 10px 6px !important; margin:0 !important;
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  outline:none; text-transform:none !important; line-height:1 !important;
  font-family:var(--kh-ui) !important; font-size:inherit !important;
  color:var(--kh-burger) !important; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.kahani-header .kh-burger:hover,
.kahani-header .kh-burger:focus,
.kahani-header .kh-burger:active{
  background:none !important; border:0 !important; box-shadow:none !important;
}
.kahani-header .kh-burger-label{
  position:relative; display:block; height:12px; overflow:hidden;
  font-size:11px; font-weight:600; letter-spacing:2.6px; text-transform:uppercase;
}
.kahani-header .kh-burger-label i{
  display:block; font-style:normal; line-height:12px;
  transition:transform .5s var(--kh-ease-soft);
}
.kahani-header.nav-is-open .kh-burger-label i{transform:translateY(-12px)}

.kahani-header .kh-burger-lines{position:relative; width:26px; height:12px; flex:none; display:block}
.kahani-header .kh-burger-lines span{
  position:absolute; left:0; height:1px; background:currentColor; display:block;
  transition:transform .5s var(--kh-ease-soft), width .5s var(--kh-ease-soft), top .5s var(--kh-ease-soft);
}
.kahani-header .kh-burger-lines span:nth-child(1){top:2px; width:26px}
.kahani-header .kh-burger-lines span:nth-child(2){top:9px; width:17px}
.kahani-header .kh-burger:hover .kh-burger-lines span:nth-child(2){width:26px}
.kahani-header.nav-is-open .kh-burger-lines span:nth-child(1){top:6px; width:24px; transform:rotate(45deg)}
.kahani-header.nav-is-open .kh-burger-lines span:nth-child(2){top:6px; width:24px; transform:rotate(-45deg)}

/* ---------- CTA ---------- */
.kahani-header .kh-cta,
.kh-overlay .kh-cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; text-decoration:none;
  background:transparent; color:var(--kh-cream);
  border:1px solid var(--kh-gold); border-radius:0;
  font-family:var(--kh-ui); font-size:13px; font-weight:600; letter-spacing:.8px;
  text-transform:none; line-height:1; cursor:pointer; box-shadow:none;
  clip-path:polygon(var(--kh-btn-cham,10px) 0,100% 0,100% calc(100% - var(--kh-btn-cham,10px)),calc(100% - var(--kh-btn-cham,10px)) 100%,0 100%,0 var(--kh-btn-cham,10px));
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.kahani-header .kh-cta:hover,
.kh-overlay .kh-cta:hover{
  background:var(--kh-gold); border-color:var(--kh-gold); color:var(--kh-overlay);
}

/* ==================================================================
   OVERLAY
   ================================================================== */
.kh-overlay{
  position:fixed; inset:0; z-index:99985;
  background:var(--kh-overlay);
  opacity:0; visibility:hidden; overflow-y:auto; overscroll-behavior:contain;
  transition:opacity .5s ease, visibility 0s linear .5s;
}
.kh-overlay.is-open{opacity:1; visibility:visible; transition:opacity .5s ease, visibility 0s}

.kh-overlay.has-grid::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--kh-hairline) 1px,transparent 1px),
                   linear-gradient(90deg,var(--kh-hairline) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 80%);
          mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 80%);
}

.kh-curtain{
  position:fixed; left:0; right:0; height:50.5%; z-index:2;
  background:var(--kh-overlay-2);
  transition:transform .95s cubic-bezier(.76,0,.24,1);
}
.kh-curtain--t{top:0}
.kh-curtain--b{bottom:0}
.kh-overlay.is-open .kh-curtain--t{transform:translateY(-100%)}
.kh-overlay.is-open .kh-curtain--b{transform:translateY(100%)}

.kh-watermark{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:grid; place-items:center;
  opacity:0; transition:opacity 1.5s var(--kh-ease-soft) .3s;
}
.kh-overlay.is-open .kh-watermark{opacity:.045}
.kh-watermark i{
  display:block; width:min(720px,120vw); aspect-ratio:420/490;
  background:var(--kh-gold);
  -webkit-mask:var(--kh-mark) center/contain no-repeat;
          mask:var(--kh-mark) center/contain no-repeat;
}

.kh-overlay-inner{
  position:relative; z-index:3; min-height:100vh;
  max-width:1280px; margin:0 auto;
  padding:calc(var(--kh-h) + 30px) var(--kh-pad-x) 50px;
  display:flex; flex-direction:column; justify-content:center;
}
.kh-overlay-main{
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(28px,5vw,70px); align-items:center;
}

/* ---------- the links ---------- */
.kh-overlay .kh-nav{list-style:none; margin:0; padding:0}
.kh-overlay .kh-item{
  margin:0; padding:0; overflow:hidden;
  border-bottom:1px solid var(--kh-hairline);
}
.kh-overlay .kh-item:first-child{border-top:1px solid var(--kh-hairline)}
.kh-overlay .kh-item::before{content:none}

.kh-overlay .kh-nav-link{
  display:flex; align-items:baseline; gap:clamp(12px,2vw,26px);
  padding:clamp(11px,1.6vw,19px) 0; text-decoration:none; cursor:pointer;
  font-family:var(--kh-display); font-weight:var(--kh-nav-weight);
  font-size:var(--kh-nav-size); line-height:1; letter-spacing:-.02em;
  color:var(--kh-cream);
  transform:translateY(105%); opacity:0;
  transition:color .4s var(--kh-ease), padding-left .5s var(--kh-ease-soft);
}
.kh-overlay.is-open .kh-nav-link{
  animation:kh-rise .95s var(--kh-ease-soft) forwards;
  animation-delay:calc(.5s + var(--i,0) * .07s);
}
@keyframes kh-rise{to{transform:none; opacity:1}}

.kh-overlay .kh-nav-link:hover,
.kh-overlay .kh-item.is-current > .kh-nav-link{color:var(--kh-gold)}
.kh-overlay .kh-nav-link:hover{padding-left:clamp(8px,1.4vw,20px)}

.kh-overlay .kh-num{
  flex:none; width:2.4em;
  font-family:var(--kh-ui); font-style:normal;
  font-size:11px; font-weight:600; letter-spacing:2.4px;
  color:var(--kh-cream-faint);
  transition:color .4s var(--kh-ease);
}
.kh-overlay .kh-nav-link:hover .kh-num{color:var(--kh-gold)}

.kh-overlay .kh-note{
  margin-left:auto; font-family:var(--kh-ui); font-weight:500;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--kh-cream-faint);
  opacity:0; transform:translateX(-10px);
  transition:opacity .4s var(--kh-ease), transform .5s var(--kh-ease-soft);
}
.kh-overlay .kh-nav-link:hover .kh-note{opacity:1; transform:none}

.kh-overlay .kh-arrow{
  margin-left:12px; width:9px; height:9px; flex:none;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); opacity:.5;
  transition:transform .4s var(--kh-ease-soft), opacity .3s ease;
}
.kh-overlay .kh-sub-toggle:checked + .kh-nav-link .kh-arrow{transform:rotate(-135deg); opacity:1}

/* ---------- dropdowns (pure CSS) ---------- */
.kh-overlay .kh-sub-toggle{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.kh-overlay .kh-submenu{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--kh-ease-soft);
}
.kh-overlay .kh-submenu > *{overflow:hidden}
.kh-overlay .kh-sub-toggle:checked ~ .kh-submenu{grid-template-rows:1fr}
.kh-overlay.kh-subs-always .kh-submenu{grid-template-rows:1fr}
.kh-overlay .kh-sub-label{
  margin:0 0 6px; font-family:var(--kh-ui);
  font-size:11px; font-weight:600; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--kh-cream-faint);
}
.kh-overlay .kh-submenu ul{list-style:none; margin:0 0 16px; padding:0 0 0 2.4em}
.kh-overlay .kh-submenu li{margin:0}
.kh-overlay .kh-submenu li::before{content:none}
.kh-overlay .kh-sub-link{
  display:block; padding:6px 0; text-decoration:none;
  font-family:var(--kh-display); font-size:var(--kh-sub-size);
  color:var(--kh-cream-soft);
  transition:color .3s var(--kh-ease), padding-left .4s var(--kh-ease-soft);
}
.kh-overlay .kh-sub-link:hover{color:var(--kh-gold); padding-left:8px}

/* ---------- preview panel ---------- */
.kh-preview{
  position:relative; width:clamp(210px,23vw,310px); aspect-ratio:4/5;
  overflow:hidden; background:var(--kh-overlay-2);
  clip-path:polygon(var(--kh-cham,14px) 0,calc(100% - var(--kh-cham,14px)) 0,100% var(--kh-cham,14px),100% calc(100% - var(--kh-cham,14px)),calc(100% - var(--kh-cham,14px)) 100%,var(--kh-cham,14px) 100%,0 calc(100% - var(--kh-cham,14px)),0 var(--kh-cham,14px));
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--kh-ease-soft) .7s, transform .9s var(--kh-ease-soft) .7s;
}
.kh-overlay.is-open .kh-preview{opacity:1; transform:none}
.kh-preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; max-width:none;
  opacity:0; transform:scale(1.06);
  transition:opacity .7s var(--kh-ease-soft), transform 1.2s var(--kh-ease-soft);
}
.kh-preview img.is-on{opacity:1; transform:none}
.kh-preview::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,var(--kh-overlay),transparent 58%);
}
@media(max-width:900px){ .kh-preview{display:none} }

/* ---------- cursor light ---------- */
.kh-overlay.has-light .kh-overlay-inner::before{
  content:""; position:fixed; z-index:0; pointer-events:none;
  left:var(--kh-mx,50%); top:var(--kh-my,50%);
  width:46vmax; height:46vmax; transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--kh-glow),transparent 62%);
  transition:opacity .4s ease;
}

/* ---------- meta strip ---------- */
.kh-overlay .kh-meta{
  display:flex; flex-wrap:wrap; gap:14px 32px; align-items:center;
  margin-top:clamp(24px,4vw,44px); padding-top:28px;
  border-top:1px solid var(--kh-hairline);
  font-family:var(--kh-ui); font-size:12px; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--kh-cream-faint);
  opacity:0; transform:translateY(12px);
}
.kh-overlay.is-open .kh-meta{animation:kh-fade .9s var(--kh-ease-soft) 1.05s forwards}
@keyframes kh-fade{to{opacity:1; transform:none}}
.kh-overlay .kh-meta a{color:inherit; text-decoration:none; transition:color .3s ease}
.kh-overlay .kh-meta a:hover{color:var(--kh-gold)}
.kh-overlay .kh-meta-left{display:flex; flex-wrap:wrap; gap:14px 32px; align-items:center}
.kh-overlay .kh-meta-right{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-left:auto}
.kh-overlay .kh-phone{letter-spacing:1.4px}
.kh-overlay .kh-cta{text-transform:none; letter-spacing:.8px}

@media(max-width:760px){
  .kh-overlay-main{grid-template-columns:1fr}
  .kh-overlay .kh-meta-right{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .kahani-header,.kahani-header *,.kh-overlay,.kh-overlay *{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
  .kh-overlay .kh-nav-link{transform:none; opacity:1}
  .kh-overlay .kh-meta,.kh-preview{opacity:1; transform:none}
  .kh-grain{animation:none}
}