/* GENERATED by build/build.mjs from style.css — do not edit.
   Everything not needed to paint above the fold. */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
#work{padding-top:132px}
.work-head{max-width:44rem;margin:0 auto;text-align:center}
.chip{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
  background:rgba(10,11,13,.045);
  font:400 10.5px var(--mono);text-transform:uppercase;letter-spacing:.12em;
}
h2{
  margin:20px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5vw,52px);line-height:1.14;letter-spacing:-.018em;text-wrap:balance;
}
.sub{margin:20px 0 0;font-size:16px;color:var(--ink-11);text-wrap:balance}

.cards{display:grid;gap:16px;margin-top:64px}
@media (min-width:960px){.cards{grid-template-columns:1fr 1fr}}

.case{
  background:var(--paper);border-radius:26px;overflow:hidden;
  transition:box-shadow .45s var(--ease),transform .45s var(--ease),background-color .45s var(--ease);
}
.case:hover{background:#f7f8fa;transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(10,11,13,.04),0 26px 50px -34px rgba(10,11,13,.32)}
.case-link{display:flex;flex-direction:column;height:100%;padding:30px 30px 0;
  text-decoration:none;color:inherit}
.case-link:focus-visible{outline:2px solid #2f7dff;outline-offset:-4px;border-radius:26px}

.case header{display:flex;align-items:center;gap:12px}
.case h3{font-size:25px;font-weight:400;letter-spacing:-.02em;line-height:1}
.arrow{
  margin-left:auto;display:grid;place-items:center;width:30px;height:30px;color:var(--ink-10);
  transition:transform .4s var(--ease),color .4s var(--ease);
}
.arrow svg{width:20px;height:20px}
.case:hover .arrow{transform:translateX(5px);color:var(--ink)}

.case p{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink-11);max-width:46ch}

.stats{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px}
.stats li{display:flex;flex-direction:column;font-size:12.5px;color:var(--ink-10)}
.stats b{font-family:var(--serif);font-size:21px;font-weight:400;color:var(--ink);letter-spacing:-.01em}

/* --- preview tiles, bleeding off the bottom edge --- */
/* margin-top:auto keeps the tiles flush with the bottom of every card in a
   row, however long the description above them runs */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto;padding-top:26px}
.shot{
  position:relative;margin:0;height:212px;border-radius:14px 14px 0 0;overflow:hidden;
  background:linear-gradient(150deg,var(--a),var(--b));
  box-shadow:0 -1px 0 rgba(255,255,255,.4) inset,0 18px 34px -26px rgba(10,11,13,.6);
  transition:transform .55s var(--ease);
}
.case:hover .shot{transform:translateY(-6px)}
.case:hover .shot:last-child{transition-delay:.05s}
/* caption sits at the top: the tile is deliberately clipped by the card's
   bottom edge, so anything anchored to its foot would be cut in half */
.shot figcaption{
  position:absolute;left:14px;right:14px;top:12px;z-index:2;
  font:400 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;
  color:rgba(255,255,255,.62);
}
.shot.pale figcaption{color:rgba(19,19,21,.38)}
.shot::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent 38%);
}
.shot.pale::after{background:linear-gradient(to bottom,rgba(255,255,255,.62),transparent 38%)}

/* tiny UI mocks, drawn in CSS so the site ships with no image assets */
.mock-panes{position:absolute;inset:46px 0 0 18px;display:grid;
  grid-template-columns:104px 1fr;gap:10px;grid-auto-rows:11px;align-content:start}
.mock-panes span{grid-column:1;height:11px;border-radius:3px;background:rgba(255,255,255,.24)}
.mock-panes span:nth-child(2){background:rgba(255,255,255,.5);width:86%}
.mock-panes span:nth-child(4){width:78%}
.mock-panes span:nth-child(5){width:64%}
.mock-panes .pane{grid-column:2;grid-row:1/8;border-radius:8px 0 0 0;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06))}

.mock-code{position:absolute;inset:48px 22px 0 22px;display:grid;gap:9px;align-content:start}
.mock-code span{height:8px;border-radius:3px;background:rgba(19,19,21,.13)}
.mock-code span:nth-child(2){width:72%;margin-left:16px}
.mock-code span:nth-child(3){width:58%;margin-left:32px;background:rgba(31,122,92,.4)}
.mock-code span:nth-child(4){width:64%;margin-left:32px}
.mock-code span:nth-child(5){width:46%;margin-left:16px}
.mock-code span:nth-child(6){width:80%}
.mock-code span:nth-child(7){width:38%}

.mock-form{position:absolute;left:22px;right:22px;top:50px;display:grid;gap:12px}
.mock-form b{height:12px;width:62%;border-radius:4px;background:rgba(255,255,255,.62)}
.mock-form i{height:34px;border-radius:9px;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset}
.mock-form u{height:34px;width:52%;border-radius:999px;background:rgba(255,255,255,.86)}

.mock-parcels{position:absolute;left:24px;right:24px;top:56px;display:flex;gap:10px;align-items:flex-end}
.mock-parcels span{flex:1;border-radius:5px;background:rgba(19,19,21,.16);
  box-shadow:0 0 0 1px rgba(19,19,21,.08) inset}
.mock-parcels span:nth-child(1){height:76px}
.mock-parcels span:nth-child(2){height:104px;background:rgba(19,19,21,.24)}
.mock-parcels span:nth-child(3){height:58px}

.mock-phone{position:absolute;left:50%;top:50px;transform:translateX(-50%);
  width:124px;height:190px;border-radius:18px 18px 0 0;background:rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.3) inset}
.mock-phone div{position:absolute;inset:16px 14px auto 14px;display:grid;gap:9px}
.mock-phone b{height:44px;border-radius:10px;background:rgba(255,255,255,.5)}
.mock-phone i{height:10px;border-radius:4px;background:rgba(255,255,255,.24)}
.mock-phone i:last-child{width:66%}

.mock-perms{position:absolute;left:22px;right:22px;top:54px;display:grid;gap:11px}
.mock-perms span{height:40px;border-radius:11px;background:rgba(255,255,255,.72);
  box-shadow:0 0 0 1px rgba(19,19,21,.05) inset}
.mock-perms span:nth-child(2){opacity:.72}
.mock-perms span:nth-child(3){opacity:.44}

.mock-bars{position:absolute;left:22px;right:22px;top:56px;height:130px;
  display:flex;gap:9px;align-items:flex-end}
.mock-bars span{flex:1;border-radius:4px 4px 0 0;background:rgba(255,255,255,.3)}
.mock-bars span:nth-child(1){height:44%}
.mock-bars span:nth-child(2){height:72%}
.mock-bars span:nth-child(3){height:56%;background:rgba(255,255,255,.62)}
.mock-bars span:nth-child(4){height:88%}
.mock-bars span:nth-child(5){height:38%}
.mock-bars span:nth-child(6){height:64%}

.mock-table{position:absolute;left:22px;right:22px;top:52px;display:grid;gap:10px}
.mock-table span{height:14px;border-radius:4px;background:rgba(19,19,21,.1)}
.mock-table span:nth-child(1){background:rgba(19,19,21,.2);width:44%}
.mock-table span:nth-child(3){width:82%}
.mock-table span:nth-child(5){width:66%}

/* ============================================================
   footer
   ============================================================ */
footer{margin-top:130px;background:var(--night);color:#fff;overflow:hidden;position:relative}
.foot-top{max-width:880px;margin:0 auto;padding:112px 24px 0;text-align:center}
.foot-top .emblem{color:#fff;width:72px;height:72px;opacity:.9}
.foot-top p{
  margin:52px 0 0;font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,7vw,56px);line-height:1.14;letter-spacing:-.012em;
  color:rgba(255,255,255,.92);
}
.foot-mid{max-width:640px;margin:70px auto 0;padding:0 24px;text-align:center}
.rule-dots{height:1px;background:repeating-linear-gradient(to right,rgba(255,255,255,.3) 0 1px,transparent 1px 5px)}
.foot-mid p{margin:64px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.55);text-wrap:balance}
.foot-mid .btn.light{margin-top:28px;background:rgba(255,255,255,.94)}

.wordmark{
  margin-top:76px;text-align:center;font-family:var(--serif);
  font-size:clamp(72px,19vw,260px);line-height:.86;letter-spacing:-.03em;
  color:rgba(255,255,255,.07);user-select:none;white-space:nowrap;
}
.foot-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;padding:24px 24px 32px;
  font:400 11.5px var(--mono);text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.55);
}
.foot-links a{text-decoration:none;transition:color .15s var(--ease)}
.foot-links a:hover{color:rgba(255,255,255,.95)}

@media (max-width:700px){
  #work{padding-top:96px}
  .shots{gap:8px}
  .shot{height:168px}
}

/* ============================================================
   case-study pages
   ============================================================ */
.cs-outcomes{margin-top:34px;padding-top:52px;border-top:1px solid var(--rule)}
.cs-outcomes dl{display:grid;gap:2px;margin:30px 0 0}
.cs-outcomes dl>div{
  display:grid;gap:4px 28px;grid-template-columns:minmax(0,190px) 1fr;align-items:baseline;
  padding:17px 4px;border-bottom:1px solid var(--rule);
}
.cs-outcomes dl>div:first-child{border-top:1px solid var(--rule)}
.cs-outcomes dt{font-family:var(--serif);font-size:26px;letter-spacing:-.015em;line-height:1.1}
.cs-outcomes dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink-10)}

.cs-learned ul{display:grid;gap:20px;margin:30px 0 0}
.cs-learned li{
  display:grid;gap:8px;padding:24px 26px;border-radius:18px;background:var(--paper);
}
.cs-learned b{font-weight:500;font-size:16.5px;letter-spacing:-.01em}
.cs-learned span{max-width:62ch;font-size:15px;line-height:1.65;color:var(--ink-11)}

/* --- prev / next --- */
.cs-next{
  display:grid;gap:12px;max-width:820px;margin:96px auto 0;padding:0 24px;
}
@media (min-width:760px){.cs-next{grid-template-columns:1fr 1fr}}
.cs-next a{
  display:grid;gap:6px;padding:26px 28px;border-radius:20px;background:var(--paper);
  text-decoration:none;transition:background-color .35s var(--ease),transform .35s var(--ease);
}
.cs-next a:hover{background:#f7f8fa;transform:translateY(-2px)}
.cs-next span{font:400 10.5px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.cs-next b{font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:-.015em}
.cs-next a:last-child{text-align:right}

@media (max-width:700px){
  .cs-outcomes dl>div{grid-template-columns:1fr}
  .cs-next a:last-child{text-align:left}
}

/* ============================================================
   reduced motion — everything resolves to its rest state
   ============================================================ */