/* SnoXLi Labs: the "Current" direction. Fonts are self-hosted subsets, OFL. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/newsreader-300.30b18cd8.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/newsreader-300-italic.92b19211.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/worksans-400.b74e7721.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/worksans-600.4b3ee722.woff2) format('woff2')}

:root{--bg:#071916;--ink:#e5eed5;--muted:#a0b6a4;--line:#e5eed52a;--accent:#cbef95}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Work Sans',system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
p{margin:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:30px;font-size:13px}
.skip:focus{left:16px}

/* Header */
.top{height:100px;position:absolute;left:4vw;right:4vw;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:16px}
.brand img{width:125px;height:50px;filter:invert(1);animation:signature 7s ease-in-out infinite}
.brand span{font-size:9px;letter-spacing:2px;border-left:1px solid var(--line);padding-left:16px}
nav{display:flex;gap:35px;font-size:12px;align-items:center}
.nav-action{border:1px solid var(--line);padding:12px 23px;border-radius:30px}

/* Hero */
.hero{position:relative;min-height:780px;height:100svh;max-height:1150px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 68% 55%,#274a3566,transparent 60%)}
#scene{position:absolute;inset:0;z-index:1;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .6s}
#scene.is-live{opacity:1}
#scene:active{cursor:grabbing}
#scene canvas{width:100%;height:100%;display:block}
#fallback{position:absolute;inset:0;z-index:1;pointer-events:none}
#fallback img{position:absolute;height:64.8%;width:auto;left:70.5%;top:48.6%;transform:translate(-50%,-50%)}
.back-type{position:absolute;top:31%;left:3%;right:0;font-size:25vw;line-height:.9;letter-spacing:-.09em;font-weight:600;color:transparent;-webkit-text-stroke:1px #ffffff0c;white-space:nowrap;z-index:0;user-select:none;overflow:hidden}
.grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-copy{position:absolute;z-index:3;left:4vw;top:27%;pointer-events:none}
.hero-copy a{pointer-events:auto}
.eyebrow{font-size:9px;letter-spacing:2px;font-weight:400}
h1{font:300 10.2vw/.85 'Newsreader',Georgia,serif;letter-spacing:-.065em;margin:30px 0 28px}
h1 span{display:block;animation:type-in 1.1s cubic-bezier(.16,1,.3,1) both}
h1 span+span{animation-delay:.12s;font-style:italic}
.intro{font-size:14px;line-height:1.7;color:var(--muted);max-width:350px}
.hero-cta{font-size:12px;display:flex;align-items:center;justify-content:space-between;width:220px;border-bottom:1px solid var(--line);padding:20px 0 13px;margin-top:15px}
.hero-cta span{font-size:24px}
.object-label{position:absolute;z-index:2;right:4vw;bottom:140px;font-size:8px;letter-spacing:1.3px;display:grid;gap:9px;max-width:250px}
.object-label b{font-size:11px;letter-spacing:0;font-weight:400;color:var(--muted)}
.label-line{width:65px;height:1px;background:var(--accent);margin-bottom:4px}
.hero-foot{position:absolute;left:4vw;right:4vw;bottom:20px;border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:5;font-size:8px;letter-spacing:1px}
.motion{display:flex;align-items:center;gap:18px}
.live-state{display:flex;align-items:center;gap:8px}
.live-state i{width:5px;height:5px;background:#72bfa4;border-radius:100%;box-shadow:0 0 10px #72bfa466}
.is-paused .live-state i,.no-webgl .live-state i{background:var(--muted);box-shadow:none}
.hero-foot button{min-height:40px;background:none;border:0;color:var(--muted);font-size:10px;letter-spacing:0;padding:0 4px}
.hero-foot button:hover{color:var(--ink)}
.hero-foot button:disabled{opacity:.4;cursor:default}
.hero-foot #motion-toggle{border:1px solid var(--line);border-radius:30px;padding:0 16px;color:var(--ink)}
.no-webgl #replay,.no-webgl .hint{visibility:hidden}
/* Dragging is mouse only (src/main.js ignores touch), so touch screens do not get the hint. */
@media (hover:none),(pointer:coarse){.drag-hint{display:none}}

/* Work */
/* What we believe, high on the page: three commitments under the hero. */
.trust{padding:75px 4vw 85px;border-top:1px solid var(--line)}
.trust-intro{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin:50px 0 56px}
.trust h2{font-size:clamp(35px,4vw,64px);font-weight:400;line-height:1.1;letter-spacing:-.05em;margin:0;text-wrap:balance}
.trust h2 em{font-family:'Newsreader',Georgia,serif;font-weight:300;color:var(--accent)}
.trust-intro p{font-size:14px;line-height:1.7;color:var(--muted);max-width:340px}
.trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--line);padding-top:36px}
.trust-list li{display:grid;gap:14px;align-content:start}
.trust-num{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.trust-list h3{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.03em;line-height:1;margin:0}
.trust-list p{font-size:14px;line-height:1.7;max-width:34ch;text-wrap:pretty}
.trust-list a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){
  .trust{padding:60px max(16px,5vw) 64px}
  .trust-intro{flex-direction:column;align-items:flex-start;gap:20px;margin:36px 0 40px}
  .trust-list{grid-template-columns:1fr;gap:32px}
}
.work{padding:75px 4vw 85px;border-top:1px solid var(--line);position:relative}
.section-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.3px;color:var(--muted)}
.work-intro{display:flex;justify-content:space-between;gap:40px;align-items:center;margin:50px 0}
.work h2{font-size:clamp(35px,4vw,64px);font-weight:400;line-height:1.1;letter-spacing:-.05em;margin:0}
.work h2 em{font-family:'Newsreader',Georgia,serif;font-weight:300}
.work-intro p{font-size:12px;line-height:1.8;color:var(--muted)}
.project{display:grid;grid-template-columns:50px 1.2fr 1fr 40px;position:relative;align-items:center;gap:25px;min-height:230px;border-top:1px solid var(--line);overflow:hidden;transition:padding .5s,background .5s}
.project:hover{padding:0 25px;background:#cbef9508}
.project:last-child{border-bottom:1px solid var(--line)}
.project-num{font-size:10px;color:var(--muted)}
.project h3{font-size:60px;font-weight:400;letter-spacing:-3px;line-height:1;margin:16px 0}
.project .eyebrow{color:var(--muted);font-size:8px}
.project p{font-size:12px;line-height:1.7;color:var(--muted);position:relative;z-index:2}
.project .domain{display:block;width:fit-content;margin-top:10px;padding:4px 0;color:var(--ink);pointer-events:auto;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.project .domain:hover{text-decoration-color:var(--accent)}
/* A tile is a div: the product name is the link, stretched over the whole
   tile; the body text lets clicks through to it, except the domain link,
   which sits above and goes to the product itself. */
.project-link:after{content:"";position:absolute;inset:0;z-index:1}
.project-link:focus-visible{outline:none}
.project-link:focus-visible:after{outline:2px solid var(--accent);outline-offset:-2px}
.project p{pointer-events:none}
.project-arrow{font-size:30px}
/* Each tile has its own symbol: three overlapping outlines, one stroke weight
   and color, drawn inline in index.html. */
.project-mark{position:absolute;right:9%;height:100px;top:50px;opacity:.08;width:200px;pointer-events:none;transform:rotate(-20deg);overflow:visible}
.project-mark *{fill:none;stroke:var(--ink);stroke-width:8;stroke-linejoin:round;stroke-linecap:round}

/* About */
.about{padding:90px 4vw 35px;background:var(--ink);color:var(--bg)}
.about a:focus-visible{outline-color:var(--bg)}
.about h2{font-size:clamp(50px,7vw,100px);font-weight:400;line-height:.95;letter-spacing:-.065em;margin:35px 0}
.about p:not(.eyebrow){font-size:14px;line-height:1.7;max-width:480px}
.about .about-open{margin-top:14px}
/* What we believe: same type and measure as the About paragraph. */
.about-belief{margin-top:44px;padding-top:28px;border-top:1px solid #0719163b;max-width:480px}
.about-belief h3{font-size:22px;font-weight:400;letter-spacing:-.03em;line-height:1.25;margin:16px 0 12px}
.about-belief a,.about-open a{text-decoration:underline;text-underline-offset:3px}
.about-belief+.about-open{margin-top:28px}
.about .about-belief p:not(.eyebrow){max-width:440px}
.bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;border-top:1px solid #0719163b;margin-top:70px;padding-top:25px}
.bottom a{font-size:11px;letter-spacing:0}

/* Work with us */
.contact{padding:90px 4vw 80px;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(35px,4vw,64px);font-weight:400;line-height:1.1;letter-spacing:-.05em;margin:30px 0}
.contact-body{font-size:14px;line-height:1.7;color:var(--muted);max-width:440px}
.contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:36px;font-size:13px}
.contact-row>a{display:inline-flex;align-items:center;gap:10px;min-height:44px;border:1px solid var(--line);border-radius:30px;padding:0 24px}
.contact-row>a:hover{border-color:var(--accent)}
.contact-email a{text-decoration:underline;text-underline-offset:3px;user-select:text}

/* Footer */
.foot{font-size:10px;line-height:1.7;color:var(--muted);padding:20px 4vw;display:flex;justify-content:space-between;gap:20px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a{text-decoration:underline;text-underline-offset:3px}

/* Motion */
.is-paused *{animation-play-state:paused!important}
@keyframes type-in{from{opacity:0;transform:translateY(35px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes signature{0%,5%{clip-path:inset(0 100% 0 0)}35%,100%{clip-path:inset(0 0 0 0)}}

@media(max-width:850px){
  .top{height:75px;left:5vw;right:5vw}
  .brand img{width:95px}
  .brand span{display:none}
  nav{gap:15px;font-size:10px}
  nav a:nth-child(2){display:none}
  .nav-action{padding:9px 15px}
  .hero{height:850px;min-height:850px;max-height:none}
  .hero-copy{top:115px;left:5vw}
  .eyebrow{font-size:9px;letter-spacing:1.4px}
  h1{font-size:84px;line-height:.86;margin:22px 0}
  .intro{font-size:12px;line-height:1.6;max-width:260px}
  .hero-cta{font-size:10px;width:175px;padding:10px 0}
  .back-type{font-size:35vw;top:56%}
  #fallback img{height:42.1%;left:54.3%;top:68.9%}
  .object-label{display:none}
  .hero-foot{left:5vw;right:5vw;bottom:16px;flex-wrap:wrap;gap:4px 16px;font-size:9px}
  .hero-foot .hint{width:100%}
  .motion{gap:12px}
  .replay-text{display:none}
  #replay{min-width:40px;font-size:16px}
  .hero-foot button{font-size:9px}
  .work{padding:45px 5vw}
  .section-meta{font-size:9px}
  .work-intro{display:block;margin:35px 0}
  .work-intro h2{font-size:37px}
  .work-intro p{font-size:11px;margin-top:25px}
  .project{grid-template-columns:22px 1fr 25px;gap:12px;min-height:215px;padding:24px 0}
  .project:hover{padding:24px 0}
  .project h3{font-size:46px}
  .project p{grid-column:2;margin-top:-20px;font-size:11px}
  .project-arrow{grid-column:3;grid-row:1}
  .project-mark{right:-60px;top:70px}
  .project-num{align-self:start;margin-top:30px}
  .project .eyebrow{font-size:9px}
  .about{padding:55px 5vw 30px}
  .contact{padding:55px 5vw 50px}
  .contact h2{font-size:37px}
  .contact-body{font-size:12px}
  .about h2{font-size:60px}
  .about p:not(.eyebrow){font-size:12px}
  .bottom{font-size:9px;gap:20px;line-height:1.7}
  .bottom a{font-size:9px;white-space:nowrap}
  .foot{display:block;padding:20px 5vw}
  .foot-links{margin-top:8px}
}
/* Product pages: public/products/<slug>/index.html, written by src/products.mjs */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.product-page{padding:170px 4vw 110px}
.product-page article{max-width:1320px}
.product-page h1{font:inherit;letter-spacing:normal;margin:28px 0 0}
.product-page h1>span{display:block;animation:none}
/* The colon is for screen readers: inline, so the heading reads "Quorai: ..." with no space before it. */
.product-colon{display:inline;animation:none;font-size:0}
.product-name{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.04em;line-height:1}
.product-page h1 .product-headline{font:300 clamp(48px,6.4vw,96px)/.95 'Newsreader',Georgia,serif;letter-spacing:-.055em;max-width:13em;margin-top:18px;text-wrap:balance}
.product-id{display:flex;align-items:center;gap:28px;margin:52px 0}
.product-id:after{content:"";flex:1;height:1px;background:var(--line)}
.product-mark{display:block;height:64px;width:auto;color:var(--ink);flex:none}
.product-luce .product-mark{height:112px;margin:-24px -24px}
.product-parley .product-mark{height:52px}
.product-still{margin:0 0 56px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#0b221e}
.product-still img{display:block;width:100%;height:auto}
/* The customer link: the one filled button on the page. */
.product-cta{margin-top:36px}
.product-customer{display:inline-flex;align-items:center;gap:10px;min-height:44px;border-radius:30px;padding:0 24px;background:var(--accent);color:var(--bg);font-size:13px;font-weight:600;transition:background .3s}
.product-customer:hover{background:var(--ink)}
.product-film{margin:0 0 56px}
.product-film video{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#0b221e}
.product-film figcaption{margin-top:12px;font-size:12px;color:var(--muted)}
/* Film on the right of the words on wide screens, above them on narrow ones. */
.product-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:1000px){
  .product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start}
  .product-layout>.product-film,.product-layout>.product-still{grid-column:2;grid-row:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);margin:0}
  .product-layout>.product-copy{grid-column:1;grid-row:1}
}

.product-what p,.product-brag li,.product-why{text-wrap:pretty}
.product-what p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:26em}
.product-section{margin-top:72px;max-width:470px}
.product-section h2{font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.1;letter-spacing:-.04em;margin:0 0 22px}
.product-brag{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--line)}
.product-brag li{display:grid;grid-template-columns:50px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.6}
.product-num{font-size:10px;color:var(--muted);padding-top:6px}
.product-why{font-size:16px;line-height:1.6;color:var(--muted);max-width:29em}
.product-data-text{font-size:16px;line-height:1.6;max-width:29em;text-wrap:pretty}
.product-data-close{margin-top:12px;font-size:16px;line-height:1.6;color:var(--accent)}
.product-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:72px;font-size:13px}
.product-open{display:inline-flex;align-items:center;gap:10px;min-height:44px;border:1px solid var(--line);border-radius:30px;padding:0 24px;transition:background .3s}
.product-open:hover{background:#cbef9510}
.product-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--line)}
.product-back:hover,.product-open:hover{border-color:var(--accent)}
@media(max-width:850px){
  .product-page{padding:120px max(16px,5vw) 72px}
  .product-page h1{margin-top:22px}
  .product-name{font-size:26px}
  .product-page h1 .product-headline{font-size:44px;line-height:.98;margin-top:14px}
  .product-id{margin:36px 0;gap:20px}
  .product-mark{height:48px}
  .product-luce .product-mark{height:84px;margin:-18px -18px}
  .product-parley .product-mark{height:40px}
  .product-still,.product-film{margin-bottom:40px}
  .product-cta{margin-top:28px}
  .product-what p{font-size:16px}
  .product-section{margin-top:52px}
  .product-section h2{font-size:26px;margin-bottom:16px}
  .product-brag li{grid-template-columns:28px 1fr;gap:10px;padding:18px 0;font-size:15px}
  .product-why{font-size:15px}
  .product-data-text,.product-data-close{font-size:15px}
  .product-actions{margin-top:52px;gap:12px 24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.notfound{padding:18vh 5vw;min-height:100vh}
.notfound .intro a{text-decoration:underline;color:var(--ink)}
.notfound ul{padding-left:18px;margin:30px 0}
.notfound li{margin:8px 0}
.notfound li a{text-decoration:underline}