/* Shared by every page: the fonts, the fade between pages, the phone menu, the footer, and the plain pages (About, Contact, Privacy).
   Every class here starts with q- so that it cannot collide with a page's own styles. */

@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/fonts/funnel-display.woff2) format("woff2"); }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/fonts/funnel-sans.woff2) format("woff2"); }

:root { --q-canvas: #f7f5f2; --q-plate: #e9e6df; --q-ink: #161616; --q-ink-2: #5b5b56; --q-green: #36c46b; --q-folder: #232322; --q-back: #1a1a19;
  --q-font: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --q-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --q-spring: cubic-bezier(.3,1.6,.5,1); --q-out: cubic-bezier(.19,1,.22,1); --q-settle: cubic-bezier(.3,1.25,.5,1);
  --q-sheet: 0 0 0 .5px rgba(0,0,0,.06), 0 -1px 2px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.07), 0 10px 20px -8px rgba(0,0,0,.14), 0 30px 50px -24px rgba(30,26,22,.22);
  --q-raised: 0 0 0 .5px rgba(40,32,24,.06), 0 1px 2px rgba(40,32,24,.08), 0 4px 10px -4px rgba(40,32,24,.12); }

/* One page fades into the next */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease both q-leave; }
::view-transition-new(root) { animation: 380ms var(--q-out) both q-arrive; }
@keyframes q-leave { to { opacity: 0; } }
@keyframes q-arrive { from { opacity: 0; transform: translateY(12px); } }

/* Phone menu: a button in the top row that opens the site's pages */
.q-mn { display: none; position: relative; font-family: var(--q-font); }
.q-mn summary { list-style: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; cursor: pointer; background: rgba(22,22,22,.06); color: var(--q-ink); transition: background 200ms, transform 300ms var(--q-spring); -webkit-tap-highlight-color: transparent; }
.q-mn summary::-webkit-details-marker { display: none; } .q-mn summary:active { transform: scale(.92); }
.q-mn summary svg { width: 20px; height: 20px; overflow: visible; } .q-mn summary path { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 420ms var(--q-settle); }
.q-mn[open] summary { background: var(--q-ink); color: #fff; } .q-mn[open] summary path:first-child { transform: translateY(3.5px) rotate(45deg); } .q-mn[open] summary path:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.q-mn-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; width: 250px; padding: 10px; border-radius: 22px; background: #fff; box-shadow: var(--q-sheet); display: grid; gap: 2px; transform-origin: 100% 0; animation: q-pop 380ms var(--q-settle) both; }
@keyframes q-pop { from { opacity: 0; transform: scale(.92) translateY(-8px); } }
.q-mn-panel a { display: flex; align-items: center; height: 50px; padding: 0 14px; border-radius: 13px; font: 600 17px/1 var(--q-font); color: var(--q-ink); text-decoration: none; } .q-mn-panel a:hover { background: rgba(22,22,22,.05); } .q-mn-panel a[aria-current] { font-weight: 700; }
@media (max-width: 760px) { .q-mn { display: block; } }

/* Buttons used on the plain pages and in the footer */
.q-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border: 0; border-radius: 16px; background: var(--q-ink); color: #fff; font: 700 16px/1 var(--q-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 300ms var(--q-spring), background 200ms; }
.q-btn:hover { background: #000; transform: translateY(-1px); } .q-btn:active { transform: scale(.96); transition-duration: 90ms; }
.q-btn.q-sm { height: 42px; padding: 0 17px; border-radius: 13px; font-size: 15px; }
.q-btn.q-light { background: #fff; color: var(--q-ink); } .q-btn.q-light:hover { background: #fff; }
.q-btn.q-quiet { background: #fff; color: var(--q-ink); box-shadow: var(--q-raised); } .q-btn.q-quiet:hover { background: #fff; }

/* Footer: the folder from the top of the homepage, closed. The wordmark stands behind it, the papers show above its front, and the links are on the front. */
.q-ft { --tw: min(300px, 26%); --pw: min(290px, calc((100% - 120px) / 6 + 30px)); --last: 5; position: relative; padding-top: clamp(64px, 11vh, 130px); overflow: clip; font-family: var(--q-font); color: #fff; text-align: left; }
.q-ft *, .q-ft *::before, .q-ft *::after { box-sizing: border-box; }
.q-ft-in { width: min(100% - 48px, 1180px); margin: 0 auto; }
.q-ft-word { color: var(--q-ink); } .q-ft-word svg { display: block; width: 100%; height: auto; overflow: visible; }
.q-ft-folder { position: relative; z-index: 1; margin-top: calc(min(100vw, 1240px) * -.085 + 34px); padding-top: 150px; }
.q-ft-back { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 -8px 30px rgba(30,26,22,.14)); }
.q-ft-back::before { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--tw) - 30px); height: 60px; border-radius: 20px 0 0 0; background: var(--q-back); }
.q-ft-back::after { content: ""; position: absolute; left: 0; right: 0; top: 26px; bottom: 0; border-radius: 0 28px 0 0; background: var(--q-back); }
.q-ft-back svg { position: absolute; left: calc(var(--tw) - 30.5px); top: 0; width: 61px; height: 26.5px; fill: var(--q-back); }
.q-ft-papers { position: absolute; left: 0; right: 0; top: 46px; height: 0; }
.q-paper { position: absolute; top: 0; left: calc(26px + (100% - 52px - var(--pw)) * var(--i) / var(--last)); width: var(--pw); height: 320px; padding: 16px 18px; border-radius: 14px; background: #fff; color: var(--q-ink); box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 -1px 2px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08), 0 8px 16px -6px rgba(0,0,0,.14); transform: translateY(var(--y)) rotate(var(--r)); transition: transform 620ms var(--q-spring); }
.q-paper:hover { transform: translateY(calc(var(--y) - 22px)) rotate(calc(var(--r) * .4)); }
.q-paper small { display: block; font: 600 11.5px/1.4 var(--q-font); color: var(--q-ink-2); } .q-paper b { display: block; margin-top: 2px; font: 700 14.5px/1.3 var(--q-font); letter-spacing: -.015em; }
.q-js .q-ft:not(.q-in) .q-paper { transform: translateY(calc(var(--y) + 120px)) rotate(calc(var(--r) * 2.4)); }
.q-ft.q-in .q-paper { transition-duration: 900ms; transition-delay: calc(var(--i) * 70ms); } .q-ft.q-in.q-done .q-paper { transition-duration: 620ms; transition-delay: 0ms; }
.q-ft-front { position: relative; padding: clamp(30px, 4.2vw, 56px) clamp(22px, 4.4vw, 60px) clamp(26px, 3vw, 38px); border-radius: 26px 26px 0 0; background: var(--q-folder); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.12), 0 -20px 44px -22px rgba(0,0,0,.6); display: grid; gap: clamp(40px, 7vh, 84px); }
.q-ft-top { display: flex; justify-content: space-between; gap: 40px clamp(32px, 6vw, 110px); flex-wrap: wrap; }
.q-ft-brand { display: grid; gap: 26px; justify-items: start; align-content: start; } .q-ft-brand a.q-home { color: #fff; display: block; } .q-ft-brand svg { display: block; height: 30px; width: auto; overflow: visible; }
.q-ft-cols { display: flex; gap: 32px clamp(40px, 6.4vw, 104px); flex-wrap: wrap; }
.q-ft-col { display: grid; gap: 2px; align-content: start; justify-items: start; min-width: 104px; }
.q-ft-col b { margin-bottom: 10px; font: 600 15.5px/1.3 var(--q-font); color: rgba(255,255,255,.56); }
.q-ft-col a { padding: 6px 0; font: 600 17px/1.3 var(--q-font); color: #fff; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 3px) / 0 1.5px; transition: background-size 460ms var(--q-out); } .q-ft-col a:hover, .q-ft-col a:focus-visible { background-size: 100% 1.5px; }
.q-ft-legal { display: flex; justify-content: space-between; gap: 6px 32px; flex-wrap: wrap; font: 500 15px/1.5 var(--q-font); color: rgba(255,255,255,.74); }
.q-ft :focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
@media (max-width: 960px) { .q-ft { --pw: min(290px, calc((100% - 100px) / 4 + 30px)); --last: 3; } .q-paper:nth-child(n+5) { display: none; } }
@media (max-width: 640px) { .q-ft { --tw: 42%; --pw: calc((100% - 40px) / 3 + 14px); --last: 2; } .q-ft-in { width: calc(100% - 24px); } .q-ft-back::before { height: 50px; } .q-ft-back::after { top: 20px; } .q-ft-back svg { height: 20.5px; }
  .q-paper:nth-child(n+4) { display: none; } .q-paper { left: calc(14px + (100% - 28px - var(--pw)) * var(--i) / var(--last)); height: 200px; padding: 12px 13px; } .q-paper b { font-size: 13.5px; } .q-ft-papers { top: 34px; } .q-ft-folder { margin-top: calc(100vw * -.085 + 26px); padding-top: 128px; } .q-ft-front { border-radius: 22px 22px 0 0; } .q-ft-cols { gap: 30px 44px; } }

/* Plain pages: About, Contact, Privacy and Page not found */
.q-page { margin: 0; background: var(--q-canvas); color: var(--q-ink); font: 500 16px/1.5 var(--q-font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.q-page *, .q-page *::before, .q-page *::after { box-sizing: border-box; }
:where(.q-page) a { color: inherit; } .q-page :focus-visible { outline: 2px solid var(--q-ink); outline-offset: 3px; border-radius: 8px; }
.q-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: 12px; background: var(--q-ink); color: #fff !important; font-weight: 700; text-decoration: none; transition: top 200ms; } .q-skip:focus { top: 12px; }
.q-wrap { max-width: 1288px; margin: 0 auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)); }
.q-nav .q-wrap { height: 72px; display: flex; align-items: center; gap: 36px; }
.q-brand { display: inline-flex; align-items: center; color: var(--q-ink); } .q-brand svg { display: block; height: 25px; width: auto; overflow: visible; }
.q-links { display: flex; gap: 2px; } .q-links a { padding: 8px 13px; border-radius: 10px; font: 600 15px/1.5 var(--q-font); color: var(--q-ink-2); text-decoration: none; transition: color 160ms, background 200ms; } .q-links a:hover { color: var(--q-ink); background: rgba(22,22,22,.05); } .q-links a[aria-current] { color: var(--q-ink); font-weight: 700; }
.q-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.q-hero { padding-block: clamp(44px, 9vh, 112px) clamp(36px, 7vh, 84px); }
.q-hero h1 { margin: 0; font: 600 clamp(56px, 8.6vw, 124px)/.92 var(--q-display); letter-spacing: -.056em; text-wrap: balance; }
.q-lead { margin: clamp(22px, 3.6vh, 36px) 0 0; max-width: 30em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; text-wrap: pretty; } .q-lead a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.q-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; } .q-w i { display: inline-block; font-style: normal; }
.q-js .q-words .q-w i { transform: translateY(110%); transition: transform 1000ms var(--q-out); transition-delay: calc(var(--i) * 70ms); } .q-js .q-words.q-in .q-w i { transform: none; }
.q-js .q-rise { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--q-out), transform 1000ms var(--q-out); transition-delay: var(--d, 0ms); } .q-js .q-rise.q-in { opacity: 1; transform: none; }
.q-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 56px; align-items: start; padding-block: clamp(34px, 5.6vh, 68px); }
.q-sec h2 { margin: 0; font: 600 clamp(32px, 3.8vw, 54px)/1 var(--q-display); letter-spacing: -.042em; text-wrap: balance; }
.q-sec p { margin: 6px 0 0; max-width: 33em; font-size: clamp(18px, 1.42vw, 20.5px); line-height: 1.55; text-wrap: pretty; } .q-sec p a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.q-h2 { margin: 0; padding-top: clamp(34px, 5.6vh, 68px); font: 600 clamp(32px, 3.8vw, 54px)/1 var(--q-display); letter-spacing: -.042em; }
.q-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); padding-block: clamp(22px, 3.6vh, 40px) clamp(20px, 4vh, 44px); }
.q-person { display: grid; gap: 4px; align-content: start; } .q-photo { aspect-ratio: 4 / 5; margin-bottom: 12px; border-radius: clamp(20px, 2.2vw, 30px); background: var(--q-plate); }
.q-person b { font: 600 clamp(20px, 1.9vw, 26px)/1.15 var(--q-display); letter-spacing: -.03em; } .q-person span { font-size: clamp(17px, 1.3vw, 19px); }
.q-crow { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 32px; flex-wrap: wrap; padding-block: clamp(72px, 13vh, 150px) 0; }
.q-crow h2 { margin: 0; max-width: 11em; font: 600 clamp(38px, 4.7vw, 70px)/.98 var(--q-display); letter-spacing: -.048em; text-wrap: balance; }
/* Contact */
.q-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 84px); align-items: start; padding-block: clamp(44px, 9vh, 112px) clamp(30px, 5vh, 60px); }
.q-contact h1 { margin: 0; font: 600 clamp(56px, 7.4vw, 112px)/.92 var(--q-display); letter-spacing: -.056em; }
.q-mail { margin-top: clamp(22px, 3.4vh, 34px); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .q-mail a { font: 600 clamp(20px, 2vw, 27px)/1.2 var(--q-display); letter-spacing: -.02em; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.q-form { padding: clamp(20px, 2.6vw, 34px); border-radius: 28px; background: #fff; box-shadow: var(--q-sheet); display: grid; gap: 18px; }
.q-field { display: grid; gap: 8px; } .q-field label { font: 600 16px/1.3 var(--q-font); }
.q-field input, .q-field textarea { width: 100%; padding: 0 16px; height: 56px; border: 0; border-radius: 16px; background: var(--q-canvas); color: var(--q-ink); font: 500 17px/1.4 var(--q-font); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow 200ms, background 200ms; } .q-field textarea { height: 148px; padding-block: 15px; resize: vertical; }
.q-field input:hover, .q-field textarea:hover { background: #f1eee9; } .q-field input:focus, .q-field textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--q-ink); }
.q-form .q-btn { justify-self: start; } .q-status { min-height: 1.5em; margin: 0; font: 600 16px/1.5 var(--q-font); }
/* Page not found */
.q-lost { min-height: 52vh; display: grid; align-content: center; justify-items: start; gap: 30px; padding-block: 60px; }
@media (max-width: 980px) { .q-sec { grid-template-columns: minmax(0, 1fr); } .q-contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .q-links { display: none; } }
@media (max-width: 640px) { .q-team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .q-form { border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .q-js .q-words .q-w i, .q-js .q-rise, .q-paper, .q-mn-panel, .q-mn summary path { transition: none !important; animation: none !important; } .q-js .q-words .q-w i { transform: none; } .q-js .q-rise { opacity: 1; transform: none; } .q-js .q-ft:not(.q-in) .q-paper { transform: translateY(var(--y)) rotate(var(--r)); } }
.q-lost h1 { margin: 0; max-width: 12em; font: 600 clamp(44px, 6.4vw, 92px)/.96 var(--q-display); letter-spacing: -.05em; text-wrap: balance; }
.q-said { animation: q-said 420ms var(--q-settle) both; } @keyframes q-said { from { opacity: 0; transform: translateY(6px); } }
#copy { min-width: 132px; }
/* The narrowest phones: the top row closes up so that the wordmark, the button and the menu still fit */
@media (max-width: 360px) { .q-nav .q-wrap, header.nav .in { gap: 10px; } .q-end, header.nav .end { gap: 8px; } .q-nav .q-btn.q-sm, header.nav .btn.sm { padding-inline: 12px; } }