/* Olpopongi — motion homepage (Forge-style). Loaded only on the front page,
   in place of main.css, so its generic class names don't collide. */
:root{--ink:#1b1712;--ivory:#f4efe6;--bronze:#d9b074;--bronzed:#b98f4f;--base:#14100b;--line:rgba(244,239,230,.18);--disp:'Prata',Georgia,serif;--ui:'Jost',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
#olp-pl,.site-header,.site-footer,.pagebg{display:none!important}
html.pl-on{overflow:visible!important}
body{font-family:var(--ui);font-weight:300;background:var(--base);color:var(--ivory);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden;height:100vh}
.wrap{max-width:1280px;margin:0 auto;padding:0 44px}
@media(max-width:640px){.wrap{padding:0 20px}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.kick{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze);font-weight:400}

/* Forge button: on hover the letters cascade down (staggered) and the whole
   text fades to 0.6 inside a clipped box, while the border lightens. No duplicate. */
.btn{position:relative;display:inline-block;padding:16px 32px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--line);color:var(--ivory);transition:border-color .5s ease,background .5s ease}
.btn:hover{border-color:color-mix(in srgb,var(--bronze) 45%,transparent)}
.btn .roll{display:inline-block;overflow:hidden;line-height:1.2;vertical-align:middle;transition:opacity .5s ease}
.btn:hover .roll{opacity:.6}
.btn .roll b{display:inline-block;font-weight:inherit;transition:transform .5s cubic-bezier(.43,.195,.02,1);transition-delay:var(--d,0s)}
.btn:hover .roll b{transform:translateY(2.4em)}
.ul{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:5px;transition:gap .35s,opacity .35s}
.ul:hover{gap:16px;opacity:.75}

body::before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(70% 60% at 80% 8%,rgba(217,176,116,.07),transparent 55%),var(--base)}
/* changing photographic backdrop (blurred + dimmed), crossfades per section */
.mbg{position:fixed;inset:0;z-index:-2;background:var(--base)}
.mbg .a,.mbg .b{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;filter:blur(7px) brightness(.62);transform:scale(1.08)}
.mbg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,10,6,.26),rgba(13,10,6,.46))}
.grain{position:fixed;inset:0;z-index:-1;opacity:.3;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%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")}
.topscrim{position:fixed;top:0;left:0;right:0;height:96px;z-index:59;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,11,.92),rgba(20,16,11,0))}

/* PRELOADER — dark panel, brand + live counter, lifts away like a curtain */
#mintro{position:fixed;inset:0;z-index:100;background:#0d0a06;overflow:hidden;will-change:transform}
#mintro .plwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:0 24px}
#mintro .pl-kick{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--bronze);opacity:0}
#mintro .pl-brand{font-family:var(--disp);font-size:clamp(32px,6vw,74px);line-height:1.1;letter-spacing:-.01em;overflow:hidden;max-width:92vw}
#mintro .pl-brand span{display:inline-block;transform:translateY(110%);white-space:nowrap}
#mintro .pl-brand .dot{color:var(--bronze)}
#mintro .pl-num{position:absolute;bottom:46px;right:48px;font-family:var(--disp);font-size:clamp(40px,9vw,96px);line-height:1;color:var(--bronze);opacity:.9}
#mintro .pl-num .pc{font-size:.4em;vertical-align:.5em;margin-left:4px;opacity:.7}
#mintro .bar{position:absolute;left:48px;right:48px;bottom:40px;height:1px;background:rgba(244,239,230,.16);z-index:2}
#mintro .bar i{display:block;height:100%;width:0;background:var(--bronze)}
#mintro .plwrap,#mintro .pl-num{z-index:2}
#mintro .pl-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
#mintro .pl-bg .pimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;filter:brightness(.6) blur(2px);transform:scale(1.06);transition:opacity .6s ease}
#mintro .pl-bg .pimg.on{opacity:1}
#mintro .pl-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,10,6,.42),rgba(13,10,6,.58))}
@media(max-width:640px){#mintro .pl-num{right:24px;bottom:40px}#mintro .bar{left:24px;right:24px}}

.mhdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:22px 44px;opacity:0}
.mhdr .soc{display:flex;gap:16px;font-size:12px;letter-spacing:.1em;opacity:.8}
.mhdr .logo{font-family:var(--disp);font-size:22px;position:absolute;left:50%;transform:translateX(-50%)}.mhdr .logo span{color:var(--bronze)}
.mhdr .navbtn{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;background:none;border:0;color:var(--ivory)}
.mhdr .navbtn .bars{display:inline-flex;flex-direction:column;gap:4px}.mhdr .navbtn .bars i{width:22px;height:1.5px;background:var(--ivory)}
@media(max-width:640px){.mhdr .soc{display:none}.mhdr{padding:18px 20px}}
#mprog{position:fixed;left:0;bottom:0;height:2px;background:var(--bronze);width:0;z-index:55}

#mmenu{position:fixed;inset:0;z-index:80;background:linear-gradient(160deg,#241109,#15100a);transform:translateY(-100%);visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
#mmenu.open{transform:none;visibility:visible}
#mmenu .close{position:absolute;top:30px;right:44px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
#mmenu nav{display:flex;flex-direction:column;align-items:center;gap:6px}
#mmenu nav a{font-family:var(--disp);font-size:clamp(32px,6vw,72px);line-height:1.12;opacity:.85;transition:opacity .3s,color .3s}
#mmenu nav a:hover{color:var(--bronze);opacity:1}
#mmenu .mfoot{position:absolute;bottom:28px;left:0;right:0;display:flex;justify-content:space-between;padding:0 44px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,230,.5)}
@media(max-width:640px){#mmenu .mfoot{padding:0 20px;flex-direction:column;gap:6px;text-align:center}}

section{position:relative}
.im-cover{background-size:cover;background-position:center}

/* HERO */
#mhero{height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
#mhero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}#mhero .slide.on{opacity:1}
#mhero .slide i{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);animation:kb 7s ease-out forwards}
@keyframes kb{to{transform:scale(1.16)}}
#mhero .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,10,6,.2),rgba(13,10,6,.5) 55%,rgba(13,10,6,.95))}
#mhero .hc{position:relative;z-index:3;padding-bottom:10vh}
#mhero .hc .kick{opacity:0}
#mhero h1{font-family:var(--disp);font-weight:400;font-size:clamp(42px,7.6vw,92px);line-height:1;letter-spacing:-.01em;max-width:15ch;min-height:1.05em}
#mhero h1 .sw{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(10px);margin-right:.26em}
#mhero p{margin:18px 0 26px;font-size:17px;max-width:40ch;opacity:0}
#mhero .dots{display:flex;gap:10px;margin-top:8px;opacity:0}
#mhero .dots b{width:30px;height:2px;background:rgba(244,239,230,.3);cursor:pointer;transition:background .3s}#mhero .dots b.on{background:var(--bronze)}

/* STATEMENT */
#msay{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}
#msay p{font-family:var(--disp);font-weight:400;font-size:clamp(32px,5.6vw,72px);line-height:1.14;max-width:18ch}
#msay w{display:inline-block;opacity:.12;filter:blur(6px);margin:0 .14em}
/* photo behind the dark text sections */
.secbg{position:absolute;inset:0;overflow:hidden;z-index:0}
.secbg .im{position:absolute;inset:-7%;background-size:cover;background-position:center}
.secbg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,10,6,.58),rgba(13,10,6,.74))}
#msay>*:not(.secbg),#mend>*:not(.secbg){position:relative;z-index:2}

/* FEATURE */
.mfeat{padding:10vh 0}
.mfeat .frame{position:relative;height:74vh;margin:0 44px;border-radius:4px;overflow:hidden;display:flex;align-items:center}
.mfeat .frame .im{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12)}
.mfeat .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,4,.78),rgba(10,7,4,.25))}
.mfeat .fc{position:relative;z-index:2;padding:0 6vw;max-width:760px}
.mfeat h2{font-family:var(--disp);font-weight:400;font-size:clamp(32px,4.4vw,60px);line-height:1.04;margin-bottom:24px}
.mfeat .trust{display:flex;gap:24px;align-items:center;flex-wrap:wrap;opacity:.85;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:22px 0}
.mfeat .trust b{font-family:var(--disp);font-weight:400;letter-spacing:0;text-transform:none;font-size:20px;color:var(--bronze)}
@media(max-width:640px){.mfeat .frame{margin:0 20px;height:auto;padding:40px 0}.mfeat .fc{padding:0 24px}}

/* STEPPER */
#mstep{height:100vh;overflow:hidden;display:flex;align-items:center}
#mstep .bgwash{position:absolute;inset:-5%;background-size:cover;background-position:center;opacity:.5;filter:blur(46px) brightness(.5);transition:opacity .6s}
#mstep .inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;width:100%}
@media(max-width:820px){#mstep .inner{grid-template-columns:1fr}}
#mstep .frame{aspect-ratio:4/5;border-radius:4px;overflow:hidden;position:relative;background:#1c140b}
#mstep .frame .im{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s;transform:scale(1.08)}
#mstep .right{position:relative;min-height:430px}
#mstep .count{font-family:var(--disp);font-size:30px}#mstep .count b{color:var(--bronze);font-weight:400}#mstep .count s{color:var(--bronzed);text-decoration:none;opacity:.5}
#mstep .ghost{font-family:var(--disp);font-size:clamp(56px,10vw,118px);line-height:1;position:absolute;top:54px;left:-6px;color:rgba(244,239,230,.09);pointer-events:none;white-space:nowrap}
#mstep .st{position:absolute;top:150px;left:0;right:0;opacity:0;transition:opacity .5s,transform .5s;transform:translateY(16px)}
#mstep .st.on{opacity:1;transform:none}
#mstep .st h3{font-family:var(--disp);font-weight:400;font-size:clamp(30px,5vw,52px);margin-bottom:14px}
#mstep .st p{max-width:38ch;opacity:.86;margin-bottom:24px}

/* TWO-TONE */
.mtline{min-height:92vh;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:40px;padding:0 44px}
.mtline h2{font-family:var(--disp);font-weight:400;font-size:clamp(36px,5.4vw,74px);line-height:1.08}
.mtline h2 w{color:rgba(244,239,230,.22)}
.mtline .side{align-self:stretch;min-height:56vh;border-radius:4px;overflow:hidden;position:relative}
.mtline .side .im{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.14)}
.mtline p{opacity:.82;max-width:40ch;margin:22px 0 26px}
@media(max-width:820px){.mtline{grid-template-columns:1fr;padding:60px 20px}.mtline .side{min-height:40vh}}

/* SAFARIS slider */
#msaf{height:100vh;overflow:hidden}
#msaf .pin{height:100vh;display:flex;align-items:center}
#msaf .head{position:absolute;top:19vh;left:0;width:34vw;padding-left:6vw;z-index:3}
#msaf .head::before{content:"";position:absolute;inset:-34vh -10vw -34vh -6vw;z-index:-1;background:linear-gradient(90deg,var(--base) 64%,rgba(20,16,11,.92) 84%,transparent)}
#msaf .head h2{font-family:var(--disp);font-weight:400;font-size:clamp(34px,4.6vw,58px);line-height:1.05;margin:12px 0 16px}
#msaf .head p{opacity:.8;max-width:30ch;margin-bottom:22px}
#msaf .head .cc{font-family:var(--disp);font-size:20px;color:var(--bronze);margin-top:22px}
#msaf .track{display:flex;gap:26px;padding-left:40vw;padding-right:8vw;will-change:transform}
#msaf .card{flex:0 0 340px;height:62vh;border-radius:6px;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:#1c140b}
#msaf .card i{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s ease}#msaf .card:hover i{transform:scale(1.06)}
#msaf .card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,4,.85),rgba(10,7,4,.05) 60%)}
#msaf .card .cc{position:relative;z-index:2;padding:22px}
#msaf .card .n{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
#msaf .card h3{font-family:var(--disp);font-weight:400;font-size:25px;line-height:1.1;margin:8px 0 6px}
#msaf .card .pr{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
@media(max-width:820px){#msaf{height:auto}#msaf .pin{display:block;padding:70px 0}#msaf .head{position:static;width:auto;padding:0 20px}#msaf .head::before{display:none}#msaf .track{padding:24px 20px 0;overflow-x:auto}#msaf .card{flex-basis:260px;height:360px}}

/* SERVICE (itineraries / destinations / lodges) */
.msvc{min-height:96vh;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.msvc .tx{padding:60px}
.msvc .media{align-self:stretch;min-height:66vh;position:relative;overflow:hidden;clip-path:inset(0 0 0 100%)}
.msvc.rev{direction:rtl}.msvc.rev .tx{direction:ltr}
.msvc.rev .media{clip-path:inset(0 100% 0 0)}
.msvc .media .im{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.16)}
.msvc .lab{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze);margin-bottom:14px}
.msvc h2{font-family:var(--disp);font-weight:400;font-size:clamp(40px,6vw,86px);line-height:1;margin-bottom:18px}
.msvc p{max-width:40ch;opacity:.84;margin-bottom:26px}
@media(max-width:820px){.msvc{grid-template-columns:1fr}.msvc .media{min-height:48vh;clip-path:inset(0 0 0 0)!important}.msvc.rev{direction:ltr}}

/* CLOSING + FOOTER */
#mend{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:30px}
#mend .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze)}
#mend h2{font-family:var(--disp);font-weight:400;font-size:clamp(44px,10vw,120px);line-height:1}#mend h2 .fade{color:var(--bronzed);opacity:.5}
.mfoot2{border-top:1px solid var(--line);padding:28px 44px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,239,230,.55)}
.mfoot2 .top{cursor:pointer;color:var(--bronze)}
@media(max-width:640px){.mfoot2{padding:24px 20px}}

/* GALLERY + REVIEWS (just before the footer) */
.mgal{padding:13vh 0}
.mgal .ghead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px}
.mgal .ghead h2{font-family:var(--disp);font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.08}
.mgal .ghead .kick{display:block;margin-bottom:12px}
.mgal .grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:16px}
@media(max-width:820px){.mgal .grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px}}
@media(max-width:560px){.mgal .grid{grid-template-columns:1fr;grid-auto-rows:220px}}
.mgal .gcell{position:relative;overflow:hidden;border-radius:4px;opacity:0;transform:translateY(36px) scale(.98)}
.mgal .gcell.tall{grid-row:span 2}
.mgal .gph{background-size:cover;background-position:center}
.mgal .gph i{position:absolute;inset:-6%;background-size:cover;background-position:center;transition:transform 1.2s ease}
.mgal .gph:hover i{transform:scale(1.07)}
.mgal .gph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,4,.35),transparent 55%)}
.mgal .grev{background:rgba(255,255,255,.04);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.mgal .grev .st{color:var(--bronze);letter-spacing:.22em;font-size:13px}
.mgal .grev .q{font-family:var(--disp);font-size:clamp(18px,1.5vw,25px);line-height:1.32}
.mgal .grev .who{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-top:2px}
.mgal .grev .who b{color:var(--ivory);font-weight:500}

.rev-el{opacity:0;transform:translateY(34px);filter:blur(6px)}
@media(prefers-reduced-motion:reduce){#mintro{display:none}.rev-el,#msay w,.mtline h2 w,#mhero .hc *,#mhero h1 .sw,.mgal .gcell{opacity:1!important;transform:none!important;filter:none!important}.mhdr{opacity:1}#mstep .st{opacity:1;transform:none;position:relative;top:auto}#mstep .frame .im.s0{opacity:1}.msvc .media{clip-path:none!important}}