/* Jaryan landing page — "engineered floors".
   The mall is drawn as solid isometric floors and the visitor's route glows orange through it. The page
   runs in five colour chapters (hero, why, product, rollout, contact) that fade into each other instead of
   switching at hard edges. Shared by the Persian (rtl) and English (ltr) pages through logical properties. */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Estedad"; src: url("../fonts/estedad-arabic.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Estedad"; src: url("../fonts/estedad-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kufi"; src: url("../fonts/kufi-arabic.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

/* ---------- tokens ---------- */
:root {
  --g-950: #001A12; --g-900: #00261B; --g-800: #003325; --g-700: #00412E; --g-600: #0B5A42;
  --o-500: #F9A132; --o-400: #FFB04A; --o-700: #9A5800;
  --s-50: #F7F8F8; --s-100: #F3F4F4; --s-200: #E8E9EA; --s-300: #D2D3D5;
  --ink-d: #F3F4F4;                       /* text on dark */
  --muted-d: rgba(243, 244, 244, .74);    /* about 9:1 on --g-900 */
  --ink-l: #00412E;                       /* text on light */
  --muted-l: #2F5446;                     /* 6.9:1 on --s-100 */
  --line-l: rgba(0, 65, 46, .12);
  --body: "Estedad", Tahoma, system-ui, sans-serif;
  --head: "Kufi", "Estedad", Tahoma, sans-serif;
  /* six sizes: display, heading, card title / lead (18), body (16), small (14), tiny (13) */
  --h1: clamp(2rem, 1.1rem + 3.3vw, 4rem);
  --h2: clamp(1.875rem, 1.25rem + 1.9vw, 3rem);
  --lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-tiny: .8125rem;
  --radius: 24px;
  --gap: clamp(20px, 2.5vw, 32px);
  --pad: clamp(20px, 4vw, 64px);
  --section: clamp(80px, 8vw, 120px);
  --fade: clamp(140px, 22vw, 300px);      /* how long one chapter takes to fade into the next */
  /* strong curves: ease-out for things arriving or answering a press, ease-in-out for things travelling */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}
:root:lang(en) { --head: "Estedad", system-ui, sans-serif; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; scrollbar-color: #2D6B57 var(--g-900); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--g-900); color: var(--ink-l); font: 400 16px/1.9 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
:lang(en) body, body:lang(en) { line-height: 1.65; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
input { caret-color: var(--o-500); }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a, button, input, label { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--o-500); outline-offset: 3px; border-radius: 6px; }
.light :focus-visible { outline-color: var(--g-700); }
::selection { background: var(--o-500); color: var(--g-900); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; inset-inline-start: 16px; top: 12px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--o-500); color: var(--g-900); font-weight: 700; transform: translateY(-200%); transition: transform .3s var(--ease-out); }
.skip:focus { transform: none; }
.container { width: min(1312px, 100%); margin-inline: auto; padding-inline: var(--pad); }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.itin .m, .slots b, .route-mini .m, .contacts a { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- chapters: one ground per stretch of the story, faded into the next ---------- */
/* The fade from the chapter above is the top layer of this chapter's own background, not an overlay
   element: an overlay's edge leaves a light hairline on screens with fractional scaling. */
.chapter { position: relative; isolation: isolate; background: var(--from, none) 0 0 / 100% var(--fade) no-repeat, var(--ground); }
.chapter > * { position: relative; z-index: 1; }
.chapter.dark { color: var(--ink-d); --ground:
  radial-gradient(55% 22% at 22% 16%, rgba(11, 90, 66, .85), transparent 70%),
  radial-gradient(50% 18% at 84% 48%, rgba(11, 90, 66, .5), transparent 70%),
  radial-gradient(45% 16% at 26% 74%, rgba(11, 90, 66, .45), transparent 70%),
  var(--g-900); }
.chapter.dark.first { --ground:
  radial-gradient(70% 70% at 25% 40%, rgba(11, 90, 66, .95), transparent 70%),
  radial-gradient(40% 40% at 90% 10%, rgba(11, 90, 66, .35), transparent 70%),
  var(--g-900); }
/* the dot grid of the dark ground thins out toward each edge, so no texture line shows where chapters meet */
.chapter.dark::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(233, 236, 237, .06) 1px, transparent 1.4px) 0 0 / 26px 26px;
  -webkit-mask-image: linear-gradient(transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
.chapter.dark.first::after { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--fade)), transparent); }
.chapter.light { color: var(--ink-l); --ground:
  radial-gradient(60% 18% at 86% 30%, #fff, transparent 70%),
  radial-gradient(55% 16% at 12% 66%, rgba(255, 255, 255, .85), transparent 70%),
  var(--s-100); }
/* the colour of the chapter above, eased out so the change has no visible band */
.chapter.dark + .chapter.light { --from: linear-gradient(
  rgb(0 38 27 / 1) 0%, rgb(0 38 27 / .987) 8.1%, rgb(0 38 27 / .951) 15.5%, rgb(0 38 27 / .896) 22.5%,
  rgb(0 38 27 / .825) 29%, rgb(0 38 27 / .741) 35.3%, rgb(0 38 27 / .648) 41.2%, rgb(0 38 27 / .55) 47.1%,
  rgb(0 38 27 / .45) 52.9%, rgb(0 38 27 / .352) 58.8%, rgb(0 38 27 / .259) 64.7%, rgb(0 38 27 / .175) 71%,
  rgb(0 38 27 / .104) 77.5%, rgb(0 38 27 / .049) 84.5%, rgb(0 38 27 / .013) 91.9%, rgb(0 38 27 / 0) 100%); }
.chapter.light + .chapter.dark { --from: linear-gradient(
  rgb(243 244 244 / 1) 0%, rgb(243 244 244 / .987) 8.1%, rgb(243 244 244 / .951) 15.5%, rgb(243 244 244 / .896) 22.5%,
  rgb(243 244 244 / .825) 29%, rgb(243 244 244 / .741) 35.3%, rgb(243 244 244 / .648) 41.2%, rgb(243 244 244 / .55) 47.1%,
  rgb(243 244 244 / .45) 52.9%, rgb(243 244 244 / .352) 58.8%, rgb(243 244 244 / .259) 64.7%, rgb(243 244 244 / .175) 71%,
  rgb(243 244 244 / .104) 77.5%, rgb(243 244 244 / .049) 84.5%, rgb(243 244 244 / .013) 91.9%, rgb(243 244 244 / 0) 100%); }
/* the first words of a chapter wait until the fade is mostly done; the extra room sits on the chapter,
   so a link to the section still lands on its heading */
.chapter + .chapter { padding-top: max(0px, calc(var(--fade) * .72 + 24px - var(--section))); }
section { padding-block: var(--section); }

/* type */
.h1 { font: 700 var(--h1)/1.42 var(--head); }
.h2 { font: 700 var(--h2)/1.5 var(--head); }
:lang(en) .h1 { font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
:lang(en) .h2 { font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.accent { color: var(--o-500); }
/* orange text is unreadable on the light ground, so there the word stays green and gets an orange highlight */
.light .accent { color: var(--g-700); background: linear-gradient(transparent 60%, rgba(249, 161, 50, .55) 60%, rgba(249, 161, 50, .55) 92%, transparent 92%); padding-inline: .06em; }
.lead { font-size: var(--lead); line-height: 1.95; max-width: 36em; }
:lang(en) .lead { line-height: 1.6; }
.dark .lead, .dark .muted { color: var(--muted-d); }
.light .lead, .light .muted { color: var(--muted-l); }
.head { max-width: 760px; }
.h2 + .lead { margin-top: 18px; }
.head.center { margin-inline: auto; text-align: center; }
.head.center .lead { margin-inline: auto; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: var(--fs-body); white-space: nowrap; transition: transform 160ms var(--ease-out), background-color .2s ease, box-shadow .2s ease, color .2s ease; }
.btn:active { transform: scale(.97); }
.btn .icon { font-size: 19px; transition: transform 200ms var(--ease-out); }
:lang(en) .btn .icon.flip { transform: scaleX(-1); }
.btn-orange { background: var(--o-500); color: var(--g-900); box-shadow: 0 14px 34px -12px rgba(249, 161, 50, .7); }
.btn-ghost { color: var(--ink-d); box-shadow: inset 0 0 0 1.5px rgba(243, 244, 244, .3); }
@media (hover: hover) and (pointer: fine) {
  .btn-orange:hover { background: var(--o-400); box-shadow: 0 18px 40px -12px rgba(249, 161, 50, .85); }
  .btn-orange:hover .icon { transform: translateX(-3px); }
  :lang(en) .btn-orange:hover .icon.flip { transform: scaleX(-1) translateX(-3px); }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(243, 244, 244, .7); }
}

/* surfaces: filled, lit from above, no outline boxes and no glass blur */
.panel { border-radius: var(--radius); background: linear-gradient(180deg, rgba(243, 244, 244, .085), rgba(243, 244, 244, .035)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 30px 60px -34px rgba(0, 0, 0, .7); }
.card { background: #fff; border-radius: var(--radius); box-shadow: 0 24px 50px -32px rgba(0, 38, 27, .35), 0 1px 2px rgba(0, 38, 27, .05); }
.ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: none; font-size: 22px; }
.dark .ic { background: linear-gradient(160deg, rgba(249, 161, 50, .28), rgba(249, 161, 50, .08)); color: var(--o-500); }
.light .ic { background: linear-gradient(160deg, var(--g-600), var(--g-700)); color: var(--o-500); box-shadow: 0 10px 22px -12px rgba(0, 38, 27, .6); }
.ic.solid { background: var(--o-500); color: var(--g-900); box-shadow: 0 10px 22px -12px rgba(249, 161, 50, .7); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.scrolled { background: rgba(0, 26, 18, .86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(243, 244, 244, .07), 0 18px 40px -30px rgba(0, 0, 0, .8); }
.site-header .container { display: flex; align-items: center; gap: 32px; min-height: 84px; }
.brand img { width: 150px; height: auto; }
.nav { display: flex; align-items: center; gap: 30px; margin-inline-start: auto; color: var(--ink-d); font-size: var(--fs-body); font-weight: 600; }
.nav a:not(.btn):not(.lang) { position: relative; color: rgba(243, 244, 244, .8); transition: color .2s ease; }
.nav a:not(.btn):not(.lang)::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--o-500); transform: scaleX(0); transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav a:not(.btn):not(.lang):hover { color: #fff; }
  .nav a:not(.btn):not(.lang):hover::after { transform: scaleX(1); }
}
.nav .lang { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(243, 244, 244, .25); font-weight: 700; font-size: var(--fs-small); }
.nav .btn { min-height: 46px; padding: 0 20px; font-size: var(--fs-small); }
.nav-toggle { display: none; }
.chapter.first { margin-top: -84px; padding-top: 84px; }
@media (max-width: 1023px) {
  .site-header { background: rgba(0, 26, 18, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .site-header .container { min-height: 68px; gap: 12px; }
  .brand img { width: 118px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; min-height: 42px; padding: 0 16px; border-radius: 999px; color: var(--ink-d); box-shadow: inset 0 0 0 1px rgba(243, 244, 244, .25); font-weight: 700; font-size: var(--fs-small); }
  .nav { position: absolute; inset-inline: 12px; top: calc(100% + 8px); display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; border-radius: 22px; background: var(--g-950); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .6); overscroll-behavior: contain; transform-origin: top; }
  .nav.is-open { display: flex; animation: menuIn 200ms var(--ease-out); }
  .nav a:not(.btn):not(.lang) { padding: 12px 10px; }
  .nav a:not(.btn):not(.lang)::after { display: none; }
  .nav .lang { align-self: flex-start; margin: 8px 10px; }
  .nav .btn { margin-top: 6px; }
  .chapter.first { margin-top: -68px; padding-top: 68px; }
  html:not(.js) .nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; background: none; box-shadow: none; padding: 0; }
  html:not(.js) .nav-toggle { display: none; }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ---------- hero ---------- */
.hero { padding-block: 0 clamp(64px, 8vw, 120px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: clamp(24px, 3vw, 48px); min-height: min(860px, calc(100svh - 84px)); padding-top: clamp(24px, 4vw, 56px); }
@media (min-width: 1024px) { .hero .h1 { white-space: nowrap; } }
.hero .lead { margin-top: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.planner { margin-top: 40px; max-width: 520px; padding: 20px; }
.planner legend { float: inline-start; width: 100%; margin-bottom: 12px; font-size: var(--fs-small); font-weight: 600; color: var(--muted-d); }
.dest-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; background: rgba(243, 244, 244, .08); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform 160ms var(--ease-out); }
.chip span small { font-size: var(--fs-tiny); opacity: .8; }
.chip input:checked + span { background: var(--o-500); color: var(--g-900); box-shadow: 0 10px 24px -10px rgba(249, 161, 50, .8); }
.chip input:focus-visible + span { outline: 3px solid var(--o-500); outline-offset: 3px; }
.chip input:active + span { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked):hover + span { background: rgba(243, 244, 244, .15); } }
.itin { margin-top: 16px; }
.itin li { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: var(--fs-body); line-height: 1.6; }
.itin li + li::before { content: ""; position: absolute; inset-inline-start: 16px; top: -12px; height: 22px; border-inline-start: 2px dashed rgba(249, 161, 50, .55); }
.itin .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 17px; background: rgba(249, 161, 50, .16); color: var(--o-500); }
.itin li:last-child .dot { background: var(--o-500); color: var(--g-900); }
.itin b { font-weight: 700; }
.itin .m { margin-inline-start: auto; font-size: var(--fs-tiny); color: var(--muted-d); white-space: nowrap; }
.hero-visual { position: relative; }
.hero-visual .iso { width: 100%; max-width: 690px; margin-inline: auto; }
.dest-card { position: absolute; top: 2%; inset-inline-end: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; font-size: var(--fs-small); line-height: 1.55; border-radius: 20px; background: rgba(0, 20, 14, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -24px rgba(0, 0, 0, .8); }
.dest-card b { display: block; font-size: var(--fs-small); }
.dest-card .muted { font-size: var(--fs-tiny); }
.dest-card .ic { width: 42px; height: 42px; font-size: 20px; border-radius: 13px; }
[data-for] { display: none; }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-visual { order: 2; }
  .planner { max-width: none; }
  .dest-card { position: relative; inset: auto; width: fit-content; margin-top: 8px; }   /* under the drawing, not over its route */
}

/* the destination on show: route, store, floor label, itinerary, card. Works without script through :has() */
.route-set { display: none; }
.route-set.rs-on { display: inline; }   /* the revenue drawing's one fixed route */
.hero:has(#dest-d1:checked) .rs-d1, .hero[data-dest="d1"] .rs-d1,
.hero:has(#dest-d2:checked) .rs-d2, .hero[data-dest="d2"] .rs-d2,
.hero:has(#dest-d3:checked) .rs-d3, .hero[data-dest="d3"] .rs-d3 { display: inline; }
.hero:has(#dest-d1:checked) [data-for="d1"], .hero[data-dest="d1"] [data-for="d1"],
.hero:has(#dest-d2:checked) [data-for="d2"], .hero[data-dest="d2"] [data-for="d2"],
.hero:has(#dest-d3:checked) [data-for="d3"], .hero[data-dest="d3"] [data-for="d3"] { display: block; }
.hero:has(#dest-d1:checked) .dest-d1, .hero[data-dest="d1"] .dest-d1,
.hero:has(#dest-d2:checked) .dest-d2, .hero[data-dest="d2"] .dest-d2,
.hero:has(#dest-d3:checked) .dest-d3, .hero[data-dest="d3"] .dest-d3 { --top: var(--o-500); --front: #D98418; --side: #B86D10; --window: #FFE2B5; }
.hero:has(#dest-d1:checked) .lbl-f2, .hero[data-dest="d1"] .lbl-f2,
.hero:has(#dest-d2:checked) .lbl-f1, .hero[data-dest="d2"] .lbl-f1,
.hero:has(#dest-d3:checked) .lbl-f0, .hero[data-dest="d3"] .lbl-f0 { --lbl: var(--o-500); --lbl-line: rgba(249, 161, 50, .7); }

/* ---------- isometric drawings: solid floors, shops with lit windows ---------- */
.iso { overflow: visible; height: auto; }
.iso .slab { fill: #0F4636; stroke: rgba(233, 236, 237, .16); stroke-width: 1; }
.iso .slab-f { fill: #08332A; } .iso .slab-r { fill: #062A21; }
.iso .void { fill: #021B14; stroke: rgba(233, 236, 237, .3); stroke-width: 1.2; }
.iso .court { fill: #135540; stroke: rgba(233, 236, 237, .14); }
.iso .bx-t { fill: var(--top, #CFE1D9); stroke: rgba(255, 255, 255, .3); stroke-width: .6; transition: fill .45s ease; }
.iso .bx-f { fill: var(--front, #2D6B57); transition: fill .45s ease; }
.iso .bx-r { fill: var(--side, #1D5043); transition: fill .45s ease; }
.iso .bx-wf { fill: var(--window, #9CC9B8); opacity: .6; transition: fill .45s ease; }
.iso .bx-wr { fill: var(--window, #9CC9B8); opacity: .38; transition: fill .45s ease; }
.iso .hl-t { fill: var(--o-500); } .iso .hl-f { fill: #D98418; } .iso .hl-r { fill: #B86D10; }
.iso .hl-wf, .iso .hl-wr { fill: #FFE2B5; opacity: .85; }
.iso .lbl rect { fill: rgba(0, 20, 14, .85); stroke: var(--lbl-line, rgba(233, 236, 237, .18)); transition: stroke .3s ease; }
.iso .lbl text { font: 700 13px var(--body); fill: var(--lbl, rgba(243, 244, 244, .88)); transition: fill .3s ease; }
.iso .shaft { fill: rgba(249, 161, 50, .08); stroke: rgba(249, 161, 50, .45); stroke-dasharray: 4 5; }
.iso .r-glow { fill: none; stroke: rgba(249, 161, 50, .45); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; filter: blur(6px); }
.iso .r-line { fill: none; stroke: var(--o-500); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.iso .r-flow { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 13; opacity: .9; }
.iso .you { fill: var(--g-700); stroke: #fff; stroke-width: 3.5; }
.iso .you-ping { fill: var(--o-500); opacity: .4; transform-box: fill-box; transform-origin: center; }
.iso .pin path { fill: var(--o-500); stroke: var(--g-900); stroke-width: 1; }
.iso .pin circle { fill: var(--g-900); }
.iso .pin { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.iso .hot { mix-blend-mode: screen; }
.iso .cold { fill: rgba(233, 236, 237, .04); stroke: rgba(233, 236, 237, .5); stroke-dasharray: 5 6; }
.iso .bay { stroke: rgba(233, 236, 237, .3); stroke-width: 1.2; }
.iso .car-t { fill: #A9B9B3; } .iso .car-f { fill: #7F938C; } .iso .car-r { fill: #6A7F78; }
.iso .tm-t { fill: var(--o-500); } .iso .tm-f { fill: var(--g-600); } .iso .tm-r { fill: var(--g-800); }
.iso .qr-face { fill: #fff; }
/* the same drawings on a light ground: white plates, green shops */
.iso--light .slab { fill: #FFFFFF; stroke: rgba(0, 65, 46, .14); }
.iso--light .slab-f { fill: #D5DEDA; } .iso--light .slab-r { fill: #C6D1CC; }
.iso--light .court { fill: #EAF1EE; stroke: rgba(0, 65, 46, .12); }
.iso--light .bx-t { fill: #E2EEE9; stroke: rgba(0, 65, 46, .16); }
.iso--light .bx-f { fill: #3C7864; } .iso--light .bx-r { fill: #295C4C; }
.iso--light .bx-wf { fill: #CFE7DD; opacity: .75; } .iso--light .bx-wr { fill: #CFE7DD; opacity: .5; }
.iso--light .lbl rect { fill: #fff; stroke: rgba(0, 65, 46, .16); }
.iso--light .lbl text { fill: var(--muted-l); }
.iso--light .hot { mix-blend-mode: multiply; }
.iso--light .cold { fill: rgba(0, 65, 46, .04); stroke: rgba(0, 65, 46, .45); }
.iso--light .bay { stroke: rgba(0, 65, 46, .28); }
.iso--light .tm-f { fill: var(--g-700); } .iso--light .tm-r { fill: var(--g-900); }
.iso-wrap { position: relative; }
.iso-wrap .iso { width: 100%; }
.iso-tag { position: absolute; translate: -50% -50%; padding: 6px 12px; border-radius: 999px; font-size: var(--fs-tiny); font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.dark .iso-tag { background: rgba(0, 20, 14, .86); color: var(--ink-d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px -12px rgba(0, 0, 0, .7); }
.light .iso-tag { background: #fff; color: var(--g-700); box-shadow: 0 10px 24px -12px rgba(0, 38, 27, .45), inset 0 0 0 1px var(--line-l); }
.iso-tag.tag-hot, .iso-tag.tag-feat { background: var(--o-500) !important; color: var(--g-900) !important; box-shadow: 0 10px 24px -10px rgba(249, 161, 50, .75) !important; }
@media (max-width: 599px) {
  .iso-tag { font-size: 11.5px; padding: 4px 9px; }
  /* a phone shrinks the drawings to about half size; the floor names grow back toward the slab so they stay readable */
  .iso .lbl { transform: scale(1.4); transform-box: fill-box; transform-origin: 100% 50%; }
}

/* ---------- layout helpers ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.wide-visual { grid-template-columns: .9fr 1.1fr; }
.split.visual-first { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 1023px) { .split, .split.wide-visual, .split.visual-first { grid-template-columns: minmax(0, 1fr); } }

/* a list where each point is an icon beside its words, set apart by space instead of boxes */
.points { display: grid; gap: 26px; margin-top: 36px; }
.points li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.points h3 { font-size: 18px; line-height: 1.6; font-weight: 800; }
.points p { margin-top: 4px; font-size: var(--fs-body); line-height: 1.85; }
.light .points p { color: var(--muted-l); }
.dark .points p { color: var(--muted-d); }
:lang(en) .points p { line-height: 1.6; }

/* ---------- why (light chapter) ---------- */
.reality { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: linear-gradient(135deg, var(--g-700), #00321F); color: var(--ink-d); box-shadow: 0 40px 80px -46px rgba(0, 38, 27, .9); }
.reality .ic { width: 56px; height: 56px; border-radius: 18px; background: rgba(249, 161, 50, .16); color: var(--o-500); font-size: 26px; box-shadow: none; }
.reality p { font-size: var(--lead); line-height: 1.9; max-width: 62ch; }
.reality b { color: var(--o-500); font-weight: 800; }
:lang(en) .reality p { line-height: 1.6; }
.compare { margin-top: 48px; overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.7; }
.compare th, .compare td { padding: 18px 22px; text-align: start; vertical-align: top; }
.compare thead th { background: var(--g-700); color: var(--ink-d); font-size: var(--fs-small); font-weight: 700; }
.compare thead th:last-child { background: var(--g-800); }
.compare thead th:last-child span { color: var(--o-500); }
.compare tbody tr + tr { border-top: 1px solid var(--line-l); }
.compare tbody th { width: 22%; font-weight: 800; color: var(--g-700); }
.compare td { color: var(--muted-l); }
.compare td:last-child { color: var(--g-700); font-weight: 600; background: rgba(249, 161, 50, .07); }
.compare td .icon { display: inline-block; margin-inline-end: 8px; vertical-align: -3px; font-size: 18px; }
.compare td:nth-child(2) .icon { color: #9AA8A3; }
.compare td:last-child .icon { color: #B86D10; }
.impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.impact li { position: relative; padding-top: 24px; }
.impact li::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--o-500); }
.impact h3 { font-size: 18px; line-height: 1.6; font-weight: 800; }
.impact h3 small { margin-inline-start: 6px; font-size: var(--fs-tiny); font-weight: 800; color: var(--o-700); letter-spacing: .04em; }
.impact p { margin-top: 6px; color: var(--muted-l); line-height: 1.85; }
:lang(en) .impact p { line-height: 1.6; }
.parties { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--gap); margin-top: 56px; align-items: stretch; }
.party { padding: 30px; }
.party.lead-card { background: linear-gradient(160deg, var(--g-600), var(--g-700) 45%, #00321F); color: var(--ink-d); box-shadow: 0 40px 80px -40px rgba(0, 38, 27, .75); }
.party .who { display: flex; align-items: center; gap: 14px; }
.party h3 { font-size: 18px; line-height: 1.5; font-weight: 800; }
.party h3 small { display: block; font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .05em; color: var(--o-700); }   /* 5.5:1 on white */
.party.lead-card h3 small { color: var(--o-500); }
.party ul { display: grid; gap: 12px; margin-top: 24px; }
.party li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.75; }
.party li .icon { margin-top: 5px; color: #B86D10; font-size: 18px; }
.party.lead-card li .icon { color: var(--o-500); }
.party.lead-card .ic { background: var(--o-500); color: var(--g-900); }
@media (max-width: 1023px) { .parties { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  /* on a phone each table row becomes its own small card, the column names written in front of each cell */
  .compare { background: none; box-shadow: none; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tbody { display: grid; gap: 12px; }
  .compare tbody tr { border: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 20px 40px -30px rgba(0, 38, 27, .4); }
  .compare tbody tr + tr { border-top: 0; }
  .compare tbody th { width: auto; padding: 16px 18px 6px; font-size: 18px; }
  .compare td { padding: 8px 18px 14px; }
  .compare td::before { content: attr(data-label); display: block; font-size: var(--fs-tiny); font-weight: 700; color: var(--muted-l); }
  .impact { grid-template-columns: minmax(0, 1fr); }
  .reality { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- product (dark chapter) ---------- */
.journey-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 56px; }
.phone-stage { position: relative; display: grid; place-items: center; padding-block: 20px 40px; }
.phone-stage::before { content: ""; position: absolute; bottom: 18px; width: 380px; max-width: 90%; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(249, 161, 50, .5), rgba(249, 161, 50, 0)); filter: blur(10px); }
.phone-stage::after { content: ""; position: absolute; bottom: 36px; width: 330px; max-width: 80%; height: 70px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(249, 161, 50, .5), 0 0 40px rgba(249, 161, 50, .2); }
.tilt { position: relative; z-index: 1; transform: perspective(1800px) rotateY(-12deg) rotateX(4deg) rotateZ(1.5deg); }
:lang(en) .tilt { transform: perspective(1800px) rotateY(12deg) rotateX(4deg) rotateZ(-1.5deg); }
.steps { position: relative; display: grid; gap: 6px; }
.steps::before { content: ""; position: absolute; inset-inline-start: 26px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: linear-gradient(var(--o-500), rgba(249, 161, 50, .15)); box-shadow: 0 0 12px rgba(249, 161, 50, .45); }
.steps li { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 14px 16px 14px 14px; border-radius: 20px; transition: background-color .3s ease; }
@media (hover: hover) and (pointer: fine) { .steps li:hover { background: rgba(243, 244, 244, .04); } }
.steps .ic { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%; background: var(--g-800); box-shadow: inset 0 0 0 2px rgba(249, 161, 50, .55); font-size: 22px; }   /* a stop on the line */
.steps li:last-child .ic { background: var(--o-500); color: var(--g-900); }
.steps h3 { font-size: 18px; line-height: 1.6; font-weight: 800; }
.steps h3 small { margin-inline-start: 8px; font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .06em; color: var(--o-500); }
.steps p { margin-top: 2px; line-height: 1.8; color: var(--muted-d); }
:lang(en) .steps p { line-height: 1.55; }
@media (max-width: 1023px) { .journey-grid { grid-template-columns: minmax(0, 1fr); } .phone-stage { order: 2; } }
@media (max-width: 599px) { .tilt, :lang(en) .tilt { transform: none; } .phone { width: min(300px, 82vw); } }

/* the phone, built in HTML */
.phone { position: relative; width: 300px; aspect-ratio: 300 / 626; padding: 11px; border-radius: 54px; background: linear-gradient(150deg, #34403b 0%, #0c1310 30%, #0a100d 70%, #2a3531 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 5px #0a0f0d, 0 70px 120px -40px rgba(0, 0, 0, .7), 0 30px 60px -30px rgba(0, 0, 0, .55); }
.phone::after { content: ""; position: absolute; inset: 11px; border-radius: 44px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%); }
.screen { position: relative; height: 100%; overflow: hidden; border-radius: 44px; background: var(--s-100); color: var(--g-700); display: flex; flex-direction: column; font-size: 12px; line-height: 1.6; direction: rtl; font-family: "Estedad", Tahoma, sans-serif; }
.island { position: absolute; z-index: 5; top: 10px; left: 50%; translate: -50% 0; width: 92px; height: 27px; border-radius: 20px; background: #040706; }
.ph-status { position: relative; z-index: 4; height: 46px; padding: 14px 26px 0; display: flex; justify-content: space-between; direction: ltr; font-weight: 700; font-size: 13px; line-height: 1; color: var(--s-100); }
.ph-status .sig { display: flex; gap: 4px; align-items: flex-end; }
.ph-status .sig i { display: block; width: 3px; border-radius: 2px; background: currentColor; }
.ph-head { position: relative; margin-top: -46px; padding: 56px 18px 18px; background: radial-gradient(120% 90% at 100% 0%, var(--g-600) 0%, var(--g-700) 55%, #003a29 100%); border-radius: 0 0 26px 26px; color: var(--s-100); }
.ph-top { display: flex; align-items: center; justify-content: space-between; }
.ph-top img { height: 17px; width: auto; }
.ph-top .icon { font-size: 18px; opacity: .85; }
.ph-label { margin-top: 12px; font-size: 11px; opacity: .72; }
.ph-dest { font-size: 18px; font-weight: 800; line-height: 1.4; }
.ph-meta { display: flex; gap: 6px; margin-top: 10px; }
.ph-meta span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11px; font-weight: 600; }
.ph-meta span:first-child { background: var(--o-500); color: var(--g-900); }
.ph-map { position: relative; flex: 1; margin: 12px 12px 0; border-radius: 20px; overflow: hidden; background: #E2E5E5; }
.ph-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-store { fill: #fff; } .m-hl { fill: #FFE7C2; } .m-void { fill: #D3D8D7; } .m-void2 { fill: #E2E5E5; }
.m-route { fill: none; stroke: var(--o-500); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.m-flow { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 11; }
.m-done { fill: none; stroke: #CFD5D3; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.m-you { fill: var(--g-700); stroke: #fff; stroke-width: 3; }
.m-ping { fill: var(--g-700); opacity: .25; transform-box: fill-box; transform-origin: center; }
.ph-step { position: relative; z-index: 2; margin: -30px 16px 10px; padding: 11px 12px; display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 18px; box-shadow: 0 12px 30px -12px rgba(0, 38, 27, .35); }
.ph-step .turn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--o-500); color: var(--g-900); font-size: 20px; flex: none; }
.ph-step b { display: block; font-size: 13px; font-weight: 800; }
.ph-step small { display: block; font-size: 10.5px; color: #4b6b60; }
.ph-step .bar { height: 4px; margin-top: 5px; border-radius: 4px; background: var(--s-300); overflow: hidden; }
.ph-step .bar i { display: block; height: 100%; width: 58%; background: var(--o-500); border-radius: inherit; }
.ph-nav { height: 64px; padding: 0 22px 8px; display: flex; align-items: center; justify-content: space-between; background: #fff; color: #7d958c; font-size: 19px; }
.ph-nav .go { width: 46px; height: 46px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; background: var(--o-500); color: var(--g-900); box-shadow: 0 10px 22px -8px rgba(249, 161, 50, .9); font-size: 20px; }
.ph-nav .on { color: var(--g-700); }

/* modules: the one place where cards carry the content */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.mod { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s ease; }
.mod.big { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, rgba(249, 161, 50, .16), rgba(249, 161, 50, .02) 45%), linear-gradient(180deg, rgba(243, 244, 244, .085), rgba(243, 244, 244, .035)); }
.mod.wide { grid-column: span 2; }
.mod h3 { font-size: 18px; line-height: 1.6; font-weight: 800; }
.mod h3 small { display: block; font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .05em; color: var(--o-500); }
.mod p { line-height: 1.8; color: var(--muted-d); }
:lang(en) .mod p { line-height: 1.55; }
@media (hover: hover) and (pointer: fine) { .mod:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 70px -36px rgba(0, 0, 0, .8); } }
.mini { margin-top: auto; padding: 14px; border-radius: 18px; background: rgba(0, 20, 14, .55); font-size: var(--fs-tiny); line-height: 1.6; }
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; }
.mini-row + .mini-row { margin-top: 4px; }
.mini-row b { font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(249, 161, 50, .16); color: var(--o-500); font-size: var(--fs-tiny); font-weight: 700; white-space: nowrap; }
.pill.solid { background: var(--o-500); color: var(--g-900); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.slots div { padding: 10px 6px; border-radius: 14px; background: rgba(243, 244, 244, .07); }
.slots small { display: block; font-size: var(--fs-tiny); color: var(--muted-d); }
.slots b { font-size: 18px; font-weight: 800; }
.slots div:last-child { background: var(--o-500); color: var(--g-900); }
.slots div:last-child small { color: rgba(0, 38, 27, .75); }
.meter { height: 8px; border-radius: 8px; background: rgba(243, 244, 244, .1); overflow: hidden; margin-top: 10px; }
.meter i { display: block; height: 100%; width: 72%; border-radius: inherit; background: var(--o-500); }
.route-mini li { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: var(--fs-small); }
.route-mini li + li::before { content: ""; position: absolute; inset-inline-start: 10px; top: -9px; height: 18px; border-inline-start: 2px dashed rgba(249, 161, 50, .55); }
.route-mini .d { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(249, 161, 50, .16); color: var(--o-500); font-size: 12px; }
.route-mini li:last-child .d { background: var(--o-500); color: var(--g-900); }
.route-mini .m { margin-inline-start: auto; color: var(--muted-d); font-size: var(--fs-tiny); }
@media (max-width: 1023px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .bento { grid-template-columns: minmax(0, 1fr); } .mod.big, .mod.wide { grid-column: auto; grid-row: auto; } }

/* revenue: the four sources as one list; the passive income is the one that gets a surface */
.earn { display: grid; gap: 22px; margin-top: 36px; }
.earn li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.earn h3 { font-size: 18px; line-height: 1.6; font-weight: 800; }
.earn p { margin-top: 2px; line-height: 1.8; color: var(--muted-d); }
:lang(en) .earn p { line-height: 1.55; }
.earn li.key { margin-top: 4px; padding: 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(249, 161, 50, .2), rgba(249, 161, 50, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.earn li.key .ic { background: var(--o-500); color: var(--g-900); }

/* ---------- rollout (light chapter) ---------- */
.qr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 34px; }
.qr-list li { display: flex; align-items: center; gap: 14px; line-height: 1.6; }
.qr-list b { display: block; font-weight: 800; }
.qr-list small { display: block; font-size: var(--fs-tiny); color: var(--muted-l); }
.qr-list .ic { width: 44px; height: 44px; border-radius: 14px; font-size: 20px; }
.materials-title { margin-top: 34px; font-size: 18px; line-height: 1.6; font-weight: 800; }
.materials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.materials span { padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -10px rgba(0, 38, 27, .35); font-size: var(--fs-small); font-weight: 600; }
@media (max-width: 599px) { .qr-list { grid-template-columns: minmax(0, 1fr); } }
/* six stops on one route: each number sits on the dashed line, the last stop is reached */
.stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px clamp(24px, 3vw, 44px); margin-top: 72px; }
.stop { position: relative; padding-top: 34px; border-top: 2px dashed rgba(184, 109, 16, .45); }
.stop .n { position: absolute; top: -27px; inset-inline-start: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--s-100); box-shadow: inset 0 0 0 2px var(--g-700); color: var(--g-700); font: 800 18px/1 var(--body); }
.stop:last-child { border-top-style: solid; border-top-color: var(--o-500); }
.stop:last-child .n { background: var(--o-500); box-shadow: none; color: var(--g-900); }
.stop h3 { font-size: 18px; line-height: 1.6; font-weight: 800; }
.stop p { margin-top: 6px; line-height: 1.8; color: var(--muted-l); }
:lang(en) .stop p { line-height: 1.55; }
.stop .out { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: var(--fs-small); line-height: 1.7; color: var(--g-700); }
.stop .out .icon { margin-top: 3px; color: #B86D10; font-size: 17px; }
.stop .out b { font-weight: 800; }
@media (max-width: 1023px) { .stops { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .stops { grid-template-columns: minmax(0, 1fr); gap: 52px; } }

/* ---------- contact (dark chapter) ---------- */
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.contacts { display: grid; gap: 14px; margin-top: 34px; }
.contacts a, .contacts div { display: flex; align-items: center; gap: 14px; line-height: 1.7; }
.contacts .ic { width: 44px; height: 44px; border-radius: 14px; font-size: 19px; }
.contacts a { transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .contacts a:hover { color: var(--o-500); } }
.form { display: grid; gap: 12px; padding: clamp(22px, 3vw, 36px); }
.form label { display: grid; gap: 7px; font-size: var(--fs-small); font-weight: 600; color: var(--muted-d); }
.form input:not([type="checkbox"]) { width: 100%; height: 54px; padding: 0 18px; border: 0; border-radius: 16px; background: rgba(0, 20, 14, .6); color: var(--ink-d); font-size: var(--fs-body); box-shadow: inset 0 0 0 1px rgba(243, 244, 244, .12); transition: box-shadow .2s ease, background-color .2s ease; }
.form input::placeholder { color: rgba(243, 244, 244, .45); }
.form input:focus-visible { outline: none; background: rgba(0, 20, 14, .8); box-shadow: inset 0 0 0 2px var(--o-500); }
.form input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #FF8A7A; }
[dir="rtl"] .form input[type="tel"]:not(:placeholder-shown) { direction: ltr; text-align: right; }
.form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form button[type="submit"] { margin-top: 6px; min-height: 56px; }
.form button[disabled] { opacity: .7; cursor: progress; }
.field-error { font-size: var(--fs-tiny); font-weight: 700; color: #FFB4A9; }
.field-error:empty { display: none; }
.form-status { min-height: 1.6em; font-size: var(--fs-small); font-weight: 700; color: var(--o-500); }
.form-status a { text-decoration: underline; text-underline-offset: .25em; }
.form-note { font-size: var(--fs-tiny); color: var(--muted-d); }
@media (max-width: 1023px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer: the last chapter settles into the darkest green ---------- */
.site-footer { background: linear-gradient(var(--g-900), var(--g-950) 240px); color: var(--ink-d); padding-block: 72px 32px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.foot-grid img { width: 170px; height: auto; }
.foot-grid p { margin-top: 18px; max-width: 30ch; line-height: 1.9; color: var(--muted-d); }
.foot-grid h2 { font-size: var(--fs-small); font-weight: 800; color: var(--o-500); letter-spacing: .03em; }
.foot-grid ul { display: grid; gap: 8px; margin-top: 16px; padding: 0; list-style: none; }
.foot-grid a { color: var(--muted-d); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .foot-grid a:hover { color: #fff; } }
.foot-grid address { margin-top: 16px; font-style: normal; line-height: 1.9; color: var(--muted-d); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; font-size: var(--fs-small); color: rgba(243, 244, 244, .6); }
@media (max-width: 1023px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- motion: one authored moment (the route), quiet arrivals elsewhere ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* words and groups rise a little; drawings open from the floor up; nothing waits on script to be readable */
  .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="draw"] { transform: none; clip-path: inset(100% 0 0 0); transition: opacity .5s ease, clip-path 1.1s var(--ease-in-out); }
  .js [data-reveal="draw"].is-in { clip-path: inset(-10% -10% -10% -10%); }
  /* every loop stops within about five seconds, so nothing needs a pause control; choosing a destination
     in the hero starts the route's motion again */
  .iso .r-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease-in-out) .2s forwards; }
  .iso .r-flow { opacity: 0; animation: flow 1.2s linear 2s 2, show .4s ease 2s forwards; }
  .iso .you-ping { animation: ping 2s var(--ease-out) 2; }
  .m-flow { animation: flow 1.2s linear 4; }
  .m-ping { animation: ping 2s var(--ease-out) 2; }
  /* a new itinerary or destination card cross-fades in instead of popping */
  .hero [data-for] { animation: swapIn .28s var(--ease-out); }
}
/* with reduced motion nothing moves; things still arrive, by fading */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 0; transition: opacity .6s ease; }
  .js [data-reveal].is-in { opacity: 1; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes flow { to { stroke-dashoffset: -14; } }
@keyframes show { to { opacity: .9; } }
@keyframes ping { from { transform: scale(1); opacity: .5; } to { transform: scale(3); opacity: 0; } }
@keyframes swapIn { from { opacity: 0; transform: translateY(4px); } }