/* RideFresh coming-soon page.
   One accent (the teal of the logo) on white, a deep navy for the dark
   parts, and gold only where the page speaks of Sri Lanka or the VIP
   places. Colour moves in three places only: the glow behind the
   headline, the headline's second line, and the edge of the VIP card. */

:root {
  --ink: #0e1b21;
  --text: #24333a;
  --muted: #5f6e76;
  --line: #e2e9ec;
  --paper: #ffffff;
  --soft: #f5f8f9;
  --navy: #0b1f27;

  --teal: #17798f;
  --teal-dark: #115e70;
  --aqua: #19bfd3;
  --tint: #e9f6f9;
  --gold: #d9a441;
  --green: #178a47;

  /* Sri Lanka's flag, for the small flag mark and one thin ribbon. */
  --flag-green: #00534e;
  --flag-orange: #eb7400;
  --flag-maroon: #8d153a;
  --flag-gold: #f7b718;

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sinhala: "Noto Sans Sinhala", "Iskoola Pota", sans-serif;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(14, 27, 33, 0.04), 0 12px 32px -16px rgba(14, 27, 33, 0.18);
}

@property --turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { width: 1.25em; height: 1.25em; flex: none; }

[lang="si"] { font-family: var(--sinhala); }

h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 6.6vw, 5rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.12; }
h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }

.section { padding: 104px 0; }
.section.soft { background: var(--soft); }

.head { max-width: 720px; margin-bottom: 52px; }

.eyebrow {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow [lang="si"] { letter-spacing: 0; font-size: 0.9375rem; }
.eyebrow.gold { color: var(--gold); }

.sub { margin-top: 16px; font-size: 1.125rem; color: var(--muted); max-width: 62ch; }

.can-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.can-reveal .reveal.in { opacity: 1; transform: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .place:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
}

/* ---------------- Buttons ---------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--teal);
  color: #fff;
  font: 700 1rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(23, 121, 143, 0.9);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.button svg { transition: transform 0.18s; }
.button:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(23, 121, 143, 0.95); }
.button:hover svg { transform: translateX(3px); }
.button.ghost { background: transparent; color: var(--ink); border-color: #cfd9dd; box-shadow: none; }
.button.ghost:hover { background: var(--soft); border-color: var(--ink); }
.button.small { padding: 11px 18px; font-size: 0.9375rem; border-radius: 10px; box-shadow: none; }
.button.wide { width: 100%; padding: 17px 24px; }
.button[disabled] { opacity: 0.6; cursor: default; transform: none; }

.flag { display: inline-flex; height: 13px; border-radius: 2px; overflow: hidden; outline: 1.5px solid var(--flag-gold); }
.flag i { width: 4px; background: var(--flag-green); }
.flag i:nth-child(2) { background: var(--flag-orange); }
.flag i:nth-child(3) { width: 13px; background: var(--flag-maroon); }

/* ---------------- Coming soon bar ---------------- */

.announce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: 10px 24px;
  background: var(--navy);
  color: #c9d6db;
  font-size: 0.875rem;
}
.announce b { color: #fff; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem; }
.announce [lang="si"] { color: var(--gold); font-weight: 600; }
.announce a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.announce a svg { width: 1em; height: 1em; }

.live {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #37d39a;
  box-shadow: 0 0 0 0 rgba(55, 211, 154, 0.6);
  animation: live 2s ease-out infinite;
}
@keyframes live { to { box-shadow: 0 0 0 9px rgba(55, 211, 154, 0); } }

/* ---------------- Top bar ---------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.top.scrolled { border-color: var(--line); box-shadow: 0 8px 24px -20px rgba(14, 27, 33, 0.5); }

.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
  height: 72px;
}

.brand img { width: 158px; }

.top nav { display: flex; align-items: center; gap: 30px; }
.top nav a:not(.button) {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: color 0.15s;
}
.top nav a:not(.button):hover { color: var(--teal); }

/* ---------------- Hero ---------------- */

.hero { position: relative; padding: 64px 0 0; overflow: hidden; }

/* The one soft, slow light behind the headline. */
.glow { position: absolute; inset: 0; pointer-events: none; }
.glow i { position: absolute; border-radius: 50%; filter: blur(90px); }
.glow i:nth-child(1) {
  right: -6%; top: -8%;
  width: 46%; aspect-ratio: 1;
  background: conic-gradient(from var(--turn), #19bfd3, #6f7cff, #9ee7f0, #19bfd3);
  opacity: 0.34;
  animation: turn 18s linear infinite;
}
.glow i:nth-child(2) {
  left: -10%; top: 30%;
  width: 28%; aspect-ratio: 1;
  background: #19bfd3;
  opacity: 0.12;
}
@keyframes turn { to { --turn: 360deg; } }

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 48px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}

h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #17798f, #19bfd3, #6f7cff, #19bfd3, #17798f);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: slide 10s linear infinite;
}
@keyframes slide { to { background-position: -300% 0; } }

.h1-si { margin-top: 14px; font: 700 clamp(1.15rem, 2.2vw, 1.5rem)/1.5 var(--sinhala); color: var(--teal-dark); }

.strap { margin-top: 22px; font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

.lead { margin-top: 12px; max-width: 54ch; font-size: 1.125rem; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.vip-line {
  display: inline-flex;
  margin-top: 22px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fbf3e2;
  color: #8a5a00;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* ---- The app screen ---- */

.hero-art { position: relative; display: grid; place-items: center; padding: 12px 0 0; }

.phone {
  width: min(312px, 100%);
  padding: 16px 16px 20px;
  border: 9px solid #101c22;
  border-radius: 42px;
  background: #fff;
  box-shadow: 0 40px 70px -34px rgba(14, 27, 33, 0.6), 0 0 0 1px rgba(14, 27, 33, 0.08);
}

.phone-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 14px; }
.phone-bar img { width: 96px; }
.online { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; color: var(--green); }
.online i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.phone-card { padding: 20px 16px 18px; border: 1px solid var(--line); border-radius: 18px; text-align: center; }
.phone-state { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--teal); }
.phone-time { margin-top: 4px; font-size: 3.1rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }

.phone-progress { height: 7px; margin-top: 12px; border-radius: 99px; background: #e6edf0; overflow: hidden; }
.phone-progress i { display: block; width: 36%; height: 100%; border-radius: 99px; background: var(--teal); animation: fill 7s ease-in-out infinite alternate; }
@keyframes fill { to { width: 58%; } }

.phone-steps { display: flex; justify-content: space-between; margin-top: 16px; }
.phone-steps span {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid #d5dee2;
  border-radius: 50%;
  color: #94a3aa;
}
.phone-steps svg { width: 18px; height: 18px; }
.phone-steps .past { border-color: transparent; background: #e2f4ea; color: var(--green); }
.phone-steps .now { border-color: transparent; background: var(--teal); color: #fff; box-shadow: 0 0 0 4px rgba(23, 121, 143, 0.16); }

.phone-mode { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; padding: 4px; border-radius: 12px; background: var(--soft); font-size: 0.875rem; text-align: center; }
.phone-mode > * { padding: 9px 0; border-radius: 9px; font-weight: 700; color: var(--muted); }
.phone-mode b { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(14, 27, 33, 0.14); }

.phone-btn { margin-top: 10px; padding: 14px; border-radius: 14px; text-align: center; font-weight: 800; letter-spacing: 0.06em; font-size: 0.9375rem; }
.phone-btn.start { background: #dfe6e9; color: #8a989f; }
.phone-btn.stop { background: #c62828; color: #fff; }

.float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  animation: bob 6s ease-in-out infinite;
}
.float svg { width: 26px; height: 26px; color: var(--teal); }
.float b { display: block; font-size: 0.875rem; color: var(--ink); line-height: 1.3; }
.float span { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.3; }
.f1 { right: calc(50% + 118px); top: 30%; }
.f2 { left: calc(50% + 104px); bottom: 24%; animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

.pulse { width: 12px; height: 12px; margin: 0 6px 0 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(23, 138, 71, 0.5); animation: ring 2s ease-out infinite; }
@keyframes ring { to { box-shadow: 0 0 0 12px rgba(23, 138, 71, 0); } }

.facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 72px;
  border-top: 1px solid var(--line);
}
.facts li { display: flex; align-items: center; gap: 14px; padding: 26px 20px 30px 0; }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.facts svg { width: 28px; height: 28px; color: var(--teal); }
.facts b { display: block; font-size: 0.9375rem; color: var(--ink); line-height: 1.35; }
.facts span { display: block; font-size: 0.875rem; color: var(--muted); line-height: 1.4; }

/* ---------------- Cards ---------------- */

.icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--teal);
}
.icon svg { width: 24px; height: 24px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.cards article {
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.cards article:hover { transform: translateY(-4px); border-color: #c9dfe5; box-shadow: var(--shadow); }
.cards h3 { margin-top: 22px; }
.cards p { margin-top: 10px; color: var(--muted); font-size: 1rem; }

/* ---------------- Steps ---------------- */

.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; counter-reset: step; }

.steps li {
  position: relative;
  padding: 22px 18px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.steps b { position: absolute; right: 16px; top: 18px; font-size: 0.8125rem; font-weight: 700; color: #a9b6bc; letter-spacing: 0.04em; }
.steps h3 { margin-top: 18px; font-size: 1.0625rem; }
.steps p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }

.note { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 0.9375rem; color: var(--muted); }
.note svg { color: var(--teal); }

/* ---------------- Places ---------------- */

.place-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 270px;
  gap: 16px;
}

.place {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  isolation: isolate;
}
.place.tall { grid-row: span 2; }

.place img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.place:hover img, .place:focus img { transform: scale(1.07); }

.place-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px 22px 20px;
  background: linear-gradient(to top, rgba(7, 18, 23, 0.86), rgba(7, 18, 23, 0));
  transition: opacity 0.3s;
}
.place-name h3 { color: #fff; font-size: 1.375rem; }
.place-name p { margin-top: 3px; font-size: 0.9375rem; color: #d7e2e6; }
.place-name [lang="si"] { font-weight: 600; color: #f3cf85; }

/* What a RideFresh point would mean there: slides up on hover, on
   keyboard focus and on a tap. */
.place-over {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px 22px;
  background: linear-gradient(170deg, rgba(11, 31, 39, 0.55), rgba(11, 31, 39, 0.94) 55%);
  backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s, transform 0.35s;
}
.place:hover .place-over, .place:focus .place-over { opacity: 1; transform: none; }
.place:hover .place-name, .place:focus .place-name { opacity: 0; }

.place-over .pin { width: 30px; height: 30px; margin-bottom: auto; color: var(--aqua); }
.place-over h3 { color: #fff; font-size: 1.5rem; }
.place-over p { margin-top: 8px; color: #dbe6ea; font-size: 0.9688rem; line-height: 1.55; }

.tag {
  align-self: flex-start;
  margin-top: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.duo > div { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); }
.duo p { margin-top: 8px; color: var(--muted); font-size: 1rem; }

/* ---------------- Made in Sri Lanka ---------------- */

.lanka {
  position: relative;
  padding: 116px 0 124px;
  color: #fff;
  background:
    linear-gradient(100deg, rgba(8, 24, 30, 0.96) 34%, rgba(8, 24, 30, 0.74)),
    url("assets/places/lanka.jpg") center / cover;
}

.lanka-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 72px; }

.ape { font: 800 clamp(3.6rem, 7.6vw, 6.2rem)/1.25 var(--sinhala); color: var(--gold); white-space: nowrap; }

.pledge { margin-top: 18px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.pledge p { font: 700 clamp(1.15rem, 2.1vw, 1.5rem)/1.65 var(--sinhala); color: #fff; }
.pledge span { display: block; margin-top: 10px; font-size: 0.9688rem; color: #b9c8ce; }

.lanka h2 { color: #fff; max-width: 17ch; }
.lanka-lead { margin-top: 18px; max-width: 58ch; font-size: 1.125rem; color: #c6d3d8; }

.lanka-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.lanka-list li { padding: 18px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(6px); }
.lanka-list b { display: block; font-size: 1rem; }
.lanka-list span { display: block; margin-top: 4px; font-size: 0.9063rem; line-height: 1.45; color: #b9c8ce; }

.ribbon { position: absolute; left: 0; right: 0; bottom: 0; display: flex; height: 5px; }
.ribbon i { flex: 1; background: var(--flag-green); }
.ribbon i:nth-child(2) { background: var(--flag-orange); }
.ribbon i:nth-child(3) { flex: 4; background: var(--flag-maroon); }

/* ---------------- Own one ---------------- */

.own-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 64px; }
.own-si { margin-top: 16px; font: 700 clamp(1.15rem, 2.1vw, 1.45rem)/1.6 var(--sinhala); color: var(--teal-dark); }
.own .sub [lang="si"] { display: block; margin-top: 6px; font-size: 1rem; font-weight: 500; }
.own .button { margin-top: 28px; }

.own-list { display: grid; gap: 14px; }
.own-list li { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.own-list svg { width: 22px; height: 22px; margin-top: 2px; padding: 4px; border-radius: 50%; background: var(--tint); color: var(--teal); box-sizing: content-box; }
.own-list b { display: block; color: var(--ink); }
.own-list span { display: block; margin-top: 2px; font-size: 0.9688rem; color: var(--muted); }

/* ---------------- VIP ---------------- */

.vip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 40px;
  padding: 44px 48px;
  border-radius: 20px;
  background: var(--navy);
  color: #fff;
  isolation: isolate;
}

/* A line of light that travels round the card's edge. */
.vip::before {
  content: "";
  position: absolute; inset: -1.5px;
  z-index: -2;
  border-radius: 21.5px;
  background: conic-gradient(from var(--turn), transparent 0 62%, #d9a441 78%, #19bfd3 90%, transparent);
  animation: turn 7s linear infinite;
}
.vip::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px; background: var(--navy); }

.vip h2 { color: #fff; max-width: 18ch; }
.vip-status { margin-top: 14px; font-size: 1.0625rem; color: #b9c8ce; }
.vip-status strong { color: var(--gold); font-weight: 700; }

.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.slots i { aspect-ratio: 1; border: 1.5px solid #34505b; border-radius: 10px; transition: background 0.4s, border-color 0.4s; }
.slots i.taken { background: var(--gold); border-color: var(--gold); }

/* ---------------- Pre-order ---------------- */

.order { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 64px; margin-top: 80px; }

.ticks { display: grid; gap: 12px; margin-top: 28px; }
.ticks li { display: flex; align-items: center; gap: 12px; color: var(--text); }
.ticks svg { color: var(--teal); }

form, .done {
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(14, 27, 33, 0.04), 0 30px 60px -36px rgba(14, 27, 33, 0.3);
}

form { display: grid; gap: 20px; }

label { display: grid; gap: 8px; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); }

input, select, textarea {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #cdd8dc;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover, select:hover, textarea:hover { border-color: #9fb2b9; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(25, 191, 211, 0.2); }
textarea { resize: vertical; }
input::placeholder { color: #a2aeb3; }

.row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 16px; }
.row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.error { padding: 13px 15px; border-radius: 10px; background: #fdecec; color: #a12626; font-weight: 600; font-size: 0.9688rem; }
.small-print { text-align: center; font-size: 0.875rem; color: var(--muted); }

.done { align-self: start; }
.done h3 { font-size: 2rem; letter-spacing: -0.03em; }
.done p { margin-top: 14px; color: var(--muted); }
.done-badge {
  display: inline-block;
  margin: 0 0 16px !important;
  padding: 7px 13px;
  border-radius: 99px;
  background: var(--tint);
  color: var(--teal-dark) !important;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.done-badge.is-vip { background: var(--gold); color: #3a2a00 !important; }

/* ---------------- Footer ---------------- */

footer { border-top: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: 0.9375rem; }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 44px 0 32px; }
.foot img { width: 150px; margin-bottom: 10px; }
.foot-made { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }

.foot-low { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 20px 0 36px; border-top: 1px solid var(--line); font-size: 0.875rem; }
.foot-low summary { cursor: pointer; font-weight: 600; }
.foot-low ul { margin-top: 10px; display: grid; gap: 4px; }
.foot-low a { color: var(--teal-dark); }

/* ---------------- Smaller screens ---------------- */

@media (max-width: 1040px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top nav { gap: 20px; }
  .top nav a:nth-child(4) { display: none; }
}

@media (max-width: 880px) {
  .section { padding: 72px 0; }
  .head { margin-bottom: 36px; }
  .hero { padding-top: 36px; }
  .hero-inner, .lanka-inner, .own-inner, .order, .vip { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { padding-bottom: 8px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .facts li { padding: 20px 12px 20px 0; }
  .facts li + li { padding-left: 16px; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cards, .duo, .lanka-list { grid-template-columns: 1fr; }
  .place-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .place.tall { grid-row: auto; }
  .lanka { padding: 80px 0 88px; }
  .vip { padding: 34px 26px; }
  .order { margin-top: 56px; }
  .top nav a:not(.button) { display: none; }
  .announce-more { display: none; }
}

@media (max-width: 520px) {
  .wrap, .top-inner { width: calc(100% - 32px); }
  .steps { grid-template-columns: 1fr 1fr; }
  form, .done { padding: 24px 18px; }
  .row, .row.two { grid-template-columns: 1fr; }
  .float { display: none; }
  .ape { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow i, h1 em, .live, .pulse, .float, .phone-progress i, .vip::before { animation: none; }
  .button, .button svg, .cards article, .place img, .place-over, .slots i { transition: none; }
}

/* The tower stands low in its photo: keep it in a tall card. */
.place img.low { object-position: 50% 78%; }

/* The cards beside the phone need room on both sides of it. */
@media (max-width: 1180px) { .float { display: none; } }

.float b, .float span { white-space: nowrap; }

/* ---------------- Innovation ---------------- */

.story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 64px; }

.story-logo {
  padding: 40px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
}

.story .sub + .sub { margin-top: 14px; }

.journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 64px;
  border-top: 2px solid var(--ink);
}
.journey li { position: relative; padding: 26px 24px 0 0; }
.journey li + li { padding-left: 24px; border-left: 1px solid var(--line); }
/* A mark on the line for each stage of the work. */
.journey li::before {
  content: "";
  position: absolute;
  left: 0; top: -7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px var(--soft);
}
.journey li + li::before { left: 24px; }
.journey b { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--teal); }
.journey h3 { margin-top: 8px; }
.journey p { margin-top: 8px; font-size: 0.9688rem; color: var(--muted); }

.tagline { margin-top: 6px; font-size: 1.0625rem; font-weight: 600; font-style: italic; color: var(--teal-dark); }

.phone-hint { margin-top: 12px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }

.foot img { width: 230px; }

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; gap: 36px; }
  .journey { grid-template-columns: 1fr 1fr; margin-top: 44px; border-top: 0; }
  .journey li, .journey li + li { padding: 22px 16px 22px 0; border-left: 0; border-top: 2px solid var(--ink); }
  .journey li::before, .journey li + li::before { left: 0; }
}

@media (max-width: 520px) {
  .journey { grid-template-columns: 1fr; }
}

.story-logo img { width: min(440px, 100%); margin-inline: auto; }
.foot img { width: 190px; }

/* The full logo, with the helmet, in the menu bar. */
.top-inner { height: 88px; }
.brand img { width: auto; height: 68px; }
html { scroll-padding-top: 100px; }
@media (max-width: 520px) {
  .top-inner { height: 76px; }
  .brand img { height: 56px; }
}

/* ---------------- Special thanks ---------------- */

.thanks { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: center; gap: 72px; }

.thanks-photo { margin: 0; text-align: center; }

.thanks-photo img {
  width: min(340px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;
  /* A fine ring of the brand's colours around the portrait. */
  padding: 6px;
  background: linear-gradient(135deg, var(--teal), var(--aqua) 55%, var(--gold));
  box-shadow: 0 30px 50px -30px rgba(14, 27, 33, 0.55);
}

.thanks-photo figcaption { margin-top: 22px; }
.thanks-photo b { display: block; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); }
.thanks-photo span { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--muted); }

.thanks-note {
  margin: 28px 0 0;
  padding: 24px 26px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fbf6ea;
}
.thanks-note p { font-size: 1.125rem; line-height: 1.6; font-weight: 500; color: var(--ink); }
.thanks-note footer { margin-top: 12px; font-size: 0.9375rem; font-weight: 700; color: #8a5a00; }

.thanks-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.thanks-list li { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.thanks-list b { display: block; color: var(--ink); }
.thanks-list span { display: block; margin-top: 4px; font-size: 0.9063rem; line-height: 1.45; color: var(--muted); }

@media (max-width: 880px) {
  .thanks { grid-template-columns: 1fr; gap: 36px; }
  .thanks-list { grid-template-columns: 1fr; }
  .thanks-photo img { width: min(260px, 80%); }
}

.thanks-note footer { border: 0; background: none; }

/* ---------------- "අපේ දේ" word art, and the Made in Sri Lanka seal ---------------- */

.wordart { position: relative; padding-right: 8%; }

/* A small line above, held between two rules. */
.wa-top {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 700 clamp(0.95rem, 1.5vw, 1.15rem)/1.4 var(--sinhala);
  color: #f3cf85;
  white-space: nowrap;
}
.wa-top i { height: 1px; flex: 1; max-width: 70px; background: linear-gradient(90deg, transparent, #d9a441); }
.wa-top i:last-child { transform: scaleX(-1); }

/* The words themselves: gold that catches the light, standing off the
   page on a dark edge. */
.ape {
  position: relative;
  margin-top: 4px;
  font: 800 clamp(4.2rem, 8.8vw, 7.2rem)/1.22 var(--sinhala);
  white-space: nowrap;
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%) 220% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #fff1c1 0%, #f7cb57 34%, #d9a441 58%, #9c6a16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 2px 0 #7a5410)
    drop-shadow(0 4px 0 #4f3608)
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5));
  animation: gleam 5.500s ease-in-out infinite;
}
@keyframes gleam {
  0%, 55% { background-position: 220% 0, 0 0; }
  100% { background-position: -120% 0, 0 0; }
}

.wa-swoosh { display: block; width: min(420px, 92%); height: 26px; margin-top: -6px; }
.wa-swoosh path { fill: #d9a441; }

/* A banner with cut ends, in the flag's maroon. */
.wa-ribbon { margin-top: 16px; }
.wa-ribbon span {
  display: inline-block;
  padding: 9px 34px;
  background: var(--flag-maroon);
  color: #fff;
  font: 700 clamp(1rem, 1.8vw, 1.3rem)/1.5 var(--sinhala);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

.wa-seal {
  position: absolute;
  right: -2%;
  top: -34px;
  width: clamp(92px, 11vw, 132px);
  height: auto;
  aspect-ratio: 1;
  transform: rotate(12deg);
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.45));
}

.lanka .pledge { margin-top: 26px; }

.chip { padding-left: 6px; }
.chip-seal { width: 34px; height: 34px; }

.foot-seal { width: 56px; height: 56px; }

@media (max-width: 880px) {
  .wa-seal { top: -18px; right: 0; }
}

@media (max-width: 520px) {
  .ape { white-space: nowrap; font-size: clamp(3.2rem, 17vw, 4.4rem); }
  .wordart { padding-right: 0; }
  .wa-seal { position: static; display: block; margin: 18px 0 0; transform: none; width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .ape { animation: none; }
}

/* Word art: the whole of both words inside their own box, and the seal
   beside the banner instead of over the words. */
.wordart { padding-right: 0; }
.ape { width: max-content; max-width: 100%; font-size: clamp(3.6rem, 7vw, 5.8rem); }
.chip { padding-left: 12px; }
.wa-seal { top: auto; right: 0; bottom: -14px; width: clamp(96px, 10vw, 128px); }

.hero-seal {
  position: absolute;
  right: 4%;
  top: 0;
  width: 112px;
  height: 112px;
  transform: rotate(10deg);
  filter: drop-shadow(0 12px 18px rgba(14, 27, 33, 0.25));
}
@media (max-width: 1180px) { .hero-seal { right: 0; width: 92px; height: 92px; } }
@media (max-width: 520px) {
  .hero-seal { width: 76px; height: 76px; }
  .wa-seal { position: static; }
}
/* ---------------- A real road behind the headline ----------------
   The photo fills the right of the section and fades to white where
   the words are, so they stay easy to read. On a narrow screen the
   words sit on a white veil over the whole photo. */

.hero {
  background:
    linear-gradient(to top, #fff 0%, #fff 14%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(90deg, #fff 0%, #fff 33%, rgba(255, 255, 255, 0.9) 43%, rgba(255, 255, 255, 0.38) 55%, rgba(255, 255, 255, 0.06) 72%, rgba(255, 255, 255, 0) 100%),
    url("assets/places/hero.jpg") right center / cover no-repeat;
}

.glow { display: none; }

.facts { margin-top: 84px; }

@media (max-width: 880px) {
  .hero {
    background:
      linear-gradient(to top, #fff 0%, #fff 30%, rgba(255, 255, 255, 0.9) 100%),
      url("assets/places/hero.jpg") center / cover no-repeat;
  }
}
@media (min-width: 881px) { .hero .lead { max-width: 500px; } }

/* The badge is the larger mark now: give it room. */
.hero-seal { width: 132px; height: 132px; right: 1%; top: -8px; transform: rotate(8deg); }
.wa-seal { width: clamp(112px, 11vw, 146px); bottom: -22px; transform: rotate(8deg); }
.foot-seal { width: 72px; height: 72px; }
@media (max-width: 1180px) { .hero-seal { width: 104px; height: 104px; } }
@media (max-width: 520px) { .hero-seal { width: 84px; height: 84px; } }

/* ---------------- Riders on a Sri Lankan street behind the headline ----------------
   The photo is as tall as the section and sits to the right, moved so
   that the rider is seen between the words and the phone. It fades to
   white under the words. */

.hero {
  background:
    linear-gradient(to top, #fff 0%, #fff 13%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(90deg, #fff 0%, #fff 31%, rgba(255, 255, 255, 0.93) 39%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 62%),
    url("assets/places/hero.jpg") calc(100% + 150px) 50% / auto 100% no-repeat,
    #fff;
}

/* Where the end of the headline reaches the photo it keeps a soft
   white edge, so it reads on any part of the picture. */
.hero h1 { text-shadow: 0 0 22px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.9); }
.hero h1 em { text-shadow: none; }

@media (max-width: 1180px) {
  .hero {
    background:
      linear-gradient(to top, #fff 0%, #fff 13%, rgba(255, 255, 255, 0) 30%),
      linear-gradient(90deg, #fff 0%, #fff 36%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0.35) 64%, rgba(255, 255, 255, 0.1) 100%),
      url("assets/places/hero.jpg") right 50% / auto 100% no-repeat,
      #fff;
  }
}

@media (max-width: 880px) {
  .hero {
    background:
      linear-gradient(to top, #fff 0%, #fff 34%, rgba(255, 255, 255, 0.88) 100%),
      url("assets/places/hero.jpg") 60% top / cover no-repeat;
  }
}

/* ---------------- Riders on the street: placed so the rider is seen ---------------- */

.hero {
  background:
    linear-gradient(to top, #fff 0%, #fff 12%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(90deg, #fff 0%, #fff 36%, rgba(255, 255, 255, 0.95) 42%, rgba(255, 255, 255, 0.35) 49%, rgba(255, 255, 255, 0) 57%),
    url("assets/places/hero.jpg") calc(50% + 82px) 45% / auto 118% no-repeat,
    #fff;
}
@media (min-width: 881px) { .hero .lead { max-width: 460px; } }

/* ---------------- The machine ---------------- */

.machine { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 72px; }

.machine-art {
  margin: 0;
  padding: 28px 20px 18px;
  border-radius: 24px;
  background: radial-gradient(120% 90% at 50% 0%, #eef7f9, #f5f8f9 60%, #fff);
  border: 1px solid var(--line);
  text-align: center;
}
.machine-art svg { width: min(330px, 100%); height: auto; }
.machine-art figcaption { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }

.machine-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.machine-list li { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.machine-list svg { width: 20px; height: 20px; margin-top: 2px; padding: 4px; border-radius: 50%; background: var(--tint); color: var(--teal); box-sizing: content-box; }
.machine-list b { display: block; color: var(--ink); }
.machine-list span { display: block; margin-top: 3px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }

.build { margin-top: 72px; }
.build h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.build-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.build-grid figure { margin: 0; }
.build-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--soft); }
.build-grid figcaption { margin-top: 10px; font-size: 0.9063rem; line-height: 1.45; color: var(--muted); }

@media (max-width: 1180px) { .top nav a:nth-child(2) { display: none; } }

@media (max-width: 880px) {
  .machine { grid-template-columns: 1fr; gap: 36px; }
  .machine-list { grid-template-columns: 1fr; }
  .build-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------- The machine (CAD design) with the rider's phone ---------------- */

.machine { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; }

.machine-art { padding: 22px 20px 18px; background: #fff; }

.machine-stage { position: relative; }

.machine-cad { width: min(400px, 78%); height: auto; margin-right: auto; border-radius: 14px; }

/* The phone stands in front of the machine, lower right. */
.phone-mini {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: 190px;
  padding: 11px 11px 13px;
  border-width: 6px;
  border-radius: 28px;
  text-align: left;
}
.phone-mini .phone-bar { padding: 2px 1px 9px; }
.phone-mini .phone-bar img { width: 62px; }
.phone-mini .online { font-size: 0.5625rem; gap: 4px; }
.phone-mini .online i { width: 5px; height: 5px; }
.phone-mini .phone-card { padding: 12px 10px; border-radius: 12px; }
.phone-mini .phone-state { font-size: 1.125rem; color: var(--green); }
.phone-mini .phone-hint { margin-top: 2px; font-size: 0.625rem; }
.phone-mini .phone-mode { margin-top: 9px; padding: 3px; border-radius: 9px; font-size: 0.625rem; }
.phone-mini .phone-mode > * { padding: 6px 0; border-radius: 7px; }
.phone-mini .phone-btn { margin-top: 7px; padding: 9px; border-radius: 10px; font-size: 0.625rem; }
.phone-btn.go { background: var(--green); color: #fff; }

/* Bluetooth between the two. */
.machine-link {
  position: absolute;
  right: 150px;
  bottom: 44%;
  width: 78px;
  height: 78px;
  color: var(--aqua);
  animation: link 2.400s ease-in-out infinite;
}
@keyframes link { 50% { opacity: 0.35; } }

@media (max-width: 880px) {
  .machine { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .phone-mini { width: 150px; }
  .machine-link { right: 112px; width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .machine-link { animation: none; } }

/* The link mark is small; the older rule for the drawing made it huge. */
.machine-art .machine-link { width: 64px; height: 64px; right: 196px; bottom: 6%; transform: rotate(-90deg); }
@media (max-width: 520px) { .machine-art .machine-link { width: 48px; height: 48px; right: 154px; } }

@media (min-width: 521px) { .phone-mini { right: -8px; bottom: 2%; width: 178px; } .machine-art .machine-link { right: 176px; } }

/* ============================================================
   The phone
   ============================================================
   One phone in real proportions (about 9 : 19.5), used beside the
   headline and beside the machine. Everything inside is sized in em,
   so the whole phone scales with its font size and nothing is cut. */

.device {
  font-size: 15px;
  width: 19.200em;
  aspect-ratio: 9 / 19.300;
  padding: 0.600em;
  border-radius: 3.100em;
  background: linear-gradient(145deg, #2a363d, #0c151a 40%, #1c272d);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 2.600em 4.400em -2.200em rgba(14, 27, 33, 0.65),
    0 0.600em 1.200em -0.600em rgba(14, 27, 33, 0.35);
  text-align: left;
  line-height: 1.3;
  flex: none;
}

.d-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 2.550em;
  background: #fff;
  overflow: hidden;
}

/* The top line of the phone itself. */
.d-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.850em 1.500em 0.300em;
  color: #0e1b21;
  font-size: 0.780em;
  font-weight: 700;
}
.d-status svg { width: 4.100em; height: 1.250em; }
.d-island { position: absolute; left: 50%; top: 0.700em; width: 5.600em; height: 1.550em; margin-left: -2.800em; border-radius: 1em; background: #0c151a; }

.d-appbar { display: flex; align-items: center; justify-content: space-between; padding: 0.900em 1.150em 0.800em; border-bottom: 1px solid #edf1f3; }
.d-appbar img { width: 6.800em; }
.d-conn { display: inline-flex; align-items: center; gap: 0.400em; font-size: 0.700em; font-weight: 700; color: #178a47; }
.d-conn i { width: 0.600em; height: 0.600em; border-radius: 50%; background: #178a47; }

.d-body { flex: 1; display: flex; flex-direction: column; padding: 1em 1em 0.600em; background: #fbfcfc; min-height: 0; }

.d-card { padding: 1.300em 1em 1.100em; border: 1px solid #e2e9ec; border-radius: 1.150em; background: #fff; text-align: center; box-shadow: 0 0.600em 1.200em -1em rgba(14, 27, 33, 0.3); }
.d-state { font-size: 1.180em; font-weight: 800; letter-spacing: -0.020em; color: #17798f; }
.d-time { margin-top: 0.050em; font-size: 3.300em; line-height: 1.1; font-weight: 700; letter-spacing: -0.030em; color: #0e1b21; font-variant-numeric: tabular-nums; }
.d-ok { display: block; width: 3.600em; height: 3.600em; margin: 0.500em auto 0.200em; color: #178a47; }
.device-mini .d-state { color: #178a47; font-size: 1.500em; }

.d-progress { height: 0.500em; margin-top: 0.700em; border-radius: 99px; background: #e6edf0; overflow: hidden; }
.d-progress i { display: block; width: 38%; height: 100%; border-radius: 99px; background: #17798f; animation: fill 7s ease-in-out infinite alternate; }

/* The steps of the clean, as dots: done, now, to come. */
.d-dots { display: flex; justify-content: center; gap: 0.550em; margin-top: 1em; }
.d-dots i { width: 0.650em; height: 0.650em; border-radius: 50%; background: #d5dee2; }
.d-dots .past { background: #178a47; }
.d-dots .now { width: 1.700em; border-radius: 99px; background: #17798f; }

.d-hint { margin: 0.900em 0 0; text-align: center; font-size: 0.800em; font-weight: 600; color: #5f6e76; }

.d-seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0.900em; padding: 0.220em; border-radius: 99px; border: 1px solid #cfd9dd; font-size: 0.850em; text-align: center; }
.d-seg > * { padding: 0.600em 0; border-radius: 99px; font-weight: 700; color: #5f6e76; }
.d-seg b { background: #d6f2f7; color: #0b4453; }

.d-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.350em;
  margin-top: 0.700em;
  padding: 0.950em;
  border-radius: 99px;
  font-size: 0.920em;
  font-weight: 800;
  letter-spacing: 0.050em;
  color: #fff;
}
.d-btn svg { width: 1.350em; height: 1.350em; }
.d-btn.start { background: #178a47; }
.d-btn.start.off { background: #e3e8eb; color: #9aa7ad; }
.d-btn.stop { background: #c62828; }

.d-note { margin: auto 0 0; padding-top: 0.700em; text-align: center; font-size: 0.620em; line-height: 1.4; color: #8a989f; }

.d-home { display: block; flex: none; width: 34%; height: 0.320em; margin: 0.450em auto 0.550em; border-radius: 99px; background: #0e1b21; opacity: 0.85; }

/* Beside the machine: the same phone, smaller, standing in front of it. */
.device-mini {
  position: absolute;
  right: -6px;
  bottom: 0;
  font-size: 10.200px;
}

.machine-stage { min-height: 470px; }
.machine-art .machine-link { right: 188px; bottom: 9%; }

.hero-art { padding: 8px 0 0; }

@media (max-width: 1180px) { .device { font-size: 14px; } .device-mini { font-size: 9.800px; } }

@media (max-width: 880px) {
  .device { font-size: 14px; }
  .device-mini { font-size: 9.600px; right: 0; }
}

@media (max-width: 520px) {
  .device { font-size: 13px; }
  .device-mini { font-size: 7.800px; }
  .machine-stage { min-height: 360px; }
  .machine-cad { width: 72%; }
  .machine-art .machine-link { right: 138px; }
}

@media (prefers-reduced-motion: reduce) { .d-progress i { animation: none; } }

/* Inside the machine picture's frame an older rule sized every drawing
   for the large illustration: the phone's own icons keep their size. */
.machine-art .d-ok { width: 3.600em; height: 3.600em; }
.machine-art .d-status svg { width: 4.100em; height: 1.250em; }
.machine-art .d-btn svg { width: 1.350em; height: 1.350em; }

/* Room for the phone beside the machine, so it does not cover the logo. */
.machine-cad { width: min(360px, 68%); }
/* The street photo on narrower screens (these come last, so the wide
   screen's placement above does not apply here). */
@media (max-width: 1180px) {
  .hero {
    background:
      linear-gradient(to top, #fff 0%, #fff 12%, rgba(255, 255, 255, 0) 28%),
      linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 74%),
      url("assets/places/hero.jpg") right 45% / auto 112% no-repeat,
      #fff;
  }
}

/* One column: the words on white, the photo behind the phone only. */
@media (max-width: 880px) {
  .hero {
    background:
      linear-gradient(to bottom, #fff 0%, #fff 44%, rgba(255, 255, 255, 0.5) 56%, rgba(255, 255, 255, 0.12) 72%, rgba(255, 255, 255, 0.2) 84%, #fff 93%),
      url("assets/places/hero.jpg") 58% 82% / auto 60% no-repeat,
      #fff;
  }
}

/* Five stages, from the idea to the network. */
.journey.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.journey.five li { padding-right: 18px; }
.journey.five li + li { padding-left: 18px; }
.journey.five li + li::before { left: 18px; }
.journey.five li:first-child::before { background: var(--gold); }
.journey.five li:first-child b { color: #8a5a00; }
@media (max-width: 1040px) { .journey.five { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 880px) {
  .journey.five { grid-template-columns: 1fr 1fr; }
  .journey.five li + li { padding-left: 0; }
  .journey.five li + li::before { left: 0; }
}
@media (max-width: 520px) { .journey.five { grid-template-columns: 1fr; } }

/* ---------------- The top of the page, without a photograph ----------------
   A clean, light background with the soft moving glow, until a picture
   that tells the RideFresh story is ready. When it is, put it in
   assets/places/hero.jpg and add the class "has-photo" to the hero
   section in index.html: the rules below place it behind the phone. */

.hero, .hero:not(.has-photo) {
  background:
    radial-gradient(60% 70% at 86% 18%, rgba(25, 191, 211, 0.16), transparent 70%),
    radial-gradient(36% 46% at 4% 4%, rgba(217, 164, 65, 0.1), transparent 70%),
    linear-gradient(180deg, #fff, #f7fbfc 70%, #fff);
}
.hero:not(.has-photo) .glow { display: block; }
.hero:not(.has-photo) h1 { text-shadow: none; }

@media (min-width: 881px) {
  .hero.has-photo {
    background:
      linear-gradient(to top, #fff 0%, #fff 12%, rgba(255, 255, 255, 0) 28%),
      linear-gradient(90deg, #fff 0%, #fff 36%, rgba(255, 255, 255, 0.95) 43%, rgba(255, 255, 255, 0.35) 52%, rgba(255, 255, 255, 0) 62%),
      url("assets/places/hero.jpg") right center / cover no-repeat,
      #fff;
  }
}
@media (max-width: 880px) {
  .hero.has-photo {
    background:
      linear-gradient(to bottom, #fff 0%, #fff 44%, rgba(255, 255, 255, 0.5) 56%, rgba(255, 255, 255, 0.12) 72%, rgba(255, 255, 255, 0.2) 84%, #fff 93%),
      url("assets/places/hero.jpg") center 82% / auto 60% no-repeat,
      #fff;
  }
}

/* ============================================================
   Beside the headline: the machine with the rider's phone
   ============================================================ */

.hero-art { display: block; padding: 0; }

.hero-stage { position: relative; width: min(520px, 100%); margin-left: auto; }

/* The CAD picture has a pale backdrop of its own: it is laid on the
   page so that only the machine is seen, and its edges fade away. */
.hero-machine {
  width: 66%;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 56% at 50% 50%, #000 78%, transparent 100%);
}

.hero-device {
  position: absolute;
  right: 0;
  bottom: 3%;
  font-size: 11.400px;
}

.hero-stage .hero-link {
  position: absolute;
  right: 226px;
  bottom: 8%;
  width: 62px;
  height: 62px;
  color: var(--aqua);
  transform: rotate(-90deg);
  animation: link 2.400s ease-in-out infinite;
}

.hero-seal { right: 2%; top: 2%; width: 118px; height: 118px; }
.f1 { right: auto; left: -6%; top: 58%; }
.f2 { left: auto; right: -2%; bottom: auto; top: 22%; }

.machine-stage { min-height: 0; }
.machine-cad { width: min(330px, 80%); margin-inline: auto; }

@media (max-width: 1180px) {
  .hero-device { font-size: 10.400px; }
  .hero-stage .hero-link { right: 204px; }
  .hero-seal { width: 96px; height: 96px; }
}

@media (max-width: 880px) {
  .hero-stage { margin-inline: auto; width: min(440px, 100%); }
  .hero-art { order: 0; max-width: none; }
}

@media (max-width: 520px) {
  .hero-device { font-size: 8.600px; }
  .hero-stage .hero-link { right: 166px; width: 46px; height: 46px; }
  .hero-seal { width: 74px; height: 74px; }
}

@media (prefers-reduced-motion: reduce) { .hero-stage .hero-link { animation: none; } }

/* Beside the headline, on a wide screen: nothing covers anything. */
@media (min-width: 1181px) {
  .hero-device { font-size: 10.400px; bottom: 2%; }
  .hero-stage .hero-link { right: 210px; }
  .hero-seal { top: -18px; right: 5%; width: 108px; height: 108px; }
  .f1 { left: auto; right: calc(100% - 168px); top: 63%; }
  .f2 { right: auto; left: -9%; top: 9%; bottom: auto; }
}
/* ---------------- The machine, cut out: sharp edges on any background ---------------- */

.hero-machine {
  width: 52%;
  margin-left: 7%;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 26px 22px rgba(14, 27, 33, 0.35));
}

.machine-cad { width: min(270px, 62%); filter: drop-shadow(0 22px 20px rgba(14, 27, 33, 0.22)); border-radius: 0; }
.machine-art { padding: 40px 20px 22px; background: radial-gradient(120% 90% at 50% 0%, #eef7f9, #f5f8f9 60%, #fff); }

/* A Sri Lankan coast behind the machine: clear on the right, fading to
   white under the words. To change the picture, replace
   assets/places/hero.jpg. */
@media (min-width: 881px) {
  .hero.has-photo {
    background:
      linear-gradient(to top, #fff 0%, #fff 11%, rgba(255, 255, 255, 0) 30%),
      linear-gradient(90deg, #fff 0%, #fff 38%, rgba(255, 255, 255, 0.9) 46%, rgba(255, 255, 255, 0.35) 58%, rgba(255, 255, 255, 0.08) 74%, rgba(255, 255, 255, 0) 100%),
      url("assets/places/hero.jpg") right 40% / cover no-repeat,
      #fff;
  }
}
@media (max-width: 880px) {
  .hero.has-photo {
    background:
      linear-gradient(to bottom, #fff 0%, #fff 42%, rgba(255, 255, 255, 0.45) 54%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.1) 86%, #fff 95%),
      url("assets/places/hero.jpg") center bottom / auto 62% no-repeat,
      #fff;
  }
}
.hero.has-photo .glow { display: none; }
/* One column: the photo ends above the four facts, which stay on white. */
@media (max-width: 880px) {
  .hero.has-photo {
    background:
      linear-gradient(to bottom, #fff 0%, #fff 49%, rgba(255, 255, 255, 0.5) 56%, rgba(255, 255, 255, 0.05) 66%, rgba(255, 255, 255, 0.15) 76%, #fff 83%),
      url("assets/places/hero.jpg") center 96% / auto 50% no-repeat,
      #fff;
  }
}

/* ============================================================
   The scene behind the headline
   ============================================================
   A RideFresh point in a car park, with riders beside it. On a wide
   screen it is the background of the top of the page: its edges all
   melt into white, and it fades away under the words. On a narrow
   screen it is a picture below the words. */

.hero-photo { display: none; }
.hero-art { min-height: 520px; }
.hero-seal { top: 0; right: 0; width: 112px; height: 112px; }

@media (min-width: 881px) {
  .hero.has-photo {
    background:
      linear-gradient(to top, #fff 0%, #fff 12%, rgba(255, 255, 255, 0) 30%),
      linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 12%),
      linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 7%),
      linear-gradient(90deg, #fff 0%, #fff 39%, rgba(255, 255, 255, 0.92) 45%, rgba(255, 255, 255, 0.25) 52%, rgba(255, 255, 255, 0) 59%),
      url("assets/places/hero.jpg") right 46% / auto 90% no-repeat,
      #fff;
  }
}

@media (min-width: 881px) and (max-width: 1180px) {
  .hero.has-photo {
    background:
      linear-gradient(to top, #fff 0%, #fff 12%, rgba(255, 255, 255, 0) 30%),
      linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 12%),
      linear-gradient(90deg, #fff 0%, #fff 42%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0) 70%),
      url("assets/places/hero.jpg") 62% 46% / auto 82% no-repeat,
      #fff;
  }
  .hero-art { min-height: 440px; }
}

@media (max-width: 880px) {
  .hero.has-photo { background: linear-gradient(180deg, #fff, #f7fbfc 70%, #fff); }
  .hero-art { min-height: 0; }
  .hero-photo { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow); }
  .hero-seal { top: -22px; right: 6px; width: 86px; height: 86px; }
}

/* The phone beside the machine, further down the page. */
.machine-stage { min-height: 470px; }
.machine-cad { width: min(270px, 60%); margin-left: 4%; margin-right: auto; }
@media (max-width: 520px) { .machine-stage { min-height: 360px; } }

/* The whole scene at a wide screen: machine and both riders in view. */
@media (min-width: 1181px) {
  .hero.has-photo {
    background:
      linear-gradient(to top, #fff 0%, #fff 13%, rgba(255, 255, 255, 0) 24%),
      linear-gradient(to bottom, #fff 0%, #fff 9%, rgba(255, 255, 255, 0) 19%),
      linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 6%),
      linear-gradient(90deg, #fff 0%, #fff 43%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0.22) 53%, rgba(255, 255, 255, 0) 58%),
      url("assets/places/hero.jpg") right 44% / auto 76% no-repeat,
      #fff;
  }
  .hero-seal { top: -6px; right: -2%; width: 104px; height: 104px; }
}
/* The badge sits beside the banner, below the words, so it never
   covers a letter of "අපේ දේ". */
.wa-ribbon { display: inline-block; vertical-align: middle; margin-top: 20px; }
.wa-seal, .lanka .wa-seal {
  position: static;
  display: inline-block;
  vertical-align: middle;
  width: 112px;
  height: 112px;
  margin: 14px 0 0 20px;
  transform: rotate(8deg);
}
@media (max-width: 520px) {
  .wa-seal, .lanka .wa-seal { display: block; width: 100px; height: 100px; margin: 18px 0 0; }
}