:root{color-scheme:dark;--bg:#090c0c;--text:#e7e8de;--muted:#a4afa8;--line:#26312c;--accent:#c5c9aa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}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}a:focus-visible{outline:2px solid var(--accent);outline-offset:8px}::selection{background:#c5c9aa;color:#090c0c}header,footer{max-width:1440px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:28px 24px;gap:24px}header{position:relative;z-index:1}.wordmark{font-size:18px;font-weight:600;letter-spacing:-.03em}.wordmark span{font-weight:400;color:var(--muted)}.nav-link{font-size:13px;color:var(--muted);padding:10px 0}.nav-link:hover,footer a:hover{color:var(--text);text-decoration:underline;text-underline-offset:5px}.hero{position:relative;isolation:isolate;min-height:690px;min-height:calc(100svh - 100px);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:90px 24px 100px;text-align:center}.hourglass{position:absolute;z-index:-1;width:330px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.hourglass svg{display:block;width:100%;height:auto}.hero-copy{margin-top:20px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(46px,8vw,88px);font-weight:400;line-height:1.06;letter-spacing:-.035em;margin:0 0 28px;text-wrap:balance}h1 em{font-weight:400;color:var(--accent)}.hero p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 38px}.coming-soon{display:inline-flex;gap:24px;align-items:center;font-size:12px;letter-spacing:.08em;padding:14px 0;border-bottom:1px solid #667064}.coming-soon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25;transition:transform .25s ease}.coming-soon:hover svg{transform:translateY(4px)}.about{max-width:1120px;margin:auto;border-top:1px solid var(--line);padding:64px 24px 80px;display:grid;gap:28px;scroll-margin-top:20px}h2{font-family:Georgia,'Times New Roman',serif;font-size:32px;line-height:1.15;font-weight:400;letter-spacing:-.025em;margin:0}.about p{font-size:16px;line-height:1.8;max-width:48ch;margin:0 0 16px}.about .secondary{color:var(--muted);font-size:14px}footer{border-top:1px solid var(--line);font-size:12px;color:var(--muted);padding-top:25px;padding-bottom:30px;flex-wrap:wrap}footer a{color:var(--text)}@media(min-width:760px){header,footer{padding-left:64px;padding-right:64px}header{padding-top:38px}.hourglass{width:390px}.hero{padding-top:80px}.hero p{font-size:18px}.about{grid-template-columns:1fr 1fr;padding:80px 64px 100px;gap:60px}h2{font-size:40px}}@media(max-width:360px){h1{font-size:42px}.hero{padding-left:18px;padding-right:18px}.desktop-break{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.coming-soon svg{transition:none}}

/* The vessel stays fixed; only the spores move through its narrow waist. */
.spore{offset-distance:0%;opacity:0;animation:spore-rise var(--duration) linear var(--delay) infinite;}
@keyframes spore-rise{0%{offset-distance:0%;opacity:0}12%{opacity:var(--glimmer)}48%{opacity:calc(var(--glimmer) * .6)}72%{opacity:var(--glimmer)}92%,100%{opacity:0}100%{offset-distance:100%}}
.hourglass.is-paused .spore{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.spore{animation:none;offset-distance:50%;opacity:0}.spore:nth-child(4n){offset-distance:24%;opacity:.18}.spore:nth-child(5n){offset-distance:78%;opacity:.2}}

/* A whisper of a double helix, lit from the same distant source. */
.dna-strands{fill:none;stroke:#b6c8b7;stroke-width:.75;opacity:.19}
.dna-rung{stroke-linecap:round}

/* The vessel occupies the first screen; navigation and copy sit over it. */
header{position:absolute;top:0;left:0;right:0;width:100%;z-index:2}
.hero{min-height:100svh;padding-top:120px;padding-bottom:100px}
.hourglass{height:94svh;width:auto;aspect-ratio:360 / 520}
.hourglass svg{width:100%;height:100%}
@media(max-width:759px){.hourglass{height:94svh}.hero{padding-top:100px;padding-bottom:80px}}

/* Immersive, edge-to-edge vessel with the brand as the only visible text. */
body{overflow:hidden}
header{justify-content:center;padding:30px 24px}
.wordmark{font-size:20px}
.hero{height:100svh;min-height:100svh;padding:0}
.hourglass{height:145svh;width:auto;aspect-ratio:360 / 520}
@media(max-width:759px){header{padding:26px 24px}.hourglass{height:145svh}}

.wordmark{font-size:clamp(30px,4vw,48px);letter-spacing:-.035em;line-height:1.1}

/* Distant key light, warm reflected fill, and deep unlit corners. */
.hero{background:radial-gradient(ellipse at 23% 15%,rgba(91,136,153,.045),transparent 47%),radial-gradient(ellipse at 80% 80%,rgba(145,109,65,.025),transparent 43%),radial-gradient(ellipse at 50% 50%,rgba(113,151,143,.015),transparent 27%),#070a0b}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 48%,transparent 25%,rgba(0,0,0,.34) 100%)}
.wordmark{text-shadow:0 2px 20px rgba(0,0,0,.7)}

/* Quiet studio treatment: neutral glass, precise type, restrained detail. */
:root{--bg:#050607;--text:#f0f1f0;--muted:#b3b7b8}
body{background:#050607;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.hero{background:radial-gradient(ellipse at 35% 30%,rgba(130,145,154,.045),transparent 60%),radial-gradient(ellipse at 65% 70%,rgba(140,146,149,.018),transparent 50%),#050607}
header{padding-top:38px}
.wordmark{font-size:clamp(28px,3.5vw,42px);font-weight:500;letter-spacing:-.035em;text-shadow:none}
.wordmark span{color:#bdc1c2;font-weight:300}
.dna-strands{stroke:#b8c1c4;opacity:.12;stroke-width:.65}
.spores{fill:#d7dfe0;opacity:.7}
@media(max-width:759px){header{padding-top:30px}}

.dna-strands{opacity:.65}
.dna-outline{opacity:.18;stroke-width:.65}

.spores{fill:unset}

/* Lower-third wordmark, just above the DNA crossover at 73.2% viewport height. */
header{top:66.5svh;bottom:auto;padding:0 24px}
.wordmark{line-height:1.1}
@media(max-width:759px){header{padding:0 24px}}

/* Center the wordmark over the hourglass neck. */
header{top:50svh;transform:translateY(-50%)}

/* Restrained luminous lettering, with a dark separation from the glass. */
.wordmark{text-shadow:0 1px 8px rgba(0,0,0,.8),0 0 16px rgba(216,228,236,.15),0 0 32px rgba(216,228,236,.06)}

/* Anchor the dot itself to the vessel neck rather than centering the whole word. */
.wordmark{position:relative;display:block;width:100%;height:1.15em;font-size:clamp(40px,6vw,72px);line-height:1.15;white-space:nowrap}
.wordmark .brand-dot{position:absolute;left:50%;top:0;transform:translateX(-50%);color:var(--text);font-weight:500}
.wordmark .brand-name{position:absolute;right:calc(50% + .11em);top:0;color:var(--text);font-weight:500}
.wordmark .brand-domain{position:absolute;left:calc(50% + .11em);top:0;color:#bdc1c2;font-weight:300}
header{top:50svh;transform:translateY(-72%);padding:0}
@media(max-width:759px){header{padding:0}.wordmark{font-size:clamp(36px,8.5vw,56px)}}

/* Crisp lettering and one luminous point at the neck. */
.wordmark{text-shadow:0 2px 7px rgba(0,0,0,.95)}
.wordmark .brand-name,.wordmark .brand-domain{color:#edf0f2;font-weight:500}
.wordmark .brand-name{right:calc(50% + .18em)}
.wordmark .brand-domain{left:calc(50% + .18em)}
.wordmark .brand-dot{color:#fff;font-weight:600;text-shadow:0 0 5px rgba(235,245,255,.8),0 0 13px rgba(185,215,239,.45),0 0 28px rgba(185,215,239,.16)}

/* A moving light mask reveals only a small portion of the glass. */
.glass-shell{opacity:.85}

/* Cinematic scale, controlled color, and a luminous focal point. */
.hero{background:radial-gradient(ellipse 22% 8% at 50% 50%,rgba(149,188,218,.075),transparent 75%),radial-gradient(ellipse 42% 32% at 50% 108%,rgba(147,39,25,.09),transparent 78%),radial-gradient(ellipse 32% 38% at 48% -8%,rgba(69,48,120,.055),transparent 78%),radial-gradient(ellipse at 24% 28%,rgba(112,139,159,.025),transparent 55%),#030405}
.hero::after{background:radial-gradient(ellipse at 50% 50%,transparent 20%,rgba(0,0,0,.52) 100%)}
.wordmark{font-size:clamp(40px,6.7vw,80px);letter-spacing:-.045em}
.wordmark .brand-name,.wordmark .brand-domain{text-shadow:0 2px 12px #000,0 0 25px rgba(216,234,247,.16)}
.wordmark .brand-dot{text-shadow:0 0 6px rgba(245,250,255,.95),0 0 20px rgba(185,215,239,.6),0 0 55px rgba(185,215,239,.25)}
.dna-outline{opacity:.24}
.spores{opacity:.8}
@media(max-width:759px){.wordmark{font-size:clamp(36px,8.5vw,56px)}}