/* ============================================================
   TNG — Breakfast. Bike. Beach.  (shared styles)
   Used by: homepage launch section + Tours feature card (index.html),
   Tours page feature card (tours/index.html), /breakfast-bike-beach.
   Every editable piece of copy / image / video carries a data-slot="bbb.*"
   attribute so the planned content manager can target it later.
   ============================================================ */
.bbb{--bb-gold:#C4943A;--bb-gold-l:#E8B85A;--bb-sand:#D8C7A3;--bb-olive:#4A5A3B;--bb-olive-d:#2E3A22;--bb-ink:#1E1E1E;--bb-head:'Montserrat',sans-serif;--bb-body:'Lato',sans-serif;}

/* ---- launch section ---- */
.bbb-launch{position:relative;overflow:hidden;color:#fff;padding:92px 0 96px;border-top:4px solid var(--bb-gold);border-bottom:1px solid rgba(232,184,90,.25);
  background:radial-gradient(900px 520px at 88% 8%,rgba(196,148,58,.22),transparent 60%),radial-gradient(700px 480px at 0% 100%,rgba(94,114,73,.35),transparent 60%),linear-gradient(135deg,#1E1E1E 0%,#2E3A22 58%,#1E1E1E 100%);}
.bbb-wrap{max-width:1140px;margin:0 auto;padding:0 24px;position:relative;}
.bbb-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:64px;align-items:center;}
.bbb-badge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;background:var(--bb-gold);color:var(--bb-ink);font-family:var(--bb-head);font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;padding:10px 18px;border-radius:100px;}
.bbb-badge::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:bbbShine 4.5s ease-in-out infinite;}
@keyframes bbbShine{0%,55%{left:-60%}100%{left:130%}}
.bbb-h{font-family:var(--bb-head);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.9;font-size:clamp(46px,7.4vw,98px);margin:26px 0 22px;color:#fff;}
.bbb-h span{display:block;}
.bbb-h .l2{color:var(--bb-gold-l);}
.bbb-h .l3{color:var(--bb-sand);}
.bbb-sub{font-family:var(--bb-head);font-weight:800;font-size:clamp(20px,2.5vw,27px);line-height:1.25;color:#fff;margin:0 0 26px;}
.bbb-price{color:var(--bb-gold-l);font-weight:900;font-size:1.22em;white-space:nowrap;}
.bbb-incl{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;max-width:560px;}
.bbb-incl li{display:flex;align-items:flex-start;gap:12px;font-family:var(--bb-body);font-size:16px;font-weight:700;line-height:1.35;color:rgba(255,255,255,.94);}
.bbb-incl svg{flex:0 0 36px;width:36px;height:36px;padding:7px;border-radius:50%;border:1.5px solid rgba(232,184,90,.6);color:var(--bb-gold-l);}
.bbb-cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.bbb-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:19px 36px;border-radius:8px;background:var(--bb-gold);color:#fff;font-family:var(--bb-head);font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 30px rgba(196,148,58,.35);transition:transform .2s,background .2s;}
.bbb-cta:hover{background:var(--bb-gold-l);transform:translateY(-2px);}
.bbb-cta:focus-visible,.bbb-link:focus-visible,.bbb-tc-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.bbb-link{font-family:var(--bb-head);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-sand);text-decoration:underline;text-underline-offset:5px;}
.bbb-link:hover{color:#fff;}
.bbb-note{margin:18px 0 0;font-family:var(--bb-body);font-size:13px;font-weight:300;letter-spacing:.04em;color:rgba(255,255,255,.62);}
.bbb-note b{font-weight:700;color:var(--bb-sand);}

/* media: Beach Cruiser photo is the hero, the reel overlaps its corner */
.bbb-media{position:relative;padding:0 0 56px;}
.bbb-photo{position:relative;margin:0;border-radius:18px;aspect-ratio:1/1.02;box-shadow:0 34px 70px rgba(0,0,0,.5);outline:1px solid rgba(232,184,90,.35);background:#2E3A22;}
.bbb-photo img{border-radius:18px;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 60%;display:block;}
.bbb-photo::after{content:'';border-radius:18px;position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(14,12,8,.82) 100%);pointer-events:none;}
.bbb-photo-cap{position:absolute;left:24px;bottom:22px;right:46%;z-index:2;display:flex;flex-direction:column;gap:6px;}
.bbb-cap-tag{font-family:var(--bb-head);font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--bb-gold-l);}
.bbb-cap-line{font-family:var(--bb-head);font-size:clamp(20px,2.4vw,28px);font-weight:900;line-height:1.05;color:#fff;letter-spacing:-.01em;}
.bbb-burst{position:absolute;z-index:5;top:-34px;left:-44px;width:206px;height:206px;transform:rotate(-11deg);filter:drop-shadow(5px 7px 0 #1E1E1E) drop-shadow(0 14px 22px rgba(0,0,0,.45));}
.bbb-burst-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#1E1E1E;background:#E8B85A;padding:0 24px;
 clip-path:polygon(50% 0,59% 13%,73% 3%,75% 19%,92% 15%,87% 31%,100% 38%,89% 51%,98% 66%,83% 68%,85% 85%,68% 80%,60% 97%,50% 84%,38% 100%,32% 81%,15% 91%,17% 72%,1% 65%,13% 52%,0 38%,16% 32%,9% 14%,28% 20%,33% 2%,43% 15%);}
.bbb-burst-in i{font-style:normal;font-family:var(--bb-head);font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;max-width:96px;}
.bbb-burst-in b{font-family:var(--bb-head);font-size:25px;font-weight:900;line-height:.95;letter-spacing:-.03em;text-transform:uppercase;margin:5px 0 6px;}
.bbb-burst-in u{text-decoration:none;font-family:var(--bb-head);font-size:19px;font-weight:900;color:#fff;background:#1E1E1E;padding:3px 9px;transform:rotate(2deg);white-space:nowrap;}
.bbb-sub{margin:26px 0 12px!important;}
.bbb-lead1{font-family:var(--bb-body);font-size:19px;font-weight:700;line-height:1.45;color:#fff;margin:0 0 12px;max-width:560px;}
.bbb-lead2{font-family:var(--bb-body);font-size:16.5px;font-weight:300;line-height:1.75;color:rgba(255,255,255,.82);margin:0 0 22px;max-width:560px;}
.bbb-priceline{font-family:var(--bb-head);font-weight:900;text-transform:uppercase;font-size:clamp(22px,2.8vw,30px);letter-spacing:-.01em;color:#fff;margin:0 0 26px;}
.bbb-reel{position:absolute;right:-14px;bottom:0;width:37%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;z-index:4;border:3px solid var(--bb-gold-l);box-shadow:0 22px 50px rgba(0,0,0,.55);background:#111;}
.bbb-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* ---- Tours feature card (dark, gold-edged, full width) ---- */
.bbb-tourcard{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-radius:16px;overflow:hidden;border:1.5px solid rgba(232,184,90,.6);background:linear-gradient(135deg,#1E1E1E,#2E3A22);box-shadow:0 18px 44px rgba(0,0,0,.28);margin:0 0 28px;text-align:left;}
.bbb-tc-img{position:relative;min-height:280px;background:#2E3A22;}
.bbb-tc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 60%;display:block;}
.bbb-tc-tag{position:absolute;top:16px;left:16px;background:var(--bb-gold);color:var(--bb-ink);font-family:var(--bb-head);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:100px;}
.bbb-tc-body{padding:32px 32px 30px;display:flex;flex-direction:column;justify-content:center;gap:12px;color:#fff;}
.bbb-tc-name{font-family:var(--bb-head);font-size:clamp(26px,3.4vw,38px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;margin:0;}
.bbb-tc-name em{font-style:normal;color:var(--bb-gold-l);}
.bbb-tc-desc{font-family:var(--bb-body);font-size:15px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.78);margin:0;}
.bbb-tc-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);margin-top:4px;}
.bbb-tc-price{font-family:var(--bb-head);font-size:24px;font-weight:900;color:var(--bb-gold-l);line-height:1;}
.bbb-tc-per{display:block;font-family:var(--bb-body);font-size:12px;font-weight:300;color:rgba(255,255,255,.6);margin-top:5px;}
.bbb-tc-btns{display:flex;gap:8px;}
.bbb-tc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:8px;font-family:var(--bb-head);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;background:var(--bb-gold);color:#fff;transition:background .2s;}
.bbb-tc-btn:hover{background:var(--bb-gold-l);}
.bbb-tc-btn.wa{background:#25D366;}
.bbb-tc-btn.wa:hover{background:#20B858;}

/* ---- dedicated page sections ---- */
.bbb-page-hero{padding-top:56px;}
.bbb-crumb{font-family:var(--bb-body);font-size:12px;color:rgba(255,255,255,.5);margin:0 0 28px;}
.bbb-crumb a{color:rgba(255,255,255,.6);text-decoration:none;}
.bbb-crumb a:hover{color:#fff;}
.bbb-crumb span{margin:0 8px;opacity:.35;}
.bbb-day{padding:84px 0;background:#FAF6EE;}
.bbb-day .bbb-wrap{max-width:1140px;}
.bbb-kicker{font-family:var(--bb-head);font-size:11px;font-weight:800;letter-spacing:.25em;text-transform:uppercase;color:#7A5A3A;margin:0 0 12px;}
.bbb-h2{font-family:var(--bb-head);font-size:clamp(28px,4.2vw,44px);font-weight:900;line-height:1.05;letter-spacing:-.015em;color:#2A2A2A;margin:0 0 14px;}
.bbb-h2 span{color:#4A5A3B;}
.bbb-lead{font-family:var(--bb-body);font-size:17px;font-weight:300;line-height:1.8;color:#4A4A4A;max-width:660px;margin:0 0 40px;}
.bbb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;padding:0;list-style:none;}
.bbb-step{background:#fff;border:1px solid #E6DCC3;border-radius:16px;padding:28px 26px 30px;position:relative;box-shadow:0 8px 24px rgba(74,90,59,.07);}
.bbb-step-when{font-family:var(--bb-head);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#C4943A;margin-bottom:12px;}
.bbb-step h3{font-family:var(--bb-head);font-size:22px;font-weight:900;line-height:1.1;color:#2A2A2A;margin:0 0 10px;}
.bbb-step p{font-family:var(--bb-body);font-size:15px;font-weight:300;line-height:1.7;color:#4A4A4A;margin:0;}
.bbb-self{padding:72px 0;background:#4A5A3B;color:#fff;}
.bbb-self .bbb-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}
.bbb-self h2{font-family:var(--bb-head);font-size:clamp(28px,4.2vw,44px);font-weight:900;line-height:1.05;letter-spacing:-.015em;margin:0;color:#fff;}
.bbb-self h2 span{color:#E8B85A;}
.bbb-self p{font-family:var(--bb-body);font-size:17px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.88);margin:0;}
.bbb-faq{padding:84px 0;background:#fff;}
.bbb-faq details{border-top:1px solid #E6DCC3;padding:20px 0;max-width:760px;}
.bbb-faq details:last-of-type{border-bottom:1px solid #E6DCC3;}
.bbb-faq summary{cursor:pointer;font-family:var(--bb-head);font-size:17px;font-weight:800;color:#2A2A2A;list-style:none;display:flex;justify-content:space-between;gap:16px;}
.bbb-faq summary::-webkit-details-marker{display:none;}
.bbb-faq summary::after{content:'+';font-size:22px;line-height:1;color:#C4943A;}
.bbb-faq details[open] summary::after{content:'–';}
.bbb-faq details p{margin:12px 0 0;font-family:var(--bb-body);font-size:16px;font-weight:300;line-height:1.75;color:#4A4A4A;}
.bbb-end{padding:76px 0;background:#1E1E1E;text-align:center;color:#fff;}
.bbb-end h2{font-family:var(--bb-head);font-size:clamp(28px,4.6vw,48px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;margin:0 0 12px;}
.bbb-end h2 span{color:#E8B85A;}
.bbb-end p{font-family:var(--bb-body);font-size:16px;font-weight:300;color:rgba(255,255,255,.7);margin:0 0 28px;}
.bbb-end .bbb-cta-row{justify-content:center;}

@media(max-width:900px){
  .bbb-launch{padding:60px 0 64px;}
  .bbb-grid{grid-template-columns:1fr;gap:44px;}
  .bbb-media{max-width:560px;width:100%;margin:0 auto;}
  .bbb-steps{grid-template-columns:1fr;}
  .bbb-self .bbb-wrap{grid-template-columns:1fr;gap:20px;}
  .bbb-tourcard{grid-template-columns:1fr;}
  .bbb-tc-img{min-height:220px;}
}
@media(max-width:560px){
  .bbb-h{font-size:clamp(44px,14.5vw,70px);}
  .bbb-incl{grid-template-columns:1fr;gap:12px;}
  .bbb-cta{width:100%;}
  .bbb-reel{right:10px;width:40%;}
  .bbb-photo-cap{right:46%;left:18px;bottom:16px;}
  .bbb-burst{width:168px;height:168px;top:-26px;left:-10px;}
  .bbb-burst-in b{font-size:20px;}.bbb-burst-in u{font-size:15px;}.bbb-burst-in i{font-size:7px;max-width:80px;}
  .bbb-tc-body{padding:24px 22px 24px;}
  .bbb-day,.bbb-faq,.bbb-end{padding:56px 0;}
  .bbb-self{padding:52px 0;}
}
@media(prefers-reduced-motion:reduce){.bbb-badge::after{animation:none;display:none;}.bbb-cta{transition:none;}}