@charset "utf-8";
/* ===========================================================================
   Duma — enquiry wizard
   ---------------------------------------------------------------------------
   Built phone-first, because most people who plan a safari on their sofa are
   holding a phone. Every control is at least 44px tall, the next/back bar is
   pinned within thumb reach, and nothing depends on hover.

   The visual language is the site's, quieted down: this is a form, and a form
   that looks like a magazine spread is harder to fill in.
   ========================================================================= */

.wz-body {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--ui);
  overflow-x: hidden;
}

/* --- Header -------------------------------------------------------------- */
.wz-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--gutter);
  background: rgba(244, 239, 230, 0.92);
  backdrop-filter: blur(10px);
  padding-top: max(var(--s-4), env(safe-area-inset-top));
}

.wz-back {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sand-line);
  color: var(--ink-soft);
  flex: none;
}
.wz-back:hover { border-color: var(--ochre); color: var(--ochre); }

.wz-brand {
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1;
  margin-right: auto;
}
.wz-brand em {
  display: block;
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-top: 3px;
}

.wz-help {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--sand-line);
  padding-bottom: 2px;
}
.wz-help:hover { color: var(--ochre); border-color: var(--ochre); }

/* --- Progress ------------------------------------------------------------ */
.wz-progress {
  height: 2px;
  background: var(--sand);
  position: sticky;
  top: 3.75rem;
  z-index: 19;
}
.wz-progress__fill {
  height: 100%;
  width: 14%;
  background: var(--ochre);
  transition: width 0.45s var(--ease-out);
}

/* --- Step ---------------------------------------------------------------- */
.wz {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) var(--gutter) 7rem;
}

.wz-step { display: none; }
.wz-step.is-current {
  display: block;
  animation: wzIn 0.4s var(--ease-out);
}
@keyframes wzIn {
  from { opacity: 0; transform: translateY(0.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .wz-step.is-current { animation: none; }
  .wz-progress__fill { transition: none; }
}

.wz-eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: var(--s-4);
}

.wz-q {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.wz-note {
  margin-top: var(--s-4);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 46ch;
}

.wz-sub {
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wz-group {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}

.wz-counter {
  margin-top: var(--s-5);
  font-size: 0.75rem;
  color: var(--mist);
}

/* --- Choices ------------------------------------------------------------- */
.wz-choices {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.wz-choices--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.wz-choices--row { flex-direction: row; flex-wrap: wrap; }

.wz-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  text-align: left;
  width: 100%;
  min-height: 3.25rem;
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              transform 0.18s var(--ease);
}
.wz-choice:hover { border-color: var(--ochre); }
.wz-choice:active { transform: scale(0.995); }

.wz-choice.is-on {
  border-color: var(--ochre);
  background: #FCF6EC;
  box-shadow: inset 0 0 0 1px var(--ochre);
}

.wz-choice__mark {
  font-family: var(--display);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--mist);
  min-width: 1.5rem;
  padding-top: 2px;
  flex: none;
}
.wz-choice.is-on .wz-choice__mark { color: var(--ochre); }

.wz-choice__body { display: flex; flex-direction: column; gap: 3px; }
.wz-choice__title { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; display: block; }
.wz-choice__sub { font-size: 0.8125rem; color: var(--mist); line-height: 1.45; display: block; }

.wz-choice--compact {
  flex-direction: column;
  gap: 3px;
  padding: var(--s-4);
  min-height: 3rem;
}

.wz-choice--pill {
  width: auto;
  min-height: 2.75rem;
  padding: 0.6875rem 1.125rem;
  border-radius: 100px;
  font-size: 0.875rem;
  align-items: center;
}

/* Suggestion rather than a choice: the answer we would rather they gave. */
.wz-inspire {
  margin-top: var(--s-5);
  width: 100%;
  text-align: left;
  padding: var(--s-5);
  border: 1px dashed var(--ochre);
  border-radius: 3px;
  background: #FCF6EC;
  cursor: pointer;
}
.wz-inspire.is-on { background: var(--ochre); border-style: solid; }
.wz-inspire.is-on .wz-inspire__title,
.wz-inspire.is-on .wz-inspire__sub { color: var(--char, #16110E); }
.wz-inspire__title { display: block; font-weight: 600; font-size: 0.9375rem; }
.wz-inspire__sub { display: block; font-size: 0.8125rem; color: var(--ink-soft); margin-top: 2px; }

/* --- Months -------------------------------------------------------------- */
.wz-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  gap: var(--s-2);
}
.wz-month {
  min-height: 2.75rem;
  border: 1px solid var(--sand-line);
  background: var(--white);
  border-radius: 3px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.wz-month:hover { border-color: var(--ochre); }
.wz-month.is-on { background: var(--ochre); border-color: var(--ochre); color: var(--white); }

/* --- Fields -------------------------------------------------------------- */
.wz-fields {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.wz-field {
  display: block;
  margin-top: var(--s-5);
}
.wz-fields .wz-field { margin-top: 0; }

.wz-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: var(--s-2);
}
.wz-label em { font-style: normal; font-weight: 400; color: var(--mist); }

.wz-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9375rem;
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: 3px;
  /* 16px minimum, or iOS zooms the whole page on focus. */
  font-size: 1rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.wz-input:focus {
  outline: none;
  border-color: var(--ochre);
  box-shadow: 0 0 0 3px rgba(194, 120, 43, 0.14);
}
.wz-input[aria-invalid="true"] { border-color: var(--rust); }
.wz-textarea { min-height: 5.5rem; resize: vertical; line-height: 1.55; }

.wz-hint { display: block; font-size: 0.75rem; color: var(--mist); margin-top: var(--s-2); }
.wz-inline { margin-top: var(--s-4); font-size: 0.8125rem; color: var(--ochre); }

.wz-fielderror {
  display: block;
  font-size: 0.75rem;
  color: var(--rust);
  margin-top: var(--s-2);
}

/* --- Steppers ------------------------------------------------------------ */
.wz-steppers {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.wz-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: 3px;
}
.wz-stepper__label { font-size: 0.9375rem; font-weight: 500; }
.wz-stepper__label em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mist);
  margin-top: 2px;
}
.wz-stepper__controls { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.wz-stepper__controls button {
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--sand-line);
  border-radius: 50%;
  background: var(--white);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.wz-stepper__controls button:hover { border-color: var(--ochre); color: var(--ochre); }
.wz-stepper__controls button:disabled { opacity: 0.35; pointer-events: none; }
.wz-stepper__controls output {
  min-width: 1.75rem;
  text-align: center;
  font-family: var(--display);
  font-size: 1.375rem;
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- Consent ------------------------------------------------------------- */
.wz-consent {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: var(--s-6);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}
.wz-consent input {
  width: 1.25rem; height: 1.25rem;
  margin-top: 1px;
  accent-color: var(--ochre);
  flex: none;
}
.wz-consent a { text-decoration: underline; text-underline-offset: 0.2em; }

.wz-alt {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--sand-line);
  font-size: 0.8125rem;
  color: var(--mist);
}
.wz-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Reference ----------------------------------------------------------- */
.wz-ref {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--sand-line);
  border-radius: 3px;
  background: var(--white);
}
.wz-ref span {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: var(--s-2);
}
.wz-ref strong {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.wz-actions { margin-top: var(--s-6); display: flex; gap: var(--s-4); flex-wrap: wrap; }

.wz-error {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: rgba(154, 59, 31, 0.07);
  border-radius: 3px;
  color: var(--rust);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* --- Footer nav ---------------------------------------------------------- */
.wz-foot {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--gutter);
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  background: rgba(244, 239, 230, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sand-line);
}

.wz-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.875rem;
  padding: 0 1.25rem;
  border-radius: 3px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.wz-nav--back { border-color: var(--sand-line); color: var(--ink-soft); }
.wz-nav--back:hover { border-color: var(--mist); }
.wz-nav--back[hidden] { visibility: hidden; display: inline-flex; }

/*
 * The next button must actually go away on the last two screens.
 *
 * .wz-nav sets display:inline-flex, and a class beats the browser's own
 * [hidden] rule — so setting nextEl.hidden did nothing visible. The button
 * stayed on the thank-you screen, and pressing it advanced past the end into
 * the failure screen, telling a guest whose enquiry had just been saved that
 * something had gone wrong.
 *
 * Unlike the back button this is display:none, not visibility:hidden: there is
 * nothing after it that needs the space held open.
 */
.wz-nav--next[hidden] { display: none; }

.wz-nav--next {
  margin-left: auto;
  background: var(--ochre);
  color: var(--char, #16110E);
  padding: 0 1.5rem;
}
.wz-nav--next:hover { background: var(--ochre-lift); }
.wz-nav--next:disabled { opacity: 0.4; pointer-events: none; }

/* Dots read as position, not decoration: filled means answered. */
.wz-dots { display: flex; gap: 6px; }
.wz-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand-line);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.wz-dots i.is-done { background: var(--ochre); }
.wz-dots i.is-current { background: var(--ink); transform: scale(1.4); }

@media (max-width: 30rem) {
  .wz-dots { display: none; }
  .wz-nav { flex: 1; justify-content: center; }
  .wz-nav--next { margin-left: 0; }
}

/* --- Honeypot ------------------------------------------------------------ */
.wz-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Focus is moved to each question heading when the step changes, so a screen
   reader announces the new question instead of leaving the user stranded at
   the old one. That focus must not paint a ring: it was not the user who
   moved there, and a box drawn around the headline on load reads as a fault.
   Focus rings on things people actually operate are untouched.
   ------------------------------------------------------------------------ */
.wz-q:focus,
.wz-q:focus-visible { outline: none; }


/* ===========================================================================
   Two panels
   ---------------------------------------------------------------------------
   The photograph on the left, full height, with a line over it and the step
   count at its foot. The questions on the right on bone.

   The previous version had this the other way round, and the image was a
   narrow strip cropped so hard that a wide landscape became an unreadable
   band. Given roughly half the window it can be seen properly, which is the
   only reason to include it.
   ========================================================================= */

.wz-split {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* --- The photograph ------------------------------------------------------ */
.wz-aside {
  display: none;
  position: relative;
  flex: 0 0 46%;
  background: var(--char);
  overflow: hidden;
}
@media (min-width: 64rem) {
  .wz-aside { display: block; }
}

.wz-aside__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  /* A slow drift, so a still photograph does not feel frozen while somebody
     reads the question beside it. */
  transform: scale(1.06);
  transition: opacity .8s var(--ease), transform 9s linear;
}
.wz-aside__frame.is-current {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.wz-aside__frame picture { display: block; width: 100%; height: 100%; }

/* The deferred steps paint their photograph onto a span. Without a size it is
   an inline element with nothing to show, so the panel stayed the placeholder
   colour on every step after the first. */
.wz-aside__frame > span {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.wz-aside__frame img { width: 100%; height: 100%; object-fit: cover; }

/* One scrim over all the frames rather than one each, so it does not fade
   in and out with them. */
.wz-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Strong enough to hold bone text over a bright midday photograph — a
       pool in full sun washed the caption out completely at .86/46%. */
    linear-gradient(to top, rgba(15, 12, 10, .92) 0%, rgba(15, 12, 10, .62) 22%,
                    rgba(15, 12, 10, .22) 52%, transparent 76%),
    linear-gradient(to bottom, rgba(15, 12, 10, .34), transparent 26%);
  pointer-events: none;
}

.wz-aside__body {
  position: absolute;
  inset: auto 0 0 0;
  /* Above the scrim. At the same z-index the ::after pseudo-element paints
     after its siblings, so the gradient was laid over the caption and greyed
     it out — the text was never actually faded. */
  z-index: 2;
  padding: clamp(1.75rem, 3vw, 3rem);
  /* Clear of the fixed footer, which was covering the step count entirely —
     the same mistake as the caption in the previous layout. */
  padding-bottom: calc(clamp(1.75rem, 3vw, 3rem) + 4.25rem);
}

.wz-aside__line {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem);
  line-height: 1.12;
  color: var(--bone);
  text-wrap: balance;
  max-width: 18ch;
  transition: opacity .22s var(--ease);
}
.wz-aside__line em {
  font-style: italic;
  color: var(--bone);
}

.wz-aside__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: .9rem;
  border-top: 1px solid rgba(244, 239, 230, .22);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .72);
}
.wz-aside__count em { font-style: normal; color: var(--ochre); }

/* --- The questions ------------------------------------------------------- */
.wz-split > .wz {
  flex: 1;
  min-width: 0;
  max-width: none;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) 7rem;
  display: flex;
  align-items: center;
}
.wz-split .wz-form { width: 100%; }
.wz-split .wz-step { max-width: 32rem; }

@media (max-width: 64rem) {
  .wz-split > .wz { align-items: flex-start; }
}

/* Choices get the tear line, the device the rest of the site uses. */
.wz-choice {
  position: relative;
  overflow: hidden;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
.wz-choice::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--ochre);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s var(--ease-out);
}
.wz-choice:hover::before,
.wz-choice.is-on::before,
.wz-choice:focus-visible::before { transform: scaleY(1); }
.wz-choice:hover { background: rgba(255, 255, 255, .55); }

@media (prefers-reduced-motion: reduce) {
  .wz-aside__frame { transition: opacity .2s linear; transform: none; }
  .wz-choice::before { transition: none; }
}

/* ---------------------------------------------------------------------------
   Choices
   ---------------------------------------------------------------------------
   A roman numeral told you nothing about state — you could not see at a glance
   which option was chosen, only which was first. A tick on the right says it
   plainly, and it is where the eye already ends up after reading the line.
   ------------------------------------------------------------------------ */

/* Scoped away from pills and months.
   A blanket width:100% here stretched every pill to the full column, so the
   three date options stacked as full-width bars instead of sitting in a row —
   the layout that made question five look broken. */
.wz-choice:not(.wz-choice--pill):not(.wz-month) {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  text-align: left;
}
.wz-choice__body { flex: 1; min-width: 0; }

.wz-choice__mark {
  flex: none;
  width: 2rem;
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: .875rem;
  color: var(--mist);
  text-align: center;
  transition: color .2s var(--ease);
}
.wz-choice:hover .wz-choice__mark,
.wz-choice.is-on .wz-choice__mark { color: var(--ochre); }

.wz-choice__tick {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 1px solid var(--sand-line);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease);
}
.wz-choice__tick svg { width: 11px; height: 9px; }

/* Empty circle until chosen, then filled ochre with the tick in bone. Hover
   shows a faint tick so the control reads as selectable before it is used. */
.wz-choice:hover .wz-choice__tick { border-color: var(--ochre); color: rgba(194, 120, 43, .5); }
.wz-choice.is-on .wz-choice__tick,
.wz-choice[aria-pressed="true"] .wz-choice__tick {
  background: var(--ochre);
  border-color: var(--ochre);
  color: var(--bone);
}

/* Multi-select steps use squares, so the two are never confused — one means
   "pick one", the other "pick as many as you like". */
.wz-choices--multi .wz-choice__tick { border-radius: 3px; }

/* --- Thumbnails on the choices ------------------------------------------- */
.wz-choice__thumb {
  flex: none;
  width: 3.25rem;
  height: 2.5rem;
  border-radius: 2px;
  overflow: hidden;
  background: var(--sand);
}
.wz-choice__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Resting slightly quiet so the words lead; full strength on the chosen
     one, the same idea as the menu tiles. */
  filter: saturate(.72);
  transition: filter .3s var(--ease), transform .6s var(--ease-out);
}
.wz-choice:hover .wz-choice__thumb img,
.wz-choice.is-on .wz-choice__thumb img {
  filter: saturate(1.02);
  transform: scale(1.05);
}

/* With a picture present the numeral is redundant clutter. */
.wz-choice:has(.wz-choice__thumb) .wz-choice__mark { display: none; }

/* ---------------------------------------------------------------------------
   Destination cards
   ---------------------------------------------------------------------------
   A photograph across the top, then the name and the line beneath it. The
   picture is what tells you whether Samburu is the dry north or the coast —
   a 36px corner thumbnail could not do that, and a name on its own does not
   either.

   Everything is left-aligned: with two cards side by side, centred text gives
   four ragged edges down the middle of the column.
   ------------------------------------------------------------------------ */
.wz-choices--grid { gap: var(--s-4); }

.wz-choices--grid .wz-choice.wz-choice--compact {
  position: relative;
  /* Block, not flex. The generic rule makes a compact choice a centred flex
     column, and align-items:center was still centring the title even with
     text-align:left on it — a flex item is placed by the container, not by
     its own text alignment. */
  display: block;
  align-items: initial;
  padding: 0;
  overflow: hidden;
  text-align: left;
  min-height: 0;
  transition: border-color .2s var(--ease), transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.wz-choices--grid .wz-choice--compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(22, 17, 14, .4);
}

.wz-choices--grid .wz-choice--compact .wz-choice__thumb {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  overflow: hidden;
  background: var(--sand);
}
.wz-choices--grid .wz-choice--compact .wz-choice__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82);
  transition: filter .3s var(--ease), transform .7s var(--ease-out);
}
.wz-choices--grid .wz-choice--compact:hover .wz-choice__thumb img,
.wz-choices--grid .wz-choice--compact.is-on .wz-choice__thumb img {
  filter: saturate(1.03);
  transform: scale(1.04);
}

.wz-choices--grid .wz-choice--compact .wz-choice__title {
  display: block;
  padding: .75rem .875rem 0;
  font-size: .9375rem;
  font-weight: 500;
  /* Explicit: the base choice rule centres its text, and inheriting from the
     card was not enough to override it. */
  text-align: left;
}
.wz-choices--grid .wz-choice--compact .wz-choice__sub {
  display: block;
  padding: .15rem .875rem .875rem;
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--mist);
  text-align: left;
}

/* The tick sits on the photograph, where there is room for it, rather than
   pushing the text across. */
.wz-choices--grid .wz-choice--compact .wz-choice__tick {
  position: absolute;
  top: .625rem;
  right: .625rem;
  /* Sits above the photograph rather than being clipped by it. */
  z-index: 2;
  background: rgba(22, 17, 14, .45);
  border-color: rgba(244, 239, 230, .55);
  backdrop-filter: blur(4px);
}
.wz-choices--grid .wz-choice--compact.is-on .wz-choice__tick {
  background: var(--ochre);
  border-color: var(--ochre);
}

/* Elsewhere a compact choice keeps its small inline thumbnail. Written last
   in the file, so at equal specificity it was overriding the grid rules above
   and the photographs stayed 36px. */
.wz-choices:not(.wz-choices--grid) .wz-choice--compact .wz-choice__thumb {
  width: 2.75rem;
  height: 2.25rem;
  flex: none;
}

@media (max-width: 30rem) {
  .wz-choice__thumb { width: 2.5rem; height: 2rem; }
}

/* The chosen answer's photograph, layered over the step photograph. Kept as a
   background image so swapping does not disturb the srcset the step frames
   rely on. */
.wz-aside__frame--choice {
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity .55s var(--ease);
  /* Below the scrim, not above it. At z-index 1 it covered the gradient and
     the caption went unreadable the moment somebody chose a bright picture. */
  z-index: 0;
}
.wz-aside__frame--choice.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------------------------------------------------------------------------
   The safari a guest arrived with
   ---------------------------------------------------------------------------
   Restored, and in wizard.css this time. It was written into site.css and then
   lost when an unrelated edit cut too wide a range — so the banner rendered as
   three lines of unstyled text above the first question, which read as broken
   rather than helpful.

   It belongs here because the planner is the only place it appears.
   ------------------------------------------------------------------------ */
.wz-chosen {
  padding: .875rem 1rem;
  margin-bottom: var(--s-5, 1.75rem);
  border-left: 2px solid var(--ochre);
  background: rgba(194, 120, 43, .07);
  border-radius: 0 2px 2px 0;
}
.wz-chosen__label {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: .25rem;
}
.wz-chosen__name {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 1.0625rem;
  line-height: 1.25;
}
.wz-chosen__meta {
  font-size: .8125rem;
  color: var(--mist);
  margin-top: .25rem;
  line-height: 1.5;
}
.wz-chosen__meta a {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* On a narrow screen the banner and the question ran together, so the eyebrow
   read as part of the trip name. */
@media (max-width: 46rem) {
  .wz-chosen { margin-bottom: 1.25rem; }
}

/* --- "Something else" ------------------------------------------------------
   Free text beside a set of choices. Deliberately quiet: it is an escape hatch
   for the guest whose answer is not on the list, not a competing option. */
.wz-other { margin-top: 1rem; }
.wz-other__label {
  display: block;
  font-size: .8125rem;
  color: var(--mist);
  line-height: 1.5;
  margin-bottom: .4rem;
  max-width: 52ch;
}
.wz-other__input {
  width: 100%;
  max-width: 34rem;
  padding: .75rem .875rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--sand-line);
  border-radius: 2px;
  transition: border-color .15s var(--ease);
}
.wz-other__input::placeholder { color: var(--mist); }
.wz-other__input:focus { outline: none; border-color: var(--ochre); }


/* A hidden choice grid must actually be hidden.
   .wz-choices sets display:grid, which beats the [hidden] attribute — the same
   fault the nav buttons had. Without this the collapsed step shows its options
   anyway and the question is asked twice. */
.wz-choices[hidden],
.wz-group[hidden],
.wz-inspire[hidden] { display: none !important; }