/* sobelzanzibar.com */
@font-face{font-family:Bangers;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bangers-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Bangers;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bangers-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/figtree-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/figtree-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
 --navy:#0F2B5B; --night:#0A1F44; --sun:#FFC83D; --lagoon:#1FB5B0; --teal:#0B6E6B;
 --mist:#EEF8F7; --muted:#3E557F; --line:#D8E3EF; --white:#fff; --wa:#128C4A;
 --pad:clamp(1.25rem,5vw,4.5rem);
 --display:Bangers,"Arial Narrow",Impact,sans-serif;
 --body:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--navy);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.05}
h2{font-family:var(--display);font-weight:400;letter-spacing:.02em;font-size:clamp(2.4rem,5vw,3.6rem)}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.top :focus-visible,.hero :focus-visible,.contact :focus-visible,.foot :focus-visible,.nf :focus-visible{outline-color:var(--sun)}
.skip{position:absolute;left:-999px;top:0;background:var(--sun);color:var(--navy);padding:.6rem 1rem;z-index:20}
.skip:focus{left:1rem;top:1rem}
.ic{width:1.25em;height:1.25em;flex:none}

/* header */
.top{display:flex;align-items:center;gap:1.5rem;padding:.9rem var(--pad);background:var(--navy);color:var(--white)}
.brand{font-family:var(--display);font-size:2rem;line-height:1;color:var(--sun);text-decoration:none;letter-spacing:.03em}
.nav{display:flex;gap:1.6rem;margin-left:auto;font-weight:600}
.nav a{text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--sun)}
.lang{display:flex;border:2px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden;font-weight:700;font-size:.9rem}
.lang a{padding:.3rem .75rem;text-decoration:none}
.lang a[aria-current]{background:var(--sun);color:var(--navy)}
@media (max-width:760px){.nav{display:none}.lang{margin-left:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.4rem;border-radius:999px;font-weight:700;font-size:1.05rem;text-decoration:none;line-height:1.2;border:2px solid transparent;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-sun{background:var(--sun);color:var(--navy)}
.btn-line{border-color:currentColor;color:var(--white)}
.btn-navy{background:var(--navy);color:var(--white)}

/* hero */
.hero{display:grid;grid-template-columns:1fr;background:var(--navy);color:var(--white);overflow:hidden}
.hero-text{padding:clamp(2.5rem,7vw,5.5rem) var(--pad) clamp(2.5rem,6vw,4rem);align-self:center}
.hero h1{font-family:var(--display);font-weight:400;transform:rotate(-3deg);transform-origin:left bottom;letter-spacing:.02em}
.h1a{display:block;color:var(--sun);font-size:clamp(5.5rem,17vw,11.5rem);line-height:.82}
.h1b{display:block;color:var(--white);font-size:clamp(2.6rem,7vw,5.4rem);line-height:.95}
.stroke{display:block;width:min(420px,85%);height:26px;margin:.2rem 0 1.6rem;transform:rotate(-3deg);transform-origin:left}
.stroke path{fill:none;stroke:var(--sun);stroke-width:7;stroke-linecap:round;stroke-dasharray:460;stroke-dashoffset:460;animation:draw 1.1s .35s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lead{font-size:clamp(1.15rem,1.8vw,1.35rem);max-width:30ch;margin-bottom:2rem}
.cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-media{position:relative;min-height:min(110vw,620px)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.hero-print{position:absolute;width:40%;left:5%;bottom:6%}
@media (min-width:900px){
 .hero{grid-template-columns:1.05fr 1fr;min-height:min(88vh,860px)}
 .hero-media{min-height:0}
 .hero-print{width:34%;left:-7%;bottom:7%}
}

/* printed photos */
.print{margin:0;background:var(--white);padding:7px;box-shadow:0 18px 34px -16px rgba(10,31,68,.55);transform:rotate(var(--r,0deg))}
.print img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* selling points */
.points{padding:clamp(2.5rem,5vw,4rem) var(--pad)}
.points ul{list-style:none;margin:0 auto;padding:0;display:grid;gap:1.8rem 2rem;grid-template-columns:1fr;max-width:1200px}
.points li{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:start}
.points .dot{grid-row:span 2;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--sun);display:grid;place-items:center}
.points .dot .ic{width:1.6rem;height:1.6rem}
.points strong{font-size:1.1rem;line-height:1.3}
.points span:last-child{color:var(--muted);font-size:.98rem;line-height:1.45}
@media (min-width:640px){.points ul{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.points ul{grid-template-columns:repeat(5,1fr)}.points li{grid-template-columns:1fr;row-gap:.35rem}.points .dot{grid-row:auto;margin-bottom:.5rem}}

/* guests strip */
.guests{background:var(--mist);padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(3rem,6vw,5rem);text-align:center}
.guests h2{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:2.2rem}
.guest-row{display:flex;justify-content:center;gap:clamp(.6rem,3vw,2.5rem);max-width:1000px;margin:0 auto}
.guest-row .print{flex:1;max-width:300px}

/* about */
.about{display:grid;gap:clamp(3rem,6vw,5rem);padding:clamp(3.5rem,8vw,6.5rem) var(--pad);max-width:1240px;margin:0 auto;align-items:center}
.about-media{position:relative;padding:0 0 18% 0;max-width:520px;width:100%;margin:0 auto}
.about-media .main{width:70%}
.about-media .side{position:absolute}
.about-media .s1{width:40%;right:0;top:12%}
.about-media .s2{width:28%;left:52%;bottom:0}
.about-text h2{margin-bottom:1.4rem}
.about-text p{max-width:60ch}
.press{margin-top:2rem;padding:1.1rem 1.4rem;background:var(--mist);border-left:6px solid var(--sun);border-radius:0 12px 12px 0;max-width:60ch}
.press p{margin:0 0 .3rem}
.press-label{font-size:.95rem;color:var(--muted)}
.press-label strong{color:var(--navy)}
.press-quote{font-size:1.25rem;font-weight:700}
.press a{font-weight:600}
@media (min-width:900px){.about{grid-template-columns:1fr 1.1fr}}

/* trips */
.trips{background:var(--mist);padding:clamp(3.5rem,8vw,6.5rem) var(--pad)}
.trips-head{max-width:46rem;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.trips-head h2{margin-bottom:1rem}
.trips-head p{font-size:1.15rem}
.trip{display:grid;gap:2.5rem;max-width:1180px;margin:0 auto clamp(4rem,8vw,6.5rem);align-items:center;scroll-margin-top:1rem}
.trip-media{display:flex;gap:clamp(.6rem,2vw,1.2rem);align-items:flex-start}
.trip-media .print{flex:1}
.trip-media .p2{margin-top:2.5rem}
.trip-media .p3{margin-top:1rem}
.trip-media.art{position:relative;display:block;background:linear-gradient(#174A8A,#0F2B5B 70%);border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.savanna{position:absolute;inset:0;width:100%;height:100%}
.art-label{position:absolute;left:0;right:0;bottom:8%;margin:0;text-align:center;font-family:var(--display);font-size:clamp(2rem,4.5vw,3.2rem);color:var(--sun);letter-spacing:.03em}
.trip h3{font-size:clamp(1.55rem,2.8vw,2.1rem);font-weight:800;letter-spacing:-.01em;margin-bottom:.5rem}
.trip-lead{color:var(--teal);font-weight:700;font-size:1.15rem}
.route{list-style:none;margin:1.4rem 0;padding:0 0 0 2.1rem;position:relative}
.route::before{content:"";position:absolute;left:.6rem;top:.7rem;bottom:.9rem;border-left:3px dashed var(--lagoon)}
.route li{position:relative;margin:0 0 .9rem;max-width:60ch}
.route li::before{content:"";position:absolute;left:-2.1rem;top:.3rem;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--sun);border:3px solid var(--navy)}
.ticks{list-style:none;margin:1.2rem 0;padding:0}
.ticks li{position:relative;padding-left:1.9rem;margin-bottom:.45rem}
.ticks li::before{content:"";position:absolute;left:.25rem;top:.35rem;width:.5rem;height:.9rem;border:solid var(--lagoon);border-width:0 3px 3px 0;transform:rotate(45deg)}
.trip-note{font-style:italic}
.price{color:var(--muted);font-size:.98rem;margin-bottom:1.3rem}
.price strong{color:var(--navy)}
@media (min-width:900px){
 .trip{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5.5rem)}
 .trip.flip .trip-media{order:2}
}

.extras{display:grid;gap:1.5rem;max-width:1180px;margin:0 auto;align-items:start}
.extra{background:var(--white);border-radius:16px;padding:1.6rem 1.6rem 1.1rem;border-top:6px solid var(--sun)}
.extra h3{font-size:1.35rem;font-weight:800;margin-bottom:.6rem}
.flyer{display:block;text-decoration:none;font-weight:700;max-width:320px}
.flyer img{box-shadow:0 18px 34px -16px rgba(10,31,68,.55);border-radius:6px;margin-bottom:.7rem}
.flyer span{text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){.extras{grid-template-columns:1fr 1fr .8fr}}

/* faq */
.faq{padding:clamp(3.5rem,8vw,6rem) var(--pad);max-width:56rem;margin:0 auto}
.faq h2{margin-bottom:1.5rem}
.faq details{border-bottom:2px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 2.5rem 1.1rem 0;font-weight:700;font-size:1.15rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:1.1rem;height:1.1rem;margin-top:-.55rem;
 background:linear-gradient(var(--navy),var(--navy)) center/100% 3px no-repeat,linear-gradient(var(--navy),var(--navy)) center/3px 100% no-repeat;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1.2rem;max-width:62ch;color:var(--muted)}

/* contact */
.contact{background:var(--navy);color:var(--white);display:grid;gap:clamp(2.5rem,6vw,5rem);padding:clamp(3.5rem,8vw,6.5rem) var(--pad);align-items:center}
.contact-media{max-width:360px;width:80%;margin:0 auto}
.contact h2{color:var(--sun);margin-bottom:1rem;font-size:clamp(2.8rem,6vw,4.4rem)}
.contact-text p{max-width:46ch;font-size:1.15rem;margin-bottom:1.8rem}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.btn.big{font-size:1.25rem;padding:1rem 1.8rem}
.socials{display:flex;gap:1.5rem;font-weight:700;margin-top:.4rem}
.socials a{text-underline-offset:4px}
@media (min-width:900px){.contact{grid-template-columns:.8fr 1.2fr}.contact-media{width:100%}}

/* footer */
.foot{background:var(--night);color:#C9D6EA;padding:2rem var(--pad) 6rem;font-size:.95rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
.foot p{margin:0}
.foot a{margin-right:1.2rem;color:var(--white)}

/* floating whatsapp */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:10;display:inline-flex;align-items:center;gap:.5rem;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;padding:.8rem 1.15rem;border-radius:999px;box-shadow:0 10px 24px -8px rgba(10,31,68,.6)}
.wa-float:focus-visible{outline-color:var(--sun)}

/* 404 */
.nf{background:var(--navy);color:var(--white);min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem}
.nf h1{font-family:var(--display);font-weight:400;margin-bottom:1rem}
.nf a{color:var(--sun);font-weight:700}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .stroke path{animation:none;stroke-dashoffset:0}
 .btn{transition:none}
}