/* ============================================================
   Contact Us V5 (Oct 2026, Jesse's brief: a sales page that feels like
   the people behind it, warm, and easy to act on from a phone).
   View: resources/views/page/contact-us-v5.blade.php. Loaded with ?v=filemtime.
   Tokens from css/components/ivs-tokens.css (global); buttons from
   css/components/ivs-buttons.css, this file only sizes them.
   Rhythm: ink hero → parchment (letter + direct lines) → ivory (team) → ivory (press, hairline on top).
   Prefix .ivs-contact-* only: the old .contactpage rules in global-tailwind.css
   are still used by testimonial.blade.php and review-us.blade.php.
   ============================================================ */

.ivs-contact {
    background: var(--v5-ivory, #faf9f6);
    color: var(--v5-ink, #201f1d);
    font-family: var(--v5-font-body, Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.65;
    overflow-x: clip;
}
/* Resets wrapped in :where() so they carry the specificity of .ivs-contact alone
   (0,1,0): any component class written below wins on source order. Without it,
   ".ivs-contact p { margin:0 }" (0,1,1) silently zeroed every eyebrow, title
   and intro margin on the page, and "a { color:inherit }" beat .ivs-btn. */
.ivs-contact :where(a) { text-decoration: none; }
.ivs-contact :where(a:not(.ivs-btn)) { color: inherit; } /* buttons keep ivs-buttons.css colours */
/* style.css sets bare p { font-size:14px; color:#333 }: hand both back to the page. */
.ivs-contact :where(p) { margin: 0; font-size: inherit; color: inherit; text-wrap: pretty; }
.ivs-contact :where(h1, h2, h3) {
    font-family: var(--v5-font-display, Georgia, serif);
    font-weight: 500;
    margin: 0;
    text-wrap: balance;
}
.ivs-contact-wrap {
    width: min(1230px, calc(100% - 2rem));
    margin: 0 auto;
}

/* ── Shared voices (komponen.md §Eyebrow, §Judul section) ── */
.ivs-contact-eyebrow {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
    margin: 0 0 .8rem;
}
.ivs-contact-h2 {
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    line-height: 1.12;
    margin: 0 0 1rem;
}
.ivs-contact .ivs-btn svg { flex: none; width: 15px; height: 15px; }
/* style.css gives bare <button> an outset border; the house button has none. */
.ivs-contact button.ivs-btn { border: 0; box-shadow: none; }

/* ── Hero: the tour / campaign V5 hero grammar (tour-v5.css .tv5-hero-*,
      campaign-v5.css .cmp5-hero-*). Full first screen: the site header is
      position:fixed and rides over the top of the hero, so 100svh fills the
      viewport exactly with nothing of the next section peeking below.
      A muted looping film sits behind; the ink ground shows until the poster paints. ── */
.ivs-contact-hero {
    position: relative;
    overflow: hidden;
    min-height: 100svh;
    background-color: var(--v5-ink, #201f1d);
    color: #fff;
}
.ivs-contact-hero-media { position: absolute; inset: 0; }
.ivs-contact-hero-media img,
.ivs-contact-hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}
.ivs-contact-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%);
}
.ivs-contact-hero-vignette {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse 85% 70% at 15% 100%, rgba(0, 0, 0, .5), transparent 68%);
}
.ivs-contact-hero-titlewrap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding-bottom: 2.4rem;
}
@media (min-width: 64rem) { .ivs-contact-hero-titlewrap { padding-bottom: 3rem; } }
/* Same widths as .tv5-container / .cmp5-hero-container. */
.ivs-contact-hero-container { width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: 32px; }
@media (min-width: 640px)  { .ivs-contact-hero-container { padding-inline: 48px; } }
@media (min-width: 1024px) { .ivs-contact-hero-container { padding-inline: 64px; } }
@media (min-width: 1440px) { .ivs-contact-hero-container { padding-inline: 76px; } }
.ivs-contact-hero-inner { max-width: 64rem; }
.ivs-contact-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    font-family: var(--v5-font-label, 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);
}
.ivs-contact-hero-eyebrow-rule {
    display: inline-block;
    height: 1px;
    width: 2.25rem;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .7);
}
.ivs-contact-hero .ivs-contact-title {
    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);
}
.ivs-contact-deck {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #f0eee2;
    max-width: 58ch;
    margin: 1rem 0 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.ivs-contact-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
/* ≤767px the ivs-fab call/menu buttons float over the bottom corners: lift the
   hero copy clear of them. */
@media (max-width: 767px) { .ivs-contact-hero-titlewrap { padding-bottom: 5rem; } }
@media (max-width: 599px) {
    /* One line on a phone: the eyebrow is the page's keyword line, keep it whole. */
    .ivs-contact-hero-eyebrow { font-size: .64rem; letter-spacing: .16em; margin-bottom: 1.1rem; gap: .6rem; }
    .ivs-contact-hero-eyebrow-rule { width: 1.25rem; }
    .ivs-contact-deck { font-size: 1rem; line-height: 1.6; }
    /* Phone: Call and WhatsApp side by side, Write to us full width beneath;
       44px+ tap targets. */
    .ivs-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
    .ivs-contact-actions .ivs-btn { justify-content: center; min-height: 48px; padding-inline: .75rem; }
    .ivs-contact-actions .ivs-contact-act-write { grid-column: 1 / -1; }
}
@media (max-width: 400px) { .ivs-contact-hero-eyebrow-rule { display: none; } }

/* ── The people behind your trip: copy + icon ledger beside one group
      photograph. Ledger = the Tips page pattern (tips-v5.css .ivs-tips-ledger):
      olive 36px line icons, Playfair 1.2rem titles, .95rem copy. The photo is
      a clean 0px print with an olive hairline frame offset behind it (editorial,
      no mat), and the real Tripadvisor 2026 plate pinned to its corner on ink
      (gold is legal on that dark ground, token-warna.md). ── */
.ivs-contact-people {
    padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(4.5rem, 8vw, 7rem);
}
.ivs-contact-people-grid {
    display: grid;
    gap: clamp(3rem, 5vw, 4rem);
    align-items: center;
}
.ivs-contact-people-head { max-width: 52ch; }
/* Desktop: wider stage (komponen.md §Container lebar, 1560px) and the photo
   fills the copy column's height, so its top meets the eyebrow and its bottom
   meets the ledger's last hairline. The img is taken out of flow so its own
   aspect ratio cannot make the row taller than the copy. */
@media (min-width: 1100px) {
    .ivs-contact-people .ivs-contact-wrap { width: min(1560px, calc(100% - 3rem)); }
    .ivs-contact-people-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(3.5rem, 5vw, 6rem);
        align-items: stretch;
    }
    .ivs-contact-people-head { max-width: 60ch; }
    /* No bottom margin here: the offset frame hangs into the section padding,
       so the photo's own bottom edge lines up with the ledger. */
    .ivs-contact-people .ivs-contact-print { min-height: 340px; margin-bottom: 0; }
    .ivs-contact-people .ivs-contact-print > img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
    }
}
.ivs-contact-people-lead {
    color: var(--v5-stone, #5b574d);
    max-width: 50ch;
    margin: 0 0 1.9rem;
    line-height: 1.7;
}
.ivs-contact-ledger {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--v5-line, #e4e0d5);
}
.ivs-contact-ledger li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 1.1rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
}
.ivs-contact-ledger svg {
    width: 36px;
    height: 36px;
    margin-top: .15rem;
    fill: none;
    stroke: var(--v5-olive-700, #4a5e2f);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ivs-contact-ledger h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 .25rem;
    color: var(--v5-ink, #201f1d);
}
.ivs-contact-ledger p {
    color: var(--v5-stone, #5b574d);
    font-size: .95rem;
    line-height: 1.55;
}

.ivs-contact-print {
    position: relative;
    margin: 0 22px 22px 0;
}
.ivs-contact-print::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translate(22px, 22px);
    border: 1px solid rgba(107, 128, 81, .55);
    pointer-events: none;
}
.ivs-contact-print > img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 45%;
    background: var(--v5-parchment, #f2efe8);
    box-shadow: 0 30px 60px -38px rgba(32, 31, 29, .6);
}
.ivs-contact-award {
    position: absolute;
    z-index: 2;
    left: clamp(-1.25rem, -1.6vw, -.75rem);
    bottom: clamp(1.25rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1.15rem .8rem .9rem;
    background: var(--v5-ink, #201f1d);
    border: 1px solid rgba(185, 153, 91, .45);
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6);
    color: var(--v5-ivory, #faf9f6);
}
.ivs-contact-award img { width: 38px; height: auto; flex: none; }
.ivs-contact-award-name {
    display: block;
    font-family: var(--v5-font-display, Georgia, serif);
    font-size: 1.08rem;
    line-height: 1.2;
    color: var(--v5-ivory, #faf9f6);
}
.ivs-contact-award-by {
    display: block;
    margin-top: .25rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--v5-gold, #b9995b);
}
.ivs-contact-award:hover .ivs-contact-award-name { color: var(--v5-amber, #fcb913); }

@media (max-width: 599px) {
    .ivs-contact-eyebrow { font-size: .68rem; letter-spacing: .2em; }
    .ivs-contact-h2 { margin-bottom: .75rem; }
    .ivs-contact-people-lead { font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; }
    .ivs-contact-ledger li { grid-template-columns: 36px 1fr; gap: .9rem; padding: 1rem 0; }
    .ivs-contact-ledger svg { width: 30px; height: 30px; }
    .ivs-contact-print { margin: 0 12px 12px 0; }
    .ivs-contact-print::before { transform: translate(12px, 12px); }
    .ivs-contact-award { left: 10px; bottom: -18px; padding: .6rem .9rem .6rem .7rem; gap: .7rem; }
    .ivs-contact-award img { width: 30px; }
    .ivs-contact-award-name { font-size: .95rem; }
    .ivs-contact-sheet-intro { font-size: 1rem; }
    .ivs-contact-to-addr { font-size: .88rem; }
}

/* ── Write to us: the letter sheet + the direct lines, on parchment ── */
.ivs-contact-write {
    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(3.5rem, 7vw, 6.5rem) 0;
}
.ivs-contact-write-grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
    .ivs-contact-write-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        align-items: start;
    }
}
.ivs-contact-sheet {
    position: relative;
    background: var(--v5-ivory, #faf9f6);
    border: 1px solid var(--v5-line, #e4e0d5);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3.6vw, 3.25rem) clamp(2rem, 3.5vw, 3rem);
    box-shadow: 0 1px 0 var(--v5-line, #e4e0d5), 0 18px 40px -28px rgba(32, 31, 29, .35);
}
/* The old hero mailbox lives on as the stamp. */
.ivs-contact-stamp {
    position: absolute;
    top: -14px;
    right: 16px;
    width: 76px;
    height: 94px;
    background: #fff;
    padding: 5px;
    transform: rotate(4deg);
    box-shadow: 0 4px 12px -4px rgba(32, 31, 29, .35);
    outline: 1px dashed #cdbfa6;
    outline-offset: -3px;
}
.ivs-contact-stamp img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 8% 70%; }
@media (min-width: 900px) {
    .ivs-contact-stamp { top: -22px; right: 40px; width: 92px; height: 114px; }
}
.ivs-contact-to {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .6rem;
    padding-right: 84px;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
}
@media (min-width: 900px) { .ivs-contact-to { padding-right: 120px; } }
.ivs-contact-to-label {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .75rem;
    font-weight: 600;
    color: var(--v5-olive-700, #4a5e2f);
}
.ivs-contact-to-addr {
    font-style: italic;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--v5-stone, #5b574d);
}
.ivs-contact-sheet .ivs-contact-h2 { margin-top: 1.5rem; margin-bottom: .6rem; }
.ivs-contact-sheet-intro { color: var(--v5-stone, #5b574d); max-width: 54ch; }
.ivs-contact-sheet .alert { margin-top: 1.25rem; }

.ivs-contact-form {
    margin-top: 1.75rem;
    display: grid;
    gap: 1.25rem;
}
.ivs-contact-field {
    display: grid;
    gap: .45rem;
    min-width: 0;
    margin: 0;
}
.ivs-contact-lbl {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .82rem;
    font-weight: 600;
    color: var(--v5-ink, #201f1d);
}
.ivs-contact-row2 { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .ivs-contact-row2 { grid-template-columns: 1fr 1fr; } }
.ivs-contact-ctl,
.ivs-contact-phone select {
    width: 100%;
    min-height: 50px;
    padding: .75rem .9rem;
    border: 1px solid #cbc4b3;
    border-radius: 0;
    background: #fff;
    font-family: var(--v5-font-body, Georgia, serif);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--v5-ink, #201f1d);
    box-shadow: none;
}
.ivs-contact-ctl:focus,
.ivs-contact-phone select:focus {
    outline: 2px solid var(--v5-olive-700, #4a5e2f);
    outline-offset: -1px;
    border-color: var(--v5-olive-700, #4a5e2f);
    box-shadow: none;
}
textarea.ivs-contact-ctl { min-height: 150px; resize: vertical; line-height: 1.6; }
/* Cmf::ccode() ships inline width:110px + float:left; the grid owns the layout here. */
.ivs-contact-phone {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: .5rem;
}
.ivs-contact-phone select { float: none !important; width: 100% !important; height: auto; }
/* Honeypot, copied from the house pattern: off-screen, never display:none. */
.ivs-contact-form .usercode {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.ivs-contact-captcha { min-height: 78px; }
/* The Google widget is a fixed 304px; on narrow phones it would spill past the sheet. */
@media (max-width: 380px) {
    .ivs-contact-captcha { min-height: 70px; }
    .ivs-contact-captcha .g-recaptcha { transform: scale(.9); transform-origin: 0 0; }
}
@media (max-width: 340px) {
    .ivs-contact-captcha { min-height: 64px; }
    .ivs-contact-captcha .g-recaptcha { transform: scale(.82); }
}
.ivs-contact-send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.1rem;
}
.ivs-contact-send .ivs-btn { min-width: 220px; }
@media (max-width: 599px) { .ivs-contact-send .ivs-btn { width: 100%; } }
.ivs-contact-send-note {
    font-size: .95rem;
    font-style: italic;
    color: var(--v5-stone, #5b574d);
}

/* Direct lines: "The Concierge" (option A, owner's pick 6 Oct 2026).
   One ink card (komponen.md §Band gelap) with an inset gold hairline frame;
   gold = the palette's luxury touch, legal on dark grounds only (token-warna.md),
   amber for the links. Pairs with the ivory letter sheet on the left. */
.ivs-contact-side { display: grid; gap: 1.25rem; align-content: start; }
.ivs-contact-direct {
    background: var(--v5-ink, #201f1d);
    padding: 10px;
    box-shadow: 0 30px 60px -36px rgba(32, 31, 29, .7);
    color: var(--v5-ivory, #faf9f6);
}
.ivs-contact-direct-frame {
    border: 1px solid rgba(185, 153, 91, .55);
    padding: clamp(1.75rem, 3vw, 2.4rem) clamp(1.25rem, 2.6vw, 2rem) clamp(1.6rem, 2.8vw, 2.1rem);
}
.ivs-contact-direct-eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--v5-gold, #b9995b);
}
.ivs-contact-direct-rule { display: inline-block; width: 28px; height: 1px; flex: 0 0 auto; background: var(--v5-gold, #b9995b); }
.ivs-contact-direct h3 {
    margin-top: 1rem;
    font-size: clamp(1.75rem, 2.4vw, 2.1rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--v5-ivory, #faf9f6);
}
.ivs-contact-direct-intro {
    margin: .75rem 0 1.6rem;
    font-size: .97rem;
    line-height: 1.65;
    color: rgba(250, 249, 246, .78);
}
.ivs-contact-lrow {
    display: grid;
    justify-items: start;
    gap: .35rem;
    padding: 1.35rem 0;
    border-top: 1px solid rgba(185, 153, 91, .32);
}
.ivs-contact-lrow--last { border-bottom: 1px solid rgba(185, 153, 91, .32); }
.ivs-contact-l-label {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--v5-gold, #b9995b);
}
.ivs-contact-l-value {
    max-width: 100%;
    font-family: var(--v5-font-display, Georgia, serif);
    font-size: 1.7rem;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--v5-ivory, #faf9f6);
    overflow-wrap: anywhere;
}
a.ivs-contact-l-value:hover { color: var(--v5-amber, #fcb913); }
.ivs-contact-l-value--sm {
    font-family: var(--v5-font-body, Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.55;
    letter-spacing: 0;
    text-wrap: balance;
}
.ivs-contact-l-meta {
    font-style: italic;
    font-size: .88rem;
    line-height: 1.5;
    color: rgba(250, 249, 246, .62);
    overflow-wrap: anywhere;
}
.ivs-contact-l-meta a:hover { color: var(--v5-ivory, #faf9f6); }
.ivs-contact-l-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 32px;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--v5-amber, #fcb913);
}
.ivs-contact .ivs-contact-l-link { color: var(--v5-amber, #fcb913); }
.ivs-contact .ivs-contact-l-link:hover { color: #ffd35c; }
.ivs-contact-l-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ivs-contact-consult-text {
    margin-top: 1.75rem;
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(250, 249, 246, .78);
}
.ivs-contact .ivs-contact-consult-btn {
    margin-top: 1.1rem;
    width: 100%;
    justify-content: center;
    min-height: 50px;
}
@media (min-width: 900px) {
    /* The ink card stretches to the letter's height; its closing block sits at the foot. */
    .ivs-contact-side { align-self: stretch; display: flex; flex-direction: column; }
    .ivs-contact-direct { display: flex; flex-direction: column; flex: 1; }
    .ivs-contact-direct-frame { display: flex; flex-direction: column; flex: 1; }
    /* The height the letter adds is shared evenly by the four contact rows, so
       the card reads as one even ledger with no empty pocket at the foot. */
    .ivs-contact-lrow { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
}

/* ── Drivers in Italy: the homepage transfer film as a full-bleed ink band
      (homepage.css .luxury-transfer-*): poster behind, film on top once loaded,
      a left-weighted wash, Jesse's words left, the film itself on the right.
      Kept shallow (bos, 7 Oct): the copy sets the height, no tall minimum.
      Amber is legal on this dark ground. ── */
.ivs-contact-dii {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 320px;
    background: #14130f;
    color: var(--v5-ivory, #faf9f6);
}
.ivs-contact-dii-media {
    position: absolute;
    inset: 0;
    background-image: var(--ivs-contact-dii-poster);
    background-size: cover;
    background-position: center;
}
.ivs-contact-dii-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Wash only where the copy sits; the film stays clear on the right (bos, 7 Oct). */
.ivs-contact-dii-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(20, 19, 15, .9) 0%, rgba(20, 19, 15, .74) 34%,
        rgba(20, 19, 15, .18) 58%, rgba(20, 19, 15, 0) 78%);
}
.ivs-contact-dii-in {
    position: relative;
    z-index: 2;
    padding-top: clamp(2.25rem, 4vw, 3rem);
    padding-bottom: clamp(2.25rem, 4vw, 3rem);
}
.ivs-contact-hero-eyebrow--amber { color: var(--v5-amber, #fcb913); margin-bottom: 1rem; }
.ivs-contact-hero-eyebrow--amber .ivs-contact-hero-eyebrow-rule { background: var(--v5-amber, #fcb913); }
.ivs-contact-dii-title {
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.ivs-contact-dii-text {
    margin-top: .9rem;
    max-width: 58ch;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(250, 249, 246, .9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.ivs-contact .ivs-contact-dii-btn { margin-top: 1.4rem; }
@media (min-width: 992px) { .ivs-contact-dii-say { max-width: 600px; } }
/* Phones show the daylight poster, not the film: an even, deeper wash keeps
   the copy legible over its bright right half. */
@media (max-width: 767.98px) {
    .ivs-contact-dii-scrim {
        background: linear-gradient(to bottom,
            rgba(20, 19, 15, .8) 0%, rgba(20, 19, 15, .72) 55%, rgba(20, 19, 15, .86) 100%);
    }
}
@media (max-width: 599px) { .ivs-contact .ivs-contact-dii-btn { width: 100%; } }

/* Phone: numbers, links and the transfer line become full 44px tap targets. */
@media (max-width: 899px) {
    a.ivs-contact-l-value,
    .ivs-contact-l-link { display: inline-flex; align-items: center; min-height: 44px; }
    /* Links inside running text: inline padding grows the tap area without
       stretching the line box (inline-flex/min-height broke the paragraph). */
    .ivs-contact-l-meta a { display: inline; padding-block: .8rem; }
    .ivs-contact-lrow { padding: 1.1rem 0; gap: .2rem; }
    .ivs-contact-l-value { font-size: 1.55rem; }
    .ivs-contact-l-value--sm { font-size: 1rem; }
}

/* ── As seen in: same anatomy as before (logo + one-line description),
      one row on desktop, two columns on a phone. ── */
.ivs-contact-press {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}
/* Team and press now sit on the same ivory ground: a hairline keeps them two sections. */
.ivs-contact-people + .ivs-contact-press .ivs-contact-wrap {
    border-top: 1px solid var(--v5-line, #e4e0d5);
    padding-top: clamp(3rem, 6vw, 4.5rem);
}
.ivs-contact-people + .ivs-contact-press { padding-top: 0; }
.ivs-contact-press h2 {
    font-size: clamp(1.25rem, 1.8vw, 1.4rem);
    font-style: italic;
    text-align: center;
}
.ivs-contact-press-grid {
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
    align-items: start;
}
@media (min-width: 700px) { .ivs-contact-press-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ivs-contact-press-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.5rem 1rem; } }
.ivs-contact-press-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
}
/* Several logo files ship on a white box (Forbes, Appetito, Vancouver Sun).
   Multiply drops the white into the ivory ground and leaves the ink of each
   mark untouched; transparent logos are unaffected. */
.ivs-contact-press-item img { height: 34px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ivs-contact-press-feature {
    margin: .9rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    max-width: 80ch;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--v5-ink, #201f1d);
}
.ivs-contact-press-rule {
    display: inline-block;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 1px;
    background: var(--v5-olive-500, #6b8051);
}
@media (max-width: 599px) {
    /* Two lines on a phone: the side rules would float mid-paragraph. */
    .ivs-contact-press-feature { font-size: .95rem; }
    .ivs-contact-press-rule { display: none; }
}
@media (min-width: 1100px) { .ivs-contact-press-item img { height: 30px; } }
.ivs-contact-press-item a {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .75rem;
    line-height: 1.4;
    color: var(--v5-stone, #5b574d);
}
.ivs-contact-press-item a:hover { color: var(--v5-olive-700, #4a5e2f); }
@media (max-width: 699px) {
    .ivs-contact-press-grid { gap: 1.1rem .75rem; }
    .ivs-contact-press-item { gap: .4rem; }
    .ivs-contact-press-item img { height: 26px; }
    .ivs-contact-press-item a { font-size: .72rem; min-height: 44px; display: flex; align-items: center; }
}

/* The global footer opens with the "Plan a Better Trip" concierge card, which
   repeats the same phone numbers this page already leads with. Hidden here only;
   the newsletter and link columns below it stay. Remove this rule to show it again. */
/* The footer's concierge card stays and closes the page with its own wording
   (set from the view with @section footer_plan_*; Jesse, 7 Oct). */