:root{--navy: #344a54;--pink: #c8657a;--yellow: #fcf0a9;--blue: #a6c8d3;--blue-deep: #708f9c;--cream: #f3ecdb;--cream-text: #f8f4ea;--slate: #678f9b;--ink: #2e3446;--display: "Unbounded", system-ui, sans-serif;--body: "Familjen Grotesk", system-ui, sans-serif;--px: min(calc(100vw / 1440), calc(100vh / 953))}@font-face{font-family:Subno-type;src:url(/projects/subno-type/subno-type.ttf) format("truetype");font-display:swap}@font-face{font-family:Roboto Mono;src:url(/projects/logo-design/Roboto_Mono/RobotoMono-VariableFont_wght.ttf) format("truetype");font-display:swap}@font-face{font-family:Roboto Slab;src:url(/projects/logo-design/Roboto_Mono,Roboto_Slab/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf) format("truetype");font-display:swap}*,*:before,*:after{box-sizing:border-box}html,body{margin:0}body{font-family:var(--body);color:var(--navy);background:#c0e6ee}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,.dot:focus-visible{outline:3px solid var(--navy);outline-offset:3px}ul,ol{list-style:none;margin:0;padding:0}img{display:block;max-width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.landscape{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}.landscape svg{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.landscape .clouds{bottom:auto;height:45%;pointer-events:none}.cloud{animation:drift var(--dur) var(--delay) ease-in-out infinite alternate}@keyframes drift{0%{transform:translate(var(--from))}to{transform:translate(var(--to))}}.hills{pointer-events:auto}.blade{transform-box:fill-box;transform-origin:bottom center}.wiggle{animation:wiggling 2s ease-in-out}@keyframes wiggling{25%{transform:rotate(10deg)}50%{transform:rotate(-15deg)}75%{transform:rotate(8deg)}to{transform:rotate(0)}}.stage{position:relative;z-index:1;min-height:100vh;pointer-events:none}.stage .window,.stage .art-tile,.stage .project-page,.stage .logo-page{pointer-events:auto}.home{min-height:100vh}.home-title{position:fixed;top:calc(54 * var(--px));left:calc(75 * var(--px));width:calc(409 * var(--px));aspect-ratio:409 / 206;margin:0}.home-bottom{position:fixed;bottom:calc(148 * var(--px));left:calc(22 * var(--px));width:calc(903 * var(--px));aspect-ratio:903 / 425}.home-nav{position:fixed;top:calc(85 * var(--px));right:calc(127 * var(--px));width:calc(160 * var(--px));aspect-ratio:160 / 699}.home svg{display:block;width:100%;height:100%;overflow:visible}.art{position:absolute;margin:0}.art-avatar{object-fit:contain}.art-tile{display:block;transition:transform .2s}.art-tile:hover,.art-tile:focus-visible{transform:translateY(-6px) scale(1.04)}.window{--window-height: min(80vh, calc((100vw - 2rem) / 1.55));display:flex;flex-direction:column;height:var(--window-height);width:calc(var(--window-height) * 1.55);margin:calc((100vh - var(--window-height)) / 2) auto;font-size:calc(var(--window-height) / 44);background:#fff;border-radius:2.25em;overflow:hidden;box-shadow:0 14px 40px #344a5459}.window-body{flex:1;min-height:0;overflow:auto;padding-bottom:2em}.titlebar{flex:none;height:4.25em;background:#dcdcdc;display:flex;align-items:center;gap:.9em;padding-left:1.75em}.dot{width:1.5em;height:1.5em;border-radius:50%;display:block}.dot-red{background:#ec6a5e;transition:transform .2s}.dot-red:hover{transform:scale(1.25)}.dot-yellow{background:#f4c84f}.dot-green{background:#6fcf3d}.titlebar-path{margin-left:1em;font-weight:600;font-size:1.2em;color:var(--cream-text)}.titlebar-path:hover{text-decoration:underline}.page-header{display:flex;justify-content:space-between;align-items:center;padding:1.5em 2.75em .5em}.pill{margin:0;padding:.3em 1.1em;border-radius:999px;background:var(--blue);color:#fff;box-shadow:0 8px 18px #00000026;font:800 2.75em var(--display)}.home-link{color:var(--pink);display:block}.home-link svg{width:3.25em;height:3.25em}.bubble{margin:0;padding:1.1em 1.4em;border-radius:1.5em;line-height:1.5;font-weight:500}.bubble-yellow{background:var(--yellow);font-size:1.15em}.bubble a{color:var(--pink)}.not-found{margin:2em 2.75em}.project-shelf{position:relative;margin:1.5em 2.75em 0;border:3px solid #f3f3f3;border-radius:1.75em}.project-scroller{--gap: 2em;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--gap)) / 3);gap:var(--gap);padding:2.5em 1.5em;scroll-padding:0 1.5em;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth}.project-scroller li{scroll-snap-align:start}.project-card{display:flex;flex-direction:column;align-items:center;gap:1.5em}.project-thumb{width:100%;aspect-ratio:1;border-radius:1.5em;background:var(--blue-deep);overflow:hidden}.project-thumb img{width:100%;height:100%;object-fit:contain}.project-image{transition:transform .25s ease}.project-image:hover,.project-image:focus-visible{transform:scale(1.07) rotate(-3deg)}.project-name{font:800 1.5em var(--display);color:var(--blue);min-height:1.3em;text-align:center}.shelf-arrow{position:absolute;top:40%;width:2.5em;height:2.5em;border:0;border-radius:50%;background:var(--pink);color:#fff;font-size:1.2em;cursor:pointer}.shelf-arrow:hover{filter:brightness(1.1)}.shelf-prev{left:-1.25em}.shelf-next{right:-1.25em}.about-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5em;align-items:center;padding:1em 2.75em}.about-col{display:flex;flex-direction:column;gap:1.25em}.bubble-indent{margin-left:2em}.bird{align-self:flex-end;width:8em}.phone{width:13em;aspect-ratio:208 / 390;border-radius:2.25em;background:#adadad;padding:.5em}.phone-screen{width:100%;height:100%;border-radius:1.8em;overflow:hidden;background:#cfe0e6;display:flex;align-items:center;justify-content:center;font-weight:600;text-align:center}.phone-screen img{width:100%;height:100%;object-fit:cover}.marquee{overflow:hidden;white-space:nowrap;margin-top:1.5em}.marquee-track{display:flex;width:max-content;font:800 1.9em var(--display);color:var(--pink);animation:marq 28s linear infinite;will-change:transform}.marquee-track span{padding-right:.3em}@keyframes marq{0%{transform:translate(0)}to{transform:translate(-50%)}}.window-chat .window-body{display:flex;flex-direction:column;padding-bottom:0}.chat-header{flex:none;display:flex;align-items:center;justify-content:space-between;height:5em;padding:0 2.75em;background:var(--blue)}.chat-header h1{margin:0 auto 0 1em;font:800 2.2em var(--display);color:#5f8392}.chat-avatar{align-self:flex-start;margin-top:.4em}.chat{flex:1;display:flex;flex-direction:column;gap:1.25em;padding:3.25em 3em 2em}.msg{align-self:flex-start;max-width:90%;padding:.7em 1.2em;border-radius:1.5em;background:#dcdcdc;color:#4a5568;font-size:1.6em;font-weight:500;opacity:0;transform:translateY(40px);animation:up .5s var(--delay) ease-out forwards;overflow-wrap:anywhere}.msg-me{align-self:flex-end;background:var(--pink);color:#fff}.msg a{text-decoration:underline;color:var(--blue-deep)}@keyframes up{to{opacity:1;transform:none}}.chat-input{flex:none;display:flex;align-items:center;gap:1em;padding:1em 2em;border-top:2px solid #eee}.chat-field{flex:1;padding:.8em 1.4em;border-radius:999px;background:#f1f1f1;color:#9a9a9a;font-size:1.3em}.chat-send{flex:none;display:flex;align-items:center;justify-content:center;width:3.2em;height:3.2em;border-radius:50%;background:var(--pink)}.project-page{min-height:100vh;padding:1px 0;background:var(--cream)}.window-project{height:auto;width:min(860px,calc(100% - 2rem));margin:3rem auto;font-size:16px;background:var(--slate);color:var(--cream-text)}.window-project .window-body{overflow:visible;padding-bottom:1.5em}.window-project .titlebar{background:#8ab4c0}.project-header{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:2em clamp(1.25em,5vw,3.5em) 1em}.project-title img{width:min(480px,100%)}.project-title-text{margin:0;font:800 clamp(2rem,6vw,3.5rem) var(--display);color:#fdd94a}.project-body{position:relative;display:flex;flex-direction:column;gap:1.75em;padding:1em clamp(1.25em,5vw,3.5em)}.project-body>:not(.decoration){position:relative;z-index:1}.decoration{position:absolute;z-index:0;pointer-events:none}.block-text{margin:0;font-size:1.15em;line-height:1.7;letter-spacing:.02em;text-align:justify}.drop-cap:first-letter{float:left;margin:.05em .15em 0 0;font:800 5.2em/.8 var(--display)}.block-image{width:100%;border-radius:12px}.block-image-text{display:grid;grid-template-columns:1fr 1fr;gap:1.75em;align-items:center}.block-image-text img{width:100%;border-radius:12px}.image-right>:first-child{order:2}.block-image[src$=".svg"]{align-self:center}.image-ph{min-height:180px;width:100%;display:flex;align-items:center;justify-content:center;padding:1em;border-radius:12px;font-weight:600;text-align:center;overflow-wrap:anywhere}.project-image{padding:1.5em}.block-wave{position:relative;height:21px;margin:1em 0}.block-wave:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:url(/images/wave.svg) repeat-x left center / auto 21px}.block-wave.has-submarine{margin-top:5em}.submarine{--width: 140px;position:absolute;z-index:0;bottom:-10px;width:var(--width);left:calc(var(--progress) * (100% - var(--width)));transition:left .1s linear}.block-pdf{display:flex;flex-direction:column;gap:.5em}.block-pdf iframe{width:100%;height:70vh;border:0;border-radius:12px;background:#fff}.block-pdf a{color:#fdd94a;text-decoration:underline;align-self:flex-end}.block-video{width:100%;border-radius:12px;background:var(--ink)}.block-embed{width:240px;height:240px;border:0;align-self:center}.block-youtube{width:100%;aspect-ratio:16 / 9;height:auto;border:0;border-radius:12px;background:var(--ink)}.font-tester{display:flex;flex-direction:column;gap:1em;padding:1.5em;border-radius:12px;background:var(--ink)}.font-tester h2{margin:0;font:800 1.1em var(--display);letter-spacing:.04em}.font-tester textarea{width:100%;min-height:4em;padding:.5em .6em;border:0;border-radius:8px;resize:vertical;background:#f7f8fc;color:#4a5468;font-family:Subno-type,monospace;line-height:1.2}.font-tester label{display:flex;align-items:center;gap:1em;font-weight:600}.font-tester input[type=range]{flex:1;accent-color:#fdd94a}.custom-button{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:.5em 1.2em;border-radius:999px;background:#ff877e;color:#fff;font-weight:600;font-size:1.1em;line-height:1;text-decoration:none;transition:background .2s}.custom-button:hover{background:#f2665c}.custom-button:focus-visible{outline:2px solid #ff877e;outline-offset:2px}.block-popup{display:flex;justify-content:center}.popup-preview{position:relative;display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:none}.popup-preview img,.popup-preview .image-ph{display:block;width:100%;transition:transform .3s ease}.popup-preview:hover img{transform:scale(1.02)}.popup-open{position:absolute;left:50%;bottom:8%;transform:translate(-50%);background:#fdd94a;color:var(--ink);font:inherit;font-weight:700;padding:.5em 1.2em;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px #0003}.popup-preview:hover .popup-open,.popup-preview:focus-visible .popup-open{background:#ff877e;color:#fff}.popup-dialog{width:min(95vw,1600px);height:min(90vh,900px);padding:2.5em 1em 1em;border:0;border-radius:16px;background:#fff;overflow:hidden}.popup-dialog::backdrop{background:#0009}.popup-dialog iframe{width:100%;height:100%;border:0;display:block}.popup-close{position:absolute;top:.3em;right:.5em;border:0;background:none;font-size:1.8em;line-height:1;color:var(--ink);cursor:pointer}.anchor-link{display:block;width:fit-content;margin:1em clamp(1.25em,5vw,3.5em) 0 auto;transition:transform .2s}.anchor-link:hover{transform:rotate(-15deg)}.logo-page{min-height:100vh;padding:2rem 1rem 4rem;background:#cfe9fb;color:#1f2a33;font-size:clamp(14px,1.6vw,18px)}.logo-page>*{max-width:900px;margin-left:auto;margin-right:auto}.logo-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5em}.logo-back{font-weight:600;color:#2f5a7a}.logo-page>.app-window{margin-bottom:3em}.logo-page p{line-height:1.5}.app-window{border:1.5px solid #9a9a9a;border-radius:10px;background:#fff;box-shadow:10px 10px #00000012;overflow:hidden}.app-bar{display:flex;align-items:center;gap:.6em;padding:.4em 1em;border-bottom:1.5px solid #9a9a9a;background:#dcdcdc;color:#555}.app-bar h2{flex:1;margin:0;font-size:1em;font-weight:500}.app-buttons{letter-spacing:.6em;font-weight:700}.app-body{padding:1.5em 2.5em}.app-blue .app-bar{background:#b5dcfa}.app-blue .app-body{background:#eef4ff;padding:1em}.app-dark{border-color:#555}.app-dark .app-bar{background:#747474;color:#fff;border-color:#555}.app-dark .app-body{background:#2b2c30;color:#fff}.logo-title{margin:.3em 0;font:800 2.8em var(--display);color:#2f5a7a;text-shadow:4px 4px 0 #b9b9b9}.logo-subtitle{display:inline-block;margin:0 0 1em;padding:.3em .9em;border-radius:999px;background:#c3d4de;color:#2f5a7a;font-weight:700;font-size:1.2em}.dashes{height:6px;margin:1.5em 0;background:repeating-linear-gradient(90deg,#a9d6fb 0 56px,transparent 56px 66px);border-radius:4px}.brainstorm{position:relative;margin:2em 0 2em 12%}.colour-callout{position:absolute;left:-12%;bottom:1em;z-index:1;display:flex;gap:.5em;padding:.8em 1em;border:2px solid #9a9a9a;background:#fff}.colour-callout span{width:.9em;height:2em;border-radius:999px}.mind-map{display:block;width:100%;color:#222;font:13px ui-monospace,monospace}.mind-map text{fill:currentColor}.map-heading{font:700 18px var(--body)}.map-centre{font-size:18px;font-weight:700}.map-line{fill:none;stroke:currentColor;stroke-width:1.3}.before-after{display:flex;flex-direction:column}.before{width:70%}.after{width:70%;margin:-2.5em 0 0 30%;position:relative}.before .app-body,.after .app-body{display:flex;justify-content:center;padding:2em 1em;background:#fff}.before img{max-height:90px}.bizops-logo{display:flex;align-items:center;gap:.4em;font:600 2.6em Roboto Slab,serif}.bizops-logo b{font:700 1em Roboto Mono,serif;color:#f5c000}.bizops-logo img{width:2.2em}.bizops-dark{color:#f2f2f2}.bizops-dark img{filter:saturate(.55) brightness(.95)}.dark-row{display:flex;align-items:center;justify-content:space-around;gap:1em;flex-wrap:wrap}.dark-row img{max-height:90px;width:auto}.dark-row ul{list-style:disc;padding-left:1.2em}.dark-row .image-ph{width:50%;min-height:90px}.dark-divider{margin:1em 0;border-top:3px dashed #f2f2f2}.logo-credit{margin:2em 0 0;color:#666;font-size:.9em}.avatar img{width:100%;height:100%;object-fit:contain}.avatar-ph{border-radius:50%;background:#dcdcdc}@media(max-width:760px){.home{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem 1rem 2.5rem}.home-title,.home-nav{position:static}.home-bottom{position:relative;inset:auto}.home-title{width:min(88vw,420px)}.home-nav{display:flex;gap:.75rem;width:auto;aspect-ratio:auto}.home-nav .art{position:static;width:28vw!important;max-width:130px;height:auto!important}.home-bottom{width:min(92vw,420px)}.window:not(.window-project){--window-height: 80vh;width:calc(100vw - 2rem);font-size:14px}.about-grid{grid-template-columns:1fr}.phone{justify-self:center;order:-1}.bubble-indent{margin-left:0}.chat{padding:3em 1.25em 1.5em}.project-name{font-size:1.1em;overflow-wrap:anywhere}.block-text{text-align:left}.block-image-text{grid-template-columns:1fr}.image-right>:first-child{order:0}.submarine{--width: 90px}.app-body{padding:1em}.brainstorm{margin-left:0}.colour-callout{display:none}.before,.after{width:100%;margin:1em 0 0}}@media(prefers-reduced-motion:reduce){.cloud,.marquee-track,.wiggle{animation:none}.msg{animation-duration:.01s;animation-delay:0s}.art-tile,.project-card,.dot-red,.submarine{transition:none}.project-scroller{scroll-behavior:auto}}