:root{
--navy:#0B2E4F;
--navy-deep:#071E36;
--turquoise:#149A93;
--turquoise-light:#5FCFC6;
--sand:#F6EEE1;
--sand-deep:#EDE0CB;
--coral:#FF6A4D;
--white:#FFFFFF;
--ink:#0B2E4F;
--line: rgba(11,46,79,0.14);
--shadow: 0 12px 30px -12px rgba(11,46,79,0.35);
--radius: 18px;
--maxw: 1180px;
--font-display:'Fraunces', serif;
--font-body:'Manrope', sans-serif;
--font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
/* Offset anchor-jump targets so the sticky header never covers the top of the section */
#cart, #app, #tour, #tours{ scroll-margin-top:84px; }
@media(max-width:767px){ #cart, #app, #tour, #tours{ scroll-margin-top:64px; } }
body{ font-family:var(--font-body); color:var(--ink); background:var(--sand); -webkit-font-smoothing:antialiased; padding-bottom:78px; /* space for sticky bar */ overflow-x:hidden; }
img,svg{display:block; max-width:100%;}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; cursor:pointer; border:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 10px;}
.wrap.reviews { padding: 40px 20px; }
.wrap.addbx { padding: 40px 20px; }
.readreview { text-align: center; margin-top: 34px; }

@media(min-width:900px){ 
.wrap{padding:0 0px;}
.wrap.reviews { padding: 40px 0; }
.wrap.addbx { padding: 40px 0; }
.readreview { text-align: center; margin-top: 37px; }
}

h1,h2,h3{font-family:var(--font-display); color:var(--navy-deep); line-height:1.08; letter-spacing:-0.01em;}
.eyebrow{ font-family:var(--font-mono); font-size:14px; text-transform:uppercase; color:var(--turquoise); font-weight:600; }
.eyebrow.on-dark{color:var(--turquoise-light);}
a.brand-title img { width: 89px; }
.badge-call { background: #128C7E; color: #FFFFFF; font-size: 1.1rem; font-weight: 700; padding: 7px 14px; border-radius: 50px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(18, 140, 126, 0.29); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 22px; border-radius:999px; font-weight:700; font-size:15.5px; line-height:1; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease; min-height:52px; }
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--turquoise); color:var(--white); box-shadow:0 10px 22px -8px rgba(20,154,147,0.55);}
.btn-coral{background:var(--coral); color:var(--white); box-shadow:0 10px 22px -8px rgba(255,106,77,0.55);}
.btn-navy{background:var(--navy); color:var(--white);}
.btn-outline{background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,0.55);}
.btn-outline-dark{background:transparent; color:var(--navy); border:1.5px solid rgba(11,46,79,0.3);}
.btn-block{width:100%;}
.btn-sm{padding:11px 16px; font-size:13.5px; min-height:auto;}

/* ---------- Route signature element ---------- */
.route-dot{ width:11px; height:11px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px rgba(255,106,77,0.18); }
.route-line{ flex:1; height:2px; background-image:linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 12px); background-size:12px 2px; background-repeat:repeat-x; opacity:0.35; }

/* ---------- HEADER ---------- */
.site-header{ position:sticky; top:0; z-index:40; background:rgba(246,238,225,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding: 10px 18px;}
.logo{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--navy-deep); letter-spacing:-0.02em;}
.logo span{color:var(--turquoise);}
.header-call{
display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--navy);
}
.header-call svg{width:16px; height:16px; flex-shrink:0;}

/* ---------- HERO ---------- */
.hero{
position:relative; overflow:hidden;
background:radial-gradient(120% 100% at 15% 0%, #0F4266 0%, var(--navy) 45%, var(--navy-deep) 100%);
padding:36px 0 34px;
color:var(--white);
}
.hero-tex{
position:absolute; inset:0; opacity:0.5; pointer-events:none;
background:
radial-gradient(circle at 88% 12%, rgba(95,207,198,0.28), transparent 42%),
radial-gradient(circle at 6% 92%, rgba(255,106,77,0.22), transparent 40%);
}
.hero-inner{position:relative; z-index:1;}
.hero-badge{
display:inline-flex; align-items:center; gap:8px;
background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
padding:7px 13px; border-radius:999px; font-family:var(--font-mono); font-size:11.5px;
letter-spacing:0.06em; color:var(--turquoise-light); margin-bottom:18px;
}
.hero h1{font-size:clamp(30px,7vw,46px); font-weight:600; color:var(--white); margin-bottom:0px; max-width:100%;}
.hero h1 div{ color:#96fff3; font-size:75%;}

.hero h2{color:#ff6b4a; font-size:clamp(16px,5vw,16px); padding-bottom:10px; margin:20px 0px 0px 0px; font-family:'Manrope', sans-serif;}

.hero p.lead{font-size:16px; color:rgba(255,255,255,0.82); max-width:44ch; margin-bottom:16px; line-height:1.5;}
.hero-ctas{display:flex; gap:10px; margin-bottom:18px;}
.hero-ctas .btn{width:100%;}
.hero-wa{
display:flex; align-items:center; gap:8px; color:rgba(255,255,255,0.75); font-size:13.5px; font-family:var(--font-mono);
}
.hero-wa svg{width:16px; height:16px; color:#25D366; flex-shrink:0;}
.hero-trip{border-radius:8px; width:200px; background:#fff; overflow:hidden;}
.hero-trip img{max-width:100%;}


/* ---------- SECTION shell ---------- */
section{padding:56px 0;}
.section-head{margin-bottom:28px; max-width:56ch;}
.section-head h2{font-size:clamp(24px,5vw,34px); font-weight:600; margin:8px 0 10px;}
.section-head p{color:rgba(11,46,79,0.68); font-size:15.5px; line-height:1.55;}

/* ---------- ACTION CARDS (route) ---------- */
.route-strip{display:flex; align-items:center; gap:6px; margin:0 0 22px;}
.route-strip span{font-family:var(--font-mono); font-size:11px; color:var(--navy); opacity:0.55;}
.cards{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:760px){ .cards{grid-template-columns:repeat(3,1fr);} }
.card{
background:var(--white); border-radius:var(--radius); padding:24px 22px;
box-shadow:var(--shadow); border:1px solid rgba(11,46,79,0.06);
display:flex; flex-direction:column; gap:12px; position:relative;
}
.card .num{font-family:var(--font-mono); font-size:12px; color:var(--turquoise); font-weight:700;}
.card .icon-wrap{
width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
background:var(--sand);
}
.card .icon-wrap svg{width:24px; height:24px; color:var(--navy);}
.card h3{font-size:20px; font-weight:600; color:var(--navy-deep);}
.card p{font-size:14.5px; color:rgba(11,46,79,0.65); line-height:1.5; flex-grow:1;}
.card .btn{margin-top:4px;}
.card.accent-1 .icon-wrap{background:rgba(20,154,147,0.12);}
.card.accent-2 .icon-wrap{background:rgba(255,106,77,0.14);}
.card.accent-3 .icon-wrap{background:rgba(11,46,79,0.08);}

/* ---------- APP SECTION ---------- */
.app-section{
background:var(--navy-deep); color:var(--white); border-radius:28px; margin:0 auto;
padding:40px 40px; position:relative; overflow:hidden;max-width: var(--maxw);     height: 415px;
}

.app-section::before{
content:""; position:absolute; inset:0;
background:radial-gradient(circle at 85% 20%, rgba(95,207,198,0.25), transparent 45%);
}
.app-grid{display:grid; grid-template-columns:1fr; gap:32px; position:relative; z-index:1; }
@media(min-width:760px){ .app-grid{grid-template-columns:1.1fr 0.9fr;} }
.app-section h2{color:var(--white); font-size:clamp(24px,5vw,32px); font-weight:600; margin:8px 0 12px;}
.app-section p.lead{color:rgba(255,255,255,0.78); font-size:15px; margin-bottom:20px; max-width:42ch;}
.savings-pill{
display:inline-flex; align-items:baseline; gap:6px; background:var(--coral); color:var(--white);
padding:10px 16px; border-radius:12px; font-weight:700; margin-bottom:22px;
}
.savings-pill b{font-size:19px;}
.app-feats{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px;}
.app-feat{display:flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(255,255,255,0.85);}
.app-feat svg{width:16px; height:16px; color:var(--turquoise-light); flex-shrink:0;}
.store-btns{display:flex; gap:10px; flex-wrap:wrap;}
.store-btn{
display:flex; align-items:center; gap:9px; background:#000; color:#fff; padding:10px 16px;
border-radius:11px; border:1px solid rgba(255,255,255,0.25);
}
.store-btns a img {
height: 46px;
}
.store-btn svg{width:22px; height:22px;}
.store-btn .st{display:flex; flex-direction:column; line-height:1.15;}
.store-btn .st small{font-size:9.5px; opacity:0.75;}
.store-btn .st strong{font-size:14px; font-weight:700;}
.phone-mock{
margin:0 auto; 
}
.phone-mock img {
width: 432px;
}
.phone-mock .screen{position:absolute; inset:10px; border-radius:22px; background:var(--sand); padding:14px 10px; display:flex; flex-direction:column; gap:8px;}
.phone-mock .row{background:var(--white); border-radius:8px; padding:8px; display:flex; gap:6px; align-items:center; box-shadow:0 2px 6px rgba(0,0,0,0.06);}
.phone-mock .row .dot{width:8px; height:8px; border-radius:50%; background:var(--turquoise);}
.phone-mock .row span{font-size:8px; font-weight:700; color:var(--navy); font-family:var(--font-mono);}
.phone-mock .hero-block{background:linear-gradient(135deg,var(--turquoise),var(--turquoise-light)); border-radius:8px; height:52px; margin-bottom:4px;}

/* ---------- OFFER SECTIONS (cart / tour) ---------- */
.offer{padding:52px 0;}
.offer-grid{display:grid; grid-template-columns:1fr; gap:26px; align-items:center;}
@media(min-width:800px){ .offer-grid{grid-template-columns:1fr 1fr;} }
.offer-grid.reverse{}
@media(min-width:800px){ .offer-grid.reverse .visual{order:2;} }
.visual{
border-radius:22px; aspect-ratio:4/3; position:relative; overflow:hidden;
display:flex; align-items:center; justify-content:center; 
}
.visual.cart-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.visual.tour-visual{background:linear-gradient(155deg,#DFF3F1,#B9E4DE);}
.visual svg{width:58%; height:58%;}
.visual .tag{
position:absolute; top:14px; left:14px; background:var(--white); padding:6px 12px; border-radius:999px;
font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--navy); box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.offer-copy .eyebrow{margin-bottom:10px; display:block;}
.offer-copy h2{font-size:clamp(24px,5vw,32px); font-weight:600; margin-bottom:14px;}
.offer-copy p.lead{color:rgba(11,46,79,0.68); font-size:15.5px; margin-bottom:18px; line-height:1.55;}
.checklist{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:24px;}
.checklist li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:rgba(11,46,79,0.68);}
.checklist svg{width:18px; height:18px; color:var(--turquoise); flex-shrink:0; margin-top:1px;}
.offer-ctas{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- HELP / CONTACT SECTION ---------- */
.help-section{background:var(--navy); border-radius:28px; margin:0 0px; padding:40px 24px; color:var(--white); text-align:center;}
@media(min-width:900px){ .help-section{margin:0 0px;} }
.help-section h2{color:var(--white); font-size:clamp(24px,5vw,30px); font-weight:600; margin:10px 0 10px;}
.help-section p{color:rgba(255,255,255,0.75); margin:0 auto 22px; font-size:15px; line-height:1.55;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px;}
.chip{
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.85);
padding: 7px 18px;
border-radius: 999px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.chip img {
width: 25px;
}
.chip{transition:background .15s ease, transform .15s ease;}
.chip:hover{background:rgba(255,255,255,0.16);}
.chip:active{transform:scale(0.96);}
.help-ctas{display:flex; flex-direction:row; gap:12px; max-width:340px; margin:0 auto;}
.help-ctas .btn{width:100%;}
.help-section .help-note{margin-top:16px; font-size:12px; color:rgba(255,255,255,0.5); }

/* ---------- ADVENTURES CAROUSEL ---------- */
#adventures.wrap {
background: transparent;
width: 100%;
max-width: 100%;
padding: 40px 0;
}
.adventures-section{background:transparent;  padding:44px 0 50px; color:var(--white); overflow:hidden; position:relative;    max-width: var(--maxw); margin:0 auto;}

.adventures-head{position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:0 0px; margin-bottom:26px;}
.adventures-head h2{color:#333; font-size:clamp(24px,5vw,32px); font-weight:600; margin:8px 0 6px;}
.adventures-head p{color:rgba(11,46,79,0.68); font-size:15px; max-width:46ch; margin:0;}
.adventures-nav{display:flex; gap:8px; flex-shrink:0;}
.adv-nav-btn{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); color:var(--white); display:flex; align-items:center; justify-content:center; transition:background .15s ease;}
.adv-nav-btn:hover{background:rgba(255,255,255,0.2);}
.adv-nav-btn svg{width:18px; height:18px;}
.adventures-carousel{position:relative; z-index:1; padding:0 0px;}
.adv-card{background:#fff; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); height:100%; display:flex; flex-direction:column;}
.adv-media{position:relative;     height: 193px; overflow:hidden;}
.adv-media img{width:100%; height:100%; object-fit:cover;}
.adv-badges{position:absolute; left:10px; top:10px; right:10px; display:flex; gap:6px; flex-wrap:wrap;}
.adv-badge{
display:inline-flex; align-items:center; gap:5px; background:rgba(7,30,54,0.72); backdrop-filter:blur(4px);
color:var(--white); font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; font-family:var(--font-mono);
}
.adv-badge svg{width:13px; height:13px; flex-shrink:0;}
.adv-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex-grow:1;    min-height: 223px;}
.adv-body h3{color:#333; font-size:17px; font-weight:600; line-height:1.25;}
.adv-body p{color:rgb(0 0 0 / 68%); font-size:13.5px; line-height:1.5; flex-grow:1;}
.adv-body .btn{margin-top:6px; align-self:flex-start;}
.adventures-carousel .owl-stage-outer{overflow:visible; padding-bottom:6px;}
.adventures-carousel .owl-item{padding:2px;}
.adventures-carousel .owl-dots{display:flex; justify-content:center; gap:8px; margin-top:20px;}
.adventures-carousel .owl-dot span{width:8px; height:8px; margin:0; border-radius:50%; background:rgba(255,255,255,0.25); display:block; transition:background .2s ease, transform .2s ease;}
.adventures-carousel .owl-dot.active span{background:var(--turquoise-light); transform:scale(1.2);}
@media(max-width:767px){
.adventures-section{border-radius:0; padding:36px 0 0px ;}
.adventures-head{padding:0 20px;}
.adventures-carousel{padding:0 20px;}
.adventures-nav{display:none;}
}

/* ---------- SOCIAL PROOF ---------- */
.proof-head{ display: flex; align-items: center; gap: 14px;  flex-wrap: wrap;
margin-bottom: 14px; text-align: center; width: 100%; justify-content: center;}
.stars{color:var(--coral); font-size:20px; letter-spacing:2px;}
.proof-sub{ font-size:15px; font-weight:bold; color:var(--navy); opacity:0.7;}
.testi-row{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:760px){ .testi-row{grid-template-columns:repeat(3,1fr);} }
.testi{
background:var(--white); border-radius:16px; padding:20px; box-shadow:var(--shadow); border:1px solid rgba(11,46,79,0.06);
}
.testi .stars-sm{color:var(--coral); font-size:13px; margin-bottom:10px; letter-spacing:1px;}
.testi p{font-size:15px; color:var(--ink); line-height:1.55; }
.testi .placeholder-flag{
display: inline-block;
margin-top: 12px;
font-size: 13px;
color: var(--coral);
font-weight: 600;
}

/* Owl Carousel — testimonials (mobile / tablet only, JS-controlled) */
.testi-row.owl-carousel{display:block;}
.testi-row .owl-stage-outer{padding:6px 2px 28px;}
.testi-row .owl-item .testi{height:100%; margin:0 6px;}
.testi-row .owl-dots{display:flex; justify-content:center; gap:8px; margin-top:4px;}
.testi-row .owl-dot span{
width:8px; height:8px; margin:0; border-radius:50%; background:rgba(11,46,79,0.2); display:block; transition:background .2s ease, transform .2s ease;
}
.testi-row .owl-dot.active span{background:var(--turquoise); transform:scale(1.2);}
.testi-row .owl-nav{display:none;}

/* ---------- LOCATION ---------- */
.loc-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:760px){ .loc-grid{grid-template-columns:1fr 1fr;} }
.loc-card{background:var(--white); border-radius:20px; padding:26px; box-shadow:var(--shadow); border:1px solid rgba(11,46,79,0.06);}
.loc-card h3{font-size:19px; font-weight:600; margin-bottom:10px;}
.loc-line{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:rgba(11,46,79,0.75); margin-bottom:10px;}
.loc-line svg{width:18px; height:18px; color:var(--turquoise); flex-shrink:0; margin-top:1px;}
.map-card{
border-radius:20px; background:linear-gradient(160deg,#0B2E4F,#123A5C); min-height:220px; position:relative; overflow:hidden;
display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.map-card svg{width:38px; height:38px; color:var(--coral);}
.map-card::after{content:"COCONUT DRIVE, SAN PEDRO"; position:absolute; bottom:16px; left:16px; font-family:var(--font-mono); font-size:10.5px; color:rgba(255,255,255,0.6); letter-spacing:0.05em;}

/* ---------- FINAL CTA ---------- */
.final-cta{
background:linear-gradient(155deg, var(--navy-deep), var(--navy) 60%, #0F4266);
border-radius:28px; margin:0 0px; padding:44px 24px; color:var(--white); text-align:center;
}
@media(min-width:900px){ .final-cta{margin:0 0px;} }
.final-cta h2{color:var(--white); font-size:clamp(26px,6vw,38px); font-weight:600; margin:10px 0 12px;}
.final-cta p{color:rgba(255,255,255,0.78); max-width:42ch; margin:0 auto 26px; font-size:15.5px;}
.final-grid{display:flex; flex-direction:row; gap:12px; max-width:360px; margin:0 auto 18px; justify-content: center;}
.final-grid .btn{width:100%;}
.final-wa{color:rgba(255,255,255,0.7); font-size:13.5px; font-family:var(--font-mono);}

/* ---------- FOOTER ---------- */
footer{padding:34px 0 20px; text-align:center;}
footer .logo{margin-bottom:8px; justify-content:center; display:flex;}
footer p{font-size:15px; font-weight:bold; color:rgba(11,46,79,0.55); }

/* ---------- STICKY MOBILE BAR ---------- */
.sticky-bar{
position:fixed; bottom:0; left:0; right:0; z-index:50;
background:rgba(255,255,255,0.97); backdrop-filter:blur(10px);
border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(11,46,79,0.12);
padding:9px 12px calc(9px + env(safe-area-inset-bottom));
}
.sticky-inner{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; max-width:var(--maxw); margin:0 auto; align-items:stretch;}
.sticky-link{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
padding:8px 4px; border-radius:12px; font-size:10.5px; font-weight:700; color:var(--navy);
background:var(--sand);
}
.sticky-link svg{width:24px; height:24px;}
.sticky-link.primary{background:var(--turquoise); color:var(--white);}
.sticky-wa{
display:flex; align-items:center; justify-content:center; width:48px; border-radius:12px; background:#25D366; color:#fff;
}
.sticky-wa svg{width:22px; height:22px;}
.hero-ctas a img {
height: 60px;
}

@media(min-width:900px){
.sticky-bar{display:none;}
body{padding-bottom:0;}
.hero{padding:64px 0 70px;}
.hero-inner{display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center;}
.hero-ctas{flex-direction:row; }
.hero-ctas .btn{width:auto;}
.hero-visual-desk{
border-radius:26px; background:radial-gradient(circle at 30% 30%, rgba(95,207,198,0.35), rgba(11,30,54,0.4));
border:1px solid rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center;        overflow: hidden;
}
.hero-visual-desk svg{width:52%; height:52%; opacity:0.9;}
}

.hero-right{
width:; margin:0px; padding:0px;
}

.hero-right img{
width:100%; margin:0px; padding:0px; border-radius:20px;
}

/* Fixed floating WhatsApp for desktop */
.fab-wa{
display:none; position:fixed; bottom:26px; right:26px; z-index:45; width:58px; height:58px; border-radius:50%;
background:#25D366; align-items:center; justify-content:center; box-shadow:0 12px 26px rgba(37,211,102,0.45);
}
.fab-wa svg{width:28px; height:28px; color:#fff;}
@media(min-width:900px){ .fab-wa{display:flex;} }

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

ul.flexservcies {
display: flex;
max-width: 90%;
gap: 10px;
list-style-type: none;
margin-bottom: 24px;
}

ul.flexservcies li {width: 25%;}

ul.flexservcies li a {
text-align: center;
font-weight: bold;
font-size: 14px;
background: #fff;
display: block;
border-radius: 10px;
padding: 10px 0;
color: #000;
}

ul.flexservcies li a img {
margin: 0 auto;
width: 67px;
}

ul.flexservcies li a p {
margin-top: 7px;
}

@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*{transition:none !important;}
}


.hero-trip{border-radius:8px; width:200px; background:#fff; overflow:hidden;}
.hero-trip img{max-width:100%;}
@media (max-width:767px){
.hero-trip {margin:0px auto;}
.hero h1 div{padding-top:5px;}
.hero h1, .hero h2{text-align:center;}
.hero p.lead{text-align:center; margin-bottom:15px;}
.hero-ctas{justify-content: center;}
.hero-trip{margin:0px auto;}

.app-section {
border-radius: 0;
margin: 0 auto;
padding: 40px 20px 0;
overflow: visible;
height: auto;
}
.phone-mock img {
width: 100%;
}
.badge-call {
font-size: 1rem;
}
ul.flexservcies {
display: flex;
max-width: 100%;
gap: 5px;
list-style-type: none;
margin-bottom: 15px;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}

ul.flexservcies li {
width: 23%;
margin-bottom: 8px;
display: flex;
}

ul.flexservcies li .service-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
ul.flexservcies li a {
text-align: center;
font-weight: bold;
font-size: 12.5px;
background: #fff;
border-radius: 10px;
padding: 7px 8px;
color: #000;
}
ul.flexservcies li a img {
margin: 0 auto;
width: 48px;
}
ul.flexservcies li a p {
margin-top: 3px;
text-align: center;
}
.hero-ctas a img {
height: 53px;
}
.hero-visual-desk {
display: none;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 17px;
border-radius: 999px;
font-weight: 700;
font-size: 13.5px;
line-height: 1;
white-space: nowrap;
transition: transform .15s ease, box-shadow .15s ease;
min-height: 47px;
}

.final-grid {
flex-wrap: wrap;
}
.help-ctas {
flex-wrap: wrap;
}
section#app {
padding: 0;
}
.offer-ctas a {
width: 100%;
}
#adventures.wrap {
padding: 40px 0 0;
}

}

.social-icons{
display: flex;
justify-content: center;
align-items: center; margin-top:15px !important;

}


.fa-brands, .fab {
font-family: "Font Awesome 6 Brands";
} 
.social-icons li {
margin: 0 6px 0 0px;
display: inline-block;
transition: all 0.3s ease-in-out;
border-radius:50%; width:40px; height:40px; display:flex;     background: linear-gradient(155deg, var(--navy-deep), var(--navy) 60%, #0F4266); align-items:center; justify-content:center;
}


.social-icons li a {
font-size: 16px;

font-weight: 400;

text-decoration: none;
color: #fff;
cursor: pointer;
transition: all 0.3s ease-in-out;}


@media (max-width:1199px){

.wrap {
max-width: 95% !important;
margin: 0 auto;
padding: 0 10px;
}
.hero h1 {
font-size: clamp(30px, 7vw, 38px);
}
ul.flexservcies {
max-width: 100%;
}
ul.flexservcies li a {
font-size: 13px;
}

}


@media (max-width:991px){

.hero-content {
margin-bottom: 22px;
}
.hero-visual-desk {
display: none;
}
.app-section {
border-radius: 0;
height: auto;

}

}


@media (max-width:667px){
ul.flexservcies li a {
font-size: 16px;
}

ul.flexservcies li {
width: 49%;
}

.hero h1 {
font-size: clamp(24px, 7vw, 32px);
}

.hero{padding-top:20px;}

}

@media (max-width:360px){

.hero-ctas a img {
height: 47px;
width: auto;
max-width: max-content;
}
}


@media (max-width:320px){

ul.flexservcies li .service-box {
font-size: 11px;
}	
.hero-ctas a img {
height: 41px;
width: auto;
max-width: max-content;
}
}







.hero{ --tp-navy:#0B3B4C; --tp-coral:#FF6B4A; --tp-teal:#159B95; --tp-sand:#FBF3E3; }

/* Info-center badge */
.hero .hero-badge{
display:inline-flex; align-items:center; gap:8px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.35);
color:#5FCFC6; font:600 12px/1 "Manrope",sans-serif; letter-spacing:.08em;
text-transform:uppercase; padding:8px 16px; border-radius:999px;
margin:0 auto 18px; width:fit-content;
}
.hero .hero-badge svg{ flex:0 0 auto; color:var(--tp-coral); }

.hero .hero-sub{
font:600 13px/1.4 "IBM Plex Mono",monospace; color:var(--tp-coral); text-transform:uppercase; margin:6px 0 2px;
}

/* App promo strip inside hero */
.hero .hero-app-strip{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
justify-content:center;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
border-radius:16px; padding:15px; margin:12px 0 10px; max-width:640px;
}

.hero .hero-app-strip .app-strip-copy{ text-align:left; flex:1 1 220px; }
.hero .hero-app-strip .app-strip-copy strong{
display:block; font:700 15px/1.25 "Manrope",sans-serif; color:#96fff3;
}
.hero .hero-app-strip .app-strip-copy span{
display:block; font:500 12.5px/1.3 "Manrope",sans-serif; color:rgba(255,255,255,.72); margin-top:2px;
}
.hero .hero-app-strip .store-btns{ display:flex; gap:8px; flex:0 0 auto; }
.hero .hero-app-strip .store-btns img{ height:40px; width:auto; }

/* Quick-access pills (small, immediately visible) */
.hero .quick-pills-wrap{ margin:24px auto 6px; max-width:720px; }
.hero .quick-pills-label{
font:700 11px/1 "IBM Plex Mono",monospace; letter-spacing:.14em;
text-transform:uppercase; color:rgba(255,255,255,.65); text-align:center;
margin-bottom:10px;
}
.hero ul.flexservcies.quick-pills{
display:flex; flex-wrap:nowrap; gap:10px; list-style:none;
margin:0; padding:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none; justify-content:flex-start;
}
.hero ul.flexservcies.quick-pills::-webkit-scrollbar{ display:none; }
.hero ul.flexservcies.quick-pills li{ flex:0 0 auto; }
.hero ul.flexservcies.quick-pills .service-box{
display:flex; align-items:center; gap:8px;
background:rgba(255,255,255,.95); color:var(--tp-navy);
border-radius:999px; padding:10px 16px 10px 10px;
font:700 13px/1 "Manrope",sans-serif; white-space:nowrap;
box-shadow:0 6px 16px rgba(0,0,0,.18);
transition:transform .15s ease, box-shadow .15s ease;
}
.hero ul.flexservcies.quick-pills .service-box:hover{
transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.hero ul.flexservcies.quick-pills .service-box img{
width:28px; height:28px; object-fit:contain; flex:0 0 auto;
}
.hero ul.flexservcies.quick-pills .service-box p{ margin:0; line-height:1.15; }
@media(min-width:640px){
.hero ul.flexservcies.quick-pills{ justify-content:center; flex-wrap:wrap; }
}

/* Big visual service cards (still inside the hero) */
.hero .service-cards-grid{
display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
margin:15px auto; max-width:720px;
}
@media(min-width:640px){
.hero .service-cards-grid{ grid-template-columns:repeat(2,1fr); gap:16px; max-width:960px; }
}
.hero .service-card{
position:relative; display:block; border-radius:18px; overflow:hidden;
height:200px; text-decoration:none;
box-shadow:0 10px 24px rgba(0,0,0,.28);
transition:transform .2s ease, box-shadow .2s ease;
}

.hero .service-card:nth-child(4n+1){ border-radius:0px 18px 18px 18px;}
.hero .service-card:nth-child(4n+2){ border-radius:18px 0px 18px 18px;}
.hero .service-card:nth-child(4n+3){ border-radius:18px 18px 18px 0px;}
.hero .service-card:nth-child(4n+4){ border-radius:18px 18px 0px 18px;}

.hero .service-card:hover{ transform:translateY(-5px); box-shadow:0 16px 30px rgba(0,0,0,.34); }
.hero .service-card img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .5s ease;
}
.hero .service-card:hover img{ transform:scale(1.07); }
/*.hero .service-card::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(8,42,54,0) 40%, rgba(8,42,54,.92) 100%);
}*/
.hero .service-card-body{
position:absolute; left:0; right:0; bottom:0; z-index:2; padding:12px 10px 14px;
color:#fff; text-align:left; background: rgba(19, 59, 91, 0.83);
}
.hero .service-card-body h3{
font-size:14.5px; line-height:1.2; margin:0; color:#ffffff; font-family:'Manrope', sans-serif;
}

/* In-store teaser strip (still inside the hero) */
.hero .hero-store-strip{
display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
background:var(--tp-sand); color:var(--tp-navy); border-radius:16px;
padding:16px 20px; margin:26px auto 0; max-width:720px; text-align:left;
}
.hero .hero-store-strip svg{ flex:0 0 auto; width:26px; height:26px; color:var(--tp-coral); }
.hero .hero-store-strip .store-strip-copy{ flex:1 1 260px; }
.hero .hero-store-strip .store-strip-copy strong{ display:block; font:700 14.5px/1.3 "Manrope",sans-serif; }
.hero .hero-store-strip .store-strip-copy span{ display:block; font:500 12.5px/1.4 "Manrope",sans-serif; opacity:.8; margin-top:2px; }
.hero .hero-store-strip .btn{ flex:0 0 auto; }

/* Location teaser line (still inside the hero) */
.hero .hero-loc-line{
display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
margin:16px auto 0; font:500 12.5px/1.4 "Manrope",sans-serif; color:rgba(255,255,255,.8);
text-align:center;
}
.hero .hero-loc-line svg{ flex:0 0 auto; width:15px; height:15px; color:var(--tp-coral); }
.hero .hero-loc-line .loc-coords{ font:600 12px/1 "IBM Plex Mono",monospace; color:rgba(255,255,255,.6); }

@media (max-width:650px){
.hero .service-card{height:120px;}
.hero .service-card-body h3{   font-size: 13px;}
	
}

.hero .hero-app-strip.heroappmbl{display:none;}
.hero .hero-app-strip.heroappmbl{ flex-wrap:nowrap; padding:10px;}
.hero .hero-app-strip.heroappmbl .hero-app-left{ width:60%;}
.hero .hero-app-strip.heroappmbl .hero-app-right{width:40%;}
.desktopdnone{display:none !important;}
.mobilednone{display:flex !important;}
.hero .service-cards-grid.mobilednone{display:grid !important;}
.desktopview{display:block !important;}
.mblview{display:none !important;}

@media (min-width:900px){
.hero .hero-store-strip{ background: #0d355b; color: #BBD7E1;}
}	

@media (max-width:899px){
.desktopview{display:none !important;}
.mblview{display:block !important;}
.hero .hero-app-strip.heroappdesktop{display:none;}
.mobilednone{display:none !important;}
.hero .service-cards-grid.desktopdnone{display:grid !important;}
.hero .service-cards-grid.mobilednone{display:none !important;}
.desktopdnone{display:flex !important;}
.hero .hero-app-strip.heroappmbl{display:flex;}
.hero .hero-app-strip.heroappmbl {max-width: 100%;}
.hero .hero-app-strip.heroappmbl .app-strip-copy strong{font-size:18px; margin-bottom:10px;}
.hero .hero-app-strip.heroappmbl .app-strip-copy span{ font-size:14px; margin-bottom:10px;}
.hero .hero-store-strip .store-strip-copy{text-align:center;}
	
}




