/* ==========================================================================
   DazlinQ Travel — Page sections: hero, deal teaser, gallery, CTA
   ========================================================================== */

/* ==========================================================================
   HERO

   Uses `svh` (small viewport height) rather than `vh`. On iOS Safari, `vh`
   includes the browser chrome that disappears on scroll, so a 100vh hero is
   taller than the visible screen and its subject sits below the fold —
   one of the causes of "images get cut short on different screens".

   There is no scrim any more. The hero is the photograph, full strength —
   the client asked for the overlay, the headline and both buttons to go. The
   only things over the image are the slide dots and the tagline beneath them
   (see .hero__foot), and each carries its own legibility.
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(33rem, 84svh, 50rem);
  overflow: hidden;
  background: var(--off-white-deep);
}

/* ---- Slideshow -------------------------------------------------------
   All slides are stacked in the same grid cell and cross-faded with opacity.
   Nothing moves and nothing reflows, so there is no layout shift and no
   scrollbar flicker as slides change.

   The images are ART-DIRECTED, not merely scaled: a 2:1 crop is served to
   desktop and a 3:4 crop to phones (see art_picture() in helpers.php). The
   object-fit below only absorbs the small remainder between the crop ratio
   and the actual hero box, so a subject can never be cut out of frame. */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;          /* every slide occupies the same cell */
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  will-change: opacity;
}
/* PHP marks slide 1 active in the markup, so with JavaScript off the hero is
   simply a single still photograph rather than a blank box. */
.hero__slide.is-active { opacity: 1; }

.hero__slide picture,
.hero__slide img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__slide img {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

/* A slow, barely-there zoom on the visible slide keeps a still photograph
   from feeling like a stalled page. Removed entirely under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__slide.is-active img { animation: heroDrift 14s ease-out forwards; }
  @keyframes heroDrift {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }
}

/* ---- Slide dots + tagline --------------------------------------------
   The hero is now the photograph and nothing else — no veil, no headline,
   no buttons. Only this bottom stack sits over the image: the slide dots,
   and the tagline directly beneath them. */
.hero__foot {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  transform: translateX(-50%);
  width: 100%;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
}

.hero__dots {
  display: flex;
  gap: .55rem;
  padding: .5rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero__dot {
  position: relative;
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(58, 42, 48, .28);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}
.hero__dot:hover { background: rgba(58, 42, 48, .45); }
.hero__dot.is-active { background: var(--pink); width: 46px; }

/* The hit target is 4px tall for looks but 100% for fingers. */
.hero__dot::before {
  content: "";
  position: absolute;
  inset-block: -14px;
  width: 34px;
}

/* ---- Hero tagline ----------------------------------------------------
   The full-frame scrim is gone at the client's request, so this line has to
   carry itself over whatever photograph is behind it — and she will swap
   these photos for her own. A halo that tracks the letterforms does that
   without veiling any of the picture: a tight opaque core does the real
   legibility work, then two wider, softer washes blend it out so it never
   reads as an outline. Dark rather than white, because the slides are bright
   and a white glow would disappear into the sky in most of them. */
.hero__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, .95rem + 1.7vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  /* A centred flex child sizes to max-content, so without this the line runs
     off both edges of a phone instead of wrapping. */
  width: 100%;
  margin: 0;
  padding-bottom: .08em;       /* room for the italic descenders */
  text-shadow:
    0 0 4px  rgba(38, 26, 31, .55),
    0 2px 10px rgba(38, 26, 31, .45),
    0 0 26px rgba(38, 26, 31, .35);
}

@media (max-width: 820px) {
  .hero { min-height: clamp(30rem, 78svh, 40rem); }
}

/* Short landscape phones: never let the hero exceed the screen */
@media (max-height: 460px) and (orientation: landscape) {
  .hero { min-height: 30rem; }
}

/* ==========================================================================
   WELCOME
   ========================================================================== */
.welcome__script {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
  color: var(--pink-text);
  line-height: 1.3;
  margin-bottom: .35rem;
}

/* ==========================================================================
   SIGNATURE FEATURE — upright photo beside copy
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 2rem; }
}

.feature__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--pink-mist);
}
/* On phones the upright crop would eat the whole screen, so it relaxes to
   a shape that leaves the copy visible without scrolling past a wall. */
@media (max-width: 900px) {
  .feature__media { aspect-ratio: 4 / 3; max-height: 26rem; }
}

.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

/* ==========================================================================
   DEAL OF THE MONTH — teaser
   No countdown timer, no fee, no urgency framing.
   ========================================================================== */
.deal {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
@media (max-width: 860px) { .deal { grid-template-columns: 1fr; } }

.deal__media { position: relative; min-height: 22rem; }
@media (max-width: 860px) { .deal__media { min-height: 0; aspect-ratio: 3 / 2; } }

.deal__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}
@media (max-width: 860px) { .deal__media img { position: static; } }

.deal__badge {
  position: absolute;
  top: 1.15rem; left: 1.15rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255, 255, 255, .96);
  color: var(--pink-text);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
}

.deal__body {
  padding: clamp(1.75rem, 3.6vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.deal__where {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .7rem;
}
.deal__where svg { width: 15px; height: 15px; stroke: var(--gold); fill: none;
                   stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.deal__title { font-size: var(--t-h2); margin-bottom: .85rem; color: var(--pink-text); }
.deal__text  { font-size: var(--t-small); line-height: 1.82; color: var(--ink); }

.deal__includes {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 1.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.deal__includes li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--pink-mist);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .42rem .95rem;
}
.deal__includes svg { width: 13px; height: 13px; stroke: var(--pink); fill: none;
                      stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.deal__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.1rem);
}
@media (max-width: 940px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: var(--pink-mist);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
}

.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transition: transform .5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); }

.gallery__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.9rem .9rem .8rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: #fff;
  text-align: left;
  /* A gentle wash only under the caption — enough for contrast, not enough to
     turn the tile into a dark card. */
  background: linear-gradient(to top, rgba(58, 42, 48, .72), rgba(58, 42, 48, 0));
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* --- Lightbox --------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(58, 42, 48, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox[open], .lightbox.is-open { display: grid; }

.lightbox__img {
  max-width: min(100%, 1100px);
  max-height: 82vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
  object-fit: contain;
}

.lightbox__cap {
  margin-top: 1rem;
  text-align: center;
  color: #fff;
  font-size: var(--t-small);
  letter-spacing: .06em;
}

.lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.lightbox__close:hover { background: #fff; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 1.4rem;
  cursor: pointer;
}
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 620px) { .lightbox__nav { display: none; } }

/* ==========================================================================
   TESTIMONIALS
   Markup ships now; the section only renders when real testimonials exist.
   The five fabricated quotes on the old site are gone and are NOT replaced
   with placeholders — an empty section is honest, a fake one is not.
   ========================================================================== */
.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 2.8vw, 2.25rem);
  box-shadow: var(--sh-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.quote__stars { color: var(--gold-text); font-size: .95rem; letter-spacing: .14em; margin-bottom: .9rem; }
.quote__text {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 1.4rem;
  flex: 1;
}
.quote__who { display: flex; align-items: center; gap: .8rem; }
.quote__avatar {
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--pink-mist);
  color: var(--pink);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.quote__name { font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.quote__trip { font-size: .74rem; color: var(--ink); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta {
  background: linear-gradient(135deg, var(--off-white-deep) 0%, var(--off-white) 55%, var(--white) 100%);
  border-block: 1px solid var(--line-gold);
  text-align: center;
}
.cta__script {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  color: var(--pink-text);
  margin-bottom: .2rem;
}
.cta__title { margin-bottom: 1rem; }
.cta__text { margin: 0 auto 2rem; max-width: 46ch; color: var(--ink); font-size: var(--t-lead); }

/* ==========================================================================
   PAGE HEADER — interior pages
   Typographic, on the brand gradient. Deliberately not a photo banner: the
   old site laid titles over photos, which produced two of the client's
   complaints at once ("text blends with the image", "image gets cut off").
   ========================================================================== */
.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--off-white-deep) 0%, var(--off-white) 48%, var(--cream) 100%);
  border-bottom: 1px solid var(--line-gold);
  padding-block: clamp(2.75rem, 6vw, 5rem);
}

/* ---- Header banner photo ---------------------------------------------
   The client asked for a photo behind each page title. The original brief
   ruled that out because the old site laid titles straight onto photos and
   she could not read them. So the photo goes in, but under a wash that is
   near-opaque exactly where the words are and thins out across the frame —
   the title still sits on a flat, light surface, and the picture is only
   ever a backdrop. The banners will be swapped for her own photos from the
   admin, so this cannot depend on any one image being pale in the corner. */
.pagehead__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pagehead__media picture,
.pagehead__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

.pagehead__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(95deg,
      rgba(255, 255, 255, .97)  0%,
      rgba(255, 255, 255, .94) 34%,
      rgba(255, 255, 255, .78) 58%,
      rgba(255, 255, 255, .55) 78%,
      rgba(255, 255, 255, .42) 100%),
    linear-gradient(180deg,
      rgba(254, 253, 252, .30) 0%,
      rgba(254, 253, 252, 0)  55%);
}

.pagehead > .container { position: relative; z-index: 2; }

/* Phones: the copy runs the full width, so a side-weighted wash leaves the
   last words on bare photo. Flatten it out instead. */
@media (max-width: 760px) {
  .pagehead__wash {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .93) 60%,
      rgba(255, 255, 255, .88) 100%);
  }
}
/* Page titles are pink. --pink rather than --pink-text because these are
   display sizes, where the brand pink is the right one and clears the 3:1
   large-text minimum comfortably. */
.pagehead h1 { max-width: 20ch; color: var(--pink); }
.pagehead .lead { margin-top: .25rem; }

/* ==========================================================================
   SERVICE LIST — Services page
   ========================================================================== */
.svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.svc__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.svc__item:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--pink-soft); }
.svc__num {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold-text);
  margin-bottom: .7rem;
}
.svc__item h3 { margin-bottom: .5rem; }
.svc__item p { font-size: var(--t-small); line-height: 1.78; color: var(--ink); }

/* Split: photo beside copy, alternating sides */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--flip .split__media { order: 2; }
@media (max-width: 900px) { .split--flip .split__media { order: 0; } }

.split__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--pink-mist);
}
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

/* ==========================================================================
   FILTER BAR — Destinations
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: .55rem 1.1rem;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.filter:hover { border-color: var(--pink-soft); color: var(--pink-text); }
.filter[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: #fff; }

/* ==========================================================================
   DESTINATION CARDS
   ========================================================================== */
.dests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.dest {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dest:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.dest[hidden] { display: none; }

.dest__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pink-mist); }
.dest__media img { width: 100%; height: 100%; object-fit: cover;
                   object-position: var(--fx, 50%) var(--fy, 50%); }

.dest__flag {
  position: absolute;
  top: .7rem; left: .7rem;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--r-pill);
  padding: .3rem .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  box-shadow: var(--sh-sm);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
/* Badge icon: emoji, or the SVG flag. Sized once here so both line up with
   the label whichever one is used. */
.badge-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  line-height: 1;
  flex: none;
}
.badge-ico--flag { width: 1.15em; }
.badge-ico--flag svg {
  width: 100%;
  height: auto;
  border-radius: 1.5px;
  /* A white flag on a white chip needs an edge to read as an object. */
  box-shadow: 0 0 0 .5px rgba(58, 42, 48, .22);
}

.dest__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
/* Pink title, black body, gold link. --pink-text and --gold-text (not --pink
   and --gold) because both sit at body sizes here, where the brighter tones
   drop under AA — the gold in particular is only 2.8:1 and unreadable. */
.dest__body h3 { margin-bottom: .3rem; color: var(--pink-text); }
.dest__region {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .6rem;
}
.dest__body p { font-size: var(--t-small); line-height: 1.72; color: var(--ink); flex: 1; }
.dest__link {
  margin-top: 1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
}
.dest__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
                  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
                  transition: transform var(--dur) var(--ease); }
/* Holds the gold on hover — without this the global link-hover rule repaints
   it pink. The moving arrow is the hover affordance. */
.dest__link:hover { color: var(--gold-text); }
.dest__link:hover svg { transform: translateX(3px); }

.dests__empty { padding: 2.5rem 0; color: var(--ink); }

/* ==========================================================================
   RESOURCE LINKS
   ========================================================================== */
.notice {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: var(--pink-mist);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pink);
  border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
/* icon() emits a bare <svg viewBox="0 0 24 24"> with no width, height or class,
   so it MUST be sized by whatever contains it. Without this rule it stretched
   to fill the flex line — 355px square, and filled solid black because the
   stroke styling was never applied either. */
.notice svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: .15rem;
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice p { font-size: var(--t-small); line-height: 1.75; color: var(--ink); margin: 0; }
.notice strong { font-weight: 600; }

.reslist { display: grid; gap: clamp(1rem, 2vw, 1.4rem);
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.res {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
}
.res h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.res p { font-size: var(--t-small); line-height: 1.72; color: var(--ink); flex: 1; }
.res a {
  margin-top: .9rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-text);
  align-self: flex-start;
}

/* ==========================================================================
   DEAL GRID — Deal of the Month page
   ========================================================================== */
/* ONE ROW PER CATEGORY.
   `grid-auto-flow: column` puts every deal in a category on a single row, so
   three sit side by side and fill the width evenly.

   The `minmax(16rem, 1fr)` is what makes it safe when there are more than
   three: up to the point where they fit, the cards share the row equally;
   past it they stop shrinking and the row scrolls sideways instead of
   squeezing the cards down to something unreadable. So four or six deals
   still read as one row rather than collapsing into a broken grid. */
.deals {
  display: grid;
  grid-auto-flow: column;
  /* The floor scales with the viewport so the common case — three deals —
     always fits without scrolling, on a tablet as well as a desktop. A fixed
     16rem floor was marginally too wide at ~900px and pushed three cards into
     a scroll they did not need. */
  grid-auto-columns: minmax(clamp(13rem, 22vw, 16rem), 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* overflow clips box-shadows on the cross axis, so give them room back */
  padding-block: .5rem;
  margin-block: -.5rem;
  scrollbar-width: thin;
}
.deals > * { scroll-snap-align: start; }

/* Phones: back to a single stacked column, as before. A sideways-scrolling
   row of full-width cards is worse on a small screen than simply scrolling
   down the page. */
@media (max-width: 760px) {
  .deals {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-block: 0;
    margin-block: 0;
  }
}
.dealcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dealcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.dealcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--pink-mist);
  container-type: inline-size;
}
.dealcard__media img { width: 100%; height: 100%; object-fit: cover;
                       object-position: var(--fx, 50%) var(--fy, 50%); }
/* Badge row across the top of the photo. Flex + wrap so the client badge and
   the category tag can never overlap on a narrow card — they stack instead. */
.dealcard__badges {
  position: absolute;
  inset: .8rem .8rem auto .8rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .4rem;
  pointer-events: none;
}

.dealcard__tag {
  background: rgba(255, 255, 255, .96);
  color: var(--pink-text);
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .7rem; border-radius: var(--r-pill); box-shadow: var(--sh-sm);
}

/* CATEGORY TAG — the label does the work; the colour only reinforces it, so
   nothing depends on telling two similar hues apart. Each background is dark
   enough to carry white text at this size (all pass WCAG AA). */
.dealcard__cat {
  margin-left: auto;
  color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .68rem; border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  white-space: nowrap;
}
/* Below ~250px the two badges cannot sit side by side. Left to itself flex
   would wrap the second one into a ragged half-row; a container query turns
   that into a deliberate left-aligned stack instead. Queries the CARD, not
   the viewport, so it stays right however many deals are in the row. */
@container (max-width: 250px) {
  .dealcard__badges { flex-direction: column; align-items: flex-start; }
  .dealcard__cat { margin-left: 0; }
}

.dealcard--international .dealcard__cat { background: var(--pink); }
.dealcard--domestic      .dealcard__cat { background: var(--gold-text); }
.dealcard--cruise        .dealcard__cat { background: var(--berry); }

/* CARD BORDER — same three colours, at low alpha so the row reads as a set
   rather than three competing outlines. */
.dealcard--international { border-color: var(--pink-line); }
.dealcard--domestic      { border-color: var(--gold-line); }
.dealcard--cruise        { border-color: var(--berry-line); }

/* No photo: the badges sit inline above the copy instead of floating over an
   image that is not there. */
.dealcard__cat--inline,
.dealcard__tag--inline {
  position: static;
  align-self: flex-start;
  margin: 0 .4rem .8rem 0;
  display: inline-block;
}
.dealcard--noimage .dealcard__body { padding-top: 1.4rem; }
.dealcard__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.dealcard__body h3 { margin-bottom: .5rem; }
.dealcard__body > p { font-size: var(--t-small); line-height: 1.75; color: var(--ink); flex: 1; }
.dealcard__inc { list-style: none; padding: 0; margin: 1rem 0 1.25rem;
                 display: flex; flex-wrap: wrap; gap: .4rem; }
.dealcard__inc li {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; color: var(--ink);
  background: var(--pink-mist); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .35rem .8rem;
}
.dealcard__inc svg { width: 12px; height: 12px; fill: none; stroke: var(--pink);
                     stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* PRICE — optional, so it only ever appears when the client has entered one.
   Set in the display serif at a size that reads as a headline figure without
   shouting, and in ink rather than pink so it does not compete with the CTA
   sitting directly beneath it. */
.dealcard__price,
.deal__price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.deal__price { font-size: 1.6rem; }


/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__body p { font-size: 1rem; line-height: 1.9; color: var(--ink); }
.about__body p + p { margin-top: 1.1rem; }

/* ==========================================================================
   FORMS — consultation
   ========================================================================== */
.formwrap {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 940px) { .formwrap { grid-template-columns: 1fr; } }

.contact { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
@media (max-width: 940px) { .contact { position: static; } }

.contact__row { display: flex; gap: .85rem; align-items: flex-start; padding-block: .85rem; }
.contact__row + .contact__row { border-top: 1px solid var(--line-soft); }
.contact__ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--pink-mist);
}
.contact__ic svg { width: 18px; height: 18px; fill: none; stroke: var(--pink);
                   stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact__lbl {
  display: block; font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: .1rem;
}
.contact__val { font-size: .95rem; color: var(--ink); }

.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  box-shadow: var(--sh-md);
}

.field { margin-bottom: 1.15rem; }
.field > label,
.fieldset > legend {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .45rem;
  padding: 0;
}
.field .req { color: var(--pink-text); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font-size: .95rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: .75rem .9rem;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pink);
  background: var(--white);
}
/* The one text on the site that stays muted. A black placeholder is
   indistinguishable from a filled-in answer, so people skip the field and the
   form fails validation on submit. */
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.field--error input, .field--error select, .field--error textarea { border-color: #C0392B; }
.field__error { display: block; margin-top: .35rem; font-size: .78rem; color: #A5281B; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }

/* Choice chips — used for trip type and budget. Real radios underneath, so
   they are keyboard operable and submit without JavaScript. */
.fieldset { border: 0; padding: 0; margin: 0 0 1.15rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip {
  display: inline-flex;
  position: relative;
  border-radius: var(--r-pill);
}
.chip span {
  display: inline-block;
  font-size: .8rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: .5rem 1rem;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip span:hover { border-color: var(--pink-soft); color: var(--pink-text); }
.chip input:checked + span { background: var(--pink); border-color: var(--pink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 3px; }

.form__submit { width: 100%; margin-top: .5rem; }
.form__note { margin-top: 1rem; font-size: .78rem; line-height: 1.7; color: var(--ink); text-align: center; }

/* Honeypot — hidden from people, visible to naive bots. Not display:none,
   which some bots specifically skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  font-size: var(--t-small);
  line-height: 1.7;
}
.alert--error { background: #FDECEA; border: 1px solid #F5C6C0; color: #8C2118; }

/* ==========================================================================
   THANK YOU
   ========================================================================== */
.refbox {
  display: inline-block;
  background: var(--pink-mist);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 2rem;
  margin: .5rem 0 1.75rem;
}
.refbox__lbl {
  display: block; font-size: .64rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: .25rem;
}
.refbox__val {
  font-family: var(--font-body);
  font-size: 1.5rem; font-weight: 600; letter-spacing: .18em; color: var(--ink);
}

/* ==========================================================================
   PROSE — legal and long-form pages
   Measured for reading, not for filling the container: long lines of legal
   text are hard to track back to the next line, so the column is capped.
   ========================================================================== */
.prose {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink);
}

.prose__meta {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.75rem;
}

.prose__lead {
  font-size: var(--t-lead);
  line-height: 1.8;
  color: var(--ink);
  padding-bottom: 1.5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}

.prose h2 {
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem);
  color: var(--ink);
  margin-top: 2.5rem;
  margin-bottom: .6rem;
}
.prose h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.6rem;
  margin-bottom: .4rem;
}

.prose p { margin-bottom: 1rem; }
.prose strong { color: var(--ink); font-weight: 600; }

.prose ul {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  list-style: none;
}
.prose li { position: relative; margin-bottom: .5rem; padding-left: .9rem; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pink-soft);
}

.prose code {
  font-size: .88em;
  background: var(--pink-mist);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .4em;
}

/* Consent line under a submission form. */
.form__consent {
  margin-top: .9rem;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
}
.form__consent a { color: var(--pink-text); text-decoration: underline; text-underline-offset: .16em; }

/* Legal links in the footer bottom bar. */
.footer__legal { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
/* Links, not body copy — these keep the footer's pink so they still read as
   clickable. --pink-deep to clear AA on the sand background. */
.footer__legal a { color: var(--pink-deep); }
.footer__legal a:hover { color: var(--pink-deep); text-decoration: underline; }