/* ══════════════════════════════════════════════════════════════════
   BucketList Tours - premium interactions layer
   Loads AFTER styles.css + theme.css (inherits Onyx & Pearl tokens).
   Features: smooth-scroll polish · magnetic buttons · interactive PR map
   · hover-preview tour clips · guide bios (parallax) · press strip.
   ══════════════════════════════════════════════════════════════════ */

/* ── magnetic buttons: quick, springy follow (JS sets inline transform) ── */
.magnetic{ transition:transform .35s var(--ease), background .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease; }
.magnetic__label{ display:inline-flex; align-items:center; gap:10px; transition:transform .35s var(--ease); pointer-events:none; }

/* ── hover-preview tour cards: cinematic slow zoom + optional muted clip ── */
.tour-card img,.dest-card img{ transform-origin:60% 40%; }
.tour-card:hover img{ transform:scale(1.14); transition:transform 6s linear; }
.dest-card:hover img{ transform:scale(1.12); transition:transform 6s linear; }
/* muted looping clip (auto-added by JS when a card has data-clip) */
.card-clip{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:0; transition:opacity .6s var(--ease); }
.tour-card.clip-on .card-clip{ opacity:1; }
.tour-card.clip-on img{ opacity:0; transition:opacity .6s var(--ease); }
.tour-card[data-clip]::before{ /* little "play" hint that fades on hover */
  content:""; position:absolute; top:16px; right:60px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/13px no-repeat;
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.35); transition:opacity .4s ease; opacity:.85;
}
.tour-card[data-clip]:hover::before{ opacity:0; }

/* ── cards POP on hover: lift + gentle scale + teal-tinted glow.
   The high-specificity selectors are required so this beats the
   `.card.reveal.in{transform:none}` rule (which was flattening the lift). ── */
.dest-card,.tour-card,.offer-tile,.guide,.post-card{
  transition:transform .5s var(--ease), box-shadow .55s var(--ease);
}
/* match the .reveal rule's specificity so transform + glow both ease (entrance keeps its rise) */
.dest-card.reveal,.tour-card.reveal,.offer-tile.reveal,.guide.reveal,.post-card.reveal{
  transition:opacity .8s var(--ease), transform .5s var(--ease), box-shadow .55s var(--ease);
}
.dest-card:hover,.tour-card:hover,.offer-tile:hover,.guide:hover,.post-card:hover,
.dest-card.reveal.in:hover,.tour-card.reveal.in:hover,.offer-tile.reveal.in:hover,.guide.reveal.in:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:var(--shadow-lg); border-color:transparent;   /* commit to elevation, drop the hairline on lift */
}
.dest-card:active,.tour-card:active,.offer-tile:active,.guide:active{ transform:translateY(-6px) scale(1.005); transition:transform .12s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .dest-card:hover,.tour-card:hover,.offer-tile:hover,.guide:hover,.post-card:hover,
  .dest-card.reveal.in:hover,.tour-card.reveal.in:hover,.offer-tile.reveal.in:hover,.guide.reveal.in:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════
   INTERACTIVE PUERTO RICO MAP - hover a region to reveal its tours
   ══════════════════════════════════════════════════════════════════ */
.map-wrap{ display:grid; gap:34px; align-items:center; margin-top:52px; }
@media(min-width:980px){ .map-wrap{ grid-template-columns:1.35fr .9fr; gap:48px; } }

.map-stage{ position:relative; z-index:0; isolation:isolate; height:clamp(340px,46vw,440px); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:#dfeef6; }
.map-stage.leaflet-container{ font-family:var(--sans); background:#0e2233; }
.map-stage .leaflet-control-attribution{ font-size:10px; }
.map-style{ display:flex; gap:2px; padding:3px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:999px; box-shadow:0 2px 12px rgba(17,17,16,.22); }
.map-style__btn{ font:600 11px/1 var(--sans); letter-spacing:.02em; color:#5a5a57; background:transparent; border:0; padding:7px 12px; border-radius:999px; cursor:pointer; transition:background .18s ease, color .18s ease; }
.map-style__btn:hover{ color:var(--ink); }
.map-style__btn.is-on{ background:var(--ember); color:#fff; }
.map-stage .leaflet-control-zoom a{ color:var(--ink); }
.map-svg{ width:100%; height:auto; overflow:visible; display:block; }
.map-svg .isle{ fill:rgba(11,60,110,.05); stroke:rgba(11,60,110,.22); stroke-width:1.4; transition:fill .5s var(--ease); }
.map-stage:hover .isle{ fill:rgba(51,165,242,.08); }
.map-svg .isle-glow{ fill:url(#mapGlow); opacity:.6; }

.map-pin{ cursor:pointer; }
.map-pin__dot{ fill:var(--ember); transition:r .35s var(--ease), fill .35s ease; }
.map-pin__ring{ fill:none; stroke:var(--ember); stroke-width:1.5; opacity:.55; transform-origin:center; transform-box:fill-box; animation:pinPulse 2.8s var(--ease) infinite; }
.map-pin__hit{ fill:transparent; }
.map-pin__label{ fill:var(--ink); font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.01em; paint-order:stroke; stroke:rgba(255,255,255,.9); stroke-width:3px; stroke-linejoin:round; transition:fill .35s ease, opacity .35s ease; }
.map-pin:hover .map-pin__dot,.map-pin.on .map-pin__dot{ r:9; fill:var(--teal); }
.map-pin:hover .map-pin__label,.map-pin.on .map-pin__label{ fill:var(--ink); }
.map-pin.on .map-pin__ring{ stroke:var(--sky); opacity:.85; }
@keyframes pinPulse{ 0%{ transform:scale(1); opacity:.6 } 70%{ transform:scale(2.4); opacity:0 } 100%{ transform:scale(2.4); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .map-pin__ring{ animation:none; opacity:.5 } }

/* detail panel */
.map-panel{ position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-3); min-height:360px; }
.map-panel__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.map-panel__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity .7s var(--ease), transform 1.2s var(--ease); }
.map-panel__media img.show{ opacity:1; transform:none; }
.map-panel__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,6,8,.05) 40%,rgba(5,6,8,.85)); }
.map-panel__eyebrow{ position:absolute; left:22px; top:18px; z-index:2; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#fff; font-weight:600; opacity:.9; }
.map-panel__title{ position:absolute; left:22px; bottom:16px; z-index:2; font-family:var(--serif); font-style:normal; font-weight:600; font-size:clamp(1.5rem,2.4vw,2rem); color:#fff; }
.map-panel__body{ padding:22px 24px 24px; }
.map-panel__blurb{ color:var(--muted); font-size:14.5px; line-height:1.65; min-height:3.3em; }
.map-panel__tours{ margin-top:16px; display:flex; flex-direction:column; }
.map-panel__dur{ color:var(--muted); font-size:13px; margin-bottom:2px; }
.map-panel__tours a{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:14.5px; font-weight:600; color:var(--ink); transition:color .3s ease, transform .3s var(--ease); }
.map-panel__tours a:hover{ color:var(--teal); transform:translateX(6px); }
.map-panel__tours a span{ flex:1; color:inherit; }
.map-panel__tours a svg{ width:16px; height:16px; color:var(--teal); flex:none; }
.map-panel__empty{ color:var(--muted); font-size:14px; padding:8px 0; }
.map-hint{ margin-top:18px; font-size:13px; color:var(--muted-2); display:flex; align-items:center; gap:8px; }
.map-hint::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); }

/* ══════════════════════════════════════════════════════════════════
   MEET YOUR GUIDES - cinematic portraits with parallax
   ══════════════════════════════════════════════════════════════════ */
.guides{ display:grid; gap:26px; margin-top:52px; grid-template-columns:1fr; }
@media(min-width:680px){ .guides{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .guides{ grid-template-columns:repeat(3,1fr); } }
.guide{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4.05; isolation:isolate; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; }
.guide__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.guide__media img{ position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; will-change:transform; transition:transform 1s var(--ease); }
.guide:hover .guide__media img{ transform:scale(1.06); }
.guide::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(5,8,10,.05) 30%,rgba(5,8,10,.35) 55%,rgba(5,8,10,.9) 100%); }
.guide__role{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-deep); }
.guide__name{ font-family:var(--display); font-style:italic; font-weight:500; font-size:1.7rem; color:#fff; margin:6px 0 0; letter-spacing:-.01em; }
/* height reveal via grid-template-rows (0fr→1fr) - no layout-property animation */
.guide__story{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .6s var(--ease), opacity .5s var(--ease); }
.guide__story > .guide__story-inner{ overflow:hidden; min-height:0; color:rgba(255,255,255,.86); font-family:var(--display); font-style:italic; font-size:1.02rem; line-height:1.4; padding-top:12px; }
.guide:hover .guide__story{ grid-template-rows:1fr; opacity:1; }
.guide__tag{ position:absolute; top:18px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:7px; background:rgba(0,0,0,.34); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; font-weight:500; padding:7px 13px; border-radius:100px; }
.guide__tag svg{ width:13px; height:13px; color:#ffc94d; fill:#ffc94d; }

/* ══════════════════════════════════════════════════════════════════
   ANIMATED HERO - spring-cycling rotating word (framer-motion port)
   ══════════════════════════════════════════════════════════════════ */
.anim-hero__inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center; padding:clamp(20px,6vh,60px) 0; }
.anim-hero__badge{ font-size:14px; }
.anim-hero__badge svg{ width:16px; height:16px; }
.anim-hero__title{
  font-family:var(--serif); font-weight:500; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2.4rem,6vw,4.6rem); max-width:16ch; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:.06em;
}
.anim-hero__lead-line{ color:var(--ink); }
/* the rotating word sits in an overflow-clipped line; words are absolutely stacked */
.anim-hero__rotate{ position:relative; display:block; width:100%; overflow:visible; text-align:center; margin-top:.12em; min-height:1.4em; }
.anim-hero__rotate .word{
  position:absolute; left:0; right:0; text-align:center;
  font-family:var(--display); font-style:italic; font-weight:600; color:var(--teal); text-transform:none; letter-spacing:0;
  opacity:0; transform:translateY(16px); will-change:transform,opacity;
  transition:transform .7s var(--ease), opacity .6s ease;
}
.anim-hero__rotate .word.is-up{ transform:translateY(-16px); opacity:0; }
.anim-hero__rotate .word.is-down{ transform:translateY(16px); opacity:0; }
.anim-hero__rotate .word.is-on{ transform:translateY(0); opacity:1; }
.anim-hero__copy{ color:var(--muted); font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.65; max-width:44ch; }
.anim-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:4px; }
@media (prefers-reduced-motion:reduce){
  .anim-hero__rotate .word{ transition:opacity .4s ease; transform:none; }
  .anim-hero__rotate .word.is-up,.anim-hero__rotate .word.is-down{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS - columns that scroll bottom→top in a seamless loop
   ══════════════════════════════════════════════════════════════════ */
.reviews{ display:grid; gap:24px; grid-template-columns:1fr;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%); }
@media(min-width:680px){ .reviews{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .reviews{ grid-template-columns:repeat(3,1fr); } }
.reviews-col{ position:relative; height:clamp(470px,66vh,650px); overflow:hidden; }
.reviews-col__track{ display:block; will-change:transform; animation:reviewsUp var(--dur,40s) linear infinite; }
.reviews-col:hover .reviews-col__track{ animation-play-state:paused; }   /* pause to read */
.reviews-col__track .testi-card{ margin:0 0 24px; width:100%; box-sizing:border-box; }
.reviews-col__track .testi-card p{ font-size:1.08rem; line-height:1.55; }
@keyframes reviewsUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
/* 2-column layout drops the third column */
@media(min-width:680px) and (max-width:999px){ .reviews-col:nth-child(3){ display:none; } }
/* reduced motion: no scroll, show a single static set */
@media (prefers-reduced-motion:reduce){
  .reviews{ -webkit-mask-image:none; mask-image:none; }
  .reviews-col{ height:auto; overflow:visible; }
  .reviews-col__track{ animation:none; }
  .reviews-col__track .testi-card.is-dup{ display:none; }
}

/* horizontal single-row variant - same seamless loop on the X axis */
/* padding gives the cards' shadows room inside the clipped row (otherwise they are cut flat at the bottom);
   the negative margin keeps the visual spacing between rows unchanged */
.reviews-row{ position:relative; overflow:hidden; padding:10px 0 40px; margin-top:-10px; margin-bottom:-40px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%); }
.reviews-row__track{ display:flex; gap:24px; width:max-content; will-change:transform;
  animation:reviewsRow var(--rowdur,64s) linear infinite; }
.reviews-row:hover .reviews-row__track{ animation-play-state:paused; }   /* pause to read */
.reviews-row__track .testi-card{ flex:0 0 auto; width:clamp(300px,80vw,384px); margin:0; box-sizing:border-box; height:auto; }   /* height:auto lets the row stretch every card to the tallest */
.reviews-row__track .testi-card p{ font-size:1.06rem; line-height:1.55; }
@keyframes reviewsRow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.reviews-row--rev .reviews-row__track{ animation-direction:reverse; }
.reviews-row:last-of-type{ margin-bottom:0; }
/* reduced motion: no scroll, single static set that can be swiped */
@media (prefers-reduced-motion:reduce){
  .reviews-row{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .reviews-row__track{ animation:none; }
  .reviews-row__track .testi-card.is-dup{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════
   PRESS / AWARDS STRIP - "As featured in"
   ══════════════════════════════════════════════════════════════════ */
.press{ padding:44px 0 8px; }
.press__label{ text-align:center; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:26px; }
.press__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,4vw,58px); }
.press__logo{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.05rem,1.8vw,1.5rem); letter-spacing:.01em; color:var(--ink); opacity:.42; filter:grayscale(1); transition:opacity .4s ease, transform .5s var(--ease); white-space:nowrap; }
.press__logo small{ font-family:var(--sans); font-style:normal; font-weight:700; font-size:max(11px,.5em); letter-spacing:.18em; text-transform:uppercase; display:block; opacity:.7; margin-top:2px; text-align:center; }
.press__logo:hover{ opacity:.92; transform:translateY(-2px); }

/* ══════════════════════════════════════════════════════════════════
   BLUEPRINT SECTIONS - trust bar · social proof · difference ·
   why-choose · meet host · booking steps · FAQ · final invitation
   ══════════════════════════════════════════════════════════════════ */

/* - trust bar (horizontal scrolling marquee) - */
.section.trustbar{ padding-top:clamp(20px,3vw,32px); padding-bottom:clamp(20px,3vw,32px); }  /* intentional slim band */
.trustbar__viewport{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.trustbar__track{ list-style:none; margin:0; padding:0; display:flex; width:max-content; will-change:transform; animation:trustScroll 42s linear infinite; }
.trustbar__viewport:hover .trustbar__track{ animation-play-state:paused; }
.trustbar__track li{ display:flex; align-items:center; gap:11px; white-space:nowrap; padding:0 clamp(26px,3.4vw,52px); font-size:15px; font-weight:500; color:var(--ink); }
.trustbar__track [data-icon]{ display:inline-flex; flex:none; }
.trustbar__track svg{ width:19px; height:19px; color:var(--teal); }
/* content drifts to the right (two identical halves → seamless) */
@keyframes trustScroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .trustbar__track{ animation:none; } .trustbar__viewport{ overflow-x:auto; } }

/* - red micro-detail: short logo-red rule under section titles - */
.sec-title::after{ content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--ember); margin:16px auto 0; }
.host__body .sec-title::after{ margin-left:0; margin-right:auto; }

/* - social proof - */
.social__title{ white-space:nowrap; font-size:clamp(1.4rem,2.8vw,2.1rem); }
@media(max-width:700px){ .social__title{ white-space:normal; } }
.social__stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(30px,6vw,84px); margin-bottom:48px; text-align:center; }
.social__stat b{ display:block; font-family:var(--sans); font-style:normal; font-weight:800; font-size:clamp(2.4rem,4.4vw,3.4rem); color:var(--ink); line-height:1; letter-spacing:-.02em; }
.social__stat span:not(.stars){ display:block; font-family:var(--sans); font-size:14.5px; color:var(--muted); margin-top:10px; text-transform:none; letter-spacing:normal; }
.social__stat .stars{ display:inline-flex; justify-content:center; margin-bottom:10px; }
.social__reviews{ display:grid; gap:24px; grid-template-columns:1fr; margin-bottom:34px; }
@media(min-width:820px){ .social__reviews{ grid-template-columns:repeat(3,1fr); } }
.social__reviews .testi-card{ margin:0; }
.text-center{ text-align:center; }
.text-center .link-arrow{ color:var(--ink); }

/* - authority strip (worded credentials, styled like the old press wordmarks) - */
.authority__row{ list-style:none; margin:0 auto; padding:0; max-width:1120px; display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:center; gap:clamp(16px,2.6vw,42px); text-align:center; }
.authority__row li{ position:relative; flex:0 0 auto; white-space:nowrap; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(0.8rem,1.1vw,1.05rem); line-height:1.32; letter-spacing:.01em; color:var(--ink); opacity:.5; text-align:center; transition:opacity .4s ease, transform .5s var(--ease); }
.authority__row li:hover{ opacity:.95; transform:translateY(-2px); }
.authority__row li:not(:last-child)::after{ content:"·"; position:absolute; right:calc(-1 * clamp(8px,1.3vw,21px)); top:50%; transform:translate(50%,-50%); color:var(--muted); font-size:1.1em; opacity:.7; }
@media(max-width:860px){ .authority__row{ flex-wrap:wrap; gap:18px 30px; } .authority__row li::after{ display:none; } }

/* - the difference - */
.difference .sec-title{ margin-bottom:26px; }
.difference p{ color:var(--muted); font-size:1.06rem; line-height:1.78; margin-bottom:18px; }
.difference__pull{ font-family:var(--display); font-style:italic; color:var(--ink)!important; font-size:clamp(1.4rem,2.7vw,2.05rem)!important; line-height:1.3; margin-top:30px!important; }

/* - why travelers choose - */
.why-grid{ display:grid; gap:24px; grid-template-columns:1fr; margin-top:52px; }
@media(min-width:680px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }
.why-card{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; background:var(--paper-3); transition:transform .5s var(--ease), box-shadow .55s var(--ease); }
.why-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.why-card__ic{ width:54px; height:54px; border-radius:50%; background:var(--paper-2); color:var(--teal); display:grid; place-items:center; margin-bottom:20px; }
.why-card__ic svg{ width:26px; height:26px; }
.why-card h3{ font-family:var(--sans); font-weight:600; font-size:1.2rem; margin-bottom:10px; color:var(--ink); }
.why-card p{ font-size:14.5px; color:var(--muted); line-height:1.65; }

/* - why choose: auto-advancing feature steps (native port) - */
.featsteps{ display:grid; gap:32px; grid-template-columns:1fr; align-items:stretch; margin-top:44px; }
@media(min-width:820px){ .featsteps{ grid-template-columns:1.05fr 1fr; gap:56px; } }
.whychoose__sub{ max-width:none; white-space:nowrap; font-size:15px; text-transform:uppercase; letter-spacing:.04em; }
.whychoose .sec-title::after{ margin-top:34px; }
@media(max-width:760px){ .whychoose__sub{ white-space:normal; } .whychoose .sec-title{ white-space:normal !important; } }
.featsteps__list{ display:flex; flex-direction:column; gap:22px; order:2; }
@media(min-width:820px){ .featsteps__list{ order:1; } }
.featstep{ display:flex; align-items:flex-start; gap:18px; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:0; opacity:.4; transition:opacity .5s var(--ease); }
.featstep.is-active{ opacity:1; }
.featstep__num{ flex:none; width:44px; height:44px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--muted); transition:transform .4s var(--ease), background .4s ease, border-color .4s ease, color .4s ease; }
.featstep__num ._ic{ display:inline-flex; }
.featstep__num svg{ width:20px; height:20px; }
.featstep.is-done .featstep__num{ border-color:var(--teal); color:var(--teal); }
.featstep.is-active .featstep__num{ background:var(--teal); border-color:var(--teal); color:#fff; transform:scale(1.1); }
.featstep__title{ display:block; font-family:var(--sans); font-weight:600; font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--ink); }
.featstep__text{ display:block; margin-top:5px; color:var(--muted); font-size:.98rem; line-height:1.6; }
.featsteps__media{ order:1; position:relative; min-height:clamp(300px,62vw,420px); border-radius:var(--radius-lg); overflow:hidden; perspective:1000px; }
@media(min-width:820px){ .featsteps__media{ order:2; min-height:0; } }  /* stretch to the step list's height */
.featsteps__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:translateY(36px); transition:opacity .55s var(--ease), transform .65s var(--ease); }
.featsteps__img.is-active{ opacity:1; transform:none; }
.featsteps__media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(to top, var(--paper), rgba(255,255,255,0)); pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .featstep{ opacity:1; } .featsteps__img{ transition:opacity .3s ease; } }

/* - meet your personal host - */
.host__grid{ display:grid; gap:40px; align-items:center; margin-top:16px; }
@media(min-width:900px){ .host__grid{ grid-template-columns:.85fr 1.15fr; gap:64px; } }
.host__media{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; }
.host__media img{ width:100%; height:100%; object-fit:cover; }
.host__body .eyebrow{ margin-bottom:16px; }
.host__body .sec-title{ text-align:left; margin-bottom:20px; font-family:var(--serif); font-size:clamp(1.35rem,2.2vw,1.75rem); }
.host__body p{ color:var(--muted); font-size:1.02rem; line-height:1.75; margin-bottom:16px; }
.host__sign{ font-family:var(--display); font-style:italic; color:var(--ink)!important; font-size:1.53rem!important; margin:22px 0 26px!important; }
.host__sign span{ display:block; font-family:var(--sans); font-style:normal; font-size:13px; letter-spacing:.04em; color:var(--teal); margin-top:8px; }

/* - booking steps - */
.steps{ display:grid; gap:24px; grid-template-columns:1fr; margin-top:52px; }
@media(min-width:680px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ padding:30px 26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper-3); }
.step__n{ display:block; font-family:var(--serif); font-style:normal; font-weight:600; font-size:2.4rem; color:var(--teal); line-height:1; margin-bottom:14px; }
.step h3{ font-family:var(--sans); font-weight:600; font-size:1.1rem; margin-bottom:8px; color:var(--ink); }
.step p{ font-size:14px; color:var(--muted); line-height:1.6; }

/* - FAQ (native details/summary accordion) - */
/* FAQ section headings use the subtitle font (EB Garamond); questions use the body font, bold */
.faq-title{ font-family:var(--serif); font-style:normal; font-weight:500; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.25; letter-spacing:0; text-align:center; margin:0; padding:.2em 0 .3em; }
.eyebrow.faq-eyebrow{ font-family:var(--serif); font-size:14px; font-weight:600; letter-spacing:.18em; }
.faq__list{ margin-top:44px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item:first-child{ border-top:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 2px; font-family:var(--sans); font-weight:600; font-size:1.06rem; color:var(--ink); transition:color .3s ease; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-family:var(--sans); font-weight:400; font-size:1.6rem; line-height:1; color:var(--teal); transition:transform .35s var(--ease); flex:none; }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary:hover{ color:var(--teal); }
.faq__item p{ color:var(--muted); font-size:15px; line-height:1.7; padding:0 2px 22px; max-width:66ch; }

/* - final invitation - */
.invite{ text-align:center; }
.invite p{ color:var(--muted); font-size:1.08rem; line-height:1.7; max-width:56ch; margin:18px auto 30px; }
.invite__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ══════════════════════════════════════════════════════════════════
   POPULAR DESTINATIONS - globe (left) + destinations panel (right)
   ══════════════════════════════════════════════════════════════════ */
.globe-layout{ display:grid; gap:34px; align-items:center; grid-template-columns:1fr; margin-top:8px; }
@media(min-width:920px){ .globe-layout{ grid-template-columns:1.1fr .9fr; gap:52px; } }
.globe-wrap{ position:relative; width:100%; max-width:520px; margin:0 auto; aspect-ratio:1; }
.globe-canvas{ width:100%; height:100%; display:block; opacity:0; transition:opacity .8s var(--ease); cursor:grab; contain:layout paint size; }
.dest-panel h3{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.5rem,2.4vw,2rem); color:var(--ink); margin-bottom:14px; }
.dest-panel > p{ color:var(--muted); font-size:1rem; line-height:1.7; margin-bottom:22px; max-width:48ch; }
.dest-list{ list-style:none; margin:0 0 26px; padding:0; }
.dest-list li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:15px; }
.dest-list li:last-child{ border-bottom:1px solid var(--line); }
.dest-list b{ color:var(--ink); font-weight:600; }
.dest-list li > span:last-child{ margin-left:auto; color:var(--muted); font-size:13.5px; }
.globe-dot{ width:8px; height:8px; border-radius:50%; background:var(--ember); flex:none; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER - black
   ══════════════════════════════════════════════════════════════════ */
.footer{ background:#0b0b0c; color:#f4f4f2; border-top-color:rgba(255,255,255,.08); }
.footer .brand{ color:#fff; }
.footer__brand h3{ color:#fff; }
.footer__cta-row{ border-bottom-color:rgba(255,255,255,.1); }
.footer .why h4,.footer .why__t{ color:#f4f4f2; }
.footer__col h5{ color:rgba(255,255,255,.5); }
.footer__col a{ color:rgba(255,255,255,.72); }
.footer__col a:hover{ color:var(--sky); }
.footer__contact li{ color:rgba(255,255,255,.72); }
.footer__contact svg{ color:var(--sky); }
.footer__bottom{ color:rgba(255,255,255,.5); }
.footer__socials a{ background:rgba(255,255,255,.1); color:#fff; }
.footer__socials a:hover{ background:var(--teal); color:#fff; }
.footer__sky svg path{ fill:rgba(255,255,255,.045); }

/* ══════════════════════════════════════════════════════════════════
   SMOOTH SCROLL - glide flag (JS drives window.scrollTo)
   ══════════════════════════════════════════════════════════════════ */
html.bl-smooth{ scroll-behavior:auto; }  /* JS owns the easing; disable native */

/* ══════════════════════════════════════════════════════════════════
   EXPERIENCES RAIL - horizontal scroll of tour pages (about + tour detail)
   ══════════════════════════════════════════════════════════════════ */
.exp-rail{ overflow:hidden; padding:10px 0 28px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.exp-rail__track{ display:flex; gap:20px; width:max-content; padding:0 10px; animation:exp-marquee 64s linear infinite; will-change:transform; }
.exp-rail:hover .exp-rail__track{ animation-play-state:paused; }
@keyframes exp-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.exp-card{ flex:0 0 306px; max-width:306px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.exp-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -24px rgba(17,17,16,.4); }
.exp-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.exp-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.exp-card:hover .exp-card__media img{ transform:scale(1.05); }
.exp-card__dur{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94); color:var(--ink); font-family:var(--sans); font-weight:600; font-size:12px; padding:5px 11px; border-radius:999px; }
.exp-card__body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.exp-card__loc{ display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-family:var(--sans); font-weight:600; font-size:12.5px; }
.exp-card__loc svg{ width:13px; height:13px; }
.exp-card__body h3{ font-family:var(--serif); font-weight:600; font-size:1.22rem; line-height:1.3; margin:0; color:var(--ink); }
.exp-card__go{ margin-top:auto; display:inline-flex; align-items:center; gap:7px; color:var(--ember); font-family:var(--sans); font-weight:600; font-size:13.5px; white-space:nowrap; }
.exp-card__go svg{ width:15px; height:15px; flex:none; }
.tour-card__btn{ white-space:nowrap; }
.tour-card__btn svg{ flex:none; vertical-align:middle; }
@media(max-width:600px){ .exp-card{ flex-basis:80vw; max-width:80vw; } }
@media(prefers-reduced-motion: reduce){
  .exp-rail{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .exp-rail__track{ animation:none; }
}

/* tour detail - rating star size + not-included block */
.head-row .tour-card__rating{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.head-row .tour-card__rating svg{ width:18px; height:18px; color:var(--ember); }
.notinc{ margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.notinc small{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.notinc ul{ list-style:none; margin:8px 0 0; padding:0; }
.notinc li{ position:relative; padding-left:16px; color:var(--muted); font-size:13.5px; line-height:1.7; }
.notinc li::before{ content:"-"; position:absolute; left:0; }

/* EB Garamond elements set in ALL CAPS (per request) */
.authority__row li,
.host__body .sec-title,
.anim-hero__title{ text-transform:uppercase; letter-spacing:.04em; }

/* hero script title (Amalfi): NO vertical clip. Replace the overflow mask with a
   fade-up reveal so tall script ascenders/descenders are never cut. */
.hero .rise-line{ overflow:visible; padding:.04em 0; }
.hero .rise-line > span{ transform:translateY(26px); opacity:0; transition:transform .9s var(--ease), opacity .8s ease; }
.hero .rise.in .rise-line > span{ transform:none; opacity:1; }

/* keep "Every Detail Handled" on one line */
.booking .sec-title{ white-space:nowrap; }
@media(max-width:560px){ .booking .sec-title{ white-space:normal; } }

/* section titles kept on one line (wrap only on very small screens) */
.sec-title--1line{ white-space:nowrap; }
@media(max-width:560px){ .sec-title--1line{ white-space:normal; } }

/* one-line titles can exceed the 640px head cap, so let their head be full width to center properly */
.section-head:has(.sec-title--1line){ max-width:none; }
.booking .section-head{ max-width:none; }

/* mobile/tablet: generous line spacing so wrapped script titles never overlap */
@media(max-width:768px){
  .sec-title,
  .display-lg, .display-md,
  .page-hero h1, .hero h1,
  .anim-hero__title, .host__body .sec-title{ line-height:1.55; }
}

/* booking card: multiple FareHarbor buttons (per duration) */
.book-card__cta .btn + .btn{ margin-top:10px; }
.fh-label{ display:block; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }

/* - home: 56% more space between sections (base clamp(64px,8vw,104px) x1.3 x1.2); the slim trust bar keeps its own - */
body[data-page="home"] .section:not(.trustbar){ padding-top:clamp(100px,12.5vw,162px); }
body[data-page="home"] .section:last-of-type{ padding-bottom:clamp(100px,12.5vw,162px); }

/* "Coming soon" experiences: visible but not clickable */
.tour-card--soon{ cursor:default; }
.tour-card--soon img{ filter:grayscale(.45) brightness(.82); }
.tour-card--soon:hover,.tour-card--soon.reveal.in:hover,.tour-card--soon:active{ transform:none; box-shadow:none; }
.tour-card--soon:hover img{ transform:none; transition:none; }
.tour-card__badge--soon{ background:var(--ember); }
.tour-card--soon .tour-card__btn,.tour-card--soon:hover .tour-card__btn{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.55); }
.exp-card--soon{ cursor:default; }
.exp-card--soon:hover{ transform:none; box-shadow:none; }
.exp-card--soon .exp-card__media img,.exp-card--soon:hover .exp-card__media img{ filter:grayscale(.45) brightness(.9); transform:none; }
.exp-card--soon .exp-card__dur{ background:var(--ember); color:#fff; }
.exp-card--soon .exp-card__go{ color:var(--muted); }
.map-panel__soon{ display:block; padding:13px 0; border-top:1px solid var(--line); font-size:14.5px; font-weight:600; color:var(--muted); }
.soon-tag{ display:inline-block; margin-left:8px; padding:3px 10px; border-radius:999px; background:var(--ember); color:#fff; font-family:var(--sans); font-style:normal; font-size:11.5px; font-weight:600; letter-spacing:.02em; vertical-align:middle; }

/* Phones: the three review columns become three horizontal rows that loop on their own.
   Row 1 moves left to right, row 2 right to left, row 3 left to right. */
@media(max-width:679px){
  .reviews{ display:block; -webkit-mask-image:none; mask-image:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
  .reviews-col{ height:auto; overflow:hidden; padding:6px 0 26px; margin-bottom:-6px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%); }
  .reviews-col:last-child{ margin-bottom:0; }
  .reviews-col__track{ display:flex; width:max-content; animation:reviewsRow var(--dur,40s) linear infinite reverse; }
  .reviews-col:nth-child(2) .reviews-col__track{ animation-direction:normal; }
  .reviews-col:hover .reviews-col__track{ animation-play-state:running; }   /* a tap must not freeze the loop */
  /* spacing is a right margin (not a flex gap) so translateX(-50%) lands exactly on the duplicate set */
  .reviews-col__track .testi-card{ flex:0 0 auto; width:clamp(272px,84vw,340px); height:auto; margin:0 16px 0 0; padding:22px 24px; gap:12px; }
  .reviews-col__track .testi-card p{ font-size:.97rem; line-height:1.5; }
}
@media(max-width:679px) and (prefers-reduced-motion:reduce){
  .reviews-col{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .reviews-col__track{ animation:none; }
}