/* Hallmark · macrostructure: Marquee-Hero (home) + varied per page · tone: refined-warm-trustworthy · anchor hue: indigo-purple
 * pre-emit critique: P5 H4 E4 S4 R4 V4
 * BILT 2 Travel — site styles. Grounded in real brand; placeholders marked CONFIRM in HTML.
 */
@import url("tokens.css");

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{ overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--paper); font-size:var(--text-base); line-height:1.65;
  -webkit-font-smoothing:antialiased; font-weight:400;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.05; margin:0; font-weight:600; letter-spacing:-0.02em; overflow-wrap:anywhere; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-6); }
.section{ padding-block:var(--space-24); }
.section-sm{ padding-block:var(--space-16); }
.eyebrow{ font-family:var(--font-body); font-weight:700; font-size:var(--text-sm);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--mood); margin-bottom:var(--space-4); }
.lede{ font-size:var(--text-lg); color:var(--ink-2); max-width:60ch; }
.center{ text-align:center; margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-weight:700;
  font-size:var(--text-base); padding:.85rem 1.5rem; border-radius:var(--radius-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out); white-space:nowrap; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 60px rgba(74,54,235,.36); }
.btn-ghost{ background:transparent; color:var(--brand); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brand); transform:translateY(-2px); }
.btn-mood{ background:var(--mood); color:#fff; box-shadow:0 14px 34px color-mix(in srgb, var(--mood) 34%, transparent); }
.btn-mood:hover{ transform:translateY(-2px); }
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand); outline-offset:3px; }
.btn:active{ transform:translateY(0); }

/* ---------- Nav (injected by main.js) ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; background:var(--brand-ink); transition:box-shadow var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out); }
.nav.is-stuck{ background:color-mix(in srgb, var(--brand-ink) 92%, transparent); backdrop-filter:blur(12px); box-shadow:var(--shadow); border-bottom:1px solid rgba(255,255,255,.1); }
/* backdrop-filter above creates a new containing block for the fixed-position mobile menu,
   collapsing it to the nav bar's own height instead of the full screen. Drop the filter while
   the menu is open so .nav-links positions against the viewport as intended. */
body.nav-menu-open .nav.is-stuck{ backdrop-filter:none; background:var(--brand-ink); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav-logo{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#fff; }
.nav-logo .dot{ width:26px; height:26px; border-radius:8px; background:var(--brand); display:grid; place-items:center; color:#fff; font-size:.85rem; }
.nav-logo-mark{ height:32px; width:auto; display:block; flex-shrink:0; }
.nav-logo-img{ flex-shrink:0; }
/* The logo mark is indigo ink on transparent — needs a light backdrop to read on any background. */
.nav-logo-img{ background:rgba(255,255,255,.92); padding:.4rem .75rem; border-radius:999px; }
.nav-links{ display:flex; align-items:center; gap:var(--space-8); list-style:none; margin:0; padding:0; }
.nav-links a{ color:rgba(255,255,255,.82); font-weight:600; font-size:var(--text-sm); position:relative; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--gold); }
.nav-cta{ display:flex; align-items:center; gap:.75rem; }
.nav-burger{ display:none; background:none; border:0; cursor:pointer; width:44px; height:44px; color:#fff; }
.nav-burger span{ display:block; width:24px; height:2px; background:currentColor; margin:5px auto; transition:.3s; }

/* ---------- Hero (home) — stat-led ---------- */
.hero{ position:relative; overflow:hidden; padding-block:calc(74px + var(--space-16)) var(--space-24); background:var(--paper); }
.hero-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 88% -8%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 60%),
    radial-gradient(50% 45% at -5% 100%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
    var(--paper-2); }
.hero-inner{ position:relative; z-index:1; max-width:900px; }
.hero-stat{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--space-4); row-gap:var(--space-2); margin-top:var(--space-2); }
.hero-stat-amt{ font-family:var(--font-display); font-weight:700; color:var(--brand); letter-spacing:-0.02em;
  font-size:clamp(3.2rem, 9vw, 6.4rem); line-height:1; }
.hero-stat-qual{ font-size:clamp(1.05rem, 1.8vw, 1.3rem); color:var(--ink-2); max-width:26ch; }
.hero-stat-qual strong{ color:var(--ink); }
.hero-jline{ display:block; width:min(100%, 380px); height:18px; margin-block:var(--space-4); }
.hero-proofs{ display:flex; flex-wrap:wrap; gap:var(--space-8); padding-block:var(--space-2) var(--space-8);
  border-bottom:1px solid var(--line); margin-bottom:var(--space-8); }
.hero-proof{ display:flex; flex-direction:column; }
.hero-proof .hp-amt{ font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); color:var(--ink); }
.hero-proof .hp-lab{ font-size:var(--text-sm); color:var(--ink-3); }
.hero-head{ font-size:clamp(2rem, 4vw, 3rem); max-width:18ch; letter-spacing:-0.02em; }
.hero .sub{ margin-top:var(--space-6); font-size:clamp(1.1rem, 1.6vw, 1.25rem); max-width:56ch; color:var(--ink-2); line-height:1.6; }
.hero .cta-row{ margin-top:var(--space-10); display:flex; gap:var(--space-6); flex-wrap:wrap; }
.hero .cta-row .btn{ font-size:1.1rem; padding:1.1rem 2rem; }
.hero .trust-line{ margin-top:var(--space-6); font-size:.95rem; color:var(--ink-3); }

/* Journey line motif */
.jline{ stroke:var(--brand); stroke-width:2.5; fill:none; stroke-linecap:round; }
.jline.on-dark{ stroke:rgba(255,255,255,.7); }

/* ---------- Generic cards / grids ---------- */
.grid{ display:grid; gap:var(--space-6); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-8);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card h3{ font-size:var(--text-xl); margin-bottom:var(--space-3); }
.card p{ color:var(--ink-2); }

/* Step (how it works) */
.steps{ counter-reset:step; }
.step{ position:relative; }
.step .num{ width:52px; height:52px; border-radius:var(--radius-pill); background:var(--brand-050); color:var(--brand);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin-bottom:var(--space-4); }

/* Destination cards */
.dest-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px; display:flex; align-items:flex-end;
  color:#fff; isolation:isolate; }
.dest-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform var(--dur-slow) var(--ease-out); }
.dest-card::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, transparent 30%, var(--mood-scrim) 100%); }
.dest-card:hover img{ transform:scale(1.06); }
.dest-card .body{ padding:var(--space-6); }
.dest-card h3{ color:#fff; font-size:var(--text-xl); }
.dest-card .go{ color:#fff; font-weight:700; font-size:var(--text-sm); display:inline-flex; gap:.4rem; margin-top:.4rem; }

/* Bands */
.band{ background:var(--paper-2); }
.band-brand{ background:var(--brand); color:#fff; }
.band-brand h2, .band-brand h3{ color:#fff; }
.band-mood-soft{ background:var(--mood-soft); }

/* Section head */
.shead{ max-width:64ch; margin-bottom:var(--space-12); }
.shead h2{ font-size:clamp(2rem,4.5vw,var(--text-3xl)); }
.shead p{ margin-top:var(--space-4); color:var(--ink-2); font-size:var(--text-lg); }

/* Proof / stat row */
.proofs{ display:flex; flex-wrap:wrap; gap:var(--space-8); }
.proof{ flex:1; min-width:200px; }
.proof .big{ font-family:var(--font-display); font-weight:700; font-size:var(--text-3xl); color:var(--brand); line-height:1; }
.proof .lab{ color:var(--ink-2); margin-top:.4rem; font-size:var(--text-sm); }

/* Founder block */
.founder{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--space-16); align-items:center; }
.founder-photo{ border-radius:var(--radius-lg); background:var(--brand-050); aspect-ratio:4/5; overflow:hidden;
  display:grid; place-items:center; color:var(--brand); }
.founder blockquote{ font-family:var(--font-display); font-size:var(--text-2xl); line-height:1.25; margin:0 0 var(--space-6); }

/* Playbook / offer */
.offer{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-16); align-items:center; }
.book-cover{ aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--brand); }
.chaplist{ list-style:none; margin:var(--space-6) 0; padding:0; }
.chaplist li{ padding:.7rem 0; border-bottom:1px solid var(--line); display:flex; gap:.9rem; align-items:baseline; color:var(--ink-2); }
.chaplist li b{ color:var(--brand); font-family:var(--font-display); }
.price-tag{ display:inline-flex; align-items:baseline; gap:.5rem; margin:var(--space-4) 0; }
.price-tag .amt{ font-family:var(--font-display); font-size:var(--text-3xl); color:var(--ink); font-weight:700; }
.confirm{ background:#FFF6E9; border:1px dashed var(--accent); color:#8a5a1f; border-radius:var(--radius-sm); padding:.2rem .5rem; font-size:var(--text-xs); font-weight:700; }

/* Testimonials */
.tcard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-8); }
.tcard .quote{ font-size:var(--text-lg); color:var(--ink); }
.tcard .who{ margin-top:var(--space-4); display:flex; align-items:center; gap:.75rem; color:var(--ink-2); font-size:var(--text-sm); }
.tcard .who .av{ width:40px; height:40px; border-radius:50%; background:var(--brand-050); }

/* Opt-in form */
.optin{ background:linear-gradient(155deg, var(--brand-700), var(--brand)); color:#fff; border-radius:var(--radius-xl); padding:var(--space-16); }
.optin h2{ color:#fff; font-size:var(--text-3xl); }
.optin form{ margin-top:var(--space-6); display:grid; gap:var(--space-3); max-width:440px; }
.optin input{ padding:.9rem 1.1rem; border-radius:var(--radius-pill); border:0; font-family:var(--font-body); font-size:var(--text-base); }
.optin .fine{ margin-top:var(--space-3); font-size:var(--text-xs); color:rgba(255,255,255,.72); }

/* FAQ accordion */
.faq{ max-width:800px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); padding:var(--space-4) 0; }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ color:var(--brand); font-size:1.6rem; transition:transform var(--dur) var(--ease-out); line-height:1; }
.faq details[open] summary .pm{ transform:rotate(45deg); }
.faq .ans{ color:var(--ink-2); padding-top:var(--space-3); max-width:70ch; }

/* Contact */
.field{ display:grid; gap:.4rem; margin-bottom:var(--space-4); }
.field label{ font-weight:600; font-size:var(--text-sm); color:var(--ink); }
.field input,.field textarea,.field select{ padding:.8rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius); font-family:var(--font-body); font-size:var(--text-base); background:var(--paper); }
.field input:focus,.field textarea:focus{ border-color:var(--brand); outline:none; }

/* Blog */
.post{ display:grid; gap:var(--space-3); }
.post .thumb{ aspect-ratio:16/10; border-radius:var(--radius); background:var(--brand-050); overflow:hidden; }
.post .cat{ font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mood); }
.post h3{ font-size:var(--text-xl); }
.post .meta{ color:var(--ink-3); font-size:var(--text-sm); }

/* Blog post detail page */
.post-body{ max-width:68ch; margin:0 auto; }
.post-body p{ margin-bottom:1.25em; color:var(--ink-2); font-size:var(--text-lg); line-height:1.7; }
.post-body p:first-of-type{ font-size:var(--text-xl); color:var(--ink); }
.post-body b{ color:var(--ink); }
.post-meta-row{ color:var(--ink-3); font-size:var(--text-sm); max-width:68ch; margin:0 auto var(--space-8); }
.post-disclaimer{ max-width:68ch; margin:var(--space-8) auto 0; font-style:italic; color:var(--ink-3); font-size:var(--text-sm); padding-top:var(--space-6); border-top:1px solid var(--line); }

/* Destination hero (themed pages) */
.dhero{ position:relative; min-height:78dvh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.dhero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:brightness(var(--mood-bright)) saturate(var(--mood-sat)); }
.dhero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,8,30,.15) 0%, var(--mood-scrim) 100%); }
.dhero .inner{ padding-block:var(--space-24); }
.dhero h1{ color:#fff; font-size:clamp(2.4rem,6vw,4.4rem); max-width:15ch; }
.dhero .tag{ color:#fff; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:var(--text-sm);
  background:color-mix(in srgb, var(--mood) 85%, black 5%); display:inline-block; padding:.35rem .8rem; border-radius:var(--radius-pill); margin-bottom:var(--space-4); }

/* Footer */
.foot{ background:var(--brand-ink); color:#cfc9ea; padding-block:var(--space-24) var(--space-12); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:var(--space-16); }
.foot h4{ color:#fff; font-size:var(--text-xl); margin-bottom:var(--space-8); }
.foot a{ color:#cfc9ea; display:block; padding:.5rem 0; font-size:var(--text-lg); }
.foot a:hover{ color:#fff; }
.foot .brandbio{ max-width:36ch; color:#a49dce; font-size:var(--text-lg); line-height:1.65; }
.foot .news input{ width:100%; padding:.95rem 1.2rem; border-radius:var(--radius-pill); border:0; margin-top:.75rem; font-size:var(--text-lg); }
.foot-social{ display:flex; align-items:center; gap:.9rem; margin-top:var(--space-8); }
.foot-social a{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0;
  border-radius:999px; background:rgba(255,255,255,.08); color:#cfc9ea; transition:background var(--dur-fast), color var(--dur-fast); }
.foot-social a:hover{ background:var(--brand); color:#fff; }
.foot-social a svg{ width:22px; height:22px; }
.foot-bottom{ margin-top:var(--space-16); padding-top:var(--space-8); border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-base); color:#8f88bd; }

/* Inner-page header (non-hero pages) */
.page-top{ padding-top:calc(74px + var(--space-12)); }
.page-hero{ background:var(--brand-050); padding-top:calc(74px + var(--space-16)); padding-bottom:var(--space-16); }
.page-hero .eyebrow{ color:var(--brand); }
.page-hero h1{ font-size:clamp(2.2rem,5.5vw,var(--text-4xl)); max-width:18ch; }
.page-hero p{ margin-top:var(--space-4); max-width:60ch; color:var(--ink-2); font-size:var(--text-lg); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }

/* ---------- Responsive ---------- */
@media (max-width: 940px){
  .founder,.offer{ grid-template-columns:1fr; gap:var(--space-8); }
  .foot-top{ grid-template-columns:1fr 1fr; gap:var(--space-8); }
}
/* Nav collapses to the hamburger earlier than the general content breakpoint below —
   8 links + logo + CTA button don't fit in one row until well past tablet width. */
@media (max-width: 1040px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-burger{ display:block; }
  .nav-menu-open .nav-links{ display:flex; position:fixed; inset:74px 0 0 0; flex-direction:column; align-items:flex-start;
    gap:var(--space-6); background:var(--brand-ink); padding:var(--space-8); z-index:60; }
  .nav-menu-open .nav-links a{ color:#fff; font-size:var(--text-2xl); font-family:var(--font-display); }
}
@media (max-width: 760px){
  :root{ --text-3xl:2.1rem; }
  .section{ padding-block:var(--space-16); }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .foot-bottom{ flex-direction:column; }
  .optin{ padding:var(--space-8); }
}
@media (max-width: 420px){
  .wrap{ padding-inline:var(--space-4); }
  .hero .cta-row .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
  .dest-card:hover img{ transform:none; }
}

/* ---- Quiz ---- */
.quiz{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-xl); padding:var(--space-8); max-width:640px; margin:0 auto; box-shadow:0 1px 3px rgba(23,18,58,.08), var(--shadow); }
.quiz-progress{ height:6px; background:var(--brand-050); border-radius:var(--radius-pill); overflow:hidden; margin-bottom:var(--space-8); }
.quiz-progress-bar{ height:100%; width:100%; background:var(--brand); border-radius:var(--radius-pill); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.quiz-step{ display:none; }
.quiz-step.active{ display:block; }
.quiz-step h2{ font-size:var(--text-2xl); margin-bottom:var(--space-2); }
.quiz-step .quiz-sub{ color:var(--ink-3); margin-bottom:var(--space-6); font-size:var(--text-sm); }
.quiz-opts{ display:grid; gap:var(--space-3); }
.quiz-opt{ display:block; width:100%; text-align:left; padding:1rem 1.25rem; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--paper); font-family:var(--font-body); font-size:var(--text-base); font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s, transform .15s; }
.quiz-opt:hover{ border-color:var(--brand); background:var(--brand-050); transform:translateY(-2px); }
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-6); }
.quiz-back{ background:none; border:0; color:var(--ink-3); font-weight:600; font-size:var(--text-sm); cursor:pointer; padding:.5rem; }
.quiz-result{ text-align:center; }
.quiz-result .eyebrow{ color:var(--gold); }
.quiz-result h2{ font-size:var(--text-3xl); margin:.5rem 0 1rem; }
.quiz-card-pick{ background:var(--brand-050); border:1.5px dashed var(--brand); border-radius:var(--radius); padding:var(--space-4); margin:var(--space-6) 0; font-weight:700; color:var(--brand); }
.quiz-disclaimer{ font-size:var(--text-xs); color:var(--ink-3); margin-top:var(--space-3); }
@media (max-width: 640px){
  .quiz{ padding:var(--space-6); }
}