.season-page {
  background: #fff;
}
.season-title {
  padding: 165px 7vw 65px;
  background: #07529a;
  color: #fff;
}
.season-title p,
.climate-intro > p {
  margin: 0;
  color: #ff9a69;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.season-title h1 {
  font: 600 clamp(3.2rem, 6vw, 6.4rem) / 1 "Playfair Display", serif;
  margin: 10px 0;
}
.season-title h1 em {
  color: #ff7a3d;
  font-weight: 500;
}
.climate-guide {
  padding: 95px 7vw 105px;
  background: #fff;
}
.climate-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  column-gap: 8vw;
  align-items: end;
  max-width: 1380px;
  margin: auto;
}
.climate-intro > p {
  grid-column: 1/-1;
}
.climate-intro h2 {
  font: 600 clamp(2.5rem, 4.2vw, 4.6rem) / 1.06 "Playfair Display", serif;
  color: #12365b;
  margin: 12px 0 0;
}
.climate-intro > span {
  color: #587087;
  font-size: 1.05rem;
  line-height: 1.8;
}
.climate-regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1380px;
  margin: 60px auto 0;
}
.climate-regions article {
  position: relative;
  padding: 38px 32px 32px;
  background: #f3f8fc;
  border-top: 4px solid #ff641e;
}
.climate-regions strong {
  position: absolute;
  right: 24px;
  top: 22px;
  color: rgba(7, 82, 154, 0.09);
  font: 500 3.5rem/1 "Playfair Display", serif;
}
.climate-regions p {
  margin: 0;
  color: #ff641e;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.climate-regions h3 {
  color: #12365b;
  font: 600 1.65rem "Playfair Display", serif;
  margin: 9px 0 16px;
}
.climate-regions span {
  display: block;
  color: #587087;
  line-height: 1.75;
}
.climate-regions small {
  display: block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(7, 82, 154, 0.13);
  color: #07529a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.climate-note {
  max-width: 1380px;
  margin: 26px auto 0;
  padding: 18px 22px;
  background: #fff3ec;
  color: #5e6770;
}
.climate-note b {
  color: #ff641e;
}
.season-hero {
  min-height: 600px;
  display: flex;
  align-items: end;
  padding: 155px 8vw 85px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(4, 42, 70, 0.72), rgba(4, 42, 70, 0.08)),
    url("/assets/tours/sapa-hero-golden.jpg") center/cover;
}
.season-hero > div {
  max-width: 900px;
}
.season-hero p,
.month-heading p,
.month-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  font-weight: 700;
  color: #ff8b54;
}
.season-hero h1 {
  font:
    600 clamp(3.5rem, 7vw, 7.2rem) / 0.98 "Playfair Display",
    serif;
  margin: 12px 0 24px;
}
.season-hero h1 em {
  color: #ff7a3d;
  font-weight: 500;
}
.season-hero span {
  display: block;
  max-width: 730px;
  font-size: 1.12rem;
  line-height: 1.7;
}
.month-guide {
  padding: 105px 7vw 120px;
  background: #f5f9fd;
}
.month-heading {
  text-align: center;
}
.month-heading h2 {
  font:
    600 clamp(2.4rem, 4.2vw, 4.3rem) / 1.08 "Playfair Display",
    serif;
  margin: 10px 0 42px;
  color: #12365b;
}
.month-tabs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 9px;
  max-width: 1380px;
  margin: 0 auto 42px;
}
.month-tabs button {
  min-height: 64px;
  border: 1px solid rgba(7, 82, 154, 0.1);
  border-radius: 12px 12px 0 0;
  background: #dfe9f2;
  color: #12365b;
  font:
    700 0.82rem "DM Sans",
    sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.25s;
}
.month-tabs button:hover {
  background: #ceddea;
}
.month-tabs button.active {
  background: #ff641e;
  color: #fff;
  border-color: #ff641e;
  box-shadow: 0 12px 28px rgba(255, 100, 30, 0.2);
}
.month-panels {
  max-width: 1380px;
  margin: auto;
}
.month-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  background: #fff;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  box-shadow: 0 24px 65px rgba(18, 54, 91, 0.1);
}
.month-panel[hidden] {
  display: none;
}
.month-copy {
  padding: 65px 65px 55px;
}
.month-number {
  position: absolute;
  right: calc(44% + 24px);
  top: 22px;
  font:
    500 5rem/1 "Playfair Display",
    serif;
  color: rgba(7, 82, 154, 0.08);
}
.month-panel h2 {
  font:
    600 clamp(2rem, 3.2vw, 3.45rem) / 1.08 "Playfair Display",
    serif;
  color: #12365b;
  margin: 10px 0 24px;
}
.month-panel h3 {
  font:
    700 1rem "DM Sans",
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #07529a;
  margin: 27px 0 8px;
}
.month-panel p {
  color: #526c82;
  line-height: 1.8;
}
.month-panel img {
  width: 100%;
  height: 100%;
  min-height: 610px;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
}
.weather-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 23px;
}
.weather-tags span {
  padding: 8px 12px;
  border-radius: 20px;
  background: #e9f2fa;
  color: #07529a;
  font-size: 0.75rem;
  font-weight: 700;
}
.month-panel aside {
  margin-top: 26px;
  padding: 18px 20px;
  background: #fff3ec;
  border-left: 4px solid #ff641e;
  color: #5d5f62;
  line-height: 1.65;
}
.month-panel aside strong {
  display: block;
  color: #ff641e;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.season-cta {
  text-align: center;
  padding: 95px 20px;
  background: #07529a;
  color: #fff;
}
.season-cta p {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.74rem;
}
.season-cta h2 {
  font:
    500 clamp(2.5rem, 5vw, 5rem) "Playfair Display",
    serif;
  margin: 10px 0 27px;
}
.season-cta a {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 30px;
  background: #ff641e;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
@media (max-width: 1000px) {
  .climate-intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .climate-regions {
    grid-template-columns: 1fr;
  }
  .month-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  .month-tabs button {
    min-width: 76px;
  }
  .month-panel {
    grid-template-columns: 1fr;
  }
  .month-panel img {
    min-height: 400px;
    order: -1;
  }
  .month-number {
    right: 25px;
    top: 425px;
  }
  .month-copy {
    padding: 48px;
  }
  .season-hero {
    min-height: 520px;
  }
}
@media (max-width: 600px) {
  .season-title {
    padding: 125px 24px 48px;
  }
  .climate-guide {
    padding: 70px 24px;
  }
  .season-hero {
    min-height: 480px;
    padding: 125px 24px 55px;
  }
  .month-guide {
    padding: 75px 20px 85px;
  }
  .month-heading {
    text-align: left;
  }
  .month-heading h2 {
    font-size: 2.55rem;
  }
  .month-tabs {
    margin-bottom: 28px;
  }
  .month-tabs button {
    min-width: 68px;
    min-height: 56px;
  }
  .month-panel img {
    min-height: 260px;
  }
  .month-copy {
    padding: 35px 24px;
  }
  .month-number {
    top: 280px;
    font-size: 3.8rem;
  }
  .weather-tags span {
    font-size: 0.69rem;
  }
}

/* A lighter, balanced title banner for the climate guide. */
.season-title{background:linear-gradient(120deg,#edf6fc 0%,#f8fbfe 65%,#fff6ed 100%);color:#12365b;padding:64px 7vw 68px;text-align:center;border-bottom:1px solid rgba(7,82,154,.1)}
.season-title p{color:#a84013;max-width:1100px;margin:0 auto 18px}
.season-title h1{font-family:'DM Sans',sans-serif;font-size:clamp(2.4rem,4.8vw,5rem);font-weight:700;line-height:1.12;letter-spacing:-.035em;max-width:1100px;margin:0 auto;color:#12365b;text-wrap:balance}
.season-title h1 em{font-style:normal;color:#d64d12}
@media(max-width:650px){.season-title{padding:42px 24px 46px}.season-title p{font-size:.72rem;letter-spacing:.13em;margin-bottom:14px}.season-title h1{font-size:clamp(2.1rem,8vw,3rem)}}
.season-title{padding-top:160px;padding-bottom:60px}
@media(max-width:650px){.season-title{padding-top:125px;padding-bottom:44px}}