@font-face { font-family: "Zing Rust"; src: url("zing-rust.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("nunito-sans.woff2") format("woff2"); font-weight: 400 900; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* until Nunito Sans arrives, a local face with the same width and height: the text does not jump when it swaps */
@font-face { font-family: "Nunito Fallback"; src: local("Arial"), local("Arimo"), local("Liberation Sans"); size-adjust: 99%; ascent-override: 102%; descent-override: 35.5%; line-gap-override: 0%; }
:root {
  --bg: #0b0b0c;
  --bg-2: #111113;
  --card: #151517;
  --card-2: #1b1b1e;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --ink: #f6f3ea;
  --text: rgba(246, 243, 234, 0.74);
  --muted: rgba(246, 243, 234, 0.5);
  --gold: #ffc629;
  --gold-2: #ffb800;
  --gold-weak: rgba(255, 198, 41, 0.14);
  --k: #111111;
  --green: #3ddc84;
  --blue: #78c8ff;
  --display: "Zing Rust", "Nunito Sans", "Nunito Fallback", system-ui, sans-serif;
  --sans: "Nunito Sans", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-lg: 20px;
  --r-md: 12px;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.display { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

/* Buttons: hard offset shadow on hover */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 15px; border: 2px solid transparent; font-weight: 800; font-size: 16px; text-decoration: none; transition: transform .15s, box-shadow .15s, background .2s, border-color .2s; }
.btn:hover { transform: translate(-2px, -2px); }
.btn-gold { background: var(--gold); color: var(--k); border-color: var(--gold); }
.btn-gold:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); box-shadow: 4px 4px 0 var(--gold); }
.btn-ink { background: var(--k); color: var(--gold); border-color: var(--k); }
.btn-ink:hover { box-shadow: 4px 4px 0 #fff; }
.btn svg { width: 18px; height: 18px; }

/* Status + nav */
.status { border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text); }
.status .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 9px; padding-bottom: 9px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: ping 2s infinite; flex: none; }
.dot.off { background: var(--muted); animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
.langs { display: flex; gap: 4px; }
.langs a { text-decoration: none; padding: 2px 7px; border-radius: 6px; color: var(--muted); font-weight: 700; }
.langs a[aria-current] { color: var(--ink); background: var(--card-2); }
nav.top { position: sticky; top: 0; z-index: 20; background: rgba(11, 11, 12, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
nav.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 36px; height: 36px; padding: 4px; border-radius: 12px; background: var(--gold); }
.brand span { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 25px; letter-spacing: .01em; color: var(--gold); }
.links { display: flex; gap: 26px; font-size: 15px; font-weight: 700; }
.links a { text-decoration: none; color: var(--text); }
.links a:hover { color: var(--ink); }
nav.top .btn { padding: 9px 18px; font-size: 15px; }

/* Hero */
.hero { position: relative; padding: 72px 0 40px; overflow: hidden; overflow: clip; }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(255, 198, 41, 0.16), transparent 70%); pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center; position: relative; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text); background: rgba(14, 14, 14, .88); }
.pill b { background: var(--gold); color: var(--k); border-radius: 999px; padding: 2px 9px; font-size: 12px; letter-spacing: .04em; }
h1.display { font-size: clamp(60px, 9vw, 120px); margin: 22px 0 22px; }
h1 .gold { color: var(--gold); display: block; }
.lead { font-size: 20px; color: var(--text); max-width: 34ch; margin: 0 0 30px; }
.lead strong { color: var(--ink); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); font-weight: 600; }
.trust li { display: flex; align-items: center; gap: 7px; }
.trust svg { width: 16px; height: 16px; color: var(--gold); }

.mapcard { position: relative; background: linear-gradient(180deg, #141416, #0f0f11); border: 2px solid var(--gold); border-radius: 20px; padding: 18px; box-shadow: 12px 12px 0 rgba(255, 198, 41, 0.22), 0 40px 80px rgba(0, 0, 0, 0.55); }
.mapcard header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mapcard header .live { font-size: 13px; letter-spacing: .02em; text-transform: none; }
.mapcard svg.map { width: 100%; height: auto; display: block; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #16232a, #0e161a 70%); }
.island { fill: #2b3034; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.2; }
.canal { fill: none; stroke: #0e161a; stroke-width: 8; stroke-linecap: round; }
.route { fill: none; stroke: rgba(255, 198, 41, 0.35); stroke-width: 2; stroke-dasharray: 3 6; }
.route.boat { stroke: rgba(120, 200, 255, 0.45); }
.lbl { font: 800 12.5px var(--sans); letter-spacing: .12em; fill: rgba(246, 243, 234, 0.55); text-transform: uppercase; }
.lbl.small { font-size: 10px; fill: rgba(246, 243, 234, 0.42); }
.shop { fill: var(--gold); }
.boat-dot { fill: var(--blue); filter: drop-shadow(0 0 6px rgba(120, 200, 255, 0.9)); }
.toast { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(24, 24, 27, 0.94); backdrop-filter: blur(10px); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); font-size: 13px; color: var(--text); }
.toast b { display: block; color: var(--ink); font-size: 14px; }
.toast .ic { width: 34px; height: 34px; border-radius: 12px; background: var(--gold); color: var(--k); display: grid; place-items: center; flex: none; }
.toast .ic svg { width: 18px; height: 18px; }
.toast.t1 { left: -34px; bottom: 40px; animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.mapcard .stamp { position: absolute; right: -18px; top: 64px; transform: rotate(8deg); background: var(--gold); color: var(--k); border: 2px solid var(--k); border-radius: 12px; padding: 8px 12px; box-shadow: 4px 4px 0 var(--k); font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 1; }
.mapcard .stamp b { display: block; font-size: 28px; }
.mapcard .stamp small { font: 800 10.5px var(--sans); letter-spacing: .06em; }
.caption { font-size: 12px; color: var(--muted); padding: 10px 6px 0; }

/* Marquee */
@keyframes run { to { transform: translateX(-50%); } }

/* Stats */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.stats dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.stats div { padding: 34px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column-reverse; }
.stats div:first-child { border-left: 0; }
.stats dt { font-size: 14px; color: var(--muted); font-weight: 700; margin-top: 6px; }
.stats dd { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 58px; line-height: 1; color: var(--ink); }
.stats dd small { color: var(--gold); font-size: .6em; }
.stats dd small.u { font-family: var(--sans); font-style: normal; font-size: .5em; }
.stats div.hot { background: var(--gold); }
.stats div.hot dd, .stats div.hot dd small { color: var(--k); }
.stats div.hot dt { color: rgba(17, 17, 17, 0.72); }

/* Press */
.press { padding: 64px 0 72px; border-bottom: 1px solid var(--line); }
.press-row { display: flex; align-items: center; gap: 18px 36px; flex-wrap: wrap; margin-bottom: 30px; }
.press h2.eyebrow { margin: 0; flex: none; }
.outlets { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 30px; list-style: none; margin: 0; padding: 0; }
.outlets li { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 23px; letter-spacing: -0.01em; color: rgba(246, 243, 234, 0.62); white-space: nowrap; }
.outlets a { text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--gold); }
.outlets a:hover { color: var(--gold); }
.press-grid { display: grid; grid-template-columns: 1.15fr 1.15fr .8fr; gap: 16px; }
.quote { margin: 0; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.quote blockquote { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.25; font-style: italic; color: var(--ink); }
.quote blockquote::before { content: "“"; display: block; font-family: var(--display); font-style: normal; font-size: 72px; line-height: .6; color: var(--gold); margin-bottom: 8px; }
.quote figcaption { font-size: 14px; color: var(--muted); }
.quote figcaption b { color: var(--ink); }
.quote figcaption a { color: var(--gold); }
.growth { background: var(--gold); color: var(--k); border: 2px solid var(--k); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: 8px 8px 0 rgba(255, 198, 41, 0.25); }
.growth h3 { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.growth table { width: 100%; border-collapse: collapse; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; }
.growth th { text-align: left; font-size: 26px; padding: 0 0 6px; }
.growth th:last-child, .growth td:last-child { text-align: right; }
.growth td { font-size: 30px; line-height: 1.05; padding: 4px 0; border-top: 1.5px solid rgba(17, 17, 17, 0.18); }
.growth .k { font-family: var(--sans); font-style: normal; font-weight: 800; font-size: 13px; text-transform: none; color: rgba(17, 17, 17, 0.7); text-align: center; }
.growth tbody th.k { border-top: 1.5px solid rgba(17, 17, 17, 0.18); padding: 4px 0; }
.growth p { margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: rgba(17, 17, 17, 0.72); }
.nv { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.nv .tag { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #111; background: #76b900; border-radius: 999px; padding: 4px 10px; }
.nv b { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 1; }
.nv p { margin: 0; color: var(--text); font-size: 15px; }

section { padding: 96px 0; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 44px; }
h2.display { font-size: clamp(42px, 5.6vw, 72px); margin: 12px 0 0; }
.head p { max-width: 42ch; color: var(--text); margin: 0; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; }
.tile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.tile:hover { border-color: var(--gold); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--gold); }
.tile h3 { font-size: 23px; margin: 16px 0 8px; line-height: 1.2; }
.tile p { margin: 0; color: var(--text); font-size: 16px; }
.tile .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--gold-weak); color: var(--gold); display: grid; place-items: center; }
.tile .ico svg { width: 24px; height: 24px; }
.t-food { grid-column: span 4; grid-row: span 2; background: radial-gradient(circle at 85% 110%, rgba(255, 198, 41, 0.22), transparent 55%), var(--card); }
.t-food h3 { font-size: 34px; }
.t-food p { max-width: 46ch; }
.t-ship, .t-hotel, .t-book, .t-errand, .t-grocery { grid-column: span 2; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips span { border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.03); }
.tile .more { display: inline-flex; margin-top: 18px; font-weight: 800; color: var(--gold); text-decoration: none; font-size: 15px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li { border-top: 2px solid var(--line-2); padding-top: 22px; }
.steps li::before { counter-increment: s; content: "0" counter(s); font-family: var(--display); font-style: italic; font-weight: 900; font-size: 40px; color: var(--gold); }
.steps h3 { font-size: 22px; margin: 8px 0 6px; }
.steps p { margin: 0; color: var(--text); }

/* Manifesto: the yellow band */
.manifesto { position: relative; overflow: hidden; overflow: clip; background: var(--gold); color: var(--k); border-block: 2px solid var(--k); }
.manifesto .wrap { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.manifesto .eyebrow { color: var(--k); }
.manifesto h2.display { font-size: clamp(56px, 8.4vw, 124px); margin: 16px 0 26px; }
.manifesto h2 .out { display: block; color: transparent; -webkit-text-stroke: 2px var(--k); }
.manifesto p { font-size: 20px; font-weight: 600; max-width: 40ch; margin: 0 0 30px; color: #1d1b16; }
.photo { position: relative; justify-self: end; width: 100%; max-width: 400px; margin: 0; }
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border: 2px solid var(--k); border-radius: 20px; box-shadow: 10px 10px 0 var(--k); }
.sticker { position: absolute; background: #fff; color: var(--k); border: 2px solid var(--k); border-radius: 12px; padding: 10px 14px; box-shadow: 4px 4px 0 var(--k); font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 1; }
.sticker b { display: block; font-size: 32px; }
.sticker small { font: 800 11px var(--sans); letter-spacing: .06em; }
.sticker.s1 { left: -46px; top: 40px; transform: rotate(-7deg); }
.sticker.s2 { right: -12px; top: 44%; transform: rotate(6deg); background: var(--k); color: var(--gold); }
.sticker.s3 { left: -30px; bottom: 54px; transform: rotate(4deg); }

/* Coverage */
.cover { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.areas li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.areas b { display: block; font-size: 17px; }
.areas small { color: var(--muted); font-size: 13px; }
.areas .ok { font-size: 12px; font-weight: 800; color: var(--green); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.areas .ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.addr { background: linear-gradient(160deg, #1d1a10, #141416 60%); border: 2px solid var(--gold); border-radius: var(--r-lg); padding: 30px; box-shadow: 8px 8px 0 rgba(255, 198, 41, 0.22); }
.addr h3 { margin: 10px 0 10px; font-size: 24px; }
.addr p { color: var(--text); margin: 0 0 14px; }
.addr code { display: inline-block; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 34px; color: var(--gold); letter-spacing: .02em; margin: 6px 0 14px; }

/* Partners marquee */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 48px; width: max-content; animation: slide 48s linear infinite; }
.track ul { display: flex; gap: 48px; list-style: none; margin: 0; padding: 0; }
.track li { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 34px; text-transform: uppercase; color: rgba(246, 243, 234, 0.42); white-space: nowrap; }
.track li:nth-child(3n+1) { color: var(--ink); }
.track li:nth-child(4n+2) { color: var(--gold); }
@keyframes slide { to { transform: translateX(-50%); } }
.partners-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }

/* Platform: four apps */
.apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.app:hover { border-color: var(--gold); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--gold); }
.app h3 { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1; margin: 18px 0 8px; }
.app p { margin: 0; font-size: 15px; color: var(--text); }
.app .who { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-top: auto; padding-top: 16px; }
.mock { background: #f6f3ea; color: var(--k); border-radius: 12px; padding: 12px; font-size: 12px; min-height: 168px; display: grid; gap: 8px; align-content: start; }
.mock .row { background: #fff; border-radius: 12px; padding: 9px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
.mock b { font-weight: 800; }
.mock .chip { flex: none; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: var(--gold); white-space: nowrap; }
.mock .chip.g { background: #d3f5df; color: #0d6b35; }
.mock .chip.b { background: #dbe7ff; color: #1b4fb0; }
.mock .bar { height: 6px; border-radius: 6px; background: #e4ded0; overflow: hidden; }
.mock .bar i { display: block; height: 100%; width: 72%; background: var(--k); border-radius: 6px; animation: grow 3s ease-in-out infinite alternate; }
@keyframes grow { from { width: 38%; } to { width: 86%; } }
.mock .msteps { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; font-weight: 700; color: #696459; }
.mock .msteps .on { color: var(--k); }
.mock .accept { background: var(--k); color: var(--gold); border-radius: 6px; text-align: center; padding: 8px; font-weight: 800; }
.stack { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 26px; color: var(--muted); font-size: 14px; }
.stack span { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 6px; background: var(--card-2); color: var(--text); border: 1px solid var(--line); }

/* Roadmap */
.road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.col { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 26px; background: var(--card); }
.col h3 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 34px; line-height: 1; white-space: nowrap; }
.col h3 small { font: 800 12px var(--sans); letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; border: 1.5px solid currentColor; }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.col li { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.col li b { display: block; font-size: 16px; color: var(--ink); }
.col li span { font-size: 14px; color: var(--muted); }
.col.now { background: var(--gold); border: 2px solid var(--k); color: var(--k); box-shadow: 8px 8px 0 rgba(255, 198, 41, 0.25); }
.col.now li { background: rgba(255, 255, 255, 0.6); border-color: rgba(17, 17, 17, 0.12); }
.col.now li b { color: var(--k); }
.col.now li span { color: rgba(17, 17, 17, 0.7); }
.col.soon h3 { color: var(--gold); }
.col.next { border-style: dashed; }
.col.next h3 { color: var(--blue); }

/* Join the flock */
.join { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { position: relative; border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; min-height: 380px; border: 2px solid var(--line-2); background: var(--card); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--gold); }
.card .eyebrow { margin-bottom: 14px; }
.card h3 { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 40px; line-height: .95; margin: 0 0 16px; }
.card ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; font-size: 15px; color: var(--text); }
.card li { display: flex; gap: 10px; }
.card li svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card.c1 { background: var(--gold); color: var(--k); border-color: var(--k); }
.card.c1:hover { box-shadow: 8px 8px 0 var(--ink); }
.card.c1 .eyebrow, .card.c1 ul, .card.c1 li svg { color: var(--k); }
.card.c3 { background: linear-gradient(160deg, #1d1a10, #141416 60%); border-color: var(--gold); }

/* FAQ */
.faqs { display: grid; grid-template-columns: .75fr 1.25fr; gap: 56px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-weight: 800; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 28px; font-weight: 400; color: var(--gold); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq-a { color: var(--text); padding: 0 0 22px; max-width: 64ch; }
.faq-a a { color: var(--gold); }
.updated { color: var(--muted); font-size: 14px; margin-top: 18px; }

/* Final CTA */
.final { position: relative; overflow: hidden; overflow: clip; text-align: center; padding: 110px 0; background: radial-gradient(closest-side, rgba(255, 198, 41, 0.18), transparent 75%); }
.final .wrap { position: relative; }
.final img.mascot { width: 128px; margin: 0 auto 10px; transform: rotate(-6deg); }
.final h2 { font-size: clamp(48px, 7.4vw, 104px); margin: 0 0 16px; }
.final h2 .out { display: block; color: transparent; -webkit-text-stroke: 2px var(--gold); }
.final p { color: var(--text); margin: 0 auto 30px; max-width: 46ch; }
.final .ctas { justify-content: center; }
.stores { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.stores a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 16px; text-decoration: none; font-weight: 800; font-size: 14px; }
.stores svg { width: 20px; height: 20px; }

footer { border-top: 1px solid var(--line); padding: 54px 0 40px; font-size: 14px; color: var(--muted); }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
footer h3 { color: var(--ink); font-size: 14px; margin: 0 0 12px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }
footer address { font-style: normal; line-height: 1.7; }
.legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }


@media (max-width: 1120px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-grid { grid-template-columns: 1fr 1fr; }
  .nv { grid-column: span 2; }
}
@media (max-width: 980px) {
  .links { display: none; }
  .hero .wrap, .cover, .faqs, .manifesto .wrap { grid-template-columns: 1fr; }
  .hero { padding-top: 44px; }
  .toast.t1 { left: 8px; bottom: 36px; }
  .mapcard .stamp { right: 10px; top: 52px; }
  .stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(3) { border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bento { grid-template-columns: 1fr 1fr; }
  .t-food { grid-column: span 2; grid-row: auto; }
  .t-ship, .t-hotel, .t-book, .t-errand, .t-grocery { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .head { flex-direction: column; align-items: start; }
  .photo { justify-self: center; max-width: 360px; margin: 10px auto 0; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .road, .join, .press-grid { grid-template-columns: 1fr; }
  .nv { grid-column: auto; }
  .card { min-height: 0; }
  footer .cols { grid-template-columns: 1fr 1fr; }
  section { padding: 72px 0; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .status .hours { display: none; }
  .lead { font-size: 18px; }
  .stats dd { font-size: 44px; }
  .stats div { padding: 24px 16px; }
  .bento, .areas, .apps { grid-template-columns: 1fr; }
  .t-food, .t-ship, .t-hotel, .t-book, .t-errand, .t-grocery { grid-column: auto; }
  .tile { padding: 22px; }
  .toast { font-size: 12px; padding: 9px 11px; }
  .toast .ic { width: 28px; height: 28px; }
  .toast.t1 { position: relative; left: 0; bottom: 0; margin-top: 12px; animation: none; box-shadow: none; }
  .mapcard .stamp { right: 8px; top: 46px; padding: 6px 10px; }
  .mapcard .stamp b { font-size: 22px; }
  .manifesto h2 .out, .final h2 .out { -webkit-text-stroke-width: 1.5px; }
  .manifesto p { font-size: 18px; }
  .sticker { padding: 8px 11px; }
  .sticker b { font-size: 25px; }
  .sticker.s1 { left: -8px; }
  .sticker.s2 { right: -8px; }
  .sticker.s3 { left: -6px; }
  .col h3 { font-size: 30px; }
  .outlets { gap: 8px 20px; }
  .outlets li { font-size: 19px; }
  .quote blockquote { font-size: 21px; }
  .growth td { font-size: 26px; }
  .card h3 { font-size: 34px; }
  .track li { font-size: 26px; }
  footer .cols { grid-template-columns: 1fr; }
  .stores { flex-direction: column; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Roadmap with fewer columns: the build drops columns that have no current items */
.road.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.road.cols-1 { grid-template-columns: 1fr; }
.road.cols-1 .col.now ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .road.cols-2, .road.cols-1 .col.now ul { grid-template-columns: 1fr; }
}
footer .legal a { color: inherit; }
footer .legal .links { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ===================================================================
   Venezia: the real city as the stage (map data © OpenStreetMap)
   =================================================================== */
:root {
  --laguna: #0a0d10;
  --intonaco: #f3eee2;
  --niz: "Nunito Sans", "Nunito Fallback", system-ui, sans-serif;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero: Venice at night, seen from above */
.hero { padding: 0; min-height: min(100svh, 960px); display: flex; align-items: center; background: var(--laguna); }
.hero::before { display: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 13, 16, .97) 0%, rgba(10, 13, 16, .88) 28%, rgba(10, 13, 16, .3) 54%, rgba(10, 13, 16, 0) 70%),
    linear-gradient(0deg, rgba(10, 13, 16, .95) 0%, rgba(10, 13, 16, 0) 20%),
    linear-gradient(180deg, rgba(10, 13, 16, .7) 0%, rgba(10, 13, 16, 0) 14%); }
.city { position: absolute; inset: 0; z-index: 0; }
.city-base, .city-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the moving layer gets its own surface: runners never repaint the map */
.city-map, .viaggio-map { will-change: transform; }
.hero .wrap { display: block; position: relative; z-index: 2; width: 100%; padding-top: 72px; padding-bottom: 96px; }
.hero-copy { max-width: 600px; }
.hero .stamp { position: absolute; right: 28px; bottom: 64px; transform: rotate(-6deg); background: var(--gold); color: var(--k); border: 2px solid var(--k); border-radius: 12px; padding: 9px 14px; box-shadow: 5px 5px 0 var(--k); font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 1; }
.hero .stamp b { display: block; font-size: 34px; }
.hero .stamp small { font: 800 11px var(--sans); letter-spacing: .06em; }
.credit { position: absolute; right: 14px; bottom: 8px; z-index: 2; margin: 0; font-size: 12px; color: rgba(246, 243, 234, 0.66); }

/* shared map drawing */
.laguna-fondo { fill: var(--laguna); }
.vaporetto-linea { fill: none; stroke: var(--blue); stroke-opacity: .55; stroke-width: 3; stroke-dasharray: 1 11; stroke-linecap: round; }
.vaporetto { fill: var(--blue); }
.via-traccia { fill: none; stroke: #ffc629; stroke-opacity: .3; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.via-traccia.forte { stroke-opacity: .35; stroke-width: 9; }
.via-luce { fill: none; stroke: #fff2bf; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80 920; animation-name: scia; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes scia { from { stroke-dashoffset: 1080; } to { stroke-dashoffset: 80; } }
.runner circle { fill: #fffbe8; }
.runner .alone { fill: #ffc629; opacity: .8; }
.niz-fondo { fill: var(--intonaco); }
.niz-bordo { fill: none; stroke: #111; stroke-width: 2.5; }
.niz text { font-family: var(--niz); font-stretch: 75%; font-weight: 800; fill: #111; text-anchor: middle; dominant-baseline: central; letter-spacing: .05em; }
.niz.piccolo .niz-bordo { stroke-width: 1.8; }
.callout rect { fill: rgba(20, 20, 23, .94); stroke: rgba(255, 255, 255, .18); stroke-width: 2; }
.callout .callout-ic { fill: var(--gold); }
.callout .callout-walk { fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.callout .callout-filo { stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 4 6; }
.callout text { font-family: var(--sans); }
.callout .t1 { font-size: 21px; font-weight: 800; fill: var(--ink); }
.callout .t2 { font-size: 20px; font-weight: 600; fill: rgba(246, 243, 234, .7); }
.rialto { fill: var(--gold); stroke: #111; stroke-width: 3; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* how it works: the walk from Rialto to the Misericordia */
.viaggio { position: relative; padding: 0; background: var(--laguna); border-block: 1px solid var(--line); }
.viaggio-stage { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; overflow: clip; }
.viaggio.scrolly { height: 320vh; }
.viaggio.scrolly .viaggio-stage { position: sticky; top: 0; height: 100vh; min-height: 0; }
.viaggio-mappe { position: absolute; inset: 0; }
.viaggio-mappe svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viaggio-ui { position: relative; z-index: 2; width: 100%; padding-block: 40px; }
.viaggio-card { max-width: 480px; background: rgba(14, 14, 16, .95); border: 1px solid var(--line-2); border-radius: 20px; padding: 28px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.viaggio-card .head { margin-bottom: 10px; display: block; }
.viaggio-card h2.display { font-size: clamp(40px, 4.4vw, 62px); }
.viaggio-intro { color: var(--text); margin: 0 0 16px; font-size: 16px; }
.contatori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.contatori div { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column-reverse; }
.contatori dt { font-size: 12px; color: var(--muted); font-weight: 700; }
.contatori dd { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 38px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.viaggio .steps { grid-template-columns: 1fr; gap: 0; }
.viaggio .steps li { border-top: 1px solid var(--line); padding: 10px 0 8px; display: grid; grid-template-columns: 46px 1fr; column-gap: 8px; transition: opacity .35s; }
.viaggio .steps li::before { font-size: 30px; grid-row: span 2; line-height: 1.1; }
.viaggio .steps h3 { margin: 0; font-size: 18px; }
.viaggio .steps p { font-size: 14px; }
.viaggio.scrolly .steps li { opacity: .35; }
.viaggio.scrolly .steps li.attivo { opacity: 1; }
.fonte { font-size: 11px; color: var(--muted); margin: 12px 0 0; }
.via-viva { fill: none; stroke: #ffc629; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ponte circle { fill: var(--laguna); stroke: #fff6d6; stroke-width: 3.5; transition: fill .3s; }
.ponte.passato circle { fill: #ffc629; stroke: #111; }
.pin { fill: #fff; stroke: #111; stroke-width: 4; }
.via-runner circle { fill: #fff; }
.via-runner .alone { fill: #ffc629; opacity: .7; }

/* where we deliver: the gondola ferro */
.ferro { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; margin: 0 0 34px; padding: 18px 30px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(110deg, rgba(255, 198, 41, .1), rgba(255, 198, 41, 0) 55%); }
.ferro-svg { width: 100%; height: auto; display: block; }
.ferro-blade, .ferro-tooth { fill: #ece6d6; }
.ferro-tooth.back { fill: var(--gold); }
.ferro-lbl text { font-family: var(--niz); font-stretch: 75%; font-weight: 800; font-size: 17px; fill: var(--gold); dominant-baseline: central; text-transform: uppercase; letter-spacing: .05em; }
.ferro figcaption { font-size: 20px; font-weight: 600; color: var(--ink); max-width: 44ch; line-height: 1.45; }

/* nizioleti: the sestieri written like the street signs */
.areas b { display: inline-block; font-family: var(--niz); font-stretch: 75%; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: #111; background: var(--intonaco); border: 2px solid #111; box-shadow: 0 0 0 3px var(--intonaco), 0 6px 14px rgba(0, 0, 0, .4); padding: 1px 10px; margin: 3px 3px 7px; }

/* photo inside a Venetian gothic arch */
.photo img { clip-path: url(#arco); border: 0; border-radius: 0; box-shadow: none; position: relative; }
.arco-ombra { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 5; transform: translate(12px, 12px); background: var(--k); clip-path: url(#arco); }

/* Palazzo Ducale: the lozenges of the facade on the yellow band */
.manifesto { background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cpath d='M30 2 58 20 30 38 2 20z' fill='%23000' fill-opacity='.055'/%3E%3Cpath d='M30 9 47 20 30 31 13 20z' fill='%23fff' fill-opacity='.12'/%3E%3C/svg%3E"); background-size: 60px 40px; }

/* the lagoon at dusk before the last call to action: bricole, a gondola, reflections */
.laguna { background: var(--bg); line-height: 0; overflow: hidden; }
.laguna svg { width: 100%; height: 200px; display: block; }
.laguna-scena path, .laguna-scena circle { fill: #050506; }
.bricola .corda { fill: none !important; stroke: var(--gold); stroke-width: 3; }
.gondoliere, .remo { fill: none !important; stroke: #050506; stroke-width: 4; stroke-linecap: round; }
.remo { stroke-width: 3; }
.riflesso { opacity: .28; }
.luccichio { fill: none; stroke: #ffc629; stroke-width: 2; stroke-linecap: round; opacity: .15; animation: luccica 3.4s ease-in-out infinite; }
@keyframes luccica { 0%, 100% { opacity: .1; } 50% { opacity: .6; } }
.gondola { animation: voga 46s linear -16s infinite; }
.gondola-corpo { animation: beccheggio 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 80%; }
@keyframes voga { from { transform: translateX(-320px); } to { transform: translateX(1250px); } }
@keyframes beccheggio { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2px) rotate(-.6deg); } }

@media (max-width: 980px) {
  .hero { min-height: 0; display: block; }
  .hero .wrap { padding-top: 330px; padding-bottom: 70px; }
  .hero::after { background: linear-gradient(180deg, rgba(10, 13, 16, .35) 0%, rgba(10, 13, 16, .2) 22%, rgba(10, 13, 16, .92) 44%, rgba(10, 13, 16, .98) 100%); }
  .city { bottom: auto; height: 470px; }
  .hero .stamp { right: 16px; top: 250px; bottom: auto; }
  .viaggio-stage { display: block; min-height: 0; }
  .viaggio-mappe { position: relative; height: 62svh; min-height: 360px; }
  .viaggio-ui { margin-top: -70px; padding-top: 0; padding-bottom: 40px; }
  .viaggio-card { max-width: none; }
  .ferro { grid-template-columns: 1fr; padding: 18px 20px; }
  .ferro-svg { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hero .wrap { padding-top: 300px; }
  .city { height: 420px; }
  .hero .stamp { top: 220px; padding: 6px 10px; }
  .hero .stamp b { font-size: 24px; }
  .contatori dd { font-size: 30px; }
  .viaggio-card { padding: 22px 18px; }
  .ferro figcaption { font-size: 17px; }
  .laguna svg { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .via-luce { animation: none; stroke-dasharray: none; stroke-opacity: .5; }
  .callout, .gondola, .gondola-corpo, .luccichio { animation: none; }
}
.ferro-fregio { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.areas li > span:first-child small { display: block; }

/* ===================================================================
   Design review, 8 November 2026
   =================================================================== */
/* 15. skip link, 2. keyboard focus that shows on every background */
.salta { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--gold); color: #111; padding: 10px 16px; border-radius: 12px; font-weight: 800; text-decoration: none; }
.salta:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #111; }

/* 6. the few labels that inform, written like nizioleti */
.niz-tag { display: inline-block; font-family: var(--niz); font-stretch: 75%; font-weight: 800; font-size: 15px; line-height: 1; text-transform: uppercase; letter-spacing: .06em; color: #111; background: var(--intonaco); border: 2px solid #111; box-shadow: 0 0 0 3px var(--intonaco); padding: 6px 10px 5px; margin: 3px 3px 12px; }

/* 3. steps of the walk: readable when not active, active one marked */
.viaggio.scrolly .steps li { opacity: .62; }
.viaggio.scrolly .steps li:not(.attivo)::before { color: rgba(246, 243, 234, .55); }
.viaggio .steps li.attivo { opacity: 1; box-shadow: inset 3px 0 0 var(--gold); padding-left: 12px; }

/* 8. services: an open list with the brand's 3D illustrations, no boxes */
.bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0 40px; }
.bento .tile, .bento .tile:hover { grid-column: auto; grid-row: auto; background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 26px 0 34px; box-shadow: none; transform: none; overflow: visible; }
.bento .t-food { grid-column: span 3; display: grid; grid-template-columns: 96px 1fr; column-gap: 24px; align-items: start; }
.bento .t-food > *:not(.ico3d) { grid-column: 2; }
.bento .t-food .ico3d { grid-row: span 4; width: 96px; height: 96px; }
.bento .tile h3 { margin-top: 10px; }
.bento .t-food h3 { margin-top: 0; }
.ico3d { width: 72px; height: 72px; object-fit: contain; }

/* 7. ferro next to the title of "where we deliver" */
.head-ferro { align-items: center; }
.head-ferro h2 + p { margin-top: 16px; }
.head .ferro { margin: 0; padding: 0; border: 0; background: none; grid-template-columns: 250px 1fr; gap: 22px; max-width: 580px; }
.head .ferro figcaption { font-size: 16px; color: var(--text); }

/* 9. the city animations stop while off screen */
.city.fermo * { animation-play-state: paused !important; }

@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .t-food { grid-column: span 2; }
  .head .ferro { grid-template-columns: 200px 1fr; max-width: none; }
  /* 1. phone: title and button in the first screen */
  .city { height: 330px; }
  .hero .wrap { padding-top: 270px; padding-bottom: 56px; }
  .hero .stamp { top: 160px; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento .t-food { grid-column: auto; grid-template-columns: 1fr; }
  .bento .t-food > *:not(.ico3d) { grid-column: auto; }
  .bento .t-food .ico3d { grid-row: auto; width: 80px; height: 80px; }
  .city { height: 250px; }
  .hero .wrap { padding-top: 200px; }
  .hero .stamp { top: 92px; right: 12px; }
  .hero .pill { font-size: 13px; }
  .hero h1.display { font-size: 50px; margin: 14px 0 14px; }
  .hero .lead { font-size: 17px; margin-bottom: 20px; }
  .hero .trust { margin-top: 18px; }
  /* 7. the four apps scroll sideways instead of stacking */
  .apps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 10px; }
  .app { flex: 0 0 84%; scroll-snap-align: start; }
  .head .ferro { grid-template-columns: 150px 1fr; gap: 14px; }
  .head .ferro figcaption { font-size: 15px; }
}

/* ===================================================================
   Toward 9.5, 9 November 2026
   =================================================================== */
/* phone: the order button stays at hand after the hero */
.barra-ordina { display: none; }
@media (max-width: 980px) {
  .barra-ordina { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(11, 11, 12, .96); border-top: 1px solid var(--line-2); transform: translateY(110%); transition: transform .25s ease; }
  .barra-ordina.vista { transform: none; }
  .barra-ordina .btn-gold { flex: 1; justify-content: center; }
  .barra-ordina .btn-ghost { padding-inline: 16px; }
  .barra-ordina svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .barra-ordina { transition: none; } }

/* the public Google rating, first in the hero's trust row */
.trust .voto { gap: 6px; color: var(--text); }
.trust .voto a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.trust .voto a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.trust .voto svg { color: var(--gold); width: 17px; height: 17px; }
.trust .voto span { color: var(--muted); }

/* ===================================================================
   Phone check, 11 November 2026
   =================================================================== */
@media (max-width: 600px) {
  /* the hero map is only 250px tall: the sestieri signs are enlarged around their
     centre (about 12px letters instead of 7), the small islands and the Runner
     bubble, unreadable at this size, step aside, and the stamp moves below Castello */
  .city-map .niz-in { transform: scale(1.9); transform-box: fill-box; transform-origin: 50% 50%; }
  .city-map .niz.piccolo, .city-map .callout { display: none; }
  .hero .stamp { top: 130px; }
  /* the gondola ferro on its own line, wide enough to read the sestieri */
  .head .ferro { grid-template-columns: 1fr; gap: 12px; }
  .head .ferro .ferro-svg { max-width: 290px; margin: 0 auto; }
  /* the photo's black shadow falls to the right: the whole figure moves back by half of it */
  .photo { max-width: 320px; left: -6px; }
}
@media (max-width: 360px) {
  /* 320px phones: logo and "Ordina ora" on one line without touching */
  nav.top .wrap { gap: 10px; }
  .brand { gap: 8px; }
  .brand span { font-size: 22px; }
  nav.top .btn { padding: 9px 12px; white-space: nowrap; }
}