/* ============================================================
   Prime - landing.css
   The Delivery Guy landing page. Loads after main.css, which owns
   the shared tokens, fonts, reset, logo and footer. Everything in
   this file is landing only. Brand layer: CRAFT.md, section 10.
   ============================================================ */

/* ---------- Landing fonts (self hosted) ---------- */
@font-face { font-family:'Bricolage Grotesque'; src:url('../assets/fonts/BricolageGrotesque-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Allerta Stencil'; src:url('../assets/fonts/AllertaStencil-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-800-900.woff2') format('woff2'); font-weight:800 900; font-style:normal; font-display:swap; }

/* ---------- Landing tokens ---------- */
:root {
  /* the suburb */
  --sky-hi:#4FA9F5; --sky:#9DD3FF; --sky-lo:#E4F3FF; --sun:#FFF6CC;
  --lawn:#59B441; --lawn-2:#4CA136; --lawn-3:#6EC756;
  --pave:#DADCD7; --pave-2:#C6C9C2;
  --road:#3D4249; --road-2:#30353B; --road-line:#F0D257;

  /* cardboard */
  --kraft:#C9A374; --kraft-2:#B78D5F; --kraft-3:#E6CDA6; --kraft-ink:#4E3418;
  --kraft-line:rgba(78,52,24,.28);
  --tape:#F6E9CF; --tape-ink:#23242A;
  --label:#FFFDF8;

  --display:'Bricolage Grotesque', 'Inter', sans-serif;
  --stencil:'Allerta Stencil', 'Inter', sans-serif;

  /* fluid type, one scale */
  --fs-hero:clamp(54px, 9.4vw, 150px);
  --fs-h2:clamp(38px, 5.8vw, 86px);
  --fs-h3:clamp(22px, 2.4vw, 30px);
  --fs-lead:clamp(17px, 1.45vw, 21px);
  --fs-body:clamp(15px, 1.1vw, 17px);
  --fs-label:12px;

  --wrap:1320px;
  /* --gx and --top-h are defined in main.css, which every page loads, so the
     landing and the directory headers cannot drift apart. Only the pinned
     height differs: no category row on this page. */
  --stick-h:var(--top-h);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-drop:cubic-bezier(.34,1.56,.64,1);

  /* van geometry. Wheel centres and diameter are percentages of the
     van box, tuned to the render in assets/img/van.png. */
  --van-w:min(66vw, 1100px);
  --wf-x:85%; --wr-x:17.6%; --w-y:85.6%; --w-d:12.6%;
  --road-h:15vh;
}

/* ---------- Base overrides for this page ---------- */
html { scroll-behavior:smooth; }
html.reduce { scroll-behavior:auto; }
body.landing {
  background:var(--sky-lo); color:var(--ink);
  font-size:var(--fs-body); line-height:1.55; overflow-x:clip;
  scrollbar-color:var(--kraft-2) var(--sky-lo);
}
body.landing ::selection { background:var(--blue); color:#fff; }
body.landing p { text-wrap:pretty; }

.h-display { font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.94; text-wrap:balance; }
.h1 { font-size:var(--fs-hero); padding-bottom:.06em; }
.h2 { font-size:var(--fs-h2); }
.h3 { font-size:var(--fs-h3); letter-spacing:-.02em; line-height:1.05; }
.lead { font-size:var(--fs-lead); line-height:1.5; max-width:36ch; }
.stencil { font-family:var(--stencil); text-transform:uppercase; letter-spacing:.14em; font-size:var(--fs-label); }
.wrap { max-width:var(--wrap); margin:0 auto; }

/* reveals: only hidden when JS is running and motion is allowed */
html.js:not(.reduce) [data-reveal] { opacity:0; transform:translateY(24px); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 24px; border-radius:var(--r-pill);
  font-weight:600; font-size:16px; white-space:nowrap; border:1px solid transparent;
  transition:transform 160ms var(--ease-out), background 160ms, box-shadow 160ms;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(1px) scale(.99); }
.btn:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.btn-y { background:var(--btn-y); border-color:var(--btn-y-line); color:var(--ink); box-shadow:0 1px 0 rgba(15,17,17,.12), 0 10px 22px -12px rgba(15,17,17,.45); }
.btn-y:hover { background:var(--btn-y-hover); color:var(--ink); }
.btn-ink { background:var(--nav); color:#fff; }
.btn-ink:hover { background:var(--nav-2); color:#fff; }
.btn-sm { height:40px; padding:0 16px; font-size:14px; }
.btn .arr { width:16px; height:16px; transition:transform 200ms var(--ease-out); }
.btn:hover .arr { transform:translateX(3px); }
.btn:disabled { opacity:.55; cursor:default; transform:none; }

/* ---------- Social buttons ----------
   .sbar and .sbtn, not .social: main.css already owns .social, as the little
   outlined link on a project page, and both stylesheets load here. A container
   named .social would have been styled as one of those links.

   One component, two grounds: the white shipping label in the hero and the
   near black footer. Everything that differs between them is a colour, so
   .sbar-dark restates four of them and nothing else; the geometry, the
   icon sizes and the hover are written once.

   Deliberately not .btn. These are 44px, not 52, and they are outlined
   rather than filled, because the hero already carries a yellow button and
   an ink button and a third and fourth solid pill would turn the label into
   a wall of buttons with no clear first move. Outlined reads as "also here"
   rather than "do this".

   44px is the floor, not a round number: it is the smallest square a thumb
   hits reliably, and the row wraps rather than shrinks on a narrow screen. */
.sbar { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.sbtn {
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 17px; border-radius:var(--r-pill);
  font-size:15px; font-weight:600; white-space:nowrap;
  color:var(--ink); background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  transition:transform 160ms var(--ease-out), background 160ms, border-color 160ms;
}
.sbtn:hover { text-decoration:none; color:var(--ink); background:#fff; border-color:var(--ink-3); transform:translateY(-1px); }
.sbtn:active { transform:translateY(1px) scale(.99); }
.sbtn:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }

/* The X glyph is drawn to the edges of its box and the Telegram disc is a
   circle inside its own, so at one shared size the X reads noticeably bigger
   than the disc. The disc gets the extra two pixels back. */
.sbtn-ico { flex:none; width:17px; height:17px; }
.sbtn-tg { width:19px; height:19px; }

.sbar-dark .sbtn {
  color:#fff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22);
}
.sbar-dark .sbtn:hover { color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.42); }

/* ---------- Top bar ---------- */
.top {
  position:sticky; top:0; z-index:60; height:var(--top-h);
  display:flex; align-items:center; gap:var(--hdr-gap); padding:0 var(--gx);
  background:var(--nav); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.top a { color:#fff; }
.top .logo { padding-left:0; }
.top-nav { display:flex; gap:2px; margin-left:auto; }
.top-nav a {
  font-size:14px; padding:7px 10px; border-radius:6px; border:1px solid transparent;
  position:relative;
}
.top-nav a::after {
  content:''; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  background:var(--prime-cyan); transform:scaleX(0); transform-origin:left;
  transition:transform 220ms var(--ease-out);
}
.top-nav a:hover { text-decoration:none; }
.top-nav a:hover::after { transform:scaleX(1); }
.top .btn { margin-left:8px; }

/* ---------- Rendered backdrops ---------- */
/* Each scenic section carries two backdrops: the rendered street and the
   vector scene the page shipped with. The render wins when it loads, the
   vector scene when it does not, and the swap is driven by a real decode in
   landing.js rather than by whether the file happens to be referenced here.
   Both layers sit behind everything: the copy, the guy and the van all paint
   on top either way, so the section never depends on which one won.

   object-position pins the art to the bottom of the frame. These renders are
   16:9 and the sections are roughly that on a laptop but portrait on a phone,
   where a centred crop would throw away the kerb and leave the guy standing
   on a hedge. Anchoring the bottom edge keeps the ground line on screen at
   every ratio and spends the crop on sky, which is the part with nothing in
   it. */
.hero-bg, .drive-bg { position:absolute; inset:0; display:block; pointer-events:none; }
.hero-bg img, .drive-bg img {
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 100%;
  /* Held at zero opacity rather than display:none or visibility:hidden, both
     of which a browser is free to treat as "not needed yet" and defer. An
     opacity of 0 is unambiguously a painted element, so the fetch always
     starts, which matters because the class that reveals it is set by the
     load event: defer the fetch and the reveal never fires. It also means a
     404 shows nothing at all instead of a broken image icon in the corner. */
  opacity:0; transition:opacity 420ms var(--ease-out);
}
.hero.has-bg .hero-bg img, .drive.has-bg .drive-bg img { opacity:1; }
/* The vector scene sits ABOVE the render in paint order, so retiring it is
   what uncovers the photograph. It fades on the same curve rather than being
   display:none'd, because a render that arrives late would otherwise drop the
   illustration a frame before the photo had faced in, flashing the bare sky
   gradient between the two. Cross fading means there is no frame where
   neither is on screen. The drifting clouds are stopped at the same time:
   they are invisible once the render is up, and leaving them running would
   burn a compositor layer animating nothing anyone can see. */
.hero-scene, .drive-scene {
  position:absolute; inset:0; pointer-events:none;
  transition:opacity 420ms var(--ease-out);
}
.hero.has-bg .hero-scene, .drive.has-bg .drive-scene { opacity:0; }
.hero.has-bg .cloud { animation:none; }
html.reduce .hero-bg img, html.reduce .drive-bg img,
html.reduce .hero-scene, html.reduce .drive-scene { transition:none; }

/* Legibility scrim, and only over the renders.
   The vector scene was drawn to sit under this page's black headline, so its
   contrast is already known good and it needs nothing. A photograph is not:
   a dark roof or a shadowed hedge landing behind the headline takes it to
   unreadable, and WHICH part of the frame does that changes with every render
   and every viewport crop, so it cannot be fixed in the art alone.
   The wash is anchored to the copy rather than to the whole frame, and is
   gone by the middle of it. The guy and the van hold the opposite half and
   washing those out would cost more than the type gains. z-index 1 puts it
   over both backdrop layers and under everything that carries meaning: the
   guy at 3, the copy at 4, the van at 4, the cardboard panel at 3. */
.hero.has-bg::after, .drive.has-bg .drive-a::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
}
.hero.has-bg::after {
  background:linear-gradient(100deg,
    rgba(255,255,255,.58) 0%, rgba(255,255,255,.4) 32%, rgba(255,255,255,0) 62%);
}
.drive.has-bg .drive-a::after {
  background:linear-gradient(260deg,
    rgba(255,255,255,.52) 0%, rgba(255,255,255,.3) 30%, rgba(255,255,255,0) 58%);
}

/* The one number to tune once bg-street.jpg is in: --road-h is the height of
   the road surface measured up from the bottom of the frame, and the van is
   parked at half of it, so it is also what puts the wheels on the tarmac.
   The vector scene keeps 15vh; this override is only read when the render is
   the one on screen, so the two can disagree without either breaking. */
.drive.has-bg { --road-h:19.5%; }

/* ---------- Hero ---------- */
.hero {
  position:relative; min-height:calc(100svh - var(--top-h)); overflow:hidden;
  background:linear-gradient(180deg, var(--sky-hi) 0%, var(--sky) 44%, var(--sky-lo) 80%);
}
.hero-sun {
  position:absolute; right:8%; top:-16vh; width:46vw; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,246,204,.95) 0%, rgba(255,246,204,0) 62%);
  pointer-events:none;
}
.clouds { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cloud { position:absolute; width:clamp(160px, 18vw, 300px); height:auto; opacity:.9; }
.cloud-1 { left:6%; top:8%; animation:drift 90s linear infinite; }
.cloud-2 { left:44%; top:4%; width:clamp(120px, 12vw, 200px); opacity:.75; animation:drift 130s linear infinite reverse; }
.cloud-3 { left:70%; top:16%; opacity:.6; animation:drift 110s linear infinite; }
@keyframes drift { from { transform:translateX(-6vw); } to { transform:translateX(6vw); } }
html.reduce .cloud { animation:none; }

.houses { position:absolute; left:0; right:0; bottom:26%; height:min(24vh, 240px); pointer-events:none; }
.houses svg { width:100%; height:100%; display:block; }
.hero-lawn {
  position:absolute; left:0; right:0; bottom:0; height:26%;
  background:repeating-linear-gradient(100deg, var(--lawn) 0 120px, var(--lawn-2) 120px 240px);
}
.hero-pave {
  position:absolute; left:0; right:0; bottom:0; height:8%;
  background:repeating-linear-gradient(90deg, var(--pave) 0 160px, var(--pave-2) 160px 162px);
  border-top:3px solid var(--pave-2);
}

.hero-guy-pic { display:contents; }
.hero-guy {
  position:absolute; right:clamp(0px, 3vw, 60px); bottom:-1.5%; z-index:3;
  height:min(94%, 920px); width:auto; max-width:44vw; object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 34px 34px rgba(15,17,17,.28));
}
.hero.is-missing .hero-guy { display:none; }

.hero-in {
  position:relative; z-index:4; max-width:var(--wrap); margin:0 auto;
  padding:clamp(36px, 7vh, 88px) var(--gx) 0;
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
}
.hero-copy { padding-bottom:calc(26% + 40px); }
.hero .h1 .w { display:inline-block; }
/* Wide screens hold the headline on one line, letting it run past the copy
   column. Under 1100px it wraps again, which is where the guy closes in. */
@media (min-width:1101px) {
  .hero .h1 { white-space:nowrap; width:max-content; }
}
.hero .label { margin-top:30px; }

/* the shipping label */
.label {
  position:relative; max-width:520px;
  background:var(--label); border:1px solid rgba(15,17,17,.16); border-radius:6px;
  padding:18px 20px 20px; transform:rotate(-1.2deg);
  box-shadow:0 26px 44px -26px rgba(15,17,17,.55), inset 0 1px 0 rgba(255,255,255,.7);
}
.label::before {
  content:''; position:absolute; left:50%; top:-13px; width:124px; height:26px;
  background:var(--tape); opacity:.92; transform:translateX(-50%) rotate(1.6deg);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.label-hd {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:12px;
}
.label-brand { display:flex; align-items:center; }
.label-logo { display:block; width:73px; height:38px; --logo-w:var(--blue); --logo-s:var(--blue); }
.label-svc { border:2px solid var(--ink); padding:4px 8px; font-family:var(--stencil); font-size:12px; letter-spacing:.14em; }
.label-rows { display:grid; grid-template-columns:auto 1fr; gap:7px 18px; font-size:15px; margin:0; }
.label-rows dt { font-family:var(--stencil); font-size:11px; letter-spacing:.14em; color:var(--ink-2); text-transform:uppercase; padding-top:3px; }
.label-rows dd { margin:0; font-weight:600; color:var(--ink); }
.label-rows dd.tn { font-family:var(--mono); font-weight:400; font-size:14px; overflow-wrap:anywhere; }
.barcode { display:block; width:100%; height:42px; margin:14px 0 2px; fill:var(--ink); }
.label-cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* ---------- Packing tape marquee ---------- */
/* The rotate plus the 2% overscale is what stops the strip's corners showing
   as triangles of page behind it. It also pushes the box a few px past both
   edges, which is deliberate and is why body.landing carries overflow-x:clip:
   the tape is trimmed at the viewport instead of being narrowed here, so the
   skew stays constant at every width. */
.tape {
  position:relative; z-index:5; height:56px; margin:-18px 0 -20px;
  transform:rotate(-1.4deg) scale(1.02);
  background:var(--tape); color:var(--tape-ink);
  border-top:1px solid rgba(0,0,0,.14); border-bottom:1px solid rgba(0,0,0,.14);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
  overflow:hidden; display:flex; align-items:center;
}
.tape-track { display:flex; white-space:nowrap; will-change:transform; animation:tape 34s linear infinite; }
.tape-item { display:inline-flex; align-items:center; gap:24px; padding:0 24px; font-family:var(--stencil); font-size:19px; letter-spacing:.16em; text-transform:uppercase; }
.tape-item svg { width:36px; height:8px; flex:none; }
@keyframes tape { to { transform:translateX(-50%); } }
html.reduce .tape-track { animation:none; }

/* ---------- The van set piece ---------- */
.drive { position:relative; height:calc(100svh - var(--top-h)); overflow:hidden; background:var(--sky); }
.drive-a { position:absolute; inset:0; background:linear-gradient(180deg, var(--sky-hi) 0%, var(--sky) 46%, var(--sky-lo) 76%); }
.drive .houses { bottom:calc(var(--road-h) + 12vh); height:min(24vh, 240px); }
.drive-lawn {
  position:absolute; left:0; right:0; bottom:var(--road-h); height:12vh;
  background:repeating-linear-gradient(100deg, var(--lawn) 0 140px, var(--lawn-2) 140px 280px);
  border-bottom:8px solid var(--pave);
}
.drive-road { position:absolute; left:0; right:0; bottom:0; height:var(--road-h); background:linear-gradient(180deg, var(--road) 0%, var(--road-2) 100%); }
.drive-road::before {
  content:''; position:absolute; left:0; right:0; top:46%; height:4px; opacity:.85;
  background:repeating-linear-gradient(90deg, var(--road-line) 0 64px, transparent 64px 118px);
}
.drive-a-in { position:absolute; right:var(--gx); top:42%; transform:translateY(-70%); width:min(44vw, 620px); z-index:2; }
.drive-a-in .lead { margin-top:18px; }
.drive-a-in { will-change:opacity; }

/* A second wash, and this one is anchored to the words rather than to the
   frame.

   The gradient on .drive-a::after above is measured from the edges of the
   section, so where it lands depends on the crop, and its own comment admits
   as much. That is survivable for the headline, which is 90px of solid black
   and carries itself. It is not survivable for the lead: it is body sized,
   it is grey, and it sits lower down the frame than the wash reaches, which
   on this render puts four lines of small type directly over lit windows,
   roof lines and tree canopy. Every one of those is a mid tone, so the text
   loses its edge against them and the eye has to work out where each word
   ends.

   Anchoring the wash to .drive-a-in instead means it cannot miss. It is a
   child of the copy block, so it is exactly as tall as the copy is, at every
   viewport and behind every future render, and the negative inset is the
   bleed that keeps the haze from stopping on a hard line at the text edge.
   Radial rather than linear so it has no edge at all, and z-index -1 keeps it
   inside this block's own stacking context: over the photograph, under the
   type, and it fades out with the copy when the van pulls away because it
   fades with its parent.

   The lead also goes to full --ink here. --ink-2 is chosen to pass AA on
   white paper, and a photograph is not white paper. */
.drive.has-bg .drive-a-in { isolation:isolate; }
.drive.has-bg .drive-a-in::before {
  content:''; position:absolute; z-index:-1; inset:-62px -92px -72px -96px;
  /* 50% 50% is not a round number chosen by eye. Radial radii are measured
     from the centre, so at 50% the ellipse touches the middle of each edge
     and everything past it is already transparent: the gradient finishes
     inside the box and the box never clips it. Anything larger and the fade
     is cut off by the element bounds, which puts a hard rectangular edge
     across the photograph, which is worse than the problem being solved.
     The generous negative inset is what buys the room for that fade. */
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,255,255,.93) 0%, rgba(255,255,255,.89) 62%,
    rgba(255,255,255,.66) 82%, rgba(255,255,255,.26) 93%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.drive.has-bg .drive-a-in .lead { color:var(--ink); }

/* The cardboard panel the van uncovers as it drives off.
   Revealed with a gradient MASK rather than a clip-path: a clip edge is
   always perfectly hard, which reads as a seam down the screen. The mask
   softens it into a wash. --wipe is the reveal position and is the only
   thing the scroll handler touches; --edge is how soft the boundary is.
   --wipe is the LEADING edge of the reveal, in px, and the fade TRAILS it:
   fully transparent at --wipe, ramping to fully opaque --edge behind it.
   That ordering matters. An earlier version centred the band on --wipe, which
   left half the fade on screen at --wipe:0 and showed a translucent sliver of
   this section before the van had moved at all. With the band trailing, a
   --wipe of 0 puts every visible pixel past the transparent stop, so the panel
   is completely hidden until the van actually pulls away.
   landing.js sets --p, a plain 0 to 1 progress, and CSS works out the
   geometry. Keeping the maths here means --edge is never read from JS:
   getComputedStyle does not resolve clamp() inside a custom property, it
   hands back the literal string, so parsing it there would silently give NaN.
   --lead overshoots by --edge at both ends, so the reveal starts fully hidden
   and finishes fully opaque with no fade stranded at either edge. */
.drive-b {
  position:absolute; inset:0; z-index:3;
  background:var(--card); color:var(--ink);
  --p:0;
  --edge:clamp(22px, 3.5vw, 80px);
  --lead:calc(var(--p) * (100% + var(--edge)));
  -webkit-mask-image:linear-gradient(90deg,
    #000 0,
    #000 calc(var(--lead) - var(--edge)),
    transparent var(--lead));
  mask-image:linear-gradient(90deg,
    #000 0,
    #000 calc(var(--lead) - var(--edge)),
    transparent var(--lead));
}
/* The van used to uncover a corrugated kraft wall. It now uncovers a plain
   white page, which is the Amazon read and lets the kraft parcels below be
   the only cardboard on screen. */
.drive-b, .deliveries { background:var(--card); }
.drive-b-in { position:absolute; left:var(--gx); top:50%; transform:translateY(-50%); max-width:min(56vw, 860px); z-index:2; }
/* The package holds the right half of the panel against the headline. It rides
   in on --slide, set from the van's position, so the layout stays here. */
.drive-b-art {
  position:absolute; right:1vw; top:50%; width:min(44vw, 620px); height:auto;
  transform:translate3d(var(--slide, 0px), -50%, 0) rotate(-4deg);
  filter:drop-shadow(0 26px 26px rgba(78,52,24,.22));
}
.drive-b-in .lead { margin-top:20px; color:var(--ink-2); }
.scroll-hint { margin-top:34px; font-family:var(--stencil); font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.7; display:flex; align-items:center; gap:10px; }
.scroll-hint svg { width:14px; height:14px; animation:nudge 1.6s var(--ease-out) infinite; }
@keyframes nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(4px); } }
html.reduce .scroll-hint svg { animation:none; }

.van { position:absolute; left:0; bottom:calc(var(--road-h) * .5); width:var(--van-w); z-index:4; will-change:transform; }
.van-body { position:relative; transform-origin:30% 100%; }
.van-body picture, .van-body img { width:100%; height:auto; display:block; }
/* Ground shadow. The stop is 56% rather than 68% so the gradient is fully
   transparent at 79% of the half box instead of 96%, which is too close to
   the edge to survive sub pixel rounding. The box is grown to match, so the
   visible ellipse is the same size as before, just no longer touching its
   own boundary. Rule of thumb for these: stop x 1.414 must stay well under 1. */
.van-shadow {
  position:absolute; left:-3%; right:-3%; bottom:-2.3%; height:8.5%; z-index:-1;
  background:radial-gradient(ellipse, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 56%);
}
.wheel { position:absolute; width:var(--w-d); aspect-ratio:1; top:var(--w-y); transform:translate(-50%,-50%); }
.wheel-f { left:var(--wf-x); }
.wheel-r { left:var(--wr-x); }
.wheel-rim { width:100%; height:100%; display:block; will-change:transform; }
.van-brake {
  position:absolute; left:-.25%; top:44.5%; width:7.5%; height:15%;
  background:radial-gradient(circle, rgba(255,70,60,.95) 0%, rgba(255,70,60,0) 56%);
  filter:blur(3px);
}
.exhaust { position:absolute; left:1%; bottom:10%; width:8%; height:8%; }
.puff { position:absolute; left:0; bottom:0; width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.6); animation:puff 2.6s ease-out infinite; }
.puff:nth-child(2) { animation-delay:.9s; }
.puff:nth-child(3) { animation-delay:1.7s; }
@keyframes puff { 0% { transform:translate(0,0) scale(.4); opacity:.85; } 100% { transform:translate(-64px,-56px) scale(2.1); opacity:0; } }
.van.is-moving .puff { animation-play-state:paused; opacity:0; }
html.reduce .puff { animation:none; opacity:0; }
/* Dust kicked up behind the van.
   This used to be anchored `at 100% 100%`, which put the gradient's bright
   centre exactly on the box's bottom right corner, so the box clipped the
   brightest part of it and left a hard L shaped edge on the road. The box is
   now larger and the centre sits inside it, with explicit radii chosen so the
   gradient reaches full transparency before any edge: 55 +/- 42 and 60 +/- 37
   both land comfortably within 0 to 100. Keep it that way if you retune it. */
.van-dust {
  position:absolute; left:-12%; bottom:-10%; width:40%; height:40%;
  opacity:0; pointer-events:none;
  background:radial-gradient(ellipse 42% 37% at 55% 60%,
    rgba(214,204,186,.8) 0%, rgba(214,204,186,0) 100%);
}

/* reduced motion, or no GSAP: parked van, cardboard card as a normal block */
.drive.is-static { height:auto; }
.drive.is-static .drive-a { position:relative; height:calc(88svh - var(--top-h)); min-height:520px; }
.drive.is-static .drive-b {
  position:relative; padding:14vh var(--gx);
  -webkit-mask-image:none; mask-image:none;
}
.drive.is-static .drive-b-in { position:static; transform:none; }
.drive.is-static .van { transform:translate3d(-4%,0,0); }
.drive.is-static .scroll-hint { display:none; }

/* ---------- Deliveries (cardboard) ---------- */
.deliveries { position:relative; color:var(--ink); padding:clamp(56px, 9vh, 120px) var(--gx) clamp(72px, 12vh, 140px); }
.deliveries-hd { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:clamp(28px, 5vh, 56px); flex-wrap:wrap; }
.deliveries-hd p { max-width:44ch; color:var(--ink-2); font-size:var(--fs-lead); }

/* ============================================================
   Sealed kraft cartons, built as real 3D geometry

   All SIX faces on a preserve-3d parent, each positioned from the centre so
   the box can be resized purely through --w / --h / --d. Nothing is omitted
   as an optimisation: a box missing its back or underside is a box with a
   hole in it the moment anything tilts far enough to show one, and the
   renderer occludes the hidden faces by depth anyway, so they cost nothing.

   The look comes from one committed light source, up and to the left:
   top face lightest, front mid, right side darkest, left side between.
   Everything else is material detail that reads as expensive up close and
   costs nothing at distance: the corrugated flute along the cut flap edge,
   the tape with its own sheen and slightly soft ends, kraft fibre grain,
   and contact shading where faces meet.
   ============================================================ */
.pkgs {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(24px, 5vw, 96px); align-items:start;
  padding-top:clamp(20px, 4vh, 56px);
}

.pkg { display:flex; flex-direction:column; }

/* perspective lives on the stage, so each carton has its own vanishing
   point and they do not shear toward a shared one.

   The height is shared rather than derived from each box, which is the
   point: sized per box, the smaller carton got a shorter stage and its
   copy rode up out of line with its neighbour. One height means both
   parcels sit on the same floor and both blocks of copy start level.
   The value matches what the larger carton needs: --h + --d * .82 + 44. */
.pkg-stage {
  position:relative; perspective:1100px; perspective-origin:50% 42%;
  height:clamp(282px, calc(26.2vw + 44px), 428px);
  display:flex; align-items:flex-end; justify-content:center;
}

.pkg-box {
  position:relative; width:var(--w); height:var(--h);
  transform-style:preserve-3d;
  /* shared, not derived from --d. Per box it left the smaller carton
     floating a few pixels above its neighbour instead of resting on the
     same floor. Matches what the larger carton's depth asked for. */
  margin-bottom:clamp(41px, 4.42vw, 65px);
  /* --tx/--ty are the pointer lean, --dy the scroll drift. They default to
     0 so the resting angle is exactly --rx/--ry with no JS running. */
  --tx:0; --ty:0; --dy:0px;
  transform:
    translate3d(0, var(--dy), 0)
    rotateX(calc(var(--rx) + var(--ty) * 5deg))
    rotateY(calc(var(--ry) + var(--tx) * 7deg));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.pkg-box.is-live { transition:none; }

.bx {
  position:absolute; left:50%; top:50%;
  background:var(--kraft);
  background-image:
    /* kraft fibre: two offset hairline sets, low contrast on purpose */
    repeating-linear-gradient(97deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(4deg, rgba(78,52,24,.045) 0 1px, transparent 1px 9px);
}

.bx-front {
  width:var(--w); height:var(--h);
  margin-left:calc(var(--w) / -2); margin-top:calc(var(--h) / -2);
  transform:translateZ(calc(var(--d) / 2));
  box-shadow:inset 0 -22px 30px -24px rgba(78,52,24,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
.bx-right, .bx-left {
  width:var(--d); height:var(--h);
  margin-left:calc(var(--d) / -2); margin-top:calc(var(--h) / -2);
}
.bx-right {
  transform:rotateY(90deg) translateZ(calc(var(--w) / 2));
  filter:brightness(.8) saturate(1.05);
  box-shadow:inset 12px 0 26px -18px rgba(78,52,24,.7);
}
.bx-left {
  transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));
  filter:brightness(.9);
  box-shadow:inset -12px 0 26px -18px rgba(78,52,24,.6);
}
/* Facing away from the light, so darker than the front but not as dark as
   the underside. Carries the manufacturer's glue joint. */
.bx-back {
  width:var(--w); height:var(--h);
  margin-left:calc(var(--w) / -2); margin-top:calc(var(--h) / -2);
  transform:rotateY(180deg) translateZ(calc(var(--d) / 2));
  filter:brightness(.68) saturate(1.05);
  box-shadow:inset 0 -20px 30px -22px rgba(78,52,24,.6);
}
.bx-joint {
  position:absolute; right:16%; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(78,52,24,.3), rgba(78,52,24,.12));
}

/* The underside sits in full shade. Same flap seam and tape as the top,
   because a real carton is sealed at both ends. */
.bx-bottom {
  width:var(--w); height:var(--d);
  margin-left:calc(var(--w) / -2); margin-top:calc(var(--d) / -2);
  transform:rotateX(-90deg) translateZ(calc(var(--h) / 2));
  filter:brightness(.52) saturate(1.1);
  box-shadow:inset 0 0 44px -10px rgba(40,24,8,.55);
}
.bx-seam-h {
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(40,24,8,.34);
}
.bx-tape-b { opacity:.72; }

.bx-top {
  width:var(--w); height:var(--d);
  margin-left:calc(var(--w) / -2); margin-top:calc(var(--d) / -2);
  transform:rotateX(90deg) translateZ(calc(var(--h) / 2));
  filter:brightness(1.1);
  box-shadow:inset 0 0 40px -14px rgba(78,52,24,.4);
}

/* the cut flap edge: the one place a sealed box shows its corrugation */
.bx-flute {
  position:absolute; left:0; right:0; bottom:0; height:5px;
  background:
    repeating-linear-gradient(90deg,
      rgba(78,52,24,.34) 0 1px,
      rgba(255,255,255,.16) 1px 2px,
      transparent 2px 5px),
    linear-gradient(180deg, var(--kraft-2), var(--kraft));
  box-shadow:inset 0 1px 1px rgba(78,52,24,.3);
}

/* packing tape. Warm, slightly translucent, with a lengthwise sheen and
   ends that stop short of the edge like real tape does. */
.bx-tape {
  position:absolute; left:6%; right:6%; top:50%; height:26%;
  transform:translateY(-50%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.06) 26%,
                    rgba(255,255,255,0) 52%, rgba(78,52,24,.09) 100%),
    var(--tape);
  opacity:.93;
  box-shadow:0 1px 2px rgba(78,52,24,.28), inset 0 0 0 1px rgba(255,255,255,.22);
}
/* the tab folded over the front edge */
.bx-tab {
  position:absolute; left:50%; top:0; width:22%; height:13%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, var(--tape), rgba(246,233,207,.86));
  opacity:.9;
  box-shadow:0 2px 3px -1px rgba(78,52,24,.3);
}

/* the seam where the two front flaps meet */
.bx-seam {
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, rgba(78,52,24,.24), rgba(78,52,24,.06));
}

/* printed ink. Slightly transparent so it reads as absorbed into the
   board rather than a sticker sitting on top of it. */
.bx-print {
  position:absolute; left:9%; right:9%; top:50%; transform:translateY(-52%);
  text-align:center; color:var(--kraft-ink);
}
.bx-print h3 {
  font-size:clamp(17px, 2.5vw, 34px); line-height:1.02; letter-spacing:-.02em;
  opacity:.88; text-shadow:0 1px 0 rgba(255,255,255,.16);
}
.bx-swoosh {
  display:block; width:52%; height:auto; aspect-ratio:64/12; margin:8% auto 0;
  color:var(--kraft-ink); opacity:.6;
}
.bx-stencil {
  position:absolute; right:7%; bottom:7%;
  display:flex; align-items:center; gap:5px;
  font-family:var(--stencil); font-size:clamp(6px, .72vw, 9px);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--kraft-ink); opacity:.42;
}
.bx-stencil svg { width:11px; height:11px; }

/* Contact shadow. Two layers: a tight dark core where the box meets the
   ground, and a wide soft one for the ambient. It tracks the lean, which
   is most of what sells the depth. */
.pkg-shadow {
  position:absolute; left:50%; bottom:calc(var(--d) * .12); z-index:-1;
  width:calc(var(--w) * 1.06); height:calc(var(--d) * .58);
  transform:translateX(-50%) translateX(calc(var(--tx, 0) * -14px)) rotateX(72deg);
  background:
    radial-gradient(ellipse 42% 46% at 50% 50%, rgba(60,38,16,.34) 0%, rgba(60,38,16,0) 70%),
    radial-gradient(ellipse 46% 48% at 50% 50%, rgba(60,38,16,.16) 0%, rgba(60,38,16,0) 72%);
  filter:blur(9px);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}

/* copy under the carton, not on it */
.pkg-copy { margin-top:clamp(14px, 2.4vw, 26px); max-width:42ch; margin-inline:auto; text-align:center; }
.pkg-copy p { font-size:clamp(14px, 1.15vw, 16px); line-height:1.6; color:var(--ink-2); }

@media (max-width:760px) {
  .pkgs { grid-template-columns:1fr; gap:clamp(30px, 8vw, 60px); }
  .pkg-stage { perspective:820px; }
}
html.reduce .pkg-box, html.reduce .pkg-shadow { transition:none; }

.route { margin-top:clamp(64px, 10vh, 120px); position:relative; }
.route-hd { margin-bottom:clamp(24px, 4vh, 40px); }
.stops { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px, 2.6vw, 36px); position:relative; }
.stops::before { content:''; position:absolute; left:26px; right:14%; top:26px; border-top:3px dashed var(--line); }
.stop { position:relative; padding-top:70px; }
.stop-n {
  position:absolute; left:0; top:0; width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:var(--card); display:grid; place-items:center;
  font-family:var(--display); font-size:22px; letter-spacing:-.02em; box-shadow:0 0 0 6px var(--card);
}
.stop-n svg { width:26px; height:26px; }
.stop h3 { margin-bottom:8px; }
.stop p { max-width:34ch; color:var(--ink-2); }
.fine { margin-top:44px; font-size:14px; color:var(--ink-2); max-width:72ch; border-top:1px solid var(--line-soft); padding-top:16px; line-height:1.6; }

/* ---------- Photo on delivery ---------- */
.photos { background:var(--card); border-top:1px solid var(--line-soft); padding:clamp(64px, 10vh, 130px) var(--gx); }
.photos-hd { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(28px, 4vh, 48px); flex-wrap:wrap; }
.photos-hd p { max-width:40ch; color:var(--ink-2); font-size:var(--fs-lead); }
.gallery { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(14px, 1.8vw, 24px); }
.shot { margin:0; }
.shot:nth-child(1) { grid-column:1 / 8; }
.shot:nth-child(2) { grid-column:8 / 13; align-self:end; }
.shot:nth-child(3) { grid-column:1 / 6; align-self:start; }
.shot:nth-child(4) { grid-column:6 / 13; }
/* 4:3 because that is what every render is. Forcing them into the 16:9 this
   grid was drafted with would crop a quarter off the top and bottom of each,
   which takes the thrown package out of one frame and the outer two figures
   out of the turnaround. The art sets the ratio, not the other way round. */
.shot-img {
  position:relative; aspect-ratio:4 / 3; overflow:hidden; border-radius:8px;
  background:var(--kraft-3); border:1px solid rgba(15,17,17,.08);
}
/* display:contents so the wrapper is not a layout box at all. The img is
   sized height:100% against .shot-img's aspect-ratio, and an inline <picture>
   in between has no height of its own to resolve that against, which
   collapses the tile to nothing. Same reason .hero-guy-pic does it. */
.shot-img picture { display:contents; }
.shot-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 800ms var(--ease-out); }
.shot:hover .shot-img img { transform:scale(1.03); }
.shot-missing {
  position:absolute; inset:0; display:none; place-items:center; text-align:center; padding:20px;
  font-family:var(--stencil); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--kraft-ink); opacity:.7;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 9px);
}
.shot-missing small { display:block; margin-top:8px; font-family:var(--mono); letter-spacing:0; text-transform:none; font-size:12px; opacity:.8; }
.shot.is-missing img { display:none; }
.shot.is-missing .shot-missing { display:grid; }
.shot-cap { display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; padding:14px 4px 0; }
.shot-ico { width:28px; height:28px; border-radius:50%; background:var(--pos-bg); color:var(--pos); display:grid; place-items:center; }
.shot-ico svg { width:16px; height:16px; }
.shot-cap b { display:block; font-size:15px; color:var(--stock); }
.shot-cap span { font-size:14px; color:var(--ink-2); }

/* ---------- Tracking ---------- */
.track { background:var(--blue-tint); border-top:1px solid var(--blue-line); border-bottom:1px solid var(--blue-line); padding:clamp(64px, 10vh, 130px) var(--gx); }
.track-grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(28px, 4vw, 72px); align-items:start; }
.track-copy p { margin-top:18px; color:var(--ink-2); max-width:40ch; font-size:var(--fs-lead); }
.tn-box { margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px; box-shadow:var(--sh-card); }
.tn-box .stencil { color:var(--ink-2); }
.tn-box .tn { display:block; margin:8px 0 12px; font-family:var(--mono); font-size:15px; line-height:1.5; overflow-wrap:anywhere; color:var(--ink); }
.tn-box .barcode { height:36px; margin:0 0 12px; }
.tn-actions { display:flex; gap:10px; flex-wrap:wrap; }

.steps { display:flex; flex-direction:column; }
.step { display:grid; grid-template-columns:36px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--blue-line); position:relative; }
.step:last-child { border-bottom:0; }
.step::before { content:''; position:absolute; left:17px; top:56px; bottom:-8px; width:2px; background:var(--blue-line); }
.step:last-child::before { display:none; }
.step-dot { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--card); border:2px solid var(--line); z-index:1; color:var(--ink-2); font-weight:700; font-size:13px; }
.step-dot svg { width:18px; height:18px; }
.step.is-done .step-dot { background:var(--pos); border-color:var(--pos); color:#fff; }
.step.is-now .step-dot { border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 6px rgba(0,82,255,.14); }
.step h3 { font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:0; line-height:1.3; }
.step.is-now h3 { color:var(--blue-deep); }
.step p { color:var(--ink-2); font-size:15px; margin-top:3px; }
.step-when { font-size:12px; color:var(--ink-2); font-family:var(--mono); margin-top:4px; }

/* ---------- Closing call to action ----------
   Deliberately quiet after the brick and the door that used to live here.
   The page ends on a white to grey wash so it settles rather than shouts,
   which is what a shopping site does at the bottom of a page. The grey it
   lands on is --page, the same one the shop grid sits on, so the two feel
   like the same product. */
.join {
  background:linear-gradient(180deg, var(--card) 0%, var(--card) 22%, var(--page) 100%);
  padding:clamp(44px, 7vh, 86px) var(--gx) clamp(48px, 7.5vh, 94px);
}
.join-in { max-width:760px; margin:0 auto; text-align:center; }

.join .h2 {
  color:var(--ink);
  font-size:clamp(30px, 4.6vw, 58px); line-height:1.06; letter-spacing:-.025em;
  text-wrap:balance;
}
/* The qualifier sits lighter and smaller than the price it follows, so the
   line reads as one thought with an aside rather than two headlines of
   equal weight. It stays inside the h2 so it wraps with the sentence. */
.join-in-dguy {
  white-space:nowrap; font-size:.5em; font-weight:500;
  color:var(--ink-2); letter-spacing:-.01em; vertical-align:.14em;
}
.join-cta {
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(28px, 4.5vh, 44px);
}

@media (max-width:560px) {
  .join-cta .btn { width:100%; justify-content:center; }
}

/* ---------- Footer tweaks ---------- */
.foot { font-size:13px; }

/* Same near black as .foot-main above it, so the band reads as part of the
   footer rather than as a stripe laid across it; the hairline is the only
   thing separating them. */
.foot-social {
  background:var(--nav); border-top:1px solid rgba(255,255,255,.13);
  padding:20px var(--gutter);
}
.foot-social .sbar {
  max-width:var(--content-max); margin:0 auto; gap:12px;
}
.foot-social-h {
  max-width:var(--content-max); margin:0 auto 12px;
  font-size:15px; font-weight:600; color:#fff;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px) {
  .top-nav { display:none; }
  .hero-guy { max-width:48vw; }
}
@media (max-width:860px) {
  :root { --van-w:124vw; --road-h:11vh; --wrap:100%; }
  .top .deliver { display:none; }
  .top .btn { margin-left:auto; }

  .hero { min-height:0; display:flex; flex-direction:column; }
  .hero-in { order:1; grid-template-columns:1fr; padding-top:clamp(28px, 6vh, 56px); }
  .hero-copy { padding-bottom:0; }
  .hero-guy { order:2; position:relative; right:auto; bottom:auto; display:block; height:min(62vh, 520px); width:auto; max-width:none; margin:-28px 6% -6px auto; }
  .hero.is-missing .hero-in { padding-bottom:30%; }
  /* Stacked layout puts the copy across the full width at the top and the guy
     underneath it, so the side wash from the desktop rule would now miss the
     type entirely and dim the wrong half. Vertical, from the top, instead. */
  .hero.has-bg::after {
    background:linear-gradient(180deg,
      rgba(255,255,255,.88) 0%, rgba(255,255,255,.7) 42%, rgba(255,255,255,0) 78%);
  }
  .drive.has-bg .drive-a::after {
    background:linear-gradient(180deg,
      rgba(255,255,255,.88) 0%, rgba(255,255,255,.66) 40%, rgba(255,255,255,0) 74%);
  }
  .hero-lawn { height:20%; }
  .houses { bottom:20%; height:min(18vh, 160px); }
  .label { max-width:none; transform:rotate(-.6deg); }

  .tape { height:48px; }
  .tape-item { font-size:16px; padding:0 18px; gap:18px; }

  .drive-a-in { left:var(--gx); right:var(--gx); top:8vh; transform:none; width:auto; }
  .drive-a-in .lead { max-width:none; }
  .drive .houses { bottom:calc(var(--road-h) + 10vh); height:min(16vh, 150px); }
  .drive-lawn { height:10vh; }
  .drive-b-in { left:var(--gx); right:var(--gx); max-width:none; top:34%; transform:translateY(-40%); }
  .drive-b-art { width:46vw; right:2vw; top:auto; bottom:6vh; transform:translate3d(var(--slide, 0px), 0, 0) rotate(-4deg); }

  .pkgs { grid-template-columns:1fr; }
  .stops { grid-template-columns:1fr; gap:28px; }
  .stops::before { left:25px; right:auto; top:26px; bottom:26px; border-top:0; border-left:3px dashed var(--line); }
  .stop { padding-top:0; padding-left:72px; }

  /* Full bleed so the next shot peeks past the edge, with the gutter put back
     as padding. scroll-padding-left is not optional here: snapping is
     mandatory, and a snap port that starts at the viewport edge drags the
     first shot onto x:0 the moment the page settles, silently eating the
     gutter the padding just paid for. */
  .gallery { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; margin:0 calc(-1 * var(--gx)); padding-left:var(--gx); padding-right:var(--gx); scroll-padding-left:var(--gx); scrollbar-width:none; }
  .gallery::-webkit-scrollbar { display:none; }
  .shot { flex:0 0 84%; scroll-snap-align:start; }

  .track-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  :root { --fs-hero:clamp(46px, 15vw, 64px); }
  .btn { height:48px; padding:0 18px; font-size:15px; }
  .label { padding:16px 14px 18px; }
  .label-rows { font-size:14px; }
  .label-cta .btn { flex:1 1 100%; }

  /* The rule above grows every button for the thumb, which is right in the
     page but wrong in the bar: the logo, the gap and a 48px pill carrying
     four words do not fit across a 320px phone, and the arrow was being
     clipped off the right edge. The bar keeps the small button. */
  .top .btn { height:40px; padding:0 13px; font-size:14px; gap:7px; }
  .top .logo-mark { height:29px; }
}