/* =====================================================================
   KOHWAN — one tour package (/packages/{slug}).

   A photograph mosaic across the top, the trip read down the left — route,
   day by day, what is inside it — and the enquiry card following down the
   right. Kohwan's navy and gold throughout.

   Prefix .pkd- throughout.
   ===================================================================== */
.pkd {
  --pkd-navy: #2e4755;
  --pkd-gold: #BD830D;
  --pkd-ink: #1f3441;
  --pkd-muted: #5f7380;
  --pkd-line: #E3E9EC;
  --pkd-soft: #F6F8F9;
  --pkd-yes: #1d7a4c;
  --pkd-no: #b23b32;
  --pkd-ease: cubic-bezier(.22, .61, .36, 1);

  padding-block: clamp(16px, 2.4vw, 30px) clamp(40px, 6vw, 80px);
  background: #FFFFFF;
}

/* ------------------------------ photographs ------------------------------ */
/* The mosaic is one fixed-height band: the big photograph fills the left,
   the tiles share the right. Every tile stretches to its share of that
   height, so the grid never leaves a hole whatever the photo count is. */
.pkd-gal {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  /* The row is the band, not the photograph's own height — without this the
     row grows to the picture and the tiles spill past the band. */
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  height: clamp(280px, 33vw, 440px);
  /* room under the header, which otherwise sits right on the photographs */
  margin-top: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(22px, 2.6vw, 32px);
}
.pkd-gal__big,
.pkd-gal__tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;   /* a grid child may shrink below its picture */
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--pkd-soft);
  cursor: zoom-in;
}
.pkd-gal__big { height: 100%; }
/* One or two photographs: one wide picture rather than a lopsided grid. */
.pkd-gal--solo { grid-template-columns: minmax(0, 1fr); }
.pkd-gal__big img,
.pkd-gal__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--pkd-ease); }
.pkd-gal__big:hover img,
.pkd-gal__tile:hover img { transform: scale(1.04); }
.pkd-gal__side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  height: 100%;
}
.pkd-gal__tile { min-height: 0; height: 100%; }
/* two or three photographs beside the big one: one column, filling the height */
.pkd-gal--slim { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pkd-gal--slim .pkd-gal__side { grid-template-columns: minmax(0, 1fr); }
.pkd-hl { list-style: disc; }
/* the white pill on the last tile, as the reference has it */
.pkd-gal__all {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .94);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pkd-ink);
  box-shadow: 0 3px 10px rgba(20, 33, 41, .2);
}
.pkd-gal__all svg { width: 15px; height: 15px; }

/* the full-size viewer */
.pkd-lb { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); }
.pkd-lb[hidden] { display: none; }
.pkd-lb__veil { position: absolute; inset: 0; background: rgba(12, 20, 26, .88); }
.pkd-lb__img { position: relative; max-width: min(1100px, 100%); max-height: 84vh; border-radius: 10px; object-fit: contain; }
.pkd-lb__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .18s;
}
.pkd-lb__btn:hover { background: rgba(255, 255, 255, .3); }
.pkd-lb__btn svg { width: 22px; height: 22px; }
.pkd-lb__btn--prev { left: clamp(8px, 2vw, 28px); }
.pkd-lb__btn--next { right: clamp(8px, 2vw, 28px); }
.pkd-lb__btn--close { top: clamp(8px, 2vw, 24px); right: clamp(8px, 2vw, 28px); }
.pkd-lb__n { position: absolute; bottom: clamp(10px, 2vw, 26px); left: 0; right: 0; text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .8); }
body.pkd-locked { overflow: hidden; }

/* -------------------------------- layout -------------------------------- */
.pkd-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.pkd-main { min-width: 0; }

.pkd-h1 {
  margin: 0;
  font-family: 'Barlow Condensed', 'Oswald', system-ui, sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--pkd-ink);
}

.pkd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
/* The stop row under the title. Scoped to .pkd-main because the amenities
   list further down shares the .pkd-chips name and resets its margin to 0,
   which left this row sitting on the title's descenders. */
.pkd-main > .pkd-h1 { line-height: 1.2; }
.pkd-main > .pkd-chips {
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(14px, 1.6vw, 20px);
}
.pkd-main > .pkd-chips .pkd-chips__dur { margin-right: 4px; }
.pkd-chips__dur {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--pkd-gold);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #FFFFFF;
}
/* a stop: the number big, the place beside it in two small lines */
.pkd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 2px;
  font-size: .78rem;
  color: var(--pkd-ink);
}
.pkd-chip b { font-size: 1.3rem; font-weight: 700; line-height: 1; color: #C6D3D9; }
.pkd-chip > span { display: flex; flex-direction: column; }
.pkd-chip i { font-style: normal; font-size: .64rem; line-height: 1.15; color: var(--pkd-muted); }
.pkd-chip em { font-style: normal; font-size: .82rem; font-weight: 600; line-height: 1.2; color: var(--pkd-ink); }
.pkd-chip--more b { color: var(--pkd-gold); }

.pkd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--pkd-line);
  list-style: none;
}
.pkd-facts li { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--pkd-ink); }
.pkd-facts svg { width: 19px; height: 19px; color: var(--pkd-muted); }

/* -------------------------------- blocks -------------------------------- */
.pkd-block { margin-top: clamp(28px, 3.6vw, 46px); }
/* the group banner stands apart from what follows it */
.pkd-block:has(> .pkd-group) { margin-bottom: clamp(10px, 1.4vw, 18px); }
.pkd-h2 {
  margin: 0 0 14px;
  font-family: 'Barlow Condensed', 'Oswald', system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--pkd-ink);
}
.pkd-h2--flush { margin-bottom: 16px; }
.pkd-note { margin: -8px 0 14px; font-size: .86rem; color: var(--pkd-muted); }

/* ------------------------- the trip as a set of cards -------------------------
   Laid out to the reference: a bar of pills that jumps to each part of the
   trip, and every part a card of its own. */
.pkd-jump {
  position: sticky;
  top: 74px;
  z-index: 20;
  display: flex;
  gap: 8px;
  margin-top: clamp(20px, 2.6vw, 32px);
  padding: 10px;
  border: 1px solid var(--pkd-line);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(20, 34, 44, .06);
  overflow-x: auto;
  scrollbar-width: none;
}
.pkd-jump::-webkit-scrollbar { display: none; }
.pkd-jump__pill {
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--pkd-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.pkd-jump__pill:hover { background: #F1F5F7; color: var(--pkd-ink); }
.pkd-jump__pill.is-on { background: var(--pkd-navy); color: #FFFFFF; }

.pkd-card {
  padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid var(--pkd-line);
  border-radius: 14px;
  background: #FFFFFF;
  scroll-margin-top: 150px;
}
.pkd-h2--yes { color: var(--pkd-yes); }
.pkd-h2--no { color: var(--pkd-no); }
.pkd-lead { margin: 0 0 12px; font-size: .95rem; line-height: 1.7; color: var(--pkd-muted); }

/* Two columns of ticks, as the reference has them. */
.pkd-list--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
@media (max-width: 720px) { .pkd-list--two { grid-template-columns: minmax(0, 1fr); } }

/* The amenities, each on its own pill. */
.pkd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pkd-chips li {
  padding: 8px 14px;
  border: 1px solid var(--pkd-line);
  border-radius: 999px;
  background: #F7FAFB;
  font-size: .84rem;
  color: var(--pkd-ink);
}

.pkd-prose { font-size: .95rem; line-height: 1.8; color: var(--pkd-ink); }
.pkd-prose p { margin: 0 0 12px; }
.pkd-prose ul, .pkd-prose ol { margin: 0 0 14px; padding-left: 20px; }
.pkd-prose li { margin-bottom: 5px; }
.pkd-prose h2, .pkd-prose h3 { margin: 18px 0 8px; font-size: 1.02rem; font-weight: 700; color: var(--pkd-navy); }
.pkd-prose a { color: var(--pkd-navy); font-weight: 600; }
.pkd-prose.is-clamped { max-height: 200px; overflow: hidden; mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
.pkd-more { margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 700; color: var(--pkd-gold); cursor: pointer; }
.pkd-more:hover { text-decoration: underline; }

/* --------------------------- other durations --------------------------- */
.pkd-durs,
.pkd-rel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pkd-durs::-webkit-scrollbar,
.pkd-rel::-webkit-scrollbar { display: none; }

.pkd-dur {
  flex: none;
  width: 92px;
  scroll-snap-align: start;
  text-decoration: none;
}
/* "+8 More", the round button the reference ends the row with */
.pkd-dur__more {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 69px;
  border-radius: 10px;
  background: var(--pkd-soft);
  text-decoration: none;
}
.pkd-dur__more b { font-size: 1.05rem; font-weight: 800; color: var(--pkd-gold); }
.pkd-dur__more span { font-size: .72rem; color: var(--pkd-muted); }
.pkd-dur__img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--pkd-soft); }
.pkd-dur__img img { width: 100%; height: 100%; object-fit: cover; }
.pkd-dur__img b {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 8px 7px;
  background: linear-gradient(180deg, rgba(20, 33, 41, 0), rgba(20, 33, 41, .8));
  font-size: .85rem;
  font-weight: 800;
  color: #FFFFFF;
}
.pkd-dur.is-on .pkd-dur__img { outline: 3px solid var(--pkd-gold); outline-offset: 2px; }
.pkd-dur__from { display: block; margin-top: 8px; font-size: .74rem; color: var(--pkd-muted); }
.pkd-dur__price { display: block; font-size: .92rem; font-weight: 800; color: var(--pkd-ink); }
.pkd-dur:hover .pkd-dur__price { color: var(--pkd-gold); }

/* --------------------------------- route --------------------------------- */
/* one bordered row per route, stacked, as the reference has them */
.pkd-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 8px;
  padding: 13px 16px;
  border: 1px solid var(--pkd-line);
  border-radius: 8px;
  background: #FFFFFF;
  font-size: .9rem;
  font-weight: 600;
  color: var(--pkd-ink);
  text-decoration: none;
}
.pkd-route svg { width: 15px; height: 15px; color: var(--pkd-muted); }
.pkd-route--alt { font-weight: 500; color: var(--pkd-muted); }
.pkd-route--alt:hover { border-color: var(--pkd-gold); color: var(--pkd-ink); }
.pkd-route em {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--pkd-line);
  border-radius: 4px;
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  color: var(--pkd-navy);
}

/* the description written as separate lines */
.pkd-hl { margin: 0; padding-left: 18px; }
.pkd-hl li { margin-bottom: 9px; }

/* ------------------------------- itinerary ------------------------------- */
.pkd-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.pkd-tabs::-webkit-scrollbar { display: none; }
.pkd-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--pkd-line);
  border-radius: 8px;
  background: #FFFFFF;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pkd-muted);
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.pkd-tab svg { width: 15px; height: 15px; }
.pkd-tab.is-on { border-color: var(--pkd-gold); background: var(--pkd-gold); color: #FFFFFF; }

/* the flat lists behind the Activities, Stay and Transfers tabs */
.pkd-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pkd-lines[hidden] { display: none; }
.pkd-lines li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 15px;
  border: 1px solid var(--pkd-line);
  border-radius: 8px;
  font-size: .9rem;
  color: var(--pkd-ink);
}
.pkd-lines b {
  flex: none;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(189, 131, 13, .12);
  font-size: .74rem;
  font-weight: 800;
  color: var(--pkd-gold);
}
.pkd-lines i { display: block; margin-top: 3px; font-style: normal; font-size: .85rem; color: var(--pkd-muted); }

.pkd-days { display: flex; flex-direction: column; gap: 10px; }
.pkd-day { overflow: hidden; border: 1px solid var(--pkd-line); border-radius: 10px; background: #FFFFFF; }
.pkd-day__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border: 0;
  background: #FFFFFF;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pkd-day__n {
  flex: none;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--pkd-gold);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.pkd-day__t { flex: 1; min-width: 0; font-size: .95rem; font-weight: 600; color: var(--pkd-ink); }
.pkd-day__chev { flex: none; width: 17px; height: 17px; color: var(--pkd-muted); transition: transform .2s var(--pkd-ease); }
.pkd-day.is-open .pkd-day__chev { transform: rotate(180deg); }
.pkd-day__body { padding: 0 15px 15px; border-top: 1px solid var(--pkd-line); }
.pkd-day__body[hidden] { display: none; }
.pkd-day__p { margin: 12px 0 0; font-size: .92rem; line-height: 1.75; color: var(--pkd-ink); }

/* A day reads as the steps it is: one line each, numbered down the side. */
.pkd-steps {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pkd-step;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkd-steps li {
  position: relative;
  counter-increment: pkd-step;
  padding-left: 34px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--pkd-ink);
}
.pkd-steps li::before {
  content: counter(pkd-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(189, 131, 13, .12);
  font-size: .74rem;
  font-weight: 800;
  color: var(--pkd-gold);
}
.pkd-day__items { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pkd-day__items li { display: flex; gap: 14px; align-items: flex-start; }
.pkd-day__time { flex: none; min-width: 84px; font-size: .84rem; font-weight: 700; color: var(--pkd-gold); }
.pkd-day__what b { display: block; font-size: .92rem; color: var(--pkd-ink); }
.pkd-day__what i { display: block; margin-top: 3px; font-style: normal; font-size: .88rem; color: var(--pkd-muted); }

.pkd-short { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pkd-short[hidden] { display: none; }
.pkd-short li { padding: 11px 14px; border: 1px solid var(--pkd-line); border-radius: 8px; font-size: .92rem; color: var(--pkd-ink); }
.pkd-short b { margin-right: 8px; color: var(--pkd-gold); }

.pkd-end { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; color: var(--pkd-gold); }
.pkd-end::before,
.pkd-end::after { content: ""; flex: 1; height: 1px; background: var(--pkd-line); }
/* signed off in a hand, the way the reference closes the itinerary */
.pkd-end span {
  font-family: 'Segoe Script', 'Brush Script MT', 'Snell Roundhand', cursive;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: .01em;
}

/* -------------------------- inside the package -------------------------- */
.pkd-inside { padding: clamp(16px, 2vw, 24px); border: 1px solid var(--pkd-line); border-radius: 12px; }
.pkd-inside__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.pkd-inside__h { margin: 0 0 10px; font-size: .95rem; font-weight: 800; color: var(--pkd-navy); }
.pkd-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pkd-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; line-height: 1.6; color: var(--pkd-ink); }
.pkd-list svg { flex: none; width: 17px; height: 17px; margin-top: 2px; }
.pkd-list--yes svg { color: var(--pkd-yes); }
.pkd-list--no svg { color: var(--pkd-no); }

/* --------------------------- seasonal pricing --------------------------- */
.pkd-table { overflow-x: auto; border: 1px solid var(--pkd-line); border-radius: 10px; }
.pkd-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pkd-table th, .pkd-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--pkd-line); }
.pkd-table th { background: var(--pkd-soft); font-weight: 700; color: var(--pkd-navy); }
.pkd-table tr:last-child td { border-bottom: 0; }
.pkd-table td:last-child, .pkd-table th:last-child { text-align: right; }

/* ------------------------------- accordions ------------------------------- */
.pkd-acc { border: 1px solid var(--pkd-line); border-radius: 10px; margin-bottom: 10px; background: #FFFFFF; }
.pkd-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: .98rem;
  font-weight: 700;
  color: var(--pkd-ink);
  cursor: pointer;
  list-style: none;
}
.pkd-acc summary::-webkit-details-marker { display: none; }
.pkd-acc summary svg { flex: none; width: 17px; height: 17px; color: var(--pkd-muted); transition: transform .2s var(--pkd-ease); }
.pkd-acc[open] summary svg { transform: rotate(180deg); }
.pkd-acc__body { padding: 0 16px 16px; }

/* ----------------------------- group enquiry ----------------------------- */
.pkd-group {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: stretch;
  overflow: hidden;
  border-radius: 10px;
  /* the site's navy, and no wash over the photograph */
  background: linear-gradient(100deg, #24404f 0%, #2e4755 55%, #3a596b 100%);
  color: #FFFFFF;
}
.pkd-group__txt { padding: clamp(20px, 2.6vw, 30px); }
.pkd-group h2 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; }
.pkd-group p { margin: 0 0 16px; max-width: 52ch; font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
/* the photo fills whatever height the words need, rather than setting it */
.pkd-group__img { position: relative; display: block; min-height: 150px; }
.pkd-group__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pkd-group__btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 6px;
  background: var(--pkd-gold);
  font-size: .84rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  transition: transform .18s var(--pkd-ease), filter .18s;
}
.pkd-group__btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* the offer the CMS holds for this package */
.pkd-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: 10px;
  background: #16242c;
  color: #FFFFFF;
}
.pkd-offer__h { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--pkd-gold); }
.pkd-offer__p { margin: 5px 0 0; font-size: .88rem; color: rgba(255, 255, 255, .82); }
.pkd-offer__t { margin: 5px 0 0; font-size: .76rem; color: rgba(255, 255, 255, .55); }
.pkd-offer__btn {
  flex: none;
  padding: 11px 20px;
  border-radius: 6px;
  background: var(--pkd-gold);
  font-size: .84rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
}
.pkd-offer__btn:hover { filter: brightness(1.08); }

/* ------------------------------- more trips ------------------------------- */
.pkd-rel__card {
  flex: none;
  width: 268px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pkd-line);
  border-radius: 12px;
  background: #FFFFFF;
}
.pkd-rel__media { display: block; aspect-ratio: 16 / 10; background: var(--pkd-soft); }
.pkd-rel__media img { width: 100%; height: 100%; object-fit: cover; }
.pkd-rel__body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.pkd-rel__meta { margin: 0 0 5px; font-size: .78rem; color: var(--pkd-muted); }
.pkd-rel__body h3 { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.4; }
.pkd-rel__body h3 a { color: var(--pkd-ink); text-decoration: none; }
.pkd-rel__body h3 a:hover { color: var(--pkd-gold); }
.pkd-rel__price { margin: 8px 0 0; }
.pkd-rel__price s { margin-right: 7px; font-size: .8rem; color: var(--pkd-muted); }
.pkd-rel__price b { font-size: 1.05rem; font-weight: 800; color: var(--pkd-ink); }
.pkd-rel__cta { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.pkd-rel__call {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 38px;
  border: 1.5px solid var(--pkd-gold);
  border-radius: 7px;
  color: var(--pkd-gold);
  transition: background-color .18s, color .18s;
}
.pkd-rel__call svg { width: 16px; height: 16px; }
.pkd-rel__call:hover { background: var(--pkd-gold); color: #FFFFFF; }
.pkd-rel__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 7px;
  background: var(--pkd-navy);
  font-size: .8rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
}
.pkd-rel__btn:hover { background: #24404f; }

/* ------------------------------- travellers ------------------------------- */
/* the score beside the bars, as the reference's reviews block opens */
.pkd-score {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  margin-bottom: 18px;
  padding: 16px clamp(14px, 2vw, 22px);
  border: 1px solid var(--pkd-line);
  border-radius: 12px;
}
.pkd-score__big { text-align: center; }
.pkd-score__stars { display: flex; justify-content: center; gap: 2px; color: var(--pkd-gold); }
.pkd-score__stars svg { width: 18px; height: 18px; }
.pkd-score__big b { display: block; margin-top: 4px; font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--pkd-ink); }
.pkd-score__big i { display: block; margin-top: 4px; font-style: normal; font-size: .78rem; color: var(--pkd-muted); }
.pkd-score__bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pkd-score__bars li { display: flex; align-items: center; gap: 10px; }
.pkd-score__lab { flex: none; width: 34px; font-size: .78rem; color: var(--pkd-muted); }
.pkd-score__bar { flex: 1; height: 7px; border-radius: 7px; background: var(--pkd-soft); overflow: hidden; }
.pkd-score__bar i { display: block; height: 100%; border-radius: 7px; background: var(--pkd-gold); }
.pkd-score__n { flex: none; width: 26px; text-align: right; font-size: .78rem; color: var(--pkd-muted); }

.pkd-acc__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0 16px 16px; }
.pkd-acc__links a { font-size: .86rem; color: var(--pkd-navy); text-decoration: underline; }
.pkd-acc__links a:hover { color: var(--pkd-gold); }

.pkd-revs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
/* no box around a review — just the words, as asked */
.pkd-rev { padding: 4px 0 6px; border: 0; background: none; }
.pkd-rev header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pkd-rev header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pkd-rev header b { display: block; font-size: .92rem; color: var(--pkd-ink); }
.pkd-rev header i { display: block; font-style: normal; font-size: .78rem; color: var(--pkd-muted); }
.pkd-rev__stars { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--pkd-gold); }
.pkd-rev__stars svg { width: 14px; height: 14px; }
.pkd-rev p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--pkd-muted); }

/* --------------------------- the enquiry column --------------------------- */
.pkd-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }

.pkd-buy { padding: 18px; border: 1px solid var(--pkd-line); border-radius: 12px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(20, 33, 41, .08); }
.pkd-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.pkd-buy__price b { font-size: 1.7rem; font-weight: 800; color: var(--pkd-ink); }
.pkd-buy__price span { font-size: .8rem; color: var(--pkd-muted); }
.pkd-buy__was { display: flex; align-items: center; gap: 9px; margin: 3px 0 0; }
.pkd-buy__was s { font-size: .88rem; color: var(--pkd-muted); }
.pkd-buy__was em {
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(29, 122, 76, .12);
  font-style: normal;
  font-size: .76rem;
  font-weight: 700;
  color: var(--pkd-yes);
}
.pkd-buy__ask { font-size: 1.2rem !important; color: var(--pkd-navy) !important; }
.pkd-buy__meta { margin: 6px 0 14px; font-size: .84rem; color: var(--pkd-muted); }
.pkd-buy__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 8px;
  background: var(--pkd-gold);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  transition: filter .18s, transform .18s var(--pkd-ease);
}
.pkd-buy__cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.pkd-buy__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin-top: 9px;
  border: 1.5px solid var(--pkd-navy);
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--pkd-navy);
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.pkd-buy__call svg { width: 16px; height: 16px; }
.pkd-buy__call:hover { background: var(--pkd-navy); color: #FFFFFF; }

.pkd-form { padding: 18px; border: 1px solid var(--pkd-line); border-radius: 12px; background: #FFFFFF; }
.pkd-form__h { margin: 0; font-size: .92rem; font-weight: 700; color: var(--pkd-ink); }
.pkd-form__price { margin: 4px 0 14px; font-size: .95rem; font-weight: 800; color: var(--pkd-gold); }
.pkd-form__price span { font-size: .75rem; font-weight: 600; color: var(--pkd-muted); }
/* placeholder-led fields, as the reference's enquiry card has them */
.pkd-in {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 11px 13px;
  border: 1px solid var(--pkd-line);
  border-radius: 6px;
  font: inherit;
  font-size: .88rem;
  color: var(--pkd-ink);
  background: #FFFFFF;
}
.pkd-in::placeholder { color: #9fb0b9; }
.pkd-in:focus { outline: 2px solid var(--pkd-gold); outline-offset: -1px; }
textarea.pkd-in { resize: vertical; }
.pkd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pkd-two .pkd-in { margin-bottom: 10px; }
.pkd-two--phone { grid-template-columns: 62px minmax(0, 1fr); align-items: start; }
.pkd-code {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1px solid var(--pkd-line);
  border-radius: 6px;
  background: var(--pkd-soft);
  font-size: .86rem;
  color: var(--pkd-muted);
}
.pkd-form__btn {
  width: 100%;
  height: 46px;
  margin-top: 4px;
  border: 0;
  border-radius: 8px;
  background: var(--pkd-navy);
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .18s;
}
.pkd-form__btn:hover { background: #24404f; }
.pkd-form__note { margin: 10px 0 0; font-size: .76rem; line-height: 1.5; color: var(--pkd-muted); }

/* ----------------------------- smaller screens ----------------------------- */
@media (max-width: 980px) {
  .pkd-shell { grid-template-columns: minmax(0, 1fr); }
  .pkd-side { position: static; }
  /* the big picture over a strip of tiles */
  .pkd-gal,
  .pkd-gal--slim { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 84px; height: clamp(300px, 56vw, 400px); }
  .pkd-gal--slim .pkd-gal__side,
  .pkd-gal__side { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: column; }
  .pkd-gal__all { right: 6px; bottom: 6px; padding: 5px 8px; font-size: .68rem; }
  .pkd-gal__all svg { display: none; }
}
@media (max-width: 620px) {
  .pkd-inside__cols { grid-template-columns: minmax(0, 1fr); }
  .pkd-day__items li { flex-direction: column; gap: 3px; }
  .pkd-group { flex-direction: column; align-items: flex-start; }
}