/* ==========================================================================
   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".

   The scrim is WHITE, not black. Darkening a photo to float text over it is
   what made the old site read as a dark site. Here the photo fades into the
   page's own cream, which keeps the light, airy brand feel and gives the ink
   text a clean, high-contrast surface instead of blending into the image.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(33rem, 84svh, 50rem);
  overflow: hidden;
  background: var(--pink-mist);
}

/* ---- 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 ------------------------------------------------------ */
.hero__dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1rem, 2.5vw, 2rem);
  transform: translateX(-50%);
  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;
}

/* The veil only has to carry the copy — everywhere else the photograph
   should be the photograph. It now clears completely by two-thirds across,
   instead of only fading out at 82%. Legibility over the thinner wash comes
   from the text itself (see .hero__content below), which is more reliable
   than blanketing the image, because the slides change and the client will
   swap these photos for her own. */
/* A POOL, not a wash.
   A left-to-right fade is the wrong shape for this job: to be strong enough
   behind the words it has to start near-opaque, which then veils a third of
   the photo that has no text over it at all.
   An ellipse anchored on the copy is strong exactly where the text sits and
   gone within a screen-width, so the photograph reads clearly everywhere
   else. The faint linear layer underneath just ties it back to the page
   colour so the edge never looks like a spotlight. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 80% at 22% 50%,
      rgba(255, 251, 252, .93)  0%,
      rgba(255, 251, 252, .85) 34%,
      rgba(255, 251, 252, .60) 58%,
      rgba(253, 240, 244, .20) 80%,
      rgba(253, 240, 244, 0)  100%),
    linear-gradient(100deg,
      rgba(255, 251, 252, .24)  0%,
      rgba(253, 240, 244, .06) 45%,
      rgba(253, 240, 244, 0)   68%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(3rem, 7vw, 5rem); }

/* A soft white halo carries the copy over whatever the photo does behind it.
   Cheaper than darkening the whole frame and it survives a photo swap — the
   glow tracks the text, not the image. */
.hero__content { max-width: 39rem; }
.hero__content .eyebrow,
.hero__content .hero__title,
.hero__content .hero__sub {
  /* Three stacked shadows: a tight opaque core that hugs the letterforms and
     does the real legibility work, then two wider, softer washes that blend
     the halo out so it never reads as an outline. Strengthening this is what
     buys the overlay its transparency — the glow travels with the text, so
     the photograph underneath stays visible. */
  text-shadow:
    0 0 3px  rgba(255, 251, 252, .98),
    0 1px 8px rgba(255, 251, 252, .92),
    0 0 22px rgba(255, 251, 252, .85);
}

.hero__title {
  font-family: var(--font-script);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--pink);          /* ONE colour — the whole title, no exceptions */
  margin-bottom: .75rem;
  padding-bottom: .12em;       /* room for the script descenders */
}

.hero__sub {
  font-size: var(--t-lead);
  line-height: 1.8;
  /* Full ink rather than the muted secondary tone: with a lighter veil the
     backdrop is busier, and this buys back the contrast that removing it
     costs. */
  color: var(--ink);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* The secondary button can land on the photo itself, where the scrim is
   thinnest — and the hero image WILL be swapped for the client's own photos.
   A translucent white backing guarantees the label stays readable no matter
   what ends up behind it, instead of relying on this one picture. */
.hero .btn--outline {
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hero .btn--outline:hover { background: var(--pink); color: #fff; }

/* Mobile: swap the side-scrim for a top-down veil so the headline always sits
   on a light surface, and let the photo breathe at the bottom of the frame. */
@media (max-width: 820px) {
  .hero { min-height: clamp(30rem, 78svh, 40rem); }
  /* The veil has to clear the copy but then get out of the way fast — these
     are photographs of real clients on real trips, and washing the lower
     half of the frame to near-white wastes them. Strong behind the text,
     gone by two-thirds down. The tall crops are cut so the subject lands in
     that clear band rather than under the veil. */
  /* Same idea rotated: the pool sits over the copy at the top of the frame
     and clears by mid-height, leaving the lower half of the photo clean. */
  .hero__scrim {
    background:
      radial-gradient(118% 57% at 50% 22%,
        rgba(255, 251, 252, .93)  0%,
        rgba(255, 251, 252, .84) 42%,
        rgba(255, 251, 252, .55) 68%,
        rgba(253, 240, 244, 0)  100%),
      linear-gradient(178deg,
        rgba(255, 251, 252, .22)  0%,
        rgba(253, 240, 244, .05) 45%,
        rgba(253, 240, 244, 0)   62%);
  }
  .hero__content { max-width: none; }
}

/* 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-faint);
  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; }
.deal__text  { font-size: var(--t-small); line-height: 1.82; color: var(--ink-soft); }

.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-faint); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta {
  background: linear-gradient(135deg, var(--blush-deep) 0%, var(--pink-mist) 55%, var(--blush) 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-soft); 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 {
  background: linear-gradient(160deg, var(--blush-deep) 0%, var(--pink-mist) 48%, var(--cream) 100%);
  border-bottom: 1px solid var(--line-gold);
  padding-block: clamp(2.75rem, 6vw, 5rem);
}
.pagehead h1 { max-width: 20ch; }
.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-soft); }

/* 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-soft);
  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; }
.dest__body h3 { margin-bottom: .3rem; }
.dest__region {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .6rem;
}
.dest__body p { font-size: var(--t-small); line-height: 1.72; color: var(--ink-soft); flex: 1; }
.dest__link {
  margin-top: 1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink-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); }
.dest__link:hover svg { transform: translateX(3px); }

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

/* ==========================================================================
   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-soft); flex: 1; }
.res a {
  margin-top: .9rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink-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-soft); 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-soft); }
.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);
}
.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-soft);
  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-faint); 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);
}