@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  --green: #111111;
  --green-2: #111111;
  --cream: #f6f2e7;
  --cream-2: #fffaf0;
  --ink: #111111;
  --muted: #625f58;
  --line: rgba(17,17,17,.17);
  --paper: rgba(255,250,240,.92);
  --shadow: 0 20px 58px rgba(17,17,17,.12);
  --guide-blue: #1d4f8c;
  --guide-clay: #c88b6a;
  --guide-sand: #dcca71;
}

body {
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 7% 4%, rgba(200,139,106,.13), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(29,79,140,.10), transparent 30rem),
    var(--cream) !important;
}

.hn-japan-page,
.hn-vietnam-page,
.hn-france-page,
.hn-guide-page { overflow: clip; position: relative; }

.hn-japan-page h1, .hn-japan-page h2, .hn-japan-page h3,
.hn-vietnam-page h1, .hn-vietnam-page h2, .hn-vietnam-page h3,
.hn-france-page h1, .hn-france-page h2, .hn-france-page h3,
.hn-guide-page h1, .hn-guide-page h2, .hn-guide-page h3 {
  color: var(--ink) !important;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
}

.btn-primary,
.filter-btn.active,
.route-num,
.note-box { background: var(--ink) !important; color: var(--cream-2) !important; }
.btn-primary { border-color: var(--ink) !important; }
.btn-secondary { color: var(--ink) !important; border-color: var(--line) !important; }
.eyebrow { color: var(--ink) !important; }
.eyebrow::before { background: var(--guide-blue) !important; }

.card,
.quick-card,
.route-step,
.activity-region,
.map-shell,
.suggestion-card,
.hero-card { border-color: var(--line) !important; box-shadow: 0 14px 42px rgba(17,17,17,.08) !important; }
.btn:hover { box-shadow: 0 13px 30px rgba(17,17,17,.15) !important; }
.tag { border-color: var(--line) !important; color: var(--ink) !important; }
.snapshot-row div { background: rgba(29,79,140,.07) !important; border-color: rgba(29,79,140,.18) !important; }
.map-box, .map-loading, .map-error, .leaflet-container { background: #e6edf4 !important; }
.map-loading, .map-error { color: var(--ink) !important; }
.stop-card { border-color: var(--line) !important; }
.route-line {
  opacity: .13 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='1200' height='900' viewBox='0 0 1200 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M115 135 C260 90 345 230 505 185S730 210 735 340S660 510 835 610S985 700 1040 810' fill='none' stroke='%23111111' stroke-width='3' stroke-dasharray='9 13' stroke-linecap='round'/%3E%3Ccircle cx='115' cy='135' r='7' fill='%231d4f8c'/%3E%3Ccircle cx='505' cy='185' r='7' fill='%231d4f8c'/%3E%3Ccircle cx='735' cy='340' r='7' fill='%231d4f8c'/%3E%3Ccircle cx='835' cy='610' r='7' fill='%231d4f8c'/%3E%3Ccircle cx='1040' cy='810' r='7' fill='%231d4f8c'/%3E%3C/svg%3E") !important;
}

/* The photograph is shown cleanly: no green/black color wash over it. */
.hero-card-inner { background-blend-mode: normal !important; }
.hn-japan-page .hero-card-inner { background: url('../Image/japan.jpg') center/cover no-repeat !important; }
.hn-vietnam-page .hero-card-inner { background: url('../assets/vietnam-hero.jpg') center/cover no-repeat !important; }
.hn-france-page .hero-card-inner { background: url('https://images.unsplash.com/photo-1502602898657-3e91760cbb34?auto=format&fit=crop&w=1400&q=84') center/cover no-repeat !important; }
.hero-card-inner::before,
.hero-card-inner::after { display: none !important; }
.hero-card-copy {
  max-width: min(390px, 100%) !important;
  padding: 16px 17px;
  border: 1px solid rgba(17,17,17,.18);
  border-radius: 18px;
  background: rgba(255,250,240,.94);
  box-shadow: 0 12px 34px rgba(17,17,17,.15);
}
.hero-card-copy h2 { color: var(--ink) !important; }
.hero-card-copy p { color: var(--muted) !important; }
.route-pill { color: var(--ink) !important; background: rgba(255,250,240,.94) !important; border: 1px solid rgba(17,17,17,.14); }

.footer-card { background: var(--ink) !important; }
.footer-card h2 { color: var(--cream-2) !important; }
.footer-card .btn { background: var(--cream-2) !important; color: var(--ink) !important; }

/* Route cards pair 1–2 and 3–4; an odd final stop closes the route at full width. */
.route-timeline { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
.route-step { min-width: 0; }
.route-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
.route-step summary { min-height: 92px; }
.route-details { padding: 15px 16px 17px !important; }

/* The update/join form owns the viewport, so the footer can never sit above it. */
.lead-modal { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; padding: 0 !important; justify-content: flex-end !important; background: rgba(17,17,17,.52) !important; }
.lead-modal-card {
  width: min(590px, 94vw) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: 26px 0 0 26px !important;
  padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
}
.lead-modal-close { position: sticky !important; top: 0 !important; z-index: 3 !important; float: right; }

/* Standalone guides use the same visual and map language as Japan. */
.hn-guide-page .wrap { width: min(1180px, calc(100% - 36px)); margin: 0 auto; position: relative; z-index: 1; }
.hn-guide-page .hero { min-height: 76vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); gap: 34px; align-items: center; padding: 72px 0 42px; }
.hn-guide-page .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hn-guide-page .eyebrow::before { content: ''; display: inline-block; width: 36px; height: 2px; }
.hn-guide-page h1, .hn-guide-page h2, .hn-guide-page h3 { margin: 0; font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 600; line-height: .98; }
.hn-guide-page h1 { max-width: 930px; font-size: clamp(3.1rem,8.2vw,7.6rem); letter-spacing: -.075em; }
.hn-guide-page .hero-subtitle { max-width: 760px; margin: 24px 0 26px; color: var(--muted); font-size: clamp(1.05rem,2vw,1.32rem); }
.hn-guide-page .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hn-guide-page .btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 13px 19px; border: 1px solid var(--line); border-radius: 999px; font-weight: 800; text-decoration: none; }
.hn-guide-page .hero-card { padding: 20px; border: 1px solid var(--line); border-radius: 34px; background: var(--paper); }
.hn-guide-page .hero-card-inner { min-height: 470px; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; overflow: hidden; border-radius: 26px; background: var(--guide-image) center/cover no-repeat !important; }
.hn-guide-page .route-pill { width: fit-content; padding: 8px 13px; border-radius: 999px; font-size: .82rem; font-weight: 900; }
.hn-guide-page .section { padding: 48px 0; }
.hn-guide-page .section-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.hn-guide-page .section-header h2 { font-size: clamp(2.35rem,5vw,4.8rem); letter-spacing: -.06em; }
.hn-guide-page .section-header p { max-width: 560px; margin: 0; color: var(--muted); }
.hn-guide-page .grid { display: grid; gap: 14px; }
.hn-guide-page .grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.hn-guide-page .grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hn-guide-page .card { padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); }
.hn-guide-page .card h3 { margin-bottom: 9px; font-size: 1.55rem; }
.hn-guide-page .card p { margin: 0; color: var(--muted); }
.hn-guide-page .tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.hn-guide-page .tag { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.62); font-size: .74rem; font-weight: 800; }
.hn-guide-page .quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.hn-guide-page .quick-card { display: block; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); text-decoration: none; }
.hn-guide-page .quick-card strong, .hn-guide-page .quick-card span { display: block; }
.hn-guide-page .quick-card strong { font-size: 1rem; }
.hn-guide-page .quick-card span { margin-top: 3px; color: var(--muted); font-size: .84rem; }
.hn-guide-page .snapshot-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 11px; }
.hn-guide-page .snapshot-row div { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(29,79,140,.07); color: var(--muted); font-size: .9rem; }
.hn-guide-page .map-shell { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr); gap: 16px; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--paper); }
.hn-guide-page .map-box { position: relative; min-height: 610px; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: #e6edf4; }
.hn-guide-page .guide-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hn-guide-page .map-loading, .hn-guide-page .map-error { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink); background: #e6edf4; }
.hn-guide-page .map-error { display: none; z-index: 3; }
.hn-guide-page .map-loading-inner, .hn-guide-page .map-error-inner { max-width: 390px; padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,250,240,.92); }
.hn-guide-page .map-loading-inner strong, .hn-guide-page .map-error-inner strong { display: block; margin-bottom: 5px; font-size: 1.25rem; }
.hn-guide-page .map-panel { max-height: 610px; overflow: auto; padding-right: 3px; }
.hn-guide-page .map-panel h2 { margin: 8px 0 10px; font-size: clamp(2rem,4vw,3.35rem); letter-spacing: -.06em; }
.hn-guide-page .map-panel > p { color: var(--muted); }
.hn-guide-page .map-filters { display: flex; gap: 8px; margin: 17px 0; overflow-x: auto; padding-bottom: 7px; }
.hn-guide-page .filter-btn { flex: 0 0 auto; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.74); color: var(--ink); font-weight: 850; cursor: pointer; }
.hn-guide-page .stop-list { display: grid; gap: 9px; }
.hn-guide-page .stop-card { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); color: var(--ink); text-align: left; cursor: pointer; }
.hn-guide-page .stop-card strong, .hn-guide-page .stop-card span { display: block; }
.hn-guide-page .stop-card span { margin-top: 3px; color: var(--muted); font-size: .86rem; }
.hn-guide-page .stop-card small { display: inline-block; margin-top: 6px; color: var(--guide-blue); font-weight: 850; text-transform: capitalize; }
.hn-guide-page .route-timeline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.hn-guide-page .route-step { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.hn-guide-page .route-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hn-guide-page .route-step summary { min-height: 92px; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 14px; list-style: none; cursor: pointer; }
.hn-guide-page .route-step summary::-webkit-details-marker { display: none; }
.hn-guide-page .route-step summary strong, .hn-guide-page .route-step summary em { display: block; }
.hn-guide-page .route-step summary strong { font-size: 1.05rem; }
.hn-guide-page .route-step summary em { margin-top: 2px; color: var(--muted); font-size: .84rem; font-style: normal; }
.hn-guide-page .route-num { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.hn-guide-page .route-details { padding: 15px 16px 17px; border-top: 1px solid var(--line); }
.hn-guide-page .route-details p, .hn-guide-page .route-details li { color: var(--muted); }
.hn-guide-page .route-details p { margin: 0; }
.hn-guide-page .route-details ul { margin: 10px 0 0; padding-left: 18px; }
.hn-guide-page .note-box { padding: 24px; border-radius: 24px; }
.hn-guide-page .note-box h2 { color: var(--cream-2) !important; font-size: clamp(2rem,4vw,3.7rem); }
.hn-guide-page .note-box li { color: rgba(255,250,240,.88); }
.hn-guide-page .activity-region-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.hn-guide-page .activity-region { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.hn-guide-page .activity-region summary { padding: 15px 16px; font-weight: 900; cursor: pointer; }
.hn-guide-page .activity-region ul { margin: 0; padding: 0 20px 17px 33px; color: var(--muted); }
.hn-guide-page .source-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hn-guide-page .source-row a { padding: 7px 10px; border: 1px solid currentColor; border-radius: 999px; color: inherit; font-size: .74rem; font-weight: 800; text-decoration: none; }
.hn-guide-page .footer-cta { padding: 58px 0 78px; }
.hn-guide-page .footer-card { padding: clamp(28px,6vw,60px); border-radius: 32px; color: var(--cream-2); text-align: center; }
.hn-guide-page .footer-card h2 { font-size: clamp(2.5rem,6vw,5.3rem); letter-spacing: -.07em; }
.hn-guide-page .footer-card p { max-width: 700px; margin: 17px auto 24px; color: rgba(255,250,240,.8); }

@media (max-width: 980px) {
  .hn-japan-page .hero, .hn-vietnam-page .hero, .hn-france-page .hero,
  .hn-guide-page .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 44px; }
  .hero-card { transform: none !important; }
  .quick-grid, .hn-guide-page .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .snapshot-row, .hn-guide-page .snapshot-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .snapshot-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .activity-region-grid, .hn-guide-page .activity-region-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .activity-region:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .map-shell, .hn-guide-page .map-shell { display: flex !important; flex-direction: column; padding: 11px !important; }
  .map-panel, .hn-guide-page .map-panel { max-height: none; overflow: visible; order: 1; }
  .map-box, .hn-guide-page .map-box { min-height: 410px; height: 58vh; max-height: 550px; order: 2; }
  .stop-list, .hn-guide-page .stop-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .wrap, .hn-guide-page .wrap { width: min(100% - 24px,1180px) !important; }
  .section, .hn-guide-page .section { padding: 34px 0 !important; }
  .section-header, .hn-guide-page .section-header { display: block !important; }
  .section-header p, .hn-guide-page .section-header p { margin-top: 11px !important; }
  .hero-actions, .hn-guide-page .hero-actions { display: grid !important; }
  .btn, .hn-guide-page .btn { width: 100%; }
  .hero-card-inner, .hn-guide-page .hero-card-inner { min-height: 350px !important; padding: 17px !important; }
  .hero-card-copy { padding: 13px 14px; }
  .hero-card-copy h2 { font-size: 1.55rem !important; }
  .hero-card-copy p { font-size: .84rem; }
  .route-pill { max-width: 100%; font-size: .68rem !important; }
  .route-timeline, .hn-guide-page .route-timeline { gap: 8px !important; }
  .route-step summary, .hn-guide-page .route-step summary { min-height: 88px; grid-template-columns: 34px 1fr !important; gap: 8px !important; padding: 10px !important; }
  .route-num, .hn-guide-page .route-num { width: 32px !important; height: 32px !important; font-size: .72rem; }
  .route-step summary strong, .hn-guide-page .route-step summary strong { padding-right: 18px !important; font-size: .88rem !important; line-height: 1.15; }
  .route-step summary em, .hn-guide-page .route-step summary em { padding-right: 13px !important; font-size: .7rem !important; line-height: 1.25; }
  .route-step summary::after { right: 8px !important; font-size: 1rem !important; }
  .route-details, .hn-guide-page .route-details { padding: 11px !important; font-size: .76rem; }
  .route-details ul, .hn-guide-page .route-details ul { padding-left: 15px; }
  .activity-region summary, .hn-guide-page .activity-region summary { padding: 12px !important; font-size: .82rem; }
  .activity-region ul, .hn-guide-page .activity-region ul { padding: 0 12px 13px 25px !important; font-size: .76rem; }
  .map-box, .hn-guide-page .map-box { min-height: 370px; }
  .stop-list, .hn-guide-page .stop-list { display: flex !important; overflow-x: auto; gap: 9px; padding-bottom: 11px; scroll-snap-type: x mandatory; }
  .stop-card, .hn-guide-page .stop-card { flex: 0 0 78%; min-height: 120px; scroll-snap-align: start; }
  .lead-modal { align-items: end !important; }
  .lead-modal-card { width: 100% !important; height: min(92dvh, 820px) !important; border-radius: 24px 24px 0 0 !important; }
}

/* Final guide rhythm: keep every guide on the same centered content rail. */
.hn-japan-page .wrap, .hn-vietnam-page .wrap, .hn-france-page .wrap,
.hn-guide-page .wrap {
  width: min(1180px, calc(100% - 36px)) !important;
  margin-inline: auto !important;
}
.hn-japan-page .hero, .hn-vietnam-page .hero, .hn-france-page .hero,
.hn-guide-page .hero {
  min-height: auto !important;
  padding-top: clamp(48px, 5vw, 72px) !important;
  padding-bottom: 42px !important;
}
.hn-japan-page .section, .hn-vietnam-page .section, .hn-france-page .section,
.hn-guide-page .section {
  padding: 40px 0 !important;
  margin-inline: auto !important;
}

.hn-japan-page #jewish-bases .card:nth-child(4n+1),
.hn-vietnam-page #jewish-bases .card:nth-child(4n+1),
.hn-france-page #jewish-bases .card:nth-child(4n+1),
.hn-guide-page #jewish-bases .card:nth-child(4n+1) { background: rgba(226,235,244,.88) !important; border-color: rgba(29,79,140,.25) !important; }
.hn-japan-page #jewish-bases .card:nth-child(4n+2),
.hn-vietnam-page #jewish-bases .card:nth-child(4n+2),
.hn-france-page #jewish-bases .card:nth-child(4n+2),
.hn-guide-page #jewish-bases .card:nth-child(4n+2) { background: rgba(245,229,219,.9) !important; border-color: rgba(200,139,106,.30) !important; }
.hn-japan-page #jewish-bases .card:nth-child(4n+3),
.hn-vietnam-page #jewish-bases .card:nth-child(4n+3),
.hn-france-page #jewish-bases .card:nth-child(4n+3),
.hn-guide-page #jewish-bases .card:nth-child(4n+3) { background: rgba(244,235,205,.92) !important; border-color: rgba(208,154,56,.28) !important; }
.hn-japan-page #jewish-bases .card:nth-child(4n+4),
.hn-vietnam-page #jewish-bases .card:nth-child(4n+4),
.hn-france-page #jewish-bases .card:nth-child(4n+4),
.hn-guide-page #jewish-bases .card:nth-child(4n+4) { background: rgba(255,250,240,.94) !important; border-color: rgba(17,17,17,.15) !important; }

.route-step:nth-child(4n+1) .route-num { background: var(--guide-blue) !important; }
.route-step:nth-child(4n+2) .route-num { background: var(--guide-clay) !important; color: var(--ink) !important; }
.route-step:nth-child(4n+3) .route-num { background: #d09a38 !important; color: var(--ink) !important; }
.route-step:nth-child(4n+4) .route-num { background: #6f7882 !important; }
.filter-btn.active { background: var(--guide-blue) !important; }

/* Replace heavy black blocks with paper, blue, clay, and map imagery. */
.hn-japan-page .note-box, .hn-vietnam-page .note-box, .hn-france-page .note-box,
.hn-guide-page .note-box {
  background: linear-gradient(145deg, rgba(226,235,244,.96), rgba(255,250,240,.96)) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(29,79,140,.2) !important;
  box-shadow: 0 16px 42px rgba(17,17,17,.08) !important;
}
.hn-japan-page .note-box h2, .hn-vietnam-page .note-box h2, .hn-france-page .note-box h2,
.hn-guide-page .note-box h2 { color: var(--ink) !important; }
.hn-japan-page .note-box li, .hn-vietnam-page .note-box li, .hn-france-page .note-box li,
.hn-guide-page .note-box li { color: var(--muted) !important; }

.hn-japan-page .footer-card, .hn-vietnam-page .footer-card, .hn-france-page .footer-card,
.hn-guide-page .footer-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url('../Image/map-tool.png') center/cover no-repeat !important;
  color: var(--ink) !important;
  border: 1px solid rgba(29,79,140,.16);
  box-shadow: 0 22px 58px rgba(17,17,17,.12);
}
.hn-japan-page .footer-card h2, .hn-vietnam-page .footer-card h2, .hn-france-page .footer-card h2,
.hn-guide-page .footer-card h2,
.hn-japan-page .footer-card p, .hn-vietnam-page .footer-card p, .hn-france-page .footer-card p,
.hn-guide-page .footer-card p {
  width: fit-content;
  max-width: min(720px, 94%);
  padding: 10px 14px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 15px;
  background: rgba(246,242,231,.92);
  color: var(--ink) !important;
  text-shadow: none !important;
}
.hn-japan-page .footer-card .btn, .hn-vietnam-page .footer-card .btn, .hn-france-page .footer-card .btn,
.hn-guide-page .footer-card .btn { background: var(--guide-blue) !important; color: #fffaf0 !important; }

.hn-guide-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hn-guide-footer-actions .btn { width: auto; cursor: pointer; }
.hn-guide-footer-actions .hn-travel-circle-cta { background: var(--ink) !important; }
.hn-guide-footer-actions .hn-whatsapp-group-cta { background: var(--guide-blue) !important; }

/* Guide CTAs reuse the shared form, presented as the same focused drawer flow. */
body.hn-guide-document .hn-footer-popup-overlay {
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  z-index: 2147483000 !important;
}
body.hn-guide-document .hn-footer-popup-card {
  width: min(590px, 94vw) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: 26px 0 0 26px !important;
  padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
}

/* Browse-other-guides carousel shared by every destination page. */
.hn-other-guides { overflow: hidden; }
.hn-other-guides-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(17,17,17,.25) transparent;
}
.hn-other-guide-card {
  position: relative;
  flex: 0 0 calc((100% - 24px) / 3);
  min-height: 230px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #e8e4da;
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow: 0 14px 34px rgba(17,17,17,.09);
}
.hn-other-guide-card img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; transition: transform 240ms ease; }
.hn-other-guide-card:hover img { transform: scale(1.025); }
.hn-other-guide-card > span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: block;
  padding: 10px 11px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 13px;
  background: rgba(246,242,231,.94);
}
.hn-other-guide-card strong, .hn-other-guide-card small { display: block; }
.hn-other-guide-card strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; }
.hn-other-guide-card small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.hn-other-guide-card.is-image-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, #e9e5dc 18%, #f8f4eb 38%, #e9e5dc 58%);
  background-size: 220% 100%;
  animation: hnGuideCardSkeleton 1.15s linear infinite;
}
@keyframes hnGuideCardSkeleton { to { background-position-x: -220%; } }

@media (max-width: 640px) {
  .hn-japan-page .wrap, .hn-vietnam-page .wrap, .hn-france-page .wrap,
  .hn-guide-page .wrap {
    width: min(100% - 24px, 1180px) !important;
    margin-inline: auto !important;
  }
  .hn-japan-page .hero, .hn-vietnam-page .hero, .hn-france-page .hero,
  .hn-guide-page .hero {
    padding-top: 34px !important;
    padding-bottom: 30px !important;
  }
  .hn-japan-page .section, .hn-vietnam-page .section, .hn-france-page .section,
  .hn-guide-page .section { padding: 30px 0 !important; }
  .hn-other-guide-card { flex-basis: 78%; min-height: 205px; }
  .hn-other-guide-card img { min-height: 205px; }
  .hn-guide-footer-actions { display: grid; width: min(100%, 420px); }
  .hn-guide-footer-actions .btn { width: 100%; }
  body.hn-guide-document .hn-footer-popup-card {
    width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .hn-japan-page .footer-card, .hn-vietnam-page .footer-card, .hn-france-page .footer-card,
  .hn-guide-page .footer-card { min-height: 320px; padding: 24px 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Shared country-guide mobile layout — final compact override */
@media (max-width: 640px) {
  .hn-guide-page,
  .hn-japan-page,
  .hn-vietnam-page,
  .hn-france-page {
    --section-pad: 28px;
  }

  .hn-guide-page .hero,
  .hn-japan-page .hero,
  .hn-vietnam-page .hero,
  .hn-france-page .hero {
    padding: 24px 0 20px !important;
    gap: 16px !important;
  }

  .hn-guide-page .hero-card,
  .hn-japan-page .hero-card,
  .hn-vietnam-page .hero-card,
  .hn-france-page .hero-card {
    padding: 10px !important;
    border-radius: 20px !important;
  }

  .hn-guide-page .hero-card-inner,
  .hn-japan-page .hero-card-inner,
  .hn-vietnam-page .hero-card-inner,
  .hn-france-page .hero-card-inner {
    min-height: 260px !important;
    padding: 15px !important;
  }

  .hn-guide-page .hero h1,
  .hn-japan-page .hero h1,
  .hn-vietnam-page .hero h1,
  .hn-france-page .hero h1 {
    font-size: clamp(2.6rem, 13vw, 4rem) !important;
    line-height: .93 !important;
    margin: 0 !important;
  }

  .hn-guide-page .hero-subtitle,
  .hn-japan-page .hero-subtitle,
  .hn-vietnam-page .hero-subtitle,
  .hn-france-page .hero-subtitle {
    margin: 12px 0 16px !important;
    font-size: .94rem !important;
    line-height: 1.42 !important;
  }

  .hn-guide-page .hero-actions,
  .hn-japan-page .hero-actions,
  .hn-vietnam-page .hero-actions,
  .hn-france-page .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .hn-guide-page .hero-actions .btn,
  .hn-japan-page .hero-actions .btn,
  .hn-vietnam-page .hero-actions .btn,
  .hn-france-page .hero-actions .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 7px 4px !important;
    border-radius: 999px !important;
    font-size: .66rem !important;
    line-height: 1.08 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .hn-guide-page section,
  .hn-japan-page section,
  .hn-vietnam-page section,
  .hn-france-page section {
    padding-top: var(--section-pad) !important;
    padding-bottom: var(--section-pad) !important;
  }

  .hn-guide-page .section-head,
  .hn-japan-page .section-head,
  .hn-vietnam-page .section-head,
  .hn-france-page .section-head {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .hn-guide-page .section-head h2,
  .hn-japan-page .section-head h2,
  .hn-vietnam-page .section-head h2,
  .hn-france-page .section-head h2 {
    font-size: clamp(1.8rem, 9vw, 2.5rem) !important;
    line-height: .98 !important;
  }
}

/* Mobile readability and overflow safety shared by every destination guide. */
.hn-guide-page .hero-card-copy,
.hn-japan-page .hero-card-copy,
.hn-vietnam-page .hero-card-copy,
.hn-france-page .hero-card-copy,
.hn-guide-page .footer-card,
.hn-japan-page .footer-card,
.hn-vietnam-page .footer-card,
.hn-france-page .footer-card,
.hn-guide-page .quick-card,
.hn-japan-page .quick-card,
.hn-vietnam-page .quick-card,
.hn-france-page .quick-card,
.hn-guide-page .card,
.hn-japan-page .card,
.hn-vietnam-page .card,
.hn-france-page .card,
.hn-guide-page .note-box,
.hn-japan-page .note-box,
.hn-vietnam-page .note-box,
.hn-france-page .note-box,
.hn-guide-page .route-step summary > span,
.hn-japan-page .route-step summary > span,
.hn-vietnam-page .route-step summary > span,
.hn-france-page .route-step summary > span {
  min-width: 0;
  max-width: 100%;
}

.hn-guide-page h1, .hn-guide-page h2, .hn-guide-page h3,
.hn-japan-page h1, .hn-japan-page h2, .hn-japan-page h3,
.hn-vietnam-page h1, .hn-vietnam-page h2, .hn-vietnam-page h3,
.hn-france-page h1, .hn-france-page h2, .hn-france-page h3,
.hn-guide-page p, .hn-japan-page p, .hn-vietnam-page p, .hn-france-page p,
.hn-guide-page .btn, .hn-japan-page .btn, .hn-vietnam-page .btn, .hn-france-page .btn,
.hn-guide-page .tag, .hn-japan-page .tag, .hn-vietnam-page .tag, .hn-france-page .tag,
.hn-guide-page .source-row a, .hn-japan-page .source-row a, .hn-vietnam-page .source-row a, .hn-france-page .source-row a {
  overflow-wrap: break-word;
  word-break: normal;
}

.hn-guide-page .route-pill,
.hn-japan-page .route-pill,
.hn-vietnam-page .route-pill,
.hn-france-page .route-pill {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.25 !important;
}

@media (max-width: 640px) {
  .hn-guide-page .hero-actions,
  .hn-japan-page .hero-actions,
  .hn-vietnam-page .hero-actions,
  .hn-france-page .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .hn-guide-page .hero-actions .btn:first-child,
  .hn-japan-page .hero-actions .btn:first-child,
  .hn-vietnam-page .hero-actions .btn:first-child,
  .hn-france-page .hero-actions .btn:first-child {
    grid-column: 1 / -1;
  }

  .hn-guide-page .hero-actions .btn,
  .hn-japan-page .hero-actions .btn,
  .hn-vietnam-page .hero-actions .btn,
  .hn-france-page .hero-actions .btn {
    min-height: 46px !important;
    padding: 10px 12px !important;
    font-size: .78rem !important;
    line-height: 1.18 !important;
  }

  .hn-guide-page .route-pill,
  .hn-japan-page .route-pill,
  .hn-vietnam-page .route-pill,
  .hn-france-page .route-pill {
    width: auto !important;
    padding: 8px 11px !important;
    border-radius: 14px !important;
    font-size: .72rem !important;
  }

  .hn-guide-page .hero-card-copy,
  .hn-japan-page .hero-card-copy,
  .hn-vietnam-page .hero-card-copy,
  .hn-france-page .hero-card-copy {
    width: 100% !important;
    padding: 13px 14px !important;
  }

  .hn-guide-page .hero-card-copy h2,
  .hn-japan-page .hero-card-copy h2,
  .hn-vietnam-page .hero-card-copy h2,
  .hn-france-page .hero-card-copy h2 {
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
    line-height: 1.02 !important;
  }

  .hn-guide-page .hero-card-copy p,
  .hn-japan-page .hero-card-copy p,
  .hn-vietnam-page .hero-card-copy p,
  .hn-france-page .hero-card-copy p {
    margin: 7px 0 0 !important;
    font-size: .82rem !important;
    line-height: 1.38 !important;
  }

  .hn-guide-page .footer-cta,
  .hn-japan-page .footer-cta,
  .hn-vietnam-page .footer-cta,
  .hn-france-page .footer-cta {
    padding: 34px 0 46px !important;
  }

  .hn-guide-page .footer-card,
  .hn-japan-page .footer-card,
  .hn-vietnam-page .footer-card,
  .hn-france-page .footer-card {
    min-height: 0 !important;
    padding: 22px 14px !important;
    border-radius: 24px !important;
  }

  .hn-guide-page .footer-card h2,
  .hn-japan-page .footer-card h2,
  .hn-vietnam-page .footer-card h2,
  .hn-france-page .footer-card h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    font-size: clamp(2rem, 9.5vw, 2.75rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .hn-guide-page .footer-card > p,
  .hn-japan-page .footer-card > p,
  .hn-vietnam-page .footer-card > p,
  .hn-france-page .footer-card > p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 16px !important;
    padding: 11px 12px !important;
    font-size: .88rem !important;
    line-height: 1.38 !important;
  }

  .hn-guide-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%, 360px) !important;
    gap: 8px !important;
    margin-inline: auto !important;
  }

  .hn-guide-footer-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .hn-guide-page .quick-card,
  .hn-japan-page .quick-card,
  .hn-vietnam-page .quick-card,
  .hn-france-page .quick-card,
  .hn-guide-page .snapshot-row > div,
  .hn-japan-page .snapshot-row > div,
  .hn-vietnam-page .snapshot-row > div,
  .hn-france-page .snapshot-row > div {
    overflow: hidden;
  }

  .hn-guide-page .source-row a,
  .hn-japan-page .source-row a,
  .hn-vietnam-page .source-row a,
  .hn-france-page .source-row a,
  .hn-guide-page .tag,
  .hn-japan-page .tag,
  .hn-vietnam-page .tag,
  .hn-france-page .tag {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .hn-guide-page .hero-actions,
  .hn-japan-page .hero-actions,
  .hn-vietnam-page .hero-actions,
  .hn-france-page .hero-actions {
    grid-template-columns: 1fr !important;
  }

  .hn-guide-page .hero-actions .btn:first-child,
  .hn-japan-page .hero-actions .btn:first-child,
  .hn-vietnam-page .hero-actions .btn:first-child,
  .hn-france-page .hero-actions .btn:first-child {
    grid-column: auto;
  }
}