/* ─── Base ───────────────────────────────── */
html,
body {
    height: 100%;
}

/* ─── Scroll snap ────────────────────────── */
.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* ─── Hide scrollbar ─────────────────────── */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ─── Gradient overlays ──────────────────── */
/* Hero: subtle darkening top & bottom so white type stays legible */
.hero-gradient {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.20) 30%,
            rgba(0, 0, 0, 0.25) 60%,
            rgba(0, 0, 0, 0.70) 100%);
}

/* Locations: dark base for the bottom-anchored copy */
.location-gradient {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.35) 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.35) 55%,
            rgba(0, 0, 0, 0.85) 100%);
}

/* Section 2 — big location words that fill the container width.
   Capped at 5rem so it stays put inside the 480px desktop card. */
.loc-word {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 17vw, 5rem);
    line-height: 0.82;
    letter-spacing: -0.01em;
}

/* Section 3 — soft left-weighted shadow so white type stays legible
   over the light stucco, while the croissant on the right stays clear. */
.contact-gradient {
    background: linear-gradient(100deg,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.14) 40%,
            transparent 65%);
}