/* ==========================================================
   RELIABLE TRAVELS — site-wide vertical rhythm (loaded last)
   One spacing scale for every section: change --sec to make the whole page tighter or roomier.
   ========================================================== */
:root { --sec: clamp(48px, 5vw, 80px); --sec-head: clamp(22px, 2.6vw, 36px); }

.intro { padding-block: var(--sec) calc(var(--sec) * .8); }
.offers, .intl { padding-block: var(--sec); }
.xp { padding-top: var(--sec); }
.steps { padding-block: var(--sec); }
.experience { min-height: 0; padding-block: var(--sec); }
.planner { min-height: 0; padding-block: var(--sec); }
footer { padding-top: calc(var(--sec) * .8); }

/* Gap between a section heading and its content */
.section-head { margin-bottom: var(--sec-head); }
.offers-head, .intl-head { margin-bottom: var(--sec-head); }
.planner p:not(.section-kicker) { margin: 18px 0; }

/* How it works: shorter step cards */
.step { min-height: 230px; }
.step h3 { margin-top: 56px; }

/* Phones/tablets: headings stack above their text, so close that gap */
@media (max-width: 1000px) {
  .offers-head, .intl-head, .xp-head { gap: 16px; }
  .xp-side { margin-top: 0; }
}