/* ============================================================
   Collection DETAIL — V5 (final mockup, 14 Aug 2026).
   One stylesheet for page/collection-detail.blade.php, which serves the
   hotel, supplier (agriturismo/seaside/spas/wineries/...) and property
   (villa/apartment) detail routes. Loaded with ?v=filemtime.
   Tokens from ivs-tokens.css (global); buttons from ivs-buttons.css;
   sub-nav, reveal, testimonial, journal and map are shared components.
   ============================================================ */

.ivs-dt {
    background: var(--v5-ivory, #faf9f6);
    color: var(--v5-ink, #201f1d);
    font-family: var(--v5-font-body, Georgia, serif);
    overflow-x: clip;
}
.ivs-dt a { text-decoration: none; color: inherit; }
/* The sticky sub-nav lives inside .ivs-dt here (unlike the tour page), so the
   inherit rule above would paint its olive CTA ink-on-olive. Keep it white. */
.ivs-dt .ivs-subnav-cta { color: #fff; }

.ivs-dt-wrap { width: min(1560px, calc(100% - 3rem)); margin: 0 auto; }
.ivs-dt-wrapn { width: min(1240px, calc(100% - 3rem)); margin: 0 auto; }
.ivs-dt-sec { padding: clamp(2.4rem, 4.2vw, 3.6rem) 0; scroll-margin-top: var(--ivs-subnav-offset, 194px); }

.ivs-dt-eyebrow {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
    margin: 0 0 .9rem;
}
.ivs-dt-eyebrow--amber { color: var(--v5-amber, #fcb913); }
.ivs-dt-title {
    font-family: var(--v5-font-display, Georgia, serif);
    font-weight: 500;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    line-height: 1.18;
    color: var(--v5-ink, #201f1d);
    margin: 0 0 1.1rem;
}
.ivs-dt-title--light { color: #fff; }
.ivs-dt-sub {
    font-family: var(--v5-font-body, Georgia, serif);
    color: var(--v5-stone, #5b574d);
    max-width: 62ch;
    margin: 0 0 1.4rem;
}

/* ── Hero ── */
.ivs-dt-hero {
    position: relative;
    overflow: hidden;
    background: #14130f;
    margin-top: 0;
    /* Same first screen as the tour hero: hero + the 3.5rem sub-nav fill the
       viewport (the fixed site header overlaps the top, it is not subtracted). */
    height: calc(100svh - 3.5rem);
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: calc(var(--ivs-header-h, 130px) + 20px);
}
.ivs-dt-hero-slides { position: absolute; inset: 0; }
.ivs-dt-hero-slide,
.ivs-dt-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ivs-dt-hero-slide { opacity: 0; transition: opacity 1.2s ease; }
.ivs-dt-hero-slide.is-on { opacity: 1; }
.ivs-dt-hero-scrim {
    position: absolute;
    inset: 0;
    /* Tour-hero grade: a bottom-heavy gradient plus a bottom-left vignette so
       the white identity text always reads. */
    background:
        radial-gradient(ellipse 85% 70% at 15% 100%, rgba(0, 0, 0, .5), transparent 68%),
        linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .8) 100%);
}
.ivs-dt-hero .ivs-bnav { top: 45%; }

.ivs-dt-crumb {
    position: absolute;
    top: calc(var(--ivs-header-h, 130px) + 14px);
    left: 0;
    width: 100%;
    padding: 0 clamp(1.2rem, 4vw, 3.4rem);
    z-index: 2;
}
.ivs-dt-crumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .55rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(250, 249, 246, .85);
}
.ivs-dt-crumb li + li::before { content: "/"; margin-right: .55rem; color: rgba(250, 249, 246, .45); }
.ivs-dt-crumb a:hover { color: #fff; text-decoration: underline; }

/* the identity block — plain white text, bottom-left, tour-hero voice */
.ivs-dt-heroid {
    position: relative;
    z-index: 3;
    max-width: 64rem;
    margin: 0 clamp(1.2rem, 4vw, 3.4rem) clamp(1.5rem, 2.6vw, 2rem);
}
.ivs-dt-heroid-eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--v5-amber, #fcb913); /* amber is legal here: dark ground */
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
    margin: 0 0 1.4rem;
}
.ivs-dt-heroid-rule {
    display: inline-block;
    width: 2.25rem;
    height: 2px;
    background: var(--v5-gold, #b9995b); /* the V5 gold-rule language */
}
.ivs-dt-name {
    font-family: var(--v5-font-display, Georgia, serif);
    font-weight: 400;
    /* Tracks the tour hero's title scale: 1.9rem on phones up to 3rem @1366+. */
    font-size: clamp(1.9rem, 1.05rem + 2.35vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 20px rgba(0, 0, 0, .55);
    margin: 0;
}
.ivs-dt-herometa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
    margin: 1.4rem 0 0;
}
.ivs-dt-stars { letter-spacing: .2em; color: var(--v5-amber, #fcb913); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.ivs-dt-herometa-sep { color: rgba(255, 255, 255, .6); }
/* NOTE: named -heroid-facts, NOT -mini — .ivs-dt-mini is the nearby CARD
   further down; sharing the name once leaked this shadow/uppercase onto the
   card titles and smeared them. */
.ivs-dt-heroid-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
    margin: .7rem 0 0;
}
@media (max-width: 640px) {
    .ivs-dt-heroid { margin: 0 1rem 1.2rem; }
    .ivs-dt-crumb { display: none; }
}

/* ── Overview: pull-quote + prose ── */
.ivs-dt-story {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
@media (max-width: 900px) { .ivs-dt-story { grid-template-columns: 1fr; } }
.ivs-dt-quote {
    font-family: var(--v5-font-display, Georgia, serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    line-height: 1.4;
    max-width: 34ch;
    color: var(--v5-ink, #201f1d);
    margin: 0;
}
.ivs-dt-quote::before { content: "\201C"; color: var(--v5-gold, #b9995b); }
.ivs-dt-quote::after { content: "\201D"; color: var(--v5-gold, #b9995b); }
.ivs-dt-prose { color: var(--v5-stone, #5b574d); line-height: 1.85; font-size: 1.01rem; }
.ivs-dt-prose p { margin: 0 0 1rem; }
.ivs-dt-prose iframe { max-width: 100%; }
.ivs-dt-prose img { max-width: 100%; height: auto; }
/* ── Legacy-editor markup arrives with its own inline fonts, sizes and
   colours per property; flatten every text node to the house reading voice.
   Content, tags and links stay exactly as stored (SEO untouched) — only the
   paint is normalised. :where() keeps specificity at the class alone, and
   !important is required to beat style="" attributes. ── */
.ivs-dt-prose :where(p, div, li, td, span, font, em, i, u, small, big) {
    font-family: var(--v5-font-body, Georgia, serif) !important;
    font-size: 1.01rem !important;
    line-height: 1.85 !important;
    color: var(--v5-stone, #5b574d) !important;
    background: transparent !important;
}
.ivs-dt-prose :where(b, strong),
.ivs-dt-prose :where(b, strong) :where(span, font, em, i, u) {
    font-family: var(--v5-font-body, Georgia, serif) !important;
    font-weight: 600;
    color: var(--v5-ink, #201f1d) !important;
    background: transparent !important;
}
.ivs-dt-prose :where(h1, h2, h3, h4, h5, h6),
.ivs-dt-prose :where(h1, h2, h3, h4, h5, h6) :where(span, font, b, strong, em, i, u) {
    font-family: var(--v5-font-display, Georgia, serif) !important;
    font-size: 1.35rem !important;
    font-weight: 500;
    line-height: 1.3 !important;
    color: var(--v5-ink, #201f1d) !important;
    background: transparent !important;
    margin: 1.4rem 0 .7rem;
}
.ivs-dt-prose a,
.ivs-dt-prose a :where(span, font, b, strong, em, i, u) {
    color: var(--v5-olive-700, #4a5e2f) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklab, var(--v5-olive-700, #4a5e2f) 45%, transparent);
}
.ivs-dt-prose a:hover { color: var(--v5-olive-900, #33421f) !important; }

/* ── Read-more clamp + magazine-rule toggle (the tour V5 pattern) ── */
.ivs-dt-clamp {
    position: relative;
    overflow: hidden;
    max-height: 19rem;
    transition: max-height .6s cubic-bezier(.25, .8, .25, 1);
}
.ivs-dt-clamp::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5.5rem;
    background: linear-gradient(180deg, transparent, var(--v5-ivory, #faf9f6));
    pointer-events: none;
    transition: opacity .4s;
}
.ivs-dt-clamp.is-open { max-height: none; }
.ivs-dt-clamp.is-open::after { opacity: 0; }
.ivs-dt-expand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}
.ivs-dt-expand-line { flex: 1; height: 1px; background: var(--v5-line, #e4e0d5); }
.ivs-dt-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
    transition: color .3s ease;
}
.ivs-dt-expand-btn:hover { color: var(--v5-olive-900, #33421f); }
.ivs-dt-expand-btn i { font-size: .7rem; transition: transform .3s ease; }
.ivs-dt-expand-btn[aria-expanded="true"] i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .ivs-dt-clamp, .ivs-dt-expand-btn i { transition: none; }
}

/* ── Parchment + toile band (amenities, enquiry) ── */
.ivs-dt-band {
    position: relative;
    overflow: hidden;
    background: var(--v5-parchment, #f2efe8);
    border-top: 1px solid var(--v5-line, #e4e0d5);
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
    box-shadow: inset 0 14px 26px -14px rgba(32, 31, 29, .22), inset 0 -14px 26px -14px rgba(32, 31, 29, .22);
}
.ivs-dt-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/images/italy-tile.webp) repeat;
    background-size: 620px;
    opacity: .13;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
@media (max-width: 1024px) { .ivs-dt-band::after { background-size: 420px; } }
.ivs-dt-band > * { position: relative; z-index: 1; }

/* amenity chips */
.ivs-dt-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.ivs-dt-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--v5-line, #e4e0d5);
    background: #fff;
    border-radius: 3px;
    padding: .5rem .85rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--v5-stone, #5b574d);
}
.ivs-dt-chip svg, .ivs-dt-chip img { width: 14px; height: 14px; color: var(--v5-olive-500, #6b8051); }
/* Admin-uploaded icon, repainted: the PNG is only the mask shape, the colour
   comes from the token — so legacy kelly-green files still land on-palette. */
.ivs-dt-chip-ico {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: var(--v5-olive-500, #6b8051);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ── Gallery stage + thumbnails ── */
/* The gallery itself is the shared ivs-gallery component
   (css/components/ivs-gallery.css), loaded by its partial.
   Legacy detail photos are small (mostly 683x512, some 341px) — cap the
   gallery at the 1240 measure the Location/Enquiry sections use (boss call:
   level with the map container) and soften the ratio to the photos' own 4:3
   family, so they upscale and crop less. TODO(data): once high-res photos
   are uploaded these vars can go and the gallery returns to full width. */
#dt-gallery .ivs-gal { --ivs-gal-maxw: 1240px; --ivs-gal-ratio: 3 / 2; }
/* The gallery sits centred, so its eyebrow centres with it. */
#dt-gallery .ivs-dt-eyebrow { text-align: center; }

/* ── Location ── */
.ivs-dt-two {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    /* stretch: the map fills the ledger's height, so the two columns end level */
    align-items: stretch;
}
@media (max-width: 900px) { .ivs-dt-two { grid-template-columns: 1fr; } }
.ivs-dt-map {
    border: 1px solid var(--v5-line, #e4e0d5);
    min-height: 340px;
    background: var(--v5-parchment, #f2efe8);
    /* warm the clinical grey of light-v11 toward the page's parchment */
    filter: sepia(.12) saturate(.92) brightness(1.01);
}
.ivs-dt-map--empty {
    display: grid;
    place-items: center;
    color: var(--v5-olive-300, #a9b58f);
}
.ivs-dt-map--empty svg { width: 38px; height: 46px; }
.ivs-dt-facts { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--v5-line, #e4e0d5); }
.ivs-dt-facts li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
    font-size: .9rem;
}
.ivs-dt-facts b {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--v5-mist, #8b877c);
    align-self: center;
}
.ivs-dt-facts span { font-family: var(--v5-font-body, Georgia, serif); color: var(--v5-ink, #201f1d); text-align: right; }
/* .ivs-dt scope so the link colour beats the `.ivs-dt a { color: inherit }` rule */
.ivs-dt .ivs-dt-dir {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.1rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
    transition: color .25s;
}
.ivs-dt .ivs-dt-dir:hover { color: var(--v5-olive-900, #33421f); text-decoration: underline; text-underline-offset: 4px; }

/* ── Enquiry (legacy qcform, restaged) ── */
.ivs-dt-enq {
    background: var(--v5-ivory, #faf9f6);
    border: 1px solid var(--v5-line, #e4e0d5);
    box-shadow: 0 18px 40px -26px rgba(32, 31, 29, .4);
    padding: clamp(1.4rem, 2.6vw, 2.2rem);
}
.ivs-dt-enq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .9rem;
}
.ivs-dt-enq-full { grid-column: 1 / -1; }
@media (max-width: 820px) { .ivs-dt-enq-grid { grid-template-columns: 1fr; } }
.ivs-dt-input {
    width: 100%;
    border: 1px solid var(--v5-line, #e4e0d5);
    border-radius: 3px;
    background: #fff;
    font-family: var(--v5-font-body, Georgia, serif);
    font-size: .95rem;
    color: var(--v5-ink, #201f1d);
    padding: .66rem .8rem;
}
.ivs-dt-input::placeholder { color: var(--v5-mist, #8b877c); font-style: italic; }
.ivs-dt-input:focus { outline: none; border-color: var(--v5-olive-500, #6b8051); }
textarea.ivs-dt-input { min-height: 110px; resize: vertical; }
.ivs-dt-enq .text-red { color: #b3423a; font-family: var(--v5-font-label, sans-serif); font-size: .72rem; }
#qcmes { font-family: var(--v5-font-body, Georgia, serif); margin-bottom: .6rem; }

/* ── Ink band: nearby journeys ── */
.ivs-dt-ink {
    background: var(--v5-ink, #201f1d);
    border-top: 1px solid #14130f;
    border-bottom: 1px solid #14130f;
    box-shadow: inset 0 8px 16px -10px rgba(0, 0, 0, .5), inset 0 -8px 16px -10px rgba(0, 0, 0, .5);
    color: var(--v5-parchment, #f2efe8);
}
/* Both nearby sections ride the shared ivs-rail (auto-slide + drag).
   Page knobs: card width, and a lighter scrollbar on the ink band. */
.ivs-dt-rail { --ivs-rail-item: clamp(240px, 24%, 320px); }
.ivs-dt-ink .ivs-dt-rail { --ivs-rail-scrollbar: rgba(250, 249, 246, .22); }
.ivs-dt-rail .ivs-dt-mini-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* .ivs-dt scope: the card is an <a>, and `.ivs-dt a { color: inherit }`
   would otherwise win and paint ink-band card titles ivory-on-white. */
.ivs-dt .ivs-dt-mini {
    background: #fff;
    border: 1px solid var(--v5-line, #e4e0d5);
    display: flex;
    flex-direction: column;
    color: var(--v5-ink, #201f1d);
    transition: box-shadow .3s, translate .3s;
}
.ivs-dt-mini:hover { box-shadow: 0 14px 30px -18px rgba(32, 31, 29, .55); translate: 0 -3px; }
.ivs-dt-mini-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--v5-parchment, #f2efe8); display: block; }
.ivs-dt-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.ivs-dt-mini:hover .ivs-dt-mini-img img { transform: scale(1.045); }
.ivs-dt-mini-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.ivs-dt-mini-kicker {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
}
.ivs-dt-mini-name { font-family: var(--v5-font-display, Georgia, serif); font-weight: 500; font-size: 1.12rem; line-height: 1.3; margin: 0; }
.ivs-dt-mini-loc { font-family: var(--v5-font-body, Georgia, serif); font-size: .85rem; color: var(--v5-stone, #5b574d); }
.ivs-dt-mini-cta {
    margin-top: auto;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--v5-stone, #5b574d);
    transition: color .25s;
}
.ivs-dt-mini:hover .ivs-dt-mini-cta { color: var(--v5-olive-700, #4a5e2f); }

/* On the ink band the white card glares — a quiet glass card instead
   (boss, 15 Aug). The props section below keeps the white card on ivory. */
.ivs-dt-ink .ivs-dt-mini {
    background: rgba(250, 249, 246, .05);
    border-color: rgba(250, 249, 246, .16);
    color: var(--v5-parchment, #f2efe8);
}
.ivs-dt-ink .ivs-dt-mini:hover { box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .85); }
.ivs-dt-ink .ivs-dt-mini-img { background: rgba(0, 0, 0, .35); }
.ivs-dt-ink .ivs-dt-mini-kicker { color: var(--v5-amber, #fcb913); /* olive sinks on ink */ }
.ivs-dt-ink .ivs-dt-mini-loc,
.ivs-dt-ink .ivs-dt-mini-cta { color: rgba(250, 249, 246, .62); }
.ivs-dt-ink .ivs-dt-mini:hover .ivs-dt-mini-cta { color: var(--v5-amber, #fcb913); }

/* the sidebar tour-search, restaged as a hairline ledger row on ink */
.ivs-dt-tsearch {
    display: grid;
    grid-template-columns: 1.6fr .9fr auto;
    gap: 1.6rem;
    align-items: end;
    max-width: 880px;
    margin: 2.4rem auto 0;
}
@media (max-width: 720px) { .ivs-dt-tsearch { grid-template-columns: 1fr; gap: 1.1rem; } }
.ivs-dt-tsearch-label {
    display: block;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(250, 249, 246, .5);
    margin-bottom: .4rem;
}
.ivs-dt-tsearch input,
.ivs-dt-tsearch select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(250, 249, 246, .3);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: var(--v5-font-body, Georgia, serif);
    font-size: .95rem;
    padding: .45rem 0 .55rem;
    transition: border-color .3s;
}
.ivs-dt-tsearch input:focus,
.ivs-dt-tsearch select:focus {
    outline: none;
    border-bottom-color: var(--v5-amber, #fcb913);
}
.ivs-dt-tsearch input::placeholder { color: rgba(250, 249, 246, .38); font-style: italic; }
.ivs-dt-tsearch option { color: var(--v5-ink, #201f1d); }

/* ── The film: click-to-load YouTube ── */
#dt-film .ivs-dt-eyebrow { text-align: center; }
.ivs-dt-film {
    width: min(880px, 100%);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--v5-line, #e4e0d5);
    background: var(--v5-ink, #201f1d);
    color: #fff;
    cursor: pointer;
    padding: 0;
}
/* the video's own thumbnail as the poster, under a soft scrim */
.ivs-dt-film-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.ivs-dt-film:hover .ivs-dt-film-poster { transform: scale(1.03); }
.ivs-dt-film-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 19, 17, .62) 0%, rgba(20, 19, 17, .12) 45%, rgba(20, 19, 17, .18) 100%);
}
.ivs-dt-film svg {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    color: #fff;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .6));
    transition: transform .25s;
}
.ivs-dt-film:hover svg { transform: scale(1.12); }
.ivs-dt-film-label {
    position: absolute;
    bottom: .9rem;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
iframe.ivs-dt-film { display: block; }
@media (prefers-reduced-motion: reduce) {
    .ivs-dt-film-poster, .ivs-dt-film svg { transition: none; }
}

/* ── Testimonial: the shared ivs-testi section gets its own ground here —
   a parchment band between two ivory neighbours, with the same inset-shadow
   language as .ivs-dt-band, and extra bottom room so the dot indicators
   don't sit on the edge (boss, 15 Aug). Scoped: country pages untouched. ── */
.ivs-dt .ivs-testi {
    background: var(--v5-parchment, #f2efe8);
    border-top: 1px solid var(--v5-line, #e4e0d5);
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
    box-shadow: inset 0 14px 26px -14px rgba(32, 31, 29, .22), inset 0 -14px 26px -14px rgba(32, 31, 29, .22);
    padding: clamp(2.4rem, 4.2vw, 3.6rem) 0 clamp(3.2rem, 5vw, 4.6rem);
}

/* ── Fleuron divider + resources strip ── */
.ivs-dt-fleuron {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    color: var(--v5-gold, #b9995b);
    width: min(1560px, calc(100% - 3rem));
    margin: 0 auto clamp(1.6rem, 2.6vw, 2.2rem);
}
.ivs-dt-fleuron::before,
.ivs-dt-fleuron::after { content: ""; flex: 1; height: 1px; background: var(--v5-line, #e4e0d5); }
.ivs-dt-fleuron svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* The resources strip is now the shared ivs-marquee component
   (css/components/ivs-marquee.css), loaded by its partial. */

/* ── Closing CTA (layouts/footer-info-new) — the country V5 grade,
   replicated here because destinations-v5.css only ships on country pages
   (its rules are scoped to main.destination-city). Image pools arrive empty
   from the blade, so the band keeps the stylesheet's own tollfree.jpg. ── */
.ivs-dt .tollfreebg--parallax {
    position: relative;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
}
.ivs-dt .tollfreebg--parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(32, 31, 29, .74) 0%,
        rgba(32, 31, 29, .58) 45%,
        rgba(32, 31, 29, .80) 100%);
}
.ivs-dt .tollfreebg--parallax .container { position: relative; z-index: 1; }
.ivs-dt .tollfreebg--parallax .dv5-eyebrow {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--v5-gold, #b9995b);
    margin: 0 0 14px;
}
.ivs-dt .tollfreebg--parallax .dv5-eyebrow::after {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    margin: 9px auto 0;
    background: var(--v5-gold, #b9995b);
}
.ivs-dt .tollfreebg--parallax h2 {
    font-family: var(--v5-font-display, Georgia, serif);
    font-weight: 500;
    /* Wider measure + calmer size: the message sits on two lines, not five */
    font-size: clamp(1.25rem, 1.9vw, 1.75rem);
    line-height: 1.35;
    letter-spacing: .01em;
    color: #fff;
    max-width: 64ch;
    margin-inline: auto;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
    text-wrap: balance;
}
/* The phones live in the footer right below — say it once (boss, 15 Aug). */
.ivs-dt .tollfreebg--parallax ul { display: none; }
/* Shorter band to match the shorter message */
.ivs-dt .tollfreebg--parallax.spacebox { padding: 85px 0 80px; }

/* reCAPTCHA badge sometimes overlaps the grid on small screens */
.ivs-dt-enq .g-recaptcha { transform: scale(.98); transform-origin: 0 0; }

@media (prefers-reduced-motion: reduce) {
    .ivs-dt-hero-slide,
    .ivs-dt-mini,
    .ivs-dt-mini-img img { transition: none; }
    .ivs-dt-mini:hover { translate: none; }
    .ivs-dt-mini:hover .ivs-dt-mini-img img { transform: none; }
}