/* ═══════════════════════════════════════════════════════════════════════════
   featured-tours — page styles for /italy-tours-with-local-hosts.html.
   ─────────────────────────────────────────────────────────────────────────
   Extracted from homepage.css (Fase 4): this page used to load all of
   homepage.css for these rules. The tour card itself lives in
   components/ivs-card-tour.css; the sticky bar in components/ivs-subnav.css.
   ═══════════════════════════════════════════════════════════════════════════ */
.ivs-ftile-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.75rem, 1vw, 0.95rem);
}

.ivs-ftile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--v5-olive-900);
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.ivs-ftile:hover,
.ivs-ftile:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(32, 31, 29, 0.2);
    color: #ffffff;
    text-decoration: none;
}

.ivs-ftile:focus-visible {
    outline: 2px solid var(--v5-olive-300);
    outline-offset: 3px;
}

/* Up to five photos stacked, cross-fading like the cards above. Only
   the active one is visible; with a single photo the lone frame carries
   .is-active from the markup, so nothing is left blank. */
.ivs-ftile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Same high centre-crop as the cards, so the burnt-in watermark
       clears the bottom edge. */
    object-fit: cover;
    object-position: center 42%;
    display: block;
    opacity: 0;
    transition: opacity 0.75s ease, transform 0.6s ease;
}

.ivs-ftile-img.is-active {
    opacity: 1;
}

.ivs-ftile:hover .ivs-ftile-img.is-active {
    transform: scale(1.05);
}

/* Reaches higher than it used to. Now that long names run to six or
   more lines, the top of the text was landing on bare photo and losing
   its contrast; the darkening starts sooner so every line has ground
   under it, while the upper third of the image stays clear. */
.ivs-ftile-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 24, 14, 0) 12%,
        rgba(20, 24, 14, 0.42) 42%,
        rgba(20, 24, 14, 0.72) 68%,
        rgba(24, 28, 16, 0.93) 100%);
    pointer-events: none;
}

.ivs-ftile-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.9rem 0.95rem;
}

/* Ink, matching the cards above - the badge means the same thing in
   both groups, so it should not change colour between them. */
.ivs-ftile-days {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 3px 8px;
    background: var(--v5-ink);
    color: var(--v5-parchment);
    font-family: var(--v5-font-label);
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Shown in full. The clamp at 3 lines was cutting the longer names
   mid-word ("...Dino Island Bo..."), and the block sits on the bottom
   edge and grows upward, so extra lines have room to go. */
.ivs-ftile-name {
    display: block;
    font-family: var(--v5-font-display);
    font-size: clamp(0.88rem, 0.95vw, 1rem);
    font-weight: 500;
    line-height: 1.26;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Detail on hover, same as the cards: collapsed to nothing at rest so
   the photo carries the tile, opening to the stay line and four
   inclusions when pointed at. */
.ivs-ftile-reveal {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.42s ease, opacity 0.34s ease, margin-top 0.42s ease;
}

.ivs-ftile:hover .ivs-ftile-reveal,
.ivs-ftile:focus-visible .ivs-ftile-reveal {
    max-height: 14rem;
    opacity: 1;
    margin-top: 0.65rem;
}

.ivs-ftile-stay {
    display: block;
    font-family: var(--v5-font-label);
    font-size: 0.62rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.ivs-ftile-stay-item::before {
    content: '·';
    margin-right: 0.35rem;
    color: var(--v5-olive-300);
}

.ivs-ftile-stay-count {
    font-weight: 600;
    color: #ffffff;
}

.ivs-ftile-incl-label {
    display: block;
    margin: 0.55rem 0 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    font-family: var(--v5-font-label);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v5-olive-300);
}

.ivs-ftile-incl {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ivs-ftile-incl-item {
    position: relative;
    padding-left: 0.7rem;
    font-family: var(--v5-font-body);
    font-size: 0.66rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    /* One line each: a wrapped entry would push the panel past the tile. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ivs-ftile-incl-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 3px;
    height: 3px;
    background: var(--v5-olive-300);
}

/* Deepen the scrim while the panel is open so the text stays readable. */
.ivs-ftile:hover .ivs-ftile-scrim,
.ivs-ftile:focus-within .ivs-ftile-scrim {
    background: linear-gradient(180deg,
        rgba(20, 24, 14, 0) 12%,
        rgba(20, 24, 14, 0.66) 42%,
        rgba(24, 28, 16, 0.95) 100%);
}

@media (hover: none) {
    .ivs-ftile-reveal {
        display: none;
    }
}

@media (max-width: 1199px) {
    .ivs-ftile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ivs-ftile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .ivs-ftile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ivs-ftile {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-ftile,
    .ivs-ftile-img {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════
   The Featured Tours page
   ═══════════════════════════════════════════════════════ */

.ivs-ftpage {
    background: #fff;
}

.ivs-ftpage-section {
    padding: 64px 0 84px;
}

.ivs-ftpage-head {
    margin-bottom: 0.6rem;
}

/* The page carries an h1 where the homepage section carries an h2.
   Same face and weight, sized for a page title rather than a band. */
.ivs-ftpage .ivs-ftpage-head h1,
.ivs-ftpage .ivs-ftpage-head h1 span {
    font-family: var(--v5-font-display);
    font-size: clamp(2rem, 3.4vw, 2.95rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--v5-ink);
    text-wrap: balance;
}

.ivs-ftpage .ivs-ftpage-head h4 {
    max-width: 62ch;
    margin: 0.85rem auto 0;
    font-family: var(--v5-font-body);
    font-size: clamp(0.92rem, 1vw, 1.02rem);
    line-height: 1.75;
    color: var(--v5-stone);
}

/* How many journeys, stated plainly. It is a real number and it grows,
   which is the point of the page existing. */
.ivs-ftpage-count {
    margin: 0 0 2.4rem;
    text-align: center;
    font-family: var(--v5-font-label);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v5-mist);
}

/* Three across on the page, as on the homepage: the card was drawn for
   that width and reads badly when stretched wider. */
.ivs-ftpage-grid {
    row-gap: 3.2rem;
}

.ivs-ftpage-empty {
    margin: 3rem auto;
    max-width: 46ch;
    text-align: center;
    font-family: var(--v5-font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--v5-stone);
}

/* ── Sign-off ──
   None of these? Then say so and offer the alternative, rather than
   ending the page on the last card. */
.ivs-ftpage-foot {
    margin-top: 4rem;
    padding-top: 2.6rem;
    border-top: 1px solid var(--v5-line);
    text-align: center;
}

.ivs-ftpage-foot-text {
    max-width: 44ch;
    margin: 0 auto 1.5rem;
    font-family: var(--v5-font-body);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.65;
    color: var(--v5-ink);
    text-wrap: balance;
}

.ivs-ftpage-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2.4rem;
    border-radius: 3px;
    background: var(--v5-olive-700);
    color: #fff;
    font-family: var(--v5-font-label);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.34s ease, transform 0.34s ease;
}

.ivs-ftpage-arrow {
    display: inline-block;
    font-size: 0.85em;
    transition: transform 0.34s ease;
}

.ivs-ftpage-cta:hover,
.ivs-ftpage-cta:focus-visible {
    background: var(--v5-olive-900);
    color: #fff;
    transform: translateY(-2px);
}

.ivs-ftpage-cta:hover .ivs-ftpage-arrow {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .ivs-ftpage-section { padding: 40px 0 56px; }
    .ivs-ftpage-foot { margin-top: 2.8rem; padding-top: 2rem; }
}

/* ═══════════════════════════════════════════════════════
   FEATURED TOURS PAGE — hero, how it works, FAQ, sign-off
   ═══════════════════════════════════════════════════════
   The cards themselves are styled further up this file and
   shared with the homepage. Everything here is the page the
   cards now sit in.
   ═══════════════════════════════════════════════════════ */

/* ── Hero ──
   Type on parchment, no photograph. The journeys below carry the
   pictures; a hero image here would push all eleven under the fold
   and say nothing the headline does not. */
.ivs-fthero {
    position: relative;
    overflow: hidden;
    /* Ink ground: it is what shows in the moment before the poster
       paints, and a white flash there is the one thing a film hero
       must not do. */
    background: #14130f;
    /* The header is fixed and 130px tall, which is why every other page
       clears it with the same margin on .breadcome. */
    /* Full screen, matching the V5 tour hero, which was measured rather
       than guessed: it renders at 92-95% of the viewport at every size
       from 1920x1080 down to a phone.

       No top margin. The V5 hero starts at y=0 and runs *behind* the
       fixed header, which is how it reaches the full height; pushing this
       one down by the height of the nav first is what left it 73px short
       at every size. The padding below keeps the type clear of the nav. */
    margin-top: 0;
    /* 57px shy of the full viewport. The hero runs behind the fixed
       header from y=0, so with the 56px rail at its foot the rail's
       bottom edge lands a hair above the fold — the exact composition
       the tour pages have: hero + subnav filling the first screen. */
    min-height: calc(100vh - 57px);
    display: flex;
    flex-direction: column;
    /* Top padding clears the fixed header so the eyebrow never starts
       underneath it; the film still fills the screen behind. The bottom
       is left to the strip, which sits on the floor of the block. */
    padding: 190px 0 0;
    text-align: center;
}

/* Copy bottom-left, deck right: the title anchors the corner while the
   fanned journeys hold the other half of the frame. */
.ivs-fthero-inner {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(2rem, 4vw, 4.5rem);
    padding-bottom: clamp(2.4rem, 6vh, 4.5rem);
    text-align: left;
}

.ivs-fthero-copy {
    max-width: 36rem;
}

/* ── The deck of journeys ──
   About Italy's intro gallery, re-cut: white mounts, the active card
   upright, its neighbours fanned behind it, the full tour name written
   under each photograph. */
.ivs-fthero-deck {
    position: relative;
    align-self: center;
    width: clamp(340px, 26vw, 460px);
    aspect-ratio: 4 / 5;
}

.ivs-fthero-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--v5-line);
    padding: 0.7rem 0.7rem 0;
    box-shadow: 0 20px 46px rgba(16, 15, 13, 0.4);
    text-decoration: none;
    transform-origin: 50% 70%;
    transition: transform 650ms ease, opacity 650ms ease;
    opacity: 0;
    pointer-events: none;
    /* A long name must end inside the mount, never on its edge. */
    overflow: hidden;
}

.ivs-fthero-card img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    display: block;
    background: var(--v5-parchment);
}

.ivs-fthero-card-name {
    /* Bottom space is margin, not padding: clamped-away lines still paint
       into a padding box, and showed as a half-cut fourth line. */
    padding: 0.7rem 0.45rem 0;
    margin-bottom: 0.85rem;
    font-family: var(--v5-font-display);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    color: var(--v5-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Only the front card says its name: eleven half-transparent titles
       overlapping under the fan read as noise, not as information. */
    opacity: 0;
    transition: opacity 400ms ease 180ms;
}

.ivs-fthero-card.is-active .ivs-fthero-card-name {
    opacity: 1;
}

.ivs-fthero-card.is-active {
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
    z-index: 5;
    pointer-events: auto;
}

.ivs-fthero-card.is-prev {
    opacity: 0.55;
    transform: translateX(-16%) rotate(-7deg) scale(0.94);
    z-index: 3;
}

.ivs-fthero-card.is-next {
    opacity: 0.55;
    transform: translateX(16%) rotate(7deg) scale(0.94);
    z-index: 3;
}

.ivs-fthero-card.is-far-prev {
    opacity: 0.28;
    transform: translateX(-28%) rotate(-11deg) scale(0.9);
    z-index: 2;
}

.ivs-fthero-card.is-far-next {
    opacity: 0.28;
    transform: translateX(28%) rotate(11deg) scale(0.9);
    z-index: 2;
}

/* The deck's arrows overlay the fanned side cards, as on About Italy. */
.ivs-fthero-decknav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    /* The header CTA's amber, the same mark the eyebrow above carries:
       on the dark ground and the white mounts it reads as the page's
       accent, not as another piece of chrome. */
    color: var(--v5-amber, #fcb913);
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.55));
    -webkit-tap-highlight-color: transparent;
}

.ivs-fthero-decknav svg {
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto;
}

.ivs-fthero-decknav--prev { left: -14px; }
.ivs-fthero-decknav--next { right: -14px; }

.ivs-fthero-decknav:hover,
.ivs-fthero-decknav:focus-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ivs-fthero-card { transition: none; }
}

@media (max-width: 991.98px) {
    .ivs-fthero-inner {
        grid-template-columns: 1fr;
        gap: 2.2rem;
        padding-bottom: 2.6rem;
    }
    .ivs-fthero-deck {
        justify-self: center;
        width: min(400px, 86%);
    }
    /* One card at a time on a phone: the fan needs side room it does
       not have. The arrows still page through every journey. */
    .ivs-fthero-card:not(.is-active) {
        opacity: 0 !important;
        transform: none !important;
    }
    .ivs-fthero-card.is-active { transform: none !important; }
}

/* ── The film ──
   Poster first, video over it once it can actually play. The poster is
   the first journey's own photograph, so this block is never empty:
   before the film loads, when autoplay is refused, on a metered
   connection, or with reduced motion, the photograph is the hero. */
.ivs-fthero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ivs-fthero-slides {
    position: absolute;
    inset: 0;
}

/* The homepage banner's cross-fade, verbatim: a photograph should
   arrive, not switch. */
.ivs-fthero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ivs-fthero-slide.is-on {
    opacity: 1;
}

/* ── The controls ──
   The homepage banner's bare chevrons, rescoped: no box, a hairline
   drawn outward from the chevron on hover, in the direction it points.
   (style.css scopes the originals to .map-section, so this page carries
   its own copy of the recipe.) */
.ivs-fthero .ivs-bnav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
    -webkit-tap-highlight-color: transparent;
}

.ivs-fthero .ivs-bnav-prev { left: 22px; }
.ivs-fthero .ivs-bnav-next { right: 22px; }

.ivs-fthero .ivs-bnav-icon {
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto;
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ivs-fthero .ivs-bnav::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: 0;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.ivs-fthero .ivs-bnav-prev::after {
    right: 50%;
    margin-right: 14px;
}

.ivs-fthero .ivs-bnav-next::after {
    left: 50%;
    margin-left: 14px;
}

.ivs-fthero .ivs-bnav:hover,
.ivs-fthero .ivs-bnav:focus-visible {
    opacity: 1;
}

.ivs-fthero .ivs-bnav:hover::after,
.ivs-fthero .ivs-bnav:focus-visible::after {
    width: 30px;
}

.ivs-fthero .ivs-bnav-prev:hover .ivs-bnav-icon,
.ivs-fthero .ivs-bnav-prev:focus-visible .ivs-bnav-icon {
    transform: translateX(-3px);
}

.ivs-fthero .ivs-bnav-next:hover .ivs-bnav-icon,
.ivs-fthero .ivs-bnav-next:focus-visible .ivs-bnav-icon {
    transform: translateX(3px);
}

/* Two washes: a flat one to sit the type on, and a foot that carries
   the figures into the section below. */
.ivs-fthero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(16, 15, 13, 0.86) 0%,
            rgba(16, 15, 13, 0.52) 42%,
            rgba(16, 15, 13, 0.42) 72%,
            rgba(16, 15, 13, 0.56) 100%);
}

.ivs-fthero-inner {
    position: relative;
    z-index: 1;
}


.ivs-fthero-eyebrow {
    display: block;
    margin-bottom: 0.9rem;
    font-family: var(--v5-font-label);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    /* Amber, not olive: olive disappears against moving footage. */
    color: var(--v5-amber);
    text-shadow: 0 1px 10px rgba(16, 15, 13, 0.5);
}

.ivs-fthero-title {
    margin: 0;
    font-family: var(--v5-font-display);
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #fff;
    /* The film is never the same two frames running, so the type has
       to carry contrast of its own rather than trust the wash. */
    text-shadow: 0 1px 3px rgba(16, 15, 13, 0.62),
                 0 3px 22px rgba(16, 15, 13, 0.5);
    text-wrap: balance;
}

/* The tagline. One line, set in the display face and italic, sitting
   between the title and the standfirst. */
.ivs-fthero-tagline {
    /* Wide enough to stay on one line on a desktop: a single sentence
       broken in two reads as an accident, not a line break. */
    max-width: 52ch;
    margin: 1.05rem 0 0;
    font-family: var(--v5-font-display);
    font-size: clamp(1.02rem, 1.5vw, 1.3rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 3px rgba(16, 15, 13, 0.6),
                 0 2px 18px rgba(16, 15, 13, 0.46);
    text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════
   The standfirst, on still ground
   ═══════════════════════════════════════════════════════
   What the hero used to carry. A paragraph and a row of
   figures are hard work over moving film; they read far
   better on parchment, and the hero is stronger for
   holding one line only.
   ═══════════════════════════════════════════════════════ */

.ivs-ftintro {
    background: var(--v5-parchment);
    border-bottom: 1px solid var(--v5-line);
    padding: 54px 0 52px;
    text-align: center;
}

.ivs-ftintro-lead {
    max-width: 62ch;
    margin: 0 auto;
    font-family: var(--v5-font-body);
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.8;
    color: var(--v5-stone);
    text-wrap: balance;
}

/* Three figures, each counted from the journeys on the page. */
/* ── Section rail ────────────────────────────────────────────────────
   The bar itself is the shared component now: partials/sticky-subnav.blade.php
   + css/components/ivs-subnav.css + js/components/ivs-subnav.js (extracted
   from the V5 tour page's sub-nav, the reference — rule-wajib/komponen.md).
   Only the page-side hook remains here. */

/* Anchored sections stop underneath the header plus the rail. The component's
   JS keeps --ivs-subnav-offset equal to header + bar + breathing room. */
#journeys, #hosts, #guest-book, #how-it-works, #questions {
    scroll-margin-top: var(--ivs-subnav-offset, 194px);
}

/* The tall line first: the promise in the display face, then the lead
   underneath in Jesse's speaking voice. No figures — counting journeys
   is the brochure's register, and this page opens in hers. */
.ivs-ftintro-tagline {
    max-width: 30ch;
    margin: 0 auto 1.1rem;
    font-family: var(--v5-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.35;
    color: var(--v5-ink);
    text-wrap: balance;
}

/* ── How it works ── */
/* ── How it works ── */
.ivs-fthow {
    background: #fff;
    padding: 74px 0 78px;
    /* Framed as a band: hairlines top and bottom with the same inset
       shading the parchment bands carry, so the white ground reads as
       a distinct sheet rather than more of the page. */
    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);
}

.ivs-fthow-head {
    text-align: center;
    margin-bottom: 3rem;
}

.ivs-fthow-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);
}

.ivs-fthow-title {
    margin: 0;
    font-family: var(--v5-font-display);
    font-size: clamp(1.7rem, 2.9vw, 2.4rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--v5-ink);
    text-wrap: balance;
}

/* Numbered because these really are steps, in order: what you do,
   what we do, what happens then. */
.ivs-fthow-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ivs-fthow-step {
    padding-top: 0;
}

.ivs-fthow-icon {
    display: inline-flex;
    margin-bottom: 1rem;
    color: var(--v5-olive-700);
}

.ivs-fthow-icon svg {
    width: 30px;
    height: 30px;
}

.ivs-fthow-step-title {
    margin: 0 0 0.65rem;
    font-family: var(--v5-font-display);
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    font-weight: 500;
    line-height: 1.32;
    color: var(--v5-ink);
    text-wrap: balance;
}

.ivs-fthow-step-body {
    margin: 0;
    font-family: var(--v5-font-body);
    font-size: 0.95rem;
    line-height: 1.72;
    color: var(--v5-stone);
}

/* ── Questions ──
   <details> so the answers are in the DOM whether or not they are
   open: an assistant reading this page finds every answer without
   running any JavaScript. */
.ivs-ftfaq {
    background: var(--v5-parchment);
    padding: 74px 0 80px;
    border-top: 1px solid var(--v5-line);
}

.ivs-ftfaq-head {
    text-align: center;
    margin-bottom: 2.6rem;
}

.ivs-ftfaq-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);
}

.ivs-ftfaq-title {
    margin: 0;
    font-family: var(--v5-font-display);
    font-size: clamp(1.7rem, 2.9vw, 2.4rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--v5-ink);
    text-wrap: balance;
}

.ivs-ftfaq-list {
    max-width: 46rem;
    margin: 0 auto;
    border-top: 1px solid var(--v5-line);
}

.ivs-ftfaq-item {
    border-bottom: 1px solid var(--v5-line);
}

.ivs-ftfaq-q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.4rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--v5-font-display);
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    font-weight: 500;
    line-height: 1.42;
    color: var(--v5-ink);
    transition: color 0.28s ease;
}

/* The default disclosure triangle is replaced by the rule below. */
.ivs-ftfaq-q::-webkit-details-marker { display: none; }
.ivs-ftfaq-q::marker { content: ""; }

.ivs-ftfaq-q:hover {
    color: var(--v5-olive-900);
}

/* A plus that becomes a minus, drawn rather than set in a glyph so
   it lines up with the type at any size. */
.ivs-ftfaq-mark {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 0.35rem;
}

.ivs-ftfaq-mark::before,
.ivs-ftfaq-mark::after {
    content: "";
    position: absolute;
    background: var(--v5-olive-700);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ivs-ftfaq-mark::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px;
    transform: translateY(-50%);
}

.ivs-ftfaq-mark::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    transform: translateX(-50%);
}

.ivs-ftfaq-item[open] .ivs-ftfaq-mark::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

.ivs-ftfaq-a {
    padding: 0 0 1.5rem;
    max-width: 62ch;
}

.ivs-ftfaq-a p {
    margin: 0;
    font-family: var(--v5-font-body);
    font-size: 0.97rem;
    line-height: 1.78;
    color: var(--v5-stone);
}

/* ── Sign-off ── */
/* ── The curator's note ─────────────────────────────────────────────
   A one-paragraph pause after the sixth journey: why these and no
   others, in the founder's voice. The parchment-and-toile band is the
   V5 narrative-pause pattern (same recipe as the Magazine band). */
.ivs-ftnote {
    position: relative;
    overflow: hidden;
    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);
    padding: 66px 0 70px;
    text-align: center;
}

.ivs-ftnote::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../../images/italy.png') repeat;
    background-size: 620px;
    opacity: 0.14;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.ivs-ftnote-inner {
    position: relative;
    z-index: 1;
}

.ivs-ftnote-rule {
    display: block;
    width: 34px;
    height: 2px;
    margin: 0 auto 1.7rem;
    background: var(--v5-gold);
}

.ivs-ftnote-quote {
    max-width: 44ch;
    margin: 0 auto;
    font-family: var(--v5-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.25rem, 2.2vw, 1.78rem);
    line-height: 1.55;
    color: var(--v5-ink);
}

.ivs-ftnote-attr {
    margin: 1.5rem 0 0;
    font-family: var(--v5-font-label);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--v5-olive-700);
}

/* ── The local hosts ────────────────────────────────────────────────
   The only faces on a page that is otherwise all places: six of the
   people from Meet Our Team, laid out like prints on a table. The
   inner row breaks out to the wide 1680px measure the homepage's
   Featured Tours uses, so the faces get real room. */
.ivs-fthosts {
    background: #fff;
    border-top: 1px solid var(--v5-line);
    padding: 92px 0 96px;
    /* The tilted prints must never widen the page. */
    overflow: hidden;
}

.ivs-fthosts-inner {
    width: min(1680px, calc(100% - 3rem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.6rem, 5vw, 5.5rem);
    align-items: center;
}

.ivs-fthosts-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.7vw, 1.7rem);
    padding: 1.2rem 0 2.4rem;
}

/* One print: white mount, the photograph, the name written under it. */
.ivs-fthosts-card {
    --tilt: 0deg;
    --dy: 0px;
    position: relative;
    margin: 0;
    background: #fff;
    padding: 8px 8px 0;
    border: 1px solid var(--v5-line);
    box-shadow: 0 14px 30px rgba(32, 31, 29, 0.16);
    /* Dealt from the top of the deck: starts above its slot, tilted a
       little harder, and settles into its resting tilt. */
    opacity: 0;
    transform: translateY(-56px) rotate(calc(var(--tilt) * 1.6));
    transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.55s ease,
                box-shadow 0.35s ease;
}

[data-ivs-fthosts].is-dealt .ivs-fthosts-card {
    opacity: 1;
    transform: translateY(var(--dy)) rotate(var(--tilt));
}

/* Once the deal has finished the stagger delays have done their job;
   from here every transform answers the cursor immediately. */
[data-ivs-fthosts].is-settled .ivs-fthosts-card {
    transition-duration: 0.35s, 0.35s, 0.35s;
    transition-delay: 0ms;
}

@media (hover: hover) {
    [data-ivs-fthosts].is-settled .ivs-fthosts-card:hover {
        transform: translateY(var(--dy)) rotate(0deg) scale(1.045);
        box-shadow: 0 22px 44px rgba(32, 31, 29, 0.22);
        z-index: 2;
    }
}

/* Resting tilts and offsets: close enough to straight to stay calm,
   different enough that the table never reads as a grid. */
.ivs-fthosts-card:nth-child(1) { --tilt: -2.2deg; --dy: 6px;  transition-delay: 0ms; }
.ivs-fthosts-card:nth-child(2) { --tilt: 1.8deg;  --dy: 24px; transition-delay: 95ms; }
.ivs-fthosts-card:nth-child(3) { --tilt: -1.3deg; --dy: 0px;  transition-delay: 190ms; }
.ivs-fthosts-card:nth-child(4) { --tilt: 2.1deg;  --dy: 14px; transition-delay: 285ms; }
.ivs-fthosts-card:nth-child(5) { --tilt: -1.7deg; --dy: 32px; transition-delay: 380ms; }
.ivs-fthosts-card:nth-child(6) { --tilt: 1.4deg;  --dy: 8px;  transition-delay: 475ms; }

.ivs-fthosts-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--v5-parchment);
}

.ivs-fthosts-id {
    display: block;
    padding: 0.65rem 0.3rem 0.85rem;
    text-align: center;
}

.ivs-fthosts-card-name {
    display: block;
    font-family: var(--v5-font-display);
    font-weight: 500;
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--v5-ink);
}

.ivs-fthosts-card-role {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--v5-font-label);
    font-weight: 600;
    font-size: 0.55rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1.55;
    color: var(--v5-mist);
}

@media (prefers-reduced-motion: reduce) {
    .ivs-fthosts-card {
        opacity: 1 !important;
        transform: translateY(var(--dy)) rotate(var(--tilt)) !important;
        transition: none !important;
    }
}

.ivs-fthosts-eyebrow {
    display: block;
    margin-bottom: 0.9rem;
    font-family: var(--v5-font-label);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--v5-olive-700);
}

.ivs-fthosts-title {
    margin: 0 0 1.2rem;
    font-family: var(--v5-font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    line-height: 1.25;
    color: var(--v5-ink);
}

.ivs-fthosts-body {
    margin: 0 0 1rem;
    font-family: var(--v5-font-body);
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--v5-stone);
}

.ivs-fthosts-roles {
    margin: 2rem 0 0;
    border-top: 1px solid var(--v5-line);
}

.ivs-fthosts-role {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--v5-line);
}

.ivs-fthosts-role dt {
    font-family: var(--v5-font-display);
    font-weight: 500;
    font-size: 1.04rem;
    color: var(--v5-ink);
}

.ivs-fthosts-role dd {
    margin: 0;
    font-family: var(--v5-font-body);
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--v5-stone);
}

@media (max-width: 991.98px) {
    .ivs-fthosts { padding: 72px 0; }
    .ivs-fthosts-inner { grid-template-columns: 1fr; }
    .ivs-fthosts-photos {
        width: min(640px, 100%);
        margin: 0 auto;
        padding-bottom: 2.6rem;
    }
}

@media (max-width: 575.98px) {
    .ivs-fthosts-role {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    /* Two prints per row; the resting offsets shrink with the cards. */
    .ivs-fthosts-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ivs-fthosts-card:nth-child(2) { --dy: 16px; }
    .ivs-fthosts-card:nth-child(5) { --dy: 20px; }
}

/* ── The guest book ─────────────────────────────────────────────────
   Three published reviews on the ink ground the V5 facts band uses:
   the page's own claims stop, the guests take over. */
.ivs-ftvoices {
    position: relative;
    overflow: hidden;
    background: var(--v5-ink);
    border-top: 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);
    padding: 80px 0 86px;
}

/* Toile at a whisper — same recipe as the consultation band, so the two
   ink grounds read as one material. */
.ivs-ftvoices::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url('/images/italy.png') repeat;
    background-size: 620px;
    opacity: 0.05;
}

.ivs-ftvoices > * {
    position: relative;
    z-index: 1;
}

.ivs-ftvoices-head {
    text-align: center;
    margin-bottom: 3rem;
}

.ivs-ftvoices-eyebrow {
    display: block;
    margin-bottom: 0.85rem;
    font-family: var(--v5-font-label);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--v5-olive-300);
}

.ivs-ftvoices-title {
    margin: 0;
    font-family: var(--v5-font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    line-height: 1.25;
    color: var(--v5-ivory);
}

.ivs-ftvoices-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.8rem, 3vw, 3rem);
}

.ivs-ftvoice {
    margin: 0;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(250, 249, 246, 0.16);
}

.ivs-ftvoice-stars {
    font-size: 0.82rem;
    letter-spacing: 0.32em;
    color: var(--v5-gold);
}

.ivs-ftvoice-quote {
    margin: 1rem 0 1.3rem;
    font-family: var(--v5-font-body);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(250, 249, 246, 0.86);
}

.ivs-ftvoice-name {
    font-family: var(--v5-font-label);
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v5-olive-300);
}

@media (max-width: 991.98px) {
    .ivs-ftvoices { padding: 64px 0 70px; }
    .ivs-ftvoices-grid {
        grid-template-columns: 1fr;
        max-width: 40rem;
        margin: 0 auto;
    }
}

.ivs-ftcta {
    position: relative;
    /* Ink shows while the photograph loads; the image itself is set
       inline in the blade so it can go through the image proxy. */
    background-color: var(--v5-ink);
    background-size: cover;
    background-position: center;
    /* The parallax: the promenade holds still while the page slides
       over it. Pure CSS, so nothing runs on scroll. */
    background-attachment: fixed;
    padding: 96px 0 104px;
    text-align: center;
}

/* A light veil only: the photograph is the point, the type carries its
   own contrast through the shadows below. */
.ivs-ftcta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 19, 17, 0.32);
}

/* The V5 radial scrim: one soft dark pool behind the copy alone, so the
   words read against it while the promenade around them stays bright.
   Same device as the homepage contact band — one ellipse plus blur,
   never two crossed linear gradients. */
.ivs-ftcta::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: min(1150px, 94%);
    height: 82%;
    background: radial-gradient(closest-side, rgba(20, 19, 17, 0.48), rgba(20, 19, 17, 0));
    filter: blur(30px);
    pointer-events: none;
}

.ivs-ftcta > * {
    position: relative;
    z-index: 1;
}

.ivs-ftcta-text {
    max-width: 40ch;
    margin: 0 auto 1.9rem;
    font-family: var(--v5-font-display);
    font-size: clamp(1.24rem, 2.1vw, 1.72rem);
    font-weight: 500;
    line-height: 1.42;
    color: #fff;
    /* The readability lives here, not in the overlay: a tight dark edge,
       a mid shadow, and a wide halo, so the photograph can stay bright. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
                 0 3px 8px rgba(0, 0, 0, 0.55),
                 0 6px 26px rgba(0, 0, 0, 0.6);
    text-wrap: balance;
}

.ivs-ftcta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}

.ivs-ftcta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2.4rem;
    border-radius: 3px;
    background: var(--v5-olive-700);
    color: #fff;
    font-family: var(--v5-font-label);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.34s ease, transform 0.34s ease;
}

.ivs-ftcta-arrow {
    display: inline-block;
    font-size: 0.85em;
    transition: transform 0.34s ease;
}

.ivs-ftcta-btn:hover,
.ivs-ftcta-btn:focus-visible {
    background: var(--v5-olive-900);
    color: #fff;
    transform: translateY(-2px);
}

.ivs-ftcta-btn:hover .ivs-ftcta-arrow {
    transform: translateX(4px);
}

.ivs-ftcta-alt {
    font-family: var(--v5-font-body);
    font-size: 0.95rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
                 0 2px 12px rgba(0, 0, 0, 0.55);
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 249, 246, 0.55);
    padding-bottom: 2px;
    transition: color 0.28s ease, border-color 0.28s ease;
}

.ivs-ftcta-alt:hover {
    color: #fff;
    border-color: #fff;
}

/* The button lifts off the photograph rather than sitting flat on it. */
.ivs-ftcta-btn {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

@media (hover: none), (max-width: 991px), (prefers-reduced-motion: reduce) {
    .ivs-ftcta { background-attachment: scroll; }
}

@media (max-width: 991px) {
    .ivs-fthow-steps { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 767px) {
    /* The header is shorter on phones, so the clearance follows it. Still
       full screen: the V5 hero measures 93% of the viewport on a phone
       too, and holding that here is what keeps the two pages matched. */
    .ivs-fthero {
        margin-top: 0;
        min-height: calc(100vh - 57px);
        padding: 150px 0 0;
    }
    .ivs-ftintro { padding: 38px 0 40px; }
    .ivs-fthow, .ivs-ftfaq { padding: 52px 0 56px; }
    .ivs-fthow-head, .ivs-ftfaq-head { margin-bottom: 2rem; }
    .ivs-ftcta { padding: 52px 0 60px; }
    .ivs-ftcta-actions { flex-direction: column; gap: 1.2rem; }
}

@media (max-width: 360px) {
    .ivs-fthero { padding-top: 182px; }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-ftfaq-q,
    .ivs-ftfaq-mark::before,
    .ivs-ftfaq-mark::after,
    .ivs-ftcta-btn,
    .ivs-ftcta-arrow,
    .ivs-ftcta-alt {
        transition: none !important;
    }
}