/* Second Audience, design direction 2b. Generated by build.py. */
@font-face{font-family:'Alegreya Sans';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/alegreya-sans-500i.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/alegreya-sans-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/alegreya-sans-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/alegreya-sans-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#faf7f0; --panel:#fdfbf5; --ink:#191c1f; --soft:#4c473d; --mono-muted:#726c60;
  --accent:#3e5c77; --accent-h:#324b62;
  --line:#e2dcc9; --line-2:#ddd6c4; --line-3:#e0dac8;
  --track:#ece6d6; --track-b:#d9d2bf; --thumb:#1b1913;
  --lab-on:#f6f3ea; --lab-off:#6b6656;
  --machine:#16181d; --machine-fg:#dfe3e8; --machine-key:#8fb0cc;
  --machine-label:#878e99; --chip:#383e46;
  --sans:'Alegreya Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.55 var(--sans)}
p{text-wrap:pretty}
a{color:var(--accent)}
a:hover{color:var(--accent-h)}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:20;background:var(--panel);
  border:1px solid var(--line-2);border-radius:8px;padding:10px 14px}
.wrap{padding:0 60px}
.band{border-top:1px solid var(--line)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h2.lab{margin:0 0 18px}
.lab{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mono-muted)}
.meta{font:400 12px var(--mono);color:var(--mono-muted)}

/* header + hero */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:26px 60px 0}
.top .name{font:800 16px var(--sans)}
.top .place{font:400 11px var(--mono);color:var(--mono-muted)}
.hero{padding:52px 60px 44px;max-width:760px}
h1{margin:0;font:800 42px/1.1 var(--sans);letter-spacing:-.01em}
.strap{margin:12px 0 0;font:italic 500 22px/1.35 var(--sans);color:var(--accent)}
.sub{margin:16px 0 0;color:var(--soft);max-width:480px}
.demo-box{margin:26px 0 0;border:1px solid var(--line-2);border-radius:10px;
  padding:14px 18px;display:flex;align-items:center;gap:18px;background:var(--panel)}
.demo-box .stack{display:grid;flex:1;min-width:0}
.demo-box .stack>*{grid-area:1/1}
.demo-copy{margin:0;font:italic 500 15.5px/1.5 var(--sans)}
.demo-data{margin:0;font:400 12.5px/1.5 var(--mono);background:var(--machine);
  color:var(--machine-fg);border-radius:6px;padding:8px 12px;display:inline-block;
  justify-self:start;overflow-wrap:anywhere}
.demo-data b{color:var(--machine-key);font-weight:400}
.cta{display:flex;align-items:center;gap:24px;margin:28px 0 0;flex-wrap:wrap}
.btn{display:inline-block;background:var(--accent);color:var(--bg);text-decoration:none;
  font:700 15px var(--sans);padding:11px 24px;border-radius:999px}
.btn:hover{background:var(--accent-h);color:var(--bg)}
.quiet{font:italic 500 15px var(--sans);color:var(--soft);
  text-decoration:underline;text-underline-offset:3px}
.quiet:hover{color:var(--ink)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:42px 60px 38px}
.stat .n{margin:0;font:400 42px/1 var(--mono);color:var(--accent)}
.stat .n.word{font:italic 700 30px/1.4 var(--sans);color:var(--ink)}
.stat p{margin:10px 0 0;font-size:14.5px;color:var(--soft)}

/* portfolio */
.folio{padding:44px 60px 54px}
.folio>.lab{display:block;margin-bottom:18px}
.card{border:1px solid var(--line-2);border-radius:10px;background:var(--panel);
  overflow:hidden;margin-bottom:22px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:20px 24px 16px}
.card-head h3{margin:0;font:700 23px var(--sans)}
.card-head .meta{margin:3px 0 0}
.views{display:grid;padding:6px 24px 20px}
.views>*{grid-area:1/1}
.view{transition:opacity .18s ease,visibility .18s ease}
.view[hidden]{display:block!important}
.is-off{opacity:0;visibility:hidden;pointer-events:none}
.frame{border:1px solid var(--line-3);border-radius:8px;background:#fff;overflow:hidden}
.chrome{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f2eee2;
  border-bottom:1px solid var(--line-3)}
.dot{width:8px;height:8px;border-radius:50%;background:#d8d2c2}
.url{margin-left:8px;font:400 10.5px var(--mono);color:var(--mono-muted);background:#fff;
  border:1px solid var(--line-3);border-radius:99px;padding:2px 10px}
.machine{background:var(--machine);border-radius:8px;padding:22px 26px;
  font:400 12.5px/1.75 var(--mono);color:var(--machine-fg);height:100%}
.machine .lab{color:var(--machine-label);display:block;margin:0 0 4px}
.machine .blk+.blk{margin-top:16px}
.machine pre{margin:0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.machine b{color:var(--machine-key);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.chips li{border:1px solid var(--chip);border-radius:4px;padding:1px 9px}
.result{margin:0;padding:0 24px 20px;font:400 12.5px/1.5 var(--mono);color:var(--accent)}
.result a{color:inherit}

/* toggle */
.tg{position:relative;display:grid;background:var(--track);border:1px solid var(--track-b);
  border-radius:999px;padding:3px;cursor:pointer;flex:none}
.tg--card{grid-template-columns:118px 118px}
.tg--mini{grid-template-columns:54px 54px}
.tg .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  background:var(--thumb);border-radius:999px;transition:transform .19s ease}
.tg[aria-checked="true"] .thumb{transform:translateX(100%)}
.tg span.l{position:relative;z-index:1;text-align:center;font:500 11.5px var(--mono);
  padding:7px 0;color:var(--lab-off);transition:color .19s ease}
.tg--mini span.l{font-size:11px;padding:5px 0}
.tg[aria-checked="false"] .l1,.tg[aria-checked="true"] .l2{color:var(--lab-on)}

/* how / services / about / contact */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:44px 60px}
.step .n{font:400 12px var(--mono);color:var(--mono-muted)}
.step h3{margin:8px 0 0;font:700 20px var(--sans)}
.step p{margin:8px 0 0;font-size:15px;color:var(--soft)}
.svc{padding:44px 60px}
.svc ul{list-style:none;margin:16px 0 0;padding:0}
.svc li{display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}
.svc .what{flex:1 1 22em}
.svc .what b{font-weight:700}
.svc .what span{color:var(--soft)}
.svc .price{font:400 13px var(--mono);color:var(--mono-muted);white-space:nowrap}
.about{display:flex;gap:32px;align-items:flex-start;padding:44px 60px;flex-wrap:wrap}
.about p{margin:0;max-width:480px}
.about .shot{width:180px;flex:none}
.about .shot img,.about .ph{border-radius:8px;width:180px;height:180px;object-fit:cover}
.about .ph{background:var(--panel);border:1px dashed var(--line-2);display:flex;
  align-items:center;justify-content:center;font:400 11px var(--mono);
  color:var(--mono-muted);text-align:center;padding:12px}
.contact{padding:44px 60px 20px}
.contact .lines{margin:14px 0 0;font-size:16.5px}
form{display:flex;gap:10px;margin:22px 0 0;flex-wrap:wrap;max-width:560px}
input[type=url],input[type=text]{flex:1 1 18em;font:400 15px var(--sans);padding:11px 14px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--panel);color:var(--ink)}
button.btn{border:0;cursor:pointer;font:700 15px var(--sans)}
footer{padding:36px 60px 48px;margin-top:24px;border-top:1px solid var(--line);
  color:var(--soft);font-size:15px}
footer .nap{margin:0}
footer .links{margin:12px 0 0;font:400 12px var(--mono)}
footer .links a{display:inline-block;padding:6px 0;margin:0 18px 0 0}
footer .cr{margin:14px 0 0;font:400 12px var(--mono);color:var(--mono-muted)}

@media(max-width:820px){
  .wrap,.hero,.stats,.folio,.steps,.svc,.about,.contact,footer{padding-left:32px;padding-right:32px}
  .top{padding-left:32px;padding-right:32px}
  .stats,.steps{grid-template-columns:1fr;gap:26px}
  h1{font-size:34px}
}
@media(max-width:520px){
  .hero,.stats,.folio,.steps,.svc,.about,.contact,footer,.top{padding-left:20px;padding-right:20px}
  h1{font-size:29px}
  .strap{font-size:19px}
  .card-head{padding:16px 16px 12px}
  .views{padding:4px 16px 16px}
  .result{padding:0 16px 16px}
  .machine{padding:16px 16px}
  .tg--card{grid-template-columns:1fr 1fr;width:100%}
  .card-head .tg{width:100%}
  .demo-box{flex-direction:column;align-items:stretch;gap:12px}
  .demo-box .tg--mini{align-self:flex-start}
  .tg span.l{padding:13px 0}
}
@media(prefers-reduced-motion:reduce){
  *,.view,.tg .thumb,.tg span.l{transition:none!important}
}