/* Sticky "Contact us" tab — travels the content region between hero and
   footer (tab visual: Figma node 35:101). Zone mechanics per Liam,
   2026-07-21. RULE: --vl-sticky-wait must equal the FIRST section's top
   padding and --vl-sticky-stop the LAST section's bottom padding, per
   page and per breakpoint — templates override these props on their
   .vl-sticky-zone. The 100px defaults are placeholders until real
   sections define their padding. */
.vl-sticky-zone {
    --vl-sticky-top:  100px; /* viewport offset while stuck */
    --vl-sticky-wait: 100px; /* = first section's padding-top */
    --vl-sticky-stop: 100px; /* = last section's padding-bottom */
    position: relative;
}

/* Invisible rail hugging the zone's right edge — bounds the tab's travel. */
.vl-sticky-zone__rail {
    position: absolute;
    inset: 0 0 0 auto;
    padding-top: var(--vl-sticky-wait);
    padding-bottom: var(--vl-sticky-stop);
    pointer-events: none;
}

.vl-sticky-contact {
    position: sticky;
    top: var(--vl-sticky-top);
    z-index: 40;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 200px;
    background: var(--vl-brick);
    /* rotate(180deg) flips rendered corners — writing right-side radii
       lands them visually on the LEFT, away from the viewport edge. */
    border-radius: 0 var(--vl-radius-tab) var(--vl-radius-tab) 0;
    box-shadow: -2px 2px 4px rgba(50, 56, 59, 0.15);
    color: var(--vl-cream);
    font-size: var(--vl-text-nav);
    font-weight: var(--vl-weight-semibold);
    text-decoration: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Mobile treatment is a simple shrink (any bigger deviation → ask Liam). */
@media (max-width: 767px) {
    .vl-sticky-contact {
        width: 34px;
        height: 160px;
        font-size: 16px;
    }
}