:root{
  --bg:#05060a;
  --bg-2:#0a0c14;
  --gold:#c79a3a;
  --gold-soft:#e3c179;
  --gold-bright:#f4d98a;
  --blue:#3aa0ff;
  --blue-core:#5fd0ff;
  --blue-glow:rgba(58,160,255,.35);
  --gold-glow:rgba(199,154,58,.30);
  --text:#ffffff;
  --muted:#b8b6b0;
  --card:rgba(255,255,255,.03);
  --border:rgba(199,154,58,.16);
  --radius:22px;
  --maxw:520px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background: #070C18; color:var(--text);
  font-family:'Inter',sans-serif;font-weight:400;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.loading{overflow:hidden;height:100vh}
em{font-style:italic}
img{display:block;max-width:100%}

/* ===== PRELOADER ===== */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.preloader.done{opacity:0;visibility:hidden}
.pre-logo{position:relative;width:90px;height:90px;display:grid;place-items:center}
.pre-logo img{width:64px;animation:breathe 2.4s ease-in-out infinite}
.pre-ring{position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--gold);
  border-right-color:var(--blue);animation:spin 1.1s linear infinite}
.pre-bar{position:absolute;bottom:22%;width:160px;height:2px;background:rgba(255,255,255,.08);overflow:hidden;border-radius:2px}
.pre-bar i{position:absolute;inset:0;width:40%;background:linear-gradient(90deg,var(--gold),var(--blue-core));
  border-radius:2px;animation:load 1.2s var(--ease) infinite}
@keyframes load{0%{left:-40%}100%{left:100%}}
@keyframes breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px var(--blue-glow))}50%{transform:scale(1.08);filter:drop-shadow(0 0 22px var(--blue-glow))}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== LIVING OCEAN BACKGROUND & WATER COLUMN ===== */
.washes {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(130% 90% at 70% 0%, #0B192E 0%, #070C18 55%, #03050B 100%);
}
.wash {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35;
  animation: wash-float 24s ease-in-out infinite alternate;
}
.wash-a {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(58, 160, 255, 0.25), transparent 70%);
  top: -100px; right: -100px;
}
.wash-b {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(95, 208, 255, 0.18), transparent 70%);
  bottom: 10%; left: -100px; animation-delay: -8s;
}
.wash-c {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(199, 154, 58, 0.15), transparent 70%);
  top: 45%; right: 20%; animation-delay: -14s;
}
@keyframes wash-float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.08); }
  100% { transform: translate(25px, -25px) scale(0.95); }
}

#ocean {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1;
  pointer-events: auto;
}

section {
  position: relative;
  z-index: 2;
}

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== LAYOUT ===== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:90px 0;position:relative}

/* ===== NAV ===== */
#header{position:fixed;top:0;left:0;right:0;z-index:80;transition:transform .45s var(--ease),background .4s,backdrop-filter .4s}
#header.scrolled{background:rgba(5,6,10,.6);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.05)}
#header.hide{transform:translateY(-100%)}
.nav{max-width:var(--maxw);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.brand-mark{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 10px var(--blue-glow))}
.brand-name{font-family:'Cormorant Garamond';font-size:21px;font-weight:600;letter-spacing:.4px;line-height:1;display:flex;flex-direction:column}
.brand-name b{color:var(--gold-soft);font-weight:600;display:inline}
.brand-name small{font-family:'Inter';font-size:7.5px;letter-spacing:3px;color:var(--muted);font-weight:400;margin-top:2px}
.nav-cta{font-size:12px;color:var(--gold-soft);border:1px solid var(--border);padding:9px 16px;border-radius:30px;text-decoration:none;transition:.35s;white-space:nowrap}
.nav-cta:active,.nav-cta:hover{background:var(--gold);color:#05060a;border-color:transparent;box-shadow:0 0 22px var(--gold-glow)}

/* ===== HERO ===== */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:108px 24px 56px;position:relative}
.hero-inner{max-width:var(--maxw);width:100%}
.eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-soft);margin-bottom:22px}
.hero-title{font-family:'Cormorant Garamond';font-weight:600;line-height:1.12;font-size:clamp(42px,12.5vw,64px);margin-bottom:20px;text-shadow:0 2px 20px rgba(0,0,0,0.5)}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:block;transform:translateY(110%)}
.hero-title em{font-style:italic;background:linear-gradient(110deg,var(--gold-soft),#fff 40%,var(--blue-core) 75%,var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{color:var(--muted);max-width:360px;margin:0 auto 32px;font-size:15px;text-shadow:0 1px 10px rgba(0,0,0,0.6)}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-ghost,.btn-solid{position:relative;padding:14px 26px;border-radius:40px;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s;isolation:isolate}
.btn-ghost{color:var(--text);border:1px solid var(--border);background:rgba(255,255,255,.015)}
.btn-ghost::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(227,193,121,.16) 50%,transparent 70%);transform:translateX(-130%);animation:btn-sweep 5.6s var(--ease) infinite;pointer-events:none}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 12px 32px -16px var(--gold-glow)}
.btn-solid{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#05060a;box-shadow:0 12px 34px -10px var(--gold-glow),0 0 0 0 rgba(244,217,138,0);animation:btn-glow 3.4s ease-in-out infinite}
.btn-solid::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.55) 50%,transparent 72%);transform:translateX(-130%);animation:btn-sweep 3.8s var(--ease) infinite;mix-blend-mode:overlay;pointer-events:none}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px var(--gold-glow);animation-play-state:paused}
@keyframes btn-sweep{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}
@keyframes btn-glow{0%,100%{box-shadow:0 12px 34px -10px var(--gold-glow),0 0 0 0 rgba(244,217,138,0)}50%{box-shadow:0 16px 40px -8px var(--gold-glow),0 0 22px 2px rgba(244,217,138,.22)}}
@media(prefers-reduced-motion:reduce){.btn-solid,.btn-ghost::after,.btn-solid::after{animation:none}}

.hero-video{width:100%;max-width:var(--maxw);margin-top:46px}
.hv-shell{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  box-shadow:0 40px 100px -34px rgba(0,0,0,.95),0 0 50px -14px var(--blue-glow);background:#000}
.hv-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hv-loader{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.hv-loader span{width:34px;height:34px;border:2px solid rgba(95,208,255,.25);border-top-color:var(--blue-core);border-radius:50%;animation:spin 1s linear infinite}
.hv-glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(0,0,0,.55);border-radius:var(--radius)}
.hv-caption{margin-top:14px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

.scroll-cue{margin-top:42px;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue span{width:1px;height:36px;background:linear-gradient(var(--gold-soft),transparent);position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--blue-core);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{top:-50%}100%{top:120%}}

/* ===== MARQUEE ===== */
.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:18px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:46px;white-space:nowrap;width:max-content;animation:scrollx 26s linear infinite}
.marquee-track span{font-family:'Cormorant Garamond';font-size:26px;font-style:italic;color:rgba(242,239,232,.35);display:flex;align-items:center;gap:46px}
.marquee-track span::after{content:"✦";color:var(--gold-soft);font-style:normal;font-size:14px}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ===== SECTION HEADS ===== */
.sec-head{text-align:center;margin-bottom:46px}
.kicker{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-soft)}
.sec-title{font-family:'Cormorant Garamond';font-size:clamp(32px,9vw,46px);font-weight:600;margin-top:10px;line-height:1.12;text-shadow:0 2px 15px rgba(0,0,0,0.4)}
.sec-title em{background:linear-gradient(110deg,var(--gold-soft),var(--blue-core));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-desc{color:var(--muted);font-size:15px;margin:12px auto 0;max-width:380px;line-height:1.65;text-shadow:0 1px 8px rgba(0,0,0,0.5)}

/* ===== REVEALS ===== */
.reveal,.reveal-scale{opacity:0}
.reveal{transform:translateY(40px)}
.reveal-scale{transform:scale(.94)}

/* ===== FILTERS / TABS ===== */
.filters{display:flex;gap:8px;overflow-x:auto;padding:6px 24px 28px;max-width:var(--maxw);margin:0 auto;scrollbar-width:none;justify-content:center}
.filters::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.1);padding:10px 18px;border-radius:30px;background:transparent;cursor:pointer;transition:.35s var(--ease);flex:0 0 auto;font-family:inherit;letter-spacing:.3px}
.chip:hover{color:var(--text);border-color:rgba(199,154,58,.35)}
.chip.active{color:#05060a;background:linear-gradient(135deg,var(--gold-soft),var(--gold));border-color:transparent;box-shadow:0 0 20px var(--gold-glow)}
@media(max-width:560px){.filters{justify-content:flex-start;padding:6px 24px 28px}}

/* ===== GALLERY ===== */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;border:1px solid var(--border);background:var(--card);aspect-ratio:9/14;transition:transform .5s var(--ease),box-shadow .5s}
.card:hover{box-shadow:0 24px 50px -22px rgba(0,0,0,.9),0 0 30px -12px var(--blue-glow)}
.card:active{transform:scale(.97)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover img{transform:scale(1.08)}
.card .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.04) 58%)}
.card .play b{width:48px;height:48px;border-radius:50%;background:rgba(199,154,58,.94);display:grid;place-items:center;box-shadow:0 0 24px var(--gold-glow);transition:.35s}
.card:hover .play b{transform:scale(1.12);background:var(--blue-core);box-shadow:0 0 28px var(--blue-glow)}
.card .play b::after{content:"";border-left:14px solid #05060a;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.card .meta{position:absolute;left:11px;right:11px;bottom:11px;text-align:left}
.card .meta small{color:var(--gold-soft);font-size:9.5px;letter-spacing:1px;text-transform:uppercase}
.card .meta h3{font-size:13px;font-weight:500;line-height:1.25;margin-top:2px}
.loading{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 0;font-size:14px}
.spinner{width:32px;height:32px;border:2px solid rgba(199,154,58,.25);border-top-color:var(--gold);border-radius:50%;margin:0 auto 14px;animation:spin 1s linear infinite}

/* ===== SERVICES ===== */
.services{display:flex;flex-direction:column;gap:14px}
.svc{position:relative;padding:26px 24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden;transition:.45s var(--ease)}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(140% 80% at 100% 0,var(--blue-glow),transparent 55%);opacity:0;transition:.5s}
.svc:hover{border-color:var(--gold);transform:translateY(-3px)}
.svc:hover::before{opacity:.5}
.svc-no{font-family:'Cormorant Garamond';font-size:14px;color:var(--gold-soft);letter-spacing:2px}
.svc h3{font-family:'Cormorant Garamond';font-size:26px;font-weight:600;margin:6px 0 8px}
.svc p{color:var(--muted);font-size:13.5px;position:relative}
.svc-tag{display:inline-block;margin-top:14px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue-core);border:1px solid rgba(58,160,255,.25);padding:5px 11px;border-radius:20px}

/* ===== ABOUT ===== */
.about{text-align:center}
.statement{font-family:'Cormorant Garamond';font-size:clamp(24px,7vw,34px);line-height:1.42;max-width:440px;margin:0 auto}
.statement em{background:linear-gradient(110deg,var(--gold-soft),var(--blue-core));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic}
.reveal-words span{display:inline-block;opacity:.12;transition:opacity .4s}
.stats{display:flex;justify-content:center;gap:30px;margin-top:46px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center}
.stat b{font-family:'Cormorant Garamond';font-size:42px;color:var(--gold-soft);line-height:1;font-weight:600}
.stat span{font-family:'Cormorant Garamond';font-size:24px;color:var(--blue-core);margin-top:-6px}
.stat small{color:var(--muted);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;margin-top:8px}

/* ===== CONTACT ===== */
.contact-card{border:1px solid var(--border);border-radius:28px;padding:46px 28px;text-align:center;
  background:linear-gradient(165deg,rgba(199,154,58,.07),rgba(58,160,255,.05));position:relative;overflow:hidden}
.contact-card::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle at 30% 30%,var(--blue-glow),transparent 40%);opacity:.4;animation:float 18s ease-in-out infinite}
.contact-card>*{position:relative;z-index:1}
.contact-btns{display:flex;flex-direction:column;gap:12px;margin:28px 0 22px}
.cbtn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:16px;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;border:none;transition:transform .3s var(--ease),box-shadow .3s;font-family:inherit}
.cbtn svg{width:20px;height:20px;fill:#fff}
.cbtn-wa{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;box-shadow:0 14px 34px -12px rgba(37,211,102,.6)}
.cbtn-line{background:transparent;color:var(--gold-soft);border:1px solid var(--border)}
.cbtn:hover{transform:translateY(-2px)}
.contact-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.meta-link{font-size:12px;color:var(--muted);text-decoration:none;border:1px solid rgba(255,255,255,.08);padding:8px 15px;border-radius:30px;background:transparent;cursor:pointer;transition:.35s;font-family:inherit}
.meta-link:hover{color:var(--blue-core);border-color:rgba(58,160,255,.3)}

/* ===== FOOTER ===== */
footer{text-align:center;padding:44px 24px 110px;border-top:1px solid rgba(255,255,255,.05)}
.foot-logo{width:46px;margin:0 auto 16px;opacity:.85;filter:drop-shadow(0 0 12px var(--blue-glow))}
footer p{color:var(--muted);font-size:13px}
footer b{color:var(--gold-soft)}
.foot-tag{font-size:11px;margin-top:6px;opacity:.7}

/* ===== FAB ===== */
.fab{position:fixed;bottom:22px;right:18px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);display:grid;place-items:center;
  box-shadow:0 12px 32px -8px rgba(37,211,102,.7);text-decoration:none;animation:pulse 2.6s infinite;transition:transform .3s}
.fab:hover{transform:scale(1.08)}
.fab svg{width:29px;height:29px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ===== PREMIUM LIGHTBOX & SMART WHATSAPP CTA ===== */
.lb{position:fixed;inset:0;z-index:200;background:rgba(3,4,8,.94);backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;padding:20px 16px;opacity:0;transition:opacity .4s var(--ease);
  overflow-y:auto}
.lb.open{display:flex;opacity:1}

.lb-wrapper{width:100%;margin:auto;display:flex;flex-direction:column;align-items:center;position:relative;z-index:205;transition:max-width .4s var(--ease)}
.lb-wrapper.is-horizontal-wrapper{max-width:800px}
.lb-wrapper.is-vertical-wrapper{max-width:340px}

.lb-inner{width:100%;border-radius:18px;overflow:hidden;position:relative;
  border:1px solid rgba(199,154,58,.4);box-shadow:0 0 70px -10px var(--blue-glow),0 20px 60px rgba(0,0,0,.95);
  background:#000;transition:transform .4s var(--ease);transform:scale(.95)}
.lb.open .lb-inner{transform:scale(1)}

/* Aspect Ratios for Lightbox */
.lb-inner.is-horizontal{aspect-ratio:16/9;width:100%}
.lb-inner.is-vertical{aspect-ratio:9/16;width:100%;max-height:60vh}

.lb-inner iframe{width:100%;height:100%;border:0;display:block}

.lb-title{width:100%;display:flex;justify-content:center}

/* Action Card below video frame */
.lb-action-card{width:100%;margin-top:14px;
  background:linear-gradient(135deg,rgba(18,22,34,.96),rgba(8,10,18,.98));
  backdrop-filter:blur(16px);border:1px solid rgba(199,154,58,.35);
  border-radius:18px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;box-shadow:0 15px 40px rgba(0,0,0,.7)}

.lb-info{display:flex;flex-direction:column;gap:3px;text-align:left;flex:1;min-width:0}
.lb-tag{font-family:'Inter',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-soft)}
.lb-video-heading{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;margin:0}

/* Smart WhatsApp Button */
.lb-wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:99px;
  background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);
  color:#ffffff !important;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.3px;text-decoration:none !important;
  box-shadow:0 8px 24px -4px rgba(37,211,102,.5),0 0 16px rgba(37,211,102,.3);
  border:1px solid rgba(255,255,255,.3);transition:all .3s var(--ease);
  white-space:nowrap;flex-shrink:0;cursor:pointer}
.lb-wa-btn svg{width:18px;height:18px;fill:#ffffff !important;flex-shrink:0;transition:transform .3s var(--ease)}
.lb-wa-btn:hover{transform:translateY(-2px) scale(1.03);
  background:linear-gradient(135deg,#28e16f 0%,#149c8c 100%);
  box-shadow:0 12px 30px -2px rgba(37,211,102,.7),0 0 24px rgba(37,211,102,.5);
  color:#ffffff !important;text-decoration:none !important}
.lb-wa-btn:hover svg{transform:rotate(8deg) scale(1.1)}

.lb-close{position:absolute;top:20px;right:24px;z-index:220;width:44px;height:44px;border-radius:50%;
  background:rgba(12,15,24,.85);backdrop-filter:blur(10px);border:1px solid rgba(199,154,58,.4);
  color:var(--gold-soft);font-size:20px;display:grid;place-items:center;cursor:pointer;
  transition:all .3s var(--ease)}
.lb-close:hover{background:rgba(199,154,58,.25);color:#fff;transform:scale(1.1);border-color:var(--gold-soft)}

@media(max-width:640px){
  .lb-action-card{flex-direction:column;align-items:stretch;text-align:center;padding:14px 16px;gap:10px}
  .lb-info{text-align:center}
  .lb-video-heading{font-size:16px;white-space:normal}
  .lb-wa-btn{width:100%;justify-content:center;padding:11px 16px;font-size:13px}
  .lb-close{top:12px;right:14px;width:38px;height:38px;font-size:18px}
}

/* ===== UPI MODAL ===== */
.upi .upi-card{background:linear-gradient(165deg,#0c0e16,#070810);border:1px solid var(--border);
  border-radius:24px;padding:38px 30px;text-align:center;max-width:340px;width:100%;transform:scale(.9);transition:transform .4s var(--ease)}
.upi.open .upi-card{transform:scale(1)}
.upi-card h3{font-family:'Cormorant Garamond';font-size:28px;font-weight:600;margin-bottom:10px}
#upiId{font-size:16px;color:var(--gold-soft);letter-spacing:.5px;margin-bottom:20px;cursor:pointer;word-break:break-all}
.upi-card .cbtn{margin-bottom:14px}
.upi-card small{color:var(--muted);font-size:12px}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.reveal-scale{opacity:1!important;transform:none!important}}
@media(min-width:560px){:root{--maxw:520px}}

/* ============================================================
   FEATURED STRIP — signature piece, two invitation films, one
   live wedding website mockup, sitting above the tabbed Work.
   ============================================================ */
.featured{padding-bottom:24px}
.featured-wrap{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch}
.fx{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  border:1px solid var(--border);background:var(--card);
  box-shadow:0 30px 80px -38px rgba(0,0,0,.95);transition:transform .5s var(--ease),box-shadow .5s}
.fx:hover{transform:translateY(-3px);box-shadow:0 36px 90px -32px rgba(0,0,0,.95),0 0 36px -14px var(--blue-glow)}
.fx img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.fx:hover img{transform:scale(1.05)}
.fx .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.05) 60%)}
.fx .play b{width:54px;height:54px;border-radius:50%;background:rgba(199,154,58,.94);display:grid;place-items:center;box-shadow:0 0 26px var(--gold-glow);transition:.35s}
.fx:hover .play b{transform:scale(1.12);background:var(--blue-core);box-shadow:0 0 30px var(--blue-glow)}
.fx .play b::after{content:"";border-left:16px solid #05060a;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.fx figcaption{position:absolute;left:14px;right:14px;bottom:14px;text-align:left;z-index:2}
.fx figcaption small{color:var(--gold-soft);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;display:block}
.fx figcaption h3{font-family:'Cormorant Garamond';font-size:20px;font-weight:600;margin-top:4px;color:#fff;line-height:1.2}
.fx-tag{display:inline-block;margin-top:8px;font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--blue-core);border:1px solid rgba(58,160,255,.3);padding:4px 10px;border-radius:20px;background:rgba(0,0,0,.25)}

/* the hero tribute is tallest, full-width */
.fx-hero{aspect-ratio:16/10;grid-column:1/-1}
.fx-hero img{aspect-ratio:16/10}
.fx-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;grid-column:1/-1}
.fx-vid{aspect-ratio:9/14}
.fx-vid img{aspect-ratio:9/14}

/* the live wedding-site mockup */
.fx-site{aspect-ratio:auto;display:flex;flex-direction:column;grid-column:1/-1;background:linear-gradient(165deg,rgba(199,154,58,.06),rgba(58,160,255,.04))}
.fx-site .device-mock{flex:1;min-height:300px;display:flex;flex-direction:column}
.fx-site figcaption{position:static;padding:18px 20px}
.fx-site figcaption p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.4}

@media(min-width:560px){
  .featured-wrap{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .fx-hero{grid-column:1/-1;aspect-ratio:16/8}
  .fx-col{grid-column:1}
  .fx-site{grid-column:2;grid-row:2}
}

/* ============================================================
   COLLECTION — the tabbed Work body
   (video grid reuses the existing .card/.meta; mockups use .mock)
   ============================================================ */
.collection{min-height:300px}
.collection .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* site mockup cards */
.collection .mock{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--card);transition:transform .5s var(--ease),box-shadow .5s}
.collection .mock:hover{transform:translateY(-3px);box-shadow:0 30px 80px -34px rgba(0,0,0,.95),0 0 30px -14px var(--blue-glow)}
.collection .mock figcaption{padding:16px 18px 18px;text-align:left}
.collection .mock figcaption small{color:var(--gold-soft);font-size:10px;letter-spacing:1.3px;text-transform:uppercase}
.collection .mock figcaption h3{font-family:'Cormorant Garamond';font-size:22px;font-weight:600;margin-top:4px}
.collection .mock figcaption p{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.4}
.collection .mock{margin-bottom:16px}
.collection [class*=grid]{grid-row-gap:0}

.fx-visit{display:inline-block;margin-top:12px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--blue-core);text-decoration:none;border:1px solid rgba(58,160,255,.3);padding:8px 16px;border-radius:30px;
  transition:.35s var(--ease);cursor:pointer}
.fx-visit:hover{background:rgba(58,160,255,.12);border-color:var(--blue-core);box-shadow:0 0 18px -6px var(--blue-glow)}
.fx-visit--off{cursor:default;color:var(--muted);border-color:rgba(255,255,255,.1)}
.fx-visit--off:hover{background:transparent;box-shadow:none}

/* ---- device mockup ---- */
.device-mock{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);background:#0a0c14;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.mock-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#0d0f18;border-bottom:1px solid rgba(255,255,255,.05)}
.mock-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.mock-dot.r{background:#ff5f57}.mock-dot.y{background:#febc2e}.mock-dot.g{background:#28c840}
.mock-bar em{margin-left:8px;font-style:normal;font-size:10.5px;color:var(--muted);font-family:'Inter';letter-spacing:.4px;text-transform:lowercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.mock-screen{position:relative;flex:1;min-height:220px;background:linear-gradient(160deg,#0c0f1a,#06080f);overflow:hidden;background-size:cover;background-position:center}
.mock-screen--nolink::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(199,154,58,.08),rgba(58,160,255,.06));}
.mock-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;transform-origin:top left}
.mock-fallback,.mock-private{position:absolute;inset:0;display:grid;place-items:center;place-content:center;gap:6px;
  background:linear-gradient(160deg,rgba(12,15,26,.96),rgba(6,8,15,.96));text-align:center;padding:20px}
.mock-mono{font-family:'Inter';font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-soft);opacity:.85}
.mock-couple{font-family:'Cormorant Garamond';font-size:22px;color:var(--text);font-weight:600;margin-top:4px}
.mock-note{font-size:12px;color:var(--muted);max-width:240px;margin-top:2px}
.mock-notch{display:none}
.fx-site .mock-screen{min-height:260px}

/* ============================================================
   SOUTH-INDIAN DIVIDERS — subtle temple-arch + marigold dot motif
   between sections, anchoring the cultural register quietly.
   ============================================================ */
.dvr{display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 0;color:var(--gold-soft);opacity:.7}
.dvr::before,.dvr::after{content:"";height:1px;flex:1;max-width:90px;background:linear-gradient(90deg,transparent,rgba(199,154,58,.4),transparent)}
.dvr-arch{width:18px;height:22px;border:1px solid rgba(199,154,58,.5);border-bottom:0;border-radius:18px 18px 0 0;position:relative}
.dvr-arch::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 10px var(--gold-glow)}

/* ============================================================
   ABYSS CONTACT — at the bottom of the page the background is
   near-black; keep the contact card readable with a deeper tint.
   ============================================================ */
.contact .contact-card{background:linear-gradient(165deg,rgba(199,154,58,.10),rgba(58,160,255,.07),rgba(5,8,14,.4));border-color:rgba(199,154,58,.22)}
.contact .sec-title em{background:linear-gradient(110deg,var(--gold-soft),#fff 40%,var(--blue-core));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* the featured strip doesn't render .reveal-scale hidden when gsap not ready */
.featured .reveal-scale{opacity:1;transform:none}

/* ============================================================
   HORIZONTAL CAROUSEL — for tribute videos & name reveals
   Slide-by-slide horizontal scroll with navigation
   ============================================================ */
.carousel-container{position:relative;width:100%;max-width:900px;margin:0 auto;padding:0 24px}
.carousel-track-wrapper{position:relative;border-radius:var(--radius)}
.carousel-track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;border-radius:var(--radius);
  padding:0;margin:0;touch-action:pan-x pan-y}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-item{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  aspect-ratio:16/9;position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:#000;cursor:pointer;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 40px -12px var(--blue-glow)}
.carousel-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.carousel-item:hover img{transform:scale(1.06)}
.carousel-item .play{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.05) 58%)}
.carousel-item .play b{width:64px;height:64px;border-radius:50%;background:rgba(199,154,58,.95);
  display:grid;place-items:center;box-shadow:0 0 28px var(--gold-glow);transition:.35s}
.carousel-item:hover .play b{transform:scale(1.14);background:var(--blue-core);box-shadow:0 0 32px var(--blue-glow)}
.carousel-item .play b::after{content:"";border-left:18px solid #05060a;border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:4px}
.carousel-item .meta{position:absolute;left:16px;right:16px;bottom:16px;text-align:left;z-index:2}
.carousel-item .meta small{color:var(--gold-soft);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;display:block}
.carousel-item .meta h3{font-family:'Cormorant Garamond';font-size:22px;font-weight:600;margin-top:5px;
  color:#fff;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,0.8)}

.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:48px;height:48px;border-radius:50%;background:rgba(5,6,10,.72);backdrop-filter:blur(10px);
  border:1px solid var(--border);color:var(--gold-soft);font-size:30px;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:.35s var(--ease);user-select:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
.carousel-nav:hover{background:rgba(199,154,58,.18);border-color:var(--gold);color:var(--gold-bright);
  box-shadow:0 0 24px var(--gold-glow)}
.carousel-nav:active{transform:translateY(-50%) scale(.94)}
.carousel-prev{left:10px}
.carousel-next{right:10px}
.carousel-nav:disabled{opacity:0;cursor:not-allowed;pointer-events:none}

.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:24px}
.carousel-dot{width:10px;height:10px;border-radius:50%;background:rgba(199,154,58,.25);
  border:1px solid transparent;cursor:pointer;transition:.3s;padding:0}
.carousel-dot:hover{background:rgba(199,154,58,.5)}
.carousel-dot.active{background:var(--gold-soft);box-shadow:0 0 12px var(--gold-glow);transform:scale(1.2)}

/* Phones & tablets: smaller overlay arrows; the card still uses full width */
@media(max-width:768px){
  .carousel-container{padding:0 20px}
  .carousel-nav{width:42px;height:42px;font-size:24px}
  .carousel-prev{left:8px}
  .carousel-next{right:8px}
}
@media(max-width:560px){
  .carousel-nav{width:40px;height:40px;font-size:22px;opacity:.92}
}

/* ============================================================
   VERTICAL VIDEOS — 9:16 invitation videos side by side
   ============================================================ */
.vertical-videos-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:600px;margin:0 auto;align-items:start}
.vertical-video-item{aspect-ratio:9/16;position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:#000;cursor:pointer;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 40px -12px var(--blue-glow);transition:.5s var(--ease)}
.vertical-video-item:hover{transform:translateY(-5px);box-shadow:0 36px 80px -28px rgba(0,0,0,.95),0 0 45px -10px var(--blue-glow)}
.vertical-video-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.vertical-video-item:hover img{transform:scale(1.06)}
.vertical-video-item .play{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.05) 58%)}
.vertical-video-item .play b{width:60px;height:60px;border-radius:50%;background:rgba(199,154,58,.95);
  display:grid;place-items:center;box-shadow:0 0 28px var(--gold-glow);transition:.35s}
.vertical-video-item:hover .play b{transform:scale(1.14);background:var(--blue-core);box-shadow:0 0 32px var(--blue-glow)}
.vertical-video-item .play b::after{content:"";border-left:17px solid #05060a;border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:4px}
.vertical-video-item .meta{position:absolute;left:14px;right:14px;bottom:14px;text-align:left;z-index:2}
.vertical-video-item .meta small{color:var(--gold-soft);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;display:block}
.vertical-video-item .meta h3{font-family:'Cormorant Garamond';font-size:18px;font-weight:600;margin-top:4px;
  color:#fff;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,0.8)}

/* Keep the two 9:16 invitation videos side-by-side at EVERY size — they are
   designed to sit as a pair. Only tighten the gap on small phones. */
@media(max-width:560px){
  .vertical-videos-wrap{gap:14px;max-width:100%}
  .vertical-video-item .play b{width:52px;height:52px}
  .vertical-video-item .meta{left:11px;right:11px;bottom:11px}
  .vertical-video-item .meta h3{font-size:15px}
  .vertical-video-item .meta small{font-size:9px}
}

/* ============================================================
   WEDDING SITES GRID & AI BUILDS GRID
   ============================================================ */
.wedding-sites-grid,.ai-builds-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.site-card,.ai-build-card{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--card);transition:transform .5s var(--ease),box-shadow .5s}
.site-card:hover,.ai-build-card:hover{transform:translateY(-4px);
  box-shadow:0 32px 80px -32px rgba(0,0,0,.95),0 0 35px -12px var(--blue-glow)}
.site-card .device-mock,.ai-build-card .device-mock{flex:1;min-height:280px;display:flex;flex-direction:column;
  border-radius:14px;margin:12px 12px 0;overflow:hidden;border:1px solid rgba(255,255,255,.06);
  background:#0a0c14;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.site-card .mock-screen,.ai-build-card .mock-screen{position:relative;flex:1;
  background:linear-gradient(160deg,#0c0f1a,#06080f);overflow:hidden}
.site-card .mock-screen iframe,.ai-build-card .mock-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Poster image preview — a real screenshot of the live site */
.site-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .8s var(--ease);display:block}
.site-card:hover .site-poster,.ai-build-card:hover .site-poster{transform:scale(1.05)}

/* "Open Site" overlay that appears over the poster on hover/tap */
.mock-open{position:absolute;inset:0;display:grid;place-items:center;z-index:3;
  background:linear-gradient(to top,rgba(3,5,11,.72),rgba(3,5,11,.12) 55%);
  opacity:0;transition:opacity .4s var(--ease);text-decoration:none}
.mock-open span{font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:#fff;background:rgba(199,154,58,.92);padding:11px 22px;border-radius:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 24px var(--gold-glow);transform:translateY(8px);transition:transform .4s var(--ease)}
.site-card:hover .mock-open,.ai-build-card:hover .mock-open,
.site-card .mock-screen:active .mock-open{opacity:1}
.site-card:hover .mock-open span{transform:translateY(0)}

/* Touch devices: no hover — keep the Open Site chip subtly visible */
@media(hover:none),(pointer:coarse){
  .mock-open{opacity:1;background:linear-gradient(to top,rgba(3,5,11,.6),transparent 45%)}
  .mock-open span{transform:none;padding:9px 18px;font-size:11px}
}

/* Ensure poster cards have a consistent, tall-enough screen */
.site-card .mock-screen,.ai-build-card .mock-screen{min-height:340px}
@media(max-width:560px){
  .site-card .mock-screen,.ai-build-card .mock-screen{min-height:400px}
}
.site-card figcaption,.ai-build-card figcaption{padding:18px 20px 20px;text-align:left}
.site-card figcaption small,.ai-build-card figcaption small{color:var(--gold-soft);font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;display:block}
.site-card figcaption h3,.ai-build-card figcaption h3{font-family:'Cormorant Garamond';font-size:24px;
  font-weight:600;margin-top:5px;line-height:1.2}
.site-card figcaption p,.ai-build-card figcaption p{color:var(--muted);font-size:13.5px;margin-top:7px;line-height:1.5}
.site-card .site-visit,.ai-build-card .build-visit{display:inline-block;margin-top:12px;font-size:12px;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--blue-core);text-decoration:none;
  border:1px solid rgba(58,160,255,.3);padding:8px 16px;border-radius:30px;transition:.35s var(--ease)}
.site-card .site-visit:hover,.ai-build-card .build-visit:hover{background:rgba(58,160,255,.12);
  border-color:var(--blue-core);box-shadow:0 0 18px -6px var(--blue-glow)}
.site-card .site-visit--private,.ai-build-card .build-visit--private{color:var(--muted);
  border-color:rgba(255,255,255,.1);cursor:default}
.site-card .site-visit--private:hover,.ai-build-card .build-visit--private:hover{background:transparent;box-shadow:none}

.mock-fallback{position:absolute;inset:0;display:grid;place-items:center;place-content:center;gap:8px;
  background:linear-gradient(160deg,rgba(12,15,26,.96),rgba(6,8,15,.96));text-align:center;padding:20px}
.mock-mono{font-family:'Inter';font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gold-soft);opacity:.85}
.mock-couple{font-family:'Cormorant Garamond';font-size:24px;color:var(--text);font-weight:600;margin-top:5px}
.mock-note{font-size:12.5px;color:var(--muted);max-width:260px;margin-top:3px;line-height:1.5}

@media(max-width:560px){
  .wedding-sites-grid,.ai-builds-grid{grid-template-columns:1fr}
}
   HORIZONTAL 9:16 INVITATION CAROUSEL
   Arranged horizontally like tribute videos, but with 9:16 frame ratio
   ============================================================ */
.invitation-carousel-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  border-radius:var(--radius);
  padding:8px 4px;
}
.invitation-carousel-track::-webkit-scrollbar{display:none}

.carousel-item-916{
  flex:0 0 calc(33.333% - 12px);
  max-width:280px;
  aspect-ratio:9/16;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
  cursor:pointer;
  box-shadow:0 25px 65px -25px rgba(0,0,0,.9),0 0 35px -12px var(--blue-glow);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.carousel-item-916:hover{
  transform:translateY(-6px);
  box-shadow:0 35px 80px -20px rgba(0,0,0,.95),0 0 45px -10px var(--blue-glow);
}
.carousel-item-916 img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.carousel-item-916:hover img{transform:scale(1.06)}
.carousel-item-916 .play{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.05) 58%)}
.carousel-item-916 .play b{width:56px;height:56px;border-radius:50%;background:rgba(199,154,58,.95);
  display:grid;place-items:center;box-shadow:0 0 28px var(--gold-glow);transition:.35s}
.carousel-item-916:hover .play b{transform:scale(1.14);background:var(--blue-core);box-shadow:0 0 32px var(--blue-glow)}
.carousel-item-916 .play b::after{content:"";border-left:16px solid #05060a;border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px}
.carousel-item-916 .meta{position:absolute;left:14px;right:14px;bottom:14px;text-align:left;z-index:2}
.carousel-item-916 .meta small{color:var(--gold-soft);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;display:block}
.carousel-item-916 .meta h3{font-family:'Cormorant Garamond';font-size:18px;font-weight:600;margin-top:4px;
  color:#fff;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,0.8)}

@media(max-width:768px){
  .carousel-item-916{flex:0 0 calc(50% - 10px);max-width:260px}
}
@media(max-width:520px){
  .carousel-item-916{flex:0 0 210px;max-width:210px}
}font-size:12.5px}
}