/* ══════════════════════════════════════════════════════════════
   BucketList Tours landing page - landing-only layout
   Loads after styles.css + enhance.css (the design system copied
   from the main site): header, hero form, closing form, mobile bar.
   ══════════════════════════════════════════════════════════════ */

/* ── intro curtain (markup is in index.html so it is there from the first paint) ── */
.preloader{animation:lpIntroFailsafe 0s linear 9s forwards}   /* if scripts never run, the curtain still goes away */
@keyframes lpIntroFailsafe{to{visibility:hidden}}
/* the four panels overlap by 2px: on screens with fractional scaling (125%, 150%) their edges do not land on
   whole pixels, and the dark hero behind showed through as a hairline between two panels */
.preloader__panels span + span{margin-left:-2px}
@media (prefers-reduced-motion:reduce){.preloader{display:none}}

/* ── header: logo left, single CTA right (no menu) ── */
.header--landing .header__inner{grid-template-columns:auto 1fr}
@media(max-width:719px){.header--landing .brand__img{height:42px}}
/* the site hides the header CTA on phones; the landing page keeps its one button */
@media(max-width:479px){
  .header--landing .header__cta{display:flex}
  .header--landing .header__cta .btn{padding:10px 18px}
}

/* ── hero: offer on the left, request form on the right ── */
.lp-hero .hero__inner{flex-direction:column;justify-content:flex-end;gap:30px;padding-top:clamp(104px,15vh,150px)}
.lp-hero__copy{display:flex;flex-direction:column;gap:18px;max-width:620px}
.lp-hero h1{font-size:clamp(2.2rem,4.7vw,4rem);line-height:1.5;max-width:none}
.lp-hero .hero__meta{max-width:520px;gap:18px}
.lp-hero .hero__trust{flex-wrap:wrap;gap:10px 14px}
.lp-hero__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lp-hero__points li{display:flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:500;line-height:1.4}
.lp-hero__points [data-icon]{display:inline-flex;flex:none}
.lp-hero__points svg{width:18px;height:18px}
/* side by side only once the headline still fits on two lines next to the 440px card */
@media(min-width:1120px){
  .lp-hero .hero__inner{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}
  .lp-hero__copy{flex:1 1 auto}
  .lp-hero h1{font-size:clamp(2.2rem,4.2vw,4rem)}
}
/* phones: headline stays on two lines and the form starts above the fold */
@media(max-width:479px){
  .lp-hero .hero__inner{padding-top:92px;gap:24px}
  .lp-hero h1{font-size:7.6vw}
  .lp-hero__copy,.lp-hero .hero__meta{gap:14px}
  .lp-hero .hero__meta p{font-size:.97rem;line-height:1.55}
  .lp-hero__points{gap:7px}
  .lp-hero__points li{font-size:14.5px}
}
/* dark base under the first-frame image, in case even that has not arrived yet */
.lp-hero{background:#0b2226}
/* a taller scrim than the home hero: the copy sits lower and over brighter footage */
.lp-hero .hero__bg::after{background:linear-gradient(180deg,rgba(8,30,34,.4) 0%,rgba(8,30,34,.18) 28%,rgba(8,30,34,.42) 62%,rgba(8,30,34,.78) 100%)}

/* ── request form card ── */
.lp-form{width:100%;max-width:440px;flex:none;padding:26px 26px 22px;box-shadow:var(--shadow-lg);color:var(--ink);scroll-margin-top:100px}
.lp-form > *{min-width:0}
.lp-form__title{font-family:var(--serif);font-style:normal;font-weight:500;font-size:1.65rem;line-height:1.2;letter-spacing:0;margin:0 0 6px;color:var(--ink)}
.lp-form__sub{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.lp-form .form__row{gap:12px}
.lp-form .form__row.two{grid-template-columns:1fr 1fr;align-items:end}   /* fields line up even when one label wraps */
.lp-form .field{gap:6px;margin-bottom:12px;min-width:0}
.lp-form .field input,.lp-form .field select{width:100%;min-width:0;padding:12px 14px;font-size:16px}  /* 16px stops iOS zooming into the field */
.lp-form .btn{margin-top:6px}
.lp-form__note{font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center;margin:12px 0 0}
@media(max-width:1119px){.lp-form{max-width:none}.lp-book{max-width:520px}}   /* stacked: the calendar stays calendar-sized */

/* ── hero availability card: the FareHarbor calendar (an iframe the embed script writes in) ── */
.lp-book__cal{min-height:320px;margin:0 -6px}   /* reserved so the hero does not jump when the calendar loads */
.lp-book__cal iframe{display:block;width:100%;max-width:100%;border:0}
.lp-book .lp-book__alt{margin-top:14px;padding:12px 18px;font-size:14.5px;white-space:normal;text-align:center}   /* may wrap inside the narrow phone card */
@media(max-width:419px){.lp-form{padding:22px 18px 18px}.lp-form .form__row.two{grid-template-columns:1fr}.lp-book__cal{margin:0 -10px}}

/* ── Why Choose: when the photo box is tall and narrow, keep the hotel sign in the hotel pickup photo ── */
.featsteps__img[src*="comfort-hotel-pickup"]{object-position:15% 50%}

/* ── a Book button between sections ── */
.lp-cta{text-align:center;margin-top:48px}

/* ── reviews: two full-width rows drifting in opposite directions ── */
.lp-reviews{display:flex;flex-direction:column;gap:24px;max-width:2200px;margin-inline:auto}
.lp-reviews .reviews-row{--rowdur:46s}
.lp-reviews .reviews-row__track{padding-right:24px}   /* one trailing gap makes the -50% loop land exactly on the copy */

/* ── experiences: FareHarbor item grid (an iframe the embed script writes in) ── */
.lp-items{min-height:340px}   /* reserved so the page does not jump when the grid loads */
.lp-items iframe{display:block;width:100%;max-width:100%;border:0}


/* ── closing: FAQ (left) beside a second booking calendar (right) ── */
.lp-close .anim-hero__inner{padding-bottom:0}
.lp-ask{display:grid;gap:44px;margin-top:56px;align-items:start}
.lp-ask > *{min-width:0}
.lp-ask__faq{scroll-margin-top:100px}
.lp-ask__head .faq-title,.lp-ask__head .sec-title--sub{text-align:left;margin-left:0;margin-right:0}
.lp-ask__head .sec-title::after{margin-left:0;margin-right:auto}
.lp-ask .faq__list{margin-top:30px}
.lp-form--wide{max-width:680px;margin:0 auto;box-shadow:var(--shadow);padding:clamp(24px,3.4vw,36px)}   /* soft elevation only, no outline */
.lp-ask .lp-book{max-width:520px}   /* stacked: the calendar stays calendar-sized */
@media(min-width:1000px){
  .lp-ask{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .lp-ask .lp-form--wide{max-width:none;margin:0;position:sticky;top:104px}   /* the calendar stays in view while answers open */
}

/* ── footer: logo, tagline, one line about Carlos ── */
.footer--landing .whyrow{padding:76px 0 10px}
.footer__landing{display:grid;gap:32px;padding:64px 0 44px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__landing .footer__tagline{max-width:34ch;margin:0 0 22px;line-height:1.6;opacity:.85}
.footer__landing .footer__brand .btn{margin-bottom:0}
.footer__about{max-width:46ch;margin:0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.7}
@media(min-width:820px){.footer__landing{grid-template-columns:1.2fr 1fr;align-items:start}}

/* ── mobile action bar ── */
.lp-bar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,250,249,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -1px 0 rgba(17,17,16,.08),0 -18px 40px -30px rgba(17,17,16,.4);transform:translateY(110%);transition:transform .45s var(--ease)}
.lp-bar.is-on{transform:none}
.lp-bar .btn{padding:13px 18px;font-size:15px}
.lp-bar .btn--primary{flex:1 1 auto}
@media(max-width:767px){
  .lp-bar{display:flex}
  .footer--landing{padding-bottom:96px}   /* room for the bar */
}
@media (prefers-reduced-motion:reduce){
  .lp-bar{transition:none}
}