:root{--navy:#06131c;--ink:#07131d;--paper:#f4efe5;--gold:#d8a64a;--gold-hi:#f0bf68;--muted:#8b9aa1}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Inter,sans-serif}
button{font:inherit;cursor:pointer}

/* ---- Page-level offset for the shared fixed header ---- */
main{padding-top:92px}
@media(max-width:720px){main{padding-top:84px}}

/* ---- Hero ---- */
.hero{max-width:1100px;text-align:center;margin:auto;padding:70px 5% 60px}
.eyebrow{font-size:10px;letter-spacing:.23em;color:var(--gold-hi);font-weight:700}
.hero h1{font:500 clamp(48px,7.5vw,90px)/.9 "Cormorant Garamond",serif;margin:20px 0}
.hero em{color:var(--gold-hi);font-style:normal}
.hero p{color:var(--muted);line-height:1.8;max-width:560px;margin:0 auto}

/* ---- Shell / entry panel ---- */
.shell{max-width:1200px;margin:auto;padding:0 5% 90px}
.panel{border:1px solid rgba(216,166,74,.19);padding:48px;background:#0b1b28}
.panel>p{color:var(--muted);line-height:1.8}
.panel h2,.question h2{font:500 46px/1.05 "Cormorant Garamond",serif;margin:10px 0}
.entries{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:35px}
.entry{position:relative;text-align:left;padding:26px;background:#091722;color:var(--paper);border:1px solid rgba(255,255,255,.05);transition:border-color .2s}
.entry:hover,.entry.active{border-color:rgba(240,191,104,.6)}
.entry small,.entry span{display:block;color:#7c8a91}
.entry b{display:block;font:600 24px "Cormorant Garamond",serif;margin:14px 0 4px}
.entry i{position:absolute;right:20px;top:50%;color:var(--gold-hi);font-size:22px;font-style:normal}

/* ---- Workspace: questions + live canvas ---- */
.workspace{display:grid;grid-template-columns:1fr 330px;min-height:560px;border:1px solid rgba(216,166,74,.19)}
.questions{padding:42px 5%}
.progress{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:16px;color:#6b7a81;font-size:10px;letter-spacing:.08em}
.progress span:first-child{color:var(--gold-hi)}
.question{max-width:700px;margin:65px auto}
.question h2{font-size:56px}
.question p{color:#8f9ca2}
.question input{width:100%;padding:18px;background:#0d2231;border:1px solid rgba(216,166,74,.4);color:#fff;font-size:16px;border-radius:2px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:#0c1e2b;border:1px solid rgba(255,255,255,.09);color:#c3ccd0;padding:13px 17px;border-radius:2px;transition:border-color .2s,color .2s}
.chip.selected{border-color:var(--gold-hi);color:#fff}
.actions{display:flex;justify-content:space-between;margin-top:35px}
.actions button:first-child{background:none;border:0;color:#7c8a91}
.actions button:last-child,.why button,.pass button{background:var(--gold-hi);border:0;padding:15px 24px;color:#191208;font-weight:700;border-radius:2px}
.free{display:block;color:#63727a;margin-top:30px;font-size:13px}
.canvas{padding:30px;background:#05111a;border-left:1px solid rgba(255,255,255,.05)}
.canvas .eyebrow span{float:right;color:#748188}
.route{font:500 32px "Cormorant Garamond",serif;margin:60px 0 40px;display:flex;gap:10px;flex-wrap:wrap;transition:opacity .3s}
.route b{color:var(--gold-hi);font-style:normal}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stats div{border-top:1px solid rgba(255,255,255,.07);padding-top:12px;font-size:8px;letter-spacing:.14em;color:#6b7a81}
.stats strong{display:block;color:var(--paper);font:500 18px "Cormorant Garamond",serif;margin-top:7px;transition:opacity .25s}
.canvas footer{margin-top:140px;color:#6b7a81;font-size:10px}

/* ---- Searching / discovery sequence ---- */
.searching{max-width:900px;margin:0 auto 100px;padding:0 5%;text-align:center}
.searching h2{font:500 clamp(34px,5vw,52px)/1.1 "Cormorant Garamond",serif;margin:14px 0 40px;color:var(--paper)}
.intel-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}
.intel-col{background:var(--ink);padding:32px 30px;text-align:left}
.intel-col h3{font-size:10px;letter-spacing:.2em;color:var(--gold-hi);margin:0 0 18px;font-weight:700}
.understanding-list,.discovering-list{list-style:none;margin:0;padding:0}
.understanding-list li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:#c3ccd0;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.understanding-list li.show{opacity:1;transform:none}
.understanding-list li b{color:var(--gold-hi);font-style:normal;width:16px}
.discovering-list li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:#6b7a81;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease,color .3s}
.discovering-list li.show{opacity:1;transform:none}
.discovering-list li.active{color:#c3ccd0}
.discovering-list li.done{color:#c3ccd0}
.discovering-list li b{width:16px;color:var(--muted);font-style:normal}
.discovering-list li.done b,.discovering-list li.active b{color:var(--gold-hi)}
.searching-foot{margin-top:26px;font-size:11px;letter-spacing:.05em;color:#6b7a81}

/* ---- Destination reveal ---- */
.reveal{max-width:1200px;margin:0 auto 100px;padding:0 5%;display:grid;grid-template-columns:1.4fr .7fr}
.image{min-height:600px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,9,14,.92),rgba(2,9,14,.08) 62%)}
.imageText{position:absolute;z-index:1;left:45px;bottom:50px;right:45px}
.imageText .eyebrow{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.imageText h2{font:500 clamp(64px,8vw,116px) "Cormorant Garamond",serif;margin:10px 0;opacity:0;transform:translateY(14px);transition:opacity .6s ease .12s,transform .6s ease .12s}
.imageText p{color:#d9dfe1;opacity:0;transform:translateY(10px);transition:opacity .5s ease .28s,transform .5s ease .28s}
.reveal.in .imageText .eyebrow,.reveal.in .imageText h2,.reveal.in .imageText p{opacity:1;transform:none}
.image>small{position:absolute;z-index:2;right:14px;bottom:12px;color:rgba(255,255,255,.55);font-size:10px}
.why{padding:55px 45px;background:#0d1f2c;display:flex;flex-direction:column}
.why .eyebrow{opacity:0;transition:opacity .5s ease .4s}
.reveal.in .why .eyebrow{opacity:1}
.why h3{font:500 34px/1.1 "Cormorant Garamond",serif;opacity:0;transform:translateY(8px);transition:opacity .5s ease .5s,transform .5s ease .5s}
.reveal.in .why h3{opacity:1;transform:none}
.why ul{list-style:none;padding:0;margin:14px 0 24px;line-height:1.9;color:#a7b2b6}
.why ul li{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.why ul li.show{opacity:1;transform:none}
.why li:before{content:'✓';color:var(--gold-hi);margin-right:10px}
.why button{width:100%;margin-top:auto;opacity:0;transition:opacity .5s ease .9s}
.reveal.in .why button{opacity:1}

/* ---- Destination matches ---- */
.destinations{max-width:1200px;margin:0 auto 100px;padding:0 5%}
.heading{display:flex;justify-content:space-between;align-items:end}
.heading h2{font:500 50px "Cormorant Garamond",serif;margin:10px 0 30px}
.heading small{color:#6b7a81}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:#0c1c28;border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column}
.photo{height:300px;background-size:cover;background-position:center;position:relative}
.fit-badge{position:absolute;top:14px;right:14px;background:rgba(4,12,18,.82);border:1px solid rgba(240,191,104,.5);color:var(--gold-hi);font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 11px;border-radius:2px}
.cardBody{padding:24px;display:flex;flex-direction:column;flex:1}
.rank{color:var(--gold-hi);font-size:9px;letter-spacing:.15em}
.card h3{font:500 38px "Cormorant Garamond",serif;margin:8px 0}
.card p{color:#7c8a91;font-size:12px;line-height:1.6;min-height:48px}
.card button{width:100%;padding:12px;background:transparent;border:1px solid rgba(216,166,74,.55);color:var(--gold-hi);border-radius:2px;margin-top:auto}

/* ---- Trip Fit ---- */
.trip-fit{max-width:1100px;margin:0 auto 90px;padding:0 5%}
.trip-fit-head{display:flex;align-items:center;gap:28px;padding:34px;background:#0b1b28;border:1px solid rgba(216,166,74,.2);margin-bottom:26px}
.fit-score{width:96px;height:96px;flex:none;border-radius:50%;border:2px solid var(--gold-hi);display:grid;place-items:center;font:500 30px "Cormorant Garamond",serif;color:var(--gold-hi)}
.fit-score small{display:block;font:400 9px Inter,sans-serif;color:#7c8a91;letter-spacing:.05em}
.trip-fit-head-copy .eyebrow{display:block;margin-bottom:6px}
.trip-fit-head-copy h3{font:500 30px "Cormorant Garamond",serif;margin:0 0 8px}
.trip-fit-head-copy p{margin:0;color:#a7b2b6;font-size:14px;line-height:1.6}
.factors{display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;padding:24px 34px;background:#0a1720;border:1px solid rgba(255,255,255,.05);margin-bottom:36px}
.factor{display:grid;grid-template-columns:120px 1fr 34px;align-items:center;gap:10px;font-size:12px;color:#a7b2b6}
.factor-bar{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.factor-fill{height:100%;background:var(--gold-hi)}
.factor b{color:var(--paper);text-align:right}

/* ---- Must / Worth / Skip tiers ---- */
.tier-group{margin-bottom:30px}
.tier-label{font-size:11px;letter-spacing:.1em;font-weight:700;margin-bottom:14px}
.tier-label.must{color:var(--gold-hi)}
.tier-label.worth{color:#7fbf8f}
.tier-label.skip{color:#d97878}
.tier-card{padding:20px 22px;background:#0b1b28;border:1px solid rgba(255,255,255,.06);border-left:3px solid transparent;margin-bottom:10px;position:relative}
.tier-card.must{border-left-color:var(--gold-hi)}
.tier-card.worth{border-left-color:#7fbf8f}
.tier-card.skip{border-left-color:#d97878;opacity:.85}
.tier-card-top{display:flex;justify-content:space-between;align-items:baseline}
.tier-card h4{font:500 22px "Cormorant Garamond",serif;margin:0}
.tier-days{font-size:11px;color:#7c8a91}
.tier-card p{margin:8px 0 14px;font-size:13px;line-height:1.55;color:#a7b2b6;max-width:560px}
.tier-actions{display:flex;gap:10px;align-items:center}
.tier-actions button{background:transparent;border:1px solid rgba(216,166,74,.5);color:var(--gold-hi);padding:8px 16px;border-radius:2px;font-size:12px}
.tier-actions button.why-btn{border-color:rgba(255,255,255,.15);color:#8b98a0}
.tier-actions button:disabled{opacity:.5;cursor:default}
.why-pop{margin-top:12px;padding:12px 14px;background:#05111a;border:1px solid rgba(255,255,255,.08);font-size:12px;color:#c3ccd0;line-height:1.5;max-width:480px}

.continue-row{text-align:center;margin-top:20px}
.continue-row button{background:var(--gold-hi);border:0;padding:15px 30px;color:#191208;font-weight:700;border-radius:2px}

/* ---- Journey builder ---- */
.journey-builder-wrap{max-width:1100px;margin:0 auto 40px;padding:0 5%}
.journey-builder-wrap h3{font:500 26px "Cormorant Garamond",serif;margin:0 0 6px}
.journey-builder-wrap>p{color:#7c8a91;font-size:13px;margin:0 0 20px}
.journey-builder{max-width:560px}
.empty-note{color:#63727a;font-size:13px;padding:20px;border:1px dashed rgba(255,255,255,.1)}
.builder-stop{display:flex;align-items:center;gap:14px;padding:16px 20px;background:#0b1b28;border:1px solid rgba(216,166,74,.2);cursor:grab;transition:opacity .15s,border-color .15s}
.builder-stop.dragging{opacity:.4}
.builder-stop.drag-over{border-color:var(--gold-hi)}
.drag-handle{color:#5a6870;font-size:16px;line-height:1;flex:none}
.builder-stop-main{flex:1}
.builder-stop-main b{display:block;font:500 19px "Cormorant Garamond",serif}
.builder-stop-main span{font-size:12px;color:#7c8a91}
.builder-stop>button[data-remove]{flex:none;background:transparent;border:1px solid rgba(217,120,120,.3);color:#d97878;padding:7px 12px;border-radius:2px;font-size:12px}
.builder-connector{text-align:center;color:var(--gold-hi);padding:4px 0;font-size:13px}
.builder-connector span{color:#6b7a81;font-size:11px;margin-left:6px}
.route-total{max-width:560px;margin:14px 0 0;font-size:12px;color:#7c8a91}
.route-note{max-width:560px;margin-top:14px;padding:12px 16px;background:rgba(240,191,104,.1);border:1px solid rgba(240,191,104,.3);color:var(--gold-hi);font-size:12px;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;pointer-events:none}
.route-note.show{opacity:1;transform:none}

/* ---- Journey Check ---- */
.journey-check{max-width:560px;margin-top:24px;padding:22px 24px;background:#0a1720;border:1px solid rgba(255,255,255,.08)}
.journey-check-head{font-size:11px;letter-spacing:.08em;color:var(--gold-hi);font-weight:700;margin-bottom:14px}
.check-flag{display:flex;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.05);font-size:13px;line-height:1.5;color:#c3ccd0}
.check-flag:first-child{border-top:0}
.check-flag b{flex:none;font-style:normal}
.check-flag.warn b{color:#e0a04a}
.check-flag.tip b{color:var(--gold-hi)}

/* ---- Trip Pass ---- */
.pass{border-top:1px solid rgba(216,166,74,.2);border-bottom:1px solid rgba(216,166,74,.2);text-align:center;padding:90px 5%;background:linear-gradient(120deg,#0e1f2d,var(--ink))}
.pass .eyebrow{display:block;margin-bottom:6px}
.pass h2{font:500 56px/1 "Cormorant Garamond",serif}
.pass p{max-width:680px;margin:20px auto;color:#8f9ca2;line-height:1.8}
.features{margin:28px auto;color:#a7b2b6;font-size:11px;word-spacing:12px}
.price{display:flex;justify-content:center;align-items:center;gap:32px;margin:32px 0}
.price strong{font:500 34px "Cormorant Garamond",serif}
.price small{font-size:14px;color:#7c8a91}
.pass small.legal{display:block;color:#63727a;font-size:11px;margin-top:6px}
.pass small.saved{display:block;color:var(--gold-hi);font-size:12px;margin-top:14px}

/* ---- Journey taking shape (post-unlock) ---- */
.shape{max-width:900px;margin:90px auto;padding:0 5%}
.shapeBox{padding:52px;background:#0a1925;border:1px solid rgba(216,166,74,.2)}
.shapeBox h2{font:500 50px "Cormorant Garamond",serif;margin:12px 0}
.shapeBox p{color:#8f9ca2}
.shapeStep{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#6b7a81;font-size:12px;display:flex;align-items:center;gap:12px}
.shapeStep.done,.shapeStep.active{color:#b8c1c5}
.shapeStep b{color:var(--gold-hi);font-style:normal;width:16px}

.hidden{display:none!important}

@media(max-width:800px){
  .entries,.cards,.reveal,.workspace,.intel-grid,.factors{grid-template-columns:1fr}
  .canvas{border-left:0;border-top:1px solid rgba(255,255,255,.05);min-height:280px}
  .canvas footer{margin-top:70px}
  .entry{padding:22px}
  .question{margin-top:45px}
  .question h2{font-size:42px}
  .reveal{padding:0}
  .image{min-height:480px}
  .why{padding:38px 24px}
  .heading{display:block}
  .heading small{display:block;margin-bottom:18px}
  .pass h2{font-size:44px}
  .price{flex-direction:column}
  .trip-fit-head{flex-direction:column;text-align:center}
}