/* ==========================================================================
   রামু কাকা — homepage "Dhaka posters" design layer
   Loaded only by index.html, after site.css. Every rule is scoped to .home-page,
   so the order form, tracking, directory and other pages are untouched.

   One poster style per section:
     1 hero      vintage travel poster: paper, big yellow type
     2 jobs      light, 3D painted signboards that tilt and press (always light, also in dark mode)
     3 corners   evening bazaar: stalls with striped canopies under string lights
     4 how       golden river at dusk
     5 footer    global footer (same as every page)
   The cycle lane (js/home-lane.js) ties them together and takes each section's colours.
   ========================================================================== */

.home-page {
  --lane: 64px;                 /* height of the cycle lane; also change SCALE in js/home-lane.js */

  --a-bg: #F6EBCB; --a-ink: #1B2559; --a-sun: #FFD45C; --a-teal: #2E9C9A;
  --b-bg: #FFF4D6; --b-ink: #1B2559; --b-card: #FFFFFF; --b-grid: rgba(27, 37, 89, 0.13);
  --c-bg: #E2F2EE; --c-ink: #123C39; --c-card: #FFFFFF; --c-soft: #3D5F5B;
  --d-b1: #E9A23B; --d-b2: #F2BC52; --d-b3: #F7D57E; --d-ink: #4A1F0C; --d-card: #FBF1D4;
  --d-line: #6B2D12; --d-num: #B4531A; --d-plate: #8A4B1C; --d-city: #C98A3A; --d-water: #2D5A47; --d-sun: #FCE08A;

  --l0-far: #E8B868; --l0-mid: #4A2A12; --l0-gr: #4A2A12; --l0-dash: #F6EBCB;
  --l1-far: #FFD98A; --l1-mid: #1B2559; --l1-gr: #1B2559; --l1-dash: #FFF4D6;
  --l2-far: #A9D8CF; --l2-mid: #123C39; --l2-gr: #123C39; --l2-dash: #E2F2EE;
  --l3-far: #D9A23A; --l3-mid: #4A1F0C; --l3-gr: #2D5A47; --l3-dash: #F7D57E;
  --l4-far: #FFD98A; --l4-mid: #1B2559; --l4-gr: #1B2559; --l4-dash: #FFF4D6;
  --bk: #1B2559;
}
@media (prefers-color-scheme: dark) {
  .home-page {
    --a-bg: #1A1C33; --a-ink: #FFF4D6; --a-sun: #6E5510;
    --c-bg: #0F2B29; --c-ink: #E2F2EE; --c-card: #173D3A; --c-soft: #A9CFC8;
    --d-b1: #5A2E12; --d-b2: #6E3C18; --d-b3: #84501F; --d-ink: #FBE7C2; --d-card: #2A1A10;
    --d-line: #B4763A; --d-num: #F2BC52; --d-plate: #F2C27A; --d-city: #3E2412; --d-water: #163328; --d-sun: #C98A1E;
    --l0-far: #5A4320; --l0-mid: #FFF4D6; --l0-gr: #0B0D1C;
    --l2-far: #1E4A46; --l2-mid: #E2F2EE; --l2-gr: #071816; --l2-dash: #0F2B29;
    --l3-far: #6E3C18; --l3-mid: #FBE7C2; --l3-gr: #0E211A;
    --l4-far: #2A3470; --l4-mid: #FFF4D6; --l4-gr: #0B0F26; --l4-dash: #1B2559;
    --bk: #FFF4D6;
  }
}

/* ---------- 1 · Hero: vintage travel poster ---------- */
.home-page .hero {
  position: relative;
  isolation: isolate;
  --text: var(--a-ink);
  --muted: color-mix(in srgb, var(--a-ink) 80%, transparent);
  color: var(--a-ink);
  background-color: var(--a-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.home-page .pitch { position: relative; z-index: 1; }
.home-page .stage { z-index: 1; isolation: isolate; }
.home-page .stage::before {      /* the big poster sun behind Ramu Kaka */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 42%;
  width: 116%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--a-sun);
}
.home-page .hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(3rem, 8.6vw, 5.6rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--marigold);
  text-shadow: 3px 3px 0 #1B2559, -1px -1px 0 #1B2559, 1px -1px 0 #1B2559, -1px 1px 0 #1B2559;
}
.home-page .hero .btn { border-radius: 4px; box-shadow: 4px 4px 0 var(--indigo); }
.home-page .hero .link { border-bottom-color: var(--a-teal); }

/* ---------- 2 · Jobs: light, 3D painted signboards ----------
   Always light, also in dark mode. Each chip is a thick painted board with a solid
   extruded edge (no blur): it tilts toward the pointer, lifts on hover and presses in
   when picked. With JavaScript (.is-live) a chip opens the panel below with its
   description, the order button and matching Bashundhara places. Without JavaScript
   each chip is a link with its description under it. */
.home-page .jobs {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color-scheme: light;
  --text: var(--b-ink);
  --indigo: #1B2559;
  --marigold: #FFB300;
  --magenta: #D6246E;
  --mist: #FFF4D6;
  --page: var(--b-bg);
  --card: var(--b-card);
  --soft: var(--b-bg);
  --muted: rgba(27, 37, 89, 0.78);
  --line: rgba(27, 37, 89, 0.22);
  --line-strong: rgba(27, 37, 89, 0.6);
  --depth: 6px;
  color: var(--b-ink);
  background: var(--b-bg);
  padding: 4.25rem 0 6rem;
}
.home-page .jobs::after {            /* perspective floor the boards stand on */
  content: "";
  position: absolute;
  z-index: -1;
  left: -30%; right: -30%; bottom: 0;
  height: 260px;
  background:
    repeating-linear-gradient(90deg, var(--b-grid) 0 1.5px, transparent 1.5px 56px),
    repeating-linear-gradient(0deg, var(--b-grid) 0 1.5px, transparent 1.5px 56px);
  transform: perspective(320px) rotateX(58deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent);
  mask-image: linear-gradient(to top, #000 30%, transparent);
  pointer-events: none;
}
.home-page .jobs .wrap { position: relative; z-index: 1; }
.home-page .jobs h2 {
  max-width: 15em;
  margin: 0 auto 0.75rem;
  color: #1B2559;
  font: 800 clamp(2rem, 1.3rem + 3vw, 3.2rem)/1.25 var(--font-display);
  text-align: center;
  text-shadow: 1px 1px 0 #FFB300, 2px 2px 0 #FFB300, 3px 3px 0 #FFB300, 4px 4px 0 #D6246E;
}
.home-page .jobs-lead { max-width: 36rem; margin: 0 auto; color: var(--muted); text-align: center; }

/* tone per job (awning stripes, icon token, panel band) */
.home-page .job[data-job="laundry"],     .home-page .job-panel[data-job="laundry"]     { --tone: #2E9C9A; }
.home-page .job[data-job="medicine"],    .home-page .job-panel[data-job="medicine"]    { --tone: #D6246E; }
.home-page .job[data-job="shopping"],    .home-page .job-panel[data-job="shopping"]    { --tone: #15803D; }
.home-page .job[data-job="atob"],        .home-page .job-panel[data-job="atob"]        { --tone: #3A4FA8; }
.home-page .job[data-job="food"],        .home-page .job-panel[data-job="food"]        { --tone: #F2763A; }
.home-page .job[data-job="electrician"], .home-page .job-panel[data-job="electrician"] { --tone: #FFB300; }
.home-page .job[data-job="plumber"],     .home-page .job-panel[data-job="plumber"]     { --tone: #2F6FD6; }
.home-page .job[data-job="shifting"],    .home-page .job-panel[data-job="shifting"]    { --tone: #8A5A2B; }

/* chips: four across, short names on phones, full names on wider screens */
.home-page .job-list { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1.25rem 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); perspective: 900px; }
.home-page .job { --tone: #FFB300; --rx: 0deg; --ry: 0deg; --lift: 0px; min-width: 0; }
.home-page .job-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 1.35rem 0.3rem 0.65rem;
  border: 2.5px solid #1B2559;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1B2559;
  font: 700 0.95rem/1.3 var(--font-display);
  text-align: center;
  text-decoration: none;
  transform-style: preserve-3d;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 1px 1px 0 #1B2559, 2px 2px 0 #1B2559, 3px 3px 0 #1B2559, 4px 4px 0 #1B2559, 5px 5px 0 #1B2559, var(--depth) var(--depth) 0 #1B2559;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.home-page .job-chip::before {          /* striped awning in the job's colour */
  content: "";
  position: absolute;
  left: -2.5px; right: -2.5px; top: -2.5px;
  height: 11px;
  border: 2.5px solid #1B2559;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(90deg, var(--tone) 0 12px, #FFFFFF 12px 24px);
}
.home-page .job-token {               /* painted disc behind the icon; added by js/home-shelves.js */
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 2.5px solid #1B2559;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 3px 3px 0 #1B2559;
  transform: translateZ(18px);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.home-page .job-name { display: none; }
.home-page .dk-ico { width: 2.3rem; height: 2.3rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.home-page .job-token .dk-ico { width: 1.85rem; height: 1.85rem; color: #1B2559; fill: #FFFFFF; }
.home-page .dk-ico .acc { stroke: #1B2559; stroke-width: 3; fill: none; }
.home-page .job-chip > span:not(.job-token) { transform: translateZ(8px); }

.home-page .job-chip:hover { --lift: -4px; --depth: 9px; }
.home-page .job-chip:hover .job-token { transform: translateZ(26px) rotate(-8deg) scale(1.08); }
.home-page .job-chip:active { --lift: 3px; --depth: 2px; }
.home-page .job-chip:focus-visible { outline: 3px solid #D6246E; outline-offset: 5px; }
.home-page .job-chip[aria-selected="true"] {
  --lift: 3px; --depth: 3px;
  background: color-mix(in srgb, var(--tone) 22%, #FFFFFF);
}
.home-page .job-chip[aria-selected="true"]::after {   /* little pointer down toward the panel */
  content: "";
  position: absolute;
  left: 50%; bottom: -11px;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-right: 2.5px solid #1B2559;
  border-bottom: 2.5px solid #1B2559;
  background: color-mix(in srgb, var(--tone) 22%, #FFFFFF);
  transform: rotate(45deg);
}
.home-page .job-chip.is-picked .job-token { animation: job-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes job-pop { 0% { transform: translateZ(18px) scale(0.7) rotate(-20deg); } 100% { transform: translateZ(18px) scale(1) rotate(0); } }

.home-page .job-desc { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.95rem; }
.home-page .jobs .tag { display: inline-block; margin-top: 0.4rem; padding: 0.1rem 0.6rem 0; border: 2px solid #1B2559; border-radius: 6px; background: #FFB300; color: #1B2559; font-size: 0.82rem; font-weight: 700; }
.home-page .jobs.is-live .job-desc,
.home-page .jobs.is-live .job-list .tag { display: none; }
.home-page .jobs:not(.is-live) .job-list { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.home-page .jobs:not(.is-live) .job-short { display: none; }
.home-page .jobs:not(.is-live) .job-name { display: block; }

/* the panel a chip opens */
.home-page .job-panel {
  position: relative;
  margin-top: 1.75rem;
  padding: 1.6rem clamp(1rem, 3vw, 1.9rem) 1.6rem;
  border: 2.5px solid #1B2559;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 2px 2px 0 #1B2559, 4px 4px 0 #1B2559, 6px 6px 0 #1B2559, 8px 8px 0 #1B2559;
}
.home-page .job-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 11px 11px 0 0; background: var(--tone, #FFB300); border-bottom: 2.5px solid #1B2559; }
.home-page .job-panel.is-new > * { animation: job-in 0.3s ease-out both; }
.home-page .job-panel.is-new > *:nth-child(2) { animation-delay: 0.06s; }
@keyframes job-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.home-page .job-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.home-page .job-text { flex: 1 1 18rem; }
.home-page .job-title { margin: 0 0 0.25rem; font: 800 1.6rem/1.3 var(--font-display); }
.home-page .job-text p { margin: 0; color: var(--muted); }
.home-page .job-go {
  flex: none;
  padding: 0.85rem 1.6rem 0.7rem;
  border: 2.5px solid #1B2559;
  border-radius: 10px;
  background: #FFB300;
  color: #1B2559;
  box-shadow: 2px 2px 0 #1B2559, 4px 4px 0 #1B2559, 5px 5px 0 #1B2559;
  font: 700 1.15rem/1 var(--font-display);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.home-page .job-go:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 #1B2559, 4px 4px 0 #1B2559, 7px 7px 0 #1B2559; }
.home-page .job-go:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #1B2559; }
.home-page .job-go:focus-visible { outline: 3px solid #D6246E; outline-offset: 4px; }
.home-page .job-panel .shelf { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px dashed var(--line); }
.home-page .job-wait { margin: 1.25rem 0 0; color: var(--muted); }
.home-page .jobs .card { border: 2px solid #1B2559; border-radius: 10px; box-shadow: 4px 4px 0 #1B2559; }
.home-page .jobs .shelf-dot[aria-current="true"] { border-color: #1B2559; }

@media (min-width: 40rem) {
  .home-page .job-chip { flex-direction: row; justify-content: flex-start; gap: 0.75rem; padding: 1.5rem 0.9rem 0.85rem; font-size: 1.05rem; text-align: left; }
  .home-page .job-short { display: none; }
  .home-page .job-name { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .job-chip, .home-page .job-token, .home-page .job-go { transition: none; }
  .home-page .job-chip.is-picked .job-token, .home-page .job-panel.is-new > * { animation: none; }
}

/* ---------- 3 · Bashundhara corners: evening bazaar stalls ---------- */
.home-page .corners {
  position: relative;
  overflow: hidden;
  --text: var(--c-ink);
  --muted: var(--c-soft);
  color: var(--c-ink);
  background: var(--c-bg);
  padding: 5rem 0 4.5rem;
}
.home-page .corners .wrap { position: relative; z-index: 1; }
.home-page .dk-lights { position: absolute; left: 0; top: 0; width: 100%; height: 70px; max-width: none; color: var(--c-ink); opacity: 0.6; }
.home-page .lights-bulbs { position: absolute; left: 0; right: 0; top: 0; height: 70px; pointer-events: none; }
.home-page .lights-bulbs i { position: absolute; width: 11px; height: 14px; margin-left: -5.5px; border: 2px solid #1B2559; border-radius: 50% 50% 45% 45%; background: #FFB300; }
.home-page .lights-bulbs i:nth-child(3n+2) { background: #D6246E; }
.home-page .lights-bulbs i:nth-child(3n) { background: #FFF4D6; }
/* bulbs hang on the wire: points of the path in index.html (.dk-lights) */
.home-page .lights-bulbs i:nth-child(1)  { left: 4%; top: 16px; }
.home-page .lights-bulbs i:nth-child(2)  { left: 12%; top: 28px; }
.home-page .lights-bulbs i:nth-child(3)  { left: 20%; top: 36px; }
.home-page .lights-bulbs i:nth-child(4)  { left: 28%; top: 40px; }
.home-page .lights-bulbs i:nth-child(5)  { left: 36%; top: 40px; }
.home-page .lights-bulbs i:nth-child(6)  { left: 44%; top: 35px; }
.home-page .lights-bulbs i:nth-child(7)  { left: 52%; top: 27px; }
.home-page .lights-bulbs i:nth-child(8)  { left: 60%; top: 19px; }
.home-page .lights-bulbs i:nth-child(9)  { left: 68%; top: 13px; }
.home-page .lights-bulbs i:nth-child(10) { left: 76%; top: 9px; }
.home-page .lights-bulbs i:nth-child(11) { left: 86%; top: 8px; }
.home-page .lights-bulbs i:nth-child(12) { left: 95%; top: 9px; }

.home-page .corners h2 { margin: 0 0 0.6rem; font: 800 clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem)/1.25 var(--font-display); text-align: center; }
.home-page .corners-lead { max-width: 34rem; margin: 0 auto; color: var(--muted); text-align: center; }

.home-page .stalls { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); }
.home-page .stall[data-tone="kitchen"]   { --tone: #FFB300; }
.home-page .stall[data-tone="homemade"]  { --tone: #D6246E; }
.home-page .stall[data-tone="bahon"]     { --tone: #15803D; }
.home-page .stall[data-tone="directory"] { --tone: #2E9C9A; }
.home-page .stall a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  height: 100%;
  padding: 3.4rem 1.2rem 1.2rem;
  border: 2.5px solid #1B2559;
  border-radius: 6px 6px 12px 12px;
  background: var(--c-card);
  color: var(--c-ink);
  text-decoration: none;
  box-shadow: 0 6px 0 #1B2559;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.home-page .stall-roof {               /* striped canopy with a scalloped edge */
  position: absolute;
  left: -10px; right: -10px; top: -14px;
  height: 36px;
  border: 2.5px solid #1B2559;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--tone) 0 22px, #FFFFFF 22px 44px);
  transform-origin: 50% 0;
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.home-page .stall-roof::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -12px;
  height: 11px;
  background: radial-gradient(circle at 11px 0, var(--tone) 0 9px, #1B2559 9px 11.5px, transparent 11.5px) 0 0 / 22px 11px repeat-x;
}
.home-page .stall-icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: 0.3rem; border: 2.5px solid #1B2559; border-radius: 50%; background: #FFF4D6; color: #1B2559; }
.home-page .stall-icon svg { width: 2.4rem; height: 2.4rem; }
.home-page .stall-name { font: 800 1.3rem/1.3 var(--font-display); }
.home-page .stall-desc { color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.home-page .stall-go { margin-top: auto; padding-top: 0.6rem; font-weight: 700; border-bottom: 2.5px solid var(--tone); }
.home-page .stall-soon { margin-top: auto; padding: 0.15rem 0.7rem 0.05rem; border: 2px solid currentColor; border-radius: 6px; font-size: 0.85rem; font-weight: 700; }
.home-page .stall a:hover { transform: translateY(-5px); box-shadow: 0 11px 0 #1B2559; }
.home-page .stall a:hover .stall-roof { transform: rotateX(-24deg) translateY(-3px); }
.home-page .stall a:active { transform: translateY(3px); box-shadow: 0 3px 0 #1B2559; }
.home-page .stall a:focus-visible { outline: 3px solid #D6246E; outline-offset: 6px; }
@media (prefers-color-scheme: dark) {
  .home-page .stall a, .home-page .stall-roof, .home-page .stall-icon { border-color: #071816; }
  .home-page .stall a { box-shadow: 0 6px 0 #071816; }
  .home-page .stall a:hover { box-shadow: 0 11px 0 #071816; }
}
@media (max-width: 33.99rem) {           /* phones: icon beside the text */
  .home-page .stall a { display: grid; grid-template-columns: 3.6rem 1fr; column-gap: 1rem; align-items: start; padding-top: 2.6rem; }
  .home-page .stall-icon { grid-row: 1 / span 3; margin: 0; }
  .home-page .stall-roof { left: -6px; right: -6px; }
  .home-page .stall-go, .home-page .stall-soon { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .home-page .stall a, .home-page .stall-roof { transition: none; } }

/* ---------- 4 · How it works: golden river ---------- */
.home-page .how {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --text: var(--d-ink);
  --muted: color-mix(in srgb, var(--d-ink) 86%, transparent);
  color: var(--d-ink);
  background: linear-gradient(var(--d-b1) 0 22%, var(--d-b2) 22% 44%, var(--d-b3) 44% 100%);   /* hard stops: flat bands, not a fade */
  padding: 3.5rem 0 calc(2.5rem + 170px);
}
.home-page .how .wrap { position: relative; z-index: 1; }
.home-page .dk-sunc { position: absolute; z-index: -1; left: 50%; top: 2.5rem; width: min(46vw, 300px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--d-sun); opacity: 0.85; }
.home-page .dk-river { position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 170px; max-width: none; }
.home-page .dk-city { fill: var(--d-city); }
.home-page .dk-water { fill: var(--d-water); }
.home-page .dk-glint { fill: var(--d-b3); }
.home-page .how h2 {
  display: inline-block;
  margin: 0;
  padding: 0.12em 0.7em 0.05em;
  border: 2px solid var(--d-plate);
  background: var(--d-card);
  color: var(--d-plate);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.7rem);
}
.home-page .steps li {
  padding: 0.9rem 1.1rem 0.8rem;
  border: 3px solid var(--d-line);
  background: var(--d-card);
  box-shadow: 5px 5px 0 var(--d-line);
}
.home-page .step-num { border: 2.5px solid var(--d-line); background: var(--d-card); color: var(--d-num); }
.home-page .steps li:hover .step-num { box-shadow: none; }

/* ---------- 5 · Footer: the same global footer as every page (site.css), plus room for the lane ---------- */
.home-page .site-footer { padding-bottom: calc(var(--lane) + 5.5rem); }   /* room for the lane and the Cloud Kitchen card */

/* ---------- Floating buttons sit just above the lane ---------- */
.home-page .float-btn,
.home-page .kitchen-float,
.home-page .toast { bottom: calc(var(--lane) + 0.6rem + env(safe-area-inset-bottom, 0px)); }
.home-page .top-float { bottom: calc(var(--lane) + 0.6rem + 4.4rem + env(safe-area-inset-bottom, 0px)); }   /* stacked above WhatsApp */

/* ---------- The cycle lane ---------- */
.home-page[data-s="0"] { --far: var(--l0-far); --mid: var(--l0-mid); --gr: var(--l0-gr); --dash: var(--l0-dash); }
.home-page[data-s="1"] { --far: var(--l1-far); --mid: var(--l1-mid); --gr: var(--l1-gr); --dash: var(--l1-dash); }
.home-page[data-s="2"] { --far: var(--l2-far); --mid: var(--l2-mid); --gr: var(--l2-gr); --dash: var(--l2-dash); }
.home-page[data-s="3"] { --far: var(--l3-far); --mid: var(--l3-mid); --gr: var(--l3-gr); --dash: var(--l3-dash); }
.home-page[data-s="4"] { --far: var(--l4-far); --mid: var(--l4-mid); --gr: var(--l4-gr); --dash: var(--l4-dash); }
.dk-lane {
  position: fixed;
  z-index: 15;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--lane) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  pointer-events: none;
  --safe: env(safe-area-inset-bottom, 0px);
  --road: 12px;
}
.dk-l { position: absolute; left: 0; right: 0; transition: background-color 0.6s; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: auto 100%; mask-size: auto 100%; }
.dk-far { bottom: calc(var(--road) + var(--safe)); height: 40px; background-color: var(--far, #E8B868); }
.dk-mid { bottom: calc(var(--road) + var(--safe)); height: 28px; background-color: var(--mid, #4A2A12); opacity: 0.85; }
.dk-road { bottom: 0; height: calc(var(--road) + var(--safe)); background-color: var(--gr, #4A2A12); }
.dk-dash { bottom: calc(5px + var(--safe)); height: 2px; background: repeating-linear-gradient(90deg, var(--dash, #F6EBCB) 0 16px, transparent 16px 32px); }
.dk-bike { position: absolute; left: 0; bottom: calc(var(--road) - 4px + var(--safe)); max-width: none; }
.dk-bike .o { stroke: var(--bk); transition: stroke 0.6s; }
.dk-bike .cg { opacity: 0; transition: opacity 0.4s; }
.dk-sign { position: absolute; left: 0; bottom: calc(var(--road) + var(--safe)); width: 20px; }
.dk-sign i { display: block; width: 3px; height: 22px; margin: 0 auto; background: var(--bk); }
.dk-sign b { position: absolute; left: 0; top: -17px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #1B2559; background: #FFB300; color: #1B2559; font: 800 12px/17px var(--font-display); text-align: center; }
.home-page.intro-on .dk-lane { visibility: hidden; }

@media (min-width: 47.5rem) {
  .home-page { --lane: 92px; }
  .home-page .jobs { padding-bottom: 7rem; }
  .home-page .how { padding-bottom: calc(2.5rem + 210px); }
  .home-page .dk-river { height: 210px; }
  .dk-lane { --road: 18px; }
  .dk-far { height: 62px; }
  .dk-mid { height: 42px; }
  .dk-dash { bottom: calc(8px + var(--safe)); height: 3px; }
  .dk-sign { width: 26px; }
  .dk-sign i { height: 36px; }
  .dk-sign b { top: -22px; width: 26px; height: 26px; font-size: 15px; line-height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-sign { display: none; }
}