[hidden]{display:none!important} @font-face{font-family:"Overused Grotesk";src:url("/assets/fonts/47bb32af4b04.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;} :root{--indigo:#181840;--sky:#88CCF8;--blue:#1F63D6;--paper:#FFFFFF;} html{background:var(--indigo);} body{margin:0;background:var(--indigo);color:#20244C;font-family:"Overused Grotesk",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;} a{color:var(--blue);}a:hover{color:var(--indigo);} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sky);outline-offset:3px;} .stage{background:var(--paper);margin:0 auto;} .page-root{margin:0 auto;} /* Desktop artboards are drawn at 1440px; narrower windows scale the whole page down to fit. */ .page.desktop .page-root{zoom:var(--fit,1);} .page.phone .page-root{width:100% !important;max-width:430px;margin:0 auto;} @media(min-width:701px){.page.phone .page-root{max-width:720px;}} .toast{position:fixed;left:50%;top:calc(20px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:60;background:#181840;color:#fff;padding:12px 18px;border-radius:10px;font-size:15px;box-shadow:0 6px 24px rgba(0,0,0,.25);} .menu{position:fixed;inset:0;z-index:40;background:#181840;display:flex;flex-direction:column;gap:6px;padding:calc(88px + env(safe-area-inset-top,0px)) 24px 24px;} .menu a{color:#fff;font-size:26px;font-weight:700;text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);} .menu button{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:24px;width:48px;height:48px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:inherit;font-size:22px;cursor:pointer;} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}} .site-bar{background:#181840;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10;} .site-bar .brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.06em;font-size:15px;} .site-bar nav{display:flex;align-items:center;gap:22px;} .site-bar nav a{color:#C9CFE6;text-decoration:none;font-size:15px;font-weight:500;} .site-bar nav a:hover{color:#fff;} .site-bar .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer;} @media(max-width:1024px){.site-bar nav{display:none;}.site-bar .burger{display:flex;}} /* ---- Motion ------------------------------------------------------------- None of this applies until motion.js puts .m-ready on and tags the elements, so with JavaScript off or blocked the page renders exactly as it did before: nothing is hidden by CSS alone. Everything animates opacity and transform only, so no layout is ever recalculated mid-scroll. */ .m-ready .m-el{opacity:0;transform:translateY(18px);will-change:opacity,transform;} .m-ready .m-el.m-in{opacity:1;transform:none; transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);} .m-ready .m-el.m-in.m-done{will-change:auto;} /* the first screen leans in a little further and a little slower */ .m-ready .m-hero{opacity:0;transform:translateY(24px);} .m-ready .m-hero.m-in{opacity:1;transform:none; transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);} /* cards lift on hover; the transition is only added once motion is on */ .m-ready .m-card{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;} .m-ready .m-card:hover{transform:translateY(-4px);} .m-ready .m-btn{transition:transform .2s ease,filter .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;} .m-ready .m-btn:hover{transform:translateY(-2px);} .m-ready .m-link{transition:opacity .2s ease,transform .2s ease;} .m-ready .m-link:hover{transform:translateX(3px);} /* a very slow drift behind the dark gradient bands */ .m-ready .m-drift{background-size:180% 180% !important;animation:m-drift 30s ease-in-out infinite;} @keyframes m-drift{0%,100%{background-position:88% 12%;}50%{background-position:58% 42%;}} /* someone who has asked their system for less motion gets none of it */ @media(prefers-reduced-motion:reduce){ .m-ready .m-el,.m-ready .m-hero{opacity:1 !important;transform:none !important;transition:none !important;} .m-ready .m-drift{animation:none !important;background-size:auto !important;} .m-ready .m-card:hover,.m-ready .m-btn:hover,.m-ready .m-link:hover{transform:none !important;} } /* ---- Depth and surface -------------------------------------------------- Everything here is gated behind .t-depth on , so the whole treatment comes off by removing one class. It changes surface only: no layout, no spacing, no type. The panels are matched on their inline border-radius and hairline border, which is how the prototype draws every card. */ /* light panels: a hairline reads as a drawn outline, a shadow reads as an object sitting on the page */ .t-depth [style*="border-radius: 14px"][style*="border: 1px solid"], .t-depth [style*="border-radius: 16px"][style*="border: 1px solid"], .t-depth [style*="border-radius: 20px"][style*="border: 1px solid"], .t-depth [style*="border-radius: 22px"][style*="border: 1px solid"], .t-depth [style*="border-radius: 12px"][style*="border: 1px solid"]{ border-color: rgba(24,24,64,.08) !important; box-shadow: 0 1px 2px rgba(24,24,64,.05), 0 12px 30px -14px rgba(24,24,64,.22); } .t-depth a [style*="border: 1px solid"], .t-depth a[style*="border: 1px solid"]{transition:box-shadow .3s ease, border-color .3s ease;} .t-depth a:hover [style*="border-radius: 14px"][style*="border: 1px solid"], .t-depth a:hover [style*="border-radius: 16px"][style*="border: 1px solid"]{ box-shadow: 0 2px 4px rgba(24,24,64,.06), 0 22px 44px -18px rgba(24,24,64,.30); border-color: rgba(31,99,214,.28) !important; } /* dark panels lift off their band rather than merging into it */ .t-depth [style*="border-radius: 14px"][style*="background: #20244C"], .t-depth [style*="border-radius: 14px"][style*="background: #243A82"], .t-depth [style*="border-radius: 14px"][style*="background: #2B3566"], .t-depth [style*="border-radius: 16px"][style*="background: #20244C"], .t-depth [style*="border-radius: 20px"][style*="background: #20244C"]{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -20px rgba(0,0,0,.55); } /* the dot grid from the wordmark, carried across the dark bands as texture */ .t-depth section[style*="background: #181840"], .t-depth section[style*="background: #20244C"], .t-depth footer[style*="background: #181840"]{ background-image: radial-gradient(circle at 18% 12%, rgba(136,204,248,.10), transparent 46%), radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px) !important; background-size: auto, 26px 26px !important; background-position: 0 0, 9px 9px !important; background-repeat: no-repeat, repeat !important; } /* The hero is left alone. Its gradient is declared inline, so anything that sets background-image here would wipe it out, and a pseudo-element with a negative z-index slides behind the section's own colour. It already has the gradient, the slow drift and, on most pages, its own decorative shapes. */ @media(prefers-reduced-motion:reduce){ .t-depth a:hover [style*="border: 1px solid"]{transition:none;} } /* the practice motifs sit in the corner of a card, clear of the reading path */ .t-depth article{position:relative;} .t-motif{position:absolute;top:28px;right:28px;line-height:0;opacity:.9;pointer-events:none;} @media(max-width:1024px){ .t-motif{top:20px;right:20px;transform:scale(.82);transform-origin:top right;} } /* a measure under each headline number */ .t-meter{margin-top:16px;width:64px;height:3px;border-radius:2px; background:rgba(255,255,255,.16);overflow:hidden;} .t-meter i{display:block;height:100%;border-radius:2px;background:#88CCF8; transition:width .9s cubic-bezier(.22,.61,.36,1);} .m-el:not(.m-in) .t-meter i,.m-hero:not(.m-in) .t-meter i{width:0 !important;} .t-meter--light{background:rgba(24,24,64,.12);} .t-meter--light i{background:#1F63D6;}