/* ═══════════════════════════════════════════════════════════════════════════
   escorted-v5.css — Small Group Escorted Tours page (V5, Jesse brief 27 Oct 2026)
   ─────────────────────────────────────────────────────────────────────────
   Loaded AFTER global-new.css, which still owns the hero video, the gallery
   grid + lightbox and the testimonial slider mechanics. Everything here is
   scoped to main.esc5 so the same selectors win by source order, not by
   !important. Tokens: components/ivs-tokens.css (global). Buttons:
   components/ivs-buttons.css (global). Load with ?v=filemtime.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/editorial/inter-latin.woff2') format('woff2');
}

main.esc5 {
    background: var(--v5-ivory);
    color: var(--v5-ink);
    font-family: var(--v5-font-body);
    line-height: 1.7;
    overflow-x: clip;
}
main.esc5 h1, main.esc5 h2, main.esc5 h3, main.esc5 p { margin: 0; }
main.esc5 a { color: inherit; text-decoration: none; }

/* ── Shells ── */
main.esc5 .esc5-wrap { width: min(1230px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }
main.esc5 .esc5-wide { width: min(1560px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }
/* Hero title block + sticky sub-nav share the tour page's gutter (.tv5-container). */
main.esc5 .esc5-container { width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: 32px; }
@media (min-width: 640px) { main.esc5 .esc5-container { padding-inline: 48px; } }
@media (min-width: 1024px) { main.esc5 .esc5-container { padding-inline: 64px; } }
@media (min-width: 1440px) { main.esc5 .esc5-container { padding-inline: 76px; } }
/* The page's inherit-colour link rule outranks the component's white CTA. */
main.esc5 .ivs-subnav-cta, main.esc5 .ivs-subnav-cta:hover, main.esc5 .ivs-subnav-cta:focus-visible { color: #fff; }
main.esc5 .esc5-sec { padding: clamp(3.2rem, 6vw, 5.5rem) 0; }
main.esc5 .esc5-center { text-align: center; }
main.esc5 .esc5-center .esc5-sub { margin-left: auto; margin-right: auto; }

/* ── Section voices (komponen.md: eyebrow + H2 on every section) ── */
main.esc5 .esc5-eyebrow {
    display: block;
    margin-bottom: 0.8rem;
    font-family: var(--v5-font-label);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--v5-olive-700);
}
main.esc5 .esc5-h2 {
    font-family: var(--v5-font-display);
    font-weight: 500;
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--v5-ink);
}
main.esc5 .esc5-sub {
    max-width: 62ch;
    margin-top: 0.9rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--v5-stone);
}
main.esc5 .esc5-kick {
    font-family: var(--v5-font-label);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v5-olive-700);
}
main.esc5 .esc5-kick--private { color: var(--v5-gold); }
main.esc5 .esc5-ic {
    width: 15px; height: 15px; flex: 0 0 auto;
    stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Bands (komponen.md) ── */
main.esc5 .esc5-ink {
    background: var(--v5-ink);
    color: var(--v5-parchment);
    border-top: 1px solid #14130f;
    border-bottom: 1px solid #14130f;
    box-shadow: inset 0 8px 16px -10px rgba(0, 0, 0, 0.5), inset 0 -8px 16px -10px rgba(0, 0, 0, 0.5);
}
main.esc5 .esc5-ink .esc5-eyebrow { color: var(--v5-amber); }
main.esc5 .esc5-ink .esc5-h2 { color: var(--v5-ivory); }
main.esc5 .esc5-ink .esc5-sub { color: rgba(250, 249, 246, 0.78); }
main.esc5 .esc5-band {
    position: relative;
    background: var(--v5-parchment);
    border-top: 1px solid var(--v5-line);
    border-bottom: 1px solid var(--v5-line);
    box-shadow: inset 0 14px 26px -14px rgba(32, 31, 29, 0.22), inset 0 -14px 26px -14px rgba(32, 31, 29, 0.22);
    overflow: clip;
}
main.esc5 .esc5-band::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: url('/images/italy-tile.webp') repeat;
    background-size: 620px;
    opacity: 0.14;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
main.esc5 .esc5-band > * { position: relative; z-index: 1; }

/* ── 1. Hero: video + title + tagline kept, drawn like the tour V5 hero
   (tour-v5.css .tv5-hero*): one sub-nav bar shorter, linear scrim + corner
   vignette, ruled eyebrow, Playfair title, journey meta, breathing cue. ── */
main.esc5 .hero-slider { height: calc(100svh - 3.5rem); min-height: 560px; max-height: 900px; }
main.esc5 .hero-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%);
}
main.esc5 .esc5-hero-vignette {
    position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(ellipse 85% 70% at 15% 100%, rgba(0, 0, 0, 0.5), transparent 68%);
}
main.esc5 .hero-content {
    align-items: stretch;
    text-align: left;
    padding: 0 0 1.5rem;
}
main.esc5 .esc5-hero-box { max-width: 64rem; }
main.esc5 .esc5-hero-eyebrow {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 0 0 1.75rem;
    font-family: var(--v5-font-label);
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
    animation: heroFadeUp 1s ease-out 0.1s both;
}
main.esc5 .esc5-hero-rule { display: inline-block; width: 2.25rem; height: 1px; background: rgba(255, 255, 255, 0.7); }
main.esc5 .hero-content-title {
    font-family: var(--v5-font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    max-width: 22ch;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.55);
}
main.esc5 .hero-content-subtitle {
    font-family: var(--v5-font-body);
    font-size: 1.08rem;
    letter-spacing: 0;
    margin-top: 1rem;
    max-width: 48ch;
}
main.esc5 .esc5-hero-meta {
    margin-top: 2.5rem;
    font-family: var(--v5-font-label);
    font-size: 0.875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
    animation: heroFadeUp 1s ease-out 0.65s both;
}
main.esc5 .esc5-hero-sep { margin-inline: 0.5rem; color: rgba(255, 255, 255, 0.6); }
main.esc5 .esc5-hero-cue {
    position: absolute; left: 50%; bottom: 1.5rem; z-index: 4;
    display: none;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
}
main.esc5 .esc5-hero-cue:hover { color: #fff; }
main.esc5 .esc5-hero-cue-icon { font-size: 0.875rem; animation: esc5-breathe 2.2s ease-in-out infinite; }
@keyframes esc5-breathe {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(5px); opacity: 1; }
}
@media (min-width: 64rem) {
    main.esc5 .hero-content { padding-bottom: 2rem; }
    main.esc5 .esc5-hero-cue { display: block; }
}
/* Sections land below the sticky bar when a tab is clicked (ivs-subnav.js
   publishes --ivs-subnav-offset on :root). */
main.esc5 section[id] { scroll-margin-top: var(--ivs-subnav-offset, 8rem); }

/* ── 2. Short intro: H1 is the CMS title, prose is the CMS description ── */
main.esc5 .esc5-intro { padding: clamp(3rem, 6vw, 4.6rem) 0 clamp(2rem, 4vw, 3rem); }
main.esc5 .esc5-intro h1 {
    font-family: var(--v5-font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    max-width: 26ch;
    margin: 0 auto;
}
/* Editor markup carries inline font-family/padding; flatten it into the
   house voice without touching the words (pattern: komponen.md cms-copy). */
main.esc5 .esc5-prose { max-width: 92ch; margin: 1.3rem auto 0; }
main.esc5 .esc5-prose :where(p, div, span) {
    font-family: var(--v5-font-body) !important;
    font-size: 1.04rem !important;
    line-height: 1.75 !important;
    color: var(--v5-stone) !important;
    padding: 0 !important;
}
main.esc5 .esc5-prose :where(p, div) + :where(p, div) { margin-top: 0.8rem; }
/* Pull-quote band: the tagline on parchment + toile, framed by two gold
   rules. Doubles as the divider before the tours (option B, 27 Oct). */
main.esc5 .esc5-intro { padding-bottom: clamp(2.6rem, 5vw, 4rem); }
main.esc5 .esc5-pull { padding: clamp(2.2rem, 4vw, 3rem) 0; }
main.esc5 .esc5-pull-rule { display: block; width: 46px; height: 1px; margin: 0 auto; background: var(--v5-gold); }
main.esc5 .esc5-pull-text {
    max-width: 60ch;
    margin: 1.2rem auto;
    font-family: var(--v5-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.45;
    color: var(--v5-ink);
}

/* ── 3. Tours: departure board + postcard grid ── */
main.esc5 .esc5-tours { padding: clamp(3.2rem, 6vw, 5.5rem) 0; }
main.esc5 .esc5-board {
    margin-top: 2.2rem;
    background: var(--v5-ink);
    color: var(--v5-parchment);
    border-top: 1px solid #14130f;
    border-bottom: 1px solid #14130f;
    box-shadow: inset 0 8px 16px -10px rgba(0, 0, 0, 0.5);
}
main.esc5 .esc5-board-in {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 1rem 1.6rem;
    min-height: 72px;
    padding-block: 0.8rem;
}
main.esc5 .esc5-board-lbl {
    font-family: var(--v5-font-label);
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--v5-amber);
    white-space: nowrap;
}
main.esc5 .esc5-months { display: flex; flex-wrap: wrap; gap: 0.2rem; }
main.esc5 .esc5-mo {
    display: inline-block;
    padding: 0.6rem 0.8rem;
    border-radius: 3px;
    font-family: var(--v5-font-label);
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(242, 239, 232, 0.75);
    transition: color var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease), background var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease);
}
main.esc5 .esc5-mo:hover { color: var(--v5-ivory); }
main.esc5 .esc5-mo.is-on { background: var(--v5-ivory); color: var(--v5-ink); }
main.esc5 .esc5-sel { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
main.esc5 .esc5-sel:first-of-type { margin-left: auto; }
main.esc5 .esc5-sel > span {
    font-family: var(--v5-font-label);
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(242, 239, 232, 0.7);
}
main.esc5 .esc5-sel select {
    appearance: none; -webkit-appearance: none;
    min-width: 150px;
    padding: 0.45rem 1.6rem 0.45rem 0;
    border: 0; border-bottom: 1px solid rgba(242, 239, 232, 0.5); border-radius: 0;
    background: transparent;
    background-image: linear-gradient(45deg, transparent 50%, var(--v5-parchment) 50%), linear-gradient(135deg, var(--v5-parchment) 50%, transparent 50%);
    background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
    background-size: 5px 5px; background-repeat: no-repeat;
    font-family: var(--v5-font-body); font-size: 1rem;
    color: var(--v5-parchment);
    cursor: pointer;
}
main.esc5 .esc5-sel select option { color: var(--v5-ink); }

/* ── Board dropdown (js/pages/escorted-v5.js). The native select stays in
   the form, hidden; the trigger keeps its underline voice on the ink band,
   the panel opens as an ivory sheet with a hairline and a soft shadow. ── */
main.esc5 .esc5-board { position: relative; z-index: 5; }
main.esc5 .esc5-dd-native {
    position: absolute !important;
    width: 1px !important; height: 1px !important; min-width: 0 !important;
    margin: -1px; padding: 0 !important; border: 0 !important;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
main.esc5 .esc5-dd { position: relative; }
main.esc5 .esc5-dd-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-width: 170px;
    padding: 0.45rem 0.1rem 0.5rem 0;
    border: 0; border-bottom: 1px solid rgba(242, 239, 232, 0.42); border-radius: 0;
    background: transparent;
    font-family: var(--v5-font-body); font-size: 1rem; line-height: 1.3;
    color: var(--v5-parchment);
    cursor: pointer;
    transition: border-color var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease), color var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease);
}
main.esc5 .esc5-dd-btn:hover,
main.esc5 .esc5-dd.is-open .esc5-dd-btn { border-bottom-color: var(--v5-amber); color: var(--v5-ivory); }
main.esc5 .esc5-dd-btn:focus { outline: none; }
main.esc5 .esc5-dd-btn:focus-visible { box-shadow: 0 0 0 2px var(--v5-ink), 0 0 0 3px var(--v5-olive-300); }
main.esc5 .esc5-dd-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main.esc5 .esc5-dd-chev {
    width: 14px; height: 14px; flex: 0 0 auto;
    stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.8;
    transition: transform var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease);
}
main.esc5 .esc5-dd.is-open .esc5-dd-chev { transform: rotate(180deg); }
main.esc5 .esc5-dd.is-loading .esc5-dd-btn { opacity: 0.6; pointer-events: none; }
main.esc5 .esc5-dd-list {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 20;
    min-width: 100%; max-height: 320px; overflow-y: auto;
    margin: 0; padding: 0.4rem 0; list-style: none;
    background: var(--v5-ivory);
    border: 1px solid var(--v5-line);
    box-shadow: 0 18px 40px rgba(20, 19, 15, 0.28), 0 2px 6px rgba(20, 19, 15, 0.12);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transform-origin: top left;
    transition: opacity 220ms var(--ivs-anim-ease), transform 220ms var(--ivs-anim-ease), visibility 0s linear 220ms;
}
/* Gold hairline on the panel's top edge: the board's accent carried over. */
main.esc5 .esc5-dd-list::before {
    content: ''; position: sticky; top: -0.4rem; display: block;
    height: 2px; margin: -0.4rem 0 0.4rem; background: var(--v5-gold);
}
main.esc5 .esc5-dd.is-open .esc5-dd-list {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 220ms var(--ivs-anim-ease), transform 220ms var(--ivs-anim-ease), visibility 0s;
}
main.esc5 .esc5-dd-list:focus { outline: none; }
main.esc5 .esc5-dd-opt {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.62rem 1.3rem 0.62rem 0.95rem;
    font-family: var(--v5-font-body); font-size: 0.98rem; line-height: 1.3;
    color: var(--v5-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms var(--ivs-anim-ease), color 160ms var(--ivs-anim-ease);
}
main.esc5 .esc5-dd-tick {
    width: 14px; height: 14px; flex: 0 0 auto;
    stroke: var(--v5-olive-700); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0;
}
main.esc5 .esc5-dd-opt.is-active { background: var(--v5-parchment); }
main.esc5 .esc5-dd-opt[aria-selected="true"] { color: var(--v5-olive-700); font-weight: 500; }
main.esc5 .esc5-dd-opt[aria-selected="true"] .esc5-dd-tick { opacity: 1; }
main.esc5 .esc5-board-btn { padding: 0.75rem 1.2rem; font-size: 0.64rem; }
main.esc5 .esc5-count {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    margin-top: 1.8rem;
    font-family: var(--v5-font-label);
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--v5-mist);
}
main.esc5 .esc5-clear { color: var(--v5-olive-700); border-bottom: 1px solid currentColor; }
main.esc5 .esc5-empty {
    margin-top: 1.4rem;
    padding: 2.4rem 1.5rem;
    border: 1px dashed var(--v5-line);
    text-align: center;
    color: var(--v5-stone);
}
main.esc5 .esc5-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.1rem, 1.7vw, 1.5rem);
    margin-top: 0.8rem;
}

/* Card: the homepage skin (components/ivs-card-tour.css owns the frame,
   photo, badge, title and nights-per-place line). Only what the homepage
   card does not have is drawn here: the kicker, Jesse's facts in place of
   "What's included", and the price footer. */
main.esc5 .esc5-card .esc5-kick { display: block; margin-bottom: 0.45rem; }
/* global-new.css sets `main.grouppage img { height: auto }`, which outranks
   the component and left a strip of parchment under short photos. */
main.esc5 .esc5-card .ivs-ftour-img { height: 100%; max-width: none; }
/* The homepage pushes the stay line down with margin-top:auto; here the
   footer takes the slack instead, so every rule and price sits on one y. */
main.esc5 .esc5-card .ivs-ftour-stay { margin-top: 0; }
/* Two columns on a tablet: four stops can need a third line. */
@media (min-width: 768px) and (max-width: 1199px) {
    main.esc5 .esc5-card .ivs-ftour-stay { min-height: calc(3 * 1.62em); }
}
main.esc5 .esc5-card-facts {
    display: flex; flex-direction: column; gap: 0.32rem;
    padding-top: 0.72rem;
    border-top: 1px solid var(--v5-line);
    font-family: var(--v5-font-body);
    font-size: 0.85rem; line-height: 1.55; color: var(--v5-stone);
}
main.esc5 .esc5-card-facts > span { display: flex; align-items: center; gap: 0.55rem; }
main.esc5 .esc5-card-facts .esc5-ic { width: 14px; height: 14px; color: var(--v5-olive-500); }
main.esc5 .esc5-card .ivs-ftour-cta { margin-top: 0; }

/* Price plate (option A, 27 Oct): a parchment strip across the foot of the
   card, bled to the card edges (the body pads 1.15rem 1.3rem). Price and
   "Ask us" share label + value rows of fixed height, so every plate and
   every button sits on the same line across a row. */
main.esc5 .esc5-card-facts { margin-bottom: 1.15rem; }
main.esc5 .esc5-card-foot {
    position: relative;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin: auto -1.3rem -1.15rem;
    padding: 0.95rem 1.3rem;
    background: var(--v5-parchment);
    border-top: 1px solid var(--v5-line);
    overflow: hidden;
}
/* Option B (bos, 28 Oct): the Italy toile rises behind the button side only,
   so the price stays on plain parchment. A deliberate exception to
   "toile is for narrative bands, not cards" (rule-wajib komponen.md). Same
   image as the page bands, so it is downloaded once. */
main.esc5 .esc5-card-foot::after {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background: url('/images/italy-tile.webp') repeat right center;
    background-size: 360px;
    opacity: 0.2;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
}
main.esc5 .esc5-card-foot > * { position: relative; z-index: 1; }
main.esc5 .esc5-price { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
main.esc5 .esc5-price small {
    display: block; margin-bottom: 0.3rem;
    font-family: var(--v5-font-label);
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    line-height: 1.2;
    color: var(--v5-olive-700);
}
main.esc5 .esc5-price-val {
    display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.4rem;
    height: 1.7rem;
    font-family: var(--v5-font-display);
    font-weight: 600; font-size: 1.55rem; line-height: 1.1;
    color: var(--v5-ink);
    white-space: nowrap;
}
main.esc5 .esc5-price-val i {
    font-family: var(--v5-font-label); font-style: normal;
    font-weight: 500; font-size: 0.68rem; letter-spacing: 0.04em;
    color: var(--v5-stone);
}
main.esc5 .esc5-price--ask .esc5-price-val {
    align-items: flex-end;
    font-style: italic; font-weight: 500; font-size: 1.2rem;
    color: var(--v5-stone);
}
/* The card is already the link, so the button is a styled span (ivs-btn
   recipe), not a second <a>. */
main.esc5 .esc5-card-btn { flex: 0 0 auto; padding: 0.8rem 1.15rem; font-size: 0.66rem; letter-spacing: 0.16em; white-space: nowrap; }
main.esc5 .esc5-card:hover .esc5-card-btn { background: var(--v5-olive-900); }

/* Corner sash: campaign "Featured Journey" recipe (campaign-v5.css
   .cmp5-ch-sash), mirrored to the top-right, in olive. */
main.esc5 .esc5-sash { position: absolute; z-index: 3; top: 0; right: 0; width: 150px; height: 150px; overflow: hidden; pointer-events: none; }
main.esc5 .esc5-sash span {
    position: absolute; display: block; width: 230px; top: 36px; right: -58px;
    transform: rotate(45deg);
    padding: 7px 0;
    text-align: center;
    background: var(--v5-olive-700); color: var(--v5-ivory);
    font-family: var(--v5-font-label);
    font-size: 8.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(16, 18, 13, 0.28);
    transition: box-shadow var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease);
}
main.esc5 .esc5-sash span::before {
    content: ''; position: absolute; inset: 3px 0;
    border-top: 1px solid rgba(250, 249, 246, 0.38);
    border-bottom: 1px solid rgba(250, 249, 246, 0.38);
}
main.esc5 .esc5-card:hover .esc5-sash span { box-shadow: 0 12px 28px rgba(16, 18, 13, 0.38); }
main.esc5 .esc5-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
main.esc5 .esc5-card-ok { color: var(--v5-olive-700); font-weight: 600; }
main.esc5 .esc5-card-req { color: var(--v5-mist); }

/* ── 4. Why travel in a small group (moved below the tours) ── */
main.esc5 .esc5-why { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
main.esc5 .esc5-why p { margin-top: 1rem; font-size: 1.04rem; color: var(--v5-stone); }
main.esc5 .esc5-why .esc5-hi { margin-top: 1.4rem; font-family: var(--v5-font-display); font-style: italic; font-size: 1.15rem; color: var(--v5-ink); }
main.esc5 .esc5-why figure { margin: 0; }
main.esc5 .esc5-why figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
main.esc5 .esc5-why figcaption {
    margin-top: 0.6rem;
    font-family: var(--v5-font-label);
    font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--v5-mist);
}

/* ── 5. Small Group Advantage: ink band, four portrait photographs, each
   with an ivory caption card overlapping its foot (mockup option B, 28 Oct
   2026). Copy is ink/stone on ivory, the icon olive (light ground rules:
   no amber, no gold). Cards 0px radius. Equal-height captions per row. ── */
main.esc5 .esc5-adv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; margin-top: 2.8rem; }
main.esc5 .esc5-adv-it { display: flex; flex-direction: column; }
main.esc5 .esc5-adv-ph { overflow: hidden; aspect-ratio: 4 / 5; background: #14130f; }
main.esc5 .esc5-adv-ph img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 700ms var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
main.esc5 .esc5-adv-cap {
    position: relative; flex: 1;
    margin: -72px 16px 0;
    padding: 1.5rem 1.4rem 1.6rem;
    background: var(--v5-ivory);
    border-top: 2px solid var(--v5-olive-700);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    transition:
        transform var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
        box-shadow var(--ivs-anim-micro, 300ms) var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
main.esc5 .esc5-adv-ic {
    display: block; width: 26px; height: 26px;
    stroke: var(--v5-olive-700); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
main.esc5 .esc5-adv-cap h3 { margin-top: 0.75rem; font-family: var(--v5-font-display); font-weight: 500; font-size: 1.28rem; line-height: 1.25; color: var(--v5-ink); }
main.esc5 .esc5-adv-cap p { margin-top: 0.45rem; font-size: 0.93rem; line-height: 1.68; color: var(--v5-stone); }
@media (hover: hover) {
    main.esc5 .esc5-adv-it:hover .esc5-adv-ph img { transform: scale(1.05); }
    main.esc5 .esc5-adv-it:hover .esc5-adv-cap { transform: translateY(-6px); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.7); }
}

/* ── 6. Testimonials: the Group page's TripAdvisor reviews (650-900
   characters each), global-new slider + photo cycling, V5 voice: stars and
   a Playfair headline, the review in reading-size Lora, guest photos in a
   4:5 frame like the Group page. ── */
main.esc5 .testimonial-slider { max-width: none; margin-top: 2.2rem; }
/* Wide container (.esc5-container) and a near-even split, so the photo can
   sit in a 4:3 landscape frame: most guest photos are 1200x900 originals,
   so a 4:3 frame shows them whole, nobody cut off at the edges. */
main.esc5 .testimonial-slide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
main.esc5 .testimonial-slide__image { aspect-ratio: 4 / 3; order: 2; background: var(--v5-parchment); }
main.esc5 .testimonial-slide__photo { object-position: center 30%; }
main.esc5 .testimonial-slide__quote { max-width: 72ch; }
main.esc5 .testimonial-slide__photo { height: 100%; max-width: none; }
main.esc5 .testimonial-slide__content { order: 1; }
main.esc5 .testimonial-slide__stars { color: var(--v5-gold); font-size: 0.9rem; letter-spacing: 0.22em; margin: 0 0 0.9rem; }
main.esc5 .testimonial-slide__title {
    font-family: var(--v5-font-display); font-weight: 500; font-style: normal;
    font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25;
    color: var(--v5-ink); margin: 0 0 1rem;
}
main.esc5 .testimonial-slide__quote {
    font-family: var(--v5-font-body); font-style: normal; font-weight: 400;
    font-size: 1.02rem; line-height: 1.8;
    color: var(--v5-stone);
}
main.esc5 .testimonial-slide__footer { margin-top: 1.4rem; gap: 0.3rem; }
main.esc5 .testimonial-slide__author {
    display: flex; align-items: center; gap: 1rem;
    font-family: var(--v5-font-label);
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--v5-ink);
}
main.esc5 .testimonial-slide__author::before { content: ''; display: block; width: 46px; height: 1px; background: var(--v5-gold); }
main.esc5 .testimonial-slide__location {
    padding-left: calc(46px + 1rem);
    font-family: var(--v5-font-body); font-style: italic; font-size: 0.88rem;
    color: var(--v5-mist);
}
main.esc5 .testimonial-slider__nav { justify-content: flex-start; gap: 1rem; margin-top: 1.6rem; }
main.esc5 .testimonial-slider__btn { width: 38px; height: 38px; border-radius: 3px; border-color: var(--v5-line); color: var(--v5-ink); }
main.esc5 .testimonial-slider__btn:hover { border-color: var(--v5-olive-700); background: transparent; color: var(--v5-olive-700); }
main.esc5 .testimonial-slider__dot { width: 8px; height: 8px; border-radius: 50% !important; border: 1px solid var(--v5-olive-500); background: transparent; }
main.esc5 .testimonial-slider__dot.is-active { width: 8px; background: var(--v5-olive-700); }

/* ── 7. Gallery: group-travel grid (global-new owns the grid), V5 head ── */
main.esc5 .esc5-gal .masonry-grid { margin-top: 2.2rem; }
main.esc5 .masonry-item { background: var(--v5-line); }

/* ── 8. Enquiry: real group photograph, ink wash, two actions ── */
/* Parallax, the Featured Tours sign-off recipe (featured-tours.css
   .ivs-ftcta): the photograph is a fixed background the page slides over.
   Pure CSS, nothing runs on scroll. Touch screens, <=991px and reduced
   motion get an ordinary scrolling background (fixed is janky or ignored
   there). Ink shows until the image arrives. */
main.esc5 .esc5-enq {
    position: relative; overflow: hidden; color: #fff; text-align: center;
    padding: clamp(5rem, 10vw, 9rem) 0;
    background-color: var(--v5-ink);
    background-size: cover;
    background-position: center 40%;
    background-attachment: fixed;
}
@media (hover: none), (max-width: 991px), (prefers-reduced-motion: reduce) {
    main.esc5 .esc5-enq { background-attachment: scroll; }
}
main.esc5 .esc5-enq-scrim {
    position: absolute; inset: -10%;
    background: radial-gradient(ellipse at 50% 55%, rgba(20, 19, 15, 0.8) 0%, rgba(20, 19, 15, 0.5) 50%, rgba(20, 19, 15, 0.25) 80%);
    filter: blur(30px);
}
main.esc5 .esc5-enq .esc5-wrap { position: relative; }
main.esc5 .esc5-enq .esc5-eyebrow { color: var(--v5-amber); }
main.esc5 .esc5-enq .esc5-h2 { color: #fff; max-width: 20ch; margin: 0 auto; }
main.esc5 .esc5-enq .esc5-sub { color: rgba(255, 255, 255, 0.86); margin-left: auto; margin-right: auto; }
main.esc5 .esc5-btns { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
main.esc5 .esc5-btns .ivs-btn { padding: 1rem 2.1rem; font-size: 0.74rem; letter-spacing: 0.16em; }

/* ── Responsive (4 viewports proven: 375 / 768 / 1366 / 1920) ── */
@media (max-width: 1199px) {
    main.esc5 .esc5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Four captions under 1200px leave ~170px of text width: two per row. */
    main.esc5 .esc5-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4rem; }
}
@media (max-width: 991px) {
    main.esc5 .esc5-sel:first-of-type { margin-left: 0; }
}
@media (max-width: 767px) {
    main.esc5 .hero-slider { height: calc(78svh - 3.5rem); min-height: 480px; }
    main.esc5 .hero-content { padding: 0 0 1.5rem; }
    main.esc5 .esc5-hero-eyebrow { margin-bottom: 1rem; }
    main.esc5 .esc5-hero-meta { margin-top: 1.4rem; font-size: 0.76rem; }
    main.esc5 .esc5-grid { grid-template-columns: minmax(0, 1fr); }
    main.esc5 .esc5-board-in { align-items: stretch; flex-direction: column; gap: 0.8rem; }
    main.esc5 .esc5-sel { justify-content: space-between; }
    main.esc5 .esc5-sel select { min-width: 0; width: 60%; }
    main.esc5 .esc5-dd { width: 62%; }
    main.esc5 .esc5-dd-btn { min-width: 0; width: 100%; }
    main.esc5 .esc5-dd-list { left: auto; right: 0; }
    main.esc5 .esc5-why { grid-template-columns: 1fr; }
    main.esc5 .testimonial-slide { grid-template-columns: 1fr; }
    main.esc5 .testimonial-slide__image { order: 1; aspect-ratio: 4 / 3; min-height: 0; }
    main.esc5 .testimonial-slide__content { order: 2; }
}
@media (max-width: 479px) {
    main.esc5 .esc5-adv { grid-template-columns: minmax(0, 1fr); }
    main.esc5 .esc5-adv-cap { margin: -56px 12px 0; padding: 1.3rem 1.2rem 1.4rem; }
    /* No room for "per person" beside the price and the button on a phone:
       it moves up into the label ("FROM · PER PERSON"). */
    main.esc5 .esc5-price-val i { display: none; }
    main.esc5 .esc5-price small[data-pp]::after { content: ' · ' attr(data-pp); }
    main.esc5 .esc5-price small { white-space: nowrap; letter-spacing: 0.12em; }
    main.esc5 .esc5-card-btn { padding: 0.78rem 0.9rem; letter-spacing: 0.12em; }
    main.esc5 .esc5-btns .ivs-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    main.esc5 .esc5-card, main.esc5 .esc5-mo, main.esc5 .esc5-adv-ph img, main.esc5 .esc5-adv-cap { transition: none; }
    main.esc5 .esc5-dd-list, main.esc5 .esc5-dd.is-open .esc5-dd-list, main.esc5 .esc5-dd-chev, main.esc5 .esc5-dd-opt { transition: none; }
    main.esc5 .esc5-hero-eyebrow, main.esc5 .esc5-hero-meta, main.esc5 .esc5-hero-cue-icon { animation: none; }
}