/* ==========================================================================
   Campaign landing pages — /campaigns/{slug}
   Hybrid of the approved concepts: B "Cinematic" hero + C "Chapters" +
   month index ledger. One template serves every campaign; the per-campaign
   accent arrives as --cmp-accent (inline style on <main>, from mv_campaigns.
   accent_color) and defaults to the site olive.
   All colors ride the global --v5-* tokens (with fallbacks per rule-wajib).
   Radius: 3px is for buttons/CTAs only; cards, photos and frames stay 0.
   ========================================================================== */

.cmp5 {
    --cmp-accent: var(--v5-olive-700, #4a5e2f);
    background: var(--v5-ivory, #faf9f6);
    color: var(--v5-ink, #201f1d);
    /* House standard: reading text is Lora (rule-wajib/font-tipografi.md),
       same declaration as .tour-v5 — labels/eyebrows/inputs re-declare
       Inter and headings Playfair below. */
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: 16px;
    line-height: 1.7;
}

.cmp5 .cmp5-shell   { width: min(1240px, 92vw); margin: 0 auto; }
.cmp5 .cmp5-narrow  { width: min(760px, 92vw); margin: 0 auto; }

.cmp5 .cmp5-eyebrow {
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 11px; font-weight: 600; letter-spacing: .26em;
    /* Campaign pages: eyebrows on light grounds ride the per-campaign
       accent (bos, audit 26 Agu) — default accent IS olive-700, so pages
       without a custom accent match the sitewide eyebrow rule exactly.
       The dark why-band overrides to amber below (contrast). */
    text-transform: uppercase; color: var(--cmp-accent);
}
.cmp5 h1, .cmp5 h2, .cmp5 h3 {
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-weight: 500; line-height: 1.08; margin: 0; text-wrap: balance;
}
.cmp5 h2 { font-size: clamp(2rem, 4vw, 3.2rem); color: var(--v5-ink, #201f1d); }
.cmp5 section { padding: 90px 0; }

/* Buttons: the global ivs-btn voice only (primary olive + ghost), per
   tombol.md — amber stays reserved for the header's Customizable Tour.
   .cmp5-btn-glow is the homepage "travelling light" reused (the Book Your
   Free Consultation rim, .ivs-consult-glow): a conic gradient spinning
   behind the button, clipped by the wrapper's 2px padding so only the rim
   shows. Pauses under the cursor; static rim under reduced motion. */
.cmp5 .cmp5-btn-glow {
    position: relative; display: inline-block; padding: 2px;
    border-radius: 5px; overflow: hidden; isolation: isolate;
}
/* The gradient is masked to the 2px ring only (content-box exclude), so
   the light travels the border and never crosses the glass face — revisi
   bos: unlike the homepage solid button, the ghost is translucent, so the
   spinning-square recipe leaked a sheen through it. The travel comes from
   animating the conic angle (@property); browsers without @property show
   a static rim, same as reduced-motion. */
@property --cmp5-glow-a {
    syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.cmp5 .cmp5-btn-glow::before {
    content: ''; position: absolute; z-index: 0; inset: 0;
    border-radius: 5px; padding: 2px;
    background: conic-gradient(from var(--cmp5-glow-a, 0deg),
        transparent 0deg,
        transparent 300deg,
        var(--v5-olive-300, #a9b58f) 345deg,
        #ffffff 355deg,
        var(--v5-olive-300, #a9b58f) 365deg,
        transparent 400deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: cmp5-glow-spin 3.6s linear infinite;
}
.cmp5 .cmp5-btn-glow:hover::before,
.cmp5 .cmp5-btn-glow:focus-within::before { animation-play-state: paused; opacity: .35; }
.cmp5 .cmp5-btn-glow .ivs-btn { position: relative; z-index: 1; }
@keyframes cmp5-glow-spin {
    to { --cmp5-glow-a: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp5 .cmp5-btn-glow::before { animation: none; opacity: .4; }
}

/* ── Hero (cinematic full screen, video-ready) ────────────────────────── */
/* The site header is position:fixed and overlaps the hero top; the title
   block sits bottom-left on the tour-width container — the tv5-hero
   grammar reused (scrim + corner vignette, hairline eyebrow, quiet title). */
.cmp5-hero {
    position: relative; min-height: 100svh;
    overflow: hidden; color: #fff; padding: 0;
    background-color: var(--v5-ink, #201f1d);
}
.cmp5-hero-media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* Banner slideshow — the tour V5 hero mechanic (cross-fade + a gentle Ken
   Burns drift on the active slide when there is more than one banner).
   Content slideshow: keeps advancing under reduced motion, but the fade
   becomes an instant cut and the drift stops (same ruling as the tour). */
.cmp5-hero-slides { position: absolute; inset: 0; }
.cmp5-hero-slide {
    opacity: 0; will-change: opacity, transform;
    transition: opacity 1.6s ease-in-out;
}
.cmp5-hero-slide.is-active { opacity: 1; }
.cmp5-hero-slides[data-cmp5-hero-multi] .cmp5-hero-slide.is-active {
    animation: 9s ease-out forwards cmp5-kenburns;
}
@keyframes cmp5-kenburns {
    0% { transform: scale(1.03); }
    to { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .cmp5-hero-slide { transition: opacity .4s; }
    .cmp5-hero-slides[data-cmp5-hero-multi] .cmp5-hero-slide.is-active { animation: none; }
}
/* Chevron placement for the full-bleed hero (shared ivs-chevnav component
   supplies the look; wide screens give it more room — tv5 pattern). */
@media (min-width: 64rem) {
    .cmp5-hero .ivs-bnav-prev { left: 1.5rem; }
    .cmp5-hero .ivs-bnav-next { right: 1.5rem; }
}
.cmp5-hero-scrim {
    position: absolute; inset: 0;
    background-image: linear-gradient(to bottom,
        rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .10) 50%, rgba(0, 0, 0, .80) 100%);
}
.cmp5-hero-vignette {
    position: absolute; inset: 0;
    background-image: radial-gradient(ellipse 85% 70% at 15% 100%, rgba(0, 0, 0, .5), transparent 68%);
}
.cmp5-hero-titlewrap { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding-bottom: 2.4rem; }
@media (min-width: 64rem) { .cmp5-hero-titlewrap { padding-bottom: 3rem; } }
/* Same widths as .tv5-container so the hero aligns with the tour pages. */
.cmp5-hero-container { width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: 32px; }
@media (min-width: 640px)  { .cmp5-hero-container { padding-inline: 48px; } }
@media (min-width: 1024px) { .cmp5-hero-container { padding-inline: 64px; } }
@media (min-width: 1440px) { .cmp5-hero-container { padding-inline: 76px; } }
.cmp5-hero-inner { max-width: 64rem; }
.cmp5-hero-eyebrow {
    display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem;
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: .74rem; font-weight: 600; letter-spacing: .24em;
    text-transform: uppercase; color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.cmp5-hero-eyebrow-rule {
    display: inline-block; height: 1px; width: 2.25rem; flex: 0 0 auto;
    background: rgba(255, 255, 255, .7);
}
.cmp5-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    font-weight: 400; letter-spacing: -.025em; line-height: 1.12;
    margin: 0; color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 20px rgba(0, 0, 0, .55);
}
.cmp5-hero h1 em { font-style: italic; }
.cmp5-hero-sub {
    font-size: 1.05rem; color: #f0eee2; max-width: 58ch; margin: 14px 0 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.cmp5-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* Hero entrance: the page's one theatrical moment. Pure CSS, runs once on
   load; content is fully visible without animation support. */
@media (prefers-reduced-motion: no-preference) {
    .cmp5-hero-inner > * { animation: cmp5-rise .9s cubic-bezier(.22, .61, .36, 1) backwards; }
    .cmp5-hero-inner > :nth-child(2) { animation-delay: .12s; }
    .cmp5-hero-inner > :nth-child(3) { animation-delay: .24s; }
    .cmp5-hero-inner > :nth-child(4) { animation-delay: .34s; }
    .cmp5-hero-inner > :nth-child(5) { animation-delay: .46s; }
}
@keyframes cmp5-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ── Trust strip (ink) ────────────────────────────────────────────────── */
.cmp5-trust {
    /* Credential band, not a utility bar: more vertical air (bos, 26 Agu). */
    background: var(--v5-ink, #201f1d); color: #fff; padding: 24px 0;
    border-bottom: 1px solid #14130f;
}
.cmp5-trust .cmp5-shell {
    display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    /* Label scale raised to the page's official eyebrow size; the shell
       widens so four claims still sit on ONE row on desktop. */
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #cfd0c2;
    width: min(1560px, 94vw);
}
.cmp5-trust b { color: #fff; font-weight: 600; }
.cmp5-trust .cmp5-shell span { display: inline-flex; align-items: center; gap: 9px; position: relative; }
/* Hairline separators between claims — the "As Seen In" gesture. Sits in
   the middle of the flex gap; hidden when items stack on phones. */
.cmp5-trust .cmp5-shell span + span::before {
    content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
    width: 1px; height: 14px; background: rgba(255, 255, 255, .16);
    /* Only when the row is guaranteed single-line — a separator at the
       start of a wrapped row reads as a stray mark. */
    display: none;
}
/* Measured: the four claims need 1253px — guaranteed single-row only when
   94vw >= that, i.e. viewports from ~1340 up. Below, rows wrap cleanly
   without separators. */
@media (min-width: 1340px) {
    .cmp5-trust .cmp5-shell span + span::before { display: block; }
}
/* Belt: a multi-paragraph body from the editor still lays out inline. */
.cmp5-trust .cmp5-shell span p { display: inline; margin: 0; }
.cmp5-trust-icon {
    width: 17px; height: 17px; flex: 0 0 auto;
    color: var(--v5-amber, #fcb913);
}

/* ── Off-season notice ────────────────────────────────────────────────── */
/* A composed concierge note, not an alert strip: serif italic message with
   the waitlist link as a labeled underline (the page keeps living for SEO,
   only the promotion is paused). */
.cmp5-offseason {
    background: var(--v5-parchment, #f2efe8);
    border-top: 1px solid var(--v5-line, #e4e0d5);
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
    padding: 44px 0; text-align: center;
}
/* Season-rail station gesture naming the note (accent label between
   hairlines) — ties the concierge note to the page's calendar language. */
.cmp5-os-station {
    display: flex; align-items: center; gap: 12px;
    max-width: 420px; margin: 0 auto 16px;
}
.cmp5-os-station::before, .cmp5-os-station::after {
    content: ''; flex: 1; height: 1px; background: rgba(31, 36, 31, .25);
}
.cmp5-os-label {
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--cmp-accent);
}
.cmp5-offseason p {
    margin: 0; font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-style: italic; font-size: 1.05rem; line-height: 1.6;
    color: var(--v5-stone, #5b574d); max-width: 62ch;
    margin-left: auto; margin-right: auto;
}
.cmp5-offseason a {
    font-family: var(--v5-font-label, 'Inter', sans-serif); font-style: normal;
    font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f); text-decoration: none;
    padding-bottom: 3px; margin-left: 10px; white-space: nowrap;
    /* Resting accent underline; on hover a deeper line draws over it
       left-to-right — the site underline gesture, layered. */
    background:
        linear-gradient(var(--v5-olive-900, #33421f), var(--v5-olive-900, #33421f)) no-repeat 0 100% / 0% 1px,
        linear-gradient(var(--cmp-accent), var(--cmp-accent)) no-repeat 0 100% / 100% 1px;
    transition: color .3s cubic-bezier(.22, .61, .36, 1),
                background-size .55s cubic-bezier(.22, .61, .36, 1);
}
.cmp5-offseason a:hover {
    color: var(--v5-olive-900, #33421f); text-decoration: none;
    background-size: 100% 1px, 100% 1px;
}
/* The visible half of the gesture: an arrow that slides out on hover —
   the page's mini-CTA grammar (Discover the journey). The line draw above
   is invisible when the accent is itself a dark green (Spring). */
.cmp5-offseason a::after {
    content: '\2192'; display: inline-block; margin-left: 7px;
    transition: margin-left .3s cubic-bezier(.22, .61, .36, 1);
}
.cmp5-offseason a:hover::after { margin-left: 13px; }
/* When the notice sits right above the (parchment) intro, let the two read
   as one band instead of stacking a double hairline. */
.cmp5-offseason + .cmp5-intro { border-top: 0; box-shadow: inset 0 -14px 26px -14px rgba(32, 31, 29, .22); }

/* ── Intro (parchment + toile band, drop cap) ─────────────────────────── */
/* The narrative-band recipe (komponen.md): parchment, hairline borders,
   inset shadows, toile fading out at the edges. */
.cmp5-intro {
    text-align: center; 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);
}
.cmp5-intro::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: url(/images/italy-tile.webp) repeat; background-size: 620px;
    opacity: .14;
    -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);
}
/* Reading column widened to the tour overview's measure (.tv5-ov-inner is
   1200px) — the campaign intro reads like the tour editorial intro. */
.cmp5 section.cmp5-intro { padding: 96px 0 80px; }  /* .tv5-ov's measured 96/80 */
.cmp5-intro .cmp5-narrow { position: relative; z-index: 1; width: min(1200px, 92vw); }
/* Type matched to the tour overview's measured cascade: the block carries
   .tv5-ov-body's size, the paragraphs .tv5-prose p's (an explicit p rule is
   required — the legacy global `p { font-size: 14px }` beats inheritance). */
.cmp5-intro-body { font-size: 1.12rem; line-height: 2; color: #413d37; text-align: left; }
.cmp5-intro-body p {
    font-size: 1.02rem; line-height: 1.85;
    color: var(--v5-stone, #5b574d); margin: 0 0 .5em;
}
.cmp5-intro-body p:last-child { margin-bottom: 0; }
/* Drop cap: the tour recipe (3.6em Playfair 600), colored by the campaign
   accent (--cmp-accent defaults to the same olive as the tour pages). */
.cmp5-intro-body > p:first-child::first-letter {
    font-family: var(--v5-font-display, 'Playfair Display', serif);
    font-size: 3.6em; float: left; line-height: .8; font-weight: 600;
    padding: .06em .14em 0 0; color: var(--cmp-accent);
}

/* ── Chapters (concept C) ─────────────────────────────────────────────── */
.cmp5-chapters { padding-top: 30px; }
/* The chapters shell rides the hero's container metrics (.cmp5-hero-container
   = .tv5-container: 1760px + stepped gutters) so the section lines up with
   the hero title block above it. */
.cmp5-chapters .cmp5-shell { width: 100%; max-width: 1760px; padding-inline: 32px; }
@media (min-width: 640px)  { .cmp5-chapters .cmp5-shell { padding-inline: 48px; } }
@media (min-width: 1024px) { .cmp5-chapters .cmp5-shell { padding-inline: 64px; } }
@media (min-width: 1440px) { .cmp5-chapters .cmp5-shell { padding-inline: 76px; } }
.cmp5-sect-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; margin-bottom: 34px; flex-wrap: wrap;
    border-bottom: 1px solid var(--v5-line, #e4e0d5); padding-bottom: 16px;
    position: relative;
}
/* A short accent segment on the head's hairline — the campaign color
   signing the section (decorative line, not text; contrast rule n/a). */
.cmp5-sect-head::after {
    content: ''; position: absolute; left: 0; bottom: -1px;
    width: 64px; height: 2px; background: var(--cmp-accent);
}
.cmp5-count {
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--v5-mist, #8b877c);
}
.cmp5-chapter {
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    border: 1px solid var(--v5-line, #e4e0d5); background: #fffdf8;
    margin-bottom: 34px; box-shadow: 0 16px 46px rgba(47, 46, 37, .07);
}
/* Grid items default to min-width:auto, so a long nowrap month label can
   blow the track past the card (measured: chapter III at 375 = 354px track
   in a 311px card). Let the columns shrink instead. */
.cmp5-chapter > * { min-width: 0; }
/* Whole card is clickable: the Discover link stretches over it via ::after
   (position anchor here; micro-interactions below ride :hover of the card). */
.cmp5-chapter { position: relative; transition: box-shadow var(--ivs-anim-micro, 300ms) cubic-bezier(.22, .61, .36, 1), border-color var(--ivs-anim-micro, 300ms) cubic-bezier(.22, .61, .36, 1); }
.cmp5-chapter:hover { border-color: #d7d2c4; box-shadow: 0 22px 58px rgba(47, 46, 37, .11); }
.cmp5-ch-go::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.cmp5-ch-go:focus-visible::after { outline: 2px solid var(--v5-olive-700, #4a5e2f); outline-offset: -2px; }
.cmp5-chapter:nth-child(even) .cmp5-ch-photo { order: 2; }
.cmp5-ch-photo { position: relative; min-height: 430px; overflow: hidden; }
.cmp5-ch-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* Photo breathes on card hover — micro-interaction, ease from the token family. */
@media (prefers-reduced-motion: no-preference) {
    .cmp5-ch-photo img { transition: transform 900ms cubic-bezier(.22, .61, .36, 1); }
    .cmp5-chapter:hover .cmp5-ch-photo img { transform: scale(1.045); }
}
.cmp5-ch-body { padding: 52px 54px; display: flex; flex-direction: column; justify-content: center; }
/* Chapter marker: large numeral + small meta, hairline running to the edge. */
.cmp5-ch-num { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.cmp5-ch-num b {
    font-family: var(--v5-font-display, 'Playfair Display', serif);
    font-size: 2rem; line-height: 1; color: var(--cmp-accent); font-weight: 500;
}
.cmp5-ch-num span {
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--v5-mist, #8b877c); white-space: nowrap;
}
.cmp5-ch-num::after {
    content: ''; flex: 1; height: 1px; align-self: center; min-width: 30px;
    /* The site's underline gesture in gradient form: an accent line draws
       left-to-right over the resting hairline when the card is hovered. */
    background-color: var(--v5-line, #e4e0d5);
    background-image: linear-gradient(to right, var(--cmp-accent), var(--cmp-accent));
    background-repeat: no-repeat; background-size: 0% 100%;
    transition: background-size var(--ivs-anim-duration, 650ms) cubic-bezier(.22, .61, .36, 1);
}
.cmp5-chapter:hover .cmp5-ch-num::after { background-size: 100% 100%; }
.cmp5-ch-body h3 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); margin-bottom: 14px; }
.cmp5-ch-body p { font-size: .97rem; color: #565b52; margin: 0 0 22px; max-width: 52ch; }
.cmp5-ch-go {
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f); display: inline-flex; gap: 8px; align-items: center;
    /* Underline rides the campaign accent (bos, 26 Agu) — the card already
       speaks accent (numeral, hover hairline), so the CTA joins that voice;
       gold stays reserved for dark bands. Default accent = olive. */
    border-bottom: 1px solid var(--cmp-accent); padding-bottom: 5px; width: max-content;
    transition: gap .3s cubic-bezier(.22, .61, .36, 1);
}
.cmp5-ch-go:hover { gap: 12px; color: var(--v5-olive-900, #33421f); text-decoration: none; }
/* The whole card is the link surface, so hovering anywhere plays the CTA's
   own micro-interaction too. */
.cmp5-chapter:hover .cmp5-ch-go { gap: 12px; color: var(--v5-olive-900, #33421f); }

/* ── Month timeline ledger (concept B) ────────────────────────────────── */
.cmp5-ledger {
    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);
}
.cmp5-ledger h2 { margin-top: 14px; max-width: 26ch; }
/* "Season rail" (mockup B + revisi bos: no numerals, C's white photo mat).
   Flex + centering answers the under-4 case by itself; min/max widths make
   the wrap fall out naturally on every viewport (mobile first, Jesse). */
.cmp5-months {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 40px 0; margin-top: 48px; text-align: center;
}
.cmp5-month {
    /* Basis 20% caps a row at FIVE months whatever the shell width (bos);
       min/max keep the wrap sane on every viewport below that. */
    flex: 1 1 20%; min-width: 240px; max-width: 330px;
    padding: 0 22px; position: relative;
    /* Column flex + auto-margin on the mat: bodies of different lengths no
       longer stagger the photos — every frame sits flush on the row's base. */
    display: flex; flex-direction: column;
}
.cmp5-month .cmp5-m-frame { margin-top: auto; }
/* Station: the month name interrupts its own rail segment; one row of
   segments reads as a single season line, any wrap keeps the pattern. */
.cmp5-m-station { display: flex; align-items: center; gap: 12px; }
.cmp5-m-station::before, .cmp5-m-station::after {
    content: ''; flex: 1; height: 1px; background: rgba(31, 36, 31, .25);
}
.cmp5-m-name {
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    /* Station label rides the campaign accent (bos) — ties the rail to the
       page's color voice. Default accent = olive-700, so no-accent
       campaigns keep the sitewide eyebrow color. */
    color: var(--cmp-accent);
}
/* Hover tick: paints via background-size (not height) so nothing shifts. */
.cmp5-m-tick {
    display: block; height: 20px; width: 100%;
    background: linear-gradient(var(--cmp-accent), var(--cmp-accent)) no-repeat 50% 0 / 1px 0%;
    transition: background-size .45s cubic-bezier(.22, .61, .36, 1);
}
.cmp5-month h3 { font-size: 1.5rem; margin: 0 0 8px; }
/* Reading size unified with the chapter description (bos: one size from
   the month index down, FAQ excepted). */
.cmp5-month p { font-size: .97rem; color: #565b52; margin: 0 0 18px; }
/* Variant C's postcard mat around the photo. */
.cmp5-m-frame {
    display: block; background: #fffdf8; border: 1px solid var(--v5-line, #e4e0d5);
    padding: 10px; box-shadow: 0 14px 38px rgba(47, 46, 37, .09);
}
.cmp5-m-ph { display: block; overflow: hidden; }
.cmp5-m-ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
    .cmp5-m-ph img { transition: transform 900ms cubic-bezier(.22, .61, .36, 1); }
    .cmp5-m-frame { transition: transform var(--ivs-anim-micro, 300ms) cubic-bezier(.22, .61, .36, 1),
                                box-shadow var(--ivs-anim-micro, 300ms) cubic-bezier(.22, .61, .36, 1); }
}
/* Linked months: whole card hover plays the micro set (gated on :has so a
   month without a URL stays quiet; no :has support = no hover, harmless).
   The mat slides DOWN a touch (bos) — the tick "presses" the postcard —
   and its shadow tightens as it nears the ground. */
.cmp5-month:has(.cmp5-m-link):hover .cmp5-m-tick { background-size: 1px 100%; }
.cmp5-month:has(.cmp5-m-link):hover .cmp5-m-link { background-size: 100% 1px; }
.cmp5-month:has(.cmp5-m-link):hover .cmp5-m-ph img { transform: scale(1.045); }
.cmp5-month:has(.cmp5-m-link):hover .cmp5-m-frame {
    transform: translateY(4px);
    box-shadow: 0 8px 22px rgba(47, 46, 37, .12);
}

/* ── Why band (ink, concept B) ────────────────────────────────────────── */
.cmp5-why {
    background: var(--v5-ink, #201f1d); color: #fff; border-color: #14130f;
    box-shadow: inset 0 8px 16px -10px rgba(0, 0, 0, .5),
                inset 0 -8px 16px -10px rgba(0, 0, 0, .5);
}
.cmp5-why .cmp5-eyebrow { color: var(--v5-amber, #fcb913); }
.cmp5-why h2 { color: #fff; margin: 14px 0 20px; }
.cmp5-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cmp5-why-copy { color: #dde0d2; }
/* Explicit size: the legacy global `p { font-size: 14px }` beats
   inheritance — same trap as the intro. Unified to the chapter measure. */
.cmp5-why-copy p { color: #dde0d2; font-size: .97rem; }
.cmp5-why-copy ul { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cmp5-why-copy ul li {
    /* Reading face + the unified chapter measure (was Inter 12.5px). */
    font-family: var(--v5-font-body, 'Lora', Georgia, serif); font-size: .97rem;
    color: #e8eadb; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 11px;
}
/* Dynamic bullet points (why_points items, icons from the curated set —
   same glyph voice as the trust strip). Inherits the ul grid above. */
.cmp5-why-points li { display: flex; align-items: center; gap: 10px; }
.cmp5-why-points li .cmp5-trust-icon { flex: 0 0 auto; }
.cmp5-why-points li p { display: inline; margin: 0; }
.cmp5-why-img { position: relative; min-height: 480px; border: 1px solid rgba(255, 255, 255, .18); }
.cmp5-why-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* Ghost frame: one hairline offset down-right behind the photo — a hung
   print on the dark wall. Decorative line, single touch. */
.cmp5-why-img::after {
    content: ''; position: absolute; inset: 16px -16px -16px 16px;
    border: 1px solid rgba(255, 255, 255, .16); pointer-events: none;
}
/* The offset pokes past narrow viewports (measured: 1px overflow at 360) —
   the ghost frame is a desktop flourish, off below the split layout. */
@media (max-width: 1023px) {
    .cmp5-why-img::after { display: none; }
}

/* ── Quote ────────────────────────────────────────────────────────────── */
/* With an image: quote over photo (cinematic). Without: parchment band. */
.cmp5-quote { position: relative; padding: 130px 0; text-align: center; overflow: hidden; }
.cmp5-quote blockquote {
    font-family: var(--v5-font-display, 'Playfair Display', serif);
    font-style: italic; font-weight: 500;
    font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.18;
    max-width: 36ch; margin: 0 auto 24px; border: 0; padding: 0;
}
.cmp5-quote-by {
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
}
.cmp5-quote--photo { color: #fff; }
.cmp5-quote--photo blockquote {
    color: #fff;
    /* Legibility rides the glyphs, not the scrim (bos: keep the photo
       alive): a tight edge shadow defines the letterforms, a wide soft
       plume seats them on bright patches of the image. */
    text-shadow: 0 1px 2px rgba(16, 18, 13, .55), 0 4px 30px rgba(16, 18, 13, .5);
}
.cmp5-quote--photo .cmp5-quote-by {
    /* Dark-band accent voice (same amber as the why-band eyebrow) —
       gold stays reserved for dark bands. */
    color: var(--v5-amber, #fcb913);
    text-shadow: 0 1px 2px rgba(16, 18, 13, .6), 0 2px 14px rgba(16, 18, 13, .45);
}
.cmp5-quote--photo .cmp5-quote-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp5-quote--photo .cmp5-quote-scrim { position: absolute; inset: 0; background: rgba(24, 26, 20, .62); }
.cmp5-quote--photo .cmp5-shell { position: relative; z-index: 2; }
.cmp5-quote--plain { background: var(--v5-ivory, #faf9f6); }
.cmp5-quote--plain blockquote { color: var(--v5-ink, #201f1d); }
.cmp5-quote--plain .cmp5-quote-by { color: var(--v5-mist, #8b877c); }
.cmp5-quote-fleuron { color: var(--v5-gold, #b9995b); font-size: 20px; margin-bottom: 22px; }

/* ── FAQ ledger ───────────────────────────────────────────────────────── */
.cmp5-faq-head { text-align: center; }
.cmp5-faq-head h2 { margin-top: 12px; }
.cmp5-faq .cmp5-narrow { margin-top: 38px; border-top: 1px solid var(--v5-line, #e4e0d5); }
.cmp5-faq details { border-bottom: 1px solid var(--v5-line, #e4e0d5); }
.cmp5-faq summary {
    cursor: pointer; list-style: none; padding: 18px 30px 18px 2px; position: relative;
    font-family: var(--v5-font-display, 'Playfair Display', serif);
    font-size: 1.15rem; color: var(--v5-ink, #201f1d);
    transition: color .3s cubic-bezier(.22, .61, .36, 1);
}
.cmp5-faq summary:hover { color: var(--v5-olive-700, #4a5e2f); }
.cmp5-faq summary::-webkit-details-marker { display: none; }
.cmp5-faq summary::after {
    content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-family: var(--v5-font-label, 'Inter', sans-serif); color: var(--v5-mist, #8b877c);
}
.cmp5-faq details[open] summary::after { content: '\2212'; }
.cmp5-faq .cmp5-faq-a { padding: 0 2px 20px; color: var(--v5-stone, #5b574d); font-size: .95rem; }
/* Soft answer entrance on open — same motion tokens as ivs-reveal, so the
   accordion speaks the site's one gesture instead of adding a new one. */
.cmp5-faq details[open] .cmp5-faq-a {
    animation: cmp5FaqOpen var(--ivs-anim-duration, 650ms) var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
@keyframes cmp5FaqOpen {
    from { opacity: 0; transform: translateY(calc(var(--ivs-anim-rise, 16px) * -0.5)); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp5-faq details[open] .cmp5-faq-a { animation: none; }
}

/* ── Month card link (optional, from the admin's Link URL field) ──────── */
/* Underline draws center-out in the campaign accent on card hover (the
   site underline gesture); the link stretches over the whole card via
   ::after, the chapters pattern, so photo and copy are clickable too. */
.cmp5-month .cmp5-m-link {
    color: inherit; text-decoration: none;
    background: linear-gradient(var(--cmp-accent), var(--cmp-accent)) no-repeat 50% 100% / 0% 1px;
    padding-bottom: 3px;
    transition: background-size .55s cubic-bezier(.22, .61, .36, 1);
}
.cmp5-month .cmp5-m-link:hover { text-decoration: none; }
.cmp5-month .cmp5-m-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.cmp5-month .cmp5-m-link:focus-visible::after { outline: 2px solid var(--v5-olive-700, #4a5e2f); outline-offset: -2px; }

/* ── Custom editorial sections (free-form blocks, alternating split) ──── */
.cmp5-custom { background: var(--v5-ivory, #faf9f6); }
/* Every other block sits on parchment so runs of light sections keep the
   page rhythm (cream broken up, per pola-section.md). */
.cmp5-custom--flip {
    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, .18),
                inset 0 -14px 26px -14px rgba(32, 31, 29, .18);
}
.cmp5-custom-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.cmp5-custom--flip .cmp5-custom-img { order: 2; }
.cmp5-custom-img { position: relative; min-height: 420px; overflow: hidden; }
.cmp5-custom-img img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
/* Photo breathes on hover — the chapter-card gesture reused, but riding the
   image itself since these blocks are not one big link surface. */
@media (prefers-reduced-motion: no-preference) {
    .cmp5-custom-img img { transition: transform 900ms cubic-bezier(.22, .61, .36, 1); }
    .cmp5-custom-img:hover img { transform: scale(1.045); }
}
/* Title signed by the campaign accent: resting hairline + 64px accent
   segment, the .cmp5-sect-head gesture carried down to the closing notes. */
.cmp5-custom-copy h2 { margin-bottom: 18px; position: relative; padding-bottom: 14px; }
.cmp5-custom-copy h2::before {
    content: ''; position: absolute; left: 0; bottom: 0; right: 0;
    height: 1px; background: var(--v5-line, #e4e0d5);
}
.cmp5-custom-copy h2::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 64px; height: 2px; background: var(--cmp-accent);
}
.cmp5-custom-body { color: #4d5148; font-size: .97rem; }
.cmp5-custom-body p { color: #4d5148; font-size: .97rem; }
.cmp5-custom-copy .cmp5-ch-go {
    margin-top: 8px;
    /* Resting neutral hairline; on hover the accent draws left-to-right —
       the .cmp5-ch-num underline gesture, joined to the link's gap slide. */
    border-bottom-color: var(--v5-line, #e4e0d5);
    background: linear-gradient(var(--cmp-accent), var(--cmp-accent)) no-repeat 0 100% / 0% 1px;
    transition: gap .3s cubic-bezier(.22, .61, .36, 1),
        background-size var(--ivs-anim-duration, 650ms) cubic-bezier(.22, .61, .36, 1);
}
.cmp5-custom-copy .cmp5-ch-go:hover { background-size: 100% 1px; }
@media (max-width: 980px) {
    .cmp5-custom-grid { grid-template-columns: 1fr; gap: 30px; }
    .cmp5-custom--flip .cmp5-custom-img { order: 0; }
    .cmp5-custom-img { min-height: 280px; }
}

/* ── Closing CTA + enquiry ────────────────────────────────────────────── */
/* Narrative-band recipe reused from .cmp5-intro (parchment, hairlines,
   toile fading at the edges) — bos: the form ground carries the Italy
   pattern like the overview band. */
.cmp5-cta {
    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);
}
.cmp5-cta::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: url(/images/italy-tile.webp) repeat; background-size: 620px;
    opacity: .14;
    -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);
}
.cmp5-cta .cmp5-shell { position: relative; z-index: 1; }
/* Columns stretch to the card's height; the copy column spreads its three
   rows (copy / journeys / trust) top-middle-bottom over that height so no
   band of it sits empty (bos). */
.cmp5-cta-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: stretch; }
.cmp5-cta-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 44px; }
.cmp5-cta .cmp5-eyebrow { color: var(--cmp-accent); }
.cmp5-cta h2 { margin: 16px 0 18px; }
.cmp5-cta-copy p { color: #4d5148; font-size: .97rem; }
.cmp5-reply-note { margin-top: 14px; color: var(--v5-mist, #8b877c); font-size: .92rem; }
/* Journeys ledger — the chapter-marker vocabulary (accent numeral + Lora
   title) on the sect-head hairline + 64px accent segment gesture. */
.cmp5-cta-journeys {
    list-style: none; margin: 0; padding: 24px 0 0;
    border-top: 1px solid var(--v5-line, #e4e0d5); position: relative;
    display: grid; gap: 12px;
}
.cmp5-cta-journeys::before {
    content: ''; position: absolute; left: 0; top: -1px;
    width: 64px; height: 2px; background: var(--cmp-accent);
}
.cmp5-cta-journeys li { display: flex; align-items: baseline; gap: 14px; }
.cmp5-cta-journeys li b {
    font-family: var(--v5-font-display, 'Playfair Display', serif);
    font-size: 1.05rem; font-weight: 500; color: var(--cmp-accent);
    min-width: 22px;
}
.cmp5-cta-journeys li a {
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: .98rem; color: var(--v5-ink, #201f1d);
    transition: color var(--ivs-anim-micro, 300ms) cubic-bezier(.22, .61, .36, 1);
}
.cmp5-cta-journeys li a:hover { color: var(--v5-olive-700, #4a5e2f); text-decoration: none; }
/* Claims restated beside the ask — trust_bar items, icons on the page
   accent (amber stays reserved for dark bands). */
.cmp5-cta-trust {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 13px 22px;
}
.cmp5-cta-trust li {
    display: flex; align-items: center; gap: 10px;
    font-size: .92rem; color: var(--v5-stone, #5b574d);
}
.cmp5-cta-trust li .cmp5-trust-icon { color: var(--cmp-accent); }
.cmp5-cta-trust li p { display: inline; margin: 0; font-size: .92rem; color: var(--v5-stone, #5b574d); }
/* Enquiry card — the .tv5-form-card recipe (ivory ground, hairline border,
   card padding) plus the chapter-card shadow, so the box reads the same as
   the tour Quick Enquiry while sitting on this page's card language. */
.cmp5-form-card {
    border: 1px solid var(--v5-line, #e4e0d5);
    background: var(--v5-ivory, #faf9f6);
    padding: 2rem;
    box-shadow: 0 16px 46px rgba(47, 46, 37, .07);
}
@media (min-width: 64rem) {
    .cmp5-form-card { padding: 2.5rem; }
}
.cmp5-form label {
    display: block; font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--v5-stone, #5b574d); margin: 16px 0 6px;
}
/* Placeholder fields → the rows themselves carry the rhythm (labels are
   gone except the interest select's). */
.cmp5-form .cmp5-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp5-form .cmp5-f-row + .cmp5-f-row, .cmp5-form .cmp5-f-spaced { margin-top: 16px; }
.cmp5-form input::placeholder, .cmp5-form textarea::placeholder { color: var(--v5-mist, #8b877c); }
/* Readonly here means "use the calendar", not "untouchable". */
.cmp5-form #cmp5-dates[readonly] { cursor: pointer; background: #fff; }
/* Boxed white fields — the .tv5-field recipe (white ground, hairline border,
   olive focus), softened with a micro border transition. */
.cmp5-form input, .cmp5-form select, .cmp5-form textarea {
    width: 100%; padding: 10px 14px; border: 1px solid var(--v5-line, #e4e0d5);
    border-radius: 0; background: #fff;
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: .95rem; color: var(--v5-ink, #201f1d);
    transition: border-color var(--ivs-anim-micro, 300ms) cubic-bezier(.22, .61, .36, 1);
}
.cmp5-form input:focus, .cmp5-form select:focus, .cmp5-form textarea:focus {
    outline: none; border-color: var(--v5-olive-500, #6b8051);
    box-shadow: none;
}
.cmp5-form textarea { min-height: 70px; resize: vertical; }
.cmp5-form .cmp5-form-submit { width: 100%; justify-content: center; margin-top: 30px; cursor: pointer; }
.cmp5-form .g-recaptcha { margin-top: 22px; }
.cmp5-qc-msg .alert { margin: 14px 0 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .cmp5 section { padding: 64px 0; }
    .cmp5-chapter { grid-template-columns: 1fr; }
    .cmp5-chapter:nth-child(even) .cmp5-ch-photo { order: 0; }
    .cmp5-ch-photo { min-height: 300px; }
    .cmp5-ch-body { padding: 34px 26px; }
    .cmp5-why-grid { grid-template-columns: 1fr; gap: 34px; }
    .cmp5-why-img { min-height: 320px; }
    .cmp5-cta-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .cmp5-why-copy ul { grid-template-columns: 1fr; }
    .cmp5-form .cmp5-f-row { grid-template-columns: 1fr; }
    .cmp5-cta-trust { grid-template-columns: 1fr; }
    /* Clear the mobile FAB (bottom corners) under the action row. */
    .cmp5-hero-titlewrap { padding-bottom: 3.2rem; }
    .cmp5-ch-num b { font-size: 1.6rem; }
    /* Long month ranges ("September - November · 7 Days") wrap here instead
       of forcing the card wider than the phone viewport. */
    .cmp5-ch-num span { white-space: normal; }
    .cmp5-offseason p { font-size: .98rem; }
    .cmp5-offseason a { margin-left: 0; display: inline-block; margin-top: 8px; }
}