@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;700;800&display=swap');

:root {
    --bite: 0;
    --who: 0;
    --launch: 0;
    --sky: 0;
    --ink: #152938;
    --ink-deep: #0a141c;
    --cream: #f4eddf;
    --orange: #e55c3d;
    --deep: #bd3b29;
    --road: #bd3b29;
    --green: #152938;
    --white: #fff
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--cream);
    color: var(--ink);
    font-family: Inter, Arial, sans-serif
}

.eyebrow {
    margin: 0 0 1.25rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase
}

.lead {
    max-width: 38rem;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.55
}

h1,
h2 {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.05em
}

.button {
    display: inline-block;
    margin-top: 1.25rem;
    margin-right: auto;
    margin-left: 12rem;
    padding: .9rem 1.25rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    text-decoration: none
}

.stage {
    position: relative
}

.hero-stage {
    height: 230svh
}

.pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden
}

.hero,
.who,
.jaws {
    position: absolute;
    inset: 0
}

.who {
    display: grid;
    align-content: center;
    padding: clamp(1.5rem, 7vw, 7rem);
    background: var(--cream)
}

.who-copy {
    position: relative;
    z-index: 1;
    opacity: calc(var(--who));
    transform: translateY(calc((1 - var(--who))*3rem))
}

.who-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none
}

.who-mark {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .25
}

.who h2,
.section h2,
.launch-copy h2 {
    max-width: 11ch;
    font-size: clamp(3rem, 7vw, 7rem);
}

.hero {
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: space-between;
    padding: clamp(1.5rem, 5vw, 4.75rem);
    color: var(--white);
    background: radial-gradient(circle at 78% 18%, #dcff6b55, transparent 24%), linear-gradient(135deg, var(--ink), var(--ink-deep));
    opacity: calc(1 - var(--who))
}

.brand {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: .2em
}

.hero-center {
    margin: auto;
    opacity: calc(1 - var(--bite)*1.15);
    transform: scale(calc(1 - var(--bite)*.04)) translateY(calc(var(--bite)*-2rem))
}

.hero h1 {
    max-width: 10ch;
    font-size: clamp(3.4rem, 9.5vw, 9.5rem)
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.scroll {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-left: calc(40% - 1rem);
    animation: scrollPulse 2.4s ease-in-out infinite
}

.jaws {
    z-index: 2;
    pointer-events: none;
    opacity: calc(1 - var(--who))
}

.jaws svg {
    width: 100%;
    height: 100%
}

.jaw-top,
.jaw-bottom {
    transform-box: fill-box;
    transform-origin: center
}

.jaw-top {
    transform: translateY(calc((1 - var(--bite))*-100%))
}

.jaw-bottom {
    transform: translateY(calc((1 - var(--bite))*100%))
}

.section {
    min-height: 100svh;
    padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 7vw, 7rem);
    display: grid;
    align-content: center
}

.story {
    position: relative;
    background: var(--cream)
}

.story-copy {
    position: relative;
    z-index: 1
}

.launch-stage {
    height: 260svh;
    position: relative;
    background: linear-gradient(to bottom, var(--cream) 0 38%, var(--ink) 48% 100%)
}

.launch-pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    background: var(--cream)
}

.launch {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--ink);
    background: linear-gradient(145deg, var(--orange), var(--deep));
    transform: translateY(calc((1 - var(--launch))*100%))
}

.launch-copy {
    position: absolute;
    z-index: 6;
    top: clamp(4.5rem, 11vh, 8rem);
    left: clamp(1.5rem, 7vw, 7rem);
    right: clamp(1.5rem, 7vw, 7rem);
    opacity: var(--launch);
    transform: translateY(calc((1 - var(--launch))*4rem))
}

/* bottom tracks the road's own height (see .road) so the box stops exactly at the
   road's top edge and the city can never be buried by it. */
.sky {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 30%;
    bottom: max(18vh, 7rem);
    opacity: var(--sky);
    transform: translateY(calc((1 - var(--sky))*83%))
}

/* height:auto lets the art keep its 200:60 ratio at full width, and bottom:0
   anchors its baseline to the box's bottom edge -- which .sky lines up with the
   road's top edge. The city therefore always meets the road exactly, at any
   aspect ratio, with nothing cropped off the base. Anchoring the base (rather
   than fighting the crop with `top`) is what fixes the road overlap: the old
   scale(1.35) from top center pushed the base to ~122% of the viewport, burying
   the bottom ~24% of the skyline, and no value of `top` could recover it.

   The art is much wider than most viewports, so on short/wide screens it now
   rises above the box's top:30% line rather than being cropped -- the skyline
   simply extends higher, which is the direction this was asked to move. */
.sky-mark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center top;
    filter: invert(1) drop-shadow(0 -10px 28px #50100522)
}

.road {
    position: absolute;
    z-index: 4;
    inset: auto 0 0;
    height: 18vh;
    min-height: 7rem;
    background: linear-gradient(to bottom, var(--road) 49%, var(--ink))
}

.truck {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 9vh;
    width: min(36vw, 23rem);
    opacity: clamp(0, var(--sky)*1.6, 1);
    transform: translate(calc(100vw - (100vw + 50%) * var(--sky)), calc((1 - var(--sky))*100%))
}

.truck-mark {
    width: 100%;
    aspect-ratio: 200 / 60;
    background-color: var(--ink);
    -webkit-mask: url('food-truck.svg') no-repeat center / contain;
    mask: url('food-truck.svg') no-repeat center / contain
}

.truck-label {
    position: absolute;
    left: 77.175%;
    top: 35.75%;
    margin-left: .5em;
    transform: translate(-50%, -50%);
    font-size: calc(min(36vw, 23rem) * .042);
    font-weight: 800;
    letter-spacing: .2em;
    line-height: 1;
    color: var(--cream);
    white-space: nowrap;
    pointer-events: none;
    user-select: none
}

.contact {
    background: var(--ink);
    color: var(--cream)
}

@media(max-width:680px) {
    .hero {
        padding: 1.5rem
    }

    .hero h1 {
        font-size: clamp(3.2rem, 17vw, 5.5rem)
    }

    .who,
    .section {
        padding-inline: 1.5rem
    }

    .launch-copy h2 {
        font-size: clamp(3rem, 15vw, 5rem)
    }

    /* No .sky override here on purpose: the base top:30% applies on phones too.
       The previous top:70% (and 90% on short screens) pushed the skyline below
       the fold, leaving 0% of it visible on a 390x844 phone. */

    /* Drop the base rise on phones. The base .sky carries
       translateY(calc((1 - var(--sky))*83%)), so it slid up while the crop panned
       right: the two axes together read as a diagonal entrance from the bottom
       left. With the rise cancelled the city keeps its vertical position and the
       only motion left is the horizontal scroll below. Opacity still follows
       --sky, so it fades in without travelling.

       The box is lifted clear of the road here too, the same way as desktop, by
       moving bottom to the road's height and subtracting that same amount from
       top. Subtracting rather than just re-declaring a new top is what keeps the
       box the same 46% of the section tall, so cover's magnification and the
       visible slice stay exactly as tuned -- the box slides up by the road's
       height instead of being resized. */
    .sky {
        transform: none;
        top: calc(54% - max(18vh, 7rem));
        bottom: max(18vh, 7rem)
    }

    /* Restore the fixed-height box on phones. The base rule now sizes the art by
       its own ratio (height:auto) and anchors it to the road, which on a 390px
       screen would render it just 117px tall -- a sliver. Phones need the box
       height back so cover magnifies the panorama into the frame; the road
       clearance is handled by the box position above instead. */
    .sky-mark {
        position: static;
        height: 100%
    }

    /* The window then scrolls with --sky from the far RIGHT of the skyline
       leftward, and comes to rest at 10.5%, which is what stops the window's
       right edge exactly on the bridge. Measuring the rasterised artwork, the
       bridge deck (the flat run with the two small turrets, between the arch
       openings) spans 37.5% to 62.5% of the skyline width; with cover's 30.2%
       slice, a right edge at 37.5% needs a left edge at 7.3%, i.e. 10.5%.

       The previous rest of 18.7% put the right edge at 43.2% -- already 5.7% into
       the bridge, so the pan ran past it and the arches sat mid-frame.

       The 89.5% span is 100% - 10.5%, so this stays locked to --sky rather than
       needing a second custom property; the city therefore sweeps in step with
       the truck instead of drifting at its own rate.

       Note the two motions are not the same direction: the truck enters from the
       right and stops at centre, while traversing the image right-to-left makes
       the city itself slide rightward on screen. That is correct for a camera
       panning left, and it leaves the truck resting mid-frame at the end.

       object-position carries the scroll because translating the element instead
       would only move the element's own box, exposing background at the trailing
       edge. */
    .sky-mark {
        object-position: calc(100% - var(--sky) * 89.5%) top
    }

    .truck {
        width: min(62vw, 18rem)
    }

    .truck-label {
        font-size: calc(min(62vw, 18rem) * .042)
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-stage,
    .launch-stage {
        height: auto
    }

    .pin,
    .launch-pin {
        position: relative;
        height: auto;
        min-height: 100svh
    }

    .hero,
    .jaws {
        display: none
    }

    .who-copy,
    .launch,
    .launch-copy,
    .sky {
        opacity: 1;
        transform: none
    }

    .truck {
        opacity: 1;
        transform: translateX(-50%)
    }

    .scroll {
        animation: none
    }
}

/* The phone skyline scrolls with --sky, which the scroll layer still drives here.
   Pin it to the end of that scroll so reduced-motion users get the finished frame
   (window resting on the bridge, truck centred) instead of a moving background.
   The 10.5% must track the end value in the phone rule above. Phone-only, so
   desktop keeps its static `center top`. */
@media(max-width:680px) and (prefers-reduced-motion:reduce) {
    .sky-mark {
        object-position: 10.5% top
    }
}

/* Full-bleed background wrapper */
.wheat-bg-container {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.wheat-svg {
    display: block;
    width: min(100%, 46rem);
    height: auto;
    max-height: 100%;
    aspect-ratio: 1440 / 1180;
    opacity: .2
}