/* ===== Responsive layer: 300px → 1440px, loaded last on every page ===== */

/* never allow sideways page scroll */
html, body { max-width: 100%; overflow-x: clip }
img, svg, video { max-width: 100% }

/* ---- footer (inline grid-column styles need !important to be overridden) ---- */
.f-top .f-col { min-width: 0 }
.f-bot nav { flex-wrap: wrap; row-gap: 6px }
@media (max-width: 1000px) {
  .f-top .f-col { grid-column: span 4 !important }
  .f-top { min-height: 0 }
}
@media (max-width: 700px) {
  .f-top .f-col { grid-column: span 6 !important }
}
@media (max-width: 460px) {
  .f-top .f-col { grid-column: 1 / -1 !important }
  .f-bot { flex-direction: column; align-items: flex-start }
  .logo { width: 128px; height: 84px }
}

/* ---- header / mobile menu on very small phones ---- */
@media (max-width: 360px) {
  .hd-in { padding-left: 14px; padding-right: 14px }
  .brand img { max-width: 104px }
  .menu nav a span { font-size: clamp(28px, 11vw, 40px) }
  .m-meta { line-height: 2 }
}

/* ---- home ---- */
@media (max-width: 420px) {
  .hero .hs-h { font-size: clamp(34px, 11.5vw, 44px) }
  .hero .eyebrow { letter-spacing: 1.4px }
  .hero .btn, .btn.big { padding-left: 18px; padding-right: 18px }
  .hs-thumb { width: 44px; height: 64px }
  .hs-thumb.is-active { width: 88px }
  .hs-rail { gap: 6px }
  .loader .l1 { font-size: clamp(26px, 9.5vw, 40px) }
}
@media (max-width: 380px) {
  h2 { font-size: 30px; line-height: 38px }
  .approach .l h2, .pano-copy h2 { font-size: 30px; line-height: 38px }
  .cta .btns { flex-direction: column; align-items: stretch }
  .cta .btns .btn { justify-content: center }
}

/* ---- journal masthead ---- */
.jn-by { flex-wrap: wrap; gap: 8px 22px }
@media (max-width: 700px) {
  .jn-title { font-size: clamp(46px, 16vw, 96px) }
  .jn-hd { gap: 18px }
}
@media (max-width: 480px) {
  .jn-hd { grid-template-columns: 1fr }
  .jn-aside { width: 92px; margin: 0 0 0 auto }
  .jn-title .jn-l2 { padding-left: 8vw }
  .jn-ftx h2 { font-size: clamp(30px, 9vw, 40px) }
  .jn-fimg .ph { height: 46vh; min-height: 280px }
  .jn-in { padding: 24px 0 }
  .jn-in h3 { font-size: 22px }
  .jn-form { flex-direction: column; align-items: stretch; gap: 10px }
  .jn-form button { align-self: flex-start }
}

/* ---- destinations ---- */
@media (max-width: 480px) {
  .at-track { padding: 56px 20px 64px }
  .at-img { height: 340px }
  .at-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px }
  .at-meta div:first-child { grid-column: 1 / -1 }
  .at-vt small { display: none }
  .at-it.on { height: 380px }
  .at-ring { display: none }
}
@media (max-width: 340px) {
  .at-meta b { font-size: 16px }
}

/* ---- about ---- */
.ab-hr { width: 100% }
@media (max-width: 1000px) {
  .ab-sticky { display: block; position: static; height: auto; padding: 0; margin-bottom: 36px }
  .ab-sticky .box { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible }
  .ab-sticky .ph { position: relative; inset: auto; opacity: 1 !important; transform: none !important; aspect-ratio: 1; border-radius: 10px }
  .ab-step { padding: 36px 0 }
  .ab-step p { opacity: 1 }
}
@media (max-width: 560px) {
  .ab-badge { left: 4%; width: 96px }
  .ab-end .box { padding: 28px 18px }
  .ab-end .av { width: 96px; height: 96px }
}

/* ---- stories ---- */
@media (max-width: 480px) {
  .st-card { padding: 22px 18px }
  .st-r { min-height: 220px }
  .st-cta h2 { font-size: clamp(34px, 11vw, 48px) }
}

/* ---- plan ---- */
@media (max-width: 480px) {
  .pl-main { padding: 110px 0 70px }
  .pl-prog { gap: 16px }
  .pl-ring { width: 68px; height: 68px }
  .pl-card { padding: 22px 16px; min-height: 0; border-radius: 20px }
  .pl-form { min-height: 0 }
  .pl-step legend { font-size: 26px }
  .pl-chip span { padding: 10px 14px }
  .pl-act .pl-next { width: 100%; justify-content: center }
  .pl-q summary { font-size: 17px }
}

/* ---- contact ---- */
@media (max-width: 480px) {
  .ct-main { padding: 110px 0 70px }
  .ct-ch li { flex-wrap: wrap; gap: 6px }
  .ct-card { padding: 22px 16px; border-radius: 20px }
  .ct-form .pl-act .pl-next { width: 100%; justify-content: center }
}

/* ---- legal + article ---- */
@media (max-width: 700px) {
  .lg-hero { padding: 120px 0 30px }
  .lg-txt article { padding-bottom: 44px }
  .lg-txt p { font-size: 15px; line-height: 26px }
  .ar-hero { padding: 120px 0 30px }
  .ar-img .ph { height: 48vh; min-height: 260px; border-radius: 12px }
  .ar-col p { font-size: 16px; line-height: 28px }
  .ar-more { padding: 56px 0 90px }
  .ar-card { padding: 22px }
  .ar-cta .btn { width: 100%; justify-content: center }
}