@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* last @font-face block above */

/* ─── GLOBAL FONT ASSIGNMENTS ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
}

body, p, a, span, div {
  font-family: "DM Sans", sans-serif;
}

/* ─── 1. RESET & BASE ────────────────────────────────────────── */
/* ============================================================
   PRO MOROCCO TOURS — homepage.css  v1.1
   Standalone component stylesheet for the homepage.
   WordPress-safe: no SVG data URIs, no encoded markup.
   All text colours WCAG AA compliant (min 4.5:1 contrast).

   Contrast reference:
     #7a2e00 on #ffffff  =  7.8:1
     #4d1c00 on #ffffff  = 11.2:1
     #1a1a2e on #ffffff  = 17.0:1
     #3d3d3d on #ffffff  =  8.6:1
     #595959 on #ffffff  =  7.0:1
     #ffffff on #7a2e00  =  7.8:1
     #155c35 on #d1f0e0  =  5.1:1

   Load order: after Astra parent stylesheet, before
   any page-builder or Elementor styles.
   ============================================================

   TABLE OF CONTENTS
   ─────────────────
   1.  Reset & base
   2.  Variables
   3.  Layout utilities
   4.  Hero
       4a. Hero rating strip
   5.  Brand band
   6.  About
   7.  SEO text block
   8.  Reviews
       8a. Aggregate rating
   9.  Tour cards
       9a. Pricing & badge row
   10. Decision shortcut (which tour?)
       10a. Trust & audience panels
   11. Why us / reasons
   12. Destination cards
   13. Seasons grid
   14. FAQ accordion
   15. Contact
   16. Sticky WhatsApp button
   17. Ninja Forms (form id=3)
   18. Page hero (interior pages)
   19. Breadcrumb
   20. Intro grid
   21. CTA banner
   22. Astra container overrides
   23. Accessibility utilities
   24. Responsive breakpoints
   ============================================================ */


/* ─── 1. RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

body {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ink);
  overflow-x: hidden;
}


/* ─── 2. VARIABLES ───────────────────────────────────────────── */
:root {
  --tc:    #c4622d;   /* terracotta primary */
  --tca:   #c4622d;   /* alias used in inline link styles */
  --tct:   #7a2e00;   /* terracotta dark — text on white */
  --tcd:   #4d1c00;   /* terracotta deeper — hover states */
  --sand:  #f5f0e6;   /* warm sand background */
  --ink:   #1a1a2e;   /* near-black — primary text */
  --muted: #3d3d3d;   /* body text on white */
  --subtle:#595959;   /* secondary labels, meta */
  --cream: #fdf6ec;   /* light warm cream */
  --dark:  #1a1209;   /* deep warm black */
}


/* ─── 3. LAYOUT UTILITIES ────────────────────────────────────── */
.section      { padding: 5rem 0; }
.section-alt  { background: #ffffff; }
.container    { max-width: 1080px; margin: 0 auto; padding: 0 2rem; }
.label        { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tct); margin-bottom: .8rem; }
.section-title{ font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 1.2rem; }
.section-sub  { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 1rem; }
.divider      { width: 48px; height: 3px; background: var(--tc); margin-bottom: 2rem; }
.section-lead { font-size: 1.05rem; color: var(--muted); max-width: 640px; line-height: 1.85; margin-bottom: 3rem; }


/* ─── 4. HERO ────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 70vh;
  max-height: 560px;
  min-height: 380px;
  overflow: hidden;
  background: #0f0a04;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,6,2,.25)  0%,
    rgba(10,6,2,.55) 50%,
    rgba(10,6,2,.82) 100%
  );
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.5rem 2.5rem;
}
.hero-badge {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,.6);
  padding: .3rem 1.1rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 1rem;
  background: rgba(0,0,0,.3);
}
.hero-headline {
  font-weight: 700;
  font-size: clamp(1.85rem, 5vw, 3.6rem);
  line-height: 1.12;
  color: #ffffff;
  max-width: 800px;
  margin-bottom: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #7a2e00;
  color: #ffffff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 2.4rem;
  min-height: 48px;
  border: 2px solid #7a2e00;
  margin-top: 0;
}
.hero-cta:hover {
  background: #4d1c00;
  border-color: #4d1c00;
  color: #ffffff;
}

/* 4a. Hero rating strip */
.hero-rating {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .9rem 0 1.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-stars {
  color: #f5a623;
  font-size: 1.15rem;
  letter-spacing: .05em;
  line-height: 1;
}
.hero-rating-text {
  color: #ffffff;
  font-size: .85rem;
  font-weight: 600;
  opacity: .95;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Hero subheading */
.hero-sub {
  font-size: clamp(.85rem, 1.8vw, 1.05rem);
  color: rgba(255,255,255,.88);
  font-weight: 400;
  letter-spacing: .03em;
  margin: .6rem 0 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* Dual CTA row */
.hero-cta-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.6rem;
}
.hero-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff !important;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.65) !important;
  padding-bottom: 2px;
  opacity: .92;
}
.hero-cta-ghost:hover { opacity: 1; border-bottom-color: #ffffff !important; color: #ffffff !important; }


/* ─── 5. BRAND BAND ──────────────────────────────────────────── */
.brand-band {
  background: #ffffff;
  border-top: 4px solid var(--tc);
  border-bottom: 1px solid #d0c8ba;
  padding: 2.2rem 2rem;
  text-align: center;
}
.brand-band h2         { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 700; color: var(--ink); margin-bottom: .5rem; line-height: 1.25; }
.brand-band-title      { font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: .6rem !important; max-width: 720px; margin-left: auto; margin-right: auto; }
.brand-band-lead       { font-size: .93rem; color: var(--muted); max-width: 720px; margin: 0 auto .8rem !important; line-height: 1.85; }
/* Quick-scan checklist — div-based, immune to Astra ul li styles */
.brand-band-list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .9rem;
}
.bbl-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  color: var(--muted);
  font-weight: 500;
}
.bbl-icon {
  color: var(--tc);
  font-weight: 800;
  font-size: .9rem;
  flex-shrink: 0;
}


/* ─── 6. ABOUT ───────────────────────────────────────────────── */
.about-grid    { display: grid; grid-template-columns: 380px 1fr; gap: 4rem; align-items: start; }
.about-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(26,18,9,.85); color: #ffffff; font-size: .78rem; padding: .6rem 1rem; }
.about-pull    { font-size: 1.25rem; font-style: italic; color: var(--tct); border-left: 3px solid var(--tc); padding-left: 1.2rem; margin: 1.2rem 0 1.5rem; line-height: 1.6; }
.about-subhead { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.about-body    { color: var(--muted); line-height: 1.85; margin-bottom: 1rem; font-size: .95rem; }


/* ─── 7. SEO TEXT BLOCK ──────────────────────────────────────── */
.seo-block    { background: #ffffff; border-left: 3px solid var(--tc); padding: 1.4rem 1.8rem; margin: 3rem 0 0; }
.seo-block h2 { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: .75rem; line-height: 1.3; }
.seo-block h3 { font-size: 1.05rem; font-weight: 700; color: var(--tct); margin: 1.1rem 0 .4rem; }
.seo-block p  { font-size: .92rem; color: var(--muted); line-height: 1.82; margin-bottom: .5rem; }


/* ─── 8. REVIEWS ─────────────────────────────────────────────── */
.pmt-wrap    { background: #ffffff; padding: 3rem 0; text-align: center; }
.pmt-wrap .container { text-align: center; }
.pmt-grid    { text-align: left; }
.pmt-eyebrow { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tct); font-weight: 700; display: block; margin-bottom: .5rem; }
.pmt-heading { font-size: 1.7rem; font-weight: 700; color: var(--ink); margin-bottom: .15rem; }
.pmt-bar     { width: 48px; height: 3px; background: var(--tc); margin: .75rem auto 2.2rem; }
.pmt-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pmt-card    { background: #ffffff; border: 1px solid #c8bfad; border-top: 3px solid var(--tc); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.pmt-card-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pmt-stars   { color: var(--tct); font-size: .9rem; letter-spacing: 2px; }
.pmt-ta      { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.pmt-ta svg  { width: 20px; height: 20px; }
.pmt-ta span { font-size: .65rem; font-weight: 700; color: var(--subtle); text-transform: uppercase; letter-spacing: .06em; }
.pmt-title   { font-size: .95rem; font-weight: 700; color: var(--ink); }
.pmt-text    { font-size: .86rem; color: var(--muted); line-height: 1.78; flex: 1; }
.pmt-footer  { border-top: 1px solid #c8bfad; padding-top: .7rem; display: flex; align-items: center; gap: .65rem; }
.pmt-avatar  { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #ffffff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pmt-name    { font-weight: 700; color: var(--ink); font-size: .82rem; }
.pmt-verified{ margin-left: auto; font-size: .68rem; color: #155c35; font-weight: 700; background: #d1f0e0; padding: .2rem .55rem; white-space: nowrap; }

/* 8a. Aggregate rating block */
.pmt-aggregate        { text-align: center !important; margin-bottom: 1.8rem; width: 100%; }
.pmt-aggregate-stars  { font-size: 1.6rem; color: #f5a623; letter-spacing: .06em; line-height: 1; display: block; text-align: center !important; }
.pmt-aggregate-label  { margin: .5rem 0 .7rem !important; font-weight: 700; font-size: 1rem; color: var(--ink); text-align: center !important; display: block; }
.pmt-aggregate-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tc) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--tct);
}
.pmt-aggregate-link:hover { color: var(--tcd) !important; border-bottom-color: var(--tcd); }


/* ─── 9. TOUR CARDS ──────────────────────────────────────────── */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.tour-card {
  display: grid;
  grid-template-rows: auto 1fr auto;  /* img | body | link */
  border: 1px solid #c8bfad;
  background: #ffffff;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .2s;
}
.tour-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
}
.tour-card:hover .tour-card-link {
  background: var(--tcd);
  color: #ffffff;
  border-top-color: var(--tcd);
}

/* Image pane */
.tour-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.tour-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-badge-wrap   { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; }
.tour-pop-badge    { display: inline-block; background: var(--ink); color: #ffffff; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; }

/* Body pane */
.tour-card-body { padding: 1rem 1.1rem .8rem; }
.tour-route     { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--subtle); margin-bottom: .3rem; }
.tour-title     { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: .4rem; }
.tour-meta      { font-size: .78rem; font-weight: 700; color: var(--tct); margin-bottom: .35rem; }
.tour-subtitle  { font-size: .78rem; font-weight: 700; color: var(--tct); margin-bottom: .4rem; }
.tour-desc      { font-size: .82rem; color: var(--muted); line-height: 1.65; }

/* VIEW TOUR footer — always pinned to bottom of card */
.tour-card-link {
  display: block;
  background: #ffffff;
  color: var(--ink);
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .8rem;
  border-top: 1px solid #c8bfad;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.tour-card-link:hover {
  background: var(--tcd);
  color: #ffffff;
  border-top-color: var(--tcd);
}

/* 9a. Pricing and badge row */
.tour-price-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .3rem 0 .5rem;
  flex-wrap: wrap;
}
.tour-badge-hot {
  display: inline-block;
  background: var(--tc);
  color: #ffffff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .22rem .55rem;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tour-badge-demand {
  display: inline-block;
  background: var(--ink);
  color: #ffffff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .22rem .55rem;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tour-price {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
}


/* ─── 10. DECISION SHORTCUT ──────────────────────────────────── */
/* This section reuses .reasons-grid and .reason-card from section 11.
   The two rows of cards sit on the default white section background.
   No additional component classes needed. */

/* 10a. Trust + audience panels — also reuse .reason-card, no extra CSS */


/* ─── 11. WHY US / REASONS ───────────────────────────────────── */
.standout-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.standout-card  { border-left: 3px solid var(--tc); padding: 1.2rem 1.5rem; background: #ffffff; }
.standout-card p{ color: var(--muted); font-size: .9rem; line-height: 1.75; }
.standout-title { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: .4rem; }

/* Quick-scan why list */
.why-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e8e2d8;
}
.why-item:first-child { border-top: 1px solid #e8e2d8; }
.why-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--tc);
  color: #ffffff;
  font-size: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: .1rem;
}
.why-item div {
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.7;
}
.why-item div strong {
  color: var(--ink);
  font-weight: 700;
  display: block;
  margin-bottom: .15rem;
  font-size: .96rem;
}
.why-cta-row {
  text-align: center;
  margin-top: 2rem;
}

/* Reasons grid — kept for choose-tour section */
.reasons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.reason-card  { background: #ffffff; border: 1px solid #c8bfad; border-left: 4px solid var(--tc); padding: 1.4rem 1.6rem; }
.reason-num   { font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tct); margin-bottom: .4rem; display: block; }
.reason-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .4rem; }
.reason-body  { font-size: .88rem; color: var(--muted); line-height: 1.75; margin: 0; }

/* ─── 11b. MID-PAGE CTA BAND ─────────────────────────────────── */
.mid-cta-band {
  background: var(--ink);
  padding: 2.8rem 2rem;
}
.mid-cta-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.mid-cta-heading {
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 .4rem !important;
  line-height: 1.3;
}
.mid-cta-sub {
  font-size: .88rem;
  color: rgba(255,255,255,.78);
  margin: 0 !important;
  line-height: 1.7;
  max-width: 520px;
}
.mid-cta-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ─── 11c. SEASON URGENCY BADGE ──────────────────────────────── */
.season-urgency {
  display: inline-block;
  margin-top: .4rem;
  font-size: .68rem;
  font-weight: 700;
  color: #7a3a00;
  background: #fff0e0;
  border: 1px solid #e8a060;
  padding: .18rem .5rem;
  letter-spacing: .03em;
}


/* ─── 12. DESTINATION CARDS ──────────────────────────────────── */
.dest-grid       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.dest-card       { border: 1px solid #c8bfad; padding: 1.5rem; background: #ffffff; }
.dest-card-title { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: .5rem; }
.dest-card p     { color: var(--muted); font-size: .88rem; line-height: 1.75; margin-bottom: .8rem; }
.dest-card a     { color: var(--tct); font-size: .82rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--tct); padding-bottom: 1px; }
.dest-card a:hover { color: var(--tcd); border-bottom-color: var(--tcd); }


/* ─── 13. SEASONS GRID ───────────────────────────────────────── */
.seasons-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.season-card   { border: 1px solid #c8bfad; padding: 1.2rem; background: #ffffff; }
.season-name   { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tct); margin-bottom: .4rem; display: block; }
.season-months { font-size: .78rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.season-body   { font-size: .82rem; color: var(--muted); line-height: 1.7; margin: 0; }
.season-rating { display: inline-block; margin-top: .6rem; font-size: .7rem; font-weight: 700; color: var(--tct); border: 1px solid var(--tct); padding: .15rem .5rem; }


/* ─── 14. FAQ ACCORDION — pure CSS checkbox pattern ─────────────
   Uses hidden <input type="checkbox"> + <label> — zero JS,
   zero button elements, zero Astra conflicts.
   ─────────────────────────────────────────────────────────────── */

/* Jump links */
.faq-jumps {
  font-size: .88rem;
  color: var(--subtle);
  margin-bottom: 2rem;
}
.faq-jumps a {
  color: var(--tct);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--tct);
  padding-bottom: 1px;
}
.faq-jumps a:hover { color: var(--tcd); border-bottom-color: var(--tcd); }

/* Group label */
.faq-group-label {
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tct) !important;
  margin: 2.5rem 0 .5rem !important;
  padding-top: .5rem;
  display: block;
}

/* Each row */
.faq-row { border-bottom: 1px solid #d0c8ba; }
.faq-row:first-of-type { border-top: 1px solid #d0c8ba; }

/* Hide the checkbox — it drives the open/close state */
.faq-check { display: none; }

/* The visible clickable label row */
.faq-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  font-size: .96rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
  user-select: none;
  /* no background, no border — pure text row */
  background: transparent;
}
.faq-label:hover { color: var(--tc); }

/* + icon — pure CSS, no SVG */
.faq-plus {
  flex-shrink: 0;
  min-width: 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--tc);
  position: relative;
  transition: background .2s;
}
.faq-plus::before,
.faq-plus::after {
  content: '';
  position: absolute;
  background: var(--tc);
  top: 50%;
  left: 50%;
  border-radius: 1px;
  transition: transform .2s, background .2s;
}
.faq-plus::before { width: 10px; height: 2px; transform: translate(-50%,-50%); }
.faq-plus::after  { width: 2px; height: 10px; transform: translate(-50%,-50%); }

/* When checked: filled + rotated to × */
.faq-check:checked + .faq-label .faq-plus             { background: var(--tc); }
.faq-check:checked + .faq-label .faq-plus::before,
.faq-check:checked + .faq-label .faq-plus::after      { background: #ffffff; }
.faq-check:checked + .faq-label .faq-plus::after      { transform: translate(-50%,-50%) rotate(45deg); }
.faq-check:checked + .faq-label .faq-plus::before     { transform: translate(-50%,-50%) rotate(45deg); }

/* Answer panel — hidden by default */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-panel-inner {
  overflow: hidden;
}
.faq-panel-inner p {
  padding-bottom: 1.2rem;
  margin: 0 !important;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Open state — checkbox checked reveals the panel */
.faq-check:checked ~ .faq-panel {
  grid-template-rows: 1fr;
}

/* Legacy static FAQ */
.faq-list             { list-style: none; padding: 0; margin: 0; }
.faq-list-item        { border-bottom: 1px solid #d0c8ba; padding: 1.2rem 0; }
.faq-list-item:first-child { border-top: 1px solid #d0c8ba; }
.faq-q                { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.faq-a                { font-size: .92rem; color: var(--muted); line-height: 1.82; }


/* ─── 15. CONTACT ────────────────────────────────────────────── */
.contact-inner        { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-info-item    { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.contact-info-item h4 { font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .08em; }
.contact-info-item a  { color: var(--tct); text-decoration: none; font-size: .9rem; font-weight: 600; }
.contact-info-item a:hover { color: var(--tcd); }
.contact-icon         { background: rgba(122,46,0,.12); width: 40px; height: 40px; border-left: 3px solid var(--tc); flex-shrink: 0; }
.contact-note         { margin-top: 2rem; padding: 1.2rem 1.5rem; border-left: 3px solid var(--tc); background: #fff8f4; }
.contact-note strong  { font-size: .88rem; font-weight: 700; color: var(--ink); line-height: 1.75; display: block; margin-bottom: .4rem; }
.contact-note p       { font-size: .88rem; color: var(--muted); line-height: 1.75; margin: 0; }


/* ─── 16. STICKY WHATSAPP BUTTON ─────────────────────────────── */
.pmt-whatsapp-sticky {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex !important;
  align-items: center;
  gap: .55rem;
  background: #25D366 !important;
  background-color: #25D366 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: .75rem 1.2rem .75rem .9rem;
  border-radius: 50px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
  border: none !important;
}
.pmt-whatsapp-sticky:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  color: #ffffff !important;
  background: #1ebe5d !important;
  background-color: #1ebe5d !important;
}
.pmt-whatsapp-sticky svg { flex-shrink: 0; }
.pmt-wa-label { color: #ffffff !important; }


/* ─── 17. NINJA FORMS (form id=3) ────────────────────────────── */
#nf-form-3-cont {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: #ffffff;
  width: 100%;
}
#nf-form-3-cont .nf-field-container {
  margin-bottom: 1.2rem;
  position: relative;
}
#nf-form-3-cont .nf-field-label label,
#nf-form-3-cont .nf-field-label .nf-label-span {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  display: block;
  margin-bottom: 0.45rem;
}
#nf-form-3-cont .ninja-forms-req-symbol { color: var(--tct); margin-left: 2px; }
#nf-form-3-cont input[type="text"],
#nf-form-3-cont input[type="email"],
#nf-form-3-cont input[type="tel"],
#nf-form-3-cont input[type="number"],
#nf-form-3-cont input[type="date"],
#nf-form-3-cont select,
#nf-form-3-cont textarea {
  width: 100%;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #c8bfad;
  border-left: 3px solid #c8bfad;
  border-radius: 0;
  padding: 0.8rem 1rem;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, border-left-color 0.15s;
  line-height: 1.5;
}
#nf-form-3-cont input[type="text"]:focus,
#nf-form-3-cont input[type="email"]:focus,
#nf-form-3-cont input[type="tel"]:focus,
#nf-form-3-cont input[type="number"]:focus,
#nf-form-3-cont input[type="date"]:focus,
#nf-form-3-cont select:focus,
#nf-form-3-cont textarea:focus {
  border-color: #c8bfad;
  border-left-color: var(--tc);
  background: #ffffff;
  box-shadow: none;
  outline: none;
}
#nf-form-3-cont input::placeholder,
#nf-form-3-cont textarea::placeholder { color: var(--subtle); font-weight: 400; }
#nf-form-3-cont textarea              { min-height: 140px; resize: vertical; line-height: 1.75; }
#nf-form-3-cont select                { cursor: pointer; padding-right: 2.8rem; }
#nf-form-3-cont input[type="radio"],
#nf-form-3-cont input[type="checkbox"] {
  accent-color: var(--tc);
  width: 16px;
  height: 16px;
  margin-right: 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
}
#nf-form-3-cont .nf-field-element label,
#nf-form-3-cont .listcheckbox-wrap label,
#nf-form-3-cont .listradio-wrap label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
#nf-form-3-cont input[type="button"],
#nf-form-3-cont input[type="submit"],
#nf-form-3-cont .nf-form-content button[type="submit"],
#nf-form-3-cont .submit-container input,
#nf-form-3-cont .nf-field-type-submit input {
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--tc);
  border: 2px solid var(--tc);
  border-radius: 0;
  padding: 1rem 2.4rem;
  min-height: 48px;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s, border-color 0.15s;
  display: inline-block;
  width: auto;
}
#nf-form-3-cont input[type="button"]:hover,
#nf-form-3-cont input[type="submit"]:hover,
#nf-form-3-cont .nf-form-content button[type="submit"]:hover,
#nf-form-3-cont .submit-container input:hover,
#nf-form-3-cont .nf-field-type-submit input:hover {
  background: var(--tcd);
  border-color: var(--tcd);
  color: #ffffff;
}
#nf-form-3-cont .nf-error input,
#nf-form-3-cont .nf-error textarea,
#nf-form-3-cont .nf-error select {
  border-color: #c8bfad;
  border-left-color: var(--tct);
  background: #ffffff;
}
#nf-form-3-cont .nf-error-msg,
#nf-form-3-cont .nf-error .nf-error-msg {
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tct);
  margin-top: 0.3rem;
  display: block;
}
#nf-form-3-cont .nf-response-msg,
#nf-form-3-cont .nf-response-msg p {
  font-family: "DM Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.85;
  background: #ffffff;
  border-left: 3px solid var(--tc);
  padding: 1.2rem 1.5rem;
  border-radius: 0;
  box-shadow: none;
}
#nf-form-3-cont .nf-form-fields-required {
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  color: var(--subtle);
  margin-bottom: 1.2rem;
  font-weight: 400;
}
#nf-form-3-cont .nf-form-content                { padding: 0; background: transparent; }
#nf-form-3-cont .nf-before-form-content,
#nf-form-3-cont .nf-after-form-content          { display: none; }
#nf-form-3-cont .nf-field-type-starrating .nf-rating-star { color: var(--tc); font-size: 1.4rem; cursor: pointer; }


/* ─── 18. PAGE HERO (interior pages) ─────────────────────────── */
.page-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  max-height: 460px;
  min-height: 320px;
  overflow: hidden;
  background: #0f0a04;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,6,2,.25)  0%,
    rgba(10,6,2,.60) 55%,
    rgba(10,6,2,.88) 100%
  );
}
.page-hero-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.5rem 2rem;
}
.page-hero-badge {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,.55);
  padding: .28rem 1rem;
  margin-bottom: .9rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: #ffffff;
  text-transform: uppercase;
  background: rgba(0,0,0,.25);
}
.page-hero-headline {
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.15;
  color: #ffffff;
  max-width: 760px;
  margin-bottom: .5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.page-hero-headline .hl { color: #fde8c0; font-style: italic; }
.page-hero-divider      { width: 48px; height: 1px; background: rgba(255,255,255,.5); margin: .8rem auto; }
.page-hero-sub {
  font-size: clamp(.72rem, 1.3vw, .88rem);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1.5rem;
}
.page-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #7a2e00;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 2rem;
  min-height: 48px;
  border: 2px solid #7a2e00;
}
.page-hero-cta:hover { background: #4d1c00; border-color: #4d1c00; color: #ffffff; }


/* ─── 19. BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb       { background: #f5f0e6; border-bottom: 1px solid #d0c8ba; padding: .75rem 0; }
.breadcrumb-inner { max-width: 1080px; margin: 0 auto; padding: 0 2rem; font-size: .78rem; color: var(--muted); }
.breadcrumb-inner a       { color: var(--tct); text-decoration: none; font-weight: 600; }
.breadcrumb-inner a:hover { text-decoration: underline; }
.breadcrumb-inner span    { margin: 0 .4rem; color: var(--subtle); }


/* ─── 20. INTRO GRID ─────────────────────────────────────────── */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.intro-body { font-size: .95rem; color: var(--muted); line-height: 1.85; margin-bottom: 1rem; }
.intro-h3   { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 1.4rem 0 .5rem; }


/* ─── 21. CTA BANNER ─────────────────────────────────────────── */
.cta-banner    { background: var(--ink); padding: 3.5rem 2rem; text-align: center; }
.cta-banner h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; color: #ffffff; margin-bottom: .6rem; }
.cta-banner p  { font-size: .95rem; color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 1.8rem; line-height: 1.8; }
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tc);
  color: #ffffff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .9rem 2.2rem;
  min-height: 48px;
  border: 2px solid var(--tc);
}
.cta-btn:hover { background: var(--tcd); border-color: var(--tcd); color: #ffffff; }
.cta-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.9);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
  margin-left: 1.5rem;
}
.cta-btn-ghost:hover { color: #ffffff; border-bottom-color: #ffffff; }


/* ─── 22. ASTRA CONTAINER OVERRIDES ─────────────────────────── */
/* Force hero dimensions inside Astra's entry-content wrapper */
.hero,
.entry-content .hero,
.wp-block-html .hero {
  min-height: 380px !important;
  height: 70vh !important;
  max-height: 560px !important;
}
.hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}
.hero-content {
  position: relative !important;
  z-index: 3 !important;
  height: 100% !important;
}


/* ─── 23. ACCESSIBILITY UTILITIES ────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ─── 24. RESPONSIVE BREAKPOINTS ─────────────────────────────── */
@media (max-width: 860) {
}

@media (max-width: 900px) {
  .tours-grid { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 760px) {
  .intro-grid { grid-template-columns: 1fr; }
  .page-hero  { height: 50vh; }
}

@media (max-width: 720px) {
  .standout-grid { grid-template-columns: 1fr; }
  .pmt-grid      { grid-template-columns: 1fr; }
  .reasons-grid  { grid-template-columns: 1fr; }
  .seasons-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hero,
  .entry-content .hero,
  .wp-block-html .hero {
    min-height: 420px !important;
    height: 85vh !important;
    max-height: none !important;
  }
  .hero-img      { object-position: center center; }
  .hero-headline { font-size: clamp(1.65rem, 7vw, 2.4rem); }
  .hero-cta      { padding: .85rem 1.8rem; font-size: .72rem; }
  .page-hero     { min-height: 300px; height: 55vh; }
}

@media (max-width: 560px) {
  .tours-grid { grid-template-columns: 1fr; }
  .dest-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .seasons-grid { grid-template-columns: 1fr; }
  /* WhatsApp pill collapses to icon-only circle */
  .pmt-whatsapp-sticky .pmt-wa-label { display: none; }
  .pmt-whatsapp-sticky               { padding: .85rem; border-radius: 50%; }
}

/* ── ABOUT IMAGE & CAPTION FIX ── */
.about-caption {
  display: none !important;
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-grid > div:first-child {
    position: relative;
  }

  .about-grid > div:first-child img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: top center;
    display: block;
  }
}

@media (max-width: 560px) {
  .about-grid > div:first-child img {
    height: 380px;
  }
}