<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Start Planning — Moments Ahead</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<style>
:root {
--cream: #faf8f4;
--white: #ffffff;
--black: #1a1a1a;
--mid: #5a5a5a;
--light: #9a9a9a;
--border: rgba(0,0,0,0.1);
--soft: #f2ede6;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; background: var(--cream); color: var(--black); min-height: 100vh; font-weight: 300; }
nav { display: flex; align-items: center; justify-content: center; padding: 26px 40px; border-bottom: 1px solid var(--border); background: var(--white); }
.nav-logo { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--black); text-decoration: none; }
.hero { text-align: center; padding: 64px 24px 48px; border-bottom: 1px solid var(--border); background: var(--white); }
.hero-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--light); margin-bottom: 20px; }
.hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(38px, 5.5vw, 62px); font-weight: 300; line-height: 1.12; color: var(--black); }
.hero h1 em { font-style: italic; }
.hero p { font-size: 14px; font-weight: 300; color: var(--mid); max-width: 480px; margin: 18px auto 0; line-height: 1.85; }
.disclaimer-banner { background: var(--soft); border-top: 1px solid var(--border); padding: 12px 24px; text-align: center; font-size: 12px; font-weight: 400; color: var(--mid); letter-spacing: 0.03em; }
.progress-wrap { background: var(--white); border-bottom: 1px solid var(--border); }
.progress-fill { height: 2px; background: var(--black); transition: width 0.4s ease; width: 10%; }
.step-label { text-align: center; padding: 13px; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--light); }
.form-outer { max-width: 700px; margin: 0 auto; padding: 52px 24px 100px; }
.step { display: none; }
.step.active { display: block; animation: appear 0.3s ease; }
@keyframes appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.step-heading { margin-bottom: 38px; }
.step-heading h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 4vw, 40px); font-weight: 300; line-height: 1.15; margin-bottom: 10px; }
.step-heading h2 em { font-style: italic; }
.step-heading p { font-size: 13.5px; font-weight: 300; color: var(--mid); line-height: 1.8; }
.divider { width: 36px; height: 1px; background: var(--border); margin: 30px 0; }
.fg { margin-bottom: 28px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field > label { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); }
.field > label .req { color: var(--black); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], select {
font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 300; color: var(--black);
background: transparent; border: none; border-bottom: 1px solid var(--border);
padding: 9px 0 11px; width: 100%; outline: none; transition: border-color 0.2s;
appearance: none; -webkit-appearance: none; border-radius: 0;
}
input:focus, select:focus { border-bottom-color: var(--black); }
input::placeholder { color: rgba(90,90,90,0.35); font-weight: 300; }
textarea {
font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 300; color: var(--black);
background: var(--soft); border: 1px solid var(--border); padding: 13px 15px;
width: 100%; outline: none; resize: vertical; min-height: 100px;
line-height: 1.75; transition: border-color 0.2s, background 0.2s; border-radius: 0;
}
textarea:focus { border-color: var(--black); background: var(--white); }
textarea::placeholder { color: rgba(90,90,90,0.35); font-weight: 300; }
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a5a5a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; cursor: pointer;
}
/* PILLS */
.pill-group { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.pill {
display: inline-flex; flex-direction: column; padding: 10px 16px;
border: 1px solid var(--border); font-family: 'Jost', sans-serif;
cursor: pointer; transition: all 0.18s; user-select: none; background: var(--white);
}
.pill input { display: none; }
.pill:hover { border-color: var(--black); }
.pill.selected { border-color: var(--black); background: var(--black); color: var(--white); }
.pill-main { font-size: 13px; font-weight: 400; }
.pill-sub { font-size: 10.5px; font-weight: 300; color: var(--light); margin-top: 3px; line-height: 1.4; }
.pill.selected .pill-sub { color: rgba(255,255,255,0.5); }
/* Simple pills (no sub-label) */
.pill.simple { flex-direction: row; align-items: center; padding: 9px 17px; }
.pill.simple .pill-main { font-size: 13px; }
/* PACKAGE CARDS */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-top: 14px; }
.pkg-card { border: 1px solid var(--border); padding: 20px 16px; cursor: pointer; transition: all 0.2s; text-align: center; background: var(--white); }
.pkg-card input { display: none; }
.pkg-card:hover { border-color: var(--black); }
.pkg-card.sel { border-color: var(--black); background: var(--black); color: var(--white); }
.pkg-name { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-style: italic; font-weight: 300; display: block; line-height: 1.1; margin-bottom: 6px; }
.pkg-days { font-size: 9px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--light); display: block; margin-bottom: 10px; }
.pkg-card.sel .pkg-days { color: rgba(255,255,255,0.45); }
.pkg-desc { font-size: 11.5px; font-weight: 300; color: var(--mid); line-height: 1.5; }
.pkg-card.sel .pkg-desc { color: rgba(255,255,255,0.55); }
/* BUDGET */
.budget-amount { font-family: 'Cormorant Garamond', serif; font-size: 50px; font-weight: 300; color: var(--black); line-height: 1; margin: 10px 0 16px; }
.budget-amount sup { font-size: 26px; vertical-align: super; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: var(--border); outline: none; border: none; padding: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--black); border-radius: 50%; cursor: pointer; transition: transform 0.15s; }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.3); }
.range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--light); margin-top: 9px; }
/* NOTE BOX */
.note-box { background: var(--soft); border-left: 2px solid var(--border); padding: 14px 18px; font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.7; margin-top: 20px; }
/* CONDITIONAL */
.conditional { display: none; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--border); }
.conditional.show { display: block; animation: appear 0.25s ease; }
/* UPLOAD */
.upload-zone { border: 1px dashed rgba(0,0,0,0.2); padding: 28px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--white); position: relative; }
.upload-zone:hover { border-color: var(--black); background: var(--soft); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon { font-size: 22px; margin-bottom: 8px; }
.upload-label { font-size: 13px; font-weight: 400; color: var(--mid); }
.upload-sub { font-size: 11px; color: var(--light); margin-top: 4px; }
#fileList { margin-top: 12px; }
#fileList span { display: inline-block; background: var(--soft); border: 1px solid var(--border); padding: 4px 10px; margin: 3px; font-size: 11px; color: var(--mid); }
/* NAV */
.nav-row { display: flex; align-items: center; justify-content: space-between; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.btn-back { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--light); background: none; border: none; cursor: pointer; padding: 0; transition: color 0.2s; }
.btn-back:hover { color: var(--black); }
.btn-next { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); background: var(--black); border: none; padding: 15px 34px; cursor: pointer; transition: opacity 0.2s; }
.btn-next:hover, .btn-submit:hover { opacity: 0.7; }
.btn-submit { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); background: var(--black); border: none; padding: 16px 36px; cursor: pointer; transition: opacity 0.2s; }
/* SUCCESS */
#successScreen { display: none; max-width: 520px; margin: 0 auto; text-align: center; padding: 80px 24px 100px; animation: appear 0.5s ease; }
.check-circle { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid var(--black); border-radius: 50%; margin-bottom: 30px; }
.check-circle svg { width: 19px; stroke: var(--black); fill: none; stroke-width: 2; stroke-linecap: round; }
#successScreen h2 { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; line-height: 1.15; margin-bottom: 18px; }
#successScreen h2 em { font-style: italic; }
#successScreen p { font-size: 14px; font-weight: 300; color: var(--mid); line-height: 1.85; }
.success-divider { width: 36px; height: 1px; background: var(--border); margin: 28px auto; }
.fine { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--light); }
footer { text-align: center; padding: 28px 24px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 300; color: var(--light); letter-spacing: 0.06em; line-height: 1.8; }
footer a { color: var(--light); text-decoration: none; }
footer a:hover { color: var(--black); }
@media (max-width: 560px) {
.grid-2, .grid-3 { grid-template-columns: 1fr; }
.span-2 { grid-column: span 1; }
.pkg-grid { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body>
<nav><a href="https://www.momentsahead.com" class="nav-logo">Moments Ahead</a></nav>
<div class="hero">
<p class="hero-eyebrow">Custom Itinerary Request</p>
<h1>Plans made easy,<br>moments made <em>yours.</em></h1>
<p>Share your travel details and we'll craft a personalized itinerary built around how you like to travel — what excites you, what you'd rather skip, and everything in between.</p>
</div>
<div class="disclaimer-banner">
✦ Moments Ahead provides itinerary suggestions only — we do not book flights, hotels, or activities on your behalf. ✦
</div>
<div class="progress-wrap">
<div class="progress-fill" id="progressFill"></div>
<div class="step-label" id="stepLabel">Step 1 of 10</div>
</div>
<div class="form-outer">
<form id="intakeForm" action="https://formspree.io/f/xpqovykr" method="POST" novalidate enctype="multipart/form-data">
<!-- ── STEP 1: PACKAGE ── -->
<div class="step active" data-step="1">
<div class="step-heading">
<h2>Choose your<br><em>experience.</em></h2>
<p>Select the planning package that fits your trip. All packages include a custom day-by-day itinerary, curated suggestions, and booking links — you handle the reservations.</p>
</div>
<div class="fg">
<div class="pkg-grid" id="pkgGroup">
<label class="pkg-card"><input type="radio" name="package" value="The Long Weekend"/>
<span class="pkg-name">The Long Weekend</span>
<span class="pkg-days">1–4 Days · 1 Destination</span>
<span class="pkg-desc">Quick, well-planned escapes without the overwhelm</span>
</label>
<label class="pkg-card"><input type="radio" name="package" value="The Getaway"/>
<span class="pkg-name">The Getaway</span>
<span class="pkg-days">5–7 Days · Up to 2 Destinations</span>
<span class="pkg-desc">Thoughtful pacing with light multi-city planning</span>
</label>
<label class="pkg-card"><input type="radio" name="package" value="The Journey"/>
<span class="pkg-name">The Journey</span>
<span class="pkg-days">8–14 Days · Up to 3 Destinations</span>
<span class="pkg-desc">Complex, multi-stop or international trips</span>
</label>
<label class="pkg-card"><input type="radio" name="package" value="Extended Planning"/>
<span class="pkg-name">Extended Planning</span>
<span class="pkg-days">15+ Days</span>
<span class="pkg-desc">Multi-week or multi-country travel</span>
</label>
</div>
</div>
<div class="nav-row"><span></span><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 2: ABOUT YOU ── -->
<div class="step" data-step="2">
<div class="step-heading">
<h2>A little about<br><em>you.</em></h2>
<p>So we know who we're planning for and how to reach you.</p>
</div>
<div class="fg">
<div class="grid-2">
<div class="field"><label>First Name <span class="req">*</span></label><input type="text" name="firstName" placeholder="Jane" required/></div>
<div class="field"><label>Last Name <span class="req">*</span></label><input type="text" name="lastName" placeholder="Smith" required/></div>
<div class="field"><label>Email Address <span class="req">*</span></label><input type="email" name="email" placeholder="jane@email.com" required/></div>
<div class="field"><label>Phone Number</label><input type="tel" name="phone" placeholder="+1 (555) 000-0000"/></div>
<div class="field span-2"><label>How did you find us?</label>
<select name="referral"><option value="" disabled selected>Select one</option><option>Instagram</option><option>TikTok</option><option>Google Search</option><option>Friend or Family</option><option>Pinterest</option><option>Other</option></select>
</div>
</div>
</div>
<div class="nav-row"><button type="button" class="btn-back" onclick="go(-1)">← Back</button><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 3: TRIP BASICS ── -->
<div class="step" data-step="3">
<div class="step-heading">
<h2>Where to,<br><em>and when?</em></h2>
<p>Destinations, dates, and who's coming along.</p>
</div>
<div class="fg">
<div class="grid-2">
<div class="field span-2"><label>Destination(s) <span class="req">*</span></label><input type="text" name="destinations" placeholder="e.g. Paris, Tokyo, Cancún — or 'open to suggestions!'" required/></div>
<div class="field"><label>Departure Date <span class="req">*</span></label><input type="date" name="departureDate" required/></div>
<div class="field"><label>Return Date <span class="req">*</span></label><input type="date" name="returnDate" required/></div>
<div class="field"><label>Date Flexibility</label>
<select name="flexibility"><option value="" disabled selected>Select</option><option>Dates are fixed</option><option>Flexible by a few days</option><option>Very flexible</option></select>
</div>
<div class="field"><label>How are you getting there?</label>
<select name="travelMode"><option value="" disabled selected>Select</option><option>Flying</option><option>Driving</option><option>Train</option><option>Not sure yet</option></select>
</div>
</div>
</div>
<!-- Flying fields -->
<div class="conditional show" id="flyingFields">
<div class="grid-2">
<div class="field"><label>Flying From (City / Airport)</label><input type="text" name="departureCity" placeholder="Atlanta, GA (ATL)"/></div>
<div class="field"><label>Preferred Cabin Class</label>
<select name="flightClass"><option value="" disabled selected>Select</option><option>Economy</option><option>Premium Economy</option><option>Business Class</option><option>First Class</option><option>Best value available</option></select>
</div>
</div>
</div>
<!-- Driving fields -->
<div class="conditional" id="drivingFields">
<div class="field"><label>Driving From (City / State)</label><input type="text" name="drivingFrom" placeholder="e.g. Austin, TX"/></div>
</div>
<div class="divider"></div>
<div class="fg">
<div class="grid-3">
<div class="field"><label>Adults (18+)</label><input type="number" name="adults" min="1" max="30" placeholder="2"/></div>
<div class="field"><label>Children</label><input type="number" name="children" min="0" max="10" placeholder="0"/></div>
<div class="field"><label>Children's Ages</label><input type="text" name="childrenAges" placeholder="e.g. 5, 9"/></div>
</div>
</div>
<div class="fg">
<div class="field"><label>Trip Type</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill simple"><input type="radio" name="tripType" value="Honeymoon / Romance"/><span class="pill-main">Honeymoon / Romance</span></label>
<label class="pill simple"><input type="radio" name="tripType" value="Family Vacation"/><span class="pill-main">Family Vacation</span></label>
<label class="pill simple"><input type="radio" name="tripType" value="Girls Trip"/><span class="pill-main">Girls Trip</span></label>
<label class="pill simple"><input type="radio" name="tripType" value="Guys Trip"/><span class="pill-main">Guys Trip</span></label>
<label class="pill simple"><input type="radio" name="tripType" value="Solo Adventure"/><span class="pill-main">Solo Adventure</span></label>
<label class="pill simple"><input type="radio" name="tripType" value="Anniversary / Birthday"/><span class="pill-main">Anniversary / Birthday</span></label>
<label class="pill simple"><input type="radio" name="tripType" value="Group Travel"/><span class="pill-main">Group Travel</span></label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Any special occasion?</label><input type="text" name="occasion" placeholder="e.g. 30th birthday, 10-year anniversary…"/></div>
</div>
<div class="nav-row"><button type="button" class="btn-back" onclick="go(-1)">← Back</button><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 4: ACCOMMODATION ── -->
<div class="step" data-step="4">
<div class="step-heading">
<h2>Your ideal<br><em>stay.</em></h2>
<p>We'll suggest places that match your style — you book directly. Tell us what matters to you in a place to stay.</p>
</div>
<div class="fg">
<div class="field"><label>Accommodation Type (select all that apply)</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill simple"><input type="checkbox" name="accomType" value="Hotel"/><span class="pill-main">Hotel</span></label>
<label class="pill simple"><input type="checkbox" name="accomType" value="Airbnb / Vacation Rental"/><span class="pill-main">Airbnb / Vacation Rental</span></label>
<label class="pill simple"><input type="checkbox" name="accomType" value="Boutique Property"/><span class="pill-main">Boutique Property</span></label>
<label class="pill simple"><input type="checkbox" name="accomType" value="Resort"/><span class="pill-main">Resort</span></label>
<label class="pill simple"><input type="checkbox" name="accomType" value="Hostel"/><span class="pill-main">Hostel</span></label>
<label class="pill simple"><input type="checkbox" name="accomType" value="No preference"/><span class="pill-main">No preference</span></label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Accommodation Style</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="accommodation" value="Budget-friendly"/>
<span class="pill-main">Budget-friendly</span>
<span class="pill-sub">Clean, simple stays — hostels, budget hotels, or affordable Airbnbs. The goal is value over amenities.</span>
</label>
<label class="pill">
<input type="radio" name="accommodation" value="Comfort"/>
<span class="pill-main">Comfort (3–4★)</span>
<span class="pill-sub">Reliable mid-range hotels or well-reviewed Airbnbs with good amenities — comfortable but not extravagant.</span>
</label>
<label class="pill">
<input type="radio" name="accommodation" value="Luxury"/>
<span class="pill-main">Luxury (5★)</span>
<span class="pill-sub">High-end properties with premium service, standout design, and elevated amenities.</span>
</label>
<label class="pill">
<input type="radio" name="accommodation" value="Boutique / Unique"/>
<span class="pill-main">Boutique & Unique</span>
<span class="pill-sub">Character-driven stays — think converted palazzos, design hotels, or one-of-a-kind Airbnbs.</span>
</label>
<label class="pill">
<input type="radio" name="accommodation" value="Mix"/>
<span class="pill-main">Mix it up</span>
<span class="pill-sub">Vary by night — splurge on a special stay, save on others.</span>
</label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Special Features (select all that apply)</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Walkable location"/><span class="pill-main">Walkable location</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Rooftop bar"/><span class="pill-main">Rooftop bar</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Spa on-site"/><span class="pill-main">Spa on-site</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Historic property"/><span class="pill-main">Historic property</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Quiet boutique feel"/><span class="pill-main">Quiet boutique feel</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Pool"/><span class="pill-main">Pool</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Ocean / water view"/><span class="pill-main">Ocean / water view</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Near nightlife"/><span class="pill-main">Near nightlife</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Family-friendly"/><span class="pill-main">Family-friendly</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Adults-only"/><span class="pill-main">Adults-only</span></label>
<label class="pill simple"><input type="checkbox" name="hotelFeatures" value="Full kitchen"/><span class="pill-main">Full kitchen</span></label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Bed Preference</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill simple"><input type="radio" name="bedPreference" value="King"/><span class="pill-main">King</span></label>
<label class="pill simple"><input type="radio" name="bedPreference" value="Queen"/><span class="pill-main">Queen</span></label>
<label class="pill simple"><input type="radio" name="bedPreference" value="Two beds"/><span class="pill-main">Two beds</span></label>
<label class="pill simple"><input type="radio" name="bedPreference" value="No preference"/><span class="pill-main">No preference</span></label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Accessibility or Medical Considerations</label><input type="text" name="accessibility" placeholder="e.g. wheelchair accessible, ground floor only, severe allergies…"/></div>
</div>
<div class="nav-row"><button type="button" class="btn-back" onclick="go(-1)">← Back</button><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 5: DINING ── -->
<div class="step" data-step="5">
<div class="step-heading">
<h2>Let's talk<br><em>food.</em></h2>
<p>Dining can define a trip. Tell us how much it matters and what kind of experiences you're after.</p>
</div>
<div class="fg">
<div class="field"><label>How important is dining on this trip?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="diningImportance" value="Very important"/>
<span class="pill-main">Very important</span>
<span class="pill-sub">Food is a highlight — we want memorable meals and curated restaurant picks.</span>
</label>
<label class="pill">
<input type="radio" name="diningImportance" value="Somewhat important"/>
<span class="pill-main">Somewhat important</span>
<span class="pill-sub">A few standout meal suggestions would be great, but it's not the focus.</span>
</label>
<label class="pill">
<input type="radio" name="diningImportance" value="Casual / flexible"/>
<span class="pill-main">Casual / flexible</span>
<span class="pill-sub">We'll figure it out as we go — just point us in the right direction.</span>
</label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Preferred Dining Style (select all that apply)</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Casual local spots"/><span class="pill-main">Casual local spots</span></label>
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Trendy restaurants"/><span class="pill-main">Trendy restaurants</span></label>
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Upscale dining"/><span class="pill-main">Upscale dining</span></label>
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Michelin-star interest"/><span class="pill-main">Michelin-star interest</span></label>
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Street food"/><span class="pill-main">Street food</span></label>
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Cafes & coffee shops"/><span class="pill-main">Cafes & coffee shops</span></label>
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Wine bars"/><span class="pill-main">Wine bars</span></label>
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Rooftop dining"/><span class="pill-main">Rooftop dining</span></label>
<label class="pill simple"><input type="checkbox" name="diningStyle" value="Food halls / markets"/><span class="pill-main">Food halls / markets</span></label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Dietary Restrictions or Allergies</label><input type="text" name="dietary" placeholder="e.g. vegetarian, halal, gluten-free, nut allergy, no seafood…"/></div>
</div>
<div class="fg">
<div class="field"><label>Daily Dining Budget (per person, per day)</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="diningBudget" value="Budget-conscious"/>
<span class="pill-main">Budget-conscious</span>
<span class="pill-sub">Under $30/day — street food, local eateries, casual spots.</span>
</label>
<label class="pill">
<input type="radio" name="diningBudget" value="Moderate"/>
<span class="pill-main">Moderate</span>
<span class="pill-sub">$30–$75/day — sit-down restaurants with good food and a relaxed atmosphere.</span>
</label>
<label class="pill">
<input type="radio" name="diningBudget" value="Comfortable"/>
<span class="pill-main">Comfortable</span>
<span class="pill-sub">$75–$150/day — nicer restaurants, a few splurge-worthy meals mixed in.</span>
</label>
<label class="pill">
<input type="radio" name="diningBudget" value="Luxury"/>
<span class="pill-main">Luxury</span>
<span class="pill-sub">$150+/day — fine dining, chef's tables, and exceptional culinary experiences.</span>
</label>
</div>
</div>
</div>
<div class="nav-row"><button type="button" class="btn-back" onclick="go(-1)">← Back</button><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 6: PACE & TRAVEL STYLE ── -->
<div class="step" data-step="6">
<div class="step-heading">
<h2>Travel style<br><em>& pace.</em></h2>
<p>How you move through a trip is just as important as where you go. Let's make sure every day feels right for you.</p>
</div>
<div class="fg">
<div class="field"><label>How full would you like each day?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="pace" value="Relaxed"/>
<span class="pill-main">Relaxed</span>
<span class="pill-sub">2–3 things per day. Plenty of downtime, slow mornings, room to wander without a strict plan.</span>
</label>
<label class="pill">
<input type="radio" name="pace" value="Balanced"/>
<span class="pill-main">Balanced</span>
<span class="pill-sub">3–4 activities per day. A good mix of structure and breathing room — you see the highlights without feeling rushed.</span>
</label>
<label class="pill">
<input type="radio" name="pace" value="Full itinerary"/>
<span class="pill-main">Full itinerary</span>
<span class="pill-sub">Maximize every day. Back-to-back experiences from morning to evening — you'll rest when you're home.</span>
</label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>How do you feel about mornings?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="mornings" value="Early start"/>
<span class="pill-main">Early start</span>
<span class="pill-sub">Up before 8am — beat the crowds, catch the sunrise, get a head start on the day.</span>
</label>
<label class="pill">
<input type="radio" name="mornings" value="Moderate start"/>
<span class="pill-main">Moderate start</span>
<span class="pill-sub">Out by 9–10am — a relaxed breakfast, then into the day.</span>
</label>
<label class="pill">
<input type="radio" name="mornings" value="Slow mornings"/>
<span class="pill-main">Slow mornings</span>
<span class="pill-sub">Don't start anything before 10am. Mornings are for coffee, ease, and no alarm clocks.</span>
</label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>How about evenings?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="evenings" value="Early to bed"/>
<span class="pill-main">Early evenings</span>
<span class="pill-sub">Dinner by 7pm, winding down by 9–10pm. Evenings are for rest.</span>
</label>
<label class="pill">
<input type="radio" name="evenings" value="Late nights welcome"/>
<span class="pill-main">Late nights welcome</span>
<span class="pill-sub">Staying out late is part of the experience — bars, night markets, evening strolls after dinner.</span>
</label>
<label class="pill">
<input type="radio" name="evenings" value="Depends on the night"/>
<span class="pill-main">Depends on the night</span>
<span class="pill-sub">A mix — some nights out, some nights in. Build in a couple of each.</span>
</label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>How do you prefer to get around?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="transit" value="Very comfortable with public transit"/>
<span class="pill-main">Public transit</span>
<span class="pill-sub">Comfortable navigating metros, buses, and trains. Prefer the local experience.</span>
</label>
<label class="pill">
<input type="radio" name="transit" value="Mix of transit and rideshare"/>
<span class="pill-main">Mix of both</span>
<span class="pill-sub">Happy to use transit for easy routes, but prefer a rideshare when it's more convenient.</span>
</label>
<label class="pill">
<input type="radio" name="transit" value="Taxis / rideshare only"/>
<span class="pill-main">Taxis / Rideshare</span>
<span class="pill-sub">Prefer door-to-door. Skip the transit navigation — just get us there.</span>
</label>
<label class="pill">
<input type="radio" name="transit" value="Rental car"/>
<span class="pill-main">Rental car</span>
<span class="pill-sub">Prefer the freedom and flexibility of driving ourselves.</span>
</label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>How comfortable are you with walking?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="walking" value="Love to walk"/>
<span class="pill-main">Love to walk</span>
<span class="pill-sub">Happy to walk 4–6+ miles a day. Walking is how we discover a city.</span>
</label>
<label class="pill">
<input type="radio" name="walking" value="Moderate walking"/>
<span class="pill-main">Moderate walking</span>
<span class="pill-sub">2–4 miles a day is fine. We enjoy walking but need to mix in breaks or rides.</span>
</label>
<label class="pill">
<input type="radio" name="walking" value="Minimal walking"/>
<span class="pill-main">Minimal walking</span>
<span class="pill-sub">Under 2 miles a day preferred. Please plan transportation between most locations.</span>
</label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>How structured would you like the itinerary?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="structure" value="Highly structured"/>
<span class="pill-main">Highly structured</span>
<span class="pill-sub">Time-blocked days with clear plans — tell us exactly where to be and when.</span>
</label>
<label class="pill">
<input type="radio" name="structure" value="Some flexibility built in"/>
<span class="pill-main">Some flexibility</span>
<span class="pill-sub">A clear plan each day with room to linger, swap, or add as we go.</span>
</label>
<label class="pill">
<input type="radio" name="structure" value="Mostly recommendations"/>
<span class="pill-main">Mostly recommendations</span>
<span class="pill-sub">Give us the best options and let us decide on the day. We prefer free time over a fixed schedule.</span>
</label>
</div>
</div>
</div>
<div class="nav-row"><button type="button" class="btn-back" onclick="go(-1)">← Back</button><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 7: ACTIVITIES & PRIORITIES ── -->
<div class="step" data-step="7">
<div class="step-heading">
<h2>Interests &<br><em>priorities.</em></h2>
<p>Tell us what you want more of — and what your top priorities are so we can build around what matters most.</p>
</div>
<div class="fg">
<div class="field"><label>Top Priorities for This Trip <span style="font-size:9px;color:var(--light);letter-spacing:0.1em;">(SELECT UP TO 3)</span></label>
<div class="pill-group" id="priorityGroup" style="margin-top:10px">
<label class="pill simple"><input type="checkbox" name="priorities" value="Cafes & Coffee"/><span class="pill-main">Cafes & Coffee</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Food & Drink"/><span class="pill-main">Food & Drink</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Museums & History"/><span class="pill-main">Museums & History</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Nature & Scenery"/><span class="pill-main">Nature & Scenery</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Nightlife"/><span class="pill-main">Nightlife</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Shopping"/><span class="pill-main">Shopping</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Sightseeing Highlights"/><span class="pill-main">Sightseeing Highlights</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Spa & Wellness"/><span class="pill-main">Spa & Wellness</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Relaxation"/><span class="pill-main">Relaxation</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Romance"/><span class="pill-main">Romance</span></label>
<label class="pill simple"><input type="checkbox" name="priorities" value="Adventure"/><span class="pill-main">Adventure</span></label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Types of Experiences (select all that apply)</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill simple"><input type="checkbox" name="activities" value="Museums"/><span class="pill-main">Museums</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Historic sites"/><span class="pill-main">Historic sites</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Food tours"/><span class="pill-main">Food tours</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Wine tastings"/><span class="pill-main">Wine tastings</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Cooking classes"/><span class="pill-main">Cooking classes</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Scenic viewpoints"/><span class="pill-main">Scenic viewpoints</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Boat tours"/><span class="pill-main">Boat tours</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Markets"/><span class="pill-main">Markets</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Shopping"/><span class="pill-main">Shopping</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Architecture"/><span class="pill-main">Architecture</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Nature / Parks"/><span class="pill-main">Nature / Parks</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Nightlife"/><span class="pill-main">Nightlife</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Beach / Water"/><span class="pill-main">Beach / Water</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Wellness / Spa"/><span class="pill-main">Wellness / Spa</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Photography spots"/><span class="pill-main">Photography spots</span></label>
<label class="pill simple"><input type="checkbox" name="activities" value="Cafes & Coffee"/><span class="pill-main">Cafes & Coffee</span></label>
</div>
</div>
</div>
<div class="fg">
<div class="field"><label>Interested in Shopping Suggestions?</label>
<div class="pill-group" id="shoppingGroup" style="margin-top:10px">
<label class="pill simple"><input type="radio" name="shopping" value="Yes"/><span class="pill-main">Yes</span></label>
<label class="pill simple"><input type="radio" name="shopping" value="Maybe"/><span class="pill-main">Maybe</span></label>
<label class="pill simple"><input type="radio" name="shopping" value="Not important"/><span class="pill-main">Not important</span></label>
</div>
</div>
<div class="conditional" id="shoppingTypes">
<div class="field" style="margin-top:4px"><label>What type of shopping?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill simple"><input type="checkbox" name="shoppingType" value="Local artisan shops"/><span class="pill-main">Local artisan shops</span></label>
<label class="pill simple"><input type="checkbox" name="shoppingType" value="Markets"/><span class="pill-main">Markets</span></label>
<label class="pill simple"><input type="checkbox" name="shoppingType" value="Fashion boutiques"/><span class="pill-main">Fashion boutiques</span></label>
<label class="pill simple"><input type="checkbox" name="shoppingType" value="Luxury shopping"/><span class="pill-main">Luxury shopping</span></label>
</div>
</div>
</div>
</div>
<div class="nav-row"><button type="button" class="btn-back" onclick="go(-1)">← Back</button><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 8: DESTINATION KNOWLEDGE ── -->
<div class="step" data-step="8">
<div class="step-heading">
<h2>A little about<br><em>this destination.</em></h2>
<p>Knowing what you've already seen helps us plan something fresh and personal.</p>
</div>
<div class="fg">
<div class="field"><label>Have you visited this destination before?</label>
<div class="pill-group" id="visitedGroup" style="margin-top:10px">
<label class="pill simple"><input type="radio" name="visitedBefore" value="No — first time"/><span class="pill-main">No — first time</span></label>
<label class="pill simple"><input type="radio" name="visitedBefore" value="Yes"/><span class="pill-main">Yes</span></label>
</div>
</div>
<div class="conditional" id="visitedDetails">
<div class="field" style="margin-bottom:20px"><label>What did you enjoy most last time?</label><textarea name="visitedEnjoy" placeholder="Favorite neighborhoods, restaurants, moments…"></textarea></div>
<div class="field"><label>Places you'd skip this time?</label><textarea name="visitedSkip" placeholder="Already seen the main landmarks — want something different this visit…"></textarea></div>
</div>
</div>
<div class="fg">
<div class="field"><label>Any safety concerns or travel anxieties?</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill simple"><input type="checkbox" name="safety" value="Pickpocketing"/><span class="pill-main">Pickpocketing</span></label>
<label class="pill simple"><input type="checkbox" name="safety" value="Language barriers"/><span class="pill-main">Language barriers</span></label>
<label class="pill simple"><input type="checkbox" name="safety" value="Transportation confusion"/><span class="pill-main">Transportation confusion</span></label>
<label class="pill simple"><input type="checkbox" name="safety" value="Solo travel safety"/><span class="pill-main">Solo travel safety</span></label>
<label class="pill simple"><input type="checkbox" name="safety" value="None"/><span class="pill-main">None</span></label>
</div>
</div>
</div>
<div class="nav-row"><button type="button" class="btn-back" onclick="go(-1)">← Back</button><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 9: BUDGET ── -->
<div class="step" data-step="9">
<div class="step-heading">
<h2>Budget<br><em>guidance.</em></h2>
<p>This helps us suggest the right experiences, restaurants, and stays. There's no wrong answer.</p>
</div>
<div class="fg">
<div class="field"><label>Estimated Total Trip Budget (per person)</label></div>
<div class="budget-amount"><sup>$</sup><span id="budgetVal">3,000</span></div>
<input type="range" id="budgetSlider" name="budget" min="500" max="25000" step="250" value="3000"/>
<div class="range-labels"><span>$500</span><span>$25,000+</span></div>
</div>
<div class="fg" style="margin-top:32px">
<div class="field"><label>Overall Daily Spending Comfort (excluding accommodation)</label>
<div class="pill-group" style="margin-top:10px">
<label class="pill">
<input type="radio" name="dailyBudget" value="Budget-conscious"/>
<span class="pill-main">Budget-conscious</span>
<span class="pill-sub">Under $50/day — street food, free attractions, affordable transport. Every dollar counts.</span>
</label>
<label class="pill">
<input type="radio" name="dailyBudget" value="Moderate"/>
<span class="pill-main">Moderate</span>
<span class="pill-sub">$50–$100/day — sit-down meals, a mix of paid and free activities, comfortable transport.</span>
</label>
<label class="pill">
<input type="radio" name="dailyBudget" value="Comfortable"/>
<span class="pill-main">Comfortable</span>
<span class="pill-sub">$100–$200/day — nicer restaurants, guided tours, private transfers when it makes sense.</span>
</label>
<label class="pill">
<input type="radio" name="dailyBudget" value="Luxury"/>
<span class="pill-main">Luxury</span>
<span class="pill-sub">$200+/day — premium experiences, fine dining, private guides. Cost isn't the deciding factor.</span>
</label>
</div>
</div>
</div>
<div class="nav-row"><button type="button" class="btn-back" onclick="go(-1)">← Back</button><button type="button" class="btn-next" onclick="go(1)">Continue →</button></div>
</div>
<!-- ── STEP 10: VISION & INSPIRATION ── -->
<div class="step" data-step="10">
<div class="step-heading">
<h2>Your vision &<br><em>inspiration.</em></h2>
<p>This is the most important step. The more honestly you share, the more we can make this trip feel like it was made for exactly for you.</p>
</div>
<div class="fg">
<div class="field" style="margin-bottom:26px"><label>What would make this trip amazing? <span class="req">*</span></label>
<textarea name="dreamTrip" placeholder="What kind of moments are you hoping for? Is there something you've always dreamed of doing here? How do you want to feel at the end of this trip?" required></textarea>
</div>
<div class="field" style="margin-bottom:26px"><label>Must-see places or experiences</label>
<textarea name="mustSee" placeholder="Specific landmarks, neighborhoods, restaurants, a cooking class, a scenic drive…"></textarea>
</div>
<div class="field" style="margin-bottom:26px"><label>Things you want to avoid</label>
<textarea name="avoid" placeholder="Overly crowded spots, long museum visits, nightlife, early mornings, seafood…"></textarea>
</div>
<div class="field" style="margin-bottom:26px"><label>Seen anything online you'd love to include?</label>
<textarea name="seenOnline" placeholder="A restaurant from TikTok, a café from Instagram, a hidden viewpoint from a blog — paste it here or describe it."></textarea>
</div>
<div class="field" style="margin-bottom:10px"><label>Inspiration Links (optional)</label></div>
<input type="url" name="inspirationLink1" placeholder="Pinterest board, Instagram reel, blog post URL…" style="margin-bottom:12px"/>
<input type="url" name="inspirationLink2" placeholder="Another link (optional)"/>
</div>
<div class="divider"></div>
<div class="fg">
<div class="field" style="margin-bottom:12px"><label>Upload Inspiration Photos (optional)</label></div>
<div class="upload-zone">
<input type="file" id="inspirationFiles" name="inspirationFiles" accept="image/*" multiple/>
<div class="upload-icon">📎</div>
<div class="upload-label">Drop photos here or tap to browse</div>
<div class="upload-sub">Screenshots, saved images, mood board photos — anything that captures the vibe</div>
</div>
<div id="fileList"></div>
</div>
<div class="fg">
<div class="field"><label>Anything else we should know?</label>
<textarea name="other" placeholder="Passport country, travel anxieties, a vibe you can't quite put into words — this is the place for it."></textarea>
</div>
</div>
<div class="note-box">
Once submitted, you'll hear from us at <strong><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e767b7272715e7371737b706a6d7f767b7f7a307d7173">[email protected]</a></strong> within 48 hours. We'll reach out to confirm details and begin building your itinerary. <em>We do not book anything on your behalf — all suggestions are yours to act on.</em>
</div>
<div class="nav-row">
<button type="button" class="btn-back" onclick="go(-1)">← Back</button>
<button type="submit" class="btn-submit">Submit My Vision →</button>
</div>
</div>
</form>
<!-- SUCCESS -->
<div id="successScreen">
<div class="check-circle"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
<h2>Your moments<br><em>are ahead.</em></h2>
<p>We've received your travel vision and we can't wait to get started. Expect a personal note from us within 48 hours — then we'll take care of the planning so you can simply look forward to the trip.</p>
<div class="success-divider"></div>
<p class="fine"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="345c5158585b74595b59515a4047555c5155501a575b59">[email protected]</a> · momentsahead.com</p>
</div>
</div>
<footer>
<a href="https://www.momentsahead.com">momentsahead.com</a><br>
Moments Ahead provides independent travel planning services and does not book travel or act as a travel agency.
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
let cur = 1;
const total = 10;
function updateProgress() {
document.getElementById('progressFill').style.width = ((cur / total) * 100) + '%';
document.getElementById('stepLabel').textContent = `Step ${cur} of ${total}`;
}
function go(dir) {
const next = cur + dir;
if (next < 1 || next > total) return;
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
cur = next;
document.querySelector(`.step[data-step="${cur}"]`).classList.add('active');
window.scrollTo({ top: 0, behavior: 'smooth' });
updateProgress();
}
// Budget slider
const slider = document.getElementById('budgetSlider');
const bv = document.getElementById('budgetVal');
slider.addEventListener('input', e => {
const v = Number(e.target.value);
bv.textContent = v >= 25000 ? '25,000+' : v.toLocaleString();
});
// Package cards
document.querySelectorAll('.pkg-card').forEach(card => {
card.querySelector('input').addEventListener('change', () => {
document.querySelectorAll('.pkg-card').forEach(c => c.classList.remove('sel'));
card.classList.add('sel');
});
});
// All pills (radio = single select in group, checkbox = multi)
document.querySelectorAll('.pill').forEach(pill => {
const input = pill.querySelector('input');
input.addEventListener('change', () => {
if (input.type === 'radio') {
pill.closest('.pill-group').querySelectorAll('.pill').forEach(p => p.classList.remove('selected'));
}
pill.classList.toggle('selected', input.checked);
});
});
// Priority max 3
document.querySelectorAll('#priorityGroup .pill input').forEach(cb => {
cb.addEventListener('change', () => {
const checked = document.querySelectorAll('#priorityGroup .pill input:checked');
if (checked.length > 3) { cb.checked = false; cb.closest('.pill').classList.remove('selected'); }
});
});
// Shopping conditional
document.querySelectorAll('#shoppingGroup .pill input').forEach(r => {
r.addEventListener('change', () => {
document.getElementById('shoppingTypes').classList.toggle('show', r.value === 'Yes');
});
});
// Visited conditional
document.querySelectorAll('#visitedGroup .pill input').forEach(r => {
r.addEventListener('change', () => {
document.getElementById('visitedDetails').classList.toggle('show', r.value === 'Yes');
});
});
// Flying / driving conditional
document.querySelector('[name="travelMode"]').addEventListener('change', function() {
document.getElementById('flyingFields').classList.toggle('show', this.value === 'Flying');
document.getElementById('drivingFields').classList.toggle('show', this.value === 'Driving');
if (this.value !== 'Flying' && this.value !== 'Driving') {
document.getElementById('flyingFields').classList.remove('show');
document.getElementById('drivingFields').classList.remove('show');
}
});
// File upload
document.getElementById('inspirationFiles').addEventListener('change', function() {
const list = document.getElementById('fileList');
list.innerHTML = '';
Array.from(this.files).forEach(f => {
const s = document.createElem // Submit via Formspree
document.getElementById('intakeForm').addEventListener('submit', async function(e) {
e.preventDefault();
const submitBtn = this.querySelector('.btn-submit');
submitBtn.textContent = 'Sending…';
submitBtn.disabled = true;
const data = new FormData();
const checkboxGroups = {};
this.querySelectorAll('input, select, textarea').forEach(el => {
if (!el.name) return;
if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) return;
if (el.type === 'checkbox') {
checkboxGroups[el.name] = checkboxGroups[el.name] || [];
checkboxGroups[el.name].push(el.value);
} else if (el.type === 'file') {
Array.from(el.files).forEach(f => data.append(el.name, f));
} else {
data.append(el.name, el.value);
}
});
Object.entries(checkboxGroups).forEach(([k, v]) => data.append(k, v.join(', ')));
try {
const res = await fetch('https://formspree.io/f/xpqovykr', {
method: 'POST',
body: data,
headers: { 'Accept': 'application/json' }
});
if (res.ok) {
document.getElementById('intakeForm').style.display = 'none';
document.querySelector('.progress-wrap').style.display = 'none';
document.querySelector('.hero').style.display = 'none';
document.querySelector('.disclaimer-banner').style.display = 'none';
document.getElementById('successScreen').style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
submitBtn.textContent = 'Something went wrong — please try again';
submitBtn.disabled = false;
}
} catch (err) {
submitBtn.textContent = 'Network error — please try again';
submitBtn.disabled = false;
}
});
updateProgress();
</script>
</body>
</html>