/* ── Colour tokens ── */
    :root {
      --green-dark:   #1a3a2a;
      --green-mid:    #2a5c40;
      --green-light:  #e8f0eb;
      --gold:         #c9a84c;
      --gold-light:   #f5edd8;
      --gold-dark:    #9a7830;
      --text-dark:    #1a3a2a;
      --text-mid:     #4a7060;
      --text-muted:   #7a9e8c;
      --border:       #d4e2da;
      --bg-page:      #f0f5f1;
      --bg-card:      #ffffff;
      --bg-subtle:    #f6faf7;
    }

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

    /* ── Section wrapper ── */
    .dp-section {
      width: 100%;
      /* max-width: 820px; */
    }

    .dp-section .dp-eyebrow {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 8px;
    }

    .dp-section .dp-heading {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 30px;
      font-weight: 600;
      color: var(--green-dark);
      margin-bottom: 24px;
      line-height: 1.2;
    }

    /* ── Main card ── */
    .dp-section .dp-card {
      background: var(--bg-card);
      border-radius: 16px;
      border: 1px solid var(--border);
      padding: 24px 28px;
      box-shadow: 0 4px 28px rgba(26,58,42,.08);
    }

    .dp-section .dp-card {
    background: #fffbf2;
    border-radius: 16px;
    border: 2px solid var(--border);
    padding: 24px 28px;
    box-shadow: 14px 8px 10px 1px rgba(26, 58, 42, .08);
}

    /* ── Top row: year + city ── */
    .dp-section .dp-top-row {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .dp-section .dp-field {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dp-section .dp-label {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color:  var(--deep-forest);
      white-space: nowrap;
      margin-bottom: unset;
    }

    .dp-section .year-pills {
      display: flex;
      gap: 4px;
    }

     .dp-section .year-pill {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 500;
      padding: 5px 18px;
      border-radius: 100px;
      border: 1px solid var(--border);
      cursor: pointer;
      color: var(--text-mid);
      background: transparent;
      transition: background .15s, color .15s, border-color .15s;
    }

     .dp-section .year-pill:hover { background: var(--green-light); }
    .dp-section .year-pill.active {
      background: var(--green-dark);
      color: #fff;
      border-color: var(--green-dark);
    }

    .dp-section .city-select {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--green-dark);
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 32px 6px 12px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a7060' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }

    /* ── Month grid ── */
    .dp-section .dp-month-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      flex-wrap: wrap;
      gap: 6px;
    }

    .dp-section .month-legend {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .dp-section .legend-item {
      display: flex !important;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      color:  var(--deep-forest);
    }

    .dp-section .legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .dp-section .dot-peak   { background: #c94040; }
    .dp-section .dot-great  { background: var(--green-mid); }
    .dp-section .dot-good   { background: var(--gold); }
    .dp-section .dot-shower { background: #6b8fb5; }

    .dp-section .month-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 5px;
    }

    .dp-section .month-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 8px 2px;
      border-radius: 8px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background .14s, border-color .14s;
    }

    .dp-section .month-cell:hover { background: var(--green-light); }

    .month-cell.active {
      background: var(--green-light);
      border-color: var(--green-mid);
    }

    .dp-section .month-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-mid);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .dp-section .month-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ── Month tip ── */
    .dp-section .month-tip-row {
      margin-top: 8px;
      min-height: 18px;
    }

    .dp-section .month-tip {
     font-size: 13px;
    color:  var(--deep-forest);
    font-weight: 600;
    }

    /* ── Divider ── */
    .dp-section .dp-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 20px 0;
    }

    /* ── Price + CTA row ── */
    .dp-section .dp-bottom-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .dp-section .price-block { display: flex; flex-direction: column; gap: 4px; }

    .dp-section .price-was {
      font-size: 13px;
      font-weight: 400;
      color:  var(--deep-forest);
      text-decoration: line-through;
    }

    .dp-section .price-main {
      font-family: 'Poppins', sans-serif;
      font-size: 52px;
      font-weight: 600;
      color: var(--green-dark);
      line-height: 1;
      letter-spacing: -.01em;
    }

    .dp-section .price-currency {
      font-size: 22px;
      font-weight: 500;
      color: var(--text-mid);
      vertical-align: super;
      margin-right: 2px;
    }

    .dp-section .price-sub {
  font-size: 13px;
    font-weight: 500;
    color:  var(--deep-forest);
    margin-top: 5px;
    }

    .dp-section .cta-group {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }

    .dp-section.offer-badge {
      font-size: 11px;
      font-weight: 600;
      background: var(--gold-light);
      color: var(--gold-dark);
      padding: 5px 14px;
      border-radius: 100px;
      white-space: nowrap;
      border: 1px solid #e8d9a8;
    }

    .dp-section .enquire-btn {
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 600;
      background: var(--gold);
      color: var(--green-dark);
      border: none;
      border-radius: 10px;
      padding: 13px 32px;
      cursor: pointer;
      white-space: nowrap;
      letter-spacing: .02em;
      transition: background .15s, transform .1s;
    }

    .dp-section .enquire-btn:hover  { background: #d4b05a; }
    .dp-section .enquire-btn:active { transform: scale(.98); }

    .dp-section .no-payment {
      font-size: 12px;
      color:  var(--deep-forest);
      text-align: right;
    }

    /* ── Responsive ── */
    @media (max-width: 600px) {
      .dp-section .dp-card { padding: 18px 16px; }
      .dp-section .dp-heading { font-size: 22px; }
      .dp-section .month-grid { grid-template-columns: repeat(6, 1fr); }
      .dp-section .dp-bottom-row { flex-direction: column; align-items: stretch; }
      .dp-section .price-main { font-size: 42px; }
      .dp-section .cta-group { align-items: stretch; }
      .dp-section .enquire-btn { text-align: center; }
      .dp-section .no-payment { text-align: center; }
      .dp-section .offer-badge { align-self: flex-start; }
    }