:root{color-scheme:dark;--bg:#02060c;--text:#f2f5f7;--muted:#b8c2cd;--edge:rgba(214,231,247,.24)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible{outline:2px solid #8feafa;outline-offset:7px}.skip{position:fixed;left:20px;top:-100px;z-index:10;background:#fff;color:#000;padding:12px}.skip:focus{top:20px}.header{height:102px;padding:0 4%;display:flex;align-items:center;gap:34px;position:relative;z-index:2}.brand{font-size:32px;font-weight:600;letter-spacing:-1.6px}.status{border-left:1px solid var(--edge);padding-left:30px;display:flex;align-items:center;gap:12px;font-size:13px}.status i{width:7px;height:7px;border-radius:50%;background:#7ce5ee;box-shadow:0 0 12px #53e4f13b}nav{margin-left:auto;display:flex;gap:40px;font-size:14px}nav a{padding:10px 0;transition:color .2s}nav a:hover{color:#96e9f2}.hero{position:relative;min-height:680px;height:calc(100svh - 220px);max-height:960px;isolation:isolate}.heading{position:relative;z-index:2;padding:25px 4% 0}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.21em;font-weight:600;line-height:1.6;margin:0 0 22px}h1{margin:0;display:grid;grid-template-columns:1fr .25fr 1.5fr .25fr 1fr;align-items:start;font-weight:500;letter-spacing:-.06em;text-align:center;line-height:.98}.part{display:flex;flex-direction:column;min-width:0}.letters{font-size:clamp(100px,15.8vw,260px);color:#f3f5f6;background:linear-gradient(108deg,#e3e8ec 0%,#f4f7f9 35%,#fff 46%,#c4e6ed 49%,#fff 52%,#edf2f5 58%,#e3e8ec 100%);background-size:350% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 16s ease-in-out infinite;filter:drop-shadow(0 0 9px #d8f6ff0b)}.part:nth-child(3) .letters{animation-delay:1.1s}.part:nth-child(5) .letters{animation-delay:2.2s}.dot{font-size:clamp(65px,10vw,160px);line-height:1.45;letter-spacing:0;color:#edf7fb}.meaning{font-size:clamp(12px,1.55vw,23px);line-height:1.5;letter-spacing:0;margin-top:8px;font-weight:400}.water{position:absolute;z-index:-1;left:0;top:27%;width:100%;height:66%;overflow:hidden;pointer-events:none;mask-image:linear-gradient(transparent 0%,#000 15%,#000 82%,transparent 100%)}.water img,.water canvas{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}.water canvas{opacity:0;transition:opacity 1.5s}.water.ready canvas{opacity:1}.water.ready img{opacity:0}.intro{position:absolute;left:4%;bottom:40px;z-index:2}.intro p{font-size:clamp(17px,1.65vw,25px);line-height:1.5;font-weight:400;margin:0 0 24px;text-shadow:0 2px 20px #02060c}.explore{border:1px solid #ced9dfb3;border-radius:40px;display:inline-flex;align-items:center;gap:35px;padding:15px 23px;font-size:14px;background:#02060c66;backdrop-filter:blur(6px);transition:background .2s,border-color .2s}.explore:hover{background:#14242dc4;border-color:#e9fcff}.explore span{font-size:23px;line-height:15px}.motion{position:absolute;right:4%;bottom:45px;background:#02060c77;border:1px solid #81939d44;border-radius:30px;padding:9px 13px;cursor:pointer;font-size:11px;display:flex;align-items:center;gap:8px;color:#aabdc7}.motion:hover{color:#fff;border-color:#a5d4de}.motion-icon{font-size:13px;width:12px}.concept{margin:0 4%;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);scroll-margin-top:24px}.concept-toggle{display:flex;width:100%;padding:28px 0;align-items:center;background:none;border:0;text-align:left;cursor:pointer;gap:30px}.concept-toggle .eyebrow{margin:0;font-size:10px;flex:0 0 240px}.concept-title{font-size:clamp(22px,2.1vw,33px);font-weight:400;border-left:1px solid var(--edge);padding-left:30px;letter-spacing:-.6px}.arrow{margin-left:auto;font-size:28px;font-weight:300;transition:transform .3s}.concept-toggle[aria-expanded=true] .arrow{transform:rotate(90deg)}.concept-body{padding:28px 0 44px;display:grid;grid-template-columns:1fr 1fr;gap:10%;border-top:1px solid #c3d4de1a}.concept-body[hidden]{display:none}.concept-body h2{font-size:clamp(24px,3vw,44px);font-weight:400;line-height:1.2;letter-spacing:-1px}.concept-body p:not(.eyebrow){font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 18px}.quiet{font-size:14px;color:#d6e8ed}footer{padding:25px 4%;display:flex;align-items:center;gap:22px;font-size:12px;color:#b9c4ce}footer .brand{font-size:19px;color:#f1f4f6;letter-spacing:-.8px}footer>span{border-left:1px solid var(--edge);padding-left:22px}footer small{margin-left:auto;font-size:10px;color:#85929c}@keyframes sheen{0%,18%{background-position:100% 0}58%,100%{background-position:0% 0}}body.paused .letters{animation-play-state:paused}@media(min-width:1700px){.hero{min-height:850px}.heading{padding-top:40px}.intro{bottom:65px}.water{top:25%}}@media(max-width:700px){.header{height:89px;padding:0 6%;gap:16px;flex-wrap:wrap;align-content:center;row-gap:13px}.brand{font-size:25px}.status{padding-left:15px;font-size:10px;gap:7px}.status i{width:5px;height:5px}nav{gap:18px;font-size:11px}.hero{min-height:610px;height:calc(100svh - 198px);max-height:800px}.heading{padding:35px 6% 0}.eyebrow{font-size:9px;letter-spacing:.17em;margin-bottom:26px}h1{grid-template-columns:1fr .17fr 1.5fr .17fr 1fr;letter-spacing:-.065em}.letters{font-size:15.8vw}.dot{font-size:10vw;line-height:1.45}.meaning{font-size:9px;letter-spacing:-.1px;margin-top:10px;white-space:nowrap}.water{top:24%;height:49%;width:150%;left:-25%;mask-image:linear-gradient(transparent,#000 18%,#000 77%,transparent)}.intro{left:6%;right:6%;bottom:62px}.intro p{font-size:17px;line-height:1.6;max-width:330px}.desktop-break{display:none}.explore{font-size:12px;padding:13px 19px;gap:28px}.motion{right:6%;bottom:15px;padding:8px 10px;font-size:10px}.concept{margin:0 6%}.concept-toggle{padding:24px 0;display:grid;grid-template-columns:1fr 20px;gap:11px}.concept-toggle .eyebrow{grid-column:1}.concept-title{grid-row:2;border:0;padding:0;font-size:21px;line-height:1.35;letter-spacing:-.5px}.arrow{grid-column:2;grid-row:2;font-size:24px}.concept-body{grid-template-columns:1fr;gap:15px;padding-bottom:28px}.concept-body h2{margin:0 0 10px}.concept-body p:not(.eyebrow){font-size:14px}footer{padding:25px 6%;gap:16px}footer>span{padding-left:16px;font-size:11px}footer small{font-size:9px}}@media(max-width:380px){.header{height:100px}nav{width:100%;margin-left:0}.hero{min-height:570px}.meaning{font-size:8px}.status{margin-left:auto}.concept-title{font-size:19px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.letters{animation:none}.water canvas{transition:none}.motion{display:none}}
/* Keep the full-width artwork inside the viewport on small screens. */
.hero{overflow:hidden}.water.ready img{opacity:1}
@media(max-width:700px){.header nav{width:100%;justify-content:flex-end}.header{height:94px}.status{margin-left:auto}.water{top:25%;height:44%}}

/* v02: a visible, continuous silver sheen driven by the same motion clock. */
.letters{animation:none;background-image:linear-gradient(110deg,#c8d2db 0%,#edf3f6 35%,#fff 45%,#a9dfec 49%,#fff 53%,#e9eff3 64%,#c8d2db 100%);background-size:240% 100%;will-change:background-position}
.brand{background:linear-gradient(110deg,#cbd6df 25%,#fff 44%,#9ddae9 49%,#fff 54%,#cbd6df 75%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(prefers-reduced-motion:reduce){.motion{display:flex}}

/* v03: native video; contain the image to avoid magnifying its texture. */
.water{top:29%;height:53%;width:100%;left:0;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mix-blend-mode:screen}
.water video{width:100%;height:100%;display:block;object-fit:contain}
.letters{animation:sheen 12s linear infinite}
.brand{animation:sheen 16s linear infinite}
body.paused .letters,body.paused .brand{animation-play-state:paused}
@media(max-width:700px){.water{top:29%;height:37%;width:120%;left:-10%}.water video{object-fit:contain}}
@media(prefers-reduced-motion:reduce){.letters,.brand{animation:none}}

@media(min-width:701px){.water video{object-fit:cover}}

.water video{mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}

/* v05: the river flows behind the name, across the full heading. */
.hero{min-height:560px;max-height:760px}
.heading{padding:60px 4% 55px;isolation:isolate}
.heading>.eyebrow,.heading>h1{position:relative;z-index:1}
.heading .water{z-index:0;top:0;left:0;width:100%;height:100%;opacity:.5;filter:saturate(.65);mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent)}
.heading .water video{object-fit:cover}
.letters{filter:drop-shadow(0 2px 9px #02060cb3)}
.meaning,.heading>.eyebrow{text-shadow:0 2px 8px #02060c,0 0 16px #02060c}
@media(max-width:700px){
 .hero{height:auto;min-height:470px;max-height:none;padding-bottom:240px}
 .heading{padding:42px 6% 60px}
 .heading .water{top:10px;left:-10%;width:120%;height:100%;opacity:.46}
 .heading .water video{object-fit:contain}
 .intro{bottom:66px}
}

/* v06: a clearer silver-blue sweep and closer mobile introduction. */
.letters{background-image:linear-gradient(110deg,#cbd5df 0%,#edf3f7 32%,#fff 42%,#83c9df 49%,#fff 56%,#edf3f7 65%,#cbd5df 100%);animation-name:letter-flow;animation-duration:10s;animation-timing-function:linear}
@keyframes letter-flow{from{background-position:100% 50%}to{background-position:-100% 50%}}
@media(max-width:700px){
 .hero{min-height:0;padding-bottom:64px}
 .heading{padding-bottom:26px}
 .intro{position:relative;left:auto;right:auto;bottom:auto;margin:12px 6% 0}
 .motion{bottom:15px}
}
@media(prefers-reduced-motion:reduce){.letters{animation:none}}

/* v07: always-visible letters; only an opaque colour highlight moves. */
.letters{opacity:1;visibility:visible;transform:none;transition:none;color:#edf3f7;background-color:#edf3f7;background-image:linear-gradient(110deg,#edf3f7 0%,#edf3f7 32%,#fff 42%,#83c9df 49%,#fff 56%,#edf3f7 65%,#edf3f7 100%);background-repeat:repeat-x;animation:letter-colour 10s linear infinite;filter:drop-shadow(0 2px 9px #02060cb3)}
.part:nth-child(3) .letters{animation-delay:-1.1s}
.part:nth-child(5) .letters{animation-delay:-2.2s}
@keyframes letter-colour{from{background-position:100% 50%}to{background-position:-71.428571% 50%}}
body.paused .letters{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.letters{animation:none}}