/* Business types: the animated scenes, the picker on the home page, and the pages for each type. */

/* ----- scene colours ----- */
.vg { display: block; width: 100%; height: auto; overflow: visible; }
.vg .stg { fill: rgba(255, 255, 255, .62); }
.vg .f-ink { fill: var(--ink); } .vg .f-vd { fill: var(--vd-mark); } .vg .f-vb { fill: var(--vd-bright); } .vg .f-gold { fill: var(--gold); } .vg .f-w { fill: #fff; }
.vg .f-line { fill: var(--line); } .vg .f-dr { fill: var(--dr-mark); } .vg .f-cr { fill: var(--cr); }
.vg .s-ink { stroke: var(--ink); } .vg .s-gold { stroke: var(--gold); } .vg .s-dr { stroke: var(--dr-mark); } .vg .s-vd { stroke: var(--vd-mark); } .vg .s-line { stroke: var(--line); } .vg .s-w { stroke: #fff; }
.vg .m-l { fill: var(--vd-mark); } .vg .m-r { fill: var(--ink); } .vg .m-b1, .vg .m-b2 { fill: var(--gold); }

/* ----- scene motion ----- */
.g-orbit { animation: spin 30s linear infinite; transform-origin: 120px 78px; }
.g-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.2s ease-in-out infinite; }
.r-tag { transform-box: fill-box; transform-origin: 50% 0; animation: sway 4s ease-in-out infinite; }
.r-beam { animation: beam 2.4s ease-in-out infinite; }
.w-run { animation: drive 7s ease-in-out infinite; } .w-fork { animation: lift 7s ease-in-out infinite; }
.t-ship { transform-box: fill-box; transform-origin: center; animation: bob 4s ease-in-out infinite; } .t-waves { animation: waves 5s linear infinite; }
.x-truck { animation: rumble .5s linear infinite; } .x-dash { animation: dashes 1s linear infinite; } .x-w { animation: spin .7s linear infinite; }
.x-pin { animation: hop 2s ease-in-out infinite; }
.s-bar { transform-box: fill-box; transform-origin: left center; animation: fillbar 4.5s var(--ease) infinite; } .s-bar2 { animation-delay: .5s; } .s-bar3 { animation-delay: 1s; }
.s-hand { animation: spin 6s linear infinite; transform-origin: 186px 52px; }
.a-stamp { animation: stamp 4.5s ease-in-out infinite; } .a-ok { transform-box: fill-box; transform-origin: center; animation: okpop 4.5s ease-in-out infinite; }
.e-win { fill: var(--line); } .e-w0 { animation: win 6s ease-in-out infinite; } .e-w1 { animation: win 6s ease-in-out 1s infinite; } .e-w2 { animation: win 6s ease-in-out 2s infinite; } .e-w3 { animation: win 6s ease-in-out 3s infinite; } .e-w4 { animation: win 6s ease-in-out 4s infinite; } .e-w5 { animation: win 6s ease-in-out 5s infinite; }
.e-swing { transform-box: fill-box; transform-origin: 50% 0; animation: swing 3.4s ease-in-out infinite; }
.c-hook { animation: hook 6s ease-in-out infinite; } .c-f { transform-box: fill-box; transform-origin: center bottom; animation: floor 6s ease-out infinite; } .c-f2 { animation-delay: .6s; } .c-f3 { animation-delay: 1.2s; }
.f-lid { transform-box: fill-box; transform-origin: left bottom; animation: lid 5s ease-in-out infinite; }
.s-steam { stroke: var(--vd-mark); opacity: 0; stroke-dasharray: 60; stroke-dashoffset: 60; animation: steam 5s ease-in-out infinite; } .s-s2 { animation-delay: .25s; } .s-s3 { animation-delay: .5s; }
.m-g1 { animation: spin 8s linear infinite; } .m-g2 { animation: spin 6.06s linear infinite reverse; } .m-belt { animation: belt 4s linear infinite; }
.k-wrench { animation: wrench 2.6s ease-in-out infinite; } .k-sparks { animation: sparks 2.6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes beam { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(24px); } }
@keyframes drive { 0% { transform: translateX(0); } 45%, 55% { transform: translateX(96px); } 100% { transform: translateX(0); } }
@keyframes lift { 0%, 30% { transform: translateY(0); } 48%, 56% { transform: translateY(-30px); } 78%, 100% { transform: translateY(0); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-1.2deg); } }
@keyframes waves { to { transform: translateX(30px); } }
@keyframes rumble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.3px); } }
@keyframes dashes { to { stroke-dashoffset: 26; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes fillbar { 0% { transform: scaleX(.05); } 55%, 85% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
@keyframes stamp { 0%, 10% { transform: translateY(-8px); } 24% { transform: translateY(88px); } 30% { transform: translateY(84px); } 42%, 100% { transform: translateY(-8px); } }
@keyframes okpop { 0%, 24% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.15); } 36%, 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes win { 0%, 100% { fill: var(--line); } 40%, 60% { fill: var(--gold); } }
@keyframes swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes hook { 0%, 15% { transform: translateY(0); } 45%, 60% { transform: translateY(18px); } 90%, 100% { transform: translateY(0); } }
@keyframes floor { 0% { opacity: 0; transform: scaleY(.2); } 12%, 80% { opacity: 1; transform: scaleY(1); } 95%, 100% { opacity: 0; transform: scaleY(.2); } }
@keyframes lid { 0%, 20% { transform: translateY(0) rotate(0); } 40%, 70% { transform: translateY(-16px) rotate(-9deg); } 90%, 100% { transform: translateY(0) rotate(0); } }
@keyframes steam { 0%, 30% { opacity: 0; stroke-dashoffset: 60; } 45% { opacity: .9; } 75% { opacity: .9; stroke-dashoffset: 0; } 95%, 100% { opacity: 0; stroke-dashoffset: -30; } }
@keyframes belt { to { transform: translateX(60px); } }
@keyframes wrench { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
@keyframes sparks { 0%, 40%, 100% { opacity: 0; } 50%, 60% { opacity: 1; } }

/* ----- picker on the home page ----- */
.biz { padding: clamp(48px, 7vw, 96px) 0; background: var(--paper-2); border-block: 1px solid var(--line); }
.bt-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.bt { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font: 600 15.5px/1.3 var(--f-text); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.bt i { width: 11px; height: 11px; border-radius: 50%; background: var(--bz); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--bz); transition: transform .2s; }
.bt:hover { border-color: var(--ink); }
.bt[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } .bt[aria-selected="true"] i { transform: scale(1.25); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--bz); }
.bps { position: relative; }
.bp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px clamp(24px, 4vw, 56px); align-items: center; animation: bp-in .5s var(--ease); }
.bp[hidden] { display: none; }
@keyframes bp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bp-scene { background: color-mix(in srgb, var(--bz) 24%, #fff); border-radius: var(--r-l); padding: clamp(14px, 3vw, 30px); display: grid; align-items: center; aspect-ratio: 16 / 10.4; }
.bp-g { margin: 0 0 6px; font-weight: 600; font-size: .95rem; color: var(--muted); }
.bp-info h3 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-stretch: 80%; line-height: 1.05; }
.bp-tag { margin: 10px 0 8px; color: var(--ink); font-size: 1.05rem; max-width: 36em; } .bp-who { margin: 0 0 14px; color: var(--muted); font-size: .98rem; } .bp-who b { color: var(--ink); margin-inline-end: 4px; }
.bp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin-top: 16px; }
.bp h4 { font: 700 .85rem/1.3 var(--f-text); color: var(--muted); margin-bottom: 6px; }
.bp-cols ul { list-style: none; margin: 0; padding: 0; } .bp-cols li { display: flex; flex-direction: column; padding: 7px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.bp-cols li small { font-weight: 400; color: var(--muted); font-size: 13.5px; } .bp-cols li.more { font-weight: 500; color: var(--muted); }
.bp-run, .bp-pipe, .bp-go { grid-column: 1 / -1; }
.bp-run { margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 16px; } .bp-run h4 { margin-bottom: 14px; color: var(--ink); font-size: 1rem; }
.bp-go { margin: 6px 0 0; }

/* the step track: stops light up one after the other */
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 0; overflow-x: auto; padding-bottom: 6px; counter-reset: s; scrollbar-width: thin; }
.track li { position: relative; padding-top: 28px; padding-inline-end: 10px; font-size: 13.5px; line-height: 1.3; font-weight: 600; min-width: 96px; }
.track li i { position: absolute; top: 0; inset-inline-start: 0; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; z-index: 1; }
.track li::before { content: ""; position: absolute; top: 8px; inset-inline-start: 18px; inset-inline-end: 0; height: 2.5px; background: var(--line); }
.track li:last-child::before { display: none; }
.track li::after { content: ""; position: absolute; top: 8px; inset-inline-start: 18px; inset-inline-end: 0; height: 2.5px; background: var(--vd); transform: scaleX(0); transform-origin: left; }
:root[dir="rtl"] .track li::after { transform-origin: right; }
.bp:not([hidden]) .track li i, .track.go li i { animation: stop .5s var(--ease) both; animation-delay: calc(var(--i) * .32s + .3s); }
.bp:not([hidden]) .track li::after, .track.go li::after { animation: run .32s linear both; animation-delay: calc(var(--i) * .32s + .45s); }
@keyframes stop { 0% { background: #fff; border-color: var(--ink); } 100% { background: var(--vd); border-color: var(--vd); box-shadow: 0 0 0 4px rgba(14, 143, 126, .2); } }
@keyframes run { to { transform: scaleX(1); } }

.pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pipe li { position: relative; padding: 7px 14px 7px 20px; background: color-mix(in srgb, var(--c) 18%, #fff); border: 1.5px solid var(--c); font-weight: 600; font-size: 14.5px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); animation: chev .4s var(--ease) both; animation-delay: calc(var(--i) * .08s); padding-inline: 22px 24px; border-radius: 2px; }
:root[dir="rtl"] .pipe li { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 12px 100%, 0 50%); }
.pipe li.won { background: var(--ok); color: #fff; border-color: var(--ok); } .pipe li.lost { background: #fff; color: var(--muted); border-style: dashed; }
@keyframes chev { from { opacity: 0; transform: translateX(calc(-8px * var(--dir))); } to { opacity: 1; transform: none; } }
.bz-all { margin: 26px 0 0; }

/* ----- the list of business types ----- */
.bgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.bcard:hover, .bcard:focus-within { border-color: var(--ink); box-shadow: 0 22px 36px -26px rgba(10, 46, 43, .55); transform: translateY(-3px); }
.bc-a { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.bc-scene { background: color-mix(in srgb, var(--bz) 24%, #fff); padding: 16px 22px 8px; }
.bc-body { padding: 14px 20px 20px; } .bc-g { margin: 0 0 4px !important; font-size: 13.5px !important; font-weight: 600; color: var(--muted) !important; } .bc-body h3 { font-size: 1.35rem; font-stretch: 90%; } .bc-body p { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; } .bc-body .meta { color: var(--ink); font-weight: 600; font-size: 14px; }
.bgrid .vg * { animation-play-state: paused; } .bcard:hover .vg *, .bcard:focus-within .vg * { animation-play-state: running; }

/* ----- one business type ----- */
.bpage { --bz: var(--vd-mark); }
.bh { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(14px, 3vw, 32px) 0 clamp(26px, 4vw, 48px); }
.bh h1 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); font-stretch: 76%; line-height: .98; }
:root:lang(ar) .bh h1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.3; } :root:lang(ur) .bh h1 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.9; }
.bh .lead { color: var(--ink); } .bh .bp-who { margin: 12px 0 0; } .bh .ctas { margin: 22px 0 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.bh-s { aspect-ratio: 16 / 10.4; }
.bpage section { margin-top: clamp(36px, 5vw, 64px); }
.bpage section > h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-stretch: 80%; margin-bottom: 8px; }
:root:lang(ar) .bpage section > h2 { line-height: 1.4; } :root:lang(ur) .bpage section > h2 { line-height: 1.9; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.bcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px 32px; margin-top: 18px; }
.bcols h3 { font: 700 .9rem/1.3 var(--f-text); color: var(--muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); } .bcols h3.sub { margin-top: 18px; }
.bcols ul { list-style: none; margin: 0; padding: 0; } .bcols li { padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 15.5px; } .bcols li.more { color: var(--muted); }
.bcols .inv-t { font: 800 1.35rem/1.2 var(--f-display); margin: 4px 0; } :root:lang(ar) .bcols .inv-t { line-height: 1.5; } :root:lang(ur) .bcols .inv-t { line-height: 1.9; margin: 10px 0 4px; } .bcols .inv-f { color: var(--muted); margin: 4px 0; }
.wfs { display: grid; gap: 18px; margin-top: 22px; }
.wf { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px 12px; } .wf header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .wf h3 { font-size: 1.3rem; font-stretch: 90%; } .wf .n { color: var(--muted); font-size: 14px; direction: inherit; text-align: end; }
.wf p { margin: 6px 0 18px; color: var(--muted); max-width: 54em; }
.tw { overflow-x: auto; margin-top: 18px; }
.tt { width: 100%; border-collapse: collapse; font-size: 15.5px; } .tt th, .tt td { text-align: start; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .tt th { font-weight: 700; min-width: 14em; } .tt td { white-space: nowrap; color: var(--vd-hover); font-weight: 600; } .tt td.d { white-space: normal; color: var(--muted); font-weight: 400; min-width: 16em; }
.bother .bo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .bother a { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; } .bother a:hover { border-color: var(--ink); } .bother i { width: 11px; height: 11px; border-radius: 50%; background: var(--bz); }

@media (max-width: 1020px) {
  .bp { grid-template-columns: minmax(0, 1fr); } .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bh { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .bt-row { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); padding-bottom: 6px; scroll-snap-type: x proximity; } .bt { flex: none; scroll-snap-align: start; }
  .bp-cols { grid-template-columns: minmax(0, 1fr); } .bgrid { grid-template-columns: minmax(0, 1fr); }
  .track { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; } .track li { padding: 0 0 18px 32px; min-width: 0; padding-inline-start: 34px; padding-top: 0; font-size: 14.5px; } .track li i { top: 0; } .track li::before, .track li::after { top: 18px; bottom: 0; height: auto; width: 2.5px; inset-inline-start: 7.5px; inset-inline-end: auto; } .track li::after { transform: scaleY(0); transform-origin: top; }
  .bp:not([hidden]) .track li::after, .track.go li::after { animation-name: runy; } .track li:last-child { padding-bottom: 0; }
}
@keyframes runy { to { transform: scaleY(1); } }