/* Musskart Lab (Musskart Technology Limited) — one stylesheet for every page.
   Every colour comes from one palette, Sky and Fern (Canada's $5 Frontier note and New Zealand's 2015 $10),
   set on :root below: base roles (--bg, --ink, --deep …) plus four vivid inks from the notes (sky blue,
   royal blue, aqua and fern green):
     --v1..--v4   the inks at full strength (backgrounds, glows, gradients; text on them uses --on1..--on4)
     --vl1..--vl4 light versions, readable on --deep
     --vd1..--vd4 dark versions, readable on --bg, --surface and --tint
   The patterns still rotate: site.js prints them, starting from a different one on each page every day. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  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;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colours: the site palette, written here by build_site.py from palettes.json */
  --bg: #f0f6fc; --surface: #fafcff; --tint: #dcebf7; --line: #c2d7ea;
  --ink: #0e1f3d; --muted: #465c76; --primary: #1d5fb0; --onPrimary: #ffffff;
  --link: #1957a6; --accent: #6aab3a; --onAccent: #0e1f3d; --deep: #0f2a50;
  --onDeep: #e9f3ff; --cta: #7cc244; --onCta: #0e1f3d;
  --v1: #2f96d8; --v2: #2b58b5; --v3: #1fa8bc; --v4: #66ad3a;
  --vl1: #389ada; --vl2: #6e92dd; --vl3: #1fa8bc; --vl4: #66ad3a;
  --vd1: #1d6b9d; --vd2: #2b58b5; --vd3: #15717f; --vd4: #427026;
  --on1: #111111; --on2: #ffffff; --on3: #111111; --on4: #111111;
  --wl1: #e6f2fa; --wl2: #e6ebf6; --wl3: #e4f5f7; --wl4: #edf5e7;
  --wd1: #2f96d8; --wd2: #7391ce; --wd3: #1fa8bc; --wd4: #66ad3a;
  --dk1: #226ba2; --dk2: #2b58b5; --dk3: #186e8a; --dk4: #3e7144;
  /* End of colours */
  /* Money assets: drawn by build/tools/money_assets.py */
  --m-lace: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2216%22 viewBox=%220 0 96 16%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22%3E%3Cpath d=%22M0.0 8.00 2.0 8.70 4.0 9.40 6.0 10.07 8.0 10.70 10.0 11.29 12.0 11.82 14.0 12.28 16.0 12.68 18.0 12.99 20.0 13.22 22.0 13.35 24.0 13.40 26.0 13.35 28.0 13.22 30.0 12.99 32.0 12.68 34.0 12.28 36.0 11.82 38.0 11.29 40.0 10.70 42.0 10.07 44.0 9.40 46.0 8.70 48.0 8.00 50.0 7.30 52.0 6.60 54.0 5.93 56.0 5.30 58.0 4.71 60.0 4.18 62.0 3.72 64.0 3.32 66.0 3.01 68.0 2.78 70.0 2.65 72.0 2.60 74.0 2.65 76.0 2.78 78.0 3.01 80.0 3.32 82.0 3.72 84.0 4.18 86.0 4.71 88.0 5.30 90.0 5.93 92.0 6.60 94.0 7.30 96.0 8.00%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M0.0 8.00 2.0 7.30 4.0 6.60 6.0 5.93 8.0 5.30 10.0 4.71 12.0 4.18 14.0 3.72 16.0 3.32 18.0 3.01 20.0 2.78 22.0 2.65 24.0 2.60 26.0 2.65 28.0 2.78 30.0 3.01 32.0 3.32 34.0 3.72 36.0 4.18 38.0 4.71 40.0 5.30 42.0 5.93 44.0 6.60 46.0 7.30 48.0 8.00 50.0 8.70 52.0 9.40 54.0 10.07 56.0 10.70 58.0 11.29 60.0 11.82 62.0 12.28 64.0 12.68 66.0 12.99 68.0 13.22 70.0 13.35 72.0 13.40 74.0 13.35 76.0 13.22 78.0 12.99 80.0 12.68 82.0 12.28 84.0 11.82 86.0 11.29 88.0 10.70 90.0 10.07 92.0 9.40 94.0 8.70 96.0 8.00%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M0.0 8.00 2.0 9.19 4.0 10.19 6.0 10.86 8.0 11.10 10.0 10.86 12.0 10.19 14.0 9.19 16.0 8.00 18.0 6.81 20.0 5.81 22.0 5.14 24.0 4.90 26.0 5.14 28.0 5.81 30.0 6.81 32.0 8.00 34.0 9.19 36.0 10.19 38.0 10.86 40.0 11.10 42.0 10.86 44.0 10.19 46.0 9.19 48.0 8.00 50.0 6.81 52.0 5.81 54.0 5.14 56.0 4.90 58.0 5.14 60.0 5.81 62.0 6.81 64.0 8.00 66.0 9.19 68.0 10.19 70.0 10.86 72.0 11.10 74.0 10.86 76.0 10.19 78.0 9.19 80.0 8.00 82.0 6.81 84.0 5.81 86.0 5.14 88.0 4.90 90.0 5.14 92.0 5.81 94.0 6.81 96.0 8.00%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M0.0 8.00 2.0 6.81 4.0 5.81 6.0 5.14 8.0 4.90 10.0 5.14 12.0 5.81 14.0 6.81 16.0 8.00 18.0 9.19 20.0 10.19 22.0 10.86 24.0 11.10 26.0 10.86 28.0 10.19 30.0 9.19 32.0 8.00 34.0 6.81 36.0 5.81 38.0 5.14 40.0 4.90 42.0 5.14 44.0 5.81 46.0 6.81 48.0 8.00 50.0 9.19 52.0 10.19 54.0 10.86 56.0 11.10 58.0 10.86 60.0 10.19 62.0 9.19 64.0 8.00 66.0 6.81 68.0 5.81 70.0 5.14 72.0 4.90 74.0 5.14 76.0 5.81 78.0 6.81 80.0 8.00 82.0 9.19 84.0 10.19 86.0 10.86 88.0 11.10 90.0 10.86 92.0 10.19 94.0 9.19 96.0 8.00%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M0.0 9.60 2.0 9.13 4.0 8.00 6.0 6.87 8.0 6.40 10.0 6.87 12.0 8.00 14.0 9.13 16.0 9.60 18.0 9.13 20.0 8.00 22.0 6.87 24.0 6.40 26.0 6.87 28.0 8.00 30.0 9.13 32.0 9.60 34.0 9.13 36.0 8.00 38.0 6.87 40.0 6.40 42.0 6.87 44.0 8.00 46.0 9.13 48.0 9.60 50.0 9.13 52.0 8.00 54.0 6.87 56.0 6.40 58.0 6.87 60.0 8.00 62.0 9.13 64.0 9.60 66.0 9.13 68.0 8.00 70.0 6.87 72.0 6.40 74.0 6.87 76.0 8.00 78.0 9.13 80.0 9.60 82.0 9.13 84.0 8.00 86.0 6.87 88.0 6.40 90.0 6.87 92.0 8.00 94.0 9.13 96.0 9.60%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M0 .5H96M0 15.5H96%22 stroke-width=%22.8%22/%3E%3C/g%3E%3C/svg%3E");
  --m-lace-v: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2296%22 viewBox=%220 0 16 96%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22%3E%3Cpath d=%22M8.00 0.0 8.70 2.0 9.40 4.0 10.07 6.0 10.70 8.0 11.29 10.0 11.82 12.0 12.28 14.0 12.68 16.0 12.99 18.0 13.22 20.0 13.35 22.0 13.40 24.0 13.35 26.0 13.22 28.0 12.99 30.0 12.68 32.0 12.28 34.0 11.82 36.0 11.29 38.0 10.70 40.0 10.07 42.0 9.40 44.0 8.70 46.0 8.00 48.0 7.30 50.0 6.60 52.0 5.93 54.0 5.30 56.0 4.71 58.0 4.18 60.0 3.72 62.0 3.32 64.0 3.01 66.0 2.78 68.0 2.65 70.0 2.60 72.0 2.65 74.0 2.78 76.0 3.01 78.0 3.32 80.0 3.72 82.0 4.18 84.0 4.71 86.0 5.30 88.0 5.93 90.0 6.60 92.0 7.30 94.0 8.00 96.0%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M8.00 0.0 7.30 2.0 6.60 4.0 5.93 6.0 5.30 8.0 4.71 10.0 4.18 12.0 3.72 14.0 3.32 16.0 3.01 18.0 2.78 20.0 2.65 22.0 2.60 24.0 2.65 26.0 2.78 28.0 3.01 30.0 3.32 32.0 3.72 34.0 4.18 36.0 4.71 38.0 5.30 40.0 5.93 42.0 6.60 44.0 7.30 46.0 8.00 48.0 8.70 50.0 9.40 52.0 10.07 54.0 10.70 56.0 11.29 58.0 11.82 60.0 12.28 62.0 12.68 64.0 12.99 66.0 13.22 68.0 13.35 70.0 13.40 72.0 13.35 74.0 13.22 76.0 12.99 78.0 12.68 80.0 12.28 82.0 11.82 84.0 11.29 86.0 10.70 88.0 10.07 90.0 9.40 92.0 8.70 94.0 8.00 96.0%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M8.00 0.0 9.19 2.0 10.19 4.0 10.86 6.0 11.10 8.0 10.86 10.0 10.19 12.0 9.19 14.0 8.00 16.0 6.81 18.0 5.81 20.0 5.14 22.0 4.90 24.0 5.14 26.0 5.81 28.0 6.81 30.0 8.00 32.0 9.19 34.0 10.19 36.0 10.86 38.0 11.10 40.0 10.86 42.0 10.19 44.0 9.19 46.0 8.00 48.0 6.81 50.0 5.81 52.0 5.14 54.0 4.90 56.0 5.14 58.0 5.81 60.0 6.81 62.0 8.00 64.0 9.19 66.0 10.19 68.0 10.86 70.0 11.10 72.0 10.86 74.0 10.19 76.0 9.19 78.0 8.00 80.0 6.81 82.0 5.81 84.0 5.14 86.0 4.90 88.0 5.14 90.0 5.81 92.0 6.81 94.0 8.00 96.0%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M8.00 0.0 6.81 2.0 5.81 4.0 5.14 6.0 4.90 8.0 5.14 10.0 5.81 12.0 6.81 14.0 8.00 16.0 9.19 18.0 10.19 20.0 10.86 22.0 11.10 24.0 10.86 26.0 10.19 28.0 9.19 30.0 8.00 32.0 6.81 34.0 5.81 36.0 5.14 38.0 4.90 40.0 5.14 42.0 5.81 44.0 6.81 46.0 8.00 48.0 9.19 50.0 10.19 52.0 10.86 54.0 11.10 56.0 10.86 58.0 10.19 60.0 9.19 62.0 8.00 64.0 6.81 66.0 5.81 68.0 5.14 70.0 4.90 72.0 5.14 74.0 5.81 76.0 6.81 78.0 8.00 80.0 9.19 82.0 10.19 84.0 10.86 86.0 11.10 88.0 10.86 90.0 10.19 92.0 9.19 94.0 8.00 96.0%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M9.60 0.0 9.13 2.0 8.00 4.0 6.87 6.0 6.40 8.0 6.87 10.0 8.00 12.0 9.13 14.0 9.60 16.0 9.13 18.0 8.00 20.0 6.87 22.0 6.40 24.0 6.87 26.0 8.00 28.0 9.13 30.0 9.60 32.0 9.13 34.0 8.00 36.0 6.87 38.0 6.40 40.0 6.87 42.0 8.00 44.0 9.13 46.0 9.60 48.0 9.13 50.0 8.00 52.0 6.87 54.0 6.40 56.0 6.87 58.0 8.00 60.0 9.13 62.0 9.60 64.0 9.13 66.0 8.00 68.0 6.87 70.0 6.40 72.0 6.87 74.0 8.00 76.0 9.13 78.0 9.60 80.0 9.13 82.0 8.00 84.0 6.87 86.0 6.40 88.0 6.87 90.0 8.00 92.0 9.13 94.0 9.60 96.0%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M.5 0V96M15.5 0V96%22 stroke-width=%22.8%22/%3E%3C/g%3E%3C/svg%3E");
  --m-dots: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22144%22 height=%22120%22 viewBox=%220 0 144 120%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.1%22%3E%3Ccircle cx=%224.0%22 cy=%226%22 r=%222.60%22/%3E%3Ccircle cx=%2220.0%22 cy=%226%22 r=%221.50%22/%3E%3Ccircle cx=%2236.0%22 cy=%226%22 r=%222.05%22/%3E%3Ccircle cx=%2252.0%22 cy=%226%22 r=%222.60%22/%3E%3Ccircle cx=%2284.0%22 cy=%226%22 r=%222.60%22/%3E%3Ccircle cx=%22100.0%22 cy=%226%22 r=%221.50%22/%3E%3Ccircle cx=%22116.0%22 cy=%226%22 r=%221.50%22/%3E%3Ccircle cx=%22132.0%22 cy=%226%22 r=%221.50%22/%3E%3Ccircle cx=%229.5%22 cy=%2221%22 r=%221.50%22/%3E%3Ccircle cx=%2241.5%22 cy=%2221%22 r=%222.60%22/%3E%3Ccircle cx=%2289.5%22 cy=%2221%22 r=%222.60%22/%3E%3Ccircle cx=%22105.5%22 cy=%2221%22 r=%221.50%22/%3E%3Ccircle cx=%2215.0%22 cy=%2236%22 r=%221.50%22/%3E%3Ccircle cx=%2231.0%22 cy=%2236%22 r=%222.60%22/%3E%3Ccircle cx=%2247.0%22 cy=%2236%22 r=%222.05%22/%3E%3Ccircle cx=%2263.0%22 cy=%2236%22 r=%222.05%22/%3E%3Ccircle cx=%2279.0%22 cy=%2236%22 r=%221.50%22/%3E%3Ccircle cx=%2295.0%22 cy=%2236%22 r=%221.50%22/%3E%3Ccircle cx=%22127.0%22 cy=%2236%22 r=%222.05%22/%3E%3Ccircle cx=%22143.0%22 cy=%2236%22 r=%221.50%22/%3E%3Ccircle cx=%2220.5%22 cy=%2251%22 r=%222.60%22/%3E%3Ccircle cx=%2252.5%22 cy=%2251%22 r=%222.60%22/%3E%3Ccircle cx=%2268.5%22 cy=%2251%22 r=%222.05%22/%3E%3Ccircle cx=%2284.5%22 cy=%2251%22 r=%222.60%22/%3E%3Ccircle cx=%22100.5%22 cy=%2251%22 r=%221.50%22/%3E%3Ccircle cx=%22116.5%22 cy=%2251%22 r=%222.60%22/%3E%3Ccircle cx=%22132.5%22 cy=%2251%22 r=%222.05%22/%3E%3Ccircle cx=%224.5%22 cy=%2251%22 r=%221.50%22/%3E%3Ccircle cx=%2226.0%22 cy=%2266%22 r=%222.60%22/%3E%3Ccircle cx=%2242.0%22 cy=%2266%22 r=%222.60%22/%3E%3Ccircle cx=%2258.0%22 cy=%2266%22 r=%222.05%22/%3E%3Ccircle cx=%2274.0%22 cy=%2266%22 r=%222.05%22/%3E%3Ccircle cx=%2290.0%22 cy=%2266%22 r=%222.05%22/%3E%3Ccircle cx=%22106.0%22 cy=%2266%22 r=%222.05%22/%3E%3Ccircle cx=%22122.0%22 cy=%2266%22 r=%221.50%22/%3E%3Ccircle cx=%2210.0%22 cy=%2266%22 r=%222.60%22/%3E%3Ccircle cx=%2231.5%22 cy=%2281%22 r=%221.50%22/%3E%3Ccircle cx=%2247.5%22 cy=%2281%22 r=%222.05%22/%3E%3Ccircle cx=%2263.5%22 cy=%2281%22 r=%222.60%22/%3E%3Ccircle cx=%2279.5%22 cy=%2281%22 r=%221.50%22/%3E%3Ccircle cx=%2295.5%22 cy=%2281%22 r=%222.05%22/%3E%3Ccircle cx=%22111.5%22 cy=%2281%22 r=%222.60%22/%3E%3Ccircle cx=%22143.5%22 cy=%2281%22 r=%222.60%22/%3E%3Ccircle cx=%2215.5%22 cy=%2281%22 r=%221.50%22/%3E%3Ccircle cx=%2237.0%22 cy=%2296%22 r=%221.50%22/%3E%3Ccircle cx=%2269.0%22 cy=%2296%22 r=%222.60%22/%3E%3Ccircle cx=%2285.0%22 cy=%2296%22 r=%221.50%22/%3E%3Ccircle cx=%22101.0%22 cy=%2296%22 r=%221.50%22/%3E%3Ccircle cx=%22133.0%22 cy=%2296%22 r=%222.60%22/%3E%3Ccircle cx=%2221.0%22 cy=%2296%22 r=%222.05%22/%3E%3Ccircle cx=%2242.5%22 cy=%22111%22 r=%222.60%22/%3E%3Ccircle cx=%2258.5%22 cy=%22111%22 r=%221.50%22/%3E%3Ccircle cx=%2274.5%22 cy=%22111%22 r=%222.60%22/%3E%3Ccircle cx=%2290.5%22 cy=%22111%22 r=%222.05%22/%3E%3Ccircle cx=%22106.5%22 cy=%22111%22 r=%221.50%22/%3E%3Ccircle cx=%22138.5%22 cy=%22111%22 r=%222.60%22/%3E%3Ccircle cx=%2210.5%22 cy=%22111%22 r=%222.05%22/%3E%3Ccircle cx=%2226.5%22 cy=%22111%22 r=%221.50%22/%3E%3C/g%3E%3C/svg%3E");
  --m-rosette: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%22.8%22%3E%3Cpath d=%22M148 80 148 82 146 83 142 84 138 86 132 86 125 87 117 87 108 87 99 86 90 85 80 84 71 82 62 80 53 77 45 75 37 72 31 69 25 66 21 63 18 61 16 59 16 57 17 56 19 55 22 55 27 55 32 56 39 58 46 60 54 63 62 67 70 71 79 75 87 80 95 85 103 91 110 96 116 101 122 106 126 111 129 115 132 118 133 121 133 123 132 125 130 125 126 124 123 122 118 120 112 116 107 111 100 106 94 100 87 94 81 86 74 79 69 71 63 64 58 56 54 49 51 43 48 37 46 31 45 27 45 24 45 22 46 21 48 21 51 22 54 25 57 29 61 34 65 40 69 47 73 55 77 63 81 72 84 81 87 90 90 99 92 108 94 116 95 124 95 130 95 136 95 141 94 144 93 147 92 147 90 147 88 145 86 142 84 137 82 131 81 125 79 117 78 108 77 99 77 90 76 80 77 70 77 61 78 52 79 43 81 35 82 29 84 23 86 18 88 15 90 13 92 13 93 13 94 16 95 19 95 24 95 30 95 36 94 44 92 52 90 61 87 70 84 79 81 88 77 97 73 105 69 113 65 120 61 126 57 131 54 135 51 138 48 139 46 139 45 138 45 136 45 133 46 129 48 123 51 117 54 111 58 104 63 96 69 89 74 81 81 74 87 66 94 60 100 54 107 49 112 44 118 40 123 38 126 36 130 35 132 35 133 37 133 39 132 42 129 45 126 49 122 54 116 59 110 64 103 69 95 75 87 80 79 85 70 89 62 93 54 97 46 100 39 102 32 104 27 105 22 105 19 105 17 104 16 103 16 101 18 99 21 97 25 94 31 91 37 88 45 85 53 83 62 80 71 78 80 76 90 75 99 74 108 73 117 73 125 73 132 74 138 74 142 76 146 77 148 78 148 80Z%22/%3E%3Cpath d=%22M136 80 135 83 133 86 130 89 126 92 121 94 116 96 109 97 102 98 94 98 86 97 78 96 70 94 62 92 55 90 48 87 42 83 37 80 33 76 30 72 28 68 27 65 27 62 29 59 31 56 35 55 39 53 44 53 50 53 57 54 64 56 71 58 79 61 86 65 93 69 99 73 105 78 111 83 115 89 119 94 122 99 124 104 125 108 125 112 124 115 121 117 119 119 115 119 110 119 105 118 100 116 94 113 88 109 82 105 76 100 71 94 65 88 61 81 56 74 53 68 50 61 48 55 47 49 47 44 47 39 48 36 50 33 53 31 56 31 60 31 64 32 68 35 73 38 77 43 82 48 86 55 89 61 93 69 96 76 98 84 100 92 101 99 102 106 101 113 101 119 99 124 97 129 95 132 92 134 89 135 86 135 83 133 79 131 76 127 73 123 71 117 68 111 66 104 65 96 64 88 64 80 64 72 65 64 66 56 68 49 71 43 73 37 76 33 79 29 83 27 86 25 89 25 92 26 95 28 97 31 99 36 101 41 101 47 102 54 101 61 100 68 98 76 96 84 93 91 89 99 86 105 82 112 77 117 73 122 68 125 64 128 60 129 56 129 53 129 50 127 48 124 47 121 47 116 47 111 48 105 50 99 53 92 56 86 61 79 65 72 71 66 76 60 82 55 88 51 94 47 100 44 105 42 110 41 115 41 119 41 121 43 124 45 125 48 125 52 124 56 122 61 119 66 115 71 111 77 105 82 99 87 93 91 86 95 79 99 71 102 64 104 57 106 50 107 44 107 39 107 35 105 31 104 29 101 27 98 27 95 28 92 30 88 33 84 37 80 42 77 48 73 55 70 62 68 70 66 78 64 86 63 94 62 102 62 109 63 116 64 121 66 126 68 130 71 133 74 135 77 136 80Z%22 stroke-width=%22.6%22/%3E%3Ccircle cx=%2280%22 cy=%2280%22 r=%2276%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2280%22 cy=%2280%22 r=%2272%22/%3E%3C/g%3E%3C/svg%3E");
  --m-thread: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2228%22 viewBox=%220 0 12 28%22%3E%3Cpath d=%22M2 2h8M2 8h8M2 14h8M2 20h8M2 26h8%22 stroke=%22%23000%22 stroke-width=%221.6%22 fill=%22none%22/%3E%3Cpath d=%22M0 5h12M0 17h12%22 stroke=%22%23000%22 stroke-width=%22.5%22 fill=%22none%22/%3E%3C/svg%3E");
  --m-ribbon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22520%22 height=%22360%22 viewBox=%220 0 520 360%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%22.8%22%3E%3Cellipse cx=%22260%22 cy=%22226%22 rx=%22110%22 ry=%2221%22 transform=%22rotate%280 260 226%29%22/%3E%3Cellipse cx=%22269%22 cy=%22229%22 rx=%22113%22 ry=%2222%22 transform=%22rotate%285 269 229%29%22/%3E%3Cellipse cx=%22278%22 cy=%22232%22 rx=%22115%22 ry=%2224%22 transform=%22rotate%2810 278 232%29%22/%3E%3Cellipse cx=%22287%22 cy=%22235%22 rx=%22118%22 ry=%2225%22 transform=%22rotate%2815 287 235%29%22/%3E%3Cellipse cx=%22295%22 cy=%22237%22 rx=%22120%22 ry=%2227%22 transform=%22rotate%2819 295 237%29%22/%3E%3Cellipse cx=%22303%22 cy=%22240%22 rx=%22122%22 ry=%2228%22 transform=%22rotate%2824 303 240%29%22/%3E%3Cellipse cx=%22311%22 cy=%22242%22 rx=%22124%22 ry=%2230%22 transform=%22rotate%2829 311 242%29%22/%3E%3Cellipse cx=%22319%22 cy=%22244%22 rx=%22126%22 ry=%2231%22 transform=%22rotate%2834 319 244%29%22/%3E%3Cellipse cx=%22326%22 cy=%22246%22 rx=%22127%22 ry=%2233%22 transform=%22rotate%2839 326 246%29%22/%3E%3Cellipse cx=%22332%22 cy=%22247%22 rx=%22128%22 ry=%2234%22 transform=%22rotate%2844 332 247%29%22/%3E%3Cellipse cx=%22338%22 cy=%22249%22 rx=%22128%22 ry=%2235%22 transform=%22rotate%2849 338 249%29%22/%3E%3Cellipse cx=%22343%22 cy=%22250%22 rx=%22128%22 ry=%2237%22 transform=%22rotate%2853 343 250%29%22/%3E%3Cellipse cx=%22348%22 cy=%22251%22 rx=%22128%22 ry=%2238%22 transform=%22rotate%2858 348 251%29%22/%3E%3Cellipse cx=%22352%22 cy=%22251%22 rx=%22127%22 ry=%2239%22 transform=%22rotate%2863 352 251%29%22/%3E%3Cellipse cx=%22355%22 cy=%22252%22 rx=%22126%22 ry=%2240%22 transform=%22rotate%2868 355 252%29%22/%3E%3Cellipse cx=%22357%22 cy=%22252%22 rx=%22124%22 ry=%2241%22 transform=%22rotate%2873 357 252%29%22/%3E%3Cellipse cx=%22359%22 cy=%22252%22 rx=%22122%22 ry=%2242%22 transform=%22rotate%2878 359 252%29%22/%3E%3Cellipse cx=%22360%22 cy=%22252%22 rx=%22120%22 ry=%2243%22 transform=%22rotate%2883 360 252%29%22/%3E%3Cellipse cx=%22360%22 cy=%22251%22 rx=%22118%22 ry=%2243%22 transform=%22rotate%2887 360 251%29%22/%3E%3Cellipse cx=%22359%22 cy=%22251%22 rx=%22115%22 ry=%2244%22 transform=%22rotate%2892 359 251%29%22/%3E%3Cellipse cx=%22357%22 cy=%22250%22 rx=%22113%22 ry=%2245%22 transform=%22rotate%2897 357 250%29%22/%3E%3Cellipse cx=%22355%22 cy=%22249%22 rx=%22110%22 ry=%2245%22 transform=%22rotate%28102 355 249%29%22/%3E%3Cellipse cx=%22352%22 cy=%22247%22 rx=%22107%22 ry=%2245%22 transform=%22rotate%28107 352 247%29%22/%3E%3Cellipse cx=%22348%22 cy=%22246%22 rx=%22105%22 ry=%2246%22 transform=%22rotate%28112 348 246%29%22/%3E%3Cellipse cx=%22343%22 cy=%22244%22 rx=%22102%22 ry=%2246%22 transform=%22rotate%28117 343 244%29%22/%3E%3Cellipse cx=%22338%22 cy=%22242%22 rx=%22100%22 ry=%2246%22 transform=%22rotate%28121 338 242%29%22/%3E%3Cellipse cx=%22332%22 cy=%22240%22 rx=%2298%22 ry=%2246%22 transform=%22rotate%28126 332 240%29%22/%3E%3Cellipse cx=%22326%22 cy=%22238%22 rx=%2296%22 ry=%2246%22 transform=%22rotate%28131 326 238%29%22/%3E%3Cellipse cx=%22319%22 cy=%22235%22 rx=%2295%22 ry=%2246%22 transform=%22rotate%28136 319 235%29%22/%3E%3Cellipse cx=%22311%22 cy=%22233%22 rx=%2293%22 ry=%2245%22 transform=%22rotate%28141 311 233%29%22/%3E%3Cellipse cx=%22303%22 cy=%22230%22 rx=%2293%22 ry=%2245%22 transform=%22rotate%28146 303 230%29%22/%3E%3Cellipse cx=%22295%22 cy=%22227%22 rx=%2292%22 ry=%2244%22 transform=%22rotate%28151 295 227%29%22/%3E%3Cellipse cx=%22287%22 cy=%22224%22 rx=%2292%22 ry=%2244%22 transform=%22rotate%28155 287 224%29%22/%3E%3Cellipse cx=%22278%22 cy=%22221%22 rx=%2293%22 ry=%2243%22 transform=%22rotate%28160 278 221%29%22/%3E%3Cellipse cx=%22269%22 cy=%22217%22 rx=%2293%22 ry=%2242%22 transform=%22rotate%28165 269 217%29%22/%3E%3Cellipse cx=%22260%22 cy=%22214%22 rx=%2295%22 ry=%2241%22 transform=%22rotate%28170 260 214%29%22/%3E%3Cellipse cx=%22251%22 cy=%22210%22 rx=%2296%22 ry=%2240%22 transform=%22rotate%28175 251 210%29%22/%3E%3Cellipse cx=%22242%22 cy=%22206%22 rx=%2298%22 ry=%2239%22 transform=%22rotate%28180 242 206%29%22/%3E%3Cellipse cx=%22233%22 cy=%22203%22 rx=%22100%22 ry=%2238%22 transform=%22rotate%28185 233 203%29%22/%3E%3Cellipse cx=%22225%22 cy=%22199%22 rx=%22102%22 ry=%2237%22 transform=%22rotate%28189 225 199%29%22/%3E%3Cellipse cx=%22217%22 cy=%22195%22 rx=%22105%22 ry=%2236%22 transform=%22rotate%28194 217 195%29%22/%3E%3Cellipse cx=%22209%22 cy=%22191%22 rx=%22107%22 ry=%2235%22 transform=%22rotate%28199 209 191%29%22/%3E%3Cellipse cx=%22201%22 cy=%22187%22 rx=%22110%22 ry=%2233%22 transform=%22rotate%28204 201 187%29%22/%3E%3Cellipse cx=%22194%22 cy=%22183%22 rx=%22113%22 ry=%2232%22 transform=%22rotate%28209 194 183%29%22/%3E%3Cellipse cx=%22188%22 cy=%22179%22 rx=%22115%22 ry=%2231%22 transform=%22rotate%28214 188 179%29%22/%3E%3Cellipse cx=%22182%22 cy=%22175%22 rx=%22118%22 ry=%2229%22 transform=%22rotate%28219 182 175%29%22/%3E%3Cellipse cx=%22177%22 cy=%22171%22 rx=%22120%22 ry=%2228%22 transform=%22rotate%28223 177 171%29%22/%3E%3Cellipse cx=%22172%22 cy=%22167%22 rx=%22122%22 ry=%2226%22 transform=%22rotate%28228 172 167%29%22/%3E%3Cellipse cx=%22168%22 cy=%22163%22 rx=%22124%22 ry=%2224%22 transform=%22rotate%28233 168 163%29%22/%3E%3Cellipse cx=%22165%22 cy=%22159%22 rx=%22126%22 ry=%2223%22 transform=%22rotate%28238 165 159%29%22/%3E%3Cellipse cx=%22163%22 cy=%22155%22 rx=%22127%22 ry=%2221%22 transform=%22rotate%28243 163 155%29%22/%3E%3Cellipse cx=%22161%22 cy=%22152%22 rx=%22128%22 ry=%2222%22 transform=%22rotate%28248 161 152%29%22/%3E%3Cellipse cx=%22160%22 cy=%22148%22 rx=%22128%22 ry=%2223%22 transform=%22rotate%28253 160 148%29%22/%3E%3Cellipse cx=%22160%22 cy=%22144%22 rx=%22128%22 ry=%2225%22 transform=%22rotate%28257 160 144%29%22/%3E%3Cellipse cx=%22161%22 cy=%22141%22 rx=%22128%22 ry=%2226%22 transform=%22rotate%28262 161 141%29%22/%3E%3Cellipse cx=%22163%22 cy=%22138%22 rx=%22127%22 ry=%2228%22 transform=%22rotate%28267 163 138%29%22/%3E%3Cellipse cx=%22165%22 cy=%22134%22 rx=%22126%22 ry=%2229%22 transform=%22rotate%28272 165 134%29%22/%3E%3Cellipse cx=%22168%22 cy=%22131%22 rx=%22124%22 ry=%2231%22 transform=%22rotate%28277 168 131%29%22/%3E%3Cellipse cx=%22172%22 cy=%22128%22 rx=%22122%22 ry=%2232%22 transform=%22rotate%28282 172 128%29%22/%3E%3Cellipse cx=%22177%22 cy=%22126%22 rx=%22120%22 ry=%2234%22 transform=%22rotate%28287 177 126%29%22/%3E%3Cellipse cx=%22182%22 cy=%22123%22 rx=%22118%22 ry=%2235%22 transform=%22rotate%28291 182 123%29%22/%3E%3Cellipse cx=%22188%22 cy=%22121%22 rx=%22115%22 ry=%2236%22 transform=%22rotate%28296 188 121%29%22/%3E%3Cellipse cx=%22194%22 cy=%22119%22 rx=%22113%22 ry=%2237%22 transform=%22rotate%28301 194 119%29%22/%3E%3Cellipse cx=%22201%22 cy=%22117%22 rx=%22110%22 ry=%2239%22 transform=%22rotate%28306 201 117%29%22/%3E%3C/g%3E%3C/svg%3E");
  --m-diamonds: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2236%22 height=%2214%22 viewBox=%220 0 36 14%22%3E%3Cpath d=%22M0 7H9M27 7H36%22 stroke=%22%23000%22 stroke-width=%22.8%22 fill=%22none%22/%3E%3Cpath d=%22M18 1.5 25 7 18 12.5 11 7Z%22 fill=%22%23000%22/%3E%3C/svg%3E");
  /* End of money assets */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 22px;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 22px 44px -26px rgb(0 0 0 / .45);
  --iris: linear-gradient(115deg, var(--v1), var(--v2) 35%, var(--v3) 68%, var(--v4));
  --iris-light: linear-gradient(100deg, var(--vl1), var(--vl2) 50%, var(--vl3));
  --iris-dark: linear-gradient(100deg, var(--vd1), var(--vd2) 50%, var(--vd3));
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--body); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--display); color: inherit; line-height: 1.07; letter-spacing: -.028em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.02; }
h3 { font-size: 1.28rem; font-weight: 720; letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--vd1); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible { outline-color: var(--vl1); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.i { width: 1.15em; height: 1.15em; flex: none; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--cta); color: var(--onCta); padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 12px; }

/* ---------- Ink cycling: children take the four inks in turn ---------- */
.inks > :nth-child(4n+1) { --c: var(--v1); --cl: var(--vl1); --cd: var(--vd1); --onc: var(--on1); }
.inks > :nth-child(4n+2) { --c: var(--v2); --cl: var(--vl2); --cd: var(--vd2); --onc: var(--on2); }
.inks > :nth-child(4n+3) { --c: var(--v3); --cl: var(--vl3); --cd: var(--vd3); --onc: var(--on3); }
.inks > :nth-child(4n+4) { --c: var(--v4); --cl: var(--vl4); --cd: var(--vd4); --onc: var(--on4); }

/* ---------- Buttons, labels ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1 var(--body); padding: 15px 22px; border-radius: 999px; text-decoration: none; background: var(--primary); color: var(--onPrimary); border: 2px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px var(--ink); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 10px 16px; font-size: .92rem; }
.btn-ghost { background: transparent; color: var(--link); border-color: currentColor; }
.btn-cta { background: var(--cta); color: var(--onCta); }
.dark .btn { background: var(--cta); color: var(--onCta); }
.dark .btn:hover { box-shadow: 0 14px 30px -12px var(--v1); }
.dark .btn-ghost { background: transparent; color: var(--onDeep); border-color: color-mix(in srgb, var(--onDeep) 60%, transparent); }
/* Labels are set like the small print on a note: monospaced capitals, no pill around them. */
.eyebrow { display: inline-flex; align-items: center; gap: 11px; font: 600 .76rem/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 26px; color: var(--ink); }
.dark .eyebrow { color: var(--onDeep); }
.eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cta) 28%, transparent); }
/* Section labels are numbered down the page: "01 —— What we build". */
main { counter-reset: sec; }
.kicker { counter-increment: sec; display: flex; align-items: center; gap: 14px; color: var(--vd1); font: 600 .74rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 20px; }
.kicker::before { content: counter(sec, decimal-leading-zero); flex: none; font-weight: 800; padding-right: 54px; background: linear-gradient(currentColor, currentColor) right center / 40px 1px no-repeat; }
.section-head > .kicker::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.dark .kicker { color: var(--vl1); }
.chip { display: inline-block; background: var(--tint); color: var(--link); font: 700 .78rem/1.2 var(--body); padding: 6px 10px; border-radius: 8px; margin: 0 0 12px; }
.lead { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--muted); max-width: 58ch; }
.dark .lead, .dark p { color: var(--onDeep); }
.ink-text { background: var(--iris-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .ink-text { background-image: var(--iris-light); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- Foil: the holographic strip on banknotes ---------- */
.foil { background: linear-gradient(110deg, var(--v1), var(--v2), var(--v3), var(--v4), var(--v1)) 0 0 / 300% 100%; }
.iris-line { height: 4px; background: var(--iris); }

/* ---------- Header (dark, so the white MTL logo reads as designed) ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--deep) 90%, black); color: var(--onDeep); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); }
.site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--iris); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 74px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--onDeep); }
.brand:hover { text-decoration: none; }
.brand img { height: 40px; width: auto; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.brand:hover img { transform: translateX(3px) skewX(-6deg); }
.lab { font: 800 .78rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px 6px; border-radius: 8px; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { position: relative; color: var(--onDeep); text-decoration: none; font-weight: 600; font-size: .96rem; padding: 10px 13px; border-radius: 999px; transition: background .2s; }
.nav a:hover { background: color-mix(in srgb, var(--onDeep) 12%, transparent); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--iris-light); }
.site-head .btn { background: var(--cta); color: var(--onCta); }
.menu-btn { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--onDeep) 30%, transparent); background: transparent; color: var(--onDeep); cursor: pointer; }
.menu-btn .i { width: 22px; height: 22px; }
@media (max-width: 1000px) {
  .js .menu-btn { display: inline-flex; }
  .js .nav { position: absolute; top: calc(100% + 3px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--gutter) 20px; background: color-mix(in srgb, var(--deep) 94%, black); box-shadow: var(--shadow); display: none; }
  .js .nav-open .nav { display: flex; }
  .js .nav a { padding: 13px 14px; font-size: 1.06rem; }
  .js .nav a[aria-current="page"]::after { left: 14px; right: auto; width: 40px; }
  .head-cta { margin-left: auto; }
  html:not(.js) .site-head .wrap { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  html:not(.js) .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
}
@media (max-width: 460px) {
  .head-cta span { display: none; }
  .head-cta { padding: 11px; }
  .brand img { height: 32px; }
  .lab { display: none; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(70px, 9vw, 120px) 0; }
.bg-surface { background: var(--surface); }
.bg-tint { background: var(--tint); }
.dark { background: var(--deep); color: var(--onDeep); isolation: isolate; overflow: hidden; }
.dark a:not(.btn) { color: var(--onDeep); }
/* Section heads: the label runs across the top, the heading sits left and the introduction answers it on the right. */
.section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(28px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head > * { grid-column: 1; }
.section-head > .kicker { grid-column: 1 / -1; }
.section-head > h2 { grid-row: 2; margin-bottom: 0; }
.section-head > h2 ~ p { grid-column: 2; margin-bottom: 4px; }
.section-head > h2 + p { grid-row: 2; }
.section-head p:last-child { margin-bottom: 0; }
.split > .section-head, .faq-split > .section-head, .section-head.center { display: block; }
.split > .section-head > h2, .faq-split > .section-head > h2 { margin-bottom: .45em; }
@media (max-width: 860px) { .section-head { display: block; } .section-head > h2 { margin-bottom: .45em; } }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .kicker { justify-content: center; }
.sticky { position: sticky; top: 112px; }
@media (max-width: 900px) { .sticky { position: static; } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.split.middle { align-items: center; }
@media (max-width: 900px) { .split, .split-wide { grid-template-columns: minmax(0, 1fr); } }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; margin-top: 30px; color: var(--vd1); }
.more .i { transition: transform .2s; }
.more:hover .i { transform: translateX(4px); }

/* Glows: soft pools of the day's inks, like the rainbow printing on a note */
.glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.g1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8vw; top: -12vw; background: var(--v1); }
.g2 { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; right: 24vw; bottom: -18vw; background: var(--v2); opacity: .42; }
.g3 { width: 28vw; height: 28vw; max-width: 400px; max-height: 400px; left: -10vw; top: 30%; background: var(--v3); opacity: .3; }
.dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 88%, transparent) 0%, transparent 62%); }

/* Patterns: the script gives each [data-pat] element its own pattern, in one of today's inks. */
[data-pat] { position: relative; isolation: isolate; }
[data-pat]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--pat, none); background-size: var(--pat-size, auto); opacity: var(--pat-o, .2); }
.pat-full::before { --pat-o: .22; -webkit-mask-image: linear-gradient(100deg, rgb(0 0 0 / .2) 20%, rgb(0 0 0 / .65) 55%, #000 85%); mask-image: linear-gradient(100deg, rgb(0 0 0 / .2) 20%, rgb(0 0 0 / .65) 55%, #000 85%); }
.pat-corner::before { --pat-o: .32; -webkit-mask-image: radial-gradient(80% 70% at 100% 0%, #000, transparent 72%); mask-image: radial-gradient(80% 70% at 100% 0%, #000, transparent 72%); }
.pat-edge::before { --pat-o: .28; -webkit-mask-image: linear-gradient(to right, #000, transparent 45%); mask-image: linear-gradient(to right, #000, transparent 45%); }
.pat-low::before { --pat-o: .28; -webkit-mask-image: linear-gradient(to top, #000, transparent 60%); mask-image: linear-gradient(to top, #000, transparent 60%); }
.ink-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ink-layer::before { --pat-o: .2; -webkit-mask-image: radial-gradient(60% 80% at 15% 100%, #000, transparent 70%); mask-image: radial-gradient(60% 80% at 15% 100%, #000, transparent 70%); }

/* ---------- Section washes ----------
   Like the colour shading across a banknote, every section runs from a light tint of one of today's inks to a
   deep shade of it, and the direction alternates down the page: light-to-dark left to right, then right to left.
   The deep shades were chosen so the palette's ink text still reads at 5:1 anywhere on the wash. */
/* Like the shading on a note, no section is one flat colour: a light section runs from a pale tint into its ink and on
   into a second ink (--wn), with a lighter patch (--spot) that moves corner to corner down the page; a dark section
   runs from its ink into the deep colour, with a glow of a second ink (--dn). The fourth ink, the fern green, only
   ever shows at the far end of an aqua wash or as a glow, so it stays a hint. */
main > section { --dir: 90deg; --spot: 84% 12%; }
main > section:nth-of-type(even) { --dir: 270deg; --spot: 16% 88%; }
main > section:nth-of-type(4n+1) { --wl: var(--wl1); --wd: var(--wd1); --wn: var(--wd3); --dk: var(--dk1); --dn: var(--dk3); }
main > section:nth-of-type(4n+2) { --wl: var(--wl2); --wd: var(--wd2); --wn: var(--wd1); --dk: var(--dk2); --dn: var(--dk1); }
main > section:nth-of-type(4n+3) { --wl: var(--wl3); --wd: var(--wd3); --wn: var(--wd1); --dk: var(--dk3); --dn: var(--dk1); }
main > section:nth-of-type(4n+4) { --wl: var(--wl1); --wd: var(--wd3); --wn: var(--wd4); --dk: var(--dk3); --dn: var(--dk4); }
main > section:not(.dark) { background: radial-gradient(ellipse 55% 70% at var(--spot), rgb(255 255 255 / .4), transparent 70%), linear-gradient(var(--dir), var(--wl) 0%, var(--wl) 8%, var(--wd) 68%, var(--wn) 100%); }
main > section.dark { background: radial-gradient(ellipse 55% 75% at var(--spot), var(--dn), transparent 72%), linear-gradient(var(--dir), var(--dk) 0%, var(--deep) 78%); }
/* Engraving in two tones: dark-ink lines over the light end, white lines over the deep end. */
main > section:not(.dark)[data-pat]::before { --pat-o: .32; -webkit-mask-image: linear-gradient(var(--dir), #000 0%, rgb(0 0 0 / .4) 50%, transparent 92%); mask-image: linear-gradient(var(--dir), #000 0%, rgb(0 0 0 / .4) 50%, transparent 92%); }
main > section:not(.dark)[data-pat]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--pat2, none); background-size: var(--pat-size, auto); opacity: .6; -webkit-mask-image: linear-gradient(var(--dir), transparent 15%, rgb(0 0 0 / .55) 55%, #000 100%); mask-image: linear-gradient(var(--dir), transparent 15%, rgb(0 0 0 / .55) 55%, #000 100%); }
/* Text that sits straight on a wash uses the palette's ink, which reads on both ends. */
main > section:not(.dark) :is(.lead, .kicker, .more, .note-line, .role, .facts, .rows, .steps, .faq, .project-label, .asks-label) { color: var(--ink); }
main > section:not(.dark) .split > .ticks li::before, main > section:not(.dark) .split > div > .ticks li::before { background: var(--ink); }
main > section:not(.dark) .ink-text { background-image: linear-gradient(100deg, color-mix(in srgb, var(--vd1) 50%, black), color-mix(in srgb, var(--vd2) 50%, black) 50%, color-mix(in srgb, var(--vd3) 50%, black)); }
.microline { position: absolute; left: 0; right: 0; bottom: 12px; overflow: hidden; white-space: nowrap; font: 700 7.5px/1 var(--mono); letter-spacing: .34em; color: var(--ink); opacity: .45; pointer-events: none; user-select: none; }
.dark .microline { color: var(--onDeep); opacity: .38; }
/* The microprint words are drawn here, not written in the page, so they stay decoration and never count as page text. */
.microline::before { content: "MUSSKART TECHNOLOGY LIMITED · MUSSKART LAB · NIGERIA · MMXXVII · MUSSKART TECHNOLOGY LIMITED · MUSSKART LAB · NIGERIA · MMXXVII · MUSSKART TECHNOLOGY LIMITED · MUSSKART LAB · NIGERIA · MMXXVII · MUSSKART TECHNOLOGY LIMITED · MUSSKART LAB · NIGERIA · MMXXVII · MUSSKART TECHNOLOGY LIMITED · MUSSKART LAB · NIGERIA · MMXXVII · MUSSKART TECHNOLOGY LIMITED · MUSSKART LAB · NIGERIA · MMXXVII · "; }

/* ---------- Hero ---------- */
.hero { padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { max-width: 17ch; font-size: clamp(2.3rem, 4.5vw, 3.75rem); }
.hero-inner h1 { max-width: 18ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font-size: .96rem; list-style: none; color: var(--muted); }
.dark .facts { color: var(--onDeep); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts .i { color: var(--vd3); }
.dark .facts .i { color: var(--vl3); }
/* The masthead line across the top of the home hero, like the printed band along the edge of a note */
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 24px; padding: 12px 0; margin: 0 0 clamp(40px, 6vw, 72px); border-block: 1px solid color-mix(in srgb, var(--onDeep) 24%, transparent); font: 600 .72rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--onDeep); }
.masthead span:nth-child(2) { text-align: center; }
.masthead span:last-child { text-align: right; }
@media (max-width: 760px) { .masthead { grid-template-columns: 1fr 1fr; } .masthead span:nth-child(2) { display: none; } }
.hero:has(.masthead) { padding-top: clamp(26px, 3vw, 40px); }
.reach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 24px 0 0; font-size: .96rem; }
.reach b { font: 600 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.reach a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 5px; }
/* The facts strip along the foot of the home hero, divided into columns */
.facts-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 7vw, 84px); border-top: 1px solid color-mix(in srgb, var(--onDeep) 24%, transparent); }
.facts-strip li { align-items: flex-start; padding: 20px 20px 0; line-height: 1.4; }
.facts-strip li:first-child { padding-left: 0; }
.facts-strip li + li { border-left: 1px solid color-mix(in srgb, var(--onDeep) 24%, transparent); }
.facts-strip .i { color: var(--cta); margin-top: 1px; }
@media (max-width: 860px) { .facts-strip { grid-template-columns: 1fr 1fr; } .facts-strip li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 480px) { .facts-strip { grid-template-columns: minmax(0, 1fr); } .facts-strip li { border-left: 0 !important; padding: 14px 0 0; } }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: .9rem; margin-bottom: 22px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.dark .crumbs a { color: var(--vl1); }
.hero-inner .seal { position: absolute; right: max(-150px, -10vw); top: 50%; width: clamp(300px, 42vw, 580px); height: auto; color: var(--vl2); opacity: .22; transform: translateY(-50%); pointer-events: none; z-index: -1; }

/* ---------- Device mockups with real client sites ---------- */
.stage { position: relative; aspect-ratio: 1.16; width: 100%; }
.laptop { position: absolute; left: 2%; top: 9%; width: 80%; filter: drop-shadow(0 34px 40px rgb(0 0 0 / .45)); }
.laptop-screen { aspect-ratio: 16 / 10; background: #0b0c10; border-radius: 16px 16px 0 0; padding: 2.4% 2.4% 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.laptop-base { position: relative; height: 16px; margin: 0 -7%; background: linear-gradient(#e6e8ec, #9aa0aa); border-radius: 2px 2px 20px 20px; }
.laptop-base::before { content: ""; position: absolute; left: 41%; right: 41%; top: 0; height: 6px; background: #7d838d; border-radius: 0 0 8px 8px; }
.phone { position: absolute; width: 25%; aspect-ratio: 9 / 19.5; background: #0b0c10; border-radius: 30px; padding: 2.6%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .16), 0 30px 50px -18px rgb(0 0 0 / .55); }
.phone::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 4.5%; width: 26%; height: 2.6%; transform: translateX(-50%); background: #0b0c10; border-radius: 99px; }
.phone .screen { border-radius: 22px; }
.p1 { right: 2%; top: 26%; }
.p2 { right: 28%; top: 44%; width: 21%; }
.screen { position: relative; height: 100%; overflow: hidden; border-radius: 8px 8px 0 0; background: #fff; container-type: size; }
.screen img { width: 100%; height: auto; }
.screen.still img { height: 100%; object-fit: cover; object-position: top center; }
.float-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--surface); color: var(--ink); font: 700 .85rem/1 var(--body); box-shadow: 0 16px 30px -14px rgb(0 0 0 / .5); white-space: nowrap; z-index: 3; }
.float-chip img { width: 26px; height: 26px; object-fit: contain; }
.seal-badge { position: absolute; z-index: 3; left: -2%; bottom: 2%; width: 26%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; font: 800 clamp(.7rem, 1.2vw, .95rem)/1.1 var(--display); letter-spacing: .02em; text-shadow: 0 1px 3px rgb(0 0 0 / .55); box-shadow: 0 18px 34px -14px rgb(0 0 0 / .55); }
.seal-badge::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / .75); }
.seal-badge b { display: block; font-size: 1.9em; letter-spacing: -.03em; }
@media (max-width: 960px) { .stage { max-width: 620px; margin: 10px auto 0; } }
@media (max-width: 560px) { .float-chip { font-size: .72rem; padding: 6px 9px 6px 6px; } .float-chip img { width: 20px; height: 20px; } }

/* ---------- Client logo wall ---------- */
/* One panel ruled into cells, rather than a scatter of separate tiles */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.logos li { display: grid; place-items: center; height: 120px; padding: 16px; box-shadow: inset -1px -1px 0 #e3e8ee; transition: background .25s; }
.logos li:hover { background: #f4f8fc; }
.logos img { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; transition: transform .3s; }
.logos li:hover img { transform: scale(1.06); }
@media (max-width: 560px) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos li { height: 92px; padding: 10px; }
  .logos img { max-height: 58px; }
  .logos .word { font-size: .8rem; }
}
.logos .word { font: 800 1rem/1.15 var(--display); text-align: center; color: #1d1d1f; letter-spacing: -.01em; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.card { position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 28px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c, var(--v1)); }
.bg-surface .card { background: var(--bg); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card h3 { margin-top: 20px; }
.card p { color: var(--muted); margin-bottom: 0; }
.card a.stretch { text-decoration: none; color: var(--ink); }
.card a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 700; color: var(--cd, var(--vd1)); }
.card .go .i { transition: transform .2s; }
.card:hover .go .i { transform: translateX(4px); }
.icon-tile { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--c, var(--v1)); color: var(--onc, #fff); box-shadow: 0 12px 22px -12px var(--c, var(--v1)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.icon-tile .i { width: 27px; height: 27px; }
.card:hover .icon-tile { transform: rotate(-10deg) scale(1.08); }
.cards-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* Staggered cards beside a heading that stays put: the second column sits lower, and the cards take turns
   between deep, plain and tinted, so the column reads as a set rather than a grid of identical boxes. */
.why { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 900px) { .why { grid-template-columns: minmax(0, 1fr); } }
.cards-stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 56px; }
.cards-stagger > :nth-child(even) { top: 56px; }
.cards-stagger .card::after { display: none; }
.cards-stagger .card:nth-child(4n+1) { background: var(--deep); color: var(--onDeep); border-color: transparent; }
.cards-stagger .card:nth-child(4n+1) p { color: var(--onDeep); }
.cards-stagger .card:nth-child(4n+3) { background: color-mix(in srgb, var(--v3) 16%, var(--surface)); border-color: transparent; }
.cards-stagger .card:nth-child(4n+3) p { color: var(--ink); }
@media (max-width: 640px) { .cards-stagger { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; } .cards-stagger > :nth-child(even) { top: 0; } }

/* Services as a numbered index: number, icon, name, what it is, arrow; ruled lines between, no boxes */
.rows { --rule: color-mix(in srgb, currentColor 24%, transparent); list-style: none; counter-reset: row; border-top: 1px solid var(--rule); }
.row { counter-increment: row; position: relative; display: grid; grid-template-columns: 3ch 52px minmax(0, 1.1fr) minmax(0, 1fr) 46px; align-items: center; gap: 14px clamp(16px, 2.6vw, 34px); padding: 24px 6px; border-bottom: 1px solid var(--rule); transition: background .25s, padding .25s; }
.row::before { content: counter(row, decimal-leading-zero); font: 700 .78rem/1 var(--mono); letter-spacing: .1em; }
.row .icon-tile { width: 50px; height: 50px; border-radius: 15px; }
.row .icon-tile .i { width: 24px; height: 24px; }
.row h3 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 2.05rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.row h3 a { color: inherit; text-decoration: none; }
.row a.stretch::after { content: ""; position: absolute; inset: 0; }
.row p { margin: 0; font-size: 1rem; line-height: 1.55; }
.row-go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .3s, background .3s, color .3s; }
.row:hover { background: color-mix(in srgb, var(--surface) 62%, transparent); padding-inline: 18px; }
.row:hover .row-go { background: var(--ink); border-color: var(--ink); color: var(--surface); transform: rotate(-45deg); }
.row:hover .icon-tile { transform: rotate(-10deg) scale(1.08); }
@media (max-width: 760px) {
  .row { grid-template-columns: 3ch 44px minmax(0, 1fr) 40px; padding: 20px 2px; }
  .row p { grid-column: 3 / -1; grid-row: 2; }
  .row .icon-tile { width: 44px; height: 44px; }
  .row-go { width: 40px; height: 40px; }
}
/* "Often asked for": the common requests, each a link to its service */
.asks { margin-top: 34px; }
.asks-label { margin: 0 0 12px; font: 600 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.ask-chips a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; box-shadow: 0 6px 16px -10px rgb(0 0 0 / .4); transition: transform .2s, box-shadow .2s; }
.ask-chips a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--v1)); }
.ask-chips a:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgb(0 0 0 / .5); }

/* Ticks */
.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks li::before { --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E"); content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; background: var(--cd, var(--vd3)); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }
.dark .ticks li::before { background: var(--cl, var(--vl3)); }

/* Steps */
/* Steps: open columns along a ruled line, each numbered, with an arrow marker on the rule leading to the next */
.steps { --gap: clamp(26px, 3.4vw, 48px); list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 40px var(--gap); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-top: 30px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 20px; font: 700 .78rem/1 var(--mono); letter-spacing: .14em; color: var(--cd, var(--vd1)); }
.dark .steps li::before { color: var(--cl, var(--vl1)); }
main > section:not(.dark) .steps li::before { color: inherit; }
.steps li:not(:last-child)::after { content: "→"; position: absolute; top: -14px; right: calc(var(--gap) / -2 - 14px); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c, var(--v1)); color: var(--onc, #fff); font: 700 .95rem/1 var(--body); }
.steps h3 { margin-bottom: 12px; font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.steps p { margin: 0; max-width: 34ch; }
@media (max-width: 1000px) { .steps li:not(:last-child)::after { display: none; } }

/* ---------- Projects ---------- */
/* Projects: numbered like entries in a catalogue, a label line above each, and the middle column set lower */
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 44px 28px; align-items: start; counter-reset: proj; }
.project { counter-increment: proj; display: flex; flex-direction: column; color: var(--ink); }
@media (min-width: 1100px) { .projects > :nth-child(3n+2) { margin-top: 64px; } }
.project-label { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); font: 600 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.project-label::before { content: "No. " counter(proj, decimal-leading-zero); flex: none; font-weight: 800; }
.project-label span { text-align: right; }
.dark .project-label { color: var(--onDeep); }
.project-art { position: relative; display: block; aspect-ratio: 1.45; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, var(--c, var(--v1)), color-mix(in srgb, var(--c, var(--v1)) 55%, var(--deep))); }
.project-art::before { --pat-o: .35; }
.project-art .laptop { left: 9%; top: 12%; width: 72%; filter: drop-shadow(0 20px 24px rgb(0 0 0 / .4)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.project-art .laptop-screen { border-radius: 10px 10px 0 0; }
.project-art .laptop-base { height: 9px; border-radius: 2px 2px 12px 12px; }
.project-art .phone { width: 22%; right: 7%; top: 30%; border-radius: 18px; padding: 2%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.project-art .phone .screen { border-radius: 13px; }
.project:hover .laptop { transform: translateY(-6px) rotate(-1deg); }
.project:hover .phone { transform: translateY(-12px) rotate(3deg); }
.project-art .screen img { transition: transform 7s ease-in-out; }
.project:hover .screen.tall img { transform: translateY(calc(-100% + 100cqh)); }
.project-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 22px 40px -30px rgb(0 0 0 / .55); }
.project-body .chip { align-self: flex-start; background: color-mix(in srgb, var(--c, var(--v1)) 18%, var(--surface)); color: var(--cd, var(--vd1)); }
.project-body h3 a { color: var(--ink); text-decoration: none; }
.project-body h3 a:hover { text-decoration: underline; }
.project-body > p:not(.chip):not(.project-links) { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0 18px; }
.tags li { font-size: .8rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.project-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: auto 0 0; font-weight: 700; }
.project-links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--cd, var(--vd1)); }
.project-links a:hover { text-decoration: underline; }
.mini-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.mini-client { display: flex; gap: 16px; align-items: center; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.mini-client img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #fff; flex: none; }
.mini-client strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.mini-client span span { color: var(--muted); font-size: .92rem; }

/* ---------- Mobile apps ---------- */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.app { position: relative; display: flex; gap: 18px; align-items: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 22px 26px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.bg-surface .app { background: var(--bg); }
.app::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--v1)); }
.app:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.app img { width: 76px; height: 76px; flex: none; border-radius: 20px; object-fit: cover; box-shadow: 0 12px 22px -12px rgb(0 0 0 / .5); transition: transform .3s; }
.app:hover img { transform: rotate(-6deg) scale(1.05); }
.app h3 { margin: 2px 0; font-size: 1.15rem; }
.app-for { margin: 0 0 8px; font-size: .86rem; font-weight: 700; color: var(--cd, var(--vd1)); }
.app p:last-child { margin: 0; color: var(--muted); font-size: .95rem; }
.app-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 12px; list-style: none; }
.app-strip li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font: 700 .84rem/1.2 var(--body); }
.app-strip img { width: 66px; height: 66px; border-radius: 18px; object-fit: cover; box-shadow: 0 14px 24px -14px rgb(0 0 0 / .55); transition: transform .3s; }
.app-strip li:hover img { transform: translateY(-6px) rotate(-6deg) scale(1.06); }

/* ---------- Tech stack ---------- */
.tech { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; list-style: none; }
.tech li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 14px; background: color-mix(in srgb, #fff 94%, var(--c, var(--v1))); color: #1d1d1f; border-radius: 18px; font: 700 .86rem/1.1 var(--body); text-align: center; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--v1)) 70%, transparent), 0 16px 26px -18px rgb(0 0 0 / .6); transition: transform .3s; }
.tech img { width: 42px; height: 42px; object-fit: contain; }
.tech li:hover { transform: translateY(-6px) scale(1.04); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 20px; align-items: start; }
.quote { position: relative; margin: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 26px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.bg-surface .quote { background: var(--bg); }
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote::before { content: "“"; position: absolute; right: 18px; top: -18px; font: 800 9rem/1 var(--display); color: var(--c, var(--v1)); opacity: .35; }
.quote blockquote { margin: 0 0 22px; font-size: 1.04rem; }
.quote blockquote p { margin: 0; }
.quote figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote figcaption img { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; background: #fff; border: 2px solid var(--c, var(--v1)); flex: none; }
.quote strong { display: block; font-family: var(--display); font-size: 1.05rem; line-height: 1.2; }
.quote figcaption span span { color: var(--cd, var(--vd1)); font-size: .9rem; font-weight: 600; }
.quote figcaption > span { display: flex; flex-direction: column; align-items: flex-start; }
.quote-site { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: .84rem; font-weight: 700; color: var(--cd, var(--vd1)); text-decoration: none; }
.quote-site:hover { text-decoration: underline; }
/* Home: one review set large, two beside it. Reviews page: a wall of columns, so short and long reviews pack together. */
.quotes-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.quotes-feature > :first-child { grid-row: span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(30px, 4vw, 52px); background: var(--deep); color: var(--onDeep); border-color: transparent; }
.quotes-feature > :first-child blockquote { font: 650 clamp(1.3rem, 2.2vw, 1.75rem)/1.35 var(--display); letter-spacing: -.015em; }
.quotes-feature > :first-child figcaption { border-top-color: color-mix(in srgb, var(--onDeep) 25%, transparent); }
.quotes-feature > :first-child :is(figcaption span span, .quote-site) { color: var(--cl, var(--vl1)); }
.quotes-feature > :first-child::before { opacity: .55; }
@media (max-width: 860px) { .quotes-feature { grid-template-columns: minmax(0, 1fr); } .quotes-feature > :first-child { grid-row: auto; } }
.quotes-wall { display: block; columns: 3 300px; column-gap: 20px; }
.quotes-wall .quote { display: block; break-inside: avoid; margin-bottom: 20px; }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 860px) { .founder { grid-template-columns: minmax(0, 1fr); } }
/* His skills float around the ID card; on phones they line up under it. */
.founder-art { position: relative; padding: 10px 0 30px; }
.orbit { list-style: none; }
.orbit li { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 .78rem/1 var(--body); white-space: nowrap; box-shadow: 0 12px 24px -12px rgb(0 0 0 / .5); }
.orbit li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--v1)); }
/* Measured from the middle of the card (310px wide), so each chip only tucks 22px over its edge, clear of the text. */
.orbit li:nth-child(odd) { right: calc(50% + 133px); }
.orbit li:nth-child(even) { left: calc(50% + 133px); }
.orbit li:nth-child(1) { top: 26%; }
.orbit li:nth-child(2) { top: 19%; }
.orbit li:nth-child(3) { top: 52%; }
.orbit li:nth-child(4) { top: 45%; }
.orbit li:nth-child(5) { top: 82%; }
.orbit li:nth-child(6) { top: 75%; }
@media (max-width: 1080px) {
  .orbit { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
  .orbit li { position: static; }
}
/* CEO staff ID card on a lanyard, after the MTL card the old site used */
.idcard-wrap { position: relative; width: min(310px, 84%); margin: 0 auto; padding-top: 74px; transform-origin: 50% 0; }
.lanyard { position: absolute; left: 50%; top: 0; width: 30px; height: 96px; transform: translateX(-50%); border-radius: 3px; background: linear-gradient(180deg, var(--v1), var(--v2) 55%, var(--v3)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.lanyard::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 22px; height: 26px; transform: translateX(-50%); border-radius: 6px 6px 9px 9px; background: linear-gradient(#e9ecf1, #9ba2ad); box-shadow: 0 3px 6px rgb(0 0 0 / .3); }
.idcard { position: relative; z-index: 1; border-radius: 22px; background: var(--surface); color: var(--ink); text-align: center; padding-bottom: 20px; overflow: hidden; box-shadow: 0 2px 0 rgb(255 255 255 / .6) inset, 0 34px 60px -28px rgb(0 0 0 / .6); }
.idcard::before { --pat-o: .1; }
.idcard-top { position: relative; height: 156px; display: grid; place-items: start center; padding-top: 32px; background: linear-gradient(140deg, var(--deep), color-mix(in srgb, var(--v1) 60%, var(--deep))); }
.idcard-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--iris); }
.idcard-slot { position: absolute; top: 12px; left: 50%; width: 56px; height: 10px; transform: translateX(-50%); border-radius: 10px; background: var(--bg); box-shadow: inset 0 2px 3px rgb(0 0 0 / .4); }
.idcard-logo { width: 74%; height: auto; margin-top: 6px; }
.idcard-photo { width: 54%; aspect-ratio: 1; margin: -22px auto 18px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); overflow: hidden; border: 5px solid var(--surface); background: var(--tint); box-shadow: 0 0 0 3px var(--v2), 0 16px 26px -14px rgb(0 0 0 / .5); }
.idcard-photo img { width: 100%; height: 100%; object-fit: cover; transform: rotate(45deg) scale(1.42); }
.idcard-name { margin: 0 14px 6px; font: 800 1.32rem/1.12 var(--display); letter-spacing: -.02em; }
.idcard-role { margin: 0; font: 800 .8rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--vd1); }
.idcard-company { margin: 2px 0 14px; font-size: .86rem; color: var(--muted); }
.idcard-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 18px; padding: 10px 0; border-block: 1.5px dashed var(--line); }
.idcard-meta dt { font: 700 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.idcard-meta dd { margin: 5px 0 0; font: 700 .84rem/1.1 var(--mono); }
.idcard-bar { height: 30px; margin: 14px 64px 0 22px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 16px); opacity: .8; }
.idcard-holo { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .7), 0 4px 10px -4px rgb(0 0 0 / .5); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.role { color: var(--vd1); font-weight: 700; margin-top: -6px; }
.dark .role { color: var(--vl1); }
.skill-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 22px; }
.skill-chips li { padding: 7px 12px; border-radius: 999px; font: 700 .84rem/1 var(--body); background: var(--c); color: var(--onc); }
.credential { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 2px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--iris); background-origin: border-box; background-clip: padding-box, border-box; }
.credential .icon-tile { width: 48px; height: 48px; border-radius: 14px; }
.credential strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.credential span span { color: var(--muted); font-size: .94rem; }

/* ---------- Prices, specs, facts, FAQ ---------- */
.prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 28px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.price-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c, var(--v1)); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card h3 { margin-bottom: 6px; }
.price { font: 800 clamp(1.9rem, 3.4vw, 2.5rem)/1.05 var(--display); letter-spacing: -.03em; color: var(--cd, var(--ink)); margin: 10px 0 12px; }
.price small { font: 600 .95rem/1 var(--body); color: var(--muted); letter-spacing: 0; }
.price-card > p { color: var(--muted); }
.price-card .ticks { margin-top: 6px; font-size: .96rem; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card .ticks + .btn { margin-top: 24px; }
.note-line { font-size: .95rem; color: var(--muted); margin-top: 26px; max-width: 70ch; }
.dark .note-line { color: var(--onDeep); }
.service-nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 30px; }
.service-nav a { display: inline-block; padding: 9px 15px; border-radius: 999px; background: color-mix(in srgb, var(--onDeep) 10%, transparent); border: 1.5px solid var(--cl, var(--vl1)); color: var(--onDeep); font-weight: 600; font-size: .92rem; text-decoration: none; transition: background .2s, transform .2s; }
.service-nav a:hover { background: var(--c); color: var(--onc); transform: translateY(-2px); }
.spec { position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 28px; box-shadow: var(--shadow); overflow: hidden; }
.spec::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--iris); }
.bg-surface .spec { background: var(--bg); }
.spec h3 { margin-bottom: 4px; }
/* Spec sheet: label on the left, value on the right, a ruled line between each */
.spec dl { display: grid; margin: 16px 0 0; border-bottom: 1px solid var(--line); }
.spec dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.spec dt { font: 600 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vd1); }
.spec dd { margin: 0; max-width: 62%; text-align: right; }
.spec .price { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--ink); white-space: nowrap; }
.spec dd.price + dd { flex-basis: 100%; max-width: none; text-align: left; color: var(--muted); font-size: .94rem; }
.spec .btn { margin-top: 22px; }
.fact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: color-mix(in srgb, var(--onDeep) 22%, transparent); border-radius: 18px; overflow: hidden; margin-top: 36px; }
.fact-list div { background: color-mix(in srgb, var(--deep) 82%, black); padding: 16px 18px; }
.fact-list dt { font: 700 .74rem/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--vl1); }
.fact-list dd { margin: 6px 0 0; font-weight: 600; color: var(--onDeep); }
/* FAQ: the heading and a way to ask stay on the left; the questions are a numbered, ruled list on the right */
.faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 96px); align-items: start; }
.faq-split > .section-head { position: sticky; top: 112px; margin: 0; }
.faq-split > .section-head .btn { margin-top: 8px; }
@media (max-width: 900px) { .faq-split { grid-template-columns: minmax(0, 1fr); } .faq-split > .section-head { position: static; } }
.faq { --rule: color-mix(in srgb, currentColor 26%, transparent); display: grid; max-width: 920px; counter-reset: q; border-top: 1px solid var(--rule); }
.faq details { counter-increment: q; border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 2px; font: 700 clamp(1.05rem, 1.6vw, 1.2rem)/1.35 var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: counter(q, decimal-leading-zero); font: 700 .74rem/1 var(--mono); letter-spacing: .1em; opacity: .75; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid currentColor; font: 500 1.35rem/1 var(--body); transition: transform .25s, background .25s, color .25s; }
.faq summary:hover::after { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--surface); border-color: var(--ink); }
.dark .faq details[open] summary::after { background: var(--onDeep); color: var(--deep); border-color: var(--onDeep); }
.faq details > div { padding: 0 54px 24px calc(3ch + 20px); }
.faq details > div p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .faq details > div { padding: 0 0 22px; } }

/* ---------- Place, contact ---------- */
.place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (max-width: 880px) { .place { grid-template-columns: minmax(0, 1fr); } }
.place-card { position: relative; background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); overflow: hidden; }
.place-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--iris); }
.place-card h3 { margin-bottom: 14px; }
.dark .place-card p, .place-card p { color: var(--muted); }
.place-card .addr { color: var(--ink); font-weight: 600; display: flex; gap: 10px; }
.place-card .addr .i { color: var(--vd2); margin-top: 3px; }
.dark .place-card .btn { background: var(--primary); color: var(--onPrimary); margin-top: 8px; }
.ways { display: grid; gap: 14px; }
.way { display: flex; gap: 16px; align-items: center; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.way:hover { transform: translateX(5px); box-shadow: var(--shadow); text-decoration: none; }
.way strong { display: block; font-family: var(--display); font-size: 1.1rem; }
.way span span { color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.form { position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow); overflow: hidden; }
.form::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--iris); }
.form h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-weight: 700; font-size: .95rem; }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--vd1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v1) 28%, transparent); }
.field textarea { min-height: 140px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.6em; margin: 14px 0 0; font-weight: 600; }
/* Shown after a no-JavaScript send, when the handler redirects to contact.html?sent=1#sent */
.form-sent { display: none; margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--v4) 18%, var(--surface)); font-weight: 600; }
.form-sent:target { display: block; }
.form .muted { font-size: .9rem; margin-top: 12px; }

/* ---------- Long text, callouts ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; display: grid; gap: 6px; }
.panel { position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); overflow: hidden; }
.panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--iris); }
.callout { background: color-mix(in srgb, var(--v2) 14%, var(--surface)); border-left: 5px solid var(--v2); border-radius: 14px; padding: 18px 22px; margin: 24px 0; color: var(--ink); }
.callout p:last-child { margin: 0; }

/* ---------- Call to action ---------- */
/* Heading and offer on the left, the two ways to start stacked on the right, level with the last line */
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px clamp(32px, 6vw, 96px); }
.cta-inner > div:first-child { max-width: 680px; }
.cta-inner h2 { margin-bottom: 14px; font-size: clamp(2.2rem, 5vw, 4rem); }
.cta-inner > div:first-child > p:last-child { margin-bottom: 0; }
.cta-inner .actions { margin-top: 0; flex-direction: column; align-items: stretch; }
.cta-inner .actions .btn { justify-content: center; }
@media (max-width: 760px) { .cta-inner { grid-template-columns: minmax(0, 1fr); } .cta-inner .actions { flex-direction: row; align-items: center; } }

/* ---------- 404 ---------- */
.lost { min-height: 64vh; display: grid; align-items: center; }
.lost-code { font: 800 clamp(6rem, 22vw, 15rem)/.85 var(--display); letter-spacing: -.06em; margin: 0 0 10px; background: var(--iris-light); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Footer ---------- */
.site-foot { position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 90%, black), var(--dk1)); color: var(--onDeep); padding: 70px 0 30px; font-size: .96rem; }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--iris); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot-brand img { height: 46px; width: auto; }
.foot-brand p { max-width: 42ch; margin-top: 18px; }
.foot-address { display: flex; gap: 10px; }
.foot-address .i { color: var(--vl2); margin-top: 4px; }
.foot-title { font: 700 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--vl1); margin: 8px 0 16px; }
.site-foot ul { list-style: none; display: grid; gap: 10px; }
.site-foot li a { color: var(--onDeep); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.site-foot li a:hover { text-decoration: underline; }
.site-foot li .i { color: var(--vl3); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; margin-top: 46px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--onDeep) 20%, transparent); font-size: .9rem; }
.foot-base p { margin: 0; max-width: 70ch; }
.foot-base a { color: var(--onDeep); }
.today { display: inline-flex; align-items: center; gap: 10px; }
.today::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px; background: conic-gradient(var(--v1) 0 25%, var(--v2) 0 50%, var(--v3) 0 75%, var(--v4) 0); transform: rotate(45deg); }

/* ---------- Floating WhatsApp button: free consultation, on every page ---------- */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: calc(100vw - 36px); }
.wa-btn { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wa-btn:hover { text-decoration: none; }
.wa-label { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 15px; border-radius: 16px 16px 4px 16px; background: #fff; color: #1d1d1f; line-height: 1.15; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .5); transition: transform .25s; }
.wa-label b { font: 800 1rem/1.15 var(--display); color: #0a6b39; letter-spacing: -.01em; }
.wa-label span { font-size: .8rem; color: #3a3a3c; }
.wa-btn:hover .wa-label { transform: translateX(-4px); }
.wa-icon { position: relative; width: 62px; height: 62px; flex: none; filter: drop-shadow(0 10px 16px rgb(0 0 0 / .35)); transition: transform .25s; }
.wa-btn:hover .wa-icon { transform: scale(1.08) rotate(-6deg); }
.wa-btn::after { content: ""; position: absolute; right: 0; bottom: 0; width: 62px; height: 62px; border-radius: 50%; border: 3px solid #25d366; pointer-events: none; opacity: 0; }
.wa-bubble { position: absolute; right: 0; bottom: calc(100% + 12px); margin: 0; width: 290px; max-width: calc(100vw - 36px); padding: 16px 40px 16px 18px; border-radius: 18px 18px 4px 18px; background: #fff; color: #1d1d1f; font-size: .92rem; line-height: 1.45; box-shadow: 0 18px 40px -14px rgb(0 0 0 / .55); }
.wa-bubble strong { display: block; margin-bottom: 4px; font: 800 1.08rem/1.2 var(--display); color: #0a6b39; }
.wa-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f0f0f2; color: #1d1d1f; font-size: 1.1rem; line-height: 1; cursor: pointer; }
@media (max-width: 560px) {
  /* The round button alone on phones: its label pill covered the main button in the first screen at 360 and 390 px. */
  .wa-label { display: none; }
  .wa-icon, .wa-btn::after { width: 54px; height: 54px; }
  .site-foot { padding-bottom: 110px; }
}

/* ---------- Motion. Nothing waits on an animation to be seen: reveals only move things a little. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .glow { animation: drift 22s ease-in-out infinite alternate; }
  .g2 { animation-duration: 27s; animation-delay: -6s; }
  .g3 { animation-duration: 31s; animation-delay: -12s; }
  @keyframes drift { 50% { transform: translate3d(-6%, 5%, 0) scale(1.12); } 100% { transform: translate3d(4%, -4%, 0) scale(.94); } }
  /* The shimmer plays twice and then rests. A background-position loop repaints on the main thread every frame, for as
     long as the page is open, and on the header's "Lab" that is every page. The two badges lower on the home page wait
     until they are in view (site.js adds .shine) and stay still on phones. */
  .foil { animation: foil 7s linear 2; }
  .seal-badge.foil, .idcard-holo.foil { animation: none; }
  .seal-badge.foil.shine, .idcard-holo.foil.shine { animation: foil 7s linear 2; }
  @media (max-width: 760px) { .seal-badge.foil.shine, .idcard-holo.foil.shine { animation: none; } }
  @keyframes foil { to { background-position: 300% 0; } }
  .hero[data-pat]::before { animation: breathe 26s ease-in-out infinite alternate; }
  @keyframes breathe { to { transform: scale(1.08) translate3d(-1.5%, 1%, 0); } }
  .hero-inner .seal { animation: turn 120s linear infinite; }
  @keyframes turn { to { transform: translateY(-50%) rotate(360deg); } }
  .stage .screen.scroll img { animation: screen-scroll var(--dur, 24s) ease-in-out infinite alternate; }
  @keyframes screen-scroll { 0%, 14% { transform: translateY(0); } 86%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
  .stage .laptop { animation: bob 8s ease-in-out infinite; }
  .stage .p1 { animation: bob 6.5s ease-in-out -2s infinite; }
  .stage .p2 { animation: bob 7.5s ease-in-out -4s infinite; }
  .float-chip { animation: bob 5.5s ease-in-out var(--d, 0s) infinite; }
  @keyframes bob { 50% { translate: 0 -12px; } }
  .tech li { animation: bob-sm 6s ease-in-out calc(var(--k, 0) * -.45s) infinite; }
  @keyframes bob-sm { 50% { translate: 0 -5px; } }
  .tech li:hover { animation-play-state: paused; }
  .idcard-wrap { animation: swing 7s ease-in-out infinite; }
  .idcard-wrap:hover { animation-play-state: paused; }
  @keyframes swing { 0%, 100% { rotate: -1.8deg; } 50% { rotate: 1.8deg; } }
  .wa-btn::after { animation: wa-pulse 2.4s ease-out infinite; }
  @keyframes wa-pulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.7); opacity: 0; } }
  .wa-bubble:not([hidden]) { animation: pop .45s cubic-bezier(.2, .9, .3, 1.3); }
  @keyframes pop { from { transform: translateY(14px) scale(.9); opacity: 0; } }
  /* Cards slide up a little as they arrive. site.js adds .rv to the page and .in to each card as it comes into view, so
     each reveal plays once and is over. (Tying every card to the scroll position kept all of them live, and with the
     other moving parts that cost the main thread more than everything else on the page.) */
  .rv .reveal:not(.in) { translate: 0 36px; scale: .98; }
  .rv .reveal.in { animation: rise .6s cubic-bezier(.2, .7, .2, 1); }
  @keyframes rise { from { translate: 0 36px; scale: .98; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- Lighter on phones: smaller blur and still glows, so scrolling stays smooth on mid-range Android ---------- */
@media (max-width: 760px) {
  .glow { filter: blur(44px); animation: none; }
  .site-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--deep) 97%, black); }
}
@media (pointer: coarse) { .wa-close { width: 40px; height: 40px; top: 4px; right: 4px; } }

/* ---------- Blog: byline, article layout, table of contents, short answer, tables, guide cards ---------- */
.byline { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; font-size: .95rem; }
.byline img { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid color-mix(in srgb, var(--onDeep) 55%, transparent); }
.byline p { margin: 0; line-height: 1.45; }
.byline a { font-weight: 700; }
.byline span { font-size: .88rem; opacity: .85; }
.article { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.article-body { max-width: 800px; }
.article-body.prose { max-width: 800px; }
.toc { position: sticky; top: 112px; padding: 18px 16px 14px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); box-shadow: 0 18px 34px -26px rgb(0 0 0 / .55); }
.toc-title { margin: 0 0 10px; font: 600 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.toc ol { list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 2.6ch minmax(0, 1fr); gap: 8px; padding: 6px 6px; border-radius: 8px; color: var(--ink); font-size: .9rem; line-height: 1.35; text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 600 .72rem/1.65 var(--mono); color: var(--vd1); }
.toc a:hover { background: var(--tint); }
@media (max-width: 1000px) { .article { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
.answer { margin: 0 0 30px; padding: 18px 20px; border-radius: 16px; background: color-mix(in srgb, var(--v1) 11%, var(--surface)); border-left: 5px solid var(--v1); }
.prose .answer-label { margin: 0 0 6px; font: 600 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vd1); }
.answer p:last-child { margin-bottom: 0; }
.prose h2 { scroll-margin-top: 100px; }
.prose h3 { font-size: 1.2rem; margin: 1.5em 0 .5em; }
.prose ol { padding-left: 1.3em; margin: 0 0 1em; display: grid; gap: 8px; }
.prose li::marker { color: var(--vd1); font-weight: 700; }
.table-wrap { overflow-x: auto; margin: 0 0 1.5em; border: 1px solid var(--line); border-radius: 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th { padding: 11px 14px; background: var(--tint); text-align: left; font-weight: 700; }
.prose td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.prose th.num, .prose td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prose .faq { margin: 6px 0 1.4em; }
.prose .faq summary { font-size: 1.04rem; }
.prose .faq details > div { padding-right: 0; }
.source-note { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.art-figure { margin: 1.8em 0; }
.art-figure .stage { max-width: 620px; margin: 0 auto; }
.art-figure figcaption { margin-top: 10px; text-align: center; font-size: .88rem; color: var(--muted); }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.post-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px 20px; border-radius: var(--radius); background: var(--surface); color: var(--ink); overflow: hidden; box-shadow: 0 22px 40px -30px rgb(0 0 0 / .55); transition: transform .25s, box-shadow .25s; }
.post-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c, var(--v1)); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-cat { margin: 0 0 12px; font: 600 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cd, var(--vd1)); }
.post-card h3 { margin: 0 0 10px; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card > p:not(.post-cat):not(.post-meta) { color: var(--muted); }
.post-meta { display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.post-card-service { background: color-mix(in srgb, var(--v3) 12%, var(--surface)); }

/* ---------- Banknote finish ----------
   Every page is printed like a note: square corners, a vivid colour field engraved with fine line-work, a white
   information panel for the words, a braided guilloche border, a security thread, a foil patch, big numerals and
   serial numbers. The words always sit on paper or on the palette's reading inks; the ornament sits around them.
   The ornaments (--m-*) are drawn by build/tools/money_assets.py. */
:root {
  --radius: 4px;
  --paper: #fdfeff;
  --paper-rule: rgb(14 31 61 / .26);
  --holo: conic-gradient(from 30deg, #2f96d8, #9db4ff, #c8baff, #8fe6d6, #66ad3a, #2f96d8);
  --engrave: repeating-linear-gradient(0deg, rgb(255 255 255 / .5) 0 1px, transparent 1px 4px);
}

/* Buttons are cut square, with a printed edge along the foot */
.btn { border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), inset 0 -3px 0 rgb(0 0 0 / .18); }
.btn:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), inset 0 -3px 0 rgb(0 0 0 / .18), 0 14px 26px -14px var(--ink); }
.btn-ghost, .dark .btn-ghost { box-shadow: none; }
.nav a, .ask-chips a, .service-nav a, .tags li, .skill-chips li, .orbit li, .float-chip { border-radius: 3px; }
.chip { border-radius: 2px; }

/* The line under the header is a braided border rather than a flat rule */
.site-head::after { height: 12px; bottom: -12px; pointer-events: none; -webkit-mask: var(--m-lace) repeat-x left center / 96px 12px; mask: var(--m-lace) repeat-x left center / 96px 12px; }

/* ---------- The hero is the front of the note ---------- */
main > section.note-hero {
  overflow: hidden; color: var(--ink); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px);
  background:
    linear-gradient(180deg, transparent 0 64%, rgb(255 255 255 / .13) 64% 82%, transparent 82%),
    radial-gradient(ellipse 46% 80% at 80% 34%, rgb(255 255 255 / .34), transparent 72%),
    var(--hf, linear-gradient(106deg, #123f7c 0%, #1d5fb0 22%, #2f96d8 50%, #1fa8bc 78%, #66ad3a 112%));
}
main > section.note-hero[data-pat]::before { --pat-o: .5; -webkit-mask-image: none; mask-image: none; }
main > section.note-hero[data-pat]::after { display: none; }
.note-hero .glow { opacity: .35; }

/* The words sit on the note's white information panel, framed by a hairline and a braided top edge */
.note-hero:not(:has(.hero-grid)) > .wrap, .note-hero .hero-grid > :first-child, .paper {
  position: relative; color: var(--ink); background: var(--paper); border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .85), 0 0 0 7px rgb(255 255 255 / .2), 0 40px 64px -34px rgb(4 16 44 / .8);
  outline: 1px solid var(--paper-rule); outline-offset: -9px;
}
.note-hero:not(:has(.hero-grid)) > .wrap::before, .note-hero .hero-grid > :first-child::before, .paper::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 13px; height: 12px; background: var(--iris);
  -webkit-mask: var(--m-lace) repeat-x left center / 96px 12px; mask: var(--m-lace) repeat-x left center / 96px 12px; opacity: .8;
}
.note-hero:not(:has(.hero-grid)) > .wrap::after, .note-hero .hero-grid > :first-child::after, .paper::after {
  content: ""; position: absolute; z-index: 0; right: -44px; bottom: -44px; width: 230px; height: 230px; background: var(--v2); opacity: .09; pointer-events: none;
  -webkit-mask: var(--m-rosette) center / contain no-repeat; mask: var(--m-rosette) center / contain no-repeat;
}
.note-hero:not(:has(.hero-grid)) > .wrap {
  width: min(calc(100% - 2 * var(--gutter)), 820px); max-width: none; margin: 0 auto 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding: clamp(46px, 5vw, 62px) clamp(26px, 4.4vw, 56px) clamp(32px, 4vw, 48px); overflow: hidden;
}
.note-hero .hero-grid > :first-child { padding: clamp(48px, 5vw, 64px) clamp(26px, 4vw, 52px) clamp(30px, 4vw, 46px); overflow: hidden; }
.note-hero .hero-grid { gap: clamp(30px, 5vw, 70px); }
.note-hero .byline img { border-color: var(--line); }
.note-hero h1 { font-size: clamp(2.1rem, 3.7vw, 3.25rem); }
.note-hero .reach { gap: 6px 18px; }
.note-hero .reach [aria-hidden] { display: none; }
main > section.note-hero .ink-text { background-image: linear-gradient(100deg, #0f4d96, #1f7cc4 50%, #0e7a8a); }

/* The masthead is the printed band across the top edge, and the facts are the strip along the foot */
.masthead { display: block; margin: 0; padding: 0; border: 0; background: var(--deep); color: var(--onDeep); box-shadow: inset 0 -1px 0 rgb(255 255 255 / .22); }
.masthead > .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 24px; padding-block: 24px 11px; font: 600 .72rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.masthead span:nth-child(2) { text-align: center; }
.masthead span:last-child { text-align: right; }
.note-hero:has(.masthead) { padding-top: 0; }
.note-hero .masthead + .wrap { padding-top: clamp(40px, 5vw, 64px); }
.strip-band { margin-top: clamp(44px, 6vw, 76px); background: var(--paper); color: var(--ink); box-shadow: 0 -1px 0 rgb(255 255 255 / .8), 0 -8px 0 rgb(255 255 255 / .16); position: relative; }
.strip-band::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: #fff; opacity: .55; -webkit-mask: var(--m-lace) repeat-x left center / 96px 12px; mask: var(--m-lace) repeat-x left center / 96px 12px; }
.strip-band .facts-strip { margin: 0; border: 0; color: var(--ink); }
.strip-band { padding-bottom: 24px; }
.strip-band .facts-strip li { padding: 18px 20px; }
.note-hero:has(.strip-band) > .microline { bottom: 8px; z-index: 1; }
.strip-band .facts-strip li:first-child { padding-left: var(--gutter); }
.strip-band .facts-strip li + li { border-left: 1px solid var(--line); }
.strip-band .facts-strip .i { color: var(--vd3); }
.note-hero:has(.strip-band) { padding-bottom: 0; }
@media (max-width: 860px) { .strip-band .facts-strip li:nth-child(3) { border-left: 0; } .strip-band .facts-strip li { padding: 14px 14px; } }
@media (max-width: 480px) { .strip-band .facts-strip li, .strip-band .facts-strip li:first-child { padding: 12px var(--gutter); border-left: 0; } .strip-band .facts-strip li + li { border-top: 1px solid var(--line); } }

/* ---------- Printed furniture on the field: numeral, security thread, foil patch, serials, rosette ---------- */
.note-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; color: #fff; }
.note-deco .frame { position: absolute; inset: 14px; border: 1px solid rgb(255 255 255 / .62); outline: 1px solid rgb(255 255 255 / .3); outline-offset: 5px; }
.note-deco .frame::before {
  content: ""; position: absolute; inset: -12px; background: rgb(255 255 255 / .8);
  -webkit-mask: var(--m-rosette) left top / 40px 40px no-repeat, var(--m-rosette) right top / 40px 40px no-repeat, var(--m-rosette) left bottom / 40px 40px no-repeat, var(--m-rosette) right bottom / 40px 40px no-repeat;
  mask: var(--m-rosette) left top / 40px 40px no-repeat, var(--m-rosette) right top / 40px 40px no-repeat, var(--m-rosette) left bottom / 40px 40px no-repeat, var(--m-rosette) right bottom / 40px 40px no-repeat;
}
.note-hero:has(.masthead) .note-deco .frame { top: 62px; }
@media (max-width: 560px) { .note-deco .frame { inset: 8px; outline-offset: 3px; } .note-hero:has(.masthead) .note-deco .frame { top: 54px; } .note-deco .frame::before { display: none; } }
.note-deco .numeral {
  position: absolute; right: -2%; bottom: -12%; font: 800 clamp(12rem, 31vw, 27rem)/.8 var(--display); letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / .6); background: var(--engrave); -webkit-background-clip: text; background-clip: text;
}
.note-deco .thread {
  position: absolute; top: 0; bottom: 0; left: 55.5%; width: 14px;
  background: linear-gradient(90deg, #9fb1cf, #f6f9ff 42%, #8da2c4); box-shadow: 0 0 0 1px rgb(255 255 255 / .4), 0 0 22px rgb(255 255 255 / .35);
}
.note-deco .thread::after { content: ""; position: absolute; inset: 0; background: rgb(14 31 61 / .6); -webkit-mask: var(--m-thread) repeat-y center top / 12px 28px; mask: var(--m-thread) repeat-y center top / 12px 28px; }
.note-deco .foil-patch {
  position: absolute; right: clamp(16px, 4vw, 60px); top: clamp(30px, 8%, 80px); width: 76px; height: 76px; border-radius: 6px; background: var(--holo);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .75), 0 14px 26px -10px rgb(0 0 0 / .55);
}
.note-deco .foil-patch::after { content: ""; position: absolute; inset: 9px; background: rgb(255 255 255 / .8); -webkit-mask: var(--m-rosette) center / contain no-repeat; mask: var(--m-rosette) center / contain no-repeat; }
.note-deco .ser { position: absolute; font: 600 .7rem/1 var(--mono); letter-spacing: .26em; color: rgb(255 255 255 / .9); text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.note-deco .ser-a { right: clamp(16px, 4vw, 60px); top: clamp(120px, 20%, 170px); }
.note-deco .ser-b { right: clamp(16px, 4vw, 60px); bottom: 26px; }
.note-deco .seal { position: absolute; right: max(-150px, -10vw); top: 50%; width: clamp(300px, 42vw, 580px); height: auto; color: #fff; opacity: .26; transform: translateY(-50%); }
.note-hero:has(.hero-grid) .note-deco .seal { opacity: .16; }
.note-hero:has(.strip-band) .note-deco .numeral { bottom: 92px; }
@media (max-width: 960px) { .note-deco .thread { display: none; } .note-deco .ser-a { display: none; } }
@media (max-width: 560px) { .note-deco .foil-patch { width: 54px; height: 54px; } .note-deco .ser-b { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .note-deco .foil-patch { animation: holo 7s linear 2; }
  @keyframes holo { to { filter: hue-rotate(360deg); } }
  .note-deco .seal { animation: turn 120s linear infinite; }
}
@media (max-width: 760px) { .note-deco .foil-patch { animation: none; } }

/* The devices sit inside a frosted window ringed with microprint, like the portrait on a note */
.note-hero .stage::before {
  content: ""; position: absolute; left: 5%; right: 2%; top: 0; bottom: -2%; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, rgb(255 255 255 / .4), rgb(255 255 255 / .1) 64%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), inset 0 0 0 12px rgb(255 255 255 / .06), inset 0 0 0 13px rgb(255 255 255 / .42);
}
.stage-ring { position: absolute; left: 0; top: -3%; width: 100%; height: 106%; color: rgb(255 255 255 / .85); }
.stage-ring text { font: 600 8.6px var(--mono); fill: currentColor; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) { .stage-ring { animation: turn-plain 160s linear infinite; transform-origin: 50% 50%; } @keyframes turn-plain { to { transform: rotate(360deg); } } }
@media (max-width: 560px) { .stage-ring { display: none; } .note-hero .stage::before { left: 0; right: 0; } }

/* ---------- Every other section is a note too ---------- */
main > section:not(.dark):not(.note-hero)[data-pat]::before { --pat-o: .46; }
main > section.dark[data-pat]::before { --pat-o: .36; }

/* ---------- Cards, panels and forms are printed with an inner frame and a rosette watermark ---------- */
.card, .price-card, .spec, .quote, .panel, .form, .place-card, .app, .way, .mini-client, .credential, .post-card, .toc, .answer, .callout {
  border-radius: var(--radius);
}
.card, .price-card, .spec, .quote, .panel, .form, .place-card, .post-card, .project-body { outline: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); outline-offset: -8px; }
.card, .price-card, .spec, .quote, .place-card, .post-card { isolation: isolate; }
.card::before, .price-card::before, .spec::before, .place-card::before, .post-card:not(.post-card-service)::before {
  content: ""; position: absolute; z-index: -1; right: -38px; bottom: -38px; width: 168px; height: 168px; background: var(--c, var(--v2)); opacity: .12; pointer-events: none;
  -webkit-mask: var(--m-rosette) center / contain no-repeat; mask: var(--m-rosette) center / contain no-repeat;
}
.post-card::before { top: auto; left: auto; height: 168px; }
.icon-tile { border-radius: 50%; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--onc, #fff) 38%, transparent), 0 12px 22px -12px var(--c, var(--v1)); }
.row { border-bottom-style: double; border-bottom-width: 3px; }
.rows { border-top: 3px double var(--rule); }
.faq { border-top: 3px double var(--rule); }
.faq details { border-bottom-style: solid; }
.project-art, .project-body { border-radius: 0; }
.logos { border-radius: var(--radius); }
.app img, .app-strip img, .mini-client img, .quote figcaption img { border-radius: 8px; }
.tech li, .credential, .fact-list { border-radius: var(--radius); }
.callout { border-radius: 0 var(--radius) var(--radius) 0; }
.field input, .field select, .field textarea { border-radius: 3px; }
.form-sent { border-radius: 3px; }

/* ---------- The footer is the back of the note ---------- */
.site-foot { overflow: hidden; isolation: isolate; }
.site-foot::before { height: 12px; background: var(--iris); -webkit-mask: var(--m-lace) repeat-x left center / 96px 12px; mask: var(--m-lace) repeat-x left center / 96px 12px; }
.site-foot::after { content: "MTL"; position: absolute; z-index: -1; right: -2%; bottom: -16%; font: 800 clamp(11rem, 30vw, 26rem)/.8 var(--display); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / .14); pointer-events: none; }
.foot-base { position: relative; }
.foot-base::after { content: "A 2027 0001 MTL"; position: absolute; right: var(--gutter); top: -9px; padding: 0 10px; background: color-mix(in srgb, var(--deep) 90%, black); font: 600 .66rem/1 var(--mono); letter-spacing: .26em; color: rgb(255 255 255 / .55); }
@media (max-width: 560px) { .foot-base::after { display: none; } }

/* The page-jump chips under a hero heading sit on the white panel, so they are drawn in ink */
.note-hero .service-nav a { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); border-color: color-mix(in srgb, var(--ink) 38%, transparent); color: var(--ink); }
.note-hero .service-nav a:hover { background: var(--c, var(--primary)); border-color: transparent; color: var(--onc, #fff); }

/* ---------- Readability: words on the colour field are set in ink, and the small print never fades into it ---------- */
main > section:not(.dark) :is(.project-label span, .faq a, .section-head a, .note-line a, .split > div > p a, .split > div > .ticks a) { color: var(--ink); }
.dark .kicker { color: #d4e9ff; }
.lab.foil { background: linear-gradient(110deg, var(--dk1), var(--dk2), var(--dk3), var(--dk4), var(--dk1)) 0 0 / 300% 100%; }
.site-foot { background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 90%, black), color-mix(in srgb, var(--dk1) 55%, var(--deep))); }
.foot-title { color: #cfe6ff; }
.foot-base::after { color: rgb(255 255 255 / .7); }
/* A dark section is a deeper blue and its engraving a little lighter, so light text keeps at least 4.5:1 on every part of the wash */
main > section.dark { background: radial-gradient(ellipse 55% 75% at var(--spot), color-mix(in srgb, var(--dn) 52%, var(--deep)), transparent 72%), linear-gradient(var(--dir), color-mix(in srgb, var(--dk) 60%, var(--deep)) 0%, var(--deep) 78%); }
main > section.dark[data-pat]::before { --pat-o: .26; }
/* Outline buttons that sit straight on a wash are filled with paper and set in ink */
main > section:not(.dark):not(.note-hero) .btn-ghost { color: var(--ink); background: color-mix(in srgb, var(--paper) 66%, transparent); border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
main > section:not(.dark):not(.note-hero) .btn-ghost:hover { background: var(--paper); }

/* The dotted constellation drifting across the field, as on the Swiss notes */
.note-deco::after {
  content: ""; position: absolute; right: clamp(70px, 9vw, 150px); top: clamp(90px, 14%, 150px); width: 300px; height: 260px; background: rgb(255 255 255 / .7);
  -webkit-mask: var(--m-dots) 0 0 / 144px 120px, linear-gradient(135deg, #000, transparent 80%); mask: var(--m-dots) 0 0 / 144px 120px;
  opacity: .8; transform: rotate(-8deg);
}
@media (max-width: 960px) { .note-deco::after { display: none; } }

/* On a phone the masthead is one centred line */
@media (max-width: 760px) {
  .masthead > .wrap { grid-template-columns: 1fr; text-align: center; padding-block: 22px 10px; font-size: .64rem; letter-spacing: .14em; }
  .masthead span:not(:first-child) { display: none; }
}
/* Below laptop width the white panel spans the field, so the foil patch would hide behind it: it only appears on wide screens */
@media (max-width: 960px) { .note-deco .foil-patch { display: none; } }

/* ---------- Banknote finish, part two: tinted glass ----------
   No box on the page is white. Every container is a clear window in the note: a pane of the colour behind it, so the
   field shows through, with a white hairline frame and an inner frame. Panes on a light wash are light glass with ink
   type; on the vivid hero and on dark sections they are dark glass with light type. Reading surfaces are more opaque. */
:root {
  --glass: linear-gradient(150deg, rgb(255 255 255 / .64), rgb(255 255 255 / .44));
  --glass-read: linear-gradient(150deg, rgb(255 255 255 / .76), rgb(255 255 255 / .6));
  --glass-deep: linear-gradient(150deg, rgb(5 24 64 / .66), rgb(5 24 64 / .42));
  --glass-pale: linear-gradient(150deg, rgb(255 255 255 / .17), rgb(255 255 255 / .07));
}

/* ----- the hero: a dark pane over the vivid field ----- */
.note-hero:not(:has(.hero-grid)) > .wrap, .note-hero .hero-grid > :first-child, .paper {
  color: var(--onDeep); background: var(--glass-deep); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4), 0 0 0 1px rgb(255 255 255 / .16), 0 40px 64px -34px rgb(2 12 40 / .85);
  outline: 1px solid rgb(255 255 255 / .34); outline-offset: -9px;
  -webkit-backdrop-filter: blur(7px) saturate(1.2); backdrop-filter: blur(7px) saturate(1.2);
}
.note-hero:not(:has(.hero-grid)) > .wrap::before, .note-hero .hero-grid > :first-child::before, .paper::before { background: linear-gradient(90deg, #bfe0ff, #8fe6d6, #c4eb94); opacity: .8; }
.note-hero:not(:has(.hero-grid)) > .wrap::after, .note-hero .hero-grid > :first-child::after, .paper::after { top: auto; left: auto; background: #fff; opacity: .07; }
main > section.note-hero .dark :is(.lead, .kicker, .note-line, .role, .facts, .reach), main > section.note-hero .dark p { color: var(--onDeep); }
main > section.note-hero .ink-text { background-image: linear-gradient(100deg, #a9d8ff, #d6dcff 48%, #9ff0e2); }
.note-hero .byline img { border-color: rgb(255 255 255 / .55); }
.note-hero .service-nav a { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .5); color: #fff; }
.note-hero .service-nav a:hover { background: var(--c, var(--cta)); border-color: transparent; color: var(--onc, var(--onCta)); }
.note-hero .dark a:not(.btn) { color: #fff; }
@media (max-width: 760px) { .note-hero:not(:has(.hero-grid)) > .wrap, .note-hero .hero-grid > :first-child { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(150deg, rgb(5 24 64 / .78), rgb(5 24 64 / .62)); } }

/* The hero field: overlapping translucent bands, as on the Mexican and Swiss notes */
main > section.note-hero {
  background:
    linear-gradient(118deg, transparent 0 47%, rgb(102 173 58 / .3) 47% 56%, transparent 56% 63%, rgb(255 255 255 / .13) 63% 71%, transparent 71%),
    linear-gradient(118deg, transparent 0 9%, rgb(6 32 90 / .34) 9% 19%, transparent 19%),
    radial-gradient(ellipse 46% 80% at 80% 34%, rgb(255 255 255 / .3), transparent 72%),
    var(--hf, linear-gradient(106deg, #123f7c 0%, #1d5fb0 22%, #2f96d8 50%, #1fa8bc 78%, #66ad3a 112%));
}

/* The masthead is set like the issuer's name across a note: wide-spaced capitals */
.masthead > .wrap { font: 700 .78rem/1.3 var(--display); letter-spacing: .3em; }
@media (max-width: 760px) { .masthead > .wrap { font-size: .64rem; letter-spacing: .16em; } }

/* The facts run along a dark band at the foot, like the issuer band on the 1967 dollar */
.strip-band { background: linear-gradient(90deg, rgb(4 22 60 / .9), rgb(8 44 100 / .8)); color: var(--onDeep); box-shadow: 0 -1px 0 rgb(255 255 255 / .35); }
.strip-band::before { background: #fff; opacity: .5; }
main > section.note-hero .strip-band :is(.facts-strip, .facts-strip li) { color: var(--onDeep); }
.strip-band .facts-strip li + li { border-left-color: rgb(255 255 255 / .22); }
.strip-band .facts-strip .i { color: var(--cta); }
.note-hero:has(.strip-band) > .microline { color: #fff; opacity: .5; }
@media (max-width: 480px) { .strip-band .facts-strip li + li { border-top-color: rgb(255 255 255 / .2); } }

/* ----- printed furniture, second edition ----- */
.note-deco .numeral { background: var(--engrave), linear-gradient(115deg, rgb(255 255 255 / .34), rgb(143 230 214 / .36) 45%, rgb(200 186 255 / .3) 75%, rgb(255 255 255 / .34)); -webkit-background-clip: text; background-clip: text; }
.note-deco .ribbon { position: absolute; width: 520px; height: 360px; pointer-events: none; background: rgb(255 255 255 / .5); -webkit-mask: var(--m-ribbon) center / contain no-repeat; mask: var(--m-ribbon) center / contain no-repeat; }
.note-deco .ribbon { left: -150px; bottom: -110px; transform: rotate(-8deg); }
.note-hero:has(.strip-band) .note-deco .ribbon { bottom: 20px; }

@media (max-width: 760px) { .note-deco .ribbon { width: 380px; height: 262px; left: -120px; } }

/* Lines of microprint down both edges, as along the sides of the Swiss and Mexican notes */
.note-deco .edge { position: absolute; top: 0; bottom: 0; width: 14px; overflow: hidden; pointer-events: none; font: 600 7.5px/14px var(--mono); letter-spacing: .36em; white-space: nowrap; writing-mode: vertical-rl; color: var(--ink); opacity: .5; }
.note-deco .edge { color: #fff; }
.note-deco .edge::before { content: "MUSSKART TECHNOLOGY LIMITED · MMXXVII · NIGERIA · MUSSKART LAB · MMXXVII · NIGERIA · MUSSKART TECHNOLOGY LIMITED · MMXXVII · NIGERIA · MUSSKART LAB · MMXXVII · NIGERIA · MUSSKART TECHNOLOGY LIMITED · MMXXVII · NIGERIA · MUSSKART LAB · MMXXVII · NIGERIA · "; }
.edge-l { left: 22px; }
.edge-r { right: 22px; transform: rotate(180deg); }
.note-hero .note-deco .edge-l { left: 22px; }
@media (max-width: 760px) { .note-deco .edge { display: none; } }

/* A chain of lozenges closes each section heading's rule */
.section-head > .kicker::after { height: 8px; background: currentColor; opacity: .38; -webkit-mask: var(--m-diamonds) repeat-x left center / 36px 14px; mask: var(--m-diamonds) repeat-x left center / 36px 14px; }

/* ----- light sections: every container is a pane of the wash ----- */
main > section:not(.dark) :is(.card, .price-card, .spec, .quote, .app, .way, .mini-client, .credential, .post-card, .toc, .place-card, .project-body, .answer) {
  background: var(--glass); border-color: rgb(255 255 255 / .7); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 26px 46px -32px rgb(6 28 70 / .6); outline: 1px solid rgb(255 255 255 / .62); outline-offset: -8px;
}
main > section:not(.dark) :is(.panel, .form) { background: var(--glass-read); border-color: rgb(255 255 255 / .8); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 30px 54px -36px rgb(6 28 70 / .6); outline: 1px solid rgb(255 255 255 / .75); outline-offset: -8px; }
main > section:not(.dark) .logos { background: rgb(255 255 255 / .74); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 26px 46px -32px rgb(6 28 70 / .6); }
main > section:not(.dark) .logos li { box-shadow: inset -1px -1px 0 rgb(120 160 210 / .32); }
main > section:not(.dark) .logos li:hover { background: rgb(255 255 255 / .6); }
main > section:not(.dark) .field :is(input, select, textarea) { background: rgb(255 255 255 / .62); border-color: rgb(14 31 61 / .28); }
main > section:not(.dark) :is(.ask-chips a, .orbit li) { background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); }
main > section:not(.dark) .callout { background: rgb(255 255 255 / .5); border-left-color: var(--ink); }
main > section:not(.dark) .post-card-service { background: linear-gradient(150deg, rgb(255 255 255 / .4), rgb(255 255 255 / .2)); }
@media (min-width: 900px) and (hover: hover) {
  main > section:not(.dark) :is(.spec, .price-card, .place-card, .toc, .answer, .quote) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  main > section:not(.dark) :is(.panel, .form) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
/* Type inside a pane is ink: the softer greys of the old white cards would fade into the wash behind the glass */
main > section:not(.dark) :is(.card, .price-card, .spec, .quote, .app, .way, .mini-client, .credential, .post-card, .toc, .place-card, .project-body, .answer, .panel, .form) :is(p, li, dd, dt, small, label, span, blockquote, summary, td, th):not(.chip):not(.btn *) { color: var(--ink); }
main > section:not(.dark) :is(.card, .price-card, .spec, .quote, .app, .way, .post-card, .project-body, .place-card) :is(.post-cat, .app-for, .go, .project-links a, .quote-site, figcaption span span, .spec dt, .addr .i, .project-body .chip) { color: color-mix(in srgb, var(--cd, var(--vd1)) 38%, var(--ink)); }
main > section:not(.dark) :is(.card, .price-card, .post-card) .price { color: color-mix(in srgb, var(--cd, var(--vd1)) 40%, var(--ink)); }
main > section:not(.dark) :is(.panel, .toc, .answer, .callout) a:not(.btn) { color: color-mix(in srgb, var(--link) 70%, var(--ink)); }

/* ----- dark sections: panes of pale glass ----- */
main > section.dark :is(.place-card, .card, .quote, .post-card, .spec, .price-card, .panel, .form) {
  background: var(--glass-pale); border-color: rgb(255 255 255 / .3); color: var(--onDeep);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 26px 46px -32px rgb(0 0 0 / .6); outline: 1px solid rgb(255 255 255 / .26); outline-offset: -8px;
}
main > section.dark :is(.place-card, .card, .quote, .post-card, .spec, .price-card, .panel, .form) :is(p, li, dd, dt, h3, strong, span, address) { color: var(--onDeep); }
main > section.dark .place-card .btn { background: var(--cta); color: var(--onCta); }
main > section.dark .tech li { background: linear-gradient(150deg, rgb(255 255 255 / .86), rgb(226 238 252 / .8)); border: 1px solid rgb(255 255 255 / .6); }
main > section.dark .tech li :is(span, b, p) { color: #14243f; }
@media (min-width: 900px) and (hover: hover) { main > section.dark :is(.place-card, .spec, .price-card) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } }

/* Cards that were deep on purpose stay deep: dark glass with light type */
main > section:not(.dark) :is(.quotes-feature > :first-child, .cards-stagger .card:nth-child(4n+1)) {
  background: linear-gradient(150deg, rgb(5 24 64 / .92), rgb(8 40 94 / .8)); border-color: rgb(255 255 255 / .3); color: var(--onDeep); outline-color: rgb(255 255 255 / .28);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 26px 46px -32px rgb(2 12 40 / .7);
}
main > section:not(.dark) :is(.quotes-feature > :first-child, .cards-stagger .card:nth-child(4n+1)) :is(p, li, span, blockquote, strong, h3, figcaption, a):not(.btn) { color: var(--onDeep); }
main > section:not(.dark) :is(.quotes-feature > :first-child, .cards-stagger .card:nth-child(4n+1)) :is(figcaption span span, .quote-site, .go, .post-cat) { color: #bfe0ff; }
/* Panes inside dark sections are deeper than the section, never paler, so light type keeps its contrast */
main > section.dark :is(.place-card, .card, .quote, .post-card, .spec, .price-card, .panel, .form) { background: linear-gradient(150deg, rgb(3 16 46 / .58), rgb(3 16 46 / .36)); }

/* A short answer sits in the reading pane as a lightly tinted window, not a second white layer */
main > section:not(.dark) .panel .answer { background: rgb(255 255 255 / .28); outline: none; box-shadow: none; }

/* ---------- Currency faces ----------
   Every section is printed as a full face of one of the notes (in our colours); build_site.py picks the face (FACES) and writes
   its traits as data attributes on .fx: where the big denomination sits and how it is cut, an information strip, colour bands,
   a frosted window, a medallion, a guilloche ribbon, a hexagon medallion, dots, lozenges and an issuer line. The box that
   opens each page is a small note too, with a landscape face when it is wide and a portrait face when it is tall. */
.fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; color: var(--ink); --dc: var(--ink); --f1: var(--v1); --f2: var(--v2); --f3: var(--v3); --f4: var(--v4); }
main > section.dark > .fx, .pdeco.fx { color: #fff; --dc: #fff; }
.fx[data-fink="2"] { --f1: var(--v2); --f2: var(--v3); --f3: var(--v1); }
.fx[data-fink="3"] { --f1: var(--v3); --f2: var(--v1); --f3: var(--v2); }
.fx[data-fink="4"] { --f1: var(--v1); --f2: var(--v3); --f3: var(--v4); --f4: var(--v2); }
.fx > i { position: absolute; display: none; }
.fx > :is(.lace, .glare, .edge, .big, .ser) { display: block; }
.fx[data-band] > .bands, .fx[data-strip] > .strip, .fx[data-win] > .win, .fx[data-med] > .med, .fx[data-rib] > .ribbon, .fx[data-hexm] > .hexm,
.fx[data-dots] > .dots, .fx[data-diam] > .diam, .fx[data-issuer] > .issuer, .fx[data-num2] > .big2 { display: block; }

.fx > .lace { left: 0; right: 0; top: 0; height: 12px; background: var(--iris); opacity: .5; -webkit-mask: var(--m-lace) repeat-x left center / 96px 12px; mask: var(--m-lace) repeat-x left center / 96px 12px; }
main > section.dark > .fx > .lace { background: #fff; opacity: .3; }

/* Colour bands, laid over each other like the overprints on the Swiss, Mexican and rand notes */
.fx > .bands { inset: 0; }
.fx > .bands b { position: absolute; display: block; }
.fx[data-band="h"] > .bands b:nth-child(1) { left: 0; right: 0; top: 60%; height: 17%; background: color-mix(in srgb, var(--f2) 24%, transparent); }
.fx[data-band="h"] > .bands b:nth-child(2) { left: 0; right: 0; top: 77%; height: 9%; background: color-mix(in srgb, var(--f3) 22%, transparent); }
.fx[data-band="v"] > .bands b:nth-child(1) { left: 0; width: 20%; top: 0; bottom: 0; background: rgb(255 255 255 / .2); }
.fx[data-band="v"] > .bands b:nth-child(2) { left: 72%; width: 28%; top: 0; bottom: 0; background: color-mix(in srgb, var(--f1) 24%, transparent); }
.fx[data-band="d"] > .bands b:nth-child(1) { top: -30%; bottom: -30%; left: 40%; width: 15%; transform: skewX(-22deg); background: color-mix(in srgb, var(--f4) 26%, transparent); }
.fx[data-band="d"] > .bands b:nth-child(2) { top: -30%; bottom: -30%; left: 58%; width: 6%; transform: skewX(-22deg); background: rgb(255 255 255 / .2); }
.fx[data-band="x"] > .bands b:nth-child(1) { left: 10%; top: 24%; width: 58%; height: 50%; transform: rotate(-3deg); background: color-mix(in srgb, var(--f2) 20%, transparent); }
.fx[data-band="x"] > .bands b:nth-child(2) { left: 34%; top: 46%; width: 56%; height: 30%; transform: rotate(2deg); background: color-mix(in srgb, var(--f3) 18%, transparent); }
main > section.dark > .fx[data-band="v"] > .bands b:nth-child(1) { background: rgb(255 255 255 / .08); }

/* The information strip down one edge, with the issuer's name running along it and the denomination at its foot */
.fx > .strip { top: 0; bottom: 0; width: clamp(60px, 6.2vw, 92px); background: linear-gradient(rgb(255 255 255 / .3), rgb(255 255 255 / .14)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.fx[data-strip="r"] > .strip { right: 0; }
.fx[data-strip="l"] > .strip { left: 0; }
main > section.dark > .fx > .strip { background: linear-gradient(rgb(255 255 255 / .1), rgb(255 255 255 / .05)); }
.fx > .strip b { position: absolute; inset: 0; display: block; }
.fx > .strip b::before { content: "MUSSKART TECHNOLOGY LIMITED · NIGERIA"; position: absolute; inset: 22px 0 96px; display: block; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; white-space: nowrap; font: 700 .7rem/1 var(--display); letter-spacing: .34em; color: var(--dc); opacity: .62; }
.fx > .strip b::after { content: var(--denom); position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 800 2.3rem/1 var(--display); letter-spacing: -.04em; color: var(--dc); opacity: .62; }
@media (max-width: 1240px) { .fx:not(.pdeco) > .strip { display: none; } }

/* A frosted window with a ghost rosette in it, like the clear windows in the polymer notes. Windows, medallions and hexagons sit in the
   side margins, as wide as the margin allows, so they never print under the words. */
.fx > :is(.win, .med, .hexm) { --m: clamp(48px, calc(50vw - 630px), 140px); width: var(--m); }
.fx > .win { aspect-ratio: .74; border-radius: 22px; background: radial-gradient(circle at 38% 30%, rgb(255 255 255 / .52), rgb(255 255 255 / .12) 72%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75), inset 0 0 0 5px rgb(255 255 255 / .1); }
.fx > .win::after { content: ""; position: absolute; inset: 18%; background: rgb(255 255 255 / .6); -webkit-mask: var(--m-rosette) center / contain no-repeat; mask: var(--m-rosette) center / contain no-repeat; }
.fx[data-win="l"] > .win, .fx[data-win="r"] > .win { top: 50%; translate: 0 -50%; aspect-ratio: .6; border-radius: 50% / 38%; }
.fx[data-win="l"] > .win, .fx[data-win="tl"] > .win, .fx[data-win="bl"] > .win { left: 12px; }
.fx[data-win="r"] > .win, .fx[data-win="tr"] > .win, .fx[data-win="br"] > .win { right: 12px; }
.fx[data-win="tl"] > .win, .fx[data-win="tr"] > .win { top: 16%; } .fx[data-win="bl"] > .win, .fx[data-win="br"] > .win { bottom: 16%; }
.fx > .med { aspect-ratio: 1; background: var(--dc); opacity: .3; -webkit-mask: var(--m-rosette) center / contain no-repeat; mask: var(--m-rosette) center / contain no-repeat; }
.fx[data-med="tl"] > .med, .fx[data-med="bl"] > .med { left: 12px; } .fx[data-med="tr"] > .med, .fx[data-med="br"] > .med { right: 12px; }
.fx[data-med="tl"] > .med, .fx[data-med="tr"] > .med { top: 30%; } .fx[data-med="bl"] > .med, .fx[data-med="br"] > .med { bottom: 26%; }
.fx > .ribbon { width: 520px; height: 360px; background: var(--dc); opacity: .2; -webkit-mask: var(--m-ribbon) center / contain no-repeat; mask: var(--m-ribbon) center / contain no-repeat; }
.fx[data-rib="tl"] > .ribbon { left: -170px; top: -120px; transform: rotate(14deg); } .fx[data-rib="tr"] > .ribbon { right: -170px; top: -110px; transform: rotate(-12deg); }
.fx[data-rib="bl"] > .ribbon { left: -180px; bottom: -140px; transform: rotate(-10deg); } .fx[data-rib="br"] > .ribbon { right: -180px; bottom: -130px; transform: rotate(10deg); }
.fx > .hexm { aspect-ratio: 1.15; top: 50%; translate: 0 -50%; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); background: color-mix(in srgb, var(--f1) 22%, rgb(255 255 255 / .12)); }
.fx > .hexm::after { content: ""; position: absolute; inset: 14%; background: var(--dc); opacity: .34; -webkit-mask: var(--m-rosette) center / contain no-repeat; mask: var(--m-rosette) center / contain no-repeat; }
.fx[data-hexm="l"] > .hexm { left: 12px; } .fx[data-hexm="r"] > .hexm { right: 12px; }
.fx > .dots { width: 320px; height: 260px; background: var(--dc); opacity: .32; -webkit-mask: var(--m-dots) 0 0 / 144px 120px; mask: var(--m-dots) 0 0 / 144px 120px; }
.fx[data-dots="l"] > .dots { left: 3%; bottom: 8%; } .fx[data-dots="r"] > .dots { right: 4%; top: 10%; transform: rotate(-8deg); }
.fx > .diam { left: 0; right: 0; height: 14px; background: var(--dc); opacity: .4; -webkit-mask: var(--m-diamonds) repeat-x center / 36px 14px; mask: var(--m-diamonds) repeat-x center / 36px 14px; }
.fx[data-diam="b"] > .diam { bottom: 44px; } .fx[data-diam="t"] > .diam { top: 22px; }
@media (max-width: 1299px) { .fx:not(.pdeco) > :is(.win, .med, .hexm) { display: none !important; } }

/* The issuer's name: a spaced-capitals title across the top, or a dark band along the foot like the 1967 dollar */
.fx > .issuer::before { content: "MUSSKART TECHNOLOGY LIMITED"; }
.fx[data-issuer="top"] > .issuer { left: 3%; top: 22px; font: 800 .78rem/1 var(--display); letter-spacing: .44em; white-space: nowrap; color: var(--dc); opacity: .55; }
.fx[data-issuer="bottom"] > .issuer { left: 0; right: 0; bottom: 0; height: 34px; display: grid; place-items: center; background: linear-gradient(90deg, rgb(4 22 60 / .84), rgb(8 44 100 / .72)); color: rgb(255 255 255 / .92); font: 700 .68rem/1 var(--display); letter-spacing: .62em; }
main > section:has(> .fx[data-issuer="bottom"]) > .microline { display: none; }
@media (max-width: 760px) { .fx[data-issuer="top"] > .issuer { letter-spacing: .24em; font-size: .62rem; } .fx[data-issuer="bottom"] > .issuer { letter-spacing: .3em; } }

/* Microprint down both edges */
.fx > .edge { top: 0; bottom: 0; width: 14px; overflow: hidden; font: 600 7.5px/14px var(--mono); letter-spacing: .36em; white-space: nowrap; writing-mode: vertical-rl; color: var(--dc); opacity: .46; }
.fx > .edge::before { content: "MUSSKART TECHNOLOGY LIMITED · MMXXVII · NIGERIA · MUSSKART LAB · MMXXVII · NIGERIA · MUSSKART TECHNOLOGY LIMITED · MMXXVII · NIGERIA · MUSSKART LAB · MMXXVII · NIGERIA · MUSSKART TECHNOLOGY LIMITED · MMXXVII · NIGERIA · MUSSKART LAB · MMXXVII · NIGERIA · "; }
.fx > .edge-l { left: 22px; } .fx > .edge-r { right: 22px; transform: rotate(180deg); }
@media (max-width: 760px) { .fx > .edge { display: none; } }

/* The big denomination: bold, in a corner, bleeding a little into the margin */
.fx > .big, .fx > .big2 {
  font: 800 clamp(7rem, 16.5vw, 17.5rem)/.8 var(--display); letter-spacing: -.07em; white-space: nowrap; color: color-mix(in srgb, var(--f2) 28%, transparent);
  -webkit-text-stroke: 2.5px color-mix(in srgb, var(--dc) 46%, transparent);
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--dc) 30%, transparent) 0 1px, transparent 1px 5px); -webkit-background-clip: text; background-clip: text;
}
.fx > .big::before, .fx > .big2::before { content: var(--denom); }
.fx[data-nstyle="outline"] > .big { color: transparent; }
.fx > .big2 { color: transparent; font-size: clamp(5rem, 10vw, 11rem); -webkit-text-stroke-width: 1.5px; opacity: .8; }
.fx[data-num="tl"] > .big, .fx[data-num2="tl"] > .big2 { top: -18px; left: 2%; } .fx[data-num="tr"] > .big, .fx[data-num2="tr"] > .big2 { top: -18px; right: 2%; }
.fx[data-num="bl"] > .big, .fx[data-num2="bl"] > .big2 { bottom: 4px; left: 2%; } .fx[data-num="br"] > .big, .fx[data-num2="br"] > .big2 { bottom: 4px; right: 2%; }
.fx[data-nstyle="block"] > .big {
  padding: .1em .2em .04em; font-size: clamp(2.6rem, 4.4vw, 4.4rem); line-height: 1; color: rgb(255 255 255 / .94); -webkit-text-stroke: 0; border-radius: 3px;
  background: linear-gradient(150deg, rgb(4 22 60 / .8), rgb(8 44 100 / .68)); -webkit-background-clip: border-box; background-clip: border-box;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), 0 0 0 4px rgb(255 255 255 / .14);
}
.fx[data-nstyle="block"][data-num="tl"] > .big { top: 20px; left: 3%; } .fx[data-nstyle="block"][data-num="tr"] > .big { top: 20px; right: 3%; }
.fx[data-nstyle="block"][data-num="bl"] > .big { bottom: 36px; left: 3%; } .fx[data-nstyle="block"][data-num="br"] > .big { bottom: 36px; right: 3%; }
main > section.dark > .fx > .big { -webkit-text-stroke-color: rgb(255 255 255 / .4); }
.fx > .ser { left: 24px; bottom: 30px; font: 600 .66rem/1 var(--mono); letter-spacing: .26em; white-space: nowrap; color: color-mix(in srgb, var(--dc) 66%, transparent); }
.fx > .ser::before { content: "A " var(--denom) "·2027 MTL"; }
.fx:is([data-num="bl"], [data-num2="bl"]) > .ser { left: auto; right: 24px; }
@media (max-width: 760px) { .fx > .big, .fx > .big2 { font-size: 6rem; } .fx[data-nstyle="block"] > .big { font-size: 2.6rem; } .fx > .big2, .fx > .ser { display: none; } }

/* ----- the glare: a bar of light passing across the note, as it does when a polymer note is turned in the hand ----- */
.fx > .glare, .note-deco > .glare { top: -10%; bottom: -10%; left: 0; width: 36%; background: linear-gradient(105deg, transparent 18%, rgb(255 255 255 / .1) 36%, rgb(255 255 255 / .34) 50%, rgb(255 255 255 / .1) 64%, transparent 82%); transform: translateX(-130%) skewX(-16deg); }
.note-deco > .glare { position: absolute; width: 30%; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes glide { from { transform: translateX(-130%) skewX(-16deg); } to { transform: translateX(400%) skewX(-16deg); } }
  .note-deco > .glare { animation: glide 9s ease-in-out 1s infinite; }
  .pdeco > .glare { width: 60%; animation: glide 7s ease-in-out 2s infinite; }
  @supports (animation-timeline: view()) { .fx:not(.pdeco) > .glare { animation: glide linear both; animation-timeline: view(); } }
}
@media (prefers-reduced-motion: reduce) { .fx > .glare, .note-deco > .glare { display: none; } }

/* ----- the first box of every page: a small note, with the patterns of its own currency ----- */
main > section.note-hero [data-shapes][data-pat]::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; right: auto; bottom: auto; z-index: -1; background: transparent var(--pat) 0 0 / var(--pat-size); opacity: .3; -webkit-mask: linear-gradient(135deg, #000 10%, rgb(0 0 0 / .3)); mask: linear-gradient(135deg, #000 10%, rgb(0 0 0 / .3)); pointer-events: none; }
.pdeco.fx { z-index: -1; }
.pdeco > .big { font-size: clamp(3.2rem, 5vw, 4.6rem); opacity: .8; }
.pdeco[data-nstyle="block"] > .big { font-size: clamp(2rem, 3vw, 2.8rem); }
.pdeco[data-strip] > .big { display: none; }
.pdeco > .strip { width: 54px; } .pdeco > .strip b::before { inset: 22px 0 76px; font-size: .6rem; } .pdeco > .strip b::after { font-size: 1.7rem; bottom: 14px; }
.pdeco > .dots { width: 200px; height: 170px; opacity: .3; }
.pdeco[data-num="tl"] > .big, .pdeco[data-num="bl"] > .big { top: auto; bottom: 8px; left: 12px; } .pdeco[data-num="tr"] > .big, .pdeco[data-num="br"] > .big { top: auto; bottom: 8px; right: 12px; }
.pdeco[data-nstyle="block"][data-num] > .big { bottom: 18px; }
.pdeco[data-nstyle="block"][data-num="tl"] > .big, .pdeco[data-nstyle="block"][data-num="bl"] > .big { left: 22px; } .pdeco[data-nstyle="block"][data-num="tr"] > .big, .pdeco[data-nstyle="block"][data-num="br"] > .big { right: 22px; }
.dark:has(> .pdeco[data-strip="r"]) { padding-right: calc(clamp(26px, 4vw, 52px) + 54px); }
.dark:has(> .pdeco[data-strip="l"]) { padding-left: calc(clamp(26px, 4vw, 52px) + 54px); }
.note-hero:not(:has(.hero-grid)) > .wrap.dark:has(> .pdeco[data-strip="r"]) { padding-right: calc(clamp(26px, 4.4vw, 56px) + 54px); }
.note-hero:not(:has(.hero-grid)) > .wrap.dark:has(> .pdeco[data-strip="l"]) { padding-left: calc(clamp(26px, 4.4vw, 56px) + 54px); }
.pdeco > .strip { display: none; } .pdeco[data-strip] > .strip { display: block; }
.pdeco[data-strip="l"] > .strip b::before { transform: none; }

/* Small controls that sit on a face keep their own dark ground, so the bands and glare behind them never wash them out */
.note-hero .service-nav a { background: rgb(5 24 64 / .5); border-color: rgb(255 255 255 / .55); }
main > section.dark .btn-ghost { background: rgb(4 22 60 / .5); }
main > section.note-hero .dark .btn-ghost { background: rgb(4 22 60 / .45); }

/* On a phone the box has no strip, so changing its face never moves a word */
@media (max-width: 640px) {
  .pdeco[data-strip] > .strip { display: none; }
  .dark:has(> .pdeco[data-strip]) { padding-inline: clamp(22px, 5vw, 30px) !important; }
  .pdeco[data-strip] > .big { display: block; }
}
@media (max-width: 960px) { .dark:has(> .pdeco[data-strip="r"]), .dark:has(> .pdeco[data-strip="l"]) { padding-inline: clamp(26px, 4.4vw, 56px); } .pdeco[data-strip] > .strip { display: none; } .pdeco[data-strip] > .big { display: block; } }

/* ---------- The first box of every page is a banknote of its own ----------
   A printed border with a rosette in each corner, the denomination in all four corners, the issuer's name along the top and
   serial numbers along the foot, and the field divided into three zones of engraved patterns, arranged the way different notes
   arrange theirs: side bands (col), top and bottom bands (row), a border ring with a round patch (ring), a side band with a patch
   (split) or opposite corners (diag). The words sit in the calmer middle zone. */
main > section.note-hero [data-shapes][data-pat] {
  background: radial-gradient(ellipse 74% 68% at 36% 52%, rgb(3 14 42 / .5), transparent 80%), linear-gradient(115deg, rgb(6 34 90 / .88), rgb(14 78 150 / .78) 55%, rgb(10 100 130 / .72));
  outline: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4), 0 0 0 1px rgb(255 255 255 / .18), 0 40px 64px -34px rgb(2 12 40 / .85);
}
main > section.note-hero [data-shapes][data-pat]::before { display: none; }
main > section.note-hero [data-shapes][data-pat]::after { opacity: .2; }
.note-hero:not(:has(.hero-grid)) > .wrap[data-shapes] { padding: clamp(62px, 5.4vw, 72px) clamp(48px, 5vw, 68px) clamp(56px, 4.6vw, 64px); }
.note-hero .hero-grid > [data-shapes] { padding: clamp(62px, 5.4vw, 72px) clamp(46px, 4.4vw, 58px) clamp(56px, 4.6vw, 64px); }
.note-hero:not(:has(.hero-grid)) > .wrap[data-shapes]:has(> .pdeco[data-strip="r"]) { padding-right: calc(clamp(48px, 5vw, 68px) + 62px); }
.note-hero:not(:has(.hero-grid)) > .wrap[data-shapes]:has(> .pdeco[data-strip="l"]) { padding-left: calc(clamp(48px, 5vw, 68px) + 62px); }
.note-hero .hero-grid > [data-shapes]:has(> .pdeco[data-strip="r"]) { padding-right: calc(clamp(46px, 4.4vw, 58px) + 62px); }
.note-hero .hero-grid > [data-shapes]:has(> .pdeco[data-strip="l"]) { padding-left: calc(clamp(46px, 4.4vw, 58px) + 62px); }

.pdeco.fx { color: #fff; --dc: #fff; z-index: -1; }
.pdeco > i { position: absolute; display: none; }
.pdeco > :is(.pz, .frame, .cn, .issuer, .ser, .glare) { display: block; }
.pdeco[data-band] > .bands, .pdeco[data-dots] > .dots, .pdeco[data-strip] > .strip { display: block; }
.pdeco > .bands { opacity: .75; }

/* The three zones: each prints one pattern, shaped by the layout */
.pdeco > .pz { inset: 0; z-index: 0; }
.pdeco > .pz-a { --pat-o: .62; background: linear-gradient(135deg, rgb(255 255 255 / .12), rgb(255 255 255 / .02)); }
.pdeco > .pz-b { --pat-o: .3; }
.pdeco > .pz-c { --pat-o: .66; background: color-mix(in srgb, var(--f1) 28%, transparent); }
.pdeco { --zx: 40px; --zt: 56px; --zb: 52px; }
.pdeco[data-lay="col"] > .pz-a { clip-path: inset(0 calc(100% - var(--zx)) 0 0); } .pdeco[data-lay="col"] > .pz-b { clip-path: inset(0 var(--zx)); } .pdeco[data-lay="col"] > .pz-c { clip-path: inset(0 0 0 calc(100% - var(--zx))); }
.pdeco[data-lay="row"] > .pz-a { clip-path: inset(0 0 calc(100% - var(--zt)) 0); } .pdeco[data-lay="row"] > .pz-b { clip-path: inset(var(--zt) 0 var(--zb) 0); } .pdeco[data-lay="row"] > .pz-c { clip-path: inset(calc(100% - var(--zb)) 0 0 0); }
.pdeco[data-lay="ring"] > .pz-a { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--zx) var(--zt), var(--zx) calc(100% - var(--zb)), calc(100% - var(--zx)) calc(100% - var(--zb)), calc(100% - var(--zx)) var(--zt), var(--zx) var(--zt)); }
.pdeco[data-lay="ring"] > .pz-b { clip-path: inset(var(--zt) var(--zx) var(--zb) var(--zx)); } .pdeco[data-lay="ring"] > .pz-c { clip-path: circle(74px at calc(100% - 92px) calc(100% - 96px)); }
.pdeco[data-lay="split"] > .pz-a { clip-path: inset(0 calc(100% - var(--zx)) 0 0); } .pdeco[data-lay="split"] > .pz-b { clip-path: inset(0 0 0 var(--zx)); } .pdeco[data-lay="split"] > .pz-c { clip-path: circle(64px at 96px calc(100% - 92px)); }
.pdeco[data-lay="diag"] > .pz-a { clip-path: polygon(0 calc(100% - 96px), 96px 100%, 0 100%); } .pdeco[data-lay="diag"] > .pz-b { clip-path: inset(0); } .pdeco[data-lay="diag"] > .pz-c { clip-path: polygon(100% 0, calc(100% - 96px) 0, 100% 96px); }

/* The printed border: braided lace along all four sides and a rosette in each corner */
.pdeco > .frame { inset: 7px; z-index: 2; }
.pdeco > .frame b { position: absolute; display: block; background: linear-gradient(90deg, #bfe0ff, #8fe6d6, #c4eb94); opacity: .78; }
.pdeco > .frame b:nth-child(1), .pdeco > .frame b:nth-child(2) { left: 0; right: 0; height: 12px; -webkit-mask: var(--m-lace) repeat-x left center / 96px 12px; mask: var(--m-lace) repeat-x left center / 96px 12px; }
.pdeco > .frame b:nth-child(1) { top: 0; } .pdeco > .frame b:nth-child(2) { bottom: 0; }
.pdeco > .frame b:nth-child(3), .pdeco > .frame b:nth-child(4) { top: 0; bottom: 0; width: 16px; background: linear-gradient(180deg, #bfe0ff, #8fe6d6, #c4eb94); -webkit-mask: var(--m-lace-v) repeat-y center top / 16px 96px; mask: var(--m-lace-v) repeat-y center top / 16px 96px; }
.pdeco > .frame b:nth-child(3) { left: -2px; } .pdeco > .frame b:nth-child(4) { right: -2px; }
.pdeco > .frame::before { content: ""; position: absolute; inset: -9px; background: rgb(255 255 255 / .88); pointer-events: none;
  -webkit-mask: var(--m-rosette) left top / 36px 36px no-repeat, var(--m-rosette) right top / 36px 36px no-repeat, var(--m-rosette) left bottom / 36px 36px no-repeat, var(--m-rosette) right bottom / 36px 36px no-repeat;
  mask: var(--m-rosette) left top / 36px 36px no-repeat, var(--m-rosette) right top / 36px 36px no-repeat, var(--m-rosette) left bottom / 36px 36px no-repeat, var(--m-rosette) right bottom / 36px 36px no-repeat; }
.pdeco > .frame::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgb(255 255 255 / .42); pointer-events: none; }

/* The denomination in all four corners, the issuer's name along the top, serial numbers along the foot */
.pdeco > .cn { z-index: 3; padding: .14em .5em .08em; font: 800 .88rem/1 var(--display); letter-spacing: .02em; color: #fff; border-radius: 2px;
  background: linear-gradient(150deg, rgb(4 22 60 / .88), rgb(8 44 100 / .78)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .42); }
.pdeco > .cn::before { content: var(--denom); }
.pdeco > .cn-tl { top: 24px; left: 28px; } .pdeco > .cn-tr { top: 24px; right: 28px; } .pdeco > .cn-bl { bottom: 24px; left: 28px; } .pdeco > .cn-br { bottom: 24px; right: 28px; }
.pdeco[data-strip="r"] > :is(.cn-tr, .cn-br) { right: 88px; } .pdeco[data-strip="l"] > :is(.cn-tl, .cn-bl) { left: 88px; }
.pdeco.fx > .issuer, .pdeco.fx[data-issuer] > .issuer { top: 27px; left: 0; right: 0; bottom: auto; height: auto; display: block; background: none; text-align: center; white-space: nowrap; opacity: 1;
  font: 700 .54rem/1 var(--display); letter-spacing: .5em; color: rgb(255 255 255 / .82); }
.pdeco.fx > .ser { left: 78px; right: auto; bottom: 27px; font-size: .54rem; letter-spacing: .24em; color: rgb(255 255 255 / .74); z-index: 3; }
.pdeco.fx > .ser2 { left: auto; right: 78px; }
.pdeco > .ser2::before { content: "MTL·2027·" var(--denom) "·B"; }

/* The information strip sits inside the border */
.pdeco > .strip { top: 36px; bottom: 36px; z-index: 1; }
.pdeco[data-strip="r"] > .strip { right: 24px; } .pdeco[data-strip="l"] > .strip { left: 24px; }
.pdeco > .dots { z-index: 1; }

@media (max-width: 640px) {
  .pdeco > .cn, .pdeco > .ser2 { display: none; }
  .pdeco.fx > .issuer { letter-spacing: .3em; font-size: .5rem; top: 24px; }
  .pdeco > .frame { inset: 5px; } .pdeco > .frame::after { inset: 13px; }
  .pdeco.fx > .ser { left: 30px; bottom: 22px; }
  .note-hero:not(:has(.hero-grid)) > .wrap[data-shapes], .note-hero .hero-grid > [data-shapes] { padding: 52px clamp(28px, 7vw, 34px) 46px !important; }
}
.note-hero .reach b { opacity: 1; }
/* On a phone the box has no information strip, so the words keep the whole width */
@media (max-width: 640px) { .pdeco[data-strip] > .strip { display: none; } .pdeco > .dots { opacity: .22; } }
@media (max-width: 960px) { .pdeco[data-strip] > .strip { display: none; } .note-hero .hero-grid > [data-shapes]:has(> .pdeco[data-strip]), .note-hero:not(:has(.hero-grid)) > .wrap[data-shapes]:has(> .pdeco[data-strip]) { padding-inline: clamp(36px, 6vw, 58px); } }
.note-hero .reach b { text-shadow: 0 0 6px rgb(3 14 42 / .95), 0 0 2px rgb(3 14 42 / .95); }

/* ---------- Every page's opening box has its own style ----------
   build_site.py gives each page one frame (lace, double, wide, diamonds, dots), one colour scheme (royal, abyss, lagoon, fern, sky),
   one corner shape (square, chamfer, round), one numeral style (block, circle, bare, frame) and one title position, so no two
   pages repeat. The hero field takes the same colour scheme. All of it is drawn from the palette. */
main > section.note-hero[data-hf="abyss"] { --hf: linear-gradient(98deg, #0a2a5c 0%, #123f7c 24%, #1d5fb0 50%, #2f96d8 78%, #1fa8bc 108%); }
main > section.note-hero[data-hf="lagoon"] { --hf: linear-gradient(112deg, #0b4a66 0%, #14708a 30%, #1fa8bc 62%, #5fb7a0 90%, #66ad3a 120%); }
main > section.note-hero[data-hf="fern"] { --hf: linear-gradient(104deg, #0e4a5a 0%, #1a7a7c 30%, #2f9a78 62%, #66ad3a 96%, #8fc95a 118%); }
main > section.note-hero[data-hf="sky"] { --hf: linear-gradient(110deg, #1d5fb0 0%, #2f96d8 38%, #4fb4e6 66%, #1fa8bc 100%); }

/* Colour schemes of the box */
main > section.note-hero [data-shapes][data-pat][data-scheme="abyss"] { --lc1: #a9c8ff; --lc2: #d6e6ff; --lc3: #8fe6d6;
  background: radial-gradient(ellipse 74% 68% at 36% 52%, rgb(2 10 32 / .5), transparent 80%), linear-gradient(115deg, rgb(4 20 56 / .92), rgb(10 46 110 / .82) 55%, rgb(8 66 120 / .76)); }
main > section.note-hero [data-shapes][data-pat][data-scheme="lagoon"] { --lc1: #8fe6d6; --lc2: #c8f5ea; --lc3: #bfe0ff;
  background: radial-gradient(ellipse 74% 68% at 36% 52%, rgb(2 22 34 / .5), transparent 80%), linear-gradient(115deg, rgb(4 52 76 / .92), rgb(8 94 118 / .82) 55%, rgb(14 122 128 / .74)); }
main > section.note-hero [data-shapes][data-pat][data-scheme="fern"] { --lc1: #c4eb94; --lc2: #8fe6d6; --lc3: #bfe0ff;
  background: radial-gradient(ellipse 74% 68% at 36% 52%, rgb(2 22 28 / .5), transparent 80%), linear-gradient(115deg, rgb(6 44 62 / .92), rgb(10 86 92 / .82) 55%, rgb(34 112 74 / .76)); }
main > section.note-hero [data-shapes][data-pat][data-scheme="sky"] { --lc1: #e0f0ff; --lc2: #bfe0ff; --lc3: #8fe6d6;
  background: radial-gradient(ellipse 74% 68% at 36% 52%, rgb(3 18 52 / .55), transparent 80%), linear-gradient(115deg, rgb(12 58 128 / .9), rgb(26 104 178 / .82) 55%, rgb(20 124 156 / .76)); }
.pdeco > .frame b:nth-child(1), .pdeco > .frame b:nth-child(2) { background: linear-gradient(90deg, var(--lc1, #bfe0ff), var(--lc2, #8fe6d6), var(--lc3, #c4eb94)); }
.pdeco > .frame b:nth-child(3), .pdeco > .frame b:nth-child(4) { background: linear-gradient(180deg, var(--lc1, #bfe0ff), var(--lc2, #8fe6d6), var(--lc3, #c4eb94)); }

/* Frames */
[data-frame="double"] > .pdeco > .frame b { display: none; }
[data-frame="double"] > .pdeco > .frame { inset: 12px; border: 1px solid rgb(255 255 255 / .82); outline: 1px solid rgb(255 255 255 / .4); outline-offset: 5px; }
[data-frame="double"] > .pdeco > .frame::after { inset: 8px; border: 1px dashed rgb(255 255 255 / .38); }
[data-frame="wide"] > .pdeco > .frame b:nth-child(1), [data-frame="wide"] > .pdeco > .frame b:nth-child(2) { height: 20px; -webkit-mask-size: 160px 20px; mask-size: 160px 20px; }
[data-frame="wide"] > .pdeco > .frame b:nth-child(3), [data-frame="wide"] > .pdeco > .frame b:nth-child(4) { width: 22px; -webkit-mask-size: 22px 132px; mask-size: 22px 132px; }
[data-frame="wide"] > .pdeco > .frame b:nth-child(3) { left: -4px; } [data-frame="wide"] > .pdeco > .frame b:nth-child(4) { right: -4px; }
[data-frame="wide"] > .pdeco > .frame::after { inset: 26px; }
[data-frame="diamonds"] > .pdeco > .frame b:nth-child(1), [data-frame="diamonds"] > .pdeco > .frame b:nth-child(2) { height: 14px; background: #fff; opacity: .72; -webkit-mask: var(--m-diamonds) repeat-x center / 36px 14px; mask: var(--m-diamonds) repeat-x center / 36px 14px; }
[data-frame="diamonds"] > .pdeco > .frame b:nth-child(3), [data-frame="diamonds"] > .pdeco > .frame b:nth-child(4) { width: 1px; background: rgb(255 255 255 / .72); -webkit-mask: none; mask: none; }
[data-frame="diamonds"] > .pdeco > .frame b:nth-child(3) { left: 0; box-shadow: 5px 0 0 rgb(255 255 255 / .3); } [data-frame="diamonds"] > .pdeco > .frame b:nth-child(4) { right: 0; box-shadow: -5px 0 0 rgb(255 255 255 / .3); }
[data-frame="dots"] > .pdeco > .frame { inset: 11px; border: 3px dotted rgb(255 255 255 / .72); }
[data-frame="dots"] > .pdeco > .frame b:nth-child(n+2) { display: none; }
[data-frame="dots"] > .pdeco > .frame b:nth-child(1) { top: -3px; left: 22px; right: 22px; }
[data-frame="dots"] > .pdeco > .frame::after { inset: 10px; border: 1px solid rgb(255 255 255 / .3); }

/* Corner shapes */
main > section.note-hero [data-shapes][data-corner="chamfer"] { clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px); }
main > section.note-hero [data-shapes][data-corner="round"] { border-radius: 16px; }

/* Numeral styles */
[data-nums="circle"] > .pdeco > .cn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: .7rem; letter-spacing: 0; }
[data-nums="bare"] > .pdeco > .cn { padding: 0; background: none; box-shadow: none; font-size: 1.1rem; text-shadow: 0 0 6px rgb(3 14 42 / .95), 0 0 2px rgb(3 14 42 / .95); }
[data-nums="frame"] > .pdeco > .cn { border-radius: 0; background: rgb(3 14 42 / .35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 0 0 3px rgb(255 255 255 / .12); }
@media (max-width: 640px) { [data-nums] > .pdeco > .cn { display: none !important; } }

/* Where the issuer's name stands */
[data-title="left"] > .pdeco.fx > .issuer { left: 82px; right: auto; text-align: left; }
[data-title="right"] > .pdeco.fx > .issuer { left: auto; right: 82px; text-align: right; }
@media (max-width: 640px) { [data-title] > .pdeco.fx > .issuer { left: 0; right: 0; text-align: center; } }

/* ---------- Text that stands straight on a colour field: deeper ink, a little more body, a pale halo around the letters ----------
   Dark type on a patterned wash blurs into the line-work behind it. A thin pale halo (a clear zone, as banknote engravers leave
   round lettering) lifts each letter off the pattern, and the halo is a light tint of the wash itself, so it blends instead of
   boxing the text in. */
:root { --tx: #041126; --halo: rgb(236 246 255 / .92); }
main > section:not(.dark):not(.note-hero) {
  color: var(--tx);
  text-shadow: 0 0 .05em var(--halo), 0 0 .38em var(--halo), 0 0 .9em rgb(236 246 255 / .55);
}
main > section:not(.dark):not(.note-hero) :is(.lead, .kicker, .more, .note-line, .role, .facts, .rows, .steps, .faq, .project-label, .asks-label) { color: var(--tx); }
main > section:not(.dark):not(.note-hero) :is(.lead, .ticks li, .steps p, .rows p, .section-head p, .split > div > p, .faq details > div p) { -webkit-text-stroke: .28px currentColor; }
main > section:not(.dark):not(.note-hero) :is(.btn, .chip, .ink-text, .float-chip, .microline, .post-cat, .icon-tile) { text-shadow: none; -webkit-text-stroke: 0; }
main > section :is(.quotes-feature > :first-child, .cards-stagger .card:nth-child(4n+1), .strip-band) { text-shadow: none; -webkit-text-stroke: 0; }
main > section:not(.dark):not(.note-hero)[data-pat]::before { --pat-o: .36; }
.note-hero .reach b { font: 800 .72rem/1 var(--mono); }

/* The small "Or reach us" tag in the hero box is printed on a dark label so line-work never crosses it */
.note-hero .reach b { padding: 4px 8px 3px; background: rgb(3 14 42 / .72); border-radius: 2px; letter-spacing: .14em; }
.note-hero .reach a { text-shadow: 0 0 6px rgb(3 14 42 / .95), 0 0 2px rgb(3 14 42 / .95); }

/* The price line under the home hero's heading: the three starting prices, linked to the pricing page */
.note-hero .from { margin: -.2em 0 1.5em; font: 700 .76rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.note-hero .from a { color: #fff; text-decoration-color: color-mix(in srgb, #fff 55%, transparent); text-underline-offset: 5px; }

/* The registration line on an office card, and the founder's links side by side */
.place-card .reg { margin: 0 0 12px; font: 600 .74rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.founder-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; }
.founder-links .more { margin-top: 0; }

/* A row of live-page screenshots, each a link, and the "launching soon" tag on a project without an address */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 22px; list-style: none; }
.shots li { display: flex; flex-direction: column; gap: 12px; }
.shots a { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px rgb(255 255 255 / .7), 0 26px 46px -30px rgb(6 28 70 / .65); }
.shots img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.shots a:hover img { transform: scale(1.03); }
.shots span { font: 700 .72rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.project-links .soon { display: inline-block; padding: 6px 10px; border: 1px dashed currentColor; border-radius: 2px; font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }