/* Home: "Plan Your Jungle Trip in 3 Steps" — timeline steps beside an arched photo */
.hw-sec { position: relative; overflow: hidden; padding: 30px 0; background: radial-gradient(760px 420px at 92% 8%, rgba(232,189,85,.17), transparent 70%), linear-gradient(180deg, #fffdf8 0, #faf6ea 100%); }
@media (min-width: 768px) { .hw-sec { padding: 40px 0; } }
.hw-wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .hw-wrap { padding: 0 48px; } }
.hw-grid { display: grid; gap: 44px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .hw-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 72px; } }

.hw-copy .section-label { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem; color: #bc8c3f; }
.hw-lead { margin: 14px 0 0; max-width: 34rem; color: #5a4d43; }

/* steps */
.hw-steps { position: relative; list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.hw-steps::before { content: ''; position: absolute; left: 41px; top: 46px; bottom: 46px; width: 1px; background: linear-gradient(180deg, rgba(188,140,63,.15), rgba(188,140,63,.7) 18%, rgba(188,140,63,.7) 82%, rgba(188,140,63,.15)); }
.hw-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px 22px 18px 18px; border-radius: 20px; background: rgba(255,255,255,.72); border: 1px solid rgba(188,140,63,.28); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease; }
.hw-step:hover { transform: translateX(6px); background: #fff; border-color: rgba(188,140,63,.6); box-shadow: 0 20px 36px -28px rgba(49,39,33,.55); }
.hw-step .hw-num { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(145deg, #3b2a1f, #241813); color: #e8bd55; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; box-shadow: 0 0 0 4px #fbf7ec, 0 0 0 5px rgba(188,140,63,.55); }
html body .hw-step .hw-num:not(#_):not(#_) { font-size: 17px !important; line-height: 1 !important; color: #e8bd55; }
.hw-body h3 { margin: 2px 0 6px; color: #2a1c13; }
.hw-body p { margin: 0; color: #5a4d43; }
html body .hw-body p:not(#_):not(#_) { font-size: 15px !important; line-height: 1.7 !important; text-align: left; }
.hw-ic { align-self: center; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(188,140,63,.13); color: #8a5a22; font-size: 16px; transition: background .35s, color .35s; }
.hw-step:hover .hw-ic { background: #bc8c3f; color: #fff; }
@media (max-width: 520px) {
  .hw-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 16px 16px 14px; }
  .hw-step .hw-num { width: 44px; height: 44px; }
  .hw-steps::before { left: 36px; }
  .hw-ic { display: none; }
}

/* call to action */
.hw-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.hw-btn { display: inline-flex; align-items: center; gap: 16px; padding: 8px 8px 8px 28px; border-radius: 999px; background: linear-gradient(180deg, #4a3a2f, #2c1f17); color: #f6ead0; font-weight: 600; box-shadow: 0 18px 30px -18px rgba(44,31,23,.75); transition: transform .3s ease, box-shadow .3s ease; }
.hw-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 34px -18px rgba(44,31,23,.8); }
.hw-btn > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e8bd55; color: #2a1c13; transition: transform .3s ease; }
.hw-btn:hover > span { transform: translateX(3px); }
.hw-call { display: inline-flex; align-items: center; gap: .55rem; color: #8a5a22; font-weight: 600; }
.hw-call i { color: #bc8c3f; }

/* square photo with soft rounded corners, an offset outline and a floating caption */
.hw-photo { position: relative; margin: 0; padding: 0 14px 14px 0; }
.hw-photo::before { content: ''; position: absolute; top: 14px; left: 14px; right: 0; bottom: 0; border: 1px solid rgba(188,140,63,.55); border-radius: 30px; }
.hw-arch { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 24px; box-shadow: 0 40px 70px -46px rgba(49,39,33,.7); }
.hw-arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.hw-photo:hover .hw-arch img { transform: scale(1.05); }
.hw-badge { position: absolute; z-index: 2; left: 16px; bottom: 30px; display: flex; align-items: center; gap: 10px; max-width: 300px; padding: 9px 14px 9px 9px; border-radius: 14px; background: rgba(36,24,19,.9); color: #f1e6cc; box-shadow: 0 16px 28px -16px rgba(0,0,0,.6); }
.hw-badge i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8bd55; color: #2a1c13; font-size: 13px; }
.hw-badge b { display: block; white-space: nowrap; color: #e8bd55; font-family: 'Playfair Display', Georgia, serif; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.hw-badge span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: rgba(241,230,204,.85); }
@media (max-width: 1023px) { .hw-photo { max-width: 520px; margin: 0 auto; width: 100%; } }
@media (max-width: 520px) { .hw-badge b { white-space: normal; } .hw-badge { left: 12px; bottom: 26px; max-width: calc(100% - 52px); } .hw-arch { border-radius: 20px; } .hw-photo::before { border-radius: 26px; } }