/* Self-hosted so the page never waits on another server's stylesheet. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Cut paper: coloured sheets laid over each other, held down with yellow tape. */
:root {
  --ink: #2a1f3d;
  --bg: #e4edf3;
  --sky: #a9d4f5;
  --butter: #ffd873;
  --mint: #9fe3c4;
  --lilac: #cdb8f2;
  --coral: #ff8f73;
  --gutter: max(clamp(20px, 7vw, 104px), calc((100vw - 1560px) / 2));  /* content stops at 1560px and centres on big screens */
  --art: #2a1f3d;
  --on-ink: #fff;
  --dash: rgb(42 31 61 / 0.3);
  --s0: #fff;
  --s1: #a9d4f5;
  --s4: #cdb8f2;
  --s5: #ff8f73;
  --sp: #2a1f3d;
  --glass: rgb(255 255 255 / 0.72);
  --glass-line: rgb(255 255 255 / 0.8);
}

/* Night keeps the paper idea: the sheets go deep, the service cards stay lit. */
:root[data-theme="dark"] {
  --ink: #f1ecff;
  --bg: #17132b;
  --on-ink: #17132b;
  --dash: rgb(241 236 255 / 0.3);
  --s0: #211b3d;
  --s1: #173a5e;
  --s4: #39296f;
  --s5: #6e2b20;
  --sp: #0f0c20;
  --glass: rgb(23 19 43 / 0.66);
  --glass-line: rgb(255 255 255 / 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

/* Added after load: smooth scrolling during load gets cut off by ScrollTrigger, and links to a section stop at the top. */
@media (prefers-reduced-motion: no-preference) {
  html.smooth { scroll-behavior: smooth; }
}

html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  transition: background-color 0.3s;
  font: 500 1.0625rem/1.55 "Figtree", "Segoe UI", sans-serif;
  text-rendering: geometricPrecision;  /* keeps letter spacing even on the tilted sheets */
  overflow-x: hidden;
}

h1, h2, p, ul, figure { margin: 0; padding: 0; }

ul { list-style: none; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* No selection on controls and paper decoration. Body text and the email stay copyable, in the paper's own colour. */
a:not(.mail), button, .nav, .ransom, .scraps, .piece, .eg, .tape, .promise span, img, svg { -webkit-user-select: none; user-select: none; }
::selection { color: #2a1f3d; background: var(--butter); }

main { overflow-x: clip; }

/* Hero */

.hero {
  display: flex;
  flex-direction: column;
  min-height: 94vh;
  min-height: 94svh;
  padding: 96px var(--gutter) 56px;
  overflow: hidden;
}

/* Glass only here: it needs content sliding behind it to read as glass. */
.nav {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: min(calc(100% - 24px), calc(100% - 2 * var(--gutter) + 40px));  /* with its 20px padding, the menu lines up with the content */
  padding: 4px 10px 4px 20px;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: var(--glass);
  box-shadow: 0 10px 28px rgb(23 19 43 / 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  transform: translateX(-50%);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.brand .short { display: none; }
.brand { padding-block: 10px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
.links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); font-weight: 700; }
.links a { padding-block: 10px; text-decoration: none; }

.theme { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.theme[hidden] { display: none; }
.track { display: block; width: 62px; height: 34px; padding: 3px; border-radius: 17px; background: rgb(42 31 61 / 0.14); }
:root[data-theme="dark"] .track { background: rgb(241 236 255 / 0.18); }
.knob { position: relative; display: block; width: 28px; height: 28px; border-radius: 50%; color: #2a1f3d; background: var(--butter); box-shadow: 0 2px 5px rgb(0 0 0 / 0.3); transition: transform 0.25s ease; }
:root[data-theme="dark"] .knob { background: var(--lilac); transform: translateX(28px); }
.knob svg { position: absolute; inset: 5px; width: 18px; height: 18px; transition: opacity 0.2s; }
.sun { fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.moon { fill: currentColor; opacity: 0; }
:root[data-theme="dark"] .sun { opacity: 0; }
:root[data-theme="dark"] .moon { opacity: 1; }

.hero-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding-top: 24px;
}

h1 { font-size: clamp(2.5rem, 5.7vw, 5.5rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; }

.lede { max-width: 30em; margin-top: 22px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.see { display: inline-block; padding-block: 11px; font-weight: 700; }

/* Real product screens dropped onto two paper circles, with what they actually do pinned on top. */
.scene { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; justify-self: end; }
.disc { position: absolute; border-radius: 50%; box-shadow: 0 10px 18px rgb(42 31 61 / 0.2); }
.d1 { inset: 0; background: var(--butter); }
.d2 { inset: 17% 17% 17% 17%; background: var(--coral); }
.piece { position: absolute; height: auto; box-shadow: 0 8px 16px rgb(42 31 61 / 0.3); }
img.piece { border: 4px solid #fff; border-radius: 10px; }
.p-main { z-index: 1; left: 5%; top: 24%; width: 90%; transform: rotate(-2deg); }
.p-top { right: 2%; top: 5%; width: 52%; transform: rotate(5deg); }
.p-low { z-index: 2; left: 1%; bottom: 7%; width: 54%; transform: rotate(4deg); }
.chip { z-index: 3; padding: 0.35em 0.75em; border-radius: 4px; color: var(--art); background: #fff; font-size: clamp(0.72rem, 1.05vw, 0.95rem); font-weight: 700; white-space: nowrap; }
.c1 { left: 3%; top: 14%; transform: rotate(-3deg); }
.c2 { right: 1%; top: 50%; background: var(--mint); transform: rotate(3deg); }
.c3 { right: 5%; bottom: 13%; background: var(--sky); transform: rotate(-2deg); }

.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 12px;
  color: var(--on-ink);
  background: var(--ink);
  box-shadow: 0 5px 0 #6c5a8e;
  font-weight: 700;
  text-decoration: none;
}

/* Sheets */

.sheet {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: -26px;
  padding: clamp(52px, 7vw, 92px) var(--gutter);
  box-shadow: 0 -10px 22px rgb(42 31 61 / 0.16);
}
.s0 { display: block; background: var(--s0); transform: rotate(0.4deg) scale(1.02); }
.s1 { background: var(--s1); transform: rotate(-0.7deg) scale(1.02); }
.s4 { background: var(--s4); transform: rotate(0.5deg) scale(1.02); }
.s5 { display: block; background: var(--s5); text-align: center; transform: rotate(-0.4deg) scale(1.02); }

.s0-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 32px; }

/* Four cut-paper cards, each taped on at its own slight angle. */
.build { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); margin-top: clamp(36px, 4vw, 52px); }
.card, .trail {
  position: relative;
  padding: 30px clamp(18px, 1.8vw, 26px) 26px;
  border-radius: 4px;
  color: var(--art);
  box-shadow: 0 2px 0 rgb(42 31 61 / 0.14), 0 14px 24px rgb(42 31 61 / 0.18);
  transition: box-shadow 0.2s ease;
}
.card::before, .trail::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  background: #ffd21f;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
  opacity: 0.92;
  transform: rotate(2deg);
}
.c-auto { background: var(--coral); transform: rotate(-1.6deg); }
.c-ai { background: var(--mint); transform: rotate(1.2deg) translateY(22px); }
.c-web { background: var(--lilac); transform: rotate(-0.9deg); }
.c-app { background: var(--butter); transform: rotate(1.7deg) translateY(22px); }
/* A small real-world example of each service, on white so nothing reads as a black icon. */
.eg { display: flex; flex-direction: column; gap: 8px; min-height: 178px; margin-bottom: 18px; padding: 12px; border-radius: 6px; background: #fff; box-shadow: 0 2px 5px rgb(42 31 61 / 0.14); font-size: 0.9rem; line-height: 1.3; }
.eg-tag { font-size: 0.8rem; font-weight: 700; opacity: 0.7; }
.flow, .jobs-list { display: grid; flex: 1; align-content: space-evenly; gap: 6px; margin: 0; padding: 0; list-style: none; }
.flow li, .jobs-list li { padding: 7px 9px; border-radius: 5px; background: #fff0ea; font-weight: 600; }
.jobs-list li { display: flex; justify-content: space-between; gap: 8px; background: #fff6dc; }
.msg { max-width: 88%; padding: 8px 11px; border-radius: 12px; font-weight: 600; }
.them { align-self: flex-end; background: #ece6fa; }
.bot { background: #d3f3e4; }
.mini { display: grid; flex: 1; align-content: start; justify-items: start; gap: 6px; padding: 8px; border-radius: 5px; background: #f1ebfd; }
.mini .url { justify-self: stretch; padding: 2px 8px; border-radius: 9px; background: #fff; font-size: 0.75rem; }
.mini strong { font-family: "Fraunces", Georgia, serif; font-size: 1.02rem; line-height: 1.15; }
.order { padding: 3px 10px; border-radius: 5px; color: #fff; background: #d8362b; font-size: 0.78rem; font-weight: 700; }
.menu { font-size: 1.05rem; letter-spacing: 0.2em; }
.card h3 { margin-bottom: 6px; font-size: clamp(1.4rem, 2vw, 2.1rem); }
.s0 { padding-bottom: clamp(76px, 9vw, 116px); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Only the shadow changes: moving or straightening a tilted card redraws its text and makes it look blurry. */
  .card:hover { z-index: 1; box-shadow: 0 4px 0 rgb(42 31 61 / 0.16), 0 22px 36px rgb(42 31 61 / 0.3); }
}



/* Dark sheet so the steps read as their own moment. These really are a sequence. */
.sp { display: block; color: #fff; background: var(--sp); transform: rotate(-0.4deg) scale(1.02); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: var(--art);
  background: var(--butter);
  font-size: 1.5rem;
  font-weight: 800;
}
.steps li:nth-child(2)::before { background: var(--mint); }
.steps li:nth-child(3)::before { background: var(--sky); }
.steps li:nth-child(4)::before { background: var(--coral); }

h1, h2 { text-wrap: balance; }

h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.025em; }

.d { margin-top: 12px; font-size: 1.15rem; }

.fl { margin-top: 14px; }
.fl li { padding: 5px 0; border-top: 2px dashed var(--dash); }

.more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 14px; font-weight: 700; }
.case {
  padding: 10px 18px;
  border: 2px solid currentColor;
  border-radius: 12px;
  text-decoration: none;
}

/* Case studies */
.cs-head { padding: 124px var(--gutter) 40px; }
/* Case studies open the same paper folders as the home page, one project at a time. */
.files { padding: 0 var(--gutter) clamp(72px, 9vw, 120px); }
.tabs { display: flex; gap: 6px; }
.tabs[hidden] { display: none; }
.tabs button { padding: 14px clamp(14px, 2.6vw, 34px) 22px; border: 0; border-radius: 12px 12px 0 0; color: var(--art); background: var(--folder); font: 800 clamp(1.05rem, 1.7vw, 1.3rem)/1.2 "Fraunces", Georgia, serif; cursor: pointer; opacity: 0.86; transform: translateY(10px); transition: transform 0.2s, opacity 0.2s; }
.tabs button[aria-selected="true"] { opacity: 1; transform: none; }
.file { position: relative; margin: -8px 0 40px; padding: clamp(22px, 4vw, 52px); border-radius: 0 10px 10px 10px; color: var(--art); background: var(--folder); box-shadow: 0 14px 28px rgb(42 31 61 / 0.2); --ink: var(--art); --on-ink: #fff; --dash: rgb(42 31 61 / 0.3); }
.file-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gallery img { width: 100%; height: auto; border: 6px solid #fff; border-radius: 14px; box-shadow: 0 8px 16px rgb(42 31 61 / 0.22); }
.gallery figcaption, .caption { margin-top: 10px; font-size: 1rem; font-weight: 600; }
.viewer { display: block; }
.viewer figure { position: relative; }
.viewer figure:not(.on) { display: none; }
.viewer figcaption { display: none; }
.screen-nav { margin-top: 22px; }
.screen-cap { font-size: 1.05rem; font-weight: 700; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.picks button { min-height: 44px; padding: 8px 16px; border: 2px solid var(--art); border-radius: 10px; color: var(--art); background: none; font: 700 1rem/1.2 "Figtree", "Segoe UI", sans-serif; cursor: pointer; }
.picks button[aria-pressed="true"] { color: #fff; background: var(--art); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.stats li { padding: 14px 16px; border-radius: 3px; background: #fff; box-shadow: 0 6px 12px rgb(42 31 61 / 0.16); line-height: 1.3; transform: rotate(-0.8deg); }
.stats li:nth-child(even) { transform: rotate(0.8deg); }
.stats strong { display: block; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.1; }
.perks-head { margin: 34px 0 14px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.perks li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; gap: 2px 12px; padding: 14px; border-radius: 8px; background: rgb(255 255 255 / 0.55); }
.perks span { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 1.3rem; box-shadow: 0 2px 5px rgb(42 31 61 / 0.14); }
.perks h4 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; line-height: 1.25; }
.perks p { font-size: 0.97rem; line-height: 1.4; }
.ships { margin-top: 18px; padding: clamp(18px, 2.4vw, 28px); border-radius: 8px; color: #fff; background: var(--art); }
.ships h3 { margin: 0 0 6px; font-size: 1.35rem; }
.more a:not(.case), .elsewhere a, .mail a { display: inline-block; padding-block: 11px; }

/* Screenshots are pinned to the sheet with a bit of the same yellow tape. */
.sheet figure { position: relative; transform: rotate(1.4deg); }
.sheet figure img { border: 8px solid #fff; box-shadow: 0 14px 28px rgb(42 31 61 / 0.28); }
.sheet figure::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -14px;
  left: 50%;
  width: 120px;
  height: 30px;
  margin-left: -60px;
  background: #ffd21f;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
  opacity: 0.92;
  transform: rotate(-3deg);
}

.photo {
  justify-self: center;
  width: min(100%, 260px);
  aspect-ratio: 4 / 5;
  border: 10px solid #fff;
  border-bottom-width: 44px;
  background: #e9e0fa;
  box-shadow: 0 14px 28px rgb(42 31 61 / 0.28);
}
.sheet .photo img { width: 100%; height: 100%; object-fit: cover; border: 0; box-shadow: none; }

/* Back to top: a paper circle that only appears once there is a long way back. */
.up {
  position: fixed;
  z-index: 40;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--art);
  background: var(--butter);
  box-shadow: 0 2px 0 rgb(42 31 61 / 0.2), 0 8px 16px rgb(23 19 43 / 0.32);
  opacity: 0;
  visibility: hidden;
  transform: rotate(-6deg) translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.up.on { opacity: 1; visibility: visible; transform: rotate(-6deg); }
.up svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .links a:hover { text-decoration: underline; }
  .btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 #6c5a8e; }
  .btn.wa:hover { box-shadow: 0 3px 0 #128c7e; }
  .case:hover { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }
  .up:hover { background: var(--mint); }
}

/* Torn paper scraps: the one loud moment on the page, and the range he wants people to notice. */
.ransom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; filter: drop-shadow(0 4px 5px rgb(42 31 61 / 0.28)); }
.s0-head .ransom { font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 700; }
.ransom span { padding: 3px 12px; color: var(--art); background: var(--butter); clip-path: polygon(2% 8%, 34% 0, 67% 7%, 100% 2%, 97% 93%, 62% 100%, 28% 92%, 0 98%); transform: rotate(-3deg); }
.ransom span:nth-child(2) { background: var(--mint); transform: rotate(2.5deg) translateY(4px); }
.ransom .big { padding: 6px 18px; color: #fff; background: #d8362b; font-family: "Anton", sans-serif; font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 400; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; transform: rotate(-2.5deg); }
.also { margin-top: clamp(64px, 8vw, 96px); }
.yes h3 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
/* Pinking-shear strips. Each one grows so every row ends flush with the cards below. The shadow sits on the list because clip-path cuts it off an item. */
.scraps { --pinked: polygon(7px 0, calc(100% - 7px) 0, 100% 8.33%, calc(100% - 7px) 16.67%, 100% 25.00%, calc(100% - 7px) 33.33%, 100% 41.67%, calc(100% - 7px) 50.00%, 100% 58.33%, calc(100% - 7px) 66.67%, 100% 75.00%, calc(100% - 7px) 83.33%, 100% 91.67%, calc(100% - 7px) 100%, 7px 100%, 0 91.67%, 7px 83.33%, 0 75.00%, 7px 66.67%, 0 58.33%, 7px 50.00%, 0 41.67%, 7px 33.33%, 0 25.00%, 7px 16.67%, 0 8.33%); display: flex; flex-wrap: wrap; gap: 12px 8px; margin: 22px 0; padding: 0; list-style: none; filter: drop-shadow(0 3px 3px rgb(42 31 61 / 0.24)); }
.scraps li { flex: 1 1 auto; padding: 9px 24px; color: var(--art); font-weight: 700; text-align: center; background: var(--sky); clip-path: var(--pinked); transform: rotate(-0.8deg); }
.scraps li:nth-child(5n+2) { background: var(--coral); transform: rotate(0.7deg); }
.scraps li:nth-child(5n+3) { background: var(--butter); transform: rotate(-0.4deg); }
.scraps li:nth-child(5n+4) { background: var(--mint); transform: rotate(0.9deg); }
.scraps li:nth-child(5n) { background: var(--lilac); transform: rotate(-0.6deg); }
/* Fixed row breaks: left to wrap, wide screens stretch two strips across a row and laptops strand one. */
@media (min-width: 1000px) {
  .scraps { row-gap: 6px; }
  .scraps::before, .scraps::after { content: ""; flex-basis: 100%; }
  .scraps::before { order: 1; }
  .scraps::after { order: 3; }
  .scraps li:nth-child(n+4) { order: 2; }
  .scraps li:nth-child(n+7) { order: 4; }
}
@media (min-width: 1360px) {
  .scraps::after { content: none; }
  .scraps li:nth-child(4) { order: 0; }
  .scraps li:nth-child(n+7) { order: 2; }
}
.yes > p { max-width: 52em; font-size: 1.15rem; text-wrap: balance; }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.promise { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: center; gap: 2px 14px; padding: 16px 18px; border-radius: 4px; color: var(--art); background: var(--butter); box-shadow: 0 2px 0 rgb(42 31 61 / 0.14), 0 12px 20px rgb(42 31 61 / 0.18); transform: rotate(0.7deg); }
.promise:nth-child(even) { transform: rotate(-0.7deg); }
.promise:nth-child(2) { background: var(--mint); }
.promise:nth-child(3) { background: var(--coral); }
.promise:nth-child(4) { background: var(--sky); }
.promise:nth-child(5) { background: var(--lilac); }
.promise:nth-child(6) { background: var(--mint); }
.promise span { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 1.3rem; }
.promise h3 { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.2; }

/* Project folders: every project in one view, with its screens pulled part way out. */
.desk { display: block; }
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 38px); margin: clamp(60px, 6vw, 96px) 0 0; padding: 0; list-style: none; }
.job { display: flex; flex-direction: column; }
.j1 { --folder: var(--butter); }
.j2 { --folder: var(--mint); }
.j3 { --folder: var(--lilac); }
.papers { position: relative; margin-inline: 5%; }
.papers img { display: block; width: 100%; height: auto; border: 5px solid #fff; border-radius: 10px; box-shadow: 0 6px 14px rgb(42 31 61 / 0.25); transition: transform 0.3s ease; }
.papers .back { position: absolute; inset: 0; transform: rotate(3deg) translate(3%, -5%); }
.papers .front { position: relative; transform: rotate(-1deg); }
.flap {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: -24%;
  padding: 24px clamp(16px, 1.6vw, 24px) 18px;
  border-radius: 0 8px 8px 8px;
  color: var(--art);
  background: var(--folder);
  box-shadow: 0 -4px 10px rgb(42 31 61 / 0.16), 0 14px 24px rgb(42 31 61 / 0.18);
  --ink: var(--art);
  --on-ink: #fff;
  --dash: rgb(42 31 61 / 0.3);
}
.flap::before { content: ""; position: absolute; top: -24px; left: 0; width: 42%; height: 25px; border-radius: 10px 10px 0 0; background: var(--folder); }
.flap h3 { margin: 0 0 6px; font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.flap .d { font-size: 1rem; }
.flap .fl { font-size: 0.95rem; }
.swipe, .swipe-bar, .pager { display: none; }
/* One paper segment per folder, with a marker a third of the width that slides across as they swipe. */
.swipe-bar { position: relative; width: min(240px, 70%); height: 10px; margin: 0 auto; border-radius: 5px; background: linear-gradient(90deg, var(--butter) 33.3%, var(--mint) 33.3% 66.6%, var(--lilac) 66.6%); box-shadow: 0 2px 5px rgb(42 31 61 / 0.3); }
.swipe-bar::after { content: ""; position: absolute; top: -4px; left: 0; width: 33.4%; height: 18px; border: 3px solid #fff; border-radius: 9px; background: var(--art); box-shadow: 0 2px 5px rgb(42 31 61 / 0.35); transform: translateX(calc(var(--p, 0) * 200%)); }
/* The bottom margin and reversed wrap keep each case study button on the same line, even if Check live wraps. */
.flap .more { flex-wrap: wrap-reverse; gap: 4px 14px; margin-top: auto; padding-top: 14px; font-size: 0.95rem; }
@media (min-width: 1201px) {
  .jobs { transform: rotate(0.7deg); }  /* cancels the sheet's tilt so the buttons sit level */
}
@media (max-width: 1200px) {
  .jobs { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .job { justify-self: center; width: 100%; max-width: 560px; }
}
/* Touch screens swipe through the folders. A mouse can't swipe, so narrow desktop windows keep the column. */
@media (max-width: 1200px) and (pointer: coarse) {
  .swipe { display: block; margin-top: 8px; font-weight: 700; }
  .jobs { display: flex; gap: 16px; margin: 0 calc(var(--gutter) * -1); padding: 40px var(--gutter) 30px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .jobs::-webkit-scrollbar { display: none; }
  .job { flex: 0 0 min(84%, 420px); scroll-snap-align: center; }
  .swipe-bar:not([hidden]) { display: block; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .job:hover .front { transform: rotate(-1deg) translateY(-22px); }
  .job:hover .back { transform: rotate(4deg) translate(5%, -9%); }
}

/* Treasure trail: a small map pinned to the sheet. The path swings between 10% and 18%, so the text clears it. */
.trail { justify-self: center; width: min(100%, 540px); padding: 22px 0; background: var(--butter); transform: rotate(-0.8deg); }
.trail::before { background: #fff; }
.trail-line { position: absolute; top: 22px; left: 0; width: 100%; height: calc(100% - 44px); overflow: visible; }
.trail-line path { fill: none; stroke: var(--art); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.6; }
.trail ol { position: relative; display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; counter-reset: stop; }
.trail li { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 6px 18px 6px calc(18% + 30px); counter-increment: stop; }
.trail li::before {
  content: counter(stop);
  position: absolute;
  top: 50%;
  left: 10%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 6px rgb(23 19 43 / 0.28);
  font-size: 0.9rem;
  font-weight: 800;
}
.trail li:nth-child(even)::before { left: 18%; background: var(--mint); }
.trail li.x::before { content: "\2715"; width: 40px; height: 40px; margin: -20px 0 0 -20px; color: #fff; background: #d8362b; font-size: 1.1rem; }
.trail span { font-size: 0.85rem; font-weight: 700; line-height: 1.2; opacity: 0.75; }
.trail h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.01em; }
.trail p { margin-top: 2px; font-size: 0.9rem; line-height: 1.35; }
.trail .x a { display: inline-block; margin-block: -10px; padding-block: 12px; }

.tape-zone {
  margin-top: -26px;
  background: #0e1024;
  box-shadow: 0 -10px 22px rgb(42 31 61 / 0.16);
  transform: rotate(-0.3deg) scale(1.02);
}

.s5 .d { margin-top: 14px; }
.chat { margin-top: 12px; }
/* WhatsApp's own green, with dark text because white on it is too faint to read. */
.btn.wa { display: inline-flex; justify-content: center; align-items: center; gap: 10px; color: #062e23; background: #25d366; box-shadow: 0 5px 0 #128c7e; }
.wa svg { flex: none; width: 24px; height: 24px; fill: currentColor; }
.s5 h2 { max-width: 16em; margin-inline: auto; font-size: clamp(2.2rem, 5.6vw, 4.75rem); }
.mail { margin-top: 8px; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; overflow-wrap: anywhere; }
.elsewhere { display: flex; justify-content: center; gap: 24px; margin-top: 2px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .knob, .knob svg, .up { transition: none; }
}

@media (min-width: 861px) {
  .s4 .photo { grid-column: 1; }
  .trail { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 860px) {
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-top { grid-template-columns: minmax(0, 1fr); }
  .picks { justify-content: center; }
  .screen-cap { text-align: center; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs button { flex: 1; padding-inline: 6px; }
  /* Stacked layouts centre headings and short standalone items. Paragraphs, lists and steps stay left because they read better that way. */
  .hero-copy, .s0-head, .yes, .cs-head, .desk > h2, .swipe, .sp > h2, .s4 h2 { text-align: center; }
  .lede, .yes > p { margin-inline: auto; }
  .actions, .s0-head, .ransom, .scraps { justify-content: center; }
  .sheet, .s0, .s1, .sp, .s4, .s5, .tape-zone { transform: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .build { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-ai, .c-app { transform: rotate(1.2deg); }
  .s0 { padding-bottom: 60px; }
  .hero-body { grid-template-columns: minmax(0, 1fr); }
  .scene { justify-self: center; max-width: 340px; }
  .tape-front { transform: translateY(-50%) rotate(-13deg); }
  .tape-back { transform: translateY(-50%) rotate(12deg); }
}

@media (max-width: 560px) {
  h1 { font-size: clamp(2.3rem, 11vw, 3.5rem); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: 8px; padding-left: 14px; }
  .brand .full { display: none; }
  .brand { min-width: 44px; }
  .brand .short { display: inline; }
  .links { gap: 2px; font-size: 0.95rem; }
  .links a { padding: 12px 4px; }
  .scene { max-width: 340px; }
  .chip { font-size: 0.75rem; }
  .also { margin-top: 52px; }
  .promises { grid-template-columns: minmax(0, 1fr); }
  /* Check live drops under the button here. Every folder saves that row so the three buttons stay level. */
  .flap .more { flex-wrap: wrap; align-content: flex-start; min-height: 122px; }
  .flap .case { width: 100%; text-align: center; }
  .more { justify-content: center; }
  .picks button { flex: 1 1 auto; }
  .perks { grid-template-columns: minmax(0, 1fr); }
  /* One body size, one button size and one card heading size on phones. */
  .d, .lede, .yes > p { font-size: 1.0625rem; }
  .btn, .case, .flap .more, .flap .fl { font-size: 1rem; }
  .card h3, .promise h3, .flap h3, .steps h3 { font-size: 1.3rem; }
  .yes h3 { font-size: 1.5rem; }
  .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .steps li::before { grid-row: span 2; width: 44px; height: 44px; margin: 0; font-size: 1.2rem; }
  .scraps { gap: 10px 6px; }
  .scraps li { padding: 8px 15px; font-size: 0.95rem; }
  .s4 .photo { width: 170px; border-width: 7px; border-bottom-width: 28px; }
  /* Rows take their own height here, so a straight dotted line replaces the curve that needs equal rows. */
  .trail-line { display: none; }
  .trail ol { grid-auto-rows: auto; }
  .trail ol::before { content: ""; position: absolute; top: 20px; bottom: 30px; left: 10%; border-left: 3px dotted var(--art); opacity: 0.55; }
  .trail li { padding: 9px 16px 9px calc(10% + 28px); }
  .trail li:nth-child(even)::before { left: 10%; }
  .trail span { font-size: 0.95rem; }
  .trail p { font-size: 0.95rem; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .sheet { margin-top: -14px; }
  .tape-zone { margin-top: -14px; }
  .build { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .card { padding: 24px 18px 20px; }
  .eg { min-height: 0; margin-bottom: 14px; }
  .btn { display: block; width: 100%; text-align: center; }
  .btn.wa { padding-inline: 12px; }
  .sheet figure::before { width: 88px; height: 24px; margin-left: -44px; top: -11px; }
  .sheet figure img { border-width: 5px; }
}

/* Phones slide these so the sheets stay short, each in its own way. A mouse can't swipe, so narrow desktop windows keep the grid. */
@media (max-width: 560px) and (pointer: coarse) {
  .pager:not([hidden]) { display: flex; }
  .build, .promises { display: flex; margin-inline: calc(var(--gutter) * -1); overflow: auto hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .build::-webkit-scrollbar, .promises::-webkit-scrollbar, .scrap-rail::-webkit-scrollbar { display: none; }

  /* What I build: a hand of cards with named tabs. Side padding lets the first and last cards reach the centre. */
  .deck-tabs { gap: 3px; margin-top: 18px; }
  .deck-tabs button { flex: 1 1 auto; min-height: 44px; padding: 0 6px; border: 0; border-radius: 8px 8px 0 0; color: var(--art); background: var(--coral); font: 700 0.84rem/1 "Figtree", sans-serif; }
  .deck-tabs button:nth-child(2) { background: var(--mint); }
  .deck-tabs button:nth-child(3) { background: var(--lilac); }
  .deck-tabs button:nth-child(4) { background: var(--butter); }
  .deck-tabs button[aria-current="true"] { color: var(--on-ink); background: var(--ink); }
  .build { --w: min(72vw, 300px); margin-bottom: -16px; padding: 22px calc(50vw - var(--w) / 2) 44px; }
  .card { flex: 0 0 var(--w); transform-origin: 50% 100%; }
  .card + .card { margin-left: -6vw; }
  .c-ai { transform: rotate(1.2deg); }
  .c-app { transform: rotate(1.7deg); }

  /* Yes, that too: one ticket ribbon with tear lines. No shadow here: a filter would repaint on every scroll frame. */
  .scrap-rail { margin: 18px calc(var(--gutter) * -1); padding: 6px var(--gutter); overflow: auto hidden; overscroll-behavior-x: contain; scrollbar-width: none; transform: rotate(-1deg); }
  .scraps { flex-wrap: nowrap; width: max-content; gap: 0; margin: 0; justify-content: flex-start; filter: none; clip-path: var(--pinked); }
  .scraps li:nth-child(n) { flex: none; padding-inline: 18px; clip-path: none; transform: none; }
  .scraps li + li { border-left: 2px dashed rgb(42 31 61 / 0.4); }

  /* The promises: a pile of notes. Each one stops at the left edge and the next slides over it. */
  .promises { --w: 82vw; gap: 12px; margin-top: 10px; margin-bottom: -18px; padding: 20px calc(100vw - var(--w) - var(--gutter)) 36px var(--gutter); }
  .promise { flex: 0 0 var(--w); position: sticky; left: 0; box-shadow: 0 2px 6px rgb(42 31 61 / 0.18); }
  .pip-row { justify-content: center; }
  .pip-row button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 1.15rem; filter: grayscale(1); }
  .pip-row button[aria-current="true"] { background: var(--butter); filter: none; }
}
/* Runs on the compositor from scroll position, so it needs no script. Browsers without it show flat cards. */
@media (max-width: 560px) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card { animation: fan linear both; animation-timeline: view(inline); }
  }
}
@keyframes fan {
  from { rotate: 4deg; scale: 0.88; }
  50% { rotate: 0deg; scale: 1; }
  to { rotate: -4deg; scale: 0.88; }
}

.lost { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: center; justify-items: center; min-height: 100svh; }

/* Reveal items wait hidden until scrolled to, which would leave a printed page or PDF empty. */
@media print {
  .build, .card, .scraps li, .promise, .job, .steps li, .sheet figure, .trail li { opacity: 1 !important; transform: none !important; }
  .trail-line { clip-path: none !important; }
  .nav, .up, .tabs { display: none; }
  .file[hidden], .viewer figure, .viewer figcaption { display: block !important; }
  .screen-nav { display: none; }
}

/* Phones held sideways: the fold is short, so the hero stops trying to fill it. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 0; }
}

/* Headings use Fraunces with its soft, wonky cut (built into the font file), so the letters look cut from the same paper as the sheets. */
h1, h2, h3, .brand, .stats strong, .ransom span:not(.big), .steps li::before, .trail li::before { font-family: "Fraunces", Georgia, serif; }
h1, h2, h3, .brand, .stats strong { letter-spacing: -0.015em; }