@font-face{font-family:Reckless;src:url('assets/reckless-light.woff2') format('woff2');font-weight:200 400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/jetbrains-mono.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:Areal;src:url('assets/areal-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Areal;src:url('assets/areal-medium.woff2') format('woff2');font-weight:500 700;font-display:swap}
:root{--paper:#f8f9f7;--ink:#0b1012;--line:rgba(11,16,18,.28);--pad:48px;--serif:Reckless,Georgia,serif;--sans:'Gothic A1',Arial,sans-serif;--mono:'JetBrains Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #8c72c8;outline-offset:7px}::selection{background:#d7d0ed;color:var(--ink)}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:200;letter-spacing:-.025em}p{line-height:1.48;letter-spacing:-.025em}.mono,.eyebrow{font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.6;text-transform:uppercase;letter-spacing:-.025em}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--ink);color:white;padding:14px}.skip-link:focus{top:15px}
.site-header{position:absolute;top:0;left:0;width:100%;padding:34px var(--pad);display:flex;justify-content:space-between;align-items:flex-start;z-index:20;color:var(--ink)}.wordmark{font:200 52px/.95 var(--serif);letter-spacing:-3px;transition:letter-spacing .5s}.wordmark:hover{letter-spacing:-1.8px}.site-header nav{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;grid-auto-flow:column;gap:2px 55px;padding-top:5px}.site-header nav a{font:400 13px/1.7 var(--mono);text-transform:uppercase;min-height:25px;position:relative;white-space:nowrap}.site-header nav a::after{content:'';position:absolute;bottom:1px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}.site-header nav a:hover::after,.site-header nav a:focus-visible::after{transform:scaleX(1)}.site-header nav a span{display:inline-block;margin-left:10px}
.colour-field{position:relative;isolation:isolate;overflow:hidden}.wash{position:absolute;inset:0;pointer-events:none;z-index:-1;transform:translate3d(calc(var(--mx,0px)*.5),calc(var(--my,0px)*.5),0);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}.wash i{display:block;position:absolute;border-radius:50%;filter:blur(54px);will-change:transform;animation:float 16s ease-in-out infinite alternate}.wash i:nth-child(2){animation-delay:-7s}.wash i:nth-child(3){animation-delay:-12s}.wash i:nth-child(4){animation-delay:-4s}@keyframes float{from{transform:translate3d(-10px,0,0) scale(.98) rotate(-8deg)}to{transform:translate3d(22px,-20px,0) scale(1.07) rotate(10deg)}}
.hero{min-height:790px;height:100svh;max-height:1000px;display:flex;align-items:center;justify-content:center;background:#fdfdfc}.hero-content{text-align:center;position:relative;z-index:2;padding:130px 24px 135px;transform:translateY(-2px)}.eyebrow{font-size:11px;letter-spacing:.035em;margin-bottom:30px}.hero h1{font-size:clamp(44px,4.65vw,72px);line-height:1.08;max-width:1120px}.hero-description{font-size:19px;line-height:1.42;margin:26px 0 34px;text-wrap:balance}.button{display:inline-flex;gap:29px;align-items:center;padding:14px 18px;background:var(--ink);color:#f9faf7;font:400 13px/1.3 var(--mono);text-transform:uppercase;position:relative;overflow:hidden;transition:background .4s,box-shadow .4s,transform .4s}.button:hover{background:#293134;box-shadow:0 12px 35px #aca1c54d;transform:translateY(-2px)}.button-arrow{font-size:18px;transition:transform .4s}.button:hover .button-arrow{transform:translate(3px,-3px)}.hero-bottom{position:absolute;bottom:30px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:24px;font-size:10px;z-index:2}.hero-bottom a{display:flex;gap:22px}.hero-bottom a span{font-size:17px;line-height:1;transition:transform .3s}.hero-bottom a:hover span{transform:translateY(5px)}.hero-wash i:nth-child(1){width:380px;height:320px;background:#cbc5e5;opacity:.676;left:7%;top:44%;border-radius:55% 45% 65% 35%;transform:rotate(-35deg)}.hero-wash i:nth-child(2){width:520px;height:360px;background:#d0e1d5;opacity:.676;right:1%;top:43%}.hero-wash i:nth-child(3){width:290px;height:230px;background:#f1d9cc;opacity:.442;left:41%;bottom:4%}.hero-wash i:nth-child(4){width:350px;height:180px;background:#cddff0;opacity:.52;left:24%;bottom:-9%}.ascii-field{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:1;mask-image:none}
.section{padding:88px var(--pad) 110px;scroll-margin-top:0}.section-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:66px}.section-label{display:flex;gap:5px;font:400 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:-.03em}.section-label>span{display:block;background:rgba(255,255,255,.6);padding:9px 8px}.section-label>span:first-child{padding-inline:9px}.statement{font-size:clamp(36px,3.85vw,60px);line-height:1.12;max-width:1340px}.dark{color:#f6f7f4;background:#0b1012;--line:rgba(245,247,244,.32)}.dark .section-label>span{background:rgba(255,255,255,.13)}.service-wash i:nth-child(1){height:450px;width:500px;background:#515a91;opacity:.15;left:-12%;top:42%}.service-wash i:nth-child(2){height:350px;width:480px;background:#4f776d;opacity:.10;right:-16%;bottom:-5%}figcaption{font:400 10px/1.45 var(--mono);text-transform:uppercase;display:flex;gap:25px;letter-spacing:-.02em;color:#b7c0c0;margin-top:23px}
.about{padding-bottom:120px}.about .statement{max-width:850px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;margin-top:82px}.studio-definition{padding-top:32px;display:flex;flex-direction:column;align-items:flex-start}.definition-word{font:200 94px/1.1 var(--serif);letter-spacing:-.04em}.studio-definition>.mono{margin-top:19px;font-size:11px}.studio-definition p{font-size:18px;margin-top:30px}.studio-definition>.definition-note{margin-top:60px;font-size:9px;letter-spacing:.04em}.about-copy{border-left:1px solid var(--line);padding:0 0 0 32px}.about-copy p{font-size:20px;line-height:1.4;margin-bottom:28px}.text-link{display:inline-flex;gap:25px;border-bottom:1px solid var(--line);padding:8px 0;font-size:10px;margin-top:6px}.text-link>span:last-child{transition:transform .35s}.text-link:hover>span:last-child{transform:translate(3px,-3px)}.about-wash i:nth-child(1){width:420px;height:400px;background:#dbcfdf;opacity:.43;left:-4%;top:28%}.about-wash i:nth-child(2){width:330px;height:270px;background:#f1d5c4;opacity:.38;left:22%;bottom:5%}.about-wash i:nth-child(3){width:410px;height:300px;background:#d6e0f0;opacity:.33;right:-18%;top:18%}
.contact{padding-top:55px;padding-bottom:125px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px}.contact .statement{font-size:clamp(36px,3.6vw,58px)}.contact-copy{padding-top:6px}.contact-copy p{font-size:20px;max-width:470px}.email-link{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ink);font:200 42px/1.2 var(--serif);letter-spacing:-.04em;margin-top:37px;padding-bottom:17px;gap:20px}.email-link>span:last-child{font:200 43px var(--serif);transition:transform .4s}.email-link:hover>span:last-child{transform:translate(5px,-5px)}.contact-caption{display:block;font-size:9px;letter-spacing:0;margin-top:15px}.contact-wash i:nth-child(1){width:430px;height:300px;left:12%;bottom:-20%;background:#dcd2e8;opacity:.48}.contact-wash i:nth-child(2){width:360px;height:280px;right:-4%;top:0%;background:#e4dcc4;opacity:.42}.contact-wash i:nth-child(3){width:440px;height:300px;right:14%;bottom:-10%;background:#d2e2dd;opacity:.35}
.footer{padding:45px var(--pad) 27px;border-top:1px solid var(--line)}.footer-logo{display:flex;align-items:center;justify-content:space-between;font:200 clamp(160px,24.5vw,390px)/.95 var(--serif);letter-spacing:-.06em;padding:0 0 45px}.footer-logo>span{font:200 .45em var(--serif);margin-right:8px;transition:transform .7s}.footer-logo:hover>span{transform:translate(12px,-12px)}.footer-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:20px;font-size:9px;letter-spacing:0}.footer-wash i:nth-child(1){width:500px;height:200px;background:#d3d6ea;opacity:.4;left:15%;bottom:-10%}.footer-wash i:nth-child(2){width:550px;height:220px;background:#e7dac9;opacity:.35;right:-5%;top:10%}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}.js .reveal.visible{opacity:1;transform:translateY(0)}
@media(min-width:1600px){:root{--pad:5vw}.hero{max-height:1100px}.section{padding-block:105px 130px}.about-grid,.contact-grid{gap:8vw}.hero-content{transform:translateY(0)}}
@media(max-width:1000px){:root{--pad:30px}.hero{min-height:730px;max-height:900px}.site-header nav{gap:2px 30px}.hero h1{font-size:54px}.about-grid,.contact-grid{gap:35px}.about-copy{padding-left:25px}.email-link{font-size:36px}.contact-copy p,.about-copy p{font-size:18px}}
@media(max-width:650px){:root{--pad:22px}html{scroll-padding-top:22px}.site-header{padding-top:25px}.wordmark{font-size:43px;letter-spacing:-2.5px}.site-header nav{gap:2px 19px;padding-top:0}.site-header nav a{font-size:9px;min-height:23px;line-height:1.8}.site-header nav a span{margin-left:2px}.hero{min-height:700px;height:95svh;max-height:850px}.hero-content{padding:140px 23px 135px;transform:translateY(0)}.eyebrow{font-size:8px;letter-spacing:.02em;margin-bottom:24px}.hero h1{font-size:clamp(39px,8.9vw,55px);line-height:1.1;max-width:540px}.desktop-break{display:none}.hero-description{font-size:17px;margin:23px 0 29px}.button{font-size:11px;padding:14px 16px;gap:25px}.hero-bottom{bottom:25px;font-size:8px;align-items:flex-end}.hero-bottom>span{max-width:130px;line-height:1.6}.hero-bottom a{gap:12px;font-size:8px}.hero-wash i:nth-child(1){left:-30%;top:43%;width:300px;height:270px}.hero-wash i:nth-child(2){right:-48%;top:44%;width:400px;height:310px}.hero-wash i:nth-child(3){left:20%;bottom:0;width:220px}.ascii-field{opacity:1}.wash i{filter:blur(42px)}.section{padding:55px var(--pad) 70px}.section-heading{margin-bottom:40px}.section-label{font-size:10px}.section-label>span{padding:8px}.statement{font-size:36px;line-height:1.15}figcaption{font-size:8px;margin-top:0;justify-content:center}.about-grid{grid-template-columns:1fr;gap:45px;margin-top:37px}.studio-definition{padding-top:0}.definition-word{font-size:80px}.studio-definition>.mono{margin-top:12px}.studio-definition p{margin-top:22px;font-size:17px}.studio-definition>.definition-note{margin-top:24px}.about-copy{padding-left:21px}.about-copy p{font-size:18px;margin-bottom:22px}.about-wash i:nth-child(1){width:340px;left:-28%;top:20%}.about-wash i:nth-child(2){width:240px;left:35%;bottom:38%}.contact{padding-top:22px}.contact-grid{grid-template-columns:1fr;gap:29px}.contact .statement{font-size:37px}.contact-copy p{font-size:18px}.email-link{font-size:38px;margin-top:30px}.contact-caption{font-size:8px;letter-spacing:-.025em}.footer{padding-top:32px}.footer-logo{font-size:30vw;padding-bottom:32px;letter-spacing:-.065em}.footer-logo>span{font-size:.45em}.footer-bottom{font-size:8px;line-height:1.6;align-items:flex-end}.footer-bottom>span{max-width:210px}.footer-bottom a{white-space:nowrap}.footer-logo:hover>span{transform:translate(4px,-4px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}.wash{transform:none!important}}
/* Numeric artwork is rendered above the washes at full opacity. */
.hero-wash{z-index:0}.hero-content,.hero-bottom{z-index:3}.ascii-field{opacity:1;mask-image:none;mix-blend-mode:normal}.studio-ascii{display:block;width:100%;height:320px;position:relative;z-index:1}.hero-motion-toggle{position:absolute;right:var(--pad);bottom:59px;z-index:4;border:0;background:transparent;padding:8px 0;font:400 9px/1.4 var(--mono);letter-spacing:0;text-transform:uppercase;cursor:pointer}.hero-motion-toggle:hover{text-decoration:underline;text-underline-offset:4px}
@media(min-width:1600px){.studio-ascii{height:360px}}
@media(max-width:1000px){.studio-ascii{height:300px}}
@media(max-width:650px){.hero{min-height:830px;max-height:950px}.hero-content{transform:translateY(-74px)}.studio-ascii{height:280px}.hero-motion-toggle{bottom:58px;font-size:8px}}
/* Keep focus navigation from scrolling the decorative hero layer internally. */
.hero{overflow:clip}
/* Areal for prose; untracked JetBrains Mono for every monospaced detail. */
.mono,.eyebrow,.section-label,figcaption,.site-header nav a,.button,.service-tags,.hero-motion-toggle{letter-spacing:0!important;font-variant-ligatures:none}
.site-header nav a{padding:3px 8px;margin:-3px -8px;border-radius:4px;transition:background .3s,box-shadow .3s}
.site-header nav a::after{display:none}
.site-header nav a:hover,.site-header nav a:focus-visible{background:#cbc5e52e;box-shadow:0 1px 10px #cbc5e519}
.studio-ascii{height:350px}
@media(max-width:650px){.studio-ascii{height:290px}.site-header nav{column-gap:17px}.site-header nav a{padding:4px 5px;margin:-4px -5px}}
/* Services: line drawings layered over the ASCII canvas. */
.svc-figure{position:relative}.service-lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;fill:none;stroke:#e8ece2;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;z-index:2}.service-lines path{stroke-dasharray:1;stroke-dashoffset:0}.service-lines .soft{stroke:#8f999e;stroke-width:1}
.hero{cursor:default}
.service-lines .svc-label{font:400 9px var(--mono);fill:#8f999e;stroke:none;letter-spacing:0}.service-lines .svc-knob{fill:#0b1012}.service-lines rect{fill:#0b1012}.service-lines .svc-select{stroke-dasharray:4 4}
.service-lines .svc-marquee{stroke:#c5bff2;stroke-dasharray:3 3;fill:rgba(197,191,242,.06)}.service-lines .svc-select{stroke:#c5bff2}.service-lines .svc-handles rect{fill:#0b1012;stroke:#c5bff2}.service-lines .svc-shape.is-selected{stroke:#c5bff2}.service-lines .svc-cursor{fill:#e8ece2;stroke:#0b1012;stroke-width:1}
/* Wordmark: no stretch on hover; it takes on the palette's tint instead. */
.wordmark{transition:color .35s}.wordmark:hover,.wordmark:focus-visible{letter-spacing:-3px;color:color-mix(in srgb,var(--ink) 45%,var(--a1))}
@media(max-width:650px){.wordmark:hover{letter-spacing:-2.5px}}
/* ---------- Palettes: every colour below comes from variables set by theme.js ---------- */
:root{--bar:0px;--hero-bg:#fdfdfc;--deep:#0b1012;--deep-ink:#f6f7f4;--deep-muted:#9ea8aa;--wash:.6;--texture:.7;--svc-accent:#c5bff2;--a1:#cbc5e5;--a2:#d0e1d5;--a3:#f1d9cc;--a4:#cddff0;--a5:#eacdd8;--line:color-mix(in srgb,var(--ink) 28%,transparent)}
body{padding-top:var(--bar);background:var(--paper);color:var(--ink);transition:background .5s,color .5s}
.site-header{top:var(--bar)}
.hero{background:var(--hero-bg)}
.colour-field:not(.hero):not(.dark){background:var(--paper)}
.dark{background:var(--deep);color:var(--deep-ink);--line:color-mix(in srgb,var(--deep-ink) 30%,transparent)}
::selection{background:var(--a1);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:currentColor}
.button{background:var(--ink);color:var(--paper)}.button:hover{background:color-mix(in srgb,var(--ink) 82%,var(--paper));box-shadow:0 12px 35px color-mix(in srgb,var(--a1) 45%,transparent)}
.section-label>span{background:color-mix(in srgb,var(--paper) 60%,transparent)}.dark .section-label>span{background:color-mix(in srgb,var(--deep-ink) 13%,transparent)}
figcaption{color:var(--deep-muted)}
.site-header nav a:hover,.site-header nav a:focus-visible{background:color-mix(in srgb,var(--nav-tint,var(--a1)) 22%,transparent);box-shadow:0 1px 10px color-mix(in srgb,var(--nav-tint,var(--a1)) 12%,transparent)}
.email-link{border-bottom-color:var(--ink)}
/* Washes (the "Blobs" style) take the palette's accents; other styles hide them. */
.wash i{opacity:var(--wash)!important}.wash i:nth-child(2n){opacity:calc(var(--wash)*.8)!important}
.wash i:nth-child(4n+1){background:var(--a1)!important}.wash i:nth-child(4n+2){background:var(--a2)!important}.wash i:nth-child(4n+3){background:var(--a3)!important}.wash i:nth-child(4n+4){background:var(--a4)!important}
.dark .wash i{opacity:calc(var(--wash)*.35)!important}
html:not([data-style="blobs"]) .wash{display:none}
.texture{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:var(--texture)}
.hero .texture{z-index:0}
/* Services line drawings follow the palette. */
.service-lines{stroke:var(--deep-ink)}.service-lines .soft,.service-lines .svc-label{stroke:var(--deep-muted)}.service-lines .svc-label{fill:var(--deep-muted);stroke:none}
.service-lines .svc-knob,.service-lines rect,.service-lines .svc-handles rect{fill:var(--deep)}
.service-lines .svc-marquee{stroke:var(--svc-accent);fill:color-mix(in srgb,var(--svc-accent) 8%,transparent)}.service-lines .svc-select,.service-lines .svc-shape.is-selected,.service-lines .svc-handles rect{stroke:var(--svc-accent)}
.service-lines .svc-cursor{fill:var(--deep-ink);stroke:var(--deep)}
.hero-motion-toggle{display:inline-flex;align-items:center;gap:7px;bottom:28px}.hero-motion-toggle svg{width:16px;height:16px;flex:none}.hero-motion-toggle:hover{text-decoration:none;opacity:.7}
@media(max-width:650px){.hero-motion-toggle{bottom:22px}}
.hero-motion-toggle{padding:10px 12px;right:calc(var(--pad) - 12px);bottom:18px;line-height:1}
@media(max-width:650px){.hero-motion-toggle{bottom:12px}}
.texture-grain{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mix-blend-mode:soft-light}
.hero .texture-grain{z-index:0}
/* Founder portrait: full colour, a touch more contrast, and the faintest palette tint. */
.founder{margin:0;width:100%}
.founder__photo{position:relative;display:block;isolation:isolate;overflow:hidden}
.founder__photo img{display:block;width:100%;height:auto;filter:contrast(1.11)}
.founder__photo::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--a1);mix-blend-mode:color;opacity:.08}
.founder figcaption{margin:10px 0 0;color:color-mix(in srgb,var(--ink) 60%,transparent);font-size:9px}
/* The portrait sits beside the definition, so the column fills without a long gap. */
.studio-definition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:36px;align-items:start;padding-top:6px}
.studio-definition>.founder{grid-column:1;grid-row:1 / span 4}
.studio-definition>:not(.founder){grid-column:2}
.studio-definition .definition-word{font-size:clamp(56px,5.6vw,84px);line-height:1}
.studio-definition>.definition-note{margin-top:34px}
@media(max-width:650px){.studio-definition{grid-template-columns:1fr}.studio-definition>.founder{grid-column:1;grid-row:5;margin-top:28px}.studio-definition>:not(.founder){grid-column:1}}
/* Links: a soft tint behind the text on hover (as in the nav), never an underline. */
.text-link,.email-link,.footer-bottom a,.footer-logo{transition:background .3s,box-shadow .3s}
.text-link{border-bottom:0;padding:7px 9px;margin-left:-9px}
.email-link{border-bottom:0;padding:8px 12px 10px;margin-left:-12px;margin-right:-12px}
.footer-bottom a{padding:4px 6px;margin:-4px -6px}
.text-link:hover,.text-link:focus-visible,.email-link:hover,.email-link:focus-visible,.footer-bottom a:hover,.footer-bottom a:focus-visible,.footer-logo:hover,.footer-logo:focus-visible{background:color-mix(in srgb,var(--a1) 22%,transparent);box-shadow:0 1px 10px color-mix(in srgb,var(--a1) 12%,transparent)}
/* Who we are: Malto with a subheading, no pronunciation line. */
.studio-definition .definition-sub{margin-top:14px;font-size:19px;line-height:1.35}
/* Selected collaborators: a quiet, continuously scrolling row of marks. */
.clients{padding-top:64px;padding-bottom:64px}
.clients-title{font-size:10px;text-transform:uppercase;font-weight:400;opacity:.6;margin:0 0 28px}
.marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;flex:none;gap:72px;margin:0;padding:0 36px;list-style:none;animation:marquee 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
/* Client logos: every mark is one ink colour (brand colours flattened, white details cut out), and each is sized by eye
   rather than by box so wordmarks, lockups and square marks carry the same visual weight. */
.marquee__track{align-items:center}
.logo-mark{--h:28px;display:flex;align-items:center;flex:none;opacity:.72;transition:opacity .3s}
.logo-mark img{display:block;height:var(--h);width:auto;user-select:none;-webkit-user-drag:none}
.logo-mark--shopify{--h:30px}.logo-mark--evenup{--h:22px}.logo-mark--nymi{--h:30px}.logo-mark--uoft{--h:42px}.logo-mark--oxford{--h:38px}.logo-mark--rxfood{--h:38px}.logo-mark--banads{--h:19px}.logo-mark--groundview{--h:15px}.logo-mark--1rg{--h:26px}
.logo-mark:hover{opacity:1}
.logo-mark a{display:block}.logo-mark:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){.marquee{mask-image:none;-webkit-mask-image:none}.marquee__track{animation:none;flex-wrap:wrap;gap:28px 48px}.marquee__track[aria-hidden]{display:none}}
@media(max-width:650px){.clients{padding-top:44px;padding-bottom:44px}.marquee__track{gap:44px;padding:0 22px}.logo-mark img{height:calc(var(--h) * .82)}}
/* Closing quote on the accent background. */
.closing{padding-top:120px;padding-bottom:120px;text-align:center}
.closing-quote{margin:0 auto;max-width:980px}.closing-quote blockquote{margin:0}
.closing-quote p{font:200 clamp(38px,4.6vw,68px)/1.1 var(--serif);letter-spacing:-.03em}
.closing-quote figcaption{justify-content:center;margin-top:28px;font-size:11px;color:var(--deep-muted)}
@media(max-width:650px){.closing{padding-top:80px;padding-bottom:80px}.closing-quote p{font-size:34px}}
/* Footer without the large wordmark. */
.footer{padding-top:28px}.footer-bottom{border-top:0;padding-top:0}
/* Footer: the accent close, holding the quote above the copyright row. */
.footer.dark{padding-top:120px;border-top:0}
.footer .closing-quote{text-align:center;margin:0 auto 110px}
.footer.dark .footer-bottom{border-top:1px solid var(--line);padding-top:20px}
@media(max-width:650px){.footer.dark{padding-top:80px}.footer .closing-quote{margin-bottom:70px}}
/* Email: the address alone, sized to its text. */
.email-link{display:inline-flex;width:auto;justify-content:flex-start}
/* Who we’ve worked with: part of the Who we are section. */
.about .clients{margin-top:84px;padding:0}
.about .clients-title{margin-bottom:26px}
@media(max-width:650px){.about .clients{margin-top:52px}}
/* A very quiet rule above Contact. */
.contact.section{border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
/* Larger monospace throughout. */
.eyebrow{font-size:13px!important}
figcaption{font-size:11.5px!important}
.footer-bottom{font-size:11.5px!important}
.text-link{font-size:12px!important}
.contact-caption{font-size:11px!important}
.clients-title{font-size:12px!important}
.section-label{font-size:13px!important}
.hero-motion-toggle{font-size:11px!important}
.founder figcaption{font-size:11px!important}
.service-lines .svc-label{font-size:10px}
@media(max-width:650px){.eyebrow{font-size:11px!important}.contact-caption{font-size:10px!important}figcaption,.footer-bottom{font-size:10.5px!important}.section-label{font-size:11px!important}.hero-motion-toggle{font-size:10px!important}}
.services{overflow:clip}
/* Who we are: a soft, slightly deeper wash behind the portrait so its light corner stays distinct. */
.founder{position:relative}
/* Behind the portrait: soft blobs blurred together (a broad white wash, rose rising from the lower left, a small
   white highlight at the lower right), so the edges of the cool, pale photo sit against a contrasting tone. */
.founder{--g-blur:40px;--g-inset:18%;--g-opacity:1;--g-a:#fff;--g-a-x:43%;--g-a-y:38%;--g-a-r:120%;--g-b:var(--a5);--g-b-x:-20%;--g-b-y:120%;--g-b-r:120%;--g-c:#fff;--g-c-x:74%;--g-c-y:66%;--g-c-r:35%}
.founder::before{content:'';position:absolute;inset:calc(-1 * var(--g-inset,14%));z-index:-1;pointer-events:none;opacity:var(--g-opacity,1);filter:blur(var(--g-blur,50px));
  background:radial-gradient(circle at var(--g-a-x,86%) var(--g-a-y,14%),var(--g-a,transparent) 0,transparent var(--g-a-r,60%)),radial-gradient(circle at var(--g-b-x,14%) var(--g-b-y,86%),var(--g-b,transparent) 0,transparent var(--g-b-r,60%)),radial-gradient(circle at var(--g-c-x,86%) var(--g-c-y,86%),var(--g-c,transparent) 0,transparent var(--g-c-r,60%))}
@media(max-width:650px){.founder::before{filter:blur(calc(var(--g-blur,50px) * .6))}}
/* The services section's padding lives on its inner wrapper, which also carries the background. */
.services.section{padding:0}
.services-pin{position:relative;isolation:isolate;padding:88px var(--pad) 110px}
@media(max-width:650px){.services-pin{padding:55px var(--pad) 70px}}
/* Downward arrows nudge down on hover. */
.button:hover .button-arrow,.button:focus-visible .button-arrow{transform:translateY(3px)}
.text-link:hover>span:last-child,.text-link:focus-visible>span:last-child{transform:translateY(3px)}
/* A section's art takes its opacity/contrast from --art-filter (set per section in theme.js). */
.colour-field :is(canvas:not(.texture):not(.texture-grain),.service-lines){filter:var(--art-filter,none)}
/* Nav hover tint: stronger, so it reads clearly. */
.site-header nav a:hover,.site-header nav a:focus-visible{background:color-mix(in srgb,var(--nav-tint,var(--a1)) 55%,transparent);box-shadow:0 1px 12px color-mix(in srgb,var(--nav-tint,var(--a1)) 25%,transparent)}
/* About: the flag after "Proudly based in Toronto, Canada." */
.about-copy .flag{margin-left:2px}
.service-lines .svc-today{stroke:var(--svc-accent)}
/* About: with the definition lines gone, the portrait fills its column. */
.studio-definition{display:block}
/* About: words on the left; the portrait holds its place on the right as you read. The wrappers are flattened
   so the statement, portrait and copy sit in one grid. Phones stack them: statement, portrait, copy. */
.about .about-body{display:grid;gap:32px 56px;align-items:start}
.about .about-grid,.about .studio-definition{display:contents}
.about .about-body .statement{margin:0;max-width:none}
.about .about-body .founder{margin:0;max-width:none}
.about .about-body .about-copy{margin:0}
.about .about-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"s f" "c f" ". f";grid-template-rows:auto auto 1fr;row-gap:40px;column-gap:72px}
.about .about-body .statement{grid-area:s}
.about .about-body .about-copy{grid-area:c;border:0;padding:0}
.about .about-body .founder{grid-area:f;position:sticky;top:96px}
@media(max-width:650px){
  .about .about-body{display:flex;flex-direction:column;gap:26px}
  .about .about-body .statement{order:1;position:static}
  .about .about-body .founder{order:2;position:relative;top:auto;margin:0;max-width:420px}
  .about .about-body .about-copy{order:3;columns:auto;margin:0}
}
/* Buttons: on hover just the background tint (and the text scramble); no lift, glow or arrow nudge. */
.button:hover,.button:focus-visible{transform:none;box-shadow:none}
.button:hover .button-arrow,.button:focus-visible .button-arrow{transform:none}
/* Link and button hovers share one timing and curve, set on the resting state so they ease both in and out. */
:root{--hover:.3s cubic-bezier(.4,0,.2,1)}
.site-header nav a{transition:background-color var(--hover),box-shadow var(--hover),color var(--hover)}
.wordmark{transition:color var(--hover),letter-spacing var(--hover),font-size .4s cubic-bezier(.2,.7,.2,1)}
.button{transition:background-color var(--hover),color var(--hover)}
.text-link,.email-link,.footer-bottom a,.footer-logo{transition:background-color var(--hover),box-shadow var(--hover),color var(--hover)}
.button-arrow,.text-link>span:last-child,.email-link>span:last-child,.footer-logo>span{transition:transform var(--hover)}
.hero-motion-toggle,.logo-mark,.menu-button{transition:opacity var(--hover),color var(--hover)}
/* Square corners everywhere: no rounding on any box, button, tint or card. */
*,*::before,*::after{border-radius:0!important}
/* Hover tints are flat, hard-edged rectangles: no blurred glow softening their corners. */
.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a.is-active,.text-link:hover,.text-link:focus-visible,.email-link:hover,.email-link:focus-visible,.footer-bottom a:hover,.footer-bottom a:focus-visible,.footer-logo:hover,.footer-logo:focus-visible,.button:hover,.button:focus-visible{box-shadow:none!important}
/* Services: the tools behind each service, a quiet row of marks with their names, in the section's ink. */
.svc-tools{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.svc-tools li{display:inline-flex;align-items:center;gap:8px;font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:0;color:color-mix(in srgb,var(--deep-ink) 80%,transparent)}
.svc-tools__icon{width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
/* Closing quote: always two lines. Larger screens break after "the future"; phones after "predict". */
.q-break--phone{display:none}
@media(max-width:650px){.q-break--phone{display:inline}.q-break--wide{display:none}.closing-quote p{font-size:min(34px,8.8vw)}}
/* Section labels on light sections: each box takes a very light wash of one of the palette's accents, like the
   background blobs — lavender on every light section, matching the nav. Dark sections keep their light tint. */
.section-label>span{background:color-mix(in srgb,var(--a1) 31%,transparent)}
.dark .section-label>span{background:color-mix(in srgb,var(--deep-ink) 13%,transparent)}
/* Flag icons (the rules of flagicons.lipis.dev's .fi classes, with only the Canadian flag, hosted here). */
.fi{position:relative;display:inline-block;width:1.333333em;line-height:1em;background-size:contain;background-position:50%;background-repeat:no-repeat}
.fi:before{content:"\00a0"}
.fi-ca{background-image:url(assets/flag-ca.svg)}
/* The flag: a little smaller than the text, centred on it, with 2px corners (the one exception to the square corners). */
.about-copy .fi-ca{width:1.1em;line-height:.825em;vertical-align:.02em;border-radius:2px!important}
/* The flag sits 2px higher, level with the text. */
.about-copy .fi-ca{top:-1px}
/* About's label box takes a soft sage, at home on the section's green wash. */
#about .section-label>span{background:color-mix(in srgb,#d1e1d6 62%,transparent)}
/* A very quiet rule above About too, as above Contact. */
.about.section{border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}