/* Alexander Knot adaptations of free Framer Marketplace components.
 * Glass surface / rim / reflection: Liquid Glass Buttons by Matt.
 * Image expansion / radius interpolation: Scroll Zoom Reveal by Elephanta Agency.
 * Used under Framer Community Terms §7.3.1; see COMPONENT_CREDITS.md.
 */

/* The link owns the hit area; only the glass face moves. */
.glass-link{--glass-x:50%;--glass-y:50%;--glass-rx:0deg;--glass-ry:0deg;--glass-shift:-24%;position:relative;isolation:isolate;display:inline-flex;align-items:stretch;padding:0;background:none!important;border:0;border-radius:999px;color:#fff;perspective:900px;transform:none!important;touch-action:manipulation}
.glass-face{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:54px;padding:16px 24px;border-radius:inherit;isolation:isolate;transform:rotateX(var(--glass-rx)) rotateY(var(--glass-ry));transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s;box-shadow:0 2px 4px #0002,0 10px 25px -12px #005abfa6}
.glass-surface{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(145deg,#4096e8ed,#1266b5f5 52%,#1877cbed);backdrop-filter:blur(10px) saturate(1.12);-webkit-backdrop-filter:blur(10px) saturate(1.12);box-shadow:inset 0 1px 1px #ffffff99,inset 0 -1px 1px #b9e0ff66,inset 1px 0 1px #ffffff55,inset -1px 0 1px #00183350}
.glass-surface::before{content:"";position:absolute;inset:-50%;background:linear-gradient(112deg,#fff0 27%,#ffffff05 32%,#ffffff42 42%,#ffffff66 46%,#ffffff18 53%,#fff0 61%);transform:translateX(var(--glass-shift));opacity:.22;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s}
.glass-surface::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 90px 48px at var(--glass-x) var(--glass-y),#ffffff40 0%,#ffffff15 36%,#fff0 80%);opacity:0;transition:opacity .35s}
.glass-rim{position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from 170deg at 50% 50%,#ffffffb0,#ffffff18 68deg,#00000016 112deg,#ffffff12 155deg,#ffffffc9 190deg,#ffffff08 256deg,#ffffffb0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass-label{position:relative;z-index:1;font-weight:500;white-space:nowrap;text-shadow:0 1px 2px #001b3e33}
.glass-arrow{width:18px;height:18px;flex-shrink:0;position:relative;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.glass-link:hover .glass-face{box-shadow:0 3px 6px #0002,0 14px 28px -12px #005abfa6}
.glass-link:hover .glass-surface::before{opacity:.45}
.glass-link:hover .glass-surface::after{opacity:1}
.glass-link:hover .glass-arrow{transform:translateX(3px)}
.glass-link:active .glass-face{transform:translateY(1px) scale(.975)}
.nav-links .glass-link{padding:0;min-height:40px}
.nav-links .glass-face{min-height:38px;padding:9px 18px;gap:8px;font-size:14px}
.nav-links .glass-arrow{width:14px;height:14px}
nav{transition:background .3s,box-shadow .3s}
nav.is-scrolled{background:rgba(255,255,255,.86);box-shadow:0 5px 28px #09152b08}

/* Lenis owns wheel easing; prevent a second browser easing curve. */
html.lenis{scroll-behavior:auto!important}

/* The introductory statement unfolds with the reader's scroll position. */
.intro{--intro-first:1;--intro-second:1;--intro-copy:1}
.intro h2 .intro-line{display:block;color:var(--ink)}
.intro h2 .intro-line:last-child{color:var(--blue)}
.intro.is-scroll-composed .eyebrow{opacity:calc(.7 + var(--intro-first) * .3);transform:translate3d(0,calc((1 - var(--intro-first)) * 14px),0)}
.intro.is-scroll-composed .intro-line:first-child{opacity:calc(.45 + var(--intro-first) * .55);transform:translate3d(0,calc((1 - var(--intro-first)) * 28px),0)}
.intro.is-scroll-composed .intro-line:last-child{opacity:calc(.35 + var(--intro-second) * .65);transform:translate3d(0,calc((1 - var(--intro-second)) * 34px),0)}
.intro.is-scroll-composed .lede{opacity:calc(.6 + var(--intro-copy) * .4);transform:translate3d(0,calc((1 - var(--intro-copy)) * 24px),0)}

/* A quiet entrance. All content is visible without JavaScript. */
.reveal-wait{opacity:0;transform:translate3d(0,22px,0)}
.reveal-in{animation:section-arrive .85s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--reveal-delay,0ms)}
@keyframes section-arrive{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.hero-art{animation:none;transform:translate3d(0,var(--hero-art-y,0px),0) scale(var(--hero-scale,1.015));transform-origin:66% 50%}
.hero-content{transform:translate3d(0,var(--hero-copy-y,0px),0);opacity:var(--hero-copy-opacity,1)}
.hero-content>*{animation:hero-arrive 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero-content h1{animation-delay:70ms}.hero-slogan{animation-delay:140ms!important}.hero-deck{animation-delay:190ms!important}.hero-content .glass-link{animation-delay:230ms}
@keyframes hero-arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}

/* Framer's expanding-image idea, shortened to normal document scrolling. */
.principle{padding-bottom:100px;overflow:hidden}
.research-photos{--photo-inset:0%;--photo-radius:28px;--photo-scale:1.04;--photo-y:0px;grid-template-columns:1.3fr 1fr;gap:20px;max-width:1400px;width:calc(100% - 64px);margin-top:64px;clip-path:inset(0 var(--photo-inset) round var(--photo-radius))}
.research-photos figure{position:relative;height:560px;border-radius:var(--photo-radius)}
.research-photos img,.research-photos figure:hover img{transform:translate3d(0,var(--photo-y),0) scale(var(--photo-scale));transition:none}
.research-photos .photo-tall img{transform:translate3d(0,calc(var(--photo-y) * -.6),0) scale(var(--photo-scale))}
.photo-wide::after,.photo-tall::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,#020c1b6b)}
.research-photos figcaption{position:absolute;left:32px;right:24px;bottom:28px;z-index:1;text-align:left;color:#fff;font-size:18px;font-weight:500;letter-spacing:-.25px;text-shadow:0 1px 12px #0009}
.research-photos figcaption span{display:block;font-size:11px;font-weight:500;letter-spacing:1.3px;text-transform:uppercase;color:#c6d7e7;margin-bottom:8px}
.steps li{transition:border-color .35s}.steps li:hover{border-color:#79a7d4}
.step-no{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:0;border-radius:50%;background:#edf4fb;color:#347fbd;font-size:13px}

/* A final, focused invitation in the same blue-and-amber light. */
.contact{position:relative;isolation:isolate;overflow:hidden;background:#020d1b;color:#f5f5f7;padding:120px 0}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 3% 110%,#153f714d,transparent 58%),radial-gradient(ellipse at 100% 105%,#ad79321a,transparent 48%)}
.contact .eyebrow{color:#95bade}.contact h2{font-size:clamp(40px,5.3vw,72px);letter-spacing:-2.5px}.contact h2 span{color:#9ec7eb}
.contact .lede{color:#b4c2d1;max-width:560px}.contact .location{color:#8ca1b6;margin-top:34px}
.contact .glass-surface{background:linear-gradient(145deg,#accce32b,#6b93b118 52%,#d4e9ff25);box-shadow:inset 0 1px 1px #ffffff80,inset 0 -1px 1px #d1e5f94d,inset 1px 0 1px #ffffff30}
.contact .glass-face{box-shadow:0 4px 20px #0003}.contact .glass-link:hover .glass-face{box-shadow:0 7px 30px #0005}

@media(max-width:1050px){.research-photos figure{height:480px}.research-photos figcaption{left:24px;font-size:17px}}
@media(max-width:700px){.glass-face{min-height:52px;padding:15px 22px;gap:12px}.nav-links .glass-face{min-height:38px;padding:9px 14px;font-size:13px}.nav-links .glass-arrow{display:none}.research-photos{width:calc(100% - 32px);grid-template-columns:1fr;gap:16px;margin-top:42px;clip-path:none}.research-photos figure{height:390px;border-radius:22px}.research-photos .photo-tall{height:330px}.research-photos figcaption{left:24px;bottom:24px}.photo-wide img{object-position:58% center}.photo-tall img{object-position:60% center}.principle{padding-bottom:64px}.contact{padding:88px 0}.contact h2{font-size:40px;letter-spacing:-1.5px}.contact .lede{font-size:18px}.step-no{width:34px;height:34px;font-size:12px}.steps li{gap:18px}}
@media(prefers-reduced-motion:reduce){.intro.is-scroll-composed .eyebrow,.intro.is-scroll-composed .intro-line,.intro.is-scroll-composed .lede{opacity:1;transform:none}.reveal-wait,.reveal-in{opacity:1;transform:none;animation:none}.hero-content{opacity:1;transform:none}.hero-content>*{opacity:1;translate:none;animation:none}.hero-art,.research-photos img,.research-photos figure:hover img,.research-photos .photo-tall img{transform:none}.research-photos{clip-path:none}.glass-face,.glass-link:active .glass-face,.glass-arrow{transform:none!important}.glass-surface::before,.glass-surface::after{display:none}}
@media(prefers-reduced-transparency:reduce){.glass-surface{backdrop-filter:none;-webkit-backdrop-filter:none;background:#1267b7}.contact .glass-surface{background:#263c53}nav,nav.is-scrolled{background:#fff}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-surface{background:#1267b7}.contact .glass-surface{background:#263c53}}
@media(forced-colors:active){.glass-link{border:2px solid ButtonText;color:ButtonText}.glass-surface,.glass-rim{display:none}.glass-label{text-shadow:none}.contact{background:Canvas;color:CanvasText}.contact h2 span,.contact .lede,.contact .location,.contact .eyebrow{color:CanvasText}}