/* ==========================================================================
   honeymoon.css — page-scoped refinement for /kashmir-honeymoon-packages/
   Linked only for that route (include/redesign-page.php) and every rule is
   prefixed with `body.hm-page`, so nothing here can affect another page in the
   release. Tokens come from refresh.css / site.css; the literals are the
   fallback so the rules still hold if a token is renamed.
   Loaded after fixes.css, so these are deliberate, page-scoped overrides.
   ========================================================================== */

/* 1. Hero ------------------------------------------------------------------
   One promise, one primary action, one romantic photograph. The photo keeps a
   4/3 frame and a fixed aspect ratio so the H1 never jumps on load. */
.hm-page .page-intro.hm-hero {
  padding-top: clamp(18px, 2.6vw, 36px);
  padding-bottom: clamp(22px, 3vw, 42px);
  background: linear-gradient(180deg, #f5fafd 0%, #fdfefe 62%, #fff 100%);
  border-bottom: 1px solid #eef3f8;
}
.hm-page .hm-hero .intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: center;
}
.hm-page .hm-hero .intro-copy { max-width: 660px; }
.hm-page .hm-hero h1 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.3vw, 48px);
  line-height: 1.09;
  letter-spacing: -.025em;
  color: var(--navy, #132b49);
  text-wrap: balance;
}
.hm-page .hm-hero .intro-copy > p {
  margin: 16px 0 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.68;
  color: #45596d;
}
.hm-page .hm-hero .intro-photo {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #e8eef4;
  box-shadow: 0 30px 60px -34px rgba(11, 47, 71, .55);
}
.hm-page .hm-hero .intro-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.hm-page .hm-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #123c58;
}
.hm-page .hm-hero-facts li { display: flex; align-items: center; gap: 8px; }
.hm-page .hm-hero-facts li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-orange, #ea580c);
}
.hm-page .hm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.hm-page .hm-hero-actions .button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 24px;
}

/* 2. Package cards ---------------------------------------------------------
   Duration reads as a chip, the route and price line up, and both actions sit
   on the card floor so a two-card row never looks ragged. */
/* Explicit 3/2/1 columns (instead of auto-fit) so a row is always full and the
   last card never floats alone at an odd width. Cards stretch to equal height.
   The wrapper is `.hm-package-list`, not `.packages-grid`, on purpose: the
   shared catalogue-lift pass in scenic-layout.php lifts any element whose class
   matches `packages?-grid`, and this grid must stay inside its section. */
.hm-page .hm-package-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 24px !important;
}
.hm-page .hm-package-list > .package-card { height: 100%; }
.hm-page .package-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ktt-line, #e2e8f0);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 40, 60, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hm-page .package-card:hover {
  transform: translateY(-2px);
  border-color: #cfdbe5;
  box-shadow: 0 22px 44px -28px rgba(11, 47, 71, .45);
}
.hm-page .package-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0 !important;
  background: #eef3f7;
}
.hm-page .package-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.hm-page .package-card:hover .package-image img { transform: scale(1.04); }
.hm-page .package-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  padding: 18px 20px 20px;
}
.hm-page .package-info h3 {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.hm-page .package-info h3 a { color: inherit; text-decoration: none; }
.hm-page .package-info h3 a:hover { color: var(--brand-orange, #ea580c); }
.hm-page .package-info .card-duration {
  align-self: flex-start;
  margin: 2px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdf1e7;
  color: #9a3412;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hm-page .package-info .package-route {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #64748b;
}
.hm-page .package-info .card-highlights {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #475569;
}
.hm-page .package-info .package-desc { margin: 4px 0 0; font-size: 14px; }
.hm-page .package-info .quote-label {
  margin: auto 0 0;
  padding-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy, #132b49);
}
.hm-page .card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.hm-page .card-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  text-align: center;
}
.hm-page .trip-photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  color: #64748b;
}

/* 2.1 The filter bar sits inside the packages section, directly above the grid.
   The layout renders the same component on other routes; here it becomes a
   quiet toolbar instead of a tinted box competing with the cards. */
.hm-page .packages-section .scenic-catalogue-tools {
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid #e4ebf2;
  border-radius: 14px;
  background: #f8fbfd;
}
.hm-page .packages-section .scenic-catalogue-tools p {
  margin: 0 0 10px auto;
  font-size: 12px;
  color: #64748b;
}
.hm-page .packages-section .scenic-catalogue-tools label { font-size: 11.5px; font-weight: 650; color: #52657a; }

/* 2.2 The comparison table repeats the grid as data. Stripes, a sticky-feeling
   header and a scrolling wrapper keep it readable without widening the page. */
.hm-page .compare-section .compare-table {
  border: 1px solid #e4ebf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 40, 60, .05);
  overflow: hidden;
}
/* site.css already owns the horizontal scroller; only its outer spacing changes. */
.hm-page .compare-section .compare-table .scenic-table-scroll {
  margin: 0;
  border-radius: 0;
}
.hm-page .compare-section table {
  display: table;
  width: 100%;
  min-width: 620px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 13.5px;
}
.hm-page .compare-section caption {
  padding: 15px 18px 13px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid #eef2f6;
}
.hm-page .compare-section thead th {
  padding: 11px 18px;
  text-align: left;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7c8d;
  background: #f7fafc;
  border-bottom: 1px solid #e4ebf2;
}
.hm-page .compare-section tbody th,
.hm-page .compare-section tbody td {
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #eef2f6;
}
.hm-page .compare-section tbody th { font-weight: 650; color: var(--navy, #132b49); }
.hm-page .compare-section tbody th a { text-decoration: none; }
.hm-page .compare-section tbody th a:hover {
  color: var(--brand-orange, #ea580c);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-page .compare-section tbody td { color: #475569; }
.hm-page .compare-section tbody tr:nth-child(even) { background: #fbfdff; }
.hm-page .compare-section tbody tr:hover { background: #f3f9fd; }

/* 2.3 Destinations borrow the shared .city-packages-grid, so only the block
   rhythm needs a nudge; the cards stay identical to the rest of the release. */
.hm-page .destinations-section .city-packages-grid { margin-top: 0; }
.hm-page .romantic-inclusions.mt-5 { margin-top: 0 !important; }


/* 3. Page rhythm and the pale panels ---------------------------------------
   The body stacked tinted boxes (.section-padding.bg-light, .card.shadow-sm
   tiles, .alert-light notes) so every block looked equally important. They are
   replaced by one white page with hairline separators, which lets headings and
   the package grid carry the hierarchy. */
.hm-page .section-padding { padding-block: clamp(30px, 3.6vw, 54px); }
.hm-page .section-padding + .section-padding { padding-top: 0; }
.hm-page .section-padding.bg-light { background: transparent !important; }
.hm-page .section-padding[id] { scroll-margin-top: 96px; }

.hm-page .section-header { margin-bottom: clamp(20px, 2.4vw, 32px) !important; }
.hm-page .section-header h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.3vw, 33px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--navy, #132b49);
  text-wrap: balance;
}
.hm-page .section-header .lead {
  max-width: 64ch;
  margin: 0 auto;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.65;
  color: #475569;
}

.hm-page .card.shadow-sm {
  border: 1px solid var(--ktt-line, #e2e8f0) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.hm-page .card.shadow-sm .card-body { padding: 20px; }
.hm-page .card.shadow-sm h5 { font-size: 16px; line-height: 1.35; }
.hm-page .card.shadow-sm p { font-size: 14px; line-height: 1.65; }

.hm-page .alert.alert-light {
  margin: 0 0 20px !important;
  padding: 2px 0 2px 20px !important;
  border: 0 !important;
  border-left: 3px solid var(--brand-orange, #ea580c) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.hm-page .alert.alert-light h3 { font-size: 16.5px; }
.hm-page .alert.alert-light p { font-size: 14.5px; line-height: 1.65; color: #475569; }
.hm-page .alert.alert-success {
  margin: 0 !important;
  padding: 16px 18px !important;
  border: 1px solid #cfe3d6 !important;
  border-radius: 14px !important;
  background: #f1f8f3 !important;
  box-shadow: none !important;
}

/* 4. Nested containers and gutters -----------------------------------------
   The body wraps .container and .row.g-4 blocks inside the content column,
   which re-applied the page gutter and squeezed the middle column. Inside the
   guides area those wrappers now simply fill their parent. */
.hm-page .content-column .container,
.hm-page .honeymoon-guides .container {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
}
.hm-page .content-column .row,
.hm-page .honeymoon-guides .row,
.hm-page .romantic-inclusions .row { margin-inline: 0 !important; }
.hm-page .content-column section > .container > .row { row-gap: 20px; }

/* 5. Sidebar ---------------------------------------------------------------
   One enquiry panel with hairline-divided blocks instead of four floating
   pale cards. */
.hm-page .sidebar-sticky-wrapper {
  padding: 22px;
  border: 1px solid #e6edf3;
  border-radius: 18px;
  background: #f8fafc;
}
.hm-page .sidebar-widget {
  margin: 0 !important;
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hm-page .sidebar-widget:first-child { padding-top: 0 !important; border-top: 0 !important; }
.hm-page .sidebar-widget h3 {
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy, #132b49);
}
.hm-page .sidebar-widget p,
.hm-page .sidebar-widget li { font-size: 13.5px; line-height: 1.6; color: #475569; }
.hm-page .sidebar-widget .alert { margin: 0 !important; }
.hm-page .sidebar-widget .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* 6. Itinerary detail blocks and FAQ -------------------------------------- */
.hm-page .accordion-item {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #e6edf3 !important;
  border-radius: 14px !important;
  background: #fff;
}
.hm-page .accordion-button {
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy, #132b49);
  background: #fff !important;
  box-shadow: none !important;
}
.hm-page .accordion-body {
  padding: 4px 20px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #475569;
}
.hm-page .accordion-body > :last-child { margin-bottom: 0; }

/* 6.1 The per-package itinerary notes behind "Read package details": a clean
   block per plan, features in two columns and the price basis as a chip. */
.hm-page .offer-detail-note {
  padding: 20px 0;
  border-top: 1px solid #e6edf3;
  scroll-margin-top: 96px;
}
.hm-page .offer-detail-note:first-of-type { border-top: 0; padding-top: 0; }
.hm-page .offer-detail-note h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--navy, #132b49);
}
.hm-page .offer-detail-note > p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; }
.hm-page .package-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 4px 20px;
  margin: 10px 0 12px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
}
.hm-page .offer-detail-note .price-note {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  font-weight: 600;
  color: #334155;
}
.hm-page .offer-detail-note,
.hm-page .price-note { font-size: 13px; line-height: 1.6; color: #64748b; }

/* 7. Flat supporting cards and long-word safety --------------------------- */
.hm-page .city-card {
  overflow-wrap: anywhere;
  border: 1px solid var(--ktt-line, #e2e8f0);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}
.hm-page h1,
.hm-page h2,
.hm-page h3,
.hm-page .card,
.hm-page .sidebar-widget { overflow-wrap: anywhere; }

/* 8. Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hm-page .hm-hero .intro-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hm-page .hm-hero .intro-copy { max-width: none; order: 1; }
  .hm-page .hm-hero .intro-photo { order: 2; }
  .hm-page .hm-package-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  .hm-page .commercial-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .hm-page .sidebar-sticky-wrapper { position: static !important; top: auto !important; }
}
@media (max-width: 720px) {
  .hm-page .section-padding { padding-block: 26px; }
  .hm-page .hm-hero h1 { font-size: clamp(26px, 7.2vw, 34px); }
  .hm-page .hm-hero .intro-photo { aspect-ratio: 16 / 11; border-radius: 16px; }
  .hm-page .hm-hero-actions .button { flex: 1 1 100%; justify-content: center; }
  .hm-page .hm-package-list { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .hm-page .packages-section .scenic-catalogue-tools { gap: 12px; padding: 12px 14px; }
  .hm-page .packages-section .scenic-catalogue-tools label,
  .hm-page .packages-section .scenic-catalogue-tools button { flex: 1 1 100%; max-width: none; }
  .hm-page .package-info { padding: 16px; }
  .hm-page .sidebar-sticky-wrapper { padding: 18px; }
  .hm-page .content-column .row,
  .hm-page .honeymoon-guides .row { row-gap: 16px; }
}
@media (max-width: 420px) {
  .hm-page .card-actions { grid-template-columns: 1fr; }
  .hm-page .package-info h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-page .package-card,
  .hm-page .package-image img { transition: none !important; }
}

/* ==========================================================================
   9. Rewritten body blocks
   The page body no longer reuses the imported legacy tiles; it is rebuilt from
   the verified offer, inclusion and season facts as scannable sections. Every
   class below is new markup, so all of its styling lives here. Rules use the
   same tokens and the same flat-card language as sections 1–7.
   ========================================================================== */

/* 9.0 Section rhythm. Section 3 removes the top padding between consecutive
   `.section-padding` blocks because the old body repeated tinted panels; the
   rewritten body alternates white and a very pale band instead, so every
   section keeps its own top padding and the band never shrinks to nothing. */
.hm-page .hm-section.section-padding,
.hm-page .hm-section.section-padding + .hm-section.section-padding {
  padding-block: clamp(28px, 3.2vw, 46px);
}
.hm-page .hm-section.hm-alt { background: #fbfdff; }

/* 9.1 Intro split — copy and a fact list beside one photograph. ------------- */
.hm-page .hm-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
}
.hm-page .hm-split-copy > :first-child { margin-top: 0; }
.hm-page .hm-split-copy > p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.72;
  color: #47596d;
}
.hm-page .hm-fact-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.hm-page .hm-fact-list li {
  position: relative;
  padding-left: 25px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #475569;
}
.hm-page .hm-fact-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .42em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--brand-orange, #ea580c);
  border-bottom: 2px solid var(--brand-orange, #ea580c);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.hm-page .hm-fact-list strong { color: var(--navy, #132b49); font-weight: 650; }
.hm-page .hm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hm-page .hm-actions .button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding-inline: 20px;
}
.hm-page .hm-split-photo { margin: 0; }
.hm-page .hm-split-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  background: #e8eef4;
  box-shadow: 0 24px 48px -32px rgba(11, 47, 71, .5);
}
.hm-page .hm-split-photo figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #708894;
}

/* 9.2 Sub-headings inside a section (beside the H2 section headers). ------- */
.hm-page .hm-subhead {
  margin: clamp(26px, 3vw, 38px) 0 8px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy, #132b49);
}
.hm-page .hm-subhead-lead {
  max-width: 70ch;
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #52657a;
}

/* 9.3 The three plans priced per couple, expanded in place. ---------------- */
.hm-page .hm-plan-details { display: grid; gap: 0; }
.hm-page .hm-plan-details .offer-detail-note { background: transparent; }
.hm-page .hm-plan-details .offer-detail-note h3,
.hm-page .hm-plan-details .offer-detail-note h4 {
  margin: 0 0 6px;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--navy, #132b49);
}
.hm-page .hm-plan-details .package-features { margin-bottom: 0; }
.hm-page .hm-quote-note { margin-top: 22px !important; }

/* 9.4 Plain notes and the compare walk-through. --------------------------- */
.hm-page .hm-note {
  max-width: 74ch;
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #64748b;
}
.hm-page .hm-note a {
  color: #123c58;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-page .hm-note a:hover { color: var(--brand-orange, #ea580c); }
.hm-page .hm-compare-notes { margin-top: 24px; }
.hm-page .hm-compare-notes h3 {
  margin: 0 0 10px;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--navy, #132b49);
}
.hm-page .hm-compare-notes ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-page .hm-compare-notes li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: #475569;
}
.hm-page .hm-compare-notes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7d7e2;
}
.hm-page .hm-compare-notes strong { color: var(--navy, #132b49); font-weight: 650; }

/* 9.5 Romantic experience cards (icon, title, one paragraph). ------------- */
.hm-page .hm-experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.hm-page .hm-experience {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--ktt-line, #e2e8f0);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 40, 60, .05);
}
.hm-page .hm-experience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: #fdf1e7;
  color: #b45309;
}
.hm-page .hm-experience-icon svg { width: 22px; height: 22px; }
.hm-page .hm-experience h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--navy, #132b49);
}
.hm-page .hm-experience p { margin: 0; font-size: 14px; line-height: 1.65; color: #52657a; }

/* 9.6 Destination cards reuse the shared .city-packages-grid; only the card
   heading needs a size, because this page writes an H3 (correct level under the
   section H2) where the shared grid expects an H4. */
.hm-page .hm-destination-grid { margin-top: 0; }
.hm-page .hm-destination-grid .city-content h3 {
  margin: 0 0 7px;
  font-size: 16px;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--navy, #132b49);
}
.hm-page .hm-destination-grid .city-content > p { margin: 0 0 11px; font-size: 13px; line-height: 1.6; color: #5c7583; }
.hm-page .destinations-section .hm-note,
.hm-page .romantic-experiences .hm-note { text-align: center; margin-inline: auto; }

/* 9.7 "Choose your itinerary" — one card per trip length. ----------------- */
.hm-page .hm-duration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.hm-page .hm-duration-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--ktt-line, #e2e8f0);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 40, 60, .05);
}
.hm-page .hm-duration-length {
  align-self: flex-start;
  margin: 0 0 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdf1e7;
  color: #9a3412;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hm-page .hm-duration-card h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--navy, #132b49);
}
.hm-page .hm-duration-card > p { margin: 0; font-size: 14px; line-height: 1.65; color: #52657a; }
.hm-page .hm-duration-links {
  display: grid;
  gap: 6px;
  margin: auto 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #eef3f8;
  list-style: none;
}
.hm-page .hm-duration-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #123c58;
  text-decoration: none;
}
.hm-page .hm-duration-links a::after { content: "→"; color: #9db3c2; font-weight: 400; }
.hm-page .hm-duration-links a:hover { color: var(--brand-orange, #ea580c); }
.hm-page .hm-duration-links a:hover::after { color: var(--brand-orange, #ea580c); }

/* 9.8 Departure-city block under the duration cards. --------------------- */
.hm-page .hm-departures {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid #e4ebf2;
  border-radius: 16px;
  background: #f8fbfd;
}
.hm-page .hm-departures h3 {
  margin: 0 0 6px;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--navy, #132b49);
}
.hm-page .hm-departures > p { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: #52657a; }
.hm-page .hm-city-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-page .hm-city-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid #d7e3ec;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #123c58;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.hm-page .hm-city-links a:hover {
  border-color: #f0c19a;
  background: #fffaf5;
  color: var(--brand-orange, #ea580c);
}

/* 9.9 Seasons and packing. ----------------------------------------------- */
.hm-page .hm-season-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.hm-page .hm-season {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ktt-line, #e2e8f0);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 40, 60, .05);
}
.hm-page .hm-season-months {
  align-self: flex-start;
  margin: 0 0 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef4f8;
  color: #33556b;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hm-page .hm-season h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy, #132b49);
}
.hm-page .hm-season > p { margin: 0; font-size: 13.5px; line-height: 1.62; color: #52657a; }
.hm-page .hm-season .hm-season-best {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #33556b;
}
.hm-page .hm-pack {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e4ebf2;
  border-radius: 16px;
  background: #f8fbfd;
}
.hm-page .hm-pack h3 {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--navy, #132b49);
}
.hm-page .hm-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hm-page .hm-pack-grid > div { min-width: 0; }
.hm-page .hm-pack-grid h4 {
  margin: 0 0 5px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #123c58;
}
.hm-page .hm-pack-grid p { margin: 0; font-size: 13.5px; line-height: 1.62; color: #52657a; }

/* 9.10 Inclusions: two panels — what a package covers and what it does not. */
.hm-page .hm-include-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.hm-page .hm-include-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #d8e6dd;
  border-radius: 16px;
  background: #f7fbf8;
}
.hm-page .hm-include-card--excluded {
  border-color: #e8dfd6;
  background: #fdfaf7;
}
.hm-page .hm-include-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--navy, #132b49);
}
.hm-page .hm-include-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-page .hm-include-card li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
}
.hm-page .hm-include-card li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: #2f7a51;
  content: "✓";
}
.hm-page .hm-include-card--excluded li::before { color: #a16207; content: "×"; font-size: 15px; }

/* 9.11 Optional romantic add-ons. ---------------------------------------- */
.hm-page .hm-addon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hm-page .hm-addon {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ktt-line, #e2e8f0);
  border-radius: 16px;
  background: #fff;
}
.hm-page .hm-addon h4 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy, #132b49);
}
.hm-page .hm-addon p { margin: 0; font-size: 13.5px; line-height: 1.62; color: #52657a; }

/* 9.12 Customisation questions, arrival routes and the closing quote panel. */
.hm-page .hm-customize-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.hm-page .hm-customize-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ktt-line, #e2e8f0);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 40, 60, .05);
}
.hm-page .hm-customize-card h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--navy, #132b49);
}
.hm-page .hm-customize-card p { margin: 0; font-size: 13.5px; line-height: 1.62; color: #52657a; }

.hm-page .hm-arrival {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.hm-page .hm-arrival article {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e4ebf2;
  border-radius: 16px;
  background: #f8fbfd;
}
.hm-page .hm-arrival h4 {
  margin: 0 0 5px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #123c58;
}
.hm-page .hm-arrival p { margin: 0; font-size: 13.5px; line-height: 1.62; color: #52657a; }

.hm-page .hm-quote-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: center;
  margin-top: 26px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 20px;
  background: linear-gradient(135deg, #0f3350 0%, #123c58 58%, #17506f 100%);
  color: #eaf2f8;
}
.hm-page .hm-quote-cta h3 {
  margin: 0 0 8px;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #fff;
}
.hm-page .hm-quote-cta p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #cfe0ec; }
.hm-page .hm-quote-actions { display: flex; flex-direction: column; gap: 10px; }
.hm-page .hm-quote-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: 18px;
  text-align: center;
}
.hm-page .hm-quote-actions .button.outline {
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}
.hm-page .hm-quote-actions .button.outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.hm-page .hm-quote-actions .hm-note {
  margin: 4px 0 0;
  max-width: none;
  font-size: 12.5px;
  color: #b9cfdd;
}

/* 9.13 Why book with us: four short reasons plus internal links. ---------- */
.hm-page .hm-whybook {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.hm-page .hm-whybook article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ktt-line, #e2e8f0);
  border-radius: 16px;
  background: #fff;
}
.hm-page .hm-whybook h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--navy, #132b49);
}
.hm-page .hm-whybook p { margin: 0; font-size: 13.5px; line-height: 1.62; color: #52657a; }
.hm-page .hm-whybook-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #eef3f8;
  list-style: none;
}
.hm-page .hm-whybook-links a {
  font-size: 13.5px;
  font-weight: 600;
  color: #123c58;
  text-decoration: none;
}
.hm-page .hm-whybook-links a:hover {
  color: var(--brand-orange, #ea580c);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 9.14 FAQ: the accordion items are converted to native <details> by
   ktt_legacy_accordions(), so only the block rhythm is set here. */
.hm-page .faq-section .faq-accordion { margin-top: 4px; }
.hm-page .faq-section details.faq-item:last-of-type { margin-bottom: 0; }

/* 9.15 Responsive for the rewritten blocks. The content column narrows before
   the page does (a sticky sidebar sits beside it), so the wide grids collapse
   one step earlier than the global breakpoints. */
@media (max-width: 1180px) {
  .hm-page .hm-season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-page .hm-whybook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-page .hm-customize-grid,
  .hm-page .hm-addon-grid,
  .hm-page .hm-arrival { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-page .hm-quote-cta { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hm-page .hm-quote-actions { flex-direction: row; flex-wrap: wrap; }
  .hm-page .hm-quote-actions .button { flex: 1 1 220px; }
  .hm-page .hm-quote-actions .hm-note { flex: 1 1 100%; }
}
@media (max-width: 1024px) {
  .hm-page .hm-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hm-page .hm-split-photo img { aspect-ratio: 16 / 9; }
  .hm-page .hm-duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-page .hm-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hm-page .hm-fact-list li { font-size: 14px; }
  .hm-page .hm-actions .button { flex: 1 1 100%; justify-content: center; }
  .hm-page .hm-season-grid,
  .hm-page .hm-whybook,
  .hm-page .hm-customize-grid,
  .hm-page .hm-addon-grid,
  .hm-page .hm-arrival,
  .hm-page .hm-duration-grid,
  .hm-page .hm-include-grid,
  .hm-page .hm-pack-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-page .hm-experience-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hm-page .hm-departures,
  .hm-page .hm-pack { padding: 16px; }
  .hm-page .hm-quote-cta { padding: 20px; border-radius: 16px; }
  .hm-page .hm-quote-actions .button { flex: 1 1 100%; }
  .hm-page .hm-whybook-links { gap: 8px 16px; }
}
@media (max-width: 420px) {
  .hm-page .hm-experience,
  .hm-page .hm-duration-card,
  .hm-page .hm-season,
  .hm-page .hm-include-card,
  .hm-page .hm-addon,
  .hm-page .hm-customize-card { padding: 16px; }
  .hm-page .hm-city-links a { flex: 1 1 100%; justify-content: center; }
}