:root{
--mark-tilt:19deg;
/* One seamless multi-frequency wave tile, generated by hand so every
component completes a whole number of cycles across the tile — it repeats
cleanly at any viewport width. The SAME tile drives the water's mask, the
crest and the meniscus, so they cannot disagree about where the surface is. */
--wave-tile-w:1440px;
--wave-tile-base:1440px; /* unscaled tile width, for scoped smaller waves */
--wave-band:72px;
--wave-mid:40px;
--wave-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2072%27%20width%3D%271440%27%20height%3D%2772%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C44.96%20L12%2C45.49%20L24%2C46.03%20L36%2C46.61%20L48%2C47.24%20L60%2C47.91%20L72%2C48.62%20L84%2C49.33%20L96%2C50.01%20L108%2C50.63%20L120%2C51.13%20L132%2C51.47%20L144%2C51.62%20L156%2C51.55%20L168%2C51.23%20L180%2C50.66%20L192%2C49.84%20L204%2C48.82%20L216%2C47.61%20L228%2C46.26%20L240%2C44.85%20L252%2C43.42%20L264%2C42.05%20L276%2C40.80%20L288%2C39.72%20L300%2C38.86%20L312%2C38.25%20L324%2C37.90%20L336%2C37.82%20L348%2C37.98%20L360%2C38.35%20L372%2C38.88%20L384%2C39.49%20L396%2C40.12%20L408%2C40.70%20L420%2C41.16%20L432%2C41.42%20L444%2C41.43%20L456%2C41.16%20L468%2C40.58%20L480%2C39.68%20L492%2C38.48%20L504%2C37.02%20L516%2C35.36%20L528%2C33.55%20L540%2C31.67%20L552%2C29.82%20L564%2C28.08%20L576%2C26.54%20L588%2C25.26%20L600%2C24.32%20L612%2C23.77%20L624%2C23.62%20L636%2C23.90%20L648%2C24.59%20L660%2C25.67%20L672%2C27.10%20L684%2C28.82%20L696%2C30.76%20L708%2C32.86%20L720%2C35.04%20L732%2C37.23%20L744%2C39.38%20L756%2C41.43%20L768%2C43.34%20L780%2C45.09%20L792%2C46.66%20L804%2C48.07%20L816%2C49.31%20L828%2C50.41%20L840%2C51.39%20L852%2C52.28%20L864%2C53.11%20L876%2C53.89%20L888%2C54.63%20L900%2C55.34%20L912%2C56.01%20L924%2C56.62%20L936%2C57.12%20L948%2C57.49%20L960%2C57.67%20L972%2C57.61%20L984%2C57.27%20L996%2C56.60%20L1008%2C55.57%20L1020%2C54.14%20L1032%2C52.33%20L1044%2C50.13%20L1056%2C47.58%20L1068%2C44.73%20L1080%2C41.65%20L1092%2C38.41%20L1104%2C35.11%20L1116%2C31.84%20L1128%2C28.72%20L1140%2C25.84%20L1152%2C23.30%20L1164%2C21.17%20L1176%2C19.52%20L1188%2C18.39%20L1200%2C17.80%20L1212%2C17.76%20L1224%2C18.25%20L1236%2C19.21%20L1248%2C20.60%20L1260%2C22.33%20L1272%2C24.32%20L1284%2C26.48%20L1296%2C28.73%20L1308%2C30.98%20L1320%2C33.16%20L1332%2C35.20%20L1344%2C37.06%20L1356%2C38.70%20L1368%2C40.13%20L1380%2C41.33%20L1392%2C42.32%20L1404%2C43.15%20L1416%2C43.83%20L1428%2C44.42%20L1440%2C44.96%20L1440%2C72%20L0%2C72%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
/* The same wave, closed to a tall baseline: masks a whole surface
rather than a 72px band. The deck uses it to cut a submerged copy
of a slide out of the air copy above it. */
--wave-mask-tall:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%201200%27%20width%3D%271440%27%20height%3D%271200%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C44.96%20L12%2C45.49%20L24%2C46.03%20L36%2C46.61%20L48%2C47.24%20L60%2C47.91%20L72%2C48.62%20L84%2C49.33%20L96%2C50.01%20L108%2C50.63%20L120%2C51.13%20L132%2C51.47%20L144%2C51.62%20L156%2C51.55%20L168%2C51.23%20L180%2C50.66%20L192%2C49.84%20L204%2C48.82%20L216%2C47.61%20L228%2C46.26%20L240%2C44.85%20L252%2C43.42%20L264%2C42.05%20L276%2C40.80%20L288%2C39.72%20L300%2C38.86%20L312%2C38.25%20L324%2C37.90%20L336%2C37.82%20L348%2C37.98%20L360%2C38.35%20L372%2C38.88%20L384%2C39.49%20L396%2C40.12%20L408%2C40.70%20L420%2C41.16%20L432%2C41.42%20L444%2C41.43%20L456%2C41.16%20L468%2C40.58%20L480%2C39.68%20L492%2C38.48%20L504%2C37.02%20L516%2C35.36%20L528%2C33.55%20L540%2C31.67%20L552%2C29.82%20L564%2C28.08%20L576%2C26.54%20L588%2C25.26%20L600%2C24.32%20L612%2C23.77%20L624%2C23.62%20L636%2C23.90%20L648%2C24.59%20L660%2C25.67%20L672%2C27.10%20L684%2C28.82%20L696%2C30.76%20L708%2C32.86%20L720%2C35.04%20L732%2C37.23%20L744%2C39.38%20L756%2C41.43%20L768%2C43.34%20L780%2C45.09%20L792%2C46.66%20L804%2C48.07%20L816%2C49.31%20L828%2C50.41%20L840%2C51.39%20L852%2C52.28%20L864%2C53.11%20L876%2C53.89%20L888%2C54.63%20L900%2C55.34%20L912%2C56.01%20L924%2C56.62%20L936%2C57.12%20L948%2C57.49%20L960%2C57.67%20L972%2C57.61%20L984%2C57.27%20L996%2C56.60%20L1008%2C55.57%20L1020%2C54.14%20L1032%2C52.33%20L1044%2C50.13%20L1056%2C47.58%20L1068%2C44.73%20L1080%2C41.65%20L1092%2C38.41%20L1104%2C35.11%20L1116%2C31.84%20L1128%2C28.72%20L1140%2C25.84%20L1152%2C23.30%20L1164%2C21.17%20L1176%2C19.52%20L1188%2C18.39%20L1200%2C17.80%20L1212%2C17.76%20L1224%2C18.25%20L1236%2C19.21%20L1248%2C20.60%20L1260%2C22.33%20L1272%2C24.32%20L1284%2C26.48%20L1296%2C28.73%20L1308%2C30.98%20L1320%2C33.16%20L1332%2C35.20%20L1344%2C37.06%20L1356%2C38.70%20L1368%2C40.13%20L1380%2C41.33%20L1392%2C42.32%20L1404%2C43.15%20L1416%2C43.83%20L1428%2C44.42%20L1440%2C44.96%20L1440%2C1200%20L0%2C1200%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
/* Same wave, but sitting in the MIDDLE of a tall tile instead of near
its top. mask-repeat is repeat-x, so the tile forms one horizontal
band and its top edge was landing only ~3.4em above the waterline -
a faint seam straight across the frame. Centred, both edges of the
band fall outside the stage entirely. */
--wave-mask-mid:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201200'%20width='1440'%20height='1200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2C607.25%20L12%2C607.77%20L24%2C608.31%20L36%2C608.89%20L48%2C609.52%20L60%2C610.19%20L72%2C610.90%20L84%2C611.62%20L96%2C612.29%20L108%2C612.91%20L120%2C613.41%20L132%2C613.75%20L144%2C613.90%20L156%2C613.83%20L168%2C613.51%20L180%2C612.94%20L192%2C612.12%20L204%2C611.11%20L216%2C609.89%20L228%2C608.54%20L240%2C607.13%20L252%2C605.70%20L264%2C604.33%20L276%2C603.08%20L288%2C602.00%20L300%2C601.14%20L312%2C600.53%20L324%2C600.18%20L336%2C600.11%20L348%2C600.26%20L360%2C600.63%20L372%2C601.16%20L384%2C601.77%20L396%2C602.40%20L408%2C602.99%20L420%2C603.44%20L432%2C603.70%20L444%2C603.71%20L456%2C603.44%20L468%2C602.87%20L480%2C601.96%20L492%2C600.76%20L504%2C599.30%20L516%2C597.64%20L528%2C595.83%20L540%2C593.95%20L552%2C592.11%20L564%2C590.37%20L576%2C588.82%20L588%2C587.54%20L600%2C586.61%20L612%2C586.05%20L624%2C585.90%20L636%2C586.18%20L648%2C586.88%20L660%2C587.95%20L672%2C589.38%20L684%2C591.11%20L696%2C593.04%20L708%2C595.14%20L720%2C597.32%20L732%2C599.51%20L744%2C601.66%20L756%2C603.71%20L768%2C605.62%20L780%2C607.38%20L792%2C608.94%20L804%2C610.36%20L816%2C611.60%20L828%2C612.69%20L840%2C613.67%20L852%2C614.56%20L864%2C615.39%20L876%2C616.17%20L888%2C616.91%20L900%2C617.62%20L912%2C618.29%20L924%2C618.90%20L936%2C619.40%20L948%2C619.77%20L960%2C619.95%20L972%2C619.89%20L984%2C619.55%20L996%2C618.88%20L1008%2C617.86%20L1020%2C616.42%20L1032%2C614.62%20L1044%2C612.41%20L1056%2C609.87%20L1068%2C607.01%20L1080%2C603.93%20L1092%2C600.69%20L1104%2C597.39%20L1116%2C594.12%20L1128%2C591.00%20L1140%2C588.12%20L1152%2C585.58%20L1164%2C583.45%20L1176%2C581.80%20L1188%2C580.67%20L1200%2C580.08%20L1212%2C580.04%20L1224%2C580.53%20L1236%2C581.50%20L1248%2C582.88%20L1260%2C584.62%20L1272%2C586.61%20L1284%2C588.76%20L1296%2C591.01%20L1308%2C593.26%20L1320%2C595.44%20L1332%2C597.49%20L1344%2C599.35%20L1356%2C600.99%20L1368%2C602.41%20L1380%2C603.62%20L1392%2C604.61%20L1404%2C605.43%20L1416%2C606.12%20L1428%2C606.70%20L1440%2C607.25%20L1440%2C1200%20L0%2C1200%20Z'%20fill='%23fff'/%3E%3C/svg%3E");
--wave-crest:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2072%27%20width%3D%271440%27%20height%3D%2772%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C44.96%20L12%2C45.49%20L24%2C46.03%20L36%2C46.61%20L48%2C47.24%20L60%2C47.91%20L72%2C48.62%20L84%2C49.33%20L96%2C50.01%20L108%2C50.63%20L120%2C51.13%20L132%2C51.47%20L144%2C51.62%20L156%2C51.55%20L168%2C51.23%20L180%2C50.66%20L192%2C49.84%20L204%2C48.82%20L216%2C47.61%20L228%2C46.26%20L240%2C44.85%20L252%2C43.42%20L264%2C42.05%20L276%2C40.80%20L288%2C39.72%20L300%2C38.86%20L312%2C38.25%20L324%2C37.90%20L336%2C37.82%20L348%2C37.98%20L360%2C38.35%20L372%2C38.88%20L384%2C39.49%20L396%2C40.12%20L408%2C40.70%20L420%2C41.16%20L432%2C41.42%20L444%2C41.43%20L456%2C41.16%20L468%2C40.58%20L480%2C39.68%20L492%2C38.48%20L504%2C37.02%20L516%2C35.36%20L528%2C33.55%20L540%2C31.67%20L552%2C29.82%20L564%2C28.08%20L576%2C26.54%20L588%2C25.26%20L600%2C24.32%20L612%2C23.77%20L624%2C23.62%20L636%2C23.90%20L648%2C24.59%20L660%2C25.67%20L672%2C27.10%20L684%2C28.82%20L696%2C30.76%20L708%2C32.86%20L720%2C35.04%20L732%2C37.23%20L744%2C39.38%20L756%2C41.43%20L768%2C43.34%20L780%2C45.09%20L792%2C46.66%20L804%2C48.07%20L816%2C49.31%20L828%2C50.41%20L840%2C51.39%20L852%2C52.28%20L864%2C53.11%20L876%2C53.89%20L888%2C54.63%20L900%2C55.34%20L912%2C56.01%20L924%2C56.62%20L936%2C57.12%20L948%2C57.49%20L960%2C57.67%20L972%2C57.61%20L984%2C57.27%20L996%2C56.60%20L1008%2C55.57%20L1020%2C54.14%20L1032%2C52.33%20L1044%2C50.13%20L1056%2C47.58%20L1068%2C44.73%20L1080%2C41.65%20L1092%2C38.41%20L1104%2C35.11%20L1116%2C31.84%20L1128%2C28.72%20L1140%2C25.84%20L1152%2C23.30%20L1164%2C21.17%20L1176%2C19.52%20L1188%2C18.39%20L1200%2C17.80%20L1212%2C17.76%20L1224%2C18.25%20L1236%2C19.21%20L1248%2C20.60%20L1260%2C22.33%20L1272%2C24.32%20L1284%2C26.48%20L1296%2C28.73%20L1308%2C30.98%20L1320%2C33.16%20L1332%2C35.20%20L1344%2C37.06%20L1356%2C38.70%20L1368%2C40.13%20L1380%2C41.33%20L1392%2C42.32%20L1404%2C43.15%20L1416%2C43.83%20L1428%2C44.42%20L1440%2C44.96%20L1440%2C72%20L0%2C72%20Z%27%20fill%3D%27%230A3B52%27%2F%3E%3C%2Fsvg%3E");
--loop-mask:url("data:image/svg+xml,");
--wave-line:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2072%27%20width%3D%271440%27%20height%3D%2772%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C44.96%20L12%2C45.49%20L24%2C46.03%20L36%2C46.61%20L48%2C47.24%20L60%2C47.91%20L72%2C48.62%20L84%2C49.33%20L96%2C50.01%20L108%2C50.63%20L120%2C51.13%20L132%2C51.47%20L144%2C51.62%20L156%2C51.55%20L168%2C51.23%20L180%2C50.66%20L192%2C49.84%20L204%2C48.82%20L216%2C47.61%20L228%2C46.26%20L240%2C44.85%20L252%2C43.42%20L264%2C42.05%20L276%2C40.80%20L288%2C39.72%20L300%2C38.86%20L312%2C38.25%20L324%2C37.90%20L336%2C37.82%20L348%2C37.98%20L360%2C38.35%20L372%2C38.88%20L384%2C39.49%20L396%2C40.12%20L408%2C40.70%20L420%2C41.16%20L432%2C41.42%20L444%2C41.43%20L456%2C41.16%20L468%2C40.58%20L480%2C39.68%20L492%2C38.48%20L504%2C37.02%20L516%2C35.36%20L528%2C33.55%20L540%2C31.67%20L552%2C29.82%20L564%2C28.08%20L576%2C26.54%20L588%2C25.26%20L600%2C24.32%20L612%2C23.77%20L624%2C23.62%20L636%2C23.90%20L648%2C24.59%20L660%2C25.67%20L672%2C27.10%20L684%2C28.82%20L696%2C30.76%20L708%2C32.86%20L720%2C35.04%20L732%2C37.23%20L744%2C39.38%20L756%2C41.43%20L768%2C43.34%20L780%2C45.09%20L792%2C46.66%20L804%2C48.07%20L816%2C49.31%20L828%2C50.41%20L840%2C51.39%20L852%2C52.28%20L864%2C53.11%20L876%2C53.89%20L888%2C54.63%20L900%2C55.34%20L912%2C56.01%20L924%2C56.62%20L936%2C57.12%20L948%2C57.49%20L960%2C57.67%20L972%2C57.61%20L984%2C57.27%20L996%2C56.60%20L1008%2C55.57%20L1020%2C54.14%20L1032%2C52.33%20L1044%2C50.13%20L1056%2C47.58%20L1068%2C44.73%20L1080%2C41.65%20L1092%2C38.41%20L1104%2C35.11%20L1116%2C31.84%20L1128%2C28.72%20L1140%2C25.84%20L1152%2C23.30%20L1164%2C21.17%20L1176%2C19.52%20L1188%2C18.39%20L1200%2C17.80%20L1212%2C17.76%20L1224%2C18.25%20L1236%2C19.21%20L1248%2C20.60%20L1260%2C22.33%20L1272%2C24.32%20L1284%2C26.48%20L1296%2C28.73%20L1308%2C30.98%20L1320%2C33.16%20L1332%2C35.20%20L1344%2C37.06%20L1356%2C38.70%20L1368%2C40.13%20L1380%2C41.33%20L1392%2C42.32%20L1404%2C43.15%20L1416%2C43.83%20L1428%2C44.42%20L1440%2C44.96%27%20fill%3D%27none%27%20stroke%3D%27%2300D8E0%27%20stroke-width%3D%272.5%27%2F%3E%3C%2Fsvg%3E");
/* Same path, fatter stroke. The pool scales the tile to 30% horizontally
and 47% vertically; at 2.5 the stroke falls below a pixel on the steep
parts of the wave and the meniscus breaks into disconnected arcs. */
/* The meniscus for the flood. The tile is stretched to --wave-band, so a
stroke authored for a 72-unit box paints 6 * band/72 px. At band 120 the
6-weight line came out 10px and, with its glow, washed across the submit
button and swallowed two letters of the label. 3.6 * 120/72 = 6px, the
weight it always had. */
--wave-line-flood:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2072'%20width='1440'%20height='72'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2C44.96%20L12%2C45.49%20L24%2C46.03%20L36%2C46.61%20L48%2C47.24%20L60%2C47.91%20L72%2C48.62%20L84%2C49.33%20L96%2C50.01%20L108%2C50.63%20L120%2C51.13%20L132%2C51.47%20L144%2C51.62%20L156%2C51.55%20L168%2C51.23%20L180%2C50.66%20L192%2C49.84%20L204%2C48.82%20L216%2C47.61%20L228%2C46.26%20L240%2C44.85%20L252%2C43.42%20L264%2C42.05%20L276%2C40.80%20L288%2C39.72%20L300%2C38.86%20L312%2C38.25%20L324%2C37.90%20L336%2C37.82%20L348%2C37.98%20L360%2C38.35%20L372%2C38.88%20L384%2C39.49%20L396%2C40.12%20L408%2C40.70%20L420%2C41.16%20L432%2C41.42%20L444%2C41.43%20L456%2C41.16%20L468%2C40.58%20L480%2C39.68%20L492%2C38.48%20L504%2C37.02%20L516%2C35.36%20L528%2C33.55%20L540%2C31.67%20L552%2C29.82%20L564%2C28.08%20L576%2C26.54%20L588%2C25.26%20L600%2C24.32%20L612%2C23.77%20L624%2C23.62%20L636%2C23.90%20L648%2C24.59%20L660%2C25.67%20L672%2C27.10%20L684%2C28.82%20L696%2C30.76%20L708%2C32.86%20L720%2C35.04%20L732%2C37.23%20L744%2C39.38%20L756%2C41.43%20L768%2C43.34%20L780%2C45.09%20L792%2C46.66%20L804%2C48.07%20L816%2C49.31%20L828%2C50.41%20L840%2C51.39%20L852%2C52.28%20L864%2C53.11%20L876%2C53.89%20L888%2C54.63%20L900%2C55.34%20L912%2C56.01%20L924%2C56.62%20L936%2C57.12%20L948%2C57.49%20L960%2C57.67%20L972%2C57.61%20L984%2C57.27%20L996%2C56.60%20L1008%2C55.57%20L1020%2C54.14%20L1032%2C52.33%20L1044%2C50.13%20L1056%2C47.58%20L1068%2C44.73%20L1080%2C41.65%20L1092%2C38.41%20L1104%2C35.11%20L1116%2C31.84%20L1128%2C28.72%20L1140%2C25.84%20L1152%2C23.30%20L1164%2C21.17%20L1176%2C19.52%20L1188%2C18.39%20L1200%2C17.80%20L1212%2C17.76%20L1224%2C18.25%20L1236%2C19.21%20L1248%2C20.60%20L1260%2C22.33%20L1272%2C24.32%20L1284%2C26.48%20L1296%2C28.73%20L1308%2C30.98%20L1320%2C33.16%20L1332%2C35.20%20L1344%2C37.06%20L1356%2C38.70%20L1368%2C40.13%20L1380%2C41.33%20L1392%2C42.32%20L1404%2C43.15%20L1416%2C43.83%20L1428%2C44.42%20L1440%2C44.96'%20fill='none'%20stroke='%2300D8E0'%20stroke-width='3.6'/%3E%3C/svg%3E");
--wave-line-heavy:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2072%27%20width%3D%271440%27%20height%3D%2772%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C44.96%20L12%2C45.49%20L24%2C46.03%20L36%2C46.61%20L48%2C47.24%20L60%2C47.91%20L72%2C48.62%20L84%2C49.33%20L96%2C50.01%20L108%2C50.63%20L120%2C51.13%20L132%2C51.47%20L144%2C51.62%20L156%2C51.55%20L168%2C51.23%20L180%2C50.66%20L192%2C49.84%20L204%2C48.82%20L216%2C47.61%20L228%2C46.26%20L240%2C44.85%20L252%2C43.42%20L264%2C42.05%20L276%2C40.80%20L288%2C39.72%20L300%2C38.86%20L312%2C38.25%20L324%2C37.90%20L336%2C37.82%20L348%2C37.98%20L360%2C38.35%20L372%2C38.88%20L384%2C39.49%20L396%2C40.12%20L408%2C40.70%20L420%2C41.16%20L432%2C41.42%20L444%2C41.43%20L456%2C41.16%20L468%2C40.58%20L480%2C39.68%20L492%2C38.48%20L504%2C37.02%20L516%2C35.36%20L528%2C33.55%20L540%2C31.67%20L552%2C29.82%20L564%2C28.08%20L576%2C26.54%20L588%2C25.26%20L600%2C24.32%20L612%2C23.77%20L624%2C23.62%20L636%2C23.90%20L648%2C24.59%20L660%2C25.67%20L672%2C27.10%20L684%2C28.82%20L696%2C30.76%20L708%2C32.86%20L720%2C35.04%20L732%2C37.23%20L744%2C39.38%20L756%2C41.43%20L768%2C43.34%20L780%2C45.09%20L792%2C46.66%20L804%2C48.07%20L816%2C49.31%20L828%2C50.41%20L840%2C51.39%20L852%2C52.28%20L864%2C53.11%20L876%2C53.89%20L888%2C54.63%20L900%2C55.34%20L912%2C56.01%20L924%2C56.62%20L936%2C57.12%20L948%2C57.49%20L960%2C57.67%20L972%2C57.61%20L984%2C57.27%20L996%2C56.60%20L1008%2C55.57%20L1020%2C54.14%20L1032%2C52.33%20L1044%2C50.13%20L1056%2C47.58%20L1068%2C44.73%20L1080%2C41.65%20L1092%2C38.41%20L1104%2C35.11%20L1116%2C31.84%20L1128%2C28.72%20L1140%2C25.84%20L1152%2C23.30%20L1164%2C21.17%20L1176%2C19.52%20L1188%2C18.39%20L1200%2C17.80%20L1212%2C17.76%20L1224%2C18.25%20L1236%2C19.21%20L1248%2C20.60%20L1260%2C22.33%20L1272%2C24.32%20L1284%2C26.48%20L1296%2C28.73%20L1308%2C30.98%20L1320%2C33.16%20L1332%2C35.20%20L1344%2C37.06%20L1356%2C38.70%20L1368%2C40.13%20L1380%2C41.33%20L1392%2C42.32%20L1404%2C43.15%20L1416%2C43.83%20L1428%2C44.42%20L1440%2C44.96%27%20fill%3D%27none%27%20stroke%3D%27%2300D8E0%27%20stroke-width%3D%276%27%2F%3E%3C%2Fsvg%3E"); --wave-band-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2072%27%20width%3D%271440%27%20height%3D%2772%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C44.96%20L12%2C45.49%20L24%2C46.03%20L36%2C46.61%20L48%2C47.24%20L60%2C47.91%20L72%2C48.62%20L84%2C49.33%20L96%2C50.01%20L108%2C50.63%20L120%2C51.13%20L132%2C51.47%20L144%2C51.62%20L156%2C51.55%20L168%2C51.23%20L180%2C50.66%20L192%2C49.84%20L204%2C48.82%20L216%2C47.61%20L228%2C46.26%20L240%2C44.85%20L252%2C43.42%20L264%2C42.05%20L276%2C40.80%20L288%2C39.72%20L300%2C38.86%20L312%2C38.25%20L324%2C37.90%20L336%2C37.82%20L348%2C37.98%20L360%2C38.35%20L372%2C38.88%20L384%2C39.49%20L396%2C40.12%20L408%2C40.70%20L420%2C41.16%20L432%2C41.42%20L444%2C41.43%20L456%2C41.16%20L468%2C40.58%20L480%2C39.68%20L492%2C38.48%20L504%2C37.02%20L516%2C35.36%20L528%2C33.55%20L540%2C31.67%20L552%2C29.82%20L564%2C28.08%20L576%2C26.54%20L588%2C25.26%20L600%2C24.32%20L612%2C23.77%20L624%2C23.62%20L636%2C23.90%20L648%2C24.59%20L660%2C25.67%20L672%2C27.10%20L684%2C28.82%20L696%2C30.76%20L708%2C32.86%20L720%2C35.04%20L732%2C37.23%20L744%2C39.38%20L756%2C41.43%20L768%2C43.34%20L780%2C45.09%20L792%2C46.66%20L804%2C48.07%20L816%2C49.31%20L828%2C50.41%20L840%2C51.39%20L852%2C52.28%20L864%2C53.11%20L876%2C53.89%20L888%2C54.63%20L900%2C55.34%20L912%2C56.01%20L924%2C56.62%20L936%2C57.12%20L948%2C57.49%20L960%2C57.67%20L972%2C57.61%20L984%2C57.27%20L996%2C56.60%20L1008%2C55.57%20L1020%2C54.14%20L1032%2C52.33%20L1044%2C50.13%20L1056%2C47.58%20L1068%2C44.73%20L1080%2C41.65%20L1092%2C38.41%20L1104%2C35.11%20L1116%2C31.84%20L1128%2C28.72%20L1140%2C25.84%20L1152%2C23.30%20L1164%2C21.17%20L1176%2C19.52%20L1188%2C18.39%20L1200%2C17.80%20L1212%2C17.76%20L1224%2C18.25%20L1236%2C19.21%20L1248%2C20.60%20L1260%2C22.33%20L1272%2C24.32%20L1284%2C26.48%20L1296%2C28.73%20L1308%2C30.98%20L1320%2C33.16%20L1332%2C35.20%20L1344%2C37.06%20L1356%2C38.70%20L1368%2C40.13%20L1380%2C41.33%20L1392%2C42.32%20L1404%2C43.15%20L1416%2C43.83%20L1428%2C44.42%20L1440%2C44.96%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2726%27%2F%3E%3C%2Fsvg%3E");
--wave-fade:166px;
}
/* ==========================================================================
AETHER HYDRO — WATERLINE
Light ground, engineered. One idea: the page has a real water level, and
scrolling submerges it. Above the line is ink on mineral; below, the tide
layer repaints the same content in cyan on abyss.
========================================================================== */
:root{
/* palette ------------------------------------------------------------- */
--surface:#E9F2F1; /* pale mineral white, blue-green cast — the air */
--surface-2:#DCEAE8;
--abyss:#04283A; /* the surface water — deep navy-teal, wet */
--abyss-2:#021B27; /* mid water */
--abyss-3:#01111A; /* abyssal. the bottom of the page */
--flow:#00D8E0; /* vivid aqua-cyan. unlocked / flow / CTA. ONLY. */
--flow-deep:#00606F; /* the accent darkened, for small text on light */
--rule-l:rgba(4,40,58,.20);
--rule-d:rgba(233,242,241,.20);
/* The two display sizes live here because the static waterline is placed
from them: the line sits exactly at the junction of the two lines. */
/* line-height is .79, so each display line's glyphs sit half the negative
leading ABOVE their own line box. The hero's top padding assumed the two
were flush and the fixed bar clipped the first line's caps at narrow
widths. Both the padding and the waterline add this back. */
--l1-overshoot:calc(var(--l1) * (1 - 0.79) / 2);
--l1:clamp(44px,11.9vw,170px); /* WATER, — 6 glyphs */
--l2:clamp(31px,8.3vw,119px); /* UNLOCKED. — 9 glyphs */
/* The bar's height is the logo plus its padding plus the rule. --hero-top was
a hard 52px that happened to match the old bar; when the lockup changed the
bar grew to 67 and the headline slid 15px underneath it. Derived now, so
resizing the logo can never put the hero under the nav again. */
--nav-logo-h:34px;--nav-pad:16px;
--nav-h:calc(var(--nav-logo-h) + var(--nav-pad) * 2 + 1px);
--hero-top:var(--nav-h);
--gut:clamp(22px,3.4vw,54px);
--mark-h:clamp(148px,18.4vw,344px);
--ease:cubic-bezier(.16,1,.3,1);
/* the waterline, in px from the top of the viewport. Written by JS. */
/* The gear tessellation, shared by THE SYSTEM and the deck. Outlined,
not filled - assets/gear.svg is a solid single gear and is a
different asset entirely. */
--gear-tile:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%20viewBox='0%200%20300%20300'%3E%3Cg%20fill='none'%20stroke='%2300D8E0'%20stroke-width='12.8'%3E%3Cg%20transform='translate(75.0,75.0)%20rotate(0)%20translate(-98.0,-91.0)%20scale(0.18817)'%3E%3Cpath%20d='M606.1,954.5c-62.6,12.1-125.6,10.5-186.9-4.4c-40.5-9.6-78.5-24.5-114.7-45.3l-32.2,62.8%20c-62.8-36.9-116.8-85.7-160.4-143.7C48.3,740.5,9.6,644.1,1.2,539.4c-1-18.1-1.6-34.8-0.8-52.6l80.6,11.8%20c3.4-118.2,53.8-229.2,139.7-309.3c22.9-21.3,47.8-39.7,74.8-55.6l-40.2-64C331,26.7,415.7,3,503.3,0.3%20c85.6-3,170.4,14.4,247.6,50.9l35.9,18.3l-40.4,64.2C875.7,209.1,956.8,348,961,498.6l79.2-11.7c0.9-0.2,1.6,0.1,1.2,1.5%20c3,130.2-41.8,249.3-123.1,350.2c-41.5,51.8-91.6,95.4-148.9,129L736.9,905C696.1,928.4,652.7,944.9,606.1,954.5z'/%3E%3C/g%3E%3Cg%20transform='translate(75.0,375.0)%20rotate(0)%20translate(-98.0,-91.0)%20scale(0.18817)'%3E%3Cpath%20d='M606.1,954.5c-62.6,12.1-125.6,10.5-186.9-4.4c-40.5-9.6-78.5-24.5-114.7-45.3l-32.2,62.8%20c-62.8-36.9-116.8-85.7-160.4-143.7C48.3,740.5,9.6,644.1,1.2,539.4c-1-18.1-1.6-34.8-0.8-52.6l80.6,11.8%20c3.4-118.2,53.8-229.2,139.7-309.3c22.9-21.3,47.8-39.7,74.8-55.6l-40.2-64C331,26.7,415.7,3,503.3,0.3%20c85.6-3,170.4,14.4,247.6,50.9l35.9,18.3l-40.4,64.2C875.7,209.1,956.8,348,961,498.6l79.2-11.7c0.9-0.2,1.6,0.1,1.2,1.5%20c3,130.2-41.8,249.3-123.1,350.2c-41.5,51.8-91.6,95.4-148.9,129L736.9,905C696.1,928.4,652.7,944.9,606.1,954.5z'/%3E%3C/g%3E%3Cg%20transform='translate(375.0,75.0)%20rotate(0)%20translate(-98.0,-91.0)%20scale(0.18817)'%3E%3Cpath%20d='M606.1,954.5c-62.6,12.1-125.6,10.5-186.9-4.4c-40.5-9.6-78.5-24.5-114.7-45.3l-32.2,62.8%20c-62.8-36.9-116.8-85.7-160.4-143.7C48.3,740.5,9.6,644.1,1.2,539.4c-1-18.1-1.6-34.8-0.8-52.6l80.6,11.8%20c3.4-118.2,53.8-229.2,139.7-309.3c22.9-21.3,47.8-39.7,74.8-55.6l-40.2-64C331,26.7,415.7,3,503.3,0.3%20c85.6-3,170.4,14.4,247.6,50.9l35.9,18.3l-40.4,64.2C875.7,209.1,956.8,348,961,498.6l79.2-11.7c0.9-0.2,1.6,0.1,1.2,1.5%20c3,130.2-41.8,249.3-123.1,350.2c-41.5,51.8-91.6,95.4-148.9,129L736.9,905C696.1,928.4,652.7,944.9,606.1,954.5z'/%3E%3C/g%3E%3Cg%20transform='translate(375.0,375.0)%20rotate(0)%20translate(-98.0,-91.0)%20scale(0.18817)'%3E%3Cpath%20d='M606.1,954.5c-62.6,12.1-125.6,10.5-186.9-4.4c-40.5-9.6-78.5-24.5-114.7-45.3l-32.2,62.8%20c-62.8-36.9-116.8-85.7-160.4-143.7C48.3,740.5,9.6,644.1,1.2,539.4c-1-18.1-1.6-34.8-0.8-52.6l80.6,11.8%20c3.4-118.2,53.8-229.2,139.7-309.3c22.9-21.3,47.8-39.7,74.8-55.6l-40.2-64C331,26.7,415.7,3,503.3,0.3%20c85.6-3,170.4,14.4,247.6,50.9l35.9,18.3l-40.4,64.2C875.7,209.1,956.8,348,961,498.6l79.2-11.7c0.9-0.2,1.6,0.1,1.2,1.5%20c3,130.2-41.8,249.3-123.1,350.2c-41.5,51.8-91.6,95.4-148.9,129L736.9,905C696.1,928.4,652.7,944.9,606.1,954.5z'/%3E%3C/g%3E%3Cg%20transform='translate(-75.0,-75.0)%20rotate(26)%20translate(-98.0,-91.0)%20scale(0.18817)'%3E%3Cpath%20d='M606.1,954.5c-62.6,12.1-125.6,10.5-186.9-4.4c-40.5-9.6-78.5-24.5-114.7-45.3l-32.2,62.8%20c-62.8-36.9-116.8-85.7-160.4-143.7C48.3,740.5,9.6,644.1,1.2,539.4c-1-18.1-1.6-34.8-0.8-52.6l80.6,11.8%20c3.4-118.2,53.8-229.2,139.7-309.3c22.9-21.3,47.8-39.7,74.8-55.6l-40.2-64C331,26.7,415.7,3,503.3,0.3%20c85.6-3,170.4,14.4,247.6,50.9l35.9,18.3l-40.4,64.2C875.7,209.1,956.8,348,961,498.6l79.2-11.7c0.9-0.2,1.6,0.1,1.2,1.5%20c3,130.2-41.8,249.3-123.1,350.2c-41.5,51.8-91.6,95.4-148.9,129L736.9,905C696.1,928.4,652.7,944.9,606.1,954.5z'/%3E%3C/g%3E%3Cg%20transform='translate(-75.0,225.0)%20rotate(26)%20translate(-98.0,-91.0)%20scale(0.18817)'%3E%3Cpath%20d='M606.1,954.5c-62.6,12.1-125.6,10.5-186.9-4.4c-40.5-9.6-78.5-24.5-114.7-45.3l-32.2,62.8%20c-62.8-36.9-116.8-85.7-160.4-143.7C48.3,740.5,9.6,644.1,1.2,539.4c-1-18.1-1.6-34.8-0.8-52.6l80.6,11.8%20c3.4-118.2,53.8-229.2,139.7-309.3c22.9-21.3,47.8-39.7,74.8-55.6l-40.2-64C331,26.7,415.7,3,503.3,0.3%20c85.6-3,170.4,14.4,247.6,50.9l35.9,18.3l-40.4,64.2C875.7,209.1,956.8,348,961,498.6l79.2-11.7c0.9-0.2,1.6,0.1,1.2,1.5%20c3,130.2-41.8,249.3-123.1,350.2c-41.5,51.8-91.6,95.4-148.9,129L736.9,905C696.1,928.4,652.7,944.9,606.1,954.5z'/%3E%3C/g%3E%3Cg%20transform='translate(225.0,-75.0)%20rotate(26)%20translate(-98.0,-91.0)%20scale(0.18817)'%3E%3Cpath%20d='M606.1,954.5c-62.6,12.1-125.6,10.5-186.9-4.4c-40.5-9.6-78.5-24.5-114.7-45.3l-32.2,62.8%20c-62.8-36.9-116.8-85.7-160.4-143.7C48.3,740.5,9.6,644.1,1.2,539.4c-1-18.1-1.6-34.8-0.8-52.6l80.6,11.8%20c3.4-118.2,53.8-229.2,139.7-309.3c22.9-21.3,47.8-39.7,74.8-55.6l-40.2-64C331,26.7,415.7,3,503.3,0.3%20c85.6-3,170.4,14.4,247.6,50.9l35.9,18.3l-40.4,64.2C875.7,209.1,956.8,348,961,498.6l79.2-11.7c0.9-0.2,1.6,0.1,1.2,1.5%20c3,130.2-41.8,249.3-123.1,350.2c-41.5,51.8-91.6,95.4-148.9,129L736.9,905C696.1,928.4,652.7,944.9,606.1,954.5z'/%3E%3C/g%3E%3Cg%20transform='translate(225.0,225.0)%20rotate(26)%20translate(-98.0,-91.0)%20scale(0.18817)'%3E%3Cpath%20d='M606.1,954.5c-62.6,12.1-125.6,10.5-186.9-4.4c-40.5-9.6-78.5-24.5-114.7-45.3l-32.2,62.8%20c-62.8-36.9-116.8-85.7-160.4-143.7C48.3,740.5,9.6,644.1,1.2,539.4c-1-18.1-1.6-34.8-0.8-52.6l80.6,11.8%20c3.4-118.2,53.8-229.2,139.7-309.3c22.9-21.3,47.8-39.7,74.8-55.6l-40.2-64C331,26.7,415.7,3,503.3,0.3%20c85.6-3,170.4,14.4,247.6,50.9l35.9,18.3l-40.4,64.2C875.7,209.1,956.8,348,961,498.6l79.2-11.7c0.9-0.2,1.6,0.1,1.2,1.5%20c3,130.2-41.8,249.3-123.1,350.2c-41.5,51.8-91.6,95.4-148.9,129L736.9,905C696.1,928.4,652.7,944.9,606.1,954.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
/* The surface, shared by the hero and the interior pages' band. */
--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2880 70' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C120,36 190,52 320,47 C450,42 520,30 660,35 C810,40 880,55 1030,50 C1170,45 1240,32 1380,37 C1530,42 1600,56 1750,51 C1890,46 1960,33 2100,38 C2250,43 2320,56 2470,51 C2610,46 2740,34 2880,42 L2880,70 L0,70 Z' fill='%2304283A'/%3E%3C/svg%3E");
--tide-y:100vh;
--scroll-y:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--surface);color:var(--abyss);
font-family:"Archivo",system-ui,-apple-system,sans-serif;
font-size:16px;line-height:1.45;font-variation-settings:"wdth" 125;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,p,dl,dd,dt,figure,ol,li{margin:0;padding:0}
ol{list-style:none}
a{color:inherit}
::selection{background:var(--flow);color:var(--abyss)}
:focus-visible{outline:2px solid var(--flow-deep);outline-offset:3px}
.deep :focus-visible,.tide :focus-visible{outline-color:var(--flow)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;
background:var(--abyss);color:var(--flow);font-family:"Chivo Mono",monospace;font-size:11px}
.skip-link:focus{left:var(--gut);top:12px}
/* --- type ---------------------------------------------------------------- */
.mono{font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;font-variation-settings:normal;line-height:1.5}
.huge{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.79}
/* Each line is sized to fill the measure, so both run flush edge to edge.
Type as architecture means optically flush, not one size for both. */
.huge--a{font-size:clamp(64px,15.4vw,224px)} /* WATER, — 6 glyphs */
.huge--b{font-size:clamp(44px,10.7vw,157px)} /* UNLOCKED. — 9 glyphs */
.head{font-weight:900;text-transform:uppercase;font-size:clamp(30px,4.6vw,66px);
line-height:.92;letter-spacing:-.03em;max-width:17ch}
.body{max-width:54ch;margin-top:24px;font-size:16.5px;font-weight:500;opacity:.78}
.sub{max-width:36ch;font-size:17px;font-weight:500}
/* --- nav ----------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;
display:flex;justify-content:space-between;align-items:center;
padding:var(--nav-pad) var(--gut);border-bottom:1px solid var(--rule-l);
background:var(--surface);
transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
/* The lockup: the mark is not beside the word, it is behind it. The word is
knocked out of the mark in the ground color so it stays crisp where the two
cross — paint-order puts the stroke behind the fill, which is what keeps the
letterforms their true weight instead of thinning them. */
.nav__mark{position:relative;display:inline-flex;align-items:center;
text-decoration:none;line-height:0}
/* The supplied lockup, outlined — no webfont dependency, so it cannot fall back
to a generic sans on a machine without Archivo installed. Two colour groups:
the ring and HYDRO are the ink, AETHER is the accent, and both flip with the
bar. The comp's #4BC4D2 reads at 1.8:1 on the light ground, so in air the
accent is --flow-deep, the same cyan every other light-ground element on the
page already uses; underwater it is the full --flow. */
.nav__logo{display:block;height:var(--nav-logo-h);width:auto;
--logo-ink:var(--abyss);--logo-accent:var(--flow-deep);
transition:none}
.nav__logo .lg-ink{fill:var(--logo-ink);transition:fill .5s var(--ease)}
.nav__logo .lg-accent{fill:var(--logo-accent);transition:fill .5s var(--ease)}
.nav.is-submerged .nav__logo{--logo-ink:var(--surface);--logo-accent:var(--flow)}
.nav__link{text-decoration:none}
/* When the tide has risen past the bar, the nav is underwater too. */
.nav.is-submerged{background:var(--abyss);color:var(--surface);border-bottom-color:var(--rule-d)}
.nav.is-submerged .nav__link{color:var(--flow)}
/* --- hero ---------------------------------------------------------------- */
/* The two display lines are one locked-up block: nothing sits between them,
and the waterline is what cuts through. */
.hero{position:relative;padding:calc(var(--hero-top) + var(--l1-overshoot)) 0 0;overflow-x:clip}
/* Type block left, mark right. The mark is offset so its own crossing point
sits on the waterline, which falls between the two words. */
.hero__lockup{display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:start;gap:clamp(18px,3.6vw,64px);
padding:0 var(--gut);position:relative;z-index:2}
.huge{position:relative}
/* The mark is canted off horizontal so it reads as an object sitting in the
scene rather than a logo parked beside the type. --mark-tilt drives it, and
because the tide clone is the same markup with the same class it rotates
identically — the two halves cannot disagree at the waterline. */
.hero__mark{display:block;width:calc(var(--mark-h) * 1.728);height:var(--mark-h);
margin-top:calc(var(--l1) * 0.79 - var(--mark-h) * 0.5);
justify-self:end;color:var(--flow);
rotate:var(--mark-tilt,-19deg);
/* rotation grows the painted box; keep it off the gutter so the tilt reads
as composition rather than as the mark running out of room */
margin-right:calc(var(--gut) * -1)}
.hero__mark svg{width:100%;height:100%;display:block}
.tide__inner .hero__mark{color:var(--abyss-2)}
.huge__l1,.huge__l2{display:block}
.huge__l1{font-size:var(--l1)}
.huge__l2{font-size:var(--l2);padding-right:2px}
.sub{max-width:none;padding:26px var(--gut) 0;margin-top:26px;
border-top:1px solid var(--rule-l);position:relative;z-index:2;
font-size:clamp(17px,1.5vw,21px);max-width:62ch}
.hero__meta{display:flex;align-items:baseline;justify-content:space-between;
gap:clamp(20px,4vw,64px);white-space:nowrap;
padding:22px var(--gut) 0;position:relative;z-index:2}
.hero__route{overflow:hidden;text-overflow:ellipsis}
/* Seen through moving water: a slow rise and fall with the light on it. The
color stays solid, so contrast is never in play. */
.hero__descend{animation:descend 4.6s ease-in-out infinite alternate;
will-change:transform,text-shadow}
@keyframes descend{
from{transform:translate3d(0,-2px,0);text-shadow:0 0 0 rgba(0,216,224,0)}
to{transform:translate3d(0,3px,0);text-shadow:0 0 12px rgba(0,216,224,.55)}}
/* The static waterline. Its wave is an overlay (position:absolute) so it adds
no vertical space — the display lines stay butted together. Without JS this
is the page's shape; with JS it goes transparent and the tide takes over,
but it stays in the layout because main.js measures it. */
/* line-height is .79, so the second line begins exactly this far down. */
.hero__water{position:absolute;left:0;right:0;
/* Between the two words — which is also where the mark's crossing sits. */
top:calc(var(--hero-top) + var(--l1-overshoot) + var(--l1) * 0.79);bottom:0;z-index:1;
background:var(--abyss);}
.hero__water::before{content:"";position:absolute;left:0;right:0;bottom:100%;
height:44px;background:var(--wave) center bottom/100% 100% no-repeat}
/* --- submerged blocks ---------------------------------------------------- */
/* No-JS shape: everything from the second display line down is under water. */
.hero__l2-wrap{position:relative;z-index:2}
.huge__l2{color:var(--flow)}
.hero .sub,.hero__meta .mono{color:var(--surface)}
.hero .sub{border-top-color:var(--rule-d)}
.deep{background:var(--abyss);color:var(--surface)}
.deep .mono{color:rgba(233,242,241,.62)}
/* The gear, tessellated as a half-drop, sitting in the deep like machinery
under the water. Whisper quiet — it is texture, not decoration, and its
opacity is set low enough that it cannot touch the copy's contrast. */
.deep--system{position:relative;isolation:isolate;padding-bottom:0;
background:linear-gradient(180deg,var(--abyss-2),var(--abyss-3));
padding:clamp(72px,9vw,110px) 0 clamp(64px,8vw,96px)}
.deep--system::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:var(--gear-tile);
background-repeat:repeat;background-size:300px 300px;
opacity:.075;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 76%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 18%,#000 76%,transparent)}
.deep__inner{padding:0 var(--gut);position:relative;z-index:1}
/* Surfacing: the deep section's lower edge is the wave, not a straight cut.
Same tile, same --wave-x as the waterline, so it drifts with everything else. */
/* The light does not stop at the wave band — it carries on downward and
dissolves, so there is no second edge underneath the wave. */
/* The section dissolves into the air rather than cutting to it. No wave here:
the tide owns every wave on the page and drains through this boundary as you
scroll — that IS the surfacing. A second fixed wave gave the page two
waterlines at once. */
/* The surfacing wave. The tide is fully drained before this edge ever enters
the viewport (see computeTarget in js/main.js), so only one waterline is
ever visible and nothing paints water below this point. */
.deep--system::after{content:"";position:absolute;left:0;right:0;bottom:0;
height:var(--wave-band);z-index:2;pointer-events:none;
background:var(--surface);
-webkit-mask-image:var(--wave-mask);mask-image:var(--wave-mask);
-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
-webkit-mask-size:var(--wave-tile-w) var(--wave-band);
mask-size:var(--wave-tile-w) var(--wave-band);
-webkit-mask-position:var(--wave-x,0px) 0;mask-position:var(--wave-x,0px) 0}
/* Under water it is not a shoreline, it is just a pale bar lying across the
dark. Gated so the tide is free to stand above it. */
html.is-shore-wet .deep--system::after,
html.is-shore-wet .deep--system .surface-line{opacity:0}
.deep--system::after,.deep--system .surface-line{transition:opacity .3s var(--ease)}
.deep--system .surface-line{position:absolute;left:0;right:0;bottom:0;
height:var(--wave-band);z-index:3;pointer-events:none;
background-image:var(--wave-line);background-repeat:repeat-x;
background-size:var(--wave-tile-w) var(--wave-band);
background-position:var(--wave-x,0px) 0;
filter:drop-shadow(0 0 6px rgba(0,216,224,.4));opacity:.85}
.deep--system .deep__inner:last-of-type{padding-bottom:clamp(80px,9vw,130px)}
.deep--system .mono{color:var(--flow)}
.deep .body{opacity:.7}
/* --- route schematic ----------------------------------------------------- */
.schem{position:relative;height:150px;margin:34px var(--gut) 0;
border-top:1px solid var(--rule-d)}
.schem__track{position:absolute;left:0;right:0;top:86px;height:1px;background:var(--rule-d)}
.schem__fill{position:absolute;left:0;top:86px;height:2px;width:0;background:var(--flow);
box-shadow:0 0 14px rgba(0,216,224,.55);
transition:width 1.8s var(--ease)}
.schem.is-live .schem__fill{width:46%}
.schem__node{position:absolute;top:86px;left:var(--x);transform:translate(-50%,-50%)}
.dot{display:block;width:13px;height:13px;border-radius:50%;margin:0 auto;
border:2px solid var(--flow);background:var(--abyss);
transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.schem__node.is-on .dot{background:var(--flow);
box-shadow:0 0 0 7px rgba(0,216,224,.16),0 0 18px rgba(0,216,224,.7)}
.nlab{position:absolute;top:26px;left:50%;transform:translateX(-50%);white-space:nowrap;
font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:rgba(233,242,241,.62);line-height:1.5;
transition:color .5s var(--ease)}
.schem__node.is-on .nlab{color:var(--flow)}
/* --- sections ------------------------------------------------------------ */
/* The rail above this already ends in open space, so a 130px opener stacked
~250px of nothing between the last label and the first line of copy. */
.section{padding:clamp(66px,8.2vw,102px) var(--gut) 20px}
/* An editorial two-column: the headline holds the left, the body sits in the
right column instead of leaving half the page empty under it. */
.section__lead{display:grid;
grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);
gap:0 clamp(36px,5vw,88px);align-items:end}
.section__lead .head{max-width:none}
.section__lead .body{margin-top:0;max-width:42ch}
.deep__inner .section__lead .body{opacity:.72}
.tbl{margin-top:clamp(48px,6vw,70px);border-top:1px solid currentColor}
.row{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:17px 0;
border-bottom:1px solid var(--rule-l);align-items:baseline}
.deep .row{border-bottom-color:var(--rule-d)}
.rowk{font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.05em}
.deep .rowk{color:var(--flow)}
.rowv{font-weight:500;opacity:.75;max-width:none;padding-right:clamp(0px,10vw,220px)}
.deep .rowv{opacity:.68}
/* --- elevation profile --------------------------------------------------- */
.profile{margin:clamp(52px,7vw,78px) var(--gut) 0}
/* the vertical route is the mobile drawing; the profile is the desktop one */
.route{display:none}
.profile svg{width:100%;height:auto}
.pf-line{fill:none;stroke:var(--rule-d);stroke-width:1}
.pf-line--vapor{stroke-dasharray:5 6}
.pf-flow{fill:none;stroke:var(--flow);stroke-width:2.5;
filter:drop-shadow(0 0 8px rgba(0,216,224,.5));
stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);
transition:stroke-dashoffset 2.6s var(--ease)}
.profile.is-live .pf-flow{stroke-dashoffset:0}
.pf-dot{fill:none;stroke:var(--flow);stroke-width:2}
.pf-dot.is-on{fill:var(--flow)}
.pf-lab{font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.15em;
text-transform:uppercase;fill:rgba(233,242,241,.6)}
.pf-lab.is-hot{fill:var(--flow)}
/* the penstock label rides the drop rather than floating beside it */
/* was rotated 90deg to ride the drop; it forced a head-tilt on the one word
that matters most here, so it is upright like every other label. */
/* --- colophon ------------------------------------------------------------ */
/* One quiet beat before the ask. The mark and the reason for it, together. */
/* No border-top: the surfacing wave above already separates this block, and a
rule landing on the wave's last row gives it a hard edge to terminate into.
The extra top padding is the air the wave dissolves into.
The mark is not an illustration beside the text — it is the ground the text
sits on: oversized, steeply tilted, running off the left edge, tinted just
far enough off the surface to register. overflow:hidden is what crops it. */
.colophon{position:relative;overflow:hidden;
margin:0 var(--gut);
padding:clamp(76px,8.8vw,124px) 0 clamp(58px,6.6vw,92px);
border-bottom:1px solid var(--rule-l)}
.colophon__mark{position:absolute;z-index:0;pointer-events:none;
/* It has to READ as the closed loop the copy talks about, which means the
whole shape has to fit. A 46deg tilt on a 1.728:1 mark gives a bounding box
~600px tall in a 266px section — all you ever saw were fragments. Ten
degrees keeps the drift and lets the loop close. */
left:clamp(-28px,-1.6vw,-8px);top:50%;
width:clamp(268px,30vw,420px);height:auto;
transform:translateY(-50%) rotate(-10deg);transform-origin:50% 50%;
/* the bright cyan, faded — it is much lighter than --flow-deep, so it needs
more alpha to register at all against the surface */
color:var(--flow);fill:currentColor;opacity:.34}
/* The mark is cropped by the box on two sides. Rather than let it end on a cut,
the surface color is laid back over the top and left as a fade, so the ghost
simply runs out of the frame. Same color as the ground, so it is invisible
except where it meets the mark. ::after, not ::before, so it paints over it. */
.colophon::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
linear-gradient(to bottom,rgba(233,242,241,1) 0%,rgba(233,242,241,0) 16%),
linear-gradient(to right,rgba(233,242,241,1) 0%,rgba(233,242,241,0) 10%)}
.colophon__text{position:relative;z-index:1;margin-left:24%;padding-right:6%}
.colophon__text .mono{color:var(--flow-deep)}
.colophon__line{margin-top:12px;max-width:88ch;font-weight:500;
font-size:clamp(15px,1.25vw,17.5px);opacity:.8}
@media(max-width:760px){
:root{--mark-tilt:14deg}
/* The 24% indent that gives the mark its column on desktop cuts the measure
to ~28 characters here. On mobile the text takes the full width and the
mark goes fully behind it, larger and fainter — same move the hero makes. */
.colophon__text{margin-left:0;padding-right:0}
.colophon__mark{left:-6vw;top:50%;width:86vw;opacity:.30;
transform:translateY(-50%) rotate(-10deg)}
/* At this width a mark beside the type steals ~40% of the measure and the
headline stops being monumental. It moves behind instead — still large,
still crossing the waterline so it inverts, but no longer competing. */
.hero__lockup{grid-template-columns:minmax(0,1fr);position:relative}
.hero__mark{position:absolute;right:calc(var(--gut) * 0.15);
top:calc(var(--l1) * 0.72 - var(--mark-h) * 0.5);
width:calc(var(--mark-h) * 1.728);margin:0;z-index:0;opacity:.13}
.huge{position:relative;z-index:2}
:root{--mark-h:clamp(112px,30vw,170px)}
/* With the mark behind rather than beside it, the type gets the whole
measure back — 4.91em for "WATER," and 7.55em for "UNLOCKED." run flush. */
:root{--l1:clamp(48px,18.4vw,204px);--l2:clamp(33px,11.9vw,132px)}
}
/* --- contact : the basin fills ------------------------------------------- */
/* --fill is the level. Registering it lets one CSS transition ease everything
that reads it — the waterline, the crest, the meniscus, the cogs' angle —
off a single number, with nothing running per frame. */
@property --fill{syntax:"";initial-value:0;inherits:true}
/* The deep end: the ask and the footer share one body of water, so the page
ends underwater and there is no light strip below the last thing on it. */
/* The water only travels because something advances --wave-x, and on the
homepage that something was the page tide's frame loop. /company has no
tide, so nothing ever wrote it there and the flood sat perfectly still: a
wave shape, frozen mid-stroke.
The flood carries its own travel now. Registering the property is what
makes it animatable at all - an unregistered custom property is a string to
the animation engine and jumps from one keyframe to the other. Declared on
.deepend it shadows the page value for everything inside, so all three
layers - water, crest and meniscus - read the same number and stay in
register with each other. One tile of travel per cycle at the tide's own
34px/s, so the loop is seamless. */
@property --wave-x{syntax:'';inherits:true;initial-value:0px}
@keyframes surface-travel{to{--wave-x:calc(var(--wave-tile-w) * -1)}}
.deepend{position:relative;isolation:isolate;overflow:hidden;
/* A deeper band for the flood than for the page waterline. At 72px the wave
rose about 40px across the whole form, which reads as a swell rather than
a wave. --wave-mid is the path's mean inside the tile and has to scale
with it (37.72/72), or the level solves against the wrong midpoint and the
water sits low. Both are read by js/flood.js. */
--wave-band:72px;
--wave-mid:37.7px;
/* At rest the surface cuts the submit button in half; --fill-rest is measured
against the real button by js/flood.js and republished on resize. The four
steps are spaced from wherever that lands up to --brim, so the climb reads
evenly at any width instead of being tuned for one. */
--rest:var(--fill-rest,.36);--brim:.95;
--fill:var(--rest);transition:--fill 1.25s var(--ease);
animation:surface-travel 42.35s linear infinite;
/* The tide is the page's, not the box's: full-width tile, full band, so this
waterline is the same object as the one in the hero. --vh-box is the
SECTION's height in px, published by js/flood.js — a percentage here is
resolved by mask-position against (container - image), not the container,
which silently drops the wave tile out of view. */
--vh-box:900px;
--lvl:calc(var(--fill) * (var(--vh-box) + var(--wave-band) + 8px) - var(--wave-band) - 4px)}
.deepend[data-filled="1"]{--fill:calc(var(--rest) + (var(--brim) - var(--rest)) * .25)}
.deepend[data-filled="2"]{--fill:calc(var(--rest) + (var(--brim) - var(--rest)) * .5)}
.deepend[data-filled="3"]{--fill:calc(var(--rest) + (var(--brim) - var(--rest)) * .75)}
.deepend[data-filled="4"]{--fill:var(--brim)}
.deepend[data-filled="sent"]{--fill:calc(var(--brim) + .23)}
.deepend__air{position:relative;z-index:1}
.contact{position:relative;text-align:center;
padding-top:clamp(66px,8.2vw,102px);padding-bottom:clamp(38px,4.2vw,62px)}
.contact__lead{max-width:52ch;margin:0 auto}
.contact__head{margin-top:12px}
.contact__sub{margin:18px auto 0;max-width:46ch;
font-size:clamp(15px,1.25vw,17.5px)}
/* the rig: the box, and the pair of cogs it sits between --------------------
The cogs are the mark used as the thing it depicts. They turn off --fill and
nothing else, in opposite directions the way a meshed pair must, and they sit
BEHIND the box so its edge cuts them — half machine, half hidden. */
.rig{position:relative;margin:clamp(44px,5.4vw,72px) auto 0;
max-width:clamp(320px,58vw,720px)}
.cog{position:absolute;top:52%;z-index:0;pointer-events:none;
width:clamp(150px,19vw,250px);height:auto;
transition:rotate 1.25s var(--ease)}
.cog path{fill:none;stroke:var(--flow-deep);stroke-opacity:.34;stroke-width:1.7;
stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cog--l{left:0;translate:-58% -50%;rotate:calc(var(--fill) * 300deg)}
.cog--r{right:0;translate:58% -50%;rotate:calc(var(--fill) * -300deg)}
.vessel{position:relative;z-index:1;
border:1px solid var(--rule-l);background:var(--surface);
--pad-y:clamp(24px,2.8vw,38px);--pad-x:clamp(22px,2.8vw,40px);
padding:var(--pad-y) var(--pad-x) calc(var(--pad-y) + clamp(8px,1vw,16px));
text-align:left}
.vessel__air{position:relative;z-index:1}
.cform{position:relative}
/* Pill fields. The capsule holds a shallow water tint with a light catching its
top edge, so each one reads as something with a little water in it rather
than a line to write on. Label sits above, inset to the capsule's curve. */
.frow{margin-bottom:clamp(11px,1.25vw,15px)}
.frow:last-of-type{margin-bottom:0}
.frow .rowk{display:block;margin:0 0 6px 18px;
font-family:"Chivo Mono",monospace;font-weight:500;text-transform:uppercase;
font-size:10.5px;letter-spacing:.14em;color:var(--flow-deep);opacity:.9;
transition:opacity .4s var(--ease),color .4s var(--ease)}
.frow.is-done .rowk,.frow:focus-within .rowk{opacity:1}
/* Empty capsules are a neutral blue-grey — slack water, nothing in them yet.
Answering a field tints it with the same teal the rest of the page uses, so
the form fills visibly before the tide does. */
.frow .rowv{position:relative;overflow:hidden;border-radius:999px;
padding:clamp(11px,1.2vw,14px) clamp(17px,1.9vw,23px);
background:linear-gradient(180deg,rgba(92,122,134,.13),rgba(92,122,134,.05));
border:1px solid rgba(4,40,58,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
transition:border-color .45s var(--ease),box-shadow .45s var(--ease),
background .45s var(--ease)}
.frow.is-done .rowv{
background:linear-gradient(180deg,rgba(0,96,111,.13),rgba(0,96,111,.04));
border-color:rgba(0,96,111,.46)}
.frow:focus-within .rowv{border-color:var(--flow-deep);
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 3px rgba(0,216,224,.16)}
/* the ripple canvas sits BEHIND the input and inside the capsule, so text
contrast is never in play and the rings are clipped by the curve */
.field__ripple{position:absolute;inset:0;width:100%;height:100%;
z-index:0;pointer-events:none}
.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field__input{position:relative;z-index:1;display:block;
border:0;background:none;font:inherit;
font-size:clamp(15px,1.2vw,17.5px);font-weight:500;color:var(--abyss);
letter-spacing:-.004em;padding:0;width:100%;outline:none}
/* .68, not .62: the capsule's tint darkens the ground under it, which drops a
.62 placeholder to 4.01:1 — under AA. */
.field__input::placeholder{color:rgba(4,40,58,.68);font-weight:400;
transition:color .4s var(--ease)}
.field__input:focus::placeholder{color:rgba(4,40,58,.38)}
.field__input:-webkit-autofill{-webkit-text-fill-color:var(--abyss);
-webkit-box-shadow:0 0 0 1000px #DDE9E8 inset}
.cform__foot{display:flex;flex-direction:column;align-items:center;
gap:clamp(12px,1.4vw,18px);margin-top:clamp(26px,3vw,40px)}
.cta{background:var(--flow);color:var(--abyss);
border:1px solid var(--flow-deep);border-radius:999px;
padding:clamp(15px,1.65vw,20px) clamp(34px,4vw,58px);font:inherit;font-weight:900;
text-transform:uppercase;font-size:clamp(12px,1.02vw,14px);letter-spacing:.13em;
cursor:pointer;
transition:background .4s var(--ease),box-shadow .6s var(--ease),
border-color .4s var(--ease),translate .25s var(--ease)}
.cta:hover:not(:disabled){background:#5CEDF2;translate:0 -1px}
.cta:active:not(:disabled){translate:0 0}
.flood__clone .cta{border-color:var(--flow)}
.cta:disabled{opacity:.55;cursor:default}
/* it burns brighter the deeper it goes */
.cta{box-shadow:0 0 calc(14px + var(--fill) * 56px) rgba(0,216,224,calc(.16 + var(--fill) * .44))}
.form__status{min-height:1.2em;color:var(--flow-deep);text-align:center;
font-size:clamp(10px,.86vw,12px);letter-spacing:.1em}
.form__status.is-error{color:#8E2F1E}
/* the water — the hero's, scaled to the box ------------------------------- */
/* Base gradient alone reads as a black hole. What makes the hero's water blue
is the near-surface lift sitting just under the line; the crest is the swell
breaking above it, and the meniscus is the same tile again, so none of the
three can disagree about where the surface is. */
.flood{position:absolute;inset:0;z-index:3;pointer-events:none}
.flood__body{position:absolute;inset:0;
/* +1px: the tile's bottom edge and the solid's top edge otherwise land on the
same pixel and antialiasing leaves a hairline seam across the full width.
The page tide overlaps them for the same reason. */
-webkit-mask-image:var(--wave-mask),linear-gradient(to top,#000 calc(var(--lvl) + 1.5px),transparent 0);
mask-image:var(--wave-mask),linear-gradient(to top,#000 calc(var(--lvl) + 1.5px),transparent 0);
-webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
-webkit-mask-size:var(--wave-tile-w) var(--wave-band),100% 100%;
mask-size:var(--wave-tile-w) var(--wave-band),100% 100%;
-webkit-mask-position:left var(--wave-x,0px) bottom var(--lvl),left 0 top 0;
mask-position:left var(--wave-x,0px) bottom var(--lvl),left 0 top 0}
.flood__water{position:absolute;inset:0;
background:linear-gradient(180deg,var(--abyss) 0%,var(--abyss-2) 46%,var(--abyss-3) 100%)}
.flood__near{position:absolute;left:0;right:0;height:var(--wave-fade);
/* starts at the solid edge, not up inside the wave band: its gradient begins
at .99 alpha, and a near-opaque top edge laid across the partly-masked band
draws a straight line right under the wave */
bottom:calc(var(--lvl) - var(--wave-fade));
background:linear-gradient(180deg,
rgba(8,44,64,0) 0%,rgba(8,44,64,.86) 16%,rgba(9,52,74,.78) 32%,
rgba(10,59,82,.48) 56%,rgba(10,59,82,.20) 78%,rgba(10,59,82,0) 100%)}
/* .flood is inset to the vessel's PADDING box and the real content sits inside
the padding — without the same padding the halves stop registering. */
.flood__clone{position:absolute;inset:0;color:var(--surface)}
.flood__clone .mono{color:var(--flow)}
.flood__clone .head{color:var(--surface)}
.flood__clone .body{color:var(--surface);opacity:.74}
/* underwater the box is an outline on the water, not a lit panel */
/* opaque enough to hide the cogs behind it, the way the light box does in
air — a 30% panel let them read straight through */
.flood__clone .vessel{background:rgba(4,38,55,.93);border-color:var(--rule-d)}
.flood__clone .cog path{stroke:var(--flow);stroke-opacity:.42}
/* the footer is always under, so it is styled for the deep in both copies */
.flood__clone .footer{border-top-color:var(--rule-d)}
.flood__clone .footer .mono,.flood__clone .footer a{color:var(--flow)}
.footer__mark{display:inline-flex;line-height:0;text-decoration:none}
.footer__logo{display:block;height:clamp(64px,6.4vw,92px);width:auto}
.footer__logo .lg-ink{fill:var(--abyss)}
.footer__logo .lg-accent{fill:var(--flow-deep)}
.flood__clone .footer__logo .lg-ink{fill:var(--surface)}
.flood__clone .footer__logo .lg-accent{fill:var(--flow)}
/* Underwater the values go cyan, the way UNLOCKED does in the hero — that is
what makes the water read blue rather than black; the body itself is nearly
the same dark in both places (sampled: rgb(5,44,63) under the hero line).
Hierarchy is carried by size, 21px against 11px, not by colour. */
.flood__clone .frow .rowk{color:var(--flow);opacity:.82}
/* Underwater the two states have to be further apart than they are in air: a
pale slab with a grey placeholder reads as untouched, a cyan-rimmed capsule
with cyan text reads as answered. */
.flood__clone .frow .rowv{
background:linear-gradient(180deg,rgba(196,218,226,.24),rgba(196,218,226,.10));
border-color:rgba(210,232,238,.42);
box-shadow:inset 0 1px 0 rgba(233,242,241,.16)}
.flood__clone .frow .rowk{color:rgba(212,232,238,.86);opacity:1}
.flood__clone .frow .field__input::placeholder{color:rgba(216,234,240,.94)}
.flood__clone .frow.is-done .rowv{
background:linear-gradient(180deg,rgba(0,216,224,.22),rgba(0,216,224,.05));
border-color:rgba(0,216,224,.9);
box-shadow:inset 0 1px 0 rgba(0,216,224,.22),0 0 20px rgba(0,216,224,.20)}
.flood__clone .frow.is-done .rowk{color:var(--flow);opacity:1}
.flood__clone .field__input{color:var(--flow)}
/* .72 not .5: a placeholder is text, and 4.53:1 is where it clears AA here */
.flood__clone .frow.is-done .field__input::placeholder{color:rgba(0,216,224,.72)}
.flood__clone .form__status{color:var(--flow)}
html.js .flood__clone [data-reveal],
.flood__clone [data-reveal]{opacity:1;transform:none}
/* the swell breaking above the line — opaque, never translucent dark over the
mineral ground, and dissolved at the bottom so it terminates in nothing */
.flood__crest{position:absolute;left:0;right:0;height:var(--wave-band);z-index:3;
bottom:var(--lvl);pointer-events:none;
background-image:var(--wave-crest);background-repeat:repeat-x;
background-size:var(--wave-tile-w) var(--wave-band);
background-position:calc(var(--wave-x,0px) + 22px) 0;
opacity:.5;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,rgba(0,0,0,.4) 58%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 30%,rgba(0,0,0,.4) 58%,transparent 100%)}
.flood__line{position:absolute;left:0;right:0;height:var(--wave-band);z-index:4;
bottom:var(--lvl);
background-image:var(--wave-line-flood);background-repeat:repeat-x;
background-size:var(--wave-tile-w) var(--wave-band);
background-position:var(--wave-x,0px) 0;
filter:drop-shadow(0 0 8px rgba(0,216,224,.55));pointer-events:none;
/* The line paints above the submerged copy of the page, so where it met the
submit button it wrote a bright bar across the label - 'SUBMIT INQUIRY'
rendered as 'SUB..IT INQUIRY' on both pages. It fades out across the
middle of the measure, where the button stands, and runs at full strength
everywhere else. */
-webkit-mask-image:linear-gradient(90deg,#000 0 30%,transparent 40% 60%,#000 70% 100%);
mask-image:linear-gradient(90deg,#000 0 30%,transparent 40% 60%,#000 70% 100%)}
@media(max-width:760px){
/* The key above the value so an email gets the whole measure, and the cogs
tuck further behind the box — at 390 there is no room beside it. */
.rig{max-width:none}
.frow{grid-template-columns:minmax(0,1fr);gap:2px;padding:11px 0}
.cog{width:132px}
.cog--l{translate:-72% -50%}
.cog--r{translate:72% -50%}
.cform__foot{gap:14px}
.cta{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
.contact{transition:none}
}
/* Was 104px above and 34px below with a margin stacked on top of that, which
is what made it feel arbitrary. One grid, one centre line, equal air. */
.footer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;gap:clamp(18px,3vw,40px);
margin-top:clamp(26px,3.2vw,42px);
padding:clamp(30px,3.6vw,46px) var(--gut);
border-top:1px solid var(--rule-l)}
.footer .mono{margin:0}
.footer > .mono:first-of-type{justify-self:center;text-align:center}
.footer > .mono:last-of-type{justify-self:end}
/* Three columns at 390 leaves each a few characters wide. Declared after the
base rule, not before it — same specificity, so source order decides. */
@media(max-width:760px){
.footer{grid-template-columns:minmax(0,1fr);justify-items:center;
gap:clamp(16px,4vw,24px);text-align:center;
padding:clamp(30px,7vw,40px) var(--gut)}
.footer > .mono:first-of-type,
.footer > .mono:last-of-type{justify-self:center}
}
.footer a{text-decoration:none}
/* --- with JS, the tide owns the water ------------------------------------ */
/* The static dark hero block stands down; the page becomes one continuous
mineral ground and the tide paints whatever is under the line. A display
line sitting across the surface is therefore ink on its top half and cyan
on its bottom. The block stays in the layout (visibility, not display) so
js/main.js can keep measuring it. */
html.tide-live .hero__water{visibility:hidden}
html.tide-live .huge__l2{color:var(--abyss)}
html.tide-live .hero .sub,html.tide-live .hero__meta .mono{color:var(--abyss)}
html.tide-live .hero .sub{border-top-color:var(--rule-l)}
html.tide-live .hero__meta .mono{color:var(--flow-deep)}
html.tide-live .schem{border-top-color:var(--rule-l)}
html.tide-live .schem__track{background:var(--rule-l)}
html.tide-live .dot{background:var(--surface);border-color:var(--flow-deep)}
html.tide-live .nlab{color:var(--flow-deep)}
html.tide-live .schem__node.is-on .dot{background:var(--flow-deep);box-shadow:0 0 0 6px rgba(0,96,111,.12)}
html.tide-live .schem__node.is-on .nlab{color:var(--flow-deep)}
html.tide-live .schem__fill{background:var(--flow-deep);box-shadow:none}
/* THE SYSTEM is permanently submerged: above the tide, never repainted. */
.deep--system{position:relative;z-index:6}
/* --- THE TIDE ------------------------------------------------------------ */
/* Absolutely positioned at the top of the DOCUMENT, so the clone scrolls
natively with the page. Nothing about its position is scripted — only the
clip line — which is why it cannot tear at speed. */
.tide{position:absolute;top:0;left:0;width:100%;z-index:5;pointer-events:none}
/* THE BOUNDARY IS THE WAVE. Two mask layers, added together:
1. the wave tile, repeated across x, sitting at the waterline
2. a solid block from just below the wave band down to the bottom
There is no straight clip line anywhere, so there is nothing to cover up and
no seam is possible — the water's edge is the wave at every x, at any
viewport width. */
.tide__body{
position:relative;
--wave-top:calc(var(--water-doc,100vh) - var(--wave-mid));
-webkit-mask-image:var(--wave-mask),linear-gradient(#000,#000);
mask-image:var(--wave-mask),linear-gradient(#000,#000);
-webkit-mask-repeat:repeat-x,no-repeat;
mask-repeat:repeat-x,no-repeat;
-webkit-mask-size:var(--wave-tile-w) var(--wave-band),100% 100000px;
mask-size:var(--wave-tile-w) var(--wave-band),100% 100000px;
-webkit-mask-position:var(--wave-x,0px) var(--wave-top),0 calc(var(--wave-top) + var(--wave-band) - 1px);
mask-position:var(--wave-x,0px) var(--wave-top),0 calc(var(--wave-top) + var(--wave-band) - 1px);
}
.tide__bg{position:absolute;inset:0;
background:linear-gradient(180deg,var(--abyss) 0%,var(--abyss-2) 42%,var(--abyss-3) 100%)}
/* Sunlit water just beneath the surface, dissolving into the deep. Fixed to
the viewport at the waterline and masked along with the rest of the tide, so
it follows the wave exactly and sits behind every piece of type. */
/* The ombre across the letterforms. Height is scaled to the display line it
falls across, and it starts AT the waterline — a fixed pixel height with a
dense head starting above the line gave the desktop word a full gradient
while burying the much shorter mobile word entirely in the dark end. */
/* The ombre. Its height is the display line itself, not a multiple of it, so
the gradient runs the full depth of the letterforms: dense where they meet
the surface, fully resolved to the accent by the time they reach depth.
Spanning 2.4x the line spread the ramp so thin the word read flat. */
.tide__nearsurf{position:fixed;left:0;right:0;top:0;height:var(--wave-fade);
transform:translate3d(0,calc(var(--tide-y,100vh) - var(--wave-mid)),0);
background:linear-gradient(180deg,
rgba(8,44,64,.99) 0%,rgba(9,52,74,.90) 20%,rgba(10,59,82,.56) 46%,
rgba(10,59,82,.24) 72%,rgba(10,59,82,0) 100%);
will-change:transform}
.tide__inner{position:relative;color:var(--surface)}
html.js .tide__inner .mono{color:var(--flow)}
html.js .tide__inner .huge__l1,html.js .tide__inner .head{color:var(--surface)}
html.js .tide__inner .huge__l2{color:var(--flow)}
html.js .tide__inner .sub{color:var(--surface);border-top-color:var(--rule-d)}
html.js .tide__inner .hero__meta .mono{color:var(--flow)}
html.js .tide__inner .rowk{color:var(--flow)}
html.js .tide__inner .row{border-bottom-color:var(--rule-d)}
html.js .tide__inner .tbl{border-top-color:var(--surface)}
html.js .tide__inner .schem{border-top-color:var(--rule-d)}
html.js .tide__inner .schem__track{background:var(--rule-d)}
html.js .tide__inner .dot{background:var(--abyss);border-color:var(--flow)}
html.js .tide__inner .nlab{color:rgba(233,242,241,.62)}
html.js .tide__inner .schem__node.is-on .dot{background:var(--flow);
box-shadow:0 0 0 7px rgba(0,216,224,.16),0 0 18px rgba(0,216,224,.7)}
html.js .tide__inner .schem__node.is-on .nlab{color:var(--flow)}
html.js .tide__inner .schem__fill{background:var(--flow);box-shadow:0 0 14px rgba(0,216,224,.55)}
html.js .tide__inner .field input{color:var(--surface)}
html.js .tide__inner .field label{color:var(--flow)}
html.js .tide__inner .field{border-bottom-color:var(--rule-d)}
/* Controls in the clone are disabled only to keep them out of the tab order —
they must still look live. */
html.js .tide__inner .cta:disabled,html.js .tide__inner input:disabled{opacity:1}
/* Already under water; never paint it twice. */
.tide__inner .deep--system,.tide__inner .hero__water{visibility:hidden}
/* --- THE SURFACE -------------------------------------------------------- */
/* Everything here uses the same tile, the same --wave-x and the same
--tide-y as the mask above, so the crest, the meniscus and the refraction
all follow one curve by construction. */
/* Taller than the wave tile so the crest has room to fade out downward
instead of ending on a hard horizontal line where the band stops. */
.surfacefx{transition:opacity .45s var(--ease);position:fixed;left:0;right:0;top:0;
height:calc(var(--wave-band) + var(--wave-fade));
z-index:7;pointer-events:none;
transform:translate3d(0,calc(var(--tide-y,100vh) - var(--wave-mid)),0);
will-change:transform}
/* A crest in its own solid hue. Never translucent dark over the mineral
ground — a see-through dark mixes to gray and the surface reads as haze. */
/* The crest is ONLY the wave shape breaking above the line. Its downward fade
lives inside the water (.tide__nearsurf) instead, behind the type — as an
overlay it washed the cyan straight out of UNLOCKED. */
.surfacefx__crest{position:absolute;left:0;right:0;top:0;height:var(--wave-band);
background-image:var(--wave-crest);
background-repeat:repeat-x;
background-size:var(--wave-tile-w) var(--wave-band);
background-position:calc(var(--wave-x,0px) + 46px) 0;
/* Its fill is opaque and its tile ends at --wave-band, so without this it
laid a hard-bottomed slab across the submerged type — the visible step in
the middle of UNLOCKED. Dissolve the lower edge so the second swell reads
as depth and terminates in nothing. */
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.45) 62%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.45) 62%,transparent 100%);
opacity:.9}
.surfacefx__line{position:absolute;left:0;right:0;top:0;height:var(--wave-band);
background-image:var(--wave-line);
background-repeat:repeat-x;
background-size:var(--wave-tile-w) var(--wave-band);
background-position:var(--wave-x,0px) 0;
filter:drop-shadow(0 0 6px rgba(0,216,224,.45))}
/* Refraction that FOLLOWS the curve: a single mask layer built from the same
wave, stroked thick. No mask-composite — its support is inconsistent and it
collapsed the band to a 4px sliver, which is what the stray smudge was. */
.surfacefx__refract{position:absolute;left:0;right:0;top:0;height:var(--wave-band);
backdrop-filter:blur(3.2px) saturate(1.05);
-webkit-backdrop-filter:blur(3.2px) saturate(1.05);
-webkit-mask-image:var(--wave-band-mask);
mask-image:var(--wave-band-mask);
-webkit-mask-repeat:repeat-x;
mask-repeat:repeat-x;
-webkit-mask-size:var(--wave-tile-w) var(--wave-band);
mask-size:var(--wave-tile-w) var(--wave-band);
-webkit-mask-position:var(--wave-x,0px) 0;
mask-position:var(--wave-x,0px) 0}
/* --- MIST ---------------------------------------------------------------- */
/* Two soft bodies above the line, three drifting below it. Clipped to their
own side of the surface so neither ever fogs the wrong half. Kept in the
ocean palette and far too faint to touch contrast. */
.mist{position:fixed;inset:0;z-index:6;pointer-events:none}
.mist i{position:absolute;display:block;border-radius:50%;filter:blur(46px)}
/* Masked, never clipped: clipping a 46px-blurred body cuts it with a razor
edge and you get a hard rectangle floating in the sky. */
.mist--air{
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--tide-y,100vh) - 110px),transparent calc(var(--tide-y,100vh) - 10px));
mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--tide-y,100vh) - 110px),transparent calc(var(--tide-y,100vh) - 10px))}
.mist--air i{background:radial-gradient(circle,rgba(255,255,255,.7),rgba(214,234,234,0) 68%);opacity:.16}
.mist--air i:nth-child(1){left:-6%;top:22%;width:52vw;height:26vw;animation:drift-a 64s ease-in-out infinite alternate}
.mist--air i:nth-child(2){right:-10%;top:12%;width:44vw;height:22vw;animation:drift-b 82s ease-in-out infinite alternate}
.mist--deep{
-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--tide-y,100vh) + 6px),#000 calc(var(--tide-y,100vh) + 130px));
mask-image:linear-gradient(180deg,transparent calc(var(--tide-y,100vh) + 6px),#000 calc(var(--tide-y,100vh) + 130px))}
.mist--deep i{background:radial-gradient(circle,rgba(0,216,224,.13),rgba(0,216,224,0) 70%)}
.mist--deep i:nth-child(1){left:-12%;top:24%;width:64vw;height:30vw;animation:drift-b 74s ease-in-out infinite alternate}
.mist--deep i:nth-child(2){right:-14%;top:56%;width:58vw;height:28vw;animation:drift-a 91s ease-in-out infinite alternate}
.mist--deep i:nth-child(3){left:26%;top:70%;width:46vw;height:24vw;opacity:.7;animation:drift-c 67s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:translate3d(-4vw,2vh,0) scale(1)}to{transform:translate3d(7vw,-3vh,0) scale(1.18)}}
@keyframes drift-b{from{transform:translate3d(5vw,-2vh,0) scale(1.12)}to{transform:translate3d(-6vw,3vh,0) scale(1)}}
@keyframes drift-c{from{transform:translate3d(0,4vh,0) scale(1.05)}to{transform:translate3d(-8vw,-4vh,0) scale(1.22)}}
/* --- SYSTEM RAIL --------------------------------------------------------- */
/* Which stage of the route you are inside. Instrument, not navigation chrome. */
/* Per item, not per page: cyan only where the item is genuinely over water. */
/* --- reveals ------------------------------------------------------------- */
/* Both selectors must carry the html.js prefix: without it the armed state
(0,2,1) outranks the revealed state (0,2,0) and nothing ever appears. */
html.js [data-reveal]{opacity:0;transform:translate3d(0,26px,0)}
html.js [data-reveal].is-in{opacity:1;transform:none;
transition:opacity .9s var(--ease),transform .9s var(--ease)}
/* --- mobile: a real design, not a squeeze -------------------------------- */
/* Small viewports only: the swell and its ombre are proportionally enormous
against a 44px display line, so both are scaled down here. Desktop is left
exactly as authored. */
@media(max-width:760px){
:root{--wave-band:38px;--wave-mid:21px;--wave-fade:56px}
}
@media(max-width:980px){
.section__lead{grid-template-columns:1fr;gap:26px}
.section__lead .body{margin-top:0}
}
@media(max-width:900px){ /* no room for an instrument margin */
}
@media(max-width:760px){
.contact{grid-template-columns:1fr;gap:44px}
/* The mono keys are wider than any sensible fixed column at this width, so
they stack above their values rather than colliding with them. */
.row{grid-template-columns:1fr;gap:7px;padding:18px 0}
.rowk{font-size:11px;letter-spacing:.14em}
.rowv{padding-right:0;font-size:16px}
.hero__meta{flex-wrap:wrap;white-space:normal;gap:10px 24px}
.schem{height:150px}
.nlab{font-size:9px;letter-spacing:.08em}
.schem__node:last-child .nlab{transform:translateX(-72%)}
.schem__node:first-child .nlab{transform:translateX(-28%)}
.profile svg{height:200px}
.footer{flex-direction:column;gap:10px}
}
/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.tide__crest svg{animation:none}
/* Named before the blanket rule below, which would otherwise spin the
surface at .01ms a cycle rather than stopping it. */
.deepend{animation:none}
.schem__fill{transition:none;width:46%}
.pf-flow{transition:none;stroke-dashoffset:0}
html.js [data-reveal],html.js [data-reveal].is-in{opacity:1;transform:none}
*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* Narrowest phones: the lockup is one piece now, so it scales rather than
shedding a word. At 26px tall it is 101px wide, which clears the briefing
link with room at 390. */
@media(max-width:440px){
:root{--nav-logo-h:26px;--nav-pad:12px}
}
/* Inside the permanently-dark section the page is already underwater, so a
visible surface there just draws a line across the copy. */
html.is-in-deep .surfacefx{opacity:0}