/* ==========================================================================
   GRANDTOUR (PVT) LTD — COMPONENTS
   Buttons · badges · cards · forms · accordion · carousel · marquee · stats
   Header and footer live here too, built in phase 2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS
   Flat fills, no gradients, no coloured glow. Pill shape retained.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-4) var(--sp-7);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn__icon { width: 18px; height: 18px; flex: none; transition: transform var(--t-base) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold); color: var(--ocean-dark); }
.btn--gold:hover { background: var(--gold-dark); }

/* Base is cinnamon-DARK, not cinnamon: cream on #C2562D measures 4.18:1, which
   fails AA for 600-weight text at this size. On #9C4220 it is 6.07:1. */
.btn--cinnamon { background: var(--cinnamon-dark); color: var(--cream); }
.btn--cinnamon:hover { background: var(--cinnamon-deep); }

.btn--solid-dark { background: var(--ocean-dark); color: var(--cream); }
.btn--solid-dark:hover { background: var(--ocean); }

.btn--outline { border-color: var(--field-line); color: var(--ocean-dark); }
.btn--outline:hover { border-color: var(--ocean-dark); background: var(--ocean-dark); color: var(--cream); }

.btn--ghost-light { border-color: var(--field-line-light); color: var(--cream); }
.btn--ghost-light:hover { border-color: var(--gold); color: var(--gold); }

.btn--sm { min-height: 44px; padding: var(--sp-3) var(--sp-5); font-size: var(--step--1); }
.btn--lg { min-height: 58px; padding: var(--sp-5) var(--sp-8); font-size: var(--step-1); }
.btn--block { width: 100%; }

/* Text link with a wiping underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--cinnamon-dark);
  background-image: linear-gradient(var(--cinnamon), var(--cinnamon));
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-base) var(--ease);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1.5px; }
.on-dark .link { color: var(--gold); background-image: linear-gradient(var(--gold), var(--gold)); }

/* --------------------------------------------------------------------------
   2. BADGES, PILLS, TAGS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge--gold { background: var(--gold); color: var(--ocean-dark); }
.badge--sand { background: var(--sand); color: var(--cinnamon-dark); }
.badge--unesco { background: var(--ocean-dark); color: var(--gold); }

.tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ocean-dark);
}

/* Trust chips — hero and header */
/* The global `ul[class], ol[class] { margin: 0 }` reset outranks
   `.stack > * + *`, so a chips row sitting under a button got no flow
   spacing at all and sat flush against it. `ul.chips` matches the reset's
   specificity and comes later, so it wins; --flow-space lets a caller
   tighten it (the blog index wants a close one) without an inline style.

   The column gap is deliberately smaller than the row gap: the three trust
   chips should hold ONE line, and at the narrowest two-column hero the left
   column is only 487px against 451px of content. Row gap only applies once
   they have wrapped, which below the tablet breakpoint they should. */
ul.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--flow-space, var(--sp-6));
}
.chips li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;   /* never break a label across two lines */
}
.chips svg { width: 18px; height: 18px; flex: none; color: var(--gold); }

/* --------------------------------------------------------------------------
   3. CARDS
   Hairline border + one shadow. Gold top rule grows on hover.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
  z-index: 2;
}
.card:hover,
.card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-raised); border-color: transparent; }
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }

.card__media { position: relative; overflow: hidden; background: var(--sand); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }

/* "Relax at the beach" is 16:9 with its subject in the left third, so the
   default centre crop in a square card frame cuts the woman out and leaves
   an empty stretch of sand. Shift the crop window left so she and the ocean
   both make it in. Keyed to the file, so it follows the image wherever it is
   used — and stops applying by itself if that image is ever replaced. */
.card__media img[src*="sightseeing-relaxation"] { object-position: 20% center; }
.card:hover .card__media img { transform: scale(1.04); }
.card__media .badge { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; }

.card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1; }
.card__body .h3 { margin-block: var(--sp-1) 0; }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* The price is the line a reader scans across a row of cards, so it has to
   sit at one height no matter how many lines each description runs to.
   Moving the auto margin onto the price puts the slack ABOVE it instead of
   between it and the button, which lands every price in the row level.
   A card with no price keeps the rule on .card__foot, and the adjacent
   selector stops the two auto margins splitting the free space between
   them — which would misalign both. */
.card__body .price { margin-top: auto; }
.price + .card__foot { margin-top: 0; }

/* Whole-card link without nesting interactive elements */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Price */
.price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--cinnamon-dark);
  line-height: 1;
}
.price__from {
  display: inline-block;
  margin-right: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: middle;
}
.price__unit { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: var(--ink-muted); }

/* Trust card — registration / licence */
.trust-card { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.trust-card--accent { background: var(--ocean-dark); border-color: transparent; color: var(--on-dark); }
.trust-card--accent .h3 { color: var(--cream); }
.trust-card--accent p { color: var(--on-dark-soft); }
.trust-card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--sand);
  color: var(--cinnamon-dark);
}
.trust-card--accent .trust-card__icon { background: rgba(224, 169, 76, 0.14); color: var(--gold); }
.trust-card__icon svg { width: 26px; height: 26px; }
.trust-card__number {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cinnamon-dark);
  margin-block: var(--sp-2) var(--sp-3);
}
.trust-card--accent .trust-card__number { color: var(--gold); }

/* Review card */
.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-6);
  background: var(--sand);
  border-radius: var(--radius-lg);
}
.review__head { display: flex; align-items: center; gap: var(--sp-3); }
.review__avatar {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--ocean-dark);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
}
.review__name { font-family: var(--font-display); font-weight: 600; color: var(--ocean-dark); }
.review__source { margin-left: auto; width: 20px; height: 20px; flex: none; }
/* Tripadvisor is named in words rather than redrawn as its trademarked owl. */
.review__source--word {
  width: auto; height: auto;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap;
}
.review__stars { color: var(--gold); letter-spacing: 3px; }
.review__text { color: var(--ink-soft); }
.review__text--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rating summary */
.rating { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rating__score { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; color: var(--ocean-dark); }
.rating__stars { color: var(--gold); letter-spacing: 2px; font-size: var(--step-1); }
.rating__count { color: var(--ink-muted); font-size: var(--step--1); }

/* The rating line is the one part of a reviews block that carries its own
   ink colours, so it needs telling when the section sits on a dark band.
   Cream is 15.9:1 and on-dark-muted 8.9:1 against ocean-dark. */
.on-dark .rating__score { color: var(--cream); }
.on-dark .rating__count { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   4. STATS
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-5); }
.stat dt { margin: 0; }
.stat__num { font-family: var(--font-display); font-size: var(--step-5); font-weight: 600; color: var(--gold); line-height: 1; }
.stat dd { margin: var(--sp-2) 0 0; color: var(--on-dark-muted); font-size: var(--step--1); letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   5. FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--step--1); font-weight: 600; color: var(--ocean-dark); }
.field__hint { font-size: var(--step--1); color: var(--ink-muted); }

/* Searchable country picker. js/inquiry.js upgrades an input[list] into
   this; without JavaScript the native datalist is used and none of these
   rules have anything to match. */
.combo { position: relative; }
.combo__toggle {
  position: absolute; inset-block: 1px; inset-inline-end: 1px;
  display: grid; place-items: center;
  width: 42px;
  border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.combo__toggle svg { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
.combo__toggle:hover { color: var(--ocean-dark); }
.combo input[aria-expanded="true"] + .combo__toggle svg { transform: rotate(180deg); }
/* Room for the chevron so a long country name never runs under it. */
.combo .input { padding-inline-end: 46px; }

.combo__list {
  position: absolute; z-index: 40;
  inset-inline: 0; top: calc(100% + 4px);
  max-height: 17rem; overflow-y: auto;
  margin: 0; padding: var(--sp-2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
}
.combo__option {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  cursor: pointer;
}
.combo__option:hover,
.combo__option[aria-selected="true"] { background: var(--ocean-dark); color: var(--cream); }
.combo__empty { padding: var(--sp-2) var(--sp-3); font-size: var(--step--1); color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .combo__toggle svg { transition: none; } }

/* A dialling-code select sitting flush against its number input. The code
   column is sized to hold the longest label at a glance while leaving the
   number the room it needs; both stack on a narrow screen. */
.input-pair { display: flex; gap: var(--sp-2); align-items: stretch; }
.input-pair__code { flex: 0 1 11.5rem; min-width: 0; }
.input-pair__number { flex: 1 1 8rem; min-width: 0; }
/* Below roughly a phone width the two together leave the number about
   130px, which is not enough to read a number back. Stack them instead. */
@media (max-width: 460px) {
  .input-pair { flex-wrap: wrap; }
  .input-pair__code, .input-pair__number { flex: 1 1 100%; }
}
.field__req { color: var(--cinnamon); margin-left: 2px; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-muted); }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--leaf); }
/* A 45%-opacity gold glow on a white field is about 1.3:1 — pretty, and
   invisible to anyone who needs it. These take the two-tone ring from
   main.css and only darken the border on top of it. */
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--ocean);
}
.textarea { min-height: 150px; resize: vertical; padding-top: var(--sp-4); }

.select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%235f6d66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 18px;
}

/* Checkbox / radio rendered as selectable chips */
.choice-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Full-sentence answers do not fit a pill. Stacked rows, left aligned, so
   the eye runs down one column instead of hunting across wrapped chips. */
.choice-grid--stack { flex-direction: column; flex-wrap: nowrap; gap: var(--sp-2); }
.choice-grid--stack .choice span {
  place-items: center start;
  text-align: left;
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  line-height: 1.45;
}
.choice { position: relative; }
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.choice span {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--step--1);
  font-weight: 500;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.choice input:hover + span { border-color: var(--leaf); }
.choice input:checked + span {
  background: var(--ocean-dark);
  border-color: var(--ocean-dark);
  color: var(--cream);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ocean-dark);
}

/* Consent checkbox */
.consent { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--step--1); color: var(--ink-soft); }
.consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--cinnamon); flex: none; }

/* Validation + status */
.field__error { font-size: var(--step--1); color: var(--cinnamon-dark); font-weight: 600; }
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--cinnamon); }

.form-status { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm); font-weight: 500; }
.form-status--ok { background: rgba(81, 107, 83, 0.12); color: #33502f; }
.form-status--err { background: rgba(194, 86, 45, 0.12); color: var(--cinnamon-dark); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Fieldset reset */
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset__legend { font-size: var(--step--1); font-weight: 600; color: var(--ocean-dark); margin-bottom: var(--sp-3); padding: 0; }

/* --------------------------------------------------------------------------
   6. ACCORDION
   grid-template-rows transition — no max-height clipping at any length.
   -------------------------------------------------------------------------- */
.accordion__item { border-bottom: 1px solid var(--line-strong); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5) var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  text-align: left;
  color: var(--ocean-dark);
  transition: color var(--t-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--cinnamon-dark); }
.accordion__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--sand-dark);
  color: var(--cinnamon-dark);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.accordion__icon svg { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--cinnamon); color: var(--cream); }
.accordion__trigger[aria-expanded="true"] .accordion__icon svg { transform: rotate(180deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}
.accordion__panel > div { overflow: hidden; }

/* The trigger is wrapped in a heading for correct document outline, so the panel
   is a sibling of the <h3> — not of the button. Keying off a data attribute on
   the item works regardless of that nesting, and avoids depending on :has(). */
.accordion__item[data-open="true"] .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p { padding-bottom: var(--sp-5); padding-right: var(--sp-8); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   7. CAROUSEL — scroll-snap, works without JS
   -------------------------------------------------------------------------- */
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(320px, 82%), 1fr);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }

/* The visible dot stays small; the hit area is a full 24×24 so the control
   meets WCAG 2.2 target size without making the design look clumsy. */
.dots { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-5); }
.dots button {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  padding: 0;
  background: none;
  border-radius: 50%;
}
.dots button::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sand-dark);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dots button[aria-selected="true"]::before { background: var(--cinnamon); transform: scale(1.3); }
.dots button:hover::before { background: var(--leaf); }
.section--ocean .dots button::before { background: rgba(251, 246, 236, 0.3); }
.section--ocean .dots button[aria-selected="true"]::before { background: var(--gold); }

/* --------------------------------------------------------------------------
   8. MARQUEE — memories strip, 3:2 landscape tiles
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__tile {
  width: 340px;
  aspect-ratio: 3 / 2;
  flex: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ocean);
}
.marquee__tile img { width: 100%; height: 100%; object-fit: cover; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scroll-snap-type: x mandatory; }
  .marquee__track { animation: none; }
  .marquee__tile { scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   9. PARTNER LOGO STRIP
   The supplied PNG carries ~60% empty canvas — cropped, never scaled.
   -------------------------------------------------------------------------- */
.partners { text-align: center; }
.partners__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-5);
}
.partners__strip { overflow: hidden; border-radius: var(--radius-sm); }
.partners__strip img {
  width: 100%;
  aspect-ratio: 1920 / 300;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   10. TABLES — inclusions / exclusions, tour facts
   -------------------------------------------------------------------------- */
.facts { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.facts__row { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.facts__row + .facts__row { border-top: 1px solid var(--line); }
.facts__row dt { font-weight: 600; color: var(--ocean-dark); }
.facts__row dd { margin: 0; color: var(--ink-soft); }

.ticklist li { display: flex; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-2); color: var(--ink-soft); }
.ticklist svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.ticklist--yes svg { color: var(--leaf); }
.ticklist--no svg { color: var(--cinnamon); }

/* ==========================================================================
   11. HERO
   Dark ocean gradient with a contained portrait — the composition from the
   reference design. Not full-bleed photography: the supplied library caps at
   1280px wide, which would look soft stretched across a desktop viewport.
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(60% 55% at 82% 18%, rgba(224, 169, 76, 0.16), transparent 60%),
    radial-gradient(70% 60% at 12% 90%, rgba(194, 86, 45, 0.16), transparent 60%),
    linear-gradient(160deg, var(--ocean-dark), var(--ocean) 70%);
  padding-top: var(--header-h);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero__title { font-size: var(--step-6); }
.hero__lead { max-width: 46ch; }

.hero__visual { position: relative; display: grid; place-items: end center; padding-bottom: var(--sp-8); }
.hero__visual img {
  width: min(420px, 100%);
  height: auto;
  /* Enlarged on wide screens only — see the min-width: 1200px block in
     responsive.css for why it cannot simply grow here. */
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.38));
}

/* The one floating element. The reference stacked four competing devices here. */
/* Pinned to the foot of the visual column so it reads as a caption under the
   portrait rather than covering her hands. */
.hero__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  max-width: 260px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  background: rgba(9, 31, 28, 0.72);
  border: 1px solid var(--line-light);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero__badge strong {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold);
  line-height: 1;
}
/* Same gold as the 5.0 beside them. */
.hero__badge-stars { width: 92px; height: auto; flex: none; color: var(--gold); }

/* The caption takes a row of its own. Left inline, the stars and the 5.0
   would squeeze it into roughly 80px inside a 260px badge and it would wrap
   to five lines. */
.hero__badge span {
  flex: 1 0 100%;
  font-size: var(--step--1);
  color: var(--on-dark-soft);
  line-height: 1.4;
}

/* Feature strip along the bottom of the hero */
.feature-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-light);
  background: rgba(9, 31, 28, 0.55);
}
.feature-strip li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) clamp(1rem, 2.4vw, 2rem);
  border-right: 1px solid rgba(251, 246, 236, 0.1);
}
.feature-strip li:last-child { border-right: 0; }
.feature-strip svg { width: 26px; height: 26px; flex: none; color: var(--gold); }
.feature-strip strong { display: block; color: var(--cream); font-size: var(--step--1); font-weight: 600; }
.feature-strip span { display: block; color: var(--on-dark-muted); font-size: 0.78rem; margin-top: 2px; }

/* ==========================================================================
   12. DESTINATION MOSAIC
   ========================================================================== */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
.mosaic > :first-child .card__media { aspect-ratio: 16 / 11; }
.mosaic > :first-child .h3 { font-size: var(--step-3); }

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
/* The reference ran cinnamon-dark → ocean-dark on this band, which put the gold
   eyebrow on #9C4220 at 3.10:1 — below AA. Ocean is the base instead, and the
   cinnamon warmth moves to a bottom-right radial, well clear of the text.
   Gold now measures 5.86:1 and the lead 9.02:1. */
.cta-band {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  text-align: center;
  background:
    radial-gradient(52% 58% at 50% 0%, rgba(224, 169, 76, 0.14), transparent 66%),
    radial-gradient(62% 72% at 94% 112%, rgba(194, 86, 45, 0.55), transparent 62%),
    linear-gradient(158deg, var(--ocean-dark), var(--ocean) 88%);
  overflow: hidden;
}
.cta-band__inner { position: relative; max-width: 44rem; margin-inline: auto; }
.cta-band .lead { margin-inline: auto; }

/* ==========================================================================
   14. QUICK ENQUIRY — the three fields the live homepage asks for
   ========================================================================== */
.quick-form { display: grid; gap: var(--sp-4); }
.quick-form__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.quick-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

/* ==========================================================================
   15. PAYMENT STRIP
   ========================================================================== */
.payment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: var(--sand);
  border-radius: var(--radius-md);
}
.payment__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--ocean-dark); margin-bottom: var(--sp-2); }
.payment__strip { background: #fff; border-radius: var(--radius-sm); padding: var(--sp-3); }
.payment__strip img { width: 100%; height: auto; }

/* ==========================================================================
   16. VERIFY BAR
   ========================================================================== */
.verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--sand);
  border-radius: var(--radius-md);
}
.verify__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--ocean-dark); margin-bottom: 2px; }