/* Light moves through glass behind the page (light.js); the work sits on top of it.
   One typeface, Mona Sans. Its width axis carries the hierarchy: expanded and heavy for
   names and headings, normal for reading, slightly narrow for small details. */

@font-face{font-family:"Mona Sans";src:url('/assets/fonts/mona-sans-var.woff2') format('woff2');font-weight:200 900;font-stretch:75% 125%;font-display:swap}

:root{
  --night:#07080c;
  --ink:#f2f0ea;
  --mist:#a9adb8;
  --smoke:#868a95;
  --filament:#fff4e6;
  --edge:rgb(255 255 255 / .1);
  --edge-strong:rgb(255 255 255 / .22);
  --glass:linear-gradient(180deg,rgb(255 255 255 / .065),rgb(255 255 255 / .02)),rgb(9 10 14 / .5);
  --pad:clamp(20px,4.4vw,72px);
  --header:72px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:400 16px/1.6 "Mona Sans",system-ui,-apple-system,sans-serif;font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body.is-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a,button,input{-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{font-weight:700;line-height:1.05;letter-spacing:-.03em}
em{font-style:normal}
:focus-visible{outline:2px solid var(--filament);outline-offset:4px}
::selection{background:var(--filament);color:var(--night)}
[hidden]{display:none!important}
.shell{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--pad)}
.sr-only,.anchor-alias{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:16px;top:12px;z-index:300;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--night);font-weight:600;transform:translateY(-220%)}
.skip-link:focus{transform:none}

/* The light. A still glow stands in until it runs, and wherever WebGL2 is missing. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(48vmax 34vmax at 74% 26%,rgb(255 236 212 / .13),transparent 68%),radial-gradient(34vmax 24vmax at 62% 36%,rgb(160 185 255 / .07),transparent 70%);transition:opacity 1.6s ease}
.light-on body::before{opacity:0}
.light-canvas{position:fixed;inset:0 0 auto;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.light-on .light-canvas{opacity:1}

/* Glass edges: a bright upper rim fading down the sides. Static, so scrolling never repaints them. */
.catch{position:relative}
.catch::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(170deg,rgb(255 244 230 / .34),rgb(255 255 255 / .09) 34%,rgb(255 255 255 / .04) 70%,rgb(255 255 255 / .09));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

/* Shared type roles. */
.hero-title,.feature-name,.section-title,.about-title,.product-title-row h1,.not-found h1,.next-name{font-stretch:125%;font-weight:820;letter-spacing:-.05em;line-height:.9}
/* Text keeps a soft shadow in the ground colour, so light passing behind letters dims around them. */
.hero-title,.feature-name,.section-title,.about-title,.contact-mail,.product-title-row h1,.not-found h1,.next-name{text-shadow:0 0 .4em rgb(7 8 12 / .5)}
.hero-note,.feature-kicker,.feature-copy,.feature-meta,.projects-head p,.about-copy,.contact p,.product-idea,.product-facts,.legal p,.legal li,.not-found p,.next-summary,.section-label{text-shadow:0 0 18px rgb(7 8 12 / .85),0 0 4px rgb(7 8 12 / .6)}
/* No lonely last words. Browsers without text-wrap keep normal wrapping. */
.hero-note,.feature-copy,.projects-head p,.about-copy p,.contact p,.app-summary,.story-section p,.legal p,.not-found p,.next-summary{text-wrap:pretty}
.product-idea,.feature-kicker,.story-section h2,.support-band h2{text-wrap:balance}
.section-label{font-size:15px;font-weight:560;letter-spacing:-.005em;line-height:1.4;color:var(--mist)}
.eyebrow{font-size:14px;font-weight:520;line-height:1.5;color:var(--mist)}
.text-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding-bottom:5px;border-bottom:1px solid var(--edge-strong);font-size:15px;font-weight:540;transition:border-color .3s}
.text-link:hover{border-color:var(--filament)}
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid var(--edge-strong);background:rgb(255 255 255 / .04);font-size:15px;font-weight:560;line-height:1.2;transition:background .3s,color .3s,border-color .3s}
.pill:hover,.btn:hover{background:rgb(255 255 255 / .11);border-color:rgb(255 255 255 / .34)}
.product-actions .pill:first-child,.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--night)}
.product-actions .pill:first-child:hover,.btn-primary:hover{background:#fff;border-color:#fff}
/* Three stages: available in dark green, awaiting release in orange, in development in grey. */
.is-available{--stage-bg:rgb(34 96 64 / .42);--stage-edge:rgb(98 190 140 / .3);--stage-ink:#b2e6c6;--stage-dot:#5cc38d}
.is-awaiting{--stage-bg:rgb(140 74 20 / .4);--stage-edge:rgb(240 150 72 / .32);--stage-ink:#ffcf9e;--stage-dot:#f29a4c}
.is-developing{--stage-bg:rgb(110 116 130 / .22);--stage-edge:rgb(180 186 200 / .2);--stage-ink:#c2c6cf;--stage-dot:#979dab}
.stage{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:999px;border:1px solid var(--stage-edge);background:var(--stage-bg);color:var(--stage-ink);font-size:12px;font-weight:560;font-stretch:96%;line-height:1.2;white-space:nowrap}
.stage i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--stage-dot);box-shadow:0 0 8px var(--stage-dot)}

/* Header: transparent over the light, glass once the page moves. */
.site-header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;transition:background-color .5s var(--ease),border-color .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s}
.is-scrolled .site-header,.no-js .site-header{background:rgb(9 10 14 / .58);border-bottom-color:var(--edge);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.header-inner{height:var(--header);display:flex;align-items:center;gap:clamp(18px,3vw,44px)}
.brand{margin-right:auto;font-size:16px;font-weight:720;font-stretch:118%;letter-spacing:-.025em;white-space:nowrap}
.site-header nav{display:flex;gap:clamp(16px,2.4vw,34px);font-size:14px}
.site-header nav a{padding-block:10px;color:var(--mist);transition:color .25s}
.site-header nav a:hover{color:var(--ink)}
.header-mail{padding:8px 16px;border-radius:999px;border:1px solid var(--edge);background:rgb(255 255 255 / .04);font-size:14px;white-space:nowrap;transition:background .3s,border-color .3s}
.header-mail:hover{background:rgb(255 255 255 / .1);border-color:var(--edge-strong)}

/* Hero: the name, what this is, and one sentence. Expanded black against a narrow, light cut of the same face. */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--header) + 40px);padding-bottom:clamp(48px,9vh,110px)}
.hero-title{font-size:clamp(3.4rem,10.8vw,12.8rem)}
.hero-name{display:block;white-space:nowrap}
.hero-sub{display:block;margin-top:.14em;font-size:.44em;font-stretch:75%;font-weight:300;letter-spacing:-.015em;line-height:1;color:#dedbd4}
.hero-note{max-width:31em;margin-top:clamp(24px,3.2vw,40px);font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--mist)}

/* Icons: one rounded well for app icons and letter tiles alike. */
.icon-well{position:relative;display:block;flex:none;overflow:hidden;border-radius:23%;background:#111218;box-shadow:0 16px 32px -16px rgb(0 0 0 / .9),inset 0 0 0 1px rgb(255 255 255 / .07)}
.icon-well img{width:100%;height:100%;object-fit:cover}
.icon-well.is-padded img{transform:scale(1.22)}
.icon-well::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(158deg,rgb(255 255 255 / .16),transparent 34%);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08)}
.icon-well.catch::before{inset:0;z-index:1}
.letter-icon{display:grid;place-items:center;container-type:inline-size;background:radial-gradient(130% 130% at 24% 14%,color-mix(in oklab,var(--tile-color) 40%,#0e0f14),#0e0f14 70%);color:var(--tile-color)}
.letter-icon>span{font-size:36cqi;font-weight:850;font-stretch:125%;letter-spacing:-.07em;line-height:1;translate:-.03em 0}

/* Five featured projects, each on its own glass card. The light follows each image and takes its
   colour; behind the card it is seen through frost, which light.js draws (no backdrop blur). */
.work{padding-top:clamp(24px,5vh,64px)}
.feature{padding-block:clamp(12px,1.6vw,24px)}
.feature-card{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;column-gap:clamp(32px,5vw,100px);min-height:min(86vh,920px);padding:clamp(32px,5.4vw,96px);border-radius:40px;background:linear-gradient(180deg,rgb(255 255 255 / .035),rgb(255 255 255 / .012));box-shadow:0 70px 140px -90px rgb(0 0 0 / .95)}
.feature-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(172deg,rgb(255 246 234 / .26),rgb(255 255 255 / .07) 30%,rgb(255 255 255 / .03) 70%,rgb(255 255 255 / .07));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.8;transition:opacity .5s}
.feature-card:hover::before{opacity:1}
.feature.is-flipped .feature-card{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.feature.is-flipped .feature-text{order:2}
.feature-kicker{margin-bottom:clamp(14px,1.6vw,22px);font-size:clamp(16px,1.35vw,20px);color:var(--mist)}
/* Sized so the longest name (Wandfunke, about 6 em wide) always fits its column. */
.feature-name{margin-bottom:clamp(18px,2vw,28px);font-size:clamp(2.6rem,5.6vw,5.7rem)}
.feature-name a::after{content:"";position:absolute;inset:0;z-index:3}
.feature-name a:focus-visible{outline:none}
.feature-card:has(a:focus-visible){outline:2px solid var(--filament);outline-offset:4px}
.feature-copy{max-width:30em;font-size:clamp(16px,1.2vw,18px);color:var(--mist)}
.feature-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:22px;font-size:14px;color:var(--smoke)}
.feature-cta{display:inline-flex;margin-top:34px;padding:12px 22px;border-radius:999px;border:1px solid var(--edge-strong);background:rgb(255 255 255 / .04);font-size:15px;font-weight:560;transition:background .35s,color .35s,border-color .35s}
.feature:hover .feature-cta{background:var(--ink);border-color:var(--ink);color:var(--night)}
.feature-media{position:relative;display:grid;place-items:center}
.window{width:100%;height:auto;border-radius:clamp(10px,1vw,16px);border:1px solid var(--edge);box-shadow:0 60px 120px -50px rgb(0 0 0 / .95),0 0 0 1px rgb(0 0 0 / .35);transition:transform 1s var(--ease)}
.feature:hover .window{transform:translateY(-8px)}
.media-note{position:absolute;left:0;top:calc(100% + 14px);font-size:13px;color:var(--smoke)}
.is-phones{display:flex;justify-content:center;gap:clamp(14px,2.4vw,36px)}
.phone{width:min(44%,290px);height:auto;border-radius:clamp(20px,2.4vw,38px);border:1px solid var(--edge-strong);box-shadow:0 50px 100px -40px rgb(0 0 0 / .95);transition:transform 1s var(--ease)}
.phone:first-child{transform:translateY(-5%) rotate(-4deg)}
.phone:last-child{transform:translateY(5%) rotate(4deg)}
.feature:hover .phone:first-child{transform:translateY(-7%) rotate(-5deg)}
.feature:hover .phone:last-child{transform:translateY(3%) rotate(5deg)}
.feature-icon{width:clamp(190px,24vw,350px);height:clamp(190px,24vw,350px);box-shadow:0 70px 120px -50px color-mix(in oklab,var(--project-color) 55%,transparent),0 30px 60px -30px rgb(0 0 0 / .9);transition:transform 1s var(--ease)}
.feature:hover .feature-icon{transform:translateY(-8px) rotate(-3deg)}

/* Every project as a glass tile. */
.projects{padding-top:clamp(100px,16vh,180px);padding-bottom:clamp(90px,14vh,160px)}
.projects-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27em);align-items:end;gap:24px 40px;margin-bottom:clamp(28px,4vw,48px)}
.section-title{font-size:clamp(2.5rem,6vw,7rem)}
.projects-head p{max-width:36em;padding-bottom:.35em;font-size:clamp(16px,1.2vw,18px);color:var(--mist)}
.projects-controls{position:sticky;top:calc(var(--header) + 12px);z-index:20;display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin-bottom:16px;padding:6px;border-radius:999px;border:1px solid transparent;background:linear-gradient(180deg,rgb(24 25 32 / .97),rgb(15 16 21 / .97));box-shadow:0 18px 40px -18px rgb(0 0 0 / .8)}
.filters{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;min-height:40px;padding:8px 16px;border-radius:999px;font-size:14px;color:var(--mist);transition:color .2s,background .2s}
.filters button:hover{color:var(--ink);background:rgb(255 255 255 / .07)}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--night)}
.search{flex:none}
.search input{width:clamp(130px,15vw,220px);min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--edge);background:rgb(0 0 0 / .22);font-size:14px;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--smoke)}
.search input:focus{border-color:var(--edge-strong)}
.projects-status{margin:0 0 18px 8px;font-size:13px;color:var(--smoke)}
.app-group+.app-group{margin-top:clamp(40px,5vw,72px)}
.group-title{display:flex;align-items:center;gap:10px;margin:0 0 16px 6px;font-size:clamp(18px,1.5vw,22px);font-weight:680;font-stretch:110%;letter-spacing:-.02em;text-shadow:0 0 18px rgb(7 8 12 / .85)}
.group-title i{width:9px;height:9px;border-radius:50%;background:var(--stage-dot);box-shadow:0 0 12px var(--stage-dot)}
.group-count{font-size:14px;font-weight:500;font-stretch:100%;color:var(--smoke)}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(10px,1.1vw,16px);margin:0;padding:0;list-style:none}
.app{display:flex}
.app-link{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:18px 18px 16px;border-radius:26px;border:1px solid transparent;background:var(--glass);transition:transform .55s var(--ease),background .4s}
.app-link:hover{transform:translateY(-4px);background:linear-gradient(180deg,rgb(255 255 255 / .11),rgb(255 255 255 / .04)),rgb(9 10 14 / .5)}
.app-icon{width:68px;height:68px;margin-bottom:18px;transition:transform .7s var(--ease)}
.app-link:hover .app-icon{transform:scale(1.07) rotate(-4deg)}
.app-name{font-size:18px;font-weight:680;font-stretch:112%;letter-spacing:-.02em;line-height:1.2}
.app-summary{margin-top:6px;font-size:14px;line-height:1.45;color:var(--mist)}
.app-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:auto;padding-top:18px;font-size:12.5px;font-stretch:94%;color:var(--smoke)}
.empty-result{padding:40px 8px;color:var(--mist)}

/* About and contact. */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(36px,7vw,130px);align-items:start;padding-block:clamp(100px,18vh,200px)}
.about-title{font-size:clamp(3.4rem,8.4vw,10rem);white-space:nowrap}
.about-place{margin-top:20px;font-size:14px;color:var(--smoke)}
.about-copy{padding-top:clamp(6px,1.4vw,24px)}
.about-copy p{max-width:33em;font-size:17px;color:var(--mist)}
.about-copy p:first-child{margin-bottom:26px;font-size:clamp(21px,2.1vw,30px);line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.about-copy p+p{margin-top:14px}
.contact{padding-block:clamp(110px,20vh,220px) clamp(90px,14vh,160px)}
.contact p{max-width:30em;margin-top:12px;font-size:clamp(16px,1.3vw,19px);color:var(--mist)}
.contact-mail{display:inline-block;margin-top:clamp(22px,3vw,40px);padding-bottom:.06em;font-size:clamp(1.9rem,6.6vw,7.6rem);font-weight:780;font-stretch:110%;letter-spacing:-.045em;line-height:1.05;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .8s var(--ease)}
.contact-mail:hover{background-size:100% 2px}

.site-footer{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 32px;padding-block:28px 40px;border-top:1px solid var(--edge);font-size:13px;color:var(--smoke)}
.footer-name{font-size:15px;font-weight:720;font-stretch:118%;letter-spacing:-.02em;color:var(--ink)}
.footer-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px}
.footer-row nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.site-footer button{font-size:13px;color:inherit}
.site-footer a:hover,.site-footer button:hover{color:var(--ink)}

/* Product pages: the same light, tinted with the product's colour. */
.product-hero{padding-top:calc(var(--header) + 40px)}
.breadcrumb{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(32px,6vh,64px);padding:8px 16px 8px 14px;border-radius:999px;border:1px solid var(--edge);background:rgb(255 255 255 / .03);font-size:14px;color:var(--mist);transition:color .3s,border-color .3s}
.breadcrumb::before{content:"";width:7px;height:7px;border-left:1.5px solid;border-bottom:1.5px solid;rotate:45deg;margin-left:2px}
.breadcrumb:hover{color:var(--ink);border-color:var(--edge-strong)}
.product-title-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.product-title-row h1{min-width:0;font-size:clamp(2.8rem,8.4vw,10rem);overflow-wrap:anywhere}
.product-icon{width:clamp(76px,9vw,136px);height:clamp(76px,9vw,136px)}
.product-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px clamp(32px,8vw,140px);align-items:end;margin-top:clamp(24px,4vh,44px)}
.product-idea{font-size:clamp(22px,2.5vw,38px);font-stretch:104%;line-height:1.22;letter-spacing:-.02em}
.product-actions{display:flex;flex-wrap:wrap;gap:10px}
.availability{font-size:14px}
.product-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(36px,6vh,64px);padding-top:20px;border-top:1px solid var(--edge)}
.product-facts dt{font-size:13px;color:var(--smoke)}
.product-facts dd{margin-top:4px;font-size:15px}
.product-stage{margin-top:clamp(36px,6vh,64px)}
.stage-inner{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(16px,5vw,80px);min-height:clamp(360px,54vw,760px);padding:clamp(28px,6vw,90px);border-radius:clamp(22px,3vw,40px);border:1px solid transparent;background:linear-gradient(180deg,color-mix(in oklab,var(--project-color) 12%,rgb(14 15 20 / .62)),rgb(10 11 15 / .74));overflow:hidden}
.stage-inner>.phone-shot,.stage-inner>.stage-secondary{width:auto;height:auto;max-width:40%;max-height:min(640px,72vh);border-radius:clamp(18px,2.4vw,34px);box-shadow:0 50px 100px -40px rgb(0 0 0 / .95)}
.stage-inner>.phone-shot{rotate:-3deg}
.stage-inner>.stage-secondary{rotate:3deg;translate:0 4%}
.stage-inner>.landscape-shot{width:auto;max-width:92%;max-height:640px;border-radius:12px;box-shadow:0 50px 100px -40px rgb(0 0 0 / .95)}
.stage-inner>.art-shot{width:auto;max-width:44%;max-height:640px;border-radius:clamp(18px,2.4vw,34px);box-shadow:0 50px 100px -40px rgb(0 0 0 / .95)}
.visual-lullaloop .stage-inner>.landscape-shot{max-width:min(620px,92%)}
.stage-label{margin-top:14px;font-size:13px;color:var(--smoke)}
.icon-art{display:flex;flex-direction:column;align-items:center;gap:28px}
.art-icon{width:clamp(150px,20vw,280px);height:clamp(150px,20vw,280px)}
.icon-art>span:last-child{font-size:clamp(28px,4vw,56px);font-weight:800;font-stretch:125%;letter-spacing:-.05em;line-height:1}
.connection-art{position:absolute;inset:0;display:flex;align-items:center;padding-inline:14%;color:var(--ink)}
.diagram-label{position:absolute;top:24%;left:14%;font-size:13px;color:var(--mist)}
.connection-origin{display:grid;place-items:center;width:clamp(64px,8vw,110px);height:clamp(78px,10vw,130px);border:1.5px solid currentColor;border-radius:14px;font-size:clamp(44px,6vw,80px);font-weight:820;font-stretch:125%}
.connection-line{flex:1;display:flex;align-items:center;justify-content:space-evenly;height:1.5px;background:linear-gradient(90deg,currentColor,rgb(255 255 255 / .25))}
.connection-line i{width:7px;height:7px;border-radius:50%;background:var(--filament);box-shadow:0 0 12px var(--filament)}
.connection-gate{display:flex;align-items:center;gap:7px;height:clamp(90px,11vw,150px);margin-right:clamp(14px,2.4vw,30px)}
.connection-gate span{width:6px;height:100%;border-radius:3px;background:currentColor}
.connection-gate span:nth-child(2){height:80%}.connection-gate span:nth-child(3){height:60%}.connection-gate span:nth-child(4){height:40%}
.diagram-end{font-size:13px;line-height:1.5;color:var(--mist)}
.diagram-caption{position:absolute;left:14%;bottom:20%;font-size:clamp(20px,2.4vw,30px);font-weight:650;letter-spacing:-.02em}
.product-body{padding-top:clamp(40px,8vh,90px)}
.story-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:12px clamp(32px,7vw,120px);padding-block:clamp(36px,6vh,64px);border-top:1px solid var(--edge)}
.story-section h2{margin-bottom:16px;font-size:clamp(26px,3vw,44px);font-weight:720;font-stretch:112%;letter-spacing:-.035em;line-height:1.08}
.story-section p:not(.eyebrow),.story-section li{max-width:40em;font-size:17px;line-height:1.7;color:var(--mist)}
.story-section p+p{margin-top:14px}
.story-section ul,.story-section ol{padding-left:1.2em}
.product-body a:not(.pill):not(.text-link){text-decoration:underline;text-decoration-color:var(--edge-strong);text-underline-offset:4px}
.product-gallery{display:flex;justify-content:center;gap:clamp(16px,4vw,60px);padding-block:clamp(40px,8vh,90px)}
.product-gallery figure{max-width:30%}
.product-gallery img{border-radius:clamp(16px,2vw,30px);box-shadow:0 50px 100px -40px rgb(0 0 0 / .95)}
.support-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-block:clamp(40px,8vh,80px) 0;padding:clamp(24px,3vw,40px);border-radius:28px;border:1px solid transparent;background:var(--glass)}
.support-band h2{font-size:clamp(22px,2.4vw,34px);font-stretch:112%;letter-spacing:-.03em}
.support-band>div{display:flex;flex-wrap:wrap;gap:10px}
.next-project{display:block;padding-block:clamp(90px,16vh,180px)}
.next-name{display:block;margin-block:16px;font-size:clamp(2.8rem,8vw,9rem);transition:letter-spacing .8s var(--ease)}
.next-project:hover .next-name{letter-spacing:-.035em}
.next-summary{display:block;font-size:17px;color:var(--mist)}

/* Legal and support text. */
.legal{max-width:900px;padding-top:calc(var(--header) + 48px);padding-bottom:clamp(80px,12vh,140px)}
.legal h1{margin-bottom:22px;font-size:clamp(2rem,5.4vw,4.6rem);font-weight:800;font-stretch:118%;letter-spacing:-.045em;line-height:.98;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.legal h2{margin:46px 0 14px;font-size:clamp(21px,2vw,27px);font-weight:700;font-stretch:108%}
.legal h3{margin:28px 0 10px;font-size:19px;font-weight:650}
.legal p,.legal li,.legal address{font-size:16px;line-height:1.75;font-style:normal;color:var(--mist)}
.legal p+p{margin-top:14px}
.legal ul,.legal ol{padding-left:1.2em}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--edge-strong);text-underline-offset:3px}
.legal strong{font-weight:620;color:var(--ink)}
.legal .legal-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--smoke)}
.legal .legal-lang small{margin-left:10px;font-size:13px;font-weight:450;color:var(--smoke)}
.legal .kicker,.legal .updated{margin-bottom:16px;font-size:14px;color:var(--smoke)}
.legal table{width:100%;margin-block:16px;border-collapse:collapse;font-size:14px}
.legal td,.legal th{padding:10px 12px;border:1px solid var(--edge);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.legal code{font-size:.92em;overflow-wrap:anywhere}
.not-found{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--header) + 40px) 80px}
.not-found h1{margin-bottom:26px;font-size:clamp(3.2rem,11vw,12rem)}
.not-found p{max-width:30em;font-size:18px;color:var(--mist)}
.not-found .text-link{align-self:flex-start}

/* Consent keeps its own component styles; these map it onto the site's colours. */
.consent,.consent-modal,[data-theme=light] .consent,[data-theme=light] .consent-modal{--c-ink:var(--ink);--c-muted:var(--mist);--c-faint:var(--smoke);--c-link:var(--filament);--c-accent:var(--ink);--c-knob-on:var(--night)}
.consent .btn,.consent-modal .btn{min-height:40px;padding:9px 16px;font-size:13px}

@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.4s}
::view-transition-group(selected-product){animation-duration:.6s;animation-timing-function:var(--ease)}
::view-transition-old(selected-product),::view-transition-new(selected-product){height:100%;object-fit:contain}
.is-filtering::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease)}
::view-transition{pointer-events:none}

/* Entrance and scroll reveals. Without support, everything is simply in place. */
@media (prefers-reduced-motion:no-preference){
  .hero-name{animation:rise 1.2s var(--ease) both}
  .hero-sub{animation:rise 1.2s .12s var(--ease) both}
  .hero-note{animation:rise 1.2s .26s var(--ease) both}
  @supports (animation-timeline:view()){
    .feature-text{animation:reveal linear both;animation-timeline:view();animation-range:entry 5% cover 32%}
    .feature-media{animation:drift linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .product-gallery figure{animation:drift linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
}
@keyframes rise{from{opacity:0;translate:0 .4em}to{opacity:1;translate:0 0}}
@keyframes reveal{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes drift{from{opacity:0;translate:0 80px;scale:.95}to{opacity:1;translate:0 0;scale:1}}

@media (hover:none){
  .app-link:hover,.feature:hover .window,.feature:hover .feature-icon{transform:none}
  .app-link:hover .app-icon{transform:none}
}

@media (max-width:1100px){
  .feature-card,.feature.is-flipped .feature-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .projects-head{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--header:64px}
  .feature-card,.feature.is-flipped .feature-card{grid-template-columns:1fr;row-gap:40px;min-height:0;padding:40px 28px 44px;border-radius:30px}
  .feature.is-flipped .feature-text{order:0}
  .feature-name{font-size:clamp(2.2rem,12vw,5.4rem)}
  .feature-cta{margin-top:26px}
  .feature-icon{width:min(56vw,280px);height:min(56vw,280px)}
  .about{grid-template-columns:1fr;gap:28px}
  .product-intro{grid-template-columns:1fr}
  .product-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-section{grid-template-columns:1fr}
  .product-gallery figure{max-width:45%}
  .stage-inner>.phone-shot,.stage-inner>.stage-secondary,.stage-inner>.art-shot{max-width:44%}
}
@media (max-width:640px){
  .site-header nav a:first-child{display:none}
  .site-header nav{gap:18px;font-size:14px}
  .brand{font-size:15px}
  .header-mail{padding:7px 12px;font-size:13px}
  .hero-title{font-size:22vw}
  .hero-name>span{display:block}
  .hero-sub{margin-top:.2em;font-size:.5em}
  .projects-controls{flex-direction:column;align-items:stretch;width:100%;border-radius:24px;gap:6px}
  .search input{width:100%}
  .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-link{padding:14px 14px 13px;border-radius:22px}
  .app-icon{width:56px;height:56px;margin-bottom:14px}
  .app-name{font-size:16px}
  .app-summary{font-size:13px}
  .app-meta{font-size:12px;gap:2px 10px}
  .about-title{font-size:clamp(3rem,17vw,5rem)}
  .contact-mail{font-size:9.6vw}
  .product-title-row{align-items:flex-start}
  .product-title-row h1{font-size:clamp(2.4rem,12vw,4.4rem)}
  .product-icon{width:64px;height:64px}
  .stage-inner{min-height:0;padding:26px 18px}
  .connection-art{padding-inline:8%}
  .diagram-label,.diagram-caption{left:8%}
  .support-band{border-radius:22px}
}
@media (max-width:440px){
  .header-mail{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-new(*),::view-transition-old(*){animation:none!important}
}
.no-js .projects-controls,.no-js [data-consent-open]{display:none}
.is-scrolling .work,.is-scrolling .app-grid{pointer-events:none}