/*
Theme Name: Epic Paradise Tours
Theme URI: https://epicparadisetours.co.za/
Author: Epic Paradise Tours
Description: Custom showcase theme for Epic Paradise Tours — Eastern Cape hunting, fishing and holiday safaris. Palette taken from the brand logo; forest green anchors, gold accents.
Version: 5.0.0
Text Domain: ept
*/

:root {
  /* Logo palette — green is the logo ground, so it anchors the brand */
  --ept-green: #0175be;
  --ept-green-deep: #0d5385; /* was olive #31452a - client asked for their blue */
  --ept-green-mid: #2a8fd0;
  --ept-gold: #d6c43e;
  --ept-gold-deep: #b8a52c;
  --ept-blue: #0175be;
  --ept-navy: #0d5385;

  /* Neutrals */
  --ept-paper: #fbfaf6;
  --ept-sand: #f2efe6;
  --ept-line: #e2ddcd;
  --ept-ink: #22384a;
  --ept-ink-soft: #53606b;

  --ept-max: 1440px;
  --ept-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ept-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ept-sans);
  color: var(--ept-ink);
  background: var(--ept-paper);
  line-height: 1.7;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--ept-serif);
  font-weight: 300;
  color: var(--ept-green-deep);
  margin: 0 0 0.4em;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.ept-container { max-width: var(--ept-max); margin: 0 auto; padding: 0 40px; }
.ept-narrow { max-width: 780px; }

/* Eyebrow — gold hairline, used everywhere as the brand signature */
.ept-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--ept-ink-soft);
  margin-bottom: 20px;
}
.ept-eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--ept-gold);
}
.ept-eyebrow.ept-on-dark { color: rgba(255,255,255,0.7); }
.ept-eyebrow.ept-centered { justify-content: center; }

/* ===== Header — always the same green as the footer, scrolled or not ===== */
.ept-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ept-green-deep);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ept-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  max-width: var(--ept-max);
  margin: 0 auto;
}

.ept-logo img { height: 78px; width: auto; }
.ept-logo a { font-family: var(--ept-serif); font-size: 1.4rem; color: #fff; }

.ept-nav ul {
  list-style: none; display: flex; align-items: center;
  gap: 38px; margin: 0; padding: 0;
}

.ept-nav a {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  position: relative;
  padding-bottom: 3px;
}

.ept-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--ept-gold);
  transition: width 0.25s;
}
.ept-nav a:hover::after { width: 100%; }

/* ===== Dropdown submenu (Experiences > South Africa / Madagascar) ===== */
.ept-nav li { position: relative; }
.ept-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: -20px;
  flex-direction: column; align-items: flex-start; gap: 0;
  background: var(--ept-green-deep); min-width: 240px;
  padding: 14px 0 10px; margin-top: 0;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  z-index: 20;
}
.ept-nav li.ept-sub-open > .sub-menu { display: flex; }
.ept-nav .sub-menu a {
  display: block; width: 100%; padding: 12px 20px;
  white-space: nowrap; font-size: 0.74rem;
}
.ept-nav .sub-menu a::after { display: none; }
.ept-nav .sub-menu a:hover { background: rgba(255,255,255,0.06); color: var(--ept-gold); }
.ept-nav .menu-item-has-children > a { padding-right: 14px; }
.ept-nav .menu-item-has-children > a::before {
  content: "\25BE"; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  font-size: 0.95rem; line-height: 1; color: rgba(255,255,255,0.85);
}

.ept-header-cta {
  border: 1px solid rgba(255,255,255,0.45) !important;
  padding: 10px 22px;
  border-radius: 0;
}
.ept-header-cta::after { display: none !important; }
.ept-header-cta:hover { background: var(--ept-gold); border-color: var(--ept-gold) !important; color: var(--ept-green-deep) !important; }

.ept-menu-toggle {
  display: none; background: none; border: none;
  color: #fff; font-size: 1.6rem; cursor: pointer;
}

/* ===== Left sidebar nav (desktop) =====
   The header moves off the top of the page entirely and becomes a fixed
   left rail — collapsed to just the logo by default, expanding over the
   page content on hover/focus rather than pushing it (no reflow while the
   width transitions). Mobile keeps the original top-bar + hamburger,
   unaffected by anything in this block. */
@media (min-width: 701px) {
  body { padding-left: 76px; }
  .ept-header {
    position: fixed; top: 0; left: 0; height: 100vh; width: 76px;
    display: flex; overflow: hidden; background: var(--ept-green-deep);
    border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08);
    transition: width 0.26s cubic-bezier(.4,0,.2,1); z-index: 200;
  }
  .ept-header:hover, .ept-header:focus-within {
    width: 248px; box-shadow: 12px 0 44px rgba(0,0,0,0.32);
  }
  .ept-header-inner {
    display: flex; flex-direction: column; align-items: stretch;
    max-width: none; margin: 0; padding: 18px 0 20px;
    width: 248px; height: 100%; box-sizing: border-box;
  }

  /* Logo: mark only while collapsed, mark + wordmark space once open. */
  .ept-logo {
    flex-shrink: 0; margin: 0 0 22px; height: 52px;
    display: flex; align-items: center; padding-left: 18px;
  }
  .ept-logo img { max-width: 40px; height: auto; transition: max-width 0.26s ease; }
  .ept-header:hover .ept-logo img, .ept-header:focus-within .ept-logo img { max-width: 52px; }

  .ept-nav { flex: 1; overflow-y: auto; overflow-x: hidden; width: 100%; padding: 0 10px; }
  .ept-nav::-webkit-scrollbar { width: 4px; }
  .ept-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
  .ept-nav ul { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .ept-nav li { width: 100%; }

  /* Row = icon chip + label, in a rounded pill that highlights on hover and
     for the current page. Label is clipped by .ept-header's overflow while
     collapsed, so nothing needs to fade. */
  /* gap is load-bearing: icon occupies 22–54px (centred in the 76px rail),
     so the label must start past 76px or its first letters show through
     while collapsed. 54 + 26 = 80px clears it. */
  .ept-nav > ul > li > a {
    display: flex; align-items: center; gap: 26px;
    height: 46px; padding: 0 12px; border-radius: 10px;
    color: rgba(255,255,255,0.82); white-space: nowrap; position: relative;
    transition: background 0.18s, color 0.18s;
  }
  .ept-nav > ul > li > a::after,
  .ept-nav > ul > li > a::before { display: none !important; }
  .ept-nav > ul > li > a:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .ept-nav > ul > li.current-menu-item > a,
  .ept-nav > ul > li.current-menu-parent > a,
  .ept-nav > ul > li.current-menu-ancestor > a {
    background: rgba(214,196,62,0.14); color: #fff;
  }

  .ept-nav-icon {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07); color: var(--ept-gold);
    transition: background 0.18s, color 0.18s;
  }
  .ept-nav-icon svg { width: 17px; height: 17px; display: block; }
  .ept-nav > ul > li > a:hover .ept-nav-icon { background: rgba(214,196,62,0.2); }
  .ept-nav > ul > li.current-menu-item > a .ept-nav-icon,
  .ept-nav > ul > li.current-menu-parent > a .ept-nav-icon,
  .ept-nav > ul > li.current-menu-ancestor > a .ept-nav-icon {
    background: var(--ept-gold); color: var(--ept-green-deep);
  }
  .ept-nav-label {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  }

  /* Dropdown caret sits at the row's right edge, only meaningful once open. */
  .ept-nav .menu-item-has-children > a .ept-nav-label::after {
    content: "\25BE"; position: absolute; right: 14px; font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
  }
  .ept-nav .sub-menu {
    position: static; display: none; margin: 2px 0 6px; padding: 0 0 0 46px;
    min-width: 0; border: none; box-shadow: none; background: transparent;
  }
  /* Click to open, not hover: the parent row gets .ept-sub-open from JS.
     Hovering a row while walking down the rail used to fling submenus
     open under the cursor, which is what made the nav feel unstable. */
  .ept-nav li.ept-sub-open > .sub-menu { display: flex; }
  .ept-nav .sub-menu a {
    padding: 7px 10px; font-size: 0.66rem; letter-spacing: 1.1px;
    color: rgba(255,255,255,0.62); border-radius: 8px; white-space: nowrap;
  }
  .ept-nav .sub-menu a:hover { color: #fff; background: rgba(255,255,255,0.07); }

  /* Bottom CTA, like AWD's WhatsApp button: an icon-sized gold button while
     collapsed, widening to the full rail on hover. Width is constrained
     (rather than left to the 248px inner) so the button does not bleed out
     past the 76px rail and get sliced by the header's overflow. Its icon
     stays on the same 22–54px column as the nav icons above, so nothing
     shifts sideways when the rail opens. */
  /* WordPress puts a menu item's custom class on the <li>, and the walker
     copies it onto the <a> too. Style the anchor, and match .ept-nav li's
     specificity or better — a plain .ept-header-cta rule loses to
     `.ept-nav li { width: 100% }` and the button bleeds past the rail. */
  /* The base .ept-header-cta rule (built for the old top bar) puts padding
     and a border on this <li>. Left in place they offset the button by 22px
     — pushing it out past the rail — and draw a stray outline around it. */
  .ept-nav > ul > li.ept-header-cta {
    margin-top: 14px; padding: 0 !important; border: none !important;
  }
  .ept-nav > ul > li.ept-header-cta > a {
    display: flex; align-items: center; gap: 26px;
    height: 46px; padding: 0 12px; margin: 0;
    width: 56px; overflow: hidden; transition: width 0.26s cubic-bezier(.4,0,.2,1);
    border: none; border-radius: 10px;
    background: var(--ept-gold); color: var(--ept-green-deep);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  }
  .ept-nav > ul > li.ept-header-cta > a .ept-nav-icon {
    flex: 0 0 32px; background: rgba(13,83,133,0.16); color: var(--ept-green-deep);
  }
  .ept-nav > ul > li.ept-header-cta > a:hover { background: var(--ept-gold-deep); }
  .ept-header:hover .ept-nav > ul > li.ept-header-cta > a,
  .ept-header:focus-within .ept-nav > ul > li.ept-header-cta > a {
    width: 100%;
  }

  .ept-hero { min-height: 100vh; }
  .ept-page-hero { min-height: 100vh; }
}

/* ===== Hero — cinematic, full viewport ===== */
.ept-hero {
  position: relative;
  /* header is sticky and in-flow now, so subtract it to still fill one screen
     (78px logo + 14px padding top/bottom + 1px border = 107px) */
  min-height: calc(100vh - 107px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--ept-green-deep);
}

.ept-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}


.ept-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--ept-max);
  margin: 0 auto;
  /* bottom padding clears the absolutely-positioned credential bar */
  padding: 56px 40px 104px;
  width: 100%;
}

.ept-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  text-transform: uppercase; letter-spacing: 3.5px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--ept-gold);
  margin-bottom: 26px;
}
.ept-hero-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--ept-gold); }

.ept-hero h1 {
  color: #fff;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.98;
  max-width: 15ch;
  margin-bottom: 28px;
  font-weight: 300;
}

.ept-hero h1 em {
  font-style: italic;
  color: var(--ept-gold);
}

.ept-hero p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  max-width: 48ch;
  margin-bottom: 40px;
  font-weight: 300;
}

.ept-hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }

/* Hero credential bar — the named PH is the trust signal in this market */
.ept-hero-credit {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.15);
  /* Solid tint rather than backdrop-filter — blurring over a playing video costs
     a re-blur every frame on the compositor. */
  background: rgba(9,64,104,0.78);
}

.ept-hero-credit-inner {
  max-width: var(--ept-max);
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: center;
}

.ept-hero-credit span {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.75);
  display: flex; align-items: center; gap: 10px;
}
.ept-hero-credit span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ept-gold);
}

/* ===== Buttons ===== */
.ept-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 34px;
  background: var(--ept-gold);
  color: var(--ept-green-deep);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 0.76rem;
  transition: background 0.25s, transform 0.25s;
}
.ept-btn:hover { background: #e3d461; transform: translateY(-2px); }

.ept-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
}
.ept-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.ept-btn-green { background: var(--ept-green); color: #fff; }
.ept-btn-green:hover { background: var(--ept-green-mid); }

/* ===== Sections ===== */
.ept-section { padding: 130px 0; }
.ept-section-sand { background: var(--ept-sand); }
.ept-section-green { background: var(--ept-green-deep); color: rgba(255,255,255,0.85); }
.ept-section-green h2, .ept-section-green h3 { color: #fff; }

.ept-head { max-width: 720px; margin-bottom: 68px; }
.ept-head.ept-centered { margin-left: auto; margin-right: auto; text-align: center; }
.ept-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
.ept-head p { color: var(--ept-ink-soft); font-size: 1.06rem; margin: 16px 0 0; font-weight: 300; }
.ept-section-green .ept-head p { color: rgba(255,255,255,0.72); }

/* ===== Experience cards — tall portrait, editorial ===== */
.ept-experiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.ept-exp {
  position: relative;
  aspect-ratio: 3/4.4;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--ept-green);
}

.ept-exp-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.9s cubic-bezier(.2,.7,.3,1);
}
.ept-exp:hover .ept-exp-bg { transform: scale(1.07); }

.ept-exp::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,83,133,0.15) 30%, rgba(13,83,133,0.88) 100%);
  transition: background 0.4s;
}
.ept-exp:hover::after { background: linear-gradient(180deg, rgba(13,83,133,0.3) 20%, rgba(13,83,133,0.94) 100%); }

.ept-exp-body { position: relative; z-index: 2; padding: 44px 36px; width: 100%; }

.ept-exp-num {
  font-family: var(--ept-serif);
  font-size: 0.9rem;
  color: var(--ept-gold);
  letter-spacing: 2px;
  display: block;
  margin-bottom: 14px;
}

.ept-exp h3 { color: #fff; font-size: 2rem; margin-bottom: 10px; }

.ept-exp p {
  color: rgba(255,255,255,0.8);
  font-size: 0.94rem;
  font-weight: 300;
  margin: 0 0 20px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.5s, opacity 0.4s;
}
.ept-exp:hover p { max-height: 140px; opacity: 1; }

.ept-exp-more {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ept-gold); display: inline-flex; align-items: center; gap: 8px;
}

/* ===== Guides — the human credential ===== */
.ept-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }

.ept-guides-media {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--ept-green-mid);
  background-size: cover; background-position: center;
}
.ept-guides-media::before {
  content: ""; position: absolute;
  inset: 24px -24px -24px 24px;
  border: 1px solid var(--ept-gold);
  z-index: -1;
}

.ept-guide-row { display: flex; gap: 40px; margin-top: 34px; flex-wrap: wrap; }
.ept-guide-name { font-family: var(--ept-serif); font-size: 1.35rem; color: var(--ept-green-deep); }
.ept-guide-role {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ept-ink-soft); margin-top: 2px;
}

.ept-quote {
  font-family: var(--ept-serif);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--ept-green);
  line-height: 1.4;
  border-left: 1px solid var(--ept-gold);
  padding-left: 28px;
  margin: 32px 0;
  font-weight: 300;
}

/* ===== Terrain / what you'll experience strip ===== */
.ept-terrain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.14); }
.ept-terrain-item { background: var(--ept-green-deep); padding: 46px 30px; }
.ept-terrain-item h4 {
  font-family: var(--ept-sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px; color: var(--ept-gold);
  margin-bottom: 12px;
}
.ept-terrain-item p { margin: 0; font-size: 0.95rem; color: rgba(255,255,255,0.75); font-weight: 300; }

/* ===== Testimonials ===== */
.ept-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.ept-quote-card p {
  font-family: var(--ept-serif); font-size: 1.2rem; font-weight: 300;
  color: var(--ept-green-deep); line-height: 1.5;
}
.ept-quote-mark { font-family: var(--ept-serif); font-size: 3.4rem; color: var(--ept-gold); line-height: 0.6; display: block; margin-bottom: 18px; }
.ept-quote-by { margin-top: 20px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: var(--ept-ink-soft); }

/* ===== Closing CTA — light, so it never stacks dark-on-dark with the footer ===== */
.ept-cta {
  position: relative;
  padding: 150px 40px;
  text-align: center;
  background: var(--ept-sand);
  color: var(--ept-ink);
  overflow: hidden;
  border-top: 1px solid var(--ept-line);
}
.ept-cta > * { position: relative; z-index: 1; }
.ept-cta h2 { color: var(--ept-green-deep); font-size: clamp(2.4rem, 5vw, 4rem); max-width: 18ch; margin: 0 auto 20px; }
.ept-cta p { color: var(--ept-ink-soft); max-width: 46ch; margin: 0 auto 40px; font-weight: 300; font-size: 1.08rem; }
.ept-cta .ept-btn { background: var(--ept-green-deep); color: #fff; }
.ept-cta .ept-btn:hover { background: var(--ept-green); }
.ept-cta-contact { margin-top: 44px; display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
.ept-cta-contact a { color: var(--ept-green); font-size: 0.85rem; letter-spacing: 1px; font-weight: 500; }
.ept-cta-contact a:hover { color: var(--ept-gold-deep); }
.ept-cta-contact a:hover { color: var(--ept-gold); }
.ept-section-green .ept-cta-contact a { color: #fff; }
.ept-section-green .ept-cta-contact a:hover { color: var(--ept-gold); }

/* ===== Tour archive ===== */
.ept-tours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 44px; }
.ept-tour-card { display: block; }
.ept-tour-media {
  aspect-ratio: 3/4; background: var(--ept-green-mid);
  background-size: cover; background-position: center;
  margin-bottom: 22px; position: relative; overflow: hidden;
}
.ept-tour-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,83,133,0.7)); }
.ept-tour-meta {
  display: flex; gap: 18px; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 2px; color: var(--ept-ink-soft); margin-bottom: 10px;
}
.ept-tour-card h3 { font-size: 1.6rem; margin-bottom: 8px; }
.ept-tour-card p { color: var(--ept-ink-soft); font-size: 0.95rem; font-weight: 300; }
.ept-tour-link { display: inline-block; margin-top: 12px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: var(--ept-green); border-bottom: 1px solid var(--ept-gold); padding-bottom: 3px; }

/* Page header for inner pages — same wash and eyebrow language as the homepage
   hero, just shorter, so every page in the site reads as one design system. */
.ept-page-hero {
  position: relative;
  /* Same height as the homepage hero (header is sticky/in-flow, so subtract it
     the same way) — every hero in the site fills one screen, not just the
     homepage's. */
  min-height: calc(100vh - 107px);
  display: flex; align-items: flex-end;
  background: var(--ept-green-deep); color: #fff; overflow: hidden;
}
.ept-page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* Hero photos and video show at their original brightness — no overlay, tint or
   gradient over the image. The copy sits on its own brand-green panel instead, so
   white text stays legible over bright shots (white sand, sky) without dimming them. */
/* Kept compact: the panel is there to carry the copy, not to cover the footage. */
.ept-hero-panel {
  display: inline-block;
  max-width: min(480px, 100%);
  background: rgba(13,83,133,0.9);
  border-left: 3px solid var(--ept-gold);
  padding: 24px 28px 26px;
}
.ept-hero-panel .ept-hero-eyebrow { margin-bottom: 12px; font-size: 0.66rem; letter-spacing: 3px; }
.ept-hero-panel .ept-hero-eyebrow::before { width: 28px; }
.ept-hero .ept-hero-panel h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.02; max-width: none; margin-bottom: 14px; }
.ept-page-hero .ept-hero-panel h1 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.05; margin-top: 0; margin-bottom: 0; }
.ept-hero .ept-hero-panel p { font-size: 0.98rem; line-height: 1.6; margin-bottom: 20px; }
.ept-page-hero .ept-hero-panel p { font-size: 0.95rem; margin-top: 10px; }
.ept-hero-panel .ept-hero-actions { gap: 12px; }
.ept-hero-panel .ept-btn { padding: 13px 22px; }
.ept-hero-panel > :last-child { margin-bottom: 0; }
/* Phones: the panel sits low and stays small so the footage leads the screen. */
@media (max-width: 700px) {
  .ept-hero-panel { padding: 14px 16px 16px; max-width: 100%; border-left-width: 2px; }
  .ept-hero-panel .ept-hero-eyebrow { font-size: 0.58rem; letter-spacing: 2px; margin-bottom: 6px; gap: 8px; }
  .ept-hero-panel .ept-hero-eyebrow::before { width: 18px; }
  .ept-hero .ept-hero-panel h1 { font-size: 1.65rem; margin-bottom: 6px; }
  .ept-page-hero .ept-hero-panel h1 { font-size: 1.5rem; }
  .ept-hero .ept-hero-panel p { font-size: 0.82rem; line-height: 1.45; margin-bottom: 12px; }
  .ept-page-hero .ept-hero-panel p { font-size: 0.82rem; margin-top: 4px; }
  .ept-hero-panel .ept-hero-actions { gap: 8px; flex-wrap: nowrap; }
  .ept-hero-panel .ept-btn { padding: 10px 12px; font-size: 0.64rem; letter-spacing: 1.1px; flex: 1 1 0; justify-content: center; }
  section.ept-hero { align-content: flex-end; }
  .ept-hero .ept-hero-inner { padding-top: 0; padding-bottom: 16px; }
  .ept-page-hero .ept-page-hero-inner { padding-bottom: 20px; }
}
.ept-page-hero-inner { position: relative; z-index: 2; max-width: var(--ept-max); margin: 0 auto; padding: 0 40px 76px; width: 100%; }
.ept-page-hero .ept-hero-eyebrow { color: var(--ept-gold); }
.ept-page-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); margin-top: 22px; }

.ept-page-content { max-width: 780px; margin: 0 auto; padding: 100px 40px; }
.ept-page-content h2 { font-size: 2rem; margin-top: 1.6em; }

/* ===== Footer ===== */
.ept-footer { background: var(--ept-green-deep); color: rgba(255,255,255,0.6); padding: 90px 0 30px; }
.ept-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 60px; }
.ept-footer-logo { height: 126px; width: auto; margin-bottom: 24px; }
.ept-footer p { font-weight: 300; font-size: 0.94rem; max-width: 34ch; }
.ept-footer h4 {
  font-family: var(--ept-sans); color: #fff; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 18px;
}
.ept-footer ul { list-style: none; padding: 0; margin: 0; }
.ept-footer li { margin-bottom: 12px; font-size: 0.92rem; font-weight: 300; }
.ept-footer a:hover { color: var(--ept-gold); }
.ept-socials { display: flex; gap: 18px; }
.ept-socials a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; letter-spacing: 1px; transition: all 0.25s;
}
.ept-socials a:hover { background: var(--ept-gold); border-color: var(--ept-gold); color: var(--ept-green-deep); }
.ept-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 26px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.78rem; color: rgba(255,255,255,0.42);
}

/* ===== Reveal on scroll =====
   Content is visible by default. The hidden start state is only applied once JS
   has confirmed it can drive the reveal (html.ept-js), so a script failure,
   a blocked IntersectionObserver or no-JS can never leave the page blank. */
.ept-js .ept-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.3,1);
}
.ept-js .ept-reveal.ept-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ept-js .ept-reveal { opacity: 1; transform: none; transition: none; }
  .ept-exp-bg, .ept-hero-bg { transition: none; }
}

/* ===== Full-bleed immersive media band =====
   A photo break between text sections, edge-to-edge regardless of the
   container width. The image starts slightly over-scaled and settles to its
   true size as the band scrolls into view (paired with .ept-reveal's existing
   fade/rise), then drifts a few px with scroll for a light parallax feel. */
.ept-bleed { position: relative; height: 62vh; min-height: 400px; max-height: 640px; overflow: hidden; background: var(--ept-green-deep); }
.ept-bleed-media {
  position: absolute; inset: -6% -2%; background-size: cover; background-position: center;
  transform: scale(1.14); transition: transform 2.4s cubic-bezier(.16,.8,.24,1);
  will-change: transform;
}
.ept-js .ept-bleed.ept-in .ept-bleed-media { transform: scale(1.02); }
.ept-bleed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,32,54,0.55) 0%, transparent 32%, transparent 68%, rgba(6,32,54,0.22) 100%);
}
.ept-bleed-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: var(--ept-max); margin: 0 auto; padding: 0 40px 34px;
}
.ept-bleed-caption p {
  color: #fff; font-family: var(--ept-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.5rem); max-width: 46ch; margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ept-bleed-media { transition: none; transform: none !important; }
}

/* Short/windowed viewports: tighten the hero so the credential bar stays on screen */
@media (max-height: 850px) {
  .ept-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); margin-bottom: 20px; }
  .ept-hero p { font-size: 1.02rem; margin-bottom: 28px; }
  .ept-hero-eyebrow { margin-bottom: 18px; }
  .ept-hero-inner { padding: 36px 40px 92px; }
  .ept-hero-credit-inner { padding: 16px 40px; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .ept-experiences { grid-template-columns: 1fr; }
  .ept-exp { aspect-ratio: 16/10; }
  .ept-exp p { max-height: 140px; opacity: 1; }
  .ept-guides { grid-template-columns: 1fr; gap: 50px; }
  .ept-terrain { grid-template-columns: repeat(2, 1fr); }
  .ept-quotes { grid-template-columns: 1fr; gap: 44px; }
  .ept-footer-grid { grid-template-columns: 1fr 1fr; }
  .ept-section { padding: 90px 0; }
}

@media (max-width: 700px) {
  .ept-container, .ept-header-inner, .ept-hero-inner { padding-left: 24px; padding-right: 24px; }
  .ept-nav { display: none; }
  .ept-menu-toggle { display: block; }
  .ept-nav.ept-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ept-green-deep); padding: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .ept-nav.ept-open ul { flex-direction: column; gap: 20px; align-items: flex-start; }
  .ept-nav.ept-open a { color: #fff; }
  .ept-nav.ept-open .sub-menu {
    display: flex; position: static; box-shadow: none; border: none;
    background: transparent; min-width: 0; margin: 10px 0 0 18px; padding: 0;
    gap: 14px;
  }
  .ept-nav.ept-open .menu-item-has-children > a::before { display: none; }
  .ept-terrain { grid-template-columns: 1fr; }
  .ept-footer-grid { grid-template-columns: 1fr; }
  .ept-hero-credit { position: static; background: var(--ept-green); }
  /* Static credit bar is a flex item here — wrap it onto its own row so it does
     not squeeze the hero copy into a narrow column. */
  .ept-hero { flex-wrap: wrap; align-content: center; }
  .ept-hero-credit { width: 100%; }
  /* Compact on phones: one tight wrapped strip, not three tall rows. */
  .ept-hero .ept-hero-credit-inner { padding: 10px 16px; gap: 4px 14px; justify-content: center; }
  .ept-hero .ept-hero-credit span { font-size: 0.58rem; letter-spacing: 1.2px; gap: 6px; }
  .ept-hero .ept-hero-credit span::before { width: 4px; height: 4px; }
}

/* ===== Video hero ===== */
.ept-hero-video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ept-hero-video .ept-hero-inner,
.ept-hero-video .ept-hero-credit { z-index: 2; }

/* ===== Intro ===== */
.ept-intro { max-width: 860px; margin: 0 auto; text-align: center; }
.ept-intro .ept-eyebrow { justify-content: center; }
.ept-intro h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 28px; }
.ept-intro p { font-size: 1.12rem; font-weight: 300; color: var(--ept-ink-soft); margin-bottom: 22px; }

/* ===== Flagship destinations =====
   These sit inside the intro's container rather than full-bleed, so they read as a
   continuation of "Your adventure. Your way." instead of two separate slabs. */
.ept-destinations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--ept-line);
}

.ept-dest {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: var(--ept-green-deep);
}

.ept-dest-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.9s cubic-bezier(.2,.7,.3,1);
}
.ept-dest:hover .ept-dest-bg { transform: scale(1.06); }

.ept-dest::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,32,54,0.15) 0%, rgba(6,32,54,0.55) 45%, rgba(6,32,54,0.94) 100%);
}

.ept-dest-body { position: relative; z-index: 2; padding: 34px 32px; }

.ept-dest-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: 2.5px;
  font-size: 0.7rem; font-weight: 700; color: var(--ept-gold);
  margin-bottom: 14px;
}
.ept-dest-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--ept-gold); }

.ept-dest h3 { color: #fff; font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: 8px; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.ept-dest p { color: rgba(255,255,255,0.9); font-size: 0.94rem; font-weight: 300; max-width: 40ch; margin: 0 0 16px; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.ept-dest-eyebrow { text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.ept-dest-link {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ept-gold); font-weight: 600;
}

/* ===== Experience cards =====
   Gutter rather than a 4px seam, so these read as three cards belonging to the
   heading above them instead of one solid slab. */
.ept-experiences {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 48px;
  border-top: 1px solid var(--ept-line);
}

.ept-exp-card {
  background: var(--ept-paper);
  padding: 36px 32px;
  border-top: 2px solid var(--ept-gold);
}
.ept-exp-card h3 { font-size: 1.45rem; margin-bottom: 12px; }
.ept-exp-card p { color: var(--ept-ink-soft); font-size: 0.96rem; font-weight: 300; margin: 0; }

/* ===== Why grid ===== */
.ept-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.14); }
.ept-why-item { background: var(--ept-green-deep); padding: 44px 34px; }
.ept-why-num {
  display: block; font-family: var(--ept-serif); font-size: 1.6rem;
  color: var(--ept-gold); margin-bottom: 14px; line-height: 1;
}
.ept-why-item h4 {
  font-family: var(--ept-sans); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 10px;
}
.ept-why-item p { margin: 0; font-size: 0.95rem; color: rgba(255,255,255,0.75); font-weight: 300; }

/* ===== Services =====
   Laid out as wrapping tabs across the full width. As a two-column vertical list
   it ran ~300px taller than the copy beside it and unbalanced the section. */
.ept-service-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.ept-service-tags li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: var(--ept-paper);
  border: 1px solid var(--ept-line);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ept-ink);
  transition: border-color 0.25s, transform 0.25s;
}

.ept-service-tags li::before {
  content: "\2726";
  color: var(--ept-gold);
  font-size: 0.8rem;
}

.ept-service-tags li:hover {
  border-color: var(--ept-gold);
  transform: translateY(-2px);
}
.ept-service-tags li a { color: inherit; text-decoration: none; }

/* ===== Tile variant =====
   Same list, styled as even blue tiles instead of wrapping white pills —
   a grid rather than a flex-wrap row, so every item is the same size. */
.ept-service-tags.ept-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px; justify-content: normal;
}
/* Inside a centered ept-head section (e.g. a technique page's "Best Suited
   For"), a short tile row should sit centered under the centered heading,
   as a compact fixed-width block, rather than stretch edge-to-edge and
   leave a lopsided gap where auto-fill's empty tracks ate the extra width. */
.ept-head.ept-centered ~ .ept-service-tags.ept-tiles {
  grid-template-columns: repeat(auto-fit, 230px);
  justify-content: center;
}
.ept-service-tags.ept-tiles li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--ept-blue); border: none; color: #fff;
  padding: 24px 22px; font-weight: 300; transition: background 0.25s;
  min-height: 92px;
}
.ept-service-tags.ept-tiles li::before { color: var(--ept-gold); }
.ept-service-tags.ept-tiles li:hover { background: var(--ept-navy); transform: none; }

/* ===== Flip book =====
   A real book rather than a slider: hard cover carrying the logo mark, a
   stitched spine down the gutter, and leaves that rotate on their inner
   edge in 3D. Each leaf is one spread — image on the left page, copy on
   the right — and every page is numbered like a printed book. Pure CSS
   transforms plus a small JS page counter; no flipbook library. */
.ept-book-wrap { perspective: 2600px; margin: 0 auto; max-width: 1080px; overflow: hidden; }
.ept-book {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  transform-style: preserve-3d;
}
.ept-book-spine {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 26px;
  transform: translateX(-50%); z-index: 30; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30) 42%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.30) 58%, rgba(0,0,0,0.05));
}
/* Stitching down the gutter */
.ept-book-spine::before {
  content: ""; position: absolute; left: 50%; top: 6%; bottom: 6%; width: 1px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--ept-gold) 0 10px, transparent 10px 22px);
  opacity: 0.6;
}
.ept-book-leaf {
  position: absolute; inset: 0; height: 100%; overflow: hidden;
  /* grid-template-rows:100% is load-bearing: without it the implicit row is
     content-sized, so both pages stop short of the leaf's bottom edge. */
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%;
  align-items: stretch;
  background: var(--ept-paper); box-shadow: 0 26px 60px rgba(0,0,0,0.26);
  transform-style: preserve-3d; transition: transform 1.9s cubic-bezier(.42,0,.28,1), opacity 1.9s cubic-bezier(.42,0,.28,1);
  transform-origin: left center; backface-visibility: hidden;
}
.ept-book-leaf.ept-leaf-out { transform: rotateY(-168deg); opacity: 0; pointer-events: none; }
.ept-book-leaf.ept-leaf-hidden { opacity: 0; pointer-events: none; }
.ept-book-page { position: relative; overflow: hidden; height: 100%; min-height: 0; }
/* Absolutely positioned so the image never takes part in grid row sizing —
   the same trick .ept-split-media uses. Left as flow content it forms a
   circular height dependency and the page renders short. */
.ept-book-page-img img, .ept-book-page-img video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; max-width: none;
}
.ept-book-page-body {
  padding: 44px 46px 56px; display: flex; flex-direction: column; justify-content: center;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.07), transparent 9%),
    var(--ept-paper);
}
.ept-book-page-body h3 {
  font-family: var(--ept-serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--ept-green-deep); margin: 0 0 16px; font-weight: 300; line-height: 1.1;
}
.ept-book-page-body p { font-weight: 300; font-size: 0.99rem; color: var(--ept-ink); margin: 0 0 16px; }
.ept-book-page-body .ept-eyebrow { margin-bottom: 14px; }
.ept-book-folio {
  position: absolute; bottom: 20px; font-family: var(--ept-serif); font-style: italic;
  font-size: 0.85rem; color: var(--ept-ink-soft);
}
.ept-book-page-img .ept-book-folio { left: 26px; color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.ept-book-page-body .ept-book-folio { right: 32px; }
/* Cover — sits above every leaf until it is opened */
.ept-book-cover {
  position: absolute; inset: 0; z-index: 40; cursor: pointer;
  background:
    radial-gradient(120% 90% at 30% 20%, var(--ept-green-mid), var(--ept-green-deep) 70%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 70px rgba(0,0,0,0.34);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform-origin: left center; backface-visibility: hidden;
  transition: transform 2.1s cubic-bezier(.42,0,.28,1), opacity 2.1s cubic-bezier(.42,0,.28,1);
}
.ept-book-cover.ept-cover-open { transform: rotateY(-172deg); opacity: 0; pointer-events: none; }
.ept-book-cover::before {
  content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(90deg, rgba(0,0,0,0.45), transparent);
}
.ept-book-cover img { width: 190px; max-width: 42%; height: auto; }
.ept-book-cover h3 {
  font-family: var(--ept-serif); color: #fff; font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 26px 0 6px; text-align: center;
}
.ept-book-cover .ept-book-cover-sub {
  font-family: var(--ept-sans); text-transform: uppercase; letter-spacing: 3px;
  font-size: 0.66rem; color: var(--ept-gold);
}
.ept-book-cover .ept-book-open-hint {
  position: absolute; bottom: 28px; font-family: var(--ept-sans); font-size: 0.66rem;
  letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,0.65);
}
/* Controls */
.ept-book-controls {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  margin-top: 26px;
}
.ept-book-btn {
  background: none; border: 1px solid var(--ept-line); color: var(--ept-green-deep);
  font-family: var(--ept-sans); font-size: 0.68rem; letter-spacing: 2px;
  text-transform: uppercase; padding: 12px 24px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ept-book-btn:hover:not(:disabled) { background: var(--ept-green-deep); border-color: var(--ept-green-deep); color: #fff; }
.ept-book-btn:disabled { opacity: 0.35; cursor: default; }
.ept-book-count {
  font-family: var(--ept-serif); font-style: italic; color: var(--ept-ink-soft); font-size: 0.95rem;
}
.ept-section-green .ept-book-btn { border-color: rgba(255,255,255,0.35); color: #fff; }
.ept-section-green .ept-book-btn:hover:not(:disabled) { background: var(--ept-gold); border-color: var(--ept-gold); color: var(--ept-green-deep); }
.ept-section-green .ept-book-count { color: rgba(255,255,255,0.75); }

@media (max-width: 820px) {
  .ept-book { aspect-ratio: 3 / 4; }
  .ept-book-leaf { grid-template-columns: 1fr; grid-template-rows: 45% 55%; }
  .ept-book-spine { display: none; }
  .ept-book-page-body { padding: 30px 26px; }
  .ept-book-cover img { width: 130px; }
}

/* ===== Magazine gallery grid =====
   A masonry-feeling collage for the Gallery page — a CSS grid with a few
   tiles spanning two rows (portrait shots) or two columns (feature video),
   each carrying the same gold offset frame as .ept-figure so it reads as
   part of the same design system, not a bolted-on lightbox plugin. */
.ept-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 160px; gap: 28px; margin-top: 20px;
}
.ept-gallery-item { position: relative; grid-row: span 2; }
.ept-gallery-item.ept-gallery-wide { grid-column: span 2; }
.ept-gallery-item.ept-gallery-short { grid-row: span 1; }
.ept-gallery-item.ept-gallery-tall { grid-row: span 3; }
.ept-gallery-item::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--ept-gold); z-index: -1;
}
.ept-gallery-media {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: block; text-decoration: none; color: inherit;
}
.ept-gallery-media img, .ept-gallery-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.ept-gallery-media:hover img, .ept-gallery-media:hover video { transform: scale(1.06); }
.ept-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  background: linear-gradient(to top, rgba(6,32,54,0.85), rgba(6,32,54,0));
  color: #fff; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.ept-gallery-media:hover .ept-gallery-caption { opacity: 1; }
.ept-gallery-caption .ept-gallery-title { font-family: var(--ept-serif); font-style: italic; font-size: 1rem; display: block; }
.ept-gallery-caption .ept-gallery-tag { font-family: var(--ept-sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ept-gold); display: block; margin-top: 4px; }
.ept-gallery-media .ept-gallery-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%; background: rgba(6,32,54,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.ept-gallery-media .ept-gallery-play::before {
  content: ""; border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff; margin-left: 4px;
}
/* Video tiles keep their caption + link visible at all times (no hover
   needed to find a real, clickable link on a touch device), and the video
   itself keeps native controls, so the wrapper is a plain div, not an <a>. */
.ept-gallery-item.ept-gallery-video .ept-gallery-caption {
  opacity: 1; pointer-events: auto;
}
.ept-gallery-item.ept-gallery-video .ept-gallery-caption a {
  color: var(--ept-gold); text-decoration: underline;
}
@media (max-width: 640px) {
  .ept-gallery-item.ept-gallery-wide { grid-column: span 1; }
  .ept-gallery-caption { opacity: 1; background: linear-gradient(to top, rgba(6,32,54,0.75), rgba(6,32,54,0)); }
}

/* ===== Technique grid =====
   A numbered card grid instead of another row of pill tags — full-width,
   its own row below the split image+copy rather than squeezed into the
   narrow text column. Cards carry a subtle wash of the logo green rather
   than plain white, so the block reads as its own moment. */
/* Cards use <span>s, not <div>/<h4>/<p>, styled as blocks via CSS — wpautop
   forcibly injects newlines around real block-level tags wherever they sit
   next to each other, which fabricated empty <p></p> elements between
   these cards even with no line breaks in the source. Spans aren't in its
   block list, so they pass through untouched. */
.ept-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.ept-tech-card {
  background: rgba(63,86,54,0.06); padding: 26px 24px; transition: background 0.2s;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  min-height: 130px;
}
.ept-tech-card:hover { background: rgba(63,86,54,0.13); }
.ept-tech-top { display: flex; align-items: baseline; gap: 14px; }
.ept-tech-num {
  display: block; font-family: var(--ept-serif); font-size: 1.4rem;
  color: var(--ept-gold); line-height: 1; flex-shrink: 0;
}
.ept-tech-title {
  display: block; font-family: var(--ept-sans); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.3px; color: var(--ept-green-deep);
}
.ept-tech-desc { display: block; font-size: 0.86rem; font-weight: 300; color: var(--ept-ink-soft); line-height: 1.5; }

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


/* ===== FAQ =====
   Native <details>/<summary> accordion — no JS needed, works with
   find-in-page and screen readers by default. */
.ept-faq { max-width: 780px; margin: 0 auto; }
.ept-faq details {
  border-bottom: 1px solid var(--ept-line); padding: 22px 0;
}
.ept-faq summary {
  font-family: var(--ept-serif); font-size: 1.15rem; color: var(--ept-green-deep);
  cursor: pointer; list-style: none; position: relative; padding-right: 30px;
}
.ept-faq summary::-webkit-details-marker { display: none; }
.ept-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 0; font-size: 1.3rem;
  color: var(--ept-gold); font-family: var(--ept-sans); transition: transform 0.2s;
}
.ept-faq details[open] summary::after { content: "\2212"; }
.ept-faq summary:hover { color: var(--ept-green); }
.ept-faq .ept-faq-answer {
  margin: 14px 0 0; font-size: 0.98rem; font-weight: 300;
  color: var(--ept-ink-soft); line-height: 1.7;
}
.ept-section-green .ept-faq details { border-bottom-color: rgba(255,255,255,0.15); }
.ept-section-green .ept-faq summary { color: #fff; }
.ept-section-green .ept-faq .ept-faq-answer { color: rgba(255,255,255,0.75); }

/* ===== Motto ===== */
.ept-motto {
  font-family: var(--ept-serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ept-green);
  max-width: 34ch;
  margin: 52px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--ept-line);
}

@media (max-width: 1024px) {
  .ept-destinations { grid-template-columns: 1fr; }
  .ept-dest { min-height: 460px; }
  .ept-experiences { grid-template-columns: 1fr; }
  .ept-why { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .ept-why { grid-template-columns: 1fr; }
  .ept-dest-body { padding: 36px 24px; }
  .ept-exp-card { padding: 34px 24px; }
}

/* ===== Rich page content typography ===== */
.ept-page-content { max-width: 820px; }
.ept-page-content > *:first-child { margin-top: 0; }
.ept-page-content p { font-size: 1.06rem; font-weight: 300; color: var(--ept-ink); margin: 0 0 24px; }
.ept-page-content h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ept-line);
}
.ept-page-content h3 { font-size: 1.4rem; margin: 2.2rem 0 0.7rem; }
.ept-page-content ul { list-style: none; padding: 0; margin: 0 0 28px; }
.ept-page-content ul li {
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--ept-line);
  position: relative;
  font-weight: 300;
}
.ept-page-content ul li::before {
  content: "\2726"; position: absolute; left: 0; top: 12px;
  color: var(--ept-gold); font-size: 0.8rem;
}
.ept-page-content blockquote {
  font-family: var(--ept-serif); font-style: italic; font-size: 1.35rem;
  color: var(--ept-green); border-left: 2px solid var(--ept-gold);
  padding-left: 26px; margin: 34px 0; font-weight: 300;
}
.ept-page-content .ept-lead {
  font-size: 1.25rem; color: var(--ept-green); font-weight: 300;
  line-height: 1.55; margin-bottom: 32px;
}
.ept-species {
  background: var(--ept-sand); padding: 28px 32px;
  border-left: 2px solid var(--ept-gold); margin: 32px 0;
  font-weight: 300; line-height: 2;
}

/* Author sign-off on first-person pages */
.ept-signoff {
  font-family: var(--ept-serif);
  font-size: 1.3rem;
  color: var(--ept-green-deep);
  margin-top: 44px !important;
  padding-top: 26px;
  border-top: 1px solid var(--ept-line);
}
.ept-signoff span {
  display: block;
  font-family: var(--ept-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ept-ink-soft);
  margin-top: 8px;
}

/* Hosts photo: source is portrait 614x954. Left at its natural ratio it renders
   ~880px tall against a ~570px text column, which unbalances the split — so crop
   to 4:5 and anchor to the top so both faces stay in frame. */
.ept-guides-media:has(img) {
  aspect-ratio: 4 / 5;
  background: none;
  overflow: hidden;
}
.ept-guides-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
  border-radius: 2px;
}

/* Hero never paints blank: a 254-byte blurred still is inlined here, so it shows
   the instant the CSS parses — before the poster or video have been requested. */
.ept-hero-video {
  background-image: url('data:image/jpeg;base64,C:/Program Files/Git/9j/gAQTGF2YzYyLjExLjEwMAD/2wBDAAgQEBMQExYWFhYWFhoYGhsbGxoaGhobGxsdHR0iIiIdHR0bGx0dICAiIiUmJSMjIiMmJigoKDAwLi44ODpFRVP/xABmAAEBAQEBAAAAAAAAAAAAAAAHBQIABgEBAQEAAAAAAAAAAAAAAAAAAwQFEAABAgQGAgMBAAAAAAAAAAABAhEAMUEDIRIEFFEFkXFyE8EiEQEAAwEAAAAAAAAAAAAAAAAAERIhE/AABEIAA4AGAMBIgACEQADEQD/2gAMAwEAAhEDEQA/AIvaXk6y2kpGZVlZkDi4xANZUj1+g7XdkvlQEpDIE+Dm/GwgyQv+cwk7MTVNfeMUdLeIRKplPmNGuIemwaNz8Y7cnkQaJulq+Yz9/vzBQSz/2Q==');
  background-size: cover;
  background-position: center;
}
/* No runtime blur here: a backdrop-filter over the playing video forced the
   compositor to re-blur every frame and froze the renderer. The placeholder is a
   24px image scaled up, which is already soft on its own. */

/* ===== Closing CTA: logo left, content right ===== */
.ept-cta-split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 72px;
  align-items: center;
  text-align: left;
}

.ept-cta-mark img {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.ept-cta-body h2 { margin-left: 0; margin-right: 0; max-width: 16ch; }
.ept-cta-body p { margin-left: 0; margin-right: 0; }
.ept-cta-body .ept-motto { margin-left: 0; margin-right: 0; max-width: 34ch; }
.ept-cta-body .ept-cta-contact { justify-content: flex-start; }

@media (max-width: 900px) {
  .ept-cta-split { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .ept-cta-mark img { max-width: 300px; }
  .ept-cta-body h2, .ept-cta-body p, .ept-cta-body .ept-motto { margin-left: auto; margin-right: auto; }
  .ept-cta-body .ept-cta-contact { justify-content: center; }
}

/* Logo entrance, matching the reveal in the client's video: the mark builds up
   to full size like a statement, not a quick fade. Anchored left so it grows
   out from its column edge rather than scaling about the page centre. Starts
   small and slow, then overshoots slightly past full size before settling —
   the "bam" beat — rather than a flat ease-in. */
.ept-js .ept-cta-mark img {
  opacity: 0;
  transform: scale(0.45);
  transform-origin: left center;
  transition-delay: 0.2s;
}
.ept-js .ept-cta-split.ept-in .ept-cta-mark img {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.6s ease-out, transform 2.4s cubic-bezier(.22,1.4,.36,1);
  transition-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .ept-js .ept-cta-mark img { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .ept-js .ept-cta-mark img { transform-origin: center center; }
}

/* ===== Reusable copy block for inner pages =====
   Paragraphs/lists/blockquotes living inside a section, instead of one long
   unbroken column — this is what the South Africa/Madagascar/etc. pages were
   missing: the homepage's section rhythm never made it past the hero. */
.ept-copy { max-width: 720px; margin: 0 auto; }
.ept-copy p { font-size: 1.06rem; font-weight: 300; color: var(--ept-ink); margin: 0 0 22px; }
.ept-copy > *:last-child { margin-bottom: 0; }
.ept-copy ul { list-style: none; padding: 0; margin: 0 0 22px; }
.ept-copy ul li {
  padding: 12px 0 12px 32px; border-bottom: 1px solid var(--ept-line);
  position: relative; font-weight: 300;
}
.ept-copy ul li::before {
  content: "\2726"; position: absolute; left: 0; top: 12px;
  color: var(--ept-gold); font-size: 0.8rem;
}
.ept-copy blockquote {
  font-family: var(--ept-serif); font-style: italic; font-size: 1.3rem;
  color: var(--ept-green); border-left: 2px solid var(--ept-gold);
  padding-left: 24px; margin: 30px 0; font-weight: 300;
}
.ept-copy a { color: var(--ept-green); border-bottom: 1px solid var(--ept-gold); }
.ept-copy strong { color: var(--ept-green-deep); }
/* .ept-copy sets its own dark colors on p/strong/li that otherwise win over
   .ept-section-green's inherited light color — every one needs its own
   override here, not just blockquote, or text goes dark-on-dark. */
.ept-section-green .ept-copy p { color: rgba(255,255,255,0.85); }
.ept-section-green .ept-copy blockquote { color: rgba(255,255,255,0.92); }
.ept-section-green .ept-copy strong { color: #fff; }
.ept-section-green .ept-copy a { color: #fff; }
.ept-section-green .ept-copy ul li { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.15); }

/* ===== Text + image split =====
   Pairs a photo with a copy block instead of leaving every section as a
   centered wall of text — an editorial-brochure layout with an offset gold
   frame behind the photo. Which side the photo sits on is decided by markup
   order (media first = left, body first = right) rather than CSS `order` —
   `order` alone left both children in the same grid track instead of the
   two side by side. .ept-split-flip only mirrors the frame's offset corner
   to match. */
/* align-items: stretch so both grid children take the row's full height —
   the text column's natural height decides it, and the image column
   stretches to match and crops via object-fit rather than dictating its
   own (mismatched) height from an aspect-ratio. */
.ept-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.ept-split-media { position: relative; min-height: 360px; }
.ept-split-media::after {
  content: ""; position: absolute; inset: 20px -20px -20px 20px;
  border: 1px solid var(--ept-gold); z-index: -1;
}
.ept-split-grid.ept-split-flip .ept-split-media::after { inset: 20px 20px -20px -20px; }
.ept-split-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1); transition: transform 2.2s cubic-bezier(.16,.8,.24,1);
}
.ept-js .ept-split-grid.ept-in .ept-split-media img { transform: scale(1); }
/* Video fills the same frame as a split-media image, but without the
   scale-in reveal — a moving clip already reads as "alive" on load. */
.ept-split-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ept-split-body { display: flex; flex-direction: column; justify-content: center; }
.ept-split-body .ept-eyebrow, .ept-split-body .ept-head { text-align: left; }
.ept-split-body .ept-copy { margin: 0; max-width: none; }
.ept-narrative-main .ept-copy { margin: 0; max-width: none; }

@media (max-width: 900px) {
  .ept-split-grid { grid-template-columns: 1fr; gap: 34px; }
  .ept-split-media { height: 320px; min-height: 0; }
  .ept-split-media::after { inset: 14px -14px -14px 14px; }
  .ept-split-grid.ept-split-flip .ept-split-media::after { inset: 14px 14px -14px -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ept-split-media img { transition: none; transform: none !important; }
}

/* ===== Text + facts sidebar, scoped to one section =====
   A single bounded section pairs its text with a facts card beside it —
   NOT a sidebar that runs the length of the whole page (that read as a
   blog template). Use once per page, for the one block that benefits from
   at-a-glance facts; every other section stays a normal full-width block. */
.ept-narrative { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: stretch; }
.ept-narrative-main { max-width: 860px; }
.ept-narrative-block { padding-top: 64px; scroll-margin-top: 130px; }
.ept-narrative-block:first-child { padding-top: 0; }
.ept-narrative-block + .ept-narrative-block { border-top: 1px solid var(--ept-line); }
.ept-narrative-block .ept-eyebrow { margin-bottom: 14px; }
.ept-narrative-block h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 20px; }

.ept-figure { position: relative; margin: 30px 0; }
.ept-figure::after {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--ept-gold); z-index: -1;
}
.ept-figure img {
  display: block; width: 100%; height: 320px; object-fit: cover;
}
.ept-figure figcaption {
  font-family: var(--ept-serif); font-style: italic; font-size: 0.92rem;
  color: var(--ept-ink-soft); margin-top: 12px;
}
/* Inline video variant — same offset gold frame, no scale-in transform since
   this can appear outside .ept-narrative-block (the reveal trigger that
   scale animation depends on). */
.ept-figure video { display: block; width: 100%; height: 340px; object-fit: cover; }
.ept-section-green .ept-figure figcaption { color: rgba(255,255,255,0.75); }

/* Same dark green as .ept-section-green, so every "at a glance" sidebar
   card on the site reads as one consistent component regardless of which
   page or section background it sits inside. Stretched via the grid's
   align-items:stretch above, so it always matches the main column's height
   instead of trailing off short with empty space beside it. */
.ept-narrative-aside { display: flex; flex-direction: column; gap: 28px; }
.ept-trip-facts {
  background: var(--ept-green-deep); padding: 34px 28px;
  display: flex; flex-direction: column; flex: 1;
}
.ept-trip-facts h3 {
  font-family: var(--ept-sans); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 1.5px; font-weight: 600; color: #fff; margin: 0 0 20px;
}
.ept-trip-facts dl { margin: 0; }
.ept-trip-facts .ept-fact { padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.ept-trip-facts .ept-fact:first-of-type { border-top: none; padding-top: 0; }
.ept-trip-facts dt {
  font-family: var(--ept-sans); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--ept-gold); font-weight: 600; margin-bottom: 6px;
}
.ept-trip-facts dd { margin: 0; font-size: 0.94rem; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.5; }
/* Plain bullet list variant of the same solid card, for a sidebar that lists
   items rather than label/value facts. */
.ept-trip-facts ul { list-style: none; margin: 0; padding: 0; }
.ept-trip-facts ul li {
  padding: 12px 0 12px 20px; border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.92rem; font-weight: 300; color: rgba(255,255,255,0.85); position: relative;
}
.ept-trip-facts ul li:first-child { border-top: none; padding-top: 0; }
.ept-trip-facts ul li::before { content: "\2726"; position: absolute; left: 0; top: 12px; color: var(--ept-gold); font-size: 0.72rem; }

@media (max-width: 980px) {
  .ept-narrative { grid-template-columns: 1fr; gap: 40px; }
  .ept-narrative-main { max-width: none; }
}

/* ===== Magazine feature =====
   An editorial variant of .ept-narrative for a single stand-out section —
   left-aligned "byline" heading instead of centered, a drop-cap lead
   paragraph, and (on a dark section) a light glass-card sidebar rather than
   the solid-green .ept-trip-facts card, which would vanish into a green
   section's own background. */
.ept-feature-main .ept-eyebrow { justify-content: flex-start; }
.ept-feature-main .ept-head { text-align: left; margin-bottom: 28px; }
.ept-feature-main h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.ept-feature-lead { font-size: 1.2rem; }
.ept-feature-lead::first-letter {
  font-family: var(--ept-serif); font-size: 3.4rem; line-height: 0.75;
  float: left; margin: 4px 10px 0 0; color: var(--ept-gold); font-weight: 400;
}

.ept-feature-list {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
  padding: 34px 30px; display: flex; flex-direction: column; flex: 1;
}
.ept-feature-list h3 {
  font-family: var(--ept-sans); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 1.5px; font-weight: 600; color: var(--ept-gold); margin: 0 0 20px;
}
.ept-feature-list ul { list-style: none; margin: 0; padding: 0; }
.ept-feature-list li {
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.92rem; font-weight: 300; color: rgba(255,255,255,0.88);
  position: relative; padding-left: 20px;
}
.ept-feature-list li:first-child { border-top: none; }
.ept-feature-list li::before { content: "\2726"; position: absolute; left: 0; top: 12px; color: var(--ept-gold); font-size: 0.72rem; }

.ept-page-hero-tagline {
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  font-weight: 300;
  max-width: 46ch;
  margin: 14px 0 0;
}

/* ===== Closing CTA globe =====
   Replaces the flat logo mark with a rotating sphere that has the brand mark
   wrapped around its surface. The "wrap" is a background strip repeated three
   times across the face and scrolled by exactly one full tile width, so the
   loop is seamless — no 3D layers, no JS, one compositor-friendly property.
   Curvature comes from the shading overlays, not from geometry. */
.ept-globe {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 28%, #3c8fc4 0%, #0175be 38%, #075a8c 72%, #04364f 100%);
  box-shadow:
    0 34px 70px rgba(4, 54, 79, 0.34),
    inset -22px -26px 64px rgba(0, 20, 34, 0.55),
    inset 14px 16px 40px rgba(255, 255, 255, 0.14);
}

.ept-globe-skin {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* The template sets background-image inline on this element so ::before
     can inherit it. Painting it here as well would put a second, static
     copy of the mark at its natural 560px size behind the moving strip,
     so suppress the paint while keeping the value the strip inherits. */
  background-size: 0 0;
  /* Fade the mark toward the poles and the limb. Without this the strip runs
     flat to the circle's edge and the sphere reads as a printed disc. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 64%, rgba(0,0,0,0.45) 82%, transparent 95%);
          mask-image: radial-gradient(circle at 50% 50%, #000 64%, rgba(0,0,0,0.45) 82%, transparent 95%);
}

/* The moving surface. Two copies of the mark across a strip twice the width of
   the globe, so one full mark spans the visible face, then translate by exactly
   half the strip — one mark width — for a seamless loop.
   This is a transform, not background-position: at background-size 100% the tile
   is the same width as the box, so percentage positions have zero range to move
   within and every value resolves to the same place. Measured: 0% and -100%
   both computed to "0% 50%" and the globe sat still. */
.ept-globe-skin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: inherit;
  background-repeat: repeat-x;
  background-size: 50% 78%;
  background-position: 0 50%;
  animation: ept-globe-spin 11s linear infinite;
  will-change: transform;
}

@keyframes ept-globe-spin {
  to { transform: translateX(-50%); }
}
}

/* Specular highlight, terminator and gold rim, stacked in one element. */
.ept-globe-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 26%, transparent 52%),
    radial-gradient(circle at 76% 80%, rgba(0,16,28,0.55) 0%, transparent 58%);
  box-shadow: inset 0 0 0 2px rgba(214, 196, 62, 0.5);
}

/* Entrance: the globe inherits the mark's build-up beat rather than a fade. */
.ept-js .ept-cta-mark .ept-globe {
  opacity: 0;
  transform: scale(0.45);
  transform-origin: left center;
  transition-delay: 0.2s;
}
.ept-js .ept-cta-split.ept-in .ept-cta-mark .ept-globe {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.6s ease-out, transform 2.4s cubic-bezier(.22,1.4,.36,1);
  transition-delay: 0.2s;
}

@media (max-width: 900px) {
  .ept-globe { max-width: 300px; }
  .ept-js .ept-cta-mark .ept-globe { transform-origin: center center; }
}

@media (prefers-reduced-motion: reduce) {
  .ept-js .ept-cta-mark .ept-globe { opacity: 1; transform: none; transition: none; }
}

/* Licence credit for sourced wildlife photography in the species books. */
.ept-book-credit {
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  color: var(--ept-ink-soft);
  opacity: 0.72;
}

/* Centre the intro line above a book, to match its centred heading.
   Scoped by :has() so ordinary .ept-copy body text is untouched.
   Browsers without :has() simply leave it left-aligned. */
/* ept-book-intro-centred */
.ept-section:has(.ept-book-wrap) .ept-head.ept-centered + .ept-copy {
  text-align: center;
}

/* Sidebar globe: same component as the CTA, sized for a narrative aside and
   turned a little slower so it sits quietly beside body copy. */
.ept-globe-aside {
  max-width: 220px;
  width: 82%;
  margin: 0 auto;
}
.ept-globe-aside .ept-globe-skin::before { animation-duration: 15s; }

@media (min-width: 701px) {
  /* Caret flips and turns gold while that dropdown is open. */
  .ept-nav .menu-item-has-children > a .ept-nav-label::after { transition: transform 0.2s, color 0.2s; display: inline-block; }
  .ept-nav li.ept-sub-open > a .ept-nav-label::after { transform: rotate(180deg); color: var(--ept-gold); }
}


/* The parent page, injected as the first row of its own submenu. */
@media (min-width: 701px) {
  .ept-nav .sub-menu .ept-sub-parent > a { color: rgba(255,255,255,0.85); font-weight: 600; }
}

/* A narrative figure grows to fill whatever height the sidebar card forces.
   .ept-narrative already stretches main and aside to equal heights, but the
   figure inside main kept its natural size, so a tall facts card left the
   image floating above a block of dead space. Measured: main 1071px, figure
   357px. Let the image take the slack and the two columns end level. */
.ept-narrative-main { display: flex; flex-direction: column; }
.ept-narrative-main .ept-figure {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 300px;
}
.ept-narrative-main .ept-figure img,
.ept-narrative-main .ept-figure video {
  flex: 1 1 auto; width: 100%;
  object-fit: cover; min-height: 260px;
}
.ept-narrative-main .ept-figure figcaption { flex: 0 0 auto; }

/* Three-card variant of .ept-destinations for the homepage Holidays block.
   The 2-card version is a fixed 1fr 1fr grid; this adds a third column and
   a fixed image height, since .ept-dest normally gets its height only from
   its sibling in a 2-up row - alone in a 3-up row on a short page it had
   nothing to stretch against and collapsed to the text's own height,
   which is what left the gold border framing empty space beneath it. */
.ept-destinations-3 { grid-template-columns: repeat(3, 1fr); }
.ept-destinations-3 .ept-dest { min-height: 420px; }
@media (max-width: 860px) {
  .ept-destinations-3 { grid-template-columns: 1fr; }
}

/* ===== Sidebar-left narrative =====
   Same .ept-narrative grid as the species/holiday pages, mirrored so the
   aside sits first. The base grid is [1fr, 300px]; this reverses it to
   [300px, 1fr] rather than reordering with flex/order, so the HTML source
   order (aside markup first) matches the visual order - keyboard and
   screen-reader navigation follow the same path as sighted layout. */
.ept-narrative-left-aside { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 980px) {
  .ept-narrative-left-aside { grid-template-columns: 1fr; }
}

/* Two .ept-dest cards stacked in the narrative aside, stretched to match
   the height of the magazine copy beside them (.ept-narrative already sets
   align-items: stretch on the row, so the aside column's height is fixed -
   flex here just splits that height between the two cards). Keeps the
   card's own colours/background/typography completely untouched; only
   the container around it changes. */
.ept-dest-stack {
  display: flex; flex-direction: column; gap: 20px; height: 100%;
}
.ept-dest-stack .ept-dest { flex: 1 1 0; min-height: 260px; }
/* Card copy sized down for the narrow stacked column - at full width the
   heading/paragraph comfortably fit the bottom-anchored flex box, but at
   ~300px they wrapped to more lines than the card was tall, so the top of
   the heading was clipped by .ept-dest's overflow:hidden. */
.ept-dest-stack .ept-dest-body { padding: 22px 24px; }
.ept-dest-stack .ept-dest h3 { font-size: 1.2rem; margin-bottom: 6px; }
.ept-dest-stack .ept-dest p { font-size: 0.86rem; margin-bottom: 12px; }
.ept-dest-stack .ept-dest-eyebrow { font-size: 0.62rem; margin-bottom: 10px; }
@media (max-width: 980px) {
  .ept-dest-stack { height: auto; }
  .ept-dest-stack .ept-dest { min-height: 300px; }
  .ept-dest-stack .ept-dest-body { padding: 34px 32px; }
  .ept-dest-stack .ept-dest h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
  .ept-dest-stack .ept-dest p { font-size: 0.94rem; }
  .ept-dest-stack .ept-dest-eyebrow { font-size: 0.7rem; }
}

/* ===== Three-column homepage intro =====
   Destination cards / magazine copy / globe, replacing the 2-column
   ept-narrative-left-aside layout. Source order already matches visual
   order left-to-right, so unlike that variant this needs no column
   reversal - just a wider template. The base .ept-narrative sets
   align-items: stretch, so all three columns take the tallest column's
   height automatically; each column then distributes that height
   internally (dest-stack via flex:1 on its two cards, the globe column
   via flex centring below). */
.ept-narrative-triple { grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 56px; }
@media (max-width: 1180px) {
  .ept-narrative-triple { grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 36px; }
}
@media (max-width: 980px) {
  .ept-narrative-triple { grid-template-columns: 1fr; }
}

.ept-narrative-globe-col {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background: var(--ept-green-deep);
  padding: 34px 24px;
  text-align: center;
}
.ept-narrative-globe-col .ept-globe { max-width: 190px; }
.ept-narrative-globe-cap {
  color: rgba(255,255,255,0.72); font-size: 0.74rem;
  letter-spacing: 0.6px; margin: 0;
}
@media (max-width: 980px) {
  .ept-narrative-globe-col { height: auto; padding: 44px 24px; }
}

/* Inline internal links inside a magazine-feature paragraph that is not
   wrapped in .ept-copy (the homepage intro's second paragraph is direct
   markup, not a .ept-copy child) - without this they render as unstyled
   default blue links instead of matching .ept-copy a's green/gold style. */
.ept-narrative-triple .ept-narrative-main p a:not(.ept-btn) { color: var(--ept-green); border-bottom: 1px solid var(--ept-gold); }
.ept-narrative-triple .ept-narrative-main p a:not(.ept-btn):hover { color: var(--ept-green-mid); }

/* The button row sat well above the bottom of the stretched sidebar/globe
   columns, leaving a block of empty space beneath it that the cards and
   globe don't have - the row read as floating rather than seated in the
   layout. .ept-narrative-main is already a flex column (see the figure-fill
   rule above), so margin-top: auto pushes the actions row to the bottom,
   levelling it with the sidebar's bottom edge. Buttons stretch equally so
   the row also matches the sidebar's full-width visual weight, rather than
   two small pills sitting in a wide empty row. */
.ept-narrative-triple .ept-narrative-main .ept-hero-actions {
  margin-top: auto; padding-top: 30px;
}
.ept-narrative-triple .ept-narrative-main .ept-hero-actions .ept-btn {
  flex: 1 1 0; justify-content: center; text-align: center;
}
@media (max-width: 980px) {
  .ept-narrative-triple .ept-narrative-main .ept-hero-actions { margin-top: 30px; padding-top: 0; }
}

/* A short internal-links block filling the trip-facts sidebar card,
   between the facts list and the globe. Several species pages have a
   much taller main column (books, split bands) than the facts list, so
   the stretched card left 400-1100px of empty green space above the
   globe - this replaces that dead space with real navigation instead. */
.ept-trip-facts .ept-trip-links { margin-top: 28px; }
.ept-trip-facts .ept-trip-links h4 {
  font-family: var(--ept-sans); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--ept-gold); font-weight: 600; margin: 0 0 6px;
}
.ept-trip-facts .ept-trip-links ul li { font-size: 0.88rem; }
.ept-trip-facts .ept-trip-links a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.35); }
.ept-trip-facts .ept-trip-links a:hover { border-bottom-color: var(--ept-gold); color: var(--ept-gold); }

/* ===== Multi-image globe =====
   Variant of the CTA globe that cycles several distinct photos across
   one rotation instead of wrapping a single repeated texture - the way
   a real world-globe graphic shows Africa, then the Americas, as it
   turns. Set per-instance via CSS custom properties (--g1/--g2/--g3) on
   the .ept-globe-skin element rather than a pre-composited strip image,
   so any section can wrap its own three relevant photos with no new
   image asset needed. The strip is 4 tiles wide (the 3 photos, then the
   first one again) so the loop closes seamlessly back to the start. */
.ept-globe-multi .ept-globe-skin::before {
  width: 400%;
  background-image: var(--g1), var(--g2), var(--g3), var(--g1);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 25% 78%, 25% 78%, 25% 78%, 25% 78%;
  background-position: 0% 50%, 25% 50%, 50% 50%, 75% 50%;
  animation: ept-globe-spin-multi 20s linear infinite;
}
@keyframes ept-globe-spin-multi { to { transform: translateX(-75%); } }
/* The base .ept-globe sphere shading is a bright ocean-blue radial gradient,
   built for the world-map version. Where the photo layer's mask fades
   toward the rim that blue shows straight through, reading as a stray
   band across real wildlife photography rather than sphere shading.
   Swapped for a neutral dark vignette so the same edge-fade look reads
   as shadow regardless of what photo is wrapped around it. */
.ept-globe-multi .ept-globe-skin {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 94%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, #000 94%, transparent 100%);
}
.ept-globe-multi {
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.12) 0%, rgba(20,20,20,0.15) 40%, rgba(0,0,0,0.45) 74%, rgba(0,0,0,0.7) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ept-globe-multi .ept-globe-skin::before { animation: none; }
}

/* Solid dark card the same size/shape as .ept-trip-facts, so a globe used
   as a narrative aside always reads as one consistent sidebar treatment. */
.ept-globe-panel {
  background: var(--ept-green-deep); flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 34px 24px; gap: 20px; text-align: center;
}
.ept-globe-panel .ept-globe { max-width: 220px; }
.ept-globe-panel p { color: rgba(255,255,255,0.72); font-size: 0.8rem; margin: 0; }

/* ===== Old film strip =====
   A horizontal strip of photos styled as a physical film reel: black
   stock, perforated top and bottom edges, frames separated by thin
   black gutters, images very slightly desaturated and warmed. */
.ept-filmstrip {
  background: var(--ept-sand);
  padding: 16px 20px; margin-top: 48px;
  border-top: 3px solid var(--ept-line); border-bottom: 3px solid var(--ept-line);
}
.ept-filmstrip-perf {
  height: 14px;
  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0 10px, var(--ept-ink) 10px 24px);
  background-position: 6px 0;
  opacity: 0.16;
}
.ept-filmstrip-row {
  display: flex; gap: 16px; margin: 14px 0; overflow-x: auto;
  padding: 0 3px; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ept-filmstrip-row::-webkit-scrollbar { display: none; }
.ept-filmstrip-item[aria-hidden="true"] { pointer-events: none; }
.ept-filmstrip-item { flex: 0 0 200px; display: flex; flex-direction: column; gap: 8px; }
.ept-filmstrip-frame {
  display: block; height: 148px; position: relative; overflow: hidden;
  background: #000;
}
.ept-filmstrip-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  filter: sepia(0.22) saturate(0.85) contrast(1.05);
  transition: transform 0.5s ease;
}
.ept-filmstrip-frame:hover img { transform: scale(1.06); }
.ept-filmstrip-cap {
  display: block; text-align: center; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--ept-ink); text-decoration: none;
}
.ept-filmstrip-cap:hover { color: var(--ept-gold); }
@media (max-width: 700px) {
  .ept-filmstrip-item { flex-basis: 150px; }
  .ept-filmstrip-frame { height: 112px; }
}

/* ===== Video film strip: play button + lightbox =====
   The strip's frames are real stills pulled from an actual client
   video; a play button sits fixed over the strip (not scrolled with
   the frames) and opens the full video in a simple lightbox. */
.ept-filmstrip { position: relative; }
.ept-filmstrip-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(20,18,16,0.72); border: 2px solid rgba(255,255,255,0.85);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; transition: transform 0.2s, background 0.2s;
}
.ept-filmstrip-play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--ept-gold); color: var(--ept-green-deep); border-color: var(--ept-gold); }
.ept-filmstrip-play svg { width: 22px; height: 22px; margin-left: 3px; }

.ept-video-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,10,8,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.ept-video-lightbox video { max-width: 100%; max-height: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.ept-video-lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.4);
  color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.ept-video-lightbox-close:hover { background: var(--ept-gold); color: var(--ept-green-deep); border-color: var(--ept-gold); }

/* The frame is now a <button> (opens an image lightbox) rather than an
   <a> - the caption underneath stays the real internal link, so SEO
   anchor-text linking is unaffected. Reset default button chrome so it
   looks identical to the old anchor version. */
button.ept-filmstrip-frame {
  border: none; background: none; padding: 0; cursor: zoom-in; font: inherit;
}
.ept-image-lightbox img { max-width: 100%; max-height: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.5); filter: none; }

/* ===== Homepage preloader =====
   The logo builds from nothing to full size with the same statement-
   beat as the CTA globe/mark (slow start, slight overshoot, settle),
   holds briefly, then the whole curtain fades to reveal the page
   already rendered underneath. Homepage only - see header.php. */
.ept-preloader {
  position: fixed; inset: 0; z-index: 100000;
  /* Bright sky blue (client request). Tested against the logo: on the brand
     blue #0175be the marlin disappears; on this it separates cleanly. */
  background: #0a9fd8;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s ease;
}
.ept-preloader img {
  width: 0; opacity: 0;
  animation: ept-preloader-zoom 1.6s cubic-bezier(.22,1.4,.36,1) forwards;
}
@keyframes ept-preloader-zoom {
  0%   { width: 0; opacity: 0; }
  100% { width: 260px; opacity: 1; }
}
.ept-preloader.ept-preloader-done { opacity: 0; pointer-events: none; }
body.ept-preloading { overflow: hidden; }


/* In-sidebar WhatsApp button on trip/species pages - placed right where a
   reader's intent is highest, after they've read the trip facts, rather
   than making them scroll all the way to Contact or hunt the nav for it. */
.ept-trip-facts .ept-trip-whatsapp {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 24px; padding: 14px 18px;
	background: #25D366; color: #fff; text-decoration: none;
	border-radius: 8px; font-family: var(--ept-sans); font-weight: 600;
	font-size: 0.92rem; text-align: center;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ept-trip-facts .ept-trip-whatsapp:hover { background: #1ebe57; color: #fff; transform: translateY(-1px); }
.ept-trip-facts .ept-trip-whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Contact page: WhatsApp is the primary, biggest CTA - phone/email are
   secondary fallbacks underneath, not equal-weight options. */
.ept-contact-whatsapp-primary {
	display: inline-flex; align-items: center; gap: 12px;
	background: #25D366; color: #fff; text-decoration: none;
	padding: 18px 32px; border-radius: 10px;
	font-family: var(--ept-sans); font-weight: 600; font-size: 1.05rem;
	box-shadow: 0 12px 30px rgba(0,0,0,0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ept-contact-whatsapp-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,0.28); color: #fff; }
.ept-contact-whatsapp-primary svg { width: 24px; height: 24px; flex-shrink: 0; }
.ept-contact-secondary { margin-top: 22px; }
.ept-contact-secondary a { color: rgba(255,255,255,0.85); }

/* Short, single-figure sections (a headline plus one video/image and
   nothing else) look disproportionately empty at the standard 130px
   section padding - the padding was sized for sections with much more
   content. Halve it for these. */
.ept-section-tight { padding-top: 56px; padding-bottom: 56px; }

/* A narrative-aside card should only stretch to match its main column
   when the two are reasonably close in length. When the main column runs
   far longer (a long text passage plus a figure), stretching the aside
   to match leaves a large dead area below its own content. This modifier
   lets the card end at its natural height instead, on the pages where
   that mismatch is too large to fix by padding out the sidebar. */
.ept-narrative-aside-top { align-self: flex-start; }

/* International marketing agent contacts, on the Contact page and (a
   condensed version) in the footer. Each card gives a direct tel: link
   plus its own WhatsApp button, since a phone call across time zones is a
   bigger ask for an overseas lead than a WhatsApp message. */
.ept-agents-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px; margin-top: 32px;
}
.ept-agent-card {
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
	border-radius: 10px; padding: 20px 22px;
}
.ept-agent-region {
	font-family: var(--ept-sans); font-size: 0.68rem; text-transform: uppercase;
	letter-spacing: 1.5px; color: var(--ept-gold); font-weight: 600; margin-bottom: 6px;
}
.ept-agent-name { color: #fff; font-size: 1.02rem; margin-bottom: 12px; }
.ept-agent-links { display: flex; align-items: center; gap: 14px; }
.ept-agent-links a { color: rgba(255,255,255,0.85); font-size: 0.88rem; }
.ept-agent-links a:hover { color: var(--ept-gold); }
.ept-agent-wa {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; background: #25D366; color: #fff;
	flex-shrink: 0;
}
.ept-agent-wa svg { width: 16px; height: 16px; }
.ept-agent-wa:hover { background: #1ebe57; color: #fff; }

/* Footer condensed agent list. */
.ept-footer-agents { list-style: none; padding: 0; margin: 0; }
.ept-footer-agents li {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
	font-size: 0.86rem;
}
.ept-footer-agents li:last-child { border-bottom: none; }
.ept-footer-agents .ept-footer-agent-region { color: rgba(255,255,255,0.55); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; }

.ept-footer-agents-row {
	border-top: 1px solid rgba(255,255,255,0.12);
	margin-top: 40px; padding-top: 28px;
}
.ept-footer-agents-row h4 { margin-bottom: 14px; }
.ept-footer-agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 24px; }
.ept-footer-agents li { border-bottom: none; }
.ept-footer-agents a { color: rgba(255,255,255,0.85); }
.ept-footer-agents a:hover { color: var(--ept-gold); }

/* ===== Homepage trip chooser =====
   The homepage's job is to route a visitor to the right service page in one
   click. Six tabs, one panel at a time, so the choice feels small rather
   than like a menu of everything at once. */
.ept-chooser-intro {
	text-align: center; max-width: 620px; margin: 0 auto;
	color: var(--ept-ink-soft); font-weight: 300;
}
.ept-chooser { margin-top: 34px; }

.ept-chooser-tabs {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	margin-bottom: 30px;
}
.ept-chooser-tab {
	font-family: var(--ept-sans); font-size: 0.74rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 1.6px;
	padding: 12px 20px; cursor: pointer;
	background: transparent; color: var(--ept-green-deep);
	border: 1px solid var(--ept-line); border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ept-chooser-tab:hover { border-color: var(--ept-gold); color: var(--ept-green-mid); }
.ept-chooser-tab.is-active {
	background: var(--ept-green-deep); color: #fff; border-color: var(--ept-green-deep);
}

.ept-chooser-panel {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px; align-items: center;
}
.ept-chooser-panel[hidden] { display: none; }
.ept-chooser-media { position: relative; }
.ept-chooser-media img {
	display: block; width: 100%; height: 380px;
	object-fit: cover; object-position: center;
}
.ept-chooser-media::after {
	content: ""; position: absolute; inset: 16px -16px -16px 16px;
	border: 1px solid var(--ept-gold); z-index: -1;
}
.ept-chooser-body h3 {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 6px 0 14px;
	color: var(--ept-green-deep);
}
.ept-chooser-body p { font-weight: 300; }
.ept-chooser-facts {
	list-style: none; padding: 0; margin: 18px 0 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px;
}
.ept-chooser-facts li {
	position: relative; padding-left: 18px;
	font-size: 0.88rem; font-weight: 300; color: var(--ept-ink);
}
.ept-chooser-facts li::before {
	content: "\2726"; position: absolute; left: 0; color: var(--ept-gold);
}

@media (max-width: 880px) {
	.ept-chooser-panel { grid-template-columns: 1fr; gap: 26px; }
	.ept-chooser-media img { height: 260px; }
	.ept-chooser-media::after { inset: 12px -12px -12px 12px; }
	.ept-chooser-facts { grid-template-columns: 1fr; }
	.ept-chooser-tab { padding: 10px 15px; font-size: 0.68rem; letter-spacing: 1.2px; }
}

/* ===== Season / when-to-come grid =====
   Real seasonal constraints, including the window we deliberately do not
   sell. Saying "we don't run trips then" builds more trust than pretending
   the island is perfect year-round. */
.ept-season-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px; margin-top: 34px;
}
.ept-season-card {
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 10px; padding: 26px 24px;
}
.ept-season-months {
	font-family: var(--ept-sans); font-size: 0.7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 2px;
	color: var(--ept-gold); margin-bottom: 10px;
}
.ept-season-card h3 { color: #fff; font-size: 1.2rem; margin: 0 0 10px; }
.ept-season-card p {
	color: rgba(255,255,255,0.8); font-size: 0.9rem;
	font-weight: 300; margin: 0 0 14px;
}
.ept-season-card a {
	font-family: var(--ept-sans); font-size: 0.72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 1.4px; color: var(--ept-gold);
}
.ept-season-card a:hover { color: #fff; }
.ept-season-card.is-closed { background: rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.12); }
.ept-season-card.is-closed .ept-season-months { color: rgba(255,255,255,0.6); }

/* ===== Risk-reversal block =====
   Sits immediately before the final CTA: the objections that stop an
   enquiry are usually "is this real", "will I be pestered" and "am I
   committing to something", so answer all three, then ask. */
.ept-reassure-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px; margin-top: 34px;
}
.ept-reassure {
	background: var(--ept-paper);
	border-left: 3px solid var(--ept-gold);
	padding: 24px 26px;
}
.ept-reassure h3 {
	font-family: var(--ept-sans); font-size: 0.95rem; font-weight: 600;
	color: var(--ept-green-deep); margin: 0 0 10px;
}
.ept-reassure p {
	font-size: 0.9rem; font-weight: 300; color: var(--ept-ink-soft); margin: 0;
}
.ept-credentials {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
	margin-top: 44px; padding-top: 24px;
	border-top: 1px solid var(--ept-line);
	font-family: var(--ept-sans); font-size: 0.72rem;
	text-transform: uppercase; letter-spacing: 1.2px;
	color: var(--ept-ink-soft); text-align: center;
}

/* ===== Site-wide conversion block ===== */
.ept-convert-lead {
	text-align: center; max-width: 680px; margin: 0 auto;
	color: var(--ept-ink-soft); font-weight: 300;
}
.ept-convert-actions { margin-top: 40px; text-align: center; }
.ept-convert-next {
	margin-top: 40px; padding-top: 26px;
	border-top: 1px solid var(--ept-line);
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: center; gap: 10px 22px;
}
.ept-convert-next-label {
	font-family: var(--ept-sans); font-size: 0.68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 2px; color: var(--ept-gold);
}
.ept-convert-next ul {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
}
.ept-convert-next a {
	font-family: var(--ept-sans); font-size: 0.82rem; font-weight: 500;
	color: var(--ept-green-deep);
	border-bottom: 1px solid var(--ept-line);
}
.ept-convert-next a:hover { color: var(--ept-green-mid); border-bottom-color: var(--ept-gold); }
.ept-convert .ept-credentials { margin-top: 30px; }

/* ===== Immersive FAQ =====
   Objection handling reads as a wall of text in a single column, which is
   the worst possible format for it. Two columns: media that holds the
   mood on one side, an accordion on the other so each doubt is opened
   deliberately rather than skimmed past. */
.ept-faq-layout {
	display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 48px; align-items: start; margin-top: 38px;
}
.ept-faq-media { position: relative; position: sticky; top: 100px; }
.ept-faq-media img,
.ept-faq-media video {
	display: block; width: 100%; height: 460px;
	object-fit: cover; object-position: center;
}
.ept-faq-media::after {
	content: ""; position: absolute; inset: 16px -16px -16px 16px;
	border: 1px solid var(--ept-gold); z-index: -1;
}
.ept-faq-media-cap {
	font-family: var(--ept-serif); font-style: italic; font-size: 0.9rem;
	color: var(--ept-ink-soft); margin-top: 14px;
}
.ept-section-green .ept-faq-media-cap { color: rgba(255,255,255,0.72); }

.ept-faq-item {
	border-bottom: 1px solid var(--ept-line);
	padding: 0;
}
.ept-faq-item summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: flex-start; gap: 14px;
	padding: 20px 0;
	font-family: var(--ept-sans); font-size: 1rem; font-weight: 600;
	color: var(--ept-green-deep);
	transition: color 0.2s ease;
}
.ept-faq-item summary::-webkit-details-marker { display: none; }
.ept-faq-item summary:hover { color: var(--ept-green-mid); }
.ept-faq-item summary::before {
	content: "+"; flex-shrink: 0;
	width: 22px; height: 22px; margin-top: 1px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--ept-gold); border-radius: 50%;
	color: var(--ept-gold); font-size: 0.95rem; line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}
.ept-faq-item[open] summary::before {
	content: "\2212"; background: var(--ept-gold); color: var(--ept-green-deep);
}
.ept-faq-answer {
	padding: 0 0 22px 36px;
	font-weight: 300; color: var(--ept-ink-soft); font-size: 0.95rem;
}
.ept-faq-answer p { margin: 0 0 10px; }
.ept-faq-answer p:last-child { margin-bottom: 0; }

/* Dark-section variant */
.ept-section-green .ept-faq-item { border-bottom-color: rgba(255,255,255,0.16); }
.ept-section-green .ept-faq-item summary { color: #fff; }
.ept-section-green .ept-faq-answer { color: rgba(255,255,255,0.8); }

@media (max-width: 900px) {
	.ept-faq-layout { grid-template-columns: 1fr; gap: 30px; }
	.ept-faq-media { position: relative; top: 0; }
	.ept-faq-media img, .ept-faq-media video { height: 280px; }
	.ept-faq-media::after { inset: 12px -12px -12px 12px; }
	.ept-faq-answer { padding-left: 0; }
}
.ept-faq-cta { margin-top: 44px; text-align: center; }

/* The Explore menu grew to 13 items and stretched the footer into a
   column of links taller than most of the pages it links to. Give it the
   width of two cells and flow it into two columns instead. */
.ept-footer-grid { grid-template-columns: 1.5fr 1.7fr 1fr 0.8fr; }
.ept-footer-explore ul {
	columns: 2; column-gap: 28px;
}
.ept-footer-explore li { break-inside: avoid; }

@media (max-width: 900px) {
	.ept-footer-grid { grid-template-columns: 1fr 1fr; }
	.ept-footer-explore ul { columns: 2; }
}
@media (max-width: 560px) {
	.ept-footer-grid { grid-template-columns: 1fr; }
	.ept-footer-explore ul { columns: 2; column-gap: 20px; }
}

/* Credentials repeated in the footer: registration and permit numbers are
   the detail that turns "nice website" into "real, licensed outfit". */
.ept-footer-credentials {
	border-top: 1px solid rgba(255,255,255,0.12);
	margin-top: 30px; padding-top: 24px;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 10px 26px; text-align: center;
	font-family: var(--ept-sans); font-size: 0.7rem;
	text-transform: uppercase; letter-spacing: 1.2px;
	color: rgba(255,255,255,0.62);
}
.ept-footer-credentials strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* Build credit: present and clickable, but deliberately quieter than the
   client's own copyright - it is our name on their site, not ours. */
.ept-footer-credit { color: rgba(255,255,255,0.45); font-size: 0.8rem; }
.ept-footer-credit a { color: rgba(255,255,255,0.68); border-bottom: 1px solid rgba(255,255,255,0.22); }
.ept-footer-credit a:hover { color: var(--ept-gold); border-bottom-color: var(--ept-gold); }

/* Desktop -> phone bridge: a WhatsApp link can't be tapped on a laptop. */
.ept-contact-qr { margin: 28px auto 0; text-align: center; }
.ept-contact-qr img { display: block; margin: 0 auto; width: 180px; height: 180px; background: #fff; padding: 10px; border-radius: 8px; }
.ept-contact-qr p { color: rgba(255,255,255,0.8); font-size: 0.88rem; margin: 12px auto 0; max-width: 300px; }
@media (hover: none) and (pointer: coarse) { .ept-contact-qr { display: none; } }


/* FAQ media frame: the caption sat inside .ept-faq-media, so the offset
   gold frame (sized to the whole box) ran ~53px past the image and its
   line cut through the caption. Taking the caption out of flow sizes the
   frame to the image alone; the margin keeps room for the caption. */
.ept-faq-media { margin-bottom: 58px; }
.ept-faq-media-cap { position: absolute; left: 0; right: 0; top: 100%; margin-top: 30px; }

/* Feature list: the class sits on the <ul> itself, but the reset above only
   targets a nested ul, so browsers drew their default disc marker beside
   the gold star on every page using this list. */
ul.ept-feature-list { list-style: none; margin: 0; }

/* Tile rows sized to the tile count, so the last row is never a stub
   (12 tiles used to wrap 5 + 5 + 2). Desktop only: below 1000px the
   2-column and 1-column rules further down take over, so fixed 230px
   tracks can never push a phone layout sideways. Counts with no even
   split (11) keep the default auto layout. */
@media (min-width: 1001px) {
  .ept-service-tags.ept-tiles:has(> li:nth-child(4):last-child),
  .ept-service-tags.ept-tiles:has(> li:nth-child(8):last-child),
  .ept-service-tags.ept-tiles:has(> li:nth-child(12):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ept-service-tags.ept-tiles:has(> li:nth-child(6):last-child),
  .ept-service-tags.ept-tiles:has(> li:nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ept-head.ept-centered ~ .ept-service-tags.ept-tiles:has(> li:nth-child(4):last-child),
  .ept-head.ept-centered ~ .ept-service-tags.ept-tiles:has(> li:nth-child(8):last-child),
  .ept-head.ept-centered ~ .ept-service-tags.ept-tiles:has(> li:nth-child(12):last-child) { grid-template-columns: repeat(4, 230px); }
  .ept-head.ept-centered ~ .ept-service-tags.ept-tiles:has(> li:nth-child(6):last-child),
  .ept-head.ept-centered ~ .ept-service-tags.ept-tiles:has(> li:nth-child(9):last-child) { grid-template-columns: repeat(3, 230px); }
}
@media (max-width: 1000px) {
  .ept-service-tags.ept-tiles.ept-tiles, .ept-head.ept-centered ~ .ept-service-tags.ept-tiles.ept-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ept-service-tags.ept-tiles.ept-tiles, .ept-head.ept-centered ~ .ept-service-tags.ept-tiles.ept-tiles { grid-template-columns: 1fr; }
}

/* Buttons never wrap their label. A two-button row whose labels no longer
   fit side by side drops each button onto its own full-width line instead
   of squeezing both into two-line 94px blocks (seen at 1100px and 400px). */
.ept-btn { white-space: nowrap; justify-content: center; }
.ept-narrative-triple .ept-narrative-main .ept-hero-actions .ept-btn { flex: 1 1 240px; }

/* One button height everywhere: outlined buttons carry a 1px border, so
   every button gets one (transparent on solid buttons) and they all
   measure the same. Labels stay on one line; on a phone a label wider
   than the screen may wrap rather than push the page sideways. */
.ept-btn { border: 1px solid transparent; max-width: 100%; }
.ept-btn-ghost { border-color: rgba(255,255,255,0.55); }
@media (max-width: 560px) {
  .ept-btn { white-space: normal; }
}

/* Cyclone-season notice on Nosy Be pages: no bookings mid-January to end
   of March. Sits directly under the page hero and again above the enquiry
   buttons, gold-edged on paper so it reads as information, not an alarm. */
.ept-cyclone-notice {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  background: var(--ept-paper); border: 1px solid var(--ept-line); border-left: 4px solid var(--ept-gold);
  padding: 16px 22px; font-size: 0.95rem; color: var(--ept-ink); line-height: 1.5;
}
.ept-cyclone-notice-label {
  font-weight: 600; color: var(--ept-green-deep); text-transform: uppercase;
  letter-spacing: 1.2px; font-size: 0.74rem;
}
.ept-cyclone-notice-label::before { content: "\2726"; color: var(--ept-gold); margin-right: 8px; }
.ept-cyclone-notice.is-closed { border-left-color: var(--ept-blue); }
.ept-cyclone-notice-wrap { margin-top: 28px; margin-bottom: -60px; position: relative; z-index: 2; }
.ept-convert .ept-cyclone-notice { max-width: 760px; margin: 28px auto 0; }
@media (max-width: 700px) {
  .ept-cyclone-notice-wrap { margin-bottom: -30px; }
  .ept-cyclone-notice { padding: 14px 16px; }
}

/* ===== Section rhythm: dark hero, then light / dark alternating =====
   ept_alternate_sections() stamps every section with either
   .ept-section-light or .ept-section-green by position, so components
   must read correctly on both. Light sections are plain paper. */
.ept-section-light { background: var(--ept-paper); }

/* --- Components on dark (green) sections --- */
.ept-section-green .ept-eyebrow { color: rgba(255,255,255,0.72); }
.ept-section-green .ept-feature-lead,
.ept-section-green .ept-chooser-intro,
.ept-section-green .ept-convert-lead { color: rgba(255,255,255,0.82); }
.ept-section-green p { color: rgba(255,255,255,0.85); }
.ept-section-green .ept-chooser-tab { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.ept-section-green .ept-chooser-tab:hover { border-color: var(--ept-gold); color: var(--ept-gold); }
.ept-section-green .ept-chooser-tab.is-active { background: var(--ept-gold); color: var(--ept-green-deep); border-color: var(--ept-gold); }
.ept-section-green .ept-chooser-body h3 { color: #fff; }
.ept-section-green .ept-chooser-facts li { color: rgba(255,255,255,0.85); }
.ept-section-green .ept-narrative-main a:not(.ept-btn),
.ept-section-green .ept-split-body a:not(.ept-btn),
.ept-section-green .ept-chooser-body p a { color: #fff; border-bottom-color: var(--ept-gold); }
.ept-section-green .ept-trip-facts { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); }
.ept-section-green .ept-tech-card { background: rgba(255,255,255,0.06); }
.ept-section-green .ept-tech-card:hover { background: rgba(255,255,255,0.12); }
.ept-section-green .ept-tech-title { color: #fff; }
.ept-section-green .ept-tech-desc { color: rgba(255,255,255,0.75); }
.ept-section-green .ept-guide-name { color: #fff; }
.ept-section-green .ept-guide-role { color: rgba(255,255,255,0.65); }
.ept-section-green .ept-quote,
.ept-section-green .ept-quote-card p { color: #fff; }
.ept-section-green .ept-quote-by { color: rgba(255,255,255,0.65); }
.ept-section-green .ept-convert-next { border-top-color: rgba(255,255,255,0.18); }
.ept-section-green .ept-convert-next a { color: #fff; border-bottom-color: rgba(255,255,255,0.3); }
.ept-section-green .ept-credentials,
.ept-section-green .ept-credentials span { color: rgba(255,255,255,0.7); }
.ept-section-green .ept-reassure p,
.ept-section-green .ept-exp-card p,
.ept-section-green .ept-book-page-body p { color: var(--ept-ink-soft); }
.ept-section-green .ept-book-page-body p { color: var(--ept-ink); }
.ept-section-green .ept-cyclone-notice-text { color: var(--ept-ink); }

/* --- Components built for dark, now on light sections --- */
.ept-section-light .ept-season-card { background: rgba(13,83,133,0.05); border-color: var(--ept-line); }
.ept-section-light .ept-season-card h3 { color: var(--ept-green-deep); }
.ept-section-light .ept-season-card p { color: var(--ept-ink-soft); }
.ept-section-light .ept-season-card a { color: var(--ept-green); }
.ept-section-light .ept-season-card a:hover { color: var(--ept-gold-deep); }
.ept-section-light .ept-season-months { color: var(--ept-gold-deep); }
.ept-section-light .ept-season-card.is-closed { background: rgba(13,83,133,0.12); }
.ept-section-light .ept-season-card.is-closed .ept-season-months { color: var(--ept-ink-soft); }
.ept-section-light .ept-feature-list { background: #fff; border-color: var(--ept-line); }
.ept-section-light .ept-feature-list li { color: var(--ept-ink); border-top-color: var(--ept-line); }
.ept-section-light .ept-feature-list li strong { color: var(--ept-green-deep); }
.ept-section-light .ept-agent-card { background: #fff; border-color: var(--ept-line); }
.ept-section-light .ept-agent-name { color: var(--ept-green-deep); }
.ept-section-light .ept-agent-links a { color: var(--ept-green); }
.ept-section-light .ept-narrative-globe-cap { color: var(--ept-ink-soft); }

/* Rhythm fixes from the contrast scan (2026-09-15):
   - intro-paragraph links inside a narrative triple stayed green on green
   - step and technique card headings (h4) stayed dark on dark
   The filmstrip keeps its own light strip, so its captions keep dark text. */
.ept-section-green .ept-narrative-triple .ept-narrative-main p a:not(.ept-btn) { color: #fff; border-bottom-color: var(--ept-gold); }
.ept-section-green .ept-narrative-triple .ept-narrative-main p a:not(.ept-btn):hover { color: var(--ept-gold); }
.ept-section-green .ept-tech-card h4 { color: #fff; }

/* Contact "Get In Touch" and the travel-tips "By Region" list were built for
   dark sections; on a light section their text needs dark colours. */
.ept-section-light .ept-contact-qr p { color: var(--ept-ink-soft); }
.ept-section-light .ept-contact-qr p strong { color: var(--ept-green-deep); }
.ept-section-light .ept-contact-secondary a,
.ept-section-light .ept-cta-contact a { color: var(--ept-green); }
.ept-section-light .ept-contact-secondary a:hover,
.ept-section-light .ept-cta-contact a:hover { color: var(--ept-gold-deep); }
.ept-section-light .ept-feature-list h3 { color: var(--ept-green-deep); }

/* Inline text links: readable and clearly links on both section tones */
.ept-section-green p a:not([class]):not(.ept-service-tags a),.ept-section-green li a:not([class]):not(.ept-service-tags a),.ept-section-green figcaption a:not([class]):not(.ept-service-tags a){color:#D6C43E!important;text-decoration:underline;text-decoration-color:rgba(214,196,62,.6);text-underline-offset:3px;font-weight:500}
.ept-section-green p a:not([class]):not(.ept-service-tags a):hover,.ept-section-green li a:not([class]):not(.ept-service-tags a):hover{color:#fff!important;text-decoration-color:#fff}
.ept-section-light p a:not([class]):not(.ept-service-tags a),.ept-section-light li a:not([class]):not(.ept-service-tags a),.ept-section-light figcaption a:not([class]):not(.ept-service-tags a){color:#0175BE!important;text-decoration:underline;text-decoration-color:rgba(1,117,190,.5);text-underline-offset:3px;font-weight:500}
.ept-section-light p a:not([class]):not(.ept-service-tags a):hover,.ept-section-light li a:not([class]):not(.ept-service-tags a):hover{color:#0d5385!important}
.ept-season-card a:not(.ept-btn){color:inherit!important;text-decoration:underline;text-underline-offset:3px;font-weight:600}
section.ept-section.ept-section-green .ept-book-page p a:not([class]):not(.ept-service-tags a){color:#0175BE!important;text-decoration-color:rgba(1,117,190,.5)}

/* Readability on light sections: gold text darkened to a 5:1 bronze */
.ept-section-light .ept-eyebrow,.ept-section-light .ept-convert-next-label,.ept-section-light .ept-tech-num,.ept-section-light .ept-season-months{color:#7a6a12!important}
/* WhatsApp buttons: white text needs a deeper green (5.4:1) */
.ept-trip-facts .ept-trip-whatsapp,.ept-contact-whatsapp-primary{background:#177a3e!important;color:#fff!important}
.ept-trip-facts .ept-trip-whatsapp:hover,.ept-contact-whatsapp-primary:hover{background:#12652f!important}
/* Content paragraphs that hard-code white text for a formerly dark section */
.ept-section-light p[style*="color:rgba(255,255,255"],.ept-section-light p[style*="color: rgba(255,255,255"]{color:var(--ept-ink-soft)!important}
/* Globe column keeps its dark green panel on every section tone */
.ept-section-light .ept-narrative-globe-col .ept-narrative-globe-cap{color:rgba(255,255,255,.82)}

/* Chooser: all three actions on one row, not a stray button below */
.ept-btn-outline { background: transparent; color: var(--ept-green); border-color: var(--ept-green); }
.ept-btn-outline:hover { background: var(--ept-green); color: #fff; }
.ept-chooser .ept-hero-actions { gap: 12px; flex-wrap: nowrap; }
.ept-chooser .ept-hero-actions .ept-btn { padding-left: 22px; padding-right: 22px; }
@media (max-width: 900px) { .ept-chooser .ept-hero-actions { flex-wrap: wrap; } }

/* Holidays: image cards replacing text tiles */
.ept-holiday-ways, .ept-holiday-days { margin-top: 34px; padding-top: 0; border-top: 0; }
.ept-holiday-days { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ept-holiday-days .ept-exp { aspect-ratio: 4 / 3.7; }
.ept-holiday-days .ept-exp h3 { font-size: 1.6rem; }
@media (hover: none) { .ept-holiday-days .ept-exp p { max-height: none; opacity: 1; } }
@media (max-width: 900px) { .ept-holiday-days { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ept-holiday-days { grid-template-columns: 1fr; } }

/* About: the hosts photo is a portrait; a centred crop cut Ant and Ingrid off
   at the shoulders. Bias the crop to the top so faces stay in frame. */
.ept-chooser-media img[src*="ant-and-ingrid"],
.ept-faq-media img[src*="ant-and-ingrid"] { object-position: 50% 8%; }

/* Head-safe crops (site-wide audit 2026-09-16). These portrait photos sit in
   fixed-height cover boxes; a centred crop cut people off at the neck. The
   filmstrip already crops from the top, so it is left alone. */
:not(.ept-filmstrip-frame) > img[src*="mad-romantic-couple"]          { object-position: 50% 11%; }
:not(.ept-filmstrip-frame) > img[src*="sa-real-tracking-fatherson"]   { object-position: 50% 8%; }
:not(.ept-filmstrip-frame) > img[src*="tech-jigging-saltpepper"]      { object-position: 50% 10%; }
:not(.ept-filmstrip-frame) > img[src*="tech-jigging-deep"]            { object-position: 50% 12%; }
:not(.ept-filmstrip-frame) > img[src*="tech-surfacepopping-dogtooth"] { object-position: 50% 5%; }

/* ===== Homepage hero on phones: video on its own, copy underneath =====
   On a phone the copy panel covered most of the footage, so below 768px the
   video fills the top of the screen uncovered and the headline, intro and
   buttons follow on a solid green band. Desktop keeps the panel over the video. */
@media (max-width: 767px) {
  section.ept-hero.ept-hero-video { display: block; min-height: 0; background: var(--ept-green-deep); }
  .ept-hero.ept-hero-video .ept-hero-video-el {
    position: relative; display: block; width: 100%;
    height: 62vh; min-height: 340px; object-fit: cover;
    background: url('/wp-content/uploads/hero-fishing-poster.jpg') center / cover;
  }
  .ept-hero.ept-hero-video .ept-hero-inner { background: var(--ept-green-deep); padding: 28px 20px 30px; }
  .ept-hero.ept-hero-video .ept-hero-panel { display: block; max-width: none; background: none; border-left: 0; padding: 0; }
  .ept-hero.ept-hero-video .ept-hero-panel .ept-hero-eyebrow { font-size: 0.62rem; margin-bottom: 10px; }
  .ept-hero.ept-hero-video .ept-hero-panel h1 { font-size: 2rem; margin-bottom: 12px; }
  .ept-hero.ept-hero-video .ept-hero-panel p { font-size: 0.95rem; margin-bottom: 20px; }
  .ept-hero.ept-hero-video .ept-hero-panel .ept-btn { padding: 12px 14px; font-size: 0.66rem; flex: 1 1 0; }
  .ept-hero.ept-hero-video .ept-hero-credit { position: static; border-top: 1px solid rgba(255,255,255,0.12); }
}

/* Kudu hero: the bull's head sits high in the frame — keep it in the wide crop. */
.page-id-145 .ept-page-hero-bg { background-position: center top; }

/* About hero: the impala stand across the lower half of the photo, so on wide
   screens the copy panel sits top-left, over bush, instead of on their legs. */
@media (min-width: 768px) {
  .page-id-10 .ept-page-hero { align-items: flex-start; }
  .page-id-10 .ept-page-hero-inner { padding-top: 44px; padding-bottom: 0; }
}

/* ===== Hunting pages: olive + gold =====
   body.ept-theme-hunt (functions.php) swaps the blue tokens back to the
   original olive for the hunting section only. */
body.ept-theme-hunt {
  --ept-green-deep: #31452a;
  --ept-green: #3f5636;
  --ept-green-mid: #4e6842;
  --ept-ink: #33402b;
  --ept-ink-soft: #5a5d50;
}
body.ept-theme-hunt .ept-hero-panel { background: rgba(49,69,42,0.9); }
body.ept-theme-hunt .ept-section-light .ept-season-card { background: rgba(49,69,42,0.05); }
body.ept-theme-hunt .ept-section-light .ept-season-card.is-closed { background: rgba(49,69,42,0.12); }

/* Hunting Safaris hero is a portrait photo: the hunters' heads sit ~20-30% down,
   so the wide crop is anchored there instead of the centre. */
.page-id-261 .ept-page-hero-bg { background-position: center 27%; }

/* Fishing Holidays: the "On The Water" video grows to fill its column so it
   ends level with the At A Glance card beside it, instead of leaving a gap. */
@media (min-width: 1025px) {
  .page-id-263 .ept-feature-main { display: flex; flex-direction: column; }
  .page-id-263 .ept-feature-main > .ept-tight-feature { flex: 1; display: flex; flex-direction: column; }
  .page-id-263 .ept-feature-main > .ept-tight-feature > .ept-container { flex: 1; display: flex; flex-direction: column; width: 100%; }
  .page-id-263 .ept-feature-main .ept-figure { flex: 1; display: flex; flex-direction: column; width: 100%; }
  .page-id-263 .ept-feature-main .ept-figure video { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
}

/* ===== Travel information (flight routes + every-page band), 2026-09-23 ===== */
.ept-route-list { margin: 0; padding-left: 1.4em; }
.ept-route-list li { padding: 7px 0; line-height: 1.55; }
.ept-route-list li::marker { color: var(--ept-gold-deep); font-weight: 600; }
.ept-route-warning {
  margin: 40px auto 0; max-width: 860px; padding: 22px 28px;
  border-left: 4px solid var(--ept-gold); background: rgba(13,83,133,0.07);
  color: var(--ept-ink); line-height: 1.6;
}
.ept-route-warning strong { color: var(--ept-green-deep); }
.ept-tech-card p { margin: 10px 0 0; font-size: 0.94rem; line-height: 1.55; }
.ept-travel-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
.ept-travel-card { background: #fff; border: 1px solid var(--ept-line); border-top: 3px solid var(--ept-gold); padding: 34px 32px; display: flex; flex-direction: column; color: var(--ept-ink); }
.ept-travel-card h3 { font-family: var(--ept-serif); font-size: 1.6rem; color: var(--ept-green-deep); margin: 0 0 14px; }
.ept-travel-card p { margin: 0 0 22px; line-height: 1.6; color: var(--ept-ink); }
.ept-travel-card .ept-btn { margin-top: auto; align-self: flex-start; }
.ept-travel-card ul { list-style: none; margin: 0; padding: 0; }
.ept-travel-card li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--ept-line); line-height: 1.55; }
.ept-travel-card li:first-child { border-top: none; padding-top: 0; }
.ept-travel-card li::before { content: "\2726"; position: absolute; left: 0; top: 12px; color: var(--ept-gold); font-size: 0.72rem; }
.ept-travel-card li:first-child::before { top: 2px; }
.ept-travel-actions { justify-content: center; margin-top: 32px; }
@media (max-width: 800px) { .ept-travel-cards { grid-template-columns: 1fr; } .ept-travel-card { padding: 28px 22px; } }
.ept-airline-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .ept-airline-grid { grid-template-columns: 1fr; } }
.ept-route-map { margin: 40px 0 0; background: #d7e9f5; border: 1px solid var(--ept-line); }
.ept-route-map img { display: block; width: 100%; height: auto; }
.ept-route-copy { max-width: 900px; }
.ept-route-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 28px; margin-top: 40px; align-items: stretch; }
.ept-route-layout .ept-route-map { margin: 0; display: flex; align-items: center; }
.ept-route-aside { padding: 28px 26px; }
.ept-route-aside .ept-route-list { padding-left: 1.3em; color: rgba(255,255,255,0.88); }
.ept-route-aside .ept-route-list li { padding: 6px 0; font-size: 0.86rem; line-height: 1.45; border-top: 1px solid rgba(255,255,255,0.13); }
.ept-route-aside .ept-route-list li:first-child { border-top: none; padding-top: 0; }
.ept-route-aside .ept-route-list li::before { content: none; }
.ept-route-aside .ept-route-list li::marker { color: var(--ept-gold); }
.ept-route-aside .ept-route-list strong { color: #fff; font-weight: 600; }
@media (max-width: 1024px) { .ept-route-layout { grid-template-columns: 1fr; } }


/* No gradients over photos (client, 2026-09-24: "All pics to be clear").
   Card text moves off the photo onto a solid panel beneath it; captions that
   must stay on a photo get a solid box, never a fade. */
.ept-exp::after, .ept-exp:hover::after, .ept-dest::after, .ept-tour-media::after, .ept-bleed::after { display: none; }
.ept-exp, .ept-holiday-days .ept-exp { flex-direction: column; align-items: stretch; aspect-ratio: auto !important; }
.ept-exp-bg { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; flex: none; }
.ept-exp:hover .ept-exp-bg { transform: none; }
.ept-exp-body { background: var(--ept-green-deep); padding: 28px 30px 32px; flex: 1; }
.ept-exp p { max-height: none; opacity: 1; }
.ept-dest { flex-direction: column; align-items: stretch; min-height: 0; }
.ept-dest-bg { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; flex: none; }
.ept-dest:hover .ept-dest-bg { transform: none; }
.ept-dest-body { background: var(--ept-green-deep); flex: 1; }
.ept-dest h3, .ept-dest p, .ept-dest-eyebrow { text-shadow: none; }
.ept-bleed-caption p { display: inline-block; background: rgba(6,32,54,0.88); padding: 12px 18px; }
.ept-gallery-caption { background: rgba(6,32,54,0.88); }
@media (max-width: 900px) { .ept-gallery-caption { background: rgba(6,32,54,0.88); } }

/* Sidebar logo 50% bigger (client, 2026-09-24): 40px -> 60px collapsed,
   52px -> 78px open. Padding trimmed so the 60px mark fits the 76px rail. */
@media (min-width: 701px) {
  .ept-logo { height: 78px; padding-left: 8px; }
  .ept-logo img { max-width: 60px; }
  .ept-header:hover .ept-logo img, .ept-header:focus-within .ept-logo img { max-width: 78px; }
}

/* Book pages are paper even inside a dark section: keep the eyebrow in the
   light-section gold so it does not render white-on-paper. */
.ept-section-green .ept-book-page-body .ept-eyebrow { color: rgb(122, 106, 18); }
.ept-section-green .ept-book-page-body .ept-eyebrow::before { background: rgb(214, 196, 62); }
/* Nosy Be "Where You Stay": six photos as an even 3 x 2 grid. */
#accommodation .ept-gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; }
@media (max-width: 900px) { #accommodation .ept-gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } }
@media (max-width: 560px) { #accommodation .ept-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } }

/* Pack portrait tiles so the gallery has no holes. */
.ept-gallery-grid { grid-auto-flow: row dense; }

/* =====================================================================
   Gallery tiles show each photo whole (2026-09-24). Fixed frames elsewhere
   (chooser, split, figures, cards, bands) fill their frame (Marcel, 2026-09-24),
   anchored high so faces are not cut off.
   ===================================================================== */
/* Galleries: masonry columns, every tile at its natural shape */
.ept-gallery-grid, #accommodation .ept-gallery-grid { display: block; column-count: 4; column-gap: 24px; grid-auto-rows: auto; }
#accommodation .ept-gallery-grid { column-count: 3; }
.ept-gallery-item, .ept-gallery-item.ept-gallery-short, .ept-gallery-item.ept-gallery-tall { break-inside: avoid; margin: 0 0 24px; display: block; }
.ept-gallery-item.ept-gallery-wide { column-span: all; margin: 12px 0 36px; }
.ept-gallery-item::after { display: none; }
.ept-gallery-media { height: auto; }
.ept-gallery-media img, .ept-gallery-media video { height: auto; object-fit: contain; }
@media (max-width: 900px) { .ept-gallery-grid, #accommodation .ept-gallery-grid { column-count: 2; } }
@media (max-width: 560px) { .ept-gallery-grid, #accommodation .ept-gallery-grid { column-count: 1; } }

/* Gallery jump tabs (2026-09-24): pinned while scrolling, jump to each half. */
.ept-gallery-jump { position: sticky; top: 0; z-index: 50; background: var(--ept-paper); padding: 14px 0; border-bottom: 1px solid var(--ept-line); }
.ept-gallery-jump .ept-chooser-tabs { justify-content: center; margin: 0; }
.ept-gallery-jump .ept-chooser-tab { text-decoration: none; }
#hunting-gallery, #nosy-be-gallery, #gallery-videos { scroll-margin-top: 80px; }
/* Videos side by side under the Nosy Be photos */
.ept-gallery-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; align-items: start; }
.ept-gallery-video-item video { width: 100%; height: auto; display: block; background: #000; }
.ept-gallery-video-item .ept-copy { margin-top: 12px; }
.ept-gallery-video-item .ept-copy p { font-size: 0.92rem; }
@media (max-width: 900px) { .ept-gallery-videos { grid-template-columns: 1fr; } }
.ept-gallery-more { text-align: center; margin: 36px 0 0; }
.ept-gallery-item[hidden], .ept-gallery-more[hidden] { display: none !important; }
/* Madagascar hero motto */
.ept-hero-panel .ept-page-hero-motto { font-family: var(--ept-serif); font-style: italic; color: rgb(232, 212, 72); font-size: 1.45rem !important; line-height: 1.35 !important; margin: 14px 0 0; }

/* Outline buttons on dark sections: white, not blue-on-navy. */
.ept-section-green .ept-btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.ept-section-green .ept-btn-outline:hover { background: #fff; color: var(--ept-green-deep); border-color: #fff; }
/* Fixed frames fill their space (Marcel: "fill the space, no blurs"),
   anchored toward the top so heads are not cut off. */
.ept-chooser-media img, .ept-split-media img, .ept-figure img, .ept-faq-media img, .ept-guides-media img, .ept-filmstrip-frame img { object-position: 50% 25%; }
.ept-exp-bg, .ept-dest-bg, .ept-tour-media, .ept-bleed-media { background-position: 50% 25%; }


/* Books: one fixed height per spread (Marcel, 2026-09-24 — no jumping
   between pages). Book photos are chosen landscape to suit the frame. */
@media (min-width: 821px) { .ept-book { aspect-ratio: auto; height: 470px; } }
.ept-book-page-img img, .ept-book-page-img video { object-fit: cover; object-position: 50% 30%; }
/* Two-column checklist inside a split section, so the photo frame stays landscape. */
@media (min-width: 901px) { .ept-feature-list.ept-list-2col { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 32px; } .ept-feature-list.ept-list-2col li { break-inside: avoid; } }

/* ===== Olive across the whole South Africa section (client, 2026-09-25) =====
   The hunt theme only swapped the green tokens, so anything drawn in
   --ept-blue / --ept-navy (tile grids, body links) stayed blue on hunting
   pages. Swap those too, and give the gallery's hunting section the same
   treatment since the rest of that page is Nosy Be. */
body.ept-theme-hunt,
#hunting-gallery {
  --ept-blue: #5f7a3f;
  --ept-navy: #3f5636;
}
#hunting-gallery {
  --ept-green-deep: #31452a;
  --ept-green: #3f5636;
  --ept-green-mid: #4e6842;
  --ept-ink: #33402b;
  --ept-ink-soft: #5a5d50;
}
body.ept-theme-hunt .ept-section-light p a:not([class]):not(.ept-service-tags a),
body.ept-theme-hunt .ept-section-light li a:not([class]):not(.ept-service-tags a),
body.ept-theme-hunt .ept-section-light figcaption a:not([class]):not(.ept-service-tags a),
body.ept-theme-hunt section.ept-section.ept-section-green .ept-book-page p a:not([class]):not(.ept-service-tags a) {
  color: #4e6842 !important; text-decoration-color: rgba(78,104,66,.5);
}
body.ept-theme-hunt .ept-section-light p a:not([class]):not(.ept-service-tags a):hover,
body.ept-theme-hunt .ept-section-light li a:not([class]):not(.ept-service-tags a):hover { color: #31452a !important; }
/* Overlays and tints that were drawn in navy rgba, olive on hunting pages. */
body.ept-theme-hunt .ept-nav > ul > li.ept-header-cta > a .ept-nav-icon { background: rgba(49,69,42,0.16); }
body.ept-theme-hunt .ept-exp::after { background: linear-gradient(180deg, rgba(49,69,42,0.15) 30%, rgba(49,69,42,0.88) 100%); }
body.ept-theme-hunt .ept-exp:hover::after { background: linear-gradient(180deg, rgba(49,69,42,0.3) 20%, rgba(49,69,42,0.94) 100%); }
body.ept-theme-hunt .ept-tour-media::after { background: linear-gradient(180deg, transparent 55%, rgba(49,69,42,0.7)); }
body.ept-theme-hunt .ept-route-warning { background: rgba(49,69,42,0.07); }
body.ept-theme-hunt .ept-bleed::after { background: linear-gradient(0deg, rgba(30,43,25,0.55) 0%, transparent 32%, transparent 68%, rgba(30,43,25,0.22) 100%); }
body.ept-theme-hunt .ept-dest::after { background: linear-gradient(180deg, rgba(30,43,25,0.15) 0%, rgba(30,43,25,0.55) 45%, rgba(30,43,25,0.94) 100%); }
body.ept-theme-hunt .ept-gallery-caption,
#hunting-gallery .ept-gallery-caption { background: linear-gradient(to top, rgba(30,43,25,0.85), rgba(30,43,25,0)); }
/* Species tag rows (e.g. South Africa "What We Hunt") olive on hunting pages. */
body.ept-theme-hunt .ept-service-tags:not(.ept-tiles) li { background: var(--ept-blue); border-color: var(--ept-blue); color: #fff; }
body.ept-theme-hunt .ept-service-tags:not(.ept-tiles) li:hover { background: var(--ept-navy); border-color: var(--ept-gold); }

/* Filmstrip that shows every photo whole (Epic rule: images are never
   cropped). Each frame takes its photo's own width at a fixed height. */
.ept-filmstrip-whole .ept-filmstrip-item { flex: 0 0 auto; }
.ept-filmstrip-whole .ept-filmstrip-frame { width: auto; background: none; }
.ept-filmstrip-whole .ept-filmstrip-frame img { width: auto; height: 100%; object-fit: contain; }
.ept-filmstrip-whole .ept-filmstrip-frame:hover img { transform: none; }

/* Crossfading photo set in a split panel (Camp At The End Of It, client
   2026-09-25: "flip through 4 or 5 pics of the accommodation"). Each photo
   holds for 5s; photos are the client's own 4:3 lodge shots to suit the frame. */
.ept-slides img { opacity: 0; animation: ept-slide 20s infinite; }
.ept-slides img:nth-child(1) { animation-delay: 0s; }
.ept-slides img:nth-child(2) { animation-delay: 5s; }
.ept-slides img:nth-child(3) { animation-delay: 10s; }
.ept-slides img:nth-child(4) { animation-delay: 15s; }
@keyframes ept-slide { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; } }
/* Slides are driven by main.js (dots + autoplay); the CSS-only version above
   froze on devices set to reduce motion, leaving no way to see photos 2-4. */
.ept-slides img { animation: none; opacity: 0; transition: opacity 0.8s ease; }
.ept-slides img.is-on, .ept-slides:not(.is-ready) img:first-child { opacity: 1; }
.ept-slide-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.ept-slide-dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1px solid #fff; background: rgba(255,255,255,0.35); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.ept-slide-dots button[aria-current="true"] { background: var(--ept-gold); border-color: var(--ept-gold); }
@media (prefers-reduced-motion: reduce) { .ept-slides img { transition: none; } }

/* Anthony & Ingrid portrait (614x954) in landscape frames: anchor to the top so
   their heads are never cut off (client note 2026-09-25). */
img[src*="ant-and-ingrid"] { object-position: 50% 0 !important; }

/* Tile grids: no star icon, text centred (Marcel 2026-09-25). */
.ept-service-tags.ept-tiles li::before { content: none; display: none; }
.ept-service-tags.ept-tiles li { justify-content: center; text-align: center; }

/* Tile grids on blue sections of non-hunting pages: gold hairline tiles (logo gold) with white text
   instead of bright blue (Marcel 2026-09-25). Hunting pages keep olive. */
body:not(.ept-theme-hunt) .ept-section-green .ept-service-tags.ept-tiles li { background: rgba(255,255,255,0.06); border: 1px solid rgba(214,196,62,0.75); color: #fff; }
body:not(.ept-theme-hunt) .ept-section-green .ept-service-tags.ept-tiles li a { color: inherit; }
body:not(.ept-theme-hunt) .ept-section-green .ept-service-tags.ept-tiles li:hover { background: rgba(214,196,62,0.14); }
body:not(.ept-theme-hunt) .ept-section-green .ept-service-tags.ept-tiles li { padding: 14px 16px; min-height: 60px; font-size: 0.9rem; }

/* All tile grids smaller, site-wide (Marcel 2026-09-25). */
.ept-service-tags.ept-tiles li { padding: 14px 16px; min-height: 60px; font-size: 0.9rem; }

/* Surface Popping hero: 4:3 photo in a ~2.3:1 banner; anchor near the top so
   the angler's head is never cut off. */
.page-id-48 .ept-page-hero-bg { background-position: 50% 5%; }
/* Surface Popping hero: no wide GT photo exists yet (4:3 GT cut head or fish in
   the ~2.3:1 banner). Stopgap: the fishing boat off the beach (2.06:1) until
   Anthony sends a wide GT shot. */
.page-id-48 .ept-page-hero-bg { background-image: url('/wp-content/uploads/fm-typical-launch.jpg') !important; background-position: 50% 50%; }
/* SA Experiences hero: client's Bloukrans Bridge (Marcel 2026-09-25). Portrait
   photo in a wide banner, anchored on the arch. */
.page-id-84 .ept-page-hero-bg { background-image: url('/wp-content/themes/epic-paradise-tours/images/sax-bloukrans-bridge.jpg') !important; background-position: 50% 12%; }
/* Contact hero: flowering aloes, Eastern Cape (client request). Photo: South
   African Tourism, CC BY 2.0, via Wikimedia Commons; credited on the page. */
.page-id-11 .ept-page-hero-bg { background-image: url('/wp-content/themes/epic-paradise-tours/images/contact-aloes-eastern-cape.jpg') !important; background-position: 50% 40%; }

/* ===== Book covers: the client's real leather guest book (2026-09-25) =====
   Tan hide with darker burnished edges, a stitched border, the logo and title
   burned into the leather, logo left and title right as on the real book. */
.ept-book-cover, body.ept-theme-hunt .ept-book-cover {
  flex-direction: row; gap: 5%; padding: 0 8%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.18 0 0 0 0 0.07 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(130% 110% at 50% 45%, transparent 45%, rgba(92,52,20,0.55) 100%),
    linear-gradient(100deg, #c08a52 0%, #d4a46a 35%, #c9965c 60%, #b98049 100%);
  border: 1px solid #7a4a22; border-radius: 4px;
}
.ept-book-cover::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  border: 2px dashed rgba(58,32,12,0.75); border-radius: 3px;
}
.ept-book-cover::before { background: linear-gradient(90deg, rgba(60,30,8,0.45), transparent); }
.ept-book-cover img {
  width: 44%; max-width: 260px;
  filter: grayscale(1) contrast(1.6) brightness(0.55) sepia(1) hue-rotate(-12deg) saturate(1.4);
  mix-blend-mode: multiply; opacity: 0.9;
}
.ept-book-cover .ept-book-cover-text { display: flex; flex-direction: column; align-items: center; }
.ept-book-cover h3 {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: #3a2210;
  text-shadow: 0 1px 0 rgba(255,225,180,0.35), 0 -1px 0 rgba(40,20,5,0.35);
  font-size: clamp(1.3rem, 2.6vw, 2.2rem); margin: 0 0 10px; line-height: 1.15;
}
.ept-book-cover .ept-book-cover-sub {
  font-family: Georgia, 'Times New Roman', serif; text-transform: none; letter-spacing: 0;
  font-weight: 700; font-size: clamp(0.85rem, 1.4vw, 1.15rem); color: #3a2210; text-align: center;
}
.ept-book-cover .ept-book-open-hint { color: rgba(58,32,12,0.7); left: 0; right: 0; text-align: center; }
@media (max-width: 600px) { .ept-book-cover { flex-direction: column; gap: 14px; } .ept-book-cover img { width: 46%; } }
/* Cover logo: line-art version of the logo, as burned into the real book. */
.ept-book-cover img { content: url('/wp-content/themes/epic-paradise-tours/images/logo-engraved.png'); filter: none; mix-blend-mode: multiply; opacity: 0.88; }

/* Book covers, darker hide with mottled leather shading (Marcel 2026-09-25). */
.ept-book-cover, body.ept-theme-hunt .ept-book-cover {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.13 0 0 0 0 0.04 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.22 0 0 0 0 0.11 0 0 0 0 0.03 0 0 -1.6 0 1.05'/%3E%3C/filter%3E%3Crect width='600' height='400' filter='url(%23m)'/%3E%3C/svg%3E") center / cover,
    radial-gradient(120% 100% at 45% 40%, rgba(255,215,160,0.18) 0%, transparent 45%),
    radial-gradient(135% 115% at 50% 45%, transparent 40%, rgba(55,28,8,0.75) 100%),
    linear-gradient(100deg, #7e4f26 0%, #9c6a3a 30%, #a8743f 50%, #946232 72%, #6f4420 100%);
  box-shadow: inset 0 0 40px rgba(40,18,4,0.55), inset 0 2px 0 rgba(255,220,170,0.15), 0 30px 70px rgba(0,0,0,0.4);
}
.ept-book-cover h3, .ept-book-cover .ept-book-cover-sub { color: #2a1507; text-shadow: 0 1px 0 rgba(255,205,150,0.28), 0 -1px 1px rgba(20,8,0,0.5); }
.ept-book-cover::after { border-color: rgba(35,17,5,0.85); }
.ept-book-cover img { opacity: 0.95; }
.ept-book-cover .ept-book-open-hint { color: rgba(40,20,6,0.8); }

/* Book covers v3: built from the client's real guest book photo.
   Texture = tile cut from the book's own leather; colours sampled from it
   (body #a57144, burnished rim #452318, burned text #4c2f20); tight dark
   running stitch close to the edge; logo burned darker and heavier. */
.ept-book-cover, body.ept-theme-hunt .ept-book-cover {
  background:
    radial-gradient(90% 80% at 55% 45%, rgba(255,210,150,0.14), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(69,35,24,0.55) 88%, rgba(50,24,10,0.85) 100%),
    url('/wp-content/themes/epic-paradise-tours/images/leather-tile.jpg') 0 0 / 600px 280px repeat,
    #a57144;
  border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(60,30,12,0.55), inset 0 0 18px rgba(50,24,8,0.6), inset 3px 0 0 rgba(255,215,160,0.12), 0 24px 50px rgba(0,0,0,0.35);
}
.ept-book-cover::after { inset: 9px; border: 2px dashed #2e1a0c; border-radius: 4px; opacity: 0.85; }
.ept-book-cover::before { width: 14px; left: 0; background: linear-gradient(90deg, rgba(40,18,6,0.55), transparent); }
.ept-book-cover img { content: url('/wp-content/themes/epic-paradise-tours/images/logo-burned.png'); width: 46%; max-width: 280px; opacity: 0.92; mix-blend-mode: multiply; filter: blur(0.3px); }
.ept-book-cover h3, .ept-book-cover .ept-book-cover-sub {
  font-family: 'Times New Roman', Times, Georgia, serif; font-weight: 700; color: #3b2415;
  text-shadow: 0 0 1px rgba(40,20,8,0.6), 0 1px 0 rgba(255,215,160,0.18);
}
.ept-book-cover h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
.ept-book-cover .ept-book-cover-sub { font-size: clamp(1rem, 1.7vw, 1.4rem); }
/* v3.1: one un-mirrored leather crop stretched over the cover (no pattern),
   and a much stronger burnished rim as on the real book. */
.ept-book-cover, body.ept-theme-hunt .ept-book-cover {
  background:
    radial-gradient(80% 70% at 55% 45%, rgba(255,210,150,0.12), transparent 60%),
    radial-gradient(125% 115% at 50% 50%, transparent 50%, rgba(80,40,16,0.55) 80%, rgba(45,20,6,0.92) 100%),
    url('/wp-content/themes/epic-paradise-tours/images/leather-cover.jpg') center / 100% 100% no-repeat,
    #a57144;
  box-shadow: inset 0 0 0 3px rgba(45,20,6,0.8), inset 0 0 26px rgba(45,20,6,0.75), 0 24px 50px rgba(0,0,0,0.35);
}
/* v3.2: fine pebbled grain at true scale in the sampled tan, light mottling,
   heavy burnished rim. */
.ept-book-cover, body.ept-theme-hunt .ept-book-cover {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.15 0 0 0 0 0.06 0 0 0 0.55 -0.12'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.012' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.15 0 0 0 0 0.05 0 0 -1.2 0 0.72'/%3E%3C/filter%3E%3Crect width='800' height='400' filter='url(%23m)'/%3E%3C/svg%3E") center / cover,
    radial-gradient(80% 70% at 55% 42%, rgba(255,215,160,0.16), transparent 62%),
    radial-gradient(125% 115% at 50% 50%, transparent 50%, rgba(80,40,16,0.5) 80%, rgba(45,20,6,0.9) 100%),
    #a8753f;
}

/* ===== Trip enquiry form (2026-09-25) ===== */
.ept-enq { max-width: 860px; margin: 0 auto; }
.ept-enq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.ept-enq-full { grid-column: 1 / -1; }
.ept-enq label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.4px; color: var(--ept-green-deep); }
.ept-enq input[type=text], .ept-enq input[type=email], .ept-enq input[type=tel], .ept-enq input[type=month], .ept-enq input[type=number], .ept-enq select, .ept-enq textarea {
  width: 100%; padding: 12px 14px; font: 400 0.98rem var(--ept-sans); color: var(--ept-ink);
  background: #fff; border: 1px solid var(--ept-line); border-radius: 3px; box-sizing: border-box;
}
.ept-enq input:focus, .ept-enq select:focus, .ept-enq textarea:focus { outline: 2px solid var(--ept-gold); outline-offset: 1px; border-color: var(--ept-gold); }
.ept-enq .iti { width: 100%; }
.ept-enq .iti input[type=tel] { padding-left: 96px; }
.ept-enq-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ept-enq-same { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 0.8rem !important; color: var(--ept-ink-soft) !important; }
.ept-enq-consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; color: var(--ept-ink) !important; }
.ept-enq-consent input { margin-top: 3px; }
.ept-enq .ept-enq-bad { border-color: #b3261e !important; outline: 1px solid #b3261e; }
.ept-enq-msg { color: #b3261e; min-height: 1.2em; margin: 16px 0 8px; font-size: 0.9rem; }
.ept-enq-alert { background: #fbeaea; border-left: 4px solid #b3261e; padding: 12px 16px; margin-bottom: 20px; }
.ept-enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ept-enq button[type=submit] { margin-top: 6px; }
.ept-enq-done { max-width: 720px; margin: 0 auto; text-align: center; padding: 34px; border: 1px solid var(--ept-gold); background: rgba(214,196,62,0.08); }
@media (max-width: 700px) { .ept-enq-grid { grid-template-columns: 1fr; } }
#enquiry-form { background: var(--ept-paper) !important; color: var(--ept-ink); }
#enquiry-form h2 { color: var(--ept-green-deep) !important; }
#enquiry-form .ept-chooser-intro, #enquiry-form p { color: var(--ept-ink) !important; }
#enquiry-form .ept-eyebrow { color: var(--ept-gold-deep) !important; }
/* Contact: WhatsApp left, enquiry form right, on sand (Marcel 2026-09-25). */
#enquiry-form { background: var(--ept-sand) !important; }
.ept-enq-cols { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 48px; align-items: start; }
.ept-enq-side, .ept-enq-main { background: var(--ept-paper); border: 1px solid var(--ept-line); padding: 32px; }
.ept-enq-side { text-align: center; position: sticky; top: 100px; }
.ept-enq-side h3, .ept-enq-main h3 { font-family: var(--ept-serif); font-weight: 300; font-size: 1.7rem; color: var(--ept-green-deep); margin: 0 0 10px; }
.ept-enq-side .ept-contact-qr img { margin: 18px auto 8px; }
.ept-enq-side .ept-contact-secondary { flex-direction: column; gap: 8px; margin-top: 16px; }
.ept-enq-side .ept-contact-secondary a { color: var(--ept-green-deep) !important; }
.ept-enq-based { font-size: 0.85rem; margin-top: 18px !important; }
.ept-enq-main .ept-enq { max-width: none; }
@media (max-width: 900px) { .ept-enq-cols { grid-template-columns: 1fr; } .ept-enq-side { position: static; } }
/* Date range picker in brand colours. */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--ept-navy); border-color: var(--ept-navy); color: #fff; }
.flatpickr-day.inRange { background: rgba(214,196,62,0.25); border-color: transparent; box-shadow: -5px 0 0 rgba(214,196,62,0.25), 5px 0 0 rgba(214,196,62,0.25); }
.flatpickr-day.today { border-color: var(--ept-gold); }
.ept-enq-consent a { color: var(--ept-navy); text-decoration: underline; }
.ept-enq-note { margin: 18px 0 14px; padding: 12px 16px; border-left: 4px solid var(--ept-gold); background: rgba(214,196,62,0.12); font-size: 0.9rem; color: var(--ept-ink); }
.ept-enq label.ept-enq-consent { display: block !important; font-size: 0.85rem; line-height: 1.5; }
.ept-enq-consent input { margin: 0 8px 0 0; vertical-align: -2px; }

/* ===== Privacy / cookie consent banner (POPIA, 2026-09-25) ===== */
.ept-cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 1040px; margin: 0 auto;
  background: var(--ept-paper); color: var(--ept-ink); border: 1px solid var(--ept-line); border-top: 4px solid var(--ept-gold);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28); padding: 22px 26px; font-size: 0.9rem; line-height: 1.55;
  transform: translateY(20px); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.ept-cc.is-open { transform: none; opacity: 1; }
.ept-cc-inner { display: flex; gap: 26px; align-items: center; }
.ept-cc-text h2 { font-family: var(--ept-serif); font-weight: 300; font-size: 1.45rem; color: var(--ept-green-deep); margin: 0 0 6px; }
.ept-cc-text p { margin: 0; }
.ept-cc-text a { color: var(--ept-navy); text-decoration: underline; }
.ept-cc-actions { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.ept-cc-actions .ept-btn { width: 100%; text-align: center; justify-content: center; padding: 12px 18px; }
.ept-btn.ept-btn-ghost { background: transparent; color: var(--ept-green-deep); border: 1px solid var(--ept-green-deep); }
.ept-btn.ept-btn-ghost:hover { background: var(--ept-green-deep); color: #fff; }
.ept-cc-link { background: none; border: 0; color: var(--ept-navy); text-decoration: underline; cursor: pointer; font: inherit; padding: 4px; }
.ept-cc-prefs { border-top: 1px solid var(--ept-line); margin-top: 18px; padding-top: 8px; }
.ept-cc-row { display: flex; justify-content: space-between; gap: 22px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ept-line); }
.ept-cc-row p { margin: 2px 0 0; font-size: 0.84rem; color: var(--ept-ink-soft); }
.ept-cc-always { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ept-gold-deep); white-space: nowrap; }
.ept-cc-switch { position: relative; width: 46px; height: 26px; flex: 0 0 46px; }
.ept-cc-switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.ept-cc-switch span { position: absolute; inset: 0; background: #c9c4b4; border-radius: 26px; transition: background .2s; }
.ept-cc-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; }
.ept-cc-switch input:checked + span { background: var(--ept-navy); }
.ept-cc-switch input:checked + span::after { transform: translateX(20px); }
.ept-cc-switch input:focus-visible + span { outline: 2px solid var(--ept-gold); outline-offset: 2px; }
.ept-cc-prefs-actions { margin-top: 14px; text-align: right; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ept-footer-privacy-btn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 760px) { .ept-cc { left: 8px; right: 8px; bottom: 8px; padding: 18px; } .ept-cc-inner { flex-direction: column; align-items: stretch; gap: 14px; } .ept-cc-actions { min-width: 0; } }

/* Privacy Notice hero: client's Nosy Be sunset. */
.page-id-3 .ept-page-hero-bg { background-image: url('/wp-content/themes/epic-paradise-tours/images/gallery/gal-81.jpg') !important; background-position: 50% 45%; }
/* Banner never taller than the screen; scrolls inside itself (phone + prefs open). */
.ept-cc { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) { .ept-cc { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } }
@media (max-width: 760px) { .ept-cc { max-height: 80vh; max-height: 80svh; } }

/* Terms of Business hero: client's two leather guest books (Nosy Be + South Africa), books kept whole. */
.page-id-490 .ept-page-hero-bg { background-image: url('/wp-content/themes/epic-paradise-tours/images/terms-guest-books.jpg') !important; background-position: 50% 73%; }
@media (max-width: 900px) and (orientation: portrait) { .page-id-490 .ept-page-hero-bg { background-position: 96% 50%; } }

/* ept-dest-stack-mobile-fit (2026-10-12): on phones each stacked card was a
   fixed flex share (flex 1 1 0 + min-height 300px) with overflow:hidden, and
   the 16:9 photo above the panel left too little room, so the title, text and
   link were cut off (on desktop too: the two cards split the aside height).
   The cards now size to their content at every width. */
.ept-dest-stack { height: auto; }
.ept-dest-stack .ept-dest { flex: none; min-height: 0; }