section { position: relative; z-index: 1; }
/* Masthead height and the hero pattern now live in global.css (inner-page masthead).
   They used to be duplicated here; the bare min-height had no media query and beat
   global's own mobile rule at every width. Do not re-add them. */
.page-hero-content p { font-family: 'Source Sans 3', sans-serif; font-size: 22px; font-weight: 400; color: #ffffff; }
.page-hero h1 { display: flex; align-items: flex-end; gap: 14px; }
.hero-logo-inline {
    height: 64px;
    width: auto;
    display: inline-block;
    margin-bottom: -13px;
}

/* ── MEET JACQTOURS ── */
.meet-section {
  padding: var(--section-v) 0;
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
}
.meet-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.meet-image-wrap { position: relative; }
.meet-image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: center/cover no-repeat;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14);
}
.meet-quote-overlay {
  position: absolute;
  bottom: -48px; left: 48px;
  background: var(--navy);
  color: #fff;
  padding: 18px 22px;
  border-radius: 0;
  width: 280px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.meet-quote-overlay p {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; font-style: italic;
  color: #ffffff; line-height: 1.4; margin-bottom: 10px;
}
.meet-quote-overlay cite {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffffff; font-style: normal;
}
.meet-content {}
.meet-label {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--cerise); margin-bottom: 30px;
}
.meet-content h2 {
  font-family: var(--font-heading); font-size: 48px; font-weight: 900;
  color: var(--navy); line-height: 1.1; letter-spacing: -1px; margin-bottom: 24px;
}
.meet-content p {
  font-family: var(--font-body); font-size: 18px; color: #505050;
  line-height: 1.7; margin-bottom: 16px;
}

/* ── THE FOUNDER ── */
.founder-section {
  padding: var(--section-v) 0;
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
}
.founder-inner {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 60px;
  align-items: center;
}
.founder-content {}
.founder-label {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--cerise); margin-bottom: 30px;
}
.founder-content h2 {
  font-family: var(--font-heading); font-size: 48px; font-weight: 900;
  color: var(--navy); line-height: 1.1; letter-spacing: -1px; margin-bottom: 24px;
}
.founder-content p {
  font-family: var(--font-body); font-size: 18px; color: #505050;
  line-height: 1.7; margin-bottom: 16px;
}
.founder-handle {
  color: var(--cerise); text-decoration: none; font-weight: 600;
}
.founder-handle:hover { text-decoration: underline; }
.founder-image {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3/2;
  background: center 18% / cover no-repeat;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14);
}

/* ── TOUR HIGHLIGHTS ── */
.highlights-section {
  padding: var(--section-v) 0;
  background: var(--navy);
}
.highlights-mark {
  width: 88px; height: auto; display: block; margin-bottom: 20px;
}
.highlights-label {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 300;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #ffffff; margin-bottom: 30px;
}
.highlights-section h2 {
  font-family: var(--font-heading); font-size: 48px; font-weight: 900;
  color: #fff; line-height: 1.1; letter-spacing: -1px; margin-bottom: 48px;
}
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.highlight-card {
  border-radius: var(--radius); overflow: hidden;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform 0.25s;
  position: relative;
}
.highlight-card:hover { transform: translateY(-4px); }
.highlight-thumb {
  aspect-ratio: 16/9;
  background: center/cover no-repeat;
  position: relative;
}
/* An Instagram Reel has no thumbnail of its own — Meta removed `thumbnail_url`
   from Instagram oEmbed on 3 Nov 2025 — so when no cover image is set the card
   leads with its title instead of showing an empty box. A normal state for a
   Reel, not an error, so it has to look deliberate. Keeps the 16/9 ratio above
   so the three-card row stays even. */
.highlight-card--titled .highlight-thumb {
  background: linear-gradient(150deg, #0b5670 0%, var(--navy) 55%, #0a2f3f 100%);
  display: flex;
  flex-direction: column;   /* title ABOVE the play button, not behind it */
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 22px;
  text-align: center;
}
/* On a photo the play button is centred over the image; on a title card it
   joins the stack, or it lands on top of the words. */
.highlight-card--titled .highlight-play {
  position: static;
  transform: none;
  flex: 0 0 auto;
}
.highlight-card--titled:hover .highlight-play { transform: scale(1.1); }
.highlight-thumb-title {
  font-family: var(--font-card);
  font-size: 17px; font-weight: 700; line-height: 1.35;
  color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The title is already the poster — repeating it below would be noise. */
.highlight-card--titled .highlight-meta { display: none; }
.highlight-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  background: var(--cerise); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.highlight-card:hover .highlight-play { background: var(--cerise-dk); transform: translate(-50%, -50%) scale(1.1); }
.highlight-play svg { margin-left: 4px; }
.highlight-meta { padding: 14px 16px 18px; }
.highlight-title {
  font-family: var(--font-body); font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff; margin-bottom: 0;
}

/* ── VIDEO MODAL ── */
.video-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center;
}
.video-modal.active { display: flex; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
}
.video-modal-box {
  position: relative; z-index: 1;
  width: 90%; max-width: 900px;
}
.video-modal-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer;
  padding: 4px 10px;
  transition: color 0.2s;
}
.video-modal-close:hover { color: var(--cerise); }
.video-modal-player {
  position: relative; padding-bottom: 56.25%;
  background: #000; border-radius: 4px; overflow: hidden;
}
/* A Reel is portrait, and Instagram's embed adds its own header and action row
   on top of the video, so its height is not a clean 9:16. Rather than guess an
   aspect, give it a viewport-relative height in a narrow box — that adapts
   instead of letterboxing or clipping the comment row. */
.video-modal-box--portrait { max-width: 400px; }
.video-modal-player--portrait {
  padding-bottom: 0;
  height: min(80vh, 720px);
  background: #fff;   /* Instagram's card is white; black would frame it oddly */
}
.video-modal-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .meet-inner { gap: 40px; }
  .founder-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .meet-content h2,
  .founder-content h2 { font-size: 40px; }
  .highlights-section h2 { font-size: 40px; }
  .highlights-grid { gap: 20px; }
  /* Trim the airy section rhythm at tablet, and pull the Meet → Founder
     junction closer (was 96+96 = 192px of stacked padding). */
  .meet-section,
  .founder-section,
  .highlights-section { padding: 64px 0; }
  .meet-section { padding-bottom: 36px; }
  .founder-section { padding-top: 36px; }
}

@media (max-width: 768px) {
  .hero-logo-inline { height: 44px; margin-bottom: -9px; }
  .page-hero h1 { gap: 8px; flex-wrap: wrap; }

  .meet-section,
  .founder-section,
  .highlights-section { padding: 56px 0; }
  /* Tighten the Meet → Founder junction (was 56+56 = 112px combined) */
  .meet-section { padding-bottom: 28px; }
  .founder-section { padding-top: 28px; }

  /* Stack 2-column sections */
  .meet-inner,
  .founder-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* "The Founder" → image above the text on mobile */
  .founder-inner .founder-image { order: -1; }

  /* Quote overlay → smaller card, bottom-center, straddling the image's
     bottom edge (matches the home page Our Story quote treatment) */
  .meet-image-wrap { padding-bottom: 44px; }
  .meet-quote-overlay {
    position: absolute;
    bottom: 0; left: 50%; right: auto;
    transform: translateX(-50%);
    width: 240px;
    padding: 14px 16px;
    margin-top: 0;
  }
  .meet-quote-overlay p { font-size: 15px; margin-bottom: 6px; }
  .meet-quote-overlay cite { font-size: 11px; }
  .meet-content h2,
  .founder-content h2 { font-size: 34px; }
  .meet-content p,
  .founder-content p { font-size: 16px; }

  .highlights-section h2 { font-size: 34px; margin-bottom: 32px; }
  .highlights-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 480px) {
  .meet-content h2,
  .founder-content h2 { font-size: 28px; }
  .highlights-section h2 { font-size: 28px; }
  .hero-logo-inline { height: 36px; margin-bottom: -7px; }
  .highlight-title { font-size: 18px; }
}