:root {

  --navy: #043042;

  --cerise: #ed1858;

  --grey: #a8a8a8;

  --maroon: #3d0020;

  --pink: #ff93ac;

  --off-white: #faf8f5;

  --white: #ffffff;

  --body: #2a2a2a;

}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {

  font-family: 'Source Sans 3', sans-serif;

  background: var(--off-white);

  color: var(--body);

  -webkit-font-smoothing: antialiased;

}

a { text-decoration: none; color: inherit; }

img { display: block; max-width: 100%; }



/* ── TEXTURE BACKGROUND ── */

body::before {

  content: '';

  position: fixed;

  inset: 0;

  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);

  background-size: 24px 24px;

  pointer-events: none;

  z-index: 0;

}



/* ── NAV ── */

.nav {

  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;

  background: var(--navy);

  height: var(--nav-height);

  display: flex; align-items: center; justify-content: space-between;

  padding: 0 48px;

  border-bottom: 1px solid rgba(255,255,255,0.07);

}

.nav-logo {

  display: flex; align-items: center;

}

.nav-links {

  display: flex; align-items: center; gap: 40px;

}

.nav-links a {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 700; letter-spacing: 0.5px;

  text-transform: uppercase; color: rgba(255,255,255,0.75);

  transition: color 0.2s;

}

.nav-links a:hover { color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.btn-signin {

  padding: 8px 20px;

  border: 1px solid rgba(255,255,255,0.3);

  color: rgba(255,255,255,0.8);

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 400;

  background: none; cursor: pointer;

  border-radius: 0; transition: all 0.2s;

}

.btn-signin:hover { border-color: #fff; color: #fff; }

.btn-subscribe {

  padding: 8px 20px;

  background: var(--cerise);

  color: #fff;

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 700;

  letter-spacing: 0.5px; text-transform: uppercase;

  border: none; cursor: pointer;

  border-radius: 0; transition: background 0.2s;

}

.btn-subscribe:hover { background: #c4144e; }



/* ── HERO ── */

.hero {

  position: relative;

  min-height: 100vh;

  display: flex; align-items: center;

  overflow: hidden;

  background: var(--navy);

  padding-top: 120px;

  padding-bottom: 100px;

}

.hero-slides {

  position: absolute; inset: 0;

}

.hero-slide {

  position: absolute; inset: 0;

  background: center/cover no-repeat;

  opacity: 0;

  transition: opacity 2s ease-in-out;

}

.hero-slide.active { opacity: 1; }

.hero-dots {

  position: absolute; bottom: 140px; left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  display: flex; gap: 10px; align-items: center;

}

.hero-dot {

  width: 8px; height: 8px; border-radius: 50%;

  background: rgba(255,255,255,0.4);

  border: none; cursor: pointer; padding: 0;

  transition: background 0.3s, transform 0.3s;

}

.hero-dot.active {

  background: var(--cerise);

  transform: scale(1.3);

}

@property --mask-opacity {

  syntax: '<number>';

  inherits: false;

  initial-value: 0.92;

}

.hero-overlay {

  position: absolute; inset: 0; z-index: 1;

  background: linear-gradient(90deg,

    rgba(0,0,0,var(--mask-opacity)) 0%,

    rgba(0,0,0,0.4) 55%,

    transparent 100%);

  transition: --mask-opacity 0.8s ease;

}

.hero-content-top {

  position: absolute;

  top: 200px;

  left: 48px;

  z-index: 2;

  max-width: 960px;

}

.hero-content-bottom {

  position: absolute;

  bottom: 200px;

  left: 48px;

  z-index: 2;

}

.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(0,0,0,0.11);

  border: 1px solid #ffffff;

  color: #ffffff;

  font-family: 'Montserrat', sans-serif;

  font-size: 13px;

  font-weight: 300;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 6px 14px;

  border-radius: 2px;

  margin-bottom: 24px;

}

.hero h1 {

  font-family: 'Playfair Display', serif;

  font-size: 68px; font-weight: 900;

  color: #fff; line-height: 1.0;

  letter-spacing: -2px; margin-bottom: 20px;

}

.hero h1 em {

  font-style: italic; color: var(--cerise);

}

.hero-logo-inline {

  height: 80px;

  width: auto;

  display: inline-block;

  vertical-align: middle;

  margin-top: 5px;

}

.hero-sub {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 24px;

  font-weight: 400;

  color: rgba(255,255,255,1);

  line-height: 1.3;

  white-space: normal;

  max-width: 900px;

  width: 100%;

  margin-bottom: 40px;

}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-primary {

  display: inline-flex; align-items: center; gap: 12px;

  padding: 14px 28px;

  background: var(--cerise); color: #fff;

  font-family: 'Montserrat', sans-serif;

  font-size: 16px; font-weight: 700;

  letter-spacing: 0; text-transform: none;

  border: none; cursor: pointer; border-radius: 0;

  transition: background 0.2s;

}

.btn-primary:hover { background: #c4144e; }

.btn-arrow {

  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1;
  transition: transform 0.2s ease;

}

.btn-primary:hover .btn-arrow {

  animation: arrowBounceRight 0.6s ease infinite;

}

@keyframes arrowBounceRight {

  0%, 100% { transform: translateX(0); }

  50%       { transform: translateX(6px); }

}

.btn-outline {

  display: inline-flex; align-items: center; gap: 8px;

  padding: 14px 28px;

  background: transparent;

  border: 1px solid #ffffff;

  color: #ffffff;

  font-family: 'Montserrat', sans-serif;

  font-size: 16px; font-weight: 700;

  letter-spacing: 0; text-transform: none;

  cursor: pointer; border-radius: 0;

  opacity: 1;

  backdrop-filter: blur(7px) brightness(1);

  -webkit-backdrop-filter: blur(7px) brightness(1);

  transition: all 0.2s;

}

.btn-outline:hover { background: rgba(255,255,255,0.1); }



/* ── SCROLL HINT ── */

.scroll-hint {

  position: absolute;

  right: 48px;

  bottom: 150px;

  z-index: 10;

  opacity: 0.7;

  animation: scrollBounce 1.8s ease-in-out infinite;

}

.scroll-hint:hover { opacity: 1; cursor: pointer; }

@keyframes scrollBounce {

  0%, 100% { transform: translateY(0); }

  50%       { transform: translateY(8px); }

}



/* ── STATS BAR ── */

.stats-bar {

  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;

  background: rgba(0,0,0,0.35);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  padding: 0;

  height: 120px;

  display: flex;

  align-items: stretch;

  border-top: 1px solid rgba(255,255,255,0.3);

}

.stat-item {

  flex: 1;

  display: flex; flex-direction: row;

  align-items: center; justify-content: center;

  gap: 12px;

  padding: 0;

  border-right: 1px solid rgba(255,255,255,0.3);

}

.stat-item:last-child { border-right: none; }

.stat-num {

  font-family: 'Playfair Display', serif;

  font-size: 48px; font-weight: 700; color: #ED1858;

  line-height: 1; margin-bottom: 7px;

}

.stat-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 16px; font-weight: 300;

  color: #ffffff;

  line-height: 1.2;

  text-transform: uppercase;

}



/* ── SECTION COMMON ── */

section { position: relative; z-index: 1; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

.section-label {

  display: inline-flex; align-items: center; gap: 8px;

  font-size: 11px; font-weight: 300;

  letter-spacing: 2px; text-transform: uppercase;

  color: var(--cerise); margin-bottom: 30px;

}

/* The dash was removed site-wide on 7 Aug 2026 — see the note in global.css.
   This was a second copy of the same rule, which is why the homepage needed
   seven of its own `display: none` overrides to cancel it. */

.section-heading {

  font-family: 'Playfair Display', serif;

  font-size: 48px; font-weight: 700;

  color: var(--navy); line-height: 1.1;

  letter-spacing: -1px; margin-bottom: 20px;

}

.section-heading em { font-style: italic; color: var(--cerise); }



/* ── WHY JACQTOURS ── */

.why-section .section-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px;

  font-weight: 300;

  text-transform: uppercase;

  letter-spacing: 0.15em;

}


.why-section .section-heading {

  font-family: 'Playfair Display', serif;

  font-size: 48px;

  font-weight: 900;

  border: none;

  background: none;

  box-shadow: none;

}

.why-section {

  padding: var(--section-v) 0;

  background-color: #FAF8F5;

  background-image: url('../images/bg-pattern.svg');

  background-repeat: repeat;

  background-size: auto;

}

.why-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "image heading"
    "image content";

  gap: 0 60px; align-items: start;

}

.why-heading-group { grid-area: heading; }
.why-image { grid-area: image; }
.why-content { grid-area: content; }

.section-geo-pattern {

  width: 74px;

  height: auto;

  margin-bottom: 16px;

  display: block;

}

.why-image {

  height: 100%;

  border-radius: 4px; overflow: hidden;

  position: relative;

}

.why-image-inner {

  width: 100%;

  height: 100%;

  min-height: 480px;

  background-image: url('../images/Jacqtours-Shikoku-00.jpg');

  background-size: cover;

  background-position: center;

  border-radius: 4px;

}

.why-features {

  display: grid; grid-template-columns: 1fr 1fr;

  gap: 20px; margin-top: 20px;

}

.why-feature {

  display: flex; align-items: flex-start; gap: 5px;

}

.why-feature-icon {

  width: 12px; height: 12px; flex-shrink: 0;

  border-radius: 50%;

  border: 1.5px solid var(--cerise);

  background: transparent;

  margin-top: 5px;

}

.why-feature h4 {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px; font-weight: 600;

  color: var(--navy); margin-bottom: 0;

}

.why-feature p {

  font-size: 16px;

  font-weight: 400;

  line-height: 1.5;

}



/* ── FEATURED TOURS ── */

.tours-section {

  padding: var(--section-v) 0;

  background: #043042;

}

.tours-section .section-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 300;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: #ffffff;

}


.tours-section .section-heading {

  font-family: 'Playfair Display', serif;

  font-size: 48px; font-weight: 900;

  color: #ffffff;

}

.tours-section .section-heading em { color: #ed1858; }

.tours-header {

  display: flex; justify-content: space-between;

  align-items: flex-end; margin-bottom: 40px;

}

.tours-view-all {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 400;

  color: #ffffff; text-decoration: none;

  white-space: nowrap;

  /* The heading carries a 20px margin-bottom, so flex-end aligns this link
     ~20px below the heading's visual baseline. Mirror that margin to lift the
     link's bottom edge level with the heading text. */
  margin-bottom: 20px;

}

.tours-view-all:hover .arrow-animate {

  animation: arrowBounce 0.6s ease infinite;

}

@keyframes arrowBounce {

  0%, 100% { transform: translateX(0); }

  50%       { transform: translateX(5px); }

}

.tours-filters {

  display: inline-flex; gap: 0; margin-bottom: 40px;

  background: rgba(255, 255, 255, 0.08);

  padding: 6px;

  border-radius: 3px;

}

.filter-pill {

  display: inline-block; text-decoration: none; line-height: 1;

  padding: 15px 20px;

  border-radius: 0;

  font-family: 'Montserrat', sans-serif;

  font-size: 14px;

  text-transform: uppercase;

  cursor: pointer; transition: all 0.2s;

  border: none;

  background: transparent; color: rgba(255,255,255,0.6);

}

.filter-pill.active { background: var(--cerise); color: #fff; }

.filter-pill:hover:not(.active) { color: #fff; }

.tour-cards {

  display: grid; grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}

/* Homepage "Rides Worth Booking Now": one card group per pill, JS toggles. */
.home-tour-group { display: none; }
.home-tour-group.active { display: grid; }

.tour-card {

  background: rgba(255, 255, 255, 0.09);

  border: 1px solid transparent;

  border-radius: 6px;

  overflow: hidden;

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

  cursor: pointer;

}

.tour-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);

  border: 1px solid #ED1858;

}

.card-image {

  position: relative;

  padding-bottom: 55%;

  overflow: hidden;

}

.card-image-inner {

  position: absolute; inset: 0;

  background: center/cover no-repeat;

  transition: transform 0.4s;

}

.tour-card:hover .card-image-inner { transform: scale(1.04); }

.card-badge {

  position: absolute; top: 12px; left: 12px;

  font-family: 'Montserrat', sans-serif;

  font-size: 9px; font-weight: 400;

  letter-spacing: 0; text-transform: uppercase;

  padding: 10px 10px; border-radius: 3px;

  background: var(--cerise); color: #fff;

}

.card-duration-badge {

  position: absolute; top: 12px; right: 12px;

  font-family: 'Montserrat', sans-serif;

  font-size: 10px; font-weight: 400;

  letter-spacing: 0; text-transform: uppercase;

  padding: 10px 10px; border-radius: 3px;

  background: rgba(0,0,0,0.55); color: #fff;

}

.card-body { padding: 20px 24px; }

.card-dest {

  font-family: 'Montserrat', sans-serif;

  font-size: 11px;

  letter-spacing: 2px; text-transform: uppercase;

  color: var(--cerise); margin-bottom: 4px;

}

.card-title {

  font-family: 'Montserrat', sans-serif;

  font-size: 22px; font-weight: 700;

  color: #ffffff; margin-bottom: 12px;

  line-height: 1.2;

}

.card-date, .card-meta-item {

  font-family: 'Montserrat', sans-serif;

  font-size: 11px; font-weight: 400;

  letter-spacing: 0.5px; text-transform: uppercase;

  color: rgba(255,255,255,0.75);

  display: flex; align-items: center; gap: 6px;

  margin-bottom: 24px;

}

.card-divider {

  border: none; border-top: 1px solid rgba(255,255,255,0.1);

  margin-bottom: 24px;

}

.card-footer {

  display: flex; justify-content: space-between; align-items: center;

}

.card-price-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 11px; font-weight: 400;

  color: rgba(255,255,255,0.75); text-transform: uppercase;

  letter-spacing: 0.5px; margin-bottom: 2px;

}

.card-price {

  font-family: 'Playfair Display', serif;

  font-size: 28px; font-weight: 900;

  color: #ffffff;

}

/* "Price on request" is a label, not a headline figure (added 2026-07-21). */
.card-price.card-price-request {
  font-family: var(--font-card);
  font-size: 15px; font-weight: 700;
  white-space: nowrap;
}

.btn-book {

  padding: 10px 20px;

  background: transparent; color: #fff;

  font-family: 'Montserrat', sans-serif;

  font-size: 11px; font-weight: 700;

  letter-spacing: 0.5px; text-transform: uppercase;

  border: 1px solid #fff; cursor: pointer; border-radius: 0;

  transition: all 0.2s;

}

.btn-book:hover { background: #fff; color: #043042; }



/* ── DESTINATIONS ── */

.destinations-section {

  padding: var(--section-v) 0;

  background-color: #FAF8F5;

  background-image: url('../images/bg-pattern.svg');

  background-repeat: repeat;

  background-size: auto;

}

.destinations-section .section-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 300;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: var(--cerise);

  display: block;

}


.destinations-section .section-heading {

  font-family: 'Playfair Display', serif;

  font-size: 48px; font-weight: 900;

  color: var(--navy);

}

.dest-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: auto auto;

  gap: 8px;

  margin-top: 48px;

}

.dest-card {

  position: relative; border-radius: 6px;

  overflow: hidden; cursor: pointer;

  display: block; text-decoration: none; color: inherit;

}

.dest-card:first-child {

  grid-row: span 2; grid-column: span 1;

}

.dest-card-inner {

  width: 100%; padding-bottom: 70%;

  background: center/cover no-repeat;

  transition: transform 0.4s;

}

.dest-card:first-child .dest-card-inner {

  padding-bottom: 0; height: 100%; min-height: 340px;

}

.dest-card:hover .dest-card-inner { transform: scale(1.04); }

.dest-overlay {

  position: absolute; inset: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 50%);

}

.dest-label {

  position: absolute; bottom: 0; left: 0; right: 0;

  padding: 20px;

}

.dest-country {

  font-family: 'Montserrat', sans-serif;

  font-size: 20px; font-weight: 700; color: #fff;

  margin-bottom: 3px;

  text-shadow: 0 1px 4px rgba(0,0,0,0.5);

}

.dest-count {

  font-family: 'Montserrat', sans-serif;

  font-size: 13px; font-weight: 400;

  color: rgba(255,255,255,0.85);

  text-shadow: 0 1px 4px rgba(0,0,0,0.5);

}



/* ── HOW IT WORKS ── */

.hiw-section {

  padding: var(--section-v) 0;

  text-align: center;

  background-color: #FAF8F5;

  background-image: url('../images/bg-pattern.svg');

  background-repeat: repeat;

  position: relative;

}

.hiw-section .section-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 300;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: var(--cerise);

  display: block;

}


.hiw-section .section-heading {

  font-family: 'Playfair Display', serif;

  font-size: 48px; font-weight: 900;

  color: var(--navy);

}

.hiw-section .section-geo-pattern {

  width: 108px; height: auto;

}

.hiw-steps {

  display: flex;

  align-items: flex-start;

  justify-content: center;

  margin-top: 64px;

  padding: 0 40px;

  position: relative;

  z-index: 1;

}

.hiw-step {

  flex: 1;

  display: flex; flex-direction: column; align-items: center;

  text-align: center;

  padding: 0 16px;

}

.hiw-num {

  width: 100px; height: 100px; border-radius: 50%;

  background: #043042;

  display: flex; align-items: center; justify-content: center;

  font-family: 'Playfair Display', serif;

  font-size: 37px; font-weight: 900; color: #fff;

  flex-shrink: 0;

  margin-bottom: 28px;

  padding-bottom: 6px;

  position: relative; z-index: 2;

}

#hiw-canvas {

  position: absolute;

  top: 0; left: 0;

  width: 100%; height: 100%;

  pointer-events: none;

  z-index: 0;

}

.hiw-title {

  font-family: 'Montserrat', sans-serif;

  font-size: 20px; font-weight: 700;

  color: #043042; margin-bottom: 12px;

}

.hiw-desc {

  font-weight: 400;

  line-height: 1.6;

  max-width: 300px; margin: 0 auto;

}



/* ── TESTIMONIALS ── */

.testimonials-section {

  padding: var(--section-v) 0;

  background: var(--navy);

}

.testimonials-section .section-geo-pattern {

  width: 80px; height: auto; opacity: 1;

}

.testimonials-section .section-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 300;

  text-transform: uppercase; letter-spacing: 0.15em;

  color: #ffffff;

}


.testimonials-section .section-heading { color: #ffffff; }

.testimonials-section .section-heading em { font-style: italic; color: #ffffff; }

.testi-cards {

  display: grid; grid-template-columns: repeat(3, 1fr);

  gap: 24px; margin-top: 48px;

}

.testi-card {

  background: rgba(255,255,255,0.07);

  border-radius: 6px; padding: 32px;

  display: flex; flex-direction: column;

  transition: background 0.2s;

}

.testi-card:hover { background: rgba(255,255,255,0.11); }

.testi-stars {

  color: #ED1858; font-size: 15px;

  letter-spacing: 2px; margin-bottom: 16px;

}

.testi-quote {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px; font-style: italic;

  color: #ffffff;

  line-height: 1.7; margin-bottom: 24px;

}

.testi-author {

  display: flex; align-items: center; gap: 12px;

  margin-bottom: 24px;

}

.testi-avatar {

  width: 42px; height: 42px; border-radius: 50%;

  background: var(--maroon);

  display: flex; align-items: center; justify-content: center;

  font-size: 13px; font-weight: 700; color: #fff;

  flex-shrink: 0;

}

.testi-name {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 15px; font-weight: 600; color: #ffffff;

  margin-bottom: 0;

}

.testi-location {

  font-size: 13px; color: rgba(255,255,255,0.55);

  margin-top: 0; line-height: 1.2;

}

.testi-tour {

  font-family: 'Montserrat', sans-serif;

  font-size: 11px; font-weight: 400;

  text-transform: uppercase; letter-spacing: 0.15em;

  color: var(--cerise);

  margin-top: auto; padding-top: 0;

  border-top: none;

}



/* ── BESPOKE CTA ── */

.bespoke-section {

  padding: 64px 0;

  background-color: #FAF8F5;

  background-image: url('../images/bg-pattern.svg');

}

.bespoke-section .section-geo-pattern {

  width: 110px; height: auto;

}

.bespoke-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "heading image"
    "content image";

  gap: 0 60px; align-items: start;

}

.bespoke-heading-group { grid-area: heading; margin-bottom: 24px; }
.bespoke-image { grid-area: image; }
.bespoke-content { grid-area: content; }

.bespoke-section .section-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 300;

  text-transform: uppercase; letter-spacing: 0.15em;

  color: var(--cerise);

}


.bespoke-section .section-heading {

  font-size: 48px; font-weight: 900;

}

.bespoke-content p { margin-bottom: 32px; }

.bespoke-image {

  border-radius: 6px; overflow: hidden;

}

.bespoke-image-inner {

  width: 100%; padding-bottom: 70%;

  background: url('../images/Jacqtours-Shikoku-00.jpg') center/cover;

  border-radius: 6px;

}

.btn-bespoke {

  display: inline-flex; align-items: center; gap: 10px;

  padding: 14px 28px;

  background: var(--cerise); color: #ffffff;

  font-family: 'Montserrat', sans-serif;

  font-size: 16px; font-weight: 700;

  border: none; cursor: pointer; border-radius: 0;

  transition: background 0.2s;

  text-decoration: none;

}

.btn-bespoke:hover { background: var(--cerise-dk); }

.btn-bespoke:hover .btn-arrow { animation: arrowBounceRight 0.6s ease infinite; }



/* ── OUR STORY ── */

.about-section {

  padding: 64px 0;

  background-color: #FAF8F5;

  background-image: url('../images/bg-pattern.svg');

}

.about-section .section-geo-pattern {

  width: 87px; height: auto;

}

.about-grid {

  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "image heading"
    "image content";

  gap: 0 60px; align-items: stretch;

}

.about-heading-group { grid-area: heading; margin-bottom: 24px; }
.about-image { grid-area: image; }
.about-content { grid-area: content; }

.about-image {

  position: relative;

  padding-bottom: 40px; padding-right: 40px;

}

.about-image-inner {

  width: 100%; min-height: 480px;

  background: url('../images/Our-Story.jpg') center/cover;

  border-radius: 6px;

}

.about-quote {

  position: absolute; bottom: 40px; right: 0;

  width: 280px;

  background: #043042;

  padding: 18px 22px;

  border-radius: 0;

  z-index: 2;

}

.about-quote p {

  font-family: 'Playfair Display', serif;

  font-size: 20px; font-weight: 700; font-style: italic;

  color: #ffffff; line-height: 1.4;

  margin-bottom: 10px;

}

.about-quote-attr {

  display: block;

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 400;

  letter-spacing: 0.1em; text-transform: uppercase;

  color: #ffffff;

  margin-top: 0;

}

.about-section .section-label {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 300;

  text-transform: uppercase; letter-spacing: 0.15em;

  color: var(--cerise);

}


.about-section .section-heading {

  font-size: 48px; font-weight: 900;

}

.about-content p { margin-bottom: 24px; }

.link-story {

  display: inline-flex; align-items: center; gap: 10px;

  margin-top: 32px;

  color: var(--cerise);

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 600;

  text-decoration: none;

  transition: color 0.2s;

}

.link-story:hover { color: var(--cerise-dk); }

.link-story:hover .btn-arrow { animation: arrowBounceRight 0.6s ease infinite; }



/* ── NEWSLETTER ── */

.newsletter-section {

  padding: 64px 0;

  background: #ED1858;

}

.newsletter-inner {

  display: flex; align-items: center;

  justify-content: space-between; gap: 80px;

}

.newsletter-text h3 {

  font-family: 'Playfair Display', serif;

  font-size: 48px; font-weight: 900; color: #ffffff;

  line-height: 1.1; max-width: 420px;

  margin-bottom: 16px;

}

.newsletter-text p {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 18px; font-weight: 400;

  color: rgba(255,255,255,0.85); max-width: 420px;

}

.newsletter-form {

  display: flex; flex-wrap: wrap; flex-shrink: 0;

  /* A definite width so the status line (flex-basis:100%) resolves against it and
     wraps INSIDE the form, instead of inflating the form's content width and
     squeezing the heading column. Fits the 340px field + Subscribe button; the
     tablet/mobile rules below reset it to 100%. */
  width: 520px; max-width: 100%;

}

/* The confirm / error message sits on the cerise band, where the modal's
   on-white greens and reds are near-invisible. Force it white here (scoped to the
   band, so the modal on its white dialog keeps its readable colours). */
.newsletter-section .jt-subscribe-status,
.newsletter-section .jt-subscribe-status.is-ok,
.newsletter-section .jt-subscribe-status.is-error { color: #fff; }

.newsletter-input {

  height: 56px; width: 340px;

  padding: 0 20px;

  border: none; outline: none;

  border-radius: 0;

  background: #ffffff;

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px; color: #333;

}

.newsletter-input::placeholder { color: #aaa; }

.newsletter-btn {

  height: 56px;

  padding: 0 28px;

  background: #043042; color: #ffffff;

  font-family: 'Montserrat', sans-serif;

  font-size: 14px; font-weight: 700;

  text-transform: uppercase; letter-spacing: 0.1em;

  border: none; cursor: pointer; border-radius: 0;

  display: inline-flex; align-items: center; gap: 10px;

  transition: background 0.2s;

}

.newsletter-btn:hover { background: #021e2a; }

.newsletter-btn:hover .btn-arrow { animation: arrowBounceRight 0.6s ease infinite; }



/* ── FOOTER ── */



/* ── GEOMETRIC PATTERN (inner pages only, not used on hero) ── */

/* used in pattern block top-right for inner page hero bands */



/* ============================================================
   RESPONSIVE — page-specific overrides (global.css handles nav/footer)
   Desktop (>=1280) unchanged. Only max-width rules below.
   ============================================================ */

/* ---- 1024px: collapse 3-col grids to 2-col ---- */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }

  /* Tour & testimonial cards stay 3-col through the tablet band (they read
     fine at ~230px, and there are 3 of each so 2-col would orphan one);
     destinations collapse to 2-col. */
  .tour-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .hero h1 { font-size: 56px; }
  .section-heading,
  .why-section .section-heading,
  .tours-section .section-heading,
  .destinations-section .section-heading,
  .hiw-section .section-heading,
  .bespoke-section .section-heading,
  .about-section .section-heading,
  .newsletter-text h3 { font-size: 40px; }

  /* Newsletter: the fixed 340px input + 80px gap starves the heading, cramming
     it into a narrow column (word-per-line). Stack it — heading full width,
     form full-width below. */
  .newsletter-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .newsletter-text h3,
  .newsletter-text p { max-width: none; }
  .newsletter-form { width: 100%; }
  .newsletter-input { width: auto; flex: 1; }
}

/* ── Tablet PORTRAIT: shorten the full-bleed hero to 50vh so it isn't an
   over-tall band on upright tablets (e.g. Galaxy Tab S6 Lite ~800px).
   Landscape tablets and desktop keep the full 100vh. In the shorter box the
   two absolutely-positioned content blocks (top text / bottom CTAs, tuned
   for the 100vh desktop) collide — so let them FLOW as a natural column
   instead: badge → headline → subtitle → CTAs, top-aligned under the nav. ── */
@media (max-width: 1024px) and (orientation: portrait) {
  .hero {
    min-height: 50vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 150px;
    /* leave room at the bottom for the absolute stats bar (~84px) so the
       flowing content never tucks under it */
    padding-bottom: 108px;
  }
  /* Text group + CTAs FLOW as one natural column from the top under the nav —
     height-independent, so it works on both tall (S6 Lite) and short (iPad
     Air) portrait viewports without the CTAs overlapping the subtitle. */
  .hero-content-top,
  .hero-content-bottom {
    position: static; top: auto; bottom: auto; left: auto;
    padding: 0 32px;
  }
  .hero-content-bottom { margin-top: 30px; }
  /* Logo in the headline: base 80px towers over the 56px tablet H1 text;
     sit it roughly in line with the headline cap height. */
  .hero-logo-inline { height: 62px; }
  /* Dots (base bottom:140px) would land over the CTAs in the flow layout —
     hide them here; the slideshow still auto-advances. */
  .hero-dots { display: none; }
  /* Stat numbers + labels: base 48/16px is heavy in the 4-across tablet row —
     dial both down proportionately. */
  .stat-num { font-size: 40px; }
  .stat-label { font-size: 13px; }
  /* Base stats bar is a fixed 120px — too tall for the smaller tablet content,
     leaving dead space. Shrink to fit with modest padding. */
  .stats-bar { height: auto; }
  .stat-item { padding: 18px 10px; }
  /* About quote: the desktop bottom-right float (280px @ right:0) is too wide
     for the 2-col tablet image and lands detached below it. Two things:
     (1) the grid stretches the image column taller than the actual image
     (align-items:stretch), leaving dead space the bottom-anchored quote fell
     into — pin the image to its own height with align-self:start; (2) use the
     phone-style bottom-centre straddle on the image's true bottom edge. */
  .about-image { padding-right: 0; padding-bottom: 44px; align-self: start; }
  .about-quote {
    right: auto; left: 50%;
    transform: translateX(-50%);
    bottom: -44px;   /* drop lower so it straddles the image edge less */
    width: 260px;
    padding: 16px 18px;
  }
}

/* ---- 768px: single-column stacks, tablet/mobile ---- */
@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .nav { padding: 0 20px; }

  /* Section vertical rhythm */
  .why-section,
  .tours-section,
  .destinations-section,
  .hiw-section,
  .testimonials-section { padding: 56px 0; }
  .bespoke-section,
  .about-section,
  .newsletter-section { padding: 48px 0; }

  /* MOBILE HERO — "landscape band + text below" layout.
     The slideshow becomes a fixed landscape band at the top so the
     photos display correctly (no vertical crop of the subject); the
     headline, subtitle, buttons and stats sit on solid navy below it. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--nav-height) 0 0; /* clear fixed nav; content flows below */
    min-height: auto;
    background: var(--navy);
  }
  /* slideshow → landscape band (~16:9) at the top.
     position:relative so the absolute .hero-slide children are
     contained within the band (not the whole hero). */
  .hero-slides {
    position: relative;
    width: 100%;
    height: 56vw;            /* landscape band, ~16:9 of viewport width */
    max-height: 300px;
    order: 1;
    flex: none;
    overflow: hidden;
  }
  .hero-overlay { display: none; }   /* no dark gradient over the band */
  /* Dots anchored to the BOTTOM of the image band. The band starts at
     nav-height and is min(56vw, 300px) tall; sit the dots ~16px above
     its bottom edge. */
  .hero-dots {
    position: absolute; bottom: auto;
    top: calc(var(--nav-height) + min(56vw, 300px) - 26px);
    left: 50%; transform: translateX(-50%); z-index: 10;
  }
  /* text block on navy below the band */
  .hero-content-top {
    position: static; left: auto; top: auto;
    order: 2; padding: 26px 20px 0; max-width: 100%; width: 100%;
  }
  .hero-content-bottom {
    position: static; left: auto; bottom: auto;
    order: 3; padding: 18px 20px 0; width: 100%;
  }
  .hero h1 { font-size: 38px; letter-spacing: -1px; }
  .hero-logo-inline { height: 48px; }
  .hero-badge {
    font-size: 10px; letter-spacing: 0.05em;
    padding: 6px 12px; margin-bottom: 20px;
    white-space: nowrap;
  }
  .hero-sub { font-size: 17px; color: rgba(255,255,255,0.8); margin-bottom: 22px; max-width: 300px; }
  .hero-ctas { flex-wrap: nowrap; gap: 10px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline {
    flex: 1 1 0; justify-content: center; white-space: nowrap;
    font-size: 14px; gap: 8px; padding: 12px 10px;
  }
  .scroll-hint { display: none; }

  /* Stats bar → normal flow below the content (not an overlay anymore) */
  .stats-bar {
    position: static; order: 4;
    width: 100%; height: auto;
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .stat-item {
    flex: none; min-width: 0;
    flex-direction: column; gap: 7px;
    padding: 14px 10px;
    border-right: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-last-child(-n+2) { border-bottom: none; }
  .stat-num { font-size: 40px; margin-bottom: 0; }
  .stat-label { text-align: center; font-size: 13px; letter-spacing: 0.02em; }

  /* Two-column image+text sections → stack */
  /* About grid → single column, ordered: heading → image → content (matches Why/Bespoke) */
  .about-grid {
    display: flex; flex-direction: column; gap: 28px;
    grid-template-columns: none; grid-template-areas: none;
  }
  .about-heading-group { order: 1; margin-bottom: 0; }
  .about-image { order: 2; width: 100%; align-self: stretch; }
  .about-content { order: 3; }
  /* Bespoke grid → single column, ordered: content → image → button */
  .bespoke-grid {
    display: flex; flex-direction: column; gap: 28px;
    grid-template-columns: none; grid-template-areas: none;
  }
  .bespoke-heading-group { order: 1; margin-bottom: 0; }
  .bespoke-image { order: 2; width: 100%; align-self: stretch; }
  .bespoke-content { order: 3; display: flex; flex-direction: column; align-items: flex-start; }
  .bespoke-image-inner { width: 100%; min-height: 300px; height: 300px; }
  .bespoke-content .btn-bespoke { align-self: start; }
  /* Why grid → single column, ordered: heading above the image, then content */
  .why-grid {
    display: flex; flex-direction: column; gap: 28px;
    grid-template-columns: none; grid-template-areas: none;
  }
  .why-heading-group { order: 1; }
  .why-image { order: 2; height: auto; width: 100%; align-self: stretch; }
  .why-content { order: 3; }
  .why-features { grid-template-columns: 1fr 1fr; }
  .why-image-inner { width: 100%; min-height: 300px; height: 300px; }

  /* Featured tours */
  .tour-cards { grid-template-columns: 1fr; }
  .tours-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tours-filters { flex-wrap: wrap; }

  /* Destinations */
  .dest-grid { grid-template-columns: 1fr; }
  .dest-card:first-child { grid-row: auto; grid-column: auto; }
  /* Standardise all cards to the same fixed height on mobile */
  .dest-card .dest-card-inner,
  .dest-card:first-child .dest-card-inner {
    padding-bottom: 0 !important;
    height: 240px !important;
    min-height: 0 !important;
  }

  /* How it works → stack, hide wavy connector canvas */
  .hiw-steps { flex-direction: column; align-items: center; gap: 40px; padding: 0; }
  #hiw-canvas { display: none; }
  .hiw-num { width: 68px; height: 68px; font-size: 26px; margin-bottom: 20px; padding-bottom: 4px; }

  /* Testimonials */
  .testi-cards { grid-template-columns: 1fr; }

  /* About floating quote → smaller, narrower, bottom-center straddling the image bottom edge */
  .about-image { padding-right: 0; padding-bottom: 44px; position: relative; }
  .about-image-inner { min-height: 320px; }
  .about-quote {
    position: absolute;
    bottom: 0; left: 50%; right: auto;
    transform: translateX(-50%);
    width: 240px;
    padding: 14px 16px;
    margin-top: 0;
  }
  .about-quote p { font-size: 15px; margin-bottom: 6px; }
  .about-quote-attr { font-size: 11px; }

  /* Newsletter → stack, fluid input; match hero CTA (44px) height */
  .newsletter-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .newsletter-form { width: 100%; }
  .newsletter-input { width: 100%; flex: 1; height: 44px; }
  .newsletter-btn { height: 44px; }

  /* Headings */
  .hero-content-top .hero-sub { max-width: 300px; }
  .newsletter-text h3,
  .newsletter-text p { max-width: 100%; }
}

/* ---- 480px: phone tightening ---- */
@media (max-width: 480px) {
  .container { padding: 0 18px; }

  .hero h1 { font-size: 32px; }
  .hero-logo-inline { height: 42px; }
  .hero-sub { font-size: 20px; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline { flex: 1; justify-content: center; }

  .section-heading,
  .why-section .section-heading,
  .tours-section .section-heading,
  .destinations-section .section-heading,
  .hiw-section .section-heading,
  .bespoke-section .section-heading,
  .about-section .section-heading,
  .newsletter-text h3 { font-size: 30px; }

  /* Stats bar → single column on the smallest screens */
  .stat-num { font-size: 34px; }

  /* Why features stack fully */
  .why-features { grid-template-columns: 1fr; }

  /* Filter pills full-width friendly */
  .filter-pill { padding: 12px 16px; font-size: 13px; }

  .newsletter-form { flex-direction: column; }
  .newsletter-input { flex: none; height: 44px; }
  .newsletter-btn { width: 100%; height: 44px; justify-content: center; }
}