/* The load pages (commercial vans, flower deliveries): the film the scroll drives, from the white studio down on to the mat, and the van floor from above.
   On top of more.css. --accent here is the blockers' own orange, so the page and the film agree. */
:root { --accent: #ea7a1e; --studio: #f6f6f6; --studio-ink: #15130f; --studio-soft: #4f4a44; --bar: 70px; }
@media (max-width: 860px) { :root { --bar: 60px; } }
/* the top bar is clear on every page (menu.js). Here a film right under it starts at the top of the screen, under the bar, as the home
   page's does; --head is the bar's height (reel.js sets it exactly), --bar the room its words and picture keep clear of it, as before */
:root { --head: 84px; }
@media (max-width: 860px) { :root { --head: 68px; } }
.top + .reel { margin-top: calc(-1 * var(--head)); }
main { padding-top: 0; }
/* the mat stays the ground, but quiet under the words */
body::before { background: linear-gradient(rgba(7, 6, 10, .74), rgba(7, 6, 10, .74)); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the film */
.reel { position: relative; z-index: 1; height: calc(640vh + var(--bar)); height: calc(640svh + var(--bar)); background: var(--studio); }
.reel__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.reel__inner { position: absolute; inset: 0; background: var(--studio); }
.reel__inner::before { content: ""; position: absolute; inset: 0; opacity: var(--dusk, 0);
  background: linear-gradient(180deg, #8d8c90 0%, #8d8c90 var(--pic-top, 47%), #0a0a0b var(--pic-bot, 73%), #0a0a0b 100%); }
.reel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.reel__open { position: absolute; left: var(--gutter); top: calc(var(--bar) + clamp(20px, 11vh, 110px)); max-width: 31%; color: var(--studio-ink); }
.reel__open h1, .reel__open h2 { margin: 0; line-height: 1; }
/* (the film's title is the page's h1, the largest words on it; a second film's title, an h2, the size of the sections' h2s) */
.reel__open h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.reel__open h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
/* a second film further down the page, inside its column: the full width of the window all the same. It runs only from the closed rear doors
   to the doors standing open (stills 62 to 93 of 156), so it is shorter, at the same scroll per still as the film above */
.reel--inline { margin: clamp(64px, 12vh, 130px) 0 0 calc(50% - 50vw); width: 100vw; height: calc(208vh + var(--bar)); height: calc(208svh + var(--bar)); }
/* (the flower film on into its closing zoom, stills 62 to 125: 63 steps for its 31, at the same scroll per still) */
#flowers.reel--inline { height: calc(319.5vh + 2.03 * var(--bar)); height: calc(319.5svh + 2.03 * var(--bar)); }
/* the commercial page's film, stopped at still 125 of 156 (data-last), the whole open van in the white studio: its scroll shortened to
   125/155 of the full film's, so each still comes at the same scroll as before, and its last line in the studio's ink, not white */
.reel--to125 { height: calc(535.5vh + .81 * var(--bar)); height: calc(535.5svh + .81 * var(--bar)); }
/* the SUV film with its closing zoom (data-tail 30): 149 steps where it had 119, at the same scroll per still */
.reel--suvzoom { height: calc(801.3vh + 1.252 * var(--bar)); height: calc(801.3svh + 1.252 * var(--bar)); }
/* (its last line in the middle of the van's back wall, between the racks: the user, 11-03 "have the typography in the middle on the van
   wall". reel.js follows the wall through the zoom, data-wall, and sizes the words to it) */
.reel[data-wall] .reel__line--held { left: var(--wx, 38%); top: var(--wy, 30%); width: var(--ww, 24%); height: var(--wh, 30%); right: auto; max-width: none;
  display: flex; align-items: center; justify-content: center; text-align: center; color: var(--studio-ink); text-shadow: none;
  font-size: calc(var(--ww, 24vw) * .13); line-height: 1.02; }
@media (prefers-reduced-motion: reduce) { .reel[data-wall] .reel__line--held { display: none; } }
/* (the flower van's last line on its back wall above the vases, at the end of the closing zoom: a wider, lower stretch of wall and a longer
   line, so a smaller size for it; the user, 11-03 "move the next one 'Held by...' into the van wall in the end of the zoom in") */
#flowers .reel__line--held { font-size: calc(var(--ww, 24vw) * .1); text-wrap: balance; }
/* (below it, the colour along the last picture's bottom edge, --end from reel.js, fading into the page's dark, so the film has no edge
   where it ends: the user, 11-02 "i want a uniform and seemless color as i scroll down"; the words below start once it has faded) */
/* (it starts 3vh up inside the reel, softening the floor's own shading into the one colour, and only once the film has ended: while the film
   is held on the screen the reel's foot is below it) */
/* (a film that hands over to the dark page below, data-foot: over its last stretch the floor under the van darkens into the page's own
   dark, so the film's foot already is the page and there is no grey between them; the user, 11-03 "fix this blurry grey area. make it
   seemless when scrolling down". reel.js sets --foot from the scroll) */
.reel[data-foot] .reel__inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; opacity: var(--foot, 0);
  background: linear-gradient(180deg, rgba(7, 6, 10, 0), rgba(7, 6, 10, .42) 40%, rgba(7, 6, 10, .86) 75%, rgb(7, 6, 10)); }
/* (and below it the page's own pattern fades in, rather than starting at the film's edge) */
.reel[data-foot]::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16vh; pointer-events: none;
  background: linear-gradient(180deg, rgb(7, 6, 10), rgba(7, 6, 10, .6) 40%, rgba(7, 6, 10, 0)); }
.reel--to125 + main > .after-film { margin-top: clamp(28px, 7vh, 64px); }
.reel--to125 + main > .after-film + .load-sec { margin-top: 22vh; }
.reel__open p { margin: 14px 0 0; max-width: 46ch; color: var(--studio-soft); font-size: clamp(.98rem, 1.2vw, 1.1rem); line-height: 1.55; }
.reel__open .actions { margin-top: 20px; }
.reel__open .pill { color: var(--studio-ink); background: transparent; border-color: rgba(21, 19, 15, .3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.reel__line { position: absolute; margin: 0; font-weight: 850; font-stretch: 118%; text-transform: uppercase; line-height: 1; letter-spacing: -.005em;
              font-size: clamp(1.5rem, 3.1vw, 2.7rem); }
/* (--studio: a later line in the same place, for a film that ends with the van still in the white studio) */
.reel__line--doors, .reel__line--studio { left: var(--gutter); top: calc(var(--bar) + (100% - var(--bar)) * .36); max-width: 22%; color: var(--studio-ink); font-size: clamp(1.3rem, 2.3vw, 2.1rem); line-height: 1.04; }
.reel__line--held { left: var(--gutter); top: calc(var(--bar) + clamp(18px, 4vh, 44px)); max-width: 24ch; color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, .35); }
.reel__hint { position: absolute; right: var(--gutter); bottom: clamp(20px, 5vh, 52px); margin: 0; font-size: .92rem; color: var(--studio-soft);
              display: flex; align-items: center; gap: 12px; }
/* (its moving scroll-down sign: a ring with an arrow inside that keeps sliding down, in the words' own colour; the user, 11-03 "make the
   scroll down moving icon") */
.reel__hint::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--accent); box-sizing: border-box; }
/* (the word "Scroll" and the sign in the blockers' orange: the user, 11-03 "change the scroll word into orange") */
.reel__hint b { color: var(--accent); font-weight: 750; }
.reel__hint::after { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -8px; box-sizing: border-box;
                     border: solid var(--accent); border-width: 0 2px 2px 0; animation: hint-down 1.6s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes hint-down {
  0% { opacity: 0; transform: translateY(-8px) rotate(45deg); }
  35% { opacity: 1; }
  70% { opacity: 1; transform: translateY(4px) rotate(45deg); }
  100% { opacity: 0; transform: translateY(9px) rotate(45deg); }
}
/* upright phones: the words above and below the picture, not over it */
@media (max-aspect-ratio: 13/10) {
  .reel__open { top: calc(var(--bar) + clamp(16px, 3vh, 40px)); right: var(--gutter); max-width: none; }
  .reel__open h1 { font-size: clamp(2.3rem, 9.8vw, 3.6rem); }
  .reel__open h2 { font-size: clamp(1.7rem, 7.2vw, 2.6rem); }
  .reel__open p { max-width: none; }
  .reel__line--doors, .reel__line--studio { top: calc(var(--bar) + (100% - var(--bar)) * .6 + 31vw); max-width: none; left: var(--gutter); right: var(--gutter); font-size: clamp(1.4rem, 5.6vw, 2.4rem); }
  /* (the lines in the white above the vehicle, just over the top of its picture (--pic-top, reel.js), not under it, where the page's
     fixed buy bar covered them; the user, 11-03 "put the typo on top of the van") */
  .reel__line--doors, .reel__line--studio { top: auto; bottom: calc(100% - var(--pic-top, 40%) + clamp(18px, 4vh, 36px)); }
  /* (a van standing on the bottom edge, data-anchor="bottom" in reel.js: its line in the white above it) */
  /* (its later lines just above the van, which by then stands in the middle of the room below the bar: reel.js) */
  .reel[data-anchor="bottom"] .reel__line--doors, .reel[data-anchor="bottom"] .reel__line--studio { top: auto; bottom: calc(50% + 28.125vw + clamp(18px, 4vh, 36px)); }
  .reel[data-anchor="bottom"] .reel__hint { bottom: calc(56.25vw + 14px); }
  .reel__line--held { top: calc(var(--bar) + clamp(16px, 3vh, 40px)); right: var(--gutter); max-width: none; font-size: clamp(1.6rem, 7vw, 3rem); }
  .reel__hint { left: var(--gutter); right: auto; bottom: 18px; }
}
/* a phone on its side: the opening words on the white to the left of the van, smaller */
@media (max-height: 500px) and (orientation: landscape) {
  .reel__open { top: calc(var(--bar) + 10px); max-width: 34%; }
  .reel__open h1, .reel__open h2 { font-size: 1.35rem; }
  .reel__open p, .reel__hint { display: none; }
  .reel__open .actions { margin-top: 10px; }
  .reel__open .actions .pill { display: none; }
  .reel__open .cta { padding: 9px 16px; font-size: .85rem; }
  .reel__line { font-size: 1.15rem; }
  .reel__line--held { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reel { height: auto; }
  .reel__pin { position: relative; top: 0; height: auto; aspect-ratio: 16 / 9; }
  .reel__line, .reel__hint { display: none; }
  .reel__open { position: relative; left: 0; top: 0; padding: 24px var(--gutter); max-width: none; background: var(--studio); }
}

/* below the film, on the mat */
.load-sec { margin-top: clamp(64px, 12vh, 130px); }
.load-sec > h2, .load-head h2 { margin-top: 0; }
.held { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 10vh, 110px); }
.held h2 { margin: 0; }
.held p { color: var(--ink-soft); max-width: 46ch; margin: 18px 0 0; }
.held p + p { margin-top: 12px; }
/* (the first one follows straight on from the film) */
.reel + main > .held:first-child { margin-top: clamp(32px, 5vh, 56px); }
.held figure { margin: 0 calc(-1 * var(--gutter)) 0 0; border-radius: 18px 0 0 18px; overflow: hidden; }
.held img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .held { grid-template-columns: 1fr; }
  .held figure { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
}
/* the vases close up in the flower section, with no words: the full width of the window, as the film is */
.closeup { margin: clamp(56px, 10vh, 110px) 0 0 calc(50% - 50vw); width: 100vw; }
.closeup img { display: block; width: 100%; height: auto; }
.reasons { margin: clamp(56px, 10vh, 110px) 0 0; padding: 0; display: grid; }
.reasons > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(8px, 4vw, 64px); align-items: baseline; padding: clamp(18px, 3vh, 30px) 0; border-top: 1px solid var(--line); }
.reasons > div:last-child { border-bottom: 1px solid var(--line); }
.reasons dt { font-weight: 850; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.05; }
.reasons dd { margin: 0; color: var(--ink-soft); font-size: clamp(1.02rem, 1.4vw, 1.25rem); line-height: 1.5; max-width: 52ch; }
@media (max-width: 640px) { .reasons > div { grid-template-columns: 1fr; } }

/* the floor from above */
.plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.plan h2 { margin: 0; }
.plan__words p { color: var(--ink-soft); max-width: 46ch; margin: 16px 0 0; }
.plan__jobs { display: grid; gap: 0; margin-top: 22px; border-top: 1px solid var(--line); }
.plan__jobs button { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; padding: 14px 0 14px 18px; cursor: pointer; position: relative;
                     font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink-soft); transition: color .2s; min-height: 48px; }
.plan__jobs button::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--line); transition: background .2s; }
.plan__jobs button:hover { color: var(--ink); }
.plan__jobs button[aria-pressed="true"] { color: var(--ink); font-weight: 650; }
.plan__jobs button[aria-pressed="true"]::before { background: var(--accent); }
.plan__count { margin: 14px 0 0; font-size: .92rem; color: var(--ink-soft); }
.plan__van { position: sticky; top: calc(var(--bar) + 18px); }
.plan__floor { position: relative; aspect-ratio: 1 / 1; border-radius: 10px 10px 4px 4px; overflow: hidden; background: #0b0b0c url("../mat_cell.webp") 0 100% / 3.125% auto repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 70px rgba(0, 0, 0, .6); }
.plan__door { position: absolute; left: 0; right: 0; bottom: 0; height: 5%; background: #17171a; border-top: 1px solid rgba(255, 255, 255, .12); z-index: 2; display: flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--ink-soft); }
.plan__item { position: absolute; z-index: 5; transition: left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), opacity .3s; }
.plan__item img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .6)); }
.plan__item span { position: absolute; left: 2px; top: 2px; white-space: nowrap; padding: 2px 7px; border-radius: 999px; z-index: 6;
                   background: rgba(10, 10, 12, .78); color: #f6efe6; font-size: clamp(.55rem, 1vw, .72rem); font-weight: 600; pointer-events: none; }
.plan__blk { position: absolute; z-index: 4; pointer-events: none; transition: left .55s var(--ease), top .55s var(--ease), transform .55s var(--ease), opacity .3s; }
.plan__blk img { display: block; width: 100%; height: 100%; }
.plan__item.is-off, .plan__blk.is-off { opacity: 0; pointer-events: none; }
.plan__foot { margin: 12px 0 0; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 860px) {
  .plan { grid-template-columns: 1fr; }
  .plan__van { position: static; }
  .plan__jobs { grid-template-columns: 1fr 1fr; column-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .plan__item, .plan__blk { transition: none; } }

.fit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.fit h2 { margin: 0; }
.fit__words p { color: var(--ink-soft); max-width: 44ch; margin: 16px 0 0; }
@media (max-width: 860px) { .fit { grid-template-columns: 1fr; } }