*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#30312e;font-family:Arial,Helvetica,sans-serif;font-size:18px;line-height:1.55}a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}a:hover{color:#777}a:focus-visible,summary:focus-visible{outline:2px solid #444;outline-offset:6px}header{max-width:1440px;margin:auto;padding:40px 6%;display:flex;justify-content:space-between;align-items:center;gap:30px}.logo{width:100px;height:auto;display:block}nav{display:flex;gap:30px;font-size:12px;letter-spacing:.08em}nav a{text-decoration:none}.mobile-menu{display:none}.skip{position:absolute;top:-100px}.skip:focus{top:10px;left:10px;background:white;padding:10px;z-index:10}main,footer{max-width:1160px;margin:auto;padding:40px 5%}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.2;letter-spacing:-.035em;font-weight:400}h1{font-size:48px}h2{font-size:42px}h3{font-size:30px}p{margin:0 0 1.5em}img{max-width:100%;height:auto}figure{margin:40px 0}figure img{display:block;width:100%}figcaption{font-size:14px;color:#666;margin-top:10px}.intro{margin:20px 0 70px}.intro>div>p{font-size:23px}.intro h2{font-size:48px;max-width:800px}.hero{margin-bottom:65px}.services h3,.clients h3{font-weight:bold}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0 70px}.card{border:1px dotted #666;padding:26px}.card p:last-child{margin-bottom:0}.logos{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;gap:34px;margin:35px 0 65px}.logos img{max-height:70px;object-fit:contain;width:100%}.bio{margin:30px 0 65px}.writing,.article{max-width:950px}.writing h2{margin-top:50px}.writing p{margin-bottom:1.5em}.article h1{font-size:48px}.article h2{font-size:34px;margin-top:50px}.article h3{font-size:28px}.article .video{width:100%;aspect-ratio:16/9;border:0;margin:20px 0 40px}.article-links{flex-wrap:wrap;border-top:1px solid #ddd;margin-top:50px;padding-top:25px}.byline{font-size:14px;color:#666}.post{padding:30px 0;border-bottom:1px solid #ddd}.post h2{margin-top:10px}.post h2 a{text-decoration:none}footer{border-top:1px solid #888;padding-top:50px;padding-bottom:60px;font-size:16px}blockquote{margin:30px 0;padding-left:25px;border-left:2px solid #aaa}ul,ol{padding-left:25px}@media(max-width:767px){body{font-size:16px}header{padding:30px 6%;align-items:flex-start}.logo{width:75px}header>nav{display:none}.mobile-menu{display:block;position:relative}.mobile-menu summary{font-size:42px;line-height:1;cursor:pointer;list-style:none}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu[open] summary{transform:rotate(45deg)}.mobile-menu nav{position:absolute;right:0;top:55px;width:240px;display:flex;flex-direction:column;background:white;box-shadow:0 5px 20px #0002;padding:25px;z-index:3;font-size:15px}main,footer{padding-left:6%;padding-right:6%}main{padding-top:35px}.intro{margin:0 0 80px}.intro>div>p{font-size:18px;line-height:1.45}.intro h2{font-size:34px;margin-top:35px}.hero{margin-bottom:45px}h3{font-size:27px}.cards{grid-template-columns:1fr;gap:20px;margin-bottom:50px}.logos{grid-template-columns:repeat(3,1fr);gap:28px}.article h1,h1{font-size:36px}.article h2,h2{font-size:30px}footer{font-size:15px}.bio{margin-bottom:40px}}

/* Studio foundations from Figma. Deliberate system-font fallbacks. */
:root{--ground:#fff;--surface:#f2f2f2;--ink:#141414;--ink-muted:#6b6b6b;--rule:#e2e2e2;--magenta:#ff0099;--magenta-text:#ff0099;--font-text:Arial,Helvetica,sans-serif;--font-voice:Georgia,'Times New Roman',serif;--font-label:'Courier New',monospace}
body{background:var(--ground);color:var(--ink);font-family:var(--font-text);line-height:1.6}a:hover{color:var(--magenta-text)}a:focus-visible,summary:focus-visible{outline-color:var(--magenta-text)}header{max-width:1280px;padding:44px 5%;border-bottom:1px solid var(--rule)}.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:var(--ink);flex-shrink:0}.brand:hover{color:var(--ink)}.index-mark{display:grid;grid-template-columns:repeat(2,1fr);width:63px;height:63px;gap:1.5px;padding:1.5px;background:var(--ink);font:19px/1 var(--font-label);flex-shrink:0}.index-mark>span{display:flex;align-items:center;justify-content:center;background:var(--ground)}.index-mark>.window{background:var(--magenta)}.wordmark{display:flex;flex-direction:column;font:30px/.95 var(--font-voice);letter-spacing:0}.wordmark strong{font-weight:700}.wordmark>span{font-weight:400}header nav,.byline,.article-links{font-family:var(--font-label);font-size:12px;letter-spacing:.08em}header nav a{padding:9px 0}header > nav a[aria-current="page"]{border-bottom:2px solid var(--magenta)}main,footer{max-width:1160px}main{padding-top:72px}h1,h2,h3{font-family:var(--font-text);font-weight:700;letter-spacing:-.035em}h1,.article h1{font-size:clamp(36px,5vw,64px);line-height:1.04}h2,.article h2{font-size:44px;line-height:1.05}h3,.article h3{font-size:26px;line-height:1.1;letter-spacing:-.025em}.intro{margin:0 0 65px}.intro>div>p{font-size:20px;line-height:1.6;margin-bottom:44px}.intro h1{font-size:clamp(42px,6.4vw,72px);line-height:1;letter-spacing:-.045em;margin:0;max-width:960px}.intro h1 a{color:var(--magenta-text);text-decoration:none}.intro h1 a:hover{text-decoration:underline;text-decoration-thickness:2px}.intro h1 em{font-family:var(--font-voice);font-weight:400}.hero{margin:0 0 80px}.services>div>p{font-family:var(--font-voice);font-size:22px;line-height:1.35}.cards{gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:32px 0 70px}.card{border:0;padding:32px 28px;background:var(--ground)}.card+.card{border-left:1px solid var(--rule)}.card strong:first-child{font-size:20px}.clients h3{font:12px/1.4 var(--font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}.logos{margin-bottom:80px}.bio{max-width:760px;margin:0 0 64px}.byline{color:var(--ink-muted)}footer{border-top:1px solid var(--rule);padding-top:45px}footer > div > p:first-child {
  font: 400 var(--size-label)/1.6 var(--font-label);
}
footer > div > p:first-child em { font-style: normal; }
.writing li {
  padding-block: 3px;
  line-height: 1.4;
}
.writing li p { margin: 0; }.writing li::marker{color:var(--magenta)}.article-links{line-height:1.8}.post{border-color:var(--rule)}blockquote{border-color:var(--magenta);font:italic 26px/1.35 var(--font-voice)}::selection{background:#ffd6ee;color:var(--ink)}
@media(max-width:767px){header{padding:28px 6%;align-items:center}.brand{gap:12px}.index-mark{width:51px;height:51px;font-size:16px}.wordmark{font-size:25px}main{padding-top:48px}.intro>div>p{font-size:18px;margin-bottom:36px}.intro h1{font-size:clamp(38px,8.5vw,60px);line-height:1.05}.intro{margin-bottom:48px}.hero{margin-bottom:52px}.cards{margin-bottom:50px}.card{padding:25px 0}.card+.card{border-left:0;border-top:1px solid var(--rule)}.services>div>p{font-size:21px}.logos{margin-bottom:55px}h2,.article h2{font-size:32px}.mobile-menu nav{letter-spacing:0;gap:14px}.article h1{font-size:38px}}
@media(max-width:400px){header{gap:12px}.wordmark{font-size:22px}.brand{gap:10px}.index-mark{width:47px;height:47px;font-size:15px}.mobile-menu summary{font-size:36px}}

/* The home link and navigation share a single flex row. */
header { min-height: 170px; }
.supplied-wordmark { display: block; width: 174px; height: auto; }
header > nav { gap: 18px; }
header > nav a { white-space: nowrap; }

@media (max-width: 767px) {
  header { min-height: 125px; }
  .supplied-wordmark { width: 145px; }
  .mobile-menu summary {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 400px) {
  .supplied-wordmark { width: 122px; }
}

@font-face{font-family:Geist;src:url('/assets/fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url('/assets/fonts/Geist-Italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--font-text:Geist,Arial,Helvetica,sans-serif;--font-label:'Geist Mono','Courier New',monospace}

/* Use medium weight for section hierarchy and service labels. */
h1,h2,h3,.services h3,.clients h3{font-weight:500}
:is(h1,h2,h3) :is(strong,b){font-weight:inherit}
.card :is(strong,b){font-weight:500}
.intro h1{font-weight:650}

/* Shared reading scale, including the homepage header and footer. */
:root {
  --size-statement: clamp(38px, 5vw, 60px);
  --size-heading: 26px;
  --size-body: 18px;
  --size-label: 13px;
}
body, footer, .intro > div > p, .services > div > p,
.card strong:first-child, blockquote {
  font-size: var(--size-body);
}
h1, .article h1, .intro h1 { font-size: var(--size-statement); }
h2, h3, .article h2, .article h3 { font-size: var(--size-heading); }
header > nav, .mobile-menu nav, .byline, .article-links,
.clients h3, figcaption { font-size: var(--size-label); }
@media (max-width: 767px) {
  :root { --size-body: 17px; --size-heading: 24px; }
}
@media (min-width: 1101px) and (max-width: 1250px) {
  header > nav { gap: 12px; }
}

/* Keep the shared page edges generous as the viewport grows. */
header {
  max-width: 1080px;
  padding-inline: 6%;
}
main, footer {
  max-width: 1080px;
  padding-inline: 6%;
}
.writing, .article, :is(.writing, .article) + footer { max-width: 920px; }
@media (max-width: 767px) {
  header, main, footer { padding-inline: 7%; }
}

.article-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 24px;
}
.article-links a {
  display: grid;
  align-content: start;
  gap: 4px;
  font: 500 var(--size-body)/1.4 var(--font-text);
  letter-spacing: normal;
}
.article-links a span {
  font: 400 var(--size-label)/1.4 var(--font-label);
  color: var(--ink-muted);
}
.expand-image {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}
.image-viewer[open] {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 48px 3vw;
  border: 0;
  background: rgb(0 0 0 / 95%);
}
.image-viewer img {
  max-width: 100%;
  max-height: calc(100dvh - 96px);
  object-fit: contain;
}
.image-viewer button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  color: white;
  background: transparent;
  border: 0;
  font: 28px/1 sans-serif;
  cursor: pointer;
}
html:has(.image-viewer[open]) { overflow: hidden; }

.home > .clients:last-child .logos {
  margin-bottom: 0;
}

.footer-links {
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}
.footer-links a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}